itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiButtonComponent,\n UiGanttComponent,\n UiGanttHeaderComponent,\n UiGanttTimelineComponent,\n UiGanttTreeComponent,\n UiInputComponent,\n UiRoadmapAddTaskDialogComponent,\n UiRoadmapMetricsComponent,\n UiRoadmapTaskDetailComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n ],\n template: `\n
\n \n
\n
\n
{{ title }} \n
{{ description }}
\n
\n\n
\n \n \n \n \n
\n
\n\n \n
\n\n \n
\n
\n
\n
\n\n
\n \n \n \n All Status \n Completed \n In Progress \n To Do \n \n \n\n
\n \n \n \n All Assignees \n Sarah Connor \n Marcus Rivera \n Priya Nair \n Sundar Krishnan \n Diane Cho \n \n \n
\n\n
\n Showing {{ filteredTasks().length }} of\n {{ tasks().length }} deliverables\n (Right-click task for quick actions) \n
\n
\n\n \n
\n \n
\n \n\n \n
\n\n \n
\n
\n `,\n})\nexport class UiProjectRoadmapComponent {\n protected readonly Download = Download\n protected readonly Plus = Plus\n protected readonly Search = Search\n\n @Input() title = 'Engineering Q3 Deliverables'\n @Input() description = 'Track roadmap work breakdown, sprint milestones, and cross-team dependencies.'\n @Input() set initialTasks(v: GanttTask[] | undefined) {\n this.tasks.set((v ?? defaultTasks).map((t) => ({ ...t })))\n }\n @Input('class') className?: string\n\n readonly tasks = signal
(defaultTasks.map((t) => ({ ...t })))\n readonly searchQuery = signal('')\n readonly statusFilter = signal('all')\n readonly assigneeFilter = signal('all')\n readonly scale = signal('day')\n\n readonly selectedTask = signal(null)\n readonly sheetOpen = signal(false)\n readonly addDialogOpen = signal(false)\n\n readonly filteredTasks = computed(() => {\n const q = this.searchQuery().toLowerCase()\n const status = this.statusFilter()\n const assignee = this.assigneeFilter()\n return this.tasks().filter((t) => {\n const matchesSearch = !q || t.name.toLowerCase().includes(q)\n const matchesStatus = status === 'all' || t.status === status\n const matchesAssignee = assignee === 'all' || t.assignee?.name === assignee\n return matchesSearch && matchesStatus && matchesAssignee\n })\n })\n\n get rootClass(): string {\n return ['space-y-6', this.className].filter(Boolean).join(' ')\n }\n\n handleTaskClick(task: GanttTask): void {\n this.selectedTask.set(task)\n this.sheetOpen.set(true)\n }\n\n handleAddTask(newTask: GanttTask): void {\n this.tasks.update((prev) => [...prev, newTask])\n }\n\n handleStatusChange(task: GanttTask, status: GanttTaskStatus): void {\n this.tasks.update((prev) =>\n prev.map((t) => (t.id === task.id ? { ...t, status, progress: status === 'done' ? 100 : t.progress } : t)),\n )\n }\n\n handlePriorityChange(task: GanttTask, priority: GanttTaskPriority): void {\n this.tasks.update((prev) => prev.map((t) => (t.id === task.id ? { ...t, priority } : t)))\n }\n\n handleDuplicate(task: GanttTask): void {\n const cloned: GanttTask = { ...task, id: `task-${Date.now()}`, name: `${task.name} (Copy)` }\n this.tasks.update((prev) => [...prev, cloned])\n }\n\n handleDelete(task: GanttTask): void {\n this.tasks.update((prev) => prev.filter((t) => t.id !== task.id))\n }\n}\n",
"type": "registry:block",
"target": "~/src/app/components/blocks/project-roadmap/project-roadmap.component.ts"
},
{
"path": "packages/registry-angular/blocks/project-roadmap/roadmap-metrics.component.ts",
"content": "// Summary metric cards for the project roadmap: overall progress, in-progress count,\n// completed count, and milestone count. Port of the Vue RoadmapMetrics block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport { AlertCircle, CheckCircle2, Clock, LucideAngularModule, Milestone } from 'lucide-angular'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport type { GanttTask } from '@/ui/gantt/types'\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-roadmap-metrics, [ui-roadmap-metrics]',\n standalone: true,\n host: { '[attr.class]': '\"contents\"' },\n imports: [LucideAngularModule, UiCardComponent, UiCardContentComponent],\n template: `\n \n
\n
\n
\n
Overall Progress
\n
{{ progress() }}%
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
In Progress
\n
{{ inProgress() }}
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
Completed
\n
{{ completed() }}
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
Milestones
\n
{{ milestones() }}
\n
\n
\n
\n
\n
\n
([])\n\n readonly total = computed(() => this._tasks().length)\n readonly completed = computed(() => this._tasks().filter((t) => t.status === 'done').length)\n readonly inProgress = computed(() => this._tasks().filter((t) => t.status === 'in-progress').length)\n readonly milestones = computed(() => this._tasks().filter((t) => t.isMilestone).length)\n readonly progress = computed(() => {\n const total = this.total()\n if (total === 0) return 0\n const sum = this._tasks().reduce((acc, t) => acc + (t.progress ?? 0), 0)\n return Math.round(sum / total)\n })\n}\n",
"type": "registry:block",
"target": "~/src/app/components/blocks/project-roadmap/roadmap-metrics.component.ts"
},
{
"path": "packages/registry-angular/blocks/project-roadmap/roadmap-task-detail.component.ts",
"content": "// Slide-over detail drawer for the selected roadmap task: status + milestone badges,\n// schedule dates, completion bar, and owner. Port of the Vue RoadmapTaskDetail block 1:1.\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, computed } from '@angular/core'\nimport { Calendar, LucideAngularModule } from 'lucide-angular'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport {\n UiSheetComponent,\n UiSheetContentComponent,\n UiSheetDescriptionComponent,\n UiSheetHeaderComponent,\n UiSheetTitleComponent,\n} from '@/ui/sheet/sheet.component'\nimport type { GanttTask } from '@/ui/gantt/types'\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-roadmap-task-detail, [ui-roadmap-task-detail]',\n standalone: true,\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiSheetComponent,\n UiSheetContentComponent,\n UiSheetDescriptionComponent,\n UiSheetHeaderComponent,\n UiSheetTitleComponent,\n ],\n template: `\n \n @if (task) {\n
\n
\n
\n \n {{ statusBadge().label }}\n \n @if (task.isMilestone) {\n Milestone \n }\n
\n
\n {{ task.name }}\n \n
\n Task ID: {{ task.id }} \n
\n
\n\n
\n \n
\n
Schedule \n
\n {{ task.startDate }} \n → \n {{ task.endDate }} \n
\n
\n\n \n @if (task.progress != null) {\n
\n
\n Completion \n {{ task.progress }}% \n
\n
\n
\n
\n }\n\n \n @if (task.assignee) {\n
\n
Owner \n
\n
\n {{ task.assignee.initials || task.assignee.name.charAt(0) }}\n \n
{{ task.assignee.name }} \n
\n
\n }\n