{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "benefits-enrollment-portal", "title": "Benefits Enrollment Portal", "type": "registry:page", "files": [ { "path": "packages/registry-angular/blocks/benefits-enrollment-portal/benefits-enrollment-portal.component.ts", "content": "// Employee benefits open enrollment portal with interactive medical, dental, and vision\n// plan comparisons, customizable 401(k) contribution slider with real-time employer match\n// calculation, and a sticky paycheck impact summary. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, OnInit, computed, signal } from '@angular/core'\nimport {\n AlertCircle,\n Check,\n CheckCircle2,\n Clock,\n Download,\n Eye,\n FileCheck,\n FileSignature,\n HeartPulse,\n LucideAngularModule,\n Percent,\n PiggyBank,\n RefreshCw,\n ShieldCheck,\n User,\n Users,\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 UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiRadioGroupComponent, UiRadioGroupItemComponent } from '@/ui/radio-group/radio-group.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport { UiSliderComponent } from '@/ui/slider/slider.component'\n\nexport interface MedicalPlan {\n id: string\n name: string\n carrier: string\n badge?: string\n badgeVariant?: 'default' | 'secondary' | 'outline'\n employeeCostPerPaycheck: number\n employerCostPerMonth: number\n deductible: string\n outOfPocketMax: string\n copayOrCoinsurance: string\n hsaSeed: number\n description: string\n highlights: string[]\n}\n\nconst MEDICAL_PLANS: MedicalPlan[] = [\n {\n id: 'medical-ppo-hsa',\n name: 'BlueCross PPO High Deductible + HSA',\n carrier: 'BlueCross BlueShield',\n badge: 'Popular · HSA Eligible',\n badgeVariant: 'secondary',\n employeeCostPerPaycheck: 85,\n employerCostPerMonth: 450,\n deductible: '$1,600 ind / $3,200 fam',\n outOfPocketMax: '$4,000 ind / $8,000 fam',\n copayOrCoinsurance: '10% after deductible',\n hsaSeed: 500,\n description: 'Triple tax-advantaged health savings account with an employer-funded annual HSA contribution.',\n highlights: [\n '$500 annual employer HSA contribution funded on Jan 1',\n '100% preventive care covered in-network with $0 deductible',\n 'Flexible nationwide PPO specialist access without referrals',\n ],\n },\n {\n id: 'medical-gold-ppo',\n name: 'BlueCross Gold Premier PPO',\n carrier: 'BlueCross BlueShield',\n badge: 'Low $250 Deductible',\n badgeVariant: 'outline',\n employeeCostPerPaycheck: 180,\n employerCostPerMonth: 520,\n deductible: '$250 ind / $500 fam',\n outOfPocketMax: '$2,500 ind / $5,000 fam',\n copayOrCoinsurance: '$20 Primary / $40 Specialist',\n hsaSeed: 0,\n description: 'Predictable low-copay coverage designed for frequent medical care, prescriptions, and peace of mind.',\n highlights: [\n 'Ultra-low $250 individual deductible for comprehensive care',\n '$20 primary care & $40 specialist fixed office visit copays',\n 'Tier 1 generic prescriptions covered at $10 copay',\n ],\n },\n {\n id: 'medical-kaiser-hmo',\n name: 'Kaiser Permanente HMO',\n carrier: 'Kaiser Permanente',\n badge: '$0 Deductible',\n badgeVariant: 'outline',\n employeeCostPerPaycheck: 40,\n employerCostPerMonth: 420,\n deductible: '$0 ind / $0 fam',\n outOfPocketMax: '$1,500 ind / $3,000 fam',\n copayOrCoinsurance: '$15 Primary / $25 Specialist',\n hsaSeed: 0,\n description: 'Integrated in-network HMO coverage with zero deductible and lowest payroll deduction.',\n highlights: [\n '$0 deductible with everything under one roof at Kaiser centers',\n '$15 copay for routine medical and virtual telehealth visits',\n 'Lowest bi-weekly payroll deduction across all medical tiers',\n ],\n },\n]\n\nexport interface DentalPlan {\n id: string\n name: string\n carrier: string\n badge?: string\n badgeVariant?: 'default' | 'secondary' | 'outline'\n employeeCostPerPaycheck: number\n employerCostPerMonth: number\n annualMax: string\n preventive: string\n basic: string\n majorOrOrtho: string\n description: string\n}\n\nconst DENTAL_PLANS: DentalPlan[] = [\n {\n id: 'dental-comprehensive',\n name: 'Delta Dental Premier Comprehensive',\n carrier: 'Delta Dental',\n badge: 'Comprehensive · Ortho Included',\n badgeVariant: 'secondary',\n employeeCostPerPaycheck: 14,\n employerCostPerMonth: 35,\n annualMax: '$2,000 / member / yr',\n preventive: '100% (2 cleanings & exams / yr)',\n basic: '80% coverage (fillings & endodontics)',\n majorOrOrtho: '50% coverage ($1,500 lifetime ortho)',\n description: 'Complete coverage for preventative cleanings, major restorative procedures, and orthodontic care.',\n },\n {\n id: 'dental-basic',\n name: 'Delta Dental Basic',\n carrier: 'Delta Dental',\n badge: 'Basic Preventive',\n badgeVariant: 'outline',\n employeeCostPerPaycheck: 5,\n employerCostPerMonth: 20,\n annualMax: '$1,000 / member / yr',\n preventive: '100% (2 cleanings / yr)',\n basic: '50% coverage',\n majorOrOrtho: 'Not covered',\n description: 'Essential preventive dental care for routine bi-annual cleanings, exams, and basic cavity fillings.',\n },\n {\n id: 'dental-waive',\n name: 'Waive Dental Coverage',\n carrier: 'Decline',\n employeeCostPerPaycheck: 0,\n employerCostPerMonth: 0,\n annualMax: '$0',\n preventive: 'None',\n basic: 'None',\n majorOrOrtho: 'None',\n description: 'Decline dental insurance coverage for the 2026-2027 plan year.',\n },\n]\n\nexport interface VisionPlan {\n id: string\n name: string\n carrier: string\n badge?: string\n badgeVariant?: 'default' | 'secondary' | 'outline'\n employeeCostPerPaycheck: number\n employerCostPerMonth: number\n examCopay: string\n frameAllowance: string\n lenses: string\n description: string\n}\n\nconst VISION_PLANS: VisionPlan[] = [\n {\n id: 'vision-choice-plus',\n name: 'VSP Vision Choice Plus',\n carrier: 'VSP Vision Care',\n badge: '$200 Frame Allowance',\n badgeVariant: 'secondary',\n employeeCostPerPaycheck: 8,\n employerCostPerMonth: 12,\n examCopay: '$10 copay (every 12 mo)',\n frameAllowance: '$200 allowance + 20% off overage',\n lenses: 'Progressives & anti-glare covered in full',\n description: 'Premium vision coverage with generous designer frame allowances and full progressive lens coverage.',\n },\n {\n id: 'vision-standard',\n name: 'VSP Standard Vision',\n carrier: 'VSP Vision Care',\n badge: 'Standard',\n badgeVariant: 'outline',\n employeeCostPerPaycheck: 3,\n employerCostPerMonth: 8,\n examCopay: '$15 copay (every 12 mo)',\n frameAllowance: '$120 frame allowance',\n lenses: 'Standard single-vision lenses covered',\n description: 'Core vision benefit for annual eye exams and standard prescription glasses.',\n },\n {\n id: 'vision-waive',\n name: 'Waive Vision Coverage',\n carrier: 'Decline',\n employeeCostPerPaycheck: 0,\n employerCostPerMonth: 0,\n examCopay: '$0',\n frameAllowance: '$0',\n lenses: 'None',\n description: 'Decline vision insurance coverage for the 2026-2027 plan year.',\n },\n]\n\nconst SLIDER_MARKS: Record = {\n 1: '1%',\n 4: '4%',\n 6: '6% (Max Match)',\n 10: '10%',\n 15: '15%',\n 20: '20%',\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-benefits-enrollment-portal, [ui-benefits-enrollment-portal]',\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 UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiRadioGroupComponent,\n UiRadioGroupItemComponent,\n UiSeparatorComponent,\n UiSliderComponent,\n ],\n template: `\n
\n \n
\n
\n
\n
\n \n \n Open Enrollment Period Ends {{ deadlineDate }} · {{ daysRemaining }} Days Left\n \n @if (isSubmitted()) {\n \n \n Elections Submitted & Signed\n \n }\n
\n\n
\n

\n Annual Benefits Open Enrollment\n

\n

\n Select your health coverage, retirement matching, and ancillary wellness plans for the 2026-2027 plan\n year.\n

\n
\n\n \n \n
\n \n {{ employeeName }}\n
\n
\n \n Tier: {{ coverageTier }}\n
\n
\n ID: {{ employeeId }}\n
\n
\n Base:\n \\${{ annualSalary.toLocaleString('en-US') }}/yr\n
\n
\n
\n\n
\n @if (!isSubmitted()) {\n \n } @else {\n \n \n Modify My Elections\n \n }\n\n

\n Changes take effect October 1, 2026\n

\n
\n
\n
\n\n \n @if (isSubmitted()) {\n \n
\n \n \n
\n
\n

\n Enrollment Signed & Confirmed for Plan Year 2026-2027\n

\n

\n Confirmation Reference: #BEN-2026-89241 ·\n Signed by {{ employeeName }} on August 21, 2026.\n

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

1. Medical Health Plan

\n

\n Comprehensive inpatient, outpatient, prescription, and preventive medical coverage.\n

\n
\n
\n 3 Plans Available \n
\n
\n\n
\n \n @for (plan of medicalPlans; track plan.id) {\n \n
\n
\n \n
\n
\n \n {{ plan.name }}\n \n @if (plan.badge) {\n \n {{ plan.badge }}\n \n }\n
\n

{{ plan.carrier }} · {{ plan.description }}

\n
\n
\n\n
\n
\n \n \\${{ plan.employeeCostPerPaycheck }}\n \n / paycheck\n
\n

\n Employer pays\n \\${{ plan.employerCostPerMonth }}/mo\n

\n
\n
\n\n \n \n
\n Annual Deductible\n {{ plan.deductible }}\n
\n
\n Out-of-Pocket Max\n {{ plan.outOfPocketMax }}\n
\n
\n Primary / Specialist\n {{ plan.copayOrCoinsurance }}\n
\n
\n HSA Company Seed\n 0\n ? 'text-success font-semibold tabular-nums'\n : 'text-muted-foreground font-medium'\n \"\n >\n {{ plan.hsaSeed > 0 ? '$' + plan.hsaSeed + ' / yr' : 'Not eligible' }}\n \n
\n
\n\n \n
    \n @for (highlight of plan.highlights; track highlight) {\n
  • \n \n {{ highlight }}\n
    • \n }\n
\n
\n }\n \n
\n \n\n \n
\n
\n
\n
\n \n \n
\n
\n

2. Dental Plan

\n

\n Preventive exams, cleanings, restorative treatments, and orthodontic benefits.\n

\n
\n
\n 2 Plans + Waive \n
\n
\n\n
\n \n @for (plan of dentalPlans; track plan.id) {\n \n
\n
\n \n
\n
\n \n {{ plan.name }}\n \n @if (plan.badge) {\n \n {{ plan.badge }}\n \n }\n
\n

{{ plan.carrier }} · {{ plan.description }}

\n
\n
\n\n
\n
\n \n \\${{ plan.employeeCostPerPaycheck }}\n \n / paycheck\n
\n @if (plan.employerCostPerMonth > 0) {\n

\n Employer pays\n \\${{ plan.employerCostPerMonth }}/mo\n

\n } @else {\n

No payroll deduction

\n }\n
\n
\n\n @if (plan.employeeCostPerPaycheck > 0) {\n \n
\n Annual Maximum\n {{ plan.annualMax }}\n
\n
\n Preventive Cleanings\n {{ plan.preventive }}\n
\n
\n Basic Services\n {{ plan.basic }}\n
\n
\n Major & Orthodontics\n {{ plan.majorOrOrtho }}\n
\n
\n }\n \n }\n \n \n \n\n \n
\n
\n
\n
\n \n \n
\n
\n

3. Vision Plan

\n

\n Routine eye exams, designer frame allowances, contact lenses, and progressive lens discounts.\n

\n
\n
\n 2 Plans + Waive \n
\n
\n\n
\n \n @for (plan of visionPlans; track plan.id) {\n \n
\n
\n \n
\n
\n \n {{ plan.name }}\n \n @if (plan.badge) {\n \n {{ plan.badge }}\n \n }\n
\n

{{ plan.carrier }} · {{ plan.description }}

\n
\n
\n\n
\n
\n \n \\${{ plan.employeeCostPerPaycheck }}\n \n / paycheck\n
\n @if (plan.employerCostPerMonth > 0) {\n

\n Employer pays\n \\${{ plan.employerCostPerMonth }}/mo\n

\n } @else {\n

No payroll deduction

\n }\n
\n
\n\n @if (plan.employeeCostPerPaycheck > 0) {\n \n
\n Annual Exam Copay\n {{ plan.examCopay }}\n
\n
\n Frame Allowance\n {{ plan.frameAllowance }}\n
\n
\n Prescription Lenses\n {{ plan.lenses }}\n
\n
\n }\n \n }\n \n \n \n\n \n
\n
\n
\n
\n \n \n
\n
\n

4. 401(k) Retirement & Employer Match

\n

Pre-tax salary deferrals with tiered 100% + 50% company matching formula.

\n
\n
\n \n {{ maxMatchUnlocked() ? 'Max Match Active' : 'Match Available' }}\n \n
\n
\n\n
\n \n \n
\n \n
\n Company Match Formula\n

\n 100% match up to 4% + 50% match on next 2% ·\n Maximum $6,000 employer match unlocked!\n

\n
\n
\n\n
\n \n @if (maxMatchUnlocked()) {\n \n 100% Max Match Achieved ($6,000/yr)\n } @else {\n \n Leaving \\${{ missedMatchAnnual().toLocaleString('en-US') }}/yr on table\n }\n \n
\n
\n\n \n
\n
\n
\n Your Pre-Tax Contribution Rate\n

\n Calculated from gross salary (\\${{\n paycheckGross().toLocaleString('en-US', {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n })\n }}\n / semi-monthly paycheck)\n

\n
\n\n
\n
\n {{ k401Rate() }}% \n Contribution\n
\n \n \\${{ k401EmployeePerPaycheck().toFixed(2) }} / paycheck (\\${{\n k401EmployeeAnnual().toLocaleString('en-US')\n }}/yr)\n \n
\n
\n\n
\n \n
\n
\n\n \n
\n
\n Your Paycheck Deferral\n \n \\${{ k401EmployeePerPaycheck().toFixed(2) }}\n \n \n \\${{ k401EmployeeAnnual().toLocaleString('en-US') }} / year\n \n
\n\n
\n Employer Match Added\n \n +\\${{ k401EmployerPerPaycheck().toFixed(2) }}\n \n \n \\${{ k401EmployerAnnual().toLocaleString('en-US') }} / year (Free Match)\n \n
\n\n
\n Total 401(k) Annual Savings\n \n \\${{ (k401EmployeeAnnual() + k401EmployerAnnual()).toLocaleString('en-US') }}\n \n 2026 IRS Cap: $23,500 \n
\n
\n \n \n \n\n \n
\n
\n
\n
\n \n Paycheck Impact Summary\n \n Semi-Monthly \n
\n\n \n
\n Total Employee Benefit Cost\n
\n \n \\${{ healthCostPerPaycheck().toFixed(2) }}\n \n / pay period\n
\n

Pre-tax health, dental, and vision deductions

\n
\n\n \n
\n Total Annual Employer Value\n
\n \n \\${{\n totalEmployerAnnualValue().toLocaleString('en-US', {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n })\n }}\n \n / year\n
\n

\n Includes company medical, dental, vision subsidies, HSA seed, match & insurance.\n

\n
\n
\n\n
\n \n\n \n
\n \n Employee Payroll Deductions\n \n\n
\n Medical ({{ currentMedical().name.split(' ')[0] }} {{ currentMedical().name.split(' ')[1] }})\n \\${{ currentMedical().employeeCostPerPaycheck.toFixed(2) }}\n
\n\n
\n Dental ({{ currentDental().name.split(' ')[0] }} {{ currentDental().name.split(' ')[1] }})\n \\${{ currentDental().employeeCostPerPaycheck.toFixed(2) }}\n
\n\n
\n Vision ({{ currentVision().name.split(' ')[0] }} {{ currentVision().name.split(' ')[1] }})\n \\${{ currentVision().employeeCostPerPaycheck.toFixed(2) }}\n
\n\n
\n Pre-Tax Health Total\n \\${{ healthCostPerPaycheck().toFixed(2) }}\n
\n\n
\n 401(k) Contribution ({{ k401Rate() }}%)\n \\${{ k401EmployeePerPaycheck().toFixed(2) }}\n
\n\n
\n Total Pre-Tax per Paycheck\n \\${{ totalEmployeePerPaycheck().toFixed(2) }}\n
\n\n
\n Est. Pre-Tax Tax Savings (~25%)\n -\\${{ estimatedTaxSavingsPerPaycheck().toFixed(2) }}\n
\n\n
\n Est. Net Take-Home Impact\n -\\${{ netTakeHomeImpact().toFixed(2) }}\n
\n
\n\n \n\n \n
\n \n Employer Benefits Breakdown\n \n\n
\n Medical Subsidy\n \\${{ (currentMedical().employerCostPerMonth * 12).toLocaleString('en-US') }}/yr\n
\n\n
\n Dental Subsidy\n \\${{ (currentDental().employerCostPerMonth * 12).toLocaleString('en-US') }}/yr\n
\n\n
\n Vision Subsidy\n \\${{ (currentVision().employerCostPerMonth * 12).toLocaleString('en-US') }}/yr\n
\n\n @if (currentMedical().hsaSeed > 0) {\n
\n HSA Annual Contribution\n \\${{ currentMedical().hsaSeed.toLocaleString('en-US') }}/yr\n
\n }\n\n
\n 401(k) Employer Match\n \\${{ k401EmployerAnnual().toLocaleString('en-US') }}/yr\n
\n\n
\n Life, AD&D & Disability\n \\${{ employerLifeDisabilityAnnual.toLocaleString('en-US') }}/yr\n
\n
\n
\n\n
\n @if (!isSubmitted()) {\n \n \n Save Selections & Sign\n \n } @else {\n \n \n Elections Signed (Edit)\n \n }\n\n

\n Annual elections lock on {{ deadlineDate }}, 11:59 PM EST\n

\n
\n
\n
\n \n\n \n @if (showSignModal()) {\n
\n \n
\n
\n \n

Review & Sign Elective Enrollment

\n
\n

\n Please verify your selections below before electronically signing for the 2026-2027 plan year.\n

\n
\n\n
\n
\n Employee:\n {{ employeeName }} ({{ coverageTier }})\n
\n
\n Medical Plan:\n {{ currentMedical().name }}\n
\n
\n Dental Plan:\n {{ currentDental().name }}\n
\n
\n Vision Plan:\n {{ currentVision().name }}\n
\n
\n 401(k) Contribution:\n {{ k401Rate() }}% (\\${{ k401EmployeePerPaycheck().toFixed(2) }} / paycheck)\n
\n
\n Total Deduction per Paycheck:\n \\${{ totalEmployeePerPaycheck().toFixed(2) }}\n
\n
\n\n
\n \n
\n\n
\n \n \n \n Confirm & Submit Signature\n \n
\n
\n \n }\n \n `,\n})\nexport class UiBenefitsEnrollmentPortalComponent implements OnInit {\n protected readonly AlertCircle = AlertCircle\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Clock = Clock\n protected readonly Download = Download\n protected readonly Eye = Eye\n protected readonly FileCheck = FileCheck\n protected readonly FileSignature = FileSignature\n protected readonly HeartPulse = HeartPulse\n protected readonly Percent = Percent\n protected readonly PiggyBank = PiggyBank\n protected readonly RefreshCw = RefreshCw\n protected readonly ShieldCheck = ShieldCheck\n protected readonly User = User\n protected readonly Users = Users\n\n protected readonly medicalPlans = MEDICAL_PLANS\n protected readonly dentalPlans = DENTAL_PLANS\n protected readonly visionPlans = VISION_PLANS\n protected readonly sliderMarks = SLIDER_MARKS\n protected readonly employerLifeDisabilityAnnual = 2386\n\n @Input() employeeName = 'Elena Rostova'\n @Input() employeeId = 'EMP-48201'\n @Input() coverageTier = 'Employee + Spouse'\n @Input() department = 'Engineering · Senior Staff'\n @Input() deadlineDate = 'Sep 15'\n @Input() daysRemaining = 14\n @Input() annualSalary = 120000\n @Input() payPeriodsPerYear = 24\n @Input() initialMedicalPlan = 'medical-ppo-hsa'\n @Input() initialDentalPlan = 'dental-comprehensive'\n @Input() initialVisionPlan = 'vision-choice-plus'\n @Input() initial401kRate = 6\n @Input('class') className?: string\n\n readonly selectedMedical = signal('medical-ppo-hsa')\n readonly selectedDental = signal('dental-comprehensive')\n readonly selectedVision = signal('vision-choice-plus')\n readonly k401Rate = signal(6)\n readonly isSubmitted = signal(false)\n readonly signatureAcknowledged = signal(false)\n readonly showSignModal = signal(false)\n\n ngOnInit(): void {\n this.selectedMedical.set(this.initialMedicalPlan)\n this.selectedDental.set(this.initialDentalPlan)\n this.selectedVision.set(this.initialVisionPlan)\n this.k401Rate.set(this.initial401kRate)\n }\n\n readonly currentMedical = computed(\n () => MEDICAL_PLANS.find((p) => p.id === this.selectedMedical()) ?? MEDICAL_PLANS[0]!,\n )\n readonly currentDental = computed(() => DENTAL_PLANS.find((p) => p.id === this.selectedDental()) ?? DENTAL_PLANS[0]!)\n readonly currentVision = computed(() => VISION_PLANS.find((p) => p.id === this.selectedVision()) ?? VISION_PLANS[0]!)\n\n readonly paycheckGross = computed(() => this.annualSalary / this.payPeriodsPerYear)\n\n readonly k401EmployeePerPaycheck = computed(() => (this.paycheckGross() * this.k401Rate()) / 100)\n readonly k401EmployeeAnnual = computed(() => this.k401EmployeePerPaycheck() * this.payPeriodsPerYear)\n\n // 100% match up to 4% + 50% match on next 2% -> max 5.0% at a 6% employee contribution.\n readonly employerMatchRate = computed(() => {\n const rate = this.k401Rate()\n if (rate <= 0) return 0\n if (rate <= 4) return rate\n if (rate === 5) return 4.5\n return 5.0\n })\n\n readonly k401EmployerPerPaycheck = computed(() => (this.paycheckGross() * this.employerMatchRate()) / 100)\n readonly k401EmployerAnnual = computed(() => this.k401EmployerPerPaycheck() * this.payPeriodsPerYear)\n readonly maxMatchUnlocked = computed(() => this.k401Rate() >= 6)\n readonly missedMatchAnnual = computed(() => {\n const maxPossible = (this.annualSalary * 5.0) / 100\n return Math.max(0, maxPossible - this.k401EmployerAnnual())\n })\n\n readonly healthCostPerPaycheck = computed(\n () =>\n this.currentMedical().employeeCostPerPaycheck +\n this.currentDental().employeeCostPerPaycheck +\n this.currentVision().employeeCostPerPaycheck,\n )\n\n readonly totalEmployeePerPaycheck = computed(() => this.healthCostPerPaycheck() + this.k401EmployeePerPaycheck())\n readonly estimatedTaxSavingsPerPaycheck = computed(\n () => Math.round(this.totalEmployeePerPaycheck() * 0.25 * 100) / 100,\n )\n readonly netTakeHomeImpact = computed(() => this.totalEmployeePerPaycheck() - this.estimatedTaxSavingsPerPaycheck())\n\n readonly totalEmployerAnnualValue = computed(\n () =>\n this.currentMedical().employerCostPerMonth * 12 +\n this.currentDental().employerCostPerMonth * 12 +\n this.currentVision().employerCostPerMonth * 12 +\n this.currentMedical().hsaSeed +\n this.k401EmployerAnnual() +\n this.employerLifeDisabilityAnnual,\n )\n\n get rootClass(): string {\n return cn('mx-auto w-full max-w-6xl space-y-8 p-4 sm:p-6 lg:p-8', this.className)\n }\n\n planCardClass(selected: boolean): string {\n return cn(\n 'focus-visible:ring-ring relative flex cursor-pointer flex-col gap-3 rounded-xl border p-4.5 transition-colors duration-150 focus-visible:ring-2 focus-visible:outline-none',\n selected\n ? 'border-primary bg-primary/[0.03] dark:bg-primary/10 ring-primary/30 shadow-xs ring-1'\n : 'border-border hover:border-border/80 hover:bg-muted/30',\n )\n }\n\n matchBadgeClass(): string {\n return cn(\n this.maxMatchUnlocked()\n ? 'border-success/30 bg-success/10 text-success'\n : 'border-warning/30 bg-warning/10 text-warning',\n )\n }\n\n readonly k401Tooltip = (val: number): string =>\n `${val}% (${((this.annualSalary * val) / 100).toLocaleString('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 })}/yr)`\n\n onK401Change(value: number[]): void {\n if (value.length > 0) this.k401Rate.set(value[0]!)\n }\n\n handleSignAndSubmit(): void {\n if (!this.signatureAcknowledged()) return\n this.isSubmitted.set(true)\n this.showSignModal.set(false)\n }\n\n handleResetEnrollment(): void {\n this.isSubmitted.set(false)\n this.signatureAcknowledged.set(false)\n }\n}\n", "type": "registry:page", "target": "~/src/app/components/blocks/benefits-enrollment-portal/benefits-enrollment-portal.component.ts" }, { "path": "packages/registry-angular/blocks/benefits-enrollment-portal/index.ts", "content": "export {\n UiBenefitsEnrollmentPortalComponent,\n type MedicalPlan,\n type DentalPlan,\n type VisionPlan,\n} from './benefits-enrollment-portal.component'\n", "type": "registry:page", "target": "~/src/app/components/blocks/benefits-enrollment-portal/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/radio-group.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/slider.json" ], "description": "Employee benefits open enrollment portal with interactive medical, dental, and vision plan comparisons, customizable 401(k) contribution slider with real-time employer match calculation, and a sticky paycheck impact summary.", "categories": [ "hr", "app", "form" ] }