@brggroup/share-lib 0.1.64 → 0.1.65

package/fesm2022/brggroup-share-lib.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { inject, Injectable, InjectionToken, NgZone, DestroyRef, Component, HostListener, ViewContainerRef, EventEmitter, Input, Output, ViewChild, Directive, Optional, Self, HostBinding, Pipe, ChangeDetectorRef, forwardRef, ChangeDetectionStrategy } from '@angular/core';
 import * as i1$4 from '@angular/router';
-import { Router, ActivatedRoute, NavigationEnd, RouterModule, RouterLink, RouterOutlet } from '@angular/router';
+import { Router, ActivatedRoute, NavigationEnd, RouterModule, RouterOutlet, RouterLink } from '@angular/router';
 import * as i1$8 from '@angular/common/http';
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import * as i3 from '@ngx-translate/core';
@@ -15,7 +15,7 @@ import { switchMap, distinctUntilChanged, filter as filter$1, takeUntil } from '
 import * as i2 from '@angular/forms';
 import { FormGroup, FormsModule, ReactiveFormsModule, Validators, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1$1 from '@angular/common';
-import { Location, CommonModule, NgTemplateOutlet, DecimalPipe } from '@angular/common';
+import { Location, CommonModule, NgTemplateOutlet, DecimalPipe, DatePipe } from '@angular/common';
 import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import * as i5 from 'ng-zorro-antd/form';
@@ -435,7 +435,7 @@ class NotiService {
     }
     handleError(err) {
         if (err?.status == 0) {
-            this.notification.error(this.translate.instant('NO_CONNECT_TO_SERVER'), '', { duration: 20 * 1000 });
+            this.notification.error(this.translate.instant('NO_CONNECT_TO_SERVER'), '', { duration: 15 * 1000 });
             return;
         }
         let _data = null;
@@ -630,7 +630,7 @@ class TokenStorage {
     }
 }
 
-const URLs$d = {
+const URLs$e = {
     login: '/api/Auth/Login',
     register: '/api/Auth/Register',
     pingAuth: '/api/Auth/PingAuth',
@@ -699,7 +699,7 @@ class AuthService extends HTTPService {
         }
     }
     async sendSignIn(body) {
-        return firstValueFrom(this.httpClient.post(AppGlobals.apiEndpoint + URLs$d.login, body, {
+        return firstValueFrom(this.httpClient.post(AppGlobals.apiEndpoint + URLs$e.login, body, {
             headers: new HttpHeaders().set('Content-Type', 'application/json').set('No-Loading-Mark', '1'),
         }));
     }
@@ -719,7 +719,7 @@ class AuthService extends HTTPService {
     ---------------------------------------- */
     async pingAuth() {
         try {
-            const res = await this.get(AppGlobals.apiEndpoint + URLs$d.pingAuth, true);
+            const res = await this.get(AppGlobals.apiEndpoint + URLs$e.pingAuth, true);
             return res?.IsSuccess;
         }
         catch {
@@ -751,10 +751,10 @@ class AuthService extends HTTPService {
         PASSWORD
     ---------------------------------------- */
     changePassword(data) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$d.changePassword, data);
+        return this.postData(AppGlobals.apiEndpoint + URLs$e.changePassword, data);
     }
     setPass(data) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$d.setPass, data);
+        return this.postData(AppGlobals.apiEndpoint + URLs$e.setPass, data);
     }
     /* ----------------------------------------
         REGISTER
@@ -775,7 +775,7 @@ class AuthService extends HTTPService {
         }
     }
     async sendSignUp(d) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$d.register, d);
+        return this.postData(AppGlobals.apiEndpoint + URLs$e.register, d);
     }
     /* ----------------------------------------
         CHANGE ORG
@@ -797,7 +797,7 @@ class AuthService extends HTTPService {
     }
     async sendChangeOrg(App_Org_Id) {
         let params = new HttpParams().append('App_Org_Id', App_Org_Id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$d.changeOrgLogin, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$e.changeOrgLogin, params);
     }
     static pingInterVal;
     startPingAuth(intervalTime) {
@@ -1421,6 +1421,11 @@ class BaseComponent {
     goto(url, isNewTab = false) {
         if (!url)
             return;
+        let hasHash = false;
+        if (url.startsWith('/#')) {
+            hasHash = true;
+            url = url.replace('/#', '');
+        }
         if (url.startsWith('/')) {
             let currentRoute = this.router.routerState.root.snapshot;
             let currentProjectId = null;
@@ -1470,6 +1475,9 @@ class BaseComponent {
             if (url === '')
                 url = '/';
         }
+        if (hasHash) {
+            url = '/#' + url;
+        }
         console.log('goto: ', url, isNewTab);
         if (isNewTab) {
             window.open(url, '_blank');
@@ -1841,11 +1849,11 @@ class ExtendInput {
         }
     }
     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", showClear: "showClear", disabled: "disabled", readOnly: "readOnly", required: "required", noBottom: "noBottom", selectModeType: "selectModeType", autocomplete: "autocomplete", autofocus: "autofocus", inputWidth: "inputWidth", inputHeight: "inputHeight", borderBottomOnly: "borderBottomOnly", displayInline: "displayInline", size: "size", 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]=\"showClear ? 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      <nz-input-group [nzSize]=\"size\" [nzSuffix]=\"showClear ? clearIcon : undefined\">\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      </nz-input-group>\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)=\"_onclickClearIcon()\"\r\n    style=\"cursor: pointer; font-size: 13px\"\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:var(--darkgray, #565656);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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i2$1.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i5$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i5$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i5$1.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
+    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", showClear: "showClear", disabled: "disabled", readOnly: "readOnly", required: "required", noBottom: "noBottom", selectModeType: "selectModeType", autocomplete: "autocomplete", autofocus: "autofocus", inputWidth: "inputWidth", inputHeight: "inputHeight", borderBottomOnly: "borderBottomOnly", displayInline: "displayInline", size: "size", 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]=\"showClear ? 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      <nz-input-group [nzSize]=\"size\" [nzSuffix]=\"showClear ? clearIcon : undefined\">\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      </nz-input-group>\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)=\"_onclickClearIcon()\"\r\n    style=\"cursor: pointer; font-size: 13px\"\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.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:2;height:auto;line-height:normal;padding:0 4px}::ng-deep .extend-input-wrapper.floating-label nz-form-item nz-form-label label{font-size:12px;color:var(--darkgray, #565656);font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .extend-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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i2$1.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i5$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i5$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i5$1.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
 }
 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\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]=\"showClear ? 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      <nz-input-group [nzSize]=\"size\" [nzSuffix]=\"showClear ? clearIcon : undefined\">\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      </nz-input-group>\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)=\"_onclickClearIcon()\"\r\n    style=\"cursor: pointer; font-size: 13px\"\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:var(--darkgray, #565656);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]=\"showClear ? 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      <nz-input-group [nzSize]=\"size\" [nzSuffix]=\"showClear ? clearIcon : undefined\">\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      </nz-input-group>\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)=\"_onclickClearIcon()\"\r\n    style=\"cursor: pointer; font-size: 13px\"\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.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:2;height:auto;line-height:normal;padding:0 4px}::ng-deep .extend-input-wrapper.floating-label nz-form-item nz-form-label label{font-size:12px;color:var(--darkgray, #565656);font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .extend-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: [{
@@ -2038,6 +2046,126 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 type: Output
             }] } });
 
+class ExtendCheckbox3Value {
+    label = '';
+    labelSpan = 8;
+    labelFlex = null;
+    paddingTop = '0px';
+    disabled = false;
+    formData;
+    controlName;
+    /**
+     * default: boolean
+     */
+    valueType = 'boolean';
+    get _ngModel() {
+        if (this.checked === null)
+            return null;
+        if (this.valueType === 'boolean')
+            return this.checked;
+        if (this.valueType === 'number')
+            return this.checked ? 1 : 0;
+        if (this.valueType === 'string')
+            return this.checked ? 'Y' : 'N';
+        return null;
+    }
+    set _ngModel(val) {
+        if (!this.controlName) {
+            this.parseValueToChecked(val);
+        }
+    }
+    _ngModelChange = new EventEmitter();
+    checked = null; // Khởi tạo với null
+    ngOnInit() {
+        if (this.controlName && this.formData?.controls[this.controlName]) {
+            const rawVal = this.formData.controls[this.controlName].getRawValue();
+            this.parseValueToChecked(rawVal);
+            this.formData.controls[this.controlName].valueChanges.subscribe((x) => {
+                this.parseValueToChecked(x);
+            });
+        }
+    }
+    // Hàm mapping giá trị từ form sang trạng thái checked
+    parseValueToChecked(val) {
+        if (val === null || val === undefined || val === '') {
+            this.checked = null;
+            return;
+        }
+        if (this.valueType === 'boolean') {
+            this.checked = val === true ? true : val === false ? false : null;
+        }
+        else if (this.valueType === 'number') {
+            this.checked = val === 1 ? true : val === 0 ? false : null;
+        }
+        else {
+            this.checked = val === 'Y' ? true : val === 'N' ? false : null;
+        }
+    }
+    // Hàm xử lý xoay vòng 3 trạng thái khi click
+    cycleState() {
+        if (this.disabled)
+            return;
+        // Vòng lặp: null -> true -> false -> null
+        if (this.checked === null) {
+            this.checked = true;
+        }
+        else if (this.checked === true) {
+            this.checked = false;
+        }
+        else {
+            this.checked = null;
+        }
+        this.emitValue();
+    }
+    emitValue() {
+        let emitVal = null;
+        if (this.checked !== null) {
+            if (this.valueType === 'boolean') {
+                emitVal = this.checked;
+            }
+            else if (this.valueType === 'number') {
+                emitVal = this.checked ? 1 : 0;
+            }
+            else if (this.valueType === 'string') {
+                emitVal = this.checked ? 'Y' : 'N';
+            }
+        }
+        // Cập nhật giá trị ra form hoặc ngModel
+        if (this.controlName && this.formData?.controls[this.controlName]) {
+            this.formData.controls[this.controlName].setValue(emitVal);
+        }
+        else {
+            this._ngModelChange.emit(emitVal);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendCheckbox3Value, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendCheckbox3Value, isStandalone: true, selector: "extend-checkbox-3-value", inputs: { label: "label", labelSpan: "labelSpan", labelFlex: "labelFlex", paddingTop: "paddingTop", 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\" [ngStyle]=\"{ 'padding-top': paddingTop }\">\r\n      <span\r\n        (click)=\"cycleState()\"\r\n        [style.cursor]=\"disabled ? 'not-allowed' : 'pointer'\"\r\n        [style.opacity]=\"disabled ? '0.5' : '1'\"\r\n        style=\"display: inline-flex; align-items: center; gap: 8px; position: relative; top: 5px; user-select: none\"\r\n      >\r\n        <!-- Tr\u1EA1ng th\u00E1i 1: Ch\u01B0a t\u00EDch (null) -->\r\n        @if (checked === null) {\r\n          <div\r\n            style=\"\r\n              width: 16px;\r\n              height: 16px;\r\n              border: 1px solid #d9d9d9;\r\n              border-radius: 4px;\r\n              background-color: #fff;\r\n              box-sizing: border-box;\r\n            \"\r\n          ></div>\r\n        }\r\n        <!-- Tr\u1EA1ng th\u00E1i 2: T\u00EDch l\u1EA7n 1 (true) -->\r\n        @else if (checked === true) {\r\n          <span\r\n            nz-icon\r\n            nzType=\"check-square\"\r\n            nzTheme=\"fill\"\r\n            style=\"color: #52c41a; font-size: 16px; display: inline-flex\"\r\n          ></span>\r\n        }\r\n        <!-- Tr\u1EA1ng th\u00E1i 3: T\u00EDch l\u1EA7n 2 (false) -->\r\n        @else {\r\n          <span\r\n            nz-icon\r\n            nzType=\"close-square\"\r\n            nzTheme=\"fill\"\r\n            style=\"color: #ff4d4f; font-size: 16px; display: inline-flex\"\r\n          ></span>\r\n        }\r\n\r\n        <span>{{ label }}</span>\r\n      </span>\r\n    </div>\r\n  </div>\r\n} @else {\r\n  <span\r\n    (click)=\"cycleState()\"\r\n    [style.cursor]=\"disabled ? 'not-allowed' : 'pointer'\"\r\n    [style.opacity]=\"disabled ? '0.5' : '1'\"\r\n    style=\"display: inline-flex; align-items: center; user-select: none; width: 16px; height: 16px\"\r\n  >\r\n    @if (checked === null) {\r\n      <div\r\n        style=\"\r\n          width: 16px;\r\n          height: 16px;\r\n          border: 1px solid #d9d9d9;\r\n          border-radius: 4px;\r\n          background-color: #fff;\r\n          box-sizing: border-box;\r\n        \"\r\n      ></div>\r\n    } @else if (checked === true) {\r\n      <span\r\n        nz-icon\r\n        nzType=\"check-square\"\r\n        nzTheme=\"fill\"\r\n        style=\"color: #52c41a; font-size: 16px; display: inline-flex\"\r\n      ></span>\r\n    } @else {\r\n      <span\r\n        nz-icon\r\n        nzType=\"close-square\"\r\n        nzTheme=\"fill\"\r\n        style=\"color: #ff4d4f; font-size: 16px; display: inline-flex\"\r\n      ></span>\r\n    }\r\n  </span>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i2$1.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendCheckbox3Value, decorators: [{
+            type: Component,
+            args: [{ selector: 'extend-checkbox-3-value', imports: [CommonModule, FormsModule, ReactiveFormsModule, NzFormModule, NzIconModule], 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\" [ngStyle]=\"{ 'padding-top': paddingTop }\">\r\n      <span\r\n        (click)=\"cycleState()\"\r\n        [style.cursor]=\"disabled ? 'not-allowed' : 'pointer'\"\r\n        [style.opacity]=\"disabled ? '0.5' : '1'\"\r\n        style=\"display: inline-flex; align-items: center; gap: 8px; position: relative; top: 5px; user-select: none\"\r\n      >\r\n        <!-- Tr\u1EA1ng th\u00E1i 1: Ch\u01B0a t\u00EDch (null) -->\r\n        @if (checked === null) {\r\n          <div\r\n            style=\"\r\n              width: 16px;\r\n              height: 16px;\r\n              border: 1px solid #d9d9d9;\r\n              border-radius: 4px;\r\n              background-color: #fff;\r\n              box-sizing: border-box;\r\n            \"\r\n          ></div>\r\n        }\r\n        <!-- Tr\u1EA1ng th\u00E1i 2: T\u00EDch l\u1EA7n 1 (true) -->\r\n        @else if (checked === true) {\r\n          <span\r\n            nz-icon\r\n            nzType=\"check-square\"\r\n            nzTheme=\"fill\"\r\n            style=\"color: #52c41a; font-size: 16px; display: inline-flex\"\r\n          ></span>\r\n        }\r\n        <!-- Tr\u1EA1ng th\u00E1i 3: T\u00EDch l\u1EA7n 2 (false) -->\r\n        @else {\r\n          <span\r\n            nz-icon\r\n            nzType=\"close-square\"\r\n            nzTheme=\"fill\"\r\n            style=\"color: #ff4d4f; font-size: 16px; display: inline-flex\"\r\n          ></span>\r\n        }\r\n\r\n        <span>{{ label }}</span>\r\n      </span>\r\n    </div>\r\n  </div>\r\n} @else {\r\n  <span\r\n    (click)=\"cycleState()\"\r\n    [style.cursor]=\"disabled ? 'not-allowed' : 'pointer'\"\r\n    [style.opacity]=\"disabled ? '0.5' : '1'\"\r\n    style=\"display: inline-flex; align-items: center; user-select: none; width: 16px; height: 16px\"\r\n  >\r\n    @if (checked === null) {\r\n      <div\r\n        style=\"\r\n          width: 16px;\r\n          height: 16px;\r\n          border: 1px solid #d9d9d9;\r\n          border-radius: 4px;\r\n          background-color: #fff;\r\n          box-sizing: border-box;\r\n        \"\r\n      ></div>\r\n    } @else if (checked === true) {\r\n      <span\r\n        nz-icon\r\n        nzType=\"check-square\"\r\n        nzTheme=\"fill\"\r\n        style=\"color: #52c41a; font-size: 16px; display: inline-flex\"\r\n      ></span>\r\n    } @else {\r\n      <span\r\n        nz-icon\r\n        nzType=\"close-square\"\r\n        nzTheme=\"fill\"\r\n        style=\"color: #ff4d4f; font-size: 16px; display: inline-flex\"\r\n      ></span>\r\n    }\r\n  </span>\r\n}\r\n" }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], labelSpan: [{
+                type: Input
+            }], labelFlex: [{
+                type: Input
+            }], paddingTop: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], formData: [{
+                type: Input
+            }], controlName: [{
+                type: Input
+            }], valueType: [{
+                type: Input
+            }], _ngModel: [{
+                type: Input
+            }], _ngModelChange: [{
+                type: Output
+            }] } });
+
 class DateTimeHelper {
     static lstDay = Array.from({ length: 31 }, (_, i) => i + 1);
     static lstMonth = Array.from({ length: 12 }, (_, i) => i + 1);
@@ -3186,7 +3314,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 }]
         }] });
 
-const URLs$c = {
+const URLs$d = {
     getById: '/api/App_Dic_Domain/GetById',
     getAll: '/api/App_Dic_Domain/GetAll',
     getList: '/api/App_Dic_Domain/GetList',
@@ -3198,21 +3326,21 @@ const URLs$c = {
 class DicDomainService extends HTTPService {
     getById(id) {
         let pr = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$c.getById, pr);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$d.getById, pr);
     }
     getPaging(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$c.getPaging, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$d.getPaging, filter);
     }
     addOrEdit(obj) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$c.addOrEdit, obj);
+        return this.postData(AppGlobals.apiEndpoint + URLs$d.addOrEdit, obj);
     }
     delete(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$c.delete, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$d.delete, params);
     }
     async getByDomain(DomainCode) {
         var pr = new HttpParams().append('DomainCode', DomainCode);
-        const ret = await this.postParams(AppGlobals.apiEndpoint + URLs$c.getByDomain, pr);
+        const ret = await this.postParams(AppGlobals.apiEndpoint + URLs$d.getByDomain, pr);
         return ret.Data;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DicDomainService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
@@ -3254,6 +3382,9 @@ class GridFilter extends PagingModel {
 }
 class OrderOption {
     FieldName = null;
+    /**
+     * 'ascend' | 'descend'
+     */
     Direction = null;
 }
 class PagingData {
@@ -4517,7 +4648,7 @@ class DicDomainListComponent extends BaseComponent {
         this.getData();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DicDomainListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: DicDomainListComponent, isStandalone: true, selector: "app-dic-domain-list", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table [nzData]=\"data?.LstItem || []\" [nzBordered]=\"true\" [nzSize]=\"'small'\" [nzFrontPagination]=\"false\">\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th>Domain Code</th>\r\n          <th>Item Code</th>\r\n          <th>Item Value</th>\r\n          <th nzWidth=\"100px\">Order Value</th>\r\n          <th nzWidth=\"150px\">Child Domain Code</th>\r\n          <th nzWidth=\"150px\">Parent Item Code</th>\r\n          <th nzWidth=\"75px\">Active</th>\r\n          <th nzWidth=\"75px\" nzRight>Action</th>\r\n        </tr>\r\n        <tr (keyup.enter)=\"search()\" class=\"tr-search\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.DomainCode\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.ItemCode\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.ItemValue\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th class=\"center\" nzRight>\r\n            <icon-add (click)=\"add()\"></icon-add>\r\n          </th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of data?.LstItem; track $index; let i = $index) {\r\n          @if (selectedRow != row) {\r\n            <tr (click)=\"selectedRow = row\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>{{ row.DomainCode }}</td>\r\n              <td>{{ row.ItemCode }}</td>\r\n              <td>{{ row.ItemValue }}</td>\r\n              <td>{{ row.OrderValue }}</td>\r\n              <td>{{ row.ChildDomainCode }}</td>\r\n              <td>{{ row.ParentItemCode }}</td>\r\n              <td class=\"center\">\r\n                @if (row.IsActive) {\r\n                  <icon-check></icon-check>\r\n                }\r\n              </td>\r\n              <td class=\"center\" nzRight>\r\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n              </td>\r\n            </tr>\r\n          } @else {\r\n            <tr (keyup.enter)=\"save()\" class=\"selected\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.DomainCode\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.ItemCode\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-textarea\r\n                  [minRows]=\"1\"\r\n                  [formItemNoButtom]=\"true\"\r\n                  [(_ngModel)]=\"selectedRow.ItemValue\"\r\n                ></extend-textarea>\r\n              </td>\r\n              <td>\r\n                <extend-input-number [(_ngModel)]=\"selectedRow.OrderValue\"></extend-input-number>\r\n              </td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.ChildDomainCode\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.ParentItemCode\"></extend-input>\r\n              </td>\r\n              <td class=\"center\">\r\n                <extend-checkbox [(_ngModel)]=\"selectedRow.IsActive\"></extend-checkbox>\r\n              </td>\r\n              <td class=\"center\" nzRight>\r\n                <icon-save (click)=\"save()\"></icon-save>\r\n                <box [width]=\"4\"></box>\r\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n              </td>\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data?.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NzTagModule }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$2.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "directive", type: i6$2.NzCellFixedDirective, selector: "td[nzRight],th[nzRight],td[nzLeft],th[nzLeft]", inputs: ["nzRight", "nzLeft", "colspan", "colSpan"] }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i5$3.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "component", type: IconAdd, selector: "icon-add", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconCheck, selector: "icon-check", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconSave, selector: "icon-save", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "component", type: ExtendInputNumber, selector: "extend-input-number", inputs: ["label", "placeHolder", "labelAlign", "floatingLabel", "hiddenUpDown", "labelSpan", "labelFlex", "inputFlex", "disabled", "required", "noBottom", "size", "min", "max", "precision", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "isSubmited", "separatorType", "formData", "controlName", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "component", type: ExtendTextArea, selector: "extend-textarea", inputs: ["label", "placeHolder", "labelAlign", "floatingLabel", "displayInline", "formItemNoButtom", "labelSpan", "labelFlex", "inputFlex", "disabled", "required", "noBottom", "selectModeType", "inputClass", "size", "isSubmited", "minRows", "maxRows", "lstItem", "displayField", "valueField", "formData", "controlName", "_ngModel", "isTouched", "inputErrorMessage", "errorMessages"], outputs: ["_ngModelChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: DicDomainListComponent, isStandalone: true, selector: "app-dic-domain-list", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      [nzData]=\"data?.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 195px)' }\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'DomainCode' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'DomainCode'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Domain Code\r\n          </th>\r\n          <th>Item Code</th>\r\n          <th>Item Value</th>\r\n          <th nzWidth=\"100px\">Order Value</th>\r\n          <th nzWidth=\"150px\">Child Domain Code</th>\r\n          <th nzWidth=\"150px\">Parent Item Code</th>\r\n          <th nzWidth=\"75px\">Active</th>\r\n          <th nzWidth=\"75px\" nzRight>Action</th>\r\n        </tr>\r\n        <tr (keyup.enter)=\"search()\" class=\"tr-search\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.DomainCode\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.ItemCode\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.ItemValue\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th class=\"center\" nzRight>\r\n            <icon-add (click)=\"add()\"></icon-add>\r\n          </th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of data?.LstItem; track $index; let i = $index) {\r\n          @if (selectedRow != row) {\r\n            <tr (click)=\"selectedRow = row\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>{{ row.DomainCode }}</td>\r\n              <td>{{ row.ItemCode }}</td>\r\n              <td>{{ row.ItemValue }}</td>\r\n              <td>{{ row.OrderValue }}</td>\r\n              <td>{{ row.ChildDomainCode }}</td>\r\n              <td>{{ row.ParentItemCode }}</td>\r\n              <td class=\"center\">\r\n                @if (row.IsActive) {\r\n                  <icon-check></icon-check>\r\n                }\r\n              </td>\r\n              <td class=\"center\" nzRight>\r\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n              </td>\r\n            </tr>\r\n          } @else {\r\n            <tr (keyup.enter)=\"save()\" class=\"selected\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.DomainCode\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.ItemCode\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-textarea\r\n                  [minRows]=\"1\"\r\n                  [formItemNoButtom]=\"true\"\r\n                  [(_ngModel)]=\"selectedRow.ItemValue\"\r\n                ></extend-textarea>\r\n              </td>\r\n              <td>\r\n                <extend-input-number [(_ngModel)]=\"selectedRow.OrderValue\"></extend-input-number>\r\n              </td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.ChildDomainCode\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.ParentItemCode\"></extend-input>\r\n              </td>\r\n              <td class=\"center\">\r\n                <extend-checkbox [(_ngModel)]=\"selectedRow.IsActive\"></extend-checkbox>\r\n              </td>\r\n              <td class=\"center\" nzRight>\r\n                <icon-save (click)=\"save()\"></icon-save>\r\n                <box [width]=\"4\"></box>\r\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n              </td>\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data?.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NzTagModule }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$2.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "component", type: i6$2.NzThAddOnComponent, selector: "th[nzColumnKey], th[nzSortFn], th[nzSortOrder], th[nzFilters], th[nzShowSort], th[nzShowFilter], th[nzCustomFilter]", inputs: ["nzColumnKey", "nzFilterMultiple", "nzSortOrder", "nzSortPriority", "nzSortDirections", "nzFilters", "nzSortFn", "nzFilterFn", "nzShowSort", "nzShowFilter", "nzCustomFilter"], outputs: ["nzCheckedChange", "nzSortOrderChange", "nzFilterChange"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "directive", type: i6$2.NzCellFixedDirective, selector: "td[nzRight],th[nzRight],td[nzLeft],th[nzLeft]", inputs: ["nzRight", "nzLeft", "colspan", "colSpan"] }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i5$3.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "component", type: IconAdd, selector: "icon-add", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconCheck, selector: "icon-check", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconSave, selector: "icon-save", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "component", type: ExtendInputNumber, selector: "extend-input-number", inputs: ["label", "placeHolder", "labelAlign", "floatingLabel", "hiddenUpDown", "labelSpan", "labelFlex", "inputFlex", "disabled", "required", "noBottom", "size", "min", "max", "precision", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "isSubmited", "separatorType", "formData", "controlName", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "component", type: ExtendTextArea, selector: "extend-textarea", inputs: ["label", "placeHolder", "labelAlign", "floatingLabel", "displayInline", "formItemNoButtom", "labelSpan", "labelFlex", "inputFlex", "disabled", "required", "noBottom", "selectModeType", "inputClass", "size", "isSubmited", "minRows", "maxRows", "lstItem", "displayField", "valueField", "formData", "controlName", "_ngModel", "isTouched", "inputErrorMessage", "errorMessages"], outputs: ["_ngModelChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DicDomainListComponent, decorators: [{
             type: Component,
@@ -4541,7 +4672,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         NzButtonModule,
                         Box,
                         ExtendTextArea,
-                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table [nzData]=\"data?.LstItem || []\" [nzBordered]=\"true\" [nzSize]=\"'small'\" [nzFrontPagination]=\"false\">\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th>Domain Code</th>\r\n          <th>Item Code</th>\r\n          <th>Item Value</th>\r\n          <th nzWidth=\"100px\">Order Value</th>\r\n          <th nzWidth=\"150px\">Child Domain Code</th>\r\n          <th nzWidth=\"150px\">Parent Item Code</th>\r\n          <th nzWidth=\"75px\">Active</th>\r\n          <th nzWidth=\"75px\" nzRight>Action</th>\r\n        </tr>\r\n        <tr (keyup.enter)=\"search()\" class=\"tr-search\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.DomainCode\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.ItemCode\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.ItemValue\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th class=\"center\" nzRight>\r\n            <icon-add (click)=\"add()\"></icon-add>\r\n          </th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of data?.LstItem; track $index; let i = $index) {\r\n          @if (selectedRow != row) {\r\n            <tr (click)=\"selectedRow = row\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>{{ row.DomainCode }}</td>\r\n              <td>{{ row.ItemCode }}</td>\r\n              <td>{{ row.ItemValue }}</td>\r\n              <td>{{ row.OrderValue }}</td>\r\n              <td>{{ row.ChildDomainCode }}</td>\r\n              <td>{{ row.ParentItemCode }}</td>\r\n              <td class=\"center\">\r\n                @if (row.IsActive) {\r\n                  <icon-check></icon-check>\r\n                }\r\n              </td>\r\n              <td class=\"center\" nzRight>\r\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n              </td>\r\n            </tr>\r\n          } @else {\r\n            <tr (keyup.enter)=\"save()\" class=\"selected\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.DomainCode\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.ItemCode\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-textarea\r\n                  [minRows]=\"1\"\r\n                  [formItemNoButtom]=\"true\"\r\n                  [(_ngModel)]=\"selectedRow.ItemValue\"\r\n                ></extend-textarea>\r\n              </td>\r\n              <td>\r\n                <extend-input-number [(_ngModel)]=\"selectedRow.OrderValue\"></extend-input-number>\r\n              </td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.ChildDomainCode\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.ParentItemCode\"></extend-input>\r\n              </td>\r\n              <td class=\"center\">\r\n                <extend-checkbox [(_ngModel)]=\"selectedRow.IsActive\"></extend-checkbox>\r\n              </td>\r\n              <td class=\"center\" nzRight>\r\n                <icon-save (click)=\"save()\"></icon-save>\r\n                <box [width]=\"4\"></box>\r\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n              </td>\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data?.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      [nzData]=\"data?.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 195px)' }\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'DomainCode' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'DomainCode'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Domain Code\r\n          </th>\r\n          <th>Item Code</th>\r\n          <th>Item Value</th>\r\n          <th nzWidth=\"100px\">Order Value</th>\r\n          <th nzWidth=\"150px\">Child Domain Code</th>\r\n          <th nzWidth=\"150px\">Parent Item Code</th>\r\n          <th nzWidth=\"75px\">Active</th>\r\n          <th nzWidth=\"75px\" nzRight>Action</th>\r\n        </tr>\r\n        <tr (keyup.enter)=\"search()\" class=\"tr-search\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.DomainCode\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.ItemCode\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.ItemValue\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th class=\"center\" nzRight>\r\n            <icon-add (click)=\"add()\"></icon-add>\r\n          </th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of data?.LstItem; track $index; let i = $index) {\r\n          @if (selectedRow != row) {\r\n            <tr (click)=\"selectedRow = row\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>{{ row.DomainCode }}</td>\r\n              <td>{{ row.ItemCode }}</td>\r\n              <td>{{ row.ItemValue }}</td>\r\n              <td>{{ row.OrderValue }}</td>\r\n              <td>{{ row.ChildDomainCode }}</td>\r\n              <td>{{ row.ParentItemCode }}</td>\r\n              <td class=\"center\">\r\n                @if (row.IsActive) {\r\n                  <icon-check></icon-check>\r\n                }\r\n              </td>\r\n              <td class=\"center\" nzRight>\r\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n              </td>\r\n            </tr>\r\n          } @else {\r\n            <tr (keyup.enter)=\"save()\" class=\"selected\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.DomainCode\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.ItemCode\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-textarea\r\n                  [minRows]=\"1\"\r\n                  [formItemNoButtom]=\"true\"\r\n                  [(_ngModel)]=\"selectedRow.ItemValue\"\r\n                ></extend-textarea>\r\n              </td>\r\n              <td>\r\n                <extend-input-number [(_ngModel)]=\"selectedRow.OrderValue\"></extend-input-number>\r\n              </td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.ChildDomainCode\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.ParentItemCode\"></extend-input>\r\n              </td>\r\n              <td class=\"center\">\r\n                <extend-checkbox [(_ngModel)]=\"selectedRow.IsActive\"></extend-checkbox>\r\n              </td>\r\n              <td class=\"center\" nzRight>\r\n                <icon-save (click)=\"save()\"></icon-save>\r\n                <box [width]=\"4\"></box>\r\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n              </td>\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data?.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }] });
 
 let DicDomainSelectComponent$1 = class DicDomainSelectComponent {
@@ -4662,6 +4793,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 type: Input
             }] } });
 
+class FormatBytesPipe {
+    transform(bytes, decimals = 2) {
+        if (bytes === null || bytes === undefined || isNaN(bytes))
+            return '0 B';
+        if (bytes === 0)
+            return '0 B';
+        const k = 1024;
+        const dm = decimals < 0 ? 0 : decimals;
+        const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: FormatBytesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: FormatBytesPipe, isStandalone: true, name: "formatBytes" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: FormatBytesPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'formatBytes',
+                    standalone: true,
+                }]
+        }] });
+
 class FileListComponent extends BaseComponent {
     service = inject(FileService);
     data;
@@ -4698,14 +4852,6 @@ class FileListComponent extends BaseComponent {
             this.data = res.Data;
         }, (err) => this.handleError(err));
     }
-    edit(item) {
-        if (item) {
-            this.goto(`/admin/file/${item.App_File_Id}`);
-        }
-        else {
-            this.goto(`/admin/file/new`);
-        }
-    }
     download(file) {
         if (file.App_File_Id) {
             this.service.downloadFile(file.App_File_Id).then((res) => {
@@ -4758,7 +4904,7 @@ class FileListComponent extends BaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: FileListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: FileListComponent, isStandalone: true, selector: "app-file-list", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"18\">\r\n    <div nz-row [nzGutter]=\"[8, 0]\">\r\n      <div nz-col>\r\n        <button nz-button nzType=\"primary\" (click)=\"edit(null)\">{{ TranslateKey.ADD | translate }}</button>\r\n      </div>\r\n      <div nz-col>\r\n        <button nz-button nzType=\"primary\" (click)=\"getData()\">{{ TranslateKey.SEARCH | translate }}</button>\r\n      </div>\r\n      <nz-upload\r\n        [nzAction]=\"\r\n          AppGlobals.apiEndpoint +\r\n          '/api/file/UploadFile?SaveToDB=' +\r\n          (SaveTo == 'DB' ? 'true' : 'false') +\r\n          '&FileCode=' +\r\n          FileCode\r\n        \"\r\n        (nzChange)=\"handleChange($event)\"\r\n      >\r\n        <button nz-button>\r\n          <nz-icon nzType=\"upload\" />\r\n          T\u1EA3i file\r\n        </button>\r\n      </nz-upload>\r\n      <extend-select\r\n        nz-col\r\n        nzSpan=\"3\"\r\n        [placeHolder]=\"'Save To'\"\r\n        [lstItem]=\"[\r\n          {\r\n            Code: 'DB',\r\n            Name: 'DB',\r\n          },\r\n          {\r\n            Code: 'DISC',\r\n            Name: 'DISC',\r\n          },\r\n        ]\"\r\n        [valueField]=\"'Code'\"\r\n        [displayField]=\"'Name'\"\r\n        [(_ngModel)]=\"SaveTo\"\r\n      ></extend-select>\r\n      <div nz-col [nzSpan]=\"8\">\r\n        <input nz-input placeholder=\"File Code\" [(ngModel)]=\"FileCode\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div nz-col nzSpan=\"6\">\r\n    <div nz-row nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data?.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data?.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowSizeChanger]=\"true\"\r\n      [nzFrontPagination]=\"false\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          @for (item of this.data?.LstHeader; track $index) {\r\n            @if (item.Code == \"Code\") {\r\n              <th [nzWidth]=\"item.Width\" nzCustomFilter>\r\n                {{ item.Code }}\r\n                <nz-filter-trigger\r\n                  [nzActive]=\"filter.Code ? true : false\"\r\n                  [nzDropdownMenu]=\"searchCodeMenu\"\r\n                  (nzVisibleChange)=\"isDropdownCodeVisible = $event\"\r\n                >\r\n                  <nz-icon nzType=\"search\" />\r\n                </nz-filter-trigger>\r\n              </th>\r\n            } @else {\r\n              <th [nzWidth]=\"item.Width\">{{ item.Name }}</th>\r\n            }\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          @if (row != selectedItem) {\r\n            <tr (click)=\"selectedItem = row\">\r\n              @for (col of this.data?.LstHeader; track $index) {\r\n                <td [class]=\"col.Class\" [nzBreakWord]=\"col.Class && col.Class.includes('BreakWord')\">\r\n                  @if (col.Code == \"NO\") {\r\n                    {{ i + 1 + filter.PageIndex * filter.PageSize }}\r\n                  } @else if (col.Code == \"ACTION\") {\r\n                    <!-- <i\r\n                      nz-icon\r\n                      nzType=\"download\"\r\n                      nzTheme=\"outline\"\r\n                      class=\"color-primary cursor-pointer icon-size-16\"\r\n                      (click)=\"download(row)\"\r\n                    ></i>\r\n                    &nbsp;\r\n                    <a\r\n                      nz-popconfirm\r\n                      [nzPopconfirmTitle]=\"TranslateKey.CONFIRM_DELETE | translate\"\r\n                      nzPopconfirmPlacement=\"top\"\r\n                      (nzOnConfirm)=\"delete(row)\"\r\n                      (click)=\"$event.stopPropagation()\"\r\n                      nzOkDanger\r\n                    >\r\n                      <i nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn cursor-pointer icon-size-16\"></i>\r\n                    </a> -->\r\n                  } @else {\r\n                    @if (col.Type == \"CHECKBOX\") {\r\n                      @if (row[col.Code]) {\r\n                        <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n                      } @else {\r\n                        <nz-icon nzType=\"close\" nzTheme=\"outline\" class=\"color-warn\" />\r\n                      }\r\n                    } @else {\r\n                      {{ row[col.Code] }}\r\n                    }\r\n                  }\r\n                </td>\r\n              }\r\n            </tr>\r\n          } @else {\r\n            <tr>\r\n              @for (col of this.data?.LstHeader; track $index) {\r\n                <td [class]=\"col.Class\" [nzBreakWord]=\"col.Class && col.Class.includes('BreakWord')\">\r\n                  @if (col.Code == \"NO\") {\r\n                    {{ i + 1 + filter.PageIndex * filter.PageSize }}\r\n                  } @else if (col.Code == \"ACTION\") {\r\n                    <i\r\n                      *ngIf=\"row.IsContentOnly\"\r\n                      nz-tooltip=\"Move to disk\"\r\n                      nz-icon\r\n                      nzType=\"file\"\r\n                      nzTheme=\"outline\"\r\n                      class=\"color-primary cursor-pointer icon-size-16\"\r\n                      (click)=\"moveFileToDisk(row)\"\r\n                    ></i>\r\n                    <box [width]=\"5\"></box>\r\n                    <i\r\n                      nz-icon\r\n                      nzType=\"save\"\r\n                      nzTheme=\"outline\"\r\n                      class=\"color-primary cursor-pointer icon-size-16\"\r\n                      (click)=\"save(row)\"\r\n                    ></i>\r\n                    <box [width]=\"5\"></box>\r\n                    <i\r\n                      nz-icon\r\n                      nzType=\"download\"\r\n                      nzTheme=\"outline\"\r\n                      class=\"color-primary cursor-pointer icon-size-16\"\r\n                      (click)=\"download(row)\"\r\n                    ></i>\r\n                    <box [width]=\"5\"></box>\r\n                    <a\r\n                      nz-popconfirm\r\n                      [nzPopconfirmTitle]=\"TranslateKey.CONFIRM_DELETE | translate\"\r\n                      nzPopconfirmPlacement=\"top\"\r\n                      (nzOnConfirm)=\"delete(row)\"\r\n                      nzOkDanger\r\n                    >\r\n                      <i nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn cursor-pointer icon-size-16\"></i>\r\n                    </a>\r\n                  } @else if (col.Code == \"Code\") {\r\n                    <extend-input [size]=\"'small'\" [(_ngModel)]=\"row.Code\"></extend-input>\r\n                  } @else if (col.Code == \"IsTemp\") {\r\n                    <extend-checkbox [(_ngModel)]=\"row.IsTemp\"></extend-checkbox>\r\n                  } @else if (col.Code == \"FileName\") {\r\n                    <extend-input [size]=\"'small'\" [(_ngModel)]=\"row.FileName\"></extend-input>\r\n                  } @else {\r\n                    @if (col.Type == \"CHECKBOX\") {\r\n                      @if (row[col.Code]) {\r\n                        <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n                      } @else {\r\n                        <nz-icon nzType=\"close\" nzTheme=\"outline\" class=\"color-warn\" />\r\n                      }\r\n                    } @else {\r\n                      {{ row[col.Code] }}\r\n                    }\r\n                  }\r\n                </td>\r\n              }\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n</div>\r\n\r\n<nz-dropdown-menu #searchCodeMenu=\"nzDropdownMenu\">\r\n  <div class=\"ant-table-filter-dropdown\">\r\n    <div class=\"search-box\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        [(ngModel)]=\"filter.Code\"\r\n        [appAutoFocus]=\"isDropdownCodeVisible\"\r\n        (keyup.enter)=\"search()\"\r\n      />\r\n      <button nz-button nzSize=\"small\" nzType=\"primary\" (click)=\"search()\" class=\"search-button\">\r\n        {{ \"SEARCH\" | translate }}\r\n      </button>\r\n      <button nz-button nzSize=\"small\" (click)=\"filter.Code = ''; search()\">{{ \"RESET\" | translate }}</button>\r\n    </div>\r\n  </div>\r\n</nz-dropdown-menu>\r\n", dependencies: [{ kind: "ngmodule", type: NzUploadModule }, { kind: "component", type: i1$6.NzUploadComponent, selector: "nz-upload", inputs: ["nzType", "nzLimit", "nzSize", "nzFileType", "nzAccept", "nzAction", "nzDirectory", "nzOpenFileDialogOnClick", "nzBeforeUpload", "nzCustomRequest", "nzData", "nzFilter", "nzFileList", "nzDisabled", "nzHeaders", "nzListType", "nzMultiple", "nzName", "nzShowUploadList", "nzShowButton", "nzWithCredentials", "nzRemove", "nzPreview", "nzPreviewFile", "nzPreviewIsImage", "nzTransformFile", "nzDownload", "nzIconRender", "nzFileListRender"], outputs: ["nzChange", "nzFileListChange"], exportAs: ["nzUpload"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: ExtendSelectComponent, selector: "extend-select", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "dropdownMatchSelectWidth", "labelSpan", "labelFlex", "disabled", "required", "noBottom", "multiple", "showSelectAll", "maxTagCount", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "lstItem", "displayField", "displayFields", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "itemChange", "onFocus"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i5$3.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$2.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "component", type: i6$2.NzThAddOnComponent, selector: "th[nzColumnKey], th[nzSortFn], th[nzSortOrder], th[nzFilters], th[nzShowSort], th[nzShowFilter], th[nzCustomFilter]", inputs: ["nzColumnKey", "nzFilterMultiple", "nzSortOrder", "nzSortPriority", "nzSortDirections", "nzFilters", "nzSortFn", "nzFilterFn", "nzShowSort", "nzShowFilter", "nzCustomFilter"], outputs: ["nzCheckedChange", "nzSortOrderChange", "nzFilterChange"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "component", type: i6$2.NzFilterTriggerComponent, selector: "nz-filter-trigger", inputs: ["nzActive", "nzDropdownMenu", "nzVisible", "nzBackdrop"], outputs: ["nzVisibleChange"], exportAs: ["nzFilterTrigger"] }, { kind: "directive", type: i6$2.NzCellBreakWordDirective, selector: "th[nzBreakWord],td[nzBreakWord]", inputs: ["nzBreakWord"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "ngmodule", type: NzPopconfirmModule }, { kind: "directive", type: i9.NzPopconfirmDirective, selector: "[nz-popconfirm]", inputs: ["nzPopconfirmArrowPointAtCenter", "nzPopconfirmTitle", "nzPopconfirmTitleContext", "nz-popconfirm", "nzPopconfirmTrigger", "nzPopconfirmPlacement", "nzPopconfirmOrigin", "nzPopconfirmMouseEnterDelay", "nzPopconfirmMouseLeaveDelay", "nzPopconfirmOverlayClassName", "nzPopconfirmOverlayStyle", "nzPopconfirmVisible", "nzOkText", "nzOkType", "nzOkDisabled", "nzOkDanger", "nzCancelText", "nzBeforeConfirm", "nzIcon", "nzCondition", "nzPopconfirmShowArrow", "nzPopconfirmBackdrop", "nzAutofocus"], outputs: ["nzPopconfirmVisibleChange", "nzOnCancel", "nzOnConfirm"], exportAs: ["nzPopconfirm"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "component", type: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "component", type: i5$4.NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }, { kind: "directive", type: AutoFocusDirective, selector: "[appAutoFocus]", inputs: ["appAutoFocus"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$3.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i4.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i5$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i8.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: FileListComponent, isStandalone: true, selector: "app-file-list", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-row [nzGutter]=\"[8, 0]\">\r\n      <div nz-col>\r\n        <button nz-button nzType=\"primary\" (click)=\"getData()\">{{ TranslateKey.SEARCH | translate }}</button>\r\n      </div>\r\n      <nz-upload\r\n        [nzAction]=\"\r\n          AppGlobals.apiEndpoint +\r\n          '/api/file/Upload?SaveToDB=' +\r\n          (SaveTo == 'DB' ? 'true' : 'false') +\r\n          '&FileCode=' +\r\n          FileCode\r\n        \"\r\n        (nzChange)=\"handleChange($event)\"\r\n      >\r\n        <button nz-button>\r\n          <nz-icon nzType=\"upload\" />\r\n          T\u1EA3i file\r\n        </button>\r\n      </nz-upload>\r\n      <extend-select\r\n        nz-col\r\n        nzSpan=\"3\"\r\n        [placeHolder]=\"'Save To'\"\r\n        [lstItem]=\"[\r\n          {\r\n            Code: 'DB',\r\n            Name: 'DB',\r\n          },\r\n          {\r\n            Code: 'DISC',\r\n            Name: 'DISC',\r\n          },\r\n        ]\"\r\n        [valueField]=\"'Code'\"\r\n        [displayField]=\"'Name'\"\r\n        [(_ngModel)]=\"SaveTo\"\r\n      ></extend-select>\r\n      <div nz-col [nzSpan]=\"8\">\r\n        <input nz-input placeholder=\"File Code\" [(ngModel)]=\"FileCode\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div nz-row [nzGutter]=\"[0, 8]\">\r\n    <div nz-col nzSpan=\"24\">\r\n      <nz-table\r\n        [nzData]=\"data?.LstItem || []\"\r\n        [nzBordered]=\"true\"\r\n        [nzSize]=\"'small'\"\r\n        [nzFrontPagination]=\"false\"\r\n        [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 225px)' }\"\r\n      >\r\n        <thead>\r\n          <tr>\r\n            <th nzWidth=\"50px\">#</th>\r\n            <th\r\n              [nzShowSort]=\"true\"\r\n              [nzSortOrder]=\"filter.OrderOption.FieldName == 'Code' ? filter.OrderOption.Direction : null\"\r\n              [nzSortDirections]=\"['ascend', 'descend']\"\r\n              (nzSortOrderChange)=\"\r\n                filter.OrderOption.FieldName = 'Code'; filter.OrderOption.Direction = $event; getData()\r\n              \"\r\n            >\r\n              Code\r\n            </th>\r\n            <th>Temp file</th>\r\n            <th>Content only</th>\r\n            <th>FileName</th>\r\n            <th class=\"right\">FileSize</th>\r\n            <th>FileId</th>\r\n            <th nzWidth=\"100px\">Action</th>\r\n          </tr>\r\n          <tr (keyup.enter)=\"search()\" class=\"tr-search\">\r\n            <th></th>\r\n            <th>\r\n              <extend-input\r\n                [size]=\"'small'\"\r\n                [showClear]=\"true\"\r\n                [(_ngModel)]=\"filter.Code\"\r\n                (onclickClearIcon)=\"search()\"\r\n              ></extend-input>\r\n            </th>\r\n            <th></th>\r\n            <th></th>\r\n            <th></th>\r\n            <th></th>\r\n            <th></th>\r\n            <th></th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (row of data?.LstItem; track $index; let i = $index) {\r\n            <tr>\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>{{ row.Code }}</td>\r\n              <td class=\"center\"><extend-checkbox [(_ngModel)]=\"row.IsTemp\"></extend-checkbox></td>\r\n              <td class=\"center\"><extend-checkbox [(_ngModel)]=\"row.IsContentOnly\"></extend-checkbox></td>\r\n              <td>{{ row.FileName }}</td>\r\n              <td class=\"right\">{{ row.FileSize || 0 | formatBytes }}</td>\r\n              <td>\r\n                {{ row.App_File_Id }}\r\n              </td>\r\n              <td class=\"center\" nzRight>\r\n                <i\r\n                  *ngIf=\"row.IsContentOnly\"\r\n                  nz-tooltip=\"Move to disk\"\r\n                  nz-icon\r\n                  nzType=\"file\"\r\n                  nzTheme=\"outline\"\r\n                  class=\"color-primary cursor-pointer icon-size-16\"\r\n                  (click)=\"moveFileToDisk(row)\"\r\n                ></i>\r\n                <box [width]=\"5\"></box>\r\n                <i\r\n                  nz-icon\r\n                  nzType=\"save\"\r\n                  nzTheme=\"outline\"\r\n                  class=\"color-primary cursor-pointer icon-size-16\"\r\n                  (click)=\"save(row)\"\r\n                ></i>\r\n                <box [width]=\"5\"></box>\r\n                <i\r\n                  nz-icon\r\n                  nzType=\"download\"\r\n                  nzTheme=\"outline\"\r\n                  class=\"color-primary cursor-pointer icon-size-16\"\r\n                  (click)=\"download(row)\"\r\n                ></i>\r\n                <box [width]=\"5\"></box>\r\n                <a\r\n                  nz-popconfirm\r\n                  [nzPopconfirmTitle]=\"TranslateKey.CONFIRM_DELETE | translate\"\r\n                  nzPopconfirmPlacement=\"top\"\r\n                  (nzOnConfirm)=\"delete(row)\"\r\n                  nzOkDanger\r\n                >\r\n                  <i nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn cursor-pointer icon-size-16\"></i>\r\n                </a>\r\n              </td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </nz-table>\r\n    </div>\r\n    <div nz-col nzSpan=\"24\">\r\n      <div nz-flex nzJustify=\"end\">\r\n        <nz-pagination\r\n          [nzSize]=\"'small'\"\r\n          [nzPageIndex]=\"filter.PageIndex + 1\"\r\n          [nzPageSize]=\"filter.PageSize\"\r\n          [nzTotal]=\"data?.TotalCount || 0\"\r\n          [nzShowSizeChanger]=\"true\"\r\n          [nzShowTotal]=\"showTotalTpl\"\r\n          [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n          (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n          (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n        >\r\n        </nz-pagination>\r\n\r\n        <ng-template #showTotalTpl let-total let-range=\"range\">\r\n          {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: NzUploadModule }, { kind: "component", type: i1$6.NzUploadComponent, selector: "nz-upload", inputs: ["nzType", "nzLimit", "nzSize", "nzFileType", "nzAccept", "nzAction", "nzDirectory", "nzOpenFileDialogOnClick", "nzBeforeUpload", "nzCustomRequest", "nzData", "nzFilter", "nzFileList", "nzDisabled", "nzHeaders", "nzListType", "nzMultiple", "nzName", "nzShowUploadList", "nzShowButton", "nzWithCredentials", "nzRemove", "nzPreview", "nzPreviewFile", "nzPreviewIsImage", "nzTransformFile", "nzDownload", "nzIconRender", "nzFileListRender"], outputs: ["nzChange", "nzFileListChange"], exportAs: ["nzUpload"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: ExtendSelectComponent, selector: "extend-select", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "dropdownMatchSelectWidth", "labelSpan", "labelFlex", "disabled", "required", "noBottom", "multiple", "showSelectAll", "maxTagCount", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "lstItem", "displayField", "displayFields", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "itemChange", "onFocus"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i5$3.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$2.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "component", type: i6$2.NzThAddOnComponent, selector: "th[nzColumnKey], th[nzSortFn], th[nzSortOrder], th[nzFilters], th[nzShowSort], th[nzShowFilter], th[nzCustomFilter]", inputs: ["nzColumnKey", "nzFilterMultiple", "nzSortOrder", "nzSortPriority", "nzSortDirections", "nzFilters", "nzSortFn", "nzFilterFn", "nzShowSort", "nzShowFilter", "nzCustomFilter"], outputs: ["nzCheckedChange", "nzSortOrderChange", "nzFilterChange"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "directive", type: i6$2.NzCellFixedDirective, selector: "td[nzRight],th[nzRight],td[nzLeft],th[nzLeft]", inputs: ["nzRight", "nzLeft", "colspan", "colSpan"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "ngmodule", type: NzPopconfirmModule }, { kind: "directive", type: i9.NzPopconfirmDirective, selector: "[nz-popconfirm]", inputs: ["nzPopconfirmArrowPointAtCenter", "nzPopconfirmTitle", "nzPopconfirmTitleContext", "nz-popconfirm", "nzPopconfirmTrigger", "nzPopconfirmPlacement", "nzPopconfirmOrigin", "nzPopconfirmMouseEnterDelay", "nzPopconfirmMouseLeaveDelay", "nzPopconfirmOverlayClassName", "nzPopconfirmOverlayStyle", "nzPopconfirmVisible", "nzOkText", "nzOkType", "nzOkDisabled", "nzOkDanger", "nzCancelText", "nzBeforeConfirm", "nzIcon", "nzCondition", "nzPopconfirmShowArrow", "nzPopconfirmBackdrop", "nzAutofocus"], outputs: ["nzPopconfirmVisibleChange", "nzOnCancel", "nzOnConfirm"], exportAs: ["nzPopconfirm"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "component", type: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$3.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i4.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i5$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i8.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "pipe", type: FormatBytesPipe, name: "formatBytes" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: FileListComponent, decorators: [{
             type: Component,
@@ -4777,11 +4923,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         ExtendInput,
                         ExtendCheckbox,
                         NzDropDownModule,
-                        AutoFocusDirective,
+                        NzFlexModule,
                         NzButtonModule,
                         NzInputModule,
                         NzToolTipModule,
-                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"18\">\r\n    <div nz-row [nzGutter]=\"[8, 0]\">\r\n      <div nz-col>\r\n        <button nz-button nzType=\"primary\" (click)=\"edit(null)\">{{ TranslateKey.ADD | translate }}</button>\r\n      </div>\r\n      <div nz-col>\r\n        <button nz-button nzType=\"primary\" (click)=\"getData()\">{{ TranslateKey.SEARCH | translate }}</button>\r\n      </div>\r\n      <nz-upload\r\n        [nzAction]=\"\r\n          AppGlobals.apiEndpoint +\r\n          '/api/file/UploadFile?SaveToDB=' +\r\n          (SaveTo == 'DB' ? 'true' : 'false') +\r\n          '&FileCode=' +\r\n          FileCode\r\n        \"\r\n        (nzChange)=\"handleChange($event)\"\r\n      >\r\n        <button nz-button>\r\n          <nz-icon nzType=\"upload\" />\r\n          T\u1EA3i file\r\n        </button>\r\n      </nz-upload>\r\n      <extend-select\r\n        nz-col\r\n        nzSpan=\"3\"\r\n        [placeHolder]=\"'Save To'\"\r\n        [lstItem]=\"[\r\n          {\r\n            Code: 'DB',\r\n            Name: 'DB',\r\n          },\r\n          {\r\n            Code: 'DISC',\r\n            Name: 'DISC',\r\n          },\r\n        ]\"\r\n        [valueField]=\"'Code'\"\r\n        [displayField]=\"'Name'\"\r\n        [(_ngModel)]=\"SaveTo\"\r\n      ></extend-select>\r\n      <div nz-col [nzSpan]=\"8\">\r\n        <input nz-input placeholder=\"File Code\" [(ngModel)]=\"FileCode\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div nz-col nzSpan=\"6\">\r\n    <div nz-row nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data?.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data?.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowSizeChanger]=\"true\"\r\n      [nzFrontPagination]=\"false\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          @for (item of this.data?.LstHeader; track $index) {\r\n            @if (item.Code == \"Code\") {\r\n              <th [nzWidth]=\"item.Width\" nzCustomFilter>\r\n                {{ item.Code }}\r\n                <nz-filter-trigger\r\n                  [nzActive]=\"filter.Code ? true : false\"\r\n                  [nzDropdownMenu]=\"searchCodeMenu\"\r\n                  (nzVisibleChange)=\"isDropdownCodeVisible = $event\"\r\n                >\r\n                  <nz-icon nzType=\"search\" />\r\n                </nz-filter-trigger>\r\n              </th>\r\n            } @else {\r\n              <th [nzWidth]=\"item.Width\">{{ item.Name }}</th>\r\n            }\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          @if (row != selectedItem) {\r\n            <tr (click)=\"selectedItem = row\">\r\n              @for (col of this.data?.LstHeader; track $index) {\r\n                <td [class]=\"col.Class\" [nzBreakWord]=\"col.Class && col.Class.includes('BreakWord')\">\r\n                  @if (col.Code == \"NO\") {\r\n                    {{ i + 1 + filter.PageIndex * filter.PageSize }}\r\n                  } @else if (col.Code == \"ACTION\") {\r\n                    <!-- <i\r\n                      nz-icon\r\n                      nzType=\"download\"\r\n                      nzTheme=\"outline\"\r\n                      class=\"color-primary cursor-pointer icon-size-16\"\r\n                      (click)=\"download(row)\"\r\n                    ></i>\r\n                    &nbsp;\r\n                    <a\r\n                      nz-popconfirm\r\n                      [nzPopconfirmTitle]=\"TranslateKey.CONFIRM_DELETE | translate\"\r\n                      nzPopconfirmPlacement=\"top\"\r\n                      (nzOnConfirm)=\"delete(row)\"\r\n                      (click)=\"$event.stopPropagation()\"\r\n                      nzOkDanger\r\n                    >\r\n                      <i nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn cursor-pointer icon-size-16\"></i>\r\n                    </a> -->\r\n                  } @else {\r\n                    @if (col.Type == \"CHECKBOX\") {\r\n                      @if (row[col.Code]) {\r\n                        <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n                      } @else {\r\n                        <nz-icon nzType=\"close\" nzTheme=\"outline\" class=\"color-warn\" />\r\n                      }\r\n                    } @else {\r\n                      {{ row[col.Code] }}\r\n                    }\r\n                  }\r\n                </td>\r\n              }\r\n            </tr>\r\n          } @else {\r\n            <tr>\r\n              @for (col of this.data?.LstHeader; track $index) {\r\n                <td [class]=\"col.Class\" [nzBreakWord]=\"col.Class && col.Class.includes('BreakWord')\">\r\n                  @if (col.Code == \"NO\") {\r\n                    {{ i + 1 + filter.PageIndex * filter.PageSize }}\r\n                  } @else if (col.Code == \"ACTION\") {\r\n                    <i\r\n                      *ngIf=\"row.IsContentOnly\"\r\n                      nz-tooltip=\"Move to disk\"\r\n                      nz-icon\r\n                      nzType=\"file\"\r\n                      nzTheme=\"outline\"\r\n                      class=\"color-primary cursor-pointer icon-size-16\"\r\n                      (click)=\"moveFileToDisk(row)\"\r\n                    ></i>\r\n                    <box [width]=\"5\"></box>\r\n                    <i\r\n                      nz-icon\r\n                      nzType=\"save\"\r\n                      nzTheme=\"outline\"\r\n                      class=\"color-primary cursor-pointer icon-size-16\"\r\n                      (click)=\"save(row)\"\r\n                    ></i>\r\n                    <box [width]=\"5\"></box>\r\n                    <i\r\n                      nz-icon\r\n                      nzType=\"download\"\r\n                      nzTheme=\"outline\"\r\n                      class=\"color-primary cursor-pointer icon-size-16\"\r\n                      (click)=\"download(row)\"\r\n                    ></i>\r\n                    <box [width]=\"5\"></box>\r\n                    <a\r\n                      nz-popconfirm\r\n                      [nzPopconfirmTitle]=\"TranslateKey.CONFIRM_DELETE | translate\"\r\n                      nzPopconfirmPlacement=\"top\"\r\n                      (nzOnConfirm)=\"delete(row)\"\r\n                      nzOkDanger\r\n                    >\r\n                      <i nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn cursor-pointer icon-size-16\"></i>\r\n                    </a>\r\n                  } @else if (col.Code == \"Code\") {\r\n                    <extend-input [size]=\"'small'\" [(_ngModel)]=\"row.Code\"></extend-input>\r\n                  } @else if (col.Code == \"IsTemp\") {\r\n                    <extend-checkbox [(_ngModel)]=\"row.IsTemp\"></extend-checkbox>\r\n                  } @else if (col.Code == \"FileName\") {\r\n                    <extend-input [size]=\"'small'\" [(_ngModel)]=\"row.FileName\"></extend-input>\r\n                  } @else {\r\n                    @if (col.Type == \"CHECKBOX\") {\r\n                      @if (row[col.Code]) {\r\n                        <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n                      } @else {\r\n                        <nz-icon nzType=\"close\" nzTheme=\"outline\" class=\"color-warn\" />\r\n                      }\r\n                    } @else {\r\n                      {{ row[col.Code] }}\r\n                    }\r\n                  }\r\n                </td>\r\n              }\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n</div>\r\n\r\n<nz-dropdown-menu #searchCodeMenu=\"nzDropdownMenu\">\r\n  <div class=\"ant-table-filter-dropdown\">\r\n    <div class=\"search-box\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        [(ngModel)]=\"filter.Code\"\r\n        [appAutoFocus]=\"isDropdownCodeVisible\"\r\n        (keyup.enter)=\"search()\"\r\n      />\r\n      <button nz-button nzSize=\"small\" nzType=\"primary\" (click)=\"search()\" class=\"search-button\">\r\n        {{ \"SEARCH\" | translate }}\r\n      </button>\r\n      <button nz-button nzSize=\"small\" (click)=\"filter.Code = ''; search()\">{{ \"RESET\" | translate }}</button>\r\n    </div>\r\n  </div>\r\n</nz-dropdown-menu>\r\n" }]
+                        FormatBytesPipe,
+                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-row [nzGutter]=\"[8, 0]\">\r\n      <div nz-col>\r\n        <button nz-button nzType=\"primary\" (click)=\"getData()\">{{ TranslateKey.SEARCH | translate }}</button>\r\n      </div>\r\n      <nz-upload\r\n        [nzAction]=\"\r\n          AppGlobals.apiEndpoint +\r\n          '/api/file/Upload?SaveToDB=' +\r\n          (SaveTo == 'DB' ? 'true' : 'false') +\r\n          '&FileCode=' +\r\n          FileCode\r\n        \"\r\n        (nzChange)=\"handleChange($event)\"\r\n      >\r\n        <button nz-button>\r\n          <nz-icon nzType=\"upload\" />\r\n          T\u1EA3i file\r\n        </button>\r\n      </nz-upload>\r\n      <extend-select\r\n        nz-col\r\n        nzSpan=\"3\"\r\n        [placeHolder]=\"'Save To'\"\r\n        [lstItem]=\"[\r\n          {\r\n            Code: 'DB',\r\n            Name: 'DB',\r\n          },\r\n          {\r\n            Code: 'DISC',\r\n            Name: 'DISC',\r\n          },\r\n        ]\"\r\n        [valueField]=\"'Code'\"\r\n        [displayField]=\"'Name'\"\r\n        [(_ngModel)]=\"SaveTo\"\r\n      ></extend-select>\r\n      <div nz-col [nzSpan]=\"8\">\r\n        <input nz-input placeholder=\"File Code\" [(ngModel)]=\"FileCode\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div nz-row [nzGutter]=\"[0, 8]\">\r\n    <div nz-col nzSpan=\"24\">\r\n      <nz-table\r\n        [nzData]=\"data?.LstItem || []\"\r\n        [nzBordered]=\"true\"\r\n        [nzSize]=\"'small'\"\r\n        [nzFrontPagination]=\"false\"\r\n        [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 225px)' }\"\r\n      >\r\n        <thead>\r\n          <tr>\r\n            <th nzWidth=\"50px\">#</th>\r\n            <th\r\n              [nzShowSort]=\"true\"\r\n              [nzSortOrder]=\"filter.OrderOption.FieldName == 'Code' ? filter.OrderOption.Direction : null\"\r\n              [nzSortDirections]=\"['ascend', 'descend']\"\r\n              (nzSortOrderChange)=\"\r\n                filter.OrderOption.FieldName = 'Code'; filter.OrderOption.Direction = $event; getData()\r\n              \"\r\n            >\r\n              Code\r\n            </th>\r\n            <th>Temp file</th>\r\n            <th>Content only</th>\r\n            <th>FileName</th>\r\n            <th class=\"right\">FileSize</th>\r\n            <th>FileId</th>\r\n            <th nzWidth=\"100px\">Action</th>\r\n          </tr>\r\n          <tr (keyup.enter)=\"search()\" class=\"tr-search\">\r\n            <th></th>\r\n            <th>\r\n              <extend-input\r\n                [size]=\"'small'\"\r\n                [showClear]=\"true\"\r\n                [(_ngModel)]=\"filter.Code\"\r\n                (onclickClearIcon)=\"search()\"\r\n              ></extend-input>\r\n            </th>\r\n            <th></th>\r\n            <th></th>\r\n            <th></th>\r\n            <th></th>\r\n            <th></th>\r\n            <th></th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (row of data?.LstItem; track $index; let i = $index) {\r\n            <tr>\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>{{ row.Code }}</td>\r\n              <td class=\"center\"><extend-checkbox [(_ngModel)]=\"row.IsTemp\"></extend-checkbox></td>\r\n              <td class=\"center\"><extend-checkbox [(_ngModel)]=\"row.IsContentOnly\"></extend-checkbox></td>\r\n              <td>{{ row.FileName }}</td>\r\n              <td class=\"right\">{{ row.FileSize || 0 | formatBytes }}</td>\r\n              <td>\r\n                {{ row.App_File_Id }}\r\n              </td>\r\n              <td class=\"center\" nzRight>\r\n                <i\r\n                  *ngIf=\"row.IsContentOnly\"\r\n                  nz-tooltip=\"Move to disk\"\r\n                  nz-icon\r\n                  nzType=\"file\"\r\n                  nzTheme=\"outline\"\r\n                  class=\"color-primary cursor-pointer icon-size-16\"\r\n                  (click)=\"moveFileToDisk(row)\"\r\n                ></i>\r\n                <box [width]=\"5\"></box>\r\n                <i\r\n                  nz-icon\r\n                  nzType=\"save\"\r\n                  nzTheme=\"outline\"\r\n                  class=\"color-primary cursor-pointer icon-size-16\"\r\n                  (click)=\"save(row)\"\r\n                ></i>\r\n                <box [width]=\"5\"></box>\r\n                <i\r\n                  nz-icon\r\n                  nzType=\"download\"\r\n                  nzTheme=\"outline\"\r\n                  class=\"color-primary cursor-pointer icon-size-16\"\r\n                  (click)=\"download(row)\"\r\n                ></i>\r\n                <box [width]=\"5\"></box>\r\n                <a\r\n                  nz-popconfirm\r\n                  [nzPopconfirmTitle]=\"TranslateKey.CONFIRM_DELETE | translate\"\r\n                  nzPopconfirmPlacement=\"top\"\r\n                  (nzOnConfirm)=\"delete(row)\"\r\n                  nzOkDanger\r\n                >\r\n                  <i nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn cursor-pointer icon-size-16\"></i>\r\n                </a>\r\n              </td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </nz-table>\r\n    </div>\r\n    <div nz-col nzSpan=\"24\">\r\n      <div nz-flex nzJustify=\"end\">\r\n        <nz-pagination\r\n          [nzSize]=\"'small'\"\r\n          [nzPageIndex]=\"filter.PageIndex + 1\"\r\n          [nzPageSize]=\"filter.PageSize\"\r\n          [nzTotal]=\"data?.TotalCount || 0\"\r\n          [nzShowSizeChanger]=\"true\"\r\n          [nzShowTotal]=\"showTotalTpl\"\r\n          [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n          (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n          (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n        >\r\n        </nz-pagination>\r\n\r\n        <ng-template #showTotalTpl let-total let-range=\"range\">\r\n          {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }] });
 
 let App_Menu$1 = class App_Menu {
@@ -4840,6 +4987,7 @@ let App_Menu$1 = class App_Menu {
 class MenuFilter extends GridFilter {
     Name = '';
     ParentName = '';
+    IsHeaderMenu = null;
 }
 // Model cho bảng trung gian Role-Menu
 class App_Role_Menu_Ref {
@@ -4849,8 +4997,9 @@ class App_Role_Menu_Ref {
     CreatedUser;
     App_Role_Id;
     App_Menu_Id;
-    HasViewPermission;
-    HasEditPermission;
+    CanCreate;
+    CanUpdate;
+    CanDelete;
     // For display - join với App_Role
     RoleCode;
     RoleName;
@@ -4863,8 +5012,9 @@ class App_Role_Menu_Ref {
         this.CreatedUser = obj.CreatedUser || '';
         this.App_Role_Id = obj.App_Role_Id || '';
         this.App_Menu_Id = obj.App_Menu_Id || '';
-        this.HasViewPermission = obj.HasViewPermission !== undefined ? obj.HasViewPermission : false;
-        this.HasEditPermission = obj.HasEditPermission !== undefined ? obj.HasEditPermission : false;
+        this.CanCreate = obj.CanCreate || false;
+        this.CanUpdate = obj.CanUpdate || false;
+        this.CanDelete = obj.CanDelete || false;
         this.RoleCode = obj.RoleCode || '';
         this.RoleName = obj.RoleName || '';
         this.RoleDescription = obj.RoleDescription || '';
@@ -5012,7 +5162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 }]
         }] });
 
-const URLs$b = {
+const URLs$c = {
     getById: '/api/App_Menu/GetById',
     getAll: '/api/App_Menu/GetAll',
     getList: '/api/App_Menu/GetList',
@@ -5025,29 +5175,29 @@ const URLs$b = {
 class MenuService extends HTTPService {
     getById(id) {
         let pr = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$b.getById, pr);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$c.getById, pr);
     }
     getAll() {
-        return this.post(AppGlobals.apiEndpoint + URLs$b.getAll);
+        return this.post(AppGlobals.apiEndpoint + URLs$c.getAll);
     }
     getList(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$b.getList, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$c.getList, filter);
     }
     getPaging(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$b.getPaging, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$c.getPaging, filter);
     }
     addOrEdit(obj) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$b.addOrEdit, obj);
+        return this.postData(AppGlobals.apiEndpoint + URLs$c.addOrEdit, obj);
     }
     addOrEditInListComponent(obj) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$b.addOrEditInListComponent, obj);
+        return this.postData(AppGlobals.apiEndpoint + URLs$c.addOrEditInListComponent, obj);
     }
     delete(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$b.delete, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$c.delete, params);
     }
     getTree() {
-        return this.post(AppGlobals.apiEndpoint + URLs$b.getTree);
+        return this.post(AppGlobals.apiEndpoint + URLs$c.getTree);
     }
     getRoleMenuRefByMenuId(menuId) {
         let pr = new HttpParams().append('menuId', menuId);
@@ -5156,7 +5306,7 @@ class MenuListComponent extends BaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MenuListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: MenuListComponent, isStandalone: true, selector: "app-menu-list", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <div nz-flex nzGap=\"small\">\r\n        <button-add (click)=\"edit(null)\"></button-add>\r\n        <button-search (click)=\"search()\"></button-search>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data?.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzFrontPagination]=\"false\"\r\n    >\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th>T\u00EAn</th>\r\n          <th>URL</th>\r\n          <th nzWidth=\"90px\">Icon</th>\r\n          <th nzWidth=\"90px\">Order</th>\r\n          <th>Menu cha</th>\r\n          <th nzWidth=\"110px\">Header menu</th>\r\n          <th nzWidth=\"80px\">Hi\u1EC7u l\u1EF1c</th>\r\n          <th nzWidth=\"75px\" nzRight>Thao t\u00E1c</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.Name\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.ParentName\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th class=\"center\" nzRight>\r\n            <icon-add (click)=\"add()\"></icon-add>\r\n          </th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of table.data; track $index; let i = $index) {\r\n          @if (selectedMenu != row) {\r\n            <tr (click)=\"selectedMenu = row\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>{{ row.TreeNodeName }}</td>\r\n              <td>{{ row.Url }}</td>\r\n              <td>{{ row.Icon }}</td>\r\n              <td>{{ row.OrderValue }}</td>\r\n              <td>{{ row.ParentName }}</td>\r\n              <td class=\"center\">\r\n                @if (row.IsHeaderMenu) {\r\n                  <icon-check></icon-check>\r\n                }\r\n              </td>\r\n              <td class=\"center\">\r\n                @if (row.IsActive) {\r\n                  <icon-check></icon-check>\r\n                }\r\n              </td>\r\n              <td class=\"center\" nzRight>\r\n                <icon-edit (click)=\"edit(row)\"></icon-edit>\r\n                <box [width]=\"4\"></box>\r\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n              </td>\r\n            </tr>\r\n          } @else {\r\n            <tr (keyup.enter)=\"save()\" class=\"selected\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>\r\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Name\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Url\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Icon\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input-number [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.OrderValue\"></extend-input-number>\r\n              </td>\r\n              <td>\r\n                <nz-tree-select\r\n                  class=\"full-width\"\r\n                  [nzNodes]=\"treeMenu\"\r\n                  nzShowSearch\r\n                  nzPlaceHolder=\" \"\r\n                  [nzSize]=\"'small'\"\r\n                  [nzDropdownMatchSelectWidth]=\"false\"\r\n                  [(ngModel)]=\"selectedMenu.ParentId\"\r\n                ></nz-tree-select>\r\n              </td>\r\n              <td class=\"center\">\r\n                <extend-checkbox [(_ngModel)]=\"selectedMenu.IsHeaderMenu\"></extend-checkbox>\r\n              </td>\r\n              <td class=\"center\">\r\n                <extend-checkbox [(_ngModel)]=\"selectedMenu.IsActive\"></extend-checkbox>\r\n              </td>\r\n              <td class=\"center\">\r\n                <icon-save (click)=\"save()\"></icon-save>\r\n                <box [width]=\"4\"></box>\r\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n              </td>\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data?.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NzTreeSelectModule }, { kind: "component", type: i3$4.NzTreeSelectComponent, selector: "nz-tree-select", inputs: ["nzId", "nzAllowClear", "nzShowExpand", "nzShowLine", "nzDropdownMatchSelectWidth", "nzCheckable", "nzHideUnMatched", "nzShowIcon", "nzShowSearch", "nzDisabled", "nzAsyncData", "nzMultiple", "nzDefaultExpandAll", "nzCheckStrictly", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualHeight", "nzExpandedIcon", "nzNotFoundContent", "nzNodes", "nzOpen", "nzSize", "nzPlaceHolder", "nzDropdownStyle", "nzDropdownClassName", "nzBackdrop", "nzStatus", "nzPlacement", "nzExpandedKeys", "nzDisplayWith", "nzMaxTagCount", "nzMaxTagPlaceholder", "nzTreeTemplate"], outputs: ["nzOpenChange", "nzCleared", "nzRemoved", "nzExpandChange", "nzTreeClick", "nzTreeCheckboxChange"], exportAs: ["nzTreeSelect"] }, { kind: "component", type: ButtonSearch, selector: "button-search" }, { kind: "component", type: ButtonAdd, selector: "button-add" }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$2.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "directive", type: i6$2.NzCellFixedDirective, selector: "td[nzRight],th[nzRight],td[nzLeft],th[nzLeft]", inputs: ["nzRight", "nzLeft", "colspan", "colSpan"] }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i5$3.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "component", type: IconAdd, selector: "icon-add", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconEdit, selector: "icon-edit", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconCheck, selector: "icon-check", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconSave, selector: "icon-save", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "component", type: ExtendInputNumber, selector: "extend-input-number", inputs: ["label", "placeHolder", "labelAlign", "floatingLabel", "hiddenUpDown", "labelSpan", "labelFlex", "inputFlex", "disabled", "required", "noBottom", "size", "min", "max", "precision", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "isSubmited", "separatorType", "formData", "controlName", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: MenuListComponent, isStandalone: true, selector: "app-menu-list", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <div nz-flex nzGap=\"small\">\r\n        <button-add (click)=\"edit(null)\"></button-add>\r\n        <button-search (click)=\"search()\"></button-search>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data?.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th>T\u00EAn</th>\r\n          <th>URL</th>\r\n          <th nzWidth=\"90px\">Icon</th>\r\n          <th nzWidth=\"90px\">Order</th>\r\n          <th>Menu cha</th>\r\n          <th nzWidth=\"110px\">Header menu</th>\r\n          <th nzWidth=\"80px\">Hi\u1EC7u l\u1EF1c</th>\r\n          <th nzWidth=\"75px\" nzRight>Thao t\u00E1c</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.Name\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.ParentName\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th class=\"center\">\r\n            <extend-checkbox-3-value\r\n              [(_ngModel)]=\"filter.IsHeaderMenu\"\r\n              (_ngModelChange)=\"search()\"\r\n            ></extend-checkbox-3-value>\r\n          </th>\r\n          <th></th>\r\n          <th class=\"center\" nzRight>\r\n            <icon-add (click)=\"add()\"></icon-add>\r\n          </th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of table.data; track $index; let i = $index) {\r\n          @if (selectedMenu != row) {\r\n            <tr (click)=\"selectedMenu = row\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>{{ row.TreeNodeName }}</td>\r\n              <td>{{ row.Url }}</td>\r\n              <td>{{ row.Icon }}</td>\r\n              <td>{{ row.OrderValue }}</td>\r\n              <td>{{ row.ParentName }}</td>\r\n              <td class=\"center\">\r\n                @if (row.IsHeaderMenu) {\r\n                  <icon-check></icon-check>\r\n                }\r\n              </td>\r\n              <td class=\"center\">\r\n                @if (row.IsActive) {\r\n                  <icon-check></icon-check>\r\n                }\r\n              </td>\r\n              <td class=\"center\" nzRight>\r\n                <icon-edit (click)=\"edit(row)\"></icon-edit>\r\n                <box [width]=\"4\"></box>\r\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n              </td>\r\n            </tr>\r\n          } @else {\r\n            <tr (keyup.enter)=\"save()\" class=\"selected\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>\r\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Name\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Url\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Icon\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input-number [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.OrderValue\"></extend-input-number>\r\n              </td>\r\n              <td>\r\n                <nz-tree-select\r\n                  class=\"full-width\"\r\n                  [nzNodes]=\"treeMenu\"\r\n                  nzShowSearch\r\n                  nzPlaceHolder=\" \"\r\n                  [nzSize]=\"'small'\"\r\n                  [nzDropdownMatchSelectWidth]=\"false\"\r\n                  [(ngModel)]=\"selectedMenu.ParentId\"\r\n                ></nz-tree-select>\r\n              </td>\r\n              <td class=\"center\">\r\n                <extend-checkbox [(_ngModel)]=\"selectedMenu.IsHeaderMenu\"></extend-checkbox>\r\n              </td>\r\n              <td class=\"center\">\r\n                <extend-checkbox [(_ngModel)]=\"selectedMenu.IsActive\"></extend-checkbox>\r\n              </td>\r\n              <td class=\"center\">\r\n                <icon-save (click)=\"save()\"></icon-save>\r\n                <box [width]=\"4\"></box>\r\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n              </td>\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data?.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NzTreeSelectModule }, { kind: "component", type: i3$4.NzTreeSelectComponent, selector: "nz-tree-select", inputs: ["nzId", "nzAllowClear", "nzShowExpand", "nzShowLine", "nzDropdownMatchSelectWidth", "nzCheckable", "nzHideUnMatched", "nzShowIcon", "nzShowSearch", "nzDisabled", "nzAsyncData", "nzMultiple", "nzDefaultExpandAll", "nzCheckStrictly", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualHeight", "nzExpandedIcon", "nzNotFoundContent", "nzNodes", "nzOpen", "nzSize", "nzPlaceHolder", "nzDropdownStyle", "nzDropdownClassName", "nzBackdrop", "nzStatus", "nzPlacement", "nzExpandedKeys", "nzDisplayWith", "nzMaxTagCount", "nzMaxTagPlaceholder", "nzTreeTemplate"], outputs: ["nzOpenChange", "nzCleared", "nzRemoved", "nzExpandChange", "nzTreeClick", "nzTreeCheckboxChange"], exportAs: ["nzTreeSelect"] }, { kind: "component", type: ButtonSearch, selector: "button-search" }, { kind: "component", type: ButtonAdd, selector: "button-add" }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$2.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "directive", type: i6$2.NzCellFixedDirective, selector: "td[nzRight],th[nzRight],td[nzLeft],th[nzLeft]", inputs: ["nzRight", "nzLeft", "colspan", "colSpan"] }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i5$3.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "component", type: IconAdd, selector: "icon-add", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconEdit, selector: "icon-edit", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconCheck, selector: "icon-check", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconSave, selector: "icon-save", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "component", type: ExtendInputNumber, selector: "extend-input-number", inputs: ["label", "placeHolder", "labelAlign", "floatingLabel", "hiddenUpDown", "labelSpan", "labelFlex", "inputFlex", "disabled", "required", "noBottom", "size", "min", "max", "precision", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "isSubmited", "separatorType", "formData", "controlName", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "component", type: ExtendCheckbox3Value, selector: "extend-checkbox-3-value", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MenuListComponent, decorators: [{
             type: Component,
@@ -5180,10 +5330,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         ExtendInputNumber,
                         ExtendCheckbox,
                         Box,
-                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <div nz-flex nzGap=\"small\">\r\n        <button-add (click)=\"edit(null)\"></button-add>\r\n        <button-search (click)=\"search()\"></button-search>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data?.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzFrontPagination]=\"false\"\r\n    >\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th>T\u00EAn</th>\r\n          <th>URL</th>\r\n          <th nzWidth=\"90px\">Icon</th>\r\n          <th nzWidth=\"90px\">Order</th>\r\n          <th>Menu cha</th>\r\n          <th nzWidth=\"110px\">Header menu</th>\r\n          <th nzWidth=\"80px\">Hi\u1EC7u l\u1EF1c</th>\r\n          <th nzWidth=\"75px\" nzRight>Thao t\u00E1c</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.Name\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.ParentName\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th class=\"center\" nzRight>\r\n            <icon-add (click)=\"add()\"></icon-add>\r\n          </th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of table.data; track $index; let i = $index) {\r\n          @if (selectedMenu != row) {\r\n            <tr (click)=\"selectedMenu = row\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>{{ row.TreeNodeName }}</td>\r\n              <td>{{ row.Url }}</td>\r\n              <td>{{ row.Icon }}</td>\r\n              <td>{{ row.OrderValue }}</td>\r\n              <td>{{ row.ParentName }}</td>\r\n              <td class=\"center\">\r\n                @if (row.IsHeaderMenu) {\r\n                  <icon-check></icon-check>\r\n                }\r\n              </td>\r\n              <td class=\"center\">\r\n                @if (row.IsActive) {\r\n                  <icon-check></icon-check>\r\n                }\r\n              </td>\r\n              <td class=\"center\" nzRight>\r\n                <icon-edit (click)=\"edit(row)\"></icon-edit>\r\n                <box [width]=\"4\"></box>\r\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n              </td>\r\n            </tr>\r\n          } @else {\r\n            <tr (keyup.enter)=\"save()\" class=\"selected\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>\r\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Name\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Url\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Icon\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input-number [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.OrderValue\"></extend-input-number>\r\n              </td>\r\n              <td>\r\n                <nz-tree-select\r\n                  class=\"full-width\"\r\n                  [nzNodes]=\"treeMenu\"\r\n                  nzShowSearch\r\n                  nzPlaceHolder=\" \"\r\n                  [nzSize]=\"'small'\"\r\n                  [nzDropdownMatchSelectWidth]=\"false\"\r\n                  [(ngModel)]=\"selectedMenu.ParentId\"\r\n                ></nz-tree-select>\r\n              </td>\r\n              <td class=\"center\">\r\n                <extend-checkbox [(_ngModel)]=\"selectedMenu.IsHeaderMenu\"></extend-checkbox>\r\n              </td>\r\n              <td class=\"center\">\r\n                <extend-checkbox [(_ngModel)]=\"selectedMenu.IsActive\"></extend-checkbox>\r\n              </td>\r\n              <td class=\"center\">\r\n                <icon-save (click)=\"save()\"></icon-save>\r\n                <box [width]=\"4\"></box>\r\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n              </td>\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data?.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                        ExtendCheckbox3Value,
+                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <div nz-flex nzGap=\"small\">\r\n        <button-add (click)=\"edit(null)\"></button-add>\r\n        <button-search (click)=\"search()\"></button-search>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data?.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th>T\u00EAn</th>\r\n          <th>URL</th>\r\n          <th nzWidth=\"90px\">Icon</th>\r\n          <th nzWidth=\"90px\">Order</th>\r\n          <th>Menu cha</th>\r\n          <th nzWidth=\"110px\">Header menu</th>\r\n          <th nzWidth=\"80px\">Hi\u1EC7u l\u1EF1c</th>\r\n          <th nzWidth=\"75px\" nzRight>Thao t\u00E1c</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.Name\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.ParentName\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th class=\"center\">\r\n            <extend-checkbox-3-value\r\n              [(_ngModel)]=\"filter.IsHeaderMenu\"\r\n              (_ngModelChange)=\"search()\"\r\n            ></extend-checkbox-3-value>\r\n          </th>\r\n          <th></th>\r\n          <th class=\"center\" nzRight>\r\n            <icon-add (click)=\"add()\"></icon-add>\r\n          </th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of table.data; track $index; let i = $index) {\r\n          @if (selectedMenu != row) {\r\n            <tr (click)=\"selectedMenu = row\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>{{ row.TreeNodeName }}</td>\r\n              <td>{{ row.Url }}</td>\r\n              <td>{{ row.Icon }}</td>\r\n              <td>{{ row.OrderValue }}</td>\r\n              <td>{{ row.ParentName }}</td>\r\n              <td class=\"center\">\r\n                @if (row.IsHeaderMenu) {\r\n                  <icon-check></icon-check>\r\n                }\r\n              </td>\r\n              <td class=\"center\">\r\n                @if (row.IsActive) {\r\n                  <icon-check></icon-check>\r\n                }\r\n              </td>\r\n              <td class=\"center\" nzRight>\r\n                <icon-edit (click)=\"edit(row)\"></icon-edit>\r\n                <box [width]=\"4\"></box>\r\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n              </td>\r\n            </tr>\r\n          } @else {\r\n            <tr (keyup.enter)=\"save()\" class=\"selected\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>\r\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Name\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Url\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Icon\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input-number [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.OrderValue\"></extend-input-number>\r\n              </td>\r\n              <td>\r\n                <nz-tree-select\r\n                  class=\"full-width\"\r\n                  [nzNodes]=\"treeMenu\"\r\n                  nzShowSearch\r\n                  nzPlaceHolder=\" \"\r\n                  [nzSize]=\"'small'\"\r\n                  [nzDropdownMatchSelectWidth]=\"false\"\r\n                  [(ngModel)]=\"selectedMenu.ParentId\"\r\n                ></nz-tree-select>\r\n              </td>\r\n              <td class=\"center\">\r\n                <extend-checkbox [(_ngModel)]=\"selectedMenu.IsHeaderMenu\"></extend-checkbox>\r\n              </td>\r\n              <td class=\"center\">\r\n                <extend-checkbox [(_ngModel)]=\"selectedMenu.IsActive\"></extend-checkbox>\r\n              </td>\r\n              <td class=\"center\">\r\n                <icon-save (click)=\"save()\"></icon-save>\r\n                <box [width]=\"4\"></box>\r\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n              </td>\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data?.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }] });
 
-const URLs$a = {
+const URLs$b = {
     getById: '/api/App_Role/GetById',
     getAll: '/api/App_Role/GetAll',
     getList: '/api/App_Role/GetList',
@@ -5195,23 +5346,23 @@ class RoleService extends HTTPService {
     commonService = inject(CommonService);
     getById(id) {
         let pr = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$a.getById, pr);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$b.getById, pr);
     }
     getAll() {
-        return this.post(AppGlobals.apiEndpoint + URLs$a.getAll);
+        return this.post(AppGlobals.apiEndpoint + URLs$b.getAll);
     }
     getList(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$a.getList, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$b.getList, filter);
     }
     getPaging(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$a.getPaging, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$b.getPaging, filter);
     }
     addOrEdit(obj) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$a.addOrEdit, obj);
+        return this.postData(AppGlobals.apiEndpoint + URLs$b.addOrEdit, obj);
     }
     delete(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$a.delete, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$b.delete, params);
     }
     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' });
@@ -5422,7 +5573,7 @@ class MenuDetailComponent extends BaseComponent {
         this.lstRoleMenu = [...this.lstRoleMenu.filter((x) => x != roleMenu)];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MenuDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: MenuDetailComponent, isStandalone: true, selector: "app-menu-detail", usesInheritance: true, ngImport: i0, template: "<form nz-form [formGroup]=\"formData\">\r\n  <!-- BUTTONS -->\r\n  <div nz-col [nzSpan]=\"24\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-save (click)=\"save()\"></button-save>\r\n      <button-delete *ngIf=\"formData.controls.App_Menu_Id.value\" (click)=\"delete()\"></button-delete>\r\n      <button-back (click)=\"goto('/admin/menu')\"></button-back>\r\n    </div>\r\n  </div>\r\n\r\n  <nz-divider></nz-divider>\r\n\r\n  <div nz-row [nzGutter]=\"['0', '16']\">\r\n    <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzLabelAlign=\"left\" nzNoColon=\"true\"> Menu cha </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\">\r\n          <!-- <nz-select #parentSelect nzShowSearch nzAllowClear formControlName=\"ParentId\">\r\n              @for (item of allMenu; track $index) {\r\n                <nz-option [nzLabel]=\"item.TreeNodeName\" [nzValue]=\"item.App_Menu_Id\"></nz-option>\r\n              }\r\n            </nz-select> -->\r\n          <nz-tree-select\r\n            class=\"full-width\"\r\n            [nzNodes]=\"treeMenu\"\r\n            nzShowSearch\r\n            nzPlaceHolder=\" \"\r\n            formControlName=\"ParentId\"\r\n          ></nz-tree-select>\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Name\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired> T\u00EAn </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n          <input nz-input formControlName=\"Name\" id=\"Name\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Url\" nzLabelAlign=\"left\" nzNoColon=\"true\"> URL </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n          <input nz-input formControlName=\"Url\" id=\"Url\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Icon\" nzLabelAlign=\"left\" nzNoColon=\"true\"> Icon </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n          <input nz-input formControlName=\"Icon\" id=\"Icon\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"OrderValue\" nzLabelAlign=\"left\" nzNoColon=\"true\">Order value</nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\">\r\n          <nz-input-number formControlName=\"OrderValue\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n      <div nz-row>\r\n        <div nz-col [nzSpan]=\"8\"></div>\r\n        <div nz-col [nzSpan]=\"16\">\r\n          <label nz-checkbox formControlName=\"IsActive\">Active</label>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- C\u1ED8T PH\u1EA2I: QU\u1EA2N L\u00DD ROLE -->\r\n    <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\r\n      <div style=\"border: 1px solid #d9d9d9; border-radius: 4px; padding: 16px; height: 100%; margin-left: 10px\">\r\n        <h4 style=\"margin-top: 0; margin-bottom: 16px\">\r\n          <span nz-icon nzType=\"team\" style=\"margin-right: 8px\"></span>\r\n          Qu\u1EA3n l\u00FD Role\r\n        </h4>\r\n\r\n        <!-- Hi\u1EC3n th\u1ECB khi \u0110ANG T\u1EA0O M\u1EDAI (ch\u01B0a c\u00F3 App_Menu_Id) -->\r\n        <nz-alert\r\n          *ngIf=\"!formData.controls.App_Menu_Id.value\"\r\n          nzType=\"info\"\r\n          nzMessage=\"Vui l\u00F2ng l\u01B0u Menu tr\u01B0\u1EDBc\"\r\n          nzDescription=\"B\u1EA1n c\u1EA7n l\u01B0u Menu tr\u01B0\u1EDBc, sau \u0111\u00F3 m\u1EDBi c\u00F3 th\u1EC3 th\u00EAm Role.\"\r\n          nzShowIcon\r\n        ></nz-alert>\r\n\r\n        <!-- Hi\u1EC3n th\u1ECB khi \u0110ANG C\u1EACP NH\u1EACT (\u0111\u00E3 c\u00F3 App_Menu_Id) -->\r\n        <div *ngIf=\"formData.controls.App_Menu_Id.value\">\r\n          <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n            <span style=\"font-weight: 500\">Roles ({{ lstRoleMenu.length }})</span>\r\n            <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddRoleModal()\">\r\n              <span nz-icon nzType=\"plus\"></span>\r\n              Th\u00EAm\r\n            </button>\r\n          </div>\r\n\r\n          <div style=\"max-height: 400px; overflow-y: auto\">\r\n            <nz-table\r\n              #roleTable\r\n              [nzData]=\"lstRoleMenu\"\r\n              [nzSize]=\"'small'\"\r\n              [nzShowPagination]=\"false\"\r\n              [nzLoading]=\"isLoadingRoles\"\r\n            >\r\n              <thead>\r\n                <tr>\r\n                  <th nzWidth=\"40px\">STT</th>\r\n                  <th>Role</th>\r\n                  <th nzWidth=\"50px\" nzAlign=\"center\" nz-tooltip nzTooltipTitle=\"Xem\">\r\n                    <span nz-icon nzType=\"eye\" nzTheme=\"outline\"></span>\r\n                  </th>\r\n                  <th nzWidth=\"50px\" nzAlign=\"center\" nz-tooltip nzTooltipTitle=\"S\u1EEDa\">\r\n                    <span nz-icon nzType=\"edit\" nzTheme=\"outline\"></span>\r\n                  </th>\r\n                  <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n                </tr>\r\n              </thead>\r\n              <tbody>\r\n                <tr *ngFor=\"let item of roleTable.data; let i = index\">\r\n                  <td>{{ i + 1 }}</td>\r\n                  <td>\r\n                    <div style=\"font-weight: 500\">{{ item.RoleName }}</div>\r\n                    <div style=\"font-size: 12px; color: #888\">{{ item.RoleCode }}</div>\r\n                  </td>\r\n                  <td nzAlign=\"center\">\r\n                    <label nz-checkbox [(ngModel)]=\"item.HasViewPermission\" [ngModelOptions]=\"{ standalone: true }\">\r\n                    </label>\r\n                  </td>\r\n                  <td nzAlign=\"center\">\r\n                    <label nz-checkbox [(ngModel)]=\"item.HasEditPermission\" [ngModelOptions]=\"{ standalone: true }\">\r\n                    </label>\r\n                  </td>\r\n                  <td nzAlign=\"center\">\r\n                    <icon-delete (click)=\"deleteRoleFromMenu(item)\"></icon-delete>\r\n                  </td>\r\n                </tr>\r\n              </tbody>\r\n            </nz-table>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</form>\r\n\r\n<!-- Modal ch\u1ECDn Role -->\r\n<nz-modal\r\n  [(nzVisible)]=\"isAddRoleModalVisible\"\r\n  nzTitle=\"Th\u00EAm Role v\u00E0o Menu\"\r\n  [nzWidth]=\"700\"\r\n  (nzOnCancel)=\"closeAddRoleModal()\"\r\n  (nzOnOk)=\"addRolesToMenu()\"\r\n  nzOkText=\"Th\u00EAm\"\r\n  nzCancelText=\"H\u1EE7y\"\r\n>\r\n  <ng-container *nzModalContent>\r\n    <!-- Search box -->\r\n    <nz-input-group [nzPrefix]=\"prefixIconSearch\" style=\"margin-bottom: 16px\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        placeholder=\"T\u00ECm ki\u1EBFm Role...\"\r\n        [(ngModel)]=\"searchRoleText\"\r\n        (ngModelChange)=\"filterAvailableRoles()\"\r\n      />\r\n    </nz-input-group>\r\n    <ng-template #prefixIconSearch>\r\n      <span nz-icon nzType=\"search\"></span>\r\n    </ng-template>\r\n\r\n    <nz-table\r\n      #addRoleTable\r\n      [nzData]=\"lstFilteredRole\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"true\"\r\n      [nzPageSize]=\"10\"\r\n      [nzLoading]=\"isLoadingAvailableRoles\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th\r\n            nzWidth=\"60px\"\r\n            nzShowCheckbox\r\n            [(nzChecked)]=\"isAllRoleChecked\"\r\n            (nzCheckedChange)=\"onAllRoleChecked($event)\"\r\n            [nzIndeterminate]=\"isRoleIndeterminate\"\r\n          ></th>\r\n          <th nzWidth=\"150px\">M\u00E3 Role</th>\r\n          <th>T\u00EAn Role</th>\r\n          <th>M\u00F4 t\u1EA3</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let item of addRoleTable.data\">\r\n          <td nz-flex nzJustify=\"center\">\r\n            <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onRoleChecked(item, $event)\"></label>\r\n          </td>\r\n          <td>{{ item.Code }}</td>\r\n          <td>{{ item.Name }}</td>\r\n          <td>{{ item.Description }}</td>\r\n        </tr>\r\n      </tbody>\r\n    </nz-table>\r\n  </ng-container>\r\n</nz-modal>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$3.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i4.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i2$1.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "directive", type: i5.NzFormDirective, selector: "[nz-form]", inputs: ["nzLayout", "nzNoColon", "nzAutoTips", "nzDisableAutoTips", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzForm"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzSpinModule }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i5$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i5$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i5$1.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { 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"] }, { kind: "ngmodule", type: NzCheckboxModule }, { kind: "component", type: i3$1.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId", "nzName"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "ngmodule", type: NzTreeSelectModule }, { kind: "component", type: i3$4.NzTreeSelectComponent, selector: "nz-tree-select", inputs: ["nzId", "nzAllowClear", "nzShowExpand", "nzShowLine", "nzDropdownMatchSelectWidth", "nzCheckable", "nzHideUnMatched", "nzShowIcon", "nzShowSearch", "nzDisabled", "nzAsyncData", "nzMultiple", "nzDefaultExpandAll", "nzCheckStrictly", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualHeight", "nzExpandedIcon", "nzNotFoundContent", "nzNodes", "nzOpen", "nzSize", "nzPlaceHolder", "nzDropdownStyle", "nzDropdownClassName", "nzBackdrop", "nzStatus", "nzPlacement", "nzExpandedKeys", "nzDisplayWith", "nzMaxTagCount", "nzMaxTagPlaceholder", "nzTreeTemplate"], outputs: ["nzOpenChange", "nzCleared", "nzRemoved", "nzExpandChange", "nzTreeClick", "nzTreeCheckboxChange"], exportAs: ["nzTreeSelect"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$2.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "directive", type: i6$2.NzCellAlignDirective, selector: "th[nzAlign],td[nzAlign]", inputs: ["nzAlign"] }, { kind: "component", type: i6$2.NzThSelectionComponent, selector: "th[nzSelections],th[nzChecked],th[nzShowCheckbox],th[nzShowRowSelection]", inputs: ["nzSelections", "nzChecked", "nzDisabled", "nzIndeterminate", "nzLabel", "nzShowCheckbox", "nzShowRowSelection"], outputs: ["nzCheckedChange"] }, { kind: "ngmodule", type: NzModalModule }, { kind: "component", type: i15.NzModalComponent, selector: "nz-modal", inputs: ["nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzDraggable", "nzContent", "nzFooter", "nzZIndex", "nzWidth", "nzWrapClassName", "nzClassName", "nzStyle", "nzTitle", "nzCloseIcon", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { kind: "directive", type: i15.NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { kind: "ngmodule", type: NzPopconfirmModule }, { kind: "ngmodule", type: NzEmptyModule }, { kind: "ngmodule", type: NzAlertModule }, { kind: "component", type: i16.NzAlertComponent, selector: "nz-alert", inputs: ["nzAction", "nzCloseText", "nzIconType", "nzMessage", "nzDescription", "nzType", "nzCloseable", "nzShowIcon", "nzBanner", "nzNoAnimation", "nzIcon"], outputs: ["nzOnClose"], exportAs: ["nzAlert"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzDividerModule }, { kind: "component", type: i8$1.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }, { kind: "component", type: ButtonDelete, selector: "button-delete" }, { kind: "component", type: ButtonSave, selector: "button-save" }, { kind: "component", type: ButtonBack, selector: "button-back" }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: MenuDetailComponent, isStandalone: true, selector: "app-menu-detail", usesInheritance: true, ngImport: i0, template: "<form nz-form [formGroup]=\"formData\">\r\n  <!-- BUTTONS -->\r\n  <div nz-col [nzSpan]=\"24\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-save (click)=\"save()\"></button-save>\r\n      <button-delete *ngIf=\"formData.controls.App_Menu_Id.value\" (click)=\"delete()\"></button-delete>\r\n      <button-back (click)=\"goto('/admin/menu')\"></button-back>\r\n    </div>\r\n  </div>\r\n\r\n  <nz-divider></nz-divider>\r\n\r\n  <div nz-row [nzGutter]=\"['0', '16']\">\r\n    <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzLabelAlign=\"left\" nzNoColon=\"true\"> Menu cha </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\">\r\n          <nz-tree-select\r\n            class=\"full-width\"\r\n            [nzNodes]=\"treeMenu\"\r\n            nzShowSearch\r\n            nzPlaceHolder=\" \"\r\n            formControlName=\"ParentId\"\r\n          ></nz-tree-select>\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Name\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired> T\u00EAn </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n          <input nz-input formControlName=\"Name\" id=\"Name\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Url\" nzLabelAlign=\"left\" nzNoColon=\"true\"> URL </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n          <input nz-input formControlName=\"Url\" id=\"Url\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Icon\" nzLabelAlign=\"left\" nzNoColon=\"true\"> Icon </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n          <input nz-input formControlName=\"Icon\" id=\"Icon\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"OrderValue\" nzLabelAlign=\"left\" nzNoColon=\"true\">Order value</nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\">\r\n          <nz-input-number formControlName=\"OrderValue\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n      <div nz-row>\r\n        <div nz-col [nzSpan]=\"8\"></div>\r\n        <div nz-col [nzSpan]=\"16\">\r\n          <label nz-checkbox formControlName=\"IsActive\">Active</label>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- C\u1ED8T PH\u1EA2I: QU\u1EA2N L\u00DD ROLE -->\r\n    <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\r\n      <div style=\"border: 1px solid #d9d9d9; border-radius: 4px; padding: 16px; height: 100%; margin-left: 10px\">\r\n        <h4 style=\"margin-top: 0; margin-bottom: 16px\">\r\n          <span nz-icon nzType=\"team\" style=\"margin-right: 8px\"></span>\r\n          Qu\u1EA3n l\u00FD Role\r\n        </h4>\r\n\r\n        <nz-alert\r\n          *ngIf=\"!formData.controls.App_Menu_Id.value\"\r\n          nzType=\"info\"\r\n          nzMessage=\"Vui l\u00F2ng l\u01B0u Menu tr\u01B0\u1EDBc\"\r\n          nzDescription=\"B\u1EA1n c\u1EA7n l\u01B0u Menu tr\u01B0\u1EDBc, sau \u0111\u00F3 m\u1EDBi c\u00F3 th\u1EC3 th\u00EAm Role.\"\r\n          nzShowIcon\r\n        ></nz-alert>\r\n\r\n        <div *ngIf=\"formData.controls.App_Menu_Id.value\">\r\n          <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n            <span style=\"font-weight: 500\">Roles ({{ lstRoleMenu.length }})</span>\r\n            <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddRoleModal()\">\r\n              <span nz-icon nzType=\"plus\"></span>\r\n              Th\u00EAm\r\n            </button>\r\n          </div>\r\n\r\n          <div style=\"max-height: 400px; overflow-y: auto\">\r\n            <nz-table\r\n              #roleTable\r\n              [nzData]=\"lstRoleMenu\"\r\n              [nzSize]=\"'small'\"\r\n              [nzShowPagination]=\"false\"\r\n              [nzLoading]=\"isLoadingRoles\"\r\n            >\r\n              <thead>\r\n                <tr>\r\n                  <th nzWidth=\"40px\">STT</th>\r\n                  <th>Role</th>\r\n                  <th nzWidth=\"50px\" nzAlign=\"center\" nz-tooltip nzTooltipTitle=\"Xem\">C</th>\r\n                  <th nzWidth=\"50px\" nzAlign=\"center\" nz-tooltip nzTooltipTitle=\"S\u1EEDa\">U</th>\r\n                  <th nzWidth=\"50px\" nzAlign=\"center\" nz-tooltip nzTooltipTitle=\"S\u1EEDa\">D</th>\r\n                  <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n                </tr>\r\n              </thead>\r\n              <tbody>\r\n                <tr *ngFor=\"let item of roleTable.data; let i = index\">\r\n                  <td>{{ i + 1 }}</td>\r\n                  <td>\r\n                    <div style=\"font-weight: 500\">{{ item.RoleName }}</div>\r\n                    <div style=\"font-size: 12px; color: #888\">{{ item.RoleCode }}</div>\r\n                  </td>\r\n                  <td nzAlign=\"center\">\r\n                    <label nz-checkbox [(ngModel)]=\"item.CanCreate\" [ngModelOptions]=\"{ standalone: true }\"> </label>\r\n                  </td>\r\n                  <td nzAlign=\"center\">\r\n                    <label nz-checkbox [(ngModel)]=\"item.CanUpdate\" [ngModelOptions]=\"{ standalone: true }\"> </label>\r\n                  </td>\r\n                  <td nzAlign=\"center\">\r\n                    <label nz-checkbox [(ngModel)]=\"item.CanDelete\" [ngModelOptions]=\"{ standalone: true }\"> </label>\r\n                  </td>\r\n                  <td nzAlign=\"center\">\r\n                    <icon-delete (click)=\"deleteRoleFromMenu(item)\"></icon-delete>\r\n                  </td>\r\n                </tr>\r\n              </tbody>\r\n            </nz-table>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</form>\r\n\r\n<!-- Modal ch\u1ECDn Role -->\r\n<nz-modal\r\n  [(nzVisible)]=\"isAddRoleModalVisible\"\r\n  nzTitle=\"Th\u00EAm Role v\u00E0o Menu\"\r\n  [nzWidth]=\"700\"\r\n  (nzOnCancel)=\"closeAddRoleModal()\"\r\n  (nzOnOk)=\"addRolesToMenu()\"\r\n  nzOkText=\"Th\u00EAm\"\r\n  nzCancelText=\"H\u1EE7y\"\r\n>\r\n  <ng-container *nzModalContent>\r\n    <!-- Search box -->\r\n    <nz-input-group [nzPrefix]=\"prefixIconSearch\" style=\"margin-bottom: 16px\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        placeholder=\"T\u00ECm ki\u1EBFm Role...\"\r\n        [(ngModel)]=\"searchRoleText\"\r\n        (ngModelChange)=\"filterAvailableRoles()\"\r\n      />\r\n    </nz-input-group>\r\n    <ng-template #prefixIconSearch>\r\n      <span nz-icon nzType=\"search\"></span>\r\n    </ng-template>\r\n\r\n    <nz-table\r\n      #addRoleTable\r\n      [nzData]=\"lstFilteredRole\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"true\"\r\n      [nzPageSize]=\"10\"\r\n      [nzLoading]=\"isLoadingAvailableRoles\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th\r\n            nzWidth=\"60px\"\r\n            nzShowCheckbox\r\n            [(nzChecked)]=\"isAllRoleChecked\"\r\n            (nzCheckedChange)=\"onAllRoleChecked($event)\"\r\n            [nzIndeterminate]=\"isRoleIndeterminate\"\r\n          ></th>\r\n          <th nzWidth=\"150px\">M\u00E3 Role</th>\r\n          <th>T\u00EAn Role</th>\r\n          <th>M\u00F4 t\u1EA3</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let item of addRoleTable.data\">\r\n          <td nz-flex nzJustify=\"center\">\r\n            <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onRoleChecked(item, $event)\"></label>\r\n          </td>\r\n          <td>{{ item.Code }}</td>\r\n          <td>{{ item.Name }}</td>\r\n          <td>{{ item.Description }}</td>\r\n        </tr>\r\n      </tbody>\r\n    </nz-table>\r\n  </ng-container>\r\n</nz-modal>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$3.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i4.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i2$1.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "directive", type: i5.NzFormDirective, selector: "[nz-form]", inputs: ["nzLayout", "nzNoColon", "nzAutoTips", "nzDisableAutoTips", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzForm"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzSpinModule }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i5$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i5$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i5$1.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { 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"] }, { kind: "ngmodule", type: NzCheckboxModule }, { kind: "component", type: i3$1.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId", "nzName"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "ngmodule", type: NzTreeSelectModule }, { kind: "component", type: i3$4.NzTreeSelectComponent, selector: "nz-tree-select", inputs: ["nzId", "nzAllowClear", "nzShowExpand", "nzShowLine", "nzDropdownMatchSelectWidth", "nzCheckable", "nzHideUnMatched", "nzShowIcon", "nzShowSearch", "nzDisabled", "nzAsyncData", "nzMultiple", "nzDefaultExpandAll", "nzCheckStrictly", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualHeight", "nzExpandedIcon", "nzNotFoundContent", "nzNodes", "nzOpen", "nzSize", "nzPlaceHolder", "nzDropdownStyle", "nzDropdownClassName", "nzBackdrop", "nzStatus", "nzPlacement", "nzExpandedKeys", "nzDisplayWith", "nzMaxTagCount", "nzMaxTagPlaceholder", "nzTreeTemplate"], outputs: ["nzOpenChange", "nzCleared", "nzRemoved", "nzExpandChange", "nzTreeClick", "nzTreeCheckboxChange"], exportAs: ["nzTreeSelect"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$2.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "directive", type: i6$2.NzCellAlignDirective, selector: "th[nzAlign],td[nzAlign]", inputs: ["nzAlign"] }, { kind: "component", type: i6$2.NzThSelectionComponent, selector: "th[nzSelections],th[nzChecked],th[nzShowCheckbox],th[nzShowRowSelection]", inputs: ["nzSelections", "nzChecked", "nzDisabled", "nzIndeterminate", "nzLabel", "nzShowCheckbox", "nzShowRowSelection"], outputs: ["nzCheckedChange"] }, { kind: "ngmodule", type: NzModalModule }, { kind: "component", type: i15.NzModalComponent, selector: "nz-modal", inputs: ["nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzDraggable", "nzContent", "nzFooter", "nzZIndex", "nzWidth", "nzWrapClassName", "nzClassName", "nzStyle", "nzTitle", "nzCloseIcon", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { kind: "directive", type: i15.NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { kind: "ngmodule", type: NzPopconfirmModule }, { kind: "ngmodule", type: NzEmptyModule }, { kind: "ngmodule", type: NzAlertModule }, { kind: "component", type: i16.NzAlertComponent, selector: "nz-alert", inputs: ["nzAction", "nzCloseText", "nzIconType", "nzMessage", "nzDescription", "nzType", "nzCloseable", "nzShowIcon", "nzBanner", "nzNoAnimation", "nzIcon"], outputs: ["nzOnClose"], exportAs: ["nzAlert"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzDividerModule }, { kind: "component", type: i8$1.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }, { kind: "component", type: ButtonDelete, selector: "button-delete" }, { kind: "component", type: ButtonSave, selector: "button-save" }, { kind: "component", type: ButtonBack, selector: "button-back" }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MenuDetailComponent, decorators: [{
             type: Component,
@@ -5452,10 +5603,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         ButtonSave,
                         ButtonBack,
                         IconDelete,
-                    ], template: "<form nz-form [formGroup]=\"formData\">\r\n  <!-- BUTTONS -->\r\n  <div nz-col [nzSpan]=\"24\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-save (click)=\"save()\"></button-save>\r\n      <button-delete *ngIf=\"formData.controls.App_Menu_Id.value\" (click)=\"delete()\"></button-delete>\r\n      <button-back (click)=\"goto('/admin/menu')\"></button-back>\r\n    </div>\r\n  </div>\r\n\r\n  <nz-divider></nz-divider>\r\n\r\n  <div nz-row [nzGutter]=\"['0', '16']\">\r\n    <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzLabelAlign=\"left\" nzNoColon=\"true\"> Menu cha </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\">\r\n          <!-- <nz-select #parentSelect nzShowSearch nzAllowClear formControlName=\"ParentId\">\r\n              @for (item of allMenu; track $index) {\r\n                <nz-option [nzLabel]=\"item.TreeNodeName\" [nzValue]=\"item.App_Menu_Id\"></nz-option>\r\n              }\r\n            </nz-select> -->\r\n          <nz-tree-select\r\n            class=\"full-width\"\r\n            [nzNodes]=\"treeMenu\"\r\n            nzShowSearch\r\n            nzPlaceHolder=\" \"\r\n            formControlName=\"ParentId\"\r\n          ></nz-tree-select>\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Name\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired> T\u00EAn </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n          <input nz-input formControlName=\"Name\" id=\"Name\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Url\" nzLabelAlign=\"left\" nzNoColon=\"true\"> URL </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n          <input nz-input formControlName=\"Url\" id=\"Url\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Icon\" nzLabelAlign=\"left\" nzNoColon=\"true\"> Icon </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n          <input nz-input formControlName=\"Icon\" id=\"Icon\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"OrderValue\" nzLabelAlign=\"left\" nzNoColon=\"true\">Order value</nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\">\r\n          <nz-input-number formControlName=\"OrderValue\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n      <div nz-row>\r\n        <div nz-col [nzSpan]=\"8\"></div>\r\n        <div nz-col [nzSpan]=\"16\">\r\n          <label nz-checkbox formControlName=\"IsActive\">Active</label>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- C\u1ED8T PH\u1EA2I: QU\u1EA2N L\u00DD ROLE -->\r\n    <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\r\n      <div style=\"border: 1px solid #d9d9d9; border-radius: 4px; padding: 16px; height: 100%; margin-left: 10px\">\r\n        <h4 style=\"margin-top: 0; margin-bottom: 16px\">\r\n          <span nz-icon nzType=\"team\" style=\"margin-right: 8px\"></span>\r\n          Qu\u1EA3n l\u00FD Role\r\n        </h4>\r\n\r\n        <!-- Hi\u1EC3n th\u1ECB khi \u0110ANG T\u1EA0O M\u1EDAI (ch\u01B0a c\u00F3 App_Menu_Id) -->\r\n        <nz-alert\r\n          *ngIf=\"!formData.controls.App_Menu_Id.value\"\r\n          nzType=\"info\"\r\n          nzMessage=\"Vui l\u00F2ng l\u01B0u Menu tr\u01B0\u1EDBc\"\r\n          nzDescription=\"B\u1EA1n c\u1EA7n l\u01B0u Menu tr\u01B0\u1EDBc, sau \u0111\u00F3 m\u1EDBi c\u00F3 th\u1EC3 th\u00EAm Role.\"\r\n          nzShowIcon\r\n        ></nz-alert>\r\n\r\n        <!-- Hi\u1EC3n th\u1ECB khi \u0110ANG C\u1EACP NH\u1EACT (\u0111\u00E3 c\u00F3 App_Menu_Id) -->\r\n        <div *ngIf=\"formData.controls.App_Menu_Id.value\">\r\n          <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n            <span style=\"font-weight: 500\">Roles ({{ lstRoleMenu.length }})</span>\r\n            <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddRoleModal()\">\r\n              <span nz-icon nzType=\"plus\"></span>\r\n              Th\u00EAm\r\n            </button>\r\n          </div>\r\n\r\n          <div style=\"max-height: 400px; overflow-y: auto\">\r\n            <nz-table\r\n              #roleTable\r\n              [nzData]=\"lstRoleMenu\"\r\n              [nzSize]=\"'small'\"\r\n              [nzShowPagination]=\"false\"\r\n              [nzLoading]=\"isLoadingRoles\"\r\n            >\r\n              <thead>\r\n                <tr>\r\n                  <th nzWidth=\"40px\">STT</th>\r\n                  <th>Role</th>\r\n                  <th nzWidth=\"50px\" nzAlign=\"center\" nz-tooltip nzTooltipTitle=\"Xem\">\r\n                    <span nz-icon nzType=\"eye\" nzTheme=\"outline\"></span>\r\n                  </th>\r\n                  <th nzWidth=\"50px\" nzAlign=\"center\" nz-tooltip nzTooltipTitle=\"S\u1EEDa\">\r\n                    <span nz-icon nzType=\"edit\" nzTheme=\"outline\"></span>\r\n                  </th>\r\n                  <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n                </tr>\r\n              </thead>\r\n              <tbody>\r\n                <tr *ngFor=\"let item of roleTable.data; let i = index\">\r\n                  <td>{{ i + 1 }}</td>\r\n                  <td>\r\n                    <div style=\"font-weight: 500\">{{ item.RoleName }}</div>\r\n                    <div style=\"font-size: 12px; color: #888\">{{ item.RoleCode }}</div>\r\n                  </td>\r\n                  <td nzAlign=\"center\">\r\n                    <label nz-checkbox [(ngModel)]=\"item.HasViewPermission\" [ngModelOptions]=\"{ standalone: true }\">\r\n                    </label>\r\n                  </td>\r\n                  <td nzAlign=\"center\">\r\n                    <label nz-checkbox [(ngModel)]=\"item.HasEditPermission\" [ngModelOptions]=\"{ standalone: true }\">\r\n                    </label>\r\n                  </td>\r\n                  <td nzAlign=\"center\">\r\n                    <icon-delete (click)=\"deleteRoleFromMenu(item)\"></icon-delete>\r\n                  </td>\r\n                </tr>\r\n              </tbody>\r\n            </nz-table>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</form>\r\n\r\n<!-- Modal ch\u1ECDn Role -->\r\n<nz-modal\r\n  [(nzVisible)]=\"isAddRoleModalVisible\"\r\n  nzTitle=\"Th\u00EAm Role v\u00E0o Menu\"\r\n  [nzWidth]=\"700\"\r\n  (nzOnCancel)=\"closeAddRoleModal()\"\r\n  (nzOnOk)=\"addRolesToMenu()\"\r\n  nzOkText=\"Th\u00EAm\"\r\n  nzCancelText=\"H\u1EE7y\"\r\n>\r\n  <ng-container *nzModalContent>\r\n    <!-- Search box -->\r\n    <nz-input-group [nzPrefix]=\"prefixIconSearch\" style=\"margin-bottom: 16px\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        placeholder=\"T\u00ECm ki\u1EBFm Role...\"\r\n        [(ngModel)]=\"searchRoleText\"\r\n        (ngModelChange)=\"filterAvailableRoles()\"\r\n      />\r\n    </nz-input-group>\r\n    <ng-template #prefixIconSearch>\r\n      <span nz-icon nzType=\"search\"></span>\r\n    </ng-template>\r\n\r\n    <nz-table\r\n      #addRoleTable\r\n      [nzData]=\"lstFilteredRole\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"true\"\r\n      [nzPageSize]=\"10\"\r\n      [nzLoading]=\"isLoadingAvailableRoles\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th\r\n            nzWidth=\"60px\"\r\n            nzShowCheckbox\r\n            [(nzChecked)]=\"isAllRoleChecked\"\r\n            (nzCheckedChange)=\"onAllRoleChecked($event)\"\r\n            [nzIndeterminate]=\"isRoleIndeterminate\"\r\n          ></th>\r\n          <th nzWidth=\"150px\">M\u00E3 Role</th>\r\n          <th>T\u00EAn Role</th>\r\n          <th>M\u00F4 t\u1EA3</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let item of addRoleTable.data\">\r\n          <td nz-flex nzJustify=\"center\">\r\n            <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onRoleChecked(item, $event)\"></label>\r\n          </td>\r\n          <td>{{ item.Code }}</td>\r\n          <td>{{ item.Name }}</td>\r\n          <td>{{ item.Description }}</td>\r\n        </tr>\r\n      </tbody>\r\n    </nz-table>\r\n  </ng-container>\r\n</nz-modal>\r\n" }]
+                    ], template: "<form nz-form [formGroup]=\"formData\">\r\n  <!-- BUTTONS -->\r\n  <div nz-col [nzSpan]=\"24\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-save (click)=\"save()\"></button-save>\r\n      <button-delete *ngIf=\"formData.controls.App_Menu_Id.value\" (click)=\"delete()\"></button-delete>\r\n      <button-back (click)=\"goto('/admin/menu')\"></button-back>\r\n    </div>\r\n  </div>\r\n\r\n  <nz-divider></nz-divider>\r\n\r\n  <div nz-row [nzGutter]=\"['0', '16']\">\r\n    <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzLabelAlign=\"left\" nzNoColon=\"true\"> Menu cha </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\">\r\n          <nz-tree-select\r\n            class=\"full-width\"\r\n            [nzNodes]=\"treeMenu\"\r\n            nzShowSearch\r\n            nzPlaceHolder=\" \"\r\n            formControlName=\"ParentId\"\r\n          ></nz-tree-select>\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Name\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired> T\u00EAn </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n          <input nz-input formControlName=\"Name\" id=\"Name\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Url\" nzLabelAlign=\"left\" nzNoColon=\"true\"> URL </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n          <input nz-input formControlName=\"Url\" id=\"Url\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Icon\" nzLabelAlign=\"left\" nzNoColon=\"true\"> Icon </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n          <input nz-input formControlName=\"Icon\" id=\"Icon\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"OrderValue\" nzLabelAlign=\"left\" nzNoColon=\"true\">Order value</nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\">\r\n          <nz-input-number formControlName=\"OrderValue\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n      <div nz-row>\r\n        <div nz-col [nzSpan]=\"8\"></div>\r\n        <div nz-col [nzSpan]=\"16\">\r\n          <label nz-checkbox formControlName=\"IsActive\">Active</label>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- C\u1ED8T PH\u1EA2I: QU\u1EA2N L\u00DD ROLE -->\r\n    <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\r\n      <div style=\"border: 1px solid #d9d9d9; border-radius: 4px; padding: 16px; height: 100%; margin-left: 10px\">\r\n        <h4 style=\"margin-top: 0; margin-bottom: 16px\">\r\n          <span nz-icon nzType=\"team\" style=\"margin-right: 8px\"></span>\r\n          Qu\u1EA3n l\u00FD Role\r\n        </h4>\r\n\r\n        <nz-alert\r\n          *ngIf=\"!formData.controls.App_Menu_Id.value\"\r\n          nzType=\"info\"\r\n          nzMessage=\"Vui l\u00F2ng l\u01B0u Menu tr\u01B0\u1EDBc\"\r\n          nzDescription=\"B\u1EA1n c\u1EA7n l\u01B0u Menu tr\u01B0\u1EDBc, sau \u0111\u00F3 m\u1EDBi c\u00F3 th\u1EC3 th\u00EAm Role.\"\r\n          nzShowIcon\r\n        ></nz-alert>\r\n\r\n        <div *ngIf=\"formData.controls.App_Menu_Id.value\">\r\n          <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n            <span style=\"font-weight: 500\">Roles ({{ lstRoleMenu.length }})</span>\r\n            <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddRoleModal()\">\r\n              <span nz-icon nzType=\"plus\"></span>\r\n              Th\u00EAm\r\n            </button>\r\n          </div>\r\n\r\n          <div style=\"max-height: 400px; overflow-y: auto\">\r\n            <nz-table\r\n              #roleTable\r\n              [nzData]=\"lstRoleMenu\"\r\n              [nzSize]=\"'small'\"\r\n              [nzShowPagination]=\"false\"\r\n              [nzLoading]=\"isLoadingRoles\"\r\n            >\r\n              <thead>\r\n                <tr>\r\n                  <th nzWidth=\"40px\">STT</th>\r\n                  <th>Role</th>\r\n                  <th nzWidth=\"50px\" nzAlign=\"center\" nz-tooltip nzTooltipTitle=\"Xem\">C</th>\r\n                  <th nzWidth=\"50px\" nzAlign=\"center\" nz-tooltip nzTooltipTitle=\"S\u1EEDa\">U</th>\r\n                  <th nzWidth=\"50px\" nzAlign=\"center\" nz-tooltip nzTooltipTitle=\"S\u1EEDa\">D</th>\r\n                  <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n                </tr>\r\n              </thead>\r\n              <tbody>\r\n                <tr *ngFor=\"let item of roleTable.data; let i = index\">\r\n                  <td>{{ i + 1 }}</td>\r\n                  <td>\r\n                    <div style=\"font-weight: 500\">{{ item.RoleName }}</div>\r\n                    <div style=\"font-size: 12px; color: #888\">{{ item.RoleCode }}</div>\r\n                  </td>\r\n                  <td nzAlign=\"center\">\r\n                    <label nz-checkbox [(ngModel)]=\"item.CanCreate\" [ngModelOptions]=\"{ standalone: true }\"> </label>\r\n                  </td>\r\n                  <td nzAlign=\"center\">\r\n                    <label nz-checkbox [(ngModel)]=\"item.CanUpdate\" [ngModelOptions]=\"{ standalone: true }\"> </label>\r\n                  </td>\r\n                  <td nzAlign=\"center\">\r\n                    <label nz-checkbox [(ngModel)]=\"item.CanDelete\" [ngModelOptions]=\"{ standalone: true }\"> </label>\r\n                  </td>\r\n                  <td nzAlign=\"center\">\r\n                    <icon-delete (click)=\"deleteRoleFromMenu(item)\"></icon-delete>\r\n                  </td>\r\n                </tr>\r\n              </tbody>\r\n            </nz-table>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</form>\r\n\r\n<!-- Modal ch\u1ECDn Role -->\r\n<nz-modal\r\n  [(nzVisible)]=\"isAddRoleModalVisible\"\r\n  nzTitle=\"Th\u00EAm Role v\u00E0o Menu\"\r\n  [nzWidth]=\"700\"\r\n  (nzOnCancel)=\"closeAddRoleModal()\"\r\n  (nzOnOk)=\"addRolesToMenu()\"\r\n  nzOkText=\"Th\u00EAm\"\r\n  nzCancelText=\"H\u1EE7y\"\r\n>\r\n  <ng-container *nzModalContent>\r\n    <!-- Search box -->\r\n    <nz-input-group [nzPrefix]=\"prefixIconSearch\" style=\"margin-bottom: 16px\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        placeholder=\"T\u00ECm ki\u1EBFm Role...\"\r\n        [(ngModel)]=\"searchRoleText\"\r\n        (ngModelChange)=\"filterAvailableRoles()\"\r\n      />\r\n    </nz-input-group>\r\n    <ng-template #prefixIconSearch>\r\n      <span nz-icon nzType=\"search\"></span>\r\n    </ng-template>\r\n\r\n    <nz-table\r\n      #addRoleTable\r\n      [nzData]=\"lstFilteredRole\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"true\"\r\n      [nzPageSize]=\"10\"\r\n      [nzLoading]=\"isLoadingAvailableRoles\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th\r\n            nzWidth=\"60px\"\r\n            nzShowCheckbox\r\n            [(nzChecked)]=\"isAllRoleChecked\"\r\n            (nzCheckedChange)=\"onAllRoleChecked($event)\"\r\n            [nzIndeterminate]=\"isRoleIndeterminate\"\r\n          ></th>\r\n          <th nzWidth=\"150px\">M\u00E3 Role</th>\r\n          <th>T\u00EAn Role</th>\r\n          <th>M\u00F4 t\u1EA3</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let item of addRoleTable.data\">\r\n          <td nz-flex nzJustify=\"center\">\r\n            <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onRoleChecked(item, $event)\"></label>\r\n          </td>\r\n          <td>{{ item.Code }}</td>\r\n          <td>{{ item.Name }}</td>\r\n          <td>{{ item.Description }}</td>\r\n        </tr>\r\n      </tbody>\r\n    </nz-table>\r\n  </ng-container>\r\n</nz-modal>\r\n" }]
         }] });
 
-const URLs$9 = {
+const URLs$a = {
     getById: '/api/App_Org/GetById',
     getAll: '/api/App_Org/GetAll',
     getList: '/api/App_Org/GetList',
@@ -5467,23 +5618,23 @@ class OrgService extends HTTPService {
     cms = inject(CommonService);
     getById(id) {
         let pr = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$9.getById, pr);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$a.getById, pr);
     }
     getAll() {
-        return this.post(AppGlobals.apiEndpoint + URLs$9.getAll);
+        return this.post(AppGlobals.apiEndpoint + URLs$a.getAll);
     }
     getList(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$9.getList, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$a.getList, filter);
     }
     getPaging(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$9.getPaging, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$a.getPaging, filter);
     }
     addOrEdit(obj) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$9.addOrEdit, obj);
+        return this.postData(AppGlobals.apiEndpoint + URLs$a.addOrEdit, obj);
     }
     delete(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$9.delete, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$a.delete, params);
     }
     getAllForLogin(UserName) {
         const params = new HttpParams().append('UserName', UserName);
@@ -5531,6 +5682,11 @@ class OrgFilter extends GridFilter {
     Code;
     Name;
     ParentName;
+    constructor() {
+        super();
+        this.OrderOption.FieldName = 'Code';
+        this.OrderOption.Direction = 'ascend';
+    }
 }
 
 class OrgListComponent extends BaseComponent {
@@ -5592,7 +5748,7 @@ class OrgListComponent extends BaseComponent {
         this.getData();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: OrgListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: OrgListComponent, isStandalone: true, selector: "app-org-list", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-add (click)=\"edit(null)\"></button-add>\r\n      <button-search (click)=\"search()\"></button-search>\r\n    </div>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzFrontPagination]=\"false\"\r\n    >\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th>M\u00E3</th>\r\n          <th>T\u00EAn</th>\r\n          <th>T\u00EAn \u0111\u01A1n v\u1ECB cha</th>\r\n          <th>Th\u1EE9 t\u1EF1</th>\r\n          <th>Hi\u1EC7u l\u1EF1c</th>\r\n          <th nzWidth=\"75px\">Thao t\u00E1c</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.Code\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.Name\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [(_ngModel)]=\"filter.ParentName\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of table.data; track $index; let i = $index) {\r\n          <tr>\r\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n            <td class=\"link-detail\" (click)=\"edit(row)\">{{ row.Code }}</td>\r\n            <td>{{ row.Name }}</td>\r\n            <td>{{ row.ParentName }}</td>\r\n            <td>{{ row.OrderValue }}</td>\r\n            <td class=\"center\">\r\n              @if (row.IsActive) {\r\n                <icon-check></icon-check>\r\n              }\r\n            </td>\r\n            <td nz-flex nzGap=\"small\" nzJustify=\"center\">\r\n              <icon-edit (click)=\"edit(row)\"></icon-edit>\r\n              <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n\r\n  <div nz-col [nzSpan]=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "component", type: ButtonAdd, selector: "button-add" }, { kind: "component", type: ButtonSearch, selector: "button-search" }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$2.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i5$3.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "component", type: IconEdit, selector: "icon-edit", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconCheck, selector: "icon-check", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: OrgListComponent, isStandalone: true, selector: "app-org-list", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-add (click)=\"edit(null)\"></button-add>\r\n      <button-search (click)=\"search()\"></button-search>\r\n    </div>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th nzWidth=\"200px\">M\u00E3</th>\r\n          <th>T\u00EAn</th>\r\n          <th nzWidth=\"250px\">T\u00EAn \u0111\u01A1n v\u1ECB cha</th>\r\n          <th nzWidth=\"75px\">Th\u1EE9 t\u1EF1</th>\r\n          <th nzWidth=\"75px\">Hi\u1EC7u l\u1EF1c</th>\r\n          <th nzWidth=\"75px\" nzRight>Thao t\u00E1c</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.Code\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.Name\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [(_ngModel)]=\"filter.ParentName\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th nzRight></th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of table.data; track $index; let i = $index) {\r\n          <tr>\r\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n            <td class=\"link-detail\" (click)=\"edit(row)\">{{ row.Code }}</td>\r\n            <td>{{ row.Name }}</td>\r\n            <td>{{ row.ParentName }}</td>\r\n            <td>{{ row.OrderValue }}</td>\r\n            <td class=\"center\">\r\n              @if (row.IsActive) {\r\n                <icon-check></icon-check>\r\n              }\r\n            </td>\r\n            <td class=\"center\" nzRight>\r\n              <icon-edit (click)=\"edit(row)\"></icon-edit><box [width]=\"4\"></box>\r\n              <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n\r\n  <div nz-col [nzSpan]=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "component", type: ButtonAdd, selector: "button-add" }, { kind: "component", type: ButtonSearch, selector: "button-search" }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$2.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "directive", type: i6$2.NzCellFixedDirective, selector: "td[nzRight],th[nzRight],td[nzLeft],th[nzLeft]", inputs: ["nzRight", "nzLeft", "colspan", "colSpan"] }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i5$3.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "component", type: IconEdit, selector: "icon-edit", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconCheck, selector: "icon-check", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: OrgListComponent, decorators: [{
             type: Component,
@@ -5608,10 +5764,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         IconDelete,
                         IconCheck,
                         ExtendInput,
-                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-add (click)=\"edit(null)\"></button-add>\r\n      <button-search (click)=\"search()\"></button-search>\r\n    </div>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzFrontPagination]=\"false\"\r\n    >\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th>M\u00E3</th>\r\n          <th>T\u00EAn</th>\r\n          <th>T\u00EAn \u0111\u01A1n v\u1ECB cha</th>\r\n          <th>Th\u1EE9 t\u1EF1</th>\r\n          <th>Hi\u1EC7u l\u1EF1c</th>\r\n          <th nzWidth=\"75px\">Thao t\u00E1c</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.Code\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.Name\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [(_ngModel)]=\"filter.ParentName\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of table.data; track $index; let i = $index) {\r\n          <tr>\r\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n            <td class=\"link-detail\" (click)=\"edit(row)\">{{ row.Code }}</td>\r\n            <td>{{ row.Name }}</td>\r\n            <td>{{ row.ParentName }}</td>\r\n            <td>{{ row.OrderValue }}</td>\r\n            <td class=\"center\">\r\n              @if (row.IsActive) {\r\n                <icon-check></icon-check>\r\n              }\r\n            </td>\r\n            <td nz-flex nzGap=\"small\" nzJustify=\"center\">\r\n              <icon-edit (click)=\"edit(row)\"></icon-edit>\r\n              <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n\r\n  <div nz-col [nzSpan]=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                        Box,
+                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-add (click)=\"edit(null)\"></button-add>\r\n      <button-search (click)=\"search()\"></button-search>\r\n    </div>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th nzWidth=\"200px\">M\u00E3</th>\r\n          <th>T\u00EAn</th>\r\n          <th nzWidth=\"250px\">T\u00EAn \u0111\u01A1n v\u1ECB cha</th>\r\n          <th nzWidth=\"75px\">Th\u1EE9 t\u1EF1</th>\r\n          <th nzWidth=\"75px\">Hi\u1EC7u l\u1EF1c</th>\r\n          <th nzWidth=\"75px\" nzRight>Thao t\u00E1c</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.Code\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.Name\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [(_ngModel)]=\"filter.ParentName\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th nzRight></th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of table.data; track $index; let i = $index) {\r\n          <tr>\r\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n            <td class=\"link-detail\" (click)=\"edit(row)\">{{ row.Code }}</td>\r\n            <td>{{ row.Name }}</td>\r\n            <td>{{ row.ParentName }}</td>\r\n            <td>{{ row.OrderValue }}</td>\r\n            <td class=\"center\">\r\n              @if (row.IsActive) {\r\n                <icon-check></icon-check>\r\n              }\r\n            </td>\r\n            <td class=\"center\" nzRight>\r\n              <icon-edit (click)=\"edit(row)\"></icon-edit><box [width]=\"4\"></box>\r\n              <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n\r\n  <div nz-col [nzSpan]=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }] });
 
-const URLs$8 = {
+const URLs$9 = {
     getById: '/api/App_User/GetById',
     getByIdEx: '/api/App_User/GetByIdEx',
     getAll: '/api/App_User/GetAll',
@@ -5624,27 +5781,27 @@ class UserService extends HTTPService {
     cms = inject(CommonService);
     getById(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$8.getById, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$9.getById, params);
     }
     getByIdEx(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$8.getByIdEx, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$9.getByIdEx, params);
     }
     getAll() {
-        return this.post(AppGlobals.apiEndpoint + URLs$8.getAll);
+        return this.post(AppGlobals.apiEndpoint + URLs$9.getAll);
     }
     getList(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$8.getList, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$9.getList, filter);
     }
     getPaging(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$8.getPaging, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$9.getPaging, filter);
     }
     addOrEdit(obj) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$8.addOrEdit, obj);
+        return this.postData(AppGlobals.apiEndpoint + URLs$9.addOrEdit, obj);
     }
     delete(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$8.delete, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$9.delete, params);
     }
     importUser(data) {
         return this.postData(`${AppGlobals.apiEndpoint}/api/App_User/ImportUser`, data);
@@ -5970,6 +6127,11 @@ class App_Role {
 class RoleFilter extends GridFilter {
     Code;
     Name;
+    constructor() {
+        super();
+        this.OrderOption.FieldName = 'Code';
+        this.OrderOption.Direction = 'ascend';
+    }
 }
 
 class RoleMenuPermission extends BaseComponent {
@@ -5981,13 +6143,12 @@ class RoleMenuPermission extends BaseComponent {
     lstRoleMenuRef = [];
     roleFilter = new RoleFilter();
     menuFilter = new MenuFilter();
-    // 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
+    originalRefMap = new Map();
     roleColumnState = {};
-    ngOnInit() {
-        // this.getData();
-    }
+    pendingInserts = new Map();
+    pendingDeletes = new Map();
+    ngOnInit() { }
     getData() {
         Promise.all([
             this.roleService.getList(this.roleFilter),
@@ -6003,22 +6164,24 @@ class RoleMenuPermission extends BaseComponent {
             .catch((err) => this.handleError(err));
     }
     initializeRoleMenuMap() {
+        this.pendingInserts.clear();
+        this.pendingDeletes.clear();
         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.originalRefMap.clear();
+        this.lstRoleMenuRef.forEach((x) => {
+            this.originalRefMap.set(`${x.App_Role_Id}_${x.App_Menu_Id}`, x.App_Role_Menu_Ref_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}`);
+                const key = `${roleId}_${menuId}`;
+                this.roleMenuMap[roleId][menuId] = this.originalRefMap.has(key);
             });
-            // 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 };
@@ -6035,45 +6198,59 @@ class RoleMenuPermission extends BaseComponent {
             indeterminate: checkedCount > 0 && checkedCount < this.lstMenu.length,
         };
     }
-    // Khi click vào Checkbox All trên Thead
+    trackChange(roleId, menuId, isChecked) {
+        const key = `${roleId}_${menuId}`;
+        const originalRefId = this.originalRefMap.get(key);
+        if (isChecked) {
+            if (originalRefId) {
+                this.pendingDeletes.delete(key);
+            }
+            else {
+                this.pendingInserts.set(key, { App_Role_Id: roleId, App_Menu_Id: menuId });
+            }
+        }
+        else {
+            if (originalRefId) {
+                this.pendingDeletes.set(key, {
+                    App_Role_Menu_Ref_Id: originalRefId,
+                    App_Role_Id: roleId,
+                    App_Menu_Id: menuId,
+                });
+            }
+            else {
+                this.pendingInserts.delete(key);
+            }
+        }
+    }
     toggleRolePermissions(roleId, checked) {
         this.lstMenu.forEach((menu) => {
-            this.roleMenuMap[roleId][menu.App_Menu_Id] = checked;
+            const menuId = menu.App_Menu_Id;
+            this.roleMenuMap[roleId][menuId] = checked;
+            this.trackChange(roleId, menuId, 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) {
+    onSinglePermissionChange(roleId, menuId, isChecked) {
+        this.trackChange(roleId, menuId, isChecked);
         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 map = this.convertRoleMenuMapToArray();
-        const payload = map
-            .filter((x) => x.IsChecked)
-            .map((x) => {
-            return {
-                App_Role_Id: x.RoleId,
-                App_Menu_Id: x.MenuId,
-            };
-        });
-        this.permissionService.updateRoleMenuRef(payload).then(() => this.success(), (err) => this.handleError(err));
+        const listInsert = Array.from(this.pendingInserts.values());
+        const listDelete = Array.from(this.pendingDeletes.values());
+        if (listInsert.length === 0 && listDelete.length === 0) {
+            return;
+        }
+        const payload = {
+            InsertList: listInsert,
+            DeleteList: listDelete,
+        };
+        this.permissionService.updateRoleMenuRef(payload).then(() => {
+            this.success();
+            this.getData();
+        }, (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\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-save (click)=\"saveRoleMenuMap()\"></button-save>\r\n      <button-reload (click)=\"getData()\"></button-reload>\r\n    </div>\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\">\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [placeHolder]=\"'Search Role ...'\"\r\n              [(_ngModel)]=\"roleFilter.Name\"\r\n              [showClear]=\"true\"\r\n              (keyup.enter)=\"getData()\"\r\n              (onclickClearIcon)=\"getData()\"\r\n            ></extend-input>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [placeHolder]=\"'Search Menu ...'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"menuFilter.Name\"\r\n              (keyup.enter)=\"getData()\"\r\n              (onclickClearIcon)=\"getData()\"\r\n            ></extend-input>\r\n          </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: i6$2.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "ngmodule", type: 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$1.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId", "nzName"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: NzButtonModule }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "component", type: ButtonSave, selector: "button-save" }, { kind: "component", type: ButtonReload, selector: "button-reload" }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }] });
+    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\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-save (click)=\"saveRoleMenuMap()\"></button-save>\r\n      <button-reload (click)=\"getData()\"></button-reload>\r\n    </div>\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\">\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [placeHolder]=\"'Search Role ...'\"\r\n              [(_ngModel)]=\"roleFilter.Name\"\r\n              [showClear]=\"true\"\r\n              (keyup.enter)=\"getData()\"\r\n              (onclickClearIcon)=\"getData()\"\r\n            ></extend-input>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [placeHolder]=\"'Search Menu ...'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"menuFilter.Name\"\r\n              (keyup.enter)=\"getData()\"\r\n              (onclickClearIcon)=\"getData()\"\r\n            ></extend-input>\r\n          </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!, menu.App_Menu_Id!, $event)\"\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: i6$2.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "ngmodule", type: 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$1.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId", "nzName"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: NzButtonModule }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "component", type: ButtonSave, selector: "button-save" }, { kind: "component", type: ButtonReload, selector: "button-reload" }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RoleMenuPermission, decorators: [{
             type: Component,
@@ -6089,7 +6266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         ButtonSave,
                         ButtonReload,
                         ExtendInput,
-                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-save (click)=\"saveRoleMenuMap()\"></button-save>\r\n      <button-reload (click)=\"getData()\"></button-reload>\r\n    </div>\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\">\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [placeHolder]=\"'Search Role ...'\"\r\n              [(_ngModel)]=\"roleFilter.Name\"\r\n              [showClear]=\"true\"\r\n              (keyup.enter)=\"getData()\"\r\n              (onclickClearIcon)=\"getData()\"\r\n            ></extend-input>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [placeHolder]=\"'Search Menu ...'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"menuFilter.Name\"\r\n              (keyup.enter)=\"getData()\"\r\n              (onclickClearIcon)=\"getData()\"\r\n            ></extend-input>\r\n          </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" }]
+                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-save (click)=\"saveRoleMenuMap()\"></button-save>\r\n      <button-reload (click)=\"getData()\"></button-reload>\r\n    </div>\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\">\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [placeHolder]=\"'Search Role ...'\"\r\n              [(_ngModel)]=\"roleFilter.Name\"\r\n              [showClear]=\"true\"\r\n              (keyup.enter)=\"getData()\"\r\n              (onclickClearIcon)=\"getData()\"\r\n            ></extend-input>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [placeHolder]=\"'Search Menu ...'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"menuFilter.Name\"\r\n              (keyup.enter)=\"getData()\"\r\n              (onclickClearIcon)=\"getData()\"\r\n            ></extend-input>\r\n          </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!, menu.App_Menu_Id!, $event)\"\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 App_User {
@@ -6127,8 +6304,11 @@ class UserFilter extends GridFilter {
     UserName;
     FullName;
     OrgName;
-    isUserNameSearch = false;
-    isOrgNameSearch = false;
+    constructor() {
+        super();
+        this.OrderOption.FieldName = 'UserName';
+        this.OrderOption.Direction = 'ascend';
+    }
 }
 
 class UserRolePermission extends BaseComponent {
@@ -6140,13 +6320,12 @@ class UserRolePermission extends BaseComponent {
     lstUserRoleRef = [];
     roleFilter = new RoleFilter();
     userFilter = new UserFilter();
-    // 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
+    originalRefMap = new Map();
     userRowState = {};
-    ngOnInit() {
-        // this.getData();
-    }
+    pendingInserts = new Map();
+    pendingDeletes = new Map();
+    ngOnInit() { }
     getData() {
         Promise.all([
             this.roleService.getList(this.roleFilter),
@@ -6162,7 +6341,12 @@ class UserRolePermission extends BaseComponent {
             .catch((err) => this.handleError(err));
     }
     initializeRoleMenuMap() {
-        const userRoleSet = new Set(this.lstUserRoleRef.map((x) => `${x.App_User_Id}_${x.App_Role_Id}`));
+        this.pendingInserts.clear();
+        this.pendingDeletes.clear();
+        this.originalRefMap.clear();
+        this.lstUserRoleRef.forEach((x) => {
+            this.originalRefMap.set(`${x.App_User_Id}_${x.App_Role_Id}`, x.App_User_Role_Ref_Id);
+        });
         this.lstUser.forEach((user) => {
             const userId = user.App_User_Id;
             if (!this.userRoleMap[userId]) {
@@ -6170,8 +6354,9 @@ class UserRolePermission extends BaseComponent {
             }
             this.lstRole.forEach((role) => {
                 const roleId = role.App_Role_Id;
+                const key = `${userId}_${roleId}`;
                 if (this.userRoleMap[userId][roleId] === undefined) {
-                    this.userRoleMap[userId][roleId] = userRoleSet.has(`${userId}_${roleId}`);
+                    this.userRoleMap[userId][roleId] = this.originalRefMap.has(key);
                 }
             });
             this.updateUserRowState(userId);
@@ -6193,45 +6378,59 @@ class UserRolePermission extends BaseComponent {
             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);
+    trackChange(userId, roleId, isChecked) {
+        const key = `${userId}_${roleId}`;
+        const originalRefId = this.originalRefMap.get(key);
+        if (isChecked) {
+            if (originalRefId) {
+                this.pendingDeletes.delete(key);
+            }
+            else {
+                this.pendingInserts.set(key, { App_User_Id: userId, App_Role_Id: roleId });
+            }
+        }
+        else {
+            if (originalRefId) {
+                this.pendingDeletes.set(key, {
+                    App_User_Role_Ref_Id: originalRefId,
+                    App_User_Id: userId,
+                    App_Role_Id: roleId,
+                });
+            }
+            else {
+                this.pendingInserts.delete(key);
+            }
+        }
     }
-    // Xử lý khi click vào Checkbox của từng quyền lẻ
-    onSinglePermissionChange(userId) {
+    onSinglePermissionChange(userId, roleId, isChecked) {
+        this.trackChange(userId, roleId, isChecked);
         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],
-                });
-            });
+    toggleUserPermissions(userId, checked) {
+        this.lstRole.forEach((role) => {
+            const roleId = role.App_Role_Id;
+            this.userRoleMap[userId][roleId] = checked;
+            this.trackChange(userId, roleId, checked);
         });
-        return result;
+        this.updateUserRowState(userId);
     }
     saveUserRoleMap() {
-        const userRoleMap = this.convertUserRoleMapToArray();
-        const payload = userRoleMap
-            .filter((x) => x.IsChecked)
-            .map((x) => {
-            return {
-                App_User_Id: x.UserId,
-                App_Role_Id: x.RoleId,
-            };
-        });
-        this.permissionService.updateUserRoleRef(payload).then(() => this.success(), (err) => this.handleError(err));
+        const listInsert = Array.from(this.pendingInserts.values());
+        const listDelete = Array.from(this.pendingDeletes.values());
+        if (listInsert.length === 0 && listDelete.length === 0) {
+            return;
+        }
+        const payload = {
+            InsertList: listInsert,
+            DeleteList: listDelete,
+        };
+        this.permissionService.updateUserRoleRef(payload).then(() => {
+            this.success();
+            this.getData();
+        }, (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\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-save (click)=\"saveUserRoleMap()\"></button-save>\r\n      <button-reload (click)=\"getData()\"></button-reload>\r\n    </div>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      [nzData]=\"lstUser\"\r\n      nzShowPagination=\"false\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzScroll]=\"{ x: 'auto' }\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"200px\">\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [placeHolder]=\"'Search Role ...'\"\r\n              [(_ngModel)]=\"roleFilter.Name\"\r\n              [showClear]=\"true\"\r\n              (keyup.enter)=\"getData()\"\r\n              (onclickClearIcon)=\"getData()\"\r\n            ></extend-input>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [placeHolder]=\"'Search User ...'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"userFilter.FullName\"\r\n              (keyup.enter)=\"getData()\"\r\n              (onclickClearIcon)=\"getData()\"\r\n            ></extend-input>\r\n          </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: i6$2.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "ngmodule", type: 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$1.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId", "nzName"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: NzButtonModule }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "component", type: ButtonSave, selector: "button-save" }, { kind: "component", type: ButtonReload, selector: "button-reload" }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }] });
+    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\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-save (click)=\"saveUserRoleMap()\"></button-save>\r\n      <button-reload (click)=\"getData()\"></button-reload>\r\n    </div>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      [nzData]=\"lstUser\"\r\n      nzShowPagination=\"false\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzScroll]=\"{ x: 'auto' }\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"200px\" nzLeft>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [placeHolder]=\"'Search Role ...'\"\r\n              [(_ngModel)]=\"roleFilter.Name\"\r\n              [showClear]=\"true\"\r\n              (keyup.enter)=\"getData()\"\r\n              (onclickClearIcon)=\"getData()\"\r\n            ></extend-input>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [placeHolder]=\"'Search User ...'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"userFilter.FullName\"\r\n              (keyup.enter)=\"getData()\"\r\n              (onclickClearIcon)=\"getData()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th nzWidth=\"50px\"></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 nzLeft>{{ 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!, role.App_Role_Id!, $event)\"\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: i6$2.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "directive", type: i6$2.NzCellFixedDirective, selector: "td[nzRight],th[nzRight],td[nzLeft],th[nzLeft]", inputs: ["nzRight", "nzLeft", "colspan", "colSpan"] }, { kind: "ngmodule", type: 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$1.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId", "nzName"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: NzButtonModule }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "component", type: ButtonSave, selector: "button-save" }, { kind: "component", type: ButtonReload, selector: "button-reload" }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: UserRolePermission, decorators: [{
             type: Component,
@@ -6247,7 +6446,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         ButtonSave,
                         ButtonReload,
                         ExtendInput,
-                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-save (click)=\"saveUserRoleMap()\"></button-save>\r\n      <button-reload (click)=\"getData()\"></button-reload>\r\n    </div>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      [nzData]=\"lstUser\"\r\n      nzShowPagination=\"false\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzScroll]=\"{ x: 'auto' }\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"200px\">\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [placeHolder]=\"'Search Role ...'\"\r\n              [(_ngModel)]=\"roleFilter.Name\"\r\n              [showClear]=\"true\"\r\n              (keyup.enter)=\"getData()\"\r\n              (onclickClearIcon)=\"getData()\"\r\n            ></extend-input>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [placeHolder]=\"'Search User ...'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"userFilter.FullName\"\r\n              (keyup.enter)=\"getData()\"\r\n              (onclickClearIcon)=\"getData()\"\r\n            ></extend-input>\r\n          </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" }]
+                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-save (click)=\"saveUserRoleMap()\"></button-save>\r\n      <button-reload (click)=\"getData()\"></button-reload>\r\n    </div>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      [nzData]=\"lstUser\"\r\n      nzShowPagination=\"false\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzScroll]=\"{ x: 'auto' }\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"200px\" nzLeft>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [placeHolder]=\"'Search Role ...'\"\r\n              [(_ngModel)]=\"roleFilter.Name\"\r\n              [showClear]=\"true\"\r\n              (keyup.enter)=\"getData()\"\r\n              (onclickClearIcon)=\"getData()\"\r\n            ></extend-input>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [placeHolder]=\"'Search User ...'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"userFilter.FullName\"\r\n              (keyup.enter)=\"getData()\"\r\n              (onclickClearIcon)=\"getData()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th nzWidth=\"50px\"></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 nzLeft>{{ 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!, role.App_Role_Id!, $event)\"\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 {
@@ -6255,41 +6454,77 @@ class RolePermissionComponent extends BaseComponent {
     permissionService = inject(PermissionService);
     lstRole = [];
     resourceGroups = [];
-    // Lưu trữ danh sách PermissionCode đang được tích chọn cho Role hiện tại
     selectedPermissionIds = new Set();
+    originalPermissionMap = new Map();
+    pendingInserts = new Map();
+    pendingDeletes = new Map();
     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));
+        this.isLoading = true;
+        Promise.all([this.roleService.getAll(), this.permissionService.getPermissionGroupByCode()])
+            .then(([roleRes, resourceRes]) => {
+            this.lstRole = roleRes.Data || [];
+            this.resourceGroups = resourceRes.Data || [];
+        })
+            .catch((err) => {
+            this.handleError(err);
+        })
+            .finally(() => {
+            this.isLoading = false;
+        });
     }
-    // --- 3. Xử lý khi User đổi Role ---
     onRoleChange(roleId) {
-        if (!roleId)
+        if (!roleId) {
+            this.resetStates();
             return;
+        }
         this.isLoading = true;
-        // Xóa state cũ
-        this.selectedPermissionIds.clear();
-        let activePermsFromDb = [];
+        this.resetStates();
         this.permissionService
             .getRolePermissions(roleId)
             .then((res) => {
-            activePermsFromDb = res.Data || [];
-            this.selectedPermissionIds = new Set(activePermsFromDb);
+            const activePermsFromDb = res.Data || [];
+            activePermsFromDb.forEach((item) => {
+                this.selectedPermissionIds.add(item.App_Permission_Id);
+                if (item.App_Role_Permission_Ref_Id) {
+                    this.originalPermissionMap.set(item.App_Permission_Id, item.App_Role_Permission_Ref_Id);
+                }
+            });
         }, (err) => this.handleError(err))
             .finally(() => (this.isLoading = false));
-        this.loadAllResources();
     }
-    // --- 4. Logic UI: Thao tác Check/Uncheck ---
+    resetStates() {
+        this.selectedPermissionIds.clear();
+        this.originalPermissionMap.clear();
+        this.pendingInserts.clear();
+        this.pendingDeletes.clear();
+    }
     isPermissionChecked(id) {
         return this.selectedPermissionIds.has(id);
     }
+    trackChange(permissionId, isChecked) {
+        const originalRefId = this.originalPermissionMap.get(permissionId);
+        const roleId = this.selectedId + '';
+        if (isChecked) {
+            if (originalRefId) {
+                this.pendingDeletes.delete(permissionId);
+            }
+            else {
+                this.pendingInserts.set(permissionId, { App_Role_Id: roleId, App_Permission_Id: permissionId });
+            }
+        }
+        else {
+            if (originalRefId) {
+                this.pendingDeletes.set(permissionId, {
+                    App_Role_Permission_Ref_Id: originalRefId,
+                    App_Role_Id: roleId,
+                    App_Permission_Id: permissionId,
+                });
+            }
+            else {
+                this.pendingInserts.delete(permissionId);
+            }
+        }
+    }
     onCheckChange(id, isChecked) {
         if (isChecked) {
             this.selectedPermissionIds.add(id);
@@ -6297,20 +6532,27 @@ class RolePermissionComponent extends BaseComponent {
         else {
             this.selectedPermissionIds.delete(id);
         }
+        this.trackChange(id, isChecked);
     }
-    // --- 5. Lưu xuống DB ---
     savePermissions() {
         if (!this.selectedId)
             return;
+        const listInsert = Array.from(this.pendingInserts.values());
+        const listDelete = Array.from(this.pendingDeletes.values());
+        if (listInsert.length === 0 && listDelete.length === 0) {
+            return;
+        }
         this.isSaving = true;
         const payload = {
-            roleId: this.selectedId + '',
-            // Chuyển Set về lại Array để gửi API
-            permissionIds: Array.from(this.selectedPermissionIds),
+            InsertList: listInsert,
+            DeleteList: listDelete,
         };
         this.permissionService
-            .addRoleResourcePermissionRef({ roleId: payload.roleId, lstPermissionId: payload.permissionIds })
-            .then((res) => this.notiService.success('Đã lưu cấu hình phân quyền thành công!'), (err) => this.handleError(err))
+            .addRoleResourcePermissionRef(payload)
+            .then((res) => {
+            this.success();
+            this.onRoleChange(this.selectedId + '');
+        }, (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 });
@@ -6639,7 +6881,6 @@ class PermissionComponent extends BaseComponent {
             ];
         }
         else if (tabIndex == 3) {
-            this.roleResource.loadRoles();
             Breadcrumb.lstBreadcrumb = [
                 {
                     Name: 'Permission',
@@ -6723,7 +6964,7 @@ class RoleListComponent extends BaseComponent {
         this.getData();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RoleListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RoleListComponent, isStandalone: true, selector: "app-role-list", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-add (click)=\"edit(null)\"></button-add>\r\n      <button-search (click)=\"getData()\"></button-search>\r\n    </div>\r\n  </div>\r\n\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzFrontPagination]=\"false\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th>Code</th>\r\n          <th>Name</th>\r\n          <th>Description</th>\r\n          <th>Active</th>\r\n          <th nzWidth=\"75px\">Thao t\u00E1c</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.Code\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.Name\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of table.data; track $index; let i = $index) {\r\n          <tr>\r\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n            <td class=\"link-detail\" (click)=\"edit(row)\">{{ row.Code }}</td>\r\n            <td>{{ row.Name }}</td>\r\n            <td>{{ row.Description }}</td>\r\n            <td class=\"center\">\r\n              @if (row.IsActive) {\r\n                <icon-check></icon-check>\r\n              }\r\n            </td>\r\n            <td class=\"center\">\r\n              <icon-edit (click)=\"edit(row)\"></icon-edit><box [width]=\"4\"></box>\r\n              <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "component", type: ButtonAdd, selector: "button-add" }, { kind: "component", type: ButtonSearch, selector: "button-search" }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$2.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i5$3.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "component", type: IconCheck, selector: "icon-check", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconEdit, selector: "icon-edit", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RoleListComponent, isStandalone: true, selector: "app-role-list", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-add (click)=\"edit(null)\"></button-add>\r\n      <button-search (click)=\"getData()\"></button-search>\r\n    </div>\r\n  </div>\r\n\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th\r\n            nzWidth=\"250px\"\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'Code' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'Code'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Code\r\n          </th>\r\n          <th\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'Name' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'Name'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Name\r\n          </th>\r\n          <th\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'Description' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'Description'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Description\r\n          </th>\r\n          <th\r\n            nzWidth=\"75px\"\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'IsActive' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'IsActive'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Active\r\n          </th>\r\n          <th nzWidth=\"75px\">Thao t\u00E1c</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.Code\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.Name\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of table.data; track $index; let i = $index) {\r\n          <tr>\r\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n            <td class=\"link-detail\" (click)=\"edit(row)\">{{ row.Code }}</td>\r\n            <td>{{ row.Name }}</td>\r\n            <td>{{ row.Description }}</td>\r\n            <td class=\"center\">\r\n              @if (row.IsActive) {\r\n                <icon-check></icon-check>\r\n              }\r\n            </td>\r\n            <td class=\"center\">\r\n              <icon-edit (click)=\"edit(row)\"></icon-edit><box [width]=\"4\"></box>\r\n              <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "component", type: ButtonAdd, selector: "button-add" }, { kind: "component", type: ButtonSearch, selector: "button-search" }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$2.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "component", type: i6$2.NzThAddOnComponent, selector: "th[nzColumnKey], th[nzSortFn], th[nzSortOrder], th[nzFilters], th[nzShowSort], th[nzShowFilter], th[nzCustomFilter]", inputs: ["nzColumnKey", "nzFilterMultiple", "nzSortOrder", "nzSortPriority", "nzSortDirections", "nzFilters", "nzSortFn", "nzFilterFn", "nzShowSort", "nzShowFilter", "nzCustomFilter"], outputs: ["nzCheckedChange", "nzSortOrderChange", "nzFilterChange"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i5$3.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "component", type: IconCheck, selector: "icon-check", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconEdit, selector: "icon-edit", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RoleListComponent, decorators: [{
             type: Component,
@@ -6740,7 +6981,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         IconDelete,
                         ExtendInput,
                         Box,
-                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-add (click)=\"edit(null)\"></button-add>\r\n      <button-search (click)=\"getData()\"></button-search>\r\n    </div>\r\n  </div>\r\n\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzFrontPagination]=\"false\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th>Code</th>\r\n          <th>Name</th>\r\n          <th>Description</th>\r\n          <th>Active</th>\r\n          <th nzWidth=\"75px\">Thao t\u00E1c</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.Code\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.Name\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of table.data; track $index; let i = $index) {\r\n          <tr>\r\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n            <td class=\"link-detail\" (click)=\"edit(row)\">{{ row.Code }}</td>\r\n            <td>{{ row.Name }}</td>\r\n            <td>{{ row.Description }}</td>\r\n            <td class=\"center\">\r\n              @if (row.IsActive) {\r\n                <icon-check></icon-check>\r\n              }\r\n            </td>\r\n            <td class=\"center\">\r\n              <icon-edit (click)=\"edit(row)\"></icon-edit><box [width]=\"4\"></box>\r\n              <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-add (click)=\"edit(null)\"></button-add>\r\n      <button-search (click)=\"getData()\"></button-search>\r\n    </div>\r\n  </div>\r\n\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th\r\n            nzWidth=\"250px\"\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'Code' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'Code'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Code\r\n          </th>\r\n          <th\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'Name' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'Name'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Name\r\n          </th>\r\n          <th\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'Description' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'Description'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Description\r\n          </th>\r\n          <th\r\n            nzWidth=\"75px\"\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'IsActive' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'IsActive'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Active\r\n          </th>\r\n          <th nzWidth=\"75px\">Thao t\u00E1c</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.Code\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input\r\n              [size]=\"'small'\"\r\n              [showClear]=\"true\"\r\n              [(_ngModel)]=\"filter.Name\"\r\n              (onclickClearIcon)=\"search()\"\r\n            ></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of table.data; track $index; let i = $index) {\r\n          <tr>\r\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n            <td class=\"link-detail\" (click)=\"edit(row)\">{{ row.Code }}</td>\r\n            <td>{{ row.Name }}</td>\r\n            <td>{{ row.Description }}</td>\r\n            <td class=\"center\">\r\n              @if (row.IsActive) {\r\n                <icon-check></icon-check>\r\n              }\r\n            </td>\r\n            <td class=\"center\">\r\n              <icon-edit (click)=\"edit(row)\"></icon-edit><box [width]=\"4\"></box>\r\n              <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }] });
 
 class RoleDetailComponent extends BaseComponent {
@@ -7172,7 +7413,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 args: ['parentSelect', { static: false }]
             }] } });
 
-const URLs$7 = {
+const URLs$8 = {
     getById: '/api/App_Setting/GetById',
     getAll: '/api/App_Setting/GetAll',
     getList: '/api/App_Setting/GetList',
@@ -7188,34 +7429,34 @@ let SettingService$1 = class SettingService extends HTTPService {
     commonService = inject(CommonService);
     getById(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$7.getById, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$8.getById, params);
     }
     getPaging(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$7.getPaging, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$8.getPaging, filter);
     }
     addOrEdit(obj) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$7.addOrEdit, obj);
+        return this.postData(AppGlobals.apiEndpoint + URLs$8.addOrEdit, obj);
     }
     delete(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$7.delete, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$8.delete, params);
     }
     getByCodeAnonymous(code) {
         const params = new HttpParams().append('Code', code);
-        return this.getParams(AppGlobals.apiEndpoint + URLs$7.getByCodeAnonymous, params);
+        return this.getParams(AppGlobals.apiEndpoint + URLs$8.getByCodeAnonymous, params);
     }
     // getGroupByCodeAnonymous(code: string) {
     //   const params = new HttpParams().append('Code', code);
     //   return this.getParams(AppGlobals.apiEndpoint + URLs.getByCodeAnonymous, params);
     // }
     getAllConfig() {
-        return this.post(AppGlobals.apiEndpoint + URLs$7.GetAllConfig);
+        return this.post(AppGlobals.apiEndpoint + URLs$8.GetAllConfig);
     }
     applyConfig(config) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$7.ApplyConfig, config);
+        return this.postData(AppGlobals.apiEndpoint + URLs$8.ApplyConfig, config);
     }
     getDbInfo() {
-        return this.post(AppGlobals.apiEndpoint + URLs$7.GetDbInfo);
+        return this.post(AppGlobals.apiEndpoint + URLs$8.GetDbInfo);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SettingService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SettingService, providedIn: 'root' });
@@ -7259,6 +7500,11 @@ class App_SettingFilter extends GridFilter {
     Value;
     Description;
     IsActive;
+    constructor() {
+        super();
+        this.OrderOption.FieldName = 'Code';
+        this.OrderOption.Direction = 'ascend';
+    }
 }
 
 class SettingListComponent extends BaseComponent {
@@ -7335,7 +7581,7 @@ class SettingListComponent extends BaseComponent {
         this.getData();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SettingListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: SettingListComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <div nz-flex nzGap=\"small\">\r\n        <button-search (click)=\"search()\"></button-search>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data?.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowSizeChanger]=\"true\"\r\n      [nzFrontPagination]=\"false\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th>Code</th>\r\n          <th>Value</th>\r\n          <th>Description</th>\r\n          <th nzWidth=\"75px\">Active</th>\r\n          <th nzWidth=\"75px\">Action</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input size=\"small\" [(_ngModel)]=\"filter.Code\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input size=\"small\" [(_ngModel)]=\"filter.Value\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input size=\"small\" [(_ngModel)]=\"filter.Description\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th class=\"center\">\r\n            <extend-checkbox [(_ngModel)]=\"filter.IsActive\"></extend-checkbox>\r\n          </th>\r\n          <th class=\"center\">\r\n            <nz-icon\r\n              nzType=\"plus\"\r\n              nzTheme=\"outline\"\r\n              class=\"color-primary cursor-pointer icon-size-16\"\r\n              (click)=\"$event.stopPropagation(); add()\"\r\n            ></nz-icon>\r\n          </th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of data?.LstItem; track $index; let i = $index) {\r\n          @if (selectedRow != row) {\r\n            <tr (click)=\"selectedRow = row\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>{{ row.Code }}</td>\r\n              <td>{{ row.Value }}</td>\r\n              <td>{{ row.Description }}</td>\r\n              <td class=\"text-center\">\r\n                @if (row.IsActive) {\r\n                  <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n                }\r\n              </td>\r\n              <td class=\"text-center\">\r\n                <a\r\n                  nz-popconfirm\r\n                  nzOkDanger\r\n                  nzPopconfirmPlacement=\"top\"\r\n                  [nzPopconfirmTitle]=\"TranslateKey.CONFIRM_DELETE | translate\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  (nzOnConfirm)=\"delete(row)\"\r\n                >\r\n                  <i nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn cursor-pointer icon-size-16\"></i>\r\n                </a>\r\n              </td>\r\n            </tr>\r\n          } @else {\r\n            <tr (keyup.enter)=\"save()\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>\r\n                <extend-input [required]=\"true\" [(_ngModel)]=\"selectedRow.Code\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.Value\"></extend-input>\r\n              </td>\r\n              <td class=\"form-item-no-bottom\">\r\n                <extend-textarea [minRows]=\"1\" [(_ngModel)]=\"selectedRow.Description\"></extend-textarea>\r\n              </td>\r\n              <td class=\"text-center\">\r\n                <extend-checkbox [(_ngModel)]=\"selectedRow.IsActive\"></extend-checkbox>\r\n              </td>\r\n              <td class=\"text-center\">\r\n                <nz-icon\r\n                  nzType=\"save\"\r\n                  nzTheme=\"outline\"\r\n                  class=\"color-primary cursor-pointer icon-size-16\"\r\n                  (click)=\"$event.stopPropagation(); save()\"\r\n                ></nz-icon>\r\n              </td>\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-row nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data?.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "component", type: ButtonSearch, selector: "button-search" }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$2.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "component", type: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzPopconfirmModule }, { kind: "directive", type: i9.NzPopconfirmDirective, selector: "[nz-popconfirm]", inputs: ["nzPopconfirmArrowPointAtCenter", "nzPopconfirmTitle", "nzPopconfirmTitleContext", "nz-popconfirm", "nzPopconfirmTrigger", "nzPopconfirmPlacement", "nzPopconfirmOrigin", "nzPopconfirmMouseEnterDelay", "nzPopconfirmMouseLeaveDelay", "nzPopconfirmOverlayClassName", "nzPopconfirmOverlayStyle", "nzPopconfirmVisible", "nzOkText", "nzOkType", "nzOkDisabled", "nzOkDanger", "nzCancelText", "nzBeforeConfirm", "nzIcon", "nzCondition", "nzPopconfirmShowArrow", "nzPopconfirmBackdrop", "nzAutofocus"], outputs: ["nzPopconfirmVisibleChange", "nzOnCancel", "nzOnConfirm"], exportAs: ["nzPopconfirm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: ExtendTextArea, selector: "extend-textarea", inputs: ["label", "placeHolder", "labelAlign", "floatingLabel", "displayInline", "formItemNoButtom", "labelSpan", "labelFlex", "inputFlex", "disabled", "required", "noBottom", "selectModeType", "inputClass", "size", "isSubmited", "minRows", "maxRows", "lstItem", "displayField", "valueField", "formData", "controlName", "_ngModel", "isTouched", "inputErrorMessage", "errorMessages"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i5$3.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: SettingListComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <div nz-flex nzGap=\"small\">\r\n        <button-search (click)=\"search()\"></button-search>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data?.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowSizeChanger]=\"true\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'Code' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'Code'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Code\r\n          </th>\r\n          <th>Value</th>\r\n          <th>Description</th>\r\n          <th nzWidth=\"75px\">Active</th>\r\n          <th nzWidth=\"75px\">Action</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input size=\"small\" [(_ngModel)]=\"filter.Code\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input size=\"small\" [(_ngModel)]=\"filter.Value\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input size=\"small\" [(_ngModel)]=\"filter.Description\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th class=\"center\">\r\n            <extend-checkbox [(_ngModel)]=\"filter.IsActive\"></extend-checkbox>\r\n          </th>\r\n          <th class=\"center\">\r\n            <nz-icon\r\n              nzType=\"plus\"\r\n              nzTheme=\"outline\"\r\n              class=\"color-primary cursor-pointer icon-size-16\"\r\n              (click)=\"$event.stopPropagation(); add()\"\r\n            ></nz-icon>\r\n          </th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of data?.LstItem; track $index; let i = $index) {\r\n          @if (selectedRow != row) {\r\n            <tr (click)=\"selectedRow = row\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>{{ row.Code }}</td>\r\n              <td>{{ row.Value }}</td>\r\n              <td>{{ row.Description }}</td>\r\n              <td class=\"text-center\">\r\n                @if (row.IsActive) {\r\n                  <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n                }\r\n              </td>\r\n              <td class=\"text-center\">\r\n                <a\r\n                  nz-popconfirm\r\n                  nzOkDanger\r\n                  nzPopconfirmPlacement=\"top\"\r\n                  [nzPopconfirmTitle]=\"TranslateKey.CONFIRM_DELETE | translate\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  (nzOnConfirm)=\"delete(row)\"\r\n                >\r\n                  <i nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn cursor-pointer icon-size-16\"></i>\r\n                </a>\r\n              </td>\r\n            </tr>\r\n          } @else {\r\n            <tr (keyup.enter)=\"save()\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>\r\n                <extend-input [required]=\"true\" [(_ngModel)]=\"selectedRow.Code\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.Value\"></extend-input>\r\n              </td>\r\n              <td class=\"form-item-no-bottom\">\r\n                <extend-textarea [minRows]=\"1\" [(_ngModel)]=\"selectedRow.Description\"></extend-textarea>\r\n              </td>\r\n              <td class=\"text-center\">\r\n                <extend-checkbox [(_ngModel)]=\"selectedRow.IsActive\"></extend-checkbox>\r\n              </td>\r\n              <td class=\"text-center\">\r\n                <nz-icon\r\n                  nzType=\"save\"\r\n                  nzTheme=\"outline\"\r\n                  class=\"color-primary cursor-pointer icon-size-16\"\r\n                  (click)=\"$event.stopPropagation(); save()\"\r\n                ></nz-icon>\r\n              </td>\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-row nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data?.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "component", type: ButtonSearch, selector: "button-search" }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$2.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "component", type: i6$2.NzThAddOnComponent, selector: "th[nzColumnKey], th[nzSortFn], th[nzSortOrder], th[nzFilters], th[nzShowSort], th[nzShowFilter], th[nzCustomFilter]", inputs: ["nzColumnKey", "nzFilterMultiple", "nzSortOrder", "nzSortPriority", "nzSortDirections", "nzFilters", "nzSortFn", "nzFilterFn", "nzShowSort", "nzShowFilter", "nzCustomFilter"], outputs: ["nzCheckedChange", "nzSortOrderChange", "nzFilterChange"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "component", type: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzPopconfirmModule }, { kind: "directive", type: i9.NzPopconfirmDirective, selector: "[nz-popconfirm]", inputs: ["nzPopconfirmArrowPointAtCenter", "nzPopconfirmTitle", "nzPopconfirmTitleContext", "nz-popconfirm", "nzPopconfirmTrigger", "nzPopconfirmPlacement", "nzPopconfirmOrigin", "nzPopconfirmMouseEnterDelay", "nzPopconfirmMouseLeaveDelay", "nzPopconfirmOverlayClassName", "nzPopconfirmOverlayStyle", "nzPopconfirmVisible", "nzOkText", "nzOkType", "nzOkDisabled", "nzOkDanger", "nzCancelText", "nzBeforeConfirm", "nzIcon", "nzCondition", "nzPopconfirmShowArrow", "nzPopconfirmBackdrop", "nzAutofocus"], outputs: ["nzPopconfirmVisibleChange", "nzOnCancel", "nzOnConfirm"], exportAs: ["nzPopconfirm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: ExtendTextArea, selector: "extend-textarea", inputs: ["label", "placeHolder", "labelAlign", "floatingLabel", "displayInline", "formItemNoButtom", "labelSpan", "labelFlex", "inputFlex", "disabled", "required", "noBottom", "selectModeType", "inputClass", "size", "isSubmited", "minRows", "maxRows", "lstItem", "displayField", "valueField", "formData", "controlName", "_ngModel", "isTouched", "inputErrorMessage", "errorMessages"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i5$3.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SettingListComponent, decorators: [{
             type: Component,
@@ -7353,10 +7599,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         NzPaginationModule,
                         NzGridModule,
                         NzFlexModule,
-                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <div nz-flex nzGap=\"small\">\r\n        <button-search (click)=\"search()\"></button-search>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data?.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowSizeChanger]=\"true\"\r\n      [nzFrontPagination]=\"false\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th>Code</th>\r\n          <th>Value</th>\r\n          <th>Description</th>\r\n          <th nzWidth=\"75px\">Active</th>\r\n          <th nzWidth=\"75px\">Action</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input size=\"small\" [(_ngModel)]=\"filter.Code\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input size=\"small\" [(_ngModel)]=\"filter.Value\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input size=\"small\" [(_ngModel)]=\"filter.Description\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th class=\"center\">\r\n            <extend-checkbox [(_ngModel)]=\"filter.IsActive\"></extend-checkbox>\r\n          </th>\r\n          <th class=\"center\">\r\n            <nz-icon\r\n              nzType=\"plus\"\r\n              nzTheme=\"outline\"\r\n              class=\"color-primary cursor-pointer icon-size-16\"\r\n              (click)=\"$event.stopPropagation(); add()\"\r\n            ></nz-icon>\r\n          </th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of data?.LstItem; track $index; let i = $index) {\r\n          @if (selectedRow != row) {\r\n            <tr (click)=\"selectedRow = row\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>{{ row.Code }}</td>\r\n              <td>{{ row.Value }}</td>\r\n              <td>{{ row.Description }}</td>\r\n              <td class=\"text-center\">\r\n                @if (row.IsActive) {\r\n                  <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n                }\r\n              </td>\r\n              <td class=\"text-center\">\r\n                <a\r\n                  nz-popconfirm\r\n                  nzOkDanger\r\n                  nzPopconfirmPlacement=\"top\"\r\n                  [nzPopconfirmTitle]=\"TranslateKey.CONFIRM_DELETE | translate\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  (nzOnConfirm)=\"delete(row)\"\r\n                >\r\n                  <i nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn cursor-pointer icon-size-16\"></i>\r\n                </a>\r\n              </td>\r\n            </tr>\r\n          } @else {\r\n            <tr (keyup.enter)=\"save()\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>\r\n                <extend-input [required]=\"true\" [(_ngModel)]=\"selectedRow.Code\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.Value\"></extend-input>\r\n              </td>\r\n              <td class=\"form-item-no-bottom\">\r\n                <extend-textarea [minRows]=\"1\" [(_ngModel)]=\"selectedRow.Description\"></extend-textarea>\r\n              </td>\r\n              <td class=\"text-center\">\r\n                <extend-checkbox [(_ngModel)]=\"selectedRow.IsActive\"></extend-checkbox>\r\n              </td>\r\n              <td class=\"text-center\">\r\n                <nz-icon\r\n                  nzType=\"save\"\r\n                  nzTheme=\"outline\"\r\n                  class=\"color-primary cursor-pointer icon-size-16\"\r\n                  (click)=\"$event.stopPropagation(); save()\"\r\n                ></nz-icon>\r\n              </td>\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-row nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data?.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <div nz-flex nzGap=\"small\">\r\n        <button-search (click)=\"search()\"></button-search>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data?.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowSizeChanger]=\"true\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'Code' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'Code'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Code\r\n          </th>\r\n          <th>Value</th>\r\n          <th>Description</th>\r\n          <th nzWidth=\"75px\">Active</th>\r\n          <th nzWidth=\"75px\">Action</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input size=\"small\" [(_ngModel)]=\"filter.Code\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input size=\"small\" [(_ngModel)]=\"filter.Value\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th>\r\n            <extend-input size=\"small\" [(_ngModel)]=\"filter.Description\" (onclickClearIcon)=\"search()\"></extend-input>\r\n          </th>\r\n          <th class=\"center\">\r\n            <extend-checkbox [(_ngModel)]=\"filter.IsActive\"></extend-checkbox>\r\n          </th>\r\n          <th class=\"center\">\r\n            <nz-icon\r\n              nzType=\"plus\"\r\n              nzTheme=\"outline\"\r\n              class=\"color-primary cursor-pointer icon-size-16\"\r\n              (click)=\"$event.stopPropagation(); add()\"\r\n            ></nz-icon>\r\n          </th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of data?.LstItem; track $index; let i = $index) {\r\n          @if (selectedRow != row) {\r\n            <tr (click)=\"selectedRow = row\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>{{ row.Code }}</td>\r\n              <td>{{ row.Value }}</td>\r\n              <td>{{ row.Description }}</td>\r\n              <td class=\"text-center\">\r\n                @if (row.IsActive) {\r\n                  <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n                }\r\n              </td>\r\n              <td class=\"text-center\">\r\n                <a\r\n                  nz-popconfirm\r\n                  nzOkDanger\r\n                  nzPopconfirmPlacement=\"top\"\r\n                  [nzPopconfirmTitle]=\"TranslateKey.CONFIRM_DELETE | translate\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  (nzOnConfirm)=\"delete(row)\"\r\n                >\r\n                  <i nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn cursor-pointer icon-size-16\"></i>\r\n                </a>\r\n              </td>\r\n            </tr>\r\n          } @else {\r\n            <tr (keyup.enter)=\"save()\">\r\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n              <td>\r\n                <extend-input [required]=\"true\" [(_ngModel)]=\"selectedRow.Code\"></extend-input>\r\n              </td>\r\n              <td>\r\n                <extend-input [(_ngModel)]=\"selectedRow.Value\"></extend-input>\r\n              </td>\r\n              <td class=\"form-item-no-bottom\">\r\n                <extend-textarea [minRows]=\"1\" [(_ngModel)]=\"selectedRow.Description\"></extend-textarea>\r\n              </td>\r\n              <td class=\"text-center\">\r\n                <extend-checkbox [(_ngModel)]=\"selectedRow.IsActive\"></extend-checkbox>\r\n              </td>\r\n              <td class=\"text-center\">\r\n                <nz-icon\r\n                  nzType=\"save\"\r\n                  nzTheme=\"outline\"\r\n                  class=\"color-primary cursor-pointer icon-size-16\"\r\n                  (click)=\"$event.stopPropagation(); save()\"\r\n                ></nz-icon>\r\n              </td>\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-row nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data?.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }] });
 
-const URLs$6 = {
+const URLs$7 = {
     getById: '/api/file/GetById',
     getAll: '/api/file/GetAll',
     getList: '/api/file/GetList',
@@ -7370,27 +7616,30 @@ class FileService extends HTTPService {
     commonService = inject(CommonService);
     getById(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$6.getById, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$7.getById, params);
     }
     getAll() {
-        return this.post(AppGlobals.apiEndpoint + URLs$6.getAll);
+        return this.post(AppGlobals.apiEndpoint + URLs$7.getAll);
     }
     getList(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$6.getList, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$7.getList, filter);
     }
     getPaging(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$6.getPaging, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$7.getPaging, filter);
     }
     addOrEdit(obj) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$6.addOrEdit, obj);
+        return this.postData(AppGlobals.apiEndpoint + URLs$7.addOrEdit, obj);
     }
     delete(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$6.delete, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$7.delete, params);
     }
     downloadFile(id) {
         const params = new HttpParams().append('id', id);
-        return firstValueFrom(this.httpClient.post(`${AppGlobals.apiEndpoint}/api/file/downloadFile`, {}, { responseType: ENUM_ResponseType.ARRAYBUFFER, params: params }));
+        return firstValueFrom(this.httpClient.get(`${AppGlobals.apiEndpoint}/api/file/Download`, {
+            responseType: ENUM_ResponseType.ARRAYBUFFER,
+            params: params,
+        }));
     }
     downloadFileByCode(Code) {
         const params = new HttpParams().append('Code', Code);
@@ -7428,7 +7677,7 @@ class FileService extends HTTPService {
         });
     }
     addFileWithRef(obj) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$6.addFileWithRef, obj);
+        return this.postData(AppGlobals.apiEndpoint + URLs$7.addFileWithRef, obj);
     }
     getAnhWithRef(Ref_Table, Ref_Id) {
         return this.commonService.ESP({
@@ -7437,7 +7686,7 @@ class FileService extends HTTPService {
         });
     }
     moveFileToDisk(obj) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$6.moveFileToDisk, obj);
+        return this.postData(AppGlobals.apiEndpoint + URLs$7.moveFileToDisk, obj);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: FileService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: FileService, providedIn: 'root' });
@@ -7707,7 +7956,7 @@ class UserListComponent extends BaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: UserListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: UserListComponent, isStandalone: true, selector: "app-user-list", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-add (click)=\"edit(null)\"></button-add>\r\n      <button-search (click)=\"search()\"></button-search>\r\n      <button nz-button nz-dropdown [nzDropdownMenu]=\"menuAction\" nzTrigger=\"click\">\r\n        <nz-icon nzType=\"more\" nzTheme=\"outline\" />\r\n        <!-- {{ TranslateKey.ACTION | translate }} -->\r\n      </button>\r\n      <nz-dropdown-menu #menuAction=\"nzDropdownMenu\">\r\n        <ul nz-menu>\r\n          <li nz-menu-item (click)=\"import()\">Import</li>\r\n        </ul>\r\n      </nz-dropdown-menu>\r\n    </div>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzFrontPagination]=\"false\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th>T\u00EAn \u0111\u0103ng nh\u1EADp</th>\r\n          <th>T\u00EAn ng\u01B0\u1EDDi d\u00F9ng</th>\r\n          <th>\u0110\u01A1n v\u1ECB</th>\r\n          <th nzWidth=\"75px\">Hi\u1EC7u l\u1EF1c</th>\r\n          <th nzWidth=\"100px\">\u0110ang online</th>\r\n          <th nzWidth=\"75px\">Thao t\u00E1c</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th><extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.UserName\"></extend-input></th>\r\n          <th><extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.FullName\"></extend-input></th>\r\n          <th><extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.OrgName\"></extend-input></th>\r\n          <th></th>\r\n          <th class=\"center\"><extend-checkbox [(_ngModel)]=\"showOnlineOnly\"></extend-checkbox></th>\r\n          <th></th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of getLstUser(); track $index; let i = $index) {\r\n          <tr>\r\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n            <td class=\"link-detail\" (click)=\"edit(row)\">{{ row.UserName }}</td>\r\n            <td>{{ row.FullName }}</td>\r\n            <td>\r\n              {{ row.OrgName }}\r\n              <div *ngIf=\"row.LstOrgName\" [innerHtml]=\"row.LstOrgName\"></div>\r\n            </td>\r\n            <td class=\"center\">\r\n              @if (row.IsActive) {\r\n                <icon-check></icon-check>\r\n              }\r\n            </td>\r\n            <td class=\"text-center\">\r\n              @if (SignalRService.connection?.state == HubConnectionState.Connected && row.LoginStatus) {\r\n                <icon-check></icon-check>\r\n              }\r\n            </td>\r\n            <td class=\"center\">\r\n              <icon-edit (click)=\"edit(row)\"></icon-edit>\r\n              <box [width]=\"4\"></box><icon-delete (click)=\"delete(row)\"></icon-delete>\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col [nzSpan]=\"24\">\r\n    <div nz-flex nzJustify=\"end\" nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<nz-dropdown-menu #menu=\"nzDropdownMenu\">\r\n  <div class=\"ant-table-filter-dropdown\">\r\n    <div class=\"search-box\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        [(ngModel)]=\"filter.UserName\"\r\n        [appAutoFocus]=\"filter.isUserNameSearch\"\r\n        (keyup.enter)=\"search()\"\r\n      />\r\n      <button nz-button nzSize=\"small\" nzType=\"primary\" (click)=\"search()\" class=\"search-button\">\r\n        {{ \"SEARCH\" | translate }}\r\n      </button>\r\n      <button nz-button nzSize=\"small\" (click)=\"filter.UserName = ''; search()\">{{ \"RESET\" | translate }}</button>\r\n    </div>\r\n  </div>\r\n</nz-dropdown-menu>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "component", type: ButtonAdd, selector: "button-add" }, { kind: "component", type: ButtonSearch, selector: "button-search" }, { kind: "component", type: IconCheck, selector: "icon-check", inputs: ["size"], outputs: ["click"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzPopconfirmModule }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "directive", type: i4$1.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$1.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "directive", type: i5$4.NzDropDownDirective, selector: "[nz-dropdown]", inputs: ["nzDropdownMenu", "nzTrigger", "nzMatchWidthElement", "nzBackdrop", "nzClickHide", "nzDisabled", "nzVisible", "nzOverlayClassName", "nzOverlayStyle", "nzPlacement"], outputs: ["nzVisibleChange"], exportAs: ["nzDropdown"] }, { kind: "component", type: i5$4.NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }, { kind: "directive", type: i5$4.NzDropdownButtonDirective, selector: "[nz-button][nz-dropdown]" }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$2.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "component", type: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconEdit, selector: "icon-edit", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i5$3.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "ngmodule", type: FormsModule }, { kind: "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: "directive", type: AutoFocusDirective, selector: "[appAutoFocus]", inputs: ["appAutoFocus"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$3.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i4.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: UserListComponent, isStandalone: true, selector: "app-user-list", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-add (click)=\"edit(null)\"></button-add>\r\n      <button-search (click)=\"search()\"></button-search>\r\n      <button nz-button nz-dropdown [nzDropdownMenu]=\"menuAction\" nzTrigger=\"click\">\r\n        <nz-icon nzType=\"more\" nzTheme=\"outline\" />\r\n        <!-- {{ TranslateKey.ACTION | translate }} -->\r\n      </button>\r\n      <nz-dropdown-menu #menuAction=\"nzDropdownMenu\">\r\n        <ul nz-menu>\r\n          <li nz-menu-item (click)=\"import()\">Import</li>\r\n        </ul>\r\n      </nz-dropdown-menu>\r\n    </div>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th\r\n            nzWidth=\"200px\"\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'UserName' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'UserName'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            T\u00EAn \u0111\u0103ng nh\u1EADp\r\n          </th>\r\n          <th\r\n            nzWidth=\"250px\"\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'FullName' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'FullName'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            T\u00EAn ng\u01B0\u1EDDi d\u00F9ng\r\n          </th>\r\n          <th>\u0110\u01A1n v\u1ECB</th>\r\n          <th\r\n            nzWidth=\"90px\"\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'IsActive' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'IsActive'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Hi\u1EC7u l\u1EF1c\r\n          </th>\r\n          <th nzWidth=\"100px\">\u0110ang online</th>\r\n          <th nzWidth=\"75px\">Thao t\u00E1c</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th><extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.UserName\"></extend-input></th>\r\n          <th><extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.FullName\"></extend-input></th>\r\n          <th><extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.OrgName\"></extend-input></th>\r\n          <th></th>\r\n          <th class=\"center\"><extend-checkbox [(_ngModel)]=\"showOnlineOnly\"></extend-checkbox></th>\r\n          <th></th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of getLstUser(); track $index; let i = $index) {\r\n          <tr>\r\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n            <td class=\"link-detail\" (click)=\"edit(row)\">{{ row.UserName }}</td>\r\n            <td>{{ row.FullName }}</td>\r\n            <td>\r\n              {{ row.OrgName }}\r\n              <div *ngIf=\"row.LstOrgName\" [innerHtml]=\"row.LstOrgName\"></div>\r\n            </td>\r\n            <td class=\"center\">\r\n              @if (row.IsActive) {\r\n                <icon-check></icon-check>\r\n              }\r\n            </td>\r\n            <td class=\"text-center\">\r\n              @if (SignalRService.connection?.state == HubConnectionState.Connected && row.LoginStatus) {\r\n                <icon-check></icon-check>\r\n              }\r\n            </td>\r\n            <td class=\"center\">\r\n              <icon-edit (click)=\"edit(row)\"></icon-edit>\r\n              <box [width]=\"4\"></box><icon-delete (click)=\"delete(row)\"></icon-delete>\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col [nzSpan]=\"24\">\r\n    <div nz-flex nzJustify=\"end\" nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "component", type: ButtonAdd, selector: "button-add" }, { kind: "component", type: ButtonSearch, selector: "button-search" }, { kind: "component", type: IconCheck, selector: "icon-check", inputs: ["size"], outputs: ["click"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzPopconfirmModule }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "directive", type: i4$1.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$1.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "directive", type: i5$4.NzDropDownDirective, selector: "[nz-dropdown]", inputs: ["nzDropdownMenu", "nzTrigger", "nzMatchWidthElement", "nzBackdrop", "nzClickHide", "nzDisabled", "nzVisible", "nzOverlayClassName", "nzOverlayStyle", "nzPlacement"], outputs: ["nzVisibleChange"], exportAs: ["nzDropdown"] }, { kind: "component", type: i5$4.NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }, { kind: "directive", type: i5$4.NzDropdownButtonDirective, selector: "[nz-button][nz-dropdown]" }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$2.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "component", type: i6$2.NzThAddOnComponent, selector: "th[nzColumnKey], th[nzSortFn], th[nzSortOrder], th[nzFilters], th[nzShowSort], th[nzShowFilter], th[nzCustomFilter]", inputs: ["nzColumnKey", "nzFilterMultiple", "nzSortOrder", "nzSortPriority", "nzSortDirections", "nzFilters", "nzSortFn", "nzFilterFn", "nzShowSort", "nzShowFilter", "nzCustomFilter"], outputs: ["nzCheckedChange", "nzSortOrderChange", "nzFilterChange"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "component", type: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconEdit, selector: "icon-edit", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i5$3.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$3.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i4.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: UserListComponent, decorators: [{
             type: Component,
@@ -7733,7 +7982,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         NzGridModule,
                         NzFlexModule,
                         NzButtonModule,
-                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-add (click)=\"edit(null)\"></button-add>\r\n      <button-search (click)=\"search()\"></button-search>\r\n      <button nz-button nz-dropdown [nzDropdownMenu]=\"menuAction\" nzTrigger=\"click\">\r\n        <nz-icon nzType=\"more\" nzTheme=\"outline\" />\r\n        <!-- {{ TranslateKey.ACTION | translate }} -->\r\n      </button>\r\n      <nz-dropdown-menu #menuAction=\"nzDropdownMenu\">\r\n        <ul nz-menu>\r\n          <li nz-menu-item (click)=\"import()\">Import</li>\r\n        </ul>\r\n      </nz-dropdown-menu>\r\n    </div>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzFrontPagination]=\"false\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th>T\u00EAn \u0111\u0103ng nh\u1EADp</th>\r\n          <th>T\u00EAn ng\u01B0\u1EDDi d\u00F9ng</th>\r\n          <th>\u0110\u01A1n v\u1ECB</th>\r\n          <th nzWidth=\"75px\">Hi\u1EC7u l\u1EF1c</th>\r\n          <th nzWidth=\"100px\">\u0110ang online</th>\r\n          <th nzWidth=\"75px\">Thao t\u00E1c</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th><extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.UserName\"></extend-input></th>\r\n          <th><extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.FullName\"></extend-input></th>\r\n          <th><extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.OrgName\"></extend-input></th>\r\n          <th></th>\r\n          <th class=\"center\"><extend-checkbox [(_ngModel)]=\"showOnlineOnly\"></extend-checkbox></th>\r\n          <th></th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of getLstUser(); track $index; let i = $index) {\r\n          <tr>\r\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n            <td class=\"link-detail\" (click)=\"edit(row)\">{{ row.UserName }}</td>\r\n            <td>{{ row.FullName }}</td>\r\n            <td>\r\n              {{ row.OrgName }}\r\n              <div *ngIf=\"row.LstOrgName\" [innerHtml]=\"row.LstOrgName\"></div>\r\n            </td>\r\n            <td class=\"center\">\r\n              @if (row.IsActive) {\r\n                <icon-check></icon-check>\r\n              }\r\n            </td>\r\n            <td class=\"text-center\">\r\n              @if (SignalRService.connection?.state == HubConnectionState.Connected && row.LoginStatus) {\r\n                <icon-check></icon-check>\r\n              }\r\n            </td>\r\n            <td class=\"center\">\r\n              <icon-edit (click)=\"edit(row)\"></icon-edit>\r\n              <box [width]=\"4\"></box><icon-delete (click)=\"delete(row)\"></icon-delete>\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col [nzSpan]=\"24\">\r\n    <div nz-flex nzJustify=\"end\" nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<nz-dropdown-menu #menu=\"nzDropdownMenu\">\r\n  <div class=\"ant-table-filter-dropdown\">\r\n    <div class=\"search-box\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        [(ngModel)]=\"filter.UserName\"\r\n        [appAutoFocus]=\"filter.isUserNameSearch\"\r\n        (keyup.enter)=\"search()\"\r\n      />\r\n      <button nz-button nzSize=\"small\" nzType=\"primary\" (click)=\"search()\" class=\"search-button\">\r\n        {{ \"SEARCH\" | translate }}\r\n      </button>\r\n      <button nz-button nzSize=\"small\" (click)=\"filter.UserName = ''; search()\">{{ \"RESET\" | translate }}</button>\r\n    </div>\r\n  </div>\r\n</nz-dropdown-menu>\r\n" }]
+                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n      <button-add (click)=\"edit(null)\"></button-add>\r\n      <button-search (click)=\"search()\"></button-search>\r\n      <button nz-button nz-dropdown [nzDropdownMenu]=\"menuAction\" nzTrigger=\"click\">\r\n        <nz-icon nzType=\"more\" nzTheme=\"outline\" />\r\n        <!-- {{ TranslateKey.ACTION | translate }} -->\r\n      </button>\r\n      <nz-dropdown-menu #menuAction=\"nzDropdownMenu\">\r\n        <ul nz-menu>\r\n          <li nz-menu-item (click)=\"import()\">Import</li>\r\n        </ul>\r\n      </nz-dropdown-menu>\r\n    </div>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"this.data.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th\r\n            nzWidth=\"200px\"\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'UserName' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'UserName'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            T\u00EAn \u0111\u0103ng nh\u1EADp\r\n          </th>\r\n          <th\r\n            nzWidth=\"250px\"\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'FullName' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'FullName'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            T\u00EAn ng\u01B0\u1EDDi d\u00F9ng\r\n          </th>\r\n          <th>\u0110\u01A1n v\u1ECB</th>\r\n          <th\r\n            nzWidth=\"90px\"\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'IsActive' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'IsActive'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Hi\u1EC7u l\u1EF1c\r\n          </th>\r\n          <th nzWidth=\"100px\">\u0110ang online</th>\r\n          <th nzWidth=\"75px\">Thao t\u00E1c</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th><extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.UserName\"></extend-input></th>\r\n          <th><extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.FullName\"></extend-input></th>\r\n          <th><extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.OrgName\"></extend-input></th>\r\n          <th></th>\r\n          <th class=\"center\"><extend-checkbox [(_ngModel)]=\"showOnlineOnly\"></extend-checkbox></th>\r\n          <th></th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of getLstUser(); track $index; let i = $index) {\r\n          <tr>\r\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n            <td class=\"link-detail\" (click)=\"edit(row)\">{{ row.UserName }}</td>\r\n            <td>{{ row.FullName }}</td>\r\n            <td>\r\n              {{ row.OrgName }}\r\n              <div *ngIf=\"row.LstOrgName\" [innerHtml]=\"row.LstOrgName\"></div>\r\n            </td>\r\n            <td class=\"center\">\r\n              @if (row.IsActive) {\r\n                <icon-check></icon-check>\r\n              }\r\n            </td>\r\n            <td class=\"text-center\">\r\n              @if (SignalRService.connection?.state == HubConnectionState.Connected && row.LoginStatus) {\r\n                <icon-check></icon-check>\r\n              }\r\n            </td>\r\n            <td class=\"center\">\r\n              <icon-edit (click)=\"edit(row)\"></icon-edit>\r\n              <box [width]=\"4\"></box><icon-delete (click)=\"delete(row)\"></icon-delete>\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col [nzSpan]=\"24\">\r\n    <div nz-flex nzJustify=\"end\" nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }] });
 
 class ResetPassComponent extends BaseComponent {
@@ -7797,7 +8046,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                     ], template: "<form nz-form [formGroup]=\"formData\">\r\n  <div nz-row>\r\n    <div nz-col nzSpan=\"24\">\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"UserName\" nzLabelAlign=\"left\" nzNoColon=\"true\">\r\n          T\u00EAn \u0111\u0103ng nh\u1EADp\r\n        </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\">\r\n          <input nz-input formControlName=\"UserName\" autocomplete=\"off\" nzDisabled />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Password\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n          M\u1EADt kh\u1EA9u\r\n        </nz-form-label>\r\n        <nz-form-control nzErrorTip=\"{{ 'REQUIRED' | translate }}\">\r\n          <nz-input-group [nzSuffix]=\"visiblePass ? suffixTemplateHiddenPassword : suffixTemplateShowPassword\">\r\n            <input type=\"{{ passwordType }}\" nz-input formControlName=\"Password\" autocomplete=\"new-password\" />\r\n          </nz-input-group>\r\n        </nz-form-control>\r\n        <ng-template #suffixTemplateShowPassword>\r\n          <nz-icon\r\n            nzType=\"eye\"\r\n            nzTheme=\"outline\"\r\n            nz-tooltip\r\n            nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n            nzTooltipPlacement=\"right\"\r\n            (click)=\"visiblePass = !visiblePass; passwordType = 'text'\"\r\n          />\r\n        </ng-template>\r\n        <ng-template #suffixTemplateHiddenPassword>\r\n          <nz-icon\r\n            nzType=\"eye-invisible\"\r\n            nzTheme=\"outline\"\r\n            nz-tooltip\r\n            nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n            nzTooltipPlacement=\"right\"\r\n            (click)=\"visiblePass = !visiblePass; passwordType = 'password'\"\r\n          />\r\n        </ng-template>\r\n      </nz-form-item>\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"RetypePassword\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n          Nh\u1EADp l\u1EA1i M\u1EADt kh\u1EA9u\r\n        </nz-form-label>\r\n        <nz-form-control nzErrorTip=\"M\u1EADt kh\u1EA9u kh\u00F4ng kh\u1EDBp\">\r\n          <nz-input-group [nzSuffix]=\"visibleRePass ? suffixTemplateHiddenRePassword : suffixTemplateShowRePassword\">\r\n            <input type=\"{{ rePasswordType }}\" nz-input formControlName=\"RetypePassword\" autocomplete=\"new-password\" />\r\n          </nz-input-group>\r\n        </nz-form-control>\r\n        <ng-template #suffixTemplateShowRePassword>\r\n          <nz-icon\r\n            nzType=\"eye\"\r\n            nzTheme=\"outline\"\r\n            nz-tooltip\r\n            nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n            nzTooltipPlacement=\"right\"\r\n            (click)=\"visibleRePass = !visibleRePass; rePasswordType = 'text'\"\r\n          />\r\n        </ng-template>\r\n        <ng-template #suffixTemplateHiddenRePassword>\r\n          <nz-icon\r\n            nzType=\"eye-invisible\"\r\n            nzTheme=\"outline\"\r\n            nz-tooltip\r\n            nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n            nzTooltipPlacement=\"right\"\r\n            (click)=\"visibleRePass = !visibleRePass; rePasswordType = 'password'\"\r\n          />\r\n        </ng-template>\r\n      </nz-form-item>\r\n    </div>\r\n    <div nz-col nzSpan=\"24\">\r\n      <div nz-flex nzJustify=\"end\" nzGap=\"small\">\r\n        <button nz-button nzType=\"default\" (click)=\"close()\">{{ TranslateKey.CLOSE | translate }}</button>\r\n        <button nz-button nzType=\"primary\" (click)=\"submit()\" nzDanger>{{ TranslateKey.OK | translate }}</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</form>\r\n" }]
         }] });
 
-const URLs$5 = {
+const URLs$6 = {
     getById: '/api/App_Setting/GetById',
     getAll: '/api/App_Setting/GetAll',
     getList: '/api/App_Setting/GetList',
@@ -7808,6 +8057,7 @@ const URLs$5 = {
     GetAllConfig: '/api/App_Setting/GetAllConfig',
     ApplyConfig: '/api/Setting/ApplyConfig',
     GetDbInfo: '/api/App_Setting/GetDbInfo',
+    ConfigTheme: '/api/public/ConfigTheme',
 };
 class SettingService extends HTTPService {
     cms = inject(CommonService);
@@ -7818,10 +8068,10 @@ class SettingService extends HTTPService {
         });
     }
     getAll() {
-        return this.post(AppGlobals.apiEndpoint + URLs$5.getAll);
+        return this.post(AppGlobals.apiEndpoint + URLs$6.getAll);
     }
     getList(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$5.getList, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$6.getList, filter);
     }
     getPaging(filter) {
         return this.cms.ESP({
@@ -7837,29 +8087,27 @@ class SettingService extends HTTPService {
     }
     delete(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$5.delete, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$6.delete, params);
     }
     getByCodeAnonymous(code) {
         const params = new HttpParams().append('Code', code);
-        return this.getParams(AppGlobals.apiEndpoint + URLs$5.getByCodeAnonymous, params);
+        return this.getParams(AppGlobals.apiEndpoint + URLs$6.getByCodeAnonymous, params);
     }
     // getGroupByCodeAnonymous(code: string) {
     //   const params = new HttpParams().append('Code', code);
     //   return this.getParams(AppGlobals.apiEndpoint + URLs.getByCodeAnonymous, params);
     // }
     getAllConfig() {
-        return this.post(AppGlobals.apiEndpoint + URLs$5.GetAllConfig);
+        return this.post(AppGlobals.apiEndpoint + URLs$6.GetAllConfig);
     }
     applyConfig(config) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$5.ApplyConfig, config);
+        return this.postData(AppGlobals.apiEndpoint + URLs$6.ApplyConfig, config);
     }
     getDbInfo() {
-        return this.post(AppGlobals.apiEndpoint + URLs$5.GetDbInfo);
+        return this.post(AppGlobals.apiEndpoint + URLs$6.GetDbInfo);
     }
     loadConfigTheme() {
-        return this.cms.ESP({
-            SPN: 'App_Setting_getConfigTheme',
-        });
+        return this.get(AppGlobals.apiEndpoint + URLs$6.ConfigTheme);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SettingService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SettingService, providedIn: 'root' });
@@ -7871,59 +8119,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 }]
         }] });
 
-class App_JobTitle {
-    // #region properties
-    App_JobTitle_Id;
-    App_Org_Id;
-    CreatedUser;
-    CreatedDate;
-    UpdatedUser;
-    UpdatedDate;
-    IsActive;
-    Code;
-    Name;
-    // #endregion properties
-    constructor(obj) {
-        obj = obj || {};
-        this.App_JobTitle_Id = obj.App_JobTitle_Id || null;
-        this.App_Org_Id = obj.App_Org_Id || '';
-        this.CreatedUser = obj.CreatedUser || '';
-        this.CreatedDate = obj.CreatedDate || null;
-        this.UpdatedUser = obj.UpdatedUser || '';
-        this.UpdatedDate = obj.UpdatedDate || null;
-        this.IsActive = obj.IsActive || false;
-        this.Code = obj.Code || '';
-        this.Name = obj.Name || '';
-    }
-}
-class App_JobTitleFilter extends GridFilter {
-    App_JobTitle_Id;
-    App_Org_Id;
-    CreatedUser;
-    CreatedDate;
-    UpdatedUser;
-    UpdatedDate;
-    IsActive;
-    Code;
-    Name;
-    CodeVisible;
-    NameVisible;
-    constructor(obj) {
-        super();
-        obj = obj || {};
-        this.App_JobTitle_Id = obj.App_JobTitle_Id || null;
-        this.App_Org_Id = obj.App_Org_Id || null;
-        this.CreatedUser = obj.CreatedUser || null;
-        this.CreatedDate = obj.CreatedDate || null;
-        this.UpdatedUser = obj.UpdatedUser || null;
-        this.UpdatedDate = obj.UpdatedDate || null;
-        this.IsActive = obj.IsActive || null;
-        this.Code = obj.Code || null;
-        this.Name = obj.Name || null;
-    }
-}
-
-const URLs$4 = {
+const URLs$5 = {
     getById: '/api/App_JobTitle/GetById',
     getByIdEx: '/api/App_JobTitle/getByIdEx',
     getAll: '/api/App_JobTitle/GetAll',
@@ -7935,27 +8131,27 @@ const URLs$4 = {
 class JobTitleService extends HTTPService {
     getById(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$4.getById, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$5.getById, params);
     }
     getByIdEx(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$4.getByIdEx, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$5.getByIdEx, params);
     }
     getAll() {
-        return this.post(AppGlobals.apiEndpoint + URLs$4.getAll);
+        return this.post(AppGlobals.apiEndpoint + URLs$5.getAll);
     }
     getList(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$4.getList, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$5.getList, filter);
     }
     getPaging(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$4.getPaging, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$5.getPaging, filter);
     }
     addOrEdit(obj) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$4.addOrEdit, obj);
+        return this.postData(AppGlobals.apiEndpoint + URLs$5.addOrEdit, obj);
     }
     delete(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$4.delete, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$5.delete, params);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: JobTitleService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: JobTitleService, providedIn: 'root' });
@@ -8097,14 +8293,12 @@ class UserDetailComponent extends BaseComponent {
         }
     }
     async getAllJobTitle() {
-        try {
-            const filter = new App_JobTitleFilter();
-            const res = await this.jobTitleService.getList(filter);
-            this.lstJobTitle = res.Data || [];
-        }
-        catch (err) {
-            this.handleError(err);
-        }
+        // try {
+        //   const res = await this.jobTitleService.getAll( );
+        //   this.lstJobTitle = res.Data || [];
+        // } catch (err) {
+        //   this.handleError(err);
+        // }
     }
     updateBreadcrumb() {
         Breadcrumb.lstBreadcrumb = [
@@ -8404,7 +8598,7 @@ class UserDetailComponent extends BaseComponent {
         this.notiService.success('Đã xóa Chức danh khỏi danh sách');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: UserDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: UserDetailComponent, isStandalone: true, selector: "app-user-detail", usesInheritance: true, ngImport: i0, template: "<form nz-form [formGroup]=\"formData\">\r\n  <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n    @if (item?.App_User_Id) {\r\n      <button nz-button nzType=\"primary\" type=\"button\" (click)=\"resetPassword()\">\r\n        {{ TranslateKey.RESET_PASSWORD | translate }}\r\n      </button>\r\n      <button nz-button nzType=\"primary\" type=\"button\" nzDanger (click)=\"delete()\">\r\n        {{ TranslateKey.DELETE | translate }}\r\n      </button>\r\n    }\r\n    <button-save (click)=\"save()\"></button-save>\r\n    <button-back (click)=\"goto('/admin/user')\"></button-back>\r\n  </div>\r\n\r\n  <nz-divider></nz-divider>\r\n\r\n  <div nz-row [nzGutter]=\"[16, 16]\">\r\n    <!-- C\u1ED8T TR\u00C1I: FORM USER -->\r\n    <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"UserName\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n          T\u00EAn \u0111\u0103ng nh\u1EADp\r\n        </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n          <input nz-input formControlName=\"UserName\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"FullName\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n          T\u00EAn ng\u01B0\u1EDDi d\u00F9ng\r\n        </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n          <input nz-input formControlName=\"FullName\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Email\" nzLabelAlign=\"left\" nzNoColon=\"true\"> Email </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'Ch\u01B0a \u0111\u00FAng \u0111\u1ECBnh d\u1EA1ng email'\">\r\n          <input nz-input formControlName=\"Email\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <div *ngIf=\"!item?.App_User_Id\" nz-row [nzGutter]=\"16\">\r\n        <div nz-col [nzSpan]=\"24\">\r\n          <nz-form-item>\r\n            <nz-form-label [nzSpan]=\"8\" nzFor=\"Password\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n              M\u1EADt kh\u1EA9u\r\n            </nz-form-label>\r\n            <nz-form-control nzErrorTip=\"{{ 'REQUIRED' | translate }}\">\r\n              <nz-input-group [nzSuffix]=\"visiblePass ? suffixTemplateHiddenPassword : suffixTemplateShowPassword\">\r\n                <input type=\"{{ passwordType }}\" nz-input formControlName=\"Password\" autocomplete=\"new-password\" />\r\n              </nz-input-group>\r\n            </nz-form-control>\r\n            <ng-template #suffixTemplateShowPassword>\r\n              <nz-icon\r\n                nzType=\"eye\"\r\n                nzTheme=\"outline\"\r\n                nz-tooltip\r\n                nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n                nzTooltipPlacement=\"right\"\r\n                (click)=\"visiblePass = !visiblePass; passwordType = 'text'\"\r\n              />\r\n            </ng-template>\r\n            <ng-template #suffixTemplateHiddenPassword>\r\n              <nz-icon\r\n                nzType=\"eye-invisible\"\r\n                nzTheme=\"outline\"\r\n                nz-tooltip\r\n                nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n                nzTooltipPlacement=\"right\"\r\n                (click)=\"visiblePass = !visiblePass; passwordType = 'password'\"\r\n              />\r\n            </ng-template>\r\n          </nz-form-item>\r\n        </div>\r\n        <div nz-col [nzSpan]=\"24\">\r\n          <nz-form-item>\r\n            <nz-form-label [nzSpan]=\"8\" nzFor=\"RetypePassword\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n              Nh\u1EADp l\u1EA1i M\u1EADt kh\u1EA9u\r\n            </nz-form-label>\r\n            <nz-form-control nzErrorTip=\"M\u1EADt kh\u1EA9u kh\u00F4ng kh\u1EDBp\">\r\n              <nz-input-group\r\n                [nzSuffix]=\"visibleRePass ? suffixTemplateHiddenRePassword : suffixTemplateShowRePassword\"\r\n              >\r\n                <input\r\n                  type=\"{{ rePasswordType }}\"\r\n                  nz-input\r\n                  formControlName=\"RetypePassword\"\r\n                  autocomplete=\"new-password\"\r\n                />\r\n              </nz-input-group>\r\n            </nz-form-control>\r\n            <ng-template #suffixTemplateShowRePassword>\r\n              <nz-icon\r\n                nzType=\"eye\"\r\n                nzTheme=\"outline\"\r\n                nz-tooltip\r\n                nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n                nzTooltipPlacement=\"right\"\r\n                (click)=\"visibleRePass = !visibleRePass; rePasswordType = 'text'\"\r\n              />\r\n            </ng-template>\r\n            <ng-template #suffixTemplateHiddenRePassword>\r\n              <nz-icon\r\n                nzType=\"eye-invisible\"\r\n                nzTheme=\"outline\"\r\n                nz-tooltip\r\n                nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n                nzTooltipPlacement=\"right\"\r\n                (click)=\"visibleRePass = !visibleRePass; rePasswordType = 'password'\"\r\n              />\r\n            </ng-template>\r\n          </nz-form-item>\r\n        </div>\r\n      </div>\r\n\r\n      <div nz-row>\r\n        <div nz-col [nzSpan]=\"8\"></div>\r\n        <div nz-col [nzSpan]=\"16\">\r\n          <label nz-checkbox formControlName=\"IsActive\">Active</label>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- C\u1ED8T PH\u1EA2I: TABS ORG & ROLE -->\r\n    <div nz-col [nzSpan]=\"12\">\r\n      <nz-tabset nzType=\"card\" nzSize=\"small\">\r\n        <!-- TAB ORG -->\r\n        <nz-tab nzTitle=\"\u0110\u01A1n v\u1ECB\">\r\n          <div style=\"padding: 8px\">\r\n            <h3 style=\"margin-bottom: 16px\">Danh s\u00E1ch \u0110\u01A1n v\u1ECB</h3>\r\n\r\n            <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n              <span style=\"font-weight: 500\">\u0110\u01A1n v\u1ECB ({{ lstOrgInUser.length }})</span>\r\n              <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddOrgModal()\">\r\n                <span nz-icon nzType=\"plus\"></span>\r\n                Th\u00EAm \u0110\u01A1n v\u1ECB\r\n              </button>\r\n            </div>\r\n\r\n            <div style=\"max-height: 450px; overflow-y: auto\">\r\n              <nz-table\r\n                #orgTable\r\n                [nzData]=\"lstOrgInUser\"\r\n                [nzSize]=\"'small'\"\r\n                [nzShowPagination]=\"lstOrgInUser.length > 20\"\r\n                [nzPageSize]=\"20\"\r\n                [nzBordered]=\"true\"\r\n              >\r\n                <thead>\r\n                  <tr>\r\n                    <th nzWidth=\"40px\">STT</th>\r\n                    <th>\u0110\u01A1n v\u1ECB</th>\r\n                    <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n                  </tr>\r\n                </thead>\r\n                <tbody>\r\n                  <tr *ngFor=\"let item of orgTable.data; let i = index\">\r\n                    <td>{{ i + 1 }}</td>\r\n                    <td>\r\n                      <div style=\"font-weight: 500\">{{ item.Name }}</div>\r\n                      <div style=\"font-size: 12px; color: #888\">{{ item.Code }}</div>\r\n                    </td>\r\n                    <td nzAlign=\"center\">\r\n                      <button\r\n                        nz-button\r\n                        nzType=\"link\"\r\n                        nzDanger\r\n                        nzSize=\"small\"\r\n                        nz-popconfirm\r\n                        nzPopconfirmTitle=\"X\u00F3a \u0110\u01A1n v\u1ECB n\u00E0y?\"\r\n                        nzAutofocus=\"ok\"\r\n                        (nzOnConfirm)=\"deleteOrgFromUser(item)\"\r\n                      >\r\n                        <span nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\r\n                      </button>\r\n                    </td>\r\n                  </tr>\r\n                </tbody>\r\n              </nz-table>\r\n            </div>\r\n          </div>\r\n        </nz-tab>\r\n\r\n        <nz-tab nzTitle=\"Ch\u1EE9c danh\">\r\n          <div style=\"padding: 8px\">\r\n            <h3 style=\"margin-bottom: 16px\">Danh s\u00E1ch Ch\u1EE9c danh</h3>\r\n\r\n            <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n              <span style=\"font-weight: 500\">Ch\u1EE9c danh ({{ lstJobTitleInUser.length }})</span>\r\n              <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddJobTitleModal()\">\r\n                <span nz-icon nzType=\"plus\"></span>\r\n                Th\u00EAm Ch\u1EE9c danh\r\n              </button>\r\n            </div>\r\n\r\n            <div style=\"max-height: 450px; overflow-y: auto\">\r\n              <nz-table\r\n                #orgJobTilte\r\n                [nzData]=\"lstJobTitleInUser\"\r\n                [nzSize]=\"'small'\"\r\n                [nzShowPagination]=\"lstJobTitleInUser.length > 20\"\r\n                [nzPageSize]=\"20\"\r\n              >\r\n                <thead>\r\n                  <tr>\r\n                    <th nzWidth=\"40px\">STT</th>\r\n                    <th>Ch\u1EE9c danh</th>\r\n                    <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n                  </tr>\r\n                </thead>\r\n                <tbody>\r\n                  <tr *ngFor=\"let item of orgJobTilte.data; let i = index\">\r\n                    <td>{{ i + 1 }}</td>\r\n                    <td>\r\n                      <div style=\"font-weight: 500\">{{ item.Name }}</div>\r\n                      <div style=\"font-size: 12px; color: #888\">{{ item.Code }}</div>\r\n                    </td>\r\n                    <td nzAlign=\"center\">\r\n                      <button\r\n                        nz-button\r\n                        nzType=\"link\"\r\n                        nzDanger\r\n                        nzSize=\"small\"\r\n                        nz-popconfirm\r\n                        nzPopconfirmTitle=\"X\u00F3a ch\u1EE9c danh n\u00E0y?\"\r\n                        nzAutofocus=\"ok\"\r\n                        (nzOnConfirm)=\"deleteJobTitleFromUser(item)\"\r\n                      >\r\n                        <span nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\r\n                      </button>\r\n                    </td>\r\n                  </tr>\r\n                </tbody>\r\n              </nz-table>\r\n            </div>\r\n          </div>\r\n        </nz-tab>\r\n\r\n        <!-- TAB ROLE -->\r\n        <nz-tab nzTitle=\"Nh\u00F3m quy\u1EC1n\">\r\n          <div style=\"padding: 8px\">\r\n            <h3 style=\"margin-bottom: 16px\">Danh s\u00E1ch Nh\u00F3m quy\u1EC1n</h3>\r\n\r\n            <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n              <span style=\"font-weight: 500\">Roles ({{ lstRoleInUser.length }})</span>\r\n              <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddRoleModal()\">\r\n                <span nz-icon nzType=\"plus\"></span>\r\n                Th\u00EAm Role\r\n              </button>\r\n            </div>\r\n\r\n            <div style=\"max-height: 450px; overflow-y: auto\">\r\n              <nz-table\r\n                #roleTable\r\n                [nzData]=\"lstRoleInUser\"\r\n                [nzSize]=\"'small'\"\r\n                [nzShowPagination]=\"lstRoleInUser.length > 20\"\r\n                [nzPageSize]=\"20\"\r\n                [nzBordered]=\"true\"\r\n              >\r\n                <thead>\r\n                  <tr>\r\n                    <th nzWidth=\"40px\">STT</th>\r\n                    <th>Role</th>\r\n                    <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n                  </tr>\r\n                </thead>\r\n                <tbody>\r\n                  <tr *ngFor=\"let item of roleTable.data; let i = index\">\r\n                    <td>{{ i + 1 }}</td>\r\n                    <td>\r\n                      <div style=\"font-weight: 500\">{{ item.Name }}</div>\r\n                      <div style=\"font-size: 12px; color: #888\">{{ item.Code }}</div>\r\n                    </td>\r\n                    <td nzAlign=\"center\">\r\n                      <button\r\n                        nz-button\r\n                        nzType=\"link\"\r\n                        nzDanger\r\n                        nzSize=\"small\"\r\n                        nz-popconfirm\r\n                        nzPopconfirmTitle=\"X\u00F3a Role n\u00E0y?\"\r\n                        (nzOnConfirm)=\"deleteRoleFromUser(item)\"\r\n                      >\r\n                        <span nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\r\n                      </button>\r\n                    </td>\r\n                  </tr>\r\n                </tbody>\r\n              </nz-table>\r\n            </div>\r\n          </div>\r\n        </nz-tab>\r\n      </nz-tabset>\r\n    </div>\r\n  </div>\r\n</form>\r\n\r\n<!-- Modal ch\u1ECDn Org -->\r\n<nz-modal\r\n  [(nzVisible)]=\"isAddOrgModalVisible\"\r\n  nzTitle=\"Th\u00EAm \u0110\u01A1n v\u1ECB v\u00E0o User\"\r\n  [nzWidth]=\"700\"\r\n  (nzOnCancel)=\"closeAddOrgModal()\"\r\n  (nzOnOk)=\"addOrgsToUser()\"\r\n  nzOkText=\"Th\u00EAm\"\r\n  nzCancelText=\"H\u1EE7y\"\r\n>\r\n  <ng-container *nzModalContent>\r\n    <nz-alert\r\n      *ngIf=\"!isOneUserMultiOrgs\"\r\n      nzType=\"info\"\r\n      nzMessage=\"Ch\u1EC9 \u0111\u01B0\u1EE3c ch\u1ECDn 1 \u0110\u01A1n v\u1ECB\"\r\n      nzShowIcon\r\n      style=\"margin-bottom: 16px\"\r\n    ></nz-alert>\r\n    <!-- Search box -->\r\n    <nz-input-group [nzPrefix]=\"prefixIconSearchOrg\" style=\"margin-bottom: 16px\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        placeholder=\"T\u00ECm ki\u1EBFm \u0110\u01A1n v\u1ECB...\"\r\n        [(ngModel)]=\"searchOrgText\"\r\n        (ngModelChange)=\"filterAvailableOrgs()\"\r\n      />\r\n    </nz-input-group>\r\n    <ng-template #prefixIconSearchOrg>\r\n      <span nz-icon nzType=\"search\"></span>\r\n    </ng-template>\r\n\r\n    <nz-table\r\n      #addOrgTable\r\n      [nzData]=\"lstFilteredOrg\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"true\"\r\n      [nzPageSize]=\"10\"\r\n      [nzLoading]=\"isLoadingAvailableOrgs\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th\r\n            nzWidth=\"60px\"\r\n            [nzShowCheckbox]=\"isOneUserMultiOrgs\"\r\n            [(nzChecked)]=\"isAllOrgChecked\"\r\n            (nzCheckedChange)=\"onAllOrgChecked($event)\"\r\n            [nzIndeterminate]=\"isOrgIndeterminate\"\r\n          ></th>\r\n          <th nzWidth=\"150px\">M\u00E3</th>\r\n          <th>T\u00EAn</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let item of addOrgTable.data\">\r\n          <td nzAlign=\"center\">\r\n            <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onOrgChecked(item, $event)\"></label>\r\n          </td>\r\n          <td>{{ item.Code }}</td>\r\n          <td>{{ item.TreeNodeName || item.Name }}</td>\r\n        </tr>\r\n      </tbody>\r\n    </nz-table>\r\n  </ng-container>\r\n</nz-modal>\r\n\r\n<!-- Modal ch\u1ECDn Role -->\r\n<nz-modal\r\n  [(nzVisible)]=\"isAddRoleModalVisible\"\r\n  nzTitle=\"Th\u00EAm Role v\u00E0o User\"\r\n  [nzWidth]=\"700\"\r\n  (nzOnCancel)=\"closeAddRoleModal()\"\r\n  (nzOnOk)=\"addRolesToUser()\"\r\n  nzOkText=\"Th\u00EAm\"\r\n  nzCancelText=\"H\u1EE7y\"\r\n>\r\n  <ng-container *nzModalContent>\r\n    <!-- Search box -->\r\n    <nz-input-group [nzPrefix]=\"prefixIconSearchRole\" style=\"margin-bottom: 16px\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        placeholder=\"T\u00ECm ki\u1EBFm Role...\"\r\n        [(ngModel)]=\"searchRoleText\"\r\n        (ngModelChange)=\"filterAvailableRoles()\"\r\n      />\r\n    </nz-input-group>\r\n    <ng-template #prefixIconSearchRole>\r\n      <span nz-icon nzType=\"search\"></span>\r\n    </ng-template>\r\n\r\n    <nz-table\r\n      #addRoleTable\r\n      [nzData]=\"lstFilteredRole\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"true\"\r\n      [nzPageSize]=\"10\"\r\n      [nzLoading]=\"isLoadingAvailableRoles\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th\r\n            nzWidth=\"60px\"\r\n            nzShowCheckbox\r\n            [(nzChecked)]=\"isAllRoleChecked\"\r\n            (nzCheckedChange)=\"onAllRoleChecked($event)\"\r\n            [nzIndeterminate]=\"isRoleIndeterminate\"\r\n          ></th>\r\n          <th nzWidth=\"150px\">M\u00E3</th>\r\n          <th>T\u00EAn</th>\r\n          <th>M\u00F4 t\u1EA3</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let item of addRoleTable.data\">\r\n          <td nzAlign=\"center\">\r\n            <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onRoleChecked(item, $event)\"></label>\r\n          </td>\r\n          <td>{{ item.Code }}</td>\r\n          <td>{{ item.Name }}</td>\r\n          <td>{{ item.Description }}</td>\r\n        </tr>\r\n      </tbody>\r\n    </nz-table>\r\n  </ng-container>\r\n</nz-modal>\r\n\r\n<!-- Modal ch\u1ECDn JobTitle -->\r\n<nz-modal\r\n  [(nzVisible)]=\"isAddJobTitleModalVisible\"\r\n  nzTitle=\"Th\u00EAm Ch\u1EE9c danh v\u00E0o User\"\r\n  [nzWidth]=\"700\"\r\n  (nzOnCancel)=\"closeAddJobTitleModal()\"\r\n  (nzOnOk)=\"addJobTitlesToUser()\"\r\n  nzOkText=\"Th\u00EAm\"\r\n  nzCancelText=\"H\u1EE7y\"\r\n>\r\n  <ng-container *nzModalContent>\r\n    <nz-alert\r\n      *ngIf=\"!isOneUserMultiJobTitles\"\r\n      nzType=\"info\"\r\n      nzMessage=\"Ch\u1EC9 \u0111\u01B0\u1EE3c ch\u1ECDn 1 Ch\u1EE9c danh\"\r\n      nzShowIcon\r\n      style=\"margin-bottom: 16px\"\r\n    ></nz-alert>\r\n    <!-- Search box -->\r\n    <nz-input-group [nzPrefix]=\"prefixIconSearchJobTitle\" style=\"margin-bottom: 16px\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        placeholder=\"T\u00ECm ki\u1EBFm Ch\u1EE9c danh...\"\r\n        [(ngModel)]=\"searchJobTitleText\"\r\n        (ngModelChange)=\"filterAvailableJobTitles()\"\r\n      />\r\n    </nz-input-group>\r\n    <ng-template #prefixIconSearchJobTitle>\r\n      <span nz-icon nzType=\"search\"></span>\r\n    </ng-template>\r\n\r\n    <nz-table\r\n      #addJobTitleTable\r\n      [nzData]=\"lstFilteredJobTitle\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"true\"\r\n      [nzPageSize]=\"10\"\r\n      [nzLoading]=\"isLoadingAvailableJobTitles\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th\r\n            nzWidth=\"60px\"\r\n            [nzShowCheckbox]=\"isOneUserMultiJobTitles\"\r\n            [(nzChecked)]=\"isAllJobTitleChecked\"\r\n            (nzCheckedChange)=\"onAllJobTitleChecked($event)\"\r\n            [nzIndeterminate]=\"isJobTitleIndeterminate\"\r\n          ></th>\r\n          <th nzWidth=\"150px\">M\u00E3</th>\r\n          <th>T\u00EAn</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let item of addJobTitleTable.data\">\r\n          <td>\r\n            <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onJobTitleChecked(item, $event)\"></label>\r\n          </td>\r\n          <td>{{ item.Code }}</td>\r\n          <td>{{ item.Name }}</td>\r\n        </tr>\r\n      </tbody>\r\n    </nz-table>\r\n  </ng-container>\r\n</nz-modal>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i2$1.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "directive", type: i5.NzFormDirective, selector: "[nz-form]", inputs: ["nzLayout", "nzNoColon", "nzAutoTips", "nzDisableAutoTips", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzForm"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$3.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i4.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i5$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i5$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i5$1.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "ngmodule", type: NzCheckboxModule }, { kind: "component", type: i3$1.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId", "nzName"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i8.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$2.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "directive", type: i6$2.NzCellAlignDirective, selector: "th[nzAlign],td[nzAlign]", inputs: ["nzAlign"] }, { kind: "component", type: i6$2.NzThSelectionComponent, selector: "th[nzSelections],th[nzChecked],th[nzShowCheckbox],th[nzShowRowSelection]", inputs: ["nzSelections", "nzChecked", "nzDisabled", "nzIndeterminate", "nzLabel", "nzShowCheckbox", "nzShowRowSelection"], outputs: ["nzCheckedChange"] }, { kind: "ngmodule", type: NzModalModule }, { kind: "component", type: i15.NzModalComponent, selector: "nz-modal", inputs: ["nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzDraggable", "nzContent", "nzFooter", "nzZIndex", "nzWidth", "nzWrapClassName", "nzClassName", "nzStyle", "nzTitle", "nzCloseIcon", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { kind: "directive", type: i15.NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { kind: "ngmodule", type: NzPopconfirmModule }, { kind: "directive", type: i9.NzPopconfirmDirective, selector: "[nz-popconfirm]", inputs: ["nzPopconfirmArrowPointAtCenter", "nzPopconfirmTitle", "nzPopconfirmTitleContext", "nz-popconfirm", "nzPopconfirmTrigger", "nzPopconfirmPlacement", "nzPopconfirmOrigin", "nzPopconfirmMouseEnterDelay", "nzPopconfirmMouseLeaveDelay", "nzPopconfirmOverlayClassName", "nzPopconfirmOverlayStyle", "nzPopconfirmVisible", "nzOkText", "nzOkType", "nzOkDisabled", "nzOkDanger", "nzCancelText", "nzBeforeConfirm", "nzIcon", "nzCondition", "nzPopconfirmShowArrow", "nzPopconfirmBackdrop", "nzAutofocus"], outputs: ["nzPopconfirmVisibleChange", "nzOnCancel", "nzOnConfirm"], exportAs: ["nzPopconfirm"] }, { kind: "ngmodule", type: NzEmptyModule }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzDividerModule }, { kind: "component", type: i8$1.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: NzTabsModule }, { kind: "component", type: i1$7.NzTabSetComponent, selector: "nz-tabset", inputs: ["nzSelectedIndex", "nzTabPosition", "nzTabBarExtraContent", "nzCanDeactivate", "nzAddIcon", "nzTabBarStyle", "nzType", "nzSize", "nzAnimated", "nzTabBarGutter", "nzHideAdd", "nzCentered", "nzHideAll", "nzLinkRouter", "nzLinkExact", "nzDestroyInactiveTabPane"], outputs: ["nzSelectChange", "nzSelectedIndexChange", "nzTabListScroll", "nzClose", "nzAdd"], exportAs: ["nzTabset"] }, { kind: "component", type: i1$7.NzTabComponent, selector: "nz-tab", inputs: ["nzTitle", "nzClosable", "nzCloseIcon", "nzDisabled", "nzForceRender"], outputs: ["nzSelect", "nzDeselect", "nzClick", "nzContextmenu"], exportAs: ["nzTab"] }, { kind: "component", type: NzAlertComponent, selector: "nz-alert", inputs: ["nzAction", "nzCloseText", "nzIconType", "nzMessage", "nzDescription", "nzType", "nzCloseable", "nzShowIcon", "nzBanner", "nzNoAnimation", "nzIcon"], outputs: ["nzOnClose"], exportAs: ["nzAlert"] }, { kind: "component", type: ButtonBack, selector: "button-back" }, { kind: "component", type: ButtonSave, selector: "button-save" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: UserDetailComponent, isStandalone: true, selector: "app-user-detail", usesInheritance: true, ngImport: i0, template: "<form nz-form [formGroup]=\"formData\">\r\n  <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n    @if (item?.App_User_Id) {\r\n      <button nz-button nzType=\"primary\" type=\"button\" (click)=\"resetPassword()\">\r\n        {{ TranslateKey.RESET_PASSWORD | translate }}\r\n      </button>\r\n      <button nz-button nzType=\"primary\" type=\"button\" nzDanger (click)=\"delete()\">\r\n        {{ TranslateKey.DELETE | translate }}\r\n      </button>\r\n    }\r\n    <button-save (click)=\"save()\"></button-save>\r\n    <button-back (click)=\"goto('/admin/user')\"></button-back>\r\n  </div>\r\n\r\n  <nz-divider></nz-divider>\r\n\r\n  <div nz-row [nzGutter]=\"[16, 16]\">\r\n    <!-- C\u1ED8T TR\u00C1I: FORM USER -->\r\n    <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"UserName\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n          T\u00EAn \u0111\u0103ng nh\u1EADp\r\n        </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n          <input nz-input formControlName=\"UserName\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"FullName\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n          T\u00EAn ng\u01B0\u1EDDi d\u00F9ng\r\n        </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n          <input nz-input formControlName=\"FullName\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Email\" nzLabelAlign=\"left\" nzNoColon=\"true\"> Email </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'Ch\u01B0a \u0111\u00FAng \u0111\u1ECBnh d\u1EA1ng email'\">\r\n          <input nz-input formControlName=\"Email\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <div *ngIf=\"!item?.App_User_Id\" nz-row [nzGutter]=\"16\">\r\n        <div nz-col [nzSpan]=\"24\">\r\n          <nz-form-item>\r\n            <nz-form-label [nzSpan]=\"8\" nzFor=\"Password\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n              M\u1EADt kh\u1EA9u\r\n            </nz-form-label>\r\n            <nz-form-control nzErrorTip=\"{{ 'REQUIRED' | translate }}\">\r\n              <nz-input-group [nzSuffix]=\"visiblePass ? suffixTemplateHiddenPassword : suffixTemplateShowPassword\">\r\n                <input type=\"{{ passwordType }}\" nz-input formControlName=\"Password\" autocomplete=\"new-password\" />\r\n              </nz-input-group>\r\n            </nz-form-control>\r\n            <ng-template #suffixTemplateShowPassword>\r\n              <nz-icon\r\n                nzType=\"eye\"\r\n                nzTheme=\"outline\"\r\n                nz-tooltip\r\n                nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n                nzTooltipPlacement=\"right\"\r\n                (click)=\"visiblePass = !visiblePass; passwordType = 'text'\"\r\n              />\r\n            </ng-template>\r\n            <ng-template #suffixTemplateHiddenPassword>\r\n              <nz-icon\r\n                nzType=\"eye-invisible\"\r\n                nzTheme=\"outline\"\r\n                nz-tooltip\r\n                nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n                nzTooltipPlacement=\"right\"\r\n                (click)=\"visiblePass = !visiblePass; passwordType = 'password'\"\r\n              />\r\n            </ng-template>\r\n          </nz-form-item>\r\n        </div>\r\n        <div nz-col [nzSpan]=\"24\">\r\n          <nz-form-item>\r\n            <nz-form-label [nzSpan]=\"8\" nzFor=\"RetypePassword\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n              Nh\u1EADp l\u1EA1i M\u1EADt kh\u1EA9u\r\n            </nz-form-label>\r\n            <nz-form-control nzErrorTip=\"M\u1EADt kh\u1EA9u kh\u00F4ng kh\u1EDBp\">\r\n              <nz-input-group\r\n                [nzSuffix]=\"visibleRePass ? suffixTemplateHiddenRePassword : suffixTemplateShowRePassword\"\r\n              >\r\n                <input\r\n                  type=\"{{ rePasswordType }}\"\r\n                  nz-input\r\n                  formControlName=\"RetypePassword\"\r\n                  autocomplete=\"new-password\"\r\n                />\r\n              </nz-input-group>\r\n            </nz-form-control>\r\n            <ng-template #suffixTemplateShowRePassword>\r\n              <nz-icon\r\n                nzType=\"eye\"\r\n                nzTheme=\"outline\"\r\n                nz-tooltip\r\n                nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n                nzTooltipPlacement=\"right\"\r\n                (click)=\"visibleRePass = !visibleRePass; rePasswordType = 'text'\"\r\n              />\r\n            </ng-template>\r\n            <ng-template #suffixTemplateHiddenRePassword>\r\n              <nz-icon\r\n                nzType=\"eye-invisible\"\r\n                nzTheme=\"outline\"\r\n                nz-tooltip\r\n                nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n                nzTooltipPlacement=\"right\"\r\n                (click)=\"visibleRePass = !visibleRePass; rePasswordType = 'password'\"\r\n              />\r\n            </ng-template>\r\n          </nz-form-item>\r\n        </div>\r\n      </div>\r\n\r\n      <div nz-row>\r\n        <div nz-col [nzSpan]=\"8\"></div>\r\n        <div nz-col [nzSpan]=\"16\">\r\n          <label nz-checkbox formControlName=\"IsActive\">Active</label>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- C\u1ED8T PH\u1EA2I: TABS ORG & ROLE -->\r\n    <div nz-col [nzSpan]=\"12\">\r\n      <nz-tabset nzType=\"card\" nzSize=\"small\">\r\n        <!-- TAB ORG -->\r\n        <nz-tab nzTitle=\"\u0110\u01A1n v\u1ECB\">\r\n          <div style=\"padding: 8px\">\r\n            <h3 style=\"margin-bottom: 16px\">Danh s\u00E1ch \u0110\u01A1n v\u1ECB</h3>\r\n\r\n            <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n              <span style=\"font-weight: 500\">\u0110\u01A1n v\u1ECB ({{ lstOrgInUser.length }})</span>\r\n              <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddOrgModal()\">\r\n                <span nz-icon nzType=\"plus\"></span>\r\n                Th\u00EAm \u0110\u01A1n v\u1ECB\r\n              </button>\r\n            </div>\r\n\r\n            <div style=\"max-height: 450px; overflow-y: auto\">\r\n              <nz-table\r\n                #orgTable\r\n                [nzData]=\"lstOrgInUser\"\r\n                [nzSize]=\"'small'\"\r\n                [nzShowPagination]=\"lstOrgInUser.length > 20\"\r\n                [nzPageSize]=\"20\"\r\n                [nzBordered]=\"true\"\r\n              >\r\n                <thead>\r\n                  <tr>\r\n                    <th nzWidth=\"40px\">STT</th>\r\n                    <th>\u0110\u01A1n v\u1ECB</th>\r\n                    <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n                  </tr>\r\n                </thead>\r\n                <tbody>\r\n                  <tr *ngFor=\"let item of orgTable.data; let i = index\">\r\n                    <td>{{ i + 1 }}</td>\r\n                    <td>\r\n                      <div style=\"font-weight: 500\">{{ item.Name }}</div>\r\n                      <div style=\"font-size: 12px; color: #888\">{{ item.Code }}</div>\r\n                    </td>\r\n                    <td nzAlign=\"center\">\r\n                      <button\r\n                        nz-button\r\n                        nzType=\"link\"\r\n                        nzDanger\r\n                        nzSize=\"small\"\r\n                        nz-popconfirm\r\n                        nzPopconfirmTitle=\"X\u00F3a \u0110\u01A1n v\u1ECB n\u00E0y?\"\r\n                        nzAutofocus=\"ok\"\r\n                        (nzOnConfirm)=\"deleteOrgFromUser(item)\"\r\n                      >\r\n                        <span nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\r\n                      </button>\r\n                    </td>\r\n                  </tr>\r\n                </tbody>\r\n              </nz-table>\r\n            </div>\r\n          </div>\r\n        </nz-tab>\r\n\r\n        <!-- TAB ROLE -->\r\n        <nz-tab nzTitle=\"Nh\u00F3m quy\u1EC1n\">\r\n          <div style=\"padding: 8px\">\r\n            <h3 style=\"margin-bottom: 16px\">Danh s\u00E1ch Nh\u00F3m quy\u1EC1n</h3>\r\n\r\n            <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n              <span style=\"font-weight: 500\">Roles ({{ lstRoleInUser.length }})</span>\r\n              <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddRoleModal()\">\r\n                <span nz-icon nzType=\"plus\"></span>\r\n                Th\u00EAm Role\r\n              </button>\r\n            </div>\r\n\r\n            <div style=\"max-height: 450px; overflow-y: auto\">\r\n              <nz-table\r\n                #roleTable\r\n                [nzData]=\"lstRoleInUser\"\r\n                [nzSize]=\"'small'\"\r\n                [nzShowPagination]=\"lstRoleInUser.length > 20\"\r\n                [nzPageSize]=\"20\"\r\n                [nzBordered]=\"true\"\r\n              >\r\n                <thead>\r\n                  <tr>\r\n                    <th nzWidth=\"40px\">STT</th>\r\n                    <th>Role</th>\r\n                    <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n                  </tr>\r\n                </thead>\r\n                <tbody>\r\n                  <tr *ngFor=\"let item of roleTable.data; let i = index\">\r\n                    <td>{{ i + 1 }}</td>\r\n                    <td>\r\n                      <div style=\"font-weight: 500\">{{ item.Name }}</div>\r\n                      <div style=\"font-size: 12px; color: #888\">{{ item.Code }}</div>\r\n                    </td>\r\n                    <td nzAlign=\"center\">\r\n                      <button\r\n                        nz-button\r\n                        nzType=\"link\"\r\n                        nzDanger\r\n                        nzSize=\"small\"\r\n                        nz-popconfirm\r\n                        nzPopconfirmTitle=\"X\u00F3a Role n\u00E0y?\"\r\n                        (nzOnConfirm)=\"deleteRoleFromUser(item)\"\r\n                      >\r\n                        <span nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\r\n                      </button>\r\n                    </td>\r\n                  </tr>\r\n                </tbody>\r\n              </nz-table>\r\n            </div>\r\n          </div>\r\n        </nz-tab>\r\n\r\n        <!-- ch\u1EE9c danh -->\r\n        <nz-tab nzTitle=\"Ch\u1EE9c danh\">\r\n          <div style=\"padding: 8px\">\r\n            <h3 style=\"margin-bottom: 16px\">Danh s\u00E1ch Ch\u1EE9c danh</h3>\r\n\r\n            <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n              <span style=\"font-weight: 500\">Ch\u1EE9c danh ({{ lstJobTitleInUser.length }})</span>\r\n              <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddJobTitleModal()\">\r\n                <span nz-icon nzType=\"plus\"></span>\r\n                Th\u00EAm Ch\u1EE9c danh\r\n              </button>\r\n            </div>\r\n\r\n            <div style=\"max-height: 450px; overflow-y: auto\">\r\n              <nz-table\r\n                #orgJobTilte\r\n                [nzData]=\"lstJobTitleInUser\"\r\n                [nzSize]=\"'small'\"\r\n                [nzShowPagination]=\"lstJobTitleInUser.length > 20\"\r\n                [nzPageSize]=\"20\"\r\n              >\r\n                <thead>\r\n                  <tr>\r\n                    <th nzWidth=\"40px\">STT</th>\r\n                    <th>Ch\u1EE9c danh</th>\r\n                    <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n                  </tr>\r\n                </thead>\r\n                <tbody>\r\n                  <tr *ngFor=\"let item of orgJobTilte.data; let i = index\">\r\n                    <td>{{ i + 1 }}</td>\r\n                    <td>\r\n                      <div style=\"font-weight: 500\">{{ item.Name }}</div>\r\n                      <div style=\"font-size: 12px; color: #888\">{{ item.Code }}</div>\r\n                    </td>\r\n                    <td nzAlign=\"center\">\r\n                      <button\r\n                        nz-button\r\n                        nzType=\"link\"\r\n                        nzDanger\r\n                        nzSize=\"small\"\r\n                        nz-popconfirm\r\n                        nzPopconfirmTitle=\"X\u00F3a ch\u1EE9c danh n\u00E0y?\"\r\n                        nzAutofocus=\"ok\"\r\n                        (nzOnConfirm)=\"deleteJobTitleFromUser(item)\"\r\n                      >\r\n                        <span nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\r\n                      </button>\r\n                    </td>\r\n                  </tr>\r\n                </tbody>\r\n              </nz-table>\r\n            </div>\r\n          </div>\r\n        </nz-tab>\r\n      </nz-tabset>\r\n    </div>\r\n  </div>\r\n</form>\r\n\r\n<!-- Modal ch\u1ECDn Org -->\r\n<nz-modal\r\n  [(nzVisible)]=\"isAddOrgModalVisible\"\r\n  nzTitle=\"Th\u00EAm \u0110\u01A1n v\u1ECB v\u00E0o User\"\r\n  [nzWidth]=\"700\"\r\n  (nzOnCancel)=\"closeAddOrgModal()\"\r\n  (nzOnOk)=\"addOrgsToUser()\"\r\n  nzOkText=\"Th\u00EAm\"\r\n  nzCancelText=\"H\u1EE7y\"\r\n>\r\n  <ng-container *nzModalContent>\r\n    <nz-alert\r\n      *ngIf=\"!isOneUserMultiOrgs\"\r\n      nzType=\"info\"\r\n      nzMessage=\"Ch\u1EC9 \u0111\u01B0\u1EE3c ch\u1ECDn 1 \u0110\u01A1n v\u1ECB\"\r\n      nzShowIcon\r\n      style=\"margin-bottom: 16px\"\r\n    ></nz-alert>\r\n    <!-- Search box -->\r\n    <nz-input-group [nzPrefix]=\"prefixIconSearchOrg\" style=\"margin-bottom: 16px\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        placeholder=\"T\u00ECm ki\u1EBFm \u0110\u01A1n v\u1ECB...\"\r\n        [(ngModel)]=\"searchOrgText\"\r\n        (ngModelChange)=\"filterAvailableOrgs()\"\r\n      />\r\n    </nz-input-group>\r\n    <ng-template #prefixIconSearchOrg>\r\n      <span nz-icon nzType=\"search\"></span>\r\n    </ng-template>\r\n\r\n    <nz-table\r\n      #addOrgTable\r\n      [nzData]=\"lstFilteredOrg\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"true\"\r\n      [nzPageSize]=\"10\"\r\n      [nzLoading]=\"isLoadingAvailableOrgs\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th\r\n            nzWidth=\"60px\"\r\n            [nzShowCheckbox]=\"isOneUserMultiOrgs\"\r\n            [(nzChecked)]=\"isAllOrgChecked\"\r\n            (nzCheckedChange)=\"onAllOrgChecked($event)\"\r\n            [nzIndeterminate]=\"isOrgIndeterminate\"\r\n          ></th>\r\n          <th nzWidth=\"150px\">M\u00E3</th>\r\n          <th>T\u00EAn</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let item of addOrgTable.data\">\r\n          <td nzAlign=\"center\">\r\n            <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onOrgChecked(item, $event)\"></label>\r\n          </td>\r\n          <td>{{ item.Code }}</td>\r\n          <td>{{ item.TreeNodeName || item.Name }}</td>\r\n        </tr>\r\n      </tbody>\r\n    </nz-table>\r\n  </ng-container>\r\n</nz-modal>\r\n\r\n<!-- Modal ch\u1ECDn Role -->\r\n<nz-modal\r\n  [(nzVisible)]=\"isAddRoleModalVisible\"\r\n  nzTitle=\"Th\u00EAm Role v\u00E0o User\"\r\n  [nzWidth]=\"700\"\r\n  (nzOnCancel)=\"closeAddRoleModal()\"\r\n  (nzOnOk)=\"addRolesToUser()\"\r\n  nzOkText=\"Th\u00EAm\"\r\n  nzCancelText=\"H\u1EE7y\"\r\n>\r\n  <ng-container *nzModalContent>\r\n    <!-- Search box -->\r\n    <nz-input-group [nzPrefix]=\"prefixIconSearchRole\" style=\"margin-bottom: 16px\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        placeholder=\"T\u00ECm ki\u1EBFm Role...\"\r\n        [(ngModel)]=\"searchRoleText\"\r\n        (ngModelChange)=\"filterAvailableRoles()\"\r\n      />\r\n    </nz-input-group>\r\n    <ng-template #prefixIconSearchRole>\r\n      <span nz-icon nzType=\"search\"></span>\r\n    </ng-template>\r\n\r\n    <nz-table\r\n      #addRoleTable\r\n      [nzData]=\"lstFilteredRole\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"true\"\r\n      [nzPageSize]=\"10\"\r\n      [nzLoading]=\"isLoadingAvailableRoles\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th\r\n            nzWidth=\"60px\"\r\n            nzShowCheckbox\r\n            [(nzChecked)]=\"isAllRoleChecked\"\r\n            (nzCheckedChange)=\"onAllRoleChecked($event)\"\r\n            [nzIndeterminate]=\"isRoleIndeterminate\"\r\n          ></th>\r\n          <th nzWidth=\"150px\">M\u00E3</th>\r\n          <th>T\u00EAn</th>\r\n          <th>M\u00F4 t\u1EA3</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let item of addRoleTable.data\">\r\n          <td nzAlign=\"center\">\r\n            <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onRoleChecked(item, $event)\"></label>\r\n          </td>\r\n          <td>{{ item.Code }}</td>\r\n          <td>{{ item.Name }}</td>\r\n          <td>{{ item.Description }}</td>\r\n        </tr>\r\n      </tbody>\r\n    </nz-table>\r\n  </ng-container>\r\n</nz-modal>\r\n\r\n<!-- Modal ch\u1ECDn JobTitle -->\r\n<nz-modal\r\n  [(nzVisible)]=\"isAddJobTitleModalVisible\"\r\n  nzTitle=\"Th\u00EAm Ch\u1EE9c danh v\u00E0o User\"\r\n  [nzWidth]=\"700\"\r\n  (nzOnCancel)=\"closeAddJobTitleModal()\"\r\n  (nzOnOk)=\"addJobTitlesToUser()\"\r\n  nzOkText=\"Th\u00EAm\"\r\n  nzCancelText=\"H\u1EE7y\"\r\n>\r\n  <ng-container *nzModalContent>\r\n    <nz-alert\r\n      *ngIf=\"!isOneUserMultiJobTitles\"\r\n      nzType=\"info\"\r\n      nzMessage=\"Ch\u1EC9 \u0111\u01B0\u1EE3c ch\u1ECDn 1 Ch\u1EE9c danh\"\r\n      nzShowIcon\r\n      style=\"margin-bottom: 16px\"\r\n    ></nz-alert>\r\n    <!-- Search box -->\r\n    <nz-input-group [nzPrefix]=\"prefixIconSearchJobTitle\" style=\"margin-bottom: 16px\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        placeholder=\"T\u00ECm ki\u1EBFm Ch\u1EE9c danh...\"\r\n        [(ngModel)]=\"searchJobTitleText\"\r\n        (ngModelChange)=\"filterAvailableJobTitles()\"\r\n      />\r\n    </nz-input-group>\r\n    <ng-template #prefixIconSearchJobTitle>\r\n      <span nz-icon nzType=\"search\"></span>\r\n    </ng-template>\r\n\r\n    <nz-table\r\n      #addJobTitleTable\r\n      [nzData]=\"lstFilteredJobTitle\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"true\"\r\n      [nzPageSize]=\"10\"\r\n      [nzLoading]=\"isLoadingAvailableJobTitles\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th\r\n            nzWidth=\"60px\"\r\n            [nzShowCheckbox]=\"isOneUserMultiJobTitles\"\r\n            [(nzChecked)]=\"isAllJobTitleChecked\"\r\n            (nzCheckedChange)=\"onAllJobTitleChecked($event)\"\r\n            [nzIndeterminate]=\"isJobTitleIndeterminate\"\r\n          ></th>\r\n          <th nzWidth=\"150px\">M\u00E3</th>\r\n          <th>T\u00EAn</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let item of addJobTitleTable.data\">\r\n          <td>\r\n            <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onJobTitleChecked(item, $event)\"></label>\r\n          </td>\r\n          <td>{{ item.Code }}</td>\r\n          <td>{{ item.Name }}</td>\r\n        </tr>\r\n      </tbody>\r\n    </nz-table>\r\n  </ng-container>\r\n</nz-modal>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i2$1.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "directive", type: i5.NzFormDirective, selector: "[nz-form]", inputs: ["nzLayout", "nzNoColon", "nzAutoTips", "nzDisableAutoTips", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzForm"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$3.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i4.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i5$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i5$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i5$1.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "ngmodule", type: NzCheckboxModule }, { kind: "component", type: i3$1.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId", "nzName"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i8.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$2.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "directive", type: i6$2.NzCellAlignDirective, selector: "th[nzAlign],td[nzAlign]", inputs: ["nzAlign"] }, { kind: "component", type: i6$2.NzThSelectionComponent, selector: "th[nzSelections],th[nzChecked],th[nzShowCheckbox],th[nzShowRowSelection]", inputs: ["nzSelections", "nzChecked", "nzDisabled", "nzIndeterminate", "nzLabel", "nzShowCheckbox", "nzShowRowSelection"], outputs: ["nzCheckedChange"] }, { kind: "ngmodule", type: NzModalModule }, { kind: "component", type: i15.NzModalComponent, selector: "nz-modal", inputs: ["nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzDraggable", "nzContent", "nzFooter", "nzZIndex", "nzWidth", "nzWrapClassName", "nzClassName", "nzStyle", "nzTitle", "nzCloseIcon", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { kind: "directive", type: i15.NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { kind: "ngmodule", type: NzPopconfirmModule }, { kind: "directive", type: i9.NzPopconfirmDirective, selector: "[nz-popconfirm]", inputs: ["nzPopconfirmArrowPointAtCenter", "nzPopconfirmTitle", "nzPopconfirmTitleContext", "nz-popconfirm", "nzPopconfirmTrigger", "nzPopconfirmPlacement", "nzPopconfirmOrigin", "nzPopconfirmMouseEnterDelay", "nzPopconfirmMouseLeaveDelay", "nzPopconfirmOverlayClassName", "nzPopconfirmOverlayStyle", "nzPopconfirmVisible", "nzOkText", "nzOkType", "nzOkDisabled", "nzOkDanger", "nzCancelText", "nzBeforeConfirm", "nzIcon", "nzCondition", "nzPopconfirmShowArrow", "nzPopconfirmBackdrop", "nzAutofocus"], outputs: ["nzPopconfirmVisibleChange", "nzOnCancel", "nzOnConfirm"], exportAs: ["nzPopconfirm"] }, { kind: "ngmodule", type: NzEmptyModule }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzDividerModule }, { kind: "component", type: i8$1.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: NzTabsModule }, { kind: "component", type: i1$7.NzTabSetComponent, selector: "nz-tabset", inputs: ["nzSelectedIndex", "nzTabPosition", "nzTabBarExtraContent", "nzCanDeactivate", "nzAddIcon", "nzTabBarStyle", "nzType", "nzSize", "nzAnimated", "nzTabBarGutter", "nzHideAdd", "nzCentered", "nzHideAll", "nzLinkRouter", "nzLinkExact", "nzDestroyInactiveTabPane"], outputs: ["nzSelectChange", "nzSelectedIndexChange", "nzTabListScroll", "nzClose", "nzAdd"], exportAs: ["nzTabset"] }, { kind: "component", type: i1$7.NzTabComponent, selector: "nz-tab", inputs: ["nzTitle", "nzClosable", "nzCloseIcon", "nzDisabled", "nzForceRender"], outputs: ["nzSelect", "nzDeselect", "nzClick", "nzContextmenu"], exportAs: ["nzTab"] }, { kind: "component", type: NzAlertComponent, selector: "nz-alert", inputs: ["nzAction", "nzCloseText", "nzIconType", "nzMessage", "nzDescription", "nzType", "nzCloseable", "nzShowIcon", "nzBanner", "nzNoAnimation", "nzIcon"], outputs: ["nzOnClose"], exportAs: ["nzAlert"] }, { kind: "component", type: ButtonBack, selector: "button-back" }, { kind: "component", type: ButtonSave, selector: "button-save" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: UserDetailComponent, decorators: [{
             type: Component,
@@ -8432,7 +8626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         NzAlertComponent,
                         ButtonBack,
                         ButtonSave,
-                    ], template: "<form nz-form [formGroup]=\"formData\">\r\n  <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n    @if (item?.App_User_Id) {\r\n      <button nz-button nzType=\"primary\" type=\"button\" (click)=\"resetPassword()\">\r\n        {{ TranslateKey.RESET_PASSWORD | translate }}\r\n      </button>\r\n      <button nz-button nzType=\"primary\" type=\"button\" nzDanger (click)=\"delete()\">\r\n        {{ TranslateKey.DELETE | translate }}\r\n      </button>\r\n    }\r\n    <button-save (click)=\"save()\"></button-save>\r\n    <button-back (click)=\"goto('/admin/user')\"></button-back>\r\n  </div>\r\n\r\n  <nz-divider></nz-divider>\r\n\r\n  <div nz-row [nzGutter]=\"[16, 16]\">\r\n    <!-- C\u1ED8T TR\u00C1I: FORM USER -->\r\n    <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"UserName\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n          T\u00EAn \u0111\u0103ng nh\u1EADp\r\n        </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n          <input nz-input formControlName=\"UserName\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"FullName\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n          T\u00EAn ng\u01B0\u1EDDi d\u00F9ng\r\n        </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n          <input nz-input formControlName=\"FullName\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Email\" nzLabelAlign=\"left\" nzNoColon=\"true\"> Email </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'Ch\u01B0a \u0111\u00FAng \u0111\u1ECBnh d\u1EA1ng email'\">\r\n          <input nz-input formControlName=\"Email\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <div *ngIf=\"!item?.App_User_Id\" nz-row [nzGutter]=\"16\">\r\n        <div nz-col [nzSpan]=\"24\">\r\n          <nz-form-item>\r\n            <nz-form-label [nzSpan]=\"8\" nzFor=\"Password\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n              M\u1EADt kh\u1EA9u\r\n            </nz-form-label>\r\n            <nz-form-control nzErrorTip=\"{{ 'REQUIRED' | translate }}\">\r\n              <nz-input-group [nzSuffix]=\"visiblePass ? suffixTemplateHiddenPassword : suffixTemplateShowPassword\">\r\n                <input type=\"{{ passwordType }}\" nz-input formControlName=\"Password\" autocomplete=\"new-password\" />\r\n              </nz-input-group>\r\n            </nz-form-control>\r\n            <ng-template #suffixTemplateShowPassword>\r\n              <nz-icon\r\n                nzType=\"eye\"\r\n                nzTheme=\"outline\"\r\n                nz-tooltip\r\n                nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n                nzTooltipPlacement=\"right\"\r\n                (click)=\"visiblePass = !visiblePass; passwordType = 'text'\"\r\n              />\r\n            </ng-template>\r\n            <ng-template #suffixTemplateHiddenPassword>\r\n              <nz-icon\r\n                nzType=\"eye-invisible\"\r\n                nzTheme=\"outline\"\r\n                nz-tooltip\r\n                nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n                nzTooltipPlacement=\"right\"\r\n                (click)=\"visiblePass = !visiblePass; passwordType = 'password'\"\r\n              />\r\n            </ng-template>\r\n          </nz-form-item>\r\n        </div>\r\n        <div nz-col [nzSpan]=\"24\">\r\n          <nz-form-item>\r\n            <nz-form-label [nzSpan]=\"8\" nzFor=\"RetypePassword\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n              Nh\u1EADp l\u1EA1i M\u1EADt kh\u1EA9u\r\n            </nz-form-label>\r\n            <nz-form-control nzErrorTip=\"M\u1EADt kh\u1EA9u kh\u00F4ng kh\u1EDBp\">\r\n              <nz-input-group\r\n                [nzSuffix]=\"visibleRePass ? suffixTemplateHiddenRePassword : suffixTemplateShowRePassword\"\r\n              >\r\n                <input\r\n                  type=\"{{ rePasswordType }}\"\r\n                  nz-input\r\n                  formControlName=\"RetypePassword\"\r\n                  autocomplete=\"new-password\"\r\n                />\r\n              </nz-input-group>\r\n            </nz-form-control>\r\n            <ng-template #suffixTemplateShowRePassword>\r\n              <nz-icon\r\n                nzType=\"eye\"\r\n                nzTheme=\"outline\"\r\n                nz-tooltip\r\n                nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n                nzTooltipPlacement=\"right\"\r\n                (click)=\"visibleRePass = !visibleRePass; rePasswordType = 'text'\"\r\n              />\r\n            </ng-template>\r\n            <ng-template #suffixTemplateHiddenRePassword>\r\n              <nz-icon\r\n                nzType=\"eye-invisible\"\r\n                nzTheme=\"outline\"\r\n                nz-tooltip\r\n                nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n                nzTooltipPlacement=\"right\"\r\n                (click)=\"visibleRePass = !visibleRePass; rePasswordType = 'password'\"\r\n              />\r\n            </ng-template>\r\n          </nz-form-item>\r\n        </div>\r\n      </div>\r\n\r\n      <div nz-row>\r\n        <div nz-col [nzSpan]=\"8\"></div>\r\n        <div nz-col [nzSpan]=\"16\">\r\n          <label nz-checkbox formControlName=\"IsActive\">Active</label>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- C\u1ED8T PH\u1EA2I: TABS ORG & ROLE -->\r\n    <div nz-col [nzSpan]=\"12\">\r\n      <nz-tabset nzType=\"card\" nzSize=\"small\">\r\n        <!-- TAB ORG -->\r\n        <nz-tab nzTitle=\"\u0110\u01A1n v\u1ECB\">\r\n          <div style=\"padding: 8px\">\r\n            <h3 style=\"margin-bottom: 16px\">Danh s\u00E1ch \u0110\u01A1n v\u1ECB</h3>\r\n\r\n            <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n              <span style=\"font-weight: 500\">\u0110\u01A1n v\u1ECB ({{ lstOrgInUser.length }})</span>\r\n              <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddOrgModal()\">\r\n                <span nz-icon nzType=\"plus\"></span>\r\n                Th\u00EAm \u0110\u01A1n v\u1ECB\r\n              </button>\r\n            </div>\r\n\r\n            <div style=\"max-height: 450px; overflow-y: auto\">\r\n              <nz-table\r\n                #orgTable\r\n                [nzData]=\"lstOrgInUser\"\r\n                [nzSize]=\"'small'\"\r\n                [nzShowPagination]=\"lstOrgInUser.length > 20\"\r\n                [nzPageSize]=\"20\"\r\n                [nzBordered]=\"true\"\r\n              >\r\n                <thead>\r\n                  <tr>\r\n                    <th nzWidth=\"40px\">STT</th>\r\n                    <th>\u0110\u01A1n v\u1ECB</th>\r\n                    <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n                  </tr>\r\n                </thead>\r\n                <tbody>\r\n                  <tr *ngFor=\"let item of orgTable.data; let i = index\">\r\n                    <td>{{ i + 1 }}</td>\r\n                    <td>\r\n                      <div style=\"font-weight: 500\">{{ item.Name }}</div>\r\n                      <div style=\"font-size: 12px; color: #888\">{{ item.Code }}</div>\r\n                    </td>\r\n                    <td nzAlign=\"center\">\r\n                      <button\r\n                        nz-button\r\n                        nzType=\"link\"\r\n                        nzDanger\r\n                        nzSize=\"small\"\r\n                        nz-popconfirm\r\n                        nzPopconfirmTitle=\"X\u00F3a \u0110\u01A1n v\u1ECB n\u00E0y?\"\r\n                        nzAutofocus=\"ok\"\r\n                        (nzOnConfirm)=\"deleteOrgFromUser(item)\"\r\n                      >\r\n                        <span nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\r\n                      </button>\r\n                    </td>\r\n                  </tr>\r\n                </tbody>\r\n              </nz-table>\r\n            </div>\r\n          </div>\r\n        </nz-tab>\r\n\r\n        <nz-tab nzTitle=\"Ch\u1EE9c danh\">\r\n          <div style=\"padding: 8px\">\r\n            <h3 style=\"margin-bottom: 16px\">Danh s\u00E1ch Ch\u1EE9c danh</h3>\r\n\r\n            <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n              <span style=\"font-weight: 500\">Ch\u1EE9c danh ({{ lstJobTitleInUser.length }})</span>\r\n              <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddJobTitleModal()\">\r\n                <span nz-icon nzType=\"plus\"></span>\r\n                Th\u00EAm Ch\u1EE9c danh\r\n              </button>\r\n            </div>\r\n\r\n            <div style=\"max-height: 450px; overflow-y: auto\">\r\n              <nz-table\r\n                #orgJobTilte\r\n                [nzData]=\"lstJobTitleInUser\"\r\n                [nzSize]=\"'small'\"\r\n                [nzShowPagination]=\"lstJobTitleInUser.length > 20\"\r\n                [nzPageSize]=\"20\"\r\n              >\r\n                <thead>\r\n                  <tr>\r\n                    <th nzWidth=\"40px\">STT</th>\r\n                    <th>Ch\u1EE9c danh</th>\r\n                    <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n                  </tr>\r\n                </thead>\r\n                <tbody>\r\n                  <tr *ngFor=\"let item of orgJobTilte.data; let i = index\">\r\n                    <td>{{ i + 1 }}</td>\r\n                    <td>\r\n                      <div style=\"font-weight: 500\">{{ item.Name }}</div>\r\n                      <div style=\"font-size: 12px; color: #888\">{{ item.Code }}</div>\r\n                    </td>\r\n                    <td nzAlign=\"center\">\r\n                      <button\r\n                        nz-button\r\n                        nzType=\"link\"\r\n                        nzDanger\r\n                        nzSize=\"small\"\r\n                        nz-popconfirm\r\n                        nzPopconfirmTitle=\"X\u00F3a ch\u1EE9c danh n\u00E0y?\"\r\n                        nzAutofocus=\"ok\"\r\n                        (nzOnConfirm)=\"deleteJobTitleFromUser(item)\"\r\n                      >\r\n                        <span nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\r\n                      </button>\r\n                    </td>\r\n                  </tr>\r\n                </tbody>\r\n              </nz-table>\r\n            </div>\r\n          </div>\r\n        </nz-tab>\r\n\r\n        <!-- TAB ROLE -->\r\n        <nz-tab nzTitle=\"Nh\u00F3m quy\u1EC1n\">\r\n          <div style=\"padding: 8px\">\r\n            <h3 style=\"margin-bottom: 16px\">Danh s\u00E1ch Nh\u00F3m quy\u1EC1n</h3>\r\n\r\n            <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n              <span style=\"font-weight: 500\">Roles ({{ lstRoleInUser.length }})</span>\r\n              <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddRoleModal()\">\r\n                <span nz-icon nzType=\"plus\"></span>\r\n                Th\u00EAm Role\r\n              </button>\r\n            </div>\r\n\r\n            <div style=\"max-height: 450px; overflow-y: auto\">\r\n              <nz-table\r\n                #roleTable\r\n                [nzData]=\"lstRoleInUser\"\r\n                [nzSize]=\"'small'\"\r\n                [nzShowPagination]=\"lstRoleInUser.length > 20\"\r\n                [nzPageSize]=\"20\"\r\n                [nzBordered]=\"true\"\r\n              >\r\n                <thead>\r\n                  <tr>\r\n                    <th nzWidth=\"40px\">STT</th>\r\n                    <th>Role</th>\r\n                    <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n                  </tr>\r\n                </thead>\r\n                <tbody>\r\n                  <tr *ngFor=\"let item of roleTable.data; let i = index\">\r\n                    <td>{{ i + 1 }}</td>\r\n                    <td>\r\n                      <div style=\"font-weight: 500\">{{ item.Name }}</div>\r\n                      <div style=\"font-size: 12px; color: #888\">{{ item.Code }}</div>\r\n                    </td>\r\n                    <td nzAlign=\"center\">\r\n                      <button\r\n                        nz-button\r\n                        nzType=\"link\"\r\n                        nzDanger\r\n                        nzSize=\"small\"\r\n                        nz-popconfirm\r\n                        nzPopconfirmTitle=\"X\u00F3a Role n\u00E0y?\"\r\n                        (nzOnConfirm)=\"deleteRoleFromUser(item)\"\r\n                      >\r\n                        <span nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\r\n                      </button>\r\n                    </td>\r\n                  </tr>\r\n                </tbody>\r\n              </nz-table>\r\n            </div>\r\n          </div>\r\n        </nz-tab>\r\n      </nz-tabset>\r\n    </div>\r\n  </div>\r\n</form>\r\n\r\n<!-- Modal ch\u1ECDn Org -->\r\n<nz-modal\r\n  [(nzVisible)]=\"isAddOrgModalVisible\"\r\n  nzTitle=\"Th\u00EAm \u0110\u01A1n v\u1ECB v\u00E0o User\"\r\n  [nzWidth]=\"700\"\r\n  (nzOnCancel)=\"closeAddOrgModal()\"\r\n  (nzOnOk)=\"addOrgsToUser()\"\r\n  nzOkText=\"Th\u00EAm\"\r\n  nzCancelText=\"H\u1EE7y\"\r\n>\r\n  <ng-container *nzModalContent>\r\n    <nz-alert\r\n      *ngIf=\"!isOneUserMultiOrgs\"\r\n      nzType=\"info\"\r\n      nzMessage=\"Ch\u1EC9 \u0111\u01B0\u1EE3c ch\u1ECDn 1 \u0110\u01A1n v\u1ECB\"\r\n      nzShowIcon\r\n      style=\"margin-bottom: 16px\"\r\n    ></nz-alert>\r\n    <!-- Search box -->\r\n    <nz-input-group [nzPrefix]=\"prefixIconSearchOrg\" style=\"margin-bottom: 16px\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        placeholder=\"T\u00ECm ki\u1EBFm \u0110\u01A1n v\u1ECB...\"\r\n        [(ngModel)]=\"searchOrgText\"\r\n        (ngModelChange)=\"filterAvailableOrgs()\"\r\n      />\r\n    </nz-input-group>\r\n    <ng-template #prefixIconSearchOrg>\r\n      <span nz-icon nzType=\"search\"></span>\r\n    </ng-template>\r\n\r\n    <nz-table\r\n      #addOrgTable\r\n      [nzData]=\"lstFilteredOrg\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"true\"\r\n      [nzPageSize]=\"10\"\r\n      [nzLoading]=\"isLoadingAvailableOrgs\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th\r\n            nzWidth=\"60px\"\r\n            [nzShowCheckbox]=\"isOneUserMultiOrgs\"\r\n            [(nzChecked)]=\"isAllOrgChecked\"\r\n            (nzCheckedChange)=\"onAllOrgChecked($event)\"\r\n            [nzIndeterminate]=\"isOrgIndeterminate\"\r\n          ></th>\r\n          <th nzWidth=\"150px\">M\u00E3</th>\r\n          <th>T\u00EAn</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let item of addOrgTable.data\">\r\n          <td nzAlign=\"center\">\r\n            <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onOrgChecked(item, $event)\"></label>\r\n          </td>\r\n          <td>{{ item.Code }}</td>\r\n          <td>{{ item.TreeNodeName || item.Name }}</td>\r\n        </tr>\r\n      </tbody>\r\n    </nz-table>\r\n  </ng-container>\r\n</nz-modal>\r\n\r\n<!-- Modal ch\u1ECDn Role -->\r\n<nz-modal\r\n  [(nzVisible)]=\"isAddRoleModalVisible\"\r\n  nzTitle=\"Th\u00EAm Role v\u00E0o User\"\r\n  [nzWidth]=\"700\"\r\n  (nzOnCancel)=\"closeAddRoleModal()\"\r\n  (nzOnOk)=\"addRolesToUser()\"\r\n  nzOkText=\"Th\u00EAm\"\r\n  nzCancelText=\"H\u1EE7y\"\r\n>\r\n  <ng-container *nzModalContent>\r\n    <!-- Search box -->\r\n    <nz-input-group [nzPrefix]=\"prefixIconSearchRole\" style=\"margin-bottom: 16px\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        placeholder=\"T\u00ECm ki\u1EBFm Role...\"\r\n        [(ngModel)]=\"searchRoleText\"\r\n        (ngModelChange)=\"filterAvailableRoles()\"\r\n      />\r\n    </nz-input-group>\r\n    <ng-template #prefixIconSearchRole>\r\n      <span nz-icon nzType=\"search\"></span>\r\n    </ng-template>\r\n\r\n    <nz-table\r\n      #addRoleTable\r\n      [nzData]=\"lstFilteredRole\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"true\"\r\n      [nzPageSize]=\"10\"\r\n      [nzLoading]=\"isLoadingAvailableRoles\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th\r\n            nzWidth=\"60px\"\r\n            nzShowCheckbox\r\n            [(nzChecked)]=\"isAllRoleChecked\"\r\n            (nzCheckedChange)=\"onAllRoleChecked($event)\"\r\n            [nzIndeterminate]=\"isRoleIndeterminate\"\r\n          ></th>\r\n          <th nzWidth=\"150px\">M\u00E3</th>\r\n          <th>T\u00EAn</th>\r\n          <th>M\u00F4 t\u1EA3</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let item of addRoleTable.data\">\r\n          <td nzAlign=\"center\">\r\n            <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onRoleChecked(item, $event)\"></label>\r\n          </td>\r\n          <td>{{ item.Code }}</td>\r\n          <td>{{ item.Name }}</td>\r\n          <td>{{ item.Description }}</td>\r\n        </tr>\r\n      </tbody>\r\n    </nz-table>\r\n  </ng-container>\r\n</nz-modal>\r\n\r\n<!-- Modal ch\u1ECDn JobTitle -->\r\n<nz-modal\r\n  [(nzVisible)]=\"isAddJobTitleModalVisible\"\r\n  nzTitle=\"Th\u00EAm Ch\u1EE9c danh v\u00E0o User\"\r\n  [nzWidth]=\"700\"\r\n  (nzOnCancel)=\"closeAddJobTitleModal()\"\r\n  (nzOnOk)=\"addJobTitlesToUser()\"\r\n  nzOkText=\"Th\u00EAm\"\r\n  nzCancelText=\"H\u1EE7y\"\r\n>\r\n  <ng-container *nzModalContent>\r\n    <nz-alert\r\n      *ngIf=\"!isOneUserMultiJobTitles\"\r\n      nzType=\"info\"\r\n      nzMessage=\"Ch\u1EC9 \u0111\u01B0\u1EE3c ch\u1ECDn 1 Ch\u1EE9c danh\"\r\n      nzShowIcon\r\n      style=\"margin-bottom: 16px\"\r\n    ></nz-alert>\r\n    <!-- Search box -->\r\n    <nz-input-group [nzPrefix]=\"prefixIconSearchJobTitle\" style=\"margin-bottom: 16px\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        placeholder=\"T\u00ECm ki\u1EBFm Ch\u1EE9c danh...\"\r\n        [(ngModel)]=\"searchJobTitleText\"\r\n        (ngModelChange)=\"filterAvailableJobTitles()\"\r\n      />\r\n    </nz-input-group>\r\n    <ng-template #prefixIconSearchJobTitle>\r\n      <span nz-icon nzType=\"search\"></span>\r\n    </ng-template>\r\n\r\n    <nz-table\r\n      #addJobTitleTable\r\n      [nzData]=\"lstFilteredJobTitle\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"true\"\r\n      [nzPageSize]=\"10\"\r\n      [nzLoading]=\"isLoadingAvailableJobTitles\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th\r\n            nzWidth=\"60px\"\r\n            [nzShowCheckbox]=\"isOneUserMultiJobTitles\"\r\n            [(nzChecked)]=\"isAllJobTitleChecked\"\r\n            (nzCheckedChange)=\"onAllJobTitleChecked($event)\"\r\n            [nzIndeterminate]=\"isJobTitleIndeterminate\"\r\n          ></th>\r\n          <th nzWidth=\"150px\">M\u00E3</th>\r\n          <th>T\u00EAn</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let item of addJobTitleTable.data\">\r\n          <td>\r\n            <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onJobTitleChecked(item, $event)\"></label>\r\n          </td>\r\n          <td>{{ item.Code }}</td>\r\n          <td>{{ item.Name }}</td>\r\n        </tr>\r\n      </tbody>\r\n    </nz-table>\r\n  </ng-container>\r\n</nz-modal>\r\n" }]
+                    ], template: "<form nz-form [formGroup]=\"formData\">\r\n  <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n    @if (item?.App_User_Id) {\r\n      <button nz-button nzType=\"primary\" type=\"button\" (click)=\"resetPassword()\">\r\n        {{ TranslateKey.RESET_PASSWORD | translate }}\r\n      </button>\r\n      <button nz-button nzType=\"primary\" type=\"button\" nzDanger (click)=\"delete()\">\r\n        {{ TranslateKey.DELETE | translate }}\r\n      </button>\r\n    }\r\n    <button-save (click)=\"save()\"></button-save>\r\n    <button-back (click)=\"goto('/admin/user')\"></button-back>\r\n  </div>\r\n\r\n  <nz-divider></nz-divider>\r\n\r\n  <div nz-row [nzGutter]=\"[16, 16]\">\r\n    <!-- C\u1ED8T TR\u00C1I: FORM USER -->\r\n    <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"UserName\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n          T\u00EAn \u0111\u0103ng nh\u1EADp\r\n        </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n          <input nz-input formControlName=\"UserName\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"FullName\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n          T\u00EAn ng\u01B0\u1EDDi d\u00F9ng\r\n        </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n          <input nz-input formControlName=\"FullName\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Email\" nzLabelAlign=\"left\" nzNoColon=\"true\"> Email </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'Ch\u01B0a \u0111\u00FAng \u0111\u1ECBnh d\u1EA1ng email'\">\r\n          <input nz-input formControlName=\"Email\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <div *ngIf=\"!item?.App_User_Id\" nz-row [nzGutter]=\"16\">\r\n        <div nz-col [nzSpan]=\"24\">\r\n          <nz-form-item>\r\n            <nz-form-label [nzSpan]=\"8\" nzFor=\"Password\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n              M\u1EADt kh\u1EA9u\r\n            </nz-form-label>\r\n            <nz-form-control nzErrorTip=\"{{ 'REQUIRED' | translate }}\">\r\n              <nz-input-group [nzSuffix]=\"visiblePass ? suffixTemplateHiddenPassword : suffixTemplateShowPassword\">\r\n                <input type=\"{{ passwordType }}\" nz-input formControlName=\"Password\" autocomplete=\"new-password\" />\r\n              </nz-input-group>\r\n            </nz-form-control>\r\n            <ng-template #suffixTemplateShowPassword>\r\n              <nz-icon\r\n                nzType=\"eye\"\r\n                nzTheme=\"outline\"\r\n                nz-tooltip\r\n                nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n                nzTooltipPlacement=\"right\"\r\n                (click)=\"visiblePass = !visiblePass; passwordType = 'text'\"\r\n              />\r\n            </ng-template>\r\n            <ng-template #suffixTemplateHiddenPassword>\r\n              <nz-icon\r\n                nzType=\"eye-invisible\"\r\n                nzTheme=\"outline\"\r\n                nz-tooltip\r\n                nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n                nzTooltipPlacement=\"right\"\r\n                (click)=\"visiblePass = !visiblePass; passwordType = 'password'\"\r\n              />\r\n            </ng-template>\r\n          </nz-form-item>\r\n        </div>\r\n        <div nz-col [nzSpan]=\"24\">\r\n          <nz-form-item>\r\n            <nz-form-label [nzSpan]=\"8\" nzFor=\"RetypePassword\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n              Nh\u1EADp l\u1EA1i M\u1EADt kh\u1EA9u\r\n            </nz-form-label>\r\n            <nz-form-control nzErrorTip=\"M\u1EADt kh\u1EA9u kh\u00F4ng kh\u1EDBp\">\r\n              <nz-input-group\r\n                [nzSuffix]=\"visibleRePass ? suffixTemplateHiddenRePassword : suffixTemplateShowRePassword\"\r\n              >\r\n                <input\r\n                  type=\"{{ rePasswordType }}\"\r\n                  nz-input\r\n                  formControlName=\"RetypePassword\"\r\n                  autocomplete=\"new-password\"\r\n                />\r\n              </nz-input-group>\r\n            </nz-form-control>\r\n            <ng-template #suffixTemplateShowRePassword>\r\n              <nz-icon\r\n                nzType=\"eye\"\r\n                nzTheme=\"outline\"\r\n                nz-tooltip\r\n                nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n                nzTooltipPlacement=\"right\"\r\n                (click)=\"visibleRePass = !visibleRePass; rePasswordType = 'text'\"\r\n              />\r\n            </ng-template>\r\n            <ng-template #suffixTemplateHiddenRePassword>\r\n              <nz-icon\r\n                nzType=\"eye-invisible\"\r\n                nzTheme=\"outline\"\r\n                nz-tooltip\r\n                nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n                nzTooltipPlacement=\"right\"\r\n                (click)=\"visibleRePass = !visibleRePass; rePasswordType = 'password'\"\r\n              />\r\n            </ng-template>\r\n          </nz-form-item>\r\n        </div>\r\n      </div>\r\n\r\n      <div nz-row>\r\n        <div nz-col [nzSpan]=\"8\"></div>\r\n        <div nz-col [nzSpan]=\"16\">\r\n          <label nz-checkbox formControlName=\"IsActive\">Active</label>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- C\u1ED8T PH\u1EA2I: TABS ORG & ROLE -->\r\n    <div nz-col [nzSpan]=\"12\">\r\n      <nz-tabset nzType=\"card\" nzSize=\"small\">\r\n        <!-- TAB ORG -->\r\n        <nz-tab nzTitle=\"\u0110\u01A1n v\u1ECB\">\r\n          <div style=\"padding: 8px\">\r\n            <h3 style=\"margin-bottom: 16px\">Danh s\u00E1ch \u0110\u01A1n v\u1ECB</h3>\r\n\r\n            <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n              <span style=\"font-weight: 500\">\u0110\u01A1n v\u1ECB ({{ lstOrgInUser.length }})</span>\r\n              <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddOrgModal()\">\r\n                <span nz-icon nzType=\"plus\"></span>\r\n                Th\u00EAm \u0110\u01A1n v\u1ECB\r\n              </button>\r\n            </div>\r\n\r\n            <div style=\"max-height: 450px; overflow-y: auto\">\r\n              <nz-table\r\n                #orgTable\r\n                [nzData]=\"lstOrgInUser\"\r\n                [nzSize]=\"'small'\"\r\n                [nzShowPagination]=\"lstOrgInUser.length > 20\"\r\n                [nzPageSize]=\"20\"\r\n                [nzBordered]=\"true\"\r\n              >\r\n                <thead>\r\n                  <tr>\r\n                    <th nzWidth=\"40px\">STT</th>\r\n                    <th>\u0110\u01A1n v\u1ECB</th>\r\n                    <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n                  </tr>\r\n                </thead>\r\n                <tbody>\r\n                  <tr *ngFor=\"let item of orgTable.data; let i = index\">\r\n                    <td>{{ i + 1 }}</td>\r\n                    <td>\r\n                      <div style=\"font-weight: 500\">{{ item.Name }}</div>\r\n                      <div style=\"font-size: 12px; color: #888\">{{ item.Code }}</div>\r\n                    </td>\r\n                    <td nzAlign=\"center\">\r\n                      <button\r\n                        nz-button\r\n                        nzType=\"link\"\r\n                        nzDanger\r\n                        nzSize=\"small\"\r\n                        nz-popconfirm\r\n                        nzPopconfirmTitle=\"X\u00F3a \u0110\u01A1n v\u1ECB n\u00E0y?\"\r\n                        nzAutofocus=\"ok\"\r\n                        (nzOnConfirm)=\"deleteOrgFromUser(item)\"\r\n                      >\r\n                        <span nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\r\n                      </button>\r\n                    </td>\r\n                  </tr>\r\n                </tbody>\r\n              </nz-table>\r\n            </div>\r\n          </div>\r\n        </nz-tab>\r\n\r\n        <!-- TAB ROLE -->\r\n        <nz-tab nzTitle=\"Nh\u00F3m quy\u1EC1n\">\r\n          <div style=\"padding: 8px\">\r\n            <h3 style=\"margin-bottom: 16px\">Danh s\u00E1ch Nh\u00F3m quy\u1EC1n</h3>\r\n\r\n            <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n              <span style=\"font-weight: 500\">Roles ({{ lstRoleInUser.length }})</span>\r\n              <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddRoleModal()\">\r\n                <span nz-icon nzType=\"plus\"></span>\r\n                Th\u00EAm Role\r\n              </button>\r\n            </div>\r\n\r\n            <div style=\"max-height: 450px; overflow-y: auto\">\r\n              <nz-table\r\n                #roleTable\r\n                [nzData]=\"lstRoleInUser\"\r\n                [nzSize]=\"'small'\"\r\n                [nzShowPagination]=\"lstRoleInUser.length > 20\"\r\n                [nzPageSize]=\"20\"\r\n                [nzBordered]=\"true\"\r\n              >\r\n                <thead>\r\n                  <tr>\r\n                    <th nzWidth=\"40px\">STT</th>\r\n                    <th>Role</th>\r\n                    <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n                  </tr>\r\n                </thead>\r\n                <tbody>\r\n                  <tr *ngFor=\"let item of roleTable.data; let i = index\">\r\n                    <td>{{ i + 1 }}</td>\r\n                    <td>\r\n                      <div style=\"font-weight: 500\">{{ item.Name }}</div>\r\n                      <div style=\"font-size: 12px; color: #888\">{{ item.Code }}</div>\r\n                    </td>\r\n                    <td nzAlign=\"center\">\r\n                      <button\r\n                        nz-button\r\n                        nzType=\"link\"\r\n                        nzDanger\r\n                        nzSize=\"small\"\r\n                        nz-popconfirm\r\n                        nzPopconfirmTitle=\"X\u00F3a Role n\u00E0y?\"\r\n                        (nzOnConfirm)=\"deleteRoleFromUser(item)\"\r\n                      >\r\n                        <span nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\r\n                      </button>\r\n                    </td>\r\n                  </tr>\r\n                </tbody>\r\n              </nz-table>\r\n            </div>\r\n          </div>\r\n        </nz-tab>\r\n\r\n        <!-- ch\u1EE9c danh -->\r\n        <nz-tab nzTitle=\"Ch\u1EE9c danh\">\r\n          <div style=\"padding: 8px\">\r\n            <h3 style=\"margin-bottom: 16px\">Danh s\u00E1ch Ch\u1EE9c danh</h3>\r\n\r\n            <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n              <span style=\"font-weight: 500\">Ch\u1EE9c danh ({{ lstJobTitleInUser.length }})</span>\r\n              <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddJobTitleModal()\">\r\n                <span nz-icon nzType=\"plus\"></span>\r\n                Th\u00EAm Ch\u1EE9c danh\r\n              </button>\r\n            </div>\r\n\r\n            <div style=\"max-height: 450px; overflow-y: auto\">\r\n              <nz-table\r\n                #orgJobTilte\r\n                [nzData]=\"lstJobTitleInUser\"\r\n                [nzSize]=\"'small'\"\r\n                [nzShowPagination]=\"lstJobTitleInUser.length > 20\"\r\n                [nzPageSize]=\"20\"\r\n              >\r\n                <thead>\r\n                  <tr>\r\n                    <th nzWidth=\"40px\">STT</th>\r\n                    <th>Ch\u1EE9c danh</th>\r\n                    <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n                  </tr>\r\n                </thead>\r\n                <tbody>\r\n                  <tr *ngFor=\"let item of orgJobTilte.data; let i = index\">\r\n                    <td>{{ i + 1 }}</td>\r\n                    <td>\r\n                      <div style=\"font-weight: 500\">{{ item.Name }}</div>\r\n                      <div style=\"font-size: 12px; color: #888\">{{ item.Code }}</div>\r\n                    </td>\r\n                    <td nzAlign=\"center\">\r\n                      <button\r\n                        nz-button\r\n                        nzType=\"link\"\r\n                        nzDanger\r\n                        nzSize=\"small\"\r\n                        nz-popconfirm\r\n                        nzPopconfirmTitle=\"X\u00F3a ch\u1EE9c danh n\u00E0y?\"\r\n                        nzAutofocus=\"ok\"\r\n                        (nzOnConfirm)=\"deleteJobTitleFromUser(item)\"\r\n                      >\r\n                        <span nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\r\n                      </button>\r\n                    </td>\r\n                  </tr>\r\n                </tbody>\r\n              </nz-table>\r\n            </div>\r\n          </div>\r\n        </nz-tab>\r\n      </nz-tabset>\r\n    </div>\r\n  </div>\r\n</form>\r\n\r\n<!-- Modal ch\u1ECDn Org -->\r\n<nz-modal\r\n  [(nzVisible)]=\"isAddOrgModalVisible\"\r\n  nzTitle=\"Th\u00EAm \u0110\u01A1n v\u1ECB v\u00E0o User\"\r\n  [nzWidth]=\"700\"\r\n  (nzOnCancel)=\"closeAddOrgModal()\"\r\n  (nzOnOk)=\"addOrgsToUser()\"\r\n  nzOkText=\"Th\u00EAm\"\r\n  nzCancelText=\"H\u1EE7y\"\r\n>\r\n  <ng-container *nzModalContent>\r\n    <nz-alert\r\n      *ngIf=\"!isOneUserMultiOrgs\"\r\n      nzType=\"info\"\r\n      nzMessage=\"Ch\u1EC9 \u0111\u01B0\u1EE3c ch\u1ECDn 1 \u0110\u01A1n v\u1ECB\"\r\n      nzShowIcon\r\n      style=\"margin-bottom: 16px\"\r\n    ></nz-alert>\r\n    <!-- Search box -->\r\n    <nz-input-group [nzPrefix]=\"prefixIconSearchOrg\" style=\"margin-bottom: 16px\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        placeholder=\"T\u00ECm ki\u1EBFm \u0110\u01A1n v\u1ECB...\"\r\n        [(ngModel)]=\"searchOrgText\"\r\n        (ngModelChange)=\"filterAvailableOrgs()\"\r\n      />\r\n    </nz-input-group>\r\n    <ng-template #prefixIconSearchOrg>\r\n      <span nz-icon nzType=\"search\"></span>\r\n    </ng-template>\r\n\r\n    <nz-table\r\n      #addOrgTable\r\n      [nzData]=\"lstFilteredOrg\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"true\"\r\n      [nzPageSize]=\"10\"\r\n      [nzLoading]=\"isLoadingAvailableOrgs\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th\r\n            nzWidth=\"60px\"\r\n            [nzShowCheckbox]=\"isOneUserMultiOrgs\"\r\n            [(nzChecked)]=\"isAllOrgChecked\"\r\n            (nzCheckedChange)=\"onAllOrgChecked($event)\"\r\n            [nzIndeterminate]=\"isOrgIndeterminate\"\r\n          ></th>\r\n          <th nzWidth=\"150px\">M\u00E3</th>\r\n          <th>T\u00EAn</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let item of addOrgTable.data\">\r\n          <td nzAlign=\"center\">\r\n            <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onOrgChecked(item, $event)\"></label>\r\n          </td>\r\n          <td>{{ item.Code }}</td>\r\n          <td>{{ item.TreeNodeName || item.Name }}</td>\r\n        </tr>\r\n      </tbody>\r\n    </nz-table>\r\n  </ng-container>\r\n</nz-modal>\r\n\r\n<!-- Modal ch\u1ECDn Role -->\r\n<nz-modal\r\n  [(nzVisible)]=\"isAddRoleModalVisible\"\r\n  nzTitle=\"Th\u00EAm Role v\u00E0o User\"\r\n  [nzWidth]=\"700\"\r\n  (nzOnCancel)=\"closeAddRoleModal()\"\r\n  (nzOnOk)=\"addRolesToUser()\"\r\n  nzOkText=\"Th\u00EAm\"\r\n  nzCancelText=\"H\u1EE7y\"\r\n>\r\n  <ng-container *nzModalContent>\r\n    <!-- Search box -->\r\n    <nz-input-group [nzPrefix]=\"prefixIconSearchRole\" style=\"margin-bottom: 16px\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        placeholder=\"T\u00ECm ki\u1EBFm Role...\"\r\n        [(ngModel)]=\"searchRoleText\"\r\n        (ngModelChange)=\"filterAvailableRoles()\"\r\n      />\r\n    </nz-input-group>\r\n    <ng-template #prefixIconSearchRole>\r\n      <span nz-icon nzType=\"search\"></span>\r\n    </ng-template>\r\n\r\n    <nz-table\r\n      #addRoleTable\r\n      [nzData]=\"lstFilteredRole\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"true\"\r\n      [nzPageSize]=\"10\"\r\n      [nzLoading]=\"isLoadingAvailableRoles\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th\r\n            nzWidth=\"60px\"\r\n            nzShowCheckbox\r\n            [(nzChecked)]=\"isAllRoleChecked\"\r\n            (nzCheckedChange)=\"onAllRoleChecked($event)\"\r\n            [nzIndeterminate]=\"isRoleIndeterminate\"\r\n          ></th>\r\n          <th nzWidth=\"150px\">M\u00E3</th>\r\n          <th>T\u00EAn</th>\r\n          <th>M\u00F4 t\u1EA3</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let item of addRoleTable.data\">\r\n          <td nzAlign=\"center\">\r\n            <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onRoleChecked(item, $event)\"></label>\r\n          </td>\r\n          <td>{{ item.Code }}</td>\r\n          <td>{{ item.Name }}</td>\r\n          <td>{{ item.Description }}</td>\r\n        </tr>\r\n      </tbody>\r\n    </nz-table>\r\n  </ng-container>\r\n</nz-modal>\r\n\r\n<!-- Modal ch\u1ECDn JobTitle -->\r\n<nz-modal\r\n  [(nzVisible)]=\"isAddJobTitleModalVisible\"\r\n  nzTitle=\"Th\u00EAm Ch\u1EE9c danh v\u00E0o User\"\r\n  [nzWidth]=\"700\"\r\n  (nzOnCancel)=\"closeAddJobTitleModal()\"\r\n  (nzOnOk)=\"addJobTitlesToUser()\"\r\n  nzOkText=\"Th\u00EAm\"\r\n  nzCancelText=\"H\u1EE7y\"\r\n>\r\n  <ng-container *nzModalContent>\r\n    <nz-alert\r\n      *ngIf=\"!isOneUserMultiJobTitles\"\r\n      nzType=\"info\"\r\n      nzMessage=\"Ch\u1EC9 \u0111\u01B0\u1EE3c ch\u1ECDn 1 Ch\u1EE9c danh\"\r\n      nzShowIcon\r\n      style=\"margin-bottom: 16px\"\r\n    ></nz-alert>\r\n    <!-- Search box -->\r\n    <nz-input-group [nzPrefix]=\"prefixIconSearchJobTitle\" style=\"margin-bottom: 16px\">\r\n      <input\r\n        type=\"text\"\r\n        nz-input\r\n        placeholder=\"T\u00ECm ki\u1EBFm Ch\u1EE9c danh...\"\r\n        [(ngModel)]=\"searchJobTitleText\"\r\n        (ngModelChange)=\"filterAvailableJobTitles()\"\r\n      />\r\n    </nz-input-group>\r\n    <ng-template #prefixIconSearchJobTitle>\r\n      <span nz-icon nzType=\"search\"></span>\r\n    </ng-template>\r\n\r\n    <nz-table\r\n      #addJobTitleTable\r\n      [nzData]=\"lstFilteredJobTitle\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowPagination]=\"true\"\r\n      [nzPageSize]=\"10\"\r\n      [nzLoading]=\"isLoadingAvailableJobTitles\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th\r\n            nzWidth=\"60px\"\r\n            [nzShowCheckbox]=\"isOneUserMultiJobTitles\"\r\n            [(nzChecked)]=\"isAllJobTitleChecked\"\r\n            (nzCheckedChange)=\"onAllJobTitleChecked($event)\"\r\n            [nzIndeterminate]=\"isJobTitleIndeterminate\"\r\n          ></th>\r\n          <th nzWidth=\"150px\">M\u00E3</th>\r\n          <th>T\u00EAn</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let item of addJobTitleTable.data\">\r\n          <td>\r\n            <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onJobTitleChecked(item, $event)\"></label>\r\n          </td>\r\n          <td>{{ item.Code }}</td>\r\n          <td>{{ item.Name }}</td>\r\n        </tr>\r\n      </tbody>\r\n    </nz-table>\r\n  </ng-container>\r\n</nz-modal>\r\n" }]
         }] });
 
 class UserProfileService {
@@ -8641,7 +8835,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                     ], template: "<!-- <h3>User Profile</h3> -->\r\n<nz-tabset [nzSize]=\"'small'\" [nzType]=\"'card'\" (nzSelectedIndexChange)=\"nzSelectedIndexChange($event)\">\r\n  <nz-tab [nzTitle]=\"'\u0110\u1ED5i m\u1EADt kh\u1EA9u'\">\r\n    <form [formGroup]=\"formData\" (ngSubmit)=\"onSubmit()\" nz-form>\r\n      <div nz-row>\r\n        <div nz-col [nzSpan]=\"8\">\r\n          <nz-form-item>\r\n            <nz-form-label [nzSpan]=\"10\" [nzFor]=\"'CurrentPassword'\" nzNoColon nzLabelWrap nzRequired>\r\n              M\u1EADt kh\u1EA9u hi\u1EC7n t\u1EA1i\r\n            </nz-form-label>\r\n            <nz-form-control [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n              <nz-input-group\r\n                [nzSuffix]=\"\r\n                  !CurrentPasswordVisible ? suffixTemplateShowCurrentPassword : suffixTemplateHiddenCurrentPassword\r\n                \"\r\n              >\r\n                <input\r\n                  nz-input\r\n                  type=\"{{ CurrentPasswordType }}\"\r\n                  formControlName=\"CurrentPassword\"\r\n                  id=\"CurrentPassword\"\r\n                />\r\n              </nz-input-group>\r\n              <ng-template #suffixTemplateShowCurrentPassword>\r\n                <nz-icon\r\n                  nzType=\"eye\"\r\n                  nzTheme=\"outline\"\r\n                  nz-tooltip\r\n                  nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n                  nzTooltipPlacement=\"right\"\r\n                  (click)=\"CurrentPasswordVisible = !CurrentPasswordVisible; CurrentPasswordType = 'text'\"\r\n                />\r\n              </ng-template>\r\n              <ng-template #suffixTemplateHiddenCurrentPassword>\r\n                <nz-icon\r\n                  nzType=\"eye-invisible\"\r\n                  nzTheme=\"outline\"\r\n                  nz-tooltip\r\n                  nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n                  nzTooltipPlacement=\"right\"\r\n                  (click)=\"CurrentPasswordVisible = !CurrentPasswordVisible; CurrentPasswordType = 'password'\"\r\n                />\r\n              </ng-template>\r\n            </nz-form-control>\r\n          </nz-form-item>\r\n\r\n          <nz-form-item>\r\n            <nz-form-label [nzSpan]=\"10\" [nzFor]=\"'NewPassword'\" nzNoColon nzLabelWrap nzRequired>\r\n              M\u1EADt kh\u1EA9u m\u1EDBi\r\n            </nz-form-label>\r\n            <nz-form-control [nzErrorTip]=\"NewPasswordErrorTpl\">\r\n              <nz-input-group\r\n                [nzSuffix]=\"!NewPasswordVisible ? suffixTemplateShowNewPassword : suffixTemplateHiddenNewPassword\"\r\n              >\r\n                <input nz-input type=\"{{ NewPasswordType }}\" formControlName=\"NewPassword\" id=\"NewPassword\" />\r\n              </nz-input-group>\r\n              <ng-template #suffixTemplateShowNewPassword>\r\n                <nz-icon\r\n                  nzType=\"eye\"\r\n                  nzTheme=\"outline\"\r\n                  nz-tooltip\r\n                  nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n                  nzTooltipPlacement=\"right\"\r\n                  (click)=\"NewPasswordVisible = !NewPasswordVisible; NewPasswordType = 'text'\"\r\n                />\r\n              </ng-template>\r\n              <ng-template #suffixTemplateHiddenNewPassword>\r\n                <nz-icon\r\n                  nzType=\"eye-invisible\"\r\n                  nzTheme=\"outline\"\r\n                  nz-tooltip\r\n                  nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n                  nzTooltipPlacement=\"right\"\r\n                  (click)=\"NewPasswordVisible = !NewPasswordVisible; NewPasswordType = 'password'\"\r\n                />\r\n              </ng-template>\r\n              <ng-template #NewPasswordErrorTpl let-control>\r\n                @if (control.errors?.[\"required\"]) {\r\n                  {{ \"REQUIRED_FIELD\" | translate }}\r\n                }\r\n                @if (control.errors?.[\"minlength\"]) {\r\n                  M\u1EADt kh\u1EA9u d\u00E0i t\u1ED1i thi\u1EC3u 6 k\u00FD t\u1EF1\r\n                }\r\n              </ng-template>\r\n            </nz-form-control>\r\n          </nz-form-item>\r\n\r\n          <nz-form-item>\r\n            <nz-form-label [nzSpan]=\"10\" [nzFor]=\"'ConfirmPassword'\" nzNoColon nzLabelWrap nzRequired>\r\n              X\u00E1c nh\u1EADn m\u1EADt kh\u1EA9u m\u1EDBi\r\n            </nz-form-label>\r\n            <nz-form-control [nzErrorTip]=\"ConfirmPasswordErrorTpl\">\r\n              <nz-input-group\r\n                [nzSuffix]=\"\r\n                  !ConfirmPasswordVisible ? suffixTemplateShowConfirmPassword : suffixTemplateHiddenConfirmPassword\r\n                \"\r\n              >\r\n                <input\r\n                  nz-input\r\n                  type=\"{{ ConfirmPasswordType }}\"\r\n                  formControlName=\"ConfirmPassword\"\r\n                  id=\"ConfirmPassword\"\r\n                />\r\n              </nz-input-group>\r\n              <ng-template #suffixTemplateShowConfirmPassword>\r\n                <nz-icon\r\n                  nzType=\"eye\"\r\n                  nzTheme=\"outline\"\r\n                  nz-tooltip\r\n                  nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n                  nzTooltipPlacement=\"right\"\r\n                  (click)=\"ConfirmPasswordVisible = !ConfirmPasswordVisible; ConfirmPasswordType = 'text'\"\r\n                />\r\n              </ng-template>\r\n              <ng-template #suffixTemplateHiddenConfirmPassword>\r\n                <nz-icon\r\n                  nzType=\"eye-invisible\"\r\n                  nzTheme=\"outline\"\r\n                  nz-tooltip\r\n                  nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n                  nzTooltipPlacement=\"right\"\r\n                  (click)=\"ConfirmPasswordVisible = !ConfirmPasswordVisible; ConfirmPasswordType = 'password'\"\r\n                />\r\n              </ng-template>\r\n              <ng-template #ConfirmPasswordErrorTpl let-control>\r\n                @if (control.errors?.[\"required\"]) {\r\n                  {{ \"REQUIRED_FIELD\" | translate }}\r\n                }\r\n                @if (control.errors?.[\"passwordMismatch\"]) {\r\n                  M\u1EADt kh\u1EA9u kh\u00F4ng kh\u1EDBp\r\n                }\r\n              </ng-template>\r\n            </nz-form-control>\r\n          </nz-form-item>\r\n        </div>\r\n      </div>\r\n\r\n      <button nz-button nzType=\"primary\">\u0110\u1ED5i m\u1EADt kh\u1EA9u</button>\r\n    </form>\r\n  </nz-tab>\r\n\r\n  <nz-tab [nzTitle]=\"'Giao di\u1EC7n'\">\r\n    <div nz-row>\r\n      <extend-checkbox\r\n        nz-col\r\n        [nzSpan]=\"6\"\r\n        [label]=\"'High contrast'\"\r\n        [labelSpan]=\"0\"\r\n        [(_ngModel)]=\"isHighContrast\"\r\n        (_ngModelChange)=\"onChangeHighContrast()\"\r\n      ></extend-checkbox>\r\n\r\n      <extend-input\r\n        nz-col\r\n        [nzSpan]=\"6\"\r\n        [label]=\"'Side width'\"\r\n        [(_ngModel)]=\"sideWidth\"\r\n        (_ngModelChange)=\"onChangeSideWidth()\"\r\n      ></extend-input>\r\n    </div>\r\n\r\n    <div nz-row [nzGutter]=\"16\">\r\n      <div nz-col>\r\n        Theme color:\r\n        <nz-color-picker\r\n          nzShowText\r\n          [ngModel]=\"\r\n            profileService.userProfile[profileService.KEY_THEME_COLOR] ||\r\n            profileService.themecf[profileService.KEY_THEME_COLOR] ||\r\n            profileService.DEFAULT_THEME_COLOR\r\n          \"\r\n          (ngModelChange)=\"\r\n            profileService.updateUserProfile(profileService.KEY_THEME_COLOR, $event); profileService.loadTheme()\r\n          \"\r\n        ></nz-color-picker>\r\n      </div>\r\n    </div>\r\n\r\n    <div nz-row [nzGutter]=\"16\">\r\n      <div nz-col>\r\n        Theme menu color:\r\n        <nz-color-picker\r\n          nzShowText\r\n          [ngModel]=\"\r\n            profileService.userProfile[profileService.KEY_THEME_MENU_COLOR] ||\r\n            profileService.themecf[profileService.KEY_THEME_MENU_COLOR] ||\r\n            profileService.DEFAULT_THEME_MENU_COLOR\r\n          \"\r\n          (ngModelChange)=\"\r\n            profileService.updateUserProfile(profileService.KEY_THEME_MENU_COLOR, $event); profileService.loadTheme()\r\n          \"\r\n        ></nz-color-picker>\r\n      </div>\r\n    </div>\r\n\r\n    <div nz-row [nzGutter]=\"16\">\r\n      <div nz-col>\r\n        <button type=\"button\" nz-button nzType=\"primary\" nzDanger (click)=\"profileService.resetTheme()\">\r\n          Reset Theme\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </nz-tab>\r\n  <!-- <nz-tab [nzTitle]=\"'Tab3'\"> Tab3 </nz-tab> -->\r\n</nz-tabset>\r\n" }]
         }] });
 
-const URLs$3 = {
+const URLs$4 = {
     getById: '/api/App_Sequence/GetById',
     getAll: '/api/App_Sequence/GetAll',
     getList: '/api/App_Sequence/GetList',
@@ -8653,13 +8847,13 @@ class SequenceService extends HTTPService {
     commonService = inject(CommonService);
     getById(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$3.getById, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$4.getById, params);
     }
     getAll() {
-        return this.post(AppGlobals.apiEndpoint + URLs$3.getAll);
+        return this.post(AppGlobals.apiEndpoint + URLs$4.getAll);
     }
     getList(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$3.getList, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$4.getList, filter);
     }
     getPaging(filter) {
         return this.commonService.ESP({
@@ -8675,7 +8869,7 @@ class SequenceService extends HTTPService {
     }
     delete(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$3.delete, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$4.delete, params);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SequenceService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SequenceService, providedIn: 'root' });
@@ -8777,7 +8971,7 @@ class SequenceListComponent extends BaseComponent {
         this.getData();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SequenceListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: SequenceListComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <div nz-flex nzGap=\"small\">\r\n        <button-add (click)=\"edit(null)\"></button-add>\r\n        <button-search (click)=\"search()\"></button-search>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"data.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowSizeChanger]=\"true\"\r\n      [nzFrontPagination]=\"false\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th>Code</th>\r\n          <th nzWidth=\"75px\">Type</th>\r\n          <th nzWidth=\"75px\">Prefix</th>\r\n          <th nzWidth=\"75px\">Suffix</th>\r\n          <th nzWidth=\"75px\">Length</th>\r\n          <th nzWidth=\"75px\">Start at</th>\r\n          <th>Description</th>\r\n          <th nzWidth=\"75px\">Active</th>\r\n          <th nzWidth=\"75px\" nzRight>Action</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input size=\"small\" [(_ngModel)]=\"filter.Code\"></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th nzRight></th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of table.data; track $index; let i = $index) {\r\n          <tr>\r\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n            <td class=\"link-detail\" (click)=\"edit(row)\">{{ row.Code }}</td>\r\n            <td>{{ row.Type }}</td>\r\n            <td>{{ row.Prefix }}</td>\r\n            <td>{{ row.Suffix }}</td>\r\n            <td>{{ row.Length }}</td>\r\n            <td>{{ row.SeqStartAt }}</td>\r\n            <td>{{ row.Description }}</td>\r\n            <td class=\"center\">\r\n              @if (row.IsActive) {\r\n                <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n              }\r\n            </td>\r\n            <td class=\"center\" nzRight>\r\n              <icon-edit (click)=\"edit(row)\"></icon-edit>\r\n              <box [width]=\"4\"></box>\r\n              <icon-delete></icon-delete>\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-row nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "component", type: ButtonSearch, selector: "button-search" }, { kind: "component", type: ButtonAdd, selector: "button-add" }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$2.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "directive", type: i6$2.NzCellFixedDirective, selector: "td[nzRight],th[nzRight],td[nzLeft],th[nzLeft]", inputs: ["nzRight", "nzLeft", "colspan", "colSpan"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: IconEdit, selector: "icon-edit", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i5$3.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: SequenceListComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <div nz-flex nzGap=\"small\">\r\n        <button-add (click)=\"edit(null)\"></button-add>\r\n        <button-search (click)=\"search()\"></button-search>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"data.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowSizeChanger]=\"true\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'Code' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'Code'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Code\r\n          </th>\r\n          <th nzWidth=\"75px\">Type</th>\r\n          <th nzWidth=\"75px\">Prefix</th>\r\n          <th nzWidth=\"75px\">Suffix</th>\r\n          <th nzWidth=\"75px\">Length</th>\r\n          <th nzWidth=\"75px\">Start at</th>\r\n          <th>Description</th>\r\n          <th nzWidth=\"75px\">Active</th>\r\n          <th nzWidth=\"75px\">Action</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input size=\"small\" [(_ngModel)]=\"filter.Code\"></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of table.data; track $index; let i = $index) {\r\n          <tr>\r\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n            <td class=\"link-detail\" (click)=\"edit(row)\">{{ row.Code }}</td>\r\n            <td>{{ row.Type }}</td>\r\n            <td>{{ row.Prefix }}</td>\r\n            <td>{{ row.Suffix }}</td>\r\n            <td>{{ row.Length }}</td>\r\n            <td>{{ row.SeqStartAt }}</td>\r\n            <td>{{ row.Description }}</td>\r\n            <td class=\"center\">\r\n              @if (row.IsActive) {\r\n                <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n              }\r\n            </td>\r\n            <td class=\"center\">\r\n              <icon-edit (click)=\"edit(row)\"></icon-edit>\r\n              <box [width]=\"4\"></box>\r\n              <icon-delete></icon-delete>\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-row nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "component", type: ButtonSearch, selector: "button-search" }, { kind: "component", type: ButtonAdd, selector: "button-add" }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$2.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "component", type: i6$2.NzThAddOnComponent, selector: "th[nzColumnKey], th[nzSortFn], th[nzSortOrder], th[nzFilters], th[nzShowSort], th[nzShowFilter], th[nzCustomFilter]", inputs: ["nzColumnKey", "nzFilterMultiple", "nzSortOrder", "nzSortPriority", "nzSortDirections", "nzFilters", "nzSortFn", "nzFilterFn", "nzShowSort", "nzShowFilter", "nzCustomFilter"], outputs: ["nzCheckedChange", "nzSortOrderChange", "nzFilterChange"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: IconEdit, selector: "icon-edit", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i5$3.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SequenceListComponent, decorators: [{
             type: Component,
@@ -8794,7 +8988,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         IconDelete,
                         NzPaginationModule,
                         CommonModule,
-                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <div nz-flex nzGap=\"small\">\r\n        <button-add (click)=\"edit(null)\"></button-add>\r\n        <button-search (click)=\"search()\"></button-search>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"data.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowSizeChanger]=\"true\"\r\n      [nzFrontPagination]=\"false\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th>Code</th>\r\n          <th nzWidth=\"75px\">Type</th>\r\n          <th nzWidth=\"75px\">Prefix</th>\r\n          <th nzWidth=\"75px\">Suffix</th>\r\n          <th nzWidth=\"75px\">Length</th>\r\n          <th nzWidth=\"75px\">Start at</th>\r\n          <th>Description</th>\r\n          <th nzWidth=\"75px\">Active</th>\r\n          <th nzWidth=\"75px\" nzRight>Action</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input size=\"small\" [(_ngModel)]=\"filter.Code\"></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th nzRight></th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of table.data; track $index; let i = $index) {\r\n          <tr>\r\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n            <td class=\"link-detail\" (click)=\"edit(row)\">{{ row.Code }}</td>\r\n            <td>{{ row.Type }}</td>\r\n            <td>{{ row.Prefix }}</td>\r\n            <td>{{ row.Suffix }}</td>\r\n            <td>{{ row.Length }}</td>\r\n            <td>{{ row.SeqStartAt }}</td>\r\n            <td>{{ row.Description }}</td>\r\n            <td class=\"center\">\r\n              @if (row.IsActive) {\r\n                <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n              }\r\n            </td>\r\n            <td class=\"center\" nzRight>\r\n              <icon-edit (click)=\"edit(row)\"></icon-edit>\r\n              <box [width]=\"4\"></box>\r\n              <icon-delete></icon-delete>\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-row nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-flex nzJustify=\"end\">\r\n      <div nz-flex nzGap=\"small\">\r\n        <button-add (click)=\"edit(null)\"></button-add>\r\n        <button-search (click)=\"search()\"></button-search>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div nz-col nzSpan=\"24\">\r\n    <nz-table\r\n      #table\r\n      [nzData]=\"data.LstItem || []\"\r\n      [nzBordered]=\"true\"\r\n      [nzSize]=\"'small'\"\r\n      [nzShowSizeChanger]=\"true\"\r\n      [nzFrontPagination]=\"false\"\r\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\r\n    >\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"50px\">#</th>\r\n          <th\r\n            [nzShowSort]=\"true\"\r\n            [nzSortOrder]=\"filter.OrderOption.FieldName == 'Code' ? filter.OrderOption.Direction : null\"\r\n            [nzSortDirections]=\"['ascend', 'descend']\"\r\n            (nzSortOrderChange)=\"\r\n              filter.OrderOption.FieldName = 'Code'; filter.OrderOption.Direction = $event; getData()\r\n            \"\r\n          >\r\n            Code\r\n          </th>\r\n          <th nzWidth=\"75px\">Type</th>\r\n          <th nzWidth=\"75px\">Prefix</th>\r\n          <th nzWidth=\"75px\">Suffix</th>\r\n          <th nzWidth=\"75px\">Length</th>\r\n          <th nzWidth=\"75px\">Start at</th>\r\n          <th>Description</th>\r\n          <th nzWidth=\"75px\">Active</th>\r\n          <th nzWidth=\"75px\">Action</th>\r\n        </tr>\r\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n          <th></th>\r\n          <th>\r\n            <extend-input size=\"small\" [(_ngModel)]=\"filter.Code\"></extend-input>\r\n          </th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n          <th></th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (row of table.data; track $index; let i = $index) {\r\n          <tr>\r\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n            <td class=\"link-detail\" (click)=\"edit(row)\">{{ row.Code }}</td>\r\n            <td>{{ row.Type }}</td>\r\n            <td>{{ row.Prefix }}</td>\r\n            <td>{{ row.Suffix }}</td>\r\n            <td>{{ row.Length }}</td>\r\n            <td>{{ row.SeqStartAt }}</td>\r\n            <td>{{ row.Description }}</td>\r\n            <td class=\"center\">\r\n              @if (row.IsActive) {\r\n                <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n              }\r\n            </td>\r\n            <td class=\"center\">\r\n              <icon-edit (click)=\"edit(row)\"></icon-edit>\r\n              <box [width]=\"4\"></box>\r\n              <icon-delete></icon-delete>\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n  <div nz-col nzSpan=\"24\">\r\n    <div nz-row nzJustify=\"end\">\r\n      <nz-pagination\r\n        [nzSize]=\"'small'\"\r\n        [nzPageIndex]=\"filter.PageIndex + 1\"\r\n        [nzPageSize]=\"filter.PageSize\"\r\n        [nzTotal]=\"data.TotalCount || 0\"\r\n        [nzShowSizeChanger]=\"true\"\r\n        [nzShowTotal]=\"showTotalTpl\"\r\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n      >\r\n      </nz-pagination>\r\n\r\n      <ng-template #showTotalTpl let-total let-range=\"range\">\r\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }] });
 
 class SequenceDetailComponent extends BaseComponent {
@@ -8902,7 +9096,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                     ], template: "<form nz-form [formGroup]=\"formData\">\r\n  <div nz-row [nzGutter]=\"[32, 16]\">\r\n    <div nz-col [nzSpan]=\"24\">\r\n      <div nz-flex [nzGap]=\"'small'\" nzJustify=\"end\">\r\n        <button-save (click)=\"save()\"></button-save>\r\n        <button-delete (click)=\"delete()\"></button-delete>\r\n        <button-back (click)=\"goback()\"></button-back>\r\n      </div>\r\n    </div>\r\n\r\n    <nz-divider style=\"margin: 8px\"></nz-divider>\r\n\r\n    <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Code\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired> M\u00E3 </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n          <input nz-input formControlName=\"Code\" id=\"Code\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Name\" nzLabelAlign=\"left\" nzNoColon=\"true\"> Lo\u1EA1i </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\">\r\n          <nz-select formControlName=\"Type\" nzAllowClear>\r\n            <nz-option nzValue=\"daily\" nzLabel=\"Daily\"></nz-option>\r\n            <nz-option nzValue=\"monthly\" nzLabel=\"Monthly\"></nz-option>\r\n            <nz-option nzValue=\"yearly\" nzLabel=\"Yearly\"></nz-option>\r\n          </nz-select>\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Prefix\" nzLabelAlign=\"left\" nzNoColon=\"true\"> Prefix </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\">\r\n          <input nz-input formControlName=\"Prefix\" id=\"Prefix\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Suffix\" nzLabelAlign=\"left\" nzNoColon=\"true\"> Suffix </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\">\r\n          <input nz-input formControlName=\"Suffix\" id=\"Suffix\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <div nz-row>\r\n        <div nz-col [nzSpan]=\"8\"></div>\r\n        <div nz-col [nzSpan]=\"16\">\r\n          <label nz-checkbox formControlName=\"IsActive\">Active</label>\r\n        </div>\r\n      </div>\r\n\r\n      <box [height]=\"16\"></box>\r\n\r\n      <nz-alert\r\n        nzShowIcon\r\n        nzType=\"info\"\r\n        nzMessage=\"\uD83D\uDCA1 H\u01B0\u1EDBng d\u1EABn Prefix, Suffix\"\r\n        [nzDescription]=\"descriptionTemplate2\"\r\n      ></nz-alert>\r\n      <ng-template #descriptionTemplate2>\r\n        <div>{{ \"{ORG_CODE}\" }}</div>\r\n        <div>{{ \"{yyyy}\" }}</div>\r\n        <div>{{ \"{yy}\" }}</div>\r\n      </ng-template>\r\n    </div>\r\n\r\n    <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"Length\" nzLabelAlign=\"left\" nzNoColon=\"true\"> Length </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\">\r\n          <nz-input-number id=\"Length\" formControlName=\"Length\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <nz-form-item>\r\n        <nz-form-label [nzSpan]=\"8\" nzFor=\"SeqStartAt\" nzLabelAlign=\"left\" nzNoColon=\"true\"> SeqStartAt </nz-form-label>\r\n        <nz-form-control [nzSpan]=\"16\">\r\n          <nz-input-number id=\"SeqStartAt\" formControlName=\"SeqStartAt\" />\r\n        </nz-form-control>\r\n      </nz-form-item>\r\n\r\n      <extend-textarea [label]=\"'M\u00F4 t\u1EA3'\" [formData]=\"formData\" [controlName]=\"'Description'\"></extend-textarea>\r\n    </div>\r\n\r\n    <div nz-col nzSpan=\"24\"></div>\r\n  </div>\r\n</form>\r\n" }]
         }] });
 
-const URLs$2 = {
+const URLs$3 = {
     getPaging: '/api/Cache/paging',
     remove: '/api/Cache/remove',
     removeStartWith: '/api/Cache/remove-start-with',
@@ -8912,22 +9106,22 @@ const URLs$2 = {
 };
 class CacheService extends HTTPService {
     getPaging(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$2.getPaging, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$3.getPaging, filter);
     }
     getValue(key) {
         const params = new HttpParams().append('key', key);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$2.getValue, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$3.getValue, params);
     }
     remove(key) {
         const params = new HttpParams().append('key', key);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$2.remove, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$3.remove, params);
     }
     removeStartWith(prefix) {
         const params = new HttpParams().append('prefix', prefix);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$2.removeStartWith, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$3.removeStartWith, params);
     }
     clearAll() {
-        return this.post(AppGlobals.apiEndpoint + URLs$2.clearAll);
+        return this.post(AppGlobals.apiEndpoint + URLs$3.clearAll);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: CacheService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: CacheService, providedIn: 'root' });
@@ -8998,29 +9192,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 }]
         }] });
 
-class FormatBytesPipe {
-    transform(bytes, decimals = 2) {
-        if (bytes === null || bytes === undefined || isNaN(bytes))
-            return '0 B';
-        if (bytes === 0)
-            return '0 B';
-        const k = 1024;
-        const dm = decimals < 0 ? 0 : decimals;
-        const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
-        const i = Math.floor(Math.log(bytes) / Math.log(k));
-        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: FormatBytesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: FormatBytesPipe, isStandalone: true, name: "formatBytes" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: FormatBytesPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'formatBytes',
-                    standalone: true,
-                }]
-        }] });
-
 class CacheFilter {
     CacheKey = '';
     PageIndex = 0;
@@ -9454,7 +9625,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
             args: [{ imports: [NzButtonModule], template: "<div style=\"overflow: auto\">\r\n  <pre>\r\n      {{ _data }}\r\n  </pre>\r\n</div>\r\n<button nz-button nzType=\"primary\" (click)=\"load()\" style=\"position: fixed; right: 80px; bottom: 45px\">Reload</button>\r\n" }]
         }] });
 
-const URLs$1 = {
+const URLs$2 = {
     getById: '/api/App_Log/GetById',
     getAll: '/api/App_Log/GetAll',
     getList: '/api/App_Log/GetList',
@@ -9466,13 +9637,13 @@ class LogAppService extends HTTPService {
     commonService = inject(CommonService);
     getById(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$1.getById, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$2.getById, params);
     }
     getAll() {
-        return this.post(AppGlobals.apiEndpoint + URLs$1.getAll);
+        return this.post(AppGlobals.apiEndpoint + URLs$2.getAll);
     }
     getList(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$1.getList, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$2.getList, filter);
     }
     getPaging(filter) {
         return this.commonService.ESP({
@@ -9481,11 +9652,11 @@ class LogAppService extends HTTPService {
         });
     }
     addOrEdit(obj) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$1.addOrEdit, obj);
+        return this.postData(AppGlobals.apiEndpoint + URLs$2.addOrEdit, obj);
     }
     delete(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$1.delete, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$2.delete, params);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LogAppService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LogAppService, providedIn: 'root' });
@@ -9629,7 +9800,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
             args: [{ selector: 'app-version', imports: [NzButtonModule, ButtonReload], template: "<div style=\"padding: 16px\">\r\n  <button nz-button nzType=\"primary\" (click)=\"refresh()\">Refresh</button>&nbsp;\r\n\r\n  <pre>\r\nFrontend Client Version: {{ VscService.feClientVersion }}\r\nFrontend Server Version: {{ VscService.feServerVersion }}\r\n\r\nBackend Version: {{ JSON.stringify(VscService.beVersion, null, 2) }}\r\n\r\n\r\n</pre\r\n  >\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: VscService }] });
 
-const URLs = {
+const URLs$1 = {
     systemResourseInfo: '/api/monitor/SystemResourseInfo',
 };
 class MonitorService extends HTTPService {
@@ -9641,7 +9812,7 @@ class MonitorService extends HTTPService {
         });
     }
     getResourseInfo() {
-        return this.get(AppGlobals.apiEndpoint + URLs.systemResourseInfo, true);
+        return this.get(AppGlobals.apiEndpoint + URLs$1.systemResourseInfo, true);
     }
     getLstDbMonitorType() {
         return this.cms.ESP({
@@ -9812,6 +9983,239 @@ class MonitorFilter extends GridFilter {
     ExcuteTimeVisible;
 }
 
+class SynologyService extends HTTPService {
+    getBasePath() {
+        return this.get(AppGlobals.apiEndpoint + '/api/synology/getBasePath', true);
+    }
+    createFolder(path, name) {
+        const pr = new HttpParams().append('path', path).append('name', name);
+        return this.postParams(AppGlobals.apiEndpoint + '/api/synology/CreateFolder', pr, true);
+    }
+    renameItem(path, newName) {
+        const pr = new HttpParams().append('path', path).append('newName', newName);
+        return this.postParams(AppGlobals.apiEndpoint + '/api/synology/Rename', pr, true);
+    }
+    getListFile(path) {
+        const pr = new HttpParams().append('path', path);
+        return this.postParams(AppGlobals.apiEndpoint + '/api/synology/ListFiles', pr, true);
+    }
+    uploadFile(path, file) {
+        const formData = new FormData();
+        formData.append('path', path);
+        formData.append('file', file);
+        return this.httpClient.post(AppGlobals.apiEndpoint + '/api/synology/Upload', formData);
+    }
+    downloadFile(path) {
+        const pr = new HttpParams().append('path', path);
+        return this.httpClient.get(AppGlobals.apiEndpoint + '/api/synology/Download', {
+            params: pr,
+            responseType: 'blob',
+        });
+    }
+    deleteItem(path) {
+        const pr = new HttpParams().append('path', path);
+        return this.httpClient.delete(AppGlobals.apiEndpoint + '/api/synology/Delete', { params: pr });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SynologyService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SynologyService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SynologyService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class SynologyComponent extends BaseComponent {
+    service = inject(SynologyService);
+    datePipe = inject(DatePipe);
+    currentPath = '/';
+    fileList = [];
+    selectedRow;
+    async ngOnInit() {
+        Breadcrumb.lstBreadcrumb = [];
+        await this.getCurrentPath();
+        this.getListFile();
+    }
+    async getCurrentPath() {
+        await this.service.getBasePath().then((res) => (this.currentPath = res.Data));
+    }
+    createFolder() {
+        const folderName = prompt('New Floder:');
+        if (!folderName || folderName.trim() === '')
+            return;
+        this.isLoading = true;
+        this.service.createFolder(this.currentPath, folderName.trim()).then((res) => {
+            this.isLoading = false;
+            if (res.IsSuccess) {
+                this.success('Create Folder successful!');
+                this.getListFile();
+            }
+            else {
+                this.error(res.ErrorMessage);
+            }
+        }, (err) => {
+            this.isLoading = false;
+            this.handleError(err);
+        });
+    }
+    renameItem(item) {
+        this.selectedRow = item;
+        // trễ một chút cho hiện mầu row selected
+        setTimeout(() => {
+            const newName = prompt('New Name:', item.name);
+            if (!newName || newName.trim() === '' || newName.trim() === item.name)
+                return;
+            this.isLoading = true;
+            this.service.renameItem(item.path, newName.trim()).then((res) => {
+                this.isLoading = false;
+                if (res.IsSuccess) {
+                    this.success('Rename successful!');
+                    this.getListFile();
+                }
+                else {
+                    this.error(res.ErrorMessage);
+                }
+            }, (err) => {
+                this.isLoading = false;
+                this.handleError(err);
+            });
+        }, 100);
+    }
+    getListFile(path) {
+        if (path) {
+            this.currentPath = path;
+        }
+        this.isLoading = true;
+        this.service.getListFile(this.currentPath).then((res) => {
+            this.isLoading = false;
+            if (res.IsSuccess && res.Data) {
+                this.fileList = res.Data.files || [];
+            }
+            else {
+                this.error(res.ErrorMessage);
+            }
+        }, (err) => {
+            this.isLoading = false;
+            this.handleError(err);
+        });
+    }
+    openItem(item) {
+        if (item.isdir) {
+            this.getListFile(item.path);
+        }
+    }
+    canGoUp() {
+        const segments = this.currentPath.split('/').filter((p) => p.trim() !== '');
+        return segments.length > 1;
+    }
+    goUpLevel() {
+        if (!this.canGoUp())
+            return;
+        const segments = this.currentPath.split('/').filter((p) => p.trim() !== '');
+        segments.pop();
+        const newPath = '/' + segments.join('/');
+        this.getListFile(newPath);
+    }
+    onFileSelected(event) {
+        const file = event.target.files[0];
+        if (file) {
+            this.isLoading = true;
+            this.service.uploadFile(this.currentPath, file).subscribe({
+                next: (res) => {
+                    this.isLoading = false;
+                    if (res.IsSuccess) {
+                        this.success('Upload file successful!');
+                        this.getListFile();
+                    }
+                    else {
+                        this.error(res.ErrorMessage);
+                    }
+                    event.target.value = '';
+                },
+                error: (err) => {
+                    this.isLoading = false;
+                    this.handleError(err);
+                    event.target.value = '';
+                },
+            });
+        }
+    }
+    downloadFile(item) {
+        this.selectedRow = item;
+        this.isLoading = true;
+        this.service.downloadFile(item.path).subscribe({
+            next: (blob) => {
+                this.isLoading = false;
+                const url = window.URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = item.name;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                window.URL.revokeObjectURL(url);
+            },
+            error: (err) => {
+                this.isLoading = false;
+                this.handleError(err);
+            },
+        });
+    }
+    async deleteItem(item) {
+        this.selectedRow = item;
+        const typeStr = item.isdir ? 'folder' : 'file';
+        if (await this.confirm(`Delete ${typeStr} "${item.name}"?`)) {
+            this.isLoading = true;
+            this.service.deleteItem(item.path).subscribe({
+                next: (res) => {
+                    this.isLoading = false;
+                    if (res.IsSuccess) {
+                        this.success(`Delete successful!`);
+                        this.getListFile();
+                    }
+                    else {
+                        this.error(res.ErrorMessage);
+                    }
+                },
+                error: (err) => {
+                    this.isLoading = false;
+                    this.handleError(err);
+                },
+            });
+        }
+    }
+    formatBytes(bytes) {
+        if (!bytes || bytes === 0)
+            return '-';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    }
+    formatDate(timestamp) {
+        if (!timestamp)
+            return '-';
+        const date = new Date(timestamp * 1000);
+        return this.datePipe.transform(date, 'dd/MM/yyyy HH:mm:ss') || '-';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SynologyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: SynologyComponent, isStandalone: true, selector: "ng-component", providers: [DatePipe], usesInheritance: true, ngImport: i0, template: "<div nz-row nzGutter=\"32\">\r\n  <div nz-col nzSpan=\"24\" style=\"display: flex; justify-content: flex-end; gap: 8px\">\r\n    <input type=\"file\" #fileInput style=\"display: none\" (change)=\"onFileSelected($event)\" />\r\n    <button nz-button nzType=\"primary\" (click)=\"getListFile()\" nz-tooltip=\"Reload\" nzTooltipPlacement=\"bottom\">\r\n      <i nz-icon nzType=\"reload\"></i>\r\n    </button>\r\n    <button nz-button nzType=\"primary\" (click)=\"fileInput.click()\" nz-tooltip=\"Upload\" nzTooltipPlacement=\"bottom\">\r\n      <i nz-icon nzType=\"upload\"></i>\r\n    </button>\r\n    <button\r\n      nz-button\r\n      nzType=\"primary\"\r\n      (click)=\"createFolder()\"\r\n      nz-tooltip=\"New Folder\"\r\n      nzTooltipPlacement=\"bottomRight\"\r\n    >\r\n      <i nz-icon nzType=\"folder-add\"></i>\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<div nz-row nzGutter=\"32\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <strong>{{ currentPath }}</strong>\r\n  </div>\r\n</div>\r\n\r\n<nz-table #fileTable [nzData]=\"fileList\" [nzLoading]=\"isLoading\" nzSize=\"small\" nzBordered>\r\n  <thead>\r\n    <tr>\r\n      <th nzWidth=\"50px\" nzAlign=\"center\">Type</th>\r\n      <th>Name</th>\r\n      <!-- <th>Path</th> -->\r\n      <th nzWidth=\"100px\">Size</th>\r\n      <th nzWidth=\"180px\">Modified Date</th>\r\n      <th nzWidth=\"100px\" nzAlign=\"right\">Action</th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <tr *ngIf=\"canGoUp()\" (dblclick)=\"goUpLevel()\" style=\"cursor: pointer\">\r\n      <td nzAlign=\"center\">\r\n        <i nz-icon nzType=\"folder\" nzTheme=\"fill\" [style.color]=\"'#faad14'\"></i>\r\n      </td>\r\n      <td><strong>..</strong></td>\r\n      <!-- <td></td> -->\r\n      <td></td>\r\n      <td></td>\r\n      <td nzAlign=\"center\"></td>\r\n    </tr>\r\n\r\n    @for (item of fileTable.data; track $index) {\r\n      <tr\r\n        [class.selected]=\"item == selectedRow\"\r\n        (click)=\"selectedRow = item\"\r\n        (dblclick)=\"openItem(item)\"\r\n        style=\"cursor: pointer\"\r\n      >\r\n        <td nzAlign=\"center\">\r\n          <i\r\n            nz-icon\r\n            [nzType]=\"item.isdir ? 'folder' : 'file'\"\r\n            [nzTheme]=\"item.isdir ? 'fill' : 'outline'\"\r\n            [style.color]=\"item.isdir ? '#faad14' : '#1890ff'\"\r\n          ></i>\r\n        </td>\r\n        <td>\r\n          <strong>{{ item.name }}</strong>\r\n        </td>\r\n        <!-- <td>{{ item.path }}</td> -->\r\n        <td nzAlign=\"right\">{{ item.isdir ? \"-\" : formatBytes(item.additional?.size) }}</td>\r\n        <td nzAlign=\"right\">{{ formatDate(item.additional?.time?.mtime) }}</td>\r\n        <td nzAlign=\"right\">\r\n          <button\r\n            *ngIf=\"!item.isdir\"\r\n            nz-button\r\n            nzType=\"link\"\r\n            nzSize=\"small\"\r\n            (click)=\"downloadFile(item); $event.stopPropagation()\"\r\n          >\r\n            <nz-icon nzType=\"download\" nzTheme=\"outline\"></nz-icon>\r\n          </button>\r\n          <button nz-button nzType=\"link\" nzDanger nzSize=\"small\" (click)=\"deleteItem(item); $event.stopPropagation()\">\r\n            <nz-icon nzType=\"delete\" nzTheme=\"outline\"></nz-icon>\r\n          </button>\r\n          <button nz-button nzType=\"link\" nzSize=\"small\" (click)=\"renameItem(item); $event.stopPropagation()\">\r\n            <nz-icon nzType=\"retweet\" nzTheme=\"outline\" />\r\n          </button>\r\n        </td>\r\n      </tr>\r\n    }\r\n  </tbody>\r\n</nz-table>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$3.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i4.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$2.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i6$2.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$2.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "directive", type: i6$2.NzCellAlignDirective, selector: "th[nzAlign],td[nzAlign]", inputs: ["nzAlign"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i8.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SynologyComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        NzGridModule,
+                        NzButtonModule,
+                        NzTableModule,
+                        NzIconModule,
+                        NzFlexModule,
+                        NzToolTipModule,
+                    ], providers: [DatePipe], template: "<div nz-row nzGutter=\"32\">\r\n  <div nz-col nzSpan=\"24\" style=\"display: flex; justify-content: flex-end; gap: 8px\">\r\n    <input type=\"file\" #fileInput style=\"display: none\" (change)=\"onFileSelected($event)\" />\r\n    <button nz-button nzType=\"primary\" (click)=\"getListFile()\" nz-tooltip=\"Reload\" nzTooltipPlacement=\"bottom\">\r\n      <i nz-icon nzType=\"reload\"></i>\r\n    </button>\r\n    <button nz-button nzType=\"primary\" (click)=\"fileInput.click()\" nz-tooltip=\"Upload\" nzTooltipPlacement=\"bottom\">\r\n      <i nz-icon nzType=\"upload\"></i>\r\n    </button>\r\n    <button\r\n      nz-button\r\n      nzType=\"primary\"\r\n      (click)=\"createFolder()\"\r\n      nz-tooltip=\"New Folder\"\r\n      nzTooltipPlacement=\"bottomRight\"\r\n    >\r\n      <i nz-icon nzType=\"folder-add\"></i>\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<div nz-row nzGutter=\"32\">\r\n  <div nz-col nzSpan=\"24\">\r\n    <strong>{{ currentPath }}</strong>\r\n  </div>\r\n</div>\r\n\r\n<nz-table #fileTable [nzData]=\"fileList\" [nzLoading]=\"isLoading\" nzSize=\"small\" nzBordered>\r\n  <thead>\r\n    <tr>\r\n      <th nzWidth=\"50px\" nzAlign=\"center\">Type</th>\r\n      <th>Name</th>\r\n      <!-- <th>Path</th> -->\r\n      <th nzWidth=\"100px\">Size</th>\r\n      <th nzWidth=\"180px\">Modified Date</th>\r\n      <th nzWidth=\"100px\" nzAlign=\"right\">Action</th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <tr *ngIf=\"canGoUp()\" (dblclick)=\"goUpLevel()\" style=\"cursor: pointer\">\r\n      <td nzAlign=\"center\">\r\n        <i nz-icon nzType=\"folder\" nzTheme=\"fill\" [style.color]=\"'#faad14'\"></i>\r\n      </td>\r\n      <td><strong>..</strong></td>\r\n      <!-- <td></td> -->\r\n      <td></td>\r\n      <td></td>\r\n      <td nzAlign=\"center\"></td>\r\n    </tr>\r\n\r\n    @for (item of fileTable.data; track $index) {\r\n      <tr\r\n        [class.selected]=\"item == selectedRow\"\r\n        (click)=\"selectedRow = item\"\r\n        (dblclick)=\"openItem(item)\"\r\n        style=\"cursor: pointer\"\r\n      >\r\n        <td nzAlign=\"center\">\r\n          <i\r\n            nz-icon\r\n            [nzType]=\"item.isdir ? 'folder' : 'file'\"\r\n            [nzTheme]=\"item.isdir ? 'fill' : 'outline'\"\r\n            [style.color]=\"item.isdir ? '#faad14' : '#1890ff'\"\r\n          ></i>\r\n        </td>\r\n        <td>\r\n          <strong>{{ item.name }}</strong>\r\n        </td>\r\n        <!-- <td>{{ item.path }}</td> -->\r\n        <td nzAlign=\"right\">{{ item.isdir ? \"-\" : formatBytes(item.additional?.size) }}</td>\r\n        <td nzAlign=\"right\">{{ formatDate(item.additional?.time?.mtime) }}</td>\r\n        <td nzAlign=\"right\">\r\n          <button\r\n            *ngIf=\"!item.isdir\"\r\n            nz-button\r\n            nzType=\"link\"\r\n            nzSize=\"small\"\r\n            (click)=\"downloadFile(item); $event.stopPropagation()\"\r\n          >\r\n            <nz-icon nzType=\"download\" nzTheme=\"outline\"></nz-icon>\r\n          </button>\r\n          <button nz-button nzType=\"link\" nzDanger nzSize=\"small\" (click)=\"deleteItem(item); $event.stopPropagation()\">\r\n            <nz-icon nzType=\"delete\" nzTheme=\"outline\"></nz-icon>\r\n          </button>\r\n          <button nz-button nzType=\"link\" nzSize=\"small\" (click)=\"renameItem(item); $event.stopPropagation()\">\r\n            <nz-icon nzType=\"retweet\" nzTheme=\"outline\" />\r\n          </button>\r\n        </td>\r\n      </tr>\r\n    }\r\n  </tbody>\r\n</nz-table>\r\n" }]
+        }] });
+
 class App_Dic_Domain {
     // #region properties
     App_Dic_Domain_Id;
@@ -9852,9 +10256,11 @@ class App_Dic_DomainFilter extends GridFilter {
     DomainCode;
     ItemCode;
     ItemValue;
-    DomainCodeVisible;
-    ItemCodeVisible;
-    ItemValueVisible;
+    constructor() {
+        super();
+        this.OrderOption.FieldName = 'DomainCode';
+        this.OrderOption.Direction = 'ascend';
+    }
 }
 
 class App_File {
@@ -9884,7 +10290,72 @@ class App_File {
 }
 class FileFilter extends GridFilter {
     Code;
+    constructor() {
+        super();
+        this.OrderOption.FieldName = 'Code';
+        this.OrderOption.Direction = 'ascend';
+    }
+}
+
+const URLs = {
+    getById: '/api/App_MailTemplate/GetById',
+    getAll: '/api/App_MailTemplate/GetAll',
+    getList: '/api/App_MailTemplate/GetList',
+    getPaging: '/api/App_MailTemplate/GetPaging',
+    addOrEdit: '/api/App_MailTemplate/AddOrEdit',
+    delete: '/api/App_MailTemplate/Delete',
+    sendTestEmail: '/api/App_MailTemplate/SendTestEmail',
+    cronJobScheduler_RefreshJobs: '/api/App_MailTemplate/CronJobScheduler_RefreshJobs',
+};
+class MailTemplateService extends HTTPService {
+    cmservice = inject(CommonService);
+    getById(id) {
+        const params = new HttpParams().append('id', id);
+        return this.postParams(AppGlobals.apiEndpoint + URLs.getById, params);
+    }
+    getAll() {
+        return this.cmservice.ESP({
+            SPN: 'App_MailTemplate_getAll',
+        });
+    }
+    getList(filter) {
+        return this.postData(AppGlobals.apiEndpoint + URLs.getList, filter);
+    }
+    getPaging(filter) {
+        return this.cmservice.ESP({
+            SPN: 'App_MailTemplate_getPaging',
+            Params: [filter],
+        });
+    }
+    addOrEdit(obj) {
+        return this.postData(AppGlobals.apiEndpoint + URLs.addOrEdit, obj);
+    }
+    delete(id) {
+        const params = new HttpParams().append('id', id);
+        return this.postParams(AppGlobals.apiEndpoint + URLs.delete, params);
+    }
+    getSettingsByTemplateId(templateId) {
+        return this.cmservice.ESP({
+            SPN: 'App_MailSendSetting_getByTemplateId',
+            Params: [templateId],
+        });
+    }
+    sendTestEmail(payload) {
+        return this.postData(AppGlobals.apiEndpoint + URLs.sendTestEmail, payload);
+    }
+    testFillData(id) {
+        return this.post(AppGlobals.apiEndpoint + '/api/App_MailTemplate/testFillData?id=' + id);
+    }
+    cronJobScheduler_RefreshJobs() {
+        return this.post(AppGlobals.apiEndpoint + URLs.cronJobScheduler_RefreshJobs);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MailTemplateService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MailTemplateService, providedIn: 'root' });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MailTemplateService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
 // import {
 //   Box,
@@ -13305,6 +13776,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 type: Output
             }] } });
 
+class SideMenuComponent extends BaseComponent {
+    isCollapsed = false;
+    filteredLstMenu = [];
+    currentHeaderId = '';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SideMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: SideMenuComponent, isStandalone: true, selector: "side-menu", inputs: { isCollapsed: "isCollapsed", filteredLstMenu: "filteredLstMenu", currentHeaderId: "currentHeaderId" }, usesInheritance: true, ngImport: i0, template: "<ul nz-menu nzTheme=\"light\" nzMode=\"inline\" [nzInlineIndent]=\"12\" [nzInlineCollapsed]=\"isCollapsed\">\r\n  @for (menuLv1 of filteredLstMenu; track menuLv1.App_Menu_Id) {\r\n    @if (menuLv1.SubMenu?.length) {\r\n      <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\r\n        @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\r\n          @if (menuLv2.SubMenu?.length) {\r\n            <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\r\n              @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\r\n                @if (menuLv3.SubMenu?.length) {\r\n                  <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\r\n                    @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\r\n                      @if (menuLv4.SubMenu?.length) {\r\n                        <ul nz-submenu [nzOpen]=\"menuLv4.Open\" [nzTitle]=\"menuLv4.Name\" [nzIcon]=\"menuLv4.Icon\">\r\n                          @for (menuLv5 of menuLv4.SubMenu; track menuLv5.App_Menu_Id) {}\r\n                        </ul>\r\n                      } @else {\r\n                        <li nz-menu-item nzMatchRouter>\r\n                          <nz-icon *ngIf=\"menuLv4.Icon\" [nzType]=\"menuLv4.Icon\"></nz-icon>\r\n                          <box [width]=\"2\"></box>\r\n                          <a [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv4.Url\">\r\n                            {{ menuLv4.Name }}\r\n                          </a>\r\n                        </li>\r\n                      }\r\n                    }\r\n                  </ul>\r\n                } @else {\r\n                  <li nz-menu-item nzMatchRouter>\r\n                    <nz-icon *ngIf=\"menuLv3.Icon\" [nzType]=\"menuLv3.Icon\"></nz-icon><box [width]=\"2\"></box>\r\n                    <a [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv3.Url\">\r\n                      {{ menuLv3.Name }}\r\n                    </a>\r\n                  </li>\r\n                }\r\n              }\r\n            </ul>\r\n          } @else {\r\n            <li nz-menu-item nzMatchRouter>\r\n              <nz-icon *ngIf=\"menuLv2.Icon\" [nzType]=\"menuLv2.Icon\"></nz-icon><box [width]=\"2\"></box>\r\n              <a [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv2.Url\">\r\n                {{ menuLv2.Name }}\r\n              </a>\r\n            </li>\r\n          }\r\n        }\r\n      </ul>\r\n    } @else {\r\n      <li nz-menu-item nzMatchRouter>\r\n        <nz-icon *ngIf=\"menuLv1.Icon\" [nzType]=\"menuLv1.Icon\"></nz-icon><box [width]=\"2\"></box>\r\n        <a [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv1.Url\">\r\n          {{ menuLv1.Name }}\r\n        </a>\r\n      </li>\r\n    }\r\n  }\r\n</ul>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NzMenuModule }, { kind: "directive", type: i4$1.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$1.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "component", type: i4$1.NzSubMenuComponent, selector: "[nz-submenu]", inputs: ["nzMenuClassName", "nzPaddingLeft", "nzTitle", "nzIcon", "nzTriggerSubMenuAction", "nzOpen", "nzDisabled", "nzPlacement"], outputs: ["nzOpenChange"], exportAs: ["nzSubmenu"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SideMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'side-menu', imports: [CommonModule, NzMenuModule, NzIconModule, Box, RouterModule], template: "<ul nz-menu nzTheme=\"light\" nzMode=\"inline\" [nzInlineIndent]=\"12\" [nzInlineCollapsed]=\"isCollapsed\">\r\n  @for (menuLv1 of filteredLstMenu; track menuLv1.App_Menu_Id) {\r\n    @if (menuLv1.SubMenu?.length) {\r\n      <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\r\n        @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\r\n          @if (menuLv2.SubMenu?.length) {\r\n            <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\r\n              @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\r\n                @if (menuLv3.SubMenu?.length) {\r\n                  <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\r\n                    @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\r\n                      @if (menuLv4.SubMenu?.length) {\r\n                        <ul nz-submenu [nzOpen]=\"menuLv4.Open\" [nzTitle]=\"menuLv4.Name\" [nzIcon]=\"menuLv4.Icon\">\r\n                          @for (menuLv5 of menuLv4.SubMenu; track menuLv5.App_Menu_Id) {}\r\n                        </ul>\r\n                      } @else {\r\n                        <li nz-menu-item nzMatchRouter>\r\n                          <nz-icon *ngIf=\"menuLv4.Icon\" [nzType]=\"menuLv4.Icon\"></nz-icon>\r\n                          <box [width]=\"2\"></box>\r\n                          <a [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv4.Url\">\r\n                            {{ menuLv4.Name }}\r\n                          </a>\r\n                        </li>\r\n                      }\r\n                    }\r\n                  </ul>\r\n                } @else {\r\n                  <li nz-menu-item nzMatchRouter>\r\n                    <nz-icon *ngIf=\"menuLv3.Icon\" [nzType]=\"menuLv3.Icon\"></nz-icon><box [width]=\"2\"></box>\r\n                    <a [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv3.Url\">\r\n                      {{ menuLv3.Name }}\r\n                    </a>\r\n                  </li>\r\n                }\r\n              }\r\n            </ul>\r\n          } @else {\r\n            <li nz-menu-item nzMatchRouter>\r\n              <nz-icon *ngIf=\"menuLv2.Icon\" [nzType]=\"menuLv2.Icon\"></nz-icon><box [width]=\"2\"></box>\r\n              <a [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv2.Url\">\r\n                {{ menuLv2.Name }}\r\n              </a>\r\n            </li>\r\n          }\r\n        }\r\n      </ul>\r\n    } @else {\r\n      <li nz-menu-item nzMatchRouter>\r\n        <nz-icon *ngIf=\"menuLv1.Icon\" [nzType]=\"menuLv1.Icon\"></nz-icon><box [width]=\"2\"></box>\r\n        <a [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv1.Url\">\r\n          {{ menuLv1.Name }}\r\n        </a>\r\n      </li>\r\n    }\r\n  }\r\n</ul>\r\n" }]
+        }], propDecorators: { isCollapsed: [{
+                type: Input
+            }], filteredLstMenu: [{
+                type: Input
+            }], currentHeaderId: [{
+                type: Input
+            }] } });
+
 class App_Menu {
     // #region properties
     App_Menu_Id;
@@ -13414,9 +13903,14 @@ class LayoutComponent extends BaseComponent {
         SignalRService.initNoti();
         this.authService.getUserHeaderMenu().then((res) => {
             this.lstHeaderMenu = res.Data || [];
-            setTimeout(() => {
-                this.calculateMenuOverflow();
-            }, 0);
+            if (this.lstHeaderMenu.length == 0) {
+                this.getUserMenu();
+            }
+            else {
+                setTimeout(() => {
+                    this.calculateMenuOverflow();
+                }, 0);
+            }
         });
         await this.settingService.getByCodeAnonymous('MENU_TYPE').then((res) => {
             if (res?.Data) {
@@ -13472,20 +13966,20 @@ class LayoutComponent extends BaseComponent {
     handleHeaderMenu() {
         const headerId = this.route.snapshot.firstChild?.params['headerMenuId'];
         this._handleHeaderMenu(headerId);
-        this._router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => {
-            const updatedHeaderId = this.route.snapshot.firstChild?.params['headerMenuId'];
-            this._handleHeaderMenu(updatedHeaderId);
-        });
+        // this._router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => {
+        //   const updatedHeaderId = this.route.snapshot.firstChild?.params['headerMenuId'];
+        //   this._handleHeaderMenu(updatedHeaderId);
+        // });
     }
     _handleHeaderMenu(menuId) {
         this.getUserMenu(menuId);
     }
-    getUserMenu(headerMenuId = '') {
+    getUserMenu(headerMenuId) {
         if (headerMenuId === this.currentHeaderId) {
             return;
         }
-        this.currentHeaderId = headerMenuId;
-        this.authService.getUserMenu(headerMenuId).then((res) => {
+        this.currentHeaderId = headerMenuId || '';
+        this.authService.getUserMenu(this.currentHeaderId).then((res) => {
             this.lstMenu = res.Data || [];
             this.nodes = this.buildNzTreeFromSubMenu(this.lstMenu);
             this.updateOpenMenus();
@@ -13730,7 +14224,7 @@ class LayoutComponent extends BaseComponent {
         this.cdr.detectChanges();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LayoutComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: LayoutComponent, isStandalone: true, selector: "layout", viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<nz-layout class=\"app-layout\">\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\r\n        class=\"header-logo\"\r\n        [style.width]=\"!isCollapsed ? siderWidthStorage : 'auto'\"\r\n        [style.padding-right]=\"!isCollapsed ? '0' : '16px'\"\r\n      >\r\n        <div nz-flex nzJustify=\"center\" nzGap=\"small\" style=\"line-height: var(--app-header-height)\">\r\n          <img\r\n            *ngIf=\"logoUrl$ | async as url\"\r\n            [src]=\"url\"\r\n            style=\"padding: 4px; height: var(--app-header-height)\"\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\r\n      <!-- header menu -->\r\n      <div nz-col nzFlex=\"auto\" class=\"header-menu\" style=\"min-width: 0\" #menuContainer>\r\n        <ul\r\n          nz-menu\r\n          nzTheme=\"light\"\r\n          nzMode=\"horizontal\"\r\n          style=\"display: flex; flex-wrap: nowrap; border-bottom: none; line-height: var(--app-header-height)\"\r\n        >\r\n          @for (item of visibleMenus; track item) {\r\n            <li\r\n              nz-menu-item\r\n              [nzSelected]=\"this.currentHeaderId === item.App_Menu_Id\"\r\n              (click)=\"handleValueChangeHeaderMenu(item)\"\r\n            >\r\n              <nz-icon *ngIf=\"item.Icon\" [nzType]=\"item.Icon\"></nz-icon><box [width]=\"4\"></box>{{ item.Name }}\r\n            </li>\r\n          }\r\n\r\n          @if (hiddenMenus.length > 0) {\r\n            <li nz-submenu nzTitle=\". . .\" style=\"padding: 0 16px\">\r\n              <ul>\r\n                @for (item of hiddenMenus; track item) {\r\n                  <li\r\n                    nz-menu-item\r\n                    [nzSelected]=\"this.currentHeaderId === item.App_Menu_Id\"\r\n                    (click)=\"handleValueChangeHeaderMenu(item)\"\r\n                  >\r\n                    <nz-icon *ngIf=\"item.Icon\" [nzType]=\"item.Icon\"></nz-icon><box [width]=\"4\"></box>{{ item.Name }}\r\n                  </li>\r\n                }\r\n              </ul>\r\n            </li>\r\n          }\r\n        </ul>\r\n      </div>\r\n\r\n      <div style=\"display: flex; align-items: center; flex-shrink: 0; gap: 8px; padding-right: 16px\">\r\n        <header-search></header-search>\r\n        <app-notification-center></app-notification-center>\r\n        <header-user></header-user>\r\n      </div>\r\n    </div>\r\n  </nz-header>\r\n  <nz-layout class=\"body-layout\">\r\n    <nz-sider\r\n      *ngIf=\"!LayoutComponent.noShowSideMenu\"\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              [nzHideUnMatched]=\"true\"\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\" [nzInlineIndent]=\"12\" [nzInlineCollapsed]=\"isCollapsed\">\r\n              @for (menuLv1 of filteredLstMenu; track menuLv1.App_Menu_Id) {\r\n                @if (menuLv1.SubMenu?.length) {\r\n                  <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\r\n                    @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\r\n                      @if (menuLv2.SubMenu?.length) {\r\n                        <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\r\n                          @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\r\n                            @if (menuLv3.SubMenu?.length) {\r\n                              <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\r\n                                @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\r\n                                  @if (menuLv4.SubMenu?.length) {\r\n                                    <ul\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                                      <nz-icon *ngIf=\"menuLv4.Icon\" [nzType]=\"menuLv4.Icon\"></nz-icon\r\n                                      ><box [width]=\"2\"></box>\r\n                                      <a\r\n                                        [routerLink]=\"\r\n                                          (currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv4.Url\r\n                                        \"\r\n                                      >\r\n                                        {{ menuLv4.Name }}\r\n                                      </a>\r\n                                    </li>\r\n                                  }\r\n                                }\r\n                              </ul>\r\n                            } @else {\r\n                              <li nz-menu-item nzMatchRouter>\r\n                                <nz-icon *ngIf=\"menuLv3.Icon\" [nzType]=\"menuLv3.Icon\"></nz-icon><box [width]=\"2\"></box>\r\n                                <a\r\n                                  [routerLink]=\"\r\n                                    (currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv3.Url\r\n                                  \"\r\n                                >\r\n                                  {{ menuLv3.Name }}\r\n                                </a>\r\n                              </li>\r\n                            }\r\n                          }\r\n                        </ul>\r\n                      } @else {\r\n                        <li nz-menu-item nzMatchRouter>\r\n                          <nz-icon *ngIf=\"menuLv2.Icon\" [nzType]=\"menuLv2.Icon\"></nz-icon><box [width]=\"2\"></box>\r\n                          <a [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv2.Url\">\r\n                            {{ menuLv2.Name }}\r\n                          </a>\r\n                        </li>\r\n                      }\r\n                    }\r\n                  </ul>\r\n                } @else {\r\n                  <li nz-menu-item nzMatchRouter>\r\n                    <nz-icon *ngIf=\"menuLv1.Icon\" [nzType]=\"menuLv1.Icon\"></nz-icon><box [width]=\"2\"></box>\r\n                    <a [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv1.Url\">\r\n                      {{ menuLv1.Name }}\r\n                    </a>\r\n                  </li>\r\n                }\r\n              }\r\n            </ul>\r\n          </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: 10px; 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'\" nz-tooltip=\"\u1EA8n menu\" />\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 (!LayoutComponent.noShowBreadcrumb) {\r\n            <app-breadcrumb [@fadeInOut] nz-col nzFlex=\"auto\"></app-breadcrumb>\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: 10px; 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)=\"closeMenuDrawer()\"\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            [nzHideUnMatched]=\"true\"\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\" [nzInlineIndent]=\"12\">\r\n            @for (menuLv1 of filteredLstMenu; track menuLv1.App_Menu_Id) {\r\n              @if (menuLv1.SubMenu?.length) {\r\n                <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\r\n                  @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\r\n                    @if (menuLv2.SubMenu?.length) {\r\n                      <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\r\n                        @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\r\n                          @if (menuLv3.SubMenu?.length) {\r\n                            <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\r\n                              @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\r\n                                @if (menuLv4.SubMenu?.length) {\r\n                                  <ul\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                                    <nz-icon *ngIf=\"menuLv4.Icon\" [nzType]=\"menuLv4.Icon\"></nz-icon\r\n                                    ><box [width]=\"2\"></box>\r\n                                    <a\r\n                                      [routerLink]=\"\r\n                                        (currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv4.Url\r\n                                      \"\r\n                                    >\r\n                                      {{ menuLv4.Name }}\r\n                                    </a>\r\n                                  </li>\r\n                                }\r\n                              }\r\n                            </ul>\r\n                          } @else {\r\n                            <li nz-menu-item nzMatchRouter>\r\n                              <nz-icon *ngIf=\"menuLv3.Icon\" [nzType]=\"menuLv3.Icon\"></nz-icon><box [width]=\"2\"></box>\r\n                              <a\r\n                                [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv3.Url\"\r\n                              >\r\n                                {{ menuLv3.Name }}\r\n                              </a>\r\n                            </li>\r\n                          }\r\n                        }\r\n                      </ul>\r\n                    } @else {\r\n                      <li nz-menu-item nzMatchRouter>\r\n                        <nz-icon *ngIf=\"menuLv2.Icon\" [nzType]=\"menuLv2.Icon\"></nz-icon><box [width]=\"2\"></box>\r\n                        <a [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv2.Url\">\r\n                          {{ menuLv2.Name }}\r\n                        </a>\r\n                      </li>\r\n                    }\r\n                  }\r\n                </ul>\r\n              } @else {\r\n                <li nz-menu-item nzMatchRouter>\r\n                  <nz-icon *ngIf=\"menuLv1.Icon\" [nzType]=\"menuLv1.Icon\"></nz-icon><box [width]=\"2\"></box>\r\n                  <a [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv1.Url\">\r\n                    {{ menuLv1.Name }}\r\n                  </a>\r\n                </li>\r\n              }\r\n            }\r\n          </ul>\r\n        </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%;flex-wrap:nowrap!important}.header-logo{height:var(--app-header-height);text-align:center;color:var(--theme-text-color);transition:width .3s;flex-shrink:0;overflow:hidden}.body-layout{display:flex;flex:1;margin-top:var(--app-header-height);height:calc(100vh - var(--app-header-height));overflow:hidden}.menu-sidebar{width:256px;background:#f0f2f5;overflow-y:auto;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:#fff;overflow-x:hidden;overflow-y:auto;height:100%}.inner-content{background:#fff;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 .ant-breadcrumb-link{cursor:pointer}::ng-deep .breadcrumb-header .ant-breadcrumb-link{color:var(--theme-text-color);cursor:pointer}::ng-deep .breadcrumb-header .ant-breadcrumb-separator{color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item:not(.ant-segmented-item-selected){color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item{border-left:1px solid}::ng-deep .header-menu .ant-segmented-item:last-child{border-right:1px solid}.suffix-wrap{position:relative;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}.suffix-icon{position:absolute;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .18s cubic-bezier(.4,0,.2,1);transform:scale(.6) translate(4px)}.suffix-icon.show{opacity:1;pointer-events:auto;transform:scale(1) translate(0)}.search{color:#00000073}.delete{color:#bfbfbf}.delete.show{animation:popIn .18s ease}::ng-deep .header-menu .ant-menu-horizontal{background-color:transparent!important;border-bottom:none!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu{color:var(--theme-text-color)!important;opacity:.85;font-weight:600}::ng-deep .header-menu .ant-menu-submenu-title .anticon{color:var(--theme-text-color)!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item:hover,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu:hover,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item-selected,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-open,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-selected{color:var(--theme-text-color)!important;opacity:1;background-color:#ffffff1a!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item:hover:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu:hover:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item-selected:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-open:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-selected:after{border-bottom-color:#40a9ff!important}@keyframes popIn{0%{transform:scale(.5)}70%{transform:scale(1.15)}to{transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "directive", type: 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$5.NzLayoutComponent, selector: "nz-layout", exportAs: ["nzLayout"] }, { kind: "component", type: i2$5.NzHeaderComponent, selector: "nz-header", exportAs: ["nzHeader"] }, { kind: "component", type: i2$5.NzContentComponent, selector: "nz-content", exportAs: ["nzContent"] }, { kind: "component", type: i2$5.NzSiderComponent, selector: "nz-sider", inputs: ["nzWidth", "nzTheme", "nzCollapsedWidth", "nzBreakpoint", "nzZeroTrigger", "nzTrigger", "nzReverseArrow", "nzCollapsible", "nzCollapsed"], outputs: ["nzCollapsedChange"], exportAs: ["nzSider"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "directive", type: i4$1.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$1.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "component", type: i4$1.NzSubMenuComponent, selector: "[nz-submenu]", inputs: ["nzMenuClassName", "nzPaddingLeft", "nzTitle", "nzIcon", "nzTriggerSubMenuAction", "nzOpen", "nzDisabled", "nzPlacement"], outputs: ["nzOpenChange"], exportAs: ["nzSubmenu"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$3.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i4.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "component", type: Breadcrumb, selector: "app-breadcrumb" }, { kind: "ngmodule", type: NzTreeModule }, { kind: "component", type: i6$3.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.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: i5$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i5$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i5$1.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "ngmodule", type: NzSegmentedModule }, { kind: "component", type: LayoutUser, selector: "header-user" }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconSearch, selector: "icon-search", inputs: ["size"], outputs: ["click"] }, { kind: "directive", type: HideIfErrorDirective, selector: "img[hideIfError]" }, { kind: "component", type: NotificationCenterComponent, selector: "app-notification-center" }, { kind: "component", type: HeaderSearchComponent, selector: "header-search", inputs: ["searchValue"], outputs: ["searchValueChange", "onSearch"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i8.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "ngmodule", type: NzMenuModule }], animations: [fadeInOut] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: LayoutComponent, isStandalone: true, selector: "layout", viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<nz-layout class=\"app-layout\">\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\r\n        class=\"header-logo\"\r\n        [style.width]=\"!isCollapsed ? siderWidthStorage : 'auto'\"\r\n        [style.padding-right]=\"!isCollapsed ? '0' : '16px'\"\r\n      >\r\n        <div nz-flex nzJustify=\"center\" nzGap=\"small\" style=\"line-height: var(--app-header-height)\">\r\n          <img\r\n            *ngIf=\"logoUrl$ | async as url\"\r\n            [src]=\"url\"\r\n            style=\"padding: 4px; height: var(--app-header-height)\"\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\r\n      <!-- header menu -->\r\n      <div nz-col nzFlex=\"auto\" class=\"header-menu\" style=\"min-width: 0\" #menuContainer>\r\n        <ul\r\n          nz-menu\r\n          nzTheme=\"light\"\r\n          nzMode=\"horizontal\"\r\n          style=\"display: flex; flex-wrap: nowrap; border-bottom: none; line-height: var(--app-header-height)\"\r\n        >\r\n          @for (item of visibleMenus; track item) {\r\n            <li\r\n              nz-menu-item\r\n              [nzSelected]=\"this.currentHeaderId === item.App_Menu_Id\"\r\n              (click)=\"handleValueChangeHeaderMenu(item)\"\r\n            >\r\n              <nz-icon *ngIf=\"item.Icon\" [nzType]=\"item.Icon\"></nz-icon><box [width]=\"4\"></box>{{ item.Name }}\r\n            </li>\r\n          }\r\n\r\n          @if (hiddenMenus.length > 0) {\r\n            <li nz-submenu nzTitle=\". . .\" style=\"padding: 0 16px\">\r\n              <ul>\r\n                @for (item of hiddenMenus; track item) {\r\n                  <li\r\n                    nz-menu-item\r\n                    [nzSelected]=\"this.currentHeaderId === item.App_Menu_Id\"\r\n                    (click)=\"handleValueChangeHeaderMenu(item)\"\r\n                  >\r\n                    <nz-icon *ngIf=\"item.Icon\" [nzType]=\"item.Icon\"></nz-icon><box [width]=\"4\"></box>{{ item.Name }}\r\n                  </li>\r\n                }\r\n              </ul>\r\n            </li>\r\n          }\r\n        </ul>\r\n      </div>\r\n\r\n      <div style=\"display: flex; align-items: center; flex-shrink: 0; gap: 8px; padding-right: 16px\">\r\n        <header-search></header-search>\r\n        <app-notification-center></app-notification-center>\r\n        <header-user></header-user>\r\n      </div>\r\n    </div>\r\n  </nz-header>\r\n  <nz-layout class=\"body-layout\">\r\n    <nz-sider\r\n      *ngIf=\"!LayoutComponent.noShowSideMenu\"\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              [nzHideUnMatched]=\"true\"\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            <side-menu\r\n              [isCollapsed]=\"isCollapsed\"\r\n              [filteredLstMenu]=\"filteredLstMenu\"\r\n              [currentHeaderId]=\"currentHeaderId\"\r\n            ></side-menu>\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: 10px; 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'\" nz-tooltip=\"\u1EA8n menu\" />\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 (!LayoutComponent.noShowBreadcrumb) {\r\n            <app-breadcrumb [@fadeInOut] nz-col nzFlex=\"auto\"></app-breadcrumb>\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: 10px; 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)=\"closeMenuDrawer()\"\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            [nzHideUnMatched]=\"true\"\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          <side-menu\r\n            [isCollapsed]=\"isCollapsed\"\r\n            [filteredLstMenu]=\"filteredLstMenu\"\r\n            [currentHeaderId]=\"currentHeaderId\"\r\n          ></side-menu>\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%;flex-wrap:nowrap!important}.header-logo{height:var(--app-header-height);text-align:center;color:var(--theme-text-color);transition:width .3s;flex-shrink:0;overflow:hidden}.body-layout{display:flex;flex:1;margin-top:var(--app-header-height);height:calc(100vh - var(--app-header-height));overflow:hidden}.menu-sidebar{width:256px;background:#f0f2f5;overflow-y:auto;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:#fff;overflow-x:hidden;overflow-y:auto;height:100%}.inner-content{background:#fff;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 .ant-breadcrumb-link{cursor:pointer}::ng-deep .breadcrumb-header .ant-breadcrumb-link{color:var(--theme-text-color);cursor:pointer}::ng-deep .breadcrumb-header .ant-breadcrumb-separator{color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item:not(.ant-segmented-item-selected){color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item{border-left:1px solid}::ng-deep .header-menu .ant-segmented-item:last-child{border-right:1px solid}.suffix-wrap{position:relative;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}.suffix-icon{position:absolute;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .18s cubic-bezier(.4,0,.2,1);transform:scale(.6) translate(4px)}.suffix-icon.show{opacity:1;pointer-events:auto;transform:scale(1) translate(0)}.search{color:#00000073}.delete{color:#bfbfbf}.delete.show{animation:popIn .18s ease}::ng-deep .header-menu .ant-menu-horizontal{background-color:transparent!important;border-bottom:none!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu{color:var(--theme-text-color)!important;opacity:.85;font-weight:600}::ng-deep .header-menu .ant-menu-submenu-title .anticon{color:var(--theme-text-color)!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item:hover,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu:hover,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item-selected,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-open,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-selected{color:var(--theme-text-color)!important;opacity:1;background-color:#ffffff1a!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item:hover:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu:hover:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item-selected:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-open:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-selected:after{border-bottom-color:#40a9ff!important}@keyframes popIn{0%{transform:scale(.5)}70%{transform:scale(1.15)}to{transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: NzLayoutModule }, { kind: "component", type: i2$5.NzLayoutComponent, selector: "nz-layout", exportAs: ["nzLayout"] }, { kind: "component", type: i2$5.NzHeaderComponent, selector: "nz-header", exportAs: ["nzHeader"] }, { kind: "component", type: i2$5.NzContentComponent, selector: "nz-content", exportAs: ["nzContent"] }, { kind: "component", type: i2$5.NzSiderComponent, selector: "nz-sider", inputs: ["nzWidth", "nzTheme", "nzCollapsedWidth", "nzBreakpoint", "nzZeroTrigger", "nzTrigger", "nzReverseArrow", "nzCollapsible", "nzCollapsed"], outputs: ["nzCollapsedChange"], exportAs: ["nzSider"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "directive", type: i4$1.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$1.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "component", type: i4$1.NzSubMenuComponent, selector: "[nz-submenu]", inputs: ["nzMenuClassName", "nzPaddingLeft", "nzTitle", "nzIcon", "nzTriggerSubMenuAction", "nzOpen", "nzDisabled", "nzPlacement"], outputs: ["nzOpenChange"], exportAs: ["nzSubmenu"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i2$1.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$3.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i4.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "component", type: Breadcrumb, selector: "app-breadcrumb" }, { kind: "ngmodule", type: NzTreeModule }, { kind: "component", type: i6$3.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.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: i5$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i5$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i5$1.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "ngmodule", type: NzSegmentedModule }, { kind: "component", type: LayoutUser, selector: "header-user" }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconSearch, selector: "icon-search", inputs: ["size"], outputs: ["click"] }, { kind: "directive", type: HideIfErrorDirective, selector: "img[hideIfError]" }, { kind: "component", type: NotificationCenterComponent, selector: "app-notification-center" }, { kind: "component", type: HeaderSearchComponent, selector: "header-search", inputs: ["searchValue"], outputs: ["searchValueChange", "onSearch"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i8.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "ngmodule", type: NzMenuModule }, { kind: "component", type: SideMenuComponent, selector: "side-menu", inputs: ["isCollapsed", "filteredLstMenu", "currentHeaderId"] }], animations: [fadeInOut] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
@@ -13762,7 +14256,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         HeaderSearchComponent,
                         NzToolTipModule,
                         NzMenuModule,
-                    ], animations: [fadeInOut], template: "<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\r\n        class=\"header-logo\"\r\n        [style.width]=\"!isCollapsed ? siderWidthStorage : 'auto'\"\r\n        [style.padding-right]=\"!isCollapsed ? '0' : '16px'\"\r\n      >\r\n        <div nz-flex nzJustify=\"center\" nzGap=\"small\" style=\"line-height: var(--app-header-height)\">\r\n          <img\r\n            *ngIf=\"logoUrl$ | async as url\"\r\n            [src]=\"url\"\r\n            style=\"padding: 4px; height: var(--app-header-height)\"\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\r\n      <!-- header menu -->\r\n      <div nz-col nzFlex=\"auto\" class=\"header-menu\" style=\"min-width: 0\" #menuContainer>\r\n        <ul\r\n          nz-menu\r\n          nzTheme=\"light\"\r\n          nzMode=\"horizontal\"\r\n          style=\"display: flex; flex-wrap: nowrap; border-bottom: none; line-height: var(--app-header-height)\"\r\n        >\r\n          @for (item of visibleMenus; track item) {\r\n            <li\r\n              nz-menu-item\r\n              [nzSelected]=\"this.currentHeaderId === item.App_Menu_Id\"\r\n              (click)=\"handleValueChangeHeaderMenu(item)\"\r\n            >\r\n              <nz-icon *ngIf=\"item.Icon\" [nzType]=\"item.Icon\"></nz-icon><box [width]=\"4\"></box>{{ item.Name }}\r\n            </li>\r\n          }\r\n\r\n          @if (hiddenMenus.length > 0) {\r\n            <li nz-submenu nzTitle=\". . .\" style=\"padding: 0 16px\">\r\n              <ul>\r\n                @for (item of hiddenMenus; track item) {\r\n                  <li\r\n                    nz-menu-item\r\n                    [nzSelected]=\"this.currentHeaderId === item.App_Menu_Id\"\r\n                    (click)=\"handleValueChangeHeaderMenu(item)\"\r\n                  >\r\n                    <nz-icon *ngIf=\"item.Icon\" [nzType]=\"item.Icon\"></nz-icon><box [width]=\"4\"></box>{{ item.Name }}\r\n                  </li>\r\n                }\r\n              </ul>\r\n            </li>\r\n          }\r\n        </ul>\r\n      </div>\r\n\r\n      <div style=\"display: flex; align-items: center; flex-shrink: 0; gap: 8px; padding-right: 16px\">\r\n        <header-search></header-search>\r\n        <app-notification-center></app-notification-center>\r\n        <header-user></header-user>\r\n      </div>\r\n    </div>\r\n  </nz-header>\r\n  <nz-layout class=\"body-layout\">\r\n    <nz-sider\r\n      *ngIf=\"!LayoutComponent.noShowSideMenu\"\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              [nzHideUnMatched]=\"true\"\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\" [nzInlineIndent]=\"12\" [nzInlineCollapsed]=\"isCollapsed\">\r\n              @for (menuLv1 of filteredLstMenu; track menuLv1.App_Menu_Id) {\r\n                @if (menuLv1.SubMenu?.length) {\r\n                  <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\r\n                    @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\r\n                      @if (menuLv2.SubMenu?.length) {\r\n                        <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\r\n                          @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\r\n                            @if (menuLv3.SubMenu?.length) {\r\n                              <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\r\n                                @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\r\n                                  @if (menuLv4.SubMenu?.length) {\r\n                                    <ul\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                                      <nz-icon *ngIf=\"menuLv4.Icon\" [nzType]=\"menuLv4.Icon\"></nz-icon\r\n                                      ><box [width]=\"2\"></box>\r\n                                      <a\r\n                                        [routerLink]=\"\r\n                                          (currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv4.Url\r\n                                        \"\r\n                                      >\r\n                                        {{ menuLv4.Name }}\r\n                                      </a>\r\n                                    </li>\r\n                                  }\r\n                                }\r\n                              </ul>\r\n                            } @else {\r\n                              <li nz-menu-item nzMatchRouter>\r\n                                <nz-icon *ngIf=\"menuLv3.Icon\" [nzType]=\"menuLv3.Icon\"></nz-icon><box [width]=\"2\"></box>\r\n                                <a\r\n                                  [routerLink]=\"\r\n                                    (currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv3.Url\r\n                                  \"\r\n                                >\r\n                                  {{ menuLv3.Name }}\r\n                                </a>\r\n                              </li>\r\n                            }\r\n                          }\r\n                        </ul>\r\n                      } @else {\r\n                        <li nz-menu-item nzMatchRouter>\r\n                          <nz-icon *ngIf=\"menuLv2.Icon\" [nzType]=\"menuLv2.Icon\"></nz-icon><box [width]=\"2\"></box>\r\n                          <a [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv2.Url\">\r\n                            {{ menuLv2.Name }}\r\n                          </a>\r\n                        </li>\r\n                      }\r\n                    }\r\n                  </ul>\r\n                } @else {\r\n                  <li nz-menu-item nzMatchRouter>\r\n                    <nz-icon *ngIf=\"menuLv1.Icon\" [nzType]=\"menuLv1.Icon\"></nz-icon><box [width]=\"2\"></box>\r\n                    <a [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv1.Url\">\r\n                      {{ menuLv1.Name }}\r\n                    </a>\r\n                  </li>\r\n                }\r\n              }\r\n            </ul>\r\n          </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: 10px; 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'\" nz-tooltip=\"\u1EA8n menu\" />\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 (!LayoutComponent.noShowBreadcrumb) {\r\n            <app-breadcrumb [@fadeInOut] nz-col nzFlex=\"auto\"></app-breadcrumb>\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: 10px; 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)=\"closeMenuDrawer()\"\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            [nzHideUnMatched]=\"true\"\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\" [nzInlineIndent]=\"12\">\r\n            @for (menuLv1 of filteredLstMenu; track menuLv1.App_Menu_Id) {\r\n              @if (menuLv1.SubMenu?.length) {\r\n                <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\r\n                  @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\r\n                    @if (menuLv2.SubMenu?.length) {\r\n                      <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\r\n                        @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\r\n                          @if (menuLv3.SubMenu?.length) {\r\n                            <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\r\n                              @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\r\n                                @if (menuLv4.SubMenu?.length) {\r\n                                  <ul\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                                    <nz-icon *ngIf=\"menuLv4.Icon\" [nzType]=\"menuLv4.Icon\"></nz-icon\r\n                                    ><box [width]=\"2\"></box>\r\n                                    <a\r\n                                      [routerLink]=\"\r\n                                        (currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv4.Url\r\n                                      \"\r\n                                    >\r\n                                      {{ menuLv4.Name }}\r\n                                    </a>\r\n                                  </li>\r\n                                }\r\n                              }\r\n                            </ul>\r\n                          } @else {\r\n                            <li nz-menu-item nzMatchRouter>\r\n                              <nz-icon *ngIf=\"menuLv3.Icon\" [nzType]=\"menuLv3.Icon\"></nz-icon><box [width]=\"2\"></box>\r\n                              <a\r\n                                [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv3.Url\"\r\n                              >\r\n                                {{ menuLv3.Name }}\r\n                              </a>\r\n                            </li>\r\n                          }\r\n                        }\r\n                      </ul>\r\n                    } @else {\r\n                      <li nz-menu-item nzMatchRouter>\r\n                        <nz-icon *ngIf=\"menuLv2.Icon\" [nzType]=\"menuLv2.Icon\"></nz-icon><box [width]=\"2\"></box>\r\n                        <a [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv2.Url\">\r\n                          {{ menuLv2.Name }}\r\n                        </a>\r\n                      </li>\r\n                    }\r\n                  }\r\n                </ul>\r\n              } @else {\r\n                <li nz-menu-item nzMatchRouter>\r\n                  <nz-icon *ngIf=\"menuLv1.Icon\" [nzType]=\"menuLv1.Icon\"></nz-icon><box [width]=\"2\"></box>\r\n                  <a [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv1.Url\">\r\n                    {{ menuLv1.Name }}\r\n                  </a>\r\n                </li>\r\n              }\r\n            }\r\n          </ul>\r\n        </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%;flex-wrap:nowrap!important}.header-logo{height:var(--app-header-height);text-align:center;color:var(--theme-text-color);transition:width .3s;flex-shrink:0;overflow:hidden}.body-layout{display:flex;flex:1;margin-top:var(--app-header-height);height:calc(100vh - var(--app-header-height));overflow:hidden}.menu-sidebar{width:256px;background:#f0f2f5;overflow-y:auto;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:#fff;overflow-x:hidden;overflow-y:auto;height:100%}.inner-content{background:#fff;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 .ant-breadcrumb-link{cursor:pointer}::ng-deep .breadcrumb-header .ant-breadcrumb-link{color:var(--theme-text-color);cursor:pointer}::ng-deep .breadcrumb-header .ant-breadcrumb-separator{color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item:not(.ant-segmented-item-selected){color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item{border-left:1px solid}::ng-deep .header-menu .ant-segmented-item:last-child{border-right:1px solid}.suffix-wrap{position:relative;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}.suffix-icon{position:absolute;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .18s cubic-bezier(.4,0,.2,1);transform:scale(.6) translate(4px)}.suffix-icon.show{opacity:1;pointer-events:auto;transform:scale(1) translate(0)}.search{color:#00000073}.delete{color:#bfbfbf}.delete.show{animation:popIn .18s ease}::ng-deep .header-menu .ant-menu-horizontal{background-color:transparent!important;border-bottom:none!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu{color:var(--theme-text-color)!important;opacity:.85;font-weight:600}::ng-deep .header-menu .ant-menu-submenu-title .anticon{color:var(--theme-text-color)!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item:hover,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu:hover,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item-selected,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-open,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-selected{color:var(--theme-text-color)!important;opacity:1;background-color:#ffffff1a!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item:hover:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu:hover:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item-selected:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-open:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-selected:after{border-bottom-color:#40a9ff!important}@keyframes popIn{0%{transform:scale(.5)}70%{transform:scale(1.15)}to{transform:scale(1)}}\n"] }]
+                        SideMenuComponent,
+                    ], animations: [fadeInOut], template: "<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\r\n        class=\"header-logo\"\r\n        [style.width]=\"!isCollapsed ? siderWidthStorage : 'auto'\"\r\n        [style.padding-right]=\"!isCollapsed ? '0' : '16px'\"\r\n      >\r\n        <div nz-flex nzJustify=\"center\" nzGap=\"small\" style=\"line-height: var(--app-header-height)\">\r\n          <img\r\n            *ngIf=\"logoUrl$ | async as url\"\r\n            [src]=\"url\"\r\n            style=\"padding: 4px; height: var(--app-header-height)\"\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\r\n      <!-- header menu -->\r\n      <div nz-col nzFlex=\"auto\" class=\"header-menu\" style=\"min-width: 0\" #menuContainer>\r\n        <ul\r\n          nz-menu\r\n          nzTheme=\"light\"\r\n          nzMode=\"horizontal\"\r\n          style=\"display: flex; flex-wrap: nowrap; border-bottom: none; line-height: var(--app-header-height)\"\r\n        >\r\n          @for (item of visibleMenus; track item) {\r\n            <li\r\n              nz-menu-item\r\n              [nzSelected]=\"this.currentHeaderId === item.App_Menu_Id\"\r\n              (click)=\"handleValueChangeHeaderMenu(item)\"\r\n            >\r\n              <nz-icon *ngIf=\"item.Icon\" [nzType]=\"item.Icon\"></nz-icon><box [width]=\"4\"></box>{{ item.Name }}\r\n            </li>\r\n          }\r\n\r\n          @if (hiddenMenus.length > 0) {\r\n            <li nz-submenu nzTitle=\". . .\" style=\"padding: 0 16px\">\r\n              <ul>\r\n                @for (item of hiddenMenus; track item) {\r\n                  <li\r\n                    nz-menu-item\r\n                    [nzSelected]=\"this.currentHeaderId === item.App_Menu_Id\"\r\n                    (click)=\"handleValueChangeHeaderMenu(item)\"\r\n                  >\r\n                    <nz-icon *ngIf=\"item.Icon\" [nzType]=\"item.Icon\"></nz-icon><box [width]=\"4\"></box>{{ item.Name }}\r\n                  </li>\r\n                }\r\n              </ul>\r\n            </li>\r\n          }\r\n        </ul>\r\n      </div>\r\n\r\n      <div style=\"display: flex; align-items: center; flex-shrink: 0; gap: 8px; padding-right: 16px\">\r\n        <header-search></header-search>\r\n        <app-notification-center></app-notification-center>\r\n        <header-user></header-user>\r\n      </div>\r\n    </div>\r\n  </nz-header>\r\n  <nz-layout class=\"body-layout\">\r\n    <nz-sider\r\n      *ngIf=\"!LayoutComponent.noShowSideMenu\"\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              [nzHideUnMatched]=\"true\"\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            <side-menu\r\n              [isCollapsed]=\"isCollapsed\"\r\n              [filteredLstMenu]=\"filteredLstMenu\"\r\n              [currentHeaderId]=\"currentHeaderId\"\r\n            ></side-menu>\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: 10px; 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'\" nz-tooltip=\"\u1EA8n menu\" />\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 (!LayoutComponent.noShowBreadcrumb) {\r\n            <app-breadcrumb [@fadeInOut] nz-col nzFlex=\"auto\"></app-breadcrumb>\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: 10px; 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)=\"closeMenuDrawer()\"\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            [nzHideUnMatched]=\"true\"\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          <side-menu\r\n            [isCollapsed]=\"isCollapsed\"\r\n            [filteredLstMenu]=\"filteredLstMenu\"\r\n            [currentHeaderId]=\"currentHeaderId\"\r\n          ></side-menu>\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%;flex-wrap:nowrap!important}.header-logo{height:var(--app-header-height);text-align:center;color:var(--theme-text-color);transition:width .3s;flex-shrink:0;overflow:hidden}.body-layout{display:flex;flex:1;margin-top:var(--app-header-height);height:calc(100vh - var(--app-header-height));overflow:hidden}.menu-sidebar{width:256px;background:#f0f2f5;overflow-y:auto;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:#fff;overflow-x:hidden;overflow-y:auto;height:100%}.inner-content{background:#fff;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 .ant-breadcrumb-link{cursor:pointer}::ng-deep .breadcrumb-header .ant-breadcrumb-link{color:var(--theme-text-color);cursor:pointer}::ng-deep .breadcrumb-header .ant-breadcrumb-separator{color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item:not(.ant-segmented-item-selected){color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item{border-left:1px solid}::ng-deep .header-menu .ant-segmented-item:last-child{border-right:1px solid}.suffix-wrap{position:relative;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}.suffix-icon{position:absolute;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .18s cubic-bezier(.4,0,.2,1);transform:scale(.6) translate(4px)}.suffix-icon.show{opacity:1;pointer-events:auto;transform:scale(1) translate(0)}.search{color:#00000073}.delete{color:#bfbfbf}.delete.show{animation:popIn .18s ease}::ng-deep .header-menu .ant-menu-horizontal{background-color:transparent!important;border-bottom:none!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu{color:var(--theme-text-color)!important;opacity:.85;font-weight:600}::ng-deep .header-menu .ant-menu-submenu-title .anticon{color:var(--theme-text-color)!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item:hover,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu:hover,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item-selected,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-open,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-selected{color:var(--theme-text-color)!important;opacity:1;background-color:#ffffff1a!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item:hover:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu:hover:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item-selected:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-open:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-selected:after{border-bottom-color:#40a9ff!important}@keyframes popIn{0%{transform:scale(.5)}70%{transform:scale(1.15)}to{transform:scale(1)}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { menuContainer: [{
                 type: ViewChild,
                 args: ['menuContainer']
@@ -13890,5 +14385,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ABAC_RULES_TOKEN, ActionRule, ActionRuleLine, AnimatedDigitComponent, AppGlobals, AppStorage, App_Dic_Domain, App_Dic_DomainFilter, App_File, App_Menu$1 as App_Menu, App_Org, App_Role, App_Role_Menu_Ref, App_Setting, App_SettingFilter, App_User, AuthGuard, AuthService, AutoFocusDirective, BarGraphComponent, BaseComponent, BaseGuardChangeComponent, BaseOverlayComponent, Box, Breadcrumb, CacheListComponent, CheckModel, CommonService, ConfigComponent, CustomNotiComponent, CustomNotiService, DashcardComponent, DateInputParserDirective, DateTimeHelper, DicDomainListComponent, DicDomainPipe, DicDomainSelectComponent$1 as DicDomainSelectComponent, DicDomainService, DocTemplate, DoughnutGraphComponent, DownloadHelper, DurationFormatPipe, DynamicBuildFormComponent, ENUM_ResponseType, ExpandableSearchComponent, ExtendCheckbox, ExtendDatePicker, ExtendDateRangePicker, ExtendInput, ExtendInputNumber, ExtendPaginationComponent, ExtendSelectComponent, ExtendTableComponent, ExtendTextArea, FileFilter, FileListComponent, FileService, GlobalSpinnerComponent, GridFilter, H3Icon, HTTPService, HasPermissionDirective, HasPermissionPipe, HideIfErrorDirective, HighlightPipe, IconAdd, IconCheck, IconClose, IconDelete, IconEdit, IconSave, IconSearch, IconView, LayoutComponent, LimitLettersPipe, LimitWordsPipe, LineGraphComponent, LoadingService, LogAppComponent, LogServerComponent, LogServerDetailComponent, LoginComponent, MenuDetailComponent, MenuFilter, MenuListComponent, MenuService, MonitorComponent, NoPermission, Nodata, NotiService, NullIfEmptyDirective, NumberOnlyDirective, OrderOption, OrgDetailComponent, OrgFilter, OrgListComponent, OrgService, PagingData, PagingModel, PdfViewerComponent, PermissionComponent, PermissionService$1 as PermissionService, ReadMoreProComponent, RoleDetailComponent, RoleFilter, RoleListComponent, RoleService, RouteMonitorService, SequenceDetailComponent, SequenceListComponent, SessionManagerService, SettingListComponent, SettingService$1 as SettingService, TableHeader, ThemeService, TokenStorage, TranslateKey, URLs$d as URLs, UnsavedChangesGuard, UpperCaseFirsLetterEachWordDirective, UppercaseDirective, UppercaseFirstLetterDirective, UserDetailComponent, UserFilter, UserListComponent, UserProfileComponent, UserProfileService, UserService, VersionComponent, VscService, WF_TemplateActionRef, WF_TransitionRule, WF_TransitionRuleLine, Workflow, WorkflowAction, WorkflowActionEditorOption, WorkflowActionRef, WorkflowEditorComponent, WorkflowEditorOption, WorkflowStage, WorkflowStageEditorOption, XLSXHelper, authInterceptor };
+export { ABAC_RULES_TOKEN, ActionRule, ActionRuleLine, AnimatedDigitComponent, AppGlobals, AppStorage, App_Dic_Domain, App_Dic_DomainFilter, App_File, App_Menu$1 as App_Menu, App_Org, App_Role, App_Role_Menu_Ref, App_Setting, App_SettingFilter, App_User, AuthGuard, AuthService, AutoFocusDirective, BarGraphComponent, BaseComponent, BaseGuardChangeComponent, BaseOverlayComponent, Box, Breadcrumb, CacheListComponent, CheckModel, CommonService, ConfigComponent, CustomNotiComponent, CustomNotiService, DashcardComponent, DateInputParserDirective, DateTimeHelper, DicDomainListComponent, DicDomainPipe, DicDomainSelectComponent$1 as DicDomainSelectComponent, DicDomainService, DocTemplate, DoughnutGraphComponent, DownloadHelper, DurationFormatPipe, DynamicBuildFormComponent, ENUM_ResponseType, ExpandableSearchComponent, ExtendCheckbox, ExtendCheckbox3Value, ExtendDatePicker, ExtendDateRangePicker, ExtendInput, ExtendInputNumber, ExtendPaginationComponent, ExtendSelectComponent, ExtendTableComponent, ExtendTextArea, FileFilter, FileListComponent, FileService, FormatBytesPipe, GlobalSpinnerComponent, GridFilter, H3Icon, HTTPService, HasPermissionDirective, HasPermissionPipe, HideIfErrorDirective, HighlightPipe, IconAdd, IconCheck, IconClose, IconDelete, IconEdit, IconSave, IconSearch, IconView, LayoutComponent, LimitLettersPipe, LimitWordsPipe, LineGraphComponent, LoadingService, LogAppComponent, LogServerComponent, LogServerDetailComponent, LoginComponent, MailTemplateService, MenuDetailComponent, MenuFilter, MenuListComponent, MenuService, MonitorComponent, NoPermission, Nodata, NotiService, NullIfEmptyDirective, NumberOnlyDirective, OrderOption, OrgDetailComponent, OrgFilter, OrgListComponent, OrgService, PagingData, PagingModel, PdfViewerComponent, PermissionComponent, PermissionService$1 as PermissionService, ReadMoreProComponent, RoleDetailComponent, RoleFilter, RoleListComponent, RoleService, RouteMonitorService, SequenceDetailComponent, SequenceListComponent, SessionManagerService, SettingListComponent, SettingService$1 as SettingService, SynologyComponent, TableHeader, ThemeService, TokenStorage, TranslateKey, URLs$e as URLs, UnsavedChangesGuard, UpperCaseFirsLetterEachWordDirective, UppercaseDirective, UppercaseFirstLetterDirective, UserDetailComponent, UserFilter, UserListComponent, UserProfileComponent, UserProfileService, UserService, VersionComponent, VscService, WF_TemplateActionRef, WF_TransitionRule, WF_TransitionRuleLine, Workflow, WorkflowAction, WorkflowActionEditorOption, WorkflowActionRef, WorkflowEditorComponent, WorkflowEditorOption, WorkflowStage, WorkflowStageEditorOption, XLSXHelper, authInterceptor };
 //# sourceMappingURL=brggroup-share-lib.mjs.map