@sd-angular/core 19.0.0-beta.96 → 19.0.0-beta.97

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

@@ -57,6 +57,7 @@ class SdLayoutStorageService {
     isShowSidebar;
     menuLockStatus;
     lastActiveMenuGroupId;
+    pinnedMenuGroup;
     // End
     constructor(sdStorageService) {
         this.sdStorageService = sdStorageService;
@@ -64,6 +65,7 @@ class SdLayoutStorageService {
         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 });
@@ -405,29 +407,49 @@ class SidebarComponent {
     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() {
-        // 1. EFFECT: Lắng nghe menus đầu vào thay đổi
+        this.#setupEffects();
+        this.#setupSubscriptions();
+    }
+    #setupEffects() {
         effect(() => {
             const currentMenus = this.menus();
             untracked(() => {
                 const lastActiveMenuGroupId = this.#layoutStorageService.lastActiveMenuGroupId.get();
-                // Lần đầu vào web, nếu user chưa thao tác gì sẽ mặc định hiện menuGroup đầu tiên
-                if (!lastActiveMenuGroupId) {
-                    this.#layoutStorageService.lastActiveMenuGroupId.set(currentMenus?.[0]?.id ?? '');
+                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);
             });
         });
-        // 2. Lắng nghe Router Event (Sử dụng takeUntilDestroyed thay thế ngOnDestroy)
+    }
+    #setupSubscriptions() {
         this.#router.events.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(event => {
             if (event instanceof NavigationEnd) {
                 if (this.currentPath() !== window.location.pathname) {
@@ -444,6 +466,29 @@ class SidebarComponent {
     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);
@@ -511,8 +556,7 @@ class SidebarComponent {
         }
         // Case 2: Menu có children
         if ('children' in menuGroupNode && menuGroupNode.children?.length) {
-            this.menusByGroup.set(menuGroupNode.children);
-            this.dataSource.data = this.menusByGroup();
+            this.#setMenusByGroup(menuGroupNode.children);
             this.searchText.set('');
             this.onFilterSearchText('');
             this.expandSideBar.emit();
@@ -557,8 +601,26 @@ class SidebarComponent {
         }
     };
     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 menuNode = event.currentTarget;
             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');
@@ -566,7 +628,6 @@ class SidebarComponent {
             if (menuNode) {
                 menuNode.style.transition = 'all 0.15s';
                 menuNode.style.backgroundColor = brandLightColorOpacity || 'rgba(248, 249, 250, 0.6)';
-                const brandColor = this.sidebar()?.brandColor || '#2962FF';
                 if (iconMenu) {
                     iconMenu.style.transition = 'all 0.15s';
                     iconMenu.style.color = brandColor;
@@ -583,8 +644,24 @@ class SidebarComponent {
         }
     };
     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 menuNode = event.currentTarget;
             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');
@@ -609,6 +686,19 @@ class SidebarComponent {
     // ==========================================
     // 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)) {
@@ -616,31 +706,68 @@ class SidebarComponent {
             }
             if ('children' in menu && menu.children?.length) {
                 const result = this.#getMenuGroupByCurrentPath(menu.children, menuGroup ?? menu);
-                if (result?.length)
+                if (result?.length) {
                     return result;
+                }
             }
         }
         return [];
     };
     #bindingMenuGroupByCurrentPath = (menus) => {
-        const normalizeSearchText = this.#normalizeSearchText(this.searchText());
-        if (!normalizeSearchText || normalizeSearchText.length < 3) {
+        // 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) {
-                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());
+                // 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 {
-                    this.menusByGroup.set([]);
+                    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 {
@@ -668,14 +795,14 @@ class SidebarComponent {
         return shouldPropagate;
     }
     #filterMenuBySearchText = (menus) => {
-        const normalizeSearchText = this.#normalizeSearchText(this.searchText());
-        if (!normalizeSearchText || normalizeSearchText.length < 2) {
+        const validSearchText = this.#getValidSearchText();
+        if (!validSearchText) {
             this.dataSource.data = menus;
             this.#onCollapseAllMenuNodes(menus);
             this.#expandParentNodesByCurrentPath(menus);
         }
         else {
-            const aliasSearchText = SdUtilities.changeAliasLowerCase(normalizeSearchText);
+            const aliasSearchText = SdUtilities.changeAliasLowerCase(validSearchText);
             this.dataSource.data = this.#getMenuByAliasSearchText(menus, aliasSearchText);
             if (this.dataSource.data?.length) {
                 this.#onExpandAllMenuNodes(this.dataSource.data);
@@ -701,10 +828,12 @@ class SidebarComponent {
         return result;
     };
     #isMenuPathMatchByCurrentPath = (path) => {
-        if (!path)
+        if (!path) {
             return false;
-        if (this.currentPath() === path)
+        }
+        if (this.currentPath() === path) {
             return true;
+        }
         return this.#normalizePath(this.currentPath()).startsWith(this.#normalizePath(path));
     };
     #normalizePath = (p) => (p.endsWith('/') ? p : p + '/');
@@ -712,8 +841,9 @@ class SidebarComponent {
         this.showSideBar.emit(null);
     }
     #convertColor = (input, opacity = 1) => {
-        if (!input)
+        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;
@@ -738,6 +868,10 @@ class SidebarComponent {
         }
         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 */
@@ -759,7 +893,7 @@ class SidebarComponent {
         return count;
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SidebarComponent, isStandalone: true, selector: "sidebar", inputs: { isShowSidebar: { classPropertyName: "isShowSidebar", publicName: "isShowSidebar", isSignal: true, isRequired: true, transformFunction: null }, menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: true, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { expandSideBar: "expandSideBar", popupUserMenuClosed: "popupUserMenuClosed", popupUserMenuOpened: "popupUserMenuOpened", showSideBar: "showSideBar" }, ngImport: i0, template: "@let _userInfo = userInfo();\r\n@let _sidebar = sidebar();\r\n\r\n@if (_userInfo && _sidebar) {\r\n  <div class=\"wrapper\" [style.height]=\"isMobileOrTablet ? screenHeight + 'px' : '100%'\">\r\n    <div class=\"c-header\">\r\n      @if (_sidebar.logoUrl) {\r\n        <div class=\"c-logo\">\r\n          <a href=\"javascript:;\" (click)=\"openHomePage()\">\r\n            <img alt=\"logo\" [src]=\"_sidebar.logoUrl\" />\r\n          </a>\r\n        </div>\r\n      }\r\n      <div class=\"c-title-menu-group\">\r\n        <span>{{ titleMenuGroup() || _sidebar.defaultTitle || 'Back Office' }}</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"c-body\">\r\n      <div class=\"c-menu\">\r\n        <div class=\"c-menu-group\">\r\n          @for (nodeMenuGroup of menus(); track nodeMenuGroup.id) {\r\n            <button\r\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, nodeMenuGroup)\"\r\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, nodeMenuGroup)\"\r\n              (click)=\"expandMenuGroup(nodeMenuGroup)\"\r\n              [matTooltip]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\r\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\r\n              [matTooltipPosition]=\"'right'\"\r\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\r\n              @if (nodeMenuGroup.iconUrl) {\r\n                <span\r\n                  class=\"c-menu-group-icon\"\r\n                  [ngStyle]=\"{\r\n                    backgroundColor: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                  }\">\r\n                  <img width=\"24px\" height=\"24px\" [src]=\"nodeMenuGroup.iconUrl\" [alt]=\"nodeMenuGroup.title\" />\r\n                </span>\r\n              } @else {\r\n                <mat-icon\r\n                  class=\"c-menu-group-icon\"\r\n                  [ngStyle]=\"{\r\n                    color: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandColor || '#2962FF' : '#8C8C8C',\r\n                    backgroundColor: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                  }\">\r\n                  {{ nodeMenuGroup.icon || 'widgets' }}\r\n                </mat-icon>\r\n              }\r\n            </button>\r\n          }\r\n        </div>\r\n        <div class=\"c-menu-tree\">\r\n          @if (totalMenuInMenusByGroup() >= 10) {\r\n            <div style=\"padding: 0px 4px\" class=\"c-menu-tree-search\">\r\n              <sd-input size=\"sm\" [placeholder]=\"'core.module.layout.sidebar.search' | translate\" [model]=\"searchText()\" (sdChange)=\"onFilterSearchText($event)\">\r\n                <ng-template sdSuffixDef>\r\n                  @if (searchText()) {\r\n                    <mat-icon class=\"c-search-prefix-icon cancel\" (click)=\"onClearSearchText()\">cancel</mat-icon>\r\n                  } @else {\r\n                    <mat-icon class=\"c-search-prefix-icon search\">search</mat-icon>\r\n                  }\r\n                </ng-template>\r\n              </sd-input>\r\n            </div>\r\n          }\r\n          <div class=\"c-menu-tree-container\">\r\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\r\n              <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\r\n                <li\r\n                  class=\"c-menu-node\"\r\n                  (mouseenter)=\"onMouseOverMenuNode($event, node)\"\r\n                  (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\r\n                  [ngStyle]=\"{\r\n                    backgroundColor: (currentPath() | menuFocus: node) ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                  }\">\r\n                  <div aria-hidden=\"true\" class=\"c-menu-node-description\" (click)=\"navigate(node)\" [class.d-none]=\"!isShowSidebar()\">\r\n                    <div\r\n                      class=\"c-menu-node-description-content\"\r\n                      [ngStyle]=\"{\r\n                        color: (currentPath() | menuFocus: node) ? _sidebar.brandColor || '#2962FF' : '#1F1F1F',\r\n                      }\"\r\n                      [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\r\n                  </div>\r\n                </li>\r\n              </mat-nested-tree-node>\r\n\r\n              <mat-nested-tree-node\r\n                *matTreeNodeDef=\"let node; when: hasChild\"\r\n                aria-hidden=\"true\"\r\n                [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath() | menuFocus: node }\">\r\n                <li>\r\n                  <div\r\n                    class=\"c-menu-node\"\r\n                    (mouseenter)=\"onMouseOverMenuNode($event, node)\"\r\n                    (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\r\n                    <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\r\n                      <div [class.d-none]=\"!isShowSidebar()\" class=\"c-menu-node-description\" (click)=\"onToggleMenuNode(node)\">\r\n                        <div\r\n                          class=\"c-menu-node-description-content\"\r\n                          [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\r\n                        <mat-icon class=\"c-menu-node-description-icon-expand\">\r\n                          {{ treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\r\n                        </mat-icon>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <ul class=\"p-0\" [class.d-none]=\"!treeControl.isExpanded(node)\">\r\n                    <ng-container matTreeNodeOutlet></ng-container>\r\n                  </ul>\r\n                </li>\r\n              </mat-nested-tree-node>\r\n            </mat-tree>\r\n          </div>\r\n        </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"c-footer\">\r\n      <lib-layout-user\r\n        [userInfo]=\"_userInfo\"\r\n        [isMobileOrTablet]=\"isMobileOrTablet\"\r\n        (menuOpened)=\"onUserMenuOpened()\"\r\n        (menuClosed)=\"onUserMenuClosed()\"\r\n        [isShowSidebar]=\"isShowSidebar()\"\r\n        (toggleMenuLock)=\"toggleMenuLock($event)\">\r\n      </lib-layout-user>\r\n    </div>\r\n\r\n    <div class=\"c-vertical\"></div>\r\n  </div>\r\n}", 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{text-align:left;background-color:transparent;border:none;font-size:20px}.wrapper .c-footer{height:80px}.wrapper .c-vertical{position:fixed;height:100vh;left:58px;width:2px;background-color:#f8f9fa;pointer-events:none}\n"], dependencies: [{ kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i3.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i3.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "component", type: i3.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i3.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "pipe", type: SdSafeHtmlPipe, name: "sdSafeHtml" }, { kind: "ngmodule", type: MatInputModule }, { kind: "pipe", type: MenuFocusPipe, name: "menuFocus" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: HighlightSearchPipe, name: "highLightSearch" }, { kind: "directive", type: SdSuffixDefDirective, selector: "[sdSuffixDef]" }, { kind: "component", type: LayoutUserComponent$1, selector: "lib-layout-user", inputs: ["isMobileOrTablet", "isMenuLock", "isShowSidebar", "userInfo"], outputs: ["menuClosed", "menuOpened", "toggleMenuLock"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵ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();\r\n@let _sidebar = sidebar();\r\n\r\n@if (_userInfo && _sidebar) {\r\n  <div class=\"wrapper\" [style.height]=\"isMobileOrTablet ? screenHeight + 'px' : '100%'\">\r\n    <div class=\"c-header\">\r\n      @if (_sidebar.logoUrl) {\r\n        <div class=\"c-logo\">\r\n          <a href=\"javascript:;\" (click)=\"openHomePage()\">\r\n            <img alt=\"logo\" [src]=\"_sidebar.logoUrl\" />\r\n          </a>\r\n        </div>\r\n      }\r\n      <div class=\"c-title-menu-group\">\r\n        <span>{{ titleMenuGroup() || _sidebar.defaultTitle || 'Back Office' }}</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"c-body\">\r\n      <div class=\"c-menu\">\r\n        <div class=\"c-menu-group\">\r\n          @if (_sidebar?.pin?.enabled && pinnedMenuGroup()?.children?.length) {\r\n            <button\r\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, pinnedMenuGroup())\"\r\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, pinnedMenuGroup())\"\r\n              (click)=\"expandPinnedGroup()\"\r\n              [matTooltip]=\"'\u0110\u00E3 ghim'\"\r\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\r\n              [matTooltipPosition]=\"'right'\"\r\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\r\n              <mat-icon\r\n                class=\"c-menu-group-icon\"\r\n                [ngStyle]=\"{\r\n                  color: isPinnedMenuGroupActive() ? _sidebar.brandColor || '#2962FF' : '#8C8C8C',\r\n                  backgroundColor: isPinnedMenuGroupActive() ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                }\">\r\n                push_pin\r\n              </mat-icon>\r\n            </button>\r\n          }\r\n          @for (nodeMenuGroup of menus(); track nodeMenuGroup.id) {\r\n            <button\r\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, nodeMenuGroup)\"\r\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, nodeMenuGroup)\"\r\n              (click)=\"expandMenuGroup(nodeMenuGroup)\"\r\n              [matTooltip]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\r\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\r\n              [matTooltipPosition]=\"'right'\"\r\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\r\n              @if (nodeMenuGroup.iconUrl) {\r\n                <span\r\n                  class=\"c-menu-group-icon\"\r\n                  [ngStyle]=\"{\r\n                    backgroundColor: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                  }\">\r\n                  <img width=\"24px\" height=\"24px\" [src]=\"nodeMenuGroup.iconUrl\" [alt]=\"nodeMenuGroup.title\" />\r\n                </span>\r\n              } @else {\r\n                <mat-icon\r\n                  class=\"c-menu-group-icon\"\r\n                  [ngStyle]=\"{\r\n                    color: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandColor || '#2962FF' : '#8C8C8C',\r\n                    backgroundColor: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                  }\">\r\n                  {{ nodeMenuGroup.icon || 'widgets' }}\r\n                </mat-icon>\r\n              }\r\n            </button>\r\n          }\r\n        </div>\r\n        <div class=\"c-menu-tree\">\r\n          @if (totalMenuInMenusByGroup() >= 10) {\r\n            <div style=\"padding: 0px 4px\" class=\"c-menu-tree-search\">\r\n              <sd-input size=\"sm\" [placeholder]=\"'core.module.layout.sidebar.search' | translate\" [model]=\"searchText()\" (sdChange)=\"onFilterSearchText($event)\">\r\n                <ng-template sdSuffixDef>\r\n                  @if (searchText()) {\r\n                    <mat-icon class=\"c-search-prefix-icon cancel\" (click)=\"onClearSearchText()\">cancel</mat-icon>\r\n                  } @else {\r\n                    <mat-icon class=\"c-search-prefix-icon search\">search</mat-icon>\r\n                  }\r\n                </ng-template>\r\n              </sd-input>\r\n            </div>\r\n          }\r\n          <div class=\"c-menu-tree-container\">\r\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\r\n              <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\r\n                <li\r\n                  class=\"c-menu-node\"\r\n                  (mouseenter)=\"onMouseOverMenuNode($event, node)\"\r\n                  (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\r\n                  [ngStyle]=\"{\r\n                    backgroundColor: (currentPath() | menuFocus: node) ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                  }\">\r\n                  <div aria-hidden=\"true\" class=\"c-menu-node-description\" (click)=\"navigate(node)\" [class.d-none]=\"!isShowSidebar()\">\r\n                    <div\r\n                      class=\"c-menu-node-description-content\"\r\n                      [ngStyle]=\"{\r\n                        color: (currentPath() | menuFocus: node) ? _sidebar.brandColor || '#2962FF' : '#1F1F1F',\r\n                      }\"\r\n                      [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\r\n\r\n                    @if (_sidebar?.pin?.enabled) {\r\n                      <mat-icon\r\n                        class=\"c-menu-node-description-icon-pin\"\r\n                        [fontSet]=\"isPinnedNode(node) ? 'material-icons' : 'material-icons-outlined'\"\r\n                        [style.opacity]=\"isPinnedNode(node) || isHoveredNode(node) ? '1' : null\"\r\n                        [style.color]=\"isPinnedNode(node) || isHoveredNode(node) ? sidebar()?.brandColor || '#2962FF' : null\"\r\n                        (click)=\"onTogglePin($event, node)\"\r\n                        >push_pin\r\n                      </mat-icon>\r\n                    }\r\n                  </div>\r\n                </li>\r\n              </mat-nested-tree-node>\r\n\r\n              <mat-nested-tree-node\r\n                *matTreeNodeDef=\"let node; when: hasChild\"\r\n                aria-hidden=\"true\"\r\n                [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath() | menuFocus: node }\">\r\n                <li>\r\n                  <div\r\n                    class=\"c-menu-node\"\r\n                    (mouseenter)=\"onMouseOverMenuNode($event, node)\"\r\n                    (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\r\n                    <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\r\n                      <div [class.d-none]=\"!isShowSidebar()\" class=\"c-menu-node-description\" (click)=\"onToggleMenuNode(node)\">\r\n                        <div\r\n                          class=\"c-menu-node-description-content\"\r\n                          [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\r\n                        <mat-icon class=\"c-menu-node-description-icon-expand\">\r\n                          {{ treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\r\n                        </mat-icon>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <ul class=\"p-0\" [class.d-none]=\"!treeControl.isExpanded(node)\">\r\n                    <ng-container matTreeNodeOutlet></ng-container>\r\n                  </ul>\r\n                </li>\r\n              </mat-nested-tree-node>\r\n            </mat-tree>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"c-footer\">\r\n      <lib-layout-user\r\n        [userInfo]=\"_userInfo\"\r\n        [isMobileOrTablet]=\"isMobileOrTablet\"\r\n        (menuOpened)=\"onUserMenuOpened()\"\r\n        (menuClosed)=\"onUserMenuClosed()\"\r\n        [isShowSidebar]=\"isShowSidebar()\"\r\n        (toggleMenuLock)=\"toggleMenuLock($event)\">\r\n      </lib-layout-user>\r\n    </div>\r\n\r\n    <div class=\"c-vertical\"></div>\r\n  </div>\r\n}\r\n", styles: ["::ng-deep .mat-mdc-tooltip-panel:has(.c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140){pointer-events:none}:host ::ng-deep .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:16px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:32px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:48px!important}ul,li{margin-top:0;margin-bottom:0;list-style-type:none}.wrapper{display:flex;flex-direction:column;width:290px;background-color:#fff}.wrapper .c-header{display:flex;align-items:center;height:52px;padding:3px;gap:16px}.wrapper .c-header .c-logo{display:flex;justify-content:center;align-items:center;width:52px;height:52px}.wrapper .c-header .c-logo img{width:32px;height:32px;object-fit:cover}.wrapper .c-header .c-title-menu-group{display:flex;align-items:center;font-size:18px;font-weight:500;flex:1}.wrapper .c-body{flex:1;overflow-y:hidden}.wrapper .c-body .c-menu{height:100%;display:flex}.wrapper .c-body .c-menu .c-menu-group{display:flex;flex-direction:column;align-items:center;width:60px;overflow-y:scroll;scrollbar-width:none}.wrapper .c-body .c-menu .c-menu-group .c-menu-group-icon{display:flex;justify-content:center;align-items:center;min-height:50px;width:52px;border-radius:8px;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", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "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,
@@ -778,7 +912,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         SdSuffixDefDirective,
                         LayoutUserComponent$1,
                         TranslatePipe,
-                    ], template: "@let _userInfo = userInfo();\r\n@let _sidebar = sidebar();\r\n\r\n@if (_userInfo && _sidebar) {\r\n  <div class=\"wrapper\" [style.height]=\"isMobileOrTablet ? screenHeight + 'px' : '100%'\">\r\n    <div class=\"c-header\">\r\n      @if (_sidebar.logoUrl) {\r\n        <div class=\"c-logo\">\r\n          <a href=\"javascript:;\" (click)=\"openHomePage()\">\r\n            <img alt=\"logo\" [src]=\"_sidebar.logoUrl\" />\r\n          </a>\r\n        </div>\r\n      }\r\n      <div class=\"c-title-menu-group\">\r\n        <span>{{ titleMenuGroup() || _sidebar.defaultTitle || 'Back Office' }}</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"c-body\">\r\n      <div class=\"c-menu\">\r\n        <div class=\"c-menu-group\">\r\n          @for (nodeMenuGroup of menus(); track nodeMenuGroup.id) {\r\n            <button\r\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, nodeMenuGroup)\"\r\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, nodeMenuGroup)\"\r\n              (click)=\"expandMenuGroup(nodeMenuGroup)\"\r\n              [matTooltip]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\r\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\r\n              [matTooltipPosition]=\"'right'\"\r\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\r\n              @if (nodeMenuGroup.iconUrl) {\r\n                <span\r\n                  class=\"c-menu-group-icon\"\r\n                  [ngStyle]=\"{\r\n                    backgroundColor: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                  }\">\r\n                  <img width=\"24px\" height=\"24px\" [src]=\"nodeMenuGroup.iconUrl\" [alt]=\"nodeMenuGroup.title\" />\r\n                </span>\r\n              } @else {\r\n                <mat-icon\r\n                  class=\"c-menu-group-icon\"\r\n                  [ngStyle]=\"{\r\n                    color: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandColor || '#2962FF' : '#8C8C8C',\r\n                    backgroundColor: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                  }\">\r\n                  {{ nodeMenuGroup.icon || 'widgets' }}\r\n                </mat-icon>\r\n              }\r\n            </button>\r\n          }\r\n        </div>\r\n        <div class=\"c-menu-tree\">\r\n          @if (totalMenuInMenusByGroup() >= 10) {\r\n            <div style=\"padding: 0px 4px\" class=\"c-menu-tree-search\">\r\n              <sd-input size=\"sm\" [placeholder]=\"'core.module.layout.sidebar.search' | translate\" [model]=\"searchText()\" (sdChange)=\"onFilterSearchText($event)\">\r\n                <ng-template sdSuffixDef>\r\n                  @if (searchText()) {\r\n                    <mat-icon class=\"c-search-prefix-icon cancel\" (click)=\"onClearSearchText()\">cancel</mat-icon>\r\n                  } @else {\r\n                    <mat-icon class=\"c-search-prefix-icon search\">search</mat-icon>\r\n                  }\r\n                </ng-template>\r\n              </sd-input>\r\n            </div>\r\n          }\r\n          <div class=\"c-menu-tree-container\">\r\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\r\n              <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\r\n                <li\r\n                  class=\"c-menu-node\"\r\n                  (mouseenter)=\"onMouseOverMenuNode($event, node)\"\r\n                  (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\r\n                  [ngStyle]=\"{\r\n                    backgroundColor: (currentPath() | menuFocus: node) ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                  }\">\r\n                  <div aria-hidden=\"true\" class=\"c-menu-node-description\" (click)=\"navigate(node)\" [class.d-none]=\"!isShowSidebar()\">\r\n                    <div\r\n                      class=\"c-menu-node-description-content\"\r\n                      [ngStyle]=\"{\r\n                        color: (currentPath() | menuFocus: node) ? _sidebar.brandColor || '#2962FF' : '#1F1F1F',\r\n                      }\"\r\n                      [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\r\n                  </div>\r\n                </li>\r\n              </mat-nested-tree-node>\r\n\r\n              <mat-nested-tree-node\r\n                *matTreeNodeDef=\"let node; when: hasChild\"\r\n                aria-hidden=\"true\"\r\n                [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath() | menuFocus: node }\">\r\n                <li>\r\n                  <div\r\n                    class=\"c-menu-node\"\r\n                    (mouseenter)=\"onMouseOverMenuNode($event, node)\"\r\n                    (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\r\n                    <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\r\n                      <div [class.d-none]=\"!isShowSidebar()\" class=\"c-menu-node-description\" (click)=\"onToggleMenuNode(node)\">\r\n                        <div\r\n                          class=\"c-menu-node-description-content\"\r\n                          [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\r\n                        <mat-icon class=\"c-menu-node-description-icon-expand\">\r\n                          {{ treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\r\n                        </mat-icon>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <ul class=\"p-0\" [class.d-none]=\"!treeControl.isExpanded(node)\">\r\n                    <ng-container matTreeNodeOutlet></ng-container>\r\n                  </ul>\r\n                </li>\r\n              </mat-nested-tree-node>\r\n            </mat-tree>\r\n          </div>\r\n        </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"c-footer\">\r\n      <lib-layout-user\r\n        [userInfo]=\"_userInfo\"\r\n        [isMobileOrTablet]=\"isMobileOrTablet\"\r\n        (menuOpened)=\"onUserMenuOpened()\"\r\n        (menuClosed)=\"onUserMenuClosed()\"\r\n        [isShowSidebar]=\"isShowSidebar()\"\r\n        (toggleMenuLock)=\"toggleMenuLock($event)\">\r\n      </lib-layout-user>\r\n    </div>\r\n\r\n    <div class=\"c-vertical\"></div>\r\n  </div>\r\n}", 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{text-align:left;background-color:transparent;border:none;font-size:20px}.wrapper .c-footer{height:80px}.wrapper .c-vertical{position:fixed;height:100vh;left:58px;width:2px;background-color:#f8f9fa;pointer-events:none}\n"] }]
+                    ], template: "@let _userInfo = userInfo();\r\n@let _sidebar = sidebar();\r\n\r\n@if (_userInfo && _sidebar) {\r\n  <div class=\"wrapper\" [style.height]=\"isMobileOrTablet ? screenHeight + 'px' : '100%'\">\r\n    <div class=\"c-header\">\r\n      @if (_sidebar.logoUrl) {\r\n        <div class=\"c-logo\">\r\n          <a href=\"javascript:;\" (click)=\"openHomePage()\">\r\n            <img alt=\"logo\" [src]=\"_sidebar.logoUrl\" />\r\n          </a>\r\n        </div>\r\n      }\r\n      <div class=\"c-title-menu-group\">\r\n        <span>{{ titleMenuGroup() || _sidebar.defaultTitle || 'Back Office' }}</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"c-body\">\r\n      <div class=\"c-menu\">\r\n        <div class=\"c-menu-group\">\r\n          @if (_sidebar?.pin?.enabled && pinnedMenuGroup()?.children?.length) {\r\n            <button\r\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, pinnedMenuGroup())\"\r\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, pinnedMenuGroup())\"\r\n              (click)=\"expandPinnedGroup()\"\r\n              [matTooltip]=\"'\u0110\u00E3 ghim'\"\r\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\r\n              [matTooltipPosition]=\"'right'\"\r\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\r\n              <mat-icon\r\n                class=\"c-menu-group-icon\"\r\n                [ngStyle]=\"{\r\n                  color: isPinnedMenuGroupActive() ? _sidebar.brandColor || '#2962FF' : '#8C8C8C',\r\n                  backgroundColor: isPinnedMenuGroupActive() ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                }\">\r\n                push_pin\r\n              </mat-icon>\r\n            </button>\r\n          }\r\n          @for (nodeMenuGroup of menus(); track nodeMenuGroup.id) {\r\n            <button\r\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, nodeMenuGroup)\"\r\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, nodeMenuGroup)\"\r\n              (click)=\"expandMenuGroup(nodeMenuGroup)\"\r\n              [matTooltip]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\r\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\r\n              [matTooltipPosition]=\"'right'\"\r\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\r\n              @if (nodeMenuGroup.iconUrl) {\r\n                <span\r\n                  class=\"c-menu-group-icon\"\r\n                  [ngStyle]=\"{\r\n                    backgroundColor: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                  }\">\r\n                  <img width=\"24px\" height=\"24px\" [src]=\"nodeMenuGroup.iconUrl\" [alt]=\"nodeMenuGroup.title\" />\r\n                </span>\r\n              } @else {\r\n                <mat-icon\r\n                  class=\"c-menu-group-icon\"\r\n                  [ngStyle]=\"{\r\n                    color: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandColor || '#2962FF' : '#8C8C8C',\r\n                    backgroundColor: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                  }\">\r\n                  {{ nodeMenuGroup.icon || 'widgets' }}\r\n                </mat-icon>\r\n              }\r\n            </button>\r\n          }\r\n        </div>\r\n        <div class=\"c-menu-tree\">\r\n          @if (totalMenuInMenusByGroup() >= 10) {\r\n            <div style=\"padding: 0px 4px\" class=\"c-menu-tree-search\">\r\n              <sd-input size=\"sm\" [placeholder]=\"'core.module.layout.sidebar.search' | translate\" [model]=\"searchText()\" (sdChange)=\"onFilterSearchText($event)\">\r\n                <ng-template sdSuffixDef>\r\n                  @if (searchText()) {\r\n                    <mat-icon class=\"c-search-prefix-icon cancel\" (click)=\"onClearSearchText()\">cancel</mat-icon>\r\n                  } @else {\r\n                    <mat-icon class=\"c-search-prefix-icon search\">search</mat-icon>\r\n                  }\r\n                </ng-template>\r\n              </sd-input>\r\n            </div>\r\n          }\r\n          <div class=\"c-menu-tree-container\">\r\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\r\n              <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\r\n                <li\r\n                  class=\"c-menu-node\"\r\n                  (mouseenter)=\"onMouseOverMenuNode($event, node)\"\r\n                  (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\r\n                  [ngStyle]=\"{\r\n                    backgroundColor: (currentPath() | menuFocus: node) ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                  }\">\r\n                  <div aria-hidden=\"true\" class=\"c-menu-node-description\" (click)=\"navigate(node)\" [class.d-none]=\"!isShowSidebar()\">\r\n                    <div\r\n                      class=\"c-menu-node-description-content\"\r\n                      [ngStyle]=\"{\r\n                        color: (currentPath() | menuFocus: node) ? _sidebar.brandColor || '#2962FF' : '#1F1F1F',\r\n                      }\"\r\n                      [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\r\n\r\n                    @if (_sidebar?.pin?.enabled) {\r\n                      <mat-icon\r\n                        class=\"c-menu-node-description-icon-pin\"\r\n                        [fontSet]=\"isPinnedNode(node) ? 'material-icons' : 'material-icons-outlined'\"\r\n                        [style.opacity]=\"isPinnedNode(node) || isHoveredNode(node) ? '1' : null\"\r\n                        [style.color]=\"isPinnedNode(node) || isHoveredNode(node) ? sidebar()?.brandColor || '#2962FF' : null\"\r\n                        (click)=\"onTogglePin($event, node)\"\r\n                        >push_pin\r\n                      </mat-icon>\r\n                    }\r\n                  </div>\r\n                </li>\r\n              </mat-nested-tree-node>\r\n\r\n              <mat-nested-tree-node\r\n                *matTreeNodeDef=\"let node; when: hasChild\"\r\n                aria-hidden=\"true\"\r\n                [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath() | menuFocus: node }\">\r\n                <li>\r\n                  <div\r\n                    class=\"c-menu-node\"\r\n                    (mouseenter)=\"onMouseOverMenuNode($event, node)\"\r\n                    (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\r\n                    <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\r\n                      <div [class.d-none]=\"!isShowSidebar()\" class=\"c-menu-node-description\" (click)=\"onToggleMenuNode(node)\">\r\n                        <div\r\n                          class=\"c-menu-node-description-content\"\r\n                          [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\r\n                        <mat-icon class=\"c-menu-node-description-icon-expand\">\r\n                          {{ treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\r\n                        </mat-icon>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <ul class=\"p-0\" [class.d-none]=\"!treeControl.isExpanded(node)\">\r\n                    <ng-container matTreeNodeOutlet></ng-container>\r\n                  </ul>\r\n                </li>\r\n              </mat-nested-tree-node>\r\n            </mat-tree>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"c-footer\">\r\n      <lib-layout-user\r\n        [userInfo]=\"_userInfo\"\r\n        [isMobileOrTablet]=\"isMobileOrTablet\"\r\n        (menuOpened)=\"onUserMenuOpened()\"\r\n        (menuClosed)=\"onUserMenuClosed()\"\r\n        [isShowSidebar]=\"isShowSidebar()\"\r\n        (toggleMenuLock)=\"toggleMenuLock($event)\">\r\n      </lib-layout-user>\r\n    </div>\r\n\r\n    <div class=\"c-vertical\"></div>\r\n  </div>\r\n}\r\n", styles: ["::ng-deep .mat-mdc-tooltip-panel:has(.c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140){pointer-events:none}:host ::ng-deep .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:16px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:32px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:48px!important}ul,li{margin-top:0;margin-bottom:0;list-style-type:none}.wrapper{display:flex;flex-direction:column;width:290px;background-color:#fff}.wrapper .c-header{display:flex;align-items:center;height:52px;padding:3px;gap:16px}.wrapper .c-header .c-logo{display:flex;justify-content:center;align-items:center;width:52px;height:52px}.wrapper .c-header .c-logo img{width:32px;height:32px;object-fit:cover}.wrapper .c-header .c-title-menu-group{display:flex;align-items:center;font-size:18px;font-weight:500;flex:1}.wrapper .c-body{flex:1;overflow-y:hidden}.wrapper .c-body .c-menu{height:100%;display:flex}.wrapper .c-body .c-menu .c-menu-group{display:flex;flex-direction:column;align-items:center;width:60px;overflow-y:scroll;scrollbar-width:none}.wrapper .c-body .c-menu .c-menu-group .c-menu-group-icon{display:flex;justify-content:center;align-items:center;min-height:50px;width:52px;border-radius:8px;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 {
@@ -1187,6 +1321,15 @@ let HomePageComponent = class HomePageComponent {
     // ==========================================
     #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)
     // ==========================================
@@ -1206,14 +1349,6 @@ let HomePageComponent = class HomePageComponent {
     // ==========================================
     // PRIVATE METHODS
     // ==========================================
-    // Map Language code → BCP 47 locale tag dùng cho Intl date formatting
-    #localeMap = {
-        vi: 'vi-VN',
-        en: 'en-US',
-        ja: 'ja-JP',
-        ko: 'ko-KR',
-        zh: 'zh-CN',
-    };
     #getTimezone() {
         const now = new Date();
         const timezoneOffset = now.getTimezoneOffset();