@brggroup/share-lib 0.1.65 → 0.1.67

package/fesm2022/brggroup-share-lib.mjs

@@ -11,9 +11,9 @@ import * as i15 from 'ng-zorro-antd/modal';
 import { NzModalService, NzModalModule, NzModalRef, NZ_MODAL_DATA, NzModalComponent, NzModalContentDirective, NzModalTitleDirective, NzModalFooterDirective } from 'ng-zorro-antd/modal';
 import * as i1 from 'ng-zorro-antd/notification';
 import { jwtDecode } from 'jwt-decode';
-import { switchMap, distinctUntilChanged, filter as filter$1, takeUntil } from 'rxjs/operators';
+import { switchMap, distinctUntilChanged, filter as filter$1, takeUntil, startWith as startWith$1, map as map$1 } from 'rxjs/operators';
 import * as i2 from '@angular/forms';
-import { FormGroup, FormsModule, ReactiveFormsModule, Validators, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { FormGroup, FormsModule, ReactiveFormsModule, Validators, FormBuilder, NG_VALUE_ACCESSOR, FormControl } from '@angular/forms';
 import * as i1$1 from '@angular/common';
 import { Location, CommonModule, NgTemplateOutlet, DecimalPipe, DatePipe } from '@angular/common';
 import { Overlay } from '@angular/cdk/overlay';
@@ -94,6 +94,7 @@ import * as i12$1 from 'ng-zorro-antd/color-picker';
 import { NzColorPickerModule } from 'ng-zorro-antd/color-picker';
 import * as i2$4 from 'ng-zorro-antd/progress';
 import { NzProgressModule } from 'ng-zorro-antd/progress';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
 import * as i3$6 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i10 from 'ng-zorro-antd/slider';
@@ -114,7 +115,6 @@ import * as i6$5 from 'ng-zorro-antd/list';
 import { NzListModule } from 'ng-zorro-antd/list';
 import * as i7$1 from 'ng-zorro-antd/avatar';
 import { NzAvatarModule } from 'ng-zorro-antd/avatar';
-import { NzSwitchModule } from 'ng-zorro-antd/switch';
 
 var TranslateKey;
 (function (TranslateKey) {
@@ -630,7 +630,7 @@ class TokenStorage {
     }
 }
 
-const URLs$e = {
+const URLs$f = {
     login: '/api/Auth/Login',
     register: '/api/Auth/Register',
     pingAuth: '/api/Auth/PingAuth',
@@ -699,7 +699,7 @@ class AuthService extends HTTPService {
         }
     }
     async sendSignIn(body) {
-        return firstValueFrom(this.httpClient.post(AppGlobals.apiEndpoint + URLs$e.login, body, {
+        return firstValueFrom(this.httpClient.post(AppGlobals.apiEndpoint + URLs$f.login, body, {
             headers: new HttpHeaders().set('Content-Type', 'application/json').set('No-Loading-Mark', '1'),
         }));
     }
@@ -719,7 +719,7 @@ class AuthService extends HTTPService {
     ---------------------------------------- */
     async pingAuth() {
         try {
-            const res = await this.get(AppGlobals.apiEndpoint + URLs$e.pingAuth, true);
+            const res = await this.get(AppGlobals.apiEndpoint + URLs$f.pingAuth, true);
             return res?.IsSuccess;
         }
         catch {
@@ -751,10 +751,10 @@ class AuthService extends HTTPService {
         PASSWORD
     ---------------------------------------- */
     changePassword(data) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$e.changePassword, data);
+        return this.postData(AppGlobals.apiEndpoint + URLs$f.changePassword, data);
     }
     setPass(data) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$e.setPass, data);
+        return this.postData(AppGlobals.apiEndpoint + URLs$f.setPass, data);
     }
     /* ----------------------------------------
         REGISTER
@@ -775,7 +775,7 @@ class AuthService extends HTTPService {
         }
     }
     async sendSignUp(d) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$e.register, d);
+        return this.postData(AppGlobals.apiEndpoint + URLs$f.register, d);
     }
     /* ----------------------------------------
         CHANGE ORG
@@ -797,7 +797,7 @@ class AuthService extends HTTPService {
     }
     async sendChangeOrg(App_Org_Id) {
         let params = new HttpParams().append('App_Org_Id', App_Org_Id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$e.changeOrgLogin, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$f.changeOrgLogin, params);
     }
     static pingInterVal;
     startPingAuth(intervalTime) {
@@ -3314,7 +3314,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 }]
         }] });
 
-const URLs$d = {
+const URLs$e = {
     getById: '/api/App_Dic_Domain/GetById',
     getAll: '/api/App_Dic_Domain/GetAll',
     getList: '/api/App_Dic_Domain/GetList',
@@ -3326,21 +3326,21 @@ const URLs$d = {
 class DicDomainService extends HTTPService {
     getById(id) {
         let pr = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$d.getById, pr);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$e.getById, pr);
     }
     getPaging(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$d.getPaging, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$e.getPaging, filter);
     }
     addOrEdit(obj) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$d.addOrEdit, obj);
+        return this.postData(AppGlobals.apiEndpoint + URLs$e.addOrEdit, obj);
     }
     delete(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$d.delete, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$e.delete, params);
     }
     async getByDomain(DomainCode) {
         var pr = new HttpParams().append('DomainCode', DomainCode);
-        const ret = await this.postParams(AppGlobals.apiEndpoint + URLs$d.getByDomain, pr);
+        const ret = await this.postParams(AppGlobals.apiEndpoint + URLs$e.getByDomain, pr);
         return ret.Data;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DicDomainService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
@@ -4648,7 +4648,7 @@ class DicDomainListComponent extends BaseComponent {
         this.getData();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DicDomainListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: DicDomainListComponent, isStandalone: true, selector: "app-dic-domain-list", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      [nzData]=\"data?.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 195px)' }\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'DomainCode' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'DomainCode'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Domain Code\r\n          </th>\r\n          <th>Item Code</th>\r\n          <th>Item Value</th>\r\n          <th nzWidth=\"100px\">Order Value</th>\r\n          <th nzWidth=\"150px\">Child Domain Code</th>\r\n          <th nzWidth=\"150px\">Parent Item Code</th>\r\n          <th nzWidth=\"75px\">Active</th>\r\n          <th nzWidth=\"75px\" nzRight>Action</th>\r\n        </tr>\r\n        <tr (keyup.enter)=\"search()\" class=\"tr-search\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.DomainCode\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.ItemCode\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.ItemValue\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th class=\"center\" nzRight>\r\n            <icon-add (click)=\"add()\"></icon-add>\r\n          </th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of data?.LstItem; track $index; let i = $index) {\r\n          @if (selectedRow != row) {\r\n            <tr (click)=\"selectedRow = row\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>{{ row.DomainCode }}</td>\r\n              <td>{{ row.ItemCode }}</td>\r\n              <td>{{ row.ItemValue }}</td>\r\n              <td>{{ row.OrderValue }}</td>\r\n              <td>{{ row.ChildDomainCode }}</td>\r\n              <td>{{ row.ParentItemCode }}</td>\r\n              <td class=\"center\">\r\n                @if (row.IsActive) {\r\n                  <icon-check></icon-check>\r\n                }\r\n              </td>\r\n              <td class=\"center\" nzRight>\r\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n              </td>\r\n            </tr>\r\n          } @else {\r\n            <tr (keyup.enter)=\"save()\" class=\"selected\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.DomainCode\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.ItemCode\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-textarea\r\n                  [minRows]=\"1\"\r\n                  [formItemNoButtom]=\"true\"\r\n                  [(_ngModel)]=\"selectedRow.ItemValue\"\r\n                ></extend-textarea>\r\n              </td>\r\n              <td>\r\n                <extend-input-number [(_ngModel)]=\"selectedRow.OrderValue\"></extend-input-number>\r\n              </td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.ChildDomainCode\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.ParentItemCode\"></extend-input>\r\n              </td>\r\n              <td class=\"center\">\r\n                <extend-checkbox [(_ngModel)]=\"selectedRow.IsActive\"></extend-checkbox>\r\n              </td>\r\n              <td class=\"center\" nzRight>\r\n                <icon-save (click)=\"save()\"></icon-save>\r\n                <box [width]=\"4\"></box>\r\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n              </td>\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data?.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NzTagModule }, { 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: i6$2.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: "component", type: i6$2.NzThAddOnComponent, selector: "th[nzColumnKey], th[nzSortFn], th[nzSortOrder], th[nzFilters], th[nzShowSort], th[nzShowFilter], th[nzCustomFilter]", inputs: ["nzColumnKey", "nzFilterMultiple", "nzSortOrder", "nzSortPriority", "nzSortDirections", "nzFilters", "nzSortFn", "nzFilterFn", "nzShowSort", "nzShowFilter", "nzCustomFilter"], outputs: ["nzCheckedChange", "nzSortOrderChange", "nzFilterChange"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.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: i6$2.NzCellFixedDirective, selector: "td[nzRight],th[nzRight],td[nzLeft],th[nzLeft]", inputs: ["nzRight", "nzLeft", "colspan", "colSpan"] }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i5$3.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: IconAdd, selector: "icon-add", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconCheck, selector: "icon-check", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconSave, selector: "icon-save", inputs: ["size"], outputs: ["click"] }, { 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: 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: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: DicDomainListComponent, isStandalone: true, selector: "app-dic-domain-list", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      [nzData]=\"data?.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"false\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 195px)' }\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'DomainCode' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'DomainCode'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Domain Code\r\n          </th>\r\n          <th>Item Code</th>\r\n          <th>Item Value</th>\r\n          <th nzWidth=\"100px\">Order Value</th>\r\n          <th nzWidth=\"150px\">Child Domain Code</th>\r\n          <th nzWidth=\"150px\">Parent Item Code</th>\r\n          <th nzWidth=\"75px\">Active</th>\r\n          <th nzWidth=\"75px\" nzRight>Action</th>\r\n        </tr>\r\n        <tr (keyup.enter)=\"search()\" class=\"tr-search\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.DomainCode\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.ItemCode\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.ItemValue\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th class=\"center\" nzRight>\r\n            <icon-add (click)=\"add()\"></icon-add>\r\n          </th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of data?.LstItem; track $index; let i = $index) {\r\n          @if (selectedRow != row) {\r\n            <tr (click)=\"selectedRow = row\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>{{ row.DomainCode }}</td>\r\n              <td>{{ row.ItemCode }}</td>\r\n              <td>{{ row.ItemValue }}</td>\r\n              <td>{{ row.OrderValue }}</td>\r\n              <td>{{ row.ChildDomainCode }}</td>\r\n              <td>{{ row.ParentItemCode }}</td>\r\n              <td class=\"center\">\r\n                @if (row.IsActive) {\r\n                  <icon-check></icon-check>\r\n                }\r\n              </td>\r\n              <td class=\"center\" nzRight>\r\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n              </td>\r\n            </tr>\r\n          } @else {\r\n            <tr (keyup.enter)=\"save()\" class=\"selected\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.DomainCode\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.ItemCode\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-textarea\r\n                  [minRows]=\"1\"\r\n                  [formItemNoButtom]=\"true\"\r\n                  [(_ngModel)]=\"selectedRow.ItemValue\"\r\n                ></extend-textarea>\r\n              </td>\r\n              <td>\r\n                <extend-input-number [(_ngModel)]=\"selectedRow.OrderValue\"></extend-input-number>\r\n              </td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.ChildDomainCode\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.ParentItemCode\"></extend-input>\r\n              </td>\r\n              <td class=\"center\">\r\n                <extend-checkbox [(_ngModel)]=\"selectedRow.IsActive\"></extend-checkbox>\r\n              </td>\r\n              <td class=\"center\" nzRight>\r\n                <icon-save (click)=\"save()\"></icon-save>\r\n                <box [width]=\"4\"></box>\r\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n              </td>\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data?.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NzTagModule }, { 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: i6$2.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: "component", type: i6$2.NzThAddOnComponent, selector: "th[nzColumnKey], th[nzSortFn], th[nzSortOrder], th[nzFilters], th[nzShowSort], th[nzShowFilter], th[nzCustomFilter]", inputs: ["nzColumnKey", "nzFilterMultiple", "nzSortOrder", "nzSortPriority", "nzSortDirections", "nzFilters", "nzSortFn", "nzFilterFn", "nzShowSort", "nzShowFilter", "nzCustomFilter"], outputs: ["nzCheckedChange", "nzSortOrderChange", "nzFilterChange"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.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: i6$2.NzCellFixedDirective, selector: "td[nzRight],th[nzRight],td[nzLeft],th[nzLeft]", inputs: ["nzRight", "nzLeft", "colspan", "colSpan"] }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i5$3.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: IconAdd, selector: "icon-add", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconCheck, selector: "icon-check", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconSave, selector: "icon-save", inputs: ["size"], outputs: ["click"] }, { 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: 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: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DicDomainListComponent, decorators: [{
             type: Component,
@@ -4672,7 +4672,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         NzButtonModule,
                         Box,
                         ExtendTextArea,
-                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      [nzData]=\"data?.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 195px)' }\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'DomainCode' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'DomainCode'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Domain Code\r\n          </th>\r\n          <th>Item Code</th>\r\n          <th>Item Value</th>\r\n          <th nzWidth=\"100px\">Order Value</th>\r\n          <th nzWidth=\"150px\">Child Domain Code</th>\r\n          <th nzWidth=\"150px\">Parent Item Code</th>\r\n          <th nzWidth=\"75px\">Active</th>\r\n          <th nzWidth=\"75px\" nzRight>Action</th>\r\n        </tr>\r\n        <tr (keyup.enter)=\"search()\" class=\"tr-search\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.DomainCode\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.ItemCode\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.ItemValue\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th class=\"center\" nzRight>\r\n            <icon-add (click)=\"add()\"></icon-add>\r\n          </th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of data?.LstItem; track $index; let i = $index) {\r\n          @if (selectedRow != row) {\r\n            <tr (click)=\"selectedRow = row\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>{{ row.DomainCode }}</td>\r\n              <td>{{ row.ItemCode }}</td>\r\n              <td>{{ row.ItemValue }}</td>\r\n              <td>{{ row.OrderValue }}</td>\r\n              <td>{{ row.ChildDomainCode }}</td>\r\n              <td>{{ row.ParentItemCode }}</td>\r\n              <td class=\"center\">\r\n                @if (row.IsActive) {\r\n                  <icon-check></icon-check>\r\n                }\r\n              </td>\r\n              <td class=\"center\" nzRight>\r\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n              </td>\r\n            </tr>\r\n          } @else {\r\n            <tr (keyup.enter)=\"save()\" class=\"selected\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.DomainCode\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.ItemCode\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-textarea\r\n                  [minRows]=\"1\"\r\n                  [formItemNoButtom]=\"true\"\r\n                  [(_ngModel)]=\"selectedRow.ItemValue\"\r\n                ></extend-textarea>\r\n              </td>\r\n              <td>\r\n                <extend-input-number [(_ngModel)]=\"selectedRow.OrderValue\"></extend-input-number>\r\n              </td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.ChildDomainCode\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.ParentItemCode\"></extend-input>\r\n              </td>\r\n              <td class=\"center\">\r\n                <extend-checkbox [(_ngModel)]=\"selectedRow.IsActive\"></extend-checkbox>\r\n              </td>\r\n              <td class=\"center\" nzRight>\r\n                <icon-save (click)=\"save()\"></icon-save>\r\n                <box [width]=\"4\"></box>\r\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n              </td>\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data?.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      [nzData]=\"data?.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"false\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 195px)' }\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'DomainCode' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'DomainCode'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Domain Code\r\n          </th>\r\n          <th>Item Code</th>\r\n          <th>Item Value</th>\r\n          <th nzWidth=\"100px\">Order Value</th>\r\n          <th nzWidth=\"150px\">Child Domain Code</th>\r\n          <th nzWidth=\"150px\">Parent Item Code</th>\r\n          <th nzWidth=\"75px\">Active</th>\r\n          <th nzWidth=\"75px\" nzRight>Action</th>\r\n        </tr>\r\n        <tr (keyup.enter)=\"search()\" class=\"tr-search\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.DomainCode\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.ItemCode\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.ItemValue\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th class=\"center\" nzRight>\r\n            <icon-add (click)=\"add()\"></icon-add>\r\n          </th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of data?.LstItem; track $index; let i = $index) {\r\n          @if (selectedRow != row) {\r\n            <tr (click)=\"selectedRow = row\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>{{ row.DomainCode }}</td>\r\n              <td>{{ row.ItemCode }}</td>\r\n              <td>{{ row.ItemValue }}</td>\r\n              <td>{{ row.OrderValue }}</td>\r\n              <td>{{ row.ChildDomainCode }}</td>\r\n              <td>{{ row.ParentItemCode }}</td>\r\n              <td class=\"center\">\r\n                @if (row.IsActive) {\r\n                  <icon-check></icon-check>\r\n                }\r\n              </td>\r\n              <td class=\"center\" nzRight>\r\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n              </td>\r\n            </tr>\r\n          } @else {\r\n            <tr (keyup.enter)=\"save()\" class=\"selected\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.DomainCode\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.ItemCode\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-textarea\r\n                  [minRows]=\"1\"\r\n                  [formItemNoButtom]=\"true\"\r\n                  [(_ngModel)]=\"selectedRow.ItemValue\"\r\n                ></extend-textarea>\r\n              </td>\r\n              <td>\r\n                <extend-input-number [(_ngModel)]=\"selectedRow.OrderValue\"></extend-input-number>\r\n              </td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.ChildDomainCode\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.ParentItemCode\"></extend-input>\r\n              </td>\r\n              <td class=\"center\">\r\n                <extend-checkbox [(_ngModel)]=\"selectedRow.IsActive\"></extend-checkbox>\r\n              </td>\r\n              <td class=\"center\" nzRight>\r\n                <icon-save (click)=\"save()\"></icon-save>\r\n                <box [width]=\"4\"></box>\r\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n              </td>\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data?.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }] });
 
 let DicDomainSelectComponent$1 = class DicDomainSelectComponent {
@@ -4904,7 +4904,7 @@ class FileListComponent extends BaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: FileListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: FileListComponent, isStandalone: true, selector: "app-file-list", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-row [nzGutter]=\"[8, 0]\">\r\n      <div nz-col>\r\n        <button nz-button nzType=\"primary\" (click)=\"getData()\">{{ TranslateKey.SEARCH | translate }}</button>\r\n      </div>\r\n      <nz-upload\r\n        [nzAction]=\"\r\n          AppGlobals.apiEndpoint +\r\n          '/api/file/Upload?SaveToDB=' +\r\n          (SaveTo == 'DB' ? 'true' : 'false') +\r\n          '&FileCode=' +\r\n          FileCode\r\n        \"\r\n        (nzChange)=\"handleChange($event)\"\r\n      >\r\n        <button nz-button>\r\n          <nz-icon nzType=\"upload\" />\r\n          T\u1EA3i file\r\n        </button>\r\n      </nz-upload>\r\n      <extend-select\r\n        nz-col\r\n        nzSpan=\"3\"\r\n        [placeHolder]=\"'Save To'\"\r\n        [lstItem]=\"[\r\n          {\r\n            Code: 'DB',\r\n            Name: 'DB',\r\n          },\r\n          {\r\n            Code: 'DISC',\r\n            Name: 'DISC',\r\n          },\r\n        ]\"\r\n        [valueField]=\"'Code'\"\r\n        [displayField]=\"'Name'\"\r\n        [(_ngModel)]=\"SaveTo\"\r\n      ></extend-select>\r\n      <div nz-col [nzSpan]=\"8\">\r\n        <input nz-input placeholder=\"File Code\" [(ngModel)]=\"FileCode\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div nz-row [nzGutter]=\"[0, 8]\">\r\n    <div nz-col nzSpan=\"24\">\r\n      <nz-table\r\n        [nzData]=\"data?.LstItem || []\"\r\n        [nzBordered]=\"true\"\r\n        [nzSize]=\"'small'\"\r\n        [nzFrontPagination]=\"false\"\r\n        [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 225px)' }\"\r\n      >\r\n        <thead>\r\n          <tr>\r\n            <th nzWidth=\"50px\">#</th>\r\n            <th\r\n              [nzShowSort]=\"true\"\r\n              [nzSortOrder]=\"filter.OrderOption.FieldName == 'Code' ? filter.OrderOption.Direction : null\"\r\n              [nzSortDirections]=\"['ascend', 'descend']\"\r\n              (nzSortOrderChange)=\"\r\n                filter.OrderOption.FieldName = 'Code'; filter.OrderOption.Direction = $event; getData()\r\n              \"\r\n            >\r\n              Code\r\n            </th>\r\n            <th>Temp file</th>\r\n            <th>Content only</th>\r\n            <th>FileName</th>\r\n            <th class=\"right\">FileSize</th>\r\n            <th>FileId</th>\r\n            <th nzWidth=\"100px\">Action</th>\r\n          </tr>\r\n          <tr (keyup.enter)=\"search()\" class=\"tr-search\">\r\n            <th></th>\r\n            <th>\r\n              <extend-input\r\n                [size]=\"'small'\"\r\n                [showClear]=\"true\"\r\n                [(_ngModel)]=\"filter.Code\"\r\n                (onclickClearIcon)=\"search()\"\r\n              ></extend-input>\r\n            </th>\r\n            <th></th>\r\n            <th></th>\r\n            <th></th>\r\n            <th></th>\r\n            <th></th>\r\n            <th></th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (row of data?.LstItem; track $index; let i = $index) {\r\n            <tr>\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>{{ row.Code }}</td>\r\n              <td class=\"center\"><extend-checkbox [(_ngModel)]=\"row.IsTemp\"></extend-checkbox></td>\r\n              <td class=\"center\"><extend-checkbox [(_ngModel)]=\"row.IsContentOnly\"></extend-checkbox></td>\r\n              <td>{{ row.FileName }}</td>\r\n              <td class=\"right\">{{ row.FileSize || 0 | formatBytes }}</td>\r\n              <td>\r\n                {{ row.App_File_Id }}\r\n              </td>\r\n              <td class=\"center\" nzRight>\r\n                <i\r\n                  *ngIf=\"row.IsContentOnly\"\r\n                  nz-tooltip=\"Move to disk\"\r\n                  nz-icon\r\n                  nzType=\"file\"\r\n                  nzTheme=\"outline\"\r\n                  class=\"color-primary cursor-pointer icon-size-16\"\r\n                  (click)=\"moveFileToDisk(row)\"\r\n                ></i>\r\n                <box [width]=\"5\"></box>\r\n                <i\r\n                  nz-icon\r\n                  nzType=\"save\"\r\n                  nzTheme=\"outline\"\r\n                  class=\"color-primary cursor-pointer icon-size-16\"\r\n                  (click)=\"save(row)\"\r\n                ></i>\r\n                <box [width]=\"5\"></box>\r\n                <i\r\n                  nz-icon\r\n                  nzType=\"download\"\r\n                  nzTheme=\"outline\"\r\n                  class=\"color-primary cursor-pointer icon-size-16\"\r\n                  (click)=\"download(row)\"\r\n                ></i>\r\n                <box [width]=\"5\"></box>\r\n                <a\r\n                  nz-popconfirm\r\n                  [nzPopconfirmTitle]=\"TranslateKey.CONFIRM_DELETE | translate\"\r\n                  nzPopconfirmPlacement=\"top\"\r\n                  (nzOnConfirm)=\"delete(row)\"\r\n                  nzOkDanger\r\n                >\r\n                  <i nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn cursor-pointer icon-size-16\"></i>\r\n                </a>\r\n              </td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </nz-table>\r\n    </div>\r\n    <div nz-col nzSpan=\"24\">\r\n      <div nz-flex nzJustify=\"end\">\r\n        <nz-pagination\r\n          [nzSize]=\"'small'\"\r\n          [nzPageIndex]=\"filter.PageIndex + 1\"\r\n          [nzPageSize]=\"filter.PageSize\"\r\n          [nzTotal]=\"data?.TotalCount || 0\"\r\n          [nzShowSizeChanger]=\"true\"\r\n          [nzShowTotal]=\"showTotalTpl\"\r\n          [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n          (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n          (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n        >\r\n        </nz-pagination>\r\n\r\n        <ng-template #showTotalTpl let-total let-range=\"range\">\r\n          {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: NzUploadModule }, { kind: "component", type: i1$6.NzUploadComponent, selector: "nz-upload", inputs: ["nzType", "nzLimit", "nzSize", "nzFileType", "nzAccept", "nzAction", "nzDirectory", "nzOpenFileDialogOnClick", "nzBeforeUpload", "nzCustomRequest", "nzData", "nzFilter", "nzFileList", "nzDisabled", "nzHeaders", "nzListType", "nzMultiple", "nzName", "nzShowUploadList", "nzShowButton", "nzWithCredentials", "nzRemove", "nzPreview", "nzPreviewFile", "nzPreviewIsImage", "nzTransformFile", "nzDownload", "nzIconRender", "nzFileListRender"], outputs: ["nzChange", "nzFileListChange"], exportAs: ["nzUpload"] }, { 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: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { 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", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "itemChange", "onFocus"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { 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: NzPaginationModule }, { kind: "component", type: i5$3.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$2.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: "component", type: i6$2.NzThAddOnComponent, selector: "th[nzColumnKey], th[nzSortFn], th[nzSortOrder], th[nzFilters], th[nzShowSort], th[nzShowFilter], th[nzCustomFilter]", inputs: ["nzColumnKey", "nzFilterMultiple", "nzSortOrder", "nzSortPriority", "nzSortDirections", "nzFilters", "nzSortFn", "nzFilterFn", "nzShowSort", "nzShowFilter", "nzCustomFilter"], outputs: ["nzCheckedChange", "nzSortOrderChange", "nzFilterChange"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.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: i6$2.NzCellFixedDirective, selector: "td[nzRight],th[nzRight],td[nzLeft],th[nzLeft]", inputs: ["nzRight", "nzLeft", "colspan", "colSpan"] }, { 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: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { 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: "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: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzDropDownModule }, { 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$3.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.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i5$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { 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: "pipe", type: FormatBytesPipe, name: "formatBytes" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: FileListComponent, isStandalone: true, selector: "app-file-list", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-row [nzGutter]=\"[8, 0]\">\r\n      <div nz-col>\r\n        <button nz-button nzType=\"primary\" (click)=\"getData()\">{{ TranslateKey.SEARCH | translate }}</button>\r\n      </div>\r\n      <nz-upload\r\n        [nzAction]=\"\r\n          AppGlobals.apiEndpoint +\r\n          '/api/file/Upload?SaveToDB=' +\r\n          (SaveTo == 'DB' ? 'true' : 'false') +\r\n          '&FileCode=' +\r\n          FileCode\r\n        \"\r\n        (nzChange)=\"handleChange($event)\"\r\n      >\r\n        <button nz-button>\r\n          <nz-icon nzType=\"upload\" />\r\n          T\u1EA3i file\r\n        </button>\r\n      </nz-upload>\r\n      <extend-select\r\n        nz-col\r\n        nzSpan=\"3\"\r\n        [placeHolder]=\"'Save To'\"\r\n        [lstItem]=\"[\r\n          {\r\n            Code: 'DB',\r\n            Name: 'DB',\r\n          },\r\n          {\r\n            Code: 'DISC',\r\n            Name: 'DISC',\r\n          },\r\n        ]\"\r\n        [valueField]=\"'Code'\"\r\n        [displayField]=\"'Name'\"\r\n        [(_ngModel)]=\"SaveTo\"\r\n      ></extend-select>\r\n      <div nz-col [nzSpan]=\"8\">\r\n        <input nz-input placeholder=\"File Code\" [(ngModel)]=\"FileCode\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div nz-row [nzGutter]=\"[0, 8]\">\r\n    <div nz-col nzSpan=\"24\">\r\n      <nz-table\r\n        [nzData]=\"data?.LstItem || []\"\r\n        [nzBordered]=\"true\"\r\n        [nzSize]=\"'small'\"\r\n        [nzShowPagination]=\"false\"\r\n        [nzFrontPagination]=\"false\"\r\n        [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 225px)' }\"\r\n      >\r\n        <thead>\r\n          <tr>\r\n            <th nzWidth=\"50px\">#</th>\r\n            <th\r\n              [nzShowSort]=\"true\"\r\n              [nzSortOrder]=\"filter.OrderOption.FieldName == 'Code' ? filter.OrderOption.Direction : null\"\r\n              [nzSortDirections]=\"['ascend', 'descend']\"\r\n              (nzSortOrderChange)=\"\r\n                filter.OrderOption.FieldName = 'Code'; filter.OrderOption.Direction = $event; getData()\r\n              \"\r\n            >\r\n              Code\r\n            </th>\r\n            <th>Temp file</th>\r\n            <th>Content only</th>\r\n            <th>FileName</th>\r\n            <th class=\"right\">FileSize</th>\r\n            <th>FileId</th>\r\n            <th nzWidth=\"100px\">Action</th>\r\n          </tr>\r\n          <tr (keyup.enter)=\"search()\" class=\"tr-search\">\r\n            <th></th>\r\n            <th>\r\n              <extend-input\r\n                [size]=\"'small'\"\r\n                [showClear]=\"true\"\r\n                [(_ngModel)]=\"filter.Code\"\r\n                (onclickClearIcon)=\"search()\"\r\n              ></extend-input>\r\n            </th>\r\n            <th></th>\r\n            <th></th>\r\n            <th></th>\r\n            <th></th>\r\n            <th></th>\r\n            <th></th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (row of data?.LstItem; track $index; let i = $index) {\r\n            <tr>\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>{{ row.Code }}</td>\r\n              <td class=\"center\"><extend-checkbox [(_ngModel)]=\"row.IsTemp\"></extend-checkbox></td>\r\n              <td class=\"center\"><extend-checkbox [(_ngModel)]=\"row.IsContentOnly\"></extend-checkbox></td>\r\n              <td>{{ row.FileName }}</td>\r\n              <td class=\"right\">{{ row.FileSize || 0 | formatBytes }}</td>\r\n              <td>\r\n                {{ row.App_File_Id }}\r\n              </td>\r\n              <td class=\"center\" nzRight>\r\n                <i\r\n                  *ngIf=\"row.IsContentOnly\"\r\n                  nz-tooltip=\"Move to disk\"\r\n                  nz-icon\r\n                  nzType=\"file\"\r\n                  nzTheme=\"outline\"\r\n                  class=\"color-primary cursor-pointer icon-size-16\"\r\n                  (click)=\"moveFileToDisk(row)\"\r\n                ></i>\r\n                <box [width]=\"5\"></box>\r\n                <i\r\n                  nz-icon\r\n                  nzType=\"save\"\r\n                  nzTheme=\"outline\"\r\n                  class=\"color-primary cursor-pointer icon-size-16\"\r\n                  (click)=\"save(row)\"\r\n                ></i>\r\n                <box [width]=\"5\"></box>\r\n                <i\r\n                  nz-icon\r\n                  nzType=\"download\"\r\n                  nzTheme=\"outline\"\r\n                  class=\"color-primary cursor-pointer icon-size-16\"\r\n                  (click)=\"download(row)\"\r\n                ></i>\r\n                <box [width]=\"5\"></box>\r\n                <a\r\n                  nz-popconfirm\r\n                  [nzPopconfirmTitle]=\"TranslateKey.CONFIRM_DELETE | translate\"\r\n                  nzPopconfirmPlacement=\"top\"\r\n                  (nzOnConfirm)=\"delete(row)\"\r\n                  nzOkDanger\r\n                >\r\n                  <i nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn cursor-pointer icon-size-16\"></i>\r\n                </a>\r\n              </td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </nz-table>\r\n    </div>\r\n    <div nz-col nzSpan=\"24\">\r\n      <div nz-flex nzJustify=\"end\">\r\n        <nz-pagination\r\n          [nzSize]=\"'small'\"\r\n          [nzPageIndex]=\"filter.PageIndex + 1\"\r\n          [nzPageSize]=\"filter.PageSize\"\r\n          [nzTotal]=\"data?.TotalCount || 0\"\r\n          [nzShowSizeChanger]=\"true\"\r\n          [nzShowTotal]=\"showTotalTpl\"\r\n          [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n          (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n          (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n        >\r\n        </nz-pagination>\r\n\r\n        <ng-template #showTotalTpl let-total let-range=\"range\">\r\n          {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: NzUploadModule }, { kind: "component", type: i1$6.NzUploadComponent, selector: "nz-upload", inputs: ["nzType", "nzLimit", "nzSize", "nzFileType", "nzAccept", "nzAction", "nzDirectory", "nzOpenFileDialogOnClick", "nzBeforeUpload", "nzCustomRequest", "nzData", "nzFilter", "nzFileList", "nzDisabled", "nzHeaders", "nzListType", "nzMultiple", "nzName", "nzShowUploadList", "nzShowButton", "nzWithCredentials", "nzRemove", "nzPreview", "nzPreviewFile", "nzPreviewIsImage", "nzTransformFile", "nzDownload", "nzIconRender", "nzFileListRender"], outputs: ["nzChange", "nzFileListChange"], exportAs: ["nzUpload"] }, { 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: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { 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", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "itemChange", "onFocus"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { 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: NzPaginationModule }, { kind: "component", type: i5$3.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$2.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: "component", type: i6$2.NzThAddOnComponent, selector: "th[nzColumnKey], th[nzSortFn], th[nzSortOrder], th[nzFilters], th[nzShowSort], th[nzShowFilter], th[nzCustomFilter]", inputs: ["nzColumnKey", "nzFilterMultiple", "nzSortOrder", "nzSortPriority", "nzSortDirections", "nzFilters", "nzSortFn", "nzFilterFn", "nzShowSort", "nzShowFilter", "nzCustomFilter"], outputs: ["nzCheckedChange", "nzSortOrderChange", "nzFilterChange"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.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: i6$2.NzCellFixedDirective, selector: "td[nzRight],th[nzRight],td[nzLeft],th[nzLeft]", inputs: ["nzRight", "nzLeft", "colspan", "colSpan"] }, { 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: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { 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: "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: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzDropDownModule }, { 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$3.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.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i5$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { 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: "pipe", type: FormatBytesPipe, name: "formatBytes" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: FileListComponent, decorators: [{
             type: Component,
@@ -4928,7 +4928,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         NzInputModule,
                         NzToolTipModule,
                         FormatBytesPipe,
-                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-row [nzGutter]=\"[8, 0]\">\r\n      <div nz-col>\r\n        <button nz-button nzType=\"primary\" (click)=\"getData()\">{{ TranslateKey.SEARCH | translate }}</button>\r\n      </div>\r\n      <nz-upload\r\n        [nzAction]=\"\r\n          AppGlobals.apiEndpoint +\r\n          '/api/file/Upload?SaveToDB=' +\r\n          (SaveTo == 'DB' ? 'true' : 'false') +\r\n          '&FileCode=' +\r\n          FileCode\r\n        \"\r\n        (nzChange)=\"handleChange($event)\"\r\n      >\r\n        <button nz-button>\r\n          <nz-icon nzType=\"upload\" />\r\n          T\u1EA3i file\r\n        </button>\r\n      </nz-upload>\r\n      <extend-select\r\n        nz-col\r\n        nzSpan=\"3\"\r\n        [placeHolder]=\"'Save To'\"\r\n        [lstItem]=\"[\r\n          {\r\n            Code: 'DB',\r\n            Name: 'DB',\r\n          },\r\n          {\r\n            Code: 'DISC',\r\n            Name: 'DISC',\r\n          },\r\n        ]\"\r\n        [valueField]=\"'Code'\"\r\n        [displayField]=\"'Name'\"\r\n        [(_ngModel)]=\"SaveTo\"\r\n      ></extend-select>\r\n      <div nz-col [nzSpan]=\"8\">\r\n        <input nz-input placeholder=\"File Code\" [(ngModel)]=\"FileCode\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div nz-row [nzGutter]=\"[0, 8]\">\r\n    <div nz-col nzSpan=\"24\">\r\n      <nz-table\r\n        [nzData]=\"data?.LstItem || []\"\r\n        [nzBordered]=\"true\"\r\n        [nzSize]=\"'small'\"\r\n        [nzFrontPagination]=\"false\"\r\n        [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 225px)' }\"\r\n      >\r\n        <thead>\r\n          <tr>\r\n            <th nzWidth=\"50px\">#</th>\r\n            <th\r\n              [nzShowSort]=\"true\"\r\n              [nzSortOrder]=\"filter.OrderOption.FieldName == 'Code' ? filter.OrderOption.Direction : null\"\r\n              [nzSortDirections]=\"['ascend', 'descend']\"\r\n              (nzSortOrderChange)=\"\r\n                filter.OrderOption.FieldName = 'Code'; filter.OrderOption.Direction = $event; getData()\r\n              \"\r\n            >\r\n              Code\r\n            </th>\r\n            <th>Temp file</th>\r\n            <th>Content only</th>\r\n            <th>FileName</th>\r\n            <th class=\"right\">FileSize</th>\r\n            <th>FileId</th>\r\n            <th nzWidth=\"100px\">Action</th>\r\n          </tr>\r\n          <tr (keyup.enter)=\"search()\" class=\"tr-search\">\r\n            <th></th>\r\n            <th>\r\n              <extend-input\r\n                [size]=\"'small'\"\r\n                [showClear]=\"true\"\r\n                [(_ngModel)]=\"filter.Code\"\r\n                (onclickClearIcon)=\"search()\"\r\n              ></extend-input>\r\n            </th>\r\n            <th></th>\r\n            <th></th>\r\n            <th></th>\r\n            <th></th>\r\n            <th></th>\r\n            <th></th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (row of data?.LstItem; track $index; let i = $index) {\r\n            <tr>\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>{{ row.Code }}</td>\r\n              <td class=\"center\"><extend-checkbox [(_ngModel)]=\"row.IsTemp\"></extend-checkbox></td>\r\n              <td class=\"center\"><extend-checkbox [(_ngModel)]=\"row.IsContentOnly\"></extend-checkbox></td>\r\n              <td>{{ row.FileName }}</td>\r\n              <td class=\"right\">{{ row.FileSize || 0 | formatBytes }}</td>\r\n              <td>\r\n                {{ row.App_File_Id }}\r\n              </td>\r\n              <td class=\"center\" nzRight>\r\n                <i\r\n                  *ngIf=\"row.IsContentOnly\"\r\n                  nz-tooltip=\"Move to disk\"\r\n                  nz-icon\r\n                  nzType=\"file\"\r\n                  nzTheme=\"outline\"\r\n                  class=\"color-primary cursor-pointer icon-size-16\"\r\n                  (click)=\"moveFileToDisk(row)\"\r\n                ></i>\r\n                <box [width]=\"5\"></box>\r\n                <i\r\n                  nz-icon\r\n                  nzType=\"save\"\r\n                  nzTheme=\"outline\"\r\n                  class=\"color-primary cursor-pointer icon-size-16\"\r\n                  (click)=\"save(row)\"\r\n                ></i>\r\n                <box [width]=\"5\"></box>\r\n                <i\r\n                  nz-icon\r\n                  nzType=\"download\"\r\n                  nzTheme=\"outline\"\r\n                  class=\"color-primary cursor-pointer icon-size-16\"\r\n                  (click)=\"download(row)\"\r\n                ></i>\r\n                <box [width]=\"5\"></box>\r\n                <a\r\n                  nz-popconfirm\r\n                  [nzPopconfirmTitle]=\"TranslateKey.CONFIRM_DELETE | translate\"\r\n                  nzPopconfirmPlacement=\"top\"\r\n                  (nzOnConfirm)=\"delete(row)\"\r\n                  nzOkDanger\r\n                >\r\n                  <i nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn cursor-pointer icon-size-16\"></i>\r\n                </a>\r\n              </td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </nz-table>\r\n    </div>\r\n    <div nz-col nzSpan=\"24\">\r\n      <div nz-flex nzJustify=\"end\">\r\n        <nz-pagination\r\n          [nzSize]=\"'small'\"\r\n          [nzPageIndex]=\"filter.PageIndex + 1\"\r\n          [nzPageSize]=\"filter.PageSize\"\r\n          [nzTotal]=\"data?.TotalCount || 0\"\r\n          [nzShowSizeChanger]=\"true\"\r\n          [nzShowTotal]=\"showTotalTpl\"\r\n          [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n          (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n          (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n        >\r\n        </nz-pagination>\r\n\r\n        <ng-template #showTotalTpl let-total let-range=\"range\">\r\n          {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-row [nzGutter]=\"[8, 0]\">\r\n      <div nz-col>\r\n        <button nz-button nzType=\"primary\" (click)=\"getData()\">{{ TranslateKey.SEARCH | translate }}</button>\r\n      </div>\r\n      <nz-upload\r\n        [nzAction]=\"\r\n          AppGlobals.apiEndpoint +\r\n          '/api/file/Upload?SaveToDB=' +\r\n          (SaveTo == 'DB' ? 'true' : 'false') +\r\n          '&FileCode=' +\r\n          FileCode\r\n        \"\r\n        (nzChange)=\"handleChange($event)\"\r\n      >\r\n        <button nz-button>\r\n          <nz-icon nzType=\"upload\" />\r\n          T\u1EA3i file\r\n        </button>\r\n      </nz-upload>\r\n      <extend-select\r\n        nz-col\r\n        nzSpan=\"3\"\r\n        [placeHolder]=\"'Save To'\"\r\n        [lstItem]=\"[\r\n          {\r\n            Code: 'DB',\r\n            Name: 'DB',\r\n          },\r\n          {\r\n            Code: 'DISC',\r\n            Name: 'DISC',\r\n          },\r\n        ]\"\r\n        [valueField]=\"'Code'\"\r\n        [displayField]=\"'Name'\"\r\n        [(_ngModel)]=\"SaveTo\"\r\n      ></extend-select>\r\n      <div nz-col [nzSpan]=\"8\">\r\n        <input nz-input placeholder=\"File Code\" [(ngModel)]=\"FileCode\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div nz-row [nzGutter]=\"[0, 8]\">\r\n    <div nz-col nzSpan=\"24\">\r\n      <nz-table\r\n        [nzData]=\"data?.LstItem || []\"\r\n        [nzBordered]=\"true\"\r\n        [nzSize]=\"'small'\"\r\n        [nzShowPagination]=\"false\"\r\n        [nzFrontPagination]=\"false\"\r\n        [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 225px)' }\"\r\n      >\r\n        <thead>\r\n          <tr>\r\n            <th nzWidth=\"50px\">#</th>\r\n            <th\r\n              [nzShowSort]=\"true\"\r\n              [nzSortOrder]=\"filter.OrderOption.FieldName == 'Code' ? filter.OrderOption.Direction : null\"\r\n              [nzSortDirections]=\"['ascend', 'descend']\"\r\n              (nzSortOrderChange)=\"\r\n                filter.OrderOption.FieldName = 'Code'; filter.OrderOption.Direction = $event; getData()\r\n              \"\r\n            >\r\n              Code\r\n            </th>\r\n            <th>Temp file</th>\r\n            <th>Content only</th>\r\n            <th>FileName</th>\r\n            <th class=\"right\">FileSize</th>\r\n            <th>FileId</th>\r\n            <th nzWidth=\"100px\">Action</th>\r\n          </tr>\r\n          <tr (keyup.enter)=\"search()\" class=\"tr-search\">\r\n            <th></th>\r\n            <th>\r\n              <extend-input\r\n                [size]=\"'small'\"\r\n                [showClear]=\"true\"\r\n                [(_ngModel)]=\"filter.Code\"\r\n                (onclickClearIcon)=\"search()\"\r\n              ></extend-input>\r\n            </th>\r\n            <th></th>\r\n            <th></th>\r\n            <th></th>\r\n            <th></th>\r\n            <th></th>\r\n            <th></th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (row of data?.LstItem; track $index; let i = $index) {\r\n            <tr>\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>{{ row.Code }}</td>\r\n              <td class=\"center\"><extend-checkbox [(_ngModel)]=\"row.IsTemp\"></extend-checkbox></td>\r\n              <td class=\"center\"><extend-checkbox [(_ngModel)]=\"row.IsContentOnly\"></extend-checkbox></td>\r\n              <td>{{ row.FileName }}</td>\r\n              <td class=\"right\">{{ row.FileSize || 0 | formatBytes }}</td>\r\n              <td>\r\n                {{ row.App_File_Id }}\r\n              </td>\r\n              <td class=\"center\" nzRight>\r\n                <i\r\n                  *ngIf=\"row.IsContentOnly\"\r\n                  nz-tooltip=\"Move to disk\"\r\n                  nz-icon\r\n                  nzType=\"file\"\r\n                  nzTheme=\"outline\"\r\n                  class=\"color-primary cursor-pointer icon-size-16\"\r\n                  (click)=\"moveFileToDisk(row)\"\r\n                ></i>\r\n                <box [width]=\"5\"></box>\r\n                <i\r\n                  nz-icon\r\n                  nzType=\"save\"\r\n                  nzTheme=\"outline\"\r\n                  class=\"color-primary cursor-pointer icon-size-16\"\r\n                  (click)=\"save(row)\"\r\n                ></i>\r\n                <box [width]=\"5\"></box>\r\n                <i\r\n                  nz-icon\r\n                  nzType=\"download\"\r\n                  nzTheme=\"outline\"\r\n                  class=\"color-primary cursor-pointer icon-size-16\"\r\n                  (click)=\"download(row)\"\r\n                ></i>\r\n                <box [width]=\"5\"></box>\r\n                <a\r\n                  nz-popconfirm\r\n                  [nzPopconfirmTitle]=\"TranslateKey.CONFIRM_DELETE | translate\"\r\n                  nzPopconfirmPlacement=\"top\"\r\n                  (nzOnConfirm)=\"delete(row)\"\r\n                  nzOkDanger\r\n                >\r\n                  <i nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn cursor-pointer icon-size-16\"></i>\r\n                </a>\r\n              </td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </nz-table>\r\n    </div>\r\n    <div nz-col nzSpan=\"24\">\r\n      <div nz-flex nzJustify=\"end\">\r\n        <nz-pagination\r\n          [nzSize]=\"'small'\"\r\n          [nzPageIndex]=\"filter.PageIndex + 1\"\r\n          [nzPageSize]=\"filter.PageSize\"\r\n          [nzTotal]=\"data?.TotalCount || 0\"\r\n          [nzShowSizeChanger]=\"true\"\r\n          [nzShowTotal]=\"showTotalTpl\"\r\n          [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n          (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n          (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n        >\r\n        </nz-pagination>\r\n\r\n        <ng-template #showTotalTpl let-total let-range=\"range\">\r\n          {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }] });
 
 let App_Menu$1 = class App_Menu {
@@ -5162,7 +5162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 }]
         }] });
 
-const URLs$c = {
+const URLs$d = {
     getById: '/api/App_Menu/GetById',
     getAll: '/api/App_Menu/GetAll',
     getList: '/api/App_Menu/GetList',
@@ -5175,29 +5175,29 @@ const URLs$c = {
 class MenuService extends HTTPService {
     getById(id) {
         let pr = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$c.getById, pr);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$d.getById, pr);
     }
     getAll() {
-        return this.post(AppGlobals.apiEndpoint + URLs$c.getAll);
+        return this.post(AppGlobals.apiEndpoint + URLs$d.getAll);
     }
     getList(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$c.getList, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$d.getList, filter);
     }
     getPaging(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$c.getPaging, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$d.getPaging, filter);
     }
     addOrEdit(obj) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$c.addOrEdit, obj);
+        return this.postData(AppGlobals.apiEndpoint + URLs$d.addOrEdit, obj);
     }
     addOrEditInListComponent(obj) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$c.addOrEditInListComponent, obj);
+        return this.postData(AppGlobals.apiEndpoint + URLs$d.addOrEditInListComponent, obj);
     }
     delete(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$c.delete, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$d.delete, params);
     }
     getTree() {
-        return this.post(AppGlobals.apiEndpoint + URLs$c.getTree);
+        return this.post(AppGlobals.apiEndpoint + URLs$d.getTree);
     }
     getRoleMenuRefByMenuId(menuId) {
         let pr = new HttpParams().append('menuId', menuId);
@@ -5306,7 +5306,7 @@ class MenuListComponent extends BaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MenuListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: MenuListComponent, isStandalone: true, selector: "app-menu-list", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <div nz-flex nzGap=\"small\">\r\n        <button-add (click)=\"edit(null)\"></button-add>\r\n        <button-search (click)=\"search()\"></button-search>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data?.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th>T\u00EAn</th>\r\n          <th>URL</th>\r\n          <th nzWidth=\"90px\">Icon</th>\r\n          <th nzWidth=\"90px\">Order</th>\r\n          <th>Menu cha</th>\r\n          <th nzWidth=\"110px\">Header menu</th>\r\n          <th nzWidth=\"80px\">Hi\u1EC7u l\u1EF1c</th>\r\n          <th nzWidth=\"75px\" nzRight>Thao t\u00E1c</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.Name\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.ParentName\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th class=\"center\">\r\n            <extend-checkbox-3-value\r\n              [(_ngModel)]=\"filter.IsHeaderMenu\"\r\n              (_ngModelChange)=\"search()\"\r\n            ></extend-checkbox-3-value>\r\n          </th>\r\n          <th></th>\r\n          <th class=\"center\" nzRight>\r\n            <icon-add (click)=\"add()\"></icon-add>\r\n          </th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of table.data; track $index; let i = $index) {\r\n          @if (selectedMenu != row) {\r\n            <tr (click)=\"selectedMenu = row\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>{{ row.TreeNodeName }}</td>\r\n              <td>{{ row.Url }}</td>\r\n              <td>{{ row.Icon }}</td>\r\n              <td>{{ row.OrderValue }}</td>\r\n              <td>{{ row.ParentName }}</td>\r\n              <td class=\"center\">\r\n                @if (row.IsHeaderMenu) {\r\n                  <icon-check></icon-check>\r\n                }\r\n              </td>\r\n              <td class=\"center\">\r\n                @if (row.IsActive) {\r\n                  <icon-check></icon-check>\r\n                }\r\n              </td>\r\n              <td class=\"center\" nzRight>\r\n                <icon-edit (click)=\"edit(row)\"></icon-edit>\r\n                <box [width]=\"4\"></box>\r\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n              </td>\r\n            </tr>\r\n          } @else {\r\n            <tr (keyup.enter)=\"save()\" class=\"selected\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>\r\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Name\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Url\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Icon\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input-number [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.OrderValue\"></extend-input-number>\r\n              </td>\r\n              <td>\r\n                <nz-tree-select\r\n                  class=\"full-width\"\r\n                  [nzNodes]=\"treeMenu\"\r\n                  nzShowSearch\r\n                  nzPlaceHolder=\" \"\r\n                  [nzSize]=\"'small'\"\r\n                  [nzDropdownMatchSelectWidth]=\"false\"\r\n                  [(ngModel)]=\"selectedMenu.ParentId\"\r\n                ></nz-tree-select>\r\n              </td>\r\n              <td class=\"center\">\r\n                <extend-checkbox [(_ngModel)]=\"selectedMenu.IsHeaderMenu\"></extend-checkbox>\r\n              </td>\r\n              <td class=\"center\">\r\n                <extend-checkbox [(_ngModel)]=\"selectedMenu.IsActive\"></extend-checkbox>\r\n              </td>\r\n              <td class=\"center\">\r\n                <icon-save (click)=\"save()\"></icon-save>\r\n                <box [width]=\"4\"></box>\r\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n              </td>\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data?.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { 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: ReactiveFormsModule }, { kind: "ngmodule", type: NzTreeSelectModule }, { kind: "component", type: i3$4.NzTreeSelectComponent, selector: "nz-tree-select", inputs: ["nzId", "nzAllowClear", "nzShowExpand", "nzShowLine", "nzDropdownMatchSelectWidth", "nzCheckable", "nzHideUnMatched", "nzShowIcon", "nzShowSearch", "nzDisabled", "nzAsyncData", "nzMultiple", "nzDefaultExpandAll", "nzCheckStrictly", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualHeight", "nzExpandedIcon", "nzNotFoundContent", "nzNodes", "nzOpen", "nzSize", "nzPlaceHolder", "nzDropdownStyle", "nzDropdownClassName", "nzBackdrop", "nzStatus", "nzPlacement", "nzExpandedKeys", "nzDisplayWith", "nzMaxTagCount", "nzMaxTagPlaceholder", "nzTreeTemplate"], outputs: ["nzOpenChange", "nzCleared", "nzRemoved", "nzExpandChange", "nzTreeClick", "nzTreeCheckboxChange"], exportAs: ["nzTreeSelect"] }, { kind: "component", type: ButtonSearch, selector: "button-search" }, { kind: "component", type: ButtonAdd, selector: "button-add" }, { 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: i6$2.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: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.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: i6$2.NzCellFixedDirective, selector: "td[nzRight],th[nzRight],td[nzLeft],th[nzLeft]", inputs: ["nzRight", "nzLeft", "colspan", "colSpan"] }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i5$3.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: IconAdd, selector: "icon-add", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconEdit, selector: "icon-edit", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconCheck, selector: "icon-check", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconSave, selector: "icon-save", inputs: ["size"], outputs: ["click"] }, { 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: 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: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "component", type: ExtendCheckbox3Value, selector: "extend-checkbox-3-value", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: MenuListComponent, isStandalone: true, selector: "app-menu-list", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <div nz-flex nzGap=\"small\">\r\n        <button-add (click)=\"edit(null)\"></button-add>\r\n        <button-search (click)=\"search()\"></button-search>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data?.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"false\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th>T\u00EAn</th>\r\n          <th>URL</th>\r\n          <th nzWidth=\"90px\">Icon</th>\r\n          <th nzWidth=\"90px\">Order</th>\r\n          <th>Menu cha</th>\r\n          <th nzWidth=\"110px\">Header menu</th>\r\n          <th nzWidth=\"80px\">Hi\u1EC7u l\u1EF1c</th>\r\n          <th nzWidth=\"75px\" nzRight>Thao t\u00E1c</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.Name\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.ParentName\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th class=\"center\">\r\n            <extend-checkbox-3-value\r\n              [(_ngModel)]=\"filter.IsHeaderMenu\"\r\n              (_ngModelChange)=\"search()\"\r\n            ></extend-checkbox-3-value>\r\n          </th>\r\n          <th></th>\r\n          <th class=\"center\" nzRight>\r\n            <icon-add (click)=\"add()\"></icon-add>\r\n          </th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of table.data; track $index; let i = $index) {\r\n          @if (selectedMenu != row) {\r\n            <tr (click)=\"selectedMenu = row\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>{{ row.TreeNodeName }}</td>\r\n              <td>{{ row.Url }}</td>\r\n              <td>{{ row.Icon }}</td>\r\n              <td>{{ row.OrderValue }}</td>\r\n              <td>{{ row.ParentName }}</td>\r\n              <td class=\"center\">\r\n                @if (row.IsHeaderMenu) {\r\n                  <icon-check></icon-check>\r\n                }\r\n              </td>\r\n              <td class=\"center\">\r\n                @if (row.IsActive) {\r\n                  <icon-check></icon-check>\r\n                }\r\n              </td>\r\n              <td class=\"center\" nzRight>\r\n                <icon-edit (click)=\"edit(row)\"></icon-edit>\r\n                <box [width]=\"4\"></box>\r\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n              </td>\r\n            </tr>\r\n          } @else {\r\n            <tr (keyup.enter)=\"save()\" class=\"selected\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>\r\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Name\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Url\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Icon\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input-number [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.OrderValue\"></extend-input-number>\r\n              </td>\r\n              <td>\r\n                <nz-tree-select\r\n                  class=\"full-width\"\r\n                  [nzNodes]=\"treeMenu\"\r\n                  nzShowSearch\r\n                  nzPlaceHolder=\" \"\r\n                  [nzSize]=\"'small'\"\r\n                  [nzDropdownMatchSelectWidth]=\"false\"\r\n                  [(ngModel)]=\"selectedMenu.ParentId\"\r\n                ></nz-tree-select>\r\n              </td>\r\n              <td class=\"center\">\r\n                <extend-checkbox [(_ngModel)]=\"selectedMenu.IsHeaderMenu\"></extend-checkbox>\r\n              </td>\r\n              <td class=\"center\">\r\n                <extend-checkbox [(_ngModel)]=\"selectedMenu.IsActive\"></extend-checkbox>\r\n              </td>\r\n              <td class=\"center\">\r\n                <icon-save (click)=\"save()\"></icon-save>\r\n                <box [width]=\"4\"></box>\r\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n              </td>\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data?.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { 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: ReactiveFormsModule }, { kind: "ngmodule", type: NzTreeSelectModule }, { kind: "component", type: i3$4.NzTreeSelectComponent, selector: "nz-tree-select", inputs: ["nzId", "nzAllowClear", "nzShowExpand", "nzShowLine", "nzDropdownMatchSelectWidth", "nzCheckable", "nzHideUnMatched", "nzShowIcon", "nzShowSearch", "nzDisabled", "nzAsyncData", "nzMultiple", "nzDefaultExpandAll", "nzCheckStrictly", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualHeight", "nzExpandedIcon", "nzNotFoundContent", "nzNodes", "nzOpen", "nzSize", "nzPlaceHolder", "nzDropdownStyle", "nzDropdownClassName", "nzBackdrop", "nzStatus", "nzPlacement", "nzExpandedKeys", "nzDisplayWith", "nzMaxTagCount", "nzMaxTagPlaceholder", "nzTreeTemplate"], outputs: ["nzOpenChange", "nzCleared", "nzRemoved", "nzExpandChange", "nzTreeClick", "nzTreeCheckboxChange"], exportAs: ["nzTreeSelect"] }, { kind: "component", type: ButtonSearch, selector: "button-search" }, { kind: "component", type: ButtonAdd, selector: "button-add" }, { 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: i6$2.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: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.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: i6$2.NzCellFixedDirective, selector: "td[nzRight],th[nzRight],td[nzLeft],th[nzLeft]", inputs: ["nzRight", "nzLeft", "colspan", "colSpan"] }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i5$3.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: IconAdd, selector: "icon-add", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconEdit, selector: "icon-edit", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconCheck, selector: "icon-check", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconSave, selector: "icon-save", inputs: ["size"], outputs: ["click"] }, { 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: 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: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "component", type: ExtendCheckbox3Value, selector: "extend-checkbox-3-value", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MenuListComponent, decorators: [{
             type: Component,
@@ -5331,10 +5331,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         ExtendCheckbox,
                         Box,
                         ExtendCheckbox3Value,
-                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <div nz-flex nzGap=\"small\">\r\n        <button-add (click)=\"edit(null)\"></button-add>\r\n        <button-search (click)=\"search()\"></button-search>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data?.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th>T\u00EAn</th>\r\n          <th>URL</th>\r\n          <th nzWidth=\"90px\">Icon</th>\r\n          <th nzWidth=\"90px\">Order</th>\r\n          <th>Menu cha</th>\r\n          <th nzWidth=\"110px\">Header menu</th>\r\n          <th nzWidth=\"80px\">Hi\u1EC7u l\u1EF1c</th>\r\n          <th nzWidth=\"75px\" nzRight>Thao t\u00E1c</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.Name\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.ParentName\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th class=\"center\">\r\n            <extend-checkbox-3-value\r\n              [(_ngModel)]=\"filter.IsHeaderMenu\"\r\n              (_ngModelChange)=\"search()\"\r\n            ></extend-checkbox-3-value>\r\n          </th>\r\n          <th></th>\r\n          <th class=\"center\" nzRight>\r\n            <icon-add (click)=\"add()\"></icon-add>\r\n          </th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of table.data; track $index; let i = $index) {\r\n          @if (selectedMenu != row) {\r\n            <tr (click)=\"selectedMenu = row\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>{{ row.TreeNodeName }}</td>\r\n              <td>{{ row.Url }}</td>\r\n              <td>{{ row.Icon }}</td>\r\n              <td>{{ row.OrderValue }}</td>\r\n              <td>{{ row.ParentName }}</td>\r\n              <td class=\"center\">\r\n                @if (row.IsHeaderMenu) {\r\n                  <icon-check></icon-check>\r\n                }\r\n              </td>\r\n              <td class=\"center\">\r\n                @if (row.IsActive) {\r\n                  <icon-check></icon-check>\r\n                }\r\n              </td>\r\n              <td class=\"center\" nzRight>\r\n                <icon-edit (click)=\"edit(row)\"></icon-edit>\r\n                <box [width]=\"4\"></box>\r\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n              </td>\r\n            </tr>\r\n          } @else {\r\n            <tr (keyup.enter)=\"save()\" class=\"selected\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>\r\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Name\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Url\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Icon\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input-number [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.OrderValue\"></extend-input-number>\r\n              </td>\r\n              <td>\r\n                <nz-tree-select\r\n                  class=\"full-width\"\r\n                  [nzNodes]=\"treeMenu\"\r\n                  nzShowSearch\r\n                  nzPlaceHolder=\" \"\r\n                  [nzSize]=\"'small'\"\r\n                  [nzDropdownMatchSelectWidth]=\"false\"\r\n                  [(ngModel)]=\"selectedMenu.ParentId\"\r\n                ></nz-tree-select>\r\n              </td>\r\n              <td class=\"center\">\r\n                <extend-checkbox [(_ngModel)]=\"selectedMenu.IsHeaderMenu\"></extend-checkbox>\r\n              </td>\r\n              <td class=\"center\">\r\n                <extend-checkbox [(_ngModel)]=\"selectedMenu.IsActive\"></extend-checkbox>\r\n              </td>\r\n              <td class=\"center\">\r\n                <icon-save (click)=\"save()\"></icon-save>\r\n                <box [width]=\"4\"></box>\r\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n              </td>\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data?.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <div nz-flex nzGap=\"small\">\r\n        <button-add (click)=\"edit(null)\"></button-add>\r\n        <button-search (click)=\"search()\"></button-search>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data?.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"false\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th>T\u00EAn</th>\r\n          <th>URL</th>\r\n          <th nzWidth=\"90px\">Icon</th>\r\n          <th nzWidth=\"90px\">Order</th>\r\n          <th>Menu cha</th>\r\n          <th nzWidth=\"110px\">Header menu</th>\r\n          <th nzWidth=\"80px\">Hi\u1EC7u l\u1EF1c</th>\r\n          <th nzWidth=\"75px\" nzRight>Thao t\u00E1c</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.Name\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.ParentName\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th class=\"center\">\r\n            <extend-checkbox-3-value\r\n              [(_ngModel)]=\"filter.IsHeaderMenu\"\r\n              (_ngModelChange)=\"search()\"\r\n            ></extend-checkbox-3-value>\r\n          </th>\r\n          <th></th>\r\n          <th class=\"center\" nzRight>\r\n            <icon-add (click)=\"add()\"></icon-add>\r\n          </th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of table.data; track $index; let i = $index) {\r\n          @if (selectedMenu != row) {\r\n            <tr (click)=\"selectedMenu = row\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>{{ row.TreeNodeName }}</td>\r\n              <td>{{ row.Url }}</td>\r\n              <td>{{ row.Icon }}</td>\r\n              <td>{{ row.OrderValue }}</td>\r\n              <td>{{ row.ParentName }}</td>\r\n              <td class=\"center\">\r\n                @if (row.IsHeaderMenu) {\r\n                  <icon-check></icon-check>\r\n                }\r\n              </td>\r\n              <td class=\"center\">\r\n                @if (row.IsActive) {\r\n                  <icon-check></icon-check>\r\n                }\r\n              </td>\r\n              <td class=\"center\" nzRight>\r\n                <icon-edit (click)=\"edit(row)\"></icon-edit>\r\n                <box [width]=\"4\"></box>\r\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n              </td>\r\n            </tr>\r\n          } @else {\r\n            <tr (keyup.enter)=\"save()\" class=\"selected\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>\r\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Name\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Url\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Icon\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input-number [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.OrderValue\"></extend-input-number>\r\n              </td>\r\n              <td>\r\n                <nz-tree-select\r\n                  class=\"full-width\"\r\n                  [nzNodes]=\"treeMenu\"\r\n                  nzShowSearch\r\n                  nzPlaceHolder=\" \"\r\n                  [nzSize]=\"'small'\"\r\n                  [nzDropdownMatchSelectWidth]=\"false\"\r\n                  [(ngModel)]=\"selectedMenu.ParentId\"\r\n                ></nz-tree-select>\r\n              </td>\r\n              <td class=\"center\">\r\n                <extend-checkbox [(_ngModel)]=\"selectedMenu.IsHeaderMenu\"></extend-checkbox>\r\n              </td>\r\n              <td class=\"center\">\r\n                <extend-checkbox [(_ngModel)]=\"selectedMenu.IsActive\"></extend-checkbox>\r\n              </td>\r\n              <td class=\"center\">\r\n                <icon-save (click)=\"save()\"></icon-save>\r\n                <box [width]=\"4\"></box>\r\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n              </td>\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data?.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }] });
 
-const URLs$b = {
+const URLs$c = {
     getById: '/api/App_Role/GetById',
     getAll: '/api/App_Role/GetAll',
     getList: '/api/App_Role/GetList',
@@ -5346,23 +5346,23 @@ class RoleService extends HTTPService {
     commonService = inject(CommonService);
     getById(id) {
         let pr = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$b.getById, pr);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$c.getById, pr);
     }
     getAll() {
-        return this.post(AppGlobals.apiEndpoint + URLs$b.getAll);
+        return this.post(AppGlobals.apiEndpoint + URLs$c.getAll);
     }
     getList(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$b.getList, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$c.getList, filter);
     }
     getPaging(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$b.getPaging, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$c.getPaging, filter);
     }
     addOrEdit(obj) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$b.addOrEdit, obj);
+        return this.postData(AppGlobals.apiEndpoint + URLs$c.addOrEdit, obj);
     }
     delete(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$b.delete, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$c.delete, params);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RoleService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RoleService, providedIn: 'root' });
@@ -5606,7 +5606,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                     ], template: "<form nz-form [formGroup]=\"formData\">\r\n  <!-- BUTTONS -->\r\n  <div nz-col [nzSpan]=\"24\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-save (click)=\"save()\"></button-save>\r\n      <button-delete *ngIf=\"formData.controls.App_Menu_Id.value\" (click)=\"delete()\"></button-delete>\r\n      <button-back (click)=\"goto('/admin/menu')\"></button-back>\r\n    </div>\r\n  </div>\r\n\r\n  <nz-divider></nz-divider>\r\n\r\n  <div nz-row [nzGutter]=\"['0', '16']\">\r\n    <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzLabelAlign=\"left\" nzNoColon=\"true\"> Menu cha </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\">\r\n          <nz-tree-select\r\n            class=\"full-width\"\r\n            [nzNodes]=\"treeMenu\"\r\n            nzShowSearch\r\n            nzPlaceHolder=\" \"\r\n            formControlName=\"ParentId\"\r\n          ></nz-tree-select>\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Name\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired> T\u00EAn </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n          <input nz-input formControlName=\"Name\" id=\"Name\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Url\" nzLabelAlign=\"left\" nzNoColon=\"true\"> URL </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n          <input nz-input formControlName=\"Url\" id=\"Url\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Icon\" nzLabelAlign=\"left\" nzNoColon=\"true\"> Icon </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n          <input nz-input formControlName=\"Icon\" id=\"Icon\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"OrderValue\" nzLabelAlign=\"left\" nzNoColon=\"true\">Order value</nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\">\r\n          <nz-input-number formControlName=\"OrderValue\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n      <div nz-row>\r\n        <div nz-col [nzSpan]=\"8\"></div>\r\n        <div nz-col [nzSpan]=\"16\">\r\n          <label nz-checkbox formControlName=\"IsActive\">Active</label>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- C\u1ED8T PH\u1EA2I: QU\u1EA2N L\u00DD ROLE -->\r\n    <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\r\n      <div style=\"border: 1px solid #d9d9d9; border-radius: 4px; padding: 16px; height: 100%; margin-left: 10px\">\r\n        <h4 style=\"margin-top: 0; margin-bottom: 16px\">\r\n          <span nz-icon nzType=\"team\" style=\"margin-right: 8px\"></span>\r\n          Qu\u1EA3n l\u00FD Role\r\n        </h4>\r\n\r\n        <nz-alert\r\n          *ngIf=\"!formData.controls.App_Menu_Id.value\"\r\n          nzType=\"info\"\r\n          nzMessage=\"Vui l\u00F2ng l\u01B0u Menu tr\u01B0\u1EDBc\"\r\n          nzDescription=\"B\u1EA1n c\u1EA7n l\u01B0u Menu tr\u01B0\u1EDBc, sau \u0111\u00F3 m\u1EDBi c\u00F3 th\u1EC3 th\u00EAm Role.\"\r\n          nzShowIcon\r\n        ></nz-alert>\r\n\r\n        <div *ngIf=\"formData.controls.App_Menu_Id.value\">\r\n          <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n            <span style=\"font-weight: 500\">Roles ({{ lstRoleMenu.length }})</span>\r\n            <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddRoleModal()\">\r\n              <span nz-icon nzType=\"plus\"></span>\r\n              Th\u00EAm\r\n            </button>\r\n          </div>\r\n\r\n          <div style=\"max-height: 400px; overflow-y: auto\">\r\n            <nz-table\r\n              #roleTable\r\n              [nzData]=\"lstRoleMenu\"\r\n              [nzSize]=\"'small'\"\r\n              [nzShowPagination]=\"false\"\r\n              [nzLoading]=\"isLoadingRoles\"\r\n            >\r\n              <thead>\r\n                <tr>\r\n                  <th nzWidth=\"40px\">STT</th>\r\n                  <th>Role</th>\r\n                  <th nzWidth=\"50px\" nzAlign=\"center\" nz-tooltip nzTooltipTitle=\"Xem\">C</th>\r\n                  <th nzWidth=\"50px\" nzAlign=\"center\" nz-tooltip nzTooltipTitle=\"S\u1EEDa\">U</th>\r\n                  <th nzWidth=\"50px\" nzAlign=\"center\" nz-tooltip nzTooltipTitle=\"S\u1EEDa\">D</th>\r\n                  <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n                </tr>\r\n              </thead>\r\n              <tbody>\r\n                <tr *ngFor=\"let item of roleTable.data; let i = index\">\r\n                  <td>{{ i + 1 }}</td>\r\n                  <td>\r\n                    <div style=\"font-weight: 500\">{{ item.RoleName }}</div>\r\n                    <div style=\"font-size: 12px; color: #888\">{{ item.RoleCode }}</div>\r\n                  </td>\r\n                  <td nzAlign=\"center\">\r\n                    <label nz-checkbox [(ngModel)]=\"item.CanCreate\" [ngModelOptions]=\"{ standalone: true }\"> </label>\r\n                  </td>\r\n                  <td nzAlign=\"center\">\r\n                    <label nz-checkbox [(ngModel)]=\"item.CanUpdate\" [ngModelOptions]=\"{ standalone: true }\"> </label>\r\n                  </td>\r\n                  <td nzAlign=\"center\">\r\n                    <label nz-checkbox [(ngModel)]=\"item.CanDelete\" [ngModelOptions]=\"{ standalone: true }\"> </label>\r\n                  </td>\r\n                  <td nzAlign=\"center\">\r\n                    <icon-delete (click)=\"deleteRoleFromMenu(item)\"></icon-delete>\r\n                  </td>\r\n                </tr>\r\n              </tbody>\r\n            </nz-table>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</form>\r\n\r\n<!-- Modal ch\u1ECDn Role -->\r\n<nz-modal\r\n  [(nzVisible)]=\"isAddRoleModalVisible\"\r\n  nzTitle=\"Th\u00EAm Role v\u00E0o Menu\"\r\n  [nzWidth]=\"700\"\r\n  (nzOnCancel)=\"closeAddRoleModal()\"\r\n  (nzOnOk)=\"addRolesToMenu()\"\r\n  nzOkText=\"Th\u00EAm\"\r\n  nzCancelText=\"H\u1EE7y\"\r\n>\r\n  <ng-container *nzModalContent>\r\n    <!-- Search box -->\r\n    <nz-input-group [nzPrefix]=\"prefixIconSearch\" style=\"margin-bottom: 16px\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        placeholder=\"T\u00ECm ki\u1EBFm Role...\"\r\n        [(ngModel)]=\"searchRoleText\"\r\n        (ngModelChange)=\"filterAvailableRoles()\"\r\n      />\r\n    </nz-input-group>\r\n    <ng-template #prefixIconSearch>\r\n      <span nz-icon nzType=\"search\"></span>\r\n    </ng-template>\r\n\r\n    <nz-table\r\n      #addRoleTable\r\n      [nzData]=\"lstFilteredRole\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"true\"\r\n      [nzPageSize]=\"10\"\r\n      [nzLoading]=\"isLoadingAvailableRoles\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th\r\n            nzWidth=\"60px\"\r\n            nzShowCheckbox\r\n            [(nzChecked)]=\"isAllRoleChecked\"\r\n            (nzCheckedChange)=\"onAllRoleChecked($event)\"\r\n            [nzIndeterminate]=\"isRoleIndeterminate\"\r\n          ></th>\r\n          <th nzWidth=\"150px\">M\u00E3 Role</th>\r\n          <th>T\u00EAn Role</th>\r\n          <th>M\u00F4 t\u1EA3</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let item of addRoleTable.data\">\r\n          <td nz-flex nzJustify=\"center\">\r\n            <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onRoleChecked(item, $event)\"></label>\r\n          </td>\r\n          <td>{{ item.Code }}</td>\r\n          <td>{{ item.Name }}</td>\r\n          <td>{{ item.Description }}</td>\r\n        </tr>\r\n      </tbody>\r\n    </nz-table>\r\n  </ng-container>\r\n</nz-modal>\r\n" }]
         }] });
 
-const URLs$a = {
+const URLs$b = {
     getById: '/api/App_Org/GetById',
     getAll: '/api/App_Org/GetAll',
     getList: '/api/App_Org/GetList',
@@ -5618,23 +5618,23 @@ class OrgService extends HTTPService {
     cms = inject(CommonService);
     getById(id) {
         let pr = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$a.getById, pr);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$b.getById, pr);
     }
     getAll() {
-        return this.post(AppGlobals.apiEndpoint + URLs$a.getAll);
+        return this.post(AppGlobals.apiEndpoint + URLs$b.getAll);
     }
     getList(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$a.getList, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$b.getList, filter);
     }
     getPaging(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$a.getPaging, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$b.getPaging, filter);
     }
     addOrEdit(obj) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$a.addOrEdit, obj);
+        return this.postData(AppGlobals.apiEndpoint + URLs$b.addOrEdit, obj);
     }
     delete(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$a.delete, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$b.delete, params);
     }
     getAllForLogin(UserName) {
         const params = new HttpParams().append('UserName', UserName);
@@ -5748,7 +5748,7 @@ class OrgListComponent extends BaseComponent {
         this.getData();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: OrgListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: OrgListComponent, isStandalone: true, selector: "app-org-list", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-add (click)=\"edit(null)\"></button-add>\r\n      <button-search (click)=\"search()\"></button-search>\r\n    </div>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th nzWidth=\"200px\">M\u00E3</th>\r\n          <th>T\u00EAn</th>\r\n          <th nzWidth=\"250px\">T\u00EAn \u0111\u01A1n v\u1ECB cha</th>\r\n          <th nzWidth=\"75px\">Th\u1EE9 t\u1EF1</th>\r\n          <th nzWidth=\"75px\">Hi\u1EC7u l\u1EF1c</th>\r\n          <th nzWidth=\"75px\" nzRight>Thao t\u00E1c</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.Code\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.Name\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [(_ngModel)]=\"filter.ParentName\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th nzRight></th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of table.data; track $index; let i = $index) {\r\n          <tr>\r\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n            <td class=\"link-detail\" (click)=\"edit(row)\">{{ row.Code }}</td>\r\n            <td>{{ row.Name }}</td>\r\n            <td>{{ row.ParentName }}</td>\r\n            <td>{{ row.OrderValue }}</td>\r\n            <td class=\"center\">\r\n              @if (row.IsActive) {\r\n                <icon-check></icon-check>\r\n              }\r\n            </td>\r\n            <td class=\"center\" nzRight>\r\n              <icon-edit (click)=\"edit(row)\"></icon-edit><box [width]=\"4\"></box>\r\n              <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n\r\n  <div nz-col [nzSpan]=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { 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: ButtonAdd, selector: "button-add" }, { kind: "component", type: ButtonSearch, selector: "button-search" }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$2.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: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.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: i6$2.NzCellFixedDirective, selector: "td[nzRight],th[nzRight],td[nzLeft],th[nzLeft]", inputs: ["nzRight", "nzLeft", "colspan", "colSpan"] }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i5$3.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: IconEdit, selector: "icon-edit", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconCheck, selector: "icon-check", inputs: ["size"], outputs: ["click"] }, { 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: Box, selector: "box", inputs: ["display", "width", "height"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: OrgListComponent, isStandalone: true, selector: "app-org-list", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-add (click)=\"edit(null)\"></button-add>\r\n      <button-search (click)=\"search()\"></button-search>\r\n    </div>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"false\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th nzWidth=\"200px\">M\u00E3</th>\r\n          <th>T\u00EAn</th>\r\n          <th nzWidth=\"250px\">T\u00EAn \u0111\u01A1n v\u1ECB cha</th>\r\n          <th nzWidth=\"75px\">Th\u1EE9 t\u1EF1</th>\r\n          <th nzWidth=\"75px\">Hi\u1EC7u l\u1EF1c</th>\r\n          <th nzWidth=\"75px\" nzRight>Thao t\u00E1c</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.Code\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.Name\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [(_ngModel)]=\"filter.ParentName\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th nzRight></th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of table.data; track $index; let i = $index) {\r\n          <tr>\r\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n            <td class=\"link-detail\" (click)=\"edit(row)\">{{ row.Code }}</td>\r\n            <td>{{ row.Name }}</td>\r\n            <td>{{ row.ParentName }}</td>\r\n            <td>{{ row.OrderValue }}</td>\r\n            <td class=\"center\">\r\n              @if (row.IsActive) {\r\n                <icon-check></icon-check>\r\n              }\r\n            </td>\r\n            <td class=\"center\" nzRight>\r\n              <icon-edit (click)=\"edit(row)\"></icon-edit><box [width]=\"4\"></box>\r\n              <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n\r\n  <div nz-col [nzSpan]=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { 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: ButtonAdd, selector: "button-add" }, { kind: "component", type: ButtonSearch, selector: "button-search" }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$2.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: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.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: i6$2.NzCellFixedDirective, selector: "td[nzRight],th[nzRight],td[nzLeft],th[nzLeft]", inputs: ["nzRight", "nzLeft", "colspan", "colSpan"] }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i5$3.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: IconEdit, selector: "icon-edit", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconCheck, selector: "icon-check", inputs: ["size"], outputs: ["click"] }, { 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: Box, selector: "box", inputs: ["display", "width", "height"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: OrgListComponent, decorators: [{
             type: Component,
@@ -5765,10 +5765,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         IconCheck,
                         ExtendInput,
                         Box,
-                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-add (click)=\"edit(null)\"></button-add>\r\n      <button-search (click)=\"search()\"></button-search>\r\n    </div>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th nzWidth=\"200px\">M\u00E3</th>\r\n          <th>T\u00EAn</th>\r\n          <th nzWidth=\"250px\">T\u00EAn \u0111\u01A1n v\u1ECB cha</th>\r\n          <th nzWidth=\"75px\">Th\u1EE9 t\u1EF1</th>\r\n          <th nzWidth=\"75px\">Hi\u1EC7u l\u1EF1c</th>\r\n          <th nzWidth=\"75px\" nzRight>Thao t\u00E1c</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.Code\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.Name\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [(_ngModel)]=\"filter.ParentName\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th nzRight></th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of table.data; track $index; let i = $index) {\r\n          <tr>\r\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n            <td class=\"link-detail\" (click)=\"edit(row)\">{{ row.Code }}</td>\r\n            <td>{{ row.Name }}</td>\r\n            <td>{{ row.ParentName }}</td>\r\n            <td>{{ row.OrderValue }}</td>\r\n            <td class=\"center\">\r\n              @if (row.IsActive) {\r\n                <icon-check></icon-check>\r\n              }\r\n            </td>\r\n            <td class=\"center\" nzRight>\r\n              <icon-edit (click)=\"edit(row)\"></icon-edit><box [width]=\"4\"></box>\r\n              <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n\r\n  <div nz-col [nzSpan]=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-add (click)=\"edit(null)\"></button-add>\r\n      <button-search (click)=\"search()\"></button-search>\r\n    </div>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"false\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th nzWidth=\"200px\">M\u00E3</th>\r\n          <th>T\u00EAn</th>\r\n          <th nzWidth=\"250px\">T\u00EAn \u0111\u01A1n v\u1ECB cha</th>\r\n          <th nzWidth=\"75px\">Th\u1EE9 t\u1EF1</th>\r\n          <th nzWidth=\"75px\">Hi\u1EC7u l\u1EF1c</th>\r\n          <th nzWidth=\"75px\" nzRight>Thao t\u00E1c</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.Code\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.Name\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [(_ngModel)]=\"filter.ParentName\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th nzRight></th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of table.data; track $index; let i = $index) {\r\n          <tr>\r\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n            <td class=\"link-detail\" (click)=\"edit(row)\">{{ row.Code }}</td>\r\n            <td>{{ row.Name }}</td>\r\n            <td>{{ row.ParentName }}</td>\r\n            <td>{{ row.OrderValue }}</td>\r\n            <td class=\"center\">\r\n              @if (row.IsActive) {\r\n                <icon-check></icon-check>\r\n              }\r\n            </td>\r\n            <td class=\"center\" nzRight>\r\n              <icon-edit (click)=\"edit(row)\"></icon-edit><box [width]=\"4\"></box>\r\n              <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n\r\n  <div nz-col [nzSpan]=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }] });
 
-const URLs$9 = {
+const URLs$a = {
     getById: '/api/App_User/GetById',
     getByIdEx: '/api/App_User/GetByIdEx',
     getAll: '/api/App_User/GetAll',
@@ -5781,27 +5781,27 @@ class UserService extends HTTPService {
     cms = inject(CommonService);
     getById(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$9.getById, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$a.getById, params);
     }
     getByIdEx(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$9.getByIdEx, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$a.getByIdEx, params);
     }
     getAll() {
-        return this.post(AppGlobals.apiEndpoint + URLs$9.getAll);
+        return this.post(AppGlobals.apiEndpoint + URLs$a.getAll);
     }
     getList(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$9.getList, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$a.getList, filter);
     }
     getPaging(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$9.getPaging, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$a.getPaging, filter);
     }
     addOrEdit(obj) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$9.addOrEdit, obj);
+        return this.postData(AppGlobals.apiEndpoint + URLs$a.addOrEdit, obj);
     }
     delete(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$9.delete, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$a.delete, params);
     }
     importUser(data) {
         return this.postData(`${AppGlobals.apiEndpoint}/api/App_User/ImportUser`, data);
@@ -6964,7 +6964,7 @@ class RoleListComponent extends BaseComponent {
         this.getData();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RoleListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RoleListComponent, isStandalone: true, selector: "app-role-list", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-add (click)=\"edit(null)\"></button-add>\r\n      <button-search (click)=\"getData()\"></button-search>\r\n    </div>\r\n  </div>\r\n\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th\r\n            nzWidth=\"250px\"\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'Code' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'Code'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Code\r\n          </th>\r\n          <th\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'Name' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'Name'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Name\r\n          </th>\r\n          <th\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'Description' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'Description'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Description\r\n          </th>\r\n          <th\r\n            nzWidth=\"75px\"\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'IsActive' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'IsActive'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Active\r\n          </th>\r\n          <th nzWidth=\"75px\">Thao t\u00E1c</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.Code\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.Name\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of table.data; track $index; let i = $index) {\r\n          <tr>\r\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n            <td class=\"link-detail\" (click)=\"edit(row)\">{{ row.Code }}</td>\r\n            <td>{{ row.Name }}</td>\r\n            <td>{{ row.Description }}</td>\r\n            <td class=\"center\">\r\n              @if (row.IsActive) {\r\n                <icon-check></icon-check>\r\n              }\r\n            </td>\r\n            <td class=\"center\">\r\n              <icon-edit (click)=\"edit(row)\"></icon-edit><box [width]=\"4\"></box>\r\n              <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { 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: ButtonAdd, selector: "button-add" }, { kind: "component", type: ButtonSearch, selector: "button-search" }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$2.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: "component", type: i6$2.NzThAddOnComponent, selector: "th[nzColumnKey], th[nzSortFn], th[nzSortOrder], th[nzFilters], th[nzShowSort], th[nzShowFilter], th[nzCustomFilter]", inputs: ["nzColumnKey", "nzFilterMultiple", "nzSortOrder", "nzSortPriority", "nzSortDirections", "nzFilters", "nzSortFn", "nzFilterFn", "nzShowSort", "nzShowFilter", "nzCustomFilter"], outputs: ["nzCheckedChange", "nzSortOrderChange", "nzFilterChange"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.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: NzPaginationModule }, { kind: "component", type: i5$3.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: IconCheck, selector: "icon-check", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconEdit, selector: "icon-edit", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { 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: Box, selector: "box", inputs: ["display", "width", "height"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RoleListComponent, isStandalone: true, selector: "app-role-list", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-add (click)=\"edit(null)\"></button-add>\r\n      <button-search (click)=\"getData()\"></button-search>\r\n    </div>\r\n  </div>\r\n\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"false\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th\r\n            nzWidth=\"250px\"\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'Code' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'Code'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Code\r\n          </th>\r\n          <th\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'Name' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'Name'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Name\r\n          </th>\r\n          <th\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'Description' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'Description'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Description\r\n          </th>\r\n          <th\r\n            nzWidth=\"75px\"\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'IsActive' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'IsActive'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Active\r\n          </th>\r\n          <th nzWidth=\"75px\">Thao t\u00E1c</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.Code\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.Name\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of table.data; track $index; let i = $index) {\r\n          <tr>\r\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n            <td class=\"link-detail\" (click)=\"edit(row)\">{{ row.Code }}</td>\r\n            <td>{{ row.Name }}</td>\r\n            <td>{{ row.Description }}</td>\r\n            <td class=\"center\">\r\n              @if (row.IsActive) {\r\n                <icon-check></icon-check>\r\n              }\r\n            </td>\r\n            <td class=\"center\">\r\n              <icon-edit (click)=\"edit(row)\"></icon-edit><box [width]=\"4\"></box>\r\n              <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { 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: ButtonAdd, selector: "button-add" }, { kind: "component", type: ButtonSearch, selector: "button-search" }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$2.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: "component", type: i6$2.NzThAddOnComponent, selector: "th[nzColumnKey], th[nzSortFn], th[nzSortOrder], th[nzFilters], th[nzShowSort], th[nzShowFilter], th[nzCustomFilter]", inputs: ["nzColumnKey", "nzFilterMultiple", "nzSortOrder", "nzSortPriority", "nzSortDirections", "nzFilters", "nzSortFn", "nzFilterFn", "nzShowSort", "nzShowFilter", "nzCustomFilter"], outputs: ["nzCheckedChange", "nzSortOrderChange", "nzFilterChange"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.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: NzPaginationModule }, { kind: "component", type: i5$3.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: IconCheck, selector: "icon-check", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconEdit, selector: "icon-edit", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { 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: Box, selector: "box", inputs: ["display", "width", "height"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RoleListComponent, decorators: [{
             type: Component,
@@ -6981,7 +6981,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         IconDelete,
                         ExtendInput,
                         Box,
-                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-add (click)=\"edit(null)\"></button-add>\r\n      <button-search (click)=\"getData()\"></button-search>\r\n    </div>\r\n  </div>\r\n\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th\r\n            nzWidth=\"250px\"\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'Code' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'Code'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Code\r\n          </th>\r\n          <th\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'Name' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'Name'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Name\r\n          </th>\r\n          <th\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'Description' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'Description'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Description\r\n          </th>\r\n          <th\r\n            nzWidth=\"75px\"\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'IsActive' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'IsActive'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Active\r\n          </th>\r\n          <th nzWidth=\"75px\">Thao t\u00E1c</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.Code\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.Name\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of table.data; track $index; let i = $index) {\r\n          <tr>\r\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n            <td class=\"link-detail\" (click)=\"edit(row)\">{{ row.Code }}</td>\r\n            <td>{{ row.Name }}</td>\r\n            <td>{{ row.Description }}</td>\r\n            <td class=\"center\">\r\n              @if (row.IsActive) {\r\n                <icon-check></icon-check>\r\n              }\r\n            </td>\r\n            <td class=\"center\">\r\n              <icon-edit (click)=\"edit(row)\"></icon-edit><box [width]=\"4\"></box>\r\n              <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-add (click)=\"edit(null)\"></button-add>\r\n      <button-search (click)=\"getData()\"></button-search>\r\n    </div>\r\n  </div>\r\n\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"false\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th\r\n            nzWidth=\"250px\"\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'Code' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'Code'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Code\r\n          </th>\r\n          <th\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'Name' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'Name'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Name\r\n          </th>\r\n          <th\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'Description' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'Description'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Description\r\n          </th>\r\n          <th\r\n            nzWidth=\"75px\"\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'IsActive' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'IsActive'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Active\r\n          </th>\r\n          <th nzWidth=\"75px\">Thao t\u00E1c</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.Code\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.Name\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of table.data; track $index; let i = $index) {\r\n          <tr>\r\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n            <td class=\"link-detail\" (click)=\"edit(row)\">{{ row.Code }}</td>\r\n            <td>{{ row.Name }}</td>\r\n            <td>{{ row.Description }}</td>\r\n            <td class=\"center\">\r\n              @if (row.IsActive) {\r\n                <icon-check></icon-check>\r\n              }\r\n            </td>\r\n            <td class=\"center\">\r\n              <icon-edit (click)=\"edit(row)\"></icon-edit><box [width]=\"4\"></box>\r\n              <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }] });
 
 class RoleDetailComponent extends BaseComponent {
@@ -7413,7 +7413,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 args: ['parentSelect', { static: false }]
             }] } });
 
-const URLs$8 = {
+const URLs$9 = {
     getById: '/api/App_Setting/GetById',
     getAll: '/api/App_Setting/GetAll',
     getList: '/api/App_Setting/GetList',
@@ -7429,34 +7429,34 @@ let SettingService$1 = class SettingService extends HTTPService {
     commonService = inject(CommonService);
     getById(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$8.getById, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$9.getById, params);
     }
     getPaging(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$8.getPaging, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$9.getPaging, filter);
     }
     addOrEdit(obj) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$8.addOrEdit, obj);
+        return this.postData(AppGlobals.apiEndpoint + URLs$9.addOrEdit, obj);
     }
     delete(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$8.delete, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$9.delete, params);
     }
     getByCodeAnonymous(code) {
         const params = new HttpParams().append('Code', code);
-        return this.getParams(AppGlobals.apiEndpoint + URLs$8.getByCodeAnonymous, params);
+        return this.getParams(AppGlobals.apiEndpoint + URLs$9.getByCodeAnonymous, params);
     }
     // getGroupByCodeAnonymous(code: string) {
     //   const params = new HttpParams().append('Code', code);
     //   return this.getParams(AppGlobals.apiEndpoint + URLs.getByCodeAnonymous, params);
     // }
     getAllConfig() {
-        return this.post(AppGlobals.apiEndpoint + URLs$8.GetAllConfig);
+        return this.post(AppGlobals.apiEndpoint + URLs$9.GetAllConfig);
     }
     applyConfig(config) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$8.ApplyConfig, config);
+        return this.postData(AppGlobals.apiEndpoint + URLs$9.ApplyConfig, config);
     }
     getDbInfo() {
-        return this.post(AppGlobals.apiEndpoint + URLs$8.GetDbInfo);
+        return this.post(AppGlobals.apiEndpoint + URLs$9.GetDbInfo);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SettingService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SettingService, providedIn: 'root' });
@@ -7581,7 +7581,7 @@ class SettingListComponent extends BaseComponent {
         this.getData();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SettingListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: SettingListComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <div nz-flex nzGap=\"small\">\r\n        <button-search (click)=\"search()\"></button-search>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data?.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowSizeChanger]=\"true\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'Code' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'Code'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Code\r\n          </th>\r\n          <th>Value</th>\r\n          <th>Description</th>\r\n          <th nzWidth=\"75px\">Active</th>\r\n          <th nzWidth=\"75px\">Action</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input size=\"small\" [(_ngModel)]=\"filter.Code\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input size=\"small\" [(_ngModel)]=\"filter.Value\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input size=\"small\" [(_ngModel)]=\"filter.Description\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th class=\"center\">\r\n            <extend-checkbox [(_ngModel)]=\"filter.IsActive\"></extend-checkbox>\r\n          </th>\r\n          <th class=\"center\">\r\n            <nz-icon\r\n              nzType=\"plus\"\r\n              nzTheme=\"outline\"\r\n              class=\"color-primary cursor-pointer icon-size-16\"\r\n              (click)=\"$event.stopPropagation(); add()\"\r\n            ></nz-icon>\r\n          </th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of data?.LstItem; track $index; let i = $index) {\r\n          @if (selectedRow != row) {\r\n            <tr (click)=\"selectedRow = row\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>{{ row.Code }}</td>\r\n              <td>{{ row.Value }}</td>\r\n              <td>{{ row.Description }}</td>\r\n              <td class=\"text-center\">\r\n                @if (row.IsActive) {\r\n                  <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n                }\r\n              </td>\r\n              <td class=\"text-center\">\r\n                <a\r\n                  nz-popconfirm\r\n                  nzOkDanger\r\n                  nzPopconfirmPlacement=\"top\"\r\n                  [nzPopconfirmTitle]=\"TranslateKey.CONFIRM_DELETE | translate\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  (nzOnConfirm)=\"delete(row)\"\r\n                >\r\n                  <i nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn cursor-pointer icon-size-16\"></i>\r\n                </a>\r\n              </td>\r\n            </tr>\r\n          } @else {\r\n            <tr (keyup.enter)=\"save()\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>\r\n                <extend-input [required]=\"true\" [(_ngModel)]=\"selectedRow.Code\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.Value\"></extend-input>\r\n              </td>\r\n              <td class=\"form-item-no-bottom\">\r\n                <extend-textarea [minRows]=\"1\" [(_ngModel)]=\"selectedRow.Description\"></extend-textarea>\r\n              </td>\r\n              <td class=\"text-center\">\r\n                <extend-checkbox [(_ngModel)]=\"selectedRow.IsActive\"></extend-checkbox>\r\n              </td>\r\n              <td class=\"text-center\">\r\n                <nz-icon\r\n                  nzType=\"save\"\r\n                  nzTheme=\"outline\"\r\n                  class=\"color-primary cursor-pointer icon-size-16\"\r\n                  (click)=\"$event.stopPropagation(); save()\"\r\n                ></nz-icon>\r\n              </td>\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-row nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data?.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "component", type: ButtonSearch, selector: "button-search" }, { 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: NzTableModule }, { kind: "component", type: i6$2.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: "component", type: i6$2.NzThAddOnComponent, selector: "th[nzColumnKey], th[nzSortFn], th[nzSortOrder], th[nzFilters], th[nzShowSort], th[nzShowFilter], th[nzCustomFilter]", inputs: ["nzColumnKey", "nzFilterMultiple", "nzSortOrder", "nzSortPriority", "nzSortDirections", "nzFilters", "nzSortFn", "nzFilterFn", "nzShowSort", "nzShowFilter", "nzCustomFilter"], outputs: ["nzCheckedChange", "nzSortOrderChange", "nzFilterChange"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.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: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { 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: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { 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: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { 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: NzPaginationModule }, { kind: "component", type: i5$3.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.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: SettingListComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <div nz-flex nzGap=\"small\">\r\n        <button-search (click)=\"search()\"></button-search>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data?.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"false\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th\r\n            nzWidth=\"300px\"\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'Code' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'Code'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Code\r\n          </th>\r\n          <th nzWidth=\"450px\">Value</th>\r\n          <th>Description</th>\r\n          <th nzWidth=\"75px\">Active</th>\r\n          <th nzWidth=\"75px\">Action</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input size=\"small\" [(_ngModel)]=\"filter.Code\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input size=\"small\" [(_ngModel)]=\"filter.Value\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input size=\"small\" [(_ngModel)]=\"filter.Description\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th class=\"center\">\r\n            <extend-checkbox [(_ngModel)]=\"filter.IsActive\"></extend-checkbox>\r\n          </th>\r\n          <th class=\"center\">\r\n            <nz-icon\r\n              nzType=\"plus\"\r\n              nzTheme=\"outline\"\r\n              class=\"color-primary cursor-pointer icon-size-16\"\r\n              (click)=\"$event.stopPropagation(); add()\"\r\n            ></nz-icon>\r\n          </th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of data?.LstItem; track $index; let i = $index) {\r\n          @if (selectedRow != row) {\r\n            <tr (click)=\"selectedRow = row\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td class=\"break-word\">{{ row.Code }}</td>\r\n              <td class=\"break-word\">{{ row.Value }}</td>\r\n              <td class=\"break-word\">{{ row.Description }}</td>\r\n              <td class=\"text-center\">\r\n                @if (row.IsActive) {\r\n                  <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n                }\r\n              </td>\r\n              <td class=\"text-center\">\r\n                <a\r\n                  nz-popconfirm\r\n                  nzOkDanger\r\n                  nzPopconfirmPlacement=\"top\"\r\n                  [nzPopconfirmTitle]=\"TranslateKey.CONFIRM_DELETE | translate\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  (nzOnConfirm)=\"delete(row)\"\r\n                >\r\n                  <i nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn cursor-pointer icon-size-16\"></i>\r\n                </a>\r\n              </td>\r\n            </tr>\r\n          } @else {\r\n            <tr class=\"form-item-no-bottom\" (keyup.enter)=\"save()\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>\r\n                <extend-input [required]=\"true\" [(_ngModel)]=\"selectedRow.Code\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-textarea [minRows]=\"1\" [(_ngModel)]=\"selectedRow.Value\"></extend-textarea>\r\n              </td>\r\n              <td>\r\n                <extend-textarea [minRows]=\"1\" [(_ngModel)]=\"selectedRow.Description\"></extend-textarea>\r\n              </td>\r\n              <td class=\"text-center\">\r\n                <extend-checkbox [(_ngModel)]=\"selectedRow.IsActive\"></extend-checkbox>\r\n              </td>\r\n              <td class=\"text-center\">\r\n                <nz-icon\r\n                  nzType=\"save\"\r\n                  nzTheme=\"outline\"\r\n                  class=\"color-primary cursor-pointer icon-size-16\"\r\n                  (click)=\"$event.stopPropagation(); save()\"\r\n                ></nz-icon>\r\n              </td>\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-row nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data?.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "component", type: ButtonSearch, selector: "button-search" }, { 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: NzTableModule }, { kind: "component", type: i6$2.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: "component", type: i6$2.NzThAddOnComponent, selector: "th[nzColumnKey], th[nzSortFn], th[nzSortOrder], th[nzFilters], th[nzShowSort], th[nzShowFilter], th[nzCustomFilter]", inputs: ["nzColumnKey", "nzFilterMultiple", "nzSortOrder", "nzSortPriority", "nzSortDirections", "nzFilters", "nzSortFn", "nzFilterFn", "nzShowSort", "nzShowFilter", "nzCustomFilter"], outputs: ["nzCheckedChange", "nzSortOrderChange", "nzFilterChange"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.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: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { 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: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { 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: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { 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: NzPaginationModule }, { kind: "component", type: i5$3.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.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: SettingListComponent, decorators: [{
             type: Component,
@@ -7599,10 +7599,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         NzPaginationModule,
                         NzGridModule,
                         NzFlexModule,
-                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <div nz-flex nzGap=\"small\">\r\n        <button-search (click)=\"search()\"></button-search>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data?.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowSizeChanger]=\"true\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'Code' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'Code'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Code\r\n          </th>\r\n          <th>Value</th>\r\n          <th>Description</th>\r\n          <th nzWidth=\"75px\">Active</th>\r\n          <th nzWidth=\"75px\">Action</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input size=\"small\" [(_ngModel)]=\"filter.Code\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input size=\"small\" [(_ngModel)]=\"filter.Value\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input size=\"small\" [(_ngModel)]=\"filter.Description\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th class=\"center\">\r\n            <extend-checkbox [(_ngModel)]=\"filter.IsActive\"></extend-checkbox>\r\n          </th>\r\n          <th class=\"center\">\r\n            <nz-icon\r\n              nzType=\"plus\"\r\n              nzTheme=\"outline\"\r\n              class=\"color-primary cursor-pointer icon-size-16\"\r\n              (click)=\"$event.stopPropagation(); add()\"\r\n            ></nz-icon>\r\n          </th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of data?.LstItem; track $index; let i = $index) {\r\n          @if (selectedRow != row) {\r\n            <tr (click)=\"selectedRow = row\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>{{ row.Code }}</td>\r\n              <td>{{ row.Value }}</td>\r\n              <td>{{ row.Description }}</td>\r\n              <td class=\"text-center\">\r\n                @if (row.IsActive) {\r\n                  <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n                }\r\n              </td>\r\n              <td class=\"text-center\">\r\n                <a\r\n                  nz-popconfirm\r\n                  nzOkDanger\r\n                  nzPopconfirmPlacement=\"top\"\r\n                  [nzPopconfirmTitle]=\"TranslateKey.CONFIRM_DELETE | translate\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  (nzOnConfirm)=\"delete(row)\"\r\n                >\r\n                  <i nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn cursor-pointer icon-size-16\"></i>\r\n                </a>\r\n              </td>\r\n            </tr>\r\n          } @else {\r\n            <tr (keyup.enter)=\"save()\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>\r\n                <extend-input [required]=\"true\" [(_ngModel)]=\"selectedRow.Code\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.Value\"></extend-input>\r\n              </td>\r\n              <td class=\"form-item-no-bottom\">\r\n                <extend-textarea [minRows]=\"1\" [(_ngModel)]=\"selectedRow.Description\"></extend-textarea>\r\n              </td>\r\n              <td class=\"text-center\">\r\n                <extend-checkbox [(_ngModel)]=\"selectedRow.IsActive\"></extend-checkbox>\r\n              </td>\r\n              <td class=\"text-center\">\r\n                <nz-icon\r\n                  nzType=\"save\"\r\n                  nzTheme=\"outline\"\r\n                  class=\"color-primary cursor-pointer icon-size-16\"\r\n                  (click)=\"$event.stopPropagation(); save()\"\r\n                ></nz-icon>\r\n              </td>\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-row nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data?.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <div nz-flex nzGap=\"small\">\r\n        <button-search (click)=\"search()\"></button-search>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data?.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"false\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th\r\n            nzWidth=\"300px\"\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'Code' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'Code'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Code\r\n          </th>\r\n          <th nzWidth=\"450px\">Value</th>\r\n          <th>Description</th>\r\n          <th nzWidth=\"75px\">Active</th>\r\n          <th nzWidth=\"75px\">Action</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input size=\"small\" [(_ngModel)]=\"filter.Code\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input size=\"small\" [(_ngModel)]=\"filter.Value\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input size=\"small\" [(_ngModel)]=\"filter.Description\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th class=\"center\">\r\n            <extend-checkbox [(_ngModel)]=\"filter.IsActive\"></extend-checkbox>\r\n          </th>\r\n          <th class=\"center\">\r\n            <nz-icon\r\n              nzType=\"plus\"\r\n              nzTheme=\"outline\"\r\n              class=\"color-primary cursor-pointer icon-size-16\"\r\n              (click)=\"$event.stopPropagation(); add()\"\r\n            ></nz-icon>\r\n          </th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of data?.LstItem; track $index; let i = $index) {\r\n          @if (selectedRow != row) {\r\n            <tr (click)=\"selectedRow = row\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td class=\"break-word\">{{ row.Code }}</td>\r\n              <td class=\"break-word\">{{ row.Value }}</td>\r\n              <td class=\"break-word\">{{ row.Description }}</td>\r\n              <td class=\"text-center\">\r\n                @if (row.IsActive) {\r\n                  <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n                }\r\n              </td>\r\n              <td class=\"text-center\">\r\n                <a\r\n                  nz-popconfirm\r\n                  nzOkDanger\r\n                  nzPopconfirmPlacement=\"top\"\r\n                  [nzPopconfirmTitle]=\"TranslateKey.CONFIRM_DELETE | translate\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  (nzOnConfirm)=\"delete(row)\"\r\n                >\r\n                  <i nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn cursor-pointer icon-size-16\"></i>\r\n                </a>\r\n              </td>\r\n            </tr>\r\n          } @else {\r\n            <tr class=\"form-item-no-bottom\" (keyup.enter)=\"save()\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>\r\n                <extend-input [required]=\"true\" [(_ngModel)]=\"selectedRow.Code\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-textarea [minRows]=\"1\" [(_ngModel)]=\"selectedRow.Value\"></extend-textarea>\r\n              </td>\r\n              <td>\r\n                <extend-textarea [minRows]=\"1\" [(_ngModel)]=\"selectedRow.Description\"></extend-textarea>\r\n              </td>\r\n              <td class=\"text-center\">\r\n                <extend-checkbox [(_ngModel)]=\"selectedRow.IsActive\"></extend-checkbox>\r\n              </td>\r\n              <td class=\"text-center\">\r\n                <nz-icon\r\n                  nzType=\"save\"\r\n                  nzTheme=\"outline\"\r\n                  class=\"color-primary cursor-pointer icon-size-16\"\r\n                  (click)=\"$event.stopPropagation(); save()\"\r\n                ></nz-icon>\r\n              </td>\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-row nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data?.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }] });
 
-const URLs$7 = {
+const URLs$8 = {
     getById: '/api/file/GetById',
     getAll: '/api/file/GetAll',
     getList: '/api/file/GetList',
@@ -7616,23 +7616,23 @@ class FileService extends HTTPService {
     commonService = inject(CommonService);
     getById(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$7.getById, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$8.getById, params);
     }
     getAll() {
-        return this.post(AppGlobals.apiEndpoint + URLs$7.getAll);
+        return this.post(AppGlobals.apiEndpoint + URLs$8.getAll);
     }
     getList(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$7.getList, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$8.getList, filter);
     }
     getPaging(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$7.getPaging, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$8.getPaging, filter);
     }
     addOrEdit(obj) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$7.addOrEdit, obj);
+        return this.postData(AppGlobals.apiEndpoint + URLs$8.addOrEdit, obj);
     }
     delete(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$7.delete, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$8.delete, params);
     }
     downloadFile(id) {
         const params = new HttpParams().append('id', id);
@@ -7677,7 +7677,7 @@ class FileService extends HTTPService {
         });
     }
     addFileWithRef(obj) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$7.addFileWithRef, obj);
+        return this.postData(AppGlobals.apiEndpoint + URLs$8.addFileWithRef, obj);
     }
     getAnhWithRef(Ref_Table, Ref_Id) {
         return this.commonService.ESP({
@@ -7686,7 +7686,7 @@ class FileService extends HTTPService {
         });
     }
     moveFileToDisk(obj) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$7.moveFileToDisk, obj);
+        return this.postData(AppGlobals.apiEndpoint + URLs$8.moveFileToDisk, obj);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: FileService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: FileService, providedIn: 'root' });
@@ -7956,7 +7956,7 @@ class UserListComponent extends BaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: UserListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: UserListComponent, isStandalone: true, selector: "app-user-list", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-add (click)=\"edit(null)\"></button-add>\r\n      <button-search (click)=\"search()\"></button-search>\r\n      <button nz-button nz-dropdown [nzDropdownMenu]=\"menuAction\" nzTrigger=\"click\">\r\n        <nz-icon nzType=\"more\" nzTheme=\"outline\" />\r\n        <!-- {{ TranslateKey.ACTION | translate }} -->\r\n      </button>\r\n      <nz-dropdown-menu #menuAction=\"nzDropdownMenu\">\r\n        <ul nz-menu>\r\n          <li nz-menu-item (click)=\"import()\">Import</li>\r\n        </ul>\r\n      </nz-dropdown-menu>\r\n    </div>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th\r\n            nzWidth=\"200px\"\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'UserName' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'UserName'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            T\u00EAn \u0111\u0103ng nh\u1EADp\r\n          </th>\r\n          <th\r\n            nzWidth=\"250px\"\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'FullName' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'FullName'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            T\u00EAn ng\u01B0\u1EDDi d\u00F9ng\r\n          </th>\r\n          <th>\u0110\u01A1n v\u1ECB</th>\r\n          <th\r\n            nzWidth=\"90px\"\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'IsActive' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'IsActive'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Hi\u1EC7u l\u1EF1c\r\n          </th>\r\n          <th nzWidth=\"100px\">\u0110ang online</th>\r\n          <th nzWidth=\"75px\">Thao t\u00E1c</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th><extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.UserName\"></extend-input></th>\r\n          <th><extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.FullName\"></extend-input></th>\r\n          <th><extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.OrgName\"></extend-input></th>\r\n          <th></th>\r\n          <th class=\"center\"><extend-checkbox [(_ngModel)]=\"showOnlineOnly\"></extend-checkbox></th>\r\n          <th></th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of getLstUser(); track $index; let i = $index) {\r\n          <tr>\r\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n            <td class=\"link-detail\" (click)=\"edit(row)\">{{ row.UserName }}</td>\r\n            <td>{{ row.FullName }}</td>\r\n            <td>\r\n              {{ row.OrgName }}\r\n              <div *ngIf=\"row.LstOrgName\" [innerHtml]=\"row.LstOrgName\"></div>\r\n            </td>\r\n            <td class=\"center\">\r\n              @if (row.IsActive) {\r\n                <icon-check></icon-check>\r\n              }\r\n            </td>\r\n            <td class=\"text-center\">\r\n              @if (SignalRService.connection?.state == HubConnectionState.Connected && row.LoginStatus) {\r\n                <icon-check></icon-check>\r\n              }\r\n            </td>\r\n            <td class=\"center\">\r\n              <icon-edit (click)=\"edit(row)\"></icon-edit>\r\n              <box [width]=\"4\"></box><icon-delete (click)=\"delete(row)\"></icon-delete>\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col [nzSpan]=\"24\">\r\n    <div nz-flex nzJustify=\"end\" nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", 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: "component", type: ButtonAdd, selector: "button-add" }, { kind: "component", type: ButtonSearch, selector: "button-search" }, { kind: "component", type: IconCheck, selector: "icon-check", inputs: ["size"], outputs: ["click"] }, { 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: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzPopconfirmModule }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "directive", type: i4$1.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$1.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "directive", type: i5$4.NzDropDownDirective, selector: "[nz-dropdown]", inputs: ["nzDropdownMenu", "nzTrigger", "nzMatchWidthElement", "nzBackdrop", "nzClickHide", "nzDisabled", "nzVisible", "nzOverlayClassName", "nzOverlayStyle", "nzPlacement"], outputs: ["nzVisibleChange"], exportAs: ["nzDropdown"] }, { kind: "component", type: i5$4.NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }, { kind: "directive", type: i5$4.NzDropdownButtonDirective, selector: "[nz-button][nz-dropdown]" }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$2.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: "component", type: i6$2.NzThAddOnComponent, selector: "th[nzColumnKey], th[nzSortFn], th[nzSortOrder], th[nzFilters], th[nzShowSort], th[nzShowFilter], th[nzCustomFilter]", inputs: ["nzColumnKey", "nzFilterMultiple", "nzSortOrder", "nzSortPriority", "nzSortDirections", "nzFilters", "nzSortFn", "nzFilterFn", "nzShowSort", "nzShowFilter", "nzCustomFilter"], outputs: ["nzCheckedChange", "nzSortOrderChange", "nzFilterChange"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { 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: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconEdit, selector: "icon-edit", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i5$3.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { 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$3.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.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: UserListComponent, isStandalone: true, selector: "app-user-list", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-add (click)=\"edit(null)\"></button-add>\r\n      <button-search (click)=\"search()\"></button-search>\r\n      <button nz-button nz-dropdown [nzDropdownMenu]=\"menuAction\" nzTrigger=\"click\">\r\n        <nz-icon nzType=\"more\" nzTheme=\"outline\" />\r\n        <!-- {{ TranslateKey.ACTION | translate }} -->\r\n      </button>\r\n      <nz-dropdown-menu #menuAction=\"nzDropdownMenu\">\r\n        <ul nz-menu>\r\n          <li nz-menu-item (click)=\"import()\">Import</li>\r\n        </ul>\r\n      </nz-dropdown-menu>\r\n    </div>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"false\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th\r\n            nzWidth=\"200px\"\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'UserName' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'UserName'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            T\u00EAn \u0111\u0103ng nh\u1EADp\r\n          </th>\r\n          <th\r\n            nzWidth=\"250px\"\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'FullName' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'FullName'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            T\u00EAn ng\u01B0\u1EDDi d\u00F9ng\r\n          </th>\r\n          <th>\u0110\u01A1n v\u1ECB</th>\r\n          <th\r\n            nzWidth=\"90px\"\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'IsActive' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'IsActive'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Hi\u1EC7u l\u1EF1c\r\n          </th>\r\n          <th nzWidth=\"100px\">\u0110ang online</th>\r\n          <th nzWidth=\"75px\">Thao t\u00E1c</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.UserName\"\r\n              (onclickClearIcon)=\"getData()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.FullName\"\r\n              (onclickClearIcon)=\"getData()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.OrgName\"\r\n              (onclickClearIcon)=\"getData()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th class=\"center\"><extend-checkbox [(_ngModel)]=\"showOnlineOnly\"></extend-checkbox></th>\r\n          <th></th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of getLstUser(); track $index; let i = $index) {\r\n          <tr>\r\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n            <td class=\"link-detail\" (click)=\"edit(row)\">{{ row.UserName }}</td>\r\n            <td>{{ row.FullName }}</td>\r\n            <td>\r\n              {{ row.OrgName }}\r\n              <div *ngIf=\"row.LstOrgName\" [innerHtml]=\"row.LstOrgName\"></div>\r\n            </td>\r\n            <td class=\"center\">\r\n              @if (row.IsActive) {\r\n                <icon-check></icon-check>\r\n              }\r\n            </td>\r\n            <td class=\"text-center\">\r\n              @if (SignalRService.connection?.state == HubConnectionState.Connected && row.LoginStatus) {\r\n                <icon-check></icon-check>\r\n              }\r\n            </td>\r\n            <td class=\"center\">\r\n              <icon-edit (click)=\"edit(row)\"></icon-edit>\r\n              <box [width]=\"4\"></box><icon-delete (click)=\"delete(row)\"></icon-delete>\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col [nzSpan]=\"24\">\r\n    <div nz-flex nzJustify=\"end\" nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", 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: "component", type: ButtonAdd, selector: "button-add" }, { kind: "component", type: ButtonSearch, selector: "button-search" }, { kind: "component", type: IconCheck, selector: "icon-check", inputs: ["size"], outputs: ["click"] }, { 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: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzPopconfirmModule }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "directive", type: i4$1.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$1.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "directive", type: i5$4.NzDropDownDirective, selector: "[nz-dropdown]", inputs: ["nzDropdownMenu", "nzTrigger", "nzMatchWidthElement", "nzBackdrop", "nzClickHide", "nzDisabled", "nzVisible", "nzOverlayClassName", "nzOverlayStyle", "nzPlacement"], outputs: ["nzVisibleChange"], exportAs: ["nzDropdown"] }, { kind: "component", type: i5$4.NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }, { kind: "directive", type: i5$4.NzDropdownButtonDirective, selector: "[nz-button][nz-dropdown]" }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$2.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: "component", type: i6$2.NzThAddOnComponent, selector: "th[nzColumnKey], th[nzSortFn], th[nzSortOrder], th[nzFilters], th[nzShowSort], th[nzShowFilter], th[nzCustomFilter]", inputs: ["nzColumnKey", "nzFilterMultiple", "nzSortOrder", "nzSortPriority", "nzSortDirections", "nzFilters", "nzSortFn", "nzFilterFn", "nzShowSort", "nzShowFilter", "nzCustomFilter"], outputs: ["nzCheckedChange", "nzSortOrderChange", "nzFilterChange"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { 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: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconEdit, selector: "icon-edit", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i5$3.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { 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$3.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.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: UserListComponent, decorators: [{
             type: Component,
@@ -7982,7 +7982,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         NzGridModule,
                         NzFlexModule,
                         NzButtonModule,
-                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-add (click)=\"edit(null)\"></button-add>\r\n      <button-search (click)=\"search()\"></button-search>\r\n      <button nz-button nz-dropdown [nzDropdownMenu]=\"menuAction\" nzTrigger=\"click\">\r\n        <nz-icon nzType=\"more\" nzTheme=\"outline\" />\r\n        <!-- {{ TranslateKey.ACTION | translate }} -->\r\n      </button>\r\n      <nz-dropdown-menu #menuAction=\"nzDropdownMenu\">\r\n        <ul nz-menu>\r\n          <li nz-menu-item (click)=\"import()\">Import</li>\r\n        </ul>\r\n      </nz-dropdown-menu>\r\n    </div>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th\r\n            nzWidth=\"200px\"\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'UserName' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'UserName'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            T\u00EAn \u0111\u0103ng nh\u1EADp\r\n          </th>\r\n          <th\r\n            nzWidth=\"250px\"\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'FullName' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'FullName'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            T\u00EAn ng\u01B0\u1EDDi d\u00F9ng\r\n          </th>\r\n          <th>\u0110\u01A1n v\u1ECB</th>\r\n          <th\r\n            nzWidth=\"90px\"\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'IsActive' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'IsActive'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Hi\u1EC7u l\u1EF1c\r\n          </th>\r\n          <th nzWidth=\"100px\">\u0110ang online</th>\r\n          <th nzWidth=\"75px\">Thao t\u00E1c</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th><extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.UserName\"></extend-input></th>\r\n          <th><extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.FullName\"></extend-input></th>\r\n          <th><extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.OrgName\"></extend-input></th>\r\n          <th></th>\r\n          <th class=\"center\"><extend-checkbox [(_ngModel)]=\"showOnlineOnly\"></extend-checkbox></th>\r\n          <th></th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of getLstUser(); track $index; let i = $index) {\r\n          <tr>\r\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n            <td class=\"link-detail\" (click)=\"edit(row)\">{{ row.UserName }}</td>\r\n            <td>{{ row.FullName }}</td>\r\n            <td>\r\n              {{ row.OrgName }}\r\n              <div *ngIf=\"row.LstOrgName\" [innerHtml]=\"row.LstOrgName\"></div>\r\n            </td>\r\n            <td class=\"center\">\r\n              @if (row.IsActive) {\r\n                <icon-check></icon-check>\r\n              }\r\n            </td>\r\n            <td class=\"text-center\">\r\n              @if (SignalRService.connection?.state == HubConnectionState.Connected && row.LoginStatus) {\r\n                <icon-check></icon-check>\r\n              }\r\n            </td>\r\n            <td class=\"center\">\r\n              <icon-edit (click)=\"edit(row)\"></icon-edit>\r\n              <box [width]=\"4\"></box><icon-delete (click)=\"delete(row)\"></icon-delete>\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col [nzSpan]=\"24\">\r\n    <div nz-flex nzJustify=\"end\" nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-add (click)=\"edit(null)\"></button-add>\r\n      <button-search (click)=\"search()\"></button-search>\r\n      <button nz-button nz-dropdown [nzDropdownMenu]=\"menuAction\" nzTrigger=\"click\">\r\n        <nz-icon nzType=\"more\" nzTheme=\"outline\" />\r\n        <!-- {{ TranslateKey.ACTION | translate }} -->\r\n      </button>\r\n      <nz-dropdown-menu #menuAction=\"nzDropdownMenu\">\r\n        <ul nz-menu>\r\n          <li nz-menu-item (click)=\"import()\">Import</li>\r\n        </ul>\r\n      </nz-dropdown-menu>\r\n    </div>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"false\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th\r\n            nzWidth=\"200px\"\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'UserName' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'UserName'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            T\u00EAn \u0111\u0103ng nh\u1EADp\r\n          </th>\r\n          <th\r\n            nzWidth=\"250px\"\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'FullName' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'FullName'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            T\u00EAn ng\u01B0\u1EDDi d\u00F9ng\r\n          </th>\r\n          <th>\u0110\u01A1n v\u1ECB</th>\r\n          <th\r\n            nzWidth=\"90px\"\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'IsActive' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'IsActive'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Hi\u1EC7u l\u1EF1c\r\n          </th>\r\n          <th nzWidth=\"100px\">\u0110ang online</th>\r\n          <th nzWidth=\"75px\">Thao t\u00E1c</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.UserName\"\r\n              (onclickClearIcon)=\"getData()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.FullName\"\r\n              (onclickClearIcon)=\"getData()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.OrgName\"\r\n              (onclickClearIcon)=\"getData()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th class=\"center\"><extend-checkbox [(_ngModel)]=\"showOnlineOnly\"></extend-checkbox></th>\r\n          <th></th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of getLstUser(); track $index; let i = $index) {\r\n          <tr>\r\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n            <td class=\"link-detail\" (click)=\"edit(row)\">{{ row.UserName }}</td>\r\n            <td>{{ row.FullName }}</td>\r\n            <td>\r\n              {{ row.OrgName }}\r\n              <div *ngIf=\"row.LstOrgName\" [innerHtml]=\"row.LstOrgName\"></div>\r\n            </td>\r\n            <td class=\"center\">\r\n              @if (row.IsActive) {\r\n                <icon-check></icon-check>\r\n              }\r\n            </td>\r\n            <td class=\"text-center\">\r\n              @if (SignalRService.connection?.state == HubConnectionState.Connected && row.LoginStatus) {\r\n                <icon-check></icon-check>\r\n              }\r\n            </td>\r\n            <td class=\"center\">\r\n              <icon-edit (click)=\"edit(row)\"></icon-edit>\r\n              <box [width]=\"4\"></box><icon-delete (click)=\"delete(row)\"></icon-delete>\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col [nzSpan]=\"24\">\r\n    <div nz-flex nzJustify=\"end\" nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }] });
 
 class ResetPassComponent extends BaseComponent {
@@ -8046,7 +8046,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                     ], template: "<form nz-form [formGroup]=\"formData\">\r\n  <div nz-row>\r\n    <div nz-col nzSpan=\"24\">\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"UserName\" nzLabelAlign=\"left\" nzNoColon=\"true\">\r\n          T\u00EAn \u0111\u0103ng nh\u1EADp\r\n        </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\">\r\n          <input nz-input formControlName=\"UserName\" autocomplete=\"off\" nzDisabled />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Password\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n          M\u1EADt kh\u1EA9u\r\n        </nz-form-label>\r\n        <nz-form-control nzErrorTip=\"{{ 'REQUIRED' | translate }}\">\r\n          <nz-input-group [nzSuffix]=\"visiblePass ? suffixTemplateHiddenPassword : suffixTemplateShowPassword\">\r\n            <input type=\"{{ passwordType }}\" nz-input formControlName=\"Password\" autocomplete=\"new-password\" />\r\n          </nz-input-group>\r\n        </nz-form-control>\r\n        <ng-template #suffixTemplateShowPassword>\r\n          <nz-icon\r\n            nzType=\"eye\"\r\n            nzTheme=\"outline\"\r\n            nz-tooltip\r\n            nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n            nzTooltipPlacement=\"right\"\r\n            (click)=\"visiblePass = !visiblePass; passwordType = 'text'\"\r\n          />\r\n        </ng-template>\r\n        <ng-template #suffixTemplateHiddenPassword>\r\n          <nz-icon\r\n            nzType=\"eye-invisible\"\r\n            nzTheme=\"outline\"\r\n            nz-tooltip\r\n            nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n            nzTooltipPlacement=\"right\"\r\n            (click)=\"visiblePass = !visiblePass; passwordType = 'password'\"\r\n          />\r\n        </ng-template>\r\n      </nz-form-item>\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"RetypePassword\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n          Nh\u1EADp l\u1EA1i M\u1EADt kh\u1EA9u\r\n        </nz-form-label>\r\n        <nz-form-control nzErrorTip=\"M\u1EADt kh\u1EA9u kh\u00F4ng kh\u1EDBp\">\r\n          <nz-input-group [nzSuffix]=\"visibleRePass ? suffixTemplateHiddenRePassword : suffixTemplateShowRePassword\">\r\n            <input type=\"{{ rePasswordType }}\" nz-input formControlName=\"RetypePassword\" autocomplete=\"new-password\" />\r\n          </nz-input-group>\r\n        </nz-form-control>\r\n        <ng-template #suffixTemplateShowRePassword>\r\n          <nz-icon\r\n            nzType=\"eye\"\r\n            nzTheme=\"outline\"\r\n            nz-tooltip\r\n            nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n            nzTooltipPlacement=\"right\"\r\n            (click)=\"visibleRePass = !visibleRePass; rePasswordType = 'text'\"\r\n          />\r\n        </ng-template>\r\n        <ng-template #suffixTemplateHiddenRePassword>\r\n          <nz-icon\r\n            nzType=\"eye-invisible\"\r\n            nzTheme=\"outline\"\r\n            nz-tooltip\r\n            nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n            nzTooltipPlacement=\"right\"\r\n            (click)=\"visibleRePass = !visibleRePass; rePasswordType = 'password'\"\r\n          />\r\n        </ng-template>\r\n      </nz-form-item>\r\n    </div>\r\n    <div nz-col nzSpan=\"24\">\r\n      <div nz-flex nzJustify=\"end\" nzGap=\"small\">\r\n        <button nz-button nzType=\"default\" (click)=\"close()\">{{ TranslateKey.CLOSE | translate }}</button>\r\n        <button nz-button nzType=\"primary\" (click)=\"submit()\" nzDanger>{{ TranslateKey.OK | translate }}</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</form>\r\n" }]
         }] });
 
-const URLs$6 = {
+const URLs$7 = {
     getById: '/api/App_Setting/GetById',
     getAll: '/api/App_Setting/GetAll',
     getList: '/api/App_Setting/GetList',
@@ -8068,10 +8068,10 @@ class SettingService extends HTTPService {
         });
     }
     getAll() {
-        return this.post(AppGlobals.apiEndpoint + URLs$6.getAll);
+        return this.post(AppGlobals.apiEndpoint + URLs$7.getAll);
     }
     getList(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$6.getList, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$7.getList, filter);
     }
     getPaging(filter) {
         return this.cms.ESP({
@@ -8087,27 +8087,27 @@ class SettingService extends HTTPService {
     }
     delete(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$6.delete, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$7.delete, params);
     }
     getByCodeAnonymous(code) {
         const params = new HttpParams().append('Code', code);
-        return this.getParams(AppGlobals.apiEndpoint + URLs$6.getByCodeAnonymous, params);
+        return this.getParams(AppGlobals.apiEndpoint + URLs$7.getByCodeAnonymous, params);
     }
     // getGroupByCodeAnonymous(code: string) {
     //   const params = new HttpParams().append('Code', code);
     //   return this.getParams(AppGlobals.apiEndpoint + URLs.getByCodeAnonymous, params);
     // }
     getAllConfig() {
-        return this.post(AppGlobals.apiEndpoint + URLs$6.GetAllConfig);
+        return this.post(AppGlobals.apiEndpoint + URLs$7.GetAllConfig);
     }
     applyConfig(config) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$6.ApplyConfig, config);
+        return this.postData(AppGlobals.apiEndpoint + URLs$7.ApplyConfig, config);
     }
     getDbInfo() {
-        return this.post(AppGlobals.apiEndpoint + URLs$6.GetDbInfo);
+        return this.post(AppGlobals.apiEndpoint + URLs$7.GetDbInfo);
     }
     loadConfigTheme() {
-        return this.get(AppGlobals.apiEndpoint + URLs$6.ConfigTheme);
+        return this.get(AppGlobals.apiEndpoint + URLs$7.ConfigTheme);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SettingService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SettingService, providedIn: 'root' });
@@ -8119,7 +8119,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 }]
         }] });
 
-const URLs$5 = {
+const URLs$6 = {
     getById: '/api/App_JobTitle/GetById',
     getByIdEx: '/api/App_JobTitle/getByIdEx',
     getAll: '/api/App_JobTitle/GetAll',
@@ -8131,27 +8131,27 @@ const URLs$5 = {
 class JobTitleService extends HTTPService {
     getById(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$5.getById, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$6.getById, params);
     }
     getByIdEx(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$5.getByIdEx, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$6.getByIdEx, params);
     }
     getAll() {
-        return this.post(AppGlobals.apiEndpoint + URLs$5.getAll);
+        return this.post(AppGlobals.apiEndpoint + URLs$6.getAll);
     }
     getList(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$5.getList, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$6.getList, filter);
     }
     getPaging(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$5.getPaging, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$6.getPaging, filter);
     }
     addOrEdit(obj) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$5.addOrEdit, obj);
+        return this.postData(AppGlobals.apiEndpoint + URLs$6.addOrEdit, obj);
     }
     delete(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$5.delete, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$6.delete, params);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: JobTitleService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: JobTitleService, providedIn: 'root' });
@@ -8213,6 +8213,7 @@ class UserDetailComponent extends BaseComponent {
         FullName: this.fb.control(null, [Validators.required]),
         Email: this.fb.control(null, [Validators.email]),
         IsActive: this.fb.control(true),
+        IsAdLogin: this.fb.control(false),
         Password: this.fb.control(null),
         RetypePassword: this.fb.control(null),
     });
@@ -8598,7 +8599,7 @@ class UserDetailComponent extends BaseComponent {
         this.notiService.success('Đã xóa Chức danh khỏi danh sách');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: UserDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: UserDetailComponent, isStandalone: true, selector: "app-user-detail", usesInheritance: true, ngImport: i0, template: "<form nz-form [formGroup]=\"formData\">\r\n  <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n    @if (item?.App_User_Id) {\r\n      <button nz-button nzType=\"primary\" type=\"button\" (click)=\"resetPassword()\">\r\n        {{ TranslateKey.RESET_PASSWORD | translate }}\r\n      </button>\r\n      <button nz-button nzType=\"primary\" type=\"button\" nzDanger (click)=\"delete()\">\r\n        {{ TranslateKey.DELETE | translate }}\r\n      </button>\r\n    }\r\n    <button-save (click)=\"save()\"></button-save>\r\n    <button-back (click)=\"goto('/admin/user')\"></button-back>\r\n  </div>\r\n\r\n  <nz-divider></nz-divider>\r\n\r\n  <div nz-row [nzGutter]=\"[16, 16]\">\r\n    <!-- C\u1ED8T TR\u00C1I: FORM USER -->\r\n    <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"UserName\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n          T\u00EAn \u0111\u0103ng nh\u1EADp\r\n        </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n          <input nz-input formControlName=\"UserName\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"FullName\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n          T\u00EAn ng\u01B0\u1EDDi d\u00F9ng\r\n        </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n          <input nz-input formControlName=\"FullName\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Email\" nzLabelAlign=\"left\" nzNoColon=\"true\"> Email </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'Ch\u01B0a \u0111\u00FAng \u0111\u1ECBnh d\u1EA1ng email'\">\r\n          <input nz-input formControlName=\"Email\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <div *ngIf=\"!item?.App_User_Id\" nz-row [nzGutter]=\"16\">\r\n        <div nz-col [nzSpan]=\"24\">\r\n          <nz-form-item>\r\n            <nz-form-label [nzSpan]=\"8\" nzFor=\"Password\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n              M\u1EADt kh\u1EA9u\r\n            </nz-form-label>\r\n            <nz-form-control nzErrorTip=\"{{ 'REQUIRED' | translate }}\">\r\n              <nz-input-group [nzSuffix]=\"visiblePass ? suffixTemplateHiddenPassword : suffixTemplateShowPassword\">\r\n                <input type=\"{{ passwordType }}\" nz-input formControlName=\"Password\" autocomplete=\"new-password\" />\r\n              </nz-input-group>\r\n            </nz-form-control>\r\n            <ng-template #suffixTemplateShowPassword>\r\n              <nz-icon\r\n                nzType=\"eye\"\r\n                nzTheme=\"outline\"\r\n                nz-tooltip\r\n                nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n                nzTooltipPlacement=\"right\"\r\n                (click)=\"visiblePass = !visiblePass; passwordType = 'text'\"\r\n              />\r\n            </ng-template>\r\n            <ng-template #suffixTemplateHiddenPassword>\r\n              <nz-icon\r\n                nzType=\"eye-invisible\"\r\n                nzTheme=\"outline\"\r\n                nz-tooltip\r\n                nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n                nzTooltipPlacement=\"right\"\r\n                (click)=\"visiblePass = !visiblePass; passwordType = 'password'\"\r\n              />\r\n            </ng-template>\r\n          </nz-form-item>\r\n        </div>\r\n        <div nz-col [nzSpan]=\"24\">\r\n          <nz-form-item>\r\n            <nz-form-label [nzSpan]=\"8\" nzFor=\"RetypePassword\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n              Nh\u1EADp l\u1EA1i M\u1EADt kh\u1EA9u\r\n            </nz-form-label>\r\n            <nz-form-control nzErrorTip=\"M\u1EADt kh\u1EA9u kh\u00F4ng kh\u1EDBp\">\r\n              <nz-input-group\r\n                [nzSuffix]=\"visibleRePass ? suffixTemplateHiddenRePassword : suffixTemplateShowRePassword\"\r\n              >\r\n                <input\r\n                  type=\"{{ rePasswordType }}\"\r\n                  nz-input\r\n                  formControlName=\"RetypePassword\"\r\n                  autocomplete=\"new-password\"\r\n                />\r\n              </nz-input-group>\r\n            </nz-form-control>\r\n            <ng-template #suffixTemplateShowRePassword>\r\n              <nz-icon\r\n                nzType=\"eye\"\r\n                nzTheme=\"outline\"\r\n                nz-tooltip\r\n                nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n                nzTooltipPlacement=\"right\"\r\n                (click)=\"visibleRePass = !visibleRePass; rePasswordType = 'text'\"\r\n              />\r\n            </ng-template>\r\n            <ng-template #suffixTemplateHiddenRePassword>\r\n              <nz-icon\r\n                nzType=\"eye-invisible\"\r\n                nzTheme=\"outline\"\r\n                nz-tooltip\r\n                nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n                nzTooltipPlacement=\"right\"\r\n                (click)=\"visibleRePass = !visibleRePass; rePasswordType = 'password'\"\r\n              />\r\n            </ng-template>\r\n          </nz-form-item>\r\n        </div>\r\n      </div>\r\n\r\n      <div nz-row>\r\n        <div nz-col [nzSpan]=\"8\"></div>\r\n        <div nz-col [nzSpan]=\"16\">\r\n          <label nz-checkbox formControlName=\"IsActive\">Active</label>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- C\u1ED8T PH\u1EA2I: TABS ORG & ROLE -->\r\n    <div nz-col [nzSpan]=\"12\">\r\n      <nz-tabset nzType=\"card\" nzSize=\"small\">\r\n        <!-- TAB ORG -->\r\n        <nz-tab nzTitle=\"\u0110\u01A1n v\u1ECB\">\r\n          <div style=\"padding: 8px\">\r\n            <h3 style=\"margin-bottom: 16px\">Danh s\u00E1ch \u0110\u01A1n v\u1ECB</h3>\r\n\r\n            <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n              <span style=\"font-weight: 500\">\u0110\u01A1n v\u1ECB ({{ lstOrgInUser.length }})</span>\r\n              <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddOrgModal()\">\r\n                <span nz-icon nzType=\"plus\"></span>\r\n                Th\u00EAm \u0110\u01A1n v\u1ECB\r\n              </button>\r\n            </div>\r\n\r\n            <div style=\"max-height: 450px; overflow-y: auto\">\r\n              <nz-table\r\n                #orgTable\r\n                [nzData]=\"lstOrgInUser\"\r\n                [nzSize]=\"'small'\"\r\n                [nzShowPagination]=\"lstOrgInUser.length > 20\"\r\n                [nzPageSize]=\"20\"\r\n                [nzBordered]=\"true\"\r\n              >\r\n                <thead>\r\n                  <tr>\r\n                    <th nzWidth=\"40px\">STT</th>\r\n                    <th>\u0110\u01A1n v\u1ECB</th>\r\n                    <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n                  </tr>\r\n                </thead>\r\n                <tbody>\r\n                  <tr *ngFor=\"let item of orgTable.data; let i = index\">\r\n                    <td>{{ i + 1 }}</td>\r\n                    <td>\r\n                      <div style=\"font-weight: 500\">{{ item.Name }}</div>\r\n                      <div style=\"font-size: 12px; color: #888\">{{ item.Code }}</div>\r\n                    </td>\r\n                    <td nzAlign=\"center\">\r\n                      <button\r\n                        nz-button\r\n                        nzType=\"link\"\r\n                        nzDanger\r\n                        nzSize=\"small\"\r\n                        nz-popconfirm\r\n                        nzPopconfirmTitle=\"X\u00F3a \u0110\u01A1n v\u1ECB n\u00E0y?\"\r\n                        nzAutofocus=\"ok\"\r\n                        (nzOnConfirm)=\"deleteOrgFromUser(item)\"\r\n                      >\r\n                        <span nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\r\n                      </button>\r\n                    </td>\r\n                  </tr>\r\n                </tbody>\r\n              </nz-table>\r\n            </div>\r\n          </div>\r\n        </nz-tab>\r\n\r\n        <!-- TAB ROLE -->\r\n        <nz-tab nzTitle=\"Nh\u00F3m quy\u1EC1n\">\r\n          <div style=\"padding: 8px\">\r\n            <h3 style=\"margin-bottom: 16px\">Danh s\u00E1ch Nh\u00F3m quy\u1EC1n</h3>\r\n\r\n            <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n              <span style=\"font-weight: 500\">Roles ({{ lstRoleInUser.length }})</span>\r\n              <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddRoleModal()\">\r\n                <span nz-icon nzType=\"plus\"></span>\r\n                Th\u00EAm Role\r\n              </button>\r\n            </div>\r\n\r\n            <div style=\"max-height: 450px; overflow-y: auto\">\r\n              <nz-table\r\n                #roleTable\r\n                [nzData]=\"lstRoleInUser\"\r\n                [nzSize]=\"'small'\"\r\n                [nzShowPagination]=\"lstRoleInUser.length > 20\"\r\n                [nzPageSize]=\"20\"\r\n                [nzBordered]=\"true\"\r\n              >\r\n                <thead>\r\n                  <tr>\r\n                    <th nzWidth=\"40px\">STT</th>\r\n                    <th>Role</th>\r\n                    <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n                  </tr>\r\n                </thead>\r\n                <tbody>\r\n                  <tr *ngFor=\"let item of roleTable.data; let i = index\">\r\n                    <td>{{ i + 1 }}</td>\r\n                    <td>\r\n                      <div style=\"font-weight: 500\">{{ item.Name }}</div>\r\n                      <div style=\"font-size: 12px; color: #888\">{{ item.Code }}</div>\r\n                    </td>\r\n                    <td nzAlign=\"center\">\r\n                      <button\r\n                        nz-button\r\n                        nzType=\"link\"\r\n                        nzDanger\r\n                        nzSize=\"small\"\r\n                        nz-popconfirm\r\n                        nzPopconfirmTitle=\"X\u00F3a Role n\u00E0y?\"\r\n                        (nzOnConfirm)=\"deleteRoleFromUser(item)\"\r\n                      >\r\n                        <span nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\r\n                      </button>\r\n                    </td>\r\n                  </tr>\r\n                </tbody>\r\n              </nz-table>\r\n            </div>\r\n          </div>\r\n        </nz-tab>\r\n\r\n        <!-- ch\u1EE9c danh -->\r\n        <nz-tab nzTitle=\"Ch\u1EE9c danh\">\r\n          <div style=\"padding: 8px\">\r\n            <h3 style=\"margin-bottom: 16px\">Danh s\u00E1ch Ch\u1EE9c danh</h3>\r\n\r\n            <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n              <span style=\"font-weight: 500\">Ch\u1EE9c danh ({{ lstJobTitleInUser.length }})</span>\r\n              <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddJobTitleModal()\">\r\n                <span nz-icon nzType=\"plus\"></span>\r\n                Th\u00EAm Ch\u1EE9c danh\r\n              </button>\r\n            </div>\r\n\r\n            <div style=\"max-height: 450px; overflow-y: auto\">\r\n              <nz-table\r\n                #orgJobTilte\r\n                [nzData]=\"lstJobTitleInUser\"\r\n                [nzSize]=\"'small'\"\r\n                [nzShowPagination]=\"lstJobTitleInUser.length > 20\"\r\n                [nzPageSize]=\"20\"\r\n              >\r\n                <thead>\r\n                  <tr>\r\n                    <th nzWidth=\"40px\">STT</th>\r\n                    <th>Ch\u1EE9c danh</th>\r\n                    <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n                  </tr>\r\n                </thead>\r\n                <tbody>\r\n                  <tr *ngFor=\"let item of orgJobTilte.data; let i = index\">\r\n                    <td>{{ i + 1 }}</td>\r\n                    <td>\r\n                      <div style=\"font-weight: 500\">{{ item.Name }}</div>\r\n                      <div style=\"font-size: 12px; color: #888\">{{ item.Code }}</div>\r\n                    </td>\r\n                    <td nzAlign=\"center\">\r\n                      <button\r\n                        nz-button\r\n                        nzType=\"link\"\r\n                        nzDanger\r\n                        nzSize=\"small\"\r\n                        nz-popconfirm\r\n                        nzPopconfirmTitle=\"X\u00F3a ch\u1EE9c danh n\u00E0y?\"\r\n                        nzAutofocus=\"ok\"\r\n                        (nzOnConfirm)=\"deleteJobTitleFromUser(item)\"\r\n                      >\r\n                        <span nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\r\n                      </button>\r\n                    </td>\r\n                  </tr>\r\n                </tbody>\r\n              </nz-table>\r\n            </div>\r\n          </div>\r\n        </nz-tab>\r\n      </nz-tabset>\r\n    </div>\r\n  </div>\r\n</form>\r\n\r\n<!-- Modal ch\u1ECDn Org -->\r\n<nz-modal\r\n  [(nzVisible)]=\"isAddOrgModalVisible\"\r\n  nzTitle=\"Th\u00EAm \u0110\u01A1n v\u1ECB v\u00E0o User\"\r\n  [nzWidth]=\"700\"\r\n  (nzOnCancel)=\"closeAddOrgModal()\"\r\n  (nzOnOk)=\"addOrgsToUser()\"\r\n  nzOkText=\"Th\u00EAm\"\r\n  nzCancelText=\"H\u1EE7y\"\r\n>\r\n  <ng-container *nzModalContent>\r\n    <nz-alert\r\n      *ngIf=\"!isOneUserMultiOrgs\"\r\n      nzType=\"info\"\r\n      nzMessage=\"Ch\u1EC9 \u0111\u01B0\u1EE3c ch\u1ECDn 1 \u0110\u01A1n v\u1ECB\"\r\n      nzShowIcon\r\n      style=\"margin-bottom: 16px\"\r\n    ></nz-alert>\r\n    <!-- Search box -->\r\n    <nz-input-group [nzPrefix]=\"prefixIconSearchOrg\" style=\"margin-bottom: 16px\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        placeholder=\"T\u00ECm ki\u1EBFm \u0110\u01A1n v\u1ECB...\"\r\n        [(ngModel)]=\"searchOrgText\"\r\n        (ngModelChange)=\"filterAvailableOrgs()\"\r\n      />\r\n    </nz-input-group>\r\n    <ng-template #prefixIconSearchOrg>\r\n      <span nz-icon nzType=\"search\"></span>\r\n    </ng-template>\r\n\r\n    <nz-table\r\n      #addOrgTable\r\n      [nzData]=\"lstFilteredOrg\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"true\"\r\n      [nzPageSize]=\"10\"\r\n      [nzLoading]=\"isLoadingAvailableOrgs\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th\r\n            nzWidth=\"60px\"\r\n            [nzShowCheckbox]=\"isOneUserMultiOrgs\"\r\n            [(nzChecked)]=\"isAllOrgChecked\"\r\n            (nzCheckedChange)=\"onAllOrgChecked($event)\"\r\n            [nzIndeterminate]=\"isOrgIndeterminate\"\r\n          ></th>\r\n          <th nzWidth=\"150px\">M\u00E3</th>\r\n          <th>T\u00EAn</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let item of addOrgTable.data\">\r\n          <td nzAlign=\"center\">\r\n            <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onOrgChecked(item, $event)\"></label>\r\n          </td>\r\n          <td>{{ item.Code }}</td>\r\n          <td>{{ item.TreeNodeName || item.Name }}</td>\r\n        </tr>\r\n      </tbody>\r\n    </nz-table>\r\n  </ng-container>\r\n</nz-modal>\r\n\r\n<!-- Modal ch\u1ECDn Role -->\r\n<nz-modal\r\n  [(nzVisible)]=\"isAddRoleModalVisible\"\r\n  nzTitle=\"Th\u00EAm Role v\u00E0o User\"\r\n  [nzWidth]=\"700\"\r\n  (nzOnCancel)=\"closeAddRoleModal()\"\r\n  (nzOnOk)=\"addRolesToUser()\"\r\n  nzOkText=\"Th\u00EAm\"\r\n  nzCancelText=\"H\u1EE7y\"\r\n>\r\n  <ng-container *nzModalContent>\r\n    <!-- Search box -->\r\n    <nz-input-group [nzPrefix]=\"prefixIconSearchRole\" style=\"margin-bottom: 16px\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        placeholder=\"T\u00ECm ki\u1EBFm Role...\"\r\n        [(ngModel)]=\"searchRoleText\"\r\n        (ngModelChange)=\"filterAvailableRoles()\"\r\n      />\r\n    </nz-input-group>\r\n    <ng-template #prefixIconSearchRole>\r\n      <span nz-icon nzType=\"search\"></span>\r\n    </ng-template>\r\n\r\n    <nz-table\r\n      #addRoleTable\r\n      [nzData]=\"lstFilteredRole\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"true\"\r\n      [nzPageSize]=\"10\"\r\n      [nzLoading]=\"isLoadingAvailableRoles\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th\r\n            nzWidth=\"60px\"\r\n            nzShowCheckbox\r\n            [(nzChecked)]=\"isAllRoleChecked\"\r\n            (nzCheckedChange)=\"onAllRoleChecked($event)\"\r\n            [nzIndeterminate]=\"isRoleIndeterminate\"\r\n          ></th>\r\n          <th nzWidth=\"150px\">M\u00E3</th>\r\n          <th>T\u00EAn</th>\r\n          <th>M\u00F4 t\u1EA3</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let item of addRoleTable.data\">\r\n          <td nzAlign=\"center\">\r\n            <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onRoleChecked(item, $event)\"></label>\r\n          </td>\r\n          <td>{{ item.Code }}</td>\r\n          <td>{{ item.Name }}</td>\r\n          <td>{{ item.Description }}</td>\r\n        </tr>\r\n      </tbody>\r\n    </nz-table>\r\n  </ng-container>\r\n</nz-modal>\r\n\r\n<!-- Modal ch\u1ECDn JobTitle -->\r\n<nz-modal\r\n  [(nzVisible)]=\"isAddJobTitleModalVisible\"\r\n  nzTitle=\"Th\u00EAm Ch\u1EE9c danh v\u00E0o User\"\r\n  [nzWidth]=\"700\"\r\n  (nzOnCancel)=\"closeAddJobTitleModal()\"\r\n  (nzOnOk)=\"addJobTitlesToUser()\"\r\n  nzOkText=\"Th\u00EAm\"\r\n  nzCancelText=\"H\u1EE7y\"\r\n>\r\n  <ng-container *nzModalContent>\r\n    <nz-alert\r\n      *ngIf=\"!isOneUserMultiJobTitles\"\r\n      nzType=\"info\"\r\n      nzMessage=\"Ch\u1EC9 \u0111\u01B0\u1EE3c ch\u1ECDn 1 Ch\u1EE9c danh\"\r\n      nzShowIcon\r\n      style=\"margin-bottom: 16px\"\r\n    ></nz-alert>\r\n    <!-- Search box -->\r\n    <nz-input-group [nzPrefix]=\"prefixIconSearchJobTitle\" style=\"margin-bottom: 16px\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        placeholder=\"T\u00ECm ki\u1EBFm Ch\u1EE9c danh...\"\r\n        [(ngModel)]=\"searchJobTitleText\"\r\n        (ngModelChange)=\"filterAvailableJobTitles()\"\r\n      />\r\n    </nz-input-group>\r\n    <ng-template #prefixIconSearchJobTitle>\r\n      <span nz-icon nzType=\"search\"></span>\r\n    </ng-template>\r\n\r\n    <nz-table\r\n      #addJobTitleTable\r\n      [nzData]=\"lstFilteredJobTitle\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"true\"\r\n      [nzPageSize]=\"10\"\r\n      [nzLoading]=\"isLoadingAvailableJobTitles\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th\r\n            nzWidth=\"60px\"\r\n            [nzShowCheckbox]=\"isOneUserMultiJobTitles\"\r\n            [(nzChecked)]=\"isAllJobTitleChecked\"\r\n            (nzCheckedChange)=\"onAllJobTitleChecked($event)\"\r\n            [nzIndeterminate]=\"isJobTitleIndeterminate\"\r\n          ></th>\r\n          <th nzWidth=\"150px\">M\u00E3</th>\r\n          <th>T\u00EAn</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let item of addJobTitleTable.data\">\r\n          <td>\r\n            <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onJobTitleChecked(item, $event)\"></label>\r\n          </td>\r\n          <td>{{ item.Code }}</td>\r\n          <td>{{ item.Name }}</td>\r\n        </tr>\r\n      </tbody>\r\n    </nz-table>\r\n  </ng-container>\r\n</nz-modal>\r\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: NzSelectModule }, { 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$3.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.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i5$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i5$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i5$1.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { 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: 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: NzTableModule }, { kind: "component", type: i6$2.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: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.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: i6$2.NzCellAlignDirective, selector: "th[nzAlign],td[nzAlign]", inputs: ["nzAlign"] }, { kind: "component", type: i6$2.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: 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: i8$1.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: NzTabsModule }, { kind: "component", type: i1$7.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$7.NzTabComponent, selector: "nz-tab", inputs: ["nzTitle", "nzClosable", "nzCloseIcon", "nzDisabled", "nzForceRender"], outputs: ["nzSelect", "nzDeselect", "nzClick", "nzContextmenu"], exportAs: ["nzTab"] }, { kind: "component", type: NzAlertComponent, selector: "nz-alert", inputs: ["nzAction", "nzCloseText", "nzIconType", "nzMessage", "nzDescription", "nzType", "nzCloseable", "nzShowIcon", "nzBanner", "nzNoAnimation", "nzIcon"], outputs: ["nzOnClose"], exportAs: ["nzAlert"] }, { kind: "component", type: ButtonBack, selector: "button-back" }, { kind: "component", type: ButtonSave, selector: "button-save" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: UserDetailComponent, isStandalone: true, selector: "app-user-detail", usesInheritance: true, ngImport: i0, template: "<form nz-form [formGroup]=\"formData\">\r\n  <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n    @if (item?.App_User_Id) {\r\n      <button nz-button nzType=\"primary\" type=\"button\" (click)=\"resetPassword()\">\r\n        {{ TranslateKey.RESET_PASSWORD | translate }}\r\n      </button>\r\n      <button nz-button nzType=\"primary\" type=\"button\" nzDanger (click)=\"delete()\">\r\n        {{ TranslateKey.DELETE | translate }}\r\n      </button>\r\n    }\r\n    <button-save (click)=\"save()\"></button-save>\r\n    <button-back (click)=\"goto('/admin/user')\"></button-back>\r\n  </div>\r\n\r\n  <nz-divider></nz-divider>\r\n\r\n  <div nz-row [nzGutter]=\"[16, 16]\">\r\n    <!-- C\u1ED8T TR\u00C1I: FORM USER -->\r\n    <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"UserName\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n          T\u00EAn \u0111\u0103ng nh\u1EADp\r\n        </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n          <input nz-input formControlName=\"UserName\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"FullName\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n          T\u00EAn ng\u01B0\u1EDDi d\u00F9ng\r\n        </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n          <input nz-input formControlName=\"FullName\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Email\" nzLabelAlign=\"left\" nzNoColon=\"true\"> Email </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'Ch\u01B0a \u0111\u00FAng \u0111\u1ECBnh d\u1EA1ng email'\">\r\n          <input nz-input formControlName=\"Email\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <div *ngIf=\"!item?.App_User_Id\" nz-row [nzGutter]=\"16\">\r\n        <div nz-col [nzSpan]=\"24\">\r\n          <nz-form-item>\r\n            <nz-form-label [nzSpan]=\"8\" nzFor=\"Password\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n              M\u1EADt kh\u1EA9u\r\n            </nz-form-label>\r\n            <nz-form-control nzErrorTip=\"{{ 'REQUIRED' | translate }}\">\r\n              <nz-input-group [nzSuffix]=\"visiblePass ? suffixTemplateHiddenPassword : suffixTemplateShowPassword\">\r\n                <input type=\"{{ passwordType }}\" nz-input formControlName=\"Password\" autocomplete=\"new-password\" />\r\n              </nz-input-group>\r\n            </nz-form-control>\r\n            <ng-template #suffixTemplateShowPassword>\r\n              <nz-icon\r\n                nzType=\"eye\"\r\n                nzTheme=\"outline\"\r\n                nz-tooltip\r\n                nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n                nzTooltipPlacement=\"right\"\r\n                (click)=\"visiblePass = !visiblePass; passwordType = 'text'\"\r\n              />\r\n            </ng-template>\r\n            <ng-template #suffixTemplateHiddenPassword>\r\n              <nz-icon\r\n                nzType=\"eye-invisible\"\r\n                nzTheme=\"outline\"\r\n                nz-tooltip\r\n                nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n                nzTooltipPlacement=\"right\"\r\n                (click)=\"visiblePass = !visiblePass; passwordType = 'password'\"\r\n              />\r\n            </ng-template>\r\n          </nz-form-item>\r\n        </div>\r\n        <div nz-col [nzSpan]=\"24\">\r\n          <nz-form-item>\r\n            <nz-form-label [nzSpan]=\"8\" nzFor=\"RetypePassword\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n              Nh\u1EADp l\u1EA1i M\u1EADt kh\u1EA9u\r\n            </nz-form-label>\r\n            <nz-form-control nzErrorTip=\"M\u1EADt kh\u1EA9u kh\u00F4ng kh\u1EDBp\">\r\n              <nz-input-group\r\n                [nzSuffix]=\"visibleRePass ? suffixTemplateHiddenRePassword : suffixTemplateShowRePassword\"\r\n              >\r\n                <input\r\n                  type=\"{{ rePasswordType }}\"\r\n                  nz-input\r\n                  formControlName=\"RetypePassword\"\r\n                  autocomplete=\"new-password\"\r\n                />\r\n              </nz-input-group>\r\n            </nz-form-control>\r\n            <ng-template #suffixTemplateShowRePassword>\r\n              <nz-icon\r\n                nzType=\"eye\"\r\n                nzTheme=\"outline\"\r\n                nz-tooltip\r\n                nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n                nzTooltipPlacement=\"right\"\r\n                (click)=\"visibleRePass = !visibleRePass; rePasswordType = 'text'\"\r\n              />\r\n            </ng-template>\r\n            <ng-template #suffixTemplateHiddenRePassword>\r\n              <nz-icon\r\n                nzType=\"eye-invisible\"\r\n                nzTheme=\"outline\"\r\n                nz-tooltip\r\n                nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n                nzTooltipPlacement=\"right\"\r\n                (click)=\"visibleRePass = !visibleRePass; rePasswordType = 'password'\"\r\n              />\r\n            </ng-template>\r\n          </nz-form-item>\r\n        </div>\r\n      </div>\r\n\r\n      <div nz-row>\r\n        <div nz-col [nzSpan]=\"8\"></div>\r\n        <div nz-col [nzSpan]=\"16\">\r\n          <label nz-checkbox formControlName=\"IsActive\">Active</label>\r\n          <label nz-checkbox formControlName=\"IsAdLogin\">AD login</label>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- C\u1ED8T PH\u1EA2I: TABS ORG & ROLE -->\r\n    <div nz-col [nzSpan]=\"12\">\r\n      <nz-tabset nzType=\"card\" nzSize=\"small\">\r\n        <!-- TAB ORG -->\r\n        <nz-tab nzTitle=\"\u0110\u01A1n v\u1ECB\">\r\n          <div style=\"padding: 8px\">\r\n            <h3 style=\"margin-bottom: 16px\">Danh s\u00E1ch \u0110\u01A1n v\u1ECB</h3>\r\n\r\n            <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n              <span style=\"font-weight: 500\">\u0110\u01A1n v\u1ECB ({{ lstOrgInUser.length }})</span>\r\n              <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddOrgModal()\">\r\n                <span nz-icon nzType=\"plus\"></span>\r\n                Th\u00EAm \u0110\u01A1n v\u1ECB\r\n              </button>\r\n            </div>\r\n\r\n            <div style=\"max-height: 450px; overflow-y: auto\">\r\n              <nz-table\r\n                #orgTable\r\n                [nzData]=\"lstOrgInUser\"\r\n                [nzSize]=\"'small'\"\r\n                [nzShowPagination]=\"lstOrgInUser.length > 20\"\r\n                [nzPageSize]=\"20\"\r\n                [nzBordered]=\"true\"\r\n              >\r\n                <thead>\r\n                  <tr>\r\n                    <th nzWidth=\"40px\">STT</th>\r\n                    <th>\u0110\u01A1n v\u1ECB</th>\r\n                    <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n                  </tr>\r\n                </thead>\r\n                <tbody>\r\n                  <tr *ngFor=\"let item of orgTable.data; let i = index\">\r\n                    <td>{{ i + 1 }}</td>\r\n                    <td>\r\n                      <div style=\"font-weight: 500\">{{ item.Name }}</div>\r\n                      <div style=\"font-size: 12px; color: #888\">{{ item.Code }}</div>\r\n                    </td>\r\n                    <td nzAlign=\"center\">\r\n                      <button\r\n                        nz-button\r\n                        nzType=\"link\"\r\n                        nzDanger\r\n                        nzSize=\"small\"\r\n                        nz-popconfirm\r\n                        nzPopconfirmTitle=\"X\u00F3a \u0110\u01A1n v\u1ECB n\u00E0y?\"\r\n                        nzAutofocus=\"ok\"\r\n                        (nzOnConfirm)=\"deleteOrgFromUser(item)\"\r\n                      >\r\n                        <span nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\r\n                      </button>\r\n                    </td>\r\n                  </tr>\r\n                </tbody>\r\n              </nz-table>\r\n            </div>\r\n          </div>\r\n        </nz-tab>\r\n\r\n        <!-- TAB ROLE -->\r\n        <nz-tab nzTitle=\"Nh\u00F3m quy\u1EC1n\">\r\n          <div style=\"padding: 8px\">\r\n            <h3 style=\"margin-bottom: 16px\">Danh s\u00E1ch Nh\u00F3m quy\u1EC1n</h3>\r\n\r\n            <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n              <span style=\"font-weight: 500\">Roles ({{ lstRoleInUser.length }})</span>\r\n              <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddRoleModal()\">\r\n                <span nz-icon nzType=\"plus\"></span>\r\n                Th\u00EAm Role\r\n              </button>\r\n            </div>\r\n\r\n            <div style=\"max-height: 450px; overflow-y: auto\">\r\n              <nz-table\r\n                #roleTable\r\n                [nzData]=\"lstRoleInUser\"\r\n                [nzSize]=\"'small'\"\r\n                [nzShowPagination]=\"lstRoleInUser.length > 20\"\r\n                [nzPageSize]=\"20\"\r\n                [nzBordered]=\"true\"\r\n              >\r\n                <thead>\r\n                  <tr>\r\n                    <th nzWidth=\"40px\">STT</th>\r\n                    <th>Role</th>\r\n                    <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n                  </tr>\r\n                </thead>\r\n                <tbody>\r\n                  <tr *ngFor=\"let item of roleTable.data; let i = index\">\r\n                    <td>{{ i + 1 }}</td>\r\n                    <td>\r\n                      <div style=\"font-weight: 500\">{{ item.Name }}</div>\r\n                      <div style=\"font-size: 12px; color: #888\">{{ item.Code }}</div>\r\n                    </td>\r\n                    <td nzAlign=\"center\">\r\n                      <button\r\n                        nz-button\r\n                        nzType=\"link\"\r\n                        nzDanger\r\n                        nzSize=\"small\"\r\n                        nz-popconfirm\r\n                        nzPopconfirmTitle=\"X\u00F3a Role n\u00E0y?\"\r\n                        (nzOnConfirm)=\"deleteRoleFromUser(item)\"\r\n                      >\r\n                        <span nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\r\n                      </button>\r\n                    </td>\r\n                  </tr>\r\n                </tbody>\r\n              </nz-table>\r\n            </div>\r\n          </div>\r\n        </nz-tab>\r\n\r\n        <!-- ch\u1EE9c danh -->\r\n        <nz-tab nzTitle=\"Ch\u1EE9c danh\">\r\n          <div style=\"padding: 8px\">\r\n            <h3 style=\"margin-bottom: 16px\">Danh s\u00E1ch Ch\u1EE9c danh</h3>\r\n\r\n            <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n              <span style=\"font-weight: 500\">Ch\u1EE9c danh ({{ lstJobTitleInUser.length }})</span>\r\n              <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddJobTitleModal()\">\r\n                <span nz-icon nzType=\"plus\"></span>\r\n                Th\u00EAm Ch\u1EE9c danh\r\n              </button>\r\n            </div>\r\n\r\n            <div style=\"max-height: 450px; overflow-y: auto\">\r\n              <nz-table\r\n                #orgJobTilte\r\n                [nzData]=\"lstJobTitleInUser\"\r\n                [nzSize]=\"'small'\"\r\n                [nzShowPagination]=\"lstJobTitleInUser.length > 20\"\r\n                [nzPageSize]=\"20\"\r\n              >\r\n                <thead>\r\n                  <tr>\r\n                    <th nzWidth=\"40px\">STT</th>\r\n                    <th>Ch\u1EE9c danh</th>\r\n                    <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n                  </tr>\r\n                </thead>\r\n                <tbody>\r\n                  <tr *ngFor=\"let item of orgJobTilte.data; let i = index\">\r\n                    <td>{{ i + 1 }}</td>\r\n                    <td>\r\n                      <div style=\"font-weight: 500\">{{ item.Name }}</div>\r\n                      <div style=\"font-size: 12px; color: #888\">{{ item.Code }}</div>\r\n                    </td>\r\n                    <td nzAlign=\"center\">\r\n                      <button\r\n                        nz-button\r\n                        nzType=\"link\"\r\n                        nzDanger\r\n                        nzSize=\"small\"\r\n                        nz-popconfirm\r\n                        nzPopconfirmTitle=\"X\u00F3a ch\u1EE9c danh n\u00E0y?\"\r\n                        nzAutofocus=\"ok\"\r\n                        (nzOnConfirm)=\"deleteJobTitleFromUser(item)\"\r\n                      >\r\n                        <span nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\r\n                      </button>\r\n                    </td>\r\n                  </tr>\r\n                </tbody>\r\n              </nz-table>\r\n            </div>\r\n          </div>\r\n        </nz-tab>\r\n      </nz-tabset>\r\n    </div>\r\n  </div>\r\n</form>\r\n\r\n<!-- Modal ch\u1ECDn Org -->\r\n<nz-modal\r\n  [(nzVisible)]=\"isAddOrgModalVisible\"\r\n  nzTitle=\"Th\u00EAm \u0110\u01A1n v\u1ECB v\u00E0o User\"\r\n  [nzWidth]=\"700\"\r\n  (nzOnCancel)=\"closeAddOrgModal()\"\r\n  (nzOnOk)=\"addOrgsToUser()\"\r\n  nzOkText=\"Th\u00EAm\"\r\n  nzCancelText=\"H\u1EE7y\"\r\n>\r\n  <ng-container *nzModalContent>\r\n    <nz-alert\r\n      *ngIf=\"!isOneUserMultiOrgs\"\r\n      nzType=\"info\"\r\n      nzMessage=\"Ch\u1EC9 \u0111\u01B0\u1EE3c ch\u1ECDn 1 \u0110\u01A1n v\u1ECB\"\r\n      nzShowIcon\r\n      style=\"margin-bottom: 16px\"\r\n    ></nz-alert>\r\n    <!-- Search box -->\r\n    <nz-input-group [nzPrefix]=\"prefixIconSearchOrg\" style=\"margin-bottom: 16px\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        placeholder=\"T\u00ECm ki\u1EBFm \u0110\u01A1n v\u1ECB...\"\r\n        [(ngModel)]=\"searchOrgText\"\r\n        (ngModelChange)=\"filterAvailableOrgs()\"\r\n      />\r\n    </nz-input-group>\r\n    <ng-template #prefixIconSearchOrg>\r\n      <span nz-icon nzType=\"search\"></span>\r\n    </ng-template>\r\n\r\n    <nz-table\r\n      #addOrgTable\r\n      [nzData]=\"lstFilteredOrg\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"true\"\r\n      [nzPageSize]=\"10\"\r\n      [nzLoading]=\"isLoadingAvailableOrgs\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th\r\n            nzWidth=\"60px\"\r\n            [nzShowCheckbox]=\"isOneUserMultiOrgs\"\r\n            [(nzChecked)]=\"isAllOrgChecked\"\r\n            (nzCheckedChange)=\"onAllOrgChecked($event)\"\r\n            [nzIndeterminate]=\"isOrgIndeterminate\"\r\n          ></th>\r\n          <th nzWidth=\"150px\">M\u00E3</th>\r\n          <th>T\u00EAn</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let item of addOrgTable.data\">\r\n          <td nzAlign=\"center\">\r\n            <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onOrgChecked(item, $event)\"></label>\r\n          </td>\r\n          <td>{{ item.Code }}</td>\r\n          <td>{{ item.TreeNodeName || item.Name }}</td>\r\n        </tr>\r\n      </tbody>\r\n    </nz-table>\r\n  </ng-container>\r\n</nz-modal>\r\n\r\n<!-- Modal ch\u1ECDn Role -->\r\n<nz-modal\r\n  [(nzVisible)]=\"isAddRoleModalVisible\"\r\n  nzTitle=\"Th\u00EAm Role v\u00E0o User\"\r\n  [nzWidth]=\"700\"\r\n  (nzOnCancel)=\"closeAddRoleModal()\"\r\n  (nzOnOk)=\"addRolesToUser()\"\r\n  nzOkText=\"Th\u00EAm\"\r\n  nzCancelText=\"H\u1EE7y\"\r\n>\r\n  <ng-container *nzModalContent>\r\n    <!-- Search box -->\r\n    <nz-input-group [nzPrefix]=\"prefixIconSearchRole\" style=\"margin-bottom: 16px\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        placeholder=\"T\u00ECm ki\u1EBFm Role...\"\r\n        [(ngModel)]=\"searchRoleText\"\r\n        (ngModelChange)=\"filterAvailableRoles()\"\r\n      />\r\n    </nz-input-group>\r\n    <ng-template #prefixIconSearchRole>\r\n      <span nz-icon nzType=\"search\"></span>\r\n    </ng-template>\r\n\r\n    <nz-table\r\n      #addRoleTable\r\n      [nzData]=\"lstFilteredRole\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"true\"\r\n      [nzPageSize]=\"10\"\r\n      [nzLoading]=\"isLoadingAvailableRoles\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th\r\n            nzWidth=\"60px\"\r\n            nzShowCheckbox\r\n            [(nzChecked)]=\"isAllRoleChecked\"\r\n            (nzCheckedChange)=\"onAllRoleChecked($event)\"\r\n            [nzIndeterminate]=\"isRoleIndeterminate\"\r\n          ></th>\r\n          <th nzWidth=\"150px\">M\u00E3</th>\r\n          <th>T\u00EAn</th>\r\n          <th>M\u00F4 t\u1EA3</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let item of addRoleTable.data\">\r\n          <td nzAlign=\"center\">\r\n            <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onRoleChecked(item, $event)\"></label>\r\n          </td>\r\n          <td>{{ item.Code }}</td>\r\n          <td>{{ item.Name }}</td>\r\n          <td>{{ item.Description }}</td>\r\n        </tr>\r\n      </tbody>\r\n    </nz-table>\r\n  </ng-container>\r\n</nz-modal>\r\n\r\n<!-- Modal ch\u1ECDn JobTitle -->\r\n<nz-modal\r\n  [(nzVisible)]=\"isAddJobTitleModalVisible\"\r\n  nzTitle=\"Th\u00EAm Ch\u1EE9c danh v\u00E0o User\"\r\n  [nzWidth]=\"700\"\r\n  (nzOnCancel)=\"closeAddJobTitleModal()\"\r\n  (nzOnOk)=\"addJobTitlesToUser()\"\r\n  nzOkText=\"Th\u00EAm\"\r\n  nzCancelText=\"H\u1EE7y\"\r\n>\r\n  <ng-container *nzModalContent>\r\n    <nz-alert\r\n      *ngIf=\"!isOneUserMultiJobTitles\"\r\n      nzType=\"info\"\r\n      nzMessage=\"Ch\u1EC9 \u0111\u01B0\u1EE3c ch\u1ECDn 1 Ch\u1EE9c danh\"\r\n      nzShowIcon\r\n      style=\"margin-bottom: 16px\"\r\n    ></nz-alert>\r\n    <!-- Search box -->\r\n    <nz-input-group [nzPrefix]=\"prefixIconSearchJobTitle\" style=\"margin-bottom: 16px\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        placeholder=\"T\u00ECm ki\u1EBFm Ch\u1EE9c danh...\"\r\n        [(ngModel)]=\"searchJobTitleText\"\r\n        (ngModelChange)=\"filterAvailableJobTitles()\"\r\n      />\r\n    </nz-input-group>\r\n    <ng-template #prefixIconSearchJobTitle>\r\n      <span nz-icon nzType=\"search\"></span>\r\n    </ng-template>\r\n\r\n    <nz-table\r\n      #addJobTitleTable\r\n      [nzData]=\"lstFilteredJobTitle\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"true\"\r\n      [nzPageSize]=\"10\"\r\n      [nzLoading]=\"isLoadingAvailableJobTitles\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th\r\n            nzWidth=\"60px\"\r\n            [nzShowCheckbox]=\"isOneUserMultiJobTitles\"\r\n            [(nzChecked)]=\"isAllJobTitleChecked\"\r\n            (nzCheckedChange)=\"onAllJobTitleChecked($event)\"\r\n            [nzIndeterminate]=\"isJobTitleIndeterminate\"\r\n          ></th>\r\n          <th nzWidth=\"150px\">M\u00E3</th>\r\n          <th>T\u00EAn</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let item of addJobTitleTable.data\">\r\n          <td>\r\n            <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onJobTitleChecked(item, $event)\"></label>\r\n          </td>\r\n          <td>{{ item.Code }}</td>\r\n          <td>{{ item.Name }}</td>\r\n        </tr>\r\n      </tbody>\r\n    </nz-table>\r\n  </ng-container>\r\n</nz-modal>\r\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: NzSelectModule }, { 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$3.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.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i5$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i5$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i5$1.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { 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: 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: NzTableModule }, { kind: "component", type: i6$2.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: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.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: i6$2.NzCellAlignDirective, selector: "th[nzAlign],td[nzAlign]", inputs: ["nzAlign"] }, { kind: "component", type: i6$2.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: 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: i8$1.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: NzTabsModule }, { kind: "component", type: i1$7.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$7.NzTabComponent, selector: "nz-tab", inputs: ["nzTitle", "nzClosable", "nzCloseIcon", "nzDisabled", "nzForceRender"], outputs: ["nzSelect", "nzDeselect", "nzClick", "nzContextmenu"], exportAs: ["nzTab"] }, { kind: "component", type: NzAlertComponent, selector: "nz-alert", inputs: ["nzAction", "nzCloseText", "nzIconType", "nzMessage", "nzDescription", "nzType", "nzCloseable", "nzShowIcon", "nzBanner", "nzNoAnimation", "nzIcon"], outputs: ["nzOnClose"], exportAs: ["nzAlert"] }, { kind: "component", type: ButtonBack, selector: "button-back" }, { kind: "component", type: ButtonSave, selector: "button-save" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: UserDetailComponent, decorators: [{
             type: Component,
@@ -8626,7 +8627,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         NzAlertComponent,
                         ButtonBack,
                         ButtonSave,
-                    ], template: "<form nz-form [formGroup]=\"formData\">\r\n  <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n    @if (item?.App_User_Id) {\r\n      <button nz-button nzType=\"primary\" type=\"button\" (click)=\"resetPassword()\">\r\n        {{ TranslateKey.RESET_PASSWORD | translate }}\r\n      </button>\r\n      <button nz-button nzType=\"primary\" type=\"button\" nzDanger (click)=\"delete()\">\r\n        {{ TranslateKey.DELETE | translate }}\r\n      </button>\r\n    }\r\n    <button-save (click)=\"save()\"></button-save>\r\n    <button-back (click)=\"goto('/admin/user')\"></button-back>\r\n  </div>\r\n\r\n  <nz-divider></nz-divider>\r\n\r\n  <div nz-row [nzGutter]=\"[16, 16]\">\r\n    <!-- C\u1ED8T TR\u00C1I: FORM USER -->\r\n    <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"UserName\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n          T\u00EAn \u0111\u0103ng nh\u1EADp\r\n        </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n          <input nz-input formControlName=\"UserName\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"FullName\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n          T\u00EAn ng\u01B0\u1EDDi d\u00F9ng\r\n        </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n          <input nz-input formControlName=\"FullName\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Email\" nzLabelAlign=\"left\" nzNoColon=\"true\"> Email </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'Ch\u01B0a \u0111\u00FAng \u0111\u1ECBnh d\u1EA1ng email'\">\r\n          <input nz-input formControlName=\"Email\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <div *ngIf=\"!item?.App_User_Id\" nz-row [nzGutter]=\"16\">\r\n        <div nz-col [nzSpan]=\"24\">\r\n          <nz-form-item>\r\n            <nz-form-label [nzSpan]=\"8\" nzFor=\"Password\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n              M\u1EADt kh\u1EA9u\r\n            </nz-form-label>\r\n            <nz-form-control nzErrorTip=\"{{ 'REQUIRED' | translate }}\">\r\n              <nz-input-group [nzSuffix]=\"visiblePass ? suffixTemplateHiddenPassword : suffixTemplateShowPassword\">\r\n                <input type=\"{{ passwordType }}\" nz-input formControlName=\"Password\" autocomplete=\"new-password\" />\r\n              </nz-input-group>\r\n            </nz-form-control>\r\n            <ng-template #suffixTemplateShowPassword>\r\n              <nz-icon\r\n                nzType=\"eye\"\r\n                nzTheme=\"outline\"\r\n                nz-tooltip\r\n                nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n                nzTooltipPlacement=\"right\"\r\n                (click)=\"visiblePass = !visiblePass; passwordType = 'text'\"\r\n              />\r\n            </ng-template>\r\n            <ng-template #suffixTemplateHiddenPassword>\r\n              <nz-icon\r\n                nzType=\"eye-invisible\"\r\n                nzTheme=\"outline\"\r\n                nz-tooltip\r\n                nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n                nzTooltipPlacement=\"right\"\r\n                (click)=\"visiblePass = !visiblePass; passwordType = 'password'\"\r\n              />\r\n            </ng-template>\r\n          </nz-form-item>\r\n        </div>\r\n        <div nz-col [nzSpan]=\"24\">\r\n          <nz-form-item>\r\n            <nz-form-label [nzSpan]=\"8\" nzFor=\"RetypePassword\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n              Nh\u1EADp l\u1EA1i M\u1EADt kh\u1EA9u\r\n            </nz-form-label>\r\n            <nz-form-control nzErrorTip=\"M\u1EADt kh\u1EA9u kh\u00F4ng kh\u1EDBp\">\r\n              <nz-input-group\r\n                [nzSuffix]=\"visibleRePass ? suffixTemplateHiddenRePassword : suffixTemplateShowRePassword\"\r\n              >\r\n                <input\r\n                  type=\"{{ rePasswordType }}\"\r\n                  nz-input\r\n                  formControlName=\"RetypePassword\"\r\n                  autocomplete=\"new-password\"\r\n                />\r\n              </nz-input-group>\r\n            </nz-form-control>\r\n            <ng-template #suffixTemplateShowRePassword>\r\n              <nz-icon\r\n                nzType=\"eye\"\r\n                nzTheme=\"outline\"\r\n                nz-tooltip\r\n                nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n                nzTooltipPlacement=\"right\"\r\n                (click)=\"visibleRePass = !visibleRePass; rePasswordType = 'text'\"\r\n              />\r\n            </ng-template>\r\n            <ng-template #suffixTemplateHiddenRePassword>\r\n              <nz-icon\r\n                nzType=\"eye-invisible\"\r\n                nzTheme=\"outline\"\r\n                nz-tooltip\r\n                nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n                nzTooltipPlacement=\"right\"\r\n                (click)=\"visibleRePass = !visibleRePass; rePasswordType = 'password'\"\r\n              />\r\n            </ng-template>\r\n          </nz-form-item>\r\n        </div>\r\n      </div>\r\n\r\n      <div nz-row>\r\n        <div nz-col [nzSpan]=\"8\"></div>\r\n        <div nz-col [nzSpan]=\"16\">\r\n          <label nz-checkbox formControlName=\"IsActive\">Active</label>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- C\u1ED8T PH\u1EA2I: TABS ORG & ROLE -->\r\n    <div nz-col [nzSpan]=\"12\">\r\n      <nz-tabset nzType=\"card\" nzSize=\"small\">\r\n        <!-- TAB ORG -->\r\n        <nz-tab nzTitle=\"\u0110\u01A1n v\u1ECB\">\r\n          <div style=\"padding: 8px\">\r\n            <h3 style=\"margin-bottom: 16px\">Danh s\u00E1ch \u0110\u01A1n v\u1ECB</h3>\r\n\r\n            <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n              <span style=\"font-weight: 500\">\u0110\u01A1n v\u1ECB ({{ lstOrgInUser.length }})</span>\r\n              <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddOrgModal()\">\r\n                <span nz-icon nzType=\"plus\"></span>\r\n                Th\u00EAm \u0110\u01A1n v\u1ECB\r\n              </button>\r\n            </div>\r\n\r\n            <div style=\"max-height: 450px; overflow-y: auto\">\r\n              <nz-table\r\n                #orgTable\r\n                [nzData]=\"lstOrgInUser\"\r\n                [nzSize]=\"'small'\"\r\n                [nzShowPagination]=\"lstOrgInUser.length > 20\"\r\n                [nzPageSize]=\"20\"\r\n                [nzBordered]=\"true\"\r\n              >\r\n                <thead>\r\n                  <tr>\r\n                    <th nzWidth=\"40px\">STT</th>\r\n                    <th>\u0110\u01A1n v\u1ECB</th>\r\n                    <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n                  </tr>\r\n                </thead>\r\n                <tbody>\r\n                  <tr *ngFor=\"let item of orgTable.data; let i = index\">\r\n                    <td>{{ i + 1 }}</td>\r\n                    <td>\r\n                      <div style=\"font-weight: 500\">{{ item.Name }}</div>\r\n                      <div style=\"font-size: 12px; color: #888\">{{ item.Code }}</div>\r\n                    </td>\r\n                    <td nzAlign=\"center\">\r\n                      <button\r\n                        nz-button\r\n                        nzType=\"link\"\r\n                        nzDanger\r\n                        nzSize=\"small\"\r\n                        nz-popconfirm\r\n                        nzPopconfirmTitle=\"X\u00F3a \u0110\u01A1n v\u1ECB n\u00E0y?\"\r\n                        nzAutofocus=\"ok\"\r\n                        (nzOnConfirm)=\"deleteOrgFromUser(item)\"\r\n                      >\r\n                        <span nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\r\n                      </button>\r\n                    </td>\r\n                  </tr>\r\n                </tbody>\r\n              </nz-table>\r\n            </div>\r\n          </div>\r\n        </nz-tab>\r\n\r\n        <!-- TAB ROLE -->\r\n        <nz-tab nzTitle=\"Nh\u00F3m quy\u1EC1n\">\r\n          <div style=\"padding: 8px\">\r\n            <h3 style=\"margin-bottom: 16px\">Danh s\u00E1ch Nh\u00F3m quy\u1EC1n</h3>\r\n\r\n            <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n              <span style=\"font-weight: 500\">Roles ({{ lstRoleInUser.length }})</span>\r\n              <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddRoleModal()\">\r\n                <span nz-icon nzType=\"plus\"></span>\r\n                Th\u00EAm Role\r\n              </button>\r\n            </div>\r\n\r\n            <div style=\"max-height: 450px; overflow-y: auto\">\r\n              <nz-table\r\n                #roleTable\r\n                [nzData]=\"lstRoleInUser\"\r\n                [nzSize]=\"'small'\"\r\n                [nzShowPagination]=\"lstRoleInUser.length > 20\"\r\n                [nzPageSize]=\"20\"\r\n                [nzBordered]=\"true\"\r\n              >\r\n                <thead>\r\n                  <tr>\r\n                    <th nzWidth=\"40px\">STT</th>\r\n                    <th>Role</th>\r\n                    <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n                  </tr>\r\n                </thead>\r\n                <tbody>\r\n                  <tr *ngFor=\"let item of roleTable.data; let i = index\">\r\n                    <td>{{ i + 1 }}</td>\r\n                    <td>\r\n                      <div style=\"font-weight: 500\">{{ item.Name }}</div>\r\n                      <div style=\"font-size: 12px; color: #888\">{{ item.Code }}</div>\r\n                    </td>\r\n                    <td nzAlign=\"center\">\r\n                      <button\r\n                        nz-button\r\n                        nzType=\"link\"\r\n                        nzDanger\r\n                        nzSize=\"small\"\r\n                        nz-popconfirm\r\n                        nzPopconfirmTitle=\"X\u00F3a Role n\u00E0y?\"\r\n                        (nzOnConfirm)=\"deleteRoleFromUser(item)\"\r\n                      >\r\n                        <span nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\r\n                      </button>\r\n                    </td>\r\n                  </tr>\r\n                </tbody>\r\n              </nz-table>\r\n            </div>\r\n          </div>\r\n        </nz-tab>\r\n\r\n        <!-- ch\u1EE9c danh -->\r\n        <nz-tab nzTitle=\"Ch\u1EE9c danh\">\r\n          <div style=\"padding: 8px\">\r\n            <h3 style=\"margin-bottom: 16px\">Danh s\u00E1ch Ch\u1EE9c danh</h3>\r\n\r\n            <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n              <span style=\"font-weight: 500\">Ch\u1EE9c danh ({{ lstJobTitleInUser.length }})</span>\r\n              <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddJobTitleModal()\">\r\n                <span nz-icon nzType=\"plus\"></span>\r\n                Th\u00EAm Ch\u1EE9c danh\r\n              </button>\r\n            </div>\r\n\r\n            <div style=\"max-height: 450px; overflow-y: auto\">\r\n              <nz-table\r\n                #orgJobTilte\r\n                [nzData]=\"lstJobTitleInUser\"\r\n                [nzSize]=\"'small'\"\r\n                [nzShowPagination]=\"lstJobTitleInUser.length > 20\"\r\n                [nzPageSize]=\"20\"\r\n              >\r\n                <thead>\r\n                  <tr>\r\n                    <th nzWidth=\"40px\">STT</th>\r\n                    <th>Ch\u1EE9c danh</th>\r\n                    <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n                  </tr>\r\n                </thead>\r\n                <tbody>\r\n                  <tr *ngFor=\"let item of orgJobTilte.data; let i = index\">\r\n                    <td>{{ i + 1 }}</td>\r\n                    <td>\r\n                      <div style=\"font-weight: 500\">{{ item.Name }}</div>\r\n                      <div style=\"font-size: 12px; color: #888\">{{ item.Code }}</div>\r\n                    </td>\r\n                    <td nzAlign=\"center\">\r\n                      <button\r\n                        nz-button\r\n                        nzType=\"link\"\r\n                        nzDanger\r\n                        nzSize=\"small\"\r\n                        nz-popconfirm\r\n                        nzPopconfirmTitle=\"X\u00F3a ch\u1EE9c danh n\u00E0y?\"\r\n                        nzAutofocus=\"ok\"\r\n                        (nzOnConfirm)=\"deleteJobTitleFromUser(item)\"\r\n                      >\r\n                        <span nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\r\n                      </button>\r\n                    </td>\r\n                  </tr>\r\n                </tbody>\r\n              </nz-table>\r\n            </div>\r\n          </div>\r\n        </nz-tab>\r\n      </nz-tabset>\r\n    </div>\r\n  </div>\r\n</form>\r\n\r\n<!-- Modal ch\u1ECDn Org -->\r\n<nz-modal\r\n  [(nzVisible)]=\"isAddOrgModalVisible\"\r\n  nzTitle=\"Th\u00EAm \u0110\u01A1n v\u1ECB v\u00E0o User\"\r\n  [nzWidth]=\"700\"\r\n  (nzOnCancel)=\"closeAddOrgModal()\"\r\n  (nzOnOk)=\"addOrgsToUser()\"\r\n  nzOkText=\"Th\u00EAm\"\r\n  nzCancelText=\"H\u1EE7y\"\r\n>\r\n  <ng-container *nzModalContent>\r\n    <nz-alert\r\n      *ngIf=\"!isOneUserMultiOrgs\"\r\n      nzType=\"info\"\r\n      nzMessage=\"Ch\u1EC9 \u0111\u01B0\u1EE3c ch\u1ECDn 1 \u0110\u01A1n v\u1ECB\"\r\n      nzShowIcon\r\n      style=\"margin-bottom: 16px\"\r\n    ></nz-alert>\r\n    <!-- Search box -->\r\n    <nz-input-group [nzPrefix]=\"prefixIconSearchOrg\" style=\"margin-bottom: 16px\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        placeholder=\"T\u00ECm ki\u1EBFm \u0110\u01A1n v\u1ECB...\"\r\n        [(ngModel)]=\"searchOrgText\"\r\n        (ngModelChange)=\"filterAvailableOrgs()\"\r\n      />\r\n    </nz-input-group>\r\n    <ng-template #prefixIconSearchOrg>\r\n      <span nz-icon nzType=\"search\"></span>\r\n    </ng-template>\r\n\r\n    <nz-table\r\n      #addOrgTable\r\n      [nzData]=\"lstFilteredOrg\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"true\"\r\n      [nzPageSize]=\"10\"\r\n      [nzLoading]=\"isLoadingAvailableOrgs\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th\r\n            nzWidth=\"60px\"\r\n            [nzShowCheckbox]=\"isOneUserMultiOrgs\"\r\n            [(nzChecked)]=\"isAllOrgChecked\"\r\n            (nzCheckedChange)=\"onAllOrgChecked($event)\"\r\n            [nzIndeterminate]=\"isOrgIndeterminate\"\r\n          ></th>\r\n          <th nzWidth=\"150px\">M\u00E3</th>\r\n          <th>T\u00EAn</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let item of addOrgTable.data\">\r\n          <td nzAlign=\"center\">\r\n            <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onOrgChecked(item, $event)\"></label>\r\n          </td>\r\n          <td>{{ item.Code }}</td>\r\n          <td>{{ item.TreeNodeName || item.Name }}</td>\r\n        </tr>\r\n      </tbody>\r\n    </nz-table>\r\n  </ng-container>\r\n</nz-modal>\r\n\r\n<!-- Modal ch\u1ECDn Role -->\r\n<nz-modal\r\n  [(nzVisible)]=\"isAddRoleModalVisible\"\r\n  nzTitle=\"Th\u00EAm Role v\u00E0o User\"\r\n  [nzWidth]=\"700\"\r\n  (nzOnCancel)=\"closeAddRoleModal()\"\r\n  (nzOnOk)=\"addRolesToUser()\"\r\n  nzOkText=\"Th\u00EAm\"\r\n  nzCancelText=\"H\u1EE7y\"\r\n>\r\n  <ng-container *nzModalContent>\r\n    <!-- Search box -->\r\n    <nz-input-group [nzPrefix]=\"prefixIconSearchRole\" style=\"margin-bottom: 16px\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        placeholder=\"T\u00ECm ki\u1EBFm Role...\"\r\n        [(ngModel)]=\"searchRoleText\"\r\n        (ngModelChange)=\"filterAvailableRoles()\"\r\n      />\r\n    </nz-input-group>\r\n    <ng-template #prefixIconSearchRole>\r\n      <span nz-icon nzType=\"search\"></span>\r\n    </ng-template>\r\n\r\n    <nz-table\r\n      #addRoleTable\r\n      [nzData]=\"lstFilteredRole\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"true\"\r\n      [nzPageSize]=\"10\"\r\n      [nzLoading]=\"isLoadingAvailableRoles\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th\r\n            nzWidth=\"60px\"\r\n            nzShowCheckbox\r\n            [(nzChecked)]=\"isAllRoleChecked\"\r\n            (nzCheckedChange)=\"onAllRoleChecked($event)\"\r\n            [nzIndeterminate]=\"isRoleIndeterminate\"\r\n          ></th>\r\n          <th nzWidth=\"150px\">M\u00E3</th>\r\n          <th>T\u00EAn</th>\r\n          <th>M\u00F4 t\u1EA3</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let item of addRoleTable.data\">\r\n          <td nzAlign=\"center\">\r\n            <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onRoleChecked(item, $event)\"></label>\r\n          </td>\r\n          <td>{{ item.Code }}</td>\r\n          <td>{{ item.Name }}</td>\r\n          <td>{{ item.Description }}</td>\r\n        </tr>\r\n      </tbody>\r\n    </nz-table>\r\n  </ng-container>\r\n</nz-modal>\r\n\r\n<!-- Modal ch\u1ECDn JobTitle -->\r\n<nz-modal\r\n  [(nzVisible)]=\"isAddJobTitleModalVisible\"\r\n  nzTitle=\"Th\u00EAm Ch\u1EE9c danh v\u00E0o User\"\r\n  [nzWidth]=\"700\"\r\n  (nzOnCancel)=\"closeAddJobTitleModal()\"\r\n  (nzOnOk)=\"addJobTitlesToUser()\"\r\n  nzOkText=\"Th\u00EAm\"\r\n  nzCancelText=\"H\u1EE7y\"\r\n>\r\n  <ng-container *nzModalContent>\r\n    <nz-alert\r\n      *ngIf=\"!isOneUserMultiJobTitles\"\r\n      nzType=\"info\"\r\n      nzMessage=\"Ch\u1EC9 \u0111\u01B0\u1EE3c ch\u1ECDn 1 Ch\u1EE9c danh\"\r\n      nzShowIcon\r\n      style=\"margin-bottom: 16px\"\r\n    ></nz-alert>\r\n    <!-- Search box -->\r\n    <nz-input-group [nzPrefix]=\"prefixIconSearchJobTitle\" style=\"margin-bottom: 16px\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        placeholder=\"T\u00ECm ki\u1EBFm Ch\u1EE9c danh...\"\r\n        [(ngModel)]=\"searchJobTitleText\"\r\n        (ngModelChange)=\"filterAvailableJobTitles()\"\r\n      />\r\n    </nz-input-group>\r\n    <ng-template #prefixIconSearchJobTitle>\r\n      <span nz-icon nzType=\"search\"></span>\r\n    </ng-template>\r\n\r\n    <nz-table\r\n      #addJobTitleTable\r\n      [nzData]=\"lstFilteredJobTitle\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"true\"\r\n      [nzPageSize]=\"10\"\r\n      [nzLoading]=\"isLoadingAvailableJobTitles\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th\r\n            nzWidth=\"60px\"\r\n            [nzShowCheckbox]=\"isOneUserMultiJobTitles\"\r\n            [(nzChecked)]=\"isAllJobTitleChecked\"\r\n            (nzCheckedChange)=\"onAllJobTitleChecked($event)\"\r\n            [nzIndeterminate]=\"isJobTitleIndeterminate\"\r\n          ></th>\r\n          <th nzWidth=\"150px\">M\u00E3</th>\r\n          <th>T\u00EAn</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let item of addJobTitleTable.data\">\r\n          <td>\r\n            <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onJobTitleChecked(item, $event)\"></label>\r\n          </td>\r\n          <td>{{ item.Code }}</td>\r\n          <td>{{ item.Name }}</td>\r\n        </tr>\r\n      </tbody>\r\n    </nz-table>\r\n  </ng-container>\r\n</nz-modal>\r\n" }]
+                    ], template: "<form nz-form [formGroup]=\"formData\">\r\n  <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n    @if (item?.App_User_Id) {\r\n      <button nz-button nzType=\"primary\" type=\"button\" (click)=\"resetPassword()\">\r\n        {{ TranslateKey.RESET_PASSWORD | translate }}\r\n      </button>\r\n      <button nz-button nzType=\"primary\" type=\"button\" nzDanger (click)=\"delete()\">\r\n        {{ TranslateKey.DELETE | translate }}\r\n      </button>\r\n    }\r\n    <button-save (click)=\"save()\"></button-save>\r\n    <button-back (click)=\"goto('/admin/user')\"></button-back>\r\n  </div>\r\n\r\n  <nz-divider></nz-divider>\r\n\r\n  <div nz-row [nzGutter]=\"[16, 16]\">\r\n    <!-- C\u1ED8T TR\u00C1I: FORM USER -->\r\n    <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"UserName\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n          T\u00EAn \u0111\u0103ng nh\u1EADp\r\n        </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n          <input nz-input formControlName=\"UserName\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"FullName\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n          T\u00EAn ng\u01B0\u1EDDi d\u00F9ng\r\n        </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n          <input nz-input formControlName=\"FullName\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Email\" nzLabelAlign=\"left\" nzNoColon=\"true\"> Email </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'Ch\u01B0a \u0111\u00FAng \u0111\u1ECBnh d\u1EA1ng email'\">\r\n          <input nz-input formControlName=\"Email\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <div *ngIf=\"!item?.App_User_Id\" nz-row [nzGutter]=\"16\">\r\n        <div nz-col [nzSpan]=\"24\">\r\n          <nz-form-item>\r\n            <nz-form-label [nzSpan]=\"8\" nzFor=\"Password\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n              M\u1EADt kh\u1EA9u\r\n            </nz-form-label>\r\n            <nz-form-control nzErrorTip=\"{{ 'REQUIRED' | translate }}\">\r\n              <nz-input-group [nzSuffix]=\"visiblePass ? suffixTemplateHiddenPassword : suffixTemplateShowPassword\">\r\n                <input type=\"{{ passwordType }}\" nz-input formControlName=\"Password\" autocomplete=\"new-password\" />\r\n              </nz-input-group>\r\n            </nz-form-control>\r\n            <ng-template #suffixTemplateShowPassword>\r\n              <nz-icon\r\n                nzType=\"eye\"\r\n                nzTheme=\"outline\"\r\n                nz-tooltip\r\n                nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n                nzTooltipPlacement=\"right\"\r\n                (click)=\"visiblePass = !visiblePass; passwordType = 'text'\"\r\n              />\r\n            </ng-template>\r\n            <ng-template #suffixTemplateHiddenPassword>\r\n              <nz-icon\r\n                nzType=\"eye-invisible\"\r\n                nzTheme=\"outline\"\r\n                nz-tooltip\r\n                nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n                nzTooltipPlacement=\"right\"\r\n                (click)=\"visiblePass = !visiblePass; passwordType = 'password'\"\r\n              />\r\n            </ng-template>\r\n          </nz-form-item>\r\n        </div>\r\n        <div nz-col [nzSpan]=\"24\">\r\n          <nz-form-item>\r\n            <nz-form-label [nzSpan]=\"8\" nzFor=\"RetypePassword\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n              Nh\u1EADp l\u1EA1i M\u1EADt kh\u1EA9u\r\n            </nz-form-label>\r\n            <nz-form-control nzErrorTip=\"M\u1EADt kh\u1EA9u kh\u00F4ng kh\u1EDBp\">\r\n              <nz-input-group\r\n                [nzSuffix]=\"visibleRePass ? suffixTemplateHiddenRePassword : suffixTemplateShowRePassword\"\r\n              >\r\n                <input\r\n                  type=\"{{ rePasswordType }}\"\r\n                  nz-input\r\n                  formControlName=\"RetypePassword\"\r\n                  autocomplete=\"new-password\"\r\n                />\r\n              </nz-input-group>\r\n            </nz-form-control>\r\n            <ng-template #suffixTemplateShowRePassword>\r\n              <nz-icon\r\n                nzType=\"eye\"\r\n                nzTheme=\"outline\"\r\n                nz-tooltip\r\n                nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n                nzTooltipPlacement=\"right\"\r\n                (click)=\"visibleRePass = !visibleRePass; rePasswordType = 'text'\"\r\n              />\r\n            </ng-template>\r\n            <ng-template #suffixTemplateHiddenRePassword>\r\n              <nz-icon\r\n                nzType=\"eye-invisible\"\r\n                nzTheme=\"outline\"\r\n                nz-tooltip\r\n                nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n                nzTooltipPlacement=\"right\"\r\n                (click)=\"visibleRePass = !visibleRePass; rePasswordType = 'password'\"\r\n              />\r\n            </ng-template>\r\n          </nz-form-item>\r\n        </div>\r\n      </div>\r\n\r\n      <div nz-row>\r\n        <div nz-col [nzSpan]=\"8\"></div>\r\n        <div nz-col [nzSpan]=\"16\">\r\n          <label nz-checkbox formControlName=\"IsActive\">Active</label>\r\n          <label nz-checkbox formControlName=\"IsAdLogin\">AD login</label>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- C\u1ED8T PH\u1EA2I: TABS ORG & ROLE -->\r\n    <div nz-col [nzSpan]=\"12\">\r\n      <nz-tabset nzType=\"card\" nzSize=\"small\">\r\n        <!-- TAB ORG -->\r\n        <nz-tab nzTitle=\"\u0110\u01A1n v\u1ECB\">\r\n          <div style=\"padding: 8px\">\r\n            <h3 style=\"margin-bottom: 16px\">Danh s\u00E1ch \u0110\u01A1n v\u1ECB</h3>\r\n\r\n            <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n              <span style=\"font-weight: 500\">\u0110\u01A1n v\u1ECB ({{ lstOrgInUser.length }})</span>\r\n              <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddOrgModal()\">\r\n                <span nz-icon nzType=\"plus\"></span>\r\n                Th\u00EAm \u0110\u01A1n v\u1ECB\r\n              </button>\r\n            </div>\r\n\r\n            <div style=\"max-height: 450px; overflow-y: auto\">\r\n              <nz-table\r\n                #orgTable\r\n                [nzData]=\"lstOrgInUser\"\r\n                [nzSize]=\"'small'\"\r\n                [nzShowPagination]=\"lstOrgInUser.length > 20\"\r\n                [nzPageSize]=\"20\"\r\n                [nzBordered]=\"true\"\r\n              >\r\n                <thead>\r\n                  <tr>\r\n                    <th nzWidth=\"40px\">STT</th>\r\n                    <th>\u0110\u01A1n v\u1ECB</th>\r\n                    <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n                  </tr>\r\n                </thead>\r\n                <tbody>\r\n                  <tr *ngFor=\"let item of orgTable.data; let i = index\">\r\n                    <td>{{ i + 1 }}</td>\r\n                    <td>\r\n                      <div style=\"font-weight: 500\">{{ item.Name }}</div>\r\n                      <div style=\"font-size: 12px; color: #888\">{{ item.Code }}</div>\r\n                    </td>\r\n                    <td nzAlign=\"center\">\r\n                      <button\r\n                        nz-button\r\n                        nzType=\"link\"\r\n                        nzDanger\r\n                        nzSize=\"small\"\r\n                        nz-popconfirm\r\n                        nzPopconfirmTitle=\"X\u00F3a \u0110\u01A1n v\u1ECB n\u00E0y?\"\r\n                        nzAutofocus=\"ok\"\r\n                        (nzOnConfirm)=\"deleteOrgFromUser(item)\"\r\n                      >\r\n                        <span nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\r\n                      </button>\r\n                    </td>\r\n                  </tr>\r\n                </tbody>\r\n              </nz-table>\r\n            </div>\r\n          </div>\r\n        </nz-tab>\r\n\r\n        <!-- TAB ROLE -->\r\n        <nz-tab nzTitle=\"Nh\u00F3m quy\u1EC1n\">\r\n          <div style=\"padding: 8px\">\r\n            <h3 style=\"margin-bottom: 16px\">Danh s\u00E1ch Nh\u00F3m quy\u1EC1n</h3>\r\n\r\n            <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n              <span style=\"font-weight: 500\">Roles ({{ lstRoleInUser.length }})</span>\r\n              <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddRoleModal()\">\r\n                <span nz-icon nzType=\"plus\"></span>\r\n                Th\u00EAm Role\r\n              </button>\r\n            </div>\r\n\r\n            <div style=\"max-height: 450px; overflow-y: auto\">\r\n              <nz-table\r\n                #roleTable\r\n                [nzData]=\"lstRoleInUser\"\r\n                [nzSize]=\"'small'\"\r\n                [nzShowPagination]=\"lstRoleInUser.length > 20\"\r\n                [nzPageSize]=\"20\"\r\n                [nzBordered]=\"true\"\r\n              >\r\n                <thead>\r\n                  <tr>\r\n                    <th nzWidth=\"40px\">STT</th>\r\n                    <th>Role</th>\r\n                    <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n                  </tr>\r\n                </thead>\r\n                <tbody>\r\n                  <tr *ngFor=\"let item of roleTable.data; let i = index\">\r\n                    <td>{{ i + 1 }}</td>\r\n                    <td>\r\n                      <div style=\"font-weight: 500\">{{ item.Name }}</div>\r\n                      <div style=\"font-size: 12px; color: #888\">{{ item.Code }}</div>\r\n                    </td>\r\n                    <td nzAlign=\"center\">\r\n                      <button\r\n                        nz-button\r\n                        nzType=\"link\"\r\n                        nzDanger\r\n                        nzSize=\"small\"\r\n                        nz-popconfirm\r\n                        nzPopconfirmTitle=\"X\u00F3a Role n\u00E0y?\"\r\n                        (nzOnConfirm)=\"deleteRoleFromUser(item)\"\r\n                      >\r\n                        <span nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\r\n                      </button>\r\n                    </td>\r\n                  </tr>\r\n                </tbody>\r\n              </nz-table>\r\n            </div>\r\n          </div>\r\n        </nz-tab>\r\n\r\n        <!-- ch\u1EE9c danh -->\r\n        <nz-tab nzTitle=\"Ch\u1EE9c danh\">\r\n          <div style=\"padding: 8px\">\r\n            <h3 style=\"margin-bottom: 16px\">Danh s\u00E1ch Ch\u1EE9c danh</h3>\r\n\r\n            <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n              <span style=\"font-weight: 500\">Ch\u1EE9c danh ({{ lstJobTitleInUser.length }})</span>\r\n              <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddJobTitleModal()\">\r\n                <span nz-icon nzType=\"plus\"></span>\r\n                Th\u00EAm Ch\u1EE9c danh\r\n              </button>\r\n            </div>\r\n\r\n            <div style=\"max-height: 450px; overflow-y: auto\">\r\n              <nz-table\r\n                #orgJobTilte\r\n                [nzData]=\"lstJobTitleInUser\"\r\n                [nzSize]=\"'small'\"\r\n                [nzShowPagination]=\"lstJobTitleInUser.length > 20\"\r\n                [nzPageSize]=\"20\"\r\n              >\r\n                <thead>\r\n                  <tr>\r\n                    <th nzWidth=\"40px\">STT</th>\r\n                    <th>Ch\u1EE9c danh</th>\r\n                    <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n                  </tr>\r\n                </thead>\r\n                <tbody>\r\n                  <tr *ngFor=\"let item of orgJobTilte.data; let i = index\">\r\n                    <td>{{ i + 1 }}</td>\r\n                    <td>\r\n                      <div style=\"font-weight: 500\">{{ item.Name }}</div>\r\n                      <div style=\"font-size: 12px; color: #888\">{{ item.Code }}</div>\r\n                    </td>\r\n                    <td nzAlign=\"center\">\r\n                      <button\r\n                        nz-button\r\n                        nzType=\"link\"\r\n                        nzDanger\r\n                        nzSize=\"small\"\r\n                        nz-popconfirm\r\n                        nzPopconfirmTitle=\"X\u00F3a ch\u1EE9c danh n\u00E0y?\"\r\n                        nzAutofocus=\"ok\"\r\n                        (nzOnConfirm)=\"deleteJobTitleFromUser(item)\"\r\n                      >\r\n                        <span nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\r\n                      </button>\r\n                    </td>\r\n                  </tr>\r\n                </tbody>\r\n              </nz-table>\r\n            </div>\r\n          </div>\r\n        </nz-tab>\r\n      </nz-tabset>\r\n    </div>\r\n  </div>\r\n</form>\r\n\r\n<!-- Modal ch\u1ECDn Org -->\r\n<nz-modal\r\n  [(nzVisible)]=\"isAddOrgModalVisible\"\r\n  nzTitle=\"Th\u00EAm \u0110\u01A1n v\u1ECB v\u00E0o User\"\r\n  [nzWidth]=\"700\"\r\n  (nzOnCancel)=\"closeAddOrgModal()\"\r\n  (nzOnOk)=\"addOrgsToUser()\"\r\n  nzOkText=\"Th\u00EAm\"\r\n  nzCancelText=\"H\u1EE7y\"\r\n>\r\n  <ng-container *nzModalContent>\r\n    <nz-alert\r\n      *ngIf=\"!isOneUserMultiOrgs\"\r\n      nzType=\"info\"\r\n      nzMessage=\"Ch\u1EC9 \u0111\u01B0\u1EE3c ch\u1ECDn 1 \u0110\u01A1n v\u1ECB\"\r\n      nzShowIcon\r\n      style=\"margin-bottom: 16px\"\r\n    ></nz-alert>\r\n    <!-- Search box -->\r\n    <nz-input-group [nzPrefix]=\"prefixIconSearchOrg\" style=\"margin-bottom: 16px\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        placeholder=\"T\u00ECm ki\u1EBFm \u0110\u01A1n v\u1ECB...\"\r\n        [(ngModel)]=\"searchOrgText\"\r\n        (ngModelChange)=\"filterAvailableOrgs()\"\r\n      />\r\n    </nz-input-group>\r\n    <ng-template #prefixIconSearchOrg>\r\n      <span nz-icon nzType=\"search\"></span>\r\n    </ng-template>\r\n\r\n    <nz-table\r\n      #addOrgTable\r\n      [nzData]=\"lstFilteredOrg\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"true\"\r\n      [nzPageSize]=\"10\"\r\n      [nzLoading]=\"isLoadingAvailableOrgs\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th\r\n            nzWidth=\"60px\"\r\n            [nzShowCheckbox]=\"isOneUserMultiOrgs\"\r\n            [(nzChecked)]=\"isAllOrgChecked\"\r\n            (nzCheckedChange)=\"onAllOrgChecked($event)\"\r\n            [nzIndeterminate]=\"isOrgIndeterminate\"\r\n          ></th>\r\n          <th nzWidth=\"150px\">M\u00E3</th>\r\n          <th>T\u00EAn</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let item of addOrgTable.data\">\r\n          <td nzAlign=\"center\">\r\n            <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onOrgChecked(item, $event)\"></label>\r\n          </td>\r\n          <td>{{ item.Code }}</td>\r\n          <td>{{ item.TreeNodeName || item.Name }}</td>\r\n        </tr>\r\n      </tbody>\r\n    </nz-table>\r\n  </ng-container>\r\n</nz-modal>\r\n\r\n<!-- Modal ch\u1ECDn Role -->\r\n<nz-modal\r\n  [(nzVisible)]=\"isAddRoleModalVisible\"\r\n  nzTitle=\"Th\u00EAm Role v\u00E0o User\"\r\n  [nzWidth]=\"700\"\r\n  (nzOnCancel)=\"closeAddRoleModal()\"\r\n  (nzOnOk)=\"addRolesToUser()\"\r\n  nzOkText=\"Th\u00EAm\"\r\n  nzCancelText=\"H\u1EE7y\"\r\n>\r\n  <ng-container *nzModalContent>\r\n    <!-- Search box -->\r\n    <nz-input-group [nzPrefix]=\"prefixIconSearchRole\" style=\"margin-bottom: 16px\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        placeholder=\"T\u00ECm ki\u1EBFm Role...\"\r\n        [(ngModel)]=\"searchRoleText\"\r\n        (ngModelChange)=\"filterAvailableRoles()\"\r\n      />\r\n    </nz-input-group>\r\n    <ng-template #prefixIconSearchRole>\r\n      <span nz-icon nzType=\"search\"></span>\r\n    </ng-template>\r\n\r\n    <nz-table\r\n      #addRoleTable\r\n      [nzData]=\"lstFilteredRole\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"true\"\r\n      [nzPageSize]=\"10\"\r\n      [nzLoading]=\"isLoadingAvailableRoles\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th\r\n            nzWidth=\"60px\"\r\n            nzShowCheckbox\r\n            [(nzChecked)]=\"isAllRoleChecked\"\r\n            (nzCheckedChange)=\"onAllRoleChecked($event)\"\r\n            [nzIndeterminate]=\"isRoleIndeterminate\"\r\n          ></th>\r\n          <th nzWidth=\"150px\">M\u00E3</th>\r\n          <th>T\u00EAn</th>\r\n          <th>M\u00F4 t\u1EA3</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let item of addRoleTable.data\">\r\n          <td nzAlign=\"center\">\r\n            <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onRoleChecked(item, $event)\"></label>\r\n          </td>\r\n          <td>{{ item.Code }}</td>\r\n          <td>{{ item.Name }}</td>\r\n          <td>{{ item.Description }}</td>\r\n        </tr>\r\n      </tbody>\r\n    </nz-table>\r\n  </ng-container>\r\n</nz-modal>\r\n\r\n<!-- Modal ch\u1ECDn JobTitle -->\r\n<nz-modal\r\n  [(nzVisible)]=\"isAddJobTitleModalVisible\"\r\n  nzTitle=\"Th\u00EAm Ch\u1EE9c danh v\u00E0o User\"\r\n  [nzWidth]=\"700\"\r\n  (nzOnCancel)=\"closeAddJobTitleModal()\"\r\n  (nzOnOk)=\"addJobTitlesToUser()\"\r\n  nzOkText=\"Th\u00EAm\"\r\n  nzCancelText=\"H\u1EE7y\"\r\n>\r\n  <ng-container *nzModalContent>\r\n    <nz-alert\r\n      *ngIf=\"!isOneUserMultiJobTitles\"\r\n      nzType=\"info\"\r\n      nzMessage=\"Ch\u1EC9 \u0111\u01B0\u1EE3c ch\u1ECDn 1 Ch\u1EE9c danh\"\r\n      nzShowIcon\r\n      style=\"margin-bottom: 16px\"\r\n    ></nz-alert>\r\n    <!-- Search box -->\r\n    <nz-input-group [nzPrefix]=\"prefixIconSearchJobTitle\" style=\"margin-bottom: 16px\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        placeholder=\"T\u00ECm ki\u1EBFm Ch\u1EE9c danh...\"\r\n        [(ngModel)]=\"searchJobTitleText\"\r\n        (ngModelChange)=\"filterAvailableJobTitles()\"\r\n      />\r\n    </nz-input-group>\r\n    <ng-template #prefixIconSearchJobTitle>\r\n      <span nz-icon nzType=\"search\"></span>\r\n    </ng-template>\r\n\r\n    <nz-table\r\n      #addJobTitleTable\r\n      [nzData]=\"lstFilteredJobTitle\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"true\"\r\n      [nzPageSize]=\"10\"\r\n      [nzLoading]=\"isLoadingAvailableJobTitles\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th\r\n            nzWidth=\"60px\"\r\n            [nzShowCheckbox]=\"isOneUserMultiJobTitles\"\r\n            [(nzChecked)]=\"isAllJobTitleChecked\"\r\n            (nzCheckedChange)=\"onAllJobTitleChecked($event)\"\r\n            [nzIndeterminate]=\"isJobTitleIndeterminate\"\r\n          ></th>\r\n          <th nzWidth=\"150px\">M\u00E3</th>\r\n          <th>T\u00EAn</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let item of addJobTitleTable.data\">\r\n          <td>\r\n            <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onJobTitleChecked(item, $event)\"></label>\r\n          </td>\r\n          <td>{{ item.Code }}</td>\r\n          <td>{{ item.Name }}</td>\r\n        </tr>\r\n      </tbody>\r\n    </nz-table>\r\n  </ng-container>\r\n</nz-modal>\r\n" }]
         }] });
 
 class UserProfileService {
@@ -8835,7 +8836,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                     ], template: "<!-- <h3>User Profile</h3> -->\r\n<nz-tabset [nzSize]=\"'small'\" [nzType]=\"'card'\" (nzSelectedIndexChange)=\"nzSelectedIndexChange($event)\">\r\n  <nz-tab [nzTitle]=\"'\u0110\u1ED5i m\u1EADt kh\u1EA9u'\">\r\n    <form [formGroup]=\"formData\" (ngSubmit)=\"onSubmit()\" nz-form>\r\n      <div nz-row>\r\n        <div nz-col [nzSpan]=\"8\">\r\n          <nz-form-item>\r\n            <nz-form-label [nzSpan]=\"10\" [nzFor]=\"'CurrentPassword'\" nzNoColon nzLabelWrap nzRequired>\r\n              M\u1EADt kh\u1EA9u hi\u1EC7n t\u1EA1i\r\n            </nz-form-label>\r\n            <nz-form-control [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n              <nz-input-group\r\n                [nzSuffix]=\"\r\n                  !CurrentPasswordVisible ? suffixTemplateShowCurrentPassword : suffixTemplateHiddenCurrentPassword\r\n                \"\r\n              >\r\n                <input\r\n                  nz-input\r\n                  type=\"{{ CurrentPasswordType }}\"\r\n                  formControlName=\"CurrentPassword\"\r\n                  id=\"CurrentPassword\"\r\n                />\r\n              </nz-input-group>\r\n              <ng-template #suffixTemplateShowCurrentPassword>\r\n                <nz-icon\r\n                  nzType=\"eye\"\r\n                  nzTheme=\"outline\"\r\n                  nz-tooltip\r\n                  nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n                  nzTooltipPlacement=\"right\"\r\n                  (click)=\"CurrentPasswordVisible = !CurrentPasswordVisible; CurrentPasswordType = 'text'\"\r\n                />\r\n              </ng-template>\r\n              <ng-template #suffixTemplateHiddenCurrentPassword>\r\n                <nz-icon\r\n                  nzType=\"eye-invisible\"\r\n                  nzTheme=\"outline\"\r\n                  nz-tooltip\r\n                  nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n                  nzTooltipPlacement=\"right\"\r\n                  (click)=\"CurrentPasswordVisible = !CurrentPasswordVisible; CurrentPasswordType = 'password'\"\r\n                />\r\n              </ng-template>\r\n            </nz-form-control>\r\n          </nz-form-item>\r\n\r\n          <nz-form-item>\r\n            <nz-form-label [nzSpan]=\"10\" [nzFor]=\"'NewPassword'\" nzNoColon nzLabelWrap nzRequired>\r\n              M\u1EADt kh\u1EA9u m\u1EDBi\r\n            </nz-form-label>\r\n            <nz-form-control [nzErrorTip]=\"NewPasswordErrorTpl\">\r\n              <nz-input-group\r\n                [nzSuffix]=\"!NewPasswordVisible ? suffixTemplateShowNewPassword : suffixTemplateHiddenNewPassword\"\r\n              >\r\n                <input nz-input type=\"{{ NewPasswordType }}\" formControlName=\"NewPassword\" id=\"NewPassword\" />\r\n              </nz-input-group>\r\n              <ng-template #suffixTemplateShowNewPassword>\r\n                <nz-icon\r\n                  nzType=\"eye\"\r\n                  nzTheme=\"outline\"\r\n                  nz-tooltip\r\n                  nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n                  nzTooltipPlacement=\"right\"\r\n                  (click)=\"NewPasswordVisible = !NewPasswordVisible; NewPasswordType = 'text'\"\r\n                />\r\n              </ng-template>\r\n              <ng-template #suffixTemplateHiddenNewPassword>\r\n                <nz-icon\r\n                  nzType=\"eye-invisible\"\r\n                  nzTheme=\"outline\"\r\n                  nz-tooltip\r\n                  nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n                  nzTooltipPlacement=\"right\"\r\n                  (click)=\"NewPasswordVisible = !NewPasswordVisible; NewPasswordType = 'password'\"\r\n                />\r\n              </ng-template>\r\n              <ng-template #NewPasswordErrorTpl let-control>\r\n                @if (control.errors?.[\"required\"]) {\r\n                  {{ \"REQUIRED_FIELD\" | translate }}\r\n                }\r\n                @if (control.errors?.[\"minlength\"]) {\r\n                  M\u1EADt kh\u1EA9u d\u00E0i t\u1ED1i thi\u1EC3u 6 k\u00FD t\u1EF1\r\n                }\r\n              </ng-template>\r\n            </nz-form-control>\r\n          </nz-form-item>\r\n\r\n          <nz-form-item>\r\n            <nz-form-label [nzSpan]=\"10\" [nzFor]=\"'ConfirmPassword'\" nzNoColon nzLabelWrap nzRequired>\r\n              X\u00E1c nh\u1EADn m\u1EADt kh\u1EA9u m\u1EDBi\r\n            </nz-form-label>\r\n            <nz-form-control [nzErrorTip]=\"ConfirmPasswordErrorTpl\">\r\n              <nz-input-group\r\n                [nzSuffix]=\"\r\n                  !ConfirmPasswordVisible ? suffixTemplateShowConfirmPassword : suffixTemplateHiddenConfirmPassword\r\n                \"\r\n              >\r\n                <input\r\n                  nz-input\r\n                  type=\"{{ ConfirmPasswordType }}\"\r\n                  formControlName=\"ConfirmPassword\"\r\n                  id=\"ConfirmPassword\"\r\n                />\r\n              </nz-input-group>\r\n              <ng-template #suffixTemplateShowConfirmPassword>\r\n                <nz-icon\r\n                  nzType=\"eye\"\r\n                  nzTheme=\"outline\"\r\n                  nz-tooltip\r\n                  nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n                  nzTooltipPlacement=\"right\"\r\n                  (click)=\"ConfirmPasswordVisible = !ConfirmPasswordVisible; ConfirmPasswordType = 'text'\"\r\n                />\r\n              </ng-template>\r\n              <ng-template #suffixTemplateHiddenConfirmPassword>\r\n                <nz-icon\r\n                  nzType=\"eye-invisible\"\r\n                  nzTheme=\"outline\"\r\n                  nz-tooltip\r\n                  nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n                  nzTooltipPlacement=\"right\"\r\n                  (click)=\"ConfirmPasswordVisible = !ConfirmPasswordVisible; ConfirmPasswordType = 'password'\"\r\n                />\r\n              </ng-template>\r\n              <ng-template #ConfirmPasswordErrorTpl let-control>\r\n                @if (control.errors?.[\"required\"]) {\r\n                  {{ \"REQUIRED_FIELD\" | translate }}\r\n                }\r\n                @if (control.errors?.[\"passwordMismatch\"]) {\r\n                  M\u1EADt kh\u1EA9u kh\u00F4ng kh\u1EDBp\r\n                }\r\n              </ng-template>\r\n            </nz-form-control>\r\n          </nz-form-item>\r\n        </div>\r\n      </div>\r\n\r\n      <button nz-button nzType=\"primary\">\u0110\u1ED5i m\u1EADt kh\u1EA9u</button>\r\n    </form>\r\n  </nz-tab>\r\n\r\n  <nz-tab [nzTitle]=\"'Giao di\u1EC7n'\">\r\n    <div nz-row>\r\n      <extend-checkbox\r\n        nz-col\r\n        [nzSpan]=\"6\"\r\n        [label]=\"'High contrast'\"\r\n        [labelSpan]=\"0\"\r\n        [(_ngModel)]=\"isHighContrast\"\r\n        (_ngModelChange)=\"onChangeHighContrast()\"\r\n      ></extend-checkbox>\r\n\r\n      <extend-input\r\n        nz-col\r\n        [nzSpan]=\"6\"\r\n        [label]=\"'Side width'\"\r\n        [(_ngModel)]=\"sideWidth\"\r\n        (_ngModelChange)=\"onChangeSideWidth()\"\r\n      ></extend-input>\r\n    </div>\r\n\r\n    <div nz-row [nzGutter]=\"16\">\r\n      <div nz-col>\r\n        Theme color:\r\n        <nz-color-picker\r\n          nzShowText\r\n          [ngModel]=\"\r\n            profileService.userProfile[profileService.KEY_THEME_COLOR] ||\r\n            profileService.themecf[profileService.KEY_THEME_COLOR] ||\r\n            profileService.DEFAULT_THEME_COLOR\r\n          \"\r\n          (ngModelChange)=\"\r\n            profileService.updateUserProfile(profileService.KEY_THEME_COLOR, $event); profileService.loadTheme()\r\n          \"\r\n        ></nz-color-picker>\r\n      </div>\r\n    </div>\r\n\r\n    <div nz-row [nzGutter]=\"16\">\r\n      <div nz-col>\r\n        Theme menu color:\r\n        <nz-color-picker\r\n          nzShowText\r\n          [ngModel]=\"\r\n            profileService.userProfile[profileService.KEY_THEME_MENU_COLOR] ||\r\n            profileService.themecf[profileService.KEY_THEME_MENU_COLOR] ||\r\n            profileService.DEFAULT_THEME_MENU_COLOR\r\n          \"\r\n          (ngModelChange)=\"\r\n            profileService.updateUserProfile(profileService.KEY_THEME_MENU_COLOR, $event); profileService.loadTheme()\r\n          \"\r\n        ></nz-color-picker>\r\n      </div>\r\n    </div>\r\n\r\n    <div nz-row [nzGutter]=\"16\">\r\n      <div nz-col>\r\n        <button type=\"button\" nz-button nzType=\"primary\" nzDanger (click)=\"profileService.resetTheme()\">\r\n          Reset Theme\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </nz-tab>\r\n  <!-- <nz-tab [nzTitle]=\"'Tab3'\"> Tab3 </nz-tab> -->\r\n</nz-tabset>\r\n" }]
         }] });
 
-const URLs$4 = {
+const URLs$5 = {
     getById: '/api/App_Sequence/GetById',
     getAll: '/api/App_Sequence/GetAll',
     getList: '/api/App_Sequence/GetList',
@@ -8847,13 +8848,13 @@ class SequenceService extends HTTPService {
     commonService = inject(CommonService);
     getById(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$4.getById, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$5.getById, params);
     }
     getAll() {
-        return this.post(AppGlobals.apiEndpoint + URLs$4.getAll);
+        return this.post(AppGlobals.apiEndpoint + URLs$5.getAll);
     }
     getList(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$4.getList, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$5.getList, filter);
     }
     getPaging(filter) {
         return this.commonService.ESP({
@@ -8869,7 +8870,7 @@ class SequenceService extends HTTPService {
     }
     delete(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$4.delete, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$5.delete, params);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SequenceService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SequenceService, providedIn: 'root' });
@@ -8971,7 +8972,7 @@ class SequenceListComponent extends BaseComponent {
         this.getData();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SequenceListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: SequenceListComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <div nz-flex nzGap=\"small\">\r\n        <button-add (click)=\"edit(null)\"></button-add>\r\n        <button-search (click)=\"search()\"></button-search>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"data.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowSizeChanger]=\"true\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'Code' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'Code'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Code\r\n          </th>\r\n          <th nzWidth=\"75px\">Type</th>\r\n          <th nzWidth=\"75px\">Prefix</th>\r\n          <th nzWidth=\"75px\">Suffix</th>\r\n          <th nzWidth=\"75px\">Length</th>\r\n          <th nzWidth=\"75px\">Start at</th>\r\n          <th>Description</th>\r\n          <th nzWidth=\"75px\">Active</th>\r\n          <th nzWidth=\"75px\">Action</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input size=\"small\" [(_ngModel)]=\"filter.Code\"></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of table.data; track $index; let i = $index) {\r\n          <tr>\r\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n            <td class=\"link-detail\" (click)=\"edit(row)\">{{ row.Code }}</td>\r\n            <td>{{ row.Type }}</td>\r\n            <td>{{ row.Prefix }}</td>\r\n            <td>{{ row.Suffix }}</td>\r\n            <td>{{ row.Length }}</td>\r\n            <td>{{ row.SeqStartAt }}</td>\r\n            <td>{{ row.Description }}</td>\r\n            <td class=\"center\">\r\n              @if (row.IsActive) {\r\n                <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n              }\r\n            </td>\r\n            <td class=\"center\">\r\n              <icon-edit (click)=\"edit(row)\"></icon-edit>\r\n              <box [width]=\"4\"></box>\r\n              <icon-delete></icon-delete>\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-row nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "component", type: ButtonSearch, selector: "button-search" }, { kind: "component", type: ButtonAdd, selector: "button-add" }, { 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: i6$2.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: "component", type: i6$2.NzThAddOnComponent, selector: "th[nzColumnKey], th[nzSortFn], th[nzSortOrder], th[nzFilters], th[nzShowSort], th[nzShowFilter], th[nzCustomFilter]", inputs: ["nzColumnKey", "nzFilterMultiple", "nzSortOrder", "nzSortPriority", "nzSortDirections", "nzFilters", "nzSortFn", "nzFilterFn", "nzShowSort", "nzShowFilter", "nzCustomFilter"], outputs: ["nzCheckedChange", "nzSortOrderChange", "nzFilterChange"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { 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: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { 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: NzPaginationModule }, { kind: "component", type: i5$3.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: SequenceListComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <div nz-flex nzGap=\"small\">\r\n        <button-add (click)=\"edit(null)\"></button-add>\r\n        <button-search (click)=\"search()\"></button-search>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"data.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"false\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'Code' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'Code'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Code\r\n          </th>\r\n          <th nzWidth=\"75px\">Type</th>\r\n          <th nzWidth=\"75px\">Prefix</th>\r\n          <th nzWidth=\"75px\">Suffix</th>\r\n          <th nzWidth=\"75px\">Length</th>\r\n          <th nzWidth=\"75px\">Start at</th>\r\n          <th>Description</th>\r\n          <th nzWidth=\"75px\">Active</th>\r\n          <th nzWidth=\"75px\">Action</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input size=\"small\" [(_ngModel)]=\"filter.Code\"></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of table.data; track $index; let i = $index) {\r\n          <tr>\r\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n            <td class=\"link-detail\" (click)=\"edit(row)\">{{ row.Code }}</td>\r\n            <td>{{ row.Type }}</td>\r\n            <td>{{ row.Prefix }}</td>\r\n            <td>{{ row.Suffix }}</td>\r\n            <td>{{ row.Length }}</td>\r\n            <td>{{ row.SeqStartAt }}</td>\r\n            <td>{{ row.Description }}</td>\r\n            <td class=\"center\">\r\n              @if (row.IsActive) {\r\n                <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n              }\r\n            </td>\r\n            <td class=\"center\">\r\n              <icon-edit (click)=\"edit(row)\"></icon-edit>\r\n              <box [width]=\"4\"></box>\r\n              <icon-delete></icon-delete>\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-row nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "component", type: ButtonSearch, selector: "button-search" }, { kind: "component", type: ButtonAdd, selector: "button-add" }, { 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: i6$2.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: "component", type: i6$2.NzThAddOnComponent, selector: "th[nzColumnKey], th[nzSortFn], th[nzSortOrder], th[nzFilters], th[nzShowSort], th[nzShowFilter], th[nzCustomFilter]", inputs: ["nzColumnKey", "nzFilterMultiple", "nzSortOrder", "nzSortPriority", "nzSortDirections", "nzFilters", "nzSortFn", "nzFilterFn", "nzShowSort", "nzShowFilter", "nzCustomFilter"], outputs: ["nzCheckedChange", "nzSortOrderChange", "nzFilterChange"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { 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: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { 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: NzPaginationModule }, { kind: "component", type: i5$3.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SequenceListComponent, decorators: [{
             type: Component,
@@ -8988,7 +8989,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         IconDelete,
                         NzPaginationModule,
                         CommonModule,
-                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <div nz-flex nzGap=\"small\">\r\n        <button-add (click)=\"edit(null)\"></button-add>\r\n        <button-search (click)=\"search()\"></button-search>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"data.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowSizeChanger]=\"true\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'Code' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'Code'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Code\r\n          </th>\r\n          <th nzWidth=\"75px\">Type</th>\r\n          <th nzWidth=\"75px\">Prefix</th>\r\n          <th nzWidth=\"75px\">Suffix</th>\r\n          <th nzWidth=\"75px\">Length</th>\r\n          <th nzWidth=\"75px\">Start at</th>\r\n          <th>Description</th>\r\n          <th nzWidth=\"75px\">Active</th>\r\n          <th nzWidth=\"75px\">Action</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input size=\"small\" [(_ngModel)]=\"filter.Code\"></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of table.data; track $index; let i = $index) {\r\n          <tr>\r\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n            <td class=\"link-detail\" (click)=\"edit(row)\">{{ row.Code }}</td>\r\n            <td>{{ row.Type }}</td>\r\n            <td>{{ row.Prefix }}</td>\r\n            <td>{{ row.Suffix }}</td>\r\n            <td>{{ row.Length }}</td>\r\n            <td>{{ row.SeqStartAt }}</td>\r\n            <td>{{ row.Description }}</td>\r\n            <td class=\"center\">\r\n              @if (row.IsActive) {\r\n                <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n              }\r\n            </td>\r\n            <td class=\"center\">\r\n              <icon-edit (click)=\"edit(row)\"></icon-edit>\r\n              <box [width]=\"4\"></box>\r\n              <icon-delete></icon-delete>\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-row nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <div nz-flex nzGap=\"small\">\r\n        <button-add (click)=\"edit(null)\"></button-add>\r\n        <button-search (click)=\"search()\"></button-search>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"data.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"false\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'Code' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'Code'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Code\r\n          </th>\r\n          <th nzWidth=\"75px\">Type</th>\r\n          <th nzWidth=\"75px\">Prefix</th>\r\n          <th nzWidth=\"75px\">Suffix</th>\r\n          <th nzWidth=\"75px\">Length</th>\r\n          <th nzWidth=\"75px\">Start at</th>\r\n          <th>Description</th>\r\n          <th nzWidth=\"75px\">Active</th>\r\n          <th nzWidth=\"75px\">Action</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input size=\"small\" [(_ngModel)]=\"filter.Code\"></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of table.data; track $index; let i = $index) {\r\n          <tr>\r\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n            <td class=\"link-detail\" (click)=\"edit(row)\">{{ row.Code }}</td>\r\n            <td>{{ row.Type }}</td>\r\n            <td>{{ row.Prefix }}</td>\r\n            <td>{{ row.Suffix }}</td>\r\n            <td>{{ row.Length }}</td>\r\n            <td>{{ row.SeqStartAt }}</td>\r\n            <td>{{ row.Description }}</td>\r\n            <td class=\"center\">\r\n              @if (row.IsActive) {\r\n                <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n              }\r\n            </td>\r\n            <td class=\"center\">\r\n              <icon-edit (click)=\"edit(row)\"></icon-edit>\r\n              <box [width]=\"4\"></box>\r\n              <icon-delete></icon-delete>\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-row nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }] });
 
 class SequenceDetailComponent extends BaseComponent {
@@ -9096,7 +9097,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                     ], template: "<form nz-form [formGroup]=\"formData\">\r\n  <div nz-row [nzGutter]=\"[32, 16]\">\r\n    <div nz-col [nzSpan]=\"24\">\r\n      <div nz-flex [nzGap]=\"'small'\" nzJustify=\"end\">\r\n        <button-save (click)=\"save()\"></button-save>\r\n        <button-delete (click)=\"delete()\"></button-delete>\r\n        <button-back (click)=\"goback()\"></button-back>\r\n      </div>\r\n    </div>\r\n\r\n    <nz-divider style=\"margin: 8px\"></nz-divider>\r\n\r\n    <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Code\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired> M\u00E3 </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n          <input nz-input formControlName=\"Code\" id=\"Code\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Name\" nzLabelAlign=\"left\" nzNoColon=\"true\"> Lo\u1EA1i </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\">\r\n          <nz-select formControlName=\"Type\" nzAllowClear>\r\n            <nz-option nzValue=\"daily\" nzLabel=\"Daily\"></nz-option>\r\n            <nz-option nzValue=\"monthly\" nzLabel=\"Monthly\"></nz-option>\r\n            <nz-option nzValue=\"yearly\" nzLabel=\"Yearly\"></nz-option>\r\n          </nz-select>\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Prefix\" nzLabelAlign=\"left\" nzNoColon=\"true\"> Prefix </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\">\r\n          <input nz-input formControlName=\"Prefix\" id=\"Prefix\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Suffix\" nzLabelAlign=\"left\" nzNoColon=\"true\"> Suffix </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\">\r\n          <input nz-input formControlName=\"Suffix\" id=\"Suffix\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <div nz-row>\r\n        <div nz-col [nzSpan]=\"8\"></div>\r\n        <div nz-col [nzSpan]=\"16\">\r\n          <label nz-checkbox formControlName=\"IsActive\">Active</label>\r\n        </div>\r\n      </div>\r\n\r\n      <box [height]=\"16\"></box>\r\n\r\n      <nz-alert\r\n        nzShowIcon\r\n        nzType=\"info\"\r\n        nzMessage=\"\uD83D\uDCA1 H\u01B0\u1EDBng d\u1EABn Prefix, Suffix\"\r\n        [nzDescription]=\"descriptionTemplate2\"\r\n      ></nz-alert>\r\n      <ng-template #descriptionTemplate2>\r\n        <div>{{ \"{ORG_CODE}\" }}</div>\r\n        <div>{{ \"{yyyy}\" }}</div>\r\n        <div>{{ \"{yy}\" }}</div>\r\n      </ng-template>\r\n    </div>\r\n\r\n    <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Length\" nzLabelAlign=\"left\" nzNoColon=\"true\"> Length </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\">\r\n          <nz-input-number id=\"Length\" formControlName=\"Length\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"SeqStartAt\" nzLabelAlign=\"left\" nzNoColon=\"true\"> SeqStartAt </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\">\r\n          <nz-input-number id=\"SeqStartAt\" formControlName=\"SeqStartAt\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <extend-textarea [label]=\"'M\u00F4 t\u1EA3'\" [formData]=\"formData\" [controlName]=\"'Description'\"></extend-textarea>\r\n    </div>\r\n\r\n    <div nz-col nzSpan=\"24\"></div>\r\n  </div>\r\n</form>\r\n" }]
         }] });
 
-const URLs$3 = {
+const URLs$4 = {
     getPaging: '/api/Cache/paging',
     remove: '/api/Cache/remove',
     removeStartWith: '/api/Cache/remove-start-with',
@@ -9106,22 +9107,22 @@ const URLs$3 = {
 };
 class CacheService extends HTTPService {
     getPaging(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$3.getPaging, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$4.getPaging, filter);
     }
     getValue(key) {
         const params = new HttpParams().append('key', key);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$3.getValue, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$4.getValue, params);
     }
     remove(key) {
         const params = new HttpParams().append('key', key);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$3.remove, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$4.remove, params);
     }
     removeStartWith(prefix) {
         const params = new HttpParams().append('prefix', prefix);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$3.removeStartWith, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$4.removeStartWith, params);
     }
     clearAll() {
-        return this.post(AppGlobals.apiEndpoint + URLs$3.clearAll);
+        return this.post(AppGlobals.apiEndpoint + URLs$4.clearAll);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: CacheService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: CacheService, providedIn: 'root' });
@@ -9625,7 +9626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
             args: [{ imports: [NzButtonModule], template: "<div style=\"overflow: auto\">\r\n  <pre>\r\n      {{ _data }}\r\n  </pre>\r\n</div>\r\n<button nz-button nzType=\"primary\" (click)=\"load()\" style=\"position: fixed; right: 80px; bottom: 45px\">Reload</button>\r\n" }]
         }] });
 
-const URLs$2 = {
+const URLs$3 = {
     getById: '/api/App_Log/GetById',
     getAll: '/api/App_Log/GetAll',
     getList: '/api/App_Log/GetList',
@@ -9637,13 +9638,13 @@ class LogAppService extends HTTPService {
     commonService = inject(CommonService);
     getById(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$2.getById, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$3.getById, params);
     }
     getAll() {
-        return this.post(AppGlobals.apiEndpoint + URLs$2.getAll);
+        return this.post(AppGlobals.apiEndpoint + URLs$3.getAll);
     }
     getList(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$2.getList, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$3.getList, filter);
     }
     getPaging(filter) {
         return this.commonService.ESP({
@@ -9652,11 +9653,11 @@ class LogAppService extends HTTPService {
         });
     }
     addOrEdit(obj) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$2.addOrEdit, obj);
+        return this.postData(AppGlobals.apiEndpoint + URLs$3.addOrEdit, obj);
     }
     delete(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$2.delete, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$3.delete, params);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LogAppService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LogAppService, providedIn: 'root' });
@@ -9800,7 +9801,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
             args: [{ selector: 'app-version', imports: [NzButtonModule, ButtonReload], template: "<div style=\"padding: 16px\">\r\n  <button nz-button nzType=\"primary\" (click)=\"refresh()\">Refresh</button>&nbsp;\r\n\r\n  <pre>\r\nFrontend Client Version: {{ VscService.feClientVersion }}\r\nFrontend Server Version: {{ VscService.feServerVersion }}\r\n\r\nBackend Version: {{ JSON.stringify(VscService.beVersion, null, 2) }}\r\n\r\n\r\n</pre\r\n  >\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: VscService }] });
 
-const URLs$1 = {
+const URLs$2 = {
     systemResourseInfo: '/api/monitor/SystemResourseInfo',
 };
 class MonitorService extends HTTPService {
@@ -9812,7 +9813,7 @@ class MonitorService extends HTTPService {
         });
     }
     getResourseInfo() {
-        return this.get(AppGlobals.apiEndpoint + URLs$1.systemResourseInfo, true);
+        return this.get(AppGlobals.apiEndpoint + URLs$2.systemResourseInfo, true);
     }
     getLstDbMonitorType() {
         return this.cms.ESP({
@@ -10216,6 +10217,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                     ], providers: [DatePipe], template: "<div nz-row nzGutter=\"32\">\r\n  <div nz-col nzSpan=\"24\" style=\"display: flex; justify-content: flex-end; gap: 8px\">\r\n    <input type=\"file\" #fileInput style=\"display: none\" (change)=\"onFileSelected($event)\" />\r\n    <button nz-button nzType=\"primary\" (click)=\"getListFile()\" nz-tooltip=\"Reload\" nzTooltipPlacement=\"bottom\">\r\n      <i nz-icon nzType=\"reload\"></i>\r\n    </button>\r\n    <button nz-button nzType=\"primary\" (click)=\"fileInput.click()\" nz-tooltip=\"Upload\" nzTooltipPlacement=\"bottom\">\r\n      <i nz-icon nzType=\"upload\"></i>\r\n    </button>\r\n    <button\r\n      nz-button\r\n      nzType=\"primary\"\r\n      (click)=\"createFolder()\"\r\n      nz-tooltip=\"New Folder\"\r\n      nzTooltipPlacement=\"bottomRight\"\r\n    >\r\n      <i nz-icon nzType=\"folder-add\"></i>\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<div nz-row nzGutter=\"32\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <strong>{{ currentPath }}</strong>\r\n  </div>\r\n</div>\r\n\r\n<nz-table #fileTable [nzData]=\"fileList\" [nzLoading]=\"isLoading\" nzSize=\"small\" nzBordered>\r\n  <thead>\r\n    <tr>\r\n      <th nzWidth=\"50px\" nzAlign=\"center\">Type</th>\r\n      <th>Name</th>\r\n      <!-- <th>Path</th> -->\r\n      <th nzWidth=\"100px\">Size</th>\r\n      <th nzWidth=\"180px\">Modified Date</th>\r\n      <th nzWidth=\"100px\" nzAlign=\"right\">Action</th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <tr *ngIf=\"canGoUp()\" (dblclick)=\"goUpLevel()\" style=\"cursor: pointer\">\r\n      <td nzAlign=\"center\">\r\n        <i nz-icon nzType=\"folder\" nzTheme=\"fill\" [style.color]=\"'#faad14'\"></i>\r\n      </td>\r\n      <td><strong>..</strong></td>\r\n      <!-- <td></td> -->\r\n      <td></td>\r\n      <td></td>\r\n      <td nzAlign=\"center\"></td>\r\n    </tr>\r\n\r\n    @for (item of fileTable.data; track $index) {\r\n      <tr\r\n        [class.selected]=\"item == selectedRow\"\r\n        (click)=\"selectedRow = item\"\r\n        (dblclick)=\"openItem(item)\"\r\n        style=\"cursor: pointer\"\r\n      >\r\n        <td nzAlign=\"center\">\r\n          <i\r\n            nz-icon\r\n            [nzType]=\"item.isdir ? 'folder' : 'file'\"\r\n            [nzTheme]=\"item.isdir ? 'fill' : 'outline'\"\r\n            [style.color]=\"item.isdir ? '#faad14' : '#1890ff'\"\r\n          ></i>\r\n        </td>\r\n        <td>\r\n          <strong>{{ item.name }}</strong>\r\n        </td>\r\n        <!-- <td>{{ item.path }}</td> -->\r\n        <td nzAlign=\"right\">{{ item.isdir ? \"-\" : formatBytes(item.additional?.size) }}</td>\r\n        <td nzAlign=\"right\">{{ formatDate(item.additional?.time?.mtime) }}</td>\r\n        <td nzAlign=\"right\">\r\n          <button\r\n            *ngIf=\"!item.isdir\"\r\n            nz-button\r\n            nzType=\"link\"\r\n            nzSize=\"small\"\r\n            (click)=\"downloadFile(item); $event.stopPropagation()\"\r\n          >\r\n            <nz-icon nzType=\"download\" nzTheme=\"outline\"></nz-icon>\r\n          </button>\r\n          <button nz-button nzType=\"link\" nzDanger nzSize=\"small\" (click)=\"deleteItem(item); $event.stopPropagation()\">\r\n            <nz-icon nzType=\"delete\" nzTheme=\"outline\"></nz-icon>\r\n          </button>\r\n          <button nz-button nzType=\"link\" nzSize=\"small\" (click)=\"renameItem(item); $event.stopPropagation()\">\r\n            <nz-icon nzType=\"retweet\" nzTheme=\"outline\" />\r\n          </button>\r\n        </td>\r\n      </tr>\r\n    }\r\n  </tbody>\r\n</nz-table>\r\n" }]
         }] });
 
+class RegisterComponent extends BaseComponent {
+    fb = inject(FormBuilder);
+    authService = inject(AuthService);
+    orgService = inject(OrgService);
+    settingService = inject(SettingService$1);
+    vscService = inject(VscService);
+    loadingService = inject(LoadingService);
+    formData;
+    PasswordType = 'password';
+    PasswordVisible = false;
+    ConfirmPasswordType = 'password';
+    ConfirmPasswordVisible = false;
+    lstOrg = [];
+    isOneUserMultiOrgs = false;
+    ngOnInit() {
+        this.formData = this.fb.group({
+            FullName: [null, [Validators.required]],
+            UserName: [null, [Validators.required]],
+            Password: ['', [Validators.required, Validators.minLength(6)]],
+            ConfirmPassword: ['', [Validators.required, this.passwordMatchValidator()]],
+        });
+    }
+    passwordMatchValidator() {
+        return (control) => {
+            const password = this.formData?.get('Password')?.value;
+            const retypePassword = control.value;
+            if (password && retypePassword && password !== retypePassword) {
+                return { passwordMismatch: true };
+            }
+            return null;
+        };
+    }
+    doregister() {
+        if (this.formData.valid) {
+            this.authService.signUp(this.formData.getRawValue());
+        }
+        else {
+            this.touchControls(this.formData);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RegisterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RegisterComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div nz-row nzJustify=\"center\">\r\n  <div class=\"form-container\">\r\n    <form nz-flex nzVertical=\"true\" nz-form [formGroup]=\"formData\" class=\"login-form\" (ngSubmit)=\"doregister()\">\r\n      <nz-form-item>\r\n        <nz-form-control nzErrorTip=\"{{ 'REQUIRED' | translate }}\">\r\n          <nz-input-group nzPrefixIcon=\"user\">\r\n            <input type=\"text\" nz-input formControlName=\"FullName\" placeholder=\"H\u1ECD t\u00EAn\" />\r\n          </nz-input-group>\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n      <nz-form-item>\r\n        <nz-form-control nzErrorTip=\"{{ 'REQUIRED' | translate }}\">\r\n          <nz-input-group nzPrefixIcon=\"user\">\r\n            <input type=\"text\" nz-input formControlName=\"UserName\" placeholder=\"T\u00EAn \u0111\u0103ng nh\u1EADp\" />\r\n          </nz-input-group>\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <nz-form-item>\r\n        <nz-form-control [nzErrorTip]=\"PasswordErrorTpl\">\r\n          <nz-input-group\r\n            nzPrefixIcon=\"lock\"\r\n            [nzSuffix]=\"!PasswordVisible ? suffixTemplateShowPassword : suffixTemplateHiddenPassword\"\r\n          >\r\n            <input nz-input type=\"{{ PasswordType }}\" formControlName=\"Password\" id=\"Password\" placeholder=\"M\u1EADt kh\u1EA9u\" />\r\n          </nz-input-group>\r\n          <ng-template #suffixTemplateShowPassword>\r\n            <nz-icon\r\n              nzType=\"eye\"\r\n              nzTheme=\"outline\"\r\n              nz-tooltip\r\n              nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n              nzTooltipPlacement=\"right\"\r\n              (click)=\"PasswordVisible = !PasswordVisible; PasswordType = 'text'\"\r\n            />\r\n          </ng-template>\r\n          <ng-template #suffixTemplateHiddenPassword>\r\n            <nz-icon\r\n              nzType=\"eye-invisible\"\r\n              nzTheme=\"outline\"\r\n              nz-tooltip\r\n              nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n              nzTooltipPlacement=\"right\"\r\n              (click)=\"PasswordVisible = !PasswordVisible; PasswordType = 'password'\"\r\n            />\r\n          </ng-template>\r\n          <ng-template #PasswordErrorTpl let-control>\r\n            @if (control.errors?.[\"required\"]) {\r\n              {{ \"REQUIRED_FIELD\" | translate }}\r\n            }\r\n            @if (control.errors?.[\"minlength\"]) {\r\n              M\u1EADt kh\u1EA9u d\u00E0i t\u1ED1i thi\u1EC3u 6 k\u00FD t\u1EF1\r\n            }\r\n          </ng-template>\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <nz-form-item>\r\n        <nz-form-control [nzErrorTip]=\"ConfirmPasswordErrorTpl\">\r\n          <nz-input-group\r\n            nzPrefixIcon=\"lock\"\r\n            [nzSuffix]=\"\r\n              !ConfirmPasswordVisible ? suffixTemplateShowConfirmPassword : suffixTemplateHiddenConfirmPassword\r\n            \"\r\n          >\r\n            <input\r\n              nz-input\r\n              type=\"{{ ConfirmPasswordType }}\"\r\n              placeholder=\"X\u00E1c nh\u1EADn m\u1EADt kh\u1EA9u\"\r\n              formControlName=\"ConfirmPassword\"\r\n              id=\"ConfirmPassword\"\r\n            />\r\n          </nz-input-group>\r\n          <ng-template #suffixTemplateShowConfirmPassword>\r\n            <nz-icon\r\n              nzType=\"eye\"\r\n              nzTheme=\"outline\"\r\n              nz-tooltip\r\n              nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n              nzTooltipPlacement=\"right\"\r\n              (click)=\"ConfirmPasswordVisible = !ConfirmPasswordVisible; ConfirmPasswordType = 'text'\"\r\n            />\r\n          </ng-template>\r\n          <ng-template #suffixTemplateHiddenConfirmPassword>\r\n            <nz-icon\r\n              nzType=\"eye-invisible\"\r\n              nzTheme=\"outline\"\r\n              nz-tooltip\r\n              nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n              nzTooltipPlacement=\"right\"\r\n              (click)=\"ConfirmPasswordVisible = !ConfirmPasswordVisible; ConfirmPasswordType = 'password'\"\r\n            />\r\n          </ng-template>\r\n          <ng-template #ConfirmPasswordErrorTpl let-control>\r\n            @if (control.errors?.[\"required\"]) {\r\n              {{ \"REQUIRED_FIELD\" | translate }}\r\n            }\r\n            @if (control.errors?.[\"passwordMismatch\"]) {\r\n              M\u1EADt kh\u1EA9u kh\u00F4ng kh\u1EDBp\r\n            }\r\n          </ng-template>\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <div nz-flex nzVertical=\"true\" nzGap=\"4px\">\r\n        <button nz-button [nzType]=\"'primary'\" nzBlock [nzLoading]=\"loadingService.isLoading\">\u0110\u0103ng k\u00FD</button>\r\n        <!-- <nz-form-item nzJustify=\"end\">\r\n          <nz-switch formControlName=\"langSwitch\" class=\"nz-switch-both-active-color\" nzCheckedChildren=\"VN\"\r\n            nzUnCheckedChildren=\"EN\" (ngModelChange)=\"changeLanguage($event)\"></nz-switch>\r\n        </nz-form-item> -->\r\n      </div>\r\n    </form>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;justify-content:center;align-items:center;height:80vh}.form-container{width:300px}\n"], dependencies: [{ 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: 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: "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.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i5$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i5$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i5$1.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { 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: NzButtonModule }, { kind: "component", type: i2$3.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.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzSwitchModule }, { 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: NzSelectModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RegisterComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        TranslateModule,
+                        NzFormModule,
+                        NzInputModule,
+                        NzIconModule,
+                        NzToolTipModule,
+                        NzButtonModule,
+                        NzSwitchModule,
+                        NzFlexModule,
+                        NzSelectModule,
+                    ], template: "<div nz-row nzJustify=\"center\">\r\n  <div class=\"form-container\">\r\n    <form nz-flex nzVertical=\"true\" nz-form [formGroup]=\"formData\" class=\"login-form\" (ngSubmit)=\"doregister()\">\r\n      <nz-form-item>\r\n        <nz-form-control nzErrorTip=\"{{ 'REQUIRED' | translate }}\">\r\n          <nz-input-group nzPrefixIcon=\"user\">\r\n            <input type=\"text\" nz-input formControlName=\"FullName\" placeholder=\"H\u1ECD t\u00EAn\" />\r\n          </nz-input-group>\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n      <nz-form-item>\r\n        <nz-form-control nzErrorTip=\"{{ 'REQUIRED' | translate }}\">\r\n          <nz-input-group nzPrefixIcon=\"user\">\r\n            <input type=\"text\" nz-input formControlName=\"UserName\" placeholder=\"T\u00EAn \u0111\u0103ng nh\u1EADp\" />\r\n          </nz-input-group>\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <nz-form-item>\r\n        <nz-form-control [nzErrorTip]=\"PasswordErrorTpl\">\r\n          <nz-input-group\r\n            nzPrefixIcon=\"lock\"\r\n            [nzSuffix]=\"!PasswordVisible ? suffixTemplateShowPassword : suffixTemplateHiddenPassword\"\r\n          >\r\n            <input nz-input type=\"{{ PasswordType }}\" formControlName=\"Password\" id=\"Password\" placeholder=\"M\u1EADt kh\u1EA9u\" />\r\n          </nz-input-group>\r\n          <ng-template #suffixTemplateShowPassword>\r\n            <nz-icon\r\n              nzType=\"eye\"\r\n              nzTheme=\"outline\"\r\n              nz-tooltip\r\n              nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n              nzTooltipPlacement=\"right\"\r\n              (click)=\"PasswordVisible = !PasswordVisible; PasswordType = 'text'\"\r\n            />\r\n          </ng-template>\r\n          <ng-template #suffixTemplateHiddenPassword>\r\n            <nz-icon\r\n              nzType=\"eye-invisible\"\r\n              nzTheme=\"outline\"\r\n              nz-tooltip\r\n              nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n              nzTooltipPlacement=\"right\"\r\n              (click)=\"PasswordVisible = !PasswordVisible; PasswordType = 'password'\"\r\n            />\r\n          </ng-template>\r\n          <ng-template #PasswordErrorTpl let-control>\r\n            @if (control.errors?.[\"required\"]) {\r\n              {{ \"REQUIRED_FIELD\" | translate }}\r\n            }\r\n            @if (control.errors?.[\"minlength\"]) {\r\n              M\u1EADt kh\u1EA9u d\u00E0i t\u1ED1i thi\u1EC3u 6 k\u00FD t\u1EF1\r\n            }\r\n          </ng-template>\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <nz-form-item>\r\n        <nz-form-control [nzErrorTip]=\"ConfirmPasswordErrorTpl\">\r\n          <nz-input-group\r\n            nzPrefixIcon=\"lock\"\r\n            [nzSuffix]=\"\r\n              !ConfirmPasswordVisible ? suffixTemplateShowConfirmPassword : suffixTemplateHiddenConfirmPassword\r\n            \"\r\n          >\r\n            <input\r\n              nz-input\r\n              type=\"{{ ConfirmPasswordType }}\"\r\n              placeholder=\"X\u00E1c nh\u1EADn m\u1EADt kh\u1EA9u\"\r\n              formControlName=\"ConfirmPassword\"\r\n              id=\"ConfirmPassword\"\r\n            />\r\n          </nz-input-group>\r\n          <ng-template #suffixTemplateShowConfirmPassword>\r\n            <nz-icon\r\n              nzType=\"eye\"\r\n              nzTheme=\"outline\"\r\n              nz-tooltip\r\n              nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n              nzTooltipPlacement=\"right\"\r\n              (click)=\"ConfirmPasswordVisible = !ConfirmPasswordVisible; ConfirmPasswordType = 'text'\"\r\n            />\r\n          </ng-template>\r\n          <ng-template #suffixTemplateHiddenConfirmPassword>\r\n            <nz-icon\r\n              nzType=\"eye-invisible\"\r\n              nzTheme=\"outline\"\r\n              nz-tooltip\r\n              nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n              nzTooltipPlacement=\"right\"\r\n              (click)=\"ConfirmPasswordVisible = !ConfirmPasswordVisible; ConfirmPasswordType = 'password'\"\r\n            />\r\n          </ng-template>\r\n          <ng-template #ConfirmPasswordErrorTpl let-control>\r\n            @if (control.errors?.[\"required\"]) {\r\n              {{ \"REQUIRED_FIELD\" | translate }}\r\n            }\r\n            @if (control.errors?.[\"passwordMismatch\"]) {\r\n              M\u1EADt kh\u1EA9u kh\u00F4ng kh\u1EDBp\r\n            }\r\n          </ng-template>\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <div nz-flex nzVertical=\"true\" nzGap=\"4px\">\r\n        <button nz-button [nzType]=\"'primary'\" nzBlock [nzLoading]=\"loadingService.isLoading\">\u0110\u0103ng k\u00FD</button>\r\n        <!-- <nz-form-item nzJustify=\"end\">\r\n          <nz-switch formControlName=\"langSwitch\" class=\"nz-switch-both-active-color\" nzCheckedChildren=\"VN\"\r\n            nzUnCheckedChildren=\"EN\" (ngModelChange)=\"changeLanguage($event)\"></nz-switch>\r\n        </nz-form-item> -->\r\n      </div>\r\n    </form>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;justify-content:center;align-items:center;height:80vh}.form-container{width:300px}\n"] }]
+        }] });
+
 class App_Dic_Domain {
     // #region properties
     App_Dic_Domain_Id;
@@ -10297,7 +10358,7 @@ class FileFilter extends GridFilter {
     }
 }
 
-const URLs = {
+const URLs$1 = {
     getById: '/api/App_MailTemplate/GetById',
     getAll: '/api/App_MailTemplate/GetAll',
     getList: '/api/App_MailTemplate/GetList',
@@ -10311,7 +10372,7 @@ class MailTemplateService extends HTTPService {
     cmservice = inject(CommonService);
     getById(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs.getById, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$1.getById, params);
     }
     getAll() {
         return this.cmservice.ESP({
@@ -10319,7 +10380,7 @@ class MailTemplateService extends HTTPService {
         });
     }
     getList(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs.getList, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$1.getList, filter);
     }
     getPaging(filter) {
         return this.cmservice.ESP({
@@ -10328,11 +10389,11 @@ class MailTemplateService extends HTTPService {
         });
     }
     addOrEdit(obj) {
-        return this.postData(AppGlobals.apiEndpoint + URLs.addOrEdit, obj);
+        return this.postData(AppGlobals.apiEndpoint + URLs$1.addOrEdit, obj);
     }
     delete(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs.delete, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$1.delete, params);
     }
     getSettingsByTemplateId(templateId) {
         return this.cmservice.ESP({
@@ -10341,13 +10402,13 @@ class MailTemplateService extends HTTPService {
         });
     }
     sendTestEmail(payload) {
-        return this.postData(AppGlobals.apiEndpoint + URLs.sendTestEmail, payload);
+        return this.postData(AppGlobals.apiEndpoint + URLs$1.sendTestEmail, payload);
     }
     testFillData(id) {
         return this.post(AppGlobals.apiEndpoint + '/api/App_MailTemplate/testFillData?id=' + id);
     }
     cronJobScheduler_RefreshJobs() {
-        return this.post(AppGlobals.apiEndpoint + URLs.cronJobScheduler_RefreshJobs);
+        return this.post(AppGlobals.apiEndpoint + URLs$1.cronJobScheduler_RefreshJobs);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MailTemplateService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MailTemplateService, providedIn: 'root' });
@@ -10368,7 +10429,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
 //   AutoFocusDirective,
 // } from '@brggroup/share-lib';
 //#region modal
-class WF_Template {
+let WF_Template$1 = class WF_Template {
     WF_Template_Id;
     App_Org_Id;
     CreatedDate;
@@ -10398,8 +10459,8 @@ class WF_Template {
         this.TemplatePrint = obj.TemplatePrint || '';
         this.ApplyTo = obj.ApplyTo || '';
     }
-}
-class WF_TemplateStage {
+};
+let WF_TemplateStage$1 = class WF_TemplateStage {
     WF_TemplateStage_Id;
     App_Org_Id;
     CreatedDate;
@@ -10435,8 +10496,8 @@ class WF_TemplateStage {
         this.IsRequireUser = obj.IsRequireUser || false;
         this.IsTempId = obj.IsTempId || false;
     }
-}
-class WF_TemplateStageAction {
+};
+let WF_TemplateStageAction$1 = class WF_TemplateStageAction {
     WF_TemplateStageAction_Id;
     App_Org_Id;
     CreatedDate;
@@ -10497,8 +10558,8 @@ class WF_TemplateStageAction {
         this.IsTempId = obj.IsTempId || false;
         this.actionRule = new ActionRule(obj.actionRule);
     }
-}
-class WF_TemplateActionRef {
+};
+let WF_TemplateActionRef$1 = class WF_TemplateActionRef {
     WF_TemplateActionRef_Id;
     App_Org_Id;
     CreatedDate;
@@ -10526,8 +10587,8 @@ class WF_TemplateActionRef {
         this.To_WF_TemplateStageAction_Id = obj.To_WF_TemplateStageAction_Id || null;
         this.TemplateMail = obj.TemplateMail || '';
     }
-}
-class Workflow extends WF_Template {
+};
+class Workflow extends WF_Template$1 {
     lstTemplateType;
     lstTemplatePrint;
     lstStageStatus;
@@ -10564,7 +10625,7 @@ class WorkflowEditorOption {
 /**
  * STAGE
  */
-class WorkflowStage extends WF_TemplateStage {
+class WorkflowStage extends WF_TemplateStage$1 {
     editorOption = new WorkflowStageEditorOption();
     constructor(obj) {
         obj = obj || {};
@@ -10588,7 +10649,7 @@ class WorkflowStageEditorOption {
 /**
  * Action
  */
-class WorkflowAction extends WF_TemplateStageAction {
+class WorkflowAction extends WF_TemplateStageAction$1 {
     FromSide;
     ToSide;
     allowBack; // true = 2 đầu, false/undefined = 1 đầu
@@ -10627,7 +10688,7 @@ class WorkflowAction extends WF_TemplateStageAction {
         this.editorOption = new WorkflowActionEditorOption(obj.editorOption);
     }
 }
-class WorkflowActionRef extends WF_TemplateActionRef {
+class WorkflowActionRef extends WF_TemplateActionRef$1 {
 }
 class WorkflowActionEditorOption {
     points;
@@ -10689,6 +10750,8 @@ class WF_TransitionRuleLine {
     WF_TemplateStageAction_Id;
     RuleType;
     StoreToExec;
+    App_MailTemplate_Id;
+    EmailTo;
     constructor(obj) {
         obj = obj || {};
         this.WF_TransitionRuleLine_Id = obj.WF_TransitionRuleLine_Id || null;
@@ -10704,6 +10767,8 @@ class WF_TransitionRuleLine {
         this.WF_TemplateStageAction_Id = obj.WF_TemplateStageAction_Id || null;
         this.RuleType = obj.RuleType || '';
         this.StoreToExec = obj.StoreToExec || '';
+        this.App_MailTemplate_Id = obj.App_MailTemplate_Id || '';
+        this.EmailTo = obj.EmailTo || '';
     }
 }
 class ActionRule extends WF_TransitionRule {
@@ -12352,7 +12417,7 @@ class WorkflowEditorComponent extends BaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WorkflowEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: WorkflowEditorComponent, isStandalone: true, selector: "app-workflow-editor", inputs: { lstOrg: "lstOrg", lstRole: "lstRole", lstEmailTemplate: "lstEmailTemplate" }, outputs: { onSave: "onSave", onDeleteStage: "onDeleteStage", onDeleteAction: "onDeleteAction", onDeleteRule: "onDeleteRule", onDeleteRuleLine: "onDeleteRuleLine", 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  #canvasRef\r\n  class=\"workflow-canvas\"\r\n  [class.connecting]=\"!!connectingFrom\"\r\n  [class.dragging-point]=\"!!draggingPoint\"\r\n  [style.width.px]=\"getCanvasWidth()\"\r\n  [style.height.px]=\"getCanvasHeight()\"\r\n  (mousedown)=\"onMouseDownCanvas($event)\"\r\n  (mousemove)=\"onMouseMoveCanvas($event)\"\r\n  (mouseup)=\"onMouseUpCanvas($event)\"\r\n  (click)=\"onClickCanvas($event)\"\r\n>\r\n  <!-- \r\n\r\n  [style.width.px]=\"getCanvasWidth()\"\r\n  [style.height.px]=\"getCanvasHeight()\" \r\n\r\n  [style.width.px]=\"CANVAS_WIDTH\"\r\n  [style.height.px]=\"CANVAS_HEIGHT\"\r\n\r\n  style=\"width: 100%; height: calc(100vh - 120px)\"\r\n  \r\n  -->\r\n\r\n  <div class=\"toolbar\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Editor setting\" (click)=\"settingVisible = true\">\r\n      <nz-icon nzType=\"setting\"></nz-icon>\r\n    </button>\r\n\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Infomation\" (click)=\"infoVisible = true\">\r\n      <nz-icon nzType=\"info-circle\"></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Template setting\" (click)=\"drawTemplateVisibel = true\">\r\n      <nz-icon nzType=\"setting\"></nz-icon> T\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <button nz-button nzSize=\"small\" nzDanger [nzLoading]=\"!ready\" nz-tooltip=\"Save (Ctrl + S)\" (click)=\"save()\">\r\n      <nz-icon nzType=\"save\"></nz-icon>\r\n    </button>\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Add stage\" (click)=\"addStage()\">\r\n      <nz-icon nzType=\"plus\" class=\"color-primary\"></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      [nzType]=\"isMoveMode ? 'primary' : 'default'\"\r\n      nz-tooltip=\"Move mode\"\r\n      (click)=\"isMoveMode = true\"\r\n    >\r\n      <nz-icon><img src=\"/assets/icon/hand-palm.png\" width=\"19\" height=\"19\" /></nz-icon>\r\n    </button>\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      [nzType]=\"!isMoveMode ? 'primary' : 'default'\"\r\n      nz-tooltip=\"Select mode\"\r\n      (click)=\"isMoveMode = false\"\r\n    >\r\n      <nz-icon><img src=\"/assets/icon/cursor.png\" width=\"19\" height=\"19\" /></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <!-- UNDO / REDO -->\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      nzType=\"default\"\r\n      [disabled]=\"undoStack.length === 0\"\r\n      nz-tooltip=\"Undo\"\r\n      (click)=\"undo()\"\r\n    >\r\n      <nz-icon nzType=\"undo\"></nz-icon>\r\n    </button>\r\n\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      nzType=\"default\"\r\n      [disabled]=\"redoStack.length === 0\"\r\n      nz-tooltip=\"Redo\"\r\n      (click)=\"redo()\"\r\n    >\r\n      <nz-icon nzType=\"redo\"></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <!-- ALIGN -->\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignLeft()\">\u27F8</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignCenter()\">\u2261</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignRight()\">\u27F9</button>\r\n\r\n    <span class=\"divider\"></span>\r\n\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignTop()\">\u21D1</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignMiddle()\">\u2550</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignBottom()\">\u21D3</button>\r\n\r\n    <span class=\"divider\"></span>\r\n\r\n    <!-- DISTRIBUTE -->\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeHorizontal()\">\r\n      \u21C4\r\n    </button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeVertical()\">\u21C5</button>\r\n  </div>\r\n\r\n  <div\r\n    class=\"canvas-content\"\r\n    [class.panning]=\"isMoveMode\"\r\n    [style.transform]=\"'translate(' + template.editorOption.panX + 'px,' + template.editorOption.panY + 'px)'\"\r\n  >\r\n    <!-- GRID -->\r\n    <div *ngIf=\"wfcSetting.ShowGrid\" class=\"grid-layer\"></div>\r\n\r\n    <!-- <div class=\"zoom-toolbar\">\r\n      <button nz-button nzSize=\"small\" (click)=\"zoomOut()\">\u2212</button>\r\n      <span>{{ zoom * 100 | number: \"1.0-0\" }}%</span>\r\n      <button nz-button nzSize=\"small\" (click)=\"zoomIn()\">+</button>\r\n    </div> -->\r\n\r\n    <!-- SVG EDGES -->\r\n    <svg #svg class=\"edges-layer\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\">\r\n      <g [attr.transform]=\"svgTransform\">\r\n        <!-- DEFS -->\r\n        <defs>\r\n          <!-- glow effect -->\r\n          <filter id=\"edge-glow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\r\n            <feGaussianBlur stdDeviation=\"2\" result=\"blur\" />\r\n            <feMerge>\r\n              <feMergeNode in=\"blur\" />\r\n              <feMergeNode in=\"SourceGraphic\" />\r\n            </feMerge>\r\n          </filter>\r\n\r\n          <!-- arrow markers -->\r\n          <marker\r\n            id=\"arrow-blue\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            refX=\"10\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"blue\" d=\"M0,0 L10,5 L0,10\"></path>\r\n          </marker>\r\n\r\n          <marker\r\n            id=\"arrow-red\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            refX=\"10\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"red\" d=\"M0,0 L10,5 L0,10\"></path>\r\n          </marker>\r\n\r\n          <marker\r\n            id=\"arrow-blue-start\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            viewBox=\"0 0 10 10\"\r\n            refX=\"0\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"blue\" d=\"M10,0 L0,5 L10,10\"></path>\r\n          </marker>\r\n\r\n          <marker\r\n            id=\"arrow-red-start\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            viewBox=\"0 0 10 10\"\r\n            refX=\"0\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"red\" d=\"M10,0 L0,5 L10,10\"></path>\r\n          </marker>\r\n        </defs>\r\n\r\n        <!-- EDGES B\u00CCNH TH\u01AF\u1EDCNG -->\r\n        <ng-container *ngFor=\"let e of normalEdges; let i = index\">\r\n          <path\r\n            class=\"edge\"\r\n            [attr.id]=\"'edge-path-' + i\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            marker-end=\"url(#arrow-blue)\"\r\n            [attr.marker-start]=\"e.allowBack ? 'url(#arrow-blue-start)' : ''\"\r\n          ></path>\r\n\r\n          <path\r\n            class=\"edge-hit\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            (mouseenter)=\"onMouseEnterEdge(e)\"\r\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\r\n            (click)=\"onClickEdge(e, $event)\"\r\n          ></path>\r\n\r\n          <!-- LABEL -->\r\n          <!-- text b\u00E1m theo line -->\r\n          <!-- \r\n          <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\r\n            <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.ActionText }}\r\n            </textPath>\r\n          </text> \r\n          \r\n          <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\r\n            <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.labelBack }}\r\n            </textPath>\r\n          </text>\r\n          -->\r\n\r\n          <!-- text th\u1EB3ng n\u1EB1m ngang -->\r\n          <text\r\n            *ngIf=\"e.ActionText\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.ActionText }}\r\n          </text>\r\n\r\n          <text\r\n            *ngIf=\"e.allowBack && e.labelBack\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.labelBack }}\r\n          </text>\r\n        </ng-container>\r\n\r\n        <!-- EDGE \u0110ANG HOVER (LU\u00D4N TR\u00CAN C\u00D9NG) -->\r\n        <ng-container *ngFor=\"let e of hoverEdges; let i = index\">\r\n          <path\r\n            class=\"edge red\"\r\n            [attr.id]=\"'edge-path-hover-' + i\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            marker-end=\"url(#arrow-red)\"\r\n            [attr.marker-start]=\"e.allowBack ? 'url(#arrow-red-start)' : ''\"\r\n          ></path>\r\n\r\n          <path\r\n            class=\"edge-hit\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\r\n            (click)=\"onClickEdge(e, $event)\"\r\n          ></path>\r\n\r\n          <!-- LABEL -->\r\n          <!-- <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\r\n            <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.ActionText }}\r\n            </textPath>\r\n          </text>\r\n\r\n          <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\r\n            <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.labelBack }}\r\n            </textPath>\r\n          </text> -->\r\n\r\n          <text\r\n            *ngIf=\"e.ActionText\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.ActionText }}\r\n          </text>\r\n\r\n          <text\r\n            *ngIf=\"e.allowBack && e.labelBack\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.labelBack }}\r\n          </text>\r\n        </ng-container>\r\n\r\n        <!-- preview -->\r\n        <path\r\n          *ngIf=\"connectingFrom\"\r\n          class=\"edge\"\r\n          [attr.d]=\"buildPreviewPath()\"\r\n          stroke-dasharray=\"5,5\"\r\n          marker-end=\"url(#arrow-blue)\"\r\n        ></path>\r\n      </g>\r\n    </svg>\r\n\r\n    <div\r\n      *ngIf=\"isSelecting && selectStart && selectEnd\"\r\n      class=\"selection-box\"\r\n      [style.left.px]=\"Math.min(selectStart.x, selectEnd.x)\"\r\n      [style.top.px]=\"Math.min(selectStart.y, selectEnd.y)\"\r\n      [style.width.px]=\"Math.abs(selectEnd.x - selectStart.x)\"\r\n      [style.height.px]=\"Math.abs(selectEnd.y - selectStart.y)\"\r\n    ></div>\r\n\r\n    <!-- lstStage -->\r\n    @for (n of lstStage; track $index) {\r\n      <!-- START NODE -->\r\n      @if (n.StageType === \"_start_\") {\r\n        <nz-card\r\n          class=\"workflow-node workflow-node-start\"\r\n          [attr.data-id]=\"n.Code\"\r\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n          [style.left.px]=\"n.editorOption.x\"\r\n          [style.top.px]=\"n.editorOption.y\"\r\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n          nzSize=\"small\"\r\n          (mousedown)=\"onMouseDownNode($event, n)\"\r\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n        >\r\n          <nz-tag [nzColor]=\"'green'\"> START </nz-tag>\r\n\r\n          @if (!n.editorOption.isReverse) {\r\n            <!-- connector RIGHT: output -->\r\n            <div class=\"connector connector-right connector-start\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n          } @else {\r\n            <div\r\n              class=\"connector connector-right connector-start reverse\"\r\n              (click)=\"onClickConnector($event, n, 'right')\"\r\n            ></div>\r\n          }\r\n        </nz-card>\r\n      }\r\n      <!-- END NODE -->\r\n      @else if (n.StageType === \"_end_\") {\r\n        <nz-card\r\n          class=\"workflow-node workflow-node-end\"\r\n          [attr.data-id]=\"n.Code\"\r\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n          [style.left.px]=\"n.editorOption.x\"\r\n          [style.top.px]=\"n.editorOption.y\"\r\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n          nzSize=\"small\"\r\n          (mousedown)=\"onMouseDownNode($event, n)\"\r\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n        >\r\n          <nz-tag [nzColor]=\"'red'\"> END </nz-tag>\r\n\r\n          @if (!n.editorOption.isReverse) {\r\n            <!-- connector LEFT: input -->\r\n            <div class=\"connector connector-left connector-end\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n          } @else {\r\n            <div\r\n              class=\"connector connector-left connector-end reverse\"\r\n              (click)=\"onClickConnector($event, n, 'left')\"\r\n            ></div>\r\n          }\r\n        </nz-card>\r\n      } @else {\r\n        <nz-card\r\n          class=\"workflow-node\"\r\n          [attr.data-id]=\"n.Code\"\r\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n          [style.left.px]=\"n.editorOption.x\"\r\n          [style.top.px]=\"n.editorOption.y\"\r\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n          nzSize=\"small\"\r\n          (mousedown)=\"onMouseDownNode($event, n)\"\r\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n        >\r\n          <div class=\"title\">{{ n.Code }}</div>\r\n\r\n          <div>{{ n.Name }}</div>\r\n\r\n          @if (!n.editorOption.isReverse) {\r\n            <!-- connector RIGHT: output -->\r\n            <div class=\"connector connector-right\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n\r\n            <!-- connector LEFT: input -->\r\n            <div class=\"connector connector-left\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n          } @else {\r\n            <div class=\"connector connector-right reverse\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n            <div class=\"connector connector-left reverse\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n          }\r\n        </nz-card>\r\n      }\r\n    }\r\n\r\n    <!-- POINTS -->\r\n    @for (p of connectingPoints; track $index) {\r\n      @if (p != draggingPoint) {\r\n        <div\r\n          class=\"waypoint\"\r\n          [style.left.px]=\"p.x\"\r\n          [style.top.px]=\"p.y\"\r\n          (mousedown)=\"onmousedownPoint($event, p)\"\r\n          (contextmenu)=\"onRightClickPoint($event, hoverAction!, $index)\"\r\n        ></div>\r\n      } @else {\r\n        <div\r\n          class=\"waypoint dragging\"\r\n          [style.left.px]=\"p.x\"\r\n          [style.top.px]=\"p.y\"\r\n          (mousedown)=\"onmousedownPoint($event, p)\"\r\n        ></div>\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<!-- drawer TEMPLATE -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawTemplateTitle\"\r\n  nzPlacement=\"right\"\r\n  [nzWidth]=\"500\"\r\n  [nzClosable]=\"false\"\r\n  [nzVisible]=\"drawTemplateVisibel\"\r\n  [nzFooter]=\"footerTplTemplate\"\r\n  (nzOnClose)=\"drawTemplateVisibel = false\"\r\n>\r\n  <ng-template #drawTemplateTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Template </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <extend-select\r\n      [label]=\"'Org'\"\r\n      [lstItem]=\"lstOrg\"\r\n      [valueField]=\"'App_Org_Id'\"\r\n      [displayFields]=\"['Name', 'Code']\"\r\n      [(_ngModel)]=\"template.App_Org_Id\"\r\n    ></extend-select>\r\n    <extend-input [label]=\"'Code'\" [(_ngModel)]=\"template.Code\"></extend-input>\r\n    <extend-input [label]=\"'Name'\" [(_ngModel)]=\"template.Name\"></extend-input>\r\n    <extend-select\r\n      [label]=\"'Type'\"\r\n      [lstItem]=\"template.lstTemplateType\"\r\n      [valueField]=\"'Code'\"\r\n      [displayFields]=\"['Code', 'Name']\"\r\n      [(_ngModel)]=\"template.DocType\"\r\n    ></extend-select>\r\n    <extend-textarea [label]=\"'Desscription'\" [(_ngModel)]=\"template.Description\"></extend-textarea>\r\n    <extend-select\r\n      [label]=\"'Print template'\"\r\n      [lstItem]=\"template.lstTemplatePrint\"\r\n      [valueField]=\"'Code'\"\r\n      [displayFields]=\"['Code', 'Name']\"\r\n      [(_ngModel)]=\"template.TemplatePrint\"\r\n    ></extend-select>\r\n    <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          [floatingLabel]=\"true\"\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          [floatingLabel]=\"true\"\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          [floatingLabel]=\"true\"\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          [floatingLabel]=\"true\"\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          [floatingLabel]=\"true\"\r\n          [precision]=\"1\"\r\n          [(_ngModel)]=\"selectedStage.NumberDay\"\r\n        ></extend-input-number>\r\n      </div>\r\n\r\n      @if (selectedStage.editorOption) {\r\n        @if ([\"start\", \"node\", \"end\"].includes(selectedStage.StageType.toLowerCase())) {\r\n          <extend-checkbox\r\n            [label]=\"'Reverse'\"\r\n            [labelSpan]=\"0\"\r\n            [(_ngModel)]=\"selectedStage.editorOption.isReverse\"\r\n          ></extend-checkbox>\r\n        }\r\n\r\n        <extend-checkbox\r\n          [label]=\"'Require user action'\"\r\n          [labelSpan]=\"0\"\r\n          [(_ngModel)]=\"selectedStage.IsRequireUser\"\r\n        ></extend-checkbox>\r\n      }\r\n\r\n      <box [height]=\"16\"></box>\r\n\r\n      <div nz-row [nzGutter]=\"16\">\r\n        <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;List Action</h3>\r\n        <div nz-col>\r\n          <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"addAction()\">\r\n            <nz-icon nzType=\"plus\"></nz-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <nz-table nzSize=\"small\" [nzData]=\"lstActionOfCurrentStage\" [nzShowPagination]=\"false\" [nzNoResult]=\"'&nbsp;'\">\r\n        <thead>\r\n          <tr [hidden]=\"true\">\r\n            <th nzWidth=\"40px\"></th>\r\n            <th></th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (action of lstActionOfCurrentStage; track $index) {\r\n            <tr (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                    [floatingLabel]=\"true\"\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                    [floatingLabel]=\"true\"\r\n                    [lstItem]=\"template.lstActionType\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [(_ngModel)]=\"action.ActionType\"\r\n                  ></extend-select>\r\n\r\n                  <extend-select\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Stage status'\"\r\n                    [floatingLabel]=\"true\"\r\n                    [lstItem]=\"template.lstStageStatus\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [(_ngModel)]=\"action.StageStatus\"\r\n                  ></extend-select>\r\n\r\n                  <extend-select\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Next stage'\"\r\n                    [floatingLabel]=\"true\"\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                    [floatingLabel]=\"true\"\r\n                    [lstItem]=\"template.lstStageStatus\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [(_ngModel)]=\"action.To_StageStatus\"\r\n                  ></extend-select>\r\n\r\n                  <extend-select\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Process status'\"\r\n                    [floatingLabel]=\"true\"\r\n                    [lstItem]=\"template.lstProcessStatus\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\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)=\"onselectedRoleEmail(action)\"\r\n                  ></extend-select>\r\n                </div>\r\n                <box [height]=\"8\"></box>\r\n                <div nz-row>Email action</div>\r\n                <div nz-row>\r\n                  <extend-select\r\n                    nz-col\r\n                    nzSpan=\"24\"\r\n                    [size]=\"'small'\"\r\n                    [lstItem]=\"lstEmailAction\"\r\n                    [valueField]=\"'ID'\"\r\n                    [displayField]=\"'Name'\"\r\n                    [multiple]=\"true\"\r\n                    [(_ngModel)]=\"action._lstEmailActionId\"\r\n                    (_ngModelChange)=\"onselectedRoleEmail(action)\"\r\n                  ></extend-select>\r\n                </div>\r\n                <box [height]=\"8\"></box>\r\n                <div *ngIf=\"action._lstEmailActionId && action._lstEmailActionId.length\" nz-row>Email template</div>\r\n                <div *ngIf=\"action._lstEmailActionId && action._lstEmailActionId.length\" nz-row>\r\n                  <div nz-col nzSpan=\"1\"></div>\r\n                  <div nz-col nzSpan=\"23\" class=\"form-item-no-bottom\" style=\"font-weight: normal\">\r\n                    @for (actionRef of lstActionRefOf(action); track $index) {\r\n                      <div nz-row>\r\n                        <extend-select\r\n                          nz-col\r\n                          nzSpan=\"24\"\r\n                          [labelSpan]=\"12\"\r\n                          [size]=\"'small'\"\r\n                          [label]=\"emailActionText(actionRef.To_WF_TemplateStageAction_Id)\"\r\n                          [lstItem]=\"lstEmailTemplate\"\r\n                          [valueField]=\"'Code'\"\r\n                          [displayFields]=\"['Code', 'Name']\"\r\n                          [(_ngModel)]=\"actionRef.TemplateMail\"\r\n                        ></extend-select>\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n                <box [height]=\"8\"></box>\r\n                <div nz-row [nzGutter]=\"8\">\r\n                  Action rule\r\n                  <button nz-button nzType=\"text\" nzSize=\"small\" (click)=\"actionRuleModalVisible = true\">\r\n                    <nz-icon nzType=\"export\" nzTheme=\"outline\" class=\"color-primary\" />\r\n                  </button>\r\n                  <button\r\n                    *ngIf=\"action.WF_TransitionsRule_Id\"\r\n                    nz-button\r\n                    nzType=\"text\"\r\n                    nzSize=\"small\"\r\n                    (click)=\"deleteActionRule(action)\"\r\n                  >\r\n                    <nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn\" />\r\n                  </button>\r\n                </div>\r\n              </td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </nz-table>\r\n\r\n      <box [height]=\"16\"></box>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-template #footerTplNode>\r\n    <div\r\n      nz-flex\r\n      [nzGap]=\"6\"\r\n      [nzJustify]=\"\r\n        selectedStage && selectedStage.editorOption && selectedStage.editorOption.drawerPosition == 'left'\r\n          ? 'start'\r\n          : 'end'\r\n      \"\r\n    >\r\n      <button nz-button nzDanger nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n      <button nz-button (click)=\"selectedStage = undefined\">Close</button>\r\n      <button\r\n        *ngIf=\"selectedStage && ['START', 'END'].indexOf(selectedStage.StageType) < 0\"\r\n        nz-button\r\n        nzDanger\r\n        (click)=\"deleteStage()\"\r\n      >\r\n        Delete\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- drawer ACTION -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawerTitleAction\"\r\n  nzTitle=\"ACTION\"\r\n  [nzPlacement]=\"selectedAction?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\r\n  [nzClosable]=\"false\"\r\n  [nzWidth]=\"750\"\r\n  [nzVisible]=\"!!selectedAction\"\r\n  [nzFooter]=\"footerTplAction\"\r\n  (nzOnClose)=\"selectedAction = undefined\"\r\n>\r\n  <ng-template #drawerTitleAction>\r\n    <div nz-row nzJustify=\"space-between\">\r\n      @if (selectedAction && selectedAction.editorOption) {\r\n        @if (selectedAction.editorOption.drawerPosition == \"left\") {\r\n          <button\r\n            nz-button\r\n            nzSize=\"small\"\r\n            nz-tooltip=\"To the right\"\r\n            (click)=\"selectedAction.editorOption.drawerPosition = 'right'\"\r\n          >\r\n            <nz-icon nzType=\"double-right\"></nz-icon>\r\n          </button>\r\n          ACTION\r\n        } @else {\r\n          ACTION\r\n          <button\r\n            nz-button\r\n            nzSize=\"small\"\r\n            nz-tooltip=\"To the left\"\r\n            (click)=\"selectedAction.editorOption.drawerPosition = 'left'\"\r\n          >\r\n            <nz-icon nzType=\"double-left\"></nz-icon>\r\n          </button>\r\n        }\r\n      }\r\n    </div>\r\n  </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <ng-container *ngIf=\"selectedAction\">\r\n      <div>\r\n        <strong\r\n          >{{ selectedAction.getFromStageCode(lstStage) }} -> {{ selectedAction.getToStageCode(lstStage) }}</strong\r\n        >\r\n      </div>\r\n      <div>{{ selectedAction.getFromStageName(lstStage) }} -> {{ selectedAction.getToStageName(lstStage) }}</div>\r\n\r\n      <box [height]=\"16\"></box>\r\n\r\n      <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n        <div nz-col [nzSpan]=\"8\">\r\n          <nz-form-item>\r\n            <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n            <nz-form-control [nzSpan]=\"24\">\r\n              <nz-input-group class=\"full-width\">\r\n                <input\r\n                  nz-input\r\n                  [(ngModel)]=\"selectedAction.ActionStatus\"\r\n                  [nzAutocomplete]=\"auto\"\r\n                  (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n                  (click)=\"lstActionStatusFiltered = template.lstActionStatus\"\r\n                  (keyup.enter)=\"onenterAotu(selectedAction.ActionStatus)\"\r\n                  (blur)=\"onenterAotu(selectedAction.ActionStatus)\"\r\n                />\r\n                <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n                  @for (option of lstActionStatusFiltered; track $index) {\r\n                    <nz-auto-option [nzValue]=\"option.Code\" [nzLabel]=\"option.Code\">\r\n                      {{ option.Code }}\r\n                      <icon-delete\r\n                        *ngIf=\"checkRemoveableActionStatus(option.Code)\"\r\n                        style=\"float: right\"\r\n                        [size]=\"12\"\r\n                        (click)=\"handleClose(option.Code)\"\r\n                      ></icon-delete>\r\n                    </nz-auto-option>\r\n                  }\r\n                </nz-autocomplete>\r\n              </nz-input-group>\r\n            </nz-form-control>\r\n          </nz-form-item>\r\n        </div>\r\n\r\n        <extend-input\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Action text'\"\r\n          [floatingLabel]=\"true\"\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          [floatingLabel]=\"true\"\r\n          [lstItem]=\"template.lstActionType\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [(_ngModel)]=\"selectedAction.ActionType\"\r\n        ></extend-select>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Stage status'\"\r\n          [floatingLabel]=\"true\"\r\n          [lstItem]=\"template.lstStageStatus\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [(_ngModel)]=\"selectedAction.StageStatus\"\r\n        ></extend-select>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Next stage'\"\r\n          [floatingLabel]=\"true\"\r\n          [lstItem]=\"lstStage\"\r\n          [valueField]=\"'WF_TemplateStage_Id'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [(_ngModel)]=\"selectedAction.To_WF_TemplateStage_Id\"\r\n          (_ngModelChange)=\"onchangeNextStage(selectedAction)\"\r\n        ></extend-select>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Next stage status'\"\r\n          [floatingLabel]=\"true\"\r\n          [lstItem]=\"template.lstStageStatus\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [(_ngModel)]=\"selectedAction.To_StageStatus\"\r\n        ></extend-select>\r\n      </div>\r\n\r\n      <!-- <box [height]=\"16\"></box> -->\r\n      <nz-divider></nz-divider>\r\n\r\n      @if (template.editorOption.AllowbackInUse) {\r\n        <extend-checkbox\r\n          [label]=\"'Allow back'\"\r\n          [labelSpan]=\"0\"\r\n          [(_ngModel)]=\"selectedAction.allowBack\"\r\n          (_ngModelChange)=\"onchangeAllowBack(selectedAction)\"\r\n        ></extend-checkbox>\r\n      }\r\n\r\n      <box [height]=\"16\"></box>\r\n\r\n      @if (selectedAction.allowBack) {\r\n        <div>\r\n          <strong\r\n            >{{ selectedAction.getToStageCode(lstStage) }} -> {{ selectedAction.getFromStageCode(lstStage) }}</strong\r\n          >\r\n        </div>\r\n        <div>{{ selectedAction.getToStageName(lstStage) }} -> {{ selectedAction.getFromStageName(lstStage) }}</div>\r\n\r\n        @if (selectedBackAction) {\r\n          <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n            <div nz-col [nzSpan]=\"8\">\r\n              <nz-form-item>\r\n                <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n                <nz-form-control [nzSpan]=\"24\">\r\n                  <nz-input-group class=\"full-width\">\r\n                    <input\r\n                      nz-input\r\n                      [(ngModel)]=\"selectedBackAction.ActionStatus\"\r\n                      [nzAutocomplete]=\"auto\"\r\n                      (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n                      (click)=\"lstActionStatusFiltered = template.lstActionStatus\"\r\n                      (keyup.enter)=\"onenterAotu(selectedBackAction.ActionStatus)\"\r\n                      (blur)=\"onenterAotu(selectedBackAction.ActionStatus)\"\r\n                    />\r\n                    <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n                      @for (option of lstActionStatusFiltered; track $index) {\r\n                        <nz-auto-option [nzValue]=\"option.Code\" [nzLabel]=\"option.Code\">\r\n                          {{ option.Code }}\r\n                          <icon-delete\r\n                            *ngIf=\"checkRemoveableActionStatus(option.Code)\"\r\n                            style=\"float: right\"\r\n                            [size]=\"12\"\r\n                            (click)=\"handleClose(option.Code)\"\r\n                          ></icon-delete>\r\n                        </nz-auto-option>\r\n                      }\r\n                    </nz-autocomplete>\r\n                  </nz-input-group>\r\n                </nz-form-control>\r\n              </nz-form-item>\r\n            </div>\r\n\r\n            <extend-input\r\n              nz-col\r\n              [nzSpan]=\"8\"\r\n              [label]=\"'Action text'\"\r\n              [floatingLabel]=\"true\"\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              [floatingLabel]=\"true\"\r\n              [lstItem]=\"template.lstActionType\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [(_ngModel)]=\"selectedBackAction.ActionType\"\r\n            ></extend-select>\r\n\r\n            <extend-select\r\n              nz-col\r\n              [nzSpan]=\"8\"\r\n              [label]=\"'Stage status'\"\r\n              [floatingLabel]=\"true\"\r\n              [lstItem]=\"template.lstStageStatus\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [(_ngModel)]=\"selectedBackAction.StageStatus\"\r\n            ></extend-select>\r\n\r\n            <extend-select\r\n              nz-col\r\n              [nzSpan]=\"8\"\r\n              [label]=\"'Next stage'\"\r\n              [floatingLabel]=\"true\"\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              [floatingLabel]=\"true\"\r\n              [lstItem]=\"template.lstStageStatus\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [(_ngModel)]=\"selectedBackAction.To_StageStatus\"\r\n            ></extend-select>\r\n          </div>\r\n        }\r\n      }\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #footerTplAction>\r\n    <div\r\n      nz-flex\r\n      [nzGap]=\"6\"\r\n      [nzJustify]=\"selectedAction && selectedAction.editorOption.drawerPosition == 'left' ? 'start' : 'end'\"\r\n    >\r\n      <button nz-button nzDanger nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n      <button nz-button nzDanger (click)=\"deleteAction(selectedAction!)\">Delete</button>\r\n      <button nz-button (click)=\"selectedAction = undefined\">Close</button>\r\n    </div>\r\n  </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- setting editor -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawSettingTitle\"\r\n  nzPlacement=\"right\"\r\n  [nzClosable]=\"false\"\r\n  [nzVisible]=\"settingVisible\"\r\n  (nzOnClose)=\"settingVisible = false\"\r\n>\r\n  <ng-template #drawSettingTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Editor </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <div class=\"form-item-no-bottom\">\r\n      <extend-checkbox [label]=\"'Show grid'\" [labelSpan]=\"0\" [(_ngModel)]=\"wfcSetting.ShowGrid\"></extend-checkbox>\r\n\r\n      <box [height]=\"16\"></box>\r\n    </div>\r\n  </ng-container>\r\n</nz-drawer>\r\n\r\n<!-- editor infomation -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawInfoTitle\"\r\n  nzPlacement=\"right\"\r\n  [nzClosable]=\"false\"\r\n  [nzVisible]=\"infoVisible\"\r\n  (nzOnClose)=\"infoVisible = false\"\r\n>\r\n  <ng-template #drawInfoTitle> <nz-icon nzType=\"info-circle\"></nz-icon> &nbsp; Infomation </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <p>1. C\u00E1c th\u00E0nh ph\u1EA7n: Stage or Node (stag, node quy tr\u00ECnh), Action or Connector (\u0111\u01B0\u1EDDng n\u1ED1i gi\u1EEFa c\u00E1c stage)</p>\r\n    <p>2. Save \u0111\u1EC3 load c\u00E1c th\u00F4ng tin: Stage status, Action type</p>\r\n    <p>\r\n      3. N\u1ED1i 2 node (t\u1EA1o connector t\u01B0\u01A1ng \u0111\u01B0\u01A1ng t\u1EA1o action):\r\n      <br />- Click ch\u1EA5m cam t\u1EEB Node ngu\u1ED3n \u0111\u1EBFn ch\u1EA5m xanh c\u1EE7a Node \u0111\u00EDch (ho\u1EB7c click v\u00E0o Node \u0111\u00EDch), c\u00F3 th\u1EC3 click th\u00E0nh\r\n      nhi\u1EC1u \u0111i\u1EC3m \u0111\u1EC3 t\u1EA1o \u0111\u01B0\u1EDDng n\u1ED1i cong<br />- Khi hover connector chuy\u1EC3n sang m\u1EA7u \u0111\u1ECF c\u00F3 th\u1EC3 click \u0111\u00FAp \u0111\u1EC3 th\u00EAm m\u1ED9t \u0111i\u1EC3m\r\n      c\u1EE7a connector<br />- Khi hover l\u00EAn \u0111i\u1EC3m c\u1EE7a connector c\u00F3 th\u1EC3 di chuy\u1EC3n \u0111i\u1EC3m \u0111\u00F3 b\u1EB1ng c\u00E1ch nh\u1EA5n gi\u1EEF chu\u1ED9t v\u00E0 k\u00E9o th\u1EA3\r\n      \u0111\u1EBFn v\u1ECB tr\u00ED m\u1EDBi<br />- Chu\u1ED9t ph\u1EA3i v\u00E0o \u0111i\u1EC3m n\u1ED1i connector \u0111\u1EC3 xo\u00E1 \u0111i\u1EC3m \u0111\u00F3\r\n    </p>\r\n  </ng-container>\r\n</nz-drawer>\r\n\r\n<!-- action rule modal -->\r\n<nz-modal\r\n  [(nzVisible)]=\"actionRuleModalVisible\"\r\n  [nzMaskClosable]=\"false\"\r\n  [nzClosable]=\"false\"\r\n  [nzKeyboard]=\"true\"\r\n  [nzWidth]=\"'75vw'\"\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]=\"'250px'\">Rule type</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 [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 class=\"text-center\">\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%}.canvas-content{outline:1px dashed red}.canvas-content.panning{cursor:grab}.canvas-content.panning:active{cursor:grabbing}.workflow-canvas.panning{cursor:grab}.workflow-canvas.panning:active{cursor:grabbing}.workflow-canvas.connecting,.workflow-canvas.connecting .workflow-node{cursor:crosshair}.workflow-node{position:absolute;width:160px;cursor:grab;-webkit-user-select:none;user-select:none;z-index:2}.workflow-node:active{cursor:grabbing}.workflow-node.connecting-source,.workflow-node.selected,.workflow-node:hover:not(.workflow-node-start,.workflow-node-end){outline:2px dashed #1890ff}.workflow-node .title{font-weight:600;margin-bottom:6px}.workflow-node-start{width:0px}.workflow-node-start.connecting-source,.workflow-node-start.selected,.workflow-node-start:hover{outline:unset}.workflow-node-start.connecting-source nz-tag,.workflow-node-start.selected nz-tag,.workflow-node-start:hover nz-tag{outline:2px dashed}.workflow-node-start nz-tag{position:relative;top:45px;right:35px}.workflow-node-end{width:0px}.workflow-node-end.connecting-source,.workflow-node-end.selected,.workflow-node-end:hover{outline:unset}.workflow-node-end.connecting-source nz-tag,.workflow-node-end.selected nz-tag,.workflow-node-end:hover nz-tag{outline:2px dashed}.workflow-node-end nz-tag{position:relative;top:45px;right:32px}.connector{position:absolute;top:39px;width:12px;height:12px;background:#1890ff;border-radius:50%;transform:translateY(-50%);cursor:crosshair;transition:box-shadow .15s ease-out,transform .15s ease-out}.connector:hover{box-shadow:0 0 0 3px #1890ff4d;transform:translateY(-50%) scale(1.15)}.connector-right{right:-8px;background:orange}.connector-right.reverse,.connector-left{left:-8px}.connector-left.reverse{left:unset;right:-8px}.connector-start{width:16px;height:16px;right:-8px;background:green;box-shadow:0 0 0 3px #1890ff4d}.connector-end{width:16px;height:16px;left:-8px;background:#000;box-shadow:0 0 0 3px #1890ff4d}.edge{cursor:pointer;stroke:#1890ff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;fill:none;transition:stroke .15s ease}.edge-hit{stroke:transparent;stroke-width:18px!important;fill:none;cursor:pointer}.edge-hit:hover+.edge{stroke:#ff4d4f;stroke-width:2}.workflow-canvas.dragging-point .edge-hit{pointer-events:none}.edge:hover+.edge-label{fill:#1890ff;font-weight:500}.edge-label{font-size:12px;fill:#555;pointer-events:none;-webkit-user-select:none;user-select:none}.blue{stroke:#1890ff!important}.red{stroke:#ff4d4f!important;box-shadow:0 0 0 3px #1890ff4d!important}.workflow-svg{background:transparent;overflow:visible}.waypoint{position:absolute;width:10px;height:10px;background:#ff4d4f;border-radius:50%;transform:translate(-50%,-50%) scale(1);cursor:move;z-index:1;transition:transform .12s ease-out,background-color .12s ease-out,box-shadow .12s ease-out}.waypoint:hover{background:#ff7875;transform:translate(-50%,-50%) scale(1.25);box-shadow:0 0 0 4px #ff787559}.waypoint.dragging{transition:none;transform:translate(-50%,-50%) scale(1.15);pointer-events:none}.workflow-canvas.dragging-point svg{cursor:grabbing}.selection-box{position:absolute;border:1px dashed #1890ff;background:#1890ff1a;pointer-events:none}.toolbar{position:absolute;top:8px;left:8px;display:flex;gap:4px;padding:6px;background:#fff;border-radius:6px;box-shadow:0 2px 8px #00000026;z-index:100}.toolbar .divider{width:1px;background:#e5e5e5;margin:0 2px}.zoom-toolbar{position:absolute;top:8px;left:8px;z-index:10;display:flex;align-items:center;gap:6px;background:#fff;padding:4px 6px;border-radius:6px;box-shadow:0 2px 6px #00000026}.zoom-toolbar span{min-width:40px;text-align:center;font-size:12px}nz-tag.selected{outline:2px dashed #1890ff}.grid-layer{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(rgba(0,0,0,.08) 1px,transparent 1px);background-size:20px 20px}.grid-layer{background-image:linear-gradient(to right,rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.06) 1px,transparent 1px);background-size:20px 20px}.editable-tag{background:#fff;border-style:dashed}::ng-deep .minimap{position:absolute;width:180px;height:125px;top:0;right:0;background-color:#eee;border:1px solid #aaa;opacity:.9;z-index:1}::ng-deep .minimap-node{position:absolute;background-color:#607a86}::ng-deep .minimap-node-round{position:absolute;background-color:#607a86;border-radius:10px}::ng-deep .minimap-node-round-start{background-color:green}::ng-deep .minimap-node-round-end{background-color:#000}::ng-deep .minimap-viewport{position:absolute;box-sizing:border-box;background-color:#4f6f7e66;z-index:1;cursor:move}::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:16px;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: i4$2.NzDrawerComponent, selector: "nz-drawer", inputs: ["nzContent", "nzCloseIcon", "nzClosable", "nzMaskClosable", "nzMask", "nzCloseOnNavigation", "nzNoAnimation", "nzKeyboard", "nzTitle", "nzExtra", "nzFooter", "nzPlacement", "nzSize", "nzMaskStyle", "nzBodyStyle", "nzWrapClassName", "nzWidth", "nzHeight", "nzZIndex", "nzOffsetX", "nzOffsetY", "nzVisible"], outputs: ["nzOnViewInit", "nzOnClose", "nzVisibleChange"], exportAs: ["nzDrawer"] }, { kind: "directive", type: i4$2.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$4.NzRadioComponent, selector: "[nz-radio],[nz-radio-button]", inputs: ["nzValue", "nzDisabled", "nzAutoFocus", "nz-radio-button"], exportAs: ["nzRadio"] }, { kind: "component", type: i6$4.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$3.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.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", "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: i5$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i5$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: 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: i6$2.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: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.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: i8$1.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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: WorkflowEditorComponent, isStandalone: true, selector: "app-workflow-editor", inputs: { lstOrg: "lstOrg", lstRole: "lstRole", lstEmailTemplate: "lstEmailTemplate" }, outputs: { onSave: "onSave", onDeleteStage: "onDeleteStage", onDeleteAction: "onDeleteAction", onDeleteRule: "onDeleteRule", onDeleteRuleLine: "onDeleteRuleLine", 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  #canvasRef\r\n  class=\"workflow-canvas\"\r\n  [class.connecting]=\"!!connectingFrom\"\r\n  [class.dragging-point]=\"!!draggingPoint\"\r\n  [style.width.px]=\"getCanvasWidth()\"\r\n  [style.height.px]=\"getCanvasHeight()\"\r\n  (mousedown)=\"onMouseDownCanvas($event)\"\r\n  (mousemove)=\"onMouseMoveCanvas($event)\"\r\n  (mouseup)=\"onMouseUpCanvas($event)\"\r\n  (click)=\"onClickCanvas($event)\"\r\n>\r\n  <!-- \r\n\r\n  [style.width.px]=\"getCanvasWidth()\"\r\n  [style.height.px]=\"getCanvasHeight()\" \r\n\r\n  [style.width.px]=\"CANVAS_WIDTH\"\r\n  [style.height.px]=\"CANVAS_HEIGHT\"\r\n\r\n  style=\"width: 100%; height: calc(100vh - 120px)\"\r\n  \r\n  -->\r\n\r\n  <div class=\"toolbar\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Editor setting\" (click)=\"settingVisible = true\">\r\n      <nz-icon nzType=\"setting\"></nz-icon>\r\n    </button>\r\n\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Infomation\" (click)=\"infoVisible = true\">\r\n      <nz-icon nzType=\"info-circle\"></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Template setting\" (click)=\"drawTemplateVisibel = true\">\r\n      <nz-icon nzType=\"setting\"></nz-icon> T\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <button nz-button nzSize=\"small\" nzDanger [nzLoading]=\"!ready\" nz-tooltip=\"Save (Ctrl + S)\" (click)=\"save()\">\r\n      <nz-icon nzType=\"save\"></nz-icon>\r\n    </button>\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Add stage\" (click)=\"addStage()\">\r\n      <nz-icon nzType=\"plus\" class=\"color-primary\"></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      [nzType]=\"isMoveMode ? 'primary' : 'default'\"\r\n      nz-tooltip=\"Move mode\"\r\n      (click)=\"isMoveMode = true\"\r\n    >\r\n      <nz-icon><img src=\"/assets/icon/hand-palm.png\" width=\"19\" height=\"19\" /></nz-icon>\r\n    </button>\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      [nzType]=\"!isMoveMode ? 'primary' : 'default'\"\r\n      nz-tooltip=\"Select mode\"\r\n      (click)=\"isMoveMode = false\"\r\n    >\r\n      <nz-icon><img src=\"/assets/icon/cursor.png\" width=\"19\" height=\"19\" /></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <!-- UNDO / REDO -->\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      nzType=\"default\"\r\n      [disabled]=\"undoStack.length === 0\"\r\n      nz-tooltip=\"Undo\"\r\n      (click)=\"undo()\"\r\n    >\r\n      <nz-icon nzType=\"undo\"></nz-icon>\r\n    </button>\r\n\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      nzType=\"default\"\r\n      [disabled]=\"redoStack.length === 0\"\r\n      nz-tooltip=\"Redo\"\r\n      (click)=\"redo()\"\r\n    >\r\n      <nz-icon nzType=\"redo\"></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <!-- ALIGN -->\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignLeft()\">\u27F8</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignCenter()\">\u2261</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignRight()\">\u27F9</button>\r\n\r\n    <span class=\"divider\"></span>\r\n\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignTop()\">\u21D1</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignMiddle()\">\u2550</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignBottom()\">\u21D3</button>\r\n\r\n    <span class=\"divider\"></span>\r\n\r\n    <!-- DISTRIBUTE -->\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeHorizontal()\">\r\n      \u21C4\r\n    </button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeVertical()\">\u21C5</button>\r\n  </div>\r\n\r\n  <div\r\n    class=\"canvas-content\"\r\n    [class.panning]=\"isMoveMode\"\r\n    [style.transform]=\"'translate(' + template.editorOption.panX + 'px,' + template.editorOption.panY + 'px)'\"\r\n  >\r\n    <!-- GRID -->\r\n    <div *ngIf=\"wfcSetting.ShowGrid\" class=\"grid-layer\"></div>\r\n\r\n    <!-- <div class=\"zoom-toolbar\">\r\n      <button nz-button nzSize=\"small\" (click)=\"zoomOut()\">\u2212</button>\r\n      <span>{{ zoom * 100 | number: \"1.0-0\" }}%</span>\r\n      <button nz-button nzSize=\"small\" (click)=\"zoomIn()\">+</button>\r\n    </div> -->\r\n\r\n    <!-- SVG EDGES -->\r\n    <svg #svg class=\"edges-layer\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\">\r\n      <g [attr.transform]=\"svgTransform\">\r\n        <!-- DEFS -->\r\n        <defs>\r\n          <!-- glow effect -->\r\n          <filter id=\"edge-glow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\r\n            <feGaussianBlur stdDeviation=\"2\" result=\"blur\" />\r\n            <feMerge>\r\n              <feMergeNode in=\"blur\" />\r\n              <feMergeNode in=\"SourceGraphic\" />\r\n            </feMerge>\r\n          </filter>\r\n\r\n          <!-- arrow markers -->\r\n          <marker\r\n            id=\"arrow-blue\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            refX=\"10\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"blue\" d=\"M0,0 L10,5 L0,10\"></path>\r\n          </marker>\r\n\r\n          <marker\r\n            id=\"arrow-red\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            refX=\"10\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"red\" d=\"M0,0 L10,5 L0,10\"></path>\r\n          </marker>\r\n\r\n          <marker\r\n            id=\"arrow-blue-start\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            viewBox=\"0 0 10 10\"\r\n            refX=\"0\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"blue\" d=\"M10,0 L0,5 L10,10\"></path>\r\n          </marker>\r\n\r\n          <marker\r\n            id=\"arrow-red-start\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            viewBox=\"0 0 10 10\"\r\n            refX=\"0\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"red\" d=\"M10,0 L0,5 L10,10\"></path>\r\n          </marker>\r\n        </defs>\r\n\r\n        <!-- EDGES B\u00CCNH TH\u01AF\u1EDCNG -->\r\n        <ng-container *ngFor=\"let e of normalEdges; let i = index\">\r\n          <path\r\n            class=\"edge\"\r\n            [attr.id]=\"'edge-path-' + i\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            marker-end=\"url(#arrow-blue)\"\r\n            [attr.marker-start]=\"e.allowBack ? 'url(#arrow-blue-start)' : ''\"\r\n          ></path>\r\n\r\n          <path\r\n            class=\"edge-hit\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            (mouseenter)=\"onMouseEnterEdge(e)\"\r\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\r\n            (click)=\"onClickEdge(e, $event)\"\r\n          ></path>\r\n\r\n          <!-- LABEL -->\r\n          <!-- text b\u00E1m theo line -->\r\n          <!-- \r\n          <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\r\n            <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.ActionText }}\r\n            </textPath>\r\n          </text> \r\n          \r\n          <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\r\n            <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.labelBack }}\r\n            </textPath>\r\n          </text>\r\n          -->\r\n\r\n          <!-- text th\u1EB3ng n\u1EB1m ngang -->\r\n          <text\r\n            *ngIf=\"e.ActionText\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.ActionText }}\r\n          </text>\r\n\r\n          <text\r\n            *ngIf=\"e.allowBack && e.labelBack\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.labelBack }}\r\n          </text>\r\n        </ng-container>\r\n\r\n        <!-- EDGE \u0110ANG HOVER (LU\u00D4N TR\u00CAN C\u00D9NG) -->\r\n        <ng-container *ngFor=\"let e of hoverEdges; let i = index\">\r\n          <path\r\n            class=\"edge red\"\r\n            [attr.id]=\"'edge-path-hover-' + i\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            marker-end=\"url(#arrow-red)\"\r\n            [attr.marker-start]=\"e.allowBack ? 'url(#arrow-red-start)' : ''\"\r\n          ></path>\r\n\r\n          <path\r\n            class=\"edge-hit\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\r\n            (click)=\"onClickEdge(e, $event)\"\r\n          ></path>\r\n\r\n          <!-- LABEL -->\r\n          <!-- <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\r\n            <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.ActionText }}\r\n            </textPath>\r\n          </text>\r\n\r\n          <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\r\n            <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.labelBack }}\r\n            </textPath>\r\n          </text> -->\r\n\r\n          <text\r\n            *ngIf=\"e.ActionText\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.ActionText }}\r\n          </text>\r\n\r\n          <text\r\n            *ngIf=\"e.allowBack && e.labelBack\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.labelBack }}\r\n          </text>\r\n        </ng-container>\r\n\r\n        <!-- preview -->\r\n        <path\r\n          *ngIf=\"connectingFrom\"\r\n          class=\"edge\"\r\n          [attr.d]=\"buildPreviewPath()\"\r\n          stroke-dasharray=\"5,5\"\r\n          marker-end=\"url(#arrow-blue)\"\r\n        ></path>\r\n      </g>\r\n    </svg>\r\n\r\n    <div\r\n      *ngIf=\"isSelecting && selectStart && selectEnd\"\r\n      class=\"selection-box\"\r\n      [style.left.px]=\"Math.min(selectStart.x, selectEnd.x)\"\r\n      [style.top.px]=\"Math.min(selectStart.y, selectEnd.y)\"\r\n      [style.width.px]=\"Math.abs(selectEnd.x - selectStart.x)\"\r\n      [style.height.px]=\"Math.abs(selectEnd.y - selectStart.y)\"\r\n    ></div>\r\n\r\n    <!-- lstStage -->\r\n    @for (n of lstStage; track $index) {\r\n      <!-- START NODE -->\r\n      @if (n.StageType === \"_start_\") {\r\n        <nz-card\r\n          class=\"workflow-node workflow-node-start\"\r\n          [attr.data-id]=\"n.Code\"\r\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n          [style.left.px]=\"n.editorOption.x\"\r\n          [style.top.px]=\"n.editorOption.y\"\r\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n          nzSize=\"small\"\r\n          (mousedown)=\"onMouseDownNode($event, n)\"\r\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n        >\r\n          <nz-tag [nzColor]=\"'green'\"> START </nz-tag>\r\n\r\n          @if (!n.editorOption.isReverse) {\r\n            <!-- connector RIGHT: output -->\r\n            <div class=\"connector connector-right connector-start\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n          } @else {\r\n            <div\r\n              class=\"connector connector-right connector-start reverse\"\r\n              (click)=\"onClickConnector($event, n, 'right')\"\r\n            ></div>\r\n          }\r\n        </nz-card>\r\n      }\r\n      <!-- END NODE -->\r\n      @else if (n.StageType === \"_end_\") {\r\n        <nz-card\r\n          class=\"workflow-node workflow-node-end\"\r\n          [attr.data-id]=\"n.Code\"\r\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n          [style.left.px]=\"n.editorOption.x\"\r\n          [style.top.px]=\"n.editorOption.y\"\r\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n          nzSize=\"small\"\r\n          (mousedown)=\"onMouseDownNode($event, n)\"\r\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n        >\r\n          <nz-tag [nzColor]=\"'red'\"> END </nz-tag>\r\n\r\n          @if (!n.editorOption.isReverse) {\r\n            <!-- connector LEFT: input -->\r\n            <div class=\"connector connector-left connector-end\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n          } @else {\r\n            <div\r\n              class=\"connector connector-left connector-end reverse\"\r\n              (click)=\"onClickConnector($event, n, 'left')\"\r\n            ></div>\r\n          }\r\n        </nz-card>\r\n      } @else {\r\n        <nz-card\r\n          class=\"workflow-node\"\r\n          [attr.data-id]=\"n.Code\"\r\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n          [style.left.px]=\"n.editorOption.x\"\r\n          [style.top.px]=\"n.editorOption.y\"\r\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n          nzSize=\"small\"\r\n          (mousedown)=\"onMouseDownNode($event, n)\"\r\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n        >\r\n          <div class=\"title\">{{ n.Code }}</div>\r\n\r\n          <div>{{ n.Name }}</div>\r\n\r\n          @if (!n.editorOption.isReverse) {\r\n            <!-- connector RIGHT: output -->\r\n            <div class=\"connector connector-right\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n\r\n            <!-- connector LEFT: input -->\r\n            <div class=\"connector connector-left\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n          } @else {\r\n            <div class=\"connector connector-right reverse\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n            <div class=\"connector connector-left reverse\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n          }\r\n        </nz-card>\r\n      }\r\n    }\r\n\r\n    <!-- POINTS -->\r\n    @for (p of connectingPoints; track $index) {\r\n      @if (p != draggingPoint) {\r\n        <div\r\n          class=\"waypoint\"\r\n          [style.left.px]=\"p.x\"\r\n          [style.top.px]=\"p.y\"\r\n          (mousedown)=\"onmousedownPoint($event, p)\"\r\n          (contextmenu)=\"onRightClickPoint($event, hoverAction!, $index)\"\r\n        ></div>\r\n      } @else {\r\n        <div\r\n          class=\"waypoint dragging\"\r\n          [style.left.px]=\"p.x\"\r\n          [style.top.px]=\"p.y\"\r\n          (mousedown)=\"onmousedownPoint($event, p)\"\r\n        ></div>\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<!-- drawer TEMPLATE -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawTemplateTitle\"\r\n  nzPlacement=\"right\"\r\n  [nzWidth]=\"500\"\r\n  [nzClosable]=\"false\"\r\n  [nzVisible]=\"drawTemplateVisibel\"\r\n  [nzFooter]=\"footerTplTemplate\"\r\n  (nzOnClose)=\"drawTemplateVisibel = false\"\r\n>\r\n  <ng-template #drawTemplateTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Template </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <extend-select\r\n      [label]=\"'Org'\"\r\n      [lstItem]=\"lstOrg\"\r\n      [valueField]=\"'App_Org_Id'\"\r\n      [displayFields]=\"['Name', 'Code']\"\r\n      [(_ngModel)]=\"template.App_Org_Id\"\r\n    ></extend-select>\r\n    <extend-input [label]=\"'Code'\" [(_ngModel)]=\"template.Code\"></extend-input>\r\n    <extend-input [label]=\"'Name'\" [(_ngModel)]=\"template.Name\"></extend-input>\r\n    <extend-select\r\n      [label]=\"'Type'\"\r\n      [lstItem]=\"template.lstTemplateType\"\r\n      [valueField]=\"'Code'\"\r\n      [displayFields]=\"['Code', 'Name']\"\r\n      [(_ngModel)]=\"template.DocType\"\r\n    ></extend-select>\r\n    <extend-textarea [label]=\"'Desscription'\" [(_ngModel)]=\"template.Description\"></extend-textarea>\r\n    <extend-select\r\n      [label]=\"'Print template'\"\r\n      [lstItem]=\"template.lstTemplatePrint\"\r\n      [valueField]=\"'Code'\"\r\n      [displayFields]=\"['Code', 'Name']\"\r\n      [(_ngModel)]=\"template.TemplatePrint\"\r\n    ></extend-select>\r\n    <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          [floatingLabel]=\"true\"\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          [floatingLabel]=\"true\"\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          [floatingLabel]=\"true\"\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          [floatingLabel]=\"true\"\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          [floatingLabel]=\"true\"\r\n          [precision]=\"1\"\r\n          [(_ngModel)]=\"selectedStage.NumberDay\"\r\n        ></extend-input-number>\r\n      </div>\r\n\r\n      @if (selectedStage.editorOption) {\r\n        @if ([\"start\", \"node\", \"end\"].includes(selectedStage.StageType.toLowerCase())) {\r\n          <extend-checkbox\r\n            [label]=\"'Reverse'\"\r\n            [labelSpan]=\"0\"\r\n            [(_ngModel)]=\"selectedStage.editorOption.isReverse\"\r\n          ></extend-checkbox>\r\n        }\r\n\r\n        <extend-checkbox\r\n          [label]=\"'Require user action'\"\r\n          [labelSpan]=\"0\"\r\n          [(_ngModel)]=\"selectedStage.IsRequireUser\"\r\n        ></extend-checkbox>\r\n      }\r\n\r\n      <box [height]=\"16\"></box>\r\n\r\n      <div nz-row [nzGutter]=\"16\">\r\n        <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;List Action</h3>\r\n        <div nz-col>\r\n          <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"addAction()\">\r\n            <nz-icon nzType=\"plus\"></nz-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <nz-table nzSize=\"small\" [nzData]=\"lstActionOfCurrentStage\" [nzShowPagination]=\"false\" [nzNoResult]=\"'&nbsp;'\">\r\n        <thead>\r\n          <tr [hidden]=\"true\">\r\n            <th nzWidth=\"40px\"></th>\r\n            <th></th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (action of lstActionOfCurrentStage; track $index) {\r\n            <tr (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                    [floatingLabel]=\"true\"\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                    [floatingLabel]=\"true\"\r\n                    [lstItem]=\"template.lstActionType\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [(_ngModel)]=\"action.ActionType\"\r\n                  ></extend-select>\r\n\r\n                  <extend-select\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Stage status'\"\r\n                    [floatingLabel]=\"true\"\r\n                    [lstItem]=\"template.lstStageStatus\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [(_ngModel)]=\"action.StageStatus\"\r\n                  ></extend-select>\r\n\r\n                  <extend-select\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Next stage'\"\r\n                    [floatingLabel]=\"true\"\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                    [floatingLabel]=\"true\"\r\n                    [lstItem]=\"template.lstStageStatus\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [(_ngModel)]=\"action.To_StageStatus\"\r\n                  ></extend-select>\r\n\r\n                  <extend-select\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Process status'\"\r\n                    [floatingLabel]=\"true\"\r\n                    [lstItem]=\"template.lstProcessStatus\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\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)=\"onselectedRoleEmail(action)\"\r\n                  ></extend-select>\r\n                </div>\r\n                <box [height]=\"8\"></box>\r\n                <div nz-row>Email action</div>\r\n                <div nz-row>\r\n                  <extend-select\r\n                    nz-col\r\n                    nzSpan=\"24\"\r\n                    [size]=\"'small'\"\r\n                    [lstItem]=\"lstEmailAction\"\r\n                    [valueField]=\"'ID'\"\r\n                    [displayField]=\"'Name'\"\r\n                    [multiple]=\"true\"\r\n                    [(_ngModel)]=\"action._lstEmailActionId\"\r\n                    (_ngModelChange)=\"onselectedRoleEmail(action)\"\r\n                  ></extend-select>\r\n                </div>\r\n                <box [height]=\"8\"></box>\r\n                <div *ngIf=\"action._lstEmailActionId && action._lstEmailActionId.length\" nz-row>Email template</div>\r\n                <div *ngIf=\"action._lstEmailActionId && action._lstEmailActionId.length\" nz-row>\r\n                  <div nz-col nzSpan=\"1\"></div>\r\n                  <div nz-col nzSpan=\"23\" class=\"form-item-no-bottom\" style=\"font-weight: normal\">\r\n                    @for (actionRef of lstActionRefOf(action); track $index) {\r\n                      <div nz-row>\r\n                        <extend-select\r\n                          nz-col\r\n                          nzSpan=\"24\"\r\n                          [labelSpan]=\"12\"\r\n                          [size]=\"'small'\"\r\n                          [label]=\"emailActionText(actionRef.To_WF_TemplateStageAction_Id)\"\r\n                          [lstItem]=\"lstEmailTemplate\"\r\n                          [valueField]=\"'Code'\"\r\n                          [displayFields]=\"['Code', 'Name']\"\r\n                          [(_ngModel)]=\"actionRef.TemplateMail\"\r\n                        ></extend-select>\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n                <box [height]=\"8\"></box>\r\n                <div nz-row [nzGutter]=\"8\">\r\n                  Action rule\r\n                  <button nz-button nzType=\"text\" nzSize=\"small\" (click)=\"actionRuleModalVisible = true\">\r\n                    <nz-icon nzType=\"export\" nzTheme=\"outline\" class=\"color-primary\" />\r\n                  </button>\r\n                  <button\r\n                    *ngIf=\"action.WF_TransitionsRule_Id\"\r\n                    nz-button\r\n                    nzType=\"text\"\r\n                    nzSize=\"small\"\r\n                    (click)=\"deleteActionRule(action)\"\r\n                  >\r\n                    <nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn\" />\r\n                  </button>\r\n                </div>\r\n              </td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </nz-table>\r\n\r\n      <box [height]=\"16\"></box>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-template #footerTplNode>\r\n    <div\r\n      nz-flex\r\n      [nzGap]=\"6\"\r\n      [nzJustify]=\"\r\n        selectedStage && selectedStage.editorOption && selectedStage.editorOption.drawerPosition == 'left'\r\n          ? 'start'\r\n          : 'end'\r\n      \"\r\n    >\r\n      <button nz-button nzDanger nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n      <button nz-button (click)=\"selectedStage = undefined\">Close</button>\r\n      <button\r\n        *ngIf=\"selectedStage && ['START', 'END'].indexOf(selectedStage.StageType) < 0\"\r\n        nz-button\r\n        nzDanger\r\n        (click)=\"deleteStage()\"\r\n      >\r\n        Delete\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- drawer ACTION -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawerTitleAction\"\r\n  nzTitle=\"ACTION\"\r\n  [nzPlacement]=\"selectedAction?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\r\n  [nzClosable]=\"false\"\r\n  [nzWidth]=\"750\"\r\n  [nzVisible]=\"!!selectedAction\"\r\n  [nzFooter]=\"footerTplAction\"\r\n  (nzOnClose)=\"selectedAction = undefined\"\r\n>\r\n  <ng-template #drawerTitleAction>\r\n    <div nz-row nzJustify=\"space-between\">\r\n      @if (selectedAction && selectedAction.editorOption) {\r\n        @if (selectedAction.editorOption.drawerPosition == \"left\") {\r\n          <button\r\n            nz-button\r\n            nzSize=\"small\"\r\n            nz-tooltip=\"To the right\"\r\n            (click)=\"selectedAction.editorOption.drawerPosition = 'right'\"\r\n          >\r\n            <nz-icon nzType=\"double-right\"></nz-icon>\r\n          </button>\r\n          ACTION\r\n        } @else {\r\n          ACTION\r\n          <button\r\n            nz-button\r\n            nzSize=\"small\"\r\n            nz-tooltip=\"To the left\"\r\n            (click)=\"selectedAction.editorOption.drawerPosition = 'left'\"\r\n          >\r\n            <nz-icon nzType=\"double-left\"></nz-icon>\r\n          </button>\r\n        }\r\n      }\r\n    </div>\r\n  </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <ng-container *ngIf=\"selectedAction\">\r\n      <div>\r\n        <strong\r\n          >{{ selectedAction.getFromStageCode(lstStage) }} -> {{ selectedAction.getToStageCode(lstStage) }}</strong\r\n        >\r\n      </div>\r\n      <div>{{ selectedAction.getFromStageName(lstStage) }} -> {{ selectedAction.getToStageName(lstStage) }}</div>\r\n\r\n      <box [height]=\"16\"></box>\r\n\r\n      <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n        <div nz-col [nzSpan]=\"8\">\r\n          <nz-form-item>\r\n            <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n            <nz-form-control [nzSpan]=\"24\">\r\n              <nz-input-group class=\"full-width\">\r\n                <input\r\n                  nz-input\r\n                  [(ngModel)]=\"selectedAction.ActionStatus\"\r\n                  [nzAutocomplete]=\"auto\"\r\n                  (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n                  (click)=\"lstActionStatusFiltered = template.lstActionStatus\"\r\n                  (keyup.enter)=\"onenterAotu(selectedAction.ActionStatus)\"\r\n                  (blur)=\"onenterAotu(selectedAction.ActionStatus)\"\r\n                />\r\n                <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n                  @for (option of lstActionStatusFiltered; track $index) {\r\n                    <nz-auto-option [nzValue]=\"option.Code\" [nzLabel]=\"option.Code\">\r\n                      {{ option.Code }}\r\n                      <icon-delete\r\n                        *ngIf=\"checkRemoveableActionStatus(option.Code)\"\r\n                        style=\"float: right\"\r\n                        [size]=\"12\"\r\n                        (click)=\"handleClose(option.Code)\"\r\n                      ></icon-delete>\r\n                    </nz-auto-option>\r\n                  }\r\n                </nz-autocomplete>\r\n              </nz-input-group>\r\n            </nz-form-control>\r\n          </nz-form-item>\r\n        </div>\r\n\r\n        <extend-input\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Action text'\"\r\n          [floatingLabel]=\"true\"\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          [floatingLabel]=\"true\"\r\n          [lstItem]=\"template.lstActionType\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [(_ngModel)]=\"selectedAction.ActionType\"\r\n        ></extend-select>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Stage status'\"\r\n          [floatingLabel]=\"true\"\r\n          [lstItem]=\"template.lstStageStatus\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [(_ngModel)]=\"selectedAction.StageStatus\"\r\n        ></extend-select>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Next stage'\"\r\n          [floatingLabel]=\"true\"\r\n          [lstItem]=\"lstStage\"\r\n          [valueField]=\"'WF_TemplateStage_Id'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [(_ngModel)]=\"selectedAction.To_WF_TemplateStage_Id\"\r\n          (_ngModelChange)=\"onchangeNextStage(selectedAction)\"\r\n        ></extend-select>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Next stage status'\"\r\n          [floatingLabel]=\"true\"\r\n          [lstItem]=\"template.lstStageStatus\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [(_ngModel)]=\"selectedAction.To_StageStatus\"\r\n        ></extend-select>\r\n      </div>\r\n\r\n      <!-- <box [height]=\"16\"></box> -->\r\n      <nz-divider></nz-divider>\r\n\r\n      @if (template.editorOption.AllowbackInUse) {\r\n        <extend-checkbox\r\n          [label]=\"'Allow back'\"\r\n          [labelSpan]=\"0\"\r\n          [(_ngModel)]=\"selectedAction.allowBack\"\r\n          (_ngModelChange)=\"onchangeAllowBack(selectedAction)\"\r\n        ></extend-checkbox>\r\n      }\r\n\r\n      <box [height]=\"16\"></box>\r\n\r\n      @if (selectedAction.allowBack) {\r\n        <div>\r\n          <strong\r\n            >{{ selectedAction.getToStageCode(lstStage) }} -> {{ selectedAction.getFromStageCode(lstStage) }}</strong\r\n          >\r\n        </div>\r\n        <div>{{ selectedAction.getToStageName(lstStage) }} -> {{ selectedAction.getFromStageName(lstStage) }}</div>\r\n\r\n        @if (selectedBackAction) {\r\n          <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n            <div nz-col [nzSpan]=\"8\">\r\n              <nz-form-item>\r\n                <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n                <nz-form-control [nzSpan]=\"24\">\r\n                  <nz-input-group class=\"full-width\">\r\n                    <input\r\n                      nz-input\r\n                      [(ngModel)]=\"selectedBackAction.ActionStatus\"\r\n                      [nzAutocomplete]=\"auto\"\r\n                      (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n                      (click)=\"lstActionStatusFiltered = template.lstActionStatus\"\r\n                      (keyup.enter)=\"onenterAotu(selectedBackAction.ActionStatus)\"\r\n                      (blur)=\"onenterAotu(selectedBackAction.ActionStatus)\"\r\n                    />\r\n                    <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n                      @for (option of lstActionStatusFiltered; track $index) {\r\n                        <nz-auto-option [nzValue]=\"option.Code\" [nzLabel]=\"option.Code\">\r\n                          {{ option.Code }}\r\n                          <icon-delete\r\n                            *ngIf=\"checkRemoveableActionStatus(option.Code)\"\r\n                            style=\"float: right\"\r\n                            [size]=\"12\"\r\n                            (click)=\"handleClose(option.Code)\"\r\n                          ></icon-delete>\r\n                        </nz-auto-option>\r\n                      }\r\n                    </nz-autocomplete>\r\n                  </nz-input-group>\r\n                </nz-form-control>\r\n              </nz-form-item>\r\n            </div>\r\n\r\n            <extend-input\r\n              nz-col\r\n              [nzSpan]=\"8\"\r\n              [label]=\"'Action text'\"\r\n              [floatingLabel]=\"true\"\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              [floatingLabel]=\"true\"\r\n              [lstItem]=\"template.lstActionType\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [(_ngModel)]=\"selectedBackAction.ActionType\"\r\n            ></extend-select>\r\n\r\n            <extend-select\r\n              nz-col\r\n              [nzSpan]=\"8\"\r\n              [label]=\"'Stage status'\"\r\n              [floatingLabel]=\"true\"\r\n              [lstItem]=\"template.lstStageStatus\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [(_ngModel)]=\"selectedBackAction.StageStatus\"\r\n            ></extend-select>\r\n\r\n            <extend-select\r\n              nz-col\r\n              [nzSpan]=\"8\"\r\n              [label]=\"'Next stage'\"\r\n              [floatingLabel]=\"true\"\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              [floatingLabel]=\"true\"\r\n              [lstItem]=\"template.lstStageStatus\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [(_ngModel)]=\"selectedBackAction.To_StageStatus\"\r\n            ></extend-select>\r\n          </div>\r\n        }\r\n      }\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #footerTplAction>\r\n    <div\r\n      nz-flex\r\n      [nzGap]=\"6\"\r\n      [nzJustify]=\"selectedAction && selectedAction.editorOption.drawerPosition == 'left' ? 'start' : 'end'\"\r\n    >\r\n      <button nz-button nzDanger nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n      <button nz-button nzDanger (click)=\"deleteAction(selectedAction!)\">Delete</button>\r\n      <button nz-button (click)=\"selectedAction = undefined\">Close</button>\r\n    </div>\r\n  </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- setting editor -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawSettingTitle\"\r\n  nzPlacement=\"right\"\r\n  [nzClosable]=\"false\"\r\n  [nzVisible]=\"settingVisible\"\r\n  (nzOnClose)=\"settingVisible = false\"\r\n>\r\n  <ng-template #drawSettingTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Editor </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <div class=\"form-item-no-bottom\">\r\n      <extend-checkbox [label]=\"'Show grid'\" [labelSpan]=\"0\" [(_ngModel)]=\"wfcSetting.ShowGrid\"></extend-checkbox>\r\n\r\n      <box [height]=\"16\"></box>\r\n    </div>\r\n  </ng-container>\r\n</nz-drawer>\r\n\r\n<!-- editor infomation -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawInfoTitle\"\r\n  nzPlacement=\"right\"\r\n  [nzClosable]=\"false\"\r\n  [nzVisible]=\"infoVisible\"\r\n  (nzOnClose)=\"infoVisible = false\"\r\n>\r\n  <ng-template #drawInfoTitle> <nz-icon nzType=\"info-circle\"></nz-icon> &nbsp; Infomation </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <p>1. C\u00E1c th\u00E0nh ph\u1EA7n: Stage or Node (stag, node quy tr\u00ECnh), Action or Connector (\u0111\u01B0\u1EDDng n\u1ED1i gi\u1EEFa c\u00E1c stage)</p>\r\n    <p>2. Save \u0111\u1EC3 load c\u00E1c th\u00F4ng tin: Stage status, Action type</p>\r\n    <p>\r\n      3. N\u1ED1i 2 node (t\u1EA1o connector t\u01B0\u01A1ng \u0111\u01B0\u01A1ng t\u1EA1o action):\r\n      <br />- Click ch\u1EA5m cam t\u1EEB Node ngu\u1ED3n \u0111\u1EBFn ch\u1EA5m xanh c\u1EE7a Node \u0111\u00EDch (ho\u1EB7c click v\u00E0o Node \u0111\u00EDch), c\u00F3 th\u1EC3 click th\u00E0nh\r\n      nhi\u1EC1u \u0111i\u1EC3m \u0111\u1EC3 t\u1EA1o \u0111\u01B0\u1EDDng n\u1ED1i cong<br />- Khi hover connector chuy\u1EC3n sang m\u1EA7u \u0111\u1ECF c\u00F3 th\u1EC3 click \u0111\u00FAp \u0111\u1EC3 th\u00EAm m\u1ED9t \u0111i\u1EC3m\r\n      c\u1EE7a connector<br />- Khi hover l\u00EAn \u0111i\u1EC3m c\u1EE7a connector c\u00F3 th\u1EC3 di chuy\u1EC3n \u0111i\u1EC3m \u0111\u00F3 b\u1EB1ng c\u00E1ch nh\u1EA5n gi\u1EEF chu\u1ED9t v\u00E0 k\u00E9o th\u1EA3\r\n      \u0111\u1EBFn v\u1ECB tr\u00ED m\u1EDBi<br />- Chu\u1ED9t ph\u1EA3i v\u00E0o \u0111i\u1EC3m n\u1ED1i connector \u0111\u1EC3 xo\u00E1 \u0111i\u1EC3m \u0111\u00F3\r\n    </p>\r\n  </ng-container>\r\n</nz-drawer>\r\n\r\n<!-- action rule modal -->\r\n<nz-modal\r\n  [(nzVisible)]=\"actionRuleModalVisible\"\r\n  [nzMaskClosable]=\"false\"\r\n  [nzClosable]=\"false\"\r\n  [nzKeyboard]=\"true\"\r\n  [nzWidth]=\"'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'\">Rule type</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%}.canvas-content{outline:1px dashed red}.canvas-content.panning{cursor:grab}.canvas-content.panning:active{cursor:grabbing}.workflow-canvas.panning{cursor:grab}.workflow-canvas.panning:active{cursor:grabbing}.workflow-canvas.connecting,.workflow-canvas.connecting .workflow-node{cursor:crosshair}.workflow-node{position:absolute;width:160px;cursor:grab;-webkit-user-select:none;user-select:none;z-index:2}.workflow-node:active{cursor:grabbing}.workflow-node.connecting-source,.workflow-node.selected,.workflow-node:hover:not(.workflow-node-start,.workflow-node-end){outline:2px dashed #1890ff}.workflow-node .title{font-weight:600;margin-bottom:6px}.workflow-node-start{width:0px}.workflow-node-start.connecting-source,.workflow-node-start.selected,.workflow-node-start:hover{outline:unset}.workflow-node-start.connecting-source nz-tag,.workflow-node-start.selected nz-tag,.workflow-node-start:hover nz-tag{outline:2px dashed}.workflow-node-start nz-tag{position:relative;top:45px;right:35px}.workflow-node-end{width:0px}.workflow-node-end.connecting-source,.workflow-node-end.selected,.workflow-node-end:hover{outline:unset}.workflow-node-end.connecting-source nz-tag,.workflow-node-end.selected nz-tag,.workflow-node-end:hover nz-tag{outline:2px dashed}.workflow-node-end nz-tag{position:relative;top:45px;right:32px}.connector{position:absolute;top:39px;width:12px;height:12px;background:#1890ff;border-radius:50%;transform:translateY(-50%);cursor:crosshair;transition:box-shadow .15s ease-out,transform .15s ease-out}.connector:hover{box-shadow:0 0 0 3px #1890ff4d;transform:translateY(-50%) scale(1.15)}.connector-right{right:-8px;background:orange}.connector-right.reverse,.connector-left{left:-8px}.connector-left.reverse{left:unset;right:-8px}.connector-start{width:16px;height:16px;right:-8px;background:green;box-shadow:0 0 0 3px #1890ff4d}.connector-end{width:16px;height:16px;left:-8px;background:#000;box-shadow:0 0 0 3px #1890ff4d}.edge{cursor:pointer;stroke:#1890ff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;fill:none;transition:stroke .15s ease}.edge-hit{stroke:transparent;stroke-width:18px!important;fill:none;cursor:pointer}.edge-hit:hover+.edge{stroke:#ff4d4f;stroke-width:2}.workflow-canvas.dragging-point .edge-hit{pointer-events:none}.edge:hover+.edge-label{fill:#1890ff;font-weight:500}.edge-label{font-size:12px;fill:#555;pointer-events:none;-webkit-user-select:none;user-select:none}.blue{stroke:#1890ff!important}.red{stroke:#ff4d4f!important;box-shadow:0 0 0 3px #1890ff4d!important}.workflow-svg{background:transparent;overflow:visible}.waypoint{position:absolute;width:10px;height:10px;background:#ff4d4f;border-radius:50%;transform:translate(-50%,-50%) scale(1);cursor:move;z-index:1;transition:transform .12s ease-out,background-color .12s ease-out,box-shadow .12s ease-out}.waypoint:hover{background:#ff7875;transform:translate(-50%,-50%) scale(1.25);box-shadow:0 0 0 4px #ff787559}.waypoint.dragging{transition:none;transform:translate(-50%,-50%) scale(1.15);pointer-events:none}.workflow-canvas.dragging-point svg{cursor:grabbing}.selection-box{position:absolute;border:1px dashed #1890ff;background:#1890ff1a;pointer-events:none}.toolbar{position:absolute;top:8px;left:8px;display:flex;gap:4px;padding:6px;background:#fff;border-radius:6px;box-shadow:0 2px 8px #00000026;z-index:100}.toolbar .divider{width:1px;background:#e5e5e5;margin:0 2px}.zoom-toolbar{position:absolute;top:8px;left:8px;z-index:10;display:flex;align-items:center;gap:6px;background:#fff;padding:4px 6px;border-radius:6px;box-shadow:0 2px 6px #00000026}.zoom-toolbar span{min-width:40px;text-align:center;font-size:12px}nz-tag.selected{outline:2px dashed #1890ff}.grid-layer{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(rgba(0,0,0,.08) 1px,transparent 1px);background-size:20px 20px}.grid-layer{background-image:linear-gradient(to right,rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.06) 1px,transparent 1px);background-size:20px 20px}.editable-tag{background:#fff;border-style:dashed}::ng-deep .minimap{position:absolute;width:180px;height:125px;top:0;right:0;background-color:#eee;border:1px solid #aaa;opacity:.9;z-index:1}::ng-deep .minimap-node{position:absolute;background-color:#607a86}::ng-deep .minimap-node-round{position:absolute;background-color:#607a86;border-radius:10px}::ng-deep .minimap-node-round-start{background-color:green}::ng-deep .minimap-node-round-end{background-color:#000}::ng-deep .minimap-viewport{position:absolute;box-sizing:border-box;background-color:#4f6f7e66;z-index:1;cursor:move}::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:16px;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: i4$2.NzDrawerComponent, selector: "nz-drawer", inputs: ["nzContent", "nzCloseIcon", "nzClosable", "nzMaskClosable", "nzMask", "nzCloseOnNavigation", "nzNoAnimation", "nzKeyboard", "nzTitle", "nzExtra", "nzFooter", "nzPlacement", "nzSize", "nzMaskStyle", "nzBodyStyle", "nzWrapClassName", "nzWidth", "nzHeight", "nzZIndex", "nzOffsetX", "nzOffsetY", "nzVisible"], outputs: ["nzOnViewInit", "nzOnClose", "nzVisibleChange"], exportAs: ["nzDrawer"] }, { kind: "directive", type: i4$2.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$4.NzRadioComponent, selector: "[nz-radio],[nz-radio-button]", inputs: ["nzValue", "nzDisabled", "nzAutoFocus", "nz-radio-button"], exportAs: ["nzRadio"] }, { kind: "component", type: i6$4.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$3.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.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", "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: i5$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i5$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: 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: i6$2.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: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.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: i8$1.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WorkflowEditorComponent, decorators: [{
             type: Component,
@@ -12386,7 +12451,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         IconAdd,
                         NzModalFooterDirective,
                         DicDomainSelectComponent$1,
-                    ], template: "<div\r\n  #canvasRef\r\n  class=\"workflow-canvas\"\r\n  [class.connecting]=\"!!connectingFrom\"\r\n  [class.dragging-point]=\"!!draggingPoint\"\r\n  [style.width.px]=\"getCanvasWidth()\"\r\n  [style.height.px]=\"getCanvasHeight()\"\r\n  (mousedown)=\"onMouseDownCanvas($event)\"\r\n  (mousemove)=\"onMouseMoveCanvas($event)\"\r\n  (mouseup)=\"onMouseUpCanvas($event)\"\r\n  (click)=\"onClickCanvas($event)\"\r\n>\r\n  <!-- \r\n\r\n  [style.width.px]=\"getCanvasWidth()\"\r\n  [style.height.px]=\"getCanvasHeight()\" \r\n\r\n  [style.width.px]=\"CANVAS_WIDTH\"\r\n  [style.height.px]=\"CANVAS_HEIGHT\"\r\n\r\n  style=\"width: 100%; height: calc(100vh - 120px)\"\r\n  \r\n  -->\r\n\r\n  <div class=\"toolbar\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Editor setting\" (click)=\"settingVisible = true\">\r\n      <nz-icon nzType=\"setting\"></nz-icon>\r\n    </button>\r\n\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Infomation\" (click)=\"infoVisible = true\">\r\n      <nz-icon nzType=\"info-circle\"></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Template setting\" (click)=\"drawTemplateVisibel = true\">\r\n      <nz-icon nzType=\"setting\"></nz-icon> T\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <button nz-button nzSize=\"small\" nzDanger [nzLoading]=\"!ready\" nz-tooltip=\"Save (Ctrl + S)\" (click)=\"save()\">\r\n      <nz-icon nzType=\"save\"></nz-icon>\r\n    </button>\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Add stage\" (click)=\"addStage()\">\r\n      <nz-icon nzType=\"plus\" class=\"color-primary\"></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      [nzType]=\"isMoveMode ? 'primary' : 'default'\"\r\n      nz-tooltip=\"Move mode\"\r\n      (click)=\"isMoveMode = true\"\r\n    >\r\n      <nz-icon><img src=\"/assets/icon/hand-palm.png\" width=\"19\" height=\"19\" /></nz-icon>\r\n    </button>\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      [nzType]=\"!isMoveMode ? 'primary' : 'default'\"\r\n      nz-tooltip=\"Select mode\"\r\n      (click)=\"isMoveMode = false\"\r\n    >\r\n      <nz-icon><img src=\"/assets/icon/cursor.png\" width=\"19\" height=\"19\" /></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <!-- UNDO / REDO -->\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      nzType=\"default\"\r\n      [disabled]=\"undoStack.length === 0\"\r\n      nz-tooltip=\"Undo\"\r\n      (click)=\"undo()\"\r\n    >\r\n      <nz-icon nzType=\"undo\"></nz-icon>\r\n    </button>\r\n\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      nzType=\"default\"\r\n      [disabled]=\"redoStack.length === 0\"\r\n      nz-tooltip=\"Redo\"\r\n      (click)=\"redo()\"\r\n    >\r\n      <nz-icon nzType=\"redo\"></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <!-- ALIGN -->\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignLeft()\">\u27F8</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignCenter()\">\u2261</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignRight()\">\u27F9</button>\r\n\r\n    <span class=\"divider\"></span>\r\n\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignTop()\">\u21D1</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignMiddle()\">\u2550</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignBottom()\">\u21D3</button>\r\n\r\n    <span class=\"divider\"></span>\r\n\r\n    <!-- DISTRIBUTE -->\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeHorizontal()\">\r\n      \u21C4\r\n    </button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeVertical()\">\u21C5</button>\r\n  </div>\r\n\r\n  <div\r\n    class=\"canvas-content\"\r\n    [class.panning]=\"isMoveMode\"\r\n    [style.transform]=\"'translate(' + template.editorOption.panX + 'px,' + template.editorOption.panY + 'px)'\"\r\n  >\r\n    <!-- GRID -->\r\n    <div *ngIf=\"wfcSetting.ShowGrid\" class=\"grid-layer\"></div>\r\n\r\n    <!-- <div class=\"zoom-toolbar\">\r\n      <button nz-button nzSize=\"small\" (click)=\"zoomOut()\">\u2212</button>\r\n      <span>{{ zoom * 100 | number: \"1.0-0\" }}%</span>\r\n      <button nz-button nzSize=\"small\" (click)=\"zoomIn()\">+</button>\r\n    </div> -->\r\n\r\n    <!-- SVG EDGES -->\r\n    <svg #svg class=\"edges-layer\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\">\r\n      <g [attr.transform]=\"svgTransform\">\r\n        <!-- DEFS -->\r\n        <defs>\r\n          <!-- glow effect -->\r\n          <filter id=\"edge-glow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\r\n            <feGaussianBlur stdDeviation=\"2\" result=\"blur\" />\r\n            <feMerge>\r\n              <feMergeNode in=\"blur\" />\r\n              <feMergeNode in=\"SourceGraphic\" />\r\n            </feMerge>\r\n          </filter>\r\n\r\n          <!-- arrow markers -->\r\n          <marker\r\n            id=\"arrow-blue\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            refX=\"10\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"blue\" d=\"M0,0 L10,5 L0,10\"></path>\r\n          </marker>\r\n\r\n          <marker\r\n            id=\"arrow-red\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            refX=\"10\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"red\" d=\"M0,0 L10,5 L0,10\"></path>\r\n          </marker>\r\n\r\n          <marker\r\n            id=\"arrow-blue-start\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            viewBox=\"0 0 10 10\"\r\n            refX=\"0\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"blue\" d=\"M10,0 L0,5 L10,10\"></path>\r\n          </marker>\r\n\r\n          <marker\r\n            id=\"arrow-red-start\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            viewBox=\"0 0 10 10\"\r\n            refX=\"0\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"red\" d=\"M10,0 L0,5 L10,10\"></path>\r\n          </marker>\r\n        </defs>\r\n\r\n        <!-- EDGES B\u00CCNH TH\u01AF\u1EDCNG -->\r\n        <ng-container *ngFor=\"let e of normalEdges; let i = index\">\r\n          <path\r\n            class=\"edge\"\r\n            [attr.id]=\"'edge-path-' + i\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            marker-end=\"url(#arrow-blue)\"\r\n            [attr.marker-start]=\"e.allowBack ? 'url(#arrow-blue-start)' : ''\"\r\n          ></path>\r\n\r\n          <path\r\n            class=\"edge-hit\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            (mouseenter)=\"onMouseEnterEdge(e)\"\r\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\r\n            (click)=\"onClickEdge(e, $event)\"\r\n          ></path>\r\n\r\n          <!-- LABEL -->\r\n          <!-- text b\u00E1m theo line -->\r\n          <!-- \r\n          <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\r\n            <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.ActionText }}\r\n            </textPath>\r\n          </text> \r\n          \r\n          <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\r\n            <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.labelBack }}\r\n            </textPath>\r\n          </text>\r\n          -->\r\n\r\n          <!-- text th\u1EB3ng n\u1EB1m ngang -->\r\n          <text\r\n            *ngIf=\"e.ActionText\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.ActionText }}\r\n          </text>\r\n\r\n          <text\r\n            *ngIf=\"e.allowBack && e.labelBack\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.labelBack }}\r\n          </text>\r\n        </ng-container>\r\n\r\n        <!-- EDGE \u0110ANG HOVER (LU\u00D4N TR\u00CAN C\u00D9NG) -->\r\n        <ng-container *ngFor=\"let e of hoverEdges; let i = index\">\r\n          <path\r\n            class=\"edge red\"\r\n            [attr.id]=\"'edge-path-hover-' + i\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            marker-end=\"url(#arrow-red)\"\r\n            [attr.marker-start]=\"e.allowBack ? 'url(#arrow-red-start)' : ''\"\r\n          ></path>\r\n\r\n          <path\r\n            class=\"edge-hit\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\r\n            (click)=\"onClickEdge(e, $event)\"\r\n          ></path>\r\n\r\n          <!-- LABEL -->\r\n          <!-- <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\r\n            <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.ActionText }}\r\n            </textPath>\r\n          </text>\r\n\r\n          <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\r\n            <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.labelBack }}\r\n            </textPath>\r\n          </text> -->\r\n\r\n          <text\r\n            *ngIf=\"e.ActionText\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.ActionText }}\r\n          </text>\r\n\r\n          <text\r\n            *ngIf=\"e.allowBack && e.labelBack\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.labelBack }}\r\n          </text>\r\n        </ng-container>\r\n\r\n        <!-- preview -->\r\n        <path\r\n          *ngIf=\"connectingFrom\"\r\n          class=\"edge\"\r\n          [attr.d]=\"buildPreviewPath()\"\r\n          stroke-dasharray=\"5,5\"\r\n          marker-end=\"url(#arrow-blue)\"\r\n        ></path>\r\n      </g>\r\n    </svg>\r\n\r\n    <div\r\n      *ngIf=\"isSelecting && selectStart && selectEnd\"\r\n      class=\"selection-box\"\r\n      [style.left.px]=\"Math.min(selectStart.x, selectEnd.x)\"\r\n      [style.top.px]=\"Math.min(selectStart.y, selectEnd.y)\"\r\n      [style.width.px]=\"Math.abs(selectEnd.x - selectStart.x)\"\r\n      [style.height.px]=\"Math.abs(selectEnd.y - selectStart.y)\"\r\n    ></div>\r\n\r\n    <!-- lstStage -->\r\n    @for (n of lstStage; track $index) {\r\n      <!-- START NODE -->\r\n      @if (n.StageType === \"_start_\") {\r\n        <nz-card\r\n          class=\"workflow-node workflow-node-start\"\r\n          [attr.data-id]=\"n.Code\"\r\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n          [style.left.px]=\"n.editorOption.x\"\r\n          [style.top.px]=\"n.editorOption.y\"\r\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n          nzSize=\"small\"\r\n          (mousedown)=\"onMouseDownNode($event, n)\"\r\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n        >\r\n          <nz-tag [nzColor]=\"'green'\"> START </nz-tag>\r\n\r\n          @if (!n.editorOption.isReverse) {\r\n            <!-- connector RIGHT: output -->\r\n            <div class=\"connector connector-right connector-start\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n          } @else {\r\n            <div\r\n              class=\"connector connector-right connector-start reverse\"\r\n              (click)=\"onClickConnector($event, n, 'right')\"\r\n            ></div>\r\n          }\r\n        </nz-card>\r\n      }\r\n      <!-- END NODE -->\r\n      @else if (n.StageType === \"_end_\") {\r\n        <nz-card\r\n          class=\"workflow-node workflow-node-end\"\r\n          [attr.data-id]=\"n.Code\"\r\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n          [style.left.px]=\"n.editorOption.x\"\r\n          [style.top.px]=\"n.editorOption.y\"\r\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n          nzSize=\"small\"\r\n          (mousedown)=\"onMouseDownNode($event, n)\"\r\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n        >\r\n          <nz-tag [nzColor]=\"'red'\"> END </nz-tag>\r\n\r\n          @if (!n.editorOption.isReverse) {\r\n            <!-- connector LEFT: input -->\r\n            <div class=\"connector connector-left connector-end\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n          } @else {\r\n            <div\r\n              class=\"connector connector-left connector-end reverse\"\r\n              (click)=\"onClickConnector($event, n, 'left')\"\r\n            ></div>\r\n          }\r\n        </nz-card>\r\n      } @else {\r\n        <nz-card\r\n          class=\"workflow-node\"\r\n          [attr.data-id]=\"n.Code\"\r\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n          [style.left.px]=\"n.editorOption.x\"\r\n          [style.top.px]=\"n.editorOption.y\"\r\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n          nzSize=\"small\"\r\n          (mousedown)=\"onMouseDownNode($event, n)\"\r\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n        >\r\n          <div class=\"title\">{{ n.Code }}</div>\r\n\r\n          <div>{{ n.Name }}</div>\r\n\r\n          @if (!n.editorOption.isReverse) {\r\n            <!-- connector RIGHT: output -->\r\n            <div class=\"connector connector-right\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n\r\n            <!-- connector LEFT: input -->\r\n            <div class=\"connector connector-left\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n          } @else {\r\n            <div class=\"connector connector-right reverse\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n            <div class=\"connector connector-left reverse\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n          }\r\n        </nz-card>\r\n      }\r\n    }\r\n\r\n    <!-- POINTS -->\r\n    @for (p of connectingPoints; track $index) {\r\n      @if (p != draggingPoint) {\r\n        <div\r\n          class=\"waypoint\"\r\n          [style.left.px]=\"p.x\"\r\n          [style.top.px]=\"p.y\"\r\n          (mousedown)=\"onmousedownPoint($event, p)\"\r\n          (contextmenu)=\"onRightClickPoint($event, hoverAction!, $index)\"\r\n        ></div>\r\n      } @else {\r\n        <div\r\n          class=\"waypoint dragging\"\r\n          [style.left.px]=\"p.x\"\r\n          [style.top.px]=\"p.y\"\r\n          (mousedown)=\"onmousedownPoint($event, p)\"\r\n        ></div>\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<!-- drawer TEMPLATE -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawTemplateTitle\"\r\n  nzPlacement=\"right\"\r\n  [nzWidth]=\"500\"\r\n  [nzClosable]=\"false\"\r\n  [nzVisible]=\"drawTemplateVisibel\"\r\n  [nzFooter]=\"footerTplTemplate\"\r\n  (nzOnClose)=\"drawTemplateVisibel = false\"\r\n>\r\n  <ng-template #drawTemplateTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Template </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <extend-select\r\n      [label]=\"'Org'\"\r\n      [lstItem]=\"lstOrg\"\r\n      [valueField]=\"'App_Org_Id'\"\r\n      [displayFields]=\"['Name', 'Code']\"\r\n      [(_ngModel)]=\"template.App_Org_Id\"\r\n    ></extend-select>\r\n    <extend-input [label]=\"'Code'\" [(_ngModel)]=\"template.Code\"></extend-input>\r\n    <extend-input [label]=\"'Name'\" [(_ngModel)]=\"template.Name\"></extend-input>\r\n    <extend-select\r\n      [label]=\"'Type'\"\r\n      [lstItem]=\"template.lstTemplateType\"\r\n      [valueField]=\"'Code'\"\r\n      [displayFields]=\"['Code', 'Name']\"\r\n      [(_ngModel)]=\"template.DocType\"\r\n    ></extend-select>\r\n    <extend-textarea [label]=\"'Desscription'\" [(_ngModel)]=\"template.Description\"></extend-textarea>\r\n    <extend-select\r\n      [label]=\"'Print template'\"\r\n      [lstItem]=\"template.lstTemplatePrint\"\r\n      [valueField]=\"'Code'\"\r\n      [displayFields]=\"['Code', 'Name']\"\r\n      [(_ngModel)]=\"template.TemplatePrint\"\r\n    ></extend-select>\r\n    <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          [floatingLabel]=\"true\"\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          [floatingLabel]=\"true\"\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          [floatingLabel]=\"true\"\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          [floatingLabel]=\"true\"\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          [floatingLabel]=\"true\"\r\n          [precision]=\"1\"\r\n          [(_ngModel)]=\"selectedStage.NumberDay\"\r\n        ></extend-input-number>\r\n      </div>\r\n\r\n      @if (selectedStage.editorOption) {\r\n        @if ([\"start\", \"node\", \"end\"].includes(selectedStage.StageType.toLowerCase())) {\r\n          <extend-checkbox\r\n            [label]=\"'Reverse'\"\r\n            [labelSpan]=\"0\"\r\n            [(_ngModel)]=\"selectedStage.editorOption.isReverse\"\r\n          ></extend-checkbox>\r\n        }\r\n\r\n        <extend-checkbox\r\n          [label]=\"'Require user action'\"\r\n          [labelSpan]=\"0\"\r\n          [(_ngModel)]=\"selectedStage.IsRequireUser\"\r\n        ></extend-checkbox>\r\n      }\r\n\r\n      <box [height]=\"16\"></box>\r\n\r\n      <div nz-row [nzGutter]=\"16\">\r\n        <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;List Action</h3>\r\n        <div nz-col>\r\n          <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"addAction()\">\r\n            <nz-icon nzType=\"plus\"></nz-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <nz-table nzSize=\"small\" [nzData]=\"lstActionOfCurrentStage\" [nzShowPagination]=\"false\" [nzNoResult]=\"'&nbsp;'\">\r\n        <thead>\r\n          <tr [hidden]=\"true\">\r\n            <th nzWidth=\"40px\"></th>\r\n            <th></th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (action of lstActionOfCurrentStage; track $index) {\r\n            <tr (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                    [floatingLabel]=\"true\"\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                    [floatingLabel]=\"true\"\r\n                    [lstItem]=\"template.lstActionType\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [(_ngModel)]=\"action.ActionType\"\r\n                  ></extend-select>\r\n\r\n                  <extend-select\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Stage status'\"\r\n                    [floatingLabel]=\"true\"\r\n                    [lstItem]=\"template.lstStageStatus\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [(_ngModel)]=\"action.StageStatus\"\r\n                  ></extend-select>\r\n\r\n                  <extend-select\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Next stage'\"\r\n                    [floatingLabel]=\"true\"\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                    [floatingLabel]=\"true\"\r\n                    [lstItem]=\"template.lstStageStatus\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [(_ngModel)]=\"action.To_StageStatus\"\r\n                  ></extend-select>\r\n\r\n                  <extend-select\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Process status'\"\r\n                    [floatingLabel]=\"true\"\r\n                    [lstItem]=\"template.lstProcessStatus\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\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)=\"onselectedRoleEmail(action)\"\r\n                  ></extend-select>\r\n                </div>\r\n                <box [height]=\"8\"></box>\r\n                <div nz-row>Email action</div>\r\n                <div nz-row>\r\n                  <extend-select\r\n                    nz-col\r\n                    nzSpan=\"24\"\r\n                    [size]=\"'small'\"\r\n                    [lstItem]=\"lstEmailAction\"\r\n                    [valueField]=\"'ID'\"\r\n                    [displayField]=\"'Name'\"\r\n                    [multiple]=\"true\"\r\n                    [(_ngModel)]=\"action._lstEmailActionId\"\r\n                    (_ngModelChange)=\"onselectedRoleEmail(action)\"\r\n                  ></extend-select>\r\n                </div>\r\n                <box [height]=\"8\"></box>\r\n                <div *ngIf=\"action._lstEmailActionId && action._lstEmailActionId.length\" nz-row>Email template</div>\r\n                <div *ngIf=\"action._lstEmailActionId && action._lstEmailActionId.length\" nz-row>\r\n                  <div nz-col nzSpan=\"1\"></div>\r\n                  <div nz-col nzSpan=\"23\" class=\"form-item-no-bottom\" style=\"font-weight: normal\">\r\n                    @for (actionRef of lstActionRefOf(action); track $index) {\r\n                      <div nz-row>\r\n                        <extend-select\r\n                          nz-col\r\n                          nzSpan=\"24\"\r\n                          [labelSpan]=\"12\"\r\n                          [size]=\"'small'\"\r\n                          [label]=\"emailActionText(actionRef.To_WF_TemplateStageAction_Id)\"\r\n                          [lstItem]=\"lstEmailTemplate\"\r\n                          [valueField]=\"'Code'\"\r\n                          [displayFields]=\"['Code', 'Name']\"\r\n                          [(_ngModel)]=\"actionRef.TemplateMail\"\r\n                        ></extend-select>\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n                <box [height]=\"8\"></box>\r\n                <div nz-row [nzGutter]=\"8\">\r\n                  Action rule\r\n                  <button nz-button nzType=\"text\" nzSize=\"small\" (click)=\"actionRuleModalVisible = true\">\r\n                    <nz-icon nzType=\"export\" nzTheme=\"outline\" class=\"color-primary\" />\r\n                  </button>\r\n                  <button\r\n                    *ngIf=\"action.WF_TransitionsRule_Id\"\r\n                    nz-button\r\n                    nzType=\"text\"\r\n                    nzSize=\"small\"\r\n                    (click)=\"deleteActionRule(action)\"\r\n                  >\r\n                    <nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn\" />\r\n                  </button>\r\n                </div>\r\n              </td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </nz-table>\r\n\r\n      <box [height]=\"16\"></box>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-template #footerTplNode>\r\n    <div\r\n      nz-flex\r\n      [nzGap]=\"6\"\r\n      [nzJustify]=\"\r\n        selectedStage && selectedStage.editorOption && selectedStage.editorOption.drawerPosition == 'left'\r\n          ? 'start'\r\n          : 'end'\r\n      \"\r\n    >\r\n      <button nz-button nzDanger nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n      <button nz-button (click)=\"selectedStage = undefined\">Close</button>\r\n      <button\r\n        *ngIf=\"selectedStage && ['START', 'END'].indexOf(selectedStage.StageType) < 0\"\r\n        nz-button\r\n        nzDanger\r\n        (click)=\"deleteStage()\"\r\n      >\r\n        Delete\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- drawer ACTION -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawerTitleAction\"\r\n  nzTitle=\"ACTION\"\r\n  [nzPlacement]=\"selectedAction?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\r\n  [nzClosable]=\"false\"\r\n  [nzWidth]=\"750\"\r\n  [nzVisible]=\"!!selectedAction\"\r\n  [nzFooter]=\"footerTplAction\"\r\n  (nzOnClose)=\"selectedAction = undefined\"\r\n>\r\n  <ng-template #drawerTitleAction>\r\n    <div nz-row nzJustify=\"space-between\">\r\n      @if (selectedAction && selectedAction.editorOption) {\r\n        @if (selectedAction.editorOption.drawerPosition == \"left\") {\r\n          <button\r\n            nz-button\r\n            nzSize=\"small\"\r\n            nz-tooltip=\"To the right\"\r\n            (click)=\"selectedAction.editorOption.drawerPosition = 'right'\"\r\n          >\r\n            <nz-icon nzType=\"double-right\"></nz-icon>\r\n          </button>\r\n          ACTION\r\n        } @else {\r\n          ACTION\r\n          <button\r\n            nz-button\r\n            nzSize=\"small\"\r\n            nz-tooltip=\"To the left\"\r\n            (click)=\"selectedAction.editorOption.drawerPosition = 'left'\"\r\n          >\r\n            <nz-icon nzType=\"double-left\"></nz-icon>\r\n          </button>\r\n        }\r\n      }\r\n    </div>\r\n  </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <ng-container *ngIf=\"selectedAction\">\r\n      <div>\r\n        <strong\r\n          >{{ selectedAction.getFromStageCode(lstStage) }} -> {{ selectedAction.getToStageCode(lstStage) }}</strong\r\n        >\r\n      </div>\r\n      <div>{{ selectedAction.getFromStageName(lstStage) }} -> {{ selectedAction.getToStageName(lstStage) }}</div>\r\n\r\n      <box [height]=\"16\"></box>\r\n\r\n      <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n        <div nz-col [nzSpan]=\"8\">\r\n          <nz-form-item>\r\n            <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n            <nz-form-control [nzSpan]=\"24\">\r\n              <nz-input-group class=\"full-width\">\r\n                <input\r\n                  nz-input\r\n                  [(ngModel)]=\"selectedAction.ActionStatus\"\r\n                  [nzAutocomplete]=\"auto\"\r\n                  (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n                  (click)=\"lstActionStatusFiltered = template.lstActionStatus\"\r\n                  (keyup.enter)=\"onenterAotu(selectedAction.ActionStatus)\"\r\n                  (blur)=\"onenterAotu(selectedAction.ActionStatus)\"\r\n                />\r\n                <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n                  @for (option of lstActionStatusFiltered; track $index) {\r\n                    <nz-auto-option [nzValue]=\"option.Code\" [nzLabel]=\"option.Code\">\r\n                      {{ option.Code }}\r\n                      <icon-delete\r\n                        *ngIf=\"checkRemoveableActionStatus(option.Code)\"\r\n                        style=\"float: right\"\r\n                        [size]=\"12\"\r\n                        (click)=\"handleClose(option.Code)\"\r\n                      ></icon-delete>\r\n                    </nz-auto-option>\r\n                  }\r\n                </nz-autocomplete>\r\n              </nz-input-group>\r\n            </nz-form-control>\r\n          </nz-form-item>\r\n        </div>\r\n\r\n        <extend-input\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Action text'\"\r\n          [floatingLabel]=\"true\"\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          [floatingLabel]=\"true\"\r\n          [lstItem]=\"template.lstActionType\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [(_ngModel)]=\"selectedAction.ActionType\"\r\n        ></extend-select>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Stage status'\"\r\n          [floatingLabel]=\"true\"\r\n          [lstItem]=\"template.lstStageStatus\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [(_ngModel)]=\"selectedAction.StageStatus\"\r\n        ></extend-select>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Next stage'\"\r\n          [floatingLabel]=\"true\"\r\n          [lstItem]=\"lstStage\"\r\n          [valueField]=\"'WF_TemplateStage_Id'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [(_ngModel)]=\"selectedAction.To_WF_TemplateStage_Id\"\r\n          (_ngModelChange)=\"onchangeNextStage(selectedAction)\"\r\n        ></extend-select>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Next stage status'\"\r\n          [floatingLabel]=\"true\"\r\n          [lstItem]=\"template.lstStageStatus\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [(_ngModel)]=\"selectedAction.To_StageStatus\"\r\n        ></extend-select>\r\n      </div>\r\n\r\n      <!-- <box [height]=\"16\"></box> -->\r\n      <nz-divider></nz-divider>\r\n\r\n      @if (template.editorOption.AllowbackInUse) {\r\n        <extend-checkbox\r\n          [label]=\"'Allow back'\"\r\n          [labelSpan]=\"0\"\r\n          [(_ngModel)]=\"selectedAction.allowBack\"\r\n          (_ngModelChange)=\"onchangeAllowBack(selectedAction)\"\r\n        ></extend-checkbox>\r\n      }\r\n\r\n      <box [height]=\"16\"></box>\r\n\r\n      @if (selectedAction.allowBack) {\r\n        <div>\r\n          <strong\r\n            >{{ selectedAction.getToStageCode(lstStage) }} -> {{ selectedAction.getFromStageCode(lstStage) }}</strong\r\n          >\r\n        </div>\r\n        <div>{{ selectedAction.getToStageName(lstStage) }} -> {{ selectedAction.getFromStageName(lstStage) }}</div>\r\n\r\n        @if (selectedBackAction) {\r\n          <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n            <div nz-col [nzSpan]=\"8\">\r\n              <nz-form-item>\r\n                <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n                <nz-form-control [nzSpan]=\"24\">\r\n                  <nz-input-group class=\"full-width\">\r\n                    <input\r\n                      nz-input\r\n                      [(ngModel)]=\"selectedBackAction.ActionStatus\"\r\n                      [nzAutocomplete]=\"auto\"\r\n                      (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n                      (click)=\"lstActionStatusFiltered = template.lstActionStatus\"\r\n                      (keyup.enter)=\"onenterAotu(selectedBackAction.ActionStatus)\"\r\n                      (blur)=\"onenterAotu(selectedBackAction.ActionStatus)\"\r\n                    />\r\n                    <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n                      @for (option of lstActionStatusFiltered; track $index) {\r\n                        <nz-auto-option [nzValue]=\"option.Code\" [nzLabel]=\"option.Code\">\r\n                          {{ option.Code }}\r\n                          <icon-delete\r\n                            *ngIf=\"checkRemoveableActionStatus(option.Code)\"\r\n                            style=\"float: right\"\r\n                            [size]=\"12\"\r\n                            (click)=\"handleClose(option.Code)\"\r\n                          ></icon-delete>\r\n                        </nz-auto-option>\r\n                      }\r\n                    </nz-autocomplete>\r\n                  </nz-input-group>\r\n                </nz-form-control>\r\n              </nz-form-item>\r\n            </div>\r\n\r\n            <extend-input\r\n              nz-col\r\n              [nzSpan]=\"8\"\r\n              [label]=\"'Action text'\"\r\n              [floatingLabel]=\"true\"\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              [floatingLabel]=\"true\"\r\n              [lstItem]=\"template.lstActionType\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [(_ngModel)]=\"selectedBackAction.ActionType\"\r\n            ></extend-select>\r\n\r\n            <extend-select\r\n              nz-col\r\n              [nzSpan]=\"8\"\r\n              [label]=\"'Stage status'\"\r\n              [floatingLabel]=\"true\"\r\n              [lstItem]=\"template.lstStageStatus\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [(_ngModel)]=\"selectedBackAction.StageStatus\"\r\n            ></extend-select>\r\n\r\n            <extend-select\r\n              nz-col\r\n              [nzSpan]=\"8\"\r\n              [label]=\"'Next stage'\"\r\n              [floatingLabel]=\"true\"\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              [floatingLabel]=\"true\"\r\n              [lstItem]=\"template.lstStageStatus\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [(_ngModel)]=\"selectedBackAction.To_StageStatus\"\r\n            ></extend-select>\r\n          </div>\r\n        }\r\n      }\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #footerTplAction>\r\n    <div\r\n      nz-flex\r\n      [nzGap]=\"6\"\r\n      [nzJustify]=\"selectedAction && selectedAction.editorOption.drawerPosition == 'left' ? 'start' : 'end'\"\r\n    >\r\n      <button nz-button nzDanger nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n      <button nz-button nzDanger (click)=\"deleteAction(selectedAction!)\">Delete</button>\r\n      <button nz-button (click)=\"selectedAction = undefined\">Close</button>\r\n    </div>\r\n  </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- setting editor -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawSettingTitle\"\r\n  nzPlacement=\"right\"\r\n  [nzClosable]=\"false\"\r\n  [nzVisible]=\"settingVisible\"\r\n  (nzOnClose)=\"settingVisible = false\"\r\n>\r\n  <ng-template #drawSettingTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Editor </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <div class=\"form-item-no-bottom\">\r\n      <extend-checkbox [label]=\"'Show grid'\" [labelSpan]=\"0\" [(_ngModel)]=\"wfcSetting.ShowGrid\"></extend-checkbox>\r\n\r\n      <box [height]=\"16\"></box>\r\n    </div>\r\n  </ng-container>\r\n</nz-drawer>\r\n\r\n<!-- editor infomation -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawInfoTitle\"\r\n  nzPlacement=\"right\"\r\n  [nzClosable]=\"false\"\r\n  [nzVisible]=\"infoVisible\"\r\n  (nzOnClose)=\"infoVisible = false\"\r\n>\r\n  <ng-template #drawInfoTitle> <nz-icon nzType=\"info-circle\"></nz-icon> &nbsp; Infomation </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <p>1. C\u00E1c th\u00E0nh ph\u1EA7n: Stage or Node (stag, node quy tr\u00ECnh), Action or Connector (\u0111\u01B0\u1EDDng n\u1ED1i gi\u1EEFa c\u00E1c stage)</p>\r\n    <p>2. Save \u0111\u1EC3 load c\u00E1c th\u00F4ng tin: Stage status, Action type</p>\r\n    <p>\r\n      3. N\u1ED1i 2 node (t\u1EA1o connector t\u01B0\u01A1ng \u0111\u01B0\u01A1ng t\u1EA1o action):\r\n      <br />- Click ch\u1EA5m cam t\u1EEB Node ngu\u1ED3n \u0111\u1EBFn ch\u1EA5m xanh c\u1EE7a Node \u0111\u00EDch (ho\u1EB7c click v\u00E0o Node \u0111\u00EDch), c\u00F3 th\u1EC3 click th\u00E0nh\r\n      nhi\u1EC1u \u0111i\u1EC3m \u0111\u1EC3 t\u1EA1o \u0111\u01B0\u1EDDng n\u1ED1i cong<br />- Khi hover connector chuy\u1EC3n sang m\u1EA7u \u0111\u1ECF c\u00F3 th\u1EC3 click \u0111\u00FAp \u0111\u1EC3 th\u00EAm m\u1ED9t \u0111i\u1EC3m\r\n      c\u1EE7a connector<br />- Khi hover l\u00EAn \u0111i\u1EC3m c\u1EE7a connector c\u00F3 th\u1EC3 di chuy\u1EC3n \u0111i\u1EC3m \u0111\u00F3 b\u1EB1ng c\u00E1ch nh\u1EA5n gi\u1EEF chu\u1ED9t v\u00E0 k\u00E9o th\u1EA3\r\n      \u0111\u1EBFn v\u1ECB tr\u00ED m\u1EDBi<br />- Chu\u1ED9t ph\u1EA3i v\u00E0o \u0111i\u1EC3m n\u1ED1i connector \u0111\u1EC3 xo\u00E1 \u0111i\u1EC3m \u0111\u00F3\r\n    </p>\r\n  </ng-container>\r\n</nz-drawer>\r\n\r\n<!-- action rule modal -->\r\n<nz-modal\r\n  [(nzVisible)]=\"actionRuleModalVisible\"\r\n  [nzMaskClosable]=\"false\"\r\n  [nzClosable]=\"false\"\r\n  [nzKeyboard]=\"true\"\r\n  [nzWidth]=\"'75vw'\"\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]=\"'250px'\">Rule type</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 [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 class=\"text-center\">\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%}.canvas-content{outline:1px dashed red}.canvas-content.panning{cursor:grab}.canvas-content.panning:active{cursor:grabbing}.workflow-canvas.panning{cursor:grab}.workflow-canvas.panning:active{cursor:grabbing}.workflow-canvas.connecting,.workflow-canvas.connecting .workflow-node{cursor:crosshair}.workflow-node{position:absolute;width:160px;cursor:grab;-webkit-user-select:none;user-select:none;z-index:2}.workflow-node:active{cursor:grabbing}.workflow-node.connecting-source,.workflow-node.selected,.workflow-node:hover:not(.workflow-node-start,.workflow-node-end){outline:2px dashed #1890ff}.workflow-node .title{font-weight:600;margin-bottom:6px}.workflow-node-start{width:0px}.workflow-node-start.connecting-source,.workflow-node-start.selected,.workflow-node-start:hover{outline:unset}.workflow-node-start.connecting-source nz-tag,.workflow-node-start.selected nz-tag,.workflow-node-start:hover nz-tag{outline:2px dashed}.workflow-node-start nz-tag{position:relative;top:45px;right:35px}.workflow-node-end{width:0px}.workflow-node-end.connecting-source,.workflow-node-end.selected,.workflow-node-end:hover{outline:unset}.workflow-node-end.connecting-source nz-tag,.workflow-node-end.selected nz-tag,.workflow-node-end:hover nz-tag{outline:2px dashed}.workflow-node-end nz-tag{position:relative;top:45px;right:32px}.connector{position:absolute;top:39px;width:12px;height:12px;background:#1890ff;border-radius:50%;transform:translateY(-50%);cursor:crosshair;transition:box-shadow .15s ease-out,transform .15s ease-out}.connector:hover{box-shadow:0 0 0 3px #1890ff4d;transform:translateY(-50%) scale(1.15)}.connector-right{right:-8px;background:orange}.connector-right.reverse,.connector-left{left:-8px}.connector-left.reverse{left:unset;right:-8px}.connector-start{width:16px;height:16px;right:-8px;background:green;box-shadow:0 0 0 3px #1890ff4d}.connector-end{width:16px;height:16px;left:-8px;background:#000;box-shadow:0 0 0 3px #1890ff4d}.edge{cursor:pointer;stroke:#1890ff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;fill:none;transition:stroke .15s ease}.edge-hit{stroke:transparent;stroke-width:18px!important;fill:none;cursor:pointer}.edge-hit:hover+.edge{stroke:#ff4d4f;stroke-width:2}.workflow-canvas.dragging-point .edge-hit{pointer-events:none}.edge:hover+.edge-label{fill:#1890ff;font-weight:500}.edge-label{font-size:12px;fill:#555;pointer-events:none;-webkit-user-select:none;user-select:none}.blue{stroke:#1890ff!important}.red{stroke:#ff4d4f!important;box-shadow:0 0 0 3px #1890ff4d!important}.workflow-svg{background:transparent;overflow:visible}.waypoint{position:absolute;width:10px;height:10px;background:#ff4d4f;border-radius:50%;transform:translate(-50%,-50%) scale(1);cursor:move;z-index:1;transition:transform .12s ease-out,background-color .12s ease-out,box-shadow .12s ease-out}.waypoint:hover{background:#ff7875;transform:translate(-50%,-50%) scale(1.25);box-shadow:0 0 0 4px #ff787559}.waypoint.dragging{transition:none;transform:translate(-50%,-50%) scale(1.15);pointer-events:none}.workflow-canvas.dragging-point svg{cursor:grabbing}.selection-box{position:absolute;border:1px dashed #1890ff;background:#1890ff1a;pointer-events:none}.toolbar{position:absolute;top:8px;left:8px;display:flex;gap:4px;padding:6px;background:#fff;border-radius:6px;box-shadow:0 2px 8px #00000026;z-index:100}.toolbar .divider{width:1px;background:#e5e5e5;margin:0 2px}.zoom-toolbar{position:absolute;top:8px;left:8px;z-index:10;display:flex;align-items:center;gap:6px;background:#fff;padding:4px 6px;border-radius:6px;box-shadow:0 2px 6px #00000026}.zoom-toolbar span{min-width:40px;text-align:center;font-size:12px}nz-tag.selected{outline:2px dashed #1890ff}.grid-layer{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(rgba(0,0,0,.08) 1px,transparent 1px);background-size:20px 20px}.grid-layer{background-image:linear-gradient(to right,rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.06) 1px,transparent 1px);background-size:20px 20px}.editable-tag{background:#fff;border-style:dashed}::ng-deep .minimap{position:absolute;width:180px;height:125px;top:0;right:0;background-color:#eee;border:1px solid #aaa;opacity:.9;z-index:1}::ng-deep .minimap-node{position:absolute;background-color:#607a86}::ng-deep .minimap-node-round{position:absolute;background-color:#607a86;border-radius:10px}::ng-deep .minimap-node-round-start{background-color:green}::ng-deep .minimap-node-round-end{background-color:#000}::ng-deep .minimap-viewport{position:absolute;box-sizing:border-box;background-color:#4f6f7e66;z-index:1;cursor:move}::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:16px;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"] }]
+                    ], template: "<div\r\n  #canvasRef\r\n  class=\"workflow-canvas\"\r\n  [class.connecting]=\"!!connectingFrom\"\r\n  [class.dragging-point]=\"!!draggingPoint\"\r\n  [style.width.px]=\"getCanvasWidth()\"\r\n  [style.height.px]=\"getCanvasHeight()\"\r\n  (mousedown)=\"onMouseDownCanvas($event)\"\r\n  (mousemove)=\"onMouseMoveCanvas($event)\"\r\n  (mouseup)=\"onMouseUpCanvas($event)\"\r\n  (click)=\"onClickCanvas($event)\"\r\n>\r\n  <!-- \r\n\r\n  [style.width.px]=\"getCanvasWidth()\"\r\n  [style.height.px]=\"getCanvasHeight()\" \r\n\r\n  [style.width.px]=\"CANVAS_WIDTH\"\r\n  [style.height.px]=\"CANVAS_HEIGHT\"\r\n\r\n  style=\"width: 100%; height: calc(100vh - 120px)\"\r\n  \r\n  -->\r\n\r\n  <div class=\"toolbar\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Editor setting\" (click)=\"settingVisible = true\">\r\n      <nz-icon nzType=\"setting\"></nz-icon>\r\n    </button>\r\n\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Infomation\" (click)=\"infoVisible = true\">\r\n      <nz-icon nzType=\"info-circle\"></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Template setting\" (click)=\"drawTemplateVisibel = true\">\r\n      <nz-icon nzType=\"setting\"></nz-icon> T\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <button nz-button nzSize=\"small\" nzDanger [nzLoading]=\"!ready\" nz-tooltip=\"Save (Ctrl + S)\" (click)=\"save()\">\r\n      <nz-icon nzType=\"save\"></nz-icon>\r\n    </button>\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Add stage\" (click)=\"addStage()\">\r\n      <nz-icon nzType=\"plus\" class=\"color-primary\"></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      [nzType]=\"isMoveMode ? 'primary' : 'default'\"\r\n      nz-tooltip=\"Move mode\"\r\n      (click)=\"isMoveMode = true\"\r\n    >\r\n      <nz-icon><img src=\"/assets/icon/hand-palm.png\" width=\"19\" height=\"19\" /></nz-icon>\r\n    </button>\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      [nzType]=\"!isMoveMode ? 'primary' : 'default'\"\r\n      nz-tooltip=\"Select mode\"\r\n      (click)=\"isMoveMode = false\"\r\n    >\r\n      <nz-icon><img src=\"/assets/icon/cursor.png\" width=\"19\" height=\"19\" /></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <!-- UNDO / REDO -->\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      nzType=\"default\"\r\n      [disabled]=\"undoStack.length === 0\"\r\n      nz-tooltip=\"Undo\"\r\n      (click)=\"undo()\"\r\n    >\r\n      <nz-icon nzType=\"undo\"></nz-icon>\r\n    </button>\r\n\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      nzType=\"default\"\r\n      [disabled]=\"redoStack.length === 0\"\r\n      nz-tooltip=\"Redo\"\r\n      (click)=\"redo()\"\r\n    >\r\n      <nz-icon nzType=\"redo\"></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <!-- ALIGN -->\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignLeft()\">\u27F8</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignCenter()\">\u2261</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignRight()\">\u27F9</button>\r\n\r\n    <span class=\"divider\"></span>\r\n\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignTop()\">\u21D1</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignMiddle()\">\u2550</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignBottom()\">\u21D3</button>\r\n\r\n    <span class=\"divider\"></span>\r\n\r\n    <!-- DISTRIBUTE -->\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeHorizontal()\">\r\n      \u21C4\r\n    </button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeVertical()\">\u21C5</button>\r\n  </div>\r\n\r\n  <div\r\n    class=\"canvas-content\"\r\n    [class.panning]=\"isMoveMode\"\r\n    [style.transform]=\"'translate(' + template.editorOption.panX + 'px,' + template.editorOption.panY + 'px)'\"\r\n  >\r\n    <!-- GRID -->\r\n    <div *ngIf=\"wfcSetting.ShowGrid\" class=\"grid-layer\"></div>\r\n\r\n    <!-- <div class=\"zoom-toolbar\">\r\n      <button nz-button nzSize=\"small\" (click)=\"zoomOut()\">\u2212</button>\r\n      <span>{{ zoom * 100 | number: \"1.0-0\" }}%</span>\r\n      <button nz-button nzSize=\"small\" (click)=\"zoomIn()\">+</button>\r\n    </div> -->\r\n\r\n    <!-- SVG EDGES -->\r\n    <svg #svg class=\"edges-layer\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\">\r\n      <g [attr.transform]=\"svgTransform\">\r\n        <!-- DEFS -->\r\n        <defs>\r\n          <!-- glow effect -->\r\n          <filter id=\"edge-glow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\r\n            <feGaussianBlur stdDeviation=\"2\" result=\"blur\" />\r\n            <feMerge>\r\n              <feMergeNode in=\"blur\" />\r\n              <feMergeNode in=\"SourceGraphic\" />\r\n            </feMerge>\r\n          </filter>\r\n\r\n          <!-- arrow markers -->\r\n          <marker\r\n            id=\"arrow-blue\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            refX=\"10\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"blue\" d=\"M0,0 L10,5 L0,10\"></path>\r\n          </marker>\r\n\r\n          <marker\r\n            id=\"arrow-red\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            refX=\"10\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"red\" d=\"M0,0 L10,5 L0,10\"></path>\r\n          </marker>\r\n\r\n          <marker\r\n            id=\"arrow-blue-start\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            viewBox=\"0 0 10 10\"\r\n            refX=\"0\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"blue\" d=\"M10,0 L0,5 L10,10\"></path>\r\n          </marker>\r\n\r\n          <marker\r\n            id=\"arrow-red-start\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            viewBox=\"0 0 10 10\"\r\n            refX=\"0\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"red\" d=\"M10,0 L0,5 L10,10\"></path>\r\n          </marker>\r\n        </defs>\r\n\r\n        <!-- EDGES B\u00CCNH TH\u01AF\u1EDCNG -->\r\n        <ng-container *ngFor=\"let e of normalEdges; let i = index\">\r\n          <path\r\n            class=\"edge\"\r\n            [attr.id]=\"'edge-path-' + i\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            marker-end=\"url(#arrow-blue)\"\r\n            [attr.marker-start]=\"e.allowBack ? 'url(#arrow-blue-start)' : ''\"\r\n          ></path>\r\n\r\n          <path\r\n            class=\"edge-hit\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            (mouseenter)=\"onMouseEnterEdge(e)\"\r\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\r\n            (click)=\"onClickEdge(e, $event)\"\r\n          ></path>\r\n\r\n          <!-- LABEL -->\r\n          <!-- text b\u00E1m theo line -->\r\n          <!-- \r\n          <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\r\n            <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.ActionText }}\r\n            </textPath>\r\n          </text> \r\n          \r\n          <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\r\n            <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.labelBack }}\r\n            </textPath>\r\n          </text>\r\n          -->\r\n\r\n          <!-- text th\u1EB3ng n\u1EB1m ngang -->\r\n          <text\r\n            *ngIf=\"e.ActionText\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.ActionText }}\r\n          </text>\r\n\r\n          <text\r\n            *ngIf=\"e.allowBack && e.labelBack\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.labelBack }}\r\n          </text>\r\n        </ng-container>\r\n\r\n        <!-- EDGE \u0110ANG HOVER (LU\u00D4N TR\u00CAN C\u00D9NG) -->\r\n        <ng-container *ngFor=\"let e of hoverEdges; let i = index\">\r\n          <path\r\n            class=\"edge red\"\r\n            [attr.id]=\"'edge-path-hover-' + i\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            marker-end=\"url(#arrow-red)\"\r\n            [attr.marker-start]=\"e.allowBack ? 'url(#arrow-red-start)' : ''\"\r\n          ></path>\r\n\r\n          <path\r\n            class=\"edge-hit\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\r\n            (click)=\"onClickEdge(e, $event)\"\r\n          ></path>\r\n\r\n          <!-- LABEL -->\r\n          <!-- <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\r\n            <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.ActionText }}\r\n            </textPath>\r\n          </text>\r\n\r\n          <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\r\n            <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.labelBack }}\r\n            </textPath>\r\n          </text> -->\r\n\r\n          <text\r\n            *ngIf=\"e.ActionText\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.ActionText }}\r\n          </text>\r\n\r\n          <text\r\n            *ngIf=\"e.allowBack && e.labelBack\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.labelBack }}\r\n          </text>\r\n        </ng-container>\r\n\r\n        <!-- preview -->\r\n        <path\r\n          *ngIf=\"connectingFrom\"\r\n          class=\"edge\"\r\n          [attr.d]=\"buildPreviewPath()\"\r\n          stroke-dasharray=\"5,5\"\r\n          marker-end=\"url(#arrow-blue)\"\r\n        ></path>\r\n      </g>\r\n    </svg>\r\n\r\n    <div\r\n      *ngIf=\"isSelecting && selectStart && selectEnd\"\r\n      class=\"selection-box\"\r\n      [style.left.px]=\"Math.min(selectStart.x, selectEnd.x)\"\r\n      [style.top.px]=\"Math.min(selectStart.y, selectEnd.y)\"\r\n      [style.width.px]=\"Math.abs(selectEnd.x - selectStart.x)\"\r\n      [style.height.px]=\"Math.abs(selectEnd.y - selectStart.y)\"\r\n    ></div>\r\n\r\n    <!-- lstStage -->\r\n    @for (n of lstStage; track $index) {\r\n      <!-- START NODE -->\r\n      @if (n.StageType === \"_start_\") {\r\n        <nz-card\r\n          class=\"workflow-node workflow-node-start\"\r\n          [attr.data-id]=\"n.Code\"\r\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n          [style.left.px]=\"n.editorOption.x\"\r\n          [style.top.px]=\"n.editorOption.y\"\r\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n          nzSize=\"small\"\r\n          (mousedown)=\"onMouseDownNode($event, n)\"\r\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n        >\r\n          <nz-tag [nzColor]=\"'green'\"> START </nz-tag>\r\n\r\n          @if (!n.editorOption.isReverse) {\r\n            <!-- connector RIGHT: output -->\r\n            <div class=\"connector connector-right connector-start\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n          } @else {\r\n            <div\r\n              class=\"connector connector-right connector-start reverse\"\r\n              (click)=\"onClickConnector($event, n, 'right')\"\r\n            ></div>\r\n          }\r\n        </nz-card>\r\n      }\r\n      <!-- END NODE -->\r\n      @else if (n.StageType === \"_end_\") {\r\n        <nz-card\r\n          class=\"workflow-node workflow-node-end\"\r\n          [attr.data-id]=\"n.Code\"\r\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n          [style.left.px]=\"n.editorOption.x\"\r\n          [style.top.px]=\"n.editorOption.y\"\r\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n          nzSize=\"small\"\r\n          (mousedown)=\"onMouseDownNode($event, n)\"\r\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n        >\r\n          <nz-tag [nzColor]=\"'red'\"> END </nz-tag>\r\n\r\n          @if (!n.editorOption.isReverse) {\r\n            <!-- connector LEFT: input -->\r\n            <div class=\"connector connector-left connector-end\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n          } @else {\r\n            <div\r\n              class=\"connector connector-left connector-end reverse\"\r\n              (click)=\"onClickConnector($event, n, 'left')\"\r\n            ></div>\r\n          }\r\n        </nz-card>\r\n      } @else {\r\n        <nz-card\r\n          class=\"workflow-node\"\r\n          [attr.data-id]=\"n.Code\"\r\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n          [style.left.px]=\"n.editorOption.x\"\r\n          [style.top.px]=\"n.editorOption.y\"\r\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n          nzSize=\"small\"\r\n          (mousedown)=\"onMouseDownNode($event, n)\"\r\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n        >\r\n          <div class=\"title\">{{ n.Code }}</div>\r\n\r\n          <div>{{ n.Name }}</div>\r\n\r\n          @if (!n.editorOption.isReverse) {\r\n            <!-- connector RIGHT: output -->\r\n            <div class=\"connector connector-right\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n\r\n            <!-- connector LEFT: input -->\r\n            <div class=\"connector connector-left\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n          } @else {\r\n            <div class=\"connector connector-right reverse\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n            <div class=\"connector connector-left reverse\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n          }\r\n        </nz-card>\r\n      }\r\n    }\r\n\r\n    <!-- POINTS -->\r\n    @for (p of connectingPoints; track $index) {\r\n      @if (p != draggingPoint) {\r\n        <div\r\n          class=\"waypoint\"\r\n          [style.left.px]=\"p.x\"\r\n          [style.top.px]=\"p.y\"\r\n          (mousedown)=\"onmousedownPoint($event, p)\"\r\n          (contextmenu)=\"onRightClickPoint($event, hoverAction!, $index)\"\r\n        ></div>\r\n      } @else {\r\n        <div\r\n          class=\"waypoint dragging\"\r\n          [style.left.px]=\"p.x\"\r\n          [style.top.px]=\"p.y\"\r\n          (mousedown)=\"onmousedownPoint($event, p)\"\r\n        ></div>\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<!-- drawer TEMPLATE -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawTemplateTitle\"\r\n  nzPlacement=\"right\"\r\n  [nzWidth]=\"500\"\r\n  [nzClosable]=\"false\"\r\n  [nzVisible]=\"drawTemplateVisibel\"\r\n  [nzFooter]=\"footerTplTemplate\"\r\n  (nzOnClose)=\"drawTemplateVisibel = false\"\r\n>\r\n  <ng-template #drawTemplateTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Template </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <extend-select\r\n      [label]=\"'Org'\"\r\n      [lstItem]=\"lstOrg\"\r\n      [valueField]=\"'App_Org_Id'\"\r\n      [displayFields]=\"['Name', 'Code']\"\r\n      [(_ngModel)]=\"template.App_Org_Id\"\r\n    ></extend-select>\r\n    <extend-input [label]=\"'Code'\" [(_ngModel)]=\"template.Code\"></extend-input>\r\n    <extend-input [label]=\"'Name'\" [(_ngModel)]=\"template.Name\"></extend-input>\r\n    <extend-select\r\n      [label]=\"'Type'\"\r\n      [lstItem]=\"template.lstTemplateType\"\r\n      [valueField]=\"'Code'\"\r\n      [displayFields]=\"['Code', 'Name']\"\r\n      [(_ngModel)]=\"template.DocType\"\r\n    ></extend-select>\r\n    <extend-textarea [label]=\"'Desscription'\" [(_ngModel)]=\"template.Description\"></extend-textarea>\r\n    <extend-select\r\n      [label]=\"'Print template'\"\r\n      [lstItem]=\"template.lstTemplatePrint\"\r\n      [valueField]=\"'Code'\"\r\n      [displayFields]=\"['Code', 'Name']\"\r\n      [(_ngModel)]=\"template.TemplatePrint\"\r\n    ></extend-select>\r\n    <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          [floatingLabel]=\"true\"\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          [floatingLabel]=\"true\"\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          [floatingLabel]=\"true\"\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          [floatingLabel]=\"true\"\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          [floatingLabel]=\"true\"\r\n          [precision]=\"1\"\r\n          [(_ngModel)]=\"selectedStage.NumberDay\"\r\n        ></extend-input-number>\r\n      </div>\r\n\r\n      @if (selectedStage.editorOption) {\r\n        @if ([\"start\", \"node\", \"end\"].includes(selectedStage.StageType.toLowerCase())) {\r\n          <extend-checkbox\r\n            [label]=\"'Reverse'\"\r\n            [labelSpan]=\"0\"\r\n            [(_ngModel)]=\"selectedStage.editorOption.isReverse\"\r\n          ></extend-checkbox>\r\n        }\r\n\r\n        <extend-checkbox\r\n          [label]=\"'Require user action'\"\r\n          [labelSpan]=\"0\"\r\n          [(_ngModel)]=\"selectedStage.IsRequireUser\"\r\n        ></extend-checkbox>\r\n      }\r\n\r\n      <box [height]=\"16\"></box>\r\n\r\n      <div nz-row [nzGutter]=\"16\">\r\n        <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;List Action</h3>\r\n        <div nz-col>\r\n          <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"addAction()\">\r\n            <nz-icon nzType=\"plus\"></nz-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <nz-table nzSize=\"small\" [nzData]=\"lstActionOfCurrentStage\" [nzShowPagination]=\"false\" [nzNoResult]=\"'&nbsp;'\">\r\n        <thead>\r\n          <tr [hidden]=\"true\">\r\n            <th nzWidth=\"40px\"></th>\r\n            <th></th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (action of lstActionOfCurrentStage; track $index) {\r\n            <tr (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                    [floatingLabel]=\"true\"\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                    [floatingLabel]=\"true\"\r\n                    [lstItem]=\"template.lstActionType\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [(_ngModel)]=\"action.ActionType\"\r\n                  ></extend-select>\r\n\r\n                  <extend-select\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Stage status'\"\r\n                    [floatingLabel]=\"true\"\r\n                    [lstItem]=\"template.lstStageStatus\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [(_ngModel)]=\"action.StageStatus\"\r\n                  ></extend-select>\r\n\r\n                  <extend-select\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Next stage'\"\r\n                    [floatingLabel]=\"true\"\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                    [floatingLabel]=\"true\"\r\n                    [lstItem]=\"template.lstStageStatus\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [(_ngModel)]=\"action.To_StageStatus\"\r\n                  ></extend-select>\r\n\r\n                  <extend-select\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Process status'\"\r\n                    [floatingLabel]=\"true\"\r\n                    [lstItem]=\"template.lstProcessStatus\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\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)=\"onselectedRoleEmail(action)\"\r\n                  ></extend-select>\r\n                </div>\r\n                <box [height]=\"8\"></box>\r\n                <div nz-row>Email action</div>\r\n                <div nz-row>\r\n                  <extend-select\r\n                    nz-col\r\n                    nzSpan=\"24\"\r\n                    [size]=\"'small'\"\r\n                    [lstItem]=\"lstEmailAction\"\r\n                    [valueField]=\"'ID'\"\r\n                    [displayField]=\"'Name'\"\r\n                    [multiple]=\"true\"\r\n                    [(_ngModel)]=\"action._lstEmailActionId\"\r\n                    (_ngModelChange)=\"onselectedRoleEmail(action)\"\r\n                  ></extend-select>\r\n                </div>\r\n                <box [height]=\"8\"></box>\r\n                <div *ngIf=\"action._lstEmailActionId && action._lstEmailActionId.length\" nz-row>Email template</div>\r\n                <div *ngIf=\"action._lstEmailActionId && action._lstEmailActionId.length\" nz-row>\r\n                  <div nz-col nzSpan=\"1\"></div>\r\n                  <div nz-col nzSpan=\"23\" class=\"form-item-no-bottom\" style=\"font-weight: normal\">\r\n                    @for (actionRef of lstActionRefOf(action); track $index) {\r\n                      <div nz-row>\r\n                        <extend-select\r\n                          nz-col\r\n                          nzSpan=\"24\"\r\n                          [labelSpan]=\"12\"\r\n                          [size]=\"'small'\"\r\n                          [label]=\"emailActionText(actionRef.To_WF_TemplateStageAction_Id)\"\r\n                          [lstItem]=\"lstEmailTemplate\"\r\n                          [valueField]=\"'Code'\"\r\n                          [displayFields]=\"['Code', 'Name']\"\r\n                          [(_ngModel)]=\"actionRef.TemplateMail\"\r\n                        ></extend-select>\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n                <box [height]=\"8\"></box>\r\n                <div nz-row [nzGutter]=\"8\">\r\n                  Action rule\r\n                  <button nz-button nzType=\"text\" nzSize=\"small\" (click)=\"actionRuleModalVisible = true\">\r\n                    <nz-icon nzType=\"export\" nzTheme=\"outline\" class=\"color-primary\" />\r\n                  </button>\r\n                  <button\r\n                    *ngIf=\"action.WF_TransitionsRule_Id\"\r\n                    nz-button\r\n                    nzType=\"text\"\r\n                    nzSize=\"small\"\r\n                    (click)=\"deleteActionRule(action)\"\r\n                  >\r\n                    <nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn\" />\r\n                  </button>\r\n                </div>\r\n              </td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </nz-table>\r\n\r\n      <box [height]=\"16\"></box>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-template #footerTplNode>\r\n    <div\r\n      nz-flex\r\n      [nzGap]=\"6\"\r\n      [nzJustify]=\"\r\n        selectedStage && selectedStage.editorOption && selectedStage.editorOption.drawerPosition == 'left'\r\n          ? 'start'\r\n          : 'end'\r\n      \"\r\n    >\r\n      <button nz-button nzDanger nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n      <button nz-button (click)=\"selectedStage = undefined\">Close</button>\r\n      <button\r\n        *ngIf=\"selectedStage && ['START', 'END'].indexOf(selectedStage.StageType) < 0\"\r\n        nz-button\r\n        nzDanger\r\n        (click)=\"deleteStage()\"\r\n      >\r\n        Delete\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- drawer ACTION -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawerTitleAction\"\r\n  nzTitle=\"ACTION\"\r\n  [nzPlacement]=\"selectedAction?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\r\n  [nzClosable]=\"false\"\r\n  [nzWidth]=\"750\"\r\n  [nzVisible]=\"!!selectedAction\"\r\n  [nzFooter]=\"footerTplAction\"\r\n  (nzOnClose)=\"selectedAction = undefined\"\r\n>\r\n  <ng-template #drawerTitleAction>\r\n    <div nz-row nzJustify=\"space-between\">\r\n      @if (selectedAction && selectedAction.editorOption) {\r\n        @if (selectedAction.editorOption.drawerPosition == \"left\") {\r\n          <button\r\n            nz-button\r\n            nzSize=\"small\"\r\n            nz-tooltip=\"To the right\"\r\n            (click)=\"selectedAction.editorOption.drawerPosition = 'right'\"\r\n          >\r\n            <nz-icon nzType=\"double-right\"></nz-icon>\r\n          </button>\r\n          ACTION\r\n        } @else {\r\n          ACTION\r\n          <button\r\n            nz-button\r\n            nzSize=\"small\"\r\n            nz-tooltip=\"To the left\"\r\n            (click)=\"selectedAction.editorOption.drawerPosition = 'left'\"\r\n          >\r\n            <nz-icon nzType=\"double-left\"></nz-icon>\r\n          </button>\r\n        }\r\n      }\r\n    </div>\r\n  </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <ng-container *ngIf=\"selectedAction\">\r\n      <div>\r\n        <strong\r\n          >{{ selectedAction.getFromStageCode(lstStage) }} -> {{ selectedAction.getToStageCode(lstStage) }}</strong\r\n        >\r\n      </div>\r\n      <div>{{ selectedAction.getFromStageName(lstStage) }} -> {{ selectedAction.getToStageName(lstStage) }}</div>\r\n\r\n      <box [height]=\"16\"></box>\r\n\r\n      <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n        <div nz-col [nzSpan]=\"8\">\r\n          <nz-form-item>\r\n            <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n            <nz-form-control [nzSpan]=\"24\">\r\n              <nz-input-group class=\"full-width\">\r\n                <input\r\n                  nz-input\r\n                  [(ngModel)]=\"selectedAction.ActionStatus\"\r\n                  [nzAutocomplete]=\"auto\"\r\n                  (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n                  (click)=\"lstActionStatusFiltered = template.lstActionStatus\"\r\n                  (keyup.enter)=\"onenterAotu(selectedAction.ActionStatus)\"\r\n                  (blur)=\"onenterAotu(selectedAction.ActionStatus)\"\r\n                />\r\n                <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n                  @for (option of lstActionStatusFiltered; track $index) {\r\n                    <nz-auto-option [nzValue]=\"option.Code\" [nzLabel]=\"option.Code\">\r\n                      {{ option.Code }}\r\n                      <icon-delete\r\n                        *ngIf=\"checkRemoveableActionStatus(option.Code)\"\r\n                        style=\"float: right\"\r\n                        [size]=\"12\"\r\n                        (click)=\"handleClose(option.Code)\"\r\n                      ></icon-delete>\r\n                    </nz-auto-option>\r\n                  }\r\n                </nz-autocomplete>\r\n              </nz-input-group>\r\n            </nz-form-control>\r\n          </nz-form-item>\r\n        </div>\r\n\r\n        <extend-input\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Action text'\"\r\n          [floatingLabel]=\"true\"\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          [floatingLabel]=\"true\"\r\n          [lstItem]=\"template.lstActionType\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [(_ngModel)]=\"selectedAction.ActionType\"\r\n        ></extend-select>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Stage status'\"\r\n          [floatingLabel]=\"true\"\r\n          [lstItem]=\"template.lstStageStatus\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [(_ngModel)]=\"selectedAction.StageStatus\"\r\n        ></extend-select>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Next stage'\"\r\n          [floatingLabel]=\"true\"\r\n          [lstItem]=\"lstStage\"\r\n          [valueField]=\"'WF_TemplateStage_Id'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [(_ngModel)]=\"selectedAction.To_WF_TemplateStage_Id\"\r\n          (_ngModelChange)=\"onchangeNextStage(selectedAction)\"\r\n        ></extend-select>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Next stage status'\"\r\n          [floatingLabel]=\"true\"\r\n          [lstItem]=\"template.lstStageStatus\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [(_ngModel)]=\"selectedAction.To_StageStatus\"\r\n        ></extend-select>\r\n      </div>\r\n\r\n      <!-- <box [height]=\"16\"></box> -->\r\n      <nz-divider></nz-divider>\r\n\r\n      @if (template.editorOption.AllowbackInUse) {\r\n        <extend-checkbox\r\n          [label]=\"'Allow back'\"\r\n          [labelSpan]=\"0\"\r\n          [(_ngModel)]=\"selectedAction.allowBack\"\r\n          (_ngModelChange)=\"onchangeAllowBack(selectedAction)\"\r\n        ></extend-checkbox>\r\n      }\r\n\r\n      <box [height]=\"16\"></box>\r\n\r\n      @if (selectedAction.allowBack) {\r\n        <div>\r\n          <strong\r\n            >{{ selectedAction.getToStageCode(lstStage) }} -> {{ selectedAction.getFromStageCode(lstStage) }}</strong\r\n          >\r\n        </div>\r\n        <div>{{ selectedAction.getToStageName(lstStage) }} -> {{ selectedAction.getFromStageName(lstStage) }}</div>\r\n\r\n        @if (selectedBackAction) {\r\n          <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n            <div nz-col [nzSpan]=\"8\">\r\n              <nz-form-item>\r\n                <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n                <nz-form-control [nzSpan]=\"24\">\r\n                  <nz-input-group class=\"full-width\">\r\n                    <input\r\n                      nz-input\r\n                      [(ngModel)]=\"selectedBackAction.ActionStatus\"\r\n                      [nzAutocomplete]=\"auto\"\r\n                      (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n                      (click)=\"lstActionStatusFiltered = template.lstActionStatus\"\r\n                      (keyup.enter)=\"onenterAotu(selectedBackAction.ActionStatus)\"\r\n                      (blur)=\"onenterAotu(selectedBackAction.ActionStatus)\"\r\n                    />\r\n                    <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n                      @for (option of lstActionStatusFiltered; track $index) {\r\n                        <nz-auto-option [nzValue]=\"option.Code\" [nzLabel]=\"option.Code\">\r\n                          {{ option.Code }}\r\n                          <icon-delete\r\n                            *ngIf=\"checkRemoveableActionStatus(option.Code)\"\r\n                            style=\"float: right\"\r\n                            [size]=\"12\"\r\n                            (click)=\"handleClose(option.Code)\"\r\n                          ></icon-delete>\r\n                        </nz-auto-option>\r\n                      }\r\n                    </nz-autocomplete>\r\n                  </nz-input-group>\r\n                </nz-form-control>\r\n              </nz-form-item>\r\n            </div>\r\n\r\n            <extend-input\r\n              nz-col\r\n              [nzSpan]=\"8\"\r\n              [label]=\"'Action text'\"\r\n              [floatingLabel]=\"true\"\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              [floatingLabel]=\"true\"\r\n              [lstItem]=\"template.lstActionType\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [(_ngModel)]=\"selectedBackAction.ActionType\"\r\n            ></extend-select>\r\n\r\n            <extend-select\r\n              nz-col\r\n              [nzSpan]=\"8\"\r\n              [label]=\"'Stage status'\"\r\n              [floatingLabel]=\"true\"\r\n              [lstItem]=\"template.lstStageStatus\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [(_ngModel)]=\"selectedBackAction.StageStatus\"\r\n            ></extend-select>\r\n\r\n            <extend-select\r\n              nz-col\r\n              [nzSpan]=\"8\"\r\n              [label]=\"'Next stage'\"\r\n              [floatingLabel]=\"true\"\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              [floatingLabel]=\"true\"\r\n              [lstItem]=\"template.lstStageStatus\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [(_ngModel)]=\"selectedBackAction.To_StageStatus\"\r\n            ></extend-select>\r\n          </div>\r\n        }\r\n      }\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #footerTplAction>\r\n    <div\r\n      nz-flex\r\n      [nzGap]=\"6\"\r\n      [nzJustify]=\"selectedAction && selectedAction.editorOption.drawerPosition == 'left' ? 'start' : 'end'\"\r\n    >\r\n      <button nz-button nzDanger nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n      <button nz-button nzDanger (click)=\"deleteAction(selectedAction!)\">Delete</button>\r\n      <button nz-button (click)=\"selectedAction = undefined\">Close</button>\r\n    </div>\r\n  </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- setting editor -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawSettingTitle\"\r\n  nzPlacement=\"right\"\r\n  [nzClosable]=\"false\"\r\n  [nzVisible]=\"settingVisible\"\r\n  (nzOnClose)=\"settingVisible = false\"\r\n>\r\n  <ng-template #drawSettingTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Editor </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <div class=\"form-item-no-bottom\">\r\n      <extend-checkbox [label]=\"'Show grid'\" [labelSpan]=\"0\" [(_ngModel)]=\"wfcSetting.ShowGrid\"></extend-checkbox>\r\n\r\n      <box [height]=\"16\"></box>\r\n    </div>\r\n  </ng-container>\r\n</nz-drawer>\r\n\r\n<!-- editor infomation -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawInfoTitle\"\r\n  nzPlacement=\"right\"\r\n  [nzClosable]=\"false\"\r\n  [nzVisible]=\"infoVisible\"\r\n  (nzOnClose)=\"infoVisible = false\"\r\n>\r\n  <ng-template #drawInfoTitle> <nz-icon nzType=\"info-circle\"></nz-icon> &nbsp; Infomation </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <p>1. C\u00E1c th\u00E0nh ph\u1EA7n: Stage or Node (stag, node quy tr\u00ECnh), Action or Connector (\u0111\u01B0\u1EDDng n\u1ED1i gi\u1EEFa c\u00E1c stage)</p>\r\n    <p>2. Save \u0111\u1EC3 load c\u00E1c th\u00F4ng tin: Stage status, Action type</p>\r\n    <p>\r\n      3. N\u1ED1i 2 node (t\u1EA1o connector t\u01B0\u01A1ng \u0111\u01B0\u01A1ng t\u1EA1o action):\r\n      <br />- Click ch\u1EA5m cam t\u1EEB Node ngu\u1ED3n \u0111\u1EBFn ch\u1EA5m xanh c\u1EE7a Node \u0111\u00EDch (ho\u1EB7c click v\u00E0o Node \u0111\u00EDch), c\u00F3 th\u1EC3 click th\u00E0nh\r\n      nhi\u1EC1u \u0111i\u1EC3m \u0111\u1EC3 t\u1EA1o \u0111\u01B0\u1EDDng n\u1ED1i cong<br />- Khi hover connector chuy\u1EC3n sang m\u1EA7u \u0111\u1ECF c\u00F3 th\u1EC3 click \u0111\u00FAp \u0111\u1EC3 th\u00EAm m\u1ED9t \u0111i\u1EC3m\r\n      c\u1EE7a connector<br />- Khi hover l\u00EAn \u0111i\u1EC3m c\u1EE7a connector c\u00F3 th\u1EC3 di chuy\u1EC3n \u0111i\u1EC3m \u0111\u00F3 b\u1EB1ng c\u00E1ch nh\u1EA5n gi\u1EEF chu\u1ED9t v\u00E0 k\u00E9o th\u1EA3\r\n      \u0111\u1EBFn v\u1ECB tr\u00ED m\u1EDBi<br />- Chu\u1ED9t ph\u1EA3i v\u00E0o \u0111i\u1EC3m n\u1ED1i connector \u0111\u1EC3 xo\u00E1 \u0111i\u1EC3m \u0111\u00F3\r\n    </p>\r\n  </ng-container>\r\n</nz-drawer>\r\n\r\n<!-- action rule modal -->\r\n<nz-modal\r\n  [(nzVisible)]=\"actionRuleModalVisible\"\r\n  [nzMaskClosable]=\"false\"\r\n  [nzClosable]=\"false\"\r\n  [nzKeyboard]=\"true\"\r\n  [nzWidth]=\"'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'\">Rule type</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%}.canvas-content{outline:1px dashed red}.canvas-content.panning{cursor:grab}.canvas-content.panning:active{cursor:grabbing}.workflow-canvas.panning{cursor:grab}.workflow-canvas.panning:active{cursor:grabbing}.workflow-canvas.connecting,.workflow-canvas.connecting .workflow-node{cursor:crosshair}.workflow-node{position:absolute;width:160px;cursor:grab;-webkit-user-select:none;user-select:none;z-index:2}.workflow-node:active{cursor:grabbing}.workflow-node.connecting-source,.workflow-node.selected,.workflow-node:hover:not(.workflow-node-start,.workflow-node-end){outline:2px dashed #1890ff}.workflow-node .title{font-weight:600;margin-bottom:6px}.workflow-node-start{width:0px}.workflow-node-start.connecting-source,.workflow-node-start.selected,.workflow-node-start:hover{outline:unset}.workflow-node-start.connecting-source nz-tag,.workflow-node-start.selected nz-tag,.workflow-node-start:hover nz-tag{outline:2px dashed}.workflow-node-start nz-tag{position:relative;top:45px;right:35px}.workflow-node-end{width:0px}.workflow-node-end.connecting-source,.workflow-node-end.selected,.workflow-node-end:hover{outline:unset}.workflow-node-end.connecting-source nz-tag,.workflow-node-end.selected nz-tag,.workflow-node-end:hover nz-tag{outline:2px dashed}.workflow-node-end nz-tag{position:relative;top:45px;right:32px}.connector{position:absolute;top:39px;width:12px;height:12px;background:#1890ff;border-radius:50%;transform:translateY(-50%);cursor:crosshair;transition:box-shadow .15s ease-out,transform .15s ease-out}.connector:hover{box-shadow:0 0 0 3px #1890ff4d;transform:translateY(-50%) scale(1.15)}.connector-right{right:-8px;background:orange}.connector-right.reverse,.connector-left{left:-8px}.connector-left.reverse{left:unset;right:-8px}.connector-start{width:16px;height:16px;right:-8px;background:green;box-shadow:0 0 0 3px #1890ff4d}.connector-end{width:16px;height:16px;left:-8px;background:#000;box-shadow:0 0 0 3px #1890ff4d}.edge{cursor:pointer;stroke:#1890ff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;fill:none;transition:stroke .15s ease}.edge-hit{stroke:transparent;stroke-width:18px!important;fill:none;cursor:pointer}.edge-hit:hover+.edge{stroke:#ff4d4f;stroke-width:2}.workflow-canvas.dragging-point .edge-hit{pointer-events:none}.edge:hover+.edge-label{fill:#1890ff;font-weight:500}.edge-label{font-size:12px;fill:#555;pointer-events:none;-webkit-user-select:none;user-select:none}.blue{stroke:#1890ff!important}.red{stroke:#ff4d4f!important;box-shadow:0 0 0 3px #1890ff4d!important}.workflow-svg{background:transparent;overflow:visible}.waypoint{position:absolute;width:10px;height:10px;background:#ff4d4f;border-radius:50%;transform:translate(-50%,-50%) scale(1);cursor:move;z-index:1;transition:transform .12s ease-out,background-color .12s ease-out,box-shadow .12s ease-out}.waypoint:hover{background:#ff7875;transform:translate(-50%,-50%) scale(1.25);box-shadow:0 0 0 4px #ff787559}.waypoint.dragging{transition:none;transform:translate(-50%,-50%) scale(1.15);pointer-events:none}.workflow-canvas.dragging-point svg{cursor:grabbing}.selection-box{position:absolute;border:1px dashed #1890ff;background:#1890ff1a;pointer-events:none}.toolbar{position:absolute;top:8px;left:8px;display:flex;gap:4px;padding:6px;background:#fff;border-radius:6px;box-shadow:0 2px 8px #00000026;z-index:100}.toolbar .divider{width:1px;background:#e5e5e5;margin:0 2px}.zoom-toolbar{position:absolute;top:8px;left:8px;z-index:10;display:flex;align-items:center;gap:6px;background:#fff;padding:4px 6px;border-radius:6px;box-shadow:0 2px 6px #00000026}.zoom-toolbar span{min-width:40px;text-align:center;font-size:12px}nz-tag.selected{outline:2px dashed #1890ff}.grid-layer{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(rgba(0,0,0,.08) 1px,transparent 1px);background-size:20px 20px}.grid-layer{background-image:linear-gradient(to right,rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.06) 1px,transparent 1px);background-size:20px 20px}.editable-tag{background:#fff;border-style:dashed}::ng-deep .minimap{position:absolute;width:180px;height:125px;top:0;right:0;background-color:#eee;border:1px solid #aaa;opacity:.9;z-index:1}::ng-deep .minimap-node{position:absolute;background-color:#607a86}::ng-deep .minimap-node-round{position:absolute;background-color:#607a86;border-radius:10px}::ng-deep .minimap-node-round-start{background-color:green}::ng-deep .minimap-node-round-end{background-color:#000}::ng-deep .minimap-viewport{position:absolute;box-sizing:border-box;background-color:#4f6f7e66;z-index:1;cursor:move}::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:16px;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: [{
@@ -13781,11 +13846,11 @@ class SideMenuComponent extends BaseComponent {
     filteredLstMenu = [];
     currentHeaderId = '';
     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: { isCollapsed: "isCollapsed", filteredLstMenu: "filteredLstMenu", currentHeaderId: "currentHeaderId" }, usesInheritance: true, ngImport: i0, template: "<ul nz-menu nzTheme=\"light\" nzMode=\"inline\" [nzInlineIndent]=\"12\" [nzInlineCollapsed]=\"isCollapsed\">\r\n  @for (menuLv1 of filteredLstMenu; track menuLv1.App_Menu_Id) {\r\n    @if (menuLv1.SubMenu?.length) {\r\n      <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\r\n        @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\r\n          @if (menuLv2.SubMenu?.length) {\r\n            <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\r\n              @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\r\n                @if (menuLv3.SubMenu?.length) {\r\n                  <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\r\n                    @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\r\n                      @if (menuLv4.SubMenu?.length) {\r\n                        <ul nz-submenu [nzOpen]=\"menuLv4.Open\" [nzTitle]=\"menuLv4.Name\" [nzIcon]=\"menuLv4.Icon\">\r\n                          @for (menuLv5 of menuLv4.SubMenu; track menuLv5.App_Menu_Id) {}\r\n                        </ul>\r\n                      } @else {\r\n                        <li nz-menu-item nzMatchRouter>\r\n                          <nz-icon *ngIf=\"menuLv4.Icon\" [nzType]=\"menuLv4.Icon\"></nz-icon>\r\n                          <box [width]=\"2\"></box>\r\n                          <a [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv4.Url\">\r\n                            {{ menuLv4.Name }}\r\n                          </a>\r\n                        </li>\r\n                      }\r\n                    }\r\n                  </ul>\r\n                } @else {\r\n                  <li nz-menu-item nzMatchRouter>\r\n                    <nz-icon *ngIf=\"menuLv3.Icon\" [nzType]=\"menuLv3.Icon\"></nz-icon><box [width]=\"2\"></box>\r\n                    <a [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv3.Url\">\r\n                      {{ menuLv3.Name }}\r\n                    </a>\r\n                  </li>\r\n                }\r\n              }\r\n            </ul>\r\n          } @else {\r\n            <li nz-menu-item nzMatchRouter>\r\n              <nz-icon *ngIf=\"menuLv2.Icon\" [nzType]=\"menuLv2.Icon\"></nz-icon><box [width]=\"2\"></box>\r\n              <a [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv2.Url\">\r\n                {{ menuLv2.Name }}\r\n              </a>\r\n            </li>\r\n          }\r\n        }\r\n      </ul>\r\n    } @else {\r\n      <li nz-menu-item nzMatchRouter>\r\n        <nz-icon *ngIf=\"menuLv1.Icon\" [nzType]=\"menuLv1.Icon\"></nz-icon><box [width]=\"2\"></box>\r\n        <a [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv1.Url\">\r\n          {{ menuLv1.Name }}\r\n        </a>\r\n      </li>\r\n    }\r\n  }\r\n</ul>\r\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$1.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$1.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "component", type: i4$1.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$4.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: { isCollapsed: "isCollapsed", filteredLstMenu: "filteredLstMenu", currentHeaderId: "currentHeaderId" }, usesInheritance: true, ngImport: i0, template: "<ul\r\n  class=\"side-menu-wrapper\"\r\n  nz-menu\r\n  nzTheme=\"light\"\r\n  nzMode=\"inline\"\r\n  [nzInlineIndent]=\"12\"\r\n  [nzInlineCollapsed]=\"isCollapsed\"\r\n>\r\n  @for (menuLv1 of filteredLstMenu; track menuLv1.App_Menu_Id) {\r\n    @if (menuLv1.SubMenu?.length) {\r\n      <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\r\n        @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\r\n          @if (menuLv2.SubMenu?.length) {\r\n            <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\r\n              @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\r\n                @if (menuLv3.SubMenu?.length) {\r\n                  <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\r\n                    @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\r\n                      @if (menuLv4.SubMenu?.length) {\r\n                        <ul nz-submenu [nzOpen]=\"menuLv4.Open\" [nzTitle]=\"menuLv4.Name\" [nzIcon]=\"menuLv4.Icon\">\r\n                          @for (menuLv5 of menuLv4.SubMenu; track menuLv5.App_Menu_Id) {}\r\n                        </ul>\r\n                      } @else {\r\n                        <li nz-menu-item nzMatchRouter>\r\n                          <nz-icon *ngIf=\"menuLv4.Icon\" [nzType]=\"menuLv4.Icon\"></nz-icon>\r\n                          <box [width]=\"2\"></box>\r\n                          <a [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv4.Url\">\r\n                            {{ menuLv4.Name }}\r\n                          </a>\r\n                        </li>\r\n                      }\r\n                    }\r\n                  </ul>\r\n                } @else {\r\n                  <li nz-menu-item nzMatchRouter>\r\n                    <nz-icon *ngIf=\"menuLv3.Icon\" [nzType]=\"menuLv3.Icon\"></nz-icon><box [width]=\"2\"></box>\r\n                    <a [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv3.Url\">\r\n                      {{ menuLv3.Name }}\r\n                    </a>\r\n                  </li>\r\n                }\r\n              }\r\n            </ul>\r\n          } @else {\r\n            <li nz-menu-item nzMatchRouter>\r\n              <nz-icon *ngIf=\"menuLv2.Icon\" [nzType]=\"menuLv2.Icon\"></nz-icon><box [width]=\"2\"></box>\r\n              <a [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv2.Url\">\r\n                {{ menuLv2.Name }}\r\n              </a>\r\n            </li>\r\n          }\r\n        }\r\n      </ul>\r\n    } @else {\r\n      <li nz-menu-item nzMatchRouter>\r\n        <nz-icon *ngIf=\"menuLv1.Icon\" [nzType]=\"menuLv1.Icon\"></nz-icon><box [width]=\"2\"></box>\r\n        <a [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv1.Url\">\r\n          {{ menuLv1.Name }}\r\n        </a>\r\n      </li>\r\n    }\r\n  }\r\n</ul>\r\n", styles: [".side-menu-wrapper .ant-menu-item{margin:0;font-weight:500}.side-menu-wrapper .ant-menu-item a{color:#474747}\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$1.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$1.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "component", type: i4$1.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$4.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,
-            args: [{ selector: 'side-menu', imports: [CommonModule, NzMenuModule, NzIconModule, Box, RouterModule], template: "<ul nz-menu nzTheme=\"light\" nzMode=\"inline\" [nzInlineIndent]=\"12\" [nzInlineCollapsed]=\"isCollapsed\">\r\n  @for (menuLv1 of filteredLstMenu; track menuLv1.App_Menu_Id) {\r\n    @if (menuLv1.SubMenu?.length) {\r\n      <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\r\n        @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\r\n          @if (menuLv2.SubMenu?.length) {\r\n            <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\r\n              @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\r\n                @if (menuLv3.SubMenu?.length) {\r\n                  <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\r\n                    @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\r\n                      @if (menuLv4.SubMenu?.length) {\r\n                        <ul nz-submenu [nzOpen]=\"menuLv4.Open\" [nzTitle]=\"menuLv4.Name\" [nzIcon]=\"menuLv4.Icon\">\r\n                          @for (menuLv5 of menuLv4.SubMenu; track menuLv5.App_Menu_Id) {}\r\n                        </ul>\r\n                      } @else {\r\n                        <li nz-menu-item nzMatchRouter>\r\n                          <nz-icon *ngIf=\"menuLv4.Icon\" [nzType]=\"menuLv4.Icon\"></nz-icon>\r\n                          <box [width]=\"2\"></box>\r\n                          <a [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv4.Url\">\r\n                            {{ menuLv4.Name }}\r\n                          </a>\r\n                        </li>\r\n                      }\r\n                    }\r\n                  </ul>\r\n                } @else {\r\n                  <li nz-menu-item nzMatchRouter>\r\n                    <nz-icon *ngIf=\"menuLv3.Icon\" [nzType]=\"menuLv3.Icon\"></nz-icon><box [width]=\"2\"></box>\r\n                    <a [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv3.Url\">\r\n                      {{ menuLv3.Name }}\r\n                    </a>\r\n                  </li>\r\n                }\r\n              }\r\n            </ul>\r\n          } @else {\r\n            <li nz-menu-item nzMatchRouter>\r\n              <nz-icon *ngIf=\"menuLv2.Icon\" [nzType]=\"menuLv2.Icon\"></nz-icon><box [width]=\"2\"></box>\r\n              <a [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv2.Url\">\r\n                {{ menuLv2.Name }}\r\n              </a>\r\n            </li>\r\n          }\r\n        }\r\n      </ul>\r\n    } @else {\r\n      <li nz-menu-item nzMatchRouter>\r\n        <nz-icon *ngIf=\"menuLv1.Icon\" [nzType]=\"menuLv1.Icon\"></nz-icon><box [width]=\"2\"></box>\r\n        <a [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv1.Url\">\r\n          {{ menuLv1.Name }}\r\n        </a>\r\n      </li>\r\n    }\r\n  }\r\n</ul>\r\n" }]
+            args: [{ selector: 'side-menu', imports: [CommonModule, NzMenuModule, NzIconModule, Box, RouterModule], template: "<ul\r\n  class=\"side-menu-wrapper\"\r\n  nz-menu\r\n  nzTheme=\"light\"\r\n  nzMode=\"inline\"\r\n  [nzInlineIndent]=\"12\"\r\n  [nzInlineCollapsed]=\"isCollapsed\"\r\n>\r\n  @for (menuLv1 of filteredLstMenu; track menuLv1.App_Menu_Id) {\r\n    @if (menuLv1.SubMenu?.length) {\r\n      <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\r\n        @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\r\n          @if (menuLv2.SubMenu?.length) {\r\n            <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\r\n              @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\r\n                @if (menuLv3.SubMenu?.length) {\r\n                  <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\r\n                    @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\r\n                      @if (menuLv4.SubMenu?.length) {\r\n                        <ul nz-submenu [nzOpen]=\"menuLv4.Open\" [nzTitle]=\"menuLv4.Name\" [nzIcon]=\"menuLv4.Icon\">\r\n                          @for (menuLv5 of menuLv4.SubMenu; track menuLv5.App_Menu_Id) {}\r\n                        </ul>\r\n                      } @else {\r\n                        <li nz-menu-item nzMatchRouter>\r\n                          <nz-icon *ngIf=\"menuLv4.Icon\" [nzType]=\"menuLv4.Icon\"></nz-icon>\r\n                          <box [width]=\"2\"></box>\r\n                          <a [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv4.Url\">\r\n                            {{ menuLv4.Name }}\r\n                          </a>\r\n                        </li>\r\n                      }\r\n                    }\r\n                  </ul>\r\n                } @else {\r\n                  <li nz-menu-item nzMatchRouter>\r\n                    <nz-icon *ngIf=\"menuLv3.Icon\" [nzType]=\"menuLv3.Icon\"></nz-icon><box [width]=\"2\"></box>\r\n                    <a [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv3.Url\">\r\n                      {{ menuLv3.Name }}\r\n                    </a>\r\n                  </li>\r\n                }\r\n              }\r\n            </ul>\r\n          } @else {\r\n            <li nz-menu-item nzMatchRouter>\r\n              <nz-icon *ngIf=\"menuLv2.Icon\" [nzType]=\"menuLv2.Icon\"></nz-icon><box [width]=\"2\"></box>\r\n              <a [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv2.Url\">\r\n                {{ menuLv2.Name }}\r\n              </a>\r\n            </li>\r\n          }\r\n        }\r\n      </ul>\r\n    } @else {\r\n      <li nz-menu-item nzMatchRouter>\r\n        <nz-icon *ngIf=\"menuLv1.Icon\" [nzType]=\"menuLv1.Icon\"></nz-icon><box [width]=\"2\"></box>\r\n        <a [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv1.Url\">\r\n          {{ menuLv1.Name }}\r\n        </a>\r\n      </li>\r\n    }\r\n  }\r\n</ul>\r\n", styles: [".side-menu-wrapper .ant-menu-item{margin:0;font-weight:500}.side-menu-wrapper .ant-menu-item a{color:#474747}\n"] }]
         }], propDecorators: { isCollapsed: [{
                 type: Input
             }], filteredLstMenu: [{
@@ -14381,9 +14446,791 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                     ], template: "<nz-spin [nzSpinning]=\"isLoading\">\r\n  <div nz-row nzJustify=\"center\" class=\"login\">\r\n    <div class=\"form-container\">\r\n      <form nz-flex nzVertical=\"true\" nz-form [formGroup]=\"loginForm\" class=\"login-form\" (ngSubmit)=\"dologin()\">\r\n        <div>\r\n          <div style=\"text-align: center\">\r\n            <img *ngIf=\"logoUrl$ | async as url\" width=\"150px\" [src]=\"url\" hideIfError />\r\n          </div>\r\n          <div class=\"form-field\" style=\"text-align: center; margin-bottom: 20px\">\r\n            <h3 style=\"font-weight: bold; font-size: 20px\">{{ SYSTEM_NAME_LOGIN }}</h3>\r\n          </div>\r\n        </div>\r\n\r\n        <div nz-row [nzJustify]=\"'center'\">\r\n          <div nz-col nzSm=\"24\" nzMd=\"16\">\r\n            <div nz-flex nzVertical=\"true\">\r\n              <nz-form-item>\r\n                <nz-form-control nzErrorTip=\"{{ 'REQUIRED' | translate }}\">\r\n                  <nz-input-group nzPrefixIcon=\"user\">\r\n                    <input type=\"text\" nz-input formControlName=\"username\" placeholder=\"{{ 'USERNAME' | translate }}\" />\r\n                  </nz-input-group>\r\n                </nz-form-control>\r\n              </nz-form-item>\r\n\r\n              <nz-form-item>\r\n                <nz-form-control nzErrorTip=\"{{ 'REQUIRED' | translate }}\">\r\n                  <nz-input-group\r\n                    nzPrefixIcon=\"lock\"\r\n                    [nzSuffix]=\"visible ? suffixTemplateHiddenPassword : suffixTemplateShowPassword\"\r\n                  >\r\n                    <input\r\n                      type=\"{{ passwordType }}\"\r\n                      nz-input\r\n                      formControlName=\"password\"\r\n                      placeholder=\"{{ 'PASSWORD' | translate }}\"\r\n                    />\r\n                  </nz-input-group>\r\n                </nz-form-control>\r\n                <ng-template #suffixTemplateShowPassword>\r\n                  <nz-icon\r\n                    nzType=\"eye\"\r\n                    nzTheme=\"outline\"\r\n                    nz-tooltip\r\n                    nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n                    nzTooltipPlacement=\"right\"\r\n                    (click)=\"visible = !visible; passwordType = 'text'\"\r\n                  />\r\n                </ng-template>\r\n                <ng-template #suffixTemplateHiddenPassword>\r\n                  <nz-icon\r\n                    nzType=\"eye-invisible\"\r\n                    nzTheme=\"outline\"\r\n                    nz-tooltip\r\n                    nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n                    nzTooltipPlacement=\"right\"\r\n                    (click)=\"visible = !visible; passwordType = 'password'\"\r\n                  />\r\n                </ng-template>\r\n              </nz-form-item>\r\n\r\n              @if (isOneUserMultiOrgs) {\r\n                <nz-form-item>\r\n                  <nz-form-control nzErrorTip=\"{{ 'REQUIRED' | translate }}\">\r\n                    <nz-input-group nzPrefixIcon=\"cluster\" nzHasFeedback=\"false\">\r\n                      <nz-select\r\n                        nzShowSearch\r\n                        nzAllowClear\r\n                        [nzBorderless]=\"true\"\r\n                        [nzSize]=\"'small'\"\r\n                        nzPlaceHolder=\"{{ 'ORG' | translate }}\"\r\n                        formControlName=\"orgid\"\r\n                        class=\"no-error-border\"\r\n                        (nzFocus)=\"onFocusOrg()\"\r\n                      >\r\n                        @for (item of lstOrg; track $index) {\r\n                          <nz-option [nzLabel]=\"item.TreeNodeName!\" [nzValue]=\"item.App_Org_Id\"></nz-option>\r\n                        }\r\n                      </nz-select>\r\n                    </nz-input-group>\r\n                  </nz-form-control>\r\n                </nz-form-item>\r\n              }\r\n\r\n              <div nz-flex nzVertical=\"true\" nzGap=\"4px\">\r\n                <button nz-button [nzType]=\"'primary'\" nzBlock>\r\n                  {{ \"LOGIN\" | translate }}\r\n                </button>\r\n                <!-- \r\n              <nz-form-item nzJustify=\"end\">\r\n                <nz-switch formControlName=\"langSwitch\" class=\"nz-switch-both-active-color\" nzCheckedChildren=\"VN\"\r\n                  nzUnCheckedChildren=\"EN\" (ngModelChange)=\"changeLanguage($event)\"></nz-switch>\r\n              </nz-form-item> \r\n              --></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n  </div>\r\n</nz-spin>\r\n\r\n<img *ngIf=\"bgUrl$ | async as url\" class=\"bg-image\" [src]=\"url\" hideIfError />\r\n", styles: [":host{display:flex;justify-content:center;align-items:center;height:80vh}.form-container{width:clamp(280px,30vw,420px);box-shadow:0 10px 20px 1px #001a2d59;background-color:#fff;padding:16px;border-radius:8px}.bg-image{position:fixed;top:0;left:0;width:100vw;height:100vh;object-fit:cover;object-position:center;z-index:-1;pointer-events:none}::ng-deep .login .ant-select-selector{height:auto!important}::ng-deep .login .ant-input-affix-wrapper,::ng-deep .login .ant-btn{border-radius:8px}\n"] }]
         }] });
 
+const URLs = {
+    getPaging: '/api/WF/Workflow/getPaging',
+    saveWF: '/api/WF/Workflow/saveWF',
+    getWfData: '/api/WF/Workflow/getWfData',
+    deleteTemplate: '/api/WF/Workflow/deleteTemplate',
+    deleteStage: '/api/WF/Workflow/deleteStage',
+    deleteAction: '/api/WF/Workflow/deleteAction',
+    getByIdEx: '/api/WF/Workflow/getByIdEx',
+    getAll: '/api/WF/Workflow/getAll',
+    getList: '/api/WF/Workflow/getList',
+};
+class WFService extends HTTPService {
+    cms = inject(CommonService);
+    getPaging(filter) {
+        return this.postData(AppGlobals.apiEndpoint + URLs.getPaging, filter);
+    }
+    saveWF(data) {
+        return this.postData(AppGlobals.apiEndpoint + URLs.saveWF, data);
+    }
+    getWfData(templateId) {
+        const params = new HttpParams().append('templateId', templateId);
+        return this.getParams(AppGlobals.apiEndpoint + URLs.getWfData, params);
+    }
+    getDataForRule(templateId) {
+        return this.cms.ESP({
+            SPN: 'WF_Template_getDataForRule',
+            Params: [templateId],
+        });
+    }
+    checkRule(ruleLine, sourceActionId) {
+        const params = new HttpParams().append('sourceActionId', sourceActionId);
+        return this.postDataWithParams(AppGlobals.apiEndpoint + '/api/WF/Workflow/checkRule', ruleLine, params);
+    }
+    deleteTemplate(WF_Template_Id) {
+        const params = new HttpParams().append('WF_Template_Id', WF_Template_Id);
+        return this.postParams(AppGlobals.apiEndpoint + URLs.deleteTemplate, params);
+    }
+    deleteStage(WF_TemplateStage_Id) {
+        const params = new HttpParams().append('WF_TemplateStage_Id', WF_TemplateStage_Id);
+        return this.postParams(AppGlobals.apiEndpoint + URLs.deleteStage, params);
+    }
+    deleteAction(WF_TemplateStageAction_Id) {
+        const params = new HttpParams().append('WF_TemplateStageAction_Id', WF_TemplateStageAction_Id);
+        return this.postParams(AppGlobals.apiEndpoint + URLs.deleteAction, params);
+    }
+    deleteRule(WF_TemplateStageAction_Id, WF_TransitionsRule_Id) {
+        return this.post(AppGlobals.apiEndpoint +
+            `/api/WF/Workflow/deleteRule?WF_TemplateStageAction_Id=${WF_TemplateStageAction_Id}&WF_TransitionsRule_Id=${WF_TransitionsRule_Id}`);
+    }
+    deleteRuleLine(ruleLineId) {
+        return this.post(AppGlobals.apiEndpoint + '/api/WF/Workflow/deleteRuleLine?ruleLineId=' + ruleLineId);
+    }
+    getByIdEx(id) {
+        const params = new HttpParams().append('id', id);
+        return this.getParams(AppGlobals.apiEndpoint + URLs.getByIdEx, params);
+    }
+    getAll() {
+        return this.get(AppGlobals.apiEndpoint + URLs.getAll);
+    }
+    getList(filter) {
+        return this.postData(AppGlobals.apiEndpoint + URLs.getList, filter);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WFService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WFService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WFService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class WF_TemplateActionRef {
+    // #region properties
+    WF_TemplateActionRef_Id;
+    App_Org_Id;
+    CreatedDate;
+    CreatedUser;
+    UpdatedDate;
+    UpdatedUser;
+    IsActive;
+    WF_Template;
+    WF_TemplateStage;
+    WF_TemplateStageAction_Id;
+    To_WF_TemplateStageAction_Id;
+    TemplateMail;
+    // #endregion properties
+    ToAction_ActionStatus;
+    ToAction_ActionText;
+    ToAction_StageCode;
+    ToAction_StageName;
+    IsChange;
+    IsSelected;
+    TempId;
+    ToAction_TempId;
+    constructor(obj) {
+        obj = obj || {};
+        this.WF_TemplateActionRef_Id = obj.WF_TemplateActionRef_Id || null;
+        this.App_Org_Id = obj.App_Org_Id || '';
+        this.CreatedDate = obj.CreatedDate || null;
+        this.CreatedUser = obj.CreatedUser || '';
+        this.UpdatedDate = obj.UpdatedDate || null;
+        this.UpdatedUser = obj.UpdatedUser || '';
+        this.IsActive = obj.IsActive || false;
+        this.WF_Template = obj.WF_Template || null;
+        this.WF_TemplateStage = obj.WF_TemplateStage || null;
+        this.WF_TemplateStageAction_Id = obj.WF_TemplateStageAction_Id || null;
+        this.To_WF_TemplateStageAction_Id = obj.To_WF_TemplateStageAction_Id || null;
+        this.TemplateMail = obj.TemplateMail || '';
+        this.IsChange = obj.IsChange || false;
+        this.IsSelected = obj.IsSelected || false;
+        this.TempId = obj.TempId || null;
+        this.ToAction_TempId = obj.ToAction_TempId || null;
+        this.ToAction_ActionStatus = obj.ToAction_ActionStatus || null;
+        this.ToAction_ActionText = obj.ToAction_ActionText || null;
+        this.ToAction_StageCode = obj.ToAction_StageCode || null;
+        this.ToAction_StageName = obj.ToAction_StageName || null;
+    }
+}
+class WF_TemplateActionRefFilter extends GridFilter {
+    WF_TemplateActionRef_Id;
+    App_Org_Id;
+    CreatedDate;
+    CreatedUser;
+    UpdatedDate;
+    UpdatedUser;
+    IsActive;
+    WF_Template;
+    WF_TemplateStage;
+    WF_TemplateStageAction_Id;
+    To_WF_TemplateStageAction_Id;
+    TemplateMail;
+    constructor(obj) {
+        super();
+        obj = obj || {};
+        this.WF_TemplateActionRef_Id = obj.WF_TemplateActionRef_Id || null;
+        this.App_Org_Id = obj.App_Org_Id || null;
+        this.CreatedDate = obj.CreatedDate || null;
+        this.CreatedUser = obj.CreatedUser || null;
+        this.UpdatedDate = obj.UpdatedDate || null;
+        this.UpdatedUser = obj.UpdatedUser || null;
+        this.IsActive = obj.IsActive || false;
+        this.WF_Template = obj.WF_Template || null;
+        this.WF_TemplateStage = obj.WF_TemplateStage || null;
+        this.WF_TemplateStageAction_Id = obj.WF_TemplateStageAction_Id || null;
+        this.To_WF_TemplateStageAction_Id = obj.To_WF_TemplateStageAction_Id || null;
+        this.TemplateMail = obj.TemplateMail || null;
+    }
+}
+
+class WF_TemplateStageActionRole {
+    // #region properties
+    WF_TemplateStageActionRole_Id;
+    App_Org_Id;
+    CreatedDate;
+    CreatedUser;
+    UpdatedDate;
+    UpdatedUser;
+    IsActive;
+    WF_TemplateStage_Id;
+    WF_TemplateStageAction_Id;
+    App_Role_Id;
+    // #endregion properties
+    RoleCode;
+    RoleName;
+    IsChange;
+    TempId;
+    Stage_TempId;
+    constructor(obj) {
+        obj = obj || {};
+        this.WF_TemplateStageActionRole_Id = obj.WF_TemplateStageActionRole_Id || null;
+        this.App_Org_Id = obj.App_Org_Id || '';
+        this.CreatedDate = obj.CreatedDate || null;
+        this.CreatedUser = obj.CreatedUser || '';
+        this.UpdatedDate = obj.UpdatedDate || null;
+        this.UpdatedUser = obj.UpdatedUser || '';
+        this.IsActive = obj.IsActive || null;
+        this.WF_TemplateStage_Id = obj.WF_TemplateStage_Id || null;
+        this.WF_TemplateStageAction_Id = obj.WF_TemplateStageAction_Id || null;
+        this.App_Role_Id = obj.App_Role_Id || '';
+        this.RoleCode = obj.RoleCode || null;
+        this.RoleName = obj.RoleName || null;
+        this.IsChange = obj.IsChange || false;
+        this.TempId = obj.TempId || null;
+        this.Stage_TempId = obj.Stage_TempId || null;
+    }
+}
+class WF_TemplateStageActionRoleFilter extends GridFilter {
+    WF_TemplateStageActionRole_Id;
+    App_Org_Id;
+    CreatedDate;
+    CreatedUser;
+    UpdatedDate;
+    UpdatedUser;
+    IsActive;
+    WF_TemplateStage_Id;
+    WF_TemplateStageAction_Id;
+    App_Role_Id;
+    constructor(obj) {
+        super();
+        obj = obj || {};
+        this.WF_TemplateStageActionRole_Id = obj.WF_TemplateStageActionRole_Id || null;
+        this.App_Org_Id = obj.App_Org_Id || null;
+        this.CreatedDate = obj.CreatedDate || null;
+        this.CreatedUser = obj.CreatedUser || null;
+        this.UpdatedDate = obj.UpdatedDate || null;
+        this.UpdatedUser = obj.UpdatedUser || null;
+        this.IsActive = obj.IsActive || null;
+        this.WF_TemplateStage_Id = obj.WF_TemplateStage_Id || null;
+        this.WF_TemplateStageAction_Id = obj.WF_TemplateStageAction_Id || null;
+        this.App_Role_Id = obj.App_Role_Id || null;
+    }
+}
+
+class WF_TemplateStageAction {
+    // #region properties
+    WF_TemplateStageAction_Id;
+    App_Org_Id;
+    CreatedDate;
+    CreatedUser;
+    UpdatedDate;
+    UpdatedUser;
+    IsActive;
+    WF_Template_Id;
+    WF_TemplateStage_Id;
+    ActionType;
+    ActionStatus;
+    ActionText;
+    StageStatus;
+    AllowNote;
+    AllowEmail;
+    WF_EmailTemplate;
+    To_WF_TemplateStage_Id;
+    To_StageStatus;
+    WF_TransitionsRule_Id;
+    // #endregion properties
+    ListUserRole;
+    ListUserRoleSelect;
+    ListUserRoleSelect_Delete;
+    UserCtrl = new FormControl();
+    FilteredUsers;
+    ListUserString;
+    ProjectName;
+    TaskName;
+    ListEmailUserString;
+    ListEmail;
+    TempId;
+    IsChange;
+    ListActionRef;
+    ListActionRef_Delete;
+    ToStage_TempId;
+    ListRole;
+    ListRole_Delete;
+    StageCode;
+    StageName;
+    IsSelected;
+    _prevListUserRoleSelectStr;
+    ListUserRoleSelectStr;
+    constructor(obj) {
+        obj = obj || {};
+        this.WF_TemplateStageAction_Id = obj.WF_TemplateStageAction_Id || null;
+        this.App_Org_Id = obj.App_Org_Id || '';
+        this.CreatedDate = obj.CreatedDate || null;
+        this.CreatedUser = obj.CreatedUser || '';
+        this.UpdatedDate = obj.UpdatedDate || null;
+        this.UpdatedUser = obj.UpdatedUser || '';
+        this.IsActive = obj.IsActive || null;
+        this.WF_Template_Id = obj.WF_Template_Id || null;
+        this.WF_TemplateStage_Id = obj.WF_TemplateStage_Id || null;
+        this.ActionType = obj.ActionType || '';
+        this.ActionStatus = obj.ActionStatus || '';
+        this.ActionText = obj.ActionText || '';
+        this.StageStatus = obj.StageStatus || '';
+        this.AllowNote = obj.AllowNote || null;
+        this.AllowEmail = obj.AllowEmail || null;
+        this.WF_EmailTemplate = obj.WF_EmailTemplate || null;
+        this.To_WF_TemplateStage_Id = obj.To_WF_TemplateStage_Id || null;
+        this.To_StageStatus = obj.To_StageStatus || '';
+        this.WF_TransitionsRule_Id = obj.WF_TransitionsRule_Id || null;
+        this.ListUserRole = obj.ListUserRole || [];
+        this.ListUserRoleSelect = obj.ListUserRoleSelect || [];
+        this.ListUserRoleSelect_Delete = obj.ListUserRoleSelect_Delete || [];
+        this.ListUserString = obj.ListUserString || '';
+        this.ProjectName = obj.ProjectName || '';
+        this.TaskName = obj.TaskName || '';
+        this.ListEmailUserString = obj.ListEmailUserString || '';
+        this.ListEmail = obj.ListEmail || [];
+        this.TempId = obj.TempId || null;
+        this.IsChange = obj.IsChange || false;
+        // this.ListActionRef = obj.ListActionRef || [];
+        this.ListActionRef_Delete = obj.ListActionRef_Delete || [];
+        // this.ListRole = obj.ListRole || [];
+        this.ListRole_Delete = obj.ListRole_Delete || [];
+        this.ToStage_TempId = obj.ToStage_TempId || null;
+        this.StageCode = obj.StageCode || null;
+        this.StageName = obj.StageName || null;
+        this.IsSelected = obj.IsSelected || false;
+        this.ListRole = (obj.ListRole || []).map((s) => new WF_TemplateStageActionRole(s));
+        this.ListActionRef = (obj.ListActionRef || []).map((s) => new WF_TemplateActionRef(s));
+        this.UserCtrl = new FormControl();
+        this.FilteredUsers = this.UserCtrl.valueChanges.pipe(startWith$1(null), map$1((user) => (user ? this._filter(user) : this.ListUserRole.slice())));
+        this.ListUserRoleSelectStr = obj.ListUserRoleSelectStr || [];
+    }
+    // private _filter(value: string | UserRoleModel): UserRoleModel[] {
+    //     const filterValue = typeof value === 'string'
+    //         ? value.toLowerCase()
+    //         : value?.FullName.toLowerCase();
+    //     return this.ListUserRole.filter(user =>
+    //         user.FullName.toLowerCase().includes(filterValue)
+    //     );
+    // }
+    _filter(value) {
+        let filterValue = '';
+        if (typeof value === 'string') {
+            filterValue = value.toLowerCase();
+        }
+        else if (value && value.FullName) {
+            filterValue = value.FullName.toLowerCase();
+        }
+        return this.ListUserRole.filter((user) => user.FullName?.toLowerCase().includes(filterValue));
+    }
+    toJSON() {
+        // eslint-disable-next-line no-unused-vars
+        const { UserCtrl, FilteredUsers, ...plain } = this;
+        return plain;
+    }
+}
+class WF_TemplateStageActionFilter extends GridFilter {
+    WF_TemplateStageAction_Id;
+    App_Org_Id;
+    CreatedDate;
+    CreatedUser;
+    UpdatedDate;
+    UpdatedUser;
+    IsActive;
+    WF_Template_Id;
+    WF_TemplateStage_Id;
+    ActionType;
+    ActionStatus;
+    ActionText;
+    StageStatus;
+    AllowNote;
+    AllowEmail;
+    WF_EmailTemplate;
+    To_WF_TemplateStage_Id;
+    To_StageStatus;
+    WF_TransitionsRule_Id;
+    constructor(obj) {
+        super();
+        obj = obj || {};
+        this.WF_TemplateStageAction_Id = obj.WF_TemplateStageAction_Id || null;
+        this.App_Org_Id = obj.App_Org_Id || null;
+        this.CreatedDate = obj.CreatedDate || null;
+        this.CreatedUser = obj.CreatedUser || null;
+        this.UpdatedDate = obj.UpdatedDate || null;
+        this.UpdatedUser = obj.UpdatedUser || null;
+        this.IsActive = obj.IsActive || null;
+        this.WF_Template_Id = obj.WF_Template_Id || null;
+        this.WF_TemplateStage_Id = obj.WF_TemplateStage_Id || null;
+        this.ActionType = obj.ActionType || null;
+        this.ActionStatus = obj.ActionStatus || null;
+        this.ActionText = obj.ActionText || null;
+        this.StageStatus = obj.StageStatus || null;
+        this.AllowNote = obj.AllowNote || null;
+        this.AllowEmail = obj.AllowEmail || null;
+        this.WF_EmailTemplate = obj.WF_EmailTemplate || null;
+        this.To_WF_TemplateStage_Id = obj.To_WF_TemplateStage_Id || null;
+        this.To_StageStatus = obj.To_StageStatus || null;
+        this.WF_TransitionsRule_Id = obj.WF_TransitionsRule_Id || null;
+    }
+}
+class UserRoleModel {
+    App_Role_Id = '';
+    RoleName = '';
+    App_User_Id = '';
+    FullName = '';
+}
+
+class WF_TemplateStage {
+    // #region properties
+    WF_TemplateStage_Id;
+    App_Org_Id;
+    CreatedDate;
+    CreatedUser;
+    UpdatedDate;
+    UpdatedUser;
+    IsActive;
+    WF_Template_Id;
+    Code;
+    Name;
+    StageType;
+    SeqValue;
+    LimitValue;
+    IsRequireUser;
+    NumberDay;
+    // #endregion properties
+    ListAction;
+    ListAction_Delete;
+    OrgName;
+    Status;
+    CurrentActionId;
+    CurrentActionText;
+    DocId;
+    ListActionByRole;
+    IsEdit;
+    IsEditUser;
+    IsDone;
+    TempId;
+    IsChange;
+    StartDate;
+    EndDate;
+    ListEmailNoti;
+    constructor(obj) {
+        obj = obj || {};
+        this.WF_TemplateStage_Id = obj.WF_TemplateStage_Id || null;
+        this.App_Org_Id = obj.App_Org_Id || '';
+        this.CreatedDate = obj.CreatedDate || null;
+        this.CreatedUser = obj.CreatedUser || '';
+        this.UpdatedDate = obj.UpdatedDate || null;
+        this.UpdatedUser = obj.UpdatedUser || '';
+        this.IsActive = obj.IsActive || null;
+        this.WF_Template_Id = obj.WF_Template_Id || null;
+        this.Code = obj.Code || '';
+        this.Name = obj.Name || '';
+        this.StageType = obj.StageType || '';
+        this.SeqValue = obj.SeqValue || null;
+        this.LimitValue = obj.LimitValue || null;
+        this.OrgName = obj.OrgName || '';
+        this.Status = obj.Status || 'pending';
+        this.CurrentActionId = obj.CurrentActionId || '';
+        this.CurrentActionText = obj.CurrentActionText || '';
+        this.DocId = obj.DocId || '';
+        this.IsEdit = obj.IsEdit || false;
+        this.IsEditUser = obj.IsEditUser || false;
+        this.IsRequireUser = obj.IsRequireUser || false;
+        this.IsDone = obj.IsDone || false;
+        this.TempId = obj.TempId || null;
+        this.IsChange = obj.IsChange || false;
+        this.NumberDay = obj.NumberDay || null;
+        this.ListAction_Delete = obj.ListAction_Delete || [];
+        this.StartDate = obj.StartDate || null;
+        this.EndDate = obj.EndDate || null;
+        this.ListEmailNoti = obj.ListEmailNoti || [];
+        this.ListAction = (obj.ListAction || []).map((s) => new WF_TemplateStageAction(s));
+        this.ListActionByRole = (obj.ListActionByRole || []).map((s) => new WF_TemplateStageAction(s));
+    }
+}
+class WF_TemplateStageFilter extends GridFilter {
+    WF_TemplateStage_Id;
+    App_Org_Id;
+    CreatedDate;
+    CreatedUser;
+    UpdatedDate;
+    UpdatedUser;
+    IsActive;
+    WF_Template_Id;
+    Code;
+    Name;
+    StageType;
+    SeqValue;
+    LimitValue;
+    IsRequireUser;
+    NumberDay;
+    constructor(obj) {
+        super();
+        obj = obj || {};
+        this.WF_TemplateStage_Id = obj.WF_TemplateStage_Id || null;
+        this.App_Org_Id = obj.App_Org_Id || null;
+        this.CreatedDate = obj.CreatedDate || null;
+        this.CreatedUser = obj.CreatedUser || null;
+        this.UpdatedDate = obj.UpdatedDate || null;
+        this.UpdatedUser = obj.UpdatedUser || null;
+        this.IsActive = obj.IsActive || null;
+        this.WF_Template_Id = obj.WF_Template_Id || null;
+        this.Code = obj.Code || null;
+        this.Name = obj.Name || null;
+        this.StageType = obj.StageType || null;
+        this.SeqValue = obj.SeqValue || null;
+        this.LimitValue = obj.LimitValue || null;
+        this.IsRequireUser = obj.IsRequireUser || false;
+        this.NumberDay = obj.NumberDay || null;
+    }
+}
+
+class WF_Template {
+    // #region properties
+    WF_Template_Id;
+    App_Org_Id;
+    CreatedDate;
+    CreatedUser;
+    UpdatedDate;
+    UpdatedUser;
+    IsActive;
+    Code;
+    Name;
+    DocType;
+    Description;
+    TemplatePrint;
+    // #endregion properties
+    ListStage;
+    ListStage_Delete;
+    IsUsed;
+    DocTypeName;
+    NumberStage;
+    constructor(obj) {
+        obj = obj || {};
+        this.WF_Template_Id = obj.WF_Template_Id || 0;
+        this.App_Org_Id = obj.App_Org_Id || '';
+        this.CreatedDate = obj.CreatedDate || null;
+        this.CreatedUser = obj.CreatedUser || '';
+        this.UpdatedDate = obj.UpdatedDate || null;
+        this.UpdatedUser = obj.UpdatedUser || '';
+        this.IsActive = obj.IsActive || null;
+        this.Code = obj.Code || '';
+        this.Name = obj.Name || '';
+        this.DocType = obj.DocType || '';
+        this.Description = obj.Description || '';
+        this.TemplatePrint = obj.TemplatePrint || null;
+        this.ListStage_Delete = obj.ListStage_Delete || [];
+        this.IsUsed = obj.IsUsed || false;
+        this.DocTypeName = obj.DocTypeName || null;
+        this.NumberStage = obj.NumberStage || 0;
+        this.ListStage = (obj.ListStage || []).map((s) => new WF_TemplateStage(s));
+    }
+}
+class WF_TemplateFilter extends GridFilter {
+    WF_Template_Id;
+    App_Org_Id;
+    CreatedDate;
+    CreatedUser;
+    UpdatedDate;
+    UpdatedUser;
+    IsActive;
+    Code;
+    Name;
+    DocType;
+    Description;
+    TemplatePrint;
+    constructor(obj) {
+        super();
+        obj = obj || {};
+        this.WF_Template_Id = obj.WF_Template_Id || null;
+        this.App_Org_Id = obj.App_Org_Id || null;
+        this.CreatedDate = obj.CreatedDate || null;
+        this.CreatedUser = obj.CreatedUser || null;
+        this.UpdatedDate = obj.UpdatedDate || null;
+        this.UpdatedUser = obj.UpdatedUser || null;
+        this.IsActive = obj.IsActive || null;
+        this.Code = obj.Code || null;
+        this.Name = obj.Name || null;
+        this.DocType = obj.DocType || null;
+        this.Description = obj.Description || null;
+        this.TemplatePrint = obj.TemplatePrint || null;
+    }
+}
+
+class WF_TemplateList extends BaseComponent {
+    _wfService = inject(WFService);
+    filter = new WF_TemplateFilter();
+    pagingData = new PagingData();
+    ngOnInit() {
+        this.getData();
+        Breadcrumb.lstBreadcrumb = [
+            {
+                Name: 'Workflow tempalate',
+                Click: () => this.getData(),
+            },
+        ];
+    }
+    getData() {
+        this._wfService.getPaging(this.filter).then((res) => {
+            this.pagingData = res.Data || new PagingData();
+        }, (err) => this.handleError(err));
+    }
+    onQueryParamsChange(pageIndex, pageSize) {
+        this.filter.PageIndex = pageIndex;
+        this.filter.PageSize = pageSize;
+        this.getData();
+    }
+    detail(template) {
+        if (template) {
+            this.goto('/workflow/template/' + template.WF_Template_Id);
+        }
+        else {
+            this.goto('NEW');
+        }
+    }
+    async delete(row) {
+        if (row.WF_Template_Id && (await this.confirm('Xóa template??'))) {
+            this._wfService.deleteTemplate(row.WF_Template_Id).then((res) => {
+                this.notiService.success();
+                this.getData();
+            }, (err) => this.handleError(err));
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WF_TemplateList, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: WF_TemplateList, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-row [nzGutter]=\"[32, 0]\">\r\n      <div nz-col [nzSpan]=\"12\">\r\n        <div nz-flex nzGap=\"small\">\r\n          <button nz-button nzType=\"primary\" (click)=\"detail()\">{{ TranslateKey.ADD | translate }}</button>\r\n          <button nz-button nzType=\"primary\" (click)=\"getData()\">{{ TranslateKey.SEARCH | translate }}</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div nz-col [nzSpan]=\"12\">\r\n        <div nz-flex nzJustify=\"end\">\r\n          <nz-pagination\r\n            [nzSize]=\"'small'\"\r\n            [nzPageIndex]=\"filter.PageIndex + 1\"\r\n            [nzPageSize]=\"filter.PageSize\"\r\n            [nzTotal]=\"pagingData.TotalCount || 0\"\r\n            [nzShowSizeChanger]=\"true\"\r\n            [nzShowTotal]=\"showTotalTpl\"\r\n            [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n            (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n            (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n          >\r\n          </nz-pagination>\r\n\r\n          <ng-template #showTotalTpl let-total let-range=\"range\">\r\n            {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"pagingData.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzFrontPagination]=\"false\"\r\n    >\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"75px\">#</th>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th>Code</th>\r\n          <th>Name</th>\r\n          <th nzWidth=\"80px\">Hi\u1EC7u l\u1EF1c</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of table.data; track $index; let i = $index) {\r\n          <tr>\r\n            <td class=\"text-center\">\r\n              <nz-icon\r\n                nzType=\"edit\"\r\n                nzTheme=\"outline\"\r\n                class=\"color-primary cursor-pointer icon-size-16\"\r\n                (click)=\"detail(row)\"\r\n              ></nz-icon>\r\n              <box [width]=\"5\"></box>\r\n              <a (click)=\"delete(row)\">\r\n                <i nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn cursor-pointer icon-size-16\"></i>\r\n              </a>\r\n            </td>\r\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n            <td>\r\n              <span class=\"link-detail\" (click)=\"goto('/workflow/template/' + row.WF_Template_Id)\">{{ row.Code }}</span>\r\n            </td>\r\n            <td>{{ row.Name }}</td>\r\n            <td class=\"text-center\">\r\n              @if (row.IsActive) {\r\n                <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n              } @else {\r\n                <nz-icon nzType=\"close\" nzTheme=\"outline\" class=\"color-warn\" />\r\n              }\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<nz-dropdown-menu #searchNameMenu=\"nzDropdownMenu\">\r\n  <div class=\"ant-table-filter-dropdown\">\r\n    <div class=\"search-box\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        [(ngModel)]=\"filter.Name\"\r\n        [appAutoFocus]=\"isDropdownVisible\"\r\n        (keyup.enter)=\"search()\"\r\n      />\r\n      <button nz-button nzSize=\"small\" nzType=\"primary\" (click)=\"search()\" class=\"search-button\">\r\n        {{ \"SEARCH\" | translate }}\r\n      </button>\r\n      <button nz-button nzSize=\"small\" (click)=\"filter.Name = ''; search()\">{{ \"RESET\" | translate }}</button>\r\n    </div>\r\n  </div>\r\n</nz-dropdown-menu>\r\n<nz-dropdown-menu #searchParentNameMenu=\"nzDropdownMenu\">\r\n  <div class=\"ant-table-filter-dropdown\">\r\n    <div class=\"search-box\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        [(ngModel)]=\"filter.ParentName\"\r\n        [appAutoFocus]=\"isDropdownVisible\"\r\n        (keyup.enter)=\"search()\"\r\n      />\r\n      <button nz-button nzSize=\"small\" nzType=\"primary\" (click)=\"search()\" class=\"search-button\">\r\n        {{ \"SEARCH\" | translate }}\r\n      </button>\r\n      <button nz-button nzSize=\"small\" (click)=\"filter.ParentName = ''; search()\">{{ \"RESET\" | translate }}</button>\r\n    </div>\r\n  </div>\r\n</nz-dropdown-menu> -->\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { 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: i6$2.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: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.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: NzPaginationModule }, { kind: "component", type: i5$3.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { 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: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$3.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.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: WF_TemplateList, decorators: [{
+            type: Component,
+            args: [{ imports: [
+                        CommonModule,
+                        NzGridModule,
+                        NzFlexModule,
+                        NzTableModule,
+                        NzPaginationModule,
+                        TranslateModule,
+                        NzIconModule,
+                        Box,
+                        RouterModule,
+                        NzButtonModule,
+                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-row [nzGutter]=\"[32, 0]\">\r\n      <div nz-col [nzSpan]=\"12\">\r\n        <div nz-flex nzGap=\"small\">\r\n          <button nz-button nzType=\"primary\" (click)=\"detail()\">{{ TranslateKey.ADD | translate }}</button>\r\n          <button nz-button nzType=\"primary\" (click)=\"getData()\">{{ TranslateKey.SEARCH | translate }}</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div nz-col [nzSpan]=\"12\">\r\n        <div nz-flex nzJustify=\"end\">\r\n          <nz-pagination\r\n            [nzSize]=\"'small'\"\r\n            [nzPageIndex]=\"filter.PageIndex + 1\"\r\n            [nzPageSize]=\"filter.PageSize\"\r\n            [nzTotal]=\"pagingData.TotalCount || 0\"\r\n            [nzShowSizeChanger]=\"true\"\r\n            [nzShowTotal]=\"showTotalTpl\"\r\n            [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n            (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n            (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n          >\r\n          </nz-pagination>\r\n\r\n          <ng-template #showTotalTpl let-total let-range=\"range\">\r\n            {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"pagingData.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzFrontPagination]=\"false\"\r\n    >\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"75px\">#</th>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th>Code</th>\r\n          <th>Name</th>\r\n          <th nzWidth=\"80px\">Hi\u1EC7u l\u1EF1c</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of table.data; track $index; let i = $index) {\r\n          <tr>\r\n            <td class=\"text-center\">\r\n              <nz-icon\r\n                nzType=\"edit\"\r\n                nzTheme=\"outline\"\r\n                class=\"color-primary cursor-pointer icon-size-16\"\r\n                (click)=\"detail(row)\"\r\n              ></nz-icon>\r\n              <box [width]=\"5\"></box>\r\n              <a (click)=\"delete(row)\">\r\n                <i nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn cursor-pointer icon-size-16\"></i>\r\n              </a>\r\n            </td>\r\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n            <td>\r\n              <span class=\"link-detail\" (click)=\"goto('/workflow/template/' + row.WF_Template_Id)\">{{ row.Code }}</span>\r\n            </td>\r\n            <td>{{ row.Name }}</td>\r\n            <td class=\"text-center\">\r\n              @if (row.IsActive) {\r\n                <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n              } @else {\r\n                <nz-icon nzType=\"close\" nzTheme=\"outline\" class=\"color-warn\" />\r\n              }\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<nz-dropdown-menu #searchNameMenu=\"nzDropdownMenu\">\r\n  <div class=\"ant-table-filter-dropdown\">\r\n    <div class=\"search-box\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        [(ngModel)]=\"filter.Name\"\r\n        [appAutoFocus]=\"isDropdownVisible\"\r\n        (keyup.enter)=\"search()\"\r\n      />\r\n      <button nz-button nzSize=\"small\" nzType=\"primary\" (click)=\"search()\" class=\"search-button\">\r\n        {{ \"SEARCH\" | translate }}\r\n      </button>\r\n      <button nz-button nzSize=\"small\" (click)=\"filter.Name = ''; search()\">{{ \"RESET\" | translate }}</button>\r\n    </div>\r\n  </div>\r\n</nz-dropdown-menu>\r\n<nz-dropdown-menu #searchParentNameMenu=\"nzDropdownMenu\">\r\n  <div class=\"ant-table-filter-dropdown\">\r\n    <div class=\"search-box\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        [(ngModel)]=\"filter.ParentName\"\r\n        [appAutoFocus]=\"isDropdownVisible\"\r\n        (keyup.enter)=\"search()\"\r\n      />\r\n      <button nz-button nzSize=\"small\" nzType=\"primary\" (click)=\"search()\" class=\"search-button\">\r\n        {{ \"SEARCH\" | translate }}\r\n      </button>\r\n      <button nz-button nzSize=\"small\" (click)=\"filter.ParentName = ''; search()\">{{ \"RESET\" | translate }}</button>\r\n    </div>\r\n  </div>\r\n</nz-dropdown-menu> -->\r\n" }]
+        }] });
+
+class WF_TemplateDetail extends BaseComponent {
+    _orgService = inject(OrgService);
+    _roleService = inject(RoleService);
+    _wfService = inject(WFService);
+    _mailTemplateService = inject(MailTemplateService);
+    lstOrg = [];
+    lstRole = [];
+    lstEmailTemplate = [];
+    lstAllTemplate = [];
+    lstAllStage = [];
+    lstAllAction = [];
+    template = new Workflow();
+    lstStage = [];
+    lstAction = [];
+    lstActionRef = [];
+    wfeditor;
+    ngOnInit() {
+        this.getData();
+        this.getMasterData();
+        this.updateBreadcrumb();
+    }
+    ngOnDestroy() { }
+    updateBreadcrumb() {
+        Breadcrumb.lstBreadcrumb = [
+            {
+                Name: 'Workflow tempalate',
+                URL: '/workflow/template',
+            },
+            {
+                Name: this.template.WF_Template_Id ? `${this.template.Code} - ${this.template.Name}` : 'NEW',
+            },
+        ];
+    }
+    async getData(id) {
+        const templateId = id || this.getUrlParam('id');
+        this._wfService.getDataForRule(templateId).then((res) => {
+            this.lstAllTemplate = res.Data.LstAllTemplate || [];
+            this.lstAllStage = res.Data.LstAllStage || [];
+            this.lstAllAction = res.Data.LstAllAction || [];
+            this.wfeditor.lstAllTemplate = this.lstAllTemplate;
+            this.wfeditor.lstAllStage = this.lstAllStage;
+            this.wfeditor.lstAllAction = this.lstAllAction;
+        }, (err) => this.handleError(err));
+        if (templateId && templateId != 'NEW') {
+            this._wfService.getWfData(templateId).then((res) => {
+                if (res.Data) {
+                    this.template = res.Data.Template || {};
+                    this.lstStage = res.Data.LstStage || [];
+                    this.lstAction = res.Data.LstAction || [];
+                    this.lstActionRef = res.Data.LstActionRef || [];
+                    this.wfeditor.template = this.template;
+                    this.wfeditor.lstStage = this.lstStage;
+                    this.wfeditor.lstAction = this.lstAction;
+                    this.wfeditor.lstActionRef = this.lstActionRef;
+                    this.wfeditor.afterInput();
+                    this.updateBreadcrumb();
+                }
+            }, (err) => this.handleError(err));
+        }
+        else {
+            setTimeout(() => {
+                this.template = new Workflow();
+                this.lstStage = [];
+                this.lstAction = [];
+                this.lstActionRef = [];
+                this.wfeditor.template = this.template;
+                this.wfeditor.lstStage = this.lstStage;
+                this.wfeditor.lstAction = this.lstAction;
+                this.wfeditor.lstActionRef = this.lstActionRef;
+                this.wfeditor.afterInput();
+            }, 0);
+        }
+    }
+    getMasterData() {
+        this._orgService.getAll().then((res) => {
+            let lstOrg = res.Data;
+            this.lstOrg = lstOrg.map((x) => {
+                return { App_Org_Id: x.App_Org_Id || '', Code: x.Code || '', Name: x.TreeNodeName || '' };
+            });
+        });
+        this._roleService.getAll().then((res) => (this.lstRole = res.Data || []));
+        this._mailTemplateService.getAll().then((res) => (this.lstEmailTemplate = res.Data || []));
+    }
+    save(data) {
+        console.log('save', data);
+        // return;
+        this._wfService
+            .saveWF({
+            Template: data.template,
+            LstStage: data.lstStage,
+            LstAction: data.lstAction,
+            LstActionRef: data.lstActionRef,
+        })
+            .then((res) => {
+            this.notiService.success();
+            this.goto('/workflow/template/' + res.Data);
+            this.getData(res.Data);
+        }, (err) => {
+            this.handleError(err);
+            this.wfeditor.ready = true;
+        });
+    }
+    deleteStage(stage) {
+        if (stage.IsTempId)
+            return;
+        this._wfService.deleteStage(stage.WF_TemplateStage_Id).then((res) => {
+            this.notiService.success();
+            this.getData();
+        }, (err) => this.handleError(err));
+    }
+    deleteAction(action) {
+        if (!action.WF_TemplateStageAction_Id)
+            return;
+        this._wfService.deleteAction(action.WF_TemplateStageAction_Id).then((res) => {
+            this.notiService.success();
+            this.getData();
+        }, (err) => this.handleError(err));
+    }
+    deleteRule(obj) {
+        this._wfService.deleteRule(obj.WF_TemplateStageAction_Id, obj.WF_TransitionsRule_Id).then((res) => {
+            this.notiService.success();
+            this.getData();
+        }, (err) => {
+            this.handleError(err);
+            this.getData();
+        });
+    }
+    deleteRuleLine(ruleLineId) {
+        this._wfService.deleteRuleLine(ruleLineId).then((res) => {
+            this.notiService.success();
+            // this.getData();
+        }, (err) => {
+            this.handleError(err);
+            this.getData();
+        });
+    }
+    onCheckRule(data) {
+        this._wfService.checkRule(data.ruleline, data.sourceActionId).then((res) => {
+            if (res.IsSuccess) {
+                this.success('Rule OK', res.Data, { showPopup: true, popupWidth: '30vw' });
+            }
+            else {
+                this.error('Rule NOT OK', res.ErrorMessage, { showPopup: true, popupWidth: '30vw' });
+            }
+        }, (err) => this.handleError(err));
+    }
+    async onCheckAllRule(data) {
+        const lstruleline = data.lstruleline;
+        const sourceActionId = data.sourceActionId;
+        for (let i = 0; i < lstruleline.length; i++) {
+            const ruleline = lstruleline[i];
+            const res = await this._wfService.checkRule(ruleline, sourceActionId);
+            if (!res.IsSuccess) {
+                this.error('Rule NOT OK', res.ErrorMessage, { showPopup: true });
+                return;
+            }
+        }
+        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)\">\r\n  <app-workflow-editor\r\n    #wfeditor\r\n    [lstOrg]=\"lstOrg\"\r\n    [lstRole]=\"lstRole\"\r\n    [lstEmailTemplate]=\"lstEmailTemplate\"\r\n    (onSave)=\"save($event)\"\r\n    (onDeleteStage)=\"deleteStage($event)\"\r\n    (onDeleteAction)=\"deleteAction($event)\"\r\n    (onDeleteRule)=\"deleteRule($event)\"\r\n    (onDeleteRuleLine)=\"deleteRuleLine($event)\"\r\n    (onCheckRule)=\"onCheckRule($event)\"\r\n    (onCheckAllRule)=\"onCheckAllRule($event)\"\r\n  ></app-workflow-editor>\r\n</div>\r\n", styles: [".workflow-wrapper{position:relative}\n"], dependencies: [{ kind: "component", type: WorkflowEditorComponent, selector: "app-workflow-editor", inputs: ["lstOrg", "lstRole", "lstEmailTemplate"], outputs: ["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,
+            args: [{ imports: [WorkflowEditorComponent], template: "<div class=\"workflow-wrapper\" style=\"height: calc(100vh - 110px)\">\r\n  <app-workflow-editor\r\n    #wfeditor\r\n    [lstOrg]=\"lstOrg\"\r\n    [lstRole]=\"lstRole\"\r\n    [lstEmailTemplate]=\"lstEmailTemplate\"\r\n    (onSave)=\"save($event)\"\r\n    (onDeleteStage)=\"deleteStage($event)\"\r\n    (onDeleteAction)=\"deleteAction($event)\"\r\n    (onDeleteRule)=\"deleteRule($event)\"\r\n    (onDeleteRuleLine)=\"deleteRuleLine($event)\"\r\n    (onCheckRule)=\"onCheckRule($event)\"\r\n    (onCheckAllRule)=\"onCheckAllRule($event)\"\r\n  ></app-workflow-editor>\r\n</div>\r\n", styles: [".workflow-wrapper{position:relative}\n"] }]
+        }], propDecorators: { wfeditor: [{
+                type: ViewChild,
+                args: ['wfeditor']
+            }] } });
+
 /**
  * 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, HideIfErrorDirective, HighlightPipe, IconAdd, IconCheck, IconClose, IconDelete, IconEdit, IconSave, IconSearch, IconView, LayoutComponent, LimitLettersPipe, LimitWordsPipe, LineGraphComponent, LoadingService, LogAppComponent, LogServerComponent, LogServerDetailComponent, LoginComponent, MailTemplateService, MenuDetailComponent, MenuFilter, MenuListComponent, MenuService, MonitorComponent, NoPermission, Nodata, NotiService, NullIfEmptyDirective, NumberOnlyDirective, OrderOption, OrgDetailComponent, OrgFilter, OrgListComponent, OrgService, PagingData, PagingModel, PdfViewerComponent, PermissionComponent, PermissionService$1 as PermissionService, ReadMoreProComponent, RoleDetailComponent, RoleFilter, RoleListComponent, RoleService, RouteMonitorService, SequenceDetailComponent, SequenceListComponent, SessionManagerService, SettingListComponent, SettingService$1 as SettingService, SynologyComponent, TableHeader, ThemeService, TokenStorage, TranslateKey, URLs$e as URLs, UnsavedChangesGuard, UpperCaseFirsLetterEachWordDirective, UppercaseDirective, UppercaseFirstLetterDirective, UserDetailComponent, UserFilter, UserListComponent, UserProfileComponent, UserProfileService, UserService, VersionComponent, VscService, WF_TemplateActionRef, WF_TransitionRule, WF_TransitionRuleLine, Workflow, WorkflowAction, WorkflowActionEditorOption, WorkflowActionRef, WorkflowEditorComponent, WorkflowEditorOption, WorkflowStage, WorkflowStageEditorOption, XLSXHelper, authInterceptor };
+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, HideIfErrorDirective, HighlightPipe, IconAdd, IconCheck, IconClose, IconDelete, IconEdit, IconSave, IconSearch, IconView, LayoutComponent, LimitLettersPipe, LimitWordsPipe, LineGraphComponent, LoadingService, LogAppComponent, LogServerComponent, LogServerDetailComponent, LoginComponent, MailTemplateService, MenuDetailComponent, MenuFilter, MenuListComponent, MenuService, MonitorComponent, NoPermission, Nodata, NotiService, NullIfEmptyDirective, NumberOnlyDirective, OrderOption, OrgDetailComponent, OrgFilter, OrgListComponent, OrgService, PagingData, PagingModel, PdfViewerComponent, PermissionComponent, PermissionService$1 as PermissionService, ReadMoreProComponent, RegisterComponent, RoleDetailComponent, RoleFilter, RoleListComponent, RoleService, RouteMonitorService, SequenceDetailComponent, SequenceListComponent, SessionManagerService, SettingListComponent, SettingService$1 as SettingService, SynologyComponent, TableHeader, ThemeService, TokenStorage, TranslateKey, URLs$f as URLs, UnsavedChangesGuard, UpperCaseFirsLetterEachWordDirective, UppercaseDirective, UppercaseFirstLetterDirective, UserDetailComponent, UserFilter, UserListComponent, UserProfileComponent, UserProfileService, UserService, VersionComponent, VscService, WF_TemplateActionRef$1 as WF_TemplateActionRef, WF_TemplateDetail, WF_TemplateList, WF_TransitionRule, WF_TransitionRuleLine, Workflow, WorkflowAction, WorkflowActionEditorOption, WorkflowActionRef, WorkflowEditorComponent, WorkflowEditorOption, WorkflowStage, WorkflowStageEditorOption, XLSXHelper, authInterceptor };
 //# sourceMappingURL=brggroup-share-lib.mjs.map