npm - @sd-angular/core - Versions diffs - 19.0.0-beta.101 → 19.0.0-beta.103 - Mend

@sd-angular/core 19.0.0-beta.101 → 19.0.0-beta.103

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 (68) hide show

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

@@ -893,7 +893,7 @@ class SidebarComponent {
         return count;
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SidebarComponent, isStandalone: true, selector: "sidebar", inputs: { isShowSidebar: { classPropertyName: "isShowSidebar", publicName: "isShowSidebar", isSignal: true, isRequired: true, transformFunction: null }, menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: true, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { expandSideBar: "expandSideBar", popupUserMenuClosed: "popupUserMenuClosed", popupUserMenuOpened: "popupUserMenuOpened", showSideBar: "showSideBar" }, ngImport: i0, template: "@let _userInfo = userInfo();\r\n@let _sidebar = sidebar();\r\n\r\n@if (_userInfo && _sidebar) {\r\n  <div class=\"wrapper\" [style.height]=\"isMobileOrTablet ? screenHeight + 'px' : '100%'\">\r\n    <div class=\"c-header\">\r\n      @if (_sidebar.logoUrl) {\r\n        <div class=\"c-logo\">\r\n          <a href=\"javascript:;\" (click)=\"openHomePage()\">\r\n            <img alt=\"logo\" [src]=\"_sidebar.logoUrl\" />\r\n          </a>\r\n        </div>\r\n      }\r\n      <div class=\"c-title-menu-group\">\r\n        <span>{{ titleMenuGroup() || _sidebar.defaultTitle || 'Back Office' }}</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"c-body\">\r\n      <div class=\"c-menu\">\r\n        <div class=\"c-menu-group\">\r\n          @if (_sidebar?.pin?.enabled && pinnedMenuGroup()?.children?.length) {\r\n            <button\r\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, pinnedMenuGroup())\"\r\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, pinnedMenuGroup())\"\r\n              (click)=\"expandPinnedGroup()\"\r\n              [matTooltip]=\"'\u0110\u00E3 ghim'\"\r\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\r\n              [matTooltipPosition]=\"'right'\"\r\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\r\n              <mat-icon\r\n                class=\"c-menu-group-icon\"\r\n                [ngStyle]=\"{\r\n                  color: isPinnedMenuGroupActive() ? _sidebar.brandColor || '#2962FF' : '#8C8C8C',\r\n                  backgroundColor: isPinnedMenuGroupActive() ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                }\">\r\n                push_pin\r\n              </mat-icon>\r\n            </button>\r\n          }\r\n          @for (nodeMenuGroup of menus(); track nodeMenuGroup.id) {\r\n            <button\r\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, nodeMenuGroup)\"\r\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, nodeMenuGroup)\"\r\n              (click)=\"expandMenuGroup(nodeMenuGroup)\"\r\n              [matTooltip]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\r\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\r\n              [matTooltipPosition]=\"'right'\"\r\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\r\n              @if (nodeMenuGroup.iconUrl) {\r\n                <span\r\n                  class=\"c-menu-group-icon\"\r\n                  [ngStyle]=\"{\r\n                    backgroundColor: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                  }\">\r\n                  <img width=\"24px\" height=\"24px\" [src]=\"nodeMenuGroup.iconUrl\" [alt]=\"nodeMenuGroup.title\" />\r\n                </span>\r\n              } @else {\r\n                <mat-icon\r\n                  class=\"c-menu-group-icon\"\r\n                  [ngStyle]=\"{\r\n                    color: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandColor || '#2962FF' : '#8C8C8C',\r\n                    backgroundColor: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                  }\">\r\n                  {{ nodeMenuGroup.icon || 'widgets' }}\r\n                </mat-icon>\r\n              }\r\n            </button>\r\n          }\r\n        </div>\r\n        <div class=\"c-menu-tree\">\r\n          @if (totalMenuInMenusByGroup() >= 10) {\r\n            <div style=\"padding: 0px 4px\" class=\"c-menu-tree-search\">\r\n              <sd-input size=\"sm\" [placeholder]=\"'core.module.layout.sidebar.search' | translate\" [model]=\"searchText()\" (sdChange)=\"onFilterSearchText($event)\">\r\n                <ng-template sdSuffixDef>\r\n                  @if (searchText()) {\r\n                    <mat-icon class=\"c-search-prefix-icon cancel\" (click)=\"onClearSearchText()\">cancel</mat-icon>\r\n                  } @else {\r\n                    <mat-icon class=\"c-search-prefix-icon search\">search</mat-icon>\r\n                  }\r\n                </ng-template>\r\n              </sd-input>\r\n            </div>\r\n          }\r\n          <div class=\"c-menu-tree-container\">\r\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\r\n              <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\r\n                <li\r\n                  class=\"c-menu-node\"\r\n                  (mouseenter)=\"onMouseOverMenuNode($event, node)\"\r\n                  (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\r\n                  [ngStyle]=\"{\r\n                    backgroundColor: (currentPath() | menuFocus: node) ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                  }\">\r\n                  <div aria-hidden=\"true\" class=\"c-menu-node-description\" (click)=\"navigate(node)\" [class.d-none]=\"!isShowSidebar()\">\r\n                    <div\r\n                      class=\"c-menu-node-description-content\"\r\n                      [ngStyle]=\"{\r\n                        color: (currentPath() | menuFocus: node) ? _sidebar.brandColor || '#2962FF' : '#1F1F1F',\r\n                      }\"\r\n                      [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\r\n\r\n                    @if (_sidebar?.pin?.enabled) {\r\n                      <mat-icon\r\n                        class=\"c-menu-node-description-icon-pin\"\r\n                        [fontSet]=\"isPinnedNode(node) ? 'material-icons' : 'material-icons-outlined'\"\r\n                        [style.opacity]=\"isPinnedNode(node) || isHoveredNode(node) ? '1' : null\"\r\n                        [style.color]=\"isPinnedNode(node) || isHoveredNode(node) ? sidebar()?.brandColor || '#2962FF' : null\"\r\n                        (click)=\"onTogglePin($event, node)\"\r\n                        >push_pin\r\n                      </mat-icon>\r\n                    }\r\n                  </div>\r\n                </li>\r\n              </mat-nested-tree-node>\r\n\r\n              <mat-nested-tree-node\r\n                *matTreeNodeDef=\"let node; when: hasChild\"\r\n                aria-hidden=\"true\"\r\n                [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath() | menuFocus: node }\">\r\n                <li>\r\n                  <div\r\n                    class=\"c-menu-node\"\r\n                    (mouseenter)=\"onMouseOverMenuNode($event, node)\"\r\n                    (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\r\n                    <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\r\n                      <div [class.d-none]=\"!isShowSidebar()\" class=\"c-menu-node-description\" (click)=\"onToggleMenuNode(node)\">\r\n                        <div\r\n                          class=\"c-menu-node-description-content\"\r\n                          [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\r\n                        <mat-icon class=\"c-menu-node-description-icon-expand\">\r\n                          {{ treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\r\n                        </mat-icon>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <ul class=\"p-0\" [class.d-none]=\"!treeControl.isExpanded(node)\">\r\n                    <ng-container matTreeNodeOutlet></ng-container>\r\n                  </ul>\r\n                </li>\r\n              </mat-nested-tree-node>\r\n            </mat-tree>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"c-footer\">\r\n      <lib-layout-user\r\n        [userInfo]=\"_userInfo\"\r\n        [isMobileOrTablet]=\"isMobileOrTablet\"\r\n        (menuOpened)=\"onUserMenuOpened()\"\r\n        (menuClosed)=\"onUserMenuClosed()\"\r\n        [isShowSidebar]=\"isShowSidebar()\"\r\n        (toggleMenuLock)=\"toggleMenuLock($event)\">\r\n      </lib-layout-user>\r\n    </div>\r\n\r\n    <div class=\"c-vertical\"></div>\r\n  </div>\r\n}\r\n", styles: ["::ng-deep .mat-mdc-tooltip-panel:has(.c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140){pointer-events:none}:host ::ng-deep .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:16px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:32px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:48px!important}ul,li{margin-top:0;margin-bottom:0;list-style-type:none}.wrapper{display:flex;flex-direction:column;width:290px;background-color:#fff}.wrapper .c-header{display:flex;align-items:center;height:52px;padding:3px;gap:16px}.wrapper .c-header .c-logo{display:flex;justify-content:center;align-items:center;width:52px;height:52px}.wrapper .c-header .c-logo img{width:32px;height:32px;object-fit:cover}.wrapper .c-header .c-title-menu-group{display:flex;align-items:center;font-size:18px;font-weight:500;flex:1}.wrapper .c-body{flex:1;overflow-y:hidden}.wrapper .c-body .c-menu{height:100%;display:flex}.wrapper .c-body .c-menu .c-menu-group{display:flex;flex-direction:column;align-items:center;width:60px;overflow-y:scroll;scrollbar-width:none}.wrapper .c-body .c-menu .c-menu-group .c-menu-group-icon{display:flex;justify-content:center;align-items:center;min-height:50px;width:52px;border-radius:8px;transition:all .15s}.wrapper .c-body .c-menu .c-menu-group .c-menu-group-icon img{height:24px;width:24px;object-fit:contain}.wrapper .c-body .c-menu .c-menu-tree{flex:1;display:flex;flex-direction:column;padding:3px 4px 3px 3px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon{cursor:pointer;color:#757575;padding:0}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon.search{width:20px;height:20px;font-size:18px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon.cancel{width:16px;height:16px;font-size:16px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container{flex:1;overflow-y:scroll;scrollbar-width:none}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node{width:100%;display:flex;cursor:pointer;min-height:44px;padding:8px;border-radius:8px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-icon{display:flex;justify-content:center;align-items:center;height:100%}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description{flex:1;display:flex;align-items:center}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-content{flex:1;display:flex;align-items:center;flex-wrap:wrap;white-space:pre-wrap;font-size:15px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-icon-expand{display:flex;align-items:center;justify-content:start;background-color:transparent;border:none;font-size:20px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-icon-pin{display:flex;align-items:center;justify-content:start;background-color:transparent;border:none;font-size:18px;opacity:0}.wrapper .c-footer{height:80px}.wrapper .c-vertical{position:fixed;height:100vh;left:58px;width:2px;background-color:#f8f9fa;pointer-events:none}\n"], dependencies: [{ kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i3.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i3.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "component", type: i3.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i3.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "pipe", type: SdSafeHtmlPipe, name: "sdSafeHtml" }, { kind: "ngmodule", type: MatInputModule }, { kind: "pipe", type: MenuFocusPipe, name: "menuFocus" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: HighlightSearchPipe, name: "highLightSearch" }, { kind: "directive", type: SdSuffixDefDirective, selector: "[sdSuffixDef]" }, { kind: "component", type: LayoutUserComponent$1, selector: "lib-layout-user", inputs: ["isMobileOrTablet", "isMenuLock", "isShowSidebar", "userInfo"], outputs: ["menuClosed", "menuOpened", "toggleMenuLock"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SidebarComponent, isStandalone: true, selector: "sidebar", inputs: { isShowSidebar: { classPropertyName: "isShowSidebar", publicName: "isShowSidebar", isSignal: true, isRequired: true, transformFunction: null }, menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: true, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { expandSideBar: "expandSideBar", popupUserMenuClosed: "popupUserMenuClosed", popupUserMenuOpened: "popupUserMenuOpened", showSideBar: "showSideBar" }, ngImport: i0, template: "@let _userInfo = userInfo();\r\n@let _sidebar = sidebar();\r\n\r\n@if (_userInfo && _sidebar) {\r\n  <div class=\"wrapper\" [style.height]=\"isMobileOrTablet ? screenHeight + 'px' : '100%'\">\r\n    <div class=\"c-header\">\r\n      @if (_sidebar.logoUrl) {\r\n        <div class=\"c-logo\">\r\n          <a href=\"javascript:;\" (click)=\"openHomePage()\">\r\n            <img alt=\"logo\" [src]=\"_sidebar.logoUrl\" />\r\n          </a>\r\n        </div>\r\n      }\r\n      <div class=\"c-title-menu-group\">\r\n        <span>{{ titleMenuGroup() || _sidebar.defaultTitle || 'Back Office' }}</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"c-body\">\r\n      <div class=\"c-menu\">\r\n        <div class=\"c-menu-group\">\r\n          @if (_sidebar?.pin?.enabled && pinnedMenuGroup().children?.length) {\r\n            <button\r\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, pinnedMenuGroup())\"\r\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, pinnedMenuGroup())\"\r\n              (click)=\"expandPinnedGroup()\"\r\n              [matTooltip]=\"'\u0110\u00E3 ghim'\"\r\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\r\n              [matTooltipPosition]=\"'right'\"\r\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\r\n              <mat-icon\r\n                class=\"c-menu-group-icon\"\r\n                [ngStyle]=\"{\r\n                  color: isPinnedMenuGroupActive() ? _sidebar.brandColor || '#2962FF' : '#8C8C8C',\r\n                  backgroundColor: isPinnedMenuGroupActive() ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                }\">\r\n                push_pin\r\n              </mat-icon>\r\n            </button>\r\n          }\r\n          @for (nodeMenuGroup of menus(); track nodeMenuGroup.id) {\r\n            <button\r\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, nodeMenuGroup)\"\r\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, nodeMenuGroup)\"\r\n              (click)=\"expandMenuGroup(nodeMenuGroup)\"\r\n              [matTooltip]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\r\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\r\n              [matTooltipPosition]=\"'right'\"\r\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\r\n              @if (nodeMenuGroup.iconUrl) {\r\n                <span\r\n                  class=\"c-menu-group-icon\"\r\n                  [ngStyle]=\"{\r\n                    backgroundColor: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                  }\">\r\n                  <img width=\"24px\" height=\"24px\" [src]=\"nodeMenuGroup.iconUrl\" [alt]=\"nodeMenuGroup.title\" />\r\n                </span>\r\n              } @else {\r\n                <mat-icon\r\n                  class=\"c-menu-group-icon\"\r\n                  [ngStyle]=\"{\r\n                    color: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandColor || '#2962FF' : '#8C8C8C',\r\n                    backgroundColor: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                  }\">\r\n                  {{ nodeMenuGroup.icon || 'widgets' }}\r\n                </mat-icon>\r\n              }\r\n            </button>\r\n          }\r\n        </div>\r\n        <div class=\"c-menu-tree\">\r\n          @if (totalMenuInMenusByGroup() >= 10) {\r\n            <div style=\"padding: 0px 4px\" class=\"c-menu-tree-search\">\r\n              <sd-input size=\"sm\" [placeholder]=\"'core.module.layout.sidebar.search' | translate\" [model]=\"searchText()\" (sdChange)=\"onFilterSearchText($event)\">\r\n                <ng-template sdSuffixDef>\r\n                  @if (searchText()) {\r\n                    <mat-icon class=\"c-search-prefix-icon cancel\" (click)=\"onClearSearchText()\">cancel</mat-icon>\r\n                  } @else {\r\n                    <mat-icon class=\"c-search-prefix-icon search\">search</mat-icon>\r\n                  }\r\n                </ng-template>\r\n              </sd-input>\r\n            </div>\r\n          }\r\n          <div class=\"c-menu-tree-container\">\r\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\r\n              <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\r\n                <li\r\n                  class=\"c-menu-node\"\r\n                  (mouseenter)=\"onMouseOverMenuNode($event, node)\"\r\n                  (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\r\n                  [ngStyle]=\"{\r\n                    backgroundColor: (currentPath() | menuFocus: node) ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                  }\">\r\n                  <div aria-hidden=\"true\" class=\"c-menu-node-description\" (click)=\"navigate(node)\" [class.d-none]=\"!isShowSidebar()\">\r\n                    <div\r\n                      class=\"c-menu-node-description-content\"\r\n                      [ngStyle]=\"{\r\n                        color: (currentPath() | menuFocus: node) ? _sidebar.brandColor || '#2962FF' : '#1F1F1F',\r\n                      }\"\r\n                      [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\r\n\r\n                    @if (_sidebar?.pin?.enabled) {\r\n                      <mat-icon\r\n                        class=\"c-menu-node-description-icon-pin\"\r\n                        [fontSet]=\"isPinnedNode(node) ? 'material-icons' : 'material-icons-outlined'\"\r\n                        [style.opacity]=\"isPinnedNode(node) || isHoveredNode(node) ? '1' : null\"\r\n                        [style.color]=\"isPinnedNode(node) || isHoveredNode(node) ? sidebar().brandColor || '#2962FF' : null\"\r\n                        (click)=\"onTogglePin($event, node)\"\r\n                        >push_pin\r\n                      </mat-icon>\r\n                    }\r\n                  </div>\r\n                </li>\r\n              </mat-nested-tree-node>\r\n\r\n              <mat-nested-tree-node\r\n                *matTreeNodeDef=\"let node; when: hasChild\"\r\n                aria-hidden=\"true\"\r\n                [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath() | menuFocus: node }\">\r\n                <li>\r\n                  <div\r\n                    class=\"c-menu-node\"\r\n                    (mouseenter)=\"onMouseOverMenuNode($event, node)\"\r\n                    (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\r\n                    <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\r\n                      <div [class.d-none]=\"!isShowSidebar()\" class=\"c-menu-node-description\" (click)=\"onToggleMenuNode(node)\">\r\n                        <div\r\n                          class=\"c-menu-node-description-content\"\r\n                          [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\r\n                        <mat-icon class=\"c-menu-node-description-icon-expand\">\r\n                          {{ treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\r\n                        </mat-icon>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <ul class=\"p-0\" [class.d-none]=\"!treeControl.isExpanded(node)\">\r\n                    <ng-container matTreeNodeOutlet></ng-container>\r\n                  </ul>\r\n                </li>\r\n              </mat-nested-tree-node>\r\n            </mat-tree>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"c-footer\">\r\n      <lib-layout-user\r\n        [userInfo]=\"_userInfo\"\r\n        [isMobileOrTablet]=\"isMobileOrTablet\"\r\n        (menuOpened)=\"onUserMenuOpened()\"\r\n        (menuClosed)=\"onUserMenuClosed()\"\r\n        [isShowSidebar]=\"isShowSidebar()\"\r\n        (toggleMenuLock)=\"toggleMenuLock($event)\">\r\n      </lib-layout-user>\r\n    </div>\r\n\r\n    <div class=\"c-vertical\"></div>\r\n  </div>\r\n}\r\n", styles: ["::ng-deep .mat-mdc-tooltip-panel:has(.c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140){pointer-events:none}:host ::ng-deep .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:16px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:32px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:48px!important}ul,li{margin-top:0;margin-bottom:0;list-style-type:none}.wrapper{display:flex;flex-direction:column;width:290px;background-color:#fff}.wrapper .c-header{display:flex;align-items:center;height:52px;padding:3px;gap:16px}.wrapper .c-header .c-logo{display:flex;justify-content:center;align-items:center;width:52px;height:52px}.wrapper .c-header .c-logo img{width:32px;height:32px;object-fit:cover}.wrapper .c-header .c-title-menu-group{display:flex;align-items:center;font-size:18px;font-weight:500;flex:1}.wrapper .c-body{flex:1;overflow-y:hidden}.wrapper .c-body .c-menu{height:100%;display:flex}.wrapper .c-body .c-menu .c-menu-group{display:flex;flex-direction:column;align-items:center;width:60px;overflow-y:scroll;scrollbar-width:none}.wrapper .c-body .c-menu .c-menu-group .c-menu-group-icon{display:flex;justify-content:center;align-items:center;min-height:50px;width:52px;border-radius:8px;transition:all .15s}.wrapper .c-body .c-menu .c-menu-group .c-menu-group-icon img{height:24px;width:24px;object-fit:contain}.wrapper .c-body .c-menu .c-menu-tree{flex:1;display:flex;flex-direction:column;padding:3px 4px 3px 3px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon{cursor:pointer;color:#757575;padding:0}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon.search{width:20px;height:20px;font-size:18px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon.cancel{width:16px;height:16px;font-size:16px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container{flex:1;overflow-y:scroll;scrollbar-width:none}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node{width:100%;display:flex;cursor:pointer;min-height:44px;padding:8px;border-radius:8px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-icon{display:flex;justify-content:center;align-items:center;height:100%}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description{flex:1;display:flex;align-items:center}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-content{flex:1;display:flex;align-items:center;flex-wrap:wrap;white-space:pre-wrap;font-size:15px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-icon-expand{display:flex;align-items:center;justify-content:start;background-color:transparent;border:none;font-size:20px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-icon-pin{display:flex;align-items:center;justify-content:start;background-color:transparent;border:none;font-size:18px;opacity:0}.wrapper .c-footer{height:80px}.wrapper .c-vertical{position:fixed;height:100vh;left:58px;width:2px;background-color:#f8f9fa;pointer-events:none}\n"], dependencies: [{ kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i3.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i3.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "component", type: i3.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i3.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "pipe", type: SdSafeHtmlPipe, name: "sdSafeHtml" }, { kind: "ngmodule", type: MatInputModule }, { kind: "pipe", type: MenuFocusPipe, name: "menuFocus" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: HighlightSearchPipe, name: "highLightSearch" }, { kind: "directive", type: SdSuffixDefDirective, selector: "[sdSuffixDef]" }, { kind: "component", type: LayoutUserComponent$1, selector: "lib-layout-user", inputs: ["isMobileOrTablet", "isMenuLock", "isShowSidebar", "userInfo"], outputs: ["menuClosed", "menuOpened", "toggleMenuLock"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
@@ -912,7 +912,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         SdSuffixDefDirective,
                         LayoutUserComponent$1,
                         TranslatePipe,
-                    ], template: "@let _userInfo = userInfo();\r\n@let _sidebar = sidebar();\r\n\r\n@if (_userInfo && _sidebar) {\r\n  <div class=\"wrapper\" [style.height]=\"isMobileOrTablet ? screenHeight + 'px' : '100%'\">\r\n    <div class=\"c-header\">\r\n      @if (_sidebar.logoUrl) {\r\n        <div class=\"c-logo\">\r\n          <a href=\"javascript:;\" (click)=\"openHomePage()\">\r\n            <img alt=\"logo\" [src]=\"_sidebar.logoUrl\" />\r\n          </a>\r\n        </div>\r\n      }\r\n      <div class=\"c-title-menu-group\">\r\n        <span>{{ titleMenuGroup() || _sidebar.defaultTitle || 'Back Office' }}</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"c-body\">\r\n      <div class=\"c-menu\">\r\n        <div class=\"c-menu-group\">\r\n          @if (_sidebar?.pin?.enabled && pinnedMenuGroup()?.children?.length) {\r\n            <button\r\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, pinnedMenuGroup())\"\r\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, pinnedMenuGroup())\"\r\n              (click)=\"expandPinnedGroup()\"\r\n              [matTooltip]=\"'\u0110\u00E3 ghim'\"\r\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\r\n              [matTooltipPosition]=\"'right'\"\r\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\r\n              <mat-icon\r\n                class=\"c-menu-group-icon\"\r\n                [ngStyle]=\"{\r\n                  color: isPinnedMenuGroupActive() ? _sidebar.brandColor || '#2962FF' : '#8C8C8C',\r\n                  backgroundColor: isPinnedMenuGroupActive() ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                }\">\r\n                push_pin\r\n              </mat-icon>\r\n            </button>\r\n          }\r\n          @for (nodeMenuGroup of menus(); track nodeMenuGroup.id) {\r\n            <button\r\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, nodeMenuGroup)\"\r\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, nodeMenuGroup)\"\r\n              (click)=\"expandMenuGroup(nodeMenuGroup)\"\r\n              [matTooltip]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\r\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\r\n              [matTooltipPosition]=\"'right'\"\r\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\r\n              @if (nodeMenuGroup.iconUrl) {\r\n                <span\r\n                  class=\"c-menu-group-icon\"\r\n                  [ngStyle]=\"{\r\n                    backgroundColor: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                  }\">\r\n                  <img width=\"24px\" height=\"24px\" [src]=\"nodeMenuGroup.iconUrl\" [alt]=\"nodeMenuGroup.title\" />\r\n                </span>\r\n              } @else {\r\n                <mat-icon\r\n                  class=\"c-menu-group-icon\"\r\n                  [ngStyle]=\"{\r\n                    color: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandColor || '#2962FF' : '#8C8C8C',\r\n                    backgroundColor: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                  }\">\r\n                  {{ nodeMenuGroup.icon || 'widgets' }}\r\n                </mat-icon>\r\n              }\r\n            </button>\r\n          }\r\n        </div>\r\n        <div class=\"c-menu-tree\">\r\n          @if (totalMenuInMenusByGroup() >= 10) {\r\n            <div style=\"padding: 0px 4px\" class=\"c-menu-tree-search\">\r\n              <sd-input size=\"sm\" [placeholder]=\"'core.module.layout.sidebar.search' | translate\" [model]=\"searchText()\" (sdChange)=\"onFilterSearchText($event)\">\r\n                <ng-template sdSuffixDef>\r\n                  @if (searchText()) {\r\n                    <mat-icon class=\"c-search-prefix-icon cancel\" (click)=\"onClearSearchText()\">cancel</mat-icon>\r\n                  } @else {\r\n                    <mat-icon class=\"c-search-prefix-icon search\">search</mat-icon>\r\n                  }\r\n                </ng-template>\r\n              </sd-input>\r\n            </div>\r\n          }\r\n          <div class=\"c-menu-tree-container\">\r\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\r\n              <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\r\n                <li\r\n                  class=\"c-menu-node\"\r\n                  (mouseenter)=\"onMouseOverMenuNode($event, node)\"\r\n                  (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\r\n                  [ngStyle]=\"{\r\n                    backgroundColor: (currentPath() | menuFocus: node) ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                  }\">\r\n                  <div aria-hidden=\"true\" class=\"c-menu-node-description\" (click)=\"navigate(node)\" [class.d-none]=\"!isShowSidebar()\">\r\n                    <div\r\n                      class=\"c-menu-node-description-content\"\r\n                      [ngStyle]=\"{\r\n                        color: (currentPath() | menuFocus: node) ? _sidebar.brandColor || '#2962FF' : '#1F1F1F',\r\n                      }\"\r\n                      [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\r\n\r\n                    @if (_sidebar?.pin?.enabled) {\r\n                      <mat-icon\r\n                        class=\"c-menu-node-description-icon-pin\"\r\n                        [fontSet]=\"isPinnedNode(node) ? 'material-icons' : 'material-icons-outlined'\"\r\n                        [style.opacity]=\"isPinnedNode(node) || isHoveredNode(node) ? '1' : null\"\r\n                        [style.color]=\"isPinnedNode(node) || isHoveredNode(node) ? sidebar()?.brandColor || '#2962FF' : null\"\r\n                        (click)=\"onTogglePin($event, node)\"\r\n                        >push_pin\r\n                      </mat-icon>\r\n                    }\r\n                  </div>\r\n                </li>\r\n              </mat-nested-tree-node>\r\n\r\n              <mat-nested-tree-node\r\n                *matTreeNodeDef=\"let node; when: hasChild\"\r\n                aria-hidden=\"true\"\r\n                [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath() | menuFocus: node }\">\r\n                <li>\r\n                  <div\r\n                    class=\"c-menu-node\"\r\n                    (mouseenter)=\"onMouseOverMenuNode($event, node)\"\r\n                    (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\r\n                    <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\r\n                      <div [class.d-none]=\"!isShowSidebar()\" class=\"c-menu-node-description\" (click)=\"onToggleMenuNode(node)\">\r\n                        <div\r\n                          class=\"c-menu-node-description-content\"\r\n                          [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\r\n                        <mat-icon class=\"c-menu-node-description-icon-expand\">\r\n                          {{ treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\r\n                        </mat-icon>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <ul class=\"p-0\" [class.d-none]=\"!treeControl.isExpanded(node)\">\r\n                    <ng-container matTreeNodeOutlet></ng-container>\r\n                  </ul>\r\n                </li>\r\n              </mat-nested-tree-node>\r\n            </mat-tree>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"c-footer\">\r\n      <lib-layout-user\r\n        [userInfo]=\"_userInfo\"\r\n        [isMobileOrTablet]=\"isMobileOrTablet\"\r\n        (menuOpened)=\"onUserMenuOpened()\"\r\n        (menuClosed)=\"onUserMenuClosed()\"\r\n        [isShowSidebar]=\"isShowSidebar()\"\r\n        (toggleMenuLock)=\"toggleMenuLock($event)\">\r\n      </lib-layout-user>\r\n    </div>\r\n\r\n    <div class=\"c-vertical\"></div>\r\n  </div>\r\n}\r\n", styles: ["::ng-deep .mat-mdc-tooltip-panel:has(.c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140){pointer-events:none}:host ::ng-deep .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:16px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:32px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:48px!important}ul,li{margin-top:0;margin-bottom:0;list-style-type:none}.wrapper{display:flex;flex-direction:column;width:290px;background-color:#fff}.wrapper .c-header{display:flex;align-items:center;height:52px;padding:3px;gap:16px}.wrapper .c-header .c-logo{display:flex;justify-content:center;align-items:center;width:52px;height:52px}.wrapper .c-header .c-logo img{width:32px;height:32px;object-fit:cover}.wrapper .c-header .c-title-menu-group{display:flex;align-items:center;font-size:18px;font-weight:500;flex:1}.wrapper .c-body{flex:1;overflow-y:hidden}.wrapper .c-body .c-menu{height:100%;display:flex}.wrapper .c-body .c-menu .c-menu-group{display:flex;flex-direction:column;align-items:center;width:60px;overflow-y:scroll;scrollbar-width:none}.wrapper .c-body .c-menu .c-menu-group .c-menu-group-icon{display:flex;justify-content:center;align-items:center;min-height:50px;width:52px;border-radius:8px;transition:all .15s}.wrapper .c-body .c-menu .c-menu-group .c-menu-group-icon img{height:24px;width:24px;object-fit:contain}.wrapper .c-body .c-menu .c-menu-tree{flex:1;display:flex;flex-direction:column;padding:3px 4px 3px 3px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon{cursor:pointer;color:#757575;padding:0}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon.search{width:20px;height:20px;font-size:18px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon.cancel{width:16px;height:16px;font-size:16px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container{flex:1;overflow-y:scroll;scrollbar-width:none}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node{width:100%;display:flex;cursor:pointer;min-height:44px;padding:8px;border-radius:8px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-icon{display:flex;justify-content:center;align-items:center;height:100%}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description{flex:1;display:flex;align-items:center}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-content{flex:1;display:flex;align-items:center;flex-wrap:wrap;white-space:pre-wrap;font-size:15px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-icon-expand{display:flex;align-items:center;justify-content:start;background-color:transparent;border:none;font-size:20px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-icon-pin{display:flex;align-items:center;justify-content:start;background-color:transparent;border:none;font-size:18px;opacity:0}.wrapper .c-footer{height:80px}.wrapper .c-vertical{position:fixed;height:100vh;left:58px;width:2px;background-color:#f8f9fa;pointer-events:none}\n"] }]
+                    ], template: "@let _userInfo = userInfo();\r\n@let _sidebar = sidebar();\r\n\r\n@if (_userInfo && _sidebar) {\r\n  <div class=\"wrapper\" [style.height]=\"isMobileOrTablet ? screenHeight + 'px' : '100%'\">\r\n    <div class=\"c-header\">\r\n      @if (_sidebar.logoUrl) {\r\n        <div class=\"c-logo\">\r\n          <a href=\"javascript:;\" (click)=\"openHomePage()\">\r\n            <img alt=\"logo\" [src]=\"_sidebar.logoUrl\" />\r\n          </a>\r\n        </div>\r\n      }\r\n      <div class=\"c-title-menu-group\">\r\n        <span>{{ titleMenuGroup() || _sidebar.defaultTitle || 'Back Office' }}</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"c-body\">\r\n      <div class=\"c-menu\">\r\n        <div class=\"c-menu-group\">\r\n          @if (_sidebar?.pin?.enabled && pinnedMenuGroup().children?.length) {\r\n            <button\r\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, pinnedMenuGroup())\"\r\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, pinnedMenuGroup())\"\r\n              (click)=\"expandPinnedGroup()\"\r\n              [matTooltip]=\"'\u0110\u00E3 ghim'\"\r\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\r\n              [matTooltipPosition]=\"'right'\"\r\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\r\n              <mat-icon\r\n                class=\"c-menu-group-icon\"\r\n                [ngStyle]=\"{\r\n                  color: isPinnedMenuGroupActive() ? _sidebar.brandColor || '#2962FF' : '#8C8C8C',\r\n                  backgroundColor: isPinnedMenuGroupActive() ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                }\">\r\n                push_pin\r\n              </mat-icon>\r\n            </button>\r\n          }\r\n          @for (nodeMenuGroup of menus(); track nodeMenuGroup.id) {\r\n            <button\r\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, nodeMenuGroup)\"\r\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, nodeMenuGroup)\"\r\n              (click)=\"expandMenuGroup(nodeMenuGroup)\"\r\n              [matTooltip]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\r\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\r\n              [matTooltipPosition]=\"'right'\"\r\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\r\n              @if (nodeMenuGroup.iconUrl) {\r\n                <span\r\n                  class=\"c-menu-group-icon\"\r\n                  [ngStyle]=\"{\r\n                    backgroundColor: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                  }\">\r\n                  <img width=\"24px\" height=\"24px\" [src]=\"nodeMenuGroup.iconUrl\" [alt]=\"nodeMenuGroup.title\" />\r\n                </span>\r\n              } @else {\r\n                <mat-icon\r\n                  class=\"c-menu-group-icon\"\r\n                  [ngStyle]=\"{\r\n                    color: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandColor || '#2962FF' : '#8C8C8C',\r\n                    backgroundColor: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                  }\">\r\n                  {{ nodeMenuGroup.icon || 'widgets' }}\r\n                </mat-icon>\r\n              }\r\n            </button>\r\n          }\r\n        </div>\r\n        <div class=\"c-menu-tree\">\r\n          @if (totalMenuInMenusByGroup() >= 10) {\r\n            <div style=\"padding: 0px 4px\" class=\"c-menu-tree-search\">\r\n              <sd-input size=\"sm\" [placeholder]=\"'core.module.layout.sidebar.search' | translate\" [model]=\"searchText()\" (sdChange)=\"onFilterSearchText($event)\">\r\n                <ng-template sdSuffixDef>\r\n                  @if (searchText()) {\r\n                    <mat-icon class=\"c-search-prefix-icon cancel\" (click)=\"onClearSearchText()\">cancel</mat-icon>\r\n                  } @else {\r\n                    <mat-icon class=\"c-search-prefix-icon search\">search</mat-icon>\r\n                  }\r\n                </ng-template>\r\n              </sd-input>\r\n            </div>\r\n          }\r\n          <div class=\"c-menu-tree-container\">\r\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\r\n              <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\r\n                <li\r\n                  class=\"c-menu-node\"\r\n                  (mouseenter)=\"onMouseOverMenuNode($event, node)\"\r\n                  (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\r\n                  [ngStyle]=\"{\r\n                    backgroundColor: (currentPath() | menuFocus: node) ? _sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                  }\">\r\n                  <div aria-hidden=\"true\" class=\"c-menu-node-description\" (click)=\"navigate(node)\" [class.d-none]=\"!isShowSidebar()\">\r\n                    <div\r\n                      class=\"c-menu-node-description-content\"\r\n                      [ngStyle]=\"{\r\n                        color: (currentPath() | menuFocus: node) ? _sidebar.brandColor || '#2962FF' : '#1F1F1F',\r\n                      }\"\r\n                      [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\r\n\r\n                    @if (_sidebar?.pin?.enabled) {\r\n                      <mat-icon\r\n                        class=\"c-menu-node-description-icon-pin\"\r\n                        [fontSet]=\"isPinnedNode(node) ? 'material-icons' : 'material-icons-outlined'\"\r\n                        [style.opacity]=\"isPinnedNode(node) || isHoveredNode(node) ? '1' : null\"\r\n                        [style.color]=\"isPinnedNode(node) || isHoveredNode(node) ? sidebar().brandColor || '#2962FF' : null\"\r\n                        (click)=\"onTogglePin($event, node)\"\r\n                        >push_pin\r\n                      </mat-icon>\r\n                    }\r\n                  </div>\r\n                </li>\r\n              </mat-nested-tree-node>\r\n\r\n              <mat-nested-tree-node\r\n                *matTreeNodeDef=\"let node; when: hasChild\"\r\n                aria-hidden=\"true\"\r\n                [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath() | menuFocus: node }\">\r\n                <li>\r\n                  <div\r\n                    class=\"c-menu-node\"\r\n                    (mouseenter)=\"onMouseOverMenuNode($event, node)\"\r\n                    (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\r\n                    <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\r\n                      <div [class.d-none]=\"!isShowSidebar()\" class=\"c-menu-node-description\" (click)=\"onToggleMenuNode(node)\">\r\n                        <div\r\n                          class=\"c-menu-node-description-content\"\r\n                          [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\r\n                        <mat-icon class=\"c-menu-node-description-icon-expand\">\r\n                          {{ treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\r\n                        </mat-icon>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <ul class=\"p-0\" [class.d-none]=\"!treeControl.isExpanded(node)\">\r\n                    <ng-container matTreeNodeOutlet></ng-container>\r\n                  </ul>\r\n                </li>\r\n              </mat-nested-tree-node>\r\n            </mat-tree>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"c-footer\">\r\n      <lib-layout-user\r\n        [userInfo]=\"_userInfo\"\r\n        [isMobileOrTablet]=\"isMobileOrTablet\"\r\n        (menuOpened)=\"onUserMenuOpened()\"\r\n        (menuClosed)=\"onUserMenuClosed()\"\r\n        [isShowSidebar]=\"isShowSidebar()\"\r\n        (toggleMenuLock)=\"toggleMenuLock($event)\">\r\n      </lib-layout-user>\r\n    </div>\r\n\r\n    <div class=\"c-vertical\"></div>\r\n  </div>\r\n}\r\n", styles: ["::ng-deep .mat-mdc-tooltip-panel:has(.c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140){pointer-events:none}:host ::ng-deep .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:16px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:32px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:48px!important}ul,li{margin-top:0;margin-bottom:0;list-style-type:none}.wrapper{display:flex;flex-direction:column;width:290px;background-color:#fff}.wrapper .c-header{display:flex;align-items:center;height:52px;padding:3px;gap:16px}.wrapper .c-header .c-logo{display:flex;justify-content:center;align-items:center;width:52px;height:52px}.wrapper .c-header .c-logo img{width:32px;height:32px;object-fit:cover}.wrapper .c-header .c-title-menu-group{display:flex;align-items:center;font-size:18px;font-weight:500;flex:1}.wrapper .c-body{flex:1;overflow-y:hidden}.wrapper .c-body .c-menu{height:100%;display:flex}.wrapper .c-body .c-menu .c-menu-group{display:flex;flex-direction:column;align-items:center;width:60px;overflow-y:scroll;scrollbar-width:none}.wrapper .c-body .c-menu .c-menu-group .c-menu-group-icon{display:flex;justify-content:center;align-items:center;min-height:50px;width:52px;border-radius:8px;transition:all .15s}.wrapper .c-body .c-menu .c-menu-group .c-menu-group-icon img{height:24px;width:24px;object-fit:contain}.wrapper .c-body .c-menu .c-menu-tree{flex:1;display:flex;flex-direction:column;padding:3px 4px 3px 3px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon{cursor:pointer;color:#757575;padding:0}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon.search{width:20px;height:20px;font-size:18px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon.cancel{width:16px;height:16px;font-size:16px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container{flex:1;overflow-y:scroll;scrollbar-width:none}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node{width:100%;display:flex;cursor:pointer;min-height:44px;padding:8px;border-radius:8px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-icon{display:flex;justify-content:center;align-items:center;height:100%}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description{flex:1;display:flex;align-items:center}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-content{flex:1;display:flex;align-items:center;flex-wrap:wrap;white-space:pre-wrap;font-size:15px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-icon-expand{display:flex;align-items:center;justify-content:start;background-color:transparent;border:none;font-size:20px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-icon-pin{display:flex;align-items:center;justify-content:start;background-color:transparent;border:none;font-size:18px;opacity:0}.wrapper .c-footer{height:80px}.wrapper .c-vertical{position:fixed;height:100vh;left:58px;width:2px;background-color:#f8f9fa;pointer-events:none}\n"] }]
         }], ctorParameters: () => [] });
 class SidebarV1Component {