{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "privacy-data-export-portal", "title": "Privacy Data Export Portal", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/privacy-data-export-portal/privacy-data-export-portal.component.ts", "content": "// GDPR Article 15 / CCPA personal data export portal: governance stat cards, granular\n// category selection, format chooser, encrypted archive generation, and archive history.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n Activity,\n Archive,\n Calendar,\n Check,\n CheckCircle2,\n Clock,\n CreditCard,\n Download,\n FileSpreadsheet,\n FileText,\n FolderArchive,\n HardDrive,\n Info,\n Loader2,\n Lock,\n LucideAngularModule,\n RefreshCw,\n ShieldCheck,\n User,\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 UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiCheckboxComponent } from '@/ui/checkbox/checkbox.component'\nimport {\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n} from '@/ui/select/select.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\n\nexport type ExportFormat = 'zip' | 'json' | 'csv'\nexport type ArchiveStatus = 'ready' | 'processing' | 'expired'\n\nexport interface DataCategory {\n id: string\n name: string\n description: string\n sizeMb: number\n recordCount: string\n icon: unknown\n}\n\nexport interface ArchiveRecord {\n id: string\n name: string\n format: ExportFormat\n requestedAt: string\n expiresAt: string\n expiresInDays: number\n sizeMb: number\n categories: string[]\n status: ArchiveStatus\n}\n\nconst CATEGORIES: DataCategory[] = [\n {\n id: 'profile',\n name: 'Profile & Identity',\n description: 'Account details, email history, avatar, and authentication security credentials.',\n sizeMb: 1.4,\n recordCount: '12 records',\n icon: User,\n },\n {\n id: 'activity',\n name: 'Activity & Audit Logs',\n description: 'Login history, device sessions, security events, and API access traces.',\n sizeMb: 8.6,\n recordCount: '1,420 events',\n icon: Activity,\n },\n {\n id: 'financial',\n name: 'Financial & Transactions',\n description: 'Invoices, payment receipts, subscription history, and billing ledger entries.',\n sizeMb: 3.2,\n recordCount: '48 entries',\n icon: CreditCard,\n },\n {\n id: 'workspace',\n name: 'Workspace Content & Projects',\n description: 'Created blocks, saved templates, comments, custom presets, and file uploads.',\n sizeMb: 35.0,\n recordCount: '312 objects',\n icon: FolderArchive,\n },\n]\n\nconst INITIAL_ARCHIVES: ArchiveRecord[] = [\n {\n id: 'DPA-2026-0814',\n name: 'DPA-2026-0814.zip',\n format: 'zip',\n requestedAt: 'Aug 14, 2026 · 09:24 UTC',\n expiresAt: 'Aug 25, 2026',\n expiresInDays: 4,\n sizeMb: 42.1,\n categories: ['Profile', 'Logs', 'Workspace', 'Billing'],\n status: 'ready',\n },\n {\n id: 'DPA-2026-0820',\n name: 'DPA-2026-0820.json',\n format: 'json',\n requestedAt: 'Aug 20, 2026 · 14:15 UTC',\n expiresAt: 'Aug 27, 2026',\n expiresInDays: 7,\n sizeMb: 8.6,\n categories: ['Activity & Audit Logs'],\n status: 'processing',\n },\n {\n id: 'DPA-2026-0201',\n name: 'DPA-2026-0201.zip',\n format: 'zip',\n requestedAt: 'Feb 01, 2026 · 11:02 UTC',\n expiresAt: 'Feb 08, 2026',\n expiresInDays: 0,\n sizeMb: 38.4,\n categories: ['Full Account Archive'],\n status: 'expired',\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-privacy-data-export-portal, [ui-privacy-data-export-portal]',\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 UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiCheckboxComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiSeparatorComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n
\n \n
\n
\n
\n

\n Data Privacy & Personal Data Export\n

\n
\n

\n Request, generate, and download your complete personal data archives under GDPR Article 15.\n

\n
\n
\n \n \n Request Full Data Export\n \n
\n
\n\n \n @if (notification(); as note) {\n
\n @if (note.type === 'success') {\n \n } @else {\n \n }\n
\n

{{ note.title }}

\n

{{ note.message }}

\n
\n \n Dismiss\n \n
\n }\n\n \n
\n
\n
\n

Account Creation Date

\n \n \n
\n
\n
\n
Nov 12, 2024
\n

\n 1.8 years active account age\n

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

Total Data Footprint

\n \n \n
\n
\n
\n
48.2 MB
\n

Across 6 storage domains

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

Data Retention Policy

\n \n \n
\n
\n
\n
30-Day Policy
\n

Automated purge of activity logs

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

Consent Status

\n \n \n
\n
\n
\n
3 / 3 Active
\n

Required Consents Active

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

Select Data Categories for Export

\n

Choose specific data domains to compile into your encrypted archive package.

\n
\n \n {{ isAllSelected() ? 'Deselect All' : 'Select All Categories' }}\n \n
\n
\n
\n @for (cat of categories; track cat.id) {\n
\n \n
\n
\n
\n \n \n {{ cat.name }}\n \n
\n \n {{ cat.sizeMb }} MB\n \n
\n

{{ cat.description }}

\n
\n Estimated footprint: {{ cat.recordCount }}\n
\n
\n
\n }\n
\n\n \n\n
\n
\n \n \n \n \n \n \n \n Complete ZIP Bundle (.zip)\n \n \n \n \n \n JSON Archive (.json)\n \n \n \n \n \n CSV Spreadsheet (.csv)\n \n \n \n \n
\n\n
\n
\n Selected:\n \n {{ selectedCategories().length }} of {{ categories.length }} categories\n \n ~{{ totalSelectedSize() }} MB\n
\n \n @if (isGenerating()) {\n \n } @else {\n \n }\n {{ isGenerating() ? 'Compiling Archive...' : 'Generate Data Archive' }}\n \n
\n
\n
\n
\n\n \n \n \n

\n Under GDPR Article 15 (Right of Access) and\n CCPA §1798.100, you are entitled to request and receive all\n personal data processed by this service. Export packages are generated on-demand, encrypted with AES-256, and\n available for download for 7 days before automated deletion.\n

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

Export Archive History

\n

\n Previous data archive requests and generation status. Downloads remain available for 7 days.\n

\n
\n \n {{ archives().length }} archives\n \n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n @for (arc of archives(); track arc.id) {\n \n \n \n \n \n \n \n \n }\n \n
Archive ID & FormatRequest DateExpirationFile SizeStatusAction
\n
\n
\n {{ arc.name }}\n \n {{ arc.format }}\n \n
\n

{{ arc.categories.join(', ') }}

\n
\n 		{{ arc.requestedAt }}\n
\n \n {{ arc.status === 'expired' ? 'Expired' : 'Expires in ' + arc.expiresInDays + ' days' }}\n \n

{{ arc.expiresAt }}

\n
\n 		\n {{ arc.sizeMb.toFixed(1) }} MB\n \n @if (arc.status === 'ready') {\n \n \n Ready for Download\n \n } @else if (arc.status === 'processing') {\n \n \n Processing Archive\n \n } @else {\n Expired\n }\n \n @if (arc.status === 'ready') {\n \n \n Download ZIP\n \n } @else if (arc.status === 'processing') {\n \n } @else {\n \n \n Re-request\n \n }\n
\n
\n
\n
\n \n `,\n})\nexport class UiPrivacyDataExportPortalComponent {\n protected readonly Activity = Activity\n protected readonly Archive = Archive\n protected readonly Calendar = Calendar\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Clock = Clock\n protected readonly CreditCard = CreditCard\n protected readonly Download = Download\n protected readonly FileSpreadsheet = FileSpreadsheet\n protected readonly FileText = FileText\n protected readonly FolderArchive = FolderArchive\n protected readonly HardDrive = HardDrive\n protected readonly Info = Info\n protected readonly Loader2 = Loader2\n protected readonly Lock = Lock\n protected readonly RefreshCw = RefreshCw\n protected readonly ShieldCheck = ShieldCheck\n protected readonly User = User\n\n protected readonly categories = CATEGORIES\n\n @Input() set initialCategories(v: string[] | undefined) {\n this.selectedCategories.set([...(v ?? CATEGORIES.map((c) => c.id))])\n }\n @Input() set initialFormat(v: ExportFormat | undefined) {\n this.selectedFormat.set(v ?? 'zip')\n }\n @Input('class') className?: string\n\n readonly selectedCategories = signal(CATEGORIES.map((c) => c.id))\n readonly selectedFormat = signal('zip')\n readonly archives = signal(INITIAL_ARCHIVES.map((a) => ({ ...a, categories: [...a.categories] })))\n readonly isGenerating = signal(false)\n readonly notification = signal<{ title: string; message: string; type: 'success' | 'info' } | null>(null)\n\n readonly totalSelectedSize = computed(() => {\n const sum = CATEGORIES.filter((c) => this.selectedCategories().includes(c.id)).reduce((acc, c) => acc + c.sizeMb, 0)\n return sum.toFixed(1)\n })\n\n readonly isAllSelected = computed(() => this.selectedCategories().length === CATEGORIES.length)\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n notificationClass(type: 'success' | 'info'): string {\n return cn(\n 'flex items-start gap-3 rounded-lg border p-4 text-sm transition-colors',\n type === 'success' ? 'border-success/30 bg-success/10 text-success' : 'border-info/30 bg-info/10 text-info',\n )\n }\n\n categoryCardClass(categoryId: string): string {\n return cn(\n 'group flex cursor-pointer items-start gap-3.5 rounded-lg border p-4 transition-colors',\n this.selectedCategories().includes(categoryId)\n ? 'border-primary/50 bg-primary/5 dark:bg-primary/10 shadow-xs'\n : 'border-border bg-card hover:bg-muted/40',\n )\n }\n\n expiryClass(arc: ArchiveRecord): string {\n return cn(\n 'text-xs font-medium tabular-nums',\n arc.status === 'expired'\n ? 'text-muted-foreground line-through'\n : arc.expiresInDays <= 4\n ? 'text-warning'\n : 'text-muted-foreground',\n )\n }\n\n setFormat(value: string): void {\n this.selectedFormat.set(value as ExportFormat)\n }\n\n toggleCategory(categoryId: string): void {\n this.selectedCategories.update((prev) =>\n prev.includes(categoryId) ? prev.filter((id) => id !== categoryId) : [...prev, categoryId],\n )\n }\n\n toggleAll(): void {\n this.selectedCategories.set(this.isAllSelected() ? [] : CATEGORIES.map((c) => c.id))\n }\n\n requestFullExport(): void {\n this.selectedCategories.set(CATEGORIES.map((c) => c.id))\n this.selectedFormat.set('zip')\n this.triggerExport('Full Data Export')\n }\n\n triggerExport(label = 'Custom Data Export'): void {\n if (this.selectedCategories().length === 0) return\n\n this.isGenerating.set(true)\n this.notification.set({\n title: 'Archive Request Queued',\n message: `${label} requested. Compiling ${this.selectedCategories().length} categories (${this.totalSelectedSize()} MB) with AES-256 encryption.`,\n type: 'info',\n })\n\n setTimeout(() => {\n const newId = `DPA-${new Date().toISOString().slice(0, 10).replace(/-/g, '')}-${Math.floor(100 + Math.random() * 900)}`\n const ext = this.selectedFormat()\n const catNames = CATEGORIES.filter((c) => this.selectedCategories().includes(c.id)).map(\n (c) => c.name.split(' ')[0],\n )\n\n const newRecord: ArchiveRecord = {\n id: newId,\n name: `${newId}.${ext}`,\n format: this.selectedFormat(),\n requestedAt: 'Just now',\n expiresAt: '7 days from now',\n expiresInDays: 7,\n sizeMb: parseFloat(this.totalSelectedSize()),\n categories: catNames,\n status: 'ready',\n }\n\n this.archives.update((prev) => [newRecord, ...prev])\n this.isGenerating.set(false)\n this.notification.set({\n title: 'Archive Ready',\n message: `Export package ${newRecord.name} (${newRecord.sizeMb} MB) has been generated and is ready for download.`,\n type: 'success',\n })\n }, 1200)\n }\n\n handleDownload(archive: ArchiveRecord): void {\n this.notification.set({\n title: 'Download Initiated',\n message: `Securely downloading ${archive.name} (${archive.sizeMb} MB). SHA-256 checksum verified.`,\n type: 'success',\n })\n }\n\n handleReRequest(archive: ArchiveRecord): void {\n this.notification.set({\n title: 'Archive Re-generation Requested',\n message: `Re-generating expired archive for ${archive.categories.join(', ')}.`,\n type: 'info',\n })\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/privacy-data-export-portal/privacy-data-export-portal.component.ts" }, { "path": "packages/registry-angular/blocks/privacy-data-export-portal/index.ts", "content": "export {\n UiPrivacyDataExportPortalComponent,\n type ExportFormat,\n type ArchiveStatus,\n type DataCategory,\n type ArchiveRecord,\n} from './privacy-data-export-portal.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/privacy-data-export-portal/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "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/checkbox.json", "https://uipkge.dev/r/angular/select.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/table.json" ], "description": "GDPR Article 15 and CCPA personal data export portal with privacy governance stat cards, granular category export selector, format chooser, and export archive history table.", "categories": [ "legal", "security", "app" ] }