{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "payment-card", "title": "Payment Card", "type": "registry:ui", "files": [ { "path": "packages/registry-angular/components/payment-card/payment-card.component.ts", "content": "import { Component, ElementRef, Input, booleanAttribute, inject, ChangeDetectionStrategy } from '@angular/core'\nimport { cn } from '@/lib/utils'\n\nexport type CardBrand = 'visa' | 'mastercard' | 'amex' | 'discover' | 'unknown'\nexport type PaymentCardSize = 'sm' | 'md' | 'lg'\nexport type PaymentCardVariant = 'default' | 'compact'\n\nconst SIZE_CLASSES: Record = {\n sm: 'text-xs w-[280px]',\n md: 'max-w-sm text-sm w-[360px]',\n lg: 'max-w-md text-base w-[420px]',\n}\n\ninterface BrandVisual {\n cardClass: string\n accentGlow: string\n foilSheen: string\n guillocheColor: string\n textColor: string\n subtextColor: string\n embossStyle: string\n chipType: 'gold' | 'silver'\n}\n\nconst BRAND_VISUALS: Record = {\n visa: {\n cardClass:\n 'bg-[radial-gradient(ellipse_at_top_right,#1e3a8a_0%,#0f2252_45%,#08122c_85%,#040a18_100%)] text-white shadow-[0_22px_45px_-12px_rgba(15,34,82,0.65),0_8px_16px_-8px_rgba(0,0,0,0.5)]',\n accentGlow: 'from-blue-400/20 via-indigo-500/10 to-transparent',\n foilSheen: 'from-white/20 via-blue-200/5 to-transparent',\n guillocheColor: 'rgba(96, 165, 250, 0.12)',\n textColor: 'text-white',\n subtextColor: 'text-blue-200/60',\n embossStyle: 'text-white drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)]',\n chipType: 'gold',\n },\n mastercard: {\n cardClass:\n 'bg-[radial-gradient(ellipse_at_top_right,#2a0808_0%,#180608_35%,#0f0506_70%,#09090b_100%)] text-white shadow-[0_22px_45px_-12px_rgba(220,38,38,0.35),0_8px_16px_-8px_rgba(0,0,0,0.6)]',\n accentGlow: 'from-red-500/25 via-amber-500/15 to-transparent',\n foilSheen: 'from-white/20 via-orange-300/10 to-transparent',\n guillocheColor: 'rgba(239, 68, 68, 0.1)',\n textColor: 'text-white',\n subtextColor: 'text-zinc-400',\n embossStyle: 'text-zinc-100 drop-shadow-[0_1px_2px_rgba(0,0,0,0.9)]',\n chipType: 'gold',\n },\n amex: {\n cardClass:\n 'bg-[radial-gradient(ellipse_at_top_right,#1e293b_0%,#0f172a_40%,#090d16_80%,#020617_100%)] text-slate-100 shadow-[0_22px_45px_-12px_rgba(15,23,42,0.7),0_8px_16px_-8px_rgba(0,0,0,0.6)]',\n accentGlow: 'from-slate-300/20 via-teal-500/10 to-transparent',\n foilSheen: 'from-white/25 via-cyan-100/10 to-transparent',\n guillocheColor: 'rgba(148, 163, 184, 0.12)',\n textColor: 'text-slate-100',\n subtextColor: 'text-slate-400',\n embossStyle: 'text-slate-100 drop-shadow-[0_1px_2px_rgba(0,0,0,0.9)]',\n chipType: 'silver',\n },\n discover: {\n cardClass:\n 'bg-[radial-gradient(ellipse_at_top_right,#431407_0%,#270d04_45%,#1c0903_80%,#0c0401_100%)] text-white shadow-[0_22px_45px_-12px_rgba(194,65,12,0.45),0_8px_16px_-8px_rgba(0,0,0,0.6)]',\n accentGlow: 'from-orange-400/25 via-amber-600/15 to-transparent',\n foilSheen: 'from-white/20 via-amber-200/10 to-transparent',\n guillocheColor: 'rgba(251, 146, 60, 0.12)',\n textColor: 'text-white',\n subtextColor: 'text-amber-200/60',\n embossStyle: 'text-white drop-shadow-[0_1px_2px_rgba(0,0,0,0.9)]',\n chipType: 'gold',\n },\n unknown: {\n cardClass:\n 'bg-[radial-gradient(ellipse_at_top_right,#27272a_0%,#18181b_40%,#09090b_85%,#000000_100%)] text-white shadow-[0_22px_45px_-12px_rgba(0,0,0,0.7),0_8px_16px_-8px_rgba(0,0,0,0.5)]',\n accentGlow: 'from-zinc-400/15 via-zinc-600/10 to-transparent',\n foilSheen: 'from-white/18 via-zinc-300/5 to-transparent',\n guillocheColor: 'rgba(255, 255, 255, 0.06)',\n textColor: 'text-white',\n subtextColor: 'text-zinc-400',\n embossStyle: 'text-zinc-100 drop-shadow-[0_1px_2px_rgba(0,0,0,0.9)]',\n chipType: 'silver',\n },\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-payment-card, [ui-payment-card]',\n standalone: true,\n host: {\n '[attr.data-slot]': '\"payment-card\"',\n '[attr.data-uipkge]': '\"\"',\n '[attr.data-brand]': 'detectedBrand',\n '[attr.data-flipped]': 'isFlipped || undefined',\n role: 'img',\n '[attr.aria-label]': 'ariaLabel',\n '[class]': 'hostClass',\n '(mousemove)': 'onMove($event)',\n '(mouseleave)': 'onLeave()',\n },\n template: `\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 @if (shimmer) {\n \n }\n\n \n
\n \n
\n
\n @if (variant !== 'compact') {\n \n {{ tierLabel }}\n \n } @else {\n CARD\n }\n
\n\n \n
\n @if (detectedBrand === 'visa') {\n
\n \n \n \n \n
\n } @else if (detectedBrand === 'mastercard') {\n
\n \n \n \n \n \n @if (variant !== 'compact') {\n \n mastercard\n \n }\n
\n } @else if (detectedBrand === 'amex') {\n
\n
AMEX
\n
\n } @else if (detectedBrand === 'discover') {\n
\n DISC\n \n VER\n
\n } @else {\n
\n
\n
\n PREMIUM \n
\n }\n
\n
\n\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n\n \n @if (variant !== 'compact') {\n \n \n \n \n \n }\n
\n\n \n @if (variant !== 'compact') {\n
\n }\n \n\n \n
\n {{ displayNumber }}\n @for (ch of displayChars; track $index) {\n \n {{ ch === ' ' ? '\\u00a0' : ch }}\n }\n
\n\n \n
\n
\n @if (variant !== 'compact') {\n
\n CARDHOLDER NAME\n
\n }\n
\n {{ displayName }}\n
\n
\n\n
\n @if (variant !== 'compact') {\n \n GOOD
THRU\n MONTH/YEAR\n
\n }\n
\n {{ displayExpiry }}\n
\n
\n \n \n \n\n \n @if (flip) {\n
\n
\n\n \n
\n\n
\n \n
\n \n @if (variant !== 'compact') {\n
\n AUTHORIZED SIGNATURE\n
\n }\n
\n\n
\n @if (variant !== 'compact') {\n CVV\n }\n {{\n displayCvc\n }}\n
\n
\n\n \n @if (variant !== 'compact') {\n
\n

\n This card is property of the issuing bank and must be returned upon request. Use is subject to the\n cardholder agreement.\n

\n \n 24/7 Support: 1-800-555-0199\n CIRRUS · PLUS · STAR\n
\n \n }\n \n \n }\n \n \n `,\n styles: `\n @keyframes payment-card-shimmer {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(200%);\n }\n }\n `,\n})\nexport class UiPaymentCardComponent {\n @Input() number = ''\n @Input() name = ''\n @Input() expiry = ''\n @Input() cvc = ''\n @Input() brand: CardBrand | 'auto' = 'auto'\n @Input({ transform: booleanAttribute }) flipped = false\n @Input() variant: PaymentCardVariant = 'default'\n @Input({ transform: booleanAttribute }) tilt = false\n @Input({ transform: booleanAttribute }) shimmer = false\n @Input({ transform: booleanAttribute }) flip = true\n @Input() size: PaymentCardSize = 'md'\n @Input('class') className?: string\n\n tiltX = 0\n tiltY = 0\n isHovering = false\n private readonly el: ElementRef | null = null\n\n constructor() {\n try {\n this.el = inject>(ElementRef, { optional: true })\n } catch {}\n }\n\n onMove(e: MouseEvent): void {\n if (!this.tilt || !this.el) return\n const rect = this.el.nativeElement.getBoundingClientRect()\n const x = e.clientX - rect.left\n const y = e.clientY - rect.top\n const px = (x / rect.width - 0.5) * 2\n const py = (y / rect.height - 0.5) * 2\n this.tiltX = -py * 10\n this.tiltY = px * 12\n this.isHovering = true\n }\n\n onLeave(): void {\n if (!this.tilt) return\n this.tiltX = 0\n this.tiltY = 0\n this.isHovering = false\n }\n\n get innerTransform(): string {\n const flipDeg = this.isFlipped ? 180 : 0\n if (this.tilt && this.isHovering) {\n return `perspective(1200px) rotateX(${this.tiltX}deg) rotateY(${this.tiltY + flipDeg}deg) scale3d(1.02, 1.02, 1.02)`\n }\n return `perspective(1200px) rotateY(${flipDeg}deg)`\n }\n\n get detectedBrand(): CardBrand {\n if (this.brand && this.brand !== 'auto') return this.brand\n return UiPaymentCardComponent.detectBrand(this.number)\n }\n\n static detectBrand(raw: string): CardBrand {\n const n = (raw ?? '').replace(/\\D/g, '')\n if (!n) return 'unknown'\n if (/^4/.test(n)) return 'visa'\n if (/^(5[1-5]|2[2-7])/.test(n)) return 'mastercard'\n if (/^3[47]/.test(n)) return 'amex'\n if (/^(6011|65|64[4-9])/.test(n)) return 'discover'\n return 'unknown'\n }\n\n get displayNumber(): string {\n return UiPaymentCardComponent.formatMasked(this.number, this.detectedBrand)\n }\n\n static formatMasked(raw: string, brand: CardBrand): string {\n const digits = (raw ?? '').replace(/\\D/g, '').slice(0, brand === 'amex' ? 15 : 16)\n const groups = brand === 'amex' ? [4, 6, 5] : [4, 4, 4, 4]\n const total = groups.reduce((a, b) => a + b, 0)\n const padded = (digits + '••••••••••••••••').slice(0, total)\n let i = 0\n return groups\n .map((g) => {\n const slice = padded.slice(i, i + g)\n i += g\n return slice\n })\n .join(' ')\n }\n\n get displayChars(): string[] {\n return this.displayNumber.split('')\n }\n\n get displayName(): string {\n return (this.name.trim() || 'CARDHOLDER NAME').toUpperCase()\n }\n\n get displayExpiry(): string {\n const raw = (this.expiry ?? '').replace(/\\D/g, '').slice(0, 4)\n if (!raw) return 'MM/YY'\n if (raw.length <= 2) return `${raw}/YY`\n return `${raw.slice(0, 2)}/${raw.slice(2, 4)}`\n }\n\n get displayCvc(): string {\n const max = this.detectedBrand === 'amex' ? 4 : 3\n const digits = (this.cvc ?? '').replace(/\\D/g, '').slice(0, max)\n return digits || '•••'\n }\n\n get isFlipped(): boolean {\n return this.flipped\n }\n\n get theme(): BrandVisual {\n return BRAND_VISUALS[this.detectedBrand]\n }\n\n get tierLabel(): string {\n if (this.detectedBrand === 'amex') return 'PLATINUM'\n if (this.detectedBrand === 'mastercard') return 'WORLD ELITE'\n return 'SIGNATURE'\n }\n\n get hostClass(): string {\n return cn(\n 'group relative inline-block select-none [perspective:1200px]',\n SIZE_CLASSES[this.size],\n this.variant === 'compact' && 'w-[120px] max-w-56',\n this.className,\n )\n }\n\n get innerClass(): string {\n return cn(\n 'relative aspect-[85.6/53.98] w-full transition-transform [transform-style:preserve-3d]',\n this.flip ? 'duration-[650ms] ease-[cubic-bezier(0.22,1,0.36,1)]' : 'duration-300',\n this.isFlipped && '[transform:rotateY(180deg)]',\n )\n }\n\n get faceClass(): string {\n return cn(\n 'absolute inset-0 flex flex-col justify-between overflow-hidden rounded-xl p-5',\n this.shimmer && 'payment-card-shimmer',\n this.tilt && 'payment-card-tilt',\n )\n }\n\n get frontFaceClass(): string {\n return cn(\n 'pay-card-face absolute inset-0 overflow-hidden rounded-[16px] border border-white/15 [backface-visibility:hidden]',\n this.theme.cardClass,\n )\n }\n\n get backFaceClass(): string {\n return cn(\n 'pay-card-face absolute inset-0 [transform:rotateY(180deg)] overflow-hidden rounded-[16px] border border-white/15 [backface-visibility:hidden]',\n this.theme.cardClass,\n )\n }\n\n get contentClass(): string {\n return cn('absolute inset-0 flex flex-col justify-between', this.variant === 'compact' ? 'p-2' : 'p-5')\n }\n\n get amexClass(): string {\n return cn(\n 'flex items-center justify-center rounded-sm bg-[#006fcf] font-sans font-bold tracking-tighter text-white shadow-xs',\n this.variant === 'compact' ? 'px-1 py-0.5 text-xs' : 'px-2 py-1 text-xs',\n )\n }\n\n get chipClass(): string {\n return cn(\n 'relative overflow-hidden rounded-[5px] border border-amber-950/40 shadow-[0_2px_5px_rgba(0,0,0,0.5),inset_0_1px_0_rgba(255,255,255,0.6)]',\n this.theme.chipType === 'silver'\n ? 'bg-gradient-to-br from-slate-200 via-slate-300 to-slate-400'\n : 'bg-gradient-to-br from-[#ffe082] via-[#ffb300] to-[#ff8f00]',\n this.variant === 'compact' ? 'h-3.5 w-5' : 'h-8 w-11',\n )\n }\n\n get numberContainerClass(): string {\n return cn(\n 'flex flex-nowrap items-center font-mono font-bold tracking-[0.18em] tabular-nums',\n this.theme.embossStyle,\n this.variant === 'compact' ? 'my-0.5 text-xs' : 'my-1 text-base sm:text-lg',\n )\n }\n\n get nameClass(): string {\n return cn(\n 'truncate font-semibold tracking-wider uppercase',\n this.theme.embossStyle,\n this.variant === 'compact' ? 'text-xs' : 'text-xs',\n )\n }\n\n get expiryClass(): string {\n return cn(\n 'font-mono font-semibold tracking-wider whitespace-nowrap',\n this.theme.embossStyle,\n this.variant === 'compact' ? 'text-xs' : 'text-xs',\n )\n }\n\n get magneticStripeClass(): string {\n return cn(\n 'w-full bg-gradient-to-b from-neutral-950 via-black to-neutral-900 shadow-[inset_0_1px_0_rgba(255,255,255,0.1),inset_0_-1px_0_rgba(0,0,0,0.8)]',\n this.variant === 'compact' ? 'mt-2 h-4' : 'mt-4 h-10',\n )\n }\n\n get backContentClass(): string {\n return cn('relative flex flex-col justify-between', this.variant === 'compact' ? 'p-2' : 'p-4')\n }\n\n get signatureRowClass(): string {\n return cn('flex items-stretch gap-2', this.variant === 'compact' ? 'mt-1' : 'mt-2')\n }\n\n get signatureStripClass(): string {\n return cn(\n 'relative flex-1 overflow-hidden rounded-[3px] border border-slate-300/80 bg-white/95 px-2 py-1',\n this.variant === 'compact' ? 'h-4' : 'h-8',\n )\n }\n\n get cvcBoxClass(): string {\n return cn(\n 'flex flex-col items-center justify-center rounded-[3px] border border-slate-300 bg-white font-mono font-bold text-slate-950 shadow-inner',\n this.variant === 'compact' ? 'px-1 text-xs' : 'px-3 text-xs',\n )\n }\n\n get ariaLabel(): string {\n const brand = this.detectedBrand === 'unknown' ? 'Card' : this.detectedBrand\n const last4 = this.displayNumber.replace(/[•\\s]/g, '').slice(-4) || '••••'\n return `${brand} ending ${last4}, ${this.displayName}, expires ${this.displayExpiry}`\n }\n}\n", "type": "registry:ui", "target": "~/src/app/components/ui/payment-card/payment-card.component.ts" }, { "path": "packages/registry-angular/components/payment-card/index.ts", "content": "export {\n UiPaymentCardComponent,\n type CardBrand,\n type PaymentCardSize,\n type PaymentCardVariant,\n} from './payment-card.component'\n", "type": "registry:ui", "target": "~/src/app/components/ui/payment-card/index.ts" } ], "dependencies": [], "devDependencies": [], "registryDependencies": [], "description": "Premium metallic credit-card visual with embossed type, holographic foil, and per-digit typing animation. Auto-detects brand (Visa, Mastercard, Amex, Discover), flips in 3D, and supports opt-in mouse-parallax tilt and shimmer. Pure presentational — pass typed values in via props.", "categories": [ "data-display" ] }