@sdcorejs/angular 19.0.1 → 20.0.0

package/fesm2022/sdcorejs-angular-modules-layout.mjs

@@ -33,9 +33,9 @@ import { MatMenuModule } from '@angular/material/menu';
 
 class SdPageComponent {
     el = inject(ElementRef);
-    title = input('', { alias: 'title' });
-    description = input('', { alias: 'description' });
-    noHeader = input(false, { transform: booleanAttribute, alias: 'noHeader' });
+    title = input('', ...(ngDevMode ? [{ debugName: "title", alias: 'title' }] : [{ alias: 'title' }]));
+    description = input('', ...(ngDevMode ? [{ debugName: "description", alias: 'description' }] : [{ alias: 'description' }]));
+    noHeader = input(false, ...(ngDevMode ? [{ debugName: "noHeader", transform: booleanAttribute, alias: 'noHeader' }] : [{ transform: booleanAttribute, alias: 'noHeader' }]));
     constructor() {
         effect(() => {
             if (this.title()) {
@@ -43,13 +43,13 @@ class SdPageComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdPageComponent, isStandalone: true, selector: "sd-page", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, noHeader: { classPropertyName: "noHeader", publicName: "noHeader", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (!noHeader()) {\n  <div class=\"c-page-header bg-white\">\n    <div class=\"p-16 d-flex align-items-center w-full justify-content-between\">\n      <div class=\"d-flex\">\n        <ng-content select=\"[headerLeft]\">\n          <div class=\"d-flex flex-column\">\n            <div class=\"T20M\">{{ title() }}</div>\n            @if (description()) {\n              <div class=\"T14R text-secondary mt-4\">{{ description() }}</div>\n            }\n          </div>\n        </ng-content>\n      </div>\n      <ng-content select=\"[headerRight]\"></ng-content>\n    </div>\n  </div>\n}\n\n<div class=\"c-page-wrapper px-0\">\n  <div class=\"c-page-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{height:100%;display:flex;flex-direction:column;background-color:#f9f9f9}.c-page-header{box-shadow:0 1px 2px #2f31361a;z-index:1;position:relative}.c-page-wrapper{flex:1;display:flex;flex-direction:row;width:100%;overflow-y:auto;max-height:100vh}.c-page-wrapper .c-page-content{flex:1;height:100%;width:100%}.c-page-wrapper .c-page-right{position:-webkit-sticky;position:sticky;top:0;height:100%;overflow-y:auto}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: SdPageComponent, isStandalone: true, selector: "sd-page", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, noHeader: { classPropertyName: "noHeader", publicName: "noHeader", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (!noHeader()) {\n  <div class=\"c-page-header bg-white\">\n    <div class=\"p-16 d-flex align-items-center w-full justify-content-between\">\n      <div class=\"d-flex\">\n        <ng-content select=\"[headerLeft]\">\n          <div class=\"d-flex flex-column\">\n            <div class=\"T20M\">{{ title() }}</div>\n            @if (description()) {\n              <div class=\"T14R text-secondary mt-4\">{{ description() }}</div>\n            }\n          </div>\n        </ng-content>\n      </div>\n      <ng-content select=\"[headerRight]\"></ng-content>\n    </div>\n  </div>\n}\n\n<div class=\"c-page-wrapper px-0\">\n  <div class=\"c-page-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{height:100%;display:flex;flex-direction:column;background-color:#f9f9f9}.c-page-header{box-shadow:0 1px 2px #2f31361a;z-index:1;position:relative}.c-page-wrapper{flex:1;display:flex;flex-direction:row;width:100%;overflow-y:auto;max-height:100vh}.c-page-wrapper .c-page-content{flex:1;height:100%;width:100%}.c-page-wrapper .c-page-right{position:-webkit-sticky;position:sticky;top:0;height:100%;overflow-y:auto}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sd-page', template: "@if (!noHeader()) {\n  <div class=\"c-page-header bg-white\">\n    <div class=\"p-16 d-flex align-items-center w-full justify-content-between\">\n      <div class=\"d-flex\">\n        <ng-content select=\"[headerLeft]\">\n          <div class=\"d-flex flex-column\">\n            <div class=\"T20M\">{{ title() }}</div>\n            @if (description()) {\n              <div class=\"T14R text-secondary mt-4\">{{ description() }}</div>\n            }\n          </div>\n        </ng-content>\n      </div>\n      <ng-content select=\"[headerRight]\"></ng-content>\n    </div>\n  </div>\n}\n\n<div class=\"c-page-wrapper px-0\">\n  <div class=\"c-page-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{height:100%;display:flex;flex-direction:column;background-color:#f9f9f9}.c-page-header{box-shadow:0 1px 2px #2f31361a;z-index:1;position:relative}.c-page-wrapper{flex:1;display:flex;flex-direction:row;width:100%;overflow-y:auto;max-height:100vh}.c-page-wrapper .c-page-content{flex:1;height:100%;width:100%}.c-page-wrapper .c-page-right{position:-webkit-sticky;position:sticky;top:0;height:100%;overflow-y:auto}\n"] }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], noHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "noHeader", required: false }] }] } });
 
 class SdLayoutStorageService {
     sdStorageService;
@@ -68,10 +68,10 @@ class SdLayoutStorageService {
         this.pinnedMenuGroup = this.sdStorageService.create('e81da122-5dab-4250-b309-64197fb19d44');
         // End
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdLayoutStorageService, deps: [{ token: i1.SdStorageService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdLayoutStorageService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdLayoutStorageService, deps: [{ token: i1.SdStorageService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdLayoutStorageService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdLayoutStorageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdLayoutStorageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -91,8 +91,8 @@ class SdLayoutService {
     // ==========================================
     // SHARED SIGNALS (STATE)
     // ==========================================
-    userInfo = signal(undefined);
-    sidebar = signal(undefined);
+    userInfo = signal(undefined, ...(ngDevMode ? [{ debugName: "userInfo" }] : []));
+    sidebar = signal(undefined, ...(ngDevMode ? [{ debugName: "sidebar" }] : []));
     constructor() {
         if (!this.#layoutConfiguration) {
             // WHY: cho phép layout module chạy không cần config (use case demo / khởi tạo nhanh).
@@ -144,11 +144,11 @@ class SdLayoutService {
             defaultTitle: 'Back Office',
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdLayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdLayoutService, providedIn: 'root' // Có thể đổi thành 'any' hoặc khai báo trong mảng providers của LayoutModule tùy kiến trúc của bạn
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdLayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdLayoutService, providedIn: 'root' // Có thể đổi thành 'any' hoặc khai báo trong mảng providers của LayoutModule tùy kiến trúc của bạn
      });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdLayoutService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdLayoutService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root' // Có thể đổi thành 'any' hoặc khai báo trong mảng providers của LayoutModule tùy kiến trúc của bạn
@@ -234,11 +234,11 @@ class MenuPipe {
         }, {});
         return Object.keys(hashData).length > 0 ? Utilities.hash(hashData) : uuid.v4();
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MenuPipe, deps: [{ token: i1$1.SdPermissionService }], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: MenuPipe, isStandalone: true, name: "menu" });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MenuPipe, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: MenuPipe, deps: [{ token: i1$1.SdPermissionService }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.23", ngImport: i0, type: MenuPipe, isStandalone: true, name: "menu" });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: MenuPipe, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MenuPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: MenuPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'menu',
@@ -275,11 +275,11 @@ class MenuFocusPipe {
     #normalizePath = (p) => {
         return p.endsWith('/') ? p : p + '/';
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MenuFocusPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: MenuFocusPipe, isStandalone: true, name: "menuFocus" });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MenuFocusPipe, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: MenuFocusPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.23", ngImport: i0, type: MenuFocusPipe, isStandalone: true, name: "menuFocus" });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: MenuFocusPipe, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MenuFocusPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: MenuFocusPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'menuFocus',
@@ -318,10 +318,10 @@ class HighlightSearchPipe {
         str = str.trim();
         return str;
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HighlightSearchPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: HighlightSearchPipe, isStandalone: true, name: "highLightSearch" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: HighlightSearchPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.23", ngImport: i0, type: HighlightSearchPipe, isStandalone: true, name: "highLightSearch" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HighlightSearchPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: HighlightSearchPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'highLightSearch',
@@ -336,10 +336,10 @@ let LayoutUserComponent$1 = class LayoutUserComponent {
     // ==========================================
     // SIGNAL INPUTS & OUTPUTS
     // ==========================================
-    isMobileOrTablet = input(false);
-    isMenuLock = input(false);
-    isShowSidebar = input(false);
-    userInfo = input.required();
+    isMobileOrTablet = input(false, ...(ngDevMode ? [{ debugName: "isMobileOrTablet" }] : []));
+    isMenuLock = input(false, ...(ngDevMode ? [{ debugName: "isMenuLock" }] : []));
+    isShowSidebar = input(false, ...(ngDevMode ? [{ debugName: "isShowSidebar" }] : []));
+    userInfo = input.required(...(ngDevMode ? [{ debugName: "userInfo" }] : []));
     // Chuyển thành void vì các hàm emit hiện tại không truyền data
     menuClosed = output();
     menuOpened = output();
@@ -369,13 +369,13 @@ let LayoutUserComponent$1 = class LayoutUserComponent {
     onToggleMenuLock = (event) => {
         this.toggleMenuLock.emit(event);
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LayoutUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: LayoutUserComponent, isStandalone: true, selector: "lib-layout-user", inputs: { isMobileOrTablet: { classPropertyName: "isMobileOrTablet", publicName: "isMobileOrTablet", isSignal: true, isRequired: false, transformFunction: null }, isMenuLock: { classPropertyName: "isMenuLock", publicName: "isMenuLock", isSignal: true, isRequired: false, transformFunction: null }, isShowSidebar: { classPropertyName: "isShowSidebar", publicName: "isShowSidebar", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { menuClosed: "menuClosed", menuOpened: "menuOpened", toggleMenuLock: "toggleMenuLock" }, ngImport: i0, template: "@let _userInfo = userInfo();\n@let avatar = _userInfo?.avatar || _userInfo?.fullName || _userInfo?.username || _userInfo?.email;\n\n<div class=\"c-layout-user-wrapper\">\n  <div class=\"c-layout-user-avatar\" [matMenuTriggerFor]=\"userMenu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\">\n    <sd-avatar [src]=\"avatar\" [size]=\"32\"></sd-avatar>\n  </div>\n\n  @if (!isMobileOrTablet()) {\n    <div aria-hidden=\"true\" mat-mini-fab class=\"c-layout-icon-toggle\" (click)=\"onToggleMenuLock($event)\">\n      <mat-icon style=\"color: #8c8c8c\">\n        {{ isShowSidebar() ? 'keyboard_arrow_right' : 'keyboard_arrow_left' }}\n      </mat-icon>\n    </div>\n  }\n</div>\n\n<mat-menu #userMenu=\"matMenu\" xPosition=\"before\" backdropClass=\"c-user-menu-backdrop-f90ce131-fa4c-4f71-a49b-ab7fa374fdd0\">\n  <div aria-hidden=\"true\" class=\"c-user-menu-wrapper\" (click)=\"keepOpenWhenClickInsideMenu($event)\">\n    <div class=\"c-user-info-wrapper\">\n      <div class=\"c-user-avatar\">\n        <sd-avatar [src]=\"avatar\" [size]=\"40\"></sd-avatar>\n      </div>\n      <span class=\"c-user-name\">{{ _userInfo.fullName || _userInfo.username }}</span>\n      <span class=\"c-user-email\">{{ _userInfo.email }}</span>\n    </div>\n\n    @if (changePasswordLayoutConfig) {\n      <div class=\"c-sign-button-wrapper\">\n        <button class=\"c-account-options\" (click)=\"changePassword()\">\n          <mat-icon fontSet=\"material-icons-outlined\">lock</mat-icon>\n          <span>{{ 'core.module.layout.user.change-password' | translate }}</span>\n        </button>\n      </div>\n    }\n\n    <div class=\"c-sign-button-wrapper\">\n      <button class=\"c-sign-button\" mat-flat-button (click)=\"logout()\">{{ 'core.module.layout.user.logout' | translate }}</button>\n    </div>\n  </div>\n</mat-menu>", styles: ["::ng-deep .c-user-menu-backdrop-f90ce131-fa4c-4f71-a49b-ab7fa374fdd0+* .cdk-overlay-pane{transform:translate(277px,83px)}.c-layout-user-wrapper{display:flex;flex-direction:column;align-items:center;width:60px;height:80px}.c-layout-user-wrapper .c-layout-user-avatar{width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer}.c-layout-user-wrapper .c-layout-icon-toggle{background-color:transparent;border-top:1px solid #f0f0f0;box-shadow:none;margin-top:10px;width:32px;height:40px;display:flex;justify-content:center;align-items:center;cursor:pointer}.c-user-menu-wrapper .c-user-info-wrapper{width:250px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px}.c-user-menu-wrapper .c-user-info-wrapper .c-user-avatar{width:40px;height:40px}.c-user-menu-wrapper .c-user-info-wrapper .c-user-name{font-size:16px;font-weight:700;text-align:center}.c-user-menu-wrapper .c-user-info-wrapper .c-user-email{font-size:14px;color:#7a7a7a;text-align:center}.c-user-menu-wrapper .c-sign-button-wrapper{text-align:center;padding:16px 16px 8px;width:100%;border-top:1px solid #dee2e6}.c-user-menu-wrapper .c-sign-button-wrapper .c-account-options{all:unset;cursor:pointer;font-size:14px;display:flex;align-items:center;gap:8px}.c-user-menu-wrapper .c-sign-button-wrapper .c-account-options mat-icon{font-size:21px;width:21px;height:21px;color:#8c8c8c}.c-user-menu-wrapper .c-sign-button-wrapper .c-sign-button{width:100%;color:#000;padding:16px;font-weight:700;background-color:#eef0f2}.c-avatar{max-width:100%;object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: SdAvatar, selector: "sd-avatar", inputs: ["src", "size"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: LayoutUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: LayoutUserComponent, isStandalone: true, selector: "lib-layout-user", inputs: { isMobileOrTablet: { classPropertyName: "isMobileOrTablet", publicName: "isMobileOrTablet", isSignal: true, isRequired: false, transformFunction: null }, isMenuLock: { classPropertyName: "isMenuLock", publicName: "isMenuLock", isSignal: true, isRequired: false, transformFunction: null }, isShowSidebar: { classPropertyName: "isShowSidebar", publicName: "isShowSidebar", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { menuClosed: "menuClosed", menuOpened: "menuOpened", toggleMenuLock: "toggleMenuLock" }, ngImport: i0, template: "@let _userInfo = userInfo();\n@let avatar = _userInfo?.avatar || _userInfo?.fullName || _userInfo?.username || _userInfo?.email;\n\n<div class=\"c-layout-user-wrapper\">\n  <div class=\"c-layout-user-avatar\" [matMenuTriggerFor]=\"userMenu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\">\n    <sd-avatar [src]=\"avatar\" [size]=\"32\"></sd-avatar>\n  </div>\n\n  @if (!isMobileOrTablet()) {\n    <div aria-hidden=\"true\" mat-mini-fab class=\"c-layout-icon-toggle\" (click)=\"onToggleMenuLock($event)\">\n      <mat-icon style=\"color: #8c8c8c\">\n        {{ isShowSidebar() ? 'keyboard_arrow_right' : 'keyboard_arrow_left' }}\n      </mat-icon>\n    </div>\n  }\n</div>\n\n<mat-menu #userMenu=\"matMenu\" xPosition=\"before\" backdropClass=\"c-user-menu-backdrop-f90ce131-fa4c-4f71-a49b-ab7fa374fdd0\">\n  <div aria-hidden=\"true\" class=\"c-user-menu-wrapper\" (click)=\"keepOpenWhenClickInsideMenu($event)\">\n    <div class=\"c-user-info-wrapper\">\n      <div class=\"c-user-avatar\">\n        <sd-avatar [src]=\"avatar\" [size]=\"40\"></sd-avatar>\n      </div>\n      <span class=\"c-user-name\">{{ _userInfo.fullName || _userInfo.username }}</span>\n      <span class=\"c-user-email\">{{ _userInfo.email }}</span>\n    </div>\n\n    @if (changePasswordLayoutConfig) {\n      <div class=\"c-sign-button-wrapper\">\n        <button class=\"c-account-options\" (click)=\"changePassword()\">\n          <mat-icon fontSet=\"material-icons-outlined\">lock</mat-icon>\n          <span>{{ 'core.module.layout.user.change-password' | translate }}</span>\n        </button>\n      </div>\n    }\n\n    <div class=\"c-sign-button-wrapper\">\n      <button class=\"c-sign-button\" mat-flat-button (click)=\"logout()\">{{ 'core.module.layout.user.logout' | translate }}</button>\n    </div>\n  </div>\n</mat-menu>", styles: ["::ng-deep .c-user-menu-backdrop-f90ce131-fa4c-4f71-a49b-ab7fa374fdd0+* .cdk-overlay-pane{transform:translate(277px,83px)}.c-layout-user-wrapper{display:flex;flex-direction:column;align-items:center;width:60px;height:80px}.c-layout-user-wrapper .c-layout-user-avatar{width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer}.c-layout-user-wrapper .c-layout-icon-toggle{background-color:transparent;border-top:1px solid #f0f0f0;box-shadow:none;margin-top:10px;width:32px;height:40px;display:flex;justify-content:center;align-items:center;cursor:pointer}.c-user-menu-wrapper .c-user-info-wrapper{width:250px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px}.c-user-menu-wrapper .c-user-info-wrapper .c-user-avatar{width:40px;height:40px}.c-user-menu-wrapper .c-user-info-wrapper .c-user-name{font-size:16px;font-weight:700;text-align:center}.c-user-menu-wrapper .c-user-info-wrapper .c-user-email{font-size:14px;color:#7a7a7a;text-align:center}.c-user-menu-wrapper .c-sign-button-wrapper{text-align:center;padding:16px 16px 8px;width:100%;border-top:1px solid #dee2e6}.c-user-menu-wrapper .c-sign-button-wrapper .c-account-options{all:unset;cursor:pointer;font-size:14px;display:flex;align-items:center;gap:8px}.c-user-menu-wrapper .c-sign-button-wrapper .c-account-options mat-icon{font-size:21px;width:21px;height:21px;color:#8c8c8c}.c-user-menu-wrapper .c-sign-button-wrapper .c-sign-button{width:100%;color:#000;padding:16px;font-weight:700;background-color:#eef0f2}.c-avatar{max-width:100%;object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: SdAvatar, selector: "sd-avatar", inputs: ["src", "size"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LayoutUserComponent$1, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: LayoutUserComponent$1, decorators: [{
             type: Component,
             args: [{ selector: 'lib-layout-user', imports: [MatMenuModule, MatButtonModule, MatIconModule, MatTooltipModule, SdAvatar, TranslatePipe], standalone: true, template: "@let _userInfo = userInfo();\n@let avatar = _userInfo?.avatar || _userInfo?.fullName || _userInfo?.username || _userInfo?.email;\n\n<div class=\"c-layout-user-wrapper\">\n  <div class=\"c-layout-user-avatar\" [matMenuTriggerFor]=\"userMenu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\">\n    <sd-avatar [src]=\"avatar\" [size]=\"32\"></sd-avatar>\n  </div>\n\n  @if (!isMobileOrTablet()) {\n    <div aria-hidden=\"true\" mat-mini-fab class=\"c-layout-icon-toggle\" (click)=\"onToggleMenuLock($event)\">\n      <mat-icon style=\"color: #8c8c8c\">\n        {{ isShowSidebar() ? 'keyboard_arrow_right' : 'keyboard_arrow_left' }}\n      </mat-icon>\n    </div>\n  }\n</div>\n\n<mat-menu #userMenu=\"matMenu\" xPosition=\"before\" backdropClass=\"c-user-menu-backdrop-f90ce131-fa4c-4f71-a49b-ab7fa374fdd0\">\n  <div aria-hidden=\"true\" class=\"c-user-menu-wrapper\" (click)=\"keepOpenWhenClickInsideMenu($event)\">\n    <div class=\"c-user-info-wrapper\">\n      <div class=\"c-user-avatar\">\n        <sd-avatar [src]=\"avatar\" [size]=\"40\"></sd-avatar>\n      </div>\n      <span class=\"c-user-name\">{{ _userInfo.fullName || _userInfo.username }}</span>\n      <span class=\"c-user-email\">{{ _userInfo.email }}</span>\n    </div>\n\n    @if (changePasswordLayoutConfig) {\n      <div class=\"c-sign-button-wrapper\">\n        <button class=\"c-account-options\" (click)=\"changePassword()\">\n          <mat-icon fontSet=\"material-icons-outlined\">lock</mat-icon>\n          <span>{{ 'core.module.layout.user.change-password' | translate }}</span>\n        </button>\n      </div>\n    }\n\n    <div class=\"c-sign-button-wrapper\">\n      <button class=\"c-sign-button\" mat-flat-button (click)=\"logout()\">{{ 'core.module.layout.user.logout' | translate }}</button>\n    </div>\n  </div>\n</mat-menu>", styles: ["::ng-deep .c-user-menu-backdrop-f90ce131-fa4c-4f71-a49b-ab7fa374fdd0+* .cdk-overlay-pane{transform:translate(277px,83px)}.c-layout-user-wrapper{display:flex;flex-direction:column;align-items:center;width:60px;height:80px}.c-layout-user-wrapper .c-layout-user-avatar{width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer}.c-layout-user-wrapper .c-layout-icon-toggle{background-color:transparent;border-top:1px solid #f0f0f0;box-shadow:none;margin-top:10px;width:32px;height:40px;display:flex;justify-content:center;align-items:center;cursor:pointer}.c-user-menu-wrapper .c-user-info-wrapper{width:250px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px}.c-user-menu-wrapper .c-user-info-wrapper .c-user-avatar{width:40px;height:40px}.c-user-menu-wrapper .c-user-info-wrapper .c-user-name{font-size:16px;font-weight:700;text-align:center}.c-user-menu-wrapper .c-user-info-wrapper .c-user-email{font-size:14px;color:#7a7a7a;text-align:center}.c-user-menu-wrapper .c-sign-button-wrapper{text-align:center;padding:16px 16px 8px;width:100%;border-top:1px solid #dee2e6}.c-user-menu-wrapper .c-sign-button-wrapper .c-account-options{all:unset;cursor:pointer;font-size:14px;display:flex;align-items:center;gap:8px}.c-user-menu-wrapper .c-sign-button-wrapper .c-account-options mat-icon{font-size:21px;width:21px;height:21px;color:#8c8c8c}.c-user-menu-wrapper .c-sign-button-wrapper .c-sign-button{width:100%;color:#000;padding:16px;font-weight:700;background-color:#eef0f2}.c-avatar{max-width:100%;object-fit:cover}\n"] }]
-        }] });
+        }], propDecorators: { isMobileOrTablet: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobileOrTablet", required: false }] }], isMenuLock: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMenuLock", required: false }] }], isShowSidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "isShowSidebar", required: false }] }], userInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfo", required: true }] }], menuClosed: [{ type: i0.Output, args: ["menuClosed"] }], menuOpened: [{ type: i0.Output, args: ["menuOpened"] }], toggleMenuLock: [{ type: i0.Output, args: ["toggleMenuLock"] }] } });
 
 class SidebarComponent {
     // ==========================================
@@ -388,10 +388,10 @@ class SidebarComponent {
     // ==========================================
     // SIGNAL INPUTS & OUTPUTS
     // ==========================================
-    isShowSidebar = input.required();
-    menus = input.required();
-    userInfo = input.required();
-    sidebar = input.required();
+    isShowSidebar = input.required(...(ngDevMode ? [{ debugName: "isShowSidebar" }] : []));
+    menus = input.required(...(ngDevMode ? [{ debugName: "menus" }] : []));
+    userInfo = input.required(...(ngDevMode ? [{ debugName: "userInfo" }] : []));
+    sidebar = input.required(...(ngDevMode ? [{ debugName: "sidebar" }] : []));
     expandSideBar = output();
     popupUserMenuClosed = output();
     popupUserMenuOpened = output();
@@ -401,30 +401,30 @@ class SidebarComponent {
     // ==========================================
     screenHeight = window.innerHeight;
     isMobileOrTablet = BrowserUtilities.isMobile();
-    isMenuLock = signal(this.#layoutStorageService.menuLockStatus?.get() ?? true);
-    currentPath = signal(window.location.pathname);
-    searchText = signal('');
-    titleMenuGroup = signal('');
-    idMenuGroupActive = signal('');
-    menusByGroup = signal([]);
-    #hoveredMenuNodeKey = signal(null);
-    #pinIconHoverTimerId = signal(null);
+    isMenuLock = signal(this.#layoutStorageService.menuLockStatus?.get() ?? true, ...(ngDevMode ? [{ debugName: "isMenuLock" }] : []));
+    currentPath = signal(window.location.pathname, ...(ngDevMode ? [{ debugName: "currentPath" }] : []));
+    searchText = signal('', ...(ngDevMode ? [{ debugName: "searchText" }] : []));
+    titleMenuGroup = signal('', ...(ngDevMode ? [{ debugName: "titleMenuGroup" }] : []));
+    idMenuGroupActive = signal('', ...(ngDevMode ? [{ debugName: "idMenuGroupActive" }] : []));
+    menusByGroup = signal([], ...(ngDevMode ? [{ debugName: "menusByGroup" }] : []));
+    #hoveredMenuNodeKey = signal(null, ...(ngDevMode ? [{ debugName: "#hoveredMenuNodeKey" }] : []));
+    #pinIconHoverTimerId = signal(null, ...(ngDevMode ? [{ debugName: "#pinIconHoverTimerId" }] : []));
     pinnedMenuGroup = signal(this.#layoutStorageService.pinnedMenuGroup.get() ?? {
         id: 'pinned-menu-group',
         title: 'Đã ghim',
         children: [],
-    });
+    }, ...(ngDevMode ? [{ debugName: "pinnedMenuGroup" }] : []));
     // ==========================================
     // COMPUTED STATE
     // ==========================================
-    totalMenuInMenusByGroup = computed(() => this.#getTotalMenus(this.menusByGroup()));
-    pinnedNodeKeys = computed(() => new Set(this.pinnedMenuGroup().children?.map(m => this.#getMenuNodeKey(m)) ?? []));
-    isPinnedMenuGroupActive = computed(() => this.idMenuGroupActive() === this.pinnedMenuGroup().id);
+    totalMenuInMenusByGroup = computed(() => this.#getTotalMenus(this.menusByGroup()), ...(ngDevMode ? [{ debugName: "totalMenuInMenusByGroup" }] : []));
+    pinnedNodeKeys = computed(() => new Set(this.pinnedMenuGroup().children?.map(m => this.#getMenuNodeKey(m)) ?? []), ...(ngDevMode ? [{ debugName: "pinnedNodeKeys" }] : []));
+    isPinnedMenuGroupActive = computed(() => this.idMenuGroupActive() === this.pinnedMenuGroup().id, ...(ngDevMode ? [{ debugName: "isPinnedMenuGroupActive" }] : []));
     // ==========================================
     // DATA STRUCTURES
     // ==========================================
     #pinIconHoverTimerDelay = 300;
-    #isFirstBindingMenu = signal(true);
+    #isFirstBindingMenu = signal(true, ...(ngDevMode ? [{ debugName: "#isFirstBindingMenu" }] : []));
     dataSource = new MatTreeNestedDataSource();
     treeControl = new NestedTreeControl(node => ('children' in node && node.children?.length ? node.children : []));
     constructor() {
@@ -892,10 +892,10 @@ class SidebarComponent {
         }
         return count;
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SidebarComponent, isStandalone: true, selector: "sidebar", inputs: { isShowSidebar: { classPropertyName: "isShowSidebar", publicName: "isShowSidebar", isSignal: true, isRequired: true, transformFunction: null }, menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: true, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { expandSideBar: "expandSideBar", popupUserMenuClosed: "popupUserMenuClosed", popupUserMenuOpened: "popupUserMenuOpened", showSideBar: "showSideBar" }, ngImport: i0, template: "@let _userInfo = userInfo();\n@let _sidebar = sidebar();\n\n@if (_userInfo && _sidebar) {\n  <div class=\"wrapper\" [style.height]=\"isMobileOrTablet ? screenHeight + 'px' : '100%'\">\n    <div class=\"c-header\">\n      @if (_sidebar.logoUrl) {\n        <div class=\"c-logo\">\n          <a href=\"javascript:;\" (click)=\"openHomePage()\">\n            <img alt=\"logo\" [src]=\"_sidebar.logoUrl\" />\n          </a>\n        </div>\n      }\n      <div class=\"c-title-menu-group\">\n        <span>{{ titleMenuGroup() || _sidebar.defaultTitle || 'Back Office' }}</span>\n      </div>\n    </div>\n    <div class=\"c-body\">\n      <div class=\"c-menu\">\n        <div class=\"c-menu-group\">\n          @if (_sidebar?.pin?.enabled && pinnedMenuGroup().children?.length) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, pinnedMenuGroup())\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, pinnedMenuGroup())\"\n              (click)=\"expandPinnedGroup()\"\n              [matTooltip]=\"'\u0110\u00E3 ghim'\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              <mat-icon\n                class=\"c-menu-group-icon\"\n                [ngStyle]=\"{\n                  color: isPinnedMenuGroupActive() ? _sidebar.brandColor || '#2962FF' : '#8C8C8C',\n                  backgroundColor: isPinnedMenuGroupActive() ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\n                }\">\n                push_pin\n              </mat-icon>\n            </button>\n          }\n          @for (nodeMenuGroup of menus(); track nodeMenuGroup.id) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, nodeMenuGroup)\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, nodeMenuGroup)\"\n              (click)=\"expandMenuGroup(nodeMenuGroup)\"\n              [matTooltip]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              @if (nodeMenuGroup.iconUrl) {\n                <span\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    backgroundColor: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\n                  }\">\n                  <img width=\"24px\" height=\"24px\" [src]=\"nodeMenuGroup.iconUrl\" [alt]=\"nodeMenuGroup.title\" />\n                </span>\n              } @else {\n                <mat-icon\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    color: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandColor || '#2962FF' : '#8C8C8C',\n                    backgroundColor: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\n                  }\">\n                  {{ nodeMenuGroup.icon || 'widgets' }}\n                </mat-icon>\n              }\n            </button>\n          }\n        </div>\n        <div class=\"c-menu-tree\">\n          @if (totalMenuInMenusByGroup() >= 10) {\n            <div style=\"padding: 0px 4px\" class=\"c-menu-tree-search\">\n              <sd-input size=\"sm\" [placeholder]=\"'core.module.layout.sidebar.search' | translate\" [model]=\"searchText()\" (sdChange)=\"onFilterSearchText($event)\">\n                <ng-template sdSuffixDef>\n                  @if (searchText()) {\n                    <mat-icon class=\"c-search-prefix-icon cancel\" (click)=\"onClearSearchText()\">cancel</mat-icon>\n                  } @else {\n                    <mat-icon class=\"c-search-prefix-icon search\">search</mat-icon>\n                  }\n                </ng-template>\n              </sd-input>\n            </div>\n          }\n          <div class=\"c-menu-tree-container\">\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\n              <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\n                <li\n                  class=\"c-menu-node\"\n                  (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                  (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\n                  [ngStyle]=\"{\n                    backgroundColor: (currentPath() | menuFocus: node) ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\n                  }\">\n                  <div aria-hidden=\"true\" class=\"c-menu-node-description\" (click)=\"navigate(node)\" [class.d-none]=\"!isShowSidebar()\">\n                    <div\n                      class=\"c-menu-node-description-content\"\n                      [ngStyle]=\"{\n                        color: (currentPath() | menuFocus: node) ? _sidebar.brandColor || '#2962FF' : '#1F1F1F',\n                      }\"\n                      [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\n\n                    @if (_sidebar?.pin?.enabled) {\n                      <mat-icon\n                        class=\"c-menu-node-description-icon-pin\"\n                        [fontSet]=\"isPinnedNode(node) ? 'material-icons' : 'material-icons-outlined'\"\n                        [style.opacity]=\"isPinnedNode(node) || isHoveredNode(node) ? '1' : null\"\n                        [style.color]=\"isPinnedNode(node) || isHoveredNode(node) ? sidebar().brandColor || '#2962FF' : null\"\n                        (click)=\"onTogglePin($event, node)\"\n                        >push_pin\n                      </mat-icon>\n                    }\n                  </div>\n                </li>\n              </mat-nested-tree-node>\n\n              <mat-nested-tree-node\n                *matTreeNodeDef=\"let node; when: hasChild\"\n                aria-hidden=\"true\"\n                [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath() | menuFocus: node }\">\n                <li>\n                  <div\n                    class=\"c-menu-node\"\n                    (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                    (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\n                    <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\n                      <div [class.d-none]=\"!isShowSidebar()\" class=\"c-menu-node-description\" (click)=\"onToggleMenuNode(node)\">\n                        <div\n                          class=\"c-menu-node-description-content\"\n                          [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\n                        <mat-icon class=\"c-menu-node-description-icon-expand\">\n                          {{ treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\n                        </mat-icon>\n                      </div>\n                    </div>\n                  </div>\n                  <ul class=\"p-0\" [class.d-none]=\"!treeControl.isExpanded(node)\">\n                    <ng-container matTreeNodeOutlet></ng-container>\n                  </ul>\n                </li>\n              </mat-nested-tree-node>\n            </mat-tree>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"c-footer\">\n      <lib-layout-user\n        [userInfo]=\"_userInfo\"\n        [isMobileOrTablet]=\"isMobileOrTablet\"\n        (menuOpened)=\"onUserMenuOpened()\"\n        (menuClosed)=\"onUserMenuClosed()\"\n        [isShowSidebar]=\"isShowSidebar()\"\n        (toggleMenuLock)=\"toggleMenuLock($event)\">\n      </lib-layout-user>\n    </div>\n\n    <div class=\"c-vertical\"></div>\n  </div>\n}\n", styles: ["::ng-deep .mat-mdc-tooltip-panel:has(.c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140){pointer-events:none}:host ::ng-deep .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:16px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:32px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:48px!important}ul,li{margin-top:0;margin-bottom:0;list-style-type:none}.wrapper{display:flex;flex-direction:column;width:290px;background-color:#fff}.wrapper .c-header{display:flex;align-items:center;height:52px;padding:3px;gap:16px}.wrapper .c-header .c-logo{display:flex;justify-content:center;align-items:center;width:52px;height:52px}.wrapper .c-header .c-logo img{width:32px;height:32px;object-fit:cover}.wrapper .c-header .c-title-menu-group{display:flex;align-items:center;font-size:18px;font-weight:500;flex:1}.wrapper .c-body{flex:1;overflow-y:hidden}.wrapper .c-body .c-menu{height:100%;display:flex}.wrapper .c-body .c-menu .c-menu-group{display:flex;flex-direction:column;align-items:center;width:60px;overflow-y:scroll;scrollbar-width:none}.wrapper .c-body .c-menu .c-menu-group .c-menu-group-icon{display:flex;justify-content:center;align-items:center;min-height:50px;width:52px;border-radius:8px;transition:all .15s}.wrapper .c-body .c-menu .c-menu-group .c-menu-group-icon img{height:24px;width:24px;object-fit:contain}.wrapper .c-body .c-menu .c-menu-tree{flex:1;display:flex;flex-direction:column;padding:3px 4px 3px 3px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon{cursor:pointer;color:#757575;padding:0}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon.search{width:20px;height:20px;font-size:18px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon.cancel{width:16px;height:16px;font-size:16px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container{flex:1;overflow-y:scroll;scrollbar-width:none}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node{width:100%;display:flex;cursor:pointer;min-height:44px;padding:8px;border-radius:8px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-icon{display:flex;justify-content:center;align-items:center;height:100%}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description{flex:1;display:flex;align-items:center}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-content{flex:1;display:flex;align-items:center;flex-wrap:wrap;white-space:pre-wrap;font-size:15px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-icon-expand{display:flex;align-items:center;justify-content:start;background-color:transparent;border:none;font-size:20px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-icon-pin{display:flex;align-items:center;justify-content:start;background-color:transparent;border:none;font-size:18px;opacity:0}.wrapper .c-footer{height:80px}.wrapper .c-vertical{position:fixed;height:100vh;left:58px;width:2px;background-color:#f8f9fa;pointer-events:none}\n"], dependencies: [{ kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i3.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i3.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "component", type: i3.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i3.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "pipe", type: SdSafeHtmlPipe, name: "sdSafeHtml" }, { kind: "ngmodule", type: MatInputModule }, { kind: "pipe", type: MenuFocusPipe, name: "menuFocus" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: HighlightSearchPipe, name: "highLightSearch" }, { kind: "directive", type: SdSuffixDefDirective, selector: "[sdSuffixDef]" }, { kind: "component", type: LayoutUserComponent$1, selector: "lib-layout-user", inputs: ["isMobileOrTablet", "isMenuLock", "isShowSidebar", "userInfo"], outputs: ["menuClosed", "menuOpened", "toggleMenuLock"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: SidebarComponent, isStandalone: true, selector: "sidebar", inputs: { isShowSidebar: { classPropertyName: "isShowSidebar", publicName: "isShowSidebar", isSignal: true, isRequired: true, transformFunction: null }, menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: true, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { expandSideBar: "expandSideBar", popupUserMenuClosed: "popupUserMenuClosed", popupUserMenuOpened: "popupUserMenuOpened", showSideBar: "showSideBar" }, ngImport: i0, template: "@let _userInfo = userInfo();\n@let _sidebar = sidebar();\n\n@if (_userInfo && _sidebar) {\n  <div class=\"wrapper\" [style.height]=\"isMobileOrTablet ? screenHeight + 'px' : '100%'\">\n    <div class=\"c-header\">\n      @if (_sidebar.logoUrl) {\n        <div class=\"c-logo\">\n          <a href=\"javascript:;\" (click)=\"openHomePage()\">\n            <img alt=\"logo\" [src]=\"_sidebar.logoUrl\" />\n          </a>\n        </div>\n      }\n      <div class=\"c-title-menu-group\">\n        <span>{{ titleMenuGroup() || _sidebar.defaultTitle || 'Back Office' }}</span>\n      </div>\n    </div>\n    <div class=\"c-body\">\n      <div class=\"c-menu\">\n        <div class=\"c-menu-group\">\n          @if (_sidebar?.pin?.enabled && pinnedMenuGroup().children?.length) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, pinnedMenuGroup())\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, pinnedMenuGroup())\"\n              (click)=\"expandPinnedGroup()\"\n              [matTooltip]=\"'\u0110\u00E3 ghim'\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              <mat-icon\n                class=\"c-menu-group-icon\"\n                [ngStyle]=\"{\n                  color: isPinnedMenuGroupActive() ? _sidebar.brandColor || '#2962FF' : '#8C8C8C',\n                  backgroundColor: isPinnedMenuGroupActive() ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\n                }\">\n                push_pin\n              </mat-icon>\n            </button>\n          }\n          @for (nodeMenuGroup of menus(); track nodeMenuGroup.id) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, nodeMenuGroup)\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, nodeMenuGroup)\"\n              (click)=\"expandMenuGroup(nodeMenuGroup)\"\n              [matTooltip]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              @if (nodeMenuGroup.iconUrl) {\n                <span\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    backgroundColor: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\n                  }\">\n                  <img width=\"24px\" height=\"24px\" [src]=\"nodeMenuGroup.iconUrl\" [alt]=\"nodeMenuGroup.title\" />\n                </span>\n              } @else {\n                <mat-icon\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    color: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandColor || '#2962FF' : '#8C8C8C',\n                    backgroundColor: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\n                  }\">\n                  {{ nodeMenuGroup.icon || 'widgets' }}\n                </mat-icon>\n              }\n            </button>\n          }\n        </div>\n        <div class=\"c-menu-tree\">\n          @if (totalMenuInMenusByGroup() >= 10) {\n            <div style=\"padding: 0px 4px\" class=\"c-menu-tree-search\">\n              <sd-input size=\"sm\" [placeholder]=\"'core.module.layout.sidebar.search' | translate\" [model]=\"searchText()\" (sdChange)=\"onFilterSearchText($event)\">\n                <ng-template sdSuffixDef>\n                  @if (searchText()) {\n                    <mat-icon class=\"c-search-prefix-icon cancel\" (click)=\"onClearSearchText()\">cancel</mat-icon>\n                  } @else {\n                    <mat-icon class=\"c-search-prefix-icon search\">search</mat-icon>\n                  }\n                </ng-template>\n              </sd-input>\n            </div>\n          }\n          <div class=\"c-menu-tree-container\">\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\n              <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\n                <li\n                  class=\"c-menu-node\"\n                  (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                  (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\n                  [ngStyle]=\"{\n                    backgroundColor: (currentPath() | menuFocus: node) ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\n                  }\">\n                  <div aria-hidden=\"true\" class=\"c-menu-node-description\" (click)=\"navigate(node)\" [class.d-none]=\"!isShowSidebar()\">\n                    <div\n                      class=\"c-menu-node-description-content\"\n                      [ngStyle]=\"{\n                        color: (currentPath() | menuFocus: node) ? _sidebar.brandColor || '#2962FF' : '#1F1F1F',\n                      }\"\n                      [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\n\n                    @if (_sidebar?.pin?.enabled) {\n                      <mat-icon\n                        class=\"c-menu-node-description-icon-pin\"\n                        [fontSet]=\"isPinnedNode(node) ? 'material-icons' : 'material-icons-outlined'\"\n                        [style.opacity]=\"isPinnedNode(node) || isHoveredNode(node) ? '1' : null\"\n                        [style.color]=\"isPinnedNode(node) || isHoveredNode(node) ? sidebar().brandColor || '#2962FF' : null\"\n                        (click)=\"onTogglePin($event, node)\"\n                        >push_pin\n                      </mat-icon>\n                    }\n                  </div>\n                </li>\n              </mat-nested-tree-node>\n\n              <mat-nested-tree-node\n                *matTreeNodeDef=\"let node; when: hasChild\"\n                aria-hidden=\"true\"\n                [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath() | menuFocus: node }\">\n                <li>\n                  <div\n                    class=\"c-menu-node\"\n                    (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                    (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\n                    <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\n                      <div [class.d-none]=\"!isShowSidebar()\" class=\"c-menu-node-description\" (click)=\"onToggleMenuNode(node)\">\n                        <div\n                          class=\"c-menu-node-description-content\"\n                          [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\n                        <mat-icon class=\"c-menu-node-description-icon-expand\">\n                          {{ treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\n                        </mat-icon>\n                      </div>\n                    </div>\n                  </div>\n                  <ul class=\"p-0\" [class.d-none]=\"!treeControl.isExpanded(node)\">\n                    <ng-container matTreeNodeOutlet></ng-container>\n                  </ul>\n                </li>\n              </mat-nested-tree-node>\n            </mat-tree>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"c-footer\">\n      <lib-layout-user\n        [userInfo]=\"_userInfo\"\n        [isMobileOrTablet]=\"isMobileOrTablet\"\n        (menuOpened)=\"onUserMenuOpened()\"\n        (menuClosed)=\"onUserMenuClosed()\"\n        [isShowSidebar]=\"isShowSidebar()\"\n        (toggleMenuLock)=\"toggleMenuLock($event)\">\n      </lib-layout-user>\n    </div>\n\n    <div class=\"c-vertical\"></div>\n  </div>\n}\n", styles: ["::ng-deep .mat-mdc-tooltip-panel:has(.c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140){pointer-events:none}:host ::ng-deep .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:16px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:32px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:48px!important}ul,li{margin-top:0;margin-bottom:0;list-style-type:none}.wrapper{display:flex;flex-direction:column;width:290px;background-color:#fff}.wrapper .c-header{display:flex;align-items:center;height:52px;padding:3px;gap:16px}.wrapper .c-header .c-logo{display:flex;justify-content:center;align-items:center;width:52px;height:52px}.wrapper .c-header .c-logo img{width:32px;height:32px;object-fit:cover}.wrapper .c-header .c-title-menu-group{display:flex;align-items:center;font-size:18px;font-weight:500;flex:1}.wrapper .c-body{flex:1;overflow-y:hidden}.wrapper .c-body .c-menu{height:100%;display:flex}.wrapper .c-body .c-menu .c-menu-group{display:flex;flex-direction:column;align-items:center;width:60px;overflow-y:scroll;scrollbar-width:none}.wrapper .c-body .c-menu .c-menu-group .c-menu-group-icon{display:flex;justify-content:center;align-items:center;min-height:50px;width:52px;border-radius:8px;transition:all .15s}.wrapper .c-body .c-menu .c-menu-group .c-menu-group-icon img{height:24px;width:24px;object-fit:contain}.wrapper .c-body .c-menu .c-menu-tree{flex:1;display:flex;flex-direction:column;padding:3px 4px 3px 3px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon{cursor:pointer;color:#757575;padding:0}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon.search{width:20px;height:20px;font-size:18px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon.cancel{width:16px;height:16px;font-size:16px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container{flex:1;overflow-y:scroll;scrollbar-width:none}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node{width:100%;display:flex;cursor:pointer;min-height:44px;padding:8px;border-radius:8px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-icon{display:flex;justify-content:center;align-items:center;height:100%}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description{flex:1;display:flex;align-items:center}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-content{flex:1;display:flex;align-items:center;flex-wrap:wrap;white-space:pre-wrap;font-size:15px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-icon-expand{display:flex;align-items:center;justify-content:start;background-color:transparent;border:none;font-size:20px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-icon-pin{display:flex;align-items:center;justify-content:start;background-color:transparent;border:none;font-size:18px;opacity:0}.wrapper .c-footer{height:80px}.wrapper .c-vertical{position:fixed;height:100vh;left:58px;width:2px;background-color:#f8f9fa;pointer-events:none}\n"], dependencies: [{ kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i3.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i3.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "component", type: i3.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i3.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: SdSuffixDefDirective, selector: "[sdSuffixDef]" }, { kind: "component", type: LayoutUserComponent$1, selector: "lib-layout-user", inputs: ["isMobileOrTablet", "isMenuLock", "isShowSidebar", "userInfo"], outputs: ["menuClosed", "menuOpened", "toggleMenuLock"] }, { kind: "pipe", type: SdSafeHtmlPipe, name: "sdSafeHtml" }, { kind: "pipe", type: MenuFocusPipe, name: "menuFocus" }, { kind: "pipe", type: HighlightSearchPipe, name: "highLightSearch" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SidebarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sidebar', standalone: true, imports: [
                         SdInput,
@@ -913,7 +913,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         LayoutUserComponent$1,
                         TranslatePipe,
                     ], template: "@let _userInfo = userInfo();\n@let _sidebar = sidebar();\n\n@if (_userInfo && _sidebar) {\n  <div class=\"wrapper\" [style.height]=\"isMobileOrTablet ? screenHeight + 'px' : '100%'\">\n    <div class=\"c-header\">\n      @if (_sidebar.logoUrl) {\n        <div class=\"c-logo\">\n          <a href=\"javascript:;\" (click)=\"openHomePage()\">\n            <img alt=\"logo\" [src]=\"_sidebar.logoUrl\" />\n          </a>\n        </div>\n      }\n      <div class=\"c-title-menu-group\">\n        <span>{{ titleMenuGroup() || _sidebar.defaultTitle || 'Back Office' }}</span>\n      </div>\n    </div>\n    <div class=\"c-body\">\n      <div class=\"c-menu\">\n        <div class=\"c-menu-group\">\n          @if (_sidebar?.pin?.enabled && pinnedMenuGroup().children?.length) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, pinnedMenuGroup())\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, pinnedMenuGroup())\"\n              (click)=\"expandPinnedGroup()\"\n              [matTooltip]=\"'\u0110\u00E3 ghim'\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              <mat-icon\n                class=\"c-menu-group-icon\"\n                [ngStyle]=\"{\n                  color: isPinnedMenuGroupActive() ? _sidebar.brandColor || '#2962FF' : '#8C8C8C',\n                  backgroundColor: isPinnedMenuGroupActive() ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\n                }\">\n                push_pin\n              </mat-icon>\n            </button>\n          }\n          @for (nodeMenuGroup of menus(); track nodeMenuGroup.id) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, nodeMenuGroup)\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, nodeMenuGroup)\"\n              (click)=\"expandMenuGroup(nodeMenuGroup)\"\n              [matTooltip]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              @if (nodeMenuGroup.iconUrl) {\n                <span\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    backgroundColor: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\n                  }\">\n                  <img width=\"24px\" height=\"24px\" [src]=\"nodeMenuGroup.iconUrl\" [alt]=\"nodeMenuGroup.title\" />\n                </span>\n              } @else {\n                <mat-icon\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    color: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandColor || '#2962FF' : '#8C8C8C',\n                    backgroundColor: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\n                  }\">\n                  {{ nodeMenuGroup.icon || 'widgets' }}\n                </mat-icon>\n              }\n            </button>\n          }\n        </div>\n        <div class=\"c-menu-tree\">\n          @if (totalMenuInMenusByGroup() >= 10) {\n            <div style=\"padding: 0px 4px\" class=\"c-menu-tree-search\">\n              <sd-input size=\"sm\" [placeholder]=\"'core.module.layout.sidebar.search' | translate\" [model]=\"searchText()\" (sdChange)=\"onFilterSearchText($event)\">\n                <ng-template sdSuffixDef>\n                  @if (searchText()) {\n                    <mat-icon class=\"c-search-prefix-icon cancel\" (click)=\"onClearSearchText()\">cancel</mat-icon>\n                  } @else {\n                    <mat-icon class=\"c-search-prefix-icon search\">search</mat-icon>\n                  }\n                </ng-template>\n              </sd-input>\n            </div>\n          }\n          <div class=\"c-menu-tree-container\">\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\n              <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\n                <li\n                  class=\"c-menu-node\"\n                  (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                  (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\n                  [ngStyle]=\"{\n                    backgroundColor: (currentPath() | menuFocus: node) ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\n                  }\">\n                  <div aria-hidden=\"true\" class=\"c-menu-node-description\" (click)=\"navigate(node)\" [class.d-none]=\"!isShowSidebar()\">\n                    <div\n                      class=\"c-menu-node-description-content\"\n                      [ngStyle]=\"{\n                        color: (currentPath() | menuFocus: node) ? _sidebar.brandColor || '#2962FF' : '#1F1F1F',\n                      }\"\n                      [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\n\n                    @if (_sidebar?.pin?.enabled) {\n                      <mat-icon\n                        class=\"c-menu-node-description-icon-pin\"\n                        [fontSet]=\"isPinnedNode(node) ? 'material-icons' : 'material-icons-outlined'\"\n                        [style.opacity]=\"isPinnedNode(node) || isHoveredNode(node) ? '1' : null\"\n                        [style.color]=\"isPinnedNode(node) || isHoveredNode(node) ? sidebar().brandColor || '#2962FF' : null\"\n                        (click)=\"onTogglePin($event, node)\"\n                        >push_pin\n                      </mat-icon>\n                    }\n                  </div>\n                </li>\n              </mat-nested-tree-node>\n\n              <mat-nested-tree-node\n                *matTreeNodeDef=\"let node; when: hasChild\"\n                aria-hidden=\"true\"\n                [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath() | menuFocus: node }\">\n                <li>\n                  <div\n                    class=\"c-menu-node\"\n                    (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                    (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\n                    <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\n                      <div [class.d-none]=\"!isShowSidebar()\" class=\"c-menu-node-description\" (click)=\"onToggleMenuNode(node)\">\n                        <div\n                          class=\"c-menu-node-description-content\"\n                          [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\n                        <mat-icon class=\"c-menu-node-description-icon-expand\">\n                          {{ treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\n                        </mat-icon>\n                      </div>\n                    </div>\n                  </div>\n                  <ul class=\"p-0\" [class.d-none]=\"!treeControl.isExpanded(node)\">\n                    <ng-container matTreeNodeOutlet></ng-container>\n                  </ul>\n                </li>\n              </mat-nested-tree-node>\n            </mat-tree>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"c-footer\">\n      <lib-layout-user\n        [userInfo]=\"_userInfo\"\n        [isMobileOrTablet]=\"isMobileOrTablet\"\n        (menuOpened)=\"onUserMenuOpened()\"\n        (menuClosed)=\"onUserMenuClosed()\"\n        [isShowSidebar]=\"isShowSidebar()\"\n        (toggleMenuLock)=\"toggleMenuLock($event)\">\n      </lib-layout-user>\n    </div>\n\n    <div class=\"c-vertical\"></div>\n  </div>\n}\n", styles: ["::ng-deep .mat-mdc-tooltip-panel:has(.c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140){pointer-events:none}:host ::ng-deep .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:16px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:32px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:48px!important}ul,li{margin-top:0;margin-bottom:0;list-style-type:none}.wrapper{display:flex;flex-direction:column;width:290px;background-color:#fff}.wrapper .c-header{display:flex;align-items:center;height:52px;padding:3px;gap:16px}.wrapper .c-header .c-logo{display:flex;justify-content:center;align-items:center;width:52px;height:52px}.wrapper .c-header .c-logo img{width:32px;height:32px;object-fit:cover}.wrapper .c-header .c-title-menu-group{display:flex;align-items:center;font-size:18px;font-weight:500;flex:1}.wrapper .c-body{flex:1;overflow-y:hidden}.wrapper .c-body .c-menu{height:100%;display:flex}.wrapper .c-body .c-menu .c-menu-group{display:flex;flex-direction:column;align-items:center;width:60px;overflow-y:scroll;scrollbar-width:none}.wrapper .c-body .c-menu .c-menu-group .c-menu-group-icon{display:flex;justify-content:center;align-items:center;min-height:50px;width:52px;border-radius:8px;transition:all .15s}.wrapper .c-body .c-menu .c-menu-group .c-menu-group-icon img{height:24px;width:24px;object-fit:contain}.wrapper .c-body .c-menu .c-menu-tree{flex:1;display:flex;flex-direction:column;padding:3px 4px 3px 3px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon{cursor:pointer;color:#757575;padding:0}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon.search{width:20px;height:20px;font-size:18px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon.cancel{width:16px;height:16px;font-size:16px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container{flex:1;overflow-y:scroll;scrollbar-width:none}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node{width:100%;display:flex;cursor:pointer;min-height:44px;padding:8px;border-radius:8px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-icon{display:flex;justify-content:center;align-items:center;height:100%}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description{flex:1;display:flex;align-items:center}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-content{flex:1;display:flex;align-items:center;flex-wrap:wrap;white-space:pre-wrap;font-size:15px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-icon-expand{display:flex;align-items:center;justify-content:start;background-color:transparent;border:none;font-size:20px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-icon-pin{display:flex;align-items:center;justify-content:start;background-color:transparent;border:none;font-size:18px;opacity:0}.wrapper .c-footer{height:80px}.wrapper .c-vertical{position:fixed;height:100vh;left:58px;width:2px;background-color:#f8f9fa;pointer-events:none}\n"] }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { isShowSidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "isShowSidebar", required: true }] }], menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: true }] }], userInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfo", required: true }] }], sidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebar", required: true }] }], expandSideBar: [{ type: i0.Output, args: ["expandSideBar"] }], popupUserMenuClosed: [{ type: i0.Output, args: ["popupUserMenuClosed"] }], popupUserMenuOpened: [{ type: i0.Output, args: ["popupUserMenuOpened"] }], showSideBar: [{ type: i0.Output, args: ["showSideBar"] }] } });
 
 class SidebarV1Component {
     // ==========================================
@@ -924,18 +924,18 @@ class SidebarV1Component {
     // VIEW CHILD & INPUTS
     // ==========================================
     sidenav = viewChild.required('sidenav');
-    menus = input([]);
-    userInfo = input.required();
-    sidebar = input.required();
+    menus = input([], ...(ngDevMode ? [{ debugName: "menus" }] : []));
+    userInfo = input.required(...(ngDevMode ? [{ debugName: "userInfo" }] : []));
+    sidebar = input.required(...(ngDevMode ? [{ debugName: "sidebar" }] : []));
     // ==========================================
     // STATE SIGNALS
     // ==========================================
-    isMobileOrTablet = signal(BrowserUtilities.isMobile());
+    isMobileOrTablet = signal(BrowserUtilities.isMobile(), ...(ngDevMode ? [{ debugName: "isMobileOrTablet" }] : []));
     // Trạng thái khóa menu (luôn mở rộng hay không)
-    isMenuLock = signal(this.#layoutStorageService.menuLockStatus?.get() ?? true);
+    isMenuLock = signal(this.#layoutStorageService.menuLockStatus?.get() ?? true, ...(ngDevMode ? [{ debugName: "isMenuLock" }] : []));
     // Trạng thái hiển thị (mở/đóng) của Sidenav
-    isShowSidebar = signal(BrowserUtilities.isMobile() ? false : (this.#layoutStorageService.menuLockStatus?.get() ?? true));
-    onhover = signal(false);
+    isShowSidebar = signal(BrowserUtilities.isMobile() ? false : (this.#layoutStorageService.menuLockStatus?.get() ?? true), ...(ngDevMode ? [{ debugName: "isShowSidebar" }] : []));
+    onhover = signal(false, ...(ngDevMode ? [{ debugName: "onhover" }] : []));
     // ==========================================
     // PRIVATE TIMERS
     // ==========================================
@@ -1027,13 +1027,13 @@ class SidebarV1Component {
             }
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SidebarV1Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.21", type: SidebarV1Component, isStandalone: true, selector: "sidebar-v1", inputs: { menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-sidenav-container class=\"c-layout-wrapper\">\n  <mat-sidenav\n    #sidenav\n    [opened]=\"isShowSidebar()\"\n    (openedChange)=\"isShowSidebar.set($event)\"\n    class=\"c-layout-sidebar\"\n    (click)=\"openSidebar()\"\n    (mouseleave)=\"onMouseleaveSideBar()\"\n    [mode]=\"isMobileOrTablet() ? 'over' : 'side'\"\n    [fixedInViewport]=\"isMobileOrTablet()\">\n    <sidebar\n      [menus]=\"menus()\"\n      [userInfo]=\"userInfo()\"\n      [sidebar]=\"sidebar()\"\n      [isShowSidebar]=\"isShowSidebar()\"\n      (showSideBar)=\"onToggle($event)\"\n      (expandSideBar)=\"onExpandSideBar()\"\n      (popupUserMenuOpened)=\"onPopupOfSideBarOpened()\"\n      (popupUserMenuClosed)=\"onPopupOfSideBarClosed()\">\n    </sidebar>\n  </mat-sidenav>\n\n  <mat-sidenav-content class=\"c-layout-content\" [class.isShowSidebar]=\"isMenuLock()\">\n    <mat-drawer-container class=\"c-mat-drawer-container\">\n      <mat-drawer-content>\n        <ng-content></ng-content>\n      </mat-drawer-content>\n    </mat-drawer-container>\n  </mat-sidenav-content>\n</mat-sidenav-container>", styles: [":host ::ng-deep .c-layout-wrapper{width:100%}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar{margin-top:0;width:60px;height:100vh!important;transform:none!important;overflow:hidden!important;visibility:visible!important;transition:width .15s!important;box-shadow:0 0 6px #0003!important}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar .mat-drawer-inner-container{position:relative;overflow:visible;display:block!important}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar.mat-drawer-opened{width:290px;transition:width .15s}:host ::ng-deep .c-layout-wrapper .c-layout-content{background-color:#fff;box-sizing:border-box;height:100vh!important;margin-left:60px!important}:host ::ng-deep .c-layout-wrapper .c-layout-content.isShowSidebar{margin-left:290px!important}:host ::ng-deep .c-layout-wrapper .c-layout-content .c-mat-drawer-container{height:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$5.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i1$5.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i1$5.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1$5.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1$5.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: SidebarComponent, selector: "sidebar", inputs: ["isShowSidebar", "menus", "userInfo", "sidebar"], outputs: ["expandSideBar", "popupUserMenuClosed", "popupUserMenuOpened", "showSideBar"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SidebarV1Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.23", type: SidebarV1Component, isStandalone: true, selector: "sidebar-v1", inputs: { menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-sidenav-container class=\"c-layout-wrapper\">\n  <mat-sidenav\n    #sidenav\n    [opened]=\"isShowSidebar()\"\n    (openedChange)=\"isShowSidebar.set($event)\"\n    class=\"c-layout-sidebar\"\n    (click)=\"openSidebar()\"\n    (mouseleave)=\"onMouseleaveSideBar()\"\n    [mode]=\"isMobileOrTablet() ? 'over' : 'side'\"\n    [fixedInViewport]=\"isMobileOrTablet()\">\n    <sidebar\n      [menus]=\"menus()\"\n      [userInfo]=\"userInfo()\"\n      [sidebar]=\"sidebar()\"\n      [isShowSidebar]=\"isShowSidebar()\"\n      (showSideBar)=\"onToggle($event)\"\n      (expandSideBar)=\"onExpandSideBar()\"\n      (popupUserMenuOpened)=\"onPopupOfSideBarOpened()\"\n      (popupUserMenuClosed)=\"onPopupOfSideBarClosed()\">\n    </sidebar>\n  </mat-sidenav>\n\n  <mat-sidenav-content class=\"c-layout-content\" [class.isShowSidebar]=\"isMenuLock()\">\n    <mat-drawer-container class=\"c-mat-drawer-container\">\n      <mat-drawer-content>\n        <ng-content></ng-content>\n      </mat-drawer-content>\n    </mat-drawer-container>\n  </mat-sidenav-content>\n</mat-sidenav-container>", styles: [":host ::ng-deep .c-layout-wrapper{width:100%}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar{margin-top:0;width:60px;height:100vh!important;transform:none!important;overflow:hidden!important;visibility:visible!important;transition:width .15s!important;box-shadow:0 0 6px #0003!important}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar .mat-drawer-inner-container{position:relative;overflow:visible;display:block!important}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar.mat-drawer-opened{width:290px;transition:width .15s}:host ::ng-deep .c-layout-wrapper .c-layout-content{background-color:#fff;box-sizing:border-box;height:100vh!important;margin-left:60px!important}:host ::ng-deep .c-layout-wrapper .c-layout-content.isShowSidebar{margin-left:290px!important}:host ::ng-deep .c-layout-wrapper .c-layout-content .c-mat-drawer-container{height:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$5.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i1$5.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i1$5.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1$5.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1$5.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: SidebarComponent, selector: "sidebar", inputs: ["isShowSidebar", "menus", "userInfo", "sidebar"], outputs: ["expandSideBar", "popupUserMenuClosed", "popupUserMenuOpened", "showSideBar"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SidebarV1Component, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SidebarV1Component, decorators: [{
             type: Component,
             args: [{ selector: 'sidebar-v1', imports: [MatSidenavModule, CommonModule, SidebarComponent], standalone: true, template: "<mat-sidenav-container class=\"c-layout-wrapper\">\n  <mat-sidenav\n    #sidenav\n    [opened]=\"isShowSidebar()\"\n    (openedChange)=\"isShowSidebar.set($event)\"\n    class=\"c-layout-sidebar\"\n    (click)=\"openSidebar()\"\n    (mouseleave)=\"onMouseleaveSideBar()\"\n    [mode]=\"isMobileOrTablet() ? 'over' : 'side'\"\n    [fixedInViewport]=\"isMobileOrTablet()\">\n    <sidebar\n      [menus]=\"menus()\"\n      [userInfo]=\"userInfo()\"\n      [sidebar]=\"sidebar()\"\n      [isShowSidebar]=\"isShowSidebar()\"\n      (showSideBar)=\"onToggle($event)\"\n      (expandSideBar)=\"onExpandSideBar()\"\n      (popupUserMenuOpened)=\"onPopupOfSideBarOpened()\"\n      (popupUserMenuClosed)=\"onPopupOfSideBarClosed()\">\n    </sidebar>\n  </mat-sidenav>\n\n  <mat-sidenav-content class=\"c-layout-content\" [class.isShowSidebar]=\"isMenuLock()\">\n    <mat-drawer-container class=\"c-mat-drawer-container\">\n      <mat-drawer-content>\n        <ng-content></ng-content>\n      </mat-drawer-content>\n    </mat-drawer-container>\n  </mat-sidenav-content>\n</mat-sidenav-container>", styles: [":host ::ng-deep .c-layout-wrapper{width:100%}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar{margin-top:0;width:60px;height:100vh!important;transform:none!important;overflow:hidden!important;visibility:visible!important;transition:width .15s!important;box-shadow:0 0 6px #0003!important}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar .mat-drawer-inner-container{position:relative;overflow:visible;display:block!important}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar.mat-drawer-opened{width:290px;transition:width .15s}:host ::ng-deep .c-layout-wrapper .c-layout-content{background-color:#fff;box-sizing:border-box;height:100vh!important;margin-left:60px!important}:host ::ng-deep .c-layout-wrapper .c-layout-content.isShowSidebar{margin-left:290px!important}:host ::ng-deep .c-layout-wrapper .c-layout-content .c-mat-drawer-container{height:100%}\n"] }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { sidenav: [{ type: i0.ViewChild, args: ['sidenav', { isSignal: true }] }], menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: false }] }], userInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfo", required: true }] }], sidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebar", required: true }] }] } });
 
 class LayoutUserComponent {
     // ==========================================
@@ -1043,10 +1043,10 @@ class LayoutUserComponent {
     // ==========================================
     // SIGNAL INPUTS & OUTPUTS
     // ==========================================
-    isMobileOrTablet = input(false);
-    isMenuLock = input(false);
-    isShowSidebar = input(false);
-    userInfo = input.required();
+    isMobileOrTablet = input(false, ...(ngDevMode ? [{ debugName: "isMobileOrTablet" }] : []));
+    isMenuLock = input(false, ...(ngDevMode ? [{ debugName: "isMenuLock" }] : []));
+    isShowSidebar = input(false, ...(ngDevMode ? [{ debugName: "isShowSidebar" }] : []));
+    userInfo = input.required(...(ngDevMode ? [{ debugName: "userInfo" }] : []));
     menuClosed = output();
     menuOpened = output();
     toggleMenuLock = output();
@@ -1054,7 +1054,7 @@ class LayoutUserComponent {
     singoutLayoutConfig = this.#layoutConfiguration.signout;
     changePasswordLayoutConfig = this.#layoutConfiguration?.changePassword;
     // Accordion state for mobile inline expand
-    isExpanded = signal(false);
+    isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
     // ==========================================
     // EVENT HANDLERS
     // ==========================================
@@ -1085,13 +1085,13 @@ class LayoutUserComponent {
     onToggleMenuLock = (event) => {
         this.toggleMenuLock.emit(event);
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LayoutUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: LayoutUserComponent, isStandalone: true, selector: "lib-layout-user", inputs: { isMobileOrTablet: { classPropertyName: "isMobileOrTablet", publicName: "isMobileOrTablet", isSignal: true, isRequired: false, transformFunction: null }, isMenuLock: { classPropertyName: "isMenuLock", publicName: "isMenuLock", isSignal: true, isRequired: false, transformFunction: null }, isShowSidebar: { classPropertyName: "isShowSidebar", publicName: "isShowSidebar", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { menuClosed: "menuClosed", menuOpened: "menuOpened", toggleMenuLock: "toggleMenuLock" }, ngImport: i0, template: "@let _userInfo = userInfo();\n@let avatar = _userInfo?.avatar || _userInfo?.fullName || _userInfo?.username || _userInfo?.email;\n\n@if (isMobileOrTablet()) {\n  <!-- Mobile: accordion inline expand -->\n  <div class=\"m-user-card\">\n    <button class=\"m-user-row\" (click)=\"toggleExpanded()\">\n      <sd-avatar [src]=\"avatar\" [size]=\"44\"></sd-avatar>\n      <div class=\"m-user-info\">\n        <span class=\"m-user-name\">{{ _userInfo?.fullName || _userInfo?.username }}</span>\n        @if (_userInfo?.email) {\n          <span class=\"m-user-email\">{{ _userInfo?.email }}</span>\n        }\n      </div>\n      <mat-icon class=\"m-expand-icon\" [class.m-expand-icon--open]=\"isExpanded()\">\n        keyboard_arrow_down\n      </mat-icon>\n    </button>\n\n    @if (isExpanded()) {\n      <div class=\"m-user-body\">\n        @if (changePasswordLayoutConfig) {\n          <button class=\"m-user-action\" (click)=\"changePassword()\">\n            <mat-icon>lock_outline</mat-icon>\n            <span>{{ 'core.module.layout.user.change-password' | translate }}</span>\n          </button>\n        }\n        <button class=\"m-user-action m-user-action--logout\" (click)=\"logout()\">\n          <mat-icon>logout</mat-icon>\n          <span>{{ 'core.module.layout.user.logout' | translate }}</span>\n        </button>\n      </div>\n    }\n  </div>\n} @else {\n  <!-- Desktop: ch\u1EC9 hi\u1EC3n th\u1ECB avatar + n\u00FAt toggle -->\n  <div class=\"c-layout-user-wrapper\">\n    <div class=\"c-layout-user-avatar\" [matMenuTriggerFor]=\"userMenu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\">\n      <sd-avatar [src]=\"avatar\" [size]=\"32\"></sd-avatar>\n    </div>\n\n    <div aria-hidden=\"true\" mat-mini-fab class=\"c-layout-icon-toggle\" (click)=\"onToggleMenuLock($event)\">\n      <mat-icon style=\"color: #8c8c8c\">\n        {{ isShowSidebar() ? 'keyboard_arrow_right' : 'keyboard_arrow_left' }}\n      </mat-icon>\n    </div>\n  </div>\n}\n\n<mat-menu #userMenu=\"matMenu\" xPosition=\"before\" backdropClass=\"c-user-menu-backdrop-f90ce131-fa4c-4f71-a49b-ab7fa374fdd0\">\n  <div aria-hidden=\"true\" class=\"c-user-menu-wrapper\" (click)=\"keepOpenWhenClickInsideMenu($event)\">\n    <div class=\"c-user-info-wrapper\">\n      <div class=\"c-user-avatar\">\n        <sd-avatar [src]=\"avatar\" [size]=\"40\"></sd-avatar>\n      </div>\n      <span class=\"c-user-name\">{{ _userInfo?.fullName || _userInfo?.username }}</span>\n      <span class=\"c-user-email\">{{ _userInfo?.email }}</span>\n    </div>\n\n    @if (changePasswordLayoutConfig) {\n      <div class=\"c-sign-button-wrapper\">\n        <button class=\"c-account-options\" (click)=\"changePassword()\">\n          <mat-icon fontSet=\"material-icons-outlined\">lock</mat-icon>\n          <span>{{ 'core.module.layout.user.change-password' | translate }}</span>\n        </button>\n      </div>\n    }\n\n    <div class=\"c-sign-button-wrapper\">\n      <button class=\"c-sign-button\" mat-flat-button (click)=\"logout()\">{{ 'core.module.layout.user.logout' | translate }}</button>\n    </div>\n  </div>\n</mat-menu>\n", styles: ["@media(min-width:1024px){::ng-deep .c-user-menu-backdrop-f90ce131-fa4c-4f71-a49b-ab7fa374fdd0+* .cdk-overlay-pane{transform:translate(277px,83px)}}.m-user-card{width:100%}.m-user-row{display:flex;align-items:center;gap:12px;width:100%;padding:0;border:none;background:transparent;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}.m-user-info{flex:1;display:flex;flex-direction:column;gap:2px;overflow:hidden}.m-user-name{font-size:15px;font-weight:600;color:#1f1f1f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m-user-email{font-size:13px;color:#8c8c8c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m-expand-icon{color:#8c8c8c;flex-shrink:0;transition:transform .2s ease}.m-expand-icon--open{transform:rotate(180deg)}.m-user-body{margin-top:8px;border-top:1px solid #EBEBEB;padding-top:4px;display:flex;flex-direction:column}.m-user-action{display:flex;align-items:center;gap:12px;width:100%;padding:12px 4px;border:none;background:transparent;cursor:pointer;font-size:15px;color:#1f1f1f;-webkit-tap-highlight-color:transparent}.m-user-action mat-icon{color:#8c8c8c;font-size:20px;width:20px;height:20px}.m-user-action:active{background-color:#f5f5f5}.m-user-action--logout{color:#e53935}.m-user-action--logout mat-icon{color:#e53935}.c-layout-user-wrapper{display:flex;flex-direction:column;align-items:center;width:60px;height:80px}.c-layout-user-wrapper .c-layout-user-avatar{width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer}.c-layout-user-wrapper .c-layout-icon-toggle{background-color:transparent;border-top:1px solid #f0f0f0;box-shadow:none;margin-top:10px;width:32px;height:40px;display:flex;justify-content:center;align-items:center;cursor:pointer}.c-user-menu-wrapper .c-user-info-wrapper{width:250px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px}.c-user-menu-wrapper .c-user-info-wrapper .c-user-avatar{width:40px;height:40px}.c-user-menu-wrapper .c-user-info-wrapper .c-user-name{font-size:16px;font-weight:700;text-align:center}.c-user-menu-wrapper .c-user-info-wrapper .c-user-email{font-size:14px;color:#7a7a7a;text-align:center}.c-user-menu-wrapper .c-sign-button-wrapper{text-align:center;padding:16px 16px 8px;width:100%;border-top:1px solid #dee2e6}.c-user-menu-wrapper .c-sign-button-wrapper .c-account-options{all:unset;cursor:pointer;font-size:14px;display:flex;align-items:center;gap:8px}.c-user-menu-wrapper .c-sign-button-wrapper .c-account-options mat-icon{font-size:21px;width:21px;height:21px;color:#8c8c8c}.c-user-menu-wrapper .c-sign-button-wrapper .c-sign-button{width:100%;color:#000;padding:16px;font-weight:700;background-color:#eef0f2}.c-avatar{max-width:100%;object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: SdAvatar, selector: "sd-avatar", inputs: ["src", "size"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: LayoutUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: LayoutUserComponent, isStandalone: true, selector: "lib-layout-user", inputs: { isMobileOrTablet: { classPropertyName: "isMobileOrTablet", publicName: "isMobileOrTablet", isSignal: true, isRequired: false, transformFunction: null }, isMenuLock: { classPropertyName: "isMenuLock", publicName: "isMenuLock", isSignal: true, isRequired: false, transformFunction: null }, isShowSidebar: { classPropertyName: "isShowSidebar", publicName: "isShowSidebar", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { menuClosed: "menuClosed", menuOpened: "menuOpened", toggleMenuLock: "toggleMenuLock" }, ngImport: i0, template: "@let _userInfo = userInfo();\n@let avatar = _userInfo?.avatar || _userInfo?.fullName || _userInfo?.username || _userInfo?.email;\n\n@if (isMobileOrTablet()) {\n  <!-- Mobile: accordion inline expand -->\n  <div class=\"m-user-card\">\n    <button class=\"m-user-row\" (click)=\"toggleExpanded()\">\n      <sd-avatar [src]=\"avatar\" [size]=\"44\"></sd-avatar>\n      <div class=\"m-user-info\">\n        <span class=\"m-user-name\">{{ _userInfo?.fullName || _userInfo?.username }}</span>\n        @if (_userInfo?.email) {\n          <span class=\"m-user-email\">{{ _userInfo?.email }}</span>\n        }\n      </div>\n      <mat-icon class=\"m-expand-icon\" [class.m-expand-icon--open]=\"isExpanded()\">\n        keyboard_arrow_down\n      </mat-icon>\n    </button>\n\n    @if (isExpanded()) {\n      <div class=\"m-user-body\">\n        @if (changePasswordLayoutConfig) {\n          <button class=\"m-user-action\" (click)=\"changePassword()\">\n            <mat-icon>lock_outline</mat-icon>\n            <span>{{ 'core.module.layout.user.change-password' | translate }}</span>\n          </button>\n        }\n        <button class=\"m-user-action m-user-action--logout\" (click)=\"logout()\">\n          <mat-icon>logout</mat-icon>\n          <span>{{ 'core.module.layout.user.logout' | translate }}</span>\n        </button>\n      </div>\n    }\n  </div>\n} @else {\n  <!-- Desktop: ch\u1EC9 hi\u1EC3n th\u1ECB avatar + n\u00FAt toggle -->\n  <div class=\"c-layout-user-wrapper\">\n    <div class=\"c-layout-user-avatar\" [matMenuTriggerFor]=\"userMenu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\">\n      <sd-avatar [src]=\"avatar\" [size]=\"32\"></sd-avatar>\n    </div>\n\n    <div aria-hidden=\"true\" mat-mini-fab class=\"c-layout-icon-toggle\" (click)=\"onToggleMenuLock($event)\">\n      <mat-icon style=\"color: #8c8c8c\">\n        {{ isShowSidebar() ? 'keyboard_arrow_right' : 'keyboard_arrow_left' }}\n      </mat-icon>\n    </div>\n  </div>\n}\n\n<mat-menu #userMenu=\"matMenu\" xPosition=\"before\" backdropClass=\"c-user-menu-backdrop-f90ce131-fa4c-4f71-a49b-ab7fa374fdd0\">\n  <div aria-hidden=\"true\" class=\"c-user-menu-wrapper\" (click)=\"keepOpenWhenClickInsideMenu($event)\">\n    <div class=\"c-user-info-wrapper\">\n      <div class=\"c-user-avatar\">\n        <sd-avatar [src]=\"avatar\" [size]=\"40\"></sd-avatar>\n      </div>\n      <span class=\"c-user-name\">{{ _userInfo?.fullName || _userInfo?.username }}</span>\n      <span class=\"c-user-email\">{{ _userInfo?.email }}</span>\n    </div>\n\n    @if (changePasswordLayoutConfig) {\n      <div class=\"c-sign-button-wrapper\">\n        <button class=\"c-account-options\" (click)=\"changePassword()\">\n          <mat-icon fontSet=\"material-icons-outlined\">lock</mat-icon>\n          <span>{{ 'core.module.layout.user.change-password' | translate }}</span>\n        </button>\n      </div>\n    }\n\n    <div class=\"c-sign-button-wrapper\">\n      <button class=\"c-sign-button\" mat-flat-button (click)=\"logout()\">{{ 'core.module.layout.user.logout' | translate }}</button>\n    </div>\n  </div>\n</mat-menu>\n", styles: ["@media(min-width:1024px){::ng-deep .c-user-menu-backdrop-f90ce131-fa4c-4f71-a49b-ab7fa374fdd0+* .cdk-overlay-pane{transform:translate(277px,83px)}}.m-user-card{width:100%}.m-user-row{display:flex;align-items:center;gap:12px;width:100%;padding:0;border:none;background:transparent;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}.m-user-info{flex:1;display:flex;flex-direction:column;gap:2px;overflow:hidden}.m-user-name{font-size:15px;font-weight:600;color:#1f1f1f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m-user-email{font-size:13px;color:#8c8c8c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m-expand-icon{color:#8c8c8c;flex-shrink:0;transition:transform .2s ease}.m-expand-icon--open{transform:rotate(180deg)}.m-user-body{margin-top:8px;border-top:1px solid #EBEBEB;padding-top:4px;display:flex;flex-direction:column}.m-user-action{display:flex;align-items:center;gap:12px;width:100%;padding:12px 4px;border:none;background:transparent;cursor:pointer;font-size:15px;color:#1f1f1f;-webkit-tap-highlight-color:transparent}.m-user-action mat-icon{color:#8c8c8c;font-size:20px;width:20px;height:20px}.m-user-action:active{background-color:#f5f5f5}.m-user-action--logout{color:#e53935}.m-user-action--logout mat-icon{color:#e53935}.c-layout-user-wrapper{display:flex;flex-direction:column;align-items:center;width:60px;height:80px}.c-layout-user-wrapper .c-layout-user-avatar{width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer}.c-layout-user-wrapper .c-layout-icon-toggle{background-color:transparent;border-top:1px solid #f0f0f0;box-shadow:none;margin-top:10px;width:32px;height:40px;display:flex;justify-content:center;align-items:center;cursor:pointer}.c-user-menu-wrapper .c-user-info-wrapper{width:250px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px}.c-user-menu-wrapper .c-user-info-wrapper .c-user-avatar{width:40px;height:40px}.c-user-menu-wrapper .c-user-info-wrapper .c-user-name{font-size:16px;font-weight:700;text-align:center}.c-user-menu-wrapper .c-user-info-wrapper .c-user-email{font-size:14px;color:#7a7a7a;text-align:center}.c-user-menu-wrapper .c-sign-button-wrapper{text-align:center;padding:16px 16px 8px;width:100%;border-top:1px solid #dee2e6}.c-user-menu-wrapper .c-sign-button-wrapper .c-account-options{all:unset;cursor:pointer;font-size:14px;display:flex;align-items:center;gap:8px}.c-user-menu-wrapper .c-sign-button-wrapper .c-account-options mat-icon{font-size:21px;width:21px;height:21px;color:#8c8c8c}.c-user-menu-wrapper .c-sign-button-wrapper .c-sign-button{width:100%;color:#000;padding:16px;font-weight:700;background-color:#eef0f2}.c-avatar{max-width:100%;object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: SdAvatar, selector: "sd-avatar", inputs: ["src", "size"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LayoutUserComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: LayoutUserComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-layout-user', imports: [MatMenuModule, MatButtonModule, MatIconModule, MatTooltipModule, SdAvatar, TranslatePipe], standalone: true, template: "@let _userInfo = userInfo();\n@let avatar = _userInfo?.avatar || _userInfo?.fullName || _userInfo?.username || _userInfo?.email;\n\n@if (isMobileOrTablet()) {\n  <!-- Mobile: accordion inline expand -->\n  <div class=\"m-user-card\">\n    <button class=\"m-user-row\" (click)=\"toggleExpanded()\">\n      <sd-avatar [src]=\"avatar\" [size]=\"44\"></sd-avatar>\n      <div class=\"m-user-info\">\n        <span class=\"m-user-name\">{{ _userInfo?.fullName || _userInfo?.username }}</span>\n        @if (_userInfo?.email) {\n          <span class=\"m-user-email\">{{ _userInfo?.email }}</span>\n        }\n      </div>\n      <mat-icon class=\"m-expand-icon\" [class.m-expand-icon--open]=\"isExpanded()\">\n        keyboard_arrow_down\n      </mat-icon>\n    </button>\n\n    @if (isExpanded()) {\n      <div class=\"m-user-body\">\n        @if (changePasswordLayoutConfig) {\n          <button class=\"m-user-action\" (click)=\"changePassword()\">\n            <mat-icon>lock_outline</mat-icon>\n            <span>{{ 'core.module.layout.user.change-password' | translate }}</span>\n          </button>\n        }\n        <button class=\"m-user-action m-user-action--logout\" (click)=\"logout()\">\n          <mat-icon>logout</mat-icon>\n          <span>{{ 'core.module.layout.user.logout' | translate }}</span>\n        </button>\n      </div>\n    }\n  </div>\n} @else {\n  <!-- Desktop: ch\u1EC9 hi\u1EC3n th\u1ECB avatar + n\u00FAt toggle -->\n  <div class=\"c-layout-user-wrapper\">\n    <div class=\"c-layout-user-avatar\" [matMenuTriggerFor]=\"userMenu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\">\n      <sd-avatar [src]=\"avatar\" [size]=\"32\"></sd-avatar>\n    </div>\n\n    <div aria-hidden=\"true\" mat-mini-fab class=\"c-layout-icon-toggle\" (click)=\"onToggleMenuLock($event)\">\n      <mat-icon style=\"color: #8c8c8c\">\n        {{ isShowSidebar() ? 'keyboard_arrow_right' : 'keyboard_arrow_left' }}\n      </mat-icon>\n    </div>\n  </div>\n}\n\n<mat-menu #userMenu=\"matMenu\" xPosition=\"before\" backdropClass=\"c-user-menu-backdrop-f90ce131-fa4c-4f71-a49b-ab7fa374fdd0\">\n  <div aria-hidden=\"true\" class=\"c-user-menu-wrapper\" (click)=\"keepOpenWhenClickInsideMenu($event)\">\n    <div class=\"c-user-info-wrapper\">\n      <div class=\"c-user-avatar\">\n        <sd-avatar [src]=\"avatar\" [size]=\"40\"></sd-avatar>\n      </div>\n      <span class=\"c-user-name\">{{ _userInfo?.fullName || _userInfo?.username }}</span>\n      <span class=\"c-user-email\">{{ _userInfo?.email }}</span>\n    </div>\n\n    @if (changePasswordLayoutConfig) {\n      <div class=\"c-sign-button-wrapper\">\n        <button class=\"c-account-options\" (click)=\"changePassword()\">\n          <mat-icon fontSet=\"material-icons-outlined\">lock</mat-icon>\n          <span>{{ 'core.module.layout.user.change-password' | translate }}</span>\n        </button>\n      </div>\n    }\n\n    <div class=\"c-sign-button-wrapper\">\n      <button class=\"c-sign-button\" mat-flat-button (click)=\"logout()\">{{ 'core.module.layout.user.logout' | translate }}</button>\n    </div>\n  </div>\n</mat-menu>\n", styles: ["@media(min-width:1024px){::ng-deep .c-user-menu-backdrop-f90ce131-fa4c-4f71-a49b-ab7fa374fdd0+* .cdk-overlay-pane{transform:translate(277px,83px)}}.m-user-card{width:100%}.m-user-row{display:flex;align-items:center;gap:12px;width:100%;padding:0;border:none;background:transparent;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}.m-user-info{flex:1;display:flex;flex-direction:column;gap:2px;overflow:hidden}.m-user-name{font-size:15px;font-weight:600;color:#1f1f1f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m-user-email{font-size:13px;color:#8c8c8c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m-expand-icon{color:#8c8c8c;flex-shrink:0;transition:transform .2s ease}.m-expand-icon--open{transform:rotate(180deg)}.m-user-body{margin-top:8px;border-top:1px solid #EBEBEB;padding-top:4px;display:flex;flex-direction:column}.m-user-action{display:flex;align-items:center;gap:12px;width:100%;padding:12px 4px;border:none;background:transparent;cursor:pointer;font-size:15px;color:#1f1f1f;-webkit-tap-highlight-color:transparent}.m-user-action mat-icon{color:#8c8c8c;font-size:20px;width:20px;height:20px}.m-user-action:active{background-color:#f5f5f5}.m-user-action--logout{color:#e53935}.m-user-action--logout mat-icon{color:#e53935}.c-layout-user-wrapper{display:flex;flex-direction:column;align-items:center;width:60px;height:80px}.c-layout-user-wrapper .c-layout-user-avatar{width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer}.c-layout-user-wrapper .c-layout-icon-toggle{background-color:transparent;border-top:1px solid #f0f0f0;box-shadow:none;margin-top:10px;width:32px;height:40px;display:flex;justify-content:center;align-items:center;cursor:pointer}.c-user-menu-wrapper .c-user-info-wrapper{width:250px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px}.c-user-menu-wrapper .c-user-info-wrapper .c-user-avatar{width:40px;height:40px}.c-user-menu-wrapper .c-user-info-wrapper .c-user-name{font-size:16px;font-weight:700;text-align:center}.c-user-menu-wrapper .c-user-info-wrapper .c-user-email{font-size:14px;color:#7a7a7a;text-align:center}.c-user-menu-wrapper .c-sign-button-wrapper{text-align:center;padding:16px 16px 8px;width:100%;border-top:1px solid #dee2e6}.c-user-menu-wrapper .c-sign-button-wrapper .c-account-options{all:unset;cursor:pointer;font-size:14px;display:flex;align-items:center;gap:8px}.c-user-menu-wrapper .c-sign-button-wrapper .c-account-options mat-icon{font-size:21px;width:21px;height:21px;color:#8c8c8c}.c-user-menu-wrapper .c-sign-button-wrapper .c-sign-button{width:100%;color:#000;padding:16px;font-weight:700;background-color:#eef0f2}.c-avatar{max-width:100%;object-fit:cover}\n"] }]
-        }] });
+        }], propDecorators: { isMobileOrTablet: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobileOrTablet", required: false }] }], isMenuLock: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMenuLock", required: false }] }], isShowSidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "isShowSidebar", required: false }] }], userInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfo", required: true }] }], menuClosed: [{ type: i0.Output, args: ["menuClosed"] }], menuOpened: [{ type: i0.Output, args: ["menuOpened"] }], toggleMenuLock: [{ type: i0.Output, args: ["toggleMenuLock"] }] } });
 
 class SidebarMobileOverlayComponent {
     #router = inject(Router);
@@ -1100,10 +1100,10 @@ class SidebarMobileOverlayComponent {
     // ==========================================
     // INPUTS & OUTPUTS
     // ==========================================
-    isShowSidebar = input(false);
-    menus = input.required();
-    userInfo = input.required();
-    sidebar = input.required();
+    isShowSidebar = input(false, ...(ngDevMode ? [{ debugName: "isShowSidebar" }] : []));
+    menus = input.required(...(ngDevMode ? [{ debugName: "menus" }] : []));
+    userInfo = input.required(...(ngDevMode ? [{ debugName: "userInfo" }] : []));
+    sidebar = input.required(...(ngDevMode ? [{ debugName: "sidebar" }] : []));
     // showSideBar(null) = đóng sidebar (tương thích với onToggle của main component)
     showSideBar = output();
     expandSideBar = output();
@@ -1113,10 +1113,10 @@ class SidebarMobileOverlayComponent {
     // ==========================================
     // STATE SIGNALS
     // ==========================================
-    titleMenuGroup = signal('');
-    currentPath = signal(window.location.pathname);
+    titleMenuGroup = signal('', ...(ngDevMode ? [{ debugName: "titleMenuGroup" }] : []));
+    currentPath = signal(window.location.pathname, ...(ngDevMode ? [{ debugName: "currentPath" }] : []));
     // Lưu danh sách ID các menu group đang được mở
-    expandedMobileGroups = signal(new Set());
+    expandedMobileGroups = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedMobileGroups" }] : []));
     constructor() {
         // Bind title khi menus thay đổi
         effect(() => {
@@ -1239,10 +1239,10 @@ class SidebarMobileOverlayComponent {
         return this.#normalizePath(this.currentPath()).startsWith(this.#normalizePath(path));
     };
     #normalizePath = (p) => p.endsWith('/') ? p : p + '/';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SidebarMobileOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SidebarMobileOverlayComponent, isStandalone: true, selector: "sd-sidebar-mobile-overlay", inputs: { isShowSidebar: { classPropertyName: "isShowSidebar", publicName: "isShowSidebar", isSignal: true, isRequired: false, transformFunction: null }, menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: true, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { showSideBar: "showSideBar", expandSideBar: "expandSideBar", popupUserMenuOpened: "popupUserMenuOpened", popupUserMenuClosed: "popupUserMenuClosed", titleMenuGroupChanged: "titleMenuGroupChanged" }, ngImport: i0, template: "@let _userInfo = userInfo();\n@let _sidebar = sidebar();\n\n@if (_userInfo && _sidebar) {\n  <div\n    class=\"m-backdrop\"\n    [class.m-backdrop--visible]=\"isShowSidebar()\"\n    role=\"button\"\n    tabindex=\"0\"\n    (click)=\"onClose()\"\n    (keydown.escape)=\"onClose()\">\n  </div>\n\n  <div class=\"m-wrapper\" [class.m-wrapper--open]=\"isShowSidebar()\">\n    <div class=\"m-header\">\n      <div class=\"m-title-group\">\n        @if (_sidebar.logoUrl) {\n          <img class=\"m-logo\" alt=\"logo\" [src]=\"_sidebar.logoUrl\" />\n        }\n        <span class=\"m-title\">{{ titleMenuGroup() || _sidebar.defaultTitle || 'Back Office' }}</span>\n      </div>\n      <button class=\"m-close-btn\" (click)=\"onClose()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <div class=\"m-user-section\">\n      <lib-layout-user\n        [userInfo]=\"_userInfo\"\n        [isMobileOrTablet]=\"true\"\n        (menuOpened)=\"onUserMenuOpened()\"\n        (menuClosed)=\"onUserMenuClosed()\">\n      </lib-layout-user>\n    </div>\n\n    <div class=\"m-menu-list\">\n      @for (group of menus(); track group.id) {\n        <div class=\"m-menu-card\">\n          <button class=\"m-card-header\" (click)=\"toggleMobileGroup(group.id)\">\n            <div class=\"m-card-header-left\">\n              @if (group.iconUrl) {\n                <img class=\"m-group-icon\" [src]=\"group.iconUrl\" [alt]=\"group.title\" />\n              } @else {\n                <mat-icon class=\"m-group-icon\">{{ group.icon || 'widgets' }}</mat-icon>\n              }\n              <span class=\"m-group-title\">{{ group.title }}</span>\n            </div>\n            <mat-icon class=\"m-expand-icon\">\n              {{ expandedMobileGroups().has(group.id ?? '') ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\n            </mat-icon>\n          </button>\n\n          @if (expandedMobileGroups().has(group.id ?? '') && hasChildren(group)) {\n            <div class=\"m-card-body\">\n              @for (child of getChildren(group); track child.id) {\n                @if (hasChildren(child)) {\n                  <div class=\"m-sub-group\">\n                    <button class=\"m-sub-group-header\" (click)=\"toggleMobileGroup(child.id)\">\n                      <div class=\"m-item-left\">\n                        @if (child.iconUrl) {\n                          <img class=\"m-item-icon-img\" [src]=\"child.iconUrl\" alt=\"icon\" />\n                        } @else {\n                          <mat-icon class=\"m-item-icon\">{{ child.icon || 'folder' }}</mat-icon>\n                        }\n                        <span class=\"m-item-title\">{{ child.title }}</span>\n                      </div>\n                      <mat-icon class=\"m-expand-icon\">\n                        {{ expandedMobileGroups().has(child.id ?? '') ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\n                      </mat-icon>\n                    </button>\n                    @if (expandedMobileGroups().has(child.id ?? '')) {\n                      @for (subChild of getChildren(child); track subChild.id) {\n                        <button class=\"m-menu-item m-menu-item--indented\"\n                          (click)=\"navigate({ path: getPath(subChild), queryParams: getQueryParams(subChild) })\">\n                          <div class=\"m-item-left\">\n                            @if (subChild.iconUrl) {\n                              <img class=\"m-item-icon-img\" [src]=\"subChild.iconUrl\" alt=\"icon\" />\n                            } @else {\n                              <mat-icon class=\"m-item-icon\">{{ subChild.icon || 'insert_drive_file' }}</mat-icon>\n                            }\n                            <span class=\"m-item-title\">{{ subChild.title }}</span>\n                          </div>\n                          <mat-icon class=\"m-nav-icon\">chevron_right</mat-icon>\n                        </button>\n                      }\n                    }\n                  </div>\n                } @else {\n                  <button class=\"m-menu-item\" (click)=\"navigate({ path: getPath(child), queryParams: getQueryParams(child) })\">\n                    <div class=\"m-item-left\">\n                      @if (child.iconUrl) {\n                        <img class=\"m-item-icon-img\" [src]=\"child.iconUrl\" alt=\"icon\" />\n                      } @else {\n                        <mat-icon class=\"m-item-icon\">{{ child.icon || 'insert_drive_file' }}</mat-icon>\n                      }\n                      <span class=\"m-item-title\">{{ child.title }}</span>\n                    </div>\n                    <mat-icon class=\"m-nav-icon\">chevron_right</mat-icon>\n                  </button>\n                }\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [":host{display:block;position:fixed;inset:0;z-index:1000;pointer-events:none}.m-backdrop{position:absolute;inset:0;background:#0006;opacity:0;pointer-events:none;transition:opacity .3s ease;cursor:pointer;outline:none}.m-backdrop--visible{opacity:1;pointer-events:auto}.m-wrapper{display:flex;flex-direction:column;position:absolute;inset:0;background-color:#f2f2f6;padding:16px;box-sizing:border-box;overflow-y:auto;pointer-events:none;padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom));transform:translate(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}.m-wrapper--open{transform:translate(0);pointer-events:auto}.m-wrapper .m-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.m-wrapper .m-header .m-title-group{display:flex;align-items:center;gap:12px}.m-wrapper .m-header .m-title-group .m-logo{width:32px;height:32px;object-fit:contain}.m-wrapper .m-header .m-title-group .m-title{font-size:18px;font-weight:600;color:#1f1f1f}.m-wrapper .m-header .m-close-btn{background:transparent;border:none;padding:0;color:#1f1f1f;display:flex;align-items:center;justify-content:center;cursor:pointer}.m-wrapper .m-header .m-close-btn mat-icon{font-size:28px;width:28px;height:28px}.m-wrapper .m-user-section{background-color:#fff;border-radius:12px;padding:12px 16px;margin-bottom:24px;box-shadow:0 1px 2px #00000005;border:1px solid #EBEBEB}.m-wrapper .m-user-section lib-layout-user{display:block;width:100%}.m-wrapper .m-menu-list{display:flex;flex-direction:column;gap:16px}.m-wrapper .m-menu-card{background-color:#fff;border-radius:12px;border:1px solid #EBEBEB;overflow:hidden}.m-wrapper .m-menu-card .m-card-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:16px;cursor:pointer;-webkit-user-select:none;user-select:none;border:none;background:transparent;-webkit-tap-highlight-color:transparent}.m-wrapper .m-menu-card .m-card-header .m-card-header-left{display:flex;align-items:center;gap:16px}.m-wrapper .m-menu-card .m-card-header .m-card-header-left .m-group-icon{font-size:24px;width:24px;height:24px;color:#1f1f1f;object-fit:contain}.m-wrapper .m-menu-card .m-card-header .m-card-header-left .m-group-title{font-size:16px;font-weight:600;color:#1f1f1f}.m-wrapper .m-menu-card .m-card-header .m-expand-icon{color:#1f1f1f;transition:transform .2s ease}.m-wrapper .m-menu-card .m-card-body{display:flex;flex-direction:column;padding-bottom:8px}.m-wrapper .m-menu-card .m-card-body .m-menu-item{display:flex;justify-content:space-between;align-items:center;width:100%;padding:12px 16px 12px 24px;cursor:pointer;border:none;background:transparent;transition:background-color .2s;-webkit-tap-highlight-color:transparent}.m-wrapper .m-menu-card .m-card-body .m-menu-item:active{background-color:#f5f5f5}.m-wrapper .m-menu-card .m-card-body .m-menu-item--indented{padding-left:48px}.m-wrapper .m-menu-card .m-card-body .m-menu-item .m-item-left{display:flex;align-items:center;gap:12px}.m-wrapper .m-menu-card .m-card-body .m-menu-item .m-item-left .m-item-icon{font-size:20px;width:20px;height:20px;color:#8c8c8c}.m-wrapper .m-menu-card .m-card-body .m-menu-item .m-item-left .m-item-icon-img{width:20px;height:20px;object-fit:contain;opacity:.7}.m-wrapper .m-menu-card .m-card-body .m-menu-item .m-item-left .m-item-title{font-size:15px;color:#333}.m-wrapper .m-menu-card .m-card-body .m-menu-item .m-nav-icon{color:#8c8c8c;font-size:20px;width:20px;height:20px}.m-wrapper .m-menu-card .m-card-body .m-sub-group{border-top:1px solid #EBEBEB}.m-wrapper .m-menu-card .m-card-body .m-sub-group:first-child{border-top:none}.m-wrapper .m-menu-card .m-card-body .m-sub-group .m-sub-group-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:12px 16px 12px 24px;cursor:pointer;border:none;background:#fafafa;-webkit-tap-highlight-color:transparent}.m-wrapper .m-menu-card .m-card-body .m-sub-group .m-sub-group-header:active{background-color:#f0f0f0}.m-wrapper .m-menu-card .m-card-body .m-sub-group .m-sub-group-header .m-item-left{display:flex;align-items:center;gap:12px}.m-wrapper .m-menu-card .m-card-body .m-sub-group .m-sub-group-header .m-item-left .m-item-icon{font-size:20px;width:20px;height:20px;color:#8c8c8c}.m-wrapper .m-menu-card .m-card-body .m-sub-group .m-sub-group-header .m-item-left .m-item-icon-img{width:20px;height:20px;object-fit:contain;opacity:.7}.m-wrapper .m-menu-card .m-card-body .m-sub-group .m-sub-group-header .m-item-left .m-item-title{font-size:15px;font-weight:500;color:#333}.m-wrapper .m-menu-card .m-card-body .m-sub-group .m-sub-group-header .m-expand-icon{color:#8c8c8c;font-size:20px;width:20px;height:20px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LayoutUserComponent, selector: "lib-layout-user", inputs: ["isMobileOrTablet", "isMenuLock", "isShowSidebar", "userInfo"], outputs: ["menuClosed", "menuOpened", "toggleMenuLock"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SidebarMobileOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: SidebarMobileOverlayComponent, isStandalone: true, selector: "sd-sidebar-mobile-overlay", inputs: { isShowSidebar: { classPropertyName: "isShowSidebar", publicName: "isShowSidebar", isSignal: true, isRequired: false, transformFunction: null }, menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: true, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { showSideBar: "showSideBar", expandSideBar: "expandSideBar", popupUserMenuOpened: "popupUserMenuOpened", popupUserMenuClosed: "popupUserMenuClosed", titleMenuGroupChanged: "titleMenuGroupChanged" }, ngImport: i0, template: "@let _userInfo = userInfo();\n@let _sidebar = sidebar();\n\n@if (_userInfo && _sidebar) {\n  <div\n    class=\"m-backdrop\"\n    [class.m-backdrop--visible]=\"isShowSidebar()\"\n    role=\"button\"\n    tabindex=\"0\"\n    (click)=\"onClose()\"\n    (keydown.escape)=\"onClose()\">\n  </div>\n\n  <div class=\"m-wrapper\" [class.m-wrapper--open]=\"isShowSidebar()\">\n    <div class=\"m-header\">\n      <div class=\"m-title-group\">\n        @if (_sidebar.logoUrl) {\n          <img class=\"m-logo\" alt=\"logo\" [src]=\"_sidebar.logoUrl\" />\n        }\n        <span class=\"m-title\">{{ titleMenuGroup() || _sidebar.defaultTitle || 'Back Office' }}</span>\n      </div>\n      <button class=\"m-close-btn\" (click)=\"onClose()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <div class=\"m-user-section\">\n      <lib-layout-user\n        [userInfo]=\"_userInfo\"\n        [isMobileOrTablet]=\"true\"\n        (menuOpened)=\"onUserMenuOpened()\"\n        (menuClosed)=\"onUserMenuClosed()\">\n      </lib-layout-user>\n    </div>\n\n    <div class=\"m-menu-list\">\n      @for (group of menus(); track group.id) {\n        <div class=\"m-menu-card\">\n          <button class=\"m-card-header\" (click)=\"toggleMobileGroup(group.id)\">\n            <div class=\"m-card-header-left\">\n              @if (group.iconUrl) {\n                <img class=\"m-group-icon\" [src]=\"group.iconUrl\" [alt]=\"group.title\" />\n              } @else {\n                <mat-icon class=\"m-group-icon\">{{ group.icon || 'widgets' }}</mat-icon>\n              }\n              <span class=\"m-group-title\">{{ group.title }}</span>\n            </div>\n            <mat-icon class=\"m-expand-icon\">\n              {{ expandedMobileGroups().has(group.id ?? '') ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\n            </mat-icon>\n          </button>\n\n          @if (expandedMobileGroups().has(group.id ?? '') && hasChildren(group)) {\n            <div class=\"m-card-body\">\n              @for (child of getChildren(group); track child.id) {\n                @if (hasChildren(child)) {\n                  <div class=\"m-sub-group\">\n                    <button class=\"m-sub-group-header\" (click)=\"toggleMobileGroup(child.id)\">\n                      <div class=\"m-item-left\">\n                        @if (child.iconUrl) {\n                          <img class=\"m-item-icon-img\" [src]=\"child.iconUrl\" alt=\"icon\" />\n                        } @else {\n                          <mat-icon class=\"m-item-icon\">{{ child.icon || 'folder' }}</mat-icon>\n                        }\n                        <span class=\"m-item-title\">{{ child.title }}</span>\n                      </div>\n                      <mat-icon class=\"m-expand-icon\">\n                        {{ expandedMobileGroups().has(child.id ?? '') ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\n                      </mat-icon>\n                    </button>\n                    @if (expandedMobileGroups().has(child.id ?? '')) {\n                      @for (subChild of getChildren(child); track subChild.id) {\n                        <button class=\"m-menu-item m-menu-item--indented\"\n                          (click)=\"navigate({ path: getPath(subChild), queryParams: getQueryParams(subChild) })\">\n                          <div class=\"m-item-left\">\n                            @if (subChild.iconUrl) {\n                              <img class=\"m-item-icon-img\" [src]=\"subChild.iconUrl\" alt=\"icon\" />\n                            } @else {\n                              <mat-icon class=\"m-item-icon\">{{ subChild.icon || 'insert_drive_file' }}</mat-icon>\n                            }\n                            <span class=\"m-item-title\">{{ subChild.title }}</span>\n                          </div>\n                          <mat-icon class=\"m-nav-icon\">chevron_right</mat-icon>\n                        </button>\n                      }\n                    }\n                  </div>\n                } @else {\n                  <button class=\"m-menu-item\" (click)=\"navigate({ path: getPath(child), queryParams: getQueryParams(child) })\">\n                    <div class=\"m-item-left\">\n                      @if (child.iconUrl) {\n                        <img class=\"m-item-icon-img\" [src]=\"child.iconUrl\" alt=\"icon\" />\n                      } @else {\n                        <mat-icon class=\"m-item-icon\">{{ child.icon || 'insert_drive_file' }}</mat-icon>\n                      }\n                      <span class=\"m-item-title\">{{ child.title }}</span>\n                    </div>\n                    <mat-icon class=\"m-nav-icon\">chevron_right</mat-icon>\n                  </button>\n                }\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [":host{display:block;position:fixed;inset:0;z-index:1000;pointer-events:none}.m-backdrop{position:absolute;inset:0;background:#0006;opacity:0;pointer-events:none;transition:opacity .3s ease;cursor:pointer;outline:none}.m-backdrop--visible{opacity:1;pointer-events:auto}.m-wrapper{display:flex;flex-direction:column;position:absolute;inset:0;background-color:#f2f2f6;padding:16px;box-sizing:border-box;overflow-y:auto;pointer-events:none;padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom));transform:translate(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}.m-wrapper--open{transform:translate(0);pointer-events:auto}.m-wrapper .m-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.m-wrapper .m-header .m-title-group{display:flex;align-items:center;gap:12px}.m-wrapper .m-header .m-title-group .m-logo{width:32px;height:32px;object-fit:contain}.m-wrapper .m-header .m-title-group .m-title{font-size:18px;font-weight:600;color:#1f1f1f}.m-wrapper .m-header .m-close-btn{background:transparent;border:none;padding:0;color:#1f1f1f;display:flex;align-items:center;justify-content:center;cursor:pointer}.m-wrapper .m-header .m-close-btn mat-icon{font-size:28px;width:28px;height:28px}.m-wrapper .m-user-section{background-color:#fff;border-radius:12px;padding:12px 16px;margin-bottom:24px;box-shadow:0 1px 2px #00000005;border:1px solid #EBEBEB}.m-wrapper .m-user-section lib-layout-user{display:block;width:100%}.m-wrapper .m-menu-list{display:flex;flex-direction:column;gap:16px}.m-wrapper .m-menu-card{background-color:#fff;border-radius:12px;border:1px solid #EBEBEB;overflow:hidden}.m-wrapper .m-menu-card .m-card-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:16px;cursor:pointer;-webkit-user-select:none;user-select:none;border:none;background:transparent;-webkit-tap-highlight-color:transparent}.m-wrapper .m-menu-card .m-card-header .m-card-header-left{display:flex;align-items:center;gap:16px}.m-wrapper .m-menu-card .m-card-header .m-card-header-left .m-group-icon{font-size:24px;width:24px;height:24px;color:#1f1f1f;object-fit:contain}.m-wrapper .m-menu-card .m-card-header .m-card-header-left .m-group-title{font-size:16px;font-weight:600;color:#1f1f1f}.m-wrapper .m-menu-card .m-card-header .m-expand-icon{color:#1f1f1f;transition:transform .2s ease}.m-wrapper .m-menu-card .m-card-body{display:flex;flex-direction:column;padding-bottom:8px}.m-wrapper .m-menu-card .m-card-body .m-menu-item{display:flex;justify-content:space-between;align-items:center;width:100%;padding:12px 16px 12px 24px;cursor:pointer;border:none;background:transparent;transition:background-color .2s;-webkit-tap-highlight-color:transparent}.m-wrapper .m-menu-card .m-card-body .m-menu-item:active{background-color:#f5f5f5}.m-wrapper .m-menu-card .m-card-body .m-menu-item--indented{padding-left:48px}.m-wrapper .m-menu-card .m-card-body .m-menu-item .m-item-left{display:flex;align-items:center;gap:12px}.m-wrapper .m-menu-card .m-card-body .m-menu-item .m-item-left .m-item-icon{font-size:20px;width:20px;height:20px;color:#8c8c8c}.m-wrapper .m-menu-card .m-card-body .m-menu-item .m-item-left .m-item-icon-img{width:20px;height:20px;object-fit:contain;opacity:.7}.m-wrapper .m-menu-card .m-card-body .m-menu-item .m-item-left .m-item-title{font-size:15px;color:#333}.m-wrapper .m-menu-card .m-card-body .m-menu-item .m-nav-icon{color:#8c8c8c;font-size:20px;width:20px;height:20px}.m-wrapper .m-menu-card .m-card-body .m-sub-group{border-top:1px solid #EBEBEB}.m-wrapper .m-menu-card .m-card-body .m-sub-group:first-child{border-top:none}.m-wrapper .m-menu-card .m-card-body .m-sub-group .m-sub-group-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:12px 16px 12px 24px;cursor:pointer;border:none;background:#fafafa;-webkit-tap-highlight-color:transparent}.m-wrapper .m-menu-card .m-card-body .m-sub-group .m-sub-group-header:active{background-color:#f0f0f0}.m-wrapper .m-menu-card .m-card-body .m-sub-group .m-sub-group-header .m-item-left{display:flex;align-items:center;gap:12px}.m-wrapper .m-menu-card .m-card-body .m-sub-group .m-sub-group-header .m-item-left .m-item-icon{font-size:20px;width:20px;height:20px;color:#8c8c8c}.m-wrapper .m-menu-card .m-card-body .m-sub-group .m-sub-group-header .m-item-left .m-item-icon-img{width:20px;height:20px;object-fit:contain;opacity:.7}.m-wrapper .m-menu-card .m-card-body .m-sub-group .m-sub-group-header .m-item-left .m-item-title{font-size:15px;font-weight:500;color:#333}.m-wrapper .m-menu-card .m-card-body .m-sub-group .m-sub-group-header .m-expand-icon{color:#8c8c8c;font-size:20px;width:20px;height:20px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LayoutUserComponent, selector: "lib-layout-user", inputs: ["isMobileOrTablet", "isMenuLock", "isShowSidebar", "userInfo"], outputs: ["menuClosed", "menuOpened", "toggleMenuLock"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SidebarMobileOverlayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SidebarMobileOverlayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sd-sidebar-mobile-overlay', standalone: true, imports: [
                         CommonModule,
@@ -1250,16 +1250,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         MatIconModule,
                         LayoutUserComponent,
                     ], template: "@let _userInfo = userInfo();\n@let _sidebar = sidebar();\n\n@if (_userInfo && _sidebar) {\n  <div\n    class=\"m-backdrop\"\n    [class.m-backdrop--visible]=\"isShowSidebar()\"\n    role=\"button\"\n    tabindex=\"0\"\n    (click)=\"onClose()\"\n    (keydown.escape)=\"onClose()\">\n  </div>\n\n  <div class=\"m-wrapper\" [class.m-wrapper--open]=\"isShowSidebar()\">\n    <div class=\"m-header\">\n      <div class=\"m-title-group\">\n        @if (_sidebar.logoUrl) {\n          <img class=\"m-logo\" alt=\"logo\" [src]=\"_sidebar.logoUrl\" />\n        }\n        <span class=\"m-title\">{{ titleMenuGroup() || _sidebar.defaultTitle || 'Back Office' }}</span>\n      </div>\n      <button class=\"m-close-btn\" (click)=\"onClose()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <div class=\"m-user-section\">\n      <lib-layout-user\n        [userInfo]=\"_userInfo\"\n        [isMobileOrTablet]=\"true\"\n        (menuOpened)=\"onUserMenuOpened()\"\n        (menuClosed)=\"onUserMenuClosed()\">\n      </lib-layout-user>\n    </div>\n\n    <div class=\"m-menu-list\">\n      @for (group of menus(); track group.id) {\n        <div class=\"m-menu-card\">\n          <button class=\"m-card-header\" (click)=\"toggleMobileGroup(group.id)\">\n            <div class=\"m-card-header-left\">\n              @if (group.iconUrl) {\n                <img class=\"m-group-icon\" [src]=\"group.iconUrl\" [alt]=\"group.title\" />\n              } @else {\n                <mat-icon class=\"m-group-icon\">{{ group.icon || 'widgets' }}</mat-icon>\n              }\n              <span class=\"m-group-title\">{{ group.title }}</span>\n            </div>\n            <mat-icon class=\"m-expand-icon\">\n              {{ expandedMobileGroups().has(group.id ?? '') ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\n            </mat-icon>\n          </button>\n\n          @if (expandedMobileGroups().has(group.id ?? '') && hasChildren(group)) {\n            <div class=\"m-card-body\">\n              @for (child of getChildren(group); track child.id) {\n                @if (hasChildren(child)) {\n                  <div class=\"m-sub-group\">\n                    <button class=\"m-sub-group-header\" (click)=\"toggleMobileGroup(child.id)\">\n                      <div class=\"m-item-left\">\n                        @if (child.iconUrl) {\n                          <img class=\"m-item-icon-img\" [src]=\"child.iconUrl\" alt=\"icon\" />\n                        } @else {\n                          <mat-icon class=\"m-item-icon\">{{ child.icon || 'folder' }}</mat-icon>\n                        }\n                        <span class=\"m-item-title\">{{ child.title }}</span>\n                      </div>\n                      <mat-icon class=\"m-expand-icon\">\n                        {{ expandedMobileGroups().has(child.id ?? '') ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\n                      </mat-icon>\n                    </button>\n                    @if (expandedMobileGroups().has(child.id ?? '')) {\n                      @for (subChild of getChildren(child); track subChild.id) {\n                        <button class=\"m-menu-item m-menu-item--indented\"\n                          (click)=\"navigate({ path: getPath(subChild), queryParams: getQueryParams(subChild) })\">\n                          <div class=\"m-item-left\">\n                            @if (subChild.iconUrl) {\n                              <img class=\"m-item-icon-img\" [src]=\"subChild.iconUrl\" alt=\"icon\" />\n                            } @else {\n                              <mat-icon class=\"m-item-icon\">{{ subChild.icon || 'insert_drive_file' }}</mat-icon>\n                            }\n                            <span class=\"m-item-title\">{{ subChild.title }}</span>\n                          </div>\n                          <mat-icon class=\"m-nav-icon\">chevron_right</mat-icon>\n                        </button>\n                      }\n                    }\n                  </div>\n                } @else {\n                  <button class=\"m-menu-item\" (click)=\"navigate({ path: getPath(child), queryParams: getQueryParams(child) })\">\n                    <div class=\"m-item-left\">\n                      @if (child.iconUrl) {\n                        <img class=\"m-item-icon-img\" [src]=\"child.iconUrl\" alt=\"icon\" />\n                      } @else {\n                        <mat-icon class=\"m-item-icon\">{{ child.icon || 'insert_drive_file' }}</mat-icon>\n                      }\n                      <span class=\"m-item-title\">{{ child.title }}</span>\n                    </div>\n                    <mat-icon class=\"m-nav-icon\">chevron_right</mat-icon>\n                  </button>\n                }\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [":host{display:block;position:fixed;inset:0;z-index:1000;pointer-events:none}.m-backdrop{position:absolute;inset:0;background:#0006;opacity:0;pointer-events:none;transition:opacity .3s ease;cursor:pointer;outline:none}.m-backdrop--visible{opacity:1;pointer-events:auto}.m-wrapper{display:flex;flex-direction:column;position:absolute;inset:0;background-color:#f2f2f6;padding:16px;box-sizing:border-box;overflow-y:auto;pointer-events:none;padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom));transform:translate(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}.m-wrapper--open{transform:translate(0);pointer-events:auto}.m-wrapper .m-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.m-wrapper .m-header .m-title-group{display:flex;align-items:center;gap:12px}.m-wrapper .m-header .m-title-group .m-logo{width:32px;height:32px;object-fit:contain}.m-wrapper .m-header .m-title-group .m-title{font-size:18px;font-weight:600;color:#1f1f1f}.m-wrapper .m-header .m-close-btn{background:transparent;border:none;padding:0;color:#1f1f1f;display:flex;align-items:center;justify-content:center;cursor:pointer}.m-wrapper .m-header .m-close-btn mat-icon{font-size:28px;width:28px;height:28px}.m-wrapper .m-user-section{background-color:#fff;border-radius:12px;padding:12px 16px;margin-bottom:24px;box-shadow:0 1px 2px #00000005;border:1px solid #EBEBEB}.m-wrapper .m-user-section lib-layout-user{display:block;width:100%}.m-wrapper .m-menu-list{display:flex;flex-direction:column;gap:16px}.m-wrapper .m-menu-card{background-color:#fff;border-radius:12px;border:1px solid #EBEBEB;overflow:hidden}.m-wrapper .m-menu-card .m-card-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:16px;cursor:pointer;-webkit-user-select:none;user-select:none;border:none;background:transparent;-webkit-tap-highlight-color:transparent}.m-wrapper .m-menu-card .m-card-header .m-card-header-left{display:flex;align-items:center;gap:16px}.m-wrapper .m-menu-card .m-card-header .m-card-header-left .m-group-icon{font-size:24px;width:24px;height:24px;color:#1f1f1f;object-fit:contain}.m-wrapper .m-menu-card .m-card-header .m-card-header-left .m-group-title{font-size:16px;font-weight:600;color:#1f1f1f}.m-wrapper .m-menu-card .m-card-header .m-expand-icon{color:#1f1f1f;transition:transform .2s ease}.m-wrapper .m-menu-card .m-card-body{display:flex;flex-direction:column;padding-bottom:8px}.m-wrapper .m-menu-card .m-card-body .m-menu-item{display:flex;justify-content:space-between;align-items:center;width:100%;padding:12px 16px 12px 24px;cursor:pointer;border:none;background:transparent;transition:background-color .2s;-webkit-tap-highlight-color:transparent}.m-wrapper .m-menu-card .m-card-body .m-menu-item:active{background-color:#f5f5f5}.m-wrapper .m-menu-card .m-card-body .m-menu-item--indented{padding-left:48px}.m-wrapper .m-menu-card .m-card-body .m-menu-item .m-item-left{display:flex;align-items:center;gap:12px}.m-wrapper .m-menu-card .m-card-body .m-menu-item .m-item-left .m-item-icon{font-size:20px;width:20px;height:20px;color:#8c8c8c}.m-wrapper .m-menu-card .m-card-body .m-menu-item .m-item-left .m-item-icon-img{width:20px;height:20px;object-fit:contain;opacity:.7}.m-wrapper .m-menu-card .m-card-body .m-menu-item .m-item-left .m-item-title{font-size:15px;color:#333}.m-wrapper .m-menu-card .m-card-body .m-menu-item .m-nav-icon{color:#8c8c8c;font-size:20px;width:20px;height:20px}.m-wrapper .m-menu-card .m-card-body .m-sub-group{border-top:1px solid #EBEBEB}.m-wrapper .m-menu-card .m-card-body .m-sub-group:first-child{border-top:none}.m-wrapper .m-menu-card .m-card-body .m-sub-group .m-sub-group-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:12px 16px 12px 24px;cursor:pointer;border:none;background:#fafafa;-webkit-tap-highlight-color:transparent}.m-wrapper .m-menu-card .m-card-body .m-sub-group .m-sub-group-header:active{background-color:#f0f0f0}.m-wrapper .m-menu-card .m-card-body .m-sub-group .m-sub-group-header .m-item-left{display:flex;align-items:center;gap:12px}.m-wrapper .m-menu-card .m-card-body .m-sub-group .m-sub-group-header .m-item-left .m-item-icon{font-size:20px;width:20px;height:20px;color:#8c8c8c}.m-wrapper .m-menu-card .m-card-body .m-sub-group .m-sub-group-header .m-item-left .m-item-icon-img{width:20px;height:20px;object-fit:contain;opacity:.7}.m-wrapper .m-menu-card .m-card-body .m-sub-group .m-sub-group-header .m-item-left .m-item-title{font-size:15px;font-weight:500;color:#333}.m-wrapper .m-menu-card .m-card-body .m-sub-group .m-sub-group-header .m-expand-icon{color:#8c8c8c;font-size:20px;width:20px;height:20px}\n"] }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { isShowSidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "isShowSidebar", required: false }] }], menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: true }] }], userInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfo", required: true }] }], sidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebar", required: true }] }], showSideBar: [{ type: i0.Output, args: ["showSideBar"] }], expandSideBar: [{ type: i0.Output, args: ["expandSideBar"] }], popupUserMenuOpened: [{ type: i0.Output, args: ["popupUserMenuOpened"] }], popupUserMenuClosed: [{ type: i0.Output, args: ["popupUserMenuClosed"] }], titleMenuGroupChanged: [{ type: i0.Output, args: ["titleMenuGroupChanged"] }] } });
 
 class SidebarMobileV1Component {
     #layoutStorageService = inject(SdLayoutStorageService);
-    menus = input([]);
-    userInfo = input.required();
-    sidebar = input.required();
+    menus = input([], ...(ngDevMode ? [{ debugName: "menus" }] : []));
+    userInfo = input.required(...(ngDevMode ? [{ debugName: "userInfo" }] : []));
+    sidebar = input.required(...(ngDevMode ? [{ debugName: "sidebar" }] : []));
     // Sidebar luôn bắt đầu đóng trên mobile
-    isShowSidebar = signal(false);
-    titleMenuGroup = signal('');
+    isShowSidebar = signal(false, ...(ngDevMode ? [{ debugName: "isShowSidebar" }] : []));
+    titleMenuGroup = signal('', ...(ngDevMode ? [{ debugName: "titleMenuGroup" }] : []));
     constructor() {
         effect(() => {
             const isShow = this.isShowSidebar();
@@ -1281,13 +1281,13 @@ class SidebarMobileV1Component {
     onTitleMenuGroupChanged = (title) => {
         this.titleMenuGroup.set(title);
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SidebarMobileV1Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SidebarMobileV1Component, isStandalone: true, selector: "sidebar-mobile-v1", inputs: { menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"c-mobile-layout\">\n  <div class=\"c-mobile-topbar\">\n    <div class=\"c-topbar-brand\">\n      @if (sidebar().logoUrl) {\n        <img class=\"c-topbar-logo\" [src]=\"sidebar().logoUrl\" alt=\"logo\" />\n      }\n      <span class=\"c-topbar-title\">{{ titleMenuGroup() || sidebar().defaultTitle || 'Back Office' }}</span>\n    </div>\n    <button class=\"c-hamburger-btn\" (click)=\"openSidebar()\">\n      <mat-icon>menu</mat-icon>\n    </button>\n  </div>\n\n  <div class=\"c-mobile-content\">\n    <ng-content></ng-content>\n  </div>\n\n  <sd-sidebar-mobile-overlay\n    [menus]=\"menus()\"\n    [userInfo]=\"userInfo()\"\n    [sidebar]=\"sidebar()\"\n    [isShowSidebar]=\"isShowSidebar()\"\n    (showSideBar)=\"onToggle($event)\"\n    (expandSideBar)=\"onExpandSideBar()\"\n    (popupUserMenuOpened)=\"onPopupOfSideBarOpened()\"\n    (popupUserMenuClosed)=\"onPopupOfSideBarClosed()\"\n    (titleMenuGroupChanged)=\"onTitleMenuGroupChanged($event)\">\n  </sd-sidebar-mobile-overlay>\n</div>\n", styles: [":host{display:block;height:100vh;position:relative;overflow:hidden}.c-mobile-layout{display:flex;flex-direction:column;height:100%;position:relative}.c-mobile-topbar{display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:56px;background-color:#fff;border-bottom:1px solid #e0e0e0;flex-shrink:0}.c-mobile-topbar .c-topbar-brand{display:flex;align-items:center;gap:10px;overflow:hidden}.c-mobile-topbar .c-topbar-brand .c-topbar-logo{width:28px;height:28px;object-fit:contain;flex-shrink:0}.c-mobile-topbar .c-topbar-brand .c-topbar-title{font-size:16px;font-weight:600;color:#1f1f1f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.c-mobile-topbar .c-hamburger-btn{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:6px;border-radius:50%;color:#333;flex-shrink:0}.c-mobile-topbar .c-hamburger-btn:hover{background-color:#0000000f}.c-mobile-content{flex:1;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: SidebarMobileOverlayComponent, selector: "sd-sidebar-mobile-overlay", inputs: ["isShowSidebar", "menus", "userInfo", "sidebar"], outputs: ["showSideBar", "expandSideBar", "popupUserMenuOpened", "popupUserMenuClosed", "titleMenuGroupChanged"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SidebarMobileV1Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: SidebarMobileV1Component, isStandalone: true, selector: "sidebar-mobile-v1", inputs: { menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"c-mobile-layout\">\n  <div class=\"c-mobile-topbar\">\n    <div class=\"c-topbar-brand\">\n      @if (sidebar().logoUrl) {\n        <img class=\"c-topbar-logo\" [src]=\"sidebar().logoUrl\" alt=\"logo\" />\n      }\n      <span class=\"c-topbar-title\">{{ titleMenuGroup() || sidebar().defaultTitle || 'Back Office' }}</span>\n    </div>\n    <button class=\"c-hamburger-btn\" (click)=\"openSidebar()\">\n      <mat-icon>menu</mat-icon>\n    </button>\n  </div>\n\n  <div class=\"c-mobile-content\">\n    <ng-content></ng-content>\n  </div>\n\n  <sd-sidebar-mobile-overlay\n    [menus]=\"menus()\"\n    [userInfo]=\"userInfo()\"\n    [sidebar]=\"sidebar()\"\n    [isShowSidebar]=\"isShowSidebar()\"\n    (showSideBar)=\"onToggle($event)\"\n    (expandSideBar)=\"onExpandSideBar()\"\n    (popupUserMenuOpened)=\"onPopupOfSideBarOpened()\"\n    (popupUserMenuClosed)=\"onPopupOfSideBarClosed()\"\n    (titleMenuGroupChanged)=\"onTitleMenuGroupChanged($event)\">\n  </sd-sidebar-mobile-overlay>\n</div>\n", styles: [":host{display:block;height:100vh;position:relative;overflow:hidden}.c-mobile-layout{display:flex;flex-direction:column;height:100%;position:relative}.c-mobile-topbar{display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:56px;background-color:#fff;border-bottom:1px solid #e0e0e0;flex-shrink:0}.c-mobile-topbar .c-topbar-brand{display:flex;align-items:center;gap:10px;overflow:hidden}.c-mobile-topbar .c-topbar-brand .c-topbar-logo{width:28px;height:28px;object-fit:contain;flex-shrink:0}.c-mobile-topbar .c-topbar-brand .c-topbar-title{font-size:16px;font-weight:600;color:#1f1f1f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.c-mobile-topbar .c-hamburger-btn{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:6px;border-radius:50%;color:#333;flex-shrink:0}.c-mobile-topbar .c-hamburger-btn:hover{background-color:#0000000f}.c-mobile-content{flex:1;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: SidebarMobileOverlayComponent, selector: "sd-sidebar-mobile-overlay", inputs: ["isShowSidebar", "menus", "userInfo", "sidebar"], outputs: ["showSideBar", "expandSideBar", "popupUserMenuOpened", "popupUserMenuClosed", "titleMenuGroupChanged"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SidebarMobileV1Component, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SidebarMobileV1Component, decorators: [{
             type: Component,
             args: [{ selector: 'sidebar-mobile-v1', imports: [MatIconModule, CommonModule, SidebarMobileOverlayComponent], standalone: true, template: "<div class=\"c-mobile-layout\">\n  <div class=\"c-mobile-topbar\">\n    <div class=\"c-topbar-brand\">\n      @if (sidebar().logoUrl) {\n        <img class=\"c-topbar-logo\" [src]=\"sidebar().logoUrl\" alt=\"logo\" />\n      }\n      <span class=\"c-topbar-title\">{{ titleMenuGroup() || sidebar().defaultTitle || 'Back Office' }}</span>\n    </div>\n    <button class=\"c-hamburger-btn\" (click)=\"openSidebar()\">\n      <mat-icon>menu</mat-icon>\n    </button>\n  </div>\n\n  <div class=\"c-mobile-content\">\n    <ng-content></ng-content>\n  </div>\n\n  <sd-sidebar-mobile-overlay\n    [menus]=\"menus()\"\n    [userInfo]=\"userInfo()\"\n    [sidebar]=\"sidebar()\"\n    [isShowSidebar]=\"isShowSidebar()\"\n    (showSideBar)=\"onToggle($event)\"\n    (expandSideBar)=\"onExpandSideBar()\"\n    (popupUserMenuOpened)=\"onPopupOfSideBarOpened()\"\n    (popupUserMenuClosed)=\"onPopupOfSideBarClosed()\"\n    (titleMenuGroupChanged)=\"onTitleMenuGroupChanged($event)\">\n  </sd-sidebar-mobile-overlay>\n</div>\n", styles: [":host{display:block;height:100vh;position:relative;overflow:hidden}.c-mobile-layout{display:flex;flex-direction:column;height:100%;position:relative}.c-mobile-topbar{display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:56px;background-color:#fff;border-bottom:1px solid #e0e0e0;flex-shrink:0}.c-mobile-topbar .c-topbar-brand{display:flex;align-items:center;gap:10px;overflow:hidden}.c-mobile-topbar .c-topbar-brand .c-topbar-logo{width:28px;height:28px;object-fit:contain;flex-shrink:0}.c-mobile-topbar .c-topbar-brand .c-topbar-title{font-size:16px;font-weight:600;color:#1f1f1f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.c-mobile-topbar .c-hamburger-btn{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:6px;border-radius:50%;color:#333;flex-shrink:0}.c-mobile-topbar .c-hamburger-btn:hover{background-color:#0000000f}.c-mobile-content{flex:1;overflow-y:auto}\n"] }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: false }] }], userInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfo", required: true }] }], sidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebar", required: true }] }] } });
 
 class SdLayoutComponent {
     // ==========================================
@@ -1298,21 +1298,21 @@ class SdLayoutComponent {
     // ==========================================
     // SIGNAL INPUTS
     // ==========================================
-    menusInput = input([], { alias: 'menus' });
-    menus = computed(() => this.#menuPipe.transform(this.menusInput() || []));
+    menusInput = input([], ...(ngDevMode ? [{ debugName: "menusInput", alias: 'menus' }] : [{ alias: 'menus' }]));
+    menus = computed(() => this.#menuPipe.transform(this.menusInput() || []), ...(ngDevMode ? [{ debugName: "menus" }] : []));
     // ==========================================
     // CONSUME SHARED STATE
     // ==========================================
     userInfo = this.#layoutService.userInfo;
     sidebar = this.#layoutService.sidebar;
-    isMobileOrTablet = signal(BrowserUtilities.isMobile());
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdLayoutComponent, isStandalone: true, selector: "sd-layout", inputs: { menusInput: { classPropertyName: "menusInput", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-template #projectedContent>\n  <ng-content></ng-content>\n</ng-template>\n\n@let _userInfo = userInfo();\n@let _sidebar = sidebar();\n\n@if (_userInfo && _sidebar?.version === 1) {\n  @if (!isMobileOrTablet()) {\n    <sidebar-v1 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebar!\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-v1>\n  } @else {\n    <sidebar-mobile-v1 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebar!\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-mobile-v1>\n  }\n}\n", styles: [""], dependencies: [{ kind: "component", type: SidebarV1Component, selector: "sidebar-v1", inputs: ["menus", "userInfo", "sidebar"] }, { kind: "component", type: SidebarMobileV1Component, selector: "sidebar-mobile-v1", inputs: ["menus", "userInfo", "sidebar"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    isMobileOrTablet = signal(BrowserUtilities.isMobile(), ...(ngDevMode ? [{ debugName: "isMobileOrTablet" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: SdLayoutComponent, isStandalone: true, selector: "sd-layout", inputs: { menusInput: { classPropertyName: "menusInput", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-template #projectedContent>\n  <ng-content></ng-content>\n</ng-template>\n\n@let _userInfo = userInfo();\n@let _sidebar = sidebar();\n\n@if (_userInfo && _sidebar?.version === 1) {\n  @if (!isMobileOrTablet()) {\n    <sidebar-v1 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebar!\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-v1>\n  } @else {\n    <sidebar-mobile-v1 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebar!\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-mobile-v1>\n  }\n}\n", styles: [""], dependencies: [{ kind: "component", type: SidebarV1Component, selector: "sidebar-v1", inputs: ["menus", "userInfo", "sidebar"] }, { kind: "component", type: SidebarMobileV1Component, selector: "sidebar-mobile-v1", inputs: ["menus", "userInfo", "sidebar"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sd-layout', imports: [SidebarV1Component, SidebarMobileV1Component, NgTemplateOutlet], standalone: true, template: "<ng-template #projectedContent>\n  <ng-content></ng-content>\n</ng-template>\n\n@let _userInfo = userInfo();\n@let _sidebar = sidebar();\n\n@if (_userInfo && _sidebar?.version === 1) {\n  @if (!isMobileOrTablet()) {\n    <sidebar-v1 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebar!\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-v1>\n  } @else {\n    <sidebar-mobile-v1 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebar!\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-mobile-v1>\n  }\n}\n" }]
-        }] });
+        }], propDecorators: { menusInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: false }] }] } });
 
 // End
 let HomePageComponent = class HomePageComponent {
@@ -1334,7 +1334,7 @@ let HomePageComponent = class HomePageComponent {
     // SIGNALS (STATE)
     // ==========================================
     // Lấy snapshot một lần lúc khởi tạo và đưa vào signal
-    todayInfo = signal(this.#getTodayInfo(new Date()));
+    todayInfo = signal(this.#getTodayInfo(new Date()), ...(ngDevMode ? [{ debugName: "todayInfo" }] : []));
     userInfo = this.#layoutService.userInfo;
     // WHY: static data, không cần signal. `storage` + `schema` thay cho `database` + `account_tree`
     // để đảm bảo render trên mọi version của Material Icons mặc định.
@@ -1370,8 +1370,8 @@ let HomePageComponent = class HomePageComponent {
         const formatted = this.#i18n.t('core.module.layout.today-info.format', { weekday, date: dateStr });
         return `${formatted} (${this.#getTimezone()})`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HomePageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: HomePageComponent, isStandalone: true, selector: "app-home-page", ngImport: i0, template: "@let _userInfo = userInfo();\n<sd-page>\n  <div class=\"d-flex flex-column\" headerLeft>\n    <div class=\"font-weight-medium fs-20\">\n      {{ 'core.module.layout.greeting.hello' | translate: { name: _userInfo?.fullName ?? _userInfo?.email ?? _userInfo?.username ?? '' } }}\n    </div>\n    <span class=\"T12R text-secondary\">{{ todayInfo() }}</span>\n  </div>\n\n  <div class=\"wrapper\">\n    <div class=\"bento\">\n      <!-- Hero -->\n      <div class=\"card hero-card\">\n        <div class=\"hero-ring ring-3\"></div>\n        <div class=\"hero-ring ring-2\"></div>\n        <div class=\"hero-ring ring-1\"></div>\n        <div class=\"hero-core\">\n          <mat-icon class=\"hero-icon\">space_dashboard</mat-icon>\n        </div>\n        <div class=\"hero-decoration\">\n          <span class=\"dot d1\"></span>\n          <span class=\"dot d2\"></span>\n          <span class=\"dot d3\"></span>\n        </div>\n      </div>\n\n      <!-- Features -->\n      @for (feature of features; track feature.key; let i = $index) {\n        <div\n          class=\"card feature-card\"\n          [class.feature-wide]=\"feature.area === 'audit' || feature.area === 'integ'\"\n          [style.gridArea]=\"feature.area\"\n          [style.animation-delay.ms]=\"(i + 1) * 80\"\n        >\n          <div class=\"feature-accent\"></div>\n          <div class=\"feature-content\">\n            <div class=\"feature-icon-wrap\">\n              <mat-icon class=\"feature-icon\">{{ feature.icon }}</mat-icon>\n            </div>\n            <span class=\"feature-label\">{{ feature.key | translate }}</span>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</sd-page>\n", styles: [":host{display:contents}.wrapper{display:flex;align-items:center;justify-content:center;padding:32px 24px;height:100%;width:100%;background:radial-gradient(circle at 15% 25%,color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 14%,transparent),transparent 55%),radial-gradient(circle at 85% 75%,color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 10%,transparent),transparent 55%),linear-gradient(135deg,#fafbfc,#f4f6fa);overflow:auto}.bento{display:grid;width:100%;max-width:1080px;gap:16px;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,minmax(140px,1fr));grid-template-areas:\"hero hero data   report\" \"hero hero users  flow\" \"audit audit integ integ\"}.card{position:relative;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:20px;overflow:hidden;opacity:0;transform:translateY(8px);animation:card-in .5s ease-out forwards;transition:transform .3s ease,box-shadow .3s ease}.card:hover{transform:translateY(-4px);box-shadow:0 16px 40px color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 18%,transparent),0 4px 12px #0000000f}.hero-card{grid-area:hero;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 18%,white),#fff 60%),#fff;border:1px solid color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 15%,transparent)}.hero-card .hero-ring{position:absolute;border-radius:50%;border:1px solid color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 25%,transparent);animation:hero-pulse 3s ease-in-out infinite;pointer-events:none}.hero-card .hero-ring.ring-1{inset:calc(50% - 70px);animation-delay:0s}.hero-card .hero-ring.ring-2{inset:calc(50% - 105px);animation-delay:.6s}.hero-card .hero-ring.ring-3{inset:calc(50% - 140px);animation-delay:1.2s}.hero-card .hero-core{position:relative;z-index:1;width:140px;height:140px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 22%,white),#fff);box-shadow:0 0 60px color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 30%,transparent),0 10px 30px color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 20%,transparent)}.hero-card .hero-icon{font-size:72px;width:72px;height:72px;color:var(--mat-sys-primary, #1f49bf)}.hero-card .hero-decoration{position:absolute;inset:0;pointer-events:none}.hero-card .hero-decoration .dot{position:absolute;width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 50%,transparent);animation:dot-float 4s ease-in-out infinite}.hero-card .hero-decoration .d1{top:16%;left:12%;animation-delay:0s}.hero-card .hero-decoration .d2{bottom:20%;right:14%;animation-delay:1s}.hero-card .hero-decoration .d3{top:60%;left:80%;animation-delay:2s;width:5px;height:5px}.feature-card{display:flex;align-items:stretch;cursor:default}.feature-card .feature-accent{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 60%,transparent),var(--mat-sys-primary, #1f49bf),color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 60%,transparent))}.feature-card .feature-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px 18px;gap:10px}.feature-card .feature-icon-wrap{width:56px;height:56px;border-radius:50%;background:color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 12%,white);display:flex;align-items:center;justify-content:center}.feature-card .feature-icon{font-size:28px;width:28px;height:28px;color:var(--mat-sys-primary, #1f49bf)}.feature-card .feature-label{font-size:14px;font-weight:500;text-align:center;color:#000000c7;line-height:20px}.feature-card.feature-wide .feature-content{flex-direction:row;justify-content:flex-start;padding:18px 24px;gap:18px}.feature-card.feature-wide .feature-icon-wrap{width:64px;height:64px}.feature-card.feature-wide .feature-icon{font-size:32px;width:32px;height:32px}.feature-card.feature-wide .feature-label{text-align:left;font-size:16px}@keyframes card-in{to{opacity:1;transform:translateY(0)}}@keyframes hero-pulse{0%,to{transform:scale(1);opacity:.7}50%{transform:scale(1.06);opacity:.3}}@keyframes dot-float{0%,to{transform:translateY(0);opacity:.8}50%{transform:translateY(-8px);opacity:.4}}@media(max-width:1024px){.bento{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,minmax(120px,1fr));grid-template-areas:\"hero hero data\" \"hero hero report\" \"users flow audit\" \"integ integ integ\"}.hero-card .hero-core{width:120px;height:120px}.hero-card .hero-icon{font-size:60px;width:60px;height:60px}}@media(max-width:640px){.wrapper{padding:16px 12px}.bento{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:\"hero\" \"data\" \"report\" \"users\" \"flow\" \"audit\" \"integ\";gap:12px}.hero-card{min-height:220px}.hero-card .hero-core{width:100px;height:100px}.hero-card .hero-icon{font-size:52px;width:52px;height:52px}}@media(prefers-reduced-motion:reduce){.card{animation:none;opacity:1;transform:none}.hero-card .hero-ring{animation:none;opacity:.4}.hero-card .hero-decoration .dot{animation:none}}\n"], dependencies: [{ kind: "component", type: SdPageComponent, selector: "sd-page", inputs: ["title", "description", "noHeader"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: HomePageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: HomePageComponent, isStandalone: true, selector: "app-home-page", ngImport: i0, template: "@let _userInfo = userInfo();\n<sd-page>\n  <div class=\"d-flex flex-column\" headerLeft>\n    <div class=\"font-weight-medium fs-20\">\n      {{ 'core.module.layout.greeting.hello' | translate: { name: _userInfo?.fullName ?? _userInfo?.email ?? _userInfo?.username ?? '' } }}\n    </div>\n    <span class=\"T12R text-secondary\">{{ todayInfo() }}</span>\n  </div>\n\n  <div class=\"wrapper\">\n    <div class=\"bento\">\n      <!-- Hero -->\n      <div class=\"card hero-card\">\n        <div class=\"hero-ring ring-3\"></div>\n        <div class=\"hero-ring ring-2\"></div>\n        <div class=\"hero-ring ring-1\"></div>\n        <div class=\"hero-core\">\n          <mat-icon class=\"hero-icon\">space_dashboard</mat-icon>\n        </div>\n        <div class=\"hero-decoration\">\n          <span class=\"dot d1\"></span>\n          <span class=\"dot d2\"></span>\n          <span class=\"dot d3\"></span>\n        </div>\n      </div>\n\n      <!-- Features -->\n      @for (feature of features; track feature.key; let i = $index) {\n        <div\n          class=\"card feature-card\"\n          [class.feature-wide]=\"feature.area === 'audit' || feature.area === 'integ'\"\n          [style.gridArea]=\"feature.area\"\n          [style.animation-delay.ms]=\"(i + 1) * 80\"\n        >\n          <div class=\"feature-accent\"></div>\n          <div class=\"feature-content\">\n            <div class=\"feature-icon-wrap\">\n              <mat-icon class=\"feature-icon\">{{ feature.icon }}</mat-icon>\n            </div>\n            <span class=\"feature-label\">{{ feature.key | translate }}</span>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</sd-page>\n", styles: [":host{display:contents}.wrapper{display:flex;align-items:center;justify-content:center;padding:32px 24px;height:100%;width:100%;background:radial-gradient(circle at 15% 25%,color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 14%,transparent),transparent 55%),radial-gradient(circle at 85% 75%,color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 10%,transparent),transparent 55%),linear-gradient(135deg,#fafbfc,#f4f6fa);overflow:auto}.bento{display:grid;width:100%;max-width:1080px;gap:16px;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,minmax(140px,1fr));grid-template-areas:\"hero hero data   report\" \"hero hero users  flow\" \"audit audit integ integ\"}.card{position:relative;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:20px;overflow:hidden;opacity:0;transform:translateY(8px);animation:card-in .5s ease-out forwards;transition:transform .3s ease,box-shadow .3s ease}.card:hover{transform:translateY(-4px);box-shadow:0 16px 40px color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 18%,transparent),0 4px 12px #0000000f}.hero-card{grid-area:hero;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 18%,white),#fff 60%),#fff;border:1px solid color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 15%,transparent)}.hero-card .hero-ring{position:absolute;border-radius:50%;border:1px solid color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 25%,transparent);animation:hero-pulse 3s ease-in-out infinite;pointer-events:none}.hero-card .hero-ring.ring-1{inset:calc(50% - 70px);animation-delay:0s}.hero-card .hero-ring.ring-2{inset:calc(50% - 105px);animation-delay:.6s}.hero-card .hero-ring.ring-3{inset:calc(50% - 140px);animation-delay:1.2s}.hero-card .hero-core{position:relative;z-index:1;width:140px;height:140px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 22%,white),#fff);box-shadow:0 0 60px color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 30%,transparent),0 10px 30px color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 20%,transparent)}.hero-card .hero-icon{font-size:72px;width:72px;height:72px;color:var(--mat-sys-primary, #1f49bf)}.hero-card .hero-decoration{position:absolute;inset:0;pointer-events:none}.hero-card .hero-decoration .dot{position:absolute;width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 50%,transparent);animation:dot-float 4s ease-in-out infinite}.hero-card .hero-decoration .d1{top:16%;left:12%;animation-delay:0s}.hero-card .hero-decoration .d2{bottom:20%;right:14%;animation-delay:1s}.hero-card .hero-decoration .d3{top:60%;left:80%;animation-delay:2s;width:5px;height:5px}.feature-card{display:flex;align-items:stretch;cursor:default}.feature-card .feature-accent{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 60%,transparent),var(--mat-sys-primary, #1f49bf),color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 60%,transparent))}.feature-card .feature-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px 18px;gap:10px}.feature-card .feature-icon-wrap{width:56px;height:56px;border-radius:50%;background:color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 12%,white);display:flex;align-items:center;justify-content:center}.feature-card .feature-icon{font-size:28px;width:28px;height:28px;color:var(--mat-sys-primary, #1f49bf)}.feature-card .feature-label{font-size:14px;font-weight:500;text-align:center;color:#000000c7;line-height:20px}.feature-card.feature-wide .feature-content{flex-direction:row;justify-content:flex-start;padding:18px 24px;gap:18px}.feature-card.feature-wide .feature-icon-wrap{width:64px;height:64px}.feature-card.feature-wide .feature-icon{font-size:32px;width:32px;height:32px}.feature-card.feature-wide .feature-label{text-align:left;font-size:16px}@keyframes card-in{to{opacity:1;transform:translateY(0)}}@keyframes hero-pulse{0%,to{transform:scale(1);opacity:.7}50%{transform:scale(1.06);opacity:.3}}@keyframes dot-float{0%,to{transform:translateY(0);opacity:.8}50%{transform:translateY(-8px);opacity:.4}}@media(max-width:1024px){.bento{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,minmax(120px,1fr));grid-template-areas:\"hero hero data\" \"hero hero report\" \"users flow audit\" \"integ integ integ\"}.hero-card .hero-core{width:120px;height:120px}.hero-card .hero-icon{font-size:60px;width:60px;height:60px}}@media(max-width:640px){.wrapper{padding:16px 12px}.bento{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:\"hero\" \"data\" \"report\" \"users\" \"flow\" \"audit\" \"integ\";gap:12px}.hero-card{min-height:220px}.hero-card .hero-core{width:100px;height:100px}.hero-card .hero-icon{font-size:52px;width:52px;height:52px}}@media(prefers-reduced-motion:reduce){.card{animation:none;opacity:1;transform:none}.hero-card .hero-ring{animation:none;opacity:.4}.hero-card .hero-decoration .dot{animation:none}}\n"], dependencies: [{ kind: "component", type: SdPageComponent, selector: "sd-page", inputs: ["title", "description", "noHeader"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 };
 HomePageComponent = __decorate([
     SdTabComponent({
@@ -1394,7 +1394,7 @@ HomePageComponent = __decorate([
         color: 'primary',
     })
 ], HomePageComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HomePageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: HomePageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-home-page', imports: [SdPageComponent, TranslatePipe, MatIconModule], standalone: true, template: "@let _userInfo = userInfo();\n<sd-page>\n  <div class=\"d-flex flex-column\" headerLeft>\n    <div class=\"font-weight-medium fs-20\">\n      {{ 'core.module.layout.greeting.hello' | translate: { name: _userInfo?.fullName ?? _userInfo?.email ?? _userInfo?.username ?? '' } }}\n    </div>\n    <span class=\"T12R text-secondary\">{{ todayInfo() }}</span>\n  </div>\n\n  <div class=\"wrapper\">\n    <div class=\"bento\">\n      <!-- Hero -->\n      <div class=\"card hero-card\">\n        <div class=\"hero-ring ring-3\"></div>\n        <div class=\"hero-ring ring-2\"></div>\n        <div class=\"hero-ring ring-1\"></div>\n        <div class=\"hero-core\">\n          <mat-icon class=\"hero-icon\">space_dashboard</mat-icon>\n        </div>\n        <div class=\"hero-decoration\">\n          <span class=\"dot d1\"></span>\n          <span class=\"dot d2\"></span>\n          <span class=\"dot d3\"></span>\n        </div>\n      </div>\n\n      <!-- Features -->\n      @for (feature of features; track feature.key; let i = $index) {\n        <div\n          class=\"card feature-card\"\n          [class.feature-wide]=\"feature.area === 'audit' || feature.area === 'integ'\"\n          [style.gridArea]=\"feature.area\"\n          [style.animation-delay.ms]=\"(i + 1) * 80\"\n        >\n          <div class=\"feature-accent\"></div>\n          <div class=\"feature-content\">\n            <div class=\"feature-icon-wrap\">\n              <mat-icon class=\"feature-icon\">{{ feature.icon }}</mat-icon>\n            </div>\n            <span class=\"feature-label\">{{ feature.key | translate }}</span>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</sd-page>\n", styles: [":host{display:contents}.wrapper{display:flex;align-items:center;justify-content:center;padding:32px 24px;height:100%;width:100%;background:radial-gradient(circle at 15% 25%,color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 14%,transparent),transparent 55%),radial-gradient(circle at 85% 75%,color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 10%,transparent),transparent 55%),linear-gradient(135deg,#fafbfc,#f4f6fa);overflow:auto}.bento{display:grid;width:100%;max-width:1080px;gap:16px;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,minmax(140px,1fr));grid-template-areas:\"hero hero data   report\" \"hero hero users  flow\" \"audit audit integ integ\"}.card{position:relative;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:20px;overflow:hidden;opacity:0;transform:translateY(8px);animation:card-in .5s ease-out forwards;transition:transform .3s ease,box-shadow .3s ease}.card:hover{transform:translateY(-4px);box-shadow:0 16px 40px color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 18%,transparent),0 4px 12px #0000000f}.hero-card{grid-area:hero;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 18%,white),#fff 60%),#fff;border:1px solid color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 15%,transparent)}.hero-card .hero-ring{position:absolute;border-radius:50%;border:1px solid color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 25%,transparent);animation:hero-pulse 3s ease-in-out infinite;pointer-events:none}.hero-card .hero-ring.ring-1{inset:calc(50% - 70px);animation-delay:0s}.hero-card .hero-ring.ring-2{inset:calc(50% - 105px);animation-delay:.6s}.hero-card .hero-ring.ring-3{inset:calc(50% - 140px);animation-delay:1.2s}.hero-card .hero-core{position:relative;z-index:1;width:140px;height:140px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 22%,white),#fff);box-shadow:0 0 60px color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 30%,transparent),0 10px 30px color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 20%,transparent)}.hero-card .hero-icon{font-size:72px;width:72px;height:72px;color:var(--mat-sys-primary, #1f49bf)}.hero-card .hero-decoration{position:absolute;inset:0;pointer-events:none}.hero-card .hero-decoration .dot{position:absolute;width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 50%,transparent);animation:dot-float 4s ease-in-out infinite}.hero-card .hero-decoration .d1{top:16%;left:12%;animation-delay:0s}.hero-card .hero-decoration .d2{bottom:20%;right:14%;animation-delay:1s}.hero-card .hero-decoration .d3{top:60%;left:80%;animation-delay:2s;width:5px;height:5px}.feature-card{display:flex;align-items:stretch;cursor:default}.feature-card .feature-accent{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 60%,transparent),var(--mat-sys-primary, #1f49bf),color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 60%,transparent))}.feature-card .feature-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px 18px;gap:10px}.feature-card .feature-icon-wrap{width:56px;height:56px;border-radius:50%;background:color-mix(in srgb,var(--mat-sys-primary, #1f49bf) 12%,white);display:flex;align-items:center;justify-content:center}.feature-card .feature-icon{font-size:28px;width:28px;height:28px;color:var(--mat-sys-primary, #1f49bf)}.feature-card .feature-label{font-size:14px;font-weight:500;text-align:center;color:#000000c7;line-height:20px}.feature-card.feature-wide .feature-content{flex-direction:row;justify-content:flex-start;padding:18px 24px;gap:18px}.feature-card.feature-wide .feature-icon-wrap{width:64px;height:64px}.feature-card.feature-wide .feature-icon{font-size:32px;width:32px;height:32px}.feature-card.feature-wide .feature-label{text-align:left;font-size:16px}@keyframes card-in{to{opacity:1;transform:translateY(0)}}@keyframes hero-pulse{0%,to{transform:scale(1);opacity:.7}50%{transform:scale(1.06);opacity:.3}}@keyframes dot-float{0%,to{transform:translateY(0);opacity:.8}50%{transform:translateY(-8px);opacity:.4}}@media(max-width:1024px){.bento{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,minmax(120px,1fr));grid-template-areas:\"hero hero data\" \"hero hero report\" \"users flow audit\" \"integ integ integ\"}.hero-card .hero-core{width:120px;height:120px}.hero-card .hero-icon{font-size:60px;width:60px;height:60px}}@media(max-width:640px){.wrapper{padding:16px 12px}.bento{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:\"hero\" \"data\" \"report\" \"users\" \"flow\" \"audit\" \"integ\";gap:12px}.hero-card{min-height:220px}.hero-card .hero-core{width:100px;height:100px}.hero-card .hero-icon{font-size:52px;width:52px;height:52px}}@media(prefers-reduced-motion:reduce){.card{animation:none;opacity:1;transform:none}.hero-card .hero-ring{animation:none;opacity:.4}.hero-card .hero-decoration .dot{animation:none}}\n"] }]
         }] });
@@ -1416,10 +1416,10 @@ class HomeRedirectGuard {
         // Nếu không có homeUrl, cho phép kích hoạt route
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HomeRedirectGuard, deps: [{ token: i1$6.Router }, { token: SD_LAYOUT_CONFIGURATION }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HomeRedirectGuard, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: HomeRedirectGuard, deps: [{ token: i1$6.Router }, { token: SD_LAYOUT_CONFIGURATION }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: HomeRedirectGuard, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HomeRedirectGuard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: HomeRedirectGuard, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1437,11 +1437,11 @@ const routes = [
     },
 ];
 class HomeRoutingModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HomeRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: HomeRoutingModule, imports: [i1$6.RouterModule], exports: [RouterModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HomeRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: HomeRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.23", ngImport: i0, type: HomeRoutingModule, imports: [i1$6.RouterModule], exports: [RouterModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: HomeRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HomeRoutingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: HomeRoutingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [RouterModule.forChild(routes)],
@@ -1450,11 +1450,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         }] });
 
 class HomeModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HomeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: HomeModule, imports: [CommonModule, HomeRoutingModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HomeModule, imports: [CommonModule, HomeRoutingModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: HomeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.23", ngImport: i0, type: HomeModule, imports: [CommonModule, HomeRoutingModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: HomeModule, imports: [CommonModule, HomeRoutingModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HomeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: HomeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -1479,8 +1479,8 @@ let RootComponent$1 = class RootComponent {
     // SIGNALS (STATE)
     // ==========================================
     // Lấy snapshot một lần lúc khởi tạo và đưa vào signal
-    url = signal(this.#route.snapshot.queryParams?.['url'] || '');
-    todayInfo = signal(this.#getTodayInfo(new Date()));
+    url = signal(this.#route.snapshot.queryParams?.['url'] || '', ...(ngDevMode ? [{ debugName: "url" }] : []));
+    todayInfo = signal(this.#getTodayInfo(new Date()), ...(ngDevMode ? [{ debugName: "todayInfo" }] : []));
     userInfo = this.#layoutService.userInfo;
     // ==========================================
     // PRIVATE METHODS
@@ -1501,10 +1501,10 @@ let RootComponent$1 = class RootComponent {
     reload() {
         window.location.href = '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: RootComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "@let _userInfo = userInfo();\n<sd-page>\n  <div class=\"d-flex flex-column\" headerLeft>\n    <div class=\"font-weight-medium fs-20\">{{ 'core.module.layout.greeting.hello' | translate: { name: _userInfo?.fullName ?? _userInfo?.email ?? _userInfo?.username ?? '' } }}</div>\n    <span class=\"T12R text-secondary\">{{ todayInfo() }}</span>\n  </div>\n\n  <div class=\"h-full d-flex flex-column align-items-center\">\n    <div class=\"h-full d-flex flex-column align-items-center justify-content-center text-center wrapper\">\n      <img alt=\"not-found\" class=\"sd-image-not-found\" />\n      <span class=\"T16M mt-24\">{{ 'core.module.layout.not-found.title' | translate }}</span>\n      <span class=\"T16R text-secondary mt-4\">\n        {{ 'core.module.layout.not-found.message' | translate }}\n      </span>\n      <sd-button class=\"mt-16\" type=\"fill\" color=\"primary\" (click)=\"reload()\" [title]=\"'core.module.layout.not-found.back' | translate\" prefixIcon=\"arrow_back\"> </sd-button>\n    </div>\n  </div>\n</sd-page>\n", styles: [".wrapper{width:300px}\n"], dependencies: [{ kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdPageComponent, selector: "sd-page", inputs: ["title", "description", "noHeader"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: RootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.23", type: RootComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "@let _userInfo = userInfo();\n<sd-page>\n  <div class=\"d-flex flex-column\" headerLeft>\n    <div class=\"font-weight-medium fs-20\">{{ 'core.module.layout.greeting.hello' | translate: { name: _userInfo?.fullName ?? _userInfo?.email ?? _userInfo?.username ?? '' } }}</div>\n    <span class=\"T12R text-secondary\">{{ todayInfo() }}</span>\n  </div>\n\n  <div class=\"h-full d-flex flex-column align-items-center\">\n    <div class=\"h-full d-flex flex-column align-items-center justify-content-center text-center wrapper\">\n      <img alt=\"not-found\" class=\"sd-image-not-found\" />\n      <span class=\"T16M mt-24\">{{ 'core.module.layout.not-found.title' | translate }}</span>\n      <span class=\"T16R text-secondary mt-4\">\n        {{ 'core.module.layout.not-found.message' | translate }}\n      </span>\n      <sd-button class=\"mt-16\" type=\"fill\" color=\"primary\" (click)=\"reload()\" [title]=\"'core.module.layout.not-found.back' | translate\" prefixIcon=\"arrow_back\"> </sd-button>\n    </div>\n  </div>\n</sd-page>\n", styles: [".wrapper{width:300px}\n"], dependencies: [{ kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdPageComponent, selector: "sd-page", inputs: ["title", "description", "noHeader"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RootComponent$1, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: RootComponent$1, decorators: [{
             type: Component,
             args: [{ imports: [SdButton, SdPageComponent, TranslatePipe], template: "@let _userInfo = userInfo();\n<sd-page>\n  <div class=\"d-flex flex-column\" headerLeft>\n    <div class=\"font-weight-medium fs-20\">{{ 'core.module.layout.greeting.hello' | translate: { name: _userInfo?.fullName ?? _userInfo?.email ?? _userInfo?.username ?? '' } }}</div>\n    <span class=\"T12R text-secondary\">{{ todayInfo() }}</span>\n  </div>\n\n  <div class=\"h-full d-flex flex-column align-items-center\">\n    <div class=\"h-full d-flex flex-column align-items-center justify-content-center text-center wrapper\">\n      <img alt=\"not-found\" class=\"sd-image-not-found\" />\n      <span class=\"T16M mt-24\">{{ 'core.module.layout.not-found.title' | translate }}</span>\n      <span class=\"T16R text-secondary mt-4\">\n        {{ 'core.module.layout.not-found.message' | translate }}\n      </span>\n      <sd-button class=\"mt-16\" type=\"fill\" color=\"primary\" (click)=\"reload()\" [title]=\"'core.module.layout.not-found.back' | translate\" prefixIcon=\"arrow_back\"> </sd-button>\n    </div>\n  </div>\n</sd-page>\n", styles: [".wrapper{width:300px}\n"] }]
         }] });
@@ -1512,11 +1512,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 const Routes$2 = [{ path: '', component: RootComponent$1 }];
 
 class NotFoundModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: NotFoundModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: NotFoundModule, imports: [CommonModule, i1$6.RouterModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: NotFoundModule, imports: [CommonModule, RouterModule.forChild(Routes$2)] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: NotFoundModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.23", ngImport: i0, type: NotFoundModule, imports: [CommonModule, i1$6.RouterModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: NotFoundModule, imports: [CommonModule, RouterModule.forChild(Routes$2)] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: NotFoundModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: NotFoundModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, RouterModule.forChild(Routes$2)],
@@ -1541,8 +1541,8 @@ class RootComponent {
     // SIGNALS (STATE)
     // ==========================================
     // Lấy snapshot một lần lúc khởi tạo và đưa vào signal
-    url = signal(this.#route.snapshot.queryParams?.['url'] || '');
-    todayInfo = signal(this.#getTodayInfo(new Date()));
+    url = signal(this.#route.snapshot.queryParams?.['url'] || '', ...(ngDevMode ? [{ debugName: "url" }] : []));
+    todayInfo = signal(this.#getTodayInfo(new Date()), ...(ngDevMode ? [{ debugName: "todayInfo" }] : []));
     userInfo = this.#layoutService.userInfo;
     // ==========================================
     // PRIVATE METHODS
@@ -1563,10 +1563,10 @@ class RootComponent {
     reload() {
         window.location.href = '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: RootComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "@let _userInfo = userInfo();\n<sd-page>\n  <div class=\"d-flex flex-column\" headerLeft>\n    <div class=\"font-weight-medium fs-20\">{{ 'core.module.layout.greeting.hello' | translate: { name: _userInfo?.fullName ?? _userInfo?.email ?? _userInfo?.username ?? '' } }}</div>\n    <span class=\"T12R text-secondary\">{{ todayInfo() }}</span>\n  </div>\n  <div class=\"h-full d-flex flex-column align-items-center\">\n    <div class=\"h-full d-flex flex-column align-items-center justify-content-center text-center wrapper\">\n      <img alt=\"forbidden\" class=\"sd-image-forbidden\" />\n      <span class=\"T16M mt-24\">{{ 'core.module.layout.forbidden.title' | translate }}</span>\n      <span class=\"T14R text-secondary mt-4\"\n        >{{ 'core.module.layout.forbidden.message' | translate }}</span\n      >\n      <sd-button class=\"mt-16\" type=\"fill\" color=\"primary\" (click)=\"reload()\" [title]=\"'core.module.layout.forbidden.back-home' | translate\"> </sd-button>\n    </div>\n  </div>\n</sd-page>\n", styles: [".wrapper{width:300px}\n"], dependencies: [{ kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdPageComponent, selector: "sd-page", inputs: ["title", "description", "noHeader"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: RootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.23", type: RootComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "@let _userInfo = userInfo();\n<sd-page>\n  <div class=\"d-flex flex-column\" headerLeft>\n    <div class=\"font-weight-medium fs-20\">{{ 'core.module.layout.greeting.hello' | translate: { name: _userInfo?.fullName ?? _userInfo?.email ?? _userInfo?.username ?? '' } }}</div>\n    <span class=\"T12R text-secondary\">{{ todayInfo() }}</span>\n  </div>\n  <div class=\"h-full d-flex flex-column align-items-center\">\n    <div class=\"h-full d-flex flex-column align-items-center justify-content-center text-center wrapper\">\n      <img alt=\"forbidden\" class=\"sd-image-forbidden\" />\n      <span class=\"T16M mt-24\">{{ 'core.module.layout.forbidden.title' | translate }}</span>\n      <span class=\"T14R text-secondary mt-4\"\n        >{{ 'core.module.layout.forbidden.message' | translate }}</span\n      >\n      <sd-button class=\"mt-16\" type=\"fill\" color=\"primary\" (click)=\"reload()\" [title]=\"'core.module.layout.forbidden.back-home' | translate\"> </sd-button>\n    </div>\n  </div>\n</sd-page>\n", styles: [".wrapper{width:300px}\n"], dependencies: [{ kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdPageComponent, selector: "sd-page", inputs: ["title", "description", "noHeader"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RootComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: RootComponent, decorators: [{
             type: Component,
             args: [{ imports: [SdButton, SdPageComponent, TranslatePipe], template: "@let _userInfo = userInfo();\n<sd-page>\n  <div class=\"d-flex flex-column\" headerLeft>\n    <div class=\"font-weight-medium fs-20\">{{ 'core.module.layout.greeting.hello' | translate: { name: _userInfo?.fullName ?? _userInfo?.email ?? _userInfo?.username ?? '' } }}</div>\n    <span class=\"T12R text-secondary\">{{ todayInfo() }}</span>\n  </div>\n  <div class=\"h-full d-flex flex-column align-items-center\">\n    <div class=\"h-full d-flex flex-column align-items-center justify-content-center text-center wrapper\">\n      <img alt=\"forbidden\" class=\"sd-image-forbidden\" />\n      <span class=\"T16M mt-24\">{{ 'core.module.layout.forbidden.title' | translate }}</span>\n      <span class=\"T14R text-secondary mt-4\"\n        >{{ 'core.module.layout.forbidden.message' | translate }}</span\n      >\n      <sd-button class=\"mt-16\" type=\"fill\" color=\"primary\" (click)=\"reload()\" [title]=\"'core.module.layout.forbidden.back-home' | translate\"> </sd-button>\n    </div>\n  </div>\n</sd-page>\n", styles: [".wrapper{width:300px}\n"] }]
         }] });
@@ -1574,11 +1574,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 const Routes$1 = [{ path: '', component: RootComponent }];
 
 class ForbiddenModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ForbiddenModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: ForbiddenModule, imports: [CommonModule, i1$6.RouterModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ForbiddenModule, imports: [CommonModule, RouterModule.forChild(Routes$1)] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ForbiddenModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.23", ngImport: i0, type: ForbiddenModule, imports: [CommonModule, i1$6.RouterModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ForbiddenModule, imports: [CommonModule, RouterModule.forChild(Routes$1)] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ForbiddenModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ForbiddenModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, RouterModule.forChild(Routes$1)],
@@ -1612,11 +1612,11 @@ const Routes = [
 ];
 
 class SdLayoutModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: SdLayoutModule, imports: [i1$6.RouterModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdLayoutModule, imports: [RouterModule.forChild(Routes)] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.23", ngImport: i0, type: SdLayoutModule, imports: [i1$6.RouterModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdLayoutModule, imports: [RouterModule.forChild(Routes)] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdLayoutModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdLayoutModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],