{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "security-compliance-badges", "title": "Security Compliance Badges", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/security-compliance-badges/security-compliance-badges.component.ts", "content": "// Enterprise security and compliance workbench: SOC2, ISO27001, GDPR, and HIPAA\n// audit inspection with cryptographic SHA-256 fingerprint verification and a\n// whitepaper download action. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport { Check, CheckCircle2, Copy, Download, LucideAngularModule, RefreshCw, ShieldCheck } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent } from '@/ui/card/card.component'\n\ninterface CompliancePillar {\n id: string\n name: string\n standard: string\n status: string\n auditor: string\n lastAudit: string\n sha256: string\n highlights: string[]\n}\n\nconst pillars: CompliancePillar[] = [\n {\n id: 'soc2',\n name: 'SOC2 Type II Certified',\n standard: 'AICPA Trust Services Criteria (Security, Availability, Confidentiality)',\n status: 'Clean Opinion (Zero Exceptions)',\n auditor: 'Schellman & Company, LLC',\n lastAudit: 'Q4 2025 Audit Period',\n sha256: '9f86d081884c7d659a2feaa0c55ad015a3bf4f1b2b0b822cd15d6c15b0f00a08',\n highlights: [\n 'Continuous 24/7 automated control monitoring via Drata',\n 'Annual independent black-box & white-box penetration testing',\n 'Mandatory hardware key 2FA (WebAuthn / FIDO2) across all staff',\n 'Immutable tamper-evident centralized audit logs with 365-day retention',\n ],\n },\n {\n id: 'iso27001',\n name: 'ISO/IEC 27001:2022',\n standard: 'Information Security Management System (ISMS)',\n status: 'Globally Certified',\n auditor: 'BSI Group Global',\n lastAudit: 'Continuous Surveillance',\n sha256: '5e884898da28047151d0e56f8dc6292773603d0d6aabbdd62a11ef721d1542d8',\n highlights: [\n 'Strict cryptographic key management with automated rotation',\n 'Zero vendor data sharing or telemetry monetization guarantees',\n 'Comprehensive disaster recovery with RPO < 1 min, RTO < 15 mins',\n 'Physical security auditing of all tier-4 sovereign edge hosting locations',\n ],\n },\n {\n id: 'gdpr',\n name: 'GDPR & CCPA Compliant',\n standard: 'EU 2016/679 & California Consumer Privacy Act',\n status: 'Strict Privacy Tier',\n auditor: 'Internal Privacy Council + DPO',\n lastAudit: 'Live Continuous Compliance',\n sha256: '4b227777d4dd1fc61c6f884f48641d02b4d121d3fd328cb08b5531fcacdabf8a',\n highlights: [\n 'Zero third-party tracking cookies or marketing beacons in registry AST',\n 'Automated self-serve data portability & deletion API endpoints',\n 'EU Standard Contractual Clauses (SCCs) baked into standard DPA',\n 'Encrypted localized edge caches with sovereign residency enforcement',\n ],\n },\n {\n id: 'hipaa',\n name: 'HIPAA & HITECH Ready',\n standard: 'Health Insurance Portability and Accountability Act',\n status: 'BAA Eligible',\n auditor: 'Coalfire Systems',\n lastAudit: 'Annual Attestation',\n sha256: 'ef2d127de37b942baad06145e54b0c619a1f22327b2ebbcfbec78f5564afe39d',\n highlights: [\n 'AES-256 encryption for data at rest and TLS 1.3 in transit',\n 'Automated Business Associate Agreement (BAA) execution for enterprise tiers',\n 'Strict role-based access control (RBAC) with just-in-time privilege escalation',\n 'PHI isolation architecture with zero persistent client-side caching',\n ],\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-security-compliance-badges, [ui-security-compliance-badges]',\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: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiCardComponent],\n template: `\n
\n \n \n\n
\n \n
\n \n \n Enterprise Trust & Cryptographic Security\n \n

\n Built for the most compliance-sensitive architectures.\n

\n

\n Zero runtime bloat, zero tracking beacons, and independent third-party verified attestations for your SecOps\n team.\n

\n
\n\n \n
\n @for (p of pillars; track p.id) {\n
\n\n

{{ p.name.split(' ')[0] }}

\n

{{ p.status }}

\n \n }\n
\n\n \n \n \n
\n
\n
\n

{{ currentPillar().name }}

\n \n Verified\n \n
\n

{{ currentPillar().standard }}

\n
\n\n \n @if (isDownloadingReport()) {\n \n } @else {\n \n }\n {{ isDownloadingReport() ? 'Preparing DPA Bundle...' : 'Download Security Whitepaper' }}\n \n
\n\n \n
\n \n
\n

Key Technical Controls

\n
    \n @for (item of currentPillar().highlights; track item) {\n
  • \n \n {{ item }}\n
    • \n }\n
\n
\n\n \n
\n
\n
\n Independent Auditor:\n {{ currentPillar().auditor }}\n
\n
\n Audit Cycle:\n {{ currentPillar().lastAudit }}\n
\n
\n CVE Vulnerability Scan:\n 0 High • 0 Critical\n
\n
\n\n \n
\n
\n Attestation PDF SHA-256 Fingerprint:\n \n @if (copiedHash()) {\n \n } @else {\n \n }\n {{ copiedHash() ? 'Copied' : 'Copy Hash' }}\n \n
\n \n {{ currentPillar().sha256 }}\n

\n
\n
\n
\n \n \n
\n `,\n})\nexport class UiSecurityComplianceBadgesComponent {\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Copy = Copy\n protected readonly Download = Download\n protected readonly RefreshCw = RefreshCw\n protected readonly ShieldCheck = ShieldCheck\n\n protected readonly pillars = pillars\n\n @Input('class') className?: string\n\n readonly activeTab = signal('soc2')\n readonly copiedHash = signal(false)\n readonly isDownloadingReport = signal(false)\n private copyTimer: ReturnType | undefined\n private downloadTimer: ReturnType | undefined\n\n readonly currentPillar = computed(() => pillars.find((p) => p.id === this.activeTab()) ?? pillars[0]!)\n\n get rootClass(): string {\n return cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', this.className)\n }\n\n tileClass(id: string): string {\n return cn(\n 'group relative overflow-hidden rounded-2xl border p-4 text-left transition-colors',\n this.activeTab() === id\n ? 'border-success/80 bg-success/5 ring-success/30 shadow-md ring-1'\n : 'border-border bg-card/70 hover:border-border hover:bg-card',\n )\n }\n\n dotClass(id: string): string {\n return cn('size-2 rounded-full', this.activeTab() === id ? 'bg-success animate-pulse' : 'bg-muted')\n }\n\n copyHash(): void {\n try {\n void navigator.clipboard.writeText(this.currentPillar().sha256)\n } catch {\n // Clipboard unavailable (e.g. insecure context): still flip the label.\n }\n this.copiedHash.set(true)\n clearTimeout(this.copyTimer)\n this.copyTimer = setTimeout(() => this.copiedHash.set(false), 2000)\n }\n\n mockDownload(): void {\n this.isDownloadingReport.set(true)\n clearTimeout(this.downloadTimer)\n this.downloadTimer = setTimeout(() => this.isDownloadingReport.set(false), 1200)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/security-compliance-badges/security-compliance-badges.component.ts" }, { "path": "packages/registry-angular/blocks/security-compliance-badges/index.ts", "content": "export { UiSecurityComplianceBadgesComponent } from './security-compliance-badges.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/security-compliance-badges/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" ], "description": "Enterprise security and compliance workbench featuring SOC2, ISO27001, GDPR, and HIPAA audit inspection, cryptographic SHA-256 fingerprint verification, and whitepaper download.", "categories": [ "marketing" ] }