@shival99/z-ui 1.0.13 → 1.0.15

package/fesm2022/shival99-z-ui-components-z-icon.mjs

@@ -4,7 +4,7 @@ import { NgIconComponent, provideNgIconLoader, withCaching } from '@ng-icons/cor
 import { zMergeClasses } from '@shival99/z-ui/utils';
 import { cva } from 'class-variance-authority';
 import { saxRefreshBold, saxCloudChangeBold, saxPauseBold } from '@ng-icons/iconsax/bold';
-import { lucideType, lucideBuilding, lucideBan, lucideFunnelX, lucideFilter, lucideAlertTriangle, lucideGitBranch, lucideMoreVertical, lucideSearchX, lucidePin, lucideGripVertical, lucideTable2, lucideFileArchive, lucideFileJson, lucideFileCode, lucideMusic, lucideFile, lucideDownload, lucideUploadCloud, lucideUpload, lucideToggleLeft, lucideCircleDot, lucideSquareCheck, lucideSparkles, lucideFolders, lucideUserSearch, lucidePieChart, lucideTextCursor, lucideListFilter, lucideNavigation, lucideFileEdit, lucideSliders, lucideCheckCircle, lucideFolderTree, lucideGrid3x3, lucideUsers2, lucideBarChart3, lucideRocket, lucideSquare, lucidePenTool, lucideMegaphone, lucideHash, lucideList, lucideImage, lucideGripHorizontal, lucideCircleHelp, lucideFileOutput, lucideLayoutTemplate, lucideSquarePen, lucideFolderOpen, lucideHome, lucideBarChart, lucideCloud, lucideLifeBuoy, lucideGithub, lucideLoader2, lucidePanelRightOpen, lucideComponent, lucideMessageCircleQuestion, lucideCircleAlert, lucideMessageCircle, lucideAlertOctagon, lucideLoader, lucideMoon, lucideSun, lucideListChevronsUpDown, lucideListChevronsDownUp, lucideFileCheck, lucideDatabaseBackup, lucideLink, lucideXCircle, lucideAlertCircle, lucideCheckCircle2, lucideBell, lucideChartColumnIncreasing, lucideBrushCleaning, lucideFastForward, lucideListChecks, lucideRefreshCwOff, lucideFileClock, lucideBookUp2, lucideFilePlus2, lucideFilePlus, lucideListPlus, lucideScanLine, lucideQrCode, lucideScanQrCode, lucideCode, lucideBarcode, lucideHardDriveDownload, lucideMailPlus, lucideCloudCheck, lucideWifiZero, lucideFileSymlink, lucideLockKeyholeOpen, lucideBadgeX, lucideCircleCheckBig, lucideShieldCheck, lucideBadgeCheck, lucideCheckLine, lucideCircleX, lucideArrowDownUp, lucideFilePenLine, lucideUserRoundPen, lucideCopy, lucidePaperclip, lucidePause, lucideSend, lucideBot, lucideTableOfContents, lucideFileUp, lucideNotepadText, lucideCalendarCheck, lucideCalendar1, lucideCalendarRange, lucideChartLine, lucideChartPie, lucideChartBar, lucideHouse, lucideCircleCheck, lucideUserLock, lucideArrowUp, lucideArrowDown, lucideLockKeyhole, lucideRefreshCcw, lucideWifi, lucideTruck, lucideTerminal, lucideTablet, lucideSmartphone, lucideServer, lucideRadio, lucidePrinter, lucidePhoneCall, lucidePalette, lucideNetwork, lucideMailCheck, lucideLightbulb, lucideKey, lucideHeadphones, lucideGlobe, lucideFileSpreadsheet, lucideCreditCard, lucideCar, lucideBuilding2, lucideWrench, lucideWallet, lucideVideo, lucideUserPlus, lucideTrendingDown, lucideTimer, lucideStethoscope, lucideStar, lucideShield, lucidePhone, lucideMonitor, lucideMapPin, lucideHospital, lucideHeart, lucideGraduationCap, lucideFileText, lucideDollarSign, lucideDatabase, lucideClipboardList, lucideCalculator, lucideCalendar, lucideBookOpen, lucideClock, lucideInbox, lucidePackageOpen, lucideBellMinus, lucideCog, lucideBox, lucideMinus, lucideBadgeInfo, lucideCrown, lucideFiles, lucideX, lucideAlignJustify, lucideFunnel, lucideFileDown, lucideTrash2, lucideSlidersHorizontal, lucideBellRing, lucideChevronsRight, lucideChevronsLeft, lucideLoaderCircle, lucideWarehouse, lucideWorkflow, lucideTarget, lucideBriefcase, lucideLayers, lucideInfo, lucideMousePointer, lucideZap, lucideActivity, lucideUserCheck, lucideShoppingCart, lucidePackage, lucideTrendingUp, lucideChevronUp, lucideLogs, lucideUsersRound, lucideChartColumn, lucideLayoutDashboard, lucidePanelLeftOpen, lucidePanelLeftClose, lucideEllipsis, lucideEyeOff, lucideEye, lucideUsers, lucideSearch, lucidePlus, lucideChevronDown, lucideChevronRight, lucideChevronLeft, lucideSettings2, lucideCalendarFold, lucidePill, lucideSettings, lucideUser, lucideLogOut, lucideLock, lucideMenu, lucideArrowRight, lucideArrowLeft, lucideLayoutGrid, lucideMail, lucidePencil, lucideCheck, lucideMessageSquareWarning, lucideTriangleAlert, lucideCheckCheck, lucideMessageSquareDot, lucideFlagTriangleRight, lucideFlag, lucideSaveAll, lucideSave, lucideClipboardPlus, lucideAlarmClock, lucideBookCheck, lucideChartBarStacked, lucideStore, lucideLayers2 } from '@ng-icons/lucide';
+import { lucideRecycle, lucideIdCard, lucideContact, lucideClipboardCopy, lucideBadge, lucideZoomOut, lucideZoomIn, lucideWand2, lucideTicket, lucideTags, lucideTag, lucideShoppingBag, lucidePackageCheck, lucideClipboardPen, lucideReceipt, lucidePercent, lucideType, lucideBuilding, lucideBan, lucideFunnelX, lucideFilter, lucideAlertTriangle, lucideGitBranch, lucideMoreVertical, lucideSearchX, lucidePin, lucideGripVertical, lucideTable2, lucideFileArchive, lucideFileJson, lucideFileCode, lucideMusic, lucideFile, lucideDownload, lucideUploadCloud, lucideUpload, lucideToggleLeft, lucideCircleDot, lucideSquareCheck, lucideSparkles, lucideFolders, lucideUserSearch, lucidePieChart, lucideTextCursor, lucideListFilter, lucideNavigation, lucideFileEdit, lucideSliders, lucideCheckCircle, lucideFolderTree, lucideGrid3x3, lucideUsers2, lucideBarChart3, lucideRocket, lucideSquare, lucidePenTool, lucideMegaphone, lucideHash, lucideList, lucideImage, lucideGripHorizontal, lucideCircleHelp, lucideFileOutput, lucideLayoutTemplate, lucideSquarePen, lucideFolderOpen, lucideHome, lucideBarChart, lucideCloud, lucideLifeBuoy, lucideGithub, lucideLoader2, lucidePanelRightOpen, lucideComponent, lucideMessageCircleQuestion, lucideCircleAlert, lucideMessageCircle, lucideAlertOctagon, lucideLoader, lucideMoon, lucideSun, lucideListChevronsUpDown, lucideListChevronsDownUp, lucideFileCheck, lucideDatabaseBackup, lucideLink, lucideXCircle, lucideAlertCircle, lucideCheckCircle2, lucideBell, lucideChartColumnIncreasing, lucideBrushCleaning, lucideFastForward, lucideListChecks, lucideRefreshCwOff, lucideFileClock, lucideBookUp2, lucideFilePlus2, lucideFilePlus, lucideListPlus, lucideScanLine, lucideQrCode, lucideScanQrCode, lucideCode, lucideBarcode, lucideHardDriveDownload, lucideMailPlus, lucideCloudCheck, lucideWifiZero, lucideFileSymlink, lucideLockKeyholeOpen, lucideBadgeX, lucideCircleCheckBig, lucideShieldCheck, lucideBadgeCheck, lucideCheckLine, lucideCircleX, lucideArrowDownUp, lucideFilePenLine, lucideUserRoundPen, lucideCopy, lucidePaperclip, lucidePause, lucideSend, lucideBot, lucideTableOfContents, lucideFileUp, lucideNotepadText, lucideCalendarCheck, lucideCalendar1, lucideCalendarRange, lucideChartLine, lucideChartPie, lucideChartBar, lucideHouse, lucideCircleCheck, lucideUserLock, lucideArrowUp, lucideArrowDown, lucideLockKeyhole, lucideRefreshCcw, lucideWifi, lucideTruck, lucideTerminal, lucideTablet, lucideSmartphone, lucideServer, lucideRadio, lucidePrinter, lucidePhoneCall, lucidePalette, lucideNetwork, lucideMailCheck, lucideLightbulb, lucideKey, lucideHeadphones, lucideGlobe, lucideFileSpreadsheet, lucideCreditCard, lucideCar, lucideBuilding2, lucideWrench, lucideWallet, lucideVideo, lucideUserPlus, lucideTrendingDown, lucideTimer, lucideStethoscope, lucideStar, lucideShield, lucidePhone, lucideMonitor, lucideMapPin, lucideHospital, lucideHeart, lucideGraduationCap, lucideFileText, lucideDollarSign, lucideDatabase, lucideClipboardList, lucideCalculator, lucideCalendar, lucideBookOpen, lucideClock, lucideInbox, lucidePackageOpen, lucideBellMinus, lucideCog, lucideBox, lucideMinus, lucideBadgeInfo, lucideCrown, lucideFiles, lucideX, lucideAlignJustify, lucideFunnel, lucideFileDown, lucideTrash2, lucideSlidersHorizontal, lucideBellRing, lucideChevronsRight, lucideChevronsLeft, lucideLoaderCircle, lucideWarehouse, lucideWorkflow, lucideTarget, lucideBriefcase, lucideLayers, lucideInfo, lucideMousePointer, lucideZap, lucideActivity, lucideUserCheck, lucideShoppingCart, lucidePackage, lucideTrendingUp, lucideChevronUp, lucideLogs, lucideUsersRound, lucideChartColumn, lucideLayoutDashboard, lucidePanelLeftOpen, lucidePanelLeftClose, lucideEllipsis, lucideEyeOff, lucideEye, lucideUsers, lucideSearch, lucidePlus, lucideChevronDown, lucideChevronRight, lucideChevronLeft, lucideSettings2, lucideCalendarFold, lucidePill, lucideSettings, lucideUser, lucideLogOut, lucideLock, lucideMenu, lucideArrowRight, lucideArrowLeft, lucideLayoutGrid, lucideMail, lucidePencil, lucideCheck, lucideMessageSquareWarning, lucideTriangleAlert, lucideCheckCheck, lucideMessageSquareDot, lucideFlagTriangleRight, lucideFlag, lucideSaveAll, lucideSave, lucideClipboardPlus, lucideAlarmClock, lucideBookCheck, lucideChartBarStacked, lucideStore, lucideLayers2 } from '@ng-icons/lucide';
 import { HttpClient } from '@angular/common/http';
 import { of, map, catchError } from 'rxjs';
 
@@ -316,6 +316,22 @@ const Z_ICONS = {
     lucideBan,
     lucideBuilding,
     lucideType,
+    lucidePercent,
+    lucideReceipt,
+    lucideClipboardPen,
+    lucidePackageCheck,
+    lucideShoppingBag,
+    lucideTag,
+    lucideTags,
+    lucideTicket,
+    lucideWand2,
+    lucideZoomIn,
+    lucideZoomOut,
+    lucideBadge,
+    lucideClipboardCopy,
+    lucideContact,
+    lucideIdCard,
+    lucideRecycle,
 };
 
 /**

package/fesm2022/shival99-z-ui-components-z-icon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"shival99-z-ui-components-z-icon.mjs","sources":["../../../../libs/core-ui/components/z-icon/z-icon.variants.ts","../../../../libs/core-ui/components/z-icon/z-icon.component.ts","../../../../libs/core-ui/components/z-icon/z-icon.component.html","../../../../libs/core-ui/components/z-icon/z-icons.ts","../../../../libs/core-ui/components/z-icon/z-icon-loader.provider.ts","../../../../libs/core-ui/components/z-icon/shival99-z-ui-components-z-icon.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const zIconVariants = cva('', {\n  variants: {\n    zSize: {\n      '10': 'size-10',\n      '11': 'size-11',\n      '12': 'size-12',\n      '13': 'size-13',\n      '14': 'size-14',\n      '15': 'size-15',\n      '16': 'size-16',\n      '17': 'size-17',\n      '18': 'size-18',\n      '19': 'size-19',\n      '20': 'size-20',\n      '21': 'size-21',\n      '22': 'size-22',\n      '23': 'size-23',\n      '24': 'size-24',\n      '25': 'size-25',\n      '26': 'size-26',\n      '27': 'size-27',\n      '28': 'size-28',\n      '29': 'size-29',\n      '30': 'size-30',\n      '31': 'size-31',\n      '32': 'size-32',\n      '33': 'size-33',\n      '34': 'size-34',\n      '35': 'size-35',\n      '36': 'size-36',\n      '37': 'size-37',\n      '38': 'size-38',\n      '39': 'size-39',\n      '40': 'size-40',\n    },\n  },\n  defaultVariants: {\n    zSize: '16',\n  },\n});\n\nexport type ZIconVariants = VariantProps<typeof zIconVariants>;\n","import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';\nimport { NgIconComponent as NgIcon } from '@ng-icons/core';\nimport { zMergeClasses } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport { zIconVariants, ZIconVariants } from './z-icon.variants';\nimport { type ZIcon } from './z-icons';\n\n@Component({\n  selector: 'z-icon, [z-icon]',\n  imports: [NgIcon],\n  standalone: true,\n  templateUrl: './z-icon.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'zClasses()',\n    '[style.width]': 'zSize() + \"px\"',\n    '[style.height]': 'zSize() + \"px\"',\n  },\n})\nexport class ZIconComponent {\n  public readonly class = input<ClassValue>('');\n  public readonly zType = input<ZIcon>();\n  public readonly zSize = input<ZIconVariants['zSize']>('16');\n  public readonly zStrokeWidth = input<number>(2);\n  public readonly zSvg = input<string>('');\n\n  protected readonly zClasses = computed(() =>\n    zMergeClasses(\n      zIconVariants({ zSize: this.zSize() }),\n      this.class(),\n      this.zStrokeWidth() === 0 ? 'stroke-none' : '',\n      'inline-flex shrink-0'\n    )\n  );\n}\n","@if (zSvg()) {\n  <ng-icon [svg]=\"zSvg()\" [size]=\"zSize() || '16'\" [strokeWidth]=\"zStrokeWidth()\" />\n} @else {\n  <ng-icon [name]=\"zType()\" [size]=\"zSize() || '16'\" [strokeWidth]=\"zStrokeWidth()\" />\n}\n","import { type IconType } from '@ng-icons/core';\nimport { saxCloudChangeBold, saxPauseBold, saxRefreshBold } from '@ng-icons/iconsax/bold';\nimport {\n  lucideMoreVertical,\n  lucideSearchX,\n  lucidePin,\n  lucideGripVertical,\n  lucideSparkles,\n  lucideList,\n  lucideHash,\n  lucideImage,\n  lucideGripHorizontal,\n  lucideHome,\n  lucideFolderOpen,\n  lucideGithub,\n  lucideLifeBuoy,\n  lucideCloud,\n  lucideActivity,\n  lucideAlarmClock,\n  lucideAlertCircle,\n  lucideAlertOctagon,\n  lucideAlignJustify,\n  lucideArrowDown,\n  lucideArrowDownUp,\n  lucideArrowLeft,\n  lucideArrowRight,\n  lucideArrowUp,\n  lucideBadgeCheck,\n  lucideBadgeInfo,\n  lucideBadgeX,\n  lucideBarcode,\n  lucideBell,\n  lucideBellMinus,\n  lucideBellRing,\n  lucideBookCheck,\n  lucideBookOpen,\n  lucideBookUp2,\n  lucideBot,\n  lucideBox,\n  lucideBriefcase,\n  lucideBrushCleaning,\n  lucideBuilding2,\n  lucideCalculator,\n  lucideCalendar,\n  lucideCalendar1,\n  lucideCalendarCheck,\n  lucideCalendarFold,\n  lucideCalendarRange,\n  lucideCar,\n  lucideChartBar,\n  lucideChartBarStacked,\n  lucideChartColumn,\n  lucideChartColumnIncreasing,\n  lucideChartLine,\n  lucideChartPie,\n  lucideCheck,\n  lucideCheckCheck,\n  lucideCheckCircle2,\n  lucideCheckLine,\n  lucideChevronDown,\n  lucideChevronLeft,\n  lucideChevronRight,\n  lucideChevronsLeft,\n  lucideChevronsRight,\n  lucideChevronUp,\n  lucideCircleAlert,\n  lucideCircleCheck,\n  lucideCircleCheckBig,\n  lucideCircleX,\n  lucideClipboardList,\n  lucideClipboardPlus,\n  lucideClock,\n  lucideCloudCheck,\n  lucideCode,\n  lucideCog,\n  lucideComponent,\n  lucideCopy,\n  lucideCreditCard,\n  lucideCrown,\n  lucideDatabase,\n  lucideDatabaseBackup,\n  lucideDollarSign,\n  lucideEllipsis,\n  lucideEye,\n  lucideEyeOff,\n  lucideFastForward,\n  lucideFileCheck,\n  lucideFileClock,\n  lucideFileDown,\n  lucideFilePenLine,\n  lucideFilePlus,\n  lucideFilePlus2,\n  lucideFiles,\n  lucideFileSpreadsheet,\n  lucideFileSymlink,\n  lucideFileText,\n  lucideFileUp,\n  lucideFlag,\n  lucideFlagTriangleRight,\n  lucideFilter,\n  lucideFunnel,\n  lucideFunnelX,\n  lucideGlobe,\n  lucideGraduationCap,\n  lucideHardDriveDownload,\n  lucideHeadphones,\n  lucideHeart,\n  lucideHospital,\n  lucideHouse,\n  lucideInbox,\n  lucideInfo,\n  lucideKey,\n  lucideLayers,\n  lucideLayers2,\n  lucideLayoutDashboard,\n  lucideLayoutGrid,\n  lucideLightbulb,\n  lucideLink,\n  lucideListChecks,\n  lucideListChevronsDownUp,\n  lucideListChevronsUpDown,\n  lucideListPlus,\n  lucideLoader,\n  lucideLoader2,\n  lucideLoaderCircle,\n  lucideLock,\n  lucideLockKeyhole,\n  lucideLockKeyholeOpen,\n  lucideLogOut,\n  lucideLogs,\n  lucideMail,\n  lucideMailCheck,\n  lucideMailPlus,\n  lucideMapPin,\n  lucideMenu,\n  lucideMessageCircle,\n  lucideMessageCircleQuestion,\n  lucideMessageSquareDot,\n  lucideMessageSquareWarning,\n  lucideMinus,\n  lucideMonitor,\n  lucideMoon,\n  lucideMousePointer,\n  lucideNetwork,\n  lucideNotepadText,\n  lucidePackage,\n  lucidePackageOpen,\n  lucidePalette,\n  lucidePanelLeftClose,\n  lucidePanelLeftOpen,\n  lucidePanelRightOpen,\n  lucidePaperclip,\n  lucidePause,\n  lucidePencil,\n  lucidePhone,\n  lucidePhoneCall,\n  lucidePill,\n  lucidePlus,\n  lucidePrinter,\n  lucideQrCode,\n  lucideRadio,\n  lucideRefreshCcw,\n  lucideRefreshCwOff,\n  lucideSave,\n  lucideSaveAll,\n  lucideScanLine,\n  lucideScanQrCode,\n  lucideSearch,\n  lucideSend,\n  lucideServer,\n  lucideSettings,\n  lucideSettings2,\n  lucideShield,\n  lucideShieldCheck,\n  lucideShoppingCart,\n  lucideSlidersHorizontal,\n  lucideSmartphone,\n  lucideStar,\n  lucideStethoscope,\n  lucideStore,\n  lucideSun,\n  lucideTableOfContents,\n  lucideTablet,\n  lucideTarget,\n  lucideTerminal,\n  lucideTimer,\n  lucideTrash2,\n  lucideTrendingDown,\n  lucideTrendingUp,\n  lucideTriangleAlert,\n  lucideTruck,\n  lucideUser,\n  lucideUserCheck,\n  lucideUserLock,\n  lucideUserPlus,\n  lucideUserRoundPen,\n  lucideUsers,\n  lucideUsersRound,\n  lucideVideo,\n  lucideWallet,\n  lucideWarehouse,\n  lucideWifi,\n  lucideWifiZero,\n  lucideWorkflow,\n  lucideWrench,\n  lucideX,\n  lucideXCircle,\n  lucideZap,\n  lucideBarChart,\n  lucideFileOutput,\n  lucideLayoutTemplate,\n  lucideSquarePen,\n  lucideCircleHelp,\n  lucideMegaphone,\n  lucideSquare,\n  lucidePenTool,\n  lucideRocket,\n  lucideBarChart3,\n  lucideCheckCircle,\n  lucideFolderTree,\n  lucideGrid3x3,\n  lucideSliders,\n  lucideUsers2,\n  lucideFileEdit,\n  lucideNavigation,\n  lucideListFilter,\n  lucideTextCursor,\n  lucidePieChart,\n  lucideFolders,\n  lucideUserSearch,\n  lucideSquareCheck,\n  lucideCircleDot,\n  lucideToggleLeft,\n  lucideUpload,\n  lucideUploadCloud,\n  lucideDownload,\n  lucideFile,\n  lucideMusic,\n  lucideFileCode,\n  lucideFileJson,\n  lucideFileArchive,\n  lucideTable2,\n  lucideGitBranch,\n  lucideAlertTriangle,\n  lucideBan,\n  lucideBuilding,\n  lucideType,\n} from '@ng-icons/lucide';\n\nexport const Z_ICONS = {\n  lucideLayers2,\n  lucideStore,\n  lucideChartBarStacked,\n  lucideBookCheck,\n  lucideAlarmClock,\n  lucideClipboardPlus,\n  lucideSave,\n  lucideSaveAll,\n  lucideFlag,\n  lucideFlagTriangleRight,\n  lucideMessageSquareDot,\n  lucideCheckCheck,\n  lucideTriangleAlert,\n  lucideMessageSquareWarning,\n  lucideCheck,\n  lucidePencil,\n  lucideMail,\n  lucideLayoutGrid,\n  lucideArrowLeft,\n  lucideArrowRight,\n  lucideMenu,\n  lucideLock,\n  lucideLogOut,\n  lucideUser,\n  lucideSettings,\n  lucidePill,\n  lucideCalendarFold,\n  lucideSettings2,\n  lucideChevronLeft,\n  lucideChevronRight,\n  lucideChevronDown,\n  lucidePlus,\n  lucideSearch,\n  lucideUsers,\n  lucideEye,\n  lucideEyeOff,\n  lucideEllipsis,\n  lucidePanelLeftClose,\n  lucidePanelLeftOpen,\n  lucideLayoutDashboard,\n  lucideChartColumn,\n  lucideUsersRound,\n  lucideLogs,\n  lucideChevronUp,\n  lucideTrendingUp,\n  lucidePackage,\n  lucideShoppingCart,\n  lucideUserCheck,\n  lucideActivity,\n  lucideZap,\n  lucideMousePointer,\n  lucideInfo,\n  lucideLayers,\n  lucideBriefcase,\n  lucideTarget,\n  lucideWorkflow,\n  lucideWarehouse,\n  lucideLoaderCircle,\n  lucideChevronsLeft,\n  lucideChevronsRight,\n  lucideBellRing,\n  lucideSlidersHorizontal,\n  lucideTrash2,\n  lucideFileDown,\n  lucideFunnel,\n  lucideAlignJustify,\n  lucideX,\n  lucideFiles,\n  lucideCrown,\n  lucideBadgeInfo,\n  lucideMinus,\n  lucideBox,\n  lucideCog,\n  lucideBellMinus,\n  lucidePackageOpen,\n  lucideInbox,\n  lucideClock,\n  lucideBookOpen,\n  lucideCalendar,\n  lucideCalculator,\n  lucideClipboardList,\n  lucideDatabase,\n  lucideDollarSign,\n  lucideFileText,\n  lucideGraduationCap,\n  lucideHeart,\n  lucideHospital,\n  lucideMapPin,\n  lucideMonitor,\n  lucidePhone,\n  lucideShield,\n  lucideStar,\n  lucideStethoscope,\n  lucideTimer,\n  lucideTrendingDown,\n  lucideUserPlus,\n  lucideVideo,\n  lucideWallet,\n  lucideWrench,\n  lucideBuilding2,\n  lucideCar,\n  lucideCreditCard,\n  lucideFileSpreadsheet,\n  lucideGlobe,\n  lucideHeadphones,\n  lucideKey,\n  lucideLightbulb,\n  lucideMailCheck,\n  lucideNetwork,\n  lucidePalette,\n  lucidePhoneCall,\n  lucidePrinter,\n  lucideRadio,\n  lucideServer,\n  lucideSmartphone,\n  lucideTablet,\n  lucideTerminal,\n  lucideTruck,\n  lucideWifi,\n  lucideRefreshCcw,\n  lucideLockKeyhole,\n  lucideArrowDown,\n  lucideArrowUp,\n  lucideUserLock,\n  lucideCircleCheck,\n  lucideHouse,\n  lucideChartBar,\n  lucideChartPie,\n  lucideChartLine,\n  lucideCalendarRange,\n  lucideCalendar1,\n  lucideCalendarCheck,\n  lucideNotepadText,\n  lucideFileUp,\n  lucideTableOfContents,\n  lucideBot,\n  lucideSend,\n  lucidePause,\n  lucidePaperclip,\n  saxPauseBold,\n  lucideCopy,\n  lucideUserRoundPen,\n  lucideFilePenLine,\n  lucideArrowDownUp,\n  lucideCircleX,\n  lucideCheckLine,\n  lucideBadgeCheck,\n  lucideShieldCheck,\n  lucideCircleCheckBig,\n  lucideBadgeX,\n  lucideLockKeyholeOpen,\n  lucideFileSymlink,\n  lucideWifiZero,\n  lucideCloudCheck,\n  lucideMailPlus,\n  lucideHardDriveDownload,\n  saxCloudChangeBold,\n  saxRefreshBold,\n  lucideBarcode,\n  lucideCode,\n  lucideScanQrCode,\n  lucideQrCode,\n  lucideScanLine,\n  lucideListPlus,\n  lucideFilePlus,\n  lucideFilePlus2,\n  lucideBookUp2,\n  lucideFileClock,\n  lucideRefreshCwOff,\n  lucideListChecks,\n  lucideFastForward,\n  lucideBrushCleaning,\n  lucideChartColumnIncreasing,\n  lucideBell,\n  lucideCheckCircle2,\n  lucideAlertCircle,\n  lucideXCircle,\n  lucideLink,\n  lucideDatabaseBackup,\n  lucideFileCheck,\n  lucideListChevronsDownUp,\n  lucideListChevronsUpDown,\n  lucideSun,\n  lucideMoon,\n  lucideLoader,\n  lucideAlertOctagon,\n  lucideMessageCircle,\n  lucideCircleAlert,\n  lucideMessageCircleQuestion,\n  lucideComponent,\n  lucidePanelRightOpen,\n  lucideLoader2,\n  lucideGithub,\n  lucideLifeBuoy,\n  lucideCloud,\n  lucideBarChart,\n  lucideHome,\n  lucideFolderOpen,\n  lucideSquarePen,\n  lucideLayoutTemplate,\n  lucideFileOutput,\n  lucideCircleHelp,\n  lucideGripHorizontal,\n  lucideImage,\n  lucideList,\n  lucideHash,\n  lucideMegaphone,\n  lucidePenTool,\n  lucideSquare,\n  lucideRocket,\n  lucideBarChart3,\n  lucideUsers2,\n  lucideGrid3x3,\n  lucideFolderTree,\n  lucideCheckCircle,\n  lucideSliders,\n  lucideFileEdit,\n  lucideNavigation,\n  lucideListFilter,\n  lucideTextCursor,\n  lucidePieChart,\n  lucideUserSearch,\n  lucideFolders,\n  lucideSparkles,\n  lucideSquareCheck,\n  lucideCircleDot,\n  lucideToggleLeft,\n  lucideUpload,\n  lucideUploadCloud,\n  lucideDownload,\n  lucideFile,\n  lucideMusic,\n  lucideFileCode,\n  lucideFileJson,\n  lucideFileArchive,\n  lucideTable2,\n  lucideGripVertical,\n  lucidePin,\n  lucideSearchX,\n  lucideMoreVertical,\n  lucideGitBranch,\n  lucideAlertTriangle,\n  lucideFilter,\n  lucideFunnelX,\n  lucideBan,\n  lucideBuilding,\n  lucideType,\n} as const satisfies Record<string, IconType>;\n\nexport declare type ZIcon = keyof typeof Z_ICONS;\n","import { HttpClient } from '@angular/common/http';\nimport { type EnvironmentProviders, inject, makeEnvironmentProviders } from '@angular/core';\nimport { provideNgIconLoader, withCaching } from '@ng-icons/core';\nimport { catchError, map, of } from 'rxjs';\nimport { Z_ICONS } from './z-icons';\n\n/**\n * Normalizes Sax SVG to use currentColor and CSS variable for stroke-width.\n * This allows the icon to inherit color and strokeWidth from ng-icon props.\n */\nfunction normalizeSaxSvg(svg: string): string {\n  const cssVar = 'style=\"stroke-width: var(--ng-icon__stroke-width, 2)\"';\n  const normalized = svg.replace(/fill=\"#292D32\"/gi, 'fill=\"currentColor\"');\n  return normalized.replace(/stroke-width=\"[^\"]*\"/gi, cssVar);\n}\n\n/**\n * Normalizes Lucide SVG to use CSS variable for stroke-width.\n * This allows ng-icon strokeWidth prop to work correctly.\n * Replaces hardcoded stroke-width with var(--ng-icon__stroke-width, 2).\n */\nfunction normalizeLucideSvg(svg: string): string {\n  const cssVar = 'style=\"stroke-width: var(--ng-icon__stroke-width, 2)\"';\n  return svg.replace(/stroke-width=\"[^\"]*\"/gi, cssVar);\n}\n\n/**\n * Gets fallback icon from bundled Z_ICONS if available.\n */\nfunction getFallbackIcon(name: string): string {\n  const icon = Z_ICONS[name as keyof typeof Z_ICONS];\n  if (icon) {\n    console.warn(`[ZIcon] Using bundled fallback for \"${name}\"`);\n    return icon;\n  }\n  return '';\n}\n\n/**\n * Converts ng-icons icon name to Lucide CDN format.\n * Examples:\n * - lucideArrowLeft -> arrow-left\n * - lucideAlertCircle -> alert-circle\n * - lucideTrash2 -> trash-2\n * - lucideGrid3x3 -> grid-3-x-3\n */\nfunction convertLucideIconName(name: string): string {\n  return name\n    .replace(/^lucide/, '')\n    .replace(/([A-Z])/g, '-$1')\n    .replace(/(\\d+)/g, '-$1')\n    .replace(/(\\d)([a-z])/g, '$1-$2')\n    .toLowerCase()\n    .replace(/^-/, '')\n    .replace(/--+/g, '-');\n}\n\n/**\n * Converts ng-icons Iconsax icon name to CDN format.\n * Examples:\n * - saxCloudChangeBold -> bold/cloud-change\n * - saxPauseBold -> bold/pause\n * - saxRefreshBold -> bold/refresh\n * - saxHomeOutline -> outline/home\n * - saxUserLinear -> linear/user\n */\nfunction convertIconsaxIconName(name: string): { style: string; iconName: string } | null {\n  let iconPart = name.replace(/^sax/, '');\n  // Extract style suffix (Bold, Outline, Linear, Bulk, Broken, TwoTone)\n  const styleMatch = iconPart.match(/(Bold|Outline|Linear|Bulk|Broken|TwoTone)$/i);\n  if (!styleMatch) {\n    return null;\n  }\n\n  const style = styleMatch[1].toLowerCase();\n  const styleFolder = style === 'twotone' ? 'twotone' : style;\n  // Remove style suffix from icon name\n  iconPart = iconPart.replace(/(Bold|Outline|Linear|Bulk|Broken|TwoTone)$/i, '');\n\n  // Convert PascalCase to kebab-case\n  const iconName = iconPart\n    .replace(/([A-Z])/g, '-$1')\n    .replace(/(\\d+)/g, '-$1')\n    .toLowerCase()\n    .replace(/^-/, '')\n    .replace(/--+/g, '-');\n\n  return { style: styleFolder, iconName };\n}\n\nconst LUCIDE_CDN_URL = 'https://cdn.jsdelivr.net/npm/lucide-static@latest/icons';\nconst ICONSAX_CDN_URL = 'https://cdn.jsdelivr.net/gh/placetopay-org/iconsax-vue@main/src/Base';\n\n/**\n * Provides hybrid icon loading from CDN with fallback to bundled icons:\n * - Primary: Load icons from CDN (Lucide & Iconsax)\n * - Fallback: Use bundled icons from Z_ICONS if CDN fails\n *\n * @example\n * ```typescript\n * // app.config.ts\n * providers: [\n *   provideHttpClient(),\n *   provideZIconLoader(),\n * ]\n * ```\n */\nexport function provideZIconLoader(): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    provideNgIconLoader(name => {\n      const http = inject(HttpClient);\n\n      // Load Iconsax icons from CDN\n      if (name.startsWith('sax')) {\n        const parsed = convertIconsaxIconName(name);\n        if (!parsed) {\n          console.warn(`[ZIcon] Invalid Iconsax icon name: \"${name}\"`);\n          return of(getFallbackIcon(name));\n        }\n\n        const url = `${ICONSAX_CDN_URL}/${parsed.style}/${parsed.iconName}.svg`;\n\n        return http.get(url, { responseType: 'text' }).pipe(\n          map(normalizeSaxSvg),\n          catchError(error => {\n            console.error(`[ZIcon] Failed to load Iconsax icon \"${name}\" from ${url}`, error);\n            return of(getFallbackIcon(name));\n          })\n        );\n      }\n\n      // Load Lucide icons from CDN\n      if (name.startsWith('lucide')) {\n        const iconName = convertLucideIconName(name);\n        const url = `${LUCIDE_CDN_URL}/${iconName}.svg`;\n\n        return http.get(url, { responseType: 'text' }).pipe(\n          map(normalizeLucideSvg),\n          catchError(error => {\n            const msg = `[ZIcon] Failed to load Lucide icon \"${name}\"`;\n            console.error(msg, url, error);\n            return of(getFallbackIcon(name));\n          })\n        );\n      }\n\n      console.warn(`[ZIcon] Unknown icon: \"${name}\"`);\n      return of(getFallbackIcon(name));\n    }, withCaching()),\n  ]);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["NgIcon"],"mappings":";;;;;;;;;;AAEO,MAAM,aAAa,GAAG,GAAG,CAAC,EAAE,EAAE;AACnC,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AAChB,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,KAAK,EAAE,IAAI;AACZ,KAAA;AACF,CAAA;;MCrBY,cAAc,CAAA;AACT,IAAA,KAAK,GAAG,KAAK,CAAa,EAAE,iDAAC;IAC7B,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAS;AACtB,IAAA,KAAK,GAAG,KAAK,CAAyB,IAAI,iDAAC;AAC3C,IAAA,YAAY,GAAG,KAAK,CAAS,CAAC,wDAAC;AAC/B,IAAA,IAAI,GAAG,KAAK,CAAS,EAAE,gDAAC;AAErB,IAAA,QAAQ,GAAG,QAAQ,CAAC,MACrC,aAAa,CACX,aAAa,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,EACtC,IAAI,CAAC,KAAK,EAAE,EACZ,IAAI,CAAC,YAAY,EAAE,KAAK,CAAC,GAAG,aAAa,GAAG,EAAE,EAC9C,sBAAsB,CACvB,oDACF;uGAdU,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAd,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,YAAA,EAAA,aAAA,EAAA,kBAAA,EAAA,cAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECpB3B,0NAKA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDIYA,eAAM,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,KAAA,EAAA,MAAA,EAAA,aAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAWL,cAAc,EAAA,UAAA,EAAA,CAAA;kBAb1B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,EAAA,OAAA,EACnB,CAACA,eAAM,CAAC,cACL,IAAI,EAAA,eAAA,EAEC,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,SAAS,EAAE,YAAY;AACvB,wBAAA,eAAe,EAAE,gBAAgB;AACjC,wBAAA,gBAAgB,EAAE,gBAAgB;AACnC,qBAAA,EAAA,QAAA,EAAA,0NAAA,EAAA;;;AEuOI,MAAM,OAAO,GAAG;IACrB,aAAa;IACb,WAAW;IACX,qBAAqB;IACrB,eAAe;IACf,gBAAgB;IAChB,mBAAmB;IACnB,UAAU;IACV,aAAa;IACb,UAAU;IACV,uBAAuB;IACvB,sBAAsB;IACtB,gBAAgB;IAChB,mBAAmB;IACnB,0BAA0B;IAC1B,WAAW;IACX,YAAY;IACZ,UAAU;IACV,gBAAgB;IAChB,eAAe;IACf,gBAAgB;IAChB,UAAU;IACV,UAAU;IACV,YAAY;IACZ,UAAU;IACV,cAAc;IACd,UAAU;IACV,kBAAkB;IAClB,eAAe;IACf,iBAAiB;IACjB,kBAAkB;IAClB,iBAAiB;IACjB,UAAU;IACV,YAAY;IACZ,WAAW;IACX,SAAS;IACT,YAAY;IACZ,cAAc;IACd,oBAAoB;IACpB,mBAAmB;IACnB,qBAAqB;IACrB,iBAAiB;IACjB,gBAAgB;IAChB,UAAU;IACV,eAAe;IACf,gBAAgB;IAChB,aAAa;IACb,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,SAAS;IACT,kBAAkB;IAClB,UAAU;IACV,YAAY;IACZ,eAAe;IACf,YAAY;IACZ,cAAc;IACd,eAAe;IACf,kBAAkB;IAClB,kBAAkB;IAClB,mBAAmB;IACnB,cAAc;IACd,uBAAuB;IACvB,YAAY;IACZ,cAAc;IACd,YAAY;IACZ,kBAAkB;IAClB,OAAO;IACP,WAAW;IACX,WAAW;IACX,eAAe;IACf,WAAW;IACX,SAAS;IACT,SAAS;IACT,eAAe;IACf,iBAAiB;IACjB,WAAW;IACX,WAAW;IACX,cAAc;IACd,cAAc;IACd,gBAAgB;IAChB,mBAAmB;IACnB,cAAc;IACd,gBAAgB;IAChB,cAAc;IACd,mBAAmB;IACnB,WAAW;IACX,cAAc;IACd,YAAY;IACZ,aAAa;IACb,WAAW;IACX,YAAY;IACZ,UAAU;IACV,iBAAiB;IACjB,WAAW;IACX,kBAAkB;IAClB,cAAc;IACd,WAAW;IACX,YAAY;IACZ,YAAY;IACZ,eAAe;IACf,SAAS;IACT,gBAAgB;IAChB,qBAAqB;IACrB,WAAW;IACX,gBAAgB;IAChB,SAAS;IACT,eAAe;IACf,eAAe;IACf,aAAa;IACb,aAAa;IACb,eAAe;IACf,aAAa;IACb,WAAW;IACX,YAAY;IACZ,gBAAgB;IAChB,YAAY;IACZ,cAAc;IACd,WAAW;IACX,UAAU;IACV,gBAAgB;IAChB,iBAAiB;IACjB,eAAe;IACf,aAAa;IACb,cAAc;IACd,iBAAiB;IACjB,WAAW;IACX,cAAc;IACd,cAAc;IACd,eAAe;IACf,mBAAmB;IACnB,eAAe;IACf,mBAAmB;IACnB,iBAAiB;IACjB,YAAY;IACZ,qBAAqB;IACrB,SAAS;IACT,UAAU;IACV,WAAW;IACX,eAAe;IACf,YAAY;IACZ,UAAU;IACV,kBAAkB;IAClB,iBAAiB;IACjB,iBAAiB;IACjB,aAAa;IACb,eAAe;IACf,gBAAgB;IAChB,iBAAiB;IACjB,oBAAoB;IACpB,YAAY;IACZ,qBAAqB;IACrB,iBAAiB;IACjB,cAAc;IACd,gBAAgB;IAChB,cAAc;IACd,uBAAuB;IACvB,kBAAkB;IAClB,cAAc;IACd,aAAa;IACb,UAAU;IACV,gBAAgB;IAChB,YAAY;IACZ,cAAc;IACd,cAAc;IACd,cAAc;IACd,eAAe;IACf,aAAa;IACb,eAAe;IACf,kBAAkB;IAClB,gBAAgB;IAChB,iBAAiB;IACjB,mBAAmB;IACnB,2BAA2B;IAC3B,UAAU;IACV,kBAAkB;IAClB,iBAAiB;IACjB,aAAa;IACb,UAAU;IACV,oBAAoB;IACpB,eAAe;IACf,wBAAwB;IACxB,wBAAwB;IACxB,SAAS;IACT,UAAU;IACV,YAAY;IACZ,kBAAkB;IAClB,mBAAmB;IACnB,iBAAiB;IACjB,2BAA2B;IAC3B,eAAe;IACf,oBAAoB;IACpB,aAAa;IACb,YAAY;IACZ,cAAc;IACd,WAAW;IACX,cAAc;IACd,UAAU;IACV,gBAAgB;IAChB,eAAe;IACf,oBAAoB;IACpB,gBAAgB;IAChB,gBAAgB;IAChB,oBAAoB;IACpB,WAAW;IACX,UAAU;IACV,UAAU;IACV,eAAe;IACf,aAAa;IACb,YAAY;IACZ,YAAY;IACZ,eAAe;IACf,YAAY;IACZ,aAAa;IACb,gBAAgB;IAChB,iBAAiB;IACjB,aAAa;IACb,cAAc;IACd,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,cAAc;IACd,gBAAgB;IAChB,aAAa;IACb,cAAc;IACd,iBAAiB;IACjB,eAAe;IACf,gBAAgB;IAChB,YAAY;IACZ,iBAAiB;IACjB,cAAc;IACd,UAAU;IACV,WAAW;IACX,cAAc;IACd,cAAc;IACd,iBAAiB;IACjB,YAAY;IACZ,kBAAkB;IAClB,SAAS;IACT,aAAa;IACb,kBAAkB;IAClB,eAAe;IACf,mBAAmB;IACnB,YAAY;IACZ,aAAa;IACb,SAAS;IACT,cAAc;IACd,UAAU;;;AC1eZ;;;AAGG;AACH,SAAS,eAAe,CAAC,GAAW,EAAA;IAClC,MAAM,MAAM,GAAG,uDAAuD;IACtE,MAAM,UAAU,GAAG,GAAG,CAAC,OAAO,CAAC,kBAAkB,EAAE,qBAAqB,CAAC;IACzE,OAAO,UAAU,CAAC,OAAO,CAAC,wBAAwB,EAAE,MAAM,CAAC;AAC7D;AAEA;;;;AAIG;AACH,SAAS,kBAAkB,CAAC,GAAW,EAAA;IACrC,MAAM,MAAM,GAAG,uDAAuD;IACtE,OAAO,GAAG,CAAC,OAAO,CAAC,wBAAwB,EAAE,MAAM,CAAC;AACtD;AAEA;;AAEG;AACH,SAAS,eAAe,CAAC,IAAY,EAAA;AACnC,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,IAA4B,CAAC;IAClD,IAAI,IAAI,EAAE;AACR,QAAA,OAAO,CAAC,IAAI,CAAC,uCAAuC,IAAI,CAAA,CAAA,CAAG,CAAC;AAC5D,QAAA,OAAO,IAAI;IACb;AACA,IAAA,OAAO,EAAE;AACX;AAEA;;;;;;;AAOG;AACH,SAAS,qBAAqB,CAAC,IAAY,EAAA;AACzC,IAAA,OAAO;AACJ,SAAA,OAAO,CAAC,SAAS,EAAE,EAAE;AACrB,SAAA,OAAO,CAAC,UAAU,EAAE,KAAK;AACzB,SAAA,OAAO,CAAC,QAAQ,EAAE,KAAK;AACvB,SAAA,OAAO,CAAC,cAAc,EAAE,OAAO;AAC/B,SAAA,WAAW;AACX,SAAA,OAAO,CAAC,IAAI,EAAE,EAAE;AAChB,SAAA,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC;AACzB;AAEA;;;;;;;;AAQG;AACH,SAAS,sBAAsB,CAAC,IAAY,EAAA;IAC1C,IAAI,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC;;IAEvC,MAAM,UAAU,GAAG,QAAQ,CAAC,KAAK,CAAC,6CAA6C,CAAC;IAChF,IAAI,CAAC,UAAU,EAAE;AACf,QAAA,OAAO,IAAI;IACb;IAEA,MAAM,KAAK,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE;AACzC,IAAA,MAAM,WAAW,GAAG,KAAK,KAAK,SAAS,GAAG,SAAS,GAAG,KAAK;;IAE3D,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,6CAA6C,EAAE,EAAE,CAAC;;IAG9E,MAAM,QAAQ,GAAG;AACd,SAAA,OAAO,CAAC,UAAU,EAAE,KAAK;AACzB,SAAA,OAAO,CAAC,QAAQ,EAAE,KAAK;AACvB,SAAA,WAAW;AACX,SAAA,OAAO,CAAC,IAAI,EAAE,EAAE;AAChB,SAAA,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC;AAEvB,IAAA,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE;AACzC;AAEA,MAAM,cAAc,GAAG,yDAAyD;AAChF,MAAM,eAAe,GAAG,sEAAsE;AAE9F;;;;;;;;;;;;;AAaG;SACa,kBAAkB,GAAA;AAChC,IAAA,OAAO,wBAAwB,CAAC;QAC9B,mBAAmB,CAAC,IAAI,IAAG;AACzB,YAAA,MAAM,IAAI,GAAG,MAAM,CAAC,UAAU,CAAC;;AAG/B,YAAA,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE;AAC1B,gBAAA,MAAM,MAAM,GAAG,sBAAsB,CAAC,IAAI,CAAC;gBAC3C,IAAI,CAAC,MAAM,EAAE;AACX,oBAAA,OAAO,CAAC,IAAI,CAAC,uCAAuC,IAAI,CAAA,CAAA,CAAG,CAAC;AAC5D,oBAAA,OAAO,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;gBAClC;AAEA,gBAAA,MAAM,GAAG,GAAG,CAAA,EAAG,eAAe,CAAA,CAAA,EAAI,MAAM,CAAC,KAAK,CAAA,CAAA,EAAI,MAAM,CAAC,QAAQ,MAAM;gBAEvE,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,CAAC,CAAC,IAAI,CACjD,GAAG,CAAC,eAAe,CAAC,EACpB,UAAU,CAAC,KAAK,IAAG;oBACjB,OAAO,CAAC,KAAK,CAAC,CAAA,qCAAA,EAAwC,IAAI,CAAA,OAAA,EAAU,GAAG,CAAA,CAAE,EAAE,KAAK,CAAC;AACjF,oBAAA,OAAO,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;gBAClC,CAAC,CAAC,CACH;YACH;;AAGA,YAAA,IAAI,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;AAC7B,gBAAA,MAAM,QAAQ,GAAG,qBAAqB,CAAC,IAAI,CAAC;AAC5C,gBAAA,MAAM,GAAG,GAAG,CAAA,EAAG,cAAc,CAAA,CAAA,EAAI,QAAQ,MAAM;gBAE/C,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,CAAC,CAAC,IAAI,CACjD,GAAG,CAAC,kBAAkB,CAAC,EACvB,UAAU,CAAC,KAAK,IAAG;AACjB,oBAAA,MAAM,GAAG,GAAG,CAAA,oCAAA,EAAuC,IAAI,GAAG;oBAC1D,OAAO,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC;AAC9B,oBAAA,OAAO,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;gBAClC,CAAC,CAAC,CACH;YACH;AAEA,YAAA,OAAO,CAAC,IAAI,CAAC,0BAA0B,IAAI,CAAA,CAAA,CAAG,CAAC;AAC/C,YAAA,OAAO,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;QAClC,CAAC,EAAE,WAAW,EAAE,CAAC;AAClB,KAAA,CAAC;AACJ;;ACtJA;;AAEG;;;;"}
+{"version":3,"file":"shival99-z-ui-components-z-icon.mjs","sources":["../../../../libs/core-ui/components/z-icon/z-icon.variants.ts","../../../../libs/core-ui/components/z-icon/z-icon.component.ts","../../../../libs/core-ui/components/z-icon/z-icon.component.html","../../../../libs/core-ui/components/z-icon/z-icons.ts","../../../../libs/core-ui/components/z-icon/z-icon-loader.provider.ts","../../../../libs/core-ui/components/z-icon/shival99-z-ui-components-z-icon.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const zIconVariants = cva('', {\n  variants: {\n    zSize: {\n      '10': 'size-10',\n      '11': 'size-11',\n      '12': 'size-12',\n      '13': 'size-13',\n      '14': 'size-14',\n      '15': 'size-15',\n      '16': 'size-16',\n      '17': 'size-17',\n      '18': 'size-18',\n      '19': 'size-19',\n      '20': 'size-20',\n      '21': 'size-21',\n      '22': 'size-22',\n      '23': 'size-23',\n      '24': 'size-24',\n      '25': 'size-25',\n      '26': 'size-26',\n      '27': 'size-27',\n      '28': 'size-28',\n      '29': 'size-29',\n      '30': 'size-30',\n      '31': 'size-31',\n      '32': 'size-32',\n      '33': 'size-33',\n      '34': 'size-34',\n      '35': 'size-35',\n      '36': 'size-36',\n      '37': 'size-37',\n      '38': 'size-38',\n      '39': 'size-39',\n      '40': 'size-40',\n    },\n  },\n  defaultVariants: {\n    zSize: '16',\n  },\n});\n\nexport type ZIconVariants = VariantProps<typeof zIconVariants>;\n","import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';\nimport { NgIconComponent as NgIcon } from '@ng-icons/core';\nimport { zMergeClasses } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport { zIconVariants, ZIconVariants } from './z-icon.variants';\nimport { type ZIcon } from './z-icons';\n\n@Component({\n  selector: 'z-icon, [z-icon]',\n  imports: [NgIcon],\n  standalone: true,\n  templateUrl: './z-icon.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'zClasses()',\n    '[style.width]': 'zSize() + \"px\"',\n    '[style.height]': 'zSize() + \"px\"',\n  },\n})\nexport class ZIconComponent {\n  public readonly class = input<ClassValue>('');\n  public readonly zType = input<ZIcon>();\n  public readonly zSize = input<ZIconVariants['zSize']>('16');\n  public readonly zStrokeWidth = input<number>(2);\n  public readonly zSvg = input<string>('');\n\n  protected readonly zClasses = computed(() =>\n    zMergeClasses(\n      zIconVariants({ zSize: this.zSize() }),\n      this.class(),\n      this.zStrokeWidth() === 0 ? 'stroke-none' : '',\n      'inline-flex shrink-0'\n    )\n  );\n}\n","@if (zSvg()) {\n  <ng-icon [svg]=\"zSvg()\" [size]=\"zSize() || '16'\" [strokeWidth]=\"zStrokeWidth()\" />\n} @else {\n  <ng-icon [name]=\"zType()\" [size]=\"zSize() || '16'\" [strokeWidth]=\"zStrokeWidth()\" />\n}\n","import { type IconType } from '@ng-icons/core';\nimport { saxCloudChangeBold, saxPauseBold, saxRefreshBold } from '@ng-icons/iconsax/bold';\nimport {\n  lucideMoreVertical,\n  lucideSearchX,\n  lucidePin,\n  lucideGripVertical,\n  lucideSparkles,\n  lucideList,\n  lucideHash,\n  lucideImage,\n  lucideGripHorizontal,\n  lucideHome,\n  lucideFolderOpen,\n  lucideGithub,\n  lucideLifeBuoy,\n  lucideCloud,\n  lucideActivity,\n  lucideAlarmClock,\n  lucideAlertCircle,\n  lucideAlertOctagon,\n  lucideAlignJustify,\n  lucideArrowDown,\n  lucideArrowDownUp,\n  lucideArrowLeft,\n  lucideArrowRight,\n  lucideArrowUp,\n  lucideBadgeCheck,\n  lucideBadgeInfo,\n  lucideBadgeX,\n  lucideBarcode,\n  lucideBell,\n  lucideBellMinus,\n  lucideBellRing,\n  lucideBookCheck,\n  lucideBookOpen,\n  lucideBookUp2,\n  lucideBot,\n  lucideBox,\n  lucideBriefcase,\n  lucideBrushCleaning,\n  lucideBuilding2,\n  lucideCalculator,\n  lucideCalendar,\n  lucideCalendar1,\n  lucideCalendarCheck,\n  lucideCalendarFold,\n  lucideCalendarRange,\n  lucideCar,\n  lucideChartBar,\n  lucideChartBarStacked,\n  lucideChartColumn,\n  lucideChartColumnIncreasing,\n  lucideChartLine,\n  lucideChartPie,\n  lucideCheck,\n  lucideCheckCheck,\n  lucideCheckCircle2,\n  lucideCheckLine,\n  lucideChevronDown,\n  lucideChevronLeft,\n  lucideChevronRight,\n  lucideChevronsLeft,\n  lucideChevronsRight,\n  lucideChevronUp,\n  lucideCircleAlert,\n  lucideCircleCheck,\n  lucideCircleCheckBig,\n  lucideCircleX,\n  lucideClipboardList,\n  lucideClipboardPlus,\n  lucideClock,\n  lucideCloudCheck,\n  lucideCode,\n  lucideCog,\n  lucideComponent,\n  lucideCopy,\n  lucideCreditCard,\n  lucideCrown,\n  lucideDatabase,\n  lucideDatabaseBackup,\n  lucideDollarSign,\n  lucideEllipsis,\n  lucideEye,\n  lucideEyeOff,\n  lucideFastForward,\n  lucideFileCheck,\n  lucideFileClock,\n  lucideFileDown,\n  lucideFilePenLine,\n  lucideFilePlus,\n  lucideFilePlus2,\n  lucideFiles,\n  lucideFileSpreadsheet,\n  lucideFileSymlink,\n  lucideFileText,\n  lucideFileUp,\n  lucideFlag,\n  lucideFlagTriangleRight,\n  lucideFilter,\n  lucideFunnel,\n  lucideFunnelX,\n  lucideGlobe,\n  lucideGraduationCap,\n  lucideHardDriveDownload,\n  lucideHeadphones,\n  lucideHeart,\n  lucideHospital,\n  lucideHouse,\n  lucideInbox,\n  lucideInfo,\n  lucideKey,\n  lucideLayers,\n  lucideLayers2,\n  lucideLayoutDashboard,\n  lucideLayoutGrid,\n  lucideLightbulb,\n  lucideLink,\n  lucideListChecks,\n  lucideListChevronsDownUp,\n  lucideListChevronsUpDown,\n  lucideListPlus,\n  lucideLoader,\n  lucideLoader2,\n  lucideLoaderCircle,\n  lucideLock,\n  lucideLockKeyhole,\n  lucideLockKeyholeOpen,\n  lucideLogOut,\n  lucideLogs,\n  lucideMail,\n  lucideMailCheck,\n  lucideMailPlus,\n  lucideMapPin,\n  lucideMenu,\n  lucideMessageCircle,\n  lucideMessageCircleQuestion,\n  lucideMessageSquareDot,\n  lucideMessageSquareWarning,\n  lucideMinus,\n  lucideMonitor,\n  lucideMoon,\n  lucideMousePointer,\n  lucideNetwork,\n  lucideNotepadText,\n  lucidePackage,\n  lucidePackageOpen,\n  lucidePalette,\n  lucidePanelLeftClose,\n  lucidePanelLeftOpen,\n  lucidePanelRightOpen,\n  lucidePaperclip,\n  lucidePause,\n  lucidePencil,\n  lucidePhone,\n  lucidePhoneCall,\n  lucidePill,\n  lucidePlus,\n  lucidePrinter,\n  lucideQrCode,\n  lucideRadio,\n  lucideRefreshCcw,\n  lucideRefreshCwOff,\n  lucideSave,\n  lucideSaveAll,\n  lucideScanLine,\n  lucideScanQrCode,\n  lucideSearch,\n  lucideSend,\n  lucideServer,\n  lucideSettings,\n  lucideSettings2,\n  lucideShield,\n  lucideShieldCheck,\n  lucideShoppingCart,\n  lucideSlidersHorizontal,\n  lucideSmartphone,\n  lucideStar,\n  lucideStethoscope,\n  lucideStore,\n  lucideSun,\n  lucideTableOfContents,\n  lucideTablet,\n  lucideTarget,\n  lucideTerminal,\n  lucideTimer,\n  lucideTrash2,\n  lucideTrendingDown,\n  lucideTrendingUp,\n  lucideTriangleAlert,\n  lucideTruck,\n  lucideUser,\n  lucideUserCheck,\n  lucideUserLock,\n  lucideUserPlus,\n  lucideUserRoundPen,\n  lucideUsers,\n  lucideUsersRound,\n  lucideVideo,\n  lucideWallet,\n  lucideWarehouse,\n  lucideWifi,\n  lucideWifiZero,\n  lucideWorkflow,\n  lucideWrench,\n  lucideX,\n  lucideXCircle,\n  lucideZap,\n  lucideBarChart,\n  lucideFileOutput,\n  lucideLayoutTemplate,\n  lucideSquarePen,\n  lucideCircleHelp,\n  lucideMegaphone,\n  lucideSquare,\n  lucidePenTool,\n  lucideRocket,\n  lucideBarChart3,\n  lucideCheckCircle,\n  lucideFolderTree,\n  lucideGrid3x3,\n  lucideSliders,\n  lucideUsers2,\n  lucideFileEdit,\n  lucideNavigation,\n  lucideListFilter,\n  lucideTextCursor,\n  lucidePieChart,\n  lucideFolders,\n  lucideUserSearch,\n  lucideSquareCheck,\n  lucideCircleDot,\n  lucideToggleLeft,\n  lucideUpload,\n  lucideUploadCloud,\n  lucideDownload,\n  lucideFile,\n  lucideMusic,\n  lucideFileCode,\n  lucideFileJson,\n  lucideFileArchive,\n  lucideTable2,\n  lucideGitBranch,\n  lucideAlertTriangle,\n  lucideBan,\n  lucideBuilding,\n  lucideType,\n  lucidePercent,\n  lucideReceipt,\n  lucideClipboardPen,\n  lucidePackageCheck,\n  lucideShoppingBag,\n  lucideTag,\n  lucideTags,\n  lucideTicket,\n  lucideWand2,\n  lucideZoomIn,\n  lucideZoomOut,\n  lucideBadge,\n  lucideClipboardCopy,\n  lucideContact,\n  lucideIdCard,\n  lucideRecycle,\n} from '@ng-icons/lucide';\n\nexport const Z_ICONS = {\n  lucideLayers2,\n  lucideStore,\n  lucideChartBarStacked,\n  lucideBookCheck,\n  lucideAlarmClock,\n  lucideClipboardPlus,\n  lucideSave,\n  lucideSaveAll,\n  lucideFlag,\n  lucideFlagTriangleRight,\n  lucideMessageSquareDot,\n  lucideCheckCheck,\n  lucideTriangleAlert,\n  lucideMessageSquareWarning,\n  lucideCheck,\n  lucidePencil,\n  lucideMail,\n  lucideLayoutGrid,\n  lucideArrowLeft,\n  lucideArrowRight,\n  lucideMenu,\n  lucideLock,\n  lucideLogOut,\n  lucideUser,\n  lucideSettings,\n  lucidePill,\n  lucideCalendarFold,\n  lucideSettings2,\n  lucideChevronLeft,\n  lucideChevronRight,\n  lucideChevronDown,\n  lucidePlus,\n  lucideSearch,\n  lucideUsers,\n  lucideEye,\n  lucideEyeOff,\n  lucideEllipsis,\n  lucidePanelLeftClose,\n  lucidePanelLeftOpen,\n  lucideLayoutDashboard,\n  lucideChartColumn,\n  lucideUsersRound,\n  lucideLogs,\n  lucideChevronUp,\n  lucideTrendingUp,\n  lucidePackage,\n  lucideShoppingCart,\n  lucideUserCheck,\n  lucideActivity,\n  lucideZap,\n  lucideMousePointer,\n  lucideInfo,\n  lucideLayers,\n  lucideBriefcase,\n  lucideTarget,\n  lucideWorkflow,\n  lucideWarehouse,\n  lucideLoaderCircle,\n  lucideChevronsLeft,\n  lucideChevronsRight,\n  lucideBellRing,\n  lucideSlidersHorizontal,\n  lucideTrash2,\n  lucideFileDown,\n  lucideFunnel,\n  lucideAlignJustify,\n  lucideX,\n  lucideFiles,\n  lucideCrown,\n  lucideBadgeInfo,\n  lucideMinus,\n  lucideBox,\n  lucideCog,\n  lucideBellMinus,\n  lucidePackageOpen,\n  lucideInbox,\n  lucideClock,\n  lucideBookOpen,\n  lucideCalendar,\n  lucideCalculator,\n  lucideClipboardList,\n  lucideDatabase,\n  lucideDollarSign,\n  lucideFileText,\n  lucideGraduationCap,\n  lucideHeart,\n  lucideHospital,\n  lucideMapPin,\n  lucideMonitor,\n  lucidePhone,\n  lucideShield,\n  lucideStar,\n  lucideStethoscope,\n  lucideTimer,\n  lucideTrendingDown,\n  lucideUserPlus,\n  lucideVideo,\n  lucideWallet,\n  lucideWrench,\n  lucideBuilding2,\n  lucideCar,\n  lucideCreditCard,\n  lucideFileSpreadsheet,\n  lucideGlobe,\n  lucideHeadphones,\n  lucideKey,\n  lucideLightbulb,\n  lucideMailCheck,\n  lucideNetwork,\n  lucidePalette,\n  lucidePhoneCall,\n  lucidePrinter,\n  lucideRadio,\n  lucideServer,\n  lucideSmartphone,\n  lucideTablet,\n  lucideTerminal,\n  lucideTruck,\n  lucideWifi,\n  lucideRefreshCcw,\n  lucideLockKeyhole,\n  lucideArrowDown,\n  lucideArrowUp,\n  lucideUserLock,\n  lucideCircleCheck,\n  lucideHouse,\n  lucideChartBar,\n  lucideChartPie,\n  lucideChartLine,\n  lucideCalendarRange,\n  lucideCalendar1,\n  lucideCalendarCheck,\n  lucideNotepadText,\n  lucideFileUp,\n  lucideTableOfContents,\n  lucideBot,\n  lucideSend,\n  lucidePause,\n  lucidePaperclip,\n  saxPauseBold,\n  lucideCopy,\n  lucideUserRoundPen,\n  lucideFilePenLine,\n  lucideArrowDownUp,\n  lucideCircleX,\n  lucideCheckLine,\n  lucideBadgeCheck,\n  lucideShieldCheck,\n  lucideCircleCheckBig,\n  lucideBadgeX,\n  lucideLockKeyholeOpen,\n  lucideFileSymlink,\n  lucideWifiZero,\n  lucideCloudCheck,\n  lucideMailPlus,\n  lucideHardDriveDownload,\n  saxCloudChangeBold,\n  saxRefreshBold,\n  lucideBarcode,\n  lucideCode,\n  lucideScanQrCode,\n  lucideQrCode,\n  lucideScanLine,\n  lucideListPlus,\n  lucideFilePlus,\n  lucideFilePlus2,\n  lucideBookUp2,\n  lucideFileClock,\n  lucideRefreshCwOff,\n  lucideListChecks,\n  lucideFastForward,\n  lucideBrushCleaning,\n  lucideChartColumnIncreasing,\n  lucideBell,\n  lucideCheckCircle2,\n  lucideAlertCircle,\n  lucideXCircle,\n  lucideLink,\n  lucideDatabaseBackup,\n  lucideFileCheck,\n  lucideListChevronsDownUp,\n  lucideListChevronsUpDown,\n  lucideSun,\n  lucideMoon,\n  lucideLoader,\n  lucideAlertOctagon,\n  lucideMessageCircle,\n  lucideCircleAlert,\n  lucideMessageCircleQuestion,\n  lucideComponent,\n  lucidePanelRightOpen,\n  lucideLoader2,\n  lucideGithub,\n  lucideLifeBuoy,\n  lucideCloud,\n  lucideBarChart,\n  lucideHome,\n  lucideFolderOpen,\n  lucideSquarePen,\n  lucideLayoutTemplate,\n  lucideFileOutput,\n  lucideCircleHelp,\n  lucideGripHorizontal,\n  lucideImage,\n  lucideList,\n  lucideHash,\n  lucideMegaphone,\n  lucidePenTool,\n  lucideSquare,\n  lucideRocket,\n  lucideBarChart3,\n  lucideUsers2,\n  lucideGrid3x3,\n  lucideFolderTree,\n  lucideCheckCircle,\n  lucideSliders,\n  lucideFileEdit,\n  lucideNavigation,\n  lucideListFilter,\n  lucideTextCursor,\n  lucidePieChart,\n  lucideUserSearch,\n  lucideFolders,\n  lucideSparkles,\n  lucideSquareCheck,\n  lucideCircleDot,\n  lucideToggleLeft,\n  lucideUpload,\n  lucideUploadCloud,\n  lucideDownload,\n  lucideFile,\n  lucideMusic,\n  lucideFileCode,\n  lucideFileJson,\n  lucideFileArchive,\n  lucideTable2,\n  lucideGripVertical,\n  lucidePin,\n  lucideSearchX,\n  lucideMoreVertical,\n  lucideGitBranch,\n  lucideAlertTriangle,\n  lucideFilter,\n  lucideFunnelX,\n  lucideBan,\n  lucideBuilding,\n  lucideType,\n  lucidePercent,\n  lucideReceipt,\n  lucideClipboardPen,\n  lucidePackageCheck,\n  lucideShoppingBag,\n  lucideTag,\n  lucideTags,\n  lucideTicket,\n  lucideWand2,\n  lucideZoomIn,\n  lucideZoomOut,\n  lucideBadge,\n  lucideClipboardCopy,\n  lucideContact,\n  lucideIdCard,\n  lucideRecycle,\n} as const satisfies Record<string, IconType>;\n\nexport declare type ZIcon = keyof typeof Z_ICONS;\n","import { HttpClient } from '@angular/common/http';\nimport { type EnvironmentProviders, inject, makeEnvironmentProviders } from '@angular/core';\nimport { provideNgIconLoader, withCaching } from '@ng-icons/core';\nimport { catchError, map, of } from 'rxjs';\nimport { Z_ICONS } from './z-icons';\n\n/**\n * Normalizes Sax SVG to use currentColor and CSS variable for stroke-width.\n * This allows the icon to inherit color and strokeWidth from ng-icon props.\n */\nfunction normalizeSaxSvg(svg: string): string {\n  const cssVar = 'style=\"stroke-width: var(--ng-icon__stroke-width, 2)\"';\n  const normalized = svg.replace(/fill=\"#292D32\"/gi, 'fill=\"currentColor\"');\n  return normalized.replace(/stroke-width=\"[^\"]*\"/gi, cssVar);\n}\n\n/**\n * Normalizes Lucide SVG to use CSS variable for stroke-width.\n * This allows ng-icon strokeWidth prop to work correctly.\n * Replaces hardcoded stroke-width with var(--ng-icon__stroke-width, 2).\n */\nfunction normalizeLucideSvg(svg: string): string {\n  const cssVar = 'style=\"stroke-width: var(--ng-icon__stroke-width, 2)\"';\n  return svg.replace(/stroke-width=\"[^\"]*\"/gi, cssVar);\n}\n\n/**\n * Gets fallback icon from bundled Z_ICONS if available.\n */\nfunction getFallbackIcon(name: string): string {\n  const icon = Z_ICONS[name as keyof typeof Z_ICONS];\n  if (icon) {\n    console.warn(`[ZIcon] Using bundled fallback for \"${name}\"`);\n    return icon;\n  }\n  return '';\n}\n\n/**\n * Converts ng-icons icon name to Lucide CDN format.\n * Examples:\n * - lucideArrowLeft -> arrow-left\n * - lucideAlertCircle -> alert-circle\n * - lucideTrash2 -> trash-2\n * - lucideGrid3x3 -> grid-3-x-3\n */\nfunction convertLucideIconName(name: string): string {\n  return name\n    .replace(/^lucide/, '')\n    .replace(/([A-Z])/g, '-$1')\n    .replace(/(\\d+)/g, '-$1')\n    .replace(/(\\d)([a-z])/g, '$1-$2')\n    .toLowerCase()\n    .replace(/^-/, '')\n    .replace(/--+/g, '-');\n}\n\n/**\n * Converts ng-icons Iconsax icon name to CDN format.\n * Examples:\n * - saxCloudChangeBold -> bold/cloud-change\n * - saxPauseBold -> bold/pause\n * - saxRefreshBold -> bold/refresh\n * - saxHomeOutline -> outline/home\n * - saxUserLinear -> linear/user\n */\nfunction convertIconsaxIconName(name: string): { style: string; iconName: string } | null {\n  let iconPart = name.replace(/^sax/, '');\n  // Extract style suffix (Bold, Outline, Linear, Bulk, Broken, TwoTone)\n  const styleMatch = iconPart.match(/(Bold|Outline|Linear|Bulk|Broken|TwoTone)$/i);\n  if (!styleMatch) {\n    return null;\n  }\n\n  const style = styleMatch[1].toLowerCase();\n  const styleFolder = style === 'twotone' ? 'twotone' : style;\n  // Remove style suffix from icon name\n  iconPart = iconPart.replace(/(Bold|Outline|Linear|Bulk|Broken|TwoTone)$/i, '');\n\n  // Convert PascalCase to kebab-case\n  const iconName = iconPart\n    .replace(/([A-Z])/g, '-$1')\n    .replace(/(\\d+)/g, '-$1')\n    .toLowerCase()\n    .replace(/^-/, '')\n    .replace(/--+/g, '-');\n\n  return { style: styleFolder, iconName };\n}\n\nconst LUCIDE_CDN_URL = 'https://cdn.jsdelivr.net/npm/lucide-static@latest/icons';\nconst ICONSAX_CDN_URL = 'https://cdn.jsdelivr.net/gh/placetopay-org/iconsax-vue@main/src/Base';\n\n/**\n * Provides hybrid icon loading from CDN with fallback to bundled icons:\n * - Primary: Load icons from CDN (Lucide & Iconsax)\n * - Fallback: Use bundled icons from Z_ICONS if CDN fails\n *\n * @example\n * ```typescript\n * // app.config.ts\n * providers: [\n *   provideHttpClient(),\n *   provideZIconLoader(),\n * ]\n * ```\n */\nexport function provideZIconLoader(): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    provideNgIconLoader(name => {\n      const http = inject(HttpClient);\n\n      // Load Iconsax icons from CDN\n      if (name.startsWith('sax')) {\n        const parsed = convertIconsaxIconName(name);\n        if (!parsed) {\n          console.warn(`[ZIcon] Invalid Iconsax icon name: \"${name}\"`);\n          return of(getFallbackIcon(name));\n        }\n\n        const url = `${ICONSAX_CDN_URL}/${parsed.style}/${parsed.iconName}.svg`;\n\n        return http.get(url, { responseType: 'text' }).pipe(\n          map(normalizeSaxSvg),\n          catchError(error => {\n            console.error(`[ZIcon] Failed to load Iconsax icon \"${name}\" from ${url}`, error);\n            return of(getFallbackIcon(name));\n          })\n        );\n      }\n\n      // Load Lucide icons from CDN\n      if (name.startsWith('lucide')) {\n        const iconName = convertLucideIconName(name);\n        const url = `${LUCIDE_CDN_URL}/${iconName}.svg`;\n\n        return http.get(url, { responseType: 'text' }).pipe(\n          map(normalizeLucideSvg),\n          catchError(error => {\n            const msg = `[ZIcon] Failed to load Lucide icon \"${name}\"`;\n            console.error(msg, url, error);\n            return of(getFallbackIcon(name));\n          })\n        );\n      }\n\n      console.warn(`[ZIcon] Unknown icon: \"${name}\"`);\n      return of(getFallbackIcon(name));\n    }, withCaching()),\n  ]);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["NgIcon"],"mappings":"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"}

package/fesm2022/shival99-z-ui-components-z-menu.mjs

@@ -368,7 +368,7 @@ class ZMenuComponent {
         return ZCacheService.get(this.zKey(), false) ?? false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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" }, 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\"\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 }}</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 || ''\"\n                [zArrow]=\"false\">\n                {{ selectedParent()?.name }}\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 }}</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]\">{{ child.name }}</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 }}\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 }}\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 }}</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\"\n          [zArrow]=\"false\"\n          [zOffset]=\"10\"\n          zMaxWidth=\"200px\"\n          zPosition=\"right\"\n          [zTriggerElement]=\"divLevel1\">\n          {{ child.name }}\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\"\n                      [zArrow]=\"false\"\n                      [zOffset]=\"10\"\n                      zMaxWidth=\"200px\"\n                      zPosition=\"right\"\n                      [zTriggerElement]=\"divLevel2\">\n                      {{ subChild.name }}\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:286px;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:56px}}.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 56px)}.z-sidebar-child{flex-shrink:0;height:100%;margin-left:54px;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) + 54px + 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    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" }, 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\"\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 }}</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 || ''\"\n                [zArrow]=\"false\">\n                {{ selectedParent()?.name }}\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 }}</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]\">{{ child.name }}</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 }}\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 }}\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 }}</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\"\n          [zArrow]=\"false\"\n          [zOffset]=\"10\"\n          zMaxWidth=\"200px\"\n          zPosition=\"right\"\n          [zTriggerElement]=\"divLevel1\">\n          {{ child.name }}\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\"\n                      [zArrow]=\"false\"\n                      [zOffset]=\"10\"\n                      zMaxWidth=\"200px\"\n                      zPosition=\"right\"\n                      [zTriggerElement]=\"divLevel2\">\n                      {{ subChild.name }}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZMenuComponent, decorators: [{
             type: Component,
@@ -378,7 +378,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         '[class.z-menu-no-child]': 'selectedParentHasNoChild()',
                         '[class.z-menu-mobile]': 'isMobile()',
                         '[class.z-menu-mobile-open]': 'mobileMenuOpen()',
-                    }, 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\"\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 }}</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 || ''\"\n                [zArrow]=\"false\">\n                {{ selectedParent()?.name }}\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 }}</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]\">{{ child.name }}</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 }}\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 }}\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 }}</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\"\n          [zArrow]=\"false\"\n          [zOffset]=\"10\"\n          zMaxWidth=\"200px\"\n          zPosition=\"right\"\n          [zTriggerElement]=\"divLevel1\">\n          {{ child.name }}\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\"\n                      [zArrow]=\"false\"\n                      [zOffset]=\"10\"\n                      zMaxWidth=\"200px\"\n                      zPosition=\"right\"\n                      [zTriggerElement]=\"divLevel2\">\n                      {{ subChild.name }}\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:286px;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:56px}}.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 56px)}.z-sidebar-child{flex-shrink:0;height:100%;margin-left:54px;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) + 54px + 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"] }]
+                    }, 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\"\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 }}</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 || ''\"\n                [zArrow]=\"false\">\n                {{ selectedParent()?.name }}\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 }}</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]\">{{ child.name }}</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 }}\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 }}\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 }}</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\"\n          [zArrow]=\"false\"\n          [zOffset]=\"10\"\n          zMaxWidth=\"200px\"\n          zPosition=\"right\"\n          [zTriggerElement]=\"divLevel1\">\n          {{ child.name }}\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\"\n                      [zArrow]=\"false\"\n                      [zOffset]=\"10\"\n                      zMaxWidth=\"200px\"\n                      zPosition=\"right\"\n                      [zTriggerElement]=\"divLevel2\">\n                      {{ subChild.name }}\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"] }]
         }], 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"] }] } });
 
 /**

package/fesm2022/shival99-z-ui-services.mjs

@@ -1233,10 +1233,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-/**
- * Services index
- */
-
 /**
  * Generated bundle index. Do not edit.
  */