{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "notifications-popover", "title": "Notifications Popover", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/notifications-popover/notifications-popover.component.ts", "content": "import {\n Component,\n ContentChild,\n Injector,\n TemplateRef,\n ViewChild,\n computed,\n signal,\n ChangeDetectionStrategy,\n} from '@angular/core'\nimport { NgTemplateOutlet } from '@angular/common'\nimport {\n Archive,\n BellOff,\n Calendar,\n CreditCard,\n FileText,\n GraduationCap,\n LucideAngularModule,\n Target,\n UserPlus,\n X,\n type LucideIconData,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiPopoverComponent,\n UiPopoverContentComponent,\n UiPopoverTriggerComponent,\n} from '@/ui/popover/popover.component'\n\nexport type NotificationCategory = 'hr' | 'payroll' | 'timeoff' | 'performance' | 'training' | 'system'\n\nexport interface Notification {\n id: string\n title: string\n body: string\n category: NotificationCategory\n timestamp: Date\n read: boolean\n actionUrl?: string\n actor?: string\n}\n\n/** Context of the trigger template: `let-unreadCount=\"unreadCount\"` (or `let-count` for $implicit). */\nexport interface NotificationsPopoverTriggerContext {\n $implicit: number\n unreadCount: number\n}\n\nconst categoryConfig: Record = {\n hr: {\n icon: UserPlus,\n accent: 'bg-success',\n bg: 'bg-success/10 text-success',\n },\n payroll: {\n icon: CreditCard,\n accent: 'bg-info',\n bg: 'bg-info/10 text-info',\n },\n timeoff: {\n icon: Calendar,\n accent: 'bg-chart-3',\n bg: 'bg-chart-3/10 text-chart-3',\n },\n performance: {\n icon: Target,\n accent: 'bg-warning',\n bg: 'bg-warning/10 text-warning',\n },\n training: {\n icon: GraduationCap,\n accent: 'bg-primary',\n bg: 'bg-primary/10 text-primary',\n },\n system: {\n icon: FileText,\n accent: 'bg-muted-foreground',\n bg: 'bg-muted text-muted-foreground',\n },\n}\n\nconst now = new Date()\n\nconst initialNotifications: Notification[] = [\n {\n id: '1',\n title: 'Time off approved',\n body: 'Your annual leave request for Mar 15-18 has been approved by Sarah Connor.',\n category: 'timeoff',\n timestamp: new Date(now.getTime() - 12 * 60 * 1000),\n read: false,\n actor: 'Sarah Connor',\n },\n {\n id: '2',\n title: 'New employee onboarded',\n body: 'Marcus Rivera has joined the Engineering team as Senior Developer.',\n category: 'hr',\n timestamp: new Date(now.getTime() - 45 * 60 * 1000),\n read: false,\n actor: 'Marcus Rivera',\n },\n {\n id: '3',\n title: 'Performance review due',\n body: 'Annual performance review for 3 direct reports is due by end of this week.',\n category: 'performance',\n timestamp: new Date(now.getTime() - 2 * 60 * 60 * 1000),\n read: false,\n },\n {\n id: '4',\n title: 'Payroll processed',\n body: 'March 2026 payroll has been processed successfully. 103 employees paid.',\n category: 'payroll',\n timestamp: new Date(now.getTime() - 5 * 60 * 60 * 1000),\n read: true,\n },\n {\n id: '5',\n title: 'Training enrollment open',\n body: 'New course available: \"Leadership Fundamentals Q2\". Enroll before Mar 20.',\n category: 'training',\n timestamp: new Date(now.getTime() - 8 * 60 * 60 * 1000),\n read: true,\n },\n {\n id: '6',\n title: 'Document requires signature',\n body: 'Updated Employee Handbook 2026 needs your acknowledgement.',\n category: 'system',\n timestamp: new Date(now.getTime() - 26 * 60 * 60 * 1000),\n read: true,\n actionUrl: '/documents',\n },\n {\n id: '7',\n title: 'Time off request pending',\n body: 'Alice Johnson requested sick leave for Mar 12. Awaiting your approval.',\n category: 'timeoff',\n timestamp: new Date(now.getTime() - 28 * 60 * 60 * 1000),\n read: true,\n actor: 'Alice Johnson',\n },\n {\n id: '8',\n title: 'Benefits enrollment closing',\n body: \"Open enrollment period ends Mar 31. 12 employees haven't enrolled yet.\",\n category: 'hr',\n timestamp: new Date(now.getTime() - 48 * 60 * 60 * 1000),\n read: true,\n },\n]\n\nconst todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate())\n\nfunction formatTime(date: Date): string {\n const diffMs = now.getTime() - date.getTime()\n const diffMin = Math.floor(diffMs / 60000)\n if (diffMin < 1) return 'Just now'\n if (diffMin < 60) return `${diffMin}m ago`\n const diffHrs = Math.floor(diffMin / 60)\n if (diffHrs < 24) return `${diffHrs}h ago`\n const diffDays = Math.floor(diffHrs / 24)\n if (diffDays === 1) return 'Yesterday'\n return `${diffDays}d ago`\n}\n\n/**\n * NotificationsPopover -- the React block, 1:1. A header-grade notifications panel:\n * All / Unread filter tabs, Today / Earlier groups, category-coloured accent bars,\n * hover-dismiss, mark-all-read and a staggered slide-in.\n *\n * Bring your own trigger (React's `trigger` render prop, Vue's scoped slot): project an\n * `` whose context carries the live `unreadCount`, and put\n * `ui-popover-trigger` on the element -- the Radix `asChild` equivalent, so the button\n * itself gets aria-expanded / data-state and focus returns to it on close:\n *\n * ```html\n * \n * \n * \n * \n * \n * ```\n *\n * The React block injects a small stylesheet (scrollbar, hover row, slide-in keyframe,\n * bottom fade); here the same rules are Tailwind utilities, the keyframe coming from\n * tw-animate-css (`animate-in fade-in-0 slide-in-from-bottom-1`), which Popover already uses.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-notifications-popover, [ui-notifications-popover]',\n standalone: true,\n // React renders no wrapper (Popover root has no element): keep the host out of layout.\n host: { class: 'contents' },\n imports: [\n NgTemplateOutlet,\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiPopoverComponent,\n UiPopoverTriggerComponent,\n UiPopoverContentComponent,\n ],\n template: `\n \n @if (triggerTemplate) {\n \n } @else {\n \n }\n \n \n
\n
\n

Notifications

\n @if (unreadCount() > 0) {\n \n {{ unreadCount() }}\n \n }\n
\n @if (unreadCount() > 0) {\n \n Mark all read\n \n }\n
\n\n
\n
\n \n \n
\n
\n\n \n @if (filteredNotifications().length === 0) {\n
\n
\n \n
\n

All caught up

\n

\n No {{ activeFilter() === 'unread' ? 'unread ' : '' }}notifications\n

\n
\n } @else {\n @if (groupedNotifications().today.length > 0) {\n
\n Today\n
\n @for (n of groupedNotifications().today; track n.id; let index = $index) {\n \n }\n }\n\n @if (groupedNotifications().earlier.length > 0) {\n
\n Earlier\n
\n @for (n of groupedNotifications().earlier; track n.id; let index = $index) {\n \n }\n }\n }\n \n\n
\n \n \n View all notifications\n \n
\n \n \n\n \n \n \n\n
\n
\n \n
\n\n
\n
\n

\n {{ n.title }}\n

\n
\n \n {{ formatTime(n.timestamp) }}\n \n @if (!n.read) {\n \n }\n
\n
\n

{{ n.body }}

\n
\n\n \n \n \n
\n \n \n `,\n})\nexport class UiNotificationsPopoverComponent {\n /** Your trigger: an `` receiving `unreadCount`; mark its element `ui-popover-trigger`. */\n @ContentChild(TemplateRef) triggerTemplate?: TemplateRef\n @ViewChild(UiPopoverComponent, { static: true }) private popover!: UiPopoverComponent\n\n /** Lets `ui-popover-trigger` inside the consumer's template find this block's Popover root. */\n readonly triggerInjector = Injector.create({\n providers: [{ provide: UiPopoverComponent, useFactory: () => this.popover }],\n })\n\n protected readonly Archive = Archive\n protected readonly BellOff = BellOff\n protected readonly X = X\n protected readonly config = categoryConfig\n protected readonly cn = cn\n protected readonly formatTime = formatTime\n\n readonly notifications = signal(initialNotifications)\n readonly activeFilter = signal<'all' | 'unread'>('all')\n readonly isOpen = signal(false)\n\n readonly unreadCount = computed(() => this.notifications().filter((n) => !n.read).length)\n\n readonly filteredNotifications = computed(() => {\n if (this.activeFilter() === 'unread') {\n return this.notifications().filter((n) => !n.read)\n }\n return this.notifications()\n })\n\n /**\n * The row template's `let-n` is untyped (`any`) in an ng-template context, and indexing the\n * config Record with it fails a strict consumer app (TS7053). A typed accessor keeps it typed.\n */\n protected categoryStyle(n: Notification) {\n return this.config[n.category]\n }\n\n readonly groupedNotifications = computed(() => {\n const today = this.filteredNotifications().filter((n) => n.timestamp >= todayStart)\n const earlier = this.filteredNotifications().filter((n) => n.timestamp < todayStart)\n return { today, earlier }\n })\n\n protected tabClass(filter: 'all' | 'unread'): string {\n return cn(\n 'focus-visible:ring-ring relative rounded-t px-3 pb-2.5 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',\n this.activeFilter() === filter ? 'text-foreground' : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n markAsRead(id: string): void {\n this.notifications.update((prev) => prev.map((n) => (n.id === id ? { ...n, read: true } : n)))\n }\n\n markAllRead(): void {\n this.notifications.update((prev) => prev.map((n) => ({ ...n, read: true })))\n }\n\n dismissNotification(id: string): void {\n this.notifications.update((prev) => prev.filter((n) => n.id !== id))\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/notifications-popover/notifications-popover.component.ts" }, { "path": "packages/registry-angular/blocks/notifications-popover/index.ts", "content": "export {\n UiNotificationsPopoverComponent,\n type Notification,\n type NotificationCategory,\n type NotificationsPopoverTriggerContext,\n} from './notifications-popover.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/notifications-popover/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/popover.json" ], "description": "Header-grade notifications panel. Slot-trigger Popover the consumer wraps around their own Bell button. Filter tabs (All/Unread), Today/Earlier groups, category-coloured accent bars, hover-dismiss, mark-all-read, slide-in animation. Slot receives `unreadCount` so the trigger can show a badge.", "categories": [ "communication", "dashboard", "overlay" ] }