@brggroup/share-lib 0.1.76 → 0.1.78

package/fesm2022/brggroup-share-lib.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, InjectionToken, NgZone, DestroyRef, Component, HostListener, ViewContainerRef, EventEmitter, Input, Output, ViewChild, Directive, Optional, Self, HostBinding, Pipe, ChangeDetectorRef, forwardRef, ChangeDetectionStrategy } from '@angular/core';
-import * as i1$7 from '@angular/router';
+import { inject, Injectable, InjectionToken, NgZone, DestroyRef, Component, HostListener, ViewContainerRef, EventEmitter, Input, Output, ViewChild, Directive, Optional, Self, Pipe, HostBinding, ChangeDetectorRef, forwardRef, ChangeDetectionStrategy } from '@angular/core';
+import * as i1$8 from '@angular/router';
 import { Router, ActivatedRoute, NavigationEnd, RouterModule, RouterOutlet } from '@angular/router';
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import * as i3 from '@ngx-translate/core';
@@ -32,6 +32,7 @@ import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
 import { parse, isValid, startOfWeek, endOfWeek, subWeeks, startOfMonth, endOfMonth, subMonths } from 'date-fns';
 import * as i6$1 from 'ng-zorro-antd/input-number';
 import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i13 from 'ng-zorro-antd/select';
 import { NzSelectModule } from 'ng-zorro-antd/select';
 import * as i8 from 'ng-zorro-antd/tooltip';
@@ -78,12 +79,11 @@ import * as i5$4 from 'ng-zorro-antd/empty';
 import { NzEmptyModule, NzEmptyComponent } from 'ng-zorro-antd/empty';
 import * as i16 from 'ng-zorro-antd/alert';
 import { NzAlertModule, NzAlertComponent } from 'ng-zorro-antd/alert';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$6 from 'ng-zorro-antd/tabs';
 import { NzTabsModule } from 'ng-zorro-antd/tabs';
 import * as i12 from '@angular/cdk/clipboard';
 import { ClipboardModule } from '@angular/cdk/clipboard';
-import * as i10 from 'ng-zorro-antd/tree';
+import * as i1$7 from 'ng-zorro-antd/tree';
 import { NzTreeModule, NzTreeNode } from 'ng-zorro-antd/tree';
 import * as signalR from '@microsoft/signalr';
 import { HubConnectionState } from '@microsoft/signalr';
@@ -100,7 +100,7 @@ import * as i11 from 'ng-zorro-antd/switch';
 import { NzSwitchModule } from 'ng-zorro-antd/switch';
 import * as i3$7 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
-import * as i10$1 from 'ng-zorro-antd/slider';
+import * as i10 from 'ng-zorro-antd/slider';
 import { NzSliderModule } from 'ng-zorro-antd/slider';
 import * as i2$5 from 'ng-zorro-antd/layout';
 import { NzLayoutModule } from 'ng-zorro-antd/layout';
@@ -533,14 +533,56 @@ class NotiService {
         this.notification.error('Lỗi phát sinh', errorMsg, {
             showDetail: !!_data?.Data,
             onDetail: () => {
+                // 1. Hàm helper để tìm và cắt các chuỗi dài (stack trace) thành Array
+                const formatTrace = (data) => {
+                    if (!data || typeof data !== 'object')
+                        return data;
+                    // Clone data để không làm thay đổi object gốc của ứng dụng
+                    const cloned = JSON.parse(JSON.stringify(data));
+                    const traverse = (obj) => {
+                        for (let key in obj) {
+                            if (typeof obj[key] === 'string') {
+                                // Cắt chuỗi nếu phát hiện các ký tự xuống dòng (kể cả dạng text literal \r\n từ backend)
+                                const lines = obj[key].split(/\\r\\n|\\n|\r\n|\n/);
+                                if (lines.length > 1) {
+                                    // Lọc bỏ các khoảng trắng thừa và các dòng trống
+                                    obj[key] = lines.map((l) => l.trim()).filter((l) => l.length > 0);
+                                }
+                            }
+                            else if (typeof obj[key] === 'object' && obj[key] !== null) {
+                                traverse(obj[key]);
+                            }
+                        }
+                    };
+                    traverse(cloned);
+                    return cloned;
+                };
+                // 2. Gọi hàm formatTrace bọc lấy _data
                 const detailContent = {
                     API_URL: err?.url || 'Không xác định',
-                    Details: _data,
+                    Details: formatTrace(_data),
                 };
+                const formattedJson = escapeHtml(JSON.stringify(detailContent, null, 2));
+                // 3. Cập nhật CSS: Thêm break-all để ép bẻ dòng với các đường dẫn file (C:\...) quá dài không có khoảng trắng
+                const htmlContent = `
+        <pre style="
+          white-space: pre-wrap; 
+          word-break: break-all; 
+          overflow-wrap: break-word;
+          background-color: #f5f5f5; 
+          padding: 12px; 
+          border-radius: 4px; 
+          font-family: monospace; 
+          font-size: 13px;
+          max-height: 60vh;
+          overflow-y: auto;
+          overflow-x: hidden;
+        ">${formattedJson}</pre>
+      `;
                 this.modal.error({
                     nzTitle: 'Chi tiết lỗi',
-                    nzContent: escapeHtml(JSON.stringify(detailContent, null, 2)),
-                    nzWidth: this.device.isMobile ? '90vw' : '60vw',
+                    nzContent: htmlContent,
+                    nzWidth: this.device.isMobile ? '90vw' : '75vw', // Nới rộng thêm một chút trên desktop
                     nzDraggable: true,
                     nzCentered: true,
                     nzOkText: 'Đóng',
@@ -3002,15 +3044,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 args: ['inputElement']
             }] } });
 
+class DisplayItemPipe {
+    transform(item, displayField, displayFields) {
+        if (!item)
+            return '';
+        if (displayField) {
+            return item[displayField];
+        }
+        if (displayFields?.length === 2) {
+            return `[${item[displayFields[0]]}] [${item[displayFields[1]]}]`;
+        }
+        if (displayFields?.length) {
+            return displayFields
+                .map((field) => item[field])
+                .filter((x) => x)
+                .join(' - ');
+        }
+        return String(item);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DisplayItemPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: DisplayItemPipe, isStandalone: true, name: "displayItem" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DisplayItemPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'displayItem',
+                    standalone: true, // Rất tốt cho Angular 19
+                }]
+        }] });
+
 class ExtendSelectComponent {
+    destroyRef = inject(DestroyRef);
     label = '';
     floatingLabel = true;
     placeHolder = '';
     labelAlign = 'left';
     dropdownMatchSelectWidth = false;
-    /**
-     * default = 8
-     */
     labelSpan = 8;
     labelFlex = null;
     get disabled() {
@@ -3018,16 +3087,9 @@ class ExtendSelectComponent {
     }
     set disabled(val) {
         this._disabled = val;
-        if (this.formData && this.controlName) {
-            const control = this.formData.controls[this.controlName];
-            if (this._disabled) {
-                control.disable({ emitEvent: false });
-            }
-            else {
-                control.enable({ emitEvent: false }); // <-- bỏ disable
-            }
-        }
+        this.updateFormControlState();
     }
+    _disabled = false;
     required = false;
     noBottom = false;
     multiple = false;
@@ -3036,91 +3098,86 @@ class ExtendSelectComponent {
     inputWidth = '';
     inputHeight = '';
     borderBottomOnly = false;
-    /**
-     *
-     */
     displayInline = false;
     size = 'default';
     lstItem = [];
     displayField = '';
     displayFields = [];
     info = '';
-    /**
-     * Không có thì value sẽ là cả object
-     */
     valueField = '';
     formData;
     controlName;
     _ngModel = null;
+    isSubmited = false;
+    get maxMultipleCount() {
+        // Nếu là multiple thì giới hạn số lượng bằng độ dài mảng,
+        // Nếu không phải multiple thì gán Infinity để NG-ZORRO tự động ẨN bộ đếm.
+        return this.multiple ? this.lstItem.length : Infinity;
+    }
     _ngModelChange = new EventEmitter();
     itemChange = new EventEmitter();
     onFocus = new EventEmitter();
-    isSubmited = false;
     get cssHeight() {
-        return this.inputHeight ? +this.inputHeight.replaceAll('px', '') - 1 + 'px' : null;
+        return this.inputHeight ? +this.inputHeight.replace('px', '') - 1 + 'px' : null;
     }
-    _disabled = false;
     ngOnInit() {
         if (this.formData && this.controlName) {
-            this.formData.controls[this.controlName].valueChanges.subscribe((val) => {
-                this._ngModelChange.emit(val);
-                this.itemChange.emit(this.lstItem.find((x) => x[this.valueField] == val));
-            });
-            if (this.required) {
-                this.formData.controls[this.controlName].setValidators(Validators.required);
-            }
-            if (this.disabled) {
-                this.formData.controls[this.controlName].disable();
+            const control = this.formData.controls[this.controlName];
+            if (control) {
+                if (this.required) {
+                    control.setValidators(Validators.required);
+                }
+                this.updateFormControlState();
+                // Lắng nghe thay đổi form an toàn, tự động hủy khi component bị destroy
+                control.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((val) => {
+                    this._ngModelChange.emit(val);
+                    this.itemChange.emit(this.findSelectedItem(val));
+                });
             }
         }
     }
-    getDisplay(item) {
-        if (this.displayField) {
-            return item[this.displayField];
+    updateFormControlState() {
+        if (this.formData && this.controlName) {
+            const control = this.formData.controls[this.controlName];
+            if (control) {
+                this._disabled ? control.disable({ emitEvent: false }) : control.enable({ emitEvent: false });
+            }
         }
-        if (this.displayFields?.length) {
-            const display = this.displayFields
-                .map((field) => item[field])
-                .filter((x) => x)
-                .join(' - ');
-            return display;
+    }
+    findSelectedItem(val) {
+        if (!this.valueField)
+            return val;
+        // Xử lý multiple
+        if (Array.isArray(val)) {
+            return this.lstItem.filter((x) => val.includes(x[this.valueField]));
         }
-        return item;
+        return this.lstItem.find((x) => x[this.valueField] == val);
     }
     onSelectChange(val) {
-        if (val instanceof Array && val.find((x) => x == '__all__')) {
+        if (Array.isArray(val) && val.includes('__all__')) {
             const allIds = this.lstItem.map((x) => (this.valueField ? x[this.valueField] : x));
             val = allIds;
         }
         this._ngModel = val;
         this._ngModelChange.emit(val);
         if (this.valueField) {
-            this.itemChange.emit(this.lstItem.find((x) => x[this.valueField] == val));
+            this.itemChange.emit(this.findSelectedItem(val));
         }
     }
     get isInvalidNgModel() {
         if (!this.required)
             return false;
-        // Kiểm tra rỗng cho cả trường hợp chuỗi, null, undefined và mảng (multiple)
-        const isEmpty = this._ngModel === null ||
-            this._ngModel === undefined ||
-            this._ngModel === '' ||
-            (Array.isArray(this._ngModel) && this._ngModel.length === 0);
-        return isEmpty;
+        return (this._ngModel == null || this._ngModel === '' || (Array.isArray(this._ngModel) && this._ngModel.length === 0));
     }
     get customValidateStatus() {
-        // Sẽ báo đỏ nếu field trống VÀ (component cha đã ấn submit)
-        if (this.isInvalidNgModel && this.isSubmited) {
-            return 'error';
-        }
-        return '';
+        return this.isInvalidNgModel && this.isSubmited ? 'error' : '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendSelectComponent, isStandalone: true, selector: "extend-select", inputs: { label: "label", floatingLabel: "floatingLabel", placeHolder: "placeHolder", labelAlign: "labelAlign", dropdownMatchSelectWidth: "dropdownMatchSelectWidth", labelSpan: "labelSpan", labelFlex: "labelFlex", disabled: "disabled", required: "required", noBottom: "noBottom", multiple: "multiple", showSelectAll: "showSelectAll", maxTagCount: "maxTagCount", inputWidth: "inputWidth", inputHeight: "inputHeight", borderBottomOnly: "borderBottomOnly", displayInline: "displayInline", size: "size", lstItem: "lstItem", displayField: "displayField", displayFields: "displayFields", info: "info", valueField: "valueField", formData: "formData", controlName: "controlName", _ngModel: "_ngModel", isSubmited: "isSubmited" }, outputs: { _ngModelChange: "_ngModelChange", itemChange: "itemChange", onFocus: "onFocus" }, host: { properties: { "style.--custom-select-height": "this.cssHeight" } }, ngImport: i0, template: "<div\n  class=\"extend-select-wrapper\"\n  [ngClass]=\"[floatingLabel && label ? 'floating-label' : '']\"\n  [ngStyle]=\"{ display: displayInline ? 'inline' : null }\"\n>\n  @if (!multiple) {\n    @if (controlName) {\n      <div [formGroup]=\"formData\">\n        <nz-form-item>\n          <nz-form-label\n            [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\n            [nzFlex]=\"labelFlex\"\n            [nzLabelAlign]=\"labelAlign\"\n            [nzRequired]=\"required\"\n            [nzNoColon]=\"true\"\n            [nzLabelWrap]=\"floatingLabel ? false : true\"\n            [nzTooltipTitle]=\"info\"\n            [nzTooltipIcon]=\"info ? 'info-circle' : ''\"\n          >\n            {{ label }}\n          </nz-form-label>\n          <nz-form-control\n            [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\n            [ngClass]=\"{ 'full-width': floatingLabel }\"\n            [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n          >\n            <nz-select\n              nzShowSearch\n              nzAllowClear\n              [nzSize]=\"size\"\n              [nzAllowClear]=\"true\"\n              [nzShowSearch]=\"true\"\n              [nzPlaceHolder]=\"placeHolder\"\n              [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\n              [formControlName]=\"controlName\"\n              (nzFocus)=\"onFocus.emit()\"\n            >\n              @if (showSelectAll) {\n                <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n              }\n              @for (item of lstItem; track $index) {\n                <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n              }\n            </nz-select>\n          </nz-form-control>\n        </nz-form-item>\n      </div>\n    } @else {\n      @if (label) {\n        <nz-form-item>\n          <nz-form-label\n            [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\n            [nzFlex]=\"labelFlex\"\n            [nzLabelAlign]=\"labelAlign\"\n            [nzRequired]=\"required\"\n            [nzNoColon]=\"true\"\n            [nzLabelWrap]=\"floatingLabel ? false : true\"\n            [nzTooltipTitle]=\"info\"\n            [nzTooltipIcon]=\"true ? 'info-circle' : ''\"\n          >\n            {{ label }}\n          </nz-form-label>\n          <nz-form-control\n            [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\n            [ngClass]=\"{ 'full-width': floatingLabel }\"\n            [nzValidateStatus]=\"customValidateStatus\"\n            [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n          >\n            <nz-select\n              nzShowSearch\n              nzAllowClear\n              [nzSize]=\"size\"\n              [nzAllowClear]=\"true\"\n              [nzShowSearch]=\"true\"\n              [nzPlaceHolder]=\"placeHolder\"\n              [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\n              [ngModel]=\"_ngModel\"\n              [disabled]=\"disabled\"\n              (ngModelChange)=\"onSelectChange($event)\"\n              (nzFocus)=\"onFocus.emit()\"\n            >\n              @if (showSelectAll) {\n                <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n              }\n              @for (item of lstItem; track $index) {\n                <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n              }\n            </nz-select>\n          </nz-form-control>\n        </nz-form-item>\n      } @else {\n        <nz-select\n          class=\"full-width\"\n          nzShowSearch\n          nzAllowClear\n          [nzSize]=\"size\"\n          [nzPlaceHolder]=\"placeHolder\"\n          [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\n          [ngModel]=\"_ngModel\"\n          (ngModelChange)=\"onSelectChange($event)\"\n          (nzFocus)=\"onFocus.emit()\"\n          [disabled]=\"disabled\"\n          [ngStyle]=\"{\n            width: inputWidth,\n            height: inputHeight,\n          }\"\n          [ngClass]=\"{\n            'border-bottom-only': borderBottomOnly,\n            'custom-height-select': inputHeight ? true : false,\n          }\"\n        >\n          @if (showSelectAll) {\n            <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n          }\n          @for (item of lstItem; track $index) {\n            <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n          }\n        </nz-select>\n      }\n    }\n  } @else {\n    @if (controlName) {\n      <div [formGroup]=\"formData\">\n        <nz-form-item>\n          <nz-form-label\n            [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\n            [nzFlex]=\"labelFlex\"\n            [nzLabelAlign]=\"labelAlign\"\n            [nzRequired]=\"required\"\n            [nzNoColon]=\"true\"\n            [nzLabelWrap]=\"floatingLabel ? false : true\"\n            [nzTooltipTitle]=\"info\"\n            [nzTooltipIcon]=\"info ? 'info-circle' : ''\"\n          >\n            {{ label }}\n          </nz-form-label>\n          <nz-form-control\n            [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\n            [ngClass]=\"{ 'full-width': floatingLabel }\"\n            [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n          >\n            <nz-select\n              nzShowSearch\n              nzAllowClear\n              [nzSize]=\"size\"\n              [nzMode]=\"'multiple'\"\n              [nzMaxMultipleCount]=\"lstItem.length\"\n              [nzMaxTagCount]=\"maxTagCount\"\n              [nzAllowClear]=\"true\"\n              [nzShowSearch]=\"true\"\n              [nzPlaceHolder]=\"placeHolder\"\n              [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\n              [formControlName]=\"controlName\"\n              (nzFocus)=\"onFocus.emit()\"\n            >\n              @if (showSelectAll) {\n                <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n              }\n              @for (item of lstItem; track $index) {\n                <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n              }\n            </nz-select>\n          </nz-form-control>\n        </nz-form-item>\n      </div>\n    } @else {\n      @if (label) {\n        <nz-form-item>\n          <nz-form-label\n            [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\n            [nzFlex]=\"labelFlex\"\n            [nzLabelAlign]=\"labelAlign\"\n            [nzRequired]=\"required\"\n            [nzNoColon]=\"true\"\n            [nzLabelWrap]=\"floatingLabel ? false : true\"\n            [nzTooltipTitle]=\"info\"\n            [nzTooltipIcon]=\"info ? 'info-circle' : ''\"\n          >\n            {{ label }}\n          </nz-form-label>\n          <nz-form-control\n            [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\n            [ngClass]=\"{ 'full-width': floatingLabel }\"\n            [nzValidateStatus]=\"customValidateStatus\"\n            [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n          >\n            <nz-select\n              nzShowSearch\n              nzAllowClear\n              [nzSize]=\"size\"\n              [nzMode]=\"'multiple'\"\n              [nzMaxMultipleCount]=\"lstItem.length\"\n              [nzMaxTagCount]=\"maxTagCount\"\n              [nzAllowClear]=\"true\"\n              [nzShowSearch]=\"true\"\n              [nzPlaceHolder]=\"placeHolder\"\n              [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\n              [ngModel]=\"_ngModel\"\n              [disabled]=\"disabled\"\n              (ngModelChange)=\"onSelectChange($event)\"\n              (nzFocus)=\"onFocus.emit()\"\n            >\n              @if (showSelectAll) {\n                <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n              }\n              @for (item of lstItem; track $index) {\n                <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n              }\n            </nz-select>\n          </nz-form-control>\n        </nz-form-item>\n      } @else {\n        <nz-select\n          class=\"full-width\"\n          nzShowSearch\n          nzAllowClear\n          [nzSize]=\"size\"\n          [nzPlaceHolder]=\"placeHolder\"\n          [nzMode]=\"'multiple'\"\n          [nzMaxMultipleCount]=\"lstItem.length\"\n          [nzMaxTagCount]=\"maxTagCount\"\n          [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\n          [ngModel]=\"_ngModel\"\n          [disabled]=\"disabled\"\n          (ngModelChange)=\"onSelectChange($event)\"\n          (nzFocus)=\"onFocus.emit()\"\n        >\n          @if (showSelectAll) {\n            <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n          }\n          @for (item of lstItem; track $index) {\n            <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n          }\n        </nz-select>\n      }\n    }\n  }\n</div>\n", styles: ["::ng-deep .extend-select-wrapper.floating-label{position:relative;padding-top:14px}::ng-deep .extend-select-wrapper.floating-label nz-form-item nz-form-label{position:absolute;top:12px;left:5px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:1;height:auto;line-height:normal;padding:0 4px}::ng-deep .extend-select-wrapper.floating-label nz-form-item nz-form-label label{font-size:12px;color:var(--darkgray, #565656);font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .extend-select-wrapper .full-width{width:100%}.extend-select-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.extend-select-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label,.extend-select-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.extend-select-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.extend-select-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.extend-select-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i2$1.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: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i13.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i13.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus"], exportAs: ["nzSelect"] }, { kind: "ngmodule", type: NzToolTipModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendSelectComponent, isStandalone: true, selector: "extend-select", inputs: { label: "label", floatingLabel: "floatingLabel", placeHolder: "placeHolder", labelAlign: "labelAlign", dropdownMatchSelectWidth: "dropdownMatchSelectWidth", labelSpan: "labelSpan", labelFlex: "labelFlex", disabled: "disabled", required: "required", noBottom: "noBottom", multiple: "multiple", showSelectAll: "showSelectAll", maxTagCount: "maxTagCount", inputWidth: "inputWidth", inputHeight: "inputHeight", borderBottomOnly: "borderBottomOnly", displayInline: "displayInline", size: "size", lstItem: "lstItem", displayField: "displayField", displayFields: "displayFields", info: "info", valueField: "valueField", formData: "formData", controlName: "controlName", _ngModel: "_ngModel", isSubmited: "isSubmited" }, outputs: { _ngModelChange: "_ngModelChange", itemChange: "itemChange", onFocus: "onFocus" }, host: { properties: { "style.--custom-select-height": "this.cssHeight" } }, ngImport: i0, template: "<div\n  class=\"extend-select-wrapper\"\n  [ngClass]=\"{ 'floating-label': floatingLabel && label }\"\n  [ngStyle]=\"{ display: displayInline ? 'inline' : null }\"\n>\n  <ng-template #labelTemplate>\n    <nz-form-label\n      [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\n      [nzFlex]=\"labelFlex\"\n      [nzLabelAlign]=\"labelAlign\"\n      [nzRequired]=\"required\"\n      [nzNoColon]=\"true\"\n      [nzLabelWrap]=\"!floatingLabel\"\n      [nzTooltipTitle]=\"info\"\n      [nzTooltipIcon]=\"info ? 'info-circle' : ''\"\n    >\n      {{ label }}\n    </nz-form-label>\n  </ng-template>\n\n  @if (controlName) {\n    <div [formGroup]=\"formData\">\n      <nz-form-item>\n        @if (label) {\n          <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n        }\n        <nz-form-control\n          [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\n          [ngClass]=\"{ 'full-width': floatingLabel }\"\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n        >\n          <nz-select\n            nzShowSearch\n            nzAllowClear\n            [nzSize]=\"size\"\n            [nzMode]=\"multiple ? 'multiple' : 'default'\"\n            [nzMaxMultipleCount]=\"maxMultipleCount\"\n            [nzMaxTagCount]=\"maxTagCount\"\n            [nzPlaceHolder]=\"placeHolder\"\n            [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\n            [formControlName]=\"controlName\"\n            (nzFocus)=\"onFocus.emit()\"\n          >\n            @if (showSelectAll) {\n              <nz-option nzLabel=\"-- Ch\u1ECDn t\u1EA5t c\u1EA3 --\" nzValue=\"__all__\"></nz-option>\n            }\n            @for (item of lstItem; track $index) {\n              <nz-option\n                nzCustomContent\n                [nzLabel]=\"item | displayItem: displayField : displayFields\"\n                [nzValue]=\"valueField ? item[valueField] : item\"\n              >\n                @if (displayFields.length === 2) {\n                  <span class=\"semi-bold-code\">[{{ item[displayFields[0]] }}]</span> {{ item[displayFields[1]] }}\n                } @else {\n                  {{ item | displayItem: displayField : displayFields }}\n                }\n              </nz-option>\n            }\n          </nz-select>\n        </nz-form-control>\n      </nz-form-item>\n    </div>\n  } @else {\n    <!-- Tr\u01B0\u1EDDng h\u1EE3p KH\u00D4NG c\u00F3 controlName (D\u00F9ng ngModel) -->\n    @if (label) {\n      <nz-form-item>\n        <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n        <nz-form-control\n          [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\n          [ngClass]=\"{ 'full-width': floatingLabel }\"\n          [nzValidateStatus]=\"customValidateStatus\"\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n        >\n          <nz-select\n            nzShowSearch\n            nzAllowClear\n            [nzSize]=\"size\"\n            [nzMode]=\"multiple ? 'multiple' : 'default'\"\n            [nzMaxMultipleCount]=\"maxMultipleCount\"\n            [nzMaxTagCount]=\"maxTagCount\"\n            [nzPlaceHolder]=\"placeHolder\"\n            [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\n            [ngModel]=\"_ngModel\"\n            [disabled]=\"disabled\"\n            (ngModelChange)=\"onSelectChange($event)\"\n            (nzFocus)=\"onFocus.emit()\"\n          >\n            <!-- B\u1EAET BU\u1ED8C \u0110\u1EC2 TR\u1EF0C TI\u1EBEP \u1EDE \u0110\u00C2Y -->\n            @if (showSelectAll) {\n              <nz-option nzLabel=\"-- Ch\u1ECDn t\u1EA5t c\u1EA3 --\" nzValue=\"__all__\"></nz-option>\n            }\n            @for (item of lstItem; track $index) {\n              <nz-option\n                nzCustomContent\n                [nzLabel]=\"item | displayItem: displayField : displayFields\"\n                [nzValue]=\"valueField ? item[valueField] : item\"\n              >\n                @if (displayFields.length === 2) {\n                  <span class=\"semi-bold-code\">[{{ item[displayFields[0]] }}]</span> {{ item[displayFields[1]] }}\n                } @else {\n                  {{ item | displayItem: displayField : displayFields }}\n                }\n              </nz-option>\n            }\n          </nz-select>\n        </nz-form-control>\n      </nz-form-item>\n    } @else {\n      <!-- Kh\u00F4ng c\u00F3 controlName, Kh\u00F4ng c\u00F3 label -->\n      <nz-select\n        class=\"full-width\"\n        nzShowSearch\n        nzAllowClear\n        [nzSize]=\"size\"\n        [nzPlaceHolder]=\"placeHolder\"\n        [nzMode]=\"multiple ? 'multiple' : 'default'\"\n        [nzMaxMultipleCount]=\"maxMultipleCount\"\n        [nzMaxTagCount]=\"maxTagCount\"\n        [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\n        [ngModel]=\"_ngModel\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectChange($event)\"\n        (nzFocus)=\"onFocus.emit()\"\n        [ngStyle]=\"{ width: inputWidth, height: inputHeight }\"\n        [ngClass]=\"{\n          'border-bottom-only': borderBottomOnly,\n          'custom-height-select': !!inputHeight,\n        }\"\n      >\n        <!-- B\u1EAET BU\u1ED8C \u0110\u1EC2 TR\u1EF0C TI\u1EBEP \u1EDE \u0110\u00C2Y -->\n        @if (showSelectAll) {\n          <nz-option nzLabel=\"-- Ch\u1ECDn t\u1EA5t c\u1EA3 --\" nzValue=\"__all__\"></nz-option>\n        }\n        @for (item of lstItem; track $index) {\n          <nz-option\n            nzCustomContent\n            [nzLabel]=\"item | displayItem: displayField : displayFields\"\n            [nzValue]=\"valueField ? item[valueField] : item\"\n          >\n            @if (displayFields.length === 2) {\n              <span class=\"semi-bold-code\">[{{ item[displayFields[0]] }}]</span> {{ item[displayFields[1]] }}\n            } @else {\n              {{ item | displayItem: displayField : displayFields }}\n            }\n          </nz-option>\n        }\n      </nz-select>\n    }\n  }\n</div>\n", styles: ["::ng-deep .extend-select-wrapper.floating-label{position:relative;padding-top:14px}::ng-deep .extend-select-wrapper.floating-label nz-form-item nz-form-label{position:absolute;top:12px;left:5px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:1;height:auto;line-height:normal;padding:0 4px}::ng-deep .extend-select-wrapper.floating-label nz-form-item nz-form-label label{font-size:12px;color:var(--darkgray, #565656);font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .extend-select-wrapper .full-width{width:100%}.extend-select-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.extend-select-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label,.extend-select-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.extend-select-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.extend-select-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.extend-select-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}.semi-bold-code{font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i2$1.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: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i13.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i13.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus"], exportAs: ["nzSelect"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "pipe", type: DisplayItemPipe, name: "displayItem" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'extend-select', imports: [
+            args: [{ selector: 'extend-select', standalone: true, imports: [
                         CommonModule,
                         FormsModule,
                         ReactiveFormsModule,
@@ -3128,7 +3185,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         NzFormModule,
                         NzSelectModule,
                         NzToolTipModule,
-                    ], template: "<div\n  class=\"extend-select-wrapper\"\n  [ngClass]=\"[floatingLabel && label ? 'floating-label' : '']\"\n  [ngStyle]=\"{ display: displayInline ? 'inline' : null }\"\n>\n  @if (!multiple) {\n    @if (controlName) {\n      <div [formGroup]=\"formData\">\n        <nz-form-item>\n          <nz-form-label\n            [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\n            [nzFlex]=\"labelFlex\"\n            [nzLabelAlign]=\"labelAlign\"\n            [nzRequired]=\"required\"\n            [nzNoColon]=\"true\"\n            [nzLabelWrap]=\"floatingLabel ? false : true\"\n            [nzTooltipTitle]=\"info\"\n            [nzTooltipIcon]=\"info ? 'info-circle' : ''\"\n          >\n            {{ label }}\n          </nz-form-label>\n          <nz-form-control\n            [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\n            [ngClass]=\"{ 'full-width': floatingLabel }\"\n            [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n          >\n            <nz-select\n              nzShowSearch\n              nzAllowClear\n              [nzSize]=\"size\"\n              [nzAllowClear]=\"true\"\n              [nzShowSearch]=\"true\"\n              [nzPlaceHolder]=\"placeHolder\"\n              [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\n              [formControlName]=\"controlName\"\n              (nzFocus)=\"onFocus.emit()\"\n            >\n              @if (showSelectAll) {\n                <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n              }\n              @for (item of lstItem; track $index) {\n                <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n              }\n            </nz-select>\n          </nz-form-control>\n        </nz-form-item>\n      </div>\n    } @else {\n      @if (label) {\n        <nz-form-item>\n          <nz-form-label\n            [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\n            [nzFlex]=\"labelFlex\"\n            [nzLabelAlign]=\"labelAlign\"\n            [nzRequired]=\"required\"\n            [nzNoColon]=\"true\"\n            [nzLabelWrap]=\"floatingLabel ? false : true\"\n            [nzTooltipTitle]=\"info\"\n            [nzTooltipIcon]=\"true ? 'info-circle' : ''\"\n          >\n            {{ label }}\n          </nz-form-label>\n          <nz-form-control\n            [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\n            [ngClass]=\"{ 'full-width': floatingLabel }\"\n            [nzValidateStatus]=\"customValidateStatus\"\n            [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n          >\n            <nz-select\n              nzShowSearch\n              nzAllowClear\n              [nzSize]=\"size\"\n              [nzAllowClear]=\"true\"\n              [nzShowSearch]=\"true\"\n              [nzPlaceHolder]=\"placeHolder\"\n              [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\n              [ngModel]=\"_ngModel\"\n              [disabled]=\"disabled\"\n              (ngModelChange)=\"onSelectChange($event)\"\n              (nzFocus)=\"onFocus.emit()\"\n            >\n              @if (showSelectAll) {\n                <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n              }\n              @for (item of lstItem; track $index) {\n                <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n              }\n            </nz-select>\n          </nz-form-control>\n        </nz-form-item>\n      } @else {\n        <nz-select\n          class=\"full-width\"\n          nzShowSearch\n          nzAllowClear\n          [nzSize]=\"size\"\n          [nzPlaceHolder]=\"placeHolder\"\n          [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\n          [ngModel]=\"_ngModel\"\n          (ngModelChange)=\"onSelectChange($event)\"\n          (nzFocus)=\"onFocus.emit()\"\n          [disabled]=\"disabled\"\n          [ngStyle]=\"{\n            width: inputWidth,\n            height: inputHeight,\n          }\"\n          [ngClass]=\"{\n            'border-bottom-only': borderBottomOnly,\n            'custom-height-select': inputHeight ? true : false,\n          }\"\n        >\n          @if (showSelectAll) {\n            <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n          }\n          @for (item of lstItem; track $index) {\n            <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n          }\n        </nz-select>\n      }\n    }\n  } @else {\n    @if (controlName) {\n      <div [formGroup]=\"formData\">\n        <nz-form-item>\n          <nz-form-label\n            [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\n            [nzFlex]=\"labelFlex\"\n            [nzLabelAlign]=\"labelAlign\"\n            [nzRequired]=\"required\"\n            [nzNoColon]=\"true\"\n            [nzLabelWrap]=\"floatingLabel ? false : true\"\n            [nzTooltipTitle]=\"info\"\n            [nzTooltipIcon]=\"info ? 'info-circle' : ''\"\n          >\n            {{ label }}\n          </nz-form-label>\n          <nz-form-control\n            [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\n            [ngClass]=\"{ 'full-width': floatingLabel }\"\n            [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n          >\n            <nz-select\n              nzShowSearch\n              nzAllowClear\n              [nzSize]=\"size\"\n              [nzMode]=\"'multiple'\"\n              [nzMaxMultipleCount]=\"lstItem.length\"\n              [nzMaxTagCount]=\"maxTagCount\"\n              [nzAllowClear]=\"true\"\n              [nzShowSearch]=\"true\"\n              [nzPlaceHolder]=\"placeHolder\"\n              [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\n              [formControlName]=\"controlName\"\n              (nzFocus)=\"onFocus.emit()\"\n            >\n              @if (showSelectAll) {\n                <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n              }\n              @for (item of lstItem; track $index) {\n                <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n              }\n            </nz-select>\n          </nz-form-control>\n        </nz-form-item>\n      </div>\n    } @else {\n      @if (label) {\n        <nz-form-item>\n          <nz-form-label\n            [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\n            [nzFlex]=\"labelFlex\"\n            [nzLabelAlign]=\"labelAlign\"\n            [nzRequired]=\"required\"\n            [nzNoColon]=\"true\"\n            [nzLabelWrap]=\"floatingLabel ? false : true\"\n            [nzTooltipTitle]=\"info\"\n            [nzTooltipIcon]=\"info ? 'info-circle' : ''\"\n          >\n            {{ label }}\n          </nz-form-label>\n          <nz-form-control\n            [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\n            [ngClass]=\"{ 'full-width': floatingLabel }\"\n            [nzValidateStatus]=\"customValidateStatus\"\n            [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n          >\n            <nz-select\n              nzShowSearch\n              nzAllowClear\n              [nzSize]=\"size\"\n              [nzMode]=\"'multiple'\"\n              [nzMaxMultipleCount]=\"lstItem.length\"\n              [nzMaxTagCount]=\"maxTagCount\"\n              [nzAllowClear]=\"true\"\n              [nzShowSearch]=\"true\"\n              [nzPlaceHolder]=\"placeHolder\"\n              [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\n              [ngModel]=\"_ngModel\"\n              [disabled]=\"disabled\"\n              (ngModelChange)=\"onSelectChange($event)\"\n              (nzFocus)=\"onFocus.emit()\"\n            >\n              @if (showSelectAll) {\n                <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n              }\n              @for (item of lstItem; track $index) {\n                <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n              }\n            </nz-select>\n          </nz-form-control>\n        </nz-form-item>\n      } @else {\n        <nz-select\n          class=\"full-width\"\n          nzShowSearch\n          nzAllowClear\n          [nzSize]=\"size\"\n          [nzPlaceHolder]=\"placeHolder\"\n          [nzMode]=\"'multiple'\"\n          [nzMaxMultipleCount]=\"lstItem.length\"\n          [nzMaxTagCount]=\"maxTagCount\"\n          [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\n          [ngModel]=\"_ngModel\"\n          [disabled]=\"disabled\"\n          (ngModelChange)=\"onSelectChange($event)\"\n          (nzFocus)=\"onFocus.emit()\"\n        >\n          @if (showSelectAll) {\n            <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n          }\n          @for (item of lstItem; track $index) {\n            <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n          }\n        </nz-select>\n      }\n    }\n  }\n</div>\n", styles: ["::ng-deep .extend-select-wrapper.floating-label{position:relative;padding-top:14px}::ng-deep .extend-select-wrapper.floating-label nz-form-item nz-form-label{position:absolute;top:12px;left:5px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:1;height:auto;line-height:normal;padding:0 4px}::ng-deep .extend-select-wrapper.floating-label nz-form-item nz-form-label label{font-size:12px;color:var(--darkgray, #565656);font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .extend-select-wrapper .full-width{width:100%}.extend-select-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.extend-select-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label,.extend-select-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.extend-select-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.extend-select-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.extend-select-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}\n"] }]
+                        DisplayItemPipe,
+                    ], template: "<div\n  class=\"extend-select-wrapper\"\n  [ngClass]=\"{ 'floating-label': floatingLabel && label }\"\n  [ngStyle]=\"{ display: displayInline ? 'inline' : null }\"\n>\n  <ng-template #labelTemplate>\n    <nz-form-label\n      [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\n      [nzFlex]=\"labelFlex\"\n      [nzLabelAlign]=\"labelAlign\"\n      [nzRequired]=\"required\"\n      [nzNoColon]=\"true\"\n      [nzLabelWrap]=\"!floatingLabel\"\n      [nzTooltipTitle]=\"info\"\n      [nzTooltipIcon]=\"info ? 'info-circle' : ''\"\n    >\n      {{ label }}\n    </nz-form-label>\n  </ng-template>\n\n  @if (controlName) {\n    <div [formGroup]=\"formData\">\n      <nz-form-item>\n        @if (label) {\n          <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n        }\n        <nz-form-control\n          [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\n          [ngClass]=\"{ 'full-width': floatingLabel }\"\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n        >\n          <nz-select\n            nzShowSearch\n            nzAllowClear\n            [nzSize]=\"size\"\n            [nzMode]=\"multiple ? 'multiple' : 'default'\"\n            [nzMaxMultipleCount]=\"maxMultipleCount\"\n            [nzMaxTagCount]=\"maxTagCount\"\n            [nzPlaceHolder]=\"placeHolder\"\n            [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\n            [formControlName]=\"controlName\"\n            (nzFocus)=\"onFocus.emit()\"\n          >\n            @if (showSelectAll) {\n              <nz-option nzLabel=\"-- Ch\u1ECDn t\u1EA5t c\u1EA3 --\" nzValue=\"__all__\"></nz-option>\n            }\n            @for (item of lstItem; track $index) {\n              <nz-option\n                nzCustomContent\n                [nzLabel]=\"item | displayItem: displayField : displayFields\"\n                [nzValue]=\"valueField ? item[valueField] : item\"\n              >\n                @if (displayFields.length === 2) {\n                  <span class=\"semi-bold-code\">[{{ item[displayFields[0]] }}]</span> {{ item[displayFields[1]] }}\n                } @else {\n                  {{ item | displayItem: displayField : displayFields }}\n                }\n              </nz-option>\n            }\n          </nz-select>\n        </nz-form-control>\n      </nz-form-item>\n    </div>\n  } @else {\n    <!-- Tr\u01B0\u1EDDng h\u1EE3p KH\u00D4NG c\u00F3 controlName (D\u00F9ng ngModel) -->\n    @if (label) {\n      <nz-form-item>\n        <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n        <nz-form-control\n          [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\n          [ngClass]=\"{ 'full-width': floatingLabel }\"\n          [nzValidateStatus]=\"customValidateStatus\"\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n        >\n          <nz-select\n            nzShowSearch\n            nzAllowClear\n            [nzSize]=\"size\"\n            [nzMode]=\"multiple ? 'multiple' : 'default'\"\n            [nzMaxMultipleCount]=\"maxMultipleCount\"\n            [nzMaxTagCount]=\"maxTagCount\"\n            [nzPlaceHolder]=\"placeHolder\"\n            [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\n            [ngModel]=\"_ngModel\"\n            [disabled]=\"disabled\"\n            (ngModelChange)=\"onSelectChange($event)\"\n            (nzFocus)=\"onFocus.emit()\"\n          >\n            <!-- B\u1EAET BU\u1ED8C \u0110\u1EC2 TR\u1EF0C TI\u1EBEP \u1EDE \u0110\u00C2Y -->\n            @if (showSelectAll) {\n              <nz-option nzLabel=\"-- Ch\u1ECDn t\u1EA5t c\u1EA3 --\" nzValue=\"__all__\"></nz-option>\n            }\n            @for (item of lstItem; track $index) {\n              <nz-option\n                nzCustomContent\n                [nzLabel]=\"item | displayItem: displayField : displayFields\"\n                [nzValue]=\"valueField ? item[valueField] : item\"\n              >\n                @if (displayFields.length === 2) {\n                  <span class=\"semi-bold-code\">[{{ item[displayFields[0]] }}]</span> {{ item[displayFields[1]] }}\n                } @else {\n                  {{ item | displayItem: displayField : displayFields }}\n                }\n              </nz-option>\n            }\n          </nz-select>\n        </nz-form-control>\n      </nz-form-item>\n    } @else {\n      <!-- Kh\u00F4ng c\u00F3 controlName, Kh\u00F4ng c\u00F3 label -->\n      <nz-select\n        class=\"full-width\"\n        nzShowSearch\n        nzAllowClear\n        [nzSize]=\"size\"\n        [nzPlaceHolder]=\"placeHolder\"\n        [nzMode]=\"multiple ? 'multiple' : 'default'\"\n        [nzMaxMultipleCount]=\"maxMultipleCount\"\n        [nzMaxTagCount]=\"maxTagCount\"\n        [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\n        [ngModel]=\"_ngModel\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectChange($event)\"\n        (nzFocus)=\"onFocus.emit()\"\n        [ngStyle]=\"{ width: inputWidth, height: inputHeight }\"\n        [ngClass]=\"{\n          'border-bottom-only': borderBottomOnly,\n          'custom-height-select': !!inputHeight,\n        }\"\n      >\n        <!-- B\u1EAET BU\u1ED8C \u0110\u1EC2 TR\u1EF0C TI\u1EBEP \u1EDE \u0110\u00C2Y -->\n        @if (showSelectAll) {\n          <nz-option nzLabel=\"-- Ch\u1ECDn t\u1EA5t c\u1EA3 --\" nzValue=\"__all__\"></nz-option>\n        }\n        @for (item of lstItem; track $index) {\n          <nz-option\n            nzCustomContent\n            [nzLabel]=\"item | displayItem: displayField : displayFields\"\n            [nzValue]=\"valueField ? item[valueField] : item\"\n          >\n            @if (displayFields.length === 2) {\n              <span class=\"semi-bold-code\">[{{ item[displayFields[0]] }}]</span> {{ item[displayFields[1]] }}\n            } @else {\n              {{ item | displayItem: displayField : displayFields }}\n            }\n          </nz-option>\n        }\n      </nz-select>\n    }\n  }\n</div>\n", styles: ["::ng-deep .extend-select-wrapper.floating-label{position:relative;padding-top:14px}::ng-deep .extend-select-wrapper.floating-label nz-form-item nz-form-label{position:absolute;top:12px;left:5px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:1;height:auto;line-height:normal;padding:0 4px}::ng-deep .extend-select-wrapper.floating-label nz-form-item nz-form-label label{font-size:12px;color:var(--darkgray, #565656);font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .extend-select-wrapper .full-width{width:100%}.extend-select-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.extend-select-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label,.extend-select-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.extend-select-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.extend-select-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.extend-select-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}.semi-bold-code{font-weight:500}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], floatingLabel: [{
@@ -3181,14 +3239,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 type: Input
             }], _ngModel: [{
                 type: Input
+            }], isSubmited: [{
+                type: Input
             }], _ngModelChange: [{
                 type: Output
             }], itemChange: [{
                 type: Output
             }], onFocus: [{
                 type: Output
-            }], isSubmited: [{
-                type: Input
             }], cssHeight: [{
                 type: HostBinding,
                 args: ['style.--custom-select-height']
@@ -7610,7 +7668,7 @@ class RoleDetailComponent extends BaseComponent {
         // this.notiService.success('Đã xóa User khỏi danh sách');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RoleDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: RoleDetailComponent, isStandalone: true, selector: "app-menu-detail", viewQueries: [{ propertyName: "nzTreeComponent", first: true, predicate: ["nzTree"], descendants: true }, { propertyName: "parentSelect", first: true, predicate: ["parentSelect"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<form nz-form [formGroup]=\"formData\">\n  <div nz-flex nzJustify=\"end\">\n    <div nz-flex [nzGap]=\"'small'\">\n      <button-save (click)=\"save()\"></button-save>\n      <button-delete *ngIf=\"item.App_Role_Id\" (click)=\"delete()\"></button-delete>\n      <button-back (click)=\"goto('/admin/role')\"></button-back>\n    </div>\n  </div>\n\n  <nz-divider></nz-divider>\n\n  <div nz-row [nzGutter]=\"[32, 0]\">\n    <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\n      <nz-form-item>\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Code\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired> M\u00E3 </nz-form-label>\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\n          <input nz-input formControlName=\"Code\" id=\"Code\" />\n        </nz-form-control>\n      </nz-form-item>\n      <nz-form-item>\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Name\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired> T\u00EAn </nz-form-label>\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\n          <input nz-input formControlName=\"Name\" id=\"Name\" />\n        </nz-form-control>\n      </nz-form-item>\n      <nz-form-item>\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Description\" nzLabelAlign=\"left\" nzNoColon=\"true\"> M\u00F4 t\u1EA3 </nz-form-label>\n        <nz-form-control [nzSpan]=\"16\">\n          <textarea nz-input formControlName=\"Description\" id=\"Description\"></textarea>\n        </nz-form-control>\n      </nz-form-item>\n      <div nz-row>\n        <div nz-col [nzSpan]=\"8\"></div>\n        <div nz-col [nzSpan]=\"16\">\n          <label nz-checkbox formControlName=\"IsActive\">Active</label>\n        </div>\n      </div>\n    </div>\n\n    <div nz-col [nzSpan]=\"12\">\n      <nz-tabset nzType=\"card\" nzSize=\"small\">\n        <nz-tab nzTitle=\"Menu\">\n          <h3>Ph\u00E2n quy\u1EC1n Menu</h3>\n\n          <nz-tree\n            #nzTree\n            [nzData]=\"nodes\"\n            nzCheckable\n            nzMultiple\n            nzBlockNode\n            [nzTreeTemplate]=\"nzTreeTemplate\"\n            [(nzCheckedKeys)]=\"checkedKeys\"\n            (nzCheckBoxChange)=\"onTreeCheckBoxChange($event)\"\n          ></nz-tree>\n\n          <ng-template #nzTreeTemplate let-node let-origin=\"origin\">\n            <div style=\"display: flex; justify-content: space-between; align-items: center; width: 100%\">\n              <span class=\"custom-node-name\">{{ node.title }}</span>\n\n              <div style=\"display: flex; gap: 4px\" (click)=\"$event.stopPropagation()\">\n                <label\n                  nz-checkbox\n                  [ngModelOptions]=\"{ standalone: true }\"\n                  [(ngModel)]=\"origin.canCreate\"\n                  [nzIndeterminate]=\"origin.isCreateIndeterminate\"\n                  (ngModelChange)=\"onPermissionChange(node, 'create')\"\n                >\n                  C\n                </label>\n                <label\n                  nz-checkbox\n                  [ngModelOptions]=\"{ standalone: true }\"\n                  [(ngModel)]=\"origin.canUpdate\"\n                  [nzIndeterminate]=\"origin.isUpdateIndeterminate\"\n                  (ngModelChange)=\"onPermissionChange(node, 'update')\"\n                >\n                  U\n                </label>\n                <label\n                  nz-checkbox\n                  [ngModelOptions]=\"{ standalone: true }\"\n                  [(ngModel)]=\"origin.canDelete\"\n                  [nzIndeterminate]=\"origin.isDeleteIndeterminate\"\n                  (ngModelChange)=\"onPermissionChange(node, 'delete')\"\n                >\n                  D\n                </label>\n              </div>\n            </div>\n          </ng-template>\n        </nz-tab>\n        <nz-tab nzTitle=\"User\">\n          <div style=\"padding: 8px\">\n            <h3 style=\"margin-bottom: 16px\">Danh s\u00E1ch User trong Role</h3>\n\n            <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\n              <span style=\"font-weight: 500\">Users ({{ lstUserInRole.length }})</span>\n              <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddUserModal()\">\n                <span nz-icon nzType=\"plus\"></span>\n                Th\u00EAm User\n              </button>\n            </div>\n\n            <div style=\"max-height: 450px; overflow-y: auto\">\n              <nz-table\n                #userTable\n                [nzData]=\"lstUserInRole\"\n                [nzSize]=\"'small'\"\n                [nzShowPagination]=\"lstUserInRole.length > 20\"\n                [nzPageSize]=\"20\"\n              >\n                <thead>\n                  <tr>\n                    <th nzWidth=\"40px\">STT</th>\n                    <th>User</th>\n                    <th nzWidth=\"50px\" nzAlign=\"center\"></th>\n                  </tr>\n                </thead>\n                <tbody>\n                  <tr *ngFor=\"let item of userTable.data; let i = index\">\n                    <td>{{ i + 1 }}</td>\n                    <td>\n                      <div style=\"font-weight: 500\">{{ item.UserName }}</div>\n                      <div style=\"font-size: 12px; color: #888\">{{ item.FullName }}</div>\n                      <div *ngIf=\"item.Email\" style=\"font-size: 11px; color: #aaa\">{{ item.Email }}</div>\n                    </td>\n                    <td nzAlign=\"center\">\n                      <button\n                        nz-button\n                        nzType=\"link\"\n                        nzDanger\n                        nzSize=\"small\"\n                        nz-popconfirm\n                        nzPopconfirmTitle=\"X\u00F3a User n\u00E0y?\"\n                        (nzOnConfirm)=\"deleteUserFromRole(item)\"\n                      >\n                        <span nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\n                      </button>\n                    </td>\n                  </tr>\n                </tbody>\n              </nz-table>\n            </div>\n          </div>\n        </nz-tab>\n      </nz-tabset>\n    </div>\n  </div>\n</form>\n\n<!-- Modal ch\u1ECDn User -->\n<nz-modal\n  [(nzVisible)]=\"isAddUserModalVisible\"\n  nzTitle=\"Th\u00EAm User v\u00E0o Role\"\n  [nzWidth]=\"700\"\n  (nzOnCancel)=\"closeAddUserModal()\"\n  (nzOnOk)=\"addUsersToRole()\"\n  nzOkText=\"Th\u00EAm\"\n  nzCancelText=\"H\u1EE7y\"\n>\n  <ng-container *nzModalContent>\n    <!-- Search box -->\n    <nz-input-group [nzPrefix]=\"prefixIconSearch\" style=\"margin-bottom: 16px\">\n      <input\n        type=\"text\"\n        nz-input\n        placeholder=\"T\u00ECm ki\u1EBFm User...\"\n        [(ngModel)]=\"searchUserText\"\n        (ngModelChange)=\"filterAvailableUsers()\"\n      />\n    </nz-input-group>\n    <ng-template #prefixIconSearch>\n      <span nz-icon nzType=\"search\"></span>\n    </ng-template>\n\n    <nz-table\n      #addUserTable\n      [nzData]=\"lstFilteredUser\"\n      [nzSize]=\"'small'\"\n      [nzShowPagination]=\"true\"\n      [nzPageSize]=\"10\"\n      [nzLoading]=\"isLoadingAvailableUsers\"\n    >\n      <thead>\n        <tr>\n          <th\n            nzWidth=\"60px\"\n            nzShowCheckbox\n            [(nzChecked)]=\"isAllUserChecked\"\n            (nzCheckedChange)=\"onAllUserChecked($event)\"\n            [nzIndeterminate]=\"isUserIndeterminate\"\n          ></th>\n          <th nzWidth=\"150px\">Username</th>\n          <th>T\u00EAn \u0111\u1EA7y \u0111\u1EE7</th>\n          <th>Email</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngFor=\"let item of addUserTable.data\">\n          <td>\n            <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onUserChecked(item, $event)\"></label>\n          </td>\n          <td>{{ item.UserName }}</td>\n          <td>{{ item.FullName }}</td>\n          <td>{{ item.Email }}</td>\n        </tr>\n      </tbody>\n    </nz-table>\n  </ng-container>\n</nz-modal>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i2$1.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: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "directive", type: i5.NzFormDirective, selector: "[nz-form]", inputs: ["nzLayout", "nzNoColon", "nzAutoTips", "nzDisableAutoTips", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzForm"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzTreeModule }, { kind: "component", type: i10.NzTreeComponent, selector: "nz-tree", inputs: ["nzShowIcon", "nzHideUnMatched", "nzBlockNode", "nzExpandAll", "nzSelectMode", "nzCheckStrictly", "nzShowExpand", "nzShowLine", "nzCheckable", "nzAsyncData", "nzDraggable", "nzMultiple", "nzExpandedIcon", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualHeight", "nzTreeTemplate", "nzBeforeDrop", "nzData", "nzExpandedKeys", "nzSelectedKeys", "nzCheckedKeys", "nzSearchValue", "nzSearchFunc"], outputs: ["nzExpandedKeysChange", "nzSelectedKeysChange", "nzCheckedKeysChange", "nzSearchValueChange", "nzClick", "nzDblClick", "nzContextMenu", "nzCheckboxChange", "nzExpandChange", "nzOnDragStart", "nzOnDragEnter", "nzOnDragOver", "nzOnDragLeave", "nzOnDrop", "nzOnDragEnd"], exportAs: ["nzTree"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzTabsModule }, { kind: "component", type: i1$6.NzTabSetComponent, selector: "nz-tabset", inputs: ["nzSelectedIndex", "nzTabPosition", "nzTabBarExtraContent", "nzCanDeactivate", "nzAddIcon", "nzTabBarStyle", "nzType", "nzSize", "nzAnimated", "nzTabBarGutter", "nzHideAdd", "nzCentered", "nzHideAll", "nzLinkRouter", "nzLinkExact", "nzDestroyInactiveTabPane"], outputs: ["nzSelectChange", "nzSelectedIndexChange", "nzTabListScroll", "nzClose", "nzAdd"], exportAs: ["nzTabset"] }, { kind: "component", type: i1$6.NzTabComponent, selector: "nz-tab", inputs: ["nzTitle", "nzClosable", "nzCloseIcon", "nzDisabled", "nzForceRender"], outputs: ["nzSelect", "nzDeselect", "nzClick", "nzContextmenu"], exportAs: ["nzTab"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i6.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i6.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵ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: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzCheckboxModule }, { kind: "component", type: i3$1.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId", "nzName"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i4.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: i4.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i4.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i4.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i4.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i4.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "directive", type: i4.NzCellAlignDirective, selector: "th[nzAlign],td[nzAlign]", inputs: ["nzAlign"] }, { kind: "component", type: i4.NzThSelectionComponent, selector: "th[nzSelections],th[nzChecked],th[nzShowCheckbox],th[nzShowRowSelection]", inputs: ["nzSelections", "nzChecked", "nzDisabled", "nzIndeterminate", "nzLabel", "nzShowCheckbox", "nzShowRowSelection"], outputs: ["nzCheckedChange"] }, { kind: "ngmodule", type: NzModalModule }, { kind: "component", type: i15.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: i15.NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { kind: "ngmodule", type: NzPopconfirmModule }, { kind: "directive", type: i9.NzPopconfirmDirective, selector: "[nz-popconfirm]", inputs: ["nzPopconfirmArrowPointAtCenter", "nzPopconfirmTitle", "nzPopconfirmTitleContext", "nz-popconfirm", "nzPopconfirmTrigger", "nzPopconfirmPlacement", "nzPopconfirmOrigin", "nzPopconfirmMouseEnterDelay", "nzPopconfirmMouseLeaveDelay", "nzPopconfirmOverlayClassName", "nzPopconfirmOverlayStyle", "nzPopconfirmVisible", "nzOkText", "nzOkType", "nzOkDisabled", "nzOkDanger", "nzCancelText", "nzBeforeConfirm", "nzIcon", "nzCondition", "nzPopconfirmShowArrow", "nzPopconfirmBackdrop", "nzAutofocus"], outputs: ["nzPopconfirmVisibleChange", "nzOnCancel", "nzOnConfirm"], exportAs: ["nzPopconfirm"] }, { kind: "ngmodule", type: NzEmptyModule }, { kind: "ngmodule", type: NzAlertModule }, { 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: "ngmodule", type: NzDividerModule }, { kind: "component", type: i17.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }, { kind: "component", type: ButtonBack, selector: "button-back", inputs: ["size"] }, { kind: "component", type: ButtonSave, selector: "button-save", inputs: ["size"] }, { kind: "component", type: ButtonDelete, selector: "button-delete", inputs: ["size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: RoleDetailComponent, isStandalone: true, selector: "app-menu-detail", viewQueries: [{ propertyName: "nzTreeComponent", first: true, predicate: ["nzTree"], descendants: true }, { propertyName: "parentSelect", first: true, predicate: ["parentSelect"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<form nz-form [formGroup]=\"formData\">\n  <div nz-flex nzJustify=\"end\">\n    <div nz-flex [nzGap]=\"'small'\">\n      <button-save (click)=\"save()\"></button-save>\n      <button-delete *ngIf=\"item.App_Role_Id\" (click)=\"delete()\"></button-delete>\n      <button-back (click)=\"goto('/admin/role')\"></button-back>\n    </div>\n  </div>\n\n  <nz-divider></nz-divider>\n\n  <div nz-row [nzGutter]=\"[32, 0]\">\n    <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\n      <nz-form-item>\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Code\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired> M\u00E3 </nz-form-label>\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\n          <input nz-input formControlName=\"Code\" id=\"Code\" />\n        </nz-form-control>\n      </nz-form-item>\n      <nz-form-item>\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Name\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired> T\u00EAn </nz-form-label>\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\n          <input nz-input formControlName=\"Name\" id=\"Name\" />\n        </nz-form-control>\n      </nz-form-item>\n      <nz-form-item>\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Description\" nzLabelAlign=\"left\" nzNoColon=\"true\"> M\u00F4 t\u1EA3 </nz-form-label>\n        <nz-form-control [nzSpan]=\"16\">\n          <textarea nz-input formControlName=\"Description\" id=\"Description\"></textarea>\n        </nz-form-control>\n      </nz-form-item>\n      <div nz-row>\n        <div nz-col [nzSpan]=\"8\"></div>\n        <div nz-col [nzSpan]=\"16\">\n          <label nz-checkbox formControlName=\"IsActive\">Active</label>\n        </div>\n      </div>\n    </div>\n\n    <div nz-col [nzSpan]=\"12\">\n      <nz-tabset nzType=\"card\" nzSize=\"small\">\n        <nz-tab nzTitle=\"Menu\">\n          <h3>Ph\u00E2n quy\u1EC1n Menu</h3>\n\n          <nz-tree\n            #nzTree\n            [nzData]=\"nodes\"\n            nzCheckable\n            nzMultiple\n            nzBlockNode\n            [nzTreeTemplate]=\"nzTreeTemplate\"\n            [(nzCheckedKeys)]=\"checkedKeys\"\n            (nzCheckBoxChange)=\"onTreeCheckBoxChange($event)\"\n          ></nz-tree>\n\n          <ng-template #nzTreeTemplate let-node let-origin=\"origin\">\n            <div style=\"display: flex; justify-content: space-between; align-items: center; width: 100%\">\n              <span class=\"custom-node-name\">{{ node.title }}</span>\n\n              <div style=\"display: flex; gap: 4px\" (click)=\"$event.stopPropagation()\">\n                <label\n                  nz-checkbox\n                  [ngModelOptions]=\"{ standalone: true }\"\n                  [(ngModel)]=\"origin.canCreate\"\n                  [nzIndeterminate]=\"origin.isCreateIndeterminate\"\n                  (ngModelChange)=\"onPermissionChange(node, 'create')\"\n                >\n                  C\n                </label>\n                <label\n                  nz-checkbox\n                  [ngModelOptions]=\"{ standalone: true }\"\n                  [(ngModel)]=\"origin.canUpdate\"\n                  [nzIndeterminate]=\"origin.isUpdateIndeterminate\"\n                  (ngModelChange)=\"onPermissionChange(node, 'update')\"\n                >\n                  U\n                </label>\n                <label\n                  nz-checkbox\n                  [ngModelOptions]=\"{ standalone: true }\"\n                  [(ngModel)]=\"origin.canDelete\"\n                  [nzIndeterminate]=\"origin.isDeleteIndeterminate\"\n                  (ngModelChange)=\"onPermissionChange(node, 'delete')\"\n                >\n                  D\n                </label>\n              </div>\n            </div>\n          </ng-template>\n        </nz-tab>\n        <nz-tab nzTitle=\"User\">\n          <div style=\"padding: 8px\">\n            <h3 style=\"margin-bottom: 16px\">Danh s\u00E1ch User trong Role</h3>\n\n            <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\n              <span style=\"font-weight: 500\">Users ({{ lstUserInRole.length }})</span>\n              <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddUserModal()\">\n                <span nz-icon nzType=\"plus\"></span>\n                Th\u00EAm User\n              </button>\n            </div>\n\n            <div style=\"max-height: 450px; overflow-y: auto\">\n              <nz-table\n                #userTable\n                [nzData]=\"lstUserInRole\"\n                [nzSize]=\"'small'\"\n                [nzShowPagination]=\"lstUserInRole.length > 20\"\n                [nzPageSize]=\"20\"\n              >\n                <thead>\n                  <tr>\n                    <th nzWidth=\"40px\">STT</th>\n                    <th>User</th>\n                    <th nzWidth=\"50px\" nzAlign=\"center\"></th>\n                  </tr>\n                </thead>\n                <tbody>\n                  <tr *ngFor=\"let item of userTable.data; let i = index\">\n                    <td>{{ i + 1 }}</td>\n                    <td>\n                      <div style=\"font-weight: 500\">{{ item.UserName }}</div>\n                      <div style=\"font-size: 12px; color: #888\">{{ item.FullName }}</div>\n                      <div *ngIf=\"item.Email\" style=\"font-size: 11px; color: #aaa\">{{ item.Email }}</div>\n                    </td>\n                    <td nzAlign=\"center\">\n                      <button\n                        nz-button\n                        nzType=\"link\"\n                        nzDanger\n                        nzSize=\"small\"\n                        nz-popconfirm\n                        nzPopconfirmTitle=\"X\u00F3a User n\u00E0y?\"\n                        (nzOnConfirm)=\"deleteUserFromRole(item)\"\n                      >\n                        <span nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\n                      </button>\n                    </td>\n                  </tr>\n                </tbody>\n              </nz-table>\n            </div>\n          </div>\n        </nz-tab>\n      </nz-tabset>\n    </div>\n  </div>\n</form>\n\n<!-- Modal ch\u1ECDn User -->\n<nz-modal\n  [(nzVisible)]=\"isAddUserModalVisible\"\n  nzTitle=\"Th\u00EAm User v\u00E0o Role\"\n  [nzWidth]=\"700\"\n  (nzOnCancel)=\"closeAddUserModal()\"\n  (nzOnOk)=\"addUsersToRole()\"\n  nzOkText=\"Th\u00EAm\"\n  nzCancelText=\"H\u1EE7y\"\n>\n  <ng-container *nzModalContent>\n    <!-- Search box -->\n    <nz-input-group [nzPrefix]=\"prefixIconSearch\" style=\"margin-bottom: 16px\">\n      <input\n        type=\"text\"\n        nz-input\n        placeholder=\"T\u00ECm ki\u1EBFm User...\"\n        [(ngModel)]=\"searchUserText\"\n        (ngModelChange)=\"filterAvailableUsers()\"\n      />\n    </nz-input-group>\n    <ng-template #prefixIconSearch>\n      <span nz-icon nzType=\"search\"></span>\n    </ng-template>\n\n    <nz-table\n      #addUserTable\n      [nzData]=\"lstFilteredUser\"\n      [nzSize]=\"'small'\"\n      [nzShowPagination]=\"true\"\n      [nzPageSize]=\"10\"\n      [nzLoading]=\"isLoadingAvailableUsers\"\n    >\n      <thead>\n        <tr>\n          <th\n            nzWidth=\"60px\"\n            nzShowCheckbox\n            [(nzChecked)]=\"isAllUserChecked\"\n            (nzCheckedChange)=\"onAllUserChecked($event)\"\n            [nzIndeterminate]=\"isUserIndeterminate\"\n          ></th>\n          <th nzWidth=\"150px\">Username</th>\n          <th>T\u00EAn \u0111\u1EA7y \u0111\u1EE7</th>\n          <th>Email</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngFor=\"let item of addUserTable.data\">\n          <td>\n            <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onUserChecked(item, $event)\"></label>\n          </td>\n          <td>{{ item.UserName }}</td>\n          <td>{{ item.FullName }}</td>\n          <td>{{ item.Email }}</td>\n        </tr>\n      </tbody>\n    </nz-table>\n  </ng-container>\n</nz-modal>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i2$1.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: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "directive", type: i5.NzFormDirective, selector: "[nz-form]", inputs: ["nzLayout", "nzNoColon", "nzAutoTips", "nzDisableAutoTips", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzForm"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzTreeModule }, { kind: "component", type: i1$7.NzTreeComponent, selector: "nz-tree", inputs: ["nzShowIcon", "nzHideUnMatched", "nzBlockNode", "nzExpandAll", "nzSelectMode", "nzCheckStrictly", "nzShowExpand", "nzShowLine", "nzCheckable", "nzAsyncData", "nzDraggable", "nzMultiple", "nzExpandedIcon", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualHeight", "nzTreeTemplate", "nzBeforeDrop", "nzData", "nzExpandedKeys", "nzSelectedKeys", "nzCheckedKeys", "nzSearchValue", "nzSearchFunc"], outputs: ["nzExpandedKeysChange", "nzSelectedKeysChange", "nzCheckedKeysChange", "nzSearchValueChange", "nzClick", "nzDblClick", "nzContextMenu", "nzCheckboxChange", "nzExpandChange", "nzOnDragStart", "nzOnDragEnter", "nzOnDragOver", "nzOnDragLeave", "nzOnDrop", "nzOnDragEnd"], exportAs: ["nzTree"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzTabsModule }, { kind: "component", type: i1$6.NzTabSetComponent, selector: "nz-tabset", inputs: ["nzSelectedIndex", "nzTabPosition", "nzTabBarExtraContent", "nzCanDeactivate", "nzAddIcon", "nzTabBarStyle", "nzType", "nzSize", "nzAnimated", "nzTabBarGutter", "nzHideAdd", "nzCentered", "nzHideAll", "nzLinkRouter", "nzLinkExact", "nzDestroyInactiveTabPane"], outputs: ["nzSelectChange", "nzSelectedIndexChange", "nzTabListScroll", "nzClose", "nzAdd"], exportAs: ["nzTabset"] }, { kind: "component", type: i1$6.NzTabComponent, selector: "nz-tab", inputs: ["nzTitle", "nzClosable", "nzCloseIcon", "nzDisabled", "nzForceRender"], outputs: ["nzSelect", "nzDeselect", "nzClick", "nzContextmenu"], exportAs: ["nzTab"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i6.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i6.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵ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: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzCheckboxModule }, { kind: "component", type: i3$1.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId", "nzName"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i4.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: i4.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i4.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i4.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i4.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i4.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "directive", type: i4.NzCellAlignDirective, selector: "th[nzAlign],td[nzAlign]", inputs: ["nzAlign"] }, { kind: "component", type: i4.NzThSelectionComponent, selector: "th[nzSelections],th[nzChecked],th[nzShowCheckbox],th[nzShowRowSelection]", inputs: ["nzSelections", "nzChecked", "nzDisabled", "nzIndeterminate", "nzLabel", "nzShowCheckbox", "nzShowRowSelection"], outputs: ["nzCheckedChange"] }, { kind: "ngmodule", type: NzModalModule }, { kind: "component", type: i15.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: i15.NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { kind: "ngmodule", type: NzPopconfirmModule }, { kind: "directive", type: i9.NzPopconfirmDirective, selector: "[nz-popconfirm]", inputs: ["nzPopconfirmArrowPointAtCenter", "nzPopconfirmTitle", "nzPopconfirmTitleContext", "nz-popconfirm", "nzPopconfirmTrigger", "nzPopconfirmPlacement", "nzPopconfirmOrigin", "nzPopconfirmMouseEnterDelay", "nzPopconfirmMouseLeaveDelay", "nzPopconfirmOverlayClassName", "nzPopconfirmOverlayStyle", "nzPopconfirmVisible", "nzOkText", "nzOkType", "nzOkDisabled", "nzOkDanger", "nzCancelText", "nzBeforeConfirm", "nzIcon", "nzCondition", "nzPopconfirmShowArrow", "nzPopconfirmBackdrop", "nzAutofocus"], outputs: ["nzPopconfirmVisibleChange", "nzOnCancel", "nzOnConfirm"], exportAs: ["nzPopconfirm"] }, { kind: "ngmodule", type: NzEmptyModule }, { kind: "ngmodule", type: NzAlertModule }, { 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: "ngmodule", type: NzDividerModule }, { kind: "component", type: i17.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }, { kind: "component", type: ButtonBack, selector: "button-back", inputs: ["size"] }, { kind: "component", type: ButtonSave, selector: "button-save", inputs: ["size"] }, { kind: "component", type: ButtonDelete, selector: "button-delete", inputs: ["size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RoleDetailComponent, decorators: [{
             type: Component,
@@ -9885,7 +9943,7 @@ class DocTemplate extends BaseComponent {
         return path.substring(0, path.lastIndexOf('\\'));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DocTemplate, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: DocTemplate, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "myTree", first: true, predicate: ["myTree"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"action-bar\" style=\"margin-bottom: 16px; display: flex; gap: 8px\">\n  <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"getdata()\"><nz-icon nzType=\"reload\" /> Reload</button>\n  <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"modalVisible = true\">\n    <nz-icon nzType=\"folder-add\" /> New folder\n  </button>\n  <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"triggerUpload()\">\n    <nz-icon nzType=\"upload\" /> Upload\n  </button>\n</div>\n\n<input type=\"file\" id=\"fileUpload\" style=\"display: none\" (change)=\"onFileSelected($event)\" />\n\n<nz-tree\n  #myTree\n  nzBlockNode\n  [nzData]=\"nodes\"\n  (nzClick)=\"activeNode($event)\"\n  (nzContextMenu)=\"contextMenu($event, menu)\"\n  [nzTreeTemplate]=\"nzTreeTemplate\"\n></nz-tree>\n\n<ng-template #nzTreeTemplate let-node>\n  <span class=\"custom-node\" (contextmenu)=\"selectedNode = node\">\n    <nz-icon [nzType]=\"node.isLeaf ? 'file' : node.isExpanded ? 'folder-open' : 'folder'\" />\n    <span class=\"node-title\">{{ node.title }}</span>\n  </span>\n</ng-template>\n\n<nz-dropdown-menu #menu=\"nzDropdownMenu\">\n  <ul nz-menu>\n    @if (!selectedNode?.isLeaf) {\n      <li nz-menu-item (click)=\"triggerUpload()\"><nz-icon nzType=\"upload\" /> Upload</li>\n      <li nz-menu-item (click)=\"modalVisible = true\"><nz-icon nzType=\"folder-add\" /> New folder</li>\n    }\n\n    @if (selectedNode?.isLeaf) {\n      <li nz-menu-item (click)=\"download()\"><nz-icon nzType=\"download\" /> Download</li>\n    }\n\n    <li nz-menu-divider></li>\n    <li nz-menu-item nzDanger (click)=\"delete()\">\n      <nz-icon nzType=\"delete\" /> X\u00F3a {{ selectedNode?.isLeaf ? \"File\" : \"Folder\" }}\n    </li>\n  </ul>\n</nz-dropdown-menu>\n\n<nz-modal\n  nzTitle=\"New folder\"\n  [nzMaskClosable]=\"false\"\n  [(nzVisible)]=\"modalVisible\"\n  (nzOnCancel)=\"modalVisible = false\"\n  (nzOnOk)=\"addFolder()\"\n>\n  <ng-container *nzModalContent>\n    <extend-input [label]=\"'Name'\" [(_ngModel)]=\"newFolderName\"></extend-input>\n  </ng-container>\n</nz-modal>\n", styles: ["@charset \"UTF-8\";.custom-node{cursor:pointer;display:flex;align-items:center}.custom-node nz-icon{margin-right:8px;font-size:16px;color:#1890ff}.custom-node .file-name,.custom-node .folder-name{font-weight:500;margin-right:12px}.custom-node .file-desc,.custom-node .folder-desc{font-size:12px;color:#999}.custom-node .anticon-file{color:#595959}\n"], dependencies: [{ kind: "ngmodule", type: NzTreeModule }, { kind: "component", type: i10.NzTreeComponent, selector: "nz-tree", inputs: ["nzShowIcon", "nzHideUnMatched", "nzBlockNode", "nzExpandAll", "nzSelectMode", "nzCheckStrictly", "nzShowExpand", "nzShowLine", "nzCheckable", "nzAsyncData", "nzDraggable", "nzMultiple", "nzExpandedIcon", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualHeight", "nzTreeTemplate", "nzBeforeDrop", "nzData", "nzExpandedKeys", "nzSelectedKeys", "nzCheckedKeys", "nzSearchValue", "nzSearchFunc"], outputs: ["nzExpandedKeysChange", "nzSelectedKeysChange", "nzCheckedKeysChange", "nzSearchValueChange", "nzClick", "nzDblClick", "nzContextMenu", "nzCheckboxChange", "nzExpandChange", "nzOnDragStart", "nzOnDragEnter", "nzOnDragOver", "nzOnDragLeave", "nzOnDrop", "nzOnDragEnd"], exportAs: ["nzTree"] }, { kind: "ngmodule", type: NzModalModule }, { kind: "component", type: i15.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: i15.NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { 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: "ngmodule", type: NzDropDownModule }, { kind: "directive", type: i4$2.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$2.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "directive", type: i4$2.NzMenuDividerDirective, selector: "[nz-menu-divider]", exportAs: ["nzMenuDivider"] }, { kind: "component", type: i5$3.NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵ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: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: DocTemplate, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "myTree", first: true, predicate: ["myTree"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"action-bar\" style=\"margin-bottom: 16px; display: flex; gap: 8px\">\n  <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"getdata()\"><nz-icon nzType=\"reload\" /> Reload</button>\n  <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"modalVisible = true\">\n    <nz-icon nzType=\"folder-add\" /> New folder\n  </button>\n  <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"triggerUpload()\">\n    <nz-icon nzType=\"upload\" /> Upload\n  </button>\n</div>\n\n<input type=\"file\" id=\"fileUpload\" style=\"display: none\" (change)=\"onFileSelected($event)\" />\n\n<nz-tree\n  #myTree\n  nzBlockNode\n  [nzData]=\"nodes\"\n  (nzClick)=\"activeNode($event)\"\n  (nzContextMenu)=\"contextMenu($event, menu)\"\n  [nzTreeTemplate]=\"nzTreeTemplate\"\n></nz-tree>\n\n<ng-template #nzTreeTemplate let-node>\n  <span class=\"custom-node\" (contextmenu)=\"selectedNode = node\">\n    <nz-icon [nzType]=\"node.isLeaf ? 'file' : node.isExpanded ? 'folder-open' : 'folder'\" />\n    <span class=\"node-title\">{{ node.title }}</span>\n  </span>\n</ng-template>\n\n<nz-dropdown-menu #menu=\"nzDropdownMenu\">\n  <ul nz-menu>\n    @if (!selectedNode?.isLeaf) {\n      <li nz-menu-item (click)=\"triggerUpload()\"><nz-icon nzType=\"upload\" /> Upload</li>\n      <li nz-menu-item (click)=\"modalVisible = true\"><nz-icon nzType=\"folder-add\" /> New folder</li>\n    }\n\n    @if (selectedNode?.isLeaf) {\n      <li nz-menu-item (click)=\"download()\"><nz-icon nzType=\"download\" /> Download</li>\n    }\n\n    <li nz-menu-divider></li>\n    <li nz-menu-item nzDanger (click)=\"delete()\">\n      <nz-icon nzType=\"delete\" /> X\u00F3a {{ selectedNode?.isLeaf ? \"File\" : \"Folder\" }}\n    </li>\n  </ul>\n</nz-dropdown-menu>\n\n<nz-modal\n  nzTitle=\"New folder\"\n  [nzMaskClosable]=\"false\"\n  [(nzVisible)]=\"modalVisible\"\n  (nzOnCancel)=\"modalVisible = false\"\n  (nzOnOk)=\"addFolder()\"\n>\n  <ng-container *nzModalContent>\n    <extend-input [label]=\"'Name'\" [(_ngModel)]=\"newFolderName\"></extend-input>\n  </ng-container>\n</nz-modal>\n", styles: ["@charset \"UTF-8\";.custom-node{cursor:pointer;display:flex;align-items:center}.custom-node nz-icon{margin-right:8px;font-size:16px;color:#1890ff}.custom-node .file-name,.custom-node .folder-name{font-weight:500;margin-right:12px}.custom-node .file-desc,.custom-node .folder-desc{font-size:12px;color:#999}.custom-node .anticon-file{color:#595959}\n"], dependencies: [{ kind: "ngmodule", type: NzTreeModule }, { kind: "component", type: i1$7.NzTreeComponent, selector: "nz-tree", inputs: ["nzShowIcon", "nzHideUnMatched", "nzBlockNode", "nzExpandAll", "nzSelectMode", "nzCheckStrictly", "nzShowExpand", "nzShowLine", "nzCheckable", "nzAsyncData", "nzDraggable", "nzMultiple", "nzExpandedIcon", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualHeight", "nzTreeTemplate", "nzBeforeDrop", "nzData", "nzExpandedKeys", "nzSelectedKeys", "nzCheckedKeys", "nzSearchValue", "nzSearchFunc"], outputs: ["nzExpandedKeysChange", "nzSelectedKeysChange", "nzCheckedKeysChange", "nzSearchValueChange", "nzClick", "nzDblClick", "nzContextMenu", "nzCheckboxChange", "nzExpandChange", "nzOnDragStart", "nzOnDragEnter", "nzOnDragOver", "nzOnDragLeave", "nzOnDrop", "nzOnDragEnd"], exportAs: ["nzTree"] }, { kind: "ngmodule", type: NzModalModule }, { kind: "component", type: i15.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: i15.NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { 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: "ngmodule", type: NzDropDownModule }, { kind: "directive", type: i4$2.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$2.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "directive", type: i4$2.NzMenuDividerDirective, selector: "[nz-menu-divider]", exportAs: ["nzMenuDivider"] }, { kind: "component", type: i5$3.NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵ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: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DocTemplate, decorators: [{
             type: Component,
@@ -10029,7 +10087,7 @@ class LogServerComponent extends BaseComponent {
         }, (err) => this.handleError(err));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LogServerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: LogServerComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"btn-wrapper\" nz-flex [nzGap]=\"'small'\" [nzWrap]=\"'wrap'\">\n  @for (file of lstLogFile; track $index) {\n    <div style=\"width: 250px\">\n      <button nz-button nzType=\"default\" nz-tooltip=\"{{ file }}\">\n        <nz-icon nzType=\"download\" (click)=\"dowloadLog(file.fileName)\" />\n      </button>\n      &nbsp;<a class=\"link-detail\" [routerLink]=\"[file.fileName]\">{{ file.fileName }} ({{ file.fileSize }})</a>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { 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: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i8.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: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵ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: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: LogServerComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"btn-wrapper\" nz-flex [nzGap]=\"'small'\" [nzWrap]=\"'wrap'\">\n  @for (file of lstLogFile; track $index) {\n    <div style=\"width: 250px\">\n      <button nz-button nzType=\"default\" nz-tooltip=\"{{ file }}\">\n        <nz-icon nzType=\"download\" (click)=\"dowloadLog(file.fileName)\" />\n      </button>\n      &nbsp;<a class=\"link-detail\" [routerLink]=\"[file.fileName]\">{{ file.fileName }} ({{ file.fileSize }})</a>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { 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: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i8.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: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$8.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵ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: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LogServerComponent, decorators: [{
             type: Component,
@@ -10948,7 +11006,7 @@ class SynologyComponent extends BaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SynologyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: SynologyComponent, isStandalone: true, selector: "ng-component", providers: [DatePipe], usesInheritance: true, ngImport: i0, template: "<div nz-row nzGutter=\"32\" class=\"mb-3\">\n  <div nz-col nzSpan=\"16\" style=\"display: flex; align-items: center; gap: 8px\">\n    <strong>Target: </strong>\n    <span class=\"text-primary\">{{ currentPath }}</span>\n\n    <icon-copy [textToCopy]=\"currentPath\" [tooltip]=\"'Copy \u0111\u01B0\u1EDDng d\u1EABn'\"></icon-copy>\n  </div>\n\n  <div nz-col nzSpan=\"8\" style=\"display: flex; justify-content: flex-end; gap: 8px\">\n    <input type=\"file\" #fileInput style=\"display: none\" (change)=\"onFileSelected($event)\" />\n    <button nz-button nzType=\"primary\" (click)=\"refreshTree()\" nz-tooltip=\"Reload All\" nzTooltipPlacement=\"bottom\">\n      <i nz-icon nzType=\"reload\"></i>\n    </button>\n    <button\n      nz-button\n      nzType=\"primary\"\n      (click)=\"fileInput.click()\"\n      nz-tooltip=\"Upload to Target\"\n      nzTooltipPlacement=\"bottom\"\n    >\n      <i nz-icon nzType=\"upload\"></i>\n    </button>\n    <button\n      nz-button\n      nzType=\"primary\"\n      (click)=\"createFolder()\"\n      nz-tooltip=\"New Folder in Target\"\n      nzTooltipPlacement=\"bottomRight\"\n    >\n      <i nz-icon nzType=\"folder-add\"></i>\n    </button>\n  </div>\n</div>\n\n<div\n  style=\"\n    border: 1px solid #f0f0f0;\n    border-radius: 4px;\n    padding: 12px;\n    background: #fff;\n    min-height: 400px;\n    position: relative;\n  \"\n>\n  <!-- Thanh ti\u00EAu \u0111\u1EC1 (Gi\u1EA3 l\u1EADp Header c\u1EE7a b\u1EA3ng) -->\n  <div\n    style=\"\n      display: flex;\n      justify-content: space-between;\n      border-bottom: 2px solid #f0f0f0;\n      padding-bottom: 8px;\n      margin-bottom: 8px;\n      font-weight: bold;\n      color: #5c5c5c;\n    \"\n  >\n    <div>Name</div>\n    <div style=\"display: flex; gap: 16px\">\n      <div style=\"width: 100px; text-align: right\">Size</div>\n      <div style=\"width: 150px; text-align: right\">Modified Date</div>\n      <div style=\"width: 130px; text-align: right; padding-right: 8px\">Action</div>\n    </div>\n  </div>\n\n  <nz-spin [nzSpinning]=\"isLoading\">\n    <!-- nzBlockNode gi\u00FAp d\u00F2ng c\u1EE7a c\u00E2y tr\u1EA3i d\u00E0i 100% width -->\n    <!-- nzAsyncData k\u00EDch ho\u1EA1t c\u01A1 ch\u1EBF t\u1EA3i b\u1EA5t \u0111\u1ED3ng b\u1ED9 khi b\u1EA5m d\u1EA5u c\u1ED9ng -->\n    <nz-tree\n      [nzData]=\"treeNodes\"\n      nzAsyncData\n      nzBlockNode\n      (nzExpandChange)=\"onExpandChange($event)\"\n      (nzClick)=\"onNodeClick($event)\"\n      [nzTreeTemplate]=\"nzTreeTemplate\"\n    ></nz-tree>\n  </nz-spin>\n</div>\n\n<ng-template #nzTreeTemplate let-node let-origin=\"origin\">\n  <div\n    class=\"tree-node-row\"\n    style=\"display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 4px 0\"\n    (dblclick)=\"onNodeDblClick(node, $event)\"\n  >\n    <div\n      style=\"\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      \"\n    >\n      <i\n        nz-icon\n        [nzType]=\"origin.originData.isdir ? (node.isExpanded ? 'folder-open' : 'folder') : 'file'\"\n        [nzTheme]=\"origin.originData.isdir ? 'fill' : 'outline'\"\n        [style.color]=\"origin.originData.isdir ? '#faad14' : '#1890ff'\"\n        style=\"font-size: 16px\"\n      ></i>\n      <span [class.text-primary]=\"selectedNode?.key === node.key\" style=\"font-weight: 500\">\n        {{ node.title }}\n      </span>\n    </div>\n\n    <div style=\"display: flex; gap: 16px; align-items: center\">\n      <!-- Size -->\n      <div style=\"width: 100px; text-align: right; color: #8c8c8c\">\n        {{ origin.originData.isdir ? \"-\" : formatBytes(origin.originData.additional?.size) }}\n      </div>\n\n      <!-- Date -->\n      <div style=\"width: 150px; text-align: right; color: #8c8c8c\">\n        {{ formatDate(origin.originData.additional?.time?.mtime) }}\n      </div>\n\n      <!-- N\u00FAt ch\u1EE9c n\u0103ng (Action) -->\n      <div style=\"width: 130px; display: flex; justify-content: flex-end; gap: 2px\">\n        <button\n          *ngIf=\"!origin.originData.isdir\"\n          nz-button\n          nzType=\"link\"\n          nzSize=\"small\"\n          (click)=\"downloadFile(origin.originData); $event.stopPropagation()\"\n          nz-tooltip=\"Download\"\n        >\n          <nz-icon nzType=\"download\" nzTheme=\"outline\"></nz-icon>\n        </button>\n\n        <button\n          nz-button\n          nzType=\"link\"\n          nzSize=\"small\"\n          (click)=\"getShareLink(origin.originData); $event.stopPropagation()\"\n          nz-tooltip=\"Get Share Link\"\n        >\n          <nz-icon nzType=\"link\" nzTheme=\"outline\"></nz-icon>\n        </button>\n\n        <button\n          nz-button\n          nzType=\"link\"\n          nzSize=\"small\"\n          (click)=\"openPermissionModal(origin.originData); $event.stopPropagation()\"\n          nz-tooltip=\"Permission\"\n        >\n          <nz-icon nzType=\"safety-certificate\" nzTheme=\"outline\" />\n        </button>\n\n        <button\n          nz-button\n          nzType=\"link\"\n          nzSize=\"small\"\n          (click)=\"renameItem(origin.originData, node); $event.stopPropagation()\"\n          nz-tooltip=\"Rename\"\n        >\n          <nz-icon nzType=\"retweet\" nzTheme=\"outline\" />\n        </button>\n\n        <button\n          nz-button\n          nzType=\"link\"\n          nzDanger\n          nzSize=\"small\"\n          (click)=\"deleteItem(origin.originData, node); $event.stopPropagation()\"\n          nz-tooltip=\"Delete\"\n        >\n          <nz-icon nzType=\"delete\" nzTheme=\"outline\"></nz-icon>\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<nz-modal\n  [(nzVisible)]=\"isPermissionModalVisible\"\n  [nzTitle]=\"'Properties - Permission : ' + (selectedItemForPerm?.name || '')\"\n  (nzOnCancel)=\"isPermissionModalVisible = false\"\n  [nzWidth]=\"800\"\n  [nzFooter]=\"modalFooter\"\n>\n  <ng-container *nzModalContent>\n    <nz-table\n      #permTable\n      [nzData]=\"currentPermissions\"\n      [nzLoading]=\"isPermLoading\"\n      nzSize=\"small\"\n      nzBordered\n      [nzFrontPagination]=\"false\"\n    >\n      <thead>\n        <tr>\n          <th nzWidth=\"40%\">User or group</th>\n          <th nzWidth=\"20%\">Type</th>\n          <th nzWidth=\"30%\">Permission</th>\n          <th nzWidth=\"10%\" nzAlign=\"center\">Action</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngFor=\"let rule of permTable.data; let i = index\">\n          <td>\n            <nz-icon nzType=\"user\" nzTheme=\"outline\" class=\"mr-2\"></nz-icon>\n            {{ rule.owner_name }}\n          </td>\n          <td>\n            {{ rule.permission_type === \"allow\" ? \"Allow\" : \"Deny\" }}\n          </td>\n          <td>\n            {{ getPermissionText(rule) }}\n          </td>\n          <td nzAlign=\"center\">\n            <button nz-button nzType=\"text\" nzSize=\"small\" nzDanger (click)=\"removeRule(i)\">\n              <nz-icon nzType=\"close\" />\n            </button>\n          </td>\n        </tr>\n      </tbody>\n    </nz-table>\n\n    <div class=\"mt-3\">\n      <label nz-checkbox [(ngModel)]=\"applyToSubfolders\">Apply to this folder, sub-folders and files</label>\n    </div>\n  </ng-container>\n\n  <ng-template #modalFooter>\n    <button nz-button nzType=\"default\" (click)=\"isPermissionModalVisible = false\">Cancel</button>\n    <button nz-button nzType=\"primary\" (click)=\"savePermissions()\" [nzLoading]=\"isPermSaving\">Save</button>\n  </ng-template>\n</nz-modal>\n\n<nz-modal\n  [(nzVisible)]=\"isPreviewModalVisible\"\n  [nzTitle]=\"previewTitle\"\n  (nzOnCancel)=\"closePreviewModal()\"\n  [nzWidth]=\"'80vw'\"\n  [nzBodyStyle]=\"{ 'min-height': '70vh' }\"\n  [nzFooter]=\"null\"\n>\n  <ng-container *nzModalContent>\n    <nz-spin [nzSpinning]=\"isPreviewLoading\">\n      <extend-view-file-content\n        [previewType]=\"previewType\"\n        [previewContent]=\"previewContent\"\n      ></extend-view-file-content>\n    </nz-spin>\n  </ng-container>\n</nz-modal>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.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: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵ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: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { 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: "ngmodule", type: NzFlexModule }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i8.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: "ngmodule", type: NzModalModule }, { kind: "component", type: i15.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: i15.NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { kind: "ngmodule", type: NzTreeModule }, { kind: "component", type: i10.NzTreeComponent, selector: "nz-tree", inputs: ["nzShowIcon", "nzHideUnMatched", "nzBlockNode", "nzExpandAll", "nzSelectMode", "nzCheckStrictly", "nzShowExpand", "nzShowLine", "nzCheckable", "nzAsyncData", "nzDraggable", "nzMultiple", "nzExpandedIcon", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualHeight", "nzTreeTemplate", "nzBeforeDrop", "nzData", "nzExpandedKeys", "nzSelectedKeys", "nzCheckedKeys", "nzSearchValue", "nzSearchFunc"], outputs: ["nzExpandedKeysChange", "nzSelectedKeysChange", "nzCheckedKeysChange", "nzSearchValueChange", "nzClick", "nzDblClick", "nzContextMenu", "nzCheckboxChange", "nzExpandChange", "nzOnDragStart", "nzOnDragEnter", "nzOnDragOver", "nzOnDragLeave", "nzOnDrop", "nzOnDragEnd"], exportAs: ["nzTree"] }, { kind: "ngmodule", type: NzSpinModule }, { kind: "component", type: i2$3.NzSpinComponent, selector: "nz-spin", inputs: ["nzIndicator", "nzSize", "nzTip", "nzDelay", "nzSimple", "nzSpinning"], exportAs: ["nzSpin"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i4.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: i4.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i4.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i4.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i4.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i4.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "directive", type: i4.NzCellAlignDirective, selector: "th[nzAlign],td[nzAlign]", inputs: ["nzAlign"] }, { kind: "component", type: IconCopy, selector: "icon-copy", inputs: ["textToCopy", "tooltip", "size"] }, { kind: "component", type: ExtendViewFileContentComponent, selector: "extend-view-file-content", inputs: ["previewType", "previewContent"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: SynologyComponent, isStandalone: true, selector: "ng-component", providers: [DatePipe], usesInheritance: true, ngImport: i0, template: "<div nz-row nzGutter=\"32\" class=\"mb-3\">\n  <div nz-col nzSpan=\"16\" style=\"display: flex; align-items: center; gap: 8px\">\n    <strong>Target: </strong>\n    <span class=\"text-primary\">{{ currentPath }}</span>\n\n    <icon-copy [textToCopy]=\"currentPath\" [tooltip]=\"'Copy \u0111\u01B0\u1EDDng d\u1EABn'\"></icon-copy>\n  </div>\n\n  <div nz-col nzSpan=\"8\" style=\"display: flex; justify-content: flex-end; gap: 8px\">\n    <input type=\"file\" #fileInput style=\"display: none\" (change)=\"onFileSelected($event)\" />\n    <button nz-button nzType=\"primary\" (click)=\"refreshTree()\" nz-tooltip=\"Reload All\" nzTooltipPlacement=\"bottom\">\n      <i nz-icon nzType=\"reload\"></i>\n    </button>\n    <button\n      nz-button\n      nzType=\"primary\"\n      (click)=\"fileInput.click()\"\n      nz-tooltip=\"Upload to Target\"\n      nzTooltipPlacement=\"bottom\"\n    >\n      <i nz-icon nzType=\"upload\"></i>\n    </button>\n    <button\n      nz-button\n      nzType=\"primary\"\n      (click)=\"createFolder()\"\n      nz-tooltip=\"New Folder in Target\"\n      nzTooltipPlacement=\"bottomRight\"\n    >\n      <i nz-icon nzType=\"folder-add\"></i>\n    </button>\n  </div>\n</div>\n\n<div\n  style=\"\n    border: 1px solid #f0f0f0;\n    border-radius: 4px;\n    padding: 12px;\n    background: #fff;\n    min-height: 400px;\n    position: relative;\n  \"\n>\n  <!-- Thanh ti\u00EAu \u0111\u1EC1 (Gi\u1EA3 l\u1EADp Header c\u1EE7a b\u1EA3ng) -->\n  <div\n    style=\"\n      display: flex;\n      justify-content: space-between;\n      border-bottom: 2px solid #f0f0f0;\n      padding-bottom: 8px;\n      margin-bottom: 8px;\n      font-weight: bold;\n      color: #5c5c5c;\n    \"\n  >\n    <div>Name</div>\n    <div style=\"display: flex; gap: 16px\">\n      <div style=\"width: 100px; text-align: right\">Size</div>\n      <div style=\"width: 150px; text-align: right\">Modified Date</div>\n      <div style=\"width: 130px; text-align: right; padding-right: 8px\">Action</div>\n    </div>\n  </div>\n\n  <nz-spin [nzSpinning]=\"isLoading\">\n    <!-- nzBlockNode gi\u00FAp d\u00F2ng c\u1EE7a c\u00E2y tr\u1EA3i d\u00E0i 100% width -->\n    <!-- nzAsyncData k\u00EDch ho\u1EA1t c\u01A1 ch\u1EBF t\u1EA3i b\u1EA5t \u0111\u1ED3ng b\u1ED9 khi b\u1EA5m d\u1EA5u c\u1ED9ng -->\n    <nz-tree\n      [nzData]=\"treeNodes\"\n      nzAsyncData\n      nzBlockNode\n      (nzExpandChange)=\"onExpandChange($event)\"\n      (nzClick)=\"onNodeClick($event)\"\n      [nzTreeTemplate]=\"nzTreeTemplate\"\n    ></nz-tree>\n  </nz-spin>\n</div>\n\n<ng-template #nzTreeTemplate let-node let-origin=\"origin\">\n  <div\n    class=\"tree-node-row\"\n    style=\"display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 4px 0\"\n    (dblclick)=\"onNodeDblClick(node, $event)\"\n  >\n    <div\n      style=\"\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      \"\n    >\n      <i\n        nz-icon\n        [nzType]=\"origin.originData.isdir ? (node.isExpanded ? 'folder-open' : 'folder') : 'file'\"\n        [nzTheme]=\"origin.originData.isdir ? 'fill' : 'outline'\"\n        [style.color]=\"origin.originData.isdir ? '#faad14' : '#1890ff'\"\n        style=\"font-size: 16px\"\n      ></i>\n      <span [class.text-primary]=\"selectedNode?.key === node.key\" style=\"font-weight: 500\">\n        {{ node.title }}\n      </span>\n    </div>\n\n    <div style=\"display: flex; gap: 16px; align-items: center\">\n      <!-- Size -->\n      <div style=\"width: 100px; text-align: right; color: #8c8c8c\">\n        {{ origin.originData.isdir ? \"-\" : formatBytes(origin.originData.additional?.size) }}\n      </div>\n\n      <!-- Date -->\n      <div style=\"width: 150px; text-align: right; color: #8c8c8c\">\n        {{ formatDate(origin.originData.additional?.time?.mtime) }}\n      </div>\n\n      <!-- N\u00FAt ch\u1EE9c n\u0103ng (Action) -->\n      <div style=\"width: 130px; display: flex; justify-content: flex-end; gap: 2px\">\n        <button\n          *ngIf=\"!origin.originData.isdir\"\n          nz-button\n          nzType=\"link\"\n          nzSize=\"small\"\n          (click)=\"downloadFile(origin.originData); $event.stopPropagation()\"\n          nz-tooltip=\"Download\"\n        >\n          <nz-icon nzType=\"download\" nzTheme=\"outline\"></nz-icon>\n        </button>\n\n        <button\n          nz-button\n          nzType=\"link\"\n          nzSize=\"small\"\n          (click)=\"getShareLink(origin.originData); $event.stopPropagation()\"\n          nz-tooltip=\"Get Share Link\"\n        >\n          <nz-icon nzType=\"link\" nzTheme=\"outline\"></nz-icon>\n        </button>\n\n        <button\n          nz-button\n          nzType=\"link\"\n          nzSize=\"small\"\n          (click)=\"openPermissionModal(origin.originData); $event.stopPropagation()\"\n          nz-tooltip=\"Permission\"\n        >\n          <nz-icon nzType=\"safety-certificate\" nzTheme=\"outline\" />\n        </button>\n\n        <button\n          nz-button\n          nzType=\"link\"\n          nzSize=\"small\"\n          (click)=\"renameItem(origin.originData, node); $event.stopPropagation()\"\n          nz-tooltip=\"Rename\"\n        >\n          <nz-icon nzType=\"retweet\" nzTheme=\"outline\" />\n        </button>\n\n        <button\n          nz-button\n          nzType=\"link\"\n          nzDanger\n          nzSize=\"small\"\n          (click)=\"deleteItem(origin.originData, node); $event.stopPropagation()\"\n          nz-tooltip=\"Delete\"\n        >\n          <nz-icon nzType=\"delete\" nzTheme=\"outline\"></nz-icon>\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<nz-modal\n  [(nzVisible)]=\"isPermissionModalVisible\"\n  [nzTitle]=\"'Properties - Permission : ' + (selectedItemForPerm?.name || '')\"\n  (nzOnCancel)=\"isPermissionModalVisible = false\"\n  [nzWidth]=\"800\"\n  [nzFooter]=\"modalFooter\"\n>\n  <ng-container *nzModalContent>\n    <nz-table\n      #permTable\n      [nzData]=\"currentPermissions\"\n      [nzLoading]=\"isPermLoading\"\n      nzSize=\"small\"\n      nzBordered\n      [nzFrontPagination]=\"false\"\n    >\n      <thead>\n        <tr>\n          <th nzWidth=\"40%\">User or group</th>\n          <th nzWidth=\"20%\">Type</th>\n          <th nzWidth=\"30%\">Permission</th>\n          <th nzWidth=\"10%\" nzAlign=\"center\">Action</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngFor=\"let rule of permTable.data; let i = index\">\n          <td>\n            <nz-icon nzType=\"user\" nzTheme=\"outline\" class=\"mr-2\"></nz-icon>\n            {{ rule.owner_name }}\n          </td>\n          <td>\n            {{ rule.permission_type === \"allow\" ? \"Allow\" : \"Deny\" }}\n          </td>\n          <td>\n            {{ getPermissionText(rule) }}\n          </td>\n          <td nzAlign=\"center\">\n            <button nz-button nzType=\"text\" nzSize=\"small\" nzDanger (click)=\"removeRule(i)\">\n              <nz-icon nzType=\"close\" />\n            </button>\n          </td>\n        </tr>\n      </tbody>\n    </nz-table>\n\n    <div class=\"mt-3\">\n      <label nz-checkbox [(ngModel)]=\"applyToSubfolders\">Apply to this folder, sub-folders and files</label>\n    </div>\n  </ng-container>\n\n  <ng-template #modalFooter>\n    <button nz-button nzType=\"default\" (click)=\"isPermissionModalVisible = false\">Cancel</button>\n    <button nz-button nzType=\"primary\" (click)=\"savePermissions()\" [nzLoading]=\"isPermSaving\">Save</button>\n  </ng-template>\n</nz-modal>\n\n<nz-modal\n  [(nzVisible)]=\"isPreviewModalVisible\"\n  [nzTitle]=\"previewTitle\"\n  (nzOnCancel)=\"closePreviewModal()\"\n  [nzWidth]=\"'80vw'\"\n  [nzBodyStyle]=\"{ 'min-height': '70vh' }\"\n  [nzFooter]=\"null\"\n>\n  <ng-container *nzModalContent>\n    <nz-spin [nzSpinning]=\"isPreviewLoading\">\n      <extend-view-file-content\n        [previewType]=\"previewType\"\n        [previewContent]=\"previewContent\"\n      ></extend-view-file-content>\n    </nz-spin>\n  </ng-container>\n</nz-modal>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.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: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵ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: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { 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: "ngmodule", type: NzFlexModule }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i8.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: "ngmodule", type: NzModalModule }, { kind: "component", type: i15.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: i15.NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { kind: "ngmodule", type: NzTreeModule }, { kind: "component", type: i1$7.NzTreeComponent, selector: "nz-tree", inputs: ["nzShowIcon", "nzHideUnMatched", "nzBlockNode", "nzExpandAll", "nzSelectMode", "nzCheckStrictly", "nzShowExpand", "nzShowLine", "nzCheckable", "nzAsyncData", "nzDraggable", "nzMultiple", "nzExpandedIcon", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualHeight", "nzTreeTemplate", "nzBeforeDrop", "nzData", "nzExpandedKeys", "nzSelectedKeys", "nzCheckedKeys", "nzSearchValue", "nzSearchFunc"], outputs: ["nzExpandedKeysChange", "nzSelectedKeysChange", "nzCheckedKeysChange", "nzSearchValueChange", "nzClick", "nzDblClick", "nzContextMenu", "nzCheckboxChange", "nzExpandChange", "nzOnDragStart", "nzOnDragEnter", "nzOnDragOver", "nzOnDragLeave", "nzOnDrop", "nzOnDragEnd"], exportAs: ["nzTree"] }, { kind: "ngmodule", type: NzSpinModule }, { kind: "component", type: i2$3.NzSpinComponent, selector: "nz-spin", inputs: ["nzIndicator", "nzSize", "nzTip", "nzDelay", "nzSimple", "nzSpinning"], exportAs: ["nzSpin"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i4.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: i4.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i4.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i4.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i4.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i4.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "directive", type: i4.NzCellAlignDirective, selector: "th[nzAlign],td[nzAlign]", inputs: ["nzAlign"] }, { kind: "component", type: IconCopy, selector: "icon-copy", inputs: ["textToCopy", "tooltip", "size"] }, { kind: "component", type: ExtendViewFileContentComponent, selector: "extend-view-file-content", inputs: ["previewType", "previewContent"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SynologyComponent, decorators: [{
             type: Component,
@@ -11029,6 +11087,191 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                     ], template: "<div nz-row nzJustify=\"center\">\n  <div class=\"form-container\">\n    <form nz-flex nzVertical=\"true\" nz-form [formGroup]=\"formData\" class=\"login-form\" (ngSubmit)=\"doregister()\">\n      <nz-form-item>\n        <nz-form-control nzErrorTip=\"{{ 'REQUIRED' | translate }}\">\n          <nz-input-group nzPrefixIcon=\"user\">\n            <input type=\"text\" nz-input formControlName=\"FullName\" placeholder=\"H\u1ECD t\u00EAn\" />\n          </nz-input-group>\n        </nz-form-control>\n      </nz-form-item>\n      <nz-form-item>\n        <nz-form-control nzErrorTip=\"{{ 'REQUIRED' | translate }}\">\n          <nz-input-group nzPrefixIcon=\"user\">\n            <input type=\"text\" nz-input formControlName=\"UserName\" placeholder=\"T\u00EAn \u0111\u0103ng nh\u1EADp\" />\n          </nz-input-group>\n        </nz-form-control>\n      </nz-form-item>\n\n      <nz-form-item>\n        <nz-form-control [nzErrorTip]=\"PasswordErrorTpl\">\n          <nz-input-group\n            nzPrefixIcon=\"lock\"\n            [nzSuffix]=\"!PasswordVisible ? suffixTemplateShowPassword : suffixTemplateHiddenPassword\"\n          >\n            <input nz-input type=\"{{ PasswordType }}\" formControlName=\"Password\" id=\"Password\" placeholder=\"M\u1EADt kh\u1EA9u\" />\n          </nz-input-group>\n          <ng-template #suffixTemplateShowPassword>\n            <nz-icon\n              nzType=\"eye\"\n              nzTheme=\"outline\"\n              nz-tooltip\n              nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\n              nzTooltipPlacement=\"right\"\n              (click)=\"PasswordVisible = !PasswordVisible; PasswordType = 'text'\"\n            />\n          </ng-template>\n          <ng-template #suffixTemplateHiddenPassword>\n            <nz-icon\n              nzType=\"eye-invisible\"\n              nzTheme=\"outline\"\n              nz-tooltip\n              nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\n              nzTooltipPlacement=\"right\"\n              (click)=\"PasswordVisible = !PasswordVisible; PasswordType = 'password'\"\n            />\n          </ng-template>\n          <ng-template #PasswordErrorTpl let-control>\n            @if (control.errors?.[\"required\"]) {\n              {{ \"REQUIRED_FIELD\" | translate }}\n            }\n            @if (control.errors?.[\"minlength\"]) {\n              M\u1EADt kh\u1EA9u d\u00E0i t\u1ED1i thi\u1EC3u 6 k\u00FD t\u1EF1\n            }\n          </ng-template>\n        </nz-form-control>\n      </nz-form-item>\n\n      <nz-form-item>\n        <nz-form-control [nzErrorTip]=\"ConfirmPasswordErrorTpl\">\n          <nz-input-group\n            nzPrefixIcon=\"lock\"\n            [nzSuffix]=\"\n              !ConfirmPasswordVisible ? suffixTemplateShowConfirmPassword : suffixTemplateHiddenConfirmPassword\n            \"\n          >\n            <input\n              nz-input\n              type=\"{{ ConfirmPasswordType }}\"\n              placeholder=\"X\u00E1c nh\u1EADn m\u1EADt kh\u1EA9u\"\n              formControlName=\"ConfirmPassword\"\n              id=\"ConfirmPassword\"\n            />\n          </nz-input-group>\n          <ng-template #suffixTemplateShowConfirmPassword>\n            <nz-icon\n              nzType=\"eye\"\n              nzTheme=\"outline\"\n              nz-tooltip\n              nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\n              nzTooltipPlacement=\"right\"\n              (click)=\"ConfirmPasswordVisible = !ConfirmPasswordVisible; ConfirmPasswordType = 'text'\"\n            />\n          </ng-template>\n          <ng-template #suffixTemplateHiddenConfirmPassword>\n            <nz-icon\n              nzType=\"eye-invisible\"\n              nzTheme=\"outline\"\n              nz-tooltip\n              nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\n              nzTooltipPlacement=\"right\"\n              (click)=\"ConfirmPasswordVisible = !ConfirmPasswordVisible; ConfirmPasswordType = 'password'\"\n            />\n          </ng-template>\n          <ng-template #ConfirmPasswordErrorTpl let-control>\n            @if (control.errors?.[\"required\"]) {\n              {{ \"REQUIRED_FIELD\" | translate }}\n            }\n            @if (control.errors?.[\"passwordMismatch\"]) {\n              M\u1EADt kh\u1EA9u kh\u00F4ng kh\u1EDBp\n            }\n          </ng-template>\n        </nz-form-control>\n      </nz-form-item>\n\n      <div nz-flex nzVertical=\"true\" nzGap=\"4px\">\n        <button nz-button [nzType]=\"'primary'\" nzBlock [nzLoading]=\"loadingService.isLoading\">\u0110\u0103ng k\u00FD</button>\n        <!-- <nz-form-item nzJustify=\"end\">\n          <nz-switch formControlName=\"langSwitch\" class=\"nz-switch-both-active-color\" nzCheckedChildren=\"VN\"\n            nzUnCheckedChildren=\"EN\" (ngModelChange)=\"changeLanguage($event)\"></nz-switch>\n        </nz-form-item> -->\n      </div>\n    </form>\n  </div>\n</div>\n", styles: [":host{display:flex;justify-content:center;align-items:center;height:80vh}.form-container{width:300px}\n"] }]
         }] });
 
+class AppDataService extends HTTPService {
+    getLstAppData(path = '') {
+        let params = new HttpParams();
+        if (path) {
+            params = params.set('path', path);
+        }
+        // Sử dụng this.http.get thay vì this.get để truyền được query params dễ dàng
+        return this.http.get(AppGlobals.apiEndpoint + '/api/AppData/getTreePath', { params }).toPromise();
+    }
+    upload(file) {
+        const formData = new FormData();
+        formData.append('file', file);
+        return this.postData(AppGlobals.apiEndpoint + '/api/AppData/upload', formData);
+    }
+    downloadFile(filePath) {
+        const params = new HttpParams().set('filePath', filePath);
+        // Gọi API với responseType là blob
+        return this.http.get(AppGlobals.apiEndpoint + '/api/AppData/download', {
+            params,
+            responseType: 'blob',
+        });
+    }
+    deleteFile(filePath) {
+        const params = new HttpParams().set('path', filePath);
+        return this.postParams(AppGlobals.apiEndpoint + '/api/AppData/delete', params);
+    }
+    createFolder(parentPath, folderName) {
+        let params = new HttpParams().append('parentPath', parentPath).append('folderName', folderName);
+        return this.postParams(AppGlobals.apiEndpoint + '/api/AppData/createFolder', params);
+    }
+    uploadFile(folderPath, file) {
+        const formData = new FormData();
+        formData.append('file', file);
+        return this.http.post(AppGlobals.apiEndpoint + `/api/AppData/upload?folderPath=${folderPath}`, formData);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AppDataService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AppDataService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AppDataService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class AppDataComponent extends BaseComponent {
+    service = inject(AppDataService);
+    nzContextMenuService = inject(NzContextMenuService);
+    nodes = [];
+    selectedNode;
+    modalVisible = false;
+    newFolderName = '';
+    myTree;
+    ngOnInit() {
+        this.getdata();
+    }
+    getdata() {
+        this.service.getLstAppData('').then((res) => {
+            this.nodes = this.mapToNzTree(res.Data || []);
+        });
+    }
+    mapToNzTree(data) {
+        return data.map((item) => ({
+            title: item.Title,
+            key: item.Key,
+            isLeaf: item.IsLeaf,
+            author: item.Author,
+            isExpanded: false, // Mặc định đóng
+            children: [], // Rỗng để chờ load
+        }));
+    }
+    onExpandChange(e) {
+        const node = e.node;
+        // Nếu node đang được mở ra VÀ chưa có dữ liệu con bên trong
+        if (node && node.isExpanded && node.getChildren().length === 0) {
+            // Gọi API lấy dữ liệu của chính folder đó
+            this.service.getLstAppData(node.key).then((res) => {
+                const children = this.mapToNzTree(res.Data || []);
+                // Gắn dữ liệu con vào node hiện tại
+                node.addChildren(children);
+            });
+        }
+    }
+    // Sự kiện khi click vào một node
+    activeNode(data) {
+        console.log('Active node:', data.node?.key);
+    }
+    // Sự kiện mở/đóng thư mục (hỗ trợ cả click icon và double click)
+    openFolder(data) {
+        if (data instanceof NzTreeNode) {
+            data.isExpanded = !data.isExpanded;
+        }
+        else {
+            const node = data.node;
+            if (node) {
+                node.isExpanded = !node.isExpanded;
+            }
+        }
+    }
+    contextMenu($event, menu) {
+        // 1. Lấy node đang được click chuột phải từ NzFormatEmitEvent
+        this.selectedNode = $event.node;
+        // 2. Lấy MouseEvent gốc để hiển thị menu tại đúng vị trí chuột
+        if ($event.event) {
+            this.nzContextMenuService.create($event.event, menu);
+        }
+    }
+    // Xử lý khi chọn chức năng trong dropdown
+    selectDropdown() {
+        console.log('Đã chọn hành động trong context menu');
+    }
+    // Logic Tải file
+    download() {
+        if (!this.selectedNode || !this.selectedNode.isLeaf)
+            return;
+        const filePath = this.selectedNode.key;
+        const fileName = this.selectedNode.title;
+        this.service.downloadFile(filePath).subscribe((blob) => {
+            const a = document.createElement('a');
+            const objectUrl = URL.createObjectURL(blob);
+            a.href = objectUrl;
+            a.download = fileName;
+            a.click();
+            URL.revokeObjectURL(objectUrl);
+        });
+    }
+    // Logic Xóa file
+    delete() {
+        if (!this.selectedNode)
+            return;
+        const nodeName = this.selectedNode.title;
+        this.modal.confirm({
+            nzTitle: `Bạn có chắc chắn muốn xóa ${this.selectedNode.isLeaf ? 'file' : 'thư mục'} này không?`,
+            nzContent: `<b style="color: red;">${nodeName}</b>`,
+            nzOkText: 'Xóa',
+            nzOkDanger: true,
+            nzOnOk: () => {
+                this.service.deleteFile(this.selectedNode.key).then(() => {
+                    this.notiService.success('Xóa thành công');
+                    this.getdata(); // Refresh lại cây
+                });
+            },
+        });
+    }
+    addFolder() {
+        const parentPath = this.selectedNode ? this.selectedNode.key : ''; // Nếu không chọn node nào thì tạo ở root
+        this.service.createFolder(parentPath, this.newFolderName).then(() => {
+            this.getdata();
+            this.modalVisible = false;
+        });
+    }
+    triggerUpload() {
+        document.getElementById('fileUpload')?.click();
+    }
+    onFileSelected(event) {
+        console.log('onFileSelected', event);
+        const file = event.target.files[0];
+        if (file) {
+            // Nếu đang chọn 1 folder thì upload vào đó, nếu chọn file thì lấy folder cha của nó, nếu không chọn gì thì vào root
+            const targetPath = this.selectedNode
+                ? this.selectedNode.isLeaf
+                    ? this.getParentPath(this.selectedNode.key)
+                    : this.selectedNode.key
+                : '';
+            this.service.uploadFile(targetPath, file).subscribe(() => {
+                this.notiService.success('Upload thành công');
+                this.getdata();
+                event.target.value = ''; // Reset input
+            });
+        }
+    }
+    getParentPath(path) {
+        return path.substring(0, path.lastIndexOf('\\'));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AppDataComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: AppDataComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "myTree", first: true, predicate: ["myTree"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"action-bar\" style=\"margin-bottom: 16px; display: flex; gap: 8px\">\n  <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"getdata()\"><nz-icon nzType=\"reload\" /> Reload</button>\n  <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"modalVisible = true\">\n    <nz-icon nzType=\"folder-add\" /> New folder\n  </button>\n  <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"triggerUpload()\">\n    <nz-icon nzType=\"upload\" /> Upload\n  </button>\n</div>\n\n<input type=\"file\" id=\"fileUpload\" style=\"display: none\" (change)=\"onFileSelected($event)\" />\n\n<nz-tree\n  #myTree\n  nzBlockNode\n  [nzAsyncData]=\"true\"\n  [nzData]=\"nodes\"\n  (nzClick)=\"activeNode($event)\"\n  (nzExpandChange)=\"onExpandChange($event)\"\n  (nzContextMenu)=\"contextMenu($event, menu)\"\n  [nzTreeTemplate]=\"nzTreeTemplate\"\n></nz-tree>\n\n<ng-template #nzTreeTemplate let-node>\n  <span class=\"custom-node\" (contextmenu)=\"selectedNode = node\">\n    <nz-icon [nzType]=\"node.isLeaf ? 'file' : node.isExpanded ? 'folder-open' : 'folder'\" />\n    <span class=\"node-title\">{{ node.title }}</span>\n  </span>\n</ng-template>\n\n<nz-dropdown-menu #menu=\"nzDropdownMenu\">\n  <ul nz-menu>\n    @if (!selectedNode?.isLeaf) {\n      <li nz-menu-item (click)=\"triggerUpload()\"><nz-icon nzType=\"upload\" /> Upload</li>\n      <li nz-menu-item (click)=\"modalVisible = true\"><nz-icon nzType=\"folder-add\" /> New folder</li>\n    }\n\n    @if (selectedNode?.isLeaf) {\n      <li nz-menu-item (click)=\"download()\"><nz-icon nzType=\"download\" /> Download</li>\n    }\n\n    <li nz-menu-divider></li>\n    <li nz-menu-item nzDanger (click)=\"delete()\">\n      <nz-icon nzType=\"delete\" /> X\u00F3a {{ selectedNode?.isLeaf ? \"File\" : \"Folder\" }}\n    </li>\n  </ul>\n</nz-dropdown-menu>\n\n<nz-modal\n  nzTitle=\"New folder\"\n  [nzMaskClosable]=\"false\"\n  [(nzVisible)]=\"modalVisible\"\n  (nzOnCancel)=\"modalVisible = false\"\n  (nzOnOk)=\"addFolder()\"\n>\n  <ng-container *nzModalContent>\n    <extend-input [label]=\"'Name'\" [(_ngModel)]=\"newFolderName\"></extend-input>\n  </ng-container>\n</nz-modal>\n", styles: ["@charset \"UTF-8\";.custom-node{cursor:pointer;display:flex;align-items:center}.custom-node nz-icon{margin-right:8px;font-size:16px;color:#1890ff}.custom-node .file-name,.custom-node .folder-name{font-weight:500;margin-right:12px}.custom-node .file-desc,.custom-node .folder-desc{font-size:12px;color:#999}.custom-node .anticon-file{color:#595959}\n"], dependencies: [{ kind: "ngmodule", type: NzTreeModule }, { kind: "component", type: i1$7.NzTreeComponent, selector: "nz-tree", inputs: ["nzShowIcon", "nzHideUnMatched", "nzBlockNode", "nzExpandAll", "nzSelectMode", "nzCheckStrictly", "nzShowExpand", "nzShowLine", "nzCheckable", "nzAsyncData", "nzDraggable", "nzMultiple", "nzExpandedIcon", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualHeight", "nzTreeTemplate", "nzBeforeDrop", "nzData", "nzExpandedKeys", "nzSelectedKeys", "nzCheckedKeys", "nzSearchValue", "nzSearchFunc"], outputs: ["nzExpandedKeysChange", "nzSelectedKeysChange", "nzCheckedKeysChange", "nzSearchValueChange", "nzClick", "nzDblClick", "nzContextMenu", "nzCheckboxChange", "nzExpandChange", "nzOnDragStart", "nzOnDragEnter", "nzOnDragOver", "nzOnDragLeave", "nzOnDrop", "nzOnDragEnd"], exportAs: ["nzTree"] }, { kind: "ngmodule", type: NzModalModule }, { kind: "component", type: i15.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: i15.NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { 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: "ngmodule", type: NzDropDownModule }, { kind: "directive", type: i4$2.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$2.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "directive", type: i4$2.NzMenuDividerDirective, selector: "[nz-menu-divider]", exportAs: ["nzMenuDivider"] }, { kind: "component", type: i5$3.NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵ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: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AppDataComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [NzTreeModule, NzModalModule, NzIconModule, NzDropDownModule, ExtendInput, NzButtonModule], template: "<div class=\"action-bar\" style=\"margin-bottom: 16px; display: flex; gap: 8px\">\n  <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"getdata()\"><nz-icon nzType=\"reload\" /> Reload</button>\n  <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"modalVisible = true\">\n    <nz-icon nzType=\"folder-add\" /> New folder\n  </button>\n  <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"triggerUpload()\">\n    <nz-icon nzType=\"upload\" /> Upload\n  </button>\n</div>\n\n<input type=\"file\" id=\"fileUpload\" style=\"display: none\" (change)=\"onFileSelected($event)\" />\n\n<nz-tree\n  #myTree\n  nzBlockNode\n  [nzAsyncData]=\"true\"\n  [nzData]=\"nodes\"\n  (nzClick)=\"activeNode($event)\"\n  (nzExpandChange)=\"onExpandChange($event)\"\n  (nzContextMenu)=\"contextMenu($event, menu)\"\n  [nzTreeTemplate]=\"nzTreeTemplate\"\n></nz-tree>\n\n<ng-template #nzTreeTemplate let-node>\n  <span class=\"custom-node\" (contextmenu)=\"selectedNode = node\">\n    <nz-icon [nzType]=\"node.isLeaf ? 'file' : node.isExpanded ? 'folder-open' : 'folder'\" />\n    <span class=\"node-title\">{{ node.title }}</span>\n  </span>\n</ng-template>\n\n<nz-dropdown-menu #menu=\"nzDropdownMenu\">\n  <ul nz-menu>\n    @if (!selectedNode?.isLeaf) {\n      <li nz-menu-item (click)=\"triggerUpload()\"><nz-icon nzType=\"upload\" /> Upload</li>\n      <li nz-menu-item (click)=\"modalVisible = true\"><nz-icon nzType=\"folder-add\" /> New folder</li>\n    }\n\n    @if (selectedNode?.isLeaf) {\n      <li nz-menu-item (click)=\"download()\"><nz-icon nzType=\"download\" /> Download</li>\n    }\n\n    <li nz-menu-divider></li>\n    <li nz-menu-item nzDanger (click)=\"delete()\">\n      <nz-icon nzType=\"delete\" /> X\u00F3a {{ selectedNode?.isLeaf ? \"File\" : \"Folder\" }}\n    </li>\n  </ul>\n</nz-dropdown-menu>\n\n<nz-modal\n  nzTitle=\"New folder\"\n  [nzMaskClosable]=\"false\"\n  [(nzVisible)]=\"modalVisible\"\n  (nzOnCancel)=\"modalVisible = false\"\n  (nzOnOk)=\"addFolder()\"\n>\n  <ng-container *nzModalContent>\n    <extend-input [label]=\"'Name'\" [(_ngModel)]=\"newFolderName\"></extend-input>\n  </ng-container>\n</nz-modal>\n", styles: ["@charset \"UTF-8\";.custom-node{cursor:pointer;display:flex;align-items:center}.custom-node nz-icon{margin-right:8px;font-size:16px;color:#1890ff}.custom-node .file-name,.custom-node .folder-name{font-weight:500;margin-right:12px}.custom-node .file-desc,.custom-node .folder-desc{font-size:12px;color:#999}.custom-node .anticon-file{color:#595959}\n"] }]
+        }], propDecorators: { myTree: [{
+                type: ViewChild,
+                args: ['myTree']
+            }] } });
+
 class App_Dic_Domain {
     // #region properties
     App_Dic_Domain_Id;
@@ -11416,6 +11659,7 @@ class WorkflowAction extends WF_TemplateStageAction$1 {
     labelBack;
     isBackAction;
     editorOption;
+    Conditions;
     getFromStageCode(lstStage) {
         if (!lstStage || !lstStage.length)
             return '';
@@ -11446,6 +11690,7 @@ class WorkflowAction extends WF_TemplateStageAction$1 {
         this.labelBack = obj.labelBack || '';
         this.isBackAction = obj.isBackAction || false;
         this.editorOption = new WorkflowActionEditorOption(obj.editorOption);
+        this.Conditions = obj.Conditions || {};
     }
 }
 class WorkflowActionRef extends WF_TemplateActionRef$1 {
@@ -11542,11 +11787,15 @@ class WorkflowEditorComponent extends BaseComponent {
     lstRole = [];
     lstUser = [];
     lstEmailTemplate = [];
+    getdata = new EventEmitter();
     ready = false;
     template = new Workflow$1();
     lstStage = [];
     lstAction = [];
     lstActionRef = [];
+    get lstActionOfTemplate() {
+        return this.lstAction.filter((x) => !x.WF_TemplateStage_Id);
+    }
     get lstActionOfCurrentStage() {
         if (this.selectedStage && this.selectedStage.WF_TemplateStage_Id) {
             return this.lstAction.filter((x) => x.WF_TemplateStage_Id == this.selectedStage.WF_TemplateStage_Id);
@@ -11592,6 +11841,7 @@ class WorkflowEditorComponent extends BaseComponent {
     //#region wf editor
     Math = Math;
     drawTemplateVisibel = false;
+    drawTemplateActionVisibel = false;
     settingVisible = false;
     infoVisible = false;
     wfcSetting = { ShowGrid: true };
@@ -11910,6 +12160,13 @@ class WorkflowEditorComponent extends BaseComponent {
         action.FromSide = 'right';
         this.lstAction = this.lstAction ? [...this.lstAction, action] : [action];
     }
+    addTempldateAction() {
+        const action = new WorkflowAction();
+        action.IsTempId = true;
+        action.WF_TemplateStageAction_Id = Date.now();
+        action.FromSide = 'right';
+        this.lstAction = this.lstAction ? [...this.lstAction, action] : [action];
+    }
     onchangeAllowBack(action) {
         console.log('onchangeAllowBack', action);
         const stage = this.lstStage.find((x) => x.WF_TemplateStage_Id == action.To_WF_TemplateStage_Id);
@@ -13228,6 +13485,7 @@ class WorkflowEditorComponent extends BaseComponent {
         console.log(action);
         if (await this.confirm('Delete Rule???')) {
             this.onDeleteRule.emit({
+                WF_Template_Id: action.WF_Template_Id,
                 WF_TemplateStageAction_Id: action.WF_TemplateStageAction_Id,
                 WF_TransitionRule_Id: action.WF_TransitionRule_Id,
             });
@@ -13247,7 +13505,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", lstUser: "lstUser", lstEmailTemplate: "lstEmailTemplate" }, outputs: { onSave: "onSave", onDeleteStage: "onDeleteStage", onDeleteAction: "onDeleteAction", onDeleteRule: "onDeleteRule", onDeleteRuleLine: "onDeleteRuleLine", onCheckRule: "onCheckRule", onCheckAllRule: "onCheckAllRule" }, 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  #canvas\r\n  class=\"workflow-canvas\"\r\n  [class.connecting]=\"!!connectingFrom\"\r\n  [class.dragging-point]=\"!!draggingPoint\"\r\n  style=\"width: 100%; height: 100%\"\r\n  (mousedown)=\"onMouseDownCanvas($event)\"\r\n  (mousemove)=\"onMouseMoveCanvas($event)\"\r\n  (mouseup)=\"onMouseUpCanvas($event)\"\r\n  (click)=\"onClickCanvas($event)\"\r\n  (wheel)=\"onWheelCanvas($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\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\" nzType=\"default\" (click)=\"zoomOut()\" nz-tooltip=\"Zoom Out\">\r\n      <nz-icon nzType=\"minus\"></nz-icon>\r\n    </button>\r\n    <span>{{ Math.round(zoom * 100) }}%</span>\r\n    <button nz-button nzSize=\"small\" nzType=\"default\" (click)=\"zoomIn()\" nz-tooltip=\"Zoom In\">\r\n      <nz-icon nzType=\"plus\"></nz-icon>\r\n    </button>\r\n    <span class=\"divider\"></span>\r\n    <button nz-button nzSize=\"small\" nzType=\"default\" (click)=\"resetZoom()\" nz-tooltip=\"Reset Zoom (Ctrl+0)\">\r\n      <nz-icon nzType=\"expand\"></nz-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div\r\n    class=\"canvas-content\"\r\n    [class.panning]=\"isMoveMode\"\r\n    [style.width.px]=\"getCanvasWidth()\"\r\n    [style.height.px]=\"getCanvasHeight()\"\r\n    [style.transform]=\"\r\n      'translate(' + template.editorOption.panX + 'px,' + template.editorOption.panY + 'px) scale(' + zoom + ')'\r\n    \"\r\n  >\r\n    <!-- GRID -->\r\n    <div *ngIf=\"wfcSetting.ShowGrid\" class=\"grid-layer\"></div>\r\n\r\n    <!-- SVG EDGES -->\r\n    <svg #svg class=\"edges-layer\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\">\r\n      <g>\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            style=\"font-weight: bold\"\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            style=\"font-weight: bold\"\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    <extend-select\r\n      [label]=\"'Apply to'\"\r\n      [lstItem]=\"template.lstApplyTo\"\r\n      [valueField]=\"'Code'\"\r\n      [displayFields]=\"['Code', 'Name']\"\r\n      [(_ngModel)]=\"template.ApplyTo\"\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          [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          [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          [(_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          [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 of Days'\"\r\n          [precision]=\"1\"\r\n          [(_ngModel)]=\"selectedStage.NumberDay\"\r\n        ></extend-input-number>\r\n        <extend-input-number\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Number of Person'\"\r\n          [precision]=\"1\"\r\n          [(_ngModel)]=\"selectedStage.NumberPerson\"\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 (click)=\"onclickaction(action)\">\r\n              <td\r\n                style=\"border-bottom: solid 1px orange\"\r\n                [ngStyle]=\"{\r\n                  'border-left': action == hoverAction ? 'solid 4px orange' : '',\r\n                  'border-top': $index == 0 ? 'solid 1px orange' : '',\r\n                }\"\r\n              >\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\r\n                style=\"border-bottom: solid 1px orange\"\r\n                [ngStyle]=\"{\r\n                  'border-top': $index == 0 ? 'solid 1px orange' : '',\r\n                }\"\r\n              >\r\n                <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n                  <div nz-col [nzSpan]=\"8\" class=\"has-floating-label floating-label\">\r\n                    <nz-form-item>\r\n                      <nz-form-label [nzSpan]=\"24\" style=\"z-index: 2\">\r\n                        <label>Action status</label>\r\n                      </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                    [(_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                    [lstItem]=\"template.lstActionType\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [info]=\"'DomainCode: WF_TemplateStageAction_ActionType'\"\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                    [lstItem]=\"template.lstStageStatus\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [info]=\"'DomainCode: WF_TemplateStageAction_StageStatus'\"\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                    [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                    [lstItem]=\"template.lstStageStatus\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [info]=\"'DomainCode: WF_TemplateStageAction_StageStatus'\"\r\n                    [(_ngModel)]=\"action.To_StageStatus\"\r\n                  ></extend-select>\r\n\r\n                  <extend-select\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Process status'\"\r\n                    [lstItem]=\"template.lstProcessStatus\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [info]=\"'DomainCode: WF_TemplateStageAction_ProcessStatus'\"\r\n                    [(_ngModel)]=\"action.DocProcessStatus\"\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)=\"onselectedRoleEmailUser(action)\"\r\n                  ></extend-select>\r\n                </div>\r\n                <box [height]=\"8\"></box>\r\n                <div nz-row>User</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]=\"lstUser\"\r\n                    [valueField]=\"'App_User_Id'\"\r\n                    [displayFields]=\"['UserName', 'FullName']\"\r\n                    [multiple]=\"true\"\r\n                    [(_ngModel)]=\"action._lstUserId\"\r\n                    (_ngModelChange)=\"onselectedRoleEmailUser(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)=\"onselectedRoleEmailUser(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                        ></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_TransitionRule_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\r\n      <div nz-row nzJustify=\"end\">\r\n        <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"addAction()\">\r\n          <nz-icon nzType=\"plus\"></nz-icon>Add Action\r\n        </button>\r\n      </div>\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\" class=\"has-floating-label floating-label\">\r\n          <nz-form-item>\r\n            <nz-form-label [nzSpan]=\"24\" style=\"z-index: 2\">\r\n              <label>Action status</label>\r\n            </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          [(_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          [lstItem]=\"template.lstActionType\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [info]=\"'DomainCode: WF_TemplateStageAction_ActionType'\"\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          [lstItem]=\"template.lstStageStatus\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [info]=\"'DomainCode: WF_TemplateStageAction_StageStatus'\"\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          [lstItem]=\"getlstStage\"\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          [lstItem]=\"template.lstStageStatus\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [info]=\"'DomainCode: WF_TemplateStageAction_StageStatus'\"\r\n          [(_ngModel)]=\"selectedAction.To_StageStatus\"\r\n        ></extend-select>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Process status'\"\r\n          [lstItem]=\"template.lstProcessStatus\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [info]=\"'DomainCode: WF_TemplateStageAction_ProcessStatus'\"\r\n          [(_ngModel)]=\"selectedAction.DocProcessStatus\"\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)]=\"selectedAction._lstRoleId\"\r\n          (_ngModelChange)=\"onselectedRoleEmailUser(selectedAction)\"\r\n        ></extend-select>\r\n      </div>\r\n      <box [height]=\"8\"></box>\r\n      <div nz-row>User</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]=\"lstUser\"\r\n          [valueField]=\"'App_User_Id'\"\r\n          [displayFields]=\"['UserName', 'FullName']\"\r\n          [multiple]=\"true\"\r\n          [(_ngModel)]=\"selectedAction._lstUserId\"\r\n          (_ngModelChange)=\"onselectedRoleEmailUser(selectedAction)\"\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)]=\"selectedAction._lstEmailActionId\"\r\n          (_ngModelChange)=\"onselectedRoleEmailUser(selectedAction)\"\r\n        ></extend-select>\r\n      </div>\r\n      <box [height]=\"8\"></box>\r\n      <div *ngIf=\"selectedAction._lstEmailActionId && selectedAction._lstEmailActionId.length\" nz-row>\r\n        Email template\r\n      </div>\r\n      <div *ngIf=\"selectedAction._lstEmailActionId && selectedAction._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(selectedAction); 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              ></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=\"selectedAction.WF_TransitionRule_Id\"\r\n          nz-button\r\n          nzType=\"text\"\r\n          nzSize=\"small\"\r\n          (click)=\"deleteActionRule(selectedAction)\"\r\n        >\r\n          <nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn\" />\r\n        </button>\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              [(_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              [lstItem]=\"template.lstActionType\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [info]=\"'DomainCode: WF_TemplateStageAction_ActionType'\"\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              [lstItem]=\"template.lstStageStatus\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [info]=\"'DomainCode: WF_TemplateStageAction_StageStatus'\"\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              [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              [lstItem]=\"template.lstStageStatus\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [info]=\"'DomainCode: WF_TemplateStageAction_StageStatus'\"\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 [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]=\"'90vw'\"\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\" class=\"form-item-no-bottom\">\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      <box [height]=\"8\"></box>\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]=\"'40px'\"><icon-add (click)=\"addActionRuleLine()\"></icon-add></th>\r\n                <th [nzWidth]=\"'150px'\">\r\n                  Rule type\r\n                  <icon-info\r\n                    [tooltip]=\"'DomainCode: WF_RuleType (change-action-parent, change-action-child, execute-store )'\"\r\n                  ></icon-info>\r\n                </th>\r\n                <th>Template</th>\r\n                <th>Template stage</th>\r\n                <th>Template action</th>\r\n                <th>Store to exec</th>\r\n                <th>Email template</th>\r\n                <th>Email to</th>\r\n                <th [nzWidth]=\"'50px'\">Active</th>\r\n                <th>Action</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                    <dic-domain-select\r\n                      [size]=\"'small'\"\r\n                      [DomainCode]=\"'WF_RuleType'\"\r\n                      [(_ngModel)]=\"item.RuleType\"\r\n                    ></dic-domain-select>\r\n                  </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                      [dropdownMatchSelectWidth]=\"false\"\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                      [dropdownMatchSelectWidth]=\"false\"\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                      [dropdownMatchSelectWidth]=\"false\"\r\n                      [(_ngModel)]=\"item.WF_TemplateStageAction_Id\"\r\n                    ></extend-select>\r\n                  </td>\r\n                  <td>\r\n                    <extend-input [size]=\"'small'\" [(_ngModel)]=\"item.StoreToExec\"></extend-input>\r\n                  </td>\r\n                  <td>\r\n                    <extend-select\r\n                      [size]=\"'small'\"\r\n                      [lstItem]=\"lstEmailTemplate\"\r\n                      [valueField]=\"'App_MailTemplate_Id'\"\r\n                      [displayField]=\"'Code'\"\r\n                      [dropdownMatchSelectWidth]=\"false\"\r\n                      [(_ngModel)]=\"item.App_MailTemplate_Id\"\r\n                    ></extend-select>\r\n                  </td>\r\n                  <td class=\"form-item-no-bottom\">\r\n                    <extend-textarea [size]=\"'small'\" [minRows]=\"1\" [(_ngModel)]=\"item.EmailTo\"></extend-textarea>\r\n                  </td>\r\n                  <td class=\"text-center form-item-no-bottom\">\r\n                    <extend-checkbox [(_ngModel)]=\"item.IsActive\"></extend-checkbox>\r\n                  </td>\r\n                  <td>\r\n                    <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"checkAction(item)\">Check</button>\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)=\"checkAllAction()\">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%;transition:transform .05s linear}.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}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:absolute;width:180px;height:125px;top:0;right:0;background-color:#eee;border:1px solid #aaa;opacity:.9;z-index:1}::ng-deep .minimap{position:absolute;width:200px;height:140px;top:8px;right:8px;background-color:#f8f9fa;border:1px solid #d9d9d9;border-radius:8px;box-shadow:0 4px 12px #0000001a;overflow:hidden;z-index:100;-webkit-user-select:none;user-select:none}::ng-deep .minimap-node{position:absolute;background-color:#bfbfbf;border-radius:2px}::ng-deep .minimap-node-round{position:absolute;background-color:#bfbfbf;border-radius:50%}::ng-deep .minimap-node-round-start{background-color:#52c41a}::ng-deep .minimap-node-round-end{background-color:#ff4d4f}::ng-deep .minimap-viewport{position:absolute;box-sizing:border-box;background-color:#1890ff26;border:1.5px solid #1890ff;border-radius:4px;z-index:2;cursor:grab;transition:none}::ng-deep .minimap-viewport.grabbing,::ng-deep .minimap-viewport:active{cursor:grabbing;background-color:#1890ff40}::ng-deep .has-floating-label.floating-label{position:relative;padding-top:14px}::ng-deep .has-floating-label nz-form-item nz-form-label{position:absolute;top:12px;left:13px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:1;height:auto;line-height:normal;padding:0 4px}::ng-deep .has-floating-label nz-form-item nz-form-label label{font-size:12px;color:var(--darkgray, #565656);font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .has-floating-label .full-width{width:100%}.has-floating-label.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.has-floating-label.floating-label nz-form-item:has(input[disabled]) nz-form-label,.has-floating-label.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.has-floating-label.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.has-floating-label.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.has-floating-label.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i3$5.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "component", type: i3$6.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: i3$6.NzDrawerContentDirective, selector: "[nzDrawerContent]", exportAs: ["nzDrawerContent"] }, { kind: "ngmodule", type: NzTagModule }, { kind: "component", type: i7.NzTagComponent, selector: "nz-tag", inputs: ["nzMode", "nzColor", "nzChecked", "nzBordered"], outputs: ["nzOnClose", "nzCheckedChange"], exportAs: ["nzTag"] }, { kind: "ngmodule", type: NzRadioModule }, { kind: "component", type: i6$2.NzRadioComponent, selector: "[nz-radio],[nz-radio-button]", inputs: ["nzValue", "nzDisabled", "nzAutoFocus", "nz-radio-button"], exportAs: ["nzRadio"] }, { kind: "component", type: i6$2.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: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵ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: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i8.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: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "component", type: ExtendSelectComponent, selector: "extend-select", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "dropdownMatchSelectWidth", "labelSpan", "labelFlex", "disabled", "required", "noBottom", "multiple", "showSelectAll", "maxTagCount", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "lstItem", "displayField", "displayFields", "info", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "itemChange", "onFocus"] }, { kind: "component", type: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: ExtendTextArea, selector: "extend-textarea", inputs: ["label", "placeHolder", "labelAlign", "floatingLabel", "displayInline", "formItemNoButtom", "labelSpan", "labelFlex", "inputFlex", "disabled", "required", "noBottom", "selectModeType", "inputClass", "size", "isSubmited", "minRows", "maxRows", "lstItem", "displayField", "valueField", "formData", "controlName", "_ngModel", "isTouched", "inputErrorMessage", "errorMessages"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i6.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: i2$1.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: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "component", type: ExtendInputNumber, selector: "extend-input-number", inputs: ["label", "placeHolder", "labelAlign", "floatingLabel", "hiddenUpDown", "labelSpan", "labelFlex", "inputFlex", "disabled", "required", "noBottom", "size", "min", "max", "precision", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "isSubmited", "separatorType", "formData", "controlName", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i4.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: i4.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i4.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i4.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i4.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i4.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: i17.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: i16$1.NzAutocompleteComponent, selector: "nz-autocomplete", inputs: ["nzWidth", "nzOverlayClassName", "nzOverlayStyle", "nzDefaultActiveFirstOption", "nzBackfill", "compareWith", "nzDataSource"], outputs: ["selectionChange"], exportAs: ["nzAutocomplete"] }, { kind: "component", type: i16$1.NzAutocompleteOptionComponent, selector: "nz-auto-option", inputs: ["nzValue", "nzLabel", "nzDisabled"], outputs: ["selectionChange", "mouseEntered"], exportAs: ["nzAutoOption"] }, { kind: "directive", type: i16$1.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"] }, { kind: "component", type: DicDomainSelectComponent$1, selector: "dic-domain-select", inputs: ["layOutType", "label", "placeHolder", "labelSpan", "labelAlign", "disabled", "required", "multiple", "showSelectAll", "maxTagCount", "inputWidth", "inputHeight", "size", "borderBottomOnly", "defaultFirstItem", "floatingLabel", "DomainCode", "ParentItemCode", "_ngModel", "formData", "controlName"], outputs: ["_ngModelChange"] }, { kind: "component", type: IconInfo, selector: "icon-info", inputs: ["size", "tooltip"], outputs: ["click"] }] });
+    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", lstUser: "lstUser", lstEmailTemplate: "lstEmailTemplate" }, outputs: { getdata: "getdata", onSave: "onSave", onDeleteStage: "onDeleteStage", onDeleteAction: "onDeleteAction", onDeleteRule: "onDeleteRule", onDeleteRuleLine: "onDeleteRuleLine", onCheckRule: "onCheckRule", onCheckAllRule: "onCheckAllRule" }, 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  #canvas\r\n  class=\"workflow-canvas\"\r\n  [class.connecting]=\"!!connectingFrom\"\r\n  [class.dragging-point]=\"!!draggingPoint\"\r\n  style=\"width: 100%; height: 100%\"\r\n  (mousedown)=\"onMouseDownCanvas($event)\"\r\n  (mousemove)=\"onMouseMoveCanvas($event)\"\r\n  (mouseup)=\"onMouseUpCanvas($event)\"\r\n  (click)=\"onClickCanvas($event)\"\r\n  (wheel)=\"onWheelCanvas($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\" [nzLoading]=\"!ready\" nz-tooltip=\"Reload\" (click)=\"getdata.emit()\">\r\n      <nz-icon nzType=\"reload\" class=\"color-primary\"></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    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      nz-tooltip=\"Add template action\"\r\n      class=\"color-primary\"\r\n      (click)=\"drawTemplateActionVisibel = true\"\r\n    >\r\n      A\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\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\" nzType=\"default\" (click)=\"zoomOut()\" nz-tooltip=\"Zoom Out\">\r\n      <nz-icon nzType=\"minus\"></nz-icon>\r\n    </button>\r\n    <span>{{ Math.round(zoom * 100) }}%</span>\r\n    <button nz-button nzSize=\"small\" nzType=\"default\" (click)=\"zoomIn()\" nz-tooltip=\"Zoom In\">\r\n      <nz-icon nzType=\"plus\"></nz-icon>\r\n    </button>\r\n    <span class=\"divider\"></span>\r\n    <button nz-button nzSize=\"small\" nzType=\"default\" (click)=\"resetZoom()\" nz-tooltip=\"Reset Zoom (Ctrl+0)\">\r\n      <nz-icon nzType=\"expand\"></nz-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div\r\n    class=\"canvas-content\"\r\n    [class.panning]=\"isMoveMode\"\r\n    [style.width.px]=\"getCanvasWidth()\"\r\n    [style.height.px]=\"getCanvasHeight()\"\r\n    [style.transform]=\"\r\n      'translate(' + template.editorOption.panX + 'px,' + template.editorOption.panY + 'px) scale(' + zoom + ')'\r\n    \"\r\n  >\r\n    <!-- GRID -->\r\n    <div *ngIf=\"wfcSetting.ShowGrid\" class=\"grid-layer\"></div>\r\n\r\n    <!-- SVG EDGES -->\r\n    <svg #svg class=\"edges-layer\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\">\r\n      <g>\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            style=\"font-weight: bold\"\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            style=\"font-weight: bold\"\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    <extend-select\r\n      [label]=\"'Apply to'\"\r\n      [lstItem]=\"template.lstApplyTo\"\r\n      [valueField]=\"'Code'\"\r\n      [displayFields]=\"['Code', 'Name']\"\r\n      [(_ngModel)]=\"template.ApplyTo\"\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          [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          [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          [(_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          [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 of Days'\"\r\n          [precision]=\"1\"\r\n          [(_ngModel)]=\"selectedStage.NumberDay\"\r\n        ></extend-input-number>\r\n        <extend-input-number\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Number of Person'\"\r\n          [precision]=\"1\"\r\n          [(_ngModel)]=\"selectedStage.NumberPerson\"\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\r\n        class=\"no-hover-color\"\r\n        nzSize=\"small\"\r\n        [nzData]=\"lstActionOfCurrentStage\"\r\n        [nzShowPagination]=\"false\"\r\n        [nzNoResult]=\"'&nbsp;'\"\r\n      >\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 (click)=\"onclickaction(action)\">\r\n              <td\r\n                style=\"border-bottom: solid 1px orange\"\r\n                [ngStyle]=\"{\r\n                  'border-left': action == hoverAction ? 'solid 4px orange' : '',\r\n                  'border-top': $index == 0 ? 'solid 1px orange' : '',\r\n                }\"\r\n              >\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\r\n                style=\"border-bottom: solid 1px orange\"\r\n                [ngStyle]=\"{\r\n                  'border-top': $index == 0 ? 'solid 1px orange' : '',\r\n                }\"\r\n              >\r\n                <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n                  <div nz-col [nzSpan]=\"8\" class=\"has-floating-label floating-label\">\r\n                    <nz-form-item>\r\n                      <nz-form-label [nzSpan]=\"24\" style=\"z-index: 2\">\r\n                        <label>Action status</label>\r\n                      </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                    [(_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                    [lstItem]=\"template.lstActionType\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [info]=\"'DomainCode: WF_TemplateStageAction_ActionType'\"\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                    [lstItem]=\"template.lstStageStatus\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [info]=\"'DomainCode: WF_TemplateStageAction_StageStatus'\"\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                    [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                    [lstItem]=\"template.lstStageStatus\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [info]=\"'DomainCode: WF_TemplateStageAction_StageStatus'\"\r\n                    [(_ngModel)]=\"action.To_StageStatus\"\r\n                  ></extend-select>\r\n\r\n                  <extend-select\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Process status'\"\r\n                    [lstItem]=\"template.lstProcessStatus\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [info]=\"'DomainCode: WF_TemplateStageAction_ProcessStatus'\"\r\n                    [(_ngModel)]=\"action.DocProcessStatus\"\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)=\"onselectedRoleEmailUser(action)\"\r\n                  ></extend-select>\r\n                </div>\r\n                <box [height]=\"8\"></box>\r\n                <div nz-row>User</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]=\"lstUser\"\r\n                    [valueField]=\"'App_User_Id'\"\r\n                    [displayFields]=\"['UserName', 'FullName']\"\r\n                    [multiple]=\"true\"\r\n                    [(_ngModel)]=\"action._lstUserId\"\r\n                    (_ngModelChange)=\"onselectedRoleEmailUser(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)=\"onselectedRoleEmailUser(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                        ></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_TransitionRule_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\r\n      <div nz-row nzJustify=\"end\">\r\n        <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"addAction()\">\r\n          <nz-icon nzType=\"plus\"></nz-icon>Add Action\r\n        </button>\r\n      </div>\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 TEMPLATE ACTION  -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawerTitleTemplateAction\"\r\n  [nzVisible]=\"drawTemplateActionVisibel\"\r\n  [nzWidth]=\"'calc(50vw)'\"\r\n  [nzClosable]=\"false\"\r\n  [nzFooter]=\"footerTplTemplateAction\"\r\n  (nzOnClose)=\"drawTemplateActionVisibel = false\"\r\n>\r\n  <ng-template #drawerTitleTemplateAction>\r\n    <div nz-row nzJustify=\"space-between\">Template action</div>\r\n  </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <nz-table nzSize=\"small\" [nzData]=\"lstActionOfTemplate\" [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 lstActionOfTemplate; track $index) {\r\n          <tr (click)=\"onclickaction(action)\">\r\n            <td\r\n              style=\"border-bottom: solid 1px orange\"\r\n              [ngStyle]=\"{\r\n                'border-left': action == hoverAction ? 'solid 4px orange' : '',\r\n                'border-top': $index == 0 ? 'solid 1px orange' : '',\r\n              }\"\r\n            >\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\r\n              style=\"border-bottom: solid 1px orange\"\r\n              [ngStyle]=\"{\r\n                'border-top': $index == 0 ? 'solid 1px orange' : '',\r\n              }\"\r\n            >\r\n              <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n                <div nz-col [nzSpan]=\"8\" class=\"has-floating-label floating-label\">\r\n                  <nz-form-item>\r\n                    <nz-form-label [nzSpan]=\"24\" style=\"z-index: 2\">\r\n                      <label>Action status</label>\r\n                    </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                  [(_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                  [lstItem]=\"template.lstActionType\"\r\n                  [valueField]=\"'Code'\"\r\n                  [displayFields]=\"['Code', 'Name']\"\r\n                  [info]=\"'DomainCode: WF_TemplateStageAction_ActionType'\"\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                  [lstItem]=\"template.lstStageStatus\"\r\n                  [valueField]=\"'Code'\"\r\n                  [displayFields]=\"['Code', 'Name']\"\r\n                  [info]=\"'DomainCode: WF_TemplateStageAction_StageStatus'\"\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                  [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                  [lstItem]=\"template.lstStageStatus\"\r\n                  [valueField]=\"'Code'\"\r\n                  [displayFields]=\"['Code', 'Name']\"\r\n                  [info]=\"'DomainCode: WF_TemplateStageAction_StageStatus'\"\r\n                  [(_ngModel)]=\"action.To_StageStatus\"\r\n                ></extend-select>\r\n\r\n                <extend-select\r\n                  nz-col\r\n                  [nzSpan]=\"8\"\r\n                  [label]=\"'Process status'\"\r\n                  [lstItem]=\"template.lstProcessStatus\"\r\n                  [valueField]=\"'Code'\"\r\n                  [displayFields]=\"['Code', 'Name']\"\r\n                  [info]=\"'DomainCode: WF_TemplateStageAction_ProcessStatus'\"\r\n                  [(_ngModel)]=\"action.DocProcessStatus\"\r\n                ></extend-select>\r\n              </div>\r\n              <box [height]=\"8\"></box>\r\n              <div nz-row class=\"text-bold\">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)=\"onselectedRoleEmailUser(action)\"\r\n                ></extend-select>\r\n              </div>\r\n              <box [height]=\"8\"></box>\r\n              <div nz-row class=\"text-bold\">User</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]=\"lstUser\"\r\n                  [valueField]=\"'App_User_Id'\"\r\n                  [displayFields]=\"['UserName', 'FullName']\"\r\n                  [multiple]=\"true\"\r\n                  [(_ngModel)]=\"action._lstUserId\"\r\n                  (_ngModelChange)=\"onselectedRoleEmailUser(action)\"\r\n                ></extend-select>\r\n              </div>\r\n              <box [height]=\"8\"></box>\r\n              <div nz-row class=\"text-bold\">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)=\"onselectedRoleEmailUser(action)\"\r\n                ></extend-select>\r\n              </div>\r\n              <box [height]=\"8\"></box>\r\n              <!-- Conditions -->\r\n              <div nz-row nzGutter=\"32\" class=\"text-bold\">\r\n                <div nz-col>Conditions</div>\r\n                <div nz-col>\r\n                  <extend-checkbox label=\"Allway\" [(_ngModel)]=\"action.Conditions.Allway\"></extend-checkbox>\r\n                </div>\r\n              </div>\r\n              <div nz-row class=\"form-item-no-bottom\">\r\n                <extend-select\r\n                  nz-col\r\n                  nzSpan=\"24\"\r\n                  [label]=\"'Stage'\"\r\n                  [lstItem]=\"getlstStage\"\r\n                  [multiple]=\"true\"\r\n                  [valueField]=\"'WF_TemplateStage_Id'\"\r\n                  [displayFields]=\"['Code', 'Name']\"\r\n                  [(_ngModel)]=\"action.Conditions.LstStage\"\r\n                  (_ngModelChange)=\"onchangeNextStage(action)\"\r\n                ></extend-select>\r\n                <extend-select\r\n                  nz-col\r\n                  nzSpan=\"24\"\r\n                  [label]=\"'Process status'\"\r\n                  [lstItem]=\"template.lstProcessStatus\"\r\n                  [multiple]=\"true\"\r\n                  [valueField]=\"'Code'\"\r\n                  [displayFields]=\"['Code', 'Name']\"\r\n                  [info]=\"'DomainCode: WF_TemplateStageAction_ProcessStatus'\"\r\n                  [(_ngModel)]=\"action.Conditions.LstDocProcessStatus\"\r\n                ></extend-select>\r\n                <extend-select\r\n                  nz-col\r\n                  nzSpan=\"24\"\r\n                  [label]=\"'Stage status'\"\r\n                  [lstItem]=\"template.lstStageStatus\"\r\n                  [multiple]=\"true\"\r\n                  [valueField]=\"'Code'\"\r\n                  [displayFields]=\"['Code', 'Name']\"\r\n                  [info]=\"'DomainCode: WF_TemplateStageAction_StageStatus'\"\r\n                  [(_ngModel)]=\"action.Conditions.LstStageStatus\"\r\n                ></extend-select>\r\n                <extend-select\r\n                  nz-col\r\n                  nzSpan=\"24\"\r\n                  [label]=\"'Action status'\"\r\n                  [lstItem]=\"template.lstActionStatus\"\r\n                  [multiple]=\"true\"\r\n                  [valueField]=\"'Code'\"\r\n                  [displayFields]=\"['Code', 'Name']\"\r\n                  [info]=\"'DomainCode: WF_TemplateStageAction_StageStatus'\"\r\n                  [(_ngModel)]=\"action.Conditions.LstActionStatus\"\r\n                ></extend-select>\r\n              </div>\r\n\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                      ></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\" class=\"text-bold\">\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_TransitionRule_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\r\n    <div nz-row nzJustify=\"end\">\r\n      <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"addTempldateAction()\">\r\n        <nz-icon nzType=\"plus\"></nz-icon>Add Action\r\n      </button>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-template #footerTplTemplateAction>\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    </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\" class=\"has-floating-label floating-label\">\r\n          <nz-form-item>\r\n            <nz-form-label [nzSpan]=\"24\" style=\"z-index: 2\">\r\n              <label>Action status</label>\r\n            </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          [(_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          [lstItem]=\"template.lstActionType\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [info]=\"'DomainCode: WF_TemplateStageAction_ActionType'\"\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          [lstItem]=\"template.lstStageStatus\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [info]=\"'DomainCode: WF_TemplateStageAction_StageStatus'\"\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          [lstItem]=\"getlstStage\"\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          [lstItem]=\"template.lstStageStatus\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [info]=\"'DomainCode: WF_TemplateStageAction_StageStatus'\"\r\n          [(_ngModel)]=\"selectedAction.To_StageStatus\"\r\n        ></extend-select>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Process status'\"\r\n          [lstItem]=\"template.lstProcessStatus\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [info]=\"'DomainCode: WF_TemplateStageAction_ProcessStatus'\"\r\n          [(_ngModel)]=\"selectedAction.DocProcessStatus\"\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)]=\"selectedAction._lstRoleId\"\r\n          (_ngModelChange)=\"onselectedRoleEmailUser(selectedAction)\"\r\n        ></extend-select>\r\n      </div>\r\n      <box [height]=\"8\"></box>\r\n      <div nz-row>User</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]=\"lstUser\"\r\n          [valueField]=\"'App_User_Id'\"\r\n          [displayFields]=\"['UserName', 'FullName']\"\r\n          [multiple]=\"true\"\r\n          [(_ngModel)]=\"selectedAction._lstUserId\"\r\n          (_ngModelChange)=\"onselectedRoleEmailUser(selectedAction)\"\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)]=\"selectedAction._lstEmailActionId\"\r\n          (_ngModelChange)=\"onselectedRoleEmailUser(selectedAction)\"\r\n        ></extend-select>\r\n      </div>\r\n      <box [height]=\"8\"></box>\r\n      <div *ngIf=\"selectedAction._lstEmailActionId && selectedAction._lstEmailActionId.length\" nz-row>\r\n        Email template\r\n      </div>\r\n      <div *ngIf=\"selectedAction._lstEmailActionId && selectedAction._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(selectedAction); 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              ></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=\"selectedAction.WF_TransitionRule_Id\"\r\n          nz-button\r\n          nzType=\"text\"\r\n          nzSize=\"small\"\r\n          (click)=\"deleteActionRule(selectedAction)\"\r\n        >\r\n          <nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn\" />\r\n        </button>\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              [(_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              [lstItem]=\"template.lstActionType\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [info]=\"'DomainCode: WF_TemplateStageAction_ActionType'\"\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              [lstItem]=\"template.lstStageStatus\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [info]=\"'DomainCode: WF_TemplateStageAction_StageStatus'\"\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              [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              [lstItem]=\"template.lstStageStatus\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [info]=\"'DomainCode: WF_TemplateStageAction_StageStatus'\"\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 [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]=\"'90vw'\"\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\" class=\"form-item-no-bottom\">\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      <box [height]=\"8\"></box>\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]=\"'40px'\"><icon-add (click)=\"addActionRuleLine()\"></icon-add></th>\r\n                <th [nzWidth]=\"'150px'\">\r\n                  Rule type\r\n                  <icon-info\r\n                    [tooltip]=\"'DomainCode: WF_RuleType (change-action-parent, change-action-child, execute-store )'\"\r\n                  ></icon-info>\r\n                </th>\r\n                <th>Template</th>\r\n                <th>Template stage</th>\r\n                <th>Template action</th>\r\n                <th>Store to exec</th>\r\n                <th>Email template</th>\r\n                <th>Email to</th>\r\n                <th [nzWidth]=\"'50px'\">Active</th>\r\n                <th>Action</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                    <dic-domain-select\r\n                      [size]=\"'small'\"\r\n                      [DomainCode]=\"'WF_RuleType'\"\r\n                      [(_ngModel)]=\"item.RuleType\"\r\n                    ></dic-domain-select>\r\n                  </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                      [dropdownMatchSelectWidth]=\"false\"\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                      [dropdownMatchSelectWidth]=\"false\"\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                      [dropdownMatchSelectWidth]=\"false\"\r\n                      [(_ngModel)]=\"item.WF_TemplateStageAction_Id\"\r\n                    ></extend-select>\r\n                  </td>\r\n                  <td>\r\n                    <extend-input [size]=\"'small'\" [(_ngModel)]=\"item.StoreToExec\"></extend-input>\r\n                  </td>\r\n                  <td>\r\n                    <extend-select\r\n                      [size]=\"'small'\"\r\n                      [lstItem]=\"lstEmailTemplate\"\r\n                      [valueField]=\"'App_MailTemplate_Id'\"\r\n                      [displayField]=\"'Code'\"\r\n                      [dropdownMatchSelectWidth]=\"false\"\r\n                      [(_ngModel)]=\"item.App_MailTemplate_Id\"\r\n                    ></extend-select>\r\n                  </td>\r\n                  <td class=\"form-item-no-bottom\">\r\n                    <extend-textarea [size]=\"'small'\" [minRows]=\"1\" [(_ngModel)]=\"item.EmailTo\"></extend-textarea>\r\n                  </td>\r\n                  <td class=\"text-center form-item-no-bottom\">\r\n                    <extend-checkbox [(_ngModel)]=\"item.IsActive\"></extend-checkbox>\r\n                  </td>\r\n                  <td>\r\n                    <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"checkAction(item)\">Check</button>\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)=\"checkAllAction()\">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%;transition:transform .05s linear}.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}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:absolute;width:180px;height:125px;top:0;right:0;background-color:#eee;border:1px solid #aaa;opacity:.9;z-index:1}::ng-deep .minimap{position:absolute;width:200px;height:140px;top:8px;right:8px;background-color:#f8f9fa;border:1px solid #d9d9d9;border-radius:8px;box-shadow:0 4px 12px #0000001a;overflow:hidden;z-index:100;-webkit-user-select:none;user-select:none}::ng-deep .minimap-node{position:absolute;background-color:#bfbfbf;border-radius:2px}::ng-deep .minimap-node-round{position:absolute;background-color:#bfbfbf;border-radius:50%}::ng-deep .minimap-node-round-start{background-color:#52c41a}::ng-deep .minimap-node-round-end{background-color:#ff4d4f}::ng-deep .minimap-viewport{position:absolute;box-sizing:border-box;background-color:#1890ff26;border:1.5px solid #1890ff;border-radius:4px;z-index:2;cursor:grab;transition:none}::ng-deep .minimap-viewport.grabbing,::ng-deep .minimap-viewport:active{cursor:grabbing;background-color:#1890ff40}::ng-deep .has-floating-label.floating-label{position:relative;padding-top:14px}::ng-deep .has-floating-label nz-form-item nz-form-label{position:absolute;top:12px;left:13px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:1;height:auto;line-height:normal;padding:0 4px}::ng-deep .has-floating-label nz-form-item nz-form-label label{font-size:12px;color:var(--darkgray, #565656);font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .has-floating-label .full-width{width:100%}.has-floating-label.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.has-floating-label.floating-label nz-form-item:has(input[disabled]) nz-form-label,.has-floating-label.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.has-floating-label.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.has-floating-label.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.has-floating-label.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i3$5.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "component", type: i3$6.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: i3$6.NzDrawerContentDirective, selector: "[nzDrawerContent]", exportAs: ["nzDrawerContent"] }, { kind: "ngmodule", type: NzTagModule }, { kind: "component", type: i7.NzTagComponent, selector: "nz-tag", inputs: ["nzMode", "nzColor", "nzChecked", "nzBordered"], outputs: ["nzOnClose", "nzCheckedChange"], exportAs: ["nzTag"] }, { kind: "ngmodule", type: NzRadioModule }, { kind: "component", type: i6$2.NzRadioComponent, selector: "[nz-radio],[nz-radio-button]", inputs: ["nzValue", "nzDisabled", "nzAutoFocus", "nz-radio-button"], exportAs: ["nzRadio"] }, { kind: "component", type: i6$2.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: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵ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: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i8.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: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "component", type: ExtendSelectComponent, selector: "extend-select", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "dropdownMatchSelectWidth", "labelSpan", "labelFlex", "disabled", "required", "noBottom", "multiple", "showSelectAll", "maxTagCount", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "lstItem", "displayField", "displayFields", "info", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "itemChange", "onFocus"] }, { kind: "component", type: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: ExtendTextArea, selector: "extend-textarea", inputs: ["label", "placeHolder", "labelAlign", "floatingLabel", "displayInline", "formItemNoButtom", "labelSpan", "labelFlex", "inputFlex", "disabled", "required", "noBottom", "selectModeType", "inputClass", "size", "isSubmited", "minRows", "maxRows", "lstItem", "displayField", "valueField", "formData", "controlName", "_ngModel", "isTouched", "inputErrorMessage", "errorMessages"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i6.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: i2$1.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: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "component", type: ExtendInputNumber, selector: "extend-input-number", inputs: ["label", "placeHolder", "labelAlign", "floatingLabel", "hiddenUpDown", "labelSpan", "labelFlex", "inputFlex", "disabled", "required", "noBottom", "size", "min", "max", "precision", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "isSubmited", "separatorType", "formData", "controlName", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i4.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: i4.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i4.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i4.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i4.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i4.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: i17.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: i16$1.NzAutocompleteComponent, selector: "nz-autocomplete", inputs: ["nzWidth", "nzOverlayClassName", "nzOverlayStyle", "nzDefaultActiveFirstOption", "nzBackfill", "compareWith", "nzDataSource"], outputs: ["selectionChange"], exportAs: ["nzAutocomplete"] }, { kind: "component", type: i16$1.NzAutocompleteOptionComponent, selector: "nz-auto-option", inputs: ["nzValue", "nzLabel", "nzDisabled"], outputs: ["selectionChange", "mouseEntered"], exportAs: ["nzAutoOption"] }, { kind: "directive", type: i16$1.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"] }, { kind: "component", type: DicDomainSelectComponent$1, selector: "dic-domain-select", inputs: ["layOutType", "label", "placeHolder", "labelSpan", "labelAlign", "disabled", "required", "multiple", "showSelectAll", "maxTagCount", "inputWidth", "inputHeight", "size", "borderBottomOnly", "defaultFirstItem", "floatingLabel", "DomainCode", "ParentItemCode", "_ngModel", "formData", "controlName"], outputs: ["_ngModelChange"] }, { kind: "component", type: IconInfo, selector: "icon-info", inputs: ["size", "tooltip"], outputs: ["click"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WorkflowEditorComponent, decorators: [{
             type: Component,
@@ -13282,7 +13540,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         NzModalFooterDirective,
                         DicDomainSelectComponent$1,
                         IconInfo,
-                    ], selector: 'app-workflow-editor', template: "<div\r\n  #canvas\r\n  class=\"workflow-canvas\"\r\n  [class.connecting]=\"!!connectingFrom\"\r\n  [class.dragging-point]=\"!!draggingPoint\"\r\n  style=\"width: 100%; height: 100%\"\r\n  (mousedown)=\"onMouseDownCanvas($event)\"\r\n  (mousemove)=\"onMouseMoveCanvas($event)\"\r\n  (mouseup)=\"onMouseUpCanvas($event)\"\r\n  (click)=\"onClickCanvas($event)\"\r\n  (wheel)=\"onWheelCanvas($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\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\" nzType=\"default\" (click)=\"zoomOut()\" nz-tooltip=\"Zoom Out\">\r\n      <nz-icon nzType=\"minus\"></nz-icon>\r\n    </button>\r\n    <span>{{ Math.round(zoom * 100) }}%</span>\r\n    <button nz-button nzSize=\"small\" nzType=\"default\" (click)=\"zoomIn()\" nz-tooltip=\"Zoom In\">\r\n      <nz-icon nzType=\"plus\"></nz-icon>\r\n    </button>\r\n    <span class=\"divider\"></span>\r\n    <button nz-button nzSize=\"small\" nzType=\"default\" (click)=\"resetZoom()\" nz-tooltip=\"Reset Zoom (Ctrl+0)\">\r\n      <nz-icon nzType=\"expand\"></nz-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div\r\n    class=\"canvas-content\"\r\n    [class.panning]=\"isMoveMode\"\r\n    [style.width.px]=\"getCanvasWidth()\"\r\n    [style.height.px]=\"getCanvasHeight()\"\r\n    [style.transform]=\"\r\n      'translate(' + template.editorOption.panX + 'px,' + template.editorOption.panY + 'px) scale(' + zoom + ')'\r\n    \"\r\n  >\r\n    <!-- GRID -->\r\n    <div *ngIf=\"wfcSetting.ShowGrid\" class=\"grid-layer\"></div>\r\n\r\n    <!-- SVG EDGES -->\r\n    <svg #svg class=\"edges-layer\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\">\r\n      <g>\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            style=\"font-weight: bold\"\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            style=\"font-weight: bold\"\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    <extend-select\r\n      [label]=\"'Apply to'\"\r\n      [lstItem]=\"template.lstApplyTo\"\r\n      [valueField]=\"'Code'\"\r\n      [displayFields]=\"['Code', 'Name']\"\r\n      [(_ngModel)]=\"template.ApplyTo\"\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          [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          [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          [(_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          [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 of Days'\"\r\n          [precision]=\"1\"\r\n          [(_ngModel)]=\"selectedStage.NumberDay\"\r\n        ></extend-input-number>\r\n        <extend-input-number\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Number of Person'\"\r\n          [precision]=\"1\"\r\n          [(_ngModel)]=\"selectedStage.NumberPerson\"\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 (click)=\"onclickaction(action)\">\r\n              <td\r\n                style=\"border-bottom: solid 1px orange\"\r\n                [ngStyle]=\"{\r\n                  'border-left': action == hoverAction ? 'solid 4px orange' : '',\r\n                  'border-top': $index == 0 ? 'solid 1px orange' : '',\r\n                }\"\r\n              >\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\r\n                style=\"border-bottom: solid 1px orange\"\r\n                [ngStyle]=\"{\r\n                  'border-top': $index == 0 ? 'solid 1px orange' : '',\r\n                }\"\r\n              >\r\n                <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n                  <div nz-col [nzSpan]=\"8\" class=\"has-floating-label floating-label\">\r\n                    <nz-form-item>\r\n                      <nz-form-label [nzSpan]=\"24\" style=\"z-index: 2\">\r\n                        <label>Action status</label>\r\n                      </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                    [(_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                    [lstItem]=\"template.lstActionType\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [info]=\"'DomainCode: WF_TemplateStageAction_ActionType'\"\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                    [lstItem]=\"template.lstStageStatus\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [info]=\"'DomainCode: WF_TemplateStageAction_StageStatus'\"\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                    [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                    [lstItem]=\"template.lstStageStatus\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [info]=\"'DomainCode: WF_TemplateStageAction_StageStatus'\"\r\n                    [(_ngModel)]=\"action.To_StageStatus\"\r\n                  ></extend-select>\r\n\r\n                  <extend-select\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Process status'\"\r\n                    [lstItem]=\"template.lstProcessStatus\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [info]=\"'DomainCode: WF_TemplateStageAction_ProcessStatus'\"\r\n                    [(_ngModel)]=\"action.DocProcessStatus\"\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)=\"onselectedRoleEmailUser(action)\"\r\n                  ></extend-select>\r\n                </div>\r\n                <box [height]=\"8\"></box>\r\n                <div nz-row>User</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]=\"lstUser\"\r\n                    [valueField]=\"'App_User_Id'\"\r\n                    [displayFields]=\"['UserName', 'FullName']\"\r\n                    [multiple]=\"true\"\r\n                    [(_ngModel)]=\"action._lstUserId\"\r\n                    (_ngModelChange)=\"onselectedRoleEmailUser(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)=\"onselectedRoleEmailUser(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                        ></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_TransitionRule_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\r\n      <div nz-row nzJustify=\"end\">\r\n        <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"addAction()\">\r\n          <nz-icon nzType=\"plus\"></nz-icon>Add Action\r\n        </button>\r\n      </div>\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\" class=\"has-floating-label floating-label\">\r\n          <nz-form-item>\r\n            <nz-form-label [nzSpan]=\"24\" style=\"z-index: 2\">\r\n              <label>Action status</label>\r\n            </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          [(_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          [lstItem]=\"template.lstActionType\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [info]=\"'DomainCode: WF_TemplateStageAction_ActionType'\"\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          [lstItem]=\"template.lstStageStatus\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [info]=\"'DomainCode: WF_TemplateStageAction_StageStatus'\"\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          [lstItem]=\"getlstStage\"\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          [lstItem]=\"template.lstStageStatus\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [info]=\"'DomainCode: WF_TemplateStageAction_StageStatus'\"\r\n          [(_ngModel)]=\"selectedAction.To_StageStatus\"\r\n        ></extend-select>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Process status'\"\r\n          [lstItem]=\"template.lstProcessStatus\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [info]=\"'DomainCode: WF_TemplateStageAction_ProcessStatus'\"\r\n          [(_ngModel)]=\"selectedAction.DocProcessStatus\"\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)]=\"selectedAction._lstRoleId\"\r\n          (_ngModelChange)=\"onselectedRoleEmailUser(selectedAction)\"\r\n        ></extend-select>\r\n      </div>\r\n      <box [height]=\"8\"></box>\r\n      <div nz-row>User</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]=\"lstUser\"\r\n          [valueField]=\"'App_User_Id'\"\r\n          [displayFields]=\"['UserName', 'FullName']\"\r\n          [multiple]=\"true\"\r\n          [(_ngModel)]=\"selectedAction._lstUserId\"\r\n          (_ngModelChange)=\"onselectedRoleEmailUser(selectedAction)\"\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)]=\"selectedAction._lstEmailActionId\"\r\n          (_ngModelChange)=\"onselectedRoleEmailUser(selectedAction)\"\r\n        ></extend-select>\r\n      </div>\r\n      <box [height]=\"8\"></box>\r\n      <div *ngIf=\"selectedAction._lstEmailActionId && selectedAction._lstEmailActionId.length\" nz-row>\r\n        Email template\r\n      </div>\r\n      <div *ngIf=\"selectedAction._lstEmailActionId && selectedAction._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(selectedAction); 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              ></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=\"selectedAction.WF_TransitionRule_Id\"\r\n          nz-button\r\n          nzType=\"text\"\r\n          nzSize=\"small\"\r\n          (click)=\"deleteActionRule(selectedAction)\"\r\n        >\r\n          <nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn\" />\r\n        </button>\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              [(_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              [lstItem]=\"template.lstActionType\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [info]=\"'DomainCode: WF_TemplateStageAction_ActionType'\"\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              [lstItem]=\"template.lstStageStatus\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [info]=\"'DomainCode: WF_TemplateStageAction_StageStatus'\"\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              [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              [lstItem]=\"template.lstStageStatus\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [info]=\"'DomainCode: WF_TemplateStageAction_StageStatus'\"\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 [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]=\"'90vw'\"\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\" class=\"form-item-no-bottom\">\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      <box [height]=\"8\"></box>\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]=\"'40px'\"><icon-add (click)=\"addActionRuleLine()\"></icon-add></th>\r\n                <th [nzWidth]=\"'150px'\">\r\n                  Rule type\r\n                  <icon-info\r\n                    [tooltip]=\"'DomainCode: WF_RuleType (change-action-parent, change-action-child, execute-store )'\"\r\n                  ></icon-info>\r\n                </th>\r\n                <th>Template</th>\r\n                <th>Template stage</th>\r\n                <th>Template action</th>\r\n                <th>Store to exec</th>\r\n                <th>Email template</th>\r\n                <th>Email to</th>\r\n                <th [nzWidth]=\"'50px'\">Active</th>\r\n                <th>Action</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                    <dic-domain-select\r\n                      [size]=\"'small'\"\r\n                      [DomainCode]=\"'WF_RuleType'\"\r\n                      [(_ngModel)]=\"item.RuleType\"\r\n                    ></dic-domain-select>\r\n                  </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                      [dropdownMatchSelectWidth]=\"false\"\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                      [dropdownMatchSelectWidth]=\"false\"\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                      [dropdownMatchSelectWidth]=\"false\"\r\n                      [(_ngModel)]=\"item.WF_TemplateStageAction_Id\"\r\n                    ></extend-select>\r\n                  </td>\r\n                  <td>\r\n                    <extend-input [size]=\"'small'\" [(_ngModel)]=\"item.StoreToExec\"></extend-input>\r\n                  </td>\r\n                  <td>\r\n                    <extend-select\r\n                      [size]=\"'small'\"\r\n                      [lstItem]=\"lstEmailTemplate\"\r\n                      [valueField]=\"'App_MailTemplate_Id'\"\r\n                      [displayField]=\"'Code'\"\r\n                      [dropdownMatchSelectWidth]=\"false\"\r\n                      [(_ngModel)]=\"item.App_MailTemplate_Id\"\r\n                    ></extend-select>\r\n                  </td>\r\n                  <td class=\"form-item-no-bottom\">\r\n                    <extend-textarea [size]=\"'small'\" [minRows]=\"1\" [(_ngModel)]=\"item.EmailTo\"></extend-textarea>\r\n                  </td>\r\n                  <td class=\"text-center form-item-no-bottom\">\r\n                    <extend-checkbox [(_ngModel)]=\"item.IsActive\"></extend-checkbox>\r\n                  </td>\r\n                  <td>\r\n                    <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"checkAction(item)\">Check</button>\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)=\"checkAllAction()\">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%;transition:transform .05s linear}.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}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:absolute;width:180px;height:125px;top:0;right:0;background-color:#eee;border:1px solid #aaa;opacity:.9;z-index:1}::ng-deep .minimap{position:absolute;width:200px;height:140px;top:8px;right:8px;background-color:#f8f9fa;border:1px solid #d9d9d9;border-radius:8px;box-shadow:0 4px 12px #0000001a;overflow:hidden;z-index:100;-webkit-user-select:none;user-select:none}::ng-deep .minimap-node{position:absolute;background-color:#bfbfbf;border-radius:2px}::ng-deep .minimap-node-round{position:absolute;background-color:#bfbfbf;border-radius:50%}::ng-deep .minimap-node-round-start{background-color:#52c41a}::ng-deep .minimap-node-round-end{background-color:#ff4d4f}::ng-deep .minimap-viewport{position:absolute;box-sizing:border-box;background-color:#1890ff26;border:1.5px solid #1890ff;border-radius:4px;z-index:2;cursor:grab;transition:none}::ng-deep .minimap-viewport.grabbing,::ng-deep .minimap-viewport:active{cursor:grabbing;background-color:#1890ff40}::ng-deep .has-floating-label.floating-label{position:relative;padding-top:14px}::ng-deep .has-floating-label nz-form-item nz-form-label{position:absolute;top:12px;left:13px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:1;height:auto;line-height:normal;padding:0 4px}::ng-deep .has-floating-label nz-form-item nz-form-label label{font-size:12px;color:var(--darkgray, #565656);font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .has-floating-label .full-width{width:100%}.has-floating-label.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.has-floating-label.floating-label nz-form-item:has(input[disabled]) nz-form-label,.has-floating-label.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.has-floating-label.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.has-floating-label.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.has-floating-label.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}\n"] }]
+                    ], selector: 'app-workflow-editor', template: "<div\r\n  #canvas\r\n  class=\"workflow-canvas\"\r\n  [class.connecting]=\"!!connectingFrom\"\r\n  [class.dragging-point]=\"!!draggingPoint\"\r\n  style=\"width: 100%; height: 100%\"\r\n  (mousedown)=\"onMouseDownCanvas($event)\"\r\n  (mousemove)=\"onMouseMoveCanvas($event)\"\r\n  (mouseup)=\"onMouseUpCanvas($event)\"\r\n  (click)=\"onClickCanvas($event)\"\r\n  (wheel)=\"onWheelCanvas($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\" [nzLoading]=\"!ready\" nz-tooltip=\"Reload\" (click)=\"getdata.emit()\">\r\n      <nz-icon nzType=\"reload\" class=\"color-primary\"></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    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      nz-tooltip=\"Add template action\"\r\n      class=\"color-primary\"\r\n      (click)=\"drawTemplateActionVisibel = true\"\r\n    >\r\n      A\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\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\" nzType=\"default\" (click)=\"zoomOut()\" nz-tooltip=\"Zoom Out\">\r\n      <nz-icon nzType=\"minus\"></nz-icon>\r\n    </button>\r\n    <span>{{ Math.round(zoom * 100) }}%</span>\r\n    <button nz-button nzSize=\"small\" nzType=\"default\" (click)=\"zoomIn()\" nz-tooltip=\"Zoom In\">\r\n      <nz-icon nzType=\"plus\"></nz-icon>\r\n    </button>\r\n    <span class=\"divider\"></span>\r\n    <button nz-button nzSize=\"small\" nzType=\"default\" (click)=\"resetZoom()\" nz-tooltip=\"Reset Zoom (Ctrl+0)\">\r\n      <nz-icon nzType=\"expand\"></nz-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div\r\n    class=\"canvas-content\"\r\n    [class.panning]=\"isMoveMode\"\r\n    [style.width.px]=\"getCanvasWidth()\"\r\n    [style.height.px]=\"getCanvasHeight()\"\r\n    [style.transform]=\"\r\n      'translate(' + template.editorOption.panX + 'px,' + template.editorOption.panY + 'px) scale(' + zoom + ')'\r\n    \"\r\n  >\r\n    <!-- GRID -->\r\n    <div *ngIf=\"wfcSetting.ShowGrid\" class=\"grid-layer\"></div>\r\n\r\n    <!-- SVG EDGES -->\r\n    <svg #svg class=\"edges-layer\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\">\r\n      <g>\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            style=\"font-weight: bold\"\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            style=\"font-weight: bold\"\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    <extend-select\r\n      [label]=\"'Apply to'\"\r\n      [lstItem]=\"template.lstApplyTo\"\r\n      [valueField]=\"'Code'\"\r\n      [displayFields]=\"['Code', 'Name']\"\r\n      [(_ngModel)]=\"template.ApplyTo\"\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          [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          [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          [(_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          [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 of Days'\"\r\n          [precision]=\"1\"\r\n          [(_ngModel)]=\"selectedStage.NumberDay\"\r\n        ></extend-input-number>\r\n        <extend-input-number\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Number of Person'\"\r\n          [precision]=\"1\"\r\n          [(_ngModel)]=\"selectedStage.NumberPerson\"\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\r\n        class=\"no-hover-color\"\r\n        nzSize=\"small\"\r\n        [nzData]=\"lstActionOfCurrentStage\"\r\n        [nzShowPagination]=\"false\"\r\n        [nzNoResult]=\"'&nbsp;'\"\r\n      >\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 (click)=\"onclickaction(action)\">\r\n              <td\r\n                style=\"border-bottom: solid 1px orange\"\r\n                [ngStyle]=\"{\r\n                  'border-left': action == hoverAction ? 'solid 4px orange' : '',\r\n                  'border-top': $index == 0 ? 'solid 1px orange' : '',\r\n                }\"\r\n              >\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\r\n                style=\"border-bottom: solid 1px orange\"\r\n                [ngStyle]=\"{\r\n                  'border-top': $index == 0 ? 'solid 1px orange' : '',\r\n                }\"\r\n              >\r\n                <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n                  <div nz-col [nzSpan]=\"8\" class=\"has-floating-label floating-label\">\r\n                    <nz-form-item>\r\n                      <nz-form-label [nzSpan]=\"24\" style=\"z-index: 2\">\r\n                        <label>Action status</label>\r\n                      </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                    [(_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                    [lstItem]=\"template.lstActionType\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [info]=\"'DomainCode: WF_TemplateStageAction_ActionType'\"\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                    [lstItem]=\"template.lstStageStatus\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [info]=\"'DomainCode: WF_TemplateStageAction_StageStatus'\"\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                    [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                    [lstItem]=\"template.lstStageStatus\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [info]=\"'DomainCode: WF_TemplateStageAction_StageStatus'\"\r\n                    [(_ngModel)]=\"action.To_StageStatus\"\r\n                  ></extend-select>\r\n\r\n                  <extend-select\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Process status'\"\r\n                    [lstItem]=\"template.lstProcessStatus\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [info]=\"'DomainCode: WF_TemplateStageAction_ProcessStatus'\"\r\n                    [(_ngModel)]=\"action.DocProcessStatus\"\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)=\"onselectedRoleEmailUser(action)\"\r\n                  ></extend-select>\r\n                </div>\r\n                <box [height]=\"8\"></box>\r\n                <div nz-row>User</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]=\"lstUser\"\r\n                    [valueField]=\"'App_User_Id'\"\r\n                    [displayFields]=\"['UserName', 'FullName']\"\r\n                    [multiple]=\"true\"\r\n                    [(_ngModel)]=\"action._lstUserId\"\r\n                    (_ngModelChange)=\"onselectedRoleEmailUser(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)=\"onselectedRoleEmailUser(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                        ></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_TransitionRule_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\r\n      <div nz-row nzJustify=\"end\">\r\n        <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"addAction()\">\r\n          <nz-icon nzType=\"plus\"></nz-icon>Add Action\r\n        </button>\r\n      </div>\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 TEMPLATE ACTION  -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawerTitleTemplateAction\"\r\n  [nzVisible]=\"drawTemplateActionVisibel\"\r\n  [nzWidth]=\"'calc(50vw)'\"\r\n  [nzClosable]=\"false\"\r\n  [nzFooter]=\"footerTplTemplateAction\"\r\n  (nzOnClose)=\"drawTemplateActionVisibel = false\"\r\n>\r\n  <ng-template #drawerTitleTemplateAction>\r\n    <div nz-row nzJustify=\"space-between\">Template action</div>\r\n  </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <nz-table nzSize=\"small\" [nzData]=\"lstActionOfTemplate\" [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 lstActionOfTemplate; track $index) {\r\n          <tr (click)=\"onclickaction(action)\">\r\n            <td\r\n              style=\"border-bottom: solid 1px orange\"\r\n              [ngStyle]=\"{\r\n                'border-left': action == hoverAction ? 'solid 4px orange' : '',\r\n                'border-top': $index == 0 ? 'solid 1px orange' : '',\r\n              }\"\r\n            >\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\r\n              style=\"border-bottom: solid 1px orange\"\r\n              [ngStyle]=\"{\r\n                'border-top': $index == 0 ? 'solid 1px orange' : '',\r\n              }\"\r\n            >\r\n              <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n                <div nz-col [nzSpan]=\"8\" class=\"has-floating-label floating-label\">\r\n                  <nz-form-item>\r\n                    <nz-form-label [nzSpan]=\"24\" style=\"z-index: 2\">\r\n                      <label>Action status</label>\r\n                    </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                  [(_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                  [lstItem]=\"template.lstActionType\"\r\n                  [valueField]=\"'Code'\"\r\n                  [displayFields]=\"['Code', 'Name']\"\r\n                  [info]=\"'DomainCode: WF_TemplateStageAction_ActionType'\"\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                  [lstItem]=\"template.lstStageStatus\"\r\n                  [valueField]=\"'Code'\"\r\n                  [displayFields]=\"['Code', 'Name']\"\r\n                  [info]=\"'DomainCode: WF_TemplateStageAction_StageStatus'\"\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                  [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                  [lstItem]=\"template.lstStageStatus\"\r\n                  [valueField]=\"'Code'\"\r\n                  [displayFields]=\"['Code', 'Name']\"\r\n                  [info]=\"'DomainCode: WF_TemplateStageAction_StageStatus'\"\r\n                  [(_ngModel)]=\"action.To_StageStatus\"\r\n                ></extend-select>\r\n\r\n                <extend-select\r\n                  nz-col\r\n                  [nzSpan]=\"8\"\r\n                  [label]=\"'Process status'\"\r\n                  [lstItem]=\"template.lstProcessStatus\"\r\n                  [valueField]=\"'Code'\"\r\n                  [displayFields]=\"['Code', 'Name']\"\r\n                  [info]=\"'DomainCode: WF_TemplateStageAction_ProcessStatus'\"\r\n                  [(_ngModel)]=\"action.DocProcessStatus\"\r\n                ></extend-select>\r\n              </div>\r\n              <box [height]=\"8\"></box>\r\n              <div nz-row class=\"text-bold\">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)=\"onselectedRoleEmailUser(action)\"\r\n                ></extend-select>\r\n              </div>\r\n              <box [height]=\"8\"></box>\r\n              <div nz-row class=\"text-bold\">User</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]=\"lstUser\"\r\n                  [valueField]=\"'App_User_Id'\"\r\n                  [displayFields]=\"['UserName', 'FullName']\"\r\n                  [multiple]=\"true\"\r\n                  [(_ngModel)]=\"action._lstUserId\"\r\n                  (_ngModelChange)=\"onselectedRoleEmailUser(action)\"\r\n                ></extend-select>\r\n              </div>\r\n              <box [height]=\"8\"></box>\r\n              <div nz-row class=\"text-bold\">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)=\"onselectedRoleEmailUser(action)\"\r\n                ></extend-select>\r\n              </div>\r\n              <box [height]=\"8\"></box>\r\n              <!-- Conditions -->\r\n              <div nz-row nzGutter=\"32\" class=\"text-bold\">\r\n                <div nz-col>Conditions</div>\r\n                <div nz-col>\r\n                  <extend-checkbox label=\"Allway\" [(_ngModel)]=\"action.Conditions.Allway\"></extend-checkbox>\r\n                </div>\r\n              </div>\r\n              <div nz-row class=\"form-item-no-bottom\">\r\n                <extend-select\r\n                  nz-col\r\n                  nzSpan=\"24\"\r\n                  [label]=\"'Stage'\"\r\n                  [lstItem]=\"getlstStage\"\r\n                  [multiple]=\"true\"\r\n                  [valueField]=\"'WF_TemplateStage_Id'\"\r\n                  [displayFields]=\"['Code', 'Name']\"\r\n                  [(_ngModel)]=\"action.Conditions.LstStage\"\r\n                  (_ngModelChange)=\"onchangeNextStage(action)\"\r\n                ></extend-select>\r\n                <extend-select\r\n                  nz-col\r\n                  nzSpan=\"24\"\r\n                  [label]=\"'Process status'\"\r\n                  [lstItem]=\"template.lstProcessStatus\"\r\n                  [multiple]=\"true\"\r\n                  [valueField]=\"'Code'\"\r\n                  [displayFields]=\"['Code', 'Name']\"\r\n                  [info]=\"'DomainCode: WF_TemplateStageAction_ProcessStatus'\"\r\n                  [(_ngModel)]=\"action.Conditions.LstDocProcessStatus\"\r\n                ></extend-select>\r\n                <extend-select\r\n                  nz-col\r\n                  nzSpan=\"24\"\r\n                  [label]=\"'Stage status'\"\r\n                  [lstItem]=\"template.lstStageStatus\"\r\n                  [multiple]=\"true\"\r\n                  [valueField]=\"'Code'\"\r\n                  [displayFields]=\"['Code', 'Name']\"\r\n                  [info]=\"'DomainCode: WF_TemplateStageAction_StageStatus'\"\r\n                  [(_ngModel)]=\"action.Conditions.LstStageStatus\"\r\n                ></extend-select>\r\n                <extend-select\r\n                  nz-col\r\n                  nzSpan=\"24\"\r\n                  [label]=\"'Action status'\"\r\n                  [lstItem]=\"template.lstActionStatus\"\r\n                  [multiple]=\"true\"\r\n                  [valueField]=\"'Code'\"\r\n                  [displayFields]=\"['Code', 'Name']\"\r\n                  [info]=\"'DomainCode: WF_TemplateStageAction_StageStatus'\"\r\n                  [(_ngModel)]=\"action.Conditions.LstActionStatus\"\r\n                ></extend-select>\r\n              </div>\r\n\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                      ></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\" class=\"text-bold\">\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_TransitionRule_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\r\n    <div nz-row nzJustify=\"end\">\r\n      <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"addTempldateAction()\">\r\n        <nz-icon nzType=\"plus\"></nz-icon>Add Action\r\n      </button>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-template #footerTplTemplateAction>\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    </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\" class=\"has-floating-label floating-label\">\r\n          <nz-form-item>\r\n            <nz-form-label [nzSpan]=\"24\" style=\"z-index: 2\">\r\n              <label>Action status</label>\r\n            </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          [(_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          [lstItem]=\"template.lstActionType\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [info]=\"'DomainCode: WF_TemplateStageAction_ActionType'\"\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          [lstItem]=\"template.lstStageStatus\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [info]=\"'DomainCode: WF_TemplateStageAction_StageStatus'\"\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          [lstItem]=\"getlstStage\"\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          [lstItem]=\"template.lstStageStatus\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [info]=\"'DomainCode: WF_TemplateStageAction_StageStatus'\"\r\n          [(_ngModel)]=\"selectedAction.To_StageStatus\"\r\n        ></extend-select>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Process status'\"\r\n          [lstItem]=\"template.lstProcessStatus\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [info]=\"'DomainCode: WF_TemplateStageAction_ProcessStatus'\"\r\n          [(_ngModel)]=\"selectedAction.DocProcessStatus\"\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)]=\"selectedAction._lstRoleId\"\r\n          (_ngModelChange)=\"onselectedRoleEmailUser(selectedAction)\"\r\n        ></extend-select>\r\n      </div>\r\n      <box [height]=\"8\"></box>\r\n      <div nz-row>User</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]=\"lstUser\"\r\n          [valueField]=\"'App_User_Id'\"\r\n          [displayFields]=\"['UserName', 'FullName']\"\r\n          [multiple]=\"true\"\r\n          [(_ngModel)]=\"selectedAction._lstUserId\"\r\n          (_ngModelChange)=\"onselectedRoleEmailUser(selectedAction)\"\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)]=\"selectedAction._lstEmailActionId\"\r\n          (_ngModelChange)=\"onselectedRoleEmailUser(selectedAction)\"\r\n        ></extend-select>\r\n      </div>\r\n      <box [height]=\"8\"></box>\r\n      <div *ngIf=\"selectedAction._lstEmailActionId && selectedAction._lstEmailActionId.length\" nz-row>\r\n        Email template\r\n      </div>\r\n      <div *ngIf=\"selectedAction._lstEmailActionId && selectedAction._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(selectedAction); 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              ></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=\"selectedAction.WF_TransitionRule_Id\"\r\n          nz-button\r\n          nzType=\"text\"\r\n          nzSize=\"small\"\r\n          (click)=\"deleteActionRule(selectedAction)\"\r\n        >\r\n          <nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn\" />\r\n        </button>\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              [(_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              [lstItem]=\"template.lstActionType\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [info]=\"'DomainCode: WF_TemplateStageAction_ActionType'\"\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              [lstItem]=\"template.lstStageStatus\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [info]=\"'DomainCode: WF_TemplateStageAction_StageStatus'\"\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              [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              [lstItem]=\"template.lstStageStatus\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [info]=\"'DomainCode: WF_TemplateStageAction_StageStatus'\"\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 [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]=\"'90vw'\"\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\" class=\"form-item-no-bottom\">\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      <box [height]=\"8\"></box>\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]=\"'40px'\"><icon-add (click)=\"addActionRuleLine()\"></icon-add></th>\r\n                <th [nzWidth]=\"'150px'\">\r\n                  Rule type\r\n                  <icon-info\r\n                    [tooltip]=\"'DomainCode: WF_RuleType (change-action-parent, change-action-child, execute-store )'\"\r\n                  ></icon-info>\r\n                </th>\r\n                <th>Template</th>\r\n                <th>Template stage</th>\r\n                <th>Template action</th>\r\n                <th>Store to exec</th>\r\n                <th>Email template</th>\r\n                <th>Email to</th>\r\n                <th [nzWidth]=\"'50px'\">Active</th>\r\n                <th>Action</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                    <dic-domain-select\r\n                      [size]=\"'small'\"\r\n                      [DomainCode]=\"'WF_RuleType'\"\r\n                      [(_ngModel)]=\"item.RuleType\"\r\n                    ></dic-domain-select>\r\n                  </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                      [dropdownMatchSelectWidth]=\"false\"\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                      [dropdownMatchSelectWidth]=\"false\"\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                      [dropdownMatchSelectWidth]=\"false\"\r\n                      [(_ngModel)]=\"item.WF_TemplateStageAction_Id\"\r\n                    ></extend-select>\r\n                  </td>\r\n                  <td>\r\n                    <extend-input [size]=\"'small'\" [(_ngModel)]=\"item.StoreToExec\"></extend-input>\r\n                  </td>\r\n                  <td>\r\n                    <extend-select\r\n                      [size]=\"'small'\"\r\n                      [lstItem]=\"lstEmailTemplate\"\r\n                      [valueField]=\"'App_MailTemplate_Id'\"\r\n                      [displayField]=\"'Code'\"\r\n                      [dropdownMatchSelectWidth]=\"false\"\r\n                      [(_ngModel)]=\"item.App_MailTemplate_Id\"\r\n                    ></extend-select>\r\n                  </td>\r\n                  <td class=\"form-item-no-bottom\">\r\n                    <extend-textarea [size]=\"'small'\" [minRows]=\"1\" [(_ngModel)]=\"item.EmailTo\"></extend-textarea>\r\n                  </td>\r\n                  <td class=\"text-center form-item-no-bottom\">\r\n                    <extend-checkbox [(_ngModel)]=\"item.IsActive\"></extend-checkbox>\r\n                  </td>\r\n                  <td>\r\n                    <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"checkAction(item)\">Check</button>\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)=\"checkAllAction()\">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%;transition:transform .05s linear}.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}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:absolute;width:180px;height:125px;top:0;right:0;background-color:#eee;border:1px solid #aaa;opacity:.9;z-index:1}::ng-deep .minimap{position:absolute;width:200px;height:140px;top:8px;right:8px;background-color:#f8f9fa;border:1px solid #d9d9d9;border-radius:8px;box-shadow:0 4px 12px #0000001a;overflow:hidden;z-index:100;-webkit-user-select:none;user-select:none}::ng-deep .minimap-node{position:absolute;background-color:#bfbfbf;border-radius:2px}::ng-deep .minimap-node-round{position:absolute;background-color:#bfbfbf;border-radius:50%}::ng-deep .minimap-node-round-start{background-color:#52c41a}::ng-deep .minimap-node-round-end{background-color:#ff4d4f}::ng-deep .minimap-viewport{position:absolute;box-sizing:border-box;background-color:#1890ff26;border:1.5px solid #1890ff;border-radius:4px;z-index:2;cursor:grab;transition:none}::ng-deep .minimap-viewport.grabbing,::ng-deep .minimap-viewport:active{cursor:grabbing;background-color:#1890ff40}::ng-deep .has-floating-label.floating-label{position:relative;padding-top:14px}::ng-deep .has-floating-label nz-form-item nz-form-label{position:absolute;top:12px;left:13px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:1;height:auto;line-height:normal;padding:0 4px}::ng-deep .has-floating-label nz-form-item nz-form-label label{font-size:12px;color:var(--darkgray, #565656);font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .has-floating-label .full-width{width:100%}.has-floating-label.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.has-floating-label.floating-label nz-form-item:has(input[disabled]) nz-form-label,.has-floating-label.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.has-floating-label.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.has-floating-label.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.has-floating-label.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}\n"] }]
         }], propDecorators: { lstOrg: [{
                 type: Input
             }], lstRole: [{
@@ -13291,27 +13549,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 type: Input
             }], lstEmailTemplate: [{
                 type: Input
+            }], getdata: [{
+                type: Output
             }], onSave: [{
-                type: Output,
-                args: ['onSave']
+                type: Output
             }], onDeleteStage: [{
-                type: Output,
-                args: ['onDeleteStage']
+                type: Output
             }], onDeleteAction: [{
-                type: Output,
-                args: ['onDeleteAction']
+                type: Output
             }], onDeleteRule: [{
-                type: Output,
-                args: ['onDeleteRule']
+                type: Output
             }], onDeleteRuleLine: [{
-                type: Output,
-                args: ['onDeleteRuleLine']
+                type: Output
             }], onCheckRule: [{
-                type: Output,
-                args: ['onCheckRule']
+                type: Output
             }], onCheckAllRule: [{
-                type: Output,
-                args: ['onCheckAllRule']
+                type: Output
             }], canvasRef: [{
                 type: ViewChild,
                 args: ['canvas', { static: true }]
@@ -13672,7 +13925,7 @@ class DynamicBuildFormComponent extends BaseComponent {
         this.dynamicForm.onSubmit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DynamicBuildFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: DynamicBuildFormComponent, isStandalone: true, selector: "app-form-builder", viewQueries: [{ propertyName: "dynamicForm", first: true, predicate: ["xxx"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"16\" class=\"builder-layout\">\n  <div nz-col [nzSpan]=\"5\">\n    <nz-card nzTitle=\"Components\" nzSize=\"small\">\n      <div\n        id=\"toolboxList\"\n        cdkDropList\n        [cdkDropListData]=\"toolboxItems\"\n        [cdkDropListConnectedTo]=\"['canvasGrid']\"\n        class=\"toolbox-list\"\n      >\n        <div class=\"toolbox-item\" *ngFor=\"let item of toolboxItems\" cdkDrag>\n          <i nz-icon [nzType]=\"item.icon\"></i> {{ item.label }}\n        </div>\n      </div>\n    </nz-card>\n  </div>\n\n  <div nz-col [nzSpan]=\"14\">\n    <nz-card nzTitle=\"Form design\" nzSize=\"small\" [nzExtra]=\"extraTemplate\">\n      <div\n        nz-row\n        [nzGutter]=\"[16, 16]\"\n        id=\"canvasGrid\"\n        cdkDropList\n        cdkDropListOrientation=\"mixed\"\n        [cdkDropListData]=\"formFields\"\n        (cdkDropListDropped)=\"drop($event)\"\n        class=\"canvas-grid-container\"\n      >\n        <div class=\"empty-text\" *ngIf=\"formFields.length === 0\">Drag the elements here to design the layout.</div>\n\n        <div\n          nz-col\n          [nzSpan]=\"field.span\"\n          *ngFor=\"let field of formFields; let i = index\"\n          cdkDrag\n          (click)=\"selectField(field)\"\n          [class.is-selected]=\"selectedField === field\"\n          class=\"grid-field-wrapper\"\n        >\n          <div class=\"field-box\">\n            <div class=\"field-header\">\n              <span>{{ field.label }} <span *ngIf=\"field.isRequired\" style=\"color: red\">*</span></span>\n              <span class=\"span-badge\">col-{{ field.span }}</span>\n            </div>\n\n            <input\n              nz-input\n              [placeholder]=\"field.placeholder || ''\"\n              disabled\n              *ngIf=\"field.type === 'text' || field.type === 'number'\"\n            />\n            <nz-date-picker style=\"width: 100%\" nzDisabled *ngIf=\"field.type === 'date'\"></nz-date-picker>\n            <nz-select nzPlaceHolder=\"Ch\u1ECDn d\u1EEF li\u1EC7u...\" nzDisabled *ngIf=\"field.type === 'select'\"></nz-select>\n\n            <button class=\"btn-delete\" (click)=\"removeField(i, $event)\">\n              <i nz-icon nzType=\"delete\" nzTheme=\"outline\"></i>\n            </button>\n          </div>\n        </div>\n      </div>\n    </nz-card>\n\n    <ng-template #extraTemplate>\n      <div nz-flex nzGap=\"small\">\n        <button\n          nz-button\n          nzSize=\"small\"\n          nzType=\"primary\"\n          [nzLoading]=\"isSaving\"\n          [disabled]=\"formFields.length === 0\"\n          (click)=\"saveFormDefinition()\"\n        >\n          <i nz-icon nzType=\"save\" nzTheme=\"outline\" *ngIf=\"!isSaving\"></i>\n          Get form\n        </button>\n        <button\n          nz-button\n          nzSize=\"small\"\n          nzType=\"primary\"\n          [nzLoading]=\"isSaving\"\n          [disabled]=\"formFields.length === 0\"\n          (click)=\"visible = true\"\n        >\n          Test form\n        </button>\n      </div>\n    </ng-template>\n  </div>\n\n  <div nz-col [nzSpan]=\"5\">\n    <nz-card [nzTitle]=\"selectedField?.type?.toUpperCase() + ' Attributes'\" nzSize=\"small\">\n      <div *ngIf=\"selectedField; else noSelect\" class=\"inspector-panel\">\n        <extend-input label=\"Name\" [(_ngModel)]=\"selectedField.name\"></extend-input>\n        <extend-input label=\"Label\" [(_ngModel)]=\"selectedField.label\"></extend-input>\n        <extend-input label=\"Placeholder\" [(_ngModel)]=\"selectedField.placeholder\"></extend-input>\n\n        @if (selectedField.type === \"select\") {\n          <extend-input label=\"Domain code\" [(_ngModel)]=\"selectedField.domainCode\"></extend-input>\n\n          <nz-form-item nz-row style=\"margin-top: 12px; margin-bottom: 0\">\n            <nz-form-label nzSpan=\"24\"> Options</nz-form-label>\n            <div nz-col nzSpan=\"24\">\n              @for (opt of selectedField.options; track $index) {\n                <div style=\"display: flex; gap: 8px; margin-bottom: 0px; align-items: center\">\n                  <extend-input size=\"small\" placeHolder=\"Value\" [(_ngModel)]=\"opt.value\"></extend-input>\n                  <extend-input size=\"small\" placeHolder=\"Label\" [(_ngModel)]=\"opt.label\"></extend-input>\n\n                  <button nz-button nzDanger nzType=\"text\" (click)=\"removeOption($index)\">\n                    <i nz-icon nzType=\"delete\"></i>\n                  </button>\n                </div>\n              }\n\n              <button\n                nz-button\n                nzType=\"dashed\"\n                nzSize=\"small\"\n                style=\"width: 100%; margin-top: 2px\"\n                (click)=\"addOption()\"\n              >\n                <i nz-icon nzType=\"plus\"></i> Th\u00EAm l\u1EF1a ch\u1ECDn\n              </button>\n            </div>\n          </nz-form-item>\n        }\n\n        <nz-form-item nz-row style=\"margin-top: 10px\">\n          <nz-form-label nzSpan=\"24\">Grid Span: 1 - 24</nz-form-label>\n          <nz-slider\n            nzSpan=\"24\"\n            style=\"width: 100%\"\n            [nzMin]=\"0\"\n            [nzMax]=\"24\"\n            [nzStep]=\"2\"\n            [(ngModel)]=\"selectedField.span\"\n          ></nz-slider>\n          <!-- <span style=\"font-size: 12px; color: #666\"> G\u1EE3i \u00FD: 24 = 100% d\u00F2ng, 12 = 50% d\u00F2ng, 8 = 33% d\u00F2ng. </span> -->\n        </nz-form-item>\n\n        <nz-form-item>\n          <label nz-checkbox [(ngModel)]=\"selectedField.isRequired\">Required</label>\n        </nz-form-item>\n      </div>\n      <ng-template #noSelect>\n        <p style=\"color: #999; text-align: center; padding-top: 40px\">\n          Select a component in the form to configure the layout.\n        </p>\n      </ng-template>\n    </nz-card>\n  </div>\n</div>\n\n<nz-modal\n  nzWidth=\"60%\"\n  [nzContent]=\"content\"\n  [nzMaskClosable]=\"false\"\n  [nzClosable]=\"false\"\n  [nzCancelText]=\"'\u0110\u00F3ng'\"\n  [(nzVisible)]=\"visible\"\n  (nzOnCancel)=\"visible = false\"\n  (nzOnOk)=\"onOk()\"\n>\n  <ng-template #content>\n    <app-dynamic-form #xxx [formMetadata]=\"{ fields: formFields }\"></app-dynamic-form>\n  </ng-template>\n</nz-modal>\n", styles: ["@charset \"UTF-8\";.builder-layout{padding:16px;background:#f5f7fa;min-height:calc(100vh - 64px)}.toolbox-list{display:flex;flex-direction:column;gap:10px;min-height:200px}.toolbox-item{padding:10px;background:#fff;border:1px solid #d9d9d9;border-radius:4px;cursor:grab}.toolbox-item:hover{border-color:#1890ff;color:#1890ff}.canvas-grid-container{min-height:500px;background:#fafafa;border:2px dashed #e2e8f0;border-radius:6px;padding:6px!important;align-content:flex-start;position:relative}.empty-text{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);color:#bfbfbf}.grid-field-wrapper{transition:transform .2s cubic-bezier(0,0,.2,1)}.field-box{background:#fff;border:1px solid #e2e8f0;border-radius:4px;padding:14px;position:relative;cursor:move;box-shadow:0 1px 3px #0000000d}.field-box:hover{border-color:#40a9ff}.field-box:hover .btn-delete{display:block}.is-selected .field-box{border-color:#1890ff;box-shadow:0 0 0 2px #1890ff33;background:#e6f7ff}.field-header{display:flex;justify-content:space-between;margin-bottom:6px;font-weight:500;font-size:13px}.field-header .span-badge{font-size:11px;background:#f0f2f5;padding:0 6px;border-radius:2px;color:#8c8c8c}.btn-delete{position:absolute;top:-10px;right:-10px;display:none;border:none;background:#ff4d4f;color:#fff;width:22px;height:22px;border-radius:50%;font-size:11px;cursor:pointer;box-shadow:0 2px 4px #0000001a;align-items:center;justify-content:center}.cdk-drag-preview{box-shadow:0 5px 15px #00000026;opacity:.9;background:#fff;border:1px solid #1890ff;border-radius:4px;padding:10px}.cdk-drag-placeholder{opacity:.4;background:#f0f2f5;border:2px dashed #bfbfbf!important}.inspector-panel nz-form-item{margin-bottom:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3$7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.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: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i3$5.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { 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: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵ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: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzSliderModule }, { kind: "component", type: i10$1.NzSliderComponent, selector: "nz-slider", inputs: ["nzDisabled", "nzDots", "nzIncluded", "nzRange", "nzVertical", "nzReverse", "nzDefaultValue", "nzMarks", "nzMax", "nzMin", "nzStep", "nzTooltipVisible", "nzTooltipPlacement", "nzTipFormatter"], outputs: ["nzOnAfterChange"], exportAs: ["nzSlider"] }, { kind: "ngmodule", type: NzDatePickerModule }, { kind: "component", type: i5$1.NzDatePickerComponent, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-quarter-picker,nz-year-picker,nz-range-picker", inputs: ["nzAllowClear", "nzAutoFocus", "nzDisabled", "nzBorderless", "nzInputReadOnly", "nzInline", "nzOpen", "nzDisabledDate", "nzLocale", "nzPlaceHolder", "nzPopupStyle", "nzDropdownClassName", "nzSize", "nzStatus", "nzFormat", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzShowToday", "nzMode", "nzShowNow", "nzRanges", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzPlacement", "nzShowWeekNumber", "nzShowTime"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i13.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus"], exportAs: ["nzSelect"] }, { kind: "ngmodule", type: NzCheckboxModule }, { kind: "component", type: i3$1.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId", "nzName"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "ngmodule", type: NzModalModule }, { kind: "component", type: i15.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: "component", type: DynamicFormComponent, selector: "app-dynamic-form", inputs: ["formMetadata", "formValuedata"] }, { kind: "directive", type: NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: DynamicBuildFormComponent, isStandalone: true, selector: "app-form-builder", viewQueries: [{ propertyName: "dynamicForm", first: true, predicate: ["xxx"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"16\" class=\"builder-layout\">\n  <div nz-col [nzSpan]=\"5\">\n    <nz-card nzTitle=\"Components\" nzSize=\"small\">\n      <div\n        id=\"toolboxList\"\n        cdkDropList\n        [cdkDropListData]=\"toolboxItems\"\n        [cdkDropListConnectedTo]=\"['canvasGrid']\"\n        class=\"toolbox-list\"\n      >\n        <div class=\"toolbox-item\" *ngFor=\"let item of toolboxItems\" cdkDrag>\n          <i nz-icon [nzType]=\"item.icon\"></i> {{ item.label }}\n        </div>\n      </div>\n    </nz-card>\n  </div>\n\n  <div nz-col [nzSpan]=\"14\">\n    <nz-card nzTitle=\"Form design\" nzSize=\"small\" [nzExtra]=\"extraTemplate\">\n      <div\n        nz-row\n        [nzGutter]=\"[16, 16]\"\n        id=\"canvasGrid\"\n        cdkDropList\n        cdkDropListOrientation=\"mixed\"\n        [cdkDropListData]=\"formFields\"\n        (cdkDropListDropped)=\"drop($event)\"\n        class=\"canvas-grid-container\"\n      >\n        <div class=\"empty-text\" *ngIf=\"formFields.length === 0\">Drag the elements here to design the layout.</div>\n\n        <div\n          nz-col\n          [nzSpan]=\"field.span\"\n          *ngFor=\"let field of formFields; let i = index\"\n          cdkDrag\n          (click)=\"selectField(field)\"\n          [class.is-selected]=\"selectedField === field\"\n          class=\"grid-field-wrapper\"\n        >\n          <div class=\"field-box\">\n            <div class=\"field-header\">\n              <span>{{ field.label }} <span *ngIf=\"field.isRequired\" style=\"color: red\">*</span></span>\n              <span class=\"span-badge\">col-{{ field.span }}</span>\n            </div>\n\n            <input\n              nz-input\n              [placeholder]=\"field.placeholder || ''\"\n              disabled\n              *ngIf=\"field.type === 'text' || field.type === 'number'\"\n            />\n            <nz-date-picker style=\"width: 100%\" nzDisabled *ngIf=\"field.type === 'date'\"></nz-date-picker>\n            <nz-select nzPlaceHolder=\"Ch\u1ECDn d\u1EEF li\u1EC7u...\" nzDisabled *ngIf=\"field.type === 'select'\"></nz-select>\n\n            <button class=\"btn-delete\" (click)=\"removeField(i, $event)\">\n              <i nz-icon nzType=\"delete\" nzTheme=\"outline\"></i>\n            </button>\n          </div>\n        </div>\n      </div>\n    </nz-card>\n\n    <ng-template #extraTemplate>\n      <div nz-flex nzGap=\"small\">\n        <button\n          nz-button\n          nzSize=\"small\"\n          nzType=\"primary\"\n          [nzLoading]=\"isSaving\"\n          [disabled]=\"formFields.length === 0\"\n          (click)=\"saveFormDefinition()\"\n        >\n          <i nz-icon nzType=\"save\" nzTheme=\"outline\" *ngIf=\"!isSaving\"></i>\n          Get form\n        </button>\n        <button\n          nz-button\n          nzSize=\"small\"\n          nzType=\"primary\"\n          [nzLoading]=\"isSaving\"\n          [disabled]=\"formFields.length === 0\"\n          (click)=\"visible = true\"\n        >\n          Test form\n        </button>\n      </div>\n    </ng-template>\n  </div>\n\n  <div nz-col [nzSpan]=\"5\">\n    <nz-card [nzTitle]=\"selectedField?.type?.toUpperCase() + ' Attributes'\" nzSize=\"small\">\n      <div *ngIf=\"selectedField; else noSelect\" class=\"inspector-panel\">\n        <extend-input label=\"Name\" [(_ngModel)]=\"selectedField.name\"></extend-input>\n        <extend-input label=\"Label\" [(_ngModel)]=\"selectedField.label\"></extend-input>\n        <extend-input label=\"Placeholder\" [(_ngModel)]=\"selectedField.placeholder\"></extend-input>\n\n        @if (selectedField.type === \"select\") {\n          <extend-input label=\"Domain code\" [(_ngModel)]=\"selectedField.domainCode\"></extend-input>\n\n          <nz-form-item nz-row style=\"margin-top: 12px; margin-bottom: 0\">\n            <nz-form-label nzSpan=\"24\"> Options</nz-form-label>\n            <div nz-col nzSpan=\"24\">\n              @for (opt of selectedField.options; track $index) {\n                <div style=\"display: flex; gap: 8px; margin-bottom: 0px; align-items: center\">\n                  <extend-input size=\"small\" placeHolder=\"Value\" [(_ngModel)]=\"opt.value\"></extend-input>\n                  <extend-input size=\"small\" placeHolder=\"Label\" [(_ngModel)]=\"opt.label\"></extend-input>\n\n                  <button nz-button nzDanger nzType=\"text\" (click)=\"removeOption($index)\">\n                    <i nz-icon nzType=\"delete\"></i>\n                  </button>\n                </div>\n              }\n\n              <button\n                nz-button\n                nzType=\"dashed\"\n                nzSize=\"small\"\n                style=\"width: 100%; margin-top: 2px\"\n                (click)=\"addOption()\"\n              >\n                <i nz-icon nzType=\"plus\"></i> Th\u00EAm l\u1EF1a ch\u1ECDn\n              </button>\n            </div>\n          </nz-form-item>\n        }\n\n        <nz-form-item nz-row style=\"margin-top: 10px\">\n          <nz-form-label nzSpan=\"24\">Grid Span: 1 - 24</nz-form-label>\n          <nz-slider\n            nzSpan=\"24\"\n            style=\"width: 100%\"\n            [nzMin]=\"0\"\n            [nzMax]=\"24\"\n            [nzStep]=\"2\"\n            [(ngModel)]=\"selectedField.span\"\n          ></nz-slider>\n          <!-- <span style=\"font-size: 12px; color: #666\"> G\u1EE3i \u00FD: 24 = 100% d\u00F2ng, 12 = 50% d\u00F2ng, 8 = 33% d\u00F2ng. </span> -->\n        </nz-form-item>\n\n        <nz-form-item>\n          <label nz-checkbox [(ngModel)]=\"selectedField.isRequired\">Required</label>\n        </nz-form-item>\n      </div>\n      <ng-template #noSelect>\n        <p style=\"color: #999; text-align: center; padding-top: 40px\">\n          Select a component in the form to configure the layout.\n        </p>\n      </ng-template>\n    </nz-card>\n  </div>\n</div>\n\n<nz-modal\n  nzWidth=\"60%\"\n  [nzContent]=\"content\"\n  [nzMaskClosable]=\"false\"\n  [nzClosable]=\"false\"\n  [nzCancelText]=\"'\u0110\u00F3ng'\"\n  [(nzVisible)]=\"visible\"\n  (nzOnCancel)=\"visible = false\"\n  (nzOnOk)=\"onOk()\"\n>\n  <ng-template #content>\n    <app-dynamic-form #xxx [formMetadata]=\"{ fields: formFields }\"></app-dynamic-form>\n  </ng-template>\n</nz-modal>\n", styles: ["@charset \"UTF-8\";.builder-layout{padding:16px;background:#f5f7fa;min-height:calc(100vh - 64px)}.toolbox-list{display:flex;flex-direction:column;gap:10px;min-height:200px}.toolbox-item{padding:10px;background:#fff;border:1px solid #d9d9d9;border-radius:4px;cursor:grab}.toolbox-item:hover{border-color:#1890ff;color:#1890ff}.canvas-grid-container{min-height:500px;background:#fafafa;border:2px dashed #e2e8f0;border-radius:6px;padding:6px!important;align-content:flex-start;position:relative}.empty-text{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);color:#bfbfbf}.grid-field-wrapper{transition:transform .2s cubic-bezier(0,0,.2,1)}.field-box{background:#fff;border:1px solid #e2e8f0;border-radius:4px;padding:14px;position:relative;cursor:move;box-shadow:0 1px 3px #0000000d}.field-box:hover{border-color:#40a9ff}.field-box:hover .btn-delete{display:block}.is-selected .field-box{border-color:#1890ff;box-shadow:0 0 0 2px #1890ff33;background:#e6f7ff}.field-header{display:flex;justify-content:space-between;margin-bottom:6px;font-weight:500;font-size:13px}.field-header .span-badge{font-size:11px;background:#f0f2f5;padding:0 6px;border-radius:2px;color:#8c8c8c}.btn-delete{position:absolute;top:-10px;right:-10px;display:none;border:none;background:#ff4d4f;color:#fff;width:22px;height:22px;border-radius:50%;font-size:11px;cursor:pointer;box-shadow:0 2px 4px #0000001a;align-items:center;justify-content:center}.cdk-drag-preview{box-shadow:0 5px 15px #00000026;opacity:.9;background:#fff;border:1px solid #1890ff;border-radius:4px;padding:10px}.cdk-drag-placeholder{opacity:.4;background:#f0f2f5;border:2px dashed #bfbfbf!important}.inspector-panel nz-form-item{margin-bottom:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3$7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.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: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i3$5.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { 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: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵ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: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzSliderModule }, { kind: "component", type: i10.NzSliderComponent, selector: "nz-slider", inputs: ["nzDisabled", "nzDots", "nzIncluded", "nzRange", "nzVertical", "nzReverse", "nzDefaultValue", "nzMarks", "nzMax", "nzMin", "nzStep", "nzTooltipVisible", "nzTooltipPlacement", "nzTipFormatter"], outputs: ["nzOnAfterChange"], exportAs: ["nzSlider"] }, { kind: "ngmodule", type: NzDatePickerModule }, { kind: "component", type: i5$1.NzDatePickerComponent, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-quarter-picker,nz-year-picker,nz-range-picker", inputs: ["nzAllowClear", "nzAutoFocus", "nzDisabled", "nzBorderless", "nzInputReadOnly", "nzInline", "nzOpen", "nzDisabledDate", "nzLocale", "nzPlaceHolder", "nzPopupStyle", "nzDropdownClassName", "nzSize", "nzStatus", "nzFormat", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzShowToday", "nzMode", "nzShowNow", "nzRanges", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzPlacement", "nzShowWeekNumber", "nzShowTime"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i13.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus"], exportAs: ["nzSelect"] }, { kind: "ngmodule", type: NzCheckboxModule }, { kind: "component", type: i3$1.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId", "nzName"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "ngmodule", type: NzModalModule }, { kind: "component", type: i15.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: "component", type: DynamicFormComponent, selector: "app-dynamic-form", inputs: ["formMetadata", "formValuedata"] }, { kind: "directive", type: NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DynamicBuildFormComponent, decorators: [{
             type: Component,
@@ -14302,13 +14555,13 @@ class RouteMonitorService {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RouteMonitorService, deps: [{ token: i1$7.Router }, { token: AuthService }, { token: NotiService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RouteMonitorService, deps: [{ token: i1$8.Router }, { token: AuthService }, { token: NotiService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RouteMonitorService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RouteMonitorService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$7.Router }, { type: AuthService }, { type: NotiService }] });
+        }], ctorParameters: () => [{ type: i1$8.Router }, { type: AuthService }, { type: NotiService }] });
 
 class ThemeService {
     setHighContrast(enabled) {
@@ -14698,7 +14951,7 @@ class LayoutUser extends BaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LayoutUser, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: LayoutUser, isStandalone: true, selector: "header-user", usesInheritance: true, ngImport: i0, template: "<button\n  *ngIf=\"TokenStorage.getOrgName() && !isXSmall\"\n  class=\"org-info\"\n  [@fadeInOut]\n  nz-button\n  nzType=\"text\"\n  nz-dropdown\n  [nzDropdownMenu]=\"isOneUserMultiOrgs ? menuOrg : null\"\n  [nzTrigger]=\"'click'\"\n  style=\"height: var(--app-header-height); color: #ffffff\"\n>\n  <nz-icon nzType=\"cluster\" nzTheme=\"outline\" />\n  {{ TokenStorage.getOrgName() }}\n</button>\n\n<nz-dropdown-menu #menuOrg=\"nzDropdownMenu\">\n  <ul nz-menu>\n    @for (org of lstOrg; track $index) {\n      <li *ngIf=\"$index > 0\" nz-menu-divider></li>\n      <li nz-menu-item (click)=\"changeOrg(org)\">\n        <nz-icon nzType=\"swap\" nzTheme=\"outline\" />&nbsp;&nbsp; {{ org.Name }}\n      </li>\n    }\n  </ul>\n</nz-dropdown-menu>\n\n<!-- N\u00DAT USER TR\u00CAN HEADER -->\n<button\n  class=\"user-info\"\n  nz-button\n  nzType=\"text\"\n  (click)=\"openUserDrawer()\"\n  style=\"height: var(--app-header-height); color: #ffffff\"\n>\n  <nz-icon nzType=\"user\" nzTheme=\"outline\" />\n  {{ TokenStorage.getUserFullname() }}\n</button>\n\n<!-- ============================================== -->\n<!-- DRAWER G\u1ED8P PROFILE & T\u00C0I LI\u1EC6U                  -->\n<!-- ============================================== -->\n<nz-drawer\n  [nzClosable]=\"true\"\n  [nzVisible]=\"isUserDrawerVisible\"\n  nzPlacement=\"right\"\n  [nzTitle]=\"'T\u00E0i kho\u1EA3n: ' + TokenStorage.getUserFullname()\"\n  [nzWidth]=\"500\"\n  (nzOnClose)=\"closeUserDrawer()\"\n>\n  <ng-container *nzDrawerContent>\n    <!-- TH\u00D4NG TIN PH\u00D2NG BAN -->\n    <div class=\"drawer-profile-header\">\n      <div class=\"profile-avatar\">\n        <nz-icon nzType=\"user\" nzTheme=\"outline\" />\n      </div>\n      <div class=\"profile-info\">\n        <h4 class=\"profile-name\">{{ TokenStorage.getUserFullname() }}</h4>\n        <p class=\"profile-org\">\n          <nz-icon nzType=\"cluster\" nzTheme=\"outline\" />\n          {{ TokenStorage.getOrgName() || \"Ch\u01B0a thu\u1ED9c \u0111\u01A1n v\u1ECB n\u00E0o\" }}\n        </p>\n      </div>\n      <button nz-button nzType=\"primary\" nzDanger (click)=\"logout()\">{{ \"LOGOUT\" | translate }}</button>\n    </div>\n\n    <!-- TABS CH\u1EE8C N\u0102NG -->\n    <nz-tabset nzSize=\"small\">\n      <!-- TAB 1: C\u00C0I \u0110\u1EB6T GIAO DI\u1EC6N & B\u1EA2O M\u1EACT -->\n      <nz-tab nzTitle=\"C\u00E0i \u0111\u1EB7t\">\n        <div class=\"setting-container\">\n          <div nz-row nzJustify=\"space-between\" nzAlign=\"middle\" class=\"setting-row\">\n            <span style=\"font-weight: 500\">B\u1EA3o m\u1EADt t\u00E0i kho\u1EA3n</span>\n            <button nz-button nzType=\"default\" (click)=\"openPasswordModal()\">\n              <nz-icon nzType=\"lock\" /> \u0110\u1ED5i m\u1EADt kh\u1EA9u\n            </button>\n          </div>\n\n          <nz-divider nzText=\"T\u00F9y ch\u1EC9nh giao di\u1EC7n\" nzOrientation=\"left\"></nz-divider>\n\n          <div nz-row [nzGutter]=\"[16, 16]\">\n            <div nz-col [nzSpan]=\"12\">\n              <extend-checkbox\n                [label]=\"'High contrast'\"\n                [labelSpan]=\"0\"\n                [(_ngModel)]=\"isHighContrast\"\n                (_ngModelChange)=\"onChangeHighContrast()\"\n              ></extend-checkbox>\n            </div>\n            <div nz-col [nzSpan]=\"12\">\n              <extend-checkbox\n                [label]=\"'Dark Mode'\"\n                [labelSpan]=\"0\"\n                [(_ngModel)]=\"isDarkMode\"\n                (_ngModelChange)=\"onChangeDarkMode()\"\n              ></extend-checkbox>\n            </div>\n            <div nz-col [nzSpan]=\"12\">\n              <extend-input\n                [label]=\"'Side width'\"\n                [(_ngModel)]=\"sideWidth\"\n                (_ngModelChange)=\"onChangeSideWidth()\"\n              ></extend-input>\n            </div>\n            <!-- <div nz-col [nzSpan]=\"12\">\n              <div style=\"margin-bottom: 5px\">Theme color:</div>\n              <nz-color-picker\n                nzShowText\n                [ngModel]=\"\n                  profileService.userProfile[profileService.KEY_THEME_COLOR] ||\n                  profileService.themecf[profileService.KEY_THEME_COLOR] ||\n                  profileService.DEFAULT_THEME_COLOR\n                \"\n                (ngModelChange)=\"\n                  profileService.updateUserProfile(profileService.KEY_THEME_COLOR, $event); profileService.loadTheme()\n                \"\n              ></nz-color-picker>\n            </div> -->\n            <!-- <div nz-col [nzSpan]=\"12\">\n              <div style=\"margin-bottom: 5px\">Theme menu color:</div>\n              <nz-color-picker\n                nzShowText\n                [ngModel]=\"\n                  profileService.userProfile[profileService.KEY_THEME_MENU_COLOR] ||\n                  profileService.themecf[profileService.KEY_THEME_MENU_COLOR] ||\n                  profileService.DEFAULT_THEME_MENU_COLOR\n                \"\n                (ngModelChange)=\"\n                  profileService.updateUserProfile(profileService.KEY_THEME_MENU_COLOR, $event);\n                  profileService.loadTheme()\n                \"\n              ></nz-color-picker>\n            </div> -->\n            <!-- <div nz-col [nzSpan]=\"24\">\n              <button nz-button nzType=\"default\" nzDanger nzBlock (click)=\"resetTheme()\">Reset Theme M\u1EB7c \u0111\u1ECBnh</button>\n            </div> -->\n          </div>\n        </div>\n      </nz-tab>\n\n      <!-- TAB 2: T\u00C0I LI\u1EC6U HDSD -->\n      <nz-tab nzTitle=\"T\u00E0i li\u1EC7u HDSD\">\n        <nz-spin [nzSpinning]=\"loadingHDSD\">\n          <nz-table [nzData]=\"hdsdData?.LstItem || []\" [nzBordered]=\"true\" [nzShowPagination]=\"false\" nzSize=\"small\">\n            <thead>\n              <tr>\n                <th>N\u1ED9i dung</th>\n                <th nzWidth=\"120px\">\u0110\u00EDnh k\u00E8m</th>\n                <th nzWidth=\"100px\">C\u1EADp nh\u1EADt</th>\n              </tr>\n            </thead>\n            <tbody>\n              @for (row of hdsdData?.LstItem || []; track row.App_File_Id) {\n                <tr>\n                  <td>{{ row.FileName || \"-\" }}</td>\n                  <td>\n                    @if (row.FilePath) {\n                      <a (click)=\"downloadHDSD(row)\"><nz-icon nzType=\"paper-clip\" /> T\u1EA3i v\u1EC1</a>\n                    } @else {\n                      -\n                    }\n                  </td>\n                  <td>{{ row.UpdateDate || row.CreateDate | date: \"dd/MM/yyyy\" }}</td>\n                </tr>\n              }\n            </tbody>\n          </nz-table>\n        </nz-spin>\n      </nz-tab>\n    </nz-tabset>\n  </ng-container>\n</nz-drawer>\n\n<!-- ============================================== -->\n<!-- MODAL \u0110\u1ED4I M\u1EACT KH\u1EA8U                             -->\n<!-- ============================================== -->\n<nz-modal\n  [(nzVisible)]=\"isPasswordModalVisible\"\n  nzTitle=\"\u0110\u1ED5i m\u1EADt kh\u1EA9u\"\n  [nzFooter]=\"null\"\n  (nzOnCancel)=\"closePasswordModal()\"\n>\n  <ng-container *nzModalContent>\n    <form [formGroup]=\"passwordForm\" (ngSubmit)=\"submitPasswordChange()\" nz-form nzLayout=\"vertical\">\n      <nz-form-item>\n        <nz-form-label nzRequired>M\u1EADt kh\u1EA9u hi\u1EC7n t\u1EA1i</nz-form-label>\n        <nz-form-control [nzErrorTip]=\"'B\u1EAFt bu\u1ED9c nh\u1EADp'\">\n          <nz-input-group [nzSuffix]=\"CurrentPasswordVisible ? suffixShowCurrent : suffixHideCurrent\">\n            <input nz-input type=\"{{ CurrentPasswordType }}\" formControlName=\"CurrentPassword\" />\n          </nz-input-group>\n          <ng-template #suffixShowCurrent\n            ><nz-icon\n              nzType=\"eye\"\n              (click)=\"CurrentPasswordVisible = !CurrentPasswordVisible; CurrentPasswordType = 'password'\"\n          /></ng-template>\n          <ng-template #suffixHideCurrent\n            ><nz-icon\n              nzType=\"eye-invisible\"\n              (click)=\"CurrentPasswordVisible = !CurrentPasswordVisible; CurrentPasswordType = 'text'\"\n          /></ng-template>\n        </nz-form-control>\n      </nz-form-item>\n\n      <nz-form-item>\n        <nz-form-label nzRequired>M\u1EADt kh\u1EA9u m\u1EDBi</nz-form-label>\n        <nz-form-control [nzErrorTip]=\"NewPasswordErrorTpl\">\n          <nz-input-group [nzSuffix]=\"NewPasswordVisible ? suffixShowNew : suffixHideNew\">\n            <input nz-input type=\"{{ NewPasswordType }}\" formControlName=\"NewPassword\" />\n          </nz-input-group>\n          <ng-template #suffixShowNew\n            ><nz-icon nzType=\"eye\" (click)=\"NewPasswordVisible = !NewPasswordVisible; NewPasswordType = 'password'\"\n          /></ng-template>\n          <ng-template #suffixHideNew\n            ><nz-icon\n              nzType=\"eye-invisible\"\n              (click)=\"NewPasswordVisible = !NewPasswordVisible; NewPasswordType = 'text'\"\n          /></ng-template>\n          <ng-template #NewPasswordErrorTpl let-control>\n            @if (control.errors?.[\"required\"]) {\n              B\u1EAFt bu\u1ED9c nh\u1EADp\n            }\n            @if (control.errors?.[\"minlength\"]) {\n              T\u1ED1i thi\u1EC3u 6 k\u00FD t\u1EF1\n            }\n          </ng-template>\n        </nz-form-control>\n      </nz-form-item>\n\n      <nz-form-item>\n        <nz-form-label nzRequired>X\u00E1c nh\u1EADn m\u1EADt kh\u1EA9u m\u1EDBi</nz-form-label>\n        <nz-form-control [nzErrorTip]=\"ConfirmPasswordErrorTpl\">\n          <nz-input-group [nzSuffix]=\"ConfirmPasswordVisible ? suffixShowConfirm : suffixHideConfirm\">\n            <input nz-input type=\"{{ ConfirmPasswordType }}\" formControlName=\"ConfirmPassword\" />\n          </nz-input-group>\n          <ng-template #suffixShowConfirm\n            ><nz-icon\n              nzType=\"eye\"\n              (click)=\"ConfirmPasswordVisible = !ConfirmPasswordVisible; ConfirmPasswordType = 'password'\"\n          /></ng-template>\n          <ng-template #suffixHideConfirm\n            ><nz-icon\n              nzType=\"eye-invisible\"\n              (click)=\"ConfirmPasswordVisible = !ConfirmPasswordVisible; ConfirmPasswordType = 'text'\"\n          /></ng-template>\n          <ng-template #ConfirmPasswordErrorTpl let-control>\n            @if (control.errors?.[\"required\"]) {\n              B\u1EAFt bu\u1ED9c nh\u1EADp\n            }\n            @if (control.errors?.[\"passwordMismatch\"]) {\n              M\u1EADt kh\u1EA9u kh\u00F4ng kh\u1EDBp\n            }\n          </ng-template>\n        </nz-form-control>\n      </nz-form-item>\n\n      <div nz-row nzJustify=\"end\">\n        <button nz-button type=\"button\" (click)=\"closePasswordModal()\" style=\"margin-right: 8px\">H\u1EE7y</button>\n        <button nz-button nzType=\"primary\">L\u01B0u thay \u0111\u1ED5i</button>\n      </div>\n    </form>\n  </ng-container>\n</nz-modal>\n", styles: ["@charset \"UTF-8\";.org-info,.user-info{font-weight:600}.user-info:hover,.org-info:hover{background-color:#ffffff26}.drawer-profile-header{display:flex;align-items:center;padding-bottom:20px;border-bottom:1px solid #f0f0f0;margin-bottom:10px}.drawer-profile-header .profile-avatar{width:50px;height:50px;border-radius:50%;background-color:#f0f5ff;color:#1890ff;display:flex;justify-content:center;align-items:center;font-size:24px;margin-right:15px}.drawer-profile-header .profile-info{flex:1;overflow:hidden}.drawer-profile-header .profile-info .profile-name{margin:0;font-size:16px;font-weight:600;color:#262626;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.drawer-profile-header .profile-info .profile-org{margin:4px 0 0;font-size:13px;color:#8c8c8c;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.drawer-profile-header .profile-info .profile-org i{margin-right:4px}.setting-container{padding:10px 0}.setting-container .setting-row{background:#fafafa;padding:12px 16px;border-radius:8px;margin-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NzLayoutModule }, { 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: "ngmodule", type: NzDropDownModule }, { kind: "directive", type: i4$2.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$2.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "directive", type: i4$2.NzMenuDividerDirective, selector: "[nz-menu-divider]", exportAs: ["nzMenuDivider"] }, { kind: "directive", type: i5$3.NzDropDownDirective, selector: "[nz-dropdown]", inputs: ["nzDropdownMenu", "nzTrigger", "nzMatchWidthElement", "nzBackdrop", "nzClickHide", "nzDisabled", "nzVisible", "nzOverlayClassName", "nzOverlayStyle", "nzPlacement"], outputs: ["nzVisibleChange"], exportAs: ["nzDropdown"] }, { kind: "component", type: i5$3.NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }, { kind: "directive", type: i5$3.NzDropdownButtonDirective, selector: "[nz-button][nz-dropdown]" }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.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: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵ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: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzTreeModule }, { kind: "ngmodule", type: NzBackTopModule }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "component", type: i3$6.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: i3$6.NzDrawerContentDirective, selector: "[nzDrawerContent]", exportAs: ["nzDrawerContent"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i6.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i6.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "ngmodule", type: NzSegmentedModule }, { kind: "ngmodule", type: NzBadgeModule }, { kind: "ngmodule", type: NzTabsModule }, { kind: "component", type: i1$6.NzTabSetComponent, selector: "nz-tabset", inputs: ["nzSelectedIndex", "nzTabPosition", "nzTabBarExtraContent", "nzCanDeactivate", "nzAddIcon", "nzTabBarStyle", "nzType", "nzSize", "nzAnimated", "nzTabBarGutter", "nzHideAdd", "nzCentered", "nzHideAll", "nzLinkRouter", "nzLinkExact", "nzDestroyInactiveTabPane"], outputs: ["nzSelectChange", "nzSelectedIndexChange", "nzTabListScroll", "nzClose", "nzAdd"], exportAs: ["nzTabset"] }, { kind: "component", type: i1$6.NzTabComponent, selector: "nz-tab", inputs: ["nzTitle", "nzClosable", "nzCloseIcon", "nzDisabled", "nzForceRender"], outputs: ["nzSelect", "nzDeselect", "nzClick", "nzContextmenu"], exportAs: ["nzTab"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i4.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: i4.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i4.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i4.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i4.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i4.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: NzModalModule }, { kind: "component", type: i15.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: i15.NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i5.NzFormDirective, selector: "[nz-form]", inputs: ["nzLayout", "nzNoColon", "nzAutoTips", "nzDisableAutoTips", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzForm"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzColorPickerModule }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "ngmodule", type: NzDividerModule }, { kind: "component", type: i17.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }, { kind: "ngmodule", type: NzSpinModule }, { kind: "component", type: i2$3.NzSpinComponent, selector: "nz-spin", inputs: ["nzIndicator", "nzSize", "nzTip", "nzDelay", "nzSimple", "nzSpinning"], exportAs: ["nzSpin"] }, { kind: "component", type: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }], animations: [fadeInOut] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: LayoutUser, isStandalone: true, selector: "header-user", usesInheritance: true, ngImport: i0, template: "<button\n  *ngIf=\"TokenStorage.getOrgName() && !isXSmall\"\n  class=\"org-info\"\n  [@fadeInOut]\n  nz-button\n  nzType=\"text\"\n  nz-dropdown\n  [nzDropdownMenu]=\"isOneUserMultiOrgs ? menuOrg : null\"\n  [nzTrigger]=\"'click'\"\n  style=\"height: var(--app-header-height); color: #ffffff\"\n>\n  <nz-icon nzType=\"cluster\" nzTheme=\"outline\" />\n  {{ TokenStorage.getOrgName() }}\n</button>\n\n<nz-dropdown-menu #menuOrg=\"nzDropdownMenu\">\n  <ul nz-menu>\n    @for (org of lstOrg; track $index) {\n      <li *ngIf=\"$index > 0\" nz-menu-divider></li>\n      <li nz-menu-item (click)=\"changeOrg(org)\">\n        <nz-icon nzType=\"swap\" nzTheme=\"outline\" />&nbsp;&nbsp; {{ org.Name }}\n      </li>\n    }\n  </ul>\n</nz-dropdown-menu>\n\n<!-- N\u00DAT USER TR\u00CAN HEADER -->\n<button\n  class=\"user-info\"\n  nz-button\n  nzType=\"text\"\n  (click)=\"openUserDrawer()\"\n  style=\"height: var(--app-header-height); color: #ffffff\"\n>\n  <nz-icon nzType=\"user\" nzTheme=\"outline\" />\n  {{ TokenStorage.getUserFullname() }}\n</button>\n\n<!-- ============================================== -->\n<!-- DRAWER G\u1ED8P PROFILE & T\u00C0I LI\u1EC6U                  -->\n<!-- ============================================== -->\n<nz-drawer\n  [nzClosable]=\"true\"\n  [nzVisible]=\"isUserDrawerVisible\"\n  nzPlacement=\"right\"\n  [nzTitle]=\"'T\u00E0i kho\u1EA3n: ' + TokenStorage.getUserFullname()\"\n  [nzWidth]=\"500\"\n  (nzOnClose)=\"closeUserDrawer()\"\n>\n  <ng-container *nzDrawerContent>\n    <!-- TH\u00D4NG TIN PH\u00D2NG BAN -->\n    <div class=\"drawer-profile-header\">\n      <div class=\"profile-avatar\">\n        <nz-icon nzType=\"user\" nzTheme=\"outline\" />\n      </div>\n      <div class=\"profile-info\">\n        <h4 class=\"profile-name\">{{ TokenStorage.getUserFullname() }}</h4>\n        <p class=\"profile-org\">\n          <nz-icon nzType=\"cluster\" nzTheme=\"outline\" />\n          {{ TokenStorage.getOrgName() || \"Ch\u01B0a thu\u1ED9c \u0111\u01A1n v\u1ECB n\u00E0o\" }}\n        </p>\n      </div>\n      <button nz-button nzType=\"primary\" nzDanger (click)=\"logout()\">{{ \"LOGOUT\" | translate }}</button>\n    </div>\n\n    <!-- TABS CH\u1EE8C N\u0102NG -->\n    <nz-tabset nzSize=\"small\">\n      <!-- TAB 1: C\u00C0I \u0110\u1EB6T GIAO DI\u1EC6N & B\u1EA2O M\u1EACT -->\n      <nz-tab nzTitle=\"C\u00E0i \u0111\u1EB7t\">\n        <div class=\"setting-container\">\n          <div nz-row nzJustify=\"space-between\" nzAlign=\"middle\" class=\"setting-row\">\n            <span style=\"font-weight: 500\">B\u1EA3o m\u1EADt t\u00E0i kho\u1EA3n</span>\n            <button nz-button nzType=\"default\" (click)=\"openPasswordModal()\">\n              <nz-icon nzType=\"lock\" /> \u0110\u1ED5i m\u1EADt kh\u1EA9u\n            </button>\n          </div>\n\n          <nz-divider nzText=\"T\u00F9y ch\u1EC9nh giao di\u1EC7n\" nzOrientation=\"left\"></nz-divider>\n\n          <div nz-row [nzGutter]=\"[16, 16]\">\n            <div nz-col [nzSpan]=\"12\">\n              <extend-checkbox\n                [label]=\"'High contrast'\"\n                [labelSpan]=\"0\"\n                [(_ngModel)]=\"isHighContrast\"\n                (_ngModelChange)=\"onChangeHighContrast()\"\n              ></extend-checkbox>\n            </div>\n            <div nz-col [nzSpan]=\"12\">\n              <extend-checkbox\n                [label]=\"'Dark Mode'\"\n                [labelSpan]=\"0\"\n                [(_ngModel)]=\"isDarkMode\"\n                (_ngModelChange)=\"onChangeDarkMode()\"\n              ></extend-checkbox>\n            </div>\n            <div nz-col [nzSpan]=\"12\">\n              <extend-input\n                [label]=\"'Side width'\"\n                [(_ngModel)]=\"sideWidth\"\n                (_ngModelChange)=\"onChangeSideWidth()\"\n              ></extend-input>\n            </div>\n            <!-- <div nz-col [nzSpan]=\"12\">\n              <div style=\"margin-bottom: 5px\">Theme color:</div>\n              <nz-color-picker\n                nzShowText\n                [ngModel]=\"\n                  profileService.userProfile[profileService.KEY_THEME_COLOR] ||\n                  profileService.themecf[profileService.KEY_THEME_COLOR] ||\n                  profileService.DEFAULT_THEME_COLOR\n                \"\n                (ngModelChange)=\"\n                  profileService.updateUserProfile(profileService.KEY_THEME_COLOR, $event); profileService.loadTheme()\n                \"\n              ></nz-color-picker>\n            </div> -->\n            <!-- <div nz-col [nzSpan]=\"12\">\n              <div style=\"margin-bottom: 5px\">Theme menu color:</div>\n              <nz-color-picker\n                nzShowText\n                [ngModel]=\"\n                  profileService.userProfile[profileService.KEY_THEME_MENU_COLOR] ||\n                  profileService.themecf[profileService.KEY_THEME_MENU_COLOR] ||\n                  profileService.DEFAULT_THEME_MENU_COLOR\n                \"\n                (ngModelChange)=\"\n                  profileService.updateUserProfile(profileService.KEY_THEME_MENU_COLOR, $event);\n                  profileService.loadTheme()\n                \"\n              ></nz-color-picker>\n            </div> -->\n            <!-- <div nz-col [nzSpan]=\"24\">\n              <button nz-button nzType=\"default\" nzDanger nzBlock (click)=\"resetTheme()\">Reset Theme M\u1EB7c \u0111\u1ECBnh</button>\n            </div> -->\n          </div>\n        </div>\n      </nz-tab>\n\n      <!-- TAB 2: T\u00C0I LI\u1EC6U HDSD -->\n      <nz-tab nzTitle=\"T\u00E0i li\u1EC7u HDSD\">\n        <nz-spin [nzSpinning]=\"loadingHDSD\">\n          <nz-table [nzData]=\"hdsdData?.LstItem || []\" [nzBordered]=\"true\" [nzShowPagination]=\"false\" nzSize=\"small\">\n            <thead>\n              <tr>\n                <th>N\u1ED9i dung</th>\n                <th nzWidth=\"120px\">\u0110\u00EDnh k\u00E8m</th>\n                <th nzWidth=\"100px\">C\u1EADp nh\u1EADt</th>\n              </tr>\n            </thead>\n            <tbody>\n              @for (row of hdsdData?.LstItem || []; track row.App_File_Id) {\n                <tr>\n                  <td>{{ row.FileName || \"-\" }}</td>\n                  <td>\n                    <a (click)=\"downloadHDSD(row)\"><nz-icon nzType=\"paper-clip\" /> T\u1EA3i v\u1EC1</a>\n                  </td>\n                  <td>{{ row.UpdateDate || row.CreateDate | date: \"dd/MM/yyyy\" }}</td>\n                </tr>\n              }\n            </tbody>\n          </nz-table>\n        </nz-spin>\n      </nz-tab>\n    </nz-tabset>\n  </ng-container>\n</nz-drawer>\n\n<!-- ============================================== -->\n<!-- MODAL \u0110\u1ED4I M\u1EACT KH\u1EA8U                             -->\n<!-- ============================================== -->\n<nz-modal\n  [(nzVisible)]=\"isPasswordModalVisible\"\n  nzTitle=\"\u0110\u1ED5i m\u1EADt kh\u1EA9u\"\n  [nzFooter]=\"null\"\n  (nzOnCancel)=\"closePasswordModal()\"\n>\n  <ng-container *nzModalContent>\n    <form [formGroup]=\"passwordForm\" (ngSubmit)=\"submitPasswordChange()\" nz-form nzLayout=\"vertical\">\n      <nz-form-item>\n        <nz-form-label nzRequired>M\u1EADt kh\u1EA9u hi\u1EC7n t\u1EA1i</nz-form-label>\n        <nz-form-control [nzErrorTip]=\"'B\u1EAFt bu\u1ED9c nh\u1EADp'\">\n          <nz-input-group [nzSuffix]=\"CurrentPasswordVisible ? suffixShowCurrent : suffixHideCurrent\">\n            <input nz-input type=\"{{ CurrentPasswordType }}\" formControlName=\"CurrentPassword\" />\n          </nz-input-group>\n          <ng-template #suffixShowCurrent\n            ><nz-icon\n              nzType=\"eye\"\n              (click)=\"CurrentPasswordVisible = !CurrentPasswordVisible; CurrentPasswordType = 'password'\"\n          /></ng-template>\n          <ng-template #suffixHideCurrent\n            ><nz-icon\n              nzType=\"eye-invisible\"\n              (click)=\"CurrentPasswordVisible = !CurrentPasswordVisible; CurrentPasswordType = 'text'\"\n          /></ng-template>\n        </nz-form-control>\n      </nz-form-item>\n\n      <nz-form-item>\n        <nz-form-label nzRequired>M\u1EADt kh\u1EA9u m\u1EDBi</nz-form-label>\n        <nz-form-control [nzErrorTip]=\"NewPasswordErrorTpl\">\n          <nz-input-group [nzSuffix]=\"NewPasswordVisible ? suffixShowNew : suffixHideNew\">\n            <input nz-input type=\"{{ NewPasswordType }}\" formControlName=\"NewPassword\" />\n          </nz-input-group>\n          <ng-template #suffixShowNew\n            ><nz-icon nzType=\"eye\" (click)=\"NewPasswordVisible = !NewPasswordVisible; NewPasswordType = 'password'\"\n          /></ng-template>\n          <ng-template #suffixHideNew\n            ><nz-icon\n              nzType=\"eye-invisible\"\n              (click)=\"NewPasswordVisible = !NewPasswordVisible; NewPasswordType = 'text'\"\n          /></ng-template>\n          <ng-template #NewPasswordErrorTpl let-control>\n            @if (control.errors?.[\"required\"]) {\n              B\u1EAFt bu\u1ED9c nh\u1EADp\n            }\n            @if (control.errors?.[\"minlength\"]) {\n              T\u1ED1i thi\u1EC3u 6 k\u00FD t\u1EF1\n            }\n          </ng-template>\n        </nz-form-control>\n      </nz-form-item>\n\n      <nz-form-item>\n        <nz-form-label nzRequired>X\u00E1c nh\u1EADn m\u1EADt kh\u1EA9u m\u1EDBi</nz-form-label>\n        <nz-form-control [nzErrorTip]=\"ConfirmPasswordErrorTpl\">\n          <nz-input-group [nzSuffix]=\"ConfirmPasswordVisible ? suffixShowConfirm : suffixHideConfirm\">\n            <input nz-input type=\"{{ ConfirmPasswordType }}\" formControlName=\"ConfirmPassword\" />\n          </nz-input-group>\n          <ng-template #suffixShowConfirm\n            ><nz-icon\n              nzType=\"eye\"\n              (click)=\"ConfirmPasswordVisible = !ConfirmPasswordVisible; ConfirmPasswordType = 'password'\"\n          /></ng-template>\n          <ng-template #suffixHideConfirm\n            ><nz-icon\n              nzType=\"eye-invisible\"\n              (click)=\"ConfirmPasswordVisible = !ConfirmPasswordVisible; ConfirmPasswordType = 'text'\"\n          /></ng-template>\n          <ng-template #ConfirmPasswordErrorTpl let-control>\n            @if (control.errors?.[\"required\"]) {\n              B\u1EAFt bu\u1ED9c nh\u1EADp\n            }\n            @if (control.errors?.[\"passwordMismatch\"]) {\n              M\u1EADt kh\u1EA9u kh\u00F4ng kh\u1EDBp\n            }\n          </ng-template>\n        </nz-form-control>\n      </nz-form-item>\n\n      <div nz-row nzJustify=\"end\">\n        <button nz-button type=\"button\" (click)=\"closePasswordModal()\" style=\"margin-right: 8px\">H\u1EE7y</button>\n        <button nz-button nzType=\"primary\">L\u01B0u thay \u0111\u1ED5i</button>\n      </div>\n    </form>\n  </ng-container>\n</nz-modal>\n", styles: ["@charset \"UTF-8\";.org-info,.user-info{font-weight:600}.user-info:hover,.org-info:hover{background-color:#ffffff26}.drawer-profile-header{display:flex;align-items:center;padding-bottom:20px;border-bottom:1px solid #f0f0f0;margin-bottom:10px}.drawer-profile-header .profile-avatar{width:50px;height:50px;border-radius:50%;background-color:#f0f5ff;color:#1890ff;display:flex;justify-content:center;align-items:center;font-size:24px;margin-right:15px}.drawer-profile-header .profile-info{flex:1;overflow:hidden}.drawer-profile-header .profile-info .profile-name{margin:0;font-size:16px;font-weight:600;color:#262626;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.drawer-profile-header .profile-info .profile-org{margin:4px 0 0;font-size:13px;color:#8c8c8c;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.drawer-profile-header .profile-info .profile-org i{margin-right:4px}.setting-container{padding:10px 0}.setting-container .setting-row{background:#fafafa;padding:12px 16px;border-radius:8px;margin-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NzLayoutModule }, { 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: "ngmodule", type: NzDropDownModule }, { kind: "directive", type: i4$2.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$2.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "directive", type: i4$2.NzMenuDividerDirective, selector: "[nz-menu-divider]", exportAs: ["nzMenuDivider"] }, { kind: "directive", type: i5$3.NzDropDownDirective, selector: "[nz-dropdown]", inputs: ["nzDropdownMenu", "nzTrigger", "nzMatchWidthElement", "nzBackdrop", "nzClickHide", "nzDisabled", "nzVisible", "nzOverlayClassName", "nzOverlayStyle", "nzPlacement"], outputs: ["nzVisibleChange"], exportAs: ["nzDropdown"] }, { kind: "component", type: i5$3.NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }, { kind: "directive", type: i5$3.NzDropdownButtonDirective, selector: "[nz-button][nz-dropdown]" }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.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: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵ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: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzTreeModule }, { kind: "ngmodule", type: NzBackTopModule }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "component", type: i3$6.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: i3$6.NzDrawerContentDirective, selector: "[nzDrawerContent]", exportAs: ["nzDrawerContent"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i6.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i6.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "ngmodule", type: NzSegmentedModule }, { kind: "ngmodule", type: NzBadgeModule }, { kind: "ngmodule", type: NzTabsModule }, { kind: "component", type: i1$6.NzTabSetComponent, selector: "nz-tabset", inputs: ["nzSelectedIndex", "nzTabPosition", "nzTabBarExtraContent", "nzCanDeactivate", "nzAddIcon", "nzTabBarStyle", "nzType", "nzSize", "nzAnimated", "nzTabBarGutter", "nzHideAdd", "nzCentered", "nzHideAll", "nzLinkRouter", "nzLinkExact", "nzDestroyInactiveTabPane"], outputs: ["nzSelectChange", "nzSelectedIndexChange", "nzTabListScroll", "nzClose", "nzAdd"], exportAs: ["nzTabset"] }, { kind: "component", type: i1$6.NzTabComponent, selector: "nz-tab", inputs: ["nzTitle", "nzClosable", "nzCloseIcon", "nzDisabled", "nzForceRender"], outputs: ["nzSelect", "nzDeselect", "nzClick", "nzContextmenu"], exportAs: ["nzTab"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i4.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: i4.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i4.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i4.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i4.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i4.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: NzModalModule }, { kind: "component", type: i15.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: i15.NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i5.NzFormDirective, selector: "[nz-form]", inputs: ["nzLayout", "nzNoColon", "nzAutoTips", "nzDisableAutoTips", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzForm"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzColorPickerModule }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "ngmodule", type: NzDividerModule }, { kind: "component", type: i17.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }, { kind: "ngmodule", type: NzSpinModule }, { kind: "component", type: i2$3.NzSpinComponent, selector: "nz-spin", inputs: ["nzIndicator", "nzSize", "nzTip", "nzDelay", "nzSimple", "nzSpinning"], exportAs: ["nzSpin"] }, { kind: "component", type: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }], animations: [fadeInOut] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LayoutUser, decorators: [{
             type: Component,
@@ -14729,7 +14982,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         NzSpinModule,
                         ExtendCheckbox,
                         ExtendInput,
-                    ], animations: [fadeInOut], template: "<button\n  *ngIf=\"TokenStorage.getOrgName() && !isXSmall\"\n  class=\"org-info\"\n  [@fadeInOut]\n  nz-button\n  nzType=\"text\"\n  nz-dropdown\n  [nzDropdownMenu]=\"isOneUserMultiOrgs ? menuOrg : null\"\n  [nzTrigger]=\"'click'\"\n  style=\"height: var(--app-header-height); color: #ffffff\"\n>\n  <nz-icon nzType=\"cluster\" nzTheme=\"outline\" />\n  {{ TokenStorage.getOrgName() }}\n</button>\n\n<nz-dropdown-menu #menuOrg=\"nzDropdownMenu\">\n  <ul nz-menu>\n    @for (org of lstOrg; track $index) {\n      <li *ngIf=\"$index > 0\" nz-menu-divider></li>\n      <li nz-menu-item (click)=\"changeOrg(org)\">\n        <nz-icon nzType=\"swap\" nzTheme=\"outline\" />&nbsp;&nbsp; {{ org.Name }}\n      </li>\n    }\n  </ul>\n</nz-dropdown-menu>\n\n<!-- N\u00DAT USER TR\u00CAN HEADER -->\n<button\n  class=\"user-info\"\n  nz-button\n  nzType=\"text\"\n  (click)=\"openUserDrawer()\"\n  style=\"height: var(--app-header-height); color: #ffffff\"\n>\n  <nz-icon nzType=\"user\" nzTheme=\"outline\" />\n  {{ TokenStorage.getUserFullname() }}\n</button>\n\n<!-- ============================================== -->\n<!-- DRAWER G\u1ED8P PROFILE & T\u00C0I LI\u1EC6U                  -->\n<!-- ============================================== -->\n<nz-drawer\n  [nzClosable]=\"true\"\n  [nzVisible]=\"isUserDrawerVisible\"\n  nzPlacement=\"right\"\n  [nzTitle]=\"'T\u00E0i kho\u1EA3n: ' + TokenStorage.getUserFullname()\"\n  [nzWidth]=\"500\"\n  (nzOnClose)=\"closeUserDrawer()\"\n>\n  <ng-container *nzDrawerContent>\n    <!-- TH\u00D4NG TIN PH\u00D2NG BAN -->\n    <div class=\"drawer-profile-header\">\n      <div class=\"profile-avatar\">\n        <nz-icon nzType=\"user\" nzTheme=\"outline\" />\n      </div>\n      <div class=\"profile-info\">\n        <h4 class=\"profile-name\">{{ TokenStorage.getUserFullname() }}</h4>\n        <p class=\"profile-org\">\n          <nz-icon nzType=\"cluster\" nzTheme=\"outline\" />\n          {{ TokenStorage.getOrgName() || \"Ch\u01B0a thu\u1ED9c \u0111\u01A1n v\u1ECB n\u00E0o\" }}\n        </p>\n      </div>\n      <button nz-button nzType=\"primary\" nzDanger (click)=\"logout()\">{{ \"LOGOUT\" | translate }}</button>\n    </div>\n\n    <!-- TABS CH\u1EE8C N\u0102NG -->\n    <nz-tabset nzSize=\"small\">\n      <!-- TAB 1: C\u00C0I \u0110\u1EB6T GIAO DI\u1EC6N & B\u1EA2O M\u1EACT -->\n      <nz-tab nzTitle=\"C\u00E0i \u0111\u1EB7t\">\n        <div class=\"setting-container\">\n          <div nz-row nzJustify=\"space-between\" nzAlign=\"middle\" class=\"setting-row\">\n            <span style=\"font-weight: 500\">B\u1EA3o m\u1EADt t\u00E0i kho\u1EA3n</span>\n            <button nz-button nzType=\"default\" (click)=\"openPasswordModal()\">\n              <nz-icon nzType=\"lock\" /> \u0110\u1ED5i m\u1EADt kh\u1EA9u\n            </button>\n          </div>\n\n          <nz-divider nzText=\"T\u00F9y ch\u1EC9nh giao di\u1EC7n\" nzOrientation=\"left\"></nz-divider>\n\n          <div nz-row [nzGutter]=\"[16, 16]\">\n            <div nz-col [nzSpan]=\"12\">\n              <extend-checkbox\n                [label]=\"'High contrast'\"\n                [labelSpan]=\"0\"\n                [(_ngModel)]=\"isHighContrast\"\n                (_ngModelChange)=\"onChangeHighContrast()\"\n              ></extend-checkbox>\n            </div>\n            <div nz-col [nzSpan]=\"12\">\n              <extend-checkbox\n                [label]=\"'Dark Mode'\"\n                [labelSpan]=\"0\"\n                [(_ngModel)]=\"isDarkMode\"\n                (_ngModelChange)=\"onChangeDarkMode()\"\n              ></extend-checkbox>\n            </div>\n            <div nz-col [nzSpan]=\"12\">\n              <extend-input\n                [label]=\"'Side width'\"\n                [(_ngModel)]=\"sideWidth\"\n                (_ngModelChange)=\"onChangeSideWidth()\"\n              ></extend-input>\n            </div>\n            <!-- <div nz-col [nzSpan]=\"12\">\n              <div style=\"margin-bottom: 5px\">Theme color:</div>\n              <nz-color-picker\n                nzShowText\n                [ngModel]=\"\n                  profileService.userProfile[profileService.KEY_THEME_COLOR] ||\n                  profileService.themecf[profileService.KEY_THEME_COLOR] ||\n                  profileService.DEFAULT_THEME_COLOR\n                \"\n                (ngModelChange)=\"\n                  profileService.updateUserProfile(profileService.KEY_THEME_COLOR, $event); profileService.loadTheme()\n                \"\n              ></nz-color-picker>\n            </div> -->\n            <!-- <div nz-col [nzSpan]=\"12\">\n              <div style=\"margin-bottom: 5px\">Theme menu color:</div>\n              <nz-color-picker\n                nzShowText\n                [ngModel]=\"\n                  profileService.userProfile[profileService.KEY_THEME_MENU_COLOR] ||\n                  profileService.themecf[profileService.KEY_THEME_MENU_COLOR] ||\n                  profileService.DEFAULT_THEME_MENU_COLOR\n                \"\n                (ngModelChange)=\"\n                  profileService.updateUserProfile(profileService.KEY_THEME_MENU_COLOR, $event);\n                  profileService.loadTheme()\n                \"\n              ></nz-color-picker>\n            </div> -->\n            <!-- <div nz-col [nzSpan]=\"24\">\n              <button nz-button nzType=\"default\" nzDanger nzBlock (click)=\"resetTheme()\">Reset Theme M\u1EB7c \u0111\u1ECBnh</button>\n            </div> -->\n          </div>\n        </div>\n      </nz-tab>\n\n      <!-- TAB 2: T\u00C0I LI\u1EC6U HDSD -->\n      <nz-tab nzTitle=\"T\u00E0i li\u1EC7u HDSD\">\n        <nz-spin [nzSpinning]=\"loadingHDSD\">\n          <nz-table [nzData]=\"hdsdData?.LstItem || []\" [nzBordered]=\"true\" [nzShowPagination]=\"false\" nzSize=\"small\">\n            <thead>\n              <tr>\n                <th>N\u1ED9i dung</th>\n                <th nzWidth=\"120px\">\u0110\u00EDnh k\u00E8m</th>\n                <th nzWidth=\"100px\">C\u1EADp nh\u1EADt</th>\n              </tr>\n            </thead>\n            <tbody>\n              @for (row of hdsdData?.LstItem || []; track row.App_File_Id) {\n                <tr>\n                  <td>{{ row.FileName || \"-\" }}</td>\n                  <td>\n                    @if (row.FilePath) {\n                      <a (click)=\"downloadHDSD(row)\"><nz-icon nzType=\"paper-clip\" /> T\u1EA3i v\u1EC1</a>\n                    } @else {\n                      -\n                    }\n                  </td>\n                  <td>{{ row.UpdateDate || row.CreateDate | date: \"dd/MM/yyyy\" }}</td>\n                </tr>\n              }\n            </tbody>\n          </nz-table>\n        </nz-spin>\n      </nz-tab>\n    </nz-tabset>\n  </ng-container>\n</nz-drawer>\n\n<!-- ============================================== -->\n<!-- MODAL \u0110\u1ED4I M\u1EACT KH\u1EA8U                             -->\n<!-- ============================================== -->\n<nz-modal\n  [(nzVisible)]=\"isPasswordModalVisible\"\n  nzTitle=\"\u0110\u1ED5i m\u1EADt kh\u1EA9u\"\n  [nzFooter]=\"null\"\n  (nzOnCancel)=\"closePasswordModal()\"\n>\n  <ng-container *nzModalContent>\n    <form [formGroup]=\"passwordForm\" (ngSubmit)=\"submitPasswordChange()\" nz-form nzLayout=\"vertical\">\n      <nz-form-item>\n        <nz-form-label nzRequired>M\u1EADt kh\u1EA9u hi\u1EC7n t\u1EA1i</nz-form-label>\n        <nz-form-control [nzErrorTip]=\"'B\u1EAFt bu\u1ED9c nh\u1EADp'\">\n          <nz-input-group [nzSuffix]=\"CurrentPasswordVisible ? suffixShowCurrent : suffixHideCurrent\">\n            <input nz-input type=\"{{ CurrentPasswordType }}\" formControlName=\"CurrentPassword\" />\n          </nz-input-group>\n          <ng-template #suffixShowCurrent\n            ><nz-icon\n              nzType=\"eye\"\n              (click)=\"CurrentPasswordVisible = !CurrentPasswordVisible; CurrentPasswordType = 'password'\"\n          /></ng-template>\n          <ng-template #suffixHideCurrent\n            ><nz-icon\n              nzType=\"eye-invisible\"\n              (click)=\"CurrentPasswordVisible = !CurrentPasswordVisible; CurrentPasswordType = 'text'\"\n          /></ng-template>\n        </nz-form-control>\n      </nz-form-item>\n\n      <nz-form-item>\n        <nz-form-label nzRequired>M\u1EADt kh\u1EA9u m\u1EDBi</nz-form-label>\n        <nz-form-control [nzErrorTip]=\"NewPasswordErrorTpl\">\n          <nz-input-group [nzSuffix]=\"NewPasswordVisible ? suffixShowNew : suffixHideNew\">\n            <input nz-input type=\"{{ NewPasswordType }}\" formControlName=\"NewPassword\" />\n          </nz-input-group>\n          <ng-template #suffixShowNew\n            ><nz-icon nzType=\"eye\" (click)=\"NewPasswordVisible = !NewPasswordVisible; NewPasswordType = 'password'\"\n          /></ng-template>\n          <ng-template #suffixHideNew\n            ><nz-icon\n              nzType=\"eye-invisible\"\n              (click)=\"NewPasswordVisible = !NewPasswordVisible; NewPasswordType = 'text'\"\n          /></ng-template>\n          <ng-template #NewPasswordErrorTpl let-control>\n            @if (control.errors?.[\"required\"]) {\n              B\u1EAFt bu\u1ED9c nh\u1EADp\n            }\n            @if (control.errors?.[\"minlength\"]) {\n              T\u1ED1i thi\u1EC3u 6 k\u00FD t\u1EF1\n            }\n          </ng-template>\n        </nz-form-control>\n      </nz-form-item>\n\n      <nz-form-item>\n        <nz-form-label nzRequired>X\u00E1c nh\u1EADn m\u1EADt kh\u1EA9u m\u1EDBi</nz-form-label>\n        <nz-form-control [nzErrorTip]=\"ConfirmPasswordErrorTpl\">\n          <nz-input-group [nzSuffix]=\"ConfirmPasswordVisible ? suffixShowConfirm : suffixHideConfirm\">\n            <input nz-input type=\"{{ ConfirmPasswordType }}\" formControlName=\"ConfirmPassword\" />\n          </nz-input-group>\n          <ng-template #suffixShowConfirm\n            ><nz-icon\n              nzType=\"eye\"\n              (click)=\"ConfirmPasswordVisible = !ConfirmPasswordVisible; ConfirmPasswordType = 'password'\"\n          /></ng-template>\n          <ng-template #suffixHideConfirm\n            ><nz-icon\n              nzType=\"eye-invisible\"\n              (click)=\"ConfirmPasswordVisible = !ConfirmPasswordVisible; ConfirmPasswordType = 'text'\"\n          /></ng-template>\n          <ng-template #ConfirmPasswordErrorTpl let-control>\n            @if (control.errors?.[\"required\"]) {\n              B\u1EAFt bu\u1ED9c nh\u1EADp\n            }\n            @if (control.errors?.[\"passwordMismatch\"]) {\n              M\u1EADt kh\u1EA9u kh\u00F4ng kh\u1EDBp\n            }\n          </ng-template>\n        </nz-form-control>\n      </nz-form-item>\n\n      <div nz-row nzJustify=\"end\">\n        <button nz-button type=\"button\" (click)=\"closePasswordModal()\" style=\"margin-right: 8px\">H\u1EE7y</button>\n        <button nz-button nzType=\"primary\">L\u01B0u thay \u0111\u1ED5i</button>\n      </div>\n    </form>\n  </ng-container>\n</nz-modal>\n", styles: ["@charset \"UTF-8\";.org-info,.user-info{font-weight:600}.user-info:hover,.org-info:hover{background-color:#ffffff26}.drawer-profile-header{display:flex;align-items:center;padding-bottom:20px;border-bottom:1px solid #f0f0f0;margin-bottom:10px}.drawer-profile-header .profile-avatar{width:50px;height:50px;border-radius:50%;background-color:#f0f5ff;color:#1890ff;display:flex;justify-content:center;align-items:center;font-size:24px;margin-right:15px}.drawer-profile-header .profile-info{flex:1;overflow:hidden}.drawer-profile-header .profile-info .profile-name{margin:0;font-size:16px;font-weight:600;color:#262626;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.drawer-profile-header .profile-info .profile-org{margin:4px 0 0;font-size:13px;color:#8c8c8c;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.drawer-profile-header .profile-info .profile-org i{margin-right:4px}.setting-container{padding:10px 0}.setting-container .setting-row{background:#fafafa;padding:12px 16px;border-radius:8px;margin-bottom:15px}\n"] }]
+                    ], animations: [fadeInOut], template: "<button\n  *ngIf=\"TokenStorage.getOrgName() && !isXSmall\"\n  class=\"org-info\"\n  [@fadeInOut]\n  nz-button\n  nzType=\"text\"\n  nz-dropdown\n  [nzDropdownMenu]=\"isOneUserMultiOrgs ? menuOrg : null\"\n  [nzTrigger]=\"'click'\"\n  style=\"height: var(--app-header-height); color: #ffffff\"\n>\n  <nz-icon nzType=\"cluster\" nzTheme=\"outline\" />\n  {{ TokenStorage.getOrgName() }}\n</button>\n\n<nz-dropdown-menu #menuOrg=\"nzDropdownMenu\">\n  <ul nz-menu>\n    @for (org of lstOrg; track $index) {\n      <li *ngIf=\"$index > 0\" nz-menu-divider></li>\n      <li nz-menu-item (click)=\"changeOrg(org)\">\n        <nz-icon nzType=\"swap\" nzTheme=\"outline\" />&nbsp;&nbsp; {{ org.Name }}\n      </li>\n    }\n  </ul>\n</nz-dropdown-menu>\n\n<!-- N\u00DAT USER TR\u00CAN HEADER -->\n<button\n  class=\"user-info\"\n  nz-button\n  nzType=\"text\"\n  (click)=\"openUserDrawer()\"\n  style=\"height: var(--app-header-height); color: #ffffff\"\n>\n  <nz-icon nzType=\"user\" nzTheme=\"outline\" />\n  {{ TokenStorage.getUserFullname() }}\n</button>\n\n<!-- ============================================== -->\n<!-- DRAWER G\u1ED8P PROFILE & T\u00C0I LI\u1EC6U                  -->\n<!-- ============================================== -->\n<nz-drawer\n  [nzClosable]=\"true\"\n  [nzVisible]=\"isUserDrawerVisible\"\n  nzPlacement=\"right\"\n  [nzTitle]=\"'T\u00E0i kho\u1EA3n: ' + TokenStorage.getUserFullname()\"\n  [nzWidth]=\"500\"\n  (nzOnClose)=\"closeUserDrawer()\"\n>\n  <ng-container *nzDrawerContent>\n    <!-- TH\u00D4NG TIN PH\u00D2NG BAN -->\n    <div class=\"drawer-profile-header\">\n      <div class=\"profile-avatar\">\n        <nz-icon nzType=\"user\" nzTheme=\"outline\" />\n      </div>\n      <div class=\"profile-info\">\n        <h4 class=\"profile-name\">{{ TokenStorage.getUserFullname() }}</h4>\n        <p class=\"profile-org\">\n          <nz-icon nzType=\"cluster\" nzTheme=\"outline\" />\n          {{ TokenStorage.getOrgName() || \"Ch\u01B0a thu\u1ED9c \u0111\u01A1n v\u1ECB n\u00E0o\" }}\n        </p>\n      </div>\n      <button nz-button nzType=\"primary\" nzDanger (click)=\"logout()\">{{ \"LOGOUT\" | translate }}</button>\n    </div>\n\n    <!-- TABS CH\u1EE8C N\u0102NG -->\n    <nz-tabset nzSize=\"small\">\n      <!-- TAB 1: C\u00C0I \u0110\u1EB6T GIAO DI\u1EC6N & B\u1EA2O M\u1EACT -->\n      <nz-tab nzTitle=\"C\u00E0i \u0111\u1EB7t\">\n        <div class=\"setting-container\">\n          <div nz-row nzJustify=\"space-between\" nzAlign=\"middle\" class=\"setting-row\">\n            <span style=\"font-weight: 500\">B\u1EA3o m\u1EADt t\u00E0i kho\u1EA3n</span>\n            <button nz-button nzType=\"default\" (click)=\"openPasswordModal()\">\n              <nz-icon nzType=\"lock\" /> \u0110\u1ED5i m\u1EADt kh\u1EA9u\n            </button>\n          </div>\n\n          <nz-divider nzText=\"T\u00F9y ch\u1EC9nh giao di\u1EC7n\" nzOrientation=\"left\"></nz-divider>\n\n          <div nz-row [nzGutter]=\"[16, 16]\">\n            <div nz-col [nzSpan]=\"12\">\n              <extend-checkbox\n                [label]=\"'High contrast'\"\n                [labelSpan]=\"0\"\n                [(_ngModel)]=\"isHighContrast\"\n                (_ngModelChange)=\"onChangeHighContrast()\"\n              ></extend-checkbox>\n            </div>\n            <div nz-col [nzSpan]=\"12\">\n              <extend-checkbox\n                [label]=\"'Dark Mode'\"\n                [labelSpan]=\"0\"\n                [(_ngModel)]=\"isDarkMode\"\n                (_ngModelChange)=\"onChangeDarkMode()\"\n              ></extend-checkbox>\n            </div>\n            <div nz-col [nzSpan]=\"12\">\n              <extend-input\n                [label]=\"'Side width'\"\n                [(_ngModel)]=\"sideWidth\"\n                (_ngModelChange)=\"onChangeSideWidth()\"\n              ></extend-input>\n            </div>\n            <!-- <div nz-col [nzSpan]=\"12\">\n              <div style=\"margin-bottom: 5px\">Theme color:</div>\n              <nz-color-picker\n                nzShowText\n                [ngModel]=\"\n                  profileService.userProfile[profileService.KEY_THEME_COLOR] ||\n                  profileService.themecf[profileService.KEY_THEME_COLOR] ||\n                  profileService.DEFAULT_THEME_COLOR\n                \"\n                (ngModelChange)=\"\n                  profileService.updateUserProfile(profileService.KEY_THEME_COLOR, $event); profileService.loadTheme()\n                \"\n              ></nz-color-picker>\n            </div> -->\n            <!-- <div nz-col [nzSpan]=\"12\">\n              <div style=\"margin-bottom: 5px\">Theme menu color:</div>\n              <nz-color-picker\n                nzShowText\n                [ngModel]=\"\n                  profileService.userProfile[profileService.KEY_THEME_MENU_COLOR] ||\n                  profileService.themecf[profileService.KEY_THEME_MENU_COLOR] ||\n                  profileService.DEFAULT_THEME_MENU_COLOR\n                \"\n                (ngModelChange)=\"\n                  profileService.updateUserProfile(profileService.KEY_THEME_MENU_COLOR, $event);\n                  profileService.loadTheme()\n                \"\n              ></nz-color-picker>\n            </div> -->\n            <!-- <div nz-col [nzSpan]=\"24\">\n              <button nz-button nzType=\"default\" nzDanger nzBlock (click)=\"resetTheme()\">Reset Theme M\u1EB7c \u0111\u1ECBnh</button>\n            </div> -->\n          </div>\n        </div>\n      </nz-tab>\n\n      <!-- TAB 2: T\u00C0I LI\u1EC6U HDSD -->\n      <nz-tab nzTitle=\"T\u00E0i li\u1EC7u HDSD\">\n        <nz-spin [nzSpinning]=\"loadingHDSD\">\n          <nz-table [nzData]=\"hdsdData?.LstItem || []\" [nzBordered]=\"true\" [nzShowPagination]=\"false\" nzSize=\"small\">\n            <thead>\n              <tr>\n                <th>N\u1ED9i dung</th>\n                <th nzWidth=\"120px\">\u0110\u00EDnh k\u00E8m</th>\n                <th nzWidth=\"100px\">C\u1EADp nh\u1EADt</th>\n              </tr>\n            </thead>\n            <tbody>\n              @for (row of hdsdData?.LstItem || []; track row.App_File_Id) {\n                <tr>\n                  <td>{{ row.FileName || \"-\" }}</td>\n                  <td>\n                    <a (click)=\"downloadHDSD(row)\"><nz-icon nzType=\"paper-clip\" /> T\u1EA3i v\u1EC1</a>\n                  </td>\n                  <td>{{ row.UpdateDate || row.CreateDate | date: \"dd/MM/yyyy\" }}</td>\n                </tr>\n              }\n            </tbody>\n          </nz-table>\n        </nz-spin>\n      </nz-tab>\n    </nz-tabset>\n  </ng-container>\n</nz-drawer>\n\n<!-- ============================================== -->\n<!-- MODAL \u0110\u1ED4I M\u1EACT KH\u1EA8U                             -->\n<!-- ============================================== -->\n<nz-modal\n  [(nzVisible)]=\"isPasswordModalVisible\"\n  nzTitle=\"\u0110\u1ED5i m\u1EADt kh\u1EA9u\"\n  [nzFooter]=\"null\"\n  (nzOnCancel)=\"closePasswordModal()\"\n>\n  <ng-container *nzModalContent>\n    <form [formGroup]=\"passwordForm\" (ngSubmit)=\"submitPasswordChange()\" nz-form nzLayout=\"vertical\">\n      <nz-form-item>\n        <nz-form-label nzRequired>M\u1EADt kh\u1EA9u hi\u1EC7n t\u1EA1i</nz-form-label>\n        <nz-form-control [nzErrorTip]=\"'B\u1EAFt bu\u1ED9c nh\u1EADp'\">\n          <nz-input-group [nzSuffix]=\"CurrentPasswordVisible ? suffixShowCurrent : suffixHideCurrent\">\n            <input nz-input type=\"{{ CurrentPasswordType }}\" formControlName=\"CurrentPassword\" />\n          </nz-input-group>\n          <ng-template #suffixShowCurrent\n            ><nz-icon\n              nzType=\"eye\"\n              (click)=\"CurrentPasswordVisible = !CurrentPasswordVisible; CurrentPasswordType = 'password'\"\n          /></ng-template>\n          <ng-template #suffixHideCurrent\n            ><nz-icon\n              nzType=\"eye-invisible\"\n              (click)=\"CurrentPasswordVisible = !CurrentPasswordVisible; CurrentPasswordType = 'text'\"\n          /></ng-template>\n        </nz-form-control>\n      </nz-form-item>\n\n      <nz-form-item>\n        <nz-form-label nzRequired>M\u1EADt kh\u1EA9u m\u1EDBi</nz-form-label>\n        <nz-form-control [nzErrorTip]=\"NewPasswordErrorTpl\">\n          <nz-input-group [nzSuffix]=\"NewPasswordVisible ? suffixShowNew : suffixHideNew\">\n            <input nz-input type=\"{{ NewPasswordType }}\" formControlName=\"NewPassword\" />\n          </nz-input-group>\n          <ng-template #suffixShowNew\n            ><nz-icon nzType=\"eye\" (click)=\"NewPasswordVisible = !NewPasswordVisible; NewPasswordType = 'password'\"\n          /></ng-template>\n          <ng-template #suffixHideNew\n            ><nz-icon\n              nzType=\"eye-invisible\"\n              (click)=\"NewPasswordVisible = !NewPasswordVisible; NewPasswordType = 'text'\"\n          /></ng-template>\n          <ng-template #NewPasswordErrorTpl let-control>\n            @if (control.errors?.[\"required\"]) {\n              B\u1EAFt bu\u1ED9c nh\u1EADp\n            }\n            @if (control.errors?.[\"minlength\"]) {\n              T\u1ED1i thi\u1EC3u 6 k\u00FD t\u1EF1\n            }\n          </ng-template>\n        </nz-form-control>\n      </nz-form-item>\n\n      <nz-form-item>\n        <nz-form-label nzRequired>X\u00E1c nh\u1EADn m\u1EADt kh\u1EA9u m\u1EDBi</nz-form-label>\n        <nz-form-control [nzErrorTip]=\"ConfirmPasswordErrorTpl\">\n          <nz-input-group [nzSuffix]=\"ConfirmPasswordVisible ? suffixShowConfirm : suffixHideConfirm\">\n            <input nz-input type=\"{{ ConfirmPasswordType }}\" formControlName=\"ConfirmPassword\" />\n          </nz-input-group>\n          <ng-template #suffixShowConfirm\n            ><nz-icon\n              nzType=\"eye\"\n              (click)=\"ConfirmPasswordVisible = !ConfirmPasswordVisible; ConfirmPasswordType = 'password'\"\n          /></ng-template>\n          <ng-template #suffixHideConfirm\n            ><nz-icon\n              nzType=\"eye-invisible\"\n              (click)=\"ConfirmPasswordVisible = !ConfirmPasswordVisible; ConfirmPasswordType = 'text'\"\n          /></ng-template>\n          <ng-template #ConfirmPasswordErrorTpl let-control>\n            @if (control.errors?.[\"required\"]) {\n              B\u1EAFt bu\u1ED9c nh\u1EADp\n            }\n            @if (control.errors?.[\"passwordMismatch\"]) {\n              M\u1EADt kh\u1EA9u kh\u00F4ng kh\u1EDBp\n            }\n          </ng-template>\n        </nz-form-control>\n      </nz-form-item>\n\n      <div nz-row nzJustify=\"end\">\n        <button nz-button type=\"button\" (click)=\"closePasswordModal()\" style=\"margin-right: 8px\">H\u1EE7y</button>\n        <button nz-button nzType=\"primary\">L\u01B0u thay \u0111\u1ED5i</button>\n      </div>\n    </form>\n  </ng-container>\n</nz-modal>\n", styles: ["@charset \"UTF-8\";.org-info,.user-info{font-weight:600}.user-info:hover,.org-info:hover{background-color:#ffffff26}.drawer-profile-header{display:flex;align-items:center;padding-bottom:20px;border-bottom:1px solid #f0f0f0;margin-bottom:10px}.drawer-profile-header .profile-avatar{width:50px;height:50px;border-radius:50%;background-color:#f0f5ff;color:#1890ff;display:flex;justify-content:center;align-items:center;font-size:24px;margin-right:15px}.drawer-profile-header .profile-info{flex:1;overflow:hidden}.drawer-profile-header .profile-info .profile-name{margin:0;font-size:16px;font-weight:600;color:#262626;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.drawer-profile-header .profile-info .profile-org{margin:4px 0 0;font-size:13px;color:#8c8c8c;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.drawer-profile-header .profile-info .profile-org i{margin-right:4px}.setting-container{padding:10px 0}.setting-container .setting-row{background:#fafafa;padding:12px 16px;border-radius:8px;margin-bottom:15px}\n"] }]
         }] });
 
 class HeaderSearchComponent extends BaseOverlayComponent {
@@ -14802,7 +15055,7 @@ class SideMenuComponent extends BaseComponent {
     currentHeaderId = '';
     onClickToMenu = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SideMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: SideMenuComponent, isStandalone: true, selector: "side-menu", inputs: { filteredLstMenu: "filteredLstMenu", currentHeaderId: "currentHeaderId" }, outputs: { onClickToMenu: "onClickToMenu" }, usesInheritance: true, ngImport: i0, template: "<ul class=\"side-menu-wrapper\" nz-menu nzMode=\"inline\" [nzInlineIndent]=\"12\">\n  @for (menuLv1 of filteredLstMenu; track menuLv1.App_Menu_Id) {\n    @if (menuLv1.SubMenu?.length) {\n      <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\n        @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\n          @if (menuLv2.SubMenu?.length) {\n            <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\n              @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\n                @if (menuLv3.SubMenu?.length) {\n                  <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\n                    @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\n                      @if (menuLv4.SubMenu?.length) {\n                        <ul nz-submenu [nzOpen]=\"menuLv4.Open\" [nzTitle]=\"menuLv4.Name\" [nzIcon]=\"menuLv4.Icon\">\n                          @for (menuLv5 of menuLv4.SubMenu; track menuLv5.App_Menu_Id) {}\n                        </ul>\n                      } @else {\n                        <li nz-menu-item nzMatchRouter>\n                          <nz-icon *ngIf=\"menuLv4.Icon\" [nzType]=\"menuLv4.Icon\"></nz-icon>\n                          <box [width]=\"2\"></box>\n                          <a\n                            [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv4.Url\"\n                            (click)=\"onClickToMenu.emit()\"\n                          >\n                            {{ menuLv4.Name }}\n                          </a>\n                        </li>\n                      }\n                    }\n                  </ul>\n                } @else {\n                  <li nz-menu-item nzMatchRouter>\n                    <nz-icon *ngIf=\"menuLv3.Icon\" [nzType]=\"menuLv3.Icon\"></nz-icon><box [width]=\"2\"></box>\n                    <a\n                      [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv3.Url\"\n                      (click)=\"onClickToMenu.emit()\"\n                    >\n                      {{ menuLv3.Name }}\n                    </a>\n                  </li>\n                }\n              }\n            </ul>\n          } @else {\n            <li nz-menu-item nzMatchRouter>\n              <nz-icon *ngIf=\"menuLv2.Icon\" [nzType]=\"menuLv2.Icon\"></nz-icon><box [width]=\"2\"></box>\n              <a\n                [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv2.Url\"\n                (click)=\"onClickToMenu.emit()\"\n              >\n                {{ menuLv2.Name }}\n              </a>\n            </li>\n          }\n        }\n      </ul>\n    } @else {\n      <li nz-menu-item nzMatchRouter>\n        <nz-icon *ngIf=\"menuLv1.Icon\" [nzType]=\"menuLv1.Icon\"></nz-icon><box [width]=\"2\"></box>\n        <a\n          [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv1.Url\"\n          (click)=\"onClickToMenu.emit()\"\n        >\n          {{ menuLv1.Name }}\n        </a>\n      </li>\n    }\n  }\n</ul>\n", styles: ["@charset \"UTF-8\";.side-menu-wrapper .ant-menu-item{margin:0;font-weight:500}.side-menu-wrapper .ant-menu-item a{color:var(--app-text)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NzMenuModule }, { kind: "directive", type: i4$2.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$2.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "component", type: i4$2.NzSubMenuComponent, selector: "[nz-submenu]", inputs: ["nzMenuClassName", "nzPaddingLeft", "nzTitle", "nzIcon", "nzTriggerSubMenuAction", "nzOpen", "nzDisabled", "nzPlacement"], outputs: ["nzOpenChange"], exportAs: ["nzSubmenu"] }, { 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: RouterModule }, { kind: "directive", type: i1$7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: SideMenuComponent, isStandalone: true, selector: "side-menu", inputs: { filteredLstMenu: "filteredLstMenu", currentHeaderId: "currentHeaderId" }, outputs: { onClickToMenu: "onClickToMenu" }, usesInheritance: true, ngImport: i0, template: "<ul class=\"side-menu-wrapper\" nz-menu nzMode=\"inline\" [nzInlineIndent]=\"12\">\n  @for (menuLv1 of filteredLstMenu; track menuLv1.App_Menu_Id) {\n    @if (menuLv1.SubMenu?.length) {\n      <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\n        @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\n          @if (menuLv2.SubMenu?.length) {\n            <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\n              @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\n                @if (menuLv3.SubMenu?.length) {\n                  <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\n                    @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\n                      @if (menuLv4.SubMenu?.length) {\n                        <ul nz-submenu [nzOpen]=\"menuLv4.Open\" [nzTitle]=\"menuLv4.Name\" [nzIcon]=\"menuLv4.Icon\">\n                          @for (menuLv5 of menuLv4.SubMenu; track menuLv5.App_Menu_Id) {}\n                        </ul>\n                      } @else {\n                        <li nz-menu-item nzMatchRouter>\n                          <nz-icon *ngIf=\"menuLv4.Icon\" [nzType]=\"menuLv4.Icon\"></nz-icon>\n                          <box [width]=\"2\"></box>\n                          <a\n                            [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv4.Url\"\n                            (click)=\"onClickToMenu.emit()\"\n                          >\n                            {{ menuLv4.Name }}\n                          </a>\n                        </li>\n                      }\n                    }\n                  </ul>\n                } @else {\n                  <li nz-menu-item nzMatchRouter>\n                    <nz-icon *ngIf=\"menuLv3.Icon\" [nzType]=\"menuLv3.Icon\"></nz-icon><box [width]=\"2\"></box>\n                    <a\n                      [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv3.Url\"\n                      (click)=\"onClickToMenu.emit()\"\n                    >\n                      {{ menuLv3.Name }}\n                    </a>\n                  </li>\n                }\n              }\n            </ul>\n          } @else {\n            <li nz-menu-item nzMatchRouter>\n              <nz-icon *ngIf=\"menuLv2.Icon\" [nzType]=\"menuLv2.Icon\"></nz-icon><box [width]=\"2\"></box>\n              <a\n                [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv2.Url\"\n                (click)=\"onClickToMenu.emit()\"\n              >\n                {{ menuLv2.Name }}\n              </a>\n            </li>\n          }\n        }\n      </ul>\n    } @else {\n      <li nz-menu-item nzMatchRouter>\n        <nz-icon *ngIf=\"menuLv1.Icon\" [nzType]=\"menuLv1.Icon\"></nz-icon><box [width]=\"2\"></box>\n        <a\n          [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv1.Url\"\n          (click)=\"onClickToMenu.emit()\"\n        >\n          {{ menuLv1.Name }}\n        </a>\n      </li>\n    }\n  }\n</ul>\n", styles: ["@charset \"UTF-8\";.side-menu-wrapper .ant-menu-item{margin:0;font-weight:500}.side-menu-wrapper .ant-menu-item a{color:var(--app-text)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NzMenuModule }, { kind: "directive", type: i4$2.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$2.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "component", type: i4$2.NzSubMenuComponent, selector: "[nz-submenu]", inputs: ["nzMenuClassName", "nzPaddingLeft", "nzTitle", "nzIcon", "nzTriggerSubMenuAction", "nzOpen", "nzDisabled", "nzPlacement"], outputs: ["nzOpenChange"], exportAs: ["nzSubmenu"] }, { 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: RouterModule }, { kind: "directive", type: i1$8.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SideMenuComponent, decorators: [{
             type: Component,
@@ -15255,7 +15508,7 @@ class LayoutComponent extends BaseComponent {
         this.cdr.detectChanges();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LayoutComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: LayoutComponent, isStandalone: true, selector: "layout", viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<nz-layout class=\"app-layout\">\n  <nz-header class=\"app-header\">\n    <div nz-row nzAlign=\"middle\" class=\"header-content\">\n      @if (isCollapsed) {\n        <div @fadeInOut>\n          &nbsp;\n          <button nz-button nzType=\"text\" style=\"color: var(--theme-text-color)\" (click)=\"visibleMenuDrawer = true\">\n            <nz-icon nzType=\"menu\" nzTheme=\"outline\" />\n          </button>\n        </div>\n      }\n\n      <div\n        class=\"header-logo\"\n        [style.width]=\"!isCollapsed ? siderWidthStorage : 'auto'\"\n        [style.padding-right]=\"!isCollapsed ? '0' : '16px'\"\n      >\n        <div nz-flex nzJustify=\"center\" nzGap=\"small\" style=\"line-height: var(--app-header-height)\">\n          <img\n            *ngIf=\"logoUrl$ | async as url\"\n            [src]=\"url\"\n            style=\"padding: 4px; height: var(--app-header-height)\"\n            hideIfError\n          />\n          @if (SYSTEM_NAME) {\n            <h2 style=\"color: whitesmoke; margin-bottom: 0\">{{ SYSTEM_NAME }}</h2>\n          } @else {\n            -- o0o --\n          }\n        </div>\n      </div>\n\n      <!-- header menu -->\n      <div nz-col nzFlex=\"auto\" class=\"header-menu\" style=\"min-width: 0\" #menuContainer>\n        <ul\n          nz-menu\n          nzTheme=\"light\"\n          nzMode=\"horizontal\"\n          style=\"display: flex; flex-wrap: nowrap; border-bottom: none; line-height: var(--app-header-height)\"\n        >\n          @for (item of visibleMenus; track item) {\n            <li\n              nz-menu-item\n              [nzSelected]=\"this.currentHeaderId === item.App_Menu_Id\"\n              (click)=\"handleValueChangeHeaderMenu(item)\"\n            >\n              <nz-icon *ngIf=\"item.Icon\" [nzType]=\"item.Icon\"></nz-icon><box [width]=\"4\"></box>{{ item.Name }}\n            </li>\n          }\n\n          @if (hiddenMenus.length > 0) {\n            <li nz-submenu nzTitle=\". . .\" style=\"padding: 0 16px\">\n              <ul>\n                @for (item of hiddenMenus; track item) {\n                  <li\n                    nz-menu-item\n                    [nzSelected]=\"this.currentHeaderId === item.App_Menu_Id\"\n                    (click)=\"handleValueChangeHeaderMenu(item)\"\n                  >\n                    <nz-icon *ngIf=\"item.Icon\" [nzType]=\"item.Icon\"></nz-icon><box [width]=\"4\"></box>{{ item.Name }}\n                  </li>\n                }\n              </ul>\n            </li>\n          }\n        </ul>\n      </div>\n\n      <div style=\"display: flex; align-items: center; flex-shrink: 0; gap: 8px; padding-right: 16px\">\n        <header-search></header-search>\n        <app-notification-center></app-notification-center>\n        <header-user></header-user>\n      </div>\n    </div>\n  </nz-header>\n  <nz-layout class=\"body-layout\">\n    <nz-sider\n      [class.hide-side-menu]=\"LayoutComponent.noShowSideMenu\"\n      class=\"menu-sidebar\"\n      nzCollapsible\n      [nzWidth]=\"siderWidth\"\n      [nzCollapsedWidth]=\"0\"\n      [(nzCollapsed)]=\"isCollapsed\"\n      [nzTrigger]=\"null\"\n      [nzTheme]=\"'dark'\"\n    >\n      <div class=\"menu-wapper\">\n        @if (MENU_TYPE == 1) {\n          <div class=\"nz-tree-wapper\">\n            <nz-tree\n              [nzData]=\"nodes\"\n              [nzSearchValue]=\"searchValue\"\n              [nzHideUnMatched]=\"true\"\n              [nzShowLine]=\"true\"\n              [nzSelectedKeys]=\"selectedKeys\"\n              [nzExpandedKeys]=\"expandedKeys\"\n              (nzClick)=\"nzEvent($event)\"\n            ></nz-tree>\n          </div>\n        } @else {\n          <div class=\"nz-tree-wapper\">\n            <side-menu [filteredLstMenu]=\"filteredLstMenu\" [currentHeaderId]=\"currentHeaderId\"></side-menu>\n          </div>\n        }\n\n        <nz-input-group [nzSuffix]=\"suffixTemplate\">\n          <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\n        </nz-input-group>\n        <ng-template #suffixTemplate>\n          <span class=\"suffix-wrap\">\n            <icon-delete\n              class=\"suffix-icon delete\"\n              [class.show]=\"searchValue\"\n              [size]=\"14\"\n              (click)=\"searchValue = ''\"\n            ></icon-delete>\n\n            <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\n          </span>\n        </ng-template>\n      </div>\n      <div class=\"sider-footer\" style=\"height: var(--app-footer-height)\">\n        <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 10px; color: lightgray\">\n          {{ SYSTEM_SUB_NAME_LEFT || \"-- o0o --\" }}\n\n          <span style=\"float: right\" (click)=\"triggerCollapse()\">\n            <nz-icon class=\"trigger\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" nz-tooltip=\"\u1EA8n menu\" />\n          </span>\n        </div>\n      </div>\n    </nz-sider>\n    <nz-layout class=\"main-layout\">\n      <nz-content class=\"content\">\n        <div class=\"inner-content\">\n          @if (!LayoutComponent.noShowBreadcrumb) {\n            <app-breadcrumb [@fadeInOut] nz-col nzFlex=\"auto\"></app-breadcrumb>\n          }\n          <router-outlet></router-outlet>\n        </div>\n        <div nz-row class=\"sider-footer\" style=\"height: var(--app-footer-height)\">\n          <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 10px; color: lightgray\">\n            {{ SYSTEM_SUB_NAME_RIGHT || \"-- o0o --\" }}\n          </div>\n        </div>\n        <!-- <nz-back-top [nzTarget]=\"'.content'\" [nzVisibilityHeight]=\"500\"></nz-back-top> -->\n      </nz-content>\n    </nz-layout>\n  </nz-layout>\n</nz-layout>\n\n<nz-drawer\n  [nzWrapClassName]=\"'same-theme-color menu-drawer'\"\n  [nzWidth]=\"350\"\n  [nzClosable]=\"false\"\n  [(nzVisible)]=\"visibleMenuDrawer\"\n  [nzMaskClosable]=\"true\"\n  nzPlacement=\"left\"\n  nzTitle=\"\"\n  (nzOnClose)=\"closeMenuDrawer()\"\n>\n  <ng-container *nzDrawerContent>\n    <div class=\"menu-wapper\">\n      @if (MENU_TYPE == 1) {\n        <div class=\"nz-tree-wapper in-drawer\">\n          <nz-tree\n            [nzData]=\"nodes\"\n            [nzSearchValue]=\"searchValue\"\n            [nzHideUnMatched]=\"true\"\n            [nzShowLine]=\"true\"\n            [nzSelectedKeys]=\"selectedKeys\"\n            [nzExpandedKeys]=\"expandedKeys\"\n            (nzClick)=\"nzEvent($event)\"\n          ></nz-tree>\n        </div>\n      } @else {\n        <div class=\"nz-tree-wapper in-drawer\">\n          <side-menu\n            [filteredLstMenu]=\"filteredLstMenu\"\n            [currentHeaderId]=\"currentHeaderId\"\n            (onClickToMenu)=\"visibleMenuDrawer = false\"\n          ></side-menu>\n        </div>\n      }\n\n      <nz-input-group [nzSuffix]=\"suffixTemplate\" [nzAddOnAfter]=\"afterTemplate\">\n        <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\n      </nz-input-group>\n      <ng-template #suffixTemplate>\n        <span class=\"suffix-wrap\">\n          <icon-delete\n            class=\"suffix-icon delete\"\n            [class.show]=\"searchValue\"\n            [size]=\"14\"\n            (click)=\"searchValue = ''\"\n          ></icon-delete>\n\n          <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\n        </span>\n      </ng-template>\n      <ng-template #afterTemplate>\n        <button nz-button (click)=\"triggerCollapse(); this.visibleMenuDrawer = false\">\n          <nz-icon *ngIf=\"isCollapsed\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" />\n        </button>\n      </ng-template>\n    </div>\n  </ng-container>\n</nz-drawer>\n<app-global-spinner></app-global-spinner>\n", styles: ["@charset \"UTF-8\";:host{display:flex;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bg-sidebar: #f0f2f5;--bg-content: #fff;--bg-inner: #fff;--border-color: transparent;--text-main: rgba(0, 0, 0, .85)}:host-context(.dark-theme),:host(.dark-theme){--theme-color: #303030 !important;--theme-text-color: #e1e1e1 !important;--bg-sidebar: #262626;--bg-content: #1f1f1f;--bg-inner: #1f1f1f;--border-color: #424242;--text-main: #e1e1e1}html,body,app-root{height:100%;margin:0}.app-layout{display:flex;flex-direction:column;height:100vh}.app-header{position:fixed;top:0;left:0;width:100%;height:var(--app-header-height);background:var(--theme-color);color:var(--theme-text-color);box-shadow:0 1px 4px #00152914;z-index:1000;display:flex;align-items:center;padding:0;border-bottom:1px solid var(--border-color);transition:background-color .3s ease}.header-content{width:100%;flex-wrap:nowrap!important}.header-logo{height:var(--app-header-height);text-align:center;color:var(--theme-text-color);transition:width .3s;flex-shrink:0;overflow:hidden}.body-layout{display:flex;flex:1;margin-top:var(--app-header-height);height:calc(100vh - var(--app-header-height));overflow:hidden}.menu-sidebar{width:256px;background:#f0f2f5;overflow-y:auto;overflow-x:hidden;transition:all .3s cubic-bezier(.25,.8,.25,1)!important;min-height:calc(100vh - var(--app-header-height))}.menu-sidebar.hide-side-menu{flex:0 0 0px!important;max-width:0px!important;min-width:0px!important;width:0px!important}.menu-wapper{min-height:calc(100% - var(--app-footer-height))}.main-layout{display:flex;flex-direction:column;flex:1;overflow:hidden}.content{flex:1;background:var(--bg-content);overflow-x:hidden;overflow-y:auto;height:100%}.inner-content{background:var(--bg-inner);color:var(--text-main);min-height:calc(100% - var(--app-footer-height));padding:8px;box-sizing:border-box}.content-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:center}.sider-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:right}.trigger{margin-right:8px}.menu-sidebar .ant-menu-inline .ant-menu-item{margin-top:0;margin-bottom:0}::ng-deep .menu-wapper .anticon-file{display:none}:host ::ng-deep .ant-back-top{right:30px;bottom:40px}::ng-deep .same-theme-color .ant-drawer-content{background:var(--theme-menu-color)}.nz-tree-wapper{height:calc(100vh - var(--app-header-height) - var(--app-footer-height) - 32px);overflow-y:auto}.nz-tree-wapper.in-drawer{height:calc(100vh - 32px);overflow-y:auto}::ng-deep .menu-drawer .ant-drawer-body{padding:0}::ng-deep .ant-breadcrumb-link{cursor:pointer}::ng-deep .breadcrumb-header .ant-breadcrumb-link{color:var(--theme-text-color);cursor:pointer}::ng-deep .breadcrumb-header .ant-breadcrumb-separator{color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item:not(.ant-segmented-item-selected){color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item{border-left:1px solid}::ng-deep .header-menu .ant-segmented-item:last-child{border-right:1px solid}.suffix-wrap{position:relative;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}.suffix-icon{position:absolute;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .18s cubic-bezier(.4,0,.2,1);transform:scale(.6) translate(4px)}.suffix-icon.show{opacity:1;pointer-events:auto;transform:scale(1) translate(0)}.search{color:#00000073}.delete{color:#bfbfbf}.delete.show{animation:popIn .18s ease}::ng-deep .header-menu .ant-menu-horizontal{background-color:transparent!important;border-bottom:none!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu{color:var(--theme-text-color)!important;opacity:.85;font-weight:600}::ng-deep .header-menu .ant-menu-submenu-title .anticon{color:var(--theme-text-color)!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item:hover,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu:hover,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item-selected,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-open,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-selected{color:var(--theme-text-color)!important;opacity:1;background-color:#ffffff1a!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item:hover:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu:hover:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item-selected:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-open:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-selected:after{border-bottom-color:#40a9ff!important}@keyframes popIn{0%{transform:scale(.5)}70%{transform:scale(1.15)}to{transform:scale(1)}}:host-context(.dark-theme) .content-footer,:host-context(.dark-theme) .sider-footer{background-color:var(--bg-sidebar);border-top:1px solid var(--border-color)}:host-context(.dark-theme) ::ng-deep .menu-sidebar .ant-tree,:host-context(.dark-theme) ::ng-deep .menu-drawer .ant-tree{background:transparent;color:var(--text-main)}:host-context(.dark-theme) ::ng-deep .ant-tree-node-content-wrapper:hover{background-color:#ffffff14!important}:host-context(.dark-theme) ::ng-deep .ant-tree-node-selected{background-color:#ffffff1f!important;color:#fff!important}:host-context(.dark-theme) ::ng-deep .menu-wapper .ant-input,:host-context(.dark-theme) ::ng-deep .menu-wapper .ant-input-group-addon{background-color:var(--bg-content);border-color:var(--border-color);color:var(--text-main)}:host-context(.dark-theme) ::ng-deep .menu-wapper .search,:host-context(.dark-theme) ::ng-deep .menu-wapper .delete{color:#8c8c8c}:host-context(.dark-theme) ::ng-deep .breadcrumb-header .ant-breadcrumb-link,:host-context(.dark-theme) ::ng-deep .breadcrumb-header .ant-breadcrumb-separator{color:#8c8c8c!important}:host-context(.dark-theme) ::ng-deep .breadcrumb-header .ant-breadcrumb-link:hover{color:var(--text-main)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: NzLayoutModule }, { kind: "component", type: i2$5.NzLayoutComponent, selector: "nz-layout", exportAs: ["nzLayout"] }, { kind: "component", type: i2$5.NzHeaderComponent, selector: "nz-header", exportAs: ["nzHeader"] }, { kind: "component", type: i2$5.NzContentComponent, selector: "nz-content", exportAs: ["nzContent"] }, { kind: "component", type: i2$5.NzSiderComponent, selector: "nz-sider", inputs: ["nzWidth", "nzTheme", "nzCollapsedWidth", "nzBreakpoint", "nzZeroTrigger", "nzTrigger", "nzReverseArrow", "nzCollapsible", "nzCollapsed"], outputs: ["nzCollapsedChange"], exportAs: ["nzSider"] }, { 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: "ngmodule", type: NzDropDownModule }, { kind: "directive", type: i4$2.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$2.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "component", type: i4$2.NzSubMenuComponent, selector: "[nz-submenu]", inputs: ["nzMenuClassName", "nzPaddingLeft", "nzTitle", "nzIcon", "nzTriggerSubMenuAction", "nzOpen", "nzDisabled", "nzPlacement"], outputs: ["nzOpenChange"], exportAs: ["nzSubmenu"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.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: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵ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: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "component", type: Breadcrumb, selector: "app-breadcrumb" }, { kind: "ngmodule", type: NzTreeModule }, { kind: "component", type: i10.NzTreeComponent, selector: "nz-tree", inputs: ["nzShowIcon", "nzHideUnMatched", "nzBlockNode", "nzExpandAll", "nzSelectMode", "nzCheckStrictly", "nzShowExpand", "nzShowLine", "nzCheckable", "nzAsyncData", "nzDraggable", "nzMultiple", "nzExpandedIcon", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualHeight", "nzTreeTemplate", "nzBeforeDrop", "nzData", "nzExpandedKeys", "nzSelectedKeys", "nzCheckedKeys", "nzSearchValue", "nzSearchFunc"], outputs: ["nzExpandedKeysChange", "nzSelectedKeysChange", "nzCheckedKeysChange", "nzSearchValueChange", "nzClick", "nzDblClick", "nzContextMenu", "nzCheckboxChange", "nzExpandChange", "nzOnDragStart", "nzOnDragEnter", "nzOnDragOver", "nzOnDragLeave", "nzOnDrop", "nzOnDragEnd"], exportAs: ["nzTree"] }, { kind: "ngmodule", type: NzBackTopModule }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "component", type: i3$6.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: i3$6.NzDrawerContentDirective, selector: "[nzDrawerContent]", exportAs: ["nzDrawerContent"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i6.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i6.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "ngmodule", type: NzSegmentedModule }, { kind: "component", type: LayoutUser, selector: "header-user" }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconSearch, selector: "icon-search", inputs: ["size"], outputs: ["click"] }, { kind: "directive", type: HideIfErrorDirective, selector: "img[hideIfError]" }, { kind: "component", type: NotificationCenterComponent, selector: "app-notification-center" }, { kind: "component", type: HeaderSearchComponent, selector: "header-search", inputs: ["searchValue"], outputs: ["searchValueChange", "onSearch"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i8.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: "ngmodule", type: NzMenuModule }, { kind: "component", type: SideMenuComponent, selector: "side-menu", inputs: ["filteredLstMenu", "currentHeaderId"], outputs: ["onClickToMenu"] }, { kind: "component", type: GlobalSpinnerComponent, selector: "app-global-spinner" }], animations: [fadeInOut] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: LayoutComponent, isStandalone: true, selector: "layout", viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<nz-layout class=\"app-layout\">\n  <nz-header class=\"app-header\">\n    <div nz-row nzAlign=\"middle\" class=\"header-content\">\n      @if (isCollapsed) {\n        <div @fadeInOut>\n          &nbsp;\n          <button nz-button nzType=\"text\" style=\"color: var(--theme-text-color)\" (click)=\"visibleMenuDrawer = true\">\n            <nz-icon nzType=\"menu\" nzTheme=\"outline\" />\n          </button>\n        </div>\n      }\n\n      <div\n        class=\"header-logo\"\n        [style.width]=\"!isCollapsed ? siderWidthStorage : 'auto'\"\n        [style.padding-right]=\"!isCollapsed ? '0' : '16px'\"\n      >\n        <div nz-flex nzJustify=\"center\" nzGap=\"small\" style=\"line-height: var(--app-header-height)\">\n          <img\n            *ngIf=\"logoUrl$ | async as url\"\n            [src]=\"url\"\n            style=\"padding: 4px; height: var(--app-header-height)\"\n            hideIfError\n          />\n          @if (SYSTEM_NAME) {\n            <h2 style=\"color: whitesmoke; margin-bottom: 0\">{{ SYSTEM_NAME }}</h2>\n          } @else {\n            -- o0o --\n          }\n        </div>\n      </div>\n\n      <!-- header menu -->\n      <div nz-col nzFlex=\"auto\" class=\"header-menu\" style=\"min-width: 0\" #menuContainer>\n        <ul\n          nz-menu\n          nzTheme=\"light\"\n          nzMode=\"horizontal\"\n          style=\"display: flex; flex-wrap: nowrap; border-bottom: none; line-height: var(--app-header-height)\"\n        >\n          @for (item of visibleMenus; track item) {\n            <li\n              nz-menu-item\n              [nzSelected]=\"this.currentHeaderId === item.App_Menu_Id\"\n              (click)=\"handleValueChangeHeaderMenu(item)\"\n            >\n              <nz-icon *ngIf=\"item.Icon\" [nzType]=\"item.Icon\"></nz-icon><box [width]=\"4\"></box>{{ item.Name }}\n            </li>\n          }\n\n          @if (hiddenMenus.length > 0) {\n            <li nz-submenu nzTitle=\". . .\" style=\"padding: 0 16px\">\n              <ul>\n                @for (item of hiddenMenus; track item) {\n                  <li\n                    nz-menu-item\n                    [nzSelected]=\"this.currentHeaderId === item.App_Menu_Id\"\n                    (click)=\"handleValueChangeHeaderMenu(item)\"\n                  >\n                    <nz-icon *ngIf=\"item.Icon\" [nzType]=\"item.Icon\"></nz-icon><box [width]=\"4\"></box>{{ item.Name }}\n                  </li>\n                }\n              </ul>\n            </li>\n          }\n        </ul>\n      </div>\n\n      <div style=\"display: flex; align-items: center; flex-shrink: 0; gap: 8px; padding-right: 16px\">\n        <header-search></header-search>\n        <app-notification-center></app-notification-center>\n        <header-user></header-user>\n      </div>\n    </div>\n  </nz-header>\n  <nz-layout class=\"body-layout\">\n    <nz-sider\n      [class.hide-side-menu]=\"LayoutComponent.noShowSideMenu\"\n      class=\"menu-sidebar\"\n      nzCollapsible\n      [nzWidth]=\"siderWidth\"\n      [nzCollapsedWidth]=\"0\"\n      [(nzCollapsed)]=\"isCollapsed\"\n      [nzTrigger]=\"null\"\n      [nzTheme]=\"'dark'\"\n    >\n      <div class=\"menu-wapper\">\n        @if (MENU_TYPE == 1) {\n          <div class=\"nz-tree-wapper\">\n            <nz-tree\n              [nzData]=\"nodes\"\n              [nzSearchValue]=\"searchValue\"\n              [nzHideUnMatched]=\"true\"\n              [nzShowLine]=\"true\"\n              [nzSelectedKeys]=\"selectedKeys\"\n              [nzExpandedKeys]=\"expandedKeys\"\n              (nzClick)=\"nzEvent($event)\"\n            ></nz-tree>\n          </div>\n        } @else {\n          <div class=\"nz-tree-wapper\">\n            <side-menu [filteredLstMenu]=\"filteredLstMenu\" [currentHeaderId]=\"currentHeaderId\"></side-menu>\n          </div>\n        }\n\n        <nz-input-group [nzSuffix]=\"suffixTemplate\">\n          <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\n        </nz-input-group>\n        <ng-template #suffixTemplate>\n          <span class=\"suffix-wrap\">\n            <icon-delete\n              class=\"suffix-icon delete\"\n              [class.show]=\"searchValue\"\n              [size]=\"14\"\n              (click)=\"searchValue = ''\"\n            ></icon-delete>\n\n            <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\n          </span>\n        </ng-template>\n      </div>\n      <div class=\"sider-footer\" style=\"height: var(--app-footer-height)\">\n        <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 10px; color: lightgray\">\n          {{ SYSTEM_SUB_NAME_LEFT || \"-- o0o --\" }}\n\n          <span style=\"float: right\" (click)=\"triggerCollapse()\">\n            <nz-icon class=\"trigger\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" nz-tooltip=\"\u1EA8n menu\" />\n          </span>\n        </div>\n      </div>\n    </nz-sider>\n    <nz-layout class=\"main-layout\">\n      <nz-content class=\"content\">\n        <div class=\"inner-content\">\n          @if (!LayoutComponent.noShowBreadcrumb) {\n            <app-breadcrumb [@fadeInOut] nz-col nzFlex=\"auto\"></app-breadcrumb>\n          }\n          <router-outlet></router-outlet>\n        </div>\n        <div nz-row class=\"sider-footer\" style=\"height: var(--app-footer-height)\">\n          <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 10px; color: lightgray\">\n            {{ SYSTEM_SUB_NAME_RIGHT || \"-- o0o --\" }}\n          </div>\n        </div>\n        <!-- <nz-back-top [nzTarget]=\"'.content'\" [nzVisibilityHeight]=\"500\"></nz-back-top> -->\n      </nz-content>\n    </nz-layout>\n  </nz-layout>\n</nz-layout>\n\n<nz-drawer\n  [nzWrapClassName]=\"'same-theme-color menu-drawer'\"\n  [nzWidth]=\"350\"\n  [nzClosable]=\"false\"\n  [(nzVisible)]=\"visibleMenuDrawer\"\n  [nzMaskClosable]=\"true\"\n  nzPlacement=\"left\"\n  nzTitle=\"\"\n  (nzOnClose)=\"closeMenuDrawer()\"\n>\n  <ng-container *nzDrawerContent>\n    <div class=\"menu-wapper\">\n      @if (MENU_TYPE == 1) {\n        <div class=\"nz-tree-wapper in-drawer\">\n          <nz-tree\n            [nzData]=\"nodes\"\n            [nzSearchValue]=\"searchValue\"\n            [nzHideUnMatched]=\"true\"\n            [nzShowLine]=\"true\"\n            [nzSelectedKeys]=\"selectedKeys\"\n            [nzExpandedKeys]=\"expandedKeys\"\n            (nzClick)=\"nzEvent($event)\"\n          ></nz-tree>\n        </div>\n      } @else {\n        <div class=\"nz-tree-wapper in-drawer\">\n          <side-menu\n            [filteredLstMenu]=\"filteredLstMenu\"\n            [currentHeaderId]=\"currentHeaderId\"\n            (onClickToMenu)=\"visibleMenuDrawer = false\"\n          ></side-menu>\n        </div>\n      }\n\n      <nz-input-group [nzSuffix]=\"suffixTemplate\" [nzAddOnAfter]=\"afterTemplate\">\n        <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\n      </nz-input-group>\n      <ng-template #suffixTemplate>\n        <span class=\"suffix-wrap\">\n          <icon-delete\n            class=\"suffix-icon delete\"\n            [class.show]=\"searchValue\"\n            [size]=\"14\"\n            (click)=\"searchValue = ''\"\n          ></icon-delete>\n\n          <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\n        </span>\n      </ng-template>\n      <ng-template #afterTemplate>\n        <button nz-button (click)=\"triggerCollapse(); this.visibleMenuDrawer = false\">\n          <nz-icon *ngIf=\"isCollapsed\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" />\n        </button>\n      </ng-template>\n    </div>\n  </ng-container>\n</nz-drawer>\n<app-global-spinner></app-global-spinner>\n", styles: ["@charset \"UTF-8\";:host{display:flex;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bg-sidebar: #f0f2f5;--bg-content: #fff;--bg-inner: #fff;--border-color: transparent;--text-main: rgba(0, 0, 0, .85)}:host-context(.dark-theme),:host(.dark-theme){--theme-color: #303030 !important;--theme-text-color: #e1e1e1 !important;--bg-sidebar: #262626;--bg-content: #1f1f1f;--bg-inner: #1f1f1f;--border-color: #424242;--text-main: #e1e1e1}html,body,app-root{height:100%;margin:0}.app-layout{display:flex;flex-direction:column;height:100vh}.app-header{position:fixed;top:0;left:0;width:100%;height:var(--app-header-height);background:var(--theme-color);color:var(--theme-text-color);box-shadow:0 1px 4px #00152914;z-index:1000;display:flex;align-items:center;padding:0;border-bottom:1px solid var(--border-color);transition:background-color .3s ease}.header-content{width:100%;flex-wrap:nowrap!important}.header-logo{height:var(--app-header-height);text-align:center;color:var(--theme-text-color);transition:width .3s;flex-shrink:0;overflow:hidden}.body-layout{display:flex;flex:1;margin-top:var(--app-header-height);height:calc(100vh - var(--app-header-height));overflow:hidden}.menu-sidebar{width:256px;background:#f0f2f5;overflow-y:auto;overflow-x:hidden;transition:all .3s cubic-bezier(.25,.8,.25,1)!important;min-height:calc(100vh - var(--app-header-height))}.menu-sidebar.hide-side-menu{flex:0 0 0px!important;max-width:0px!important;min-width:0px!important;width:0px!important}.menu-wapper{min-height:calc(100% - var(--app-footer-height))}.main-layout{display:flex;flex-direction:column;flex:1;overflow:hidden}.content{flex:1;background:var(--bg-content);overflow-x:hidden;overflow-y:auto;height:100%}.inner-content{background:var(--bg-inner);color:var(--text-main);min-height:calc(100% - var(--app-footer-height));padding:8px;box-sizing:border-box}.content-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:center}.sider-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:right}.trigger{margin-right:8px}.menu-sidebar .ant-menu-inline .ant-menu-item{margin-top:0;margin-bottom:0}::ng-deep .menu-wapper .anticon-file{display:none}:host ::ng-deep .ant-back-top{right:30px;bottom:40px}::ng-deep .same-theme-color .ant-drawer-content{background:var(--theme-menu-color)}.nz-tree-wapper{height:calc(100vh - var(--app-header-height) - var(--app-footer-height) - 32px);overflow-y:auto}.nz-tree-wapper.in-drawer{height:calc(100vh - 32px);overflow-y:auto}::ng-deep .menu-drawer .ant-drawer-body{padding:0}::ng-deep .ant-breadcrumb-link{cursor:pointer}::ng-deep .breadcrumb-header .ant-breadcrumb-link{color:var(--theme-text-color);cursor:pointer}::ng-deep .breadcrumb-header .ant-breadcrumb-separator{color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item:not(.ant-segmented-item-selected){color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item{border-left:1px solid}::ng-deep .header-menu .ant-segmented-item:last-child{border-right:1px solid}.suffix-wrap{position:relative;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}.suffix-icon{position:absolute;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .18s cubic-bezier(.4,0,.2,1);transform:scale(.6) translate(4px)}.suffix-icon.show{opacity:1;pointer-events:auto;transform:scale(1) translate(0)}.search{color:#00000073}.delete{color:#bfbfbf}.delete.show{animation:popIn .18s ease}::ng-deep .header-menu .ant-menu-horizontal{background-color:transparent!important;border-bottom:none!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu{color:var(--theme-text-color)!important;opacity:.85;font-weight:600}::ng-deep .header-menu .ant-menu-submenu-title .anticon{color:var(--theme-text-color)!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item:hover,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu:hover,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item-selected,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-open,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-selected{color:var(--theme-text-color)!important;opacity:1;background-color:#ffffff1a!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item:hover:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu:hover:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item-selected:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-open:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-selected:after{border-bottom-color:#40a9ff!important}@keyframes popIn{0%{transform:scale(.5)}70%{transform:scale(1.15)}to{transform:scale(1)}}:host-context(.dark-theme) .content-footer,:host-context(.dark-theme) .sider-footer{background-color:var(--bg-sidebar);border-top:1px solid var(--border-color)}:host-context(.dark-theme) ::ng-deep .menu-sidebar .ant-tree,:host-context(.dark-theme) ::ng-deep .menu-drawer .ant-tree{background:transparent;color:var(--text-main)}:host-context(.dark-theme) ::ng-deep .ant-tree-node-content-wrapper:hover{background-color:#ffffff14!important}:host-context(.dark-theme) ::ng-deep .ant-tree-node-selected{background-color:#ffffff1f!important;color:#fff!important}:host-context(.dark-theme) ::ng-deep .menu-wapper .ant-input,:host-context(.dark-theme) ::ng-deep .menu-wapper .ant-input-group-addon{background-color:var(--bg-content);border-color:var(--border-color);color:var(--text-main)}:host-context(.dark-theme) ::ng-deep .menu-wapper .search,:host-context(.dark-theme) ::ng-deep .menu-wapper .delete{color:#8c8c8c}:host-context(.dark-theme) ::ng-deep .breadcrumb-header .ant-breadcrumb-link,:host-context(.dark-theme) ::ng-deep .breadcrumb-header .ant-breadcrumb-separator{color:#8c8c8c!important}:host-context(.dark-theme) ::ng-deep .breadcrumb-header .ant-breadcrumb-link:hover{color:var(--text-main)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: NzLayoutModule }, { kind: "component", type: i2$5.NzLayoutComponent, selector: "nz-layout", exportAs: ["nzLayout"] }, { kind: "component", type: i2$5.NzHeaderComponent, selector: "nz-header", exportAs: ["nzHeader"] }, { kind: "component", type: i2$5.NzContentComponent, selector: "nz-content", exportAs: ["nzContent"] }, { kind: "component", type: i2$5.NzSiderComponent, selector: "nz-sider", inputs: ["nzWidth", "nzTheme", "nzCollapsedWidth", "nzBreakpoint", "nzZeroTrigger", "nzTrigger", "nzReverseArrow", "nzCollapsible", "nzCollapsed"], outputs: ["nzCollapsedChange"], exportAs: ["nzSider"] }, { 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: "ngmodule", type: NzDropDownModule }, { kind: "directive", type: i4$2.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$2.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "component", type: i4$2.NzSubMenuComponent, selector: "[nz-submenu]", inputs: ["nzMenuClassName", "nzPaddingLeft", "nzTitle", "nzIcon", "nzTriggerSubMenuAction", "nzOpen", "nzDisabled", "nzPlacement"], outputs: ["nzOpenChange"], exportAs: ["nzSubmenu"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.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: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵ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: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "component", type: Breadcrumb, selector: "app-breadcrumb" }, { kind: "ngmodule", type: NzTreeModule }, { kind: "component", type: i1$7.NzTreeComponent, selector: "nz-tree", inputs: ["nzShowIcon", "nzHideUnMatched", "nzBlockNode", "nzExpandAll", "nzSelectMode", "nzCheckStrictly", "nzShowExpand", "nzShowLine", "nzCheckable", "nzAsyncData", "nzDraggable", "nzMultiple", "nzExpandedIcon", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualHeight", "nzTreeTemplate", "nzBeforeDrop", "nzData", "nzExpandedKeys", "nzSelectedKeys", "nzCheckedKeys", "nzSearchValue", "nzSearchFunc"], outputs: ["nzExpandedKeysChange", "nzSelectedKeysChange", "nzCheckedKeysChange", "nzSearchValueChange", "nzClick", "nzDblClick", "nzContextMenu", "nzCheckboxChange", "nzExpandChange", "nzOnDragStart", "nzOnDragEnter", "nzOnDragOver", "nzOnDragLeave", "nzOnDrop", "nzOnDragEnd"], exportAs: ["nzTree"] }, { kind: "ngmodule", type: NzBackTopModule }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "component", type: i3$6.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: i3$6.NzDrawerContentDirective, selector: "[nzDrawerContent]", exportAs: ["nzDrawerContent"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i6.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i6.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "ngmodule", type: NzSegmentedModule }, { kind: "component", type: LayoutUser, selector: "header-user" }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconSearch, selector: "icon-search", inputs: ["size"], outputs: ["click"] }, { kind: "directive", type: HideIfErrorDirective, selector: "img[hideIfError]" }, { kind: "component", type: NotificationCenterComponent, selector: "app-notification-center" }, { kind: "component", type: HeaderSearchComponent, selector: "header-search", inputs: ["searchValue"], outputs: ["searchValueChange", "onSearch"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i8.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: "ngmodule", type: NzMenuModule }, { kind: "component", type: SideMenuComponent, selector: "side-menu", inputs: ["filteredLstMenu", "currentHeaderId"], outputs: ["onClickToMenu"] }, { kind: "component", type: GlobalSpinnerComponent, selector: "app-global-spinner" }], animations: [fadeInOut] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
@@ -15684,6 +15937,7 @@ const URLs$4 = {
     getUserActionByOrg: '/api/WF/Workflow/GetUserActionByOrg',
     getWfTemplate: '/api/WF/Workflow/getWfTemplate',
     getWfTemplateByCode: '/api/WF/Workflow/getWfTemplateByCode',
+    getDataForRule: '/api/WF/Workflow/getDataForRule',
 };
 class WFService extends HTTPService {
     cms = inject(CommonService);
@@ -15698,10 +15952,8 @@ class WFService extends HTTPService {
         return this.getParams(AppGlobals.apiEndpoint + URLs$4.getWfData, params);
     }
     getDataForRule(templateId) {
-        return this.cms.ESP({
-            SPN: 'WF_Template_getDataForRule',
-            Params: [templateId],
-        });
+        const params = new HttpParams().append('templateId', templateId);
+        return this.getParams(AppGlobals.apiEndpoint + URLs$4.getDataForRule, params);
     }
     checkRule(ruleLine, sourceActionId) {
         const params = new HttpParams().append('sourceActionId', sourceActionId);
@@ -16535,11 +16787,11 @@ let WF_TemplateDetail$1 = class WF_TemplateDetail extends BaseComponent {
         this.wfeditor.actionRuleModalVisible = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WF_TemplateDetail, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: WF_TemplateDetail, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "wfeditor", first: true, predicate: ["wfeditor"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"workflow-wrapper\" style=\"height: calc(100vh - 110px)\">\n  <app-workflow-editor\n    #wfeditor\n    [lstOrg]=\"lstOrg\"\n    [lstRole]=\"lstRole\"\n    [lstUser]=\"lstUser\"\n    [lstEmailTemplate]=\"lstEmailTemplate\"\n    (onSave)=\"save($event)\"\n    (onDeleteStage)=\"deleteStage($event)\"\n    (onDeleteAction)=\"deleteAction($event)\"\n    (onDeleteRule)=\"deleteRule($event)\"\n    (onDeleteRuleLine)=\"deleteRuleLine($event)\"\n    (onCheckRule)=\"onCheckRule($event)\"\n    (onCheckAllRule)=\"onCheckAllRule($event)\"\n  ></app-workflow-editor>\n</div>\n", styles: [".workflow-wrapper{position:relative}\n"], dependencies: [{ kind: "component", type: WorkflowEditorComponent, selector: "app-workflow-editor", inputs: ["lstOrg", "lstRole", "lstUser", "lstEmailTemplate"], outputs: ["onSave", "onDeleteStage", "onDeleteAction", "onDeleteRule", "onDeleteRuleLine", "onCheckRule", "onCheckAllRule"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: WF_TemplateDetail, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "wfeditor", first: true, predicate: ["wfeditor"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"workflow-wrapper\" style=\"height: calc(100vh - 110px)\">\n  <app-workflow-editor\n    #wfeditor\n    [lstOrg]=\"lstOrg\"\n    [lstRole]=\"lstRole\"\n    [lstUser]=\"lstUser\"\n    [lstEmailTemplate]=\"lstEmailTemplate\"\n    (onSave)=\"save($event)\"\n    (onDeleteStage)=\"deleteStage($event)\"\n    (onDeleteAction)=\"deleteAction($event)\"\n    (onDeleteRule)=\"deleteRule($event)\"\n    (onDeleteRuleLine)=\"deleteRuleLine($event)\"\n    (onCheckRule)=\"onCheckRule($event)\"\n    (onCheckAllRule)=\"onCheckAllRule($event)\"\n    (getdata)=\"getData()\"\n  ></app-workflow-editor>\n</div>\n", styles: [".workflow-wrapper{position:relative}\n"], dependencies: [{ kind: "component", type: WorkflowEditorComponent, selector: "app-workflow-editor", inputs: ["lstOrg", "lstRole", "lstUser", "lstEmailTemplate"], outputs: ["getdata", "onSave", "onDeleteStage", "onDeleteAction", "onDeleteRule", "onDeleteRuleLine", "onCheckRule", "onCheckAllRule"] }] });
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WF_TemplateDetail$1, decorators: [{
             type: Component,
-            args: [{ imports: [WorkflowEditorComponent], template: "<div class=\"workflow-wrapper\" style=\"height: calc(100vh - 110px)\">\n  <app-workflow-editor\n    #wfeditor\n    [lstOrg]=\"lstOrg\"\n    [lstRole]=\"lstRole\"\n    [lstUser]=\"lstUser\"\n    [lstEmailTemplate]=\"lstEmailTemplate\"\n    (onSave)=\"save($event)\"\n    (onDeleteStage)=\"deleteStage($event)\"\n    (onDeleteAction)=\"deleteAction($event)\"\n    (onDeleteRule)=\"deleteRule($event)\"\n    (onDeleteRuleLine)=\"deleteRuleLine($event)\"\n    (onCheckRule)=\"onCheckRule($event)\"\n    (onCheckAllRule)=\"onCheckAllRule($event)\"\n  ></app-workflow-editor>\n</div>\n", styles: [".workflow-wrapper{position:relative}\n"] }]
+            args: [{ imports: [WorkflowEditorComponent], template: "<div class=\"workflow-wrapper\" style=\"height: calc(100vh - 110px)\">\n  <app-workflow-editor\n    #wfeditor\n    [lstOrg]=\"lstOrg\"\n    [lstRole]=\"lstRole\"\n    [lstUser]=\"lstUser\"\n    [lstEmailTemplate]=\"lstEmailTemplate\"\n    (onSave)=\"save($event)\"\n    (onDeleteStage)=\"deleteStage($event)\"\n    (onDeleteAction)=\"deleteAction($event)\"\n    (onDeleteRule)=\"deleteRule($event)\"\n    (onDeleteRuleLine)=\"deleteRuleLine($event)\"\n    (onCheckRule)=\"onCheckRule($event)\"\n    (onCheckAllRule)=\"onCheckAllRule($event)\"\n    (getdata)=\"getData()\"\n  ></app-workflow-editor>\n</div>\n", styles: [".workflow-wrapper{position:relative}\n"] }]
         }], propDecorators: { wfeditor: [{
                 type: ViewChild,
                 args: ['wfeditor']
@@ -16963,6 +17215,7 @@ const URLs$1 = {
     getInforAction: '/api/wf/doc/GetInforAction',
     getInforChangeUserByDocId: '/api/wf/doc/GetInforChangeUserByDocId',
     getHistoryChangeAction: '/api/wf/doc/GetHistoryChangeAction',
+    GetSwimlaneData: '/api/wf/doc/GetSwimlaneData',
     changeUser: '/api/wf/doc/ChangeUser',
     startDocProcess: '/api/wf/doc/startDocProcess',
     changeAction: '/api/wf/doc/changeAction',
@@ -17005,6 +17258,10 @@ class WF_DocService extends HTTPService {
         const params = new HttpParams().append('id', id);
         return this.postParams(AppGlobals.apiEndpoint + URLs$1.getHistoryChangeAction, params);
     }
+    GetSwimlaneData(id) {
+        const params = new HttpParams().append('id', id);
+        return this.getParams(AppGlobals.apiEndpoint + URLs$1.GetSwimlaneData, params);
+    }
     changeUser(obj) {
         return this.postData(AppGlobals.apiEndpoint + URLs$1.changeUser, obj);
     }
@@ -17069,7 +17326,7 @@ class WF_DocListComponent extends BaseComponent {
         this.getData();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WF_DocListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: WF_DocListComponent, isStandalone: true, selector: "wf-doc-list", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\n  <div nz-col nzSpan=\"24\">\n    <div nz-flex nzJustify=\"end\">\n      <div nz-flex nzGap=\"small\">\n        <button-add (click)=\"edit()\"></button-add>\n        <button-search (click)=\"search()\"></button-search>\n      </div>\n    </div>\n  </div>\n  <div nz-col nzSpan=\"24\">\n    <nz-table\n      #table\n      [nzData]=\"this.data.LstItem || []\"\n      [nzBordered]=\"true\"\n      [nzSize]=\"'small'\"\n      [nzShowPagination]=\"false\"\n      [nzFrontPagination]=\"false\"\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\n    >\n      <ng-template #showTotalTpl let-total let-range=\"range\">\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\n      </ng-template>\n      <thead>\n        <tr>\n          <th nzWidth=\"50px\">#</th>\n          <th>Template</th>\n          <th>Stage</th>\n          <th>Action</th>\n          <th nzWidth=\"130px\">Created date</th>\n          <th nzWidth=\"130px\">Created user</th>\n          <th nzWidth=\"75px\" nzRight>Thao t\u00E1c</th>\n        </tr>\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\n          <th></th>\n          <th></th>\n          <th>\n            <!-- <extend-input size=\"small\"></extend-input> -->\n          </th>\n          <th></th>\n          <th></th>\n          <th></th>\n          <th nzRight></th>\n        </tr>\n      </thead>\n      <tbody>\n        @for (row of table.data; track $index; let i = $index) {\n          <tr>\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\n            <td>{{ row.TemplateName }}</td>\n            <td>\n              {{ row.StageName }}\n            </td>\n            <td>\n              {{ row.ActionName }}\n            </td>\n            <td>{{ row.CreatedDate | date }}</td>\n            <td>{{ row.CreatedUser }}</td>\n            <td class=\"center\" nzRight>\n              <icon-edit (click)=\"edit(row)\"></icon-edit>\n              <box [width]=\"6\"></box>\n              <nz-icon\n                *ngIf=\"row.InProcess\"\n                class=\"cursor-pointer\"\n                style=\"color: green\"\n                nzType=\"node-expand\"\n                nzTheme=\"outline\"\n                (click)=\"goto('/workflow/doc-list/' + row.WF_DocInstance_Id + '/process')\"\n              />\n              <box [width]=\"6\"></box>\n              <icon-delete (click)=\"delete(row)\"></icon-delete>\n            </td>\n          </tr>\n        }\n      </tbody>\n    </nz-table>\n  </div>\n  <div nz-col nzSpan=\"24\">\n    <div nz-flex nzJustify=\"end\">\n      <nz-pagination\n        [nzSize]=\"'small'\"\n        [nzPageIndex]=\"filter.PageIndex + 1\"\n        [nzPageSize]=\"filter.PageSize\"\n        [nzTotal]=\"data.TotalCount || 0\"\n        [nzShowSizeChanger]=\"true\"\n        [nzShowTotal]=\"showTotalTpl\"\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\n      >\n      </nz-pagination>\n\n      <ng-template #showTotalTpl let-total let-range=\"range\">\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\n      </ng-template>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.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: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i4.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: i4.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i4.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i4.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i4.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i4.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "directive", type: i4.NzCellFixedDirective, selector: "td[nzRight],th[nzRight],td[nzLeft],th[nzLeft]", inputs: ["nzRight", "nzLeft", "colspan", "colSpan"] }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i5$2.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "component", type: ButtonAdd, selector: "button-add", inputs: ["size"] }, { kind: "component", type: ButtonSearch, selector: "button-search", inputs: ["size"] }, { kind: "component", type: IconEdit, selector: "icon-edit", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: WF_DocListComponent, isStandalone: true, selector: "wf-doc-list", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\n  <div nz-col nzSpan=\"24\">\n    <div nz-flex nzJustify=\"end\">\n      <div nz-flex nzGap=\"small\">\n        <button-add (click)=\"edit()\"></button-add>\n        <button-search (click)=\"search()\"></button-search>\n      </div>\n    </div>\n  </div>\n  <div nz-col nzSpan=\"24\">\n    <nz-table\n      #table\n      [nzData]=\"this.data.LstItem || []\"\n      [nzBordered]=\"true\"\n      [nzSize]=\"'small'\"\n      [nzShowPagination]=\"false\"\n      [nzFrontPagination]=\"false\"\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\n    >\n      <ng-template #showTotalTpl let-total let-range=\"range\">\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\n      </ng-template>\n      <thead>\n        <tr>\n          <th nzWidth=\"50px\">#</th>\n          <th>Template</th>\n          <th>Stage</th>\n          <th>Action</th>\n          <th nzWidth=\"130px\">Created date</th>\n          <th nzWidth=\"130px\">Created user</th>\n          <th nzWidth=\"130px\" nzRight>Thao t\u00E1c</th>\n        </tr>\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\n          <th></th>\n          <th></th>\n          <th>\n            <!-- <extend-input size=\"small\"></extend-input> -->\n          </th>\n          <th></th>\n          <th></th>\n          <th></th>\n          <th nzRight></th>\n        </tr>\n      </thead>\n      <tbody>\n        @for (row of table.data; track $index; let i = $index) {\n          <tr>\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\n            <td>{{ row.TemplateName }}</td>\n            <td>\n              {{ row.StageName }}\n            </td>\n            <td>\n              {{ row.ActionName }}\n            </td>\n            <td>{{ row.CreatedDate | date: \"dd/MM/yyyy HH:mm\" }}</td>\n            <td>{{ row.CreatedUser }}</td>\n            <td class=\"center\" nzRight>\n              <icon-edit (click)=\"edit(row)\"></icon-edit>\n              <nz-divider [nzType]=\"'vertical'\"></nz-divider>\n              @if (row.InProcess) {\n                <nz-icon\n                  class=\"cursor-pointer\"\n                  style=\"color: green\"\n                  nzType=\"node-expand\"\n                  nzTheme=\"outline\"\n                  (click)=\"goto('/workflow/doc-list/' + row.WF_DocInstance_Id + '/process')\"\n                />\n                <nz-divider [nzType]=\"'vertical'\"></nz-divider>\n                <nz-icon\n                  class=\"cursor-pointer\"\n                  style=\"color: blue\"\n                  nzType=\"history\"\n                  nzTheme=\"outline\"\n                  (click)=\"goto('/workflow/doc-list/' + row.WF_DocInstance_Id + '/doc-swimlane')\"\n                />\n                <nz-divider [nzType]=\"'vertical'\"></nz-divider>\n              }\n\n              <icon-delete (click)=\"delete(row)\"></icon-delete>\n            </td>\n          </tr>\n        }\n      </tbody>\n    </nz-table>\n  </div>\n  <div nz-col nzSpan=\"24\">\n    <div nz-flex nzJustify=\"end\">\n      <nz-pagination\n        [nzSize]=\"'small'\"\n        [nzPageIndex]=\"filter.PageIndex + 1\"\n        [nzPageSize]=\"filter.PageSize\"\n        [nzTotal]=\"data.TotalCount || 0\"\n        [nzShowSizeChanger]=\"true\"\n        [nzShowTotal]=\"showTotalTpl\"\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\n      >\n      </nz-pagination>\n\n      <ng-template #showTotalTpl let-total let-range=\"range\">\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\n      </ng-template>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.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: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i4.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: i4.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i4.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i4.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i4.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i4.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "directive", type: i4.NzCellFixedDirective, selector: "td[nzRight],th[nzRight],td[nzLeft],th[nzLeft]", inputs: ["nzRight", "nzLeft", "colspan", "colSpan"] }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i5$2.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "component", type: ButtonAdd, selector: "button-add", inputs: ["size"] }, { kind: "component", type: ButtonSearch, selector: "button-search", inputs: ["size"] }, { kind: "component", type: IconEdit, selector: "icon-edit", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { 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: NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WF_DocListComponent, decorators: [{
             type: Component,
@@ -17086,7 +17343,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         IconDelete,
                         ExtendInput,
                         NzIconModule,
-                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\n  <div nz-col nzSpan=\"24\">\n    <div nz-flex nzJustify=\"end\">\n      <div nz-flex nzGap=\"small\">\n        <button-add (click)=\"edit()\"></button-add>\n        <button-search (click)=\"search()\"></button-search>\n      </div>\n    </div>\n  </div>\n  <div nz-col nzSpan=\"24\">\n    <nz-table\n      #table\n      [nzData]=\"this.data.LstItem || []\"\n      [nzBordered]=\"true\"\n      [nzSize]=\"'small'\"\n      [nzShowPagination]=\"false\"\n      [nzFrontPagination]=\"false\"\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\n    >\n      <ng-template #showTotalTpl let-total let-range=\"range\">\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\n      </ng-template>\n      <thead>\n        <tr>\n          <th nzWidth=\"50px\">#</th>\n          <th>Template</th>\n          <th>Stage</th>\n          <th>Action</th>\n          <th nzWidth=\"130px\">Created date</th>\n          <th nzWidth=\"130px\">Created user</th>\n          <th nzWidth=\"75px\" nzRight>Thao t\u00E1c</th>\n        </tr>\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\n          <th></th>\n          <th></th>\n          <th>\n            <!-- <extend-input size=\"small\"></extend-input> -->\n          </th>\n          <th></th>\n          <th></th>\n          <th></th>\n          <th nzRight></th>\n        </tr>\n      </thead>\n      <tbody>\n        @for (row of table.data; track $index; let i = $index) {\n          <tr>\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\n            <td>{{ row.TemplateName }}</td>\n            <td>\n              {{ row.StageName }}\n            </td>\n            <td>\n              {{ row.ActionName }}\n            </td>\n            <td>{{ row.CreatedDate | date }}</td>\n            <td>{{ row.CreatedUser }}</td>\n            <td class=\"center\" nzRight>\n              <icon-edit (click)=\"edit(row)\"></icon-edit>\n              <box [width]=\"6\"></box>\n              <nz-icon\n                *ngIf=\"row.InProcess\"\n                class=\"cursor-pointer\"\n                style=\"color: green\"\n                nzType=\"node-expand\"\n                nzTheme=\"outline\"\n                (click)=\"goto('/workflow/doc-list/' + row.WF_DocInstance_Id + '/process')\"\n              />\n              <box [width]=\"6\"></box>\n              <icon-delete (click)=\"delete(row)\"></icon-delete>\n            </td>\n          </tr>\n        }\n      </tbody>\n    </nz-table>\n  </div>\n  <div nz-col nzSpan=\"24\">\n    <div nz-flex nzJustify=\"end\">\n      <nz-pagination\n        [nzSize]=\"'small'\"\n        [nzPageIndex]=\"filter.PageIndex + 1\"\n        [nzPageSize]=\"filter.PageSize\"\n        [nzTotal]=\"data.TotalCount || 0\"\n        [nzShowSizeChanger]=\"true\"\n        [nzShowTotal]=\"showTotalTpl\"\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\n      >\n      </nz-pagination>\n\n      <ng-template #showTotalTpl let-total let-range=\"range\">\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\n      </ng-template>\n    </div>\n  </div>\n</div>\n" }]
+                        NzDividerComponent,
+                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\n  <div nz-col nzSpan=\"24\">\n    <div nz-flex nzJustify=\"end\">\n      <div nz-flex nzGap=\"small\">\n        <button-add (click)=\"edit()\"></button-add>\n        <button-search (click)=\"search()\"></button-search>\n      </div>\n    </div>\n  </div>\n  <div nz-col nzSpan=\"24\">\n    <nz-table\n      #table\n      [nzData]=\"this.data.LstItem || []\"\n      [nzBordered]=\"true\"\n      [nzSize]=\"'small'\"\n      [nzShowPagination]=\"false\"\n      [nzFrontPagination]=\"false\"\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\n    >\n      <ng-template #showTotalTpl let-total let-range=\"range\">\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\n      </ng-template>\n      <thead>\n        <tr>\n          <th nzWidth=\"50px\">#</th>\n          <th>Template</th>\n          <th>Stage</th>\n          <th>Action</th>\n          <th nzWidth=\"130px\">Created date</th>\n          <th nzWidth=\"130px\">Created user</th>\n          <th nzWidth=\"130px\" nzRight>Thao t\u00E1c</th>\n        </tr>\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\n          <th></th>\n          <th></th>\n          <th>\n            <!-- <extend-input size=\"small\"></extend-input> -->\n          </th>\n          <th></th>\n          <th></th>\n          <th></th>\n          <th nzRight></th>\n        </tr>\n      </thead>\n      <tbody>\n        @for (row of table.data; track $index; let i = $index) {\n          <tr>\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\n            <td>{{ row.TemplateName }}</td>\n            <td>\n              {{ row.StageName }}\n            </td>\n            <td>\n              {{ row.ActionName }}\n            </td>\n            <td>{{ row.CreatedDate | date: \"dd/MM/yyyy HH:mm\" }}</td>\n            <td>{{ row.CreatedUser }}</td>\n            <td class=\"center\" nzRight>\n              <icon-edit (click)=\"edit(row)\"></icon-edit>\n              <nz-divider [nzType]=\"'vertical'\"></nz-divider>\n              @if (row.InProcess) {\n                <nz-icon\n                  class=\"cursor-pointer\"\n                  style=\"color: green\"\n                  nzType=\"node-expand\"\n                  nzTheme=\"outline\"\n                  (click)=\"goto('/workflow/doc-list/' + row.WF_DocInstance_Id + '/process')\"\n                />\n                <nz-divider [nzType]=\"'vertical'\"></nz-divider>\n                <nz-icon\n                  class=\"cursor-pointer\"\n                  style=\"color: blue\"\n                  nzType=\"history\"\n                  nzTheme=\"outline\"\n                  (click)=\"goto('/workflow/doc-list/' + row.WF_DocInstance_Id + '/doc-swimlane')\"\n                />\n                <nz-divider [nzType]=\"'vertical'\"></nz-divider>\n              }\n\n              <icon-delete (click)=\"delete(row)\"></icon-delete>\n            </td>\n          </tr>\n        }\n      </tbody>\n    </nz-table>\n  </div>\n  <div nz-col nzSpan=\"24\">\n    <div nz-flex nzJustify=\"end\">\n      <nz-pagination\n        [nzSize]=\"'small'\"\n        [nzPageIndex]=\"filter.PageIndex + 1\"\n        [nzPageSize]=\"filter.PageSize\"\n        [nzTotal]=\"data.TotalCount || 0\"\n        [nzShowSizeChanger]=\"true\"\n        [nzShowTotal]=\"showTotalTpl\"\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\n      >\n      </nz-pagination>\n\n      <ng-template #showTotalTpl let-total let-range=\"range\">\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\n      </ng-template>\n    </div>\n  </div>\n</div>\n" }]
         }] });
 
 class WF_DocDetailComponent extends BaseComponent {
@@ -17318,7 +17576,7 @@ class WF_DocDetailComponent extends BaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WF_DocDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: WF_DocDetailComponent, isStandalone: true, selector: "wf-doc-detail", usesInheritance: true, ngImport: i0, template: "<div nz-row class=\"form-item-no-bottom\">\n  <extend-select\n    nz-col\n    nzSpan=\"6\"\n    label=\"Quy tr\u00ECnh nghi\u1EC7p v\u1EE5\"\n    [required]=\"true\"\n    [lstItem]=\"lstTemplate\"\n    [valueField]=\"'WF_Template_Id'\"\n    [displayField]=\"'Name'\"\n    [(_ngModel)]=\"doc.WF_Template_Id\"\n    (_ngModelChange)=\"getTemplate(doc.WF_Template_Id)\"\n  >\n  </extend-select>\n  <div nz-col nzSpan=\"18\" style=\"padding-top: 14px\">\n    <div nz-row nzJustify=\"end\">\n      <div nz-flex nzGap=\"small\">\n        <button *ngIf=\"doc.WF_DocInstance_Id\" nz-button nzType=\"primary\" (click)=\"startDocProcess()\">\n          <nz-icon nzType=\"node-expand\" nzTheme=\"outline\" />Th\u1EF1c hi\u1EC7n quy tr\u00ECnh\n        </button>\n        <button-save (click)=\"save()\"></button-save>\n        <button-back (click)=\"goto('/workflow/doc-list')\"></button-back>\n      </div>\n    </div>\n  </div>\n</div>\n\n<box [height]=\"8\"></box>\n\n<nz-table class=\"table-wf\" nzSize=\"small\" [nzData]=\"wfTemplate.ListStage\" [nzShowPagination]=\"false\">\n  <thead>\n    <tr>\n      <th>Giai \u0111o\u1EA1n th\u1EF1c hi\u1EC7n</th>\n      <th>\u0110\u01A1n v\u1ECB ph\u1EE5 tr\u00E1ch</th>\n      <th>Thao t\u00E1c</th>\n      <th>Ng\u01B0\u1EDDi th\u1EF1c hi\u1EC7n</th>\n      <th nzWidth=\"100px\">S\u1ED1 ng\u00E0y</th>\n      <th nzWidth=\"130px\">Ng\u00E0y b\u1EAFt \u0111\u1EA7u</th>\n      <th nzWidth=\"130px\">H\u1EA1n ho\u00E0n th\u00E0nh</th>\n    </tr>\n  </thead>\n  <tbody class=\"no-odd-even\">\n    @for (stage of wfTemplate.ListStage; track stage; let stageIndex = $index) {\n      @for (action of stage.ListAction; track $index; let actionIndex = $index) {\n        <tr>\n          @if (actionIndex === 0) {\n            <td [attr.rowspan]=\"stage.ListAction.length\">\n              <!-- Giai \u0111o\u1EA1n th\u1EF1c hi\u1EC7n -->\n              <input nz-input [name]=\"'stageName_' + stageIndex\" [value]=\"stage.Name || ''\" readonly />\n            </td>\n            <td [attr.rowspan]=\"stage.ListAction.length\">\n              <!-- \u0110\u01A1n v\u1ECB ph\u1EE5 tr\u00E1ch -->\n              <extend-select\n                [lstItem]=\"lstOrgs\"\n                [valueField]=\"'App_Org_Id'\"\n                [displayField]=\"'Name'\"\n                [dropdownMatchSelectWidth]=\"false\"\n                [(_ngModel)]=\"stage.App_Org_Id\"\n                (_ngModelChange)=\"onOrgChangeOrg($event, stage)\"\n              ></extend-select>\n            </td>\n          }\n\n          <td>\n            <!-- Thao t\u00E1c -->\n            <input\n              nz-input\n              [name]=\"'actionText_' + stageIndex + '_' + actionIndex\"\n              [value]=\"action.ActionText || ''\"\n              readonly\n            />\n          </td>\n          <td>\n            <!-- Ng\u01B0\u1EDDi th\u1EF1c hi\u1EC7n -->\n            <nz-select\n              [(ngModel)]=\"action.ListUserRoleSelectStr\"\n              (ngModelChange)=\"onSelectChange($event, action, stage)\"\n              [nzSize]=\"'default'\"\n              nzMode=\"multiple\"\n              style=\"width: 100%\"\n            >\n              @for (option of action.ListUserRole; track option.App_User_Id) {\n                <nz-option [nzLabel]=\"option.FullName\" [nzValue]=\"option.App_User_Id\"></nz-option>\n              }\n            </nz-select>\n          </td>\n\n          @if (actionIndex === 0) {\n            <td [attr.rowspan]=\"stage.ListAction.length\">\n              <!-- S\u1ED1 ng\u00E0y -->\n              <extend-input-number\n                [min]=\"0\"\n                [(_ngModel)]=\"stage.NumberDay\"\n                (_ngModelChange)=\"onChangeNumberDay(stage, stageIndex, $event)\"\n              ></extend-input-number>\n            </td>\n            <td [attr.rowspan]=\"stage.ListAction.length\">\n              <!-- Ng\u00E0y b\u1EAFt \u0111\u1EA7u -->\n              <nz-date-picker\n                [name]=\"'startDate_' + stageIndex\"\n                [(ngModel)]=\"stage.StartDate\"\n                (ngModelChange)=\"onStartDateChange(stageIndex, $event)\"\n                [nzFormat]=\"'dd/MM/yyyy'\"\n                style=\"width: 100%\"\n              >\n              </nz-date-picker>\n            </td>\n            <td [attr.rowspan]=\"stage.ListAction.length\">\n              <!-- H\u1EA1n ho\u00E0n th\u00E0nh -->\n              <nz-date-picker\n                disabled=\"true\"\n                [name]=\"'endDate_' + stageIndex\"\n                [(ngModel)]=\"stage.EndDate\"\n                [nzFormat]=\"'dd/MM/yyyy'\"\n                style=\"width: 100%\"\n              >\n              </nz-date-picker>\n            </td>\n          }\n        </tr>\n      } @empty {\n        <!-- TR\u01AF\u1EDCNG H\u1EE2P NGO\u1EA0I L\u1EC6: Giai \u0111o\u1EA1n kh\u00F4ng c\u00F3 thao t\u00E1c n\u00E0o (\u0111\u1EC3 tr\u00E1nh b\u1EA3ng b\u1ECB l\u1ED7i/bi\u1EBFn m\u1EA5t) -->\n        <tr>\n          <td>\n            <input nz-input [name]=\"'stageName_' + stageIndex\" [value]=\"stage.Name || ''\" readonly />\n          </td>\n          <td>\n            <extend-select\n              [lstItem]=\"lstOrgs\"\n              [valueField]=\"'App_Org_Id'\"\n              [displayField]=\"'Name'\"\n              [(_ngModel)]=\"stage.App_Org_Id\"\n              (_ngModelChange)=\"onOrgChangeOrg($event, stage)\"\n            ></extend-select>\n          </td>\n          <td colspan=\"2\" style=\"text-align: center; color: #999\">Kh\u00F4ng c\u00F3 thao t\u00E1c</td>\n          <td></td>\n          <td></td>\n          <td></td>\n        </tr>\n      }\n    }\n  </tbody>\n</nz-table>\n", styles: [".table-wf td{border-bottom:1px solid darkgray}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ExtendSelectComponent, selector: "extend-select", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "dropdownMatchSelectWidth", "labelSpan", "labelFlex", "disabled", "required", "noBottom", "multiple", "showSelectAll", "maxTagCount", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "lstItem", "displayField", "displayFields", "info", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "itemChange", "onFocus"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i4.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: i4.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i4.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i4.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i4.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i4.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: NzInputModule }, { kind: "directive", type: i6.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i13.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i13.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus"], exportAs: ["nzSelect"] }, { kind: "ngmodule", type: NzDatePickerModule }, { kind: "component", type: i5$1.NzDatePickerComponent, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-quarter-picker,nz-year-picker,nz-range-picker", inputs: ["nzAllowClear", "nzAutoFocus", "nzDisabled", "nzBorderless", "nzInputReadOnly", "nzInline", "nzOpen", "nzDisabledDate", "nzLocale", "nzPlaceHolder", "nzPopupStyle", "nzDropdownClassName", "nzSize", "nzStatus", "nzFormat", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzShowToday", "nzMode", "nzShowNow", "nzRanges", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzPlacement", "nzShowWeekNumber", "nzShowTime"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.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: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "component", type: NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "directive", type: i3$2.ɵ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: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "component", type: ButtonSave, selector: "button-save", inputs: ["size"] }, { kind: "component", type: ExtendInputNumber, selector: "extend-input-number", inputs: ["label", "placeHolder", "labelAlign", "floatingLabel", "hiddenUpDown", "labelSpan", "labelFlex", "inputFlex", "disabled", "required", "noBottom", "size", "min", "max", "precision", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "isSubmited", "separatorType", "formData", "controlName", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: ButtonBack, selector: "button-back", inputs: ["size"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: WF_DocDetailComponent, isStandalone: true, selector: "wf-doc-detail", usesInheritance: true, ngImport: i0, template: "<div nz-row class=\"form-item-no-bottom\">\n  <extend-select\n    nz-col\n    nzSpan=\"6\"\n    label=\"Quy tr\u00ECnh nghi\u1EC7p v\u1EE5\"\n    [required]=\"true\"\n    [lstItem]=\"lstTemplate\"\n    [valueField]=\"'WF_Template_Id'\"\n    [displayFields]=\"['Code', 'Name']\"\n    [(_ngModel)]=\"doc.WF_Template_Id\"\n    (_ngModelChange)=\"getTemplate(doc.WF_Template_Id)\"\n  >\n  </extend-select>\n  <div nz-col nzSpan=\"18\" style=\"padding-top: 14px\">\n    <div nz-row nzJustify=\"end\">\n      <div nz-flex nzGap=\"small\">\n        <button *ngIf=\"doc.WF_DocInstance_Id\" nz-button nzType=\"primary\" (click)=\"startDocProcess()\">\n          <nz-icon nzType=\"node-expand\" nzTheme=\"outline\" />Th\u1EF1c hi\u1EC7n quy tr\u00ECnh\n        </button>\n        <button-save (click)=\"save()\"></button-save>\n        <button-back (click)=\"goto('/workflow/doc-list')\"></button-back>\n      </div>\n    </div>\n  </div>\n</div>\n\n<box [height]=\"8\"></box>\n\n<nz-table class=\"table-wf no-hover-color\" nzSize=\"small\" [nzData]=\"wfTemplate.ListStage\" [nzShowPagination]=\"false\">\n  <thead>\n    <tr>\n      <th>Giai \u0111o\u1EA1n th\u1EF1c hi\u1EC7n</th>\n      <th>\u0110\u01A1n v\u1ECB ph\u1EE5 tr\u00E1ch</th>\n      <th>Thao t\u00E1c</th>\n      <th>Ng\u01B0\u1EDDi th\u1EF1c hi\u1EC7n</th>\n      <th nzWidth=\"100px\">S\u1ED1 ng\u00E0y</th>\n      <th nzWidth=\"130px\">Ng\u00E0y b\u1EAFt \u0111\u1EA7u</th>\n      <th nzWidth=\"130px\">H\u1EA1n ho\u00E0n th\u00E0nh</th>\n    </tr>\n  </thead>\n  <tbody class=\"no-odd-even\">\n    @for (stage of wfTemplate.ListStage; track stage; let stageIndex = $index) {\n      @for (action of stage.ListAction; track $index; let actionIndex = $index) {\n        <tr>\n          @if (actionIndex === 0) {\n            <td [attr.rowspan]=\"stage.ListAction.length\">\n              <!-- Giai \u0111o\u1EA1n th\u1EF1c hi\u1EC7n -->\n              <input nz-input [name]=\"'stageName_' + stageIndex\" [value]=\"stage.Name || ''\" readonly />\n            </td>\n            <td [attr.rowspan]=\"stage.ListAction.length\">\n              <!-- \u0110\u01A1n v\u1ECB ph\u1EE5 tr\u00E1ch -->\n              <extend-select\n                [lstItem]=\"lstOrgs\"\n                [valueField]=\"'App_Org_Id'\"\n                [displayField]=\"'Name'\"\n                [dropdownMatchSelectWidth]=\"false\"\n                [(_ngModel)]=\"stage.App_Org_Id\"\n                (_ngModelChange)=\"onOrgChangeOrg($event, stage)\"\n              ></extend-select>\n            </td>\n          }\n\n          <td>\n            <!-- Thao t\u00E1c -->\n            <input\n              nz-input\n              [name]=\"'actionText_' + stageIndex + '_' + actionIndex\"\n              [value]=\"action.ActionText || ''\"\n              readonly\n            />\n          </td>\n          <td>\n            <!-- Ng\u01B0\u1EDDi th\u1EF1c hi\u1EC7n -->\n            <nz-select\n              [(ngModel)]=\"action.ListUserRoleSelectStr\"\n              (ngModelChange)=\"onSelectChange($event, action, stage)\"\n              [nzSize]=\"'default'\"\n              nzMode=\"multiple\"\n              style=\"width: 100%\"\n            >\n              @for (option of action.ListUserRole; track option.App_User_Id) {\n                <nz-option [nzLabel]=\"option.FullName\" [nzValue]=\"option.App_User_Id\"></nz-option>\n              }\n            </nz-select>\n          </td>\n\n          @if (actionIndex === 0) {\n            <td [attr.rowspan]=\"stage.ListAction.length\">\n              <!-- S\u1ED1 ng\u00E0y -->\n              <extend-input-number\n                [min]=\"0\"\n                [(_ngModel)]=\"stage.NumberDay\"\n                (_ngModelChange)=\"onChangeNumberDay(stage, stageIndex, $event)\"\n              ></extend-input-number>\n            </td>\n            <td [attr.rowspan]=\"stage.ListAction.length\">\n              <!-- Ng\u00E0y b\u1EAFt \u0111\u1EA7u -->\n              <nz-date-picker\n                [name]=\"'startDate_' + stageIndex\"\n                [(ngModel)]=\"stage.StartDate\"\n                (ngModelChange)=\"onStartDateChange(stageIndex, $event)\"\n                [nzFormat]=\"'dd/MM/yyyy'\"\n                style=\"width: 100%\"\n              >\n              </nz-date-picker>\n            </td>\n            <td [attr.rowspan]=\"stage.ListAction.length\">\n              <!-- H\u1EA1n ho\u00E0n th\u00E0nh -->\n              <nz-date-picker\n                disabled=\"true\"\n                [name]=\"'endDate_' + stageIndex\"\n                [(ngModel)]=\"stage.EndDate\"\n                [nzFormat]=\"'dd/MM/yyyy'\"\n                style=\"width: 100%\"\n              >\n              </nz-date-picker>\n            </td>\n          }\n        </tr>\n      } @empty {\n        <!-- TR\u01AF\u1EDCNG H\u1EE2P NGO\u1EA0I L\u1EC6: Giai \u0111o\u1EA1n kh\u00F4ng c\u00F3 thao t\u00E1c n\u00E0o (\u0111\u1EC3 tr\u00E1nh b\u1EA3ng b\u1ECB l\u1ED7i/bi\u1EBFn m\u1EA5t) -->\n        <tr>\n          <td>\n            <input nz-input [name]=\"'stageName_' + stageIndex\" [value]=\"stage.Name || ''\" readonly />\n          </td>\n          <td>\n            <extend-select\n              [lstItem]=\"lstOrgs\"\n              [valueField]=\"'App_Org_Id'\"\n              [displayField]=\"'Name'\"\n              [(_ngModel)]=\"stage.App_Org_Id\"\n              (_ngModelChange)=\"onOrgChangeOrg($event, stage)\"\n            ></extend-select>\n          </td>\n          <td colspan=\"2\" style=\"text-align: center; color: #999\">Kh\u00F4ng c\u00F3 thao t\u00E1c</td>\n          <td></td>\n          <td></td>\n          <td></td>\n        </tr>\n      }\n    }\n  </tbody>\n</nz-table>\n", styles: [".table-wf td{border-bottom:1px solid darkgray}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ExtendSelectComponent, selector: "extend-select", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "dropdownMatchSelectWidth", "labelSpan", "labelFlex", "disabled", "required", "noBottom", "multiple", "showSelectAll", "maxTagCount", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "lstItem", "displayField", "displayFields", "info", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "itemChange", "onFocus"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i4.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: i4.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i4.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i4.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i4.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i4.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: NzInputModule }, { kind: "directive", type: i6.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i13.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i13.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus"], exportAs: ["nzSelect"] }, { kind: "ngmodule", type: NzDatePickerModule }, { kind: "component", type: i5$1.NzDatePickerComponent, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-quarter-picker,nz-year-picker,nz-range-picker", inputs: ["nzAllowClear", "nzAutoFocus", "nzDisabled", "nzBorderless", "nzInputReadOnly", "nzInline", "nzOpen", "nzDisabledDate", "nzLocale", "nzPlaceHolder", "nzPopupStyle", "nzDropdownClassName", "nzSize", "nzStatus", "nzFormat", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzShowToday", "nzMode", "nzShowNow", "nzRanges", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzPlacement", "nzShowWeekNumber", "nzShowTime"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.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: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "component", type: NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "directive", type: i3$2.ɵ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: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "component", type: ButtonSave, selector: "button-save", inputs: ["size"] }, { kind: "component", type: ExtendInputNumber, selector: "extend-input-number", inputs: ["label", "placeHolder", "labelAlign", "floatingLabel", "hiddenUpDown", "labelSpan", "labelFlex", "inputFlex", "disabled", "required", "noBottom", "size", "min", "max", "precision", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "isSubmited", "separatorType", "formData", "controlName", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: ButtonBack, selector: "button-back", inputs: ["size"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WF_DocDetailComponent, decorators: [{
             type: Component,
@@ -17339,7 +17597,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         ButtonBack,
                         Box,
                         NzIconModule,
-                    ], template: "<div nz-row class=\"form-item-no-bottom\">\n  <extend-select\n    nz-col\n    nzSpan=\"6\"\n    label=\"Quy tr\u00ECnh nghi\u1EC7p v\u1EE5\"\n    [required]=\"true\"\n    [lstItem]=\"lstTemplate\"\n    [valueField]=\"'WF_Template_Id'\"\n    [displayField]=\"'Name'\"\n    [(_ngModel)]=\"doc.WF_Template_Id\"\n    (_ngModelChange)=\"getTemplate(doc.WF_Template_Id)\"\n  >\n  </extend-select>\n  <div nz-col nzSpan=\"18\" style=\"padding-top: 14px\">\n    <div nz-row nzJustify=\"end\">\n      <div nz-flex nzGap=\"small\">\n        <button *ngIf=\"doc.WF_DocInstance_Id\" nz-button nzType=\"primary\" (click)=\"startDocProcess()\">\n          <nz-icon nzType=\"node-expand\" nzTheme=\"outline\" />Th\u1EF1c hi\u1EC7n quy tr\u00ECnh\n        </button>\n        <button-save (click)=\"save()\"></button-save>\n        <button-back (click)=\"goto('/workflow/doc-list')\"></button-back>\n      </div>\n    </div>\n  </div>\n</div>\n\n<box [height]=\"8\"></box>\n\n<nz-table class=\"table-wf\" nzSize=\"small\" [nzData]=\"wfTemplate.ListStage\" [nzShowPagination]=\"false\">\n  <thead>\n    <tr>\n      <th>Giai \u0111o\u1EA1n th\u1EF1c hi\u1EC7n</th>\n      <th>\u0110\u01A1n v\u1ECB ph\u1EE5 tr\u00E1ch</th>\n      <th>Thao t\u00E1c</th>\n      <th>Ng\u01B0\u1EDDi th\u1EF1c hi\u1EC7n</th>\n      <th nzWidth=\"100px\">S\u1ED1 ng\u00E0y</th>\n      <th nzWidth=\"130px\">Ng\u00E0y b\u1EAFt \u0111\u1EA7u</th>\n      <th nzWidth=\"130px\">H\u1EA1n ho\u00E0n th\u00E0nh</th>\n    </tr>\n  </thead>\n  <tbody class=\"no-odd-even\">\n    @for (stage of wfTemplate.ListStage; track stage; let stageIndex = $index) {\n      @for (action of stage.ListAction; track $index; let actionIndex = $index) {\n        <tr>\n          @if (actionIndex === 0) {\n            <td [attr.rowspan]=\"stage.ListAction.length\">\n              <!-- Giai \u0111o\u1EA1n th\u1EF1c hi\u1EC7n -->\n              <input nz-input [name]=\"'stageName_' + stageIndex\" [value]=\"stage.Name || ''\" readonly />\n            </td>\n            <td [attr.rowspan]=\"stage.ListAction.length\">\n              <!-- \u0110\u01A1n v\u1ECB ph\u1EE5 tr\u00E1ch -->\n              <extend-select\n                [lstItem]=\"lstOrgs\"\n                [valueField]=\"'App_Org_Id'\"\n                [displayField]=\"'Name'\"\n                [dropdownMatchSelectWidth]=\"false\"\n                [(_ngModel)]=\"stage.App_Org_Id\"\n                (_ngModelChange)=\"onOrgChangeOrg($event, stage)\"\n              ></extend-select>\n            </td>\n          }\n\n          <td>\n            <!-- Thao t\u00E1c -->\n            <input\n              nz-input\n              [name]=\"'actionText_' + stageIndex + '_' + actionIndex\"\n              [value]=\"action.ActionText || ''\"\n              readonly\n            />\n          </td>\n          <td>\n            <!-- Ng\u01B0\u1EDDi th\u1EF1c hi\u1EC7n -->\n            <nz-select\n              [(ngModel)]=\"action.ListUserRoleSelectStr\"\n              (ngModelChange)=\"onSelectChange($event, action, stage)\"\n              [nzSize]=\"'default'\"\n              nzMode=\"multiple\"\n              style=\"width: 100%\"\n            >\n              @for (option of action.ListUserRole; track option.App_User_Id) {\n                <nz-option [nzLabel]=\"option.FullName\" [nzValue]=\"option.App_User_Id\"></nz-option>\n              }\n            </nz-select>\n          </td>\n\n          @if (actionIndex === 0) {\n            <td [attr.rowspan]=\"stage.ListAction.length\">\n              <!-- S\u1ED1 ng\u00E0y -->\n              <extend-input-number\n                [min]=\"0\"\n                [(_ngModel)]=\"stage.NumberDay\"\n                (_ngModelChange)=\"onChangeNumberDay(stage, stageIndex, $event)\"\n              ></extend-input-number>\n            </td>\n            <td [attr.rowspan]=\"stage.ListAction.length\">\n              <!-- Ng\u00E0y b\u1EAFt \u0111\u1EA7u -->\n              <nz-date-picker\n                [name]=\"'startDate_' + stageIndex\"\n                [(ngModel)]=\"stage.StartDate\"\n                (ngModelChange)=\"onStartDateChange(stageIndex, $event)\"\n                [nzFormat]=\"'dd/MM/yyyy'\"\n                style=\"width: 100%\"\n              >\n              </nz-date-picker>\n            </td>\n            <td [attr.rowspan]=\"stage.ListAction.length\">\n              <!-- H\u1EA1n ho\u00E0n th\u00E0nh -->\n              <nz-date-picker\n                disabled=\"true\"\n                [name]=\"'endDate_' + stageIndex\"\n                [(ngModel)]=\"stage.EndDate\"\n                [nzFormat]=\"'dd/MM/yyyy'\"\n                style=\"width: 100%\"\n              >\n              </nz-date-picker>\n            </td>\n          }\n        </tr>\n      } @empty {\n        <!-- TR\u01AF\u1EDCNG H\u1EE2P NGO\u1EA0I L\u1EC6: Giai \u0111o\u1EA1n kh\u00F4ng c\u00F3 thao t\u00E1c n\u00E0o (\u0111\u1EC3 tr\u00E1nh b\u1EA3ng b\u1ECB l\u1ED7i/bi\u1EBFn m\u1EA5t) -->\n        <tr>\n          <td>\n            <input nz-input [name]=\"'stageName_' + stageIndex\" [value]=\"stage.Name || ''\" readonly />\n          </td>\n          <td>\n            <extend-select\n              [lstItem]=\"lstOrgs\"\n              [valueField]=\"'App_Org_Id'\"\n              [displayField]=\"'Name'\"\n              [(_ngModel)]=\"stage.App_Org_Id\"\n              (_ngModelChange)=\"onOrgChangeOrg($event, stage)\"\n            ></extend-select>\n          </td>\n          <td colspan=\"2\" style=\"text-align: center; color: #999\">Kh\u00F4ng c\u00F3 thao t\u00E1c</td>\n          <td></td>\n          <td></td>\n          <td></td>\n        </tr>\n      }\n    }\n  </tbody>\n</nz-table>\n", styles: [".table-wf td{border-bottom:1px solid darkgray}\n"] }]
+                    ], template: "<div nz-row class=\"form-item-no-bottom\">\n  <extend-select\n    nz-col\n    nzSpan=\"6\"\n    label=\"Quy tr\u00ECnh nghi\u1EC7p v\u1EE5\"\n    [required]=\"true\"\n    [lstItem]=\"lstTemplate\"\n    [valueField]=\"'WF_Template_Id'\"\n    [displayFields]=\"['Code', 'Name']\"\n    [(_ngModel)]=\"doc.WF_Template_Id\"\n    (_ngModelChange)=\"getTemplate(doc.WF_Template_Id)\"\n  >\n  </extend-select>\n  <div nz-col nzSpan=\"18\" style=\"padding-top: 14px\">\n    <div nz-row nzJustify=\"end\">\n      <div nz-flex nzGap=\"small\">\n        <button *ngIf=\"doc.WF_DocInstance_Id\" nz-button nzType=\"primary\" (click)=\"startDocProcess()\">\n          <nz-icon nzType=\"node-expand\" nzTheme=\"outline\" />Th\u1EF1c hi\u1EC7n quy tr\u00ECnh\n        </button>\n        <button-save (click)=\"save()\"></button-save>\n        <button-back (click)=\"goto('/workflow/doc-list')\"></button-back>\n      </div>\n    </div>\n  </div>\n</div>\n\n<box [height]=\"8\"></box>\n\n<nz-table class=\"table-wf no-hover-color\" nzSize=\"small\" [nzData]=\"wfTemplate.ListStage\" [nzShowPagination]=\"false\">\n  <thead>\n    <tr>\n      <th>Giai \u0111o\u1EA1n th\u1EF1c hi\u1EC7n</th>\n      <th>\u0110\u01A1n v\u1ECB ph\u1EE5 tr\u00E1ch</th>\n      <th>Thao t\u00E1c</th>\n      <th>Ng\u01B0\u1EDDi th\u1EF1c hi\u1EC7n</th>\n      <th nzWidth=\"100px\">S\u1ED1 ng\u00E0y</th>\n      <th nzWidth=\"130px\">Ng\u00E0y b\u1EAFt \u0111\u1EA7u</th>\n      <th nzWidth=\"130px\">H\u1EA1n ho\u00E0n th\u00E0nh</th>\n    </tr>\n  </thead>\n  <tbody class=\"no-odd-even\">\n    @for (stage of wfTemplate.ListStage; track stage; let stageIndex = $index) {\n      @for (action of stage.ListAction; track $index; let actionIndex = $index) {\n        <tr>\n          @if (actionIndex === 0) {\n            <td [attr.rowspan]=\"stage.ListAction.length\">\n              <!-- Giai \u0111o\u1EA1n th\u1EF1c hi\u1EC7n -->\n              <input nz-input [name]=\"'stageName_' + stageIndex\" [value]=\"stage.Name || ''\" readonly />\n            </td>\n            <td [attr.rowspan]=\"stage.ListAction.length\">\n              <!-- \u0110\u01A1n v\u1ECB ph\u1EE5 tr\u00E1ch -->\n              <extend-select\n                [lstItem]=\"lstOrgs\"\n                [valueField]=\"'App_Org_Id'\"\n                [displayField]=\"'Name'\"\n                [dropdownMatchSelectWidth]=\"false\"\n                [(_ngModel)]=\"stage.App_Org_Id\"\n                (_ngModelChange)=\"onOrgChangeOrg($event, stage)\"\n              ></extend-select>\n            </td>\n          }\n\n          <td>\n            <!-- Thao t\u00E1c -->\n            <input\n              nz-input\n              [name]=\"'actionText_' + stageIndex + '_' + actionIndex\"\n              [value]=\"action.ActionText || ''\"\n              readonly\n            />\n          </td>\n          <td>\n            <!-- Ng\u01B0\u1EDDi th\u1EF1c hi\u1EC7n -->\n            <nz-select\n              [(ngModel)]=\"action.ListUserRoleSelectStr\"\n              (ngModelChange)=\"onSelectChange($event, action, stage)\"\n              [nzSize]=\"'default'\"\n              nzMode=\"multiple\"\n              style=\"width: 100%\"\n            >\n              @for (option of action.ListUserRole; track option.App_User_Id) {\n                <nz-option [nzLabel]=\"option.FullName\" [nzValue]=\"option.App_User_Id\"></nz-option>\n              }\n            </nz-select>\n          </td>\n\n          @if (actionIndex === 0) {\n            <td [attr.rowspan]=\"stage.ListAction.length\">\n              <!-- S\u1ED1 ng\u00E0y -->\n              <extend-input-number\n                [min]=\"0\"\n                [(_ngModel)]=\"stage.NumberDay\"\n                (_ngModelChange)=\"onChangeNumberDay(stage, stageIndex, $event)\"\n              ></extend-input-number>\n            </td>\n            <td [attr.rowspan]=\"stage.ListAction.length\">\n              <!-- Ng\u00E0y b\u1EAFt \u0111\u1EA7u -->\n              <nz-date-picker\n                [name]=\"'startDate_' + stageIndex\"\n                [(ngModel)]=\"stage.StartDate\"\n                (ngModelChange)=\"onStartDateChange(stageIndex, $event)\"\n                [nzFormat]=\"'dd/MM/yyyy'\"\n                style=\"width: 100%\"\n              >\n              </nz-date-picker>\n            </td>\n            <td [attr.rowspan]=\"stage.ListAction.length\">\n              <!-- H\u1EA1n ho\u00E0n th\u00E0nh -->\n              <nz-date-picker\n                disabled=\"true\"\n                [name]=\"'endDate_' + stageIndex\"\n                [(ngModel)]=\"stage.EndDate\"\n                [nzFormat]=\"'dd/MM/yyyy'\"\n                style=\"width: 100%\"\n              >\n              </nz-date-picker>\n            </td>\n          }\n        </tr>\n      } @empty {\n        <!-- TR\u01AF\u1EDCNG H\u1EE2P NGO\u1EA0I L\u1EC6: Giai \u0111o\u1EA1n kh\u00F4ng c\u00F3 thao t\u00E1c n\u00E0o (\u0111\u1EC3 tr\u00E1nh b\u1EA3ng b\u1ECB l\u1ED7i/bi\u1EBFn m\u1EA5t) -->\n        <tr>\n          <td>\n            <input nz-input [name]=\"'stageName_' + stageIndex\" [value]=\"stage.Name || ''\" readonly />\n          </td>\n          <td>\n            <extend-select\n              [lstItem]=\"lstOrgs\"\n              [valueField]=\"'App_Org_Id'\"\n              [displayField]=\"'Name'\"\n              [(_ngModel)]=\"stage.App_Org_Id\"\n              (_ngModelChange)=\"onOrgChangeOrg($event, stage)\"\n            ></extend-select>\n          </td>\n          <td colspan=\"2\" style=\"text-align: center; color: #999\">Kh\u00F4ng c\u00F3 thao t\u00E1c</td>\n          <td></td>\n          <td></td>\n          <td></td>\n        </tr>\n      }\n    }\n  </tbody>\n</nz-table>\n", styles: [".table-wf td{border-bottom:1px solid darkgray}\n"] }]
         }] });
 
 class QuyTrinhXuLyComponent extends BaseComponent {
@@ -17732,7 +17990,7 @@ class WF_DocProcessComponent extends BaseComponent {
     extraButtonsTemplate;
     changeActionFn;
     ngOnInit() {
-        this.WF_DocInstance_Id = +this.getUrlParam('WF_DocInstance_Id');
+        this.WF_DocInstance_Id = +this.getUrlParam('id');
         this.getData();
     }
     updateBreadcrumb() {
@@ -17798,7 +18056,7 @@ class WF_DocProcessComponent extends BaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WF_DocProcessComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: WF_DocProcessComponent, isStandalone: true, selector: "wf-doc-process", inputs: { extraButtonsTemplate: "extraButtonsTemplate", changeActionFn: ["changeAction", "changeActionFn"] }, viewQueries: [{ propertyName: "quyTrinhXuLy", first: true, predicate: ["quyTrinhXuLy"], descendants: true }, { propertyName: "thongTinThucHien", first: true, predicate: ["thongTinThucHien"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div nz-row nzGutter=\"\">\n  <div nz-col nzSpan=\"4\">\n    <app-quy-trinh-xu-ly #quyTrinhXuLy></app-quy-trinh-xu-ly>\n  </div>\n  <div nz-col nzSpan=\"15\">\n    <nz-card nzTitle=\"N\u1ED9i dung\" nzSize=\"small\" [nzExtra]=\"btnTemplate\" style=\"min-height: calc(100vh - 100px)\">\n      <ng-content>\n        <nz-empty></nz-empty>\n      </ng-content>\n    </nz-card>\n  </div>\n  <div nz-col nzSpan=\"5\">\n    <app-thong-tin-thuc-hien\n      #thongTinThucHien\n      [IsDisplayUser]=\"true\"\n      (changeAction)=\"changeAction($event)\"\n    ></app-thong-tin-thuc-hien>\n  </div>\n</div>\n\n<ng-template #btnTemplate>\n  <div style=\"display: flex; gap: 8px; align-items: center\">\n    @if (extraButtonsTemplate) {\n      <ng-container *ngTemplateOutlet=\"extraButtonsTemplate\"></ng-container>\n    }\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.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: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i3$5.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: QuyTrinhXuLyComponent, selector: "app-quy-trinh-xu-ly" }, { kind: "component", type: ThongTinThucHienComponent, selector: "app-thong-tin-thuc-hien", inputs: ["IsDisplayUser"], outputs: ["action", "changeAction"] }, { kind: "component", type: NzEmptyComponent, selector: "nz-empty", inputs: ["nzNotFoundImage", "nzNotFoundContent", "nzNotFoundFooter"], exportAs: ["nzEmpty"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: WF_DocProcessComponent, isStandalone: true, selector: "wf-doc-process", inputs: { extraButtonsTemplate: "extraButtonsTemplate", changeActionFn: ["changeAction", "changeActionFn"] }, viewQueries: [{ propertyName: "quyTrinhXuLy", first: true, predicate: ["quyTrinhXuLy"], descendants: true }, { propertyName: "thongTinThucHien", first: true, predicate: ["thongTinThucHien"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div nz-row nzGutter=\"\">\n  <div nz-col nzSpan=\"4\">\n    <app-quy-trinh-xu-ly #quyTrinhXuLy></app-quy-trinh-xu-ly>\n  </div>\n  <div nz-col nzSpan=\"15\">\n    <nz-card nzTitle=\"N\u1ED9i dung\" nzSize=\"small\" [nzExtra]=\"btnTemplate\" style=\"min-height: calc(100vh - 100px)\">\n      <ng-content>\n        <nz-empty></nz-empty>\n      </ng-content>\n    </nz-card>\n  </div>\n  <div nz-col nzSpan=\"5\">\n    <app-thong-tin-thuc-hien\n      #thongTinThucHien\n      [IsDisplayUser]=\"true\"\n      (changeAction)=\"changeAction($event)\"\n    ></app-thong-tin-thuc-hien>\n  </div>\n</div>\n\n<ng-template #btnTemplate>\n  <div style=\"display: flex; gap: 8px; align-items: center\">\n    @if (extraButtonsTemplate) {\n      <ng-container *ngTemplateOutlet=\"extraButtonsTemplate\"></ng-container>\n    } @else {\n      <button-back size=\"small\" (click)=\"goto('/workflow/doc-list')\"> </button-back>\n    }\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.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: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i3$5.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: QuyTrinhXuLyComponent, selector: "app-quy-trinh-xu-ly" }, { kind: "component", type: ThongTinThucHienComponent, selector: "app-thong-tin-thuc-hien", inputs: ["IsDisplayUser"], outputs: ["action", "changeAction"] }, { kind: "component", type: NzEmptyComponent, selector: "nz-empty", inputs: ["nzNotFoundImage", "nzNotFoundContent", "nzNotFoundFooter"], exportAs: ["nzEmpty"] }, { kind: "component", type: ButtonBack, selector: "button-back", inputs: ["size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WF_DocProcessComponent, decorators: [{
             type: Component,
@@ -17811,7 +18069,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         QuyTrinhXuLyComponent,
                         ThongTinThucHienComponent,
                         NzEmptyComponent,
-                    ], template: "<div nz-row nzGutter=\"\">\n  <div nz-col nzSpan=\"4\">\n    <app-quy-trinh-xu-ly #quyTrinhXuLy></app-quy-trinh-xu-ly>\n  </div>\n  <div nz-col nzSpan=\"15\">\n    <nz-card nzTitle=\"N\u1ED9i dung\" nzSize=\"small\" [nzExtra]=\"btnTemplate\" style=\"min-height: calc(100vh - 100px)\">\n      <ng-content>\n        <nz-empty></nz-empty>\n      </ng-content>\n    </nz-card>\n  </div>\n  <div nz-col nzSpan=\"5\">\n    <app-thong-tin-thuc-hien\n      #thongTinThucHien\n      [IsDisplayUser]=\"true\"\n      (changeAction)=\"changeAction($event)\"\n    ></app-thong-tin-thuc-hien>\n  </div>\n</div>\n\n<ng-template #btnTemplate>\n  <div style=\"display: flex; gap: 8px; align-items: center\">\n    @if (extraButtonsTemplate) {\n      <ng-container *ngTemplateOutlet=\"extraButtonsTemplate\"></ng-container>\n    }\n  </div>\n</ng-template>\n" }]
+                        ButtonBack,
+                    ], template: "<div nz-row nzGutter=\"\">\n  <div nz-col nzSpan=\"4\">\n    <app-quy-trinh-xu-ly #quyTrinhXuLy></app-quy-trinh-xu-ly>\n  </div>\n  <div nz-col nzSpan=\"15\">\n    <nz-card nzTitle=\"N\u1ED9i dung\" nzSize=\"small\" [nzExtra]=\"btnTemplate\" style=\"min-height: calc(100vh - 100px)\">\n      <ng-content>\n        <nz-empty></nz-empty>\n      </ng-content>\n    </nz-card>\n  </div>\n  <div nz-col nzSpan=\"5\">\n    <app-thong-tin-thuc-hien\n      #thongTinThucHien\n      [IsDisplayUser]=\"true\"\n      (changeAction)=\"changeAction($event)\"\n    ></app-thong-tin-thuc-hien>\n  </div>\n</div>\n\n<ng-template #btnTemplate>\n  <div style=\"display: flex; gap: 8px; align-items: center\">\n    @if (extraButtonsTemplate) {\n      <ng-container *ngTemplateOutlet=\"extraButtonsTemplate\"></ng-container>\n    } @else {\n      <button-back size=\"small\" (click)=\"goto('/workflow/doc-list')\"> </button-back>\n    }\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { quyTrinhXuLy: [{
                 type: ViewChild,
                 args: ['quyTrinhXuLy']
@@ -18162,6 +18421,7 @@ class WF_TemplateDetail extends BaseComponent {
     lstActionRef = [];
     wfeditor;
     onSave = new EventEmitter();
+    onDeleteRule = new EventEmitter();
     ngOnInit() {
         this.getMasterData();
     }
@@ -18178,7 +18438,7 @@ class WF_TemplateDetail extends BaseComponent {
             this.wfeditor.lstAllStage = this.lstAllStage;
             this.wfeditor.lstAllAction = this.lstAllAction;
         }, (err) => this.handleError(err));
-        if (templateId && templateId != 'NEW') {
+        if (templateId) {
             this._wfService.getWfData(templateId).then((res) => {
                 if (res.Data) {
                     this.template = res.Data.Template || {};
@@ -18256,7 +18516,8 @@ class WF_TemplateDetail extends BaseComponent {
     deleteRule(obj) {
         this._wfService.deleteRule(obj.WF_TemplateStageAction_Id, obj.WF_TransitionRule_Id).then((res) => {
             this.notiService.success();
-            this.getData();
+            this.getData(obj.WF_Template_Id);
+            this.onDeleteRule.emit();
         }, (err) => {
             this.handleError(err);
             this.getData();
@@ -18266,6 +18527,7 @@ class WF_TemplateDetail extends BaseComponent {
         this._wfService.deleteRuleLine(ruleLineId).then((res) => {
             this.notiService.success();
             // this.getData();
+            this.onDeleteRule.emit();
         }, (err) => {
             this.handleError(err);
             this.getData();
@@ -18297,7 +18559,7 @@ class WF_TemplateDetail extends BaseComponent {
         this.wfeditor.actionRuleModalVisible = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WF_TemplateDetail, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: WF_TemplateDetail, isStandalone: true, selector: "wf-template-detail", outputs: { onSave: "onSave" }, viewQueries: [{ propertyName: "wfeditor", first: true, predicate: ["wfeditor"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"workflow-wrapper\" style=\"height: calc(100vh - 160px)\">\n  <app-workflow-editor\n    #wfeditor\n    [lstOrg]=\"lstOrg\"\n    [lstRole]=\"lstRole\"\n    [lstUser]=\"lstUser\"\n    [lstEmailTemplate]=\"lstEmailTemplate\"\n    (onSave)=\"save($event)\"\n    (onDeleteStage)=\"deleteStage($event)\"\n    (onDeleteAction)=\"deleteAction($event)\"\n    (onDeleteRule)=\"deleteRule($event)\"\n    (onDeleteRuleLine)=\"deleteRuleLine($event)\"\n    (onCheckRule)=\"onCheckRule($event)\"\n    (onCheckAllRule)=\"onCheckAllRule($event)\"\n  ></app-workflow-editor>\n</div>\n", styles: [".workflow-wrapper{position:relative}\n"], dependencies: [{ kind: "component", type: WorkflowEditorComponent, selector: "app-workflow-editor", inputs: ["lstOrg", "lstRole", "lstUser", "lstEmailTemplate"], outputs: ["onSave", "onDeleteStage", "onDeleteAction", "onDeleteRule", "onDeleteRuleLine", "onCheckRule", "onCheckAllRule"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: WF_TemplateDetail, isStandalone: true, selector: "wf-template-detail", outputs: { onSave: "onSave", onDeleteRule: "onDeleteRule" }, viewQueries: [{ propertyName: "wfeditor", first: true, predicate: ["wfeditor"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"workflow-wrapper\" style=\"height: calc(100vh - 160px)\">\n  <app-workflow-editor\n    #wfeditor\n    [lstOrg]=\"lstOrg\"\n    [lstRole]=\"lstRole\"\n    [lstUser]=\"lstUser\"\n    [lstEmailTemplate]=\"lstEmailTemplate\"\n    (onSave)=\"save($event)\"\n    (onDeleteStage)=\"deleteStage($event)\"\n    (onDeleteAction)=\"deleteAction($event)\"\n    (onDeleteRule)=\"deleteRule($event)\"\n    (onDeleteRuleLine)=\"deleteRuleLine($event)\"\n    (onCheckRule)=\"onCheckRule($event)\"\n    (onCheckAllRule)=\"onCheckAllRule($event)\"\n  ></app-workflow-editor>\n</div>\n", styles: [".workflow-wrapper{position:relative}\n"], dependencies: [{ kind: "component", type: WorkflowEditorComponent, selector: "app-workflow-editor", inputs: ["lstOrg", "lstRole", "lstUser", "lstEmailTemplate"], outputs: ["getdata", "onSave", "onDeleteStage", "onDeleteAction", "onDeleteRule", "onDeleteRuleLine", "onCheckRule", "onCheckAllRule"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WF_TemplateDetail, decorators: [{
             type: Component,
@@ -18307,6 +18569,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 args: ['wfeditor']
             }], onSave: [{
                 type: Output
+            }], onDeleteRule: [{
+                type: Output
             }] } });
 
 //#region MODELS
@@ -19503,22 +19767,45 @@ class WF_Template_CombineEditorComponent extends BaseComponent {
         }
     }
     getDownstreamEdges(startEdge) {
-        const resultSet = new Set();
+        const resultEdges = new Set();
+        const visitedNodes = new Set();
         const queue = [startEdge];
+        if (startEdge.From_WF_Template_Id) {
+            visitedNodes.add(startEdge.From_WF_Template_Id);
+        }
         while (queue.length > 0) {
             const currentEdge = queue.shift();
-            // Nếu chưa có trong set thì mới xử lý (để chống lỗi vòng lặp vô hạn A->B->A)
-            if (!resultSet.has(currentEdge)) {
-                resultSet.add(currentEdge);
-                // Tìm các cạnh tiếp theo: có From_ID bằng với To_ID của cạnh hiện tại
-                const nextEdges = this.lstTemplateEdge.filter((e) => e.From_WF_Template_Id === currentEdge.To_WF_Template_Id);
-                queue.push(...nextEdges);
+            // Chống lặp chính edge đó
+            if (!resultEdges.has(currentEdge)) {
+                resultEdges.add(currentEdge);
+                const targetNodeId = currentEdge.To_WF_Template_Id;
+                if (targetNodeId) {
+                    if (!visitedNodes.has(targetNodeId)) {
+                        visitedNodes.add(targetNodeId);
+                        // Tìm các cạnh đi tiếp từ Node đích này
+                        const nextEdges = this.lstTemplateEdge.filter((e) => {
+                            if (e.From_WF_Template_Id !== targetNodeId)
+                                return false;
+                            if (currentEdge.To_WF_TemplateStageAction_Id) {
+                                return e.From_WF_TemplateStageAction_Id === currentEdge.To_WF_TemplateStageAction_Id;
+                            }
+                            if (currentEdge.To_WF_TemplateStage_Id) {
+                                return e.From_WF_TemplateStage_Id === currentEdge.To_WF_TemplateStage_Id;
+                            }
+                            if (e.From_WF_TemplateStage_Id || e.From_WF_TemplateStageAction_Id) {
+                                return false;
+                            }
+                            return true;
+                        });
+                        queue.push(...nextEdges);
+                    }
+                }
             }
         }
-        return Array.from(resultSet);
+        return Array.from(resultEdges);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WF_Template_CombineEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: WF_Template_CombineEditorComponent, isStandalone: true, selector: "app-workflow-combine-editor", inputs: { lstTemplateForSelect: "lstTemplateForSelect" }, outputs: { getdata: "getdata", onSave: "onSave", onDeleteTempldateNode: "onDeleteTempldateNode" }, 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: "wftemplatedetail", first: true, predicate: ["wftemplatedetail"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  #canvas\n  class=\"workflow-canvas\"\n  [class.connecting]=\"!!connectingFrom\"\n  [class.dragging-point]=\"!!draggingPoint\"\n  style=\"width: 100%; height: 100%\"\n  (mousedown)=\"onMouseDownCanvas($event)\"\n  (mousemove)=\"onMouseMoveCanvas($event)\"\n  (mouseup)=\"onMouseUpCanvas($event)\"\n  (click)=\"onClickCanvas($event)\"\n  (wheel)=\"onWheelCanvas($event)\"\n>\n  <!-- TOOLBAR -->\n  <div class=\"toolbar\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Editor setting\" (click)=\"settingVisible = true\">\n      <nz-icon nzType=\"setting\"></nz-icon>\n    </button>\n\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Infomation\" (click)=\"infoVisible = true\">\n      <nz-icon nzType=\"info-circle\"></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Global Setting\" (click)=\"drawTemplateVisibel = true\">\n      <nz-icon nzType=\"setting\"></nz-icon> G\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <button nz-button nzSize=\"small\" nzDanger [nzLoading]=\"!ready\" nz-tooltip=\"Save (Ctrl + S)\" (click)=\"save()\">\n      <nz-icon nzType=\"save\"></nz-icon>\n    </button>\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Th\u00EAm Template m\u1EDBi\" (click)=\"isModalVisible = true\">\n      <nz-icon nzType=\"plus\" class=\"color-primary\"></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <button\n      nz-button\n      nzSize=\"small\"\n      [nzType]=\"isMoveMode ? 'primary' : 'default'\"\n      nz-tooltip=\"Move mode\"\n      (click)=\"isMoveMode = true\"\n    >\n      <nz-icon><img src=\"/assets/icon/hand-palm.png\" width=\"19\" height=\"19\" /></nz-icon>\n    </button>\n    <button\n      nz-button\n      nzSize=\"small\"\n      [nzType]=\"!isMoveMode ? 'primary' : 'default'\"\n      nz-tooltip=\"Select mode\"\n      (click)=\"isMoveMode = false\"\n    >\n      <nz-icon><img src=\"/assets/icon/cursor.png\" width=\"19\" height=\"19\" /></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <!-- UNDO / REDO -->\n    <button\n      nz-button\n      nzSize=\"small\"\n      nzType=\"default\"\n      [disabled]=\"undoStack.length === 0\"\n      nz-tooltip=\"Undo\"\n      (click)=\"undo()\"\n    >\n      <nz-icon nzType=\"undo\"></nz-icon>\n    </button>\n    <button\n      nz-button\n      nzSize=\"small\"\n      nzType=\"default\"\n      [disabled]=\"redoStack.length === 0\"\n      nz-tooltip=\"Redo\"\n      (click)=\"redo()\"\n    >\n      <nz-icon nzType=\"redo\"></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <!-- ALIGN -->\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedTemplateId.size < 2\" (click)=\"alignLeft()\">\u27F8</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedTemplateId.size < 2\" (click)=\"alignCenter()\">\u2261</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedTemplateId.size < 2\" (click)=\"alignRight()\">\u27F9</button>\n    <span class=\"divider\"></span>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedTemplateId.size < 2\" (click)=\"alignTop()\">\u21D1</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedTemplateId.size < 2\" (click)=\"alignMiddle()\">\u2550</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedTemplateId.size < 2\" (click)=\"alignBottom()\">\u21D3</button>\n    <span class=\"divider\"></span>\n    <!-- DISTRIBUTE -->\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedTemplateId.size < 3\" (click)=\"distributeHorizontal()\">\n      \u21C4\n    </button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedTemplateId.size < 3\" (click)=\"distributeVertical()\">\n      \u21C5\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <!-- ZOOM -->\n    <button nz-button nzSize=\"small\" nzType=\"default\" (click)=\"zoomOut()\" nz-tooltip=\"Zoom Out\">\n      <nz-icon nzType=\"minus\"></nz-icon>\n    </button>\n    <span>{{ Math.round(zoom * 100) }}%</span>\n    <button nz-button nzSize=\"small\" nzType=\"default\" (click)=\"zoomIn()\" nz-tooltip=\"Zoom In\">\n      <nz-icon nzType=\"plus\"></nz-icon>\n    </button>\n    <span class=\"divider\"></span>\n    <button nz-button nzSize=\"small\" nzType=\"default\" (click)=\"resetZoom()\" nz-tooltip=\"Reset Zoom (Ctrl+0)\">\n      <nz-icon nzType=\"expand\"></nz-icon>\n    </button>\n  </div>\n\n  <div\n    class=\"canvas-content\"\n    [class.panning]=\"isMoveMode\"\n    [style.width.px]=\"getCanvasWidth()\"\n    [style.height.px]=\"getCanvasHeight()\"\n    [style.transform]=\"\n      'translate(' +\n      templateCombine.editorOption.panX +\n      'px,' +\n      templateCombine.editorOption.panY +\n      'px) scale(' +\n      zoom +\n      ')'\n    \"\n  >\n    <!-- GRID -->\n    <div *ngIf=\"wfcSetting.ShowGrid\" class=\"grid-layer\"></div>\n\n    <!-- SVG EDGES -->\n    <svg #svg class=\"edges-layer\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\">\n      <g>\n        <!-- DEFS -->\n        <defs>\n          <filter id=\"edge-glow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n            <feGaussianBlur stdDeviation=\"2\" result=\"blur\" />\n            <feMerge>\n              <feMergeNode in=\"blur\" />\n              <feMergeNode in=\"SourceGraphic\" />\n            </feMerge>\n          </filter>\n\n          <marker\n            id=\"arrow-blue\"\n            markerWidth=\"10\"\n            markerHeight=\"10\"\n            refX=\"10\"\n            refY=\"5\"\n            orient=\"auto\"\n            markerUnits=\"strokeWidth\"\n          >\n            <path class=\"blue\" d=\"M0,0 L10,5 L0,10\"></path>\n          </marker>\n          <marker\n            id=\"arrow-red\"\n            markerWidth=\"10\"\n            markerHeight=\"10\"\n            refX=\"10\"\n            refY=\"5\"\n            orient=\"auto\"\n            markerUnits=\"strokeWidth\"\n          >\n            <path class=\"red\" d=\"M0,0 L10,5 L0,10\"></path>\n          </marker>\n        </defs>\n\n        <!-- EDGES B\u00CCNH TH\u01AF\u1EDCNG -->\n        <ng-container *ngFor=\"let e of normalEdges; let i = index\">\n          <path class=\"edge\" [attr.id]=\"'edge-path-' + i\" [attr.d]=\"buildPath(e)\" marker-end=\"url(#arrow-blue)\"></path>\n\n          <path\n            class=\"edge-hit\"\n            [attr.d]=\"buildPath(e)\"\n            (mouseenter)=\"onMouseEnterEdge(e)\"\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\n            (click)=\"onClickEdge(e, $event)\"\n          ></path>\n\n          <!-- \u0110\u00E3 x\u00F3a *ngIf=\"e.RuleLineDetails?.length\" \u1EDF \u0111\u00E2y \u0111\u1EC3 text lu\u00F4n hi\u1EC7n -->\n          <text\n            class=\"edge-label\"\n            style=\"fill: #1890ff; font-weight: 500\"\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\n            [attr.text-anchor]=\"'middle'\"\n          >\n            {{ e.FromStage }} / {{ e.FromAction }} > {{ e.ToStage }} / {{ e.ToAction }}\n          </text>\n        </ng-container>\n\n        <!-- EDGE \u0110ANG HOVER/SELECTED (HI\u1EC2N TH\u1ECA M\u00C0U \u0110\u1ECE) -->\n        <ng-container *ngFor=\"let e of hoverEdges; let i = index\">\n          <path\n            class=\"edge red\"\n            [attr.id]=\"'edge-path-hover-' + i\"\n            [attr.d]=\"buildPath(e)\"\n            marker-end=\"url(#arrow-red)\"\n          ></path>\n\n          <path\n            class=\"edge-hit\"\n            [attr.d]=\"buildPath(e)\"\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\n            (click)=\"onClickEdge(e, $event)\"\n          ></path>\n\n          <text\n            class=\"edge-label\"\n            style=\"font-weight: bold; fill: red\"\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\n            [attr.text-anchor]=\"'middle'\"\n          >\n            {{ e.FromStage }} / {{ e.FromAction }} > {{ e.ToStage }} / {{ e.ToAction }}\n          </text>\n        </ng-container>\n\n        <!-- PREVIEW LINE (\u0110\u01AF\u1EDCNG N\u1ED0I \u0110ANG K\u00C9O) -->\n        <path\n          *ngIf=\"connectingFrom\"\n          class=\"edge\"\n          [attr.d]=\"buildPreviewPath()\"\n          stroke-dasharray=\"5,5\"\n          marker-end=\"url(#arrow-blue)\"\n        ></path>\n      </g>\n    </svg>\n\n    <!-- BOX V\u00D9NG CH\u1ECCN MULTI -->\n    <div\n      *ngIf=\"isSelecting && selectStart && selectEnd\"\n      class=\"selection-box\"\n      [style.left.px]=\"Math.min(selectStart.x, selectEnd.x)\"\n      [style.top.px]=\"Math.min(selectStart.y, selectEnd.y)\"\n      [style.width.px]=\"Math.abs(selectEnd.x - selectStart.x)\"\n      [style.height.px]=\"Math.abs(selectEnd.y - selectStart.y)\"\n    ></div>\n\n    <!-- NODE (TEMPLATE) L\u1EDAP HI\u1EC2N TH\u1ECA TR\u00CAN C\u00D9NG -->\n    @for (n of lstTemplateNode; track n.WF_Template_Id) {\n      <nz-card\n        class=\"workflow-node\"\n        [attr.data-id]=\"n.Code\"\n        [class.selected]=\"\n          n == selectedTemplateNode || n == hoverTemplateNode || lstSelectedTemplateId.has(n.WF_Template_Id)\n        \"\n        [style.left.px]=\"n.editorOption.x\"\n        [style.top.px]=\"n.editorOption.y\"\n        [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\n        nzSize=\"small\"\n        (mousedown)=\"onMouseDownNode($event, n)\"\n        (click)=\"$event.stopPropagation(); onClickNode(n)\"\n      >\n        <div class=\"title\" style=\"color: #1890ff; display: flex; justify-content: space-between; align-items: center\">\n          <span>{{ n.Code }}</span>\n          <nz-icon nzType=\"layout\" nzTheme=\"outline\"></nz-icon>\n        </div>\n        <div\n          style=\"\n            font-size: 12px;\n            line-height: 1.2;\n            font-weight: 500;\n            height: 28px;\n            overflow: hidden;\n            text-overflow: ellipsis;\n          \"\n        >\n          {{ n.Name || \"Ch\u01B0a c\u00F3 t\u00EAn\" }}\n        </div>\n        <div style=\"font-size: 10px; color: gray; margin-top: 4px\">\n          {{ n.DocType }}\n        </div>\n\n        <!-- CONNECTOR \u0110\u1EC2 K\u00C9O D\u00C2Y -->\n        <div class=\"connector connector-right\" (click)=\"onClickConnector($event, n, 'right')\"></div>\n        <div class=\"connector connector-left\" (click)=\"onClickConnector($event, n, 'left')\"></div>\n      </nz-card>\n    }\n\n    <!-- C\u00C1C \u0110I\u1EC2M WAYPOINT \u0110\u1EC2 B\u1EBA CONG D\u00C2Y CHU\u1ED8T -->\n    @for (p of connectingPoints; track $index) {\n      @if (p != draggingPoint) {\n        <div\n          class=\"waypoint\"\n          [style.left.px]=\"p.x\"\n          [style.top.px]=\"p.y\"\n          (mousedown)=\"onmousedownPoint($event, p)\"\n          (contextmenu)=\"onRightClickPoint($event, hoverTemplateEdge!, $index)\"\n        ></div>\n      } @else {\n        <div\n          class=\"waypoint dragging\"\n          [style.left.px]=\"p.x\"\n          [style.top.px]=\"p.y\"\n          (mousedown)=\"onmousedownPoint($event, p)\"\n        ></div>\n      }\n    }\n  </div>\n</div>\n\n<!-- ==============================================\n     1. DRAWER: GLOBAL TEMPLATE SETTINGS \n=============================================== -->\n<nz-drawer\n  [nzTitle]=\"drawTemplateTitle\"\n  nzPlacement=\"right\"\n  [nzWidth]=\"500\"\n  [nzClosable]=\"false\"\n  [nzVisible]=\"drawTemplateVisibel\"\n  [nzFooter]=\"footerTplTemplate\"\n  (nzOnClose)=\"drawTemplateVisibel = false\"\n>\n  <ng-template #drawTemplateTitle> <nz-icon nzType=\"global\"></nz-icon> &nbsp; Quy tr\u00ECnh ph\u1ED1i h\u1EE3p </ng-template>\n  <ng-container *nzDrawerContent>\n    <!-- Gi\u1EEF nguy\u00EAn c\u00E1c th\u00F4ng tin chung to\u00E0n c\u1EE5c c\u1EE7a b\u1EA1n \u1EDF \u0111\u00E2y -->\n\n    <extend-input [label]=\"'Code'\" [(_ngModel)]=\"templateCombine.Code\"></extend-input>\n    <extend-input [label]=\"'Name'\" [(_ngModel)]=\"templateCombine.Name\"></extend-input>\n    <extend-textarea [label]=\"'Description'\" [(_ngModel)]=\"templateCombine.Description\"></extend-textarea>\n    <extend-checkbox [label]=\"'Active'\" [(_ngModel)]=\"templateCombine.IsActive\"></extend-checkbox>\n  </ng-container>\n\n  <ng-template #footerTplTemplate>\n    <div nz-flex [nzGap]=\"6\" [nzJustify]=\"'end'\">\n      <button nz-button nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\n      <button nz-button (click)=\"drawTemplateVisibel = false\">Close</button>\n    </div>\n  </ng-template>\n</nz-drawer>\n\n<!-- ==============================================\n     2. DRAWER: NODE SETTINGS (CHI TI\u1EBET M\u1ED8T TEMPLATE)\n=============================================== -->\n<nz-drawer\n  [nzTitle]=\"drawerTitleNode\"\n  [nzPlacement]=\"selectedTemplateNode?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\n  [nzVisible]=\"!!selectedTemplateNode\"\n  [nzWidth]=\"'90vw'\"\n  [nzClosable]=\"false\"\n  [nzFooter]=\"footerTplNode\"\n  (nzOnClose)=\"selectedTemplateNode = undefined\"\n>\n  <ng-template #drawerTitleNode>\n    <div nz-row nzJustify=\"space-between\">\n      <span style=\"font-weight: bold; color: #1890ff\"\n        ><nz-icon nzType=\"layout\"></nz-icon> TEMPLATE NODE: [{{ selectedTemplateNode?.Code }}]\n        {{ selectedTemplateNode?.Name }}</span\n      >\n      <button\n        nz-button\n        nzSize=\"small\"\n        nz-tooltip=\"Chuy\u1EC3n v\u1ECB tr\u00ED Drawer\"\n        (click)=\"\n          selectedTemplateNode!.editorOption.drawerPosition =\n            selectedTemplateNode!.editorOption.drawerPosition === 'left' ? 'right' : 'left'\n        \"\n      >\n        <nz-icon nzType=\"swap\"></nz-icon>\n      </button>\n    </div>\n  </ng-template>\n\n  <ng-container *nzDrawerContent>\n    <ng-container *ngIf=\"selectedTemplateNode\">\n      <wf-template-detail #wftemplatedetail (onSave)=\"getdata.emit()\"></wf-template-detail>\n    </ng-container>\n  </ng-container>\n\n  <ng-template #footerTplNode>\n    <div\n      nz-flex\n      [nzGap]=\"6\"\n      [nzJustify]=\"selectedTemplateNode?.editorOption?.drawerPosition == 'left' ? 'start' : 'end'\"\n    >\n      <button nz-button nzDanger [nzLoading]=\"!ready\" (click)=\"wftemplatedetail.wfeditor.save()\">Save</button>\n      <button nz-button (click)=\"selectedTemplateNode = undefined\">Close</button>\n      <button nz-button nzDanger (click)=\"deleteTemplateNode()\">Delete Template node</button>\n    </div>\n  </ng-template>\n</nz-drawer>\n\n<!-- ==============================================\n     3. DRAWER: EDGE SETTINGS (QU\u1EA2N L\u00DD QUY T\u1EAEC CHUY\u1EC2N TEMPLATE)\n=============================================== -->\n<nz-drawer\n  [nzTitle]=\"drawerTitleEdge\"\n  [nzPlacement]=\"selectedTemplateEdge?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\n  [nzClosable]=\"false\"\n  [nzWidth]=\"'450px'\"\n  [nzVisible]=\"!!selectedTemplateEdge\"\n  [nzFooter]=\"footerTplEdge\"\n  (nzOnClose)=\"selectedTemplateEdge = undefined\"\n>\n  <ng-template #drawerTitleEdge>\n    <div nz-row nzJustify=\"space-between\">\n      <span style=\"font-weight: bold; color: #ff4d4f\"><nz-icon nzType=\"swap-right\"></nz-icon> TRANSITION RULES </span>\n      <button\n        nz-button\n        nzSize=\"small\"\n        nz-tooltip=\"Chuy\u1EC3n v\u1ECB tr\u00ED Drawer\"\n        (click)=\"\n          selectedTemplateEdge!.editorOption.drawerPosition =\n            selectedTemplateEdge!.editorOption.drawerPosition === 'left' ? 'right' : 'left'\n        \"\n      >\n        <nz-icon nzType=\"swap\"></nz-icon>\n      </button>\n    </div>\n  </ng-template>\n\n  <ng-container *nzDrawerContent>\n    <ng-container *ngIf=\"selectedTemplateEdge\">\n      <!-- Th\u00F4ng tin 2 \u0111\u1EA7u n\u1ED1i -->\n      <div\n        style=\"background: #fdf5f6; padding: 12px; border: 1px solid #ffa39e; border-radius: 6px; margin-bottom: 16px\"\n      >\n        <div style=\"font-size: 14px\">\n          <strong style=\"display: inline-block; width: 70px; color: #555\">From:</strong>\n          <span style=\"color: #1890ff; font-weight: 500\">\n            [{{ getNode(selectedTemplateEdge.From_WF_Template_Id)?.Code }}]\n            {{ getNode(selectedTemplateEdge.From_WF_Template_Id)?.Name }} > {{ selectedTemplateEdge.FromStage }} >\n            {{ selectedTemplateEdge.FromAction }}\n          </span>\n        </div>\n        <div style=\"font-size: 14px; margin-top: 8px\">\n          <strong style=\"display: inline-block; width: 70px; color: #555\">Taget:</strong>\n          <span style=\"color: #1890ff; font-weight: 500\">\n            [{{ getNode(selectedTemplateEdge.To_WF_Template_Id)?.Code }}]\n            {{ getNode(selectedTemplateEdge.To_WF_Template_Id)?.Name }} > {{ selectedTemplateEdge.ToStage }} >\n            {{ selectedTemplateEdge.ToAction }}\n          </span>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n\n  <ng-template #footerTplEdge>\n    <div\n      nz-flex\n      [nzGap]=\"6\"\n      [nzJustify]=\"selectedTemplateEdge?.editorOption?.drawerPosition == 'left' ? 'start' : 'end'\"\n    >\n      <button nz-button nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save Rules</button>\n      <button\n        nz-button\n        nzDanger\n        (click)=\"\n          lstTemplateEdge.splice(lstTemplateEdge.indexOf(selectedTemplateEdge!), 1); selectedTemplateEdge = undefined\n        \"\n      >\n        Delete Transition\n      </button>\n      <button nz-button (click)=\"selectedTemplateEdge = undefined\">Close</button>\n    </div>\n  </ng-template>\n</nz-drawer>\n\n<!-- ==============================================\n     4. EDITOR SETTING & INFO\n=============================================== -->\n<nz-drawer\n  [nzTitle]=\"drawSettingTitle\"\n  nzPlacement=\"right\"\n  [nzClosable]=\"false\"\n  [nzVisible]=\"settingVisible\"\n  (nzOnClose)=\"settingVisible = false\"\n>\n  <ng-template #drawSettingTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; C\u00E0i \u0111\u1EB7t Editor </ng-template>\n  <ng-container *nzDrawerContent>\n    <div class=\"form-item-no-bottom\">\n      <extend-checkbox\n        [label]=\"'Hi\u1EC3n th\u1ECB L\u01B0\u1EDBi (Grid)'\"\n        [labelSpan]=\"0\"\n        [(_ngModel)]=\"wfcSetting.ShowGrid\"\n      ></extend-checkbox>\n    </div>\n  </ng-container>\n</nz-drawer>\n\n<nz-drawer\n  [nzTitle]=\"drawInfoTitle\"\n  nzPlacement=\"right\"\n  [nzClosable]=\"false\"\n  [nzVisible]=\"infoVisible\"\n  (nzOnClose)=\"infoVisible = false\"\n>\n  <ng-template #drawInfoTitle> <nz-icon nzType=\"info-circle\"></nz-icon> &nbsp; H\u01B0\u1EDBng d\u1EABn (Infomation) </ng-template>\n  <ng-container *nzDrawerContent>\n    <p>\n      <strong>1. C\u00E1c th\u00E0nh ph\u1EA7n:</strong> C\u00E1c \u00F4 ch\u1EEF nh\u1EADt l\u00E0 Template (Quy tr\u00ECnh nh\u1ECF), c\u00E1c \u0111\u01B0\u1EDDng n\u1ED1i l\u00E0 Transition Rule\n      (Quy t\u1EAFc chuy\u1EC3n quy tr\u00ECnh).\n    </p>\n    <p><strong>2. C\u00E1ch n\u1ED1i 2 Template:</strong></p>\n    <ul>\n      <li>Click ch\u1EA5m cam b\u00EAn ph\u1EA3i Template A, sau \u0111\u00F3 k\u00E9o v\u00E0 click v\u00E0o Template B \u0111\u1EC3 t\u1EA1o Rule n\u1ED1i.</li>\n      <li>C\u00F3 th\u1EC3 click nhi\u1EC1u \u0111i\u1EC3m trong l\u00FAc k\u00E9o \u0111\u1EC3 b\u1EBB \u0111\u01B0\u1EDDng cong tu\u1EF3 \u00FD (Waypoint).</li>\n      <li>Click \u0111\u00FAp v\u00E0o c\u1EA1nh (\u0111\u01B0\u1EDDng n\u1ED1i) \u0111ang c\u00F3 \u0111\u1EC3 t\u1EA1o th\u00EAm m\u1ED9t \u0111i\u1EC3m b\u1EBB cong m\u1EDBi.</li>\n      <li>Gi\u1EEF v\u00E0 k\u00E9o \u0111i\u1EC3m b\u1EBB cong \u0111\u1EC3 tu\u1EF3 ch\u1EC9nh \u0111\u01B0\u1EDDng \u0111i. Chu\u1ED9t ph\u1EA3i v\u00E0o \u0111i\u1EC3m \u0111\u00F3 \u0111\u1EC3 x\u00F3a n\u00F3.</li>\n    </ul>\n    <p>\n      <strong>3. Qu\u1EA3n l\u00FD Rule:</strong> Click v\u00E0o \u0111\u01B0\u1EDDng n\u1ED1i gi\u1EEFa 2 Node \u0111\u1EC3 c\u1EA5u h\u00ECnh c\u00E1c lu\u1ED3ng th\u1EF1c thi (Stored, Ph\u00E2n\n      quy\u1EC1n, G\u1EEDi mail).\n    </p>\n  </ng-container>\n</nz-drawer>\n\n<nz-modal\n  [(nzVisible)]=\"isModalVisible\"\n  nzTitle=\"Add template node\"\n  [nzWidth]=\"600\"\n  (nzOnCancel)=\"isModalVisible = false\"\n  (nzOnOk)=\"addTemplateNodes()\"\n  nzOkText=\"Add\"\n  nzOkDanger\n  nzCancelText=\"Cancel\"\n  nzMaskClosable=\"false\"\n>\n  <ng-container *nzModalContent>\n    <extend-select\n      label=\"Template\"\n      [lstItem]=\"lstTemplateForSelect\"\n      [displayField]=\"'Name'\"\n      [multiple]=\"true\"\n      [(_ngModel)]=\"lstTemplateSelected\"\n    ></extend-select>\n  </ng-container>\n</nz-modal>\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%;transition:transform .05s linear}.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}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,.minimap-combine{position:absolute;width:180px;height:125px;top:0;right:0;background-color:#eee;border:1px solid #aaa;opacity:.9;z-index:1}::ng-deep .minimap{position:absolute;width:200px;height:140px;top:8px;right:8px;background-color:#f8f9fa;border:1px solid #d9d9d9;border-radius:8px;box-shadow:0 4px 12px #0000001a;overflow:hidden;z-index:100;-webkit-user-select:none;user-select:none}::ng-deep .minimap-node{position:absolute;background-color:#bfbfbf;border-radius:2px}::ng-deep .minimap-node-round{position:absolute;background-color:#bfbfbf;border-radius:50%}::ng-deep .minimap-node-round-start{background-color:#52c41a}::ng-deep .minimap-node-round-end{background-color:#ff4d4f}::ng-deep .minimap-viewport{position:absolute;box-sizing:border-box;background-color:#1890ff26;border:1.5px solid #1890ff;border-radius:4px;z-index:2;cursor:grab;transition:none}::ng-deep .minimap-viewport.grabbing,::ng-deep .minimap-viewport:active{cursor:grabbing;background-color:#1890ff40}::ng-deep .has-floating-label.floating-label{position:relative;padding-top:14px}::ng-deep .has-floating-label nz-form-item nz-form-label{position:absolute;top:12px;left:13px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:1;height:auto;line-height:normal;padding:0 4px}::ng-deep .has-floating-label nz-form-item nz-form-label label{font-size:12px;color:var(--darkgray, #565656);font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .has-floating-label .full-width{width:100%}.has-floating-label.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.has-floating-label.floating-label nz-form-item:has(input[disabled]) nz-form-label,.has-floating-label.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.has-floating-label.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.has-floating-label.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.has-floating-label.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i3$5.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "component", type: i3$6.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: i3$6.NzDrawerContentDirective, selector: "[nzDrawerContent]", exportAs: ["nzDrawerContent"] }, { kind: "ngmodule", type: NzTagModule }, { kind: "ngmodule", type: NzRadioModule }, { 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: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵ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: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i8.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: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "component", type: ExtendSelectComponent, selector: "extend-select", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "dropdownMatchSelectWidth", "labelSpan", "labelFlex", "disabled", "required", "noBottom", "multiple", "showSelectAll", "maxTagCount", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "lstItem", "displayField", "displayFields", "info", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "itemChange", "onFocus"] }, { kind: "component", type: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: ExtendTextArea, selector: "extend-textarea", inputs: ["label", "placeHolder", "labelAlign", "floatingLabel", "displayInline", "formItemNoButtom", "labelSpan", "labelFlex", "inputFlex", "disabled", "required", "noBottom", "selectModeType", "inputClass", "size", "isSubmited", "minRows", "maxRows", "lstItem", "displayField", "valueField", "formData", "controlName", "_ngModel", "isTouched", "inputErrorMessage", "errorMessages"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "ngmodule", type: NzDividerModule }, { kind: "ngmodule", type: NzAutocompleteModule }, { 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: "component", type: WF_TemplateDetail, selector: "wf-template-detail", outputs: ["onSave"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: WF_Template_CombineEditorComponent, isStandalone: true, selector: "app-workflow-combine-editor", inputs: { lstTemplateForSelect: "lstTemplateForSelect" }, outputs: { getdata: "getdata", onSave: "onSave", onDeleteTempldateNode: "onDeleteTempldateNode" }, 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: "wftemplatedetail", first: true, predicate: ["wftemplatedetail"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  #canvas\n  class=\"workflow-canvas\"\n  [class.connecting]=\"!!connectingFrom\"\n  [class.dragging-point]=\"!!draggingPoint\"\n  style=\"width: 100%; height: 100%\"\n  (mousedown)=\"onMouseDownCanvas($event)\"\n  (mousemove)=\"onMouseMoveCanvas($event)\"\n  (mouseup)=\"onMouseUpCanvas($event)\"\n  (click)=\"onClickCanvas($event)\"\n  (wheel)=\"onWheelCanvas($event)\"\n>\n  <!-- TOOLBAR -->\n  <div class=\"toolbar\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Editor setting\" (click)=\"settingVisible = true\">\n      <nz-icon nzType=\"setting\"></nz-icon>\n    </button>\n\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Infomation\" (click)=\"infoVisible = true\">\n      <nz-icon nzType=\"info-circle\"></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Global Setting\" (click)=\"drawTemplateVisibel = true\">\n      <nz-icon nzType=\"setting\"></nz-icon> G\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <button nz-button nzSize=\"small\" nzDanger [nzLoading]=\"!ready\" nz-tooltip=\"Save (Ctrl + S)\" (click)=\"save()\">\n      <nz-icon nzType=\"save\"></nz-icon>\n    </button>\n    <button nz-button nzSize=\"small\" [nzLoading]=\"!ready\" nz-tooltip=\"Reload\" (click)=\"getdata.emit()\">\n      <nz-icon nzType=\"reload\" class=\"color-primary\"></nz-icon>\n    </button>\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Th\u00EAm Template m\u1EDBi\" (click)=\"isModalVisible = true\">\n      <nz-icon nzType=\"plus\" class=\"color-primary\"></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <button\n      nz-button\n      nzSize=\"small\"\n      [nzType]=\"isMoveMode ? 'primary' : 'default'\"\n      nz-tooltip=\"Move mode\"\n      (click)=\"isMoveMode = true\"\n    >\n      <nz-icon><img src=\"/assets/icon/hand-palm.png\" width=\"19\" height=\"19\" /></nz-icon>\n    </button>\n    <button\n      nz-button\n      nzSize=\"small\"\n      [nzType]=\"!isMoveMode ? 'primary' : 'default'\"\n      nz-tooltip=\"Select mode\"\n      (click)=\"isMoveMode = false\"\n    >\n      <nz-icon><img src=\"/assets/icon/cursor.png\" width=\"19\" height=\"19\" /></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <!-- UNDO / REDO -->\n    <button\n      nz-button\n      nzSize=\"small\"\n      nzType=\"default\"\n      [disabled]=\"undoStack.length === 0\"\n      nz-tooltip=\"Undo\"\n      (click)=\"undo()\"\n    >\n      <nz-icon nzType=\"undo\"></nz-icon>\n    </button>\n    <button\n      nz-button\n      nzSize=\"small\"\n      nzType=\"default\"\n      [disabled]=\"redoStack.length === 0\"\n      nz-tooltip=\"Redo\"\n      (click)=\"redo()\"\n    >\n      <nz-icon nzType=\"redo\"></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <!-- ALIGN -->\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedTemplateId.size < 2\" (click)=\"alignLeft()\">\u27F8</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedTemplateId.size < 2\" (click)=\"alignCenter()\">\u2261</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedTemplateId.size < 2\" (click)=\"alignRight()\">\u27F9</button>\n    <span class=\"divider\"></span>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedTemplateId.size < 2\" (click)=\"alignTop()\">\u21D1</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedTemplateId.size < 2\" (click)=\"alignMiddle()\">\u2550</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedTemplateId.size < 2\" (click)=\"alignBottom()\">\u21D3</button>\n    <span class=\"divider\"></span>\n    <!-- DISTRIBUTE -->\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedTemplateId.size < 3\" (click)=\"distributeHorizontal()\">\n      \u21C4\n    </button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedTemplateId.size < 3\" (click)=\"distributeVertical()\">\n      \u21C5\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <!-- ZOOM -->\n    <button nz-button nzSize=\"small\" nzType=\"default\" (click)=\"zoomOut()\" nz-tooltip=\"Zoom Out\">\n      <nz-icon nzType=\"minus\"></nz-icon>\n    </button>\n    <span>{{ Math.round(zoom * 100) }}%</span>\n    <button nz-button nzSize=\"small\" nzType=\"default\" (click)=\"zoomIn()\" nz-tooltip=\"Zoom In\">\n      <nz-icon nzType=\"plus\"></nz-icon>\n    </button>\n    <span class=\"divider\"></span>\n    <button nz-button nzSize=\"small\" nzType=\"default\" (click)=\"resetZoom()\" nz-tooltip=\"Reset Zoom (Ctrl+0)\">\n      <nz-icon nzType=\"expand\"></nz-icon>\n    </button>\n  </div>\n\n  <div\n    class=\"canvas-content\"\n    [class.panning]=\"isMoveMode\"\n    [style.width.px]=\"getCanvasWidth()\"\n    [style.height.px]=\"getCanvasHeight()\"\n    [style.transform]=\"\n      'translate(' +\n      templateCombine.editorOption.panX +\n      'px,' +\n      templateCombine.editorOption.panY +\n      'px) scale(' +\n      zoom +\n      ')'\n    \"\n  >\n    <!-- GRID -->\n    <div *ngIf=\"wfcSetting.ShowGrid\" class=\"grid-layer\"></div>\n\n    <!-- SVG EDGES -->\n    <svg #svg class=\"edges-layer\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\">\n      <g>\n        <!-- DEFS -->\n        <defs>\n          <filter id=\"edge-glow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n            <feGaussianBlur stdDeviation=\"2\" result=\"blur\" />\n            <feMerge>\n              <feMergeNode in=\"blur\" />\n              <feMergeNode in=\"SourceGraphic\" />\n            </feMerge>\n          </filter>\n\n          <marker\n            id=\"arrow-blue\"\n            markerWidth=\"10\"\n            markerHeight=\"10\"\n            refX=\"10\"\n            refY=\"5\"\n            orient=\"auto\"\n            markerUnits=\"strokeWidth\"\n          >\n            <path class=\"blue\" d=\"M0,0 L10,5 L0,10\"></path>\n          </marker>\n          <marker\n            id=\"arrow-red\"\n            markerWidth=\"10\"\n            markerHeight=\"10\"\n            refX=\"10\"\n            refY=\"5\"\n            orient=\"auto\"\n            markerUnits=\"strokeWidth\"\n          >\n            <path class=\"red\" d=\"M0,0 L10,5 L0,10\"></path>\n          </marker>\n        </defs>\n\n        <!-- EDGES B\u00CCNH TH\u01AF\u1EDCNG -->\n        <ng-container *ngFor=\"let e of normalEdges; let i = index\">\n          <path class=\"edge\" [attr.id]=\"'edge-path-' + i\" [attr.d]=\"buildPath(e)\" marker-end=\"url(#arrow-blue)\"></path>\n\n          <path\n            class=\"edge-hit\"\n            [attr.d]=\"buildPath(e)\"\n            (mouseenter)=\"onMouseEnterEdge(e)\"\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\n            (click)=\"onClickEdge(e, $event)\"\n          ></path>\n\n          <!-- \u0110\u00E3 x\u00F3a *ngIf=\"e.RuleLineDetails?.length\" \u1EDF \u0111\u00E2y \u0111\u1EC3 text lu\u00F4n hi\u1EC7n -->\n          <text\n            class=\"edge-label\"\n            style=\"fill: #1890ff; font-weight: 500\"\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\n            [attr.text-anchor]=\"'middle'\"\n          >\n            {{ e.FromStage }} / {{ e.FromAction }} > {{ e.ToStage }} / {{ e.ToAction }}\n          </text>\n        </ng-container>\n\n        <!-- EDGE \u0110ANG HOVER/SELECTED (HI\u1EC2N TH\u1ECA M\u00C0U \u0110\u1ECE) -->\n        <ng-container *ngFor=\"let e of hoverEdges; let i = index\">\n          <path\n            class=\"edge red\"\n            [attr.id]=\"'edge-path-hover-' + i\"\n            [attr.d]=\"buildPath(e)\"\n            marker-end=\"url(#arrow-red)\"\n          ></path>\n\n          <path\n            class=\"edge-hit\"\n            [attr.d]=\"buildPath(e)\"\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\n            (click)=\"onClickEdge(e, $event)\"\n          ></path>\n\n          <text\n            class=\"edge-label\"\n            style=\"font-weight: bold; fill: red\"\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\n            [attr.text-anchor]=\"'middle'\"\n          >\n            {{ e.FromStage }} / {{ e.FromAction }} > {{ e.ToStage }} / {{ e.ToAction }}\n          </text>\n        </ng-container>\n\n        <!-- PREVIEW LINE (\u0110\u01AF\u1EDCNG N\u1ED0I \u0110ANG K\u00C9O) -->\n        <path\n          *ngIf=\"connectingFrom\"\n          class=\"edge\"\n          [attr.d]=\"buildPreviewPath()\"\n          stroke-dasharray=\"5,5\"\n          marker-end=\"url(#arrow-blue)\"\n        ></path>\n      </g>\n    </svg>\n\n    <!-- BOX V\u00D9NG CH\u1ECCN MULTI -->\n    <div\n      *ngIf=\"isSelecting && selectStart && selectEnd\"\n      class=\"selection-box\"\n      [style.left.px]=\"Math.min(selectStart.x, selectEnd.x)\"\n      [style.top.px]=\"Math.min(selectStart.y, selectEnd.y)\"\n      [style.width.px]=\"Math.abs(selectEnd.x - selectStart.x)\"\n      [style.height.px]=\"Math.abs(selectEnd.y - selectStart.y)\"\n    ></div>\n\n    <!-- NODE (TEMPLATE) L\u1EDAP HI\u1EC2N TH\u1ECA TR\u00CAN C\u00D9NG -->\n    @for (n of lstTemplateNode; track n.WF_Template_Id) {\n      <nz-card\n        class=\"workflow-node\"\n        [attr.data-id]=\"n.Code\"\n        [class.selected]=\"\n          n == selectedTemplateNode || n == hoverTemplateNode || lstSelectedTemplateId.has(n.WF_Template_Id)\n        \"\n        [style.left.px]=\"n.editorOption.x\"\n        [style.top.px]=\"n.editorOption.y\"\n        [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\n        nzSize=\"small\"\n        (mousedown)=\"onMouseDownNode($event, n)\"\n        (click)=\"$event.stopPropagation(); onClickNode(n)\"\n      >\n        <div class=\"title\" style=\"color: #1890ff; display: flex; justify-content: space-between; align-items: center\">\n          <span>{{ n.Code }}</span>\n          <nz-icon nzType=\"layout\" nzTheme=\"outline\"></nz-icon>\n        </div>\n        <div\n          style=\"\n            font-size: 12px;\n            line-height: 1.2;\n            font-weight: 500;\n            height: 28px;\n            overflow: hidden;\n            text-overflow: ellipsis;\n          \"\n        >\n          {{ n.Name || \"Ch\u01B0a c\u00F3 t\u00EAn\" }}\n        </div>\n        <div style=\"font-size: 10px; color: gray; margin-top: 4px\">\n          {{ n.DocType }}\n        </div>\n\n        <!-- CONNECTOR \u0110\u1EC2 K\u00C9O D\u00C2Y -->\n        <div class=\"connector connector-right\" (click)=\"onClickConnector($event, n, 'right')\"></div>\n        <div class=\"connector connector-left\" (click)=\"onClickConnector($event, n, 'left')\"></div>\n      </nz-card>\n    }\n\n    <!-- C\u00C1C \u0110I\u1EC2M WAYPOINT \u0110\u1EC2 B\u1EBA CONG D\u00C2Y CHU\u1ED8T -->\n    @for (p of connectingPoints; track $index) {\n      @if (p != draggingPoint) {\n        <div\n          class=\"waypoint\"\n          [style.left.px]=\"p.x\"\n          [style.top.px]=\"p.y\"\n          (mousedown)=\"onmousedownPoint($event, p)\"\n          (contextmenu)=\"onRightClickPoint($event, hoverTemplateEdge!, $index)\"\n        ></div>\n      } @else {\n        <div\n          class=\"waypoint dragging\"\n          [style.left.px]=\"p.x\"\n          [style.top.px]=\"p.y\"\n          (mousedown)=\"onmousedownPoint($event, p)\"\n        ></div>\n      }\n    }\n  </div>\n</div>\n\n<!-- ==============================================\n     1. DRAWER: GLOBAL TEMPLATE SETTINGS \n=============================================== -->\n<nz-drawer\n  [nzTitle]=\"drawTemplateTitle\"\n  nzPlacement=\"right\"\n  [nzWidth]=\"500\"\n  [nzClosable]=\"false\"\n  [nzVisible]=\"drawTemplateVisibel\"\n  [nzFooter]=\"footerTplTemplate\"\n  (nzOnClose)=\"drawTemplateVisibel = false\"\n>\n  <ng-template #drawTemplateTitle> <nz-icon nzType=\"global\"></nz-icon> &nbsp; Quy tr\u00ECnh ph\u1ED1i h\u1EE3p </ng-template>\n  <ng-container *nzDrawerContent>\n    <!-- Gi\u1EEF nguy\u00EAn c\u00E1c th\u00F4ng tin chung to\u00E0n c\u1EE5c c\u1EE7a b\u1EA1n \u1EDF \u0111\u00E2y -->\n\n    <extend-input [label]=\"'Code'\" [(_ngModel)]=\"templateCombine.Code\"></extend-input>\n    <extend-input [label]=\"'Name'\" [(_ngModel)]=\"templateCombine.Name\"></extend-input>\n    <extend-textarea [label]=\"'Description'\" [(_ngModel)]=\"templateCombine.Description\"></extend-textarea>\n    <extend-checkbox [label]=\"'Active'\" [(_ngModel)]=\"templateCombine.IsActive\"></extend-checkbox>\n  </ng-container>\n\n  <ng-template #footerTplTemplate>\n    <div nz-flex [nzGap]=\"6\" [nzJustify]=\"'end'\">\n      <button nz-button nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\n      <button nz-button (click)=\"drawTemplateVisibel = false\">Close</button>\n    </div>\n  </ng-template>\n</nz-drawer>\n\n<!-- ==============================================\n     2. DRAWER: NODE SETTINGS (CHI TI\u1EBET M\u1ED8T TEMPLATE)\n=============================================== -->\n<nz-drawer\n  [nzTitle]=\"drawerTitleNode\"\n  [nzPlacement]=\"selectedTemplateNode?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\n  [nzVisible]=\"!!selectedTemplateNode\"\n  [nzWidth]=\"'90vw'\"\n  [nzClosable]=\"false\"\n  [nzFooter]=\"footerTplNode\"\n  (nzOnClose)=\"selectedTemplateNode = undefined\"\n>\n  <ng-template #drawerTitleNode>\n    <div nz-row nzJustify=\"space-between\">\n      <span style=\"font-weight: bold; color: #1890ff\"\n        ><nz-icon nzType=\"layout\"></nz-icon> TEMPLATE NODE: [{{ selectedTemplateNode?.Code }}]\n        {{ selectedTemplateNode?.Name }}</span\n      >\n      <button\n        nz-button\n        nzSize=\"small\"\n        nz-tooltip=\"Chuy\u1EC3n v\u1ECB tr\u00ED Drawer\"\n        (click)=\"\n          selectedTemplateNode!.editorOption.drawerPosition =\n            selectedTemplateNode!.editorOption.drawerPosition === 'left' ? 'right' : 'left'\n        \"\n      >\n        <nz-icon nzType=\"swap\"></nz-icon>\n      </button>\n    </div>\n  </ng-template>\n\n  <ng-container *nzDrawerContent>\n    <ng-container *ngIf=\"selectedTemplateNode\">\n      <wf-template-detail\n        #wftemplatedetail\n        (onSave)=\"getdata.emit()\"\n        (onDeleteRule)=\"getdata.emit()\"\n      ></wf-template-detail>\n    </ng-container>\n  </ng-container>\n\n  <ng-template #footerTplNode>\n    <div\n      nz-flex\n      [nzGap]=\"6\"\n      [nzJustify]=\"selectedTemplateNode?.editorOption?.drawerPosition == 'left' ? 'start' : 'end'\"\n    >\n      <button nz-button nzDanger [nzLoading]=\"!ready\" (click)=\"wftemplatedetail.wfeditor.save()\">Save</button>\n      <button nz-button (click)=\"selectedTemplateNode = undefined\">Close</button>\n      <button nz-button nzDanger (click)=\"deleteTemplateNode()\">Delete Template node</button>\n    </div>\n  </ng-template>\n</nz-drawer>\n\n<!-- ==============================================\n     3. DRAWER: EDGE SETTINGS (QU\u1EA2N L\u00DD QUY T\u1EAEC CHUY\u1EC2N TEMPLATE)\n=============================================== -->\n<nz-drawer\n  [nzTitle]=\"drawerTitleEdge\"\n  [nzPlacement]=\"selectedTemplateEdge?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\n  [nzClosable]=\"false\"\n  [nzWidth]=\"'450px'\"\n  [nzVisible]=\"!!selectedTemplateEdge\"\n  [nzFooter]=\"footerTplEdge\"\n  (nzOnClose)=\"selectedTemplateEdge = undefined\"\n>\n  <ng-template #drawerTitleEdge>\n    <div nz-row nzJustify=\"space-between\">\n      <span style=\"font-weight: bold; color: #ff4d4f\"><nz-icon nzType=\"swap-right\"></nz-icon> TRANSITION RULES </span>\n      <button\n        nz-button\n        nzSize=\"small\"\n        nz-tooltip=\"Chuy\u1EC3n v\u1ECB tr\u00ED Drawer\"\n        (click)=\"\n          selectedTemplateEdge!.editorOption.drawerPosition =\n            selectedTemplateEdge!.editorOption.drawerPosition === 'left' ? 'right' : 'left'\n        \"\n      >\n        <nz-icon nzType=\"swap\"></nz-icon>\n      </button>\n    </div>\n  </ng-template>\n\n  <ng-container *nzDrawerContent>\n    <ng-container *ngIf=\"selectedTemplateEdge\">\n      <!-- Th\u00F4ng tin 2 \u0111\u1EA7u n\u1ED1i -->\n      <div\n        style=\"background: #fdf5f6; padding: 12px; border: 1px solid #ffa39e; border-radius: 6px; margin-bottom: 16px\"\n      >\n        <div style=\"font-size: 14px\">\n          <strong style=\"display: inline-block; width: 70px; color: #555\">From:</strong>\n          <span style=\"color: #1890ff; font-weight: 500\">\n            [{{ getNode(selectedTemplateEdge.From_WF_Template_Id)?.Code }}]\n            {{ getNode(selectedTemplateEdge.From_WF_Template_Id)?.Name }} > {{ selectedTemplateEdge.FromStage }} >\n            {{ selectedTemplateEdge.FromAction }}\n          </span>\n        </div>\n        <div style=\"font-size: 14px; margin-top: 8px\">\n          <strong style=\"display: inline-block; width: 70px; color: #555\">Taget:</strong>\n          <span style=\"color: #1890ff; font-weight: 500\">\n            [{{ getNode(selectedTemplateEdge.To_WF_Template_Id)?.Code }}]\n            {{ getNode(selectedTemplateEdge.To_WF_Template_Id)?.Name }} > {{ selectedTemplateEdge.ToStage }} >\n            {{ selectedTemplateEdge.ToAction }}\n          </span>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n\n  <ng-template #footerTplEdge>\n    <div\n      nz-flex\n      [nzGap]=\"6\"\n      [nzJustify]=\"selectedTemplateEdge?.editorOption?.drawerPosition == 'left' ? 'start' : 'end'\"\n    >\n      <button nz-button nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save Rules</button>\n      <button\n        nz-button\n        nzDanger\n        (click)=\"\n          lstTemplateEdge.splice(lstTemplateEdge.indexOf(selectedTemplateEdge!), 1); selectedTemplateEdge = undefined\n        \"\n      >\n        Delete Transition\n      </button>\n      <button nz-button (click)=\"selectedTemplateEdge = undefined\">Close</button>\n    </div>\n  </ng-template>\n</nz-drawer>\n\n<!-- ==============================================\n     4. EDITOR SETTING & INFO\n=============================================== -->\n<nz-drawer\n  [nzTitle]=\"drawSettingTitle\"\n  nzPlacement=\"right\"\n  [nzClosable]=\"false\"\n  [nzVisible]=\"settingVisible\"\n  (nzOnClose)=\"settingVisible = false\"\n>\n  <ng-template #drawSettingTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; C\u00E0i \u0111\u1EB7t Editor </ng-template>\n  <ng-container *nzDrawerContent>\n    <div class=\"form-item-no-bottom\">\n      <extend-checkbox\n        [label]=\"'Hi\u1EC3n th\u1ECB L\u01B0\u1EDBi (Grid)'\"\n        [labelSpan]=\"0\"\n        [(_ngModel)]=\"wfcSetting.ShowGrid\"\n      ></extend-checkbox>\n    </div>\n  </ng-container>\n</nz-drawer>\n\n<nz-drawer\n  [nzTitle]=\"drawInfoTitle\"\n  nzPlacement=\"right\"\n  [nzClosable]=\"false\"\n  [nzVisible]=\"infoVisible\"\n  (nzOnClose)=\"infoVisible = false\"\n>\n  <ng-template #drawInfoTitle> <nz-icon nzType=\"info-circle\"></nz-icon> &nbsp; H\u01B0\u1EDBng d\u1EABn (Infomation) </ng-template>\n  <ng-container *nzDrawerContent>\n    <p>\n      <strong>1. C\u00E1c th\u00E0nh ph\u1EA7n:</strong> C\u00E1c \u00F4 ch\u1EEF nh\u1EADt l\u00E0 Template (Quy tr\u00ECnh nh\u1ECF), c\u00E1c \u0111\u01B0\u1EDDng n\u1ED1i l\u00E0 Transition Rule\n      (Quy t\u1EAFc chuy\u1EC3n quy tr\u00ECnh).\n    </p>\n    <p><strong>2. C\u00E1ch n\u1ED1i 2 Template:</strong></p>\n    <ul>\n      <li>Click ch\u1EA5m cam b\u00EAn ph\u1EA3i Template A, sau \u0111\u00F3 k\u00E9o v\u00E0 click v\u00E0o Template B \u0111\u1EC3 t\u1EA1o Rule n\u1ED1i.</li>\n      <li>C\u00F3 th\u1EC3 click nhi\u1EC1u \u0111i\u1EC3m trong l\u00FAc k\u00E9o \u0111\u1EC3 b\u1EBB \u0111\u01B0\u1EDDng cong tu\u1EF3 \u00FD (Waypoint).</li>\n      <li>Click \u0111\u00FAp v\u00E0o c\u1EA1nh (\u0111\u01B0\u1EDDng n\u1ED1i) \u0111ang c\u00F3 \u0111\u1EC3 t\u1EA1o th\u00EAm m\u1ED9t \u0111i\u1EC3m b\u1EBB cong m\u1EDBi.</li>\n      <li>Gi\u1EEF v\u00E0 k\u00E9o \u0111i\u1EC3m b\u1EBB cong \u0111\u1EC3 tu\u1EF3 ch\u1EC9nh \u0111\u01B0\u1EDDng \u0111i. Chu\u1ED9t ph\u1EA3i v\u00E0o \u0111i\u1EC3m \u0111\u00F3 \u0111\u1EC3 x\u00F3a n\u00F3.</li>\n    </ul>\n    <p>\n      <strong>3. Qu\u1EA3n l\u00FD Rule:</strong> Click v\u00E0o \u0111\u01B0\u1EDDng n\u1ED1i gi\u1EEFa 2 Node \u0111\u1EC3 c\u1EA5u h\u00ECnh c\u00E1c lu\u1ED3ng th\u1EF1c thi (Stored, Ph\u00E2n\n      quy\u1EC1n, G\u1EEDi mail).\n    </p>\n  </ng-container>\n</nz-drawer>\n\n<nz-modal\n  [(nzVisible)]=\"isModalVisible\"\n  nzTitle=\"Add template node\"\n  [nzWidth]=\"600\"\n  (nzOnCancel)=\"isModalVisible = false\"\n  (nzOnOk)=\"addTemplateNodes()\"\n  nzOkText=\"Add\"\n  nzOkDanger\n  nzCancelText=\"Cancel\"\n  nzMaskClosable=\"false\"\n>\n  <ng-container *nzModalContent>\n    <extend-select\n      label=\"Template\"\n      [lstItem]=\"lstTemplateForSelect\"\n      [displayField]=\"'Name'\"\n      [multiple]=\"true\"\n      [(_ngModel)]=\"lstTemplateSelected\"\n    ></extend-select>\n  </ng-container>\n</nz-modal>\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%;transition:transform .05s linear}.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}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,.minimap-combine{position:absolute;width:180px;height:125px;top:0;right:0;background-color:#eee;border:1px solid #aaa;opacity:.9;z-index:1}::ng-deep .minimap{position:absolute;width:200px;height:140px;top:8px;right:8px;background-color:#f8f9fa;border:1px solid #d9d9d9;border-radius:8px;box-shadow:0 4px 12px #0000001a;overflow:hidden;z-index:100;-webkit-user-select:none;user-select:none}::ng-deep .minimap-node{position:absolute;background-color:#bfbfbf;border-radius:2px}::ng-deep .minimap-node-round{position:absolute;background-color:#bfbfbf;border-radius:50%}::ng-deep .minimap-node-round-start{background-color:#52c41a}::ng-deep .minimap-node-round-end{background-color:#ff4d4f}::ng-deep .minimap-viewport{position:absolute;box-sizing:border-box;background-color:#1890ff26;border:1.5px solid #1890ff;border-radius:4px;z-index:2;cursor:grab;transition:none}::ng-deep .minimap-viewport.grabbing,::ng-deep .minimap-viewport:active{cursor:grabbing;background-color:#1890ff40}::ng-deep .has-floating-label.floating-label{position:relative;padding-top:14px}::ng-deep .has-floating-label nz-form-item nz-form-label{position:absolute;top:12px;left:13px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:1;height:auto;line-height:normal;padding:0 4px}::ng-deep .has-floating-label nz-form-item nz-form-label label{font-size:12px;color:var(--darkgray, #565656);font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .has-floating-label .full-width{width:100%}.has-floating-label.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.has-floating-label.floating-label nz-form-item:has(input[disabled]) nz-form-label,.has-floating-label.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.has-floating-label.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.has-floating-label.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.has-floating-label.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i3$5.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "component", type: i3$6.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: i3$6.NzDrawerContentDirective, selector: "[nzDrawerContent]", exportAs: ["nzDrawerContent"] }, { kind: "ngmodule", type: NzTagModule }, { kind: "ngmodule", type: NzRadioModule }, { 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: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵ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: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i8.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: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "component", type: ExtendSelectComponent, selector: "extend-select", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "dropdownMatchSelectWidth", "labelSpan", "labelFlex", "disabled", "required", "noBottom", "multiple", "showSelectAll", "maxTagCount", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "lstItem", "displayField", "displayFields", "info", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "itemChange", "onFocus"] }, { kind: "component", type: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: ExtendTextArea, selector: "extend-textarea", inputs: ["label", "placeHolder", "labelAlign", "floatingLabel", "displayInline", "formItemNoButtom", "labelSpan", "labelFlex", "inputFlex", "disabled", "required", "noBottom", "selectModeType", "inputClass", "size", "isSubmited", "minRows", "maxRows", "lstItem", "displayField", "valueField", "formData", "controlName", "_ngModel", "isTouched", "inputErrorMessage", "errorMessages"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "ngmodule", type: NzDividerModule }, { kind: "ngmodule", type: NzAutocompleteModule }, { 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: "component", type: WF_TemplateDetail, selector: "wf-template-detail", outputs: ["onSave", "onDeleteRule"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WF_Template_CombineEditorComponent, decorators: [{
             type: Component,
@@ -19546,7 +19833,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         NzModalComponent,
                         NzModalContentDirective,
                         WF_TemplateDetail,
-                    ], selector: 'app-workflow-combine-editor', template: "<div\n  #canvas\n  class=\"workflow-canvas\"\n  [class.connecting]=\"!!connectingFrom\"\n  [class.dragging-point]=\"!!draggingPoint\"\n  style=\"width: 100%; height: 100%\"\n  (mousedown)=\"onMouseDownCanvas($event)\"\n  (mousemove)=\"onMouseMoveCanvas($event)\"\n  (mouseup)=\"onMouseUpCanvas($event)\"\n  (click)=\"onClickCanvas($event)\"\n  (wheel)=\"onWheelCanvas($event)\"\n>\n  <!-- TOOLBAR -->\n  <div class=\"toolbar\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Editor setting\" (click)=\"settingVisible = true\">\n      <nz-icon nzType=\"setting\"></nz-icon>\n    </button>\n\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Infomation\" (click)=\"infoVisible = true\">\n      <nz-icon nzType=\"info-circle\"></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Global Setting\" (click)=\"drawTemplateVisibel = true\">\n      <nz-icon nzType=\"setting\"></nz-icon> G\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <button nz-button nzSize=\"small\" nzDanger [nzLoading]=\"!ready\" nz-tooltip=\"Save (Ctrl + S)\" (click)=\"save()\">\n      <nz-icon nzType=\"save\"></nz-icon>\n    </button>\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Th\u00EAm Template m\u1EDBi\" (click)=\"isModalVisible = true\">\n      <nz-icon nzType=\"plus\" class=\"color-primary\"></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <button\n      nz-button\n      nzSize=\"small\"\n      [nzType]=\"isMoveMode ? 'primary' : 'default'\"\n      nz-tooltip=\"Move mode\"\n      (click)=\"isMoveMode = true\"\n    >\n      <nz-icon><img src=\"/assets/icon/hand-palm.png\" width=\"19\" height=\"19\" /></nz-icon>\n    </button>\n    <button\n      nz-button\n      nzSize=\"small\"\n      [nzType]=\"!isMoveMode ? 'primary' : 'default'\"\n      nz-tooltip=\"Select mode\"\n      (click)=\"isMoveMode = false\"\n    >\n      <nz-icon><img src=\"/assets/icon/cursor.png\" width=\"19\" height=\"19\" /></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <!-- UNDO / REDO -->\n    <button\n      nz-button\n      nzSize=\"small\"\n      nzType=\"default\"\n      [disabled]=\"undoStack.length === 0\"\n      nz-tooltip=\"Undo\"\n      (click)=\"undo()\"\n    >\n      <nz-icon nzType=\"undo\"></nz-icon>\n    </button>\n    <button\n      nz-button\n      nzSize=\"small\"\n      nzType=\"default\"\n      [disabled]=\"redoStack.length === 0\"\n      nz-tooltip=\"Redo\"\n      (click)=\"redo()\"\n    >\n      <nz-icon nzType=\"redo\"></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <!-- ALIGN -->\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedTemplateId.size < 2\" (click)=\"alignLeft()\">\u27F8</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedTemplateId.size < 2\" (click)=\"alignCenter()\">\u2261</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedTemplateId.size < 2\" (click)=\"alignRight()\">\u27F9</button>\n    <span class=\"divider\"></span>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedTemplateId.size < 2\" (click)=\"alignTop()\">\u21D1</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedTemplateId.size < 2\" (click)=\"alignMiddle()\">\u2550</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedTemplateId.size < 2\" (click)=\"alignBottom()\">\u21D3</button>\n    <span class=\"divider\"></span>\n    <!-- DISTRIBUTE -->\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedTemplateId.size < 3\" (click)=\"distributeHorizontal()\">\n      \u21C4\n    </button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedTemplateId.size < 3\" (click)=\"distributeVertical()\">\n      \u21C5\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <!-- ZOOM -->\n    <button nz-button nzSize=\"small\" nzType=\"default\" (click)=\"zoomOut()\" nz-tooltip=\"Zoom Out\">\n      <nz-icon nzType=\"minus\"></nz-icon>\n    </button>\n    <span>{{ Math.round(zoom * 100) }}%</span>\n    <button nz-button nzSize=\"small\" nzType=\"default\" (click)=\"zoomIn()\" nz-tooltip=\"Zoom In\">\n      <nz-icon nzType=\"plus\"></nz-icon>\n    </button>\n    <span class=\"divider\"></span>\n    <button nz-button nzSize=\"small\" nzType=\"default\" (click)=\"resetZoom()\" nz-tooltip=\"Reset Zoom (Ctrl+0)\">\n      <nz-icon nzType=\"expand\"></nz-icon>\n    </button>\n  </div>\n\n  <div\n    class=\"canvas-content\"\n    [class.panning]=\"isMoveMode\"\n    [style.width.px]=\"getCanvasWidth()\"\n    [style.height.px]=\"getCanvasHeight()\"\n    [style.transform]=\"\n      'translate(' +\n      templateCombine.editorOption.panX +\n      'px,' +\n      templateCombine.editorOption.panY +\n      'px) scale(' +\n      zoom +\n      ')'\n    \"\n  >\n    <!-- GRID -->\n    <div *ngIf=\"wfcSetting.ShowGrid\" class=\"grid-layer\"></div>\n\n    <!-- SVG EDGES -->\n    <svg #svg class=\"edges-layer\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\">\n      <g>\n        <!-- DEFS -->\n        <defs>\n          <filter id=\"edge-glow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n            <feGaussianBlur stdDeviation=\"2\" result=\"blur\" />\n            <feMerge>\n              <feMergeNode in=\"blur\" />\n              <feMergeNode in=\"SourceGraphic\" />\n            </feMerge>\n          </filter>\n\n          <marker\n            id=\"arrow-blue\"\n            markerWidth=\"10\"\n            markerHeight=\"10\"\n            refX=\"10\"\n            refY=\"5\"\n            orient=\"auto\"\n            markerUnits=\"strokeWidth\"\n          >\n            <path class=\"blue\" d=\"M0,0 L10,5 L0,10\"></path>\n          </marker>\n          <marker\n            id=\"arrow-red\"\n            markerWidth=\"10\"\n            markerHeight=\"10\"\n            refX=\"10\"\n            refY=\"5\"\n            orient=\"auto\"\n            markerUnits=\"strokeWidth\"\n          >\n            <path class=\"red\" d=\"M0,0 L10,5 L0,10\"></path>\n          </marker>\n        </defs>\n\n        <!-- EDGES B\u00CCNH TH\u01AF\u1EDCNG -->\n        <ng-container *ngFor=\"let e of normalEdges; let i = index\">\n          <path class=\"edge\" [attr.id]=\"'edge-path-' + i\" [attr.d]=\"buildPath(e)\" marker-end=\"url(#arrow-blue)\"></path>\n\n          <path\n            class=\"edge-hit\"\n            [attr.d]=\"buildPath(e)\"\n            (mouseenter)=\"onMouseEnterEdge(e)\"\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\n            (click)=\"onClickEdge(e, $event)\"\n          ></path>\n\n          <!-- \u0110\u00E3 x\u00F3a *ngIf=\"e.RuleLineDetails?.length\" \u1EDF \u0111\u00E2y \u0111\u1EC3 text lu\u00F4n hi\u1EC7n -->\n          <text\n            class=\"edge-label\"\n            style=\"fill: #1890ff; font-weight: 500\"\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\n            [attr.text-anchor]=\"'middle'\"\n          >\n            {{ e.FromStage }} / {{ e.FromAction }} > {{ e.ToStage }} / {{ e.ToAction }}\n          </text>\n        </ng-container>\n\n        <!-- EDGE \u0110ANG HOVER/SELECTED (HI\u1EC2N TH\u1ECA M\u00C0U \u0110\u1ECE) -->\n        <ng-container *ngFor=\"let e of hoverEdges; let i = index\">\n          <path\n            class=\"edge red\"\n            [attr.id]=\"'edge-path-hover-' + i\"\n            [attr.d]=\"buildPath(e)\"\n            marker-end=\"url(#arrow-red)\"\n          ></path>\n\n          <path\n            class=\"edge-hit\"\n            [attr.d]=\"buildPath(e)\"\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\n            (click)=\"onClickEdge(e, $event)\"\n          ></path>\n\n          <text\n            class=\"edge-label\"\n            style=\"font-weight: bold; fill: red\"\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\n            [attr.text-anchor]=\"'middle'\"\n          >\n            {{ e.FromStage }} / {{ e.FromAction }} > {{ e.ToStage }} / {{ e.ToAction }}\n          </text>\n        </ng-container>\n\n        <!-- PREVIEW LINE (\u0110\u01AF\u1EDCNG N\u1ED0I \u0110ANG K\u00C9O) -->\n        <path\n          *ngIf=\"connectingFrom\"\n          class=\"edge\"\n          [attr.d]=\"buildPreviewPath()\"\n          stroke-dasharray=\"5,5\"\n          marker-end=\"url(#arrow-blue)\"\n        ></path>\n      </g>\n    </svg>\n\n    <!-- BOX V\u00D9NG CH\u1ECCN MULTI -->\n    <div\n      *ngIf=\"isSelecting && selectStart && selectEnd\"\n      class=\"selection-box\"\n      [style.left.px]=\"Math.min(selectStart.x, selectEnd.x)\"\n      [style.top.px]=\"Math.min(selectStart.y, selectEnd.y)\"\n      [style.width.px]=\"Math.abs(selectEnd.x - selectStart.x)\"\n      [style.height.px]=\"Math.abs(selectEnd.y - selectStart.y)\"\n    ></div>\n\n    <!-- NODE (TEMPLATE) L\u1EDAP HI\u1EC2N TH\u1ECA TR\u00CAN C\u00D9NG -->\n    @for (n of lstTemplateNode; track n.WF_Template_Id) {\n      <nz-card\n        class=\"workflow-node\"\n        [attr.data-id]=\"n.Code\"\n        [class.selected]=\"\n          n == selectedTemplateNode || n == hoverTemplateNode || lstSelectedTemplateId.has(n.WF_Template_Id)\n        \"\n        [style.left.px]=\"n.editorOption.x\"\n        [style.top.px]=\"n.editorOption.y\"\n        [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\n        nzSize=\"small\"\n        (mousedown)=\"onMouseDownNode($event, n)\"\n        (click)=\"$event.stopPropagation(); onClickNode(n)\"\n      >\n        <div class=\"title\" style=\"color: #1890ff; display: flex; justify-content: space-between; align-items: center\">\n          <span>{{ n.Code }}</span>\n          <nz-icon nzType=\"layout\" nzTheme=\"outline\"></nz-icon>\n        </div>\n        <div\n          style=\"\n            font-size: 12px;\n            line-height: 1.2;\n            font-weight: 500;\n            height: 28px;\n            overflow: hidden;\n            text-overflow: ellipsis;\n          \"\n        >\n          {{ n.Name || \"Ch\u01B0a c\u00F3 t\u00EAn\" }}\n        </div>\n        <div style=\"font-size: 10px; color: gray; margin-top: 4px\">\n          {{ n.DocType }}\n        </div>\n\n        <!-- CONNECTOR \u0110\u1EC2 K\u00C9O D\u00C2Y -->\n        <div class=\"connector connector-right\" (click)=\"onClickConnector($event, n, 'right')\"></div>\n        <div class=\"connector connector-left\" (click)=\"onClickConnector($event, n, 'left')\"></div>\n      </nz-card>\n    }\n\n    <!-- C\u00C1C \u0110I\u1EC2M WAYPOINT \u0110\u1EC2 B\u1EBA CONG D\u00C2Y CHU\u1ED8T -->\n    @for (p of connectingPoints; track $index) {\n      @if (p != draggingPoint) {\n        <div\n          class=\"waypoint\"\n          [style.left.px]=\"p.x\"\n          [style.top.px]=\"p.y\"\n          (mousedown)=\"onmousedownPoint($event, p)\"\n          (contextmenu)=\"onRightClickPoint($event, hoverTemplateEdge!, $index)\"\n        ></div>\n      } @else {\n        <div\n          class=\"waypoint dragging\"\n          [style.left.px]=\"p.x\"\n          [style.top.px]=\"p.y\"\n          (mousedown)=\"onmousedownPoint($event, p)\"\n        ></div>\n      }\n    }\n  </div>\n</div>\n\n<!-- ==============================================\n     1. DRAWER: GLOBAL TEMPLATE SETTINGS \n=============================================== -->\n<nz-drawer\n  [nzTitle]=\"drawTemplateTitle\"\n  nzPlacement=\"right\"\n  [nzWidth]=\"500\"\n  [nzClosable]=\"false\"\n  [nzVisible]=\"drawTemplateVisibel\"\n  [nzFooter]=\"footerTplTemplate\"\n  (nzOnClose)=\"drawTemplateVisibel = false\"\n>\n  <ng-template #drawTemplateTitle> <nz-icon nzType=\"global\"></nz-icon> &nbsp; Quy tr\u00ECnh ph\u1ED1i h\u1EE3p </ng-template>\n  <ng-container *nzDrawerContent>\n    <!-- Gi\u1EEF nguy\u00EAn c\u00E1c th\u00F4ng tin chung to\u00E0n c\u1EE5c c\u1EE7a b\u1EA1n \u1EDF \u0111\u00E2y -->\n\n    <extend-input [label]=\"'Code'\" [(_ngModel)]=\"templateCombine.Code\"></extend-input>\n    <extend-input [label]=\"'Name'\" [(_ngModel)]=\"templateCombine.Name\"></extend-input>\n    <extend-textarea [label]=\"'Description'\" [(_ngModel)]=\"templateCombine.Description\"></extend-textarea>\n    <extend-checkbox [label]=\"'Active'\" [(_ngModel)]=\"templateCombine.IsActive\"></extend-checkbox>\n  </ng-container>\n\n  <ng-template #footerTplTemplate>\n    <div nz-flex [nzGap]=\"6\" [nzJustify]=\"'end'\">\n      <button nz-button nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\n      <button nz-button (click)=\"drawTemplateVisibel = false\">Close</button>\n    </div>\n  </ng-template>\n</nz-drawer>\n\n<!-- ==============================================\n     2. DRAWER: NODE SETTINGS (CHI TI\u1EBET M\u1ED8T TEMPLATE)\n=============================================== -->\n<nz-drawer\n  [nzTitle]=\"drawerTitleNode\"\n  [nzPlacement]=\"selectedTemplateNode?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\n  [nzVisible]=\"!!selectedTemplateNode\"\n  [nzWidth]=\"'90vw'\"\n  [nzClosable]=\"false\"\n  [nzFooter]=\"footerTplNode\"\n  (nzOnClose)=\"selectedTemplateNode = undefined\"\n>\n  <ng-template #drawerTitleNode>\n    <div nz-row nzJustify=\"space-between\">\n      <span style=\"font-weight: bold; color: #1890ff\"\n        ><nz-icon nzType=\"layout\"></nz-icon> TEMPLATE NODE: [{{ selectedTemplateNode?.Code }}]\n        {{ selectedTemplateNode?.Name }}</span\n      >\n      <button\n        nz-button\n        nzSize=\"small\"\n        nz-tooltip=\"Chuy\u1EC3n v\u1ECB tr\u00ED Drawer\"\n        (click)=\"\n          selectedTemplateNode!.editorOption.drawerPosition =\n            selectedTemplateNode!.editorOption.drawerPosition === 'left' ? 'right' : 'left'\n        \"\n      >\n        <nz-icon nzType=\"swap\"></nz-icon>\n      </button>\n    </div>\n  </ng-template>\n\n  <ng-container *nzDrawerContent>\n    <ng-container *ngIf=\"selectedTemplateNode\">\n      <wf-template-detail #wftemplatedetail (onSave)=\"getdata.emit()\"></wf-template-detail>\n    </ng-container>\n  </ng-container>\n\n  <ng-template #footerTplNode>\n    <div\n      nz-flex\n      [nzGap]=\"6\"\n      [nzJustify]=\"selectedTemplateNode?.editorOption?.drawerPosition == 'left' ? 'start' : 'end'\"\n    >\n      <button nz-button nzDanger [nzLoading]=\"!ready\" (click)=\"wftemplatedetail.wfeditor.save()\">Save</button>\n      <button nz-button (click)=\"selectedTemplateNode = undefined\">Close</button>\n      <button nz-button nzDanger (click)=\"deleteTemplateNode()\">Delete Template node</button>\n    </div>\n  </ng-template>\n</nz-drawer>\n\n<!-- ==============================================\n     3. DRAWER: EDGE SETTINGS (QU\u1EA2N L\u00DD QUY T\u1EAEC CHUY\u1EC2N TEMPLATE)\n=============================================== -->\n<nz-drawer\n  [nzTitle]=\"drawerTitleEdge\"\n  [nzPlacement]=\"selectedTemplateEdge?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\n  [nzClosable]=\"false\"\n  [nzWidth]=\"'450px'\"\n  [nzVisible]=\"!!selectedTemplateEdge\"\n  [nzFooter]=\"footerTplEdge\"\n  (nzOnClose)=\"selectedTemplateEdge = undefined\"\n>\n  <ng-template #drawerTitleEdge>\n    <div nz-row nzJustify=\"space-between\">\n      <span style=\"font-weight: bold; color: #ff4d4f\"><nz-icon nzType=\"swap-right\"></nz-icon> TRANSITION RULES </span>\n      <button\n        nz-button\n        nzSize=\"small\"\n        nz-tooltip=\"Chuy\u1EC3n v\u1ECB tr\u00ED Drawer\"\n        (click)=\"\n          selectedTemplateEdge!.editorOption.drawerPosition =\n            selectedTemplateEdge!.editorOption.drawerPosition === 'left' ? 'right' : 'left'\n        \"\n      >\n        <nz-icon nzType=\"swap\"></nz-icon>\n      </button>\n    </div>\n  </ng-template>\n\n  <ng-container *nzDrawerContent>\n    <ng-container *ngIf=\"selectedTemplateEdge\">\n      <!-- Th\u00F4ng tin 2 \u0111\u1EA7u n\u1ED1i -->\n      <div\n        style=\"background: #fdf5f6; padding: 12px; border: 1px solid #ffa39e; border-radius: 6px; margin-bottom: 16px\"\n      >\n        <div style=\"font-size: 14px\">\n          <strong style=\"display: inline-block; width: 70px; color: #555\">From:</strong>\n          <span style=\"color: #1890ff; font-weight: 500\">\n            [{{ getNode(selectedTemplateEdge.From_WF_Template_Id)?.Code }}]\n            {{ getNode(selectedTemplateEdge.From_WF_Template_Id)?.Name }} > {{ selectedTemplateEdge.FromStage }} >\n            {{ selectedTemplateEdge.FromAction }}\n          </span>\n        </div>\n        <div style=\"font-size: 14px; margin-top: 8px\">\n          <strong style=\"display: inline-block; width: 70px; color: #555\">Taget:</strong>\n          <span style=\"color: #1890ff; font-weight: 500\">\n            [{{ getNode(selectedTemplateEdge.To_WF_Template_Id)?.Code }}]\n            {{ getNode(selectedTemplateEdge.To_WF_Template_Id)?.Name }} > {{ selectedTemplateEdge.ToStage }} >\n            {{ selectedTemplateEdge.ToAction }}\n          </span>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n\n  <ng-template #footerTplEdge>\n    <div\n      nz-flex\n      [nzGap]=\"6\"\n      [nzJustify]=\"selectedTemplateEdge?.editorOption?.drawerPosition == 'left' ? 'start' : 'end'\"\n    >\n      <button nz-button nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save Rules</button>\n      <button\n        nz-button\n        nzDanger\n        (click)=\"\n          lstTemplateEdge.splice(lstTemplateEdge.indexOf(selectedTemplateEdge!), 1); selectedTemplateEdge = undefined\n        \"\n      >\n        Delete Transition\n      </button>\n      <button nz-button (click)=\"selectedTemplateEdge = undefined\">Close</button>\n    </div>\n  </ng-template>\n</nz-drawer>\n\n<!-- ==============================================\n     4. EDITOR SETTING & INFO\n=============================================== -->\n<nz-drawer\n  [nzTitle]=\"drawSettingTitle\"\n  nzPlacement=\"right\"\n  [nzClosable]=\"false\"\n  [nzVisible]=\"settingVisible\"\n  (nzOnClose)=\"settingVisible = false\"\n>\n  <ng-template #drawSettingTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; C\u00E0i \u0111\u1EB7t Editor </ng-template>\n  <ng-container *nzDrawerContent>\n    <div class=\"form-item-no-bottom\">\n      <extend-checkbox\n        [label]=\"'Hi\u1EC3n th\u1ECB L\u01B0\u1EDBi (Grid)'\"\n        [labelSpan]=\"0\"\n        [(_ngModel)]=\"wfcSetting.ShowGrid\"\n      ></extend-checkbox>\n    </div>\n  </ng-container>\n</nz-drawer>\n\n<nz-drawer\n  [nzTitle]=\"drawInfoTitle\"\n  nzPlacement=\"right\"\n  [nzClosable]=\"false\"\n  [nzVisible]=\"infoVisible\"\n  (nzOnClose)=\"infoVisible = false\"\n>\n  <ng-template #drawInfoTitle> <nz-icon nzType=\"info-circle\"></nz-icon> &nbsp; H\u01B0\u1EDBng d\u1EABn (Infomation) </ng-template>\n  <ng-container *nzDrawerContent>\n    <p>\n      <strong>1. C\u00E1c th\u00E0nh ph\u1EA7n:</strong> C\u00E1c \u00F4 ch\u1EEF nh\u1EADt l\u00E0 Template (Quy tr\u00ECnh nh\u1ECF), c\u00E1c \u0111\u01B0\u1EDDng n\u1ED1i l\u00E0 Transition Rule\n      (Quy t\u1EAFc chuy\u1EC3n quy tr\u00ECnh).\n    </p>\n    <p><strong>2. C\u00E1ch n\u1ED1i 2 Template:</strong></p>\n    <ul>\n      <li>Click ch\u1EA5m cam b\u00EAn ph\u1EA3i Template A, sau \u0111\u00F3 k\u00E9o v\u00E0 click v\u00E0o Template B \u0111\u1EC3 t\u1EA1o Rule n\u1ED1i.</li>\n      <li>C\u00F3 th\u1EC3 click nhi\u1EC1u \u0111i\u1EC3m trong l\u00FAc k\u00E9o \u0111\u1EC3 b\u1EBB \u0111\u01B0\u1EDDng cong tu\u1EF3 \u00FD (Waypoint).</li>\n      <li>Click \u0111\u00FAp v\u00E0o c\u1EA1nh (\u0111\u01B0\u1EDDng n\u1ED1i) \u0111ang c\u00F3 \u0111\u1EC3 t\u1EA1o th\u00EAm m\u1ED9t \u0111i\u1EC3m b\u1EBB cong m\u1EDBi.</li>\n      <li>Gi\u1EEF v\u00E0 k\u00E9o \u0111i\u1EC3m b\u1EBB cong \u0111\u1EC3 tu\u1EF3 ch\u1EC9nh \u0111\u01B0\u1EDDng \u0111i. Chu\u1ED9t ph\u1EA3i v\u00E0o \u0111i\u1EC3m \u0111\u00F3 \u0111\u1EC3 x\u00F3a n\u00F3.</li>\n    </ul>\n    <p>\n      <strong>3. Qu\u1EA3n l\u00FD Rule:</strong> Click v\u00E0o \u0111\u01B0\u1EDDng n\u1ED1i gi\u1EEFa 2 Node \u0111\u1EC3 c\u1EA5u h\u00ECnh c\u00E1c lu\u1ED3ng th\u1EF1c thi (Stored, Ph\u00E2n\n      quy\u1EC1n, G\u1EEDi mail).\n    </p>\n  </ng-container>\n</nz-drawer>\n\n<nz-modal\n  [(nzVisible)]=\"isModalVisible\"\n  nzTitle=\"Add template node\"\n  [nzWidth]=\"600\"\n  (nzOnCancel)=\"isModalVisible = false\"\n  (nzOnOk)=\"addTemplateNodes()\"\n  nzOkText=\"Add\"\n  nzOkDanger\n  nzCancelText=\"Cancel\"\n  nzMaskClosable=\"false\"\n>\n  <ng-container *nzModalContent>\n    <extend-select\n      label=\"Template\"\n      [lstItem]=\"lstTemplateForSelect\"\n      [displayField]=\"'Name'\"\n      [multiple]=\"true\"\n      [(_ngModel)]=\"lstTemplateSelected\"\n    ></extend-select>\n  </ng-container>\n</nz-modal>\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%;transition:transform .05s linear}.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}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,.minimap-combine{position:absolute;width:180px;height:125px;top:0;right:0;background-color:#eee;border:1px solid #aaa;opacity:.9;z-index:1}::ng-deep .minimap{position:absolute;width:200px;height:140px;top:8px;right:8px;background-color:#f8f9fa;border:1px solid #d9d9d9;border-radius:8px;box-shadow:0 4px 12px #0000001a;overflow:hidden;z-index:100;-webkit-user-select:none;user-select:none}::ng-deep .minimap-node{position:absolute;background-color:#bfbfbf;border-radius:2px}::ng-deep .minimap-node-round{position:absolute;background-color:#bfbfbf;border-radius:50%}::ng-deep .minimap-node-round-start{background-color:#52c41a}::ng-deep .minimap-node-round-end{background-color:#ff4d4f}::ng-deep .minimap-viewport{position:absolute;box-sizing:border-box;background-color:#1890ff26;border:1.5px solid #1890ff;border-radius:4px;z-index:2;cursor:grab;transition:none}::ng-deep .minimap-viewport.grabbing,::ng-deep .minimap-viewport:active{cursor:grabbing;background-color:#1890ff40}::ng-deep .has-floating-label.floating-label{position:relative;padding-top:14px}::ng-deep .has-floating-label nz-form-item nz-form-label{position:absolute;top:12px;left:13px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:1;height:auto;line-height:normal;padding:0 4px}::ng-deep .has-floating-label nz-form-item nz-form-label label{font-size:12px;color:var(--darkgray, #565656);font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .has-floating-label .full-width{width:100%}.has-floating-label.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.has-floating-label.floating-label nz-form-item:has(input[disabled]) nz-form-label,.has-floating-label.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.has-floating-label.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.has-floating-label.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.has-floating-label.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}\n"] }]
+                    ], selector: 'app-workflow-combine-editor', template: "<div\n  #canvas\n  class=\"workflow-canvas\"\n  [class.connecting]=\"!!connectingFrom\"\n  [class.dragging-point]=\"!!draggingPoint\"\n  style=\"width: 100%; height: 100%\"\n  (mousedown)=\"onMouseDownCanvas($event)\"\n  (mousemove)=\"onMouseMoveCanvas($event)\"\n  (mouseup)=\"onMouseUpCanvas($event)\"\n  (click)=\"onClickCanvas($event)\"\n  (wheel)=\"onWheelCanvas($event)\"\n>\n  <!-- TOOLBAR -->\n  <div class=\"toolbar\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Editor setting\" (click)=\"settingVisible = true\">\n      <nz-icon nzType=\"setting\"></nz-icon>\n    </button>\n\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Infomation\" (click)=\"infoVisible = true\">\n      <nz-icon nzType=\"info-circle\"></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Global Setting\" (click)=\"drawTemplateVisibel = true\">\n      <nz-icon nzType=\"setting\"></nz-icon> G\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <button nz-button nzSize=\"small\" nzDanger [nzLoading]=\"!ready\" nz-tooltip=\"Save (Ctrl + S)\" (click)=\"save()\">\n      <nz-icon nzType=\"save\"></nz-icon>\n    </button>\n    <button nz-button nzSize=\"small\" [nzLoading]=\"!ready\" nz-tooltip=\"Reload\" (click)=\"getdata.emit()\">\n      <nz-icon nzType=\"reload\" class=\"color-primary\"></nz-icon>\n    </button>\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Th\u00EAm Template m\u1EDBi\" (click)=\"isModalVisible = true\">\n      <nz-icon nzType=\"plus\" class=\"color-primary\"></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <button\n      nz-button\n      nzSize=\"small\"\n      [nzType]=\"isMoveMode ? 'primary' : 'default'\"\n      nz-tooltip=\"Move mode\"\n      (click)=\"isMoveMode = true\"\n    >\n      <nz-icon><img src=\"/assets/icon/hand-palm.png\" width=\"19\" height=\"19\" /></nz-icon>\n    </button>\n    <button\n      nz-button\n      nzSize=\"small\"\n      [nzType]=\"!isMoveMode ? 'primary' : 'default'\"\n      nz-tooltip=\"Select mode\"\n      (click)=\"isMoveMode = false\"\n    >\n      <nz-icon><img src=\"/assets/icon/cursor.png\" width=\"19\" height=\"19\" /></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <!-- UNDO / REDO -->\n    <button\n      nz-button\n      nzSize=\"small\"\n      nzType=\"default\"\n      [disabled]=\"undoStack.length === 0\"\n      nz-tooltip=\"Undo\"\n      (click)=\"undo()\"\n    >\n      <nz-icon nzType=\"undo\"></nz-icon>\n    </button>\n    <button\n      nz-button\n      nzSize=\"small\"\n      nzType=\"default\"\n      [disabled]=\"redoStack.length === 0\"\n      nz-tooltip=\"Redo\"\n      (click)=\"redo()\"\n    >\n      <nz-icon nzType=\"redo\"></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <!-- ALIGN -->\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedTemplateId.size < 2\" (click)=\"alignLeft()\">\u27F8</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedTemplateId.size < 2\" (click)=\"alignCenter()\">\u2261</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedTemplateId.size < 2\" (click)=\"alignRight()\">\u27F9</button>\n    <span class=\"divider\"></span>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedTemplateId.size < 2\" (click)=\"alignTop()\">\u21D1</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedTemplateId.size < 2\" (click)=\"alignMiddle()\">\u2550</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedTemplateId.size < 2\" (click)=\"alignBottom()\">\u21D3</button>\n    <span class=\"divider\"></span>\n    <!-- DISTRIBUTE -->\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedTemplateId.size < 3\" (click)=\"distributeHorizontal()\">\n      \u21C4\n    </button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedTemplateId.size < 3\" (click)=\"distributeVertical()\">\n      \u21C5\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <!-- ZOOM -->\n    <button nz-button nzSize=\"small\" nzType=\"default\" (click)=\"zoomOut()\" nz-tooltip=\"Zoom Out\">\n      <nz-icon nzType=\"minus\"></nz-icon>\n    </button>\n    <span>{{ Math.round(zoom * 100) }}%</span>\n    <button nz-button nzSize=\"small\" nzType=\"default\" (click)=\"zoomIn()\" nz-tooltip=\"Zoom In\">\n      <nz-icon nzType=\"plus\"></nz-icon>\n    </button>\n    <span class=\"divider\"></span>\n    <button nz-button nzSize=\"small\" nzType=\"default\" (click)=\"resetZoom()\" nz-tooltip=\"Reset Zoom (Ctrl+0)\">\n      <nz-icon nzType=\"expand\"></nz-icon>\n    </button>\n  </div>\n\n  <div\n    class=\"canvas-content\"\n    [class.panning]=\"isMoveMode\"\n    [style.width.px]=\"getCanvasWidth()\"\n    [style.height.px]=\"getCanvasHeight()\"\n    [style.transform]=\"\n      'translate(' +\n      templateCombine.editorOption.panX +\n      'px,' +\n      templateCombine.editorOption.panY +\n      'px) scale(' +\n      zoom +\n      ')'\n    \"\n  >\n    <!-- GRID -->\n    <div *ngIf=\"wfcSetting.ShowGrid\" class=\"grid-layer\"></div>\n\n    <!-- SVG EDGES -->\n    <svg #svg class=\"edges-layer\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\">\n      <g>\n        <!-- DEFS -->\n        <defs>\n          <filter id=\"edge-glow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n            <feGaussianBlur stdDeviation=\"2\" result=\"blur\" />\n            <feMerge>\n              <feMergeNode in=\"blur\" />\n              <feMergeNode in=\"SourceGraphic\" />\n            </feMerge>\n          </filter>\n\n          <marker\n            id=\"arrow-blue\"\n            markerWidth=\"10\"\n            markerHeight=\"10\"\n            refX=\"10\"\n            refY=\"5\"\n            orient=\"auto\"\n            markerUnits=\"strokeWidth\"\n          >\n            <path class=\"blue\" d=\"M0,0 L10,5 L0,10\"></path>\n          </marker>\n          <marker\n            id=\"arrow-red\"\n            markerWidth=\"10\"\n            markerHeight=\"10\"\n            refX=\"10\"\n            refY=\"5\"\n            orient=\"auto\"\n            markerUnits=\"strokeWidth\"\n          >\n            <path class=\"red\" d=\"M0,0 L10,5 L0,10\"></path>\n          </marker>\n        </defs>\n\n        <!-- EDGES B\u00CCNH TH\u01AF\u1EDCNG -->\n        <ng-container *ngFor=\"let e of normalEdges; let i = index\">\n          <path class=\"edge\" [attr.id]=\"'edge-path-' + i\" [attr.d]=\"buildPath(e)\" marker-end=\"url(#arrow-blue)\"></path>\n\n          <path\n            class=\"edge-hit\"\n            [attr.d]=\"buildPath(e)\"\n            (mouseenter)=\"onMouseEnterEdge(e)\"\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\n            (click)=\"onClickEdge(e, $event)\"\n          ></path>\n\n          <!-- \u0110\u00E3 x\u00F3a *ngIf=\"e.RuleLineDetails?.length\" \u1EDF \u0111\u00E2y \u0111\u1EC3 text lu\u00F4n hi\u1EC7n -->\n          <text\n            class=\"edge-label\"\n            style=\"fill: #1890ff; font-weight: 500\"\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\n            [attr.text-anchor]=\"'middle'\"\n          >\n            {{ e.FromStage }} / {{ e.FromAction }} > {{ e.ToStage }} / {{ e.ToAction }}\n          </text>\n        </ng-container>\n\n        <!-- EDGE \u0110ANG HOVER/SELECTED (HI\u1EC2N TH\u1ECA M\u00C0U \u0110\u1ECE) -->\n        <ng-container *ngFor=\"let e of hoverEdges; let i = index\">\n          <path\n            class=\"edge red\"\n            [attr.id]=\"'edge-path-hover-' + i\"\n            [attr.d]=\"buildPath(e)\"\n            marker-end=\"url(#arrow-red)\"\n          ></path>\n\n          <path\n            class=\"edge-hit\"\n            [attr.d]=\"buildPath(e)\"\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\n            (click)=\"onClickEdge(e, $event)\"\n          ></path>\n\n          <text\n            class=\"edge-label\"\n            style=\"font-weight: bold; fill: red\"\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\n            [attr.text-anchor]=\"'middle'\"\n          >\n            {{ e.FromStage }} / {{ e.FromAction }} > {{ e.ToStage }} / {{ e.ToAction }}\n          </text>\n        </ng-container>\n\n        <!-- PREVIEW LINE (\u0110\u01AF\u1EDCNG N\u1ED0I \u0110ANG K\u00C9O) -->\n        <path\n          *ngIf=\"connectingFrom\"\n          class=\"edge\"\n          [attr.d]=\"buildPreviewPath()\"\n          stroke-dasharray=\"5,5\"\n          marker-end=\"url(#arrow-blue)\"\n        ></path>\n      </g>\n    </svg>\n\n    <!-- BOX V\u00D9NG CH\u1ECCN MULTI -->\n    <div\n      *ngIf=\"isSelecting && selectStart && selectEnd\"\n      class=\"selection-box\"\n      [style.left.px]=\"Math.min(selectStart.x, selectEnd.x)\"\n      [style.top.px]=\"Math.min(selectStart.y, selectEnd.y)\"\n      [style.width.px]=\"Math.abs(selectEnd.x - selectStart.x)\"\n      [style.height.px]=\"Math.abs(selectEnd.y - selectStart.y)\"\n    ></div>\n\n    <!-- NODE (TEMPLATE) L\u1EDAP HI\u1EC2N TH\u1ECA TR\u00CAN C\u00D9NG -->\n    @for (n of lstTemplateNode; track n.WF_Template_Id) {\n      <nz-card\n        class=\"workflow-node\"\n        [attr.data-id]=\"n.Code\"\n        [class.selected]=\"\n          n == selectedTemplateNode || n == hoverTemplateNode || lstSelectedTemplateId.has(n.WF_Template_Id)\n        \"\n        [style.left.px]=\"n.editorOption.x\"\n        [style.top.px]=\"n.editorOption.y\"\n        [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\n        nzSize=\"small\"\n        (mousedown)=\"onMouseDownNode($event, n)\"\n        (click)=\"$event.stopPropagation(); onClickNode(n)\"\n      >\n        <div class=\"title\" style=\"color: #1890ff; display: flex; justify-content: space-between; align-items: center\">\n          <span>{{ n.Code }}</span>\n          <nz-icon nzType=\"layout\" nzTheme=\"outline\"></nz-icon>\n        </div>\n        <div\n          style=\"\n            font-size: 12px;\n            line-height: 1.2;\n            font-weight: 500;\n            height: 28px;\n            overflow: hidden;\n            text-overflow: ellipsis;\n          \"\n        >\n          {{ n.Name || \"Ch\u01B0a c\u00F3 t\u00EAn\" }}\n        </div>\n        <div style=\"font-size: 10px; color: gray; margin-top: 4px\">\n          {{ n.DocType }}\n        </div>\n\n        <!-- CONNECTOR \u0110\u1EC2 K\u00C9O D\u00C2Y -->\n        <div class=\"connector connector-right\" (click)=\"onClickConnector($event, n, 'right')\"></div>\n        <div class=\"connector connector-left\" (click)=\"onClickConnector($event, n, 'left')\"></div>\n      </nz-card>\n    }\n\n    <!-- C\u00C1C \u0110I\u1EC2M WAYPOINT \u0110\u1EC2 B\u1EBA CONG D\u00C2Y CHU\u1ED8T -->\n    @for (p of connectingPoints; track $index) {\n      @if (p != draggingPoint) {\n        <div\n          class=\"waypoint\"\n          [style.left.px]=\"p.x\"\n          [style.top.px]=\"p.y\"\n          (mousedown)=\"onmousedownPoint($event, p)\"\n          (contextmenu)=\"onRightClickPoint($event, hoverTemplateEdge!, $index)\"\n        ></div>\n      } @else {\n        <div\n          class=\"waypoint dragging\"\n          [style.left.px]=\"p.x\"\n          [style.top.px]=\"p.y\"\n          (mousedown)=\"onmousedownPoint($event, p)\"\n        ></div>\n      }\n    }\n  </div>\n</div>\n\n<!-- ==============================================\n     1. DRAWER: GLOBAL TEMPLATE SETTINGS \n=============================================== -->\n<nz-drawer\n  [nzTitle]=\"drawTemplateTitle\"\n  nzPlacement=\"right\"\n  [nzWidth]=\"500\"\n  [nzClosable]=\"false\"\n  [nzVisible]=\"drawTemplateVisibel\"\n  [nzFooter]=\"footerTplTemplate\"\n  (nzOnClose)=\"drawTemplateVisibel = false\"\n>\n  <ng-template #drawTemplateTitle> <nz-icon nzType=\"global\"></nz-icon> &nbsp; Quy tr\u00ECnh ph\u1ED1i h\u1EE3p </ng-template>\n  <ng-container *nzDrawerContent>\n    <!-- Gi\u1EEF nguy\u00EAn c\u00E1c th\u00F4ng tin chung to\u00E0n c\u1EE5c c\u1EE7a b\u1EA1n \u1EDF \u0111\u00E2y -->\n\n    <extend-input [label]=\"'Code'\" [(_ngModel)]=\"templateCombine.Code\"></extend-input>\n    <extend-input [label]=\"'Name'\" [(_ngModel)]=\"templateCombine.Name\"></extend-input>\n    <extend-textarea [label]=\"'Description'\" [(_ngModel)]=\"templateCombine.Description\"></extend-textarea>\n    <extend-checkbox [label]=\"'Active'\" [(_ngModel)]=\"templateCombine.IsActive\"></extend-checkbox>\n  </ng-container>\n\n  <ng-template #footerTplTemplate>\n    <div nz-flex [nzGap]=\"6\" [nzJustify]=\"'end'\">\n      <button nz-button nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\n      <button nz-button (click)=\"drawTemplateVisibel = false\">Close</button>\n    </div>\n  </ng-template>\n</nz-drawer>\n\n<!-- ==============================================\n     2. DRAWER: NODE SETTINGS (CHI TI\u1EBET M\u1ED8T TEMPLATE)\n=============================================== -->\n<nz-drawer\n  [nzTitle]=\"drawerTitleNode\"\n  [nzPlacement]=\"selectedTemplateNode?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\n  [nzVisible]=\"!!selectedTemplateNode\"\n  [nzWidth]=\"'90vw'\"\n  [nzClosable]=\"false\"\n  [nzFooter]=\"footerTplNode\"\n  (nzOnClose)=\"selectedTemplateNode = undefined\"\n>\n  <ng-template #drawerTitleNode>\n    <div nz-row nzJustify=\"space-between\">\n      <span style=\"font-weight: bold; color: #1890ff\"\n        ><nz-icon nzType=\"layout\"></nz-icon> TEMPLATE NODE: [{{ selectedTemplateNode?.Code }}]\n        {{ selectedTemplateNode?.Name }}</span\n      >\n      <button\n        nz-button\n        nzSize=\"small\"\n        nz-tooltip=\"Chuy\u1EC3n v\u1ECB tr\u00ED Drawer\"\n        (click)=\"\n          selectedTemplateNode!.editorOption.drawerPosition =\n            selectedTemplateNode!.editorOption.drawerPosition === 'left' ? 'right' : 'left'\n        \"\n      >\n        <nz-icon nzType=\"swap\"></nz-icon>\n      </button>\n    </div>\n  </ng-template>\n\n  <ng-container *nzDrawerContent>\n    <ng-container *ngIf=\"selectedTemplateNode\">\n      <wf-template-detail\n        #wftemplatedetail\n        (onSave)=\"getdata.emit()\"\n        (onDeleteRule)=\"getdata.emit()\"\n      ></wf-template-detail>\n    </ng-container>\n  </ng-container>\n\n  <ng-template #footerTplNode>\n    <div\n      nz-flex\n      [nzGap]=\"6\"\n      [nzJustify]=\"selectedTemplateNode?.editorOption?.drawerPosition == 'left' ? 'start' : 'end'\"\n    >\n      <button nz-button nzDanger [nzLoading]=\"!ready\" (click)=\"wftemplatedetail.wfeditor.save()\">Save</button>\n      <button nz-button (click)=\"selectedTemplateNode = undefined\">Close</button>\n      <button nz-button nzDanger (click)=\"deleteTemplateNode()\">Delete Template node</button>\n    </div>\n  </ng-template>\n</nz-drawer>\n\n<!-- ==============================================\n     3. DRAWER: EDGE SETTINGS (QU\u1EA2N L\u00DD QUY T\u1EAEC CHUY\u1EC2N TEMPLATE)\n=============================================== -->\n<nz-drawer\n  [nzTitle]=\"drawerTitleEdge\"\n  [nzPlacement]=\"selectedTemplateEdge?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\n  [nzClosable]=\"false\"\n  [nzWidth]=\"'450px'\"\n  [nzVisible]=\"!!selectedTemplateEdge\"\n  [nzFooter]=\"footerTplEdge\"\n  (nzOnClose)=\"selectedTemplateEdge = undefined\"\n>\n  <ng-template #drawerTitleEdge>\n    <div nz-row nzJustify=\"space-between\">\n      <span style=\"font-weight: bold; color: #ff4d4f\"><nz-icon nzType=\"swap-right\"></nz-icon> TRANSITION RULES </span>\n      <button\n        nz-button\n        nzSize=\"small\"\n        nz-tooltip=\"Chuy\u1EC3n v\u1ECB tr\u00ED Drawer\"\n        (click)=\"\n          selectedTemplateEdge!.editorOption.drawerPosition =\n            selectedTemplateEdge!.editorOption.drawerPosition === 'left' ? 'right' : 'left'\n        \"\n      >\n        <nz-icon nzType=\"swap\"></nz-icon>\n      </button>\n    </div>\n  </ng-template>\n\n  <ng-container *nzDrawerContent>\n    <ng-container *ngIf=\"selectedTemplateEdge\">\n      <!-- Th\u00F4ng tin 2 \u0111\u1EA7u n\u1ED1i -->\n      <div\n        style=\"background: #fdf5f6; padding: 12px; border: 1px solid #ffa39e; border-radius: 6px; margin-bottom: 16px\"\n      >\n        <div style=\"font-size: 14px\">\n          <strong style=\"display: inline-block; width: 70px; color: #555\">From:</strong>\n          <span style=\"color: #1890ff; font-weight: 500\">\n            [{{ getNode(selectedTemplateEdge.From_WF_Template_Id)?.Code }}]\n            {{ getNode(selectedTemplateEdge.From_WF_Template_Id)?.Name }} > {{ selectedTemplateEdge.FromStage }} >\n            {{ selectedTemplateEdge.FromAction }}\n          </span>\n        </div>\n        <div style=\"font-size: 14px; margin-top: 8px\">\n          <strong style=\"display: inline-block; width: 70px; color: #555\">Taget:</strong>\n          <span style=\"color: #1890ff; font-weight: 500\">\n            [{{ getNode(selectedTemplateEdge.To_WF_Template_Id)?.Code }}]\n            {{ getNode(selectedTemplateEdge.To_WF_Template_Id)?.Name }} > {{ selectedTemplateEdge.ToStage }} >\n            {{ selectedTemplateEdge.ToAction }}\n          </span>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n\n  <ng-template #footerTplEdge>\n    <div\n      nz-flex\n      [nzGap]=\"6\"\n      [nzJustify]=\"selectedTemplateEdge?.editorOption?.drawerPosition == 'left' ? 'start' : 'end'\"\n    >\n      <button nz-button nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save Rules</button>\n      <button\n        nz-button\n        nzDanger\n        (click)=\"\n          lstTemplateEdge.splice(lstTemplateEdge.indexOf(selectedTemplateEdge!), 1); selectedTemplateEdge = undefined\n        \"\n      >\n        Delete Transition\n      </button>\n      <button nz-button (click)=\"selectedTemplateEdge = undefined\">Close</button>\n    </div>\n  </ng-template>\n</nz-drawer>\n\n<!-- ==============================================\n     4. EDITOR SETTING & INFO\n=============================================== -->\n<nz-drawer\n  [nzTitle]=\"drawSettingTitle\"\n  nzPlacement=\"right\"\n  [nzClosable]=\"false\"\n  [nzVisible]=\"settingVisible\"\n  (nzOnClose)=\"settingVisible = false\"\n>\n  <ng-template #drawSettingTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; C\u00E0i \u0111\u1EB7t Editor </ng-template>\n  <ng-container *nzDrawerContent>\n    <div class=\"form-item-no-bottom\">\n      <extend-checkbox\n        [label]=\"'Hi\u1EC3n th\u1ECB L\u01B0\u1EDBi (Grid)'\"\n        [labelSpan]=\"0\"\n        [(_ngModel)]=\"wfcSetting.ShowGrid\"\n      ></extend-checkbox>\n    </div>\n  </ng-container>\n</nz-drawer>\n\n<nz-drawer\n  [nzTitle]=\"drawInfoTitle\"\n  nzPlacement=\"right\"\n  [nzClosable]=\"false\"\n  [nzVisible]=\"infoVisible\"\n  (nzOnClose)=\"infoVisible = false\"\n>\n  <ng-template #drawInfoTitle> <nz-icon nzType=\"info-circle\"></nz-icon> &nbsp; H\u01B0\u1EDBng d\u1EABn (Infomation) </ng-template>\n  <ng-container *nzDrawerContent>\n    <p>\n      <strong>1. C\u00E1c th\u00E0nh ph\u1EA7n:</strong> C\u00E1c \u00F4 ch\u1EEF nh\u1EADt l\u00E0 Template (Quy tr\u00ECnh nh\u1ECF), c\u00E1c \u0111\u01B0\u1EDDng n\u1ED1i l\u00E0 Transition Rule\n      (Quy t\u1EAFc chuy\u1EC3n quy tr\u00ECnh).\n    </p>\n    <p><strong>2. C\u00E1ch n\u1ED1i 2 Template:</strong></p>\n    <ul>\n      <li>Click ch\u1EA5m cam b\u00EAn ph\u1EA3i Template A, sau \u0111\u00F3 k\u00E9o v\u00E0 click v\u00E0o Template B \u0111\u1EC3 t\u1EA1o Rule n\u1ED1i.</li>\n      <li>C\u00F3 th\u1EC3 click nhi\u1EC1u \u0111i\u1EC3m trong l\u00FAc k\u00E9o \u0111\u1EC3 b\u1EBB \u0111\u01B0\u1EDDng cong tu\u1EF3 \u00FD (Waypoint).</li>\n      <li>Click \u0111\u00FAp v\u00E0o c\u1EA1nh (\u0111\u01B0\u1EDDng n\u1ED1i) \u0111ang c\u00F3 \u0111\u1EC3 t\u1EA1o th\u00EAm m\u1ED9t \u0111i\u1EC3m b\u1EBB cong m\u1EDBi.</li>\n      <li>Gi\u1EEF v\u00E0 k\u00E9o \u0111i\u1EC3m b\u1EBB cong \u0111\u1EC3 tu\u1EF3 ch\u1EC9nh \u0111\u01B0\u1EDDng \u0111i. Chu\u1ED9t ph\u1EA3i v\u00E0o \u0111i\u1EC3m \u0111\u00F3 \u0111\u1EC3 x\u00F3a n\u00F3.</li>\n    </ul>\n    <p>\n      <strong>3. Qu\u1EA3n l\u00FD Rule:</strong> Click v\u00E0o \u0111\u01B0\u1EDDng n\u1ED1i gi\u1EEFa 2 Node \u0111\u1EC3 c\u1EA5u h\u00ECnh c\u00E1c lu\u1ED3ng th\u1EF1c thi (Stored, Ph\u00E2n\n      quy\u1EC1n, G\u1EEDi mail).\n    </p>\n  </ng-container>\n</nz-drawer>\n\n<nz-modal\n  [(nzVisible)]=\"isModalVisible\"\n  nzTitle=\"Add template node\"\n  [nzWidth]=\"600\"\n  (nzOnCancel)=\"isModalVisible = false\"\n  (nzOnOk)=\"addTemplateNodes()\"\n  nzOkText=\"Add\"\n  nzOkDanger\n  nzCancelText=\"Cancel\"\n  nzMaskClosable=\"false\"\n>\n  <ng-container *nzModalContent>\n    <extend-select\n      label=\"Template\"\n      [lstItem]=\"lstTemplateForSelect\"\n      [displayField]=\"'Name'\"\n      [multiple]=\"true\"\n      [(_ngModel)]=\"lstTemplateSelected\"\n    ></extend-select>\n  </ng-container>\n</nz-modal>\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%;transition:transform .05s linear}.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}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,.minimap-combine{position:absolute;width:180px;height:125px;top:0;right:0;background-color:#eee;border:1px solid #aaa;opacity:.9;z-index:1}::ng-deep .minimap{position:absolute;width:200px;height:140px;top:8px;right:8px;background-color:#f8f9fa;border:1px solid #d9d9d9;border-radius:8px;box-shadow:0 4px 12px #0000001a;overflow:hidden;z-index:100;-webkit-user-select:none;user-select:none}::ng-deep .minimap-node{position:absolute;background-color:#bfbfbf;border-radius:2px}::ng-deep .minimap-node-round{position:absolute;background-color:#bfbfbf;border-radius:50%}::ng-deep .minimap-node-round-start{background-color:#52c41a}::ng-deep .minimap-node-round-end{background-color:#ff4d4f}::ng-deep .minimap-viewport{position:absolute;box-sizing:border-box;background-color:#1890ff26;border:1.5px solid #1890ff;border-radius:4px;z-index:2;cursor:grab;transition:none}::ng-deep .minimap-viewport.grabbing,::ng-deep .minimap-viewport:active{cursor:grabbing;background-color:#1890ff40}::ng-deep .has-floating-label.floating-label{position:relative;padding-top:14px}::ng-deep .has-floating-label nz-form-item nz-form-label{position:absolute;top:12px;left:13px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:1;height:auto;line-height:normal;padding:0 4px}::ng-deep .has-floating-label nz-form-item nz-form-label label{font-size:12px;color:var(--darkgray, #565656);font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .has-floating-label .full-width{width:100%}.has-floating-label.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.has-floating-label.floating-label nz-form-item:has(input[disabled]) nz-form-label,.has-floating-label.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.has-floating-label.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.has-floating-label.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.has-floating-label.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}\n"] }]
         }], propDecorators: { lstTemplateForSelect: [{
                 type: Input
             }], getdata: [{
@@ -19636,9 +19923,231 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 args: ['wfeditor']
             }] } });
 
+class WFDocSwimlaneComponent extends BaseComponent {
+    service = inject(WF_DocService);
+    hoveredLine = null;
+    wrapperRef;
+    data = { Lanes: [], Nodes: [], Links: [] };
+    drawnLines = [];
+    ngOnInit() {
+        this.getdata();
+    }
+    ngAfterViewInit() { }
+    onResize() {
+        this.calculateLines();
+    }
+    getdata() {
+        const id = this.getUrlParam('id');
+        this.service.GetSwimlaneData(id).then((res) => {
+            let rawData = res.Data;
+            if (rawData.Links) {
+                rawData.Links.sort((a, b) => (a.Sequence || 0) - (b.Sequence || 0));
+                rawData.Links = this.groupLinks(rawData.Links);
+            }
+            this.data = rawData;
+            setTimeout(() => this.calculateLines(), 200);
+        });
+    }
+    groupLinks(links) {
+        const groupedMap = new Map();
+        links.forEach((link) => {
+            // Tạo key duy nhất để gom nhóm (Gộp theo Nguồn + Đích + Tên + Loại nét đứt/liền)
+            const key = `${link.SourceId}_${link.TargetId}_${link.Label}_${link.Type}`;
+            if (groupedMap.has(key)) {
+                const existingLink = groupedMap.get(key);
+                // Nếu đã có, nối thêm số thứ tự bằng dấu phẩy (VD: "1" thành "1, 3")
+                if (link.Sequence) {
+                    existingLink.SequenceLabel = existingLink.SequenceLabel
+                        ? `${existingLink.SequenceLabel}, ${link.Sequence}`
+                        : `${link.Sequence}`;
+                }
+            }
+            else {
+                // Nếu chưa có, tạo mới và khởi tạo label
+                groupedMap.set(key, {
+                    ...link,
+                    SequenceLabel: link.Sequence ? `${link.Sequence}` : '',
+                });
+            }
+        });
+        return Array.from(groupedMap.values());
+    }
+    getNodesForLane(laneId) {
+        return this.data.Nodes.filter((n) => n.LaneId === laneId);
+    }
+    calculateLines() {
+        if (!this.wrapperRef || !this.data.Links)
+            return;
+        const wrapperRect = this.wrapperRef.nativeElement.getBoundingClientRect();
+        // BƯỚC 1: Quét để đếm số lượng đường thẳng qua lại giữa 2 Node bất kỳ
+        const pairRegistry = {};
+        const pairCounter = {};
+        const sourceInterRegistry = {};
+        const sourceInterCounter = {};
+        const laneSkipCounter = {};
+        this.data.Links.forEach((link) => {
+            // Sort ID để gom nhóm (A->B hay B->A đều tính chung là 1 cặp)
+            const pairKey = [link.SourceId, link.TargetId].sort().join('|');
+            pairRegistry[pairKey] = (pairRegistry[pairKey] || 0) + 1;
+            if (link.Type === 'inter') {
+                sourceInterRegistry[link.SourceId] = (sourceInterRegistry[link.SourceId] || 0) + 1;
+            }
+        });
+        this.drawnLines = this.data.Links.map((link) => {
+            const sourceEl = document.getElementById(`node-${link.SourceId}`);
+            const targetEl = document.getElementById(`node-${link.TargetId}`);
+            if (!sourceEl || !targetEl)
+                return null;
+            const sRect = sourceEl.getBoundingClientRect();
+            const tRect = targetEl.getBoundingClientRect();
+            const pairKey = [link.SourceId, link.TargetId].sort().join('|');
+            const totalInPair = pairRegistry[pairKey];
+            const currentIndex = pairCounter[pairKey] || 0;
+            pairCounter[pairKey] = currentIndex + 1;
+            let startX, startY, endX, endY, pathD, labelX, labelY;
+            if (link.Type === 'intra') {
+                // ==========================================
+                // 1. CÁC ĐƯỜNG NỘI BỘ (INTRA) - Cùng luồng bơi
+                // ==========================================
+                const isForward = sRect.left <= tRect.left;
+                const distance = isForward ? tRect.left - sRect.right : sRect.left - tRect.right;
+                const isSelf = link.SourceId === link.TargetId;
+                const isAdjacent = distance <= 200 && !isSelf;
+                if (isSelf) {
+                    // 1.1 Tự trỏ về chính nó (Self-loop) -> Vòng cung trên đầu
+                    startX = sRect.left + sRect.width * 0.2 - wrapperRect.left;
+                    endX = sRect.left + sRect.width * 0.8 - wrapperRect.left;
+                    startY = sRect.top - wrapperRect.top;
+                    endY = sRect.top - wrapperRect.top;
+                    const curveHeight = 40 + currentIndex * 20;
+                    pathD = `M ${startX} ${startY} C ${startX} ${startY - curveHeight}, ${endX} ${endY - curveHeight}, ${endX} ${endY}`;
+                    labelX = sRect.left + sRect.width / 2 - wrapperRect.left;
+                    labelY = startY - curveHeight * 0.75 - 5;
+                }
+                else if (isAdjacent) {
+                    // 1.2 Hai node liền kề -> Kẻ ngang song song
+                    let yOffset = 0;
+                    if (totalInPair > 1) {
+                        const spacing = 26;
+                        const startOffset = -((totalInPair - 1) * spacing) / 2;
+                        yOffset = startOffset + currentIndex * spacing;
+                    }
+                    startY = sRect.top + sRect.height / 2 - wrapperRect.top + yOffset;
+                    endY = tRect.top + tRect.height / 2 - wrapperRect.top + yOffset;
+                    if (isForward) {
+                        startX = sRect.right - wrapperRect.left;
+                        endX = tRect.left - wrapperRect.left;
+                    }
+                    else {
+                        startX = sRect.left - wrapperRect.left;
+                        endX = tRect.right - wrapperRect.left;
+                    }
+                    pathD = `M ${startX} ${startY} L ${endX} ${endY}`;
+                    labelX = startX + (endX - startX) / 2;
+                    labelY = startY - 8;
+                }
+                else {
+                    // 1.3 Nhảy cóc (Skip Node) -> Vẽ đường vuông góc xếp lớp
+                    // Dịch nhẹ điểm neo X để tách các cột dọc
+                    const xOffset = isForward ? 15 : -15;
+                    startX = sRect.left + sRect.width / 2 - wrapperRect.left + xOffset;
+                    endX = tRect.left + tRect.width / 2 - wrapperRect.left + xOffset;
+                    // --- LOGIC XẾP LỚP MỚI ---
+                    // 1. Trích xuất ID của luồng bơi hiện tại (VD: từ "297-10221" cắt lấy "297")
+                    const laneId = link.SourceId.split('-')[0];
+                    // 2. Lấy thứ tự tầng bay của đường nhảy cóc này
+                    const currentSkipLevel = laneSkipCounter[laneId] || 0;
+                    laneSkipCounter[laneId] = currentSkipLevel + 1; // Tăng đếm lên 1 cho đường tiếp theo
+                    // 3. Tính độ cao: Base = 35px. Mỗi đường phát sinh sau sẽ tự động dâng cao thêm 22px
+                    let heightOffset = 35 + currentSkipLevel * 22;
+                    // Vòng lên trên đỉnh node
+                    startY = sRect.top - wrapperRect.top;
+                    endY = tRect.top - wrapperRect.top;
+                    const yLevel = startY - heightOffset;
+                    // M: Bắt đầu -> L: Đi thẳng lên -> L: Đi ngang -> L: Cắm thẳng xuống
+                    pathD = `M ${startX} ${startY} L ${startX} ${yLevel} L ${endX} ${yLevel} L ${endX} ${endY}`;
+                    labelX = startX + (endX - startX) / 2;
+                    labelY = yLevel - 8;
+                }
+            }
+            else if (link.Type === 'inter') {
+                // ==========================================
+                // 2. MŨI TÊN CHÉO (INTER) - Giữa 2 luồng bơi
+                // ==========================================
+                const totalSource = sourceInterRegistry[link.SourceId];
+                const currentSourceIdx = sourceInterCounter[link.SourceId] || 0;
+                sourceInterCounter[link.SourceId] = currentSourceIdx + 1;
+                let xOffset = 0;
+                if (totalSource > 1) {
+                    const spacing = 80;
+                    xOffset = -((totalSource - 1) * spacing) / 2 + currentSourceIdx * spacing;
+                }
+                // Tọa độ X
+                startX = sRect.left + sRect.width / 2 - wrapperRect.left + xOffset;
+                endX = tRect.left + tRect.width / 2 - wrapperRect.left + xOffset;
+                // THÊM LOGIC NHẬN DIỆN CHIỀU DỌC (Trên xuống hay Dưới lên)
+                const isTargetBelow = tRect.top > sRect.top;
+                if (isTargetBelow) {
+                    // Mũi tên đi XUỐNG: Xuất phát từ Đáy Source -> Cắm vào Đỉnh Target
+                    startY = sRect.bottom - wrapperRect.top;
+                    endY = tRect.top - wrapperRect.top;
+                    // Tọa độ Y ở khoảng giữa 2 luồng bơi để bẻ góc ngang
+                    const midY = startY + (endY - startY) / 2;
+                    // Vẽ đường vuông góc: Bắt đầu (M) -> Kéo thẳng xuống giữa (L) -> Kéo ngang sang đích (L) -> Cắm thẳng xuống đích (L)
+                    pathD = `M ${startX} ${startY} L ${startX} ${midY} L ${endX} ${midY} L ${endX} ${endY}`;
+                    // Chữ neo ở nửa trên, bám theo đoạn thẳng dọc
+                    labelY = startY + 40 + currentSourceIdx * 15;
+                }
+                else {
+                    // Mũi tên đi LÊN: Xuất phát từ Đỉnh Source -> Cắm vào Đáy Target
+                    startY = sRect.top - wrapperRect.top;
+                    endY = tRect.bottom - wrapperRect.top;
+                    // Tọa độ Y ở khoảng giữa 2 luồng bơi để bẻ góc ngang
+                    const midY = startY - (startY - endY) / 2;
+                    // Vẽ đường vuông góc: Bắt đầu (M) -> Kéo thẳng lên giữa (L) -> Kéo ngang sang đích (L) -> Cắm thẳng lên đích (L)
+                    pathD = `M ${startX} ${startY} L ${startX} ${midY} L ${endX} ${midY} L ${endX} ${endY}`;
+                    // Chữ neo ở nửa dưới (đẩy ngược lên), bám theo đoạn thẳng dọc
+                    labelY = startY - 40 - currentSourceIdx * 15;
+                }
+                labelX = startX; // Căn chữ nằm ngay trên trục dọc xuất phát
+            }
+            return { ...link, path: pathD, labelX, labelY };
+        }).filter((line) => line !== null);
+    }
+    isLineRelated(line) {
+        if (!this.hoveredLine)
+            return false;
+        // 1. Trùng khớp chính xác đường đang trỏ chuột
+        if (this.hoveredLine === line)
+            return true;
+        // 2. Kiểm tra xem 2 đường có chia sẻ chung bất kỳ số Sequence nào không
+        if (this.hoveredLine.SequenceLabel && line.SequenceLabel) {
+            const hoveredSeqs = this.hoveredLine.SequenceLabel.split(',').map((s) => s.trim());
+            const currentSeqs = line.SequenceLabel.split(',').map((s) => s.trim());
+            // Trả về true nếu có ít nhất 1 số Sequence giống nhau
+            return hoveredSeqs.some((seq) => currentSeqs.includes(seq));
+        }
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WFDocSwimlaneComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: WFDocSwimlaneComponent, isStandalone: true, selector: "ng-component", inputs: { data: "data" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "wrapperRef", first: true, predicate: ["wrapper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<button-reload (click)=\"getdata()\"></button-reload>\n<div class=\"swimlane-wrapper\" #wrapper>\n  <!-- LAYER 1: SVG D\u00F9ng \u0111\u1EC3 v\u1EBD c\u00E1c m\u0169i t\u00EAn n\u1ED1i gi\u1EEFa c\u00E1c th\u1EBB HTML -->\n  <svg class=\"lines-layer\">\n    <defs>\n      <!-- C\u00E1c marker c\u0169 gi\u1EEF nguy\u00EAn -->\n      <marker id=\"arrow-intra\" viewBox=\"0 0 10 10\" refX=\"10\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\" orient=\"auto\">\n        <path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"#5b8cff\" />\n      </marker>\n      <marker id=\"arrow-inter\" viewBox=\"0 0 10 10\" refX=\"10\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\" orient=\"auto\">\n        <path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"#fa8c16\" />\n      </marker>\n\n      <!-- TH\u00CAM: Marker m\u0169i t\u00EAn m\u00E0u \u0111\u1ECF khi Hover -->\n      <marker id=\"arrow-hover\" viewBox=\"0 0 10 10\" refX=\"10\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\" orient=\"auto\">\n        <path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"#ff4d4f\" />\n      </marker>\n    </defs>\n\n    <!-- TH\u00CAM: class, s\u1EF1 ki\u1EC7n mouseenter/leave v\u00E0 bi\u1EBFn is-hovered -->\n    <g\n      *ngFor=\"let line of drawnLines\"\n      class=\"link-group\"\n      [class.is-hovered]=\"isLineRelated(line)\"\n      (mouseenter)=\"hoveredLine = line\"\n      (mouseleave)=\"hoveredLine = null\"\n    >\n      <path [attr.d]=\"line.path\" class=\"ghost-path\"></path>\n\n      <!-- G\u1ECDi isLineRelated(line) thay v\u00EC so s\u00E1nh c\u1EE9ng hoveredLine === line -->\n      <path\n        [attr.d]=\"line.path\"\n        [class]=\"'link-' + line.Type\"\n        [attr.marker-end]=\"isLineRelated(line) ? 'url(#arrow-hover)' : 'url(#arrow-' + line.Type + ')'\"\n      ></path>\n\n      <text *ngIf=\"line.Label\" [attr.x]=\"line.labelX\" [attr.y]=\"line.labelY\" class=\"link-label\" text-anchor=\"middle\">\n        <tspan *ngIf=\"line.Sequence\" font-weight=\"bold\">{{ line.SequenceLabel }}.</tspan>\n        {{ line.Label }}\n      </text>\n    </g>\n  </svg>\n\n  <!-- LAYER 2: C\u00E1c Lu\u1ED3ng b\u01A1i (Lanes) ch\u1EE9a c\u00E1c Stages (Nodes) -->\n  <div class=\"lane\" *ngFor=\"let lane of data.Lanes\">\n    <div class=\"lane-header\">\n      <div class=\"lane-title\">{{ lane.Title }}</div>\n      <div class=\"lane-subtitle\">{{ lane.Subtitle }}</div>\n    </div>\n\n    <div class=\"lane-body\">\n      <div\n        class=\"node-card\"\n        *ngFor=\"let node of getNodesForLane(lane.Id)\"\n        [id]=\"'node-' + node.Id\"\n        [ngClass]=\"'status-' + node.Status\"\n      >\n        <div class=\"node-title\">{{ node.Title }}</div>\n        <div class=\"node-subtitle\">{{ node.Subtitle }}</div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.swimlane-wrapper{position:relative;background-color:#f4f6f8;padding:80px 20px 60px;border-radius:8px;display:flex;flex-direction:column;gap:16px;overflow-x:auto;min-height:500px}.lines-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}.lines-layer .link-group{pointer-events:auto;cursor:pointer}.lines-layer .link-group.is-hovered path[class^=link-]{stroke:#ff4d4f!important;stroke-width:2.5px}.lines-layer .link-group.is-hovered .link-label{fill:#ff4d4f!important}.lines-layer .ghost-path{fill:none;stroke:transparent;stroke-width:20px}.lines-layer path[class^=link-]{fill:none;stroke-width:2px;transition:all .2s ease}.lines-layer .link-intra{stroke:#5b8cff}.lines-layer .link-inter{stroke:#fa8c16;stroke-dasharray:6 4}.lines-layer .link-label{font-size:11px;fill:#555;font-weight:500;transition:all .2s ease}.lane{display:flex;background-color:#fff;border-radius:8px;border:1px solid #e2e8f0;box-shadow:0 1px 3px #0000000d;min-height:100px;position:relative;z-index:5}.lane-header{width:200px;padding:16px;border-right:1px solid #e2e8f0;background-color:#fafbfc;border-radius:8px 0 0 8px;display:flex;flex-direction:column;justify-content:center}.lane-header .lane-title{font-size:11px;color:#64748b;font-weight:600}.lane-header .lane-subtitle{font-size:13px;font-weight:700;color:#1e293b;margin-top:4px}.lane-body{flex:1;padding:24px 32px;display:flex;align-items:center;gap:150px}.node-card{min-width:130px;padding:12px;border-radius:6px;text-align:center;background:#fff;border:1.5px solid #d9d9d9;box-shadow:0 2px 4px #0000000d}.node-card .node-title{font-size:13px;font-weight:600;color:#1f2937}.node-card .node-subtitle{font-size:12px;color:#6b7280;margin-top:2px}.node-card.status-default{border-color:#d1d5db;background-color:#f3f4f6}.node-card.status-processing{border-color:#93c5fd;background-color:#eff6ff}.node-card.status-success{border-color:#6ee7b7;background-color:#ecfdf5;box-shadow:0 0 10px #34d39966}.node-card.status-warning{border-color:#fcd34d;background-color:#fffbeb}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonReload, selector: "button-reload", inputs: ["nzType", "size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WFDocSwimlaneComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [CommonModule, ButtonReload], template: "<button-reload (click)=\"getdata()\"></button-reload>\n<div class=\"swimlane-wrapper\" #wrapper>\n  <!-- LAYER 1: SVG D\u00F9ng \u0111\u1EC3 v\u1EBD c\u00E1c m\u0169i t\u00EAn n\u1ED1i gi\u1EEFa c\u00E1c th\u1EBB HTML -->\n  <svg class=\"lines-layer\">\n    <defs>\n      <!-- C\u00E1c marker c\u0169 gi\u1EEF nguy\u00EAn -->\n      <marker id=\"arrow-intra\" viewBox=\"0 0 10 10\" refX=\"10\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\" orient=\"auto\">\n        <path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"#5b8cff\" />\n      </marker>\n      <marker id=\"arrow-inter\" viewBox=\"0 0 10 10\" refX=\"10\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\" orient=\"auto\">\n        <path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"#fa8c16\" />\n      </marker>\n\n      <!-- TH\u00CAM: Marker m\u0169i t\u00EAn m\u00E0u \u0111\u1ECF khi Hover -->\n      <marker id=\"arrow-hover\" viewBox=\"0 0 10 10\" refX=\"10\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\" orient=\"auto\">\n        <path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"#ff4d4f\" />\n      </marker>\n    </defs>\n\n    <!-- TH\u00CAM: class, s\u1EF1 ki\u1EC7n mouseenter/leave v\u00E0 bi\u1EBFn is-hovered -->\n    <g\n      *ngFor=\"let line of drawnLines\"\n      class=\"link-group\"\n      [class.is-hovered]=\"isLineRelated(line)\"\n      (mouseenter)=\"hoveredLine = line\"\n      (mouseleave)=\"hoveredLine = null\"\n    >\n      <path [attr.d]=\"line.path\" class=\"ghost-path\"></path>\n\n      <!-- G\u1ECDi isLineRelated(line) thay v\u00EC so s\u00E1nh c\u1EE9ng hoveredLine === line -->\n      <path\n        [attr.d]=\"line.path\"\n        [class]=\"'link-' + line.Type\"\n        [attr.marker-end]=\"isLineRelated(line) ? 'url(#arrow-hover)' : 'url(#arrow-' + line.Type + ')'\"\n      ></path>\n\n      <text *ngIf=\"line.Label\" [attr.x]=\"line.labelX\" [attr.y]=\"line.labelY\" class=\"link-label\" text-anchor=\"middle\">\n        <tspan *ngIf=\"line.Sequence\" font-weight=\"bold\">{{ line.SequenceLabel }}.</tspan>\n        {{ line.Label }}\n      </text>\n    </g>\n  </svg>\n\n  <!-- LAYER 2: C\u00E1c Lu\u1ED3ng b\u01A1i (Lanes) ch\u1EE9a c\u00E1c Stages (Nodes) -->\n  <div class=\"lane\" *ngFor=\"let lane of data.Lanes\">\n    <div class=\"lane-header\">\n      <div class=\"lane-title\">{{ lane.Title }}</div>\n      <div class=\"lane-subtitle\">{{ lane.Subtitle }}</div>\n    </div>\n\n    <div class=\"lane-body\">\n      <div\n        class=\"node-card\"\n        *ngFor=\"let node of getNodesForLane(lane.Id)\"\n        [id]=\"'node-' + node.Id\"\n        [ngClass]=\"'status-' + node.Status\"\n      >\n        <div class=\"node-title\">{{ node.Title }}</div>\n        <div class=\"node-subtitle\">{{ node.Subtitle }}</div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.swimlane-wrapper{position:relative;background-color:#f4f6f8;padding:80px 20px 60px;border-radius:8px;display:flex;flex-direction:column;gap:16px;overflow-x:auto;min-height:500px}.lines-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}.lines-layer .link-group{pointer-events:auto;cursor:pointer}.lines-layer .link-group.is-hovered path[class^=link-]{stroke:#ff4d4f!important;stroke-width:2.5px}.lines-layer .link-group.is-hovered .link-label{fill:#ff4d4f!important}.lines-layer .ghost-path{fill:none;stroke:transparent;stroke-width:20px}.lines-layer path[class^=link-]{fill:none;stroke-width:2px;transition:all .2s ease}.lines-layer .link-intra{stroke:#5b8cff}.lines-layer .link-inter{stroke:#fa8c16;stroke-dasharray:6 4}.lines-layer .link-label{font-size:11px;fill:#555;font-weight:500;transition:all .2s ease}.lane{display:flex;background-color:#fff;border-radius:8px;border:1px solid #e2e8f0;box-shadow:0 1px 3px #0000000d;min-height:100px;position:relative;z-index:5}.lane-header{width:200px;padding:16px;border-right:1px solid #e2e8f0;background-color:#fafbfc;border-radius:8px 0 0 8px;display:flex;flex-direction:column;justify-content:center}.lane-header .lane-title{font-size:11px;color:#64748b;font-weight:600}.lane-header .lane-subtitle{font-size:13px;font-weight:700;color:#1e293b;margin-top:4px}.lane-body{flex:1;padding:24px 32px;display:flex;align-items:center;gap:150px}.node-card{min-width:130px;padding:12px;border-radius:6px;text-align:center;background:#fff;border:1.5px solid #d9d9d9;box-shadow:0 2px 4px #0000000d}.node-card .node-title{font-size:13px;font-weight:600;color:#1f2937}.node-card .node-subtitle{font-size:12px;color:#6b7280;margin-top:2px}.node-card.status-default{border-color:#d1d5db;background-color:#f3f4f6}.node-card.status-processing{border-color:#93c5fd;background-color:#eff6ff}.node-card.status-success{border-color:#6ee7b7;background-color:#ecfdf5;box-shadow:0 0 10px #34d39966}.node-card.status-warning{border-color:#fcd34d;background-color:#fffbeb}\n"] }]
+        }], propDecorators: { wrapperRef: [{
+                type: ViewChild,
+                args: ['wrapper', { static: false }]
+            }], data: [{
+                type: Input
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ABAC_RULES_TOKEN, ActionRule, ActionRuleLine, AnimatedDigitComponent, AppGlobals, AppStorage, App_Dic_Domain, App_Dic_DomainFilter, App_File, App_Menu$1 as App_Menu, App_Org, App_Role, App_Role_Menu_Ref, App_Setting, App_SettingFilter, App_User, AuthGuard, AuthService, AutoFocusDirective, BarGraphComponent, BaseComponent, BaseGuardChangeComponent, BaseOverlayComponent, Box, Breadcrumb, CacheListComponent, CheckModel, CommonService, ConfigComponent, CustomNotiComponent, CustomNotiService, DashcardComponent, DateInputParserDirective, DateTimeHelper, DicDomainListComponent, DicDomainPipe, DicDomainSelectComponent$1 as DicDomainSelectComponent, DicDomainService, DocTemplate, DoughnutGraphComponent, DownloadHelper, DurationFormatPipe, DynamicBuildFormComponent, ENUM_ResponseType, ExpandableSearchComponent, ExtendCheckbox, ExtendCheckbox3Value, ExtendDatePicker, ExtendDateRangePicker, ExtendInput, ExtendInputNumber, ExtendPaginationComponent, ExtendSelectComponent, ExtendTableComponent, ExtendTextArea, FileFilter, FileListComponent, FileService, FormatBytesPipe, GlobalSpinnerComponent, GridFilter, H3Icon, HTTPService, HasPermissionDirective, HasPermissionPipe, HeaderSearchComponent, HideIfErrorDirective, HighlightPipe, IconAdd, IconCheck, IconClose, IconCopy, IconDelete, IconEdit, IconInfo, IconSave, IconSearch, IconView, LayoutComponent, LayoutUser, LimitLettersPipe, LimitWordsPipe, LineGraphComponent, LoadingService, LogAppComponent, LogServerComponent, LogServerDetailComponent, Login1Component, Login2Component, LoginComponent, MailTemplateService, MenuDetailComponent, MenuFilter, MenuListComponent, MenuService, MonitorComponent, NoPermission, Nodata, NotiService, NotificationCenterComponent, NullIfEmptyDirective, NumberOnlyDirective, OrderOption, OrgDetailComponent, OrgFilter, OrgListComponent, OrgService, PagingData, PagingModel, PdfViewerComponent, PermissionComponent, PermissionService$1 as PermissionService, ReadMoreProComponent, RegisterComponent, RoleDetailComponent, RoleFilter, RoleListComponent, RoleService, RouteMonitorService, RptConfigDetail, RptConfigList, SequenceDetailComponent, SequenceListComponent, SessionManagerService, SettingListComponent, SettingService$1 as SettingService, SynologyComponent, TableHeader, ThemeService, TokenStorage, TranslateKey, URLs$j as URLs, UnsavedChangesGuard, UpperCaseFirsLetterEachWordDirective, UppercaseDirective, UppercaseFirstLetterDirective, UserDetailComponent, UserFilter, UserListComponent, UserProfileComponent, UserProfileService, UserService, VersionComponent, VscService, WF_DocDetailComponent, WF_DocListComponent, WF_DocProcessComponent, WF_TemplateActionRef$1 as WF_TemplateActionRef, WF_TemplateDetail$1 as WF_TemplateDetail, WF_TemplateList, WF_Template_CombineDetailComponent, WF_Template_CombineListComponent, WF_TransitionRule, WF_TransitionRuleLine$1 as WF_TransitionRuleLine, Workflow$1 as Workflow, WorkflowAction, WorkflowActionEditorOption, WorkflowActionRef, WorkflowEditorComponent, WorkflowEditorOption$1 as WorkflowEditorOption, WorkflowStage, WorkflowStageEditorOption, XLSXHelper, authInterceptor };
+export { ABAC_RULES_TOKEN, ActionRule, ActionRuleLine, AnimatedDigitComponent, AppDataComponent, AppGlobals, AppStorage, App_Dic_Domain, App_Dic_DomainFilter, App_File, App_Menu$1 as App_Menu, App_Org, App_Role, App_Role_Menu_Ref, App_Setting, App_SettingFilter, App_User, AuthGuard, AuthService, AutoFocusDirective, BarGraphComponent, BaseComponent, BaseGuardChangeComponent, BaseOverlayComponent, Box, Breadcrumb, CacheListComponent, CheckModel, CommonService, ConfigComponent, CustomNotiComponent, CustomNotiService, DashcardComponent, DateInputParserDirective, DateTimeHelper, DicDomainListComponent, DicDomainPipe, DicDomainSelectComponent$1 as DicDomainSelectComponent, DicDomainService, DocTemplate, DoughnutGraphComponent, DownloadHelper, DurationFormatPipe, DynamicBuildFormComponent, ENUM_ResponseType, ExpandableSearchComponent, ExtendCheckbox, ExtendCheckbox3Value, ExtendDatePicker, ExtendDateRangePicker, ExtendInput, ExtendInputNumber, ExtendPaginationComponent, ExtendSelectComponent, ExtendTableComponent, ExtendTextArea, FileFilter, FileListComponent, FileService, FormatBytesPipe, GlobalSpinnerComponent, GridFilter, H3Icon, HTTPService, HasPermissionDirective, HasPermissionPipe, HeaderSearchComponent, HideIfErrorDirective, HighlightPipe, IconAdd, IconCheck, IconClose, IconCopy, IconDelete, IconEdit, IconInfo, IconSave, IconSearch, IconView, LayoutComponent, LayoutUser, LimitLettersPipe, LimitWordsPipe, LineGraphComponent, LoadingService, LogAppComponent, LogServerComponent, LogServerDetailComponent, Login1Component, Login2Component, LoginComponent, MailTemplateService, MenuDetailComponent, MenuFilter, MenuListComponent, MenuService, MonitorComponent, NoPermission, Nodata, NotiService, NotificationCenterComponent, NullIfEmptyDirective, NumberOnlyDirective, OrderOption, OrgDetailComponent, OrgFilter, OrgListComponent, OrgService, PagingData, PagingModel, PdfViewerComponent, PermissionComponent, PermissionService$1 as PermissionService, ReadMoreProComponent, RegisterComponent, RoleDetailComponent, RoleFilter, RoleListComponent, RoleService, RouteMonitorService, RptConfigDetail, RptConfigList, SequenceDetailComponent, SequenceListComponent, SessionManagerService, SettingListComponent, SettingService$1 as SettingService, SynologyComponent, TableHeader, ThemeService, TokenStorage, TranslateKey, URLs$j as URLs, UnsavedChangesGuard, UpperCaseFirsLetterEachWordDirective, UppercaseDirective, UppercaseFirstLetterDirective, UserDetailComponent, UserFilter, UserListComponent, UserProfileComponent, UserProfileService, UserService, VersionComponent, VscService, WFDocSwimlaneComponent, WF_DocDetailComponent, WF_DocListComponent, WF_DocProcessComponent, WF_TemplateActionRef$1 as WF_TemplateActionRef, WF_TemplateDetail$1 as WF_TemplateDetail, WF_TemplateList, WF_Template_CombineDetailComponent, WF_Template_CombineListComponent, WF_TransitionRule, WF_TransitionRuleLine$1 as WF_TransitionRuleLine, Workflow$1 as Workflow, WorkflowAction, WorkflowActionEditorOption, WorkflowActionRef, WorkflowEditorComponent, WorkflowEditorOption$1 as WorkflowEditorOption, WorkflowStage, WorkflowStageEditorOption, XLSXHelper, authInterceptor };
 //# sourceMappingURL=brggroup-share-lib.mjs.map