Security Compliance Badges

Installation

Variants

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

interface CompliancePillar {
  id: string
  name: string
  standard: string
  status: string
  auditor: string
  lastAudit: string
  sha256: string
  highlights: string[]
}

Files installed (2)

• src/app/components/blocks/security-compliance-badges/security-compliance-badges.component.ts12 kB

  Copy

  // Enterprise security and compliance workbench: SOC2, ISO27001, GDPR, and HIPAA
  // audit inspection with cryptographic SHA-256 fingerprint verification and a
  // whitepaper download action. Port of the React block 1:1.
  import { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'
  import { Check, CheckCircle2, Copy, Download, LucideAngularModule, RefreshCw, ShieldCheck } from 'lucide-angular'
  import { cn } from '@/lib/utils'
  import { UiBadgeComponent } from '@/ui/badge/badge.component'
  import { UiButtonComponent } from '@/ui/button/button.component'
  import { UiCardComponent } from '@/ui/card/card.component'
  
  interface CompliancePillar {
    id: string
    name: string
    standard: string
    status: string
    auditor: string
    lastAudit: string
    sha256: string
    highlights: string[]
  }
  
  const pillars: CompliancePillar[] = [
    {
      id: 'soc2',
      name: 'SOC2 Type II Certified',
      standard: 'AICPA Trust Services Criteria (Security, Availability, Confidentiality)',
      status: 'Clean Opinion (Zero Exceptions)',
      auditor: 'Schellman & Company, LLC',
      lastAudit: 'Q4 2025 Audit Period',
      sha256: '9f86d081884c7d659a2feaa0c55ad015a3bf4f1b2b0b822cd15d6c15b0f00a08',
      highlights: [
        'Continuous 24/7 automated control monitoring via Drata',
        'Annual independent black-box & white-box penetration testing',
        'Mandatory hardware key 2FA (WebAuthn / FIDO2) across all staff',
        'Immutable tamper-evident centralized audit logs with 365-day retention',
      ],
    },
    {
      id: 'iso27001',
      name: 'ISO/IEC 27001:2022',
      standard: 'Information Security Management System (ISMS)',
      status: 'Globally Certified',
      auditor: 'BSI Group Global',
      lastAudit: 'Continuous Surveillance',
      sha256: '5e884898da28047151d0e56f8dc6292773603d0d6aabbdd62a11ef721d1542d8',
      highlights: [
        'Strict cryptographic key management with automated rotation',
        'Zero vendor data sharing or telemetry monetization guarantees',
        'Comprehensive disaster recovery with RPO < 1 min, RTO < 15 mins',
        'Physical security auditing of all tier-4 sovereign edge hosting locations',
      ],
    },
    {
      id: 'gdpr',
      name: 'GDPR & CCPA Compliant',
      standard: 'EU 2016/679 & California Consumer Privacy Act',
      status: 'Strict Privacy Tier',
      auditor: 'Internal Privacy Council + DPO',
      lastAudit: 'Live Continuous Compliance',
      sha256: '4b227777d4dd1fc61c6f884f48641d02b4d121d3fd328cb08b5531fcacdabf8a',
      highlights: [
        'Zero third-party tracking cookies or marketing beacons in registry AST',
        'Automated self-serve data portability & deletion API endpoints',
        'EU Standard Contractual Clauses (SCCs) baked into standard DPA',
        'Encrypted localized edge caches with sovereign residency enforcement',
      ],
    },
    {
      id: 'hipaa',
      name: 'HIPAA & HITECH Ready',
      standard: 'Health Insurance Portability and Accountability Act',
      status: 'BAA Eligible',
      auditor: 'Coalfire Systems',
      lastAudit: 'Annual Attestation',
      sha256: 'ef2d127de37b942baad06145e54b0c619a1f22327b2ebbcfbec78f5564afe39d',
      highlights: [
        'AES-256 encryption for data at rest and TLS 1.3 in transit',
        'Automated Business Associate Agreement (BAA) execution for enterprise tiers',
        'Strict role-based access control (RBAC) with just-in-time privilege escalation',
        'PHI isolation architecture with zero persistent client-side caching',
      ],
    },
  ]
  
  @Component({
    changeDetection: ChangeDetectionStrategy.Eager,
    selector: 'ui-security-compliance-badges, [ui-security-compliance-badges]',
    standalone: true,
    // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.
    host: { '[attr.class]': '"contents"' },
    imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiCardComponent],
    template: `
      <section data-slot="security-compliance-badges" [class]="rootClass">
        <!-- Ambient Radial Glow -->
        <div
          class="bg-success/10 pointer-events-none absolute top-1/3 left-1/2 -z-10 h-80 w-full max-w-4xl -translate-x-1/2 -translate-y-1/2 rounded-full blur-xl"
        ></div>
  
        <div class="mx-auto max-w-6xl space-y-12">
          <!-- Section Header -->
          <div class="mx-auto max-w-3xl space-y-4 text-center">
            <span ui-badge variant="secondary" class="gap-1.5 px-3 py-1 font-mono text-xs shadow-xs">
              <lucide-icon [img]="ShieldCheck" class="text-success size-3.5" />
              Enterprise Trust & Cryptographic Security
            </span>
            <h2 class="text-foreground text-3xl font-bold tracking-tight sm:text-4xl">
              Built for the most compliance-sensitive architectures.
            </h2>
            <p class="text-muted-foreground text-base">
              Zero runtime bloat, zero tracking beacons, and independent third-party verified attestations for your SecOps
              team.
            </p>
          </div>
  
          <!-- Compliance Badges 4-Tile Preview Row -->
          <div class="grid grid-cols-2 gap-3 sm:grid-cols-4 sm:gap-4">
            @for (p of pillars; track p.id) {
              <button type="button" [class]="tileClass(p.id)" (click)="activeTab.set(p.id)">
                <div class="mb-3 flex items-center justify-between">
                  <div
                    class="bg-success/10 text-success flex size-8 items-center justify-center rounded-lg font-mono text-xs font-bold"
                  >
                    <lucide-icon [img]="ShieldCheck" class="size-4" />
                  </div>
                  <span [class]="dotClass(p.id)"></span>
                </div>
  
                <h3 class="text-foreground truncate font-mono text-xs font-bold">{{ p.name.split(' ')[0] }}</h3>
                <p class="text-muted-foreground mt-0.5 truncate text-xs">{{ p.status }}</p>
              </button>
            }
          </div>
  
          <!-- Interactive Attestation & Security Workbench Card -->
          <div
            ui-card
            class="border-border bg-card/95 space-y-6 overflow-hidden rounded-2xl p-6 shadow-sm backdrop-blur-md sm:p-8"
          >
            <!-- Workbench Top Details -->
            <div class="border-border/80 flex flex-col justify-between gap-4 border-b pb-6 sm:flex-row sm:items-center">
              <div class="space-y-1">
                <div class="flex items-center gap-2">
                  <h3 class="text-foreground font-mono text-xl font-bold">{{ currentPillar().name }}</h3>
                  <span ui-badge variant="outline" class="border-success/20 bg-success/10 text-success font-mono text-xs">
                    Verified
                  </span>
                </div>
                <p class="text-muted-foreground font-mono text-xs">{{ currentPillar().standard }}</p>
              </div>
  
              <button
                ui-button
                size="sm"
                variant="outline"
                class="shrink-0 gap-2 font-mono text-xs"
                (click)="mockDownload()"
              >
                @if (isDownloadingReport()) {
                  <lucide-icon [img]="RefreshCw" class="text-primary size-3.5 animate-spin" />
                } @else {
                  <lucide-icon [img]="Download" class="text-muted-foreground size-3.5" />
                }
                <span>{{ isDownloadingReport() ? 'Preparing DPA Bundle...' : 'Download Security Whitepaper' }}</span>
              </button>
            </div>
  
            <!-- Audit Details Grid -->
            <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
              <!-- Left: Key Controls & Technical Enforcements -->
              <div class="space-y-3">
                <p class="text-muted-foreground font-mono text-xs tracking-wider uppercase">Key Technical Controls</p>
                <ul class="space-y-2.5">
                  @for (item of currentPillar().highlights; track item) {
                    <li class="text-foreground/90 flex items-start gap-2.5 text-xs leading-relaxed">
                      <lucide-icon [img]="CheckCircle2" class="text-success mt-0.5 size-4 shrink-0" />
                      <span>{{ item }}</span>
                    </li>
                  }
                </ul>
              </div>
  
              <!-- Right: Auditor & Cryptographic SHA-256 Fingerprint -->
              <div class="border-border bg-muted/20 flex flex-col justify-between space-y-4 rounded-xl border p-5">
                <div class="space-y-3">
                  <div class="flex items-center justify-between font-mono text-xs">
                    <span class="text-muted-foreground">Independent Auditor:</span>
                    <span class="text-foreground font-semibold">{{ currentPillar().auditor }}</span>
                  </div>
                  <div class="flex items-center justify-between font-mono text-xs">
                    <span class="text-muted-foreground">Audit Cycle:</span>
                    <span class="text-foreground">{{ currentPillar().lastAudit }}</span>
                  </div>
                  <div class="flex items-center justify-between font-mono text-xs">
                    <span class="text-muted-foreground">CVE Vulnerability Scan:</span>
                    <span class="text-success font-bold">0 High &bull; 0 Critical</span>
                  </div>
                </div>
  
                <!-- SHA-256 Hash Box -->
                <div class="border-border/60 space-y-1.5 border-t pt-3">
                  <div class="text-muted-foreground flex items-center justify-between font-mono text-xs">
                    <span>Attestation PDF SHA-256 Fingerprint:</span>
                    <button
                      type="button"
                      class="text-primary flex items-center gap-1 hover:underline"
                      (click)="copyHash()"
                    >
                      @if (copiedHash()) {
                        <lucide-icon [img]="Check" class="text-success size-3" />
                      } @else {
                        <lucide-icon [img]="Copy" class="size-3" />
                      }
                      <span>{{ copiedHash() ? 'Copied' : 'Copy Hash' }}</span>
                    </button>
                  </div>
                  <p
                    class="text-muted-foreground bg-background/80 border-border rounded border p-2 font-mono text-xs break-all select-all"
                  >
                    {{ currentPillar().sha256 }}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    `,
  })
  export class UiSecurityComplianceBadgesComponent {
    protected readonly Check = Check
    protected readonly CheckCircle2 = CheckCircle2
    protected readonly Copy = Copy
    protected readonly Download = Download
    protected readonly RefreshCw = RefreshCw
    protected readonly ShieldCheck = ShieldCheck
  
    protected readonly pillars = pillars
  
    @Input('class') className?: string
  
    readonly activeTab = signal('soc2')
    readonly copiedHash = signal(false)
    readonly isDownloadingReport = signal(false)
    private copyTimer: ReturnType<typeof setTimeout> | undefined
    private downloadTimer: ReturnType<typeof setTimeout> | undefined
  
    readonly currentPillar = computed(() => pillars.find((p) => p.id === this.activeTab()) ?? pillars[0]!)
  
    get rootClass(): string {
      return cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', this.className)
    }
  
    tileClass(id: string): string {
      return cn(
        'group relative overflow-hidden rounded-2xl border p-4 text-left transition-colors',
        this.activeTab() === id
          ? 'border-success/80 bg-success/5 ring-success/30 shadow-md ring-1'
          : 'border-border bg-card/70 hover:border-border hover:bg-card',
      )
    }
  
    dotClass(id: string): string {
      return cn('size-2 rounded-full', this.activeTab() === id ? 'bg-success animate-pulse' : 'bg-muted')
    }
  
    copyHash(): void {
      try {
        void navigator.clipboard.writeText(this.currentPillar().sha256)
      } catch {
        // Clipboard unavailable (e.g. insecure context): still flip the label.
      }
      this.copiedHash.set(true)
      clearTimeout(this.copyTimer)
      this.copyTimer = setTimeout(() => this.copiedHash.set(false), 2000)
    }
  
    mockDownload(): void {
      this.isDownloadingReport.set(true)
      clearTimeout(this.downloadTimer)
      this.downloadTimer = setTimeout(() => this.isDownloadingReport.set(false), 1200)
    }
  }
  

• src/app/components/blocks/security-compliance-badges/index.ts0.1 kB

  Copy

Raw manifest:https://uipkge.dev/r/angular/security-compliance-badges.json