{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "leaflet-asset-tracking-map",
  "title": "Leaflet Asset Tracking Map",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/leaflet-asset-tracking-map/leaflet-asset-tracking-map.component.ts",
      "content": "// Intermodal cargo container tracking on free Esri satellite tiles — no API key — with\n// shipping lanes, cold-chain sensor status, and geofence state. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, ViewChild, signal } 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\nexport type LngLat = [number, number]\n\nexport interface ContainerAsset {\n  id: string\n  containerNo: string\n  type: 'Reefer' | 'Dry Cargo' | 'Hazardous'\n  location: string\n  coords: LngLat\n  temp?: string\n  humidity?: string\n  battery: string\n  geofence: 'Inside Zone' | 'In Transit' | 'Exited Perimeter'\n  status: 'Nominal' | 'Alert' | 'Secured'\n}\n\nexport const DEFAULT_ASSETS: ContainerAsset[] = [\n  {\n    id: 'c-1',\n    containerNo: 'MSKU-948102',\n    type: 'Reefer',\n    location: 'Pasir Panjang Terminal, Berth P5',\n    coords: [103.792, 1.276],\n    temp: '-18.4°C',\n    humidity: '84%',\n    battery: '92%',\n    geofence: 'Inside Zone',\n    status: 'Nominal',\n  },\n  {\n    id: 'c-2',\n    containerNo: 'CMAU-310892',\n    type: 'Dry Cargo',\n    location: 'Singapore Strait, Eastbound Lane',\n    coords: [103.945, 1.205],\n    battery: '78%',\n    geofence: 'In Transit',\n    status: 'Nominal',\n  },\n  {\n    id: 'c-3',\n    containerNo: 'HLXU-772901',\n    type: 'Reefer',\n    location: 'Jurong Island Anchorage',\n    coords: [103.71, 1.245],\n    temp: '+4.2°C',\n    humidity: '62%',\n    battery: '64%',\n    geofence: 'Inside Zone',\n    status: 'Alert',\n  },\n  {\n    id: 'c-4',\n    containerNo: 'OOLU-550183',\n    type: 'Hazardous',\n    location: 'Tuas Port, Hazardous Bay T2',\n    coords: [103.635, 1.285],\n    battery: '95%',\n    geofence: 'Inside Zone',\n    status: 'Secured',\n  },\n]\n\n/** Eastbound / westbound shipping lanes through the Singapore Strait. */\nconst SHIPPING_LANES: LngLat[][] = [\n  [\n    [103.5, 1.16],\n    [103.7, 1.18],\n    [103.9, 1.2],\n    [104.1, 1.22],\n  ],\n  [\n    [103.5, 1.21],\n    [103.7, 1.24],\n    [103.9, 1.27],\n    [104.1, 1.29],\n  ],\n]\n\n// Central Singapore as [lng, lat] — a stable reference so the map's center input never re-fires.\nconst SINGAPORE_CENTER: LngLat = [103.8519, 1.29027]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-leaflet-asset-tracking-map, [ui-leaflet-asset-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-asset-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=\"satellite-streets\" [center]=\"singaporeCenter\" [zoom]=\"11\" class=\"h-full w-full\">\n        <!-- Strait shipping lanes -->\n        @for (lane of shippingLanes; track $index) {\n          <ui-leaflet-polyline [lngLatPath]=\"lane\" color=\"#22d3ee\" [weight]=\"2\" [opacity]=\"0.55\" dashArray=\"6 8\" />\n        }\n\n        @for (a of assets; track a.id) {\n          <ui-leaflet-marker [lngLat]=\"a.coords\" anchor=\"bottom\">\n            <button\n              type=\"button\"\n              class=\"group relative flex cursor-pointer flex-col items-center\"\n              (click)=\"selectAsset(a)\"\n            >\n              <span [class]=\"pinClass(a)\">\n                <svg\n                  class=\"size-4\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  aria-hidden=\"true\"\n                >\n                  <path\n                    d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\"\n                  />\n                  <path d=\"m3.3 7 8.7 5 8.7-5\" />\n                  <path d=\"M12 22V12\" />\n                </svg>\n              </span>\n              <span\n                class=\"border-border bg-background/90 mt-1 rounded border px-1 py-0.5 font-mono text-xs font-bold shadow-xs\"\n              >\n                {{ shortNo(a) }}\n              </span>\n            </button>\n          </ui-leaflet-marker>\n        }\n      </ui-leaflet-map>\n    </div>\n\n    <!-- Asset Telemetry & Sensor Card -->\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\">\n            {{ activeAsset().type }}\n          </span>\n          <span ui-badge [class]=\"statusClass(activeAsset())\">\n            {{ activeAsset().status }}\n          </span>\n        </div>\n        <ui-card-title class=\"mt-2 font-mono text-lg\">{{ activeAsset().containerNo }}</ui-card-title>\n        <ui-card-description class=\"text-xs\">{{ activeAsset().location }}</ui-card-description>\n      </ui-card-header>\n      <ui-card-content class=\"space-y-4\">\n        <div class=\"border-border bg-muted/40 grid grid-cols-2 gap-2 rounded-lg border p-2.5 font-mono text-xs\">\n          @if (activeAsset().temp) {\n            <div>\n              <div class=\"text-muted-foreground text-xs uppercase\">Cold Chain Temp</div>\n              <div [class]=\"tempClass(activeAsset())\">\n                {{ activeAsset().temp }}\n              </div>\n            </div>\n          }\n          @if (activeAsset().humidity) {\n            <div>\n              <div class=\"text-muted-foreground text-xs uppercase\">Humidity</div>\n              <div class=\"text-foreground text-sm font-bold\">{{ activeAsset().humidity }}</div>\n            </div>\n          }\n          <div>\n            <div class=\"text-muted-foreground text-xs uppercase\">IoT Battery</div>\n            <div class=\"text-foreground text-sm font-bold\">{{ activeAsset().battery }}</div>\n          </div>\n          <div>\n            <div class=\"text-muted-foreground text-xs uppercase\">Geofence</div>\n            <div class=\"text-foreground text-sm font-bold\">{{ activeAsset().geofence }}</div>\n          </div>\n        </div>\n\n        <div class=\"border-border space-y-1 border-t pt-3\">\n          <div class=\"text-muted-foreground mb-1 font-mono text-xs tracking-wider uppercase\">Tracked Cargo Units</div>\n          @for (a of assets; track a.id) {\n            <button type=\"button\" [class]=\"rowClass(a)\" (click)=\"selectAsset(a)\">\n              <span class=\"font-mono\">{{ a.containerNo }}</span>\n              <span [class]=\"rowTypeClass(a)\">\n                {{ a.type }}\n              </span>\n            </button>\n          }\n        </div>\n\n        <button ui-button variant=\"outline\" size=\"sm\" class=\"w-full font-mono text-xs\" (click)=\"centerOnActive()\">\n          Center on Container\n        </button>\n      </ui-card-content>\n    </ui-card>\n  `,\n})\nexport class UiLeafletAssetTrackingMapComponent {\n  @Input() assets: ContainerAsset[] = DEFAULT_ASSETS\n  @Input('class') className?: string\n\n  @ViewChild(UiLeafletMapComponent) map?: UiLeafletMapComponent\n\n  protected readonly singaporeCenter = SINGAPORE_CENTER\n  protected readonly shippingLanes = SHIPPING_LANES\n\n  readonly activeId = signal(DEFAULT_ASSETS[0]?.id ?? '')\n\n  get hostClass(): string {\n    return cn('grid gap-4 lg:grid-cols-[1fr_320px]', this.className)\n  }\n\n  activeAsset(): ContainerAsset {\n    return this.assets.find((a) => a.id === this.activeId()) ?? this.assets[0]!\n  }\n\n  selectAsset(a: ContainerAsset): void {\n    this.activeId.set(a.id)\n    this.map?.flyTo({ center: a.coords, zoom: 11.5 })\n  }\n\n  centerOnActive(): void {\n    this.selectAsset(this.activeAsset())\n  }\n\n  shortNo(a: ContainerAsset): string {\n    return a.containerNo.split('-')[1] ?? a.containerNo\n  }\n\n  pinClass(a: ContainerAsset): string {\n    return cn(\n      'flex size-7 items-center justify-center rounded-md shadow-md ring-2',\n      a.status === 'Alert'\n        ? 'bg-warning text-white ring-amber-400'\n        : 'bg-primary text-primary-foreground ring-primary/25',\n    )\n  }\n\n  statusClass(a: ContainerAsset): string {\n    return a.status === 'Alert'\n      ? 'border-warning/20 bg-warning/10 text-warning'\n      : 'border-success/20 bg-success/10 text-success'\n  }\n\n  tempClass(a: ContainerAsset): string {\n    return cn('text-sm font-bold', a.status === 'Alert' ? 'text-warning' : 'text-foreground')\n  }\n\n  rowClass(a: ContainerAsset): string {\n    return cn(\n      'flex w-full items-center justify-between rounded-md px-2 py-1 text-xs transition-colors',\n      this.activeId() === a.id\n        ? 'bg-accent text-accent-foreground font-semibold'\n        : 'hover:bg-muted text-muted-foreground',\n    )\n  }\n\n  rowTypeClass(a: ContainerAsset): string {\n    return cn('font-mono text-xs', a.status === 'Alert' ? 'text-warning font-bold' : 'opacity-70')\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/leaflet-asset-tracking-map/leaflet-asset-tracking-map.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/leaflet-asset-tracking-map/index.ts",
      "content": "export {\n  UiLeafletAssetTrackingMapComponent,\n  DEFAULT_ASSETS,\n  type ContainerAsset,\n  type LngLat,\n} from './leaflet-asset-tracking-map.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/leaflet-asset-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": "Intermodal cargo container tracking on free Esri satellite tiles — no API key — with shipping lanes, cold-chain sensor status, and geofence state.",
  "categories": [
    "logistics",
    "supply-chain",
    "map"
  ]
}