{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "before-after-toggle",
  "title": "Before & After — Toggle",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/before-after-toggle/before-after-toggle.component.ts",
      "content": "// Single panel toggling between the old and new state of the same screen, with a\n// caption naming what changed and a control that keeps its position between switches.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\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 { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport { UiToggleGroupComponent, UiToggleGroupItemComponent } from '@/ui/toggle-group/toggle-group.component'\n\nexport interface BeforeAfterRow {\n  source: string\n  value: string\n  tone: 'on' | 'off'\n}\n\nexport interface BeforeAfterState {\n  id: string\n  label: string\n  caption: string\n  changed: string\n  rows: BeforeAfterRow[]\n}\n\nconst states: BeforeAfterState[] = [\n  {\n    id: 'before',\n    label: 'Before',\n    caption: 'Three dashboards, three revenue numbers',\n    changed: 'Each team maintained its own formula, and none of them agreed at close.',\n    rows: [\n      { source: 'Exec summary', value: '£4,182,400', tone: 'off' },\n      { source: 'Finance close pack', value: '£4,140,900', tone: 'off' },\n      { source: 'Board deck', value: '£4,206,150', tone: 'off' },\n    ],\n  },\n  {\n    id: 'after',\n    label: 'After',\n    caption: 'One certified definition',\n    changed: 'All three resolve the same definition, so the reconciliation step disappeared.',\n    rows: [\n      { source: 'Exec summary', value: '£4,140,900', tone: 'on' },\n      { source: 'Finance close pack', value: '£4,140,900', tone: 'on' },\n      { source: 'Board deck', value: '£4,140,900', tone: 'on' },\n    ],\n  },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-before-after-toggle, [ui-before-after-toggle]',\n  standalone: true,\n  // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [\n    UiBadgeComponent,\n    UiButtonComponent,\n    UiCardComponent,\n    UiCardContentComponent,\n    UiSeparatorComponent,\n    UiToggleGroupComponent,\n    UiToggleGroupItemComponent,\n  ],\n  template: `\n    <section data-slot=\"before-after-toggle\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-3xl px-6 py-20 lg:py-28\">\n        <div class=\"flex flex-wrap items-end justify-between gap-6\">\n          <div>\n            <span ui-badge variant=\"secondary\">Before and after</span>\n            <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">One number, three places</h2>\n          </div>\n\n          <!-- The control keeps its position across switches: moving it would make\n               the comparison harder than just showing both. -->\n          <div\n            ui-toggle-group\n            type=\"single\"\n            variant=\"outline\"\n            size=\"sm\"\n            aria-label=\"Show the state before or after\"\n            [value]=\"active()\"\n            (valueChange)=\"onChange($event)\"\n          >\n            @for (state of toggleStates; track state.id) {\n              <button ui-toggle-group-item [value]=\"state.id\">{{ state.label }}</button>\n            }\n          </div>\n        </div>\n\n        <div ui-card class=\"mt-8\">\n          <div ui-card-content class=\"p-0\">\n            <div class=\"border-border flex items-center justify-between gap-3 border-b px-4 py-2.5\">\n              <span class=\"text-sm font-semibold\">{{ current().label }}</span>\n              <span class=\"text-muted-foreground text-xs\">{{ current().caption }}</span>\n            </div>\n\n            <!-- Fixed height across both states so toggling never resizes the card. -->\n            <ul class=\"divide-border min-h-[11rem] divide-y\">\n              @for (row of current().rows; track row.source) {\n                <li class=\"flex items-center justify-between gap-4 px-4 py-4\">\n                  <span class=\"text-sm\">{{ row.source }}</span>\n                  <span [class]=\"rowClass(row.tone)\">{{ row.value }}</span>\n                </li>\n              }\n            </ul>\n\n            <ui-separator />\n            <p class=\"text-muted-foreground px-4 py-3 text-xs leading-relaxed\">{{ current().changed }}</p>\n          </div>\n        </div>\n\n        <button ui-button variant=\"ghost\" class=\"mt-6\">How certification works</button>\n      </div>\n    </section>\n  `,\n})\nexport class UiBeforeAfterToggleComponent {\n  @Input() set initialActive(v: string) {\n    if (v === 'before' || v === 'after') this.active.set(v)\n  }\n  @Input('class') className?: string\n\n  protected readonly toggleStates = states\n\n  readonly active = signal('before')\n\n  readonly current = computed(() => states.find((state) => state.id === this.active()) ?? states[0]!)\n\n  get rootClass(): string {\n    return cn('bg-background', this.className)\n  }\n\n  rowClass(tone: 'on' | 'off'): string {\n    return cn('font-mono text-sm tabular-nums', tone === 'on' ? 'text-success font-semibold' : 'text-muted-foreground')\n  }\n\n  onChange(value: unknown): void {\n    if (typeof value === 'string' && value) this.active.set(value)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/before-after-toggle/before-after-toggle.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/before-after-toggle/index.ts",
      "content": "export {\n  UiBeforeAfterToggleComponent,\n  type BeforeAfterRow,\n  type BeforeAfterState,\n} from './before-after-toggle.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/before-after-toggle/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/separator.json",
    "https://uipkge.dev/r/angular/toggle-group.json"
  ],
  "description": "Single panel toggling between the old and new state of the same screen, with a caption naming what changed and a control that keeps its position between switches.",
  "categories": [
    "marketing"
  ]
}