{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "lab-results-viewer", "title": "Lab Results Viewer", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/lab-results-viewer/lab-results-viewer.component.ts", "content": "// Quest and Labcorp style diagnostic lab results report viewer: patient metadata header,\n// clinical attention banner, grouped test panels (Lipid, Glucose, Renal) with LOINC codes,\n// reference range linear scale bars, historical 6-month trend deltas, and doctor clinical\n// impression card with electronic verification. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n AlertTriangle,\n CheckCircle2,\n FileCheck2,\n FileDown,\n FlaskConical,\n LucideAngularModule,\n MapPin,\n Printer,\n Search,\n Share2,\n ShieldCheck,\n Stethoscope,\n TrendingDown,\n TrendingUp,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\nimport { UiTabsComponent, UiTabsListComponent, UiTabsTriggerComponent } from '@/ui/tabs/tabs.component'\n\nexport type TestStatus = 'Normal' | 'High' | 'Low'\n\nexport interface LabTest {\n id: string\n name: string\n panel: 'lipid' | 'metabolic' | 'renal'\n panelLabel: string\n loinc: string\n value: number\n unit: string\n referenceRangeText: string\n status: TestStatus\n scaleMin: number\n scaleMax: number\n normalMin: number\n normalMax: number\n markerPercent: number\n rangeZoneLeft: number\n rangeZoneWidth: number\n trendDelta: string\n trendDirection: 'up' | 'down' | 'flat'\n trendStatus: 'warning' | 'success' | 'neutral'\n priorValue: string\n clinicalNote: string\n}\n\nconst patientInfo = {\n name: 'Sarah Jenkins',\n mrn: 'MRN-9482104',\n dob: 'Apr 12, 1984 (Age 42)',\n sex: 'Female',\n fasting: 'Fasting (12 hours)',\n accession: 'Q-94827104',\n orderedBy: 'Dr. Marcus Thorne, MD, FACP',\n facility: 'Quest Diagnostics Central Lab #842',\n facilityAddress: '100 Clifton Blvd, Clifton, NJ 07012 (CLIA: 31D0691234)',\n collectedDate: 'Aug 18, 2026 · 08:30 AM EDT',\n reportedDate: 'Aug 18, 2026 · 02:45 PM EDT',\n specimen: 'Serum & Plasma (Gold SST / Lavender EDTA)',\n}\n\nconst defaultTests: LabTest[] = [\n {\n id: 'chol-total',\n name: 'Total Cholesterol',\n panel: 'lipid',\n panelLabel: 'Lipid Panel (Cardiovascular Risk)',\n loinc: '2093-3',\n value: 215,\n unit: 'mg/dL',\n referenceRangeText: '< 200 mg/dL',\n status: 'High',\n scaleMin: 100,\n scaleMax: 300,\n normalMin: 100,\n normalMax: 200,\n markerPercent: 57.5,\n rangeZoneLeft: 0,\n rangeZoneWidth: 50,\n trendDelta: '+12 mg/dL vs 6 mos ago',\n trendDirection: 'up',\n trendStatus: 'warning',\n priorValue: '203 mg/dL (Feb 2026)',\n clinicalNote: 'Mild elevation. Suggests elevated total circulating atherogenic lipoprotein particles.',\n },\n {\n id: 'chol-ldl',\n name: 'LDL Cholesterol (Calculated)',\n panel: 'lipid',\n panelLabel: 'Lipid Panel (Cardiovascular Risk)',\n loinc: '13457-7',\n value: 138,\n unit: 'mg/dL',\n referenceRangeText: '< 100 mg/dL',\n status: 'High',\n scaleMin: 50,\n scaleMax: 200,\n normalMin: 50,\n normalMax: 100,\n markerPercent: 58.7,\n rangeZoneLeft: 0,\n rangeZoneWidth: 33.3,\n trendDelta: '+18 mg/dL vs 6 mos ago',\n trendDirection: 'up',\n trendStatus: 'warning',\n priorValue: '120 mg/dL (Feb 2026)',\n clinicalNote: 'Above primary prevention target (< 100 mg/dL). Lifestyle modifications indicated.',\n },\n {\n id: 'chol-hdl',\n name: 'HDL Cholesterol',\n panel: 'lipid',\n panelLabel: 'Lipid Panel (Cardiovascular Risk)',\n loinc: '2085-9',\n value: 58,\n unit: 'mg/dL',\n referenceRangeText: '≥ 50 mg/dL',\n status: 'Normal',\n scaleMin: 20,\n scaleMax: 100,\n normalMin: 50,\n normalMax: 100,\n markerPercent: 47.5,\n rangeZoneLeft: 37.5,\n rangeZoneWidth: 62.5,\n trendDelta: '+2 mg/dL vs 6 mos ago',\n trendDirection: 'up',\n trendStatus: 'success',\n priorValue: '56 mg/dL (Feb 2026)',\n clinicalNote: 'Desirable cardio-protective level for adult female population.',\n },\n {\n id: 'triglycerides',\n name: 'Triglycerides',\n panel: 'lipid',\n panelLabel: 'Lipid Panel (Cardiovascular Risk)',\n loinc: '2571-8',\n value: 142,\n unit: 'mg/dL',\n referenceRangeText: '< 150 mg/dL',\n status: 'Normal',\n scaleMin: 50,\n scaleMax: 250,\n normalMin: 50,\n normalMax: 150,\n markerPercent: 46.0,\n rangeZoneLeft: 0,\n rangeZoneWidth: 50,\n trendDelta: '-15 mg/dL vs 6 mos ago',\n trendDirection: 'down',\n trendStatus: 'success',\n priorValue: '157 mg/dL (Feb 2026)',\n clinicalNote: 'Improved from borderline threshold into normal reference zone.',\n },\n {\n id: 'glucose-fasting',\n name: 'Fasting Glucose',\n panel: 'metabolic',\n panelLabel: 'Glucose Metabolism & Glycemic Control',\n loinc: '1558-6',\n value: 92,\n unit: 'mg/dL',\n referenceRangeText: '70 – 99 mg/dL',\n status: 'Normal',\n scaleMin: 50,\n scaleMax: 150,\n normalMin: 70,\n normalMax: 99,\n markerPercent: 42.0,\n rangeZoneLeft: 20,\n rangeZoneWidth: 29,\n trendDelta: '-3 mg/dL vs 6 mos ago',\n trendDirection: 'down',\n trendStatus: 'success',\n priorValue: '95 mg/dL (Feb 2026)',\n clinicalNote: 'Normal euglycemic fasting state. No prediabetes indicators.',\n },\n {\n id: 'egfr-renal',\n name: 'eGFR (Kidney Function)',\n panel: 'renal',\n panelLabel: 'Renal Function & Filtration',\n loinc: '33914-3',\n value: 104,\n unit: 'mL/min/1.73m²',\n referenceRangeText: '≥ 60 mL/min/1.73m²',\n status: 'Normal',\n scaleMin: 30,\n scaleMax: 130,\n normalMin: 60,\n normalMax: 130,\n markerPercent: 74.0,\n rangeZoneLeft: 30,\n rangeZoneWidth: 70,\n trendDelta: '+1 mL/min vs 6 mos ago',\n trendDirection: 'up',\n trendStatus: 'success',\n priorValue: '103 mL/min (Feb 2026)',\n clinicalNote: 'Calculated using CKD-EPI 2021 equation. Robust renal clearance performance.',\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-lab-results-viewer, [ui-lab-results-viewer]',\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: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiSeparatorComponent,\n UiTableComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n UiTabsComponent,\n UiTabsListComponent,\n UiTabsTriggerComponent,\n ],\n template: `\n
\n \n
\n
\n
\n
\n
\n \n \n {{ patient.accession }}\n \n \n \n Final Diagnostic Report\n \n
\n

\n Comprehensive Metabolic Panel & Lipid Panel\n

\n

\n Clinical chemistry and lipid risk profiling conducted by {{ patient.facility }}\n

\n
\n\n
\n \n \n {{ isDownloadingPdf() ? 'Generating PDF...' : 'Download Official PDF' }}\n \n \n
\n
\n
\n\n
\n \n
\n
\n
Patient Details
\n
{{ patient.name }}
\n

{{ patient.sex }} · {{ patient.dob }}

\n
\n
\n
Ordering Physician
\n
{{ patient.orderedBy }}
\n

Internal Medicine & Cardiology

\n
\n
\n
Collection & Fasting
\n
{{ patient.collectedDate }}
\n

{{ patient.fasting }}

\n
\n
\n
Testing Facility
\n
{{ patient.facility }}
\n

CLIA ID: 31D0691234 · CAP Accredited

\n
\n
\n
\n
\n\n \n \n
\n \n \n
\n
\n
\n

\n 14 tests normal · 2 tests out of reference range\n

\n Clinical Review Advised\n
\n

\n Total Cholesterol and LDL Cholesterol exceed recommended reference thresholds. Fasting glucose metabolism\n and renal function (eGFR) remain optimal.\n

\n
\n
\n
\n \n \n In Range:\n 14\n
\n \n \n Out of Range:\n 2\n
\n \n \n\n \n
\n \n \n \n \n \n \n \n \n\n
\n \n \n
\n
\n\n \n
\n
\n
\n
\n

Laboratory Test Panels

\n

\n Quantitative measurements, standard LOINC reference intervals, and 6-month historical trend comparison.\n

\n
\n \n
\n
\n\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n @for (test of filteredTests(); track test.id) {\n \n \n \n \n \n \n \n \n }\n @if (filteredTests().length === 0) {\n \n \n \n }\n \n
Test Name & CodeMeasured ValueFlagReference RangeVisual ScaleHistorical 6-Mo Delta
\n
\n

{{ test.name }}

\n
\n LOINC: {{ test.loinc }}\n {{ test.panelLabel }}\n
\n
\n 		\n
\n {{ test.value }}\n {{ test.unit }}\n
\n 		\n \n {{ test.status }}\n \n \n \n {{ test.referenceRangeText }}\n \n \n
\n
\n
\n \n \n
\n \n \n {{ test.scaleMin }}\n Normal\n {{ test.scaleMax }}\n \n \n 		\n
\n
\n @if (test.trendDirection === 'up') {\n \n } @else {\n \n }\n {{ test.trendDelta }}\n
\n Prior: {{ test.priorValue }}\n
\n
\n

\n No laboratory test records matched your filter criteria.\n

\n
\n
\n
\n
\n\n \n
\n
\n
\n
\n
\n \n
\n
\n

Doctor's Clinical Impression & Action Plan

\n

Physician interpretation provided by {{ patient.orderedBy }}

\n
\n
\n \n \n Verified Electronic Signature\n \n
\n
\n\n
\n
\n

\n “Lipid panel shows mild elevation in LDL Cholesterol (138 mg/dL) and Total Cholesterol (215 mg/dL).\n Fasting blood glucose (92 mg/dL) and renal filtration markers (eGFR 104 mL/min/1.73m²) demonstrate\n outstanding stability. Recommend continuing Mediterranean dietary pattern with emphasis on soluble fiber\n and healthy monounsaturated fats, 150 minutes of moderate aerobic exercise weekly, and repeat lipid panel\n in 3 months. Statin therapy is not warranted at the patient's current 10-year ASCVD risk threshold.”\n

\n
\n\n
\n \n Recommended Clinical Action Items\n \n
\n
\n \n
\n

Repeat Lipid Panel

\n

Schedule re-test in 90 days (Nov 2026)

\n
\n
\n
\n \n
\n

Mediterranean Diet

\n

Maintain high fiber and plant sterols intake

\n
\n
\n
\n \n
\n

Cardiovascular Wellness

\n

150 mins weekly moderate aerobic activity

\n
\n
\n
\n
\n\n \n
\n
\n \n MT\n
\n
\n

{{ patient.orderedBy }}

\n

NPI #1849204812 · Medical License #20MD084721

\n
\n
\n

\n Digitally signed on Aug 18, 2026 · 15:45 EDT\n

\n
\n
\n \n\n \n \n
\n \n {{ patient.facilityAddress }}\n
\n
\n Specimen: {{ patient.specimen }}\n ·\n CLIA Certified\n
\n \n \n `,\n})\nexport class UiLabResultsViewerComponent {\n protected readonly AlertTriangle = AlertTriangle\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly FileCheck2 = FileCheck2\n protected readonly FileDown = FileDown\n protected readonly FlaskConical = FlaskConical\n protected readonly MapPin = MapPin\n protected readonly Printer = Printer\n protected readonly Search = Search\n protected readonly Share2 = Share2\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Stethoscope = Stethoscope\n protected readonly TrendingDown = TrendingDown\n protected readonly TrendingUp = TrendingUp\n\n protected readonly patient = patientInfo\n\n @Input() set initialTab(v: string) {\n this.activeTab.set(v ?? 'all')\n }\n @Input() set initialSearch(v: string) {\n this.searchQuery.set(v ?? '')\n }\n @Input('class') className?: string\n\n readonly tests = signal([...defaultTests])\n readonly activeTab = signal('all')\n readonly searchQuery = signal('')\n readonly isCopiedShare = signal(false)\n readonly isDownloadingPdf = signal(false)\n private shareTimer: ReturnType | undefined\n private pdfTimer: ReturnType | undefined\n\n readonly filteredTests = computed(() => {\n const tab = this.activeTab()\n const q = this.searchQuery().toLowerCase().trim()\n return this.tests().filter((test) => {\n if (tab === 'out-of-range' && test.status === 'Normal') return false\n if (tab === 'lipid' && test.panel !== 'lipid') return false\n if (tab === 'metabolic-renal' && test.panel !== 'metabolic' && test.panel !== 'renal') return false\n if (q) {\n return (\n test.name.toLowerCase().includes(q) ||\n test.loinc.toLowerCase().includes(q) ||\n test.panelLabel.toLowerCase().includes(q)\n )\n }\n return true\n })\n })\n\n readonly outOfRangeCount = computed(() => this.tests().filter((t) => t.status !== 'Normal').length)\n\n get rootClass(): string {\n return cn('text-foreground w-full space-y-6', this.className)\n }\n\n setActiveTab(value: string): void {\n this.activeTab.set(value)\n }\n\n testRowClass(test: LabTest): string {\n return cn('transition-colors', test.status === 'High' && 'bg-warning/5 hover:bg-warning/10')\n }\n\n valueClass(test: LabTest): string {\n return cn(\n 'text-base font-semibold tabular-nums sm:text-lg',\n test.status === 'High' && 'text-warning font-semibold',\n test.status === 'Normal' && 'text-foreground',\n )\n }\n\n markerClass(test: LabTest): string {\n return cn(\n 'border-background size-3.5 rounded-full border-2 shadow-xs transition-transform hover:scale-125',\n test.status === 'High' && 'bg-warning ring-warning/30 ring-2',\n test.status === 'Normal' && 'bg-success ring-success/30 ring-2',\n test.status === 'Low' && 'bg-info ring-info/30 ring-2',\n )\n }\n\n trendIconClass(test: LabTest): string {\n return cn(\n 'size-3.5',\n test.trendStatus === 'warning' && 'text-warning',\n test.trendStatus === 'success' && 'text-success',\n )\n }\n\n trendDeltaClass(test: LabTest): string {\n return cn(\n 'text-xs font-semibold tabular-nums',\n test.trendStatus === 'warning' && 'text-warning',\n test.trendStatus === 'success' && 'text-foreground',\n )\n }\n\n handleShare(): void {\n try {\n void navigator.clipboard?.writeText(\n `Lab Results for ${patientInfo.name} (${patientInfo.accession}) - ${patientInfo.collectedDate}`,\n )\n this.isCopiedShare.set(true)\n clearTimeout(this.shareTimer)\n this.shareTimer = setTimeout(() => this.isCopiedShare.set(false), 2000)\n } catch {\n // Clipboard fallback\n }\n }\n\n handleDownloadPdf(): void {\n if (this.isDownloadingPdf()) return\n this.isDownloadingPdf.set(true)\n clearTimeout(this.pdfTimer)\n this.pdfTimer = setTimeout(() => this.isDownloadingPdf.set(false), 1500)\n }\n\n handlePrint(): void {\n if (typeof window !== 'undefined') window.print()\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/lab-results-viewer/lab-results-viewer.component.ts" }, { "path": "packages/registry-angular/blocks/lab-results-viewer/index.ts", "content": "export { UiLabResultsViewerComponent, type LabTest, type TestStatus } from './lab-results-viewer.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/lab-results-viewer/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", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/table.json", "https://uipkge.dev/r/angular/tabs.json" ], "description": "Quest and Labcorp style diagnostic lab results report viewer: patient metadata header, clinical attention banner, grouped test panels (Lipid, Glucose, Renal) with LOINC codes, reference range linear scale bars, historical 6-month trend deltas, and doctor clinical impression card with electronic verification.", "categories": [ "healthcare", "app" ] }