@sd-angular/core 19.0.0-beta.47 → 19.0.0-beta.49
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.
- package/README.md +686 -33
- package/fesm2022/sd-angular-core-modules-layout.mjs +13 -4
- package/fesm2022/sd-angular-core-modules-layout.mjs.map +1 -1
- package/modules/layout/services/menu/menu.model.d.ts +2 -0
- package/package.json +28 -28
- package/sd-angular-core-19.0.0-beta.49.tgz +0 -0
- package/sd-angular-core-19.0.0-beta.47.tgz +0 -0
|
@@ -518,8 +518,12 @@ class LayoutSidebarComponent {
|
|
|
518
518
|
const brandLightColorOpacity = this.#convertColor(this.sidebar?.brandLightColor, 0.6);
|
|
519
519
|
if (menuGroupIcon) {
|
|
520
520
|
menuGroupIcon.style.transition = 'all 0.15s';
|
|
521
|
-
menuGroupIcon.style.color = this.sidebar?.brandColor || '#2962FF';
|
|
522
521
|
menuGroupIcon.style.backgroundColor = brandLightColorOpacity || 'rgba(248, 249, 250, 0.6)';
|
|
522
|
+
if (menuGroupIcon instanceof HTMLImageElement) {
|
|
523
|
+
}
|
|
524
|
+
else {
|
|
525
|
+
menuGroupIcon.style.color = this.sidebar?.brandColor || '#2962FF';
|
|
526
|
+
}
|
|
523
527
|
}
|
|
524
528
|
}
|
|
525
529
|
};
|
|
@@ -530,8 +534,13 @@ class LayoutSidebarComponent {
|
|
|
530
534
|
const menuGroupIcon = menuGroup.querySelector('.c-menu-group-icon');
|
|
531
535
|
if (menuGroupIcon) {
|
|
532
536
|
menuGroupIcon.style.transition = 'all 0.15s';
|
|
533
|
-
menuGroupIcon.style.color = '#8C8C8C';
|
|
534
537
|
menuGroupIcon.style.backgroundColor = 'transparent';
|
|
538
|
+
if (menuGroupIcon instanceof HTMLImageElement) {
|
|
539
|
+
menuGroupIcon.style.opacity = '0.55';
|
|
540
|
+
}
|
|
541
|
+
else {
|
|
542
|
+
menuGroupIcon.style.color = '#8C8C8C';
|
|
543
|
+
}
|
|
535
544
|
}
|
|
536
545
|
}
|
|
537
546
|
};
|
|
@@ -769,7 +778,7 @@ class LayoutSidebarComponent {
|
|
|
769
778
|
return count;
|
|
770
779
|
};
|
|
771
780
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LayoutSidebarComponent, deps: [{ token: i1$2.Router }, { token: SD_LAYOUT_CONFIGURATION }, { token: SdLayoutStorageService }, { token: MenuFocusPipe }], target: i0.ɵɵFactoryTarget.Component });
|
|
772
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: LayoutSidebarComponent, isStandalone: true, selector: "lib-layout-sidebar", inputs: { isShowSidebar: "isShowSidebar", _menus: ["menus", "_menus"] }, outputs: { expandSideBar: "expandSideBar", popupUserMenuClosed: "popupUserMenuClosed", popupUserMenuOpened: "popupUserMenuOpened", showSideBar: "showSideBar" }, ngImport: i0, template: "@if (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 <!-- Icon menu-group -->\r\n <div class=\"c-menu-group\">\r\n @for (nodeMenuGroup of menusOrigin; 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 <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 }}\r\n </mat-icon>\r\n </button>\r\n }\r\n </div>\r\n <!-- End -->\r\n\r\n <!-- Gi\u00E1 tr\u1ECB menu-group -->\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=\"T\u00ECm ki\u1EBFm\" [model]=\"searchText\" (sdChange)=\"onFilterSearchText($event)\">\r\n <ng-template sdSuffixDef>\r\n @if (searchText) {\r\n <mat-icon class=\"c-search-prefix-icon cancel\" (click)=\"onClearSearchText()\">cancel</mat-icon>\r\n } @else {\r\n <mat-icon class=\"c-search-prefix-icon search\">search</mat-icon>\r\n }\r\n </ng-template>\r\n </sd-input>\r\n </div>\r\n }\r\n <div class=\"c-menu-tree-container\">\r\n <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\r\n <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\r\n <li\r\n class=\"c-menu-node\"\r\n (mouseenter)=\"onMouseOverMenuNode($event, node)\"\r\n (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\r\n [ngStyle]=\"{\r\n backgroundColor: (currentPath | menuFocus: node) ? sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n }\">\r\n <div aria-hidden=\"true\" class=\"c-menu-node-description\" (click)=\"navigate(node)\" [class.d-none]=\"!isShowSidebar\">\r\n <div\r\n class=\"c-menu-node-description-content\"\r\n [ngStyle]=\"{\r\n color: (currentPath | menuFocus: node) ? sidebar.brandColor || '#2962FF' : '#1F1F1F',\r\n }\"\r\n [innerHTML]=\"node.title | highLightSearch: searchText | sdSafeHtml\"></div>\r\n </div>\r\n </li>\r\n </mat-nested-tree-node>\r\n\r\n <mat-nested-tree-node\r\n *matTreeNodeDef=\"let node; when: hasChild\"\r\n aria-hidden=\"true\"\r\n [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath | menuFocus: node }\">\r\n <li>\r\n <div\r\n class=\"c-menu-node\"\r\n (mouseenter)=\"onMouseOverMenuNode($event, node)\"\r\n (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\r\n <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\r\n <div [class.d-none]=\"!isShowSidebar\" class=\"c-menu-node-description\" (click)=\"onToggleMenuNode(node)\">\r\n <div\r\n class=\"c-menu-node-description-content\"\r\n [innerHTML]=\"node.title | highLightSearch: searchText | sdSafeHtml\"></div>\r\n <mat-icon class=\"c-menu-node-description-icon-expand\">\r\n {{ treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\r\n </mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <ul class=\"p-0\" [class.d-none]=\"!treeControl.isExpanded(node)\">\r\n <ng-container matTreeNodeOutlet></ng-container>\r\n </ul>\r\n </li>\r\n </mat-nested-tree-node>\r\n </mat-tree>\r\n </div>\r\n </div>\r\n <!-- End -->\r\n </div>\r\n </div>\r\n\r\n <div class=\"c-footer\">\r\n <lib-layout-user\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}.wrapper .c-body .c-menu .c-menu-tree{flex:1;display:flex;flex-direction:column;padding:3px 4px 3px 3px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon{cursor:pointer;color:#757575;padding:0}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon.search{width:20px;height:20px;font-size:18px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon.cancel{width:16px;height:16px;font-size:16px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container{flex:1;overflow-y:scroll;scrollbar-width:none}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node{width:100%;display:flex;cursor:pointer;min-height:44px;padding:8px;border-radius:8px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-icon{display:flex;justify-content:center;align-items:center;height:100%}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description{flex:1;display:flex;align-items:center}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-content{flex:1;display:flex;align-items:center;flex-wrap:wrap;white-space:pre-wrap;font-size:15px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-icon-expand{text-align:left;background-color:transparent;border:none;font-size:20px}.wrapper .c-footer{height:80px}.wrapper .c-vertical{position:fixed;height:100vh;left:58px;width:2px;background-color:#f8f9fa;pointer-events:none}\n"], dependencies: [{ kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "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: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i6.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i6.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "component", type: i6.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i6.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: i7.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, selector: "lib-layout-user", inputs: ["isMobileOrTablet", "isMenuLock", "isShowSidebar"], outputs: ["menuClosed", "menuOpened", "toggleMenuLock"] }] });
|
|
781
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: LayoutSidebarComponent, isStandalone: true, selector: "lib-layout-sidebar", inputs: { isShowSidebar: "isShowSidebar", _menus: ["menus", "_menus"] }, outputs: { expandSideBar: "expandSideBar", popupUserMenuClosed: "popupUserMenuClosed", popupUserMenuOpened: "popupUserMenuOpened", showSideBar: "showSideBar" }, ngImport: i0, template: "@if (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 <!-- Icon menu-group -->\r\n <div class=\"c-menu-group\">\r\n @for (nodeMenuGroup of menusOrigin; 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 <!-- Branch 1: image URL provided -->\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 <!-- Branch 2: mat-icon ligature, or default 'widgets' if icon absent -->\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 <!-- End -->\r\n\r\n <!-- Gi\u00E1 tr\u1ECB menu-group -->\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=\"T\u00ECm ki\u1EBFm\" [model]=\"searchText\" (sdChange)=\"onFilterSearchText($event)\">\r\n <ng-template sdSuffixDef>\r\n @if (searchText) {\r\n <mat-icon class=\"c-search-prefix-icon cancel\" (click)=\"onClearSearchText()\">cancel</mat-icon>\r\n } @else {\r\n <mat-icon class=\"c-search-prefix-icon search\">search</mat-icon>\r\n }\r\n </ng-template>\r\n </sd-input>\r\n </div>\r\n }\r\n <div class=\"c-menu-tree-container\">\r\n <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\r\n <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\r\n <li\r\n class=\"c-menu-node\"\r\n (mouseenter)=\"onMouseOverMenuNode($event, node)\"\r\n (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\r\n [ngStyle]=\"{\r\n backgroundColor: (currentPath | menuFocus: node) ? sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n }\">\r\n <div aria-hidden=\"true\" class=\"c-menu-node-description\" (click)=\"navigate(node)\" [class.d-none]=\"!isShowSidebar\">\r\n <div\r\n class=\"c-menu-node-description-content\"\r\n [ngStyle]=\"{\r\n color: (currentPath | menuFocus: node) ? sidebar.brandColor || '#2962FF' : '#1F1F1F',\r\n }\"\r\n [innerHTML]=\"node.title | highLightSearch: searchText | sdSafeHtml\"></div>\r\n </div>\r\n </li>\r\n </mat-nested-tree-node>\r\n\r\n <mat-nested-tree-node\r\n *matTreeNodeDef=\"let node; when: hasChild\"\r\n aria-hidden=\"true\"\r\n [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath | menuFocus: node }\">\r\n <li>\r\n <div\r\n class=\"c-menu-node\"\r\n (mouseenter)=\"onMouseOverMenuNode($event, node)\"\r\n (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\r\n <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\r\n <div [class.d-none]=\"!isShowSidebar\" class=\"c-menu-node-description\" (click)=\"onToggleMenuNode(node)\">\r\n <div\r\n class=\"c-menu-node-description-content\"\r\n [innerHTML]=\"node.title | highLightSearch: searchText | sdSafeHtml\"></div>\r\n <mat-icon class=\"c-menu-node-description-icon-expand\">\r\n {{ treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\r\n </mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <ul class=\"p-0\" [class.d-none]=\"!treeControl.isExpanded(node)\">\r\n <ng-container matTreeNodeOutlet></ng-container>\r\n </ul>\r\n </li>\r\n </mat-nested-tree-node>\r\n </mat-tree>\r\n </div>\r\n </div>\r\n <!-- End -->\r\n </div>\r\n </div>\r\n\r\n <div class=\"c-footer\">\r\n <lib-layout-user\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{text-align:left;background-color:transparent;border:none;font-size:20px}.wrapper .c-footer{height:80px}.wrapper .c-vertical{position:fixed;height:100vh;left:58px;width:2px;background-color:#f8f9fa;pointer-events:none}\n"], dependencies: [{ kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "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: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i6.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i6.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "component", type: i6.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i6.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: i7.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, selector: "lib-layout-user", inputs: ["isMobileOrTablet", "isMenuLock", "isShowSidebar"], outputs: ["menuClosed", "menuOpened", "toggleMenuLock"] }] });
|
|
773
782
|
}
|
|
774
783
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LayoutSidebarComponent, decorators: [{
|
|
775
784
|
type: Component,
|
|
@@ -787,7 +796,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
787
796
|
HighlightSearchPipe,
|
|
788
797
|
SdSuffixDefDirective,
|
|
789
798
|
LayoutUserComponent,
|
|
790
|
-
], template: "@if (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 <!-- Icon menu-group -->\r\n <div class=\"c-menu-group\">\r\n @for (nodeMenuGroup of menusOrigin; 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 <mat-icon\r\n
|
|
799
|
+
], template: "@if (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 <!-- Icon menu-group -->\r\n <div class=\"c-menu-group\">\r\n @for (nodeMenuGroup of menusOrigin; 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 <!-- Branch 1: image URL provided -->\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 <!-- Branch 2: mat-icon ligature, or default 'widgets' if icon absent -->\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 <!-- End -->\r\n\r\n <!-- Gi\u00E1 tr\u1ECB menu-group -->\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=\"T\u00ECm ki\u1EBFm\" [model]=\"searchText\" (sdChange)=\"onFilterSearchText($event)\">\r\n <ng-template sdSuffixDef>\r\n @if (searchText) {\r\n <mat-icon class=\"c-search-prefix-icon cancel\" (click)=\"onClearSearchText()\">cancel</mat-icon>\r\n } @else {\r\n <mat-icon class=\"c-search-prefix-icon search\">search</mat-icon>\r\n }\r\n </ng-template>\r\n </sd-input>\r\n </div>\r\n }\r\n <div class=\"c-menu-tree-container\">\r\n <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\r\n <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\r\n <li\r\n class=\"c-menu-node\"\r\n (mouseenter)=\"onMouseOverMenuNode($event, node)\"\r\n (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\r\n [ngStyle]=\"{\r\n backgroundColor: (currentPath | menuFocus: node) ? sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n }\">\r\n <div aria-hidden=\"true\" class=\"c-menu-node-description\" (click)=\"navigate(node)\" [class.d-none]=\"!isShowSidebar\">\r\n <div\r\n class=\"c-menu-node-description-content\"\r\n [ngStyle]=\"{\r\n color: (currentPath | menuFocus: node) ? sidebar.brandColor || '#2962FF' : '#1F1F1F',\r\n }\"\r\n [innerHTML]=\"node.title | highLightSearch: searchText | sdSafeHtml\"></div>\r\n </div>\r\n </li>\r\n </mat-nested-tree-node>\r\n\r\n <mat-nested-tree-node\r\n *matTreeNodeDef=\"let node; when: hasChild\"\r\n aria-hidden=\"true\"\r\n [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath | menuFocus: node }\">\r\n <li>\r\n <div\r\n class=\"c-menu-node\"\r\n (mouseenter)=\"onMouseOverMenuNode($event, node)\"\r\n (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\r\n <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\r\n <div [class.d-none]=\"!isShowSidebar\" class=\"c-menu-node-description\" (click)=\"onToggleMenuNode(node)\">\r\n <div\r\n class=\"c-menu-node-description-content\"\r\n [innerHTML]=\"node.title | highLightSearch: searchText | sdSafeHtml\"></div>\r\n <mat-icon class=\"c-menu-node-description-icon-expand\">\r\n {{ treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\r\n </mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <ul class=\"p-0\" [class.d-none]=\"!treeControl.isExpanded(node)\">\r\n <ng-container matTreeNodeOutlet></ng-container>\r\n </ul>\r\n </li>\r\n </mat-nested-tree-node>\r\n </mat-tree>\r\n </div>\r\n </div>\r\n <!-- End -->\r\n </div>\r\n </div>\r\n\r\n <div class=\"c-footer\">\r\n <lib-layout-user\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{text-align:left;background-color:transparent;border:none;font-size:20px}.wrapper .c-footer{height:80px}.wrapper .c-vertical{position:fixed;height:100vh;left:58px;width:2px;background-color:#f8f9fa;pointer-events:none}\n"] }]
|
|
791
800
|
}], ctorParameters: () => [{ type: i1$2.Router }, { type: undefined, decorators: [{
|
|
792
801
|
type: Inject,
|
|
793
802
|
args: [SD_LAYOUT_CONFIGURATION]
|