{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "doctor-appointment-scheduler", "title": "Doctor Appointment Scheduler", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/doctor-appointment-scheduler/doctor-appointment-scheduler.component.ts", "content": "// Zocdoc and Epic style specialist doctor appointment booking scheduler: physician profile hero\n// card with rating, clinic address, and insurance badges, interactive visit type selector, reason\n// for visit dropdown, date carousel with daily availability indicators, morning and afternoon\n// time slot picker, live appointment summary readout with copay estimate, patient registration\n// inputs, and booking confirmation flow. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n BadgeCheck,\n Building2,\n Calendar,\n CalendarCheck,\n Check,\n CheckCircle2,\n ChevronLeft,\n ChevronRight,\n Clock,\n CreditCard,\n FileText,\n HeartPulse,\n Info,\n Lock,\n LucideAngularModule,\n MapPin,\n Phone,\n RotateCcw,\n ShieldCheck,\n Star,\n Stethoscope,\n Sun,\n Sunset,\n User,\n Video,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent, UiAvatarImageComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiRadioGroupComponent, UiRadioGroupItemComponent } from '@/ui/radio-group/radio-group.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'\nimport { UiTextareaComponent } from '@/ui/textarea/textarea.component'\n\nexport type SchedulerVisitType = 'in-person' | 'telehealth'\n\ninterface WeekDay {\n id: string\n weekday: string\n day: string\n month: string\n fullDate: string\n slotsCount: number\n}\n\nconst WEEK_DAYS: WeekDay[] = [\n { id: '2026-08-24', weekday: 'Mon', day: '24', month: 'Aug', fullDate: 'Monday, Aug 24, 2026', slotsCount: 6 },\n { id: '2026-08-25', weekday: 'Tue', day: '25', month: 'Aug', fullDate: 'Tuesday, Aug 25, 2026', slotsCount: 8 },\n { id: '2026-08-26', weekday: 'Wed', day: '26', month: 'Aug', fullDate: 'Wednesday, Aug 26, 2026', slotsCount: 5 },\n { id: '2026-08-27', weekday: 'Thu', day: '27', month: 'Aug', fullDate: 'Thursday, Aug 27, 2026', slotsCount: 8 },\n { id: '2026-08-28', weekday: 'Fri', day: '28', month: 'Aug', fullDate: 'Friday, Aug 28, 2026', slotsCount: 7 },\n { id: '2026-08-29', weekday: 'Sat', day: '29', month: 'Aug', fullDate: 'Saturday, Aug 29, 2026', slotsCount: 4 },\n]\n\nconst MORNING_SLOTS = ['09:00 AM', '09:30 AM', '10:15 AM', '11:00 AM']\nconst AFTERNOON_SLOTS = ['02:00 PM', '02:45 PM', '03:30 PM', '04:15 PM']\n\ninterface VisitReason {\n value: string\n label: string\n description: string\n copay: string\n}\n\nconst VISIT_REASONS: VisitReason[] = [\n {\n value: 'annual-checkup',\n label: 'Annual Checkup',\n description: 'Routine wellness & cardiovascular health screening',\n copay: '$25.00',\n },\n {\n value: 'follow-up',\n label: 'Follow-up',\n description: 'Post-treatment evaluation & diagnostic review',\n copay: '$20.00',\n },\n {\n value: 'chest-pain',\n label: 'Chest Pain Consultation',\n description: 'Comprehensive symptom evaluation & urgent diagnostics',\n copay: '$30.00',\n },\n {\n value: 'medication-review',\n label: 'Medication Review',\n description: 'Prescription adjustment & therapeutic monitoring',\n copay: '$15.00',\n },\n {\n value: 'hypertension-evaluation',\n label: 'Hypertension Evaluation',\n description: 'Blood pressure assessment & ongoing care plan',\n copay: '$25.00',\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-doctor-appointment-scheduler, [ui-doctor-appointment-scheduler]',\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 UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiAvatarImageComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiInputComponent,\n UiRadioGroupComponent,\n UiRadioGroupItemComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiSeparatorComponent,\n UiTextareaComponent,\n ],\n template: `\n
\n \n
\n
\n
\n
\n
\n \n \n \n MT\n \n \n \n \n Available\n
\n
\n\n
\n
\n

{{ doctorName }}

\n \n
\n\n

{{ doctorTitle }}

\n\n
\n {{ specialty }}\n \n 16+ Yrs Experience\n \n \n Cedars-Sinai Affiliated\n \n
\n
\n
\n\n
\n
\n
\n \n {{ rating }}\n ({{ reviewCount }} reviews)\n
\n Top Rated\n
\n\n
\n \n {{ clinicAddress }}\n
\n\n
\n \n Accepts BlueCross, Aetna, UnitedHealthcare, Medicare \n
\n
\n
\n
\n
\n\n \n
\n
\n \n
\n
\n \n 1\n
\n

Select Visit Type

\n
\n\n \n \n\n \n \n
\n\n \n
\n
\n \n 2\n
\n

Reason for Visit

\n
\n\n \n \n \n @for (reason of visitReasons; track reason.value) {\n \n
\n {{ reason.label }}\n {{ reason.description }}\n
\n \n }\n \n \n
\n\n \n
\n
\n
\n \n 3\n
\n

Select Date

\n
\n\n
\n August 2026\n
\n \n \n \n \n \n \n
\n
\n
\n\n
\n @for (day of weekDays; track day.id) {\n \n }\n
\n
\n\n \n
\n
\n
\n \n 4\n
\n

Available Time Slots

\n
\n \n 8 slots on {{ currentDateObj().weekday }}, {{ currentDateObj().month }} {{ currentDateObj().day }}\n \n
\n\n
\n
\n \n Morning Slots\n
\n
\n @for (slot of morningSlots; track slot) {\n \n }\n
\n
\n\n
\n
\n \n Afternoon Slots\n
\n
\n @for (slot of afternoonSlots; track slot) {\n \n }\n
\n
\n \n \n\n \n
\n
\n @if (!isBooked()) {\n
\n
\n
\n
\n

Appointment Summary

\n

\n Live schedule & patient registration\n

\n
\n \n \n Slot Held: 09:48\n \n
\n
\n\n
\n
\n
\n \n
\n

Selected Slot

\n

{{ selectedSlotFormatted() }}

\n
\n
\n\n
\n @if (visitType() === 'in-person') {\n \n } @else {\n \n }\n
\n

Location / Mode

\n

{{ locationText() }}

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

Visit Type

\n

{{ currentReasonObj().label }}

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

Estimated Copay

\n

BlueCross PPO In-Network

\n
\n
\n
\n {{\n currentReasonObj().copay\n }}\n

Covered at 90%

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

\n Patient Information\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
\n \n \n Confirm & Book Appointment\n \n\n
\n \n 256-bit encrypted · HIPAA compliant · Free cancellation up to 24h\n
\n
\n
\n } @else {\n
\n
\n \n \n
\n

Appointment Confirmed!

\n

\n Confirmation #{{ bookingReference }} dispatched to {{ patientPhone() }}\n

\n
\n\n
\n
\n
\n Physician\n {{ doctorName }}\n
\n
\n Date & Time\n {{ selectedSlotFormatted() }}\n
\n
\n Location\n {{ locationText() }}\n
\n
\n Visit Type\n {{ currentReasonObj().label }}\n
\n
\n Patient\n {{ patientName() }}\n
\n
\n Est. Copay Due\n {{ currentReasonObj().copay }}\n
\n
\n\n \n

\n \n Pre-Appointment Instructions\n

\n

\n Please arrive 15 minutes early with your photo ID and active insurance card. For telehealth, join\n link activates 10 minutes prior to visit.\n

\n
\n
\n\n
\n \n @if (calendarAdded()) {\n \n } @else {\n \n }\n {{ calendarAdded() ? 'Added to Calendar' : 'Add to Google / Apple Calendar' }}\n \n\n \n \n Schedule Another Appointment\n \n
\n
\n }\n \n \n \n \n `,\n})\nexport class UiDoctorAppointmentSchedulerComponent {\n protected readonly BadgeCheck = BadgeCheck\n protected readonly Building2 = Building2\n protected readonly Calendar = Calendar\n protected readonly CalendarCheck = CalendarCheck\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly ChevronLeft = ChevronLeft\n protected readonly ChevronRight = ChevronRight\n protected readonly Info = Info\n protected readonly Lock = Lock\n protected readonly MapPin = MapPin\n protected readonly RotateCcw = RotateCcw\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Star = Star\n protected readonly Stethoscope = Stethoscope\n protected readonly Sun = Sun\n protected readonly Sunset = Sunset\n protected readonly Video = Video\n\n protected readonly weekDays = WEEK_DAYS\n protected readonly morningSlots = MORNING_SLOTS\n protected readonly afternoonSlots = AFTERNOON_SLOTS\n protected readonly visitReasons = VISIT_REASONS\n protected readonly bookingReference = 'APT-84920'\n\n // react/no-unused-vars parity: these icons back copy kept 1:1 with the React block.\n protected readonly Clock = Clock\n protected readonly CreditCard = CreditCard\n protected readonly FileText = FileText\n protected readonly HeartPulse = HeartPulse\n protected readonly Phone = Phone\n protected readonly User = User\n\n @Input() doctorName = 'Dr. Marcus Thorne, MD, FACC'\n @Input() doctorTitle = 'Board-Certified Cardiologist · Cedars-Sinai Heart Institute'\n @Input() doctorAvatar = 'https://images.unsplash.com/photo-1622253692010-333f2da6031d?q=80&w=320&auto=format&fit=crop'\n @Input() specialty = 'Cardiology & Internal Medicine'\n @Input() clinicName = 'Cedars-Sinai Medical Plaza'\n @Input() clinicAddress = 'Cedars-Sinai Medical Plaza, Suite 400, Los Angeles, CA'\n @Input() rating = 4.9\n @Input() reviewCount = 240\n @Input() insurances: string[] = ['BlueCross BlueShield', 'Aetna', 'UnitedHealthcare', 'Medicare', 'Cigna']\n @Input() set initialDate(v: string) {\n this.selectedDate.set(v)\n }\n @Input() set initialTime(v: string) {\n this.selectedTime.set(v)\n }\n @Input() set initialVisitType(v: SchedulerVisitType) {\n this.visitType.set(v)\n }\n @Input() set initialReason(v: string) {\n this.selectedReason.set(v)\n }\n @Input('class') className?: string\n\n readonly selectedDate = signal('2026-08-27')\n readonly selectedTime = signal('10:15 AM')\n readonly visitType = signal('in-person')\n readonly selectedReason = signal('chest-pain')\n readonly patientName = signal('Sarah Jenkins')\n readonly patientPhone = signal('+1 (555) 382-9104')\n readonly insurancePolicy = signal('BCBS-90481240')\n readonly notes = signal('Occasional mild tightness after morning workouts; seeking ECG review.')\n readonly isBooked = signal(false)\n readonly calendarAdded = signal(false)\n\n readonly currentDateObj = computed(() => WEEK_DAYS.find((d) => d.id === this.selectedDate()) ?? WEEK_DAYS[3]!)\n readonly currentReasonObj = computed(\n () => VISIT_REASONS.find((r) => r.value === this.selectedReason()) ?? VISIT_REASONS[2]!,\n )\n readonly selectedSlotFormatted = computed(() => {\n const d = this.currentDateObj()\n return `${d.weekday}, ${d.month} ${d.day} at ${this.selectedTime()}`\n })\n readonly locationText = computed(() =>\n this.visitType() === 'in-person'\n ? 'In-Person · Room 402, Cedars-Sinai Plaza'\n : 'Video Telehealth · Secure HIPAA Link',\n )\n\n get rootClass(): string {\n return cn('mx-auto w-full max-w-6xl space-y-6', this.className)\n }\n\n setVisitType(value: string): void {\n this.visitType.set(value as SchedulerVisitType)\n }\n\n visitCardClass(kind: SchedulerVisitType): string {\n return cn(\n 'flex cursor-pointer items-start gap-3.5 rounded-xl border p-4 transition-colors duration-150',\n this.visitType() === kind\n ? 'border-primary bg-primary/5 ring-primary/30 shadow-xs ring-1'\n : 'border-border bg-card hover:bg-muted/40',\n )\n }\n\n dayCardClass(id: string): string {\n const selected = this.selectedDate() === id\n return cn(\n 'focus-visible:ring-primary flex cursor-pointer flex-col items-center justify-center rounded-xl border p-3 text-center transition-colors duration-150 outline-none focus-visible:ring-2',\n selected\n ? 'border-primary bg-primary text-primary-foreground ring-primary/20 font-semibold shadow-xs ring-2'\n : 'border-border bg-card hover:bg-muted/50 text-foreground',\n )\n }\n\n dayWeekdayClass(id: string): string {\n const selected = this.selectedDate() === id\n return cn(\n 'text-xs font-medium tracking-wider uppercase',\n selected ? 'text-primary-foreground/90' : 'text-muted-foreground',\n )\n }\n\n daySlotsClass(id: string): string {\n const selected = this.selectedDate() === id\n return cn('text-xs font-medium', selected ? 'text-primary-foreground/80' : 'text-success')\n }\n\n slotClass(slot: string): string {\n const selected = this.selectedTime() === slot\n return cn(\n 'focus-visible:ring-primary flex cursor-pointer items-center justify-center rounded-lg border px-3 py-2.5 text-sm font-medium tabular-nums transition-colors duration-150 outline-none focus-visible:ring-2',\n selected\n ? 'border-primary bg-primary text-primary-foreground ring-primary/30 font-semibold shadow-xs ring-2'\n : 'border-border bg-background hover:bg-muted/60 text-foreground',\n )\n }\n\n handleBook(): void {\n if (!this.patientName().trim() || !this.patientPhone().trim()) return\n this.isBooked.set(true)\n }\n\n handleReset(): void {\n this.isBooked.set(false)\n this.calendarAdded.set(false)\n }\n\n handleAddToCalendar(): void {\n this.calendarAdded.set(true)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/doctor-appointment-scheduler/doctor-appointment-scheduler.component.ts" }, { "path": "packages/registry-angular/blocks/doctor-appointment-scheduler/index.ts", "content": "export {\n UiDoctorAppointmentSchedulerComponent,\n type SchedulerVisitType,\n} from './doctor-appointment-scheduler.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/doctor-appointment-scheduler/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/avatar.json", "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/input.json", "https://uipkge.dev/r/angular/radio-group.json", "https://uipkge.dev/r/angular/select.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/textarea.json" ], "description": "Zocdoc and Epic style specialist doctor appointment booking scheduler: physician profile hero card with rating, clinic address, and insurance badges, interactive visit type selector, reason for visit dropdown, date carousel with daily availability indicators, morning and afternoon time slot picker, live appointment summary readout with copay estimate, patient registration inputs, and booking confirmation flow.", "categories": [ "healthcare", "app", "clinical", "forms" ] }