{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "technical-specs-sheet",
  "title": "Technical Specs Sheet",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/technical-specs-sheet/technical-specs-sheet.component.ts",
      "content": "// Laboratory-grade engineering specification sheet with Metric/Imperial SI\n// toggles, parameter category filters, search, and downloadable PDF trigger.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport { CheckCircle2, FileDown, Info, LucideAngularModule, Search, ShieldCheck } 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 {\n  UiTableBodyComponent,\n  UiTableCellComponent,\n  UiTableComponent,\n  UiTableHeadComponent,\n  UiTableHeaderComponent,\n  UiTableRowComponent,\n} from '@/ui/table/table.component'\n\nexport type SpecCategory = 'acoustic' | 'electrical' | 'physical' | 'connectivity' | 'compliance'\n\nexport interface SpecItem {\n  id: string\n  category: SpecCategory\n  parameter: string\n  metricValue: string\n  imperialValue: string\n  tolerance?: string\n  testCondition?: string\n  highlight?: boolean\n}\n\nconst defaultSpecs: SpecItem[] = [\n  // Acoustic\n  {\n    id: 's1',\n    category: 'acoustic',\n    parameter: 'Transducer Type',\n    metricValue: '50mm Planar-Magnetic with Neodymium N52 Array',\n    imperialValue: '1.97 in Planar-Magnetic with Neodymium N52 Array',\n    highlight: true,\n  },\n  {\n    id: 's2',\n    category: 'acoustic',\n    parameter: 'Frequency Response',\n    metricValue: '5 Hz – 52,000 Hz',\n    imperialValue: '5 Hz – 52,000 Hz',\n    tolerance: '± 0.5 dB (20 Hz - 20 kHz)',\n    highlight: true,\n  },\n  {\n    id: 's3',\n    category: 'acoustic',\n    parameter: 'Total Harmonic Distortion (THD)',\n    metricValue: '< 0.04% @ 1 kHz, 100 dB SPL',\n    imperialValue: '< 0.04% @ 1 kHz, 100 dB SPL',\n    testCondition: 'IEC 60268-7 Standard',\n  },\n  {\n    id: 's4',\n    category: 'acoustic',\n    parameter: 'Sound Pressure Level (SPL)',\n    metricValue: '106 dB / 1 mW @ 1 kHz',\n    imperialValue: '106 dB / 1 mW @ 1 kHz',\n    testCondition: 'Free-field calibrated',\n  },\n  {\n    id: 's5',\n    category: 'acoustic',\n    parameter: 'Acoustic Enclosure',\n    metricValue: 'Open-Back CNC Milled Aircraft-Grade Aluminum Grille',\n    imperialValue: 'Open-Back CNC Milled Aircraft-Grade Aluminum Grille',\n  },\n  // Electrical\n  {\n    id: 's6',\n    category: 'electrical',\n    parameter: 'Nominal Impedance',\n    metricValue: '32 Ω pure resistive load',\n    imperialValue: '32 Ω pure resistive load',\n    tolerance: '± 5% @ 1 kHz',\n    highlight: true,\n  },\n  {\n    id: 's7',\n    category: 'electrical',\n    parameter: 'Maximum Input Power Handling',\n    metricValue: '3,000 mW (3.0 W Continuous)',\n    imperialValue: '3,000 mW (3.0 W Continuous)',\n    testCondition: 'Thermal peak 5,000 mW (100ms)',\n  },\n  {\n    id: 's8',\n    category: 'electrical',\n    parameter: 'Recommended Amplifier Output',\n    metricValue: '250 mW – 2,000 mW @ 32 Ω',\n    imperialValue: '250 mW – 2,000 mW @ 32 Ω',\n  },\n  // Physical\n  {\n    id: 's9',\n    category: 'physical',\n    parameter: 'Weight (excluding cable)',\n    metricValue: '385 grams',\n    imperialValue: '13.58 oz (0.85 lbs)',\n    tolerance: '± 5g',\n    highlight: true,\n  },\n  {\n    id: 's10',\n    category: 'physical',\n    parameter: 'Ear Cushion Dimensions (Inner ID)',\n    metricValue: '68 mm (H) × 52 mm (W) × 26 mm (D)',\n    imperialValue: '2.68 in (H) × 2.05 in (W) × 1.02 in (D)',\n  },\n  {\n    id: 's11',\n    category: 'physical',\n    parameter: 'Headband Clamping Force',\n    metricValue: '4.2 Newtons',\n    imperialValue: '0.94 lbf (Pound-force)',\n    tolerance: '± 0.3 N',\n  },\n  {\n    id: 's12',\n    category: 'physical',\n    parameter: 'Earpad Material Composition',\n    metricValue: 'Perforated Lambskin + Cooling Gel Memory Foam Core',\n    imperialValue: 'Perforated Lambskin + Cooling Gel Memory Foam Core',\n  },\n  // Connectivity\n  {\n    id: 's13',\n    category: 'connectivity',\n    parameter: 'Headphone Terminals',\n    metricValue: 'Dual 3.5mm Gold-Plated TRRS Balanced Sockets',\n    imperialValue: 'Dual 1/8 in Gold-Plated TRRS Balanced Sockets',\n  },\n  {\n    id: 's14',\n    category: 'connectivity',\n    parameter: 'Included Studio Cable',\n    metricValue: '2.5 meter 8-Core Monocrystalline Silver-Plated Copper (OCC)',\n    imperialValue: '8.20 feet 8-Core Monocrystalline Silver-Plated Copper (OCC)',\n    highlight: true,\n  },\n  {\n    id: 's15',\n    category: 'connectivity',\n    parameter: 'Source Termination',\n    metricValue: '4.4mm Pentaconn Balanced + 6.35mm Gold-Plated Adapter',\n    imperialValue: '4.4mm Pentaconn Balanced + 1/4 in Gold-Plated Adapter',\n  },\n  // Compliance\n  {\n    id: 's16',\n    category: 'compliance',\n    parameter: 'Certifications & Directives',\n    metricValue: 'Hi-Res Audio Certified, CE Mark, FCC Class B, RoHS 3, WEEE',\n    imperialValue: 'Hi-Res Audio Certified, CE Mark, FCC Class B, RoHS 3, WEEE',\n    highlight: true,\n  },\n  {\n    id: 's17',\n    category: 'compliance',\n    parameter: 'Operating Temperature & Humidity',\n    metricValue: '-10°C to +45°C (10% to 90% RH non-condensing)',\n    imperialValue: '14°F to 113°F (10% to 90% RH non-condensing)',\n  },\n]\n\ninterface CategoryOption {\n  id: 'all' | SpecCategory\n  label: string\n}\n\nconst categories: CategoryOption[] = [\n  { id: 'all', label: 'All Specifications' },\n  { id: 'acoustic', label: 'Acoustic Architecture' },\n  { id: 'electrical', label: 'Electrical & Power' },\n  { id: 'physical', label: 'Dimensions & Weight' },\n  { id: 'connectivity', label: 'Cables & Interconnects' },\n  { id: 'compliance', label: 'Standards & Compliance' },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-technical-specs-sheet, [ui-technical-specs-sheet]',\n  standalone: true,\n  // React renders the root Card 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    UiCardDescriptionComponent,\n    UiCardHeaderComponent,\n    UiCardTitleComponent,\n    UiInputComponent,\n    UiTableBodyComponent,\n    UiTableCellComponent,\n    UiTableComponent,\n    UiTableHeadComponent,\n    UiTableHeaderComponent,\n    UiTableRowComponent,\n  ],\n  template: `\n    <div ui-card data-slot=\"technical-specs-sheet\" [class]=\"rootClass\">\n      <div ui-card-header class=\"border-border bg-muted/20 border-b pb-4\">\n        <div class=\"flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between\">\n          <div>\n            <div class=\"flex items-center gap-2\">\n              <span class=\"text-muted-foreground font-mono text-xs font-semibold tracking-wider uppercase\">\n                {{ modelNumber }} · {{ revision }}\n              </span>\n              <span ui-badge variant=\"outline\" class=\"text-success font-mono text-xs\"> Laboratory Certified </span>\n            </div>\n            <h3 ui-card-title class=\"text-foreground text-lg font-semibold tracking-tight sm:text-xl\">\n              Engineering & Technical Specifications Sheet\n            </h3>\n            <p ui-card-description class=\"text-xs\">\n              Comprehensive acoustic measurements, electrical parameters, material tolerances, and compliance standards.\n            </p>\n          </div>\n\n          <div class=\"flex flex-wrap items-center gap-2.5\">\n            <!-- Metric / Imperial Toggle -->\n            <div class=\"border-border bg-background flex items-center rounded-lg border p-0.5 text-xs shadow-2xs\">\n              <button type=\"button\" [class]=\"unitToggleClass(isMetric())\" (click)=\"isMetric.set(true)\">\n                Metric (SI)\n              </button>\n              <button type=\"button\" [class]=\"unitToggleClass(!isMetric())\" (click)=\"isMetric.set(false)\">\n                Imperial (US)\n              </button>\n            </div>\n\n            <button ui-button variant=\"outline\" size=\"sm\" class=\"gap-1.5 text-xs shadow-2xs\" (click)=\"downloadPdf()\">\n              <lucide-icon [img]=\"FileDown\" class=\"size-3.5\" />\n              <span>Download Spec PDF</span>\n            </button>\n          </div>\n        </div>\n\n        <!-- Controls: Category Filter Tabs & Search Bar -->\n        <div class=\"mt-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n          <div class=\"flex flex-wrap items-center gap-1.5\">\n            @for (cat of categoryOptions; track cat.id) {\n              <button type=\"button\" [class]=\"categoryClass(cat.id)\" (click)=\"activeCategory.set(cat.id)\">\n                {{ cat.label }}\n              </button>\n            }\n          </div>\n\n          <div class=\"relative w-full sm:w-64\">\n            <lucide-icon\n              [img]=\"Search\"\n              class=\"text-muted-foreground absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2\"\n            />\n            <ui-input\n              [value]=\"searchQuery()\"\n              (valueChange)=\"searchQuery.set($event)\"\n              placeholder=\"Search parameters...\"\n              class=\"h-8 pl-8 text-xs\"\n            />\n          </div>\n        </div>\n      </div>\n\n      <div ui-card-content class=\"p-0\">\n        <table ui-table>\n          <thead ui-table-header>\n            <tr ui-table-row class=\"bg-muted/40\">\n              <th ui-table-head class=\"w-[280px]\">Parameter / Measurement</th>\n              <th ui-table-head>Specification ({{ isMetric() ? 'Metric' : 'Imperial' }})</th>\n              <th ui-table-head class=\"w-[180px]\">Tolerance / Range</th>\n              <th ui-table-head class=\"w-[220px]\">Test Standard / Method</th>\n            </tr>\n          </thead>\n          <tbody ui-table-body>\n            @for (spec of filteredSpecs(); track spec.id) {\n              <tr ui-table-row [class]=\"spec.highlight ? 'bg-primary/5' : ''\">\n                <td ui-table-cell>\n                  <div class=\"flex items-center gap-2\">\n                    <span class=\"text-foreground text-xs font-medium\">{{ spec.parameter }}</span>\n                    @if (spec.highlight) {\n                      <span ui-badge variant=\"secondary\" class=\"h-4.5 px-1.5 font-mono text-xs font-semibold uppercase\">\n                        Key Spec\n                      </span>\n                    }\n                  </div>\n                </td>\n                <td ui-table-cell>\n                  <span class=\"text-foreground font-mono text-xs font-semibold\">\n                    {{ isMetric() ? spec.metricValue : spec.imperialValue }}\n                  </span>\n                </td>\n                <td ui-table-cell>\n                  <span class=\"text-muted-foreground font-mono text-xs\">{{ spec.tolerance || '—' }}</span>\n                </td>\n                <td ui-table-cell>\n                  <span class=\"text-muted-foreground text-xs\">{{ spec.testCondition || 'Factory Standard Q/C' }}</span>\n                </td>\n              </tr>\n            }\n            @if (filteredSpecs().length === 0) {\n              <tr ui-table-row>\n                <td ui-table-cell [attr.colspan]=\"4\" class=\"text-muted-foreground h-28 text-center text-xs\">\n                  No matching specifications found for \"{{ searchQuery() }}\".\n                </td>\n              </tr>\n            }\n          </tbody>\n        </table>\n\n        <!-- Bottom Compliance Certification Footer Badges -->\n        <div class=\"border-border bg-muted/20 flex flex-wrap items-center justify-between gap-3 border-t p-4 text-xs\">\n          <div class=\"text-muted-foreground flex flex-wrap items-center gap-4\">\n            <div class=\"flex items-center gap-1.5\">\n              <lucide-icon [img]=\"ShieldCheck\" class=\"text-primary size-4\" />\n              <span class=\"text-foreground font-medium\">Calibrated Precision</span>\n            </div>\n            <div class=\"flex items-center gap-1.5\">\n              <lucide-icon [img]=\"CheckCircle2\" class=\"text-success size-4\" />\n              <span>3-Year Studio Warranty Included</span>\n            </div>\n            <div class=\"flex items-center gap-1.5\">\n              <lucide-icon [img]=\"Info\" class=\"text-info size-4\" />\n              <span>Serial matched drivers (± 0.3 dB stereo tracking)</span>\n            </div>\n          </div>\n\n          <span class=\"text-muted-foreground font-mono text-xs\"> Document ID: SPEC-APX-{{ modelNumber }}-2026 </span>\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class UiTechnicalSpecsSheetComponent {\n  protected readonly CheckCircle2 = CheckCircle2\n  protected readonly FileDown = FileDown\n  protected readonly Info = Info\n  protected readonly Search = Search\n  protected readonly ShieldCheck = ShieldCheck\n\n  protected readonly categoryOptions = categories\n\n  @Input() productTitle = 'Apex Pro Reference Planar-Magnetic Studio Monitor Headphones'\n  @Input() modelNumber = 'APX-950-PRO'\n  @Input() revision = 'Rev 2.4 (2026)'\n  @Input() set specs(v: SpecItem[] | undefined) {\n    this.specsSignal.set(v ?? defaultSpecs)\n  }\n  @Input('class') className?: string\n\n  readonly specsSignal = signal<SpecItem[]>(defaultSpecs)\n  readonly isMetric = signal(true)\n  readonly activeCategory = signal<'all' | SpecCategory>('all')\n  readonly searchQuery = signal('')\n\n  readonly filteredSpecs = computed(() => {\n    const cat = this.activeCategory()\n    const q = this.searchQuery().trim().toLowerCase()\n    return this.specsSignal().filter((item) => {\n      const matchesCat = cat === 'all' || item.category === cat\n      const matchesSearch =\n        q === '' ||\n        item.parameter.toLowerCase().includes(q) ||\n        item.metricValue.toLowerCase().includes(q) ||\n        item.imperialValue.toLowerCase().includes(q)\n      return matchesCat && matchesSearch\n    })\n  })\n\n  get rootClass(): string {\n    return cn('border-border w-full shadow-xs', this.className)\n  }\n\n  unitToggleClass(active: boolean): string {\n    return cn(\n      'rounded-md px-2.5 py-1 font-medium transition-colors',\n      active\n        ? 'bg-primary text-primary-foreground font-semibold shadow-2xs'\n        : 'text-muted-foreground hover:text-foreground',\n    )\n  }\n\n  categoryClass(id: 'all' | SpecCategory): string {\n    return cn(\n      'rounded-md px-2.5 py-1 text-xs font-medium transition-colors',\n      this.activeCategory() === id\n        ? 'bg-foreground text-background shadow-2xs'\n        : 'bg-muted/60 text-muted-foreground hover:bg-muted hover:text-foreground border border-transparent',\n    )\n  }\n\n  downloadPdf(): void {\n    alert(`Downloading official engineering data sheet for ${this.modelNumber} (${this.revision})...`)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/technical-specs-sheet/technical-specs-sheet.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/technical-specs-sheet/index.ts",
      "content": "export { UiTechnicalSpecsSheetComponent, type SpecCategory, type SpecItem } from './technical-specs-sheet.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/technical-specs-sheet/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/table.json"
  ],
  "description": "Comprehensive engineering technical specifications sheet with Metric/Imperial SI toggles, parameter category filters, search, and downloadable PDF trigger.",
  "categories": [
    "ecommerce",
    "data-display"
  ]
}