@brggroup/share-lib 0.1.79 → 0.1.80

package/fesm2022/brggroup-share-lib.mjs

@@ -94,6 +94,7 @@ import * as i4$3 from 'ng-zorro-antd/menu';
 import { NzMenuModule } from 'ng-zorro-antd/menu';
 import * as i11 from 'ng-zorro-antd/switch';
 import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { NzTypographyModule } from 'ng-zorro-antd/typography';
 import * as i7$1 from 'ng-zorro-antd/tag';
 import { NzTagModule } from 'ng-zorro-antd/tag';
 import * as i1$6 from 'ng-zorro-antd/upload';
@@ -705,7 +706,7 @@ class TokenStorage {
     }
 }
 
-const URLs$j = {
+const URLs$k = {
     login: '/api/Auth/Login',
     register: '/api/Auth/Register',
     pingAuth: '/api/Auth/PingAuth',
@@ -750,7 +751,7 @@ class AuthService extends HTTPService {
     /* ----------------------------------------
         LOGIN
     ---------------------------------------- */
-    async _signIn(username, password, orgid, returnUrl) {
+    async _signIn(username, password, orgid, returnUrl, MODULE_IN_USE) {
         try {
             const body = {
                 UserName: username,
@@ -764,9 +765,15 @@ class AuthService extends HTTPService {
             }
             this.notiService.success('Đăng nhập thành công');
             TokenStorage.saveToken(res);
-            if (returnUrl) {
+            console.log('go to module select: ', MODULE_IN_USE);
+            if (returnUrl && returnUrl != '/') {
+                console.log('go to returnUrl: ', returnUrl);
                 this.router.navigateByUrl(returnUrl);
             }
+            else if (MODULE_IN_USE) {
+                console.log('go to module select');
+                this.router.navigateByUrl('/module');
+            }
             return true;
         }
         catch (err) {
@@ -775,7 +782,7 @@ class AuthService extends HTTPService {
         }
     }
     async sendSignIn(body) {
-        return firstValueFrom(this.http.post(AppGlobals.apiEndpoint + URLs$j.login, body, {
+        return firstValueFrom(this.http.post(AppGlobals.apiEndpoint + URLs$k.login, body, {
             headers: new HttpHeaders().set('Content-Type', 'application/json').set('No-Loading-Mark', '1'),
         }));
     }
@@ -798,7 +805,7 @@ class AuthService extends HTTPService {
     ---------------------------------------- */
     async pingAuth() {
         try {
-            const res = await this.get(AppGlobals.apiEndpoint + URLs$j.pingAuth, true);
+            const res = await this.get(AppGlobals.apiEndpoint + URLs$k.pingAuth, true);
             return res?.IsSuccess;
         }
         catch {
@@ -807,7 +814,7 @@ class AuthService extends HTTPService {
     }
     async getUserPermission() {
         try {
-            const res = await this.get(AppGlobals.apiEndpoint + URLs$j.getUserPermission, true);
+            const res = await this.get(AppGlobals.apiEndpoint + URLs$k.getUserPermission, true);
             return res.Data;
         }
         catch {
@@ -817,12 +824,13 @@ class AuthService extends HTTPService {
     /* ----------------------------------------
         MENU
     ---------------------------------------- */
-    getUserMenu(headerMenuId) {
-        let pr = new HttpParams().append('headerMenuId', headerMenuId);
+    getUserMenu(moduleId, headerMenuId) {
+        let pr = new HttpParams().append('moduleId', moduleId || '').append('headerMenuId', headerMenuId || '');
         return this.postParams(AppGlobals.apiEndpoint + '/api/Auth/getUserMenu', pr);
     }
-    getUserHeaderMenu() {
-        return this.post(AppGlobals.apiEndpoint + '/api/Auth/getUserHeaderMenu');
+    getUserHeaderMenu(moduleId) {
+        let pr = new HttpParams().append('moduleId', moduleId || '');
+        return this.getParams(AppGlobals.apiEndpoint + '/api/Auth/getUserHeaderMenu', pr);
     }
     async checkUserMenu(url) {
         try {
@@ -839,10 +847,10 @@ class AuthService extends HTTPService {
         PASSWORD
     ---------------------------------------- */
     changePassword(data) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$j.changePassword, data);
+        return this.postData(AppGlobals.apiEndpoint + URLs$k.changePassword, data);
     }
     setPass(data) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$j.setPass, data);
+        return this.postData(AppGlobals.apiEndpoint + URLs$k.setPass, data);
     }
     /* ----------------------------------------
         REGISTER
@@ -863,7 +871,7 @@ class AuthService extends HTTPService {
         }
     }
     async sendSignUp(d) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$j.register, d);
+        return this.postData(AppGlobals.apiEndpoint + URLs$k.register, d);
     }
     /* ----------------------------------------
         CHANGE ORG
@@ -885,7 +893,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$j.changeOrgLogin, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$k.changeOrgLogin, params);
     }
     static pingInterVal;
     startPingAuth(intervalTime) {
@@ -1242,8 +1250,8 @@ class SessionManagerService {
     //   clearTimeout(this.refreshTimer);
     //   clearInterval(this.heartbeatTimer);
     // }
-    async login(username, password, orgid, returnUrl) {
-        var ret = await this.authService._signIn(username, password, orgid, returnUrl);
+    async login(username, password, orgid, returnUrl, MODULE_IN_USE) {
+        var ret = await this.authService._signIn(username, password, orgid, returnUrl, MODULE_IN_USE);
         if (ret) {
             console.log('SessionManagerService > broadcast LOGIN');
             this.broadcast(this.LOGIN_EVENT);
@@ -1587,6 +1595,7 @@ class BaseComponent {
             let currentRoute = this.router.routerState.root.snapshot;
             let currentProjectId = null;
             let currentHeaderMenuId = null;
+            let currentModuleId = null;
             // 1. Lấy ID từ URL hiện tại đang đứng (State hiện tại)
             while (currentRoute) {
                 if (currentRoute.params) {
@@ -1596,6 +1605,9 @@ class BaseComponent {
                     if (currentRoute.params['headerMenuId'] && !currentHeaderMenuId) {
                         currentHeaderMenuId = currentRoute.params['headerMenuId'];
                     }
+                    if (currentRoute.params['moduleId'] && !currentModuleId) {
+                        currentModuleId = currentRoute.params['moduleId'];
+                    }
                 }
                 currentRoute = currentRoute.firstChild;
             }
@@ -1603,15 +1615,24 @@ class BaseComponent {
                 currentProjectId = this.getUrlParam('projectId');
             if (!currentHeaderMenuId)
                 currentHeaderMenuId = this.getUrlParam('headerMenuId');
+            if (!currentModuleId)
+                currentModuleId = this.getUrlParam('moduleId');
             // 2. Ưu tiên ID từ URL truyền vào (nếu người dùng click menu khác)
+            let targetModuleId = currentModuleId;
             let targetHeaderMenuId = currentHeaderMenuId;
             let targetProjectId = currentProjectId;
             // Regex bóc tách ID, dừng lại trước dấu "/" hoặc "?" (query param)
-            const headerMenuRegex = /\/headermenuid\/([^\/\?]+)/i;
+            const headerModuleRegex = /\/module\/([^\/\?]+)/i;
+            const headerModuleMatch = url.match(headerModuleRegex);
+            if (headerModuleMatch) {
+                targetHeaderMenuId = headerModuleMatch[1]; // Ghi đè bằng ID của menu mới click
+                url = url.replace(headerModuleMatch[0], ''); // Xóa phần /headermenu/... ra khỏi url
+            }
+            const headerMenuRegex = /\/headermenu\/([^\/\?]+)/i;
             const headerMatch = url.match(headerMenuRegex);
             if (headerMatch) {
                 targetHeaderMenuId = headerMatch[1]; // Ghi đè bằng ID của menu mới click
-                url = url.replace(headerMatch[0], ''); // Xóa phần /headermenuid/... ra khỏi url
+                url = url.replace(headerMatch[0], ''); // Xóa phần /headermenu/... ra khỏi url
             }
             const projectRegex = /\/projectid\/([^\/\?]+)/i;
             const projectMatch = url.match(projectRegex);
@@ -1627,7 +1648,10 @@ class BaseComponent {
                 url = `/projectid/${targetProjectId}${url}`;
             }
             if (targetHeaderMenuId) {
-                url = `/headermenuid/${targetHeaderMenuId}${url}`;
+                url = `/headermenu/${targetHeaderMenuId}${url}`;
+            }
+            if (targetModuleId) {
+                url = `/module/${targetModuleId}${url}`;
             }
             if (url === '')
                 url = '/';
@@ -3502,7 +3526,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 }]
         }] });
 
-const URLs$i = {
+const URLs$j = {
     getById: '/api/App_Dic_Domain/GetById',
     getAll: '/api/App_Dic_Domain/GetAll',
     getList: '/api/App_Dic_Domain/GetList',
@@ -3514,21 +3538,21 @@ const URLs$i = {
 class DicDomainService extends HTTPService {
     getById(id) {
         let pr = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$i.getById, pr);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$j.getById, pr);
     }
     getPaging(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$i.getPaging, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$j.getPaging, filter);
     }
     addOrEdit(obj) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$i.addOrEdit, obj);
+        return this.postData(AppGlobals.apiEndpoint + URLs$j.addOrEdit, obj);
     }
     delete(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$i.delete, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$j.delete, params);
     }
     async getByDomain(DomainCode) {
         var pr = new HttpParams().append('DomainCode', DomainCode);
-        const ret = await this.postParams(AppGlobals.apiEndpoint + URLs$i.getByDomain, pr);
+        const ret = await this.postParams(AppGlobals.apiEndpoint + URLs$j.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 });
@@ -5436,7 +5460,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 }]
         }] });
 
-const URLs$h = {
+const URLs$i = {
     getById: '/api/App_Setting/GetById',
     getAll: '/api/App_Setting/GetAll',
     getList: '/api/App_Setting/GetList',
@@ -5458,10 +5482,10 @@ let SettingService$1 = class SettingService extends HTTPService {
         });
     }
     getAll() {
-        return this.post(AppGlobals.apiEndpoint + URLs$h.getAll);
+        return this.post(AppGlobals.apiEndpoint + URLs$i.getAll);
     }
     getList(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$h.getList, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$i.getList, filter);
     }
     getPaging(filter) {
         return this.cms.ESP({
@@ -5477,27 +5501,27 @@ let SettingService$1 = class SettingService extends HTTPService {
     }
     delete(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$h.delete, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$i.delete, params);
     }
     getByCodeAnonymous(code) {
         const params = new HttpParams().append('Code', code);
-        return this.getParams(AppGlobals.apiEndpoint + URLs$h.getByCodeAnonymous, params);
+        return this.getParams(AppGlobals.apiEndpoint + URLs$i.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$h.GetAllConfig);
+        return this.post(AppGlobals.apiEndpoint + URLs$i.GetAllConfig);
     }
     applyConfig(config) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$h.ApplyConfig, config);
+        return this.postData(AppGlobals.apiEndpoint + URLs$i.ApplyConfig, config);
     }
     getDbInfo() {
-        return this.post(AppGlobals.apiEndpoint + URLs$h.GetDbInfo);
+        return this.post(AppGlobals.apiEndpoint + URLs$i.GetDbInfo);
     }
     loadConfigTheme() {
-        return this.get(AppGlobals.apiEndpoint + URLs$h.ConfigTheme);
+        return this.get(AppGlobals.apiEndpoint + URLs$i.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' });
@@ -5726,11 +5750,11 @@ class SignalRService {
             let targetHeaderMenuId = currentHeaderMenuId;
             let targetProjectId = currentProjectId;
             // Regex bóc tách ID, dừng lại trước dấu "/" hoặc "?" (query param)
-            const headerMenuRegex = /\/headermenuid\/([^\/\?]+)/i;
+            const headerMenuRegex = /\/headermenu\/([^\/\?]+)/i;
             const headerMatch = url.match(headerMenuRegex);
             if (headerMatch) {
                 targetHeaderMenuId = headerMatch[1]; // Ghi đè bằng ID của menu mới click
-                url = url.replace(headerMatch[0], ''); // Xóa phần /headermenuid/... ra khỏi url
+                url = url.replace(headerMatch[0], ''); // Xóa phần /headermenu/... ra khỏi url
             }
             const projectRegex = /\/projectid\/([^\/\?]+)/i;
             const projectMatch = url.match(projectRegex);
@@ -5746,7 +5770,7 @@ class SignalRService {
                 url = `/projectid/${targetProjectId}${url}`;
             }
             if (targetHeaderMenuId) {
-                url = `/headermenuid/${targetHeaderMenuId}${url}`;
+                url = `/headermenu/${targetHeaderMenuId}${url}`;
             }
             if (url === '')
                 url = '/';
@@ -6131,7 +6155,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 type: Output
             }] } });
 
-const URLs$g = {
+const URLs$h = {
     getById: '/api/file/GetById',
     getAll: '/api/file/GetAll',
     getList: '/api/file/GetList',
@@ -6145,23 +6169,23 @@ class FileService extends HTTPService {
     cms = inject(CommonService);
     getById(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$g.getById, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$h.getById, params);
     }
     getAll() {
-        return this.post(AppGlobals.apiEndpoint + URLs$g.getAll);
+        return this.post(AppGlobals.apiEndpoint + URLs$h.getAll);
     }
     getList(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$g.getList, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$h.getList, filter);
     }
     getPaging(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$g.getPaging, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$h.getPaging, filter);
     }
     addOrEdit(obj) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$g.addOrEdit, obj);
+        return this.postData(AppGlobals.apiEndpoint + URLs$h.addOrEdit, obj);
     }
     delete(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$g.delete, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$h.delete, params);
     }
     downloadFileById(id) {
         const params = new HttpParams().append('id', id);
@@ -6211,7 +6235,7 @@ class FileService extends HTTPService {
         });
     }
     addFileWithRef(obj) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$g.addFileWithRef, obj);
+        return this.postData(AppGlobals.apiEndpoint + URLs$h.addFileWithRef, obj);
     }
     getAnhWithRef(Ref_Table, Ref_Id) {
         return this.cms.ESP({
@@ -6220,7 +6244,7 @@ class FileService extends HTTPService {
         });
     }
     moveFileToDisk(obj) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$g.moveFileToDisk, obj);
+        return this.postData(AppGlobals.apiEndpoint + URLs$h.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' });
@@ -6234,17 +6258,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
 
 class SideMenuComponent extends BaseComponent {
     filteredLstMenu = [];
-    currentHeaderId = '';
+    moduleId = '';
+    headerMenuId = '';
     onClickToMenu = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SideMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: SideMenuComponent, isStandalone: true, selector: "side-menu", inputs: { filteredLstMenu: "filteredLstMenu", currentHeaderId: "currentHeaderId" }, outputs: { onClickToMenu: "onClickToMenu" }, usesInheritance: true, ngImport: i0, template: "<ul class=\"side-menu-wrapper\" nz-menu nzMode=\"inline\" [nzInlineIndent]=\"12\">\n  @for (menuLv1 of filteredLstMenu; track menuLv1.App_Menu_Id) {\n    @if (menuLv1.SubMenu?.length) {\n      <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\n        @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\n          @if (menuLv2.SubMenu?.length) {\n            <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\n              @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\n                @if (menuLv3.SubMenu?.length) {\n                  <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\n                    @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\n                      @if (menuLv4.SubMenu?.length) {\n                        <ul nz-submenu [nzOpen]=\"menuLv4.Open\" [nzTitle]=\"menuLv4.Name\" [nzIcon]=\"menuLv4.Icon\">\n                          @for (menuLv5 of menuLv4.SubMenu; track menuLv5.App_Menu_Id) {}\n                        </ul>\n                      } @else {\n                        <li nz-menu-item nzMatchRouter>\n                          <nz-icon *ngIf=\"menuLv4.Icon\" [nzType]=\"menuLv4.Icon\"></nz-icon>\n                          <box [width]=\"2\"></box>\n                          <a\n                            [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv4.Url\"\n                            (click)=\"onClickToMenu.emit()\"\n                          >\n                            {{ menuLv4.Name }}\n                          </a>\n                        </li>\n                      }\n                    }\n                  </ul>\n                } @else {\n                  <li nz-menu-item nzMatchRouter>\n                    <nz-icon *ngIf=\"menuLv3.Icon\" [nzType]=\"menuLv3.Icon\"></nz-icon><box [width]=\"2\"></box>\n                    <a\n                      [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv3.Url\"\n                      (click)=\"onClickToMenu.emit()\"\n                    >\n                      {{ menuLv3.Name }}\n                    </a>\n                  </li>\n                }\n              }\n            </ul>\n          } @else {\n            <li nz-menu-item nzMatchRouter>\n              <nz-icon *ngIf=\"menuLv2.Icon\" [nzType]=\"menuLv2.Icon\"></nz-icon><box [width]=\"2\"></box>\n              <a\n                [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv2.Url\"\n                (click)=\"onClickToMenu.emit()\"\n              >\n                {{ menuLv2.Name }}\n              </a>\n            </li>\n          }\n        }\n      </ul>\n    } @else {\n      <li nz-menu-item nzMatchRouter>\n        <nz-icon *ngIf=\"menuLv1.Icon\" [nzType]=\"menuLv1.Icon\"></nz-icon><box [width]=\"2\"></box>\n        <a\n          [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv1.Url\"\n          (click)=\"onClickToMenu.emit()\"\n        >\n          {{ menuLv1.Name }}\n        </a>\n      </li>\n    }\n  }\n</ul>\n", styles: ["@charset \"UTF-8\";.side-menu-wrapper .ant-menu-item{margin:0;font-weight:500}.side-menu-wrapper .ant-menu-item a{color:var(--app-text)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NzMenuModule }, { kind: "directive", type: i4$3.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$3.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "component", type: i4$3.NzSubMenuComponent, selector: "[nz-submenu]", inputs: ["nzMenuClassName", "nzPaddingLeft", "nzTitle", "nzIcon", "nzTriggerSubMenuAction", "nzOpen", "nzDisabled", "nzPlacement"], outputs: ["nzOpenChange"], exportAs: ["nzSubmenu"] }, { kind: "ngmodule", type: 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: i4$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: SideMenuComponent, isStandalone: true, selector: "side-menu", inputs: { filteredLstMenu: "filteredLstMenu", moduleId: "moduleId", headerMenuId: "headerMenuId" }, outputs: { onClickToMenu: "onClickToMenu" }, usesInheritance: true, ngImport: i0, template: "<ul class=\"side-menu-wrapper\" nz-menu nzMode=\"inline\" [nzInlineIndent]=\"12\">\n  @for (menuLv1 of filteredLstMenu; track menuLv1.App_Menu_Id) {\n    @if (menuLv1.SubMenu?.length) {\n      <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\n        @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\n          @if (menuLv2.SubMenu?.length) {\n            <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\n              @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\n                @if (menuLv3.SubMenu?.length) {\n                  <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\n                    @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\n                      @if (menuLv4.SubMenu?.length) {\n                        <ul nz-submenu [nzOpen]=\"menuLv4.Open\" [nzTitle]=\"menuLv4.Name\" [nzIcon]=\"menuLv4.Icon\">\n                          @for (menuLv5 of menuLv4.SubMenu; track menuLv5.App_Menu_Id) {}\n                        </ul>\n                      } @else {\n                        <li nz-menu-item nzMatchRouter>\n                          <nz-icon *ngIf=\"menuLv4.Icon\" [nzType]=\"menuLv4.Icon\"></nz-icon>\n                          <box [width]=\"2\"></box>\n                          <a\n                            [routerLink]=\"\n                              (moduleId ? '/module/' + moduleId : '') +\n                              (headerMenuId ? '/headermenu/' + headerMenuId : '') +\n                              menuLv4.Url\n                            \"\n                            (click)=\"onClickToMenu.emit()\"\n                          >\n                            {{ menuLv4.Name }}\n                          </a>\n                        </li>\n                      }\n                    }\n                  </ul>\n                } @else {\n                  <li nz-menu-item nzMatchRouter>\n                    <nz-icon *ngIf=\"menuLv3.Icon\" [nzType]=\"menuLv3.Icon\"></nz-icon><box [width]=\"2\"></box>\n                    <a\n                      [routerLink]=\"\n                        (moduleId ? '/module/' + moduleId : '') +\n                        (headerMenuId ? '/headermenu/' + headerMenuId : '') +\n                        menuLv3.Url\n                      \"\n                      (click)=\"onClickToMenu.emit()\"\n                    >\n                      {{ menuLv3.Name }}\n                    </a>\n                  </li>\n                }\n              }\n            </ul>\n          } @else {\n            <li nz-menu-item nzMatchRouter>\n              <nz-icon *ngIf=\"menuLv2.Icon\" [nzType]=\"menuLv2.Icon\"></nz-icon><box [width]=\"2\"></box>\n              <a\n                [routerLink]=\"\n                  (moduleId ? '/module/' + moduleId : '') +\n                  (headerMenuId ? '/headermenu/' + headerMenuId : '') +\n                  menuLv2.Url\n                \"\n                (click)=\"onClickToMenu.emit()\"\n              >\n                {{ menuLv2.Name }}\n              </a>\n            </li>\n          }\n        }\n      </ul>\n    } @else {\n      <li nz-menu-item nzMatchRouter>\n        <nz-icon *ngIf=\"menuLv1.Icon\" [nzType]=\"menuLv1.Icon\"></nz-icon><box [width]=\"2\"></box>\n        <a\n          [routerLink]=\"\n            (moduleId ? '/module/' + moduleId : '') + (headerMenuId ? '/headermenu/' + headerMenuId : '') + menuLv1.Url\n          \"\n          (click)=\"onClickToMenu.emit()\"\n        >\n          {{ menuLv1.Name }}\n        </a>\n      </li>\n    }\n  }\n</ul>\n", styles: ["@charset \"UTF-8\";.side-menu-wrapper .ant-menu-item{margin:0;font-weight:500}.side-menu-wrapper .ant-menu-item a{color:var(--app-text)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NzMenuModule }, { kind: "directive", type: i4$3.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$3.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "component", type: i4$3.NzSubMenuComponent, selector: "[nz-submenu]", inputs: ["nzMenuClassName", "nzPaddingLeft", "nzTitle", "nzIcon", "nzTriggerSubMenuAction", "nzOpen", "nzDisabled", "nzPlacement"], outputs: ["nzOpenChange"], exportAs: ["nzSubmenu"] }, { kind: "ngmodule", type: 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: i4$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 class=\"side-menu-wrapper\" nz-menu nzMode=\"inline\" [nzInlineIndent]=\"12\">\n  @for (menuLv1 of filteredLstMenu; track menuLv1.App_Menu_Id) {\n    @if (menuLv1.SubMenu?.length) {\n      <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\n        @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\n          @if (menuLv2.SubMenu?.length) {\n            <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\n              @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\n                @if (menuLv3.SubMenu?.length) {\n                  <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\n                    @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\n                      @if (menuLv4.SubMenu?.length) {\n                        <ul nz-submenu [nzOpen]=\"menuLv4.Open\" [nzTitle]=\"menuLv4.Name\" [nzIcon]=\"menuLv4.Icon\">\n                          @for (menuLv5 of menuLv4.SubMenu; track menuLv5.App_Menu_Id) {}\n                        </ul>\n                      } @else {\n                        <li nz-menu-item nzMatchRouter>\n                          <nz-icon *ngIf=\"menuLv4.Icon\" [nzType]=\"menuLv4.Icon\"></nz-icon>\n                          <box [width]=\"2\"></box>\n                          <a\n                            [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv4.Url\"\n                            (click)=\"onClickToMenu.emit()\"\n                          >\n                            {{ menuLv4.Name }}\n                          </a>\n                        </li>\n                      }\n                    }\n                  </ul>\n                } @else {\n                  <li nz-menu-item nzMatchRouter>\n                    <nz-icon *ngIf=\"menuLv3.Icon\" [nzType]=\"menuLv3.Icon\"></nz-icon><box [width]=\"2\"></box>\n                    <a\n                      [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv3.Url\"\n                      (click)=\"onClickToMenu.emit()\"\n                    >\n                      {{ menuLv3.Name }}\n                    </a>\n                  </li>\n                }\n              }\n            </ul>\n          } @else {\n            <li nz-menu-item nzMatchRouter>\n              <nz-icon *ngIf=\"menuLv2.Icon\" [nzType]=\"menuLv2.Icon\"></nz-icon><box [width]=\"2\"></box>\n              <a\n                [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv2.Url\"\n                (click)=\"onClickToMenu.emit()\"\n              >\n                {{ menuLv2.Name }}\n              </a>\n            </li>\n          }\n        }\n      </ul>\n    } @else {\n      <li nz-menu-item nzMatchRouter>\n        <nz-icon *ngIf=\"menuLv1.Icon\" [nzType]=\"menuLv1.Icon\"></nz-icon><box [width]=\"2\"></box>\n        <a\n          [routerLink]=\"(currentHeaderId ? '/headermenuid/' + currentHeaderId : '') + menuLv1.Url\"\n          (click)=\"onClickToMenu.emit()\"\n        >\n          {{ menuLv1.Name }}\n        </a>\n      </li>\n    }\n  }\n</ul>\n", styles: ["@charset \"UTF-8\";.side-menu-wrapper .ant-menu-item{margin:0;font-weight:500}.side-menu-wrapper .ant-menu-item a{color:var(--app-text)}\n"] }]
+            args: [{ selector: 'side-menu', imports: [CommonModule, NzMenuModule, NzIconModule, Box, RouterModule], template: "<ul class=\"side-menu-wrapper\" nz-menu nzMode=\"inline\" [nzInlineIndent]=\"12\">\n  @for (menuLv1 of filteredLstMenu; track menuLv1.App_Menu_Id) {\n    @if (menuLv1.SubMenu?.length) {\n      <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\n        @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\n          @if (menuLv2.SubMenu?.length) {\n            <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\n              @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\n                @if (menuLv3.SubMenu?.length) {\n                  <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\n                    @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\n                      @if (menuLv4.SubMenu?.length) {\n                        <ul nz-submenu [nzOpen]=\"menuLv4.Open\" [nzTitle]=\"menuLv4.Name\" [nzIcon]=\"menuLv4.Icon\">\n                          @for (menuLv5 of menuLv4.SubMenu; track menuLv5.App_Menu_Id) {}\n                        </ul>\n                      } @else {\n                        <li nz-menu-item nzMatchRouter>\n                          <nz-icon *ngIf=\"menuLv4.Icon\" [nzType]=\"menuLv4.Icon\"></nz-icon>\n                          <box [width]=\"2\"></box>\n                          <a\n                            [routerLink]=\"\n                              (moduleId ? '/module/' + moduleId : '') +\n                              (headerMenuId ? '/headermenu/' + headerMenuId : '') +\n                              menuLv4.Url\n                            \"\n                            (click)=\"onClickToMenu.emit()\"\n                          >\n                            {{ menuLv4.Name }}\n                          </a>\n                        </li>\n                      }\n                    }\n                  </ul>\n                } @else {\n                  <li nz-menu-item nzMatchRouter>\n                    <nz-icon *ngIf=\"menuLv3.Icon\" [nzType]=\"menuLv3.Icon\"></nz-icon><box [width]=\"2\"></box>\n                    <a\n                      [routerLink]=\"\n                        (moduleId ? '/module/' + moduleId : '') +\n                        (headerMenuId ? '/headermenu/' + headerMenuId : '') +\n                        menuLv3.Url\n                      \"\n                      (click)=\"onClickToMenu.emit()\"\n                    >\n                      {{ menuLv3.Name }}\n                    </a>\n                  </li>\n                }\n              }\n            </ul>\n          } @else {\n            <li nz-menu-item nzMatchRouter>\n              <nz-icon *ngIf=\"menuLv2.Icon\" [nzType]=\"menuLv2.Icon\"></nz-icon><box [width]=\"2\"></box>\n              <a\n                [routerLink]=\"\n                  (moduleId ? '/module/' + moduleId : '') +\n                  (headerMenuId ? '/headermenu/' + headerMenuId : '') +\n                  menuLv2.Url\n                \"\n                (click)=\"onClickToMenu.emit()\"\n              >\n                {{ menuLv2.Name }}\n              </a>\n            </li>\n          }\n        }\n      </ul>\n    } @else {\n      <li nz-menu-item nzMatchRouter>\n        <nz-icon *ngIf=\"menuLv1.Icon\" [nzType]=\"menuLv1.Icon\"></nz-icon><box [width]=\"2\"></box>\n        <a\n          [routerLink]=\"\n            (moduleId ? '/module/' + moduleId : '') + (headerMenuId ? '/headermenu/' + headerMenuId : '') + menuLv1.Url\n          \"\n          (click)=\"onClickToMenu.emit()\"\n        >\n          {{ menuLv1.Name }}\n        </a>\n      </li>\n    }\n  }\n</ul>\n", styles: ["@charset \"UTF-8\";.side-menu-wrapper .ant-menu-item{margin:0;font-weight:500}.side-menu-wrapper .ant-menu-item a{color:var(--app-text)}\n"] }]
         }], propDecorators: { filteredLstMenu: [{
                 type: Input
-            }], currentHeaderId: [{
+            }], moduleId: [{
+                type: Input
+            }], headerMenuId: [{
                 type: Input
             }], onClickToMenu: [{
                 type: Output
@@ -6319,10 +6346,12 @@ class LayoutComponent extends BaseComponent {
     LayoutComponent = LayoutComponent;
     static noShowSideMenu = false;
     static noShowBreadcrumb = false;
+    static noShowHeaderMenu = false;
     MENU_TYPE = 0;
     SYSTEM_NAME = '';
     SYSTEM_SUB_NAME_LEFT = '';
     SYSTEM_SUB_NAME_RIGHT = '';
+    MODULE_IN_USE = false;
     isCollapsed = false; // đóng mở menu, true là đóng
     isXSmall = false;
     nodes = [];
@@ -6350,6 +6379,7 @@ class LayoutComponent extends BaseComponent {
     }
     lstHeaderMenu = [];
     currentHeaderId = '';
+    currentModuleId = '';
     logoUrl$ = this.fileService
         .getFileVersion('LOGO')
         .pipe(map((res) => `${AppGlobals.apiEndpoint}/api/file/image?code=LOGO&v=${res || ''}`));
@@ -6361,20 +6391,44 @@ class LayoutComponent extends BaseComponent {
         else {
             document.body.classList.remove('dark-theme');
         }
+        await this.settingService
+            .getByCodeAnonymous('SYSTEM_MODULE_IN_USE')
+            .then((res) => (this.MODULE_IN_USE = res?.Data == 1));
         this.handleHeaderMenu();
+        if (this.MODULE_IN_USE) {
+            // Lần chạy đầu tiên
+            this.currentModuleId = this.getParamFromRoute('moduleId') || '';
+            if (this.currentModuleId) {
+                this.handleUserHeaderMenu(this.currentModuleId);
+            }
+            // Khi chuyển trang
+            this._router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => {
+                // Cố gắng lấy moduleId mới
+                const newModuleId = this.getParamFromRoute('moduleId') || '';
+                // Nếu ID thay đổi (hoặc từ có thành không có)
+                if (newModuleId !== this.currentModuleId) {
+                    this.currentModuleId = newModuleId;
+                    if (this.currentModuleId) {
+                        // Đã vào trong 1 module cụ thể -> gọi API lấy menu
+                        this.handleUserHeaderMenu(this.currentModuleId);
+                    }
+                    else {
+                        // Đang ở màn hình ngoài (chọn module) -> reset menu, KHÔNG gọi API
+                        this.lstHeaderMenu = [];
+                        this.lstMenu = [];
+                        this.nodes = [];
+                        this.visibleMenus = [];
+                        this.hiddenMenus = [];
+                        this.cdr.detectChanges();
+                    }
+                }
+            });
+        }
+        else {
+            this.handleUserHeaderMenu();
+        }
         this.vscService.initVersionCheck();
         this.signalrService.initNoti();
-        this.authService.getUserHeaderMenu().then((res) => {
-            this.lstHeaderMenu = res.Data || [];
-            if (this.lstHeaderMenu.length == 0) {
-                this.getUserMenu();
-            }
-            else {
-                setTimeout(() => {
-                    this.calculateMenuOverflow();
-                }, 0);
-            }
-        });
         await this.settingService.getByCodeAnonymous('MENU_TYPE').then((res) => {
             if (res?.Data) {
                 this.MENU_TYPE = res.Data;
@@ -6426,13 +6480,31 @@ class LayoutComponent extends BaseComponent {
             this.resizeObserver.disconnect(); // Hủy observe khi component bị destroy
         }
     }
+    handleUserHeaderMenu(moduleId = '') {
+        this.authService.getUserHeaderMenu(moduleId).then((res) => {
+            this.lstHeaderMenu = res.Data || [];
+            if (this.lstHeaderMenu.length == 0) {
+                this.getUserMenu();
+            }
+            else {
+                setTimeout(() => {
+                    this.calculateMenuOverflow();
+                }, 0);
+            }
+        });
+    }
     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);
-        // });
+        const headerId = this.getParamFromRoute('headerMenuId');
+        console.log('headerId: ', headerId);
+        if (headerId) {
+            this._handleHeaderMenu(headerId);
+        }
+        this._router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => {
+            const updatedHeaderId = this.getParamFromRoute('headerMenuId');
+            if (updatedHeaderId) {
+                this._handleHeaderMenu(updatedHeaderId);
+            }
+        });
     }
     _handleHeaderMenu(menuId) {
         this.getUserMenu(menuId);
@@ -6442,7 +6514,8 @@ class LayoutComponent extends BaseComponent {
             return;
         }
         this.currentHeaderId = headerMenuId || '';
-        this.authService.getUserMenu(this.currentHeaderId).then((res) => {
+        this.currentModuleId = this.getParamFromRoute('moduleId') || this.currentModuleId;
+        this.authService.getUserMenu(this.currentModuleId, this.currentHeaderId).then((res) => {
             this.lstMenu = res.Data || [];
             this.nodes = this.buildNzTreeFromSubMenu(this.lstMenu);
             this.updateOpenMenus();
@@ -6460,6 +6533,16 @@ class LayoutComponent extends BaseComponent {
         const keyword = this._searchValue.toLowerCase();
         this.filteredLstMenu = this.filterMenuRecursive(this.lstMenu, keyword);
     }
+    getParamFromRoute(paramName) {
+        let currentRoute = this._router.routerState.root.snapshot;
+        while (currentRoute) {
+            if (currentRoute.params && currentRoute.params[paramName]) {
+                return currentRoute.params[paramName];
+            }
+            currentRoute = currentRoute.firstChild;
+        }
+        return null;
+    }
     filterMenuRecursive(menus, keyword) {
         const result = [];
         for (const menu of menus) {
@@ -6613,10 +6696,10 @@ class LayoutComponent extends BaseComponent {
         }
         this._handleHeaderMenu(menu.App_Menu_Id);
         if (menu.Url) {
-            this.goto(`/headermenuid/${menu.App_Menu_Id}${menu.Url}`);
+            this.goto(`/headermenu/${menu.App_Menu_Id}${menu.Url}`);
         }
         else {
-            // this.goto('/headermenuid/' + menu.App_Menu_Id);
+            // this.goto('/headermenu/' + menu.App_Menu_Id);
         }
     }
     openMenuDrawer() {
@@ -6689,8 +6772,16 @@ class LayoutComponent extends BaseComponent {
         this.hiddenMenus = tempHidden;
         this.cdr.detectChanges();
     }
+    gotoSelectModule() {
+        if (this.MODULE_IN_USE) {
+            this._router.navigateByUrl('/module');
+        }
+        else {
+            this._router.navigateByUrl('/');
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LayoutComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: LayoutComponent, isStandalone: true, selector: "layout", viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<nz-layout class=\"app-layout\">\n  <nz-header class=\"app-header\">\n    <div nz-row nzAlign=\"middle\" class=\"header-content\">\n      @if (isCollapsed) {\n        <div @fadeInOut>\n          &nbsp;\n          <button nz-button nzType=\"text\" style=\"color: var(--theme-text-color)\" (click)=\"visibleMenuDrawer = true\">\n            <nz-icon nzType=\"menu\" nzTheme=\"outline\" />\n          </button>\n        </div>\n      }\n\n      <div\n        class=\"header-logo\"\n        [style.width]=\"!isCollapsed ? siderWidthStorage : 'auto'\"\n        [style.padding-right]=\"!isCollapsed ? '0' : '16px'\"\n      >\n        <div nz-flex nzJustify=\"center\" nzGap=\"small\" style=\"line-height: var(--app-header-height)\">\n          <img\n            *ngIf=\"logoUrl$ | async as url\"\n            [src]=\"url\"\n            style=\"padding: 4px; height: var(--app-header-height)\"\n            hideIfError\n          />\n          @if (SYSTEM_NAME) {\n            <h2 style=\"color: whitesmoke; margin-bottom: 0\">{{ SYSTEM_NAME }}</h2>\n          } @else {\n            -- o0o --\n          }\n        </div>\n      </div>\n\n      <!-- header menu -->\n      <div nz-col nzFlex=\"auto\" class=\"header-menu\" style=\"min-width: 0\" #menuContainer>\n        <ul\n          nz-menu\n          nzTheme=\"light\"\n          nzMode=\"horizontal\"\n          style=\"display: flex; flex-wrap: nowrap; border-bottom: none; line-height: var(--app-header-height)\"\n        >\n          @for (item of visibleMenus; track item) {\n            <li\n              nz-menu-item\n              [nzSelected]=\"this.currentHeaderId === item.App_Menu_Id\"\n              (click)=\"handleValueChangeHeaderMenu(item)\"\n            >\n              <nz-icon *ngIf=\"item.Icon\" [nzType]=\"item.Icon\"></nz-icon><box [width]=\"4\"></box>{{ item.Name }}\n            </li>\n          }\n\n          @if (hiddenMenus.length > 0) {\n            <li nz-submenu nzTitle=\". . .\" style=\"padding: 0 16px\">\n              <ul>\n                @for (item of hiddenMenus; track item) {\n                  <li\n                    nz-menu-item\n                    [nzSelected]=\"this.currentHeaderId === item.App_Menu_Id\"\n                    (click)=\"handleValueChangeHeaderMenu(item)\"\n                  >\n                    <nz-icon *ngIf=\"item.Icon\" [nzType]=\"item.Icon\"></nz-icon><box [width]=\"4\"></box>{{ item.Name }}\n                  </li>\n                }\n              </ul>\n            </li>\n          }\n        </ul>\n      </div>\n\n      <div style=\"display: flex; align-items: center; flex-shrink: 0; gap: 8px; padding-right: 16px\">\n        <header-search></header-search>\n        <app-notification-center></app-notification-center>\n        <header-user></header-user>\n      </div>\n    </div>\n  </nz-header>\n  <nz-layout class=\"body-layout\">\n    <nz-sider\n      [class.hide-side-menu]=\"LayoutComponent.noShowSideMenu\"\n      class=\"menu-sidebar\"\n      nzCollapsible\n      [nzWidth]=\"siderWidth\"\n      [nzCollapsedWidth]=\"0\"\n      [(nzCollapsed)]=\"isCollapsed\"\n      [nzTrigger]=\"null\"\n      [nzTheme]=\"'dark'\"\n    >\n      <div class=\"menu-wapper\">\n        @if (MENU_TYPE == 1) {\n          <div class=\"nz-tree-wapper\">\n            <nz-tree\n              [nzData]=\"nodes\"\n              [nzSearchValue]=\"searchValue\"\n              [nzHideUnMatched]=\"true\"\n              [nzShowLine]=\"true\"\n              [nzSelectedKeys]=\"selectedKeys\"\n              [nzExpandedKeys]=\"expandedKeys\"\n              (nzClick)=\"nzEvent($event)\"\n            ></nz-tree>\n          </div>\n        } @else {\n          <div class=\"nz-tree-wapper\">\n            <side-menu [filteredLstMenu]=\"filteredLstMenu\" [currentHeaderId]=\"currentHeaderId\"></side-menu>\n          </div>\n        }\n\n        <nz-input-group [nzSuffix]=\"suffixTemplate\">\n          <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\n        </nz-input-group>\n        <ng-template #suffixTemplate>\n          <span class=\"suffix-wrap\">\n            <icon-delete\n              class=\"suffix-icon delete\"\n              [class.show]=\"searchValue\"\n              [size]=\"14\"\n              (click)=\"searchValue = ''\"\n            ></icon-delete>\n\n            <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\n          </span>\n        </ng-template>\n      </div>\n      <div class=\"sider-footer\" style=\"height: var(--app-footer-height)\">\n        <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 10px; color: lightgray\">\n          {{ SYSTEM_SUB_NAME_LEFT || \"-- o0o --\" }}\n\n          <span style=\"float: right\" (click)=\"triggerCollapse()\">\n            <nz-icon class=\"trigger\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" nz-tooltip=\"\u1EA8n menu\" />\n          </span>\n        </div>\n      </div>\n    </nz-sider>\n    <nz-layout class=\"main-layout\">\n      <nz-content class=\"content\">\n        <div class=\"inner-content\">\n          @if (!LayoutComponent.noShowBreadcrumb) {\n            <app-breadcrumb [@fadeInOut] nz-col nzFlex=\"auto\"></app-breadcrumb>\n          }\n          <router-outlet></router-outlet>\n        </div>\n        <div nz-row class=\"sider-footer\" style=\"height: var(--app-footer-height)\">\n          <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 10px; color: lightgray\">\n            {{ SYSTEM_SUB_NAME_RIGHT || \"-- o0o --\" }}\n          </div>\n        </div>\n        <!-- <nz-back-top [nzTarget]=\"'.content'\" [nzVisibilityHeight]=\"500\"></nz-back-top> -->\n      </nz-content>\n    </nz-layout>\n  </nz-layout>\n</nz-layout>\n\n<nz-drawer\n  [nzWrapClassName]=\"'same-theme-color menu-drawer'\"\n  [nzWidth]=\"350\"\n  [nzClosable]=\"false\"\n  [(nzVisible)]=\"visibleMenuDrawer\"\n  [nzMaskClosable]=\"true\"\n  nzPlacement=\"left\"\n  nzTitle=\"\"\n  (nzOnClose)=\"closeMenuDrawer()\"\n>\n  <ng-container *nzDrawerContent>\n    <div class=\"menu-wapper\">\n      @if (MENU_TYPE == 1) {\n        <div class=\"nz-tree-wapper in-drawer\">\n          <nz-tree\n            [nzData]=\"nodes\"\n            [nzSearchValue]=\"searchValue\"\n            [nzHideUnMatched]=\"true\"\n            [nzShowLine]=\"true\"\n            [nzSelectedKeys]=\"selectedKeys\"\n            [nzExpandedKeys]=\"expandedKeys\"\n            (nzClick)=\"nzEvent($event)\"\n          ></nz-tree>\n        </div>\n      } @else {\n        <div class=\"nz-tree-wapper in-drawer\">\n          <side-menu\n            [filteredLstMenu]=\"filteredLstMenu\"\n            [currentHeaderId]=\"currentHeaderId\"\n            (onClickToMenu)=\"visibleMenuDrawer = false\"\n          ></side-menu>\n        </div>\n      }\n\n      <nz-input-group [nzSuffix]=\"suffixTemplate\" [nzAddOnAfter]=\"afterTemplate\">\n        <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\n      </nz-input-group>\n      <ng-template #suffixTemplate>\n        <span class=\"suffix-wrap\">\n          <icon-delete\n            class=\"suffix-icon delete\"\n            [class.show]=\"searchValue\"\n            [size]=\"14\"\n            (click)=\"searchValue = ''\"\n          ></icon-delete>\n\n          <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\n        </span>\n      </ng-template>\n      <ng-template #afterTemplate>\n        <button nz-button (click)=\"triggerCollapse(); this.visibleMenuDrawer = false\">\n          <nz-icon *ngIf=\"isCollapsed\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" />\n        </button>\n      </ng-template>\n    </div>\n  </ng-container>\n</nz-drawer>\n<app-global-spinner></app-global-spinner>\n", styles: ["@charset \"UTF-8\";:host{display:flex;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bg-sidebar: #f0f2f5;--bg-content: #fff;--bg-inner: #fff;--border-color: transparent;--text-main: rgba(0, 0, 0, .85)}:host-context(.dark-theme),:host(.dark-theme){--theme-color: #303030 !important;--theme-text-color: #e1e1e1 !important;--bg-sidebar: #262626;--bg-content: #1f1f1f;--bg-inner: #1f1f1f;--border-color: #424242;--text-main: #e1e1e1}html,body,app-root{height:100%;margin:0}.app-layout{display:flex;flex-direction:column;height:100vh}.app-header{position:fixed;top:0;left:0;width:100%;height:var(--app-header-height);background:var(--theme-color);color:var(--theme-text-color);box-shadow:0 1px 4px #00152914;z-index:1000;display:flex;align-items:center;padding:0;border-bottom:1px solid var(--border-color);transition:background-color .3s ease}.header-content{width:100%;flex-wrap:nowrap!important}.header-logo{height:var(--app-header-height);text-align:center;color:var(--theme-text-color);transition:width .3s;flex-shrink:0;overflow:hidden}.body-layout{display:flex;flex:1;margin-top:var(--app-header-height);height:calc(100vh - var(--app-header-height));overflow:hidden}.menu-sidebar{width:256px;background:#f0f2f5;overflow-y:auto;overflow-x:hidden;transition:all .3s cubic-bezier(.25,.8,.25,1)!important;min-height:calc(100vh - var(--app-header-height))}.menu-sidebar.hide-side-menu{flex:0 0 0px!important;max-width:0px!important;min-width:0px!important;width:0px!important}.menu-wapper{min-height:calc(100% - var(--app-footer-height))}.main-layout{display:flex;flex-direction:column;flex:1;overflow:hidden}.content{flex:1;background:var(--bg-content);overflow-x:hidden;overflow-y:auto;height:100%}.inner-content{background:var(--bg-inner);color:var(--text-main);min-height:calc(100% - var(--app-footer-height));padding:8px;box-sizing:border-box}.content-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:center}.sider-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:right}.trigger{margin-right:8px}.menu-sidebar .ant-menu-inline .ant-menu-item{margin-top:0;margin-bottom:0}::ng-deep .menu-wapper .anticon-file{display:none}:host ::ng-deep .ant-back-top{right:30px;bottom:40px}::ng-deep .same-theme-color .ant-drawer-content{background:var(--theme-menu-color)}.nz-tree-wapper{height:calc(100vh - var(--app-header-height) - var(--app-footer-height) - 32px);overflow-y:auto}.nz-tree-wapper.in-drawer{height:calc(100vh - 32px);overflow-y:auto}::ng-deep .menu-drawer .ant-drawer-body{padding:0}::ng-deep .ant-breadcrumb-link{cursor:pointer}::ng-deep .breadcrumb-header .ant-breadcrumb-link{color:var(--theme-text-color);cursor:pointer}::ng-deep .breadcrumb-header .ant-breadcrumb-separator{color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item:not(.ant-segmented-item-selected){color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item{border-left:1px solid}::ng-deep .header-menu .ant-segmented-item:last-child{border-right:1px solid}.suffix-wrap{position:relative;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}.suffix-icon{position:absolute;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .18s cubic-bezier(.4,0,.2,1);transform:scale(.6) translate(4px)}.suffix-icon.show{opacity:1;pointer-events:auto;transform:scale(1) translate(0)}.search{color:#00000073}.delete{color:#bfbfbf}.delete.show{animation:popIn .18s ease}::ng-deep .header-menu .ant-menu-horizontal{background-color:transparent!important;border-bottom:none!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu{color:var(--theme-text-color)!important;opacity:.85;font-weight:600}::ng-deep .header-menu .ant-menu-submenu-title .anticon{color:var(--theme-text-color)!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item:hover,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu:hover,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item-selected,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-open,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-selected{color:var(--theme-text-color)!important;opacity:1;background-color:#ffffff1a!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item:hover:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu:hover:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item-selected:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-open:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-selected:after{border-bottom-color:#40a9ff!important}@keyframes popIn{0%{transform:scale(.5)}70%{transform:scale(1.15)}to{transform:scale(1)}}:host-context(.dark-theme) .content-footer,:host-context(.dark-theme) .sider-footer{background-color:var(--bg-sidebar);border-top:1px solid var(--border-color)}:host-context(.dark-theme) ::ng-deep .menu-sidebar .ant-tree,:host-context(.dark-theme) ::ng-deep .menu-drawer .ant-tree{background:transparent;color:var(--text-main)}:host-context(.dark-theme) ::ng-deep .ant-tree-node-content-wrapper:hover{background-color:#ffffff14!important}:host-context(.dark-theme) ::ng-deep .ant-tree-node-selected{background-color:#ffffff1f!important;color:#fff!important}:host-context(.dark-theme) ::ng-deep .menu-wapper .ant-input,:host-context(.dark-theme) ::ng-deep .menu-wapper .ant-input-group-addon{background-color:var(--bg-content);border-color:var(--border-color);color:var(--text-main)}:host-context(.dark-theme) ::ng-deep .menu-wapper .search,:host-context(.dark-theme) ::ng-deep .menu-wapper .delete{color:#8c8c8c}:host-context(.dark-theme) ::ng-deep .breadcrumb-header .ant-breadcrumb-link,:host-context(.dark-theme) ::ng-deep .breadcrumb-header .ant-breadcrumb-separator{color:#8c8c8c!important}:host-context(.dark-theme) ::ng-deep .breadcrumb-header .ant-breadcrumb-link:hover{color:var(--text-main)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: NzLayoutModule }, { kind: "component", type: i2$5.NzLayoutComponent, selector: "nz-layout", exportAs: ["nzLayout"] }, { kind: "component", type: i2$5.NzHeaderComponent, selector: "nz-header", exportAs: ["nzHeader"] }, { kind: "component", type: i2$5.NzContentComponent, selector: "nz-content", exportAs: ["nzContent"] }, { kind: "component", type: i2$5.NzSiderComponent, selector: "nz-sider", inputs: ["nzWidth", "nzTheme", "nzCollapsedWidth", "nzBreakpoint", "nzZeroTrigger", "nzTrigger", "nzReverseArrow", "nzCollapsible", "nzCollapsed"], outputs: ["nzCollapsedChange"], exportAs: ["nzSider"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "directive", type: i4$3.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$3.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "component", type: i4$3.NzSubMenuComponent, selector: "[nz-submenu]", inputs: ["nzMenuClassName", "nzPaddingLeft", "nzTitle", "nzIcon", "nzTriggerSubMenuAction", "nzOpen", "nzDisabled", "nzPlacement"], outputs: ["nzOpenChange"], exportAs: ["nzSubmenu"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: 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$5.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "component", type: Breadcrumb, selector: "app-breadcrumb" }, { kind: "ngmodule", type: NzTreeModule }, { kind: "component", type: i10$1.NzTreeComponent, selector: "nz-tree", inputs: ["nzShowIcon", "nzHideUnMatched", "nzBlockNode", "nzExpandAll", "nzSelectMode", "nzCheckStrictly", "nzShowExpand", "nzShowLine", "nzCheckable", "nzAsyncData", "nzDraggable", "nzMultiple", "nzExpandedIcon", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualHeight", "nzTreeTemplate", "nzBeforeDrop", "nzData", "nzExpandedKeys", "nzSelectedKeys", "nzCheckedKeys", "nzSearchValue", "nzSearchFunc"], outputs: ["nzExpandedKeysChange", "nzSelectedKeysChange", "nzCheckedKeysChange", "nzSearchValueChange", "nzClick", "nzDblClick", "nzContextMenu", "nzCheckboxChange", "nzExpandChange", "nzOnDragStart", "nzOnDragEnter", "nzOnDragOver", "nzOnDragLeave", "nzOnDrop", "nzOnDragEnd"], exportAs: ["nzTree"] }, { kind: "ngmodule", type: NzBackTopModule }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "component", type: i3$4.NzDrawerComponent, selector: "nz-drawer", inputs: ["nzContent", "nzCloseIcon", "nzClosable", "nzMaskClosable", "nzMask", "nzCloseOnNavigation", "nzNoAnimation", "nzKeyboard", "nzTitle", "nzExtra", "nzFooter", "nzPlacement", "nzSize", "nzMaskStyle", "nzBodyStyle", "nzWrapClassName", "nzWidth", "nzHeight", "nzZIndex", "nzOffsetX", "nzOffsetY", "nzVisible"], outputs: ["nzOnViewInit", "nzOnClose", "nzVisibleChange"], exportAs: ["nzDrawer"] }, { kind: "directive", type: i3$4.NzDrawerContentDirective, selector: "[nzDrawerContent]", exportAs: ["nzDrawerContent"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i6.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i6.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "ngmodule", type: NzSegmentedModule }, { kind: "component", type: LayoutUser, selector: "header-user" }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconSearch, selector: "icon-search", inputs: ["size"], outputs: ["click"] }, { kind: "directive", type: HideIfErrorDirective, selector: "img[hideIfError]" }, { kind: "component", type: NotificationCenterComponent, selector: "app-notification-center" }, { kind: "component", type: HeaderSearchComponent, selector: "header-search", inputs: ["searchValue"], outputs: ["searchValueChange", "onSearch"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i8.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "ngmodule", type: NzMenuModule }, { kind: "component", type: SideMenuComponent, selector: "side-menu", inputs: ["filteredLstMenu", "currentHeaderId"], outputs: ["onClickToMenu"] }, { kind: "component", type: GlobalSpinnerComponent, selector: "app-global-spinner" }], animations: [fadeInOut] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: LayoutComponent, isStandalone: true, selector: "layout", viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<nz-layout class=\"app-layout\">\n  <nz-header class=\"app-header\">\n    <div nz-row nzAlign=\"middle\" class=\"header-content\">\n      @if (isCollapsed) {\n        <div @fadeInOut>\n          &nbsp;\n          <button nz-button nzType=\"text\" style=\"color: var(--theme-text-color)\" (click)=\"visibleMenuDrawer = true\">\n            <nz-icon nzType=\"menu\" nzTheme=\"outline\" />\n          </button>\n        </div>\n      }\n\n      <div\n        class=\"header-logo\"\n        [style.width]=\"!isCollapsed ? siderWidthStorage : 'auto'\"\n        [style.padding-right]=\"!isCollapsed ? '0' : '16px'\"\n      >\n        <div\n          nz-flex\n          nzJustify=\"center\"\n          nzGap=\"small\"\n          style=\"line-height: var(--app-header-height); cursor: pointer\"\n          (click)=\"gotoSelectModule()\"\n        >\n          <img\n            *ngIf=\"logoUrl$ | async as url\"\n            [src]=\"url\"\n            style=\"padding: 4px; height: var(--app-header-height)\"\n            hideIfError\n          />\n          @if (SYSTEM_NAME) {\n            <h2 style=\"color: whitesmoke; margin-bottom: 0\">{{ SYSTEM_NAME }}</h2>\n          } @else {\n            -- o0o --\n          }\n        </div>\n      </div>\n\n      <!-- header menu -->\n      <div nz-col nzFlex=\"auto\" class=\"header-menu\" style=\"min-width: 0\" #menuContainer>\n        <ul\n          *ngIf=\"!LayoutComponent.noShowHeaderMenu\"\n          nz-menu\n          nzTheme=\"light\"\n          nzMode=\"horizontal\"\n          style=\"display: flex; flex-wrap: nowrap; border-bottom: none; line-height: var(--app-header-height)\"\n        >\n          @for (item of visibleMenus; track item) {\n            <li\n              nz-menu-item\n              [nzSelected]=\"this.currentHeaderId === item.App_Menu_Id\"\n              (click)=\"handleValueChangeHeaderMenu(item)\"\n            >\n              <nz-icon *ngIf=\"item.Icon\" [nzType]=\"item.Icon\"></nz-icon><box [width]=\"4\"></box>{{ item.Name }}\n            </li>\n          }\n\n          @if (hiddenMenus.length > 0) {\n            <li nz-submenu nzTitle=\". . .\" style=\"padding: 0 16px\">\n              <ul>\n                @for (item of hiddenMenus; track item) {\n                  <li\n                    nz-menu-item\n                    [nzSelected]=\"this.currentHeaderId === item.App_Menu_Id\"\n                    (click)=\"handleValueChangeHeaderMenu(item)\"\n                  >\n                    <nz-icon *ngIf=\"item.Icon\" [nzType]=\"item.Icon\"></nz-icon><box [width]=\"4\"></box>{{ item.Name }}\n                  </li>\n                }\n              </ul>\n            </li>\n          }\n        </ul>\n      </div>\n\n      <div style=\"display: flex; align-items: center; flex-shrink: 0; gap: 8px; padding-right: 16px\">\n        <header-search></header-search>\n        <app-notification-center></app-notification-center>\n        <header-user></header-user>\n      </div>\n    </div>\n  </nz-header>\n  <nz-layout class=\"body-layout\">\n    <nz-sider\n      [class.hide-side-menu]=\"LayoutComponent.noShowSideMenu\"\n      class=\"menu-sidebar\"\n      nzCollapsible\n      [nzWidth]=\"siderWidth\"\n      [nzCollapsedWidth]=\"0\"\n      [(nzCollapsed)]=\"isCollapsed\"\n      [nzTrigger]=\"null\"\n      [nzTheme]=\"'dark'\"\n    >\n      <div class=\"menu-wapper\">\n        @if (MENU_TYPE == 1) {\n          <div class=\"nz-tree-wapper\">\n            <nz-tree\n              [nzData]=\"nodes\"\n              [nzSearchValue]=\"searchValue\"\n              [nzHideUnMatched]=\"true\"\n              [nzShowLine]=\"true\"\n              [nzSelectedKeys]=\"selectedKeys\"\n              [nzExpandedKeys]=\"expandedKeys\"\n              (nzClick)=\"nzEvent($event)\"\n            ></nz-tree>\n          </div>\n        } @else {\n          <div class=\"nz-tree-wapper\">\n            <side-menu\n              [filteredLstMenu]=\"filteredLstMenu\"\n              [moduleId]=\"currentModuleId\"\n              [headerMenuId]=\"currentHeaderId\"\n            ></side-menu>\n          </div>\n        }\n\n        <nz-input-group [nzSuffix]=\"suffixTemplate\">\n          <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\n        </nz-input-group>\n        <ng-template #suffixTemplate>\n          <span class=\"suffix-wrap\">\n            <icon-delete\n              class=\"suffix-icon delete\"\n              [class.show]=\"searchValue\"\n              [size]=\"14\"\n              (click)=\"searchValue = ''\"\n            ></icon-delete>\n\n            <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\n          </span>\n        </ng-template>\n      </div>\n      <div class=\"sider-footer\" style=\"height: var(--app-footer-height)\">\n        <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 10px; color: lightgray\">\n          {{ SYSTEM_SUB_NAME_LEFT || \"-- o0o --\" }}\n\n          <span style=\"float: right\" (click)=\"triggerCollapse()\">\n            <nz-icon class=\"trigger\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" nz-tooltip=\"\u1EA8n menu\" />\n          </span>\n        </div>\n      </div>\n    </nz-sider>\n    <nz-layout class=\"main-layout\">\n      <nz-content class=\"content\">\n        <div class=\"inner-content\">\n          @if (!LayoutComponent.noShowBreadcrumb) {\n            <app-breadcrumb [@fadeInOut] nz-col nzFlex=\"auto\"></app-breadcrumb>\n          }\n          <router-outlet></router-outlet>\n        </div>\n        <div nz-row class=\"sider-footer\" style=\"height: var(--app-footer-height)\">\n          <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 10px; color: lightgray\">\n            {{ SYSTEM_SUB_NAME_RIGHT || \"-- o0o --\" }}\n          </div>\n        </div>\n        <!-- <nz-back-top [nzTarget]=\"'.content'\" [nzVisibilityHeight]=\"500\"></nz-back-top> -->\n      </nz-content>\n    </nz-layout>\n  </nz-layout>\n</nz-layout>\n\n<nz-drawer\n  [nzWrapClassName]=\"'same-theme-color menu-drawer'\"\n  [nzWidth]=\"350\"\n  [nzClosable]=\"false\"\n  [(nzVisible)]=\"visibleMenuDrawer\"\n  [nzMaskClosable]=\"true\"\n  nzPlacement=\"left\"\n  nzTitle=\"\"\n  (nzOnClose)=\"closeMenuDrawer()\"\n>\n  <ng-container *nzDrawerContent>\n    <div class=\"menu-wapper\">\n      @if (MENU_TYPE == 1) {\n        <div class=\"nz-tree-wapper in-drawer\">\n          <nz-tree\n            [nzData]=\"nodes\"\n            [nzSearchValue]=\"searchValue\"\n            [nzHideUnMatched]=\"true\"\n            [nzShowLine]=\"true\"\n            [nzSelectedKeys]=\"selectedKeys\"\n            [nzExpandedKeys]=\"expandedKeys\"\n            (nzClick)=\"nzEvent($event)\"\n          ></nz-tree>\n        </div>\n      } @else {\n        <div class=\"nz-tree-wapper in-drawer\">\n          <side-menu\n            [filteredLstMenu]=\"filteredLstMenu\"\n            [moduleId]=\"currentModuleId\"\n            [headerMenuId]=\"currentHeaderId\"\n            (onClickToMenu)=\"visibleMenuDrawer = false\"\n          ></side-menu>\n        </div>\n      }\n\n      <nz-input-group [nzSuffix]=\"suffixTemplate\" [nzAddOnAfter]=\"afterTemplate\">\n        <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\n      </nz-input-group>\n      <ng-template #suffixTemplate>\n        <span class=\"suffix-wrap\">\n          <icon-delete\n            class=\"suffix-icon delete\"\n            [class.show]=\"searchValue\"\n            [size]=\"14\"\n            (click)=\"searchValue = ''\"\n          ></icon-delete>\n\n          <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\n        </span>\n      </ng-template>\n      <ng-template #afterTemplate>\n        <button nz-button (click)=\"triggerCollapse(); this.visibleMenuDrawer = false\">\n          <nz-icon *ngIf=\"isCollapsed\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" />\n        </button>\n      </ng-template>\n    </div>\n  </ng-container>\n</nz-drawer>\n<app-global-spinner></app-global-spinner>\n", styles: ["@charset \"UTF-8\";:host{display:flex;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bg-sidebar: #f0f2f5;--bg-content: #fff;--bg-inner: #fff;--border-color: transparent;--text-main: rgba(0, 0, 0, .85)}:host-context(.dark-theme),:host(.dark-theme){--theme-color: #303030 !important;--theme-text-color: #e1e1e1 !important;--bg-sidebar: #262626;--bg-content: #1f1f1f;--bg-inner: #1f1f1f;--border-color: #424242;--text-main: #e1e1e1}html,body,app-root{height:100%;margin:0}.app-layout{display:flex;flex-direction:column;height:100vh}.app-header{position:fixed;top:0;left:0;width:100%;height:var(--app-header-height);background:var(--theme-color);color:var(--theme-text-color);box-shadow:0 1px 4px #00152914;z-index:1000;display:flex;align-items:center;padding:0;border-bottom:1px solid var(--border-color);transition:background-color .3s ease}.header-content{width:100%;flex-wrap:nowrap!important}.header-logo{height:var(--app-header-height);text-align:center;color:var(--theme-text-color);transition:width .3s;flex-shrink:0;overflow:hidden}.body-layout{display:flex;flex:1;margin-top:var(--app-header-height);height:calc(100vh - var(--app-header-height));overflow:hidden}.menu-sidebar{width:256px;background:#f0f2f5;overflow-y:auto;overflow-x:hidden;transition:all .3s cubic-bezier(.25,.8,.25,1)!important;min-height:calc(100vh - var(--app-header-height))}.menu-sidebar.hide-side-menu{flex:0 0 0px!important;max-width:0px!important;min-width:0px!important;width:0px!important}.menu-wapper{min-height:calc(100% - var(--app-footer-height))}.main-layout{display:flex;flex-direction:column;flex:1;overflow:hidden}.content{flex:1;background:var(--bg-content);overflow-x:hidden;overflow-y:auto;height:100%}.inner-content{background:var(--bg-inner);color:var(--text-main);min-height:calc(100% - var(--app-footer-height));padding:8px;box-sizing:border-box}.content-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:center}.sider-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:right}.trigger{margin-right:8px}.menu-sidebar .ant-menu-inline .ant-menu-item{margin-top:0;margin-bottom:0}::ng-deep .menu-wapper .anticon-file{display:none}:host ::ng-deep .ant-back-top{right:30px;bottom:40px}::ng-deep .same-theme-color .ant-drawer-content{background:var(--theme-menu-color)}.nz-tree-wapper{height:calc(100vh - var(--app-header-height) - var(--app-footer-height) - 32px);overflow-y:auto}.nz-tree-wapper.in-drawer{height:calc(100vh - 32px);overflow-y:auto}::ng-deep .menu-drawer .ant-drawer-body{padding:0}::ng-deep .ant-breadcrumb-link{cursor:pointer}::ng-deep .breadcrumb-header .ant-breadcrumb-link{color:var(--theme-text-color);cursor:pointer}::ng-deep .breadcrumb-header .ant-breadcrumb-separator{color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item:not(.ant-segmented-item-selected){color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item{border-left:1px solid}::ng-deep .header-menu .ant-segmented-item:last-child{border-right:1px solid}.suffix-wrap{position:relative;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}.suffix-icon{position:absolute;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .18s cubic-bezier(.4,0,.2,1);transform:scale(.6) translate(4px)}.suffix-icon.show{opacity:1;pointer-events:auto;transform:scale(1) translate(0)}.search{color:#00000073}.delete{color:#bfbfbf}.delete.show{animation:popIn .18s ease}::ng-deep .header-menu .ant-menu-horizontal{background-color:transparent!important;border-bottom:none!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu{color:var(--theme-text-color)!important;opacity:.85;font-weight:600}::ng-deep .header-menu .ant-menu-submenu-title .anticon{color:var(--theme-text-color)!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item:hover,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu:hover,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item-selected,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-open,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-selected{color:var(--theme-text-color)!important;opacity:1;background-color:#ffffff1a!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item:hover:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu:hover:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item-selected:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-open:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-selected:after{border-bottom-color:#40a9ff!important}@keyframes popIn{0%{transform:scale(.5)}70%{transform:scale(1.15)}to{transform:scale(1)}}:host-context(.dark-theme) .content-footer,:host-context(.dark-theme) .sider-footer{background-color:var(--bg-sidebar);border-top:1px solid var(--border-color)}:host-context(.dark-theme) ::ng-deep .menu-sidebar .ant-tree,:host-context(.dark-theme) ::ng-deep .menu-drawer .ant-tree{background:transparent;color:var(--text-main)}:host-context(.dark-theme) ::ng-deep .ant-tree-node-content-wrapper:hover{background-color:#ffffff14!important}:host-context(.dark-theme) ::ng-deep .ant-tree-node-selected{background-color:#ffffff1f!important;color:#fff!important}:host-context(.dark-theme) ::ng-deep .menu-wapper .ant-input,:host-context(.dark-theme) ::ng-deep .menu-wapper .ant-input-group-addon{background-color:var(--bg-content);border-color:var(--border-color);color:var(--text-main)}:host-context(.dark-theme) ::ng-deep .menu-wapper .search,:host-context(.dark-theme) ::ng-deep .menu-wapper .delete{color:#8c8c8c}:host-context(.dark-theme) ::ng-deep .breadcrumb-header .ant-breadcrumb-link,:host-context(.dark-theme) ::ng-deep .breadcrumb-header .ant-breadcrumb-separator{color:#8c8c8c!important}:host-context(.dark-theme) ::ng-deep .breadcrumb-header .ant-breadcrumb-link:hover{color:var(--text-main)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: NzLayoutModule }, { kind: "component", type: i2$5.NzLayoutComponent, selector: "nz-layout", exportAs: ["nzLayout"] }, { kind: "component", type: i2$5.NzHeaderComponent, selector: "nz-header", exportAs: ["nzHeader"] }, { kind: "component", type: i2$5.NzContentComponent, selector: "nz-content", exportAs: ["nzContent"] }, { kind: "component", type: i2$5.NzSiderComponent, selector: "nz-sider", inputs: ["nzWidth", "nzTheme", "nzCollapsedWidth", "nzBreakpoint", "nzZeroTrigger", "nzTrigger", "nzReverseArrow", "nzCollapsible", "nzCollapsed"], outputs: ["nzCollapsedChange"], exportAs: ["nzSider"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "directive", type: i4$3.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$3.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "component", type: i4$3.NzSubMenuComponent, selector: "[nz-submenu]", inputs: ["nzMenuClassName", "nzPaddingLeft", "nzTitle", "nzIcon", "nzTriggerSubMenuAction", "nzOpen", "nzDisabled", "nzPlacement"], outputs: ["nzOpenChange"], exportAs: ["nzSubmenu"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: 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$5.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "component", type: Breadcrumb, selector: "app-breadcrumb" }, { kind: "ngmodule", type: NzTreeModule }, { kind: "component", type: i10$1.NzTreeComponent, selector: "nz-tree", inputs: ["nzShowIcon", "nzHideUnMatched", "nzBlockNode", "nzExpandAll", "nzSelectMode", "nzCheckStrictly", "nzShowExpand", "nzShowLine", "nzCheckable", "nzAsyncData", "nzDraggable", "nzMultiple", "nzExpandedIcon", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualHeight", "nzTreeTemplate", "nzBeforeDrop", "nzData", "nzExpandedKeys", "nzSelectedKeys", "nzCheckedKeys", "nzSearchValue", "nzSearchFunc"], outputs: ["nzExpandedKeysChange", "nzSelectedKeysChange", "nzCheckedKeysChange", "nzSearchValueChange", "nzClick", "nzDblClick", "nzContextMenu", "nzCheckboxChange", "nzExpandChange", "nzOnDragStart", "nzOnDragEnter", "nzOnDragOver", "nzOnDragLeave", "nzOnDrop", "nzOnDragEnd"], exportAs: ["nzTree"] }, { kind: "ngmodule", type: NzBackTopModule }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "component", type: i3$4.NzDrawerComponent, selector: "nz-drawer", inputs: ["nzContent", "nzCloseIcon", "nzClosable", "nzMaskClosable", "nzMask", "nzCloseOnNavigation", "nzNoAnimation", "nzKeyboard", "nzTitle", "nzExtra", "nzFooter", "nzPlacement", "nzSize", "nzMaskStyle", "nzBodyStyle", "nzWrapClassName", "nzWidth", "nzHeight", "nzZIndex", "nzOffsetX", "nzOffsetY", "nzVisible"], outputs: ["nzOnViewInit", "nzOnClose", "nzVisibleChange"], exportAs: ["nzDrawer"] }, { kind: "directive", type: i3$4.NzDrawerContentDirective, selector: "[nzDrawerContent]", exportAs: ["nzDrawerContent"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i6.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i6.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "ngmodule", type: NzSegmentedModule }, { kind: "component", type: LayoutUser, selector: "header-user" }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconSearch, selector: "icon-search", inputs: ["size"], outputs: ["click"] }, { kind: "directive", type: HideIfErrorDirective, selector: "img[hideIfError]" }, { kind: "component", type: NotificationCenterComponent, selector: "app-notification-center" }, { kind: "component", type: HeaderSearchComponent, selector: "header-search", inputs: ["searchValue"], outputs: ["searchValueChange", "onSearch"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i8.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "ngmodule", type: NzMenuModule }, { kind: "component", type: SideMenuComponent, selector: "side-menu", inputs: ["filteredLstMenu", "moduleId", "headerMenuId"], outputs: ["onClickToMenu"] }, { kind: "component", type: GlobalSpinnerComponent, selector: "app-global-spinner" }], animations: [fadeInOut] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
@@ -6723,13 +6814,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         NzMenuModule,
                         SideMenuComponent,
                         GlobalSpinnerComponent,
-                    ], animations: [fadeInOut], template: "<nz-layout class=\"app-layout\">\n  <nz-header class=\"app-header\">\n    <div nz-row nzAlign=\"middle\" class=\"header-content\">\n      @if (isCollapsed) {\n        <div @fadeInOut>\n          &nbsp;\n          <button nz-button nzType=\"text\" style=\"color: var(--theme-text-color)\" (click)=\"visibleMenuDrawer = true\">\n            <nz-icon nzType=\"menu\" nzTheme=\"outline\" />\n          </button>\n        </div>\n      }\n\n      <div\n        class=\"header-logo\"\n        [style.width]=\"!isCollapsed ? siderWidthStorage : 'auto'\"\n        [style.padding-right]=\"!isCollapsed ? '0' : '16px'\"\n      >\n        <div nz-flex nzJustify=\"center\" nzGap=\"small\" style=\"line-height: var(--app-header-height)\">\n          <img\n            *ngIf=\"logoUrl$ | async as url\"\n            [src]=\"url\"\n            style=\"padding: 4px; height: var(--app-header-height)\"\n            hideIfError\n          />\n          @if (SYSTEM_NAME) {\n            <h2 style=\"color: whitesmoke; margin-bottom: 0\">{{ SYSTEM_NAME }}</h2>\n          } @else {\n            -- o0o --\n          }\n        </div>\n      </div>\n\n      <!-- header menu -->\n      <div nz-col nzFlex=\"auto\" class=\"header-menu\" style=\"min-width: 0\" #menuContainer>\n        <ul\n          nz-menu\n          nzTheme=\"light\"\n          nzMode=\"horizontal\"\n          style=\"display: flex; flex-wrap: nowrap; border-bottom: none; line-height: var(--app-header-height)\"\n        >\n          @for (item of visibleMenus; track item) {\n            <li\n              nz-menu-item\n              [nzSelected]=\"this.currentHeaderId === item.App_Menu_Id\"\n              (click)=\"handleValueChangeHeaderMenu(item)\"\n            >\n              <nz-icon *ngIf=\"item.Icon\" [nzType]=\"item.Icon\"></nz-icon><box [width]=\"4\"></box>{{ item.Name }}\n            </li>\n          }\n\n          @if (hiddenMenus.length > 0) {\n            <li nz-submenu nzTitle=\". . .\" style=\"padding: 0 16px\">\n              <ul>\n                @for (item of hiddenMenus; track item) {\n                  <li\n                    nz-menu-item\n                    [nzSelected]=\"this.currentHeaderId === item.App_Menu_Id\"\n                    (click)=\"handleValueChangeHeaderMenu(item)\"\n                  >\n                    <nz-icon *ngIf=\"item.Icon\" [nzType]=\"item.Icon\"></nz-icon><box [width]=\"4\"></box>{{ item.Name }}\n                  </li>\n                }\n              </ul>\n            </li>\n          }\n        </ul>\n      </div>\n\n      <div style=\"display: flex; align-items: center; flex-shrink: 0; gap: 8px; padding-right: 16px\">\n        <header-search></header-search>\n        <app-notification-center></app-notification-center>\n        <header-user></header-user>\n      </div>\n    </div>\n  </nz-header>\n  <nz-layout class=\"body-layout\">\n    <nz-sider\n      [class.hide-side-menu]=\"LayoutComponent.noShowSideMenu\"\n      class=\"menu-sidebar\"\n      nzCollapsible\n      [nzWidth]=\"siderWidth\"\n      [nzCollapsedWidth]=\"0\"\n      [(nzCollapsed)]=\"isCollapsed\"\n      [nzTrigger]=\"null\"\n      [nzTheme]=\"'dark'\"\n    >\n      <div class=\"menu-wapper\">\n        @if (MENU_TYPE == 1) {\n          <div class=\"nz-tree-wapper\">\n            <nz-tree\n              [nzData]=\"nodes\"\n              [nzSearchValue]=\"searchValue\"\n              [nzHideUnMatched]=\"true\"\n              [nzShowLine]=\"true\"\n              [nzSelectedKeys]=\"selectedKeys\"\n              [nzExpandedKeys]=\"expandedKeys\"\n              (nzClick)=\"nzEvent($event)\"\n            ></nz-tree>\n          </div>\n        } @else {\n          <div class=\"nz-tree-wapper\">\n            <side-menu [filteredLstMenu]=\"filteredLstMenu\" [currentHeaderId]=\"currentHeaderId\"></side-menu>\n          </div>\n        }\n\n        <nz-input-group [nzSuffix]=\"suffixTemplate\">\n          <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\n        </nz-input-group>\n        <ng-template #suffixTemplate>\n          <span class=\"suffix-wrap\">\n            <icon-delete\n              class=\"suffix-icon delete\"\n              [class.show]=\"searchValue\"\n              [size]=\"14\"\n              (click)=\"searchValue = ''\"\n            ></icon-delete>\n\n            <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\n          </span>\n        </ng-template>\n      </div>\n      <div class=\"sider-footer\" style=\"height: var(--app-footer-height)\">\n        <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 10px; color: lightgray\">\n          {{ SYSTEM_SUB_NAME_LEFT || \"-- o0o --\" }}\n\n          <span style=\"float: right\" (click)=\"triggerCollapse()\">\n            <nz-icon class=\"trigger\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" nz-tooltip=\"\u1EA8n menu\" />\n          </span>\n        </div>\n      </div>\n    </nz-sider>\n    <nz-layout class=\"main-layout\">\n      <nz-content class=\"content\">\n        <div class=\"inner-content\">\n          @if (!LayoutComponent.noShowBreadcrumb) {\n            <app-breadcrumb [@fadeInOut] nz-col nzFlex=\"auto\"></app-breadcrumb>\n          }\n          <router-outlet></router-outlet>\n        </div>\n        <div nz-row class=\"sider-footer\" style=\"height: var(--app-footer-height)\">\n          <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 10px; color: lightgray\">\n            {{ SYSTEM_SUB_NAME_RIGHT || \"-- o0o --\" }}\n          </div>\n        </div>\n        <!-- <nz-back-top [nzTarget]=\"'.content'\" [nzVisibilityHeight]=\"500\"></nz-back-top> -->\n      </nz-content>\n    </nz-layout>\n  </nz-layout>\n</nz-layout>\n\n<nz-drawer\n  [nzWrapClassName]=\"'same-theme-color menu-drawer'\"\n  [nzWidth]=\"350\"\n  [nzClosable]=\"false\"\n  [(nzVisible)]=\"visibleMenuDrawer\"\n  [nzMaskClosable]=\"true\"\n  nzPlacement=\"left\"\n  nzTitle=\"\"\n  (nzOnClose)=\"closeMenuDrawer()\"\n>\n  <ng-container *nzDrawerContent>\n    <div class=\"menu-wapper\">\n      @if (MENU_TYPE == 1) {\n        <div class=\"nz-tree-wapper in-drawer\">\n          <nz-tree\n            [nzData]=\"nodes\"\n            [nzSearchValue]=\"searchValue\"\n            [nzHideUnMatched]=\"true\"\n            [nzShowLine]=\"true\"\n            [nzSelectedKeys]=\"selectedKeys\"\n            [nzExpandedKeys]=\"expandedKeys\"\n            (nzClick)=\"nzEvent($event)\"\n          ></nz-tree>\n        </div>\n      } @else {\n        <div class=\"nz-tree-wapper in-drawer\">\n          <side-menu\n            [filteredLstMenu]=\"filteredLstMenu\"\n            [currentHeaderId]=\"currentHeaderId\"\n            (onClickToMenu)=\"visibleMenuDrawer = false\"\n          ></side-menu>\n        </div>\n      }\n\n      <nz-input-group [nzSuffix]=\"suffixTemplate\" [nzAddOnAfter]=\"afterTemplate\">\n        <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\n      </nz-input-group>\n      <ng-template #suffixTemplate>\n        <span class=\"suffix-wrap\">\n          <icon-delete\n            class=\"suffix-icon delete\"\n            [class.show]=\"searchValue\"\n            [size]=\"14\"\n            (click)=\"searchValue = ''\"\n          ></icon-delete>\n\n          <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\n        </span>\n      </ng-template>\n      <ng-template #afterTemplate>\n        <button nz-button (click)=\"triggerCollapse(); this.visibleMenuDrawer = false\">\n          <nz-icon *ngIf=\"isCollapsed\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" />\n        </button>\n      </ng-template>\n    </div>\n  </ng-container>\n</nz-drawer>\n<app-global-spinner></app-global-spinner>\n", styles: ["@charset \"UTF-8\";:host{display:flex;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bg-sidebar: #f0f2f5;--bg-content: #fff;--bg-inner: #fff;--border-color: transparent;--text-main: rgba(0, 0, 0, .85)}:host-context(.dark-theme),:host(.dark-theme){--theme-color: #303030 !important;--theme-text-color: #e1e1e1 !important;--bg-sidebar: #262626;--bg-content: #1f1f1f;--bg-inner: #1f1f1f;--border-color: #424242;--text-main: #e1e1e1}html,body,app-root{height:100%;margin:0}.app-layout{display:flex;flex-direction:column;height:100vh}.app-header{position:fixed;top:0;left:0;width:100%;height:var(--app-header-height);background:var(--theme-color);color:var(--theme-text-color);box-shadow:0 1px 4px #00152914;z-index:1000;display:flex;align-items:center;padding:0;border-bottom:1px solid var(--border-color);transition:background-color .3s ease}.header-content{width:100%;flex-wrap:nowrap!important}.header-logo{height:var(--app-header-height);text-align:center;color:var(--theme-text-color);transition:width .3s;flex-shrink:0;overflow:hidden}.body-layout{display:flex;flex:1;margin-top:var(--app-header-height);height:calc(100vh - var(--app-header-height));overflow:hidden}.menu-sidebar{width:256px;background:#f0f2f5;overflow-y:auto;overflow-x:hidden;transition:all .3s cubic-bezier(.25,.8,.25,1)!important;min-height:calc(100vh - var(--app-header-height))}.menu-sidebar.hide-side-menu{flex:0 0 0px!important;max-width:0px!important;min-width:0px!important;width:0px!important}.menu-wapper{min-height:calc(100% - var(--app-footer-height))}.main-layout{display:flex;flex-direction:column;flex:1;overflow:hidden}.content{flex:1;background:var(--bg-content);overflow-x:hidden;overflow-y:auto;height:100%}.inner-content{background:var(--bg-inner);color:var(--text-main);min-height:calc(100% - var(--app-footer-height));padding:8px;box-sizing:border-box}.content-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:center}.sider-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:right}.trigger{margin-right:8px}.menu-sidebar .ant-menu-inline .ant-menu-item{margin-top:0;margin-bottom:0}::ng-deep .menu-wapper .anticon-file{display:none}:host ::ng-deep .ant-back-top{right:30px;bottom:40px}::ng-deep .same-theme-color .ant-drawer-content{background:var(--theme-menu-color)}.nz-tree-wapper{height:calc(100vh - var(--app-header-height) - var(--app-footer-height) - 32px);overflow-y:auto}.nz-tree-wapper.in-drawer{height:calc(100vh - 32px);overflow-y:auto}::ng-deep .menu-drawer .ant-drawer-body{padding:0}::ng-deep .ant-breadcrumb-link{cursor:pointer}::ng-deep .breadcrumb-header .ant-breadcrumb-link{color:var(--theme-text-color);cursor:pointer}::ng-deep .breadcrumb-header .ant-breadcrumb-separator{color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item:not(.ant-segmented-item-selected){color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item{border-left:1px solid}::ng-deep .header-menu .ant-segmented-item:last-child{border-right:1px solid}.suffix-wrap{position:relative;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}.suffix-icon{position:absolute;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .18s cubic-bezier(.4,0,.2,1);transform:scale(.6) translate(4px)}.suffix-icon.show{opacity:1;pointer-events:auto;transform:scale(1) translate(0)}.search{color:#00000073}.delete{color:#bfbfbf}.delete.show{animation:popIn .18s ease}::ng-deep .header-menu .ant-menu-horizontal{background-color:transparent!important;border-bottom:none!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu{color:var(--theme-text-color)!important;opacity:.85;font-weight:600}::ng-deep .header-menu .ant-menu-submenu-title .anticon{color:var(--theme-text-color)!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item:hover,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu:hover,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item-selected,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-open,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-selected{color:var(--theme-text-color)!important;opacity:1;background-color:#ffffff1a!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item:hover:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu:hover:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item-selected:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-open:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-selected:after{border-bottom-color:#40a9ff!important}@keyframes popIn{0%{transform:scale(.5)}70%{transform:scale(1.15)}to{transform:scale(1)}}:host-context(.dark-theme) .content-footer,:host-context(.dark-theme) .sider-footer{background-color:var(--bg-sidebar);border-top:1px solid var(--border-color)}:host-context(.dark-theme) ::ng-deep .menu-sidebar .ant-tree,:host-context(.dark-theme) ::ng-deep .menu-drawer .ant-tree{background:transparent;color:var(--text-main)}:host-context(.dark-theme) ::ng-deep .ant-tree-node-content-wrapper:hover{background-color:#ffffff14!important}:host-context(.dark-theme) ::ng-deep .ant-tree-node-selected{background-color:#ffffff1f!important;color:#fff!important}:host-context(.dark-theme) ::ng-deep .menu-wapper .ant-input,:host-context(.dark-theme) ::ng-deep .menu-wapper .ant-input-group-addon{background-color:var(--bg-content);border-color:var(--border-color);color:var(--text-main)}:host-context(.dark-theme) ::ng-deep .menu-wapper .search,:host-context(.dark-theme) ::ng-deep .menu-wapper .delete{color:#8c8c8c}:host-context(.dark-theme) ::ng-deep .breadcrumb-header .ant-breadcrumb-link,:host-context(.dark-theme) ::ng-deep .breadcrumb-header .ant-breadcrumb-separator{color:#8c8c8c!important}:host-context(.dark-theme) ::ng-deep .breadcrumb-header .ant-breadcrumb-link:hover{color:var(--text-main)!important}\n"] }]
+                    ], animations: [fadeInOut], template: "<nz-layout class=\"app-layout\">\n  <nz-header class=\"app-header\">\n    <div nz-row nzAlign=\"middle\" class=\"header-content\">\n      @if (isCollapsed) {\n        <div @fadeInOut>\n          &nbsp;\n          <button nz-button nzType=\"text\" style=\"color: var(--theme-text-color)\" (click)=\"visibleMenuDrawer = true\">\n            <nz-icon nzType=\"menu\" nzTheme=\"outline\" />\n          </button>\n        </div>\n      }\n\n      <div\n        class=\"header-logo\"\n        [style.width]=\"!isCollapsed ? siderWidthStorage : 'auto'\"\n        [style.padding-right]=\"!isCollapsed ? '0' : '16px'\"\n      >\n        <div\n          nz-flex\n          nzJustify=\"center\"\n          nzGap=\"small\"\n          style=\"line-height: var(--app-header-height); cursor: pointer\"\n          (click)=\"gotoSelectModule()\"\n        >\n          <img\n            *ngIf=\"logoUrl$ | async as url\"\n            [src]=\"url\"\n            style=\"padding: 4px; height: var(--app-header-height)\"\n            hideIfError\n          />\n          @if (SYSTEM_NAME) {\n            <h2 style=\"color: whitesmoke; margin-bottom: 0\">{{ SYSTEM_NAME }}</h2>\n          } @else {\n            -- o0o --\n          }\n        </div>\n      </div>\n\n      <!-- header menu -->\n      <div nz-col nzFlex=\"auto\" class=\"header-menu\" style=\"min-width: 0\" #menuContainer>\n        <ul\n          *ngIf=\"!LayoutComponent.noShowHeaderMenu\"\n          nz-menu\n          nzTheme=\"light\"\n          nzMode=\"horizontal\"\n          style=\"display: flex; flex-wrap: nowrap; border-bottom: none; line-height: var(--app-header-height)\"\n        >\n          @for (item of visibleMenus; track item) {\n            <li\n              nz-menu-item\n              [nzSelected]=\"this.currentHeaderId === item.App_Menu_Id\"\n              (click)=\"handleValueChangeHeaderMenu(item)\"\n            >\n              <nz-icon *ngIf=\"item.Icon\" [nzType]=\"item.Icon\"></nz-icon><box [width]=\"4\"></box>{{ item.Name }}\n            </li>\n          }\n\n          @if (hiddenMenus.length > 0) {\n            <li nz-submenu nzTitle=\". . .\" style=\"padding: 0 16px\">\n              <ul>\n                @for (item of hiddenMenus; track item) {\n                  <li\n                    nz-menu-item\n                    [nzSelected]=\"this.currentHeaderId === item.App_Menu_Id\"\n                    (click)=\"handleValueChangeHeaderMenu(item)\"\n                  >\n                    <nz-icon *ngIf=\"item.Icon\" [nzType]=\"item.Icon\"></nz-icon><box [width]=\"4\"></box>{{ item.Name }}\n                  </li>\n                }\n              </ul>\n            </li>\n          }\n        </ul>\n      </div>\n\n      <div style=\"display: flex; align-items: center; flex-shrink: 0; gap: 8px; padding-right: 16px\">\n        <header-search></header-search>\n        <app-notification-center></app-notification-center>\n        <header-user></header-user>\n      </div>\n    </div>\n  </nz-header>\n  <nz-layout class=\"body-layout\">\n    <nz-sider\n      [class.hide-side-menu]=\"LayoutComponent.noShowSideMenu\"\n      class=\"menu-sidebar\"\n      nzCollapsible\n      [nzWidth]=\"siderWidth\"\n      [nzCollapsedWidth]=\"0\"\n      [(nzCollapsed)]=\"isCollapsed\"\n      [nzTrigger]=\"null\"\n      [nzTheme]=\"'dark'\"\n    >\n      <div class=\"menu-wapper\">\n        @if (MENU_TYPE == 1) {\n          <div class=\"nz-tree-wapper\">\n            <nz-tree\n              [nzData]=\"nodes\"\n              [nzSearchValue]=\"searchValue\"\n              [nzHideUnMatched]=\"true\"\n              [nzShowLine]=\"true\"\n              [nzSelectedKeys]=\"selectedKeys\"\n              [nzExpandedKeys]=\"expandedKeys\"\n              (nzClick)=\"nzEvent($event)\"\n            ></nz-tree>\n          </div>\n        } @else {\n          <div class=\"nz-tree-wapper\">\n            <side-menu\n              [filteredLstMenu]=\"filteredLstMenu\"\n              [moduleId]=\"currentModuleId\"\n              [headerMenuId]=\"currentHeaderId\"\n            ></side-menu>\n          </div>\n        }\n\n        <nz-input-group [nzSuffix]=\"suffixTemplate\">\n          <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\n        </nz-input-group>\n        <ng-template #suffixTemplate>\n          <span class=\"suffix-wrap\">\n            <icon-delete\n              class=\"suffix-icon delete\"\n              [class.show]=\"searchValue\"\n              [size]=\"14\"\n              (click)=\"searchValue = ''\"\n            ></icon-delete>\n\n            <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\n          </span>\n        </ng-template>\n      </div>\n      <div class=\"sider-footer\" style=\"height: var(--app-footer-height)\">\n        <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 10px; color: lightgray\">\n          {{ SYSTEM_SUB_NAME_LEFT || \"-- o0o --\" }}\n\n          <span style=\"float: right\" (click)=\"triggerCollapse()\">\n            <nz-icon class=\"trigger\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" nz-tooltip=\"\u1EA8n menu\" />\n          </span>\n        </div>\n      </div>\n    </nz-sider>\n    <nz-layout class=\"main-layout\">\n      <nz-content class=\"content\">\n        <div class=\"inner-content\">\n          @if (!LayoutComponent.noShowBreadcrumb) {\n            <app-breadcrumb [@fadeInOut] nz-col nzFlex=\"auto\"></app-breadcrumb>\n          }\n          <router-outlet></router-outlet>\n        </div>\n        <div nz-row class=\"sider-footer\" style=\"height: var(--app-footer-height)\">\n          <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 10px; color: lightgray\">\n            {{ SYSTEM_SUB_NAME_RIGHT || \"-- o0o --\" }}\n          </div>\n        </div>\n        <!-- <nz-back-top [nzTarget]=\"'.content'\" [nzVisibilityHeight]=\"500\"></nz-back-top> -->\n      </nz-content>\n    </nz-layout>\n  </nz-layout>\n</nz-layout>\n\n<nz-drawer\n  [nzWrapClassName]=\"'same-theme-color menu-drawer'\"\n  [nzWidth]=\"350\"\n  [nzClosable]=\"false\"\n  [(nzVisible)]=\"visibleMenuDrawer\"\n  [nzMaskClosable]=\"true\"\n  nzPlacement=\"left\"\n  nzTitle=\"\"\n  (nzOnClose)=\"closeMenuDrawer()\"\n>\n  <ng-container *nzDrawerContent>\n    <div class=\"menu-wapper\">\n      @if (MENU_TYPE == 1) {\n        <div class=\"nz-tree-wapper in-drawer\">\n          <nz-tree\n            [nzData]=\"nodes\"\n            [nzSearchValue]=\"searchValue\"\n            [nzHideUnMatched]=\"true\"\n            [nzShowLine]=\"true\"\n            [nzSelectedKeys]=\"selectedKeys\"\n            [nzExpandedKeys]=\"expandedKeys\"\n            (nzClick)=\"nzEvent($event)\"\n          ></nz-tree>\n        </div>\n      } @else {\n        <div class=\"nz-tree-wapper in-drawer\">\n          <side-menu\n            [filteredLstMenu]=\"filteredLstMenu\"\n            [moduleId]=\"currentModuleId\"\n            [headerMenuId]=\"currentHeaderId\"\n            (onClickToMenu)=\"visibleMenuDrawer = false\"\n          ></side-menu>\n        </div>\n      }\n\n      <nz-input-group [nzSuffix]=\"suffixTemplate\" [nzAddOnAfter]=\"afterTemplate\">\n        <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\n      </nz-input-group>\n      <ng-template #suffixTemplate>\n        <span class=\"suffix-wrap\">\n          <icon-delete\n            class=\"suffix-icon delete\"\n            [class.show]=\"searchValue\"\n            [size]=\"14\"\n            (click)=\"searchValue = ''\"\n          ></icon-delete>\n\n          <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\n        </span>\n      </ng-template>\n      <ng-template #afterTemplate>\n        <button nz-button (click)=\"triggerCollapse(); this.visibleMenuDrawer = false\">\n          <nz-icon *ngIf=\"isCollapsed\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" />\n        </button>\n      </ng-template>\n    </div>\n  </ng-container>\n</nz-drawer>\n<app-global-spinner></app-global-spinner>\n", styles: ["@charset \"UTF-8\";:host{display:flex;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bg-sidebar: #f0f2f5;--bg-content: #fff;--bg-inner: #fff;--border-color: transparent;--text-main: rgba(0, 0, 0, .85)}:host-context(.dark-theme),:host(.dark-theme){--theme-color: #303030 !important;--theme-text-color: #e1e1e1 !important;--bg-sidebar: #262626;--bg-content: #1f1f1f;--bg-inner: #1f1f1f;--border-color: #424242;--text-main: #e1e1e1}html,body,app-root{height:100%;margin:0}.app-layout{display:flex;flex-direction:column;height:100vh}.app-header{position:fixed;top:0;left:0;width:100%;height:var(--app-header-height);background:var(--theme-color);color:var(--theme-text-color);box-shadow:0 1px 4px #00152914;z-index:1000;display:flex;align-items:center;padding:0;border-bottom:1px solid var(--border-color);transition:background-color .3s ease}.header-content{width:100%;flex-wrap:nowrap!important}.header-logo{height:var(--app-header-height);text-align:center;color:var(--theme-text-color);transition:width .3s;flex-shrink:0;overflow:hidden}.body-layout{display:flex;flex:1;margin-top:var(--app-header-height);height:calc(100vh - var(--app-header-height));overflow:hidden}.menu-sidebar{width:256px;background:#f0f2f5;overflow-y:auto;overflow-x:hidden;transition:all .3s cubic-bezier(.25,.8,.25,1)!important;min-height:calc(100vh - var(--app-header-height))}.menu-sidebar.hide-side-menu{flex:0 0 0px!important;max-width:0px!important;min-width:0px!important;width:0px!important}.menu-wapper{min-height:calc(100% - var(--app-footer-height))}.main-layout{display:flex;flex-direction:column;flex:1;overflow:hidden}.content{flex:1;background:var(--bg-content);overflow-x:hidden;overflow-y:auto;height:100%}.inner-content{background:var(--bg-inner);color:var(--text-main);min-height:calc(100% - var(--app-footer-height));padding:8px;box-sizing:border-box}.content-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:center}.sider-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:right}.trigger{margin-right:8px}.menu-sidebar .ant-menu-inline .ant-menu-item{margin-top:0;margin-bottom:0}::ng-deep .menu-wapper .anticon-file{display:none}:host ::ng-deep .ant-back-top{right:30px;bottom:40px}::ng-deep .same-theme-color .ant-drawer-content{background:var(--theme-menu-color)}.nz-tree-wapper{height:calc(100vh - var(--app-header-height) - var(--app-footer-height) - 32px);overflow-y:auto}.nz-tree-wapper.in-drawer{height:calc(100vh - 32px);overflow-y:auto}::ng-deep .menu-drawer .ant-drawer-body{padding:0}::ng-deep .ant-breadcrumb-link{cursor:pointer}::ng-deep .breadcrumb-header .ant-breadcrumb-link{color:var(--theme-text-color);cursor:pointer}::ng-deep .breadcrumb-header .ant-breadcrumb-separator{color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item:not(.ant-segmented-item-selected){color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item{border-left:1px solid}::ng-deep .header-menu .ant-segmented-item:last-child{border-right:1px solid}.suffix-wrap{position:relative;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}.suffix-icon{position:absolute;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .18s cubic-bezier(.4,0,.2,1);transform:scale(.6) translate(4px)}.suffix-icon.show{opacity:1;pointer-events:auto;transform:scale(1) translate(0)}.search{color:#00000073}.delete{color:#bfbfbf}.delete.show{animation:popIn .18s ease}::ng-deep .header-menu .ant-menu-horizontal{background-color:transparent!important;border-bottom:none!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu{color:var(--theme-text-color)!important;opacity:.85;font-weight:600}::ng-deep .header-menu .ant-menu-submenu-title .anticon{color:var(--theme-text-color)!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item:hover,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu:hover,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item-selected,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-open,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-selected{color:var(--theme-text-color)!important;opacity:1;background-color:#ffffff1a!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item:hover:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu:hover:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item-selected:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-open:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-selected:after{border-bottom-color:#40a9ff!important}@keyframes popIn{0%{transform:scale(.5)}70%{transform:scale(1.15)}to{transform:scale(1)}}:host-context(.dark-theme) .content-footer,:host-context(.dark-theme) .sider-footer{background-color:var(--bg-sidebar);border-top:1px solid var(--border-color)}:host-context(.dark-theme) ::ng-deep .menu-sidebar .ant-tree,:host-context(.dark-theme) ::ng-deep .menu-drawer .ant-tree{background:transparent;color:var(--text-main)}:host-context(.dark-theme) ::ng-deep .ant-tree-node-content-wrapper:hover{background-color:#ffffff14!important}:host-context(.dark-theme) ::ng-deep .ant-tree-node-selected{background-color:#ffffff1f!important;color:#fff!important}:host-context(.dark-theme) ::ng-deep .menu-wapper .ant-input,:host-context(.dark-theme) ::ng-deep .menu-wapper .ant-input-group-addon{background-color:var(--bg-content);border-color:var(--border-color);color:var(--text-main)}:host-context(.dark-theme) ::ng-deep .menu-wapper .search,:host-context(.dark-theme) ::ng-deep .menu-wapper .delete{color:#8c8c8c}:host-context(.dark-theme) ::ng-deep .breadcrumb-header .ant-breadcrumb-link,:host-context(.dark-theme) ::ng-deep .breadcrumb-header .ant-breadcrumb-separator{color:#8c8c8c!important}:host-context(.dark-theme) ::ng-deep .breadcrumb-header .ant-breadcrumb-link:hover{color:var(--text-main)!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { menuContainer: [{
                 type: ViewChild,
                 args: ['menuContainer']
             }] } });
 
-const URLs$f = {
+const URLs$g = {
     getById: '/api/App_Org/GetById',
     getAll: '/api/App_Org/GetAll',
     getList: '/api/App_Org/GetList',
@@ -6741,23 +6832,23 @@ class OrgService extends HTTPService {
     cms = inject(CommonService);
     getById(id) {
         let pr = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$f.getById, pr);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$g.getById, pr);
     }
     getAll() {
-        return this.post(AppGlobals.apiEndpoint + URLs$f.getAll);
+        return this.post(AppGlobals.apiEndpoint + URLs$g.getAll);
     }
     getList(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$f.getList, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$g.getList, filter);
     }
     getPaging(filter) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$f.getPaging, filter);
+        return this.postData(AppGlobals.apiEndpoint + URLs$g.getPaging, filter);
     }
     addOrEdit(obj) {
-        return this.postData(AppGlobals.apiEndpoint + URLs$f.addOrEdit, obj);
+        return this.postData(AppGlobals.apiEndpoint + URLs$g.addOrEdit, obj);
     }
     delete(id) {
         const params = new HttpParams().append('id', id);
-        return this.postParams(AppGlobals.apiEndpoint + URLs$f.delete, params);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$g.delete, params);
     }
     getAllForLogin(UserName) {
         const params = new HttpParams().append('UserName', UserName);
@@ -6795,6 +6886,7 @@ class LoginComponent extends BaseComponent {
     lstOrg = [];
     isOneUserMultiOrgs = false;
     SYSTEM_NAME_LOGIN = '';
+    MODULE_IN_USE = false;
     async ngOnInit() {
         this.route.queryParams.subscribe((params) => (this.returnUrl = params['returnUrl'] || '/'));
         if (TokenStorage.getToken() && (await this.authService.pingAuth())) {
@@ -6807,11 +6899,8 @@ class LoginComponent extends BaseComponent {
             orgid: [null],
             langSwitch: [AppStorage.getLang() === 'vn'],
         });
-        this.settingService.getByCodeAnonymous('SYSTEM_NAME_LOGIN').then((res) => {
-            if (res?.Data) {
-                this.SYSTEM_NAME_LOGIN = res.Data;
-            }
-        }, (err) => this.handleError(err));
+        this.settingService.getByCodeAnonymous('SYSTEM_MODULE_IN_USE').then((res) => (this.MODULE_IN_USE = res?.Data == 1));
+        this.settingService.getByCodeAnonymous('SYSTEM_NAME_LOGIN').then((res) => (this.SYSTEM_NAME_LOGIN = res?.Data));
         this.settingService.getByCodeAnonymous('ONE_USER_MULTI_ORGS').then((res) => {
             if (res?.Data) {
                 if (res.Data == '1') {
@@ -6853,7 +6942,7 @@ class LoginComponent extends BaseComponent {
         }
         if (this.loginForm.valid) {
             this.isLoading = true;
-            await this.sessionManager.login(this.loginForm.value.username, this.loginForm.value.password, this.loginForm.value.orgid, this.returnUrl);
+            await this.sessionManager.login(this.loginForm.value.username, this.loginForm.value.password, this.loginForm.value.orgid, this.returnUrl, this.MODULE_IN_USE);
             this.isLoading = false;
         }
         this.vscService.checkVersion();
@@ -6914,6 +7003,7 @@ class Login1Component extends BaseComponent {
     lstOrg = [];
     isOneUserMultiOrgs = false;
     SYSTEM_NAME_LOGIN = '';
+    MODULE_IN_USE = false;
     async ngOnInit() {
         this.route.queryParams.subscribe((params) => (this.returnUrl = params['returnUrl'] || '/'));
         if (TokenStorage.getToken() && (await this.authService.pingAuth())) {
@@ -6926,11 +7016,8 @@ class Login1Component extends BaseComponent {
             orgid: [null],
             langSwitch: [AppStorage.getLang() === 'vn'],
         });
-        this.settingService.getByCodeAnonymous('SYSTEM_NAME_LOGIN').then((res) => {
-            if (res?.Data) {
-                this.SYSTEM_NAME_LOGIN = res.Data;
-            }
-        }, (err) => this.handleError(err));
+        this.settingService.getByCodeAnonymous('SYSTEM_MODULE_IN_USE').then((res) => (this.MODULE_IN_USE = res?.Data == 1));
+        this.settingService.getByCodeAnonymous('SYSTEM_NAME_LOGIN').then((res) => (this.SYSTEM_NAME_LOGIN = res?.Data));
         this.settingService.getByCodeAnonymous('ONE_USER_MULTI_ORGS').then((res) => {
             if (res?.Data) {
                 if (res.Data == '1') {
@@ -6972,7 +7059,7 @@ class Login1Component extends BaseComponent {
         }
         if (this.loginForm.valid) {
             this.isLoading = true;
-            await this.sessionManager.login(this.loginForm.value.username, this.loginForm.value.password, this.loginForm.value.orgid, this.returnUrl);
+            await this.sessionManager.login(this.loginForm.value.username, this.loginForm.value.password, this.loginForm.value.orgid, this.returnUrl, this.MODULE_IN_USE);
             this.isLoading = false;
         }
         this.vscService.checkVersion();
@@ -7033,6 +7120,7 @@ class Login2Component extends BaseComponent {
     lstOrg = [];
     isOneUserMultiOrgs = false;
     SYSTEM_NAME_LOGIN = '';
+    MODULE_IN_USE = false;
     isDarkMode = false;
     sub;
     async ngOnInit() {
@@ -7047,11 +7135,8 @@ class Login2Component extends BaseComponent {
             orgid: [null],
             langSwitch: [AppStorage.getLang() === 'vn'],
         });
-        this.settingService.getByCodeAnonymous('SYSTEM_NAME_LOGIN').then((res) => {
-            if (res?.Data) {
-                this.SYSTEM_NAME_LOGIN = res.Data;
-            }
-        }, (err) => this.handleError(err));
+        this.settingService.getByCodeAnonymous('SYSTEM_MODULE_IN_USE').then((res) => (this.MODULE_IN_USE = res?.Data == 1));
+        this.settingService.getByCodeAnonymous('SYSTEM_NAME_LOGIN').then((res) => (this.SYSTEM_NAME_LOGIN = res?.Data));
         this.settingService.getByCodeAnonymous('ONE_USER_MULTI_ORGS').then((res) => {
             if (res?.Data) {
                 if (res.Data == '1') {
@@ -7109,7 +7194,7 @@ class Login2Component extends BaseComponent {
         }
         if (this.loginForm.valid) {
             this.isLoading = true;
-            await this.sessionManager.login(this.loginForm.value.username, this.loginForm.value.password, this.loginForm.value.orgid, this.returnUrl);
+            await this.sessionManager.login(this.loginForm.value.username, this.loginForm.value.password, this.loginForm.value.orgid, this.returnUrl, this.MODULE_IN_USE);
             this.isLoading = false;
         }
         this.vscService.checkVersion();
@@ -7157,6 +7242,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                     ], selector: 'login', template: "<div class=\"login-wrapper\" [class.dark-theme]=\"isDarkMode\">\n  <!-- \u0110\u1ED5i \u1EA3nh n\u1EC1n theo Theme -->\n  <img *ngIf=\"!isDarkMode && (bgLightUrl$ | async) as url\" class=\"bg-image\" [src]=\"url\" hideIfError />\n  <img *ngIf=\"isDarkMode && (bgDarkUrl$ | async) as url\" class=\"bg-image\" [src]=\"url\" hideIfError />\n\n  <!-- N\u00FAt chuy\u1EC3n \u0111\u1ED5i Theme -->\n  <button nz-button nzType=\"text\" class=\"theme-toggle\" (click)=\"toggleTheme()\">\n    <nz-icon [nzType]=\"isDarkMode ? 'sun' : 'moon'\" nzTheme=\"outline\" />\n  </button>\n\n  <div class=\"form-container\">\n    <form nz-flex nzVertical=\"true\" nz-form [formGroup]=\"loginForm\" class=\"login-form\" (ngSubmit)=\"dologin()\">\n      <div>\n        <div style=\"text-align: center; margin-bottom: 10px\">\n          <img *ngIf=\"logoUrl$ | async as url\" class=\"logo-img\" [src]=\"url\" hideIfError />\n        </div>\n        <div class=\"form-field\" style=\"text-align: center; margin-bottom: 24px\">\n          <h3 class=\"system-title\">{{ SYSTEM_NAME_LOGIN }}</h3>\n        </div>\n      </div>\n\n      <div nz-row [nzJustify]=\"'center'\">\n        <div nz-col nzSm=\"24\" nzMd=\"22\">\n          <div nz-flex nzVertical=\"true\">\n            <nz-form-item>\n              <nz-form-control nzErrorTip=\"{{ 'REQUIRED' | translate }}\">\n                <nz-input-group nzPrefixIcon=\"user\" nzSize=\"large\">\n                  <input type=\"text\" nz-input formControlName=\"username\" placeholder=\"{{ 'USERNAME' | translate }}\" />\n                </nz-input-group>\n              </nz-form-control>\n            </nz-form-item>\n\n            <nz-form-item>\n              <nz-form-control nzErrorTip=\"{{ 'REQUIRED' | translate }}\">\n                <nz-input-group\n                  nzPrefixIcon=\"lock\"\n                  nzSize=\"large\"\n                  [nzSuffix]=\"visible ? suffixTemplateHiddenPassword : suffixTemplateShowPassword\"\n                >\n                  <input\n                    type=\"{{ passwordType }}\"\n                    nz-input\n                    formControlName=\"password\"\n                    placeholder=\"{{ 'PASSWORD' | translate }}\"\n                  />\n                </nz-input-group>\n              </nz-form-control>\n              <ng-template #suffixTemplateShowPassword>\n                <nz-icon\n                  nzType=\"eye\"\n                  nzTheme=\"outline\"\n                  nz-tooltip\n                  nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\n                  (click)=\"visible = !visible; passwordType = 'text'\"\n                />\n              </ng-template>\n              <ng-template #suffixTemplateHiddenPassword>\n                <nz-icon\n                  nzType=\"eye-invisible\"\n                  nzTheme=\"outline\"\n                  nz-tooltip\n                  nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\n                  (click)=\"visible = !visible; passwordType = 'password'\"\n                />\n              </ng-template>\n            </nz-form-item>\n\n            @if (isOneUserMultiOrgs) {\n              <nz-form-item class=\"org-select\">\n                <nz-form-control nzErrorTip=\"{{ 'REQUIRED' | translate }}\">\n                  <nz-input-group nzPrefixIcon=\"cluster\" nzSize=\"large\" nzHasFeedback=\"false\">\n                    <nz-select\n                      nzShowSearch\n                      nzAllowClear\n                      [nzDropdownMatchSelectWidth]=\"false\"\n                      [nzBorderless]=\"true\"\n                      nzPlaceHolder=\"{{ 'ORG' | translate }}\"\n                      formControlName=\"orgid\"\n                      class=\"no-error-border\"\n                      (nzFocus)=\"onFocusOrg()\"\n                    >\n                      @for (item of lstOrg; track $index) {\n                        <nz-option [nzLabel]=\"item.TreeNodeName!\" [nzValue]=\"item.App_Org_Id\"></nz-option>\n                      }\n                    </nz-select>\n                  </nz-input-group>\n                </nz-form-control>\n              </nz-form-item>\n            }\n\n            <div nz-flex nzVertical=\"true\" nzGap=\"4px\" style=\"margin-top: 8px\">\n              <button nz-button [nzType]=\"'primary'\" nzSize=\"large\" [nzLoading]=\"isLoading\" nzBlock class=\"submit-btn\">\n                {{ \"LOGIN\" | translate }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;height:100vh;width:100vw;overflow:hidden}.login-wrapper{--page-bg-light: #f0f2f5;--page-bg-dark: #141414;--form-position: flex-end;--form-offset-x: 10vw;--glass-blur: 10px;--glass-bg-light: rgba(255, 255, 255, .25);--glass-border-light: rgba(255, 255, 255, .5);--glass-bg-dark: rgba(10, 10, 10, .45);--glass-border-dark: rgba(255, 255, 255, .15);display:flex;justify-content:var(--form-position);align-items:center;height:100vh;position:relative;padding:0 var(--form-offset-x);--page-bg: var(--page-bg-light);--form-bg: var(--glass-bg-light);--form-border: var(--glass-border-light);--text-color: #1a1a1a;--input-bg: rgba(255, 255, 255, .6);--input-text: #333333;--input-border: rgba(0, 0, 0, .15);--autofill-bg: #ffffff;--shadow-color: rgba(0, 0, 0, .15);--icon-color: #595959;background-color:var(--page-bg);transition:all .3s ease}.login-wrapper.dark-theme{--page-bg: var(--page-bg-dark);--form-bg: var(--glass-bg-dark);--form-border: var(--glass-border-dark);--text-color: rgba(255, 255, 255, .85);--input-bg: rgba(0, 0, 0, .3);--input-text: rgba(255, 255, 255, .85);--input-border: rgba(255, 255, 255, .2);--autofill-bg: #2a2a2a;--shadow-color: rgba(0, 0, 0, .5);--icon-color: #bfbfbf}.login-wrapper.dark-theme ::ng-deep .ant-input,.login-wrapper.dark-theme ::ng-deep .ant-input-affix-wrapper{background-color:var(--input-bg)!important;color:var(--input-text)!important;border-color:var(--input-border)!important}.login-wrapper.dark-theme ::ng-deep .ant-input::placeholder{color:#fff9}.login-wrapper.dark-theme ::ng-deep .ant-select-selector{background-color:transparent!important;color:var(--input-text)!important}.login-wrapper.dark-theme ::ng-deep .ant-select-selection-placeholder{color:#fff9!important}.login-wrapper.dark-theme ::ng-deep .ant-input-prefix i,.login-wrapper.dark-theme ::ng-deep .ant-input-suffix i{color:var(--icon-color)!important}.login-wrapper.dark-theme .logo-img{filter:brightness(0) invert(1) hue-rotate(180deg) saturate(3);opacity:.85}.form-container{position:relative;z-index:1;width:clamp(320px,90vw,420px);background-color:var(--form-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));box-shadow:0 12px 40px var(--shadow-color);padding:40px 30px;border-radius:20px;border:1px solid var(--form-border);transition:all .4s cubic-bezier(.25,.8,.25,1)}.theme-toggle{position:absolute;top:24px;right:24px;z-index:10;font-size:22px;color:var(--text-color);background:#fff3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--form-border);cursor:pointer}.theme-toggle:hover{color:#1890ff;background:#ffffff4d;transform:scale(1.05)}.logo-img{max-width:220px;width:100%;object-fit:contain;filter:drop-shadow(0px 4px 6px rgba(0,0,0,.1))}.system-title{font-weight:700;font-size:22px;color:var(--text-color);margin:0;transition:color .3s ease;text-shadow:0px 2px 4px rgba(0,0,0,.1)}.bg-image{position:absolute;top:0;left:0;width:100vw;height:100vh;object-fit:cover;object-position:center;z-index:0;pointer-events:none;animation:fadeIn .8s ease-in-out}@keyframes fadeIn{0%{opacity:.5}to{opacity:1}}::ng-deep .login-form .ant-input-affix-wrapper{background-color:var(--input-bg)!important;border:1px solid var(--input-border)!important;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:10px;padding:8px 12px;transition:all .3s ease}::ng-deep .login-form .ant-input-affix-wrapper:focus,::ng-deep .login-form .ant-input-affix-wrapper:focus-within{box-shadow:0 0 0 2px #1890ff33!important;border-color:#1890ff!important}::ng-deep .login-form .ant-input{background-color:transparent!important;border:none!important;box-shadow:none!important;color:var(--input-text)!important}::ng-deep .login-form .ant-input:-webkit-autofill,::ng-deep .login-form .ant-input:-webkit-autofill:hover,::ng-deep .login-form .ant-input:-webkit-autofill:focus,::ng-deep .login-form .ant-input:-webkit-autofill:active{-webkit-box-shadow:0 0 0px 1000px var(--autofill-bg) inset!important;-webkit-text-fill-color:var(--input-text)!important;font-family:inherit;transition:background-color 5000s ease-in-out 0s}::ng-deep .login-form .ant-btn{border-radius:10px}::ng-deep .login-form .org-select .ant-input-group{display:flex;align-items:center;padding-left:11px}::ng-deep .login-form .submit-btn{font-weight:600;letter-spacing:.5px;margin-top:10px;height:44px;border:none;box-shadow:0 4px 15px #1890ff66;transition:all .3s}::ng-deep .login-form .submit-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #1890ff99}\n"] }]
         }] });
 
+const URLs$f = {
+    getById: '/api/App_Module/GetById',
+    getList: '/api/App_Module/GetList',
+    getPaging: '/api/App_Module/GetPaging',
+    addOrEdit: '/api/App_Module/AddOrEdit',
+    delete: '/api/App_Module/Delete',
+};
+class App_ModuleService extends HTTPService {
+    getById(id) {
+        let pr = new HttpParams().append('id', id);
+        return this.getParams(AppGlobals.apiEndpoint + URLs$f.getById, pr);
+    }
+    getList(filter) {
+        return this.postData(AppGlobals.apiEndpoint + URLs$f.getList, filter);
+    }
+    getPaging(filter) {
+        return this.postData(AppGlobals.apiEndpoint + URLs$f.getPaging, filter);
+    }
+    addOrEdit(obj) {
+        return this.postData(AppGlobals.apiEndpoint + URLs$f.addOrEdit, obj);
+    }
+    delete(id) {
+        const params = new HttpParams().append('id', id);
+        return this.postParams(AppGlobals.apiEndpoint + URLs$f.delete, params);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: App_ModuleService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: App_ModuleService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: App_ModuleService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class App_Module {
+    // #region properties
+    App_Module_Id;
+    CreatedDate;
+    CreatedUser;
+    UpdatedDate;
+    UpdatedUser;
+    IsActive;
+    Name;
+    Icon;
+    IconFileId;
+    OrderValue;
+    // #endregion properties
+    constructor(obj) {
+        obj = obj || {};
+        this.App_Module_Id = obj.App_Module_Id || '';
+        this.CreatedDate = obj.CreatedDate || null;
+        this.CreatedUser = obj.CreatedUser || '';
+        this.UpdatedDate = obj.UpdatedDate || null;
+        this.UpdatedUser = obj.UpdatedUser || '';
+        this.IsActive = obj.IsActive || false;
+        this.Name = obj.Name || '';
+        this.Icon = obj.Icon || '';
+        this.IconFileId = obj.IconFileId || '';
+        this.OrderValue = obj.OrderValue || null;
+    }
+}
+class App_ModuleFilter extends GridFilter {
+    IsActive;
+    constructor() {
+        super();
+        this.OrderOption.FieldName = 'App_Module_Id';
+        this.OrderOption.Direction = 'ascend';
+    }
+}
+
+class ModuleSelectComponent extends BaseComponent {
+    service = inject(App_ModuleService);
+    _router = inject(Router);
+    lstModule = [];
+    ngOnInit() {
+        setTimeout(() => {
+            LayoutComponent.noShowSideMenu = true;
+            LayoutComponent.noShowBreadcrumb = true;
+            LayoutComponent.noShowHeaderMenu = true;
+        });
+        const f = new App_ModuleFilter();
+        f.IsActive = true;
+        this.service.getList(f).then((res) => (this.lstModule = res.Data || []));
+    }
+    ngOnDestroy() {
+        setTimeout(() => {
+            LayoutComponent.noShowSideMenu = false;
+            LayoutComponent.noShowBreadcrumb = false;
+            LayoutComponent.noShowHeaderMenu = false;
+        });
+    }
+    selectModule(module) {
+        console.log(`navigateByUrl: /module/${module.App_Module_Id}`);
+        this._router.navigateByUrl(`/module/${module.App_Module_Id}`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ModuleSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ModuleSelectComponent, isStandalone: true, selector: "app-module-select", usesInheritance: true, ngImport: i0, template: "<div class=\"module-select-container\">\n  <div class=\"module-select-wrapper\">\n    <div nz-row [nzGutter]=\"[24, 24]\" nzJustify=\"center\">\n      @for (module of lstModule; track module.App_Module_Id) {\n        <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"6\">\n          <nz-card nzHoverable class=\"module-card glass-panel\" (click)=\"selectModule(module)\">\n            <div class=\"card-content\">\n              <!-- Hi\u1EC3n th\u1ECB Icon, n\u1EBFu ch\u01B0a c\u00F3 d\u1EEF li\u1EC7u s\u1EBD fallback v\u1EC1 icon 'appstore' -->\n              <nz-icon [nzType]=\"module.Icon || 'appstore'\" nzTheme=\"outline\" class=\"module-icon\"></nz-icon>\n              <h3 class=\"module-name\">{{ module.Name }}</h3>\n            </div>\n          </nz-card>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;--mod-bg-container: linear-gradient(135deg, #e2e8f0 0%, #f1f5f9 100%);--mod-bg-card: #ffffff;--mod-border: #cbd5e1;--mod-primary: #3b82f6;--mod-text-name: #334155;--mod-text-icon: #64748b}.module-select-container{min-height:calc(100vh - 100px);display:flex;align-items:flex-start;padding-top:15vh;justify-content:center;padding-left:24px;padding-right:24px}.module-select-wrapper{width:100%;max-width:1200px}::ng-deep .ant-card.module-card{background:var(--mod-bg-card)!important;border:2px solid var(--mod-border)!important;border-radius:16px!important;box-shadow:0 8px 24px #959da526!important;transition:all .3s cubic-bezier(.25,.8,.25,1)!important;cursor:pointer;overflow:hidden}::ng-deep .ant-card.module-card .ant-card-body{padding:0!important}::ng-deep .ant-card.module-card:hover{transform:translateY(-8px)!important;border-color:var(--mod-primary)!important;box-shadow:0 16px 32px #3b82f640!important}::ng-deep .ant-card.module-card:hover .module-icon,::ng-deep .ant-card.module-card:hover .module-name{color:var(--mod-primary)!important}::ng-deep .ant-card.module-card:hover .module-icon{transform:scale(1.1)}.card-content{padding:24px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;gap:20px!important;width:100%;height:100%}.module-icon{font-size:84px!important;line-height:1!important;color:var(--mod-text-icon);transition:all .3s ease;display:inline-flex}.module-name{margin:0;font-size:18px;font-weight:600;color:var(--mod-text-name);transition:color .3s ease;text-transform:capitalize;line-height:1.4}\n"], dependencies: [{ kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i2$4.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { 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: NzTypographyModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ModuleSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-module-select', standalone: true, imports: [NzCardModule, NzGridModule, NzIconModule, NzTypographyModule], template: "<div class=\"module-select-container\">\n  <div class=\"module-select-wrapper\">\n    <div nz-row [nzGutter]=\"[24, 24]\" nzJustify=\"center\">\n      @for (module of lstModule; track module.App_Module_Id) {\n        <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"6\">\n          <nz-card nzHoverable class=\"module-card glass-panel\" (click)=\"selectModule(module)\">\n            <div class=\"card-content\">\n              <!-- Hi\u1EC3n th\u1ECB Icon, n\u1EBFu ch\u01B0a c\u00F3 d\u1EEF li\u1EC7u s\u1EBD fallback v\u1EC1 icon 'appstore' -->\n              <nz-icon [nzType]=\"module.Icon || 'appstore'\" nzTheme=\"outline\" class=\"module-icon\"></nz-icon>\n              <h3 class=\"module-name\">{{ module.Name }}</h3>\n            </div>\n          </nz-card>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;--mod-bg-container: linear-gradient(135deg, #e2e8f0 0%, #f1f5f9 100%);--mod-bg-card: #ffffff;--mod-border: #cbd5e1;--mod-primary: #3b82f6;--mod-text-name: #334155;--mod-text-icon: #64748b}.module-select-container{min-height:calc(100vh - 100px);display:flex;align-items:flex-start;padding-top:15vh;justify-content:center;padding-left:24px;padding-right:24px}.module-select-wrapper{width:100%;max-width:1200px}::ng-deep .ant-card.module-card{background:var(--mod-bg-card)!important;border:2px solid var(--mod-border)!important;border-radius:16px!important;box-shadow:0 8px 24px #959da526!important;transition:all .3s cubic-bezier(.25,.8,.25,1)!important;cursor:pointer;overflow:hidden}::ng-deep .ant-card.module-card .ant-card-body{padding:0!important}::ng-deep .ant-card.module-card:hover{transform:translateY(-8px)!important;border-color:var(--mod-primary)!important;box-shadow:0 16px 32px #3b82f640!important}::ng-deep .ant-card.module-card:hover .module-icon,::ng-deep .ant-card.module-card:hover .module-name{color:var(--mod-primary)!important}::ng-deep .ant-card.module-card:hover .module-icon{transform:scale(1.1)}.card-content{padding:24px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;gap:20px!important;width:100%;height:100%}.module-icon{font-size:84px!important;line-height:1!important;color:var(--mod-text-icon);transition:all .3s ease;display:inline-flex}.module-name{margin:0;font-size:18px;font-weight:600;color:var(--mod-text-name);transition:color .3s ease;text-transform:capitalize;line-height:1.4}\n"] }]
+        }] });
+
 class DicDomainListComponent extends BaseComponent {
     service = inject(DicDomainService);
     data;
@@ -7528,11 +7715,13 @@ class App_Menu {
     TreeNodeName;
     TreeNodeOrder;
     IsHeaderMenu;
+    App_Module_Id;
     // #endregion properties
     Level;
     Open;
     SubMenu;
     ParentName;
+    ModuleName;
     HasEditMenu; // for role menu ref
     AllSubHasEditMenu;
     SomeSubHasEditMenu;
@@ -7553,11 +7742,13 @@ class App_Menu {
         this.IsHidden = obj.IsHidden || false;
         this.TreeNodeOrder = obj.TreeNodeOrder || '';
         this.IsHeaderMenu = obj.IsHeaderMenu || false;
+        this.App_Module_Id = obj.App_Module_Id || '';
         this.TreeNodeName = obj.TreeNodeName;
         this.Level = obj.Level;
         this.Open = obj.Open;
         this.SubMenu = obj.SubMenu;
         this.ParentName = obj.ParentName;
+        this.ModuleName = obj.ModuleName;
         this.HasEditMenu = obj.HasEditMenu;
         this.AllSubHasEditMenu = obj.AllSubHasEditMenu;
         this.SomeSubHasEditMenu = obj.SomeSubHasEditMenu;
@@ -7656,22 +7847,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
 
 class MenuListComponent extends BaseComponent {
     service = inject(MenuService);
+    moduleService = inject(App_ModuleService);
     Breadcrumb = Breadcrumb;
     data;
     filter = new MenuFilter();
     selectedMenu;
-    listOfData = Array.from({ length: 100 }).map((_, i) => ({
-        name: `Edward King ${i}`,
-        age: 32,
-        address: `London`,
-    }));
     isDropdownVisible = false; // dùng cho ô search domain code để autofocus
     isDropdownParentNameVisible = false;
     treeMenu = [];
+    lstModule = [];
     ngOnInit() {
         this.filter = this.AppGlobals.getFilter(MenuFilter.name) || new MenuFilter();
         this.getData();
         this.getTreeMenu();
+        this.moduleService.getList({}).then((res) => (this.lstModule = res.Data || []));
         Breadcrumb.lstBreadcrumb = [
             {
                 Name: 'Menu',
@@ -7747,7 +7936,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]\">\n  <div nz-col nzSpan=\"24\">\n    <div nz-flex nzJustify=\"end\">\n      <div nz-flex nzGap=\"small\">\n        <button-add (click)=\"edit(null)\"></button-add>\n        <button-search (click)=\"search()\"></button-search>\n      </div>\n    </div>\n  </div>\n  <div nz-col nzSpan=\"24\">\n    <nz-table\n      #table\n      [nzData]=\"this.data?.LstItem || []\"\n      [nzBordered]=\"true\"\n      [nzSize]=\"'small'\"\n      [nzShowPagination]=\"false\"\n      [nzFrontPagination]=\"false\"\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\n    >\n      <ng-template #showTotalTpl let-total let-range=\"range\">\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\n      </ng-template>\n      <thead>\n        <tr>\n          <th nzWidth=\"50px\">#</th>\n          <th>T\u00EAn</th>\n          <th>URL</th>\n          <th nzWidth=\"90px\">Icon</th>\n          <th nzWidth=\"90px\">Order</th>\n          <th>Menu cha</th>\n          <th nzWidth=\"110px\">Header menu</th>\n          <th nzWidth=\"80px\">Hi\u1EC7u l\u1EF1c</th>\n          <th nzWidth=\"75px\" nzRight>Thao t\u00E1c</th>\n        </tr>\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\n          <th></th>\n          <th>\n            <extend-input\n              [size]=\"'small'\"\n              [showClear]=\"true\"\n              [(_ngModel)]=\"filter.Name\"\n              (onclickClearIcon)=\"search()\"\n            ></extend-input>\n          </th>\n          <th></th>\n          <th></th>\n          <th></th>\n          <th>\n            <extend-input\n              [size]=\"'small'\"\n              [showClear]=\"true\"\n              [(_ngModel)]=\"filter.ParentName\"\n              (onclickClearIcon)=\"search()\"\n            ></extend-input>\n          </th>\n          <th class=\"center\">\n            <extend-checkbox-3-value\n              [(_ngModel)]=\"filter.IsHeaderMenu\"\n              (_ngModelChange)=\"search()\"\n            ></extend-checkbox-3-value>\n          </th>\n          <th></th>\n          <th class=\"center\" nzRight>\n            <icon-add (click)=\"add()\"></icon-add>\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        @for (row of table.data; track $index; let i = $index) {\n          @if (selectedMenu != row) {\n            <tr (click)=\"selectedMenu = row\">\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\n              <td>{{ row.TreeNodeName }}</td>\n              <td>{{ row.Url }}</td>\n              <td>{{ row.Icon }}</td>\n              <td>{{ row.OrderValue }}</td>\n              <td>{{ row.ParentName }}</td>\n              <td class=\"center\">\n                @if (row.IsHeaderMenu) {\n                  <icon-check></icon-check>\n                }\n              </td>\n              <td class=\"center\">\n                @if (row.IsActive) {\n                  <icon-check></icon-check>\n                }\n              </td>\n              <td class=\"center\" nzRight>\n                <icon-edit (click)=\"edit(row)\"></icon-edit>\n                <box [width]=\"4\"></box>\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\n              </td>\n            </tr>\n          } @else {\n            <tr (keyup.enter)=\"save()\" class=\"selected\">\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\n              <td>\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Name\"></extend-input>\n              </td>\n              <td>\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Url\"></extend-input>\n              </td>\n              <td>\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Icon\"></extend-input>\n              </td>\n              <td>\n                <extend-input-number [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.OrderValue\"></extend-input-number>\n              </td>\n              <td>\n                <nz-tree-select\n                  class=\"full-width\"\n                  [nzNodes]=\"treeMenu\"\n                  nzShowSearch\n                  nzPlaceHolder=\" \"\n                  [nzSize]=\"'small'\"\n                  [nzDropdownMatchSelectWidth]=\"false\"\n                  [(ngModel)]=\"selectedMenu.ParentId\"\n                ></nz-tree-select>\n              </td>\n              <td class=\"center\">\n                <extend-checkbox [(_ngModel)]=\"selectedMenu.IsHeaderMenu\"></extend-checkbox>\n              </td>\n              <td class=\"center\">\n                <extend-checkbox [(_ngModel)]=\"selectedMenu.IsActive\"></extend-checkbox>\n              </td>\n              <td class=\"center\">\n                <icon-save (click)=\"save()\"></icon-save>\n                <box [width]=\"4\"></box>\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\n              </td>\n            </tr>\n          }\n        }\n      </tbody>\n    </nz-table>\n  </div>\n  <div nz-col nzSpan=\"24\">\n    <div nz-flex nzJustify=\"end\">\n      <nz-pagination\n        [nzSize]=\"'small'\"\n        [nzPageIndex]=\"filter.PageIndex + 1\"\n        [nzPageSize]=\"filter.PageSize\"\n        [nzTotal]=\"data?.TotalCount || 0\"\n        [nzShowSizeChanger]=\"true\"\n        [nzShowTotal]=\"showTotalTpl\"\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\n      >\n      </nz-pagination>\n\n      <ng-template #showTotalTpl let-total let-range=\"range\">\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\n      </ng-template>\n    </div>\n  </div>\n</div>\n", 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$6.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", inputs: ["size"] }, { kind: "component", type: ButtonAdd, selector: "button-add", inputs: ["size"] }, { 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$5.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i4.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i4.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i4.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i4.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i4.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i4.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "directive", type: i4.NzCellFixedDirective, selector: "td[nzRight],th[nzRight],td[nzLeft],th[nzLeft]", inputs: ["nzRight", "nzLeft", "colspan", "colSpan"] }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i5$2.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "component", type: IconAdd, selector: "icon-add", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconEdit, selector: "icon-edit", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconCheck, selector: "icon-check", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconSave, selector: "icon-save", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "component", type: ExtendInputNumber, selector: "extend-input-number", inputs: ["label", "placeHolder", "labelAlign", "floatingLabel", "hiddenUpDown", "labelSpan", "labelFlex", "inputFlex", "disabled", "required", "noBottom", "size", "min", "max", "precision", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "isSubmited", "separatorType", "formData", "controlName", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "component", type: ExtendCheckbox3Value, selector: "extend-checkbox-3-value", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: MenuListComponent, isStandalone: true, selector: "app-menu-list", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\n  <div nz-col nzSpan=\"24\">\n    <div nz-flex nzJustify=\"end\">\n      <div nz-flex nzGap=\"small\">\n        <button-add (click)=\"edit(null)\"></button-add>\n        <button-search (click)=\"search()\"></button-search>\n      </div>\n    </div>\n  </div>\n  <div nz-col nzSpan=\"24\">\n    <nz-table\n      #table\n      [nzData]=\"this.data?.LstItem || []\"\n      [nzBordered]=\"true\"\n      [nzSize]=\"'small'\"\n      [nzShowPagination]=\"false\"\n      [nzFrontPagination]=\"false\"\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\n    >\n      <ng-template #showTotalTpl let-total let-range=\"range\">\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\n      </ng-template>\n      <thead>\n        <tr>\n          <th nzWidth=\"50px\">#</th>\n          <th>T\u00EAn</th>\n          <th>URL</th>\n          <th nzWidth=\"90px\">Icon</th>\n          <th nzWidth=\"90px\">Order</th>\n          <th>Menu cha</th>\n          <th nzWidth=\"110px\">Header menu</th>\n          <th nzWidth=\"110px\">Module</th>\n          <th nzWidth=\"80px\">Hi\u1EC7u l\u1EF1c</th>\n          <th nzWidth=\"75px\" nzRight>Thao t\u00E1c</th>\n        </tr>\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\n          <th></th>\n          <th>\n            <extend-input\n              [size]=\"'small'\"\n              [showClear]=\"true\"\n              [(_ngModel)]=\"filter.Name\"\n              (onclickClearIcon)=\"search()\"\n            ></extend-input>\n          </th>\n          <th></th>\n          <th></th>\n          <th></th>\n          <th>\n            <extend-input\n              [size]=\"'small'\"\n              [showClear]=\"true\"\n              [(_ngModel)]=\"filter.ParentName\"\n              (onclickClearIcon)=\"search()\"\n            ></extend-input>\n          </th>\n          <th class=\"center\">\n            <extend-checkbox-3-value\n              [(_ngModel)]=\"filter.IsHeaderMenu\"\n              (_ngModelChange)=\"search()\"\n            ></extend-checkbox-3-value>\n          </th>\n          <th></th>\n          <th></th>\n          <th class=\"center\" nzRight>\n            <icon-add (click)=\"add()\"></icon-add>\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        @for (row of table.data; track $index; let i = $index) {\n          @if (selectedMenu != row) {\n            <tr (click)=\"selectedMenu = row\">\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\n              <td>{{ row.TreeNodeName }}</td>\n              <td>{{ row.Url }}</td>\n              <td>{{ row.Icon }}</td>\n              <td>{{ row.OrderValue }}</td>\n              <td>{{ row.ParentName }}</td>\n              <td class=\"center\">\n                @if (row.IsHeaderMenu) {\n                  <icon-check></icon-check>\n                }\n              </td>\n              <td>{{ row.ModuleName }}</td>\n              <td class=\"center\">\n                @if (row.IsActive) {\n                  <icon-check></icon-check>\n                }\n              </td>\n              <td class=\"center\" nzRight>\n                <icon-edit (click)=\"edit(row)\"></icon-edit>\n                <box [width]=\"4\"></box>\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\n              </td>\n            </tr>\n          } @else {\n            <tr (keyup.enter)=\"save()\" class=\"selected\">\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\n              <td>\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Name\"></extend-input>\n              </td>\n              <td>\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Url\"></extend-input>\n              </td>\n              <td>\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Icon\"></extend-input>\n              </td>\n              <td>\n                <extend-input-number [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.OrderValue\"></extend-input-number>\n              </td>\n              <td>\n                <nz-tree-select\n                  class=\"full-width\"\n                  [nzNodes]=\"treeMenu\"\n                  nzShowSearch\n                  nzPlaceHolder=\" \"\n                  [nzSize]=\"'small'\"\n                  [nzDropdownMatchSelectWidth]=\"false\"\n                  [(ngModel)]=\"selectedMenu.ParentId\"\n                ></nz-tree-select>\n              </td>\n              <td class=\"center\">\n                <extend-checkbox [(_ngModel)]=\"selectedMenu.IsHeaderMenu\"></extend-checkbox>\n              </td>\n              <td>\n                <extend-select\n                  [lstItem]=\"lstModule\"\n                  [valueField]=\"'App_Module_Id'\"\n                  [displayField]=\"'Name'\"\n                  [(_ngModel)]=\"selectedMenu.App_Module_Id\"\n                ></extend-select>\n              </td>\n              <td class=\"center\">\n                <extend-checkbox [(_ngModel)]=\"selectedMenu.IsActive\"></extend-checkbox>\n              </td>\n              <td class=\"center\">\n                <icon-save (click)=\"save()\"></icon-save>\n                <box [width]=\"4\"></box>\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\n              </td>\n            </tr>\n          }\n        }\n      </tbody>\n    </nz-table>\n  </div>\n  <div nz-col nzSpan=\"24\">\n    <div nz-flex nzJustify=\"end\">\n      <nz-pagination\n        [nzSize]=\"'small'\"\n        [nzPageIndex]=\"filter.PageIndex + 1\"\n        [nzPageSize]=\"filter.PageSize\"\n        [nzTotal]=\"data?.TotalCount || 0\"\n        [nzShowSizeChanger]=\"true\"\n        [nzShowTotal]=\"showTotalTpl\"\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\n      >\n      </nz-pagination>\n\n      <ng-template #showTotalTpl let-total let-range=\"range\">\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\n      </ng-template>\n    </div>\n  </div>\n</div>\n", 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$6.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", inputs: ["size"] }, { kind: "component", type: ButtonAdd, selector: "button-add", inputs: ["size"] }, { 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$5.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i4.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i4.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i4.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i4.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i4.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i4.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "directive", type: i4.NzCellFixedDirective, selector: "td[nzRight],th[nzRight],td[nzLeft],th[nzLeft]", inputs: ["nzRight", "nzLeft", "colspan", "colSpan"] }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i5$2.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "component", type: 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"] }, { kind: "component", type: ExtendSelectComponent, selector: "extend-select", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "dropdownMatchSelectWidth", "labelSpan", "labelFlex", "disabled", "required", "noBottom", "multiple", "showSelectAll", "maxTagCount", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "lstItem", "displayField", "displayFields", "info", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "itemChange", "onFocus"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MenuListComponent, decorators: [{
             type: Component,
@@ -7772,7 +7961,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         ExtendCheckbox,
                         Box,
                         ExtendCheckbox3Value,
-                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\n  <div nz-col nzSpan=\"24\">\n    <div nz-flex nzJustify=\"end\">\n      <div nz-flex nzGap=\"small\">\n        <button-add (click)=\"edit(null)\"></button-add>\n        <button-search (click)=\"search()\"></button-search>\n      </div>\n    </div>\n  </div>\n  <div nz-col nzSpan=\"24\">\n    <nz-table\n      #table\n      [nzData]=\"this.data?.LstItem || []\"\n      [nzBordered]=\"true\"\n      [nzSize]=\"'small'\"\n      [nzShowPagination]=\"false\"\n      [nzFrontPagination]=\"false\"\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\n    >\n      <ng-template #showTotalTpl let-total let-range=\"range\">\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\n      </ng-template>\n      <thead>\n        <tr>\n          <th nzWidth=\"50px\">#</th>\n          <th>T\u00EAn</th>\n          <th>URL</th>\n          <th nzWidth=\"90px\">Icon</th>\n          <th nzWidth=\"90px\">Order</th>\n          <th>Menu cha</th>\n          <th nzWidth=\"110px\">Header menu</th>\n          <th nzWidth=\"80px\">Hi\u1EC7u l\u1EF1c</th>\n          <th nzWidth=\"75px\" nzRight>Thao t\u00E1c</th>\n        </tr>\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\n          <th></th>\n          <th>\n            <extend-input\n              [size]=\"'small'\"\n              [showClear]=\"true\"\n              [(_ngModel)]=\"filter.Name\"\n              (onclickClearIcon)=\"search()\"\n            ></extend-input>\n          </th>\n          <th></th>\n          <th></th>\n          <th></th>\n          <th>\n            <extend-input\n              [size]=\"'small'\"\n              [showClear]=\"true\"\n              [(_ngModel)]=\"filter.ParentName\"\n              (onclickClearIcon)=\"search()\"\n            ></extend-input>\n          </th>\n          <th class=\"center\">\n            <extend-checkbox-3-value\n              [(_ngModel)]=\"filter.IsHeaderMenu\"\n              (_ngModelChange)=\"search()\"\n            ></extend-checkbox-3-value>\n          </th>\n          <th></th>\n          <th class=\"center\" nzRight>\n            <icon-add (click)=\"add()\"></icon-add>\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        @for (row of table.data; track $index; let i = $index) {\n          @if (selectedMenu != row) {\n            <tr (click)=\"selectedMenu = row\">\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\n              <td>{{ row.TreeNodeName }}</td>\n              <td>{{ row.Url }}</td>\n              <td>{{ row.Icon }}</td>\n              <td>{{ row.OrderValue }}</td>\n              <td>{{ row.ParentName }}</td>\n              <td class=\"center\">\n                @if (row.IsHeaderMenu) {\n                  <icon-check></icon-check>\n                }\n              </td>\n              <td class=\"center\">\n                @if (row.IsActive) {\n                  <icon-check></icon-check>\n                }\n              </td>\n              <td class=\"center\" nzRight>\n                <icon-edit (click)=\"edit(row)\"></icon-edit>\n                <box [width]=\"4\"></box>\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\n              </td>\n            </tr>\n          } @else {\n            <tr (keyup.enter)=\"save()\" class=\"selected\">\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\n              <td>\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Name\"></extend-input>\n              </td>\n              <td>\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Url\"></extend-input>\n              </td>\n              <td>\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Icon\"></extend-input>\n              </td>\n              <td>\n                <extend-input-number [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.OrderValue\"></extend-input-number>\n              </td>\n              <td>\n                <nz-tree-select\n                  class=\"full-width\"\n                  [nzNodes]=\"treeMenu\"\n                  nzShowSearch\n                  nzPlaceHolder=\" \"\n                  [nzSize]=\"'small'\"\n                  [nzDropdownMatchSelectWidth]=\"false\"\n                  [(ngModel)]=\"selectedMenu.ParentId\"\n                ></nz-tree-select>\n              </td>\n              <td class=\"center\">\n                <extend-checkbox [(_ngModel)]=\"selectedMenu.IsHeaderMenu\"></extend-checkbox>\n              </td>\n              <td class=\"center\">\n                <extend-checkbox [(_ngModel)]=\"selectedMenu.IsActive\"></extend-checkbox>\n              </td>\n              <td class=\"center\">\n                <icon-save (click)=\"save()\"></icon-save>\n                <box [width]=\"4\"></box>\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\n              </td>\n            </tr>\n          }\n        }\n      </tbody>\n    </nz-table>\n  </div>\n  <div nz-col nzSpan=\"24\">\n    <div nz-flex nzJustify=\"end\">\n      <nz-pagination\n        [nzSize]=\"'small'\"\n        [nzPageIndex]=\"filter.PageIndex + 1\"\n        [nzPageSize]=\"filter.PageSize\"\n        [nzTotal]=\"data?.TotalCount || 0\"\n        [nzShowSizeChanger]=\"true\"\n        [nzShowTotal]=\"showTotalTpl\"\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\n      >\n      </nz-pagination>\n\n      <ng-template #showTotalTpl let-total let-range=\"range\">\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\n      </ng-template>\n    </div>\n  </div>\n</div>\n" }]
+                        ExtendSelectComponent,
+                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\n  <div nz-col nzSpan=\"24\">\n    <div nz-flex nzJustify=\"end\">\n      <div nz-flex nzGap=\"small\">\n        <button-add (click)=\"edit(null)\"></button-add>\n        <button-search (click)=\"search()\"></button-search>\n      </div>\n    </div>\n  </div>\n  <div nz-col nzSpan=\"24\">\n    <nz-table\n      #table\n      [nzData]=\"this.data?.LstItem || []\"\n      [nzBordered]=\"true\"\n      [nzSize]=\"'small'\"\n      [nzShowPagination]=\"false\"\n      [nzFrontPagination]=\"false\"\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\n    >\n      <ng-template #showTotalTpl let-total let-range=\"range\">\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\n      </ng-template>\n      <thead>\n        <tr>\n          <th nzWidth=\"50px\">#</th>\n          <th>T\u00EAn</th>\n          <th>URL</th>\n          <th nzWidth=\"90px\">Icon</th>\n          <th nzWidth=\"90px\">Order</th>\n          <th>Menu cha</th>\n          <th nzWidth=\"110px\">Header menu</th>\n          <th nzWidth=\"110px\">Module</th>\n          <th nzWidth=\"80px\">Hi\u1EC7u l\u1EF1c</th>\n          <th nzWidth=\"75px\" nzRight>Thao t\u00E1c</th>\n        </tr>\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\n          <th></th>\n          <th>\n            <extend-input\n              [size]=\"'small'\"\n              [showClear]=\"true\"\n              [(_ngModel)]=\"filter.Name\"\n              (onclickClearIcon)=\"search()\"\n            ></extend-input>\n          </th>\n          <th></th>\n          <th></th>\n          <th></th>\n          <th>\n            <extend-input\n              [size]=\"'small'\"\n              [showClear]=\"true\"\n              [(_ngModel)]=\"filter.ParentName\"\n              (onclickClearIcon)=\"search()\"\n            ></extend-input>\n          </th>\n          <th class=\"center\">\n            <extend-checkbox-3-value\n              [(_ngModel)]=\"filter.IsHeaderMenu\"\n              (_ngModelChange)=\"search()\"\n            ></extend-checkbox-3-value>\n          </th>\n          <th></th>\n          <th></th>\n          <th class=\"center\" nzRight>\n            <icon-add (click)=\"add()\"></icon-add>\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        @for (row of table.data; track $index; let i = $index) {\n          @if (selectedMenu != row) {\n            <tr (click)=\"selectedMenu = row\">\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\n              <td>{{ row.TreeNodeName }}</td>\n              <td>{{ row.Url }}</td>\n              <td>{{ row.Icon }}</td>\n              <td>{{ row.OrderValue }}</td>\n              <td>{{ row.ParentName }}</td>\n              <td class=\"center\">\n                @if (row.IsHeaderMenu) {\n                  <icon-check></icon-check>\n                }\n              </td>\n              <td>{{ row.ModuleName }}</td>\n              <td class=\"center\">\n                @if (row.IsActive) {\n                  <icon-check></icon-check>\n                }\n              </td>\n              <td class=\"center\" nzRight>\n                <icon-edit (click)=\"edit(row)\"></icon-edit>\n                <box [width]=\"4\"></box>\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\n              </td>\n            </tr>\n          } @else {\n            <tr (keyup.enter)=\"save()\" class=\"selected\">\n              <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\n              <td>\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Name\"></extend-input>\n              </td>\n              <td>\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Url\"></extend-input>\n              </td>\n              <td>\n                <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Icon\"></extend-input>\n              </td>\n              <td>\n                <extend-input-number [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.OrderValue\"></extend-input-number>\n              </td>\n              <td>\n                <nz-tree-select\n                  class=\"full-width\"\n                  [nzNodes]=\"treeMenu\"\n                  nzShowSearch\n                  nzPlaceHolder=\" \"\n                  [nzSize]=\"'small'\"\n                  [nzDropdownMatchSelectWidth]=\"false\"\n                  [(ngModel)]=\"selectedMenu.ParentId\"\n                ></nz-tree-select>\n              </td>\n              <td class=\"center\">\n                <extend-checkbox [(_ngModel)]=\"selectedMenu.IsHeaderMenu\"></extend-checkbox>\n              </td>\n              <td>\n                <extend-select\n                  [lstItem]=\"lstModule\"\n                  [valueField]=\"'App_Module_Id'\"\n                  [displayField]=\"'Name'\"\n                  [(_ngModel)]=\"selectedMenu.App_Module_Id\"\n                ></extend-select>\n              </td>\n              <td class=\"center\">\n                <extend-checkbox [(_ngModel)]=\"selectedMenu.IsActive\"></extend-checkbox>\n              </td>\n              <td class=\"center\">\n                <icon-save (click)=\"save()\"></icon-save>\n                <box [width]=\"4\"></box>\n                <icon-delete (click)=\"delete(row)\"></icon-delete>\n              </td>\n            </tr>\n          }\n        }\n      </tbody>\n    </nz-table>\n  </div>\n  <div nz-col nzSpan=\"24\">\n    <div nz-flex nzJustify=\"end\">\n      <nz-pagination\n        [nzSize]=\"'small'\"\n        [nzPageIndex]=\"filter.PageIndex + 1\"\n        [nzPageSize]=\"filter.PageSize\"\n        [nzTotal]=\"data?.TotalCount || 0\"\n        [nzShowSizeChanger]=\"true\"\n        [nzShowTotal]=\"showTotalTpl\"\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\n      >\n      </nz-pagination>\n\n      <ng-template #showTotalTpl let-total let-range=\"range\">\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\n      </ng-template>\n    </div>\n  </div>\n</div>\n" }]
         }] });
 
 const URLs$d = {
@@ -12891,6 +13081,140 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 args: ['myTree']
             }] } });
 
+class App_ModuleListComponent extends BaseComponent {
+    service = inject(App_ModuleService);
+    data = new PagingData();
+    filter = new App_ModuleFilter();
+    drawerVisible = false;
+    editItem = new App_Module();
+    ngOnInit() {
+        this.filter = this.AppGlobals.getFilter(App_ModuleFilter.name) || new App_ModuleFilter();
+        this.getData();
+        Breadcrumb.lstBreadcrumb = [
+            {
+                Name: 'App_Module',
+                Click: () => this.getData(),
+            },
+            {
+                Name: 'Danh sách',
+                Click: () => this.getData(),
+            },
+        ];
+    }
+    ngOnDestroy() {
+        this.AppGlobals.setFilter(App_ModuleFilter.name, this.filter);
+        Breadcrumb.lstBreadcrumb = [];
+    }
+    search() {
+        this.filter.PageIndex = 0;
+        this.getData();
+    }
+    getData() {
+        this.service.getPaging(this.filter).then((res) => {
+            this.data = new PagingData(res.Data);
+        }, (err) => this.handleError(err));
+    }
+    edit(item) {
+        if (item?.App_Module_Id) {
+            this.service.getById(item?.App_Module_Id).then((res) => {
+                this.editItem = new App_Module(res.Data);
+                this.drawerVisible = true;
+            }, (err) => this.handleError(err));
+        }
+        else {
+            this.editItem = new App_Module();
+            this.drawerVisible = true;
+        }
+    }
+    async delete(item) {
+        if (await this.confirmDelete()) {
+            if (item.App_Module_Id) {
+                try {
+                    await this.service.delete(item.App_Module_Id);
+                    this.notiService.success(this.translate.instant(this.TranslateKey.DELETE_SUCCESS));
+                    this.getData();
+                }
+                catch (err) {
+                    this.handleError(err);
+                }
+            }
+        }
+    }
+    onQueryParamsChange(pageIndex, pageSize) {
+        this.filter.PageIndex = pageIndex;
+        this.filter.PageSize = pageSize;
+        this.getData();
+    }
+    save() {
+        this.service.addOrEdit(this.editItem).then((res) => {
+            this.success();
+            this.getData();
+            this.drawerVisible = false;
+        }, (err) => this.handleError(err));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: App_ModuleListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: App_ModuleListComponent, isStandalone: true, selector: "app-app-module-list", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\n  <div nz-col nzSpan=\"24\">\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\n      <button-add (click)=\"edit(null)\"></button-add>\n      <button-search (click)=\"search()\"></button-search>\n    </div>\n  </div>\n  <div nz-col nzSpan=\"24\">\n    <nz-table\n      #table\n      [nzData]=\"this.data.LstItem || []\"\n      [nzBordered]=\"true\"\n      [nzSize]=\"'small'\"\n      [nzShowPagination]=\"false\"\n      [nzFrontPagination]=\"false\"\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\n    >\n      <thead>\n        <tr>\n          <th nzWidth=\"50px\">#</th>\n          <th>Name</th>\n          <th>Icon</th>\n          <th>Order Value</th>\n          <th nzWidth=\"75px\" nzRight>Thao t\u00E1c</th>\n        </tr>\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\n          <th></th>\n          <th></th>\n          <th></th>\n          <th></th>\n          <th nzRight></th>\n        </tr>\n      </thead>\n      <tbody>\n        @for (row of table.data; track $index; let i = $index) {\n          <tr>\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\n            <td class=\"link-detail\" (click)=\"edit(row)\">{{ row.Name }}</td>\n            <td>{{ row.Icon }}</td>\n            <td>{{ row.OrderValue }}</td>\n            <td class=\"center\" nzRight>\n              <icon-edit (click)=\"edit(row)\"></icon-edit><box [width]=\"4\"></box>\n              <icon-delete (click)=\"delete(row)\"></icon-delete>\n            </td>\n          </tr>\n        }\n      </tbody>\n    </nz-table>\n  </div>\n\n  <div nz-col [nzSpan]=\"24\">\n    <div nz-flex nzJustify=\"end\">\n      <nz-pagination\n        [nzSize]=\"'small'\"\n        [nzPageIndex]=\"filter.PageIndex + 1\"\n        [nzPageSize]=\"filter.PageSize\"\n        [nzTotal]=\"data.TotalCount || 0\"\n        [nzShowSizeChanger]=\"true\"\n        [nzShowTotal]=\"showTotalTpl\"\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\n      >\n      </nz-pagination>\n      <ng-template #showTotalTpl let-total let-range=\"range\">\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\n      </ng-template>\n    </div>\n  </div>\n</div>\n\n<nz-drawer\n  [nzBodyStyle]=\"{ overflow: 'auto' }\"\n  [nzMaskClosable]=\"false\"\n  [nzWidth]=\"720\"\n  [nzVisible]=\"drawerVisible\"\n  [nzTitle]=\"editItem.App_Module_Id ? 'C\u1EADp nh\u1EADt' : 'Th\u00EAm m\u1EDBi'\"\n  [nzContent]=\"contentTpl\"\n  [nzFooter]=\"footerTpl\"\n  (nzOnClose)=\"drawerVisible = false\"\n>\n  <ng-template #contentTpl>\n    <div nz-row nzGutter=\"16\">\n      <extend-input nz-col nzSpan=\"24\" label=\"Name\" [floatingLabel]=\"false\" [(_ngModel)]=\"editItem.Name\"></extend-input>\n      <extend-input nz-col nzSpan=\"24\" label=\"Icon\" [floatingLabel]=\"false\" [(_ngModel)]=\"editItem.Icon\"></extend-input>\n      <extend-input-number\n        nz-col\n        nzSpan=\"24\"\n        label=\"Order Value\"\n        [floatingLabel]=\"false\"\n        [(_ngModel)]=\"editItem.OrderValue\"\n      ></extend-input-number>\n    </div>\n  </ng-template>\n  <ng-template #footerTpl>\n    <div style=\"float: right\">\n      <button nz-button style=\"margin-right: 8px\" nzType=\"primary\" (click)=\"save()\">L\u01B0u</button>\n      <button nz-button (click)=\"drawerVisible = false\">\u0110\u00F3ng</button>\n    </div>\n  </ng-template>\n</nz-drawer>\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$5.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "component", type: i3$4.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: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "component", type: ButtonAdd, selector: "button-add", inputs: ["size"] }, { kind: "component", type: ButtonSearch, selector: "button-search", inputs: ["size"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i4.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i4.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i4.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i4.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i4.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i4.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "directive", type: i4.NzCellFixedDirective, selector: "td[nzRight],th[nzRight],td[nzLeft],th[nzLeft]", inputs: ["nzRight", "nzLeft", "colspan", "colSpan"] }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i5$2.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "component", type: 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"] }, { 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: App_ModuleListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-app-module-list', imports: [
+                        CommonModule,
+                        NzGridModule,
+                        NzFlexModule,
+                        NzDrawerModule,
+                        NzButtonModule,
+                        ButtonAdd,
+                        ButtonSearch,
+                        NzTableModule,
+                        NzPaginationModule,
+                        IconEdit,
+                        IconDelete,
+                        IconCheck,
+                        ExtendInput,
+                        Box,
+                        ExtendInputNumber,
+                        ExtendDatePicker,
+                        DicDomainSelectComponent,
+                        ExtendTextArea,
+                    ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\n  <div nz-col nzSpan=\"24\">\n    <div nz-flex nzGap=\"small\" nzJustify=\"end\">\n      <button-add (click)=\"edit(null)\"></button-add>\n      <button-search (click)=\"search()\"></button-search>\n    </div>\n  </div>\n  <div nz-col nzSpan=\"24\">\n    <nz-table\n      #table\n      [nzData]=\"this.data.LstItem || []\"\n      [nzBordered]=\"true\"\n      [nzSize]=\"'small'\"\n      [nzShowPagination]=\"false\"\n      [nzFrontPagination]=\"false\"\n      [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 235px)' }\"\n    >\n      <thead>\n        <tr>\n          <th nzWidth=\"50px\">#</th>\n          <th>Name</th>\n          <th>Icon</th>\n          <th>Order Value</th>\n          <th nzWidth=\"75px\" nzRight>Thao t\u00E1c</th>\n        </tr>\n        <tr class=\"tr-search\" (keyup.enter)=\"search()\">\n          <th></th>\n          <th></th>\n          <th></th>\n          <th></th>\n          <th nzRight></th>\n        </tr>\n      </thead>\n      <tbody>\n        @for (row of table.data; track $index; let i = $index) {\n          <tr>\n            <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\n            <td class=\"link-detail\" (click)=\"edit(row)\">{{ row.Name }}</td>\n            <td>{{ row.Icon }}</td>\n            <td>{{ row.OrderValue }}</td>\n            <td class=\"center\" nzRight>\n              <icon-edit (click)=\"edit(row)\"></icon-edit><box [width]=\"4\"></box>\n              <icon-delete (click)=\"delete(row)\"></icon-delete>\n            </td>\n          </tr>\n        }\n      </tbody>\n    </nz-table>\n  </div>\n\n  <div nz-col [nzSpan]=\"24\">\n    <div nz-flex nzJustify=\"end\">\n      <nz-pagination\n        [nzSize]=\"'small'\"\n        [nzPageIndex]=\"filter.PageIndex + 1\"\n        [nzPageSize]=\"filter.PageSize\"\n        [nzTotal]=\"data.TotalCount || 0\"\n        [nzShowSizeChanger]=\"true\"\n        [nzShowTotal]=\"showTotalTpl\"\n        [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\n        (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\n        (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\n      >\n      </nz-pagination>\n      <ng-template #showTotalTpl let-total let-range=\"range\">\n        {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\n      </ng-template>\n    </div>\n  </div>\n</div>\n\n<nz-drawer\n  [nzBodyStyle]=\"{ overflow: 'auto' }\"\n  [nzMaskClosable]=\"false\"\n  [nzWidth]=\"720\"\n  [nzVisible]=\"drawerVisible\"\n  [nzTitle]=\"editItem.App_Module_Id ? 'C\u1EADp nh\u1EADt' : 'Th\u00EAm m\u1EDBi'\"\n  [nzContent]=\"contentTpl\"\n  [nzFooter]=\"footerTpl\"\n  (nzOnClose)=\"drawerVisible = false\"\n>\n  <ng-template #contentTpl>\n    <div nz-row nzGutter=\"16\">\n      <extend-input nz-col nzSpan=\"24\" label=\"Name\" [floatingLabel]=\"false\" [(_ngModel)]=\"editItem.Name\"></extend-input>\n      <extend-input nz-col nzSpan=\"24\" label=\"Icon\" [floatingLabel]=\"false\" [(_ngModel)]=\"editItem.Icon\"></extend-input>\n      <extend-input-number\n        nz-col\n        nzSpan=\"24\"\n        label=\"Order Value\"\n        [floatingLabel]=\"false\"\n        [(_ngModel)]=\"editItem.OrderValue\"\n      ></extend-input-number>\n    </div>\n  </ng-template>\n  <ng-template #footerTpl>\n    <div style=\"float: right\">\n      <button nz-button style=\"margin-right: 8px\" nzType=\"primary\" (click)=\"save()\">L\u01B0u</button>\n      <button nz-button (click)=\"drawerVisible = false\">\u0110\u00F3ng</button>\n    </div>\n  </ng-template>\n</nz-drawer>\n" }]
+        }] });
+
+const ROUTES$1 = [
+    { path: 'module', component: App_ModuleListComponent },
+    { path: 'menu', component: MenuListComponent },
+    { path: 'menu/:id', component: MenuDetailComponent },
+    { path: 'user', component: UserListComponent },
+    { path: 'user/:id', component: UserDetailComponent },
+    { path: 'user_profile', component: UserProfileComponent },
+    { path: 'dicdomain', component: DicDomainListComponent },
+    { path: 'role', component: RoleListComponent },
+    { path: 'role/:id', component: RoleDetailComponent },
+    { path: 'org', component: OrgListComponent },
+    { path: 'org/:id', component: OrgDetailComponent },
+    { path: 'permission', component: PermissionComponent },
+    { path: 'file', component: FileListComponent },
+    { path: 'setting', component: SettingListComponent },
+    { path: 'config', component: ConfigComponent },
+    { path: 'sequence', component: SequenceListComponent },
+    { path: 'sequence/:id', component: SequenceDetailComponent },
+    { path: 'doc-template', component: DocTemplate },
+    { path: 'appdata', component: AppDataComponent },
+    { path: 'log-server', component: LogServerComponent },
+    { path: 'log-server/:file', component: LogServerDetailComponent },
+    { path: 'log-app', component: LogAppComponent },
+    // { path: 'mail-template', component: MailTemplateListComponent },
+    // { path: 'mail-template/template/new', component: MailTemplateDetailComponent },
+    // { path: 'mail-template/template/:id', component: MailTemplateDetailComponent },
+    // { path: 'mail-template/setting/new', component: MailSendSettingDetailComponent },
+    // { path: 'mail-template/setting/:id', component: MailSendSettingDetailComponent },
+    { path: 'version', component: VersionComponent },
+    { path: 'monitor', component: MonitorComponent },
+    { path: 'cache', component: CacheListComponent },
+    // { path: 'test-app', component: TestAppComponent },
+    { path: 'synology', component: SynologyComponent },
+    { path: 'dynamic-form', component: DynamicBuildFormComponent },
+];
+
 class App_Dic_Domain {
     // #region properties
     App_Dic_Domain_Id;
@@ -13536,20 +13860,33 @@ class RouteMonitorService {
                     return;
                 }
                 let currentRoute = this.router.routerState.root.snapshot;
+                let moduleId = null;
                 let headerMenuId = null;
+                // 1. Quét toàn bộ route tree để tìm cả moduleId và headerMenuId
                 while (currentRoute) {
-                    if (currentRoute.params && currentRoute.params['headerMenuId']) {
-                        headerMenuId = currentRoute.params['headerMenuId'];
-                        break;
+                    if (currentRoute.params) {
+                        if (currentRoute.params['moduleId']) {
+                            moduleId = currentRoute.params['moduleId'];
+                        }
+                        if (currentRoute.params['headerMenuId']) {
+                            headerMenuId = currentRoute.params['headerMenuId'];
+                        }
                     }
+                    // Chuyển xuống route con tiếp theo
                     currentRoute = currentRoute.firstChild;
                 }
                 let urlToCheck = url;
+                // 2. Loại bỏ moduleId khỏi URL (Giả sử tiền tố trên URL là /module/)
+                if (moduleId) {
+                    urlToCheck = urlToCheck.replace(`/module/${moduleId}`, '');
+                }
+                // 3. Loại bỏ headerMenuId khỏi URL như cũ
                 if (headerMenuId) {
-                    urlToCheck = urlToCheck.replace(`/headermenuid/${headerMenuId}`, '');
-                    if (urlToCheck === '') {
-                        urlToCheck = '/';
-                    }
+                    urlToCheck = urlToCheck.replace(`/headermenu/${headerMenuId}`, '');
+                }
+                // Xử lý nếu url sau khi cắt bị rỗng
+                if (urlToCheck === '') {
+                    urlToCheck = '/';
                 }
                 if (urlToCheck === '/' || urlToCheck === '/no-permission') {
                     return;
@@ -20145,9 +20482,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 args: ['inputElement', { static: false }]
             }] } });
 
+const ROUTES = [
+    { path: 'template', component: WF_TemplateList },
+    { path: 'template/:id', component: WF_TemplateDetail$1 },
+    { path: 'doc-list', component: WF_DocListComponent },
+    { path: 'doc-list/:id', component: WF_DocDetailComponent },
+    { path: 'doc-list/:id/process', component: WF_DocProcessComponent },
+    { path: 'doc-list/:id/doc-swimlane', component: WFDocSwimlaneComponent },
+    { path: 'rpt-config', component: RptConfigList },
+    { path: 'rpt-config/:id', component: RptConfigDetail },
+    { path: 'wf-combine', component: WF_Template_CombineListComponent },
+    { path: 'wf-combine/:id', component: WF_Template_CombineDetailComponent },
+];
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ABAC_RULES_TOKEN, ActionRule, ActionRuleLine, AnimatedDigitComponent, AppDataComponent, AppGlobals, AppStorage, App_CacheItem, App_Dic_Domain, App_Dic_DomainFilter, App_File, 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, ButtonAdd, ButtonBack, ButtonDelete, ButtonEdit, ButtonReload, ButtonSave, ButtonSearch, ButtonUpload, CacheFilter, CacheListComponent, CheckModel, CommonService, ConfigComponent, CustomNotiComponent, CustomNotiService, DashcardComponent, DateInputParserDirective, DateTimeHelper, DicDomainListComponent, DicDomainPipe, DicDomainSelectComponent, DicDomainService, DocTemplate, DoughnutGraphComponent, DownloadHelper, DurationFormatPipe, DynamicBuildFormComponent, ENUM_ResponseType, ExpandableSearchComponent, ExtendCheckbox, ExtendCheckbox3Value, ExtendDatePicker, ExtendDateRangePicker, ExtendInput, ExtendInputNumber, ExtendPaginationComponent, ExtendSelectComponent, ExtendTableComponent, ExtendTextArea, FileFilter, FileListComponent, FileService, FormatBytesPipe, GlobalSpinnerComponent, GridFilter, H3Icon, HTTPService, HasPermissionDirective, HasPermissionPipe, HeaderSearchComponent, HideIfErrorDirective, HighlightPipe, IconAdd, IconCheck, IconClose, IconCopy, IconDelete, IconEdit, IconInfo, IconSave, IconSearch, IconView, LayoutComponent, LayoutUser, LimitLettersPipe, LimitWordsPipe, LineGraphComponent, LoadingService, LogAppComponent, LogServerComponent, LogServerDetailComponent, Login1Component, Login2Component, LoginComponent, MailTemplateService, MenuDetailComponent, MenuFilter, MenuListComponent, MenuService, MonitorComponent, MonitorFilter, NoPermission, Nodata, NotiService, NotificationCenterComponent, NullIfEmptyDirective, NumberOnlyDirective, OrderOption, OrgDetailComponent, OrgFilter, OrgListComponent, OrgService, PagingData, PagingModel, PdfViewerComponent, PermissionComponent, PermissionService$1 as PermissionService, ReadMoreProComponent, RegisterComponent, RoleDetailComponent, RoleFilter, RoleListComponent, RoleService, RouteMonitorService, RptConfigDetail, RptConfigList, SequenceDetailComponent, SequenceListComponent, SessionManagerService, SettingListComponent, SettingService, SynologyComponent, TableHeader, ThemeService, TokenStorage, TranslateKey, URLs$j as URLs, UnsavedChangesGuard, UpperCaseFirsLetterEachWordDirective, UppercaseDirective, UppercaseFirstLetterDirective, UserDetailComponent, UserFilter, UserListComponent, UserProfileComponent, UserProfileService, UserService, VersionComponent, VscService, WFDocSwimlaneComponent, WF_DocDetailComponent, WF_DocListComponent, WF_DocProcessComponent, WF_TemplateActionRef, WF_TemplateDetail$1 as WF_TemplateDetail, WF_TemplateList, WF_Template_CombineDetailComponent, WF_Template_CombineListComponent, WF_TransitionRule, WF_TransitionRuleLine, Workflow, WorkflowAction, WorkflowActionEditorOption, WorkflowActionRef, WorkflowEditorComponent, WorkflowEditorOption, WorkflowStage, WorkflowStageEditorOption, XLSXHelper, authInterceptor, checkPermission, checkRole };
+export { ABAC_RULES_TOKEN, ROUTES$1 as ADMIN_ROUTES, ActionRule, ActionRuleLine, AnimatedDigitComponent, AppDataComponent, AppGlobals, AppStorage, App_CacheItem, App_Dic_Domain, App_Dic_DomainFilter, App_File, App_Menu, App_ModuleListComponent, App_Org, App_Role, App_Role_Menu_Ref, App_Setting, App_SettingFilter, App_User, AuthGuard, AuthService, AutoFocusDirective, BarGraphComponent, BaseComponent, BaseGuardChangeComponent, BaseOverlayComponent, Box, Breadcrumb, ButtonAdd, ButtonBack, ButtonDelete, ButtonEdit, ButtonReload, ButtonSave, ButtonSearch, ButtonUpload, CacheFilter, CacheListComponent, CheckModel, CommonService, ConfigComponent, CustomNotiComponent, CustomNotiService, DashcardComponent, DateInputParserDirective, DateTimeHelper, DicDomainListComponent, DicDomainPipe, DicDomainSelectComponent, DicDomainService, DocTemplate, DoughnutGraphComponent, DownloadHelper, DurationFormatPipe, DynamicBuildFormComponent, ENUM_ResponseType, ExpandableSearchComponent, ExtendCheckbox, ExtendCheckbox3Value, ExtendDatePicker, ExtendDateRangePicker, ExtendInput, ExtendInputNumber, ExtendPaginationComponent, ExtendSelectComponent, ExtendTableComponent, ExtendTextArea, FileFilter, FileListComponent, FileService, FormatBytesPipe, GlobalSpinnerComponent, GridFilter, H3Icon, HTTPService, HasPermissionDirective, HasPermissionPipe, HeaderSearchComponent, HideIfErrorDirective, HighlightPipe, IconAdd, IconCheck, IconClose, IconCopy, IconDelete, IconEdit, IconInfo, IconSave, IconSearch, IconView, LayoutComponent, LayoutUser, LimitLettersPipe, LimitWordsPipe, LineGraphComponent, LoadingService, LogAppComponent, LogServerComponent, LogServerDetailComponent, Login1Component, Login2Component, LoginComponent, MailTemplateService, MenuDetailComponent, MenuFilter, MenuListComponent, MenuService, ModuleSelectComponent, MonitorComponent, MonitorFilter, NoPermission, Nodata, NotiService, NotificationCenterComponent, NullIfEmptyDirective, NumberOnlyDirective, OrderOption, OrgDetailComponent, OrgFilter, OrgListComponent, OrgService, PagingData, PagingModel, PdfViewerComponent, PermissionComponent, PermissionService$1 as PermissionService, ReadMoreProComponent, RegisterComponent, RoleDetailComponent, RoleFilter, RoleListComponent, RoleService, RouteMonitorService, RptConfigDetail, RptConfigList, SequenceDetailComponent, SequenceListComponent, SessionManagerService, SettingListComponent, SettingService, SynologyComponent, TableHeader, ThemeService, TokenStorage, TranslateKey, URLs$k as URLs, UnsavedChangesGuard, UpperCaseFirsLetterEachWordDirective, UppercaseDirective, UppercaseFirstLetterDirective, UserDetailComponent, UserFilter, UserListComponent, UserProfileComponent, UserProfileService, UserService, VersionComponent, VscService, WFDocSwimlaneComponent, WF_DocDetailComponent, WF_DocListComponent, WF_DocProcessComponent, ROUTES as WF_ROUTES, WF_TemplateActionRef, WF_TemplateDetail$1 as WF_TemplateDetail, WF_TemplateList, WF_Template_CombineDetailComponent, WF_Template_CombineListComponent, WF_TransitionRule, WF_TransitionRuleLine, Workflow, WorkflowAction, WorkflowActionEditorOption, WorkflowActionRef, WorkflowEditorComponent, WorkflowEditorOption, WorkflowStage, WorkflowStageEditorOption, XLSXHelper, authInterceptor, checkPermission, checkRole };
 //# sourceMappingURL=brggroup-share-lib.mjs.map