{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "shipping-label-printer", "title": "Shipping Label Printer", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/shipping-label-printer/shipping-label-printer.component.ts", "content": "// Multi-carrier shipping label creator and dispatch station: live carrier rate cards,\n// digital scale sync with dimensional weight, signature + insurance accessorials, a priced\n// dispatch summary, and a realistic 4×6 thermal label preview with ZPL payload export.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, computed, signal } from '@angular/core'\nimport {\n Barcode,\n Check,\n Copy,\n Download,\n FileCode2,\n LucideAngularModule,\n Package,\n Printer,\n RefreshCw,\n Scale,\n ShieldCheck,\n Truck,\n} 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 { UiRadioGroupComponent, UiRadioGroupItemComponent } from '@/ui/radio-group/radio-group.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport { UiSwitchComponent } from '@/ui/switch/switch.component'\n\nexport type CarrierId = 'fedex' | 'ups' | 'usps' | 'dhl'\n\nexport interface CarrierOption {\n id: CarrierId\n name: string\n code: string\n serviceBanner: string\n rate: number\n transitDays: string\n badge: string\n badgeVariant: 'default' | 'secondary' | 'outline' | 'success'\n trackingNumber: string\n barcodeString: string\n routingZip: string\n routingZone: string\n hubCode: string\n}\n\nconst CARRIERS: Record = {\n fedex: {\n id: 'fedex',\n name: 'FedEx Express Priority',\n code: 'FEDEX',\n serviceBanner: 'FEDEX 2DAY AIR · DELIVER BY 10:30 AM',\n rate: 24.5,\n transitDays: 'Next Business Day (10:30 AM)',\n badge: 'Fastest',\n badgeVariant: 'default',\n trackingNumber: '#TRK-9284-1029-4810-US',\n barcodeString: '*4209110192841029481029*',\n routingZip: 'PRIORITY 91101',\n routingZone: 'ZONE 8 · ROUTE W-04',\n hubCode: 'MEM (Memphis SuperHub)',\n },\n ups: {\n id: 'ups',\n name: 'UPS Ground',\n code: 'UPS',\n serviceBanner: 'UPS GROUND · GUARANTEED TRACKED',\n rate: 11.2,\n transitDays: '2-3 Business Days',\n badge: 'Best Value',\n badgeVariant: 'secondary',\n trackingNumber: '#1Z-9999-9992-8410-2948',\n barcodeString: '*420911011Z99999992841029*',\n routingZip: 'GROUND 91101',\n routingZone: 'ZONE 4 · ROUTE CA-08',\n hubCode: 'ONT (Ontario West Hub)',\n },\n usps: {\n id: 'usps',\n name: 'USPS Priority Mail',\n code: 'USPS',\n serviceBanner: 'USPS PRIORITY MAIL 2-DAY · COMMERCIAL BASE',\n rate: 9.85,\n transitDays: '1-3 Business Days',\n badge: 'Standard',\n badgeVariant: 'outline',\n trackingNumber: '#9400-1118-9922-3849-1029',\n barcodeString: '*4209110194001118992238*',\n routingZip: 'PRIORITY 91101',\n routingZone: 'ZONE 8 · ROUTE P-12',\n hubCode: 'LAX (Los Angeles P&DC)',\n },\n dhl: {\n id: 'dhl',\n name: 'DHL Express',\n code: 'DHL',\n serviceBanner: 'DHL EXPRESS WORLDWIDE · TIME DEFINITE',\n rate: 38.0,\n transitDays: 'Next Day by End of Day',\n badge: 'Express Air',\n badgeVariant: 'default',\n trackingNumber: '#DHL-92841-102948-US',\n barcodeString: '*42091101DHL9284102948*',\n routingZip: 'EXPRESS 91101',\n routingZone: 'ZONE INTL · GATEWAY LAX',\n hubCode: 'CVG (Cincinnati Hub)',\n },\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-shipping-label-printer, [ui-shipping-label-printer]',\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 UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiInputComponent,\n UiRadioGroupComponent,\n UiRadioGroupItemComponent,\n UiSeparatorComponent,\n UiSwitchComponent,\n ],\n template: `\n
\n \n \n
\n
\n \n \n Dispatch Station #04\n \n \n \n \n \n \n Zebra ZD421 Ready · 203 DPI\n
\n
\n\n
\n

\n Shipping Label Creation & Dispatch\n

\n \n {{ orderRef() }}\n @if (copiedOrder()) {\n \n } @else {\n \n }\n \n
\n

\n Multi-carrier rate rating, automated scale synchronization, and instant 4×6 thermal direct label generation.\n

\n
\n\n \n
\n \n @if (copiedZpl()) {\n \n } @else {\n \n }\n {{ copiedZpl() ? 'Copied ZPL II' : 'Download ZPL / PDF' }}\n \n\n \n
\n
\n\n \n
\n \n
\n \n
\n
\n
\n
\n \n

Carrier & Service Rate Selection

\n
\n Live API Rates\n
\n

\n Select optimal carrier routing based on transit time guarantee and negotiated rates\n

\n
\n\n
\n \n @for (carrier of carrierList; track carrier.id) {\n \n
\n
\n \n
\n
\n {{ carrier.name }}\n
\n

{{ carrier.transitDays }}

\n
\n
\n \n {{ carrier.badge }}\n \n
\n\n
\n {{ carrier.code }} Commercial Rate\n \n {{ '$' + carrier.rate.toFixed(2) }}\n \n
\n \n }\n \n
\n
\n\n \n
\n
\n
\n
\n \n

Package Weight & Digital Scale

\n
\n USB COM3\n
\n

Live gross weight measurement captured via certified USB benchtop parcel scale

\n
\n\n
\n \n \n
\n
\n \n
\n
\n
\n Fairbanks SC-200 Bench Scale\n \n
\n

\n Live Auto-Sync Active • Certified NIST Class III\n

\n
\n
\n\n
\n \n 4 lbs 8.0 oz (2.04 kg)\n \n \n \n {{ isScaleSyncing() ? 'Syncing...' : 'Re-weigh' }}\n \n
\n
\n\n \n
\n \n
\n \n
\n
\n \n \n lbs\n \n
\n
\n \n \n oz\n \n
\n
\n
\n\n \n
\n
\n \n {{ dimWeightLbs() }} lbs Dim Wt\n
\n
\n
\n \n \n L\n \n
\n
\n \n \n W\n \n
\n
\n \n \n H\n \n
\n
\n
\n
\n
\n
\n\n \n
\n
\n
\n
\n \n

Delivery Access & Insurance Options

\n
\n Carrier Accessorials\n
\n
\n\n
\n \n \n
\n
\n Direct Signature Required\n +$5.50\n
\n

\n Carrier will obtain a physical in-person signature from recipient at doorstep. Cannot be left\n unattended.\n

\n
\n \n
\n\n \n \n
\n
\n Declared Insurance Value\n Full Loss Protection\n
\n

\n Coverage up to declared amount for transit loss, theft, or damage (+$3.20 premium)\n

\n
\n
\n \n $\n \n \n
\n
\n\n \n
\n
\n
\n \n Package Contents:\n Pro Studio Headphones X9, Braided Cable (2 items)\n
\n SKU-AUD-9821\n
\n
\n
\n \n\n \n
\n
\n
\n Base Carrier Rate ({{ activeCarrier().name }}):\n {{\n '$' + activeCarrier().rate.toFixed(2)\n }}\n
\n
\n Direct Signature Confirmation:\n {{\n '$' + signatureFee().toFixed(2)\n }}\n
\n
\n Declared Value Cargo Protection ($300.00):\n {{\n '$' + insuranceFee().toFixed(2)\n }}\n
\n \n
\n Total Label & Dispatch Cost:\n \n {{ '$' + totalShippingCost().toFixed(2) + ' USD' }}\n \n
\n
\n
\n \n\n \n
\n
\n
\n
\n
\n \n

4×6 Thermal Label Preview

\n
\n ZPL II 203 DPI\n
\n

Direct thermal printable output formatted for 4\" × 6\" standard roll label stock

\n
\n\n
\n \n \n \n
\n ✂\n \n 4\" TEAR LINE\n
\n\n \n \n \n
\n
\n \n {{ activeCarrier().code }}\n
\n
PRIORITY DISPATCH
\n
\n\n
\n
WT: {{ weightLbs() }} LBS {{ weightOz() }} OZ
\n
DIM: {{ dimLength() }}x{{ dimWidth() }}x{{ dimHeight() }} IN
\n
DATE: 21AUG26
\n
\n
\n\n \n \n {{ activeCarrier().serviceBanner }}\n
\n\n \n
\n \n
\n
SHIP FROM:
\n
ACME LOGISTICS DC #4
\n
100 ENTERPRISE WAY, STE 200
\n
NEWARK NJ 07102-4100
\n
REF: {{ orderRef() }}
\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
SHIP TO:
\n
ALEXANDRA CHEN
\n
742 EVERGREEN TERRACE, APT 4B
\n
PASADENA CA 91101-2104
\n
TEL: (555) 019-2831
\n
\n\n \n
\n
{{ activeCarrier().routingZip }}
\n
\n {{ activeCarrier().routingZone }} • {{ activeCarrier().hubCode }}\n
\n
\n\n \n @if (requireSignature()) {\n
\n *** DIRECT SIGNATURE REQUIRED ***\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 \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 {{ activeCarrier().barcodeString }}\n
\n
\n\n \n
\n
\n TRACKING #: {{ activeCarrier().trackingNumber }}\n
\n
\n\n \n
\n POSTAGE PAID\n 4x6 THERMAL\n PKG 1 OF 1\n
\n
\n \n\n \n
\n
\n Tracking:\n \n {{ activeCarrier().trackingNumber }}\n @if (copiedTracking()) {\n \n } @else {\n \n }\n \n
\n\n
\n \n \n ZPL Payload\n \n \n
\n
\n \n \n \n \n \n `,\n})\nexport class UiShippingLabelPrinterComponent {\n protected readonly cn = cn\n protected readonly Barcode = Barcode\n protected readonly Check = Check\n protected readonly Copy = Copy\n protected readonly Download = Download\n protected readonly FileCode2 = FileCode2\n protected readonly Package = Package\n protected readonly Printer = Printer\n protected readonly RefreshCw = RefreshCw\n protected readonly Scale = Scale\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Truck = Truck\n\n @Input('initialOrderRef') set initialOrderRefInput(v: string | undefined) {\n if (v !== undefined) this.orderRef.set(v)\n }\n @Input('initialCarrier') set initialCarrierInput(v: CarrierId | undefined) {\n if (v) this.selectedCarrier.set(v)\n }\n @Input('class') className?: string\n\n @Output() print = new EventEmitter()\n @Output('download-zpl') downloadZpl = new EventEmitter()\n\n readonly orderRef = signal('#ORD-92841')\n readonly selectedCarrier = signal('fedex')\n readonly weightLbs = signal(4)\n readonly weightOz = signal(8)\n readonly dimLength = signal(14)\n readonly dimWidth = signal(10)\n readonly dimHeight = signal(6)\n readonly requireSignature = signal(true)\n readonly declaredValue = signal('300.00')\n readonly includeInsurance = signal(true)\n\n readonly isScaleSyncing = signal(false)\n readonly copiedOrder = signal(false)\n readonly copiedTracking = signal(false)\n readonly copiedZpl = signal(false)\n readonly isPrinted = signal(false)\n\n readonly carrierList = Object.values(CARRIERS)\n readonly activeCarrier = computed(() => CARRIERS[this.selectedCarrier()] ?? CARRIERS.fedex)\n readonly signatureFee = computed(() => (this.requireSignature() ? 5.5 : 0))\n readonly insuranceFee = computed(() => (this.includeInsurance() ? 3.2 : 0))\n readonly totalShippingCost = computed(() => this.activeCarrier().rate + this.signatureFee() + this.insuranceFee())\n readonly dimWeightLbs = computed(() => ((this.dimLength() * this.dimWidth() * this.dimHeight()) / 139).toFixed(2))\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n toNum(raw: string): number {\n const n = Number(raw)\n return Number.isNaN(n) ? 0 : n\n }\n\n setCarrier(v: string): void {\n this.selectedCarrier.set(v as CarrierId)\n }\n\n generateZplCode(): string {\n const c = this.activeCarrier()\n return `^XA\n^FO50,30^A0N,40,40^FD${c.code}^FS\n^FO220,30^A0N,22,22^FDWT: ${this.weightLbs()} LBS ${this.weightOz()} OZ^FS\n^FO220,60^A0N,22,22^FDDIM: ${this.dimLength()}x${this.dimWidth()}x${this.dimHeight()} IN^FS\n^FO50,95^GB700,3,3^FS\n^FO50,110^A0N,26,26^FD${c.serviceBanner}^FS\n^FO50,150^GB700,3,3^FS\n^FO50,165^A0N,20,20^FDSHIP FROM:^FS\n^FO50,190^A0N,20,20^FDACME LOGISTICS FULFILLMENT DC #4^FS\n^FO50,215^A0N,20,20^FD100 ENTERPRISE WAY, SUITE 200^FS\n^FO50,240^A0N,20,20^FDNEWARK NJ 07102-4100^FS\n^FO50,270^GB700,3,3^FS\n^FO50,285^A0N,22,22^FDSHIP TO:^FS\n^FO50,315^A0N,26,26^FDALEXANDRA CHEN (555) 019-2831^FS\n^FO50,345^A0N,26,26^FD742 EVERGREEN TERRACE, APT 4B^FS\n^FO50,375^A0N,26,26^FDPASADENA CA 91101-2104^FS\n^FO50,415^GB700,70,4^FS\n^FO70,435^A0N,40,40^FD${c.routingZip}^FS\n^FO50,500^GB700,3,3^FS\n${this.requireSignature() ? '^FO50,515^A0N,22,22^FD*** DIRECT SIGNATURE REQUIRED UPON DELIVERY ***^FS\\n^FO50,545^GB700,3,3^FS\\n' : ''}^FO100,570^BY3,3,90^BCN,90,Y,N,N^FD>${c.barcodeString}^FS\n^FO50,710^A0N,28,28^FDTRACKING: ${c.trackingNumber}^FS\n^FO50,760^GB700,2,2^FS\n^FO50,775^A0N,18,18^FDELECTRONIC POSTAGE PAID - ZPL II 203 DPI - 1 OF 1^FS\n^XZ`\n }\n\n handlePrint(): void {\n this.print.emit()\n this.isPrinted.set(true)\n setTimeout(() => {\n this.isPrinted.set(false)\n }, 3000)\n if (typeof window !== 'undefined' && typeof window.print === 'function') {\n window.print()\n }\n }\n\n handleDownloadZpl(): void {\n const zpl = this.generateZplCode()\n this.downloadZpl.emit(zpl)\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n navigator.clipboard.writeText(zpl)\n }\n this.copiedZpl.set(true)\n setTimeout(() => {\n this.copiedZpl.set(false)\n }, 2500)\n }\n\n handleSyncScale(): void {\n this.isScaleSyncing.set(true)\n setTimeout(() => {\n this.weightLbs.set(4)\n this.weightOz.set(8)\n this.isScaleSyncing.set(false)\n }, 600)\n }\n\n copyOrderRef(): void {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n navigator.clipboard.writeText(this.orderRef())\n this.copiedOrder.set(true)\n setTimeout(() => {\n this.copiedOrder.set(false)\n }, 2000)\n }\n }\n\n copyTracking(): void {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n navigator.clipboard.writeText(this.activeCarrier().trackingNumber)\n this.copiedTracking.set(true)\n setTimeout(() => {\n this.copiedTracking.set(false)\n }, 2000)\n }\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/shipping-label-printer/shipping-label-printer.component.ts" }, { "path": "packages/registry-angular/blocks/shipping-label-printer/index.ts", "content": "export { UiShippingLabelPrinterComponent, type CarrierId, type CarrierOption } from './shipping-label-printer.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/shipping-label-printer/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/radio-group.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/switch.json" ], "description": "Multi-carrier shipping label creator and dispatch station (USPS, FedEx, UPS, DHL) with live digital scale sync, package dimensional weight calculator, delivery options, and realistic 4x6 high-contrast thermal printable label preview.", "categories": [ "logistics", "app", "ecommerce" ] }