@shival99/z-ui 1.3.29 → 1.3.31
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.
|
@@ -373,7 +373,7 @@ class ZMenuComponent {
|
|
|
373
373
|
return ZCacheService.get(this.zKey(), false) ?? false;
|
|
374
374
|
}
|
|
375
375
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
376
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZMenuComponent, isStandalone: true, selector: "z-menu", 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 }, zActionsTemplate: { classPropertyName: "zActionsTemplate", publicName: "zActionsTemplate", 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 } }, outputs: { zOnSelect: "zOnSelect", zOnMenuAction: "zOnMenuAction", zControl: "zControl" }, host: { properties: { "class.z-menu-collapsed": "sidebarCollapsed()", "class.z-menu-no-child": "selectedParentHasNoChild()", "class.z-menu-mobile": "isMobile()", "class.z-menu-mobile-open": "mobileMenuOpen()" }, classAttribute: "z-menu block" }, providers: [TranslatePipe], ngImport: i0, template: "<!-- DESKTOP LAYOUT - Hidden on mobile -->\n<div class=\"z-menu-desktop relative z-200 hidden h-full py-1 pl-1 md:block\" [class.collapsed]=\"sidebarCollapsed()\">\n <main class=\"z-menu-main relative flex h-full\">\n <div class=\"z-sidebar-main h-full w-[50px]\">\n <div\n class=\"z-shadow-menu bg-sidebar border-border/40 dark:border-sidebar-border relative flex h-full w-full flex-col items-center gap-1.5 rounded-[6px] border\"></div>\n\n <div class=\"bg-sidebar text-sidebar-foreground absolute inset-px z-20 flex flex-col rounded-[6px]\">\n @if (zLogo()) {\n <div class=\"border-sidebar-border flex h-[52px] items-center justify-center border-b px-2\">\n <img [src]=\"zLogo()\" alt=\"Logo\" class=\"h-8 w-auto object-contain\" />\n </div>\n }\n\n <!-- Expand Button - Only show when collapsed -->\n @if (sidebarCollapsed() && selectedParent()) {\n <div\n class=\"z-expand-btn hover:bg-sidebar-accent mx-auto mt-2 flex h-9 w-9 cursor-pointer items-center justify-center rounded-[6px]\"\n (click)=\"toggleSidebar()\">\n <z-icon zType=\"lucideChevronsRight\" zSize=\"20\" class=\"opacity-70\" />\n </div>\n }\n\n <div class=\"flex flex-1 flex-col items-center gap-2 p-2\">\n @for (item of menuParents(); track item.id) {\n @let hasActiveChild = parentWithActiveChild()?.id === item.id;\n @let isCurrentlySelected = selectedParent()?.id === item.id;\n @let showActiveIndicator = hasActiveChild && !isCurrentlySelected;\n <div\n zTooltip\n [zContent]=\"item.name | translate\"\n zPosition=\"right\"\n [zArrow]=\"false\"\n [zAlwaysShow]=\"true\"\n class=\"relative flex h-9 w-9 cursor-pointer items-center justify-center rounded-[6px] select-none\"\n [class.bg-sidebar-primary]=\"selectedParent()?.id === item.id\"\n [class.text-sidebar-primary-foreground]=\"selectedParent()?.id === item.id\"\n [class.hover:bg-sidebar-accent]=\"selectedParent()?.id !== item.id\"\n (click)=\"onDesktopParentClick(item)\">\n @if (item.icon) {\n <z-icon [zType]=\"item.icon\" zSize=\"20\" />\n } @else {\n <z-icon [zSvg]=\"item.iconSvg || ''\" zSize=\"20\" />\n }\n @if (showActiveIndicator) {\n <div\n class=\"bg-sidebar-primary absolute top-1/2 -left-[5px] h-4 w-1 -translate-y-1/2 rounded-full\"></div>\n }\n </div>\n }\n </div>\n\n <div class=\"border-sidebar-border flex items-center justify-center border-t p-2\">\n <div\n z-popover\n [zOffset]=\"11\"\n [zPopoverContent]=\"userPopoverTpl\"\n zPosition=\"right-bottom\"\n class=\"aspect-square h-9 w-9 shrink-0 cursor-pointer overflow-hidden rounded-full\">\n <img [src]=\"avatarSrc()\" alt=\"User Avatar\" class=\"h-full w-full object-cover\" />\n </div>\n </div>\n </div>\n </div>\n\n <ng-template #userPopoverTpl let-close=\"close\">\n <div class=\"min-w-56 p-1\">\n <!-- User Info Header - Always shown -->\n <div class=\"p-0 text-sm font-normal\">\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=\"truncate font-medium\">{{ zUser()?.name || 'User Name' }}</span>\n <span class=\"text-muted-foreground mt-0.5 truncate text-xs\">\n {{ zUser()?.email || 'user@example.com' }}\n </span>\n </div>\n </div>\n </div>\n\n @if (getVisibleUserActions().length > 0 || zActionsTemplate()) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n\n <!-- Actions - Custom or from zUserActions -->\n @if (zActionsTemplate()) {\n <ng-container *ngTemplateOutlet=\"zActionsTemplate(); context: { close: close }\" />\n } @else if (getVisibleUserActions().length > 0) {\n @for (action of getVisibleUserActions(); track action.id; let idx = $index) {\n @if (shouldShowDividerBefore(action, idx)) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n\n <button\n type=\"button\"\n [disabled]=\"action.disabled\"\n [class]=\"action.class\"\n class=\"hover:bg-accent focus:bg-accent flex w-full cursor-pointer items-center gap-2 rounded-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>{{ action.label | translate }}</span>\n </button>\n\n @if (shouldShowDividerAfter(action, idx)) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n }\n }\n </div>\n </ng-template>\n\n @if (selectedParent(); as parent) {\n @let hasChildrenOrTemplate = parent.menuTemplate || (parent.children && parent.children.length > 0);\n @if (hasChildrenOrTemplate) {\n <div\n class=\"z-sidebar-child-wrapper\"\n [class.collapsed]=\"sidebarCollapsed()\"\n [style.--sidebar-child-width.px]=\"sidebarChildWidth()\">\n <div\n class=\"z-sidebar-child z-shadow-menu bg-card text-card-foreground border-border/40 dark:border-sidebar-border flex h-full shrink-0 flex-col items-start rounded-[6px] border\"\n [style.width.px]=\"sidebarChildWidth()\"\n [class.collapsed]=\"sidebarCollapsed()\">\n <div class=\"border-border flex h-[52px] w-full shrink-0 items-center border-b px-3\">\n @if (selectedParent()?.icon) {\n <z-icon [zType]=\"selectedParent()!.icon\" zSize=\"20\" class=\"mr-2 shrink-0\" />\n }\n <div\n class=\"mr-4 min-w-0 flex-1 truncate text-base font-semibold\"\n zTooltip\n zPosition=\"top-left\"\n [zContent]=\"selectedParent()?.name || '' | translate\"\n [zArrow]=\"false\">\n {{ selectedParent()?.name | translate }}\n </div>\n\n <z-icon\n zType=\"lucidePanelRightOpen\"\n zSize=\"20\"\n class=\"shrink-0 cursor-pointer opacity-60 hover:opacity-100\"\n (click)=\"toggleSidebar()\" />\n </div>\n\n <!-- Show menuTemplate if available, otherwise show children -->\n @if (selectedParent()?.menuTemplate) {\n <ng-scrollbar class=\"z-menu-scrollbar min-h-0 w-full flex-1\" track=\"vertical\">\n <div class=\"flex w-full flex-col p-3 pr-2\">\n <ng-container\n *ngTemplateOutlet=\"\n selectedParent()!.menuTemplate!;\n context: { $implicit: selectedParent()!, close: closeSidebarFn }\n \" />\n </div>\n </ng-scrollbar>\n } @else {\n <ng-scrollbar class=\"z-menu-scrollbar min-h-0 w-full flex-1\" track=\"vertical\">\n <div class=\"flex w-full flex-col gap-1 py-1 pr-2 pl-2\">\n <ng-container *ngTemplateOutlet=\"menuChildrenTpl; context: { $implicit: menuChildren() }\" />\n </div>\n </ng-scrollbar>\n }\n </div>\n </div>\n }\n }\n </main>\n</div>\n\n<!-- MOBILE LAYOUT - Visible only on mobile -->\n<div class=\"z-menu-mobile-wrapper hidden max-md:block\">\n <!-- Mobile Backdrop -->\n @if (mobileMenuOpen() || mobileTemplateDrawerOpen()) {\n <div\n class=\"z-menu-backdrop fixed inset-0 z-9998\"\n [class.z-menu-backdrop-dark]=\"overlayType() === 'dark'\"\n [class.z-menu-backdrop-blur]=\"overlayType() === 'blur'\"\n (click)=\"onBackdropClick()\"></div>\n }\n\n <!-- Mobile Drawer -->\n <aside\n class=\"z-menu-drawer bg-background border-border fixed top-0 left-0 z-9999 flex h-full w-70 flex-col rounded-r-lg border-r\"\n [class.open]=\"mobileMenuOpen()\">\n <!-- Drawer Header -->\n <div class=\"border-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=\"bg-accent h-9 w-9 shrink-0\" (click)=\"closeMobileMenu()\">\n <z-icon zType=\"lucideX\" zSize=\"20\" />\n </button>\n </div>\n\n <!-- Drawer Content - Accordion Menu -->\n <ng-scrollbar class=\"z-menu-scrollbar flex-1\" track=\"vertical\">\n <div class=\"p-3\">\n @for (parent of menuParents(); track parent.id) {\n <div class=\"mb-1\">\n <!-- Parent Item -->\n @let isParentActive =\n selectedMenuItem()?.id === parent.id && (!parent.children || parent.children.length === 0);\n @let hasActiveChild = parentWithActiveChild()?.id === parent.id && !isParentActive;\n @let isCurrentlyViewing = selectedParent()?.id === parent.id;\n <div\n class=\"relative flex cursor-pointer items-center gap-3 rounded-[6px] p-2\"\n [class.bg-primary/20]=\"isParentActive\"\n [class.text-primary]=\"isParentActive || hasActiveChild\"\n [class.hover:bg-accent]=\"!isParentActive\"\n (click)=\"onMobileParentClick(parent)\">\n @if (parent.icon) {\n <z-icon [zType]=\"parent.icon\" zSize=\"18\" class=\"shrink-0\" />\n } @else if (parent.iconSvg) {\n <z-icon [zSvg]=\"parent.iconSvg\" zSize=\"18\" class=\"shrink-0\" />\n }\n <span class=\"min-w-0 flex-1 truncate text-[13px] font-[450]\">{{ parent.name | translate }}</span>\n @if ((parent.children && parent.children.length > 0) || parent.menuTemplate) {\n <z-icon\n zType=\"lucideChevronRight\"\n zSize=\"16\"\n class=\"z-menu-arrow shrink-0 opacity-60 transition-transform\"\n [class.expanded]=\"parent.expanded && isCurrentlyViewing\" />\n }\n </div>\n\n <!-- Children (Accordion) - Only render if NO menuTemplate -->\n @if (parent.children && parent.children.length > 0 && !parent.menuTemplate) {\n <div class=\"z-menu-submenu\" [class.expanded]=\"parent.expanded && isCurrentlyViewing\">\n <div class=\"z-menu-submenu-inner\">\n <div class=\"z-menu-tree relative ml-4 flex flex-col gap-1 pt-1 pl-3\">\n <div class=\"absolute top-0 bottom-2 left-0 w-px bg-gray-300 dark:bg-gray-600\"></div>\n\n @for (child of parent.children; track child.id) {\n @let isChildActive =\n selectedMenuItem()?.id === child.id && (!child.children || child.children.length === 0);\n @let isChildParentOfActive = isParentOfActiveItem(child);\n @let hasChildren = child.children && child.children.length > 0;\n\n <div>\n <div\n class=\"relative flex cursor-pointer items-center gap-2 rounded-[6px] p-2\"\n [class.bg-primary]=\"isChildActive\"\n [class.text-primary-foreground]=\"isChildActive\"\n [class.text-primary]=\"isChildParentOfActive && !isChildActive\"\n [class.hover:bg-accent]=\"!isChildActive\"\n (click)=\"onMenuItemClick(child)\">\n <div class=\"absolute top-1/2 -left-3 h-px w-3 bg-gray-300 dark:bg-gray-600\"></div>\n @if (child.icon) {\n <z-icon [zType]=\"child.icon\" zSize=\"16\" class=\"shrink-0\" />\n } @else if (child.iconSvg) {\n <z-icon [zSvg]=\"child.iconSvg\" zSize=\"16\" class=\"shrink-0\" />\n } @else {\n <div\n class=\"h-1.5 w-1.5 shrink-0 rounded-full\"\n [class.bg-primary-foreground]=\"isChildActive\"\n [class.bg-gray-400]=\"!isChildActive\"></div>\n }\n <span class=\"min-w-0 flex-1 truncate text-[13px] font-[450]\">\n {{ child.name | translate }}\n </span>\n @if (hasChildren) {\n <z-icon\n zType=\"lucideChevronRight\"\n zSize=\"14\"\n class=\"z-menu-arrow shrink-0 opacity-60 transition-transform\"\n [class.expanded]=\"child.expanded\" />\n }\n </div>\n\n <!-- Level 3 -->\n @if (hasChildren) {\n <div class=\"z-menu-submenu\" [class.expanded]=\"child.expanded\">\n <div class=\"z-menu-submenu-inner\">\n <div class=\"relative ml-4 flex flex-col gap-1 pt-1 pl-3\">\n <div class=\"absolute top-0 bottom-2 left-0 w-px bg-gray-300 dark:bg-gray-600\"></div>\n\n @for (subChild of child.children; track subChild.id) {\n @let isSubChildActive = selectedMenuItem()?.id === subChild.id;\n\n <div class=\"relative\">\n <div class=\"absolute top-1/2 -left-3 h-px w-3 bg-gray-300 dark:bg-gray-600\"></div>\n\n <div\n class=\"flex cursor-pointer items-center gap-2 rounded-[6px] p-2\"\n [class.bg-primary]=\"isSubChildActive\"\n [class.text-primary-foreground]=\"isSubChildActive\"\n [class.hover:bg-accent]=\"!isSubChildActive\"\n (click)=\"onMenuItemClick(subChild)\">\n <div\n class=\"h-1 w-1 shrink-0 rounded-full\"\n [class.bg-primary-foreground]=\"isSubChildActive\"\n [class.bg-gray-400]=\"!isSubChildActive\"></div>\n <span class=\"min-w-0 flex-1 truncate text-[13px] font-[450]\">\n {{ subChild.name | translate }}\n </span>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </ng-scrollbar>\n\n <!-- Drawer Footer - User Info -->\n <div class=\"border-border shrink-0 border-t p-3\">\n <div\n z-popover\n [zOffset]=\"8\"\n [zPopoverContent]=\"mobileActionsPopoverTpl\"\n zPosition=\"top-right\"\n zTrigger=\"click\"\n class=\"hover:bg-accent flex cursor-pointer items-center gap-3 rounded-[6px] p-2\">\n <div 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 </div>\n <div class=\"min-w-0 flex-1\">\n <div class=\"truncate text-sm font-medium\">{{ zUser()?.name || 'User Name' }}</div>\n <div class=\"text-muted-foreground truncate text-xs\">{{ zUser()?.email || 'user@example.com' }}</div>\n </div>\n <div class=\"text-muted-foreground flex shrink-0 flex-col\">\n <z-icon zType=\"lucideChevronUp\" zSize=\"14\" />\n <z-icon zType=\"lucideChevronDown\" zSize=\"14\" class=\"-mt-1\" />\n </div>\n </div>\n </div>\n </aside>\n\n <!-- Mobile Custom Template Drawer -->\n <aside\n class=\"z-menu-custom-drawer bg-background border-border fixed top-0 left-0 z-9999 flex h-full max-w-[calc(100vw-16px)] flex-col rounded-r-lg border-r\"\n [style.width.px]=\"mobileCustomDrawerWidth()\"\n [class.open]=\"mobileTemplateDrawerOpen() && customDrawerParent()?.menuTemplate\">\n @if (customDrawerParent()?.menuTemplate) {\n <!-- Custom Drawer Header -->\n <div class=\"border-border flex h-14 shrink-0 items-center gap-3 border-b px-4\">\n <button\n z-button\n zType=\"ghost\"\n [zWave]=\"false\"\n class=\"bg-accent h-9 w-9 shrink-0\"\n (click)=\"closeMobileTemplateDrawer()\">\n <z-icon zType=\"lucideChevronLeft\" zSize=\"20\" />\n </button>\n <span class=\"min-w-0 flex-1 truncate text-base font-semibold\">\n {{ customDrawerParent()?.name | translate }}\n </span>\n </div>\n\n <!-- Custom Template Content -->\n <ng-scrollbar class=\"z-menu-scrollbar flex-1\" track=\"vertical\">\n <div class=\"p-4\">\n <ng-container\n *ngTemplateOutlet=\"\n customDrawerParent()!.menuTemplate!;\n context: { $implicit: customDrawerParent()!, close: closeMobileDrawerFn }\n \" />\n </div>\n </ng-scrollbar>\n }\n </aside>\n\n <ng-template #mobileActionsPopoverTpl let-close=\"close\">\n <div class=\"min-w-48 p-1\">\n @if (zActionsTemplate()) {\n <ng-container *ngTemplateOutlet=\"zActionsTemplate(); context: { close: close }\" />\n } @else if (getVisibleUserActions().length > 0) {\n @for (action of getVisibleUserActions(); track action.id; let idx = $index) {\n @if (shouldShowDividerBefore(action, idx)) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n\n <button\n type=\"button\"\n [disabled]=\"action.disabled\"\n [class]=\"action.class\"\n class=\"hover:bg-accent focus:bg-accent flex w-full cursor-pointer items-center gap-2 rounded-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>{{ action.label | translate }}</span>\n </button>\n\n @if (shouldShowDividerAfter(action, idx)) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n }\n }\n </div>\n </ng-template>\n</div>\n\n<!-- Shared Template for Menu Children -->\n<ng-template #menuChildrenTpl let-children>\n @for (child of children; track child.id) {\n @let isChildActive = selectedMenuItem()?.id === child.id && (!child.children || child.children.length === 0);\n @let isChildParentOfActive = isParentOfActiveItem(child);\n @let hasChildren = child.children && child.children.length > 0;\n <div>\n <div\n #divLevel1\n class=\"z-menu-item flex w-full cursor-pointer items-center gap-2 rounded-[6px] p-2\"\n [class.bg-primary]=\"isChildActive\"\n [class.text-primary-foreground]=\"isChildActive\"\n [class.text-primary]=\"isChildParentOfActive && !isChildActive\"\n [class.hover:bg-gray-200]=\"!isChildActive\"\n [class.dark:hover:bg-input/50]=\"!isChildActive\"\n (click)=\"onMenuItemClick(child)\">\n @if (child.icon) {\n <z-icon [zType]=\"child.icon\" zSize=\"18\" class=\"shrink-0\" />\n } @else if (child.iconSvg) {\n <z-icon [zSvg]=\"child.iconSvg\" zSize=\"18\" class=\"shrink-0\" />\n }\n <span\n class=\"min-w-0 flex-1 truncate text-[13px] font-[450]\"\n zTooltip\n [zContent]=\"child.name | translate\"\n [zArrow]=\"false\"\n [zOffset]=\"10\"\n zMaxWidth=\"200px\"\n zPosition=\"right\"\n [zTriggerElement]=\"divLevel1\">\n {{ child.name | translate }}\n </span>\n @if (hasChildren) {\n <z-icon\n zType=\"lucideChevronRight\"\n zSize=\"14\"\n class=\"z-menu-arrow shrink-0 opacity-60 transition-transform\"\n [class.expanded]=\"child.expanded\" />\n }\n </div>\n\n @if (hasChildren) {\n <div class=\"z-menu-submenu\" [class.expanded]=\"child.expanded\">\n <div class=\"z-menu-submenu-inner\">\n <div class=\"z-menu-tree relative ml-4 flex flex-col gap-1 pt-1 pl-3\">\n <div class=\"absolute top-0 bottom-2 left-0 w-px bg-gray-300 dark:bg-gray-600\"></div>\n\n @for (subChild of child.children; track subChild.id; let isLast = $last) {\n @let isSubChildActive = selectedMenuItem()?.id === subChild.id;\n <div class=\"relative\">\n <div class=\"absolute top-1/2 -left-3 h-px w-3 bg-gray-300 dark:bg-gray-600\"></div>\n\n <div\n #divLevel2\n class=\"z-menu-item flex w-full cursor-pointer items-center gap-2 rounded-[6px] p-2\"\n [class.bg-primary]=\"isSubChildActive\"\n [class.text-primary-foreground]=\"isSubChildActive\"\n [class.hover:bg-gray-200]=\"!isSubChildActive\"\n [class.dark:hover:bg-input/50]=\"!isSubChildActive\"\n (click)=\"onMenuItemClick(subChild)\">\n @if (subChild.icon) {\n <z-icon [zType]=\"subChild.icon\" zSize=\"16\" class=\"shrink-0\" />\n } @else if (subChild.iconSvg) {\n <z-icon [zSvg]=\"subChild.iconSvg\" zSize=\"16\" class=\"shrink-0\" />\n } @else {\n <div\n class=\"h-1 w-1 shrink-0 rounded-full\"\n [class.bg-primary-foreground]=\"isSubChildActive\"\n [class.bg-gray-400]=\"!isSubChildActive\"></div>\n }\n <span\n class=\"min-w-0 flex-1 truncate text-[13px] font-[450]\"\n zTooltip\n [zContent]=\"subChild.name | translate\"\n [zArrow]=\"false\"\n [zOffset]=\"10\"\n zMaxWidth=\"200px\"\n zPosition=\"right\"\n [zTriggerElement]=\"divLevel2\">\n {{ subChild.name | translate }}\n </span>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n</ng-template>\n", styles: [".z-menu{display:block;flex-shrink:0;height:100%}.z-menu [class*=cursor-pointer]{-webkit-user-select:none;user-select:none}@media(min-width:768px){.z-menu{contain:layout style;min-width:283px;transition:min-width .25s cubic-bezier(.4,0,.2,1);will-change:min-width}.z-menu.z-menu-collapsed,.z-menu.z-menu-no-child{min-width:53px}}.z-shadow-menu{box-shadow:0 0 10px #0000001f}@media(max-width:767px){.z-menu-desktop{display:none!important;pointer-events:none;visibility:hidden}}.z-sidebar-main{position:relative;z-index:20;flex-shrink:0}.z-sidebar-child-wrapper{--sidebar-child-width: 230px;position:absolute;left:0;top:0;width:calc(100% + -0px);height:100%;clip-path:inset(0 -100px 0 0);pointer-events:none;transition:clip-path .25s cubic-bezier(.4,0,.2,1);will-change:clip-path;contain:layout}.z-sidebar-child-wrapper.collapsed{clip-path:inset(0 -100px 0 53px)}.z-sidebar-child{flex-shrink:0;height:100%;margin-left:53px;transform:translate(0);transition:transform .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1);pointer-events:auto;will-change:transform,width}.z-sidebar-child.collapsed{transform:translate(calc(-1 * (var(--sidebar-child-width) + 50px + 5px)))}.z-menu-arrow.expanded{transform:rotate(90deg)}.z-menu-submenu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .15s ease-out}.z-menu-submenu.expanded{grid-template-rows:1fr}.z-menu-submenu>.z-menu-submenu-inner{overflow:hidden;min-height:0}.z-menu-backdrop{animation:z-menu-backdrop-enter .2s ease-out forwards}.z-menu-backdrop-dark{background-color:#0009}.z-menu-backdrop-blur{background-color:#0000000d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.z-menu-drawer{transform:translate(-100%);transition:transform .3s cubic-bezier(.32,.72,0,1);box-shadow:4px 0 24px #0000001a}.z-menu-drawer.open{transform:translate(0)}:host.z-menu-mobile-open .z-menu-drawer{transform:translate(0)}.z-menu-desktop.collapsed .z-sidebar-child-wrapper{pointer-events:none}.z-menu-custom-drawer{transform:translate(-100%);transition:transform .3s cubic-bezier(.32,.72,0,1);box-shadow:4px 0 24px #0000001a;will-change:transform}.z-menu-custom-drawer.open{transform:translate(0)}@keyframes z-menu-backdrop-enter{0%{opacity:0}to{opacity:1}}@keyframes z-expand-btn-enter{0%{opacity:0;transform:scale(.5) translateY(10px)}70%{transform:scale(1.1) translateY(-2px)}to{opacity:1;transform:scale(1) translateY(0)}}.z-expand-btn{animation:z-expand-btn-enter .25s cubic-bezier(.34,1.56,.64,1) forwards}.z-menu-scrollbar{--scrollbar-padding: 0}\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", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTrigger", "zTooltipType", "zTooltipSize", "zClass", "zShowDelay", "zHideDelay", "zArrow", "zDisabled", "zOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zManualClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl"], exportAs: ["zPopover"] }, { 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 });
|
|
376
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZMenuComponent, isStandalone: true, selector: "z-menu", 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 }, zActionsTemplate: { classPropertyName: "zActionsTemplate", publicName: "zActionsTemplate", 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 } }, outputs: { zOnSelect: "zOnSelect", zOnMenuAction: "zOnMenuAction", zControl: "zControl" }, host: { properties: { "class.z-menu-collapsed": "sidebarCollapsed()", "class.z-menu-no-child": "selectedParentHasNoChild()", "class.z-menu-mobile": "isMobile()", "class.z-menu-mobile-open": "mobileMenuOpen()" }, classAttribute: "z-menu block" }, providers: [TranslatePipe], ngImport: i0, template: "<!-- DESKTOP LAYOUT - Hidden on mobile -->\n<div class=\"z-menu-desktop relative z-200 hidden h-full py-1 pl-1 md:block\" [class.collapsed]=\"sidebarCollapsed()\">\n <main class=\"z-menu-main relative flex h-full\">\n <div class=\"z-sidebar-main h-full w-[50px]\">\n <div\n class=\"z-shadow-menu bg-sidebar border-border/40 dark:border-sidebar-border relative flex h-full w-full flex-col items-center gap-1.5 rounded-[6px] border\"></div>\n\n <div class=\"bg-sidebar text-sidebar-foreground absolute inset-px z-20 flex flex-col rounded-[6px]\">\n @if (zLogo()) {\n <div class=\"border-sidebar-border flex h-[52px] items-center justify-center border-b px-2\">\n <img [src]=\"zLogo()\" alt=\"Logo\" class=\"h-8 w-auto object-contain\" />\n </div>\n }\n\n <!-- Expand Button - Only show when collapsed -->\n @if (sidebarCollapsed() && selectedParent()) {\n <div\n class=\"z-expand-btn hover:bg-sidebar-accent mx-auto mt-2 flex h-9 w-9 cursor-pointer items-center justify-center rounded-[6px]\"\n (click)=\"toggleSidebar()\">\n <z-icon zType=\"lucideChevronsRight\" zSize=\"20\" class=\"opacity-70\" />\n </div>\n }\n\n <div class=\"flex flex-1 flex-col items-center gap-2 p-2\">\n @for (item of menuParents(); track item.id) {\n @let hasActiveChild = parentWithActiveChild()?.id === item.id;\n @let isCurrentlySelected = selectedParent()?.id === item.id;\n @let showActiveIndicator = hasActiveChild && !isCurrentlySelected;\n <div\n zTooltip\n [zContent]=\"item.name | translate\"\n zPosition=\"right\"\n [zArrow]=\"false\"\n [zAlwaysShow]=\"true\"\n class=\"relative flex h-9 w-9 cursor-pointer items-center justify-center rounded-[6px] select-none\"\n [class.bg-sidebar-primary]=\"selectedParent()?.id === item.id\"\n [class.text-sidebar-primary-foreground]=\"selectedParent()?.id === item.id\"\n [class.hover:bg-sidebar-accent]=\"selectedParent()?.id !== item.id\"\n (click)=\"onDesktopParentClick(item)\">\n @if (item.icon) {\n <z-icon [zType]=\"item.icon\" zSize=\"20\" />\n } @else {\n <z-icon [zSvg]=\"item.iconSvg || ''\" zSize=\"20\" />\n }\n @if (showActiveIndicator) {\n <div\n class=\"bg-sidebar-primary absolute top-1/2 -left-[5px] h-4 w-1 -translate-y-1/2 rounded-full\"></div>\n }\n </div>\n }\n </div>\n\n <div class=\"border-sidebar-border flex items-center justify-center border-t p-2\">\n <div\n z-popover\n [zOffset]=\"11\"\n [zPopoverContent]=\"userPopoverTpl\"\n zPosition=\"right-bottom\"\n class=\"aspect-square h-9 w-9 shrink-0 cursor-pointer overflow-hidden rounded-full\">\n <img [src]=\"avatarSrc()\" alt=\"User Avatar\" class=\"h-full w-full object-cover\" />\n </div>\n </div>\n </div>\n </div>\n\n <ng-template #userPopoverTpl let-close=\"close\">\n <div class=\"min-w-56 p-1\">\n <!-- User Info Header - Always shown -->\n <div class=\"p-0 text-sm font-normal\">\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=\"truncate font-medium\">{{ zUser()?.name || 'User Name' }}</span>\n <span class=\"text-muted-foreground mt-0.5 truncate text-xs\">\n {{ zUser()?.email || 'user@example.com' }}\n </span>\n </div>\n </div>\n </div>\n\n @if (getVisibleUserActions().length > 0 || zActionsTemplate()) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n\n <!-- Actions - Custom or from zUserActions -->\n @if (zActionsTemplate()) {\n <ng-container *ngTemplateOutlet=\"zActionsTemplate(); context: { close: close }\" />\n } @else if (getVisibleUserActions().length > 0) {\n @for (action of getVisibleUserActions(); track action.id; let idx = $index) {\n @if (shouldShowDividerBefore(action, idx)) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n\n <button\n type=\"button\"\n [disabled]=\"action.disabled\"\n [class]=\"action.class\"\n class=\"hover:bg-accent focus:bg-accent flex w-full cursor-pointer items-center gap-2 rounded-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>{{ action.label | translate }}</span>\n </button>\n\n @if (shouldShowDividerAfter(action, idx)) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n }\n }\n </div>\n </ng-template>\n\n @if (selectedParent(); as parent) {\n @let hasChildrenOrTemplate = parent.menuTemplate || (parent.children && parent.children.length > 0);\n @if (hasChildrenOrTemplate) {\n <div\n class=\"z-sidebar-child-wrapper\"\n [class.collapsed]=\"sidebarCollapsed()\"\n [style.--sidebar-child-width.px]=\"sidebarChildWidth()\">\n <div\n class=\"z-sidebar-child z-shadow-menu bg-card text-card-foreground border-border/40 dark:border-sidebar-border flex h-full shrink-0 flex-col items-start overflow-hidden rounded-[6px] border\"\n [style.width.px]=\"sidebarChildWidth()\"\n [class.collapsed]=\"sidebarCollapsed()\">\n <div class=\"border-border flex h-[52px] w-full shrink-0 items-center border-b px-3\">\n @if (selectedParent()?.icon) {\n <z-icon [zType]=\"selectedParent()!.icon\" zSize=\"20\" class=\"mr-2 shrink-0\" />\n }\n <div\n class=\"mr-4 min-w-0 flex-1 truncate text-base font-semibold\"\n zTooltip\n zPosition=\"top-left\"\n [zContent]=\"selectedParent()?.name || '' | translate\"\n [zArrow]=\"false\">\n {{ selectedParent()?.name | translate }}\n </div>\n\n <z-icon\n zType=\"lucidePanelRightOpen\"\n zSize=\"20\"\n class=\"shrink-0 cursor-pointer opacity-60 hover:opacity-100\"\n (click)=\"toggleSidebar()\" />\n </div>\n\n <!-- Show menuTemplate if available, otherwise show children -->\n @if (selectedParent()?.menuTemplate) {\n <ng-scrollbar class=\"z-menu-scrollbar min-h-0 w-full flex-1\" track=\"vertical\">\n <div class=\"flex w-full flex-col p-3 pr-2\">\n <ng-container\n *ngTemplateOutlet=\"\n selectedParent()!.menuTemplate!;\n context: { $implicit: selectedParent()!, close: closeSidebarFn }\n \" />\n </div>\n </ng-scrollbar>\n } @else {\n <ng-scrollbar class=\"z-menu-scrollbar min-h-0 w-full flex-1 overflow-hidden\" track=\"vertical\">\n <div class=\"flex w-full min-w-0 flex-col gap-1 overflow-hidden py-1 pr-2 pl-2\">\n <ng-container *ngTemplateOutlet=\"menuChildrenTpl; context: { $implicit: menuChildren() }\" />\n </div>\n </ng-scrollbar>\n }\n </div>\n </div>\n }\n }\n </main>\n</div>\n\n<!-- MOBILE LAYOUT - Visible only on mobile -->\n<div class=\"z-menu-mobile-wrapper hidden max-md:block\">\n <!-- Mobile Backdrop -->\n @if (mobileMenuOpen() || mobileTemplateDrawerOpen()) {\n <div\n class=\"z-menu-backdrop fixed inset-0 z-9998\"\n [class.z-menu-backdrop-dark]=\"overlayType() === 'dark'\"\n [class.z-menu-backdrop-blur]=\"overlayType() === 'blur'\"\n (click)=\"onBackdropClick()\"></div>\n }\n\n <!-- Mobile Drawer -->\n <aside\n class=\"z-menu-drawer bg-background border-border fixed top-0 left-0 z-9999 flex h-full w-70 flex-col rounded-r-lg border-r\"\n [class.open]=\"mobileMenuOpen()\">\n <!-- Drawer Header -->\n <div class=\"border-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=\"bg-accent h-9 w-9 shrink-0\" (click)=\"closeMobileMenu()\">\n <z-icon zType=\"lucideX\" zSize=\"20\" />\n </button>\n </div>\n\n <!-- Drawer Content - Accordion Menu -->\n <ng-scrollbar class=\"z-menu-scrollbar flex-1\" track=\"vertical\">\n <div class=\"p-3\">\n @for (parent of menuParents(); track parent.id) {\n <div class=\"mb-1\">\n <!-- Parent Item -->\n @let isParentActive =\n selectedMenuItem()?.id === parent.id && (!parent.children || parent.children.length === 0);\n @let hasActiveChild = parentWithActiveChild()?.id === parent.id && !isParentActive;\n @let isCurrentlyViewing = selectedParent()?.id === parent.id;\n <div\n class=\"relative flex cursor-pointer items-center gap-3 rounded-[6px] p-2\"\n [class.bg-primary/20]=\"isParentActive\"\n [class.text-primary]=\"isParentActive || hasActiveChild\"\n [class.hover:bg-accent]=\"!isParentActive\"\n (click)=\"onMobileParentClick(parent)\">\n @if (parent.icon) {\n <z-icon [zType]=\"parent.icon\" zSize=\"18\" class=\"shrink-0\" />\n } @else if (parent.iconSvg) {\n <z-icon [zSvg]=\"parent.iconSvg\" zSize=\"18\" class=\"shrink-0\" />\n }\n <span class=\"min-w-0 flex-1 truncate text-[13px] font-[450]\">{{ parent.name | translate }}</span>\n @if ((parent.children && parent.children.length > 0) || parent.menuTemplate) {\n <z-icon\n zType=\"lucideChevronRight\"\n zSize=\"16\"\n class=\"z-menu-arrow shrink-0 opacity-60 transition-transform\"\n [class.expanded]=\"parent.expanded && isCurrentlyViewing\" />\n }\n </div>\n\n <!-- Children (Accordion) - Only render if NO menuTemplate -->\n @if (parent.children && parent.children.length > 0 && !parent.menuTemplate) {\n <div class=\"z-menu-submenu\" [class.expanded]=\"parent.expanded && isCurrentlyViewing\">\n <div class=\"z-menu-submenu-inner\">\n <div class=\"z-menu-tree relative ml-4 flex flex-col gap-1 pt-1 pl-3\">\n <div class=\"absolute top-0 bottom-2 left-0 w-px bg-gray-300 dark:bg-gray-600\"></div>\n\n @for (child of parent.children; track child.id) {\n @let isChildActive =\n selectedMenuItem()?.id === child.id && (!child.children || child.children.length === 0);\n @let isChildParentOfActive = isParentOfActiveItem(child);\n @let hasChildren = child.children && child.children.length > 0;\n\n <div>\n <div\n class=\"relative flex cursor-pointer items-center gap-2 rounded-[6px] p-2\"\n [class.bg-primary]=\"isChildActive\"\n [class.text-primary-foreground]=\"isChildActive\"\n [class.text-primary]=\"isChildParentOfActive && !isChildActive\"\n [class.hover:bg-accent]=\"!isChildActive\"\n (click)=\"onMenuItemClick(child)\">\n <div class=\"absolute top-1/2 -left-3 h-px w-3 bg-gray-300 dark:bg-gray-600\"></div>\n @if (child.icon) {\n <z-icon [zType]=\"child.icon\" zSize=\"16\" class=\"shrink-0\" />\n } @else if (child.iconSvg) {\n <z-icon [zSvg]=\"child.iconSvg\" zSize=\"16\" class=\"shrink-0\" />\n } @else {\n <div\n class=\"h-1.5 w-1.5 shrink-0 rounded-full\"\n [class.bg-primary-foreground]=\"isChildActive\"\n [class.bg-gray-400]=\"!isChildActive\"></div>\n }\n <span class=\"min-w-0 flex-1 truncate text-[13px] font-[450]\">\n {{ child.name | translate }}\n </span>\n @if (hasChildren) {\n <z-icon\n zType=\"lucideChevronRight\"\n zSize=\"14\"\n class=\"z-menu-arrow shrink-0 opacity-60 transition-transform\"\n [class.expanded]=\"child.expanded\" />\n }\n </div>\n\n <!-- Level 3 -->\n @if (hasChildren) {\n <div class=\"z-menu-submenu\" [class.expanded]=\"child.expanded\">\n <div class=\"z-menu-submenu-inner\">\n <div class=\"relative ml-4 flex flex-col gap-1 pt-1 pl-3\">\n <div class=\"absolute top-0 bottom-2 left-0 w-px bg-gray-300 dark:bg-gray-600\"></div>\n\n @for (subChild of child.children; track subChild.id) {\n @let isSubChildActive = selectedMenuItem()?.id === subChild.id;\n\n <div class=\"relative w-full min-w-0\">\n <div class=\"absolute top-1/2 -left-3 h-px w-3 bg-gray-300 dark:bg-gray-600\"></div>\n\n <div\n class=\"flex cursor-pointer items-center gap-2 rounded-[6px] p-2\"\n [class.bg-primary]=\"isSubChildActive\"\n [class.text-primary-foreground]=\"isSubChildActive\"\n [class.hover:bg-accent]=\"!isSubChildActive\"\n (click)=\"onMenuItemClick(subChild)\">\n <div\n class=\"h-1 w-1 shrink-0 rounded-full\"\n [class.bg-primary-foreground]=\"isSubChildActive\"\n [class.bg-gray-400]=\"!isSubChildActive\"></div>\n <span class=\"min-w-0 flex-1 truncate text-[13px] font-[450]\">\n {{ subChild.name | translate }}\n </span>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </ng-scrollbar>\n\n <!-- Drawer Footer - User Info -->\n <div class=\"border-border shrink-0 border-t p-3\">\n <div\n z-popover\n [zOffset]=\"8\"\n [zPopoverContent]=\"mobileActionsPopoverTpl\"\n zPosition=\"top-right\"\n zTrigger=\"click\"\n class=\"hover:bg-accent flex cursor-pointer items-center gap-3 rounded-[6px] p-2\">\n <div 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 </div>\n <div class=\"min-w-0 flex-1\">\n <div class=\"truncate text-sm font-medium\">{{ zUser()?.name || 'User Name' }}</div>\n <div class=\"text-muted-foreground truncate text-xs\">{{ zUser()?.email || 'user@example.com' }}</div>\n </div>\n <div class=\"text-muted-foreground flex shrink-0 flex-col\">\n <z-icon zType=\"lucideChevronUp\" zSize=\"14\" />\n <z-icon zType=\"lucideChevronDown\" zSize=\"14\" class=\"-mt-1\" />\n </div>\n </div>\n </div>\n </aside>\n\n <!-- Mobile Custom Template Drawer -->\n <aside\n class=\"z-menu-custom-drawer bg-background border-border fixed top-0 left-0 z-9999 flex h-full max-w-[calc(100vw-16px)] flex-col rounded-r-lg border-r\"\n [style.width.px]=\"mobileCustomDrawerWidth()\"\n [class.open]=\"mobileTemplateDrawerOpen() && customDrawerParent()?.menuTemplate\">\n @if (customDrawerParent()?.menuTemplate) {\n <!-- Custom Drawer Header -->\n <div class=\"border-border flex h-14 shrink-0 items-center gap-3 border-b px-4\">\n <button\n z-button\n zType=\"ghost\"\n [zWave]=\"false\"\n class=\"bg-accent h-9 w-9 shrink-0\"\n (click)=\"closeMobileTemplateDrawer()\">\n <z-icon zType=\"lucideChevronLeft\" zSize=\"20\" />\n </button>\n <span class=\"min-w-0 flex-1 truncate text-base font-semibold\">\n {{ customDrawerParent()?.name | translate }}\n </span>\n </div>\n\n <!-- Custom Template Content -->\n <ng-scrollbar class=\"z-menu-scrollbar flex-1\" track=\"vertical\">\n <div class=\"p-4\">\n <ng-container\n *ngTemplateOutlet=\"\n customDrawerParent()!.menuTemplate!;\n context: { $implicit: customDrawerParent()!, close: closeMobileDrawerFn }\n \" />\n </div>\n </ng-scrollbar>\n }\n </aside>\n\n <ng-template #mobileActionsPopoverTpl let-close=\"close\">\n <div class=\"min-w-48 p-1\">\n @if (zActionsTemplate()) {\n <ng-container *ngTemplateOutlet=\"zActionsTemplate(); context: { close: close }\" />\n } @else if (getVisibleUserActions().length > 0) {\n @for (action of getVisibleUserActions(); track action.id; let idx = $index) {\n @if (shouldShowDividerBefore(action, idx)) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n\n <button\n type=\"button\"\n [disabled]=\"action.disabled\"\n [class]=\"action.class\"\n class=\"hover:bg-accent focus:bg-accent flex w-full cursor-pointer items-center gap-2 rounded-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>{{ action.label | translate }}</span>\n </button>\n\n @if (shouldShowDividerAfter(action, idx)) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n }\n }\n </div>\n </ng-template>\n</div>\n\n<!-- Shared Template for Menu Children -->\n<ng-template #menuChildrenTpl let-children>\n @for (child of children; track child.id) {\n @let isChildActive = selectedMenuItem()?.id === child.id && (!child.children || child.children.length === 0);\n @let isChildParentOfActive = isParentOfActiveItem(child);\n @let hasChildren = child.children && child.children.length > 0;\n <div class=\"w-full min-w-0\">\n <div\n #divLevel1\n class=\"z-menu-item flex w-full cursor-pointer items-center gap-2 rounded-[6px] p-2\"\n [class.bg-primary]=\"isChildActive\"\n [class.text-primary-foreground]=\"isChildActive\"\n [class.text-primary]=\"isChildParentOfActive && !isChildActive\"\n [class.hover:bg-gray-200]=\"!isChildActive\"\n [class.dark:hover:bg-input/50]=\"!isChildActive\"\n (click)=\"onMenuItemClick(child)\">\n @if (child.icon) {\n <z-icon [zType]=\"child.icon\" zSize=\"18\" class=\"shrink-0\" />\n } @else if (child.iconSvg) {\n <z-icon [zSvg]=\"child.iconSvg\" zSize=\"18\" class=\"shrink-0\" />\n }\n <span\n class=\"min-w-0 flex-1 truncate text-[13px] font-[450]\"\n zTooltip\n [zContent]=\"child.name | translate\"\n [zArrow]=\"false\"\n [zOffset]=\"10\"\n zMaxWidth=\"200px\"\n zPosition=\"right\"\n [zTriggerElement]=\"divLevel1\">\n {{ child.name | translate }}\n </span>\n @if (hasChildren) {\n <z-icon\n zType=\"lucideChevronRight\"\n zSize=\"14\"\n class=\"z-menu-arrow shrink-0 opacity-60 transition-transform\"\n [class.expanded]=\"child.expanded\" />\n }\n </div>\n\n @if (hasChildren) {\n <div class=\"z-menu-submenu\" [class.expanded]=\"child.expanded\">\n <div class=\"z-menu-submenu-inner\">\n <div class=\"z-menu-tree relative ml-4 flex flex-col gap-1 pt-1 pl-3\">\n <div class=\"absolute top-0 bottom-2 left-0 w-px bg-gray-300 dark:bg-gray-600\"></div>\n\n @for (subChild of child.children; track subChild.id; let isLast = $last) {\n @let isSubChildActive = selectedMenuItem()?.id === subChild.id;\n <div class=\"relative w-full min-w-0\">\n <div class=\"absolute top-1/2 -left-3 h-px w-3 bg-gray-300 dark:bg-gray-600\"></div>\n\n <div\n #divLevel2\n class=\"z-menu-item flex w-full cursor-pointer items-center gap-2 rounded-[6px] p-2\"\n [class.bg-primary]=\"isSubChildActive\"\n [class.text-primary-foreground]=\"isSubChildActive\"\n [class.hover:bg-gray-200]=\"!isSubChildActive\"\n [class.dark:hover:bg-input/50]=\"!isSubChildActive\"\n (click)=\"onMenuItemClick(subChild)\">\n @if (subChild.icon) {\n <z-icon [zType]=\"subChild.icon\" zSize=\"16\" class=\"shrink-0\" />\n } @else if (subChild.iconSvg) {\n <z-icon [zSvg]=\"subChild.iconSvg\" zSize=\"16\" class=\"shrink-0\" />\n } @else {\n <div\n class=\"h-1 w-1 shrink-0 rounded-full\"\n [class.bg-primary-foreground]=\"isSubChildActive\"\n [class.bg-gray-400]=\"!isSubChildActive\"></div>\n }\n <span\n class=\"min-w-0 flex-1 truncate text-[13px] font-[450]\"\n zTooltip\n [zContent]=\"subChild.name | translate\"\n [zArrow]=\"false\"\n [zOffset]=\"10\"\n zMaxWidth=\"200px\"\n zPosition=\"right\"\n [zTriggerElement]=\"divLevel2\">\n {{ subChild.name | translate }}\n </span>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n</ng-template>\n", styles: [".z-menu{display:block;flex-shrink:0;height:100%}.z-menu [class*=cursor-pointer]{-webkit-user-select:none;user-select:none}@media(min-width:768px){.z-menu{contain:layout style;min-width:283px;transition:min-width .25s cubic-bezier(.4,0,.2,1);will-change:min-width}.z-menu.z-menu-collapsed,.z-menu.z-menu-no-child{min-width:53px}}.z-shadow-menu{box-shadow:0 0 10px #0000001f}@media(max-width:767px){.z-menu-desktop{display:none!important;pointer-events:none;visibility:hidden}}.z-sidebar-main{position:relative;z-index:20;flex-shrink:0}.z-sidebar-child-wrapper{--sidebar-child-width: 230px;position:absolute;left:0;top:0;width:calc(100% + -0px);height:100%;clip-path:inset(0 -100px 0 0);pointer-events:none;transition:clip-path .25s cubic-bezier(.4,0,.2,1);will-change:clip-path;contain:layout;overflow:clip}.z-sidebar-child-wrapper.collapsed{clip-path:inset(0 -100px 0 53px)}.z-sidebar-child{flex-shrink:0;height:100%;margin-left:53px;transform:translate(0);transition:transform .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1);pointer-events:auto;will-change:transform,width;overflow:hidden;max-width:100%}.z-sidebar-child *{max-width:100%}.z-sidebar-child.collapsed{transform:translate(calc(-1 * (var(--sidebar-child-width) + 50px + 5px)))}.z-menu-arrow.expanded{transform:rotate(90deg)}.z-menu-submenu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .15s ease-out}.z-menu-submenu.expanded{grid-template-rows:1fr}.z-menu-submenu>.z-menu-submenu-inner{overflow:hidden;min-height:0}.z-menu-backdrop{animation:z-menu-backdrop-enter .2s ease-out forwards}.z-menu-backdrop-dark{background-color:#0009}.z-menu-backdrop-blur{background-color:#0000000d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.z-menu-drawer{transform:translate(-100%);transition:transform .3s cubic-bezier(.32,.72,0,1);box-shadow:4px 0 24px #0000001a}.z-menu-drawer.open{transform:translate(0)}:host.z-menu-mobile-open .z-menu-drawer{transform:translate(0)}.z-menu-desktop.collapsed .z-sidebar-child-wrapper{pointer-events:none}.z-menu-custom-drawer{transform:translate(-100%);transition:transform .3s cubic-bezier(.32,.72,0,1);box-shadow:4px 0 24px #0000001a;will-change:transform}.z-menu-custom-drawer.open{transform:translate(0)}@keyframes z-menu-backdrop-enter{0%{opacity:0}to{opacity:1}}@keyframes z-expand-btn-enter{0%{opacity:0;transform:scale(.5) translateY(10px)}70%{transform:scale(1.1) translateY(-2px)}to{opacity:1;transform:scale(1) translateY(0)}}.z-expand-btn{animation:z-expand-btn-enter .25s cubic-bezier(.34,1.56,.64,1) forwards}.z-menu-scrollbar{--scrollbar-padding: 0;max-width:100%}.z-menu-scrollbar .ng-scroll-viewport,.z-menu-scrollbar .ng-scroll-content{max-width:100%}.z-menu-item{min-width:0;overflow:hidden}\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", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTrigger", "zTooltipType", "zTooltipSize", "zClass", "zShowDelay", "zHideDelay", "zArrow", "zDisabled", "zOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zManualClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl"], exportAs: ["zPopover"] }, { 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 });
|
|
377
377
|
}
|
|
378
378
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZMenuComponent, decorators: [{
|
|
379
379
|
type: Component,
|
|
@@ -391,7 +391,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
391
391
|
'[class.z-menu-no-child]': 'selectedParentHasNoChild()',
|
|
392
392
|
'[class.z-menu-mobile]': 'isMobile()',
|
|
393
393
|
'[class.z-menu-mobile-open]': 'mobileMenuOpen()',
|
|
394
|
-
}, template: "<!-- DESKTOP LAYOUT - Hidden on mobile -->\n<div class=\"z-menu-desktop relative z-200 hidden h-full py-1 pl-1 md:block\" [class.collapsed]=\"sidebarCollapsed()\">\n <main class=\"z-menu-main relative flex h-full\">\n <div class=\"z-sidebar-main h-full w-[50px]\">\n <div\n class=\"z-shadow-menu bg-sidebar border-border/40 dark:border-sidebar-border relative flex h-full w-full flex-col items-center gap-1.5 rounded-[6px] border\"></div>\n\n <div class=\"bg-sidebar text-sidebar-foreground absolute inset-px z-20 flex flex-col rounded-[6px]\">\n @if (zLogo()) {\n <div class=\"border-sidebar-border flex h-[52px] items-center justify-center border-b px-2\">\n <img [src]=\"zLogo()\" alt=\"Logo\" class=\"h-8 w-auto object-contain\" />\n </div>\n }\n\n <!-- Expand Button - Only show when collapsed -->\n @if (sidebarCollapsed() && selectedParent()) {\n <div\n class=\"z-expand-btn hover:bg-sidebar-accent mx-auto mt-2 flex h-9 w-9 cursor-pointer items-center justify-center rounded-[6px]\"\n (click)=\"toggleSidebar()\">\n <z-icon zType=\"lucideChevronsRight\" zSize=\"20\" class=\"opacity-70\" />\n </div>\n }\n\n <div class=\"flex flex-1 flex-col items-center gap-2 p-2\">\n @for (item of menuParents(); track item.id) {\n @let hasActiveChild = parentWithActiveChild()?.id === item.id;\n @let isCurrentlySelected = selectedParent()?.id === item.id;\n @let showActiveIndicator = hasActiveChild && !isCurrentlySelected;\n <div\n zTooltip\n [zContent]=\"item.name | translate\"\n zPosition=\"right\"\n [zArrow]=\"false\"\n [zAlwaysShow]=\"true\"\n class=\"relative flex h-9 w-9 cursor-pointer items-center justify-center rounded-[6px] select-none\"\n [class.bg-sidebar-primary]=\"selectedParent()?.id === item.id\"\n [class.text-sidebar-primary-foreground]=\"selectedParent()?.id === item.id\"\n [class.hover:bg-sidebar-accent]=\"selectedParent()?.id !== item.id\"\n (click)=\"onDesktopParentClick(item)\">\n @if (item.icon) {\n <z-icon [zType]=\"item.icon\" zSize=\"20\" />\n } @else {\n <z-icon [zSvg]=\"item.iconSvg || ''\" zSize=\"20\" />\n }\n @if (showActiveIndicator) {\n <div\n class=\"bg-sidebar-primary absolute top-1/2 -left-[5px] h-4 w-1 -translate-y-1/2 rounded-full\"></div>\n }\n </div>\n }\n </div>\n\n <div class=\"border-sidebar-border flex items-center justify-center border-t p-2\">\n <div\n z-popover\n [zOffset]=\"11\"\n [zPopoverContent]=\"userPopoverTpl\"\n zPosition=\"right-bottom\"\n class=\"aspect-square h-9 w-9 shrink-0 cursor-pointer overflow-hidden rounded-full\">\n <img [src]=\"avatarSrc()\" alt=\"User Avatar\" class=\"h-full w-full object-cover\" />\n </div>\n </div>\n </div>\n </div>\n\n <ng-template #userPopoverTpl let-close=\"close\">\n <div class=\"min-w-56 p-1\">\n <!-- User Info Header - Always shown -->\n <div class=\"p-0 text-sm font-normal\">\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=\"truncate font-medium\">{{ zUser()?.name || 'User Name' }}</span>\n <span class=\"text-muted-foreground mt-0.5 truncate text-xs\">\n {{ zUser()?.email || 'user@example.com' }}\n </span>\n </div>\n </div>\n </div>\n\n @if (getVisibleUserActions().length > 0 || zActionsTemplate()) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n\n <!-- Actions - Custom or from zUserActions -->\n @if (zActionsTemplate()) {\n <ng-container *ngTemplateOutlet=\"zActionsTemplate(); context: { close: close }\" />\n } @else if (getVisibleUserActions().length > 0) {\n @for (action of getVisibleUserActions(); track action.id; let idx = $index) {\n @if (shouldShowDividerBefore(action, idx)) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n\n <button\n type=\"button\"\n [disabled]=\"action.disabled\"\n [class]=\"action.class\"\n class=\"hover:bg-accent focus:bg-accent flex w-full cursor-pointer items-center gap-2 rounded-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>{{ action.label | translate }}</span>\n </button>\n\n @if (shouldShowDividerAfter(action, idx)) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n }\n }\n </div>\n </ng-template>\n\n @if (selectedParent(); as parent) {\n @let hasChildrenOrTemplate = parent.menuTemplate || (parent.children && parent.children.length > 0);\n @if (hasChildrenOrTemplate) {\n <div\n class=\"z-sidebar-child-wrapper\"\n [class.collapsed]=\"sidebarCollapsed()\"\n [style.--sidebar-child-width.px]=\"sidebarChildWidth()\">\n <div\n class=\"z-sidebar-child z-shadow-menu bg-card text-card-foreground border-border/40 dark:border-sidebar-border flex h-full shrink-0 flex-col items-start rounded-[6px] border\"\n [style.width.px]=\"sidebarChildWidth()\"\n [class.collapsed]=\"sidebarCollapsed()\">\n <div class=\"border-border flex h-[52px] w-full shrink-0 items-center border-b px-3\">\n @if (selectedParent()?.icon) {\n <z-icon [zType]=\"selectedParent()!.icon\" zSize=\"20\" class=\"mr-2 shrink-0\" />\n }\n <div\n class=\"mr-4 min-w-0 flex-1 truncate text-base font-semibold\"\n zTooltip\n zPosition=\"top-left\"\n [zContent]=\"selectedParent()?.name || '' | translate\"\n [zArrow]=\"false\">\n {{ selectedParent()?.name | translate }}\n </div>\n\n <z-icon\n zType=\"lucidePanelRightOpen\"\n zSize=\"20\"\n class=\"shrink-0 cursor-pointer opacity-60 hover:opacity-100\"\n (click)=\"toggleSidebar()\" />\n </div>\n\n <!-- Show menuTemplate if available, otherwise show children -->\n @if (selectedParent()?.menuTemplate) {\n <ng-scrollbar class=\"z-menu-scrollbar min-h-0 w-full flex-1\" track=\"vertical\">\n <div class=\"flex w-full flex-col p-3 pr-2\">\n <ng-container\n *ngTemplateOutlet=\"\n selectedParent()!.menuTemplate!;\n context: { $implicit: selectedParent()!, close: closeSidebarFn }\n \" />\n </div>\n </ng-scrollbar>\n } @else {\n <ng-scrollbar class=\"z-menu-scrollbar min-h-0 w-full flex-1\" track=\"vertical\">\n <div class=\"flex w-full flex-col gap-1 py-1 pr-2 pl-2\">\n <ng-container *ngTemplateOutlet=\"menuChildrenTpl; context: { $implicit: menuChildren() }\" />\n </div>\n </ng-scrollbar>\n }\n </div>\n </div>\n }\n }\n </main>\n</div>\n\n<!-- MOBILE LAYOUT - Visible only on mobile -->\n<div class=\"z-menu-mobile-wrapper hidden max-md:block\">\n <!-- Mobile Backdrop -->\n @if (mobileMenuOpen() || mobileTemplateDrawerOpen()) {\n <div\n class=\"z-menu-backdrop fixed inset-0 z-9998\"\n [class.z-menu-backdrop-dark]=\"overlayType() === 'dark'\"\n [class.z-menu-backdrop-blur]=\"overlayType() === 'blur'\"\n (click)=\"onBackdropClick()\"></div>\n }\n\n <!-- Mobile Drawer -->\n <aside\n class=\"z-menu-drawer bg-background border-border fixed top-0 left-0 z-9999 flex h-full w-70 flex-col rounded-r-lg border-r\"\n [class.open]=\"mobileMenuOpen()\">\n <!-- Drawer Header -->\n <div class=\"border-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=\"bg-accent h-9 w-9 shrink-0\" (click)=\"closeMobileMenu()\">\n <z-icon zType=\"lucideX\" zSize=\"20\" />\n </button>\n </div>\n\n <!-- Drawer Content - Accordion Menu -->\n <ng-scrollbar class=\"z-menu-scrollbar flex-1\" track=\"vertical\">\n <div class=\"p-3\">\n @for (parent of menuParents(); track parent.id) {\n <div class=\"mb-1\">\n <!-- Parent Item -->\n @let isParentActive =\n selectedMenuItem()?.id === parent.id && (!parent.children || parent.children.length === 0);\n @let hasActiveChild = parentWithActiveChild()?.id === parent.id && !isParentActive;\n @let isCurrentlyViewing = selectedParent()?.id === parent.id;\n <div\n class=\"relative flex cursor-pointer items-center gap-3 rounded-[6px] p-2\"\n [class.bg-primary/20]=\"isParentActive\"\n [class.text-primary]=\"isParentActive || hasActiveChild\"\n [class.hover:bg-accent]=\"!isParentActive\"\n (click)=\"onMobileParentClick(parent)\">\n @if (parent.icon) {\n <z-icon [zType]=\"parent.icon\" zSize=\"18\" class=\"shrink-0\" />\n } @else if (parent.iconSvg) {\n <z-icon [zSvg]=\"parent.iconSvg\" zSize=\"18\" class=\"shrink-0\" />\n }\n <span class=\"min-w-0 flex-1 truncate text-[13px] font-[450]\">{{ parent.name | translate }}</span>\n @if ((parent.children && parent.children.length > 0) || parent.menuTemplate) {\n <z-icon\n zType=\"lucideChevronRight\"\n zSize=\"16\"\n class=\"z-menu-arrow shrink-0 opacity-60 transition-transform\"\n [class.expanded]=\"parent.expanded && isCurrentlyViewing\" />\n }\n </div>\n\n <!-- Children (Accordion) - Only render if NO menuTemplate -->\n @if (parent.children && parent.children.length > 0 && !parent.menuTemplate) {\n <div class=\"z-menu-submenu\" [class.expanded]=\"parent.expanded && isCurrentlyViewing\">\n <div class=\"z-menu-submenu-inner\">\n <div class=\"z-menu-tree relative ml-4 flex flex-col gap-1 pt-1 pl-3\">\n <div class=\"absolute top-0 bottom-2 left-0 w-px bg-gray-300 dark:bg-gray-600\"></div>\n\n @for (child of parent.children; track child.id) {\n @let isChildActive =\n selectedMenuItem()?.id === child.id && (!child.children || child.children.length === 0);\n @let isChildParentOfActive = isParentOfActiveItem(child);\n @let hasChildren = child.children && child.children.length > 0;\n\n <div>\n <div\n class=\"relative flex cursor-pointer items-center gap-2 rounded-[6px] p-2\"\n [class.bg-primary]=\"isChildActive\"\n [class.text-primary-foreground]=\"isChildActive\"\n [class.text-primary]=\"isChildParentOfActive && !isChildActive\"\n [class.hover:bg-accent]=\"!isChildActive\"\n (click)=\"onMenuItemClick(child)\">\n <div class=\"absolute top-1/2 -left-3 h-px w-3 bg-gray-300 dark:bg-gray-600\"></div>\n @if (child.icon) {\n <z-icon [zType]=\"child.icon\" zSize=\"16\" class=\"shrink-0\" />\n } @else if (child.iconSvg) {\n <z-icon [zSvg]=\"child.iconSvg\" zSize=\"16\" class=\"shrink-0\" />\n } @else {\n <div\n class=\"h-1.5 w-1.5 shrink-0 rounded-full\"\n [class.bg-primary-foreground]=\"isChildActive\"\n [class.bg-gray-400]=\"!isChildActive\"></div>\n }\n <span class=\"min-w-0 flex-1 truncate text-[13px] font-[450]\">\n {{ child.name | translate }}\n </span>\n @if (hasChildren) {\n <z-icon\n zType=\"lucideChevronRight\"\n zSize=\"14\"\n class=\"z-menu-arrow shrink-0 opacity-60 transition-transform\"\n [class.expanded]=\"child.expanded\" />\n }\n </div>\n\n <!-- Level 3 -->\n @if (hasChildren) {\n <div class=\"z-menu-submenu\" [class.expanded]=\"child.expanded\">\n <div class=\"z-menu-submenu-inner\">\n <div class=\"relative ml-4 flex flex-col gap-1 pt-1 pl-3\">\n <div class=\"absolute top-0 bottom-2 left-0 w-px bg-gray-300 dark:bg-gray-600\"></div>\n\n @for (subChild of child.children; track subChild.id) {\n @let isSubChildActive = selectedMenuItem()?.id === subChild.id;\n\n <div class=\"relative\">\n <div class=\"absolute top-1/2 -left-3 h-px w-3 bg-gray-300 dark:bg-gray-600\"></div>\n\n <div\n class=\"flex cursor-pointer items-center gap-2 rounded-[6px] p-2\"\n [class.bg-primary]=\"isSubChildActive\"\n [class.text-primary-foreground]=\"isSubChildActive\"\n [class.hover:bg-accent]=\"!isSubChildActive\"\n (click)=\"onMenuItemClick(subChild)\">\n <div\n class=\"h-1 w-1 shrink-0 rounded-full\"\n [class.bg-primary-foreground]=\"isSubChildActive\"\n [class.bg-gray-400]=\"!isSubChildActive\"></div>\n <span class=\"min-w-0 flex-1 truncate text-[13px] font-[450]\">\n {{ subChild.name | translate }}\n </span>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </ng-scrollbar>\n\n <!-- Drawer Footer - User Info -->\n <div class=\"border-border shrink-0 border-t p-3\">\n <div\n z-popover\n [zOffset]=\"8\"\n [zPopoverContent]=\"mobileActionsPopoverTpl\"\n zPosition=\"top-right\"\n zTrigger=\"click\"\n class=\"hover:bg-accent flex cursor-pointer items-center gap-3 rounded-[6px] p-2\">\n <div 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 </div>\n <div class=\"min-w-0 flex-1\">\n <div class=\"truncate text-sm font-medium\">{{ zUser()?.name || 'User Name' }}</div>\n <div class=\"text-muted-foreground truncate text-xs\">{{ zUser()?.email || 'user@example.com' }}</div>\n </div>\n <div class=\"text-muted-foreground flex shrink-0 flex-col\">\n <z-icon zType=\"lucideChevronUp\" zSize=\"14\" />\n <z-icon zType=\"lucideChevronDown\" zSize=\"14\" class=\"-mt-1\" />\n </div>\n </div>\n </div>\n </aside>\n\n <!-- Mobile Custom Template Drawer -->\n <aside\n class=\"z-menu-custom-drawer bg-background border-border fixed top-0 left-0 z-9999 flex h-full max-w-[calc(100vw-16px)] flex-col rounded-r-lg border-r\"\n [style.width.px]=\"mobileCustomDrawerWidth()\"\n [class.open]=\"mobileTemplateDrawerOpen() && customDrawerParent()?.menuTemplate\">\n @if (customDrawerParent()?.menuTemplate) {\n <!-- Custom Drawer Header -->\n <div class=\"border-border flex h-14 shrink-0 items-center gap-3 border-b px-4\">\n <button\n z-button\n zType=\"ghost\"\n [zWave]=\"false\"\n class=\"bg-accent h-9 w-9 shrink-0\"\n (click)=\"closeMobileTemplateDrawer()\">\n <z-icon zType=\"lucideChevronLeft\" zSize=\"20\" />\n </button>\n <span class=\"min-w-0 flex-1 truncate text-base font-semibold\">\n {{ customDrawerParent()?.name | translate }}\n </span>\n </div>\n\n <!-- Custom Template Content -->\n <ng-scrollbar class=\"z-menu-scrollbar flex-1\" track=\"vertical\">\n <div class=\"p-4\">\n <ng-container\n *ngTemplateOutlet=\"\n customDrawerParent()!.menuTemplate!;\n context: { $implicit: customDrawerParent()!, close: closeMobileDrawerFn }\n \" />\n </div>\n </ng-scrollbar>\n }\n </aside>\n\n <ng-template #mobileActionsPopoverTpl let-close=\"close\">\n <div class=\"min-w-48 p-1\">\n @if (zActionsTemplate()) {\n <ng-container *ngTemplateOutlet=\"zActionsTemplate(); context: { close: close }\" />\n } @else if (getVisibleUserActions().length > 0) {\n @for (action of getVisibleUserActions(); track action.id; let idx = $index) {\n @if (shouldShowDividerBefore(action, idx)) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n\n <button\n type=\"button\"\n [disabled]=\"action.disabled\"\n [class]=\"action.class\"\n class=\"hover:bg-accent focus:bg-accent flex w-full cursor-pointer items-center gap-2 rounded-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>{{ action.label | translate }}</span>\n </button>\n\n @if (shouldShowDividerAfter(action, idx)) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n }\n }\n </div>\n </ng-template>\n</div>\n\n<!-- Shared Template for Menu Children -->\n<ng-template #menuChildrenTpl let-children>\n @for (child of children; track child.id) {\n @let isChildActive = selectedMenuItem()?.id === child.id && (!child.children || child.children.length === 0);\n @let isChildParentOfActive = isParentOfActiveItem(child);\n @let hasChildren = child.children && child.children.length > 0;\n <div>\n <div\n #divLevel1\n class=\"z-menu-item flex w-full cursor-pointer items-center gap-2 rounded-[6px] p-2\"\n [class.bg-primary]=\"isChildActive\"\n [class.text-primary-foreground]=\"isChildActive\"\n [class.text-primary]=\"isChildParentOfActive && !isChildActive\"\n [class.hover:bg-gray-200]=\"!isChildActive\"\n [class.dark:hover:bg-input/50]=\"!isChildActive\"\n (click)=\"onMenuItemClick(child)\">\n @if (child.icon) {\n <z-icon [zType]=\"child.icon\" zSize=\"18\" class=\"shrink-0\" />\n } @else if (child.iconSvg) {\n <z-icon [zSvg]=\"child.iconSvg\" zSize=\"18\" class=\"shrink-0\" />\n }\n <span\n class=\"min-w-0 flex-1 truncate text-[13px] font-[450]\"\n zTooltip\n [zContent]=\"child.name | translate\"\n [zArrow]=\"false\"\n [zOffset]=\"10\"\n zMaxWidth=\"200px\"\n zPosition=\"right\"\n [zTriggerElement]=\"divLevel1\">\n {{ child.name | translate }}\n </span>\n @if (hasChildren) {\n <z-icon\n zType=\"lucideChevronRight\"\n zSize=\"14\"\n class=\"z-menu-arrow shrink-0 opacity-60 transition-transform\"\n [class.expanded]=\"child.expanded\" />\n }\n </div>\n\n @if (hasChildren) {\n <div class=\"z-menu-submenu\" [class.expanded]=\"child.expanded\">\n <div class=\"z-menu-submenu-inner\">\n <div class=\"z-menu-tree relative ml-4 flex flex-col gap-1 pt-1 pl-3\">\n <div class=\"absolute top-0 bottom-2 left-0 w-px bg-gray-300 dark:bg-gray-600\"></div>\n\n @for (subChild of child.children; track subChild.id; let isLast = $last) {\n @let isSubChildActive = selectedMenuItem()?.id === subChild.id;\n <div class=\"relative\">\n <div class=\"absolute top-1/2 -left-3 h-px w-3 bg-gray-300 dark:bg-gray-600\"></div>\n\n <div\n #divLevel2\n class=\"z-menu-item flex w-full cursor-pointer items-center gap-2 rounded-[6px] p-2\"\n [class.bg-primary]=\"isSubChildActive\"\n [class.text-primary-foreground]=\"isSubChildActive\"\n [class.hover:bg-gray-200]=\"!isSubChildActive\"\n [class.dark:hover:bg-input/50]=\"!isSubChildActive\"\n (click)=\"onMenuItemClick(subChild)\">\n @if (subChild.icon) {\n <z-icon [zType]=\"subChild.icon\" zSize=\"16\" class=\"shrink-0\" />\n } @else if (subChild.iconSvg) {\n <z-icon [zSvg]=\"subChild.iconSvg\" zSize=\"16\" class=\"shrink-0\" />\n } @else {\n <div\n class=\"h-1 w-1 shrink-0 rounded-full\"\n [class.bg-primary-foreground]=\"isSubChildActive\"\n [class.bg-gray-400]=\"!isSubChildActive\"></div>\n }\n <span\n class=\"min-w-0 flex-1 truncate text-[13px] font-[450]\"\n zTooltip\n [zContent]=\"subChild.name | translate\"\n [zArrow]=\"false\"\n [zOffset]=\"10\"\n zMaxWidth=\"200px\"\n zPosition=\"right\"\n [zTriggerElement]=\"divLevel2\">\n {{ subChild.name | translate }}\n </span>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n</ng-template>\n", styles: [".z-menu{display:block;flex-shrink:0;height:100%}.z-menu [class*=cursor-pointer]{-webkit-user-select:none;user-select:none}@media(min-width:768px){.z-menu{contain:layout style;min-width:283px;transition:min-width .25s cubic-bezier(.4,0,.2,1);will-change:min-width}.z-menu.z-menu-collapsed,.z-menu.z-menu-no-child{min-width:53px}}.z-shadow-menu{box-shadow:0 0 10px #0000001f}@media(max-width:767px){.z-menu-desktop{display:none!important;pointer-events:none;visibility:hidden}}.z-sidebar-main{position:relative;z-index:20;flex-shrink:0}.z-sidebar-child-wrapper{--sidebar-child-width: 230px;position:absolute;left:0;top:0;width:calc(100% + -0px);height:100%;clip-path:inset(0 -100px 0 0);pointer-events:none;transition:clip-path .25s cubic-bezier(.4,0,.2,1);will-change:clip-path;contain:layout}.z-sidebar-child-wrapper.collapsed{clip-path:inset(0 -100px 0 53px)}.z-sidebar-child{flex-shrink:0;height:100%;margin-left:53px;transform:translate(0);transition:transform .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1);pointer-events:auto;will-change:transform,width}.z-sidebar-child.collapsed{transform:translate(calc(-1 * (var(--sidebar-child-width) + 50px + 5px)))}.z-menu-arrow.expanded{transform:rotate(90deg)}.z-menu-submenu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .15s ease-out}.z-menu-submenu.expanded{grid-template-rows:1fr}.z-menu-submenu>.z-menu-submenu-inner{overflow:hidden;min-height:0}.z-menu-backdrop{animation:z-menu-backdrop-enter .2s ease-out forwards}.z-menu-backdrop-dark{background-color:#0009}.z-menu-backdrop-blur{background-color:#0000000d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.z-menu-drawer{transform:translate(-100%);transition:transform .3s cubic-bezier(.32,.72,0,1);box-shadow:4px 0 24px #0000001a}.z-menu-drawer.open{transform:translate(0)}:host.z-menu-mobile-open .z-menu-drawer{transform:translate(0)}.z-menu-desktop.collapsed .z-sidebar-child-wrapper{pointer-events:none}.z-menu-custom-drawer{transform:translate(-100%);transition:transform .3s cubic-bezier(.32,.72,0,1);box-shadow:4px 0 24px #0000001a;will-change:transform}.z-menu-custom-drawer.open{transform:translate(0)}@keyframes z-menu-backdrop-enter{0%{opacity:0}to{opacity:1}}@keyframes z-expand-btn-enter{0%{opacity:0;transform:scale(.5) translateY(10px)}70%{transform:scale(1.1) translateY(-2px)}to{opacity:1;transform:scale(1) translateY(0)}}.z-expand-btn{animation:z-expand-btn-enter .25s cubic-bezier(.34,1.56,.64,1) forwards}.z-menu-scrollbar{--scrollbar-padding: 0}\n"] }]
|
|
394
|
+
}, template: "<!-- DESKTOP LAYOUT - Hidden on mobile -->\n<div class=\"z-menu-desktop relative z-200 hidden h-full py-1 pl-1 md:block\" [class.collapsed]=\"sidebarCollapsed()\">\n <main class=\"z-menu-main relative flex h-full\">\n <div class=\"z-sidebar-main h-full w-[50px]\">\n <div\n class=\"z-shadow-menu bg-sidebar border-border/40 dark:border-sidebar-border relative flex h-full w-full flex-col items-center gap-1.5 rounded-[6px] border\"></div>\n\n <div class=\"bg-sidebar text-sidebar-foreground absolute inset-px z-20 flex flex-col rounded-[6px]\">\n @if (zLogo()) {\n <div class=\"border-sidebar-border flex h-[52px] items-center justify-center border-b px-2\">\n <img [src]=\"zLogo()\" alt=\"Logo\" class=\"h-8 w-auto object-contain\" />\n </div>\n }\n\n <!-- Expand Button - Only show when collapsed -->\n @if (sidebarCollapsed() && selectedParent()) {\n <div\n class=\"z-expand-btn hover:bg-sidebar-accent mx-auto mt-2 flex h-9 w-9 cursor-pointer items-center justify-center rounded-[6px]\"\n (click)=\"toggleSidebar()\">\n <z-icon zType=\"lucideChevronsRight\" zSize=\"20\" class=\"opacity-70\" />\n </div>\n }\n\n <div class=\"flex flex-1 flex-col items-center gap-2 p-2\">\n @for (item of menuParents(); track item.id) {\n @let hasActiveChild = parentWithActiveChild()?.id === item.id;\n @let isCurrentlySelected = selectedParent()?.id === item.id;\n @let showActiveIndicator = hasActiveChild && !isCurrentlySelected;\n <div\n zTooltip\n [zContent]=\"item.name | translate\"\n zPosition=\"right\"\n [zArrow]=\"false\"\n [zAlwaysShow]=\"true\"\n class=\"relative flex h-9 w-9 cursor-pointer items-center justify-center rounded-[6px] select-none\"\n [class.bg-sidebar-primary]=\"selectedParent()?.id === item.id\"\n [class.text-sidebar-primary-foreground]=\"selectedParent()?.id === item.id\"\n [class.hover:bg-sidebar-accent]=\"selectedParent()?.id !== item.id\"\n (click)=\"onDesktopParentClick(item)\">\n @if (item.icon) {\n <z-icon [zType]=\"item.icon\" zSize=\"20\" />\n } @else {\n <z-icon [zSvg]=\"item.iconSvg || ''\" zSize=\"20\" />\n }\n @if (showActiveIndicator) {\n <div\n class=\"bg-sidebar-primary absolute top-1/2 -left-[5px] h-4 w-1 -translate-y-1/2 rounded-full\"></div>\n }\n </div>\n }\n </div>\n\n <div class=\"border-sidebar-border flex items-center justify-center border-t p-2\">\n <div\n z-popover\n [zOffset]=\"11\"\n [zPopoverContent]=\"userPopoverTpl\"\n zPosition=\"right-bottom\"\n class=\"aspect-square h-9 w-9 shrink-0 cursor-pointer overflow-hidden rounded-full\">\n <img [src]=\"avatarSrc()\" alt=\"User Avatar\" class=\"h-full w-full object-cover\" />\n </div>\n </div>\n </div>\n </div>\n\n <ng-template #userPopoverTpl let-close=\"close\">\n <div class=\"min-w-56 p-1\">\n <!-- User Info Header - Always shown -->\n <div class=\"p-0 text-sm font-normal\">\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=\"truncate font-medium\">{{ zUser()?.name || 'User Name' }}</span>\n <span class=\"text-muted-foreground mt-0.5 truncate text-xs\">\n {{ zUser()?.email || 'user@example.com' }}\n </span>\n </div>\n </div>\n </div>\n\n @if (getVisibleUserActions().length > 0 || zActionsTemplate()) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n\n <!-- Actions - Custom or from zUserActions -->\n @if (zActionsTemplate()) {\n <ng-container *ngTemplateOutlet=\"zActionsTemplate(); context: { close: close }\" />\n } @else if (getVisibleUserActions().length > 0) {\n @for (action of getVisibleUserActions(); track action.id; let idx = $index) {\n @if (shouldShowDividerBefore(action, idx)) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n\n <button\n type=\"button\"\n [disabled]=\"action.disabled\"\n [class]=\"action.class\"\n class=\"hover:bg-accent focus:bg-accent flex w-full cursor-pointer items-center gap-2 rounded-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>{{ action.label | translate }}</span>\n </button>\n\n @if (shouldShowDividerAfter(action, idx)) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n }\n }\n </div>\n </ng-template>\n\n @if (selectedParent(); as parent) {\n @let hasChildrenOrTemplate = parent.menuTemplate || (parent.children && parent.children.length > 0);\n @if (hasChildrenOrTemplate) {\n <div\n class=\"z-sidebar-child-wrapper\"\n [class.collapsed]=\"sidebarCollapsed()\"\n [style.--sidebar-child-width.px]=\"sidebarChildWidth()\">\n <div\n class=\"z-sidebar-child z-shadow-menu bg-card text-card-foreground border-border/40 dark:border-sidebar-border flex h-full shrink-0 flex-col items-start overflow-hidden rounded-[6px] border\"\n [style.width.px]=\"sidebarChildWidth()\"\n [class.collapsed]=\"sidebarCollapsed()\">\n <div class=\"border-border flex h-[52px] w-full shrink-0 items-center border-b px-3\">\n @if (selectedParent()?.icon) {\n <z-icon [zType]=\"selectedParent()!.icon\" zSize=\"20\" class=\"mr-2 shrink-0\" />\n }\n <div\n class=\"mr-4 min-w-0 flex-1 truncate text-base font-semibold\"\n zTooltip\n zPosition=\"top-left\"\n [zContent]=\"selectedParent()?.name || '' | translate\"\n [zArrow]=\"false\">\n {{ selectedParent()?.name | translate }}\n </div>\n\n <z-icon\n zType=\"lucidePanelRightOpen\"\n zSize=\"20\"\n class=\"shrink-0 cursor-pointer opacity-60 hover:opacity-100\"\n (click)=\"toggleSidebar()\" />\n </div>\n\n <!-- Show menuTemplate if available, otherwise show children -->\n @if (selectedParent()?.menuTemplate) {\n <ng-scrollbar class=\"z-menu-scrollbar min-h-0 w-full flex-1\" track=\"vertical\">\n <div class=\"flex w-full flex-col p-3 pr-2\">\n <ng-container\n *ngTemplateOutlet=\"\n selectedParent()!.menuTemplate!;\n context: { $implicit: selectedParent()!, close: closeSidebarFn }\n \" />\n </div>\n </ng-scrollbar>\n } @else {\n <ng-scrollbar class=\"z-menu-scrollbar min-h-0 w-full flex-1 overflow-hidden\" track=\"vertical\">\n <div class=\"flex w-full min-w-0 flex-col gap-1 overflow-hidden py-1 pr-2 pl-2\">\n <ng-container *ngTemplateOutlet=\"menuChildrenTpl; context: { $implicit: menuChildren() }\" />\n </div>\n </ng-scrollbar>\n }\n </div>\n </div>\n }\n }\n </main>\n</div>\n\n<!-- MOBILE LAYOUT - Visible only on mobile -->\n<div class=\"z-menu-mobile-wrapper hidden max-md:block\">\n <!-- Mobile Backdrop -->\n @if (mobileMenuOpen() || mobileTemplateDrawerOpen()) {\n <div\n class=\"z-menu-backdrop fixed inset-0 z-9998\"\n [class.z-menu-backdrop-dark]=\"overlayType() === 'dark'\"\n [class.z-menu-backdrop-blur]=\"overlayType() === 'blur'\"\n (click)=\"onBackdropClick()\"></div>\n }\n\n <!-- Mobile Drawer -->\n <aside\n class=\"z-menu-drawer bg-background border-border fixed top-0 left-0 z-9999 flex h-full w-70 flex-col rounded-r-lg border-r\"\n [class.open]=\"mobileMenuOpen()\">\n <!-- Drawer Header -->\n <div class=\"border-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=\"bg-accent h-9 w-9 shrink-0\" (click)=\"closeMobileMenu()\">\n <z-icon zType=\"lucideX\" zSize=\"20\" />\n </button>\n </div>\n\n <!-- Drawer Content - Accordion Menu -->\n <ng-scrollbar class=\"z-menu-scrollbar flex-1\" track=\"vertical\">\n <div class=\"p-3\">\n @for (parent of menuParents(); track parent.id) {\n <div class=\"mb-1\">\n <!-- Parent Item -->\n @let isParentActive =\n selectedMenuItem()?.id === parent.id && (!parent.children || parent.children.length === 0);\n @let hasActiveChild = parentWithActiveChild()?.id === parent.id && !isParentActive;\n @let isCurrentlyViewing = selectedParent()?.id === parent.id;\n <div\n class=\"relative flex cursor-pointer items-center gap-3 rounded-[6px] p-2\"\n [class.bg-primary/20]=\"isParentActive\"\n [class.text-primary]=\"isParentActive || hasActiveChild\"\n [class.hover:bg-accent]=\"!isParentActive\"\n (click)=\"onMobileParentClick(parent)\">\n @if (parent.icon) {\n <z-icon [zType]=\"parent.icon\" zSize=\"18\" class=\"shrink-0\" />\n } @else if (parent.iconSvg) {\n <z-icon [zSvg]=\"parent.iconSvg\" zSize=\"18\" class=\"shrink-0\" />\n }\n <span class=\"min-w-0 flex-1 truncate text-[13px] font-[450]\">{{ parent.name | translate }}</span>\n @if ((parent.children && parent.children.length > 0) || parent.menuTemplate) {\n <z-icon\n zType=\"lucideChevronRight\"\n zSize=\"16\"\n class=\"z-menu-arrow shrink-0 opacity-60 transition-transform\"\n [class.expanded]=\"parent.expanded && isCurrentlyViewing\" />\n }\n </div>\n\n <!-- Children (Accordion) - Only render if NO menuTemplate -->\n @if (parent.children && parent.children.length > 0 && !parent.menuTemplate) {\n <div class=\"z-menu-submenu\" [class.expanded]=\"parent.expanded && isCurrentlyViewing\">\n <div class=\"z-menu-submenu-inner\">\n <div class=\"z-menu-tree relative ml-4 flex flex-col gap-1 pt-1 pl-3\">\n <div class=\"absolute top-0 bottom-2 left-0 w-px bg-gray-300 dark:bg-gray-600\"></div>\n\n @for (child of parent.children; track child.id) {\n @let isChildActive =\n selectedMenuItem()?.id === child.id && (!child.children || child.children.length === 0);\n @let isChildParentOfActive = isParentOfActiveItem(child);\n @let hasChildren = child.children && child.children.length > 0;\n\n <div>\n <div\n class=\"relative flex cursor-pointer items-center gap-2 rounded-[6px] p-2\"\n [class.bg-primary]=\"isChildActive\"\n [class.text-primary-foreground]=\"isChildActive\"\n [class.text-primary]=\"isChildParentOfActive && !isChildActive\"\n [class.hover:bg-accent]=\"!isChildActive\"\n (click)=\"onMenuItemClick(child)\">\n <div class=\"absolute top-1/2 -left-3 h-px w-3 bg-gray-300 dark:bg-gray-600\"></div>\n @if (child.icon) {\n <z-icon [zType]=\"child.icon\" zSize=\"16\" class=\"shrink-0\" />\n } @else if (child.iconSvg) {\n <z-icon [zSvg]=\"child.iconSvg\" zSize=\"16\" class=\"shrink-0\" />\n } @else {\n <div\n class=\"h-1.5 w-1.5 shrink-0 rounded-full\"\n [class.bg-primary-foreground]=\"isChildActive\"\n [class.bg-gray-400]=\"!isChildActive\"></div>\n }\n <span class=\"min-w-0 flex-1 truncate text-[13px] font-[450]\">\n {{ child.name | translate }}\n </span>\n @if (hasChildren) {\n <z-icon\n zType=\"lucideChevronRight\"\n zSize=\"14\"\n class=\"z-menu-arrow shrink-0 opacity-60 transition-transform\"\n [class.expanded]=\"child.expanded\" />\n }\n </div>\n\n <!-- Level 3 -->\n @if (hasChildren) {\n <div class=\"z-menu-submenu\" [class.expanded]=\"child.expanded\">\n <div class=\"z-menu-submenu-inner\">\n <div class=\"relative ml-4 flex flex-col gap-1 pt-1 pl-3\">\n <div class=\"absolute top-0 bottom-2 left-0 w-px bg-gray-300 dark:bg-gray-600\"></div>\n\n @for (subChild of child.children; track subChild.id) {\n @let isSubChildActive = selectedMenuItem()?.id === subChild.id;\n\n <div class=\"relative w-full min-w-0\">\n <div class=\"absolute top-1/2 -left-3 h-px w-3 bg-gray-300 dark:bg-gray-600\"></div>\n\n <div\n class=\"flex cursor-pointer items-center gap-2 rounded-[6px] p-2\"\n [class.bg-primary]=\"isSubChildActive\"\n [class.text-primary-foreground]=\"isSubChildActive\"\n [class.hover:bg-accent]=\"!isSubChildActive\"\n (click)=\"onMenuItemClick(subChild)\">\n <div\n class=\"h-1 w-1 shrink-0 rounded-full\"\n [class.bg-primary-foreground]=\"isSubChildActive\"\n [class.bg-gray-400]=\"!isSubChildActive\"></div>\n <span class=\"min-w-0 flex-1 truncate text-[13px] font-[450]\">\n {{ subChild.name | translate }}\n </span>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </ng-scrollbar>\n\n <!-- Drawer Footer - User Info -->\n <div class=\"border-border shrink-0 border-t p-3\">\n <div\n z-popover\n [zOffset]=\"8\"\n [zPopoverContent]=\"mobileActionsPopoverTpl\"\n zPosition=\"top-right\"\n zTrigger=\"click\"\n class=\"hover:bg-accent flex cursor-pointer items-center gap-3 rounded-[6px] p-2\">\n <div 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 </div>\n <div class=\"min-w-0 flex-1\">\n <div class=\"truncate text-sm font-medium\">{{ zUser()?.name || 'User Name' }}</div>\n <div class=\"text-muted-foreground truncate text-xs\">{{ zUser()?.email || 'user@example.com' }}</div>\n </div>\n <div class=\"text-muted-foreground flex shrink-0 flex-col\">\n <z-icon zType=\"lucideChevronUp\" zSize=\"14\" />\n <z-icon zType=\"lucideChevronDown\" zSize=\"14\" class=\"-mt-1\" />\n </div>\n </div>\n </div>\n </aside>\n\n <!-- Mobile Custom Template Drawer -->\n <aside\n class=\"z-menu-custom-drawer bg-background border-border fixed top-0 left-0 z-9999 flex h-full max-w-[calc(100vw-16px)] flex-col rounded-r-lg border-r\"\n [style.width.px]=\"mobileCustomDrawerWidth()\"\n [class.open]=\"mobileTemplateDrawerOpen() && customDrawerParent()?.menuTemplate\">\n @if (customDrawerParent()?.menuTemplate) {\n <!-- Custom Drawer Header -->\n <div class=\"border-border flex h-14 shrink-0 items-center gap-3 border-b px-4\">\n <button\n z-button\n zType=\"ghost\"\n [zWave]=\"false\"\n class=\"bg-accent h-9 w-9 shrink-0\"\n (click)=\"closeMobileTemplateDrawer()\">\n <z-icon zType=\"lucideChevronLeft\" zSize=\"20\" />\n </button>\n <span class=\"min-w-0 flex-1 truncate text-base font-semibold\">\n {{ customDrawerParent()?.name | translate }}\n </span>\n </div>\n\n <!-- Custom Template Content -->\n <ng-scrollbar class=\"z-menu-scrollbar flex-1\" track=\"vertical\">\n <div class=\"p-4\">\n <ng-container\n *ngTemplateOutlet=\"\n customDrawerParent()!.menuTemplate!;\n context: { $implicit: customDrawerParent()!, close: closeMobileDrawerFn }\n \" />\n </div>\n </ng-scrollbar>\n }\n </aside>\n\n <ng-template #mobileActionsPopoverTpl let-close=\"close\">\n <div class=\"min-w-48 p-1\">\n @if (zActionsTemplate()) {\n <ng-container *ngTemplateOutlet=\"zActionsTemplate(); context: { close: close }\" />\n } @else if (getVisibleUserActions().length > 0) {\n @for (action of getVisibleUserActions(); track action.id; let idx = $index) {\n @if (shouldShowDividerBefore(action, idx)) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n\n <button\n type=\"button\"\n [disabled]=\"action.disabled\"\n [class]=\"action.class\"\n class=\"hover:bg-accent focus:bg-accent flex w-full cursor-pointer items-center gap-2 rounded-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>{{ action.label | translate }}</span>\n </button>\n\n @if (shouldShowDividerAfter(action, idx)) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n }\n }\n </div>\n </ng-template>\n</div>\n\n<!-- Shared Template for Menu Children -->\n<ng-template #menuChildrenTpl let-children>\n @for (child of children; track child.id) {\n @let isChildActive = selectedMenuItem()?.id === child.id && (!child.children || child.children.length === 0);\n @let isChildParentOfActive = isParentOfActiveItem(child);\n @let hasChildren = child.children && child.children.length > 0;\n <div class=\"w-full min-w-0\">\n <div\n #divLevel1\n class=\"z-menu-item flex w-full cursor-pointer items-center gap-2 rounded-[6px] p-2\"\n [class.bg-primary]=\"isChildActive\"\n [class.text-primary-foreground]=\"isChildActive\"\n [class.text-primary]=\"isChildParentOfActive && !isChildActive\"\n [class.hover:bg-gray-200]=\"!isChildActive\"\n [class.dark:hover:bg-input/50]=\"!isChildActive\"\n (click)=\"onMenuItemClick(child)\">\n @if (child.icon) {\n <z-icon [zType]=\"child.icon\" zSize=\"18\" class=\"shrink-0\" />\n } @else if (child.iconSvg) {\n <z-icon [zSvg]=\"child.iconSvg\" zSize=\"18\" class=\"shrink-0\" />\n }\n <span\n class=\"min-w-0 flex-1 truncate text-[13px] font-[450]\"\n zTooltip\n [zContent]=\"child.name | translate\"\n [zArrow]=\"false\"\n [zOffset]=\"10\"\n zMaxWidth=\"200px\"\n zPosition=\"right\"\n [zTriggerElement]=\"divLevel1\">\n {{ child.name | translate }}\n </span>\n @if (hasChildren) {\n <z-icon\n zType=\"lucideChevronRight\"\n zSize=\"14\"\n class=\"z-menu-arrow shrink-0 opacity-60 transition-transform\"\n [class.expanded]=\"child.expanded\" />\n }\n </div>\n\n @if (hasChildren) {\n <div class=\"z-menu-submenu\" [class.expanded]=\"child.expanded\">\n <div class=\"z-menu-submenu-inner\">\n <div class=\"z-menu-tree relative ml-4 flex flex-col gap-1 pt-1 pl-3\">\n <div class=\"absolute top-0 bottom-2 left-0 w-px bg-gray-300 dark:bg-gray-600\"></div>\n\n @for (subChild of child.children; track subChild.id; let isLast = $last) {\n @let isSubChildActive = selectedMenuItem()?.id === subChild.id;\n <div class=\"relative w-full min-w-0\">\n <div class=\"absolute top-1/2 -left-3 h-px w-3 bg-gray-300 dark:bg-gray-600\"></div>\n\n <div\n #divLevel2\n class=\"z-menu-item flex w-full cursor-pointer items-center gap-2 rounded-[6px] p-2\"\n [class.bg-primary]=\"isSubChildActive\"\n [class.text-primary-foreground]=\"isSubChildActive\"\n [class.hover:bg-gray-200]=\"!isSubChildActive\"\n [class.dark:hover:bg-input/50]=\"!isSubChildActive\"\n (click)=\"onMenuItemClick(subChild)\">\n @if (subChild.icon) {\n <z-icon [zType]=\"subChild.icon\" zSize=\"16\" class=\"shrink-0\" />\n } @else if (subChild.iconSvg) {\n <z-icon [zSvg]=\"subChild.iconSvg\" zSize=\"16\" class=\"shrink-0\" />\n } @else {\n <div\n class=\"h-1 w-1 shrink-0 rounded-full\"\n [class.bg-primary-foreground]=\"isSubChildActive\"\n [class.bg-gray-400]=\"!isSubChildActive\"></div>\n }\n <span\n class=\"min-w-0 flex-1 truncate text-[13px] font-[450]\"\n zTooltip\n [zContent]=\"subChild.name | translate\"\n [zArrow]=\"false\"\n [zOffset]=\"10\"\n zMaxWidth=\"200px\"\n zPosition=\"right\"\n [zTriggerElement]=\"divLevel2\">\n {{ subChild.name | translate }}\n </span>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n</ng-template>\n", styles: [".z-menu{display:block;flex-shrink:0;height:100%}.z-menu [class*=cursor-pointer]{-webkit-user-select:none;user-select:none}@media(min-width:768px){.z-menu{contain:layout style;min-width:283px;transition:min-width .25s cubic-bezier(.4,0,.2,1);will-change:min-width}.z-menu.z-menu-collapsed,.z-menu.z-menu-no-child{min-width:53px}}.z-shadow-menu{box-shadow:0 0 10px #0000001f}@media(max-width:767px){.z-menu-desktop{display:none!important;pointer-events:none;visibility:hidden}}.z-sidebar-main{position:relative;z-index:20;flex-shrink:0}.z-sidebar-child-wrapper{--sidebar-child-width: 230px;position:absolute;left:0;top:0;width:calc(100% + -0px);height:100%;clip-path:inset(0 -100px 0 0);pointer-events:none;transition:clip-path .25s cubic-bezier(.4,0,.2,1);will-change:clip-path;contain:layout;overflow:clip}.z-sidebar-child-wrapper.collapsed{clip-path:inset(0 -100px 0 53px)}.z-sidebar-child{flex-shrink:0;height:100%;margin-left:53px;transform:translate(0);transition:transform .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1);pointer-events:auto;will-change:transform,width;overflow:hidden;max-width:100%}.z-sidebar-child *{max-width:100%}.z-sidebar-child.collapsed{transform:translate(calc(-1 * (var(--sidebar-child-width) + 50px + 5px)))}.z-menu-arrow.expanded{transform:rotate(90deg)}.z-menu-submenu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .15s ease-out}.z-menu-submenu.expanded{grid-template-rows:1fr}.z-menu-submenu>.z-menu-submenu-inner{overflow:hidden;min-height:0}.z-menu-backdrop{animation:z-menu-backdrop-enter .2s ease-out forwards}.z-menu-backdrop-dark{background-color:#0009}.z-menu-backdrop-blur{background-color:#0000000d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.z-menu-drawer{transform:translate(-100%);transition:transform .3s cubic-bezier(.32,.72,0,1);box-shadow:4px 0 24px #0000001a}.z-menu-drawer.open{transform:translate(0)}:host.z-menu-mobile-open .z-menu-drawer{transform:translate(0)}.z-menu-desktop.collapsed .z-sidebar-child-wrapper{pointer-events:none}.z-menu-custom-drawer{transform:translate(-100%);transition:transform .3s cubic-bezier(.32,.72,0,1);box-shadow:4px 0 24px #0000001a;will-change:transform}.z-menu-custom-drawer.open{transform:translate(0)}@keyframes z-menu-backdrop-enter{0%{opacity:0}to{opacity:1}}@keyframes z-expand-btn-enter{0%{opacity:0;transform:scale(.5) translateY(10px)}70%{transform:scale(1.1) translateY(-2px)}to{opacity:1;transform:scale(1) translateY(0)}}.z-expand-btn{animation:z-expand-btn-enter .25s cubic-bezier(.34,1.56,.64,1) forwards}.z-menu-scrollbar{--scrollbar-padding: 0;max-width:100%}.z-menu-scrollbar .ng-scroll-viewport,.z-menu-scrollbar .ng-scroll-content{max-width:100%}.z-menu-item{min-width:0;overflow:hidden}\n"] }]
|
|
395
395
|
}], ctorParameters: () => [], propDecorators: { 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 }] }], zActionsTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zActionsTemplate", required: false }] }], zCurrentPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "zCurrentPath", required: false }] }], zKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "zKey", required: false }] }], zOnSelect: [{ type: i0.Output, args: ["zOnSelect"] }], zOnMenuAction: [{ type: i0.Output, args: ["zOnMenuAction"] }], zControl: [{ type: i0.Output, args: ["zControl"] }] } });
|
|
396
396
|
|
|
397
397
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shival99-z-ui-components-z-menu.mjs","sources":["../../../../libs/core-ui/components/z-menu/z-menu.component.ts","../../../../libs/core-ui/components/z-menu/z-menu.component.html","../../../../libs/core-ui/components/z-menu/shival99-z-ui-components-z-menu.ts"],"sourcesContent":["import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';\nimport { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n computed,\n DestroyRef,\n effect,\n inject,\n input,\n output,\n PLATFORM_ID,\n signal,\n TemplateRef,\n untracked,\n ViewEncapsulation,\n} from '@angular/core';\nimport { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';\nimport { NavigationEnd, Router } from '@angular/router';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { ZButtonComponent } from '@shival99/z-ui/components/z-button';\nimport { ZIconComponent } from '@shival99/z-ui/components/z-icon';\nimport { ZPopoverDirective } from '@shival99/z-ui/components/z-popover';\nimport { ZTooltipDirective } from '@shival99/z-ui/components/z-tooltip';\nimport { ZCacheService } from '@shival99/z-ui/services';\nimport { zDetectBrowser } from '@shival99/z-ui/utils';\nimport { NgScrollbar } from 'ngx-scrollbar';\nimport { filter, map, startWith } from 'rxjs';\nimport { ZMenuControl, ZMenuItem, ZMenuOverlayType, ZMenuProcessed, ZMenuUser, ZMenuUserAction } from './z-menu.types';\n\n@Component({\n selector: 'z-menu',\n imports: [\n NgTemplateOutlet,\n ZButtonComponent,\n ZIconComponent,\n ZTooltipDirective,\n ZPopoverDirective,\n NgScrollbar,\n TranslatePipe,\n ],\n standalone: true,\n templateUrl: './z-menu.component.html',\n styleUrl: './z-menu.component.scss',\n providers: [TranslatePipe],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n class: 'z-menu block',\n '[class.z-menu-collapsed]': 'sidebarCollapsed()',\n '[class.z-menu-no-child]': 'selectedParentHasNoChild()',\n '[class.z-menu-mobile]': 'isMobile()',\n '[class.z-menu-mobile-open]': 'mobileMenuOpen()',\n },\n})\nexport class ZMenuComponent {\n private readonly _breakpointObserver = inject(BreakpointObserver);\n private readonly _destroyRef = inject(DestroyRef);\n private readonly _platformId = inject(PLATFORM_ID);\n private readonly _router = inject(Router);\n\n public readonly zLogo = input<string>('assets/images/avatar.svg');\n public readonly zLogoMobile = input<string>('');\n public readonly zMenus = input<ZMenuItem[]>([]);\n public readonly zUser = input<ZMenuUser | null>(null);\n public readonly zUserActions = input<ZMenuUserAction[]>([]);\n public readonly zActionsTemplate = input<TemplateRef<{ close: () => void }> | null>(null);\n public readonly zCurrentPath = input<string>('');\n public readonly zKey = input<string>('z-menu');\n\n public readonly zOnSelect = output<ZMenuItem>();\n public readonly zOnMenuAction = output<ZMenuUserAction>();\n public readonly zControl = output<ZMenuControl>();\n\n public readonly selectedParent = signal<ZMenuItem | null>(null);\n public readonly selectedMenuItem = signal<ZMenuItem | null>(null);\n public readonly mobileMenuOpen = signal(false);\n public readonly mobileTemplateDrawerOpen = signal(false);\n public readonly sidebarCollapsed = signal(this._getStateMenuCollapsed());\n private readonly _templateDrawerParentId = signal<string | null>(null);\n\n protected readonly closeSidebarFn = (): void => this.sidebarCollapsed.set(true);\n protected readonly closeMobileDrawerFn = (): void => {\n this.mobileTemplateDrawerOpen.set(false);\n this._templateDrawerParentId.set(null);\n };\n\n private readonly _isMobile$ = this._breakpointObserver.observe([Breakpoints.XSmall, Breakpoints.Small]).pipe(\n map(result => result.matches),\n takeUntilDestroyed(this._destroyRef)\n );\n\n public readonly isMobile = toSignal(this._isMobile$, { initialValue: false });\n protected readonly mobileLogo = computed(() => this.zLogoMobile() || this.zLogo());\n\n private readonly _routerPath = toSignal(\n this._router.events.pipe(\n filter((e): e is NavigationEnd => e instanceof NavigationEnd),\n map(e => e.urlAfterRedirects),\n startWith(this._router.url)\n ),\n { initialValue: this._router.url }\n );\n\n private readonly _currentPath = computed(() => this.zCurrentPath() || this._routerPath());\n protected readonly overlayType = computed((): ZMenuOverlayType => {\n if (!isPlatformBrowser(this._platformId)) {\n return 'dark';\n }\n\n const browser = zDetectBrowser();\n return browser.name === 'Chrome' ? 'dark' : 'blur';\n });\n\n protected readonly menuProcessed = computed((): ZMenuProcessed => this._processMenus(this.zMenus()));\n\n protected readonly menuParents = computed(() =>\n this.menuProcessed().tree.filter((item: ZMenuItem) => !item.parent || item.parent.length === 0)\n );\n\n protected readonly menuChildren = computed(() => {\n const selected = this.selectedParent();\n if (!selected) {\n return [];\n }\n return selected.children ?? [];\n });\n\n protected readonly selectedParentHasNoChild = computed(() => {\n const parent = this.selectedParent();\n if (!parent) {\n return false;\n }\n const hasNoChildren = !parent.children || parent.children.length === 0;\n return !parent.menuTemplate && hasNoChildren;\n });\n\n protected readonly parentWithActiveChild = computed(() => {\n const activeItem = this.selectedMenuItem();\n if (!activeItem) {\n return null;\n }\n\n for (const parent of this.menuParents()) {\n if (this._isChildOf(activeItem.id, parent)) {\n return parent;\n }\n\n const hasNoChildren = !parent.children || parent.children.length === 0;\n if ((parent.menuTemplate || hasNoChildren) && activeItem.id === parent.id) {\n return parent;\n }\n }\n return null;\n });\n\n protected isParentOfActiveItem(item: ZMenuItem): boolean {\n const activeItem = this.selectedMenuItem();\n if (!activeItem) {\n return false;\n }\n\n if (activeItem.parent && activeItem.parent.length > 0) {\n return activeItem.parent.includes(item.id);\n }\n\n return false;\n }\n\n protected readonly avatarSrc = computed(() => this.zUser()?.avatar || this.zLogo());\n\n protected readonly customDrawerParent = computed(() => {\n const parentId = this._templateDrawerParentId();\n if (!parentId) {\n return null;\n }\n return this.menuParents().find((p: ZMenuItem) => p.id === parentId) ?? null;\n });\n\n private readonly _defaultSidebarChildWidth = 230;\n private readonly _defaultMobileDrawerWidth = 280;\n\n protected readonly sidebarChildWidth = computed(() => {\n const parent = this.selectedParent();\n if (parent?.menuTemplate && parent.menuTemplateWidth) {\n return parent.menuTemplateWidth;\n }\n return this._defaultSidebarChildWidth;\n });\n\n protected readonly mobileCustomDrawerWidth = computed(() => {\n const parent = this.customDrawerParent();\n if (parent?.menuTemplateWidth) {\n return parent.menuTemplateWidth;\n }\n return this._defaultMobileDrawerWidth;\n });\n\n constructor() {\n effect(() => {\n const parents = this.menuParents();\n if (parents.length > 0 && !untracked(() => this.selectedParent())) {\n this.selectedParent.set(parents[0]);\n }\n });\n\n effect(() => {\n const currentPath = this._currentPath();\n const processedMenus = this.menuProcessed();\n if (!currentPath || processedMenus.flat.size === 0) {\n return;\n }\n\n const matchingItem = this._findMenuItemByPath(currentPath, processedMenus);\n const currentSelectedId = untracked(() => this.selectedMenuItem()?.id);\n if (matchingItem && matchingItem.id !== currentSelectedId) {\n this.setSelectedMenuItem(matchingItem.id);\n }\n });\n\n effect(() => {\n if (!this.isMobile() && this.mobileMenuOpen()) {\n this.mobileMenuOpen.set(false);\n }\n });\n\n effect(() => {\n const collapsed = this.sidebarCollapsed();\n ZCacheService.set(this.zKey(), collapsed);\n });\n\n setTimeout(() => this._emitControl());\n }\n\n private _emitControl(): void {\n this.zControl.emit({\n openMobileMenu: () => this.openMobileMenu(),\n closeMobileMenu: () => this.closeMobileMenu(),\n toggleMobileMenu: () => this.toggleMobileMenu(),\n setSelectedMenuItem: (id: string) => this.setSelectedMenuItem(id),\n clearActiveItem: () => this.clearActiveItem(),\n toggleSidebar: () => this.toggleSidebar(),\n openMobileTemplateDrawer: (id: string) => this.openMobileTemplateDrawer(id),\n closeMobileTemplateDrawer: () => this.closeMobileTemplateDrawer(),\n sidebarCollapsed: this.sidebarCollapsed.asReadonly(),\n mobileMenuOpen: this.mobileMenuOpen.asReadonly(),\n mobileTemplateDrawerOpen: this.mobileTemplateDrawerOpen.asReadonly(),\n selectedMenuItem: this.selectedMenuItem.asReadonly(),\n selectedParent: this.selectedParent.asReadonly(),\n menuProcessed: this.menuProcessed,\n });\n }\n\n public openMobileMenu(): void {\n this.mobileMenuOpen.set(true);\n }\n\n public closeMobileMenu(): void {\n this.mobileMenuOpen.set(false);\n }\n\n public toggleMobileMenu(): void {\n this.mobileMenuOpen.set(!this.mobileMenuOpen());\n }\n\n public openMobileTemplateDrawer(parentId: string): void {\n this._templateDrawerParentId.set(parentId);\n this.mobileMenuOpen.set(false);\n requestAnimationFrame(() => {\n this.mobileTemplateDrawerOpen.set(true);\n });\n }\n\n public closeMobileTemplateDrawer(): void {\n this.mobileTemplateDrawerOpen.set(false);\n this.mobileMenuOpen.set(true);\n setTimeout(() => {\n this._templateDrawerParentId.set(null);\n }, 300);\n }\n\n public setSelectedMenuItem(menuId: string): void {\n const item = this._findMenuItemById(menuId);\n if (!item) {\n return;\n }\n\n this.selectedMenuItem.set(item);\n\n const parent = this._findParentOfMenuItem(menuId);\n if (!parent) {\n return;\n }\n\n this.selectedParent.set(parent);\n parent.expanded = true;\n\n if (item.parent && item.parent.length > 1) {\n const level2ParentId = item.parent[item.parent.length - 1];\n const level2Parent = this._findMenuItemById(level2ParentId);\n if (level2Parent) {\n level2Parent.expanded = true;\n }\n }\n }\n\n public clearActiveItem(): void {\n this.selectedMenuItem.set(null);\n }\n\n protected selectParent(item: ZMenuItem): void {\n this.selectedParent.set(item);\n const hasNoChildren = !item.children || item.children.length === 0;\n\n if (item.menuTemplate || hasNoChildren) {\n this.selectedMenuItem.set(item);\n }\n\n const processedItem = this.menuProcessed().flat.get(item.id);\n if (processedItem) {\n this.zOnSelect.emit(processedItem);\n }\n }\n\n protected onDesktopParentClick(item: ZMenuItem): void {\n this.selectParent(item);\n const hasChildrenOrTemplate = item.menuTemplate || (item.children && item.children.length > 0);\n\n if (this.sidebarCollapsed() && hasChildrenOrTemplate) {\n this.toggleSidebar();\n }\n }\n\n protected onMenuItemClick(item: ZMenuItem): void {\n if (item.children && item.children.length > 0) {\n item.expanded = !item.expanded;\n return;\n }\n\n this.selectedMenuItem.set(item);\n this._expandParentsOfItem(item);\n\n const processedItem = this.menuProcessed().flat.get(item.id);\n if (processedItem) {\n this.zOnSelect.emit(processedItem);\n }\n\n if (this.isMobile()) {\n this.closeMobileMenu();\n this.mobileTemplateDrawerOpen.set(false);\n }\n }\n\n protected onMobileParentClick(item: ZMenuItem): void {\n if (item.menuTemplate) {\n this.selectParent(item);\n this.openMobileTemplateDrawer(item.id);\n return;\n }\n\n const hasNoChildren = !item.children || item.children.length === 0;\n if (hasNoChildren) {\n this.selectParent(item);\n this.closeMobileMenu();\n return;\n }\n\n if (this.selectedParent()?.id === item.id) {\n item.expanded = !item.expanded;\n this.selectedParent.set({ ...item });\n return;\n }\n\n this.selectParent(item);\n item.expanded = true;\n }\n\n protected toggleSidebar(): void {\n if (!this.selectedParent()?.children?.length) {\n return;\n }\n\n this.sidebarCollapsed.set(!this.sidebarCollapsed());\n }\n\n protected closeSidebar(): void {\n this.sidebarCollapsed.set(true);\n }\n\n protected onUserActionClick(action: ZMenuUserAction): void {\n if (action.disabled) {\n return;\n }\n this.zOnMenuAction.emit(action);\n }\n\n protected getVisibleUserActions(): ZMenuUserAction[] {\n return this.zUserActions().filter(action => !action.hidden);\n }\n\n protected shouldShowDividerBefore(action: ZMenuUserAction, index: number): boolean {\n return action.divide === 'before' && index > 0;\n }\n\n protected shouldShowDividerAfter(action: ZMenuUserAction, index: number): boolean {\n return action.divide === 'after' && index < this.getVisibleUserActions().length - 1;\n }\n\n protected onBackdropClick(): void {\n if (this.mobileTemplateDrawerOpen()) {\n this.mobileTemplateDrawerOpen.set(false);\n this._templateDrawerParentId.set(null);\n }\n this.closeMobileMenu();\n }\n\n private _findMenuItemById(id: string): ZMenuItem | null {\n return this.menuProcessed().flat.get(id) ?? null;\n }\n\n private _findParentOfMenuItem(id: string): ZMenuItem | null {\n const item = this.menuProcessed().flat.get(id);\n if (!item?.parent?.length) {\n return null;\n }\n\n const parentId = item.parent[item.parent.length - 1];\n return this.menuProcessed().flat.get(parentId) ?? null;\n }\n\n private _isChildOf(childId: string, parent: ZMenuItem): boolean {\n const child = this.menuProcessed().flat.get(childId);\n if (!child?.parent?.length) {\n return false;\n }\n\n return child.parent.includes(parent.id);\n }\n\n private _expandParentsOfItem(item: ZMenuItem): void {\n if (!item.parent || item.parent.length === 0) {\n return;\n }\n\n for (const parentId of item.parent) {\n const parentItem = this.menuProcessed().flat.get(parentId);\n if (parentItem) {\n parentItem.expanded = true;\n }\n }\n }\n\n private _processMenus(menus: ZMenuItem[]): ZMenuProcessed {\n const flat = new Map<string, ZMenuItem>();\n const processItem = (item: ZMenuItem, parentIds: string[], level: number): ZMenuItem => {\n item.parent = [...parentIds];\n item.level = level;\n flat.set(item.id, item);\n\n if (item.children && item.children.length > 0) {\n const newParentIds = [...parentIds, item.id];\n item.children = item.children.map(child => processItem(child, newParentIds, level + 1));\n }\n\n return item;\n };\n\n const tree = menus.map(item => processItem(item, [], 0));\n return { tree, flat };\n }\n\n private _findMenuItemByPath(path: string, processed: ZMenuProcessed): ZMenuItem | null {\n const normalizedPath = path.split('?')[0].replace(/\\/$/, '') || '/';\n for (const item of processed.flat.values()) {\n const itemPath = item.path?.replace(/\\/$/, '') || '';\n if (itemPath === normalizedPath) {\n return item;\n }\n }\n\n for (const item of processed.flat.values()) {\n if (item.subPaths && item.subPaths.length > 0) {\n for (const subPath of item.subPaths) {\n const normalizedSubPath = subPath.replace(/\\/$/, '');\n if (normalizedPath.startsWith(normalizedSubPath)) {\n return item;\n }\n }\n }\n }\n\n for (const item of processed.flat.values()) {\n const itemPath = item.path?.replace(/\\/$/, '') || '';\n if (itemPath && normalizedPath.startsWith(itemPath + '/')) {\n return item;\n }\n }\n\n return null;\n }\n\n private _getStateMenuCollapsed(): boolean {\n return ZCacheService.get<boolean>(this.zKey(), false) ?? false;\n }\n}\n","<!-- DESKTOP LAYOUT - Hidden on mobile -->\n<div class=\"z-menu-desktop relative z-200 hidden h-full py-1 pl-1 md:block\" [class.collapsed]=\"sidebarCollapsed()\">\n <main class=\"z-menu-main relative flex h-full\">\n <div class=\"z-sidebar-main h-full w-[50px]\">\n <div\n class=\"z-shadow-menu bg-sidebar border-border/40 dark:border-sidebar-border relative flex h-full w-full flex-col items-center gap-1.5 rounded-[6px] border\"></div>\n\n <div class=\"bg-sidebar text-sidebar-foreground absolute inset-px z-20 flex flex-col rounded-[6px]\">\n @if (zLogo()) {\n <div class=\"border-sidebar-border flex h-[52px] items-center justify-center border-b px-2\">\n <img [src]=\"zLogo()\" alt=\"Logo\" class=\"h-8 w-auto object-contain\" />\n </div>\n }\n\n <!-- Expand Button - Only show when collapsed -->\n @if (sidebarCollapsed() && selectedParent()) {\n <div\n class=\"z-expand-btn hover:bg-sidebar-accent mx-auto mt-2 flex h-9 w-9 cursor-pointer items-center justify-center rounded-[6px]\"\n (click)=\"toggleSidebar()\">\n <z-icon zType=\"lucideChevronsRight\" zSize=\"20\" class=\"opacity-70\" />\n </div>\n }\n\n <div class=\"flex flex-1 flex-col items-center gap-2 p-2\">\n @for (item of menuParents(); track item.id) {\n @let hasActiveChild = parentWithActiveChild()?.id === item.id;\n @let isCurrentlySelected = selectedParent()?.id === item.id;\n @let showActiveIndicator = hasActiveChild && !isCurrentlySelected;\n <div\n zTooltip\n [zContent]=\"item.name | translate\"\n zPosition=\"right\"\n [zArrow]=\"false\"\n [zAlwaysShow]=\"true\"\n class=\"relative flex h-9 w-9 cursor-pointer items-center justify-center rounded-[6px] select-none\"\n [class.bg-sidebar-primary]=\"selectedParent()?.id === item.id\"\n [class.text-sidebar-primary-foreground]=\"selectedParent()?.id === item.id\"\n [class.hover:bg-sidebar-accent]=\"selectedParent()?.id !== item.id\"\n (click)=\"onDesktopParentClick(item)\">\n @if (item.icon) {\n <z-icon [zType]=\"item.icon\" zSize=\"20\" />\n } @else {\n <z-icon [zSvg]=\"item.iconSvg || ''\" zSize=\"20\" />\n }\n @if (showActiveIndicator) {\n <div\n class=\"bg-sidebar-primary absolute top-1/2 -left-[5px] h-4 w-1 -translate-y-1/2 rounded-full\"></div>\n }\n </div>\n }\n </div>\n\n <div class=\"border-sidebar-border flex items-center justify-center border-t p-2\">\n <div\n z-popover\n [zOffset]=\"11\"\n [zPopoverContent]=\"userPopoverTpl\"\n zPosition=\"right-bottom\"\n class=\"aspect-square h-9 w-9 shrink-0 cursor-pointer overflow-hidden rounded-full\">\n <img [src]=\"avatarSrc()\" alt=\"User Avatar\" class=\"h-full w-full object-cover\" />\n </div>\n </div>\n </div>\n </div>\n\n <ng-template #userPopoverTpl let-close=\"close\">\n <div class=\"min-w-56 p-1\">\n <!-- User Info Header - Always shown -->\n <div class=\"p-0 text-sm font-normal\">\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=\"truncate font-medium\">{{ zUser()?.name || 'User Name' }}</span>\n <span class=\"text-muted-foreground mt-0.5 truncate text-xs\">\n {{ zUser()?.email || 'user@example.com' }}\n </span>\n </div>\n </div>\n </div>\n\n @if (getVisibleUserActions().length > 0 || zActionsTemplate()) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n\n <!-- Actions - Custom or from zUserActions -->\n @if (zActionsTemplate()) {\n <ng-container *ngTemplateOutlet=\"zActionsTemplate(); context: { close: close }\" />\n } @else if (getVisibleUserActions().length > 0) {\n @for (action of getVisibleUserActions(); track action.id; let idx = $index) {\n @if (shouldShowDividerBefore(action, idx)) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n\n <button\n type=\"button\"\n [disabled]=\"action.disabled\"\n [class]=\"action.class\"\n class=\"hover:bg-accent focus:bg-accent flex w-full cursor-pointer items-center gap-2 rounded-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>{{ action.label | translate }}</span>\n </button>\n\n @if (shouldShowDividerAfter(action, idx)) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n }\n }\n </div>\n </ng-template>\n\n @if (selectedParent(); as parent) {\n @let hasChildrenOrTemplate = parent.menuTemplate || (parent.children && parent.children.length > 0);\n @if (hasChildrenOrTemplate) {\n <div\n class=\"z-sidebar-child-wrapper\"\n [class.collapsed]=\"sidebarCollapsed()\"\n [style.--sidebar-child-width.px]=\"sidebarChildWidth()\">\n <div\n class=\"z-sidebar-child z-shadow-menu bg-card text-card-foreground border-border/40 dark:border-sidebar-border flex h-full shrink-0 flex-col items-start rounded-[6px] border\"\n [style.width.px]=\"sidebarChildWidth()\"\n [class.collapsed]=\"sidebarCollapsed()\">\n <div class=\"border-border flex h-[52px] w-full shrink-0 items-center border-b px-3\">\n @if (selectedParent()?.icon) {\n <z-icon [zType]=\"selectedParent()!.icon\" zSize=\"20\" class=\"mr-2 shrink-0\" />\n }\n <div\n class=\"mr-4 min-w-0 flex-1 truncate text-base font-semibold\"\n zTooltip\n zPosition=\"top-left\"\n [zContent]=\"selectedParent()?.name || '' | translate\"\n [zArrow]=\"false\">\n {{ selectedParent()?.name | translate }}\n </div>\n\n <z-icon\n zType=\"lucidePanelRightOpen\"\n zSize=\"20\"\n class=\"shrink-0 cursor-pointer opacity-60 hover:opacity-100\"\n (click)=\"toggleSidebar()\" />\n </div>\n\n <!-- Show menuTemplate if available, otherwise show children -->\n @if (selectedParent()?.menuTemplate) {\n <ng-scrollbar class=\"z-menu-scrollbar min-h-0 w-full flex-1\" track=\"vertical\">\n <div class=\"flex w-full flex-col p-3 pr-2\">\n <ng-container\n *ngTemplateOutlet=\"\n selectedParent()!.menuTemplate!;\n context: { $implicit: selectedParent()!, close: closeSidebarFn }\n \" />\n </div>\n </ng-scrollbar>\n } @else {\n <ng-scrollbar class=\"z-menu-scrollbar min-h-0 w-full flex-1\" track=\"vertical\">\n <div class=\"flex w-full flex-col gap-1 py-1 pr-2 pl-2\">\n <ng-container *ngTemplateOutlet=\"menuChildrenTpl; context: { $implicit: menuChildren() }\" />\n </div>\n </ng-scrollbar>\n }\n </div>\n </div>\n }\n }\n </main>\n</div>\n\n<!-- MOBILE LAYOUT - Visible only on mobile -->\n<div class=\"z-menu-mobile-wrapper hidden max-md:block\">\n <!-- Mobile Backdrop -->\n @if (mobileMenuOpen() || mobileTemplateDrawerOpen()) {\n <div\n class=\"z-menu-backdrop fixed inset-0 z-9998\"\n [class.z-menu-backdrop-dark]=\"overlayType() === 'dark'\"\n [class.z-menu-backdrop-blur]=\"overlayType() === 'blur'\"\n (click)=\"onBackdropClick()\"></div>\n }\n\n <!-- Mobile Drawer -->\n <aside\n class=\"z-menu-drawer bg-background border-border fixed top-0 left-0 z-9999 flex h-full w-70 flex-col rounded-r-lg border-r\"\n [class.open]=\"mobileMenuOpen()\">\n <!-- Drawer Header -->\n <div class=\"border-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=\"bg-accent h-9 w-9 shrink-0\" (click)=\"closeMobileMenu()\">\n <z-icon zType=\"lucideX\" zSize=\"20\" />\n </button>\n </div>\n\n <!-- Drawer Content - Accordion Menu -->\n <ng-scrollbar class=\"z-menu-scrollbar flex-1\" track=\"vertical\">\n <div class=\"p-3\">\n @for (parent of menuParents(); track parent.id) {\n <div class=\"mb-1\">\n <!-- Parent Item -->\n @let isParentActive =\n selectedMenuItem()?.id === parent.id && (!parent.children || parent.children.length === 0);\n @let hasActiveChild = parentWithActiveChild()?.id === parent.id && !isParentActive;\n @let isCurrentlyViewing = selectedParent()?.id === parent.id;\n <div\n class=\"relative flex cursor-pointer items-center gap-3 rounded-[6px] p-2\"\n [class.bg-primary/20]=\"isParentActive\"\n [class.text-primary]=\"isParentActive || hasActiveChild\"\n [class.hover:bg-accent]=\"!isParentActive\"\n (click)=\"onMobileParentClick(parent)\">\n @if (parent.icon) {\n <z-icon [zType]=\"parent.icon\" zSize=\"18\" class=\"shrink-0\" />\n } @else if (parent.iconSvg) {\n <z-icon [zSvg]=\"parent.iconSvg\" zSize=\"18\" class=\"shrink-0\" />\n }\n <span class=\"min-w-0 flex-1 truncate text-[13px] font-[450]\">{{ parent.name | translate }}</span>\n @if ((parent.children && parent.children.length > 0) || parent.menuTemplate) {\n <z-icon\n zType=\"lucideChevronRight\"\n zSize=\"16\"\n class=\"z-menu-arrow shrink-0 opacity-60 transition-transform\"\n [class.expanded]=\"parent.expanded && isCurrentlyViewing\" />\n }\n </div>\n\n <!-- Children (Accordion) - Only render if NO menuTemplate -->\n @if (parent.children && parent.children.length > 0 && !parent.menuTemplate) {\n <div class=\"z-menu-submenu\" [class.expanded]=\"parent.expanded && isCurrentlyViewing\">\n <div class=\"z-menu-submenu-inner\">\n <div class=\"z-menu-tree relative ml-4 flex flex-col gap-1 pt-1 pl-3\">\n <div class=\"absolute top-0 bottom-2 left-0 w-px bg-gray-300 dark:bg-gray-600\"></div>\n\n @for (child of parent.children; track child.id) {\n @let isChildActive =\n selectedMenuItem()?.id === child.id && (!child.children || child.children.length === 0);\n @let isChildParentOfActive = isParentOfActiveItem(child);\n @let hasChildren = child.children && child.children.length > 0;\n\n <div>\n <div\n class=\"relative flex cursor-pointer items-center gap-2 rounded-[6px] p-2\"\n [class.bg-primary]=\"isChildActive\"\n [class.text-primary-foreground]=\"isChildActive\"\n [class.text-primary]=\"isChildParentOfActive && !isChildActive\"\n [class.hover:bg-accent]=\"!isChildActive\"\n (click)=\"onMenuItemClick(child)\">\n <div class=\"absolute top-1/2 -left-3 h-px w-3 bg-gray-300 dark:bg-gray-600\"></div>\n @if (child.icon) {\n <z-icon [zType]=\"child.icon\" zSize=\"16\" class=\"shrink-0\" />\n } @else if (child.iconSvg) {\n <z-icon [zSvg]=\"child.iconSvg\" zSize=\"16\" class=\"shrink-0\" />\n } @else {\n <div\n class=\"h-1.5 w-1.5 shrink-0 rounded-full\"\n [class.bg-primary-foreground]=\"isChildActive\"\n [class.bg-gray-400]=\"!isChildActive\"></div>\n }\n <span class=\"min-w-0 flex-1 truncate text-[13px] font-[450]\">\n {{ child.name | translate }}\n </span>\n @if (hasChildren) {\n <z-icon\n zType=\"lucideChevronRight\"\n zSize=\"14\"\n class=\"z-menu-arrow shrink-0 opacity-60 transition-transform\"\n [class.expanded]=\"child.expanded\" />\n }\n </div>\n\n <!-- Level 3 -->\n @if (hasChildren) {\n <div class=\"z-menu-submenu\" [class.expanded]=\"child.expanded\">\n <div class=\"z-menu-submenu-inner\">\n <div class=\"relative ml-4 flex flex-col gap-1 pt-1 pl-3\">\n <div class=\"absolute top-0 bottom-2 left-0 w-px bg-gray-300 dark:bg-gray-600\"></div>\n\n @for (subChild of child.children; track subChild.id) {\n @let isSubChildActive = selectedMenuItem()?.id === subChild.id;\n\n <div class=\"relative\">\n <div class=\"absolute top-1/2 -left-3 h-px w-3 bg-gray-300 dark:bg-gray-600\"></div>\n\n <div\n class=\"flex cursor-pointer items-center gap-2 rounded-[6px] p-2\"\n [class.bg-primary]=\"isSubChildActive\"\n [class.text-primary-foreground]=\"isSubChildActive\"\n [class.hover:bg-accent]=\"!isSubChildActive\"\n (click)=\"onMenuItemClick(subChild)\">\n <div\n class=\"h-1 w-1 shrink-0 rounded-full\"\n [class.bg-primary-foreground]=\"isSubChildActive\"\n [class.bg-gray-400]=\"!isSubChildActive\"></div>\n <span class=\"min-w-0 flex-1 truncate text-[13px] font-[450]\">\n {{ subChild.name | translate }}\n </span>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </ng-scrollbar>\n\n <!-- Drawer Footer - User Info -->\n <div class=\"border-border shrink-0 border-t p-3\">\n <div\n z-popover\n [zOffset]=\"8\"\n [zPopoverContent]=\"mobileActionsPopoverTpl\"\n zPosition=\"top-right\"\n zTrigger=\"click\"\n class=\"hover:bg-accent flex cursor-pointer items-center gap-3 rounded-[6px] p-2\">\n <div 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 </div>\n <div class=\"min-w-0 flex-1\">\n <div class=\"truncate text-sm font-medium\">{{ zUser()?.name || 'User Name' }}</div>\n <div class=\"text-muted-foreground truncate text-xs\">{{ zUser()?.email || 'user@example.com' }}</div>\n </div>\n <div class=\"text-muted-foreground flex shrink-0 flex-col\">\n <z-icon zType=\"lucideChevronUp\" zSize=\"14\" />\n <z-icon zType=\"lucideChevronDown\" zSize=\"14\" class=\"-mt-1\" />\n </div>\n </div>\n </div>\n </aside>\n\n <!-- Mobile Custom Template Drawer -->\n <aside\n class=\"z-menu-custom-drawer bg-background border-border fixed top-0 left-0 z-9999 flex h-full max-w-[calc(100vw-16px)] flex-col rounded-r-lg border-r\"\n [style.width.px]=\"mobileCustomDrawerWidth()\"\n [class.open]=\"mobileTemplateDrawerOpen() && customDrawerParent()?.menuTemplate\">\n @if (customDrawerParent()?.menuTemplate) {\n <!-- Custom Drawer Header -->\n <div class=\"border-border flex h-14 shrink-0 items-center gap-3 border-b px-4\">\n <button\n z-button\n zType=\"ghost\"\n [zWave]=\"false\"\n class=\"bg-accent h-9 w-9 shrink-0\"\n (click)=\"closeMobileTemplateDrawer()\">\n <z-icon zType=\"lucideChevronLeft\" zSize=\"20\" />\n </button>\n <span class=\"min-w-0 flex-1 truncate text-base font-semibold\">\n {{ customDrawerParent()?.name | translate }}\n </span>\n </div>\n\n <!-- Custom Template Content -->\n <ng-scrollbar class=\"z-menu-scrollbar flex-1\" track=\"vertical\">\n <div class=\"p-4\">\n <ng-container\n *ngTemplateOutlet=\"\n customDrawerParent()!.menuTemplate!;\n context: { $implicit: customDrawerParent()!, close: closeMobileDrawerFn }\n \" />\n </div>\n </ng-scrollbar>\n }\n </aside>\n\n <ng-template #mobileActionsPopoverTpl let-close=\"close\">\n <div class=\"min-w-48 p-1\">\n @if (zActionsTemplate()) {\n <ng-container *ngTemplateOutlet=\"zActionsTemplate(); context: { close: close }\" />\n } @else if (getVisibleUserActions().length > 0) {\n @for (action of getVisibleUserActions(); track action.id; let idx = $index) {\n @if (shouldShowDividerBefore(action, idx)) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n\n <button\n type=\"button\"\n [disabled]=\"action.disabled\"\n [class]=\"action.class\"\n class=\"hover:bg-accent focus:bg-accent flex w-full cursor-pointer items-center gap-2 rounded-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>{{ action.label | translate }}</span>\n </button>\n\n @if (shouldShowDividerAfter(action, idx)) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n }\n }\n </div>\n </ng-template>\n</div>\n\n<!-- Shared Template for Menu Children -->\n<ng-template #menuChildrenTpl let-children>\n @for (child of children; track child.id) {\n @let isChildActive = selectedMenuItem()?.id === child.id && (!child.children || child.children.length === 0);\n @let isChildParentOfActive = isParentOfActiveItem(child);\n @let hasChildren = child.children && child.children.length > 0;\n <div>\n <div\n #divLevel1\n class=\"z-menu-item flex w-full cursor-pointer items-center gap-2 rounded-[6px] p-2\"\n [class.bg-primary]=\"isChildActive\"\n [class.text-primary-foreground]=\"isChildActive\"\n [class.text-primary]=\"isChildParentOfActive && !isChildActive\"\n [class.hover:bg-gray-200]=\"!isChildActive\"\n [class.dark:hover:bg-input/50]=\"!isChildActive\"\n (click)=\"onMenuItemClick(child)\">\n @if (child.icon) {\n <z-icon [zType]=\"child.icon\" zSize=\"18\" class=\"shrink-0\" />\n } @else if (child.iconSvg) {\n <z-icon [zSvg]=\"child.iconSvg\" zSize=\"18\" class=\"shrink-0\" />\n }\n <span\n class=\"min-w-0 flex-1 truncate text-[13px] font-[450]\"\n zTooltip\n [zContent]=\"child.name | translate\"\n [zArrow]=\"false\"\n [zOffset]=\"10\"\n zMaxWidth=\"200px\"\n zPosition=\"right\"\n [zTriggerElement]=\"divLevel1\">\n {{ child.name | translate }}\n </span>\n @if (hasChildren) {\n <z-icon\n zType=\"lucideChevronRight\"\n zSize=\"14\"\n class=\"z-menu-arrow shrink-0 opacity-60 transition-transform\"\n [class.expanded]=\"child.expanded\" />\n }\n </div>\n\n @if (hasChildren) {\n <div class=\"z-menu-submenu\" [class.expanded]=\"child.expanded\">\n <div class=\"z-menu-submenu-inner\">\n <div class=\"z-menu-tree relative ml-4 flex flex-col gap-1 pt-1 pl-3\">\n <div class=\"absolute top-0 bottom-2 left-0 w-px bg-gray-300 dark:bg-gray-600\"></div>\n\n @for (subChild of child.children; track subChild.id; let isLast = $last) {\n @let isSubChildActive = selectedMenuItem()?.id === subChild.id;\n <div class=\"relative\">\n <div class=\"absolute top-1/2 -left-3 h-px w-3 bg-gray-300 dark:bg-gray-600\"></div>\n\n <div\n #divLevel2\n class=\"z-menu-item flex w-full cursor-pointer items-center gap-2 rounded-[6px] p-2\"\n [class.bg-primary]=\"isSubChildActive\"\n [class.text-primary-foreground]=\"isSubChildActive\"\n [class.hover:bg-gray-200]=\"!isSubChildActive\"\n [class.dark:hover:bg-input/50]=\"!isSubChildActive\"\n (click)=\"onMenuItemClick(subChild)\">\n @if (subChild.icon) {\n <z-icon [zType]=\"subChild.icon\" zSize=\"16\" class=\"shrink-0\" />\n } @else if (subChild.iconSvg) {\n <z-icon [zSvg]=\"subChild.iconSvg\" zSize=\"16\" class=\"shrink-0\" />\n } @else {\n <div\n class=\"h-1 w-1 shrink-0 rounded-full\"\n [class.bg-primary-foreground]=\"isSubChildActive\"\n [class.bg-gray-400]=\"!isSubChildActive\"></div>\n }\n <span\n class=\"min-w-0 flex-1 truncate text-[13px] font-[450]\"\n zTooltip\n [zContent]=\"subChild.name | translate\"\n [zArrow]=\"false\"\n [zOffset]=\"10\"\n zMaxWidth=\"200px\"\n zPosition=\"right\"\n [zTriggerElement]=\"divLevel2\">\n {{ subChild.name | translate }}\n </span>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"shival99-z-ui-components-z-menu.mjs","sources":["../../../../libs/core-ui/components/z-menu/z-menu.component.ts","../../../../libs/core-ui/components/z-menu/z-menu.component.html","../../../../libs/core-ui/components/z-menu/shival99-z-ui-components-z-menu.ts"],"sourcesContent":["import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';\nimport { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n computed,\n DestroyRef,\n effect,\n inject,\n input,\n output,\n PLATFORM_ID,\n signal,\n TemplateRef,\n untracked,\n ViewEncapsulation,\n} from '@angular/core';\nimport { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';\nimport { NavigationEnd, Router } from '@angular/router';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { ZButtonComponent } from '@shival99/z-ui/components/z-button';\nimport { ZIconComponent } from '@shival99/z-ui/components/z-icon';\nimport { ZPopoverDirective } from '@shival99/z-ui/components/z-popover';\nimport { ZTooltipDirective } from '@shival99/z-ui/components/z-tooltip';\nimport { ZCacheService } from '@shival99/z-ui/services';\nimport { zDetectBrowser } from '@shival99/z-ui/utils';\nimport { NgScrollbar } from 'ngx-scrollbar';\nimport { filter, map, startWith } from 'rxjs';\nimport { ZMenuControl, ZMenuItem, ZMenuOverlayType, ZMenuProcessed, ZMenuUser, ZMenuUserAction } from './z-menu.types';\n\n@Component({\n selector: 'z-menu',\n imports: [\n NgTemplateOutlet,\n ZButtonComponent,\n ZIconComponent,\n ZTooltipDirective,\n ZPopoverDirective,\n NgScrollbar,\n TranslatePipe,\n ],\n standalone: true,\n templateUrl: './z-menu.component.html',\n styleUrl: './z-menu.component.scss',\n providers: [TranslatePipe],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n class: 'z-menu block',\n '[class.z-menu-collapsed]': 'sidebarCollapsed()',\n '[class.z-menu-no-child]': 'selectedParentHasNoChild()',\n '[class.z-menu-mobile]': 'isMobile()',\n '[class.z-menu-mobile-open]': 'mobileMenuOpen()',\n },\n})\nexport class ZMenuComponent {\n private readonly _breakpointObserver = inject(BreakpointObserver);\n private readonly _destroyRef = inject(DestroyRef);\n private readonly _platformId = inject(PLATFORM_ID);\n private readonly _router = inject(Router);\n\n public readonly zLogo = input<string>('assets/images/avatar.svg');\n public readonly zLogoMobile = input<string>('');\n public readonly zMenus = input<ZMenuItem[]>([]);\n public readonly zUser = input<ZMenuUser | null>(null);\n public readonly zUserActions = input<ZMenuUserAction[]>([]);\n public readonly zActionsTemplate = input<TemplateRef<{ close: () => void }> | null>(null);\n public readonly zCurrentPath = input<string>('');\n public readonly zKey = input<string>('z-menu');\n\n public readonly zOnSelect = output<ZMenuItem>();\n public readonly zOnMenuAction = output<ZMenuUserAction>();\n public readonly zControl = output<ZMenuControl>();\n\n public readonly selectedParent = signal<ZMenuItem | null>(null);\n public readonly selectedMenuItem = signal<ZMenuItem | null>(null);\n public readonly mobileMenuOpen = signal(false);\n public readonly mobileTemplateDrawerOpen = signal(false);\n public readonly sidebarCollapsed = signal(this._getStateMenuCollapsed());\n private readonly _templateDrawerParentId = signal<string | null>(null);\n\n protected readonly closeSidebarFn = (): void => this.sidebarCollapsed.set(true);\n protected readonly closeMobileDrawerFn = (): void => {\n this.mobileTemplateDrawerOpen.set(false);\n this._templateDrawerParentId.set(null);\n };\n\n private readonly _isMobile$ = this._breakpointObserver.observe([Breakpoints.XSmall, Breakpoints.Small]).pipe(\n map(result => result.matches),\n takeUntilDestroyed(this._destroyRef)\n );\n\n public readonly isMobile = toSignal(this._isMobile$, { initialValue: false });\n protected readonly mobileLogo = computed(() => this.zLogoMobile() || this.zLogo());\n\n private readonly _routerPath = toSignal(\n this._router.events.pipe(\n filter((e): e is NavigationEnd => e instanceof NavigationEnd),\n map(e => e.urlAfterRedirects),\n startWith(this._router.url)\n ),\n { initialValue: this._router.url }\n );\n\n private readonly _currentPath = computed(() => this.zCurrentPath() || this._routerPath());\n protected readonly overlayType = computed((): ZMenuOverlayType => {\n if (!isPlatformBrowser(this._platformId)) {\n return 'dark';\n }\n\n const browser = zDetectBrowser();\n return browser.name === 'Chrome' ? 'dark' : 'blur';\n });\n\n protected readonly menuProcessed = computed((): ZMenuProcessed => this._processMenus(this.zMenus()));\n\n protected readonly menuParents = computed(() =>\n this.menuProcessed().tree.filter((item: ZMenuItem) => !item.parent || item.parent.length === 0)\n );\n\n protected readonly menuChildren = computed(() => {\n const selected = this.selectedParent();\n if (!selected) {\n return [];\n }\n return selected.children ?? [];\n });\n\n protected readonly selectedParentHasNoChild = computed(() => {\n const parent = this.selectedParent();\n if (!parent) {\n return false;\n }\n const hasNoChildren = !parent.children || parent.children.length === 0;\n return !parent.menuTemplate && hasNoChildren;\n });\n\n protected readonly parentWithActiveChild = computed(() => {\n const activeItem = this.selectedMenuItem();\n if (!activeItem) {\n return null;\n }\n\n for (const parent of this.menuParents()) {\n if (this._isChildOf(activeItem.id, parent)) {\n return parent;\n }\n\n const hasNoChildren = !parent.children || parent.children.length === 0;\n if ((parent.menuTemplate || hasNoChildren) && activeItem.id === parent.id) {\n return parent;\n }\n }\n return null;\n });\n\n protected isParentOfActiveItem(item: ZMenuItem): boolean {\n const activeItem = this.selectedMenuItem();\n if (!activeItem) {\n return false;\n }\n\n if (activeItem.parent && activeItem.parent.length > 0) {\n return activeItem.parent.includes(item.id);\n }\n\n return false;\n }\n\n protected readonly avatarSrc = computed(() => this.zUser()?.avatar || this.zLogo());\n\n protected readonly customDrawerParent = computed(() => {\n const parentId = this._templateDrawerParentId();\n if (!parentId) {\n return null;\n }\n return this.menuParents().find((p: ZMenuItem) => p.id === parentId) ?? null;\n });\n\n private readonly _defaultSidebarChildWidth = 230;\n private readonly _defaultMobileDrawerWidth = 280;\n\n protected readonly sidebarChildWidth = computed(() => {\n const parent = this.selectedParent();\n if (parent?.menuTemplate && parent.menuTemplateWidth) {\n return parent.menuTemplateWidth;\n }\n return this._defaultSidebarChildWidth;\n });\n\n protected readonly mobileCustomDrawerWidth = computed(() => {\n const parent = this.customDrawerParent();\n if (parent?.menuTemplateWidth) {\n return parent.menuTemplateWidth;\n }\n return this._defaultMobileDrawerWidth;\n });\n\n constructor() {\n effect(() => {\n const parents = this.menuParents();\n if (parents.length > 0 && !untracked(() => this.selectedParent())) {\n this.selectedParent.set(parents[0]);\n }\n });\n\n effect(() => {\n const currentPath = this._currentPath();\n const processedMenus = this.menuProcessed();\n if (!currentPath || processedMenus.flat.size === 0) {\n return;\n }\n\n const matchingItem = this._findMenuItemByPath(currentPath, processedMenus);\n const currentSelectedId = untracked(() => this.selectedMenuItem()?.id);\n if (matchingItem && matchingItem.id !== currentSelectedId) {\n this.setSelectedMenuItem(matchingItem.id);\n }\n });\n\n effect(() => {\n if (!this.isMobile() && this.mobileMenuOpen()) {\n this.mobileMenuOpen.set(false);\n }\n });\n\n effect(() => {\n const collapsed = this.sidebarCollapsed();\n ZCacheService.set(this.zKey(), collapsed);\n });\n\n setTimeout(() => this._emitControl());\n }\n\n private _emitControl(): void {\n this.zControl.emit({\n openMobileMenu: () => this.openMobileMenu(),\n closeMobileMenu: () => this.closeMobileMenu(),\n toggleMobileMenu: () => this.toggleMobileMenu(),\n setSelectedMenuItem: (id: string) => this.setSelectedMenuItem(id),\n clearActiveItem: () => this.clearActiveItem(),\n toggleSidebar: () => this.toggleSidebar(),\n openMobileTemplateDrawer: (id: string) => this.openMobileTemplateDrawer(id),\n closeMobileTemplateDrawer: () => this.closeMobileTemplateDrawer(),\n sidebarCollapsed: this.sidebarCollapsed.asReadonly(),\n mobileMenuOpen: this.mobileMenuOpen.asReadonly(),\n mobileTemplateDrawerOpen: this.mobileTemplateDrawerOpen.asReadonly(),\n selectedMenuItem: this.selectedMenuItem.asReadonly(),\n selectedParent: this.selectedParent.asReadonly(),\n menuProcessed: this.menuProcessed,\n });\n }\n\n public openMobileMenu(): void {\n this.mobileMenuOpen.set(true);\n }\n\n public closeMobileMenu(): void {\n this.mobileMenuOpen.set(false);\n }\n\n public toggleMobileMenu(): void {\n this.mobileMenuOpen.set(!this.mobileMenuOpen());\n }\n\n public openMobileTemplateDrawer(parentId: string): void {\n this._templateDrawerParentId.set(parentId);\n this.mobileMenuOpen.set(false);\n requestAnimationFrame(() => {\n this.mobileTemplateDrawerOpen.set(true);\n });\n }\n\n public closeMobileTemplateDrawer(): void {\n this.mobileTemplateDrawerOpen.set(false);\n this.mobileMenuOpen.set(true);\n setTimeout(() => {\n this._templateDrawerParentId.set(null);\n }, 300);\n }\n\n public setSelectedMenuItem(menuId: string): void {\n const item = this._findMenuItemById(menuId);\n if (!item) {\n return;\n }\n\n this.selectedMenuItem.set(item);\n\n const parent = this._findParentOfMenuItem(menuId);\n if (!parent) {\n return;\n }\n\n this.selectedParent.set(parent);\n parent.expanded = true;\n\n if (item.parent && item.parent.length > 1) {\n const level2ParentId = item.parent[item.parent.length - 1];\n const level2Parent = this._findMenuItemById(level2ParentId);\n if (level2Parent) {\n level2Parent.expanded = true;\n }\n }\n }\n\n public clearActiveItem(): void {\n this.selectedMenuItem.set(null);\n }\n\n protected selectParent(item: ZMenuItem): void {\n this.selectedParent.set(item);\n const hasNoChildren = !item.children || item.children.length === 0;\n\n if (item.menuTemplate || hasNoChildren) {\n this.selectedMenuItem.set(item);\n }\n\n const processedItem = this.menuProcessed().flat.get(item.id);\n if (processedItem) {\n this.zOnSelect.emit(processedItem);\n }\n }\n\n protected onDesktopParentClick(item: ZMenuItem): void {\n this.selectParent(item);\n const hasChildrenOrTemplate = item.menuTemplate || (item.children && item.children.length > 0);\n\n if (this.sidebarCollapsed() && hasChildrenOrTemplate) {\n this.toggleSidebar();\n }\n }\n\n protected onMenuItemClick(item: ZMenuItem): void {\n if (item.children && item.children.length > 0) {\n item.expanded = !item.expanded;\n return;\n }\n\n this.selectedMenuItem.set(item);\n this._expandParentsOfItem(item);\n\n const processedItem = this.menuProcessed().flat.get(item.id);\n if (processedItem) {\n this.zOnSelect.emit(processedItem);\n }\n\n if (this.isMobile()) {\n this.closeMobileMenu();\n this.mobileTemplateDrawerOpen.set(false);\n }\n }\n\n protected onMobileParentClick(item: ZMenuItem): void {\n if (item.menuTemplate) {\n this.selectParent(item);\n this.openMobileTemplateDrawer(item.id);\n return;\n }\n\n const hasNoChildren = !item.children || item.children.length === 0;\n if (hasNoChildren) {\n this.selectParent(item);\n this.closeMobileMenu();\n return;\n }\n\n if (this.selectedParent()?.id === item.id) {\n item.expanded = !item.expanded;\n this.selectedParent.set({ ...item });\n return;\n }\n\n this.selectParent(item);\n item.expanded = true;\n }\n\n protected toggleSidebar(): void {\n if (!this.selectedParent()?.children?.length) {\n return;\n }\n\n this.sidebarCollapsed.set(!this.sidebarCollapsed());\n }\n\n protected closeSidebar(): void {\n this.sidebarCollapsed.set(true);\n }\n\n protected onUserActionClick(action: ZMenuUserAction): void {\n if (action.disabled) {\n return;\n }\n this.zOnMenuAction.emit(action);\n }\n\n protected getVisibleUserActions(): ZMenuUserAction[] {\n return this.zUserActions().filter(action => !action.hidden);\n }\n\n protected shouldShowDividerBefore(action: ZMenuUserAction, index: number): boolean {\n return action.divide === 'before' && index > 0;\n }\n\n protected shouldShowDividerAfter(action: ZMenuUserAction, index: number): boolean {\n return action.divide === 'after' && index < this.getVisibleUserActions().length - 1;\n }\n\n protected onBackdropClick(): void {\n if (this.mobileTemplateDrawerOpen()) {\n this.mobileTemplateDrawerOpen.set(false);\n this._templateDrawerParentId.set(null);\n }\n this.closeMobileMenu();\n }\n\n private _findMenuItemById(id: string): ZMenuItem | null {\n return this.menuProcessed().flat.get(id) ?? null;\n }\n\n private _findParentOfMenuItem(id: string): ZMenuItem | null {\n const item = this.menuProcessed().flat.get(id);\n if (!item?.parent?.length) {\n return null;\n }\n\n const parentId = item.parent[item.parent.length - 1];\n return this.menuProcessed().flat.get(parentId) ?? null;\n }\n\n private _isChildOf(childId: string, parent: ZMenuItem): boolean {\n const child = this.menuProcessed().flat.get(childId);\n if (!child?.parent?.length) {\n return false;\n }\n\n return child.parent.includes(parent.id);\n }\n\n private _expandParentsOfItem(item: ZMenuItem): void {\n if (!item.parent || item.parent.length === 0) {\n return;\n }\n\n for (const parentId of item.parent) {\n const parentItem = this.menuProcessed().flat.get(parentId);\n if (parentItem) {\n parentItem.expanded = true;\n }\n }\n }\n\n private _processMenus(menus: ZMenuItem[]): ZMenuProcessed {\n const flat = new Map<string, ZMenuItem>();\n const processItem = (item: ZMenuItem, parentIds: string[], level: number): ZMenuItem => {\n item.parent = [...parentIds];\n item.level = level;\n flat.set(item.id, item);\n\n if (item.children && item.children.length > 0) {\n const newParentIds = [...parentIds, item.id];\n item.children = item.children.map(child => processItem(child, newParentIds, level + 1));\n }\n\n return item;\n };\n\n const tree = menus.map(item => processItem(item, [], 0));\n return { tree, flat };\n }\n\n private _findMenuItemByPath(path: string, processed: ZMenuProcessed): ZMenuItem | null {\n const normalizedPath = path.split('?')[0].replace(/\\/$/, '') || '/';\n for (const item of processed.flat.values()) {\n const itemPath = item.path?.replace(/\\/$/, '') || '';\n if (itemPath === normalizedPath) {\n return item;\n }\n }\n\n for (const item of processed.flat.values()) {\n if (item.subPaths && item.subPaths.length > 0) {\n for (const subPath of item.subPaths) {\n const normalizedSubPath = subPath.replace(/\\/$/, '');\n if (normalizedPath.startsWith(normalizedSubPath)) {\n return item;\n }\n }\n }\n }\n\n for (const item of processed.flat.values()) {\n const itemPath = item.path?.replace(/\\/$/, '') || '';\n if (itemPath && normalizedPath.startsWith(itemPath + '/')) {\n return item;\n }\n }\n\n return null;\n }\n\n private _getStateMenuCollapsed(): boolean {\n return ZCacheService.get<boolean>(this.zKey(), false) ?? false;\n }\n}\n","<!-- DESKTOP LAYOUT - Hidden on mobile -->\n<div class=\"z-menu-desktop relative z-200 hidden h-full py-1 pl-1 md:block\" [class.collapsed]=\"sidebarCollapsed()\">\n <main class=\"z-menu-main relative flex h-full\">\n <div class=\"z-sidebar-main h-full w-[50px]\">\n <div\n class=\"z-shadow-menu bg-sidebar border-border/40 dark:border-sidebar-border relative flex h-full w-full flex-col items-center gap-1.5 rounded-[6px] border\"></div>\n\n <div class=\"bg-sidebar text-sidebar-foreground absolute inset-px z-20 flex flex-col rounded-[6px]\">\n @if (zLogo()) {\n <div class=\"border-sidebar-border flex h-[52px] items-center justify-center border-b px-2\">\n <img [src]=\"zLogo()\" alt=\"Logo\" class=\"h-8 w-auto object-contain\" />\n </div>\n }\n\n <!-- Expand Button - Only show when collapsed -->\n @if (sidebarCollapsed() && selectedParent()) {\n <div\n class=\"z-expand-btn hover:bg-sidebar-accent mx-auto mt-2 flex h-9 w-9 cursor-pointer items-center justify-center rounded-[6px]\"\n (click)=\"toggleSidebar()\">\n <z-icon zType=\"lucideChevronsRight\" zSize=\"20\" class=\"opacity-70\" />\n </div>\n }\n\n <div class=\"flex flex-1 flex-col items-center gap-2 p-2\">\n @for (item of menuParents(); track item.id) {\n @let hasActiveChild = parentWithActiveChild()?.id === item.id;\n @let isCurrentlySelected = selectedParent()?.id === item.id;\n @let showActiveIndicator = hasActiveChild && !isCurrentlySelected;\n <div\n zTooltip\n [zContent]=\"item.name | translate\"\n zPosition=\"right\"\n [zArrow]=\"false\"\n [zAlwaysShow]=\"true\"\n class=\"relative flex h-9 w-9 cursor-pointer items-center justify-center rounded-[6px] select-none\"\n [class.bg-sidebar-primary]=\"selectedParent()?.id === item.id\"\n [class.text-sidebar-primary-foreground]=\"selectedParent()?.id === item.id\"\n [class.hover:bg-sidebar-accent]=\"selectedParent()?.id !== item.id\"\n (click)=\"onDesktopParentClick(item)\">\n @if (item.icon) {\n <z-icon [zType]=\"item.icon\" zSize=\"20\" />\n } @else {\n <z-icon [zSvg]=\"item.iconSvg || ''\" zSize=\"20\" />\n }\n @if (showActiveIndicator) {\n <div\n class=\"bg-sidebar-primary absolute top-1/2 -left-[5px] h-4 w-1 -translate-y-1/2 rounded-full\"></div>\n }\n </div>\n }\n </div>\n\n <div class=\"border-sidebar-border flex items-center justify-center border-t p-2\">\n <div\n z-popover\n [zOffset]=\"11\"\n [zPopoverContent]=\"userPopoverTpl\"\n zPosition=\"right-bottom\"\n class=\"aspect-square h-9 w-9 shrink-0 cursor-pointer overflow-hidden rounded-full\">\n <img [src]=\"avatarSrc()\" alt=\"User Avatar\" class=\"h-full w-full object-cover\" />\n </div>\n </div>\n </div>\n </div>\n\n <ng-template #userPopoverTpl let-close=\"close\">\n <div class=\"min-w-56 p-1\">\n <!-- User Info Header - Always shown -->\n <div class=\"p-0 text-sm font-normal\">\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=\"truncate font-medium\">{{ zUser()?.name || 'User Name' }}</span>\n <span class=\"text-muted-foreground mt-0.5 truncate text-xs\">\n {{ zUser()?.email || 'user@example.com' }}\n </span>\n </div>\n </div>\n </div>\n\n @if (getVisibleUserActions().length > 0 || zActionsTemplate()) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n\n <!-- Actions - Custom or from zUserActions -->\n @if (zActionsTemplate()) {\n <ng-container *ngTemplateOutlet=\"zActionsTemplate(); context: { close: close }\" />\n } @else if (getVisibleUserActions().length > 0) {\n @for (action of getVisibleUserActions(); track action.id; let idx = $index) {\n @if (shouldShowDividerBefore(action, idx)) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n\n <button\n type=\"button\"\n [disabled]=\"action.disabled\"\n [class]=\"action.class\"\n class=\"hover:bg-accent focus:bg-accent flex w-full cursor-pointer items-center gap-2 rounded-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>{{ action.label | translate }}</span>\n </button>\n\n @if (shouldShowDividerAfter(action, idx)) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n }\n }\n </div>\n </ng-template>\n\n @if (selectedParent(); as parent) {\n @let hasChildrenOrTemplate = parent.menuTemplate || (parent.children && parent.children.length > 0);\n @if (hasChildrenOrTemplate) {\n <div\n class=\"z-sidebar-child-wrapper\"\n [class.collapsed]=\"sidebarCollapsed()\"\n [style.--sidebar-child-width.px]=\"sidebarChildWidth()\">\n <div\n class=\"z-sidebar-child z-shadow-menu bg-card text-card-foreground border-border/40 dark:border-sidebar-border flex h-full shrink-0 flex-col items-start overflow-hidden rounded-[6px] border\"\n [style.width.px]=\"sidebarChildWidth()\"\n [class.collapsed]=\"sidebarCollapsed()\">\n <div class=\"border-border flex h-[52px] w-full shrink-0 items-center border-b px-3\">\n @if (selectedParent()?.icon) {\n <z-icon [zType]=\"selectedParent()!.icon\" zSize=\"20\" class=\"mr-2 shrink-0\" />\n }\n <div\n class=\"mr-4 min-w-0 flex-1 truncate text-base font-semibold\"\n zTooltip\n zPosition=\"top-left\"\n [zContent]=\"selectedParent()?.name || '' | translate\"\n [zArrow]=\"false\">\n {{ selectedParent()?.name | translate }}\n </div>\n\n <z-icon\n zType=\"lucidePanelRightOpen\"\n zSize=\"20\"\n class=\"shrink-0 cursor-pointer opacity-60 hover:opacity-100\"\n (click)=\"toggleSidebar()\" />\n </div>\n\n <!-- Show menuTemplate if available, otherwise show children -->\n @if (selectedParent()?.menuTemplate) {\n <ng-scrollbar class=\"z-menu-scrollbar min-h-0 w-full flex-1\" track=\"vertical\">\n <div class=\"flex w-full flex-col p-3 pr-2\">\n <ng-container\n *ngTemplateOutlet=\"\n selectedParent()!.menuTemplate!;\n context: { $implicit: selectedParent()!, close: closeSidebarFn }\n \" />\n </div>\n </ng-scrollbar>\n } @else {\n <ng-scrollbar class=\"z-menu-scrollbar min-h-0 w-full flex-1 overflow-hidden\" track=\"vertical\">\n <div class=\"flex w-full min-w-0 flex-col gap-1 overflow-hidden py-1 pr-2 pl-2\">\n <ng-container *ngTemplateOutlet=\"menuChildrenTpl; context: { $implicit: menuChildren() }\" />\n </div>\n </ng-scrollbar>\n }\n </div>\n </div>\n }\n }\n </main>\n</div>\n\n<!-- MOBILE LAYOUT - Visible only on mobile -->\n<div class=\"z-menu-mobile-wrapper hidden max-md:block\">\n <!-- Mobile Backdrop -->\n @if (mobileMenuOpen() || mobileTemplateDrawerOpen()) {\n <div\n class=\"z-menu-backdrop fixed inset-0 z-9998\"\n [class.z-menu-backdrop-dark]=\"overlayType() === 'dark'\"\n [class.z-menu-backdrop-blur]=\"overlayType() === 'blur'\"\n (click)=\"onBackdropClick()\"></div>\n }\n\n <!-- Mobile Drawer -->\n <aside\n class=\"z-menu-drawer bg-background border-border fixed top-0 left-0 z-9999 flex h-full w-70 flex-col rounded-r-lg border-r\"\n [class.open]=\"mobileMenuOpen()\">\n <!-- Drawer Header -->\n <div class=\"border-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=\"bg-accent h-9 w-9 shrink-0\" (click)=\"closeMobileMenu()\">\n <z-icon zType=\"lucideX\" zSize=\"20\" />\n </button>\n </div>\n\n <!-- Drawer Content - Accordion Menu -->\n <ng-scrollbar class=\"z-menu-scrollbar flex-1\" track=\"vertical\">\n <div class=\"p-3\">\n @for (parent of menuParents(); track parent.id) {\n <div class=\"mb-1\">\n <!-- Parent Item -->\n @let isParentActive =\n selectedMenuItem()?.id === parent.id && (!parent.children || parent.children.length === 0);\n @let hasActiveChild = parentWithActiveChild()?.id === parent.id && !isParentActive;\n @let isCurrentlyViewing = selectedParent()?.id === parent.id;\n <div\n class=\"relative flex cursor-pointer items-center gap-3 rounded-[6px] p-2\"\n [class.bg-primary/20]=\"isParentActive\"\n [class.text-primary]=\"isParentActive || hasActiveChild\"\n [class.hover:bg-accent]=\"!isParentActive\"\n (click)=\"onMobileParentClick(parent)\">\n @if (parent.icon) {\n <z-icon [zType]=\"parent.icon\" zSize=\"18\" class=\"shrink-0\" />\n } @else if (parent.iconSvg) {\n <z-icon [zSvg]=\"parent.iconSvg\" zSize=\"18\" class=\"shrink-0\" />\n }\n <span class=\"min-w-0 flex-1 truncate text-[13px] font-[450]\">{{ parent.name | translate }}</span>\n @if ((parent.children && parent.children.length > 0) || parent.menuTemplate) {\n <z-icon\n zType=\"lucideChevronRight\"\n zSize=\"16\"\n class=\"z-menu-arrow shrink-0 opacity-60 transition-transform\"\n [class.expanded]=\"parent.expanded && isCurrentlyViewing\" />\n }\n </div>\n\n <!-- Children (Accordion) - Only render if NO menuTemplate -->\n @if (parent.children && parent.children.length > 0 && !parent.menuTemplate) {\n <div class=\"z-menu-submenu\" [class.expanded]=\"parent.expanded && isCurrentlyViewing\">\n <div class=\"z-menu-submenu-inner\">\n <div class=\"z-menu-tree relative ml-4 flex flex-col gap-1 pt-1 pl-3\">\n <div class=\"absolute top-0 bottom-2 left-0 w-px bg-gray-300 dark:bg-gray-600\"></div>\n\n @for (child of parent.children; track child.id) {\n @let isChildActive =\n selectedMenuItem()?.id === child.id && (!child.children || child.children.length === 0);\n @let isChildParentOfActive = isParentOfActiveItem(child);\n @let hasChildren = child.children && child.children.length > 0;\n\n <div>\n <div\n class=\"relative flex cursor-pointer items-center gap-2 rounded-[6px] p-2\"\n [class.bg-primary]=\"isChildActive\"\n [class.text-primary-foreground]=\"isChildActive\"\n [class.text-primary]=\"isChildParentOfActive && !isChildActive\"\n [class.hover:bg-accent]=\"!isChildActive\"\n (click)=\"onMenuItemClick(child)\">\n <div class=\"absolute top-1/2 -left-3 h-px w-3 bg-gray-300 dark:bg-gray-600\"></div>\n @if (child.icon) {\n <z-icon [zType]=\"child.icon\" zSize=\"16\" class=\"shrink-0\" />\n } @else if (child.iconSvg) {\n <z-icon [zSvg]=\"child.iconSvg\" zSize=\"16\" class=\"shrink-0\" />\n } @else {\n <div\n class=\"h-1.5 w-1.5 shrink-0 rounded-full\"\n [class.bg-primary-foreground]=\"isChildActive\"\n [class.bg-gray-400]=\"!isChildActive\"></div>\n }\n <span class=\"min-w-0 flex-1 truncate text-[13px] font-[450]\">\n {{ child.name | translate }}\n </span>\n @if (hasChildren) {\n <z-icon\n zType=\"lucideChevronRight\"\n zSize=\"14\"\n class=\"z-menu-arrow shrink-0 opacity-60 transition-transform\"\n [class.expanded]=\"child.expanded\" />\n }\n </div>\n\n <!-- Level 3 -->\n @if (hasChildren) {\n <div class=\"z-menu-submenu\" [class.expanded]=\"child.expanded\">\n <div class=\"z-menu-submenu-inner\">\n <div class=\"relative ml-4 flex flex-col gap-1 pt-1 pl-3\">\n <div class=\"absolute top-0 bottom-2 left-0 w-px bg-gray-300 dark:bg-gray-600\"></div>\n\n @for (subChild of child.children; track subChild.id) {\n @let isSubChildActive = selectedMenuItem()?.id === subChild.id;\n\n <div class=\"relative w-full min-w-0\">\n <div class=\"absolute top-1/2 -left-3 h-px w-3 bg-gray-300 dark:bg-gray-600\"></div>\n\n <div\n class=\"flex cursor-pointer items-center gap-2 rounded-[6px] p-2\"\n [class.bg-primary]=\"isSubChildActive\"\n [class.text-primary-foreground]=\"isSubChildActive\"\n [class.hover:bg-accent]=\"!isSubChildActive\"\n (click)=\"onMenuItemClick(subChild)\">\n <div\n class=\"h-1 w-1 shrink-0 rounded-full\"\n [class.bg-primary-foreground]=\"isSubChildActive\"\n [class.bg-gray-400]=\"!isSubChildActive\"></div>\n <span class=\"min-w-0 flex-1 truncate text-[13px] font-[450]\">\n {{ subChild.name | translate }}\n </span>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </ng-scrollbar>\n\n <!-- Drawer Footer - User Info -->\n <div class=\"border-border shrink-0 border-t p-3\">\n <div\n z-popover\n [zOffset]=\"8\"\n [zPopoverContent]=\"mobileActionsPopoverTpl\"\n zPosition=\"top-right\"\n zTrigger=\"click\"\n class=\"hover:bg-accent flex cursor-pointer items-center gap-3 rounded-[6px] p-2\">\n <div 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 </div>\n <div class=\"min-w-0 flex-1\">\n <div class=\"truncate text-sm font-medium\">{{ zUser()?.name || 'User Name' }}</div>\n <div class=\"text-muted-foreground truncate text-xs\">{{ zUser()?.email || 'user@example.com' }}</div>\n </div>\n <div class=\"text-muted-foreground flex shrink-0 flex-col\">\n <z-icon zType=\"lucideChevronUp\" zSize=\"14\" />\n <z-icon zType=\"lucideChevronDown\" zSize=\"14\" class=\"-mt-1\" />\n </div>\n </div>\n </div>\n </aside>\n\n <!-- Mobile Custom Template Drawer -->\n <aside\n class=\"z-menu-custom-drawer bg-background border-border fixed top-0 left-0 z-9999 flex h-full max-w-[calc(100vw-16px)] flex-col rounded-r-lg border-r\"\n [style.width.px]=\"mobileCustomDrawerWidth()\"\n [class.open]=\"mobileTemplateDrawerOpen() && customDrawerParent()?.menuTemplate\">\n @if (customDrawerParent()?.menuTemplate) {\n <!-- Custom Drawer Header -->\n <div class=\"border-border flex h-14 shrink-0 items-center gap-3 border-b px-4\">\n <button\n z-button\n zType=\"ghost\"\n [zWave]=\"false\"\n class=\"bg-accent h-9 w-9 shrink-0\"\n (click)=\"closeMobileTemplateDrawer()\">\n <z-icon zType=\"lucideChevronLeft\" zSize=\"20\" />\n </button>\n <span class=\"min-w-0 flex-1 truncate text-base font-semibold\">\n {{ customDrawerParent()?.name | translate }}\n </span>\n </div>\n\n <!-- Custom Template Content -->\n <ng-scrollbar class=\"z-menu-scrollbar flex-1\" track=\"vertical\">\n <div class=\"p-4\">\n <ng-container\n *ngTemplateOutlet=\"\n customDrawerParent()!.menuTemplate!;\n context: { $implicit: customDrawerParent()!, close: closeMobileDrawerFn }\n \" />\n </div>\n </ng-scrollbar>\n }\n </aside>\n\n <ng-template #mobileActionsPopoverTpl let-close=\"close\">\n <div class=\"min-w-48 p-1\">\n @if (zActionsTemplate()) {\n <ng-container *ngTemplateOutlet=\"zActionsTemplate(); context: { close: close }\" />\n } @else if (getVisibleUserActions().length > 0) {\n @for (action of getVisibleUserActions(); track action.id; let idx = $index) {\n @if (shouldShowDividerBefore(action, idx)) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n\n <button\n type=\"button\"\n [disabled]=\"action.disabled\"\n [class]=\"action.class\"\n class=\"hover:bg-accent focus:bg-accent flex w-full cursor-pointer items-center gap-2 rounded-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>{{ action.label | translate }}</span>\n </button>\n\n @if (shouldShowDividerAfter(action, idx)) {\n <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n }\n }\n }\n </div>\n </ng-template>\n</div>\n\n<!-- Shared Template for Menu Children -->\n<ng-template #menuChildrenTpl let-children>\n @for (child of children; track child.id) {\n @let isChildActive = selectedMenuItem()?.id === child.id && (!child.children || child.children.length === 0);\n @let isChildParentOfActive = isParentOfActiveItem(child);\n @let hasChildren = child.children && child.children.length > 0;\n <div class=\"w-full min-w-0\">\n <div\n #divLevel1\n class=\"z-menu-item flex w-full cursor-pointer items-center gap-2 rounded-[6px] p-2\"\n [class.bg-primary]=\"isChildActive\"\n [class.text-primary-foreground]=\"isChildActive\"\n [class.text-primary]=\"isChildParentOfActive && !isChildActive\"\n [class.hover:bg-gray-200]=\"!isChildActive\"\n [class.dark:hover:bg-input/50]=\"!isChildActive\"\n (click)=\"onMenuItemClick(child)\">\n @if (child.icon) {\n <z-icon [zType]=\"child.icon\" zSize=\"18\" class=\"shrink-0\" />\n } @else if (child.iconSvg) {\n <z-icon [zSvg]=\"child.iconSvg\" zSize=\"18\" class=\"shrink-0\" />\n }\n <span\n class=\"min-w-0 flex-1 truncate text-[13px] font-[450]\"\n zTooltip\n [zContent]=\"child.name | translate\"\n [zArrow]=\"false\"\n [zOffset]=\"10\"\n zMaxWidth=\"200px\"\n zPosition=\"right\"\n [zTriggerElement]=\"divLevel1\">\n {{ child.name | translate }}\n </span>\n @if (hasChildren) {\n <z-icon\n zType=\"lucideChevronRight\"\n zSize=\"14\"\n class=\"z-menu-arrow shrink-0 opacity-60 transition-transform\"\n [class.expanded]=\"child.expanded\" />\n }\n </div>\n\n @if (hasChildren) {\n <div class=\"z-menu-submenu\" [class.expanded]=\"child.expanded\">\n <div class=\"z-menu-submenu-inner\">\n <div class=\"z-menu-tree relative ml-4 flex flex-col gap-1 pt-1 pl-3\">\n <div class=\"absolute top-0 bottom-2 left-0 w-px bg-gray-300 dark:bg-gray-600\"></div>\n\n @for (subChild of child.children; track subChild.id; let isLast = $last) {\n @let isSubChildActive = selectedMenuItem()?.id === subChild.id;\n <div class=\"relative w-full min-w-0\">\n <div class=\"absolute top-1/2 -left-3 h-px w-3 bg-gray-300 dark:bg-gray-600\"></div>\n\n <div\n #divLevel2\n class=\"z-menu-item flex w-full cursor-pointer items-center gap-2 rounded-[6px] p-2\"\n [class.bg-primary]=\"isSubChildActive\"\n [class.text-primary-foreground]=\"isSubChildActive\"\n [class.hover:bg-gray-200]=\"!isSubChildActive\"\n [class.dark:hover:bg-input/50]=\"!isSubChildActive\"\n (click)=\"onMenuItemClick(subChild)\">\n @if (subChild.icon) {\n <z-icon [zType]=\"subChild.icon\" zSize=\"16\" class=\"shrink-0\" />\n } @else if (subChild.iconSvg) {\n <z-icon [zSvg]=\"subChild.iconSvg\" zSize=\"16\" class=\"shrink-0\" />\n } @else {\n <div\n class=\"h-1 w-1 shrink-0 rounded-full\"\n [class.bg-primary-foreground]=\"isSubChildActive\"\n [class.bg-gray-400]=\"!isSubChildActive\"></div>\n }\n <span\n class=\"min-w-0 flex-1 truncate text-[13px] font-[450]\"\n zTooltip\n [zContent]=\"subChild.name | translate\"\n [zArrow]=\"false\"\n [zOffset]=\"10\"\n zMaxWidth=\"200px\"\n zPosition=\"right\"\n [zTriggerElement]=\"divLevel2\">\n {{ subChild.name | translate }}\n </span>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { NgTemplateOutlet } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
3
|
import { input, inject, TemplateRef, Directive, contentChildren, viewChild, viewChildren, model, output, signal, effect, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
4
|
+
import { TranslatePipe } from '@ngx-translate/core';
|
|
4
5
|
import { ZButtonComponent } from '@shival99/z-ui/components/z-button';
|
|
5
6
|
import { ZIconComponent } from '@shival99/z-ui/components/z-icon';
|
|
6
7
|
import { ZPopoverDirective } from '@shival99/z-ui/components/z-popover';
|
|
@@ -242,13 +243,13 @@ class ZTabsComponent {
|
|
|
242
243
|
}, 150);
|
|
243
244
|
}
|
|
244
245
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
245
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZTabsComponent, isStandalone: true, selector: "z-tabs", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zTabs: { classPropertyName: "zTabs", publicName: "zTabs", isSignal: true, isRequired: true, transformFunction: null }, zVariant: { classPropertyName: "zVariant", publicName: "zVariant", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zOrientation: { classPropertyName: "zOrientation", publicName: "zOrientation", isSignal: true, isRequired: false, transformFunction: null }, zLazy: { classPropertyName: "zLazy", publicName: "zLazy", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange", zTabChange: "zTabChange" }, host: { classAttribute: "z-tabs-wrapper block" }, queries: [{ propertyName: "tabPanels", predicate: ZTabPanelDirective, isSignal: true }], viewQueries: [{ propertyName: "tabsListContainer", first: true, predicate: ["tabsListContainer"], descendants: true, isSignal: true }, { propertyName: "tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"z-tabs-container flex flex-col gap-4\"\n [class.flex-row]=\"zOrientation() === 'vertical'\"\n [class.gap-4]=\"zOrientation() === 'vertical'\">\n <!-- Tabs Navigation (Left/Scroll/Tabs/Right/Dropdown) -->\n <div class=\"z-tabs-nav flex items-start gap-2\">\n <!-- Scroll Left Button -->\n @if (canScrollLeft() && zOrientation() === 'horizontal') {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n [zWave]=\"false\"\n class=\"shrink-0\"\n (click)=\"scrollLeft()\"\n aria-label=\"Scroll left\">\n <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n </z-button>\n }\n\n <!-- Tabs List Container with Scroll + Fade -->\n <div class=\"z-tabs-scroll-container relative min-w-0 flex-1\">\n <div\n #tabsListContainer\n class=\"z-tabs-scroll-wrapper\"\n [class.vertical]=\"zOrientation() === 'vertical'\"\n (scroll)=\"onTabsScroll()\">\n <!-- Tab List -->\n <div [class]=\"tabsClasses()\" role=\"tablist\" [attr.aria-orientation]=\"zOrientation()\">\n @for (tab of zTabs(); track tab.value; let idx = $index) {\n <button\n #tabButton\n type=\"button\"\n role=\"tab\"\n [class]=\"getTabItemClasses(tab)\"\n [attr.data-active]=\"isTabActive(tab)\"\n [attr.aria-selected]=\"isTabActive(tab)\"\n [attr.aria-controls]=\"'panel-' + tab.value\"\n [disabled]=\"tab.disabled\"\n [tabindex]=\"isTabActive(tab) ? 0 : -1\"\n (click)=\"selectTab(tab)\"\n (keydown)=\"onTabKeydown($event, idx)\">\n @if (tab.icon) {\n <z-icon [zType]=\"tab.icon\" zSize=\"16\" />\n }\n <span>{{ tab.label }}</span>\n @if (tab.badge) {\n <span\n class=\"bg-primary text-primary-foreground ml-1.5 inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold\">\n {{ tab.badge }}\n </span>\n }\n </button>\n }\n </div>\n </div>\n\n <!-- Fade overlays (outside scroll container) -->\n @if (canScrollLeft() && zOrientation() === 'horizontal') {\n <div class=\"z-tabs-fade-left\"></div>\n }\n @if (canScrollRight() && zOrientation() === 'horizontal') {\n <div class=\"z-tabs-fade-right\"></div>\n }\n </div>\n\n <!-- Scroll Right Button -->\n @if (canScrollRight() && zOrientation() === 'horizontal') {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n class=\"shink-0\"\n (click)=\"scrollRight()\"\n [zWave]=\"false\"\n aria-label=\"Scroll right\">\n <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n </z-button>\n }\n\n <!-- Dropdown Button (Mobile or Overflow) -->\n @if (zOrientation() === 'horizontal' && (canScrollLeft() || canScrollRight())) {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n class=\"shink-0\"\n z-popover\n [zPopoverContent]=\"dropdownTpl\"\n zPosition=\"bottom-right\"\n [zWave]=\"false\"\n zClass=\"min-w-[100px] max-w-[200px]\"\n (zShow)=\"scrollToActiveDropdownItem()\"\n aria-label=\"Select tab\">\n <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n </z-button>\n }\n </div>\n\n <!-- Tab Panels -->\n <div class=\"z-tabs-panels min-h-0\" [class.mt-2]=\"zOrientation() === 'horizontal'\">\n @for (panel of tabPanels(); track panel.zTabPanel()) {\n @if (shouldRenderPanel(panel.zTabPanel())) {\n <div\n role=\"tabpanel\"\n [id]=\"'panel-' + panel.zTabPanel()\"\n [attr.aria-labelledby]=\"panel.zTabPanel()\"\n [hidden]=\"activeTab() !== panel.zTabPanel()\">\n <ng-container *ngTemplateOutlet=\"panel.template\" />\n </div>\n }\n }\n </div>\n</div>\n\n<!-- Dropdown Menu Template -->\n<ng-template #dropdownTpl let-close=\"close\">\n <div class=\"z-tabs-dropdown-menu flex max-h-[300px] max-w-[200px] min-w-[100px] flex-col gap-0.5 overflow-y-auto p-1\">\n @for (tab of zTabs(); track tab.value) {\n <button\n #dropdownItem\n type=\"button\"\n class=\"flex w-full cursor-pointer items-center justify-start gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors outline-none disabled:pointer-events-none disabled:opacity-50\"\n [class.hover:bg-primary/10]=\"!isTabActive(tab)\"\n [class.hover:text-foreground]=\"!isTabActive(tab)\"\n [class.focus:bg-primary/10]=\"!isTabActive(tab)\"\n [class.bg-primary/15]=\"isTabActive(tab)\"\n [class.text-primary]=\"isTabActive(tab)\"\n [class.font-medium]=\"isTabActive(tab)\"\n [disabled]=\"tab.disabled\"\n (click)=\"selectTab(tab, true); close()\">\n @if (tab.icon) {\n <z-icon [zType]=\"tab.icon\" zSize=\"16\" class=\"text-muted-foreground shink-0\" />\n }\n <span\n class=\"min-w-0 flex-1 truncate\"\n z-tooltip\n [zContent]=\"tab.label\"\n zPosition=\"top\"\n [zHideDelay]=\"0\"\n [zOffset]=\"5\"\n [zArrow]=\"false\"\n [zTriggerElement]=\"dropdownItem\">\n {{ tab.label }}\n </span>\n @if (tab.badge) {\n <span\n class=\"bg-primary text-primary-foreground inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold\">\n {{ tab.badge }}\n </span>\n }\n @if (isTabActive(tab)) {\n <z-icon zType=\"lucideCheck\" zSize=\"16\" class=\"text-primary shink-0\" />\n }\n </button>\n }\n </div>\n</ng-template>\n", styles: [".z-tabs-scroll-wrapper{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}.z-tabs-scroll-wrapper::-webkit-scrollbar{display:none}.z-tabs-scroll-wrapper.vertical{overflow-x:hidden;overflow-y:auto}.z-tabs-fade-left{content:\"\";position:absolute;left:0;top:0;bottom:0;width:40px;background:linear-gradient(to right,var(--background) 0%,oklch(from var(--background) l c h/.8) 30%,oklch(from var(--background) l c h/.4) 60%,oklch(from var(--background) l c h/0) 100%);pointer-events:none;z-index:10}.z-tabs-fade-right{content:\"\";position:absolute;right:0;top:0;bottom:0;width:40px;background:linear-gradient(to left,var(--background) 0%,oklch(from var(--background) l c h/.8) 30%,oklch(from var(--background) l c h/.4) 60%,oklch(from var(--background) l c h/0) 100%);pointer-events:none;z-index:10}.z-tabs.flex-row.border-b{border-bottom:1px solid hsl(var(--border))}.z-tabs.flex-col.border-r{border-right:1px solid hsl(var(--border));padding-right:.5rem}.z-tab-item{-webkit-tap-highlight-color:transparent}.z-tab-item[data-active=true]{position:relative}.z-tab-item:disabled{pointer-events:none}.z-tabs-panels [role=tabpanel]{animation:z-tabs-fade-in .2s ease-in-out}.z-tabs-panels [role=tabpanel][hidden]{display:none}.z-tabs-wrapper .z-tabs.flex-row.border-b+.z-tabs-panels{margin-top:1rem}.z-tabs-wrapper .z-tabs.flex-row:not(.border-b)+.z-tabs-panels{margin-top:-1px}.z-tabs-wrapper .z-tabs.flex-row:not(.border-b)+.z-tabs-panels [role=tabpanel]:not([hidden]){border:1px solid hsl(var(--border));border-radius:0 6px 6px;padding:1rem}.z-tabs-wrapper .z-tabs.bg-muted\\/30+.z-tabs-panels{margin-top:.75rem}.z-tabs-wrapper .z-tabs.flex-col+.z-tabs-panels{margin-top:0;margin-left:1rem}@keyframes z-tabs-fade-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTrigger", "zTooltipType", "zTooltipSize", "zClass", "zShowDelay", "zHideDelay", "zArrow", "zDisabled", "zOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zManualClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl"], exportAs: ["zPopover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
246
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZTabsComponent, isStandalone: true, selector: "z-tabs", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zTabs: { classPropertyName: "zTabs", publicName: "zTabs", isSignal: true, isRequired: true, transformFunction: null }, zVariant: { classPropertyName: "zVariant", publicName: "zVariant", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zOrientation: { classPropertyName: "zOrientation", publicName: "zOrientation", isSignal: true, isRequired: false, transformFunction: null }, zLazy: { classPropertyName: "zLazy", publicName: "zLazy", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange", zTabChange: "zTabChange" }, host: { classAttribute: "z-tabs-wrapper block" }, queries: [{ propertyName: "tabPanels", predicate: ZTabPanelDirective, isSignal: true }], viewQueries: [{ propertyName: "tabsListContainer", first: true, predicate: ["tabsListContainer"], descendants: true, isSignal: true }, { propertyName: "tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"z-tabs-container flex flex-col gap-4\"\n [class.flex-row]=\"zOrientation() === 'vertical'\"\n [class.gap-4]=\"zOrientation() === 'vertical'\">\n <!-- Tabs Navigation (Left/Scroll/Tabs/Right/Dropdown) -->\n <div class=\"z-tabs-nav flex items-start gap-2\">\n <!-- Scroll Left Button -->\n @if (canScrollLeft() && zOrientation() === 'horizontal') {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n [zWave]=\"false\"\n class=\"shrink-0\"\n (click)=\"scrollLeft()\"\n aria-label=\"Scroll left\">\n <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n </z-button>\n }\n\n <!-- Tabs List Container with Scroll + Fade -->\n <div class=\"z-tabs-scroll-container relative min-w-0 flex-1\">\n <div\n #tabsListContainer\n class=\"z-tabs-scroll-wrapper\"\n [class.vertical]=\"zOrientation() === 'vertical'\"\n (scroll)=\"onTabsScroll()\">\n <!-- Tab List -->\n <div [class]=\"tabsClasses()\" role=\"tablist\" [attr.aria-orientation]=\"zOrientation()\">\n @for (tab of zTabs(); track tab.value; let idx = $index) {\n <button\n #tabButton\n type=\"button\"\n role=\"tab\"\n [class]=\"getTabItemClasses(tab)\"\n [attr.data-active]=\"isTabActive(tab)\"\n [attr.aria-selected]=\"isTabActive(tab)\"\n [attr.aria-controls]=\"'panel-' + tab.value\"\n [disabled]=\"tab.disabled\"\n [tabindex]=\"isTabActive(tab) ? 0 : -1\"\n (click)=\"selectTab(tab)\"\n (keydown)=\"onTabKeydown($event, idx)\">\n @if (tab.icon) {\n <z-icon [zType]=\"tab.icon\" zSize=\"16\" />\n }\n <span>{{ tab.label | translate }}</span>\n @if (tab.badge) {\n <span\n class=\"bg-primary text-primary-foreground ml-1.5 inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold\">\n {{ tab.badge }}\n </span>\n }\n </button>\n }\n </div>\n </div>\n\n <!-- Fade overlays (outside scroll container) -->\n @if (canScrollLeft() && zOrientation() === 'horizontal') {\n <div class=\"z-tabs-fade-left\"></div>\n }\n @if (canScrollRight() && zOrientation() === 'horizontal') {\n <div class=\"z-tabs-fade-right\"></div>\n }\n </div>\n\n <!-- Scroll Right Button -->\n @if (canScrollRight() && zOrientation() === 'horizontal') {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n class=\"shink-0\"\n (click)=\"scrollRight()\"\n [zWave]=\"false\"\n aria-label=\"Scroll right\">\n <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n </z-button>\n }\n\n <!-- Dropdown Button (Mobile or Overflow) -->\n @if (zOrientation() === 'horizontal' && (canScrollLeft() || canScrollRight())) {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n class=\"shink-0\"\n z-popover\n [zPopoverContent]=\"dropdownTpl\"\n zPosition=\"bottom-right\"\n [zWave]=\"false\"\n zClass=\"min-w-[100px] max-w-[200px]\"\n (zShow)=\"scrollToActiveDropdownItem()\"\n aria-label=\"Select tab\">\n <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n </z-button>\n }\n </div>\n\n <!-- Tab Panels -->\n <div class=\"z-tabs-panels min-h-0\" [class.mt-2]=\"zOrientation() === 'horizontal'\">\n @for (panel of tabPanels(); track panel.zTabPanel()) {\n @if (shouldRenderPanel(panel.zTabPanel())) {\n <div\n role=\"tabpanel\"\n [id]=\"'panel-' + panel.zTabPanel()\"\n [attr.aria-labelledby]=\"panel.zTabPanel()\"\n [hidden]=\"activeTab() !== panel.zTabPanel()\">\n <ng-container *ngTemplateOutlet=\"panel.template\" />\n </div>\n }\n }\n </div>\n</div>\n\n<!-- Dropdown Menu Template -->\n<ng-template #dropdownTpl let-close=\"close\">\n <div class=\"z-tabs-dropdown-menu flex max-h-[300px] max-w-[200px] min-w-[100px] flex-col gap-0.5 overflow-y-auto p-1\">\n @for (tab of zTabs(); track tab.value) {\n <button\n #dropdownItem\n type=\"button\"\n class=\"flex w-full cursor-pointer items-center justify-start gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors outline-none disabled:pointer-events-none disabled:opacity-50\"\n [class.hover:bg-primary/10]=\"!isTabActive(tab)\"\n [class.hover:text-foreground]=\"!isTabActive(tab)\"\n [class.focus:bg-primary/10]=\"!isTabActive(tab)\"\n [class.bg-primary/15]=\"isTabActive(tab)\"\n [class.text-primary]=\"isTabActive(tab)\"\n [class.font-medium]=\"isTabActive(tab)\"\n [disabled]=\"tab.disabled\"\n (click)=\"selectTab(tab, true); close()\">\n @if (tab.icon) {\n <z-icon [zType]=\"tab.icon\" zSize=\"16\" class=\"text-muted-foreground shink-0\" />\n }\n <span\n class=\"min-w-0 flex-1 truncate\"\n z-tooltip\n [zContent]=\"tab.label | translate\"\n zPosition=\"top\"\n [zHideDelay]=\"0\"\n [zOffset]=\"5\"\n [zArrow]=\"false\"\n [zTriggerElement]=\"dropdownItem\">\n {{ tab.label | translate }}\n </span>\n @if (tab.badge) {\n <span\n class=\"bg-primary text-primary-foreground inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold\">\n {{ tab.badge }}\n </span>\n }\n @if (isTabActive(tab)) {\n <z-icon zType=\"lucideCheck\" zSize=\"16\" class=\"text-primary shink-0\" />\n }\n </button>\n }\n </div>\n</ng-template>\n", styles: [".z-tabs-scroll-wrapper{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}.z-tabs-scroll-wrapper::-webkit-scrollbar{display:none}.z-tabs-scroll-wrapper.vertical{overflow-x:hidden;overflow-y:auto}.z-tabs-fade-left{content:\"\";position:absolute;left:0;top:0;bottom:0;width:40px;background:linear-gradient(to right,var(--background) 0%,oklch(from var(--background) l c h/.8) 30%,oklch(from var(--background) l c h/.4) 60%,oklch(from var(--background) l c h/0) 100%);pointer-events:none;z-index:10}.z-tabs-fade-right{content:\"\";position:absolute;right:0;top:0;bottom:0;width:40px;background:linear-gradient(to left,var(--background) 0%,oklch(from var(--background) l c h/.8) 30%,oklch(from var(--background) l c h/.4) 60%,oklch(from var(--background) l c h/0) 100%);pointer-events:none;z-index:10}.z-tabs.flex-row.border-b{border-bottom:1px solid hsl(var(--border))}.z-tabs.flex-col.border-r{border-right:1px solid hsl(var(--border));padding-right:.5rem}.z-tab-item{-webkit-tap-highlight-color:transparent}.z-tab-item[data-active=true]{position:relative}.z-tab-item:disabled{pointer-events:none}.z-tabs-panels [role=tabpanel]{animation:z-tabs-fade-in .2s ease-in-out}.z-tabs-panels [role=tabpanel][hidden]{display:none}.z-tabs-wrapper .z-tabs.flex-row.border-b+.z-tabs-panels{margin-top:1rem}.z-tabs-wrapper .z-tabs.flex-row:not(.border-b)+.z-tabs-panels{margin-top:-1px}.z-tabs-wrapper .z-tabs.flex-row:not(.border-b)+.z-tabs-panels [role=tabpanel]:not([hidden]){border:1px solid hsl(var(--border));border-radius:0 6px 6px;padding:1rem}.z-tabs-wrapper .z-tabs.bg-muted\\/30+.z-tabs-panels{margin-top:.75rem}.z-tabs-wrapper .z-tabs.flex-col+.z-tabs-panels{margin-top:0;margin-left:1rem}@keyframes z-tabs-fade-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTrigger", "zTooltipType", "zTooltipSize", "zClass", "zShowDelay", "zHideDelay", "zArrow", "zDisabled", "zOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zManualClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl"], exportAs: ["zPopover"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
246
247
|
}
|
|
247
248
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTabsComponent, decorators: [{
|
|
248
249
|
type: Component,
|
|
249
|
-
args: [{ selector: 'z-tabs', imports: [ZIconComponent, ZButtonComponent, ZTooltipDirective, NgTemplateOutlet, ZPopoverDirective], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
250
|
+
args: [{ selector: 'z-tabs', imports: [ZIconComponent, ZButtonComponent, ZTooltipDirective, NgTemplateOutlet, ZPopoverDirective, TranslatePipe], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
250
251
|
class: 'z-tabs-wrapper block',
|
|
251
|
-
}, template: "<div\n class=\"z-tabs-container flex flex-col gap-4\"\n [class.flex-row]=\"zOrientation() === 'vertical'\"\n [class.gap-4]=\"zOrientation() === 'vertical'\">\n <!-- Tabs Navigation (Left/Scroll/Tabs/Right/Dropdown) -->\n <div class=\"z-tabs-nav flex items-start gap-2\">\n <!-- Scroll Left Button -->\n @if (canScrollLeft() && zOrientation() === 'horizontal') {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n [zWave]=\"false\"\n class=\"shrink-0\"\n (click)=\"scrollLeft()\"\n aria-label=\"Scroll left\">\n <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n </z-button>\n }\n\n <!-- Tabs List Container with Scroll + Fade -->\n <div class=\"z-tabs-scroll-container relative min-w-0 flex-1\">\n <div\n #tabsListContainer\n class=\"z-tabs-scroll-wrapper\"\n [class.vertical]=\"zOrientation() === 'vertical'\"\n (scroll)=\"onTabsScroll()\">\n <!-- Tab List -->\n <div [class]=\"tabsClasses()\" role=\"tablist\" [attr.aria-orientation]=\"zOrientation()\">\n @for (tab of zTabs(); track tab.value; let idx = $index) {\n <button\n #tabButton\n type=\"button\"\n role=\"tab\"\n [class]=\"getTabItemClasses(tab)\"\n [attr.data-active]=\"isTabActive(tab)\"\n [attr.aria-selected]=\"isTabActive(tab)\"\n [attr.aria-controls]=\"'panel-' + tab.value\"\n [disabled]=\"tab.disabled\"\n [tabindex]=\"isTabActive(tab) ? 0 : -1\"\n (click)=\"selectTab(tab)\"\n (keydown)=\"onTabKeydown($event, idx)\">\n @if (tab.icon) {\n <z-icon [zType]=\"tab.icon\" zSize=\"16\" />\n }\n <span>{{ tab.label }}</span>\n @if (tab.badge) {\n <span\n class=\"bg-primary text-primary-foreground ml-1.5 inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold\">\n {{ tab.badge }}\n </span>\n }\n </button>\n }\n </div>\n </div>\n\n <!-- Fade overlays (outside scroll container) -->\n @if (canScrollLeft() && zOrientation() === 'horizontal') {\n <div class=\"z-tabs-fade-left\"></div>\n }\n @if (canScrollRight() && zOrientation() === 'horizontal') {\n <div class=\"z-tabs-fade-right\"></div>\n }\n </div>\n\n <!-- Scroll Right Button -->\n @if (canScrollRight() && zOrientation() === 'horizontal') {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n class=\"shink-0\"\n (click)=\"scrollRight()\"\n [zWave]=\"false\"\n aria-label=\"Scroll right\">\n <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n </z-button>\n }\n\n <!-- Dropdown Button (Mobile or Overflow) -->\n @if (zOrientation() === 'horizontal' && (canScrollLeft() || canScrollRight())) {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n class=\"shink-0\"\n z-popover\n [zPopoverContent]=\"dropdownTpl\"\n zPosition=\"bottom-right\"\n [zWave]=\"false\"\n zClass=\"min-w-[100px] max-w-[200px]\"\n (zShow)=\"scrollToActiveDropdownItem()\"\n aria-label=\"Select tab\">\n <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n </z-button>\n }\n </div>\n\n <!-- Tab Panels -->\n <div class=\"z-tabs-panels min-h-0\" [class.mt-2]=\"zOrientation() === 'horizontal'\">\n @for (panel of tabPanels(); track panel.zTabPanel()) {\n @if (shouldRenderPanel(panel.zTabPanel())) {\n <div\n role=\"tabpanel\"\n [id]=\"'panel-' + panel.zTabPanel()\"\n [attr.aria-labelledby]=\"panel.zTabPanel()\"\n [hidden]=\"activeTab() !== panel.zTabPanel()\">\n <ng-container *ngTemplateOutlet=\"panel.template\" />\n </div>\n }\n }\n </div>\n</div>\n\n<!-- Dropdown Menu Template -->\n<ng-template #dropdownTpl let-close=\"close\">\n <div class=\"z-tabs-dropdown-menu flex max-h-[300px] max-w-[200px] min-w-[100px] flex-col gap-0.5 overflow-y-auto p-1\">\n @for (tab of zTabs(); track tab.value) {\n <button\n #dropdownItem\n type=\"button\"\n class=\"flex w-full cursor-pointer items-center justify-start gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors outline-none disabled:pointer-events-none disabled:opacity-50\"\n [class.hover:bg-primary/10]=\"!isTabActive(tab)\"\n [class.hover:text-foreground]=\"!isTabActive(tab)\"\n [class.focus:bg-primary/10]=\"!isTabActive(tab)\"\n [class.bg-primary/15]=\"isTabActive(tab)\"\n [class.text-primary]=\"isTabActive(tab)\"\n [class.font-medium]=\"isTabActive(tab)\"\n [disabled]=\"tab.disabled\"\n (click)=\"selectTab(tab, true); close()\">\n @if (tab.icon) {\n <z-icon [zType]=\"tab.icon\" zSize=\"16\" class=\"text-muted-foreground shink-0\" />\n }\n <span\n class=\"min-w-0 flex-1 truncate\"\n z-tooltip\n [zContent]=\"tab.label\"\n zPosition=\"top\"\n [zHideDelay]=\"0\"\n [zOffset]=\"5\"\n [zArrow]=\"false\"\n [zTriggerElement]=\"dropdownItem\">\n {{ tab.label }}\n </span>\n @if (tab.badge) {\n <span\n class=\"bg-primary text-primary-foreground inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold\">\n {{ tab.badge }}\n </span>\n }\n @if (isTabActive(tab)) {\n <z-icon zType=\"lucideCheck\" zSize=\"16\" class=\"text-primary shink-0\" />\n }\n </button>\n }\n </div>\n</ng-template>\n", styles: [".z-tabs-scroll-wrapper{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}.z-tabs-scroll-wrapper::-webkit-scrollbar{display:none}.z-tabs-scroll-wrapper.vertical{overflow-x:hidden;overflow-y:auto}.z-tabs-fade-left{content:\"\";position:absolute;left:0;top:0;bottom:0;width:40px;background:linear-gradient(to right,var(--background) 0%,oklch(from var(--background) l c h/.8) 30%,oklch(from var(--background) l c h/.4) 60%,oklch(from var(--background) l c h/0) 100%);pointer-events:none;z-index:10}.z-tabs-fade-right{content:\"\";position:absolute;right:0;top:0;bottom:0;width:40px;background:linear-gradient(to left,var(--background) 0%,oklch(from var(--background) l c h/.8) 30%,oklch(from var(--background) l c h/.4) 60%,oklch(from var(--background) l c h/0) 100%);pointer-events:none;z-index:10}.z-tabs.flex-row.border-b{border-bottom:1px solid hsl(var(--border))}.z-tabs.flex-col.border-r{border-right:1px solid hsl(var(--border));padding-right:.5rem}.z-tab-item{-webkit-tap-highlight-color:transparent}.z-tab-item[data-active=true]{position:relative}.z-tab-item:disabled{pointer-events:none}.z-tabs-panels [role=tabpanel]{animation:z-tabs-fade-in .2s ease-in-out}.z-tabs-panels [role=tabpanel][hidden]{display:none}.z-tabs-wrapper .z-tabs.flex-row.border-b+.z-tabs-panels{margin-top:1rem}.z-tabs-wrapper .z-tabs.flex-row:not(.border-b)+.z-tabs-panels{margin-top:-1px}.z-tabs-wrapper .z-tabs.flex-row:not(.border-b)+.z-tabs-panels [role=tabpanel]:not([hidden]){border:1px solid hsl(var(--border));border-radius:0 6px 6px;padding:1rem}.z-tabs-wrapper .z-tabs.bg-muted\\/30+.z-tabs-panels{margin-top:.75rem}.z-tabs-wrapper .z-tabs.flex-col+.z-tabs-panels{margin-top:0;margin-left:1rem}@keyframes z-tabs-fade-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
252
|
+
}, template: "<div\n class=\"z-tabs-container flex flex-col gap-4\"\n [class.flex-row]=\"zOrientation() === 'vertical'\"\n [class.gap-4]=\"zOrientation() === 'vertical'\">\n <!-- Tabs Navigation (Left/Scroll/Tabs/Right/Dropdown) -->\n <div class=\"z-tabs-nav flex items-start gap-2\">\n <!-- Scroll Left Button -->\n @if (canScrollLeft() && zOrientation() === 'horizontal') {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n [zWave]=\"false\"\n class=\"shrink-0\"\n (click)=\"scrollLeft()\"\n aria-label=\"Scroll left\">\n <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n </z-button>\n }\n\n <!-- Tabs List Container with Scroll + Fade -->\n <div class=\"z-tabs-scroll-container relative min-w-0 flex-1\">\n <div\n #tabsListContainer\n class=\"z-tabs-scroll-wrapper\"\n [class.vertical]=\"zOrientation() === 'vertical'\"\n (scroll)=\"onTabsScroll()\">\n <!-- Tab List -->\n <div [class]=\"tabsClasses()\" role=\"tablist\" [attr.aria-orientation]=\"zOrientation()\">\n @for (tab of zTabs(); track tab.value; let idx = $index) {\n <button\n #tabButton\n type=\"button\"\n role=\"tab\"\n [class]=\"getTabItemClasses(tab)\"\n [attr.data-active]=\"isTabActive(tab)\"\n [attr.aria-selected]=\"isTabActive(tab)\"\n [attr.aria-controls]=\"'panel-' + tab.value\"\n [disabled]=\"tab.disabled\"\n [tabindex]=\"isTabActive(tab) ? 0 : -1\"\n (click)=\"selectTab(tab)\"\n (keydown)=\"onTabKeydown($event, idx)\">\n @if (tab.icon) {\n <z-icon [zType]=\"tab.icon\" zSize=\"16\" />\n }\n <span>{{ tab.label | translate }}</span>\n @if (tab.badge) {\n <span\n class=\"bg-primary text-primary-foreground ml-1.5 inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold\">\n {{ tab.badge }}\n </span>\n }\n </button>\n }\n </div>\n </div>\n\n <!-- Fade overlays (outside scroll container) -->\n @if (canScrollLeft() && zOrientation() === 'horizontal') {\n <div class=\"z-tabs-fade-left\"></div>\n }\n @if (canScrollRight() && zOrientation() === 'horizontal') {\n <div class=\"z-tabs-fade-right\"></div>\n }\n </div>\n\n <!-- Scroll Right Button -->\n @if (canScrollRight() && zOrientation() === 'horizontal') {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n class=\"shink-0\"\n (click)=\"scrollRight()\"\n [zWave]=\"false\"\n aria-label=\"Scroll right\">\n <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n </z-button>\n }\n\n <!-- Dropdown Button (Mobile or Overflow) -->\n @if (zOrientation() === 'horizontal' && (canScrollLeft() || canScrollRight())) {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n class=\"shink-0\"\n z-popover\n [zPopoverContent]=\"dropdownTpl\"\n zPosition=\"bottom-right\"\n [zWave]=\"false\"\n zClass=\"min-w-[100px] max-w-[200px]\"\n (zShow)=\"scrollToActiveDropdownItem()\"\n aria-label=\"Select tab\">\n <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n </z-button>\n }\n </div>\n\n <!-- Tab Panels -->\n <div class=\"z-tabs-panels min-h-0\" [class.mt-2]=\"zOrientation() === 'horizontal'\">\n @for (panel of tabPanels(); track panel.zTabPanel()) {\n @if (shouldRenderPanel(panel.zTabPanel())) {\n <div\n role=\"tabpanel\"\n [id]=\"'panel-' + panel.zTabPanel()\"\n [attr.aria-labelledby]=\"panel.zTabPanel()\"\n [hidden]=\"activeTab() !== panel.zTabPanel()\">\n <ng-container *ngTemplateOutlet=\"panel.template\" />\n </div>\n }\n }\n </div>\n</div>\n\n<!-- Dropdown Menu Template -->\n<ng-template #dropdownTpl let-close=\"close\">\n <div class=\"z-tabs-dropdown-menu flex max-h-[300px] max-w-[200px] min-w-[100px] flex-col gap-0.5 overflow-y-auto p-1\">\n @for (tab of zTabs(); track tab.value) {\n <button\n #dropdownItem\n type=\"button\"\n class=\"flex w-full cursor-pointer items-center justify-start gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors outline-none disabled:pointer-events-none disabled:opacity-50\"\n [class.hover:bg-primary/10]=\"!isTabActive(tab)\"\n [class.hover:text-foreground]=\"!isTabActive(tab)\"\n [class.focus:bg-primary/10]=\"!isTabActive(tab)\"\n [class.bg-primary/15]=\"isTabActive(tab)\"\n [class.text-primary]=\"isTabActive(tab)\"\n [class.font-medium]=\"isTabActive(tab)\"\n [disabled]=\"tab.disabled\"\n (click)=\"selectTab(tab, true); close()\">\n @if (tab.icon) {\n <z-icon [zType]=\"tab.icon\" zSize=\"16\" class=\"text-muted-foreground shink-0\" />\n }\n <span\n class=\"min-w-0 flex-1 truncate\"\n z-tooltip\n [zContent]=\"tab.label | translate\"\n zPosition=\"top\"\n [zHideDelay]=\"0\"\n [zOffset]=\"5\"\n [zArrow]=\"false\"\n [zTriggerElement]=\"dropdownItem\">\n {{ tab.label | translate }}\n </span>\n @if (tab.badge) {\n <span\n class=\"bg-primary text-primary-foreground inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold\">\n {{ tab.badge }}\n </span>\n }\n @if (isTabActive(tab)) {\n <z-icon zType=\"lucideCheck\" zSize=\"16\" class=\"text-primary shink-0\" />\n }\n </button>\n }\n </div>\n</ng-template>\n", styles: [".z-tabs-scroll-wrapper{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}.z-tabs-scroll-wrapper::-webkit-scrollbar{display:none}.z-tabs-scroll-wrapper.vertical{overflow-x:hidden;overflow-y:auto}.z-tabs-fade-left{content:\"\";position:absolute;left:0;top:0;bottom:0;width:40px;background:linear-gradient(to right,var(--background) 0%,oklch(from var(--background) l c h/.8) 30%,oklch(from var(--background) l c h/.4) 60%,oklch(from var(--background) l c h/0) 100%);pointer-events:none;z-index:10}.z-tabs-fade-right{content:\"\";position:absolute;right:0;top:0;bottom:0;width:40px;background:linear-gradient(to left,var(--background) 0%,oklch(from var(--background) l c h/.8) 30%,oklch(from var(--background) l c h/.4) 60%,oklch(from var(--background) l c h/0) 100%);pointer-events:none;z-index:10}.z-tabs.flex-row.border-b{border-bottom:1px solid hsl(var(--border))}.z-tabs.flex-col.border-r{border-right:1px solid hsl(var(--border));padding-right:.5rem}.z-tab-item{-webkit-tap-highlight-color:transparent}.z-tab-item[data-active=true]{position:relative}.z-tab-item:disabled{pointer-events:none}.z-tabs-panels [role=tabpanel]{animation:z-tabs-fade-in .2s ease-in-out}.z-tabs-panels [role=tabpanel][hidden]{display:none}.z-tabs-wrapper .z-tabs.flex-row.border-b+.z-tabs-panels{margin-top:1rem}.z-tabs-wrapper .z-tabs.flex-row:not(.border-b)+.z-tabs-panels{margin-top:-1px}.z-tabs-wrapper .z-tabs.flex-row:not(.border-b)+.z-tabs-panels [role=tabpanel]:not([hidden]){border:1px solid hsl(var(--border));border-radius:0 6px 6px;padding:1rem}.z-tabs-wrapper .z-tabs.bg-muted\\/30+.z-tabs-panels{margin-top:.75rem}.z-tabs-wrapper .z-tabs.flex-col+.z-tabs-panels{margin-top:0;margin-left:1rem}@keyframes z-tabs-fade-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
252
253
|
}], ctorParameters: () => [], propDecorators: { tabPanels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ZTabPanelDirective), { isSignal: true }] }], tabsListContainer: [{ type: i0.ViewChild, args: ['tabsListContainer', { isSignal: true }] }], tabButtons: [{ type: i0.ViewChildren, args: ['tabButton', { isSignal: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zTabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTabs", required: true }] }], zVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "zVariant", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOrientation", required: false }] }], zLazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLazy", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }, { type: i0.Output, args: ["activeTabChange"] }], zTabChange: [{ type: i0.Output, args: ["zTabChange"] }] } });
|
|
253
254
|
|
|
254
255
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shival99-z-ui-components-z-tabs.mjs","sources":["../../../../libs/core-ui/components/z-tabs/directives/z-tab-panel.directive.ts","../../../../libs/core-ui/components/z-tabs/z-tabs.variants.ts","../../../../libs/core-ui/components/z-tabs/z-tabs.component.ts","../../../../libs/core-ui/components/z-tabs/z-tabs.component.html","../../../../libs/core-ui/components/z-tabs/shival99-z-ui-components-z-tabs.ts"],"sourcesContent":["import { Directive, inject, input, TemplateRef } from '@angular/core';\n\n@Directive({\n selector: '[z-tab-panel], [zTabPanel]',\n standalone: true,\n exportAs: 'zTabPanel',\n})\nexport class ZTabPanelDirective {\n public readonly zTabPanel = input.required<string>();\n public readonly template = inject(TemplateRef<unknown>);\n}\n","import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const zTabsVariants = cva('z-tabs flex', {\n variants: {\n zVariant: {\n line: 'border-b',\n enclosed: '',\n soft: 'bg-muted/30 rounded-lg p-1',\n pill: 'gap-2',\n solid: 'gap-1',\n underline: 'gap-2 border-b',\n },\n zOrientation: {\n horizontal: 'flex-row',\n vertical: 'flex-col border-r border-b-0',\n },\n },\n defaultVariants: {\n zVariant: 'line',\n zOrientation: 'horizontal',\n },\n});\n\nexport const zTabItemVariants = cva(\n 'z-tab-item relative inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-[border-color,background-color,color,box-shadow] duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed',\n {\n variants: {\n zVariant: {\n line: 'border-b-2 border-transparent hover:text-foreground data-[active=true]:border-primary data-[active=true]:text-primary',\n enclosed:\n 'border border-transparent rounded-t-md hover:border-border data-[active=true]:border-border data-[active=true]:border-b-background data-[active=true]:bg-background',\n soft: 'rounded-md hover:bg-muted data-[active=true]:bg-background data-[active=true]:shadow-sm',\n pill: 'rounded-full hover:bg-muted data-[active=true]:bg-primary data-[active=true]:text-primary-foreground',\n solid:\n 'rounded-md border border-transparent hover:border-border data-[active=true]:bg-primary data-[active=true]:text-primary-foreground data-[active=true]:border-primary',\n underline:\n 'border-b-2 border-transparent hover:text-foreground data-[active=true]:border-primary data-[active=true]:text-primary data-[active=true]:font-semibold',\n },\n zSize: {\n sm: 'px-3 py-1.5 text-sm',\n default: 'px-4 py-2 text-sm',\n lg: 'px-5 py-2.5 text-base',\n },\n zOrientation: {\n horizontal: '',\n vertical: 'w-full justify-start',\n },\n },\n defaultVariants: {\n zVariant: 'line',\n zSize: 'default',\n zOrientation: 'horizontal',\n },\n }\n);\n\nexport type ZTabsVariants = VariantProps<typeof zTabsVariants>;\nexport type ZTabItemVariants = VariantProps<typeof zTabItemVariants>;\n","import { NgTemplateOutlet } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChildren,\n effect,\n ElementRef,\n input,\n model,\n output,\n signal,\n viewChild,\n viewChildren,\n ViewEncapsulation,\n OnDestroy,\n} from '@angular/core';\nimport { ZButtonComponent } from '@shival99/z-ui/components/z-button';\nimport { ZIconComponent } from '@shival99/z-ui/components/z-icon';\nimport { ZPopoverDirective } from '@shival99/z-ui/components/z-popover';\nimport { ZTooltipDirective } from '@shival99/z-ui/components/z-tooltip';\nimport { zMergeClasses } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport { ZTabPanelDirective } from './directives/z-tab-panel.directive';\nimport type { ZTab, ZTabsVariant, ZTabsSize, ZTabsOrientation } from './z-tabs.types';\nimport { zTabsVariants, zTabItemVariants } from './z-tabs.variants';\n\n@Component({\n selector: 'z-tabs',\n imports: [ZIconComponent, ZButtonComponent, ZTooltipDirective, NgTemplateOutlet, ZPopoverDirective],\n standalone: true,\n templateUrl: './z-tabs.component.html',\n styleUrl: './z-tabs.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n class: 'z-tabs-wrapper block',\n },\n})\nexport class ZTabsComponent implements AfterViewInit, OnDestroy {\n public readonly tabPanels = contentChildren(ZTabPanelDirective);\n public readonly tabsListContainer = viewChild<ElementRef<HTMLDivElement>>('tabsListContainer');\n public readonly tabButtons = viewChildren<ElementRef<HTMLButtonElement>>('tabButton');\n\n public readonly class = input<ClassValue>('');\n public readonly zTabs = input.required<ZTab[]>();\n public readonly zVariant = input<ZTabsVariant>('line');\n public readonly zSize = input<ZTabsSize>('default');\n public readonly zOrientation = input<ZTabsOrientation>('horizontal');\n public readonly zLazy = input(false);\n\n public readonly activeTab = model<string>('');\n public readonly zTabChange = output<string>();\n\n protected readonly loadedTabs = signal<Set<string>>(new Set());\n protected readonly canScrollLeft = signal(false);\n protected readonly canScrollRight = signal(false);\n\n private _resizeObserver?: ResizeObserver;\n\n constructor() {\n effect(() => {\n this.zTabs();\n requestAnimationFrame(() => this.checkScroll());\n });\n }\n\n ngAfterViewInit(): void {\n this.checkScroll();\n this._setupResizeObserver();\n }\n\n ngOnDestroy(): void {\n this._resizeObserver?.disconnect();\n }\n\n protected readonly tabsClasses = computed(() =>\n zMergeClasses(\n zTabsVariants({\n zVariant: this.zVariant(),\n zOrientation: this.zOrientation(),\n }),\n this.class()\n )\n );\n\n protected getTabItemClasses(_tab: ZTab): string {\n return zMergeClasses(\n zTabItemVariants({\n zVariant: this.zVariant(),\n zSize: this.zSize(),\n zOrientation: this.zOrientation(),\n })\n );\n }\n\n protected selectTab(tab: ZTab, scrollToView = false): void {\n if (tab.disabled) {\n return;\n }\n\n this.activeTab.set(tab.value);\n this.zTabChange.emit(tab.value);\n\n if (this.zLazy()) {\n this.loadedTabs.update(tabs => {\n const newTabs = new Set(tabs);\n newTabs.add(tab.value);\n return newTabs;\n });\n }\n\n if (scrollToView && this.zOrientation() === 'horizontal') {\n requestAnimationFrame(() => {\n const tabIndex = this.zTabs().findIndex(t => t.value === tab.value);\n const tabButtonsList = this.tabButtons();\n const tabButton = tabButtonsList[tabIndex];\n if (tabButton) {\n tabButton.nativeElement.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n inline: 'center',\n });\n }\n });\n }\n }\n\n protected isTabActive(tab: ZTab): boolean {\n return this.activeTab() === tab.value;\n }\n\n protected shouldRenderPanel(tabValue: string): boolean {\n if (!this.zLazy()) {\n return true;\n }\n return this.loadedTabs().has(tabValue) || this.activeTab() === tabValue;\n }\n\n protected onTabKeydown(event: KeyboardEvent, currentIndex: number): void {\n const tabs = this.zTabs().filter(t => !t.disabled);\n const currentTab = tabs[currentIndex];\n\n if (!currentTab) {\n return;\n }\n\n const isHorizontal = this.zOrientation() === 'horizontal';\n const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';\n const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';\n\n if (event.key === nextKey) {\n event.preventDefault();\n const nextIndex = (currentIndex + 1) % tabs.length;\n this.selectTab(tabs[nextIndex]);\n return;\n }\n\n if (event.key === prevKey) {\n event.preventDefault();\n const prevIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n this.selectTab(tabs[prevIndex]);\n return;\n }\n\n if (event.key === 'Home') {\n event.preventDefault();\n this.selectTab(tabs[0]);\n return;\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n this.selectTab(tabs[tabs.length - 1]);\n }\n }\n\n protected checkScroll(): void {\n const container = this.tabsListContainer()?.nativeElement;\n if (!container || this.zOrientation() !== 'horizontal') {\n this.canScrollLeft.set(false);\n this.canScrollRight.set(false);\n return;\n }\n\n const { scrollLeft, scrollWidth, clientWidth } = container;\n this.canScrollLeft.set(scrollLeft > 0);\n this.canScrollRight.set(scrollLeft + clientWidth < scrollWidth - 1);\n }\n\n protected scrollLeft(): void {\n const container = this.tabsListContainer()?.nativeElement;\n if (!container) {\n return;\n }\n\n container.scrollBy({ left: -200, behavior: 'smooth' });\n setTimeout(() => this.checkScroll(), 300);\n }\n\n protected scrollRight(): void {\n const container = this.tabsListContainer()?.nativeElement;\n if (!container) {\n return;\n }\n\n container.scrollBy({ left: 200, behavior: 'smooth' });\n setTimeout(() => this.checkScroll(), 300);\n }\n\n protected onTabsScroll(): void {\n this.checkScroll();\n }\n\n private _setupResizeObserver(): void {\n const container = this.tabsListContainer()?.nativeElement;\n if (!container) {\n return;\n }\n\n this._resizeObserver = new ResizeObserver(() => {\n this.checkScroll();\n });\n\n this._resizeObserver.observe(container);\n }\n\n protected scrollToActiveDropdownItem(): void {\n setTimeout(() => {\n const activeIndex = this.zTabs().findIndex(tab => tab.value === this.activeTab());\n if (activeIndex === -1) {\n return;\n }\n\n const dropdownMenu = document.querySelector('.z-tabs-dropdown-menu') as HTMLElement;\n if (!dropdownMenu) {\n return;\n }\n\n const dropdownItems = Array.from(dropdownMenu.querySelectorAll('button'));\n const activeItem = dropdownItems[activeIndex];\n\n if (activeItem && dropdownMenu) {\n const menuRect = dropdownMenu.getBoundingClientRect();\n const itemRect = activeItem.getBoundingClientRect();\n const scrollTop = activeItem.offsetTop - menuRect.height / 2 + itemRect.height / 2;\n\n dropdownMenu.scrollTo({\n top: scrollTop,\n behavior: 'smooth',\n });\n }\n }, 150);\n }\n}\n","<div\n class=\"z-tabs-container flex flex-col gap-4\"\n [class.flex-row]=\"zOrientation() === 'vertical'\"\n [class.gap-4]=\"zOrientation() === 'vertical'\">\n <!-- Tabs Navigation (Left/Scroll/Tabs/Right/Dropdown) -->\n <div class=\"z-tabs-nav flex items-start gap-2\">\n <!-- Scroll Left Button -->\n @if (canScrollLeft() && zOrientation() === 'horizontal') {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n [zWave]=\"false\"\n class=\"shrink-0\"\n (click)=\"scrollLeft()\"\n aria-label=\"Scroll left\">\n <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n </z-button>\n }\n\n <!-- Tabs List Container with Scroll + Fade -->\n <div class=\"z-tabs-scroll-container relative min-w-0 flex-1\">\n <div\n #tabsListContainer\n class=\"z-tabs-scroll-wrapper\"\n [class.vertical]=\"zOrientation() === 'vertical'\"\n (scroll)=\"onTabsScroll()\">\n <!-- Tab List -->\n <div [class]=\"tabsClasses()\" role=\"tablist\" [attr.aria-orientation]=\"zOrientation()\">\n @for (tab of zTabs(); track tab.value; let idx = $index) {\n <button\n #tabButton\n type=\"button\"\n role=\"tab\"\n [class]=\"getTabItemClasses(tab)\"\n [attr.data-active]=\"isTabActive(tab)\"\n [attr.aria-selected]=\"isTabActive(tab)\"\n [attr.aria-controls]=\"'panel-' + tab.value\"\n [disabled]=\"tab.disabled\"\n [tabindex]=\"isTabActive(tab) ? 0 : -1\"\n (click)=\"selectTab(tab)\"\n (keydown)=\"onTabKeydown($event, idx)\">\n @if (tab.icon) {\n <z-icon [zType]=\"tab.icon\" zSize=\"16\" />\n }\n <span>{{ tab.label }}</span>\n @if (tab.badge) {\n <span\n class=\"bg-primary text-primary-foreground ml-1.5 inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold\">\n {{ tab.badge }}\n </span>\n }\n </button>\n }\n </div>\n </div>\n\n <!-- Fade overlays (outside scroll container) -->\n @if (canScrollLeft() && zOrientation() === 'horizontal') {\n <div class=\"z-tabs-fade-left\"></div>\n }\n @if (canScrollRight() && zOrientation() === 'horizontal') {\n <div class=\"z-tabs-fade-right\"></div>\n }\n </div>\n\n <!-- Scroll Right Button -->\n @if (canScrollRight() && zOrientation() === 'horizontal') {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n class=\"shink-0\"\n (click)=\"scrollRight()\"\n [zWave]=\"false\"\n aria-label=\"Scroll right\">\n <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n </z-button>\n }\n\n <!-- Dropdown Button (Mobile or Overflow) -->\n @if (zOrientation() === 'horizontal' && (canScrollLeft() || canScrollRight())) {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n class=\"shink-0\"\n z-popover\n [zPopoverContent]=\"dropdownTpl\"\n zPosition=\"bottom-right\"\n [zWave]=\"false\"\n zClass=\"min-w-[100px] max-w-[200px]\"\n (zShow)=\"scrollToActiveDropdownItem()\"\n aria-label=\"Select tab\">\n <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n </z-button>\n }\n </div>\n\n <!-- Tab Panels -->\n <div class=\"z-tabs-panels min-h-0\" [class.mt-2]=\"zOrientation() === 'horizontal'\">\n @for (panel of tabPanels(); track panel.zTabPanel()) {\n @if (shouldRenderPanel(panel.zTabPanel())) {\n <div\n role=\"tabpanel\"\n [id]=\"'panel-' + panel.zTabPanel()\"\n [attr.aria-labelledby]=\"panel.zTabPanel()\"\n [hidden]=\"activeTab() !== panel.zTabPanel()\">\n <ng-container *ngTemplateOutlet=\"panel.template\" />\n </div>\n }\n }\n </div>\n</div>\n\n<!-- Dropdown Menu Template -->\n<ng-template #dropdownTpl let-close=\"close\">\n <div class=\"z-tabs-dropdown-menu flex max-h-[300px] max-w-[200px] min-w-[100px] flex-col gap-0.5 overflow-y-auto p-1\">\n @for (tab of zTabs(); track tab.value) {\n <button\n #dropdownItem\n type=\"button\"\n class=\"flex w-full cursor-pointer items-center justify-start gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors outline-none disabled:pointer-events-none disabled:opacity-50\"\n [class.hover:bg-primary/10]=\"!isTabActive(tab)\"\n [class.hover:text-foreground]=\"!isTabActive(tab)\"\n [class.focus:bg-primary/10]=\"!isTabActive(tab)\"\n [class.bg-primary/15]=\"isTabActive(tab)\"\n [class.text-primary]=\"isTabActive(tab)\"\n [class.font-medium]=\"isTabActive(tab)\"\n [disabled]=\"tab.disabled\"\n (click)=\"selectTab(tab, true); close()\">\n @if (tab.icon) {\n <z-icon [zType]=\"tab.icon\" zSize=\"16\" class=\"text-muted-foreground shink-0\" />\n }\n <span\n class=\"min-w-0 flex-1 truncate\"\n z-tooltip\n [zContent]=\"tab.label\"\n zPosition=\"top\"\n [zHideDelay]=\"0\"\n [zOffset]=\"5\"\n [zArrow]=\"false\"\n [zTriggerElement]=\"dropdownItem\">\n {{ tab.label }}\n </span>\n @if (tab.badge) {\n <span\n class=\"bg-primary text-primary-foreground inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold\">\n {{ tab.badge }}\n </span>\n }\n @if (isTabActive(tab)) {\n <z-icon zType=\"lucideCheck\" zSize=\"16\" class=\"text-primary shink-0\" />\n }\n </button>\n }\n </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"shival99-z-ui-components-z-tabs.mjs","sources":["../../../../libs/core-ui/components/z-tabs/directives/z-tab-panel.directive.ts","../../../../libs/core-ui/components/z-tabs/z-tabs.variants.ts","../../../../libs/core-ui/components/z-tabs/z-tabs.component.ts","../../../../libs/core-ui/components/z-tabs/z-tabs.component.html","../../../../libs/core-ui/components/z-tabs/shival99-z-ui-components-z-tabs.ts"],"sourcesContent":["import { Directive, inject, input, TemplateRef } from '@angular/core';\n\n@Directive({\n selector: '[z-tab-panel], [zTabPanel]',\n standalone: true,\n exportAs: 'zTabPanel',\n})\nexport class ZTabPanelDirective {\n public readonly zTabPanel = input.required<string>();\n public readonly template = inject(TemplateRef<unknown>);\n}\n","import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const zTabsVariants = cva('z-tabs flex', {\n variants: {\n zVariant: {\n line: 'border-b',\n enclosed: '',\n soft: 'bg-muted/30 rounded-lg p-1',\n pill: 'gap-2',\n solid: 'gap-1',\n underline: 'gap-2 border-b',\n },\n zOrientation: {\n horizontal: 'flex-row',\n vertical: 'flex-col border-r border-b-0',\n },\n },\n defaultVariants: {\n zVariant: 'line',\n zOrientation: 'horizontal',\n },\n});\n\nexport const zTabItemVariants = cva(\n 'z-tab-item relative inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-[border-color,background-color,color,box-shadow] duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed',\n {\n variants: {\n zVariant: {\n line: 'border-b-2 border-transparent hover:text-foreground data-[active=true]:border-primary data-[active=true]:text-primary',\n enclosed:\n 'border border-transparent rounded-t-md hover:border-border data-[active=true]:border-border data-[active=true]:border-b-background data-[active=true]:bg-background',\n soft: 'rounded-md hover:bg-muted data-[active=true]:bg-background data-[active=true]:shadow-sm',\n pill: 'rounded-full hover:bg-muted data-[active=true]:bg-primary data-[active=true]:text-primary-foreground',\n solid:\n 'rounded-md border border-transparent hover:border-border data-[active=true]:bg-primary data-[active=true]:text-primary-foreground data-[active=true]:border-primary',\n underline:\n 'border-b-2 border-transparent hover:text-foreground data-[active=true]:border-primary data-[active=true]:text-primary data-[active=true]:font-semibold',\n },\n zSize: {\n sm: 'px-3 py-1.5 text-sm',\n default: 'px-4 py-2 text-sm',\n lg: 'px-5 py-2.5 text-base',\n },\n zOrientation: {\n horizontal: '',\n vertical: 'w-full justify-start',\n },\n },\n defaultVariants: {\n zVariant: 'line',\n zSize: 'default',\n zOrientation: 'horizontal',\n },\n }\n);\n\nexport type ZTabsVariants = VariantProps<typeof zTabsVariants>;\nexport type ZTabItemVariants = VariantProps<typeof zTabItemVariants>;\n","import { NgTemplateOutlet } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChildren,\n effect,\n ElementRef,\n input,\n model,\n output,\n signal,\n viewChild,\n viewChildren,\n ViewEncapsulation,\n OnDestroy,\n} from '@angular/core';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { ZButtonComponent } from '@shival99/z-ui/components/z-button';\nimport { ZIconComponent } from '@shival99/z-ui/components/z-icon';\nimport { ZPopoverDirective } from '@shival99/z-ui/components/z-popover';\nimport { ZTooltipDirective } from '@shival99/z-ui/components/z-tooltip';\nimport { zMergeClasses } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport { ZTabPanelDirective } from './directives/z-tab-panel.directive';\nimport type { ZTab, ZTabsVariant, ZTabsSize, ZTabsOrientation } from './z-tabs.types';\nimport { zTabsVariants, zTabItemVariants } from './z-tabs.variants';\n\n@Component({\n selector: 'z-tabs',\n imports: [ZIconComponent, ZButtonComponent, ZTooltipDirective, NgTemplateOutlet, ZPopoverDirective, TranslatePipe],\n standalone: true,\n templateUrl: './z-tabs.component.html',\n styleUrl: './z-tabs.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n class: 'z-tabs-wrapper block',\n },\n})\nexport class ZTabsComponent implements AfterViewInit, OnDestroy {\n public readonly tabPanels = contentChildren(ZTabPanelDirective);\n public readonly tabsListContainer = viewChild<ElementRef<HTMLDivElement>>('tabsListContainer');\n public readonly tabButtons = viewChildren<ElementRef<HTMLButtonElement>>('tabButton');\n\n public readonly class = input<ClassValue>('');\n public readonly zTabs = input.required<ZTab[]>();\n public readonly zVariant = input<ZTabsVariant>('line');\n public readonly zSize = input<ZTabsSize>('default');\n public readonly zOrientation = input<ZTabsOrientation>('horizontal');\n public readonly zLazy = input(false);\n\n public readonly activeTab = model<string>('');\n public readonly zTabChange = output<string>();\n\n protected readonly loadedTabs = signal<Set<string>>(new Set());\n protected readonly canScrollLeft = signal(false);\n protected readonly canScrollRight = signal(false);\n\n private _resizeObserver?: ResizeObserver;\n\n constructor() {\n effect(() => {\n this.zTabs();\n requestAnimationFrame(() => this.checkScroll());\n });\n }\n\n ngAfterViewInit(): void {\n this.checkScroll();\n this._setupResizeObserver();\n }\n\n ngOnDestroy(): void {\n this._resizeObserver?.disconnect();\n }\n\n protected readonly tabsClasses = computed(() =>\n zMergeClasses(\n zTabsVariants({\n zVariant: this.zVariant(),\n zOrientation: this.zOrientation(),\n }),\n this.class()\n )\n );\n\n protected getTabItemClasses(_tab: ZTab): string {\n return zMergeClasses(\n zTabItemVariants({\n zVariant: this.zVariant(),\n zSize: this.zSize(),\n zOrientation: this.zOrientation(),\n })\n );\n }\n\n protected selectTab(tab: ZTab, scrollToView = false): void {\n if (tab.disabled) {\n return;\n }\n\n this.activeTab.set(tab.value);\n this.zTabChange.emit(tab.value);\n\n if (this.zLazy()) {\n this.loadedTabs.update(tabs => {\n const newTabs = new Set(tabs);\n newTabs.add(tab.value);\n return newTabs;\n });\n }\n\n if (scrollToView && this.zOrientation() === 'horizontal') {\n requestAnimationFrame(() => {\n const tabIndex = this.zTabs().findIndex(t => t.value === tab.value);\n const tabButtonsList = this.tabButtons();\n const tabButton = tabButtonsList[tabIndex];\n if (tabButton) {\n tabButton.nativeElement.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n inline: 'center',\n });\n }\n });\n }\n }\n\n protected isTabActive(tab: ZTab): boolean {\n return this.activeTab() === tab.value;\n }\n\n protected shouldRenderPanel(tabValue: string): boolean {\n if (!this.zLazy()) {\n return true;\n }\n return this.loadedTabs().has(tabValue) || this.activeTab() === tabValue;\n }\n\n protected onTabKeydown(event: KeyboardEvent, currentIndex: number): void {\n const tabs = this.zTabs().filter(t => !t.disabled);\n const currentTab = tabs[currentIndex];\n\n if (!currentTab) {\n return;\n }\n\n const isHorizontal = this.zOrientation() === 'horizontal';\n const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';\n const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';\n\n if (event.key === nextKey) {\n event.preventDefault();\n const nextIndex = (currentIndex + 1) % tabs.length;\n this.selectTab(tabs[nextIndex]);\n return;\n }\n\n if (event.key === prevKey) {\n event.preventDefault();\n const prevIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n this.selectTab(tabs[prevIndex]);\n return;\n }\n\n if (event.key === 'Home') {\n event.preventDefault();\n this.selectTab(tabs[0]);\n return;\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n this.selectTab(tabs[tabs.length - 1]);\n }\n }\n\n protected checkScroll(): void {\n const container = this.tabsListContainer()?.nativeElement;\n if (!container || this.zOrientation() !== 'horizontal') {\n this.canScrollLeft.set(false);\n this.canScrollRight.set(false);\n return;\n }\n\n const { scrollLeft, scrollWidth, clientWidth } = container;\n this.canScrollLeft.set(scrollLeft > 0);\n this.canScrollRight.set(scrollLeft + clientWidth < scrollWidth - 1);\n }\n\n protected scrollLeft(): void {\n const container = this.tabsListContainer()?.nativeElement;\n if (!container) {\n return;\n }\n\n container.scrollBy({ left: -200, behavior: 'smooth' });\n setTimeout(() => this.checkScroll(), 300);\n }\n\n protected scrollRight(): void {\n const container = this.tabsListContainer()?.nativeElement;\n if (!container) {\n return;\n }\n\n container.scrollBy({ left: 200, behavior: 'smooth' });\n setTimeout(() => this.checkScroll(), 300);\n }\n\n protected onTabsScroll(): void {\n this.checkScroll();\n }\n\n private _setupResizeObserver(): void {\n const container = this.tabsListContainer()?.nativeElement;\n if (!container) {\n return;\n }\n\n this._resizeObserver = new ResizeObserver(() => {\n this.checkScroll();\n });\n\n this._resizeObserver.observe(container);\n }\n\n protected scrollToActiveDropdownItem(): void {\n setTimeout(() => {\n const activeIndex = this.zTabs().findIndex(tab => tab.value === this.activeTab());\n if (activeIndex === -1) {\n return;\n }\n\n const dropdownMenu = document.querySelector('.z-tabs-dropdown-menu') as HTMLElement;\n if (!dropdownMenu) {\n return;\n }\n\n const dropdownItems = Array.from(dropdownMenu.querySelectorAll('button'));\n const activeItem = dropdownItems[activeIndex];\n\n if (activeItem && dropdownMenu) {\n const menuRect = dropdownMenu.getBoundingClientRect();\n const itemRect = activeItem.getBoundingClientRect();\n const scrollTop = activeItem.offsetTop - menuRect.height / 2 + itemRect.height / 2;\n\n dropdownMenu.scrollTo({\n top: scrollTop,\n behavior: 'smooth',\n });\n }\n }, 150);\n }\n}\n","<div\n class=\"z-tabs-container flex flex-col gap-4\"\n [class.flex-row]=\"zOrientation() === 'vertical'\"\n [class.gap-4]=\"zOrientation() === 'vertical'\">\n <!-- Tabs Navigation (Left/Scroll/Tabs/Right/Dropdown) -->\n <div class=\"z-tabs-nav flex items-start gap-2\">\n <!-- Scroll Left Button -->\n @if (canScrollLeft() && zOrientation() === 'horizontal') {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n [zWave]=\"false\"\n class=\"shrink-0\"\n (click)=\"scrollLeft()\"\n aria-label=\"Scroll left\">\n <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n </z-button>\n }\n\n <!-- Tabs List Container with Scroll + Fade -->\n <div class=\"z-tabs-scroll-container relative min-w-0 flex-1\">\n <div\n #tabsListContainer\n class=\"z-tabs-scroll-wrapper\"\n [class.vertical]=\"zOrientation() === 'vertical'\"\n (scroll)=\"onTabsScroll()\">\n <!-- Tab List -->\n <div [class]=\"tabsClasses()\" role=\"tablist\" [attr.aria-orientation]=\"zOrientation()\">\n @for (tab of zTabs(); track tab.value; let idx = $index) {\n <button\n #tabButton\n type=\"button\"\n role=\"tab\"\n [class]=\"getTabItemClasses(tab)\"\n [attr.data-active]=\"isTabActive(tab)\"\n [attr.aria-selected]=\"isTabActive(tab)\"\n [attr.aria-controls]=\"'panel-' + tab.value\"\n [disabled]=\"tab.disabled\"\n [tabindex]=\"isTabActive(tab) ? 0 : -1\"\n (click)=\"selectTab(tab)\"\n (keydown)=\"onTabKeydown($event, idx)\">\n @if (tab.icon) {\n <z-icon [zType]=\"tab.icon\" zSize=\"16\" />\n }\n <span>{{ tab.label | translate }}</span>\n @if (tab.badge) {\n <span\n class=\"bg-primary text-primary-foreground ml-1.5 inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold\">\n {{ tab.badge }}\n </span>\n }\n </button>\n }\n </div>\n </div>\n\n <!-- Fade overlays (outside scroll container) -->\n @if (canScrollLeft() && zOrientation() === 'horizontal') {\n <div class=\"z-tabs-fade-left\"></div>\n }\n @if (canScrollRight() && zOrientation() === 'horizontal') {\n <div class=\"z-tabs-fade-right\"></div>\n }\n </div>\n\n <!-- Scroll Right Button -->\n @if (canScrollRight() && zOrientation() === 'horizontal') {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n class=\"shink-0\"\n (click)=\"scrollRight()\"\n [zWave]=\"false\"\n aria-label=\"Scroll right\">\n <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n </z-button>\n }\n\n <!-- Dropdown Button (Mobile or Overflow) -->\n @if (zOrientation() === 'horizontal' && (canScrollLeft() || canScrollRight())) {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n class=\"shink-0\"\n z-popover\n [zPopoverContent]=\"dropdownTpl\"\n zPosition=\"bottom-right\"\n [zWave]=\"false\"\n zClass=\"min-w-[100px] max-w-[200px]\"\n (zShow)=\"scrollToActiveDropdownItem()\"\n aria-label=\"Select tab\">\n <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n </z-button>\n }\n </div>\n\n <!-- Tab Panels -->\n <div class=\"z-tabs-panels min-h-0\" [class.mt-2]=\"zOrientation() === 'horizontal'\">\n @for (panel of tabPanels(); track panel.zTabPanel()) {\n @if (shouldRenderPanel(panel.zTabPanel())) {\n <div\n role=\"tabpanel\"\n [id]=\"'panel-' + panel.zTabPanel()\"\n [attr.aria-labelledby]=\"panel.zTabPanel()\"\n [hidden]=\"activeTab() !== panel.zTabPanel()\">\n <ng-container *ngTemplateOutlet=\"panel.template\" />\n </div>\n }\n }\n </div>\n</div>\n\n<!-- Dropdown Menu Template -->\n<ng-template #dropdownTpl let-close=\"close\">\n <div class=\"z-tabs-dropdown-menu flex max-h-[300px] max-w-[200px] min-w-[100px] flex-col gap-0.5 overflow-y-auto p-1\">\n @for (tab of zTabs(); track tab.value) {\n <button\n #dropdownItem\n type=\"button\"\n class=\"flex w-full cursor-pointer items-center justify-start gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors outline-none disabled:pointer-events-none disabled:opacity-50\"\n [class.hover:bg-primary/10]=\"!isTabActive(tab)\"\n [class.hover:text-foreground]=\"!isTabActive(tab)\"\n [class.focus:bg-primary/10]=\"!isTabActive(tab)\"\n [class.bg-primary/15]=\"isTabActive(tab)\"\n [class.text-primary]=\"isTabActive(tab)\"\n [class.font-medium]=\"isTabActive(tab)\"\n [disabled]=\"tab.disabled\"\n (click)=\"selectTab(tab, true); close()\">\n @if (tab.icon) {\n <z-icon [zType]=\"tab.icon\" zSize=\"16\" class=\"text-muted-foreground shink-0\" />\n }\n <span\n class=\"min-w-0 flex-1 truncate\"\n z-tooltip\n [zContent]=\"tab.label | translate\"\n zPosition=\"top\"\n [zHideDelay]=\"0\"\n [zOffset]=\"5\"\n [zArrow]=\"false\"\n [zTriggerElement]=\"dropdownItem\">\n {{ tab.label | translate }}\n </span>\n @if (tab.badge) {\n <span\n class=\"bg-primary text-primary-foreground inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold\">\n {{ tab.badge }}\n </span>\n }\n @if (isTabActive(tab)) {\n <z-icon zType=\"lucideCheck\" zSize=\"16\" class=\"text-primary shink-0\" />\n }\n </button>\n }\n </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@shival99/z-ui",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.31",
|
|
4
4
|
"description": "Z-UI: Modern Angular UI Component Library - A comprehensive, high-performance design system built with Angular 20+, featuring 40+ customizable components with dark mode, accessibility, and enterprise-ready features.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|