{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "leaflet-delivery-tracking-map",
  "title": "Leaflet Delivery Tracking Map",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/leaflet-delivery-tracking-map/leaflet-delivery-tracking-map.component.ts",
      "content": "// Live order delivery route on free OpenStreetMap tiles — no API key. Courier position,\n// dropoff destination, and ETA telemetry. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, ViewChild } from '@angular/core'\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 {\n  UiLeafletMapComponent,\n  UiLeafletMarkerComponent,\n  UiLeafletPolylineComponent,\n} from '@/ui/leaflet-map/leaflet-map.component'\n\nconst ORIGIN: [number, number] = [-122.4194, 37.7749]\nconst DESTINATION: [number, number] = [-122.392, 37.7915]\nconst COURIER_POSITION: [number, number] = [-122.405, 37.783]\n\nconst ROUTE_COORDS: [number, number][] = [\n  [-122.4194, 37.7749],\n  [-122.414, 37.778],\n  [-122.405, 37.783],\n  [-122.399, 37.787],\n  [-122.392, 37.7915],\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-leaflet-delivery-tracking-map, [ui-leaflet-delivery-tracking-map]',\n  standalone: true,\n  imports: [\n    UiBadgeComponent,\n    UiButtonComponent,\n    UiCardComponent,\n    UiCardContentComponent,\n    UiCardDescriptionComponent,\n    UiCardHeaderComponent,\n    UiCardTitleComponent,\n    UiLeafletMapComponent,\n    UiLeafletMarkerComponent,\n    UiLeafletPolylineComponent,\n  ],\n  host: {\n    'data-slot': 'leaflet-delivery-tracking-map',\n    '[class]': 'hostClass',\n  },\n  template: `\n    <div class=\"border-border bg-card relative h-[480px] overflow-hidden rounded-xl border\">\n      <ui-leaflet-map variant=\"dark\" [center]=\"courierPosition\" [zoom]=\"13.5\" class=\"h-full w-full\">\n        <ui-leaflet-polyline [lngLatPath]=\"routeCoords\" color=\"#2563eb\" [weight]=\"4\" lineCap=\"round\" lineJoin=\"round\" />\n        <!-- Restaurant / Merchant -->\n        <ui-leaflet-marker [lngLat]=\"origin\" anchor=\"bottom\">\n          <div class=\"flex flex-col items-center\">\n            <span class=\"bg-muted-foreground ring-muted size-3 rounded-full ring-4\"></span>\n            <span class=\"border-border bg-background/90 mt-1 rounded border px-1.5 py-0.5 font-mono text-xs\">\n              Merchant\n            </span>\n          </div>\n        </ui-leaflet-marker>\n        <!-- Live Courier -->\n        <ui-leaflet-marker [lngLat]=\"courierPosition\" anchor=\"center\">\n          <div\n            class=\"relative flex cursor-pointer items-center justify-center\"\n            (click)=\"focusCourier()\"\n            (keydown.enter)=\"focusCourier()\"\n            (keydown.space)=\"focusCourierKey($event)\"\n            role=\"button\"\n            tabindex=\"0\"\n            aria-label=\"Track courier\"\n          >\n            <span class=\"bg-primary/25 absolute size-7 animate-ping rounded-full\"></span>\n            <div\n              class=\"bg-primary text-primary-foreground ring-background flex size-7 items-center justify-center rounded-full shadow-md ring-2\"\n            >\n              🛵\n            </div>\n          </div>\n        </ui-leaflet-marker>\n        <!-- Destination -->\n        <ui-leaflet-marker [lngLat]=\"destination\" anchor=\"bottom\">\n          <div\n            class=\"flex cursor-pointer flex-col items-center\"\n            (click)=\"focusDestination()\"\n            (keydown.enter)=\"focusDestination()\"\n            (keydown.space)=\"focusDestinationKey($event)\"\n            role=\"button\"\n            tabindex=\"0\"\n            aria-label=\"Dropoff point\"\n          >\n            <span class=\"bg-success ring-success/20 size-3 rounded-full ring-4\"></span>\n            <span\n              class=\"border-border bg-background/90 text-success mt-1 rounded border px-1.5 py-0.5 font-mono text-xs font-semibold\"\n            >\n              Delivery Dropoff\n            </span>\n          </div>\n        </ui-leaflet-marker>\n      </ui-leaflet-map>\n    </div>\n\n    <!-- Telemetry & Order Status -->\n    <ui-card class=\"flex flex-col justify-between\">\n      <ui-card-header>\n        <div class=\"flex items-center justify-between\">\n          <span ui-badge variant=\"outline\" class=\"font-mono text-xs\"> ORDER #8924 </span>\n          <span ui-badge class=\"border-success/20 bg-success/10 text-success\">Approaching</span>\n        </div>\n        <ui-card-title class=\"mt-2 text-lg\">Express Courier</ui-card-title>\n        <ui-card-description>\n          Estimated delivery in <strong class=\"text-foreground\">8 mins</strong> (0.8 mi away)\n        </ui-card-description>\n      </ui-card-header>\n      <ui-card-content class=\"space-y-4\">\n        <div class=\"border-border space-y-2 border-t pt-3\">\n          <div class=\"flex items-center justify-between text-xs\">\n            <span class=\"text-muted-foreground\">Driver</span>\n            <span class=\"text-foreground font-medium\">Carlos M. (★ 4.98)</span>\n          </div>\n          <div class=\"flex items-center justify-between text-xs\">\n            <span class=\"text-muted-foreground\">Vehicle</span>\n            <span class=\"text-foreground font-mono\">E-Scooter #412</span>\n          </div>\n          <div class=\"flex items-center justify-between text-xs\">\n            <span class=\"text-muted-foreground\">Destination</span>\n            <span class=\"text-foreground max-w-[170px] truncate font-medium\">Market St &amp; 2nd Ave</span>\n          </div>\n        </div>\n\n        <div class=\"border-border space-y-1.5 border-t pt-3 font-mono text-xs\">\n          <div class=\"text-muted-foreground flex items-center gap-2\">\n            <span class=\"bg-success size-1.5 rounded-full\"></span>\n            <span>12:42 PM — Order picked up</span>\n          </div>\n          <div class=\"text-foreground flex items-center gap-2 font-medium\">\n            <span class=\"bg-primary size-1.5 animate-pulse rounded-full\"></span>\n            <span>12:51 PM — Approaching building</span>\n          </div>\n        </div>\n\n        <div class=\"flex gap-2 pt-2\">\n          <button ui-button variant=\"outline\" size=\"sm\" class=\"flex-1\" (click)=\"focusCourier()\">Track Courier</button>\n          <button ui-button variant=\"outline\" size=\"sm\" class=\"flex-1\" (click)=\"focusDestination()\">\n            Dropoff Point\n          </button>\n        </div>\n      </ui-card-content>\n    </ui-card>\n  `,\n})\nexport class UiLeafletDeliveryTrackingMapComponent {\n  @Input('class') className?: string\n\n  @ViewChild(UiLeafletMapComponent) map?: UiLeafletMapComponent\n\n  protected readonly origin = ORIGIN\n  protected readonly destination = DESTINATION\n  protected readonly courierPosition = COURIER_POSITION\n  protected readonly routeCoords = ROUTE_COORDS\n\n  get hostClass(): string {\n    return cn('grid gap-4 lg:grid-cols-[1fr_320px]', this.className)\n  }\n\n  focusCourier(): void {\n    this.map?.flyTo({ center: COURIER_POSITION, zoom: 14.5, duration: 800 })\n  }\n\n  focusDestination(): void {\n    this.map?.flyTo({ center: DESTINATION, zoom: 15, duration: 800 })\n  }\n\n  focusCourierKey(e: KeyboardEvent): void {\n    e.preventDefault()\n    this.focusCourier()\n  }\n\n  focusDestinationKey(e: KeyboardEvent): void {\n    e.preventDefault()\n    this.focusDestination()\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/leaflet-delivery-tracking-map/leaflet-delivery-tracking-map.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/leaflet-delivery-tracking-map/index.ts",
      "content": "export { UiLeafletDeliveryTrackingMapComponent } from './leaflet-delivery-tracking-map.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/leaflet-delivery-tracking-map/index.ts"
    }
  ],
  "dependencies": [],
  "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/leaflet-map.json"
  ],
  "description": "Live order delivery route on free OpenStreetMap tiles — no API key. Courier position, dropoff destination, and ETA telemetry.",
  "categories": [
    "logistics",
    "delivery",
    "map"
  ]
}