{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "newsletter-inline-band",
  "title": "Newsletter — Inline Band",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/newsletter-inline-band/newsletter-inline-band.component.ts",
      "content": "// Slim full-width signup band with an inline field, submit button, and a status line\n// that reserves its own row so confirming never shifts the layout. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport { Check, LucideAngularModule, Mail } from 'lucide-angular'\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-newsletter-inline-band, [ui-newsletter-inline-band]',\n  standalone: true,\n  // The block renders its own root <section>: keep the host out of layout.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiInputComponent],\n  template: `\n    <section data-slot=\"newsletter-inline-band\" class=\"border-border bg-muted/40 border-y\">\n      <div class=\"mx-auto flex max-w-6xl flex-col gap-6 px-6 py-10 lg:flex-row lg:items-center lg:gap-12\">\n        <div class=\"min-w-0 lg:flex-1\">\n          <div class=\"flex items-center gap-2\">\n            <lucide-icon [img]=\"Mail\" class=\"text-muted-foreground size-4\" aria-hidden=\"true\" />\n            <span ui-badge variant=\"secondary\">Monthly</span>\n          </div>\n          <p class=\"mt-2.5 text-lg leading-snug font-medium text-balance\">\n            Engineering notes on metric modelling, access control, and warehouse cost.\n          </p>\n          <p class=\"text-muted-foreground mt-1.5 text-sm\">\n            Read by 8,400 data and finance engineers. One email a month, no product announcements.\n          </p>\n        </div>\n\n        <form class=\"lg:w-[26rem] lg:shrink-0\" (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          <!-- Status row is reserved from first paint, so confirming does not\n               nudge the band's height and shift the page under the cursor. -->\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\">Unsubscribe in one click. We never share the list.</span>\n            }\n          </p>\n        </form>\n      </div>\n    </section>\n  `,\n})\nexport class UiNewsletterInlineBandComponent {\n  protected readonly Check = Check\n  protected readonly Mail = Mail\n\n  @Input('class') className?: string\n\n  readonly email = signal('')\n  readonly submitted = signal(false)\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-inline-band/newsletter-inline-band.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/newsletter-inline-band/index.ts",
      "content": "export { UiNewsletterInlineBandComponent } from './newsletter-inline-band.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/newsletter-inline-band/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": "Slim full-width signup band with an inline field, submit button, subscriber count as proof, and a status line that reserves its own row so confirming never shifts the layout.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "newsletter"
}