{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "security-certification-band",
  "title": "Security Certification Band",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/security-certification-band/security-certification-band.component.ts",
      "content": "// Slim compliance band: each certification with its issuing body and last audit\n// date, plus a data residency selector. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport { LucideAngularModule, ShieldCheck } from 'lucide-angular'\nimport { UiButtonComponent } from '@/ui/button/button.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'\n\n// Issuing body and audit date are what make a certification claim checkable;\n// a bare logo row is decoration.\nconst certifications = [\n  { name: 'SOC 2 Type II', body: 'Prescient Assurance', audited: 'Mar 2026' },\n  { name: 'ISO 27001', body: 'BSI Group', audited: 'Jan 2026' },\n  { name: 'GDPR', body: 'Self-attested · DPA available', audited: 'Ongoing' },\n  { name: 'HIPAA', body: 'Third-party assessed', audited: 'Nov 2025' },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-security-certification-band, [ui-security-certification-band]',\n  standalone: true,\n  // React renders the root <section> itself: the host stays out of layout.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [\n    LucideAngularModule,\n    UiButtonComponent,\n    UiSelectComponent,\n    UiSelectContentComponent,\n    UiSelectItemComponent,\n    UiSelectTriggerComponent,\n    UiSelectValueComponent,\n    UiSeparatorComponent,\n  ],\n  template: `\n    <section data-slot=\"security-certification-band\" class=\"border-border bg-muted/40 border-y\">\n      <div class=\"mx-auto max-w-6xl px-6 py-8\">\n        <div class=\"flex flex-wrap items-center gap-x-6 gap-y-4\">\n          <div class=\"flex items-center gap-2\">\n            <lucide-icon [img]=\"ShieldCheck\" class=\"text-muted-foreground size-4\" aria-hidden=\"true\" />\n            <span class=\"text-sm font-medium\">Audited, not asserted</span>\n          </div>\n\n          <ui-separator orientation=\"vertical\" class=\"hidden h-8 sm:block\" />\n\n          <dl class=\"flex min-w-0 flex-1 flex-wrap gap-x-8 gap-y-3\">\n            @for (certification of certifications; track certification.name) {\n              <div>\n                <dt class=\"text-sm font-semibold\">{{ certification.name }}</dt>\n                <dd class=\"text-muted-foreground text-xs\">{{ certification.body }} · {{ certification.audited }}</dd>\n              </div>\n            }\n          </dl>\n\n          <div class=\"flex items-center gap-2\">\n            <ui-select [value]=\"region()\" (valueChange)=\"region.set($event)\">\n              <button ui-select-trigger class=\"h-8 w-44 text-xs\" aria-label=\"Data residency\">\n                <ui-select-value />\n              </button>\n              <ui-select-content>\n                <ui-select-item value=\"eu\">EU residency</ui-select-item>\n                <ui-select-item value=\"us\">US residency</ui-select-item>\n                <ui-select-item value=\"au\">AU residency</ui-select-item>\n              </ui-select-content>\n            </ui-select>\n            <button ui-button variant=\"outline\" size=\"sm\">Trust centre</button>\n          </div>\n        </div>\n      </div>\n    </section>\n  `,\n})\nexport class UiSecurityCertificationBandComponent {\n  protected readonly ShieldCheck = ShieldCheck\n  protected readonly certifications = certifications\n\n  @Input() set initialRegion(v: string | undefined) {\n    if (v) this.region.set(v)\n  }\n\n  readonly region = signal('eu')\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/security-certification-band/security-certification-band.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/security-certification-band/index.ts",
      "content": "export { UiSecurityCertificationBandComponent } from './security-certification-band.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/security-certification-band/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/button.json",
    "https://uipkge.dev/r/angular/select.json",
    "https://uipkge.dev/r/angular/separator.json"
  ],
  "description": "Slim compliance band listing each certification with its issuing body and last audit date, plus a data residency selector, for placing above a pricing table.",
  "categories": [
    "marketing"
  ]
}