{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "content-calendar-matrix", "title": "Content Calendar Matrix", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/content-calendar-matrix/content-calendar-matrix.component.ts", "content": "// Editorial publishing calendar and content matrix with pacing KPI summary cards,\n// channel filter tabs, month picker, publication status pipeline, author avatars, SEO\n// keywords, and contextual action menus. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n Calendar,\n CalendarCheck,\n CalendarDays,\n CheckCircle2,\n Clock,\n FileText,\n Layers,\n LucideAngularModule,\n Mail,\n MoreHorizontal,\n PenLine,\n Pencil,\n Plus,\n Search,\n Share2,\n Trash2,\n UserCheck,\n Video,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport {\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuLabelComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuTriggerComponent,\n} from '@/ui/dropdown-menu/dropdown-menu.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport {\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n} from '@/ui/select/select.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\n\nexport type ContentChannel = 'all' | 'blog' | 'newsletter' | 'youtube' | 'social'\nexport type ContentStatus = 'published' | 'scheduled' | 'in_review' | 'draft'\n\nexport interface ContentItem {\n id: string\n title: string\n channel: 'blog' | 'newsletter' | 'youtube' | 'social'\n channelLabel: string\n publishDate: string\n publishTime: string\n author: { name: string; role: string; avatar: string }\n status: ContentStatus\n statusLabel: string\n keywords: string[]\n format: string\n}\n\nconst contentItems: ContentItem[] = [\n {\n id: 'cnt-01',\n title: 'Deep Dive: Headless Reka UI Primitives in Vue 3.5',\n channel: 'blog',\n channelLabel: 'Blog',\n publishDate: 'Sep 04',\n publishTime: '10:00 AM EST',\n author: { name: 'Sarah Chen', role: 'Lead Developer Advocate', avatar: 'SC' },\n status: 'published',\n statusLabel: 'Published',\n keywords: ['#vue3', '#reka-ui', '#frontend'],\n format: 'Technical Guide',\n },\n {\n id: 'cnt-02',\n title: 'Building Zero-Runtime Design Systems with Tailwind CSS v4',\n channel: 'youtube',\n channelLabel: 'YouTube',\n publishDate: 'Sep 08',\n publishTime: '02:00 PM EST',\n author: { name: 'Marcus Vance', role: 'Senior UI Engineer', avatar: 'MV' },\n status: 'scheduled',\n statusLabel: 'Scheduled',\n keywords: ['#tailwindcss', '#design-systems', '#webdev'],\n format: 'Video Tutorial',\n },\n {\n id: 'cnt-03',\n title: 'Frontend Weekly #142: Subgrid Mastery & CSS Anchor Positioning',\n channel: 'newsletter',\n channelLabel: 'Newsletter',\n publishDate: 'Sep 12',\n publishTime: '09:00 AM EST',\n author: { name: 'Elena Rostova', role: 'Technical Editor', avatar: 'ER' },\n status: 'scheduled',\n statusLabel: 'Scheduled',\n keywords: ['#css', '#newsletter', '#subgrid'],\n format: 'Email Dispatch',\n },\n {\n id: 'cnt-04',\n title: 'Accessible Command Palettes & Keyboard Shortcuts Architecture',\n channel: 'blog',\n channelLabel: 'Blog',\n publishDate: 'Sep 16',\n publishTime: '11:30 AM EST',\n author: { name: 'David Kim', role: 'Accessibility Specialist', avatar: 'DK' },\n status: 'in_review',\n statusLabel: 'In Review',\n keywords: ['#a11y', '#cmdk', '#keyboard-nav'],\n format: 'Deep Dive',\n },\n {\n id: 'cnt-05',\n title: 'Product Drop: 12 New Enterprise Blocks for Nuxt 4 & React',\n channel: 'social',\n channelLabel: 'Social',\n publishDate: 'Sep 21',\n publishTime: '04:00 PM EST',\n author: { name: 'Aisha Patel', role: 'Product Marketing Lead', avatar: 'AP' },\n status: 'in_review',\n statusLabel: 'In Review',\n keywords: ['#changelog', '#uipkge', '#react', '#vue'],\n format: 'Social Campaign',\n },\n {\n id: 'cnt-06',\n title: 'Micro-Interactions & Spring Physics in Modern Web Applications',\n channel: 'youtube',\n channelLabel: 'YouTube',\n publishDate: 'Sep 26',\n publishTime: '01:15 PM EST',\n author: { name: 'Lucas Meyer', role: 'Motion Designer', avatar: 'LM' },\n status: 'draft',\n statusLabel: 'Draft',\n keywords: ['#animation', '#spring-physics', '#ui-motion'],\n format: 'Interactive Workshop',\n },\n]\n\nconst channelFilters: Array<{ value: ContentChannel; label: string }> = [\n { value: 'all', label: 'All Channels' },\n { value: 'blog', label: 'Blog' },\n { value: 'newsletter', label: 'Newsletter' },\n { value: 'youtube', label: 'YouTube' },\n { value: 'social', label: 'Social' },\n]\n\nconst channelBadge: Record = {\n blog: 'bg-info/10 text-info border-info/20',\n newsletter: 'bg-chart-1/10 text-chart-1 border-chart-1/20',\n youtube: 'bg-destructive/10 text-destructive border-destructive/20',\n social: 'bg-info/10 text-info border-info/20',\n}\n\nconst statusBadge: Record = {\n published: 'bg-success/10 text-success border-success/20',\n scheduled: 'bg-info/10 text-info border-info/20',\n in_review: 'bg-warning/10 text-warning border-warning/20',\n draft: 'bg-muted text-muted-foreground border-border',\n}\n\nconst statusDot: Record = {\n published: 'bg-success',\n scheduled: 'bg-info',\n in_review: 'bg-warning',\n draft: 'bg-muted-foreground',\n}\n\nconst statusLabel: Record = {\n published: 'Published',\n scheduled: 'Scheduled',\n in_review: 'In Review',\n draft: 'Draft',\n}\n\nconst channelLabel: Record = {\n blog: 'Blog',\n newsletter: 'Newsletter',\n youtube: 'YouTube',\n social: 'Social',\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-content-calendar-matrix, [ui-content-calendar-matrix]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuLabelComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuTriggerComponent,\n UiInputComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiTableComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n
\n \n
\n
\n
\n

{{ title }}

\n Editorial Desk\n
\n

{{ subtitle }}

\n
\n\n
\n \n \n \n \n August 2026\n September 2026\n October 2026\n November 2026\n \n \n\n \n \n
\n
\n\n \n
\n
\n
\n
\n

Total Planned Content

\n
\n \n
\n
\n
\n
\n 24\n Pieces this month\n
\n

+6 pieces vs previous month

\n
\n
\n
\n
\n
\n
\n

Scheduled for Publish

\n
\n \n
\n
\n
\n
\n 8\n items ready\n
\n

Next drop: Sep 08 · 02:00 PM EST

\n
\n
\n
\n
\n
\n
\n

In Review / Drafting

\n
\n \n
\n
\n
\n
\n 12\n in progress\n
\n

7 in editorial review · 5 in drafting

\n
\n
\n
\n
\n
\n
\n

Published this Month

\n
\n \n
\n
\n
\n
\n 4\n live\n
\n

100% on-schedule publishing rate

\n
\n
\n
\n
\n\n \n
\n \n
\n @for (filter of channelFilters; track filter.value) {\n \n \n {{ filter.label }}\n \n }\n
\n\n \n
\n \n \n
\n
\n\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n @for (item of filteredItems(); track item.id) {\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n \n }\n\n @if (filteredItems().length === 0) {\n \n \n \n }\n \n
Publish Date & TimeContent TitleChannelAuthorStatusSEO / Keywords\n Actions\n
\n
\n \n {{ item.publishDate }} · {{ item.publishTime }}\n
\n 		\n
\n

{{ item.title }}

\n

{{ item.format }}

\n
\n 		\n \n \n {{ channelName(item.channel) }}\n \n \n
\n \n \n {{ item.author.avatar }}\n \n \n
\n

{{ item.author.name }}

\n

{{ item.author.role }}

\n
\n
\n 		\n \n \n {{ statusName(item.status) }}\n \n \n
\n @for (keyword of item.keywords; track keyword) {\n \n {{ keyword }}\n \n }\n
\n 		\n \n \n \n Open actions for {{ item.title }}\n \n \n Manage Content\n \n \n \n Edit item\n \n \n \n Reschedule\n \n \n \n Assign reviewer\n \n \n \n \n Delete item\n \n \n \n
\n No content items found matching the selected channel filter or search query.\n
\n
\n\n \n
\n

\n Showing {{ filteredItems().length }} of\n {{ totalItems }} scheduled content pieces for\n September 2026\n

\n
\n \n \n
\n
\n
\n `,\n})\nexport class UiContentCalendarMatrixComponent {\n protected readonly Calendar = Calendar\n protected readonly CalendarCheck = CalendarCheck\n protected readonly CalendarDays = CalendarDays\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Clock = Clock\n protected readonly FileText = FileText\n protected readonly Layers = Layers\n protected readonly Mail = Mail\n protected readonly MoreHorizontal = MoreHorizontal\n protected readonly PenLine = PenLine\n protected readonly Pencil = Pencil\n protected readonly Plus = Plus\n protected readonly Search = Search\n protected readonly Share2 = Share2\n protected readonly Trash2 = Trash2\n protected readonly UserCheck = UserCheck\n protected readonly Video = Video\n\n protected readonly channelFilters = channelFilters\n protected readonly totalItems = contentItems.length\n\n @Input() title = 'Editorial Content Calendar'\n @Input() subtitle = 'Schedule, organize, and track cross-channel editorial pipelines and publishing milestones.'\n @Input('class') className?: string\n\n readonly selectedMonth = signal('2026-09')\n readonly selectedChannel = signal('all')\n readonly searchQuery = signal('')\n\n readonly filteredItems = computed(() => {\n const query = this.searchQuery().trim().toLowerCase()\n const channel = this.selectedChannel()\n return contentItems.filter((item) => {\n const matchesChannel = channel === 'all' || item.channel === channel\n const matchesQuery =\n !query ||\n item.title.toLowerCase().includes(query) ||\n item.author.name.toLowerCase().includes(query) ||\n item.keywords.some((k) => k.toLowerCase().includes(query))\n return matchesChannel && matchesQuery\n })\n })\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n filterIcon(value: ContentChannel): unknown {\n switch (value) {\n case 'blog':\n return FileText\n case 'newsletter':\n return Mail\n case 'youtube':\n return Video\n case 'social':\n return Share2\n default:\n return Layers\n }\n }\n\n channelIcon(channel: string): unknown {\n switch (channel) {\n case 'blog':\n return FileText\n case 'newsletter':\n return Mail\n case 'youtube':\n return Video\n default:\n return Share2\n }\n }\n\n channelBadgeClass(channel: string): string {\n return cn('gap-1 text-xs font-medium', channelBadge[channel] ?? '')\n }\n\n channelName(channel: string): string {\n return channelLabel[channel] ?? channel\n }\n\n statusBadgeClass(status: ContentStatus): string {\n return cn('gap-1.5 text-xs font-medium', statusBadge[status])\n }\n\n statusDotClass(status: ContentStatus): string {\n return statusDot[status]\n }\n\n statusName(status: ContentStatus): string {\n return statusLabel[status]\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/content-calendar-matrix/content-calendar-matrix.component.ts" }, { "path": "packages/registry-angular/blocks/content-calendar-matrix/index.ts", "content": "export {\n UiContentCalendarMatrixComponent,\n type ContentChannel,\n type ContentStatus,\n type ContentItem,\n} from './content-calendar-matrix.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/content-calendar-matrix/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/avatar.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/dropdown-menu.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/select.json", "https://uipkge.dev/r/angular/table.json" ], "description": "Editorial publishing calendar and content matrix with pacing KPI summary cards, channel filter tabs, month picker, publication status pipeline, author avatars, SEO keywords, and contextual action menus.", "categories": [ "media", "app", "marketing" ] }