{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "product-comparison-drawer", "title": "Product Comparison Drawer", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/product-comparison-drawer/product-comparison-drawer.component.ts", "content": "import {\n Component,\n EventEmitter,\n Input,\n Output,\n booleanAttribute,\n computed,\n signal,\n type OnInit,\n ChangeDetectionStrategy,\n} from '@angular/core'\nimport {\n Check,\n ChevronDown,\n ChevronUp,\n GitCompare,\n Layers,\n LucideAngularModule,\n RotateCcw,\n ShoppingCart,\n SlidersHorizontal,\n Star,\n Trash2,\n X,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport { UiSwitchComponent } from '@/ui/switch/switch.component'\n\nexport interface ComparisonSpec {\n price: string\n driverSize: string\n batteryLife: string\n ancType: string\n waterResistance: string\n weight: string\n accessories: string\n connectivity?: string\n fastCharging?: string\n microphone?: string\n warranty?: string\n}\n\nexport interface ComparisonProduct {\n id: string\n name: string\n tagline: string\n badge: string\n badgeVariant?: 'default' | 'secondary' | 'outline'\n price: string\n numericPrice: number\n rating: number\n reviewsCount: number\n image: string\n inStock: boolean\n shipping: string\n specs: ComparisonSpec\n}\n\nexport interface SpecField {\n key: keyof ComparisonSpec\n label: string\n category: 'Key Specifications' | 'Audio & Connectivity' | 'Package & Warranty'\n description?: string\n}\n\nexport type ProductComparisonDrawerMode = 'dock' | 'expanded'\n\ninterface SpecCategory {\n name: string\n fields: SpecField[]\n}\n\nexport const DEFAULT_COMPARISON_PRODUCTS: ComparisonProduct[] = [\n {\n id: 'prod-headphones',\n name: 'Pro Wireless Headphones',\n tagline: 'Flagship Over-Ear Studio Sound',\n badge: 'Best Overall',\n badgeVariant: 'default',\n price: '$299.00',\n numericPrice: 299,\n rating: 4.9,\n reviewsCount: 1240,\n image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&auto=format&fit=crop&q=80',\n inStock: true,\n shipping: 'Free Next-Day Delivery',\n specs: {\n price: '$299.00',\n driverSize: '40mm Graphene',\n batteryLife: '40 Hours',\n ancType: 'Adaptive ANC',\n waterResistance: 'IPX4',\n weight: '245g',\n accessories: 'Hard Travel Case, 3.5mm Cable, USB-C Cable, Airplane Adapter',\n connectivity: 'Bluetooth 5.3 + Multipoint',\n fastCharging: '10 min charge = 3 hrs playback',\n microphone: '6 Mics with Beamforming AI',\n warranty: '2-Year Manufacturer Warranty',\n },\n },\n {\n id: 'prod-earbuds',\n name: 'Aero Studio Earbuds',\n tagline: 'Compact True Wireless In-Ear',\n badge: 'Editor Choice',\n badgeVariant: 'secondary',\n price: '$199.00',\n numericPrice: 199,\n rating: 4.7,\n reviewsCount: 890,\n image: 'https://images.unsplash.com/photo-1590658268037-6bf12165a8df?w=400&auto=format&fit=crop&q=80',\n inStock: true,\n shipping: 'Free 2-Day Delivery',\n specs: {\n price: '$199.00',\n driverSize: '11mm Dynamic',\n batteryLife: '28 Hours',\n ancType: 'Standard ANC',\n waterResistance: 'IPX5',\n weight: '54g',\n accessories: 'Wireless Charging Case, 4 Pairs Silicone Tips (XS/S/M/L), USB-C Cable',\n connectivity: 'Bluetooth 5.3 + Multipoint',\n fastCharging: '10 min charge = 3 hrs playback',\n microphone: '4 Mics with Wind Noise Guard',\n warranty: '2-Year Manufacturer Warranty',\n },\n },\n {\n id: 'prod-sport',\n name: 'Active ANC Sport',\n tagline: 'Rugged Ergonomic Workout Earphones',\n badge: 'Best Value',\n badgeVariant: 'secondary',\n price: '$149.00',\n numericPrice: 149,\n rating: 4.6,\n reviewsCount: 620,\n image: 'https://images.unsplash.com/photo-1572536147248-ac59a8abfa4b?w=400&auto=format&fit=crop&q=80',\n inStock: true,\n shipping: 'Free Standard Delivery',\n specs: {\n price: '$149.00',\n driverSize: '10mm Hybrid',\n batteryLife: '24 Hours',\n ancType: 'Passive Noise Isolation',\n waterResistance: 'IPX7 Waterproof',\n weight: '62g',\n accessories: 'Compact Case, Secure Wingtips, 3 Pairs Memory Foam Tips, USB-C Cable',\n connectivity: 'Bluetooth 5.3',\n fastCharging: '10 min charge = 3 hrs playback',\n microphone: '2 Mics with Environmental Noise Cancellation',\n warranty: '2-Year Manufacturer Warranty',\n },\n },\n]\n\nexport const SPEC_FIELDS: SpecField[] = [\n {\n key: 'price',\n label: 'Price',\n category: 'Key Specifications',\n description: 'Manufacturer suggested retail price',\n },\n {\n key: 'driverSize',\n label: 'Driver Size',\n category: 'Key Specifications',\n description: 'Acoustic transducer diameter and diaphragm material',\n },\n {\n key: 'batteryLife',\n label: 'Battery Life',\n category: 'Key Specifications',\n description: 'Total listening duration with active cancellation enabled',\n },\n {\n key: 'ancType',\n label: 'ANC Type',\n category: 'Key Specifications',\n description: 'Acoustic cancellation and transparency algorithm type',\n },\n {\n key: 'waterResistance',\n label: 'Water Resistance',\n category: 'Key Specifications',\n description: 'Ingress protection rating against moisture and dust',\n },\n {\n key: 'weight',\n label: 'Weight',\n category: 'Key Specifications',\n description: 'Total physical mass including ear cushions/enclosures',\n },\n {\n key: 'accessories',\n label: 'In-Box Accessories',\n category: 'Package & Warranty',\n description: 'Included bundled cables, adapters, and travel protection',\n },\n {\n key: 'connectivity',\n label: 'Connectivity',\n category: 'Audio & Connectivity',\n description: 'Wireless Bluetooth specification and dual-device pairing',\n },\n {\n key: 'fastCharging',\n label: 'Fast Charging',\n category: 'Audio & Connectivity',\n description: 'Quick-boost charging time for emergency playback',\n },\n {\n key: 'microphone',\n label: 'Microphone Array',\n category: 'Audio & Connectivity',\n description: 'Voice pickup sensors and beamforming algorithms',\n },\n {\n key: 'warranty',\n label: 'Warranty',\n category: 'Package & Warranty',\n description: 'Manufacturer warranty coverage period',\n },\n]\n\n/** SPEC_FIELDS grouped by category, in first-seen order (React's `categories` memo). */\nfunction groupFields(fields: SpecField[]): SpecCategory[] {\n const cats: SpecCategory[] = []\n for (const field of fields) {\n let group = cats.find((c) => c.name === field.category)\n if (!group) {\n group = { name: field.category, fields: [] }\n cats.push(group)\n }\n group.fields.push(field)\n }\n return cats\n}\n\n/**\n * ProductComparisonDrawer -- the React block, 1:1: a catalog preview with a sticky compare dock\n * (`mode=\"dock\"`) that expands into a full specification matrix, or the matrix on its own\n * (`mode=\"expanded\"`). The matrix groups specs by category, can highlight only the rows whose\n * values differ across the selected products, and ends in a sticky buy-trigger footer.\n * Emits `addToCart`, `removeProduct`, `clearAll`, `restoreProducts` and `openChange` where React\n * calls the matching `on*` prop.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-product-comparison-drawer, [ui-product-comparison-drawer]',\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, UiSeparatorComponent, UiSwitchComponent],\n template: `\n
\n \n @if (mode === 'dock') {\n
\n
\n
\n
\n \n Audio Lab\n \n Over-Ear & In-Ear Systems\n
\n

High-Fidelity Audio Lineup

\n

\n Select flagship models below to compare acoustic architectures, battery runtime, and diffs side by side.\n

\n
\n\n
\n @if (selectedProducts().length < catalog.length) {\n \n }\n \n
\n
\n\n \n
\n @for (product of catalog; track product.id) {\n
\n
\n
\n \n
\n \n {{ product.badge }}\n \n
\n
\n\n
\n
\n
\n \n {{ product.rating }}\n ({{ formatCount(product.reviewsCount) }})\n
\n {{ product.price }}\n
\n

{{ product.name }}

\n

{{ product.tagline }}

\n
\n
\n\n
\n \n
\n @if (isSelected(product)) {\n \n }\n
\n {{ isSelected(product) ? 'Comparing' : 'Add to compare' }}\n \n\n \n @if (addedProductId() === product.id) {\n \n Added\n } @else {\n \n Add\n }\n \n
\n
\n }\n
\n
\n }\n\n \n @if (mode === 'dock' && !isExpanded()) {\n \n
\n \n
\n
\n
\n \n
\n
\n Compare Dock\n \n {{ selectedProducts().length }} / {{ catalog.length }} selected\n \n
\n
\n\n \n\n \n @if (selectedProducts().length > 0) {\n
\n @for (product of selectedProducts(); track product.id) {\n \n \n
\n \n {{ product.name }}\n \n \n {{ product.price }}\n \n
\n \n \n \n
\n }\n
\n } @else {\n
\n No products in comparison dock.\n \n Restore 3 Items\n \n
\n }\n
\n\n \n
\n @if (selectedProducts().length > 0) {\n \n Clear All\n \n }\n\n \n Compare {{ selectedProducts().length }} Items\n \n \n
\n
\n
\n }\n\n \n @if (isExpanded() || mode === 'expanded') {\n \n \n \n
\n
\n
\n \n
\n
\n
\n

Specification Matrix

\n \n {{ selectedProducts().length }} Selected\n \n @if (highlightDiffs()) {\n \n \n Diffs Highlighted ({{ diffCount() }})\n \n }\n
\n

\n Side-by-side technical breakdown across drivers, battery, acoustics, and box contents.\n

\n
\n
\n\n \n
\n
\n \n \n
\n\n @if (mode === 'dock') {\n \n }\n
\n
\n \n\n \n @if (selectedProducts().length === 0) {\n
\n
\n \n
\n

No Products Selected

\n

\n You have cleared all items from comparison. Restore the baseline audio products to explore differences.\n

\n \n
\n } @else {\n
\n \n \n \n \n \n
\n Attributes\n

\n {{ selectedProducts().length }} products compared\n

\n
\n \n\n \n @for (product of selectedProducts(); track product.id) {\n \n }\n \n \n\n \n @for (category of categories; track category.name) {\n \n \n \n \n {{ category.name }}\n \n \n\n \n @for (field of category.fields; track field.key) {\n \n \n \n
\n
\n {{ field.label }}\n @if (field.description) {\n {{ field.description }}\n }\n
\n @if (isRowDiff(field.key) && highlightDiffs()) {\n \n Diff\n \n }\n
\n \n\n \n @for (product of selectedProducts(); track product.id) {\n \n }\n \n }\n \n }\n\n \n \n \n \n\n @for (product of selectedProducts(); track product.id) {\n \n }\n \n \n
\n
\n \n
\n \n {{ product.badge }}\n \n \n \n \n
\n\n \n
\n \n
\n \n {{ product.name }}\n \n
\n \n {{ product.rating }}\n
\n \n {{ product.price }}\n \n
\n
\n\n \n \n @if (addedProductId() === product.id) {\n \n Added to Cart\n } @else {\n \n Add to Cart\n }\n \n
\n
\n
\n {{ specValue(product, field) }}\n
\n
\n
\n Sticky Buy Trigger\n

\n All purchases backed by 30-day money-back guarantee.\n

\n
\n 		\n
\n
\n {{ product.price }}\n {{ product.shipping }}\n
\n \n @if (addedProductId() === product.id) {\n \n Added\n } @else {\n \n Buy Now\n }\n \n
\n
\n
\n }\n \n }\n \n `,\n})\nexport class UiProductComparisonDrawerComponent implements OnInit {\n /** Opens the matrix on first render (dock mode). */\n @Input({ transform: booleanAttribute }) defaultOpen = false\n /** Seeds the \"Highlight Differences Only\" switch. */\n @Input({ transform: booleanAttribute }) defaultHighlightDiffs = false\n /** Products in the comparison. A new array resets the selection to it (React re-seeds on a `products` change). */\n @Input() set products(value: ComparisonProduct[] | null | undefined) {\n this.selectedProducts.set([...(value ?? DEFAULT_COMPARISON_PRODUCTS)])\n }\n @Input() mode: ProductComparisonDrawerMode = 'dock'\n @Input('class') className?: string\n\n @Output() readonly addToCart = new EventEmitter()\n @Output() readonly removeProduct = new EventEmitter()\n @Output() readonly clearAll = new EventEmitter()\n @Output() readonly restoreProducts = new EventEmitter()\n @Output() readonly openChange = new EventEmitter()\n\n readonly isExpanded = signal(false)\n readonly highlightDiffs = signal(false)\n readonly selectedProducts = signal([...DEFAULT_COMPARISON_PRODUCTS])\n readonly addedProductId = signal(null)\n\n /** The catalog preview always lists the full default lineup, as in React. */\n protected readonly catalog = DEFAULT_COMPARISON_PRODUCTS\n protected readonly categories = groupFields(SPEC_FIELDS)\n\n readonly diffCount = computed(() => SPEC_FIELDS.filter((f) => this.isRowDiff(f.key)).length)\n\n protected readonly Check = Check\n protected readonly ChevronDown = ChevronDown\n protected readonly ChevronUp = ChevronUp\n protected readonly GitCompare = GitCompare\n protected readonly Layers = Layers\n protected readonly RotateCcw = RotateCcw\n protected readonly ShoppingCart = ShoppingCart\n protected readonly SlidersHorizontal = SlidersHorizontal\n protected readonly Star = Star\n protected readonly Trash2 = Trash2\n protected readonly X = X\n\n ngOnInit(): void {\n // React seeds its useState once from these props; inputs land after construction.\n this.isExpanded.set(this.defaultOpen || this.mode === 'expanded')\n this.highlightDiffs.set(this.defaultHighlightDiffs)\n }\n\n protected get rootClass(): string {\n return cn(\n 'bg-background text-foreground relative flex w-full flex-col overflow-hidden rounded-xl border',\n this.className,\n )\n }\n\n toggleExpanded(): void {\n const next = !this.isExpanded()\n this.isExpanded.set(next)\n this.openChange.emit(next)\n }\n\n handleRemoveProduct(id: string): void {\n this.selectedProducts.update((prev) => prev.filter((p) => p.id !== id))\n this.removeProduct.emit(id)\n }\n\n handleClearAll(): void {\n this.selectedProducts.set([])\n this.clearAll.emit()\n }\n\n handleRestoreProducts(): void {\n this.selectedProducts.set([...DEFAULT_COMPARISON_PRODUCTS])\n this.restoreProducts.emit()\n }\n\n handleAddToCart(product: ComparisonProduct): void {\n this.addedProductId.set(product.id)\n this.addToCart.emit(product)\n setTimeout(() => {\n this.addedProductId.update((current) => (current === product.id ? null : current))\n }, 1800)\n }\n\n /** Catalog card checkbox: removing emits `removeProduct`, adding does not (as in React). */\n toggleCompare(product: ComparisonProduct): void {\n if (this.isSelected(product)) this.handleRemoveProduct(product.id)\n else this.selectedProducts.update((prev) => [...prev, product])\n }\n\n isSelected(product: ComparisonProduct): boolean {\n return this.selectedProducts().some((p) => p.id === product.id)\n }\n\n /** True when the spec's value differs across the currently selected products. */\n isRowDiff(specKey: keyof ComparisonSpec): boolean {\n const selected = this.selectedProducts()\n if (selected.length <= 1) return false\n const firstVal = selected[0]?.specs[specKey]\n return selected.some((p) => p.specs[specKey] !== firstVal)\n }\n\n specValue(product: ComparisonProduct, field: SpecField): string {\n return product.specs[field.key] || '—'\n }\n\n formatCount(value: number): string {\n return value.toLocaleString()\n }\n\n protected catalogCardClass(product: ComparisonProduct): string {\n return cn(\n 'bg-card hover:border-border group relative flex flex-col justify-between rounded-lg border p-4 shadow-xs transition-colors',\n this.isSelected(product) && 'ring-primary/20 border-primary/40 ring-1',\n )\n }\n\n protected compareCheckClass(product: ComparisonProduct): string {\n return cn(\n 'flex size-4 items-center justify-center rounded border transition-colors',\n this.isSelected(product)\n ? 'border-primary bg-primary text-primary-foreground'\n : 'border-muted-foreground/40 bg-background',\n )\n }\n\n protected rowClass(field: SpecField): string {\n const isDiff = this.isRowDiff(field.key)\n const highlight = this.highlightDiffs()\n return cn(\n 'group/row transition-colors',\n isDiff && highlight ? 'bg-primary/[0.04] dark:bg-primary/[0.08]' : 'hover:bg-muted/20',\n !isDiff && highlight ? 'opacity-40' : 'opacity-100',\n )\n }\n\n protected valueClass(field: SpecField): string {\n const isDiff = this.isRowDiff(field.key)\n return cn({\n 'font-semibold tabular-nums': field.key === 'price' || field.key === 'weight' || field.key === 'batteryLife',\n 'text-foreground font-medium': isDiff,\n 'text-muted-foreground': !isDiff,\n })\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/product-comparison-drawer/product-comparison-drawer.component.ts" }, { "path": "packages/registry-angular/blocks/product-comparison-drawer/index.ts", "content": "export {\n UiProductComparisonDrawerComponent,\n DEFAULT_COMPARISON_PRODUCTS,\n SPEC_FIELDS,\n type ComparisonProduct,\n type ComparisonSpec,\n type ProductComparisonDrawerMode,\n type SpecField,\n} from './product-comparison-drawer.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/product-comparison-drawer/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/separator.json", "https://uipkge.dev/r/angular/switch.json" ], "description": "Floating multi-product specification comparison bar with attribute diff highlighting, expanded full-matrix drawer comparison, and sticky buy triggers.", "categories": [ "commerce", "ecommerce" ] }