@sdcorejs/angular 19.0.0-rc.1

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

@@ -0,0 +1,1633 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, booleanAttribute, effect, Component, Injectable, InjectionToken, signal, Pipe, output, DestroyRef, computed, untracked, viewChild, Inject, NgModule } from '@angular/core';
+import * as i1$4 from '@angular/common';
+import { CommonModule, NgTemplateOutlet } from '@angular/common';
+import * as i1$6 from '@angular/router';
+import { Router, NavigationEnd, RouterModule, ActivatedRoute } from '@angular/router';
+import { __decorate } from 'tslib';
+import * as i1$3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import { SdAvatar, SdTabComponent, SdButton } from '@sdcorejs/angular/components';
+import { I18nService, TranslatePipe, I18N_STORAGE_KEY, I18N_MESSAGES } from '@sdcorejs/angular/i18n';
+import * as i1 from '@sdcorejs/angular/services';
+import { resolveMaybeAsync } from '@sdcorejs/utils/models';
+import * as uuid from 'uuid';
+import { Utilities, StringUtilities, BrowserUtilities } from '@sdcorejs/utils/fns';
+import * as i1$1 from '@sdcorejs/angular/modules/permission';
+import * as i1$5 from '@angular/material/sidenav';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { NestedTreeControl } from '@angular/cdk/tree';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import * as i4 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i3 from '@angular/material/tree';
+import { MatTreeNestedDataSource, MatTreeModule } from '@angular/material/tree';
+import { SdInput, SdSuffixDefDirective } from '@sdcorejs/angular/forms';
+import { SdSafeHtmlPipe } from '@sdcorejs/angular/pipes';
+import * as i2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i1$2 from '@angular/material/menu';
+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' });
+    constructor() {
+        effect(() => {
+            if (this.title()) {
+                this.el.nativeElement.removeAttribute('title');
+            }
+        });
+    }
+    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"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", 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: () => [] });
+
+class SdLayoutStorageService {
+    sdStorageService;
+    // Thông tin state của sidebar
+    isShowSidebar;
+    menuLockStatus;
+    lastActiveMenuGroupId;
+    pinnedMenuGroup;
+    // End
+    constructor(sdStorageService) {
+        this.sdStorageService = sdStorageService;
+        // State sidebar
+        this.isShowSidebar = this.sdStorageService.create('cb07c316-ed6d-4620-9e92-53dbef6aa983');
+        this.menuLockStatus = this.sdStorageService.create('2c2f4816-18b3-4ec3-8177-7b90bff036c3');
+        this.lastActiveMenuGroupId = this.sdStorageService.create('2e6961d0-3380-4a94-a6a1-38837560cd96');
+        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' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdLayoutStorageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.SdStorageService }] });
+
+const SD_LAYOUT_CONFIGURATION = new InjectionToken('sd.layout.configuration');
+
+class SdLayoutService {
+    // ==========================================
+    // INJECT CONFIGURATIONS
+    // ==========================================
+    // WHY: optional=true cho phép layout module chạy không cần SD_LAYOUT_CONFIGURATION
+    // (use case demo / khởi tạo nhanh). Khi token không có → fallback mock data trong constructor.
+    #layoutConfiguration = inject(SD_LAYOUT_CONFIGURATION, { optional: true });
+    #i18n = inject(I18nService);
+    // ==========================================
+    // SHARED SIGNALS (STATE)
+    // ==========================================
+    userInfo = signal(undefined);
+    sidebar = signal(undefined);
+    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).
+            // Fallback dùng mock data đã i18n hóa; thật tế khi tích hợp portal cần provide SD_LAYOUT_CONFIGURATION.
+            // @i18n-ignore dev-facing console.warn — không cần dịch
+            console.warn(
+            // @i18n-ignore
+            '[SdLayoutService] SD_LAYOUT_CONFIGURATION chưa được inject — đang dùng mock data. ' +
+                // @i18n-ignore
+                'Provide token này (xem ISdLayoutConfiguration) để custom user info / sidebar / signout.');
+            this.userInfo.set(this.#mockUserInfo());
+            this.sidebar.set(this.#mockSidebar());
+            return;
+        }
+        this.#initUserInfo();
+        this.#initSidebar();
+    }
+    // ==========================================
+    // PRIVATE METHODS
+    // ==========================================
+    #initUserInfo() {
+        const userInfoConfig = this.#layoutConfiguration.userInfo;
+        if (typeof userInfoConfig === 'function') {
+            resolveMaybeAsync(userInfoConfig()).then(userInfo => this.userInfo.set(userInfo));
+        }
+        else {
+            this.userInfo.set(userInfoConfig);
+        }
+    }
+    #initSidebar() {
+        const sidebarConfig = this.#layoutConfiguration.sidebar;
+        if (typeof sidebarConfig === 'function') {
+            resolveMaybeAsync(sidebarConfig()).then(config => this.sidebar.set(config));
+        }
+        else {
+            this.sidebar.set(sidebarConfig);
+        }
+    }
+    #mockUserInfo() {
+        return {
+            fullName: this.#i18n.t('core.module.layout.mock.user.full-name'),
+            email: 'demo@example.com',
+            username: 'demo',
+        };
+    }
+    #mockSidebar() {
+        return {
+            version: 1,
+            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
+     });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", 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
+                }]
+        }], ctorParameters: () => [] });
+
+// End
+class MenuPipe {
+    permissionService;
+    constructor(permissionService) {
+        this.permissionService = permissionService;
+    }
+    transform(menus) {
+        const results = [];
+        const check = (menu) => {
+            if ('children' in menu) {
+                const children = [];
+                menu.children?.forEach(childMenu => {
+                    childMenu = check(childMenu);
+                    if (childMenu) {
+                        children.push({ ...childMenu, id: this.#getHashIdMenu(childMenu) });
+                    }
+                });
+                if (!children.length) {
+                    return null;
+                }
+                return {
+                    ...menu,
+                    children,
+                    id: this.#getHashIdMenu(menu),
+                };
+            }
+            if ('permission' in menu) {
+                const path = menu?.path?.includes('http') ? menu.path : menu.path;
+                if (!menu.path) {
+                    return null;
+                }
+                if ((typeof menu.permission === 'string' || Array.isArray(menu.permission)) && this.permissionService.hasPermission(menu.permission, menu.permissionKey)) {
+                    return {
+                        ...menu,
+                        path,
+                        id: this.#getHashIdMenu(menu),
+                    };
+                }
+                if (typeof menu.permission === 'boolean' && menu.permission) {
+                    return {
+                        ...menu,
+                        path,
+                        id: this.#getHashIdMenu(menu),
+                    };
+                }
+                if (typeof menu.permission === 'function' && menu.permission()) {
+                    return {
+                        ...menu,
+                        path,
+                        id: this.#getHashIdMenu(menu),
+                    };
+                }
+                return null;
+            }
+            return {
+                ...menu,
+                id: uuid.v4(),
+            };
+        };
+        menus?.forEach(menu => {
+            menu = check(menu);
+            if (menu) {
+                results.push(menu);
+            }
+        });
+        return results;
+    }
+    #getHashIdMenu = (menu) => {
+        const extendedMenu = menu;
+        const hashKeys = ['title', 'path', 'permission', 'permissionKey', 'queryParams', 'icon', 'level', 'tooltipTitle'];
+        const hashData = hashKeys.reduce((acc, key) => {
+            const value = extendedMenu[key];
+            if (value !== undefined && value !== null) {
+                acc[key] = value;
+            }
+            return acc;
+        }, {});
+        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' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MenuPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'menu',
+                }]
+        }, {
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1$1.SdPermissionService }] });
+
+// End
+class MenuFocusPipe {
+    transform(routePath, menuItem) {
+        if (!routePath) {
+            return false;
+        }
+        if ('children' in menuItem && menuItem.children) {
+            return menuItem.children.some(child => {
+                return 'path' in child && child.path ? this.#match(routePath, child.path) : false;
+            });
+        }
+        return 'path' in menuItem && this.#match(routePath, menuItem.path);
+    }
+    #match = (routePath, path) => {
+        if (!path) {
+            return false;
+        }
+        if (routePath === path) {
+            return true;
+        }
+        return this.#normalizePath(routePath).startsWith(this.#normalizePath(path));
+    };
+    #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' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MenuFocusPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'menuFocus',
+                }]
+        }, {
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class HighlightSearchPipe {
+    transform(value, keyword, args) {
+        const { color = '#ffff00' } = args ?? {};
+        keyword = this.#normalizeValue(keyword);
+        if (!keyword || keyword.length < 2) {
+            return value;
+        }
+        value = value?.trim() || '';
+        const regex = new RegExp(StringUtilities.changeAliasLowerCase(keyword), 'gi'); //'gi' for case insensitive and can use 'g' if you want the search to be case sensitive.
+        const aliasLowerCaseStr = StringUtilities.changeAliasLowerCase(value);
+        const strs = [];
+        let previousOffset = 0;
+        aliasLowerCaseStr.replace(regex, (_, offset) => {
+            strs.push(value.substring(previousOffset, offset));
+            strs.push(`<mark style="background-color: ${color}">${value.substring(offset, offset + keyword.length)}</mark>`);
+            previousOffset = offset + keyword.length;
+            return `<mark style="background-color: ${color}">${value.substring(offset, offset + keyword.length)}</mark>`;
+        });
+        strs.push(value.substring(previousOffset, value.length));
+        return strs.join('');
+    }
+    #normalizeValue = (keyword) => {
+        let str = keyword?.toString() ?? '';
+        /* eslint-disable no-useless-escape */
+        str = str.replace(/!|@|%|\^|\*|\(|\)|\+|\=|\<|\>|\?|\/|,|\.|\:|\;|\'|\"|\&|\#|\[|\]|~|\$|_|`|-|{|}|\||\\/g, '');
+        str = str.replace(/ + /g, ' ');
+        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" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HighlightSearchPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'highLightSearch',
+                }]
+        }] });
+
+let LayoutUserComponent$1 = class LayoutUserComponent {
+    // ==========================================
+    // INJECT SERVICES
+    // ==========================================
+    #layoutConfiguration = inject(SD_LAYOUT_CONFIGURATION);
+    // ==========================================
+    // SIGNAL INPUTS & OUTPUTS
+    // ==========================================
+    isMobileOrTablet = input(false);
+    isMenuLock = input(false);
+    isShowSidebar = input(false);
+    userInfo = input.required();
+    // Chuyển thành void vì các hàm emit hiện tại không truyền data
+    menuClosed = output();
+    menuOpened = output();
+    toggleMenuLock = output();
+    // Config actions
+    singoutLayoutConfig = this.#layoutConfiguration.signout;
+    changePasswordLayoutConfig = this.#layoutConfiguration?.changePassword;
+    // ==========================================
+    // EVENT HANDLERS
+    // ==========================================
+    onMenuOpened = () => {
+        this.menuOpened.emit();
+    };
+    onMenuClosed = () => {
+        this.menuClosed.emit();
+    };
+    keepOpenWhenClickInsideMenu = (event) => {
+        event.stopPropagation();
+    };
+    logout = () => {
+        this.singoutLayoutConfig();
+    };
+    changePassword = () => {
+        // Dùng Optional Chaining gọi hàm cực gọn
+        this.changePasswordLayoutConfig?.();
+    };
+    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" }] });
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", 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"] }]
+        }] });
+
+class SidebarComponent {
+    // ==========================================
+    // INJECT SERVICES (Thay thế Constructor rườm rà)
+    // ==========================================
+    #router = inject(Router);
+    #layoutStorageService = inject(SdLayoutStorageService);
+    #menuFocusPipe = inject(MenuFocusPipe);
+    #destroyRef = inject(DestroyRef); // Dùng để unsubscribe RxJS tự động
+    // ==========================================
+    // SIGNAL INPUTS & OUTPUTS
+    // ==========================================
+    isShowSidebar = input.required();
+    menus = input.required();
+    userInfo = input.required();
+    sidebar = input.required();
+    expandSideBar = output();
+    popupUserMenuClosed = output();
+    popupUserMenuOpened = output();
+    showSideBar = output();
+    // ==========================================
+    // STATE SIGNALS
+    // ==========================================
+    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);
+    pinnedMenuGroup = signal(this.#layoutStorageService.pinnedMenuGroup.get() ?? {
+        id: 'pinned-menu-group',
+        title: 'Đã ghim',
+        children: [],
+    });
+    // ==========================================
+    // 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);
+    // ==========================================
+    // DATA STRUCTURES
+    // ==========================================
+    #pinIconHoverTimerDelay = 300;
+    #isFirstBindingMenu = signal(true);
+    dataSource = new MatTreeNestedDataSource();
+    treeControl = new NestedTreeControl(node => ('children' in node && node.children?.length ? node.children : []));
+    constructor() {
+        this.#setupEffects();
+        this.#setupSubscriptions();
+    }
+    #setupEffects() {
+        effect(() => {
+            const currentMenus = this.menus();
+            untracked(() => {
+                const lastActiveMenuGroupId = this.#layoutStorageService.lastActiveMenuGroupId.get();
+                const pinnedGroup = this.pinnedMenuGroup();
+                const isPinEnabled = this.sidebar()?.pin?.enabled;
+                // Xử lý khi lần đầu vào web (nếu chưa có active group)
+                if (!lastActiveMenuGroupId || (lastActiveMenuGroupId === pinnedGroup?.id && !isPinEnabled)) {
+                    // Ưu tiên pinnedGroup nếu đủ điều kiện, còn không lấy menu đầu tiền dev khai báo
+                    const targetId = isPinEnabled && pinnedGroup?.children?.length ? pinnedGroup?.id : currentMenus?.[0]?.id;
+                    this.#layoutStorageService.lastActiveMenuGroupId.set(targetId ?? '');
+                }
+                this.#bindingMenuGroupByCurrentPath(currentMenus);
+                this.#isFirstBindingMenu.set(false);
+            });
+        });
+    }
+    #setupSubscriptions() {
+        this.#router.events.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(event => {
+            if (event instanceof NavigationEnd) {
+                if (this.currentPath() !== window.location.pathname) {
+                    this.currentPath.set(window.location.pathname);
+                    this.#bindingMenuGroupByCurrentPath(this.menus());
+                }
+            }
+        });
+    }
+    // ==========================================
+    // EVENT HANDLERS
+    // ==========================================
+    hasChild = (_, node) => 'children' in node && !!node.children?.length;
+    onToggleMenuNode = (menu) => {
+        this.treeControl.toggle(menu);
+    };
+    isPinnedNode = (node) => this.pinnedNodeKeys().has(this.#getMenuNodeKey(node));
+    isHoveredNode = (node) => this.#hoveredMenuNodeKey() === this.#getMenuNodeKey(node);
+    expandPinnedGroup = () => {
+        const group = this.pinnedMenuGroup();
+        this.idMenuGroupActive.set(group.id);
+        this.#layoutStorageService.lastActiveMenuGroupId.set(group.id || '');
+        this.titleMenuGroup.set(group.title);
+        this.#setMenusByGroup(group.children ?? []);
+        this.searchText.set('');
+        this.expandSideBar.emit();
+    };
+    onTogglePin = (event, node) => {
+        event.stopPropagation();
+        const key = this.#getMenuNodeKey(node);
+        this.pinnedMenuGroup.update(group => {
+            const children = group.children ?? [];
+            const exists = children.some(m => this.#getMenuNodeKey(m) === key);
+            const updatedChildren = exists ? children.filter(m => this.#getMenuNodeKey(m) !== key) : [...children, node];
+            const updatedGroup = { id: 'pinned-menu-group', title: 'Đã ghim', children: updatedChildren };
+            this.#layoutStorageService.pinnedMenuGroup.set(updatedGroup);
+            return updatedGroup;
+        });
+    };
+    #onExpandAllMenuNodes = (menus) => {
+        menus?.forEach(menu => {
+            this.treeControl.expand(menu);
+            if ('children' in menu && menu.children?.length) {
+                this.#onExpandAllMenuNodes(menu.children);
+            }
+        });
+    };
+    #onCollapseAllMenuNodes = (menus) => {
+        menus?.forEach(menu => {
+            this.treeControl.collapse(menu);
+            if ('children' in menu && menu.children?.length) {
+                this.#onCollapseAllMenuNodes(menu.children);
+            }
+        });
+    };
+    toggleMenuLock(event) {
+        event.stopPropagation();
+        this.isMenuLock.update(v => !v);
+        this.#layoutStorageService.menuLockStatus?.set(this.isMenuLock());
+        this.showSideBar.emit(this.isMenuLock());
+    }
+    openHomePage = () => {
+        if (!this.isMobileOrTablet) {
+            this.#router.navigateByUrl('/layout/home');
+        }
+        else {
+            window.location.href = '/layout/home';
+        }
+        this.searchText.set('');
+        this.#layoutStorageService.lastActiveMenuGroupId.set('');
+    };
+    onUserMenuClosed = () => this.popupUserMenuClosed.emit();
+    onUserMenuOpened = () => this.popupUserMenuOpened.emit();
+    navigate = (args) => {
+        const { path, queryParams } = args;
+        if (path.includes('http')) {
+            window.open(path);
+            return;
+        }
+        this.#router.navigate([path.split('?')[0]], {
+            queryParams,
+            state: { switchTab: true },
+        });
+        if (this.isMobileOrTablet) {
+            this.#closeMenu();
+        }
+    };
+    onFilterSearchText = (event) => {
+        this.searchText.set(event);
+        this.#filterMenuBySearchText(this.menusByGroup());
+    };
+    onClearSearchText = () => {
+        this.searchText.set('');
+        this.#filterMenuBySearchText(this.menusByGroup());
+    };
+    expandMenuGroup = (menuGroupNode) => {
+        this.titleMenuGroup.set(menuGroupNode?.tooltipTitle || menuGroupNode?.title);
+        // Case 1: Menu không có children
+        if (!('children' in menuGroupNode && menuGroupNode.children?.length)) {
+            if ('path' in menuGroupNode) {
+                this.navigate({ path: menuGroupNode.path, queryParams: menuGroupNode?.queryParams ?? {} });
+                return;
+            }
+        }
+        // Case 2: Menu có children
+        if ('children' in menuGroupNode && menuGroupNode.children?.length) {
+            this.#setMenusByGroup(menuGroupNode.children);
+            this.searchText.set('');
+            this.onFilterSearchText('');
+            this.expandSideBar.emit();
+        }
+        this.idMenuGroupActive.set(menuGroupNode?.id);
+        this.#layoutStorageService.lastActiveMenuGroupId.set(menuGroupNode?.id || '');
+        if (!this.currentPath()) {
+            this.currentPath.set(window.location.pathname);
+        }
+    };
+    // ==========================================
+    // CỤM HOVER MENU GROUP & NODE
+    // ==========================================
+    onMouseOverMenuGroupNode = (event, menuNode) => {
+        if (this.idMenuGroupActive() !== menuNode?.id) {
+            const menuGroup = event.currentTarget;
+            const menuGroupIcon = menuGroup.querySelector('.c-menu-group-icon');
+            const brandLightColorOpacity = this.#convertColor(this.sidebar()?.brandLightColor, 0.6);
+            if (menuGroupIcon) {
+                menuGroupIcon.style.transition = 'all 0.15s';
+                menuGroupIcon.style.backgroundColor = brandLightColorOpacity || 'rgba(248, 249, 250, 0.6)';
+                if (!(menuGroupIcon instanceof HTMLImageElement)) {
+                    menuGroupIcon.style.color = this.sidebar()?.brandColor || '#2962FF';
+                }
+            }
+        }
+    };
+    onMouseLeaveMenuGroupNode = (event, menuNode) => {
+        if (this.idMenuGroupActive() !== menuNode?.id) {
+            const menuGroup = event.currentTarget;
+            const menuGroupIcon = menuGroup.querySelector('.c-menu-group-icon');
+            if (menuGroupIcon) {
+                menuGroupIcon.style.transition = 'all 0.15s';
+                menuGroupIcon.style.backgroundColor = 'transparent';
+                if (menuGroupIcon instanceof HTMLImageElement) {
+                    menuGroupIcon.style.opacity = '0.55';
+                }
+                else {
+                    menuGroupIcon.style.color = '#8C8C8C';
+                }
+            }
+        }
+    };
+    onMouseOverMenuNode = (event, menuItem) => {
+        const menuNode = event.currentTarget;
+        const brandColor = this.sidebar()?.brandColor || '#2962FF';
+        // Nếu có bật config pin menu
+        if (this.sidebar()?.pin?.enabled) {
+            const iconPin = menuNode.querySelector('.c-menu-node-description-icon-pin');
+            if (iconPin) {
+                if (this.#pinIconHoverTimerId()) {
+                    clearTimeout(this.#pinIconHoverTimerId());
+                    this.#pinIconHoverTimerId.set(null);
+                }
+                this.#pinIconHoverTimerId.set(setTimeout(() => {
+                    this.#hoveredMenuNodeKey.set(this.#getMenuNodeKey(menuItem));
+                    iconPin.style.color = brandColor;
+                    iconPin.style.transition = 'all 0.15s';
+                    iconPin.style.opacity = '1';
+                    this.#pinIconHoverTimerId.set(null);
+                }, this.#pinIconHoverTimerDelay));
+            }
+        }
+        if (!this.#menuFocusPipe.transform(this.currentPath(), menuItem)) {
+            const iconMenu = menuNode.querySelector('.c-menu-node-icon');
+            const content = menuNode.querySelector('.c-menu-node-description-content');
+            const iconExpand = menuNode.querySelector('.c-menu-node-description-icon-expand');
+            const brandLightColorOpacity = this.#convertColor(this.sidebar()?.brandLightColor, 0.6);
+            if (menuNode) {
+                menuNode.style.transition = 'all 0.15s';
+                menuNode.style.backgroundColor = brandLightColorOpacity || 'rgba(248, 249, 250, 0.6)';
+                if (iconMenu) {
+                    iconMenu.style.transition = 'all 0.15s';
+                    iconMenu.style.color = brandColor;
+                }
+                if (content) {
+                    content.style.transition = 'all 0.15s';
+                    content.style.color = brandColor;
+                }
+                if (iconExpand) {
+                    iconExpand.style.transition = 'all 0.15s';
+                    iconExpand.style.color = brandColor;
+                }
+            }
+        }
+    };
+    onMouseLeaveMenuNode = (event, menuItem) => {
+        const menuNode = event.currentTarget;
+        // Nếu có bật config pin menu
+        if (this.sidebar()?.pin?.enabled) {
+            const iconPin = menuNode.querySelector('.c-menu-node-description-icon-pin');
+            if (iconPin) {
+                if (this.#pinIconHoverTimerId()) {
+                    clearTimeout(this.#pinIconHoverTimerId());
+                    this.#pinIconHoverTimerId.set(null);
+                }
+                this.#hoveredMenuNodeKey.set(null);
+                iconPin.style.transition = 'all 0.15s';
+                if (!this.isPinnedNode(menuItem)) {
+                    iconPin.style.color = '#8C8C8C';
+                    iconPin.style.opacity = '0';
+                }
+            }
+        }
+        if (!this.#menuFocusPipe.transform(this.currentPath(), menuItem)) {
+            const iconMenu = menuNode.querySelector('.c-menu-node-icon');
+            const content = menuNode.querySelector('.c-menu-node-description-content');
+            const iconExpand = menuNode.querySelector('.c-menu-node-description-icon-expand');
+            if (menuNode) {
+                menuNode.style.transition = 'all 0.15s';
+                menuNode.style.backgroundColor = 'transparent';
+                if (iconMenu) {
+                    iconMenu.style.transition = 'all 0.15s';
+                    iconMenu.style.color = '#8C8C8C';
+                }
+                if (content) {
+                    content.style.transition = 'all 0.15s';
+                    content.style.color = '#1F1F1F';
+                }
+                if (iconExpand) {
+                    iconExpand.style.transition = 'all 0.15s';
+                    iconExpand.style.color = '#8C8C8C';
+                }
+            }
+        }
+    };
+    // ==========================================
+    // PRIVATE LOGIC
+    // ==========================================
+    #setMenusByGroup = (menus) => {
+        this.menusByGroup.set(menus);
+        this.dataSource.data = menus;
+    };
+    #getMenuNodeKey = (node) => {
+        if (node?.id) {
+            return node.id;
+        }
+        if ('path' in node && node.path) {
+            return node.path;
+        }
+        return node.title || '';
+    };
+    #getMenuGroupByCurrentPath = (menus, menuGroup) => {
+        for (const menu of menus) {
+            if ('path' in menu && this.#isMenuPathMatchByCurrentPath(menu.path)) {
+                return [menuGroup ?? menu];
+            }
+            if ('children' in menu && menu.children?.length) {
+                const result = this.#getMenuGroupByCurrentPath(menu.children, menuGroup ?? menu);
+                if (result?.length) {
+                    return result;
+                }
+            }
+        }
+        return [];
+    };
+    #bindingMenuGroupByCurrentPath = (menus) => {
+        // Chỉ bindingGroup mới khi người dùng không searchText
+        if (!this.#getValidSearchText()) {
+            const pinnedChildren = this.pinnedMenuGroup()?.children ?? [];
+            // Ưu tiên: Current path khớp với item trong pinMenuGroup thì lần đầu vào trang sẽ hiện pinnedMenuGroup
+            const isPinnedPathMatchValid = this.sidebar()?.pin?.enabled &&
+                pinnedChildren?.length &&
+                this.#getMenuGroupByCurrentPath(pinnedChildren)?.length &&
+                this.#isFirstBindingMenu() &&
+                this.idMenuGroupActive() !== this.pinnedMenuGroup()?.id;
+            if (isPinnedPathMatchValid) {
+                const pinned = this.pinnedMenuGroup();
+                this.idMenuGroupActive.set(pinned.id);
+                this.#layoutStorageService.lastActiveMenuGroupId.set(pinned.id ?? '');
+                this.titleMenuGroup.set(pinned.title);
+                this.#setMenusByGroup(pinnedChildren);
+                this.#expandParentNodesByCurrentPath(pinnedChildren);
+                return;
+            }
+            let menuGroupByPath = this.#getMenuGroupByCurrentPath(menus);
+            // Nếu không tìm được path nào khớp với menu
+            if (!menuGroupByPath?.length) {
+                const lastActiveId = this.#layoutStorageService.lastActiveMenuGroupId.get() || '';
+                // Nếu có pinned group thì hiện mậc định là pinnedMenuGroup
+                if (this.sidebar()?.pin?.enabled && lastActiveId === this.pinnedMenuGroup()?.id && pinnedChildren?.length) {
+                    const pinned = this.pinnedMenuGroup();
+                    this.idMenuGroupActive.set(pinned.id);
+                    this.titleMenuGroup.set(pinned.title);
+                    this.#setMenusByGroup(pinnedChildren);
+                    this.#expandParentNodesByCurrentPath(pinnedChildren);
+                    return;
+                }
+                // Nếu không có pinnedMenuGroup thì menuGroup lấy từ thao tác cuối cùng của người dùng
+                menuGroupByPath = this.menus()?.filter(menu => menu?.id === lastActiveId) || [];
+            }
+            // Kiểm tra lại menuGroupPath đã thực sự tìm được chưa?
+            if (menuGroupByPath?.length) {
+                // Nếu user đang ở pinedGroup và curentPath có chứa trong pinnedMenuGroup thì return luôn, không chuyển sang menuGroup mới
+                if (this.sidebar()?.pin?.enabled &&
+                    this.idMenuGroupActive() === this.pinnedMenuGroup()?.id &&
+                    this.#getMenuGroupByCurrentPath(pinnedChildren)?.length) {
+                    return;
+                }
+                else {
+                    const matchedGroup = menuGroupByPath[0];
+                    this.idMenuGroupActive.set(matchedGroup?.id);
+                    this.#layoutStorageService.lastActiveMenuGroupId.set(matchedGroup?.id || '');
+                    this.titleMenuGroup.set(matchedGroup?.tooltipTitle || matchedGroup?.title);
+                    if ('children' in matchedGroup && matchedGroup.children?.length) {
+                        this.menusByGroup.set(matchedGroup.children);
+                        this.#expandParentNodesByCurrentPath(this.menusByGroup());
+                    }
+                    else {
+                        this.menusByGroup.set([]);
+                    }
+                }
+            }
+            else {
+                this.idMenuGroupActive.set('');
+                this.titleMenuGroup.set('');
+                this.menusByGroup.set([]);
+            }
+            this.dataSource.data = this.menusByGroup();
+        }
+    };
+    #expandParentNodesByCurrentPath(menus) {
+        let shouldPropagate = false;
+        for (const menu of menus) {
+            if ('path' in menu && this.#isMenuPathMatchByCurrentPath(menu.path)) {
+                shouldPropagate = true;
+            }
+            if ('children' in menu && menu.children?.length) {
+                const childHasMatch = this.#expandParentNodesByCurrentPath(menu.children);
+                if (childHasMatch) {
+                    this.treeControl.expand(menu);
+                    shouldPropagate = true;
+                }
+            }
+        }
+        return shouldPropagate;
+    }
+    #filterMenuBySearchText = (menus) => {
+        const validSearchText = this.#getValidSearchText();
+        if (!validSearchText) {
+            this.dataSource.data = menus;
+            this.#onCollapseAllMenuNodes(menus);
+            this.#expandParentNodesByCurrentPath(menus);
+        }
+        else {
+            const aliasSearchText = StringUtilities.changeAliasLowerCase(validSearchText);
+            this.dataSource.data = this.#getMenuByAliasSearchText(menus, aliasSearchText);
+            if (this.dataSource.data?.length) {
+                this.#onExpandAllMenuNodes(this.dataSource.data);
+            }
+        }
+    };
+    #getMenuByAliasSearchText = (menus, aliasSearchText) => {
+        const result = [];
+        for (const menu of menus) {
+            const aliasTitle = StringUtilities.changeAliasLowerCase(menu.title);
+            if (aliasTitle.includes(aliasSearchText)) {
+                result.push(menu);
+                continue;
+            }
+            let matchedChildren = [];
+            if ('children' in menu && menu.children?.length) {
+                matchedChildren = this.#getMenuByAliasSearchText(menu.children, aliasSearchText);
+            }
+            if (matchedChildren?.length) {
+                result.push({ ...menu, children: matchedChildren });
+            }
+        }
+        return result;
+    };
+    #isMenuPathMatchByCurrentPath = (path) => {
+        if (!path) {
+            return false;
+        }
+        if (this.currentPath() === path) {
+            return true;
+        }
+        return this.#normalizePath(this.currentPath()).startsWith(this.#normalizePath(path));
+    };
+    #normalizePath = (p) => (p.endsWith('/') ? p : p + '/');
+    #closeMenu() {
+        this.showSideBar.emit(null);
+    }
+    #convertColor = (input, opacity = 1) => {
+        if (!input) {
+            return '';
+        }
+        input = input.trim();
+        const hexRegex = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+        const rgbRegex = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i;
+        if (hexRegex.test(input)) {
+            let hex = input.slice(1);
+            if (hex.length === 3) {
+                hex = hex
+                    .split('')
+                    .map(c => c + c)
+                    .join('');
+            }
+            const r = parseInt(hex.substring(0, 2), 16);
+            const g = parseInt(hex.substring(2, 4), 16);
+            const b = parseInt(hex.substring(4, 6), 16);
+            return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+        }
+        const rgbMatch = input.match(rgbRegex);
+        if (rgbMatch) {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const [_, r, g, b] = rgbMatch;
+            return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+        }
+        return input;
+    };
+    #getValidSearchText = () => {
+        const normalized = this.#normalizeSearchText(this.searchText());
+        return normalized && normalized.length >= 2 ? normalized : '';
+    };
+    #normalizeSearchText = (searchText) => {
+        let str = searchText?.toString() ?? '';
+        /* eslint-disable no-useless-escape */
+        str = str.replace(/!|@|%|\^|\*|\(|\)|\+|\=|\<|\>|\?|\/|,|\.|\:|\;|\'|\"|\&|\#|\[|\]|~|\$|_|`|-|{|}|\||\\/g, '');
+        str = str.replace(/ + /g, ' ');
+        return str.trim();
+    };
+    #getTotalMenus = (menus) => {
+        return menus.reduce((total, menu) => total + this.#countMenuChildrenNode(menu), 0);
+    };
+    #countMenuChildrenNode = (menu) => {
+        if (!('children' in menu) || !menu.children?.length) {
+            return 0;
+        }
+        let count = menu.children.length;
+        for (const child of menu.children) {
+            count += this.#countMenuChildrenNode(child);
+        }
+        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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sidebar', standalone: true, imports: [
+                        SdInput,
+                        FormsModule,
+                        CommonModule,
+                        RouterModule,
+                        MatIconModule,
+                        MatTreeModule,
+                        SdSafeHtmlPipe,
+                        MatInputModule,
+                        MenuFocusPipe,
+                        MatTooltipModule,
+                        HighlightSearchPipe,
+                        SdSuffixDefDirective,
+                        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: () => [] });
+
+class SidebarV1Component {
+    // ==========================================
+    // INJECT SERVICES
+    // ==========================================
+    #layoutStorageService = inject(SdLayoutStorageService);
+    // ==========================================
+    // VIEW CHILD & INPUTS
+    // ==========================================
+    sidenav = viewChild.required('sidenav');
+    menus = input([]);
+    userInfo = input.required();
+    sidebar = input.required();
+    // ==========================================
+    // STATE SIGNALS
+    // ==========================================
+    isMobileOrTablet = signal(BrowserUtilities.isMobile());
+    // Trạng thái khóa menu (luôn mở rộng hay không)
+    isMenuLock = signal(this.#layoutStorageService.menuLockStatus?.get() ?? true);
+    // 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);
+    // ==========================================
+    // PRIVATE TIMERS
+    // ==========================================
+    #timerMouseInMenu = null;
+    constructor() {
+        // EFFECT: Tự động đồng bộ isShowSidebar vào storage service mỗi khi nó thay đổi
+        effect(() => {
+            const isShow = this.isShowSidebar();
+            untracked(() => {
+                this.#layoutStorageService.isShowSidebar.set(isShow);
+            });
+        });
+    }
+    // ==========================================
+    // EVENT HANDLERS
+    // ==========================================
+    #mouseLeave = () => {
+        if (this.#timerMouseInMenu) {
+            clearTimeout(this.#timerMouseInMenu);
+        }
+        if (this.onhover() && this.isShowSidebar()) {
+            this.isShowSidebar.set(false);
+            this.onhover.set(false);
+        }
+    };
+    #handleMouseLeaveTransition = () => {
+        if (!this.isShowSidebar()) {
+            const delayTime = 400;
+            if (this.#timerMouseInMenu) {
+                clearTimeout(this.#timerMouseInMenu);
+            }
+            setTimeout(() => {
+                this.#mouseLeave();
+            }, delayTime);
+        }
+        else {
+            this.#mouseLeave();
+        }
+    };
+    openSidebar = () => {
+        if (!this.isMobileOrTablet()) {
+            return;
+        }
+        if (!this.isShowSidebar()) {
+            this.isShowSidebar.set(true);
+            this.onhover.set(true);
+        }
+    };
+    onPopupOfSideBarOpened = () => {
+        this.onhover.set(false);
+        this.isShowSidebar.set(true);
+    };
+    onPopupOfSideBarClosed = () => {
+        const delayTime = 500;
+        if (!this.isMenuLock()) {
+            this.onhover.set(true);
+            setTimeout(() => {
+                this.#mouseLeave();
+            }, delayTime);
+        }
+    };
+    onExpandSideBar = () => {
+        if (this.isMobileOrTablet()) {
+            return;
+        }
+        if (!this.isShowSidebar()) {
+            this.isShowSidebar.set(true);
+            this.onhover.set(true);
+        }
+    };
+    onMouseleaveSideBar = () => {
+        if (this.isMobileOrTablet()) {
+            return;
+        }
+        this.#mouseLeave();
+    };
+    onToggle = (data) => {
+        if (data === null) {
+            this.#handleMouseLeaveTransition();
+        }
+        else {
+            this.#mouseLeave();
+            this.isShowSidebar.set(data);
+            this.isMenuLock.set(data);
+            // Toggle component MatSidenav
+            const sidenavComp = this.sidenav();
+            if (sidenavComp) {
+                data ? sidenavComp.open() : sidenavComp.close();
+            }
+        }
+    };
+    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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", 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: () => [] });
+
+class LayoutUserComponent {
+    // ==========================================
+    // INJECT SERVICES
+    // ==========================================
+    #layoutConfiguration = inject(SD_LAYOUT_CONFIGURATION);
+    // ==========================================
+    // SIGNAL INPUTS & OUTPUTS
+    // ==========================================
+    isMobileOrTablet = input(false);
+    isMenuLock = input(false);
+    isShowSidebar = input(false);
+    userInfo = input.required();
+    menuClosed = output();
+    menuOpened = output();
+    toggleMenuLock = output();
+    // Config actions
+    singoutLayoutConfig = this.#layoutConfiguration.signout;
+    changePasswordLayoutConfig = this.#layoutConfiguration?.changePassword;
+    // Accordion state for mobile inline expand
+    isExpanded = signal(false);
+    // ==========================================
+    // EVENT HANDLERS
+    // ==========================================
+    onMenuOpened = () => {
+        this.menuOpened.emit();
+    };
+    onMenuClosed = () => {
+        this.menuClosed.emit();
+    };
+    keepOpenWhenClickInsideMenu = (event) => {
+        event.stopPropagation();
+    };
+    toggleExpanded = () => {
+        this.isExpanded.update(v => !v);
+        if (this.isExpanded()) {
+            this.menuOpened.emit();
+        }
+        else {
+            this.menuClosed.emit();
+        }
+    };
+    logout = () => {
+        this.singoutLayoutConfig();
+    };
+    changePassword = () => {
+        this.changePasswordLayoutConfig?.();
+    };
+    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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", 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"] }]
+        }] });
+
+class SidebarMobileOverlayComponent {
+    #router = inject(Router);
+    #destroyRef = inject(DestroyRef);
+    #layoutStorageService = inject(SdLayoutStorageService);
+    // ==========================================
+    // INPUTS & OUTPUTS
+    // ==========================================
+    isShowSidebar = input(false);
+    menus = input.required();
+    userInfo = input.required();
+    sidebar = input.required();
+    // showSideBar(null) = đóng sidebar (tương thích với onToggle của main component)
+    showSideBar = output();
+    expandSideBar = output();
+    popupUserMenuOpened = output();
+    popupUserMenuClosed = output();
+    titleMenuGroupChanged = output();
+    // ==========================================
+    // STATE SIGNALS
+    // ==========================================
+    titleMenuGroup = signal('');
+    currentPath = signal(window.location.pathname);
+    // Lưu danh sách ID các menu group đang được mở
+    expandedMobileGroups = signal(new Set());
+    constructor() {
+        // Bind title khi menus thay đổi
+        effect(() => {
+            const currentMenus = this.menus();
+            untracked(() => {
+                const lastActiveMenuGroupId = this.#layoutStorageService.lastActiveMenuGroupId.get();
+                if (!lastActiveMenuGroupId) {
+                    this.#layoutStorageService.lastActiveMenuGroupId.set(currentMenus?.[0]?.id ?? '');
+                }
+                this.#bindingMenuGroupByCurrentPath(currentMenus);
+            });
+        });
+        // Bind title khi điều hướng
+        this.#router.events.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(event => {
+            if (event instanceof NavigationEnd) {
+                if (this.currentPath() !== window.location.pathname) {
+                    this.currentPath.set(window.location.pathname);
+                    this.#bindingMenuGroupByCurrentPath(this.menus());
+                }
+            }
+        });
+    }
+    // ==========================================
+    // EVENT HANDLERS
+    // ==========================================
+    toggleMobileGroup(groupId) {
+        if (!groupId)
+            return;
+        this.expandedMobileGroups.update(groups => {
+            const newGroups = new Set(groups);
+            if (newGroups.has(groupId)) {
+                newGroups.delete(groupId);
+            }
+            else {
+                newGroups.add(groupId);
+            }
+            return newGroups;
+        });
+    }
+    isExpanded(groupId) {
+        if (!groupId)
+            return false;
+        return this.expandedMobileGroups().has(groupId);
+    }
+    navigate(args) {
+        const { path, queryParams } = args;
+        if (!path)
+            return;
+        if (path.includes('http')) {
+            window.open(path);
+            return;
+        }
+        this.#router.navigate([path.split('?')[0]], {
+            queryParams: queryParams ?? {},
+            state: { switchTab: true },
+        });
+        // Sau khi điều hướng trên mobile, tự động đóng sidebar
+        this.onClose();
+    }
+    onClose() {
+        this.showSideBar.emit(null);
+    }
+    // Kiểm tra menu có children (là SdLayoutChildrenMenu)
+    hasChildren(menu) {
+        return 'children' in menu && !!menu.children?.length;
+    }
+    // Lấy danh sách children an toàn (type-safe)
+    getChildren(menu) {
+        return 'children' in menu ? (menu.children ?? []) : [];
+    }
+    // Lấy path an toàn từ leaf menu (SdLayoutRootMenu)
+    getPath(menu) {
+        return 'path' in menu ? menu.path : undefined;
+    }
+    // Lấy queryParams an toàn từ leaf menu
+    getQueryParams(menu) {
+        return ('queryParams' in menu ? menu.queryParams : undefined) ?? {};
+    }
+    onUserMenuOpened = () => this.popupUserMenuOpened.emit();
+    onUserMenuClosed = () => this.popupUserMenuClosed.emit();
+    // ==========================================
+    // PRIVATE LOGIC
+    // ==========================================
+    #bindingMenuGroupByCurrentPath = (menus) => {
+        let menuGroupByPath = this.#getMenuGroupByCurrentPath(menus);
+        if (!menuGroupByPath?.length) {
+            const lastActiveId = this.#layoutStorageService.lastActiveMenuGroupId.get() || '';
+            menuGroupByPath = menus?.filter(menu => menu?.id === lastActiveId) || [];
+        }
+        if (menuGroupByPath?.length) {
+            const matchedGroup = menuGroupByPath[0];
+            this.#layoutStorageService.lastActiveMenuGroupId.set(matchedGroup?.id || '');
+            const title = matchedGroup?.tooltipTitle || matchedGroup?.title;
+            this.titleMenuGroup.set(title);
+            this.titleMenuGroupChanged.emit(title);
+        }
+        else {
+            this.titleMenuGroup.set('');
+            this.titleMenuGroupChanged.emit('');
+        }
+    };
+    #getMenuGroupByCurrentPath = (menus, menuGroup) => {
+        for (const menu of menus) {
+            if ('path' in menu && this.#isMenuPathMatchByCurrentPath(menu.path)) {
+                return [menuGroup ?? menu];
+            }
+            if ('children' in menu && menu.children?.length) {
+                const result = this.#getMenuGroupByCurrentPath(menu.children, menuGroup ?? menu);
+                if (result?.length)
+                    return result;
+            }
+        }
+        return [];
+    };
+    #isMenuPathMatchByCurrentPath = (path) => {
+        if (!path)
+            return false;
+        if (this.currentPath() === path)
+            return true;
+        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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SidebarMobileOverlayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-sidebar-mobile-overlay', standalone: true, imports: [
+                        CommonModule,
+                        RouterModule,
+                        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: () => [] });
+
+class SidebarMobileV1Component {
+    #layoutStorageService = inject(SdLayoutStorageService);
+    menus = input([]);
+    userInfo = input.required();
+    sidebar = input.required();
+    // Sidebar luôn bắt đầu đóng trên mobile
+    isShowSidebar = signal(false);
+    titleMenuGroup = signal('');
+    constructor() {
+        effect(() => {
+            const isShow = this.isShowSidebar();
+            untracked(() => {
+                this.#layoutStorageService.isShowSidebar.set(isShow);
+            });
+        });
+    }
+    openSidebar = () => {
+        this.isShowSidebar.set(true);
+    };
+    onToggle = (_data) => {
+        this.isShowSidebar.set(false);
+    };
+    onPopupOfSideBarOpened = () => { };
+    onPopupOfSideBarClosed = () => { };
+    onExpandSideBar = () => { };
+    onMouseleaveSideBar = () => { };
+    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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", 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: () => [] });
+
+class SdLayoutComponent {
+    // ==========================================
+    // INJECT SERVICES
+    // ==========================================
+    #menuPipe = inject(MenuPipe);
+    #layoutService = inject(SdLayoutService);
+    // ==========================================
+    // SIGNAL INPUTS
+    // ==========================================
+    menusInput = input([], { alias: 'menus' });
+    menus = computed(() => this.#menuPipe.transform(this.menusInput() || []));
+    // ==========================================
+    // 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", 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" }]
+        }] });
+
+// End
+let HomePageComponent = class HomePageComponent {
+    // ==========================================
+    // INJECT SERVICES (Modern Angular)
+    // ==========================================
+    #layoutService = inject(SdLayoutService);
+    #i18n = inject(I18nService);
+    // Map Language code → BCP 47 locale tag dùng cho Intl date formatting
+    // WHY: must be declared before todayInfo — field init runs top-to-bottom; #getTodayInfo reads #localeMap.
+    #localeMap = {
+        vi: 'vi-VN',
+        en: 'en-US',
+        ja: 'ja-JP',
+        ko: 'ko-KR',
+        zh: 'zh-CN',
+    };
+    // ==========================================
+    // 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()));
+    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.
+    features = [
+        { icon: 'storage', key: 'core.module.layout.home.feature.data', area: 'data' },
+        { icon: 'insights', key: 'core.module.layout.home.feature.reports', area: 'report' },
+        { icon: 'group', key: 'core.module.layout.home.feature.users', area: 'users' },
+        { icon: 'schema', key: 'core.module.layout.home.feature.workflow', area: 'flow' },
+        { icon: 'verified_user', key: 'core.module.layout.home.feature.audit', area: 'audit' },
+        { icon: 'hub', key: 'core.module.layout.home.feature.integration', area: 'integ' },
+    ];
+    // ==========================================
+    // PRIVATE METHODS
+    // ==========================================
+    #getTimezone() {
+        const now = new Date();
+        const timezoneOffset = now.getTimezoneOffset();
+        const offsetHours = -timezoneOffset / 60;
+        const sign = offsetHours >= 0 ? '+' : '';
+        const simpleGmtString = `GMT${sign}${offsetHours}`;
+        return simpleGmtString;
+    }
+    #getTodayInfo(date) {
+        // WHY: weekday names i18n hóa qua key core.module.layout.weekday.<0..6>
+        const weekday = this.#i18n.t(`core.module.layout.weekday.${date.getDay()}`);
+        // WHY: dùng locale theo ngôn ngữ hiện tại để định dạng số (dd/mm/yyyy vs mm/dd/yyyy ...)
+        const locale = this.#localeMap[this.#i18n.language()] ?? 'vi-VN';
+        const dateStr = date.toLocaleDateString(locale, {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric',
+        });
+        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"] }] });
+};
+HomePageComponent = __decorate([
+    SdTabComponent({
+        component: HomePageComponent,
+        // WHY: decorator chạy trước Angular DI, nên không inject được I18nService.
+        // Đọc ngôn ngữ hiện tại trực tiếp từ localStorage + I18N_MESSAGES để có giá trị đã dịch.
+        name: () => {
+            const lang = (() => {
+                try {
+                    const stored = localStorage.getItem(I18N_STORAGE_KEY);
+                    if (stored)
+                        return stored;
+                }
+                catch { /* ignore */ }
+                return 'vi';
+            })();
+            return I18N_MESSAGES[lang]?.['core.module.layout.home.tab-name'] ?? I18N_MESSAGES.vi['core.module.layout.home.tab-name'];
+        },
+        icon: 'home',
+        color: 'primary',
+    })
+], HomePageComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", 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"] }]
+        }] });
+
+class HomeRedirectGuard {
+    router;
+    layoutConfiguration;
+    constructor(router, layoutConfiguration) {
+        this.router = router;
+        this.layoutConfiguration = layoutConfiguration;
+    }
+    async canActivate() {
+        const homeUrl = this.layoutConfiguration?.homeUrl;
+        if (homeUrl) {
+            // Nếu có config homeUrl, tạo một UrlTree để redirect
+            // Đây là cách redirect chính thống từ trong guard
+            return this.router.createUrlTree([homeUrl]);
+        }
+        // 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' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HomeRedirectGuard, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1$6.Router }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SD_LAYOUT_CONFIGURATION]
+                }] }] });
+
+const routes = [
+    {
+        path: '',
+        canActivate: [HomeRedirectGuard],
+        component: HomePageComponent,
+    },
+];
+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] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HomeRoutingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [RouterModule.forChild(routes)],
+                    exports: [RouterModule],
+                }]
+        }] });
+
+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] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HomeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [CommonModule, HomeRoutingModule],
+                }]
+        }] });
+
+var index$2 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    HomeModule: HomeModule
+});
+
+// End
+let RootComponent$1 = class RootComponent {
+    // ==========================================
+    // INJECT SERVICES (Modern Angular)
+    // ==========================================
+    #route = inject(ActivatedRoute);
+    #layoutService = inject(SdLayoutService);
+    #i18n = inject(I18nService);
+    // ==========================================
+    // 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()));
+    userInfo = this.#layoutService.userInfo;
+    // ==========================================
+    // PRIVATE METHODS
+    // ==========================================
+    #getTodayInfo(date) {
+        // WHY: weekday names i18n hóa qua key core.module.layout.weekday.<0..6>
+        const weekday = this.#i18n.t(`core.module.layout.weekday.${date.getDay()}`);
+        const dateStr = date.toLocaleDateString('vi-VN', {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric',
+        });
+        return this.#i18n.t('core.module.layout.today-info.format', { weekday, date: dateStr });
+    }
+    // ==========================================
+    // PUBLIC METHODS
+    // ==========================================
+    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" }] });
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", 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"] }]
+        }] });
+
+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)] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: NotFoundModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, RouterModule.forChild(Routes$2)],
+                    exports: [],
+                }]
+        }] });
+
+var index$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    NotFoundModule: NotFoundModule
+});
+
+// End
+class RootComponent {
+    // ==========================================
+    // INJECT SERVICES (Modern Angular)
+    // ==========================================
+    #route = inject(ActivatedRoute);
+    #layoutService = inject(SdLayoutService);
+    #i18n = inject(I18nService);
+    // ==========================================
+    // 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()));
+    userInfo = this.#layoutService.userInfo;
+    // ==========================================
+    // PRIVATE METHODS
+    // ==========================================
+    #getTodayInfo(date) {
+        // WHY: weekday names i18n hóa qua key core.module.layout.weekday.<0..6>
+        const weekday = this.#i18n.t(`core.module.layout.weekday.${date.getDay()}`);
+        const dateStr = date.toLocaleDateString('vi-VN', {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric',
+        });
+        return this.#i18n.t('core.module.layout.today-info.format', { weekday, date: dateStr });
+    }
+    // ==========================================
+    // PUBLIC METHODS
+    // ==========================================
+    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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", 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"] }]
+        }] });
+
+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)] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ForbiddenModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, RouterModule.forChild(Routes$1)],
+                    exports: [],
+                }]
+        }] });
+
+var index = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ForbiddenModule: ForbiddenModule
+});
+
+const Routes = [
+    {
+        path: '',
+        pathMatch: 'full',
+        redirectTo: 'not-found',
+    },
+    {
+        path: 'home',
+        loadChildren: () => Promise.resolve().then(function () { return index$2; }).then(m => m.HomeModule),
+    },
+    {
+        path: 'not-found',
+        loadChildren: () => Promise.resolve().then(function () { return index$1; }).then(m => m.NotFoundModule),
+    },
+    {
+        path: 'forbidden',
+        loadChildren: () => Promise.resolve().then(function () { return index; }).then(m => m.ForbiddenModule),
+    },
+];
+
+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)] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdLayoutModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [RouterModule.forChild(Routes)],
+                    providers: [],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ForbiddenModule, HomeModule, NotFoundModule, SD_LAYOUT_CONFIGURATION, SdLayoutComponent, SdLayoutModule, SdLayoutService, SdLayoutStorageService, SdPageComponent, SidebarMobileOverlayComponent, SidebarMobileV1Component };
+//# sourceMappingURL=sdcorejs-angular-modules-layout.mjs.map