{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "cart-drawer", "title": "Cart Drawer", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/cart-drawer/cart-drawer.component.ts", "content": "import { Component, EventEmitter, Input, Output, type OnInit, signal, ChangeDetectionStrategy } from '@angular/core'\nimport {\n Leaf,\n Lock,\n LucideAngularModule,\n Minus,\n Plus,\n RotateCcw,\n ShieldCheck,\n ShoppingBag,\n Tag,\n Trash2,\n Truck,\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 { UiInputComponent } from '@/ui/input/input.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport interface CartItem {\n id: string\n name: string\n variant: string\n price: number\n originalPrice?: number\n qty: number\n inStock?: boolean\n image: string\n}\n\nexport type CartDrawerVariant = 'drawer' | 'page'\n\nexport interface CartCheckoutEvent {\n items: CartItem[]\n total: number\n}\n\nexport interface CartQuantityEvent {\n id: string\n qty: number\n}\n\nexport const DEFAULT_CART_ITEMS: CartItem[] = [\n {\n id: 'item-1',\n name: 'Aero Minimalist Runner',\n variant: 'Size: 10.5 · Color: Matte Black',\n price: 120,\n originalPrice: 140,\n qty: 1,\n inStock: true,\n image: 'https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=300&auto=format&fit=crop&q=80',\n },\n {\n id: 'item-2',\n name: 'Technical Shell Parka',\n variant: 'Size: L · Color: Mineral Gray',\n price: 95,\n originalPrice: 110,\n qty: 1,\n inStock: true,\n image: 'https://images.unsplash.com/photo-1591047139829-d91aecb6caea?w=300&auto=format&fit=crop&q=80',\n },\n {\n id: 'item-3',\n name: 'Minimalist Leather Cardholder',\n variant: 'Size: Slim · Color: Saddle Brown',\n price: 70,\n originalPrice: 85,\n qty: 1,\n inStock: true,\n image: 'https://images.unsplash.com/photo-1627123424574-724758594e93?w=300&auto=format&fit=crop&q=80',\n },\n]\n\nconst copyItems = (items: CartItem[]): CartItem[] => items.map((item) => ({ ...item }))\n\n/**\n * CartDrawer -- the React block, 1:1: a slide-over cart (`variant=\"drawer\"`) or a full cart\n * page (`variant=\"page\"`) with a free-shipping meter, quantity steppers, promo codes\n * (SUMMER20 / SAVE20 = $20, SAVE10 = $10, anything else = $15), an order summary with shipping\n * and tax, trust badges and an empty state whose button restores the sample items.\n * Emits `checkout`, `continueShopping`, `close`, `updateQuantity`, `removeItem`,\n * `applyPromo` and `removePromo` where React calls the matching `on*` prop.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-cart-drawer, [ui-cart-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: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiInputComponent,\n UiProgressComponent,\n UiSeparatorComponent,\n ],\n template: `\n
\n @if (variant === 'drawer') {\n \n \n \n
\n
\n

Shopping Cart

\n @if (totalItemsCount > 0) {\n {{ totalItemsCount }}\n }\n
\n \n
\n\n \n @if (cartItems().length > 0) {\n
\n
\n @if (isFreeShippingUnlocked) {\n \n \n You've unlocked Free Express Shipping!\n \n } @else {\n \n 🎉 You're\n {{\n formatCurrency(amountAwayFromFreeShipping)\n }}\n away from Free Shipping!\n \n }\n {{ shippingProgress }}%\n
\n \n
\n }\n\n \n
\n @if (cartItems().length === 0) {\n
\n
\n \n
\n

Your cart is empty

\n

\n Looks like you haven't added any products to your cart yet. Explore our latest items!\n

\n \n
\n } @else {\n
\n
    \n @for (item of cartItems(); track item.id) {\n
  • \n \n \n
\n\n
\n
\n
\n

{{ item.name }}

\n \n \n \n
\n

{{ item.variant }}

\n
\n \n In stock\n
\n
\n\n
\n
\n \n \n \n {{ item.qty }}\n \n \n \n
\n\n
\n @if (item.originalPrice) {\n {{\n formatCurrency(item.originalPrice * item.qty)\n }}\n }\n {{\n formatCurrency(item.price * item.qty)\n }}\n
\n
\n
\n \n }\n \n\n \n\n \n
\n @if (appliedPromo()) {\n \n
\n \n {{ appliedPromo() }}\n -{{ formatCurrency(promoDiscount()) }}\n
\n \n \n \n
\n } @else {\n
\n \n \n Apply\n \n
\n }\n @if (promoSuccess()) {\n

{{ promoSuccess() }}

\n }\n @if (promoError()) {\n

{{ promoError() }}

\n }\n
\n
\n }\n
\n\n \n @if (cartItems().length > 0) {\n
\n
\n
\n Subtotal\n {{ formatCurrency(subtotal) }}\n
\n\n @if (promoDiscount() > 0) {\n
\n Coupon ({{ appliedPromo() }})\n -{{ formatCurrency(promoDiscount()) }}\n
\n }\n\n
\n Estimated Shipping\n @if (shippingFee === 0) {\n Free\n } @else {\n {{ formatCurrency(shippingFee) }}\n }\n
\n\n
\n Estimated Tax\n {{ formatCurrency(estimatedTax) }}\n
\n\n \n\n
\n Total\n {{ formatCurrency(total) }}\n
\n
\n\n
\n \n \n Proceed to Checkout\n \n\n \n Continue Shopping\n \n
\n\n \n \n
\n \n 30-day returns\n
\n
\n \n 256-bit secure\n
\n
\n \n Carbon neutral\n
\n
\n \n }\n \n } @else {\n \n
\n \n
\n
\n

Shopping Cart

\n

\n Review your selected items and calculate shipping before checkout.\n

\n
\n @if (totalItemsCount > 0) {\n {{ totalItemsCount }} items in cart\n }\n
\n\n \n @if (cartItems().length > 0) {\n
\n
\n
\n @if (isFreeShippingUnlocked) {\n \n \n You've unlocked Free Express Shipping on this order!\n \n } @else {\n \n 🎉 You're\n {{\n formatCurrency(amountAwayFromFreeShipping)\n }}\n away from Free Shipping!\n \n }\n
\n {{ shippingProgress }}% completed\n
\n \n
\n }\n\n \n @if (cartItems().length === 0) {\n \n
\n \n
\n

Your cart is currently empty

\n

\n Before you proceed to checkout you must add some products to your shopping cart.\n

\n \n
\n } @else {\n \n
\n \n
\n
\n @for (item of cartItems(); track item.id) {\n
\n
\n \n \n
\n
\n

{{ item.name }}

\n

{{ item.variant }}

\n
\n \n In stock\n · {{ formatCurrency(item.price) }} each\n
\n
\n
\n\n
\n
\n \n \n \n {{ item.qty }}\n \n \n \n
\n\n
\n @if (item.originalPrice) {\n {{\n formatCurrency(item.originalPrice * item.qty)\n }}\n }\n {{\n formatCurrency(item.price * item.qty)\n }}\n
\n\n \n \n \n
\n
\n }\n
\n\n \n \n
\n
\n \n
\n
\n

Free 30-Day Returns

\n

Hassle-free return policy

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

256-Bit SSL Security

\n

Bank-grade data encryption

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

Carbon Neutral

\n

Offset delivery emissions

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

Order Summary

\n\n \n
\n \n @if (appliedPromo()) {\n \n
\n \n {{ appliedPromo() }}\n -{{ formatCurrency(promoDiscount()) }}\n
\n \n \n \n
\n } @else {\n
\n \n \n Apply\n \n
\n }\n
\n\n \n\n \n
\n
\n Subtotal\n {{ formatCurrency(subtotal) }}\n
\n\n @if (promoDiscount() > 0) {\n
\n Coupon ({{ appliedPromo() }})\n -{{ formatCurrency(promoDiscount()) }}\n
\n }\n\n
\n Estimated Shipping\n @if (shippingFee === 0) {\n Free\n } @else {\n {{ formatCurrency(shippingFee) }}\n }\n
\n\n
\n Estimated Tax (8%)\n {{ formatCurrency(estimatedTax) }}\n
\n\n \n\n \n Total\n {{ formatCurrency(total) }}\n
\n
\n\n \n \n Proceed to Checkout\n \n\n \n Continue Shopping\n \n \n \n \n }\n \n }\n \n `,\n})\nexport class UiCartDrawerComponent implements OnInit {\n @Input() variant: CartDrawerVariant = 'drawer'\n /** Line items. A new array resets the cart to it (React re-seeds on an `items` change). */\n @Input() set items(value: CartItem[] | null | undefined) {\n this.cartItems.set(copyItems(value ?? DEFAULT_CART_ITEMS))\n }\n @Input() currency = 'USD'\n @Input() freeShippingThreshold = 300\n @Input() taxRate = 0.08\n /** Seeds the applied coupon once (a $20 discount), like React's initial state. */\n @Input() initialPromoCode = ''\n @Input('class') className?: string\n\n @Output() readonly checkout = new EventEmitter()\n @Output() readonly continueShopping = new EventEmitter()\n @Output() readonly close = new EventEmitter()\n @Output() readonly updateQuantity = new EventEmitter()\n @Output() readonly removeItem = new EventEmitter()\n @Output() readonly applyPromo = new EventEmitter()\n @Output() readonly removePromo = new EventEmitter()\n\n readonly cartItems = signal(copyItems(DEFAULT_CART_ITEMS))\n readonly promoCodeInput = signal('')\n readonly appliedPromo = signal('')\n readonly promoDiscount = signal(0)\n readonly promoError = signal('')\n readonly promoSuccess = signal('')\n\n protected readonly Leaf = Leaf\n protected readonly Lock = Lock\n protected readonly Minus = Minus\n protected readonly Plus = Plus\n protected readonly RotateCcw = RotateCcw\n protected readonly ShieldCheck = ShieldCheck\n protected readonly ShoppingBag = ShoppingBag\n protected readonly Tag = Tag\n protected readonly Trash2 = Trash2\n protected readonly Truck = Truck\n protected readonly X = X\n\n ngOnInit(): void {\n // React seeds its useState once from `initialPromoCode`; inputs land after construction.\n this.appliedPromo.set(this.initialPromoCode)\n this.promoDiscount.set(this.initialPromoCode ? 20 : 0)\n }\n\n protected get rootClass(): string {\n return cn('w-full', this.className)\n }\n\n get totalItemsCount(): number {\n return this.cartItems().reduce((acc, item) => acc + item.qty, 0)\n }\n\n get subtotal(): number {\n return this.cartItems().reduce((acc, item) => acc + item.price * item.qty, 0)\n }\n\n get isFreeShippingUnlocked(): boolean {\n return this.subtotal >= this.freeShippingThreshold && this.cartItems().length > 0\n }\n\n get amountAwayFromFreeShipping(): number {\n return Math.max(0, this.freeShippingThreshold - this.subtotal)\n }\n\n get shippingProgress(): number {\n if (this.cartItems().length === 0) return 0\n return Math.min(100, Math.round((this.subtotal / this.freeShippingThreshold) * 100))\n }\n\n get shippingFee(): number {\n if (this.cartItems().length === 0) return 0\n return this.isFreeShippingUnlocked ? 0 : 15\n }\n\n get discountedSubtotal(): number {\n return Math.max(0, this.subtotal - this.promoDiscount())\n }\n\n get estimatedTax(): number {\n if (this.cartItems().length === 0) return 0\n return Number((this.discountedSubtotal * this.taxRate).toFixed(2))\n }\n\n get total(): number {\n if (this.cartItems().length === 0) return 0\n return Number((this.discountedSubtotal + this.shippingFee + this.estimatedTax).toFixed(2))\n }\n\n formatCurrency(amount: number): string {\n try {\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: this.currency,\n minimumFractionDigits: 2,\n }).format(amount)\n } catch {\n return `$${amount.toFixed(2)}`\n }\n }\n\n stepQuantity(id: string, delta: number): void {\n const item = this.cartItems().find((i) => i.id === id)\n if (!item) return\n const newQty = item.qty + delta\n if (newQty <= 0) {\n this.cartItems.update((prev) => prev.filter((i) => i.id !== id))\n this.removeItem.emit(id)\n return\n }\n this.cartItems.update((prev) => prev.map((i) => (i.id === id ? { ...i, qty: newQty } : i)))\n this.updateQuantity.emit({ id, qty: newQty })\n }\n\n dropItem(id: string): void {\n this.cartItems.update((prev) => prev.filter((item) => item.id !== id))\n this.removeItem.emit(id)\n }\n\n onPromoEnter(event: Event): void {\n event.preventDefault()\n this.handleApplyPromo()\n }\n\n handleApplyPromo(): void {\n this.promoError.set('')\n this.promoSuccess.set('')\n const trimmed = this.promoCodeInput().trim().toUpperCase()\n if (!trimmed) return\n\n if (trimmed === 'SUMMER20' || trimmed === 'SAVE20') {\n this.appliedPromo.set(trimmed)\n this.promoDiscount.set(20)\n this.promoSuccess.set('$20.00 coupon discount applied!')\n } else if (trimmed === 'SAVE10') {\n this.appliedPromo.set(trimmed)\n this.promoDiscount.set(10)\n this.promoSuccess.set('$10.00 coupon discount applied!')\n } else {\n this.appliedPromo.set(trimmed)\n this.promoDiscount.set(15)\n this.promoSuccess.set('Promo code applied!')\n }\n this.promoCodeInput.set('')\n this.applyPromo.emit(trimmed)\n }\n\n handleRemovePromo(): void {\n this.appliedPromo.set('')\n this.promoDiscount.set(0)\n this.promoSuccess.set('')\n this.promoError.set('')\n this.removePromo.emit()\n }\n\n handleCheckout(): void {\n this.checkout.emit({ items: this.cartItems(), total: this.total })\n }\n\n resetCart(): void {\n this.cartItems.set(copyItems(DEFAULT_CART_ITEMS))\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/cart-drawer/cart-drawer.component.ts" }, { "path": "packages/registry-angular/blocks/cart-drawer/index.ts", "content": "export {\n UiCartDrawerComponent,\n DEFAULT_CART_ITEMS,\n type CartItem,\n type CartDrawerVariant,\n type CartCheckoutEvent,\n type CartQuantityEvent,\n} from './cart-drawer.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/cart-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/input.json", "https://uipkge.dev/r/angular/progress.json", "https://uipkge.dev/r/angular/separator.json" ], "description": "Shopping cart drawer & full cart page view featuring free shipping progress meter, interactive line items with quantity steppers and variant tags, promo code application, order summary with tax & shipping calculation, trust badges, and empty state.", "categories": [ "commerce", "ecommerce" ] }