npm - @sd-angular/core - Versions diffs - 19.0.36 → 19.0.38 - Mend

@sd-angular/core 19.0.36 → 19.0.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

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

@@ -1032,7 +1032,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();\n@let _sidebar = sidebar();\n\n@if (_userInfo && _sidebar) {\n  <div class=\"wrapper\" [style.height]=\"isMobileOrTablet ? screenHeight + 'px' : '100%'\">\n    <div class=\"c-header\">\n      @if (_sidebar.logoUrl) {\n        <div class=\"c-logo\">\n          <a href=\"javascript:;\" (click)=\"openHomePage()\">\n            <img alt=\"logo\" [src]=\"_sidebar.logoUrl\" />\n          </a>\n        </div>\n      }\n      <div class=\"c-title-menu-group\" [class.d-none]=\"!isShowSidebar()\">\n        <span>{{ titleMenuGroup() || _sidebar.defaultTitle || 'Back Office' }}</span>\n      </div>\n    </div>\n    <div class=\"c-body\">\n      <div class=\"c-menu\">\n        <div class=\"c-menu-group\">\n          @if (_sidebar?.pin?.enabled && pinnedMenuGroup().children?.length) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, pinnedMenuGroup())\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, pinnedMenuGroup())\"\n              (click)=\"expandPinnedGroup()\"\n              [matTooltip]=\"'\u0110\u00E3 ghim'\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              <mat-icon\n                class=\"c-menu-group-icon\"\n                [ngStyle]=\"{\n                  color: isPinnedMenuGroupActive() ? _sidebar.brandColor || '#2962FF' : '#8C8C8C',\n                  backgroundColor: isPinnedMenuGroupActive() ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\n                }\">\n                push_pin\n              </mat-icon>\n            </button>\n          }\n          @for (nodeMenuGroup of menus(); track nodeMenuGroup.id) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, nodeMenuGroup)\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, nodeMenuGroup)\"\n              (click)=\"expandMenuGroup(nodeMenuGroup)\"\n              [matTooltip]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              @if (nodeMenuGroup.iconUrl) {\n                <span\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    backgroundColor: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\n                  }\">\n                  <img width=\"24px\" height=\"24px\" [src]=\"nodeMenuGroup.iconUrl\" [alt]=\"nodeMenuGroup.title\" />\n                </span>\n              } @else {\n                <mat-icon\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    color: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandColor || '#2962FF' : '#8C8C8C',\n                    backgroundColor: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\n                  }\">\n                  {{ nodeMenuGroup.icon || 'widgets' }}\n                </mat-icon>\n              }\n            </button>\n          }\n        </div>\n        <div class=\"c-menu-tree\" [class.d-none]=\"!isShowSidebar()\" [attr.inert]=\"!isShowSidebar() ? '' : null\">\n          @if (totalMenuInMenusByGroup() >= 10) {\n            <div style=\"padding: 0px 4px\" class=\"c-menu-tree-search\">\n              <sd-input [clearable]=\"true\"\n                size=\"sm\"\n                [placeholder]=\"'core.module.layout.sidebar.search' | translate\"\n                [model]=\"searchText()\"\n                (sdChange)=\"onFilterSearchText($event)\">\n                <ng-template sdSuffixDef>\n                  @if (searchText()) {\n                    <mat-icon class=\"c-search-prefix-icon cancel\" (click)=\"onClearSearchText()\">cancel</mat-icon>\n                  } @else {\n                    <mat-icon class=\"c-search-prefix-icon search\">search</mat-icon>\n                  }\n                </ng-template>\n              </sd-input>\n            </div>\n          }\n          <div class=\"c-menu-tree-container\">\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\n              <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\n                <li\n                  class=\"c-menu-node\"\n                  (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                  (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\n                  [ngStyle]=\"{\n                    backgroundColor: (currentPath() | menuFocus: node : activeMenuPath()) ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\n                  }\">\n                  <div aria-hidden=\"true\" class=\"c-menu-node-description\" (click)=\"navigate(node)\" [class.d-none]=\"!isShowSidebar()\">\n                    <div\n                      class=\"c-menu-node-description-content\"\n                      [ngStyle]=\"{\n                        color: (currentPath() | menuFocus: node : activeMenuPath()) ? _sidebar.brandColor || '#2962FF' : '#1F1F1F',\n                      }\"\n                      [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\n\n                    @if (_sidebar?.pin?.enabled) {\n                      <mat-icon\n                        class=\"c-menu-node-description-icon-pin\"\n                        [fontSet]=\"isPinnedNode(node) ? 'material-icons' : 'material-icons-outlined'\"\n                        [style.opacity]=\"isPinnedNode(node) || isHoveredNode(node) ? '1' : null\"\n                        [style.color]=\"isPinnedNode(node) || isHoveredNode(node) ? sidebar().brandColor || '#2962FF' : null\"\n                        (click)=\"onTogglePin($event, node)\"\n                        >push_pin\n                      </mat-icon>\n                    }\n                  </div>\n                </li>\n              </mat-nested-tree-node>\n\n              <mat-nested-tree-node\n                *matTreeNodeDef=\"let node; when: hasChild\"\n                aria-hidden=\"true\"\n                [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath() | menuFocus: node : activeMenuPath() }\">\n                <li>\n                  <div\n                    class=\"c-menu-node\"\n                    (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                    (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\n                    <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\n                      <div [class.d-none]=\"!isShowSidebar()\" class=\"c-menu-node-description\" (click)=\"onToggleMenuNode(node)\">\n                        <div\n                          class=\"c-menu-node-description-content\"\n                          [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\n                        <mat-icon class=\"c-menu-node-description-icon-expand\">\n                          {{ treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\n                        </mat-icon>\n                      </div>\n                    </div>\n                  </div>\n                  <ul class=\"p-0\" [class.d-none]=\"!treeControl.isExpanded(node)\">\n                    <ng-container matTreeNodeOutlet></ng-container>\n                  </ul>\n                </li>\n              </mat-nested-tree-node>\n            </mat-tree>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"c-footer\">\n      <lib-layout-user\n        [userInfo]=\"_userInfo\"\n        [isMobileOrTablet]=\"isMobileOrTablet\"\n        (menuOpened)=\"onUserMenuOpened()\"\n        (menuClosed)=\"onUserMenuClosed()\"\n        [isShowSidebar]=\"isShowSidebar()\"\n        (toggleMenuLock)=\"toggleMenuLock($event)\">\n      </lib-layout-user>\n    </div>\n\n    <div class=\"c-vertical\"></div>\n  </div>\n}\n", styles: ["::ng-deep .mat-mdc-tooltip-panel:has(.c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140){pointer-events:none}:host ::ng-deep .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:16px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:32px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:48px!important}ul,li{margin-top:0;margin-bottom:0;list-style-type:none}.wrapper{position:relative;display:flex;flex-direction:column;width:290px;background-color:#fff}.wrapper .c-header{flex-shrink:0;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;min-height:0;overflow-y:hidden}.wrapper .c-body .c-menu{height:100%;display:flex}.wrapper .c-body .c-menu .c-menu-group{margin-bottom:80px;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;min-height:0;display:flex;flex-direction:column;padding:3px 4px 3px 3px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search{flex-shrink:0}.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;min-height:0;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{position:absolute;bottom:0;left:0;width:60px;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", "clearable", "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$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i3$1.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i3$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "component", type: i3$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i3$1.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();\n@let _sidebar = sidebar();\n\n@if (_userInfo && _sidebar) {\n  <div class=\"wrapper\" [style.height]=\"isMobileOrTablet ? screenHeight + 'px' : '100%'\">\n    <div class=\"c-header\">\n      @if (_sidebar.logoUrl) {\n        <div class=\"c-logo\">\n          <a href=\"javascript:;\" (click)=\"openHomePage()\">\n            <img alt=\"logo\" [src]=\"_sidebar.logoUrl\" />\n          </a>\n        </div>\n      }\n      <div class=\"c-title-menu-group\" [class.d-none]=\"!isShowSidebar()\">\n        <span>{{ titleMenuGroup() || _sidebar.defaultTitle || 'Back Office' }}</span>\n      </div>\n    </div>\n    <div class=\"c-body\">\n      <div class=\"c-menu\">\n        <div class=\"c-menu-group\">\n          @if (_sidebar?.pin?.enabled && pinnedMenuGroup().children?.length) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, pinnedMenuGroup())\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, pinnedMenuGroup())\"\n              (click)=\"expandPinnedGroup()\"\n              [matTooltip]=\"'\u0110\u00E3 ghim'\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              <mat-icon\n                class=\"c-menu-group-icon\"\n                [ngStyle]=\"{\n                  color: isPinnedMenuGroupActive() ? _sidebar.brandColor || '#2962FF' : '#8C8C8C',\n                  backgroundColor: isPinnedMenuGroupActive() ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\n                }\">\n                push_pin\n              </mat-icon>\n            </button>\n          }\n          @for (nodeMenuGroup of menus(); track nodeMenuGroup.id) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, nodeMenuGroup)\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, nodeMenuGroup)\"\n              (click)=\"expandMenuGroup(nodeMenuGroup)\"\n              [matTooltip]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              @if (nodeMenuGroup.iconUrl) {\n                <span\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    backgroundColor: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\n                  }\">\n                  <img width=\"24px\" height=\"24px\" [src]=\"nodeMenuGroup.iconUrl\" [alt]=\"nodeMenuGroup.title\" />\n                </span>\n              } @else {\n                <mat-icon\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    color: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandColor || '#2962FF' : '#8C8C8C',\n                    backgroundColor: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\n                  }\">\n                  {{ nodeMenuGroup.icon || 'widgets' }}\n                </mat-icon>\n              }\n            </button>\n          }\n        </div>\n        <div class=\"c-menu-tree\" [class.d-none]=\"!isShowSidebar()\" [attr.inert]=\"!isShowSidebar() ? '' : null\">\n          @if (totalMenuInMenusByGroup() >= 10) {\n            <div style=\"padding: 0px 4px\" class=\"c-menu-tree-search\">\n              <sd-input\n                [clearable]=\"true\"\n                size=\"sm\"\n                [placeholder]=\"'core.module.layout.sidebar.search' | translate\"\n                [model]=\"searchText()\"\n                (sdChange)=\"onFilterSearchText($event)\">\n                <ng-template sdSuffixDef>\n                  @if (searchText()) {\n                    <mat-icon class=\"c-search-prefix-icon cancel\" (click)=\"onClearSearchText()\">cancel</mat-icon>\n                  } @else {\n                    <mat-icon class=\"c-search-prefix-icon search\">search</mat-icon>\n                  }\n                </ng-template>\n              </sd-input>\n            </div>\n          }\n          <div class=\"c-menu-tree-container\">\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\n              <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\n                <li\n                  class=\"c-menu-node\"\n                  (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                  (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\n                  [ngStyle]=\"{\n                    backgroundColor:\n                      (currentPath() | menuFocus: node : activeMenuPath()) ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\n                  }\">\n                  <div\n                    class=\"c-menu-node-description\"\n                    role=\"button\"\n                    tabindex=\"0\"\n                    (keydown.enter)=\"navigate(node)\"\n                    (keydown.space)=\"$event.preventDefault(); navigate(node)\"\n                    (click)=\"navigate(node)\"\n                    [class.d-none]=\"!isShowSidebar()\">\n                    <div\n                      class=\"c-menu-node-description-content\"\n                      [ngStyle]=\"{\n                        color: (currentPath() | menuFocus: node : activeMenuPath()) ? _sidebar.brandColor || '#2962FF' : '#1F1F1F',\n                      }\"\n                      [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\n\n                    @if (_sidebar?.pin?.enabled) {\n                      <mat-icon\n                        class=\"c-menu-node-description-icon-pin\"\n                        [fontSet]=\"isPinnedNode(node) ? 'material-icons' : 'material-icons-outlined'\"\n                        [style.opacity]=\"isPinnedNode(node) || isHoveredNode(node) ? '1' : null\"\n                        [style.color]=\"isPinnedNode(node) || isHoveredNode(node) ? sidebar().brandColor || '#2962FF' : null\"\n                        (click)=\"onTogglePin($event, node)\"\n                        >push_pin\n                      </mat-icon>\n                    }\n                  </div>\n                </li>\n              </mat-nested-tree-node>\n\n              <mat-nested-tree-node\n                *matTreeNodeDef=\"let node; when: hasChild\"\n                [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath() | menuFocus: node : activeMenuPath() }\">\n                <li>\n                  <div\n                    class=\"c-menu-node\"\n                    (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                    (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\n                    <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\n                      <div\n                        [class.d-none]=\"!isShowSidebar()\"\n                        class=\"c-menu-node-description\"\n                        role=\"button\"\n                        tabindex=\"0\"\n                        [attr.aria-expanded]=\"treeControl.isExpanded(node)\"\n                        (keydown.enter)=\"onToggleMenuNode(node)\"\n                        (keydown.space)=\"$event.preventDefault(); onToggleMenuNode(node)\"\n                        (click)=\"onToggleMenuNode(node)\">\n                        <div\n                          class=\"c-menu-node-description-content\"\n                          [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\n                        <mat-icon class=\"c-menu-node-description-icon-expand\">\n                          {{ treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\n                        </mat-icon>\n                      </div>\n                    </div>\n                  </div>\n                  <ul class=\"p-0\" [class.d-none]=\"!treeControl.isExpanded(node)\">\n                    <ng-container matTreeNodeOutlet></ng-container>\n                  </ul>\n                </li>\n              </mat-nested-tree-node>\n            </mat-tree>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"c-footer\">\n      <lib-layout-user\n        [userInfo]=\"_userInfo\"\n        [isMobileOrTablet]=\"isMobileOrTablet\"\n        (menuOpened)=\"onUserMenuOpened()\"\n        (menuClosed)=\"onUserMenuClosed()\"\n        [isShowSidebar]=\"isShowSidebar()\"\n        (toggleMenuLock)=\"toggleMenuLock($event)\">\n      </lib-layout-user>\n    </div>\n\n    <div class=\"c-vertical\"></div>\n  </div>\n}\n", styles: ["::ng-deep .mat-mdc-tooltip-panel:has(.c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140){pointer-events:none}:host ::ng-deep .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:16px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:32px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:48px!important}ul,li{margin-top:0;margin-bottom:0;list-style-type:none}.wrapper{position:relative;display:flex;flex-direction:column;width:290px;background-color:#fff}.wrapper .c-header{flex-shrink:0;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;min-height:0;overflow-y:hidden}.wrapper .c-body .c-menu{height:100%;display:flex}.wrapper .c-body .c-menu .c-menu-group{margin-bottom:80px;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;min-height:0;display:flex;flex-direction:column;padding:3px 4px 3px 3px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search{flex-shrink:0}.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;min-height:0;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{position:absolute;bottom:0;left:0;width:60px;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", "clearable", "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$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i3$1.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i3$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "component", type: i3$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i3$1.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,
@@ -1051,7 +1051,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         SdSuffixDefDirective,
                         LayoutUserComponent$1,
                         TranslatePipe,
-                    ], template: "@let _userInfo = userInfo();\n@let _sidebar = sidebar();\n\n@if (_userInfo && _sidebar) {\n  <div class=\"wrapper\" [style.height]=\"isMobileOrTablet ? screenHeight + 'px' : '100%'\">\n    <div class=\"c-header\">\n      @if (_sidebar.logoUrl) {\n        <div class=\"c-logo\">\n          <a href=\"javascript:;\" (click)=\"openHomePage()\">\n            <img alt=\"logo\" [src]=\"_sidebar.logoUrl\" />\n          </a>\n        </div>\n      }\n      <div class=\"c-title-menu-group\" [class.d-none]=\"!isShowSidebar()\">\n        <span>{{ titleMenuGroup() || _sidebar.defaultTitle || 'Back Office' }}</span>\n      </div>\n    </div>\n    <div class=\"c-body\">\n      <div class=\"c-menu\">\n        <div class=\"c-menu-group\">\n          @if (_sidebar?.pin?.enabled && pinnedMenuGroup().children?.length) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, pinnedMenuGroup())\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, pinnedMenuGroup())\"\n              (click)=\"expandPinnedGroup()\"\n              [matTooltip]=\"'\u0110\u00E3 ghim'\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              <mat-icon\n                class=\"c-menu-group-icon\"\n                [ngStyle]=\"{\n                  color: isPinnedMenuGroupActive() ? _sidebar.brandColor || '#2962FF' : '#8C8C8C',\n                  backgroundColor: isPinnedMenuGroupActive() ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\n                }\">\n                push_pin\n              </mat-icon>\n            </button>\n          }\n          @for (nodeMenuGroup of menus(); track nodeMenuGroup.id) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, nodeMenuGroup)\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, nodeMenuGroup)\"\n              (click)=\"expandMenuGroup(nodeMenuGroup)\"\n              [matTooltip]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              @if (nodeMenuGroup.iconUrl) {\n                <span\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    backgroundColor: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\n                  }\">\n                  <img width=\"24px\" height=\"24px\" [src]=\"nodeMenuGroup.iconUrl\" [alt]=\"nodeMenuGroup.title\" />\n                </span>\n              } @else {\n                <mat-icon\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    color: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandColor || '#2962FF' : '#8C8C8C',\n                    backgroundColor: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\n                  }\">\n                  {{ nodeMenuGroup.icon || 'widgets' }}\n                </mat-icon>\n              }\n            </button>\n          }\n        </div>\n        <div class=\"c-menu-tree\" [class.d-none]=\"!isShowSidebar()\" [attr.inert]=\"!isShowSidebar() ? '' : null\">\n          @if (totalMenuInMenusByGroup() >= 10) {\n            <div style=\"padding: 0px 4px\" class=\"c-menu-tree-search\">\n              <sd-input [clearable]=\"true\"\n                size=\"sm\"\n                [placeholder]=\"'core.module.layout.sidebar.search' | translate\"\n                [model]=\"searchText()\"\n                (sdChange)=\"onFilterSearchText($event)\">\n                <ng-template sdSuffixDef>\n                  @if (searchText()) {\n                    <mat-icon class=\"c-search-prefix-icon cancel\" (click)=\"onClearSearchText()\">cancel</mat-icon>\n                  } @else {\n                    <mat-icon class=\"c-search-prefix-icon search\">search</mat-icon>\n                  }\n                </ng-template>\n              </sd-input>\n            </div>\n          }\n          <div class=\"c-menu-tree-container\">\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\n              <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\n                <li\n                  class=\"c-menu-node\"\n                  (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                  (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\n                  [ngStyle]=\"{\n                    backgroundColor: (currentPath() | menuFocus: node : activeMenuPath()) ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\n                  }\">\n                  <div aria-hidden=\"true\" class=\"c-menu-node-description\" (click)=\"navigate(node)\" [class.d-none]=\"!isShowSidebar()\">\n                    <div\n                      class=\"c-menu-node-description-content\"\n                      [ngStyle]=\"{\n                        color: (currentPath() | menuFocus: node : activeMenuPath()) ? _sidebar.brandColor || '#2962FF' : '#1F1F1F',\n                      }\"\n                      [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\n\n                    @if (_sidebar?.pin?.enabled) {\n                      <mat-icon\n                        class=\"c-menu-node-description-icon-pin\"\n                        [fontSet]=\"isPinnedNode(node) ? 'material-icons' : 'material-icons-outlined'\"\n                        [style.opacity]=\"isPinnedNode(node) || isHoveredNode(node) ? '1' : null\"\n                        [style.color]=\"isPinnedNode(node) || isHoveredNode(node) ? sidebar().brandColor || '#2962FF' : null\"\n                        (click)=\"onTogglePin($event, node)\"\n                        >push_pin\n                      </mat-icon>\n                    }\n                  </div>\n                </li>\n              </mat-nested-tree-node>\n\n              <mat-nested-tree-node\n                *matTreeNodeDef=\"let node; when: hasChild\"\n                aria-hidden=\"true\"\n                [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath() | menuFocus: node : activeMenuPath() }\">\n                <li>\n                  <div\n                    class=\"c-menu-node\"\n                    (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                    (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\n                    <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\n                      <div [class.d-none]=\"!isShowSidebar()\" class=\"c-menu-node-description\" (click)=\"onToggleMenuNode(node)\">\n                        <div\n                          class=\"c-menu-node-description-content\"\n                          [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\n                        <mat-icon class=\"c-menu-node-description-icon-expand\">\n                          {{ treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\n                        </mat-icon>\n                      </div>\n                    </div>\n                  </div>\n                  <ul class=\"p-0\" [class.d-none]=\"!treeControl.isExpanded(node)\">\n                    <ng-container matTreeNodeOutlet></ng-container>\n                  </ul>\n                </li>\n              </mat-nested-tree-node>\n            </mat-tree>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"c-footer\">\n      <lib-layout-user\n        [userInfo]=\"_userInfo\"\n        [isMobileOrTablet]=\"isMobileOrTablet\"\n        (menuOpened)=\"onUserMenuOpened()\"\n        (menuClosed)=\"onUserMenuClosed()\"\n        [isShowSidebar]=\"isShowSidebar()\"\n        (toggleMenuLock)=\"toggleMenuLock($event)\">\n      </lib-layout-user>\n    </div>\n\n    <div class=\"c-vertical\"></div>\n  </div>\n}\n", styles: ["::ng-deep .mat-mdc-tooltip-panel:has(.c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140){pointer-events:none}:host ::ng-deep .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:16px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:32px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:48px!important}ul,li{margin-top:0;margin-bottom:0;list-style-type:none}.wrapper{position:relative;display:flex;flex-direction:column;width:290px;background-color:#fff}.wrapper .c-header{flex-shrink:0;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;min-height:0;overflow-y:hidden}.wrapper .c-body .c-menu{height:100%;display:flex}.wrapper .c-body .c-menu .c-menu-group{margin-bottom:80px;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;min-height:0;display:flex;flex-direction:column;padding:3px 4px 3px 3px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search{flex-shrink:0}.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;min-height:0;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{position:absolute;bottom:0;left:0;width:60px;height:80px}.wrapper .c-vertical{position:fixed;height:100vh;left:58px;width:2px;background-color:#f8f9fa;pointer-events:none}\n"] }]
+                    ], template: "@let _userInfo = userInfo();\n@let _sidebar = sidebar();\n\n@if (_userInfo && _sidebar) {\n  <div class=\"wrapper\" [style.height]=\"isMobileOrTablet ? screenHeight + 'px' : '100%'\">\n    <div class=\"c-header\">\n      @if (_sidebar.logoUrl) {\n        <div class=\"c-logo\">\n          <a href=\"javascript:;\" (click)=\"openHomePage()\">\n            <img alt=\"logo\" [src]=\"_sidebar.logoUrl\" />\n          </a>\n        </div>\n      }\n      <div class=\"c-title-menu-group\" [class.d-none]=\"!isShowSidebar()\">\n        <span>{{ titleMenuGroup() || _sidebar.defaultTitle || 'Back Office' }}</span>\n      </div>\n    </div>\n    <div class=\"c-body\">\n      <div class=\"c-menu\">\n        <div class=\"c-menu-group\">\n          @if (_sidebar?.pin?.enabled && pinnedMenuGroup().children?.length) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, pinnedMenuGroup())\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, pinnedMenuGroup())\"\n              (click)=\"expandPinnedGroup()\"\n              [matTooltip]=\"'\u0110\u00E3 ghim'\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              <mat-icon\n                class=\"c-menu-group-icon\"\n                [ngStyle]=\"{\n                  color: isPinnedMenuGroupActive() ? _sidebar.brandColor || '#2962FF' : '#8C8C8C',\n                  backgroundColor: isPinnedMenuGroupActive() ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\n                }\">\n                push_pin\n              </mat-icon>\n            </button>\n          }\n          @for (nodeMenuGroup of menus(); track nodeMenuGroup.id) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, nodeMenuGroup)\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, nodeMenuGroup)\"\n              (click)=\"expandMenuGroup(nodeMenuGroup)\"\n              [matTooltip]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              @if (nodeMenuGroup.iconUrl) {\n                <span\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    backgroundColor: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\n                  }\">\n                  <img width=\"24px\" height=\"24px\" [src]=\"nodeMenuGroup.iconUrl\" [alt]=\"nodeMenuGroup.title\" />\n                </span>\n              } @else {\n                <mat-icon\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    color: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandColor || '#2962FF' : '#8C8C8C',\n                    backgroundColor: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\n                  }\">\n                  {{ nodeMenuGroup.icon || 'widgets' }}\n                </mat-icon>\n              }\n            </button>\n          }\n        </div>\n        <div class=\"c-menu-tree\" [class.d-none]=\"!isShowSidebar()\" [attr.inert]=\"!isShowSidebar() ? '' : null\">\n          @if (totalMenuInMenusByGroup() >= 10) {\n            <div style=\"padding: 0px 4px\" class=\"c-menu-tree-search\">\n              <sd-input\n                [clearable]=\"true\"\n                size=\"sm\"\n                [placeholder]=\"'core.module.layout.sidebar.search' | translate\"\n                [model]=\"searchText()\"\n                (sdChange)=\"onFilterSearchText($event)\">\n                <ng-template sdSuffixDef>\n                  @if (searchText()) {\n                    <mat-icon class=\"c-search-prefix-icon cancel\" (click)=\"onClearSearchText()\">cancel</mat-icon>\n                  } @else {\n                    <mat-icon class=\"c-search-prefix-icon search\">search</mat-icon>\n                  }\n                </ng-template>\n              </sd-input>\n            </div>\n          }\n          <div class=\"c-menu-tree-container\">\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\n              <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\n                <li\n                  class=\"c-menu-node\"\n                  (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                  (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\n                  [ngStyle]=\"{\n                    backgroundColor:\n                      (currentPath() | menuFocus: node : activeMenuPath()) ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\n                  }\">\n                  <div\n                    class=\"c-menu-node-description\"\n                    role=\"button\"\n                    tabindex=\"0\"\n                    (keydown.enter)=\"navigate(node)\"\n                    (keydown.space)=\"$event.preventDefault(); navigate(node)\"\n                    (click)=\"navigate(node)\"\n                    [class.d-none]=\"!isShowSidebar()\">\n                    <div\n                      class=\"c-menu-node-description-content\"\n                      [ngStyle]=\"{\n                        color: (currentPath() | menuFocus: node : activeMenuPath()) ? _sidebar.brandColor || '#2962FF' : '#1F1F1F',\n                      }\"\n                      [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\n\n                    @if (_sidebar?.pin?.enabled) {\n                      <mat-icon\n                        class=\"c-menu-node-description-icon-pin\"\n                        [fontSet]=\"isPinnedNode(node) ? 'material-icons' : 'material-icons-outlined'\"\n                        [style.opacity]=\"isPinnedNode(node) || isHoveredNode(node) ? '1' : null\"\n                        [style.color]=\"isPinnedNode(node) || isHoveredNode(node) ? sidebar().brandColor || '#2962FF' : null\"\n                        (click)=\"onTogglePin($event, node)\"\n                        >push_pin\n                      </mat-icon>\n                    }\n                  </div>\n                </li>\n              </mat-nested-tree-node>\n\n              <mat-nested-tree-node\n                *matTreeNodeDef=\"let node; when: hasChild\"\n                [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath() | menuFocus: node : activeMenuPath() }\">\n                <li>\n                  <div\n                    class=\"c-menu-node\"\n                    (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                    (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\n                    <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\n                      <div\n                        [class.d-none]=\"!isShowSidebar()\"\n                        class=\"c-menu-node-description\"\n                        role=\"button\"\n                        tabindex=\"0\"\n                        [attr.aria-expanded]=\"treeControl.isExpanded(node)\"\n                        (keydown.enter)=\"onToggleMenuNode(node)\"\n                        (keydown.space)=\"$event.preventDefault(); onToggleMenuNode(node)\"\n                        (click)=\"onToggleMenuNode(node)\">\n                        <div\n                          class=\"c-menu-node-description-content\"\n                          [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\n                        <mat-icon class=\"c-menu-node-description-icon-expand\">\n                          {{ treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\n                        </mat-icon>\n                      </div>\n                    </div>\n                  </div>\n                  <ul class=\"p-0\" [class.d-none]=\"!treeControl.isExpanded(node)\">\n                    <ng-container matTreeNodeOutlet></ng-container>\n                  </ul>\n                </li>\n              </mat-nested-tree-node>\n            </mat-tree>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"c-footer\">\n      <lib-layout-user\n        [userInfo]=\"_userInfo\"\n        [isMobileOrTablet]=\"isMobileOrTablet\"\n        (menuOpened)=\"onUserMenuOpened()\"\n        (menuClosed)=\"onUserMenuClosed()\"\n        [isShowSidebar]=\"isShowSidebar()\"\n        (toggleMenuLock)=\"toggleMenuLock($event)\">\n      </lib-layout-user>\n    </div>\n\n    <div class=\"c-vertical\"></div>\n  </div>\n}\n", styles: ["::ng-deep .mat-mdc-tooltip-panel:has(.c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140){pointer-events:none}:host ::ng-deep .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:16px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:32px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:48px!important}ul,li{margin-top:0;margin-bottom:0;list-style-type:none}.wrapper{position:relative;display:flex;flex-direction:column;width:290px;background-color:#fff}.wrapper .c-header{flex-shrink:0;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;min-height:0;overflow-y:hidden}.wrapper .c-body .c-menu{height:100%;display:flex}.wrapper .c-body .c-menu .c-menu-group{margin-bottom:80px;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;min-height:0;display:flex;flex-direction:column;padding:3px 4px 3px 3px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search{flex-shrink:0}.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;min-height:0;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{position:absolute;bottom:0;left:0;width:60px;height:80px}.wrapper .c-vertical{position:fixed;height:100vh;left:58px;width:2px;background-color:#f8f9fa;pointer-events:none}\n"] }]
         }], ctorParameters: () => [] });
 class SidebarV1Component {
@@ -1775,7 +1775,7 @@ class SidebarV2PanelComponent {
         return count;
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SidebarV2PanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SidebarV2PanelComponent, isStandalone: true, selector: "sd-sidebar-v2-panel", inputs: { isShowSidebar: { classPropertyName: "isShowSidebar", publicName: "isShowSidebar", isSignal: true, isRequired: true, transformFunction: null }, menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: true, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { expandSideBar: "expandSideBar", popupUserMenuClosed: "popupUserMenuClosed", popupUserMenuOpened: "popupUserMenuOpened", showSideBar: "showSideBar" }, ngImport: i0, template: "@let _userInfo = userInfo();\n@let _sidebar = sidebar();\n@let _isShowSidebar = isShowSidebar();\n@let _searchText = searchText();\n@let _currentPath = currentPath();\n@let _activeMenuPath = activeMenuPath();\n@let _idMenuGroupActive = idMenuGroupActive();\n@let _pinnedMenuGroup = pinnedMenuGroup();\n\n@if (_userInfo && _sidebar) {\n  <div\n    class=\"wrapper\"\n    [style.--sidebar-accent]=\"_sidebar.brandColor || 'var(--sd-primary, #005cbb)'\"\n    [style.height]=\"isMobileOrTablet ? screenHeight + 'px' : '100%'\">\n    <div class=\"c-header\">\n      @if (_sidebar.logoUrl) {\n        <div class=\"c-logo\">\n          <a href=\"javascript:;\" (click)=\"openHomePage()\">\n            <img alt=\"logo\" [src]=\"_sidebar.logoUrl\" />\n          </a>\n        </div>\n      }\n      <div class=\"c-title-menu-group\" [class.d-none]=\"!_isShowSidebar\">\n        <span>{{ titleMenuGroup() || _sidebar.defaultTitle || 'Back Office' }}</span>\n      </div>\n    </div>\n    <div class=\"c-body\">\n      <div class=\"c-menu\">\n        <div class=\"c-menu-group\">\n          @if (_sidebar?.pin?.enabled && _pinnedMenuGroup.children?.length) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, _pinnedMenuGroup)\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, _pinnedMenuGroup)\"\n              (click)=\"expandPinnedGroup()\"\n              [matTooltip]=\"'\u0110\u00E3 ghim'\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              <mat-icon\n                fontSet=\"material-icons-outlined\"\n                class=\"c-menu-group-icon\"\n                [ngStyle]=\"{\n                  color: isPinnedMenuGroupActive()\n                    ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)'\n                    : 'var(--sd-text-secondary, #6b7280)',\n                  backgroundColor: isPinnedMenuGroupActive()\n                    ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)'\n                    : 'transparent',\n                }\">\n                push_pin\n              </mat-icon>\n            </button>\n          }\n          @for (nodeMenuGroup of menus(); track nodeMenuGroup.id) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, nodeMenuGroup)\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, nodeMenuGroup)\"\n              (click)=\"expandMenuGroup(nodeMenuGroup)\"\n              [matTooltip]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              @if (nodeMenuGroup.iconUrl) {\n                <span\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    backgroundColor:\n                      _idMenuGroupActive === nodeMenuGroup?.id\n                        ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)'\n                        : 'transparent',\n                  }\">\n                  <img width=\"24px\" height=\"24px\" [src]=\"nodeMenuGroup.iconUrl\" [alt]=\"nodeMenuGroup.title\" />\n                </span>\n              } @else {\n                <mat-icon\n                  fontSet=\"material-icons-outlined\"\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    color:\n                      _idMenuGroupActive === nodeMenuGroup?.id\n                        ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)'\n                        : 'var(--sd-text-secondary, #6b7280)',\n                    backgroundColor:\n                      _idMenuGroupActive === nodeMenuGroup?.id\n                        ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)'\n                        : 'transparent',\n                  }\">\n                  {{ nodeMenuGroup.icon || 'widgets' }}\n                </mat-icon>\n              }\n            </button>\n          }\n        </div>\n        <div class=\"c-menu-tree\" [class.d-none]=\"!_isShowSidebar\" [attr.inert]=\"!_isShowSidebar ? '' : null\">\n          @if (totalMenuInMenusByGroup() >= 10) {\n            <div class=\"c-menu-tree-search\">\n              @let _searchLabel = 'core.module.layout.sidebar.search' | translate;\n              <div class=\"c-menu-search-field\">\n                <mat-icon class=\"c-menu-search-icon\" fontSet=\"material-icons-outlined\" aria-hidden=\"true\">search</mat-icon>\n                <input\n                  #menuSearch\n                  class=\"c-menu-search-input\"\n                  type=\"search\"\n                  autocomplete=\"off\"\n                  [attr.aria-label]=\"_searchLabel\"\n                  [placeholder]=\"_searchLabel\"\n                  [ngModel]=\"_searchText\"\n                  [ngModelOptions]=\"{ standalone: true }\"\n                  (ngModelChange)=\"onFilterSearchText($event)\" />\n                @if (_searchText) {\n                  <button\n                    type=\"button\"\n                    class=\"c-menu-search-clear\"\n                    [attr.aria-label]=\"'core.module.layout.sidebar.clear-search' | translate\"\n                    (click)=\"onClearSearchText(); menuSearch.focus()\">\n                    <mat-icon fontSet=\"material-icons-outlined\" aria-hidden=\"true\">close</mat-icon>\n                  </button>\n                }\n              </div>\n            </div>\n          }\n          <div class=\"c-menu-tree-container\">\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\n              <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\n                <li\n                  class=\"c-menu-node\"\n                  [class.is-active]=\"_currentPath | menuFocus: node : _activeMenuPath\"\n                  (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                  (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\n                  [ngStyle]=\"{\n                    backgroundColor:\n                      (_currentPath | menuFocus: node : _activeMenuPath)\n                        ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)'\n                        : 'transparent',\n                  }\">\n                  <div aria-hidden=\"true\" class=\"c-menu-node-description\" (click)=\"navigate(node)\" [class.d-none]=\"!_isShowSidebar\">\n                    <div\n                      class=\"c-menu-node-description-content\"\n                      [ngStyle]=\"{\n                        color:\n                          (_currentPath | menuFocus: node : _activeMenuPath)\n                            ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)'\n                            : 'var(--sd-text, #252c38)',\n                      }\">\n                      @if (node.iconUrl) {\n                        <img class=\"c-menu-node-icon\" [src]=\"node.iconUrl\" alt=\"\" />\n                      } @else if (node.icon) {\n                        <mat-icon class=\"c-menu-node-icon\" fontSet=\"material-icons-outlined\">{{ node.icon }}</mat-icon>\n                      }\n                      <span class=\"c-menu-node-label\" [innerHTML]=\"node.title | highLightSearch: _searchText | sdSafeHtml\"></span>\n                    </div>\n\n                    @if (_sidebar?.pin?.enabled) {\n                      <mat-icon\n                        class=\"c-menu-node-description-icon-pin\"\n                        [fontSet]=\"isPinnedNode(node) ? 'material-icons' : 'material-icons-outlined'\"\n                        [style.opacity]=\"isPinnedNode(node) || isHoveredNode(node) ? '1' : null\"\n                        [style.color]=\"\n                          isPinnedNode(node) || isHoveredNode(node) ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)' : null\n                        \"\n                        (click)=\"onTogglePin($event, node)\"\n                        >push_pin\n                      </mat-icon>\n                    }\n                  </div>\n                </li>\n              </mat-nested-tree-node>\n\n              <mat-nested-tree-node\n                *matTreeNodeDef=\"let node; when: hasChild\"\n                aria-hidden=\"true\"\n                [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: _currentPath | menuFocus: node : _activeMenuPath }\">\n                <li>\n                  <div\n                    class=\"c-menu-node\"\n                    [class.is-ancestor]=\"_currentPath | menuFocus: node : _activeMenuPath\"\n                    (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                    (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\n                    <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\n                      <div [class.d-none]=\"!_isShowSidebar\" class=\"c-menu-node-description\" (click)=\"onToggleMenuNode(node)\">\n                        <div class=\"c-menu-node-description-content\">\n                          @if (node.iconUrl) {\n                            <img class=\"c-menu-node-icon\" [src]=\"node.iconUrl\" alt=\"\" />\n                          } @else if (node.icon) {\n                            <mat-icon class=\"c-menu-node-icon\" fontSet=\"material-icons-outlined\">{{ node.icon }}</mat-icon>\n                          }\n                          <span class=\"c-menu-node-label\" [innerHTML]=\"node.title | highLightSearch: _searchText | sdSafeHtml\"></span>\n                        </div>\n                        <mat-icon fontSet=\"material-icons-outlined\" class=\"c-menu-node-description-icon-expand\">\n                          {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n                        </mat-icon>\n                      </div>\n                    </div>\n                  </div>\n                  <ul class=\"c-menu-node-group\" [class.d-none]=\"!treeControl.isExpanded(node)\">\n                    <ng-container matTreeNodeOutlet></ng-container>\n                  </ul>\n                </li>\n              </mat-nested-tree-node>\n            </mat-tree>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"c-footer\">\n      <sd-sidebar-v2-user\n        [userInfo]=\"_userInfo\"\n        [isMobileOrTablet]=\"isMobileOrTablet\"\n        (menuOpened)=\"onUserMenuOpened()\"\n        (menuClosed)=\"onUserMenuClosed()\"\n        [isShowSidebar]=\"_isShowSidebar\"\n        (toggleMenuLock)=\"toggleMenuLock($event)\">\n      </sd-sidebar-v2-user>\n    </div>\n  </div>\n}\n", styles: ["::ng-deep .mat-mdc-tooltip-panel:has(.c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140){pointer-events:none}:host{display:block;height:100%}.wrapper{--sidebar-surface: var(--sd-white, #fff);--sidebar-rail: color-mix(in srgb, var(--sd-surface-muted, #e7e8ed) 35%, var(--sidebar-surface));--sidebar-line: color-mix(in srgb, var(--sd-border, #c4c6d0) 45%, var(--sidebar-surface));--sidebar-ink: var(--sd-text, #252c38);--sidebar-muted: var(--sd-text-secondary, #6b7280);position:relative;display:flex;flex-direction:column;width:min(304px,100vw);color:var(--sidebar-ink);background:linear-gradient(to right,var(--sidebar-rail) 56px,var(--sidebar-surface) 56px)}.wrapper,.wrapper *{box-sizing:border-box}.wrapper:before{content:\"\";position:absolute;inset:0 auto 0 55px;width:1px;background:var(--sidebar-line);pointer-events:none}.c-header{flex:0 0 auto;display:grid;grid-template-columns:56px minmax(0,1fr);min-height:42px}.c-logo{grid-column:1;display:grid;place-items:center;height:42px}.c-logo a{display:grid;place-items:center;width:38px;height:40px;border-radius:9px;color:var(--sidebar-muted)}.c-logo img{width:30px;height:30px;object-fit:contain}.c-title-menu-group{grid-column:2;display:flex;align-items:center;min-width:0;padding:10px 14px 12px;color:var(--sidebar-ink);font-size:16px;font-weight:700;line-height:22px;letter-spacing:-.2px;overflow-wrap:anywhere}.c-body{flex:1;min-height:0;overflow:hidden}.c-menu{display:flex;height:100%}.c-menu-group{display:flex;flex:0 0 56px;flex-direction:column;align-items:center;gap:10px;width:56px;min-height:0;margin-bottom:86px;padding:5px 0 8px;overflow-y:auto;scrollbar-width:none}.c-menu-group>button{flex:0 0 auto;border-radius:9px}.c-menu-group .c-menu-group-icon{display:flex;align-items:center;justify-content:center;width:38px;height:40px;min-height:40px;border-radius:9px;font-size:22px}.c-menu-group .c-menu-group-icon img{width:22px;height:22px;object-fit:contain}.c-menu-tree{display:flex;flex:1;flex-direction:column;min-width:0;min-height:0}.c-menu-tree-search{flex:0 0 auto;padding:0 14px 12px;border-bottom:1px solid var(--sidebar-line)}.c-menu-search-field{display:flex;align-items:center;gap:8px;height:36px;padding:0 9px;border:1px solid var(--sidebar-line);border-radius:7px;background:var(--sidebar-rail);color:var(--sidebar-muted)}.c-menu-search-field:hover{border-color:color-mix(in srgb,var(--sidebar-muted) 35%,var(--sidebar-surface))}.c-menu-search-field:focus-within{border-color:color-mix(in srgb,var(--sidebar-accent, var(--sd-primary, #005cbb)) 75%,var(--sidebar-surface));background:var(--sidebar-surface)}.c-menu-search-icon{flex:0 0 18px;width:18px;height:18px;font-size:18px;pointer-events:none}.c-menu-search-input{flex:1 1 0;width:0;min-width:0;height:100%;margin:0;padding:0;border:0;border-radius:0;outline:none;box-shadow:none;appearance:none;background:transparent;color:var(--sidebar-ink);font:inherit;font-size:13px;line-height:20px}.c-menu-search-input:focus,.c-menu-search-input:focus-visible{outline:none;box-shadow:none}.c-menu-search-input::placeholder{color:var(--sidebar-muted);opacity:1}.c-menu-search-input::-webkit-search-decoration,.c-menu-search-input::-webkit-search-cancel-button{appearance:none}.c-menu-search-clear{display:grid;flex:0 0 24px;place-items:center;width:24px;min-width:24px;height:24px;margin:0;padding:0;border:0;border-radius:4px;background:transparent;color:var(--sidebar-muted);cursor:pointer}.c-menu-search-clear sd-icon,.c-menu-search-clear mat-icon{width:18px;height:18px;font-size:18px}.c-menu-search-clear:hover{background:color-mix(in srgb,var(--sidebar-ink) 7%,transparent);color:var(--sidebar-ink)}.c-menu-search-clear:focus-visible{outline:1px solid var(--sidebar-accent, var(--sd-primary, #005cbb));outline-offset:1px}.c-menu-tree-container{flex:1;min-height:0;padding:10px 8px 14px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--sidebar-line) transparent;overscroll-behavior:contain}.c-menu-node{position:relative;display:flex;align-items:center;width:100%;min-height:40px;margin:2px 0;padding:0;border-radius:7px;cursor:pointer;color:var(--sidebar-ink);font-size:13px;line-height:1.4}.c-menu-node-description{display:flex;flex:1;align-items:center;gap:6px;width:100%;min-width:0;min-height:40px;padding:0;border:0;border-radius:inherit;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.c-menu-node-description-content{display:flex;flex:1;align-items:center;align-self:stretch;gap:9px;min-width:0;padding:8px;color:inherit;font:inherit;font-weight:500;text-decoration:none}.c-menu-node-label{flex:1;min-width:0;white-space:normal;overflow-wrap:anywhere}.c-menu-node-icon{flex:0 0 20px;width:20px;height:20px;font-size:20px;object-fit:contain;color:var(--sidebar-muted)}.c-menu-node-description-icon-expand,.c-menu-node-description-icon-pin{display:flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:24px;margin-right:6px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--sidebar-muted);font-size:18px;cursor:pointer}.c-menu-node-description-icon-pin{opacity:0}.c-menu-node-description-icon-pin:focus-visible{opacity:1!important}.c-menu-node.is-ancestor{color:var(--sidebar-accent)}.c-menu-node.is-ancestor .c-menu-node-description-content,.c-menu-node.is-ancestor .c-menu-node-icon,.c-menu-node.is-ancestor .c-menu-node-description-icon-expand{color:inherit}.c-menu-node.is-active{color:var(--sidebar-accent)}.c-menu-node.is-active .c-menu-node-icon{color:inherit}.c-menu-node.is-active:before{content:\"\";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:2px;background:var(--sidebar-accent)}.c-menu-node-group{position:relative;margin:0 0 7px 19px;padding:1px 0 1px 16px;border-left:1px solid var(--sidebar-line)}.c-menu-node-group .c-menu-node{min-height:34px;border-radius:6px}.c-menu-node-group .c-menu-node-description-content{padding:7px 8px;font-weight:400}.c-menu-node-group .c-menu-node-description{min-height:34px}.c-menu-node-group .c-menu-node-icon{display:none}.c-menu-node-group .c-menu-node.is-active:before{left:-18px}.c-menu-node-group .c-menu-node.is-active .c-menu-node-description-content,.c-menu-node-group .c-menu-node.is-ancestor .c-menu-node-description-content{font-weight:500}.c-menu-node-group .c-menu-node-group{margin-left:8px;padding-left:7px}.c-menu-node-group .c-menu-node-group .c-menu-node.is-active:before{left:-9px}.c-footer{position:absolute;bottom:0;left:0;width:56px;height:86px;background:var(--sidebar-rail)}a:focus-visible,button:focus-visible{outline:2px solid var(--sidebar-accent, var(--sd-primary, #005cbb));outline-offset:-2px}@media(pointer:coarse){.c-menu-node,.c-menu-node-group .c-menu-node,.c-menu-node-description,.c-menu-node-group .c-menu-node-description{min-height:44px}}@media(prefers-reduced-motion:reduce){.c-menu-group-icon,.c-menu-node,.c-menu-node *{transition:none!important}}ul,li{margin-top:0;margin-bottom:0;list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i3$1.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i3$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "component", type: i3$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i3$1.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "pipe", type: SdSafeHtmlPipe, name: "sdSafeHtml" }, { 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: "component", type: SidebarV2UserComponent, selector: "sd-sidebar-v2-user", inputs: ["isMobileOrTablet", "isMenuLock", "isShowSidebar", "userInfo"], outputs: ["menuClosed", "menuOpened", "toggleMenuLock"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SidebarV2PanelComponent, isStandalone: true, selector: "sd-sidebar-v2-panel", inputs: { isShowSidebar: { classPropertyName: "isShowSidebar", publicName: "isShowSidebar", isSignal: true, isRequired: true, transformFunction: null }, menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: true, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { expandSideBar: "expandSideBar", popupUserMenuClosed: "popupUserMenuClosed", popupUserMenuOpened: "popupUserMenuOpened", showSideBar: "showSideBar" }, ngImport: i0, template: "@let _userInfo = userInfo();\n@let _sidebar = sidebar();\n@let _isShowSidebar = isShowSidebar();\n@let _searchText = searchText();\n@let _currentPath = currentPath();\n@let _activeMenuPath = activeMenuPath();\n@let _idMenuGroupActive = idMenuGroupActive();\n@let _pinnedMenuGroup = pinnedMenuGroup();\n\n@if (_userInfo && _sidebar) {\n  <div\n    class=\"wrapper\"\n    [style.--sidebar-accent]=\"_sidebar.brandColor || 'var(--sd-primary, #005cbb)'\"\n    [style.height]=\"isMobileOrTablet ? screenHeight + 'px' : '100%'\">\n    <div class=\"c-header\">\n      @if (_sidebar.logoUrl) {\n        <div class=\"c-logo\">\n          <a href=\"javascript:;\" (click)=\"openHomePage()\">\n            <img alt=\"logo\" [src]=\"_sidebar.logoUrl\" />\n          </a>\n        </div>\n      }\n      <div class=\"c-title-menu-group\" [class.d-none]=\"!_isShowSidebar\">\n        <span>{{ titleMenuGroup() || _sidebar.defaultTitle || 'Back Office' }}</span>\n      </div>\n    </div>\n    <div class=\"c-body\">\n      <div class=\"c-menu\">\n        <div class=\"c-menu-group\">\n          @if (_sidebar?.pin?.enabled && _pinnedMenuGroup.children?.length) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, _pinnedMenuGroup)\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, _pinnedMenuGroup)\"\n              (click)=\"expandPinnedGroup()\"\n              [matTooltip]=\"'\u0110\u00E3 ghim'\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              <mat-icon\n                fontSet=\"material-icons-outlined\"\n                class=\"c-menu-group-icon\"\n                [ngStyle]=\"{\n                  color: isPinnedMenuGroupActive()\n                    ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)'\n                    : 'var(--sd-text-secondary, #6b7280)',\n                  backgroundColor: isPinnedMenuGroupActive()\n                    ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)'\n                    : 'transparent',\n                }\">\n                push_pin\n              </mat-icon>\n            </button>\n          }\n          @for (nodeMenuGroup of menus(); track nodeMenuGroup.id) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, nodeMenuGroup)\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, nodeMenuGroup)\"\n              (click)=\"expandMenuGroup(nodeMenuGroup)\"\n              [matTooltip]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              @if (nodeMenuGroup.iconUrl) {\n                <span\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    backgroundColor:\n                      _idMenuGroupActive === nodeMenuGroup?.id\n                        ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)'\n                        : 'transparent',\n                  }\">\n                  <img width=\"24px\" height=\"24px\" [src]=\"nodeMenuGroup.iconUrl\" [alt]=\"nodeMenuGroup.title\" />\n                </span>\n              } @else {\n                <mat-icon\n                  fontSet=\"material-icons-outlined\"\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    color:\n                      _idMenuGroupActive === nodeMenuGroup?.id\n                        ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)'\n                        : 'var(--sd-text-secondary, #6b7280)',\n                    backgroundColor:\n                      _idMenuGroupActive === nodeMenuGroup?.id\n                        ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)'\n                        : 'transparent',\n                  }\">\n                  {{ nodeMenuGroup.icon || 'widgets' }}\n                </mat-icon>\n              }\n            </button>\n          }\n        </div>\n        <div class=\"c-menu-tree\" [class.d-none]=\"!_isShowSidebar\" [attr.inert]=\"!_isShowSidebar ? '' : null\">\n          @if (totalMenuInMenusByGroup() >= 10) {\n            <div class=\"c-menu-tree-search\">\n              @let _searchLabel = 'core.module.layout.sidebar.search' | translate;\n              <div class=\"c-menu-search-field\">\n                <mat-icon class=\"c-menu-search-icon\" fontSet=\"material-icons-outlined\" aria-hidden=\"true\">search</mat-icon>\n                <input\n                  #menuSearch\n                  class=\"c-menu-search-input\"\n                  type=\"search\"\n                  autocomplete=\"off\"\n                  [attr.aria-label]=\"_searchLabel\"\n                  [placeholder]=\"_searchLabel\"\n                  [ngModel]=\"_searchText\"\n                  [ngModelOptions]=\"{ standalone: true }\"\n                  (ngModelChange)=\"onFilterSearchText($event)\" />\n                @if (_searchText) {\n                  <button\n                    type=\"button\"\n                    class=\"c-menu-search-clear\"\n                    [attr.aria-label]=\"'core.module.layout.sidebar.clear-search' | translate\"\n                    (click)=\"onClearSearchText(); menuSearch.focus()\">\n                    <mat-icon fontSet=\"material-icons-outlined\" aria-hidden=\"true\">close</mat-icon>\n                  </button>\n                }\n              </div>\n            </div>\n          }\n          <div class=\"c-menu-tree-container\">\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\n              <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\n                <li\n                  class=\"c-menu-node\"\n                  [class.is-active]=\"_currentPath | menuFocus: node : _activeMenuPath\"\n                  (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                  (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\n                  [ngStyle]=\"{\n                    backgroundColor:\n                      (_currentPath | menuFocus: node : _activeMenuPath)\n                        ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)'\n                        : 'transparent',\n                  }\">\n                  <div\n                    class=\"c-menu-node-description\"\n                    role=\"button\"\n                    tabindex=\"0\"\n                    (keydown.enter)=\"navigate(node)\"\n                    (keydown.space)=\"$event.preventDefault(); navigate(node)\"\n                    (click)=\"navigate(node)\"\n                    [class.d-none]=\"!_isShowSidebar\">\n                    <div\n                      class=\"c-menu-node-description-content\"\n                      [ngStyle]=\"{\n                        color:\n                          (_currentPath | menuFocus: node : _activeMenuPath)\n                            ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)'\n                            : 'var(--sd-text, #252c38)',\n                      }\">\n                      @if (node.iconUrl) {\n                        <img class=\"c-menu-node-icon\" [src]=\"node.iconUrl\" alt=\"\" />\n                      } @else if (node.icon) {\n                        <mat-icon class=\"c-menu-node-icon\" fontSet=\"material-icons-outlined\">{{ node.icon }}</mat-icon>\n                      }\n                      <span class=\"c-menu-node-label\" [innerHTML]=\"node.title | highLightSearch: _searchText | sdSafeHtml\"></span>\n                    </div>\n\n                    @if (_sidebar?.pin?.enabled) {\n                      <mat-icon\n                        class=\"c-menu-node-description-icon-pin\"\n                        [fontSet]=\"isPinnedNode(node) ? 'material-icons' : 'material-icons-outlined'\"\n                        [style.opacity]=\"isPinnedNode(node) || isHoveredNode(node) ? '1' : null\"\n                        [style.color]=\"\n                          isPinnedNode(node) || isHoveredNode(node) ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)' : null\n                        \"\n                        (click)=\"onTogglePin($event, node)\"\n                        >push_pin\n                      </mat-icon>\n                    }\n                  </div>\n                </li>\n              </mat-nested-tree-node>\n\n              <mat-nested-tree-node\n                *matTreeNodeDef=\"let node; when: hasChild\"\n                [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: _currentPath | menuFocus: node : _activeMenuPath }\">\n                <li>\n                  <div\n                    class=\"c-menu-node\"\n                    [class.is-ancestor]=\"_currentPath | menuFocus: node : _activeMenuPath\"\n                    (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                    (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\n                    <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\n                      <div\n                        [class.d-none]=\"!_isShowSidebar\"\n                        class=\"c-menu-node-description\"\n                        role=\"button\"\n                        tabindex=\"0\"\n                        [attr.aria-expanded]=\"treeControl.isExpanded(node)\"\n                        (keydown.enter)=\"onToggleMenuNode(node)\"\n                        (keydown.space)=\"$event.preventDefault(); onToggleMenuNode(node)\"\n                        (click)=\"onToggleMenuNode(node)\">\n                        <div class=\"c-menu-node-description-content\">\n                          @if (node.iconUrl) {\n                            <img class=\"c-menu-node-icon\" [src]=\"node.iconUrl\" alt=\"\" />\n                          } @else if (node.icon) {\n                            <mat-icon class=\"c-menu-node-icon\" fontSet=\"material-icons-outlined\">{{ node.icon }}</mat-icon>\n                          }\n                          <span class=\"c-menu-node-label\" [innerHTML]=\"node.title | highLightSearch: _searchText | sdSafeHtml\"></span>\n                        </div>\n                        <mat-icon fontSet=\"material-icons-outlined\" class=\"c-menu-node-description-icon-expand\">\n                          {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n                        </mat-icon>\n                      </div>\n                    </div>\n                  </div>\n                  <ul class=\"c-menu-node-group\" [class.d-none]=\"!treeControl.isExpanded(node)\">\n                    <ng-container matTreeNodeOutlet></ng-container>\n                  </ul>\n                </li>\n              </mat-nested-tree-node>\n            </mat-tree>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"c-footer\">\n      <sd-sidebar-v2-user\n        [userInfo]=\"_userInfo\"\n        [isMobileOrTablet]=\"isMobileOrTablet\"\n        (menuOpened)=\"onUserMenuOpened()\"\n        (menuClosed)=\"onUserMenuClosed()\"\n        [isShowSidebar]=\"_isShowSidebar\"\n        (toggleMenuLock)=\"toggleMenuLock($event)\">\n      </sd-sidebar-v2-user>\n    </div>\n  </div>\n}\n", styles: ["::ng-deep .mat-mdc-tooltip-panel:has(.c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140){pointer-events:none}:host{display:block;height:100%}.wrapper{--sidebar-surface: var(--sd-white, #fff);--sidebar-rail: color-mix(in srgb, var(--sd-surface-muted, #e7e8ed) 35%, var(--sidebar-surface));--sidebar-line: color-mix(in srgb, var(--sd-border, #c4c6d0) 45%, var(--sidebar-surface));--sidebar-ink: var(--sd-text, #252c38);--sidebar-muted: var(--sd-text-secondary, #6b7280);position:relative;display:flex;flex-direction:column;width:min(304px,100vw);color:var(--sidebar-ink);background:linear-gradient(to right,var(--sidebar-rail) 56px,var(--sidebar-surface) 56px)}.wrapper,.wrapper *{box-sizing:border-box}.wrapper:before{content:\"\";position:absolute;inset:0 auto 0 55px;width:1px;background:var(--sidebar-line);pointer-events:none}.c-header{flex:0 0 auto;display:grid;grid-template-columns:56px minmax(0,1fr);min-height:42px}.c-logo{grid-column:1;display:grid;place-items:center;height:42px}.c-logo a{display:grid;place-items:center;width:38px;height:40px;border-radius:9px;color:var(--sidebar-muted)}.c-logo img{width:30px;height:30px;object-fit:contain}.c-title-menu-group{grid-column:2;display:flex;align-items:center;min-width:0;padding:10px 14px 12px;color:var(--sidebar-ink);font-size:16px;font-weight:700;line-height:22px;letter-spacing:-.2px;overflow-wrap:anywhere}.c-body{flex:1;min-height:0;overflow:hidden}.c-menu{display:flex;height:100%}.c-menu-group{display:flex;flex:0 0 56px;flex-direction:column;align-items:center;gap:10px;width:56px;min-height:0;margin-bottom:86px;padding:5px 0 8px;overflow-y:auto;scrollbar-width:none}.c-menu-group>button{flex:0 0 auto;border-radius:9px}.c-menu-group .c-menu-group-icon{display:flex;align-items:center;justify-content:center;width:38px;height:40px;min-height:40px;border-radius:9px;font-size:22px}.c-menu-group .c-menu-group-icon img{width:22px;height:22px;object-fit:contain}.c-menu-tree{display:flex;flex:1;flex-direction:column;min-width:0;min-height:0}.c-menu-tree-search{flex:0 0 auto;padding:0 14px 12px;border-bottom:1px solid var(--sidebar-line)}.c-menu-search-field{display:flex;align-items:center;gap:8px;height:36px;padding:0 9px;border:1px solid var(--sidebar-line);border-radius:7px;background:var(--sidebar-rail);color:var(--sidebar-muted)}.c-menu-search-field:hover{border-color:color-mix(in srgb,var(--sidebar-muted) 35%,var(--sidebar-surface))}.c-menu-search-field:focus-within{border-color:color-mix(in srgb,var(--sidebar-accent, var(--sd-primary, #005cbb)) 75%,var(--sidebar-surface));background:var(--sidebar-surface)}.c-menu-search-icon{flex:0 0 18px;width:18px;height:18px;font-size:18px;pointer-events:none}.c-menu-search-input{flex:1 1 0;width:0;min-width:0;height:100%;margin:0;padding:0;border:0;border-radius:0;outline:none;box-shadow:none;appearance:none;background:transparent;color:var(--sidebar-ink);font:inherit;font-size:13px;line-height:20px}.c-menu-search-input:focus,.c-menu-search-input:focus-visible{outline:none;box-shadow:none}.c-menu-search-input::placeholder{color:var(--sidebar-muted);opacity:1}.c-menu-search-input::-webkit-search-decoration,.c-menu-search-input::-webkit-search-cancel-button{appearance:none}.c-menu-search-clear{display:grid;flex:0 0 24px;place-items:center;width:24px;min-width:24px;height:24px;margin:0;padding:0;border:0;border-radius:4px;background:transparent;color:var(--sidebar-muted);cursor:pointer}.c-menu-search-clear sd-icon,.c-menu-search-clear mat-icon{width:18px;height:18px;font-size:18px}.c-menu-search-clear:hover{background:color-mix(in srgb,var(--sidebar-ink) 7%,transparent);color:var(--sidebar-ink)}.c-menu-search-clear:focus-visible{outline:1px solid var(--sidebar-accent, var(--sd-primary, #005cbb));outline-offset:1px}.c-menu-tree-container{flex:1;min-height:0;padding:10px 8px 14px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--sidebar-line) transparent;overscroll-behavior:contain}.c-menu-node{position:relative;display:flex;align-items:center;width:100%;min-height:40px;margin:2px 0;padding:0;border-radius:7px;cursor:pointer;color:var(--sidebar-ink);font-size:13px;line-height:1.4}.c-menu-node-description{display:flex;flex:1;align-items:center;gap:6px;width:100%;min-width:0;min-height:40px;padding:0;border:0;border-radius:inherit;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.c-menu-node-description-content{display:flex;flex:1;align-items:center;align-self:stretch;gap:9px;min-width:0;padding:8px;color:inherit;font:inherit;font-weight:500;text-decoration:none}.c-menu-node-label{flex:1;min-width:0;white-space:normal;overflow-wrap:anywhere}.c-menu-node-icon{flex:0 0 20px;width:20px;height:20px;font-size:20px;object-fit:contain;color:var(--sidebar-muted)}.c-menu-node-description-icon-expand,.c-menu-node-description-icon-pin{display:flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:24px;margin-right:6px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--sidebar-muted);font-size:18px;cursor:pointer}.c-menu-node-description-icon-pin{opacity:0}.c-menu-node-description-icon-pin:focus-visible{opacity:1!important}.c-menu-node.is-ancestor{color:var(--sidebar-accent)}.c-menu-node.is-ancestor .c-menu-node-description-content,.c-menu-node.is-ancestor .c-menu-node-icon,.c-menu-node.is-ancestor .c-menu-node-description-icon-expand{color:inherit}.c-menu-node.is-active{color:var(--sidebar-accent)}.c-menu-node.is-active .c-menu-node-icon{color:inherit}.c-menu-node.is-active:before{content:\"\";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:2px;background:var(--sidebar-accent)}.c-menu-node-group{position:relative;margin:0 0 7px 19px;padding:1px 0 1px 16px;border-left:1px solid var(--sidebar-line)}.c-menu-node-group .c-menu-node{min-height:34px;border-radius:6px}.c-menu-node-group .c-menu-node-description-content{padding:7px 8px;font-weight:400}.c-menu-node-group .c-menu-node-description{min-height:34px}.c-menu-node-group .c-menu-node-icon{display:none}.c-menu-node-group .c-menu-node.is-active:before{left:-18px}.c-menu-node-group .c-menu-node.is-active .c-menu-node-description-content,.c-menu-node-group .c-menu-node.is-ancestor .c-menu-node-description-content{font-weight:500}.c-menu-node-group .c-menu-node-group{margin-left:8px;padding-left:7px}.c-menu-node-group .c-menu-node-group .c-menu-node.is-active:before{left:-9px}.c-footer{position:absolute;bottom:0;left:0;width:56px;height:86px;background:var(--sidebar-rail)}a:focus-visible,button:focus-visible{outline:2px solid var(--sidebar-accent, var(--sd-primary, #005cbb));outline-offset:-2px}@media(pointer:coarse){.c-menu-node,.c-menu-node-group .c-menu-node,.c-menu-node-description,.c-menu-node-group .c-menu-node-description{min-height:44px}}@media(prefers-reduced-motion:reduce){.c-menu-group-icon,.c-menu-node,.c-menu-node *{transition:none!important}}ul,li{margin-top:0;margin-bottom:0;list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i3$1.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i3$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "component", type: i3$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i3$1.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "pipe", type: SdSafeHtmlPipe, name: "sdSafeHtml" }, { 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: "component", type: SidebarV2UserComponent, selector: "sd-sidebar-v2-user", inputs: ["isMobileOrTablet", "isMenuLock", "isShowSidebar", "userInfo"], outputs: ["menuClosed", "menuOpened", "toggleMenuLock"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SidebarV2PanelComponent, decorators: [{
             type: Component,
@@ -1791,7 +1791,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         HighlightSearchPipe,
                         SidebarV2UserComponent,
                         TranslatePipe,
-                    ], template: "@let _userInfo = userInfo();\n@let _sidebar = sidebar();\n@let _isShowSidebar = isShowSidebar();\n@let _searchText = searchText();\n@let _currentPath = currentPath();\n@let _activeMenuPath = activeMenuPath();\n@let _idMenuGroupActive = idMenuGroupActive();\n@let _pinnedMenuGroup = pinnedMenuGroup();\n\n@if (_userInfo && _sidebar) {\n  <div\n    class=\"wrapper\"\n    [style.--sidebar-accent]=\"_sidebar.brandColor || 'var(--sd-primary, #005cbb)'\"\n    [style.height]=\"isMobileOrTablet ? screenHeight + 'px' : '100%'\">\n    <div class=\"c-header\">\n      @if (_sidebar.logoUrl) {\n        <div class=\"c-logo\">\n          <a href=\"javascript:;\" (click)=\"openHomePage()\">\n            <img alt=\"logo\" [src]=\"_sidebar.logoUrl\" />\n          </a>\n        </div>\n      }\n      <div class=\"c-title-menu-group\" [class.d-none]=\"!_isShowSidebar\">\n        <span>{{ titleMenuGroup() || _sidebar.defaultTitle || 'Back Office' }}</span>\n      </div>\n    </div>\n    <div class=\"c-body\">\n      <div class=\"c-menu\">\n        <div class=\"c-menu-group\">\n          @if (_sidebar?.pin?.enabled && _pinnedMenuGroup.children?.length) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, _pinnedMenuGroup)\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, _pinnedMenuGroup)\"\n              (click)=\"expandPinnedGroup()\"\n              [matTooltip]=\"'\u0110\u00E3 ghim'\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              <mat-icon\n                fontSet=\"material-icons-outlined\"\n                class=\"c-menu-group-icon\"\n                [ngStyle]=\"{\n                  color: isPinnedMenuGroupActive()\n                    ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)'\n                    : 'var(--sd-text-secondary, #6b7280)',\n                  backgroundColor: isPinnedMenuGroupActive()\n                    ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)'\n                    : 'transparent',\n                }\">\n                push_pin\n              </mat-icon>\n            </button>\n          }\n          @for (nodeMenuGroup of menus(); track nodeMenuGroup.id) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, nodeMenuGroup)\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, nodeMenuGroup)\"\n              (click)=\"expandMenuGroup(nodeMenuGroup)\"\n              [matTooltip]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              @if (nodeMenuGroup.iconUrl) {\n                <span\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    backgroundColor:\n                      _idMenuGroupActive === nodeMenuGroup?.id\n                        ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)'\n                        : 'transparent',\n                  }\">\n                  <img width=\"24px\" height=\"24px\" [src]=\"nodeMenuGroup.iconUrl\" [alt]=\"nodeMenuGroup.title\" />\n                </span>\n              } @else {\n                <mat-icon\n                  fontSet=\"material-icons-outlined\"\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    color:\n                      _idMenuGroupActive === nodeMenuGroup?.id\n                        ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)'\n                        : 'var(--sd-text-secondary, #6b7280)',\n                    backgroundColor:\n                      _idMenuGroupActive === nodeMenuGroup?.id\n                        ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)'\n                        : 'transparent',\n                  }\">\n                  {{ nodeMenuGroup.icon || 'widgets' }}\n                </mat-icon>\n              }\n            </button>\n          }\n        </div>\n        <div class=\"c-menu-tree\" [class.d-none]=\"!_isShowSidebar\" [attr.inert]=\"!_isShowSidebar ? '' : null\">\n          @if (totalMenuInMenusByGroup() >= 10) {\n            <div class=\"c-menu-tree-search\">\n              @let _searchLabel = 'core.module.layout.sidebar.search' | translate;\n              <div class=\"c-menu-search-field\">\n                <mat-icon class=\"c-menu-search-icon\" fontSet=\"material-icons-outlined\" aria-hidden=\"true\">search</mat-icon>\n                <input\n                  #menuSearch\n                  class=\"c-menu-search-input\"\n                  type=\"search\"\n                  autocomplete=\"off\"\n                  [attr.aria-label]=\"_searchLabel\"\n                  [placeholder]=\"_searchLabel\"\n                  [ngModel]=\"_searchText\"\n                  [ngModelOptions]=\"{ standalone: true }\"\n                  (ngModelChange)=\"onFilterSearchText($event)\" />\n                @if (_searchText) {\n                  <button\n                    type=\"button\"\n                    class=\"c-menu-search-clear\"\n                    [attr.aria-label]=\"'core.module.layout.sidebar.clear-search' | translate\"\n                    (click)=\"onClearSearchText(); menuSearch.focus()\">\n                    <mat-icon fontSet=\"material-icons-outlined\" aria-hidden=\"true\">close</mat-icon>\n                  </button>\n                }\n              </div>\n            </div>\n          }\n          <div class=\"c-menu-tree-container\">\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\n              <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\n                <li\n                  class=\"c-menu-node\"\n                  [class.is-active]=\"_currentPath | menuFocus: node : _activeMenuPath\"\n                  (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                  (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\n                  [ngStyle]=\"{\n                    backgroundColor:\n                      (_currentPath | menuFocus: node : _activeMenuPath)\n                        ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)'\n                        : 'transparent',\n                  }\">\n                  <div aria-hidden=\"true\" class=\"c-menu-node-description\" (click)=\"navigate(node)\" [class.d-none]=\"!_isShowSidebar\">\n                    <div\n                      class=\"c-menu-node-description-content\"\n                      [ngStyle]=\"{\n                        color:\n                          (_currentPath | menuFocus: node : _activeMenuPath)\n                            ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)'\n                            : 'var(--sd-text, #252c38)',\n                      }\">\n                      @if (node.iconUrl) {\n                        <img class=\"c-menu-node-icon\" [src]=\"node.iconUrl\" alt=\"\" />\n                      } @else if (node.icon) {\n                        <mat-icon class=\"c-menu-node-icon\" fontSet=\"material-icons-outlined\">{{ node.icon }}</mat-icon>\n                      }\n                      <span class=\"c-menu-node-label\" [innerHTML]=\"node.title | highLightSearch: _searchText | sdSafeHtml\"></span>\n                    </div>\n\n                    @if (_sidebar?.pin?.enabled) {\n                      <mat-icon\n                        class=\"c-menu-node-description-icon-pin\"\n                        [fontSet]=\"isPinnedNode(node) ? 'material-icons' : 'material-icons-outlined'\"\n                        [style.opacity]=\"isPinnedNode(node) || isHoveredNode(node) ? '1' : null\"\n                        [style.color]=\"\n                          isPinnedNode(node) || isHoveredNode(node) ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)' : null\n                        \"\n                        (click)=\"onTogglePin($event, node)\"\n                        >push_pin\n                      </mat-icon>\n                    }\n                  </div>\n                </li>\n              </mat-nested-tree-node>\n\n              <mat-nested-tree-node\n                *matTreeNodeDef=\"let node; when: hasChild\"\n                aria-hidden=\"true\"\n                [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: _currentPath | menuFocus: node : _activeMenuPath }\">\n                <li>\n                  <div\n                    class=\"c-menu-node\"\n                    [class.is-ancestor]=\"_currentPath | menuFocus: node : _activeMenuPath\"\n                    (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                    (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\n                    <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\n                      <div [class.d-none]=\"!_isShowSidebar\" class=\"c-menu-node-description\" (click)=\"onToggleMenuNode(node)\">\n                        <div class=\"c-menu-node-description-content\">\n                          @if (node.iconUrl) {\n                            <img class=\"c-menu-node-icon\" [src]=\"node.iconUrl\" alt=\"\" />\n                          } @else if (node.icon) {\n                            <mat-icon class=\"c-menu-node-icon\" fontSet=\"material-icons-outlined\">{{ node.icon }}</mat-icon>\n                          }\n                          <span class=\"c-menu-node-label\" [innerHTML]=\"node.title | highLightSearch: _searchText | sdSafeHtml\"></span>\n                        </div>\n                        <mat-icon fontSet=\"material-icons-outlined\" class=\"c-menu-node-description-icon-expand\">\n                          {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n                        </mat-icon>\n                      </div>\n                    </div>\n                  </div>\n                  <ul class=\"c-menu-node-group\" [class.d-none]=\"!treeControl.isExpanded(node)\">\n                    <ng-container matTreeNodeOutlet></ng-container>\n                  </ul>\n                </li>\n              </mat-nested-tree-node>\n            </mat-tree>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"c-footer\">\n      <sd-sidebar-v2-user\n        [userInfo]=\"_userInfo\"\n        [isMobileOrTablet]=\"isMobileOrTablet\"\n        (menuOpened)=\"onUserMenuOpened()\"\n        (menuClosed)=\"onUserMenuClosed()\"\n        [isShowSidebar]=\"_isShowSidebar\"\n        (toggleMenuLock)=\"toggleMenuLock($event)\">\n      </sd-sidebar-v2-user>\n    </div>\n  </div>\n}\n", styles: ["::ng-deep .mat-mdc-tooltip-panel:has(.c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140){pointer-events:none}:host{display:block;height:100%}.wrapper{--sidebar-surface: var(--sd-white, #fff);--sidebar-rail: color-mix(in srgb, var(--sd-surface-muted, #e7e8ed) 35%, var(--sidebar-surface));--sidebar-line: color-mix(in srgb, var(--sd-border, #c4c6d0) 45%, var(--sidebar-surface));--sidebar-ink: var(--sd-text, #252c38);--sidebar-muted: var(--sd-text-secondary, #6b7280);position:relative;display:flex;flex-direction:column;width:min(304px,100vw);color:var(--sidebar-ink);background:linear-gradient(to right,var(--sidebar-rail) 56px,var(--sidebar-surface) 56px)}.wrapper,.wrapper *{box-sizing:border-box}.wrapper:before{content:\"\";position:absolute;inset:0 auto 0 55px;width:1px;background:var(--sidebar-line);pointer-events:none}.c-header{flex:0 0 auto;display:grid;grid-template-columns:56px minmax(0,1fr);min-height:42px}.c-logo{grid-column:1;display:grid;place-items:center;height:42px}.c-logo a{display:grid;place-items:center;width:38px;height:40px;border-radius:9px;color:var(--sidebar-muted)}.c-logo img{width:30px;height:30px;object-fit:contain}.c-title-menu-group{grid-column:2;display:flex;align-items:center;min-width:0;padding:10px 14px 12px;color:var(--sidebar-ink);font-size:16px;font-weight:700;line-height:22px;letter-spacing:-.2px;overflow-wrap:anywhere}.c-body{flex:1;min-height:0;overflow:hidden}.c-menu{display:flex;height:100%}.c-menu-group{display:flex;flex:0 0 56px;flex-direction:column;align-items:center;gap:10px;width:56px;min-height:0;margin-bottom:86px;padding:5px 0 8px;overflow-y:auto;scrollbar-width:none}.c-menu-group>button{flex:0 0 auto;border-radius:9px}.c-menu-group .c-menu-group-icon{display:flex;align-items:center;justify-content:center;width:38px;height:40px;min-height:40px;border-radius:9px;font-size:22px}.c-menu-group .c-menu-group-icon img{width:22px;height:22px;object-fit:contain}.c-menu-tree{display:flex;flex:1;flex-direction:column;min-width:0;min-height:0}.c-menu-tree-search{flex:0 0 auto;padding:0 14px 12px;border-bottom:1px solid var(--sidebar-line)}.c-menu-search-field{display:flex;align-items:center;gap:8px;height:36px;padding:0 9px;border:1px solid var(--sidebar-line);border-radius:7px;background:var(--sidebar-rail);color:var(--sidebar-muted)}.c-menu-search-field:hover{border-color:color-mix(in srgb,var(--sidebar-muted) 35%,var(--sidebar-surface))}.c-menu-search-field:focus-within{border-color:color-mix(in srgb,var(--sidebar-accent, var(--sd-primary, #005cbb)) 75%,var(--sidebar-surface));background:var(--sidebar-surface)}.c-menu-search-icon{flex:0 0 18px;width:18px;height:18px;font-size:18px;pointer-events:none}.c-menu-search-input{flex:1 1 0;width:0;min-width:0;height:100%;margin:0;padding:0;border:0;border-radius:0;outline:none;box-shadow:none;appearance:none;background:transparent;color:var(--sidebar-ink);font:inherit;font-size:13px;line-height:20px}.c-menu-search-input:focus,.c-menu-search-input:focus-visible{outline:none;box-shadow:none}.c-menu-search-input::placeholder{color:var(--sidebar-muted);opacity:1}.c-menu-search-input::-webkit-search-decoration,.c-menu-search-input::-webkit-search-cancel-button{appearance:none}.c-menu-search-clear{display:grid;flex:0 0 24px;place-items:center;width:24px;min-width:24px;height:24px;margin:0;padding:0;border:0;border-radius:4px;background:transparent;color:var(--sidebar-muted);cursor:pointer}.c-menu-search-clear sd-icon,.c-menu-search-clear mat-icon{width:18px;height:18px;font-size:18px}.c-menu-search-clear:hover{background:color-mix(in srgb,var(--sidebar-ink) 7%,transparent);color:var(--sidebar-ink)}.c-menu-search-clear:focus-visible{outline:1px solid var(--sidebar-accent, var(--sd-primary, #005cbb));outline-offset:1px}.c-menu-tree-container{flex:1;min-height:0;padding:10px 8px 14px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--sidebar-line) transparent;overscroll-behavior:contain}.c-menu-node{position:relative;display:flex;align-items:center;width:100%;min-height:40px;margin:2px 0;padding:0;border-radius:7px;cursor:pointer;color:var(--sidebar-ink);font-size:13px;line-height:1.4}.c-menu-node-description{display:flex;flex:1;align-items:center;gap:6px;width:100%;min-width:0;min-height:40px;padding:0;border:0;border-radius:inherit;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.c-menu-node-description-content{display:flex;flex:1;align-items:center;align-self:stretch;gap:9px;min-width:0;padding:8px;color:inherit;font:inherit;font-weight:500;text-decoration:none}.c-menu-node-label{flex:1;min-width:0;white-space:normal;overflow-wrap:anywhere}.c-menu-node-icon{flex:0 0 20px;width:20px;height:20px;font-size:20px;object-fit:contain;color:var(--sidebar-muted)}.c-menu-node-description-icon-expand,.c-menu-node-description-icon-pin{display:flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:24px;margin-right:6px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--sidebar-muted);font-size:18px;cursor:pointer}.c-menu-node-description-icon-pin{opacity:0}.c-menu-node-description-icon-pin:focus-visible{opacity:1!important}.c-menu-node.is-ancestor{color:var(--sidebar-accent)}.c-menu-node.is-ancestor .c-menu-node-description-content,.c-menu-node.is-ancestor .c-menu-node-icon,.c-menu-node.is-ancestor .c-menu-node-description-icon-expand{color:inherit}.c-menu-node.is-active{color:var(--sidebar-accent)}.c-menu-node.is-active .c-menu-node-icon{color:inherit}.c-menu-node.is-active:before{content:\"\";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:2px;background:var(--sidebar-accent)}.c-menu-node-group{position:relative;margin:0 0 7px 19px;padding:1px 0 1px 16px;border-left:1px solid var(--sidebar-line)}.c-menu-node-group .c-menu-node{min-height:34px;border-radius:6px}.c-menu-node-group .c-menu-node-description-content{padding:7px 8px;font-weight:400}.c-menu-node-group .c-menu-node-description{min-height:34px}.c-menu-node-group .c-menu-node-icon{display:none}.c-menu-node-group .c-menu-node.is-active:before{left:-18px}.c-menu-node-group .c-menu-node.is-active .c-menu-node-description-content,.c-menu-node-group .c-menu-node.is-ancestor .c-menu-node-description-content{font-weight:500}.c-menu-node-group .c-menu-node-group{margin-left:8px;padding-left:7px}.c-menu-node-group .c-menu-node-group .c-menu-node.is-active:before{left:-9px}.c-footer{position:absolute;bottom:0;left:0;width:56px;height:86px;background:var(--sidebar-rail)}a:focus-visible,button:focus-visible{outline:2px solid var(--sidebar-accent, var(--sd-primary, #005cbb));outline-offset:-2px}@media(pointer:coarse){.c-menu-node,.c-menu-node-group .c-menu-node,.c-menu-node-description,.c-menu-node-group .c-menu-node-description{min-height:44px}}@media(prefers-reduced-motion:reduce){.c-menu-group-icon,.c-menu-node,.c-menu-node *{transition:none!important}}ul,li{margin-top:0;margin-bottom:0;list-style:none}\n"] }]
+                    ], template: "@let _userInfo = userInfo();\n@let _sidebar = sidebar();\n@let _isShowSidebar = isShowSidebar();\n@let _searchText = searchText();\n@let _currentPath = currentPath();\n@let _activeMenuPath = activeMenuPath();\n@let _idMenuGroupActive = idMenuGroupActive();\n@let _pinnedMenuGroup = pinnedMenuGroup();\n\n@if (_userInfo && _sidebar) {\n  <div\n    class=\"wrapper\"\n    [style.--sidebar-accent]=\"_sidebar.brandColor || 'var(--sd-primary, #005cbb)'\"\n    [style.height]=\"isMobileOrTablet ? screenHeight + 'px' : '100%'\">\n    <div class=\"c-header\">\n      @if (_sidebar.logoUrl) {\n        <div class=\"c-logo\">\n          <a href=\"javascript:;\" (click)=\"openHomePage()\">\n            <img alt=\"logo\" [src]=\"_sidebar.logoUrl\" />\n          </a>\n        </div>\n      }\n      <div class=\"c-title-menu-group\" [class.d-none]=\"!_isShowSidebar\">\n        <span>{{ titleMenuGroup() || _sidebar.defaultTitle || 'Back Office' }}</span>\n      </div>\n    </div>\n    <div class=\"c-body\">\n      <div class=\"c-menu\">\n        <div class=\"c-menu-group\">\n          @if (_sidebar?.pin?.enabled && _pinnedMenuGroup.children?.length) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, _pinnedMenuGroup)\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, _pinnedMenuGroup)\"\n              (click)=\"expandPinnedGroup()\"\n              [matTooltip]=\"'\u0110\u00E3 ghim'\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              <mat-icon\n                fontSet=\"material-icons-outlined\"\n                class=\"c-menu-group-icon\"\n                [ngStyle]=\"{\n                  color: isPinnedMenuGroupActive()\n                    ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)'\n                    : 'var(--sd-text-secondary, #6b7280)',\n                  backgroundColor: isPinnedMenuGroupActive()\n                    ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)'\n                    : 'transparent',\n                }\">\n                push_pin\n              </mat-icon>\n            </button>\n          }\n          @for (nodeMenuGroup of menus(); track nodeMenuGroup.id) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, nodeMenuGroup)\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, nodeMenuGroup)\"\n              (click)=\"expandMenuGroup(nodeMenuGroup)\"\n              [matTooltip]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              @if (nodeMenuGroup.iconUrl) {\n                <span\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    backgroundColor:\n                      _idMenuGroupActive === nodeMenuGroup?.id\n                        ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)'\n                        : 'transparent',\n                  }\">\n                  <img width=\"24px\" height=\"24px\" [src]=\"nodeMenuGroup.iconUrl\" [alt]=\"nodeMenuGroup.title\" />\n                </span>\n              } @else {\n                <mat-icon\n                  fontSet=\"material-icons-outlined\"\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    color:\n                      _idMenuGroupActive === nodeMenuGroup?.id\n                        ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)'\n                        : 'var(--sd-text-secondary, #6b7280)',\n                    backgroundColor:\n                      _idMenuGroupActive === nodeMenuGroup?.id\n                        ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)'\n                        : 'transparent',\n                  }\">\n                  {{ nodeMenuGroup.icon || 'widgets' }}\n                </mat-icon>\n              }\n            </button>\n          }\n        </div>\n        <div class=\"c-menu-tree\" [class.d-none]=\"!_isShowSidebar\" [attr.inert]=\"!_isShowSidebar ? '' : null\">\n          @if (totalMenuInMenusByGroup() >= 10) {\n            <div class=\"c-menu-tree-search\">\n              @let _searchLabel = 'core.module.layout.sidebar.search' | translate;\n              <div class=\"c-menu-search-field\">\n                <mat-icon class=\"c-menu-search-icon\" fontSet=\"material-icons-outlined\" aria-hidden=\"true\">search</mat-icon>\n                <input\n                  #menuSearch\n                  class=\"c-menu-search-input\"\n                  type=\"search\"\n                  autocomplete=\"off\"\n                  [attr.aria-label]=\"_searchLabel\"\n                  [placeholder]=\"_searchLabel\"\n                  [ngModel]=\"_searchText\"\n                  [ngModelOptions]=\"{ standalone: true }\"\n                  (ngModelChange)=\"onFilterSearchText($event)\" />\n                @if (_searchText) {\n                  <button\n                    type=\"button\"\n                    class=\"c-menu-search-clear\"\n                    [attr.aria-label]=\"'core.module.layout.sidebar.clear-search' | translate\"\n                    (click)=\"onClearSearchText(); menuSearch.focus()\">\n                    <mat-icon fontSet=\"material-icons-outlined\" aria-hidden=\"true\">close</mat-icon>\n                  </button>\n                }\n              </div>\n            </div>\n          }\n          <div class=\"c-menu-tree-container\">\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\n              <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\n                <li\n                  class=\"c-menu-node\"\n                  [class.is-active]=\"_currentPath | menuFocus: node : _activeMenuPath\"\n                  (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                  (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\n                  [ngStyle]=\"{\n                    backgroundColor:\n                      (_currentPath | menuFocus: node : _activeMenuPath)\n                        ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)'\n                        : 'transparent',\n                  }\">\n                  <div\n                    class=\"c-menu-node-description\"\n                    role=\"button\"\n                    tabindex=\"0\"\n                    (keydown.enter)=\"navigate(node)\"\n                    (keydown.space)=\"$event.preventDefault(); navigate(node)\"\n                    (click)=\"navigate(node)\"\n                    [class.d-none]=\"!_isShowSidebar\">\n                    <div\n                      class=\"c-menu-node-description-content\"\n                      [ngStyle]=\"{\n                        color:\n                          (_currentPath | menuFocus: node : _activeMenuPath)\n                            ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)'\n                            : 'var(--sd-text, #252c38)',\n                      }\">\n                      @if (node.iconUrl) {\n                        <img class=\"c-menu-node-icon\" [src]=\"node.iconUrl\" alt=\"\" />\n                      } @else if (node.icon) {\n                        <mat-icon class=\"c-menu-node-icon\" fontSet=\"material-icons-outlined\">{{ node.icon }}</mat-icon>\n                      }\n                      <span class=\"c-menu-node-label\" [innerHTML]=\"node.title | highLightSearch: _searchText | sdSafeHtml\"></span>\n                    </div>\n\n                    @if (_sidebar?.pin?.enabled) {\n                      <mat-icon\n                        class=\"c-menu-node-description-icon-pin\"\n                        [fontSet]=\"isPinnedNode(node) ? 'material-icons' : 'material-icons-outlined'\"\n                        [style.opacity]=\"isPinnedNode(node) || isHoveredNode(node) ? '1' : null\"\n                        [style.color]=\"\n                          isPinnedNode(node) || isHoveredNode(node) ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)' : null\n                        \"\n                        (click)=\"onTogglePin($event, node)\"\n                        >push_pin\n                      </mat-icon>\n                    }\n                  </div>\n                </li>\n              </mat-nested-tree-node>\n\n              <mat-nested-tree-node\n                *matTreeNodeDef=\"let node; when: hasChild\"\n                [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: _currentPath | menuFocus: node : _activeMenuPath }\">\n                <li>\n                  <div\n                    class=\"c-menu-node\"\n                    [class.is-ancestor]=\"_currentPath | menuFocus: node : _activeMenuPath\"\n                    (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                    (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\n                    <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\n                      <div\n                        [class.d-none]=\"!_isShowSidebar\"\n                        class=\"c-menu-node-description\"\n                        role=\"button\"\n                        tabindex=\"0\"\n                        [attr.aria-expanded]=\"treeControl.isExpanded(node)\"\n                        (keydown.enter)=\"onToggleMenuNode(node)\"\n                        (keydown.space)=\"$event.preventDefault(); onToggleMenuNode(node)\"\n                        (click)=\"onToggleMenuNode(node)\">\n                        <div class=\"c-menu-node-description-content\">\n                          @if (node.iconUrl) {\n                            <img class=\"c-menu-node-icon\" [src]=\"node.iconUrl\" alt=\"\" />\n                          } @else if (node.icon) {\n                            <mat-icon class=\"c-menu-node-icon\" fontSet=\"material-icons-outlined\">{{ node.icon }}</mat-icon>\n                          }\n                          <span class=\"c-menu-node-label\" [innerHTML]=\"node.title | highLightSearch: _searchText | sdSafeHtml\"></span>\n                        </div>\n                        <mat-icon fontSet=\"material-icons-outlined\" class=\"c-menu-node-description-icon-expand\">\n                          {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n                        </mat-icon>\n                      </div>\n                    </div>\n                  </div>\n                  <ul class=\"c-menu-node-group\" [class.d-none]=\"!treeControl.isExpanded(node)\">\n                    <ng-container matTreeNodeOutlet></ng-container>\n                  </ul>\n                </li>\n              </mat-nested-tree-node>\n            </mat-tree>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"c-footer\">\n      <sd-sidebar-v2-user\n        [userInfo]=\"_userInfo\"\n        [isMobileOrTablet]=\"isMobileOrTablet\"\n        (menuOpened)=\"onUserMenuOpened()\"\n        (menuClosed)=\"onUserMenuClosed()\"\n        [isShowSidebar]=\"_isShowSidebar\"\n        (toggleMenuLock)=\"toggleMenuLock($event)\">\n      </sd-sidebar-v2-user>\n    </div>\n  </div>\n}\n", styles: ["::ng-deep .mat-mdc-tooltip-panel:has(.c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140){pointer-events:none}:host{display:block;height:100%}.wrapper{--sidebar-surface: var(--sd-white, #fff);--sidebar-rail: color-mix(in srgb, var(--sd-surface-muted, #e7e8ed) 35%, var(--sidebar-surface));--sidebar-line: color-mix(in srgb, var(--sd-border, #c4c6d0) 45%, var(--sidebar-surface));--sidebar-ink: var(--sd-text, #252c38);--sidebar-muted: var(--sd-text-secondary, #6b7280);position:relative;display:flex;flex-direction:column;width:min(304px,100vw);color:var(--sidebar-ink);background:linear-gradient(to right,var(--sidebar-rail) 56px,var(--sidebar-surface) 56px)}.wrapper,.wrapper *{box-sizing:border-box}.wrapper:before{content:\"\";position:absolute;inset:0 auto 0 55px;width:1px;background:var(--sidebar-line);pointer-events:none}.c-header{flex:0 0 auto;display:grid;grid-template-columns:56px minmax(0,1fr);min-height:42px}.c-logo{grid-column:1;display:grid;place-items:center;height:42px}.c-logo a{display:grid;place-items:center;width:38px;height:40px;border-radius:9px;color:var(--sidebar-muted)}.c-logo img{width:30px;height:30px;object-fit:contain}.c-title-menu-group{grid-column:2;display:flex;align-items:center;min-width:0;padding:10px 14px 12px;color:var(--sidebar-ink);font-size:16px;font-weight:700;line-height:22px;letter-spacing:-.2px;overflow-wrap:anywhere}.c-body{flex:1;min-height:0;overflow:hidden}.c-menu{display:flex;height:100%}.c-menu-group{display:flex;flex:0 0 56px;flex-direction:column;align-items:center;gap:10px;width:56px;min-height:0;margin-bottom:86px;padding:5px 0 8px;overflow-y:auto;scrollbar-width:none}.c-menu-group>button{flex:0 0 auto;border-radius:9px}.c-menu-group .c-menu-group-icon{display:flex;align-items:center;justify-content:center;width:38px;height:40px;min-height:40px;border-radius:9px;font-size:22px}.c-menu-group .c-menu-group-icon img{width:22px;height:22px;object-fit:contain}.c-menu-tree{display:flex;flex:1;flex-direction:column;min-width:0;min-height:0}.c-menu-tree-search{flex:0 0 auto;padding:0 14px 12px;border-bottom:1px solid var(--sidebar-line)}.c-menu-search-field{display:flex;align-items:center;gap:8px;height:36px;padding:0 9px;border:1px solid var(--sidebar-line);border-radius:7px;background:var(--sidebar-rail);color:var(--sidebar-muted)}.c-menu-search-field:hover{border-color:color-mix(in srgb,var(--sidebar-muted) 35%,var(--sidebar-surface))}.c-menu-search-field:focus-within{border-color:color-mix(in srgb,var(--sidebar-accent, var(--sd-primary, #005cbb)) 75%,var(--sidebar-surface));background:var(--sidebar-surface)}.c-menu-search-icon{flex:0 0 18px;width:18px;height:18px;font-size:18px;pointer-events:none}.c-menu-search-input{flex:1 1 0;width:0;min-width:0;height:100%;margin:0;padding:0;border:0;border-radius:0;outline:none;box-shadow:none;appearance:none;background:transparent;color:var(--sidebar-ink);font:inherit;font-size:13px;line-height:20px}.c-menu-search-input:focus,.c-menu-search-input:focus-visible{outline:none;box-shadow:none}.c-menu-search-input::placeholder{color:var(--sidebar-muted);opacity:1}.c-menu-search-input::-webkit-search-decoration,.c-menu-search-input::-webkit-search-cancel-button{appearance:none}.c-menu-search-clear{display:grid;flex:0 0 24px;place-items:center;width:24px;min-width:24px;height:24px;margin:0;padding:0;border:0;border-radius:4px;background:transparent;color:var(--sidebar-muted);cursor:pointer}.c-menu-search-clear sd-icon,.c-menu-search-clear mat-icon{width:18px;height:18px;font-size:18px}.c-menu-search-clear:hover{background:color-mix(in srgb,var(--sidebar-ink) 7%,transparent);color:var(--sidebar-ink)}.c-menu-search-clear:focus-visible{outline:1px solid var(--sidebar-accent, var(--sd-primary, #005cbb));outline-offset:1px}.c-menu-tree-container{flex:1;min-height:0;padding:10px 8px 14px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--sidebar-line) transparent;overscroll-behavior:contain}.c-menu-node{position:relative;display:flex;align-items:center;width:100%;min-height:40px;margin:2px 0;padding:0;border-radius:7px;cursor:pointer;color:var(--sidebar-ink);font-size:13px;line-height:1.4}.c-menu-node-description{display:flex;flex:1;align-items:center;gap:6px;width:100%;min-width:0;min-height:40px;padding:0;border:0;border-radius:inherit;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.c-menu-node-description-content{display:flex;flex:1;align-items:center;align-self:stretch;gap:9px;min-width:0;padding:8px;color:inherit;font:inherit;font-weight:500;text-decoration:none}.c-menu-node-label{flex:1;min-width:0;white-space:normal;overflow-wrap:anywhere}.c-menu-node-icon{flex:0 0 20px;width:20px;height:20px;font-size:20px;object-fit:contain;color:var(--sidebar-muted)}.c-menu-node-description-icon-expand,.c-menu-node-description-icon-pin{display:flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:24px;margin-right:6px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--sidebar-muted);font-size:18px;cursor:pointer}.c-menu-node-description-icon-pin{opacity:0}.c-menu-node-description-icon-pin:focus-visible{opacity:1!important}.c-menu-node.is-ancestor{color:var(--sidebar-accent)}.c-menu-node.is-ancestor .c-menu-node-description-content,.c-menu-node.is-ancestor .c-menu-node-icon,.c-menu-node.is-ancestor .c-menu-node-description-icon-expand{color:inherit}.c-menu-node.is-active{color:var(--sidebar-accent)}.c-menu-node.is-active .c-menu-node-icon{color:inherit}.c-menu-node.is-active:before{content:\"\";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:2px;background:var(--sidebar-accent)}.c-menu-node-group{position:relative;margin:0 0 7px 19px;padding:1px 0 1px 16px;border-left:1px solid var(--sidebar-line)}.c-menu-node-group .c-menu-node{min-height:34px;border-radius:6px}.c-menu-node-group .c-menu-node-description-content{padding:7px 8px;font-weight:400}.c-menu-node-group .c-menu-node-description{min-height:34px}.c-menu-node-group .c-menu-node-icon{display:none}.c-menu-node-group .c-menu-node.is-active:before{left:-18px}.c-menu-node-group .c-menu-node.is-active .c-menu-node-description-content,.c-menu-node-group .c-menu-node.is-ancestor .c-menu-node-description-content{font-weight:500}.c-menu-node-group .c-menu-node-group{margin-left:8px;padding-left:7px}.c-menu-node-group .c-menu-node-group .c-menu-node.is-active:before{left:-9px}.c-footer{position:absolute;bottom:0;left:0;width:56px;height:86px;background:var(--sidebar-rail)}a:focus-visible,button:focus-visible{outline:2px solid var(--sidebar-accent, var(--sd-primary, #005cbb));outline-offset:-2px}@media(pointer:coarse){.c-menu-node,.c-menu-node-group .c-menu-node,.c-menu-node-description,.c-menu-node-group .c-menu-node-description{min-height:44px}}@media(prefers-reduced-motion:reduce){.c-menu-group-icon,.c-menu-node,.c-menu-node *{transition:none!important}}ul,li{margin-top:0;margin-bottom:0;list-style:none}\n"] }]
         }], ctorParameters: () => [] });
 class SidebarV2Component {