{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "newsletter-split-preview",
  "title": "Newsletter — Split with Preview",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/newsletter-split-preview/newsletter-split-preview.component.ts",
      "content": "// Signup section pairing the pitch and form with a preview of the last issue —\n// subject line, date, and opening paragraph. Port of the Vue/React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport { Check, LucideAngularModule, Mail } 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 const lastIssue = {\n  subject: 'Why we version metric definitions instead of dashboards',\n  date: 'Feb 18, 2026',\n  readTime: '9 min',\n  opening:\n    'Dashboards are the output. The definition is the thing teams argue about, so that is what belongs under review — with a diff, an owner, and a revert path. This issue walks through what changed when we moved ours into the repo.',\n}\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-newsletter-split-preview, [ui-newsletter-split-preview]',\n  standalone: true,\n  // The block renders its own root <section>: keep the host out of layout.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [\n    LucideAngularModule,\n    UiBadgeComponent,\n    UiButtonComponent,\n    UiCardComponent,\n    UiCardContentComponent,\n    UiInputComponent,\n    UiSeparatorComponent,\n  ],\n  template: `\n    <section data-slot=\"newsletter-split-preview\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n        <div class=\"grid items-center gap-10 lg:grid-cols-2 lg:gap-16\">\n          <div>\n            <span ui-badge variant=\"secondary\" class=\"gap-1.5\">\n              <lucide-icon [img]=\"Mail\" class=\"size-3\" aria-hidden=\"true\" />\n              Monthly\n            </span>\n            <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n              Notes from the people who build it\n            </h2>\n            <p class=\"text-muted-foreground mt-3 text-lg\">\n              One email a month on metric modelling, access control, and warehouse cost. No product announcements.\n            </p>\n\n            <form class=\"mt-6 max-w-md\" (submit)=\"subscribe($event)\">\n              <div class=\"flex gap-2\">\n                <ui-input\n                  [value]=\"email()\"\n                  (valueChange)=\"email.set($event)\"\n                  type=\"email\"\n                  required\n                  placeholder=\"you@company.com\"\n                  autoComplete=\"email\"\n                  aria-label=\"Email address\"\n                />\n                <button ui-button type=\"submit\" class=\"shrink-0\">Subscribe</button>\n              </div>\n              <p class=\"mt-2 min-h-5 text-xs\" aria-live=\"polite\">\n                @if (submitted()) {\n                  <span class=\"text-success inline-flex items-center gap-1.5\">\n                    <lucide-icon [img]=\"Check\" class=\"size-3\" aria-hidden=\"true\" />\n                    Check your inbox to confirm.\n                  </span>\n                } @else {\n                  <span class=\"text-muted-foreground\">8,400 subscribers · unsubscribe in one click.</span>\n                }\n              </p>\n            </form>\n          </div>\n\n          <!-- Showing the last issue is the point: nobody should have to subscribe\n               to find out what they are subscribing to. -->\n          <div ui-card>\n            <div ui-card-content class=\"p-6\">\n              <div class=\"flex flex-wrap items-center gap-3\">\n                <span ui-badge variant=\"outline\">Last issue</span>\n                <span class=\"text-muted-foreground text-xs\">{{ issue.date }} · {{ issue.readTime }}</span>\n              </div>\n\n              <h3 class=\"mt-4 text-lg leading-snug font-semibold tracking-tight text-balance\">\n                {{ issue.subject }}\n              </h3>\n\n              <ui-separator class=\"my-4\" />\n\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">{{ issue.opening }}</p>\n\n              <button ui-button variant=\"link\" class=\"mt-4 h-auto p-0 text-sm\">Read the full issue</button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  `,\n})\nexport class UiNewsletterSplitPreviewComponent {\n  protected readonly Check = Check\n  protected readonly Mail = Mail\n\n  protected readonly issue = lastIssue\n\n  @Input('class') className?: string\n\n  readonly email = signal('')\n  readonly submitted = signal(false)\n\n  get rootClass(): string {\n    return cn('bg-background', this.className)\n  }\n\n  subscribe(event?: Event): void {\n    event?.preventDefault()\n    if (!this.email().trim()) return\n    this.submitted.set(true)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/newsletter-split-preview/newsletter-split-preview.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/newsletter-split-preview/index.ts",
      "content": "export { UiNewsletterSplitPreviewComponent, lastIssue } from './newsletter-split-preview.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/newsletter-split-preview/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": "Signup section pairing the pitch and form with a preview of the last issue — subject line, date, and opening paragraph — so the reader sees what they are subscribing to.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "newsletter"
}