{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "newsletter-signup", "title": "Newsletter Signup", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/newsletter-signup/newsletter-signup.component.ts", "content": "// Engineering dispatch signup: channel track selector, live dispatch form with\n// success state, archive sampler, and RSS note. Port of the Vue/React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport { ArrowRight, BellRing, BookOpen, Check, LucideAngularModule, Mail, Send } 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 UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport type NewsletterSignupVariant = 'centered' | 'split'\n\ninterface ChannelOption {\n id: string\n title: string\n frequency: string\n description: string\n badge: string\n}\n\nexport const newsletterChannels: ChannelOption[] = [\n {\n id: 'architecture',\n title: 'Architecture & Token Deep Dives',\n frequency: 'Bi-Weekly',\n description: 'Technical breakdowns on OKLCH color science, headless AST transformers, and zero-lockin paradigms.',\n badge: 'Flagship',\n },\n {\n id: 'releases',\n title: 'Registry Ship Notes & RFCs',\n frequency: 'Monthly',\n description: 'Direct changelogs, new workbench releases, breaking primitive refactors, and roadmap discussions.',\n badge: 'Changelog',\n },\n {\n id: 'security',\n title: 'Security & Dependency Bulletins',\n frequency: 'As-Needed',\n description: 'Zero-day vulnerability alerts, upstream headless primitive fixes, and patch notifications.',\n badge: 'Critical',\n },\n]\n\nexport const recentIssues = [\n {\n id: 48,\n date: 'Aug 2026',\n title: 'The Death of Monolithic npm UI Packages',\n reads: '4 min read',\n tags: ['Architecture', 'Registry', 'AST'],\n snippet:\n 'Why the next decade of frontend engineering belongs to unbundled registries where the consumer owns the source code.',\n },\n {\n id: 47,\n date: 'Jul 2026',\n title: 'OKLCH Theming in Tailwind CSS v4',\n reads: '6 min read',\n tags: ['Tailwind v4', 'Color Science', 'Tokens'],\n snippet:\n 'Mastering perceptual lightness, chroma gamut mapping, and dynamic theme switching without runtime CSS bloat.',\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-newsletter-signup, [ui-newsletter-signup]',\n standalone: true,\n // The block renders its own root
: keep the host out of layout.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiInputComponent,\n UiSeparatorComponent,\n ],\n template: `\n
\n
\n \n
\n \n \n Engineering Dispatch & Architecture Radar\n \n

\n Ship notes, not marketing fluff.\n

\n

\n Join 18,400+ frontend architects, design engineers, and systems builders. Plain-text insights into component\n architecture, token systems, and dual-framework engineering.\n

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

\n \n Select Dispatch Track\n

\n Zero Spam Guarantee\n
\n

\n Choose the telemetry streams you want delivered to your inbox.\n

\n
\n\n
\n \n
\n @for (ch of channels; track ch.id) {\n \n
\n
\n \n @if (selectedChannel() === ch.id) {\n
\n }\n
\n {{ ch.title }}\n
\n {{ ch.frequency }}\n
\n

{{ ch.description }}

\n
\n }\n
\n\n \n\n \n @if (!submitted()) {\n
\n
\n \n \n Subscribe to Stream\n \n \n
\n
\n Plain text • 1-click unsubscribe\n 18,412 Active Subscribers\n
\n
\n } @else {\n
\n \n \n
\n

Dispatches Activated!

\n

\n Verification sent to {{ email() }}. Check your inbox to confirm delivery.\n

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

\n Archive Sampler\n

\n Issue #{{ issues[activePreviewIssue()].id }}\n
\n\n \n
\n @for (issue of issues; track issue.id; let idx = $index) {\n \n
\n {{ issue.date }} • Issue #{{ issue.id }}\n {{ issue.reads }}\n
\n

{{ issue.title }}

\n

{{ issue.snippet }}

\n\n
\n @for (tag of issue.tags; track tag) {\n #{{ tag }}\n }\n
\n
\n }\n
\n\n \n \n Prefer RSS feeds?\n \n uipkge.dev/rss.xml \n \n \n \n \n \n
\n `,\n})\nexport class UiNewsletterSignupComponent {\n protected readonly ArrowRight = ArrowRight\n protected readonly BellRing = BellRing\n protected readonly BookOpen = BookOpen\n protected readonly Check = Check\n protected readonly Mail = Mail\n protected readonly Send = Send\n\n protected readonly channels = newsletterChannels\n protected readonly issues = recentIssues\n\n @Input() variant: NewsletterSignupVariant = 'split'\n @Input('class') className?: string\n\n readonly email = signal('')\n readonly selectedChannel = signal('architecture')\n readonly submitted = signal(false)\n readonly activePreviewIssue = signal(0)\n readonly isSubmitting = signal(false)\n\n get rootClass(): string {\n return cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 lg:px-8', this.className)\n }\n\n channelCardClass(id: string): string {\n return cn(\n this.selectedChannel() === id\n ? 'border-primary bg-primary/5 ring-primary/20 shadow-xs ring-1'\n : 'border-border bg-background hover:bg-muted/40',\n )\n }\n\n channelDotClass(id: string): string {\n return cn(this.selectedChannel() === id ? 'border-primary bg-primary' : 'border-muted-foreground/40')\n }\n\n previewCardClass(idx: number): string {\n return cn(\n this.activePreviewIssue() === idx ? 'border-primary/50 shadow-xs' : 'border-border hover:border-border/80',\n )\n }\n\n handleSubmit(event?: Event): void {\n event?.preventDefault()\n if (!this.email() || !this.email().includes('@')) return\n this.isSubmitting.set(true)\n setTimeout(() => {\n this.isSubmitting.set(false)\n this.submitted.set(true)\n }, 400)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/newsletter-signup/newsletter-signup.component.ts" }, { "path": "packages/registry-angular/blocks/newsletter-signup/index.ts", "content": "export {\n UiNewsletterSignupComponent,\n type NewsletterSignupVariant,\n newsletterChannels,\n recentIssues,\n} from './newsletter-signup.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/newsletter-signup/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": "Engineering dispatch and release radar workbench with channel tracks (Architecture, Releases, Security), live archive previews, and subscriber metrics.", "categories": [ "marketing" ], "deprecated": true, "replacedBy": "newsletter" }