@sd-angular/core 19.0.12 → 19.0.13

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

@@ -892,7 +892,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          @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", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i3.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i3.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "component", type: i3.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i3.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "pipe", type: SdSafeHtmlPipe, name: "sdSafeHtml" }, { kind: "ngmodule", type: MatInputModule }, { kind: "pipe", type: MenuFocusPipe, name: "menuFocus" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: HighlightSearchPipe, name: "highLightSearch" }, { kind: "directive", type: SdSuffixDefDirective, selector: "[sdSuffixDef]" }, { kind: "component", type: LayoutUserComponent$1, selector: "lib-layout-user", inputs: ["isMobileOrTablet", "isMenuLock", "isShowSidebar", "userInfo"], outputs: ["menuClosed", "menuOpened", "toggleMenuLock"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵ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\" [class.d-none]=\"!isShowSidebar()\">\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\" [class.d-none]=\"!isShowSidebar()\" [attr.inert]=\"!isShowSidebar() ? '' : null\">\r\n          @if (totalMenuInMenusByGroup() >= 10) {\r\n            <div style=\"padding: 0px 4px\" class=\"c-menu-tree-search\">\r\n              <sd-input\r\n                size=\"sm\"\r\n                [placeholder]=\"'core.module.layout.sidebar.search' | translate\"\r\n                [model]=\"searchText()\"\r\n                (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;flex:0 0 60px;width:60px;min-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,
@@ -911,7 +911,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          @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"] }]
+                    ], 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\" [class.d-none]=\"!isShowSidebar()\">\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\" [class.d-none]=\"!isShowSidebar()\" [attr.inert]=\"!isShowSidebar() ? '' : null\">\r\n          @if (totalMenuInMenusByGroup() >= 10) {\r\n            <div style=\"padding: 0px 4px\" class=\"c-menu-tree-search\">\r\n              <sd-input\r\n                size=\"sm\"\r\n                [placeholder]=\"'core.module.layout.sidebar.search' | translate\"\r\n                [model]=\"searchText()\"\r\n                (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;flex:0 0 60px;width:60px;min-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 {
@@ -1011,6 +1011,11 @@ class SidebarV1Component {
         }
         this.#mouseLeave();
     };
+    onSidenavOpenedChange = (opened) => {
+        if (this.isMobileOrTablet()) {
+            this.isShowSidebar.set(opened);
+        }
+    };
     onToggle = (data) => {
         if (data === null) {
             this.#handleMouseLeaveTransition();
@@ -1020,18 +1025,25 @@ class SidebarV1Component {
             this.isShowSidebar.set(data);
             this.isMenuLock.set(data);
             // Toggle component MatSidenav
-            const sidenavComp = this.sidenav();
-            if (sidenavComp) {
-                data ? sidenavComp.open() : sidenavComp.close();
+            if (this.isMobileOrTablet()) {
+                const sidenavComp = this.sidenav();
+                if (sidenavComp) {
+                    if (data) {
+                        sidenavComp.open();
+                    }
+                    else {
+                        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\">\r\n  <mat-sidenav\r\n    #sidenav\r\n    [opened]=\"isShowSidebar()\"\r\n    (openedChange)=\"isShowSidebar.set($event)\"\r\n    class=\"c-layout-sidebar\"\r\n    (click)=\"openSidebar()\"\r\n    (mouseleave)=\"onMouseleaveSideBar()\"\r\n    [mode]=\"isMobileOrTablet() ? 'over' : 'side'\"\r\n    [fixedInViewport]=\"isMobileOrTablet()\">\r\n    <sidebar\r\n      [menus]=\"menus()\"\r\n      [userInfo]=\"userInfo()\"\r\n      [sidebar]=\"sidebar()\"\r\n      [isShowSidebar]=\"isShowSidebar()\"\r\n      (showSideBar)=\"onToggle($event)\"\r\n      (expandSideBar)=\"onExpandSideBar()\"\r\n      (popupUserMenuOpened)=\"onPopupOfSideBarOpened()\"\r\n      (popupUserMenuClosed)=\"onPopupOfSideBarClosed()\">\r\n    </sidebar>\r\n  </mat-sidenav>\r\n\r\n  <mat-sidenav-content class=\"c-layout-content\" [class.isShowSidebar]=\"isMenuLock()\">\r\n    <mat-drawer-container class=\"c-mat-drawer-container\">\r\n      <mat-drawer-content>\r\n        <ng-content></ng-content>\r\n      </mat-drawer-content>\r\n    </mat-drawer-container>\r\n  </mat-sidenav-content>\r\n</mat-sidenav-container>", styles: [":host ::ng-deep .c-layout-wrapper{width:100%}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar{margin-top:0;width:60px;height:100vh!important;transform:none!important;overflow:hidden!important;visibility:visible!important;transition:width .15s!important;box-shadow:0 0 6px #0003!important}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar .mat-drawer-inner-container{position:relative;overflow:visible;display:block!important}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar.mat-drawer-opened{width:290px;transition:width .15s}:host ::ng-deep .c-layout-wrapper .c-layout-content{background-color:#fff;box-sizing:border-box;height:100vh!important;margin-left:60px!important}:host ::ng-deep .c-layout-wrapper .c-layout-content.isShowSidebar{margin-left:290px!important}:host ::ng-deep .c-layout-wrapper .c-layout-content .c-mat-drawer-container{height:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$5.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i1$5.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i1$5.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1$5.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1$5.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: SidebarComponent, selector: "sidebar", inputs: ["isShowSidebar", "menus", "userInfo", "sidebar"], outputs: ["expandSideBar", "popupUserMenuClosed", "popupUserMenuOpened", "showSideBar"] }] });
+    static ɵ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\">\r\n  <mat-sidenav\r\n    #sidenav\r\n    [opened]=\"!isMobileOrTablet() || isShowSidebar()\"\r\n    (openedChange)=\"onSidenavOpenedChange($event)\"\r\n    class=\"c-layout-sidebar\"\r\n    [class.is-expanded]=\"isShowSidebar()\"\r\n    (click)=\"openSidebar()\"\r\n    (mouseleave)=\"onMouseleaveSideBar()\"\r\n    [mode]=\"isMobileOrTablet() ? 'over' : 'side'\"\r\n    [fixedInViewport]=\"isMobileOrTablet()\">\r\n    <sidebar\r\n      [menus]=\"menus()\"\r\n      [userInfo]=\"userInfo()\"\r\n      [sidebar]=\"sidebar()\"\r\n      [isShowSidebar]=\"isShowSidebar()\"\r\n      (showSideBar)=\"onToggle($event)\"\r\n      (expandSideBar)=\"onExpandSideBar()\"\r\n      (popupUserMenuOpened)=\"onPopupOfSideBarOpened()\"\r\n      (popupUserMenuClosed)=\"onPopupOfSideBarClosed()\">\r\n    </sidebar>\r\n  </mat-sidenav>\r\n\r\n  <mat-sidenav-content class=\"c-layout-content\" [class.isShowSidebar]=\"isMenuLock()\">\r\n    <mat-drawer-container class=\"c-mat-drawer-container\">\r\n      <mat-drawer-content>\r\n        <ng-content></ng-content>\r\n      </mat-drawer-content>\r\n    </mat-drawer-container>\r\n  </mat-sidenav-content>\r\n</mat-sidenav-container>\r\n", 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;overflow:clip!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.is-expanded{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\">\r\n  <mat-sidenav\r\n    #sidenav\r\n    [opened]=\"isShowSidebar()\"\r\n    (openedChange)=\"isShowSidebar.set($event)\"\r\n    class=\"c-layout-sidebar\"\r\n    (click)=\"openSidebar()\"\r\n    (mouseleave)=\"onMouseleaveSideBar()\"\r\n    [mode]=\"isMobileOrTablet() ? 'over' : 'side'\"\r\n    [fixedInViewport]=\"isMobileOrTablet()\">\r\n    <sidebar\r\n      [menus]=\"menus()\"\r\n      [userInfo]=\"userInfo()\"\r\n      [sidebar]=\"sidebar()\"\r\n      [isShowSidebar]=\"isShowSidebar()\"\r\n      (showSideBar)=\"onToggle($event)\"\r\n      (expandSideBar)=\"onExpandSideBar()\"\r\n      (popupUserMenuOpened)=\"onPopupOfSideBarOpened()\"\r\n      (popupUserMenuClosed)=\"onPopupOfSideBarClosed()\">\r\n    </sidebar>\r\n  </mat-sidenav>\r\n\r\n  <mat-sidenav-content class=\"c-layout-content\" [class.isShowSidebar]=\"isMenuLock()\">\r\n    <mat-drawer-container class=\"c-mat-drawer-container\">\r\n      <mat-drawer-content>\r\n        <ng-content></ng-content>\r\n      </mat-drawer-content>\r\n    </mat-drawer-container>\r\n  </mat-sidenav-content>\r\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"] }]
+            args: [{ selector: 'sidebar-v1', imports: [MatSidenavModule, CommonModule, SidebarComponent], standalone: true, template: "<mat-sidenav-container class=\"c-layout-wrapper\">\r\n  <mat-sidenav\r\n    #sidenav\r\n    [opened]=\"!isMobileOrTablet() || isShowSidebar()\"\r\n    (openedChange)=\"onSidenavOpenedChange($event)\"\r\n    class=\"c-layout-sidebar\"\r\n    [class.is-expanded]=\"isShowSidebar()\"\r\n    (click)=\"openSidebar()\"\r\n    (mouseleave)=\"onMouseleaveSideBar()\"\r\n    [mode]=\"isMobileOrTablet() ? 'over' : 'side'\"\r\n    [fixedInViewport]=\"isMobileOrTablet()\">\r\n    <sidebar\r\n      [menus]=\"menus()\"\r\n      [userInfo]=\"userInfo()\"\r\n      [sidebar]=\"sidebar()\"\r\n      [isShowSidebar]=\"isShowSidebar()\"\r\n      (showSideBar)=\"onToggle($event)\"\r\n      (expandSideBar)=\"onExpandSideBar()\"\r\n      (popupUserMenuOpened)=\"onPopupOfSideBarOpened()\"\r\n      (popupUserMenuClosed)=\"onPopupOfSideBarClosed()\">\r\n    </sidebar>\r\n  </mat-sidenav>\r\n\r\n  <mat-sidenav-content class=\"c-layout-content\" [class.isShowSidebar]=\"isMenuLock()\">\r\n    <mat-drawer-container class=\"c-mat-drawer-container\">\r\n      <mat-drawer-content>\r\n        <ng-content></ng-content>\r\n      </mat-drawer-content>\r\n    </mat-drawer-container>\r\n  </mat-sidenav-content>\r\n</mat-sidenav-container>\r\n", 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;overflow:clip!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.is-expanded{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 {