{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "packing-slip-generator", "title": "Packing Slip Generator", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/packing-slip-generator/packing-slip-generator.component.ts", "content": "// Shopify / ShipStation style warehouse order packing slip with an interactive picker\n// verification checklist: warehouse header, ship-to / origin / carrier routing grid, picker\n// pack-station ribbon with a simulated Code-128 barcode, itemized pick list table with packed\n// checkboxes, carton specs, returns notice and a QC inspector stamp. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n Box,\n Building2,\n Check,\n CheckCheck,\n CheckCircle2,\n Clock,\n Copy,\n FileDown,\n LucideAngularModule,\n MapPin,\n Printer,\n QrCode,\n RotateCcw,\n Scan,\n ShieldCheck,\n Tag,\n Truck,\n User,\n Warehouse,\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 { UiCheckboxComponent } from '@/ui/checkbox/checkbox.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableFooterComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\n\nexport interface PackingSlipItem {\n id: string\n sku: string\n barcode: string\n name: string\n variant: string\n location: string\n qtyOrdered: number\n qtyPacked: number\n weightLbs: number\n notes?: string\n initialPacked?: boolean\n}\n\nexport interface PackingSlipGeneratorInputs {\n packingSlipNo?: string\n orderNo?: string\n carrier?: string\n carrierService?: string\n trackingNo?: string\n orderDate?: string\n shipDate?: string\n warehouseName?: string\n warehouseFacility?: string\n warehouseAddress?: string\n warehousePhone?: string\n warehouseEmail?: string\n customerName?: string\n customerCompany?: string\n customerAddress?: string\n customerPhone?: string\n customerEmail?: string\n deliveryNotes?: string\n pickerName?: string\n pickerId?: string\n packStation?: string\n shift?: string\n boxSize?: string\n dunnageType?: string\n qcInspector?: string\n qcStamp?: string\n qcTimestamp?: string\n items?: PackingSlipItem[]\n showActions?: boolean\n initialPackedAll?: boolean\n}\n\nconst defaultItems: PackingSlipItem[] = [\n {\n id: 'item-1',\n sku: '#SKU-84920',\n barcode: '849201928410',\n name: 'Aero Minimalist Runner',\n variant: 'Size 10.5 · Matte Black',\n location: 'Aisle 04 · Rack B · Shelf 02',\n qtyOrdered: 1,\n qtyPacked: 1,\n weightLbs: 1.8,\n notes: 'Eco-Knit Upper / EVA Cushioning Sole',\n initialPacked: true,\n },\n {\n id: 'item-2',\n sku: '#SKU-77219',\n barcode: '772198421093',\n name: 'HydroShield Waterproof Shell Jacket',\n variant: \"Men's M · Alpine Green\",\n location: 'Aisle 02 · Rack D · Shelf 01',\n qtyOrdered: 1,\n qtyPacked: 1,\n weightLbs: 1.6,\n notes: '3-Layer DWR Membrane / Sealed Seams',\n initialPacked: true,\n },\n {\n id: 'item-3',\n sku: '#SKU-31904',\n barcode: '319045812903',\n name: 'Ergonomic Trail Crew Socks (3-Pack)',\n variant: 'Charcoal / Grey · L',\n location: 'Aisle 08 · Rack A · Shelf 04',\n qtyOrdered: 1,\n qtyPacked: 1,\n weightLbs: 1.4,\n notes: 'Merino Wool Blend / Seamless Toe',\n initialPacked: false,\n },\n]\n\nfunction buildPackedMap(items: PackingSlipItem[], packedAll: boolean): Record {\n const map: Record = {}\n for (const item of items) map[item.id] = packedAll ? true : (item.initialPacked ?? false)\n return map\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-packing-slip-generator, [ui-packing-slip-generator]',\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 UiCheckboxComponent,\n UiSeparatorComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableFooterComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n
\n \n @if (showActions()) {\n \n
\n
\n {{ packingSlipNo() }}\n \n \n {{ orderNo() }}\n \n
\n\n \n\n
\n \n {{ carrierService() }}\n
\n\n \n @if (isAllPacked()) {\n \n } @else {\n \n }\n {{\n isAllPacked()\n ? 'All Items Verified'\n : verifiedItemsCount() + '/' + effectiveItems().length + ' Packed (' + progressPercentage() + '%)'\n }}\n \n
\n\n
\n \n @if (isAllPacked()) {\n \n } @else {\n \n }\n {{ isAllPacked() ? 'Reset Checklist' : 'Verify All' }}\n \n\n \n \n {{ isDownloading() ? 'Generating PDF...' : 'Download PDF' }}\n \n\n \n
\n
\n }\n\n \n \n \n
\n
\n
\n \n \n
\n
\n

\n {{ warehouseName() }}\n

\n

{{ warehouseFacility() }}

\n
\n
\n
\n

{{ warehouseAddress() }}

\n

{{ warehousePhone() }} · {{ warehouseEmail() }}

\n
\n
\n\n
\n \n COMMERCIAL PACKING SLIP\n
\n
\n
\n Packing Slip Ref:\n {{ packingSlipNo() }}\n
\n
\n Order Reference:\n {{ orderNo() }}\n
\n
\n Order Date:\n {{ orderDate() }}\n
\n
\n Ship Date:\n {{ shipDate() }}\n
\n
\n
\n \n\n \n\n \n
\n
\n
\n \n Ship-To Recipient\n
\n
\n

{{ customerName() }}

\n

{{ customerCompany() }}

\n

{{ customerAddress() }}

\n

{{ customerPhone() }}

\n @if (deliveryNotes()) {\n
\n

Delivery Note:

\n

{{ deliveryNotes() }}

\n
\n }\n
\n
\n\n
\n
\n \n Fulfillment Origin\n
\n
\n

{{ warehouseName() }}

\n

Outbound Logistics Dock #12

\n

{{ warehouseAddress() }}

\n

Support: {{ warehousePhone() }}

\n
\n \n Direct EDI Dispatch Cleared\n
\n
\n
\n\n
\n
\n \n Carrier & Service\n
\n
\n
\n

{{ carrierService() }}

\n

Standard Air Parcel · Guaranteed

\n
\n
\n Tracking Number:\n
\n {{ trackingNo() }}\n \n @if (copiedTracking()) {\n \n } @else {\n \n }\n \n
\n
\n \n Billing: Prepaid\n Declared: $349.00\n
\n
\n
\n \n\n \n \n
\n
\n
\n \n Picker & Station\n
\n

\n {{ pickerName() }}\n ({{ pickerId() }})\n

\n

{{ packStation() }} · {{ shift() }}

\n
\n\n \n\n
\n
\n \n Packing Progress\n
\n
\n
\n
\n
\n \n {{ verifiedItemsCount() }}/{{ effectiveItems().length }} Verified\n \n
\n
\n \n\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n

*{{ barcodeRef() }}*

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

Itemized Pick & Pack Checklist

\n \n {{ effectiveItems().length }} Line Items\n \n
\n Check items upon bin scan and physical carton packing\n
\n\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n @for (item of effectiveItems(); track item.id) {\n \n \n \n \n \n \n \n \n }\n \n \n \n \n \n \n \n \n
PackedBin / LocationSKU & BarcodeItem Name & Variant DetailsQty Pick/OrdWeight
\n
\n \n
\n 		\n \n \n {{ item.location }}\n \n \n
\n

{{ item.sku }}

\n

UPC: {{ item.barcode }}

\n
\n 		\n
\n

{{ item.name }}

\n

{{ item.variant }}

\n @if (item.notes) {\n

{{ item.notes }}

\n }\n
\n 		\n \n {{\n packedState()[item.id] ? item.qtyPacked : 0\n }}\n /\n {{ item.qtyOrdered }}\n \n \n \n {{ item.weightLbs.toFixed(1) }} lbs\n \n
\n Order Package Totals ({{ effectiveItems().length }} Distinct SKUs)\n \n {{ totalPackedUnits() }} / {{ totalOrderedUnits() }} Units\n \n {{ totalWeightLabel() }}\n
\n
\n
\n
\n\n \n
\n
\n
\n \n Carton Specifications\n
\n
\n
\n Packing Box:\n {{ boxSize() }}\n
\n
\n Total Units:\n {{ totalOrderedUnits() }} items\n
\n
\n Gross Weight:\n {{ totalWeightLabel() }}\n
\n
\n Void Fill / Dunnage:\n {{ dunnageType() }}\n
\n
\n
\n\n
\n
\n \n Hassle-Free Returns\n
\n
\n

Need to make an exchange or return?

\n

\n Scan the QR code or visit apexretail.com/returns within\n 30 days.\n

\n

\n Please include this packing slip with items in original condition.\n

\n
\n
\n\n
\n \n
\n \n {{ qcStamp() }}\n
\n

AUDITED & SEALED

\n

Inspector: {{ qcInspector() }}

\n

{{ qcTimestamp() }}

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

Generated by Apex Logistics WMS v4.8.2 · Station ID: {{ packStation() }}

\n

DOC ID: PS-2026-849201-US-04 · Barcode Validated

\n \n \n \n `,\n})\nexport class UiPackingSlipGeneratorComponent {\n protected readonly Box = Box\n protected readonly Building2 = Building2\n protected readonly Check = Check\n protected readonly CheckCheck = CheckCheck\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Clock = Clock\n protected readonly Copy = Copy\n protected readonly FileDown = FileDown\n protected readonly MapPin = MapPin\n protected readonly Printer = Printer\n protected readonly QrCode = QrCode\n protected readonly RotateCcw = RotateCcw\n protected readonly Scan = Scan\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Tag = Tag\n protected readonly Truck = Truck\n protected readonly User = User\n protected readonly Warehouse = Warehouse\n protected readonly Zap = Zap\n\n readonly packingSlipNo = signal('#PS-849201')\n readonly orderNo = signal('#ORD-92841')\n readonly carrier = signal('FedEx')\n readonly carrierService = signal('FedEx 2-Day Air')\n readonly trackingNo = signal('7849 2018 9284 1029')\n readonly orderDate = signal('Aug 21, 2026')\n readonly shipDate = signal('Aug 21, 2026')\n readonly warehouseName = signal('Apex Retail Warehouse #04')\n readonly warehouseFacility = signal('West Coast Omnichannel Hub')\n readonly warehouseAddress = signal('1040 North Industry Pkwy, Reno, NV 89502')\n readonly warehousePhone = signal('+1 (800) 555-0199')\n readonly warehouseEmail = signal('fulfillment-reno4@apexretail.io')\n readonly customerName = signal('Eleanor Vance')\n readonly customerCompany = signal('Vance Design Studios · Suite 400')\n readonly customerAddress = signal('742 Evergreen Terrace, Springfield, OR 97477')\n readonly customerPhone = signal('+1 (555) 839-2019')\n readonly customerEmail = signal('eleanor.vance@vancestudios.design')\n readonly deliveryNotes = signal('Gate Code: #4829. Leave at covered front porch if unavailable. Do not bend.')\n readonly pickerName = signal('Marcus Vance')\n readonly pickerId = signal('#EMP-4821')\n readonly packStation = signal('Pack Station #4')\n readonly shift = signal('Morning Shift · Bay Alpha')\n readonly boxSize = signal('Box #3 · 14\" × 10\" × 6\"')\n readonly dunnageType = signal('Recycled Kraft Void Fill (1.2 oz)')\n readonly qcInspector = signal('Elena Rostova (#QC-89)')\n readonly qcStamp = signal('QC Passed · Station #4')\n readonly qcTimestamp = signal('2026-08-21 09:42 PST')\n readonly showActions = signal(true)\n readonly initialPackedAll = signal(false)\n\n private readonly itemsInput = signal(undefined)\n\n @Input('packingSlipNo') set packingSlipNoAttr(v: string | undefined) {\n if (v !== undefined) this.packingSlipNo.set(v)\n }\n @Input('orderNo') set orderNoAttr(v: string | undefined) {\n if (v !== undefined) this.orderNo.set(v)\n }\n @Input('carrier') set carrierAttr(v: string | undefined) {\n if (v !== undefined) this.carrier.set(v)\n }\n @Input('carrierService') set carrierServiceAttr(v: string | undefined) {\n if (v !== undefined) this.carrierService.set(v)\n }\n @Input('trackingNo') set trackingNoAttr(v: string | undefined) {\n if (v !== undefined) this.trackingNo.set(v)\n }\n @Input('orderDate') set orderDateAttr(v: string | undefined) {\n if (v !== undefined) this.orderDate.set(v)\n }\n @Input('shipDate') set shipDateAttr(v: string | undefined) {\n if (v !== undefined) this.shipDate.set(v)\n }\n @Input('warehouseName') set warehouseNameAttr(v: string | undefined) {\n if (v !== undefined) this.warehouseName.set(v)\n }\n @Input('warehouseFacility') set warehouseFacilityAttr(v: string | undefined) {\n if (v !== undefined) this.warehouseFacility.set(v)\n }\n @Input('warehouseAddress') set warehouseAddressAttr(v: string | undefined) {\n if (v !== undefined) this.warehouseAddress.set(v)\n }\n @Input('warehousePhone') set warehousePhoneAttr(v: string | undefined) {\n if (v !== undefined) this.warehousePhone.set(v)\n }\n @Input('warehouseEmail') set warehouseEmailAttr(v: string | undefined) {\n if (v !== undefined) this.warehouseEmail.set(v)\n }\n @Input('customerName') set customerNameAttr(v: string | undefined) {\n if (v !== undefined) this.customerName.set(v)\n }\n @Input('customerCompany') set customerCompanyAttr(v: string | undefined) {\n if (v !== undefined) this.customerCompany.set(v)\n }\n @Input('customerAddress') set customerAddressAttr(v: string | undefined) {\n if (v !== undefined) this.customerAddress.set(v)\n }\n @Input('customerPhone') set customerPhoneAttr(v: string | undefined) {\n if (v !== undefined) this.customerPhone.set(v)\n }\n @Input('customerEmail') set customerEmailAttr(v: string | undefined) {\n if (v !== undefined) this.customerEmail.set(v)\n }\n @Input('deliveryNotes') set deliveryNotesAttr(v: string | undefined) {\n if (v !== undefined) this.deliveryNotes.set(v)\n }\n @Input('pickerName') set pickerNameAttr(v: string | undefined) {\n if (v !== undefined) this.pickerName.set(v)\n }\n @Input('pickerId') set pickerIdAttr(v: string | undefined) {\n if (v !== undefined) this.pickerId.set(v)\n }\n @Input('packStation') set packStationAttr(v: string | undefined) {\n if (v !== undefined) this.packStation.set(v)\n }\n @Input('shift') set shiftAttr(v: string | undefined) {\n if (v !== undefined) this.shift.set(v)\n }\n @Input('boxSize') set boxSizeAttr(v: string | undefined) {\n if (v !== undefined) this.boxSize.set(v)\n }\n @Input('dunnageType') set dunnageAttr(v: string | undefined) {\n if (v !== undefined) this.dunnageType.set(v)\n }\n @Input('qcInspector') set qcInspectorAttr(v: string | undefined) {\n if (v !== undefined) this.qcInspector.set(v)\n }\n @Input('qcStamp') set qcStampAttr(v: string | undefined) {\n if (v !== undefined) this.qcStamp.set(v)\n }\n @Input('qcTimestamp') set qcTimestampAttr(v: string | undefined) {\n if (v !== undefined) this.qcTimestamp.set(v)\n }\n @Input('showActions') set showActionsAttr(v: boolean | undefined) {\n if (v !== undefined) this.showActions.set(!!v)\n }\n @Input('initialPackedAll') set initialPackedAllAttr(v: boolean | undefined) {\n if (v !== undefined) {\n this.initialPackedAll.set(!!v)\n this.packedState.set(buildPackedMap(this.effectiveItems(), !!v))\n }\n }\n @Input('items') set itemsAttr(v: PackingSlipItem[] | undefined) {\n if (v !== undefined) {\n this.itemsInput.set([...v])\n this.packedState.set(buildPackedMap(v, this.initialPackedAll()))\n }\n }\n @Input('class') className?: string\n\n readonly packedState = signal>(buildPackedMap(defaultItems, false))\n readonly copiedTracking = signal(false)\n readonly isPrinting = signal(false)\n readonly isDownloading = signal(false)\n\n readonly effectiveItems = computed(() => this.itemsInput() ?? defaultItems)\n\n readonly totalOrderedUnits = computed(() => this.effectiveItems().reduce((sum, item) => sum + item.qtyOrdered, 0))\n readonly totalPackedUnits = computed(() =>\n this.effectiveItems().reduce((sum, item) => sum + (this.packedState()[item.id] ? item.qtyPacked : 0), 0),\n )\n readonly totalWeight = computed(() => this.effectiveItems().reduce((sum, item) => sum + item.weightLbs, 0))\n readonly totalWeightLabel = computed(() => `${this.totalWeight().toFixed(1)} lbs`)\n readonly isAllPacked = computed(() => this.effectiveItems().every((item) => this.packedState()[item.id]))\n readonly verifiedItemsCount = computed(\n () => this.effectiveItems().filter((item) => this.packedState()[item.id]).length,\n )\n readonly progressPercentage = computed(() => {\n if (this.effectiveItems().length === 0) return 0\n return Math.round((this.verifiedItemsCount() / this.effectiveItems().length) * 100)\n })\n readonly barcodeRef = computed(() => this.orderNo().replace('#', ''))\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n rowClass(id: string): string {\n return cn(\n 'cursor-pointer transition-colors select-none',\n this.packedState()[id] ? 'bg-primary/[0.02] dark:bg-primary/[0.04]' : 'hover:bg-muted/20',\n )\n }\n\n itemNameClass(id: string): string {\n return cn('text-foreground text-xs font-semibold', this.packedState()[id] && 'text-foreground/90')\n }\n\n toggleItemPacked(id: string): void {\n this.packedState.update((prev) => ({ ...prev, [id]: !prev[id] }))\n }\n\n setItemPacked(id: string, value: boolean | 'indeterminate'): void {\n this.packedState.update((prev) => ({ ...prev, [id]: value === true }))\n }\n\n markAllPacked(): void {\n const next: Record = {}\n for (const item of this.effectiveItems()) next[item.id] = true\n this.packedState.set(next)\n }\n\n resetPackingChecklist(): void {\n const next: Record = {}\n for (const item of this.effectiveItems()) next[item.id] = false\n this.packedState.set(next)\n }\n\n async copyTrackingNumber(): Promise {\n try {\n await navigator.clipboard.writeText(this.trackingNo())\n this.copiedTracking.set(true)\n setTimeout(() => this.copiedTracking.set(false), 2000)\n } catch {\n // Clipboard unavailable (non-secure context): leave the icon unchanged.\n }\n }\n\n handlePrint(): void {\n this.isPrinting.set(true)\n if (typeof window !== 'undefined') window.print()\n setTimeout(() => this.isPrinting.set(false), 1000)\n }\n\n handleDownloadPdf(): void {\n this.isDownloading.set(true)\n setTimeout(() => this.isDownloading.set(false), 1500)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/packing-slip-generator/packing-slip-generator.component.ts" }, { "path": "packages/registry-angular/blocks/packing-slip-generator/index.ts", "content": "export {\n UiPackingSlipGeneratorComponent,\n type PackingSlipItem,\n type PackingSlipGeneratorInputs,\n} from './packing-slip-generator.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/packing-slip-generator/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/checkbox.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/table.json" ], "description": "Shopify and ShipStation style warehouse order packing slip and picker verification checklist with warehouse header, customer ship-to routing, picker pack station barcode scan identifier, itemized pick list table with interactive packed checkboxes, bin location tags, SKU barcodes, weight calculations, and quality control inspector stamp.", "categories": [ "logistics", "app", "ecommerce", "documents" ] }