@brggroup/share-lib 0.1.47 → 0.1.49

package/fesm2022/brggroup-share-lib.mjs

@@ -1,17 +1,17 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, NgZone, Component, HostListener, ViewContainerRef, Input, ViewChild, EventEmitter, Output, Directive, Optional, Self, HostBinding, Pipe, forwardRef } from '@angular/core';
-import * as i1$6 from '@angular/router';
+import { inject, Injectable, InjectionToken, NgZone, Component, HostListener, ViewContainerRef, Input, ViewChild, EventEmitter, Output, Directive, Optional, Self, HostBinding, Pipe, forwardRef } from '@angular/core';
+import * as i1$7 from '@angular/router';
 import { Router, ActivatedRoute, NavigationEnd, RouterLink, RouterOutlet } from '@angular/router';
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
-import * as i3 from '@ngx-translate/core';
+import * as i3$1 from '@ngx-translate/core';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
-import { firstValueFrom, fromEvent, startWith, map, BehaviorSubject, of, catchError, throwError, finalize, from, switchMap as switchMap$1, take, filter, Subject, takeUntil as takeUntil$1 } from 'rxjs';
+import { firstValueFrom, fromEvent, startWith, map, BehaviorSubject, of, catchError, throwError, finalize, from, switchMap as switchMap$1, take, filter, Subject, takeUntil as takeUntil$1, debounceTime, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs';
 import * as i1$1 from 'ng-zorro-antd/modal';
-import { NzModalService, NzModalComponent, NzModalContentDirective, NzModalTitleDirective, NzModalFooterDirective } from 'ng-zorro-antd/modal';
+import { NzModalService, NzModalComponent, NzModalContentDirective, NzModalTitleDirective, NzModalFooterDirective, NzModalModule } 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 * as i2$1 from '@angular/forms';
+import * as i2 from '@angular/forms';
 import { FormGroup, FormsModule, ReactiveFormsModule, Validators, NG_VALUE_ACCESSOR, FormBuilder } from '@angular/forms';
 import * as i1$4 from '@angular/common';
 import { Location, CommonModule, NgTemplateOutlet, DecimalPipe } from '@angular/common';
@@ -24,7 +24,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
 import { Chart, registerables } from 'chart.js';
 import * as i4 from 'ng-zorro-antd/grid';
 import { NzGridModule } from 'ng-zorro-antd/grid';
-import * as i2 from 'ng-zorro-antd/checkbox';
+import * as i3 from 'ng-zorro-antd/checkbox';
 import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
 import * as i5 from 'ng-zorro-antd/form';
 import { NzFormModule } from 'ng-zorro-antd/form';
@@ -37,50 +37,54 @@ import * as i6$1 from 'ng-zorro-antd/input';
 import { NzInputModule } from 'ng-zorro-antd/input';
 import * as i6$2 from 'ng-zorro-antd/select';
 import { NzSelectModule } from 'ng-zorro-antd/select';
-import * as i2$2 from 'ng-zorro-antd/table';
+import * as i1$5 from 'ng-zorro-antd/table';
 import { NzTableModule } from 'ng-zorro-antd/table';
-import * as i8 from 'ng-zorro-antd/button';
+import * as i5$3 from 'ng-zorro-antd/button';
 import { NzButtonModule } from 'ng-zorro-antd/button';
-import * as i4$1 from 'ng-zorro-antd/core/transition-patch';
-import * as i1$5 from 'ng-zorro-antd/pagination';
+import * as i6$3 from 'ng-zorro-antd/core/transition-patch';
+import * as i1$6 from 'ng-zorro-antd/pagination';
 import { NzPaginationModule } from 'ng-zorro-antd/pagination';
-import * as i1$7 from 'ngx-extended-pdf-viewer';
+import * as i1$8 from 'ngx-extended-pdf-viewer';
 import { NgxExtendedPdfViewerModule } from 'ngx-extended-pdf-viewer';
 import { trigger, transition, style, animate } from '@angular/animations';
-import * as i2$3 from 'ng-zorro-antd/spin';
+import * as i2$1 from 'ng-zorro-antd/spin';
 import { NzSpinModule } from 'ng-zorro-antd/spin';
-import * as i3$1 from 'ng-zorro-antd/card';
+import * as i3$2 from 'ng-zorro-antd/card';
 import { NzCardModule } from 'ng-zorro-antd/card';
-import * as i4$2 from 'ng-zorro-antd/drawer';
+import * as i4$1 from 'ng-zorro-antd/drawer';
 import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 import * as i5$2 from 'ng-zorro-antd/tag';
 import { NzTagModule } from 'ng-zorro-antd/tag';
-import * as i6$3 from 'ng-zorro-antd/radio';
+import * as i6$4 from 'ng-zorro-antd/radio';
 import { NzRadioModule } from 'ng-zorro-antd/radio';
 import * as i11 from 'ng-zorro-antd/tooltip';
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
-import * as i14 from 'ng-zorro-antd/flex';
-import { NzFlexModule } from 'ng-zorro-antd/flex';
-import * as i16 from 'ng-zorro-antd/divider';
+import * as i9 from 'ng-zorro-antd/flex';
+import { NzFlexModule, NzFlexDirective } from 'ng-zorro-antd/flex';
+import * as i8 from 'ng-zorro-antd/divider';
 import { NzDividerModule } from 'ng-zorro-antd/divider';
 import * as i17 from 'ng-zorro-antd/auto-complete';
 import { NzAutocompleteModule } from 'ng-zorro-antd/auto-complete';
-import * as i10 from 'ng-zorro-antd/core/wave';
+import * as i7 from 'ng-zorro-antd/core/wave';
+import * as i1$9 from 'ng-zorro-antd/tabs';
+import { NzTabsModule } from 'ng-zorro-antd/tabs';
+import * as i18 from 'ng-zorro-antd/popconfirm';
+import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
 import * as XLSX from 'xlsx';
-import * as i2$4 from 'ng-zorro-antd/layout';
+import * as i2$2 from 'ng-zorro-antd/layout';
 import { NzLayoutModule } from 'ng-zorro-antd/layout';
 import { Title } from '@angular/platform-browser';
-import * as i5$3 from 'ng-zorro-antd/dropdown';
+import * as i5$4 from 'ng-zorro-antd/dropdown';
 import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
-import * as i10$1 from 'ng-zorro-antd/tree';
+import * as i10 from 'ng-zorro-antd/tree';
 import { NzTreeModule } from 'ng-zorro-antd/tree';
 import { NzBackTopModule } from 'ng-zorro-antd/back-top';
-import * as i14$1 from 'ng-zorro-antd/segmented';
+import * as i14 from 'ng-zorro-antd/segmented';
 import { NzSegmentedModule } from 'ng-zorro-antd/segmented';
 import * as i8$1 from 'ng-zorro-antd/badge';
 import { NzBadgeModule } from 'ng-zorro-antd/badge';
-import * as i4$3 from 'ng-zorro-antd/menu';
+import * as i4$2 from 'ng-zorro-antd/menu';
 import * as signalR from '@microsoft/signalr';
 import { NzSwitchModule } from 'ng-zorro-antd/switch';
 
@@ -261,6 +265,9 @@ class DeviceService {
         return fromEvent(window, 'resize').pipe(startWith(null), // emit lần đầu
         map(() => window.innerWidth <= 768));
     }
+    innerWidth$() {
+        return fromEvent(window, 'resize').pipe(startWith(null), map(() => window.innerWidth));
+    }
     get isMobile() {
         return window.innerWidth <= 500;
     }
@@ -274,7 +281,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
 
 class CustomNotiService {
     notification;
-    static defaultDuration = 2000;
+    static defaultDuration = 3000;
     static defaultPlacement = 'topRight';
     globalTemplate;
     constructor(notification) {
@@ -474,7 +481,7 @@ class NotiService {
             }
         }
         this.notification.error('Lỗi phát sinh', errorMsg, {
-            showDetail: true,
+            showDetail: !!_data?.Data,
             onDetail: () => {
                 this.modal.error({
                     nzTitle: 'Chi tiết lỗi',
@@ -602,7 +609,7 @@ class TokenStorage {
     }
 }
 
-const URLs$4 = {
+const URLs$7 = {
     login: '/api/Auth/Login',
     register: '/api/Auth/Register',
     pingAuth: '/api/Auth/PingAuth',
@@ -612,7 +619,7 @@ const URLs$4 = {
 };
 class AuthService extends HTTPService {
     notiService = inject(NotiService);
-    commonService = inject(CommonService);
+    cms = inject(CommonService);
     router = inject(Router);
     translate = inject(TranslateService);
     /* ----------------------------------------
@@ -671,7 +678,7 @@ class AuthService extends HTTPService {
         }
     }
     async sendSignIn(body) {
-        return firstValueFrom(this.httpClient.post(AppGlobals.apiEndpoint + URLs$4.login, body, {
+        return firstValueFrom(this.httpClient.post(AppGlobals.apiEndpoint + URLs$7.login, body, {
             headers: new HttpHeaders().set('Content-Type', 'application/json'),
         }));
     }
@@ -691,7 +698,7 @@ class AuthService extends HTTPService {
     ---------------------------------------- */
     async pingAuth() {
         try {
-            const res = await this.get(AppGlobals.apiEndpoint + URLs$4.pingAuth, true);
+            const res = await this.get(AppGlobals.apiEndpoint + URLs$7.pingAuth, true);
             return res?.IsSuccess;
         }
         catch {
@@ -706,17 +713,17 @@ class AuthService extends HTTPService {
             SPN: `App_User_getUserMenu`,
             Params: [headerMenuId],
         };
-        return this.commonService.ESP(data);
+        return this.cms.ESP(data);
     }
     getUserHeaderMenu() {
         let data = {
             SPN: `App_User_getUserHeaderMenu`,
         };
-        return this.commonService.ESP(data);
+        return this.cms.ESP(data);
     }
     async checkUserMenu(url) {
         try {
-            const ret = await this.commonService.ESP({
+            const ret = await this.cms.ESP({
                 SPN: `App_User_checkUserMenu`,
                 Params: [url],
             });
@@ -731,10 +738,10 @@ class AuthService extends HTTPService {
         PASSWORD
     ---------------------------------------- */
     changePassword(data) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$4.changePassword, data);
+        return this.postData(AppGlobals.apiEndpoint + URLs$7.changePassword, data);
     }
     setPass(data) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$4.setPass, data);
+        return this.postData(AppGlobals.apiEndpoint + URLs$7.setPass, data);
     }
     /* ----------------------------------------
         REGISTER
@@ -755,7 +762,7 @@ class AuthService extends HTTPService {
         }
     }
     async sendSignUp(d) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$4.register, d);
+        return this.postData(AppGlobals.apiEndpoint + URLs$7.register, d);
     }
     /* ----------------------------------------
         CHANGE ORG
@@ -777,7 +784,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$4.changeOrgLogin, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$7.changeOrgLogin, params);
     }
     static pingInterVal;
     startPingAuth(intervalTime) {
@@ -802,12 +809,126 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 }]
         }] });
 
+// import { C_Project } from 'app/QLDAXD/model/C_Project.model';
+const ABAC_RULES_TOKEN = new InjectionToken('ABAC_RULES_TOKEN');
+/**
+ * 1. HÀM KIỂM TRA THEO QUYỀN VÀ THUỘC TÍNH (DÙNG CHO PHẦN LỚN NGHIỆP VỤ)
+ */
+function checkPermission(user, rules, resource, action, data) {
+    if (!user)
+        return false;
+    const SYSTEM_ROLES = ['Admin', 'SuperAdmin'];
+    if (user.roles && user.roles.some((role) => SYSTEM_ROLES.includes(role)))
+        return true;
+    if (!user.permissions || user.permissions.length === 0)
+        return false;
+    const prefix = `${String(resource)}:${action}`;
+    const matchedPermissions = user.permissions.filter((p) => p.startsWith(prefix));
+    if (matchedPermissions.length === 0)
+        return false;
+    return matchedPermissions.some((permCode) => {
+        const ruleFn = rules[permCode];
+        // NẾU DEVELOPER QUÊN KHAI BÁO LUẬT TRONG APP_PERMISSION_RULES
+        if (!ruleFn) {
+            // Xử lý an toàn: Các mã quyền chứa '_own' bắt buộc phải có luật kiểm tra dữ liệu.
+            // Nếu không có luật -> CHẶN NGAY LẬP TỨC (Fail-Closed).
+            if (permCode.includes('_own')) {
+                console.error(`[Security Warning]: Thiếu khai báo rule cho quyền "${permCode}" trong APP_PERMISSION_RULES. Hệ thống tự động từ chối truy cập để đảm bảo an toàn.`);
+                return false;
+            }
+            // Với các quyền toàn cục như '_all', 'create', 'export' -> Bỏ qua, cho phép hiển thị
+            return true;
+        }
+        // NẾU ĐÃ CÓ KHAI BÁO LUẬT
+        if (data !== undefined) {
+            return ruleFn(user, data); // Chạy luật check theo dữ liệu (VD: user.id === org.CreatedUser)
+        }
+        // Trường hợp kiểm tra quyền chung nhưng lại có luật (Hiếm gặp)
+        return true;
+    });
+}
+/**
+ * 2. HÀM TIỆN ÍCH CHỈ CHECK THEO ROLE (DÙNG ĐỂ RENDER UI ĐẶC THÙ)
+ * Sử dụng khi bạn cần: *ngIf="hasRole('KiemToan')"
+ */
+function checkRole(user, expectedRole) {
+    if (!user || !user.roles)
+        return false;
+    return user.roles.includes(expectedRole);
+}
+
+let PermissionService$1 = class PermissionService {
+    cms = inject(CommonService);
+    currentUser$ = new BehaviorSubject(null);
+    // Hứng luật từ App. Nếu App không truyền thì lấy object rỗng {}
+    appRules = inject(ABAC_RULES_TOKEN, { optional: true }) || {};
+    setCurrentUser(user) {
+        this.currentUser$.next(user);
+    }
+    async getUserPermission() {
+        // 1. Caching: Đã có data rồi thì thôi không gọi nữa
+        if (this.currentUser$.value)
+            return true;
+        try {
+            let data = {
+                SPN: 'Permission_getUserPermission',
+            };
+            let ret = await this.cms.ESP(data);
+            if (ret && ret.IsSuccess && ret.Data) {
+                // 2. Xử lý an toàn các mảng chuỗi (Split, Trim, Filter)
+                const parseStringToArray = (str) => {
+                    if (!str)
+                        return [];
+                    return str
+                        .split(',')
+                        .map((item) => item.trim()) // Xóa khoảng trắng thừa
+                        .filter((item) => item.length > 0); // Bỏ các phần tử rỗng
+                };
+                let user = {
+                    id: ret.Data.userid || '',
+                    username: ret.Data.username || '',
+                    roles: parseStringToArray(ret.Data.roles),
+                    permissions: parseStringToArray(ret.Data.permissions),
+                };
+                this.setCurrentUser(user);
+                return true;
+            }
+            else {
+                console.warn('Không lấy được thông tin quyền của User');
+                return false;
+            }
+        }
+        catch (error) {
+            console.error('Lỗi API khi lấy quyền User:', error);
+            return false; // Trả về false để Guard biết luồng bị lỗi
+        }
+    }
+    hasAccess(resource, action, data) {
+        const currentUser = this.currentUser$.value;
+        if (!currentUser)
+            return false;
+        // Truyền appRules vào cho hàm check
+        return checkPermission(currentUser, this.appRules, resource, action, data);
+    }
+    hasRole(expectedRole) {
+        return checkRole(this.currentUser$.value, expectedRole);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: PermissionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: PermissionService, providedIn: 'root' });
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: PermissionService$1, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 class AuthGuard {
     router = inject(Router);
     authService = inject(AuthService);
+    permissionService = inject(PermissionService$1);
     async canActivate(route, state) {
         // return true;
         if (await this.authService.pingAuth()) {
+            this.permissionService.getUserPermission();
             return true;
         }
         TokenStorage.clearToken();
@@ -1560,11 +1681,11 @@ class Breadcrumb extends BaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: Breadcrumb, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: Breadcrumb, isStandalone: true, selector: "app-breadcrumb", usesInheritance: true, ngImport: i0, template: "<nz-breadcrumb>\n  <nz-breadcrumb-item (click)=\"gohome()\">\n    <nz-icon nzType=\"home\" nzTheme=\"outline\" />\n  </nz-breadcrumb-item>\n  @for (item of Breadcrumb.lstBreadcrumb; track $index) {\n    <nz-breadcrumb-item (click)=\"onclick(item)\">{{ item.Name }}</nz-breadcrumb-item>\n  }\n</nz-breadcrumb>\n", dependencies: [{ kind: "ngmodule", type: NzBreadCrumbModule }, { kind: "component", type: i1$2.NzBreadCrumbComponent, selector: "nz-breadcrumb", inputs: ["nzAutoGenerate", "nzSeparator", "nzRouteLabel", "nzRouteLabelFn", "nzRouteFn"], exportAs: ["nzBreadcrumb"] }, { kind: "component", type: i1$2.NzBreadCrumbItemComponent, selector: "nz-breadcrumb-item", inputs: ["nzOverlay"], exportAs: ["nzBreadcrumbItem"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: Breadcrumb, isStandalone: true, selector: "app-breadcrumb", usesInheritance: true, ngImport: i0, template: "<nz-breadcrumb>\r\n  <nz-breadcrumb-item (click)=\"gohome()\">\r\n    <nz-icon nzType=\"home\" nzTheme=\"outline\" />\r\n  </nz-breadcrumb-item>\r\n  @for (item of Breadcrumb.lstBreadcrumb; track $index) {\r\n    <nz-breadcrumb-item (click)=\"onclick(item)\">{{ item.Name }}</nz-breadcrumb-item>\r\n  }\r\n</nz-breadcrumb>\r\n", dependencies: [{ kind: "ngmodule", type: NzBreadCrumbModule }, { kind: "component", type: i1$2.NzBreadCrumbComponent, selector: "nz-breadcrumb", inputs: ["nzAutoGenerate", "nzSeparator", "nzRouteLabel", "nzRouteLabelFn", "nzRouteFn"], exportAs: ["nzBreadcrumb"] }, { kind: "component", type: i1$2.NzBreadCrumbItemComponent, selector: "nz-breadcrumb-item", inputs: ["nzOverlay"], exportAs: ["nzBreadcrumbItem"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: Breadcrumb, decorators: [{
             type: Component,
-            args: [{ selector: 'app-breadcrumb', imports: [NzBreadCrumbModule, NzIconModule], template: "<nz-breadcrumb>\n  <nz-breadcrumb-item (click)=\"gohome()\">\n    <nz-icon nzType=\"home\" nzTheme=\"outline\" />\n  </nz-breadcrumb-item>\n  @for (item of Breadcrumb.lstBreadcrumb; track $index) {\n    <nz-breadcrumb-item (click)=\"onclick(item)\">{{ item.Name }}</nz-breadcrumb-item>\n  }\n</nz-breadcrumb>\n" }]
+            args: [{ selector: 'app-breadcrumb', imports: [NzBreadCrumbModule, NzIconModule], template: "<nz-breadcrumb>\r\n  <nz-breadcrumb-item (click)=\"gohome()\">\r\n    <nz-icon nzType=\"home\" nzTheme=\"outline\" />\r\n  </nz-breadcrumb-item>\r\n  @for (item of Breadcrumb.lstBreadcrumb; track $index) {\r\n    <nz-breadcrumb-item (click)=\"onclick(item)\">{{ item.Name }}</nz-breadcrumb-item>\r\n  }\r\n</nz-breadcrumb>\r\n" }]
         }] });
 
 class AnimatedDigitComponent {
@@ -1614,11 +1735,11 @@ class AnimatedDigitComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AnimatedDigitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: AnimatedDigitComponent, isStandalone: true, selector: "animated-digit", inputs: { duration: "duration", digit: "digit", steps: "steps" }, viewQueries: [{ propertyName: "animatedDigit", first: true, predicate: ["animatedDigit"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<span #animatedDigit class=\"animated-digit\">\n  <span>{{digit}}</span>\n</span>", styles: [".animated-digit{display:inline-flex;padding:0}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: AnimatedDigitComponent, isStandalone: true, selector: "animated-digit", inputs: { duration: "duration", digit: "digit", steps: "steps" }, viewQueries: [{ propertyName: "animatedDigit", first: true, predicate: ["animatedDigit"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<span #animatedDigit class=\"animated-digit\">\r\n  <span>{{digit}}</span>\r\n</span>", styles: [".animated-digit{display:inline-flex;padding:0}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AnimatedDigitComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'animated-digit', template: "<span #animatedDigit class=\"animated-digit\">\n  <span>{{digit}}</span>\n</span>", styles: [".animated-digit{display:inline-flex;padding:0}\n"] }]
+            args: [{ selector: 'animated-digit', template: "<span #animatedDigit class=\"animated-digit\">\r\n  <span>{{digit}}</span>\r\n</span>", styles: [".animated-digit{display:inline-flex;padding:0}\n"] }]
         }], propDecorators: { duration: [{
                 type: Input
             }], digit: [{
@@ -1698,11 +1819,11 @@ class BarGraphComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: BarGraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: BarGraphComponent, isStandalone: true, selector: "cdk-bar-graph", inputs: { height: "height", id: "id" }, ngImport: i0, template: "<div class=\"dash-bar-graph-holder mat-elevation-z4\" [ngStyle]=\"{ height: height + 'px' }\">\n  <canvas [id]=\"id\"></canvas>\n</div>\n", styles: [".dash-bar-graph-holder{margin:10px 5px;background-color:#fff}.nav-item{transition:all .6s cubic-bezier(.165,.84,.44,1);cursor:default}.nav-item:hover{transform:translateY(-8px);box-shadow:0 20px 20px #00000029}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: BarGraphComponent, isStandalone: true, selector: "cdk-bar-graph", inputs: { height: "height", id: "id" }, ngImport: i0, template: "<div class=\"dash-bar-graph-holder mat-elevation-z4\" [ngStyle]=\"{ height: height + 'px' }\">\r\n  <canvas [id]=\"id\"></canvas>\r\n</div>\r\n", styles: [".dash-bar-graph-holder{margin:10px 5px;background-color:#fff}.nav-item{transition:all .6s cubic-bezier(.165,.84,.44,1);cursor:default}.nav-item:hover{transform:translateY(-8px);box-shadow:0 20px 20px #00000029}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: BarGraphComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cdk-bar-graph', imports: [CommonModule], template: "<div class=\"dash-bar-graph-holder mat-elevation-z4\" [ngStyle]=\"{ height: height + 'px' }\">\n  <canvas [id]=\"id\"></canvas>\n</div>\n", styles: [".dash-bar-graph-holder{margin:10px 5px;background-color:#fff}.nav-item{transition:all .6s cubic-bezier(.165,.84,.44,1);cursor:default}.nav-item:hover{transform:translateY(-8px);box-shadow:0 20px 20px #00000029}\n"] }]
+            args: [{ selector: 'cdk-bar-graph', imports: [CommonModule], template: "<div class=\"dash-bar-graph-holder mat-elevation-z4\" [ngStyle]=\"{ height: height + 'px' }\">\r\n  <canvas [id]=\"id\"></canvas>\r\n</div>\r\n", styles: [".dash-bar-graph-holder{margin:10px 5px;background-color:#fff}.nav-item{transition:all .6s cubic-bezier(.165,.84,.44,1);cursor:default}.nav-item:hover{transform:translateY(-8px);box-shadow:0 20px 20px #00000029}\n"] }]
         }], ctorParameters: () => [], propDecorators: { height: [{
                 type: Input
             }], id: [{
@@ -1714,11 +1835,11 @@ class DashcardComponent {
     constructor() { }
     ngOnInit() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DashcardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: DashcardComponent, isStandalone: true, selector: "cdk-dashcard", inputs: { dashData: "dashData" }, ngImport: i0, template: "<div nz-row class=\"dashcard mat-elevation-z2\" style=\"height: 100%\">\n  <div nz-col [nzSpan]=\"8\" class=\"text-center\" [style.background]=\"dashData?.colorLight\">\n    <nz-icon class=\"mat-icon\" style=\"padding-top: 50px\" [nzType]=\"dashData?.icon\" nzTheme=\"outline\" />\n  </div>\n  <div nz-col [nzSpan]=\"16\" [style.background]=\"dashData?.colorDark\">\n    <div class=\"text-center animated-digit\">\n      <animated-digit [digit]=\"dashData?.number\"></animated-digit>\n    </div>\n    <p\n      class=\"text-center mat-body-1 border-top text-bold\"\n      style=\"font-size: 16px; margin-bottom: 8px; padding-top: 3px\"\n    >\n      {{ dashData?.title }}\n    </p>\n  </div>\n</div>\n", styles: [".dashcard .dashcard{margin:10px 5px;height:100px;background-color:#fff}.dashcard .mat-icon{font-size:40px;height:40px;width:40px;color:#fff}.dashcard .border-top{border-top:1px solid white}.dashcard .mat-headline,.dashcard .mat-body-1{margin:0;color:#fff}.dashcard .animated-digit{color:#fff;font-size:40px;font-weight:700}.nav-item{transition:all .6s cubic-bezier(.165,.84,.44,1);cursor:default}.nav-item:hover{transform:translateY(-8px);box-shadow:0 20px 20px #00000029}\n"], dependencies: [{ kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: AnimatedDigitComponent, selector: "animated-digit", inputs: ["duration", "digit", "steps"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: DashcardComponent, isStandalone: true, selector: "cdk-dashcard", inputs: { dashData: "dashData" }, ngImport: i0, template: "<div nz-row class=\"dashcard mat-elevation-z2\" style=\"height: 100%\">\r\n  <div nz-col [nzSpan]=\"8\" class=\"text-center\" [style.background]=\"dashData?.colorLight\">\r\n    <nz-icon class=\"mat-icon\" style=\"padding-top: 50px\" [nzType]=\"dashData?.icon\" nzTheme=\"outline\" />\r\n  </div>\r\n  <div nz-col [nzSpan]=\"16\" [style.background]=\"dashData?.colorDark\">\r\n    <div class=\"text-center animated-digit\">\r\n      <animated-digit [digit]=\"dashData?.number\"></animated-digit>\r\n    </div>\r\n    <p\r\n      class=\"text-center mat-body-1 border-top text-bold\"\r\n      style=\"font-size: 16px; margin-bottom: 8px; padding-top: 3px\"\r\n    >\r\n      {{ dashData?.title }}\r\n    </p>\r\n  </div>\r\n</div>\r\n", styles: [".dashcard .dashcard{margin:10px 5px;height:100px;background-color:#fff}.dashcard .mat-icon{font-size:40px;height:40px;width:40px;color:#fff}.dashcard .border-top{border-top:1px solid white}.dashcard .mat-headline,.dashcard .mat-body-1{margin:0;color:#fff}.dashcard .animated-digit{color:#fff;font-size:40px;font-weight:700}.nav-item{transition:all .6s cubic-bezier(.165,.84,.44,1);cursor:default}.nav-item:hover{transform:translateY(-8px);box-shadow:0 20px 20px #00000029}\n"], dependencies: [{ kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: AnimatedDigitComponent, selector: "animated-digit", inputs: ["duration", "digit", "steps"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DashcardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cdk-dashcard', imports: [NzGridModule, NzIconModule, AnimatedDigitComponent], template: "<div nz-row class=\"dashcard mat-elevation-z2\" style=\"height: 100%\">\n  <div nz-col [nzSpan]=\"8\" class=\"text-center\" [style.background]=\"dashData?.colorLight\">\n    <nz-icon class=\"mat-icon\" style=\"padding-top: 50px\" [nzType]=\"dashData?.icon\" nzTheme=\"outline\" />\n  </div>\n  <div nz-col [nzSpan]=\"16\" [style.background]=\"dashData?.colorDark\">\n    <div class=\"text-center animated-digit\">\n      <animated-digit [digit]=\"dashData?.number\"></animated-digit>\n    </div>\n    <p\n      class=\"text-center mat-body-1 border-top text-bold\"\n      style=\"font-size: 16px; margin-bottom: 8px; padding-top: 3px\"\n    >\n      {{ dashData?.title }}\n    </p>\n  </div>\n</div>\n", styles: [".dashcard .dashcard{margin:10px 5px;height:100px;background-color:#fff}.dashcard .mat-icon{font-size:40px;height:40px;width:40px;color:#fff}.dashcard .border-top{border-top:1px solid white}.dashcard .mat-headline,.dashcard .mat-body-1{margin:0;color:#fff}.dashcard .animated-digit{color:#fff;font-size:40px;font-weight:700}.nav-item{transition:all .6s cubic-bezier(.165,.84,.44,1);cursor:default}.nav-item:hover{transform:translateY(-8px);box-shadow:0 20px 20px #00000029}\n"] }]
+            args: [{ selector: 'cdk-dashcard', imports: [NzGridModule, NzIconModule, AnimatedDigitComponent], template: "<div nz-row class=\"dashcard mat-elevation-z2\" style=\"height: 100%\">\r\n  <div nz-col [nzSpan]=\"8\" class=\"text-center\" [style.background]=\"dashData?.colorLight\">\r\n    <nz-icon class=\"mat-icon\" style=\"padding-top: 50px\" [nzType]=\"dashData?.icon\" nzTheme=\"outline\" />\r\n  </div>\r\n  <div nz-col [nzSpan]=\"16\" [style.background]=\"dashData?.colorDark\">\r\n    <div class=\"text-center animated-digit\">\r\n      <animated-digit [digit]=\"dashData?.number\"></animated-digit>\r\n    </div>\r\n    <p\r\n      class=\"text-center mat-body-1 border-top text-bold\"\r\n      style=\"font-size: 16px; margin-bottom: 8px; padding-top: 3px\"\r\n    >\r\n      {{ dashData?.title }}\r\n    </p>\r\n  </div>\r\n</div>\r\n", styles: [".dashcard .dashcard{margin:10px 5px;height:100px;background-color:#fff}.dashcard .mat-icon{font-size:40px;height:40px;width:40px;color:#fff}.dashcard .border-top{border-top:1px solid white}.dashcard .mat-headline,.dashcard .mat-body-1{margin:0;color:#fff}.dashcard .animated-digit{color:#fff;font-size:40px;font-weight:700}.nav-item{transition:all .6s cubic-bezier(.165,.84,.44,1);cursor:default}.nav-item:hover{transform:translateY(-8px);box-shadow:0 20px 20px #00000029}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dashData: [{
                 type: Input
             }] } });
@@ -1784,11 +1905,11 @@ class DoughnutGraphComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DoughnutGraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: DoughnutGraphComponent, isStandalone: true, selector: "cdk-doughnut-graph", inputs: { height: "height", id: "id" }, ngImport: i0, template: "<div  class=\"doughnut-graph-graph-holder mat-elevation-z4  \" [ngStyle]=\"{'height': height + 'px'}\">\n    <canvas [id]=\"id\"></canvas>\n</div>", styles: [".doughnut-graph-graph-holder{margin:10px 5px;background-color:#fff}.nav-item{transition:all .6s cubic-bezier(.165,.84,.44,1);cursor:default}.nav-item:hover{transform:translateY(-8px);box-shadow:0 20px 20px #00000029}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: DoughnutGraphComponent, isStandalone: true, selector: "cdk-doughnut-graph", inputs: { height: "height", id: "id" }, ngImport: i0, template: "<div  class=\"doughnut-graph-graph-holder mat-elevation-z4  \" [ngStyle]=\"{'height': height + 'px'}\">\r\n    <canvas [id]=\"id\"></canvas>\r\n</div>", styles: [".doughnut-graph-graph-holder{margin:10px 5px;background-color:#fff}.nav-item{transition:all .6s cubic-bezier(.165,.84,.44,1);cursor:default}.nav-item:hover{transform:translateY(-8px);box-shadow:0 20px 20px #00000029}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DoughnutGraphComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cdk-doughnut-graph', imports: [CommonModule], template: "<div  class=\"doughnut-graph-graph-holder mat-elevation-z4  \" [ngStyle]=\"{'height': height + 'px'}\">\n    <canvas [id]=\"id\"></canvas>\n</div>", styles: [".doughnut-graph-graph-holder{margin:10px 5px;background-color:#fff}.nav-item{transition:all .6s cubic-bezier(.165,.84,.44,1);cursor:default}.nav-item:hover{transform:translateY(-8px);box-shadow:0 20px 20px #00000029}\n"] }]
+            args: [{ selector: 'cdk-doughnut-graph', imports: [CommonModule], template: "<div  class=\"doughnut-graph-graph-holder mat-elevation-z4  \" [ngStyle]=\"{'height': height + 'px'}\">\r\n    <canvas [id]=\"id\"></canvas>\r\n</div>", styles: [".doughnut-graph-graph-holder{margin:10px 5px;background-color:#fff}.nav-item{transition:all .6s cubic-bezier(.165,.84,.44,1);cursor:default}.nav-item:hover{transform:translateY(-8px);box-shadow:0 20px 20px #00000029}\n"] }]
         }], ctorParameters: () => [], propDecorators: { height: [{
                 type: Input
             }], id: [{
@@ -1846,11 +1967,11 @@ class LineGraphComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LineGraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: LineGraphComponent, isStandalone: true, selector: "cdk-line-graph", inputs: { height: "height", id: "id" }, ngImport: i0, template: "<div  class=\"line-graph-holder mat-elevation-z4 \" [ngStyle]=\"{'height': height + 'px'}\">\n    <canvas [id]=\"id\"></canvas>\n</div>", styles: [".line-graph-holder{margin:10px 5px;background-color:#fff}.nav-item{transition:all .6s cubic-bezier(.165,.84,.44,1);cursor:default}.nav-item:hover{transform:translateY(-8px);box-shadow:0 20px 20px #00000029}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: LineGraphComponent, isStandalone: true, selector: "cdk-line-graph", inputs: { height: "height", id: "id" }, ngImport: i0, template: "<div  class=\"line-graph-holder mat-elevation-z4 \" [ngStyle]=\"{'height': height + 'px'}\">\r\n    <canvas [id]=\"id\"></canvas>\r\n</div>", styles: [".line-graph-holder{margin:10px 5px;background-color:#fff}.nav-item{transition:all .6s cubic-bezier(.165,.84,.44,1);cursor:default}.nav-item:hover{transform:translateY(-8px);box-shadow:0 20px 20px #00000029}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LineGraphComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cdk-line-graph', imports: [CommonModule], template: "<div  class=\"line-graph-holder mat-elevation-z4 \" [ngStyle]=\"{'height': height + 'px'}\">\n    <canvas [id]=\"id\"></canvas>\n</div>", styles: [".line-graph-holder{margin:10px 5px;background-color:#fff}.nav-item{transition:all .6s cubic-bezier(.165,.84,.44,1);cursor:default}.nav-item:hover{transform:translateY(-8px);box-shadow:0 20px 20px #00000029}\n"] }]
+            args: [{ selector: 'cdk-line-graph', imports: [CommonModule], template: "<div  class=\"line-graph-holder mat-elevation-z4 \" [ngStyle]=\"{'height': height + 'px'}\">\r\n    <canvas [id]=\"id\"></canvas>\r\n</div>", styles: [".line-graph-holder{margin:10px 5px;background-color:#fff}.nav-item{transition:all .6s cubic-bezier(.165,.84,.44,1);cursor:default}.nav-item:hover{transform:translateY(-8px);box-shadow:0 20px 20px #00000029}\n"] }]
         }], ctorParameters: () => [], propDecorators: { height: [{
                 type: Input
             }], id: [{
@@ -1956,11 +2077,11 @@ class ExtendCheckbox {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendCheckbox, isStandalone: true, selector: "extend-checkbox", inputs: { label: "label", labelSpan: "labelSpan", labelFlex: "labelFlex", disabled: "disabled", formData: "formData", controlName: "controlName", valueType: "valueType", _ngModel: "_ngModel" }, outputs: { _ngModelChange: "_ngModelChange" }, ngImport: i0, template: "@if (label) {\n  <div nz-row>\n    <div nz-col [nzSpan]=\"!labelFlex ? labelSpan : null\" [nzFlex]=\"labelFlex\"></div>\n    <div nz-col nzFlex=\"auto\">\n      <label\n        style=\"position: relative; top: 5px\"\n        nz-checkbox\n        [nzDisabled]=\"disabled\"\n        [(nzChecked)]=\"checked\"\n        (nzCheckedChange)=\"onCheckChange($event)\"\n      >\n        {{ label }}\n      </label>\n    </div>\n  </div>\n} @else {\n  <label\n    nz-checkbox\n    [nzDisabled]=\"disabled\"\n    [(nzChecked)]=\"checked\"\n    (nzCheckedChange)=\"onCheckChange($event)\"\n    style=\"width: 16px\"\n  >\n    {{ label }}\n  </label>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzCheckboxModule }, { kind: "component", type: i2.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId", "nzName"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendCheckbox, isStandalone: true, selector: "extend-checkbox", inputs: { label: "label", labelSpan: "labelSpan", labelFlex: "labelFlex", disabled: "disabled", formData: "formData", controlName: "controlName", valueType: "valueType", _ngModel: "_ngModel" }, outputs: { _ngModelChange: "_ngModelChange" }, ngImport: i0, template: "@if (label) {\r\n  <div nz-row>\r\n    <div nz-col [nzSpan]=\"!labelFlex ? labelSpan : null\" [nzFlex]=\"labelFlex\"></div>\r\n    <div nz-col nzFlex=\"auto\">\r\n      <label\r\n        style=\"position: relative; top: 5px\"\r\n        nz-checkbox\r\n        [nzDisabled]=\"disabled\"\r\n        [(nzChecked)]=\"checked\"\r\n        (nzCheckedChange)=\"onCheckChange($event)\"\r\n      >\r\n        {{ label }}\r\n      </label>\r\n    </div>\r\n  </div>\r\n} @else {\r\n  <label\r\n    nz-checkbox\r\n    [nzDisabled]=\"disabled\"\r\n    [(nzChecked)]=\"checked\"\r\n    (nzCheckedChange)=\"onCheckChange($event)\"\r\n    style=\"width: 16px\"\r\n  >\r\n    {{ label }}\r\n  </label>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzCheckboxModule }, { kind: "component", type: i3.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId", "nzName"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendCheckbox, decorators: [{
             type: Component,
-            args: [{ selector: 'extend-checkbox', imports: [CommonModule, FormsModule, ReactiveFormsModule, NzFormModule, NzCheckboxModule], template: "@if (label) {\n  <div nz-row>\n    <div nz-col [nzSpan]=\"!labelFlex ? labelSpan : null\" [nzFlex]=\"labelFlex\"></div>\n    <div nz-col nzFlex=\"auto\">\n      <label\n        style=\"position: relative; top: 5px\"\n        nz-checkbox\n        [nzDisabled]=\"disabled\"\n        [(nzChecked)]=\"checked\"\n        (nzCheckedChange)=\"onCheckChange($event)\"\n      >\n        {{ label }}\n      </label>\n    </div>\n  </div>\n} @else {\n  <label\n    nz-checkbox\n    [nzDisabled]=\"disabled\"\n    [(nzChecked)]=\"checked\"\n    (nzCheckedChange)=\"onCheckChange($event)\"\n    style=\"width: 16px\"\n  >\n    {{ label }}\n  </label>\n}\n" }]
+            args: [{ selector: 'extend-checkbox', imports: [CommonModule, FormsModule, ReactiveFormsModule, NzFormModule, NzCheckboxModule], template: "@if (label) {\r\n  <div nz-row>\r\n    <div nz-col [nzSpan]=\"!labelFlex ? labelSpan : null\" [nzFlex]=\"labelFlex\"></div>\r\n    <div nz-col nzFlex=\"auto\">\r\n      <label\r\n        style=\"position: relative; top: 5px\"\r\n        nz-checkbox\r\n        [nzDisabled]=\"disabled\"\r\n        [(nzChecked)]=\"checked\"\r\n        (nzCheckedChange)=\"onCheckChange($event)\"\r\n      >\r\n        {{ label }}\r\n      </label>\r\n    </div>\r\n  </div>\r\n} @else {\r\n  <label\r\n    nz-checkbox\r\n    [nzDisabled]=\"disabled\"\r\n    [(nzChecked)]=\"checked\"\r\n    (nzCheckedChange)=\"onCheckChange($event)\"\r\n    style=\"width: 16px\"\r\n  >\r\n    {{ label }}\r\n  </label>\r\n}\r\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], labelSpan: [{
@@ -2261,7 +2382,7 @@ class DateInputParserDirective {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DateInputParserDirective, deps: [{ token: i0.ElementRef }, { token: i2$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DateInputParserDirective, deps: [{ token: i0.ElementRef }, { token: i2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.7", type: DateInputParserDirective, isStandalone: true, selector: "nz-date-picker", inputs: { format: ["nzFormat", "format"] }, host: { listeners: { "keyup.enter": "onEnter()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DateInputParserDirective, decorators: [{
@@ -2269,7 +2390,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
             args: [{
                     selector: 'nz-date-picker',
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2$1.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
@@ -2434,7 +2555,7 @@ class ExtendDatePicker {
         return '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendDatePicker, isStandalone: true, selector: "extend-date-picker", inputs: { dateFormat: "dateFormat", label: "label", placeHolder: "placeHolder", labelAlign: "labelAlign", floatingLabel: "floatingLabel", showTime: "showTime", labelSpan: "labelSpan", labelFlex: "labelFlex", inputFlex: "inputFlex", disabled: "disabled", required: "required", isSubmited: "isSubmited", noBottom: "noBottom", selectModeType: "selectModeType", inputWidth: "inputWidth", inputHeight: "inputHeight", borderBottomOnly: "borderBottomOnly", displayInline: "displayInline", size: "size", minDate: "minDate", maxDate: "maxDate", lstItem: "lstItem", displayField: "displayField", valueField: "valueField", formData: "formData", controlName: "controlName", _ngModel: "_ngModel", isTouched: "isTouched", inputErrorMessage: "inputErrorMessage", errorMessages: "errorMessages" }, outputs: { _ngModelChange: "_ngModelChange" }, ngImport: i0, template: "<div\n  class=\"extend-date-picker-wrapper\"\n  [ngClass]=\"[floatingLabel && label ? 'floating-label' : '']\"\n  [ngStyle]=\"{ display: displayInline ? 'inline' : null }\"\n>\n  @if (controlName) {\n    <div [formGroup]=\"formData\">\n      <nz-form-item>\n        @if (label) {\n          <nz-form-label\n            [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\n            [nzFlex]=\"labelFlex\"\n            [nzLabelAlign]=\"labelAlign\"\n            [nzRequired]=\"required\"\n            [nzFor]=\"controlName\"\n            nzNoColon\n            nzLabelWrap\n          >\n            {{ label }}\n          </nz-form-label>\n        }\n        <nz-form-control\n          [nzSpan]=\"label ? (floatingLabel || labelFlex ? null : 24 - labelSpan) : null\"\n          [nzFlex]=\"inputFlex\"\n          [ngClass]=\"{ 'full-width': floatingLabel || !label }\"\n          [nzErrorTip]=\"customValidateStatus\"\n          [nzValidateStatus]=\"customValidateStatus ? 'error' : ''\"\n        >\n          <nz-date-picker\n            class=\"full-width\"\n            [nzPlaceHolder]=\"placeHolder || ' '\"\n            [nzFormat]=\"dateFormat\"\n            [nzSize]=\"size\"\n            [formControlName]=\"controlName\"\n            [nzDisabledDate]=\"disabledDate\"\n            [nzShowTime]=\"showTime\"\n            [ngStyle]=\"{\n              width: inputWidth,\n              height: inputHeight,\n            }\"\n            [ngClass]=\"{\n              'border-bottom-only': borderBottomOnly,\n            }\"\n          ></nz-date-picker>\n        </nz-form-control>\n      </nz-form-item>\n    </div>\n  } @else {\n    <nz-form-item>\n      @if (label) {\n        <nz-form-label\n          [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\n          [nzFlex]=\"labelFlex\"\n          [nzLabelAlign]=\"labelAlign\"\n          [nzRequired]=\"required\"\n          nzNoColon\n          nzLabelWrap\n        >\n          {{ label }}\n        </nz-form-label>\n      }\n      <nz-form-control\n        [nzSpan]=\"label ? (floatingLabel || labelFlex ? null : 24 - labelSpan) : null\"\n        [nzFlex]=\"inputFlex\"\n        [ngClass]=\"{ 'full-width': floatingLabel || !label }\"\n        [nzErrorTip]=\"customValidateStatus\"\n        [nzValidateStatus]=\"customValidateStatus ? 'error' : ''\"\n      >\n        <nz-date-picker\n          class=\"full-width\"\n          [nzPlaceHolder]=\"placeHolder || ' '\"\n          [nzFormat]=\"dateFormat\"\n          [nzSize]=\"size\"\n          [disabled]=\"disabled\"\n          [nzDisabledDate]=\"disabledDate\"\n          [nzShowTime]=\"showTime\"\n          [ngStyle]=\"{\n            width: inputWidth,\n            height: inputHeight,\n          }\"\n          [ngClass]=\"{\n            'border-bottom-only': borderBottomOnly,\n          }\"\n          [(ngModel)]=\"_ngModel\"\n          (ngModelChange)=\"onNgModelChange($event)\"\n          (blur)=\"onBlur()\"\n        ></nz-date-picker>\n      </nz-form-control>\n    </nz-form-item>\n  }\n</div>\n\n<ng-template #dynamicErrorTemplate let-control>\n  <ng-container *ngFor=\"let error of errorMessages | keyvalue\">\n    <ng-container *ngIf=\"control.hasError(error.key)\">\n      {{ error.value }}\n    </ng-container>\n  </ng-container>\n</ng-template>\n", styles: ["::ng-deep .extend-date-picker-wrapper.floating-label{position:relative;padding-top:14px}::ng-deep .extend-date-picker-wrapper nz-form-item nz-form-label{position:absolute;top:12px;left:10px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:1;height:auto;line-height:normal;padding:0 4px}::ng-deep .extend-date-picker-wrapper nz-form-item nz-form-label label{font-size:12px;color:#969696;font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .extend-date-picker-wrapper .full-width{width:100%}.extend-date-picker-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.extend-date-picker-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label,.extend-date-picker-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.extend-date-picker-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.extend-date-picker-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.extend-date-picker-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$4.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "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: NzDatePickerModule }, { kind: "component", type: i5$1.NzDatePickerComponent, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-quarter-picker,nz-year-picker,nz-range-picker", inputs: ["nzAllowClear", "nzAutoFocus", "nzDisabled", "nzBorderless", "nzInputReadOnly", "nzInline", "nzOpen", "nzDisabledDate", "nzLocale", "nzPlaceHolder", "nzPopupStyle", "nzDropdownClassName", "nzSize", "nzStatus", "nzFormat", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzShowToday", "nzMode", "nzShowNow", "nzRanges", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzPlacement", "nzShowWeekNumber", "nzShowTime"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: DateInputParserDirective, selector: "nz-date-picker", inputs: ["nzFormat"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendDatePicker, isStandalone: true, selector: "extend-date-picker", inputs: { dateFormat: "dateFormat", label: "label", placeHolder: "placeHolder", labelAlign: "labelAlign", floatingLabel: "floatingLabel", showTime: "showTime", labelSpan: "labelSpan", labelFlex: "labelFlex", inputFlex: "inputFlex", disabled: "disabled", required: "required", isSubmited: "isSubmited", noBottom: "noBottom", selectModeType: "selectModeType", inputWidth: "inputWidth", inputHeight: "inputHeight", borderBottomOnly: "borderBottomOnly", displayInline: "displayInline", size: "size", minDate: "minDate", maxDate: "maxDate", lstItem: "lstItem", displayField: "displayField", valueField: "valueField", formData: "formData", controlName: "controlName", _ngModel: "_ngModel", isTouched: "isTouched", inputErrorMessage: "inputErrorMessage", errorMessages: "errorMessages" }, outputs: { _ngModelChange: "_ngModelChange" }, ngImport: i0, template: "<div\r\n  class=\"extend-date-picker-wrapper\"\r\n  [ngClass]=\"[floatingLabel && label ? 'floating-label' : '']\"\r\n  [ngStyle]=\"{ display: displayInline ? 'inline' : null }\"\r\n>\r\n  @if (controlName) {\r\n    <div [formGroup]=\"formData\">\r\n      <nz-form-item>\r\n        @if (label) {\r\n          <nz-form-label\r\n            [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\r\n            [nzFlex]=\"labelFlex\"\r\n            [nzLabelAlign]=\"labelAlign\"\r\n            [nzRequired]=\"required\"\r\n            [nzFor]=\"controlName\"\r\n            nzNoColon\r\n            nzLabelWrap\r\n          >\r\n            {{ label }}\r\n          </nz-form-label>\r\n        }\r\n        <nz-form-control\r\n          [nzSpan]=\"label ? (floatingLabel || labelFlex ? null : 24 - labelSpan) : null\"\r\n          [nzFlex]=\"inputFlex\"\r\n          [ngClass]=\"{ 'full-width': floatingLabel || !label }\"\r\n          [nzErrorTip]=\"customValidateStatus\"\r\n          [nzValidateStatus]=\"customValidateStatus ? 'error' : ''\"\r\n        >\r\n          <nz-date-picker\r\n            class=\"full-width\"\r\n            [nzPlaceHolder]=\"placeHolder || ' '\"\r\n            [nzFormat]=\"dateFormat\"\r\n            [nzSize]=\"size\"\r\n            [formControlName]=\"controlName\"\r\n            [nzDisabledDate]=\"disabledDate\"\r\n            [nzShowTime]=\"showTime\"\r\n            [ngStyle]=\"{\r\n              width: inputWidth,\r\n              height: inputHeight,\r\n            }\"\r\n            [ngClass]=\"{\r\n              'border-bottom-only': borderBottomOnly,\r\n            }\"\r\n          ></nz-date-picker>\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n    </div>\r\n  } @else {\r\n    <nz-form-item>\r\n      @if (label) {\r\n        <nz-form-label\r\n          [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\r\n          [nzFlex]=\"labelFlex\"\r\n          [nzLabelAlign]=\"labelAlign\"\r\n          [nzRequired]=\"required\"\r\n          nzNoColon\r\n          nzLabelWrap\r\n        >\r\n          {{ label }}\r\n        </nz-form-label>\r\n      }\r\n      <nz-form-control\r\n        [nzSpan]=\"label ? (floatingLabel || labelFlex ? null : 24 - labelSpan) : null\"\r\n        [nzFlex]=\"inputFlex\"\r\n        [ngClass]=\"{ 'full-width': floatingLabel || !label }\"\r\n        [nzErrorTip]=\"customValidateStatus\"\r\n        [nzValidateStatus]=\"customValidateStatus ? 'error' : ''\"\r\n      >\r\n        <nz-date-picker\r\n          class=\"full-width\"\r\n          [nzPlaceHolder]=\"placeHolder || ' '\"\r\n          [nzFormat]=\"dateFormat\"\r\n          [nzSize]=\"size\"\r\n          [disabled]=\"disabled\"\r\n          [nzDisabledDate]=\"disabledDate\"\r\n          [nzShowTime]=\"showTime\"\r\n          [ngStyle]=\"{\r\n            width: inputWidth,\r\n            height: inputHeight,\r\n          }\"\r\n          [ngClass]=\"{\r\n            'border-bottom-only': borderBottomOnly,\r\n          }\"\r\n          [(ngModel)]=\"_ngModel\"\r\n          (ngModelChange)=\"onNgModelChange($event)\"\r\n          (blur)=\"onBlur()\"\r\n        ></nz-date-picker>\r\n      </nz-form-control>\r\n    </nz-form-item>\r\n  }\r\n</div>\r\n\r\n<ng-template #dynamicErrorTemplate let-control>\r\n  <ng-container *ngFor=\"let error of errorMessages | keyvalue\">\r\n    <ng-container *ngIf=\"control.hasError(error.key)\">\r\n      {{ error.value }}\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: ["::ng-deep .extend-date-picker-wrapper.floating-label{position:relative;padding-top:14px}::ng-deep .extend-date-picker-wrapper nz-form-item nz-form-label{position:absolute;top:12px;left:10px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:1;height:auto;line-height:normal;padding:0 4px}::ng-deep .extend-date-picker-wrapper nz-form-item nz-form-label label{font-size:12px;color:#969696;font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .extend-date-picker-wrapper .full-width{width:100%}.extend-date-picker-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.extend-date-picker-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label,.extend-date-picker-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.extend-date-picker-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.extend-date-picker-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.extend-date-picker-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$4.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "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: NzDatePickerModule }, { kind: "component", type: i5$1.NzDatePickerComponent, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-quarter-picker,nz-year-picker,nz-range-picker", inputs: ["nzAllowClear", "nzAutoFocus", "nzDisabled", "nzBorderless", "nzInputReadOnly", "nzInline", "nzOpen", "nzDisabledDate", "nzLocale", "nzPlaceHolder", "nzPopupStyle", "nzDropdownClassName", "nzSize", "nzStatus", "nzFormat", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzShowToday", "nzMode", "nzShowNow", "nzRanges", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzPlacement", "nzShowWeekNumber", "nzShowTime"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: DateInputParserDirective, selector: "nz-date-picker", inputs: ["nzFormat"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendDatePicker, decorators: [{
             type: Component,
@@ -2446,7 +2567,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         NzDatePickerModule,
                         TranslateModule,
                         DateInputParserDirective,
-                    ], template: "<div\n  class=\"extend-date-picker-wrapper\"\n  [ngClass]=\"[floatingLabel && label ? 'floating-label' : '']\"\n  [ngStyle]=\"{ display: displayInline ? 'inline' : null }\"\n>\n  @if (controlName) {\n    <div [formGroup]=\"formData\">\n      <nz-form-item>\n        @if (label) {\n          <nz-form-label\n            [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\n            [nzFlex]=\"labelFlex\"\n            [nzLabelAlign]=\"labelAlign\"\n            [nzRequired]=\"required\"\n            [nzFor]=\"controlName\"\n            nzNoColon\n            nzLabelWrap\n          >\n            {{ label }}\n          </nz-form-label>\n        }\n        <nz-form-control\n          [nzSpan]=\"label ? (floatingLabel || labelFlex ? null : 24 - labelSpan) : null\"\n          [nzFlex]=\"inputFlex\"\n          [ngClass]=\"{ 'full-width': floatingLabel || !label }\"\n          [nzErrorTip]=\"customValidateStatus\"\n          [nzValidateStatus]=\"customValidateStatus ? 'error' : ''\"\n        >\n          <nz-date-picker\n            class=\"full-width\"\n            [nzPlaceHolder]=\"placeHolder || ' '\"\n            [nzFormat]=\"dateFormat\"\n            [nzSize]=\"size\"\n            [formControlName]=\"controlName\"\n            [nzDisabledDate]=\"disabledDate\"\n            [nzShowTime]=\"showTime\"\n            [ngStyle]=\"{\n              width: inputWidth,\n              height: inputHeight,\n            }\"\n            [ngClass]=\"{\n              'border-bottom-only': borderBottomOnly,\n            }\"\n          ></nz-date-picker>\n        </nz-form-control>\n      </nz-form-item>\n    </div>\n  } @else {\n    <nz-form-item>\n      @if (label) {\n        <nz-form-label\n          [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\n          [nzFlex]=\"labelFlex\"\n          [nzLabelAlign]=\"labelAlign\"\n          [nzRequired]=\"required\"\n          nzNoColon\n          nzLabelWrap\n        >\n          {{ label }}\n        </nz-form-label>\n      }\n      <nz-form-control\n        [nzSpan]=\"label ? (floatingLabel || labelFlex ? null : 24 - labelSpan) : null\"\n        [nzFlex]=\"inputFlex\"\n        [ngClass]=\"{ 'full-width': floatingLabel || !label }\"\n        [nzErrorTip]=\"customValidateStatus\"\n        [nzValidateStatus]=\"customValidateStatus ? 'error' : ''\"\n      >\n        <nz-date-picker\n          class=\"full-width\"\n          [nzPlaceHolder]=\"placeHolder || ' '\"\n          [nzFormat]=\"dateFormat\"\n          [nzSize]=\"size\"\n          [disabled]=\"disabled\"\n          [nzDisabledDate]=\"disabledDate\"\n          [nzShowTime]=\"showTime\"\n          [ngStyle]=\"{\n            width: inputWidth,\n            height: inputHeight,\n          }\"\n          [ngClass]=\"{\n            'border-bottom-only': borderBottomOnly,\n          }\"\n          [(ngModel)]=\"_ngModel\"\n          (ngModelChange)=\"onNgModelChange($event)\"\n          (blur)=\"onBlur()\"\n        ></nz-date-picker>\n      </nz-form-control>\n    </nz-form-item>\n  }\n</div>\n\n<ng-template #dynamicErrorTemplate let-control>\n  <ng-container *ngFor=\"let error of errorMessages | keyvalue\">\n    <ng-container *ngIf=\"control.hasError(error.key)\">\n      {{ error.value }}\n    </ng-container>\n  </ng-container>\n</ng-template>\n", styles: ["::ng-deep .extend-date-picker-wrapper.floating-label{position:relative;padding-top:14px}::ng-deep .extend-date-picker-wrapper nz-form-item nz-form-label{position:absolute;top:12px;left:10px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:1;height:auto;line-height:normal;padding:0 4px}::ng-deep .extend-date-picker-wrapper nz-form-item nz-form-label label{font-size:12px;color:#969696;font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .extend-date-picker-wrapper .full-width{width:100%}.extend-date-picker-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.extend-date-picker-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label,.extend-date-picker-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.extend-date-picker-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.extend-date-picker-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.extend-date-picker-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}\n"] }]
+                    ], template: "<div\r\n  class=\"extend-date-picker-wrapper\"\r\n  [ngClass]=\"[floatingLabel && label ? 'floating-label' : '']\"\r\n  [ngStyle]=\"{ display: displayInline ? 'inline' : null }\"\r\n>\r\n  @if (controlName) {\r\n    <div [formGroup]=\"formData\">\r\n      <nz-form-item>\r\n        @if (label) {\r\n          <nz-form-label\r\n            [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\r\n            [nzFlex]=\"labelFlex\"\r\n            [nzLabelAlign]=\"labelAlign\"\r\n            [nzRequired]=\"required\"\r\n            [nzFor]=\"controlName\"\r\n            nzNoColon\r\n            nzLabelWrap\r\n          >\r\n            {{ label }}\r\n          </nz-form-label>\r\n        }\r\n        <nz-form-control\r\n          [nzSpan]=\"label ? (floatingLabel || labelFlex ? null : 24 - labelSpan) : null\"\r\n          [nzFlex]=\"inputFlex\"\r\n          [ngClass]=\"{ 'full-width': floatingLabel || !label }\"\r\n          [nzErrorTip]=\"customValidateStatus\"\r\n          [nzValidateStatus]=\"customValidateStatus ? 'error' : ''\"\r\n        >\r\n          <nz-date-picker\r\n            class=\"full-width\"\r\n            [nzPlaceHolder]=\"placeHolder || ' '\"\r\n            [nzFormat]=\"dateFormat\"\r\n            [nzSize]=\"size\"\r\n            [formControlName]=\"controlName\"\r\n            [nzDisabledDate]=\"disabledDate\"\r\n            [nzShowTime]=\"showTime\"\r\n            [ngStyle]=\"{\r\n              width: inputWidth,\r\n              height: inputHeight,\r\n            }\"\r\n            [ngClass]=\"{\r\n              'border-bottom-only': borderBottomOnly,\r\n            }\"\r\n          ></nz-date-picker>\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n    </div>\r\n  } @else {\r\n    <nz-form-item>\r\n      @if (label) {\r\n        <nz-form-label\r\n          [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\r\n          [nzFlex]=\"labelFlex\"\r\n          [nzLabelAlign]=\"labelAlign\"\r\n          [nzRequired]=\"required\"\r\n          nzNoColon\r\n          nzLabelWrap\r\n        >\r\n          {{ label }}\r\n        </nz-form-label>\r\n      }\r\n      <nz-form-control\r\n        [nzSpan]=\"label ? (floatingLabel || labelFlex ? null : 24 - labelSpan) : null\"\r\n        [nzFlex]=\"inputFlex\"\r\n        [ngClass]=\"{ 'full-width': floatingLabel || !label }\"\r\n        [nzErrorTip]=\"customValidateStatus\"\r\n        [nzValidateStatus]=\"customValidateStatus ? 'error' : ''\"\r\n      >\r\n        <nz-date-picker\r\n          class=\"full-width\"\r\n          [nzPlaceHolder]=\"placeHolder || ' '\"\r\n          [nzFormat]=\"dateFormat\"\r\n          [nzSize]=\"size\"\r\n          [disabled]=\"disabled\"\r\n          [nzDisabledDate]=\"disabledDate\"\r\n          [nzShowTime]=\"showTime\"\r\n          [ngStyle]=\"{\r\n            width: inputWidth,\r\n            height: inputHeight,\r\n          }\"\r\n          [ngClass]=\"{\r\n            'border-bottom-only': borderBottomOnly,\r\n          }\"\r\n          [(ngModel)]=\"_ngModel\"\r\n          (ngModelChange)=\"onNgModelChange($event)\"\r\n          (blur)=\"onBlur()\"\r\n        ></nz-date-picker>\r\n      </nz-form-control>\r\n    </nz-form-item>\r\n  }\r\n</div>\r\n\r\n<ng-template #dynamicErrorTemplate let-control>\r\n  <ng-container *ngFor=\"let error of errorMessages | keyvalue\">\r\n    <ng-container *ngIf=\"control.hasError(error.key)\">\r\n      {{ error.value }}\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: ["::ng-deep .extend-date-picker-wrapper.floating-label{position:relative;padding-top:14px}::ng-deep .extend-date-picker-wrapper nz-form-item nz-form-label{position:absolute;top:12px;left:10px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:1;height:auto;line-height:normal;padding:0 4px}::ng-deep .extend-date-picker-wrapper nz-form-item nz-form-label label{font-size:12px;color:#969696;font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .extend-date-picker-wrapper .full-width{width:100%}.extend-date-picker-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.extend-date-picker-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label,.extend-date-picker-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.extend-date-picker-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.extend-date-picker-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.extend-date-picker-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}\n"] }]
         }], propDecorators: { dateFormat: [{
                 type: Input
             }], label: [{
@@ -2568,11 +2689,11 @@ class ExtendDateRangePicker {
         this.date2Change.emit(this.date2);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendDateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendDateRangePicker, isStandalone: true, selector: "extend-date-range-picker", inputs: { dateFormat: "dateFormat", layOutType: "layOutType", label: "label", placeHolder: "placeHolder", labelAlign: "labelAlign", labelSpan: "labelSpan", labelFlex: "labelFlex", disabled: "disabled", required: "required", noBottom: "noBottom", selectModeType: "selectModeType", inputWidth: "inputWidth", inputHeight: "inputHeight", borderBottomOnly: "borderBottomOnly", displayInline: "displayInline", size: "size", lstItem: "lstItem", displayField: "displayField", valueField: "valueField", formData: "formData", controlName: "controlName", date1: "date1", date2: "date2" }, outputs: { date1Change: "date1Change", date2Change: "date2Change" }, ngImport: i0, template: "<div class=\"extend-wrapper\" [ngStyle]=\"{ display: displayInline ? 'inline' : null }\">\n  @if (controlName) {\n    <!-- <div [formGroup]=\"formData\">\n      <nz-form-item>\n        <nz-form-label\n          [nzSpan]=\"layOutType == 'horizontal' ? labelSpan : null\"\n          [nzLabelAlign]=\"labelAlign\"\n          [nzRequired]=\"required\"\n          [nzFor]=\"controlName\"\n          nzNoColon\n          nzLabelWrap\n        >\n          {{ label }}\n        </nz-form-label>\n        <nz-form-control\n          [nzSpan]=\"layOutType == 'horizontal' ? inputSpan : null\"\n          [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n        >\n          <nz-date-picker\n            class=\"full-width\"\n            [nzPlaceHolder]=\"placeHolder || ' '\"\n            [nzFormat]=\"dateFormat\"\n            [nzSize]=\"size\"\n            [formControlName]=\"controlName\"\n            [ngStyle]=\"{\n              width: inputWidth,\n              height: inputHeight,\n            }\"\n            [ngClass]=\"{\n              'border-bottom-only': borderBottomOnly,\n            }\"\n          ></nz-date-picker>\n        </nz-form-control>\n      </nz-form-item>\n    </div> -->\n  } @else {\n    @if (label) {\n      <nz-form-item>\n        <nz-form-label\n          [nzSpan]=\"layOutType == 'horizontal' && !labelFlex ? labelSpan : null\"\n          [nzFlex]=\"labelFlex\"\n          [nzLabelAlign]=\"labelAlign\"\n          [nzRequired]=\"required\"\n          [nzFor]=\"controlName\"\n          nzNoColon\n          nzLabelWrap\n        >\n          {{ label }}\n        </nz-form-label>\n        <nz-range-picker\n          [nzSize]=\"size\"\n          [nzFormat]=\"dateFormat\"\n          [nzPlaceHolder]=\"['T\u1EEB ng\u00E0y', '\u0111\u1EBFn ng\u00E0y']\"\n          [nzRanges]=\"ranges\"\n          [ngModel]=\"_ngModel\"\n          (ngModelChange)=\"ngModelChange($event)\"\n        ></nz-range-picker>\n      </nz-form-item>\n    } @else {\n      <nz-range-picker\n        [nzSize]=\"size\"\n        [nzFormat]=\"dateFormat\"\n        [nzPlaceHolder]=\"['T\u1EEB ng\u00E0y', '\u0111\u1EBFn ng\u00E0y']\"\n        [ngModel]=\"_ngModel\"\n        (ngModelChange)=\"ngModelChange($event)\"\n      ></nz-range-picker>\n    }\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "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: "ngmodule", type: NzDatePickerModule }, { kind: "component", type: i5$1.NzDatePickerComponent, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-quarter-picker,nz-year-picker,nz-range-picker", inputs: ["nzAllowClear", "nzAutoFocus", "nzDisabled", "nzBorderless", "nzInputReadOnly", "nzInline", "nzOpen", "nzDisabledDate", "nzLocale", "nzPlaceHolder", "nzPopupStyle", "nzDropdownClassName", "nzSize", "nzStatus", "nzFormat", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzShowToday", "nzMode", "nzShowNow", "nzRanges", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzPlacement", "nzShowWeekNumber", "nzShowTime"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }, { kind: "directive", type: i5$1.NzRangePickerComponent, selector: "nz-range-picker", exportAs: ["nzRangePicker"] }, { kind: "ngmodule", type: TranslateModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendDateRangePicker, isStandalone: true, selector: "extend-date-range-picker", inputs: { dateFormat: "dateFormat", layOutType: "layOutType", label: "label", placeHolder: "placeHolder", labelAlign: "labelAlign", labelSpan: "labelSpan", labelFlex: "labelFlex", disabled: "disabled", required: "required", noBottom: "noBottom", selectModeType: "selectModeType", inputWidth: "inputWidth", inputHeight: "inputHeight", borderBottomOnly: "borderBottomOnly", displayInline: "displayInline", size: "size", lstItem: "lstItem", displayField: "displayField", valueField: "valueField", formData: "formData", controlName: "controlName", date1: "date1", date2: "date2" }, outputs: { date1Change: "date1Change", date2Change: "date2Change" }, ngImport: i0, template: "<div class=\"extend-wrapper\" [ngStyle]=\"{ display: displayInline ? 'inline' : null }\">\r\n  @if (controlName) {\r\n    <!-- <div [formGroup]=\"formData\">\r\n      <nz-form-item>\r\n        <nz-form-label\r\n          [nzSpan]=\"layOutType == 'horizontal' ? labelSpan : null\"\r\n          [nzLabelAlign]=\"labelAlign\"\r\n          [nzRequired]=\"required\"\r\n          [nzFor]=\"controlName\"\r\n          nzNoColon\r\n          nzLabelWrap\r\n        >\r\n          {{ label }}\r\n        </nz-form-label>\r\n        <nz-form-control\r\n          [nzSpan]=\"layOutType == 'horizontal' ? inputSpan : null\"\r\n          [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\r\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\r\n        >\r\n          <nz-date-picker\r\n            class=\"full-width\"\r\n            [nzPlaceHolder]=\"placeHolder || ' '\"\r\n            [nzFormat]=\"dateFormat\"\r\n            [nzSize]=\"size\"\r\n            [formControlName]=\"controlName\"\r\n            [ngStyle]=\"{\r\n              width: inputWidth,\r\n              height: inputHeight,\r\n            }\"\r\n            [ngClass]=\"{\r\n              'border-bottom-only': borderBottomOnly,\r\n            }\"\r\n          ></nz-date-picker>\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n    </div> -->\r\n  } @else {\r\n    @if (label) {\r\n      <nz-form-item>\r\n        <nz-form-label\r\n          [nzSpan]=\"layOutType == 'horizontal' && !labelFlex ? labelSpan : null\"\r\n          [nzFlex]=\"labelFlex\"\r\n          [nzLabelAlign]=\"labelAlign\"\r\n          [nzRequired]=\"required\"\r\n          [nzFor]=\"controlName\"\r\n          nzNoColon\r\n          nzLabelWrap\r\n        >\r\n          {{ label }}\r\n        </nz-form-label>\r\n        <nz-range-picker\r\n          [nzSize]=\"size\"\r\n          [nzFormat]=\"dateFormat\"\r\n          [nzPlaceHolder]=\"['T\u1EEB ng\u00E0y', '\u0111\u1EBFn ng\u00E0y']\"\r\n          [nzRanges]=\"ranges\"\r\n          [ngModel]=\"_ngModel\"\r\n          (ngModelChange)=\"ngModelChange($event)\"\r\n        ></nz-range-picker>\r\n      </nz-form-item>\r\n    } @else {\r\n      <nz-range-picker\r\n        [nzSize]=\"size\"\r\n        [nzFormat]=\"dateFormat\"\r\n        [nzPlaceHolder]=\"['T\u1EEB ng\u00E0y', '\u0111\u1EBFn ng\u00E0y']\"\r\n        [ngModel]=\"_ngModel\"\r\n        (ngModelChange)=\"ngModelChange($event)\"\r\n      ></nz-range-picker>\r\n    }\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "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: "ngmodule", type: NzDatePickerModule }, { kind: "component", type: i5$1.NzDatePickerComponent, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-quarter-picker,nz-year-picker,nz-range-picker", inputs: ["nzAllowClear", "nzAutoFocus", "nzDisabled", "nzBorderless", "nzInputReadOnly", "nzInline", "nzOpen", "nzDisabledDate", "nzLocale", "nzPlaceHolder", "nzPopupStyle", "nzDropdownClassName", "nzSize", "nzStatus", "nzFormat", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzShowToday", "nzMode", "nzShowNow", "nzRanges", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzPlacement", "nzShowWeekNumber", "nzShowTime"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }, { kind: "directive", type: i5$1.NzRangePickerComponent, selector: "nz-range-picker", exportAs: ["nzRangePicker"] }, { kind: "ngmodule", type: TranslateModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendDateRangePicker, decorators: [{
             type: Component,
-            args: [{ selector: 'extend-date-range-picker', imports: [CommonModule, FormsModule, ReactiveFormsModule, NzFormModule, NzDatePickerModule, TranslateModule], template: "<div class=\"extend-wrapper\" [ngStyle]=\"{ display: displayInline ? 'inline' : null }\">\n  @if (controlName) {\n    <!-- <div [formGroup]=\"formData\">\n      <nz-form-item>\n        <nz-form-label\n          [nzSpan]=\"layOutType == 'horizontal' ? labelSpan : null\"\n          [nzLabelAlign]=\"labelAlign\"\n          [nzRequired]=\"required\"\n          [nzFor]=\"controlName\"\n          nzNoColon\n          nzLabelWrap\n        >\n          {{ label }}\n        </nz-form-label>\n        <nz-form-control\n          [nzSpan]=\"layOutType == 'horizontal' ? inputSpan : null\"\n          [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n        >\n          <nz-date-picker\n            class=\"full-width\"\n            [nzPlaceHolder]=\"placeHolder || ' '\"\n            [nzFormat]=\"dateFormat\"\n            [nzSize]=\"size\"\n            [formControlName]=\"controlName\"\n            [ngStyle]=\"{\n              width: inputWidth,\n              height: inputHeight,\n            }\"\n            [ngClass]=\"{\n              'border-bottom-only': borderBottomOnly,\n            }\"\n          ></nz-date-picker>\n        </nz-form-control>\n      </nz-form-item>\n    </div> -->\n  } @else {\n    @if (label) {\n      <nz-form-item>\n        <nz-form-label\n          [nzSpan]=\"layOutType == 'horizontal' && !labelFlex ? labelSpan : null\"\n          [nzFlex]=\"labelFlex\"\n          [nzLabelAlign]=\"labelAlign\"\n          [nzRequired]=\"required\"\n          [nzFor]=\"controlName\"\n          nzNoColon\n          nzLabelWrap\n        >\n          {{ label }}\n        </nz-form-label>\n        <nz-range-picker\n          [nzSize]=\"size\"\n          [nzFormat]=\"dateFormat\"\n          [nzPlaceHolder]=\"['T\u1EEB ng\u00E0y', '\u0111\u1EBFn ng\u00E0y']\"\n          [nzRanges]=\"ranges\"\n          [ngModel]=\"_ngModel\"\n          (ngModelChange)=\"ngModelChange($event)\"\n        ></nz-range-picker>\n      </nz-form-item>\n    } @else {\n      <nz-range-picker\n        [nzSize]=\"size\"\n        [nzFormat]=\"dateFormat\"\n        [nzPlaceHolder]=\"['T\u1EEB ng\u00E0y', '\u0111\u1EBFn ng\u00E0y']\"\n        [ngModel]=\"_ngModel\"\n        (ngModelChange)=\"ngModelChange($event)\"\n      ></nz-range-picker>\n    }\n  }\n</div>\n" }]
+            args: [{ selector: 'extend-date-range-picker', imports: [CommonModule, FormsModule, ReactiveFormsModule, NzFormModule, NzDatePickerModule, TranslateModule], template: "<div class=\"extend-wrapper\" [ngStyle]=\"{ display: displayInline ? 'inline' : null }\">\r\n  @if (controlName) {\r\n    <!-- <div [formGroup]=\"formData\">\r\n      <nz-form-item>\r\n        <nz-form-label\r\n          [nzSpan]=\"layOutType == 'horizontal' ? labelSpan : null\"\r\n          [nzLabelAlign]=\"labelAlign\"\r\n          [nzRequired]=\"required\"\r\n          [nzFor]=\"controlName\"\r\n          nzNoColon\r\n          nzLabelWrap\r\n        >\r\n          {{ label }}\r\n        </nz-form-label>\r\n        <nz-form-control\r\n          [nzSpan]=\"layOutType == 'horizontal' ? inputSpan : null\"\r\n          [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\r\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\r\n        >\r\n          <nz-date-picker\r\n            class=\"full-width\"\r\n            [nzPlaceHolder]=\"placeHolder || ' '\"\r\n            [nzFormat]=\"dateFormat\"\r\n            [nzSize]=\"size\"\r\n            [formControlName]=\"controlName\"\r\n            [ngStyle]=\"{\r\n              width: inputWidth,\r\n              height: inputHeight,\r\n            }\"\r\n            [ngClass]=\"{\r\n              'border-bottom-only': borderBottomOnly,\r\n            }\"\r\n          ></nz-date-picker>\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n    </div> -->\r\n  } @else {\r\n    @if (label) {\r\n      <nz-form-item>\r\n        <nz-form-label\r\n          [nzSpan]=\"layOutType == 'horizontal' && !labelFlex ? labelSpan : null\"\r\n          [nzFlex]=\"labelFlex\"\r\n          [nzLabelAlign]=\"labelAlign\"\r\n          [nzRequired]=\"required\"\r\n          [nzFor]=\"controlName\"\r\n          nzNoColon\r\n          nzLabelWrap\r\n        >\r\n          {{ label }}\r\n        </nz-form-label>\r\n        <nz-range-picker\r\n          [nzSize]=\"size\"\r\n          [nzFormat]=\"dateFormat\"\r\n          [nzPlaceHolder]=\"['T\u1EEB ng\u00E0y', '\u0111\u1EBFn ng\u00E0y']\"\r\n          [nzRanges]=\"ranges\"\r\n          [ngModel]=\"_ngModel\"\r\n          (ngModelChange)=\"ngModelChange($event)\"\r\n        ></nz-range-picker>\r\n      </nz-form-item>\r\n    } @else {\r\n      <nz-range-picker\r\n        [nzSize]=\"size\"\r\n        [nzFormat]=\"dateFormat\"\r\n        [nzPlaceHolder]=\"['T\u1EEB ng\u00E0y', '\u0111\u1EBFn ng\u00E0y']\"\r\n        [ngModel]=\"_ngModel\"\r\n        (ngModelChange)=\"ngModelChange($event)\"\r\n      ></nz-range-picker>\r\n    }\r\n  }\r\n</div>\r\n" }]
         }], propDecorators: { dateFormat: [{
                 type: Input
             }], layOutType: [{
@@ -2729,11 +2850,11 @@ class ExtendInputNumber {
         return '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendInputNumber, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendInputNumber, isStandalone: true, selector: "extend-input-number", inputs: { label: "label", placeHolder: "placeHolder", labelAlign: "labelAlign", floatingLabel: "floatingLabel", hiddenUpDown: "hiddenUpDown", labelSpan: "labelSpan", labelFlex: "labelFlex", inputFlex: "inputFlex", disabled: "disabled", required: "required", noBottom: "noBottom", size: "size", min: "min", max: "max", precision: "precision", inputWidth: "inputWidth", inputHeight: "inputHeight", borderBottomOnly: "borderBottomOnly", displayInline: "displayInline", isSubmited: "isSubmited", separatorType: "separatorType", formData: "formData", controlName: "controlName", _ngModel: "_ngModel" }, outputs: { _ngModelChange: "_ngModelChange" }, viewQueries: [{ propertyName: "inputnumber", first: true, predicate: ["inputnumber"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div\n  class=\"extend-input-number-wrapper\"\n  [ngClass]=\"[floatingLabel && label ? 'floating-label' : '', hiddenUpDown ? 'hidden-up-down' : '']\"\n  [ngStyle]=\"{ display: displayInline ? 'inline' : null }\"\n>\n  @if (controlName) {\n    <div [formGroup]=\"formData\">\n      <nz-form-item>\n        <nz-form-label\n          [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\n          [nzFlex]=\"labelFlex\"\n          [nzLabelAlign]=\"labelAlign\"\n          [nzRequired]=\"required\"\n          [nzFor]=\"controlName\"\n          nzNoColon\n          nzLabelWrap\n        >\n          {{ label }}\n        </nz-form-label>\n        <nz-form-control\n          [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\n          [nzFlex]=\"inputFlex\"\n          [ngClass]=\"{ 'full-width': floatingLabel }\"\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n        >\n          <nz-input-number\n            #inputnumber\n            class=\"full-width\"\n            [nzSize]=\"size\"\n            [nzPlaceHolder]=\"placeHolder\"\n            [nzFormatter]=\"formatterNumber\"\n            [nzParser]=\"parserNumber\"\n            [nzPrecision]=\"precision\"\n            [formControlName]=\"controlName\"\n          />\n        </nz-form-control>\n      </nz-form-item>\n    </div>\n  } @else {\n    @if (label) {\n      <nz-form-item>\n        <nz-form-label\n          [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\n          [nzFlex]=\"labelFlex\"\n          [nzLabelAlign]=\"labelAlign\"\n          [nzRequired]=\"required\"\n          [nzFor]=\"controlName\"\n          nzNoColon\n          nzLabelWrap\n        >\n          {{ label }}\n        </nz-form-label>\n        <nz-form-control\n          [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\n          [nzFlex]=\"inputFlex\"\n          [ngClass]=\"{ 'full-width': floatingLabel }\"\n          [nzValidateStatus]=\"customValidateStatus\"\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n        >\n          @if (min != null && max != null) {\n            <nz-input-number\n              #inputnumber\n              class=\"full-width\"\n              [nzSize]=\"size\"\n              [nzMin]=\"min\"\n              [nzMax]=\"max\"\n              [nzPlaceHolder]=\"placeHolder\"\n              [nzFormatter]=\"formatterNumber\"\n              [nzParser]=\"parserNumber\"\n              [nzPrecision]=\"precision\"\n              [nzDisabled]=\"disabled\"\n              [ngModel]=\"_ngModel\"\n              (ngModelChange)=\"_onNgModelChange()\"\n            />\n          } @else if (min != null) {\n            <nz-input-number\n              #inputnumber\n              class=\"full-width\"\n              [nzSize]=\"size\"\n              [nzMin]=\"min\"\n              [nzPlaceHolder]=\"placeHolder\"\n              [nzFormatter]=\"formatterNumber\"\n              [nzParser]=\"parserNumber\"\n              [nzPrecision]=\"precision\"\n              [nzDisabled]=\"disabled\"\n              [ngModel]=\"_ngModel\"\n              (ngModelChange)=\"_onNgModelChange()\"\n            />\n          } @else if (max != null) {\n            <nz-input-number\n              #inputnumber\n              class=\"full-width\"\n              [nzSize]=\"size\"\n              [nzMax]=\"max\"\n              [nzPlaceHolder]=\"placeHolder\"\n              [nzFormatter]=\"formatterNumber\"\n              [nzParser]=\"parserNumber\"\n              [nzPrecision]=\"precision\"\n              [nzDisabled]=\"disabled\"\n              [ngModel]=\"_ngModel\"\n              (ngModelChange)=\"_onNgModelChange()\"\n            />\n          } @else {\n            <nz-input-number\n              #inputnumber\n              class=\"full-width\"\n              [nzSize]=\"size\"\n              [nzPlaceHolder]=\"placeHolder\"\n              [nzFormatter]=\"formatterNumber\"\n              [nzParser]=\"parserNumber\"\n              [nzPrecision]=\"precision\"\n              [nzDisabled]=\"disabled\"\n              [ngModel]=\"_ngModel\"\n              (ngModelChange)=\"_onNgModelChange()\"\n            />\n          }\n        </nz-form-control>\n      </nz-form-item>\n    } @else {\n      @if (min != null && max != null) {\n        <nz-input-number\n          #inputnumber\n          class=\"full-width\"\n          [nzSize]=\"size\"\n          [nzMin]=\"min\"\n          [nzMax]=\"max\"\n          [nzPlaceHolder]=\"placeHolder\"\n          [nzFormatter]=\"formatterNumber\"\n          [nzParser]=\"parserNumber\"\n          [nzPrecision]=\"precision\"\n          [nzDisabled]=\"disabled\"\n          [ngModel]=\"_ngModel\"\n          (ngModelChange)=\"_onNgModelChange()\"\n        />\n      } @else if (min != null) {\n        <nz-input-number\n          #inputnumber\n          class=\"full-width\"\n          [nzSize]=\"size\"\n          [nzMin]=\"min\"\n          [nzPlaceHolder]=\"placeHolder\"\n          [nzFormatter]=\"formatterNumber\"\n          [nzParser]=\"parserNumber\"\n          [nzPrecision]=\"precision\"\n          [nzDisabled]=\"disabled\"\n          [ngModel]=\"_ngModel\"\n          (ngModelChange)=\"_onNgModelChange()\"\n        />\n      } @else if (max != null) {\n        <nz-input-number\n          #inputnumber\n          class=\"full-width\"\n          [nzSize]=\"size\"\n          [nzMax]=\"max\"\n          [nzPlaceHolder]=\"placeHolder\"\n          [nzFormatter]=\"formatterNumber\"\n          [nzParser]=\"parserNumber\"\n          [nzPrecision]=\"precision\"\n          [nzDisabled]=\"disabled\"\n          [ngModel]=\"_ngModel\"\n          (ngModelChange)=\"_onNgModelChange()\"\n        />\n      } @else {\n        <nz-input-number\n          #inputnumber\n          class=\"full-width\"\n          [nzSize]=\"size\"\n          [nzPlaceHolder]=\"placeHolder\"\n          [nzFormatter]=\"formatterNumber\"\n          [nzParser]=\"parserNumber\"\n          [nzPrecision]=\"precision\"\n          [nzDisabled]=\"disabled\"\n          [ngModel]=\"_ngModel\"\n          (ngModelChange)=\"_onNgModelChange()\"\n          [ngStyle]=\"{\n            width: inputWidth,\n            height: inputHeight,\n            border: borderBottomOnly ? 'none' : '',\n            'border-bottom': borderBottomOnly ? '1px dashed' : '',\n          }\"\n        />\n      }\n    }\n  }\n</div>\n", styles: ["::ng-deep .extend-input-number-wrapper.floating-label{position:relative;padding-top:14px}::ng-deep .extend-input-number-wrapper.hidden-up-down .ant-input-number-handler-wrap{display:none}::ng-deep .extend-input-number-wrapper nz-form-item nz-form-label{position:absolute;top:12px;left:10px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:1;height:auto;line-height:normal;padding:0 4px}::ng-deep .extend-input-number-wrapper nz-form-item nz-form-label label{font-size:12px;color:#969696;font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .extend-input-number-wrapper .full-width{width:100%}.extend-input-number-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.extend-input-number-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label,.extend-input-number-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.extend-input-number-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.extend-input-number-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.extend-input-number-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.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: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "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: NzInputNumberModule }, { kind: "component", type: i6.NzInputNumberComponent, selector: "nz-input-number", inputs: ["nzId", "nzSize", "nzPlaceHolder", "nzStatus", "nzStep", "nzMin", "nzMax", "nzPrecision", "nzParser", "nzFormatter", "nzDisabled", "nzReadOnly", "nzAutoFocus", "nzBordered", "nzKeyboard", "nzControls"], outputs: ["nzOnStep"], exportAs: ["nzInputNumber"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendInputNumber, isStandalone: true, selector: "extend-input-number", inputs: { label: "label", placeHolder: "placeHolder", labelAlign: "labelAlign", floatingLabel: "floatingLabel", hiddenUpDown: "hiddenUpDown", labelSpan: "labelSpan", labelFlex: "labelFlex", inputFlex: "inputFlex", disabled: "disabled", required: "required", noBottom: "noBottom", size: "size", min: "min", max: "max", precision: "precision", inputWidth: "inputWidth", inputHeight: "inputHeight", borderBottomOnly: "borderBottomOnly", displayInline: "displayInline", isSubmited: "isSubmited", separatorType: "separatorType", formData: "formData", controlName: "controlName", _ngModel: "_ngModel" }, outputs: { _ngModelChange: "_ngModelChange" }, viewQueries: [{ propertyName: "inputnumber", first: true, predicate: ["inputnumber"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div\r\n  class=\"extend-input-number-wrapper\"\r\n  [ngClass]=\"[floatingLabel && label ? 'floating-label' : '', hiddenUpDown ? 'hidden-up-down' : '']\"\r\n  [ngStyle]=\"{ display: displayInline ? 'inline' : null }\"\r\n>\r\n  @if (controlName) {\r\n    <div [formGroup]=\"formData\">\r\n      <nz-form-item>\r\n        <nz-form-label\r\n          [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\r\n          [nzFlex]=\"labelFlex\"\r\n          [nzLabelAlign]=\"labelAlign\"\r\n          [nzRequired]=\"required\"\r\n          [nzFor]=\"controlName\"\r\n          nzNoColon\r\n          nzLabelWrap\r\n        >\r\n          {{ label }}\r\n        </nz-form-label>\r\n        <nz-form-control\r\n          [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\r\n          [nzFlex]=\"inputFlex\"\r\n          [ngClass]=\"{ 'full-width': floatingLabel }\"\r\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\r\n        >\r\n          <nz-input-number\r\n            #inputnumber\r\n            class=\"full-width\"\r\n            [nzSize]=\"size\"\r\n            [nzPlaceHolder]=\"placeHolder\"\r\n            [nzFormatter]=\"formatterNumber\"\r\n            [nzParser]=\"parserNumber\"\r\n            [nzPrecision]=\"precision\"\r\n            [formControlName]=\"controlName\"\r\n          />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n    </div>\r\n  } @else {\r\n    @if (label) {\r\n      <nz-form-item>\r\n        <nz-form-label\r\n          [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\r\n          [nzFlex]=\"labelFlex\"\r\n          [nzLabelAlign]=\"labelAlign\"\r\n          [nzRequired]=\"required\"\r\n          [nzFor]=\"controlName\"\r\n          nzNoColon\r\n          nzLabelWrap\r\n        >\r\n          {{ label }}\r\n        </nz-form-label>\r\n        <nz-form-control\r\n          [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\r\n          [nzFlex]=\"inputFlex\"\r\n          [ngClass]=\"{ 'full-width': floatingLabel }\"\r\n          [nzValidateStatus]=\"customValidateStatus\"\r\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\r\n        >\r\n          @if (min != null && max != null) {\r\n            <nz-input-number\r\n              #inputnumber\r\n              class=\"full-width\"\r\n              [nzSize]=\"size\"\r\n              [nzMin]=\"min\"\r\n              [nzMax]=\"max\"\r\n              [nzPlaceHolder]=\"placeHolder\"\r\n              [nzFormatter]=\"formatterNumber\"\r\n              [nzParser]=\"parserNumber\"\r\n              [nzPrecision]=\"precision\"\r\n              [nzDisabled]=\"disabled\"\r\n              [ngModel]=\"_ngModel\"\r\n              (ngModelChange)=\"_onNgModelChange()\"\r\n            />\r\n          } @else if (min != null) {\r\n            <nz-input-number\r\n              #inputnumber\r\n              class=\"full-width\"\r\n              [nzSize]=\"size\"\r\n              [nzMin]=\"min\"\r\n              [nzPlaceHolder]=\"placeHolder\"\r\n              [nzFormatter]=\"formatterNumber\"\r\n              [nzParser]=\"parserNumber\"\r\n              [nzPrecision]=\"precision\"\r\n              [nzDisabled]=\"disabled\"\r\n              [ngModel]=\"_ngModel\"\r\n              (ngModelChange)=\"_onNgModelChange()\"\r\n            />\r\n          } @else if (max != null) {\r\n            <nz-input-number\r\n              #inputnumber\r\n              class=\"full-width\"\r\n              [nzSize]=\"size\"\r\n              [nzMax]=\"max\"\r\n              [nzPlaceHolder]=\"placeHolder\"\r\n              [nzFormatter]=\"formatterNumber\"\r\n              [nzParser]=\"parserNumber\"\r\n              [nzPrecision]=\"precision\"\r\n              [nzDisabled]=\"disabled\"\r\n              [ngModel]=\"_ngModel\"\r\n              (ngModelChange)=\"_onNgModelChange()\"\r\n            />\r\n          } @else {\r\n            <nz-input-number\r\n              #inputnumber\r\n              class=\"full-width\"\r\n              [nzSize]=\"size\"\r\n              [nzPlaceHolder]=\"placeHolder\"\r\n              [nzFormatter]=\"formatterNumber\"\r\n              [nzParser]=\"parserNumber\"\r\n              [nzPrecision]=\"precision\"\r\n              [nzDisabled]=\"disabled\"\r\n              [ngModel]=\"_ngModel\"\r\n              (ngModelChange)=\"_onNgModelChange()\"\r\n            />\r\n          }\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n    } @else {\r\n      @if (min != null && max != null) {\r\n        <nz-input-number\r\n          #inputnumber\r\n          class=\"full-width\"\r\n          [nzSize]=\"size\"\r\n          [nzMin]=\"min\"\r\n          [nzMax]=\"max\"\r\n          [nzPlaceHolder]=\"placeHolder\"\r\n          [nzFormatter]=\"formatterNumber\"\r\n          [nzParser]=\"parserNumber\"\r\n          [nzPrecision]=\"precision\"\r\n          [nzDisabled]=\"disabled\"\r\n          [ngModel]=\"_ngModel\"\r\n          (ngModelChange)=\"_onNgModelChange()\"\r\n        />\r\n      } @else if (min != null) {\r\n        <nz-input-number\r\n          #inputnumber\r\n          class=\"full-width\"\r\n          [nzSize]=\"size\"\r\n          [nzMin]=\"min\"\r\n          [nzPlaceHolder]=\"placeHolder\"\r\n          [nzFormatter]=\"formatterNumber\"\r\n          [nzParser]=\"parserNumber\"\r\n          [nzPrecision]=\"precision\"\r\n          [nzDisabled]=\"disabled\"\r\n          [ngModel]=\"_ngModel\"\r\n          (ngModelChange)=\"_onNgModelChange()\"\r\n        />\r\n      } @else if (max != null) {\r\n        <nz-input-number\r\n          #inputnumber\r\n          class=\"full-width\"\r\n          [nzSize]=\"size\"\r\n          [nzMax]=\"max\"\r\n          [nzPlaceHolder]=\"placeHolder\"\r\n          [nzFormatter]=\"formatterNumber\"\r\n          [nzParser]=\"parserNumber\"\r\n          [nzPrecision]=\"precision\"\r\n          [nzDisabled]=\"disabled\"\r\n          [ngModel]=\"_ngModel\"\r\n          (ngModelChange)=\"_onNgModelChange()\"\r\n        />\r\n      } @else {\r\n        <nz-input-number\r\n          #inputnumber\r\n          class=\"full-width\"\r\n          [nzSize]=\"size\"\r\n          [nzPlaceHolder]=\"placeHolder\"\r\n          [nzFormatter]=\"formatterNumber\"\r\n          [nzParser]=\"parserNumber\"\r\n          [nzPrecision]=\"precision\"\r\n          [nzDisabled]=\"disabled\"\r\n          [ngModel]=\"_ngModel\"\r\n          (ngModelChange)=\"_onNgModelChange()\"\r\n          [ngStyle]=\"{\r\n            width: inputWidth,\r\n            height: inputHeight,\r\n            border: borderBottomOnly ? 'none' : '',\r\n            'border-bottom': borderBottomOnly ? '1px dashed' : '',\r\n          }\"\r\n        />\r\n      }\r\n    }\r\n  }\r\n</div>\r\n", styles: ["::ng-deep .extend-input-number-wrapper.floating-label{position:relative;padding-top:14px}::ng-deep .extend-input-number-wrapper.hidden-up-down .ant-input-number-handler-wrap{display:none}::ng-deep .extend-input-number-wrapper nz-form-item nz-form-label{position:absolute;top:12px;left:10px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:1;height:auto;line-height:normal;padding:0 4px}::ng-deep .extend-input-number-wrapper nz-form-item nz-form-label label{font-size:12px;color:#969696;font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .extend-input-number-wrapper .full-width{width:100%}.extend-input-number-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.extend-input-number-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label,.extend-input-number-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.extend-input-number-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.extend-input-number-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.extend-input-number-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "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: NzInputNumberModule }, { kind: "component", type: i6.NzInputNumberComponent, selector: "nz-input-number", inputs: ["nzId", "nzSize", "nzPlaceHolder", "nzStatus", "nzStep", "nzMin", "nzMax", "nzPrecision", "nzParser", "nzFormatter", "nzDisabled", "nzReadOnly", "nzAutoFocus", "nzBordered", "nzKeyboard", "nzControls"], outputs: ["nzOnStep"], exportAs: ["nzInputNumber"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendInputNumber, decorators: [{
             type: Component,
-            args: [{ selector: 'extend-input-number', imports: [CommonModule, FormsModule, ReactiveFormsModule, TranslateModule, NzFormModule, NzInputNumberModule], template: "<div\n  class=\"extend-input-number-wrapper\"\n  [ngClass]=\"[floatingLabel && label ? 'floating-label' : '', hiddenUpDown ? 'hidden-up-down' : '']\"\n  [ngStyle]=\"{ display: displayInline ? 'inline' : null }\"\n>\n  @if (controlName) {\n    <div [formGroup]=\"formData\">\n      <nz-form-item>\n        <nz-form-label\n          [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\n          [nzFlex]=\"labelFlex\"\n          [nzLabelAlign]=\"labelAlign\"\n          [nzRequired]=\"required\"\n          [nzFor]=\"controlName\"\n          nzNoColon\n          nzLabelWrap\n        >\n          {{ label }}\n        </nz-form-label>\n        <nz-form-control\n          [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\n          [nzFlex]=\"inputFlex\"\n          [ngClass]=\"{ 'full-width': floatingLabel }\"\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n        >\n          <nz-input-number\n            #inputnumber\n            class=\"full-width\"\n            [nzSize]=\"size\"\n            [nzPlaceHolder]=\"placeHolder\"\n            [nzFormatter]=\"formatterNumber\"\n            [nzParser]=\"parserNumber\"\n            [nzPrecision]=\"precision\"\n            [formControlName]=\"controlName\"\n          />\n        </nz-form-control>\n      </nz-form-item>\n    </div>\n  } @else {\n    @if (label) {\n      <nz-form-item>\n        <nz-form-label\n          [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\n          [nzFlex]=\"labelFlex\"\n          [nzLabelAlign]=\"labelAlign\"\n          [nzRequired]=\"required\"\n          [nzFor]=\"controlName\"\n          nzNoColon\n          nzLabelWrap\n        >\n          {{ label }}\n        </nz-form-label>\n        <nz-form-control\n          [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\n          [nzFlex]=\"inputFlex\"\n          [ngClass]=\"{ 'full-width': floatingLabel }\"\n          [nzValidateStatus]=\"customValidateStatus\"\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n        >\n          @if (min != null && max != null) {\n            <nz-input-number\n              #inputnumber\n              class=\"full-width\"\n              [nzSize]=\"size\"\n              [nzMin]=\"min\"\n              [nzMax]=\"max\"\n              [nzPlaceHolder]=\"placeHolder\"\n              [nzFormatter]=\"formatterNumber\"\n              [nzParser]=\"parserNumber\"\n              [nzPrecision]=\"precision\"\n              [nzDisabled]=\"disabled\"\n              [ngModel]=\"_ngModel\"\n              (ngModelChange)=\"_onNgModelChange()\"\n            />\n          } @else if (min != null) {\n            <nz-input-number\n              #inputnumber\n              class=\"full-width\"\n              [nzSize]=\"size\"\n              [nzMin]=\"min\"\n              [nzPlaceHolder]=\"placeHolder\"\n              [nzFormatter]=\"formatterNumber\"\n              [nzParser]=\"parserNumber\"\n              [nzPrecision]=\"precision\"\n              [nzDisabled]=\"disabled\"\n              [ngModel]=\"_ngModel\"\n              (ngModelChange)=\"_onNgModelChange()\"\n            />\n          } @else if (max != null) {\n            <nz-input-number\n              #inputnumber\n              class=\"full-width\"\n              [nzSize]=\"size\"\n              [nzMax]=\"max\"\n              [nzPlaceHolder]=\"placeHolder\"\n              [nzFormatter]=\"formatterNumber\"\n              [nzParser]=\"parserNumber\"\n              [nzPrecision]=\"precision\"\n              [nzDisabled]=\"disabled\"\n              [ngModel]=\"_ngModel\"\n              (ngModelChange)=\"_onNgModelChange()\"\n            />\n          } @else {\n            <nz-input-number\n              #inputnumber\n              class=\"full-width\"\n              [nzSize]=\"size\"\n              [nzPlaceHolder]=\"placeHolder\"\n              [nzFormatter]=\"formatterNumber\"\n              [nzParser]=\"parserNumber\"\n              [nzPrecision]=\"precision\"\n              [nzDisabled]=\"disabled\"\n              [ngModel]=\"_ngModel\"\n              (ngModelChange)=\"_onNgModelChange()\"\n            />\n          }\n        </nz-form-control>\n      </nz-form-item>\n    } @else {\n      @if (min != null && max != null) {\n        <nz-input-number\n          #inputnumber\n          class=\"full-width\"\n          [nzSize]=\"size\"\n          [nzMin]=\"min\"\n          [nzMax]=\"max\"\n          [nzPlaceHolder]=\"placeHolder\"\n          [nzFormatter]=\"formatterNumber\"\n          [nzParser]=\"parserNumber\"\n          [nzPrecision]=\"precision\"\n          [nzDisabled]=\"disabled\"\n          [ngModel]=\"_ngModel\"\n          (ngModelChange)=\"_onNgModelChange()\"\n        />\n      } @else if (min != null) {\n        <nz-input-number\n          #inputnumber\n          class=\"full-width\"\n          [nzSize]=\"size\"\n          [nzMin]=\"min\"\n          [nzPlaceHolder]=\"placeHolder\"\n          [nzFormatter]=\"formatterNumber\"\n          [nzParser]=\"parserNumber\"\n          [nzPrecision]=\"precision\"\n          [nzDisabled]=\"disabled\"\n          [ngModel]=\"_ngModel\"\n          (ngModelChange)=\"_onNgModelChange()\"\n        />\n      } @else if (max != null) {\n        <nz-input-number\n          #inputnumber\n          class=\"full-width\"\n          [nzSize]=\"size\"\n          [nzMax]=\"max\"\n          [nzPlaceHolder]=\"placeHolder\"\n          [nzFormatter]=\"formatterNumber\"\n          [nzParser]=\"parserNumber\"\n          [nzPrecision]=\"precision\"\n          [nzDisabled]=\"disabled\"\n          [ngModel]=\"_ngModel\"\n          (ngModelChange)=\"_onNgModelChange()\"\n        />\n      } @else {\n        <nz-input-number\n          #inputnumber\n          class=\"full-width\"\n          [nzSize]=\"size\"\n          [nzPlaceHolder]=\"placeHolder\"\n          [nzFormatter]=\"formatterNumber\"\n          [nzParser]=\"parserNumber\"\n          [nzPrecision]=\"precision\"\n          [nzDisabled]=\"disabled\"\n          [ngModel]=\"_ngModel\"\n          (ngModelChange)=\"_onNgModelChange()\"\n          [ngStyle]=\"{\n            width: inputWidth,\n            height: inputHeight,\n            border: borderBottomOnly ? 'none' : '',\n            'border-bottom': borderBottomOnly ? '1px dashed' : '',\n          }\"\n        />\n      }\n    }\n  }\n</div>\n", styles: ["::ng-deep .extend-input-number-wrapper.floating-label{position:relative;padding-top:14px}::ng-deep .extend-input-number-wrapper.hidden-up-down .ant-input-number-handler-wrap{display:none}::ng-deep .extend-input-number-wrapper nz-form-item nz-form-label{position:absolute;top:12px;left:10px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:1;height:auto;line-height:normal;padding:0 4px}::ng-deep .extend-input-number-wrapper nz-form-item nz-form-label label{font-size:12px;color:#969696;font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .extend-input-number-wrapper .full-width{width:100%}.extend-input-number-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.extend-input-number-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label,.extend-input-number-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.extend-input-number-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.extend-input-number-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.extend-input-number-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}\n"] }]
+            args: [{ selector: 'extend-input-number', imports: [CommonModule, FormsModule, ReactiveFormsModule, TranslateModule, NzFormModule, NzInputNumberModule], template: "<div\r\n  class=\"extend-input-number-wrapper\"\r\n  [ngClass]=\"[floatingLabel && label ? 'floating-label' : '', hiddenUpDown ? 'hidden-up-down' : '']\"\r\n  [ngStyle]=\"{ display: displayInline ? 'inline' : null }\"\r\n>\r\n  @if (controlName) {\r\n    <div [formGroup]=\"formData\">\r\n      <nz-form-item>\r\n        <nz-form-label\r\n          [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\r\n          [nzFlex]=\"labelFlex\"\r\n          [nzLabelAlign]=\"labelAlign\"\r\n          [nzRequired]=\"required\"\r\n          [nzFor]=\"controlName\"\r\n          nzNoColon\r\n          nzLabelWrap\r\n        >\r\n          {{ label }}\r\n        </nz-form-label>\r\n        <nz-form-control\r\n          [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\r\n          [nzFlex]=\"inputFlex\"\r\n          [ngClass]=\"{ 'full-width': floatingLabel }\"\r\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\r\n        >\r\n          <nz-input-number\r\n            #inputnumber\r\n            class=\"full-width\"\r\n            [nzSize]=\"size\"\r\n            [nzPlaceHolder]=\"placeHolder\"\r\n            [nzFormatter]=\"formatterNumber\"\r\n            [nzParser]=\"parserNumber\"\r\n            [nzPrecision]=\"precision\"\r\n            [formControlName]=\"controlName\"\r\n          />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n    </div>\r\n  } @else {\r\n    @if (label) {\r\n      <nz-form-item>\r\n        <nz-form-label\r\n          [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\r\n          [nzFlex]=\"labelFlex\"\r\n          [nzLabelAlign]=\"labelAlign\"\r\n          [nzRequired]=\"required\"\r\n          [nzFor]=\"controlName\"\r\n          nzNoColon\r\n          nzLabelWrap\r\n        >\r\n          {{ label }}\r\n        </nz-form-label>\r\n        <nz-form-control\r\n          [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\r\n          [nzFlex]=\"inputFlex\"\r\n          [ngClass]=\"{ 'full-width': floatingLabel }\"\r\n          [nzValidateStatus]=\"customValidateStatus\"\r\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\r\n        >\r\n          @if (min != null && max != null) {\r\n            <nz-input-number\r\n              #inputnumber\r\n              class=\"full-width\"\r\n              [nzSize]=\"size\"\r\n              [nzMin]=\"min\"\r\n              [nzMax]=\"max\"\r\n              [nzPlaceHolder]=\"placeHolder\"\r\n              [nzFormatter]=\"formatterNumber\"\r\n              [nzParser]=\"parserNumber\"\r\n              [nzPrecision]=\"precision\"\r\n              [nzDisabled]=\"disabled\"\r\n              [ngModel]=\"_ngModel\"\r\n              (ngModelChange)=\"_onNgModelChange()\"\r\n            />\r\n          } @else if (min != null) {\r\n            <nz-input-number\r\n              #inputnumber\r\n              class=\"full-width\"\r\n              [nzSize]=\"size\"\r\n              [nzMin]=\"min\"\r\n              [nzPlaceHolder]=\"placeHolder\"\r\n              [nzFormatter]=\"formatterNumber\"\r\n              [nzParser]=\"parserNumber\"\r\n              [nzPrecision]=\"precision\"\r\n              [nzDisabled]=\"disabled\"\r\n              [ngModel]=\"_ngModel\"\r\n              (ngModelChange)=\"_onNgModelChange()\"\r\n            />\r\n          } @else if (max != null) {\r\n            <nz-input-number\r\n              #inputnumber\r\n              class=\"full-width\"\r\n              [nzSize]=\"size\"\r\n              [nzMax]=\"max\"\r\n              [nzPlaceHolder]=\"placeHolder\"\r\n              [nzFormatter]=\"formatterNumber\"\r\n              [nzParser]=\"parserNumber\"\r\n              [nzPrecision]=\"precision\"\r\n              [nzDisabled]=\"disabled\"\r\n              [ngModel]=\"_ngModel\"\r\n              (ngModelChange)=\"_onNgModelChange()\"\r\n            />\r\n          } @else {\r\n            <nz-input-number\r\n              #inputnumber\r\n              class=\"full-width\"\r\n              [nzSize]=\"size\"\r\n              [nzPlaceHolder]=\"placeHolder\"\r\n              [nzFormatter]=\"formatterNumber\"\r\n              [nzParser]=\"parserNumber\"\r\n              [nzPrecision]=\"precision\"\r\n              [nzDisabled]=\"disabled\"\r\n              [ngModel]=\"_ngModel\"\r\n              (ngModelChange)=\"_onNgModelChange()\"\r\n            />\r\n          }\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n    } @else {\r\n      @if (min != null && max != null) {\r\n        <nz-input-number\r\n          #inputnumber\r\n          class=\"full-width\"\r\n          [nzSize]=\"size\"\r\n          [nzMin]=\"min\"\r\n          [nzMax]=\"max\"\r\n          [nzPlaceHolder]=\"placeHolder\"\r\n          [nzFormatter]=\"formatterNumber\"\r\n          [nzParser]=\"parserNumber\"\r\n          [nzPrecision]=\"precision\"\r\n          [nzDisabled]=\"disabled\"\r\n          [ngModel]=\"_ngModel\"\r\n          (ngModelChange)=\"_onNgModelChange()\"\r\n        />\r\n      } @else if (min != null) {\r\n        <nz-input-number\r\n          #inputnumber\r\n          class=\"full-width\"\r\n          [nzSize]=\"size\"\r\n          [nzMin]=\"min\"\r\n          [nzPlaceHolder]=\"placeHolder\"\r\n          [nzFormatter]=\"formatterNumber\"\r\n          [nzParser]=\"parserNumber\"\r\n          [nzPrecision]=\"precision\"\r\n          [nzDisabled]=\"disabled\"\r\n          [ngModel]=\"_ngModel\"\r\n          (ngModelChange)=\"_onNgModelChange()\"\r\n        />\r\n      } @else if (max != null) {\r\n        <nz-input-number\r\n          #inputnumber\r\n          class=\"full-width\"\r\n          [nzSize]=\"size\"\r\n          [nzMax]=\"max\"\r\n          [nzPlaceHolder]=\"placeHolder\"\r\n          [nzFormatter]=\"formatterNumber\"\r\n          [nzParser]=\"parserNumber\"\r\n          [nzPrecision]=\"precision\"\r\n          [nzDisabled]=\"disabled\"\r\n          [ngModel]=\"_ngModel\"\r\n          (ngModelChange)=\"_onNgModelChange()\"\r\n        />\r\n      } @else {\r\n        <nz-input-number\r\n          #inputnumber\r\n          class=\"full-width\"\r\n          [nzSize]=\"size\"\r\n          [nzPlaceHolder]=\"placeHolder\"\r\n          [nzFormatter]=\"formatterNumber\"\r\n          [nzParser]=\"parserNumber\"\r\n          [nzPrecision]=\"precision\"\r\n          [nzDisabled]=\"disabled\"\r\n          [ngModel]=\"_ngModel\"\r\n          (ngModelChange)=\"_onNgModelChange()\"\r\n          [ngStyle]=\"{\r\n            width: inputWidth,\r\n            height: inputHeight,\r\n            border: borderBottomOnly ? 'none' : '',\r\n            'border-bottom': borderBottomOnly ? '1px dashed' : '',\r\n          }\"\r\n        />\r\n      }\r\n    }\r\n  }\r\n</div>\r\n", styles: ["::ng-deep .extend-input-number-wrapper.floating-label{position:relative;padding-top:14px}::ng-deep .extend-input-number-wrapper.hidden-up-down .ant-input-number-handler-wrap{display:none}::ng-deep .extend-input-number-wrapper nz-form-item nz-form-label{position:absolute;top:12px;left:10px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:1;height:auto;line-height:normal;padding:0 4px}::ng-deep .extend-input-number-wrapper nz-form-item nz-form-label label{font-size:12px;color:#969696;font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .extend-input-number-wrapper .full-width{width:100%}.extend-input-number-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.extend-input-number-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label,.extend-input-number-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.extend-input-number-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.extend-input-number-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.extend-input-number-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], placeHolder: [{
@@ -2884,11 +3005,11 @@ class ExtendInput {
         return '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendInput, isStandalone: true, selector: "extend-input", inputs: { label: "label", floatingLabel: "floatingLabel", placeHolder: "placeHolder", labelAlign: "labelAlign", inputClass: "inputClass", labelSpan: "labelSpan", labelFlex: "labelFlex", inputFlex: "inputFlex", allowClear: "allowClear", disabled: "disabled", readOnly: "readOnly", required: "required", noBottom: "noBottom", selectModeType: "selectModeType", autocomplete: "autocomplete", autofocus: "autofocus", inputWidth: "inputWidth", inputHeight: "inputHeight", borderBottomOnly: "borderBottomOnly", displayInline: "displayInline", size: "size", lstItem: "lstItem", displayField: "displayField", valueField: "valueField", formData: "formData", controlName: "controlName", _ngModel: "_ngModel", isSubmited: "isSubmited" }, outputs: { _ngModelChange: "_ngModelChange", onclickClearIcon: "onclickClearIcon", onenter: "onenter" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"extend-input-wrapper\"\n  [ngClass]=\"[floatingLabel && label ? 'floating-label' : '']\"\n  [ngStyle]=\"{ display: displayInline ? 'inline' : null }\"\n>\n  @if (controlName) {\n    <div [formGroup]=\"formData\">\n      <nz-form-item>\n        <nz-form-label\n          [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\n          [nzFlex]=\"labelFlex\"\n          [nzLabelAlign]=\"labelAlign\"\n          [nzRequired]=\"required\"\n          [nzFor]=\"controlName\"\n          nzNoColon\n          nzLabelWrap\n        >\n          {{ label }}\n        </nz-form-label>\n        <nz-form-control\n          [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\n          [nzFlex]=\"inputFlex\"\n          [ngClass]=\"{ 'full-width': floatingLabel }\"\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n        >\n          <input\n            #inputElement\n            nz-input\n            [nzSize]=\"size\"\n            [id]=\"controlName\"\n            [name]=\"controlName\"\n            [formControlName]=\"controlName\"\n            [autocomplete]=\"autocomplete\"\n            [placeholder]=\"placeHolder\"\n            [ngClass]=\"inputClass\"\n            (keyup.enter)=\"onenter.emit()\"\n          />\n        </nz-form-control>\n      </nz-form-item>\n    </div>\n  } @else {\n    @if (label) {\n      <nz-form-item>\n        <nz-form-label\n          [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\n          [nzFlex]=\"labelFlex\"\n          [nzLabelAlign]=\"labelAlign\"\n          [nzRequired]=\"required\"\n          [nzFor]=\"controlName\"\n          nzNoColon\n          nzLabelWrap\n        >\n          {{ label }}\n        </nz-form-label>\n        <nz-form-control\n          [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\n          [nzFlex]=\"inputFlex\"\n          [ngClass]=\"{ 'full-width': floatingLabel }\"\n          [nzValidateStatus]=\"customValidateStatus\"\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n        >\n          <nz-input-group [nzSize]=\"size\" [nzSuffix]=\"allowClear ? clearIcon : undefined\">\n            <input\n              #inputElement\n              nz-input\n              [nzSize]=\"size\"\n              [id]=\"controlName\"\n              [name]=\"controlName\"\n              [(ngModel)]=\"_ngModel\"\n              [autocomplete]=\"autocomplete\"\n              (ngModelChange)=\"_onNgModelChange()\"\n              [disabled]=\"disabled\"\n              [readOnly]=\"readOnly\"\n              [placeholder]=\"placeHolder\"\n              [ngClass]=\"inputClass\"\n              (keyup.enter)=\"onenter.emit()\"\n            />\n          </nz-input-group>\n        </nz-form-control>\n      </nz-form-item>\n    } @else {\n      <input\n        #inputElement\n        nz-input\n        [nzSize]=\"size\"\n        [ngStyle]=\"{\n          width: inputWidth,\n          height: inputHeight,\n        }\"\n        [id]=\"controlName\"\n        [name]=\"controlName\"\n        [(ngModel)]=\"_ngModel\"\n        (ngModelChange)=\"_onNgModelChange()\"\n        [autocomplete]=\"autocomplete\"\n        [disabled]=\"disabled\"\n        [readOnly]=\"readOnly\"\n        [placeholder]=\"placeHolder\"\n        [ngClass]=\"inputClass + ' ' + (borderBottomOnly ? 'border-bottom-only' : '')\"\n        (keyup.enter)=\"onenter.emit()\"\n      />\n    }\n  }\n</div>\n\n<ng-template #clearIcon>\n  <i\n    nz-icon\n    nzType=\"close-circle\"\n    nzTheme=\"twotone\"\n    nzTwotoneColor=\"#999\"\n    *ngIf=\"_ngModel\"\n    (click)=\"_ngModel = null; _onNgModelChange(); onclickClearIcon.emit()\"\n    style=\"cursor: pointer\"\n  ></i>\n</ng-template>\n", styles: ["::ng-deep .extend-input-wrapper.floating-label{position:relative;padding-top:14px}::ng-deep .extend-input-wrapper nz-form-item nz-form-label{position:absolute;top:12px;left:10px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:2;height:auto;line-height:normal;padding:0 4px}::ng-deep .extend-input-wrapper nz-form-item nz-form-label label{font-size:12px;color:#969696;font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .extend-input-wrapper .full-width{width:100%}.extend-input-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.extend-input-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label,.extend-input-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.extend-input-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.extend-input-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.extend-input-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.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: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "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: NzInputModule }, { kind: "directive", type: i6$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i6$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i6$1.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendInput, isStandalone: true, selector: "extend-input", inputs: { label: "label", floatingLabel: "floatingLabel", placeHolder: "placeHolder", labelAlign: "labelAlign", inputClass: "inputClass", labelSpan: "labelSpan", labelFlex: "labelFlex", inputFlex: "inputFlex", allowClear: "allowClear", disabled: "disabled", readOnly: "readOnly", required: "required", noBottom: "noBottom", selectModeType: "selectModeType", autocomplete: "autocomplete", autofocus: "autofocus", inputWidth: "inputWidth", inputHeight: "inputHeight", borderBottomOnly: "borderBottomOnly", displayInline: "displayInline", size: "size", lstItem: "lstItem", displayField: "displayField", valueField: "valueField", formData: "formData", controlName: "controlName", _ngModel: "_ngModel", isSubmited: "isSubmited" }, outputs: { _ngModelChange: "_ngModelChange", onclickClearIcon: "onclickClearIcon", onenter: "onenter" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n  class=\"extend-input-wrapper\"\r\n  [ngClass]=\"[floatingLabel && label ? 'floating-label' : '']\"\r\n  [ngStyle]=\"{ display: displayInline ? 'inline' : null }\"\r\n>\r\n  @if (controlName) {\r\n    <div [formGroup]=\"formData\">\r\n      <nz-form-item>\r\n        <nz-form-label\r\n          [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\r\n          [nzFlex]=\"labelFlex\"\r\n          [nzLabelAlign]=\"labelAlign\"\r\n          [nzRequired]=\"required\"\r\n          [nzFor]=\"controlName\"\r\n          nzNoColon\r\n          nzLabelWrap\r\n        >\r\n          {{ label }}\r\n        </nz-form-label>\r\n        <nz-form-control\r\n          [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\r\n          [nzFlex]=\"inputFlex\"\r\n          [ngClass]=\"{ 'full-width': floatingLabel }\"\r\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\r\n        >\r\n          <input\r\n            #inputElement\r\n            nz-input\r\n            [nzSize]=\"size\"\r\n            [id]=\"controlName\"\r\n            [name]=\"controlName\"\r\n            [formControlName]=\"controlName\"\r\n            [autocomplete]=\"autocomplete\"\r\n            [placeholder]=\"placeHolder\"\r\n            [ngClass]=\"inputClass\"\r\n            (keyup.enter)=\"onenter.emit()\"\r\n          />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n    </div>\r\n  } @else {\r\n    @if (label) {\r\n      <nz-form-item>\r\n        <nz-form-label\r\n          [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\r\n          [nzFlex]=\"labelFlex\"\r\n          [nzLabelAlign]=\"labelAlign\"\r\n          [nzRequired]=\"required\"\r\n          [nzFor]=\"controlName\"\r\n          nzNoColon\r\n          nzLabelWrap\r\n        >\r\n          {{ label }}\r\n        </nz-form-label>\r\n        <nz-form-control\r\n          [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\r\n          [nzFlex]=\"inputFlex\"\r\n          [ngClass]=\"{ 'full-width': floatingLabel }\"\r\n          [nzValidateStatus]=\"customValidateStatus\"\r\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\r\n        >\r\n          <nz-input-group [nzSize]=\"size\" [nzSuffix]=\"allowClear ? clearIcon : undefined\">\r\n            <input\r\n              #inputElement\r\n              nz-input\r\n              [nzSize]=\"size\"\r\n              [id]=\"controlName\"\r\n              [name]=\"controlName\"\r\n              [(ngModel)]=\"_ngModel\"\r\n              [autocomplete]=\"autocomplete\"\r\n              (ngModelChange)=\"_onNgModelChange()\"\r\n              [disabled]=\"disabled\"\r\n              [readOnly]=\"readOnly\"\r\n              [placeholder]=\"placeHolder\"\r\n              [ngClass]=\"inputClass\"\r\n              (keyup.enter)=\"onenter.emit()\"\r\n            />\r\n          </nz-input-group>\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n    } @else {\r\n      <input\r\n        #inputElement\r\n        nz-input\r\n        [nzSize]=\"size\"\r\n        [ngStyle]=\"{\r\n          width: inputWidth,\r\n          height: inputHeight,\r\n        }\"\r\n        [id]=\"controlName\"\r\n        [name]=\"controlName\"\r\n        [(ngModel)]=\"_ngModel\"\r\n        (ngModelChange)=\"_onNgModelChange()\"\r\n        [autocomplete]=\"autocomplete\"\r\n        [disabled]=\"disabled\"\r\n        [readOnly]=\"readOnly\"\r\n        [placeholder]=\"placeHolder\"\r\n        [ngClass]=\"inputClass + ' ' + (borderBottomOnly ? 'border-bottom-only' : '')\"\r\n        (keyup.enter)=\"onenter.emit()\"\r\n      />\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #clearIcon>\r\n  <i\r\n    nz-icon\r\n    nzType=\"close-circle\"\r\n    nzTheme=\"twotone\"\r\n    nzTwotoneColor=\"#999\"\r\n    *ngIf=\"_ngModel\"\r\n    (click)=\"_ngModel = null; _onNgModelChange(); onclickClearIcon.emit()\"\r\n    style=\"cursor: pointer\"\r\n  ></i>\r\n</ng-template>\r\n", styles: ["::ng-deep .extend-input-wrapper.floating-label{position:relative;padding-top:14px}::ng-deep .extend-input-wrapper nz-form-item nz-form-label{position:absolute;top:12px;left:10px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:2;height:auto;line-height:normal;padding:0 4px}::ng-deep .extend-input-wrapper nz-form-item nz-form-label label{font-size:12px;color:#969696;font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .extend-input-wrapper .full-width{width:100%}.extend-input-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.extend-input-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label,.extend-input-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.extend-input-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.extend-input-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.extend-input-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "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: NzInputModule }, { kind: "directive", type: i6$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i6$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i6$1.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendInput, decorators: [{
             type: Component,
-            args: [{ selector: 'extend-input', imports: [CommonModule, FormsModule, ReactiveFormsModule, TranslateModule, NzFormModule, NzInputModule, NzIconModule], template: "<div\n  class=\"extend-input-wrapper\"\n  [ngClass]=\"[floatingLabel && label ? 'floating-label' : '']\"\n  [ngStyle]=\"{ display: displayInline ? 'inline' : null }\"\n>\n  @if (controlName) {\n    <div [formGroup]=\"formData\">\n      <nz-form-item>\n        <nz-form-label\n          [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\n          [nzFlex]=\"labelFlex\"\n          [nzLabelAlign]=\"labelAlign\"\n          [nzRequired]=\"required\"\n          [nzFor]=\"controlName\"\n          nzNoColon\n          nzLabelWrap\n        >\n          {{ label }}\n        </nz-form-label>\n        <nz-form-control\n          [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\n          [nzFlex]=\"inputFlex\"\n          [ngClass]=\"{ 'full-width': floatingLabel }\"\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n        >\n          <input\n            #inputElement\n            nz-input\n            [nzSize]=\"size\"\n            [id]=\"controlName\"\n            [name]=\"controlName\"\n            [formControlName]=\"controlName\"\n            [autocomplete]=\"autocomplete\"\n            [placeholder]=\"placeHolder\"\n            [ngClass]=\"inputClass\"\n            (keyup.enter)=\"onenter.emit()\"\n          />\n        </nz-form-control>\n      </nz-form-item>\n    </div>\n  } @else {\n    @if (label) {\n      <nz-form-item>\n        <nz-form-label\n          [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\n          [nzFlex]=\"labelFlex\"\n          [nzLabelAlign]=\"labelAlign\"\n          [nzRequired]=\"required\"\n          [nzFor]=\"controlName\"\n          nzNoColon\n          nzLabelWrap\n        >\n          {{ label }}\n        </nz-form-label>\n        <nz-form-control\n          [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\n          [nzFlex]=\"inputFlex\"\n          [ngClass]=\"{ 'full-width': floatingLabel }\"\n          [nzValidateStatus]=\"customValidateStatus\"\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n        >\n          <nz-input-group [nzSize]=\"size\" [nzSuffix]=\"allowClear ? clearIcon : undefined\">\n            <input\n              #inputElement\n              nz-input\n              [nzSize]=\"size\"\n              [id]=\"controlName\"\n              [name]=\"controlName\"\n              [(ngModel)]=\"_ngModel\"\n              [autocomplete]=\"autocomplete\"\n              (ngModelChange)=\"_onNgModelChange()\"\n              [disabled]=\"disabled\"\n              [readOnly]=\"readOnly\"\n              [placeholder]=\"placeHolder\"\n              [ngClass]=\"inputClass\"\n              (keyup.enter)=\"onenter.emit()\"\n            />\n          </nz-input-group>\n        </nz-form-control>\n      </nz-form-item>\n    } @else {\n      <input\n        #inputElement\n        nz-input\n        [nzSize]=\"size\"\n        [ngStyle]=\"{\n          width: inputWidth,\n          height: inputHeight,\n        }\"\n        [id]=\"controlName\"\n        [name]=\"controlName\"\n        [(ngModel)]=\"_ngModel\"\n        (ngModelChange)=\"_onNgModelChange()\"\n        [autocomplete]=\"autocomplete\"\n        [disabled]=\"disabled\"\n        [readOnly]=\"readOnly\"\n        [placeholder]=\"placeHolder\"\n        [ngClass]=\"inputClass + ' ' + (borderBottomOnly ? 'border-bottom-only' : '')\"\n        (keyup.enter)=\"onenter.emit()\"\n      />\n    }\n  }\n</div>\n\n<ng-template #clearIcon>\n  <i\n    nz-icon\n    nzType=\"close-circle\"\n    nzTheme=\"twotone\"\n    nzTwotoneColor=\"#999\"\n    *ngIf=\"_ngModel\"\n    (click)=\"_ngModel = null; _onNgModelChange(); onclickClearIcon.emit()\"\n    style=\"cursor: pointer\"\n  ></i>\n</ng-template>\n", styles: ["::ng-deep .extend-input-wrapper.floating-label{position:relative;padding-top:14px}::ng-deep .extend-input-wrapper nz-form-item nz-form-label{position:absolute;top:12px;left:10px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:2;height:auto;line-height:normal;padding:0 4px}::ng-deep .extend-input-wrapper nz-form-item nz-form-label label{font-size:12px;color:#969696;font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .extend-input-wrapper .full-width{width:100%}.extend-input-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.extend-input-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label,.extend-input-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.extend-input-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.extend-input-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.extend-input-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}\n"] }]
+            args: [{ selector: 'extend-input', imports: [CommonModule, FormsModule, ReactiveFormsModule, TranslateModule, NzFormModule, NzInputModule, NzIconModule], template: "<div\r\n  class=\"extend-input-wrapper\"\r\n  [ngClass]=\"[floatingLabel && label ? 'floating-label' : '']\"\r\n  [ngStyle]=\"{ display: displayInline ? 'inline' : null }\"\r\n>\r\n  @if (controlName) {\r\n    <div [formGroup]=\"formData\">\r\n      <nz-form-item>\r\n        <nz-form-label\r\n          [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\r\n          [nzFlex]=\"labelFlex\"\r\n          [nzLabelAlign]=\"labelAlign\"\r\n          [nzRequired]=\"required\"\r\n          [nzFor]=\"controlName\"\r\n          nzNoColon\r\n          nzLabelWrap\r\n        >\r\n          {{ label }}\r\n        </nz-form-label>\r\n        <nz-form-control\r\n          [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\r\n          [nzFlex]=\"inputFlex\"\r\n          [ngClass]=\"{ 'full-width': floatingLabel }\"\r\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\r\n        >\r\n          <input\r\n            #inputElement\r\n            nz-input\r\n            [nzSize]=\"size\"\r\n            [id]=\"controlName\"\r\n            [name]=\"controlName\"\r\n            [formControlName]=\"controlName\"\r\n            [autocomplete]=\"autocomplete\"\r\n            [placeholder]=\"placeHolder\"\r\n            [ngClass]=\"inputClass\"\r\n            (keyup.enter)=\"onenter.emit()\"\r\n          />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n    </div>\r\n  } @else {\r\n    @if (label) {\r\n      <nz-form-item>\r\n        <nz-form-label\r\n          [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\r\n          [nzFlex]=\"labelFlex\"\r\n          [nzLabelAlign]=\"labelAlign\"\r\n          [nzRequired]=\"required\"\r\n          [nzFor]=\"controlName\"\r\n          nzNoColon\r\n          nzLabelWrap\r\n        >\r\n          {{ label }}\r\n        </nz-form-label>\r\n        <nz-form-control\r\n          [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\r\n          [nzFlex]=\"inputFlex\"\r\n          [ngClass]=\"{ 'full-width': floatingLabel }\"\r\n          [nzValidateStatus]=\"customValidateStatus\"\r\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\r\n        >\r\n          <nz-input-group [nzSize]=\"size\" [nzSuffix]=\"allowClear ? clearIcon : undefined\">\r\n            <input\r\n              #inputElement\r\n              nz-input\r\n              [nzSize]=\"size\"\r\n              [id]=\"controlName\"\r\n              [name]=\"controlName\"\r\n              [(ngModel)]=\"_ngModel\"\r\n              [autocomplete]=\"autocomplete\"\r\n              (ngModelChange)=\"_onNgModelChange()\"\r\n              [disabled]=\"disabled\"\r\n              [readOnly]=\"readOnly\"\r\n              [placeholder]=\"placeHolder\"\r\n              [ngClass]=\"inputClass\"\r\n              (keyup.enter)=\"onenter.emit()\"\r\n            />\r\n          </nz-input-group>\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n    } @else {\r\n      <input\r\n        #inputElement\r\n        nz-input\r\n        [nzSize]=\"size\"\r\n        [ngStyle]=\"{\r\n          width: inputWidth,\r\n          height: inputHeight,\r\n        }\"\r\n        [id]=\"controlName\"\r\n        [name]=\"controlName\"\r\n        [(ngModel)]=\"_ngModel\"\r\n        (ngModelChange)=\"_onNgModelChange()\"\r\n        [autocomplete]=\"autocomplete\"\r\n        [disabled]=\"disabled\"\r\n        [readOnly]=\"readOnly\"\r\n        [placeholder]=\"placeHolder\"\r\n        [ngClass]=\"inputClass + ' ' + (borderBottomOnly ? 'border-bottom-only' : '')\"\r\n        (keyup.enter)=\"onenter.emit()\"\r\n      />\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #clearIcon>\r\n  <i\r\n    nz-icon\r\n    nzType=\"close-circle\"\r\n    nzTheme=\"twotone\"\r\n    nzTwotoneColor=\"#999\"\r\n    *ngIf=\"_ngModel\"\r\n    (click)=\"_ngModel = null; _onNgModelChange(); onclickClearIcon.emit()\"\r\n    style=\"cursor: pointer\"\r\n  ></i>\r\n</ng-template>\r\n", styles: ["::ng-deep .extend-input-wrapper.floating-label{position:relative;padding-top:14px}::ng-deep .extend-input-wrapper nz-form-item nz-form-label{position:absolute;top:12px;left:10px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:2;height:auto;line-height:normal;padding:0 4px}::ng-deep .extend-input-wrapper nz-form-item nz-form-label label{font-size:12px;color:#969696;font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .extend-input-wrapper .full-width{width:100%}.extend-input-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.extend-input-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label,.extend-input-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.extend-input-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.extend-input-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.extend-input-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], floatingLabel: [{
@@ -3069,11 +3190,11 @@ class ExtendSelectComponent {
         return '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendSelectComponent, isStandalone: true, selector: "extend-select", inputs: { label: "label", floatingLabel: "floatingLabel", placeHolder: "placeHolder", labelAlign: "labelAlign", dropdownMatchSelectWidth: "dropdownMatchSelectWidth", labelSpan: "labelSpan", labelFlex: "labelFlex", disabled: "disabled", required: "required", noBottom: "noBottom", multiple: "multiple", showSelectAll: "showSelectAll", maxTagCount: "maxTagCount", inputWidth: "inputWidth", inputHeight: "inputHeight", borderBottomOnly: "borderBottomOnly", displayInline: "displayInline", size: "size", lstItem: "lstItem", displayField: "displayField", displayFields: "displayFields", valueField: "valueField", formData: "formData", controlName: "controlName", _ngModel: "_ngModel", isSubmited: "isSubmited" }, outputs: { _ngModelChange: "_ngModelChange", itemChange: "itemChange", onFocus: "onFocus" }, host: { properties: { "style.--custom-select-height": "this.cssHeight" } }, ngImport: i0, template: "<div\n  class=\"extend-select-wrapper\"\n  [ngClass]=\"[floatingLabel && label ? 'floating-label' : '']\"\n  [ngStyle]=\"{ display: displayInline ? 'inline' : null }\"\n>\n  @if (!multiple) {\n    @if (controlName) {\n      <div [formGroup]=\"formData\">\n        <nz-form-item>\n          <nz-form-label\n            [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\n            [nzFlex]=\"labelFlex\"\n            [nzLabelAlign]=\"labelAlign\"\n            [nzRequired]=\"required\"\n            nzNoColon\n            [nzLabelWrap]=\"floatingLabel ? false : true\"\n          >\n            {{ label }}\n          </nz-form-label>\n          <nz-form-control\n            [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\n            [ngClass]=\"{ 'full-width': floatingLabel }\"\n            [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n          >\n            <nz-select\n              nzShowSearch\n              nzAllowClear\n              [nzSize]=\"size\"\n              [nzAllowClear]=\"true\"\n              [nzShowSearch]=\"true\"\n              [nzPlaceHolder]=\"placeHolder\"\n              [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\n              [formControlName]=\"controlName\"\n              (nzFocus)=\"onFocus.emit()\"\n            >\n              @if (showSelectAll) {\n                <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n              }\n              @for (item of lstItem; track $index) {\n                <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n              }\n            </nz-select>\n          </nz-form-control>\n        </nz-form-item>\n      </div>\n    } @else {\n      @if (label) {\n        <nz-form-item>\n          <nz-form-label\n            [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\n            [nzFlex]=\"labelFlex\"\n            [nzLabelAlign]=\"labelAlign\"\n            [nzRequired]=\"required\"\n            nzNoColon\n            [nzLabelWrap]=\"floatingLabel ? false : true\"\n          >\n            {{ label }}\n          </nz-form-label>\n          <nz-form-control\n            [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\n            [ngClass]=\"{ 'full-width': floatingLabel }\"\n            [nzValidateStatus]=\"customValidateStatus\"\n            [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n          >\n            <nz-select\n              nzShowSearch\n              nzAllowClear\n              [nzSize]=\"size\"\n              [nzAllowClear]=\"true\"\n              [nzShowSearch]=\"true\"\n              [nzPlaceHolder]=\"placeHolder\"\n              [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\n              [ngModel]=\"_ngModel\"\n              [disabled]=\"disabled\"\n              (ngModelChange)=\"onSelectChange($event)\"\n              (nzFocus)=\"onFocus.emit()\"\n            >\n              @if (showSelectAll) {\n                <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n              }\n              @for (item of lstItem; track $index) {\n                <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n              }\n            </nz-select>\n          </nz-form-control>\n        </nz-form-item>\n      } @else {\n        <nz-select\n          class=\"full-width\"\n          nzShowSearch\n          nzAllowClear\n          [nzSize]=\"size\"\n          [nzPlaceHolder]=\"placeHolder\"\n          [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\n          [ngModel]=\"_ngModel\"\n          (ngModelChange)=\"onSelectChange($event)\"\n          (nzFocus)=\"onFocus.emit()\"\n          [disabled]=\"disabled\"\n          [ngStyle]=\"{\n            width: inputWidth,\n            height: inputHeight,\n          }\"\n          [ngClass]=\"{\n            'border-bottom-only': borderBottomOnly,\n            'custom-height-select': inputHeight ? true : false,\n          }\"\n        >\n          @if (showSelectAll) {\n            <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n          }\n          @for (item of lstItem; track $index) {\n            <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n          }\n        </nz-select>\n      }\n    }\n  } @else {\n    @if (controlName) {\n      <div [formGroup]=\"formData\">\n        <nz-form-item>\n          <nz-form-label\n            [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\n            [nzFlex]=\"labelFlex\"\n            [nzLabelAlign]=\"labelAlign\"\n            [nzRequired]=\"required\"\n            nzNoColon\n            [nzLabelWrap]=\"floatingLabel ? false : true\"\n          >\n            {{ label }}\n          </nz-form-label>\n          <nz-form-control\n            [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\n            [ngClass]=\"{ 'full-width': floatingLabel }\"\n            [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n          >\n            <nz-select\n              nzShowSearch\n              nzAllowClear\n              [nzSize]=\"size\"\n              [nzMode]=\"'multiple'\"\n              [nzMaxMultipleCount]=\"lstItem.length\"\n              [nzMaxTagCount]=\"maxTagCount\"\n              [nzAllowClear]=\"true\"\n              [nzShowSearch]=\"true\"\n              [nzPlaceHolder]=\"placeHolder\"\n              [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\n              [formControlName]=\"controlName\"\n              (nzFocus)=\"onFocus.emit()\"\n            >\n              @if (showSelectAll) {\n                <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n              }\n              @for (item of lstItem; track $index) {\n                <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n              }\n            </nz-select>\n          </nz-form-control>\n        </nz-form-item>\n      </div>\n    } @else {\n      @if (label) {\n        <nz-form-item>\n          <nz-form-label\n            [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\n            [nzFlex]=\"labelFlex\"\n            [nzLabelAlign]=\"labelAlign\"\n            [nzRequired]=\"required\"\n            nzNoColon\n            [nzLabelWrap]=\"floatingLabel ? false : true\"\n          >\n            {{ label }}\n          </nz-form-label>\n          <nz-form-control\n            [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\n            [ngClass]=\"{ 'full-width': floatingLabel }\"\n            [nzValidateStatus]=\"customValidateStatus\"\n            [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n          >\n            <nz-select\n              nzShowSearch\n              nzAllowClear\n              [nzSize]=\"size\"\n              [nzMode]=\"'multiple'\"\n              [nzMaxMultipleCount]=\"lstItem.length\"\n              [nzMaxTagCount]=\"maxTagCount\"\n              [nzAllowClear]=\"true\"\n              [nzShowSearch]=\"true\"\n              [nzPlaceHolder]=\"placeHolder\"\n              [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\n              [ngModel]=\"_ngModel\"\n              [disabled]=\"disabled\"\n              (ngModelChange)=\"onSelectChange($event)\"\n              (nzFocus)=\"onFocus.emit()\"\n            >\n              @if (showSelectAll) {\n                <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n              }\n              @for (item of lstItem; track $index) {\n                <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n              }\n            </nz-select>\n          </nz-form-control>\n        </nz-form-item>\n      } @else {\n        <nz-select\n          class=\"full-width\"\n          nzShowSearch\n          nzAllowClear\n          [nzSize]=\"size\"\n          [nzPlaceHolder]=\"placeHolder\"\n          [nzMode]=\"'multiple'\"\n          [nzMaxMultipleCount]=\"lstItem.length\"\n          [nzMaxTagCount]=\"maxTagCount\"\n          [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\n          [ngModel]=\"_ngModel\"\n          [disabled]=\"disabled\"\n          (ngModelChange)=\"onSelectChange($event)\"\n          (nzFocus)=\"onFocus.emit()\"\n        >\n          @if (showSelectAll) {\n            <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n          }\n          @for (item of lstItem; track $index) {\n            <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n          }\n        </nz-select>\n      }\n    }\n  }\n</div>\n", styles: ["::ng-deep .extend-select-wrapper.floating-label{position:relative;padding-top:14px}::ng-deep .extend-select-wrapper.floating-label nz-form-item nz-form-label{position:absolute;top:12px;left:10px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:1;height:auto;line-height:normal;padding:0 4px}::ng-deep .extend-select-wrapper.floating-label nz-form-item nz-form-label label{font-size:12px;color:#969696;font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .extend-select-wrapper .full-width{width:100%}.extend-select-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.extend-select-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label,.extend-select-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.extend-select-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.extend-select-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.extend-select-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.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: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i6$2.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i6$2.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus"], exportAs: ["nzSelect"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendSelectComponent, isStandalone: true, selector: "extend-select", inputs: { label: "label", floatingLabel: "floatingLabel", placeHolder: "placeHolder", labelAlign: "labelAlign", dropdownMatchSelectWidth: "dropdownMatchSelectWidth", labelSpan: "labelSpan", labelFlex: "labelFlex", disabled: "disabled", required: "required", noBottom: "noBottom", multiple: "multiple", showSelectAll: "showSelectAll", maxTagCount: "maxTagCount", inputWidth: "inputWidth", inputHeight: "inputHeight", borderBottomOnly: "borderBottomOnly", displayInline: "displayInline", size: "size", lstItem: "lstItem", displayField: "displayField", displayFields: "displayFields", valueField: "valueField", formData: "formData", controlName: "controlName", _ngModel: "_ngModel", isSubmited: "isSubmited" }, outputs: { _ngModelChange: "_ngModelChange", itemChange: "itemChange", onFocus: "onFocus" }, host: { properties: { "style.--custom-select-height": "this.cssHeight" } }, ngImport: i0, template: "<div\r\n  class=\"extend-select-wrapper\"\r\n  [ngClass]=\"[floatingLabel && label ? 'floating-label' : '']\"\r\n  [ngStyle]=\"{ display: displayInline ? 'inline' : null }\"\r\n>\r\n  @if (!multiple) {\r\n    @if (controlName) {\r\n      <div [formGroup]=\"formData\">\r\n        <nz-form-item>\r\n          <nz-form-label\r\n            [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\r\n            [nzFlex]=\"labelFlex\"\r\n            [nzLabelAlign]=\"labelAlign\"\r\n            [nzRequired]=\"required\"\r\n            nzNoColon\r\n            [nzLabelWrap]=\"floatingLabel ? false : true\"\r\n          >\r\n            {{ label }}\r\n          </nz-form-label>\r\n          <nz-form-control\r\n            [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\r\n            [ngClass]=\"{ 'full-width': floatingLabel }\"\r\n            [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\r\n          >\r\n            <nz-select\r\n              nzShowSearch\r\n              nzAllowClear\r\n              [nzSize]=\"size\"\r\n              [nzAllowClear]=\"true\"\r\n              [nzShowSearch]=\"true\"\r\n              [nzPlaceHolder]=\"placeHolder\"\r\n              [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\r\n              [formControlName]=\"controlName\"\r\n              (nzFocus)=\"onFocus.emit()\"\r\n            >\r\n              @if (showSelectAll) {\r\n                <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\r\n              }\r\n              @for (item of lstItem; track $index) {\r\n                <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\r\n              }\r\n            </nz-select>\r\n          </nz-form-control>\r\n        </nz-form-item>\r\n      </div>\r\n    } @else {\r\n      @if (label) {\r\n        <nz-form-item>\r\n          <nz-form-label\r\n            [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\r\n            [nzFlex]=\"labelFlex\"\r\n            [nzLabelAlign]=\"labelAlign\"\r\n            [nzRequired]=\"required\"\r\n            nzNoColon\r\n            [nzLabelWrap]=\"floatingLabel ? false : true\"\r\n          >\r\n            {{ label }}\r\n          </nz-form-label>\r\n          <nz-form-control\r\n            [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\r\n            [ngClass]=\"{ 'full-width': floatingLabel }\"\r\n            [nzValidateStatus]=\"customValidateStatus\"\r\n            [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\r\n          >\r\n            <nz-select\r\n              nzShowSearch\r\n              nzAllowClear\r\n              [nzSize]=\"size\"\r\n              [nzAllowClear]=\"true\"\r\n              [nzShowSearch]=\"true\"\r\n              [nzPlaceHolder]=\"placeHolder\"\r\n              [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\r\n              [ngModel]=\"_ngModel\"\r\n              [disabled]=\"disabled\"\r\n              (ngModelChange)=\"onSelectChange($event)\"\r\n              (nzFocus)=\"onFocus.emit()\"\r\n            >\r\n              @if (showSelectAll) {\r\n                <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\r\n              }\r\n              @for (item of lstItem; track $index) {\r\n                <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\r\n              }\r\n            </nz-select>\r\n          </nz-form-control>\r\n        </nz-form-item>\r\n      } @else {\r\n        <nz-select\r\n          class=\"full-width\"\r\n          nzShowSearch\r\n          nzAllowClear\r\n          [nzSize]=\"size\"\r\n          [nzPlaceHolder]=\"placeHolder\"\r\n          [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\r\n          [ngModel]=\"_ngModel\"\r\n          (ngModelChange)=\"onSelectChange($event)\"\r\n          (nzFocus)=\"onFocus.emit()\"\r\n          [disabled]=\"disabled\"\r\n          [ngStyle]=\"{\r\n            width: inputWidth,\r\n            height: inputHeight,\r\n          }\"\r\n          [ngClass]=\"{\r\n            'border-bottom-only': borderBottomOnly,\r\n            'custom-height-select': inputHeight ? true : false,\r\n          }\"\r\n        >\r\n          @if (showSelectAll) {\r\n            <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\r\n          }\r\n          @for (item of lstItem; track $index) {\r\n            <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\r\n          }\r\n        </nz-select>\r\n      }\r\n    }\r\n  } @else {\r\n    @if (controlName) {\r\n      <div [formGroup]=\"formData\">\r\n        <nz-form-item>\r\n          <nz-form-label\r\n            [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\r\n            [nzFlex]=\"labelFlex\"\r\n            [nzLabelAlign]=\"labelAlign\"\r\n            [nzRequired]=\"required\"\r\n            nzNoColon\r\n            [nzLabelWrap]=\"floatingLabel ? false : true\"\r\n          >\r\n            {{ label }}\r\n          </nz-form-label>\r\n          <nz-form-control\r\n            [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\r\n            [ngClass]=\"{ 'full-width': floatingLabel }\"\r\n            [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\r\n          >\r\n            <nz-select\r\n              nzShowSearch\r\n              nzAllowClear\r\n              [nzSize]=\"size\"\r\n              [nzMode]=\"'multiple'\"\r\n              [nzMaxMultipleCount]=\"lstItem.length\"\r\n              [nzMaxTagCount]=\"maxTagCount\"\r\n              [nzAllowClear]=\"true\"\r\n              [nzShowSearch]=\"true\"\r\n              [nzPlaceHolder]=\"placeHolder\"\r\n              [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\r\n              [formControlName]=\"controlName\"\r\n              (nzFocus)=\"onFocus.emit()\"\r\n            >\r\n              @if (showSelectAll) {\r\n                <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\r\n              }\r\n              @for (item of lstItem; track $index) {\r\n                <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\r\n              }\r\n            </nz-select>\r\n          </nz-form-control>\r\n        </nz-form-item>\r\n      </div>\r\n    } @else {\r\n      @if (label) {\r\n        <nz-form-item>\r\n          <nz-form-label\r\n            [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\r\n            [nzFlex]=\"labelFlex\"\r\n            [nzLabelAlign]=\"labelAlign\"\r\n            [nzRequired]=\"required\"\r\n            nzNoColon\r\n            [nzLabelWrap]=\"floatingLabel ? false : true\"\r\n          >\r\n            {{ label }}\r\n          </nz-form-label>\r\n          <nz-form-control\r\n            [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\r\n            [ngClass]=\"{ 'full-width': floatingLabel }\"\r\n            [nzValidateStatus]=\"customValidateStatus\"\r\n            [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\r\n          >\r\n            <nz-select\r\n              nzShowSearch\r\n              nzAllowClear\r\n              [nzSize]=\"size\"\r\n              [nzMode]=\"'multiple'\"\r\n              [nzMaxMultipleCount]=\"lstItem.length\"\r\n              [nzMaxTagCount]=\"maxTagCount\"\r\n              [nzAllowClear]=\"true\"\r\n              [nzShowSearch]=\"true\"\r\n              [nzPlaceHolder]=\"placeHolder\"\r\n              [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\r\n              [ngModel]=\"_ngModel\"\r\n              [disabled]=\"disabled\"\r\n              (ngModelChange)=\"onSelectChange($event)\"\r\n              (nzFocus)=\"onFocus.emit()\"\r\n            >\r\n              @if (showSelectAll) {\r\n                <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\r\n              }\r\n              @for (item of lstItem; track $index) {\r\n                <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\r\n              }\r\n            </nz-select>\r\n          </nz-form-control>\r\n        </nz-form-item>\r\n      } @else {\r\n        <nz-select\r\n          class=\"full-width\"\r\n          nzShowSearch\r\n          nzAllowClear\r\n          [nzSize]=\"size\"\r\n          [nzPlaceHolder]=\"placeHolder\"\r\n          [nzMode]=\"'multiple'\"\r\n          [nzMaxMultipleCount]=\"lstItem.length\"\r\n          [nzMaxTagCount]=\"maxTagCount\"\r\n          [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\r\n          [ngModel]=\"_ngModel\"\r\n          [disabled]=\"disabled\"\r\n          (ngModelChange)=\"onSelectChange($event)\"\r\n          (nzFocus)=\"onFocus.emit()\"\r\n        >\r\n          @if (showSelectAll) {\r\n            <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\r\n          }\r\n          @for (item of lstItem; track $index) {\r\n            <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\r\n          }\r\n        </nz-select>\r\n      }\r\n    }\r\n  }\r\n</div>\r\n", styles: ["::ng-deep .extend-select-wrapper.floating-label{position:relative;padding-top:14px}::ng-deep .extend-select-wrapper.floating-label nz-form-item nz-form-label{position:absolute;top:12px;left:10px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:1;height:auto;line-height:normal;padding:0 4px}::ng-deep .extend-select-wrapper.floating-label nz-form-item nz-form-label label{font-size:12px;color:#969696;font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .extend-select-wrapper .full-width{width:100%}.extend-select-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.extend-select-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label,.extend-select-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.extend-select-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.extend-select-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.extend-select-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i6$2.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i6$2.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus"], exportAs: ["nzSelect"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'extend-select', imports: [CommonModule, FormsModule, ReactiveFormsModule, TranslateModule, NzFormModule, NzSelectModule], template: "<div\n  class=\"extend-select-wrapper\"\n  [ngClass]=\"[floatingLabel && label ? 'floating-label' : '']\"\n  [ngStyle]=\"{ display: displayInline ? 'inline' : null }\"\n>\n  @if (!multiple) {\n    @if (controlName) {\n      <div [formGroup]=\"formData\">\n        <nz-form-item>\n          <nz-form-label\n            [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\n            [nzFlex]=\"labelFlex\"\n            [nzLabelAlign]=\"labelAlign\"\n            [nzRequired]=\"required\"\n            nzNoColon\n            [nzLabelWrap]=\"floatingLabel ? false : true\"\n          >\n            {{ label }}\n          </nz-form-label>\n          <nz-form-control\n            [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\n            [ngClass]=\"{ 'full-width': floatingLabel }\"\n            [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n          >\n            <nz-select\n              nzShowSearch\n              nzAllowClear\n              [nzSize]=\"size\"\n              [nzAllowClear]=\"true\"\n              [nzShowSearch]=\"true\"\n              [nzPlaceHolder]=\"placeHolder\"\n              [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\n              [formControlName]=\"controlName\"\n              (nzFocus)=\"onFocus.emit()\"\n            >\n              @if (showSelectAll) {\n                <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n              }\n              @for (item of lstItem; track $index) {\n                <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n              }\n            </nz-select>\n          </nz-form-control>\n        </nz-form-item>\n      </div>\n    } @else {\n      @if (label) {\n        <nz-form-item>\n          <nz-form-label\n            [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\n            [nzFlex]=\"labelFlex\"\n            [nzLabelAlign]=\"labelAlign\"\n            [nzRequired]=\"required\"\n            nzNoColon\n            [nzLabelWrap]=\"floatingLabel ? false : true\"\n          >\n            {{ label }}\n          </nz-form-label>\n          <nz-form-control\n            [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\n            [ngClass]=\"{ 'full-width': floatingLabel }\"\n            [nzValidateStatus]=\"customValidateStatus\"\n            [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n          >\n            <nz-select\n              nzShowSearch\n              nzAllowClear\n              [nzSize]=\"size\"\n              [nzAllowClear]=\"true\"\n              [nzShowSearch]=\"true\"\n              [nzPlaceHolder]=\"placeHolder\"\n              [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\n              [ngModel]=\"_ngModel\"\n              [disabled]=\"disabled\"\n              (ngModelChange)=\"onSelectChange($event)\"\n              (nzFocus)=\"onFocus.emit()\"\n            >\n              @if (showSelectAll) {\n                <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n              }\n              @for (item of lstItem; track $index) {\n                <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n              }\n            </nz-select>\n          </nz-form-control>\n        </nz-form-item>\n      } @else {\n        <nz-select\n          class=\"full-width\"\n          nzShowSearch\n          nzAllowClear\n          [nzSize]=\"size\"\n          [nzPlaceHolder]=\"placeHolder\"\n          [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\n          [ngModel]=\"_ngModel\"\n          (ngModelChange)=\"onSelectChange($event)\"\n          (nzFocus)=\"onFocus.emit()\"\n          [disabled]=\"disabled\"\n          [ngStyle]=\"{\n            width: inputWidth,\n            height: inputHeight,\n          }\"\n          [ngClass]=\"{\n            'border-bottom-only': borderBottomOnly,\n            'custom-height-select': inputHeight ? true : false,\n          }\"\n        >\n          @if (showSelectAll) {\n            <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n          }\n          @for (item of lstItem; track $index) {\n            <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n          }\n        </nz-select>\n      }\n    }\n  } @else {\n    @if (controlName) {\n      <div [formGroup]=\"formData\">\n        <nz-form-item>\n          <nz-form-label\n            [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\n            [nzFlex]=\"labelFlex\"\n            [nzLabelAlign]=\"labelAlign\"\n            [nzRequired]=\"required\"\n            nzNoColon\n            [nzLabelWrap]=\"floatingLabel ? false : true\"\n          >\n            {{ label }}\n          </nz-form-label>\n          <nz-form-control\n            [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\n            [ngClass]=\"{ 'full-width': floatingLabel }\"\n            [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n          >\n            <nz-select\n              nzShowSearch\n              nzAllowClear\n              [nzSize]=\"size\"\n              [nzMode]=\"'multiple'\"\n              [nzMaxMultipleCount]=\"lstItem.length\"\n              [nzMaxTagCount]=\"maxTagCount\"\n              [nzAllowClear]=\"true\"\n              [nzShowSearch]=\"true\"\n              [nzPlaceHolder]=\"placeHolder\"\n              [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\n              [formControlName]=\"controlName\"\n              (nzFocus)=\"onFocus.emit()\"\n            >\n              @if (showSelectAll) {\n                <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n              }\n              @for (item of lstItem; track $index) {\n                <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n              }\n            </nz-select>\n          </nz-form-control>\n        </nz-form-item>\n      </div>\n    } @else {\n      @if (label) {\n        <nz-form-item>\n          <nz-form-label\n            [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\n            [nzFlex]=\"labelFlex\"\n            [nzLabelAlign]=\"labelAlign\"\n            [nzRequired]=\"required\"\n            nzNoColon\n            [nzLabelWrap]=\"floatingLabel ? false : true\"\n          >\n            {{ label }}\n          </nz-form-label>\n          <nz-form-control\n            [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\n            [ngClass]=\"{ 'full-width': floatingLabel }\"\n            [nzValidateStatus]=\"customValidateStatus\"\n            [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n          >\n            <nz-select\n              nzShowSearch\n              nzAllowClear\n              [nzSize]=\"size\"\n              [nzMode]=\"'multiple'\"\n              [nzMaxMultipleCount]=\"lstItem.length\"\n              [nzMaxTagCount]=\"maxTagCount\"\n              [nzAllowClear]=\"true\"\n              [nzShowSearch]=\"true\"\n              [nzPlaceHolder]=\"placeHolder\"\n              [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\n              [ngModel]=\"_ngModel\"\n              [disabled]=\"disabled\"\n              (ngModelChange)=\"onSelectChange($event)\"\n              (nzFocus)=\"onFocus.emit()\"\n            >\n              @if (showSelectAll) {\n                <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n              }\n              @for (item of lstItem; track $index) {\n                <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n              }\n            </nz-select>\n          </nz-form-control>\n        </nz-form-item>\n      } @else {\n        <nz-select\n          class=\"full-width\"\n          nzShowSearch\n          nzAllowClear\n          [nzSize]=\"size\"\n          [nzPlaceHolder]=\"placeHolder\"\n          [nzMode]=\"'multiple'\"\n          [nzMaxMultipleCount]=\"lstItem.length\"\n          [nzMaxTagCount]=\"maxTagCount\"\n          [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\n          [ngModel]=\"_ngModel\"\n          [disabled]=\"disabled\"\n          (ngModelChange)=\"onSelectChange($event)\"\n          (nzFocus)=\"onFocus.emit()\"\n        >\n          @if (showSelectAll) {\n            <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n          }\n          @for (item of lstItem; track $index) {\n            <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n          }\n        </nz-select>\n      }\n    }\n  }\n</div>\n", styles: ["::ng-deep .extend-select-wrapper.floating-label{position:relative;padding-top:14px}::ng-deep .extend-select-wrapper.floating-label nz-form-item nz-form-label{position:absolute;top:12px;left:10px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:1;height:auto;line-height:normal;padding:0 4px}::ng-deep .extend-select-wrapper.floating-label nz-form-item nz-form-label label{font-size:12px;color:#969696;font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .extend-select-wrapper .full-width{width:100%}.extend-select-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.extend-select-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label,.extend-select-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.extend-select-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.extend-select-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.extend-select-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}\n"] }]
+            args: [{ selector: 'extend-select', imports: [CommonModule, FormsModule, ReactiveFormsModule, TranslateModule, NzFormModule, NzSelectModule], template: "<div\r\n  class=\"extend-select-wrapper\"\r\n  [ngClass]=\"[floatingLabel && label ? 'floating-label' : '']\"\r\n  [ngStyle]=\"{ display: displayInline ? 'inline' : null }\"\r\n>\r\n  @if (!multiple) {\r\n    @if (controlName) {\r\n      <div [formGroup]=\"formData\">\r\n        <nz-form-item>\r\n          <nz-form-label\r\n            [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\r\n            [nzFlex]=\"labelFlex\"\r\n            [nzLabelAlign]=\"labelAlign\"\r\n            [nzRequired]=\"required\"\r\n            nzNoColon\r\n            [nzLabelWrap]=\"floatingLabel ? false : true\"\r\n          >\r\n            {{ label }}\r\n          </nz-form-label>\r\n          <nz-form-control\r\n            [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\r\n            [ngClass]=\"{ 'full-width': floatingLabel }\"\r\n            [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\r\n          >\r\n            <nz-select\r\n              nzShowSearch\r\n              nzAllowClear\r\n              [nzSize]=\"size\"\r\n              [nzAllowClear]=\"true\"\r\n              [nzShowSearch]=\"true\"\r\n              [nzPlaceHolder]=\"placeHolder\"\r\n              [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\r\n              [formControlName]=\"controlName\"\r\n              (nzFocus)=\"onFocus.emit()\"\r\n            >\r\n              @if (showSelectAll) {\r\n                <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\r\n              }\r\n              @for (item of lstItem; track $index) {\r\n                <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\r\n              }\r\n            </nz-select>\r\n          </nz-form-control>\r\n        </nz-form-item>\r\n      </div>\r\n    } @else {\r\n      @if (label) {\r\n        <nz-form-item>\r\n          <nz-form-label\r\n            [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\r\n            [nzFlex]=\"labelFlex\"\r\n            [nzLabelAlign]=\"labelAlign\"\r\n            [nzRequired]=\"required\"\r\n            nzNoColon\r\n            [nzLabelWrap]=\"floatingLabel ? false : true\"\r\n          >\r\n            {{ label }}\r\n          </nz-form-label>\r\n          <nz-form-control\r\n            [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\r\n            [ngClass]=\"{ 'full-width': floatingLabel }\"\r\n            [nzValidateStatus]=\"customValidateStatus\"\r\n            [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\r\n          >\r\n            <nz-select\r\n              nzShowSearch\r\n              nzAllowClear\r\n              [nzSize]=\"size\"\r\n              [nzAllowClear]=\"true\"\r\n              [nzShowSearch]=\"true\"\r\n              [nzPlaceHolder]=\"placeHolder\"\r\n              [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\r\n              [ngModel]=\"_ngModel\"\r\n              [disabled]=\"disabled\"\r\n              (ngModelChange)=\"onSelectChange($event)\"\r\n              (nzFocus)=\"onFocus.emit()\"\r\n            >\r\n              @if (showSelectAll) {\r\n                <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\r\n              }\r\n              @for (item of lstItem; track $index) {\r\n                <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\r\n              }\r\n            </nz-select>\r\n          </nz-form-control>\r\n        </nz-form-item>\r\n      } @else {\r\n        <nz-select\r\n          class=\"full-width\"\r\n          nzShowSearch\r\n          nzAllowClear\r\n          [nzSize]=\"size\"\r\n          [nzPlaceHolder]=\"placeHolder\"\r\n          [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\r\n          [ngModel]=\"_ngModel\"\r\n          (ngModelChange)=\"onSelectChange($event)\"\r\n          (nzFocus)=\"onFocus.emit()\"\r\n          [disabled]=\"disabled\"\r\n          [ngStyle]=\"{\r\n            width: inputWidth,\r\n            height: inputHeight,\r\n          }\"\r\n          [ngClass]=\"{\r\n            'border-bottom-only': borderBottomOnly,\r\n            'custom-height-select': inputHeight ? true : false,\r\n          }\"\r\n        >\r\n          @if (showSelectAll) {\r\n            <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\r\n          }\r\n          @for (item of lstItem; track $index) {\r\n            <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\r\n          }\r\n        </nz-select>\r\n      }\r\n    }\r\n  } @else {\r\n    @if (controlName) {\r\n      <div [formGroup]=\"formData\">\r\n        <nz-form-item>\r\n          <nz-form-label\r\n            [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\r\n            [nzFlex]=\"labelFlex\"\r\n            [nzLabelAlign]=\"labelAlign\"\r\n            [nzRequired]=\"required\"\r\n            nzNoColon\r\n            [nzLabelWrap]=\"floatingLabel ? false : true\"\r\n          >\r\n            {{ label }}\r\n          </nz-form-label>\r\n          <nz-form-control\r\n            [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\r\n            [ngClass]=\"{ 'full-width': floatingLabel }\"\r\n            [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\r\n          >\r\n            <nz-select\r\n              nzShowSearch\r\n              nzAllowClear\r\n              [nzSize]=\"size\"\r\n              [nzMode]=\"'multiple'\"\r\n              [nzMaxMultipleCount]=\"lstItem.length\"\r\n              [nzMaxTagCount]=\"maxTagCount\"\r\n              [nzAllowClear]=\"true\"\r\n              [nzShowSearch]=\"true\"\r\n              [nzPlaceHolder]=\"placeHolder\"\r\n              [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\r\n              [formControlName]=\"controlName\"\r\n              (nzFocus)=\"onFocus.emit()\"\r\n            >\r\n              @if (showSelectAll) {\r\n                <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\r\n              }\r\n              @for (item of lstItem; track $index) {\r\n                <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\r\n              }\r\n            </nz-select>\r\n          </nz-form-control>\r\n        </nz-form-item>\r\n      </div>\r\n    } @else {\r\n      @if (label) {\r\n        <nz-form-item>\r\n          <nz-form-label\r\n            [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\r\n            [nzFlex]=\"labelFlex\"\r\n            [nzLabelAlign]=\"labelAlign\"\r\n            [nzRequired]=\"required\"\r\n            nzNoColon\r\n            [nzLabelWrap]=\"floatingLabel ? false : true\"\r\n          >\r\n            {{ label }}\r\n          </nz-form-label>\r\n          <nz-form-control\r\n            [nzSpan]=\"floatingLabel || labelFlex ? null : 24 - labelSpan\"\r\n            [ngClass]=\"{ 'full-width': floatingLabel }\"\r\n            [nzValidateStatus]=\"customValidateStatus\"\r\n            [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\r\n          >\r\n            <nz-select\r\n              nzShowSearch\r\n              nzAllowClear\r\n              [nzSize]=\"size\"\r\n              [nzMode]=\"'multiple'\"\r\n              [nzMaxMultipleCount]=\"lstItem.length\"\r\n              [nzMaxTagCount]=\"maxTagCount\"\r\n              [nzAllowClear]=\"true\"\r\n              [nzShowSearch]=\"true\"\r\n              [nzPlaceHolder]=\"placeHolder\"\r\n              [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\r\n              [ngModel]=\"_ngModel\"\r\n              [disabled]=\"disabled\"\r\n              (ngModelChange)=\"onSelectChange($event)\"\r\n              (nzFocus)=\"onFocus.emit()\"\r\n            >\r\n              @if (showSelectAll) {\r\n                <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\r\n              }\r\n              @for (item of lstItem; track $index) {\r\n                <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\r\n              }\r\n            </nz-select>\r\n          </nz-form-control>\r\n        </nz-form-item>\r\n      } @else {\r\n        <nz-select\r\n          class=\"full-width\"\r\n          nzShowSearch\r\n          nzAllowClear\r\n          [nzSize]=\"size\"\r\n          [nzPlaceHolder]=\"placeHolder\"\r\n          [nzMode]=\"'multiple'\"\r\n          [nzMaxMultipleCount]=\"lstItem.length\"\r\n          [nzMaxTagCount]=\"maxTagCount\"\r\n          [nzDropdownMatchSelectWidth]=\"dropdownMatchSelectWidth\"\r\n          [ngModel]=\"_ngModel\"\r\n          [disabled]=\"disabled\"\r\n          (ngModelChange)=\"onSelectChange($event)\"\r\n          (nzFocus)=\"onFocus.emit()\"\r\n        >\r\n          @if (showSelectAll) {\r\n            <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\r\n          }\r\n          @for (item of lstItem; track $index) {\r\n            <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\r\n          }\r\n        </nz-select>\r\n      }\r\n    }\r\n  }\r\n</div>\r\n", styles: ["::ng-deep .extend-select-wrapper.floating-label{position:relative;padding-top:14px}::ng-deep .extend-select-wrapper.floating-label nz-form-item nz-form-label{position:absolute;top:12px;left:10px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:1;height:auto;line-height:normal;padding:0 4px}::ng-deep .extend-select-wrapper.floating-label nz-form-item nz-form-label label{font-size:12px;color:#969696;font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .extend-select-wrapper .full-width{width:100%}.extend-select-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.extend-select-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label,.extend-select-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.extend-select-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.extend-select-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.extend-select-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], floatingLabel: [{
@@ -3202,7 +3323,7 @@ class ExtendTextArea {
         return '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendTextArea, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendTextArea, isStandalone: true, selector: "extend-textarea", inputs: { label: "label", placeHolder: "placeHolder", labelAlign: "labelAlign", floatingLabel: "floatingLabel", displayInline: "displayInline", labelSpan: "labelSpan", labelFlex: "labelFlex", inputFlex: "inputFlex", disabled: "disabled", required: "required", noBottom: "noBottom", selectModeType: "selectModeType", inputClass: "inputClass", size: "size", isSubmited: "isSubmited", minRows: "minRows", maxRows: "maxRows", lstItem: "lstItem", displayField: "displayField", valueField: "valueField", formData: "formData", controlName: "controlName", _ngModel: "_ngModel", isTouched: "isTouched", inputErrorMessage: "inputErrorMessage", errorMessages: "errorMessages" }, outputs: { _ngModelChange: "_ngModelChange" }, ngImport: i0, template: "<div\n  class=\"extend-textarea-wrapper\"\n  [ngClass]=\"[floatingLabel && label ? 'floating-label' : '']\"\n  [ngStyle]=\"{ display: displayInline ? 'inline' : null }\"\n>\n  @if (controlName) {\n    <div [formGroup]=\"formData\">\n      <nz-form-item>\n        @if (label) {\n          <nz-form-label\n            [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\n            [nzFlex]=\"labelFlex\"\n            [nzLabelAlign]=\"labelAlign\"\n            [nzRequired]=\"required\"\n            [nzFor]=\"controlName\"\n            nzNoColon\n            nzLabelWrap\n          >\n            {{ label }}\n          </nz-form-label>\n        }\n        <nz-form-control\n          [nzSpan]=\"label ? (floatingLabel || labelFlex ? null : 24 - labelSpan) : null\"\n          [nzFlex]=\"inputFlex\"\n          [ngClass]=\"{ 'full-width': floatingLabel || !label }\"\n          [nzErrorTip]=\"dynamicErrorTemplate\"\n        >\n          <textarea\n            nz-input\n            [nzAutosize]=\"{ minRows: minRows || 3, maxRows: maxRows || 5 }\"\n            [formControlName]=\"controlName\"\n            [ngClass]=\"inputClass\"\n            [nzSize]=\"size\"\n          ></textarea>\n        </nz-form-control>\n      </nz-form-item>\n\n      <ng-template #dynamicErrorTemplate let-control>\n        <ng-container *ngFor=\"let error of errorMessages | keyvalue\">\n          <ng-container *ngIf=\"control.hasError(error.key)\">\n            {{ error.value }}\n          </ng-container>\n        </ng-container>\n      </ng-template>\n    </div>\n  } @else {\n    <nz-form-item>\n      @if (label) {\n        <nz-form-label\n          [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\n          [nzFlex]=\"labelFlex\"\n          [nzLabelAlign]=\"labelAlign\"\n          [nzRequired]=\"required\"\n          nzNoColon\n          nzLabelWrap\n        >\n          {{ label }}\n        </nz-form-label>\n      }\n      <nz-form-control\n        [nzSpan]=\"label ? (floatingLabel || labelFlex ? null : 24 - labelSpan) : null\"\n        [nzFlex]=\"inputFlex\"\n        [ngClass]=\"{ 'full-width': floatingLabel || !label }\"\n        [nzErrorTip]=\"customValidateStatus\"\n        [nzValidateStatus]=\"customValidateStatus ? 'error' : ''\"\n      >\n        <textarea\n          nz-input\n          [nzAutosize]=\"{ minRows: minRows || 3, maxRows: maxRows || 5 }\"\n          [(ngModel)]=\"_ngModel\"\n          (ngModelChange)=\"onChange()\"\n          (blur)=\"onBlur()\"\n          [disabled]=\"disabled\"\n          [ngClass]=\"inputClass\"\n          [nzSize]=\"size\"\n        ></textarea>\n      </nz-form-control>\n    </nz-form-item>\n  }\n</div>\n", styles: ["::ng-deep .extend-textarea-wrapper.floating-label{position:relative;padding-top:14px}::ng-deep .extend-textarea-wrapper nz-form-item nz-form-label{position:absolute;top:12px;left:10px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:1;height:auto;line-height:normal;padding:0 4px}::ng-deep .extend-textarea-wrapper nz-form-item nz-form-label label{font-size:12px;color:#969696;font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .extend-textarea-wrapper .full-width{width:100%}.extend-textarea-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.extend-textarea-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label,.extend-textarea-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.extend-textarea-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.extend-textarea-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.extend-textarea-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$4.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "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: NzDatePickerModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "directive", type: i6$1.NzAutosizeDirective, selector: "textarea[nzAutosize]", inputs: ["nzAutosize"], exportAs: ["nzAutosize"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendTextArea, isStandalone: true, selector: "extend-textarea", inputs: { label: "label", placeHolder: "placeHolder", labelAlign: "labelAlign", floatingLabel: "floatingLabel", displayInline: "displayInline", labelSpan: "labelSpan", labelFlex: "labelFlex", inputFlex: "inputFlex", disabled: "disabled", required: "required", noBottom: "noBottom", selectModeType: "selectModeType", inputClass: "inputClass", size: "size", isSubmited: "isSubmited", minRows: "minRows", maxRows: "maxRows", lstItem: "lstItem", displayField: "displayField", valueField: "valueField", formData: "formData", controlName: "controlName", _ngModel: "_ngModel", isTouched: "isTouched", inputErrorMessage: "inputErrorMessage", errorMessages: "errorMessages" }, outputs: { _ngModelChange: "_ngModelChange" }, ngImport: i0, template: "<div\r\n  class=\"extend-textarea-wrapper\"\r\n  [ngClass]=\"[floatingLabel && label ? 'floating-label' : '']\"\r\n  [ngStyle]=\"{ display: displayInline ? 'inline' : null }\"\r\n>\r\n  @if (controlName) {\r\n    <div [formGroup]=\"formData\">\r\n      <nz-form-item>\r\n        @if (label) {\r\n          <nz-form-label\r\n            [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\r\n            [nzFlex]=\"labelFlex\"\r\n            [nzLabelAlign]=\"labelAlign\"\r\n            [nzRequired]=\"required\"\r\n            [nzFor]=\"controlName\"\r\n            nzNoColon\r\n            nzLabelWrap\r\n          >\r\n            {{ label }}\r\n          </nz-form-label>\r\n        }\r\n        <nz-form-control\r\n          [nzSpan]=\"label ? (floatingLabel || labelFlex ? null : 24 - labelSpan) : null\"\r\n          [nzFlex]=\"inputFlex\"\r\n          [ngClass]=\"{ 'full-width': floatingLabel || !label }\"\r\n          [nzErrorTip]=\"dynamicErrorTemplate\"\r\n        >\r\n          <textarea\r\n            nz-input\r\n            [nzAutosize]=\"{ minRows: minRows || 3, maxRows: maxRows || 5 }\"\r\n            [formControlName]=\"controlName\"\r\n            [ngClass]=\"inputClass\"\r\n            [nzSize]=\"size\"\r\n          ></textarea>\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <ng-template #dynamicErrorTemplate let-control>\r\n        <ng-container *ngFor=\"let error of errorMessages | keyvalue\">\r\n          <ng-container *ngIf=\"control.hasError(error.key)\">\r\n            {{ error.value }}\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-template>\r\n    </div>\r\n  } @else {\r\n    <nz-form-item>\r\n      @if (label) {\r\n        <nz-form-label\r\n          [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\r\n          [nzFlex]=\"labelFlex\"\r\n          [nzLabelAlign]=\"labelAlign\"\r\n          [nzRequired]=\"required\"\r\n          nzNoColon\r\n          nzLabelWrap\r\n        >\r\n          {{ label }}\r\n        </nz-form-label>\r\n      }\r\n      <nz-form-control\r\n        [nzSpan]=\"label ? (floatingLabel || labelFlex ? null : 24 - labelSpan) : null\"\r\n        [nzFlex]=\"inputFlex\"\r\n        [ngClass]=\"{ 'full-width': floatingLabel || !label }\"\r\n        [nzErrorTip]=\"customValidateStatus\"\r\n        [nzValidateStatus]=\"customValidateStatus ? 'error' : ''\"\r\n      >\r\n        <textarea\r\n          nz-input\r\n          [nzAutosize]=\"{ minRows: minRows || 3, maxRows: maxRows || 5 }\"\r\n          [(ngModel)]=\"_ngModel\"\r\n          (ngModelChange)=\"onChange()\"\r\n          (blur)=\"onBlur()\"\r\n          [disabled]=\"disabled\"\r\n          [ngClass]=\"inputClass\"\r\n          [nzSize]=\"size\"\r\n        ></textarea>\r\n      </nz-form-control>\r\n    </nz-form-item>\r\n  }\r\n</div>\r\n", styles: ["::ng-deep .extend-textarea-wrapper.floating-label{position:relative;padding-top:14px}::ng-deep .extend-textarea-wrapper nz-form-item nz-form-label{position:absolute;top:12px;left:10px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:1;height:auto;line-height:normal;padding:0 4px}::ng-deep .extend-textarea-wrapper nz-form-item nz-form-label label{font-size:12px;color:#969696;font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .extend-textarea-wrapper .full-width{width:100%}.extend-textarea-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.extend-textarea-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label,.extend-textarea-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.extend-textarea-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.extend-textarea-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.extend-textarea-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$4.KeyValuePipe, name: "keyvalue" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "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: NzDatePickerModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "directive", type: i6$1.NzAutosizeDirective, selector: "textarea[nzAutosize]", inputs: ["nzAutosize"], exportAs: ["nzAutosize"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendTextArea, decorators: [{
             type: Component,
@@ -3214,7 +3335,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         NzDatePickerModule,
                         TranslateModule,
                         NzInputModule,
-                    ], template: "<div\n  class=\"extend-textarea-wrapper\"\n  [ngClass]=\"[floatingLabel && label ? 'floating-label' : '']\"\n  [ngStyle]=\"{ display: displayInline ? 'inline' : null }\"\n>\n  @if (controlName) {\n    <div [formGroup]=\"formData\">\n      <nz-form-item>\n        @if (label) {\n          <nz-form-label\n            [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\n            [nzFlex]=\"labelFlex\"\n            [nzLabelAlign]=\"labelAlign\"\n            [nzRequired]=\"required\"\n            [nzFor]=\"controlName\"\n            nzNoColon\n            nzLabelWrap\n          >\n            {{ label }}\n          </nz-form-label>\n        }\n        <nz-form-control\n          [nzSpan]=\"label ? (floatingLabel || labelFlex ? null : 24 - labelSpan) : null\"\n          [nzFlex]=\"inputFlex\"\n          [ngClass]=\"{ 'full-width': floatingLabel || !label }\"\n          [nzErrorTip]=\"dynamicErrorTemplate\"\n        >\n          <textarea\n            nz-input\n            [nzAutosize]=\"{ minRows: minRows || 3, maxRows: maxRows || 5 }\"\n            [formControlName]=\"controlName\"\n            [ngClass]=\"inputClass\"\n            [nzSize]=\"size\"\n          ></textarea>\n        </nz-form-control>\n      </nz-form-item>\n\n      <ng-template #dynamicErrorTemplate let-control>\n        <ng-container *ngFor=\"let error of errorMessages | keyvalue\">\n          <ng-container *ngIf=\"control.hasError(error.key)\">\n            {{ error.value }}\n          </ng-container>\n        </ng-container>\n      </ng-template>\n    </div>\n  } @else {\n    <nz-form-item>\n      @if (label) {\n        <nz-form-label\n          [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\n          [nzFlex]=\"labelFlex\"\n          [nzLabelAlign]=\"labelAlign\"\n          [nzRequired]=\"required\"\n          nzNoColon\n          nzLabelWrap\n        >\n          {{ label }}\n        </nz-form-label>\n      }\n      <nz-form-control\n        [nzSpan]=\"label ? (floatingLabel || labelFlex ? null : 24 - labelSpan) : null\"\n        [nzFlex]=\"inputFlex\"\n        [ngClass]=\"{ 'full-width': floatingLabel || !label }\"\n        [nzErrorTip]=\"customValidateStatus\"\n        [nzValidateStatus]=\"customValidateStatus ? 'error' : ''\"\n      >\n        <textarea\n          nz-input\n          [nzAutosize]=\"{ minRows: minRows || 3, maxRows: maxRows || 5 }\"\n          [(ngModel)]=\"_ngModel\"\n          (ngModelChange)=\"onChange()\"\n          (blur)=\"onBlur()\"\n          [disabled]=\"disabled\"\n          [ngClass]=\"inputClass\"\n          [nzSize]=\"size\"\n        ></textarea>\n      </nz-form-control>\n    </nz-form-item>\n  }\n</div>\n", styles: ["::ng-deep .extend-textarea-wrapper.floating-label{position:relative;padding-top:14px}::ng-deep .extend-textarea-wrapper nz-form-item nz-form-label{position:absolute;top:12px;left:10px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:1;height:auto;line-height:normal;padding:0 4px}::ng-deep .extend-textarea-wrapper nz-form-item nz-form-label label{font-size:12px;color:#969696;font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .extend-textarea-wrapper .full-width{width:100%}.extend-textarea-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.extend-textarea-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label,.extend-textarea-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.extend-textarea-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.extend-textarea-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.extend-textarea-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}\n"] }]
+                    ], template: "<div\r\n  class=\"extend-textarea-wrapper\"\r\n  [ngClass]=\"[floatingLabel && label ? 'floating-label' : '']\"\r\n  [ngStyle]=\"{ display: displayInline ? 'inline' : null }\"\r\n>\r\n  @if (controlName) {\r\n    <div [formGroup]=\"formData\">\r\n      <nz-form-item>\r\n        @if (label) {\r\n          <nz-form-label\r\n            [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\r\n            [nzFlex]=\"labelFlex\"\r\n            [nzLabelAlign]=\"labelAlign\"\r\n            [nzRequired]=\"required\"\r\n            [nzFor]=\"controlName\"\r\n            nzNoColon\r\n            nzLabelWrap\r\n          >\r\n            {{ label }}\r\n          </nz-form-label>\r\n        }\r\n        <nz-form-control\r\n          [nzSpan]=\"label ? (floatingLabel || labelFlex ? null : 24 - labelSpan) : null\"\r\n          [nzFlex]=\"inputFlex\"\r\n          [ngClass]=\"{ 'full-width': floatingLabel || !label }\"\r\n          [nzErrorTip]=\"dynamicErrorTemplate\"\r\n        >\r\n          <textarea\r\n            nz-input\r\n            [nzAutosize]=\"{ minRows: minRows || 3, maxRows: maxRows || 5 }\"\r\n            [formControlName]=\"controlName\"\r\n            [ngClass]=\"inputClass\"\r\n            [nzSize]=\"size\"\r\n          ></textarea>\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <ng-template #dynamicErrorTemplate let-control>\r\n        <ng-container *ngFor=\"let error of errorMessages | keyvalue\">\r\n          <ng-container *ngIf=\"control.hasError(error.key)\">\r\n            {{ error.value }}\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-template>\r\n    </div>\r\n  } @else {\r\n    <nz-form-item>\r\n      @if (label) {\r\n        <nz-form-label\r\n          [nzSpan]=\"floatingLabel || labelFlex ? null : labelSpan\"\r\n          [nzFlex]=\"labelFlex\"\r\n          [nzLabelAlign]=\"labelAlign\"\r\n          [nzRequired]=\"required\"\r\n          nzNoColon\r\n          nzLabelWrap\r\n        >\r\n          {{ label }}\r\n        </nz-form-label>\r\n      }\r\n      <nz-form-control\r\n        [nzSpan]=\"label ? (floatingLabel || labelFlex ? null : 24 - labelSpan) : null\"\r\n        [nzFlex]=\"inputFlex\"\r\n        [ngClass]=\"{ 'full-width': floatingLabel || !label }\"\r\n        [nzErrorTip]=\"customValidateStatus\"\r\n        [nzValidateStatus]=\"customValidateStatus ? 'error' : ''\"\r\n      >\r\n        <textarea\r\n          nz-input\r\n          [nzAutosize]=\"{ minRows: minRows || 3, maxRows: maxRows || 5 }\"\r\n          [(ngModel)]=\"_ngModel\"\r\n          (ngModelChange)=\"onChange()\"\r\n          (blur)=\"onBlur()\"\r\n          [disabled]=\"disabled\"\r\n          [ngClass]=\"inputClass\"\r\n          [nzSize]=\"size\"\r\n        ></textarea>\r\n      </nz-form-control>\r\n    </nz-form-item>\r\n  }\r\n</div>\r\n", styles: ["::ng-deep .extend-textarea-wrapper.floating-label{position:relative;padding-top:14px}::ng-deep .extend-textarea-wrapper nz-form-item nz-form-label{position:absolute;top:12px;left:10px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:1;height:auto;line-height:normal;padding:0 4px}::ng-deep .extend-textarea-wrapper nz-form-item nz-form-label label{font-size:12px;color:#969696;font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .extend-textarea-wrapper .full-width{width:100%}.extend-textarea-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.extend-textarea-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label,.extend-textarea-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.extend-textarea-wrapper.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.extend-textarea-wrapper.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.extend-textarea-wrapper.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], placeHolder: [{
@@ -3290,7 +3411,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 }]
         }] });
 
-const URLs$3 = {
+const URLs$6 = {
     getById: '/api/App_Dic_Domain/GetById',
     getAll: '/api/App_Dic_Domain/GetAll',
     getList: '/api/App_Dic_Domain/GetList',
@@ -3507,11 +3628,11 @@ class ReadMoreProComponent {
         this.maxHeight = this.expanded ? fullHeight + 'px' : collapsedHeight + 'px';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ReadMoreProComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ReadMoreProComponent, isStandalone: true, selector: "read-more", inputs: { text: "text", lines: "lines" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<div class=\"wrapper\">\n  <div\n    #content\n    class=\"content\"\n    [class.clamp]=\"!expanded && overflow\"\n    [style.-webkit-line-clamp]=\"!expanded && overflow ? lines : 'none'\"\n    [style.maxHeight]=\"maxHeight\"\n    [innerHTML]=\"text\"\n  ></div>\n\n  @if (overflow) {\n    <div class=\"toggle-container\" [class.expanded]=\"expanded\">\n      <span class=\"toggle text-italic\" (click)=\"toggle()\">\n        {{ expanded ? \"Thu g\u1ECDn\" : \"Xem th\u00EAm\" }}\n        <nz-icon [nzType]=\"expanded ? 'up' : 'down'\" nzTheme=\"outline\" />\n      </span>\n    </div>\n  }\n</div>\n", styles: [".wrapper{position:relative;width:100%}.content{overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1);white-space:pre-line}.clamp{display:-webkit-box;-webkit-box-orient:vertical}.toggle-container{text-align:right}.toggle{color:#1677ffa9;cursor:pointer;font-weight:500;display:inline-flex;align-items:center;gap:4px;font-size:.85em}.toggle:hover{text-decoration:underline}\n"], dependencies: [{ kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ReadMoreProComponent, isStandalone: true, selector: "read-more", inputs: { text: "text", lines: "lines" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<div class=\"wrapper\">\r\n  <div\r\n    #content\r\n    class=\"content\"\r\n    [class.clamp]=\"!expanded && overflow\"\r\n    [style.-webkit-line-clamp]=\"!expanded && overflow ? lines : 'none'\"\r\n    [style.maxHeight]=\"maxHeight\"\r\n    [innerHTML]=\"text\"\r\n  ></div>\r\n\r\n  @if (overflow) {\r\n    <div class=\"toggle-container\" [class.expanded]=\"expanded\">\r\n      <span class=\"toggle text-italic\" (click)=\"toggle()\">\r\n        {{ expanded ? \"Thu g\u1ECDn\" : \"Xem th\u00EAm\" }}\r\n        <nz-icon [nzType]=\"expanded ? 'up' : 'down'\" nzTheme=\"outline\" />\r\n      </span>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".wrapper{position:relative;width:100%}.content{overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1);white-space:pre-line}.clamp{display:-webkit-box;-webkit-box-orient:vertical}.toggle-container{text-align:right}.toggle{color:#1677ffa9;cursor:pointer;font-weight:500;display:inline-flex;align-items:center;gap:4px;font-size:.85em}.toggle:hover{text-decoration:underline}\n"], dependencies: [{ kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ReadMoreProComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'read-more', imports: [NzIconModule], template: "<div class=\"wrapper\">\n  <div\n    #content\n    class=\"content\"\n    [class.clamp]=\"!expanded && overflow\"\n    [style.-webkit-line-clamp]=\"!expanded && overflow ? lines : 'none'\"\n    [style.maxHeight]=\"maxHeight\"\n    [innerHTML]=\"text\"\n  ></div>\n\n  @if (overflow) {\n    <div class=\"toggle-container\" [class.expanded]=\"expanded\">\n      <span class=\"toggle text-italic\" (click)=\"toggle()\">\n        {{ expanded ? \"Thu g\u1ECDn\" : \"Xem th\u00EAm\" }}\n        <nz-icon [nzType]=\"expanded ? 'up' : 'down'\" nzTheme=\"outline\" />\n      </span>\n    </div>\n  }\n</div>\n", styles: [".wrapper{position:relative;width:100%}.content{overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1);white-space:pre-line}.clamp{display:-webkit-box;-webkit-box-orient:vertical}.toggle-container{text-align:right}.toggle{color:#1677ffa9;cursor:pointer;font-weight:500;display:inline-flex;align-items:center;gap:4px;font-size:.85em}.toggle:hover{text-decoration:underline}\n"] }]
+            args: [{ selector: 'read-more', imports: [NzIconModule], template: "<div class=\"wrapper\">\r\n  <div\r\n    #content\r\n    class=\"content\"\r\n    [class.clamp]=\"!expanded && overflow\"\r\n    [style.-webkit-line-clamp]=\"!expanded && overflow ? lines : 'none'\"\r\n    [style.maxHeight]=\"maxHeight\"\r\n    [innerHTML]=\"text\"\r\n  ></div>\r\n\r\n  @if (overflow) {\r\n    <div class=\"toggle-container\" [class.expanded]=\"expanded\">\r\n      <span class=\"toggle text-italic\" (click)=\"toggle()\">\r\n        {{ expanded ? \"Thu g\u1ECDn\" : \"Xem th\u00EAm\" }}\r\n        <nz-icon [nzType]=\"expanded ? 'up' : 'down'\" nzTheme=\"outline\" />\r\n      </span>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".wrapper{position:relative;width:100%}.content{overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1);white-space:pre-line}.clamp{display:-webkit-box;-webkit-box-orient:vertical}.toggle-container{text-align:right}.toggle{color:#1677ffa9;cursor:pointer;font-weight:500;display:inline-flex;align-items:center;gap:4px;font-size:.85em}.toggle:hover{text-decoration:underline}\n"] }]
         }], propDecorators: { text: [{
                 type: Input
             }], lines: [{
@@ -3547,7 +3668,7 @@ class ExtendTableComponent extends BaseComponent {
         this.filterChange.emit(this.filter);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendTableComponent, isStandalone: true, selector: "extend-table", inputs: { data: "data", filter: "filter", isLoading: "isLoading", idKey: "idKey", detailKey: "detailKey", selectedIdKey: "selectedIdKey", scroll: "scroll", actionTemplate: "actionTemplate" }, outputs: { filterChange: "filterChange", ondblclickrow: "ondblclickrow" }, usesInheritance: true, ngImport: i0, template: "<nz-table\n  class=\"extend-table\"\n  [nzData]=\"data.LstItem || []\"\n  [nzBordered]=\"true\"\n  [nzSize]=\"'small'\"\n  [nzLoading]=\"isLoading\"\n  [nzFrontPagination]=\"false\"\n  [nzShowPagination]=\"false\"\n  [nzTotal]=\"data.TotalCount || 0\"\n  [(nzPageIndex)]=\"filter.PageIndex\"\n  [(nzPageSize)]=\"filter.PageSize\"\n  [nzScroll]=\"scroll || {}\"\n  (nzPageIndexChange)=\"onPageIndexChange($event)\"\n  (nzPageSizeChange)=\"onPageSizeChange($event)\"\n>\n  <thead>\n    <tr>\n      @for (item of data.LstHeader; track $index) {\n        <th\n          [nzWidth]=\"item.Width\"\n          [nzShowSort]=\"item.ShowSort\"\n          [nzSortOrder]=\"item.SortOrder\"\n          (nzSortOrderChange)=\"onSortChange(item.Code, $event)\"\n        >\n          {{ item.Name }}\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (row of data.LstItem; track $index; let i = $index) {\n      <tr\n        tabindex=\"0\"\n        class=\"selectable-row\"\n        [ngClass]=\"selectedIdKey && row[idKey] == selectedIdKey ? 'selected-row' : ''\"\n        (dblclick)=\"ondblclickrow.emit(row)\"\n      >\n        @for (col of data.LstHeader; track $index) {\n          @if (col.Code === \"NO\") {\n            <td [class]=\"col.Class\">\n              {{ i + 1 + filter.PageIndex * filter.PageSize }}\n            </td>\n          } @else if (col.Code === \"ACTION\") {\n            <td [class]=\"col.Class\">\n              @if (actionTemplate) {\n                <ng-container *ngTemplateOutlet=\"actionTemplate; context: { $implicit: row, index: i }\"> </ng-container>\n              }\n            </td>\n          } @else if (col.Type === \"CHECKBOX\") {\n            <td [class]=\"col.Class\">\n              @if (row[col.Code]) {\n                <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\n              }\n              <!-- @else {\n                <nz-icon nzType=\"close\" nzTheme=\"outline\" class=\"color-warn\" />\n              } -->\n            </td>\n          } @else if (col.Code == detailKey) {\n            <td [class]=\"col.Class\">\n              <span\n                class=\"link-detail\"\n                (click)=\"goto(row[idKey])\"\n                [innerHTML]=\"row[col.Code] | highlight: filter.Keyword || ''\"\n              ></span>\n            </td>\n          } @else {\n            @if (col.DomainCode) {\n              <td\n                [class]=\"col.Class\"\n                [innerHTML]=\"row[col.Code] | dicDomain: col.DomainCode | async | highlight: filter.Keyword || ''\"\n              ></td>\n            } @else if (col.MaxLines) {\n              <td>\n                <read-more [text]=\"row[col.Code]\" [lines]=\"col.MaxLines\"></read-more>\n              </td>\n            } @else {\n              <td [class]=\"col.Class\" [innerHTML]=\"row[col.Code] | highlight: filter.Keyword || ''\"></td>\n            }\n          }\n        }\n      </tr>\n    }\n  </tbody>\n</nz-table>\n", styles: ["@charset \"UTF-8\";.extend-table .ant-table-tbody>tr:nth-child(odd)>td{background-color:#fff}.extend-table .ant-table-tbody>tr:nth-child(2n)>td{background-color:#f6f6f6}.extend-table .selectable-row:hover td{background-color:#bae8fd!important}.extend-table .selectable-row:focus td{background-color:#bae8fd!important}.extend-table .selected-rowtd{background-color:#bae8fd!important;font-weight:700}.extend-table .link-detail{color:var(--primary-color);cursor:pointer}.extend-table .link-detail:hover{text-decoration:underline}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i2$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: i2$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: i2$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i2$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i2$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i2$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i2$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$3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "directive", type: i4$1.ɵ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: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: DicDomainPipe, name: "dicDomain" }, { kind: "component", type: ReadMoreProComponent, selector: "read-more", inputs: ["text", "lines"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendTableComponent, isStandalone: true, selector: "extend-table", inputs: { data: "data", filter: "filter", isLoading: "isLoading", idKey: "idKey", detailKey: "detailKey", selectedIdKey: "selectedIdKey", scroll: "scroll", actionTemplate: "actionTemplate" }, outputs: { filterChange: "filterChange", ondblclickrow: "ondblclickrow" }, usesInheritance: true, ngImport: i0, template: "<nz-table\r\n  class=\"extend-table\"\r\n  [nzData]=\"data.LstItem || []\"\r\n  [nzBordered]=\"true\"\r\n  [nzSize]=\"'small'\"\r\n  [nzLoading]=\"isLoading\"\r\n  [nzFrontPagination]=\"false\"\r\n  [nzShowPagination]=\"false\"\r\n  [nzTotal]=\"data.TotalCount || 0\"\r\n  [(nzPageIndex)]=\"filter.PageIndex\"\r\n  [(nzPageSize)]=\"filter.PageSize\"\r\n  [nzScroll]=\"scroll || {}\"\r\n  (nzPageIndexChange)=\"onPageIndexChange($event)\"\r\n  (nzPageSizeChange)=\"onPageSizeChange($event)\"\r\n>\r\n  <thead>\r\n    <tr>\r\n      @for (item of data.LstHeader; track $index) {\r\n        <th\r\n          [nzWidth]=\"item.Width\"\r\n          [nzShowSort]=\"item.ShowSort\"\r\n          [nzSortOrder]=\"item.SortOrder\"\r\n          (nzSortOrderChange)=\"onSortChange(item.Code, $event)\"\r\n        >\r\n          {{ item.Name }}\r\n        </th>\r\n      }\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        tabindex=\"0\"\r\n        class=\"selectable-row\"\r\n        [ngClass]=\"selectedIdKey && row[idKey] == selectedIdKey ? 'selected-row' : ''\"\r\n        (dblclick)=\"ondblclickrow.emit(row)\"\r\n      >\r\n        @for (col of data.LstHeader; track $index) {\r\n          @if (col.Code === \"NO\") {\r\n            <td [class]=\"col.Class\">\r\n              {{ i + 1 + filter.PageIndex * filter.PageSize }}\r\n            </td>\r\n          } @else if (col.Code === \"ACTION\") {\r\n            <td [class]=\"col.Class\">\r\n              @if (actionTemplate) {\r\n                <ng-container *ngTemplateOutlet=\"actionTemplate; context: { $implicit: row, index: i }\"> </ng-container>\r\n              }\r\n            </td>\r\n          } @else if (col.Type === \"CHECKBOX\") {\r\n            <td [class]=\"col.Class\">\r\n              @if (row[col.Code]) {\r\n                <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n              }\r\n              <!-- @else {\r\n                <nz-icon nzType=\"close\" nzTheme=\"outline\" class=\"color-warn\" />\r\n              } -->\r\n            </td>\r\n          } @else if (col.Code == detailKey) {\r\n            <td [class]=\"col.Class\">\r\n              <span\r\n                class=\"link-detail\"\r\n                (click)=\"goto(row[idKey])\"\r\n                [innerHTML]=\"row[col.Code] | highlight: filter.Keyword || ''\"\r\n              ></span>\r\n            </td>\r\n          } @else {\r\n            @if (col.DomainCode) {\r\n              <td\r\n                [class]=\"col.Class\"\r\n                [innerHTML]=\"row[col.Code] | dicDomain: col.DomainCode | async | highlight: filter.Keyword || ''\"\r\n              ></td>\r\n            } @else if (col.MaxLines) {\r\n              <td>\r\n                <read-more [text]=\"row[col.Code]\" [lines]=\"col.MaxLines\"></read-more>\r\n              </td>\r\n            } @else {\r\n              <td [class]=\"col.Class\" [innerHTML]=\"row[col.Code] | highlight: filter.Keyword || ''\"></td>\r\n            }\r\n          }\r\n        }\r\n      </tr>\r\n    }\r\n  </tbody>\r\n</nz-table>\r\n", styles: ["@charset \"UTF-8\";.extend-table .ant-table-tbody>tr:nth-child(odd)>td{background-color:#fff}.extend-table .ant-table-tbody>tr:nth-child(2n)>td{background-color:#f6f6f6}.extend-table .selectable-row:hover td{background-color:#bae8fd!important}.extend-table .selectable-row:focus td{background-color:#bae8fd!important}.extend-table .selected-rowtd{background-color:#bae8fd!important;font-weight:700}.extend-table .link-detail{color:var(--primary-color);cursor:pointer}.extend-table .link-detail:hover{text-decoration:underline}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i1$5.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: i1$5.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: i1$5.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i1$5.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i1$5.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i1$5.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i1$5.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$3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "directive", type: i6$3.ɵ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: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: DicDomainPipe, name: "dicDomain" }, { kind: "component", type: ReadMoreProComponent, selector: "read-more", inputs: ["text", "lines"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendTableComponent, decorators: [{
             type: Component,
@@ -3560,7 +3681,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         HighlightPipe,
                         DicDomainPipe,
                         ReadMoreProComponent,
-                    ], template: "<nz-table\n  class=\"extend-table\"\n  [nzData]=\"data.LstItem || []\"\n  [nzBordered]=\"true\"\n  [nzSize]=\"'small'\"\n  [nzLoading]=\"isLoading\"\n  [nzFrontPagination]=\"false\"\n  [nzShowPagination]=\"false\"\n  [nzTotal]=\"data.TotalCount || 0\"\n  [(nzPageIndex)]=\"filter.PageIndex\"\n  [(nzPageSize)]=\"filter.PageSize\"\n  [nzScroll]=\"scroll || {}\"\n  (nzPageIndexChange)=\"onPageIndexChange($event)\"\n  (nzPageSizeChange)=\"onPageSizeChange($event)\"\n>\n  <thead>\n    <tr>\n      @for (item of data.LstHeader; track $index) {\n        <th\n          [nzWidth]=\"item.Width\"\n          [nzShowSort]=\"item.ShowSort\"\n          [nzSortOrder]=\"item.SortOrder\"\n          (nzSortOrderChange)=\"onSortChange(item.Code, $event)\"\n        >\n          {{ item.Name }}\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (row of data.LstItem; track $index; let i = $index) {\n      <tr\n        tabindex=\"0\"\n        class=\"selectable-row\"\n        [ngClass]=\"selectedIdKey && row[idKey] == selectedIdKey ? 'selected-row' : ''\"\n        (dblclick)=\"ondblclickrow.emit(row)\"\n      >\n        @for (col of data.LstHeader; track $index) {\n          @if (col.Code === \"NO\") {\n            <td [class]=\"col.Class\">\n              {{ i + 1 + filter.PageIndex * filter.PageSize }}\n            </td>\n          } @else if (col.Code === \"ACTION\") {\n            <td [class]=\"col.Class\">\n              @if (actionTemplate) {\n                <ng-container *ngTemplateOutlet=\"actionTemplate; context: { $implicit: row, index: i }\"> </ng-container>\n              }\n            </td>\n          } @else if (col.Type === \"CHECKBOX\") {\n            <td [class]=\"col.Class\">\n              @if (row[col.Code]) {\n                <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\n              }\n              <!-- @else {\n                <nz-icon nzType=\"close\" nzTheme=\"outline\" class=\"color-warn\" />\n              } -->\n            </td>\n          } @else if (col.Code == detailKey) {\n            <td [class]=\"col.Class\">\n              <span\n                class=\"link-detail\"\n                (click)=\"goto(row[idKey])\"\n                [innerHTML]=\"row[col.Code] | highlight: filter.Keyword || ''\"\n              ></span>\n            </td>\n          } @else {\n            @if (col.DomainCode) {\n              <td\n                [class]=\"col.Class\"\n                [innerHTML]=\"row[col.Code] | dicDomain: col.DomainCode | async | highlight: filter.Keyword || ''\"\n              ></td>\n            } @else if (col.MaxLines) {\n              <td>\n                <read-more [text]=\"row[col.Code]\" [lines]=\"col.MaxLines\"></read-more>\n              </td>\n            } @else {\n              <td [class]=\"col.Class\" [innerHTML]=\"row[col.Code] | highlight: filter.Keyword || ''\"></td>\n            }\n          }\n        }\n      </tr>\n    }\n  </tbody>\n</nz-table>\n", styles: ["@charset \"UTF-8\";.extend-table .ant-table-tbody>tr:nth-child(odd)>td{background-color:#fff}.extend-table .ant-table-tbody>tr:nth-child(2n)>td{background-color:#f6f6f6}.extend-table .selectable-row:hover td{background-color:#bae8fd!important}.extend-table .selectable-row:focus td{background-color:#bae8fd!important}.extend-table .selected-rowtd{background-color:#bae8fd!important;font-weight:700}.extend-table .link-detail{color:var(--primary-color);cursor:pointer}.extend-table .link-detail:hover{text-decoration:underline}\n"] }]
+                    ], template: "<nz-table\r\n  class=\"extend-table\"\r\n  [nzData]=\"data.LstItem || []\"\r\n  [nzBordered]=\"true\"\r\n  [nzSize]=\"'small'\"\r\n  [nzLoading]=\"isLoading\"\r\n  [nzFrontPagination]=\"false\"\r\n  [nzShowPagination]=\"false\"\r\n  [nzTotal]=\"data.TotalCount || 0\"\r\n  [(nzPageIndex)]=\"filter.PageIndex\"\r\n  [(nzPageSize)]=\"filter.PageSize\"\r\n  [nzScroll]=\"scroll || {}\"\r\n  (nzPageIndexChange)=\"onPageIndexChange($event)\"\r\n  (nzPageSizeChange)=\"onPageSizeChange($event)\"\r\n>\r\n  <thead>\r\n    <tr>\r\n      @for (item of data.LstHeader; track $index) {\r\n        <th\r\n          [nzWidth]=\"item.Width\"\r\n          [nzShowSort]=\"item.ShowSort\"\r\n          [nzSortOrder]=\"item.SortOrder\"\r\n          (nzSortOrderChange)=\"onSortChange(item.Code, $event)\"\r\n        >\r\n          {{ item.Name }}\r\n        </th>\r\n      }\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        tabindex=\"0\"\r\n        class=\"selectable-row\"\r\n        [ngClass]=\"selectedIdKey && row[idKey] == selectedIdKey ? 'selected-row' : ''\"\r\n        (dblclick)=\"ondblclickrow.emit(row)\"\r\n      >\r\n        @for (col of data.LstHeader; track $index) {\r\n          @if (col.Code === \"NO\") {\r\n            <td [class]=\"col.Class\">\r\n              {{ i + 1 + filter.PageIndex * filter.PageSize }}\r\n            </td>\r\n          } @else if (col.Code === \"ACTION\") {\r\n            <td [class]=\"col.Class\">\r\n              @if (actionTemplate) {\r\n                <ng-container *ngTemplateOutlet=\"actionTemplate; context: { $implicit: row, index: i }\"> </ng-container>\r\n              }\r\n            </td>\r\n          } @else if (col.Type === \"CHECKBOX\") {\r\n            <td [class]=\"col.Class\">\r\n              @if (row[col.Code]) {\r\n                <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n              }\r\n              <!-- @else {\r\n                <nz-icon nzType=\"close\" nzTheme=\"outline\" class=\"color-warn\" />\r\n              } -->\r\n            </td>\r\n          } @else if (col.Code == detailKey) {\r\n            <td [class]=\"col.Class\">\r\n              <span\r\n                class=\"link-detail\"\r\n                (click)=\"goto(row[idKey])\"\r\n                [innerHTML]=\"row[col.Code] | highlight: filter.Keyword || ''\"\r\n              ></span>\r\n            </td>\r\n          } @else {\r\n            @if (col.DomainCode) {\r\n              <td\r\n                [class]=\"col.Class\"\r\n                [innerHTML]=\"row[col.Code] | dicDomain: col.DomainCode | async | highlight: filter.Keyword || ''\"\r\n              ></td>\r\n            } @else if (col.MaxLines) {\r\n              <td>\r\n                <read-more [text]=\"row[col.Code]\" [lines]=\"col.MaxLines\"></read-more>\r\n              </td>\r\n            } @else {\r\n              <td [class]=\"col.Class\" [innerHTML]=\"row[col.Code] | highlight: filter.Keyword || ''\"></td>\r\n            }\r\n          }\r\n        }\r\n      </tr>\r\n    }\r\n  </tbody>\r\n</nz-table>\r\n", styles: ["@charset \"UTF-8\";.extend-table .ant-table-tbody>tr:nth-child(odd)>td{background-color:#fff}.extend-table .ant-table-tbody>tr:nth-child(2n)>td{background-color:#f6f6f6}.extend-table .selectable-row:hover td{background-color:#bae8fd!important}.extend-table .selectable-row:focus td{background-color:#bae8fd!important}.extend-table .selected-rowtd{background-color:#bae8fd!important;font-weight:700}.extend-table .link-detail{color:var(--primary-color);cursor:pointer}.extend-table .link-detail:hover{text-decoration:underline}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }], filter: [{
@@ -3589,11 +3710,11 @@ class ExtendPaginationComponent {
     onQueryParamsChange = new EventEmitter();
     AppGlobals = AppGlobals;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: ExtendPaginationComponent, isStandalone: true, selector: "extend-pagination", inputs: { totalCount: "totalCount", filter: "filter" }, outputs: { onQueryParamsChange: "onQueryParamsChange" }, ngImport: i0, template: "<nz-pagination\n  [nzSize]=\"'small'\"\n  [nzPageIndex]=\"filter.PageIndex + 1\"\n  [nzPageSize]=\"filter.PageSize\"\n  [nzTotal]=\"totalCount || 0\"\n  [nzShowSizeChanger]=\"true\"\n  [nzShowTotal]=\"showTotalTpl\"\n  [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\n  (nzPageIndexChange)=\"onQueryParamsChange.emit({ PageIndex: $event - 1, PageSize: filter.PageSize })\"\n  (nzPageSizeChange)=\"onQueryParamsChange.emit({ PageIndex: filter.PageIndex, PageSize: $event })\"\n>\n</nz-pagination>\n\n<ng-template #showTotalTpl let-total let-range=\"range\">\n  {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i1$5.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: ExtendPaginationComponent, isStandalone: true, selector: "extend-pagination", inputs: { totalCount: "totalCount", filter: "filter" }, outputs: { onQueryParamsChange: "onQueryParamsChange" }, ngImport: i0, template: "<nz-pagination\r\n  [nzSize]=\"'small'\"\r\n  [nzPageIndex]=\"filter.PageIndex + 1\"\r\n  [nzPageSize]=\"filter.PageSize\"\r\n  [nzTotal]=\"totalCount || 0\"\r\n  [nzShowSizeChanger]=\"true\"\r\n  [nzShowTotal]=\"showTotalTpl\"\r\n  [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n  (nzPageIndexChange)=\"onQueryParamsChange.emit({ PageIndex: $event - 1, PageSize: filter.PageSize })\"\r\n  (nzPageSizeChange)=\"onQueryParamsChange.emit({ PageIndex: filter.PageIndex, PageSize: $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", dependencies: [{ kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i1$6.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendPaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'extend-pagination', imports: [NzPaginationModule, DecimalPipe], template: "<nz-pagination\n  [nzSize]=\"'small'\"\n  [nzPageIndex]=\"filter.PageIndex + 1\"\n  [nzPageSize]=\"filter.PageSize\"\n  [nzTotal]=\"totalCount || 0\"\n  [nzShowSizeChanger]=\"true\"\n  [nzShowTotal]=\"showTotalTpl\"\n  [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\n  (nzPageIndexChange)=\"onQueryParamsChange.emit({ PageIndex: $event - 1, PageSize: filter.PageSize })\"\n  (nzPageSizeChange)=\"onQueryParamsChange.emit({ PageIndex: filter.PageIndex, PageSize: $event })\"\n>\n</nz-pagination>\n\n<ng-template #showTotalTpl let-total let-range=\"range\">\n  {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\n</ng-template>\n" }]
+            args: [{ selector: 'extend-pagination', imports: [NzPaginationModule, DecimalPipe], template: "<nz-pagination\r\n  [nzSize]=\"'small'\"\r\n  [nzPageIndex]=\"filter.PageIndex + 1\"\r\n  [nzPageSize]=\"filter.PageSize\"\r\n  [nzTotal]=\"totalCount || 0\"\r\n  [nzShowSizeChanger]=\"true\"\r\n  [nzShowTotal]=\"showTotalTpl\"\r\n  [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n  (nzPageIndexChange)=\"onQueryParamsChange.emit({ PageIndex: $event - 1, PageSize: filter.PageSize })\"\r\n  (nzPageSizeChange)=\"onQueryParamsChange.emit({ PageIndex: filter.PageIndex, PageSize: $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" }]
         }], propDecorators: { totalCount: [{
                 type: Input
             }], filter: [{
@@ -3615,33 +3736,38 @@ class NoPermission {
         this.message = state?.message || null;
         console.log('Lấy từ history.state:', state);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NoPermission, deps: [{ token: i1$6.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: NoPermission, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
-    <h2>Không có quyền truy cập</h2>
-    <p *ngIf="message">{{ message }}</p>
-    <p *ngIf="deniedUrl">
-      Bạn đã cố gắng truy cập: <strong>{{ deniedUrl }}</strong>
-    </p>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NoPermission, deps: [{ token: i1$7.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: NoPermission, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+    <h2>Không có quyền truy cập</h2>
+    <p *ngIf="message">{{ message }}</p>
+    <p *ngIf="deniedUrl">
+      Bạn đã cố gắng truy cập: <strong>{{ deniedUrl }}</strong>
+    </p>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NoPermission, decorators: [{
             type: Component,
             args: [{
-                    template: `
-    <h2>Không có quyền truy cập</h2>
-    <p *ngIf="message">{{ message }}</p>
-    <p *ngIf="deniedUrl">
-      Bạn đã cố gắng truy cập: <strong>{{ deniedUrl }}</strong>
-    </p>
+                    template: `
+    <h2>Không có quyền truy cập</h2>
+    <p *ngIf="message">{{ message }}</p>
+    <p *ngIf="deniedUrl">
+      Bạn đã cố gắng truy cập: <strong>{{ deniedUrl }}</strong>
+    </p>
   `,
                     imports: [CommonModule],
                 }]
-        }], ctorParameters: () => [{ type: i1$6.Router }] });
+        }], ctorParameters: () => [{ type: i1$7.Router }] });
 
 class PdfViewerComponent {
     // data = inject(NZ_MODAL_DATA);
     dataType = null;
     pdfData;
+    showPrintButton = false;
+    showDownloadButton = false;
+    /** Legal values: undefined, 'auto', 'page-actual', 'page-fit', 'page-width', or '50' (or any other percentage) */
+    zoom;
+    height = '75vh';
     ngOnInit() {
         // this.dataType = this.data.dataType;
         // this.pdfData = this.data.pdfData;
@@ -3671,15 +3797,23 @@ class PdfViewerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: PdfViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: PdfViewerComponent, isStandalone: true, selector: "pdf-viewer", inputs: { dataType: "dataType", pdfData: "pdfData" }, ngImport: i0, template: "@if (dataType == \"base64\") {\n  <ngx-extended-pdf-viewer\n    [zoom]=\"100\"\n    [base64Src]=\"this.pdfData\"\n    [showPrintButton]=\"false\"\n    [showOpenFileButton]=\"false\"\n    [showDownloadButton]=\"false\"\n  ></ngx-extended-pdf-viewer>\n}\n\n@if (dataType == \"bytes\") {\n  <ngx-extended-pdf-viewer\n    [zoom]=\"100\"\n    [src]=\"this.pdfData\"\n    [showPrintButton]=\"false\"\n    [showOpenFileButton]=\"false\"\n    [showDownloadButton]=\"false\"\n  ></ngx-extended-pdf-viewer>\n}\n", dependencies: [{ kind: "ngmodule", type: NgxExtendedPdfViewerModule }, { kind: "component", type: i1$7.NgxExtendedPdfViewerComponent, selector: "ngx-extended-pdf-viewer", inputs: ["customFindbarInputArea", "customToolbar", "customFindbar", "customFindbarButtons", "customPdfViewer", "customSecondaryToolbar", "customSidebar", "customThumbnail", "customFreeFloatingBar", "showFreeFloatingBar", "enableDragAndDrop", "forceUsingLegacyES5", "formData", "disableForms", "pageViewMode", "scrollMode", "authorization", "httpHeaders", "contextMenuAllowed", "enablePrint", "enablePrintAutoRotate", "forceFullReloadOfJavaScriptCode", "showTextEditor", "showStampEditor", "showDrawEditor", "showHighlightEditor", "logLevel", "relativeCoordsOptions", "minifiedJSLibraries", "printResolution", "rotation", "src", "base64Src", "minHeight", "height", "backgroundColor", "filenameForDownload", "ignoreKeyboard", "ignoreKeys", "acceptKeys", "imageResourcesPath", "localeFolderPath", "language", "listenToURL", "nameddest", "password", "replaceBrowserPrint", "useInlineScripts", "showUnverifiedSignatures", "startTabindex", "showSidebarButton", "sidebarVisible", "activeSidebarView", "findbarVisible", "propertiesDialogVisible", "showFindButton", "showFindHighlightAll", "showFindMatchCase", "showFindMultiple", "showFindRegexp", "showFindEntireWord", "showFindMatchDiacritics", "showFindResultsCount", "showFindMessages", "showPagingButtons", "showFirstAndLastPageButtons", "showPreviousAndNextPageButtons", "showPageNumber", "showPageLabel", "showZoomButtons", "showZoomDropdown", "showPresentationModeButton", "showOpenFileButton", "showPrintButton", "showDownloadButton", "theme", "showToolbar", "showSecondaryToolbarButton", "showSinglePageModeButton", "showVerticalScrollButton", "showHorizontalScrollButton", "showWrappedScrollButton", "showInfiniteScrollButton", "showBookModeButton", "showRotateButton", "showRotateCwButton", "showRotateCcwButton", "handTool", "showHandToolButton", "showSpreadButton", "showPropertiesButton", "showBorders", "spread", "showScrollingButtons", "page", "pageLabel", "textLayer", "zoom", "zoomLevels", "maxZoom", "minZoom", "mobileFriendlyZoom"], outputs: ["annotationEditorEvent", "formDataChange", "pageViewModeChange", "progress", "srcChange", "scrollModeChange", "afterPrint", "beforePrint", "currentZoomFactor", "rotationChange", "annotationLayerRendered", "annotationEditorLayerRendered", "xfaLayerRendered", "outlineLoaded", "attachmentsloaded", "layersloaded", "sidebarVisibleChange", "activeSidebarViewChange", "findbarVisibleChange", "propertiesDialogVisibleChange", "handToolChange", "spreadChange", "thumbnailDrawn", "pageChange", "pageLabelChange", "pagesLoaded", "pageRender", "pageRendered", "pdfDownloaded", "pdfLoaded", "pdfLoadingStarts", "pdfLoadingFailed", "textLayerRendered", "annotationEditorModeChanged", "updateFindMatchesCount", "updateFindState", "zoomChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: PdfViewerComponent, isStandalone: true, selector: "pdf-viewer", inputs: { dataType: "dataType", pdfData: "pdfData", showPrintButton: "showPrintButton", showDownloadButton: "showDownloadButton", zoom: "zoom", height: "height" }, ngImport: i0, template: "@if (dataType == \"base64\") {\r\n  <ngx-extended-pdf-viewer\r\n    [height]=\"height\"\r\n    [zoom]=\"zoom || 100\"\r\n    [base64Src]=\"this.pdfData\"\r\n    [showPrintButton]=\"showPrintButton\"\r\n    [showDownloadButton]=\"showDownloadButton\"\r\n    [showOpenFileButton]=\"false\"\r\n    [showBookModeButton]=\"false\"\r\n    [showDrawEditor]=\"false\"\r\n    [showTextEditor]=\"false\"\r\n    [showDrawEditor]=\"false\"\r\n    [showFreeFloatingBar]=\"false\"\r\n    [showHighlightEditor]=\"false\"\r\n    [showHandToolButton]=\"false\"\r\n    [showPresentationModeButton]=\"false\"\r\n    [showStampEditor]=\"false\"\r\n  ></ngx-extended-pdf-viewer>\r\n}\r\n\r\n@if (dataType == \"bytes\") {\r\n  <ngx-extended-pdf-viewer\r\n    [height]=\"height\"\r\n    [zoom]=\"zoom || 100\"\r\n    [src]=\"this.pdfData\"\r\n    [showPrintButton]=\"showPrintButton\"\r\n    [showDownloadButton]=\"showDownloadButton\"\r\n    [showOpenFileButton]=\"false\"\r\n    [showBookModeButton]=\"false\"\r\n    [showDrawEditor]=\"false\"\r\n    [showTextEditor]=\"false\"\r\n    [showDrawEditor]=\"false\"\r\n    [showFreeFloatingBar]=\"false\"\r\n    [showHighlightEditor]=\"false\"\r\n    [showHandToolButton]=\"false\"\r\n    [showPresentationModeButton]=\"false\"\r\n    [showStampEditor]=\"false\"\r\n  ></ngx-extended-pdf-viewer>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: NgxExtendedPdfViewerModule }, { kind: "component", type: i1$8.NgxExtendedPdfViewerComponent, selector: "ngx-extended-pdf-viewer", inputs: ["customFindbarInputArea", "customToolbar", "customFindbar", "customFindbarButtons", "customPdfViewer", "customSecondaryToolbar", "customSidebar", "customThumbnail", "customFreeFloatingBar", "showFreeFloatingBar", "enableDragAndDrop", "forceUsingLegacyES5", "formData", "disableForms", "pageViewMode", "scrollMode", "authorization", "httpHeaders", "contextMenuAllowed", "enablePrint", "enablePrintAutoRotate", "forceFullReloadOfJavaScriptCode", "showTextEditor", "showStampEditor", "showDrawEditor", "showHighlightEditor", "logLevel", "relativeCoordsOptions", "minifiedJSLibraries", "printResolution", "rotation", "src", "base64Src", "minHeight", "height", "backgroundColor", "filenameForDownload", "ignoreKeyboard", "ignoreKeys", "acceptKeys", "imageResourcesPath", "localeFolderPath", "language", "listenToURL", "nameddest", "password", "replaceBrowserPrint", "useInlineScripts", "showUnverifiedSignatures", "startTabindex", "showSidebarButton", "sidebarVisible", "activeSidebarView", "findbarVisible", "propertiesDialogVisible", "showFindButton", "showFindHighlightAll", "showFindMatchCase", "showFindMultiple", "showFindRegexp", "showFindEntireWord", "showFindMatchDiacritics", "showFindResultsCount", "showFindMessages", "showPagingButtons", "showFirstAndLastPageButtons", "showPreviousAndNextPageButtons", "showPageNumber", "showPageLabel", "showZoomButtons", "showZoomDropdown", "showPresentationModeButton", "showOpenFileButton", "showPrintButton", "showDownloadButton", "theme", "showToolbar", "showSecondaryToolbarButton", "showSinglePageModeButton", "showVerticalScrollButton", "showHorizontalScrollButton", "showWrappedScrollButton", "showInfiniteScrollButton", "showBookModeButton", "showRotateButton", "showRotateCwButton", "showRotateCcwButton", "handTool", "showHandToolButton", "showSpreadButton", "showPropertiesButton", "showBorders", "spread", "showScrollingButtons", "page", "pageLabel", "textLayer", "zoom", "zoomLevels", "maxZoom", "minZoom", "mobileFriendlyZoom"], outputs: ["annotationEditorEvent", "formDataChange", "pageViewModeChange", "progress", "srcChange", "scrollModeChange", "afterPrint", "beforePrint", "currentZoomFactor", "rotationChange", "annotationLayerRendered", "annotationEditorLayerRendered", "xfaLayerRendered", "outlineLoaded", "attachmentsloaded", "layersloaded", "sidebarVisibleChange", "activeSidebarViewChange", "findbarVisibleChange", "propertiesDialogVisibleChange", "handToolChange", "spreadChange", "thumbnailDrawn", "pageChange", "pageLabelChange", "pagesLoaded", "pageRender", "pageRendered", "pdfDownloaded", "pdfLoaded", "pdfLoadingStarts", "pdfLoadingFailed", "textLayerRendered", "annotationEditorModeChanged", "updateFindMatchesCount", "updateFindState", "zoomChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: PdfViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdf-viewer', imports: [NgxExtendedPdfViewerModule], template: "@if (dataType == \"base64\") {\n  <ngx-extended-pdf-viewer\n    [zoom]=\"100\"\n    [base64Src]=\"this.pdfData\"\n    [showPrintButton]=\"false\"\n    [showOpenFileButton]=\"false\"\n    [showDownloadButton]=\"false\"\n  ></ngx-extended-pdf-viewer>\n}\n\n@if (dataType == \"bytes\") {\n  <ngx-extended-pdf-viewer\n    [zoom]=\"100\"\n    [src]=\"this.pdfData\"\n    [showPrintButton]=\"false\"\n    [showOpenFileButton]=\"false\"\n    [showDownloadButton]=\"false\"\n  ></ngx-extended-pdf-viewer>\n}\n" }]
+            args: [{ selector: 'pdf-viewer', imports: [NgxExtendedPdfViewerModule], template: "@if (dataType == \"base64\") {\r\n  <ngx-extended-pdf-viewer\r\n    [height]=\"height\"\r\n    [zoom]=\"zoom || 100\"\r\n    [base64Src]=\"this.pdfData\"\r\n    [showPrintButton]=\"showPrintButton\"\r\n    [showDownloadButton]=\"showDownloadButton\"\r\n    [showOpenFileButton]=\"false\"\r\n    [showBookModeButton]=\"false\"\r\n    [showDrawEditor]=\"false\"\r\n    [showTextEditor]=\"false\"\r\n    [showDrawEditor]=\"false\"\r\n    [showFreeFloatingBar]=\"false\"\r\n    [showHighlightEditor]=\"false\"\r\n    [showHandToolButton]=\"false\"\r\n    [showPresentationModeButton]=\"false\"\r\n    [showStampEditor]=\"false\"\r\n  ></ngx-extended-pdf-viewer>\r\n}\r\n\r\n@if (dataType == \"bytes\") {\r\n  <ngx-extended-pdf-viewer\r\n    [height]=\"height\"\r\n    [zoom]=\"zoom || 100\"\r\n    [src]=\"this.pdfData\"\r\n    [showPrintButton]=\"showPrintButton\"\r\n    [showDownloadButton]=\"showDownloadButton\"\r\n    [showOpenFileButton]=\"false\"\r\n    [showBookModeButton]=\"false\"\r\n    [showDrawEditor]=\"false\"\r\n    [showTextEditor]=\"false\"\r\n    [showDrawEditor]=\"false\"\r\n    [showFreeFloatingBar]=\"false\"\r\n    [showHighlightEditor]=\"false\"\r\n    [showHandToolButton]=\"false\"\r\n    [showPresentationModeButton]=\"false\"\r\n    [showStampEditor]=\"false\"\r\n  ></ngx-extended-pdf-viewer>\r\n}\r\n" }]
         }], propDecorators: { dataType: [{
                 type: Input
             }], pdfData: [{
                 type: Input
+            }], showPrintButton: [{
+                type: Input
+            }], showDownloadButton: [{
+                type: Input
+            }], zoom: [{
+                type: Input
+            }], height: [{
+                type: Input
             }] } });
 
 // global-spinner.component.ts
@@ -3701,13 +3835,13 @@ class GlobalSpinnerComponent {
         this.sub.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: GlobalSpinnerComponent, deps: [{ token: LoadingService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: GlobalSpinnerComponent, isStandalone: true, selector: "app-global-spinner", ngImport: i0, template: `
-    @if (visible) {
-      <div class="global-spinner" [@fadeInOut]>
-        <nz-spin [nzSpinning]="true" style="position: relative; bottom: 50px;"></nz-spin>
-      </div>
-    }
-  `, isInline: true, styles: [".global-spinner{position:fixed;z-index:1200;top:50px;left:0;width:100vw;height:100vh;background-color:#fffc;display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: NzSpinModule }, { kind: "component", type: i2$3.NzSpinComponent, selector: "nz-spin", inputs: ["nzIndicator", "nzSize", "nzTip", "nzDelay", "nzSimple", "nzSpinning"], exportAs: ["nzSpin"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: GlobalSpinnerComponent, isStandalone: true, selector: "app-global-spinner", ngImport: i0, template: `
+    @if (visible) {
+      <div class="global-spinner" [@fadeInOut]>
+        <nz-spin [nzSpinning]="true" style="position: relative; bottom: var(--app-header-height);"></nz-spin>
+      </div>
+    }
+  `, isInline: true, styles: [".global-spinner{position:fixed;z-index:1200;top:var(--app-header-height);left:0;width:100vw;height:100vh;background-color:#fffc;display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: NzSpinModule }, { kind: "component", type: i2$1.NzSpinComponent, selector: "nz-spin", inputs: ["nzIndicator", "nzSize", "nzTip", "nzDelay", "nzSimple", "nzSpinning"], exportAs: ["nzSpin"] }], animations: [
             trigger('fadeInOut', [
                 transition(':enter', [style({ opacity: 0 }), animate('250ms ease-in', style({ opacity: 1 }))]),
                 transition(':leave', [animate('250ms ease-out', style({ opacity: 0 }))]),
@@ -3716,18 +3850,18 @@ class GlobalSpinnerComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: GlobalSpinnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-global-spinner', template: `
-    @if (visible) {
-      <div class="global-spinner" [@fadeInOut]>
-        <nz-spin [nzSpinning]="true" style="position: relative; bottom: 50px;"></nz-spin>
-      </div>
-    }
+            args: [{ selector: 'app-global-spinner', template: `
+    @if (visible) {
+      <div class="global-spinner" [@fadeInOut]>
+        <nz-spin [nzSpinning]="true" style="position: relative; bottom: var(--app-header-height);"></nz-spin>
+      </div>
+    }
   `, animations: [
                         trigger('fadeInOut', [
                             transition(':enter', [style({ opacity: 0 }), animate('250ms ease-in', style({ opacity: 1 }))]),
                             transition(':leave', [animate('250ms ease-out', style({ opacity: 0 }))]),
                         ]),
-                    ], imports: [NzSpinModule], styles: [".global-spinner{position:fixed;z-index:1200;top:50px;left:0;width:100vw;height:100vh;background-color:#fffc;display:flex;align-items:center;justify-content:center}\n"] }]
+                    ], imports: [NzSpinModule], styles: [".global-spinner{position:fixed;z-index:1200;top:var(--app-header-height);left:0;width:100vw;height:100vh;background-color:#fffc;display:flex;align-items:center;justify-content:center}\n"] }]
         }], ctorParameters: () => [{ type: LoadingService }] });
 
 class Height {
@@ -3767,24 +3901,24 @@ class Box {
     width = 0;
     height = 0;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: Box, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: Box, isStandalone: true, selector: "box", inputs: { display: "display", width: "width", height: "height" }, ngImport: i0, template: `<div
-    [ngStyle]="{
-      height: height + 'px',
-      'padding-left': width + 'px',
-      display: display ? display : width && height ? 'block' : height ? 'block' : width ? 'inline' : display,
-    }"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: Box, isStandalone: true, selector: "box", inputs: { display: "display", width: "width", height: "height" }, ngImport: i0, template: `<div
+    [ngStyle]="{
+      height: height + 'px',
+      'padding-left': width + 'px',
+      display: display ? display : width && height ? 'block' : height ? 'block' : width ? 'inline' : display,
+    }"
   ></div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: Box, decorators: [{
             type: Component,
             args: [{
                     selector: 'box',
-                    template: `<div
-    [ngStyle]="{
-      height: height + 'px',
-      'padding-left': width + 'px',
-      display: display ? display : width && height ? 'block' : height ? 'block' : width ? 'inline' : display,
-    }"
+                    template: `<div
+    [ngStyle]="{
+      height: height + 'px',
+      'padding-left': width + 'px',
+      display: display ? display : width && height ? 'block' : height ? 'block' : width ? 'inline' : display,
+    }"
   ></div>`,
                     imports: [CommonModule],
                 }]
@@ -3986,28 +4120,28 @@ class IconAdd {
      */
     size = 16;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IconAdd, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: IconAdd, isStandalone: true, selector: "icon-add", inputs: { size: "size" }, outputs: { click: "click" }, ngImport: i0, template: `
-    <nz-icon
-      nzType="plus"
-      nzTheme="outline"
-      class="color-primary cursor-pointer"
-      [ngStyle]="{ 'font-size.px': size }"
-      (click)="$event.stopPropagation(); click.emit()"
-    ></nz-icon>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: IconAdd, isStandalone: true, selector: "icon-add", inputs: { size: "size" }, outputs: { click: "click" }, ngImport: i0, template: `
+    <nz-icon
+      nzType="plus"
+      nzTheme="outline"
+      class="color-primary cursor-pointer"
+      [ngStyle]="{ 'font-size.px': size }"
+      (click)="$event.stopPropagation(); click.emit()"
+    ></nz-icon>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IconAdd, decorators: [{
             type: Component,
             args: [{
                     selector: 'icon-add',
-                    template: `
-    <nz-icon
-      nzType="plus"
-      nzTheme="outline"
-      class="color-primary cursor-pointer"
-      [ngStyle]="{ 'font-size.px': size }"
-      (click)="$event.stopPropagation(); click.emit()"
-    ></nz-icon>
+                    template: `
+    <nz-icon
+      nzType="plus"
+      nzTheme="outline"
+      class="color-primary cursor-pointer"
+      [ngStyle]="{ 'font-size.px': size }"
+      (click)="$event.stopPropagation(); click.emit()"
+    ></nz-icon>
   `,
                     imports: [CommonModule, NzIconModule],
                 }]
@@ -4023,28 +4157,28 @@ class IconEdit {
      */
     size = 16;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IconEdit, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: IconEdit, isStandalone: true, selector: "icon-edit", inputs: { size: "size" }, outputs: { click: "click" }, ngImport: i0, template: `
-    <nz-icon
-      nzType="edit"
-      nzTheme="outline"
-      class="color-primary cursor-pointer"
-      [ngStyle]="{ 'font-size.px': size }"
-      (click)="$event.stopPropagation(); click.emit()"
-    ></nz-icon>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: IconEdit, isStandalone: true, selector: "icon-edit", inputs: { size: "size" }, outputs: { click: "click" }, ngImport: i0, template: `
+    <nz-icon
+      nzType="edit"
+      nzTheme="outline"
+      class="color-primary cursor-pointer"
+      [ngStyle]="{ 'font-size.px': size }"
+      (click)="$event.stopPropagation(); click.emit()"
+    ></nz-icon>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IconEdit, decorators: [{
             type: Component,
             args: [{
                     selector: 'icon-edit',
-                    template: `
-    <nz-icon
-      nzType="edit"
-      nzTheme="outline"
-      class="color-primary cursor-pointer"
-      [ngStyle]="{ 'font-size.px': size }"
-      (click)="$event.stopPropagation(); click.emit()"
-    ></nz-icon>
+                    template: `
+    <nz-icon
+      nzType="edit"
+      nzTheme="outline"
+      class="color-primary cursor-pointer"
+      [ngStyle]="{ 'font-size.px': size }"
+      (click)="$event.stopPropagation(); click.emit()"
+    ></nz-icon>
   `,
                     imports: [CommonModule, NzIconModule],
                 }]
@@ -4060,28 +4194,28 @@ class IconSave {
      */
     size = 16;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IconSave, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: IconSave, isStandalone: true, selector: "icon-save", inputs: { size: "size" }, outputs: { click: "click" }, ngImport: i0, template: `
-    <nz-icon
-      nzType="save"
-      nzTheme="outline"
-      class="color-primary cursor-pointer"
-      [ngStyle]="{ 'font-size.px': size }"
-      (click)="$event.stopPropagation(); click.emit()"
-    ></nz-icon>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: IconSave, isStandalone: true, selector: "icon-save", inputs: { size: "size" }, outputs: { click: "click" }, ngImport: i0, template: `
+    <nz-icon
+      nzType="save"
+      nzTheme="outline"
+      class="color-primary cursor-pointer"
+      [ngStyle]="{ 'font-size.px': size }"
+      (click)="$event.stopPropagation(); click.emit()"
+    ></nz-icon>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IconSave, decorators: [{
             type: Component,
             args: [{
                     selector: 'icon-save',
-                    template: `
-    <nz-icon
-      nzType="save"
-      nzTheme="outline"
-      class="color-primary cursor-pointer"
-      [ngStyle]="{ 'font-size.px': size }"
-      (click)="$event.stopPropagation(); click.emit()"
-    ></nz-icon>
+                    template: `
+    <nz-icon
+      nzType="save"
+      nzTheme="outline"
+      class="color-primary cursor-pointer"
+      [ngStyle]="{ 'font-size.px': size }"
+      (click)="$event.stopPropagation(); click.emit()"
+    ></nz-icon>
   `,
                     imports: [CommonModule, NzIconModule],
                 }]
@@ -4097,28 +4231,28 @@ class IconDelete {
      */
     size = 16;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IconDelete, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: IconDelete, isStandalone: true, selector: "icon-delete", inputs: { size: "size" }, outputs: { click: "click" }, ngImport: i0, template: `
-    <nz-icon
-      nzType="delete"
-      nzTheme="outline"
-      class="color-warn cursor-pointer"
-      [ngStyle]="{ 'font-size.px': size }"
-      (click)="$event.stopPropagation(); click.emit()"
-    ></nz-icon>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: IconDelete, isStandalone: true, selector: "icon-delete", inputs: { size: "size" }, outputs: { click: "click" }, ngImport: i0, template: `
+    <nz-icon
+      nzType="delete"
+      nzTheme="outline"
+      class="color-warn cursor-pointer"
+      [ngStyle]="{ 'font-size.px': size }"
+      (click)="$event.stopPropagation(); click.emit()"
+    ></nz-icon>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IconDelete, decorators: [{
             type: Component,
             args: [{
                     selector: 'icon-delete',
-                    template: `
-    <nz-icon
-      nzType="delete"
-      nzTheme="outline"
-      class="color-warn cursor-pointer"
-      [ngStyle]="{ 'font-size.px': size }"
-      (click)="$event.stopPropagation(); click.emit()"
-    ></nz-icon>
+                    template: `
+    <nz-icon
+      nzType="delete"
+      nzTheme="outline"
+      class="color-warn cursor-pointer"
+      [ngStyle]="{ 'font-size.px': size }"
+      (click)="$event.stopPropagation(); click.emit()"
+    ></nz-icon>
   `,
                     imports: [CommonModule, NzIconModule],
                 }]
@@ -4134,28 +4268,28 @@ class IconView {
      */
     size = 16;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IconView, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: IconView, isStandalone: true, selector: "icon-view", inputs: { size: "size" }, outputs: { click: "click" }, ngImport: i0, template: `
-    <nz-icon
-      nzType="eye"
-      nzTheme="outline"
-      class="color-primary cursor-pointer"
-      [ngStyle]="{ 'font-size.px': size }"
-      (click)="$event.stopPropagation(); click.emit()"
-    ></nz-icon>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: IconView, isStandalone: true, selector: "icon-view", inputs: { size: "size" }, outputs: { click: "click" }, ngImport: i0, template: `
+    <nz-icon
+      nzType="eye"
+      nzTheme="outline"
+      class="color-primary cursor-pointer"
+      [ngStyle]="{ 'font-size.px': size }"
+      (click)="$event.stopPropagation(); click.emit()"
+    ></nz-icon>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IconView, decorators: [{
             type: Component,
             args: [{
                     selector: 'icon-view',
-                    template: `
-    <nz-icon
-      nzType="eye"
-      nzTheme="outline"
-      class="color-primary cursor-pointer"
-      [ngStyle]="{ 'font-size.px': size }"
-      (click)="$event.stopPropagation(); click.emit()"
-    ></nz-icon>
+                    template: `
+    <nz-icon
+      nzType="eye"
+      nzTheme="outline"
+      class="color-primary cursor-pointer"
+      [ngStyle]="{ 'font-size.px': size }"
+      (click)="$event.stopPropagation(); click.emit()"
+    ></nz-icon>
   `,
                     imports: [CommonModule, NzIconModule],
                 }]
@@ -4171,28 +4305,28 @@ class IconSearch {
      */
     size = 16;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IconSearch, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: IconSearch, isStandalone: true, selector: "icon-search", inputs: { size: "size" }, outputs: { click: "click" }, ngImport: i0, template: `
-    <nz-icon
-      nzType="search"
-      nzTheme="outline"
-      class="color-primary cursor-pointer"
-      [ngStyle]="{ 'font-size.px': size }"
-      (click)="$event.stopPropagation(); click.emit()"
-    ></nz-icon>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: IconSearch, isStandalone: true, selector: "icon-search", inputs: { size: "size" }, outputs: { click: "click" }, ngImport: i0, template: `
+    <nz-icon
+      nzType="search"
+      nzTheme="outline"
+      class="color-primary cursor-pointer"
+      [ngStyle]="{ 'font-size.px': size }"
+      (click)="$event.stopPropagation(); click.emit()"
+    ></nz-icon>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IconSearch, decorators: [{
             type: Component,
             args: [{
                     selector: 'icon-search',
-                    template: `
-    <nz-icon
-      nzType="search"
-      nzTheme="outline"
-      class="color-primary cursor-pointer"
-      [ngStyle]="{ 'font-size.px': size }"
-      (click)="$event.stopPropagation(); click.emit()"
-    ></nz-icon>
+                    template: `
+    <nz-icon
+      nzType="search"
+      nzTheme="outline"
+      class="color-primary cursor-pointer"
+      [ngStyle]="{ 'font-size.px': size }"
+      (click)="$event.stopPropagation(); click.emit()"
+    ></nz-icon>
   `,
                     imports: [CommonModule, NzIconModule],
                 }]
@@ -6178,7 +6312,7 @@ class WorkflowEditorComponent extends BaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WorkflowEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: WorkflowEditorComponent, isStandalone: true, selector: "app-workflow-editor", inputs: { lstOrg: "lstOrg", lstRole: "lstRole", lstEmailTemplate: "lstEmailTemplate" }, outputs: { onSave: "onSave", onDeleteStage: "onDeleteStage", onDeleteAction: "onDeleteAction", onDeleteRule: "onDeleteRule", onDeleteRuleLine: "onDeleteRuleLine" }, host: { listeners: { "window:keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }, { propertyName: "svgRef", first: true, predicate: ["svg"], descendants: true, static: true }, { propertyName: "inputStageStatusElement", first: true, predicate: ["inputStageStatusElement"], descendants: true }, { propertyName: "inputActionTypeElement", first: true, predicate: ["inputActionTypeElement"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  #canvasRef\r\n  class=\"workflow-canvas\"\r\n  [class.connecting]=\"!!connectingFrom\"\r\n  [class.dragging-point]=\"!!draggingPoint\"\r\n  [style.width.px]=\"getCanvasWidth()\"\r\n  [style.height.px]=\"getCanvasHeight()\"\r\n  (mousedown)=\"onMouseDownCanvas($event)\"\r\n  (mousemove)=\"onMouseMoveCanvas($event)\"\r\n  (mouseup)=\"onMouseUpCanvas($event)\"\r\n  (click)=\"onClickCanvas($event)\"\r\n>\r\n  <!-- \r\n\r\n  [style.width.px]=\"getCanvasWidth()\"\r\n  [style.height.px]=\"getCanvasHeight()\" \r\n\r\n  [style.width.px]=\"CANVAS_WIDTH\"\r\n  [style.height.px]=\"CANVAS_HEIGHT\"\r\n\r\n  style=\"width: 100%; height: calc(100vh - 120px)\"\r\n  \r\n  -->\r\n\r\n  <div class=\"toolbar\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Editor setting\" (click)=\"settingVisible = true\">\r\n      <nz-icon nzType=\"setting\"></nz-icon>\r\n    </button>\r\n\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Infomation\" (click)=\"infoVisible = true\">\r\n      <nz-icon nzType=\"info-circle\"></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Template setting\" (click)=\"drawTemplateVisibel = true\">\r\n      <nz-icon nzType=\"setting\"></nz-icon> T\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <button nz-button nzSize=\"small\" nzDanger [nzLoading]=\"!ready\" nz-tooltip=\"Save (Ctrl + S)\" (click)=\"save()\">\r\n      <nz-icon nzType=\"save\"></nz-icon>\r\n    </button>\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Add stage\" (click)=\"addStage()\">\r\n      <nz-icon nzType=\"plus\" class=\"color-primary\"></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      [nzType]=\"isMoveMode ? 'primary' : 'default'\"\r\n      nz-tooltip=\"Move mode\"\r\n      (click)=\"isMoveMode = true\"\r\n    >\r\n      <nz-icon><img src=\"/assets/icon/hand-palm.png\" width=\"19\" height=\"19\" /></nz-icon>\r\n    </button>\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      [nzType]=\"!isMoveMode ? 'primary' : 'default'\"\r\n      nz-tooltip=\"Select mode\"\r\n      (click)=\"isMoveMode = false\"\r\n    >\r\n      <nz-icon><img src=\"/assets/icon/cursor.png\" width=\"19\" height=\"19\" /></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <!-- UNDO / REDO -->\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      nzType=\"default\"\r\n      [disabled]=\"undoStack.length === 0\"\r\n      nz-tooltip=\"Undo\"\r\n      (click)=\"undo()\"\r\n    >\r\n      <nz-icon nzType=\"undo\"></nz-icon>\r\n    </button>\r\n\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      nzType=\"default\"\r\n      [disabled]=\"redoStack.length === 0\"\r\n      nz-tooltip=\"Redo\"\r\n      (click)=\"redo()\"\r\n    >\r\n      <nz-icon nzType=\"redo\"></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <!-- ALIGN -->\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignLeft()\">\u27F8</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignCenter()\">\u2261</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignRight()\">\u27F9</button>\r\n\r\n    <span class=\"divider\"></span>\r\n\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignTop()\">\u21D1</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignMiddle()\">\u2550</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignBottom()\">\u21D3</button>\r\n\r\n    <span class=\"divider\"></span>\r\n\r\n    <!-- DISTRIBUTE -->\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeHorizontal()\">\r\n      \u21C4\r\n    </button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeVertical()\">\u21C5</button>\r\n  </div>\r\n\r\n  <div\r\n    class=\"canvas-content\"\r\n    [class.panning]=\"isMoveMode\"\r\n    [style.transform]=\"'translate(' + template.editorOption.panX + 'px,' + template.editorOption.panY + 'px)'\"\r\n  >\r\n    <!-- GRID -->\r\n    <div *ngIf=\"wfcSetting.ShowGrid\" class=\"grid-layer\"></div>\r\n\r\n    <!-- <div class=\"zoom-toolbar\">\r\n      <button nz-button nzSize=\"small\" (click)=\"zoomOut()\">\u2212</button>\r\n      <span>{{ zoom * 100 | number: \"1.0-0\" }}%</span>\r\n      <button nz-button nzSize=\"small\" (click)=\"zoomIn()\">+</button>\r\n    </div> -->\r\n\r\n    <!-- SVG EDGES -->\r\n    <svg #svg class=\"edges-layer\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\">\r\n      <g [attr.transform]=\"svgTransform\">\r\n        <!-- DEFS -->\r\n        <defs>\r\n          <!-- glow effect -->\r\n          <filter id=\"edge-glow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\r\n            <feGaussianBlur stdDeviation=\"2\" result=\"blur\" />\r\n            <feMerge>\r\n              <feMergeNode in=\"blur\" />\r\n              <feMergeNode in=\"SourceGraphic\" />\r\n            </feMerge>\r\n          </filter>\r\n\r\n          <!-- arrow markers -->\r\n          <marker\r\n            id=\"arrow-blue\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            refX=\"10\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"blue\" d=\"M0,0 L10,5 L0,10\"></path>\r\n          </marker>\r\n\r\n          <marker\r\n            id=\"arrow-red\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            refX=\"10\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"red\" d=\"M0,0 L10,5 L0,10\"></path>\r\n          </marker>\r\n\r\n          <marker\r\n            id=\"arrow-blue-start\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            viewBox=\"0 0 10 10\"\r\n            refX=\"0\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"blue\" d=\"M10,0 L0,5 L10,10\"></path>\r\n          </marker>\r\n\r\n          <marker\r\n            id=\"arrow-red-start\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            viewBox=\"0 0 10 10\"\r\n            refX=\"0\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"red\" d=\"M10,0 L0,5 L10,10\"></path>\r\n          </marker>\r\n        </defs>\r\n\r\n        <!-- EDGES B\u00CCNH TH\u01AF\u1EDCNG -->\r\n        <ng-container *ngFor=\"let e of normalEdges; let i = index\">\r\n          <path\r\n            class=\"edge\"\r\n            [attr.id]=\"'edge-path-' + i\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            marker-end=\"url(#arrow-blue)\"\r\n            [attr.marker-start]=\"e.allowBack ? 'url(#arrow-blue-start)' : ''\"\r\n          ></path>\r\n\r\n          <path\r\n            class=\"edge-hit\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            (mouseenter)=\"onMouseEnterEdge(e)\"\r\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\r\n            (click)=\"onClickEdge(e, $event)\"\r\n          ></path>\r\n\r\n          <!-- LABEL -->\r\n          <!-- text b\u00E1m theo line -->\r\n          <!-- \r\n          <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\r\n            <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.ActionText }}\r\n            </textPath>\r\n          </text> \r\n          \r\n          <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\r\n            <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.labelBack }}\r\n            </textPath>\r\n          </text>\r\n          -->\r\n\r\n          <!-- text th\u1EB3ng n\u1EB1m ngang -->\r\n          <text\r\n            *ngIf=\"e.ActionText\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.ActionText }}\r\n          </text>\r\n\r\n          <text\r\n            *ngIf=\"e.allowBack && e.labelBack\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.labelBack }}\r\n          </text>\r\n        </ng-container>\r\n\r\n        <!-- EDGE \u0110ANG HOVER (LU\u00D4N TR\u00CAN C\u00D9NG) -->\r\n        <ng-container *ngFor=\"let e of hoverEdges; let i = index\">\r\n          <path\r\n            class=\"edge red\"\r\n            [attr.id]=\"'edge-path-hover-' + i\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            marker-end=\"url(#arrow-red)\"\r\n            [attr.marker-start]=\"e.allowBack ? 'url(#arrow-red-start)' : ''\"\r\n          ></path>\r\n\r\n          <path\r\n            class=\"edge-hit\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\r\n            (click)=\"onClickEdge(e, $event)\"\r\n          ></path>\r\n\r\n          <!-- LABEL -->\r\n          <!-- <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\r\n            <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.ActionText }}\r\n            </textPath>\r\n          </text>\r\n\r\n          <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\r\n            <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.labelBack }}\r\n            </textPath>\r\n          </text> -->\r\n\r\n          <text\r\n            *ngIf=\"e.ActionText\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.ActionText }}\r\n          </text>\r\n\r\n          <text\r\n            *ngIf=\"e.allowBack && e.labelBack\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.labelBack }}\r\n          </text>\r\n        </ng-container>\r\n\r\n        <!-- preview -->\r\n        <path\r\n          *ngIf=\"connectingFrom\"\r\n          class=\"edge\"\r\n          [attr.d]=\"buildPreviewPath()\"\r\n          stroke-dasharray=\"5,5\"\r\n          marker-end=\"url(#arrow-blue)\"\r\n        ></path>\r\n      </g>\r\n    </svg>\r\n\r\n    <div\r\n      *ngIf=\"isSelecting && selectStart && selectEnd\"\r\n      class=\"selection-box\"\r\n      [style.left.px]=\"Math.min(selectStart.x, selectEnd.x)\"\r\n      [style.top.px]=\"Math.min(selectStart.y, selectEnd.y)\"\r\n      [style.width.px]=\"Math.abs(selectEnd.x - selectStart.x)\"\r\n      [style.height.px]=\"Math.abs(selectEnd.y - selectStart.y)\"\r\n    ></div>\r\n\r\n    <!-- lstStage -->\r\n    @for (n of lstStage; track $index) {\r\n      <!-- START NODE -->\r\n      @if (n.StageType === \"_start_\") {\r\n        <nz-card\r\n          class=\"workflow-node workflow-node-start\"\r\n          [attr.data-id]=\"n.Code\"\r\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n          [style.left.px]=\"n.editorOption.x\"\r\n          [style.top.px]=\"n.editorOption.y\"\r\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n          nzSize=\"small\"\r\n          (mousedown)=\"onMouseDownNode($event, n)\"\r\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n        >\r\n          <nz-tag [nzColor]=\"'green'\"> START </nz-tag>\r\n\r\n          @if (!n.editorOption.isReverse) {\r\n            <!-- connector RIGHT: output -->\r\n            <div class=\"connector connector-right connector-start\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n          } @else {\r\n            <div\r\n              class=\"connector connector-right connector-start reverse\"\r\n              (click)=\"onClickConnector($event, n, 'right')\"\r\n            ></div>\r\n          }\r\n        </nz-card>\r\n      }\r\n      <!-- END NODE -->\r\n      @else if (n.StageType === \"_end_\") {\r\n        <nz-card\r\n          class=\"workflow-node workflow-node-end\"\r\n          [attr.data-id]=\"n.Code\"\r\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n          [style.left.px]=\"n.editorOption.x\"\r\n          [style.top.px]=\"n.editorOption.y\"\r\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n          nzSize=\"small\"\r\n          (mousedown)=\"onMouseDownNode($event, n)\"\r\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n        >\r\n          <nz-tag [nzColor]=\"'red'\"> END </nz-tag>\r\n\r\n          @if (!n.editorOption.isReverse) {\r\n            <!-- connector LEFT: input -->\r\n            <div class=\"connector connector-left connector-end\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n          } @else {\r\n            <div\r\n              class=\"connector connector-left connector-end reverse\"\r\n              (click)=\"onClickConnector($event, n, 'left')\"\r\n            ></div>\r\n          }\r\n        </nz-card>\r\n      } @else {\r\n        <nz-card\r\n          class=\"workflow-node\"\r\n          [attr.data-id]=\"n.Code\"\r\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n          [style.left.px]=\"n.editorOption.x\"\r\n          [style.top.px]=\"n.editorOption.y\"\r\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n          nzSize=\"small\"\r\n          (mousedown)=\"onMouseDownNode($event, n)\"\r\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n        >\r\n          <div class=\"title\">{{ n.Code }}</div>\r\n\r\n          <div>{{ n.Name }}</div>\r\n\r\n          @if (!n.editorOption.isReverse) {\r\n            <!-- connector RIGHT: output -->\r\n            <div class=\"connector connector-right\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n\r\n            <!-- connector LEFT: input -->\r\n            <div class=\"connector connector-left\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n          } @else {\r\n            <div class=\"connector connector-right reverse\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n            <div class=\"connector connector-left reverse\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n          }\r\n        </nz-card>\r\n      }\r\n    }\r\n\r\n    <!-- POINTS -->\r\n    @for (p of connectingPoints; track $index) {\r\n      @if (p != draggingPoint) {\r\n        <div\r\n          class=\"waypoint\"\r\n          [style.left.px]=\"p.x\"\r\n          [style.top.px]=\"p.y\"\r\n          (mousedown)=\"onmousedownPoint($event, p)\"\r\n          (contextmenu)=\"onRightClickPoint($event, hoverAction!, $index)\"\r\n        ></div>\r\n      } @else {\r\n        <div\r\n          class=\"waypoint dragging\"\r\n          [style.left.px]=\"p.x\"\r\n          [style.top.px]=\"p.y\"\r\n          (mousedown)=\"onmousedownPoint($event, p)\"\r\n        ></div>\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<!-- drawer TEMPLATE -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawTemplateTitle\"\r\n  nzPlacement=\"right\"\r\n  [nzWidth]=\"500\"\r\n  [nzClosable]=\"false\"\r\n  [nzVisible]=\"drawTemplateVisibel\"\r\n  [nzFooter]=\"footerTplTemplate\"\r\n  (nzOnClose)=\"drawTemplateVisibel = false\"\r\n>\r\n  <ng-template #drawTemplateTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Template </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <extend-select\r\n      [label]=\"'Org'\"\r\n      [lstItem]=\"lstOrg\"\r\n      [valueField]=\"'App_Org_Id'\"\r\n      [displayFields]=\"['Name', 'Code']\"\r\n      [(_ngModel)]=\"template.App_Org_Id\"\r\n    ></extend-select>\r\n    <extend-input [label]=\"'Code'\" [(_ngModel)]=\"template.Code\"></extend-input>\r\n    <extend-input [label]=\"'Name'\" [(_ngModel)]=\"template.Name\"></extend-input>\r\n    <extend-select\r\n      [label]=\"'Type'\"\r\n      [lstItem]=\"template.lstTemplateType\"\r\n      [valueField]=\"'Code'\"\r\n      [displayFields]=\"['Code', 'Name']\"\r\n      [(_ngModel)]=\"template.DocType\"\r\n    ></extend-select>\r\n    <extend-textarea [label]=\"'Desscription'\" [(_ngModel)]=\"template.Description\"></extend-textarea>\r\n    <extend-select\r\n      [label]=\"'Print template'\"\r\n      [lstItem]=\"template.lstTemplatePrint\"\r\n      [valueField]=\"'Code'\"\r\n      [displayFields]=\"['Code', 'Name']\"\r\n      [(_ngModel)]=\"template.TemplatePrint\"\r\n    ></extend-select>\r\n    <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 Day'\"\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 [class.text-bold]=\"action == hoverAction\" (click)=\"onclickaction(action)\">\r\n              <td style=\"border-bottom: solid 1px orange\">\r\n                ({{ $index + 1 }})\r\n                <nz-icon\r\n                  nzType=\"delete\"\r\n                  nzTheme=\"outline\"\r\n                  class=\"color-warn cursor-pointer icon-size-16\"\r\n                  (click)=\"$event.stopPropagation(); deleteAction(action)\"\r\n                ></nz-icon>\r\n              </td>\r\n              <td style=\"border-bottom: solid 1px orange\">\r\n                <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n                  <div nz-col [nzSpan]=\"8\">\r\n                    <nz-form-item>\r\n                      <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n                      <nz-form-control [nzSpan]=\"24\">\r\n                        <nz-input-group class=\"full-width\">\r\n                          <input\r\n                            nz-input\r\n                            [(ngModel)]=\"action.ActionStatus\"\r\n                            [nzAutocomplete]=\"auto\"\r\n                            (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n                            (click)=\"lstActionStatusFiltered = template.lstActionStatus\"\r\n                            (keyup.enter)=\"onenterAotu(action.ActionStatus)\"\r\n                            (blur)=\"onenterAotu(action.ActionStatus)\"\r\n                          />\r\n                          <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n                            @for (option of lstActionStatusFiltered; track $index) {\r\n                              <nz-auto-option [nzValue]=\"option.Code\" [nzLabel]=\"option.Code\">\r\n                                {{ option.Code }}\r\n                                <icon-delete\r\n                                  *ngIf=\"checkRemoveableActionStatus(option.Code)\"\r\n                                  style=\"float: right\"\r\n                                  [size]=\"12\"\r\n                                  (click)=\"handleClose(option.Code)\"\r\n                                ></icon-delete>\r\n                              </nz-auto-option>\r\n                            }\r\n                          </nz-autocomplete>\r\n                        </nz-input-group>\r\n                      </nz-form-control>\r\n                    </nz-form-item>\r\n                  </div>\r\n\r\n                  <extend-input\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Action text'\"\r\n                    [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]=\"'50vw'\"\r\n>\r\n  <ng-container *nzModalTitle>\r\n    ACTION RULE: [{{ selectedStage?.Code }}] {{ selectedStage?.Name }} > [{{ hoverAction?.ActionStatus }}]\r\n    {{ hoverAction?.ActionText }}\r\n  </ng-container>\r\n  <ng-container *nzModalContent>\r\n    @if (hoverAction && hoverAction.actionRule) {\r\n      <div nz-row [nzGutter]=\"32\">\r\n        <extend-input nz-col nzSpan=\"12\" [label]=\"'Code'\" [(_ngModel)]=\"hoverAction.actionRule.Code\"></extend-input>\r\n        <extend-input nz-col nzSpan=\"12\" [label]=\"'Name'\" [(_ngModel)]=\"hoverAction.actionRule.Name\"></extend-input>\r\n        <extend-input nz-col nzSpan=\"12\" [label]=\"'Note'\" [(_ngModel)]=\"hoverAction.actionRule.Note\"></extend-input>\r\n        <extend-checkbox\r\n          nz-col\r\n          nzSpan=\"12\"\r\n          [label]=\"'IsActive'\"\r\n          [(_ngModel)]=\"hoverAction.actionRule.IsActive\"\r\n        ></extend-checkbox>\r\n      </div>\r\n      <div nz-row [nzGutter]=\"16\">\r\n        <div nz-col nzSpan=\"24\">\r\n          <nz-table nzSize=\"small\" [nzData]=\"hoverAction.actionRule.lstLine\" [nzShowPagination]=\"false\">\r\n            <thead>\r\n              <tr>\r\n                <th [nzWidth]=\"'50px'\"><icon-add (click)=\"addActionRuleLine()\"></icon-add></th>\r\n                <th [nzWidth]=\"'25%'\">Template</th>\r\n                <th [nzWidth]=\"'25%'\">Template stage</th>\r\n                <th [nzWidth]=\"'25%'\">Template action</th>\r\n                <th [nzWidth]=\"'50px'\">IsActive</th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              @for (item of hoverAction.actionRule.lstLine; track $index) {\r\n                <tr>\r\n                  <td><icon-delete (click)=\"deleteActionRuleLine(hoverAction.actionRule, item)\"></icon-delete></td>\r\n                  <td>\r\n                    <extend-select\r\n                      #xxx\r\n                      [size]=\"'small'\"\r\n                      [lstItem]=\"lstTemplateForRule(item)\"\r\n                      [valueField]=\"'WF_Template_Id'\"\r\n                      [displayFields]=\"['Code', 'Name']\"\r\n                      [(_ngModel)]=\"item.WF_Template_Id\"\r\n                      (_ngModelChange)=\"item.WF_TemplateStage_Id = 0; item.WF_TemplateStageAction_Id = 0\"\r\n                    ></extend-select>\r\n                  </td>\r\n                  <td>\r\n                    <extend-select\r\n                      #yyy\r\n                      [size]=\"'small'\"\r\n                      [lstItem]=\"lstStageForRule(xxx._ngModel)\"\r\n                      [valueField]=\"'WF_TemplateStage_Id'\"\r\n                      [displayFields]=\"['Code', 'Name']\"\r\n                      [(_ngModel)]=\"item.WF_TemplateStage_Id\"\r\n                      (_ngModelChange)=\"item.WF_TemplateStageAction_Id = 0\"\r\n                    ></extend-select>\r\n                  </td>\r\n                  <td>\r\n                    <extend-select\r\n                      [size]=\"'small'\"\r\n                      [lstItem]=\"lstActionForRule(yyy._ngModel)\"\r\n                      [valueField]=\"'WF_TemplateStageAction_Id'\"\r\n                      [displayFields]=\"['ActionStatus', 'ActionText']\"\r\n                      [(_ngModel)]=\"item.WF_TemplateStageAction_Id\"\r\n                    ></extend-select>\r\n                  </td>\r\n                  <td class=\"text-center\">\r\n                    <extend-checkbox [(_ngModel)]=\"item.IsActive\"></extend-checkbox>\r\n                  </td>\r\n                </tr>\r\n              }\r\n            </tbody>\r\n          </nz-table>\r\n        </div>\r\n      </div>\r\n    }\r\n  </ng-container>\r\n  <ng-container *nzModalFooter>\r\n    <button nz-button nzType=\"primary\" (click)=\"actionRuleModalVisible = false\">OK</button>\r\n  </ng-container>\r\n</nz-modal>\r\n", styles: ["@charset \"UTF-8\";::ng-deep .workflow-wrapper{border:solid 1px lightgray;overflow:hidden;width:100%}.workflow-canvas{position:relative;background:#f0f2f5;cursor:default;overflow:hidden;outline:1px dashed rgba(0,0,0,.1)}.workflow-canvas .edges-layer{position:absolute;inset:0;width:100%;height:100%;z-index:1}.workflow-canvas .edges-layer path{stroke-width:2;fill:none}.canvas-content{transform-origin:0 0;width:100%;height:100%}.canvas-content{outline:1px dashed red}.canvas-content.panning{cursor:grab}.canvas-content.panning:active{cursor:grabbing}.workflow-canvas.panning{cursor:grab}.workflow-canvas.panning:active{cursor:grabbing}.workflow-canvas.connecting,.workflow-canvas.connecting .workflow-node{cursor:crosshair}.workflow-node{position:absolute;width:160px;cursor:grab;-webkit-user-select:none;user-select:none;z-index:2}.workflow-node:active{cursor:grabbing}.workflow-node.connecting-source,.workflow-node.selected,.workflow-node:hover:not(.workflow-node-start,.workflow-node-end){outline:2px dashed #1890ff}.workflow-node .title{font-weight:600;margin-bottom:6px}.workflow-node-start{width:0px}.workflow-node-start.connecting-source,.workflow-node-start.selected,.workflow-node-start:hover{outline:unset}.workflow-node-start.connecting-source nz-tag,.workflow-node-start.selected nz-tag,.workflow-node-start:hover nz-tag{outline:2px dashed}.workflow-node-start nz-tag{position:relative;top:45px;right:35px}.workflow-node-end{width:0px}.workflow-node-end.connecting-source,.workflow-node-end.selected,.workflow-node-end:hover{outline:unset}.workflow-node-end.connecting-source nz-tag,.workflow-node-end.selected nz-tag,.workflow-node-end:hover nz-tag{outline:2px dashed}.workflow-node-end nz-tag{position:relative;top:45px;right:32px}.connector{position:absolute;top:39px;width:12px;height:12px;background:#1890ff;border-radius:50%;transform:translateY(-50%);cursor:crosshair;transition:box-shadow .15s ease-out,transform .15s ease-out}.connector:hover{box-shadow:0 0 0 3px #1890ff4d;transform:translateY(-50%) scale(1.15)}.connector-right{right:-8px;background:orange}.connector-right.reverse,.connector-left{left:-8px}.connector-left.reverse{left:unset;right:-8px}.connector-start{width:16px;height:16px;right:-8px;background:green;box-shadow:0 0 0 3px #1890ff4d}.connector-end{width:16px;height:16px;left:-8px;background:#000;box-shadow:0 0 0 3px #1890ff4d}.edge{cursor:pointer;stroke:#1890ff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;fill:none;transition:stroke .15s ease}.edge-hit{stroke:transparent;stroke-width:18px!important;fill:none;cursor:pointer}.edge-hit:hover+.edge{stroke:#ff4d4f;stroke-width:2}.workflow-canvas.dragging-point .edge-hit{pointer-events:none}.edge:hover+.edge-label{fill:#1890ff;font-weight:500}.edge-label{font-size:12px;fill:#555;pointer-events:none;-webkit-user-select:none;user-select:none}.blue{stroke:#1890ff!important}.red{stroke:#ff4d4f!important;box-shadow:0 0 0 3px #1890ff4d!important}.workflow-svg{background:transparent;overflow:visible}.waypoint{position:absolute;width:10px;height:10px;background:#ff4d4f;border-radius:50%;transform:translate(-50%,-50%) scale(1);cursor:move;z-index:1;transition:transform .12s ease-out,background-color .12s ease-out,box-shadow .12s ease-out}.waypoint:hover{background:#ff7875;transform:translate(-50%,-50%) scale(1.25);box-shadow:0 0 0 4px #ff787559}.waypoint.dragging{transition:none;transform:translate(-50%,-50%) scale(1.15);pointer-events:none}.workflow-canvas.dragging-point svg{cursor:grabbing}.selection-box{position:absolute;border:1px dashed #1890ff;background:#1890ff1a;pointer-events:none}.toolbar{position:absolute;top:8px;left:8px;display:flex;gap:4px;padding:6px;background:#fff;border-radius:6px;box-shadow:0 2px 8px #00000026;z-index:100}.toolbar .divider{width:1px;background:#e5e5e5;margin:0 2px}.zoom-toolbar{position:absolute;top:8px;left:8px;z-index:10;display:flex;align-items:center;gap:6px;background:#fff;padding:4px 6px;border-radius:6px;box-shadow:0 2px 6px #00000026}.zoom-toolbar span{min-width:40px;text-align:center;font-size:12px}nz-tag.selected{outline:2px dashed #1890ff}.grid-layer{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(rgba(0,0,0,.08) 1px,transparent 1px);background-size:20px 20px}.grid-layer{background-image:linear-gradient(to right,rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.06) 1px,transparent 1px);background-size:20px 20px}.editable-tag{background:#fff;border-style:dashed}::ng-deep .minimap{position:fixed;width:180px;height:125px;top:60px;right:15px;background-color:#eee;border:1px solid #aaa;opacity:.9;z-index:1}::ng-deep .minimap-node{position:absolute;background-color:#607a86}::ng-deep .minimap-node-round{position:absolute;background-color:#607a86;border-radius:10px}::ng-deep .minimap-node-round-start{background-color:green}::ng-deep .minimap-node-round-end{background-color:#000}::ng-deep .minimap-viewport{position:absolute;box-sizing:border-box;background-color:#4f6f7e66;z-index:1;cursor:move}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i3$1.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "component", type: i4$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: i5$2.NzTagComponent, selector: "nz-tag", inputs: ["nzMode", "nzColor", "nzChecked", "nzBordered"], outputs: ["nzOnClose", "nzCheckedChange"], exportAs: ["nzTag"] }, { kind: "ngmodule", type: NzRadioModule }, { kind: "component", type: i6$3.NzRadioComponent, selector: "[nz-radio],[nz-radio-button]", inputs: ["nzValue", "nzDisabled", "nzAutoFocus", "nz-radio-button"], exportAs: ["nzRadio"] }, { kind: "component", type: i6$3.NzRadioGroupComponent, selector: "nz-radio-group", inputs: ["nzDisabled", "nzButtonStyle", "nzSize", "nzName"], exportAs: ["nzRadioGroup"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i8.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i4$1.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i10.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i11.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "allowClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "lstItem", "displayField", "valueField", "formData", "controlName", "_ngModel", "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", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: ExtendTextArea, selector: "extend-textarea", inputs: ["label", "placeHolder", "labelAlign", "floatingLabel", "displayInline", "labelSpan", "labelFlex", "inputFlex", "disabled", "required", "noBottom", "selectModeType", "inputClass", "size", "isSubmited", "minRows", "maxRows", "lstItem", "displayField", "valueField", "formData", "controlName", "_ngModel", "isTouched", "inputErrorMessage", "errorMessages"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i6$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i14.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "component", type: ExtendInputNumber, selector: "extend-input-number", inputs: ["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: i2$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: i2$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i2$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i2$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i2$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i2$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: i16.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }, { kind: "directive", type: AutoFocusDirective, selector: "[appAutoFocus]", inputs: ["appAutoFocus"] }, { kind: "ngmodule", type: NzAutocompleteModule }, { kind: "component", type: i17.NzAutocompleteComponent, selector: "nz-autocomplete", inputs: ["nzWidth", "nzOverlayClassName", "nzOverlayStyle", "nzDefaultActiveFirstOption", "nzBackfill", "compareWith", "nzDataSource"], outputs: ["selectionChange"], exportAs: ["nzAutocomplete"] }, { kind: "component", type: i17.NzAutocompleteOptionComponent, selector: "nz-auto-option", inputs: ["nzValue", "nzLabel", "nzDisabled"], outputs: ["selectionChange", "mouseEntered"], exportAs: ["nzAutoOption"] }, { kind: "directive", type: i17.NzAutocompleteTriggerDirective, selector: "input[nzAutocomplete], textarea[nzAutocomplete]", inputs: ["nzAutocomplete"], exportAs: ["nzAutocompleteTrigger"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: NzModalComponent, selector: "nz-modal", inputs: ["nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzDraggable", "nzContent", "nzFooter", "nzZIndex", "nzWidth", "nzWrapClassName", "nzClassName", "nzStyle", "nzTitle", "nzCloseIcon", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { kind: "directive", type: NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { kind: "directive", type: NzModalTitleDirective, selector: "[nzModalTitle]", exportAs: ["nzModalTitle"] }, { kind: "component", type: IconAdd, selector: "icon-add", inputs: ["size"], outputs: ["click"] }, { kind: "directive", type: NzModalFooterDirective, selector: "[nzModalFooter]", exportAs: ["nzModalFooter"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: WorkflowEditorComponent, isStandalone: true, selector: "app-workflow-editor", inputs: { lstOrg: "lstOrg", lstRole: "lstRole", lstEmailTemplate: "lstEmailTemplate" }, outputs: { onSave: "onSave", onDeleteStage: "onDeleteStage", onDeleteAction: "onDeleteAction", onDeleteRule: "onDeleteRule", onDeleteRuleLine: "onDeleteRuleLine" }, host: { listeners: { "window:keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }, { propertyName: "svgRef", first: true, predicate: ["svg"], descendants: true, static: true }, { propertyName: "inputStageStatusElement", first: true, predicate: ["inputStageStatusElement"], descendants: true }, { propertyName: "inputActionTypeElement", first: true, predicate: ["inputActionTypeElement"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  #canvasRef\r\n  class=\"workflow-canvas\"\r\n  [class.connecting]=\"!!connectingFrom\"\r\n  [class.dragging-point]=\"!!draggingPoint\"\r\n  [style.width.px]=\"getCanvasWidth()\"\r\n  [style.height.px]=\"getCanvasHeight()\"\r\n  (mousedown)=\"onMouseDownCanvas($event)\"\r\n  (mousemove)=\"onMouseMoveCanvas($event)\"\r\n  (mouseup)=\"onMouseUpCanvas($event)\"\r\n  (click)=\"onClickCanvas($event)\"\r\n>\r\n  <!-- \r\n\r\n  [style.width.px]=\"getCanvasWidth()\"\r\n  [style.height.px]=\"getCanvasHeight()\" \r\n\r\n  [style.width.px]=\"CANVAS_WIDTH\"\r\n  [style.height.px]=\"CANVAS_HEIGHT\"\r\n\r\n  style=\"width: 100%; height: calc(100vh - 120px)\"\r\n  \r\n  -->\r\n\r\n  <div class=\"toolbar\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Editor setting\" (click)=\"settingVisible = true\">\r\n      <nz-icon nzType=\"setting\"></nz-icon>\r\n    </button>\r\n\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Infomation\" (click)=\"infoVisible = true\">\r\n      <nz-icon nzType=\"info-circle\"></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Template setting\" (click)=\"drawTemplateVisibel = true\">\r\n      <nz-icon nzType=\"setting\"></nz-icon> T\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <button nz-button nzSize=\"small\" nzDanger [nzLoading]=\"!ready\" nz-tooltip=\"Save (Ctrl + S)\" (click)=\"save()\">\r\n      <nz-icon nzType=\"save\"></nz-icon>\r\n    </button>\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Add stage\" (click)=\"addStage()\">\r\n      <nz-icon nzType=\"plus\" class=\"color-primary\"></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      [nzType]=\"isMoveMode ? 'primary' : 'default'\"\r\n      nz-tooltip=\"Move mode\"\r\n      (click)=\"isMoveMode = true\"\r\n    >\r\n      <nz-icon><img src=\"/assets/icon/hand-palm.png\" width=\"19\" height=\"19\" /></nz-icon>\r\n    </button>\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      [nzType]=\"!isMoveMode ? 'primary' : 'default'\"\r\n      nz-tooltip=\"Select mode\"\r\n      (click)=\"isMoveMode = false\"\r\n    >\r\n      <nz-icon><img src=\"/assets/icon/cursor.png\" width=\"19\" height=\"19\" /></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <!-- UNDO / REDO -->\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      nzType=\"default\"\r\n      [disabled]=\"undoStack.length === 0\"\r\n      nz-tooltip=\"Undo\"\r\n      (click)=\"undo()\"\r\n    >\r\n      <nz-icon nzType=\"undo\"></nz-icon>\r\n    </button>\r\n\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      nzType=\"default\"\r\n      [disabled]=\"redoStack.length === 0\"\r\n      nz-tooltip=\"Redo\"\r\n      (click)=\"redo()\"\r\n    >\r\n      <nz-icon nzType=\"redo\"></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <!-- ALIGN -->\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignLeft()\">\u27F8</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignCenter()\">\u2261</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignRight()\">\u27F9</button>\r\n\r\n    <span class=\"divider\"></span>\r\n\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignTop()\">\u21D1</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignMiddle()\">\u2550</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignBottom()\">\u21D3</button>\r\n\r\n    <span class=\"divider\"></span>\r\n\r\n    <!-- DISTRIBUTE -->\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeHorizontal()\">\r\n      \u21C4\r\n    </button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeVertical()\">\u21C5</button>\r\n  </div>\r\n\r\n  <div\r\n    class=\"canvas-content\"\r\n    [class.panning]=\"isMoveMode\"\r\n    [style.transform]=\"'translate(' + template.editorOption.panX + 'px,' + template.editorOption.panY + 'px)'\"\r\n  >\r\n    <!-- GRID -->\r\n    <div *ngIf=\"wfcSetting.ShowGrid\" class=\"grid-layer\"></div>\r\n\r\n    <!-- <div class=\"zoom-toolbar\">\r\n      <button nz-button nzSize=\"small\" (click)=\"zoomOut()\">\u2212</button>\r\n      <span>{{ zoom * 100 | number: \"1.0-0\" }}%</span>\r\n      <button nz-button nzSize=\"small\" (click)=\"zoomIn()\">+</button>\r\n    </div> -->\r\n\r\n    <!-- SVG EDGES -->\r\n    <svg #svg class=\"edges-layer\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\">\r\n      <g [attr.transform]=\"svgTransform\">\r\n        <!-- DEFS -->\r\n        <defs>\r\n          <!-- glow effect -->\r\n          <filter id=\"edge-glow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\r\n            <feGaussianBlur stdDeviation=\"2\" result=\"blur\" />\r\n            <feMerge>\r\n              <feMergeNode in=\"blur\" />\r\n              <feMergeNode in=\"SourceGraphic\" />\r\n            </feMerge>\r\n          </filter>\r\n\r\n          <!-- arrow markers -->\r\n          <marker\r\n            id=\"arrow-blue\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            refX=\"10\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"blue\" d=\"M0,0 L10,5 L0,10\"></path>\r\n          </marker>\r\n\r\n          <marker\r\n            id=\"arrow-red\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            refX=\"10\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"red\" d=\"M0,0 L10,5 L0,10\"></path>\r\n          </marker>\r\n\r\n          <marker\r\n            id=\"arrow-blue-start\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            viewBox=\"0 0 10 10\"\r\n            refX=\"0\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"blue\" d=\"M10,0 L0,5 L10,10\"></path>\r\n          </marker>\r\n\r\n          <marker\r\n            id=\"arrow-red-start\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            viewBox=\"0 0 10 10\"\r\n            refX=\"0\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"red\" d=\"M10,0 L0,5 L10,10\"></path>\r\n          </marker>\r\n        </defs>\r\n\r\n        <!-- EDGES B\u00CCNH TH\u01AF\u1EDCNG -->\r\n        <ng-container *ngFor=\"let e of normalEdges; let i = index\">\r\n          <path\r\n            class=\"edge\"\r\n            [attr.id]=\"'edge-path-' + i\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            marker-end=\"url(#arrow-blue)\"\r\n            [attr.marker-start]=\"e.allowBack ? 'url(#arrow-blue-start)' : ''\"\r\n          ></path>\r\n\r\n          <path\r\n            class=\"edge-hit\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            (mouseenter)=\"onMouseEnterEdge(e)\"\r\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\r\n            (click)=\"onClickEdge(e, $event)\"\r\n          ></path>\r\n\r\n          <!-- LABEL -->\r\n          <!-- text b\u00E1m theo line -->\r\n          <!-- \r\n          <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\r\n            <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.ActionText }}\r\n            </textPath>\r\n          </text> \r\n          \r\n          <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\r\n            <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.labelBack }}\r\n            </textPath>\r\n          </text>\r\n          -->\r\n\r\n          <!-- text th\u1EB3ng n\u1EB1m ngang -->\r\n          <text\r\n            *ngIf=\"e.ActionText\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.ActionText }}\r\n          </text>\r\n\r\n          <text\r\n            *ngIf=\"e.allowBack && e.labelBack\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.labelBack }}\r\n          </text>\r\n        </ng-container>\r\n\r\n        <!-- EDGE \u0110ANG HOVER (LU\u00D4N TR\u00CAN C\u00D9NG) -->\r\n        <ng-container *ngFor=\"let e of hoverEdges; let i = index\">\r\n          <path\r\n            class=\"edge red\"\r\n            [attr.id]=\"'edge-path-hover-' + i\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            marker-end=\"url(#arrow-red)\"\r\n            [attr.marker-start]=\"e.allowBack ? 'url(#arrow-red-start)' : ''\"\r\n          ></path>\r\n\r\n          <path\r\n            class=\"edge-hit\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\r\n            (click)=\"onClickEdge(e, $event)\"\r\n          ></path>\r\n\r\n          <!-- LABEL -->\r\n          <!-- <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\r\n            <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.ActionText }}\r\n            </textPath>\r\n          </text>\r\n\r\n          <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\r\n            <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.labelBack }}\r\n            </textPath>\r\n          </text> -->\r\n\r\n          <text\r\n            *ngIf=\"e.ActionText\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.ActionText }}\r\n          </text>\r\n\r\n          <text\r\n            *ngIf=\"e.allowBack && e.labelBack\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.labelBack }}\r\n          </text>\r\n        </ng-container>\r\n\r\n        <!-- preview -->\r\n        <path\r\n          *ngIf=\"connectingFrom\"\r\n          class=\"edge\"\r\n          [attr.d]=\"buildPreviewPath()\"\r\n          stroke-dasharray=\"5,5\"\r\n          marker-end=\"url(#arrow-blue)\"\r\n        ></path>\r\n      </g>\r\n    </svg>\r\n\r\n    <div\r\n      *ngIf=\"isSelecting && selectStart && selectEnd\"\r\n      class=\"selection-box\"\r\n      [style.left.px]=\"Math.min(selectStart.x, selectEnd.x)\"\r\n      [style.top.px]=\"Math.min(selectStart.y, selectEnd.y)\"\r\n      [style.width.px]=\"Math.abs(selectEnd.x - selectStart.x)\"\r\n      [style.height.px]=\"Math.abs(selectEnd.y - selectStart.y)\"\r\n    ></div>\r\n\r\n    <!-- lstStage -->\r\n    @for (n of lstStage; track $index) {\r\n      <!-- START NODE -->\r\n      @if (n.StageType === \"_start_\") {\r\n        <nz-card\r\n          class=\"workflow-node workflow-node-start\"\r\n          [attr.data-id]=\"n.Code\"\r\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n          [style.left.px]=\"n.editorOption.x\"\r\n          [style.top.px]=\"n.editorOption.y\"\r\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n          nzSize=\"small\"\r\n          (mousedown)=\"onMouseDownNode($event, n)\"\r\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n        >\r\n          <nz-tag [nzColor]=\"'green'\"> START </nz-tag>\r\n\r\n          @if (!n.editorOption.isReverse) {\r\n            <!-- connector RIGHT: output -->\r\n            <div class=\"connector connector-right connector-start\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n          } @else {\r\n            <div\r\n              class=\"connector connector-right connector-start reverse\"\r\n              (click)=\"onClickConnector($event, n, 'right')\"\r\n            ></div>\r\n          }\r\n        </nz-card>\r\n      }\r\n      <!-- END NODE -->\r\n      @else if (n.StageType === \"_end_\") {\r\n        <nz-card\r\n          class=\"workflow-node workflow-node-end\"\r\n          [attr.data-id]=\"n.Code\"\r\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n          [style.left.px]=\"n.editorOption.x\"\r\n          [style.top.px]=\"n.editorOption.y\"\r\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n          nzSize=\"small\"\r\n          (mousedown)=\"onMouseDownNode($event, n)\"\r\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n        >\r\n          <nz-tag [nzColor]=\"'red'\"> END </nz-tag>\r\n\r\n          @if (!n.editorOption.isReverse) {\r\n            <!-- connector LEFT: input -->\r\n            <div class=\"connector connector-left connector-end\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n          } @else {\r\n            <div\r\n              class=\"connector connector-left connector-end reverse\"\r\n              (click)=\"onClickConnector($event, n, 'left')\"\r\n            ></div>\r\n          }\r\n        </nz-card>\r\n      } @else {\r\n        <nz-card\r\n          class=\"workflow-node\"\r\n          [attr.data-id]=\"n.Code\"\r\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n          [style.left.px]=\"n.editorOption.x\"\r\n          [style.top.px]=\"n.editorOption.y\"\r\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n          nzSize=\"small\"\r\n          (mousedown)=\"onMouseDownNode($event, n)\"\r\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n        >\r\n          <div class=\"title\">{{ n.Code }}</div>\r\n\r\n          <div>{{ n.Name }}</div>\r\n\r\n          @if (!n.editorOption.isReverse) {\r\n            <!-- connector RIGHT: output -->\r\n            <div class=\"connector connector-right\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n\r\n            <!-- connector LEFT: input -->\r\n            <div class=\"connector connector-left\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n          } @else {\r\n            <div class=\"connector connector-right reverse\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n            <div class=\"connector connector-left reverse\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n          }\r\n        </nz-card>\r\n      }\r\n    }\r\n\r\n    <!-- POINTS -->\r\n    @for (p of connectingPoints; track $index) {\r\n      @if (p != draggingPoint) {\r\n        <div\r\n          class=\"waypoint\"\r\n          [style.left.px]=\"p.x\"\r\n          [style.top.px]=\"p.y\"\r\n          (mousedown)=\"onmousedownPoint($event, p)\"\r\n          (contextmenu)=\"onRightClickPoint($event, hoverAction!, $index)\"\r\n        ></div>\r\n      } @else {\r\n        <div\r\n          class=\"waypoint dragging\"\r\n          [style.left.px]=\"p.x\"\r\n          [style.top.px]=\"p.y\"\r\n          (mousedown)=\"onmousedownPoint($event, p)\"\r\n        ></div>\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<!-- drawer TEMPLATE -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawTemplateTitle\"\r\n  nzPlacement=\"right\"\r\n  [nzWidth]=\"500\"\r\n  [nzClosable]=\"false\"\r\n  [nzVisible]=\"drawTemplateVisibel\"\r\n  [nzFooter]=\"footerTplTemplate\"\r\n  (nzOnClose)=\"drawTemplateVisibel = false\"\r\n>\r\n  <ng-template #drawTemplateTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Template </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <extend-select\r\n      [label]=\"'Org'\"\r\n      [lstItem]=\"lstOrg\"\r\n      [valueField]=\"'App_Org_Id'\"\r\n      [displayFields]=\"['Name', 'Code']\"\r\n      [(_ngModel)]=\"template.App_Org_Id\"\r\n    ></extend-select>\r\n    <extend-input [label]=\"'Code'\" [(_ngModel)]=\"template.Code\"></extend-input>\r\n    <extend-input [label]=\"'Name'\" [(_ngModel)]=\"template.Name\"></extend-input>\r\n    <extend-select\r\n      [label]=\"'Type'\"\r\n      [lstItem]=\"template.lstTemplateType\"\r\n      [valueField]=\"'Code'\"\r\n      [displayFields]=\"['Code', 'Name']\"\r\n      [(_ngModel)]=\"template.DocType\"\r\n    ></extend-select>\r\n    <extend-textarea [label]=\"'Desscription'\" [(_ngModel)]=\"template.Description\"></extend-textarea>\r\n    <extend-select\r\n      [label]=\"'Print template'\"\r\n      [lstItem]=\"template.lstTemplatePrint\"\r\n      [valueField]=\"'Code'\"\r\n      [displayFields]=\"['Code', 'Name']\"\r\n      [(_ngModel)]=\"template.TemplatePrint\"\r\n    ></extend-select>\r\n    <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 Day'\"\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 [class.text-bold]=\"action == hoverAction\" (click)=\"onclickaction(action)\">\r\n              <td style=\"border-bottom: solid 1px orange\">\r\n                ({{ $index + 1 }})\r\n                <nz-icon\r\n                  nzType=\"delete\"\r\n                  nzTheme=\"outline\"\r\n                  class=\"color-warn cursor-pointer icon-size-16\"\r\n                  (click)=\"$event.stopPropagation(); deleteAction(action)\"\r\n                ></nz-icon>\r\n              </td>\r\n              <td style=\"border-bottom: solid 1px orange\">\r\n                <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n                  <div nz-col [nzSpan]=\"8\">\r\n                    <nz-form-item>\r\n                      <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n                      <nz-form-control [nzSpan]=\"24\">\r\n                        <nz-input-group class=\"full-width\">\r\n                          <input\r\n                            nz-input\r\n                            [(ngModel)]=\"action.ActionStatus\"\r\n                            [nzAutocomplete]=\"auto\"\r\n                            (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n                            (click)=\"lstActionStatusFiltered = template.lstActionStatus\"\r\n                            (keyup.enter)=\"onenterAotu(action.ActionStatus)\"\r\n                            (blur)=\"onenterAotu(action.ActionStatus)\"\r\n                          />\r\n                          <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n                            @for (option of lstActionStatusFiltered; track $index) {\r\n                              <nz-auto-option [nzValue]=\"option.Code\" [nzLabel]=\"option.Code\">\r\n                                {{ option.Code }}\r\n                                <icon-delete\r\n                                  *ngIf=\"checkRemoveableActionStatus(option.Code)\"\r\n                                  style=\"float: right\"\r\n                                  [size]=\"12\"\r\n                                  (click)=\"handleClose(option.Code)\"\r\n                                ></icon-delete>\r\n                              </nz-auto-option>\r\n                            }\r\n                          </nz-autocomplete>\r\n                        </nz-input-group>\r\n                      </nz-form-control>\r\n                    </nz-form-item>\r\n                  </div>\r\n\r\n                  <extend-input\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Action text'\"\r\n                    [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]=\"'50vw'\"\r\n>\r\n  <ng-container *nzModalTitle>\r\n    ACTION RULE: [{{ selectedStage?.Code }}] {{ selectedStage?.Name }} > [{{ hoverAction?.ActionStatus }}]\r\n    {{ hoverAction?.ActionText }}\r\n  </ng-container>\r\n  <ng-container *nzModalContent>\r\n    @if (hoverAction && hoverAction.actionRule) {\r\n      <div nz-row [nzGutter]=\"32\">\r\n        <extend-input nz-col nzSpan=\"12\" [label]=\"'Code'\" [(_ngModel)]=\"hoverAction.actionRule.Code\"></extend-input>\r\n        <extend-input nz-col nzSpan=\"12\" [label]=\"'Name'\" [(_ngModel)]=\"hoverAction.actionRule.Name\"></extend-input>\r\n        <extend-input nz-col nzSpan=\"12\" [label]=\"'Note'\" [(_ngModel)]=\"hoverAction.actionRule.Note\"></extend-input>\r\n        <extend-checkbox\r\n          nz-col\r\n          nzSpan=\"12\"\r\n          [label]=\"'IsActive'\"\r\n          [(_ngModel)]=\"hoverAction.actionRule.IsActive\"\r\n        ></extend-checkbox>\r\n      </div>\r\n      <div nz-row [nzGutter]=\"16\">\r\n        <div nz-col nzSpan=\"24\">\r\n          <nz-table nzSize=\"small\" [nzData]=\"hoverAction.actionRule.lstLine\" [nzShowPagination]=\"false\">\r\n            <thead>\r\n              <tr>\r\n                <th [nzWidth]=\"'50px'\"><icon-add (click)=\"addActionRuleLine()\"></icon-add></th>\r\n                <th [nzWidth]=\"'25%'\">Template</th>\r\n                <th [nzWidth]=\"'25%'\">Template stage</th>\r\n                <th [nzWidth]=\"'25%'\">Template action</th>\r\n                <th [nzWidth]=\"'50px'\">IsActive</th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              @for (item of hoverAction.actionRule.lstLine; track $index) {\r\n                <tr>\r\n                  <td><icon-delete (click)=\"deleteActionRuleLine(hoverAction.actionRule, item)\"></icon-delete></td>\r\n                  <td>\r\n                    <extend-select\r\n                      #xxx\r\n                      [size]=\"'small'\"\r\n                      [lstItem]=\"lstTemplateForRule(item)\"\r\n                      [valueField]=\"'WF_Template_Id'\"\r\n                      [displayFields]=\"['Code', 'Name']\"\r\n                      [(_ngModel)]=\"item.WF_Template_Id\"\r\n                      (_ngModelChange)=\"item.WF_TemplateStage_Id = 0; item.WF_TemplateStageAction_Id = 0\"\r\n                    ></extend-select>\r\n                  </td>\r\n                  <td>\r\n                    <extend-select\r\n                      #yyy\r\n                      [size]=\"'small'\"\r\n                      [lstItem]=\"lstStageForRule(xxx._ngModel)\"\r\n                      [valueField]=\"'WF_TemplateStage_Id'\"\r\n                      [displayFields]=\"['Code', 'Name']\"\r\n                      [(_ngModel)]=\"item.WF_TemplateStage_Id\"\r\n                      (_ngModelChange)=\"item.WF_TemplateStageAction_Id = 0\"\r\n                    ></extend-select>\r\n                  </td>\r\n                  <td>\r\n                    <extend-select\r\n                      [size]=\"'small'\"\r\n                      [lstItem]=\"lstActionForRule(yyy._ngModel)\"\r\n                      [valueField]=\"'WF_TemplateStageAction_Id'\"\r\n                      [displayFields]=\"['ActionStatus', 'ActionText']\"\r\n                      [(_ngModel)]=\"item.WF_TemplateStageAction_Id\"\r\n                    ></extend-select>\r\n                  </td>\r\n                  <td class=\"text-center\">\r\n                    <extend-checkbox [(_ngModel)]=\"item.IsActive\"></extend-checkbox>\r\n                  </td>\r\n                </tr>\r\n              }\r\n            </tbody>\r\n          </nz-table>\r\n        </div>\r\n      </div>\r\n    }\r\n  </ng-container>\r\n  <ng-container *nzModalFooter>\r\n    <button nz-button nzType=\"primary\" (click)=\"actionRuleModalVisible = false\">OK</button>\r\n  </ng-container>\r\n</nz-modal>\r\n", styles: ["@charset \"UTF-8\";::ng-deep .workflow-wrapper{border:solid 1px lightgray;overflow:hidden;width:100%}.workflow-canvas{position:relative;background:#f0f2f5;cursor:default;overflow:hidden;outline:1px dashed rgba(0,0,0,.1)}.workflow-canvas .edges-layer{position:absolute;inset:0;width:100%;height:100%;z-index:1}.workflow-canvas .edges-layer path{stroke-width:2;fill:none}.canvas-content{transform-origin:0 0;width:100%;height:100%}.canvas-content{outline:1px dashed red}.canvas-content.panning{cursor:grab}.canvas-content.panning:active{cursor:grabbing}.workflow-canvas.panning{cursor:grab}.workflow-canvas.panning:active{cursor:grabbing}.workflow-canvas.connecting,.workflow-canvas.connecting .workflow-node{cursor:crosshair}.workflow-node{position:absolute;width:160px;cursor:grab;-webkit-user-select:none;user-select:none;z-index:2}.workflow-node:active{cursor:grabbing}.workflow-node.connecting-source,.workflow-node.selected,.workflow-node:hover:not(.workflow-node-start,.workflow-node-end){outline:2px dashed #1890ff}.workflow-node .title{font-weight:600;margin-bottom:6px}.workflow-node-start{width:0px}.workflow-node-start.connecting-source,.workflow-node-start.selected,.workflow-node-start:hover{outline:unset}.workflow-node-start.connecting-source nz-tag,.workflow-node-start.selected nz-tag,.workflow-node-start:hover nz-tag{outline:2px dashed}.workflow-node-start nz-tag{position:relative;top:45px;right:35px}.workflow-node-end{width:0px}.workflow-node-end.connecting-source,.workflow-node-end.selected,.workflow-node-end:hover{outline:unset}.workflow-node-end.connecting-source nz-tag,.workflow-node-end.selected nz-tag,.workflow-node-end:hover nz-tag{outline:2px dashed}.workflow-node-end nz-tag{position:relative;top:45px;right:32px}.connector{position:absolute;top:39px;width:12px;height:12px;background:#1890ff;border-radius:50%;transform:translateY(-50%);cursor:crosshair;transition:box-shadow .15s ease-out,transform .15s ease-out}.connector:hover{box-shadow:0 0 0 3px #1890ff4d;transform:translateY(-50%) scale(1.15)}.connector-right{right:-8px;background:orange}.connector-right.reverse,.connector-left{left:-8px}.connector-left.reverse{left:unset;right:-8px}.connector-start{width:16px;height:16px;right:-8px;background:green;box-shadow:0 0 0 3px #1890ff4d}.connector-end{width:16px;height:16px;left:-8px;background:#000;box-shadow:0 0 0 3px #1890ff4d}.edge{cursor:pointer;stroke:#1890ff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;fill:none;transition:stroke .15s ease}.edge-hit{stroke:transparent;stroke-width:18px!important;fill:none;cursor:pointer}.edge-hit:hover+.edge{stroke:#ff4d4f;stroke-width:2}.workflow-canvas.dragging-point .edge-hit{pointer-events:none}.edge:hover+.edge-label{fill:#1890ff;font-weight:500}.edge-label{font-size:12px;fill:#555;pointer-events:none;-webkit-user-select:none;user-select:none}.blue{stroke:#1890ff!important}.red{stroke:#ff4d4f!important;box-shadow:0 0 0 3px #1890ff4d!important}.workflow-svg{background:transparent;overflow:visible}.waypoint{position:absolute;width:10px;height:10px;background:#ff4d4f;border-radius:50%;transform:translate(-50%,-50%) scale(1);cursor:move;z-index:1;transition:transform .12s ease-out,background-color .12s ease-out,box-shadow .12s ease-out}.waypoint:hover{background:#ff7875;transform:translate(-50%,-50%) scale(1.25);box-shadow:0 0 0 4px #ff787559}.waypoint.dragging{transition:none;transform:translate(-50%,-50%) scale(1.15);pointer-events:none}.workflow-canvas.dragging-point svg{cursor:grabbing}.selection-box{position:absolute;border:1px dashed #1890ff;background:#1890ff1a;pointer-events:none}.toolbar{position:absolute;top:8px;left:8px;display:flex;gap:4px;padding:6px;background:#fff;border-radius:6px;box-shadow:0 2px 8px #00000026;z-index:100}.toolbar .divider{width:1px;background:#e5e5e5;margin:0 2px}.zoom-toolbar{position:absolute;top:8px;left:8px;z-index:10;display:flex;align-items:center;gap:6px;background:#fff;padding:4px 6px;border-radius:6px;box-shadow:0 2px 6px #00000026}.zoom-toolbar span{min-width:40px;text-align:center;font-size:12px}nz-tag.selected{outline:2px dashed #1890ff}.grid-layer{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(rgba(0,0,0,.08) 1px,transparent 1px);background-size:20px 20px}.grid-layer{background-image:linear-gradient(to right,rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.06) 1px,transparent 1px);background-size:20px 20px}.editable-tag{background:#fff;border-style:dashed}::ng-deep .minimap{position:fixed;width:180px;height:125px;top:60px;right:15px;background-color:#eee;border:1px solid #aaa;opacity:.9;z-index:1}::ng-deep .minimap-node{position:absolute;background-color:#607a86}::ng-deep .minimap-node-round{position:absolute;background-color:#607a86;border-radius:10px}::ng-deep .minimap-node-round-start{background-color:green}::ng-deep .minimap-node-round-end{background-color:#000}::ng-deep .minimap-viewport{position:absolute;box-sizing:border-box;background-color:#4f6f7e66;z-index:1;cursor:move}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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$2.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "component", type: i4$1.NzDrawerComponent, selector: "nz-drawer", inputs: ["nzContent", "nzCloseIcon", "nzClosable", "nzMaskClosable", "nzMask", "nzCloseOnNavigation", "nzNoAnimation", "nzKeyboard", "nzTitle", "nzExtra", "nzFooter", "nzPlacement", "nzSize", "nzMaskStyle", "nzBodyStyle", "nzWrapClassName", "nzWidth", "nzHeight", "nzZIndex", "nzOffsetX", "nzOffsetY", "nzVisible"], outputs: ["nzOnViewInit", "nzOnClose", "nzVisibleChange"], exportAs: ["nzDrawer"] }, { kind: "directive", type: i4$1.NzDrawerContentDirective, selector: "[nzDrawerContent]", exportAs: ["nzDrawerContent"] }, { kind: "ngmodule", type: NzTagModule }, { kind: "component", type: i5$2.NzTagComponent, selector: "nz-tag", inputs: ["nzMode", "nzColor", "nzChecked", "nzBordered"], outputs: ["nzOnClose", "nzCheckedChange"], exportAs: ["nzTag"] }, { kind: "ngmodule", type: NzRadioModule }, { kind: "component", type: i6$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$3.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: i5$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: i6$3.ɵ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: i7.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i11.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "allowClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "lstItem", "displayField", "valueField", "formData", "controlName", "_ngModel", "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", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: ExtendTextArea, selector: "extend-textarea", inputs: ["label", "placeHolder", "labelAlign", "floatingLabel", "displayInline", "labelSpan", "labelFlex", "inputFlex", "disabled", "required", "noBottom", "selectModeType", "inputClass", "size", "isSubmited", "minRows", "maxRows", "lstItem", "displayField", "valueField", "formData", "controlName", "_ngModel", "isTouched", "inputErrorMessage", "errorMessages"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i6$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i9.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: i1$5.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: i1$5.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i1$5.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i1$5.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i1$5.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i1$5.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.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }, { kind: "directive", type: AutoFocusDirective, selector: "[appAutoFocus]", inputs: ["appAutoFocus"] }, { kind: "ngmodule", type: NzAutocompleteModule }, { kind: "component", type: i17.NzAutocompleteComponent, selector: "nz-autocomplete", inputs: ["nzWidth", "nzOverlayClassName", "nzOverlayStyle", "nzDefaultActiveFirstOption", "nzBackfill", "compareWith", "nzDataSource"], outputs: ["selectionChange"], exportAs: ["nzAutocomplete"] }, { kind: "component", type: i17.NzAutocompleteOptionComponent, selector: "nz-auto-option", inputs: ["nzValue", "nzLabel", "nzDisabled"], outputs: ["selectionChange", "mouseEntered"], exportAs: ["nzAutoOption"] }, { kind: "directive", type: i17.NzAutocompleteTriggerDirective, selector: "input[nzAutocomplete], textarea[nzAutocomplete]", inputs: ["nzAutocomplete"], exportAs: ["nzAutocompleteTrigger"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: NzModalComponent, selector: "nz-modal", inputs: ["nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzDraggable", "nzContent", "nzFooter", "nzZIndex", "nzWidth", "nzWrapClassName", "nzClassName", "nzStyle", "nzTitle", "nzCloseIcon", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { kind: "directive", type: NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { kind: "directive", type: NzModalTitleDirective, selector: "[nzModalTitle]", exportAs: ["nzModalTitle"] }, { kind: "component", type: IconAdd, selector: "icon-add", inputs: ["size"], outputs: ["click"] }, { kind: "directive", type: NzModalFooterDirective, selector: "[nzModalFooter]", exportAs: ["nzModalFooter"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WorkflowEditorComponent, decorators: [{
             type: Component,
@@ -6258,6 +6392,7 @@ class ExpandableSearchComponent {
     isExpanded = false;
     searchValue = null;
     searchValueChange = new EventEmitter();
+    onSearch = new EventEmitter();
     // Biến lưu trữ bộ đếm thời gian để có thể hủy nó khi cần
     blurTimeout;
     toggleSearch() {
@@ -6298,13 +6433,14 @@ class ExpandableSearchComponent {
     }
     performSearch() {
         this.searchValueChange.emit(this.searchValue);
+        this.onSearch.emit(this.searchValue);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExpandableSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: ExpandableSearchComponent, isStandalone: true, selector: "expandable-search", inputs: { searchValue: "searchValue" }, outputs: { searchValueChange: "searchValueChange" }, viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div class=\"nz-search-wrapper\" [class.expanded]=\"isExpanded\">\n  <input\n    #searchInput\n    type=\"text\"\n    class=\"custom-search-input\"\n    [(ngModel)]=\"searchValue\"\n    placeholder=\"Nh\u1EADp \u0111i\u1EC1u ki\u1EC7n t\u00ECm ki\u1EBFm...\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keyup.enter)=\"performSearch()\"\n  />\n\n  <span class=\"suffix-wrap\" (mousedown)=\"$event.preventDefault()\" (click)=\"toggleSearch()\">\n    <i\n      nz-icon\n      nzType=\"close-circle\"\n      nzTheme=\"fill\"\n      class=\"suffix-icon delete\"\n      [class.show]=\"isExpanded && searchValue\"\n      (click)=\"clearSearch($event)\"\n    ></i>\n\n    <i\n      nz-icon\n      nzType=\"search\"\n      nzTheme=\"outline\"\n      class=\"suffix-icon search\"\n      [class.show]=\"!isExpanded || !searchValue\"\n    ></i>\n  </span>\n</div>\n", styles: ["@charset \"UTF-8\";.nz-search-wrapper{position:relative;display:inline-flex;align-items:center;height:32px;width:32px;background-color:transparent;border:1px solid transparent;border-radius:6px;transition:all .3s cubic-bezier(.645,.045,.355,1);overflow:hidden}.nz-search-wrapper:hover:not(.expanded){background-color:#0000000a;cursor:pointer}.nz-search-wrapper.expanded{width:250px;background-color:#fff;border-color:#1890ff;box-shadow:0 0 0 2px #1890ff33}.nz-search-wrapper.expanded .custom-search-input{width:100%;padding:4px 32px 4px 11px;opacity:1}.custom-search-input{width:0;opacity:0;border:none;outline:none;background:transparent;padding:0;font-size:14px;color:#000000d9;transition:all .3s cubic-bezier(.645,.045,.355,1)}.custom-search-input::placeholder{color:#bfbfbf}.suffix-wrap{position:absolute;right:0;top:0;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.suffix-icon{position:absolute;display:flex;align-items:center;justify-content:center;font-size:16px;opacity:0;pointer-events:none;transition:opacity .2s ease}.suffix-icon.show{opacity:1;pointer-events:auto}.search{color:var(--primary-color)}.delete{color:#bfbfbf}.delete:hover{color:#ff4d4f}.delete.show{animation:popIn .18s ease}@keyframes popIn{0%{transform:scale(.5)}70%{transform:scale(1.15)}to{transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: ExpandableSearchComponent, isStandalone: true, selector: "expandable-search", inputs: { searchValue: "searchValue" }, outputs: { searchValueChange: "searchValueChange", onSearch: "onSearch" }, viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div class=\"nz-search-wrapper\" [class.expanded]=\"isExpanded\">\r\n  <input\r\n    #searchInput\r\n    type=\"text\"\r\n    class=\"custom-search-input\"\r\n    [(ngModel)]=\"searchValue\"\r\n    placeholder=\"Nh\u1EADp \u0111i\u1EC1u ki\u1EC7n t\u00ECm ki\u1EBFm...\"\r\n    (focus)=\"onFocus()\"\r\n    (blur)=\"onBlur()\"\r\n    (keyup.enter)=\"performSearch()\"\r\n  />\r\n\r\n  <span class=\"suffix-wrap\" (mousedown)=\"$event.preventDefault()\" (click)=\"toggleSearch()\">\r\n    <i\r\n      nz-icon\r\n      nzType=\"close-circle\"\r\n      nzTheme=\"fill\"\r\n      class=\"suffix-icon delete\"\r\n      [class.show]=\"isExpanded && searchValue\"\r\n      (click)=\"clearSearch($event)\"\r\n    ></i>\r\n\r\n    <i\r\n      nz-icon\r\n      nzType=\"search\"\r\n      nzTheme=\"outline\"\r\n      class=\"suffix-icon search\"\r\n      [class.show]=\"!isExpanded || !searchValue\"\r\n    ></i>\r\n  </span>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.nz-search-wrapper{position:relative;display:inline-flex;align-items:center;height:32px;width:32px;background-color:transparent;border:1px solid transparent;border-radius:6px;transition:all .3s cubic-bezier(.645,.045,.355,1);overflow:hidden}.nz-search-wrapper:hover:not(.expanded){background-color:#0000000a;cursor:pointer}.nz-search-wrapper.expanded{width:250px;background-color:#fff;border-color:#1890ff;box-shadow:0 0 0 2px #1890ff33}.nz-search-wrapper.expanded .custom-search-input{width:100%;padding:4px 32px 4px 11px;opacity:1}.custom-search-input{width:0;opacity:0;border:none;outline:none;background:transparent;padding:0;font-size:14px;color:#000000d9;transition:all .3s cubic-bezier(.645,.045,.355,1)}.custom-search-input::placeholder{color:#bfbfbf}.suffix-wrap{position:absolute;right:0;top:0;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.suffix-icon{position:absolute;display:flex;align-items:center;justify-content:center;font-size:16px;opacity:0;pointer-events:none;transition:opacity .2s ease}.suffix-icon.show{opacity:1;pointer-events:auto}.search{color:var(--primary-color)}.delete{color:#bfbfbf}.delete:hover{color:#ff4d4f}.delete.show{animation:popIn .18s ease}@keyframes popIn{0%{transform:scale(.5)}70%{transform:scale(1.15)}to{transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: NzIconModule }, { kind: "directive", type: i1$3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExpandableSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'expandable-search', imports: [CommonModule, FormsModule, NzIconModule], template: "<div class=\"nz-search-wrapper\" [class.expanded]=\"isExpanded\">\n  <input\n    #searchInput\n    type=\"text\"\n    class=\"custom-search-input\"\n    [(ngModel)]=\"searchValue\"\n    placeholder=\"Nh\u1EADp \u0111i\u1EC1u ki\u1EC7n t\u00ECm ki\u1EBFm...\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keyup.enter)=\"performSearch()\"\n  />\n\n  <span class=\"suffix-wrap\" (mousedown)=\"$event.preventDefault()\" (click)=\"toggleSearch()\">\n    <i\n      nz-icon\n      nzType=\"close-circle\"\n      nzTheme=\"fill\"\n      class=\"suffix-icon delete\"\n      [class.show]=\"isExpanded && searchValue\"\n      (click)=\"clearSearch($event)\"\n    ></i>\n\n    <i\n      nz-icon\n      nzType=\"search\"\n      nzTheme=\"outline\"\n      class=\"suffix-icon search\"\n      [class.show]=\"!isExpanded || !searchValue\"\n    ></i>\n  </span>\n</div>\n", styles: ["@charset \"UTF-8\";.nz-search-wrapper{position:relative;display:inline-flex;align-items:center;height:32px;width:32px;background-color:transparent;border:1px solid transparent;border-radius:6px;transition:all .3s cubic-bezier(.645,.045,.355,1);overflow:hidden}.nz-search-wrapper:hover:not(.expanded){background-color:#0000000a;cursor:pointer}.nz-search-wrapper.expanded{width:250px;background-color:#fff;border-color:#1890ff;box-shadow:0 0 0 2px #1890ff33}.nz-search-wrapper.expanded .custom-search-input{width:100%;padding:4px 32px 4px 11px;opacity:1}.custom-search-input{width:0;opacity:0;border:none;outline:none;background:transparent;padding:0;font-size:14px;color:#000000d9;transition:all .3s cubic-bezier(.645,.045,.355,1)}.custom-search-input::placeholder{color:#bfbfbf}.suffix-wrap{position:absolute;right:0;top:0;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.suffix-icon{position:absolute;display:flex;align-items:center;justify-content:center;font-size:16px;opacity:0;pointer-events:none;transition:opacity .2s ease}.suffix-icon.show{opacity:1;pointer-events:auto}.search{color:var(--primary-color)}.delete{color:#bfbfbf}.delete:hover{color:#ff4d4f}.delete.show{animation:popIn .18s ease}@keyframes popIn{0%{transform:scale(.5)}70%{transform:scale(1.15)}to{transform:scale(1)}}\n"] }]
+            args: [{ selector: 'expandable-search', imports: [CommonModule, FormsModule, NzIconModule], template: "<div class=\"nz-search-wrapper\" [class.expanded]=\"isExpanded\">\r\n  <input\r\n    #searchInput\r\n    type=\"text\"\r\n    class=\"custom-search-input\"\r\n    [(ngModel)]=\"searchValue\"\r\n    placeholder=\"Nh\u1EADp \u0111i\u1EC1u ki\u1EC7n t\u00ECm ki\u1EBFm...\"\r\n    (focus)=\"onFocus()\"\r\n    (blur)=\"onBlur()\"\r\n    (keyup.enter)=\"performSearch()\"\r\n  />\r\n\r\n  <span class=\"suffix-wrap\" (mousedown)=\"$event.preventDefault()\" (click)=\"toggleSearch()\">\r\n    <i\r\n      nz-icon\r\n      nzType=\"close-circle\"\r\n      nzTheme=\"fill\"\r\n      class=\"suffix-icon delete\"\r\n      [class.show]=\"isExpanded && searchValue\"\r\n      (click)=\"clearSearch($event)\"\r\n    ></i>\r\n\r\n    <i\r\n      nz-icon\r\n      nzType=\"search\"\r\n      nzTheme=\"outline\"\r\n      class=\"suffix-icon search\"\r\n      [class.show]=\"!isExpanded || !searchValue\"\r\n    ></i>\r\n  </span>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.nz-search-wrapper{position:relative;display:inline-flex;align-items:center;height:32px;width:32px;background-color:transparent;border:1px solid transparent;border-radius:6px;transition:all .3s cubic-bezier(.645,.045,.355,1);overflow:hidden}.nz-search-wrapper:hover:not(.expanded){background-color:#0000000a;cursor:pointer}.nz-search-wrapper.expanded{width:250px;background-color:#fff;border-color:#1890ff;box-shadow:0 0 0 2px #1890ff33}.nz-search-wrapper.expanded .custom-search-input{width:100%;padding:4px 32px 4px 11px;opacity:1}.custom-search-input{width:0;opacity:0;border:none;outline:none;background:transparent;padding:0;font-size:14px;color:#000000d9;transition:all .3s cubic-bezier(.645,.045,.355,1)}.custom-search-input::placeholder{color:#bfbfbf}.suffix-wrap{position:absolute;right:0;top:0;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.suffix-icon{position:absolute;display:flex;align-items:center;justify-content:center;font-size:16px;opacity:0;pointer-events:none;transition:opacity .2s ease}.suffix-icon.show{opacity:1;pointer-events:auto}.search{color:var(--primary-color)}.delete{color:#bfbfbf}.delete:hover{color:#ff4d4f}.delete.show{animation:popIn .18s ease}@keyframes popIn{0%{transform:scale(.5)}70%{transform:scale(1.15)}to{transform:scale(1)}}\n"] }]
         }], propDecorators: { searchInputRef: [{
                 type: ViewChild,
                 args: ['searchInput']
@@ -6312,6 +6448,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 type: Input
             }], searchValueChange: [{
                 type: Output
+            }], onSearch: [{
+                type: Output
             }] } });
 
 class CustomNotiComponent {
@@ -6321,66 +6459,980 @@ class CustomNotiComponent {
         this.customNotiService.registerTemplate(this.notiTemplate);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: CustomNotiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: CustomNotiComponent, isStandalone: true, selector: "custom-noti", viewQueries: [{ propertyName: "notiTemplate", first: true, predicate: ["globalNotiTemplate"], descendants: true, static: true }], ngImport: i0, template: `
-    <ng-template #globalNotiTemplate let-data="data">
-      <div class="custom-notification-wrapper">
-        <div class="notification-content">
-          <i nz-icon [nzType]="data.icon" nzTheme="twotone" [nzTwotoneColor]="data.color" class="noti-icon"></i>
-
-          <div class="noti-text">
-            <div class="noti-title">{{ data.title }}</div>
-            <div class="noti-desc">{{ data.description }}</div>
-
-            <div class="noti-action" *ngIf="data.showDetail">
-              <a class="detail-link" (click)="data.onDetailClick()">Chi tiết</a>
-            </div>
-          </div>
-        </div>
-
-        <div class="progress-bar-container">
-          <div
-            class="progress-bar"
-            [style.background-color]="data.color"
-            [style.animation-duration.ms]="data.duration"
-          ></div>
-        </div>
-      </div>
-    </ng-template>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: CustomNotiComponent, isStandalone: true, selector: "custom-noti", viewQueries: [{ propertyName: "notiTemplate", first: true, predicate: ["globalNotiTemplate"], descendants: true, static: true }], ngImport: i0, template: `
+    <ng-template #globalNotiTemplate let-data="data">
+      <div class="custom-notification-wrapper">
+        <div class="notification-content">
+          <i nz-icon [nzType]="data.icon" nzTheme="twotone" [nzTwotoneColor]="data.color" class="noti-icon"></i>
+
+          <div class="noti-text">
+            <div class="noti-title">{{ data.title }}</div>
+            <div class="noti-desc">{{ data.description }}</div>
+
+            <div class="noti-action" *ngIf="data.showDetail">
+              <a class="detail-link" (click)="data.onDetailClick()">Chi tiết</a>
+            </div>
+          </div>
+        </div>
+
+        <div class="progress-bar-container">
+          <div
+            class="progress-bar"
+            [style.background-color]="data.color"
+            [style.animation-duration.ms]="data.duration"
+          ></div>
+        </div>
+      </div>
+    </ng-template>
   `, isInline: true, styles: ["@charset \"UTF-8\";::ng-deep .ant-notification-notice.notification-with-progress{padding:0!important;border-radius:8px;overflow:hidden;box-shadow:0 6px 16px #0000004d,0 3px 6px -4px #0000004d,0 9px 28px 8px #0000001a!important}::ng-deep .notification-with-progress .ant-notification-notice-content{padding:0!important}::ng-deep .notification-with-progress .ant-notification-notice-close{top:8px!important;right:8px!important}::ng-deep .custom-notification-wrapper{position:relative;width:100%;overflow:hidden;padding:0}::ng-deep .notification-content{display:flex;align-items:flex-start;gap:12px;margin-bottom:4px;padding:12px 12px 12px 16px;min-height:50px;word-break:break-word}::ng-deep .notification-content .noti-text{width:100%}::ng-deep .notification-content .noti-icon{font-size:24px;margin-top:2px}::ng-deep .notification-content .noti-title{font-weight:500;font-size:16px;color:#000000d9;margin-bottom:4px;width:94%}::ng-deep .notification-content .noti-desc{font-size:14px;color:#000000a6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}::ng-deep .notification-content .noti-action{margin-top:8px;text-align:right}::ng-deep .notification-content .noti-action .detail-link{color:#1890ff;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;transition:color .3s}::ng-deep .notification-content .noti-action .detail-link:hover{color:#40a9ff;text-decoration:underline}::ng-deep .progress-bar-container{position:absolute;bottom:0;left:0;width:100%;height:4px;background-color:#f0f0f0}::ng-deep .progress-bar{height:100%;width:100%;animation-name:shrinkProgress;animation-timing-function:linear;animation-fill-mode:forwards}::ng-deep .ant-notification-notice.notification-with-progress:hover .progress-bar{animation-play-state:paused!important}@keyframes shrinkProgress{0%{width:100%}to{width:0%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: CustomNotiComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'custom-noti', imports: [CommonModule, NzIconModule], template: `
-    <ng-template #globalNotiTemplate let-data="data">
-      <div class="custom-notification-wrapper">
-        <div class="notification-content">
-          <i nz-icon [nzType]="data.icon" nzTheme="twotone" [nzTwotoneColor]="data.color" class="noti-icon"></i>
-
-          <div class="noti-text">
-            <div class="noti-title">{{ data.title }}</div>
-            <div class="noti-desc">{{ data.description }}</div>
-
-            <div class="noti-action" *ngIf="data.showDetail">
-              <a class="detail-link" (click)="data.onDetailClick()">Chi tiết</a>
-            </div>
-          </div>
-        </div>
-
-        <div class="progress-bar-container">
-          <div
-            class="progress-bar"
-            [style.background-color]="data.color"
-            [style.animation-duration.ms]="data.duration"
-          ></div>
-        </div>
-      </div>
-    </ng-template>
+            args: [{ selector: 'custom-noti', imports: [CommonModule, NzIconModule], template: `
+    <ng-template #globalNotiTemplate let-data="data">
+      <div class="custom-notification-wrapper">
+        <div class="notification-content">
+          <i nz-icon [nzType]="data.icon" nzTheme="twotone" [nzTwotoneColor]="data.color" class="noti-icon"></i>
+
+          <div class="noti-text">
+            <div class="noti-title">{{ data.title }}</div>
+            <div class="noti-desc">{{ data.description }}</div>
+
+            <div class="noti-action" *ngIf="data.showDetail">
+              <a class="detail-link" (click)="data.onDetailClick()">Chi tiết</a>
+            </div>
+          </div>
+        </div>
+
+        <div class="progress-bar-container">
+          <div
+            class="progress-bar"
+            [style.background-color]="data.color"
+            [style.animation-duration.ms]="data.duration"
+          ></div>
+        </div>
+      </div>
+    </ng-template>
   `, styles: ["@charset \"UTF-8\";::ng-deep .ant-notification-notice.notification-with-progress{padding:0!important;border-radius:8px;overflow:hidden;box-shadow:0 6px 16px #0000004d,0 3px 6px -4px #0000004d,0 9px 28px 8px #0000001a!important}::ng-deep .notification-with-progress .ant-notification-notice-content{padding:0!important}::ng-deep .notification-with-progress .ant-notification-notice-close{top:8px!important;right:8px!important}::ng-deep .custom-notification-wrapper{position:relative;width:100%;overflow:hidden;padding:0}::ng-deep .notification-content{display:flex;align-items:flex-start;gap:12px;margin-bottom:4px;padding:12px 12px 12px 16px;min-height:50px;word-break:break-word}::ng-deep .notification-content .noti-text{width:100%}::ng-deep .notification-content .noti-icon{font-size:24px;margin-top:2px}::ng-deep .notification-content .noti-title{font-weight:500;font-size:16px;color:#000000d9;margin-bottom:4px;width:94%}::ng-deep .notification-content .noti-desc{font-size:14px;color:#000000a6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}::ng-deep .notification-content .noti-action{margin-top:8px;text-align:right}::ng-deep .notification-content .noti-action .detail-link{color:#1890ff;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;transition:color .3s}::ng-deep .notification-content .noti-action .detail-link:hover{color:#40a9ff;text-decoration:underline}::ng-deep .progress-bar-container{position:absolute;bottom:0;left:0;width:100%;height:4px;background-color:#f0f0f0}::ng-deep .progress-bar{height:100%;width:100%;animation-name:shrinkProgress;animation-timing-function:linear;animation-fill-mode:forwards}::ng-deep .ant-notification-notice.notification-with-progress:hover .progress-bar{animation-play-state:paused!important}@keyframes shrinkProgress{0%{width:100%}to{width:0%}}\n"] }]
         }], propDecorators: { notiTemplate: [{
                 type: ViewChild,
                 args: ['globalNotiTemplate', { static: true }]
             }] } });
 
+class PermissionService extends HTTPService {
+    cms = inject(CommonService);
+    updateUserRoleRef(data) {
+        return this.cms.ESP({
+            SPN: 'Permission_updateUserRoleRef',
+            Params: [data],
+        });
+    }
+    getUserRoleRef() {
+        return this.cms.ESP({
+            SPN: 'Permission_getUserRoleRef',
+        });
+    }
+    updateRoleMenuRef(data) {
+        return this.cms.ESP({
+            SPN: 'Permission_updateRoleMenuRef',
+            Params: [data],
+        });
+    }
+    getRoleMenuRef() {
+        return this.cms.ESP({
+            SPN: 'Permission_getRoleMenuRef',
+        });
+    }
+    getRoleMenuRefStr(RoleId) {
+        return this.cms.ESP({
+            SPN: 'Permission_getRoleMenuRefStr',
+            Params: [RoleId],
+        });
+    }
+    getUserRoleRefStr(RoleId) {
+        return this.cms.ESP({
+            SPN: 'Permission_getUserRoleRefStr',
+            Params: [RoleId],
+        });
+    }
+    getUserForRole(RoleId) {
+        return this.cms.ESP({
+            SPN: 'Permission_getUserForRole',
+            Params: [RoleId],
+        });
+    }
+    createPermission(obj) {
+        return this.postData(AppGlobals.apiEndpoint + '/api/App_Permission/AddOrEdit', obj);
+    }
+    createLstPermission(bulkPayload) {
+        return this.postData(AppGlobals.apiEndpoint + '/api/App_Permission/AddOrEditLst', bulkPayload);
+    }
+    deletePermission(id) {
+        const p = new HttpParams().append('id', id);
+        return this.postParams(AppGlobals.apiEndpoint + '/api/App_Permission/delete', p);
+    }
+    getResourcePermission(searchText) {
+        return this.cms.ESP({
+            SPN: 'Permission_getResourcePermission',
+            Params: [searchText],
+        });
+    }
+    getPermissionGroupByCode() {
+        return this.cms.ESP({
+            SPN: 'Permission_getPermissionGroupByCode',
+        });
+    }
+    addRoleResourcePermissionRef(roleId, permissionCodes) {
+        let pr = new HttpParams().append('roleId', roleId).append('permissionCodes', permissionCodes);
+        return this.postParams(AppGlobals.apiEndpoint + '/api/App_Permission/addRoleResourcePermissionRef', pr);
+    }
+    getRolePermissions(roleId) {
+        return this.cms.ESP({
+            SPN: 'Permission_getRolePermissions',
+            Params: [roleId],
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: PermissionService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: PermissionService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: PermissionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+const URLs$5 = {
+    getById: '/api/App_Role/GetById',
+    getAll: '/api/App_Role/GetAll',
+    getList: '/api/App_Role/GetList',
+    getPaging: '/api/App_Role/GetPaging',
+    addOrEdit: '/api/App_Role/AddOrEdit',
+    delete: '/api/App_Role/Delete',
+};
+class RoleService extends HTTPService {
+    commonService = inject(CommonService);
+    getById(id) {
+        return this.commonService.ESP({
+            SPN: 'App_Role_getById',
+            Params: [id],
+        });
+    }
+    getAll() {
+        return this.commonService.ESP({
+            SPN: 'App_Role_getAll',
+        });
+    }
+    getList(filter) {
+        return this.postData(AppGlobals.apiEndpoint + URLs$5.getList, filter);
+    }
+    getPaging(filter) {
+        return this.commonService.ESP({
+            SPN: 'App_Role_getPaging',
+            Params: [filter],
+        });
+    }
+    addOrEdit(obj) {
+        return this.commonService.ESP({
+            SPN: 'App_Role_addOrEdit',
+            Params: [obj],
+        });
+    }
+    delete(id) {
+        const params = new HttpParams().append('id', id);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$5.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' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RoleService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+const URLs$4 = {
+    getById: '/api/App_Menu/GetById',
+    getAll: '/api/App_Menu/GetAll',
+    getList: '/api/App_Menu/GetList',
+    getPaging: '/api/App_Menu/GetPaging',
+    addOrEdit: '/api/App_Menu/AddOrEdit',
+    delete: '/api/App_Menu/Delete',
+};
+class MenuService extends HTTPService {
+    commonService = inject(CommonService);
+    getById(id) {
+        return this.commonService.ESP({
+            SPN: 'App_Menu_getById',
+            Params: [id],
+        });
+    }
+    getAll() {
+        return this.commonService.ESP({
+            SPN: 'App_Menu_getAll',
+        });
+    }
+    getList(filter) {
+        return this.postData(AppGlobals.apiEndpoint + URLs$4.getList, filter);
+    }
+    getPaging(filter) {
+        return this.commonService.ESP({
+            SPN: 'App_Menu_getPaging',
+            Params: [filter],
+        });
+    }
+    addOrEdit(obj) {
+        return this.commonService.ESP({
+            SPN: 'App_Menu_addOrEdit',
+            Params: [obj],
+        });
+    }
+    delete(id) {
+        const params = new HttpParams().append('id', id);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$4.delete, params);
+    }
+    getTree() {
+        return this.commonService.ESP({
+            SPN: 'App_Menu_getTree',
+        });
+    }
+    getRolesByMenuId(menuId) {
+        return this.commonService.ESP({
+            SPN: 'App_Role_Menu_Ref_getByMenuId',
+            Params: [menuId],
+        });
+    }
+    addRolesToMenu(menuId, roleIds) {
+        if (!menuId) {
+            return Promise.reject('Menu ID is required');
+        }
+        return this.commonService.ESP({
+            SPN: 'App_Menu_addRolesToMenu',
+            Params: [menuId, roleIds.join(',')],
+        });
+    }
+    updateRoleMenuPermission(obj) {
+        return this.commonService.ESP({
+            SPN: 'App_Menu_updateRoleMenuPermission',
+            Params: [obj.App_Role_Menu_Ref_Id, obj.HasViewPermission, obj.HasEditPermission],
+        });
+    }
+    deleteRoleFromMenu(refId) {
+        return this.commonService.ESP({
+            SPN: 'App_Menu_deleteRoleFromMenu',
+            Params: [refId],
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MenuService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MenuService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MenuService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class RoleMenuPermission extends BaseComponent {
+    roleService = inject(RoleService);
+    menuService = inject(MenuService);
+    permissionService = inject(PermissionService);
+    lstRole = [];
+    lstMenu = [];
+    lstRoleMenuRef = [];
+    // Mapping quyền: RoleId -> MenuId -> boolean
+    roleMenuMap = {};
+    // Quản lý trạng thái Checkbox của từng cột (Role) trên Thead
+    roleColumnState = {};
+    ngOnInit() {
+        this.getData();
+    }
+    getData() {
+        Promise.all([this.roleService.getAll(), this.menuService.getAll(), this.permissionService.getRoleMenuRef()])
+            .then(([roleRes, menuRes, roleMenuRefRes]) => {
+            this.lstRole = roleRes.Data || [];
+            this.lstMenu = menuRes.Data || [];
+            this.lstRoleMenuRef = roleMenuRefRes.Data || [];
+            this.initializeRoleMenuMap();
+        })
+            .catch((err) => this.handleError(err));
+    }
+    initializeRoleMenuMap() {
+        this.roleMenuMap = {};
+        // 1. Dùng Set để tra cứu O(1) thay vì dùng Array.find()
+        const roleMenuSet = new Set(this.lstRoleMenuRef.map((x) => `${x.App_Role_Id}_${x.App_Menu_Id}`));
+        this.lstRole.forEach((role) => {
+            const roleId = role.App_Role_Id;
+            this.roleMenuMap[roleId] = {};
+            this.lstMenu.forEach((menu) => {
+                const menuId = menu.App_Menu_Id;
+                // 2. Lookup siêu tốc bằng Set.has()
+                this.roleMenuMap[roleId][menuId] = roleMenuSet.has(`${roleId}_${menuId}`);
+            });
+            // 3. Tính toán sẵn trạng thái Select All cho cột Role hiện tại
+            this.updateRoleColumnState(roleId);
+        });
+    }
+    // Cập nhật trạng thái Checked / Indeterminate cho cột Role
+    updateRoleColumnState(roleId) {
+        if (!this.lstMenu.length) {
+            this.roleColumnState[roleId] = { checked: false, indeterminate: false };
+            return;
+        }
+        let checkedCount = 0;
+        this.lstMenu.forEach((menu) => {
+            if (this.roleMenuMap[roleId][menu.App_Menu_Id]) {
+                checkedCount++;
+            }
+        });
+        this.roleColumnState[roleId] = {
+            checked: checkedCount === this.lstMenu.length,
+            indeterminate: checkedCount > 0 && checkedCount < this.lstMenu.length,
+        };
+    }
+    // Khi click vào Checkbox All trên Thead
+    toggleRolePermissions(roleId, checked) {
+        this.lstMenu.forEach((menu) => {
+            this.roleMenuMap[roleId][menu.App_Menu_Id] = checked;
+        });
+        // Tính lại trạng thái của cột này
+        this.updateRoleColumnState(roleId);
+    }
+    // Khi click vào từng Checkbox lẻ trong Tbody
+    onSinglePermissionChange(roleId) {
+        this.updateRoleColumnState(roleId);
+    }
+    convertRoleMenuMapToArray() {
+        const result = [];
+        Object.keys(this.roleMenuMap).forEach((roleId) => {
+            Object.keys(this.roleMenuMap[roleId]).forEach((menuId) => {
+                result.push({
+                    RoleId: roleId,
+                    MenuId: menuId,
+                    IsChecked: this.roleMenuMap[roleId][menuId],
+                });
+            });
+        });
+        return result;
+    }
+    saveRoleMenuMap() {
+        const payload = this.convertRoleMenuMapToArray();
+        this.permissionService.updateRoleMenuRef(payload).then(() => this.notiService.success(this.translate.instant(this.TranslateKey.SAVE_SUCCESS)), (err) => this.handleError(err));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RoleMenuPermission, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RoleMenuPermission, isStandalone: true, selector: "app-role-menu-permission", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\" nz-flex nzGap=\"small\">\r\n    <button nz-button nzType=\"primary\" (click)=\"saveRoleMenuMap()\">{{ TranslateKey.SAVE | translate }}</button>\r\n    <button nz-button nzType=\"primary\" (click)=\"getData()\">{{ TranslateKey.REFEESH | translate }}</button>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table [nzData]=\"lstMenu\" nzShowPagination=\"false\" [nzBordered]=\"true\" [nzSize]=\"'small'\">\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"200px\"></th>\r\n          @for (role of lstRole; track role.App_Role_Id) {\r\n            <th style=\"text-align: center\">{{ role.Name }}</th>\r\n          }\r\n        </tr>\r\n        <tr>\r\n          <th nzWidth=\"200px\"></th>\r\n          @for (role of lstRole; track role.App_Role_Id) {\r\n            <th style=\"text-align: center\">\r\n              <label\r\n                nz-checkbox\r\n                [nzChecked]=\"roleColumnState[role.App_Role_Id!].checked\"\r\n                [nzIndeterminate]=\"roleColumnState[role.App_Role_Id!].indeterminate\"\r\n                (nzCheckedChange)=\"toggleRolePermissions(role.App_Role_Id!, $event)\"\r\n              ></label>\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (menu of lstMenu; track menu.App_Menu_Id) {\r\n          <tr>\r\n            <td>{{ menu.TreeNodeName }}</td>\r\n            @for (role of lstRole; track role.App_Role_Id) {\r\n              <td class=\"text-center\">\r\n                <label\r\n                  nz-checkbox\r\n                  [(ngModel)]=\"roleMenuMap[role.App_Role_Id!][menu.App_Menu_Id]\"\r\n                  (ngModelChange)=\"onSinglePermissionChange(role.App_Role_Id!)\"\r\n                ></label>\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: NzSpinModule }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i1$5.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: i1$5.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i1$5.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i1$5.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i1$5.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i1$5.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: 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: NzCheckboxModule }, { kind: "component", type: i3.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId", "nzName"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i5$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: i6$3.ɵ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: i7.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i9.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: RoleMenuPermission, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-role-menu-permission', imports: [
+                        NzSpinModule,
+                        NzTableModule,
+                        FormsModule,
+                        NzCheckboxModule,
+                        TranslateModule,
+                        NzButtonModule,
+                        NzGridModule,
+                        NzFlexModule,
+                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\" nz-flex nzGap=\"small\">\r\n    <button nz-button nzType=\"primary\" (click)=\"saveRoleMenuMap()\">{{ TranslateKey.SAVE | translate }}</button>\r\n    <button nz-button nzType=\"primary\" (click)=\"getData()\">{{ TranslateKey.REFEESH | translate }}</button>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table [nzData]=\"lstMenu\" nzShowPagination=\"false\" [nzBordered]=\"true\" [nzSize]=\"'small'\">\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"200px\"></th>\r\n          @for (role of lstRole; track role.App_Role_Id) {\r\n            <th style=\"text-align: center\">{{ role.Name }}</th>\r\n          }\r\n        </tr>\r\n        <tr>\r\n          <th nzWidth=\"200px\"></th>\r\n          @for (role of lstRole; track role.App_Role_Id) {\r\n            <th style=\"text-align: center\">\r\n              <label\r\n                nz-checkbox\r\n                [nzChecked]=\"roleColumnState[role.App_Role_Id!].checked\"\r\n                [nzIndeterminate]=\"roleColumnState[role.App_Role_Id!].indeterminate\"\r\n                (nzCheckedChange)=\"toggleRolePermissions(role.App_Role_Id!, $event)\"\r\n              ></label>\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (menu of lstMenu; track menu.App_Menu_Id) {\r\n          <tr>\r\n            <td>{{ menu.TreeNodeName }}</td>\r\n            @for (role of lstRole; track role.App_Role_Id) {\r\n              <td class=\"text-center\">\r\n                <label\r\n                  nz-checkbox\r\n                  [(ngModel)]=\"roleMenuMap[role.App_Role_Id!][menu.App_Menu_Id]\"\r\n                  (ngModelChange)=\"onSinglePermissionChange(role.App_Role_Id!)\"\r\n                ></label>\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n</div>\r\n" }]
+        }] });
+
+const URLs$3 = {
+    getById: '/api/App_User/GetById',
+    getByIdEx: '/api/App_User/GetByIdEx',
+    getAll: '/api/App_User/GetAll',
+    getList: '/api/App_User/GetList',
+    getPaging: '/api/App_User/GetPaging',
+    addOrEdit: '/api/App_User/AddOrEdit',
+    delete: '/api/App_User/Delete',
+};
+class UserService extends HTTPService {
+    cms = inject(CommonService);
+    getById(id) {
+        const params = new HttpParams().append('id', id);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$3.getById, params);
+    }
+    getByIdEx(id) {
+        return this.cms.ESP({
+            SPN: 'App_User_getByIdEx',
+            Params: [id],
+        });
+    }
+    getAll() {
+        return this.cms.ESP({
+            SPN: 'App_User_getAll',
+        });
+    }
+    getList(filter) {
+        return this.postData(AppGlobals.apiEndpoint + URLs$3.getList, filter);
+    }
+    getPaging(filter) {
+        return this.cms.ESP({
+            SPN: 'App_User_getPaging',
+            Params: [filter],
+        });
+    }
+    addOrEdit(obj) {
+        return this.cms.ESP({
+            SPN: 'App_User_addOrEdit',
+            Params: [obj],
+        });
+    }
+    delete(id) {
+        const params = new HttpParams().append('id', id);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$3.delete, params);
+    }
+    importUser(data) {
+        return this.postData(`${AppGlobals.apiEndpoint}/api/App_User/ImportUser`, data);
+    }
+    checkImportUser(data) {
+        return this.cms.ESP({
+            SPN: 'App_User_checkImportUser',
+            Params: [data],
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: UserService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: UserService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: UserService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class UserRolePermission extends BaseComponent {
+    roleService = inject(RoleService);
+    userService = inject(UserService);
+    permissionService = inject(PermissionService);
+    lstRole = [];
+    lstUser = [];
+    lstUserRoleRef = [];
+    // Lưu trữ mapping quyền
+    userRoleMap = {};
+    // Lưu trữ trạng thái Checkbox của cột "Chọn tất cả" cho từng User để tránh gọi hàm trong HTML
+    userRowState = {};
+    ngOnInit() {
+        this.getData();
+    }
+    getData() {
+        Promise.all([this.roleService.getAll(), this.userService.getAll(), this.permissionService.getUserRoleRef()])
+            .then(([roleRes, userRes, roleMenuRefRes]) => {
+            this.lstRole = roleRes.Data || [];
+            this.lstUser = userRes.Data || [];
+            this.lstUserRoleRef = roleMenuRefRes.Data || [];
+            this.initializeRoleMenuMap();
+        })
+            .catch((err) => this.handleError(err));
+    }
+    initializeRoleMenuMap() {
+        this.userRoleMap = {};
+        // 1. Chuyển Array sang Set với khóa tổ hợp "UserId_RoleId" để tra cứu O(1)
+        const userRoleSet = new Set(this.lstUserRoleRef.map((x) => `${x.App_User_Id}_${x.App_Role_Id}`));
+        this.lstUser.forEach((user) => {
+            const userId = user.App_User_Id;
+            this.userRoleMap[userId] = {};
+            this.lstRole.forEach((role) => {
+                const roleId = role.App_Role_Id;
+                // 2. Tra cứu siêu tốc bằng Set.has()
+                this.userRoleMap[userId][roleId] = userRoleSet.has(`${userId}_${roleId}`);
+            });
+            // 3. Khởi tạo luôn trạng thái Checkbox tổng cho dòng này
+            this.updateUserRowState(userId);
+        });
+    }
+    // Hàm tính toán trạng thái Checked/Indeterminate và lưu vào Object
+    updateUserRowState(userId) {
+        if (!this.lstRole.length) {
+            this.userRowState[userId] = { checked: false, indeterminate: false };
+            return;
+        }
+        let checkedCount = 0;
+        this.lstRole.forEach((role) => {
+            if (this.userRoleMap[userId][role.App_Role_Id]) {
+                checkedCount++;
+            }
+        });
+        this.userRowState[userId] = {
+            checked: checkedCount === this.lstRole.length,
+            indeterminate: checkedCount > 0 && checkedCount < this.lstRole.length,
+        };
+    }
+    // Xử lý khi click vào Checkbox chọn tất cả của một dòng
+    toggleUserPermissions(userId, checked) {
+        this.lstRole.forEach((role) => {
+            this.userRoleMap[userId][role.App_Role_Id] = checked;
+        });
+        // Cập nhật lại state của dòng
+        this.updateUserRowState(userId);
+    }
+    // Xử lý khi click vào Checkbox của từng quyền lẻ
+    onSinglePermissionChange(userId) {
+        this.updateUserRowState(userId);
+    }
+    convertUserRoleMapToArray() {
+        const result = [];
+        Object.keys(this.userRoleMap).forEach((userId) => {
+            Object.keys(this.userRoleMap[userId]).forEach((roleId) => {
+                result.push({
+                    UserId: userId,
+                    RoleId: roleId,
+                    IsChecked: this.userRoleMap[userId][roleId],
+                });
+            });
+        });
+        return result;
+    }
+    saveUserRoleMap() {
+        const payload = this.convertUserRoleMapToArray();
+        this.permissionService.updateUserRoleRef(payload).then(() => this.notiService.success(this.translate.instant(this.TranslateKey.SAVE_SUCCESS)), (err) => this.handleError(err));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: UserRolePermission, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: UserRolePermission, isStandalone: true, selector: "app-user-role-permission", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\" nz-flex nzGap=\"small\">\r\n    <button nz-button nzType=\"primary\" (click)=\"saveUserRoleMap()\">{{ TranslateKey.SAVE | translate }}</button>\r\n    <button nz-button nzType=\"primary\" (click)=\"getData()\">{{ TranslateKey.REFEESH | translate }}</button>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table [nzData]=\"lstUser\" nzShowPagination=\"false\" [nzBordered]=\"true\" [nzSize]=\"'small'\">\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"200px\"></th>\r\n          <th nzWidth=\"40px\"></th>\r\n          @for (role of lstRole; track role.App_Role_Id) {\r\n            <th style=\"text-align: center\">{{ role.Name }}</th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (user of lstUser; track user.App_User_Id) {\r\n          <tr>\r\n            <td>{{ user.FullName }}</td>\r\n            <td>\r\n              <label\r\n                nz-checkbox\r\n                [nzChecked]=\"userRowState[user.App_User_Id!].checked\"\r\n                [nzIndeterminate]=\"userRowState[user.App_User_Id!].indeterminate\"\r\n                (nzCheckedChange)=\"toggleUserPermissions(user.App_User_Id!, $event)\"\r\n              ></label>\r\n            </td>\r\n            @for (role of lstRole; track role.App_Role_Id) {\r\n              <td class=\"text-center\">\r\n                <label\r\n                  nz-checkbox\r\n                  [(ngModel)]=\"userRoleMap[user.App_User_Id!][role.App_Role_Id!]\"\r\n                  (ngModelChange)=\"onSinglePermissionChange(user.App_User_Id!)\"\r\n                ></label>\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: NzSpinModule }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i1$5.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: i1$5.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i1$5.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i1$5.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i1$5.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i1$5.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: 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: NzCheckboxModule }, { kind: "component", type: i3.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId", "nzName"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i5$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: i6$3.ɵ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: i7.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i9.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: UserRolePermission, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-user-role-permission', imports: [
+                        NzSpinModule,
+                        NzTableModule,
+                        FormsModule,
+                        NzCheckboxModule,
+                        TranslateModule,
+                        NzButtonModule,
+                        NzGridModule,
+                        NzFlexModule,
+                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\" nz-flex nzGap=\"small\">\r\n    <button nz-button nzType=\"primary\" (click)=\"saveUserRoleMap()\">{{ TranslateKey.SAVE | translate }}</button>\r\n    <button nz-button nzType=\"primary\" (click)=\"getData()\">{{ TranslateKey.REFEESH | translate }}</button>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table [nzData]=\"lstUser\" nzShowPagination=\"false\" [nzBordered]=\"true\" [nzSize]=\"'small'\">\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"200px\"></th>\r\n          <th nzWidth=\"40px\"></th>\r\n          @for (role of lstRole; track role.App_Role_Id) {\r\n            <th style=\"text-align: center\">{{ role.Name }}</th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (user of lstUser; track user.App_User_Id) {\r\n          <tr>\r\n            <td>{{ user.FullName }}</td>\r\n            <td>\r\n              <label\r\n                nz-checkbox\r\n                [nzChecked]=\"userRowState[user.App_User_Id!].checked\"\r\n                [nzIndeterminate]=\"userRowState[user.App_User_Id!].indeterminate\"\r\n                (nzCheckedChange)=\"toggleUserPermissions(user.App_User_Id!, $event)\"\r\n              ></label>\r\n            </td>\r\n            @for (role of lstRole; track role.App_Role_Id) {\r\n              <td class=\"text-center\">\r\n                <label\r\n                  nz-checkbox\r\n                  [(ngModel)]=\"userRoleMap[user.App_User_Id!][role.App_Role_Id!]\"\r\n                  (ngModelChange)=\"onSinglePermissionChange(user.App_User_Id!)\"\r\n                ></label>\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n</div>\r\n" }]
+        }] });
+
+class RolePermissionComponent extends BaseComponent {
+    roleService = inject(RoleService);
+    permissionService = inject(PermissionService);
+    lstRole = [];
+    resourceGroups = [];
+    selectedRoleId = null;
+    // Lưu trữ danh sách PermissionCode đang được tích chọn cho Role hiện tại
+    selectedPermissionCodes = new Set();
+    isLoading = false;
+    isSaving = false;
+    ngOnInit() {
+        this.loadRoles();
+        // this.loadAllResources(); // Load khung Matrix (danh mục Module & Actions)
+    }
+    // --- 1. Gọi API lấy danh sách Role động ---
+    loadRoles() {
+        this.roleService.getAll().then((res) => (this.lstRole = res.Data || []));
+    }
+    // --- 2. Gọi API lấy danh mục Resource và Permission (Ma trận tĩnh) ---
+    loadAllResources() {
+        this.permissionService.getPermissionGroupByCode().then((res) => (this.resourceGroups = res.Data), (err) => this.handleError(err));
+    }
+    // --- 3. Xử lý khi User đổi Role ---
+    onRoleChange(roleId) {
+        if (!roleId)
+            return;
+        this.isLoading = true;
+        // Xóa state cũ
+        this.selectedPermissionCodes.clear();
+        let activePermsFromDb = [];
+        this.permissionService
+            .getRolePermissions(roleId)
+            .then((res) => {
+            activePermsFromDb = res.Data?.split(';') || [];
+            this.selectedPermissionCodes = new Set(activePermsFromDb);
+        }, (err) => this.handleError(err))
+            .finally(() => (this.isLoading = false));
+        this.loadAllResources();
+    }
+    // --- 4. Logic UI: Thao tác Check/Uncheck ---
+    isPermissionChecked(code) {
+        return this.selectedPermissionCodes.has(code);
+    }
+    onCheckChange(code, isChecked) {
+        if (isChecked) {
+            this.selectedPermissionCodes.add(code);
+        }
+        else {
+            this.selectedPermissionCodes.delete(code);
+        }
+    }
+    // --- 5. Lưu xuống DB ---
+    savePermissions() {
+        if (!this.selectedRoleId)
+            return;
+        this.isSaving = true;
+        const payload = {
+            roleId: this.selectedRoleId,
+            // Chuyển Set về lại Array để gửi API
+            permissionCodes: Array.from(this.selectedPermissionCodes),
+        };
+        this.permissionService
+            .addRoleResourcePermissionRef(payload.roleId, payload.permissionCodes.join(';'))
+            .then((res) => this.notiService.success('Đã lưu cấu hình phân quyền thành công!'), (err) => this.handleError(err))
+            .finally(() => (this.isSaving = false));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RolePermissionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: RolePermissionComponent, isStandalone: true, selector: "role-resource-permission", usesInheritance: true, ngImport: i0, template: "<nz-card [nzBordered]=\"false\" nzTitle=\"C\u1EA5u h\u00ECnh Ph\u00E2n quy\u1EC1n H\u1EC7 th\u1ED1ng\">\r\n  <div class=\"header-action\" nz-row nzJustify=\"space-between\" nzAlign=\"middle\" style=\"margin-bottom: 24px\">\r\n    <div nz-col>\r\n      <span style=\"margin-right: 16px; font-weight: bold\">Ch\u1ECDn Nh\u00F3m quy\u1EC1n (Role):</span>\r\n      <nz-select\r\n        [(ngModel)]=\"selectedRoleId\"\r\n        (ngModelChange)=\"onRoleChange($event)\"\r\n        nzPlaceHolder=\"-- Vui l\u00F2ng ch\u1ECDn Role --\"\r\n        style=\"width: 300px\"\r\n      >\r\n        <nz-option *ngFor=\"let role of lstRole\" [nzValue]=\"role.App_Role_Id\" [nzLabel]=\"role.Name || ''\"></nz-option>\r\n      </nz-select>\r\n    </div>\r\n    <div nz-col>\r\n      <button\r\n        nz-button\r\n        nzType=\"primary\"\r\n        (click)=\"savePermissions()\"\r\n        [nzLoading]=\"isSaving\"\r\n        [disabled]=\"!selectedRoleId\"\r\n      >\r\n        <i nz-icon nzType=\"save\"></i> L\u01B0u c\u1EA5u h\u00ECnh\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <nz-divider></nz-divider>\r\n\r\n  <nz-spin [nzSpinning]=\"isLoading\">\r\n    <div *ngIf=\"!selectedRoleId\" style=\"text-align: center; color: #999; padding: 40px 0\">\r\n      Vui l\u00F2ng ch\u1ECDn m\u1ED9t Nh\u00F3m quy\u1EC1n \u0111\u1EC3 xem v\u00E0 c\u1EA5u h\u00ECnh.\r\n    </div>\r\n\r\n    <div *ngIf=\"selectedRoleId\">\r\n      <div *ngFor=\"let group of resourceGroups\" style=\"margin-bottom: 24px\">\r\n        <h4 style=\"border-left: 4px solid #1890ff; padding-left: 8px; margin-bottom: 16px\">\r\n          {{ group.ResourceName }}\r\n        </h4>\r\n\r\n        <nz-card [nzBordered]=\"true\" nzSize=\"small\">\r\n          <nz-row [nzGutter]=\"[16, 16]\">\r\n            <nz-col [nzSpan]=\"6\" *ngFor=\"let perm of group.permissions\">\r\n              <label\r\n                nz-checkbox\r\n                [nzChecked]=\"isPermissionChecked(perm.PermissionCode)\"\r\n                (nzCheckedChange)=\"onCheckChange(perm.PermissionCode, $event)\"\r\n              >\r\n                {{ perm.PermissionName }} <br />\r\n                <small style=\"color: #888\">({{ perm.PermissionCode }})</small>\r\n              </label>\r\n            </nz-col>\r\n          </nz-row>\r\n        </nz-card>\r\n      </div>\r\n    </div>\r\n  </nz-spin>\r\n</nz-card>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i3$2.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i6$2.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i6$2.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus"], exportAs: ["nzSelect"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i5$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: i6$3.ɵ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: i7.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzDividerModule }, { kind: "component", type: i8.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }, { kind: "ngmodule", type: NzSpinModule }, { kind: "component", type: i2$1.NzSpinComponent, selector: "nz-spin", inputs: ["nzIndicator", "nzSize", "nzTip", "nzDelay", "nzSimple", "nzSpinning"], exportAs: ["nzSpin"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzCheckboxModule }, { kind: "component", type: i3.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId", "nzName"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RolePermissionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'role-resource-permission', imports: [
+                        CommonModule,
+                        FormsModule,
+                        NzCardModule,
+                        NzSelectModule,
+                        NzButtonModule,
+                        NzDividerModule,
+                        NzSpinModule,
+                        NzGridModule,
+                        NzCheckboxModule,
+                    ], template: "<nz-card [nzBordered]=\"false\" nzTitle=\"C\u1EA5u h\u00ECnh Ph\u00E2n quy\u1EC1n H\u1EC7 th\u1ED1ng\">\r\n  <div class=\"header-action\" nz-row nzJustify=\"space-between\" nzAlign=\"middle\" style=\"margin-bottom: 24px\">\r\n    <div nz-col>\r\n      <span style=\"margin-right: 16px; font-weight: bold\">Ch\u1ECDn Nh\u00F3m quy\u1EC1n (Role):</span>\r\n      <nz-select\r\n        [(ngModel)]=\"selectedRoleId\"\r\n        (ngModelChange)=\"onRoleChange($event)\"\r\n        nzPlaceHolder=\"-- Vui l\u00F2ng ch\u1ECDn Role --\"\r\n        style=\"width: 300px\"\r\n      >\r\n        <nz-option *ngFor=\"let role of lstRole\" [nzValue]=\"role.App_Role_Id\" [nzLabel]=\"role.Name || ''\"></nz-option>\r\n      </nz-select>\r\n    </div>\r\n    <div nz-col>\r\n      <button\r\n        nz-button\r\n        nzType=\"primary\"\r\n        (click)=\"savePermissions()\"\r\n        [nzLoading]=\"isSaving\"\r\n        [disabled]=\"!selectedRoleId\"\r\n      >\r\n        <i nz-icon nzType=\"save\"></i> L\u01B0u c\u1EA5u h\u00ECnh\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <nz-divider></nz-divider>\r\n\r\n  <nz-spin [nzSpinning]=\"isLoading\">\r\n    <div *ngIf=\"!selectedRoleId\" style=\"text-align: center; color: #999; padding: 40px 0\">\r\n      Vui l\u00F2ng ch\u1ECDn m\u1ED9t Nh\u00F3m quy\u1EC1n \u0111\u1EC3 xem v\u00E0 c\u1EA5u h\u00ECnh.\r\n    </div>\r\n\r\n    <div *ngIf=\"selectedRoleId\">\r\n      <div *ngFor=\"let group of resourceGroups\" style=\"margin-bottom: 24px\">\r\n        <h4 style=\"border-left: 4px solid #1890ff; padding-left: 8px; margin-bottom: 16px\">\r\n          {{ group.ResourceName }}\r\n        </h4>\r\n\r\n        <nz-card [nzBordered]=\"true\" nzSize=\"small\">\r\n          <nz-row [nzGutter]=\"[16, 16]\">\r\n            <nz-col [nzSpan]=\"6\" *ngFor=\"let perm of group.permissions\">\r\n              <label\r\n                nz-checkbox\r\n                [nzChecked]=\"isPermissionChecked(perm.PermissionCode)\"\r\n                (nzCheckedChange)=\"onCheckChange(perm.PermissionCode, $event)\"\r\n              >\r\n                {{ perm.PermissionName }} <br />\r\n                <small style=\"color: #888\">({{ perm.PermissionCode }})</small>\r\n              </label>\r\n            </nz-col>\r\n          </nz-row>\r\n        </nz-card>\r\n      </div>\r\n    </div>\r\n  </nz-spin>\r\n</nz-card>\r\n" }]
+        }] });
+
+class PermissionManagerComponent extends BaseComponent {
+    fb;
+    permissionService;
+    permissions = [];
+    searchText = '';
+    isModalVisible = false;
+    isSaving = false;
+    isEditMode = false;
+    currentEditingId = null;
+    permissionForm;
+    // danh sách các Action chuẩn của hệ thống
+    actionOptions = [
+        { value: 'create', label: '1. Tạo mới (create)' },
+        { value: 'read_all', label: '2. Xem tất cả (read_all)' },
+        { value: 'update_all', label: '3. Sửa tất cả (update_all)' },
+        { value: 'delete_all', label: '4. Xóa tất cả (delete_all)' },
+        { value: 'read_own', label: '5. Xem của mình (read_own)' },
+        { value: 'update_own', label: '6. Sửa của mình (update_own)' },
+        { value: 'delete_own', label: '7. Xóa của mình (delete_own)' },
+        { value: 'export', label: '8. Xuất dữ liệu (export)' },
+    ];
+    filteredActionOptions = [...this.actionOptions];
+    isBulkModalVisible = false;
+    bulkForm;
+    bulkActionCheckboxes = [];
+    constructor(fb, permissionService) {
+        super();
+        this.fb = fb;
+        this.permissionService = permissionService;
+        this.initForm();
+        this.initBulkForm();
+    }
+    ngOnInit() {
+        this.loadData();
+    }
+    initBulkForm() {
+        this.bulkForm = this.fb.group({
+            ResourceCode: ['', [Validators.required, Validators.pattern(/^[a-zA-Z0-9]+$/)]],
+            ResourceName: ['', [Validators.required]],
+        });
+    }
+    openBulkModal() {
+        this.isBulkModalVisible = true;
+        this.bulkForm.reset();
+        this.bulkActionCheckboxes = this.actionOptions.map((opt) => ({
+            label: opt.label,
+            value: opt.value,
+            checked: true,
+        }));
+    }
+    closeBulkModal() {
+        this.isBulkModalVisible = false;
+    }
+    saveBulkPermissions() {
+        if (this.bulkForm.invalid) {
+            Object.values(this.bulkForm.controls).forEach((control) => {
+                control.markAsDirty();
+                control.updateValueAndValidity({ onlySelf: true });
+            });
+            return;
+        }
+        const { ResourceCode, ResourceName } = this.bulkForm.value;
+        const selectedActions = this.bulkActionCheckboxes.filter((x) => x.checked);
+        if (selectedActions.length === 0) {
+            this.notiService.warning('Vui lòng chọn ít nhất một hành động để tạo!');
+            return;
+        }
+        const bulkPayload = selectedActions.map((action) => {
+            return {
+                ResourceCode: ResourceCode,
+                ResourceName: ResourceName,
+                PermissionCode: `${ResourceCode.toLowerCase().trim()}:${action.value}`,
+                PermissionName: `${action.value} ${ResourceCode}`,
+                Description: `Auto create for resource ${ResourceName}`,
+            };
+        });
+        this.permissionService.createLstPermission(bulkPayload).then((res) => {
+            this.notiService.success(`Đã tạo thành công ${bulkPayload.length} mã quyền!`);
+            this.isBulkModalVisible = false;
+            this.loadData();
+        }, (err) => this.handleError(err));
+    }
+    initForm() {
+        this.permissionForm = this.fb.group({
+            ResourceName: ['', [Validators.required]],
+            ResourceCode: ['', [Validators.required]],
+            actionSuffix: ['', [Validators.required]],
+            PermissionCode: [{ value: '', disabled: true }],
+            PermissionName: ['', [Validators.required]],
+            Description: [''],
+        });
+        this.permissionForm.valueChanges.subscribe((val) => {
+            const mod = val.ResourceCode || '';
+            const act = val.actionSuffix || '';
+            if (mod && act) {
+                const generatedCode = `${mod.toLowerCase().trim()}:${act}`;
+                this.permissionForm.get('PermissionCode')?.setValue(generatedCode, { emitEvent: false });
+            }
+            else {
+                if (!this.isEditMode) {
+                    this.permissionForm.get('PermissionCode')?.setValue('', { emitEvent: false });
+                }
+            }
+        });
+    }
+    loadData() {
+        this.permissionService.getResourcePermission(this.searchText).then((res) => (this.permissions = res.Data || []), (err) => this.handleError(err));
+    }
+    openModal(data) {
+        this.isModalVisible = true;
+        if (data) {
+            this.isEditMode = true;
+            this.currentEditingId = data.App_Permission_Id;
+            const codeParts = data.PermissionCode.split(':');
+            const suffix = codeParts.length > 1 ? codeParts[1] : '';
+            this.permissionForm.patchValue({
+                ResourceName: data.ResourceName,
+                ResourceCode: data.ResourceCode,
+                actionSuffix: suffix,
+                PermissionCode: data.PermissionCode,
+                PermissionName: data.PermissionName,
+                Description: data.Description,
+            });
+            this.permissionForm.get('ResourceCode')?.disable();
+            this.permissionForm.get('actionSuffix')?.disable();
+        }
+        else {
+            this.isEditMode = false;
+            this.currentEditingId = null;
+            this.permissionForm.reset();
+            this.permissionForm.get('ResourceCode')?.enable();
+            this.permissionForm.get('actionSuffix')?.enable();
+        }
+    }
+    closeModal() {
+        this.isModalVisible = false;
+        this.permissionForm.reset();
+    }
+    savePermission() {
+        if (this.permissionForm.invalid) {
+            this.touchControls(this.permissionForm);
+            return;
+        }
+        const formData = this.permissionForm.getRawValue();
+        const payload = {
+            App_Permission_Id: this.currentEditingId,
+            ResourceName: formData.ResourceName,
+            ResourceCode: formData.ResourceCode,
+            PermissionCode: formData.PermissionCode,
+            PermissionName: formData.PermissionName,
+            Description: formData.Description,
+        };
+        this.permissionService.createPermission(payload).then((res) => {
+            this.notiService.success(`Đã tạo thành công mã quyền!`);
+            this.isModalVisible = false;
+            this.loadData();
+        }, (err) => this.handleError(err));
+    }
+    async deletePermission(id) {
+        await this.permissionService.deletePermission(id);
+        this.notiService.success('Đã xóa mã quyền!');
+        this.loadData();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: PermissionManagerComponent, deps: [{ token: i2.FormBuilder }, { token: PermissionService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: PermissionManagerComponent, isStandalone: true, selector: "resource-permission", usesInheritance: true, ngImport: i0, template: "<nz-card nzTitle=\"Qu\u1EA3n l\u00FD Danh m\u1EE5c M\u00E3 quy\u1EC1n (App_Permission)\" [nzBordered]=\"false\">\r\n  <div class=\"table-operations\" nz-row nzJustify=\"space-between\" style=\"margin-bottom: 16px\">\r\n    <div nz-col>\r\n      <expandable-search [(searchValue)]=\"searchText\" (onSearch)=\"loadData()\"></expandable-search>\r\n      <button nz-button nzType=\"primary\" (click)=\"loadData()\" style=\"margin-right: 8px\">T\u1EA3i l\u1EA1i</button>\r\n    </div>\r\n    <div nz-col>\r\n      <button nz-button nzType=\"primary\" (click)=\"openBulkModal()\" style=\"margin-right: 8px\">\r\n        <i nz-icon nzType=\"bolt\"></i> T\u1EA1o m\u1EDBi (default)\r\n      </button>\r\n      <button nz-button nzType=\"primary\" (click)=\"openModal()\"><i nz-icon nzType=\"plus\"></i> Th\u00EAm m\u1EDBi</button>\r\n    </div>\r\n  </div>\r\n\r\n  <nz-table\r\n    #basicTable\r\n    [nzData]=\"permissions\"\r\n    nzBordered\r\n    nzSize=\"small\"\r\n    nzShowPagination=\"true\"\r\n    nzShowSizeChanger=\"true\"\r\n  >\r\n    <thead>\r\n      <tr>\r\n        <th>Resource</th>\r\n        <th>Permission code</th>\r\n        <th>Permission name</th>\r\n        <th>Description</th>\r\n        <th nzAlign=\"center\">H\u00E0nh \u0111\u1ED9ng</th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <tr *ngFor=\"let data of basicTable.data\">\r\n        <td>\r\n          <div nz-flex nzGap=\"small\">\r\n            <span>{{ data.ResourceName }}</span\r\n            ><nz-tag [nzColor]=\"'blue'\">{{ data.ResourceCode }}</nz-tag>\r\n          </div>\r\n        </td>\r\n        <td>\r\n          <strong>{{ data.PermissionCode }}</strong>\r\n        </td>\r\n        <td>{{ data.PermissionName }}</td>\r\n        <td>{{ data.Description }}</td>\r\n        <td nzAlign=\"center\">\r\n          <a (click)=\"openModal(data)\"><i nz-icon nzType=\"edit\" nzTheme=\"outline\"></i></a>\r\n          <nz-divider nzType=\"vertical\"></nz-divider>\r\n          <a\r\n            nz-popconfirm\r\n            nzPopconfirmTitle=\"X\u00E1c nh\u1EADn x\u00F3a?\"\r\n            nzPopconfirmPlacement=\"left\"\r\n            (nzOnConfirm)=\"deletePermission(data.App_Permission_Id)\"\r\n            style=\"color: red\"\r\n          >\r\n            <i nz-icon nzType=\"delete\" nzTheme=\"outline\"></i>\r\n          </a>\r\n        </td>\r\n      </tr>\r\n    </tbody>\r\n  </nz-table>\r\n</nz-card>\r\n\r\n<nz-modal\r\n  [(nzVisible)]=\"isBulkModalVisible\"\r\n  nzTitle=\"Create Resource permission\"\r\n  (nzOnCancel)=\"closeBulkModal()\"\r\n  (nzOnOk)=\"saveBulkPermissions()\"\r\n  [nzMaskClosable]=\"false\"\r\n  nzWidth=\"750px\"\r\n>\r\n  <ng-container *nzModalContent>\r\n    <!-- <div style=\"margin-bottom: 16px; color: #666\">\r\n      <i nz-icon nzType=\"info-circle\"></i> H\u1EC7 th\u1ED1ng s\u1EBD t\u1EF1 \u0111\u1ED9ng sinh m\u00E3 quy\u1EC1n v\u00E0 t\u00EAn thao t\u00E1c d\u1EF1a tr\u00EAn Module b\u1EA1n nh\u1EADp.\r\n      B\u1EA1n c\u00F3 th\u1EC3 b\u1ECF t\u00EDch c\u00E1c thao t\u00E1c kh\u00F4ng c\u1EA7n thi\u1EBFt.\r\n    </div> -->\r\n\r\n    <form nz-form [formGroup]=\"bulkForm\" nzLayout=\"vertical\">\r\n      <nz-row [nzGutter]=\"16\">\r\n        <nz-col [nzSpan]=\"12\">\r\n          <nz-form-item>\r\n            <nz-form-label nzRequired>Resource Code</nz-form-label>\r\n            <nz-form-control nzErrorTip=\"Vui l\u00F2ng nh\u1EADp m\u00E3 Module vi\u1EBFt li\u1EC1n!\">\r\n              <input nz-input formControlName=\"ResourceCode\" placeholder=\"VD: Invoices, Products...\" />\r\n            </nz-form-control>\r\n          </nz-form-item>\r\n        </nz-col>\r\n\r\n        <nz-col [nzSpan]=\"12\">\r\n          <nz-form-item>\r\n            <nz-form-label nzRequired>Resource Name</nz-form-label>\r\n            <nz-form-control nzErrorTip=\"Vui l\u00F2ng nh\u1EADp t\u00EAn Module!\">\r\n              <input nz-input formControlName=\"ResourceName\" placeholder=\"VD: H\u00F3a \u0111\u01A1n, S\u1EA3n ph\u1EA9m...\" />\r\n            </nz-form-control>\r\n          </nz-form-item>\r\n        </nz-col>\r\n      </nz-row>\r\n    </form>\r\n\r\n    <nz-divider nzText=\"Danh s\u00E1ch Thao t\u00E1c\" nzOrientation=\"left\"></nz-divider>\r\n\r\n    <nz-row [nzGutter]=\"[16, 16]\">\r\n      @for (item of bulkActionCheckboxes; track $index) {\r\n        <nz-col [nzSpan]=\"$index == 0 ? 24 : 8\">\r\n          <label nz-checkbox [(ngModel)]=\"item.checked\" [ngModelOptions]=\"{ standalone: true }\">\r\n            {{ item.label }}\r\n          </label>\r\n        </nz-col>\r\n      }\r\n    </nz-row>\r\n  </ng-container>\r\n</nz-modal>\r\n\r\n<nz-modal\r\n  [(nzVisible)]=\"isModalVisible\"\r\n  [nzTitle]=\"isEditMode ? 'Update Resource permission' : 'Create Resource permission'\"\r\n  (nzOnCancel)=\"closeModal()\"\r\n  (nzOnOk)=\"savePermission()\"\r\n  [nzOkLoading]=\"isSaving\"\r\n  [nzMaskClosable]=\"false\"\r\n>\r\n  <ng-container *nzModalContent>\r\n    <form nz-form [formGroup]=\"permissionForm\" nzLayout=\"vertical\">\r\n      <nz-row [nzGutter]=\"16\">\r\n        <nz-col [nzSpan]=\"24\">\r\n          <nz-form-item>\r\n            <nz-form-label nzRequired>Resource name</nz-form-label>\r\n            <nz-form-control nzErrorTip=\"Vui l\u00F2ng nh\u1EADp nh\u00F3m Resource name!\">\r\n              <input nz-input formControlName=\"ResourceName\" placeholder=\"VD: Todos\" />\r\n            </nz-form-control>\r\n          </nz-form-item>\r\n        </nz-col>\r\n\r\n        <nz-col [nzSpan]=\"12\">\r\n          <nz-form-item>\r\n            <nz-form-label nzRequired>Resource code</nz-form-label>\r\n            <nz-form-control nzErrorTip=\"Vui l\u00F2ng nh\u1EADp nh\u00F3m Resource Code!\">\r\n              <input nz-input formControlName=\"ResourceCode\" placeholder=\"VD: todo\" />\r\n            </nz-form-control>\r\n          </nz-form-item>\r\n        </nz-col>\r\n\r\n        <nz-col [nzSpan]=\"12\">\r\n          <nz-form-item>\r\n            <nz-form-label nzRequired>Permission code</nz-form-label>\r\n            <nz-form-control nzErrorTip=\"Vui l\u00F2ng nh\u1EADp Permission code!\">\r\n              <input\r\n                nz-input\r\n                formControlName=\"actionSuffix\"\r\n                placeholder=\"-- Ch\u1ECDn ho\u1EB7c t\u1EF1 nh\u1EADp --\"\r\n                [nzAutocomplete]=\"auto\"\r\n              />\r\n\r\n              <nz-autocomplete #auto>\r\n                <nz-auto-option *ngFor=\"let option of filteredActionOptions\" [nzValue]=\"option.value\">\r\n                  {{ option.label }}\r\n                </nz-auto-option>\r\n              </nz-autocomplete>\r\n            </nz-form-control>\r\n          </nz-form-item>\r\n        </nz-col>\r\n      </nz-row>\r\n\r\n      <nz-form-item>\r\n        <nz-form-label>M\u00E3 quy\u1EC1n h\u1EC7 th\u1ED1ng (T\u1EF1 \u0111\u1ED9ng sinh)</nz-form-label>\r\n        <nz-form-control>\r\n          <input\r\n            nz-input\r\n            formControlName=\"PermissionCode\"\r\n            style=\"background-color: #f5f5f5; color: #1890ff; font-weight: bold; font-family: monospace\"\r\n          />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <nz-form-item>\r\n        <nz-form-label nzRequired>T\u00EAn thao t\u00E1c hi\u1EC3n th\u1ECB</nz-form-label>\r\n        <nz-form-control nzErrorTip=\"Vui l\u00F2ng nh\u1EADp t\u00EAn thao t\u00E1c!\">\r\n          <input nz-input formControlName=\"PermissionName\" placeholder=\"VD: Xem c\u00F4ng vi\u1EC7c c\u1EE7a m\u00ECnh\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n    </form>\r\n  </ng-container>\r\n</nz-modal>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i3$2.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i1$5.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: i1$5.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i1$5.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i1$5.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i1$5.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i1$5.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: i1$5.NzCellAlignDirective, selector: "th[nzAlign],td[nzAlign]", inputs: ["nzAlign"] }, { kind: "ngmodule", type: NzTagModule }, { kind: "component", type: i5$2.NzTagComponent, selector: "nz-tag", inputs: ["nzMode", "nzColor", "nzChecked", "nzBordered"], outputs: ["nzOnClose", "nzCheckedChange"], exportAs: ["nzTag"] }, { kind: "ngmodule", type: NzDividerModule }, { kind: "component", type: i8.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }, { kind: "ngmodule", type: NzModalModule }, { kind: "component", type: i1$1.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: i1$1.NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "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: NzButtonModule }, { kind: "component", type: i5$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: i6$3.ɵ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: i7.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "ngmodule", type: NzCheckboxModule }, { kind: "component", type: i3.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId", "nzName"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }, { kind: "ngmodule", type: NzAutocompleteModule }, { kind: "component", type: i17.NzAutocompleteComponent, selector: "nz-autocomplete", inputs: ["nzWidth", "nzOverlayClassName", "nzOverlayStyle", "nzDefaultActiveFirstOption", "nzBackfill", "compareWith", "nzDataSource"], outputs: ["selectionChange"], exportAs: ["nzAutocomplete"] }, { kind: "component", type: i17.NzAutocompleteOptionComponent, selector: "nz-auto-option", inputs: ["nzValue", "nzLabel", "nzDisabled"], outputs: ["selectionChange", "mouseEntered"], exportAs: ["nzAutoOption"] }, { kind: "directive", type: i17.NzAutocompleteTriggerDirective, selector: "input[nzAutocomplete], textarea[nzAutocomplete]", inputs: ["nzAutocomplete"], exportAs: ["nzAutocompleteTrigger"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: ExpandableSearchComponent, selector: "expandable-search", inputs: ["searchValue"], outputs: ["searchValueChange", "onSearch"] }, { kind: "ngmodule", type: NzPopconfirmModule }, { kind: "directive", type: i18.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: "directive", type: NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: PermissionManagerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'resource-permission', imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        NzCardModule,
+                        NzInputModule,
+                        NzTableModule,
+                        NzTagModule,
+                        NzDividerModule,
+                        NzModalModule,
+                        NzFormModule,
+                        NzButtonModule,
+                        NzSelectModule,
+                        NzCheckboxModule,
+                        NzAutocompleteModule,
+                        NzIconModule,
+                        ExpandableSearchComponent,
+                        NzPopconfirmModule,
+                        NzFlexDirective,
+                    ], template: "<nz-card nzTitle=\"Qu\u1EA3n l\u00FD Danh m\u1EE5c M\u00E3 quy\u1EC1n (App_Permission)\" [nzBordered]=\"false\">\r\n  <div class=\"table-operations\" nz-row nzJustify=\"space-between\" style=\"margin-bottom: 16px\">\r\n    <div nz-col>\r\n      <expandable-search [(searchValue)]=\"searchText\" (onSearch)=\"loadData()\"></expandable-search>\r\n      <button nz-button nzType=\"primary\" (click)=\"loadData()\" style=\"margin-right: 8px\">T\u1EA3i l\u1EA1i</button>\r\n    </div>\r\n    <div nz-col>\r\n      <button nz-button nzType=\"primary\" (click)=\"openBulkModal()\" style=\"margin-right: 8px\">\r\n        <i nz-icon nzType=\"bolt\"></i> T\u1EA1o m\u1EDBi (default)\r\n      </button>\r\n      <button nz-button nzType=\"primary\" (click)=\"openModal()\"><i nz-icon nzType=\"plus\"></i> Th\u00EAm m\u1EDBi</button>\r\n    </div>\r\n  </div>\r\n\r\n  <nz-table\r\n    #basicTable\r\n    [nzData]=\"permissions\"\r\n    nzBordered\r\n    nzSize=\"small\"\r\n    nzShowPagination=\"true\"\r\n    nzShowSizeChanger=\"true\"\r\n  >\r\n    <thead>\r\n      <tr>\r\n        <th>Resource</th>\r\n        <th>Permission code</th>\r\n        <th>Permission name</th>\r\n        <th>Description</th>\r\n        <th nzAlign=\"center\">H\u00E0nh \u0111\u1ED9ng</th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <tr *ngFor=\"let data of basicTable.data\">\r\n        <td>\r\n          <div nz-flex nzGap=\"small\">\r\n            <span>{{ data.ResourceName }}</span\r\n            ><nz-tag [nzColor]=\"'blue'\">{{ data.ResourceCode }}</nz-tag>\r\n          </div>\r\n        </td>\r\n        <td>\r\n          <strong>{{ data.PermissionCode }}</strong>\r\n        </td>\r\n        <td>{{ data.PermissionName }}</td>\r\n        <td>{{ data.Description }}</td>\r\n        <td nzAlign=\"center\">\r\n          <a (click)=\"openModal(data)\"><i nz-icon nzType=\"edit\" nzTheme=\"outline\"></i></a>\r\n          <nz-divider nzType=\"vertical\"></nz-divider>\r\n          <a\r\n            nz-popconfirm\r\n            nzPopconfirmTitle=\"X\u00E1c nh\u1EADn x\u00F3a?\"\r\n            nzPopconfirmPlacement=\"left\"\r\n            (nzOnConfirm)=\"deletePermission(data.App_Permission_Id)\"\r\n            style=\"color: red\"\r\n          >\r\n            <i nz-icon nzType=\"delete\" nzTheme=\"outline\"></i>\r\n          </a>\r\n        </td>\r\n      </tr>\r\n    </tbody>\r\n  </nz-table>\r\n</nz-card>\r\n\r\n<nz-modal\r\n  [(nzVisible)]=\"isBulkModalVisible\"\r\n  nzTitle=\"Create Resource permission\"\r\n  (nzOnCancel)=\"closeBulkModal()\"\r\n  (nzOnOk)=\"saveBulkPermissions()\"\r\n  [nzMaskClosable]=\"false\"\r\n  nzWidth=\"750px\"\r\n>\r\n  <ng-container *nzModalContent>\r\n    <!-- <div style=\"margin-bottom: 16px; color: #666\">\r\n      <i nz-icon nzType=\"info-circle\"></i> H\u1EC7 th\u1ED1ng s\u1EBD t\u1EF1 \u0111\u1ED9ng sinh m\u00E3 quy\u1EC1n v\u00E0 t\u00EAn thao t\u00E1c d\u1EF1a tr\u00EAn Module b\u1EA1n nh\u1EADp.\r\n      B\u1EA1n c\u00F3 th\u1EC3 b\u1ECF t\u00EDch c\u00E1c thao t\u00E1c kh\u00F4ng c\u1EA7n thi\u1EBFt.\r\n    </div> -->\r\n\r\n    <form nz-form [formGroup]=\"bulkForm\" nzLayout=\"vertical\">\r\n      <nz-row [nzGutter]=\"16\">\r\n        <nz-col [nzSpan]=\"12\">\r\n          <nz-form-item>\r\n            <nz-form-label nzRequired>Resource Code</nz-form-label>\r\n            <nz-form-control nzErrorTip=\"Vui l\u00F2ng nh\u1EADp m\u00E3 Module vi\u1EBFt li\u1EC1n!\">\r\n              <input nz-input formControlName=\"ResourceCode\" placeholder=\"VD: Invoices, Products...\" />\r\n            </nz-form-control>\r\n          </nz-form-item>\r\n        </nz-col>\r\n\r\n        <nz-col [nzSpan]=\"12\">\r\n          <nz-form-item>\r\n            <nz-form-label nzRequired>Resource Name</nz-form-label>\r\n            <nz-form-control nzErrorTip=\"Vui l\u00F2ng nh\u1EADp t\u00EAn Module!\">\r\n              <input nz-input formControlName=\"ResourceName\" placeholder=\"VD: H\u00F3a \u0111\u01A1n, S\u1EA3n ph\u1EA9m...\" />\r\n            </nz-form-control>\r\n          </nz-form-item>\r\n        </nz-col>\r\n      </nz-row>\r\n    </form>\r\n\r\n    <nz-divider nzText=\"Danh s\u00E1ch Thao t\u00E1c\" nzOrientation=\"left\"></nz-divider>\r\n\r\n    <nz-row [nzGutter]=\"[16, 16]\">\r\n      @for (item of bulkActionCheckboxes; track $index) {\r\n        <nz-col [nzSpan]=\"$index == 0 ? 24 : 8\">\r\n          <label nz-checkbox [(ngModel)]=\"item.checked\" [ngModelOptions]=\"{ standalone: true }\">\r\n            {{ item.label }}\r\n          </label>\r\n        </nz-col>\r\n      }\r\n    </nz-row>\r\n  </ng-container>\r\n</nz-modal>\r\n\r\n<nz-modal\r\n  [(nzVisible)]=\"isModalVisible\"\r\n  [nzTitle]=\"isEditMode ? 'Update Resource permission' : 'Create Resource permission'\"\r\n  (nzOnCancel)=\"closeModal()\"\r\n  (nzOnOk)=\"savePermission()\"\r\n  [nzOkLoading]=\"isSaving\"\r\n  [nzMaskClosable]=\"false\"\r\n>\r\n  <ng-container *nzModalContent>\r\n    <form nz-form [formGroup]=\"permissionForm\" nzLayout=\"vertical\">\r\n      <nz-row [nzGutter]=\"16\">\r\n        <nz-col [nzSpan]=\"24\">\r\n          <nz-form-item>\r\n            <nz-form-label nzRequired>Resource name</nz-form-label>\r\n            <nz-form-control nzErrorTip=\"Vui l\u00F2ng nh\u1EADp nh\u00F3m Resource name!\">\r\n              <input nz-input formControlName=\"ResourceName\" placeholder=\"VD: Todos\" />\r\n            </nz-form-control>\r\n          </nz-form-item>\r\n        </nz-col>\r\n\r\n        <nz-col [nzSpan]=\"12\">\r\n          <nz-form-item>\r\n            <nz-form-label nzRequired>Resource code</nz-form-label>\r\n            <nz-form-control nzErrorTip=\"Vui l\u00F2ng nh\u1EADp nh\u00F3m Resource Code!\">\r\n              <input nz-input formControlName=\"ResourceCode\" placeholder=\"VD: todo\" />\r\n            </nz-form-control>\r\n          </nz-form-item>\r\n        </nz-col>\r\n\r\n        <nz-col [nzSpan]=\"12\">\r\n          <nz-form-item>\r\n            <nz-form-label nzRequired>Permission code</nz-form-label>\r\n            <nz-form-control nzErrorTip=\"Vui l\u00F2ng nh\u1EADp Permission code!\">\r\n              <input\r\n                nz-input\r\n                formControlName=\"actionSuffix\"\r\n                placeholder=\"-- Ch\u1ECDn ho\u1EB7c t\u1EF1 nh\u1EADp --\"\r\n                [nzAutocomplete]=\"auto\"\r\n              />\r\n\r\n              <nz-autocomplete #auto>\r\n                <nz-auto-option *ngFor=\"let option of filteredActionOptions\" [nzValue]=\"option.value\">\r\n                  {{ option.label }}\r\n                </nz-auto-option>\r\n              </nz-autocomplete>\r\n            </nz-form-control>\r\n          </nz-form-item>\r\n        </nz-col>\r\n      </nz-row>\r\n\r\n      <nz-form-item>\r\n        <nz-form-label>M\u00E3 quy\u1EC1n h\u1EC7 th\u1ED1ng (T\u1EF1 \u0111\u1ED9ng sinh)</nz-form-label>\r\n        <nz-form-control>\r\n          <input\r\n            nz-input\r\n            formControlName=\"PermissionCode\"\r\n            style=\"background-color: #f5f5f5; color: #1890ff; font-weight: bold; font-family: monospace\"\r\n          />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <nz-form-item>\r\n        <nz-form-label nzRequired>T\u00EAn thao t\u00E1c hi\u1EC3n th\u1ECB</nz-form-label>\r\n        <nz-form-control nzErrorTip=\"Vui l\u00F2ng nh\u1EADp t\u00EAn thao t\u00E1c!\">\r\n          <input nz-input formControlName=\"PermissionName\" placeholder=\"VD: Xem c\u00F4ng vi\u1EC7c c\u1EE7a m\u00ECnh\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n    </form>\r\n  </ng-container>\r\n</nz-modal>\r\n" }]
+        }], ctorParameters: () => [{ type: i2.FormBuilder }, { type: PermissionService }] });
+
+class PermissionComponent extends BaseComponent {
+    ngOnInit() {
+        this.tab = +(this.getUrlQueryParam('tab') || 0);
+        Breadcrumb.lstBreadcrumb = [
+            {
+                Name: 'Permission',
+            },
+            {
+                Name: 'User - Role',
+            },
+        ];
+    }
+    ngOnDestroy() {
+        Breadcrumb.lstBreadcrumb = [];
+    }
+    tab = 0;
+    onSelectedIndexChange(tabIndex) {
+        this.setQueryParam('tab', tabIndex + '');
+        setTimeout(() => {
+            if (tabIndex == 0) {
+                Breadcrumb.lstBreadcrumb = [
+                    {
+                        Name: 'Permission',
+                    },
+                    {
+                        Name: 'User - Role',
+                    },
+                ];
+            }
+            else if (tabIndex == 1) {
+                Breadcrumb.lstBreadcrumb = [
+                    {
+                        Name: 'Permission',
+                    },
+                    {
+                        Name: 'Role - Menu',
+                    },
+                ];
+            }
+            else if (tabIndex == 2) {
+                Breadcrumb.lstBreadcrumb = [
+                    {
+                        Name: 'Permission',
+                    },
+                    {
+                        Name: 'Resource permission',
+                    },
+                ];
+            }
+            else if (tabIndex == 3) {
+                Breadcrumb.lstBreadcrumb = [
+                    {
+                        Name: 'Permission',
+                    },
+                    {
+                        Name: 'Role - Resource permission',
+                    },
+                ];
+            }
+        }, 0);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: PermissionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: PermissionComponent, isStandalone: true, selector: "app-permision", usesInheritance: true, ngImport: i0, template: "<div class=\"panel\">\r\n  <nz-tabset\r\n    nzType=\"card\"\r\n    [nzSize]=\"'small'\"\r\n    [nzSelectedIndex]=\"tab\"\r\n    (nzSelectedIndexChange)=\"onSelectedIndexChange($event)\"\r\n  >\r\n    <nz-tab nzTitle=\"User - Role\">\r\n      <app-user-role-permission></app-user-role-permission>\r\n    </nz-tab>\r\n    <nz-tab nzTitle=\"Role - Menu\">\r\n      <app-role-menu-permission></app-role-menu-permission>\r\n    </nz-tab>\r\n    <nz-tab nzTitle=\"Resource permission\">\r\n      <resource-permission></resource-permission>\r\n    </nz-tab>\r\n    <nz-tab nzTitle=\"Role - Resource permission\">\r\n      <role-resource-permission></role-resource-permission>\r\n    </nz-tab>\r\n  </nz-tabset>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: NzTabsModule }, { kind: "component", type: i1$9.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$9.NzTabComponent, selector: "nz-tab", inputs: ["nzTitle", "nzClosable", "nzCloseIcon", "nzDisabled", "nzForceRender"], outputs: ["nzSelect", "nzDeselect", "nzClick", "nzContextmenu"], exportAs: ["nzTab"] }, { kind: "component", type: UserRolePermission, selector: "app-user-role-permission" }, { kind: "component", type: RoleMenuPermission, selector: "app-role-menu-permission" }, { kind: "component", type: RolePermissionComponent, selector: "role-resource-permission" }, { kind: "component", type: PermissionManagerComponent, selector: "resource-permission" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: PermissionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-permision', imports: [NzTabsModule, UserRolePermission, RoleMenuPermission, RolePermissionComponent, PermissionManagerComponent], template: "<div class=\"panel\">\r\n  <nz-tabset\r\n    nzType=\"card\"\r\n    [nzSize]=\"'small'\"\r\n    [nzSelectedIndex]=\"tab\"\r\n    (nzSelectedIndexChange)=\"onSelectedIndexChange($event)\"\r\n  >\r\n    <nz-tab nzTitle=\"User - Role\">\r\n      <app-user-role-permission></app-user-role-permission>\r\n    </nz-tab>\r\n    <nz-tab nzTitle=\"Role - Menu\">\r\n      <app-role-menu-permission></app-role-menu-permission>\r\n    </nz-tab>\r\n    <nz-tab nzTitle=\"Resource permission\">\r\n      <resource-permission></resource-permission>\r\n    </nz-tab>\r\n    <nz-tab nzTitle=\"Role - Resource permission\">\r\n      <role-resource-permission></role-resource-permission>\r\n    </nz-tab>\r\n  </nz-tabset>\r\n</div>\r\n" }]
+        }] });
+
+class CanActionPipe {
+    permissionService;
+    constructor(permissionService) {
+        this.permissionService = permissionService;
+    }
+    /**
+     * @param data Dữ liệu của bản ghi hiện tại (VD: object todo)
+     * @param resource Tên resource (VD: 'todos')
+     * @param action Hành động (VD: 'update', 'delete')
+     */
+    transform(data, resource, action) {
+        if (data === null)
+            return false;
+        // Chuyển việc thẩm định cho PermissionService xử lý
+        return this.permissionService.hasAccess(resource, action, data);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: CanActionPipe, deps: [{ token: PermissionService$1 }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: CanActionPipe, isStandalone: true, name: "canAction" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: CanActionPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'canAction',
+                    pure: true,
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: PermissionService$1 }] });
+
+class HasPermissionPipe {
+    permissionService;
+    constructor(permissionService) {
+        this.permissionService = permissionService;
+    }
+    // Lấy giá trị bên trái là Resource, tham số bên phải là Action
+    transform(resource, action) {
+        return this.permissionService.hasAccess(resource, action);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: HasPermissionPipe, deps: [{ token: PermissionService$1 }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: HasPermissionPipe, isStandalone: true, name: "hasPermission" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: HasPermissionPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'hasPermission',
+                    pure: true,
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: PermissionService$1 }] });
+
+class HasPermissionDirective {
+    templateRef;
+    viewContainer;
+    permissionService;
+    constructor(templateRef, viewContainer, permissionService) {
+        this.templateRef = templateRef;
+        this.viewContainer = viewContainer;
+        this.permissionService = permissionService;
+    }
+    // Nhận vào một mảng chứa [resource, action]
+    set checkPermission(params) {
+        const [resource, action] = params;
+        // Gọi hàm kiểm tra quyền
+        const hasAccess = this.permissionService.hasAccess(resource, action);
+        if (hasAccess) {
+            // Nếu có quyền -> Hiển thị DOM
+            this.viewContainer.createEmbeddedView(this.templateRef);
+        }
+        else {
+            // Nếu không có quyền -> Xóa DOM
+            this.viewContainer.clear();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: HasPermissionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: PermissionService$1 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.7", type: HasPermissionDirective, isStandalone: true, selector: "[hasPermission]", inputs: { checkPermission: ["hasPermission", "checkPermission"] }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: HasPermissionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hasPermission]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: PermissionService$1 }], propDecorators: { checkPermission: [{
+                type: Input,
+                args: ['hasPermission']
+            }] } });
+
 class NullIfEmptyDirective {
     el;
     ngControl;
@@ -6393,7 +7445,7 @@ class NullIfEmptyDirective {
         // const newValue = value.trim() === '' ? null : value;
         // this.ngControl?.control?.setValue(newValue, { emitEvent: false });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NullIfEmptyDirective, deps: [{ token: i0.ElementRef }, { token: i2$1.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NullIfEmptyDirective, deps: [{ token: i0.ElementRef }, { token: i2.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.7", type: NullIfEmptyDirective, isStandalone: true, selector: "input", host: { listeners: { "input": "onInput()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NullIfEmptyDirective, decorators: [{
@@ -6401,7 +7453,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
             args: [{
                     selector: 'input',
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2$1.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2.NgControl, decorators: [{
                     type: Optional
                 }] }], propDecorators: { onInput: [{
                 type: HostListener,
@@ -6860,13 +7912,13 @@ class RouteMonitorService {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RouteMonitorService, deps: [{ token: i1$6.Router }, { token: AuthService }, { token: NotiService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RouteMonitorService, deps: [{ token: i1$7.Router }, { token: AuthService }, { token: NotiService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RouteMonitorService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RouteMonitorService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$6.Router }, { type: AuthService }, { type: NotiService }] });
+        }], ctorParameters: () => [{ type: i1$7.Router }, { type: AuthService }, { type: NotiService }] });
 
 class ThemeService {
     setHighContrast(enabled) {
@@ -7127,7 +8179,7 @@ class LayoutUser extends BaseComponent {
         this.sessionManager.logout();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LayoutUser, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: LayoutUser, isStandalone: true, selector: "layout-user", usesInheritance: true, ngImport: i0, template: "<nz-badge [nzSize]=\"'small'\" [nzCount]=\"0\">\n  <button nz-button nzType=\"text\" nzSize=\"small\">\n    <nz-icon nzType=\"bell\" nzTheme=\"outline\" style=\"color: #ffffff\" />\n  </button>\n</nz-badge>\n\n<button\n  *ngIf=\"!isXSmall && TokenStorage.getOrgName()\"\n  [@fadeInOut]\n  nz-button\n  nzType=\"text\"\n  nz-dropdown\n  [nzDropdownMenu]=\"isOneUserMultiOrgs ? menuOrg : null\"\n  [nzTrigger]=\"'click'\"\n  style=\"height: 50px; color: #ffffff\"\n>\n  <nz-icon nzType=\"cluster\" nzTheme=\"outline\" />\n  {{ TokenStorage.getOrgName() }}\n</button>\n\n<nz-dropdown-menu #menuOrg=\"nzDropdownMenu\">\n  <ul nz-menu>\n    @for (org of lstOrg; track $index) {\n      <li *ngIf=\"$index > 0\" nz-menu-divider></li>\n      <li nz-menu-item (click)=\"changeOrg(org)\">\n        <nz-icon nzType=\"swap\" nzTheme=\"outline\" />&nbsp;&nbsp; {{ org.Name }}\n      </li>\n    }\n  </ul>\n</nz-dropdown-menu>\n\n<button\n  nz-button\n  nzType=\"text\"\n  nz-dropdown\n  [nzDropdownMenu]=\"menuUser\"\n  [nzTrigger]=\"'click'\"\n  style=\"height: 50px; color: #ffffff\"\n>\n  <nz-icon nzType=\"user\" nzTheme=\"outline\" />\n  {{ TokenStorage.getUserFullname() }}\n</button>\n\n<nz-dropdown-menu #menuUser=\"nzDropdownMenu\">\n  <ul nz-menu>\n    <li *ngIf=\"!(!isXSmall && TokenStorage.getOrgName())\" nz-menu-item>\n      <nz-icon nzType=\"cluster\" nzTheme=\"outline\" />&nbsp;&nbsp; {{ TokenStorage.getOrgName() }}\n    </li>\n    <li *ngIf=\"!(!isXSmall && TokenStorage.getOrgName())\" nz-menu-divider></li>\n    <li nz-menu-item (click)=\"gotoSetting()\">\n      <nz-icon nzType=\"setting\" nzTheme=\"outline\" />&nbsp;&nbsp; {{ TranslateKey.SETTING | translate }}\n    </li>\n    <li nz-menu-divider></li>\n    <li nz-menu-item (click)=\"logout()\">\n      <nz-icon nzType=\"logout\" nzTheme=\"outline\" />&nbsp;&nbsp; {{ TranslateKey.LOGOUT | translate }}\n    </li>\n  </ul>\n</nz-dropdown-menu>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NzLayoutModule }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "directive", type: i4$3.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$3.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "directive", type: i4$3.NzMenuDividerDirective, selector: "[nz-menu-divider]", exportAs: ["nzMenuDivider"] }, { kind: "directive", type: i5$3.NzDropDownDirective, selector: "[nz-dropdown]", inputs: ["nzDropdownMenu", "nzTrigger", "nzMatchWidthElement", "nzBackdrop", "nzClickHide", "nzDisabled", "nzVisible", "nzOverlayClassName", "nzOverlayStyle", "nzPlacement"], outputs: ["nzVisibleChange"], exportAs: ["nzDropdown"] }, { kind: "component", type: i5$3.NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }, { kind: "directive", type: i5$3.NzDropdownButtonDirective, selector: "[nz-button][nz-dropdown]" }, { kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: NzFlexModule }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i8.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i4$1.ɵ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: "ngmodule", type: NzTreeModule }, { kind: "ngmodule", type: NzBackTopModule }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: NzInputModule }, { kind: "ngmodule", type: NzSegmentedModule }, { kind: "ngmodule", type: NzBadgeModule }, { kind: "component", type: i8$1.NzBadgeComponent, selector: "nz-badge", inputs: ["nzShowZero", "nzShowDot", "nzStandalone", "nzDot", "nzOverflowCount", "nzColor", "nzStyle", "nzText", "nzTitle", "nzStatus", "nzCount", "nzOffset", "nzSize"], exportAs: ["nzBadge"] }], animations: [fadeInOut] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: LayoutUser, isStandalone: true, selector: "layout-user", usesInheritance: true, ngImport: i0, template: "<nz-badge [nzSize]=\"'small'\" [nzCount]=\"0\">\r\n  <button nz-button nzType=\"text\" nzSize=\"small\">\r\n    <nz-icon nzType=\"bell\" nzTheme=\"outline\" style=\"color: #ffffff\" />\r\n  </button>\r\n</nz-badge>\r\n\r\n<button\r\n  *ngIf=\"!isXSmall && TokenStorage.getOrgName()\"\r\n  [@fadeInOut]\r\n  nz-button\r\n  nzType=\"text\"\r\n  nz-dropdown\r\n  [nzDropdownMenu]=\"isOneUserMultiOrgs ? menuOrg : null\"\r\n  [nzTrigger]=\"'click'\"\r\n  style=\"height: var(--app-header-height); color: #ffffff\"\r\n>\r\n  <nz-icon nzType=\"cluster\" nzTheme=\"outline\" />\r\n  {{ TokenStorage.getOrgName() }}\r\n</button>\r\n\r\n<nz-dropdown-menu #menuOrg=\"nzDropdownMenu\">\r\n  <ul nz-menu>\r\n    @for (org of lstOrg; track $index) {\r\n      <li *ngIf=\"$index > 0\" nz-menu-divider></li>\r\n      <li nz-menu-item (click)=\"changeOrg(org)\">\r\n        <nz-icon nzType=\"swap\" nzTheme=\"outline\" />&nbsp;&nbsp; {{ org.Name }}\r\n      </li>\r\n    }\r\n  </ul>\r\n</nz-dropdown-menu>\r\n\r\n<button\r\n  nz-button\r\n  nzType=\"text\"\r\n  nz-dropdown\r\n  [nzDropdownMenu]=\"menuUser\"\r\n  [nzTrigger]=\"'click'\"\r\n  style=\"height: var(--app-header-height); color: #ffffff\"\r\n>\r\n  <nz-icon nzType=\"user\" nzTheme=\"outline\" />\r\n  {{ TokenStorage.getUserFullname() }}\r\n</button>\r\n\r\n<nz-dropdown-menu #menuUser=\"nzDropdownMenu\">\r\n  <ul nz-menu>\r\n    <li *ngIf=\"!(!isXSmall && TokenStorage.getOrgName())\" nz-menu-item>\r\n      <nz-icon nzType=\"cluster\" nzTheme=\"outline\" />&nbsp;&nbsp; {{ TokenStorage.getOrgName() }}\r\n    </li>\r\n    <li *ngIf=\"!(!isXSmall && TokenStorage.getOrgName())\" nz-menu-divider></li>\r\n    <li nz-menu-item (click)=\"gotoSetting()\">\r\n      <nz-icon nzType=\"setting\" nzTheme=\"outline\" />&nbsp;&nbsp; {{ TranslateKey.SETTING | translate }}\r\n    </li>\r\n    <li nz-menu-divider></li>\r\n    <li nz-menu-item (click)=\"logout()\">\r\n      <nz-icon nzType=\"logout\" nzTheme=\"outline\" />&nbsp;&nbsp; {{ TranslateKey.LOGOUT | translate }}\r\n    </li>\r\n  </ul>\r\n</nz-dropdown-menu>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NzLayoutModule }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "directive", type: i4$2.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$2.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "directive", type: i4$2.NzMenuDividerDirective, selector: "[nz-menu-divider]", exportAs: ["nzMenuDivider"] }, { kind: "directive", type: i5$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: NzGridModule }, { kind: "ngmodule", type: NzFlexModule }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i5$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: i6$3.ɵ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: "ngmodule", type: NzTreeModule }, { kind: "ngmodule", type: NzBackTopModule }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: NzInputModule }, { kind: "ngmodule", type: NzSegmentedModule }, { kind: "ngmodule", type: NzBadgeModule }, { kind: "component", type: i8$1.NzBadgeComponent, selector: "nz-badge", inputs: ["nzShowZero", "nzShowDot", "nzStandalone", "nzDot", "nzOverflowCount", "nzColor", "nzStyle", "nzText", "nzTitle", "nzStatus", "nzCount", "nzOffset", "nzSize"], exportAs: ["nzBadge"] }], animations: [fadeInOut] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LayoutUser, decorators: [{
             type: Component,
@@ -7148,7 +8200,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         NzTreeModule,
                         NzSegmentedModule,
                         NzBadgeModule,
-                    ], animations: [fadeInOut], template: "<nz-badge [nzSize]=\"'small'\" [nzCount]=\"0\">\n  <button nz-button nzType=\"text\" nzSize=\"small\">\n    <nz-icon nzType=\"bell\" nzTheme=\"outline\" style=\"color: #ffffff\" />\n  </button>\n</nz-badge>\n\n<button\n  *ngIf=\"!isXSmall && TokenStorage.getOrgName()\"\n  [@fadeInOut]\n  nz-button\n  nzType=\"text\"\n  nz-dropdown\n  [nzDropdownMenu]=\"isOneUserMultiOrgs ? menuOrg : null\"\n  [nzTrigger]=\"'click'\"\n  style=\"height: 50px; color: #ffffff\"\n>\n  <nz-icon nzType=\"cluster\" nzTheme=\"outline\" />\n  {{ TokenStorage.getOrgName() }}\n</button>\n\n<nz-dropdown-menu #menuOrg=\"nzDropdownMenu\">\n  <ul nz-menu>\n    @for (org of lstOrg; track $index) {\n      <li *ngIf=\"$index > 0\" nz-menu-divider></li>\n      <li nz-menu-item (click)=\"changeOrg(org)\">\n        <nz-icon nzType=\"swap\" nzTheme=\"outline\" />&nbsp;&nbsp; {{ org.Name }}\n      </li>\n    }\n  </ul>\n</nz-dropdown-menu>\n\n<button\n  nz-button\n  nzType=\"text\"\n  nz-dropdown\n  [nzDropdownMenu]=\"menuUser\"\n  [nzTrigger]=\"'click'\"\n  style=\"height: 50px; color: #ffffff\"\n>\n  <nz-icon nzType=\"user\" nzTheme=\"outline\" />\n  {{ TokenStorage.getUserFullname() }}\n</button>\n\n<nz-dropdown-menu #menuUser=\"nzDropdownMenu\">\n  <ul nz-menu>\n    <li *ngIf=\"!(!isXSmall && TokenStorage.getOrgName())\" nz-menu-item>\n      <nz-icon nzType=\"cluster\" nzTheme=\"outline\" />&nbsp;&nbsp; {{ TokenStorage.getOrgName() }}\n    </li>\n    <li *ngIf=\"!(!isXSmall && TokenStorage.getOrgName())\" nz-menu-divider></li>\n    <li nz-menu-item (click)=\"gotoSetting()\">\n      <nz-icon nzType=\"setting\" nzTheme=\"outline\" />&nbsp;&nbsp; {{ TranslateKey.SETTING | translate }}\n    </li>\n    <li nz-menu-divider></li>\n    <li nz-menu-item (click)=\"logout()\">\n      <nz-icon nzType=\"logout\" nzTheme=\"outline\" />&nbsp;&nbsp; {{ TranslateKey.LOGOUT | translate }}\n    </li>\n  </ul>\n</nz-dropdown-menu>\n" }]
+                    ], animations: [fadeInOut], template: "<nz-badge [nzSize]=\"'small'\" [nzCount]=\"0\">\r\n  <button nz-button nzType=\"text\" nzSize=\"small\">\r\n    <nz-icon nzType=\"bell\" nzTheme=\"outline\" style=\"color: #ffffff\" />\r\n  </button>\r\n</nz-badge>\r\n\r\n<button\r\n  *ngIf=\"!isXSmall && TokenStorage.getOrgName()\"\r\n  [@fadeInOut]\r\n  nz-button\r\n  nzType=\"text\"\r\n  nz-dropdown\r\n  [nzDropdownMenu]=\"isOneUserMultiOrgs ? menuOrg : null\"\r\n  [nzTrigger]=\"'click'\"\r\n  style=\"height: var(--app-header-height); color: #ffffff\"\r\n>\r\n  <nz-icon nzType=\"cluster\" nzTheme=\"outline\" />\r\n  {{ TokenStorage.getOrgName() }}\r\n</button>\r\n\r\n<nz-dropdown-menu #menuOrg=\"nzDropdownMenu\">\r\n  <ul nz-menu>\r\n    @for (org of lstOrg; track $index) {\r\n      <li *ngIf=\"$index > 0\" nz-menu-divider></li>\r\n      <li nz-menu-item (click)=\"changeOrg(org)\">\r\n        <nz-icon nzType=\"swap\" nzTheme=\"outline\" />&nbsp;&nbsp; {{ org.Name }}\r\n      </li>\r\n    }\r\n  </ul>\r\n</nz-dropdown-menu>\r\n\r\n<button\r\n  nz-button\r\n  nzType=\"text\"\r\n  nz-dropdown\r\n  [nzDropdownMenu]=\"menuUser\"\r\n  [nzTrigger]=\"'click'\"\r\n  style=\"height: var(--app-header-height); color: #ffffff\"\r\n>\r\n  <nz-icon nzType=\"user\" nzTheme=\"outline\" />\r\n  {{ TokenStorage.getUserFullname() }}\r\n</button>\r\n\r\n<nz-dropdown-menu #menuUser=\"nzDropdownMenu\">\r\n  <ul nz-menu>\r\n    <li *ngIf=\"!(!isXSmall && TokenStorage.getOrgName())\" nz-menu-item>\r\n      <nz-icon nzType=\"cluster\" nzTheme=\"outline\" />&nbsp;&nbsp; {{ TokenStorage.getOrgName() }}\r\n    </li>\r\n    <li *ngIf=\"!(!isXSmall && TokenStorage.getOrgName())\" nz-menu-divider></li>\r\n    <li nz-menu-item (click)=\"gotoSetting()\">\r\n      <nz-icon nzType=\"setting\" nzTheme=\"outline\" />&nbsp;&nbsp; {{ TranslateKey.SETTING | translate }}\r\n    </li>\r\n    <li nz-menu-divider></li>\r\n    <li nz-menu-item (click)=\"logout()\">\r\n      <nz-icon nzType=\"logout\" nzTheme=\"outline\" />&nbsp;&nbsp; {{ TranslateKey.LOGOUT | translate }}\r\n    </li>\r\n  </ul>\r\n</nz-dropdown-menu>\r\n" }]
         }] });
 
 const URLs$1 = {
@@ -7162,10 +8214,12 @@ const URLs$1 = {
     moveFileToDisk: '/api/file/MoveFileToDisk',
 };
 class FileService extends HTTPService {
-    commonService = inject(CommonService);
+    cms = inject(CommonService);
     getById(id) {
-        const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$1.getById, params);
+        return this.cms.ESP({
+            SPN: 'App_File_getByIdJson',
+            Params: [id],
+        });
     }
     getAll() {
         return this.post(AppGlobals.apiEndpoint + URLs$1.getAll);
@@ -7174,7 +8228,7 @@ class FileService extends HTTPService {
         return this.postData(AppGlobals.apiEndpoint + URLs$1.getList, filter);
     }
     getPaging(filter) {
-        return this.commonService.ESP({
+        return this.cms.ESP({
             SPN: 'App_File_getpaging',
             Params: [filter],
         });
@@ -7229,7 +8283,7 @@ class FileService extends HTTPService {
         return this.postData(AppGlobals.apiEndpoint + URLs$1.addFileWithRef, obj);
     }
     getAnhWithRef(Ref_Table, Ref_Id) {
-        return this.commonService.ESP({
+        return this.cms.ESP({
             SPN: 'App_File_getAnhWithRef',
             Params: [Ref_Table, Ref_Id],
         });
@@ -7460,11 +8514,17 @@ class LayoutComponent extends BaseComponent {
             //   this.visibleMenuDrawer = true;
             // }
         }, 0);
+        // this.device
+        //   .isMobile$()
+        //   .pipe(takeUntil(this.destroy$))
+        //   .subscribe((isMobile) => {
+        //     this.isCollapsed = isMobile;
+        //   });
         this.device
-            .isMobile$()
+            .innerWidth$()
             .pipe(takeUntil$1(this.destroy$))
-            .subscribe((isMobile) => {
-            this.isCollapsed = isMobile;
+            .subscribe((innerWidth) => {
+            this.isCollapsed = innerWidth <= 1280;
         });
         this.isCollapsed = localStorage.getItem('MENU_isCollapsed') == '1';
     }
@@ -7621,13 +8681,8 @@ class LayoutComponent extends BaseComponent {
             this.goto('/');
         }
     }
-    getHeaderMenuWidth() {
-        const width = this.divuser?.nativeElement?.offsetWidth || 0;
-        const r = `calc(100vw - ${this.siderWidthStorage} - ${width}px - 1px)`;
-        return r;
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LayoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: LayoutComponent, isStandalone: true, selector: "layout", viewQueries: [{ propertyName: "divuser", first: true, predicate: ["divuser"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<custom-noti></custom-noti>\n<app-global-spinner></app-global-spinner>\n<nz-layout class=\"app-layout\">\n  <nz-header class=\"app-header\">\n    <div nz-row nzAlign=\"middle\" class=\"header-content\">\n      @if (isCollapsed) {\n        <div @fadeInOut>\n          &nbsp;&nbsp;&nbsp;<button nz-button (click)=\"visibleMenuDrawer = true\">\n            <nz-icon nzType=\"menu\" nzTheme=\"outline\" />\n          </button>\n        </div>\n      }\n\n      <div class=\"header-logo\" [style.width]=\"!isCollapsed ? siderWidthStorage : '100px'\">\n        <div nz-flex nzJustify=\"center\" nzGap=\"small\">\n          <img\n            *ngIf=\"logoUrl$ | async as url\"\n            [src]=\"url\"\n            height=\"40px\"\n            style=\"position: relative; top: 5px\"\n            hideIfError\n          />\n          @if (!isCollapsed) {\n            @if (SYSTEM_NAME) {\n              <h2 style=\"color: whitesmoke\">{{ SYSTEM_NAME }}</h2>\n            } @else {\n              -- o0o --\n            }\n          }\n        </div>\n      </div>\n      @if (!HEADER_MENU_IN_USE) {\n        <box [width]=\"8\"></box>\n        <app-breadcrumb [@fadeInOut] nz-col nzFlex=\"auto\" class=\"breadcrumb-header\"></app-breadcrumb>\n      }\n      <div *ngIf=\"HEADER_MENU_IN_USE\" [ngStyle]=\"{ width: getHeaderMenuWidth() }\" class=\"header-menu\">\n        <div style=\"overflow: auto\">\n          <nz-segmented\n            [nzOptions]=\"lstHeaderMenuDisplay\"\n            [(ngModel)]=\"selectedHeaderMenuDisplay\"\n            (nzValueChange)=\"handleValueChangeHeaderMenu($event)\"\n          ></nz-segmented>\n        </div>\n      </div>\n      <div #divuser>\n        <layout-user></layout-user>\n      </div>\n    </div>\n  </nz-header>\n  <nz-layout class=\"body-layout\">\n    <nz-sider\n      class=\"menu-sidebar\"\n      nzCollapsible\n      [nzWidth]=\"siderWidth\"\n      [nzCollapsedWidth]=\"0\"\n      [nzBreakpoint]=\"'md'\"\n      [(nzCollapsed)]=\"isCollapsed\"\n      [nzTrigger]=\"null\"\n      [nzTheme]=\"'dark'\"\n    >\n      <div class=\"menu-wapper\">\n        @if (MENU_TYPE == 1) {\n          <div class=\"nz-tree-wapper\">\n            <nz-tree\n              [nzData]=\"nodes\"\n              [nzSearchValue]=\"searchValue\"\n              [nzShowLine]=\"true\"\n              [nzSelectedKeys]=\"selectedKeys\"\n              [nzExpandedKeys]=\"expandedKeys\"\n              (nzClick)=\"nzEvent($event)\"\n            ></nz-tree>\n          </div>\n        } @else {\n          <div class=\"nz-tree-wapper\">\n            <ul nz-menu nzTheme=\"light\" nzMode=\"inline\" [nzInlineCollapsed]=\"isCollapsed\">\n              @for (menuLv1 of lstMenu; track menuLv1.App_Menu_Id) {\n                @if (menuLv1.SubMenu) {\n                  <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\n                    @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\n                      @if (menuLv2.SubMenu) {\n                        <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\n                          @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\n                            @if (menuLv3.SubMenu) {\n                              <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\n                                @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\n                                  @if (menuLv4.SubMenu) {\n                                    <ul\n                                      nz-submenu\n                                      [nzOpen]=\"menuLv4.Open\"\n                                      [nzTitle]=\"menuLv4.Name\"\n                                      [nzIcon]=\"menuLv4.Icon\"\n                                    >\n                                      @for (menuLv5 of menuLv4.SubMenu; track menuLv5.App_Menu_Id) {}\n                                    </ul>\n                                  } @else {\n                                    <li nz-menu-item nzMatchRouter>\n                                      <a\n                                        [routerLink]=\"menuLv4.Url\"\n                                        [innerHTML]=\"menuLv4.Name | highlight: searchValue\"\n                                      ></a>\n                                    </li>\n                                  }\n                                }\n                              </ul>\n                            } @else {\n                              <li nz-menu-item nzMatchRouter>\n                                <a [routerLink]=\"menuLv3.Url\" [innerHTML]=\"menuLv3.Name | highlight: searchValue\"></a>\n                              </li>\n                            }\n                          }\n                        </ul>\n                      } @else {\n                        <li nz-menu-item nzMatchRouter>\n                          <a [routerLink]=\"menuLv2.Url\" [innerHTML]=\"menuLv2.Name | highlight: searchValue\"></a>\n                        </li>\n                      }\n                    }\n                  </ul>\n                } @else {\n                  <li nz-menu-item nzMatchRouter>\n                    <a [routerLink]=\"menuLv1.Url\" [innerHTML]=\"menuLv1.Name | highlight: searchValue\"></a>\n                  </li>\n                }\n              }\n            </ul>\n          </div>\n        }\n\n        <nz-input-group [nzSuffix]=\"suffixTemplate\">\n          <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\n        </nz-input-group>\n        <ng-template #suffixTemplate>\n          <span class=\"suffix-wrap\">\n            <icon-delete\n              class=\"suffix-icon delete\"\n              [class.show]=\"searchValue\"\n              [size]=\"14\"\n              (click)=\"searchValue = ''\"\n            ></icon-delete>\n\n            <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\n          </span>\n        </ng-template>\n      </div>\n      <div class=\"sider-footer\" style=\"height: 22px\">\n        <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 0.8em; color: lightgray\">\n          {{ SYSTEM_SUB_NAME_LEFT || \"-- o0o --\" }}\n\n          <span style=\"float: right\" (click)=\"triggerCollapse()\">\n            <nz-icon class=\"trigger\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" />\n          </span>\n        </div>\n      </div>\n    </nz-sider>\n    <nz-layout class=\"main-layout\">\n      <nz-content class=\"content\">\n        <div class=\"inner-content\">\n          @if (HEADER_MENU_IN_USE) {\n            <app-breadcrumb [@fadeInOut] nz-col nzFlex=\"auto\"></app-breadcrumb>\n            <box [height]=\"8\"></box>\n          }\n          <router-outlet></router-outlet>\n        </div>\n        <div nz-row class=\"sider-footer\" style=\"height: 22px\">\n          <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 0.8em; color: lightgray\">\n            {{ SYSTEM_SUB_NAME_RIGHT || \"-- o0o --\" }}\n          </div>\n        </div>\n        <!-- <nz-back-top [nzTarget]=\"'.content'\" [nzVisibilityHeight]=\"500\"></nz-back-top> -->\n      </nz-content>\n    </nz-layout>\n  </nz-layout>\n</nz-layout>\n\n<nz-drawer\n  [nzWrapClassName]=\"'same-theme-color menu-drawer'\"\n  [nzWidth]=\"350\"\n  [nzClosable]=\"false\"\n  [(nzVisible)]=\"visibleMenuDrawer\"\n  [nzMaskClosable]=\"true\"\n  nzPlacement=\"left\"\n  nzTitle=\"\"\n  (nzOnClose)=\"visibleMenuDrawer = false\"\n>\n  <ng-container *nzDrawerContent>\n    <div class=\"menu-wapper\">\n      @if (MENU_TYPE == 1) {\n        <div class=\"nz-tree-wapper in-drawer\">\n          <nz-tree\n            [nzData]=\"nodes\"\n            [nzSearchValue]=\"searchValue\"\n            [nzShowLine]=\"true\"\n            [nzSelectedKeys]=\"selectedKeys\"\n            [nzExpandedKeys]=\"expandedKeys\"\n            (nzClick)=\"nzEvent($event)\"\n          ></nz-tree>\n        </div>\n      } @else {\n        <div class=\"nz-tree-wapper in-drawer\">\n          <ul nz-menu nzTheme=\"light\" nzMode=\"inline\">\n            @for (menuLv1 of lstMenu; track menuLv1.App_Menu_Id) {\n              @if (menuLv1.SubMenu) {\n                <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\n                  @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\n                    @if (menuLv2.SubMenu) {\n                      <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\n                        @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\n                          @if (menuLv3.SubMenu) {\n                            <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\n                              @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\n                                @if (menuLv4.SubMenu) {\n                                  <ul\n                                    nz-submenu\n                                    [nzOpen]=\"menuLv4.Open\"\n                                    [nzTitle]=\"menuLv4.Name\"\n                                    [nzIcon]=\"menuLv4.Icon\"\n                                  >\n                                    @for (menuLv5 of menuLv4.SubMenu; track menuLv5.App_Menu_Id) {}\n                                  </ul>\n                                } @else {\n                                  <li nz-menu-item nzMatchRouter>\n                                    <a\n                                      [routerLink]=\"menuLv4.Url\"\n                                      [innerHTML]=\"menuLv4.Name | highlight: searchValue\"\n                                    ></a>\n                                  </li>\n                                }\n                              }\n                            </ul>\n                          } @else {\n                            <li nz-menu-item nzMatchRouter>\n                              <a [routerLink]=\"menuLv3.Url\" [innerHTML]=\"menuLv3.Name | highlight: searchValue\"></a>\n                            </li>\n                          }\n                        }\n                      </ul>\n                    } @else {\n                      <li nz-menu-item nzMatchRouter>\n                        <a [routerLink]=\"menuLv2.Url\" [innerHTML]=\"menuLv2.Name | highlight: searchValue\"></a>\n                      </li>\n                    }\n                  }\n                </ul>\n              } @else {\n                <li nz-menu-item nzMatchRouter>\n                  <a [routerLink]=\"menuLv1.Url\" [innerHTML]=\"menuLv1.Name | highlight: searchValue\"></a>\n                </li>\n              }\n            }\n          </ul>\n        </div>\n      }\n\n      <nz-input-group [nzSuffix]=\"suffixTemplate\" [nzAddOnAfter]=\"afterTemplate\">\n        <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\n      </nz-input-group>\n      <ng-template #suffixTemplate>\n        <span class=\"suffix-wrap\">\n          <icon-delete\n            class=\"suffix-icon delete\"\n            [class.show]=\"searchValue\"\n            [size]=\"14\"\n            (click)=\"searchValue = ''\"\n          ></icon-delete>\n\n          <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\n        </span>\n      </ng-template>\n      <ng-template #afterTemplate>\n        <button nz-button (click)=\"triggerCollapse(); this.visibleMenuDrawer = false\">\n          <nz-icon *ngIf=\"isCollapsed\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" />\n        </button>\n      </ng-template>\n    </div>\n  </ng-container>\n</nz-drawer>\n", styles: ["@charset \"UTF-8\";:host{display:flex;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body,app-root{height:100%;margin:0}.app-layout{display:flex;flex-direction:column;height:100vh}.app-header{position:fixed;top:0;left:0;width:100%;height:50px;background:var(--theme-color);color:var(--theme-text-color);box-shadow:0 1px 4px #00152914;z-index:1000;display:flex;align-items:center;padding:0}.header-content{width:100%}.header-logo{height:50px;text-align:center;color:var(--theme-text-color);transition:width .3s}.body-layout{display:flex;flex:1;margin-top:50px;height:calc(100vh - 50px);overflow:hidden}.menu-sidebar{width:256px;background:#f0f2f5;overflow-y:auto;min-height:calc(100vh - 50px)}.menu-wapper{min-height:calc(100% - 22px)}.main-layout{display:flex;flex-direction:column;flex:1;overflow:hidden}.content{flex:1;background:#f1f2f5;overflow-x:hidden;overflow-y:auto;height:100%}.inner-content{background:#f1f2f5;min-height:calc(100% - 22px);padding:8px}.content-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:center}.sider-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:right}.trigger{margin-right:8px}.menu-sidebar .ant-menu-inline .ant-menu-item{margin-top:0;margin-bottom:0}::ng-deep .menu-wapper .anticon-file{display:none}:host ::ng-deep .ant-back-top{right:30px;bottom:40px}::ng-deep .same-theme-color .ant-drawer-content{background:var(--theme-menu-color)}.nz-tree-wapper{height:calc(100vh - 104px);overflow-y:auto}.nz-tree-wapper.in-drawer{height:calc(100vh - 32px);overflow-y:auto}::ng-deep .menu-drawer .ant-drawer-body{padding:0}::ng-deep .breadcrumb-header .ant-breadcrumb-link{color:var(--theme-text-color);cursor:pointer}::ng-deep .breadcrumb-header .ant-breadcrumb-separator{color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item:not(.ant-segmented-item-selected){color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item{border-left:1px solid}::ng-deep .header-menu .ant-segmented-item:last-child{border-right:1px solid}.suffix-wrap{position:relative;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}.suffix-icon{position:absolute;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .18s cubic-bezier(.4,0,.2,1);transform:scale(.6) translate(4px)}.suffix-icon.show{opacity:1;pointer-events:auto;transform:scale(1) translate(0)}.search{color:#00000073}.delete{color:#bfbfbf}.delete.show{animation:popIn .18s ease}@keyframes popIn{0%{transform:scale(.5)}70%{transform:scale(1.15)}to{transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: NzLayoutModule }, { kind: "component", type: i2$4.NzLayoutComponent, selector: "nz-layout", exportAs: ["nzLayout"] }, { kind: "component", type: i2$4.NzHeaderComponent, selector: "nz-header", exportAs: ["nzHeader"] }, { kind: "component", type: i2$4.NzContentComponent, selector: "nz-content", exportAs: ["nzContent"] }, { kind: "component", type: i2$4.NzSiderComponent, selector: "nz-sider", inputs: ["nzWidth", "nzTheme", "nzCollapsedWidth", "nzBreakpoint", "nzZeroTrigger", "nzTrigger", "nzReverseArrow", "nzCollapsible", "nzCollapsed"], outputs: ["nzCollapsedChange"], exportAs: ["nzSider"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "directive", type: i4$3.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$3.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "component", type: i4$3.NzSubMenuComponent, selector: "[nz-submenu]", inputs: ["nzMenuClassName", "nzPaddingLeft", "nzTitle", "nzIcon", "nzTriggerSubMenuAction", "nzOpen", "nzDisabled", "nzPlacement"], outputs: ["nzOpenChange"], exportAs: ["nzSubmenu"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i14.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i8.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i4$1.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i10.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "component", type: Breadcrumb, selector: "app-breadcrumb" }, { kind: "component", type: GlobalSpinnerComponent, selector: "app-global-spinner" }, { kind: "ngmodule", type: NzTreeModule }, { kind: "component", type: i10$1.NzTreeComponent, selector: "nz-tree", inputs: ["nzShowIcon", "nzHideUnMatched", "nzBlockNode", "nzExpandAll", "nzSelectMode", "nzCheckStrictly", "nzShowExpand", "nzShowLine", "nzCheckable", "nzAsyncData", "nzDraggable", "nzMultiple", "nzExpandedIcon", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualHeight", "nzTreeTemplate", "nzBeforeDrop", "nzData", "nzExpandedKeys", "nzSelectedKeys", "nzCheckedKeys", "nzSearchValue", "nzSearchFunc"], outputs: ["nzExpandedKeysChange", "nzSelectedKeysChange", "nzCheckedKeysChange", "nzSearchValueChange", "nzClick", "nzDblClick", "nzContextMenu", "nzCheckboxChange", "nzExpandChange", "nzOnDragStart", "nzOnDragEnter", "nzOnDragOver", "nzOnDragLeave", "nzOnDrop", "nzOnDragEnd"], exportAs: ["nzTree"] }, { kind: "ngmodule", type: NzBackTopModule }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "component", type: 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: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i6$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i6$1.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "ngmodule", type: NzSegmentedModule }, { kind: "component", type: i14$1.NzSegmentedComponent, selector: "nz-segmented", inputs: ["nzBlock", "nzDisabled", "nzOptions", "nzSize"], outputs: ["nzValueChange"], exportAs: ["nzSegmented"] }, { kind: "component", type: LayoutUser, selector: "layout-user" }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconSearch, selector: "icon-search", inputs: ["size"], outputs: ["click"] }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "directive", type: HideIfErrorDirective, selector: "img[hideIfError]" }, { kind: "component", type: CustomNotiComponent, selector: "custom-noti" }], animations: [fadeInOut] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: LayoutComponent, isStandalone: true, selector: "layout", viewQueries: [{ propertyName: "divuser", first: true, predicate: ["divuser"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<custom-noti></custom-noti>\r\n<app-global-spinner></app-global-spinner>\r\n<nz-layout class=\"app-layout\">\r\n  <nz-header class=\"app-header\">\r\n    <div nz-row nzAlign=\"middle\" class=\"header-content\">\r\n      @if (isCollapsed) {\r\n        <div @fadeInOut>\r\n          &nbsp;\r\n          <button nz-button nzType=\"text\" style=\"color: var(--theme-text-color)\" (click)=\"visibleMenuDrawer = true\">\r\n            <nz-icon nzType=\"menu\" nzTheme=\"outline\" />\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"header-logo\" [style.width]=\"!isCollapsed ? siderWidthStorage : '100px'\">\r\n        <div nz-flex nzJustify=\"center\" nzGap=\"small\">\r\n          <img\r\n            *ngIf=\"logoUrl$ | async as url\"\r\n            [src]=\"url\"\r\n            height=\"40px\"\r\n            style=\"padding: 4px;\"\r\n            hideIfError\r\n          />\r\n          @if (SYSTEM_NAME) {\r\n            <h2 style=\"color: whitesmoke; margin-bottom: 0\">{{ SYSTEM_NAME }}</h2>\r\n          } @else {\r\n            -- o0o --\r\n          }\r\n        </div>\r\n      </div>\r\n      @if (!HEADER_MENU_IN_USE) {\r\n        <box [width]=\"8\"></box>\r\n        <app-breadcrumb [@fadeInOut] nz-col nzFlex=\"auto\" class=\"breadcrumb-header\"></app-breadcrumb>\r\n      }\r\n      <div *ngIf=\"HEADER_MENU_IN_USE\" nz-col nzFlex=\"auto\" class=\"header-menu\">\r\n        <div style=\"overflow: auto\">\r\n          <nz-segmented\r\n            [nzOptions]=\"lstHeaderMenuDisplay\"\r\n            [(ngModel)]=\"selectedHeaderMenuDisplay\"\r\n            (nzValueChange)=\"handleValueChangeHeaderMenu($event)\"\r\n          ></nz-segmented>\r\n        </div>\r\n      </div>\r\n      <div #divuser>\r\n        <layout-user></layout-user>\r\n      </div>\r\n    </div>\r\n  </nz-header>\r\n  <nz-layout class=\"body-layout\">\r\n    <nz-sider\r\n      class=\"menu-sidebar\"\r\n      nzCollapsible\r\n      [nzWidth]=\"siderWidth\"\r\n      [nzCollapsedWidth]=\"0\"\r\n      [(nzCollapsed)]=\"isCollapsed\"\r\n      [nzTrigger]=\"null\"\r\n      [nzTheme]=\"'dark'\"\r\n    >\r\n      <div class=\"menu-wapper\">\r\n        @if (MENU_TYPE == 1) {\r\n          <div class=\"nz-tree-wapper\">\r\n            <nz-tree\r\n              [nzData]=\"nodes\"\r\n              [nzSearchValue]=\"searchValue\"\r\n              [nzShowLine]=\"true\"\r\n              [nzSelectedKeys]=\"selectedKeys\"\r\n              [nzExpandedKeys]=\"expandedKeys\"\r\n              (nzClick)=\"nzEvent($event)\"\r\n            ></nz-tree>\r\n          </div>\r\n        } @else {\r\n          <div class=\"nz-tree-wapper\">\r\n            <ul nz-menu nzTheme=\"light\" nzMode=\"inline\" [nzInlineCollapsed]=\"isCollapsed\">\r\n              @for (menuLv1 of lstMenu; track menuLv1.App_Menu_Id) {\r\n                @if (menuLv1.SubMenu) {\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) {\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) {\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) {\r\n                                    <ul\r\n                                      nz-submenu\r\n                                      [nzOpen]=\"menuLv4.Open\"\r\n                                      [nzTitle]=\"menuLv4.Name\"\r\n                                      [nzIcon]=\"menuLv4.Icon\"\r\n                                    >\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                                      <a\r\n                                        [routerLink]=\"menuLv4.Url\"\r\n                                        [innerHTML]=\"menuLv4.Name | highlight: searchValue\"\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                                <a [routerLink]=\"menuLv3.Url\" [innerHTML]=\"menuLv3.Name | highlight: searchValue\"></a>\r\n                              </li>\r\n                            }\r\n                          }\r\n                        </ul>\r\n                      } @else {\r\n                        <li nz-menu-item nzMatchRouter>\r\n                          <a [routerLink]=\"menuLv2.Url\" [innerHTML]=\"menuLv2.Name | highlight: searchValue\"></a>\r\n                        </li>\r\n                      }\r\n                    }\r\n                  </ul>\r\n                } @else {\r\n                  <li nz-menu-item nzMatchRouter>\r\n                    <a [routerLink]=\"menuLv1.Url\" [innerHTML]=\"menuLv1.Name | highlight: searchValue\"></a>\r\n                  </li>\r\n                }\r\n              }\r\n            </ul>\r\n          </div>\r\n        }\r\n\r\n        <nz-input-group [nzSuffix]=\"suffixTemplate\">\r\n          <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\r\n        </nz-input-group>\r\n        <ng-template #suffixTemplate>\r\n          <span class=\"suffix-wrap\">\r\n            <icon-delete\r\n              class=\"suffix-icon delete\"\r\n              [class.show]=\"searchValue\"\r\n              [size]=\"14\"\r\n              (click)=\"searchValue = ''\"\r\n            ></icon-delete>\r\n\r\n            <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\r\n          </span>\r\n        </ng-template>\r\n      </div>\r\n      <div class=\"sider-footer\" style=\"height: var(--app-footer-height)\">\r\n        <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 0.8em; color: lightgray\">\r\n          {{ SYSTEM_SUB_NAME_LEFT || \"-- o0o --\" }}\r\n\r\n          <span style=\"float: right\" (click)=\"triggerCollapse()\">\r\n            <nz-icon class=\"trigger\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" />\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </nz-sider>\r\n    <nz-layout class=\"main-layout\">\r\n      <nz-content class=\"content\">\r\n        <div class=\"inner-content\">\r\n          @if (HEADER_MENU_IN_USE) {\r\n            <app-breadcrumb [@fadeInOut] nz-col nzFlex=\"auto\"></app-breadcrumb>\r\n            <box [height]=\"8\"></box>\r\n          }\r\n          <router-outlet></router-outlet>\r\n        </div>\r\n        <div nz-row class=\"sider-footer\" style=\"height: var(--app-footer-height)\">\r\n          <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 0.8em; color: lightgray\">\r\n            {{ SYSTEM_SUB_NAME_RIGHT || \"-- o0o --\" }}\r\n          </div>\r\n        </div>\r\n        <!-- <nz-back-top [nzTarget]=\"'.content'\" [nzVisibilityHeight]=\"500\"></nz-back-top> -->\r\n      </nz-content>\r\n    </nz-layout>\r\n  </nz-layout>\r\n</nz-layout>\r\n\r\n<nz-drawer\r\n  [nzWrapClassName]=\"'same-theme-color menu-drawer'\"\r\n  [nzWidth]=\"350\"\r\n  [nzClosable]=\"false\"\r\n  [(nzVisible)]=\"visibleMenuDrawer\"\r\n  [nzMaskClosable]=\"true\"\r\n  nzPlacement=\"left\"\r\n  nzTitle=\"\"\r\n  (nzOnClose)=\"visibleMenuDrawer = false\"\r\n>\r\n  <ng-container *nzDrawerContent>\r\n    <div class=\"menu-wapper\">\r\n      @if (MENU_TYPE == 1) {\r\n        <div class=\"nz-tree-wapper in-drawer\">\r\n          <nz-tree\r\n            [nzData]=\"nodes\"\r\n            [nzSearchValue]=\"searchValue\"\r\n            [nzShowLine]=\"true\"\r\n            [nzSelectedKeys]=\"selectedKeys\"\r\n            [nzExpandedKeys]=\"expandedKeys\"\r\n            (nzClick)=\"nzEvent($event)\"\r\n          ></nz-tree>\r\n        </div>\r\n      } @else {\r\n        <div class=\"nz-tree-wapper in-drawer\">\r\n          <ul nz-menu nzTheme=\"light\" nzMode=\"inline\">\r\n            @for (menuLv1 of lstMenu; track menuLv1.App_Menu_Id) {\r\n              @if (menuLv1.SubMenu) {\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) {\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) {\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) {\r\n                                  <ul\r\n                                    nz-submenu\r\n                                    [nzOpen]=\"menuLv4.Open\"\r\n                                    [nzTitle]=\"menuLv4.Name\"\r\n                                    [nzIcon]=\"menuLv4.Icon\"\r\n                                  >\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                                    <a\r\n                                      [routerLink]=\"menuLv4.Url\"\r\n                                      [innerHTML]=\"menuLv4.Name | highlight: searchValue\"\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                              <a [routerLink]=\"menuLv3.Url\" [innerHTML]=\"menuLv3.Name | highlight: searchValue\"></a>\r\n                            </li>\r\n                          }\r\n                        }\r\n                      </ul>\r\n                    } @else {\r\n                      <li nz-menu-item nzMatchRouter>\r\n                        <a [routerLink]=\"menuLv2.Url\" [innerHTML]=\"menuLv2.Name | highlight: searchValue\"></a>\r\n                      </li>\r\n                    }\r\n                  }\r\n                </ul>\r\n              } @else {\r\n                <li nz-menu-item nzMatchRouter>\r\n                  <a [routerLink]=\"menuLv1.Url\" [innerHTML]=\"menuLv1.Name | highlight: searchValue\"></a>\r\n                </li>\r\n              }\r\n            }\r\n          </ul>\r\n        </div>\r\n      }\r\n\r\n      <nz-input-group [nzSuffix]=\"suffixTemplate\" [nzAddOnAfter]=\"afterTemplate\">\r\n        <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\r\n      </nz-input-group>\r\n      <ng-template #suffixTemplate>\r\n        <span class=\"suffix-wrap\">\r\n          <icon-delete\r\n            class=\"suffix-icon delete\"\r\n            [class.show]=\"searchValue\"\r\n            [size]=\"14\"\r\n            (click)=\"searchValue = ''\"\r\n          ></icon-delete>\r\n\r\n          <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\r\n        </span>\r\n      </ng-template>\r\n      <ng-template #afterTemplate>\r\n        <button nz-button (click)=\"triggerCollapse(); this.visibleMenuDrawer = false\">\r\n          <nz-icon *ngIf=\"isCollapsed\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" />\r\n        </button>\r\n      </ng-template>\r\n    </div>\r\n  </ng-container>\r\n</nz-drawer>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body,app-root{height:100%;margin:0}.app-layout{display:flex;flex-direction:column;height:100vh}.app-header{position:fixed;top:0;left:0;width:100%;height:var(--app-header-height);background:var(--theme-color);color:var(--theme-text-color);box-shadow:0 1px 4px #00152914;z-index:1000;display:flex;align-items:center;padding:0}.header-content{width:100%}.header-logo{height:var(--app-header-height);text-align:center;color:var(--theme-text-color);transition:width .3s}.body-layout{display:flex;flex:1;margin-top:var(--app-header-height);height:calc(100vh - var(--app-header-height));overflow:hidden}.menu-sidebar{width:256px;background:#f0f2f5;overflow-y:auto;min-height:calc(100vh - var(--app-header-height))}.menu-wapper{min-height:calc(100% - var(--app-footer-height))}.main-layout{display:flex;flex-direction:column;flex:1;overflow:hidden}.content{flex:1;background:#f1f2f5;overflow-x:hidden;overflow-y:auto;height:100%}.inner-content{background:#f1f2f5;min-height:calc(100% - var(--app-footer-height));padding:8px}.content-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:center}.sider-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:right}.trigger{margin-right:8px}.menu-sidebar .ant-menu-inline .ant-menu-item{margin-top:0;margin-bottom:0}::ng-deep .menu-wapper .anticon-file{display:none}:host ::ng-deep .ant-back-top{right:30px;bottom:40px}::ng-deep .same-theme-color .ant-drawer-content{background:var(--theme-menu-color)}.nz-tree-wapper{height:calc(100vh - var(--app-header-height) - var(--app-footer-height) - 32px);overflow-y:auto}.nz-tree-wapper.in-drawer{height:calc(100vh - 32px);overflow-y:auto}::ng-deep .menu-drawer .ant-drawer-body{padding:0}::ng-deep .breadcrumb-header .ant-breadcrumb-link{color:var(--theme-text-color);cursor:pointer}::ng-deep .breadcrumb-header .ant-breadcrumb-separator{color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item:not(.ant-segmented-item-selected){color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item{border-left:1px solid}::ng-deep .header-menu .ant-segmented-item:last-child{border-right:1px solid}.suffix-wrap{position:relative;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}.suffix-icon{position:absolute;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .18s cubic-bezier(.4,0,.2,1);transform:scale(.6) translate(4px)}.suffix-icon.show{opacity:1;pointer-events:auto;transform:scale(1) translate(0)}.search{color:#00000073}.delete{color:#bfbfbf}.delete.show{animation:popIn .18s ease}@keyframes popIn{0%{transform:scale(.5)}70%{transform:scale(1.15)}to{transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: NzLayoutModule }, { kind: "component", type: i2$2.NzLayoutComponent, selector: "nz-layout", exportAs: ["nzLayout"] }, { kind: "component", type: i2$2.NzHeaderComponent, selector: "nz-header", exportAs: ["nzHeader"] }, { kind: "component", type: i2$2.NzContentComponent, selector: "nz-content", exportAs: ["nzContent"] }, { kind: "component", type: i2$2.NzSiderComponent, selector: "nz-sider", inputs: ["nzWidth", "nzTheme", "nzCollapsedWidth", "nzBreakpoint", "nzZeroTrigger", "nzTrigger", "nzReverseArrow", "nzCollapsible", "nzCollapsed"], outputs: ["nzCollapsedChange"], exportAs: ["nzSider"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "directive", type: i4$2.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$2.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "component", type: i4$2.NzSubMenuComponent, selector: "[nz-submenu]", inputs: ["nzMenuClassName", "nzPaddingLeft", "nzTitle", "nzIcon", "nzTriggerSubMenuAction", "nzOpen", "nzDisabled", "nzPlacement"], outputs: ["nzOpenChange"], exportAs: ["nzSubmenu"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i9.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i5$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: i6$3.ɵ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: i7.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "component", type: Breadcrumb, selector: "app-breadcrumb" }, { kind: "component", type: GlobalSpinnerComponent, selector: "app-global-spinner" }, { kind: "ngmodule", type: NzTreeModule }, { kind: "component", type: i10.NzTreeComponent, selector: "nz-tree", inputs: ["nzShowIcon", "nzHideUnMatched", "nzBlockNode", "nzExpandAll", "nzSelectMode", "nzCheckStrictly", "nzShowExpand", "nzShowLine", "nzCheckable", "nzAsyncData", "nzDraggable", "nzMultiple", "nzExpandedIcon", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualHeight", "nzTreeTemplate", "nzBeforeDrop", "nzData", "nzExpandedKeys", "nzSelectedKeys", "nzCheckedKeys", "nzSearchValue", "nzSearchFunc"], outputs: ["nzExpandedKeysChange", "nzSelectedKeysChange", "nzCheckedKeysChange", "nzSearchValueChange", "nzClick", "nzDblClick", "nzContextMenu", "nzCheckboxChange", "nzExpandChange", "nzOnDragStart", "nzOnDragEnter", "nzOnDragOver", "nzOnDragLeave", "nzOnDrop", "nzOnDragEnd"], exportAs: ["nzTree"] }, { kind: "ngmodule", type: NzBackTopModule }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "component", type: i4$1.NzDrawerComponent, selector: "nz-drawer", inputs: ["nzContent", "nzCloseIcon", "nzClosable", "nzMaskClosable", "nzMask", "nzCloseOnNavigation", "nzNoAnimation", "nzKeyboard", "nzTitle", "nzExtra", "nzFooter", "nzPlacement", "nzSize", "nzMaskStyle", "nzBodyStyle", "nzWrapClassName", "nzWidth", "nzHeight", "nzZIndex", "nzOffsetX", "nzOffsetY", "nzVisible"], outputs: ["nzOnViewInit", "nzOnClose", "nzVisibleChange"], exportAs: ["nzDrawer"] }, { kind: "directive", type: i4$1.NzDrawerContentDirective, selector: "[nzDrawerContent]", exportAs: ["nzDrawerContent"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i6$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i6$1.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "ngmodule", type: NzSegmentedModule }, { kind: "component", type: i14.NzSegmentedComponent, selector: "nz-segmented", inputs: ["nzBlock", "nzDisabled", "nzOptions", "nzSize"], outputs: ["nzValueChange"], exportAs: ["nzSegmented"] }, { kind: "component", type: LayoutUser, selector: "layout-user" }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconSearch, selector: "icon-search", inputs: ["size"], outputs: ["click"] }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "directive", type: HideIfErrorDirective, selector: "img[hideIfError]" }, { kind: "component", type: CustomNotiComponent, selector: "custom-noti" }], animations: [fadeInOut] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
@@ -7658,7 +8713,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         HighlightPipe,
                         HideIfErrorDirective,
                         CustomNotiComponent,
-                    ], animations: [fadeInOut], template: "<custom-noti></custom-noti>\n<app-global-spinner></app-global-spinner>\n<nz-layout class=\"app-layout\">\n  <nz-header class=\"app-header\">\n    <div nz-row nzAlign=\"middle\" class=\"header-content\">\n      @if (isCollapsed) {\n        <div @fadeInOut>\n          &nbsp;&nbsp;&nbsp;<button nz-button (click)=\"visibleMenuDrawer = true\">\n            <nz-icon nzType=\"menu\" nzTheme=\"outline\" />\n          </button>\n        </div>\n      }\n\n      <div class=\"header-logo\" [style.width]=\"!isCollapsed ? siderWidthStorage : '100px'\">\n        <div nz-flex nzJustify=\"center\" nzGap=\"small\">\n          <img\n            *ngIf=\"logoUrl$ | async as url\"\n            [src]=\"url\"\n            height=\"40px\"\n            style=\"position: relative; top: 5px\"\n            hideIfError\n          />\n          @if (!isCollapsed) {\n            @if (SYSTEM_NAME) {\n              <h2 style=\"color: whitesmoke\">{{ SYSTEM_NAME }}</h2>\n            } @else {\n              -- o0o --\n            }\n          }\n        </div>\n      </div>\n      @if (!HEADER_MENU_IN_USE) {\n        <box [width]=\"8\"></box>\n        <app-breadcrumb [@fadeInOut] nz-col nzFlex=\"auto\" class=\"breadcrumb-header\"></app-breadcrumb>\n      }\n      <div *ngIf=\"HEADER_MENU_IN_USE\" [ngStyle]=\"{ width: getHeaderMenuWidth() }\" class=\"header-menu\">\n        <div style=\"overflow: auto\">\n          <nz-segmented\n            [nzOptions]=\"lstHeaderMenuDisplay\"\n            [(ngModel)]=\"selectedHeaderMenuDisplay\"\n            (nzValueChange)=\"handleValueChangeHeaderMenu($event)\"\n          ></nz-segmented>\n        </div>\n      </div>\n      <div #divuser>\n        <layout-user></layout-user>\n      </div>\n    </div>\n  </nz-header>\n  <nz-layout class=\"body-layout\">\n    <nz-sider\n      class=\"menu-sidebar\"\n      nzCollapsible\n      [nzWidth]=\"siderWidth\"\n      [nzCollapsedWidth]=\"0\"\n      [nzBreakpoint]=\"'md'\"\n      [(nzCollapsed)]=\"isCollapsed\"\n      [nzTrigger]=\"null\"\n      [nzTheme]=\"'dark'\"\n    >\n      <div class=\"menu-wapper\">\n        @if (MENU_TYPE == 1) {\n          <div class=\"nz-tree-wapper\">\n            <nz-tree\n              [nzData]=\"nodes\"\n              [nzSearchValue]=\"searchValue\"\n              [nzShowLine]=\"true\"\n              [nzSelectedKeys]=\"selectedKeys\"\n              [nzExpandedKeys]=\"expandedKeys\"\n              (nzClick)=\"nzEvent($event)\"\n            ></nz-tree>\n          </div>\n        } @else {\n          <div class=\"nz-tree-wapper\">\n            <ul nz-menu nzTheme=\"light\" nzMode=\"inline\" [nzInlineCollapsed]=\"isCollapsed\">\n              @for (menuLv1 of lstMenu; track menuLv1.App_Menu_Id) {\n                @if (menuLv1.SubMenu) {\n                  <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\n                    @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\n                      @if (menuLv2.SubMenu) {\n                        <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\n                          @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\n                            @if (menuLv3.SubMenu) {\n                              <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\n                                @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\n                                  @if (menuLv4.SubMenu) {\n                                    <ul\n                                      nz-submenu\n                                      [nzOpen]=\"menuLv4.Open\"\n                                      [nzTitle]=\"menuLv4.Name\"\n                                      [nzIcon]=\"menuLv4.Icon\"\n                                    >\n                                      @for (menuLv5 of menuLv4.SubMenu; track menuLv5.App_Menu_Id) {}\n                                    </ul>\n                                  } @else {\n                                    <li nz-menu-item nzMatchRouter>\n                                      <a\n                                        [routerLink]=\"menuLv4.Url\"\n                                        [innerHTML]=\"menuLv4.Name | highlight: searchValue\"\n                                      ></a>\n                                    </li>\n                                  }\n                                }\n                              </ul>\n                            } @else {\n                              <li nz-menu-item nzMatchRouter>\n                                <a [routerLink]=\"menuLv3.Url\" [innerHTML]=\"menuLv3.Name | highlight: searchValue\"></a>\n                              </li>\n                            }\n                          }\n                        </ul>\n                      } @else {\n                        <li nz-menu-item nzMatchRouter>\n                          <a [routerLink]=\"menuLv2.Url\" [innerHTML]=\"menuLv2.Name | highlight: searchValue\"></a>\n                        </li>\n                      }\n                    }\n                  </ul>\n                } @else {\n                  <li nz-menu-item nzMatchRouter>\n                    <a [routerLink]=\"menuLv1.Url\" [innerHTML]=\"menuLv1.Name | highlight: searchValue\"></a>\n                  </li>\n                }\n              }\n            </ul>\n          </div>\n        }\n\n        <nz-input-group [nzSuffix]=\"suffixTemplate\">\n          <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\n        </nz-input-group>\n        <ng-template #suffixTemplate>\n          <span class=\"suffix-wrap\">\n            <icon-delete\n              class=\"suffix-icon delete\"\n              [class.show]=\"searchValue\"\n              [size]=\"14\"\n              (click)=\"searchValue = ''\"\n            ></icon-delete>\n\n            <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\n          </span>\n        </ng-template>\n      </div>\n      <div class=\"sider-footer\" style=\"height: 22px\">\n        <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 0.8em; color: lightgray\">\n          {{ SYSTEM_SUB_NAME_LEFT || \"-- o0o --\" }}\n\n          <span style=\"float: right\" (click)=\"triggerCollapse()\">\n            <nz-icon class=\"trigger\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" />\n          </span>\n        </div>\n      </div>\n    </nz-sider>\n    <nz-layout class=\"main-layout\">\n      <nz-content class=\"content\">\n        <div class=\"inner-content\">\n          @if (HEADER_MENU_IN_USE) {\n            <app-breadcrumb [@fadeInOut] nz-col nzFlex=\"auto\"></app-breadcrumb>\n            <box [height]=\"8\"></box>\n          }\n          <router-outlet></router-outlet>\n        </div>\n        <div nz-row class=\"sider-footer\" style=\"height: 22px\">\n          <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 0.8em; color: lightgray\">\n            {{ SYSTEM_SUB_NAME_RIGHT || \"-- o0o --\" }}\n          </div>\n        </div>\n        <!-- <nz-back-top [nzTarget]=\"'.content'\" [nzVisibilityHeight]=\"500\"></nz-back-top> -->\n      </nz-content>\n    </nz-layout>\n  </nz-layout>\n</nz-layout>\n\n<nz-drawer\n  [nzWrapClassName]=\"'same-theme-color menu-drawer'\"\n  [nzWidth]=\"350\"\n  [nzClosable]=\"false\"\n  [(nzVisible)]=\"visibleMenuDrawer\"\n  [nzMaskClosable]=\"true\"\n  nzPlacement=\"left\"\n  nzTitle=\"\"\n  (nzOnClose)=\"visibleMenuDrawer = false\"\n>\n  <ng-container *nzDrawerContent>\n    <div class=\"menu-wapper\">\n      @if (MENU_TYPE == 1) {\n        <div class=\"nz-tree-wapper in-drawer\">\n          <nz-tree\n            [nzData]=\"nodes\"\n            [nzSearchValue]=\"searchValue\"\n            [nzShowLine]=\"true\"\n            [nzSelectedKeys]=\"selectedKeys\"\n            [nzExpandedKeys]=\"expandedKeys\"\n            (nzClick)=\"nzEvent($event)\"\n          ></nz-tree>\n        </div>\n      } @else {\n        <div class=\"nz-tree-wapper in-drawer\">\n          <ul nz-menu nzTheme=\"light\" nzMode=\"inline\">\n            @for (menuLv1 of lstMenu; track menuLv1.App_Menu_Id) {\n              @if (menuLv1.SubMenu) {\n                <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\n                  @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\n                    @if (menuLv2.SubMenu) {\n                      <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\n                        @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\n                          @if (menuLv3.SubMenu) {\n                            <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\n                              @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\n                                @if (menuLv4.SubMenu) {\n                                  <ul\n                                    nz-submenu\n                                    [nzOpen]=\"menuLv4.Open\"\n                                    [nzTitle]=\"menuLv4.Name\"\n                                    [nzIcon]=\"menuLv4.Icon\"\n                                  >\n                                    @for (menuLv5 of menuLv4.SubMenu; track menuLv5.App_Menu_Id) {}\n                                  </ul>\n                                } @else {\n                                  <li nz-menu-item nzMatchRouter>\n                                    <a\n                                      [routerLink]=\"menuLv4.Url\"\n                                      [innerHTML]=\"menuLv4.Name | highlight: searchValue\"\n                                    ></a>\n                                  </li>\n                                }\n                              }\n                            </ul>\n                          } @else {\n                            <li nz-menu-item nzMatchRouter>\n                              <a [routerLink]=\"menuLv3.Url\" [innerHTML]=\"menuLv3.Name | highlight: searchValue\"></a>\n                            </li>\n                          }\n                        }\n                      </ul>\n                    } @else {\n                      <li nz-menu-item nzMatchRouter>\n                        <a [routerLink]=\"menuLv2.Url\" [innerHTML]=\"menuLv2.Name | highlight: searchValue\"></a>\n                      </li>\n                    }\n                  }\n                </ul>\n              } @else {\n                <li nz-menu-item nzMatchRouter>\n                  <a [routerLink]=\"menuLv1.Url\" [innerHTML]=\"menuLv1.Name | highlight: searchValue\"></a>\n                </li>\n              }\n            }\n          </ul>\n        </div>\n      }\n\n      <nz-input-group [nzSuffix]=\"suffixTemplate\" [nzAddOnAfter]=\"afterTemplate\">\n        <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\n      </nz-input-group>\n      <ng-template #suffixTemplate>\n        <span class=\"suffix-wrap\">\n          <icon-delete\n            class=\"suffix-icon delete\"\n            [class.show]=\"searchValue\"\n            [size]=\"14\"\n            (click)=\"searchValue = ''\"\n          ></icon-delete>\n\n          <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\n        </span>\n      </ng-template>\n      <ng-template #afterTemplate>\n        <button nz-button (click)=\"triggerCollapse(); this.visibleMenuDrawer = false\">\n          <nz-icon *ngIf=\"isCollapsed\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" />\n        </button>\n      </ng-template>\n    </div>\n  </ng-container>\n</nz-drawer>\n", styles: ["@charset \"UTF-8\";:host{display:flex;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body,app-root{height:100%;margin:0}.app-layout{display:flex;flex-direction:column;height:100vh}.app-header{position:fixed;top:0;left:0;width:100%;height:50px;background:var(--theme-color);color:var(--theme-text-color);box-shadow:0 1px 4px #00152914;z-index:1000;display:flex;align-items:center;padding:0}.header-content{width:100%}.header-logo{height:50px;text-align:center;color:var(--theme-text-color);transition:width .3s}.body-layout{display:flex;flex:1;margin-top:50px;height:calc(100vh - 50px);overflow:hidden}.menu-sidebar{width:256px;background:#f0f2f5;overflow-y:auto;min-height:calc(100vh - 50px)}.menu-wapper{min-height:calc(100% - 22px)}.main-layout{display:flex;flex-direction:column;flex:1;overflow:hidden}.content{flex:1;background:#f1f2f5;overflow-x:hidden;overflow-y:auto;height:100%}.inner-content{background:#f1f2f5;min-height:calc(100% - 22px);padding:8px}.content-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:center}.sider-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:right}.trigger{margin-right:8px}.menu-sidebar .ant-menu-inline .ant-menu-item{margin-top:0;margin-bottom:0}::ng-deep .menu-wapper .anticon-file{display:none}:host ::ng-deep .ant-back-top{right:30px;bottom:40px}::ng-deep .same-theme-color .ant-drawer-content{background:var(--theme-menu-color)}.nz-tree-wapper{height:calc(100vh - 104px);overflow-y:auto}.nz-tree-wapper.in-drawer{height:calc(100vh - 32px);overflow-y:auto}::ng-deep .menu-drawer .ant-drawer-body{padding:0}::ng-deep .breadcrumb-header .ant-breadcrumb-link{color:var(--theme-text-color);cursor:pointer}::ng-deep .breadcrumb-header .ant-breadcrumb-separator{color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item:not(.ant-segmented-item-selected){color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item{border-left:1px solid}::ng-deep .header-menu .ant-segmented-item:last-child{border-right:1px solid}.suffix-wrap{position:relative;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}.suffix-icon{position:absolute;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .18s cubic-bezier(.4,0,.2,1);transform:scale(.6) translate(4px)}.suffix-icon.show{opacity:1;pointer-events:auto;transform:scale(1) translate(0)}.search{color:#00000073}.delete{color:#bfbfbf}.delete.show{animation:popIn .18s ease}@keyframes popIn{0%{transform:scale(.5)}70%{transform:scale(1.15)}to{transform:scale(1)}}\n"] }]
+                    ], animations: [fadeInOut], template: "<custom-noti></custom-noti>\r\n<app-global-spinner></app-global-spinner>\r\n<nz-layout class=\"app-layout\">\r\n  <nz-header class=\"app-header\">\r\n    <div nz-row nzAlign=\"middle\" class=\"header-content\">\r\n      @if (isCollapsed) {\r\n        <div @fadeInOut>\r\n          &nbsp;\r\n          <button nz-button nzType=\"text\" style=\"color: var(--theme-text-color)\" (click)=\"visibleMenuDrawer = true\">\r\n            <nz-icon nzType=\"menu\" nzTheme=\"outline\" />\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"header-logo\" [style.width]=\"!isCollapsed ? siderWidthStorage : '100px'\">\r\n        <div nz-flex nzJustify=\"center\" nzGap=\"small\">\r\n          <img\r\n            *ngIf=\"logoUrl$ | async as url\"\r\n            [src]=\"url\"\r\n            height=\"40px\"\r\n            style=\"padding: 4px;\"\r\n            hideIfError\r\n          />\r\n          @if (SYSTEM_NAME) {\r\n            <h2 style=\"color: whitesmoke; margin-bottom: 0\">{{ SYSTEM_NAME }}</h2>\r\n          } @else {\r\n            -- o0o --\r\n          }\r\n        </div>\r\n      </div>\r\n      @if (!HEADER_MENU_IN_USE) {\r\n        <box [width]=\"8\"></box>\r\n        <app-breadcrumb [@fadeInOut] nz-col nzFlex=\"auto\" class=\"breadcrumb-header\"></app-breadcrumb>\r\n      }\r\n      <div *ngIf=\"HEADER_MENU_IN_USE\" nz-col nzFlex=\"auto\" class=\"header-menu\">\r\n        <div style=\"overflow: auto\">\r\n          <nz-segmented\r\n            [nzOptions]=\"lstHeaderMenuDisplay\"\r\n            [(ngModel)]=\"selectedHeaderMenuDisplay\"\r\n            (nzValueChange)=\"handleValueChangeHeaderMenu($event)\"\r\n          ></nz-segmented>\r\n        </div>\r\n      </div>\r\n      <div #divuser>\r\n        <layout-user></layout-user>\r\n      </div>\r\n    </div>\r\n  </nz-header>\r\n  <nz-layout class=\"body-layout\">\r\n    <nz-sider\r\n      class=\"menu-sidebar\"\r\n      nzCollapsible\r\n      [nzWidth]=\"siderWidth\"\r\n      [nzCollapsedWidth]=\"0\"\r\n      [(nzCollapsed)]=\"isCollapsed\"\r\n      [nzTrigger]=\"null\"\r\n      [nzTheme]=\"'dark'\"\r\n    >\r\n      <div class=\"menu-wapper\">\r\n        @if (MENU_TYPE == 1) {\r\n          <div class=\"nz-tree-wapper\">\r\n            <nz-tree\r\n              [nzData]=\"nodes\"\r\n              [nzSearchValue]=\"searchValue\"\r\n              [nzShowLine]=\"true\"\r\n              [nzSelectedKeys]=\"selectedKeys\"\r\n              [nzExpandedKeys]=\"expandedKeys\"\r\n              (nzClick)=\"nzEvent($event)\"\r\n            ></nz-tree>\r\n          </div>\r\n        } @else {\r\n          <div class=\"nz-tree-wapper\">\r\n            <ul nz-menu nzTheme=\"light\" nzMode=\"inline\" [nzInlineCollapsed]=\"isCollapsed\">\r\n              @for (menuLv1 of lstMenu; track menuLv1.App_Menu_Id) {\r\n                @if (menuLv1.SubMenu) {\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) {\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) {\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) {\r\n                                    <ul\r\n                                      nz-submenu\r\n                                      [nzOpen]=\"menuLv4.Open\"\r\n                                      [nzTitle]=\"menuLv4.Name\"\r\n                                      [nzIcon]=\"menuLv4.Icon\"\r\n                                    >\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                                      <a\r\n                                        [routerLink]=\"menuLv4.Url\"\r\n                                        [innerHTML]=\"menuLv4.Name | highlight: searchValue\"\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                                <a [routerLink]=\"menuLv3.Url\" [innerHTML]=\"menuLv3.Name | highlight: searchValue\"></a>\r\n                              </li>\r\n                            }\r\n                          }\r\n                        </ul>\r\n                      } @else {\r\n                        <li nz-menu-item nzMatchRouter>\r\n                          <a [routerLink]=\"menuLv2.Url\" [innerHTML]=\"menuLv2.Name | highlight: searchValue\"></a>\r\n                        </li>\r\n                      }\r\n                    }\r\n                  </ul>\r\n                } @else {\r\n                  <li nz-menu-item nzMatchRouter>\r\n                    <a [routerLink]=\"menuLv1.Url\" [innerHTML]=\"menuLv1.Name | highlight: searchValue\"></a>\r\n                  </li>\r\n                }\r\n              }\r\n            </ul>\r\n          </div>\r\n        }\r\n\r\n        <nz-input-group [nzSuffix]=\"suffixTemplate\">\r\n          <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\r\n        </nz-input-group>\r\n        <ng-template #suffixTemplate>\r\n          <span class=\"suffix-wrap\">\r\n            <icon-delete\r\n              class=\"suffix-icon delete\"\r\n              [class.show]=\"searchValue\"\r\n              [size]=\"14\"\r\n              (click)=\"searchValue = ''\"\r\n            ></icon-delete>\r\n\r\n            <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\r\n          </span>\r\n        </ng-template>\r\n      </div>\r\n      <div class=\"sider-footer\" style=\"height: var(--app-footer-height)\">\r\n        <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 0.8em; color: lightgray\">\r\n          {{ SYSTEM_SUB_NAME_LEFT || \"-- o0o --\" }}\r\n\r\n          <span style=\"float: right\" (click)=\"triggerCollapse()\">\r\n            <nz-icon class=\"trigger\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" />\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </nz-sider>\r\n    <nz-layout class=\"main-layout\">\r\n      <nz-content class=\"content\">\r\n        <div class=\"inner-content\">\r\n          @if (HEADER_MENU_IN_USE) {\r\n            <app-breadcrumb [@fadeInOut] nz-col nzFlex=\"auto\"></app-breadcrumb>\r\n            <box [height]=\"8\"></box>\r\n          }\r\n          <router-outlet></router-outlet>\r\n        </div>\r\n        <div nz-row class=\"sider-footer\" style=\"height: var(--app-footer-height)\">\r\n          <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 0.8em; color: lightgray\">\r\n            {{ SYSTEM_SUB_NAME_RIGHT || \"-- o0o --\" }}\r\n          </div>\r\n        </div>\r\n        <!-- <nz-back-top [nzTarget]=\"'.content'\" [nzVisibilityHeight]=\"500\"></nz-back-top> -->\r\n      </nz-content>\r\n    </nz-layout>\r\n  </nz-layout>\r\n</nz-layout>\r\n\r\n<nz-drawer\r\n  [nzWrapClassName]=\"'same-theme-color menu-drawer'\"\r\n  [nzWidth]=\"350\"\r\n  [nzClosable]=\"false\"\r\n  [(nzVisible)]=\"visibleMenuDrawer\"\r\n  [nzMaskClosable]=\"true\"\r\n  nzPlacement=\"left\"\r\n  nzTitle=\"\"\r\n  (nzOnClose)=\"visibleMenuDrawer = false\"\r\n>\r\n  <ng-container *nzDrawerContent>\r\n    <div class=\"menu-wapper\">\r\n      @if (MENU_TYPE == 1) {\r\n        <div class=\"nz-tree-wapper in-drawer\">\r\n          <nz-tree\r\n            [nzData]=\"nodes\"\r\n            [nzSearchValue]=\"searchValue\"\r\n            [nzShowLine]=\"true\"\r\n            [nzSelectedKeys]=\"selectedKeys\"\r\n            [nzExpandedKeys]=\"expandedKeys\"\r\n            (nzClick)=\"nzEvent($event)\"\r\n          ></nz-tree>\r\n        </div>\r\n      } @else {\r\n        <div class=\"nz-tree-wapper in-drawer\">\r\n          <ul nz-menu nzTheme=\"light\" nzMode=\"inline\">\r\n            @for (menuLv1 of lstMenu; track menuLv1.App_Menu_Id) {\r\n              @if (menuLv1.SubMenu) {\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) {\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) {\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) {\r\n                                  <ul\r\n                                    nz-submenu\r\n                                    [nzOpen]=\"menuLv4.Open\"\r\n                                    [nzTitle]=\"menuLv4.Name\"\r\n                                    [nzIcon]=\"menuLv4.Icon\"\r\n                                  >\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                                    <a\r\n                                      [routerLink]=\"menuLv4.Url\"\r\n                                      [innerHTML]=\"menuLv4.Name | highlight: searchValue\"\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                              <a [routerLink]=\"menuLv3.Url\" [innerHTML]=\"menuLv3.Name | highlight: searchValue\"></a>\r\n                            </li>\r\n                          }\r\n                        }\r\n                      </ul>\r\n                    } @else {\r\n                      <li nz-menu-item nzMatchRouter>\r\n                        <a [routerLink]=\"menuLv2.Url\" [innerHTML]=\"menuLv2.Name | highlight: searchValue\"></a>\r\n                      </li>\r\n                    }\r\n                  }\r\n                </ul>\r\n              } @else {\r\n                <li nz-menu-item nzMatchRouter>\r\n                  <a [routerLink]=\"menuLv1.Url\" [innerHTML]=\"menuLv1.Name | highlight: searchValue\"></a>\r\n                </li>\r\n              }\r\n            }\r\n          </ul>\r\n        </div>\r\n      }\r\n\r\n      <nz-input-group [nzSuffix]=\"suffixTemplate\" [nzAddOnAfter]=\"afterTemplate\">\r\n        <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\r\n      </nz-input-group>\r\n      <ng-template #suffixTemplate>\r\n        <span class=\"suffix-wrap\">\r\n          <icon-delete\r\n            class=\"suffix-icon delete\"\r\n            [class.show]=\"searchValue\"\r\n            [size]=\"14\"\r\n            (click)=\"searchValue = ''\"\r\n          ></icon-delete>\r\n\r\n          <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\r\n        </span>\r\n      </ng-template>\r\n      <ng-template #afterTemplate>\r\n        <button nz-button (click)=\"triggerCollapse(); this.visibleMenuDrawer = false\">\r\n          <nz-icon *ngIf=\"isCollapsed\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" />\r\n        </button>\r\n      </ng-template>\r\n    </div>\r\n  </ng-container>\r\n</nz-drawer>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body,app-root{height:100%;margin:0}.app-layout{display:flex;flex-direction:column;height:100vh}.app-header{position:fixed;top:0;left:0;width:100%;height:var(--app-header-height);background:var(--theme-color);color:var(--theme-text-color);box-shadow:0 1px 4px #00152914;z-index:1000;display:flex;align-items:center;padding:0}.header-content{width:100%}.header-logo{height:var(--app-header-height);text-align:center;color:var(--theme-text-color);transition:width .3s}.body-layout{display:flex;flex:1;margin-top:var(--app-header-height);height:calc(100vh - var(--app-header-height));overflow:hidden}.menu-sidebar{width:256px;background:#f0f2f5;overflow-y:auto;min-height:calc(100vh - var(--app-header-height))}.menu-wapper{min-height:calc(100% - var(--app-footer-height))}.main-layout{display:flex;flex-direction:column;flex:1;overflow:hidden}.content{flex:1;background:#f1f2f5;overflow-x:hidden;overflow-y:auto;height:100%}.inner-content{background:#f1f2f5;min-height:calc(100% - var(--app-footer-height));padding:8px}.content-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:center}.sider-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:right}.trigger{margin-right:8px}.menu-sidebar .ant-menu-inline .ant-menu-item{margin-top:0;margin-bottom:0}::ng-deep .menu-wapper .anticon-file{display:none}:host ::ng-deep .ant-back-top{right:30px;bottom:40px}::ng-deep .same-theme-color .ant-drawer-content{background:var(--theme-menu-color)}.nz-tree-wapper{height:calc(100vh - var(--app-header-height) - var(--app-footer-height) - 32px);overflow-y:auto}.nz-tree-wapper.in-drawer{height:calc(100vh - 32px);overflow-y:auto}::ng-deep .menu-drawer .ant-drawer-body{padding:0}::ng-deep .breadcrumb-header .ant-breadcrumb-link{color:var(--theme-text-color);cursor:pointer}::ng-deep .breadcrumb-header .ant-breadcrumb-separator{color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item:not(.ant-segmented-item-selected){color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item{border-left:1px solid}::ng-deep .header-menu .ant-segmented-item:last-child{border-right:1px solid}.suffix-wrap{position:relative;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}.suffix-icon{position:absolute;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .18s cubic-bezier(.4,0,.2,1);transform:scale(.6) translate(4px)}.suffix-icon.show{opacity:1;pointer-events:auto;transform:scale(1) translate(0)}.search{color:#00000073}.delete{color:#bfbfbf}.delete.show{animation:popIn .18s ease}@keyframes popIn{0%{transform:scale(.5)}70%{transform:scale(1.15)}to{transform:scale(1)}}\n"] }]
         }], propDecorators: { divuser: [{
                 type: ViewChild,
                 args: ['divuser']
@@ -7794,6 +8849,9 @@ class LoginComponent extends BaseComponent {
                     this.loginForm.get('orgid')?.setValidators([Validators.required]);
                     this.getLstOrg();
                     this.loginForm.controls['orgid']?.valueChanges.subscribe((x) => localStorage.setItem('ORG_ID_SELECTED_BEFOR', x));
+                    this.loginForm.controls['username']?.valueChanges
+                        .pipe(debounceTime(200), distinctUntilChanged$1())
+                        .subscribe((x) => this.getLstOrg());
                 }
                 else {
                     this.loginForm.get('orgid')?.clearValidators();
@@ -7833,8 +8891,8 @@ class LoginComponent extends BaseComponent {
         this.translate.use(lang ? 'vn' : 'en');
     }
     onFocusOrg() {
-        console.log(this.loginForm.value.username);
-        this.getLstOrg();
+        // console.log(this.loginForm.value.username);
+        // this.getLstOrg();
     }
     onImgError(e) {
         e.target.style.display = 'none';
@@ -7846,7 +8904,7 @@ class LoginComponent extends BaseComponent {
         .getFileVersion('LOGIN_BACKGROUND')
         .pipe(map((res) => `${AppGlobals.apiEndpoint}/api/file/image?code=LOGIN_BACKGROUND&v=${res || ''}`));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LoginComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: LoginComponent, isStandalone: true, selector: "login", usesInheritance: true, ngImport: i0, template: "<div nz-row nzJustify=\"center\" class=\"login\">\n  <div class=\"form-container\">\n    <form nz-flex nzVertical=\"true\" nz-form [formGroup]=\"loginForm\" class=\"login-form\" (ngSubmit)=\"dologin()\">\n      <div>\n        <div style=\"text-align: center\">\n          <img *ngIf=\"logoUrl$ | async as url\" width=\"150px\" [src]=\"url\" hideIfError />\n        </div>\n        <div class=\"form-field\" style=\"text-align: center; margin-bottom: 20px\">\n          <h3 style=\"font-weight: bold; font-size: 20px\">{{ SYSTEM_NAME_LOGIN }}</h3>\n        </div>\n      </div>\n\n      <div nz-row [nzJustify]=\"'center'\">\n        <div nz-col nzSm=\"24\" nzMd=\"16\">\n          <div nz-flex nzVertical=\"true\">\n            @if (isOneUserMultiOrgs) {\n              <nz-form-item>\n                <nz-form-control nzErrorTip=\"{{ 'REQUIRED' | translate }}\">\n                  <nz-input-group nzPrefixIcon=\"cluster\" nzHasFeedback=\"false\">\n                    <nz-select\n                      nzShowSearch\n                      nzAllowClear\n                      [nzBorderless]=\"true\"\n                      [nzSize]=\"'small'\"\n                      nzPlaceHolder=\"{{ 'ORG' | translate }}\"\n                      formControlName=\"orgid\"\n                      class=\"no-error-border\"\n                      (nzFocus)=\"onFocusOrg()\"\n                    >\n                      @for (item of lstOrg; track $index) {\n                        <nz-option [nzLabel]=\"item.TreeNodeName!\" [nzValue]=\"item.App_Org_Id\"></nz-option>\n                      }\n                    </nz-select>\n                  </nz-input-group>\n                </nz-form-control>\n              </nz-form-item>\n            }\n\n            <nz-form-item>\n              <nz-form-control nzErrorTip=\"{{ 'REQUIRED' | translate }}\">\n                <nz-input-group nzPrefixIcon=\"user\">\n                  <input type=\"text\" nz-input formControlName=\"username\" placeholder=\"{{ 'USERNAME' | translate }}\" />\n                </nz-input-group>\n              </nz-form-control>\n            </nz-form-item>\n\n            <nz-form-item>\n              <nz-form-control nzErrorTip=\"{{ 'REQUIRED' | translate }}\">\n                <nz-input-group\n                  nzPrefixIcon=\"lock\"\n                  [nzSuffix]=\"visible ? suffixTemplateHiddenPassword : suffixTemplateShowPassword\"\n                >\n                  <input\n                    type=\"{{ passwordType }}\"\n                    nz-input\n                    formControlName=\"password\"\n                    placeholder=\"{{ 'PASSWORD' | translate }}\"\n                  />\n                </nz-input-group>\n              </nz-form-control>\n              <ng-template #suffixTemplateShowPassword>\n                <nz-icon\n                  nzType=\"eye\"\n                  nzTheme=\"outline\"\n                  nz-tooltip\n                  nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\n                  nzTooltipPlacement=\"right\"\n                  (click)=\"visible = !visible; passwordType = 'text'\"\n                />\n              </ng-template>\n              <ng-template #suffixTemplateHiddenPassword>\n                <nz-icon\n                  nzType=\"eye-invisible\"\n                  nzTheme=\"outline\"\n                  nz-tooltip\n                  nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\n                  nzTooltipPlacement=\"right\"\n                  (click)=\"visible = !visible; passwordType = 'password'\"\n                />\n              </ng-template>\n            </nz-form-item>\n\n            <div nz-flex nzVertical=\"true\" nzGap=\"4px\">\n              <button nz-button [nzType]=\"'primary'\" nzBlock [nzLoading]=\"loadingService.isLoading\">\n                {{ \"LOGIN\" | translate }}\n              </button>\n              <!-- \n              <nz-form-item nzJustify=\"end\">\n                <nz-switch formControlName=\"langSwitch\" class=\"nz-switch-both-active-color\" nzCheckedChildren=\"VN\"\n                  nzUnCheckedChildren=\"EN\" (ngModelChange)=\"changeLanguage($event)\"></nz-switch>\n              </nz-form-item> \n              -->\n            </div>\n          </div>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n\n<img *ngIf=\"bgUrl$ | async as url\" class=\"bg-image\" [src]=\"url\" hideIfError />\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.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: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "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: i6$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i6$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i6$1.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i11.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i8.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i4$1.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i10.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzSwitchModule }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i14.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i6$2.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i6$2.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus"], exportAs: ["nzSelect"] }, { kind: "directive", type: HideIfErrorDirective, selector: "img[hideIfError]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: LoginComponent, isStandalone: true, selector: "login", usesInheritance: true, ngImport: i0, template: "<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 [nzLoading]=\"loadingService.isLoading\">\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              -->\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </form>\r\n  </div>\r\n</div>\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { 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$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "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: i6$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i6$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i6$1.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i11.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i5$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: i6$3.ɵ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: i7.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: i9.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i6$2.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i6$2.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus"], exportAs: ["nzSelect"] }, { kind: "directive", type: HideIfErrorDirective, selector: "img[hideIfError]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LoginComponent, decorators: [{
             type: Component,
@@ -7864,12 +8922,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         NzFlexModule,
                         NzSelectModule,
                         HideIfErrorDirective,
-                    ], template: "<div nz-row nzJustify=\"center\" class=\"login\">\n  <div class=\"form-container\">\n    <form nz-flex nzVertical=\"true\" nz-form [formGroup]=\"loginForm\" class=\"login-form\" (ngSubmit)=\"dologin()\">\n      <div>\n        <div style=\"text-align: center\">\n          <img *ngIf=\"logoUrl$ | async as url\" width=\"150px\" [src]=\"url\" hideIfError />\n        </div>\n        <div class=\"form-field\" style=\"text-align: center; margin-bottom: 20px\">\n          <h3 style=\"font-weight: bold; font-size: 20px\">{{ SYSTEM_NAME_LOGIN }}</h3>\n        </div>\n      </div>\n\n      <div nz-row [nzJustify]=\"'center'\">\n        <div nz-col nzSm=\"24\" nzMd=\"16\">\n          <div nz-flex nzVertical=\"true\">\n            @if (isOneUserMultiOrgs) {\n              <nz-form-item>\n                <nz-form-control nzErrorTip=\"{{ 'REQUIRED' | translate }}\">\n                  <nz-input-group nzPrefixIcon=\"cluster\" nzHasFeedback=\"false\">\n                    <nz-select\n                      nzShowSearch\n                      nzAllowClear\n                      [nzBorderless]=\"true\"\n                      [nzSize]=\"'small'\"\n                      nzPlaceHolder=\"{{ 'ORG' | translate }}\"\n                      formControlName=\"orgid\"\n                      class=\"no-error-border\"\n                      (nzFocus)=\"onFocusOrg()\"\n                    >\n                      @for (item of lstOrg; track $index) {\n                        <nz-option [nzLabel]=\"item.TreeNodeName!\" [nzValue]=\"item.App_Org_Id\"></nz-option>\n                      }\n                    </nz-select>\n                  </nz-input-group>\n                </nz-form-control>\n              </nz-form-item>\n            }\n\n            <nz-form-item>\n              <nz-form-control nzErrorTip=\"{{ 'REQUIRED' | translate }}\">\n                <nz-input-group nzPrefixIcon=\"user\">\n                  <input type=\"text\" nz-input formControlName=\"username\" placeholder=\"{{ 'USERNAME' | translate }}\" />\n                </nz-input-group>\n              </nz-form-control>\n            </nz-form-item>\n\n            <nz-form-item>\n              <nz-form-control nzErrorTip=\"{{ 'REQUIRED' | translate }}\">\n                <nz-input-group\n                  nzPrefixIcon=\"lock\"\n                  [nzSuffix]=\"visible ? suffixTemplateHiddenPassword : suffixTemplateShowPassword\"\n                >\n                  <input\n                    type=\"{{ passwordType }}\"\n                    nz-input\n                    formControlName=\"password\"\n                    placeholder=\"{{ 'PASSWORD' | translate }}\"\n                  />\n                </nz-input-group>\n              </nz-form-control>\n              <ng-template #suffixTemplateShowPassword>\n                <nz-icon\n                  nzType=\"eye\"\n                  nzTheme=\"outline\"\n                  nz-tooltip\n                  nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\n                  nzTooltipPlacement=\"right\"\n                  (click)=\"visible = !visible; passwordType = 'text'\"\n                />\n              </ng-template>\n              <ng-template #suffixTemplateHiddenPassword>\n                <nz-icon\n                  nzType=\"eye-invisible\"\n                  nzTheme=\"outline\"\n                  nz-tooltip\n                  nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\n                  nzTooltipPlacement=\"right\"\n                  (click)=\"visible = !visible; passwordType = 'password'\"\n                />\n              </ng-template>\n            </nz-form-item>\n\n            <div nz-flex nzVertical=\"true\" nzGap=\"4px\">\n              <button nz-button [nzType]=\"'primary'\" nzBlock [nzLoading]=\"loadingService.isLoading\">\n                {{ \"LOGIN\" | translate }}\n              </button>\n              <!-- \n              <nz-form-item nzJustify=\"end\">\n                <nz-switch formControlName=\"langSwitch\" class=\"nz-switch-both-active-color\" nzCheckedChildren=\"VN\"\n                  nzUnCheckedChildren=\"EN\" (ngModelChange)=\"changeLanguage($event)\"></nz-switch>\n              </nz-form-item> \n              -->\n            </div>\n          </div>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n\n<img *ngIf=\"bgUrl$ | async as url\" class=\"bg-image\" [src]=\"url\" hideIfError />\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"] }]
+                    ], template: "<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 [nzLoading]=\"loadingService.isLoading\">\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              -->\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </form>\r\n  </div>\r\n</div>\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"] }]
         }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ActionRule, ActionRuleLine, AnimatedDigitComponent, AppGlobals, AppStorage, App_Org, AuthGuard, AuthService, AutoFocusDirective, BarGraphComponent, BaseComponent, BaseGuardChangeComponent, BaseOverlayComponent, Box, Breadcrumb, CheckModel, CommonService, CustomNotiComponent, CustomNotiService, DashcardComponent, DateInputParserDirective, DateTimeHelper, DicDomainPipe, DoughnutGraphComponent, DownloadHelper, ENUM_ResponseType, ExpandableSearchComponent, ExtendCheckbox, ExtendDatePicker, ExtendDateRangePicker, ExtendInput, ExtendInputNumber, ExtendPaginationComponent, ExtendSelectComponent, ExtendTableComponent, ExtendTextArea, GlobalSpinnerComponent, GridFilter, H3Icon, HTTPService, Height, HideIfErrorDirective, HighlightPipe, IconAdd, IconDelete, IconEdit, IconSave, IconSearch, IconView, LayoutComponent, LimitWordsPipe, LineGraphComponent, LoadingService, LoginComponent, NoPermission, NotiService, NullIfEmptyDirective, NumberOnlyDirective, OrderOption, PagingData, PagingModel, PdfViewerComponent, ReadMoreProComponent, RouteMonitorService, SessionManagerService, TableHeader, ThemeService, TokenStorage, TranslateKey, URLs$4 as URLs, UnsavedChangesGuard, UpperCaseFirsLetterEachWordDirective, UppercaseDirective, UppercaseFirstLetterDirective, VscService, WF_TemplateActionRef, WF_TransitionRule, WF_TransitionRuleLine, Width, Workflow, WorkflowAction, WorkflowActionEditorOption, WorkflowActionRef, WorkflowEditorComponent, WorkflowEditorOption, WorkflowStage, WorkflowStageEditorOption, XLSXHelper, authInterceptor };
+export { ABAC_RULES_TOKEN, ActionRule, ActionRuleLine, AnimatedDigitComponent, AppGlobals, AppStorage, App_Org, AuthGuard, AuthService, AutoFocusDirective, BarGraphComponent, BaseComponent, BaseGuardChangeComponent, BaseOverlayComponent, Box, Breadcrumb, CanActionPipe, CheckModel, CommonService, CustomNotiComponent, CustomNotiService, DashcardComponent, DateInputParserDirective, DateTimeHelper, DicDomainPipe, DoughnutGraphComponent, DownloadHelper, ENUM_ResponseType, ExpandableSearchComponent, ExtendCheckbox, ExtendDatePicker, ExtendDateRangePicker, ExtendInput, ExtendInputNumber, ExtendPaginationComponent, ExtendSelectComponent, ExtendTableComponent, ExtendTextArea, GlobalSpinnerComponent, GridFilter, H3Icon, HTTPService, HasPermissionDirective, HasPermissionPipe, Height, HideIfErrorDirective, HighlightPipe, IconAdd, IconDelete, IconEdit, IconSave, IconSearch, IconView, LayoutComponent, LimitWordsPipe, LineGraphComponent, LoadingService, LoginComponent, NoPermission, NotiService, NullIfEmptyDirective, NumberOnlyDirective, OrderOption, PagingData, PagingModel, PdfViewerComponent, PermissionComponent, ReadMoreProComponent, RouteMonitorService, SessionManagerService, TableHeader, ThemeService, TokenStorage, TranslateKey, URLs$7 as URLs, UnsavedChangesGuard, UpperCaseFirsLetterEachWordDirective, UppercaseDirective, UppercaseFirstLetterDirective, VscService, WF_TemplateActionRef, WF_TransitionRule, WF_TransitionRuleLine, Width, Workflow, WorkflowAction, WorkflowActionEditorOption, WorkflowActionRef, WorkflowEditorComponent, WorkflowEditorOption, WorkflowStage, WorkflowStageEditorOption, XLSXHelper, authInterceptor };
 //# sourceMappingURL=brggroup-share-lib.mjs.map