@shival99/z-ui 2.6.4 → 2.6.5
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.
|
@@ -876,7 +876,7 @@ class ZMenuV2Component {
|
|
|
876
876
|
return ZCacheService.get(key, false) ?? false;
|
|
877
877
|
}
|
|
878
878
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZMenuV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
879
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ZMenuV2Component, isStandalone: true, selector: "z-menu-v2", inputs: { zLogo: { classPropertyName: "zLogo", publicName: "zLogo", isSignal: true, isRequired: false, transformFunction: null }, zLogoMobile: { classPropertyName: "zLogoMobile", publicName: "zLogoMobile", isSignal: true, isRequired: false, transformFunction: null }, zMenus: { classPropertyName: "zMenus", publicName: "zMenus", isSignal: true, isRequired: false, transformFunction: null }, zUser: { classPropertyName: "zUser", publicName: "zUser", isSignal: true, isRequired: false, transformFunction: null }, zUserActions: { classPropertyName: "zUserActions", publicName: "zUserActions", isSignal: true, isRequired: false, transformFunction: null }, zCurrentPath: { classPropertyName: "zCurrentPath", publicName: "zCurrentPath", isSignal: true, isRequired: false, transformFunction: null }, zKey: { classPropertyName: "zKey", publicName: "zKey", isSignal: true, isRequired: false, transformFunction: null }, zClass: { classPropertyName: "zClass", publicName: "zClass", isSignal: true, isRequired: false, transformFunction: null }, zTitle: { classPropertyName: "zTitle", publicName: "zTitle", isSignal: true, isRequired: false, transformFunction: null }, zCollapsedWidth: { classPropertyName: "zCollapsedWidth", publicName: "zCollapsedWidth", isSignal: true, isRequired: false, transformFunction: null }, zExpandedWidth: { classPropertyName: "zExpandedWidth", publicName: "zExpandedWidth", isSignal: true, isRequired: false, transformFunction: null }, zExpandMode: { classPropertyName: "zExpandMode", publicName: "zExpandMode", isSignal: true, isRequired: false, transformFunction: null }, zShowMobileBar: { classPropertyName: "zShowMobileBar", publicName: "zShowMobileBar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnSelect: "zOnSelect", zOnMenuAction: "zOnMenuAction", zControl: "zControl" }, host: { properties: { "class.z-menu-v2-collapsed": "sidebarCollapsed()", "class.z-menu-v2-mobile-open": "mobileMenuOpen()", "class.z-menu-v2-mobile": "isMobile()" }, classAttribute: "z-menu-v2 block" }, providers: [TranslatePipe], ngImport: i0, template: "<aside\n class=\"hidden h-full min-h-0 flex-col overflow-hidden border-r shadow-sm md:flex\"\n [class]=\"zClasses()\"\n [style.--z-menu-v2-expanded-width.px]=\"zExpandedWidth()\"\n [style.--z-menu-v2-collapsed-width.px]=\"zCollapsedWidth()\">\n <div\n class=\"border-sidebar-border flex h-14 shrink-0 items-center gap-2 border-b px-3\"\n [class.justify-center]=\"sidebarCollapsed()\">\n @if (!sidebarCollapsed() && zLogo()) {\n <img [src]=\"zLogo()\" alt=\"Logo\" class=\"h-8 w-auto shrink-0 object-contain transition-opacity\" />\n }\n\n @if (!sidebarCollapsed()) {\n <div\n class=\"min-w-0 flex-1 overflow-hidden text-sm font-semibold text-ellipsis whitespace-nowrap\"\n z-tooltip\n [zContent]=\"effectiveTitle() | translate\"\n zPosition=\"right\"\n [zOffset]=\"6\">\n {{ effectiveTitle() | translate }}\n </div>\n }\n\n <button\n z-button\n zType=\"ghost\"\n [zWave]=\"false\"\n class=\"z-menu-v2-toggle h-9 w-9 shrink-0\"\n [class.z-menu-v2-toggle-collapsed]=\"sidebarCollapsed()\"\n [attr.aria-label]=\"\n (sidebarCollapsed() ? 'i18n_z_ui_menu_expand_sidebar' : 'i18n_z_ui_menu_collapse_sidebar') | translate\n \"\n (click)=\"toggleSidebar()\">\n <z-icon [zType]=\"sidebarCollapsed() ? 'lucidePanelLeftOpen' : 'lucidePanelLeftClose'\" zSize=\"18\" />\n </button>\n </div>\n\n <ng-scrollbar class=\"z-menu-v2-scrollbar min-h-0 flex-1\" track=\"vertical\">\n <nav zHoverGlide zHoverGlideClass=\"bg-accent rounded-sm\" class=\"z-menu-v2-nav flex flex-col p-2\">\n @for (parent of menuParents(); track parent.id) {\n @let parentActive = parentWithActiveChild()?.id === parent.id;\n @let parentLeafActive = selectedMenuItem()?.id === parent.id;\n @let parentHasChildren = parent.children && parent.children.length > 0;\n\n @if (parent.groupLabel && !sidebarCollapsed()) {\n <div class=\"mt-1 first:mt-0\">\n <div class=\"border-sidebar-border mb-2.5 border-t\"></div>\n <div class=\"text-muted-foreground px-2 pb-0.5 text-[0.6875rem] font-semibold tracking-wider uppercase\">\n {{ parent.groupLabel | translate }}\n </div>\n </div>\n }\n @if (sidebarCollapsed() && parentHasChildren) {\n <button\n type=\"button\"\n z-popover\n [zPopoverContent]=\"parentPopoverTpl\"\n [zPopoverWidth]=\"256\"\n zPosition=\"right-top\"\n [zOffset]=\"10\"\n data-glide-item\n class=\"z-menu-v2-icon-item\"\n [class.active]=\"parentActive || parentLeafActive\"\n [attr.aria-label]=\"parent.name | translate\"\n (click)=\"onCollapsedParentClick(parent)\">\n @if (parent.icon) {\n <z-icon [zType]=\"parent.icon\" zSize=\"20\" />\n }\n @if (!parent.icon && parent.iconSvg) {\n <z-icon [zSvg]=\"parent.iconSvg\" zSize=\"20\" />\n }\n </button>\n\n <ng-template #parentPopoverTpl let-close=\"close\">\n <div class=\"z-menu-v2-popover w-64 max-w-64 min-w-0 pt-1 pl-1\">\n <div\n #parentPopoverHeaderTrigger\n class=\"text-muted-foreground flex items-center gap-2 px-2 py-2 text-xs font-medium\">\n @if (parent.icon) {\n <z-icon [zType]=\"parent.icon\" zSize=\"15\" />\n }\n <span\n class=\"overflow-hidden text-ellipsis whitespace-nowrap\"\n z-tooltip\n [zContent]=\"parent.name | translate\"\n [zTriggerElement]=\"parentPopoverHeaderTrigger\"\n zPosition=\"right\"\n [zOffset]=\"6\">\n {{ parent.name | translate }}\n </span>\n </div>\n <ng-scrollbar class=\"z-menu-v2-popover-scrollbar\" orientation=\"vertical\" visibility=\"visible\">\n <div class=\"z-menu-v2-popover-scroll-content pr-2 pb-1\">\n <ng-container\n *ngTemplateOutlet=\"collapsedChildrenTpl; context: { $implicit: parent.children, close: close }\" />\n </div>\n </ng-scrollbar>\n </div>\n </ng-template>\n }\n @if (!(sidebarCollapsed() && parentHasChildren)) {\n <ng-container *ngTemplateOutlet=\"openParentTpl; context: { $implicit: parent }\" />\n }\n }\n </nav>\n </ng-scrollbar>\n\n <ng-container *ngTemplateOutlet=\"userFooterTpl\" />\n</aside>\n\n<ng-template #openParentTpl let-parent>\n @let parentActive = parentWithActiveChild()?.id === parent.id;\n @let parentLeafActive = selectedMenuItem()?.id === parent.id;\n @let parentHasChildren = parent.children && parent.children.length > 0;\n\n <div class=\"z-menu-v2-menu-group\">\n <button\n #parentTrigger\n type=\"button\"\n data-glide-item\n class=\"z-menu-v2-item\"\n [class.active]=\"parentLeafActive\"\n [class.parent-active]=\"parentActive && !parentLeafActive\"\n [class.icon-only]=\"sidebarCollapsed()\"\n [attr.aria-label]=\"sidebarCollapsed() ? (parent.name | translate) : null\"\n z-tooltip\n [zContent]=\"parent.name | translate\"\n zPosition=\"right\"\n [zOffset]=\"6\"\n [zDisabled]=\"!sidebarCollapsed()\"\n [zAlwaysShow]=\"sidebarCollapsed()\"\n (click)=\"onMenuItemClick(parent)\">\n @if (parent.icon) {\n <z-icon [zType]=\"parent.icon\" [zSize]=\"sidebarCollapsed() ? '20' : '18'\" class=\"shrink-0\" />\n }\n @if (!parent.icon && parent.iconSvg) {\n <z-icon [zSvg]=\"parent.iconSvg\" [zSize]=\"sidebarCollapsed() ? '20' : '18'\" class=\"shrink-0\" />\n }\n\n @if (!sidebarCollapsed()) {\n <span\n class=\"min-w-0 flex-1 overflow-hidden text-left text-ellipsis whitespace-nowrap\"\n z-tooltip\n [zContent]=\"parent.name | translate\"\n [zTriggerElement]=\"parentTrigger\"\n zPosition=\"right\"\n [zOffset]=\"6\">\n {{ parent.name | translate }}\n </span>\n @if (parentHasChildren) {\n <z-icon\n zType=\"lucideChevronRight\"\n zSize=\"15\"\n class=\"z-menu-v2-arrow shrink-0 opacity-60\"\n [class.expanded]=\"parent.expanded\" />\n }\n }\n </button>\n\n @if (!sidebarCollapsed() && parentHasChildren && parent.renderChildren) {\n <div class=\"z-menu-v2-submenu-panel\" [class.expanded]=\"parent.renderExpanded\">\n <div class=\"z-menu-v2-submenu-panel-inner\">\n <ng-container\n *ngTemplateOutlet=\"openChildrenTpl; context: { $implicit: parent.children, position: 'right' }\" />\n </div>\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #collapsedChildrenTpl let-children let-close=\"close\">\n <div zHoverGlide zHoverGlideClass=\"bg-accent rounded-sm\" class=\"z-menu-v2-submenu z-menu-v2-popover-tree\">\n @for (child of children; track child.id) {\n @let childActive = selectedMenuItem()?.id === child.id;\n @let childParentActive = selectedMenuItem()?.parent?.includes(child.id);\n @let childHasChildren = child.children && child.children.length > 0;\n <div class=\"z-menu-v2-menu-group\">\n <button\n #collapsedChildTrigger\n type=\"button\"\n data-glide-item\n class=\"z-menu-v2-popover-item\"\n [class.active]=\"childActive\"\n [class.parent-active]=\"childParentActive\"\n (click)=\"childHasChildren ? onMenuItemClick(child) : onCollapsedLeafClick(child, close)\">\n @if (child.icon) {\n <z-icon [zType]=\"child.icon\" zSize=\"16\" class=\"shrink-0\" />\n }\n @if (!child.icon && child.iconSvg) {\n <z-icon [zSvg]=\"child.iconSvg\" zSize=\"16\" class=\"shrink-0\" />\n }\n @if (!child.icon && !child.iconSvg) {\n <span class=\"z-menu-v2-dot\"></span>\n }\n <span\n class=\"min-w-0 flex-1 overflow-hidden text-left text-ellipsis whitespace-nowrap\"\n z-tooltip\n [zContent]=\"child.name | translate\"\n [zTriggerElement]=\"collapsedChildTrigger\"\n zPosition=\"right\"\n [zOffset]=\"6\">\n {{ child.name | translate }}\n </span>\n @if (childHasChildren) {\n <z-icon\n zType=\"lucideChevronRight\"\n zSize=\"14\"\n class=\"z-menu-v2-arrow shrink-0 opacity-60\"\n [class.expanded]=\"child.expanded\" />\n }\n </button>\n\n @if (childHasChildren && child.renderChildren) {\n <div class=\"z-menu-v2-submenu-panel collapsed-popover\" [class.expanded]=\"child.renderExpanded\">\n <div class=\"z-menu-v2-submenu-panel-inner\">\n <div class=\"z-menu-v2-submenu z-menu-v2-submenu-nested\">\n @for (subChild of child.children; track subChild.id) {\n @let subChildActive = selectedMenuItem()?.id === subChild.id;\n <button\n #collapsedSubChildTrigger\n type=\"button\"\n data-glide-item\n class=\"z-menu-v2-popover-item\"\n [class.active]=\"subChildActive\"\n (click)=\"onCollapsedLeafClick(subChild, close)\">\n @if (subChild.icon) {\n <z-icon [zType]=\"subChild.icon\" zSize=\"15\" class=\"shrink-0\" />\n }\n @if (!subChild.icon && subChild.iconSvg) {\n <z-icon [zSvg]=\"subChild.iconSvg\" zSize=\"15\" class=\"shrink-0\" />\n }\n @if (!subChild.icon && !subChild.iconSvg) {\n <span class=\"z-menu-v2-dot small\"></span>\n }\n <span\n class=\"min-w-0 flex-1 overflow-hidden text-left text-ellipsis whitespace-nowrap\"\n z-tooltip\n [zContent]=\"subChild.name | translate\"\n [zTriggerElement]=\"collapsedSubChildTrigger\"\n zPosition=\"right\"\n [zOffset]=\"6\">\n {{ subChild.name | translate }}\n </span>\n </button>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #userFooterTpl>\n <div class=\"border-sidebar-border shrink-0 border-t p-2\">\n <button\n type=\"button\"\n z-popover\n [zPopoverContent]=\"userPopoverTpl\"\n zPosition=\"right-bottom\"\n [zOffset]=\"10\"\n class=\"hover:bg-sidebar-accent flex w-full cursor-pointer items-center gap-3 rounded-md p-2 text-left\"\n [class.justify-center]=\"sidebarCollapsed()\"\n [attr.aria-label]=\"sidebarCollapsed() ? zUser()?.name || 'User Name' : null\">\n <span class=\"h-9 w-9 shrink-0 overflow-hidden rounded-full\">\n <img [src]=\"avatarSrc()\" alt=\"User Avatar\" class=\"h-full w-full object-cover\" />\n </span>\n @if (!sidebarCollapsed()) {\n <span class=\"min-w-0 flex-1\">\n <span class=\"block overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap\">\n {{ zUser()?.name || 'User Name' }}\n </span>\n <span class=\"text-muted-foreground block overflow-hidden text-xs text-ellipsis whitespace-nowrap\">\n {{ zUser()?.email || 'user@example.com' }}\n </span>\n </span>\n <z-icon zType=\"lucideChevronsUpDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n }\n </button>\n </div>\n</ng-template>\n\n<ng-template #mobileUserFooterTpl>\n <div class=\"border-sidebar-border shrink-0 border-t p-3\">\n <button\n type=\"button\"\n z-popover\n [zPopoverContent]=\"userPopoverTpl\"\n zPosition=\"top-right\"\n [zOffset]=\"6\"\n class=\"hover:bg-sidebar-accent flex w-full cursor-pointer items-center gap-3 rounded-md p-2 text-left\">\n <span class=\"h-10 w-10 shrink-0 overflow-hidden rounded-full\">\n <img [src]=\"avatarSrc()\" alt=\"User Avatar\" class=\"h-full w-full object-cover\" />\n </span>\n <span class=\"min-w-0 flex-1\">\n <span class=\"block overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap\">\n {{ zUser()?.name || 'User Name' }}\n </span>\n <span class=\"text-muted-foreground block overflow-hidden text-xs text-ellipsis whitespace-nowrap\">\n {{ zUser()?.email || 'user@example.com' }}\n </span>\n </span>\n <z-icon zType=\"lucideChevronsUpDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n </button>\n </div>\n</ng-template>\n\n<ng-template #userPopoverTpl let-close=\"close\">\n <div class=\"min-w-56 p-1\">\n <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n <div class=\"h-8 w-8 shrink-0 overflow-hidden rounded-full\">\n <img [src]=\"avatarSrc()\" alt=\"User Avatar\" class=\"aspect-square size-full object-cover\" />\n </div>\n <div class=\"grid flex-1 text-left text-sm leading-tight\">\n <span class=\"overflow-hidden font-medium text-ellipsis whitespace-nowrap\">\n {{ zUser()?.name || 'User Name' }}\n </span>\n <span class=\"text-muted-foreground mt-0.5 overflow-hidden text-xs text-ellipsis whitespace-nowrap\">\n {{ zUser()?.email || 'user@example.com' }}\n </span>\n </div>\n </div>\n\n @if (visibleUserActions().length > 0) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n\n <div zHoverGlide zHoverGlideClass=\"bg-accent rounded-(--radius-sm)\">\n @for (action of visibleUserActions(); track action.id; let idx = $index) {\n @if (action.divide === 'before' && idx > 0) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n\n <button\n #userActionTrigger\n type=\"button\"\n [disabled]=\"action.disabled\"\n data-glide-item\n [class]=\"action.class\"\n class=\"focus:bg-accent relative flex w-full cursor-pointer items-center gap-2 rounded-(--radius-sm) px-2 py-1.5 text-sm outline-none disabled:pointer-events-none disabled:opacity-50\"\n (click)=\"onUserActionClick(action); close()\">\n @if (action.icon) {\n <z-icon [zType]=\"action.icon\" zSize=\"14\" class=\"text-muted-foreground\" />\n }\n <span\n class=\"min-w-0 overflow-hidden text-ellipsis whitespace-nowrap\"\n z-tooltip\n [zContent]=\"action.label | translate\"\n [zTriggerElement]=\"userActionTrigger\"\n zPosition=\"right\"\n [zOffset]=\"6\">\n {{ action.label | translate }}\n </span>\n </button>\n\n @if (action.divide === 'after' && idx < visibleUserActions().length - 1) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n }\n </div>\n </div>\n</ng-template>\n\n<ng-template #openChildrenTpl let-children let-position=\"position\">\n <div zHoverGlide zHoverGlideClass=\"bg-accent rounded-sm\" class=\"z-menu-v2-submenu\">\n @for (child of children; track child.id) {\n @let childActive = selectedMenuItem()?.id === child.id;\n @let childParentActive = selectedMenuItem()?.parent?.includes(child.id);\n @let childHasChildren = child.children && child.children.length > 0;\n <div class=\"z-menu-v2-menu-group\">\n <button\n #openChildTrigger\n type=\"button\"\n data-glide-item\n class=\"z-menu-v2-item z-menu-v2-item-child\"\n [class.active]=\"childActive\"\n [class.parent-active]=\"childParentActive\"\n (click)=\"onMenuItemClick(child)\">\n @if (child.icon) {\n <z-icon [zType]=\"child.icon\" zSize=\"16\" class=\"shrink-0\" />\n }\n @if (!child.icon && child.iconSvg) {\n <z-icon [zSvg]=\"child.iconSvg\" zSize=\"16\" class=\"shrink-0\" />\n }\n @if (!child.icon && !child.iconSvg) {\n <span class=\"z-menu-v2-dot\"></span>\n }\n <span\n class=\"min-w-0 flex-1 overflow-hidden text-left text-ellipsis whitespace-nowrap\"\n z-tooltip\n [zContent]=\"child.name | translate\"\n [zTriggerElement]=\"openChildTrigger\"\n [zPosition]=\"position\"\n [zOffset]=\"6\">\n {{ child.name | translate }}\n </span>\n @if (childHasChildren) {\n <z-icon\n zType=\"lucideChevronRight\"\n zSize=\"14\"\n class=\"z-menu-v2-arrow shrink-0 opacity-60\"\n [class.expanded]=\"child.expanded\" />\n }\n </button>\n\n @if (childHasChildren && child.renderChildren) {\n <div class=\"z-menu-v2-submenu-panel\" [class.expanded]=\"child.renderExpanded\">\n <div class=\"z-menu-v2-submenu-panel-inner\">\n <ng-container\n *ngTemplateOutlet=\"openChildrenTpl; context: { $implicit: child.children, position: position }\" />\n </div>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n@if (zShowMobileBar()) {\n <div\n class=\"z-menu-v2-mobile-bar border-border bg-background flex h-14 items-center justify-between border-b px-4 md:hidden\">\n @if (mobileLogo()) {\n <img [src]=\"mobileLogo()\" alt=\"Logo\" class=\"h-8 w-auto object-contain\" />\n }\n <button z-button zType=\"ghost\" [zWave]=\"false\" class=\"h-9 w-9\" (click)=\"openMobileMenu()\">\n <z-icon zType=\"lucideMenu\" zSize=\"20\" />\n </button>\n </div>\n}\n\n@if (mobileMenuOpen()) {\n <div\n class=\"z-menu-v2-backdrop fixed inset-0 z-9998 md:hidden\"\n [class.z-menu-v2-backdrop-dark]=\"overlayType() === 'dark'\"\n [class.z-menu-v2-backdrop-blur]=\"overlayType() === 'blur'\"\n (click)=\"onMobileBackdropClick()\"></div>\n}\n\n<aside\n class=\"z-menu-v2-mobile-drawer fixed top-0 left-0 z-9999 flex h-full w-72 max-w-[calc(100vw-1rem)] flex-col border-r md:hidden\"\n [class.open]=\"mobileMenuOpen()\">\n <div class=\"border-sidebar-border flex h-14 shrink-0 items-center justify-between border-b px-4\">\n @if (mobileLogo()) {\n <img [src]=\"mobileLogo()\" alt=\"Logo\" class=\"h-8 w-auto object-contain\" />\n }\n <button z-button zType=\"ghost\" [zWave]=\"false\" class=\"h-9 w-9\" (click)=\"closeMobileMenu()\">\n <z-icon zType=\"lucideX\" zSize=\"20\" />\n </button>\n </div>\n\n <ng-scrollbar class=\"z-menu-v2-scrollbar flex-1\" track=\"vertical\">\n <nav zHoverGlide zHoverGlideClass=\"bg-accent rounded-sm\" class=\"z-menu-v2-nav flex flex-col p-3\">\n @for (parent of menuParents(); track parent.id) {\n @let parentActive = parentWithActiveChild()?.id === parent.id;\n @let parentLeafActive = selectedMenuItem()?.id === parent.id;\n @let parentHasChildren = parent.children && parent.children.length > 0;\n @if (parent.groupLabel) {\n <div class=\"mt-1 first:mt-0\">\n <div class=\"border-sidebar-border mb-2.5 border-t\"></div>\n <div class=\"text-muted-foreground px-2 pb-0.5 text-[0.6875rem] font-semibold tracking-wider uppercase\">\n {{ parent.groupLabel | translate }}\n </div>\n </div>\n }\n <div class=\"z-menu-v2-menu-group\">\n <button\n #mobileParentTrigger\n type=\"button\"\n data-glide-item\n class=\"z-menu-v2-item\"\n [class.active]=\"parentLeafActive\"\n [class.parent-active]=\"parentActive && !parentLeafActive\"\n (click)=\"onMenuItemClick(parent)\">\n @if (parent.icon) {\n <z-icon [zType]=\"parent.icon\" zSize=\"18\" class=\"shrink-0\" />\n }\n @if (!parent.icon && parent.iconSvg) {\n <z-icon [zSvg]=\"parent.iconSvg\" zSize=\"18\" class=\"shrink-0\" />\n }\n <span\n class=\"min-w-0 flex-1 overflow-hidden text-left text-ellipsis whitespace-nowrap\"\n z-tooltip\n [zContent]=\"parent.name | translate\"\n [zTriggerElement]=\"mobileParentTrigger\"\n zPosition=\"top\"\n [zOffset]=\"6\">\n {{ parent.name | translate }}\n </span>\n @if (parentHasChildren) {\n <z-icon\n zType=\"lucideChevronRight\"\n zSize=\"15\"\n class=\"z-menu-v2-arrow shrink-0 opacity-60\"\n [class.expanded]=\"parent.expanded\" />\n }\n </button>\n\n @if (parentHasChildren && parent.renderChildren) {\n <div class=\"z-menu-v2-submenu-panel\" [class.expanded]=\"parent.renderExpanded\">\n <div class=\"z-menu-v2-submenu-panel-inner\">\n <ng-container\n *ngTemplateOutlet=\"openChildrenTpl; context: { $implicit: parent.children, position: 'top' }\" />\n </div>\n </div>\n }\n </div>\n }\n </nav>\n </ng-scrollbar>\n\n <ng-container *ngTemplateOutlet=\"mobileUserFooterTpl\" />\n</aside>\n", styles: [".z-menu-v2{display:block;flex:0 0 auto;min-width:0;height:100%;contain:style}.z-menu-v2 [class*=cursor-pointer],.z-menu-v2 button{-webkit-user-select:none;user-select:none}.z-menu-v2-shell{background-color:var(--z-menu-v2-sidebar, var(--sidebar));color:var(--z-menu-v2-sidebar-foreground, var(--sidebar-foreground));border-color:var(--z-menu-v2-border, var(--sidebar-border));min-width:0;width:var(--z-menu-v2-expanded-width, 248px);transition:width .2s cubic-bezier(.4,0,.2,1);will-change:width}.z-menu-v2-collapsed .z-menu-v2-shell{width:var(--z-menu-v2-collapsed-width, 60px)}.z-menu-v2-toggle{position:relative;z-index:1}.z-menu-v2-toggle.z-menu-v2-toggle-collapsed{background-color:var(--z-menu-v2-accent, var(--sidebar-accent));color:var(--z-menu-v2-accent-foreground, var(--sidebar-accent-foreground))}.z-menu-v2-nav{gap:.25rem}.z-menu-v2-menu-group{display:flex;min-width:0;flex-direction:column}.z-menu-v2-item,.z-menu-v2-popover-item,.z-menu-v2-icon-item{min-width:0;border-radius:var(--radius-sm);position:relative;z-index:1;outline:none;transition:background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1)}.z-menu-v2-item{display:flex;width:100%;cursor:pointer;align-items:center;gap:.625rem;padding:.5rem .625rem;font-size:.8125rem;font-weight:450}.z-menu-v2-item:hover{color:var(--z-menu-v2-accent-foreground, var(--accent-foreground))}.z-menu-v2-item.active{background-color:var(--z-menu-v2-active, var(--sidebar-primary));color:var(--z-menu-v2-active-foreground, var(--sidebar-primary-foreground))}.z-menu-v2-item.parent-active:not(.active){color:var(--z-menu-v2-active, var(--sidebar-primary))}.z-menu-v2-item.parent-active:not(.active):hover{color:var(--z-menu-v2-active, var(--sidebar-primary))}.z-menu-v2-item.active .z-menu-v2-dot,.z-menu-v2-item.parent-active .z-menu-v2-dot{background-color:currentColor}.z-menu-v2-item.icon-only{justify-content:center;padding-inline:0;width:2.5rem;height:2.5rem;margin-inline:auto}.z-menu-v2-icon-item{display:flex;width:2.5rem;height:2.5rem;cursor:pointer;align-items:center;justify-content:center;margin-inline:auto}.z-menu-v2-icon-item:hover{color:var(--z-menu-v2-accent-foreground, var(--accent-foreground))}.z-menu-v2-icon-item.active{background-color:var(--z-menu-v2-active, var(--sidebar-primary));color:var(--z-menu-v2-active-foreground, var(--sidebar-primary-foreground))}.z-menu-v2-popover-item{display:flex;width:100%;cursor:pointer;align-items:center;gap:.5rem;padding:.45rem .5rem;font-size:.8125rem;font-weight:450}.z-menu-v2-popover-item:hover{color:var(--z-menu-v2-accent-foreground, var(--accent-foreground))}.z-menu-v2-popover-item.active{background-color:var(--z-menu-v2-active, var(--sidebar-primary));color:var(--z-menu-v2-active-foreground, var(--sidebar-primary-foreground))}.z-menu-v2-popover-item.parent-active:not(.active){background-color:transparent;color:var(--z-menu-v2-active, var(--sidebar-primary))}.z-menu-v2-popover-item.parent-active:not(.active):hover{color:var(--z-menu-v2-active, var(--sidebar-primary))}.z-menu-v2-popover-item.active .z-menu-v2-dot,.z-menu-v2-popover-item.parent-active .z-menu-v2-dot{background-color:currentColor}.z-menu-v2-item-child{position:relative;padding-left:.75rem}.z-menu-v2-item-sub-child{position:relative;padding-left:.75rem;font-size:.78125rem}.z-menu-v2-submenu-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s cubic-bezier(.16,1,.3,1)}.z-menu-v2-submenu-panel.expanded{grid-template-rows:1fr}.z-menu-v2-submenu-panel-inner{min-height:0;overflow:hidden}.z-menu-v2-submenu-panel-inner:before{content:\"\";display:block;height:.25rem}.z-menu-v2-submenu{position:relative;display:flex;min-width:0;min-height:0;flex-direction:column;gap:.25rem;margin:0 0 0 .875rem;padding-left:.875rem}.z-menu-v2-submenu:before{content:\"\";position:absolute;top:0;bottom:.75rem;left:0;width:1px;background-color:color-mix(in oklab,var(--z-menu-v2-border, var(--sidebar-border)) 84%,transparent)}.z-menu-v2-submenu .z-menu-v2-item,.z-menu-v2-submenu .z-menu-v2-popover-item{position:relative}.z-menu-v2-submenu .z-menu-v2-item:before,.z-menu-v2-submenu .z-menu-v2-popover-item:before{content:\"\";position:absolute;top:50%;left:-.875rem;width:.875rem;height:1px;background-color:color-mix(in oklab,var(--z-menu-v2-border, var(--sidebar-border)) 84%,transparent)}.z-menu-v2-submenu .z-menu-v2-item.active:before,.z-menu-v2-submenu .z-menu-v2-item.parent-active:before,.z-menu-v2-submenu .z-menu-v2-popover-item.active:before,.z-menu-v2-submenu .z-menu-v2-popover-item.parent-active:before{background-color:color-mix(in oklab,var(--z-menu-v2-active, var(--sidebar-primary)) 72%,var(--z-menu-v2-border, var(--sidebar-border)))}.z-menu-v2-mobile-drawer{background-color:var(--z-menu-v2-sidebar, var(--sidebar));color:var(--z-menu-v2-sidebar-foreground, var(--sidebar-foreground));border-color:var(--z-menu-v2-border, var(--sidebar-border))}.z-menu-v2-shell .border-sidebar-border,.z-menu-v2-mobile-drawer .border-sidebar-border{border-color:var(--z-menu-v2-border, var(--sidebar-border))}.z-menu-v2-shell .hover\\:bg-sidebar-accent:hover,.z-menu-v2-mobile-drawer .hover\\:bg-sidebar-accent:hover{background-color:var(--z-menu-v2-accent, var(--sidebar-accent))}.z-menu-v2-submenu-nested{margin-left:.75rem}.z-menu-v2-popover-tree{margin-top:0;margin-bottom:0}.z-menu-v2-popover-scrollbar{--scrollbar-padding: 0;--scrollbar-overscroll-behavior: contain;max-height:min(28rem,100vh - 8rem);min-height:0;overflow-x:hidden;overflow-y:auto}.z-menu-v2-popover-scroll-content{min-width:0}.z-menu-v2-arrow{transition:transform .2s cubic-bezier(.4,0,.2,1)}.z-menu-v2-arrow.expanded{transform:rotate(90deg)}.z-menu-v2-dot{display:inline-flex;width:.375rem;height:.375rem;flex-shrink:0;border-radius:9999px;background-color:color-mix(in oklab,var(--z-menu-v2-sidebar-foreground, var(--sidebar-foreground)) 58%,transparent)}.z-menu-v2-dot.small{width:.25rem;height:.25rem}.z-menu-v2-scrollbar{--scrollbar-padding: 0;max-width:100%}.z-menu-v2-scrollbar .ng-scroll-viewport,.z-menu-v2-scrollbar .ng-scroll-content{max-width:100%}.z-menu-v2-backdrop{animation:z-menu-v2-backdrop-enter .2s ease-out forwards}.z-menu-v2-backdrop-dark{background-color:#0009}.z-menu-v2-backdrop-blur{background-color:#0000000d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.z-menu-v2-mobile-drawer{transform:translate(-100%);transition:transform .3s cubic-bezier(.32,.72,0,1);box-shadow:4px 0 24px #0000001a;will-change:transform}.z-menu-v2-mobile-drawer.open{transform:translate(0)}@keyframes z-menu-v2-backdrop-enter{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZHoverGlideDirective, selector: "[zHoverGlide]", inputs: ["zHoverGlideSelector", "zHoverGlideClass", "zHoverGlideDisabled"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zSticky", "zShowArrow", "zKeyboardSafe"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zContext", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport]), [ngScrollbar]", exportAs: ["ngScrollbar"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
879
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ZMenuV2Component, isStandalone: true, selector: "z-menu-v2", inputs: { zLogo: { classPropertyName: "zLogo", publicName: "zLogo", isSignal: true, isRequired: false, transformFunction: null }, zLogoMobile: { classPropertyName: "zLogoMobile", publicName: "zLogoMobile", isSignal: true, isRequired: false, transformFunction: null }, zMenus: { classPropertyName: "zMenus", publicName: "zMenus", isSignal: true, isRequired: false, transformFunction: null }, zUser: { classPropertyName: "zUser", publicName: "zUser", isSignal: true, isRequired: false, transformFunction: null }, zUserActions: { classPropertyName: "zUserActions", publicName: "zUserActions", isSignal: true, isRequired: false, transformFunction: null }, zCurrentPath: { classPropertyName: "zCurrentPath", publicName: "zCurrentPath", isSignal: true, isRequired: false, transformFunction: null }, zKey: { classPropertyName: "zKey", publicName: "zKey", isSignal: true, isRequired: false, transformFunction: null }, zClass: { classPropertyName: "zClass", publicName: "zClass", isSignal: true, isRequired: false, transformFunction: null }, zTitle: { classPropertyName: "zTitle", publicName: "zTitle", isSignal: true, isRequired: false, transformFunction: null }, zCollapsedWidth: { classPropertyName: "zCollapsedWidth", publicName: "zCollapsedWidth", isSignal: true, isRequired: false, transformFunction: null }, zExpandedWidth: { classPropertyName: "zExpandedWidth", publicName: "zExpandedWidth", isSignal: true, isRequired: false, transformFunction: null }, zExpandMode: { classPropertyName: "zExpandMode", publicName: "zExpandMode", isSignal: true, isRequired: false, transformFunction: null }, zShowMobileBar: { classPropertyName: "zShowMobileBar", publicName: "zShowMobileBar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnSelect: "zOnSelect", zOnMenuAction: "zOnMenuAction", zControl: "zControl" }, host: { properties: { "class.z-menu-v2-collapsed": "sidebarCollapsed()", "class.z-menu-v2-mobile-open": "mobileMenuOpen()", "class.z-menu-v2-mobile": "isMobile()" }, classAttribute: "z-menu-v2 block" }, providers: [TranslatePipe], ngImport: i0, template: "<aside\n class=\"hidden h-full min-h-0 flex-col overflow-hidden border-r shadow-sm md:flex\"\n [class]=\"zClasses()\"\n [style.--z-menu-v2-expanded-width.px]=\"zExpandedWidth()\"\n [style.--z-menu-v2-collapsed-width.px]=\"zCollapsedWidth()\">\n <div\n class=\"border-sidebar-border flex h-14 shrink-0 items-center gap-2 border-b px-3\"\n [class.justify-center]=\"sidebarCollapsed()\">\n @if (!sidebarCollapsed() && zLogo()) {\n <img [src]=\"zLogo()\" alt=\"Logo\" class=\"h-8 w-auto shrink-0 object-contain transition-opacity\" />\n }\n\n @if (!sidebarCollapsed()) {\n <div\n class=\"min-w-0 flex-1 overflow-hidden text-sm font-semibold text-ellipsis whitespace-nowrap\"\n z-tooltip\n [zContent]=\"effectiveTitle() | translate\"\n zPosition=\"right\"\n [zOffset]=\"6\">\n {{ effectiveTitle() | translate }}\n </div>\n }\n\n <button\n z-button\n zType=\"ghost\"\n [zWave]=\"false\"\n class=\"z-menu-v2-toggle h-9 w-9 shrink-0\"\n [class.z-menu-v2-toggle-collapsed]=\"sidebarCollapsed()\"\n [attr.aria-label]=\"\n (sidebarCollapsed() ? 'i18n_z_ui_menu_expand_sidebar' : 'i18n_z_ui_menu_collapse_sidebar') | translate\n \"\n (click)=\"toggleSidebar()\">\n <z-icon [zType]=\"sidebarCollapsed() ? 'lucidePanelLeftOpen' : 'lucidePanelLeftClose'\" zSize=\"18\" />\n </button>\n </div>\n\n <ng-scrollbar class=\"z-menu-v2-scrollbar min-h-0 flex-1\" track=\"vertical\">\n <nav zHoverGlide zHoverGlideClass=\"bg-accent rounded-sm\" class=\"z-menu-v2-nav flex flex-col p-2\">\n @for (parent of menuParents(); track parent.id) {\n @let parentActive = parentWithActiveChild()?.id === parent.id;\n @let parentLeafActive = selectedMenuItem()?.id === parent.id;\n @let parentHasChildren = parent.children && parent.children.length > 0;\n\n @if (parent.groupLabel && !sidebarCollapsed()) {\n <div class=\"mt-1 first:mt-0\">\n <div class=\"border-sidebar-border mb-2.5 border-t\"></div>\n <div class=\"text-muted-foreground px-2 pb-0.5 text-[0.6875rem] font-semibold tracking-wider uppercase\">\n {{ parent.groupLabel | translate }}\n </div>\n </div>\n }\n @if (sidebarCollapsed() && parentHasChildren) {\n <button\n type=\"button\"\n z-popover\n [zPopoverContent]=\"parentPopoverTpl\"\n [zPopoverWidth]=\"256\"\n zPosition=\"right-top\"\n [zOffset]=\"13\"\n data-glide-item\n class=\"z-menu-v2-icon-item\"\n [class.active]=\"parentActive || parentLeafActive\"\n [attr.aria-label]=\"parent.name | translate\"\n (click)=\"onCollapsedParentClick(parent)\">\n @if (parent.icon) {\n <z-icon [zType]=\"parent.icon\" zSize=\"20\" />\n }\n @if (!parent.icon && parent.iconSvg) {\n <z-icon [zSvg]=\"parent.iconSvg\" zSize=\"20\" />\n }\n </button>\n\n <ng-template #parentPopoverTpl let-close=\"close\">\n <div class=\"z-menu-v2-popover w-64 max-w-64 min-w-0 pt-1 pl-1\">\n <div\n #parentPopoverHeaderTrigger\n class=\"text-muted-foreground flex items-center gap-2 px-2 py-2 text-xs font-medium\">\n @if (parent.icon) {\n <z-icon [zType]=\"parent.icon\" zSize=\"15\" />\n }\n <span\n class=\"overflow-hidden text-ellipsis whitespace-nowrap\"\n z-tooltip\n [zContent]=\"parent.name | translate\"\n [zTriggerElement]=\"parentPopoverHeaderTrigger\"\n zPosition=\"right\"\n [zOffset]=\"6\">\n {{ parent.name | translate }}\n </span>\n </div>\n <ng-scrollbar\n class=\"z-menu-v2-popover-scrollbar\"\n orientation=\"vertical\"\n visibility=\"hover\"\n >\n <div class=\"z-menu-v2-popover-scroll-content pr-2 pb-1\">\n <ng-container\n *ngTemplateOutlet=\"collapsedChildrenTpl; context: { $implicit: parent.children, close: close }\" />\n </div>\n </ng-scrollbar>\n </div>\n </ng-template>\n }\n @if (!(sidebarCollapsed() && parentHasChildren)) {\n <ng-container *ngTemplateOutlet=\"openParentTpl; context: { $implicit: parent }\" />\n }\n }\n </nav>\n </ng-scrollbar>\n\n <ng-container *ngTemplateOutlet=\"userFooterTpl\" />\n</aside>\n\n<ng-template #openParentTpl let-parent>\n @let parentActive = parentWithActiveChild()?.id === parent.id;\n @let parentLeafActive = selectedMenuItem()?.id === parent.id;\n @let parentHasChildren = parent.children && parent.children.length > 0;\n\n <div class=\"z-menu-v2-menu-group\">\n <button\n #parentTrigger\n type=\"button\"\n data-glide-item\n class=\"z-menu-v2-item\"\n [class.active]=\"parentLeafActive\"\n [class.parent-active]=\"parentActive && !parentLeafActive\"\n [class.icon-only]=\"sidebarCollapsed()\"\n [attr.aria-label]=\"sidebarCollapsed() ? (parent.name | translate) : null\"\n z-tooltip\n [zContent]=\"parent.name | translate\"\n zPosition=\"right\"\n [zOffset]=\"6\"\n [zDisabled]=\"!sidebarCollapsed()\"\n [zAlwaysShow]=\"sidebarCollapsed()\"\n (click)=\"onMenuItemClick(parent)\">\n @if (parent.icon) {\n <z-icon [zType]=\"parent.icon\" [zSize]=\"sidebarCollapsed() ? '20' : '18'\" class=\"shrink-0\" />\n }\n @if (!parent.icon && parent.iconSvg) {\n <z-icon [zSvg]=\"parent.iconSvg\" [zSize]=\"sidebarCollapsed() ? '20' : '18'\" class=\"shrink-0\" />\n }\n\n @if (!sidebarCollapsed()) {\n <span\n class=\"min-w-0 flex-1 overflow-hidden text-left text-ellipsis whitespace-nowrap\"\n z-tooltip\n [zContent]=\"parent.name | translate\"\n [zTriggerElement]=\"parentTrigger\"\n zPosition=\"right\"\n [zOffset]=\"6\">\n {{ parent.name | translate }}\n </span>\n @if (parentHasChildren) {\n <z-icon\n zType=\"lucideChevronRight\"\n zSize=\"15\"\n class=\"z-menu-v2-arrow shrink-0 opacity-60\"\n [class.expanded]=\"parent.expanded\" />\n }\n }\n </button>\n\n @if (!sidebarCollapsed() && parentHasChildren && parent.renderChildren) {\n <div class=\"z-menu-v2-submenu-panel\" [class.expanded]=\"parent.renderExpanded\">\n <div class=\"z-menu-v2-submenu-panel-inner\">\n <ng-container\n *ngTemplateOutlet=\"openChildrenTpl; context: { $implicit: parent.children, position: 'right' }\" />\n </div>\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #collapsedChildrenTpl let-children let-close=\"close\">\n <div zHoverGlide zHoverGlideClass=\"bg-accent rounded-sm\" class=\"z-menu-v2-submenu z-menu-v2-popover-tree\">\n @for (child of children; track child.id) {\n @let childActive = selectedMenuItem()?.id === child.id;\n @let childParentActive = selectedMenuItem()?.parent?.includes(child.id);\n @let childHasChildren = child.children && child.children.length > 0;\n <div class=\"z-menu-v2-menu-group\">\n <button\n #collapsedChildTrigger\n type=\"button\"\n data-glide-item\n class=\"z-menu-v2-popover-item\"\n [class.active]=\"childActive\"\n [class.parent-active]=\"childParentActive\"\n (click)=\"childHasChildren ? onMenuItemClick(child) : onCollapsedLeafClick(child, close)\">\n @if (child.icon) {\n <z-icon [zType]=\"child.icon\" zSize=\"16\" class=\"shrink-0\" />\n }\n @if (!child.icon && child.iconSvg) {\n <z-icon [zSvg]=\"child.iconSvg\" zSize=\"16\" class=\"shrink-0\" />\n }\n @if (!child.icon && !child.iconSvg) {\n <span class=\"z-menu-v2-dot\"></span>\n }\n <span\n class=\"min-w-0 flex-1 overflow-hidden text-left text-ellipsis whitespace-nowrap\"\n z-tooltip\n [zContent]=\"child.name | translate\"\n [zTriggerElement]=\"collapsedChildTrigger\"\n zPosition=\"right\"\n [zOffset]=\"6\">\n {{ child.name | translate }}\n </span>\n @if (childHasChildren) {\n <z-icon\n zType=\"lucideChevronRight\"\n zSize=\"14\"\n class=\"z-menu-v2-arrow shrink-0 opacity-60\"\n [class.expanded]=\"child.expanded\" />\n }\n </button>\n\n @if (childHasChildren && child.renderChildren) {\n <div class=\"z-menu-v2-submenu-panel collapsed-popover\" [class.expanded]=\"child.renderExpanded\">\n <div class=\"z-menu-v2-submenu-panel-inner\">\n <div class=\"z-menu-v2-submenu z-menu-v2-submenu-nested\">\n @for (subChild of child.children; track subChild.id) {\n @let subChildActive = selectedMenuItem()?.id === subChild.id;\n <button\n #collapsedSubChildTrigger\n type=\"button\"\n data-glide-item\n class=\"z-menu-v2-popover-item\"\n [class.active]=\"subChildActive\"\n (click)=\"onCollapsedLeafClick(subChild, close)\">\n @if (subChild.icon) {\n <z-icon [zType]=\"subChild.icon\" zSize=\"15\" class=\"shrink-0\" />\n }\n @if (!subChild.icon && subChild.iconSvg) {\n <z-icon [zSvg]=\"subChild.iconSvg\" zSize=\"15\" class=\"shrink-0\" />\n }\n @if (!subChild.icon && !subChild.iconSvg) {\n <span class=\"z-menu-v2-dot small\"></span>\n }\n <span\n class=\"min-w-0 flex-1 overflow-hidden text-left text-ellipsis whitespace-nowrap\"\n z-tooltip\n [zContent]=\"subChild.name | translate\"\n [zTriggerElement]=\"collapsedSubChildTrigger\"\n zPosition=\"right\"\n [zOffset]=\"6\">\n {{ subChild.name | translate }}\n </span>\n </button>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #userFooterTpl>\n <div class=\"border-sidebar-border shrink-0 border-t p-2\">\n <button\n type=\"button\"\n z-popover\n [zPopoverContent]=\"userPopoverTpl\"\n zPosition=\"right-bottom\"\n [zOffset]=\"10\"\n class=\"hover:bg-sidebar-accent flex w-full cursor-pointer items-center gap-3 rounded-md p-2 text-left\"\n [class.justify-center]=\"sidebarCollapsed()\"\n [attr.aria-label]=\"sidebarCollapsed() ? zUser()?.name || 'User Name' : null\">\n <span class=\"h-9 w-9 shrink-0 overflow-hidden rounded-full\">\n <img [src]=\"avatarSrc()\" alt=\"User Avatar\" class=\"h-full w-full object-cover\" />\n </span>\n @if (!sidebarCollapsed()) {\n <span class=\"min-w-0 flex-1\">\n <span class=\"block overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap\">\n {{ zUser()?.name || 'User Name' }}\n </span>\n <span class=\"text-muted-foreground block overflow-hidden text-xs text-ellipsis whitespace-nowrap\">\n {{ zUser()?.email || 'user@example.com' }}\n </span>\n </span>\n <z-icon zType=\"lucideChevronsUpDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n }\n </button>\n </div>\n</ng-template>\n\n<ng-template #mobileUserFooterTpl>\n <div class=\"border-sidebar-border shrink-0 border-t p-3\">\n <button\n type=\"button\"\n z-popover\n [zPopoverContent]=\"userPopoverTpl\"\n zPosition=\"top-right\"\n [zOffset]=\"6\"\n class=\"hover:bg-sidebar-accent flex w-full cursor-pointer items-center gap-3 rounded-md p-2 text-left\">\n <span class=\"h-10 w-10 shrink-0 overflow-hidden rounded-full\">\n <img [src]=\"avatarSrc()\" alt=\"User Avatar\" class=\"h-full w-full object-cover\" />\n </span>\n <span class=\"min-w-0 flex-1\">\n <span class=\"block overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap\">\n {{ zUser()?.name || 'User Name' }}\n </span>\n <span class=\"text-muted-foreground block overflow-hidden text-xs text-ellipsis whitespace-nowrap\">\n {{ zUser()?.email || 'user@example.com' }}\n </span>\n </span>\n <z-icon zType=\"lucideChevronsUpDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n </button>\n </div>\n</ng-template>\n\n<ng-template #userPopoverTpl let-close=\"close\">\n <div class=\"min-w-56 p-1\">\n <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n <div class=\"h-8 w-8 shrink-0 overflow-hidden rounded-full\">\n <img [src]=\"avatarSrc()\" alt=\"User Avatar\" class=\"aspect-square size-full object-cover\" />\n </div>\n <div class=\"grid flex-1 text-left text-sm leading-tight\">\n <span class=\"overflow-hidden font-medium text-ellipsis whitespace-nowrap\">\n {{ zUser()?.name || 'User Name' }}\n </span>\n <span class=\"text-muted-foreground mt-0.5 overflow-hidden text-xs text-ellipsis whitespace-nowrap\">\n {{ zUser()?.email || 'user@example.com' }}\n </span>\n </div>\n </div>\n\n @if (visibleUserActions().length > 0) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n\n <div zHoverGlide zHoverGlideClass=\"bg-accent rounded-(--radius-sm)\">\n @for (action of visibleUserActions(); track action.id; let idx = $index) {\n @if (action.divide === 'before' && idx > 0) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n\n <button\n #userActionTrigger\n type=\"button\"\n [disabled]=\"action.disabled\"\n data-glide-item\n [class]=\"action.class\"\n class=\"focus:bg-accent relative flex w-full cursor-pointer items-center gap-2 rounded-(--radius-sm) px-2 py-1.5 text-sm outline-none disabled:pointer-events-none disabled:opacity-50\"\n (click)=\"onUserActionClick(action); close()\">\n @if (action.icon) {\n <z-icon [zType]=\"action.icon\" zSize=\"14\" class=\"text-muted-foreground\" />\n }\n <span\n class=\"min-w-0 overflow-hidden text-ellipsis whitespace-nowrap\"\n z-tooltip\n [zContent]=\"action.label | translate\"\n [zTriggerElement]=\"userActionTrigger\"\n zPosition=\"right\"\n [zOffset]=\"6\">\n {{ action.label | translate }}\n </span>\n </button>\n\n @if (action.divide === 'after' && idx < visibleUserActions().length - 1) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n }\n </div>\n </div>\n</ng-template>\n\n<ng-template #openChildrenTpl let-children let-position=\"position\">\n <div zHoverGlide zHoverGlideClass=\"bg-accent rounded-sm\" class=\"z-menu-v2-submenu\">\n @for (child of children; track child.id) {\n @let childActive = selectedMenuItem()?.id === child.id;\n @let childParentActive = selectedMenuItem()?.parent?.includes(child.id);\n @let childHasChildren = child.children && child.children.length > 0;\n <div class=\"z-menu-v2-menu-group\">\n <button\n #openChildTrigger\n type=\"button\"\n data-glide-item\n class=\"z-menu-v2-item z-menu-v2-item-child\"\n [class.active]=\"childActive\"\n [class.parent-active]=\"childParentActive\"\n (click)=\"onMenuItemClick(child)\">\n @if (child.icon) {\n <z-icon [zType]=\"child.icon\" zSize=\"16\" class=\"shrink-0\" />\n }\n @if (!child.icon && child.iconSvg) {\n <z-icon [zSvg]=\"child.iconSvg\" zSize=\"16\" class=\"shrink-0\" />\n }\n @if (!child.icon && !child.iconSvg) {\n <span class=\"z-menu-v2-dot\"></span>\n }\n <span\n class=\"min-w-0 flex-1 overflow-hidden text-left text-ellipsis whitespace-nowrap\"\n z-tooltip\n [zContent]=\"child.name | translate\"\n [zTriggerElement]=\"openChildTrigger\"\n [zPosition]=\"position\"\n [zOffset]=\"6\">\n {{ child.name | translate }}\n </span>\n @if (childHasChildren) {\n <z-icon\n zType=\"lucideChevronRight\"\n zSize=\"14\"\n class=\"z-menu-v2-arrow shrink-0 opacity-60\"\n [class.expanded]=\"child.expanded\" />\n }\n </button>\n\n @if (childHasChildren && child.renderChildren) {\n <div class=\"z-menu-v2-submenu-panel\" [class.expanded]=\"child.renderExpanded\">\n <div class=\"z-menu-v2-submenu-panel-inner\">\n <ng-container\n *ngTemplateOutlet=\"openChildrenTpl; context: { $implicit: child.children, position: position }\" />\n </div>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n@if (zShowMobileBar()) {\n <div\n class=\"z-menu-v2-mobile-bar border-border bg-background flex h-14 items-center justify-between border-b px-4 md:hidden\">\n @if (mobileLogo()) {\n <img [src]=\"mobileLogo()\" alt=\"Logo\" class=\"h-8 w-auto object-contain\" />\n }\n <button z-button zType=\"ghost\" [zWave]=\"false\" class=\"h-9 w-9\" (click)=\"openMobileMenu()\">\n <z-icon zType=\"lucideMenu\" zSize=\"20\" />\n </button>\n </div>\n}\n\n@if (mobileMenuOpen()) {\n <div\n class=\"z-menu-v2-backdrop fixed inset-0 z-9998 md:hidden\"\n [class.z-menu-v2-backdrop-dark]=\"overlayType() === 'dark'\"\n [class.z-menu-v2-backdrop-blur]=\"overlayType() === 'blur'\"\n (click)=\"onMobileBackdropClick()\"></div>\n}\n\n<aside\n class=\"z-menu-v2-mobile-drawer fixed top-0 left-0 z-9999 flex h-full w-72 max-w-[calc(100vw-1rem)] flex-col border-r md:hidden\"\n [class.open]=\"mobileMenuOpen()\">\n <div class=\"border-sidebar-border flex h-14 shrink-0 items-center justify-between border-b px-4\">\n @if (mobileLogo()) {\n <img [src]=\"mobileLogo()\" alt=\"Logo\" class=\"h-8 w-auto object-contain\" />\n }\n <button z-button zType=\"ghost\" [zWave]=\"false\" class=\"h-9 w-9\" (click)=\"closeMobileMenu()\">\n <z-icon zType=\"lucideX\" zSize=\"20\" />\n </button>\n </div>\n\n <ng-scrollbar class=\"z-menu-v2-scrollbar flex-1\" track=\"vertical\">\n <nav zHoverGlide zHoverGlideClass=\"bg-accent rounded-sm\" class=\"z-menu-v2-nav flex flex-col p-3\">\n @for (parent of menuParents(); track parent.id) {\n @let parentActive = parentWithActiveChild()?.id === parent.id;\n @let parentLeafActive = selectedMenuItem()?.id === parent.id;\n @let parentHasChildren = parent.children && parent.children.length > 0;\n @if (parent.groupLabel) {\n <div class=\"mt-1 first:mt-0\">\n <div class=\"border-sidebar-border mb-2.5 border-t\"></div>\n <div class=\"text-muted-foreground px-2 pb-0.5 text-[0.6875rem] font-semibold tracking-wider uppercase\">\n {{ parent.groupLabel | translate }}\n </div>\n </div>\n }\n <div class=\"z-menu-v2-menu-group\">\n <button\n #mobileParentTrigger\n type=\"button\"\n data-glide-item\n class=\"z-menu-v2-item\"\n [class.active]=\"parentLeafActive\"\n [class.parent-active]=\"parentActive && !parentLeafActive\"\n (click)=\"onMenuItemClick(parent)\">\n @if (parent.icon) {\n <z-icon [zType]=\"parent.icon\" zSize=\"18\" class=\"shrink-0\" />\n }\n @if (!parent.icon && parent.iconSvg) {\n <z-icon [zSvg]=\"parent.iconSvg\" zSize=\"18\" class=\"shrink-0\" />\n }\n <span\n class=\"min-w-0 flex-1 overflow-hidden text-left text-ellipsis whitespace-nowrap\"\n z-tooltip\n [zContent]=\"parent.name | translate\"\n [zTriggerElement]=\"mobileParentTrigger\"\n zPosition=\"top\"\n [zOffset]=\"6\">\n {{ parent.name | translate }}\n </span>\n @if (parentHasChildren) {\n <z-icon\n zType=\"lucideChevronRight\"\n zSize=\"15\"\n class=\"z-menu-v2-arrow shrink-0 opacity-60\"\n [class.expanded]=\"parent.expanded\" />\n }\n </button>\n\n @if (parentHasChildren && parent.renderChildren) {\n <div class=\"z-menu-v2-submenu-panel\" [class.expanded]=\"parent.renderExpanded\">\n <div class=\"z-menu-v2-submenu-panel-inner\">\n <ng-container\n *ngTemplateOutlet=\"openChildrenTpl; context: { $implicit: parent.children, position: 'top' }\" />\n </div>\n </div>\n }\n </div>\n }\n </nav>\n </ng-scrollbar>\n\n <ng-container *ngTemplateOutlet=\"mobileUserFooterTpl\" />\n</aside>\n", styles: [".z-menu-v2{display:block;flex:0 0 auto;min-width:0;height:100%;contain:style}.z-menu-v2 [class*=cursor-pointer],.z-menu-v2 button{-webkit-user-select:none;user-select:none}.z-menu-v2-shell{background-color:var(--z-menu-v2-sidebar, var(--sidebar));color:var(--z-menu-v2-sidebar-foreground, var(--sidebar-foreground));border-color:var(--z-menu-v2-border, var(--sidebar-border));min-width:0;width:var(--z-menu-v2-expanded-width, 248px);transition:width .2s cubic-bezier(.4,0,.2,1);will-change:width}.z-menu-v2-collapsed .z-menu-v2-shell{width:var(--z-menu-v2-collapsed-width, 60px)}.z-menu-v2-toggle{position:relative;z-index:1}.z-menu-v2-toggle.z-menu-v2-toggle-collapsed{background-color:var(--z-menu-v2-accent, var(--sidebar-accent));color:var(--z-menu-v2-accent-foreground, var(--sidebar-accent-foreground))}.z-menu-v2-nav{gap:.25rem}.z-menu-v2-menu-group{display:flex;min-width:0;flex-direction:column}.z-menu-v2-item,.z-menu-v2-popover-item,.z-menu-v2-icon-item{min-width:0;border-radius:var(--radius-sm);position:relative;z-index:1;outline:none;transition:background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1)}.z-menu-v2-item{display:flex;width:100%;cursor:pointer;align-items:center;gap:.625rem;padding:.5rem .625rem;font-size:.8125rem;font-weight:450}.z-menu-v2-item:hover{color:var(--z-menu-v2-accent-foreground, var(--accent-foreground))}.z-menu-v2-item.active{background-color:var(--z-menu-v2-active, var(--sidebar-primary));color:var(--z-menu-v2-active-foreground, var(--sidebar-primary-foreground))}.z-menu-v2-item.parent-active:not(.active){color:var(--z-menu-v2-active, var(--sidebar-primary))}.z-menu-v2-item.parent-active:not(.active):hover{color:var(--z-menu-v2-active, var(--sidebar-primary))}.z-menu-v2-item.active .z-menu-v2-dot,.z-menu-v2-item.parent-active .z-menu-v2-dot{background-color:currentColor}.z-menu-v2-item.icon-only{justify-content:center;padding-inline:0;width:2.5rem;height:2.5rem;margin-inline:auto}.z-menu-v2-icon-item{display:flex;width:2.5rem;height:2.5rem;cursor:pointer;align-items:center;justify-content:center;margin-inline:auto}.z-menu-v2-icon-item:hover{color:var(--z-menu-v2-accent-foreground, var(--accent-foreground))}.z-menu-v2-icon-item.active{background-color:var(--z-menu-v2-active, var(--sidebar-primary));color:var(--z-menu-v2-active-foreground, var(--sidebar-primary-foreground))}.z-menu-v2-popover-item{display:flex;width:100%;cursor:pointer;align-items:center;gap:.5rem;padding:.45rem .5rem;font-size:.8125rem;font-weight:450}.z-menu-v2-popover-item:hover{color:var(--z-menu-v2-accent-foreground, var(--accent-foreground))}.z-menu-v2-popover-item.active{background-color:var(--z-menu-v2-active, var(--sidebar-primary));color:var(--z-menu-v2-active-foreground, var(--sidebar-primary-foreground))}.z-menu-v2-popover-item.parent-active:not(.active){background-color:transparent;color:var(--z-menu-v2-active, var(--sidebar-primary))}.z-menu-v2-popover-item.parent-active:not(.active):hover{color:var(--z-menu-v2-active, var(--sidebar-primary))}.z-menu-v2-popover-item.active .z-menu-v2-dot,.z-menu-v2-popover-item.parent-active .z-menu-v2-dot{background-color:currentColor}.z-menu-v2-item-child{position:relative;padding-left:.75rem}.z-menu-v2-item-sub-child{position:relative;padding-left:.75rem;font-size:.78125rem}.z-menu-v2-submenu-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s cubic-bezier(.16,1,.3,1)}.z-menu-v2-submenu-panel.expanded{grid-template-rows:1fr}.z-menu-v2-submenu-panel-inner{min-height:0;overflow:hidden}.z-menu-v2-submenu-panel-inner:before{content:\"\";display:block;height:.25rem}.z-menu-v2-submenu{position:relative;display:flex;min-width:0;min-height:0;flex-direction:column;gap:.25rem;margin:0 0 0 .875rem;padding-left:.875rem}.z-menu-v2-submenu:before{content:\"\";position:absolute;top:0;bottom:.75rem;left:0;width:1px;background-color:color-mix(in oklab,var(--z-menu-v2-border, var(--sidebar-border)) 84%,transparent)}.z-menu-v2-submenu .z-menu-v2-item,.z-menu-v2-submenu .z-menu-v2-popover-item{position:relative}.z-menu-v2-submenu .z-menu-v2-item:before,.z-menu-v2-submenu .z-menu-v2-popover-item:before{content:\"\";position:absolute;top:50%;left:-.875rem;width:.875rem;height:1px;background-color:color-mix(in oklab,var(--z-menu-v2-border, var(--sidebar-border)) 84%,transparent)}.z-menu-v2-submenu .z-menu-v2-item.active:before,.z-menu-v2-submenu .z-menu-v2-item.parent-active:before,.z-menu-v2-submenu .z-menu-v2-popover-item.active:before,.z-menu-v2-submenu .z-menu-v2-popover-item.parent-active:before{background-color:color-mix(in oklab,var(--z-menu-v2-active, var(--sidebar-primary)) 72%,var(--z-menu-v2-border, var(--sidebar-border)))}.z-menu-v2-mobile-drawer{background-color:var(--z-menu-v2-sidebar, var(--sidebar));color:var(--z-menu-v2-sidebar-foreground, var(--sidebar-foreground));border-color:var(--z-menu-v2-border, var(--sidebar-border))}.z-menu-v2-shell .border-sidebar-border,.z-menu-v2-mobile-drawer .border-sidebar-border{border-color:var(--z-menu-v2-border, var(--sidebar-border))}.z-menu-v2-shell .hover\\:bg-sidebar-accent:hover,.z-menu-v2-mobile-drawer .hover\\:bg-sidebar-accent:hover{background-color:var(--z-menu-v2-accent, var(--sidebar-accent))}.z-menu-v2-submenu-nested{margin-left:.75rem}.z-menu-v2-popover-tree{margin-top:0;margin-bottom:0}.z-menu-v2-popover-scrollbar{--scrollbar-padding: 0;--scrollbar-overscroll-behavior: contain;max-height:min(28rem,100vh - 8rem);min-height:0;overflow-x:hidden;overflow-y:auto}.z-menu-v2-popover-scroll-content{min-width:0}.z-menu-v2-arrow{transition:transform .2s cubic-bezier(.4,0,.2,1)}.z-menu-v2-arrow.expanded{transform:rotate(90deg)}.z-menu-v2-dot{display:inline-flex;width:.375rem;height:.375rem;flex-shrink:0;border-radius:9999px;background-color:color-mix(in oklab,var(--z-menu-v2-sidebar-foreground, var(--sidebar-foreground)) 58%,transparent)}.z-menu-v2-dot.small{width:.25rem;height:.25rem}.z-menu-v2-scrollbar{--scrollbar-padding: 0;max-width:100%}.z-menu-v2-scrollbar .ng-scroll-viewport,.z-menu-v2-scrollbar .ng-scroll-content{max-width:100%}.z-menu-v2-backdrop{animation:z-menu-v2-backdrop-enter .2s ease-out forwards}.z-menu-v2-backdrop-dark{background-color:#0009}.z-menu-v2-backdrop-blur{background-color:#0000000d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.z-menu-v2-mobile-drawer{transform:translate(-100%);transition:transform .3s cubic-bezier(.32,.72,0,1);box-shadow:4px 0 24px #0000001a;will-change:transform}.z-menu-v2-mobile-drawer.open{transform:translate(0)}@keyframes z-menu-v2-backdrop-enter{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZHoverGlideDirective, selector: "[zHoverGlide]", inputs: ["zHoverGlideSelector", "zHoverGlideClass", "zHoverGlideDisabled"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zSticky", "zShowArrow", "zKeyboardSafe"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zContext", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport]), [ngScrollbar]", exportAs: ["ngScrollbar"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
880
880
|
}
|
|
881
881
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZMenuV2Component, decorators: [{
|
|
882
882
|
type: Component,
|
|
@@ -894,7 +894,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
894
894
|
'[class.z-menu-v2-collapsed]': 'sidebarCollapsed()',
|
|
895
895
|
'[class.z-menu-v2-mobile-open]': 'mobileMenuOpen()',
|
|
896
896
|
'[class.z-menu-v2-mobile]': 'isMobile()',
|
|
897
|
-
}, template: "<aside\n class=\"hidden h-full min-h-0 flex-col overflow-hidden border-r shadow-sm md:flex\"\n [class]=\"zClasses()\"\n [style.--z-menu-v2-expanded-width.px]=\"zExpandedWidth()\"\n [style.--z-menu-v2-collapsed-width.px]=\"zCollapsedWidth()\">\n <div\n class=\"border-sidebar-border flex h-14 shrink-0 items-center gap-2 border-b px-3\"\n [class.justify-center]=\"sidebarCollapsed()\">\n @if (!sidebarCollapsed() && zLogo()) {\n <img [src]=\"zLogo()\" alt=\"Logo\" class=\"h-8 w-auto shrink-0 object-contain transition-opacity\" />\n }\n\n @if (!sidebarCollapsed()) {\n <div\n class=\"min-w-0 flex-1 overflow-hidden text-sm font-semibold text-ellipsis whitespace-nowrap\"\n z-tooltip\n [zContent]=\"effectiveTitle() | translate\"\n zPosition=\"right\"\n [zOffset]=\"6\">\n {{ effectiveTitle() | translate }}\n </div>\n }\n\n <button\n z-button\n zType=\"ghost\"\n [zWave]=\"false\"\n class=\"z-menu-v2-toggle h-9 w-9 shrink-0\"\n [class.z-menu-v2-toggle-collapsed]=\"sidebarCollapsed()\"\n [attr.aria-label]=\"\n (sidebarCollapsed() ? 'i18n_z_ui_menu_expand_sidebar' : 'i18n_z_ui_menu_collapse_sidebar') | translate\n \"\n (click)=\"toggleSidebar()\">\n <z-icon [zType]=\"sidebarCollapsed() ? 'lucidePanelLeftOpen' : 'lucidePanelLeftClose'\" zSize=\"18\" />\n </button>\n </div>\n\n <ng-scrollbar class=\"z-menu-v2-scrollbar min-h-0 flex-1\" track=\"vertical\">\n <nav zHoverGlide zHoverGlideClass=\"bg-accent rounded-sm\" class=\"z-menu-v2-nav flex flex-col p-2\">\n @for (parent of menuParents(); track parent.id) {\n @let parentActive = parentWithActiveChild()?.id === parent.id;\n @let parentLeafActive = selectedMenuItem()?.id === parent.id;\n @let parentHasChildren = parent.children && parent.children.length > 0;\n\n @if (parent.groupLabel && !sidebarCollapsed()) {\n <div class=\"mt-1 first:mt-0\">\n <div class=\"border-sidebar-border mb-2.5 border-t\"></div>\n <div class=\"text-muted-foreground px-2 pb-0.5 text-[0.6875rem] font-semibold tracking-wider uppercase\">\n {{ parent.groupLabel | translate }}\n </div>\n </div>\n }\n @if (sidebarCollapsed() && parentHasChildren) {\n <button\n type=\"button\"\n z-popover\n [zPopoverContent]=\"parentPopoverTpl\"\n [zPopoverWidth]=\"256\"\n zPosition=\"right-top\"\n [zOffset]=\"10\"\n data-glide-item\n class=\"z-menu-v2-icon-item\"\n [class.active]=\"parentActive || parentLeafActive\"\n [attr.aria-label]=\"parent.name | translate\"\n (click)=\"onCollapsedParentClick(parent)\">\n @if (parent.icon) {\n <z-icon [zType]=\"parent.icon\" zSize=\"20\" />\n }\n @if (!parent.icon && parent.iconSvg) {\n <z-icon [zSvg]=\"parent.iconSvg\" zSize=\"20\" />\n }\n </button>\n\n <ng-template #parentPopoverTpl let-close=\"close\">\n <div class=\"z-menu-v2-popover w-64 max-w-64 min-w-0 pt-1 pl-1\">\n <div\n #parentPopoverHeaderTrigger\n class=\"text-muted-foreground flex items-center gap-2 px-2 py-2 text-xs font-medium\">\n @if (parent.icon) {\n <z-icon [zType]=\"parent.icon\" zSize=\"15\" />\n }\n <span\n class=\"overflow-hidden text-ellipsis whitespace-nowrap\"\n z-tooltip\n [zContent]=\"parent.name | translate\"\n [zTriggerElement]=\"parentPopoverHeaderTrigger\"\n zPosition=\"right\"\n [zOffset]=\"6\">\n {{ parent.name | translate }}\n </span>\n </div>\n <ng-scrollbar class=\"z-menu-v2-popover-scrollbar\" orientation=\"vertical\" visibility=\"visible\">\n <div class=\"z-menu-v2-popover-scroll-content pr-2 pb-1\">\n <ng-container\n *ngTemplateOutlet=\"collapsedChildrenTpl; context: { $implicit: parent.children, close: close }\" />\n </div>\n </ng-scrollbar>\n </div>\n </ng-template>\n }\n @if (!(sidebarCollapsed() && parentHasChildren)) {\n <ng-container *ngTemplateOutlet=\"openParentTpl; context: { $implicit: parent }\" />\n }\n }\n </nav>\n </ng-scrollbar>\n\n <ng-container *ngTemplateOutlet=\"userFooterTpl\" />\n</aside>\n\n<ng-template #openParentTpl let-parent>\n @let parentActive = parentWithActiveChild()?.id === parent.id;\n @let parentLeafActive = selectedMenuItem()?.id === parent.id;\n @let parentHasChildren = parent.children && parent.children.length > 0;\n\n <div class=\"z-menu-v2-menu-group\">\n <button\n #parentTrigger\n type=\"button\"\n data-glide-item\n class=\"z-menu-v2-item\"\n [class.active]=\"parentLeafActive\"\n [class.parent-active]=\"parentActive && !parentLeafActive\"\n [class.icon-only]=\"sidebarCollapsed()\"\n [attr.aria-label]=\"sidebarCollapsed() ? (parent.name | translate) : null\"\n z-tooltip\n [zContent]=\"parent.name | translate\"\n zPosition=\"right\"\n [zOffset]=\"6\"\n [zDisabled]=\"!sidebarCollapsed()\"\n [zAlwaysShow]=\"sidebarCollapsed()\"\n (click)=\"onMenuItemClick(parent)\">\n @if (parent.icon) {\n <z-icon [zType]=\"parent.icon\" [zSize]=\"sidebarCollapsed() ? '20' : '18'\" class=\"shrink-0\" />\n }\n @if (!parent.icon && parent.iconSvg) {\n <z-icon [zSvg]=\"parent.iconSvg\" [zSize]=\"sidebarCollapsed() ? '20' : '18'\" class=\"shrink-0\" />\n }\n\n @if (!sidebarCollapsed()) {\n <span\n class=\"min-w-0 flex-1 overflow-hidden text-left text-ellipsis whitespace-nowrap\"\n z-tooltip\n [zContent]=\"parent.name | translate\"\n [zTriggerElement]=\"parentTrigger\"\n zPosition=\"right\"\n [zOffset]=\"6\">\n {{ parent.name | translate }}\n </span>\n @if (parentHasChildren) {\n <z-icon\n zType=\"lucideChevronRight\"\n zSize=\"15\"\n class=\"z-menu-v2-arrow shrink-0 opacity-60\"\n [class.expanded]=\"parent.expanded\" />\n }\n }\n </button>\n\n @if (!sidebarCollapsed() && parentHasChildren && parent.renderChildren) {\n <div class=\"z-menu-v2-submenu-panel\" [class.expanded]=\"parent.renderExpanded\">\n <div class=\"z-menu-v2-submenu-panel-inner\">\n <ng-container\n *ngTemplateOutlet=\"openChildrenTpl; context: { $implicit: parent.children, position: 'right' }\" />\n </div>\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #collapsedChildrenTpl let-children let-close=\"close\">\n <div zHoverGlide zHoverGlideClass=\"bg-accent rounded-sm\" class=\"z-menu-v2-submenu z-menu-v2-popover-tree\">\n @for (child of children; track child.id) {\n @let childActive = selectedMenuItem()?.id === child.id;\n @let childParentActive = selectedMenuItem()?.parent?.includes(child.id);\n @let childHasChildren = child.children && child.children.length > 0;\n <div class=\"z-menu-v2-menu-group\">\n <button\n #collapsedChildTrigger\n type=\"button\"\n data-glide-item\n class=\"z-menu-v2-popover-item\"\n [class.active]=\"childActive\"\n [class.parent-active]=\"childParentActive\"\n (click)=\"childHasChildren ? onMenuItemClick(child) : onCollapsedLeafClick(child, close)\">\n @if (child.icon) {\n <z-icon [zType]=\"child.icon\" zSize=\"16\" class=\"shrink-0\" />\n }\n @if (!child.icon && child.iconSvg) {\n <z-icon [zSvg]=\"child.iconSvg\" zSize=\"16\" class=\"shrink-0\" />\n }\n @if (!child.icon && !child.iconSvg) {\n <span class=\"z-menu-v2-dot\"></span>\n }\n <span\n class=\"min-w-0 flex-1 overflow-hidden text-left text-ellipsis whitespace-nowrap\"\n z-tooltip\n [zContent]=\"child.name | translate\"\n [zTriggerElement]=\"collapsedChildTrigger\"\n zPosition=\"right\"\n [zOffset]=\"6\">\n {{ child.name | translate }}\n </span>\n @if (childHasChildren) {\n <z-icon\n zType=\"lucideChevronRight\"\n zSize=\"14\"\n class=\"z-menu-v2-arrow shrink-0 opacity-60\"\n [class.expanded]=\"child.expanded\" />\n }\n </button>\n\n @if (childHasChildren && child.renderChildren) {\n <div class=\"z-menu-v2-submenu-panel collapsed-popover\" [class.expanded]=\"child.renderExpanded\">\n <div class=\"z-menu-v2-submenu-panel-inner\">\n <div class=\"z-menu-v2-submenu z-menu-v2-submenu-nested\">\n @for (subChild of child.children; track subChild.id) {\n @let subChildActive = selectedMenuItem()?.id === subChild.id;\n <button\n #collapsedSubChildTrigger\n type=\"button\"\n data-glide-item\n class=\"z-menu-v2-popover-item\"\n [class.active]=\"subChildActive\"\n (click)=\"onCollapsedLeafClick(subChild, close)\">\n @if (subChild.icon) {\n <z-icon [zType]=\"subChild.icon\" zSize=\"15\" class=\"shrink-0\" />\n }\n @if (!subChild.icon && subChild.iconSvg) {\n <z-icon [zSvg]=\"subChild.iconSvg\" zSize=\"15\" class=\"shrink-0\" />\n }\n @if (!subChild.icon && !subChild.iconSvg) {\n <span class=\"z-menu-v2-dot small\"></span>\n }\n <span\n class=\"min-w-0 flex-1 overflow-hidden text-left text-ellipsis whitespace-nowrap\"\n z-tooltip\n [zContent]=\"subChild.name | translate\"\n [zTriggerElement]=\"collapsedSubChildTrigger\"\n zPosition=\"right\"\n [zOffset]=\"6\">\n {{ subChild.name | translate }}\n </span>\n </button>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #userFooterTpl>\n <div class=\"border-sidebar-border shrink-0 border-t p-2\">\n <button\n type=\"button\"\n z-popover\n [zPopoverContent]=\"userPopoverTpl\"\n zPosition=\"right-bottom\"\n [zOffset]=\"10\"\n class=\"hover:bg-sidebar-accent flex w-full cursor-pointer items-center gap-3 rounded-md p-2 text-left\"\n [class.justify-center]=\"sidebarCollapsed()\"\n [attr.aria-label]=\"sidebarCollapsed() ? zUser()?.name || 'User Name' : null\">\n <span class=\"h-9 w-9 shrink-0 overflow-hidden rounded-full\">\n <img [src]=\"avatarSrc()\" alt=\"User Avatar\" class=\"h-full w-full object-cover\" />\n </span>\n @if (!sidebarCollapsed()) {\n <span class=\"min-w-0 flex-1\">\n <span class=\"block overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap\">\n {{ zUser()?.name || 'User Name' }}\n </span>\n <span class=\"text-muted-foreground block overflow-hidden text-xs text-ellipsis whitespace-nowrap\">\n {{ zUser()?.email || 'user@example.com' }}\n </span>\n </span>\n <z-icon zType=\"lucideChevronsUpDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n }\n </button>\n </div>\n</ng-template>\n\n<ng-template #mobileUserFooterTpl>\n <div class=\"border-sidebar-border shrink-0 border-t p-3\">\n <button\n type=\"button\"\n z-popover\n [zPopoverContent]=\"userPopoverTpl\"\n zPosition=\"top-right\"\n [zOffset]=\"6\"\n class=\"hover:bg-sidebar-accent flex w-full cursor-pointer items-center gap-3 rounded-md p-2 text-left\">\n <span class=\"h-10 w-10 shrink-0 overflow-hidden rounded-full\">\n <img [src]=\"avatarSrc()\" alt=\"User Avatar\" class=\"h-full w-full object-cover\" />\n </span>\n <span class=\"min-w-0 flex-1\">\n <span class=\"block overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap\">\n {{ zUser()?.name || 'User Name' }}\n </span>\n <span class=\"text-muted-foreground block overflow-hidden text-xs text-ellipsis whitespace-nowrap\">\n {{ zUser()?.email || 'user@example.com' }}\n </span>\n </span>\n <z-icon zType=\"lucideChevronsUpDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n </button>\n </div>\n</ng-template>\n\n<ng-template #userPopoverTpl let-close=\"close\">\n <div class=\"min-w-56 p-1\">\n <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n <div class=\"h-8 w-8 shrink-0 overflow-hidden rounded-full\">\n <img [src]=\"avatarSrc()\" alt=\"User Avatar\" class=\"aspect-square size-full object-cover\" />\n </div>\n <div class=\"grid flex-1 text-left text-sm leading-tight\">\n <span class=\"overflow-hidden font-medium text-ellipsis whitespace-nowrap\">\n {{ zUser()?.name || 'User Name' }}\n </span>\n <span class=\"text-muted-foreground mt-0.5 overflow-hidden text-xs text-ellipsis whitespace-nowrap\">\n {{ zUser()?.email || 'user@example.com' }}\n </span>\n </div>\n </div>\n\n @if (visibleUserActions().length > 0) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n\n <div zHoverGlide zHoverGlideClass=\"bg-accent rounded-(--radius-sm)\">\n @for (action of visibleUserActions(); track action.id; let idx = $index) {\n @if (action.divide === 'before' && idx > 0) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n\n <button\n #userActionTrigger\n type=\"button\"\n [disabled]=\"action.disabled\"\n data-glide-item\n [class]=\"action.class\"\n class=\"focus:bg-accent relative flex w-full cursor-pointer items-center gap-2 rounded-(--radius-sm) px-2 py-1.5 text-sm outline-none disabled:pointer-events-none disabled:opacity-50\"\n (click)=\"onUserActionClick(action); close()\">\n @if (action.icon) {\n <z-icon [zType]=\"action.icon\" zSize=\"14\" class=\"text-muted-foreground\" />\n }\n <span\n class=\"min-w-0 overflow-hidden text-ellipsis whitespace-nowrap\"\n z-tooltip\n [zContent]=\"action.label | translate\"\n [zTriggerElement]=\"userActionTrigger\"\n zPosition=\"right\"\n [zOffset]=\"6\">\n {{ action.label | translate }}\n </span>\n </button>\n\n @if (action.divide === 'after' && idx < visibleUserActions().length - 1) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n }\n </div>\n </div>\n</ng-template>\n\n<ng-template #openChildrenTpl let-children let-position=\"position\">\n <div zHoverGlide zHoverGlideClass=\"bg-accent rounded-sm\" class=\"z-menu-v2-submenu\">\n @for (child of children; track child.id) {\n @let childActive = selectedMenuItem()?.id === child.id;\n @let childParentActive = selectedMenuItem()?.parent?.includes(child.id);\n @let childHasChildren = child.children && child.children.length > 0;\n <div class=\"z-menu-v2-menu-group\">\n <button\n #openChildTrigger\n type=\"button\"\n data-glide-item\n class=\"z-menu-v2-item z-menu-v2-item-child\"\n [class.active]=\"childActive\"\n [class.parent-active]=\"childParentActive\"\n (click)=\"onMenuItemClick(child)\">\n @if (child.icon) {\n <z-icon [zType]=\"child.icon\" zSize=\"16\" class=\"shrink-0\" />\n }\n @if (!child.icon && child.iconSvg) {\n <z-icon [zSvg]=\"child.iconSvg\" zSize=\"16\" class=\"shrink-0\" />\n }\n @if (!child.icon && !child.iconSvg) {\n <span class=\"z-menu-v2-dot\"></span>\n }\n <span\n class=\"min-w-0 flex-1 overflow-hidden text-left text-ellipsis whitespace-nowrap\"\n z-tooltip\n [zContent]=\"child.name | translate\"\n [zTriggerElement]=\"openChildTrigger\"\n [zPosition]=\"position\"\n [zOffset]=\"6\">\n {{ child.name | translate }}\n </span>\n @if (childHasChildren) {\n <z-icon\n zType=\"lucideChevronRight\"\n zSize=\"14\"\n class=\"z-menu-v2-arrow shrink-0 opacity-60\"\n [class.expanded]=\"child.expanded\" />\n }\n </button>\n\n @if (childHasChildren && child.renderChildren) {\n <div class=\"z-menu-v2-submenu-panel\" [class.expanded]=\"child.renderExpanded\">\n <div class=\"z-menu-v2-submenu-panel-inner\">\n <ng-container\n *ngTemplateOutlet=\"openChildrenTpl; context: { $implicit: child.children, position: position }\" />\n </div>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n@if (zShowMobileBar()) {\n <div\n class=\"z-menu-v2-mobile-bar border-border bg-background flex h-14 items-center justify-between border-b px-4 md:hidden\">\n @if (mobileLogo()) {\n <img [src]=\"mobileLogo()\" alt=\"Logo\" class=\"h-8 w-auto object-contain\" />\n }\n <button z-button zType=\"ghost\" [zWave]=\"false\" class=\"h-9 w-9\" (click)=\"openMobileMenu()\">\n <z-icon zType=\"lucideMenu\" zSize=\"20\" />\n </button>\n </div>\n}\n\n@if (mobileMenuOpen()) {\n <div\n class=\"z-menu-v2-backdrop fixed inset-0 z-9998 md:hidden\"\n [class.z-menu-v2-backdrop-dark]=\"overlayType() === 'dark'\"\n [class.z-menu-v2-backdrop-blur]=\"overlayType() === 'blur'\"\n (click)=\"onMobileBackdropClick()\"></div>\n}\n\n<aside\n class=\"z-menu-v2-mobile-drawer fixed top-0 left-0 z-9999 flex h-full w-72 max-w-[calc(100vw-1rem)] flex-col border-r md:hidden\"\n [class.open]=\"mobileMenuOpen()\">\n <div class=\"border-sidebar-border flex h-14 shrink-0 items-center justify-between border-b px-4\">\n @if (mobileLogo()) {\n <img [src]=\"mobileLogo()\" alt=\"Logo\" class=\"h-8 w-auto object-contain\" />\n }\n <button z-button zType=\"ghost\" [zWave]=\"false\" class=\"h-9 w-9\" (click)=\"closeMobileMenu()\">\n <z-icon zType=\"lucideX\" zSize=\"20\" />\n </button>\n </div>\n\n <ng-scrollbar class=\"z-menu-v2-scrollbar flex-1\" track=\"vertical\">\n <nav zHoverGlide zHoverGlideClass=\"bg-accent rounded-sm\" class=\"z-menu-v2-nav flex flex-col p-3\">\n @for (parent of menuParents(); track parent.id) {\n @let parentActive = parentWithActiveChild()?.id === parent.id;\n @let parentLeafActive = selectedMenuItem()?.id === parent.id;\n @let parentHasChildren = parent.children && parent.children.length > 0;\n @if (parent.groupLabel) {\n <div class=\"mt-1 first:mt-0\">\n <div class=\"border-sidebar-border mb-2.5 border-t\"></div>\n <div class=\"text-muted-foreground px-2 pb-0.5 text-[0.6875rem] font-semibold tracking-wider uppercase\">\n {{ parent.groupLabel | translate }}\n </div>\n </div>\n }\n <div class=\"z-menu-v2-menu-group\">\n <button\n #mobileParentTrigger\n type=\"button\"\n data-glide-item\n class=\"z-menu-v2-item\"\n [class.active]=\"parentLeafActive\"\n [class.parent-active]=\"parentActive && !parentLeafActive\"\n (click)=\"onMenuItemClick(parent)\">\n @if (parent.icon) {\n <z-icon [zType]=\"parent.icon\" zSize=\"18\" class=\"shrink-0\" />\n }\n @if (!parent.icon && parent.iconSvg) {\n <z-icon [zSvg]=\"parent.iconSvg\" zSize=\"18\" class=\"shrink-0\" />\n }\n <span\n class=\"min-w-0 flex-1 overflow-hidden text-left text-ellipsis whitespace-nowrap\"\n z-tooltip\n [zContent]=\"parent.name | translate\"\n [zTriggerElement]=\"mobileParentTrigger\"\n zPosition=\"top\"\n [zOffset]=\"6\">\n {{ parent.name | translate }}\n </span>\n @if (parentHasChildren) {\n <z-icon\n zType=\"lucideChevronRight\"\n zSize=\"15\"\n class=\"z-menu-v2-arrow shrink-0 opacity-60\"\n [class.expanded]=\"parent.expanded\" />\n }\n </button>\n\n @if (parentHasChildren && parent.renderChildren) {\n <div class=\"z-menu-v2-submenu-panel\" [class.expanded]=\"parent.renderExpanded\">\n <div class=\"z-menu-v2-submenu-panel-inner\">\n <ng-container\n *ngTemplateOutlet=\"openChildrenTpl; context: { $implicit: parent.children, position: 'top' }\" />\n </div>\n </div>\n }\n </div>\n }\n </nav>\n </ng-scrollbar>\n\n <ng-container *ngTemplateOutlet=\"mobileUserFooterTpl\" />\n</aside>\n", styles: [".z-menu-v2{display:block;flex:0 0 auto;min-width:0;height:100%;contain:style}.z-menu-v2 [class*=cursor-pointer],.z-menu-v2 button{-webkit-user-select:none;user-select:none}.z-menu-v2-shell{background-color:var(--z-menu-v2-sidebar, var(--sidebar));color:var(--z-menu-v2-sidebar-foreground, var(--sidebar-foreground));border-color:var(--z-menu-v2-border, var(--sidebar-border));min-width:0;width:var(--z-menu-v2-expanded-width, 248px);transition:width .2s cubic-bezier(.4,0,.2,1);will-change:width}.z-menu-v2-collapsed .z-menu-v2-shell{width:var(--z-menu-v2-collapsed-width, 60px)}.z-menu-v2-toggle{position:relative;z-index:1}.z-menu-v2-toggle.z-menu-v2-toggle-collapsed{background-color:var(--z-menu-v2-accent, var(--sidebar-accent));color:var(--z-menu-v2-accent-foreground, var(--sidebar-accent-foreground))}.z-menu-v2-nav{gap:.25rem}.z-menu-v2-menu-group{display:flex;min-width:0;flex-direction:column}.z-menu-v2-item,.z-menu-v2-popover-item,.z-menu-v2-icon-item{min-width:0;border-radius:var(--radius-sm);position:relative;z-index:1;outline:none;transition:background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1)}.z-menu-v2-item{display:flex;width:100%;cursor:pointer;align-items:center;gap:.625rem;padding:.5rem .625rem;font-size:.8125rem;font-weight:450}.z-menu-v2-item:hover{color:var(--z-menu-v2-accent-foreground, var(--accent-foreground))}.z-menu-v2-item.active{background-color:var(--z-menu-v2-active, var(--sidebar-primary));color:var(--z-menu-v2-active-foreground, var(--sidebar-primary-foreground))}.z-menu-v2-item.parent-active:not(.active){color:var(--z-menu-v2-active, var(--sidebar-primary))}.z-menu-v2-item.parent-active:not(.active):hover{color:var(--z-menu-v2-active, var(--sidebar-primary))}.z-menu-v2-item.active .z-menu-v2-dot,.z-menu-v2-item.parent-active .z-menu-v2-dot{background-color:currentColor}.z-menu-v2-item.icon-only{justify-content:center;padding-inline:0;width:2.5rem;height:2.5rem;margin-inline:auto}.z-menu-v2-icon-item{display:flex;width:2.5rem;height:2.5rem;cursor:pointer;align-items:center;justify-content:center;margin-inline:auto}.z-menu-v2-icon-item:hover{color:var(--z-menu-v2-accent-foreground, var(--accent-foreground))}.z-menu-v2-icon-item.active{background-color:var(--z-menu-v2-active, var(--sidebar-primary));color:var(--z-menu-v2-active-foreground, var(--sidebar-primary-foreground))}.z-menu-v2-popover-item{display:flex;width:100%;cursor:pointer;align-items:center;gap:.5rem;padding:.45rem .5rem;font-size:.8125rem;font-weight:450}.z-menu-v2-popover-item:hover{color:var(--z-menu-v2-accent-foreground, var(--accent-foreground))}.z-menu-v2-popover-item.active{background-color:var(--z-menu-v2-active, var(--sidebar-primary));color:var(--z-menu-v2-active-foreground, var(--sidebar-primary-foreground))}.z-menu-v2-popover-item.parent-active:not(.active){background-color:transparent;color:var(--z-menu-v2-active, var(--sidebar-primary))}.z-menu-v2-popover-item.parent-active:not(.active):hover{color:var(--z-menu-v2-active, var(--sidebar-primary))}.z-menu-v2-popover-item.active .z-menu-v2-dot,.z-menu-v2-popover-item.parent-active .z-menu-v2-dot{background-color:currentColor}.z-menu-v2-item-child{position:relative;padding-left:.75rem}.z-menu-v2-item-sub-child{position:relative;padding-left:.75rem;font-size:.78125rem}.z-menu-v2-submenu-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s cubic-bezier(.16,1,.3,1)}.z-menu-v2-submenu-panel.expanded{grid-template-rows:1fr}.z-menu-v2-submenu-panel-inner{min-height:0;overflow:hidden}.z-menu-v2-submenu-panel-inner:before{content:\"\";display:block;height:.25rem}.z-menu-v2-submenu{position:relative;display:flex;min-width:0;min-height:0;flex-direction:column;gap:.25rem;margin:0 0 0 .875rem;padding-left:.875rem}.z-menu-v2-submenu:before{content:\"\";position:absolute;top:0;bottom:.75rem;left:0;width:1px;background-color:color-mix(in oklab,var(--z-menu-v2-border, var(--sidebar-border)) 84%,transparent)}.z-menu-v2-submenu .z-menu-v2-item,.z-menu-v2-submenu .z-menu-v2-popover-item{position:relative}.z-menu-v2-submenu .z-menu-v2-item:before,.z-menu-v2-submenu .z-menu-v2-popover-item:before{content:\"\";position:absolute;top:50%;left:-.875rem;width:.875rem;height:1px;background-color:color-mix(in oklab,var(--z-menu-v2-border, var(--sidebar-border)) 84%,transparent)}.z-menu-v2-submenu .z-menu-v2-item.active:before,.z-menu-v2-submenu .z-menu-v2-item.parent-active:before,.z-menu-v2-submenu .z-menu-v2-popover-item.active:before,.z-menu-v2-submenu .z-menu-v2-popover-item.parent-active:before{background-color:color-mix(in oklab,var(--z-menu-v2-active, var(--sidebar-primary)) 72%,var(--z-menu-v2-border, var(--sidebar-border)))}.z-menu-v2-mobile-drawer{background-color:var(--z-menu-v2-sidebar, var(--sidebar));color:var(--z-menu-v2-sidebar-foreground, var(--sidebar-foreground));border-color:var(--z-menu-v2-border, var(--sidebar-border))}.z-menu-v2-shell .border-sidebar-border,.z-menu-v2-mobile-drawer .border-sidebar-border{border-color:var(--z-menu-v2-border, var(--sidebar-border))}.z-menu-v2-shell .hover\\:bg-sidebar-accent:hover,.z-menu-v2-mobile-drawer .hover\\:bg-sidebar-accent:hover{background-color:var(--z-menu-v2-accent, var(--sidebar-accent))}.z-menu-v2-submenu-nested{margin-left:.75rem}.z-menu-v2-popover-tree{margin-top:0;margin-bottom:0}.z-menu-v2-popover-scrollbar{--scrollbar-padding: 0;--scrollbar-overscroll-behavior: contain;max-height:min(28rem,100vh - 8rem);min-height:0;overflow-x:hidden;overflow-y:auto}.z-menu-v2-popover-scroll-content{min-width:0}.z-menu-v2-arrow{transition:transform .2s cubic-bezier(.4,0,.2,1)}.z-menu-v2-arrow.expanded{transform:rotate(90deg)}.z-menu-v2-dot{display:inline-flex;width:.375rem;height:.375rem;flex-shrink:0;border-radius:9999px;background-color:color-mix(in oklab,var(--z-menu-v2-sidebar-foreground, var(--sidebar-foreground)) 58%,transparent)}.z-menu-v2-dot.small{width:.25rem;height:.25rem}.z-menu-v2-scrollbar{--scrollbar-padding: 0;max-width:100%}.z-menu-v2-scrollbar .ng-scroll-viewport,.z-menu-v2-scrollbar .ng-scroll-content{max-width:100%}.z-menu-v2-backdrop{animation:z-menu-v2-backdrop-enter .2s ease-out forwards}.z-menu-v2-backdrop-dark{background-color:#0009}.z-menu-v2-backdrop-blur{background-color:#0000000d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.z-menu-v2-mobile-drawer{transform:translate(-100%);transition:transform .3s cubic-bezier(.32,.72,0,1);box-shadow:4px 0 24px #0000001a;will-change:transform}.z-menu-v2-mobile-drawer.open{transform:translate(0)}@keyframes z-menu-v2-backdrop-enter{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
897
|
+
}, template: "<aside\n class=\"hidden h-full min-h-0 flex-col overflow-hidden border-r shadow-sm md:flex\"\n [class]=\"zClasses()\"\n [style.--z-menu-v2-expanded-width.px]=\"zExpandedWidth()\"\n [style.--z-menu-v2-collapsed-width.px]=\"zCollapsedWidth()\">\n <div\n class=\"border-sidebar-border flex h-14 shrink-0 items-center gap-2 border-b px-3\"\n [class.justify-center]=\"sidebarCollapsed()\">\n @if (!sidebarCollapsed() && zLogo()) {\n <img [src]=\"zLogo()\" alt=\"Logo\" class=\"h-8 w-auto shrink-0 object-contain transition-opacity\" />\n }\n\n @if (!sidebarCollapsed()) {\n <div\n class=\"min-w-0 flex-1 overflow-hidden text-sm font-semibold text-ellipsis whitespace-nowrap\"\n z-tooltip\n [zContent]=\"effectiveTitle() | translate\"\n zPosition=\"right\"\n [zOffset]=\"6\">\n {{ effectiveTitle() | translate }}\n </div>\n }\n\n <button\n z-button\n zType=\"ghost\"\n [zWave]=\"false\"\n class=\"z-menu-v2-toggle h-9 w-9 shrink-0\"\n [class.z-menu-v2-toggle-collapsed]=\"sidebarCollapsed()\"\n [attr.aria-label]=\"\n (sidebarCollapsed() ? 'i18n_z_ui_menu_expand_sidebar' : 'i18n_z_ui_menu_collapse_sidebar') | translate\n \"\n (click)=\"toggleSidebar()\">\n <z-icon [zType]=\"sidebarCollapsed() ? 'lucidePanelLeftOpen' : 'lucidePanelLeftClose'\" zSize=\"18\" />\n </button>\n </div>\n\n <ng-scrollbar class=\"z-menu-v2-scrollbar min-h-0 flex-1\" track=\"vertical\">\n <nav zHoverGlide zHoverGlideClass=\"bg-accent rounded-sm\" class=\"z-menu-v2-nav flex flex-col p-2\">\n @for (parent of menuParents(); track parent.id) {\n @let parentActive = parentWithActiveChild()?.id === parent.id;\n @let parentLeafActive = selectedMenuItem()?.id === parent.id;\n @let parentHasChildren = parent.children && parent.children.length > 0;\n\n @if (parent.groupLabel && !sidebarCollapsed()) {\n <div class=\"mt-1 first:mt-0\">\n <div class=\"border-sidebar-border mb-2.5 border-t\"></div>\n <div class=\"text-muted-foreground px-2 pb-0.5 text-[0.6875rem] font-semibold tracking-wider uppercase\">\n {{ parent.groupLabel | translate }}\n </div>\n </div>\n }\n @if (sidebarCollapsed() && parentHasChildren) {\n <button\n type=\"button\"\n z-popover\n [zPopoverContent]=\"parentPopoverTpl\"\n [zPopoverWidth]=\"256\"\n zPosition=\"right-top\"\n [zOffset]=\"13\"\n data-glide-item\n class=\"z-menu-v2-icon-item\"\n [class.active]=\"parentActive || parentLeafActive\"\n [attr.aria-label]=\"parent.name | translate\"\n (click)=\"onCollapsedParentClick(parent)\">\n @if (parent.icon) {\n <z-icon [zType]=\"parent.icon\" zSize=\"20\" />\n }\n @if (!parent.icon && parent.iconSvg) {\n <z-icon [zSvg]=\"parent.iconSvg\" zSize=\"20\" />\n }\n </button>\n\n <ng-template #parentPopoverTpl let-close=\"close\">\n <div class=\"z-menu-v2-popover w-64 max-w-64 min-w-0 pt-1 pl-1\">\n <div\n #parentPopoverHeaderTrigger\n class=\"text-muted-foreground flex items-center gap-2 px-2 py-2 text-xs font-medium\">\n @if (parent.icon) {\n <z-icon [zType]=\"parent.icon\" zSize=\"15\" />\n }\n <span\n class=\"overflow-hidden text-ellipsis whitespace-nowrap\"\n z-tooltip\n [zContent]=\"parent.name | translate\"\n [zTriggerElement]=\"parentPopoverHeaderTrigger\"\n zPosition=\"right\"\n [zOffset]=\"6\">\n {{ parent.name | translate }}\n </span>\n </div>\n <ng-scrollbar\n class=\"z-menu-v2-popover-scrollbar\"\n orientation=\"vertical\"\n visibility=\"hover\"\n >\n <div class=\"z-menu-v2-popover-scroll-content pr-2 pb-1\">\n <ng-container\n *ngTemplateOutlet=\"collapsedChildrenTpl; context: { $implicit: parent.children, close: close }\" />\n </div>\n </ng-scrollbar>\n </div>\n </ng-template>\n }\n @if (!(sidebarCollapsed() && parentHasChildren)) {\n <ng-container *ngTemplateOutlet=\"openParentTpl; context: { $implicit: parent }\" />\n }\n }\n </nav>\n </ng-scrollbar>\n\n <ng-container *ngTemplateOutlet=\"userFooterTpl\" />\n</aside>\n\n<ng-template #openParentTpl let-parent>\n @let parentActive = parentWithActiveChild()?.id === parent.id;\n @let parentLeafActive = selectedMenuItem()?.id === parent.id;\n @let parentHasChildren = parent.children && parent.children.length > 0;\n\n <div class=\"z-menu-v2-menu-group\">\n <button\n #parentTrigger\n type=\"button\"\n data-glide-item\n class=\"z-menu-v2-item\"\n [class.active]=\"parentLeafActive\"\n [class.parent-active]=\"parentActive && !parentLeafActive\"\n [class.icon-only]=\"sidebarCollapsed()\"\n [attr.aria-label]=\"sidebarCollapsed() ? (parent.name | translate) : null\"\n z-tooltip\n [zContent]=\"parent.name | translate\"\n zPosition=\"right\"\n [zOffset]=\"6\"\n [zDisabled]=\"!sidebarCollapsed()\"\n [zAlwaysShow]=\"sidebarCollapsed()\"\n (click)=\"onMenuItemClick(parent)\">\n @if (parent.icon) {\n <z-icon [zType]=\"parent.icon\" [zSize]=\"sidebarCollapsed() ? '20' : '18'\" class=\"shrink-0\" />\n }\n @if (!parent.icon && parent.iconSvg) {\n <z-icon [zSvg]=\"parent.iconSvg\" [zSize]=\"sidebarCollapsed() ? '20' : '18'\" class=\"shrink-0\" />\n }\n\n @if (!sidebarCollapsed()) {\n <span\n class=\"min-w-0 flex-1 overflow-hidden text-left text-ellipsis whitespace-nowrap\"\n z-tooltip\n [zContent]=\"parent.name | translate\"\n [zTriggerElement]=\"parentTrigger\"\n zPosition=\"right\"\n [zOffset]=\"6\">\n {{ parent.name | translate }}\n </span>\n @if (parentHasChildren) {\n <z-icon\n zType=\"lucideChevronRight\"\n zSize=\"15\"\n class=\"z-menu-v2-arrow shrink-0 opacity-60\"\n [class.expanded]=\"parent.expanded\" />\n }\n }\n </button>\n\n @if (!sidebarCollapsed() && parentHasChildren && parent.renderChildren) {\n <div class=\"z-menu-v2-submenu-panel\" [class.expanded]=\"parent.renderExpanded\">\n <div class=\"z-menu-v2-submenu-panel-inner\">\n <ng-container\n *ngTemplateOutlet=\"openChildrenTpl; context: { $implicit: parent.children, position: 'right' }\" />\n </div>\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #collapsedChildrenTpl let-children let-close=\"close\">\n <div zHoverGlide zHoverGlideClass=\"bg-accent rounded-sm\" class=\"z-menu-v2-submenu z-menu-v2-popover-tree\">\n @for (child of children; track child.id) {\n @let childActive = selectedMenuItem()?.id === child.id;\n @let childParentActive = selectedMenuItem()?.parent?.includes(child.id);\n @let childHasChildren = child.children && child.children.length > 0;\n <div class=\"z-menu-v2-menu-group\">\n <button\n #collapsedChildTrigger\n type=\"button\"\n data-glide-item\n class=\"z-menu-v2-popover-item\"\n [class.active]=\"childActive\"\n [class.parent-active]=\"childParentActive\"\n (click)=\"childHasChildren ? onMenuItemClick(child) : onCollapsedLeafClick(child, close)\">\n @if (child.icon) {\n <z-icon [zType]=\"child.icon\" zSize=\"16\" class=\"shrink-0\" />\n }\n @if (!child.icon && child.iconSvg) {\n <z-icon [zSvg]=\"child.iconSvg\" zSize=\"16\" class=\"shrink-0\" />\n }\n @if (!child.icon && !child.iconSvg) {\n <span class=\"z-menu-v2-dot\"></span>\n }\n <span\n class=\"min-w-0 flex-1 overflow-hidden text-left text-ellipsis whitespace-nowrap\"\n z-tooltip\n [zContent]=\"child.name | translate\"\n [zTriggerElement]=\"collapsedChildTrigger\"\n zPosition=\"right\"\n [zOffset]=\"6\">\n {{ child.name | translate }}\n </span>\n @if (childHasChildren) {\n <z-icon\n zType=\"lucideChevronRight\"\n zSize=\"14\"\n class=\"z-menu-v2-arrow shrink-0 opacity-60\"\n [class.expanded]=\"child.expanded\" />\n }\n </button>\n\n @if (childHasChildren && child.renderChildren) {\n <div class=\"z-menu-v2-submenu-panel collapsed-popover\" [class.expanded]=\"child.renderExpanded\">\n <div class=\"z-menu-v2-submenu-panel-inner\">\n <div class=\"z-menu-v2-submenu z-menu-v2-submenu-nested\">\n @for (subChild of child.children; track subChild.id) {\n @let subChildActive = selectedMenuItem()?.id === subChild.id;\n <button\n #collapsedSubChildTrigger\n type=\"button\"\n data-glide-item\n class=\"z-menu-v2-popover-item\"\n [class.active]=\"subChildActive\"\n (click)=\"onCollapsedLeafClick(subChild, close)\">\n @if (subChild.icon) {\n <z-icon [zType]=\"subChild.icon\" zSize=\"15\" class=\"shrink-0\" />\n }\n @if (!subChild.icon && subChild.iconSvg) {\n <z-icon [zSvg]=\"subChild.iconSvg\" zSize=\"15\" class=\"shrink-0\" />\n }\n @if (!subChild.icon && !subChild.iconSvg) {\n <span class=\"z-menu-v2-dot small\"></span>\n }\n <span\n class=\"min-w-0 flex-1 overflow-hidden text-left text-ellipsis whitespace-nowrap\"\n z-tooltip\n [zContent]=\"subChild.name | translate\"\n [zTriggerElement]=\"collapsedSubChildTrigger\"\n zPosition=\"right\"\n [zOffset]=\"6\">\n {{ subChild.name | translate }}\n </span>\n </button>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #userFooterTpl>\n <div class=\"border-sidebar-border shrink-0 border-t p-2\">\n <button\n type=\"button\"\n z-popover\n [zPopoverContent]=\"userPopoverTpl\"\n zPosition=\"right-bottom\"\n [zOffset]=\"10\"\n class=\"hover:bg-sidebar-accent flex w-full cursor-pointer items-center gap-3 rounded-md p-2 text-left\"\n [class.justify-center]=\"sidebarCollapsed()\"\n [attr.aria-label]=\"sidebarCollapsed() ? zUser()?.name || 'User Name' : null\">\n <span class=\"h-9 w-9 shrink-0 overflow-hidden rounded-full\">\n <img [src]=\"avatarSrc()\" alt=\"User Avatar\" class=\"h-full w-full object-cover\" />\n </span>\n @if (!sidebarCollapsed()) {\n <span class=\"min-w-0 flex-1\">\n <span class=\"block overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap\">\n {{ zUser()?.name || 'User Name' }}\n </span>\n <span class=\"text-muted-foreground block overflow-hidden text-xs text-ellipsis whitespace-nowrap\">\n {{ zUser()?.email || 'user@example.com' }}\n </span>\n </span>\n <z-icon zType=\"lucideChevronsUpDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n }\n </button>\n </div>\n</ng-template>\n\n<ng-template #mobileUserFooterTpl>\n <div class=\"border-sidebar-border shrink-0 border-t p-3\">\n <button\n type=\"button\"\n z-popover\n [zPopoverContent]=\"userPopoverTpl\"\n zPosition=\"top-right\"\n [zOffset]=\"6\"\n class=\"hover:bg-sidebar-accent flex w-full cursor-pointer items-center gap-3 rounded-md p-2 text-left\">\n <span class=\"h-10 w-10 shrink-0 overflow-hidden rounded-full\">\n <img [src]=\"avatarSrc()\" alt=\"User Avatar\" class=\"h-full w-full object-cover\" />\n </span>\n <span class=\"min-w-0 flex-1\">\n <span class=\"block overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap\">\n {{ zUser()?.name || 'User Name' }}\n </span>\n <span class=\"text-muted-foreground block overflow-hidden text-xs text-ellipsis whitespace-nowrap\">\n {{ zUser()?.email || 'user@example.com' }}\n </span>\n </span>\n <z-icon zType=\"lucideChevronsUpDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n </button>\n </div>\n</ng-template>\n\n<ng-template #userPopoverTpl let-close=\"close\">\n <div class=\"min-w-56 p-1\">\n <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n <div class=\"h-8 w-8 shrink-0 overflow-hidden rounded-full\">\n <img [src]=\"avatarSrc()\" alt=\"User Avatar\" class=\"aspect-square size-full object-cover\" />\n </div>\n <div class=\"grid flex-1 text-left text-sm leading-tight\">\n <span class=\"overflow-hidden font-medium text-ellipsis whitespace-nowrap\">\n {{ zUser()?.name || 'User Name' }}\n </span>\n <span class=\"text-muted-foreground mt-0.5 overflow-hidden text-xs text-ellipsis whitespace-nowrap\">\n {{ zUser()?.email || 'user@example.com' }}\n </span>\n </div>\n </div>\n\n @if (visibleUserActions().length > 0) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n\n <div zHoverGlide zHoverGlideClass=\"bg-accent rounded-(--radius-sm)\">\n @for (action of visibleUserActions(); track action.id; let idx = $index) {\n @if (action.divide === 'before' && idx > 0) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n\n <button\n #userActionTrigger\n type=\"button\"\n [disabled]=\"action.disabled\"\n data-glide-item\n [class]=\"action.class\"\n class=\"focus:bg-accent relative flex w-full cursor-pointer items-center gap-2 rounded-(--radius-sm) px-2 py-1.5 text-sm outline-none disabled:pointer-events-none disabled:opacity-50\"\n (click)=\"onUserActionClick(action); close()\">\n @if (action.icon) {\n <z-icon [zType]=\"action.icon\" zSize=\"14\" class=\"text-muted-foreground\" />\n }\n <span\n class=\"min-w-0 overflow-hidden text-ellipsis whitespace-nowrap\"\n z-tooltip\n [zContent]=\"action.label | translate\"\n [zTriggerElement]=\"userActionTrigger\"\n zPosition=\"right\"\n [zOffset]=\"6\">\n {{ action.label | translate }}\n </span>\n </button>\n\n @if (action.divide === 'after' && idx < visibleUserActions().length - 1) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n }\n </div>\n </div>\n</ng-template>\n\n<ng-template #openChildrenTpl let-children let-position=\"position\">\n <div zHoverGlide zHoverGlideClass=\"bg-accent rounded-sm\" class=\"z-menu-v2-submenu\">\n @for (child of children; track child.id) {\n @let childActive = selectedMenuItem()?.id === child.id;\n @let childParentActive = selectedMenuItem()?.parent?.includes(child.id);\n @let childHasChildren = child.children && child.children.length > 0;\n <div class=\"z-menu-v2-menu-group\">\n <button\n #openChildTrigger\n type=\"button\"\n data-glide-item\n class=\"z-menu-v2-item z-menu-v2-item-child\"\n [class.active]=\"childActive\"\n [class.parent-active]=\"childParentActive\"\n (click)=\"onMenuItemClick(child)\">\n @if (child.icon) {\n <z-icon [zType]=\"child.icon\" zSize=\"16\" class=\"shrink-0\" />\n }\n @if (!child.icon && child.iconSvg) {\n <z-icon [zSvg]=\"child.iconSvg\" zSize=\"16\" class=\"shrink-0\" />\n }\n @if (!child.icon && !child.iconSvg) {\n <span class=\"z-menu-v2-dot\"></span>\n }\n <span\n class=\"min-w-0 flex-1 overflow-hidden text-left text-ellipsis whitespace-nowrap\"\n z-tooltip\n [zContent]=\"child.name | translate\"\n [zTriggerElement]=\"openChildTrigger\"\n [zPosition]=\"position\"\n [zOffset]=\"6\">\n {{ child.name | translate }}\n </span>\n @if (childHasChildren) {\n <z-icon\n zType=\"lucideChevronRight\"\n zSize=\"14\"\n class=\"z-menu-v2-arrow shrink-0 opacity-60\"\n [class.expanded]=\"child.expanded\" />\n }\n </button>\n\n @if (childHasChildren && child.renderChildren) {\n <div class=\"z-menu-v2-submenu-panel\" [class.expanded]=\"child.renderExpanded\">\n <div class=\"z-menu-v2-submenu-panel-inner\">\n <ng-container\n *ngTemplateOutlet=\"openChildrenTpl; context: { $implicit: child.children, position: position }\" />\n </div>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n@if (zShowMobileBar()) {\n <div\n class=\"z-menu-v2-mobile-bar border-border bg-background flex h-14 items-center justify-between border-b px-4 md:hidden\">\n @if (mobileLogo()) {\n <img [src]=\"mobileLogo()\" alt=\"Logo\" class=\"h-8 w-auto object-contain\" />\n }\n <button z-button zType=\"ghost\" [zWave]=\"false\" class=\"h-9 w-9\" (click)=\"openMobileMenu()\">\n <z-icon zType=\"lucideMenu\" zSize=\"20\" />\n </button>\n </div>\n}\n\n@if (mobileMenuOpen()) {\n <div\n class=\"z-menu-v2-backdrop fixed inset-0 z-9998 md:hidden\"\n [class.z-menu-v2-backdrop-dark]=\"overlayType() === 'dark'\"\n [class.z-menu-v2-backdrop-blur]=\"overlayType() === 'blur'\"\n (click)=\"onMobileBackdropClick()\"></div>\n}\n\n<aside\n class=\"z-menu-v2-mobile-drawer fixed top-0 left-0 z-9999 flex h-full w-72 max-w-[calc(100vw-1rem)] flex-col border-r md:hidden\"\n [class.open]=\"mobileMenuOpen()\">\n <div class=\"border-sidebar-border flex h-14 shrink-0 items-center justify-between border-b px-4\">\n @if (mobileLogo()) {\n <img [src]=\"mobileLogo()\" alt=\"Logo\" class=\"h-8 w-auto object-contain\" />\n }\n <button z-button zType=\"ghost\" [zWave]=\"false\" class=\"h-9 w-9\" (click)=\"closeMobileMenu()\">\n <z-icon zType=\"lucideX\" zSize=\"20\" />\n </button>\n </div>\n\n <ng-scrollbar class=\"z-menu-v2-scrollbar flex-1\" track=\"vertical\">\n <nav zHoverGlide zHoverGlideClass=\"bg-accent rounded-sm\" class=\"z-menu-v2-nav flex flex-col p-3\">\n @for (parent of menuParents(); track parent.id) {\n @let parentActive = parentWithActiveChild()?.id === parent.id;\n @let parentLeafActive = selectedMenuItem()?.id === parent.id;\n @let parentHasChildren = parent.children && parent.children.length > 0;\n @if (parent.groupLabel) {\n <div class=\"mt-1 first:mt-0\">\n <div class=\"border-sidebar-border mb-2.5 border-t\"></div>\n <div class=\"text-muted-foreground px-2 pb-0.5 text-[0.6875rem] font-semibold tracking-wider uppercase\">\n {{ parent.groupLabel | translate }}\n </div>\n </div>\n }\n <div class=\"z-menu-v2-menu-group\">\n <button\n #mobileParentTrigger\n type=\"button\"\n data-glide-item\n class=\"z-menu-v2-item\"\n [class.active]=\"parentLeafActive\"\n [class.parent-active]=\"parentActive && !parentLeafActive\"\n (click)=\"onMenuItemClick(parent)\">\n @if (parent.icon) {\n <z-icon [zType]=\"parent.icon\" zSize=\"18\" class=\"shrink-0\" />\n }\n @if (!parent.icon && parent.iconSvg) {\n <z-icon [zSvg]=\"parent.iconSvg\" zSize=\"18\" class=\"shrink-0\" />\n }\n <span\n class=\"min-w-0 flex-1 overflow-hidden text-left text-ellipsis whitespace-nowrap\"\n z-tooltip\n [zContent]=\"parent.name | translate\"\n [zTriggerElement]=\"mobileParentTrigger\"\n zPosition=\"top\"\n [zOffset]=\"6\">\n {{ parent.name | translate }}\n </span>\n @if (parentHasChildren) {\n <z-icon\n zType=\"lucideChevronRight\"\n zSize=\"15\"\n class=\"z-menu-v2-arrow shrink-0 opacity-60\"\n [class.expanded]=\"parent.expanded\" />\n }\n </button>\n\n @if (parentHasChildren && parent.renderChildren) {\n <div class=\"z-menu-v2-submenu-panel\" [class.expanded]=\"parent.renderExpanded\">\n <div class=\"z-menu-v2-submenu-panel-inner\">\n <ng-container\n *ngTemplateOutlet=\"openChildrenTpl; context: { $implicit: parent.children, position: 'top' }\" />\n </div>\n </div>\n }\n </div>\n }\n </nav>\n </ng-scrollbar>\n\n <ng-container *ngTemplateOutlet=\"mobileUserFooterTpl\" />\n</aside>\n", styles: [".z-menu-v2{display:block;flex:0 0 auto;min-width:0;height:100%;contain:style}.z-menu-v2 [class*=cursor-pointer],.z-menu-v2 button{-webkit-user-select:none;user-select:none}.z-menu-v2-shell{background-color:var(--z-menu-v2-sidebar, var(--sidebar));color:var(--z-menu-v2-sidebar-foreground, var(--sidebar-foreground));border-color:var(--z-menu-v2-border, var(--sidebar-border));min-width:0;width:var(--z-menu-v2-expanded-width, 248px);transition:width .2s cubic-bezier(.4,0,.2,1);will-change:width}.z-menu-v2-collapsed .z-menu-v2-shell{width:var(--z-menu-v2-collapsed-width, 60px)}.z-menu-v2-toggle{position:relative;z-index:1}.z-menu-v2-toggle.z-menu-v2-toggle-collapsed{background-color:var(--z-menu-v2-accent, var(--sidebar-accent));color:var(--z-menu-v2-accent-foreground, var(--sidebar-accent-foreground))}.z-menu-v2-nav{gap:.25rem}.z-menu-v2-menu-group{display:flex;min-width:0;flex-direction:column}.z-menu-v2-item,.z-menu-v2-popover-item,.z-menu-v2-icon-item{min-width:0;border-radius:var(--radius-sm);position:relative;z-index:1;outline:none;transition:background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1)}.z-menu-v2-item{display:flex;width:100%;cursor:pointer;align-items:center;gap:.625rem;padding:.5rem .625rem;font-size:.8125rem;font-weight:450}.z-menu-v2-item:hover{color:var(--z-menu-v2-accent-foreground, var(--accent-foreground))}.z-menu-v2-item.active{background-color:var(--z-menu-v2-active, var(--sidebar-primary));color:var(--z-menu-v2-active-foreground, var(--sidebar-primary-foreground))}.z-menu-v2-item.parent-active:not(.active){color:var(--z-menu-v2-active, var(--sidebar-primary))}.z-menu-v2-item.parent-active:not(.active):hover{color:var(--z-menu-v2-active, var(--sidebar-primary))}.z-menu-v2-item.active .z-menu-v2-dot,.z-menu-v2-item.parent-active .z-menu-v2-dot{background-color:currentColor}.z-menu-v2-item.icon-only{justify-content:center;padding-inline:0;width:2.5rem;height:2.5rem;margin-inline:auto}.z-menu-v2-icon-item{display:flex;width:2.5rem;height:2.5rem;cursor:pointer;align-items:center;justify-content:center;margin-inline:auto}.z-menu-v2-icon-item:hover{color:var(--z-menu-v2-accent-foreground, var(--accent-foreground))}.z-menu-v2-icon-item.active{background-color:var(--z-menu-v2-active, var(--sidebar-primary));color:var(--z-menu-v2-active-foreground, var(--sidebar-primary-foreground))}.z-menu-v2-popover-item{display:flex;width:100%;cursor:pointer;align-items:center;gap:.5rem;padding:.45rem .5rem;font-size:.8125rem;font-weight:450}.z-menu-v2-popover-item:hover{color:var(--z-menu-v2-accent-foreground, var(--accent-foreground))}.z-menu-v2-popover-item.active{background-color:var(--z-menu-v2-active, var(--sidebar-primary));color:var(--z-menu-v2-active-foreground, var(--sidebar-primary-foreground))}.z-menu-v2-popover-item.parent-active:not(.active){background-color:transparent;color:var(--z-menu-v2-active, var(--sidebar-primary))}.z-menu-v2-popover-item.parent-active:not(.active):hover{color:var(--z-menu-v2-active, var(--sidebar-primary))}.z-menu-v2-popover-item.active .z-menu-v2-dot,.z-menu-v2-popover-item.parent-active .z-menu-v2-dot{background-color:currentColor}.z-menu-v2-item-child{position:relative;padding-left:.75rem}.z-menu-v2-item-sub-child{position:relative;padding-left:.75rem;font-size:.78125rem}.z-menu-v2-submenu-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s cubic-bezier(.16,1,.3,1)}.z-menu-v2-submenu-panel.expanded{grid-template-rows:1fr}.z-menu-v2-submenu-panel-inner{min-height:0;overflow:hidden}.z-menu-v2-submenu-panel-inner:before{content:\"\";display:block;height:.25rem}.z-menu-v2-submenu{position:relative;display:flex;min-width:0;min-height:0;flex-direction:column;gap:.25rem;margin:0 0 0 .875rem;padding-left:.875rem}.z-menu-v2-submenu:before{content:\"\";position:absolute;top:0;bottom:.75rem;left:0;width:1px;background-color:color-mix(in oklab,var(--z-menu-v2-border, var(--sidebar-border)) 84%,transparent)}.z-menu-v2-submenu .z-menu-v2-item,.z-menu-v2-submenu .z-menu-v2-popover-item{position:relative}.z-menu-v2-submenu .z-menu-v2-item:before,.z-menu-v2-submenu .z-menu-v2-popover-item:before{content:\"\";position:absolute;top:50%;left:-.875rem;width:.875rem;height:1px;background-color:color-mix(in oklab,var(--z-menu-v2-border, var(--sidebar-border)) 84%,transparent)}.z-menu-v2-submenu .z-menu-v2-item.active:before,.z-menu-v2-submenu .z-menu-v2-item.parent-active:before,.z-menu-v2-submenu .z-menu-v2-popover-item.active:before,.z-menu-v2-submenu .z-menu-v2-popover-item.parent-active:before{background-color:color-mix(in oklab,var(--z-menu-v2-active, var(--sidebar-primary)) 72%,var(--z-menu-v2-border, var(--sidebar-border)))}.z-menu-v2-mobile-drawer{background-color:var(--z-menu-v2-sidebar, var(--sidebar));color:var(--z-menu-v2-sidebar-foreground, var(--sidebar-foreground));border-color:var(--z-menu-v2-border, var(--sidebar-border))}.z-menu-v2-shell .border-sidebar-border,.z-menu-v2-mobile-drawer .border-sidebar-border{border-color:var(--z-menu-v2-border, var(--sidebar-border))}.z-menu-v2-shell .hover\\:bg-sidebar-accent:hover,.z-menu-v2-mobile-drawer .hover\\:bg-sidebar-accent:hover{background-color:var(--z-menu-v2-accent, var(--sidebar-accent))}.z-menu-v2-submenu-nested{margin-left:.75rem}.z-menu-v2-popover-tree{margin-top:0;margin-bottom:0}.z-menu-v2-popover-scrollbar{--scrollbar-padding: 0;--scrollbar-overscroll-behavior: contain;max-height:min(28rem,100vh - 8rem);min-height:0;overflow-x:hidden;overflow-y:auto}.z-menu-v2-popover-scroll-content{min-width:0}.z-menu-v2-arrow{transition:transform .2s cubic-bezier(.4,0,.2,1)}.z-menu-v2-arrow.expanded{transform:rotate(90deg)}.z-menu-v2-dot{display:inline-flex;width:.375rem;height:.375rem;flex-shrink:0;border-radius:9999px;background-color:color-mix(in oklab,var(--z-menu-v2-sidebar-foreground, var(--sidebar-foreground)) 58%,transparent)}.z-menu-v2-dot.small{width:.25rem;height:.25rem}.z-menu-v2-scrollbar{--scrollbar-padding: 0;max-width:100%}.z-menu-v2-scrollbar .ng-scroll-viewport,.z-menu-v2-scrollbar .ng-scroll-content{max-width:100%}.z-menu-v2-backdrop{animation:z-menu-v2-backdrop-enter .2s ease-out forwards}.z-menu-v2-backdrop-dark{background-color:#0009}.z-menu-v2-backdrop-blur{background-color:#0000000d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.z-menu-v2-mobile-drawer{transform:translate(-100%);transition:transform .3s cubic-bezier(.32,.72,0,1);box-shadow:4px 0 24px #0000001a;will-change:transform}.z-menu-v2-mobile-drawer.open{transform:translate(0)}@keyframes z-menu-v2-backdrop-enter{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
898
898
|
}], ctorParameters: () => [], propDecorators: { zOnSelect: [{ type: i0.Output, args: ["zOnSelect"] }], zOnMenuAction: [{ type: i0.Output, args: ["zOnMenuAction"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zLogo: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLogo", required: false }] }], zLogoMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLogoMobile", required: false }] }], zMenus: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMenus", required: false }] }], zUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "zUser", required: false }] }], zUserActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "zUserActions", required: false }] }], zCurrentPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "zCurrentPath", required: false }] }], zKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "zKey", required: false }] }], zClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zClass", required: false }] }], zTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTitle", required: false }] }], zCollapsedWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "zCollapsedWidth", required: false }] }], zExpandedWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "zExpandedWidth", required: false }] }], zExpandMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "zExpandMode", required: false }] }], zShowMobileBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowMobileBar", required: false }] }] } });
|
|
899
899
|
|
|
900
900
|
/**
|