@sd-angular/core 19.0.0-beta.2 → 19.0.0-beta.21

package/fesm2022/sd-angular-core-modules-auth.mjs

@@ -0,0 +1,137 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, signal, Optional, Inject, Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+import { SdNormalizeAsync, SdResolveMaybeAsync } from '@sd-angular/core/utilities';
+import { toSignal } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/router';
+
+const SD_AUTH_CONFIGURATION = new InjectionToken('sd.auth.configuration');
+
+class SdAuthService {
+    authConfiguration;
+    // Đăng nhập
+    // #signin = new Subject<void>();
+    // signin$?: Observable<void>;
+    getAuthInfo;
+    // Đăng xuất
+    #signout = new Subject();
+    signout$;
+    // Thay đổi mật khẩu
+    #changePassword = new Subject();
+    changePassword$;
+    constructor(authConfiguration) {
+        this.authConfiguration = authConfiguration;
+        // this.#handleSignin();
+        this.#handleSignout();
+        this.#handleChangePassword();
+        const defaultUser = {
+            id: 'guest-id',
+            username: 'guest',
+            firstName: 'Guest',
+            email: 'guest@gmail.com',
+        };
+        if (this.authConfiguration?.guard?.authInfo) {
+            this.getAuthInfo = toSignal(SdNormalizeAsync(this.authConfiguration.guard?.authInfo()), {
+                initialValue: defaultUser,
+            });
+        }
+        else {
+            this.getAuthInfo = signal(defaultUser);
+        }
+    }
+    // #handleSignin = () => {
+    //   this.signin$ = this.#signin.asObservable();
+    // };
+    #handleSignout = () => {
+        this.signout$ = this.#signout.asObservable();
+    };
+    #handleChangePassword = () => {
+        this.changePassword$ = this.#changePassword.asObservable();
+    };
+    signout = () => {
+        if (this.authConfiguration?.action?.signout) {
+            SdResolveMaybeAsync(this.authConfiguration.action.signout()).then(() => {
+                this.#signout.next();
+            });
+        }
+    };
+    changePassword = () => {
+        if (this.authConfiguration?.action?.changePassword) {
+            SdResolveMaybeAsync(this.authConfiguration.action.changePassword()).then(() => {
+                this.#changePassword.next();
+            });
+        }
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdAuthService, deps: [{ token: SD_AUTH_CONFIGURATION, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdAuthService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdAuthService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [SD_AUTH_CONFIGURATION]
+                }] }] });
+
+class SdAuthGuard {
+    authConfiguration;
+    router;
+    constructor(authConfiguration, router) {
+        this.authConfiguration = authConfiguration;
+        this.router = router;
+    }
+    canActivate = (route, state) => {
+        if (this.authConfiguration?.guard?.auth) {
+            return this.authConfiguration.guard.auth(route, state);
+        }
+        // Nếu chưa tích hợp Auth Guard thì pass canActive
+        return true;
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdAuthGuard, deps: [{ token: SD_AUTH_CONFIGURATION, optional: true }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdAuthGuard, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdAuthGuard, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [SD_AUTH_CONFIGURATION]
+                }] }, { type: i1.Router }] });
+
+class SdPortalGuard {
+    authConfiguration;
+    router;
+    constructor(authConfiguration, router) {
+        this.authConfiguration = authConfiguration;
+        this.router = router;
+    }
+    canActivate = (route, state) => {
+        if (this.authConfiguration?.guard?.portal) {
+            return this.authConfiguration.guard.portal(route, state);
+        }
+        // Nếu chưa tích hợp Portal Guard thì pass canActive
+        return true;
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdPortalGuard, deps: [{ token: SD_AUTH_CONFIGURATION, optional: true }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdPortalGuard, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdPortalGuard, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [SD_AUTH_CONFIGURATION]
+                }] }, { type: i1.Router }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SD_AUTH_CONFIGURATION, SdAuthGuard, SdAuthService, SdPortalGuard };
+//# sourceMappingURL=sd-angular-core-modules-auth.mjs.map

package/fesm2022/sd-angular-core-modules-auth.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-angular-core-modules-auth.mjs","sources":["../../../projects/sd-angular/modules/auth/configurations/auth.configuration.ts","../../../projects/sd-angular/modules/auth/services/auth.service.ts","../../../projects/sd-angular/modules/auth/guards/auth.guard.ts","../../../projects/sd-angular/modules/auth/guards/portal.guard.ts","../../../projects/sd-angular/modules/auth/sd-angular-core-modules-auth.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\r\nimport { CanActivate } from '@angular/router';\r\nimport { SdMaybeAsync } from '@sd-angular/core/utilities';\r\nimport { SdAuthInfo } from '../services';\r\n\r\nexport interface ISdAuthConfiguration {\r\n  action?: IAuthConfigurationAction;\r\n  guard?: IAuthConfigurationGuard;\r\n}\r\n\r\nexport const SD_AUTH_CONFIGURATION = new InjectionToken<ISdAuthConfiguration>('sd.auth.configuration');\r\n\r\ninterface IAuthConfigurationAction {\r\n  signout: () => SdMaybeAsync<void>;\r\n  changePassword?: () => SdMaybeAsync<void>;\r\n}\r\n\r\ninterface IAuthConfigurationGuard {\r\n  auth?: CanActivate['canActivate'];\r\n  portal?: CanActivate['canActivate'];\r\n  authInfo: () => SdMaybeAsync<SdAuthInfo>;\r\n}\r\n","import { Inject, Injectable, Optional, signal, Signal } from '@angular/core';\r\nimport { from, Observable, Subject } from 'rxjs';\r\nimport { ISdAuthConfiguration, SD_AUTH_CONFIGURATION } from '../configurations';\r\nimport { SdNormalizeAsync, SdResolveMaybeAsync } from '@sd-angular/core/utilities';\r\nimport { SdAuthInfo } from './auth.model';\r\nimport { toSignal } from '@angular/core/rxjs-interop';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class SdAuthService {\r\n  // Đăng nhập\r\n  // #signin = new Subject<void>();\r\n  // signin$?: Observable<void>;\r\n  getAuthInfo?: Signal<SdAuthInfo | undefined>;\r\n\r\n  // Đăng xuất\r\n  #signout = new Subject<void>();\r\n  signout$?: Observable<void>;\r\n\r\n  // Thay đổi mật khẩu\r\n  #changePassword = new Subject<void>();\r\n  changePassword$?: Observable<void>;\r\n\r\n  constructor(@Optional() @Inject(SD_AUTH_CONFIGURATION) private authConfiguration: ISdAuthConfiguration) {\r\n    // this.#handleSignin();\r\n    this.#handleSignout();\r\n    this.#handleChangePassword();\r\n    const defaultUser = {\r\n      id: 'guest-id',\r\n      username: 'guest',\r\n      firstName: 'Guest',\r\n      email: 'guest@gmail.com',\r\n    };\r\n    if (this.authConfiguration?.guard?.authInfo) {\r\n      this.getAuthInfo = toSignal(SdNormalizeAsync(this.authConfiguration.guard?.authInfo()), {\r\n        initialValue: defaultUser,\r\n      });\r\n    } else {\r\n      this.getAuthInfo = signal(defaultUser);\r\n    }\r\n  }\r\n\r\n  // #handleSignin = () => {\r\n  //   this.signin$ = this.#signin.asObservable();\r\n  // };\r\n\r\n  #handleSignout = () => {\r\n    this.signout$ = this.#signout.asObservable();\r\n  };\r\n\r\n  #handleChangePassword = () => {\r\n    this.changePassword$ = this.#changePassword.asObservable();\r\n  };\r\n  signout = () => {\r\n    if (this.authConfiguration?.action?.signout) {\r\n      SdResolveMaybeAsync(this.authConfiguration.action.signout()).then(() => {\r\n        this.#signout.next();\r\n      });\r\n    }\r\n  };\r\n\r\n  changePassword = () => {\r\n    if (this.authConfiguration?.action?.changePassword) {\r\n      SdResolveMaybeAsync(this.authConfiguration.action.changePassword()).then(() => {\r\n        this.#changePassword.next();\r\n      });\r\n    }\r\n  };\r\n}\r\n","import { Inject, Injectable, Optional } from '@angular/core';\r\nimport { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';\r\nimport { ISdAuthConfiguration, SD_AUTH_CONFIGURATION } from '../configurations';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class SdAuthGuard implements CanActivate {\r\n  constructor(\r\n    @Optional() @Inject(SD_AUTH_CONFIGURATION) private authConfiguration: ISdAuthConfiguration,\r\n    protected readonly router: Router\r\n  ) {}\r\n\r\n  canActivate = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {\r\n    if (this.authConfiguration?.guard?.auth) {\r\n      return this.authConfiguration.guard.auth(route, state);\r\n    }\r\n    // Nếu chưa tích hợp Auth Guard thì pass canActive\r\n    return true;\r\n  };\r\n}\r\n","import { Inject, Injectable, Optional } from '@angular/core';\r\nimport { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';\r\nimport { ISdAuthConfiguration, SD_AUTH_CONFIGURATION } from '../configurations';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class SdPortalGuard implements CanActivate {\r\n  constructor(\r\n    @Optional() @Inject(SD_AUTH_CONFIGURATION) private authConfiguration: ISdAuthConfiguration,\r\n    protected readonly router: Router\r\n  ) {}\r\n\r\n  canActivate = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {\r\n    if (this.authConfiguration?.guard?.portal) {\r\n      return this.authConfiguration.guard.portal(route, state);\r\n    }\r\n    // Nếu chưa tích hợp Portal Guard thì pass canActive\r\n    return true;\r\n  };\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/sd-angular-core-modules-layout.mjs

@@ -5,7 +5,7 @@ import { CommonModule } from '@angular/common';
 import * as i1$2 from '@angular/router';
 import { NavigationEnd, RouterModule } from '@angular/router';
 import { __decorate } from 'tslib';
-import { SdTabComponent, SdButton } from '@sd-angular/core/components';
+import { SdAvatar, SdTabComponent, SdButton } from '@sd-angular/core/components';
 import { SdUtilities } from '@sd-angular/core/utilities';
 import * as i2$1 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
@@ -43,11 +43,11 @@ class SdPageComponent {
         this.el = el;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdPageComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdPageComponent, isStandalone: true, selector: "sd-page", inputs: { _title: ["title", "_title"], _noHeader: ["noHeader", "_noHeader"] }, ngImport: i0, template: "@if (!noHeader) {\r\n  <div class=\"c-page-header bg-white\">\r\n    <div class=\"p-16 d-flex align-items-center w-full justify-content-between\">\r\n      <div class=\"d-flex\">\r\n        <ng-content select=\"[headerLeft]\">\r\n          <h4 class=\"font-weight-medium\">{{ title }}</h4>\r\n        </ng-content>\r\n      </div>\r\n      <ng-content select=\"[headerRight]\"></ng-content>\r\n    </div>\r\n  </div>\r\n}\r\n\r\n<div class=\"c-page-wrapper px-0\">\r\n  <div class=\"c-page-content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdPageComponent, isStandalone: true, selector: "sd-page", inputs: { _title: ["title", "_title"], _noHeader: ["noHeader", "_noHeader"] }, ngImport: i0, template: "@if (!noHeader) {\r\n  <div class=\"c-page-header bg-white\">\r\n    <div class=\"p-16 d-flex align-items-center w-full justify-content-between\">\r\n      <div class=\"d-flex\">\r\n        <ng-content select=\"[headerLeft]\">\r\n          <div class=\"T20M\">{{ title }}</div>\r\n        </ng-content>\r\n      </div>\r\n      <ng-content select=\"[headerRight]\"></ng-content>\r\n    </div>\r\n  </div>\r\n}\r\n\r\n<div class=\"c-page-wrapper px-0\">\r\n  <div class=\"c-page-content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\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.17", ngImport: i0, type: SdPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-page', template: "@if (!noHeader) {\r\n  <div class=\"c-page-header bg-white\">\r\n    <div class=\"p-16 d-flex align-items-center w-full justify-content-between\">\r\n      <div class=\"d-flex\">\r\n        <ng-content select=\"[headerLeft]\">\r\n          <h4 class=\"font-weight-medium\">{{ title }}</h4>\r\n        </ng-content>\r\n      </div>\r\n      <ng-content select=\"[headerRight]\"></ng-content>\r\n    </div>\r\n  </div>\r\n}\r\n\r\n<div class=\"c-page-wrapper px-0\">\r\n  <div class=\"c-page-content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\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"] }]
+            args: [{ selector: 'sd-page', template: "@if (!noHeader) {\r\n  <div class=\"c-page-header bg-white\">\r\n    <div class=\"p-16 d-flex align-items-center w-full justify-content-between\">\r\n      <div class=\"d-flex\">\r\n        <ng-content select=\"[headerLeft]\">\r\n          <div class=\"T20M\">{{ title }}</div>\r\n        </ng-content>\r\n      </div>\r\n      <ng-content select=\"[headerRight]\"></ng-content>\r\n    </div>\r\n  </div>\r\n}\r\n\r\n<div class=\"c-page-wrapper px-0\">\r\n  <div class=\"c-page-content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\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: () => [{ type: i0.ElementRef }], propDecorators: { _title: [{
                 type: Input,
                 args: ['title']
@@ -236,6 +236,7 @@ class SdLayoutStorageService {
     sdStorageService;
     // Thông tin của user
     email;
+    avatar;
     username;
     fullName;
     // End
@@ -248,6 +249,7 @@ class SdLayoutStorageService {
         this.sdStorageService = sdStorageService;
         // User
         this.email = this.sdStorageService.create('38476432-958f-45d3-b94c-931f144c1255');
+        this.avatar = this.sdStorageService.create('287cea7c-219b-4ecc-8754-79f518668d4f');
         this.username = this.sdStorageService.create('e0f30fa2-d96c-49b1-ac43-75215f991af6');
         this.fullName = this.sdStorageService.create('60676f2a-78e2-432f-a921-49af351d138a');
         // End
@@ -269,7 +271,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
 
 // End
 class LayoutUserComponent {
-    layoutConfig;
+    layoutConfiguration;
     layoutStorageService;
     isMobileOrTablet;
     isMenuLock;
@@ -278,21 +280,35 @@ class LayoutUserComponent {
     menuOpened = new EventEmitter();
     toggleMenuLock = new EventEmitter();
     // Public
-    email;
-    username;
-    fullName;
+    email = '';
+    avatar = '';
+    username = '';
+    fullName = '';
     singoutLayoutConfig;
     changePasswordLayoutConfig;
     // End
-    constructor(layoutConfig, layoutStorageService) {
-        this.layoutConfig = layoutConfig;
+    constructor(layoutConfiguration, layoutStorageService) {
+        this.layoutConfiguration = layoutConfiguration;
         this.layoutStorageService = layoutStorageService;
+        this.singoutLayoutConfig = this.layoutConfiguration.signout;
+        this.changePasswordLayoutConfig = this.layoutConfiguration?.changePassword;
+    }
+    async ngOnInit() {
+        await this.#getInfoUser();
+    }
+    #getInfoUser = async () => {
+        let sidebarConfigurationV1;
+        if (typeof this.layoutConfiguration.sidebar === 'function') {
+            sidebarConfigurationV1 = (await this.layoutConfiguration.sidebar());
+        }
+        else {
+            sidebarConfigurationV1 = this.layoutConfiguration.sidebar;
+        }
         this.email = this.layoutStorageService.email.get() || '';
         this.username = this.layoutStorageService.username.get() || '';
         this.fullName = this.layoutStorageService.fullName.get() || '';
-        this.singoutLayoutConfig = this.layoutConfig.signout;
-        this.changePasswordLayoutConfig = this.layoutConfig?.changePassword;
-    }
+        this.avatar = this.layoutStorageService.avatar.get() || sidebarConfigurationV1?.defaultInfoUser?.avatar || '';
+    };
     onMenuOpened = () => {
         this.menuOpened.emit();
     };
@@ -312,11 +328,11 @@ class LayoutUserComponent {
         this.toggleMenuLock.emit(event);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LayoutUserComponent, deps: [{ token: SD_LAYOUT_CONFIGURATION }, { token: SdLayoutStorageService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: LayoutUserComponent, isStandalone: true, selector: "lib-layout-user", inputs: { isMobileOrTablet: "isMobileOrTablet", isMenuLock: "isMenuLock", isShowSidebar: "isShowSidebar" }, outputs: { menuClosed: "menuClosed", menuOpened: "menuOpened", toggleMenuLock: "toggleMenuLock" }, ngImport: i0, template: "<div class=\"c-layout-user-wrapper\">\r\n  <div class=\"c-layout-user-avatar\" [matMenuTriggerFor]=\"userMenu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\">\r\n    <img alt=\"avatar\" class=\"c-avatar\" />\r\n  </div>\r\n\r\n  @if (!isMobileOrTablet) {\r\n    <div aria-hidden=\"true\" mat-mini-fab class=\"c-layout-icon-toggle\" (click)=\"onToggleMenuLock($event)\">\r\n      <mat-icon style=\"color: #8c8c8c\"> {{ isShowSidebar ? 'keyboard_arrow_right' : 'keyboard_arrow_left' }}</mat-icon>\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<!-- Popup th\u00F4ng tin User -->\r\n<mat-menu #userMenu=\"matMenu\" xPosition=\"before\" backdropClass=\"c-user-menu-backdrop-f90ce131-fa4c-4f71-a49b-ab7fa374fdd0\">\r\n  <div aria-hidden=\"true\" class=\"c-user-menu-wrapper\" (click)=\"keepOpenWhenClickInsideMenu($event)\">\r\n    <div class=\"c-user-info-wrapper\">\r\n      <div class=\"c-user-avatar\">\r\n        <img alt=\"avatar\" class=\"c-avatar\" />\r\n      </div>\r\n      <span class=\"c-user-name\">{{ fullName || username }}</span>\r\n      <span class=\"c-user-email\">{{ email }}</span>\r\n    </div>\r\n\r\n    @if (changePasswordLayoutConfig) {\r\n      <div class=\"c-sign-button-wrapper\">\r\n        <button class=\"c-account-options\" (click)=\"changePassword()\">\r\n          <img alt=\"lock\" />\r\n          <span>\u0110\u1ED5i m\u1EADt kh\u1EA9u</span>\r\n        </button>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"c-sign-button-wrapper\">\r\n      <button class=\"c-sign-button\" mat-flat-button (click)=\"logout()\">\u0110\u0103ng xu\u1EA5t</button>\r\n    </div>\r\n  </div>\r\n</mat-menu>\r\n<!-- End -->\r\n", 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 img{scale:.875;content:url('data:image/svg+xml,<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A    <path%0D%0A        d=\"M12 5.66667H11.3333V4.33333C11.3333 2.49333 9.83996 1 7.99996 1C6.15996 1 4.66663 2.49333 4.66663 4.33333V5.66667H3.99996C3.26663 5.66667 2.66663 6.26667 2.66663 7V13.6667C2.66663 14.4 3.26663 15 3.99996 15H12C12.7333 15 13.3333 14.4 13.3333 13.6667V7C13.3333 6.26667 12.7333 5.66667 12 5.66667ZM5.99996 4.33333C5.99996 3.22667 6.89329 2.33333 7.99996 2.33333C9.10663 2.33333 9.99996 3.22667 9.99996 4.33333V5.66667H5.99996V4.33333ZM12 13.6667H3.99996V7H12V13.6667ZM7.99996 11.6667C8.73329 11.6667 9.33329 11.0667 9.33329 10.3333C9.33329 9.6 8.73329 9 7.99996 9C7.26663 9 6.66663 9.6 6.66663 10.3333C6.66663 11.0667 7.26663 11.6667 7.99996 11.6667Z\"%0D%0A        fill=\"%23757575\" />%0D%0A</svg>')}.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;content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAYFBMVEVmZmb///9dXV1iYmJfX19jY2P7+/t6enpYWFj29vbZ2dny8vJ9fX3CwsJXV1fn5+eHh4eampqrq6tpaWlycnK/v79tbW3S0tK0tLSRkZHl5eWkpKTHx8etra2enp6NjY1myXNZAAAMYUlEQVR4nO2daZeiOhCGMYuERUEFQUX8///yQis2a0hSFWDu6ffLnDlnxvbpbFWVqoqz+7/LWfsLWNcf4b+vP0IU7YPo7hdp/jw/HuXjcX7maeHfo2C/xA+3TBj4h/MtTBxKCGE/ou8/qr9TJwlv54Mf2P0K9giD4hnzGoxy7oyLc1qjOvGzsIdphXB/T0+JIGyKbEDKiEhOaWRl1uITBlnpVlNQle5LWU1kt8zwxxKZ0DuEjj5di9IJDx7uV8Ik9A6xIKZ0X0oiYlRIPEL/xMB4DSQ9+WjfC4kwyN1q98cTJW6OtCRRCKMTU943VcUZO0UYXw6B0H8JzOH7FRUvhMkKJvRjS3xvxhjMCCT0Y9TlN8JIoIwgwsjm+H0ZRQxajwDC4GF5/L6M5AE4IM0J0wtbhK8Wu6SLE95dshhfLRLeFyXcn4/Y59+c+PFs5noYEfrJsgP4FkmMdlUTwjOS/akrzs6LEEYLr8C2iKt/cGgTpugWqI4oO9gmPIkV+WqJ0iphEC53Bk6JhXpulRZhxpYxYuSiNLNFmK49QxsJHQtHg/C83h7aF9E4NtQJb9sBrBBv6IT7DewxbbFQ1YZTJPQ2BlgjKnpUaoSeuzXACtFVQ1QiDK5bOCX6olelg1GF0NskYI2oMooKhJ67TcAKUWWizhNubRdtS2VHnSfcMGCNCCe8YQJyPnkfbCg2e/TPESKZavUt75FdXddNLkQYXKBOataAmyFMEQArOhaei/t3Vwj8Q5kwrGArmTHD5YQZ3JugJCmzkS0vKG4XnHiPkDtTUsIAvAYpeWWT211wCFFuBaj05JcSQg9Cepy7AvRjhMArlW6oMsITbAg5eSlExvwQvtSZLHYjIQS69OyqGGxIHfBUFZII3DRhBBtBcVK+Lwpi8DCy6dkyTehCFgif28O7yqF7NnX1CR+Q3yvnmjdFGdQEmD74pwh9CCBNtIPv9wsQkU1d20wQ7hPAD+RqrmlXEdBi5VPzdIIQYo5yxyjXJwJuN1PzdJzwfgT8KGZ4W+sDLajj+NIYJ4Tso6QwA9ztDrBR5OOmzSghxKMgD1NAsBE1fkKNEQYX858yueCVdAXtNvwyZmSMET4Av0phmjLxIx9oKI7NnxFCyKbGThBA+Dwd2WxGCGOAIcyA2b0BzAinsQohZKawJwxwt3sC7f3hIhkSQobQ7KxvKwABjg3igBBikEo9UUWVsHlKBubpgBC0CkEb6Vt32HY6HMQ+IWQV8gQOuNtBbP5Koj+IfcIXZAjB+0ytHLbX0H4QvEcYQeYI7LRvBJymjuidiT3CE2SdEwzAynSDEfa3uy4hKARMXziEN2DojXWPrC4haA3gLEPwQnRYLiEExdfMHcOuMqCz33NvOoSg8BPSRgMPZ/RO/Q4haJ9xBFIpVgC9yaAdB6dN6AFPIqSqQQ+4mfa+SZsQGCcZ9bBNCIFWTTVN29cYbcIY9slK2S0KAsVqf9QxTluEHtCY2M4YOqL1VVqEwEnqOJtZh51p2iIMoZcjSIRAJ7gWb01TB++D+yavqYAXl2/9nly/hFBTwiFaCebTAoYU+9/llxAYPhjYg8ZKEcaw5WB8Cfcgm7QWBcZKG0EC0o24+81x+RLe4SkRVxxC6I73o9/Y8JcQIb/riGKYQo/lt37Piy8hzOrufSpEBUquIP0uxC8h3JAYjanrCxIL+9Vv3K8hDDDmhjzBTE0eUuHK15drCFHmBsZ5gXFW1PqeiA0h8EbkLZ7A+yAhrJYffaNGDSHQc/oIHqoBW1aNvptCQ4jUOwd0x10L5TB8q0sYIP3qoAcGzlHx/ipehxAWZWuJgVbiHulb1Goibh9CsPfbCHaRXyKWPjR7wofwjPbREB8KbZup1WymH0LoXUFL3NgRDhzMcpPmmu1DiLiFUddwKe5D1AqyJgnsTQgP4LXEDO+gXrgFVo354XzmB6aI0W5zwq6kvgQtwgi3wtAEER3QoVGLEMHB74joTtS9hVp4cm8Roh34jTSbVwQ2Kqk/R/6bENFY+kireUVGbdThfk7mNyGWU9aWKBVj4J6ljjAsbRFCr87Hf8JVyZc6XC2V4X788Tchiv87ECfu7FTNXGtNpzqEeGZpV1y4hcTC8Q6JsNeT6WOYvgkxwszj4uTy8EcXpJeVjtWmYZ/OYLYJ659Errf03qEM/PR1td118ZP1/SYE38rIxSlh9Bqfznma549TeKn/bvUn1uoQWh3Dj+oG7O++8wu1Q1uccHF11qGtvXRVdfZSO+fhyuqch1ZsmrXVIbRhl66ujl2K71tsQB3fAt0/3II6/iG2j78JdXx85DjNNtSJ0+DG2n5UPyHDJG/MfP9dbeoQG4ZOJ9aGGi+tO8WKS3jKM/8eeN5eLs8L7n6RV8aqwLVVu/FS1Jg3YXFu8MRR4OcxWuMhpx/zRru34Oz4KsxzFL3idcTqU9y7t8AxTDlJcmgKppcnOH5x7+4J4/6QixgnOzGLMWIbvftDhCNfzIed1BkReob37oDB9/iMI1XMfFRQ6Lrp3ePvYJ/GSYn9oph3gi7HhuzzJyifhqq2hNJSBmoqOsingfjAJEZ+SOwjD9I/apATBfCfCFJV3ogAbXIGeW3muYkMd4vpqjCeWoPcRNOMOc5sLMFfZYb7zTC/1DBHmE82oMKSb2bFjeQIm+V5c9uAFaLRr34kz9uochOriEQqo0ypkVx9k3oLWbtCRBk0cByrtzC4nYG0hNKSfv+/sZoZ/cmAk5qvJO12JKN1T/qxGstPFbcE+W7m9YfC5knfV6G3FMfrDzW9YKweEYrSm6ftjHrjOmCM6hEN6ZVdTtQBa3lQBKnYUFk6zs9ULbfONOVYpenK8jQanHbKPjo9FdTnOjN/cdFUGjeAkz0VdKxvK8+gS6VeqTDdF0M94obVikZLyitR0ttEuT8NVhsTLak66bL+NKr3+YN+WstI8epB2mNIsU/UIk7TUIqxJGmfKMW9BqvHh6Y8NUBpry+1fm0rTVLFaTrTr02pzhir5ZW2VEySuZ57Sk0pKFKLD22pGKezfRMVjHicBpBGmg95zve+VDj1F/ab2ppfQwr9S+cHEauHiYFmzRqVHrTzK3Gl07DWbCxJqY/w7CASpN56BppbQmMLyKCfN1nDKH1r7qpasZ/3XE40UptSE+3lhKMvk48RevK++sw2h0RSQvW++nO3NJYpZJKeh+PtDsa/rjR0erHKIJdsdum8byF/owSpHZSRZO34tN4okV6gr0koGcOpdAKDt4K2OYa6bwVJn7Wx9fUVNP17133vSTZPyfKRxEbTTaT03+ySPH64mgMsiQqbvLs27W7yZJ0wTf169tQsNXo7b3eYcjLYa5156k22BjF7/1DSD4e5a8Qx/MlMPmL4hmVl2kx9JBfl0oz+dOKw+Tukspd7GInTxSA9/5xIXp0FvCUrfQ+YEubeUt8yZuAXj/hKZKlfg+haVzPHt9zL+KmLoUlc5mnxUz6CsgPt6xqTrEjz8pXwup5GHmCba6A2Z6AoZHi+63qIqHSs614u16SSq6nqv1yvl2pmVB8iBCF1SZFKqdBsduusCWbytjo3lP5PQnhbvdpQt1xfyqTbqCLhfsOILJxf+QqOggd9ntuaqKtgP6q4Qh6oLMCeqFLKi5KzF2wSkao9yqvmzno2OlUBxVSmqDJhZdZvDZGFij6cakhiazuqyi6qR1gd/VuqaCfqqQQaYSXIS9bI0ilE0gmcGeTM25FWjYBWaNBObzxdUapVxqIX/Aw2sN8QvZaMmoS7Xbn2TBW6r7lqB7APC3TpmhZl2mU6+iH6CKHO2lTEIMhncglxxmp7oCk+eottg3DnrzKMxDUqBTS8SDoflx5GfjTMvDa9KotCq10dB3wkNA1bml8GppflzkZ2Ma90BFx3eg/b3Ss/ouQMuO0CXehGsSTWjsYnXqC4OvDK2o8tjyMlMTCNDnwp79scRypicLE4QtqBfxN29hwmbgjF8CiJFVHJ0M0czhjOHSVS6kiQu6gLkhI3R0ryxEuO8U8UCbL6nBNerwbM9B/vEAuwpcOJiAH90IZCTnCqIJ25K00JHSMOLt4OnbBSkJUuIdp9EDklxC0z/AxrK0lq++hQJkK9ZzdlRCTlIbKSpmMvDS/IntWMJUTS/7K+H6/+hRM/LYxdI8uJhp5fPG9hcqE/F/MtVX+nlyS8PYvxrvt4WiSVch9Edz9L8/x5fjwe52eep5l/j4JFksfWTBZdRn+E/77+CP99/QcNN7j0YIb6hAAAAABJRU5ErkJggg==)}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.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: i2.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: i3.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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: LayoutUserComponent, isStandalone: true, selector: "lib-layout-user", inputs: { isMobileOrTablet: "isMobileOrTablet", isMenuLock: "isMenuLock", isShowSidebar: "isShowSidebar" }, outputs: { menuClosed: "menuClosed", menuOpened: "menuOpened", toggleMenuLock: "toggleMenuLock" }, ngImport: i0, template: "<div class=\"c-layout-user-wrapper\">\r\n  <div class=\"c-layout-user-avatar\" [matMenuTriggerFor]=\"userMenu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\">\r\n    <sd-avatar [src]=\"avatar\" [size]=\"32\"></sd-avatar>\r\n  </div>\r\n\r\n  @if (!isMobileOrTablet) {\r\n    <div aria-hidden=\"true\" mat-mini-fab class=\"c-layout-icon-toggle\" (click)=\"onToggleMenuLock($event)\">\r\n      <mat-icon style=\"color: #8c8c8c\"> {{ isShowSidebar ? 'keyboard_arrow_right' : 'keyboard_arrow_left' }}</mat-icon>\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<!-- Popup th\u00F4ng tin User -->\r\n<mat-menu #userMenu=\"matMenu\" xPosition=\"before\" backdropClass=\"c-user-menu-backdrop-f90ce131-fa4c-4f71-a49b-ab7fa374fdd0\">\r\n  <div aria-hidden=\"true\" class=\"c-user-menu-wrapper\" (click)=\"keepOpenWhenClickInsideMenu($event)\">\r\n    <div class=\"c-user-info-wrapper\">\r\n      <div class=\"c-user-avatar\">\r\n        <sd-avatar [src]=\"avatar\" [size]=\"40\"></sd-avatar>\r\n      </div>\r\n      <span class=\"c-user-name\">{{ fullName || username }}</span>\r\n      <span class=\"c-user-email\">{{ email }}</span>\r\n    </div>\r\n\r\n    @if (changePasswordLayoutConfig) {\r\n      <div class=\"c-sign-button-wrapper\">\r\n        <button class=\"c-account-options\" (click)=\"changePassword()\">\r\n          <img alt=\"lock\" />\r\n          <span>\u0110\u1ED5i m\u1EADt kh\u1EA9u</span>\r\n        </button>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"c-sign-button-wrapper\">\r\n      <button class=\"c-sign-button\" mat-flat-button (click)=\"logout()\">\u0110\u0103ng xu\u1EA5t</button>\r\n    </div>\r\n  </div>\r\n</mat-menu>\r\n<!-- End -->\r\n", 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 img{scale:.875;content:url('data:image/svg+xml,<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A    <path%0D%0A        d=\"M12 5.66667H11.3333V4.33333C11.3333 2.49333 9.83996 1 7.99996 1C6.15996 1 4.66663 2.49333 4.66663 4.33333V5.66667H3.99996C3.26663 5.66667 2.66663 6.26667 2.66663 7V13.6667C2.66663 14.4 3.26663 15 3.99996 15H12C12.7333 15 13.3333 14.4 13.3333 13.6667V7C13.3333 6.26667 12.7333 5.66667 12 5.66667ZM5.99996 4.33333C5.99996 3.22667 6.89329 2.33333 7.99996 2.33333C9.10663 2.33333 9.99996 3.22667 9.99996 4.33333V5.66667H5.99996V4.33333ZM12 13.6667H3.99996V7H12V13.6667ZM7.99996 11.6667C8.73329 11.6667 9.33329 11.0667 9.33329 10.3333C9.33329 9.6 8.73329 9 7.99996 9C7.26663 9 6.66663 9.6 6.66663 10.3333C6.66663 11.0667 7.26663 11.6667 7.99996 11.6667Z\"%0D%0A        fill=\"%23757575\" />%0D%0A</svg>')}.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: i2.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: i2.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: i3.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: i4.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LayoutUserComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-layout-user', imports: [MatMenuModule, MatButtonModule, MatIconModule, MatTooltipModule], template: "<div class=\"c-layout-user-wrapper\">\r\n  <div class=\"c-layout-user-avatar\" [matMenuTriggerFor]=\"userMenu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\">\r\n    <img alt=\"avatar\" class=\"c-avatar\" />\r\n  </div>\r\n\r\n  @if (!isMobileOrTablet) {\r\n    <div aria-hidden=\"true\" mat-mini-fab class=\"c-layout-icon-toggle\" (click)=\"onToggleMenuLock($event)\">\r\n      <mat-icon style=\"color: #8c8c8c\"> {{ isShowSidebar ? 'keyboard_arrow_right' : 'keyboard_arrow_left' }}</mat-icon>\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<!-- Popup th\u00F4ng tin User -->\r\n<mat-menu #userMenu=\"matMenu\" xPosition=\"before\" backdropClass=\"c-user-menu-backdrop-f90ce131-fa4c-4f71-a49b-ab7fa374fdd0\">\r\n  <div aria-hidden=\"true\" class=\"c-user-menu-wrapper\" (click)=\"keepOpenWhenClickInsideMenu($event)\">\r\n    <div class=\"c-user-info-wrapper\">\r\n      <div class=\"c-user-avatar\">\r\n        <img alt=\"avatar\" class=\"c-avatar\" />\r\n      </div>\r\n      <span class=\"c-user-name\">{{ fullName || username }}</span>\r\n      <span class=\"c-user-email\">{{ email }}</span>\r\n    </div>\r\n\r\n    @if (changePasswordLayoutConfig) {\r\n      <div class=\"c-sign-button-wrapper\">\r\n        <button class=\"c-account-options\" (click)=\"changePassword()\">\r\n          <img alt=\"lock\" />\r\n          <span>\u0110\u1ED5i m\u1EADt kh\u1EA9u</span>\r\n        </button>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"c-sign-button-wrapper\">\r\n      <button class=\"c-sign-button\" mat-flat-button (click)=\"logout()\">\u0110\u0103ng xu\u1EA5t</button>\r\n    </div>\r\n  </div>\r\n</mat-menu>\r\n<!-- End -->\r\n", 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 img{scale:.875;content:url('data:image/svg+xml,<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A    <path%0D%0A        d=\"M12 5.66667H11.3333V4.33333C11.3333 2.49333 9.83996 1 7.99996 1C6.15996 1 4.66663 2.49333 4.66663 4.33333V5.66667H3.99996C3.26663 5.66667 2.66663 6.26667 2.66663 7V13.6667C2.66663 14.4 3.26663 15 3.99996 15H12C12.7333 15 13.3333 14.4 13.3333 13.6667V7C13.3333 6.26667 12.7333 5.66667 12 5.66667ZM5.99996 4.33333C5.99996 3.22667 6.89329 2.33333 7.99996 2.33333C9.10663 2.33333 9.99996 3.22667 9.99996 4.33333V5.66667H5.99996V4.33333ZM12 13.6667H3.99996V7H12V13.6667ZM7.99996 11.6667C8.73329 11.6667 9.33329 11.0667 9.33329 10.3333C9.33329 9.6 8.73329 9 7.99996 9C7.26663 9 6.66663 9.6 6.66663 10.3333C6.66663 11.0667 7.26663 11.6667 7.99996 11.6667Z\"%0D%0A        fill=\"%23757575\" />%0D%0A</svg>')}.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;content:url(data:image/png;base64,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)}\n"] }]
+            args: [{ selector: 'lib-layout-user', imports: [MatMenuModule, MatButtonModule, MatIconModule, MatTooltipModule, SdAvatar], template: "<div class=\"c-layout-user-wrapper\">\r\n  <div class=\"c-layout-user-avatar\" [matMenuTriggerFor]=\"userMenu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\">\r\n    <sd-avatar [src]=\"avatar\" [size]=\"32\"></sd-avatar>\r\n  </div>\r\n\r\n  @if (!isMobileOrTablet) {\r\n    <div aria-hidden=\"true\" mat-mini-fab class=\"c-layout-icon-toggle\" (click)=\"onToggleMenuLock($event)\">\r\n      <mat-icon style=\"color: #8c8c8c\"> {{ isShowSidebar ? 'keyboard_arrow_right' : 'keyboard_arrow_left' }}</mat-icon>\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<!-- Popup th\u00F4ng tin User -->\r\n<mat-menu #userMenu=\"matMenu\" xPosition=\"before\" backdropClass=\"c-user-menu-backdrop-f90ce131-fa4c-4f71-a49b-ab7fa374fdd0\">\r\n  <div aria-hidden=\"true\" class=\"c-user-menu-wrapper\" (click)=\"keepOpenWhenClickInsideMenu($event)\">\r\n    <div class=\"c-user-info-wrapper\">\r\n      <div class=\"c-user-avatar\">\r\n        <sd-avatar [src]=\"avatar\" [size]=\"40\"></sd-avatar>\r\n      </div>\r\n      <span class=\"c-user-name\">{{ fullName || username }}</span>\r\n      <span class=\"c-user-email\">{{ email }}</span>\r\n    </div>\r\n\r\n    @if (changePasswordLayoutConfig) {\r\n      <div class=\"c-sign-button-wrapper\">\r\n        <button class=\"c-account-options\" (click)=\"changePassword()\">\r\n          <img alt=\"lock\" />\r\n          <span>\u0110\u1ED5i m\u1EADt kh\u1EA9u</span>\r\n        </button>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"c-sign-button-wrapper\">\r\n      <button class=\"c-sign-button\" mat-flat-button (click)=\"logout()\">\u0110\u0103ng xu\u1EA5t</button>\r\n    </div>\r\n  </div>\r\n</mat-menu>\r\n<!-- End -->\r\n", 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 img{scale:.875;content:url('data:image/svg+xml,<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A    <path%0D%0A        d=\"M12 5.66667H11.3333V4.33333C11.3333 2.49333 9.83996 1 7.99996 1C6.15996 1 4.66663 2.49333 4.66663 4.33333V5.66667H3.99996C3.26663 5.66667 2.66663 6.26667 2.66663 7V13.6667C2.66663 14.4 3.26663 15 3.99996 15H12C12.7333 15 13.3333 14.4 13.3333 13.6667V7C13.3333 6.26667 12.7333 5.66667 12 5.66667ZM5.99996 4.33333C5.99996 3.22667 6.89329 2.33333 7.99996 2.33333C9.10663 2.33333 9.99996 3.22667 9.99996 4.33333V5.66667H5.99996V4.33333ZM12 13.6667H3.99996V7H12V13.6667ZM7.99996 11.6667C8.73329 11.6667 9.33329 11.0667 9.33329 10.3333C9.33329 9.6 8.73329 9 7.99996 9C7.26663 9 6.66663 9.6 6.66663 10.3333C6.66663 11.0667 7.26663 11.6667 7.99996 11.6667Z\"%0D%0A        fill=\"%23757575\" />%0D%0A</svg>')}.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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [SD_LAYOUT_CONFIGURATION]
@@ -371,7 +387,8 @@ class LayoutSidebarComponent {
     sidebar;
     dataSource = new MatTreeNestedDataSource();
     idMenuGroupActive; // Id menu-group đang đc active
-    menusByGroup = []; // data menus-group được active
+    menusByGroup = []; // Data menus-group được active
+    totalMenuInMenusByGroup = 0; // Tổng số menu có trong menus-group được active
     treeControl = new NestedTreeControl(node => ('children' in node && node.children?.length ? node.children : []));
     // End
     constructor(router, layoutConfiguration, layoutStorageService, menuFocusPipe) {
@@ -480,6 +497,7 @@ class LayoutSidebarComponent {
         // Case 2: Menu có children
         if ('children' in menuGroupNode && menuGroupNode.children?.length) {
             this.menusByGroup = menuGroupNode.children;
+            this.totalMenuInMenusByGroup = this.#getTotalMenus(this.menusByGroup);
             this.dataSource.data = this.menusByGroup;
             this.searchText = '';
             this.onFilterSearchText(this.searchText);
@@ -616,6 +634,7 @@ class LayoutSidebarComponent {
                 this.titleMenuGroup = '';
                 this.menusByGroup = [];
             }
+            this.totalMenuInMenusByGroup = this.#getTotalMenus(this.menusByGroup);
             this.dataSource.data = this.menusByGroup;
         }
     };
@@ -733,8 +752,24 @@ class LayoutSidebarComponent {
         str = str.trim();
         return str;
     };
+    #getTotalMenus = (menus) => {
+        let total = 0;
+        for (const menu of menus) {
+            total += this.#countMenuNode(menu);
+        }
+        return total;
+    };
+    #countMenuNode = (menu) => {
+        let count = 0;
+        if ('children' in menu && menu.children?.length) {
+            for (const child of menu.children) {
+                count += this.#countMenuNode(child);
+            }
+        }
+        return count;
+    };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LayoutSidebarComponent, deps: [{ token: i1$2.Router }, { token: SD_LAYOUT_CONFIGURATION }, { token: SdLayoutStorageService }, { token: MenuFocusPipe }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: LayoutSidebarComponent, isStandalone: true, selector: "lib-layout-sidebar", inputs: { isShowSidebar: "isShowSidebar", _menus: ["menus", "_menus"] }, outputs: { expandSideBar: "expandSideBar", popupUserMenuClosed: "popupUserMenuClosed", popupUserMenuOpened: "popupUserMenuOpened", showSideBar: "showSideBar" }, ngImport: i0, template: "@if (sidebar) {\r\n  <div class=\"wrapper\" [style.height]=\"isMobileOrTablet ? screenHeight + 'px' : '100%'\">\r\n    <div class=\"c-header\">\r\n      @if (sidebar.logoUrl) {\r\n        <div class=\"c-logo\">\r\n          <a href=\"javascript:;\" (click)=\"openHomePage()\">\r\n            <img alt=\"logo\" [src]=\"sidebar.logoUrl\" />\r\n          </a>\r\n        </div>\r\n      }\r\n      <div class=\"c-title-menu-group\">\r\n        <span>{{ titleMenuGroup || sidebar.defaultTitle || 'Back Office' }}</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"c-body\">\r\n      <div class=\"c-menu\">\r\n        <!-- Icon menu-group -->\r\n        <div class=\"c-menu-group\">\r\n          @for (nodeMenuGroup of menusOrigin; track nodeMenuGroup.id) {\r\n            <button\r\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, nodeMenuGroup)\"\r\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, nodeMenuGroup)\"\r\n              (click)=\"expandMenuGroup(nodeMenuGroup)\"\r\n              [matTooltip]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\r\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\r\n              [matTooltipPosition]=\"'right'\"\r\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\r\n              <mat-icon\r\n                class=\"c-menu-group-icon\"\r\n                [ngStyle]=\"{\r\n                  color: idMenuGroupActive === nodeMenuGroup?.id ? sidebar.brandColor || '#2962FF' : '#8C8C8C',\r\n                  backgroundColor: idMenuGroupActive === nodeMenuGroup?.id ? sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                }\">\r\n                {{ nodeMenuGroup.icon }}\r\n              </mat-icon>\r\n            </button>\r\n          }\r\n        </div>\r\n        <!-- End -->\r\n\r\n        <!-- Gi\u00E1 tr\u1ECB menu-group -->\r\n        <div class=\"c-menu-tree\">\r\n          @if (menusByGroup?.length) {\r\n            <div style=\"padding: 0px 4px\" class=\"c-menu-tree-search\">\r\n              <sd-input size=\"sm\" placeholder=\"T\u00ECm ki\u1EBFm\" [model]=\"searchText\" (sdChange)=\"onFilterSearchText($event)\">\r\n                <ng-template sdSuffixDef>\r\n                  @if (searchText) {\r\n                    <mat-icon class=\"c-search-prefix-icon cancel\" (click)=\"onClearSearchText()\">cancel</mat-icon>\r\n                  } @else {\r\n                    <mat-icon class=\"c-search-prefix-icon search\">search</mat-icon>\r\n                  }\r\n                </ng-template>\r\n              </sd-input>\r\n            </div>\r\n          }\r\n          <div class=\"c-menu-tree-container\">\r\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\r\n              <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\r\n                <li\r\n                  class=\"c-menu-node\"\r\n                  (mouseenter)=\"onMouseOverMenuNode($event, node)\"\r\n                  (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\r\n                  [ngStyle]=\"{\r\n                    backgroundColor: (currentPath | menuFocus: node) ? sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                  }\">\r\n                  <div aria-hidden=\"true\" class=\"c-menu-node-description\" (click)=\"navigate(node)\" [class.d-none]=\"!isShowSidebar\">\r\n                    <div\r\n                      class=\"c-menu-node-description-content\"\r\n                      [ngStyle]=\"{\r\n                        color: (currentPath | menuFocus: node) ? sidebar.brandColor || '#2962FF' : '#1F1F1F',\r\n                      }\"\r\n                      [innerHTML]=\"node.title | highLightSearch: searchText | sdSafeHtml\"></div>\r\n                  </div>\r\n                </li>\r\n              </mat-nested-tree-node>\r\n\r\n              <mat-nested-tree-node\r\n                *matTreeNodeDef=\"let node; when: hasChild\"\r\n                aria-hidden=\"true\"\r\n                [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath | menuFocus: node }\">\r\n                <li>\r\n                  <div\r\n                    class=\"c-menu-node\"\r\n                    (mouseenter)=\"onMouseOverMenuNode($event, node)\"\r\n                    (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\r\n                    <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\r\n                      <div [class.d-none]=\"!isShowSidebar\" class=\"c-menu-node-description\" (click)=\"onToggleMenuNode(node)\">\r\n                        <div\r\n                          class=\"c-menu-node-description-content\"\r\n                          [innerHTML]=\"node.title | highLightSearch: searchText | sdSafeHtml\"></div>\r\n                        <mat-icon class=\"c-menu-node-description-icon-expand\">\r\n                          {{ treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\r\n                        </mat-icon>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <ul class=\"p-0\" [class.d-none]=\"!treeControl.isExpanded(node)\">\r\n                    <ng-container matTreeNodeOutlet></ng-container>\r\n                  </ul>\r\n                </li>\r\n              </mat-nested-tree-node>\r\n            </mat-tree>\r\n          </div>\r\n        </div>\r\n        <!-- End -->\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"c-footer\">\r\n      <lib-layout-user\r\n        [isMobileOrTablet]=\"isMobileOrTablet\"\r\n        (menuOpened)=\"onUserMenuOpened()\"\r\n        (menuClosed)=\"onUserMenuClosed()\"\r\n        [isShowSidebar]=\"isShowSidebar\"\r\n        (toggleMenuLock)=\"toggleMenuLock($event)\">\r\n      </lib-layout-user>\r\n    </div>\r\n\r\n    <div class=\"c-vertical\"></div>\r\n  </div>\r\n}\r\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}.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{text-align:left;background-color:transparent;border:none;font-size:20px}.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", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "model", "required", "readonly", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "disabled", "tooltip"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "sdFocusForceBlur", "keyupEnter"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i6.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i6.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "component", type: i6.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i6.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: i7.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, selector: "lib-layout-user", inputs: ["isMobileOrTablet", "isMenuLock", "isShowSidebar"], outputs: ["menuClosed", "menuOpened", "toggleMenuLock"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: LayoutSidebarComponent, isStandalone: true, selector: "lib-layout-sidebar", inputs: { isShowSidebar: "isShowSidebar", _menus: ["menus", "_menus"] }, outputs: { expandSideBar: "expandSideBar", popupUserMenuClosed: "popupUserMenuClosed", popupUserMenuOpened: "popupUserMenuOpened", showSideBar: "showSideBar" }, ngImport: i0, template: "@if (sidebar) {\r\n  <div class=\"wrapper\" [style.height]=\"isMobileOrTablet ? screenHeight + 'px' : '100%'\">\r\n    <div class=\"c-header\">\r\n      @if (sidebar.logoUrl) {\r\n        <div class=\"c-logo\">\r\n          <a href=\"javascript:;\" (click)=\"openHomePage()\">\r\n            <img alt=\"logo\" [src]=\"sidebar.logoUrl\" />\r\n          </a>\r\n        </div>\r\n      }\r\n      <div class=\"c-title-menu-group\">\r\n        <span>{{ titleMenuGroup || sidebar.defaultTitle || 'Back Office' }}</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"c-body\">\r\n      <div class=\"c-menu\">\r\n        <!-- Icon menu-group -->\r\n        <div class=\"c-menu-group\">\r\n          @for (nodeMenuGroup of menusOrigin; track nodeMenuGroup.id) {\r\n            <button\r\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, nodeMenuGroup)\"\r\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, nodeMenuGroup)\"\r\n              (click)=\"expandMenuGroup(nodeMenuGroup)\"\r\n              [matTooltip]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\r\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\r\n              [matTooltipPosition]=\"'right'\"\r\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\r\n              <mat-icon\r\n                class=\"c-menu-group-icon\"\r\n                [ngStyle]=\"{\r\n                  color: idMenuGroupActive === nodeMenuGroup?.id ? sidebar.brandColor || '#2962FF' : '#8C8C8C',\r\n                  backgroundColor: idMenuGroupActive === nodeMenuGroup?.id ? sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                }\">\r\n                {{ nodeMenuGroup.icon }}\r\n              </mat-icon>\r\n            </button>\r\n          }\r\n        </div>\r\n        <!-- End -->\r\n\r\n        <!-- Gi\u00E1 tr\u1ECB menu-group -->\r\n        <div class=\"c-menu-tree\">\r\n          @if (totalMenuInMenusByGroup >= 10) {\r\n            <div style=\"padding: 0px 4px\" class=\"c-menu-tree-search\">\r\n              <sd-input size=\"sm\" placeholder=\"T\u00ECm ki\u1EBFm\" [model]=\"searchText\" (sdChange)=\"onFilterSearchText($event)\">\r\n                <ng-template sdSuffixDef>\r\n                  @if (searchText) {\r\n                    <mat-icon class=\"c-search-prefix-icon cancel\" (click)=\"onClearSearchText()\">cancel</mat-icon>\r\n                  } @else {\r\n                    <mat-icon class=\"c-search-prefix-icon search\">search</mat-icon>\r\n                  }\r\n                </ng-template>\r\n              </sd-input>\r\n            </div>\r\n          }\r\n          <div class=\"c-menu-tree-container\">\r\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\r\n              <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\r\n                <li\r\n                  class=\"c-menu-node\"\r\n                  (mouseenter)=\"onMouseOverMenuNode($event, node)\"\r\n                  (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\r\n                  [ngStyle]=\"{\r\n                    backgroundColor: (currentPath | menuFocus: node) ? sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                  }\">\r\n                  <div aria-hidden=\"true\" class=\"c-menu-node-description\" (click)=\"navigate(node)\" [class.d-none]=\"!isShowSidebar\">\r\n                    <div\r\n                      class=\"c-menu-node-description-content\"\r\n                      [ngStyle]=\"{\r\n                        color: (currentPath | menuFocus: node) ? sidebar.brandColor || '#2962FF' : '#1F1F1F',\r\n                      }\"\r\n                      [innerHTML]=\"node.title | highLightSearch: searchText | sdSafeHtml\"></div>\r\n                  </div>\r\n                </li>\r\n              </mat-nested-tree-node>\r\n\r\n              <mat-nested-tree-node\r\n                *matTreeNodeDef=\"let node; when: hasChild\"\r\n                aria-hidden=\"true\"\r\n                [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath | menuFocus: node }\">\r\n                <li>\r\n                  <div\r\n                    class=\"c-menu-node\"\r\n                    (mouseenter)=\"onMouseOverMenuNode($event, node)\"\r\n                    (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\r\n                    <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\r\n                      <div [class.d-none]=\"!isShowSidebar\" class=\"c-menu-node-description\" (click)=\"onToggleMenuNode(node)\">\r\n                        <div\r\n                          class=\"c-menu-node-description-content\"\r\n                          [innerHTML]=\"node.title | highLightSearch: searchText | sdSafeHtml\"></div>\r\n                        <mat-icon class=\"c-menu-node-description-icon-expand\">\r\n                          {{ treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\r\n                        </mat-icon>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <ul class=\"p-0\" [class.d-none]=\"!treeControl.isExpanded(node)\">\r\n                    <ng-container matTreeNodeOutlet></ng-container>\r\n                  </ul>\r\n                </li>\r\n              </mat-nested-tree-node>\r\n            </mat-tree>\r\n          </div>\r\n        </div>\r\n        <!-- End -->\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"c-footer\">\r\n      <lib-layout-user\r\n        [isMobileOrTablet]=\"isMobileOrTablet\"\r\n        (menuOpened)=\"onUserMenuOpened()\"\r\n        (menuClosed)=\"onUserMenuClosed()\"\r\n        [isShowSidebar]=\"isShowSidebar\"\r\n        (toggleMenuLock)=\"toggleMenuLock($event)\">\r\n      </lib-layout-user>\r\n    </div>\r\n\r\n    <div class=\"c-vertical\"></div>\r\n  </div>\r\n}\r\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}.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{text-align:left;background-color:transparent;border:none;font-size:20px}.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", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "model", "required", "readonly", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "disabled", "viewed", "hyperlink", "tooltip"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "sdFocusForceBlur", "keyupEnter"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i6.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i6.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "component", type: i6.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i6.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: i7.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, selector: "lib-layout-user", inputs: ["isMobileOrTablet", "isMenuLock", "isShowSidebar"], outputs: ["menuClosed", "menuOpened", "toggleMenuLock"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LayoutSidebarComponent, decorators: [{
             type: Component,
@@ -752,7 +787,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         HighlightSearchPipe,
                         SdSuffixDefDirective,
                         LayoutUserComponent,
-                    ], template: "@if (sidebar) {\r\n  <div class=\"wrapper\" [style.height]=\"isMobileOrTablet ? screenHeight + 'px' : '100%'\">\r\n    <div class=\"c-header\">\r\n      @if (sidebar.logoUrl) {\r\n        <div class=\"c-logo\">\r\n          <a href=\"javascript:;\" (click)=\"openHomePage()\">\r\n            <img alt=\"logo\" [src]=\"sidebar.logoUrl\" />\r\n          </a>\r\n        </div>\r\n      }\r\n      <div class=\"c-title-menu-group\">\r\n        <span>{{ titleMenuGroup || sidebar.defaultTitle || 'Back Office' }}</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"c-body\">\r\n      <div class=\"c-menu\">\r\n        <!-- Icon menu-group -->\r\n        <div class=\"c-menu-group\">\r\n          @for (nodeMenuGroup of menusOrigin; track nodeMenuGroup.id) {\r\n            <button\r\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, nodeMenuGroup)\"\r\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, nodeMenuGroup)\"\r\n              (click)=\"expandMenuGroup(nodeMenuGroup)\"\r\n              [matTooltip]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\r\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\r\n              [matTooltipPosition]=\"'right'\"\r\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\r\n              <mat-icon\r\n                class=\"c-menu-group-icon\"\r\n                [ngStyle]=\"{\r\n                  color: idMenuGroupActive === nodeMenuGroup?.id ? sidebar.brandColor || '#2962FF' : '#8C8C8C',\r\n                  backgroundColor: idMenuGroupActive === nodeMenuGroup?.id ? sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                }\">\r\n                {{ nodeMenuGroup.icon }}\r\n              </mat-icon>\r\n            </button>\r\n          }\r\n        </div>\r\n        <!-- End -->\r\n\r\n        <!-- Gi\u00E1 tr\u1ECB menu-group -->\r\n        <div class=\"c-menu-tree\">\r\n          @if (menusByGroup?.length) {\r\n            <div style=\"padding: 0px 4px\" class=\"c-menu-tree-search\">\r\n              <sd-input size=\"sm\" placeholder=\"T\u00ECm ki\u1EBFm\" [model]=\"searchText\" (sdChange)=\"onFilterSearchText($event)\">\r\n                <ng-template sdSuffixDef>\r\n                  @if (searchText) {\r\n                    <mat-icon class=\"c-search-prefix-icon cancel\" (click)=\"onClearSearchText()\">cancel</mat-icon>\r\n                  } @else {\r\n                    <mat-icon class=\"c-search-prefix-icon search\">search</mat-icon>\r\n                  }\r\n                </ng-template>\r\n              </sd-input>\r\n            </div>\r\n          }\r\n          <div class=\"c-menu-tree-container\">\r\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\r\n              <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\r\n                <li\r\n                  class=\"c-menu-node\"\r\n                  (mouseenter)=\"onMouseOverMenuNode($event, node)\"\r\n                  (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\r\n                  [ngStyle]=\"{\r\n                    backgroundColor: (currentPath | menuFocus: node) ? sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                  }\">\r\n                  <div aria-hidden=\"true\" class=\"c-menu-node-description\" (click)=\"navigate(node)\" [class.d-none]=\"!isShowSidebar\">\r\n                    <div\r\n                      class=\"c-menu-node-description-content\"\r\n                      [ngStyle]=\"{\r\n                        color: (currentPath | menuFocus: node) ? sidebar.brandColor || '#2962FF' : '#1F1F1F',\r\n                      }\"\r\n                      [innerHTML]=\"node.title | highLightSearch: searchText | sdSafeHtml\"></div>\r\n                  </div>\r\n                </li>\r\n              </mat-nested-tree-node>\r\n\r\n              <mat-nested-tree-node\r\n                *matTreeNodeDef=\"let node; when: hasChild\"\r\n                aria-hidden=\"true\"\r\n                [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath | menuFocus: node }\">\r\n                <li>\r\n                  <div\r\n                    class=\"c-menu-node\"\r\n                    (mouseenter)=\"onMouseOverMenuNode($event, node)\"\r\n                    (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\r\n                    <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\r\n                      <div [class.d-none]=\"!isShowSidebar\" class=\"c-menu-node-description\" (click)=\"onToggleMenuNode(node)\">\r\n                        <div\r\n                          class=\"c-menu-node-description-content\"\r\n                          [innerHTML]=\"node.title | highLightSearch: searchText | sdSafeHtml\"></div>\r\n                        <mat-icon class=\"c-menu-node-description-icon-expand\">\r\n                          {{ treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\r\n                        </mat-icon>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <ul class=\"p-0\" [class.d-none]=\"!treeControl.isExpanded(node)\">\r\n                    <ng-container matTreeNodeOutlet></ng-container>\r\n                  </ul>\r\n                </li>\r\n              </mat-nested-tree-node>\r\n            </mat-tree>\r\n          </div>\r\n        </div>\r\n        <!-- End -->\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"c-footer\">\r\n      <lib-layout-user\r\n        [isMobileOrTablet]=\"isMobileOrTablet\"\r\n        (menuOpened)=\"onUserMenuOpened()\"\r\n        (menuClosed)=\"onUserMenuClosed()\"\r\n        [isShowSidebar]=\"isShowSidebar\"\r\n        (toggleMenuLock)=\"toggleMenuLock($event)\">\r\n      </lib-layout-user>\r\n    </div>\r\n\r\n    <div class=\"c-vertical\"></div>\r\n  </div>\r\n}\r\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}.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{text-align:left;background-color:transparent;border:none;font-size:20px}.wrapper .c-footer{height:80px}.wrapper .c-vertical{position:fixed;height:100vh;left:58px;width:2px;background-color:#f8f9fa;pointer-events:none}\n"] }]
+                    ], template: "@if (sidebar) {\r\n  <div class=\"wrapper\" [style.height]=\"isMobileOrTablet ? screenHeight + 'px' : '100%'\">\r\n    <div class=\"c-header\">\r\n      @if (sidebar.logoUrl) {\r\n        <div class=\"c-logo\">\r\n          <a href=\"javascript:;\" (click)=\"openHomePage()\">\r\n            <img alt=\"logo\" [src]=\"sidebar.logoUrl\" />\r\n          </a>\r\n        </div>\r\n      }\r\n      <div class=\"c-title-menu-group\">\r\n        <span>{{ titleMenuGroup || sidebar.defaultTitle || 'Back Office' }}</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"c-body\">\r\n      <div class=\"c-menu\">\r\n        <!-- Icon menu-group -->\r\n        <div class=\"c-menu-group\">\r\n          @for (nodeMenuGroup of menusOrigin; track nodeMenuGroup.id) {\r\n            <button\r\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, nodeMenuGroup)\"\r\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, nodeMenuGroup)\"\r\n              (click)=\"expandMenuGroup(nodeMenuGroup)\"\r\n              [matTooltip]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\r\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\r\n              [matTooltipPosition]=\"'right'\"\r\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\r\n              <mat-icon\r\n                class=\"c-menu-group-icon\"\r\n                [ngStyle]=\"{\r\n                  color: idMenuGroupActive === nodeMenuGroup?.id ? sidebar.brandColor || '#2962FF' : '#8C8C8C',\r\n                  backgroundColor: idMenuGroupActive === nodeMenuGroup?.id ? sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                }\">\r\n                {{ nodeMenuGroup.icon }}\r\n              </mat-icon>\r\n            </button>\r\n          }\r\n        </div>\r\n        <!-- End -->\r\n\r\n        <!-- Gi\u00E1 tr\u1ECB menu-group -->\r\n        <div class=\"c-menu-tree\">\r\n          @if (totalMenuInMenusByGroup >= 10) {\r\n            <div style=\"padding: 0px 4px\" class=\"c-menu-tree-search\">\r\n              <sd-input size=\"sm\" placeholder=\"T\u00ECm ki\u1EBFm\" [model]=\"searchText\" (sdChange)=\"onFilterSearchText($event)\">\r\n                <ng-template sdSuffixDef>\r\n                  @if (searchText) {\r\n                    <mat-icon class=\"c-search-prefix-icon cancel\" (click)=\"onClearSearchText()\">cancel</mat-icon>\r\n                  } @else {\r\n                    <mat-icon class=\"c-search-prefix-icon search\">search</mat-icon>\r\n                  }\r\n                </ng-template>\r\n              </sd-input>\r\n            </div>\r\n          }\r\n          <div class=\"c-menu-tree-container\">\r\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\r\n              <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\r\n                <li\r\n                  class=\"c-menu-node\"\r\n                  (mouseenter)=\"onMouseOverMenuNode($event, node)\"\r\n                  (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\r\n                  [ngStyle]=\"{\r\n                    backgroundColor: (currentPath | menuFocus: node) ? sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                  }\">\r\n                  <div aria-hidden=\"true\" class=\"c-menu-node-description\" (click)=\"navigate(node)\" [class.d-none]=\"!isShowSidebar\">\r\n                    <div\r\n                      class=\"c-menu-node-description-content\"\r\n                      [ngStyle]=\"{\r\n                        color: (currentPath | menuFocus: node) ? sidebar.brandColor || '#2962FF' : '#1F1F1F',\r\n                      }\"\r\n                      [innerHTML]=\"node.title | highLightSearch: searchText | sdSafeHtml\"></div>\r\n                  </div>\r\n                </li>\r\n              </mat-nested-tree-node>\r\n\r\n              <mat-nested-tree-node\r\n                *matTreeNodeDef=\"let node; when: hasChild\"\r\n                aria-hidden=\"true\"\r\n                [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath | menuFocus: node }\">\r\n                <li>\r\n                  <div\r\n                    class=\"c-menu-node\"\r\n                    (mouseenter)=\"onMouseOverMenuNode($event, node)\"\r\n                    (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\r\n                    <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\r\n                      <div [class.d-none]=\"!isShowSidebar\" class=\"c-menu-node-description\" (click)=\"onToggleMenuNode(node)\">\r\n                        <div\r\n                          class=\"c-menu-node-description-content\"\r\n                          [innerHTML]=\"node.title | highLightSearch: searchText | sdSafeHtml\"></div>\r\n                        <mat-icon class=\"c-menu-node-description-icon-expand\">\r\n                          {{ treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\r\n                        </mat-icon>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <ul class=\"p-0\" [class.d-none]=\"!treeControl.isExpanded(node)\">\r\n                    <ng-container matTreeNodeOutlet></ng-container>\r\n                  </ul>\r\n                </li>\r\n              </mat-nested-tree-node>\r\n            </mat-tree>\r\n          </div>\r\n        </div>\r\n        <!-- End -->\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"c-footer\">\r\n      <lib-layout-user\r\n        [isMobileOrTablet]=\"isMobileOrTablet\"\r\n        (menuOpened)=\"onUserMenuOpened()\"\r\n        (menuClosed)=\"onUserMenuClosed()\"\r\n        [isShowSidebar]=\"isShowSidebar\"\r\n        (toggleMenuLock)=\"toggleMenuLock($event)\">\r\n      </lib-layout-user>\r\n    </div>\r\n\r\n    <div class=\"c-vertical\"></div>\r\n  </div>\r\n}\r\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}.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{text-align:left;background-color:transparent;border:none;font-size:20px}.wrapper .c-footer{height:80px}.wrapper .c-vertical{position:fixed;height:100vh;left:58px;width:2px;background-color:#f8f9fa;pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.Router }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [SD_LAYOUT_CONFIGURATION]