{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "product-detail-page", "title": "Product Detail Page", "type": "registry:page", "files": [ { "path": "packages/registry-angular/blocks/product-detail-page/product-detail-page.component.ts", "content": "// Flagship e-commerce product detail page: breadcrumb, multi-angle gallery with finish &\n// cable selectors, stock urgency, warranty upsell, flash-sale strip, bundle, specs,\n// reviews, and Q&A. Self-contained single-file port of the Vue ProductDetailPage +\n// ProductGalleryBuyBox 1:1 (sibling sections are inlined so the block installs alone).\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n BadgeCheck,\n ChevronRight,\n Cpu,\n Flame,\n Heart,\n HelpCircle,\n LucideAngularModule,\n MessagesSquare,\n Minus,\n Package,\n Plus,\n RotateCcw,\n Share2,\n ShieldCheck,\n ShoppingCart,\n Star,\n ThumbsUp,\n Truck,\n Zap,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport interface ProductVariant {\n id: string\n name: string\n colorHex: string\n sku: string\n inStock: boolean\n stockCount: number\n price: number\n originalPrice: number\n images: { id: string; url: string; alt: string }[]\n}\n\nexport const variants: ProductVariant[] = [\n {\n id: 'var-black',\n name: 'Obsidian Matte Black',\n colorHex: '#18181b',\n sku: 'APX-950-BLK',\n inStock: true,\n stockCount: 14,\n price: 599,\n originalPrice: 749,\n images: [\n {\n id: 'img-1',\n url: 'https://images.unsplash.com/photo-1546435770-a3e426bf472b?w=900&auto=format&fit=crop&q=80',\n alt: 'Apex Pro Reference Studio Headphones on Wood Desk',\n },\n {\n id: 'img-2',\n url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=900&auto=format&fit=crop&q=80',\n alt: 'Apex Pro CNC Aluminum Driver Open Back View',\n },\n {\n id: 'img-3',\n url: 'https://images.unsplash.com/photo-1583394838336-acd977736f90?w=900&auto=format&fit=crop&q=80',\n alt: 'Apex Pro Lambskin Magnetic Earpads Angle',\n },\n {\n id: 'img-4',\n url: 'https://images.unsplash.com/photo-1484704849700-f032a568e944?w=900&auto=format&fit=crop&q=80',\n alt: 'Apex Pro Studio Audio Cable Interconnects',\n },\n ],\n },\n {\n id: 'var-silver',\n name: 'Lunar Silver Aluminum',\n colorHex: '#94a3b8',\n sku: 'APX-950-SLV',\n inStock: true,\n stockCount: 6,\n price: 599,\n originalPrice: 749,\n images: [\n {\n id: 'img-2',\n url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=900&auto=format&fit=crop&q=80',\n alt: 'Apex Pro Lunar Silver Open Back View',\n },\n {\n id: 'img-1',\n url: 'https://images.unsplash.com/photo-1546435770-a3e426bf472b?w=900&auto=format&fit=crop&q=80',\n alt: 'Apex Pro Silver Edition Desk Shot',\n },\n {\n id: 'img-3',\n url: 'https://images.unsplash.com/photo-1583394838336-acd977736f90?w=900&auto=format&fit=crop&q=80',\n alt: 'Apex Pro Earpads Detail',\n },\n ],\n },\n {\n id: 'var-navy',\n name: 'Midnight Studio Navy',\n colorHex: '#1e293b',\n sku: 'APX-950-NVY',\n inStock: true,\n stockCount: 3,\n price: 629,\n originalPrice: 779,\n images: [\n {\n id: 'img-3',\n url: 'https://images.unsplash.com/photo-1583394838336-acd977736f90?w=900&auto=format&fit=crop&q=80',\n alt: 'Apex Pro Midnight Navy Studio Edition',\n },\n {\n id: 'img-1',\n url: 'https://images.unsplash.com/photo-1546435770-a3e426bf472b?w=900&auto=format&fit=crop&q=80',\n alt: 'Apex Pro Navy Perspective',\n },\n {\n id: 'img-2',\n url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=900&auto=format&fit=crop&q=80',\n alt: 'Apex Pro Navy Driver Housing',\n },\n ],\n },\n]\n\ntype CableKey = '4.4mm' | '3.5mm' | 'xlr'\n\ninterface BundleItem {\n id: string\n name: string\n detail: string\n price: number\n}\n\nconst BUNDLE_ITEMS: BundleItem[] = [\n { id: 'bundle-cable', name: 'Apex Balanced 4.4mm Upgrade Cable', detail: 'OCC copper, 1.5m', price: 89 },\n { id: 'bundle-case', name: 'Studio Hard Travel Case', detail: 'Molded, humidity control', price: 129 },\n { id: 'bundle-pads', name: 'Replacement Lambskin Earpads', detail: 'Magnetic mount pair', price: 59 },\n]\n\ninterface SpecRow {\n label: string\n value: string\n}\n\nconst SPEC_ROWS: SpecRow[] = [\n { label: 'Driver', value: '106mm planar magnetic, 32Ω impedance' },\n { label: 'Frequency Response', value: '8Hz – 55kHz (±3dB)' },\n { label: 'THD', value: '< 0.05% @ 1kHz, 100dB SPL' },\n { label: 'Weight', value: '420g without cable' },\n { label: 'Cable', value: 'Detachable dual 3.5mm, 2m balanced' },\n { label: 'Model', value: 'APX-950-PRO · Studio Edition 2026' },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-product-detail-page, [ui-product-detail-page]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiInputComponent, UiSeparatorComponent],\n template: `\n
\n \n \n\n \n
\n \n
\n
\n \n\n
\n \n 2026 Flagship\n \n \n Laboratory Calibrated\n \n
\n\n
\n \n \n \n \n \n \n
\n
\n\n
\n @for (img of currentVariant().images; track img.id; let idx = $index) {\n \n }\n
\n\n
\n
\n \n Free 2-Day Air\n Orders over $150\n
\n
\n \n 45-Day Trial\n Zero-risk return\n
\n
\n \n 3-Yr Warranty\n Direct factory support\n
\n
\n
\n\n \n
\n
\n
\n SKU: {{ currentVariant().sku }}\n ·\n Made in Germany\n
\n\n

\n Apex Pro Reference Planar Studio Headphones\n

\n\n
\n
\n \n \n \n \n \n
\n 4.9\n (342 Verified Mastering Reviews)\n
\n
\n\n \n\n
\n
\n \n \\${{ currentVariant().price }}\n \n \\${{ currentVariant().originalPrice }} \n \n Save \\${{ currentVariant().originalPrice - currentVariant().price }} (20% OFF)\n \n
\n

\n Interest-free installments of \\${{ (currentVariant().price / 4).toFixed(2) }}/mo with Affirm or Klarna.\n

\n
\n\n
\n
\n Finish / Enclosure:\n {{ currentVariant().name }}\n
\n\n
\n @for (v of finishVariants; track v.id) {\n \n }\n
\n
\n\n
\n
\n Primary Studio Cable Termination:\n Included in package\n
\n\n
\n \n\n \n\n \n
\n
\n\n \n \n \n \n Add 3-Year Apex Care+ Accidental Protection\n +$49.00\n \n \n Covers accidental drops, driver voice-coil failure, and free earpad replacement.\n \n \n \n\n
\n
\n
\n \n Fulfillment Hub Stock Level\n
\n {{ currentVariant().stockCount }} units remaining\n
\n

\n High demand: 18 sound engineers have this item in their active checkout carts.\n

\n
\n\n
\n
\n
\n \n \n \n {{ quantity() }}\n \n \n \n
\n\n \n
\n\n \n \n Instant 1-Click Checkout (Apple Pay / G-Pay)\n \n\n @if (cartNotice(); as notice) {\n

\n {{ notice }}\n

\n }\n
\n\n
\n \n Deliver to:\n \n Fast Delivery: Tomorrow, 2:00 PM\n
\n
\n
\n\n \n
\n
\n
\n
\n \n

Audio Pro Week: Limited Master Batch 04

\n
\n

\n {{ claimedPercent }}% claimed · Only {{ currentVariant().stockCount }} left at this price\n

\n
\n
\n
\n
\n
\n
\n\n \n
\n
\n \n

Frequently Bought Together

\n
\n
\n @for (item of bundleItems; track item.id) {\n
\n

{{ item.name }}

\n

{{ item.detail }}

\n

+\\${{ item.price }}

\n
\n }\n
\n \n
\n\n \n
\n
\n \n

Engineering & Technical Specifications

\n APX-950-PRO\n
\n
\n @for (row of specRows; track row.label; let last = $last) {\n \n {{ row.label }}\n {{ row.value }}\n
\n }\n
\n
\n\n \n
\n
\n \n

Verified Customer Reviews

\n 4.9 · 342 reviews\n
\n
\n
\n
\n

Marcus T. · Mix Engineer, Berlin

\n \n \n Verified buyer\n \n
\n
\n \n \n \n \n \n
\n

\n Translation is scary good — mixes move to monitors with zero surprises. The 4.4mm balanced drive has\n headroom for days.\n

\n \n \n Helpful ({{ helpfulCount('review-1') }})\n \n
\n
\n
\n

Yuki S. · Mastering, Tokyo

\n \n \n Verified buyer\n \n
\n
\n \n \n \n \n \n
\n

\n Wore them for a 9-hour session with no fatigue. Earpads and clamping force are the best I have tested at\n any price.\n

\n \n \n Helpful ({{ helpfulCount('review-2') }})\n \n
\n
\n
\n\n \n
\n
\n \n

Customer & Staff Q&A

\n
\n

\n Questions about the Apex Pro Reference Planar Headphones, answered by owners and factory staff.\n

\n
\n
\n

\n \n Does the APX-950-PRO need a dedicated headphone amp?\n

\n

\n Staff answer: At 32Ω it runs fine from a modern interface,\n but a balanced 4.4mm output tightens sub-bass control noticeably.\n

\n
\n
\n

\n \n Are the earpads user-replaceable?\n

\n

\n Staff answer: Yes — magnetic mounts swap in seconds, and\n Apex Care+ covers one free replacement pair.\n

\n
\n
\n
\n \n \n
\n
\n
\n `,\n})\nexport class UiProductDetailPageComponent {\n protected readonly BadgeCheck = BadgeCheck\n protected readonly ChevronRight = ChevronRight\n protected readonly Cpu = Cpu\n protected readonly Flame = Flame\n protected readonly Heart = Heart\n protected readonly HelpCircle = HelpCircle\n protected readonly MessagesSquare = MessagesSquare\n protected readonly Minus = Minus\n protected readonly Package = Package\n protected readonly Plus = Plus\n protected readonly RotateCcw = RotateCcw\n protected readonly Share2 = Share2\n protected readonly ShieldCheck = ShieldCheck\n protected readonly ShoppingCart = ShoppingCart\n protected readonly Star = Star\n protected readonly ThumbsUp = ThumbsUp\n protected readonly Truck = Truck\n protected readonly Zap = Zap\n\n protected readonly finishVariants = variants\n protected readonly bundleItems = BUNDLE_ITEMS\n protected readonly bundleTotal = BUNDLE_ITEMS.reduce((acc, item) => acc + item.price, 0)\n protected readonly specRows = SPEC_ROWS\n protected readonly claimedPercent = 82\n\n @Input() set initialVariantId(v: string | undefined) {\n if (v) this.selectedVariantId.set(v)\n }\n @Input('class') className?: string\n\n readonly selectedVariantId = signal(variants[0].id)\n readonly activeImageIndex = signal(0)\n readonly quantity = signal(1)\n readonly selectedCable = signal('4.4mm')\n readonly isWishlisted = signal(false)\n readonly addExtendedWarranty = signal(true)\n readonly zipCode = signal('94103')\n readonly cartNotice = signal(null)\n readonly question = signal('')\n readonly helpfulVotes = signal>({ 'review-1': 24, 'review-2': 11 })\n\n readonly currentVariant = computed(() => variants.find((v) => v.id === this.selectedVariantId()) ?? variants[0])\n\n readonly activeImageUrl = computed(() => {\n const variant = this.currentVariant()\n return variant.images[this.activeImageIndex()]?.url ?? variant.images[0].url\n })\n\n readonly finalPrice = computed(() => {\n let base = this.currentVariant().price * this.quantity()\n if (this.addExtendedWarranty()) base += 49\n return base\n })\n\n get rootClass(): string {\n return cn('bg-background text-foreground w-full space-y-10', this.className)\n }\n\n wishlistBtnClass(): string {\n return cn(\n 'flex size-8 items-center justify-center rounded-full border shadow-2xs backdrop-blur-xs transition-colors border-border bg-background/90',\n this.isWishlisted() ? 'text-destructive' : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n thumbClass(idx: number): string {\n return cn(\n 'bg-muted/20 relative aspect-4/3 overflow-hidden rounded-lg border transition-colors',\n this.activeImageIndex() === idx\n ? 'border-primary ring-primary/40 ring-2'\n : 'border-border opacity-70 hover:opacity-100',\n )\n }\n\n swatchClass(id: string): string {\n return cn(\n 'group relative flex size-9 items-center justify-center rounded-full border transition-colors',\n this.selectedVariantId() === id\n ? 'border-primary ring-primary ring-offset-background ring-2 ring-offset-2'\n : 'border-border hover:border-muted-foreground',\n )\n }\n\n cableClass(key: CableKey): string {\n return cn(\n 'rounded-lg border p-2.5 text-center transition-colors',\n this.selectedCable() === key\n ? 'border-primary bg-primary/5 text-primary ring-primary font-semibold ring-1'\n : 'border-border bg-card text-foreground hover:bg-muted/40',\n )\n }\n\n helpfulCount(id: string): number {\n return this.helpfulVotes()[id] ?? 0\n }\n\n markHelpful(id: string): void {\n this.helpfulVotes.update((prev) => ({ ...prev, [id]: (prev[id] ?? 0) + 1 }))\n }\n\n selectVariant(v: ProductVariant): void {\n this.selectedVariantId.set(v.id)\n this.activeImageIndex.set(0)\n }\n\n incrementQty(): void {\n if (this.quantity() < this.currentVariant().stockCount) {\n this.quantity.update((q) => q + 1)\n }\n }\n\n decrementQty(): void {\n if (this.quantity() > 1) {\n this.quantity.update((q) => q - 1)\n }\n }\n\n handleAddToCart(): void {\n // The Vue/React blocks use window.alert here; Angular renders the same confirmation\n // copy inline so it stays testable under jsdom and never blocks the event loop.\n this.cartNotice.set(\n `Added ${this.quantity()}x ${this.currentVariant().name} (${this.selectedCable()}) to cart. Total: $${this.finalPrice()}`,\n )\n }\n\n shareLink(): void {\n this.cartNotice.set('Share link copied to clipboard!')\n }\n\n handleExpressBuy(): void {\n this.cartNotice.set(`Initiating Express Apple Pay checkout for $${this.finalPrice()}...`)\n }\n\n addBundleToCart(): void {\n this.cartNotice.set(`Added bundle (3 items) to cart. Total: $${this.bundleTotal}`)\n }\n\n askQuestion(): void {\n const q = this.question().trim()\n if (!q) return\n this.cartNotice.set('Question posted — factory staff typically reply within 24 hours.')\n this.question.set('')\n }\n}\n", "type": "registry:page", "target": "~/src/app/components/blocks/product-detail-page/product-detail-page.component.ts" }, { "path": "packages/registry-angular/blocks/product-detail-page/index.ts", "content": "export { UiProductDetailPageComponent, variants, type ProductVariant } from './product-detail-page.component'\n", "type": "registry:page", "target": "~/src/app/components/blocks/product-detail-page/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", "https://uipkge.dev/r/angular/separator.json" ], "description": "Flagship e-commerce product detail page with multi-angle gallery, finish & cable selectors, stock urgency counter, warranty upsell, flash sale countdown bar, frequently bought together bundle, technical specs sheet, customer reviews breakdown, and community Q&A.", "categories": [ "commerce", "ecommerce" ] }