Security Certification Band

Installation

Variants

Files installed (2)

• src/app/components/blocks/security-certification-band/security-certification-band.component.ts3.5 kB

  Copy

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

• src/app/components/blocks/security-certification-band/index.ts0.1 kB

  Copy

Raw manifest:https://uipkge.dev/r/angular/security-certification-band.json