{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "case-study-metric-comparison",
  "title": "Case Study — Metric Comparison",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/case-study-metric-comparison/case-study-metric-comparison.component.ts",
      "content": "// Single customer result as a before-and-after table: prior value, current value, and\n// delta per metric under a short context line. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { ArrowRight, LucideAngularModule, TrendingDown, TrendingUp } 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 { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n  UiTableBodyComponent,\n  UiTableCellComponent,\n  UiTableComponent,\n  UiTableHeadComponent,\n  UiTableHeaderComponent,\n  UiTableRowComponent,\n} from '@/ui/table/table.component'\n\nexport interface CaseStudyComparisonMetric {\n  name: string\n  before: string\n  after: string\n  delta: string\n  /** Which direction is good, so the delta colour never has to be hard-coded per row. */\n  better: 'down' | 'up'\n}\n\nconst defaultMetrics: CaseStudyComparisonMetric[] = [\n  { name: 'Days to close', before: '9.4', after: '4.2', delta: '−55%', better: 'down' },\n  { name: 'Ad-hoc data requests / month', before: '212', after: '61', delta: '−71%', better: 'down' },\n  { name: 'Certified metrics published', before: '0', after: '340', delta: '+340', better: 'up' },\n  { name: 'Forecast accuracy band', before: '±6.1pp', after: '±3.7pp', delta: '−2.4pp', better: 'down' },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-case-study-metric-comparison, [ui-case-study-metric-comparison]',\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    LucideAngularModule,\n    UiBadgeComponent,\n    UiButtonComponent,\n    UiCardComponent,\n    UiCardContentComponent,\n    UiSeparatorComponent,\n    UiTableBodyComponent,\n    UiTableCellComponent,\n    UiTableComponent,\n    UiTableHeadComponent,\n    UiTableHeaderComponent,\n    UiTableRowComponent,\n  ],\n  template: `\n    <section data-slot=\"case-study-metric-comparison\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-4xl px-6 py-20 lg:py-28\">\n        <span ui-badge variant=\"secondary\">Northwind Logistics</span>\n        <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n          Two quarters either side of the rollout\n        </h2>\n        <p class=\"text-muted-foreground mt-3 text-lg\">\n          Their numbers, their definitions, measured the same way before and after. Nothing normalised.\n        </p>\n\n        <div ui-card class=\"mt-8\">\n          <div ui-card-content class=\"p-0\">\n            <table ui-table>\n              <thead ui-table-header>\n                <tr ui-table-row>\n                  <th ui-table-head>Metric</th>\n                  <th ui-table-head class=\"text-right\">Q4 2025</th>\n                  <th ui-table-head class=\"text-right\">Q2 2026</th>\n                  <th ui-table-head class=\"text-right\">Change</th>\n                </tr>\n              </thead>\n              <tbody ui-table-body>\n                @for (metric of metrics; track metric.name) {\n                  <tr ui-table-row>\n                    <td ui-table-cell class=\"font-medium\">{{ metric.name }}</td>\n                    <td ui-table-cell class=\"text-muted-foreground text-right font-mono text-sm\">\n                      {{ metric.before }}\n                    </td>\n                    <td ui-table-cell class=\"text-right font-mono text-sm font-semibold\">{{ metric.after }}</td>\n                    <td ui-table-cell class=\"text-right\">\n                      <span class=\"text-success inline-flex items-center gap-1.5 font-mono text-sm\">\n                        @if (metric.better === 'down') {\n                          <lucide-icon [img]=\"TrendingDown\" class=\"size-3.5\" aria-hidden=\"true\" />\n                        } @else {\n                          <lucide-icon [img]=\"TrendingUp\" class=\"size-3.5\" aria-hidden=\"true\" />\n                        }\n                        {{ metric.delta }}\n                      </span>\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n\n            <ui-separator />\n\n            <p class=\"text-muted-foreground px-6 py-4 text-xs leading-relaxed\">\n              Measured from their own close calendar and ticket queue. The rollout completed between the two quarters;\n              no headcount was added or removed in finance during the period.\n            </p>\n          </div>\n        </div>\n\n        <button ui-button class=\"mt-8\">\n          Read how they did it\n          <lucide-icon [img]=\"ArrowRight\" class=\"ml-2 size-4\" aria-hidden=\"true\" />\n        </button>\n      </div>\n    </section>\n  `,\n})\nexport class UiCaseStudyMetricComparisonComponent {\n  protected readonly ArrowRight = ArrowRight\n  protected readonly TrendingDown = TrendingDown\n  protected readonly TrendingUp = TrendingUp\n\n  @Input() metrics: CaseStudyComparisonMetric[] = defaultMetrics.map((m) => ({ ...m }))\n  @Input('class') className?: string\n\n  get rootClass(): string {\n    return cn('bg-background', this.className)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/case-study-metric-comparison/case-study-metric-comparison.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/case-study-metric-comparison/index.ts",
      "content": "export {\n  UiCaseStudyMetricComparisonComponent,\n  type CaseStudyComparisonMetric,\n} from './case-study-metric-comparison.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/case-study-metric-comparison/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/table.json"
  ],
  "description": "Single customer result shown as a before-and-after table of four metrics, each row carrying the prior value, the current value, and the delta, under a short context line.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "case-study"
}