{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "bank-account-connector", "title": "Bank Account Connector", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/bank-account-connector/bank-account-connector.component.ts", "content": "// Plaid/Tink style bank linking flow: institution search, a popular-banks grid\n// (Chase, Bank of America, Wells Fargo, Citibank, Capital One, SVB), account radio\n// selection with balances and badges, and an AES-256 security footer. Port of the\n// Vue/React block 1:1 — emits `connect` with the linked account payload,\n// `cancel` when the flow is abandoned, and `selectBank` on institution pick.\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, computed, signal } from '@angular/core'\nimport {\n ArrowLeft,\n Building2,\n CheckCircle2,\n ExternalLink,\n Loader2,\n Lock,\n LucideAngularModule,\n Search,\n Shield,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport interface BankInstitution {\n id: string\n name: string\n fullName: string\n tagline: string\n}\n\nexport interface BankAccount {\n id: string\n name: string\n last4: string\n type: 'Checking' | 'Savings' | 'Credit'\n balance: string\n balanceLabel: string\n subtitle: string\n}\n\nexport interface BankConnectPayload {\n bankId: string\n bankName: string\n accountId: string\n accountName: string\n last4: string\n balance: string\n}\n\nconst institutions: BankInstitution[] = [\n { id: 'chase', name: 'Chase', fullName: 'JPMorgan Chase Bank', tagline: 'Checking, Savings & Credit' },\n { id: 'bofa', name: 'Bank of America', fullName: 'Bank of America N.A.', tagline: 'Advantage Banking' },\n { id: 'wellsfargo', name: 'Wells Fargo', fullName: 'Wells Fargo Bank', tagline: 'Everyday & Way2Save' },\n { id: 'citibank', name: 'Citibank', fullName: 'Citibank N.A.', tagline: 'Citi Priority & Access' },\n { id: 'capitalone', name: 'Capital One', fullName: 'Capital One Bank', tagline: '360 Checking & Savings' },\n { id: 'svb', name: 'SVB', fullName: 'Silicon Valley Bank', tagline: 'Commercial & Startup Banking' },\n]\n\nconst accounts: BankAccount[] = [\n {\n id: 'acc-chk-4892',\n name: 'Checking',\n last4: '4892',\n type: 'Checking',\n balance: '$14,250.00',\n balanceLabel: 'Available balance',\n subtitle: 'Primary checking account',\n },\n {\n id: 'acc-sav-9210',\n name: 'Savings',\n last4: '9210',\n type: 'Savings',\n balance: '$48,900.00',\n balanceLabel: 'Available balance',\n subtitle: 'High yield savings',\n },\n {\n id: 'acc-crd-1049',\n name: 'Business Credit',\n last4: '1049',\n type: 'Credit',\n balance: '$5,200.00',\n balanceLabel: 'Current balance',\n subtitle: 'Corporate credit line',\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-bank-icon',\n standalone: true,\n host: { '[attr.class]': '\"contents\"' },\n template: `\n @if (bankId === 'chase') {\n \n \n \n } @else if (bankId === 'bofa') {\n \n \n \n \n \n \n \n \n } @else if (bankId === 'wellsfargo') {\n \n \n \n \n } @else if (bankId === 'citibank') {\n \n \n \n \n \n \n } @else if (bankId === 'capitalone') {\n \n \n \n \n \n } @else if (bankId === 'svb') {\n \n \n \n \n \n } @else {\n \n }\n `,\n imports: [LucideAngularModule],\n})\nclass UiBankIconComponent {\n @Input() bankId = ''\n protected readonly Building2 = Building2\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-bank-account-connector, [ui-bank-account-connector]',\n standalone: true,\n // The block renders its own root card: keep the host out of layout.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiBankIconComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiInputComponent,\n UiSeparatorComponent,\n ],\n template: `\n
\n
\n \n @if (!selectedBankId()) {\n
\n \n
\n \n \n
\n
\n

\n Connect your bank account\n

\n

\n Secure 256-bit encrypted connection powered by open banking.\n

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

Popular institutions

\n 10,000+ supported\n
\n\n @if (filteredInstitutions().length > 0) {\n
\n @for (bank of filteredInstitutions(); track bank.id) {\n \n \n \n
\n\n {{ bank.name }}\n {{ bank.tagline }}\n \n }\n
\n } @else {\n \n
\n

\n No popular bank matched “{{ searchQuery() }}”. Connect via direct institution link:\n

\n \n
\n }\n
\n
\n } @else {\n \n
\n \n
\n
\n \n \n Back to banks\n \n Step 2 of 2\n
\n\n \n
\n
\n \n \n
\n\n
\n

\n {{ activeBank().name }} Checking & Savings\n

\n
\n \n Connected\n
\n
\n
\n\n \n Change\n \n
\n
\n\n \n
\n
\n

Select an account

\n

\n Choose the primary account to link for transactions and balance tracking.\n

\n
\n\n
\n @for (account of bankAccounts; track account.id) {\n \n
\n \n
\n @if (selectedAccountId() === account.id) {\n
\n }\n
\n\n \n
\n
\n {{ account.name }}\n •••• {{ account.last4 }}\n \n {{ account.type }}\n \n
\n

{{ account.subtitle }}

\n
\n
\n\n \n
\n
\n {{ account.balance }}\n
\n
{{ account.balanceLabel }}
\n
\n
\n }\n
\n \n \n }\n\n \n
\n \n\n
\n \n \n Encrypted with AES-256\n \n\n \n Privacy policy\n \n \n
\n\n
\n \n Cancel\n \n \n @if (isConnecting()) {\n \n Connecting…\n } @else if (isConnected()) {\n \n Account Connected!\n } @else if (!selectedBankId()) {\n Continue\n } @else {\n Connect Selected Account\n }\n \n
\n
\n \n \n `,\n})\nexport class UiBankAccountConnectorComponent {\n protected readonly ArrowLeft = ArrowLeft\n protected readonly Building2 = Building2\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly ExternalLink = ExternalLink\n protected readonly Loader2 = Loader2\n protected readonly Lock = Lock\n protected readonly Search = Search\n protected readonly Shield = Shield\n protected readonly bankAccounts = accounts\n\n @Input() set initialBankId(v: string | undefined) {\n this.initialBankIdValue = v ?? null\n if (v) this.selectedBankId.set(v)\n }\n @Input('class') className?: string\n\n @Output() readonly connect = new EventEmitter()\n @Output() readonly cancel = new EventEmitter()\n @Output() readonly selectBank = new EventEmitter()\n\n private initialBankIdValue: string | null = null\n\n readonly searchQuery = signal('')\n readonly selectedBankId = signal(null)\n readonly selectedAccountId = signal('acc-chk-4892')\n readonly isConnecting = signal(false)\n readonly isConnected = signal(false)\n\n readonly filteredInstitutions = computed(() => {\n const query = this.searchQuery().trim().toLowerCase()\n if (!query) return institutions\n return institutions.filter((b) => b.name.toLowerCase().includes(query) || b.fullName.toLowerCase().includes(query))\n })\n\n readonly activeBank = computed(() => {\n const id = this.selectedBankId()\n if (!id) return institutions[0]!\n return (\n institutions.find((b) => b.id === id) ?? {\n id,\n name: this.searchQuery() ? this.searchQuery() : 'Custom Institution',\n fullName: 'Financial Institution',\n tagline: 'Direct Open Banking',\n }\n )\n })\n\n readonly selectedAccount = computed(() => {\n return accounts.find((a) => a.id === this.selectedAccountId()) ?? accounts[0]!\n })\n\n get rootClass(): string {\n return cn('mx-auto w-full max-w-lg overflow-hidden border shadow-sm', this.className)\n }\n\n accountCardClass(accountId: string): string {\n const isSelected = this.selectedAccountId() === accountId\n return cn(\n 'group focus-visible:ring-ring relative flex cursor-pointer items-center justify-between rounded-xl border p-3.5 transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',\n isSelected\n ? 'border-primary bg-primary/5 ring-primary/20 shadow-xs ring-1'\n : 'border-border bg-card hover:border-border/80 hover:bg-muted/30',\n )\n }\n\n radioClass(accountId: string): string {\n const isSelected = this.selectedAccountId() === accountId\n return cn(\n 'flex size-4 shrink-0 items-center justify-center rounded-full border transition-colors',\n isSelected\n ? 'border-primary bg-primary text-primary-foreground'\n : 'border-muted-foreground/30 bg-background group-hover:border-muted-foreground/60',\n )\n }\n\n handleSelectBank(bankId: string): void {\n this.selectedBankId.set(bankId)\n this.selectBank.emit(bankId)\n }\n\n connectDirect(): void {\n this.handleSelectBank(this.searchQuery().toLowerCase().replace(/\\s+/g, '-'))\n }\n\n handleConnect(): void {\n if (!this.selectedBankId()) {\n this.selectedBankId.set(institutions[0]!.id)\n return\n }\n\n this.isConnecting.set(true)\n setTimeout(() => {\n this.isConnecting.set(false)\n this.isConnected.set(true)\n const bank = this.activeBank()\n const account = this.selectedAccount()\n this.connect.emit({\n bankId: bank.id,\n bankName: bank.name,\n accountId: account.id,\n accountName: account.name,\n last4: account.last4,\n balance: account.balance,\n })\n setTimeout(() => {\n this.isConnected.set(false)\n }, 2500)\n }, 900)\n }\n\n handleCancel(): void {\n if (this.selectedBankId() && !this.initialBankIdValue) {\n this.selectedBankId.set(null)\n }\n this.cancel.emit()\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/bank-account-connector/bank-account-connector.component.ts" }, { "path": "packages/registry-angular/blocks/bank-account-connector/index.ts", "content": "export {\n UiBankAccountConnectorComponent,\n type BankInstitution,\n type BankAccount,\n type BankConnectPayload,\n} from './bank-account-connector.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/bank-account-connector/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/input.json", "https://uipkge.dev/r/angular/separator.json" ], "description": "Plaid/Tink style bank linking modal and account selector with institution search, popular bank grid (Chase, Bank of America, Wells Fargo, Citibank, Capital One, SVB), account radio selection with balances and badges, and an AES-256 encrypted security footer.", "categories": [ "finance", "dashboard" ] }