{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "patient-intake-form", "title": "Patient Intake Form", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/patient-intake-form/patient-intake-form.component.ts", "content": "// HIPAA-compliant new patient registration in a SectionCard: a 4-step Stepper (Personal\n// Information → Medical History → Insurance & Billing → Consent & Sign) with demographic\n// inputs, chronic-conditions checklist, allergy/medication textareas, carrier selection with\n// card-photo dropzones, HIPAA disclosures with an electronic signature stamp, and a\n// post-submission confirmation receipt. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, computed, signal } from '@angular/core'\nimport {\n Activity,\n AlertTriangle,\n Building2,\n Calendar,\n Check,\n ChevronLeft,\n ChevronRight,\n CreditCard,\n Download,\n FileCheck,\n FileText,\n Lock,\n LucideAngularModule,\n Phone,\n RotateCcw,\n ShieldCheck,\n Stethoscope,\n User,\n UserCheck,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCheckboxComponent } from '@/ui/checkbox/checkbox.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiLabelComponent } from '@/ui/label/label.component'\nimport { UiSectionCardComponent } from '@/ui/section-card/section-card.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 { UiStepperComponent, type StepperStep } from '@/ui/stepper/stepper.component'\nimport { UiTextareaComponent } from '@/ui/textarea/textarea.component'\n\nexport interface PatientIntakeData {\n firstName: string\n middleName: string\n lastName: string\n preferredName: string\n dob: string\n biologicalSex: string\n maritalStatus: string\n phone: string\n email: string\n streetAddress: string\n city: string\n state: string\n zipCode: string\n emergencyName: string\n emergencyRelationship: string\n emergencyPhone: string\n chronicConditions: string[]\n hasAllergies: boolean\n allergyDetails: string\n currentMedications: string\n pastSurgeries: string\n primaryCarePhysician: string\n clinicPhone: string\n insuranceCarrier: string\n memberId: string\n groupNumber: string\n policyholderName: string\n policyholderRelationship: string\n frontCardUploaded: boolean\n backCardUploaded: boolean\n hipaaConsent: boolean\n treatmentConsent: boolean\n telehealthConsent: boolean\n signatureName: string\n signatureDate: string\n signerRole: string\n}\n\nconst steps: StepperStep[] = [\n { id: 1, title: 'Personal Information', description: 'Demographics & Contact' },\n { id: 2, title: 'Medical History', description: 'Conditions & Medications' },\n { id: 3, title: 'Insurance & Billing', description: 'Coverage & Card Photos' },\n { id: 4, title: 'Consent & Sign', description: 'HIPAA & Authorization' },\n]\n\nconst CHRONIC_CONDITIONS = [\n { id: 'hypertension', label: 'Hypertension (High Blood Pressure)' },\n { id: 'diabetes', label: 'Diabetes (Type 1 or Type 2)' },\n { id: 'asthma', label: 'Asthma / Respiratory Conditions' },\n { id: 'heart_disease', label: 'Coronary Artery / Heart Disease' },\n { id: 'arthritis', label: 'Arthritis / Chronic Joint Pain' },\n { id: 'cancer', label: 'Cancer / Remission History' },\n { id: 'thyroid', label: 'Thyroid / Endocrine Disorder' },\n { id: 'anxiety_depression', label: 'Depression / Clinical Anxiety' },\n { id: 'kidney_disease', label: 'Chronic Kidney Disease' },\n { id: 'gerd', label: 'Acid Reflux / GERD' },\n]\n\nconst INSURANCE_CARRIERS = [\n { id: 'bcbs', label: 'BlueCross BlueShield' },\n { id: 'aetna', label: 'Aetna Health' },\n { id: 'cigna', label: 'Cigna Healthcare' },\n { id: 'united', label: 'UnitedHealthcare' },\n { id: 'medicare', label: 'Medicare Part A / B' },\n { id: 'medicaid', label: 'Medicaid' },\n { id: 'humana', label: 'Humana' },\n { id: 'kaiser', label: 'Kaiser Permanente' },\n { id: 'self_pay', label: 'Self-Pay (Uninsured)' },\n]\n\nconst DEFAULT_FORM: PatientIntakeData = {\n firstName: 'Eleanor',\n middleName: 'Rose',\n lastName: 'Vance',\n preferredName: 'Ellie',\n dob: '1988-10-14',\n biologicalSex: 'female',\n maritalStatus: 'married',\n phone: '(555) 234-8921',\n email: 'eleanor.vance@example.com',\n streetAddress: '742 Evergreen Terrace',\n city: 'Springfield',\n state: 'OR',\n zipCode: '97477',\n emergencyName: 'Marcus Vance',\n emergencyRelationship: 'spouse',\n emergencyPhone: '(555) 987-6543',\n chronicConditions: ['hypertension', 'asthma'],\n hasAllergies: true,\n allergyDetails: 'Penicillin (Anaphylaxis/hives), Sulfa antibiotics (severe skin rash)',\n currentMedications:\n 'Lisinopril 10mg PO once daily in morning, Albuterol HFA 90mcg inhaler 1-2 puffs Q4H PRN for bronchospasm, Multivitamin daily',\n pastSurgeries: 'Appendectomy (Laparoscopic, 2016), Right knee arthroscopy / meniscus debridement (2021)',\n primaryCarePhysician: 'Dr. Robert Chen, MD',\n clinicPhone: '(555) 601-2290 — Northwest Health Partners',\n insuranceCarrier: 'bcbs',\n memberId: 'XEH-902814891',\n groupNumber: 'GRP-44028',\n policyholderName: 'Eleanor Vance',\n policyholderRelationship: 'self',\n frontCardUploaded: true,\n backCardUploaded: true,\n hipaaConsent: true,\n treatmentConsent: true,\n telehealthConsent: true,\n signatureName: 'Eleanor R. Vance',\n signatureDate: '2026-08-21',\n signerRole: 'patient',\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-patient-intake-form, [ui-patient-intake-form]',\n standalone: true,\n // React renders the SectionCard itself: the host stays out of layout and `class` goes to the card.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCheckboxComponent,\n UiInputComponent,\n UiLabelComponent,\n UiSectionCardComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiSeparatorComponent,\n UiStepperComponent,\n UiTextareaComponent,\n ],\n template: `\n \n
\n \n \n HIPAA Protected\n \n \n Form #PHI-2026-894\n \n
\n\n @if (step() <= 4) {\n \n }\n\n \n @if (step() === 1) {\n
\n
\n \n
\n

Protected Health Information (PHI) Notice

\n

\n All legal demographics and medical history submitted through this portal are encrypted in accordance\n with federal HIPAA Omnibus rules and directly synchronized with the clinic's Electronic Health Record\n (EHR).\n

\n
\n
\n\n
\n

\n \n Legal Patient Identification\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 Birth & Clinical Demographics\n

\n
\n
\n \n \n
\n
\n \n \n \n \n Female\n Male\n Intersex\n Prefer not to disclose\n \n \n
\n
\n \n \n \n \n Single\n Married\n Divorced\n Widowed\n Other\n \n \n
\n
\n
\n\n \n\n
\n

\n \n Contact & Residential Address\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
\n\n \n\n
\n
\n
\n \n

\n Emergency Contact (Designated Healthcare Surrogate)\n

\n
\n Required\n
\n
\n
\n \n \n
\n
\n \n \n \n \n Spouse\n Parent / Guardian\n Adult Child\n Sibling\n Friend / Relative\n Other Legal Representative\n \n \n
\n
\n \n \n
\n
\n
\n
\n }\n\n \n @if (step() === 2) {\n
\n
\n
\n
\n \n

Chronic & Pre-Existing Health Conditions

\n
\n \n {{ form().chronicConditions.length }} selected\n \n
\n

\n Select any conditions diagnosed or treated in the past 5 years. If none apply, leave unchecked.\n

\n
\n @for (cond of chronicConditions; track cond.id) {\n \n \n \n {{ cond.label }}\n \n
\n }\n
\n
\n\n \n\n
\n
\n
\n \n

Known Drug, Latex, or Food Allergies

\n
\n
\n \n
\n
\n @if (form().hasAllergies) {\n
\n \n \n
\n } @else {\n

No known drug, latex, or food allergies reported.

\n }\n
\n\n \n\n
\n
\n \n \n
\n \n

\n Include all daily vitamins, herbal supplements, inhalers, and injections.\n

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

Primary Care Provider / Referring Clinic

\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n }\n\n \n @if (step() === 3) {\n
\n
\n
\n
\n \n

Primary Medical Insurance Carrier

\n
\n Primary Plan\n
\n
\n
\n \n \n \n \n @for (carrier of insuranceCarriers; track carrier.id) {\n {{ carrier.label }}\n }\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n\n \n\n
\n

\n \n Primary Policyholder Information\n

\n
\n
\n \n \n
\n
\n \n \n \n \n Self (Patient is Policyholder)\n Spouse\n Child / Dependent\n Other Legal Custodian\n \n \n
\n
\n
\n\n \n\n
\n
\n
\n \n

Insurance Card Photo Verification

\n
\n PNG, JPG, PDF up to 10MB\n
\n

\n Provide high-resolution photos of both front and back sides of your insurance card for optical character\n recognition (OCR) and benefit eligibility verification.\n

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

Front of Insurance Card

\n

Subscriber ID & carrier logo visible

\n
\n
\n \n @if (form().frontCardUploaded) {\n \n \n card_front_scan.jpg (2.4 MB)\n \n } @else {\n No file selected\n }\n \n {{ form().frontCardUploaded ? 'Replace' : 'Upload Front' }}\n \n
\n
\n\n \n
\n
\n \n
\n
\n

Back of Insurance Card

\n

Claims address & Rx BIN visible

\n
\n
\n \n @if (form().backCardUploaded) {\n \n \n card_back_scan.jpg (1.9 MB)\n \n } @else {\n No file selected\n }\n \n {{ form().backCardUploaded ? 'Replace' : 'Upload Back' }}\n \n
\n \n \n \n \n }\n\n \n @if (step() === 4) {\n
\n
\n
\n
\n \n

Regulatory Disclosures & Legal Notice

\n
\n Mandatory Acknowledgement\n
\n \n
\n 1. HIPAA Notice of Privacy Practices:\n I acknowledge receipt and review of the Notice of Privacy Practices, which describes how my Protected\n Health Information (PHI) may be used and disclosed for clinical treatment, payment processing, and\n healthcare operations in strict compliance with the HIPAA Omnibus Rule (45 CFR § 164.520).\n
\n
\n 2. Informed Consent for Outpatient Treatment:\n I voluntarily authorize the clinical physicians and allied healthcare team to perform diagnostic\n evaluations, blood tests, physical examinations, and outpatient clinical care deemed medically\n necessary.\n
\n
\n 3. Assignment of Benefits & Financial Agreement:\n I assign all medical insurance benefits directly to the provider. I acknowledge that I remain\n financially responsible for copayments, deductibles, and non-covered services not adjudicated by my\n carrier.\n
\n
\n
\n\n
\n
\n \n
\n \n

\n I have read, understood, and accept the HIPAA Notice of Privacy Practices and consent to electronic\n medical record management.\n

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

\n I authorize medical evaluation and agree to the assignment of insurance benefits to the clinical care\n provider.\n

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

\n I consent to virtual video consultations and automated SMS/email appointment notifications and lab\n report alerts.\n

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

Electronic Signature & Digital Certification

\n
\n \n 256-bit Certified\n \n
\n\n
\n
\n \n \n
\n
\n \n \n \n \n Patient (Self)\n Parent / Legal Guardian\n Medical Power of Attorney\n \n \n
\n
\n \n \n
\n
\n\n
\n
\n Legal Digital Signature Stamp \n \n \n Verified & Timestamped\n \n
\n\n
\n

\n {{ form().signatureName || 'Your Signature' }}\n

\n
\n\n
\n Signer: {{ form().signatureName || 'Eleanor Vance' }} ({{ form().signerRole }})\n Date: {{ form().signatureDate }} · Ref #SIG-49102-HIPAA\n
\n
\n
\n \n }\n\n \n @if (step() === 5) {\n
\n \n \n
\n\n
\n

Patient Intake Submitted Successfully

\n

\n Your new patient registration and encrypted medical disclosures have been received and queued for clinical\n triage.\n

\n
\n\n
\n Confirmation ID:\n {{ intakeId() }}\n
\n\n
\n
\n
\n Patient Name:\n {{ form().firstName }} {{ form().middleName }} {{ form().lastName }}\n
\n
\n Date of Birth:\n {{ form().dob }} ({{ form().biologicalSex }})\n
\n
\n Primary Insurance:\n {{ selectedCarrierLabel() }} (ID: {{ form().memberId }})\n
\n
\n Emergency Contact:\n {{ form().emergencyName }} ({{ form().emergencyPhone }})\n
\n \n Legal Signature:\n {{ form().signatureName }} ({{ form().signatureDate }})\n
\n
\n \n\n
\n \n \n Download Intake PDF\n \n \n
\n \n }\n\n
\n @if (step() > 1 && step() <= 4) {\n \n } @else {\n \n }\n\n @if (step() <= 4) {\n Step {{ step() }} of 4 — {{ stepTitle() }} \n } @else {\n Registration Complete\n }\n\n @if (step() < 4) {\n \n Continue\n \n \n } @else if (step() === 4) {\n \n \n Submit Registration\n \n } @else {\n \n }\n
\n \n `,\n})\nexport class UiPatientIntakeFormComponent {\n protected readonly Activity = Activity\n protected readonly AlertTriangle = AlertTriangle\n protected readonly Building2 = Building2\n protected readonly Calendar = Calendar\n protected readonly Check = Check\n protected readonly ChevronLeft = ChevronLeft\n protected readonly ChevronRight = ChevronRight\n protected readonly CreditCard = CreditCard\n protected readonly Download = Download\n protected readonly FileCheck = FileCheck\n protected readonly FileText = FileText\n protected readonly Lock = Lock\n protected readonly Phone = Phone\n protected readonly RotateCcw = RotateCcw\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Stethoscope = Stethoscope\n protected readonly User = User\n protected readonly UserCheck = UserCheck\n\n protected readonly steps = steps\n protected readonly chronicConditions = CHRONIC_CONDITIONS\n protected readonly insuranceCarriers = INSURANCE_CARRIERS\n\n @Input('class') className?: string\n\n readonly step = signal(1)\n readonly submitted = signal(false)\n readonly intakeId = signal('INTAKE-2026-8942')\n readonly form = signal({\n ...DEFAULT_FORM,\n chronicConditions: [...DEFAULT_FORM.chronicConditions],\n })\n\n @Input('initialStep') set initialStepAttr(v: number | undefined) {\n if (v !== undefined) this.step.set(v)\n }\n @Input('initialData') set initialDataAttr(v: Partial | undefined) {\n if (v !== undefined) {\n this.form.update((prev) => ({\n ...prev,\n ...v,\n chronicConditions: v.chronicConditions ? [...v.chronicConditions] : [...prev.chronicConditions],\n }))\n }\n }\n\n @Output() readonly submit = new EventEmitter()\n @Output() readonly stepChange = new EventEmitter()\n\n readonly selectedCarrierLabel = computed(() => {\n const found = INSURANCE_CARRIERS.find((c) => c.id === this.form().insuranceCarrier)\n return found ? found.label : this.form().insuranceCarrier\n })\n\n readonly stepTitle = computed(() => steps[this.step() - 1]?.title ?? '')\n\n readonly continueDisabled = computed(\n () => this.step() === 1 && (this.form().firstName.trim() === '' || this.form().lastName.trim() === ''),\n )\n\n readonly submitDisabled = computed(\n () => !this.form().hipaaConsent || !this.form().treatmentConsent || this.form().signatureName.trim() === '',\n )\n\n get cardClass(): string {\n return cn('max-w-4xl', this.className)\n }\n\n setField(key: K, value: PatientIntakeData[K]): void {\n this.form.update((prev) => ({ ...prev, [key]: value }))\n }\n\n toggleCondition(conditionId: string, checked: boolean | 'indeterminate'): void {\n this.form.update((prev) => {\n if (checked === true) {\n if (prev.chronicConditions.includes(conditionId)) return prev\n return { ...prev, chronicConditions: [...prev.chronicConditions, conditionId] }\n }\n return { ...prev, chronicConditions: prev.chronicConditions.filter((id) => id !== conditionId) }\n })\n }\n\n toggleUpload(key: 'frontCardUploaded' | 'backCardUploaded'): void {\n this.form.update((prev) => ({ ...prev, [key]: !prev[key] }))\n }\n\n onStepperInput(value: number): void {\n // Backward navigation through the stepper is free; forward goes through Continue.\n if (value < this.step() && this.step() !== 5) {\n this.step.set(value)\n this.stepChange.emit(value)\n }\n }\n\n goNext(): void {\n if (this.step() < 4) {\n const next = this.step() + 1\n this.step.set(next)\n this.stepChange.emit(next)\n }\n }\n\n goBack(): void {\n if (this.step() > 1 && this.step() <= 4) {\n const prev = this.step() - 1\n this.step.set(prev)\n this.stepChange.emit(prev)\n }\n }\n\n handleSubmit(): void {\n this.submitted.set(true)\n this.step.set(5)\n const form = this.form()\n this.submit.emit({ ...form, chronicConditions: [...form.chronicConditions] })\n this.stepChange.emit(5)\n }\n\n resetForm(): void {\n this.step.set(1)\n this.submitted.set(false)\n this.stepChange.emit(1)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/patient-intake-form/patient-intake-form.component.ts" }, { "path": "packages/registry-angular/blocks/patient-intake-form/index.ts", "content": "export { UiPatientIntakeFormComponent, type PatientIntakeData } from './patient-intake-form.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/patient-intake-form/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/checkbox.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/label.json", "https://uipkge.dev/r/angular/section-card.json", "https://uipkge.dev/r/angular/select.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/stepper.json", "https://uipkge.dev/r/angular/textarea.json" ], "description": "HIPAA-compliant new patient registration and medical history questionnaire in a SectionCard. Features a 4-step Stepper (Personal Information → Medical History → Insurance & Billing → Consent & Sign), demographic inputs with biological sex and emergency contact, chronic conditions checklist with allergy details and medication textareas, insurance carrier selection with card photo upload dropzones, regulatory HIPAA disclosure accordion with electronic signature pad, and a post-submission confirmation receipt with patient ID.", "categories": [ "healthcare", "app", "forms" ] }