{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "lead-capture-popup", "title": "Lead Capture Popup", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/lead-capture-popup/lead-capture-popup.component.ts", "content": "// High-conversion exit-intent discount popup and newsletter lead generator with a live\n// ticking countdown timer, value props, star-rating social proof, and coupon code reveal.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, OnDestroy, OnInit, Output, signal } from '@angular/core'\nimport {\n ArrowRight,\n Check,\n CheckCircle2,\n Clock,\n Copy,\n Gift,\n LucideAngularModule,\n RotateCcw,\n Star,\n X,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-lead-capture-popup, [ui-lead-capture-popup]',\n standalone: true,\n // The block renders its own root
(form vs dismissed fallback): keep the host out of layout.\n host: { '[attr.class]': '\"contents\"' },\n imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiInputComponent],\n template: `\n @if (!isDismissed()) {\n
\n \n \n \n \n \n\n \n @if (!isSubmitted()) {\n
\n \n
\n \n \n Limited Time Welcome Gift\n \n
\n\n \n \n
\n \n Claim your {{ discountPercent }}% discount code before the timer expires:\n
\n \n {{ formattedTime() }}\n \n
\n\n \n
\n

\n {{ headline }}\n

\n

\n {{ subtitle }}\n

\n
\n\n \n
    \n
  • \n \n \n \n No spam ever — high-signal engineering teardowns\n
    • \n
  • \n \n \n \n 1-click unsubscribe anytime with zero friction\n
    • \n
  • \n \n \n \n Instant coupon delivery straight to your screen & inbox\n
    • \n
\n\n \n
\n \n\n \n Claim My {{ discountPercent }}% Discount\n \n \n \n\n \n
\n
\n \n \n \n \n \n
\n {{ socialProofRating }}\n rating by {{ socialProofCount }}\n
\n\n \n
\n \n No thanks, I prefer paying full price\n \n
\n
\n } @else {\n \n
\n
\n \n
\n\n
\n \n {{ discountPercent }}% Discount Unlocked\n \n

You’re all set!

\n

\n We’ve dispatched your code and welcome gift to\n {{ email() || 'engineer@company.com' }}.\n

\n
\n\n \n
\n \n Your Exclusive Coupon Code\n \n
\n \n {{ discountCode }}\n \n \n @if (copied()) {\n \n } @else {\n \n }\n {{ copied() ? 'Copied!' : 'Copy Code' }}\n \n
\n

\n Valid for the next {{ formattedTime() }} at checkout.\n

\n
\n\n
\n \n Start Exploring Components\n \n \n \n Enter a different email\n \n
\n
\n }\n
\n \n } @else {\n \n
\n

Popup was dismissed.

\n \n
\n }\n `,\n})\nexport class UiLeadCapturePopupComponent implements OnInit, OnDestroy {\n protected readonly ArrowRight = ArrowRight\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Clock = Clock\n protected readonly Copy = Copy\n protected readonly Gift = Gift\n protected readonly RotateCcw = RotateCcw\n protected readonly Star = Star\n protected readonly X = X\n\n @Input() headline = 'Unlock 20% Off Your First Order'\n @Input() subtitle =\n 'Join 45,000+ engineers receiving our weekly curated component teardowns and architectural breakdowns.'\n @Input() discountCode = 'WELCOME20'\n @Input() discountPercent = 20\n @Input() initialSeconds = 599\n @Input() socialProofRating = '4.9/5'\n @Input() socialProofCount = '1,200+ developers'\n @Input() initialSubmitted = false\n @Input('class') className?: string\n\n @Output() readonly submit = new EventEmitter<{ email: string; discountCode: string }>()\n @Output() readonly dismiss = new EventEmitter()\n @Output() readonly copy = new EventEmitter()\n @Output('reset') readonly resetEmitter = new EventEmitter()\n\n readonly email = signal('')\n readonly isSubmitted = signal(false)\n readonly isDismissed = signal(false)\n readonly copied = signal(false)\n readonly timeLeft = signal(599)\n\n private timer: ReturnType | null = null\n private copyTimer: ReturnType | null = null\n\n ngOnInit(): void {\n this.isSubmitted.set(this.initialSubmitted)\n this.timeLeft.set(this.initialSeconds)\n this.timer = setInterval(() => {\n if (this.timeLeft() > 0) this.timeLeft.update((v) => v - 1)\n else if (this.timer) clearInterval(this.timer)\n }, 1000)\n }\n\n ngOnDestroy(): void {\n if (this.timer) clearInterval(this.timer)\n if (this.copyTimer) clearTimeout(this.copyTimer)\n }\n\n get rootClass(): string {\n return cn('w-full', this.className)\n }\n\n formattedTime(): string {\n const mins = Math.floor(this.timeLeft() / 60)\n const secs = this.timeLeft() % 60\n return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`\n }\n\n handleSubmit(event?: Event): void {\n event?.preventDefault()\n const value = this.email()\n if (!value || !value.includes('@')) return\n this.isSubmitted.set(true)\n this.submit.emit({ email: value, discountCode: this.discountCode })\n }\n\n handleDismiss(): void {\n this.isDismissed.set(true)\n this.dismiss.emit()\n }\n\n handleReset(): void {\n this.isSubmitted.set(false)\n this.isDismissed.set(false)\n this.email.set('')\n this.copied.set(false)\n this.timeLeft.set(this.initialSeconds)\n this.resetEmitter.emit()\n }\n\n open(): void {\n this.isDismissed.set(false)\n }\n\n reset(): void {\n this.handleReset()\n }\n\n copyCoupon(): void {\n try {\n void navigator.clipboard?.writeText(this.discountCode)\n } catch {\n // Clipboard fallback\n }\n this.copied.set(true)\n this.copy.emit(this.discountCode)\n if (this.copyTimer) clearTimeout(this.copyTimer)\n this.copyTimer = setTimeout(() => this.copied.set(false), 2000)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/lead-capture-popup/lead-capture-popup.component.ts" }, { "path": "packages/registry-angular/blocks/lead-capture-popup/index.ts", "content": "export { UiLeadCapturePopupComponent } from './lead-capture-popup.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/lead-capture-popup/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/input.json" ], "description": "High-conversion exit-intent discount popup and newsletter lead generator with live ticking countdown timer, emerald value props, star rating social proof, and coupon code reveal.", "categories": [ "marketing" ] }