{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "shipment-tracking-timeline",
  "title": "Shipment Tracking Timeline",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/shipment-tracking-timeline/shipment-tracking-timeline.component.ts",
      "content": "// Flexport / Maersk style container freight tracking timeline: header card with vessel\n// and route meta, 4 voyage metric cards, a filterable multimodal journey milestone stepper\n// with live AIS telemetry, plus container specs and shipping documentation. Port of the\n// React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n  Anchor,\n  ArrowRight,\n  Box,\n  CalendarClock,\n  Check,\n  Compass,\n  Copy,\n  Download,\n  FileCheck2,\n  FileText,\n  LucideAngularModule,\n  MapPin,\n  Navigation,\n  Radio,\n  Search,\n  Share2,\n  ShieldCheck,\n  Ship,\n  Thermometer,\n  Timer,\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 { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport type MilestoneStatus = 'completed' | 'current' | 'upcoming'\nexport type MilestoneFilter = 'all' | 'completed' | 'upcoming'\n\nexport interface Milestone {\n  id: string\n  stepNumber: number\n  title: string\n  location: string\n  facility: string\n  country: string\n  date: string\n  status: MilestoneStatus\n  description: string\n  coordinates?: string\n  telemetry?: {\n    speed?: string\n    heading?: string\n    depth?: string\n  }\n}\n\nconst defaultMilestones: Milestone[] = [\n  {\n    id: 'ms-1',\n    stepNumber: 1,\n    title: 'Cargo Loaded at Factory',\n    location: 'Ningbo Depot',\n    facility: 'Apex Logistics Hub South',\n    country: 'CN',\n    date: 'Aug 06, 2026 · 08:30 CST',\n    status: 'completed',\n    description: 'Container stuffed, Reefer unit pre-cooled to -18°C, bolt seal #SL-94021 applied.',\n  },\n  {\n    id: 'ms-2',\n    stepNumber: 2,\n    title: 'Export Customs Cleared',\n    location: 'Shanghai Port',\n    facility: 'Yangshan Customs Gate 4',\n    country: 'CN',\n    date: 'Aug 08, 2026 · 14:15 CST',\n    status: 'completed',\n    description: 'Export declaration approved. Customs electronic release note #CN-SH-992 issued.',\n  },\n  {\n    id: 'ms-3',\n    stepNumber: 3,\n    title: 'Vessel Departed Port',\n    location: 'Shanghai Port (CNSHA)',\n    facility: 'Yangshan Deepwater Terminal Berth 3',\n    country: 'CN',\n    date: 'Aug 10, 2026 · 22:00 CST',\n    status: 'completed',\n    description: 'Loaded onto vessel Ever Given (Voyage V.042W, Bay 42, Tier 04). Ocean transit started.',\n  },\n  {\n    id: 'ms-4',\n    stepNumber: 4,\n    title: 'Current Position · Sea Transit',\n    location: 'Red Sea International Waters',\n    facility: 'Maritime Convoy Corridor 2',\n    country: 'INT',\n    date: 'Aug 21, 2026 · 11:20 UTC (Live)',\n    status: 'current',\n    description: 'Cruising in transit towards Suez Canal. High-frequency AIS beacon reporting healthy telemetry.',\n    coordinates: \"24°18'N, 37°42'E\",\n    telemetry: {\n      speed: '18.4 knots',\n      heading: '315° NW',\n      depth: '840 m',\n    },\n  },\n  {\n    id: 'ms-5',\n    stepNumber: 5,\n    title: 'Suez Canal Transit',\n    location: 'Port Said / Suez (EGPSD)',\n    facility: 'Suez Canal Authority Convoy Hub',\n    country: 'EG',\n    date: 'Est. Aug 25, 2026 · 06:00 EEST',\n    status: 'upcoming',\n    description: 'Scheduled northbound convoy passage slot #04 with authorized maritime pilotage.',\n  },\n  {\n    id: 'ms-6',\n    stepNumber: 6,\n    title: 'Port of Discharge Arrival',\n    location: 'Rotterdam (NLRTM)',\n    facility: 'APM Terminals Maasvlakte II',\n    country: 'NL',\n    date: 'Est. Sep 04, 2026 · 14:00 CEST',\n    status: 'upcoming',\n    description: 'Vessel berthing & container unlashing operations. Import customs clearance processing.',\n  },\n  {\n    id: 'ms-7',\n    stepNumber: 7,\n    title: 'Final Destination Delivery',\n    location: 'Duisburg Distribution Center',\n    facility: 'EuroHub Logistics Terminal',\n    country: 'DE',\n    date: 'Est. Sep 07, 2026 · 09:00 CEST',\n    status: 'upcoming',\n    description: 'Intermodal electric rail transfer from Rotterdam to Duisburg bonded warehouse.',\n  },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-shipment-tracking-timeline, [ui-shipment-tracking-timeline]',\n  standalone: true,\n  // React renders the root <div> 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    UiSeparatorComponent,\n  ],\n  template: `\n    <div data-slot=\"shipment-tracking-timeline\" [class]=\"rootClass\">\n      <!-- Header Card -->\n      <div ui-card class=\"border-border bg-card shadow-xs\">\n        <div ui-card-content class=\"p-4 sm:p-6\">\n          <div class=\"flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between\">\n            <!-- Left: ID, Vessel & Route -->\n            <div class=\"space-y-3\">\n              <div class=\"flex flex-wrap items-center gap-2 sm:gap-3\">\n                <div class=\"flex items-center gap-1.5\">\n                  <span class=\"text-foreground font-mono text-xl font-bold tracking-tight sm:text-2xl\">\n                    #MSKU-9482014\n                  </span>\n                  <button\n                    ui-button\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    class=\"text-muted-foreground hover:text-foreground size-7\"\n                    title=\"Copy Container ID\"\n                    (click)=\"copyContainerId()\"\n                  >\n                    @if (copiedContainerId()) {\n                      <lucide-icon [img]=\"Check\" class=\"text-success size-3.5\" aria-hidden=\"true\" />\n                    } @else {\n                      <lucide-icon [img]=\"Copy\" class=\"size-3.5\" aria-hidden=\"true\" />\n                    }\n                    <span class=\"sr-only\">Copy container number</span>\n                  </button>\n                </div>\n\n                <span\n                  ui-badge\n                  variant=\"secondary\"\n                  class=\"border-success/30 bg-success/10 text-success gap-1.5 px-2.5 py-0.5 text-xs font-medium\"\n                >\n                  <span class=\"relative flex size-2 shrink-0\">\n                    <span class=\"bg-success absolute inline-flex h-full w-full rounded-full opacity-75\"></span>\n                    <span class=\"bg-success relative inline-flex size-2 rounded-full\"></span>\n                  </span>\n                  In Transit · On Schedule\n                </span>\n\n                <span ui-badge variant=\"outline\" class=\"border-border bg-muted/30 text-muted-foreground gap-1 text-xs\">\n                  <lucide-icon [img]=\"Ship\" class=\"text-primary size-3\" aria-hidden=\"true\" />\n                  Ocean Freight · FCL 40ft High Cube\n                </span>\n              </div>\n\n              <!-- Route and Vessel meta -->\n              <div class=\"flex flex-wrap items-center gap-x-4 gap-y-2 text-xs\">\n                <div class=\"text-foreground flex items-center gap-1.5 font-medium\">\n                  <span class=\"bg-muted rounded px-1.5 py-0.5 font-mono text-xs\">CNSHA</span>\n                  <span>Shanghai</span>\n                  <lucide-icon [img]=\"ArrowRight\" class=\"text-muted-foreground size-3.5\" aria-hidden=\"true\" />\n                  <span class=\"bg-muted rounded px-1.5 py-0.5 font-mono text-xs\">NLRTM</span>\n                  <span>Rotterdam</span>\n                </div>\n                <ui-separator orientation=\"vertical\" class=\"hidden h-3.5 sm:block\" />\n                <div class=\"text-muted-foreground flex items-center gap-1.5\">\n                  <lucide-icon [img]=\"Ship\" class=\"text-muted-foreground size-3.5\" aria-hidden=\"true\" />\n                  <span>Vessel:</span>\n                  <span class=\"text-foreground font-semibold\">Ever Given / V.042W</span>\n                  <span class=\"text-muted-foreground font-mono text-xs\">(IMO 9811000)</span>\n                </div>\n                <ui-separator orientation=\"vertical\" class=\"hidden h-3.5 sm:block\" />\n                <div class=\"text-muted-foreground flex items-center gap-1\">\n                  <span>Carrier:</span>\n                  <span class=\"text-foreground font-medium\">Maersk Line</span>\n                </div>\n              </div>\n            </div>\n\n            <!-- Right: Container search & Quick Actions -->\n            <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center\">\n              <div class=\"relative w-full sm:w-64\">\n                <lucide-icon\n                  [img]=\"Search\"\n                  class=\"text-muted-foreground absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2\"\n                  aria-hidden=\"true\"\n                />\n                <ui-input\n                  [value]=\"searchQuery()\"\n                  (valueChange)=\"searchQuery.set($event)\"\n                  placeholder=\"Track Container / B/L...\"\n                  class=\"h-9 pl-8 font-mono text-xs focus-visible:ring-2\"\n                />\n              </div>\n              <div class=\"flex items-center gap-2\">\n                <button ui-button size=\"sm\" class=\"gap-1.5 shadow-xs\">\n                  <lucide-icon [img]=\"Search\" class=\"size-3.5\" aria-hidden=\"true\" />\n                  Track\n                </button>\n                <button ui-button variant=\"outline\" size=\"sm\" class=\"gap-1.5 shadow-xs\" (click)=\"copyTrackingLink()\">\n                  <lucide-icon [img]=\"Share2\" class=\"size-3.5\" aria-hidden=\"true\" />\n                  <span class=\"hidden sm:inline\">{{ copiedBLLink() ? 'Copied' : 'Share' }}</span>\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- 4 Summary Metric Cards -->\n      <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n        <!-- ETA Card -->\n        <div ui-card class=\"border-border bg-card shadow-xs\">\n          <div ui-card-content class=\"p-4 sm:p-5\">\n            <div class=\"flex items-start justify-between\">\n              <div class=\"space-y-1\">\n                <p class=\"text-muted-foreground text-xs font-medium tracking-wide uppercase\">Estimated Arrival (ETA)</p>\n                <p class=\"text-foreground font-mono text-base font-bold tabular-nums sm:text-lg\">Sep 04, 2026</p>\n                <p class=\"text-muted-foreground text-xs tabular-nums\">14:00 CEST · Berth 4A confirmed</p>\n              </div>\n              <div class=\"bg-primary/10 text-primary flex size-9 shrink-0 items-center justify-center rounded-lg\">\n                <lucide-icon [img]=\"CalendarClock\" class=\"size-4.5\" aria-hidden=\"true\" />\n              </div>\n            </div>\n            <div\n              class=\"border-border/60 bg-muted/40 mt-3.5 flex items-center justify-between rounded-md border px-2.5 py-1.5 text-xs\"\n            >\n              <span class=\"text-muted-foreground\">Remaining</span>\n              <span class=\"text-success font-medium\">14 days left</span>\n            </div>\n          </div>\n        </div>\n\n        <!-- Days in Transit Card -->\n        <div ui-card class=\"border-border bg-card shadow-xs\">\n          <div ui-card-content class=\"p-4 sm:p-5\">\n            <div class=\"flex items-start justify-between\">\n              <div class=\"space-y-1\">\n                <p class=\"text-muted-foreground text-xs font-medium tracking-wide uppercase\">Days in Transit</p>\n                <p class=\"text-foreground font-mono text-base font-bold tabular-nums sm:text-lg\">\n                  18 <span class=\"text-muted-foreground text-sm font-normal\">of 28 days</span>\n                </p>\n                <p class=\"text-muted-foreground text-xs tabular-nums\">64% of voyage completed</p>\n              </div>\n              <div class=\"bg-success/10 text-success flex size-9 shrink-0 items-center justify-center rounded-lg\">\n                <lucide-icon [img]=\"Timer\" class=\"size-4.5\" aria-hidden=\"true\" />\n              </div>\n            </div>\n            <div class=\"mt-3.5 space-y-1.5\">\n              <div class=\"bg-muted h-1.5 w-full overflow-hidden rounded-full\">\n                <div class=\"bg-success h-full rounded-full transition-[width]\" style=\"width: 64%\"></div>\n              </div>\n              <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n                <span>Departed: Aug 10</span>\n                <span>ETA: Sep 04</span>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Current Coordinates Card -->\n        <div ui-card class=\"border-border bg-card shadow-xs\">\n          <div ui-card-content class=\"p-4 sm:p-5\">\n            <div class=\"flex items-start justify-between\">\n              <div class=\"space-y-1\">\n                <p class=\"text-muted-foreground text-xs font-medium tracking-wide uppercase\">Current Vessel Position</p>\n                <p class=\"text-foreground font-mono text-base font-bold tabular-nums sm:text-lg\">24°18'N, 37°42'E</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  Red Sea · Speed <span class=\"text-foreground font-mono font-medium\">18.4 kn</span>\n                </p>\n              </div>\n              <div class=\"bg-info/10 text-info flex size-9 shrink-0 items-center justify-center rounded-lg\">\n                <lucide-icon [img]=\"Compass\" class=\"size-4.5\" aria-hidden=\"true\" />\n              </div>\n            </div>\n            <div\n              class=\"border-border/60 bg-muted/40 mt-3.5 flex items-center justify-between rounded-md border px-2.5 py-1.5 text-xs\"\n            >\n              <span class=\"text-muted-foreground\">Heading</span>\n              <span class=\"text-foreground font-mono font-medium\">315° NW (Convoy)</span>\n            </div>\n          </div>\n        </div>\n\n        <!-- Next Milestone Port Card -->\n        <div ui-card class=\"border-border bg-card shadow-xs\">\n          <div ui-card-content class=\"p-4 sm:p-5\">\n            <div class=\"flex items-start justify-between\">\n              <div class=\"space-y-1\">\n                <p class=\"text-muted-foreground text-xs font-medium tracking-wide uppercase\">Next Milestone Port</p>\n                <p class=\"text-foreground font-mono text-base font-bold sm:text-lg\">Suez Canal</p>\n                <p class=\"text-muted-foreground text-xs tabular-nums\">Aug 25 · Northbound Convoy</p>\n              </div>\n              <div class=\"bg-warning/10 text-warning flex size-9 shrink-0 items-center justify-center rounded-lg\">\n                <lucide-icon [img]=\"Anchor\" class=\"size-4.5\" aria-hidden=\"true\" />\n              </div>\n            </div>\n            <div\n              class=\"border-border/60 bg-muted/40 mt-3.5 flex items-center justify-between rounded-md border px-2.5 py-1.5 text-xs\"\n            >\n              <span class=\"text-muted-foreground\">Pilotage Slot</span>\n              <span class=\"text-foreground font-mono font-medium\">Slot #04 (06:00 EEST)</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Multimodal Journey Milestones Stepper Card -->\n      <div ui-card class=\"border-border bg-card shadow-xs\">\n        <div ui-card-header class=\"flex flex-col gap-3 pb-4 sm:flex-row sm:items-center sm:justify-between\">\n          <div class=\"space-y-1\">\n            <div class=\"flex items-center gap-2\">\n              <lucide-icon [img]=\"Navigation\" class=\"text-primary size-4.5\" aria-hidden=\"true\" />\n              <h3 ui-card-title class=\"text-base font-semibold\">Multimodal Journey Milestones</h3>\n              <span ui-badge variant=\"outline\" class=\"font-mono text-xs\">7 Milestones</span>\n            </div>\n            <p ui-card-description class=\"text-xs\">\n              End-to-end container tracking from factory loading in Ningbo to warehouse in Duisburg.\n            </p>\n          </div>\n\n          <!-- Filter Buttons -->\n          <div class=\"border-border bg-muted/40 flex items-center gap-1 rounded-lg border p-0.5 text-xs\">\n            <button type=\"button\" [class]=\"filterButtonClass('all')\"\n              (click)=\"activeFilter.set('all')\"\n            >\n              All (7)\n            </button>\n            <button type=\"button\" [class]=\"filterButtonClass('completed')\"\n              (click)=\"activeFilter.set('completed')\"\n            >\n              Completed (3)\n            </button>\n            <button type=\"button\" [class]=\"filterButtonClass('upcoming')\"\n              (click)=\"activeFilter.set('upcoming')\"\n            >\n              Upcoming (3)\n            </button>\n          </div>\n        </div>\n\n        <div ui-card-content class=\"space-y-6 pt-2\">\n          <!-- Live AIS Telemetry Beacon Banner -->\n          <div class=\"border-primary/30 bg-primary/5 relative overflow-hidden rounded-xl border p-4\">\n            <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <div class=\"bg-primary/10 text-primary relative flex size-10 items-center justify-center rounded-lg\">\n                  <lucide-icon [img]=\"Radio\" class=\"size-5\" aria-hidden=\"true\" />\n                  <span class=\"absolute -top-1 -right-1 flex size-3\">\n                    <span class=\"bg-success absolute inline-flex h-full w-full rounded-full opacity-75\"></span>\n                    <span class=\"bg-success relative inline-flex size-3 rounded-full\"></span>\n                  </span>\n                </div>\n                <div>\n                  <div class=\"flex items-center gap-2\">\n                    <h4 class=\"text-foreground text-sm font-semibold\">Active AIS Sea Telemetry</h4>\n                    <span ui-badge variant=\"secondary\" class=\"bg-success/10 text-success text-xs\">\n                      Live Transponder\n                    </span>\n                  </div>\n                  <p class=\"text-muted-foreground text-xs\">\n                    Vessel Ever Given navigating Red Sea corridor · Last ping:\n                    <span class=\"text-foreground font-mono font-medium\">12s ago</span>\n                  </p>\n                </div>\n              </div>\n\n              <div class=\"flex flex-wrap items-center gap-3 font-mono text-xs\">\n                <div class=\"border-border/80 bg-background/80 rounded-md border px-2.5 py-1.5\">\n                  <span class=\"text-muted-foreground\">Speed: </span>\n                  <span class=\"text-foreground font-semibold tabular-nums\">18.4 knots</span>\n                </div>\n                <div class=\"border-border/80 bg-background/80 rounded-md border px-2.5 py-1.5\">\n                  <span class=\"text-muted-foreground\">Heading: </span>\n                  <span class=\"text-foreground font-semibold\">315° NW</span>\n                </div>\n                <div class=\"border-border/80 bg-background/80 rounded-md border px-2.5 py-1.5\">\n                  <span class=\"text-muted-foreground\">Coords: </span>\n                  <span class=\"text-foreground font-semibold tabular-nums\">24°18'N, 37°42'E</span>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Connected Timeline Stepper -->\n          <div class=\"relative pl-6 sm:pl-8\">\n            <!-- Vertical Track Line -->\n            <div class=\"bg-border absolute top-3 bottom-3 left-3 w-0.5 -translate-x-1/2 sm:left-4\"></div>\n\n            <div class=\"space-y-6\">\n              @for (milestone of filteredMilestones(); track milestone.id) {\n                <div class=\"group relative flex flex-col gap-2\">\n                  <!-- Step Node Circle -->\n                  <div class=\"absolute -left-6 flex items-center justify-center sm:-left-8\">\n                    @if (milestone.status === 'completed') {\n                      <div\n                        class=\"ring-background bg-success bg-success flex size-6 items-center justify-center rounded-full text-white shadow-2xs ring-4 sm:size-8 dark:text-zinc-950\"\n                      >\n                        <lucide-icon [img]=\"Check\" class=\"size-3.5 stroke-[2.5] sm:size-4\" aria-hidden=\"true\" />\n                      </div>\n                    } @else if (milestone.status === 'current') {\n                      <div\n                        class=\"border-primary bg-background text-primary ring-background relative flex size-6 items-center justify-center rounded-full border-2 shadow-xs ring-4 sm:size-8\"\n                      >\n                        <span class=\"relative flex size-2.5 sm:size-3\">\n                          <span class=\"bg-primary absolute inline-flex h-full w-full rounded-full opacity-75\"></span>\n                          <span class=\"bg-primary relative inline-flex size-2.5 rounded-full sm:size-3\"></span>\n                        </span>\n                      </div>\n                    } @else {\n                      <div\n                        class=\"border-border bg-muted/60 text-muted-foreground ring-background flex size-6 items-center justify-center rounded-full border ring-4 sm:size-8\"\n                      >\n                        <span class=\"font-mono text-xs font-medium\">{{ milestone.stepNumber }}</span>\n                      </div>\n                    }\n                  </div>\n\n                  <!-- Milestone Content Card -->\n                  <div [class]=\"milestoneCardClass(milestone.status)\">\n                    <div class=\"flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between\">\n                      <div class=\"space-y-1\">\n                        <div class=\"flex flex-wrap items-center gap-2\">\n                          <span class=\"text-foreground text-sm font-semibold\">{{ milestone.title }}</span>\n\n                          @if (milestone.status === 'completed') {\n                            <span ui-badge variant=\"secondary\" class=\"bg-success/10 text-success text-xs font-medium\">\n                              Completed\n                            </span>\n                          } @else if (milestone.status === 'current') {\n                            <span ui-badge class=\"bg-primary text-primary-foreground text-xs font-medium\">\n                              Active Now\n                            </span>\n                          } @else {\n                            <span ui-badge variant=\"outline\" class=\"border-border text-muted-foreground text-xs\">\n                              Upcoming\n                            </span>\n                          }\n\n                          <span class=\"text-muted-foreground font-mono text-xs\"> ({{ milestone.facility }}) </span>\n                        </div>\n\n                        <p class=\"text-muted-foreground text-xs\">{{ milestone.description }}</p>\n                      </div>\n\n                      <div class=\"shrink-0 text-left sm:text-right\">\n                        <span class=\"text-foreground font-mono text-xs font-medium tabular-nums\">\n                          {{ milestone.date }}\n                        </span>\n                        <div class=\"text-muted-foreground mt-0.5 flex items-center gap-1 text-xs sm:justify-end\">\n                          <lucide-icon [img]=\"MapPin\" class=\"size-3\" aria-hidden=\"true\" />\n                          <span>{{ milestone.location }}</span>\n                        </div>\n                      </div>\n                    </div>\n\n                    @if (milestone.telemetry) {\n                      <div\n                        class=\"border-primary/20 bg-background/90 mt-3 grid grid-cols-2 gap-2 rounded-lg border p-2.5 font-mono text-xs sm:grid-cols-4\"\n                      >\n                        <div>\n                          <span class=\"text-muted-foreground\">Speed: </span>\n                          <span class=\"text-foreground font-semibold tabular-nums\">{{\n                            milestone.telemetry!.speed\n                          }}</span>\n                        </div>\n                        <div>\n                          <span class=\"text-muted-foreground\">Heading: </span>\n                          <span class=\"text-foreground font-semibold\">{{ milestone.telemetry!.heading }}</span>\n                        </div>\n                        <div>\n                          <span class=\"text-muted-foreground\">Water Depth: </span>\n                          <span class=\"text-foreground font-semibold tabular-nums\">{{\n                            milestone.telemetry!.depth\n                          }}</span>\n                        </div>\n                        <div>\n                          <span class=\"text-muted-foreground\">AIS Status: </span>\n                          <span class=\"text-success font-semibold\">Broadcasting</span>\n                        </div>\n                      </div>\n                    }\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- 2-Column Grid: Specifications & Documentation Manifest -->\n      <div class=\"grid grid-cols-1 gap-6 lg:grid-cols-12\">\n        <!-- Container Specifications & Cold Chain Card -->\n        <div class=\"space-y-6 lg:col-span-7\">\n          <div ui-card class=\"border-border bg-card shadow-xs\">\n            <div ui-card-header class=\"pb-4\">\n              <div class=\"flex items-center justify-between\">\n                <div class=\"flex items-center gap-2\">\n                  <lucide-icon [img]=\"Box\" class=\"text-primary size-4.5\" aria-hidden=\"true\" />\n                  <h3 ui-card-title class=\"text-base font-semibold\">Container & Cold Chain Specifications</h3>\n                </div>\n                <span ui-badge variant=\"outline\" class=\"font-mono text-xs\">ISO 6346 Verified</span>\n              </div>\n              <p ui-card-description class=\"text-xs\">\n                Physical parameters, high-security seal integrity, and live Reefer temperature control log.\n              </p>\n            </div>\n            <div ui-card-content class=\"space-y-5\">\n              <!-- Key Metric Chips -->\n              <div class=\"grid grid-cols-2 gap-3 sm:grid-cols-4\">\n                <div class=\"border-border bg-muted/30 rounded-lg border p-3\">\n                  <span class=\"text-muted-foreground text-xs\">Gross Weight</span>\n                  <p class=\"text-foreground mt-0.5 font-mono text-sm font-bold tabular-nums\">24,500 kg</p>\n                  <span class=\"text-muted-foreground text-xs\">Max: 30,480 kg</span>\n                </div>\n                <div class=\"border-border bg-muted/30 rounded-lg border p-3\">\n                  <span class=\"text-muted-foreground text-xs\">Bolt Seal #</span>\n                  <p class=\"text-foreground mt-0.5 font-mono text-sm font-bold\">SL-94021</p>\n                  <span class=\"text-success text-xs\">ISO 17712 High Sec</span>\n                </div>\n                <div class=\"border-border bg-muted/30 rounded-lg border p-3\">\n                  <span class=\"text-muted-foreground text-xs\">Temperature</span>\n                  <p class=\"text-foreground mt-0.5 font-mono text-sm font-bold tabular-nums\">-18.0°C</p>\n                  <span class=\"text-success text-xs\">Actual: -18.2°C</span>\n                </div>\n                <div class=\"border-border bg-muted/30 rounded-lg border p-3\">\n                  <span class=\"text-muted-foreground text-xs\">Humidity & Vent</span>\n                  <p class=\"text-foreground mt-0.5 font-mono text-sm font-bold tabular-nums\">85% RH</p>\n                  <span class=\"text-muted-foreground text-xs\">Vent: Closed (0 cbm)</span>\n                </div>\n              </div>\n\n              <ui-separator />\n\n              <!-- Detailed Specifications Table / List -->\n              <div class=\"grid grid-cols-1 gap-4 text-xs sm:grid-cols-2\">\n                <div class=\"space-y-2.5\">\n                  <div class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Equipment Size:</span>\n                    <span class=\"text-foreground font-medium\">40ft High Cube Reefer (40HR)</span>\n                  </div>\n                  <div class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Tare Weight:</span>\n                    <span class=\"text-foreground font-mono font-medium tabular-nums\">3,300 kg</span>\n                  </div>\n                  <div class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Net Cargo Weight:</span>\n                    <span class=\"text-foreground font-mono font-medium tabular-nums\">21,200 kg</span>\n                  </div>\n                  <div class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Cargo Volume:</span>\n                    <span class=\"text-foreground font-mono font-medium tabular-nums\">67.3 CBM</span>\n                  </div>\n                </div>\n\n                <div class=\"space-y-2.5\">\n                  <div class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Reefer Unit:</span>\n                    <span class=\"text-foreground font-medium\">Carrier Transicold PrimeLINE</span>\n                  </div>\n                  <div class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Power Source:</span>\n                    <span class=\"text-foreground font-medium\">Vessel 440V 3-Phase Plug</span>\n                  </div>\n                  <div class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Defrost Cycle:</span>\n                    <span class=\"text-foreground font-mono font-medium\">Auto-Defrost (Every 12h)</span>\n                  </div>\n                  <div class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Cold-Chain Compliance:</span>\n                    <span class=\"text-success font-semibold\">HACCP / GDP Certified</span>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Cold Chain Live Sensor Gauge Banner -->\n              <div\n                class=\"border-border/80 bg-muted/40 flex flex-col gap-3 rounded-lg border p-3 text-xs sm:flex-row sm:items-center sm:justify-between\"\n              >\n                <div class=\"flex items-center gap-2\">\n                  <lucide-icon [img]=\"Thermometer\" class=\"text-primary size-4\" aria-hidden=\"true\" />\n                  <span class=\"text-foreground font-medium\">Continuous Temperature Telemetry:</span>\n                  <span class=\"text-muted-foreground font-mono\">24-hour variance ±0.3°C (Nominal)</span>\n                </div>\n                <div class=\"text-success flex items-center gap-1.5 font-medium\">\n                  <lucide-icon [img]=\"ShieldCheck\" class=\"size-3.5\" aria-hidden=\"true\" />\n                  <span>Zero Excursions</span>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Commercial Documents & Shipping Manifest Card -->\n        <div class=\"space-y-6 lg:col-span-5\">\n          <div ui-card class=\"border-border bg-card shadow-xs\">\n            <div ui-card-header class=\"pb-4\">\n              <div class=\"flex items-center justify-between\">\n                <div class=\"flex items-center gap-2\">\n                  <lucide-icon [img]=\"FileText\" class=\"text-primary size-4.5\" aria-hidden=\"true\" />\n                  <h3 ui-card-title class=\"text-base font-semibold\">Shipping Documentation</h3>\n                </div>\n                <span ui-badge variant=\"secondary\" class=\"text-xs\">Customs Released</span>\n              </div>\n              <p ui-card-description class=\"text-xs\">\n                Bill of Lading, invoice identifiers, and trade compliance references.\n              </p>\n            </div>\n            <div ui-card-content class=\"space-y-4\">\n              <div class=\"space-y-2.5 text-xs\">\n                <div class=\"border-border/60 bg-muted/30 flex items-center justify-between rounded-lg border p-2.5\">\n                  <span class=\"text-muted-foreground\">Commercial Invoice #:</span>\n                  <span class=\"text-foreground font-mono font-bold\">CI-2026-849</span>\n                </div>\n                <div class=\"border-border/60 bg-muted/30 flex items-center justify-between rounded-lg border p-2.5\">\n                  <span class=\"text-muted-foreground\">Master Bill of Lading (MBL):</span>\n                  <span class=\"text-foreground font-mono font-bold\">MAEU-98421094</span>\n                </div>\n                <div class=\"border-border/60 bg-muted/30 flex items-center justify-between rounded-lg border p-2.5\">\n                  <span class=\"text-muted-foreground\">Booking Reference:</span>\n                  <span class=\"text-foreground font-mono font-medium\">BKG-7712093</span>\n                </div>\n                <div class=\"border-border/60 bg-muted/30 flex items-center justify-between rounded-lg border p-2.5\">\n                  <span class=\"text-muted-foreground\">Incoterms 2020:</span>\n                  <span class=\"text-foreground font-medium\">FOB Shanghai Port</span>\n                </div>\n              </div>\n\n              <ui-separator />\n\n              <!-- Parties: Shipper and Consignee -->\n              <div class=\"space-y-3 text-xs\">\n                <div>\n                  <p class=\"text-muted-foreground font-medium\">Shipper / Exporter</p>\n                  <p class=\"text-foreground font-semibold\">Ningbo Apex International Marine Trade Co.</p>\n                  <p class=\"text-muted-foreground\">Beilun District, Ningbo, Zhejiang, China</p>\n                </div>\n                <div>\n                  <p class=\"text-muted-foreground font-medium\">Consignee / Importer</p>\n                  <p class=\"text-foreground font-semibold\">EuroHub Logistics & Cold Storage GmbH</p>\n                  <p class=\"text-muted-foreground\">Logport I, 47226 Duisburg, Germany</p>\n                </div>\n              </div>\n\n              <div class=\"flex flex-col items-center gap-2 pt-2 sm:flex-row\">\n                <button\n                  ui-button\n                  aria-label=\"Download attachment\"\n                  variant=\"outline\"\n                  size=\"sm\"\n                  class=\"min-w-0 justify-center gap-2 text-xs shadow-xs sm:flex-1\"\n                >\n                  <lucide-icon [img]=\"Download\" class=\"size-3.5\" aria-hidden=\"true\" />\n                  Download Bill of Lading\n                </button>\n                <button\n                  ui-button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  class=\"text-muted-foreground hover:text-foreground min-w-0 justify-center gap-2 text-xs sm:flex-1\"\n                >\n                  <lucide-icon [img]=\"FileCheck2\" class=\"size-3.5\" aria-hidden=\"true\" />\n                  Customs Pack (PDF)\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class UiShipmentTrackingTimelineComponent {\n  protected readonly Anchor = Anchor\n  protected readonly ArrowRight = ArrowRight\n  protected readonly Box = Box\n  protected readonly CalendarClock = CalendarClock\n  protected readonly Check = Check\n  protected readonly Compass = Compass\n  protected readonly Copy = Copy\n  protected readonly Download = Download\n  protected readonly FileCheck2 = FileCheck2\n  protected readonly FileText = FileText\n  protected readonly MapPin = MapPin\n  protected readonly Navigation = Navigation\n  protected readonly Radio = Radio\n  protected readonly Search = Search\n  protected readonly Share2 = Share2\n  protected readonly ShieldCheck = ShieldCheck\n  protected readonly Ship = Ship\n  protected readonly Thermometer = Thermometer\n  protected readonly Timer = Timer\n\n  @Input('initialContainerId') set initialContainerIdInput(v: string | undefined) {\n    if (v !== undefined) this.searchQuery.set(v)\n  }\n  @Input('initialFilter') set initialFilterInput(v: MilestoneFilter | undefined) {\n    if (v) this.activeFilter.set(v)\n  }\n  @Input('class') className?: string\n\n  readonly searchQuery = signal('MSKU-9482014')\n  readonly activeFilter = signal<MilestoneFilter>('all')\n  readonly copiedContainerId = signal(false)\n  readonly copiedBLLink = signal(false)\n\n  readonly filteredMilestones = computed(() => {\n    const filter = this.activeFilter()\n    if (filter === 'completed') {\n      return defaultMilestones.filter((m) => m.status === 'completed')\n    }\n    if (filter === 'upcoming') {\n      return defaultMilestones.filter((m) => m.status === 'upcoming')\n    }\n    return defaultMilestones\n  })\n\n  get rootClass(): string {\n    return cn('w-full space-y-6', this.className)\n  }\n\n  filterButtonClass(filter: MilestoneFilter): string {\n    // [class] overwrites the whole class attribute: the base layout classes must be merged here.\n    return cn(\n      'rounded-md px-2.5 py-1 font-medium transition-colors',\n      this.activeFilter() === filter\n        ? 'bg-background text-foreground font-semibold shadow-xs'\n        : 'text-muted-foreground hover:text-foreground',\n    )\n  }\n\n  milestoneCardClass(status: MilestoneStatus): string {\n    return cn(\n      'rounded-xl border p-4 transition-colors',\n      status === 'current'\n        ? 'border-primary/50 bg-primary/5 ring-primary/20 shadow-xs ring-1'\n        : status === 'completed'\n          ? 'border-border/80 bg-card/60 hover:bg-muted/30'\n          : 'border-border/60 bg-muted/20 opacity-80 hover:opacity-100',\n    )\n  }\n\n  copyContainerId(): void {\n    if (typeof navigator !== 'undefined' && navigator.clipboard) {\n      navigator.clipboard.writeText('MSKU-9482014')\n      this.copiedContainerId.set(true)\n      setTimeout(() => {\n        this.copiedContainerId.set(false)\n      }, 2000)\n    }\n  }\n\n  copyTrackingLink(): void {\n    if (typeof navigator !== 'undefined' && navigator.clipboard) {\n      navigator.clipboard.writeText('https://uipkge.dev/track/MSKU-9482014')\n      this.copiedBLLink.set(true)\n      setTimeout(() => {\n        this.copiedBLLink.set(false)\n      }, 2000)\n    }\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/shipment-tracking-timeline/shipment-tracking-timeline.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/shipment-tracking-timeline/index.ts",
      "content": "export {\n  UiShipmentTrackingTimelineComponent,\n  type MilestoneStatus,\n  type MilestoneFilter,\n  type Milestone,\n} from './shipment-tracking-timeline.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/shipment-tracking-timeline/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/separator.json"
  ],
  "description": "Flexport & Maersk style container freight tracking timeline with live AIS vessel telemetry, voyage ETA milestones, Reefer cold-chain specifications, and multimodal transport logistics.",
  "categories": [
    "logistics",
    "dashboard",
    "app"
  ]
}