Immunization History
blockhealthcareDigital vaccine record passport and clinical immunization history: SMART Health Card verifiable credential with cryptographic signature, active protection summary chips, detailed CDC/WHO vaccine administration table with CVX codes and lot tracking, and travel health advisory alerts.
Installation
$pnpm dlx uipkge-ng@latest add immunization-history$npx uipkge-ng@latest add immunization-history$yarn dlx uipkge-ng@latest add immunization-history$bunx uipkge-ng@latest add immunization-historyManifest:
https://uipkge.dev/r/angular/immunization-history.jsonInstalls to:src/app/components/blocks/immunization-history/Variants
Loading interactive previews…
Loading interactive previews…
Schema
Type aliases exported from this item's source. Use these to shape the data you pass in.
VaccineRecordinterface VaccineRecord {
id: string
vaccineName: string
formulation: string
cvxCode: string
ndcCode?: string
doseSequence: string
doseBadgeVariant: BadgeVariant
administeredDate: string
manufacturer: string
lotNumber: string
facility: string
provider: string
nextDueDate: string
statusType: 'valid' | 'permanent' | 'booster-due'
statusLabel: string
}ProtectionSummaryinterface ProtectionSummary {
disease: string
status: string
doseLabel: string
lastAdministered: string
badgeVariant: BadgeVariant
badgeText: string
}npm dependencies
Files installed (2)
src/app/components/blocks/immunization-history/immunization-history.component.ts29.4 kB
// Digital vaccine record passport and clinical immunization history: SMART Health Card // verifiable credential with cryptographic signature, active protection summary chips, a // detailed CDC/WHO vaccine administration table with CVX codes and lot tracking, and travel // health advisory alerts. Port of the React block 1:1 (static display, no client state). import { ChangeDetectionStrategy, Component, Input } from '@angular/core' import { AlertCircle, Building2, Calendar, Check, CheckCircle2, Download, ExternalLink, FileCheck, Globe, Lock, LucideAngularModule, Plane, QrCode, ShieldCheck, Syringe, } from 'lucide-angular' import { cn } from '@/lib/utils' import { UiBadgeComponent } from '@/ui/badge/badge.component' import { UiButtonComponent } from '@/ui/button/button.component' import { UiCardComponent, UiCardContentComponent, UiCardDescriptionComponent, UiCardHeaderComponent, UiCardTitleComponent, } from '@/ui/card/card.component' import { UiTableBodyComponent, UiTableCellComponent, UiTableComponent, UiTableHeadComponent, UiTableHeaderComponent, UiTableRowComponent, } from '@/ui/table/table.component' type BadgeVariant = 'default' | 'secondary' | 'outline' | 'success' | 'warning' | 'info' | 'destructive' interface VaccineRecord { id: string vaccineName: string formulation: string cvxCode: string ndcCode?: string doseSequence: string doseBadgeVariant: BadgeVariant administeredDate: string manufacturer: string lotNumber: string facility: string provider: string nextDueDate: string statusType: 'valid' | 'permanent' | 'booster-due' statusLabel: string } interface ProtectionSummary { disease: string status: string doseLabel: string lastAdministered: string badgeVariant: BadgeVariant badgeText: string } const patientProfile = { name: 'Elena Rostova', dob: '1994-06-12', age: 32, gender: 'Female', mrn: 'IMM-9406-821', jurisdiction: 'State of California (CAIR2 Registry)', complianceStatus: 'Fully Immunized · Meets School & Travel Mandates', shcIssuer: 'California Department of Public Health (CDPH)', shcKeyId: 'CDPH-SMART-2025-V3', shcSignature: 'ECDSA P-256 (SHA-256)', jwsFragment: 'shc:/5676290952432060346029243740436037704054664037593670346029243740436037704054664037593670', } const protectionSummaries: ProtectionSummary[] = [ { disease: 'COVID-19', status: 'Active Protection', doseLabel: 'Updated Booster (2025/2026)', lastAdministered: 'Oct 12, 2025', badgeVariant: 'success', badgeText: 'Verified Active', }, { disease: 'Influenza', status: 'Seasonal Protection', doseLabel: 'Quadrivalent (2025/2026)', lastAdministered: 'Sep 28, 2025', badgeVariant: 'success', badgeText: 'Valid thru Sep 2026', }, { disease: 'Tdap', status: 'Active (10-Yr Cycle)', doseLabel: 'Tetanus, Diphtheria, Pertussis', lastAdministered: 'Jun 14, 2022', badgeVariant: 'secondary', badgeText: 'Valid thru 2032', }, { disease: 'MMR', status: 'Immune Protection', doseLabel: 'Complete 2-Dose Series', lastAdministered: 'Aug 22, 2010', badgeVariant: 'success', badgeText: 'Lifelong Immunity', }, ] const vaccineRecords: VaccineRecord[] = [ { id: 'rec-1', vaccineName: 'COVID-19 mRNA (Pfizer-BioNTech Bivalent)', formulation: 'Spikevike mRNA bivalent lineage booster', cvxCode: 'CVX 229', ndcCode: 'NDC 59267-1000-02', doseSequence: 'Dose 3 of 3', doseBadgeVariant: 'outline', administeredDate: 'Oct 12, 2025', manufacturer: 'Pfizer-BioNTech', lotNumber: '#EW0182', facility: 'UCLA Health Urgent Care', provider: 'Nurse J. Adams, RN', nextDueDate: 'October 2026', statusType: 'valid', statusLabel: 'Annual Booster Due 2026', }, { id: 'rec-2', vaccineName: 'Influenza Quadrivalent', formulation: 'Inactivated influenza split virion', cvxCode: 'CVX 158', ndcCode: 'NDC 49281-0422-50', doseSequence: 'Annual Booster', doseBadgeVariant: 'outline', administeredDate: 'Sep 28, 2025', manufacturer: 'Sanofi Pasteur', lotNumber: '#FL8842', facility: 'CVS MinuteClinic #4921', provider: 'Pharmacist R. Patel, PharmD', nextDueDate: 'September 2026', statusType: 'valid', statusLabel: 'Valid 2025/2026 Season', }, { id: 'rec-3', vaccineName: 'Tdap (Tetanus, Diphtheria, Pertussis)', formulation: 'Adsorbed acellular toxoid formulation', cvxCode: 'CVX 115', ndcCode: 'NDC 58160-0842-11', doseSequence: 'Booster (10-Yr)', doseBadgeVariant: 'outline', administeredDate: 'Jun 14, 2022', manufacturer: 'GlaxoSmithKline', lotNumber: '#TD9021', facility: 'Cedars-Sinai Primary Care', provider: 'Dr. S. Miller, MD', nextDueDate: 'June 2032', statusType: 'valid', statusLabel: 'Valid thru 2032', }, { id: 'rec-4', vaccineName: 'Hepatitis B (Recombinant)', formulation: 'Recombinant HBsAg protein subunit', cvxCode: 'CVX 43', ndcCode: 'NDC 00006-4995-00', doseSequence: 'Dose 3 of 3', doseBadgeVariant: 'outline', administeredDate: 'Jan 18, 2018', manufacturer: 'Merck & Co.', lotNumber: '#HB4419', facility: 'Kaiser Permanente Sunset', provider: 'Nurse K. Chen, RN', nextDueDate: 'Lifelong Immunity', statusType: 'permanent', statusLabel: 'Lifelong Immunity', }, { id: 'rec-5', vaccineName: 'MMR (Measles, Mumps, Rubella)', formulation: 'Live attenuated viral vaccine', cvxCode: 'CVX 03', ndcCode: 'NDC 00006-4681-00', doseSequence: 'Dose 2 of 2', doseBadgeVariant: 'outline', administeredDate: 'Aug 22, 2010', manufacturer: 'Merck & Co.', lotNumber: '#MR1083', facility: "Stanford Children's Health", provider: 'Dr. L. Gomez, MD', nextDueDate: 'Lifelong Immunity', statusType: 'permanent', statusLabel: 'Lifelong Immunity', }, ] @Component({ changeDetection: ChangeDetectionStrategy.Eager, selector: 'ui-immunization-history, [ui-immunization-history]', standalone: true, // React renders the root <div> itself: the host stays out of layout and `class` goes to the root. host: { '[attr.class]': '"contents"' }, imports: [ LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiCardComponent, UiCardContentComponent, UiCardDescriptionComponent, UiCardHeaderComponent, UiCardTitleComponent, UiTableBodyComponent, UiTableCellComponent, UiTableComponent, UiTableHeadComponent, UiTableHeaderComponent, UiTableRowComponent, ], template: ` <div data-slot="immunization-history" [class]="rootClass"> <!-- Header Section --> <header class="bg-card border-border rounded-xl border p-5 shadow-xs sm:p-6"> <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between"> <div class="space-y-1.5"> <div class="flex flex-wrap items-center gap-2.5"> <h1 class="text-foreground text-xl font-bold tracking-tight sm:text-2xl"> Immunization Record & Vaccine Passport </h1> <span ui-badge wrap variant="success" class="gap-1.5 px-2.5 py-1 text-xs font-semibold"> <span class="bg-success size-1.5 rounded-full" aria-hidden="true"></span> {{ patient.complianceStatus }} </span> </div> <div class="text-muted-foreground flex flex-wrap items-center gap-x-3 gap-y-1 text-xs sm:text-sm"> <span class="text-foreground font-semibold">{{ patient.name }}</span> <span> DOB: <strong class="text-foreground font-medium tabular-nums">{{ patient.dob }}</strong> ({{ patient.age }} yrs · {{ patient.gender }}) </span> <span class="font-mono text-xs">MRN: {{ patient.mrn }}</span> <span class="text-muted-foreground text-xs">{{ patient.jurisdiction }}</span> </div> </div> <!-- Action Buttons --> <div class="flex flex-wrap items-center gap-2.5"> <button ui-button variant="outline" size="sm" class="gap-1.5 text-xs font-medium"> <lucide-icon [img]="QrCode" class="size-3.5 shrink-0" aria-hidden="true" /> Share QR Pass </button> <button ui-button aria-label="Download attachment" size="sm" class="gap-1.5 text-xs font-medium"> <lucide-icon [img]="Download" class="size-3.5 shrink-0" aria-hidden="true" /> Download Official Record PDF </button> </div> </div> </header> <!-- Digital Health Pass Card: Verifiable SMART Health Card --> <div ui-card class="border-border/90 relative overflow-hidden shadow-xs"> <!-- Security Watermark Background Motif --> <div class="pointer-events-none absolute -top-10 -right-10 size-72 opacity-[0.03] select-none dark:opacity-[0.05]" aria-hidden="true" > <lucide-icon [img]="ShieldCheck" class="text-foreground size-full" /> </div> <div ui-card-header class="border-border/60 bg-muted/20 border-b pb-4"> <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"> <div class="flex items-center gap-3"> <div class="border-success/30 bg-success/10 text-success text-success flex size-9 shrink-0 items-center justify-center rounded-lg border shadow-2xs" > <lucide-icon [img]="ShieldCheck" class="size-5" aria-hidden="true" /> </div> <div> <div class="flex min-w-0 items-center gap-2"> <h3 ui-card-title class="text-base font-semibold">SMART® Health Card Verified</h3> <span ui-badge wrap variant="outline" class="font-mono text-xs">W3C Credential</span> </div> <p ui-card-description class="text-xs"> Issuer: {{ patient.shcIssuer }} · Signed via {{ patient.shcKeyId }} </p> </div> </div> <div class="flex min-w-0 flex-wrap items-center gap-2"> <span ui-badge wrap variant="outline" class="gap-1 px-2 py-0.5 font-mono text-xs"> <lucide-icon [img]="Lock" class="text-success size-3" aria-hidden="true" /> <span>{{ patient.shcSignature }}</span> </span> <span ui-badge wrap variant="success" class="gap-1 text-xs"> <lucide-icon [img]="Check" class="size-3" aria-hidden="true" /> Cryptographically Signed </span> </div> </div> </div> <div ui-card-content class="p-5 sm:p-6"> <div class="grid grid-cols-1 gap-6 lg:grid-cols-12 lg:items-center"> <!-- QR Code & Digital Signature Verification Container --> <div class="bg-muted/40 border-border/70 min-w-0 rounded-xl border p-4 sm:p-5 lg:col-span-5"> <div class="flex flex-col items-center gap-4 sm:flex-row"> <!-- Crisp SVG QR Code Placeholder --> <div class="bg-background ring-border/80 relative flex size-36 shrink-0 items-center justify-center rounded-lg p-2.5 shadow-2xs ring-1" > <svg viewBox="0 0 120 120" class="text-foreground size-full" fill="currentColor" shape-rendering="crispEdges" aria-label="SMART Health Card Digital QR Pass" role="img" > <!-- Finder Pattern: Top-Left --> <rect x="6" y="6" width="30" height="30" rx="3" /> <rect x="11" y="11" width="20" height="20" rx="2" class="fill-background" /> <rect x="15" y="15" width="12" height="12" rx="1.5" /> <!-- Finder Pattern: Top-Right --> <rect x="84" y="6" width="30" height="30" rx="3" /> <rect x="89" y="11" width="20" height="20" rx="2" class="fill-background" /> <rect x="93" y="15" width="12" height="12" rx="1.5" /> <!-- Finder Pattern: Bottom-Left --> <rect x="6" y="84" width="30" height="30" rx="3" /> <rect x="11" y="89" width="20" height="20" rx="2" class="fill-background" /> <rect x="15" y="93" width="12" height="12" rx="1.5" /> <!-- Timing Patterns --> <rect x="42" y="18" width="5" height="5" /> <rect x="52" y="18" width="5" height="5" /> <rect x="62" y="18" width="5" height="5" /> <rect x="72" y="18" width="5" height="5" /> <rect x="18" y="42" width="5" height="5" /> <rect x="18" y="52" width="5" height="5" /> <rect x="18" y="62" width="5" height="5" /> <rect x="18" y="72" width="5" height="5" /> <!-- Alignment Pattern: Bottom-Right --> <rect x="86" y="86" width="20" height="20" rx="2" /> <rect x="90" y="90" width="12" height="12" rx="1" class="fill-background" /> <rect x="93" y="93" width="6" height="6" /> <!-- Data Modules Matrix Grid --> <rect x="42" y="32" width="5" height="5" /> <rect x="50" y="32" width="5" height="5" /> <rect x="68" y="32" width="5" height="5" /> <rect x="76" y="32" width="5" height="5" /> <rect x="42" y="42" width="5" height="5" /> <rect x="58" y="42" width="5" height="5" /> <rect x="68" y="42" width="5" height="5" /> <rect x="92" y="42" width="5" height="5" /> <rect x="100" y="42" width="5" height="5" /> <rect x="32" y="52" width="5" height="5" /> <rect x="48" y="52" width="5" height="5" /> <rect x="58" y="52" width="5" height="5" /> <rect x="78" y="52" width="5" height="5" /> <rect x="88" y="52" width="5" height="5" /> <rect x="32" y="62" width="5" height="5" /> <rect x="42" y="62" width="5" height="5" /> <rect x="62" y="62" width="5" height="5" /> <rect x="72" y="62" width="5" height="5" /> <rect x="102" y="62" width="5" height="5" /> <rect x="48" y="72" width="5" height="5" /> <rect x="58" y="72" width="5" height="5" /> <rect x="82" y="72" width="5" height="5" /> <rect x="42" y="82" width="5" height="5" /> <rect x="52" y="82" width="5" height="5" /> <rect x="62" y="82" width="5" height="5" /> <rect x="72" y="82" width="5" height="5" /> <rect x="52" y="92" width="5" height="5" /> <rect x="68" y="92" width="5" height="5" /> <rect x="42" y="102" width="5" height="5" /> <rect x="60" y="102" width="5" height="5" /> <rect x="74" y="102" width="5" height="5" /> </svg> </div> <!-- Pass Metadata --> <div class="w-full min-w-0 space-y-2 text-center sm:text-left"> <div> <h2 class="text-foreground text-sm font-semibold">Offline Verifiable Pass</h2> <p class="text-muted-foreground text-xs"> Compatible with Apple Health, Google Wallet, and international border checkpoint verifiers. </p> </div> <div class="border-border/60 bg-background/80 rounded border p-2"> <span class="text-muted-foreground block text-xs font-medium">JWS Payload Digest</span> <code class="text-muted-foreground block truncate font-mono text-xs"> {{ patient.jwsFragment }} </code> </div> <div class="text-muted-foreground flex items-center justify-center gap-1 text-xs sm:justify-start"> <lucide-icon [img]="CheckCircle2" class="text-success size-3.5" aria-hidden="true" /> <span>Public Key Confirmed Active</span> </div> </div> </div> </div> <!-- Vaccine Summary Protection Chips --> <div class="space-y-3 lg:col-span-7"> <div class="flex items-center justify-between"> <h2 class="text-foreground text-sm font-semibold">Active Health Protections & Key Immunizations</h2> <span class="text-muted-foreground text-xs font-medium">4 Core Mandates Met</span> </div> <div class="grid grid-cols-1 gap-3 sm:grid-cols-2"> @for (chip of protections; track chip.disease) { <div class="bg-card border-border/80 hover:border-border flex flex-col justify-between rounded-lg border p-3.5 shadow-2xs transition-colors" > <div class="flex items-start justify-between gap-2"> <div class="flex min-w-0 items-center gap-2"> <div class="border-success/20 bg-success/10 text-success flex size-7 shrink-0 items-center justify-center rounded-md border" > <lucide-icon [img]="Syringe" class="size-3.5" aria-hidden="true" /> </div> <div> <span class="text-foreground text-sm font-semibold">{{ chip.disease }}</span> <p class="text-muted-foreground truncate text-xs">{{ chip.doseLabel }}</p> </div> </div> <span ui-badge wrap [variant]="chip.badgeVariant" class="text-xs font-medium"> {{ chip.badgeText }} </span> </div> <div class="border-border/60 text-muted-foreground mt-3 flex items-center justify-between border-t pt-2 text-xs" > <span> Last: <strong class="text-foreground font-medium tabular-nums">{{ chip.lastAdministered }}</strong> </span> <span class="text-success font-medium">{{ chip.status }}</span> </div> </div> } </div> </div> </div> </div> </div> <!-- Immunization Records Table --> <div ui-card class="shadow-xs"> <div ui-card-header> <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between"> <div> <h3 ui-card-title class="text-base font-semibold">Administered Immunization History</h3> <p ui-card-description class="text-xs sm:text-sm"> Complete chronological registry of vaccine administrations, CDC CVX codes, lot verification, and clinical facilities. </p> </div> <div class="flex min-w-0 items-center gap-2"> <span ui-badge wrap variant="outline" class="gap-1 text-xs tabular-nums"> <lucide-icon [img]="FileCheck" class="text-primary size-3.5" aria-hidden="true" /> <span>5 Records Verified</span> </span> </div> </div> </div> <div ui-card-content class="p-0"> <div class="overflow-x-auto"> <table ui-table> <thead ui-table-header> <tr ui-table-row> <th ui-table-head class="w-[28%] min-w-[220px]">Vaccine & CVX Code</th> <th ui-table-head class="min-w-[130px]">Dose Sequence</th> <th ui-table-head class="min-w-[120px]">Administered Date</th> <th ui-table-head class="min-w-[160px]">Manufacturer & Lot #</th> <th ui-table-head class="min-w-[220px]">Administering Facility & Provider</th> <th ui-table-head class="min-w-[140px] text-right">Status / Next Due</th> </tr> </thead> <tbody ui-table-body> @for (record of records; track record.id) { <tr ui-table-row> <td ui-table-cell> <div class="text-foreground text-sm font-semibold">{{ record.vaccineName }}</div> <div class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-xs"> <span class="font-mono">{{ record.cvxCode }}</span> @if (record.ndcCode) { <span class="text-muted-foreground/60">·</span> <span class="font-mono text-xs">{{ record.ndcCode }}</span> } </div> </td> <td ui-table-cell> <span ui-badge wrap [variant]="record.doseBadgeVariant" class="text-xs font-medium"> {{ record.doseSequence }} </span> </td> <td ui-table-cell> <div class="flex items-center gap-1.5"> <lucide-icon [img]="Calendar" class="text-muted-foreground size-3.5 shrink-0" aria-hidden="true" /> <span class="text-foreground text-sm font-medium tabular-nums">{{ record.administeredDate }}</span> </div> </td> <td ui-table-cell> <div class="text-foreground text-sm font-medium">{{ record.manufacturer }}</div> <div class="text-muted-foreground font-mono text-xs">{{ record.lotNumber }}</div> </td> <td ui-table-cell> <div class="text-foreground flex items-center gap-1.5 text-sm font-medium"> <lucide-icon [img]="Building2" class="text-muted-foreground size-3.5 shrink-0" aria-hidden="true" /> <span>{{ record.facility }}</span> </div> <div class="text-muted-foreground text-xs">{{ record.provider }}</div> </td> <td ui-table-cell class="text-right"> <span ui-badge wrap [variant]="record.statusType === 'permanent' ? 'success' : 'secondary'" class="text-xs font-medium whitespace-normal" > {{ record.nextDueDate }} </span> </td> </tr> } </tbody> </table> </div> </div> </div> <!-- Upcoming Due Vaccines & Travel Advisory Alert Card --> <div ui-card class="border-warning/30 bg-warning/[0.04] bg-warning/[0.07] shadow-xs"> <div ui-card-content class="p-5 sm:p-6"> <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between"> <div class="flex items-start gap-3.5"> <div class="border-warning/30 bg-warning/10 text-warning text-warning flex size-9 shrink-0 items-center justify-center rounded-lg border shadow-2xs" > <lucide-icon [img]="Globe" class="size-5" aria-hidden="true" /> </div> <div class="space-y-3"> <div> <div class="flex flex-wrap items-center gap-2"> <h2 class="text-foreground text-base font-semibold"> Upcoming Recommendations & Travel Health Advisory </h2> <span ui-badge wrap variant="warning" class="gap-1 text-xs font-medium"> <lucide-icon [img]="AlertCircle" class="size-3" aria-hidden="true" /> CDC Notice · Level 2 </span> </div> <p class="text-muted-foreground mt-1 text-xs sm:text-sm"> Clinical recommendations based on patient age cohort, seasonal guidelines, and destination health advisories. </p> </div> <div class="grid grid-cols-1 gap-3 sm:grid-cols-2"> <!-- Travel Alert Item 1: Yellow Fever --> <div class="bg-card/90 border-border/80 rounded-lg border p-3.5 shadow-2xs"> <div class="flex flex-wrap items-center justify-between gap-2"> <div class="flex items-center gap-1.5"> <lucide-icon [img]="Plane" class="text-warning size-3.5" aria-hidden="true" /> <span class="text-foreground text-xs font-semibold">Yellow Fever Vaccine (Live 17D)</span> </div> <span ui-badge wrap variant="outline" class="border-warning/30 text-warning text-xs"> Travel Advisory </span> </div> <p class="text-muted-foreground mt-1.5 text-xs"> Recommended for upcoming travel to endemic regions in South America (Brazil, Peru, Colombia). Single dose provides lifelong immunity; administer ≥10 days prior to departure. </p> <div class="border-border/60 text-muted-foreground mt-2.5 flex items-center justify-between border-t pt-2 text-xs" > <span>Priority: <strong class="text-foreground font-medium">High for South America</strong></span> <span class="text-warning font-medium">Pending Rx</span> </div> </div> <!-- Advisory Item 2: Meningococcal MenACWY --> <div class="bg-card/90 border-border/80 rounded-lg border p-3.5 shadow-2xs"> <div class="flex flex-wrap items-center justify-between gap-2"> <div class="flex items-center gap-1.5"> <lucide-icon [img]="Syringe" class="text-primary size-3.5" aria-hidden="true" /> <span class="text-foreground text-xs font-semibold">Meningococcal Conjugate (MenACWY)</span> </div> <span ui-badge wrap variant="outline" class="text-xs">Routine Booster</span> </div> <p class="text-muted-foreground mt-1.5 text-xs"> Recommended 5-year booster for international academic programs, dormitory residency, and congregate international travel settings. </p> <div class="border-border/60 text-muted-foreground mt-2.5 flex items-center justify-between border-t pt-2 text-xs" > <span> Next Window: <strong class="text-foreground font-medium tabular-nums">Jan – Mar 2027</strong> </span> <span class="text-muted-foreground font-medium">Due in 11 mos</span> </div> </div> </div> </div> </div> <!-- Advisory Action Buttons --> <div class="flex shrink-0 flex-wrap items-center gap-2 lg:flex-col lg:items-end"> <button ui-button size="sm" class="gap-1.5 text-xs font-medium"> <lucide-icon [img]="Calendar" class="size-3.5" aria-hidden="true" /> Schedule Travel Clinic Visit </button> <button ui-button variant="outline" size="sm" class="gap-1.5 text-xs font-medium"> <lucide-icon [img]="ExternalLink" class="size-3.5" aria-hidden="true" /> View CDC Destination Guidelines </button> </div> </div> </div> </div> </div> `, }) export class UiImmunizationHistoryComponent { protected readonly AlertCircle = AlertCircle protected readonly Building2 = Building2 protected readonly Calendar = Calendar protected readonly Check = Check protected readonly CheckCircle2 = CheckCircle2 protected readonly Download = Download protected readonly ExternalLink = ExternalLink protected readonly FileCheck = FileCheck protected readonly Globe = Globe protected readonly Lock = Lock protected readonly Plane = Plane protected readonly QrCode = QrCode protected readonly ShieldCheck = ShieldCheck protected readonly Syringe = Syringe protected readonly patient = patientProfile protected readonly protections = protectionSummaries protected readonly records = vaccineRecords @Input('class') className?: string get rootClass(): string { return cn('w-full space-y-6', this.className) } }src/app/components/blocks/immunization-history/index.ts0.1 kB
export { UiImmunizationHistoryComponent } from './immunization-history.component'
Raw manifest:https://uipkge.dev/r/angular/immunization-history.json