@aggdirect/coolmap 3.0.2 → 5.0.0

package/fesm2022/coolmap.mjs

@@ -0,0 +1,1436 @@
+import * as i0 from '@angular/core';
+import { Component, input, EventEmitter, Output, signal, HostListener, inject, Input, computed, DestroyRef, ChangeDetectorRef, viewChild, effect, CUSTOM_ELEMENTS_SCHEMA, ViewChild } from '@angular/core';
+import * as i2$2 from '@angular/forms';
+import { FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { COOLMAP_CONFIG, UtilsService, CoolmapService, MapboxService } from 'coolmap-services';
+import * as i2 from '@angular/common';
+import { NgClass, CommonModule, CurrencyPipe } from '@angular/common';
+import * as i1 from 'lucide-angular';
+import { X, LucideAngularModule, LoaderCircle, Info, CarFront, CheckCircle, Share2, ChevronLeft, ChevronRight, Check, ChevronDown, Search, Route } from 'lucide-angular';
+import * as i2$1 from '@angular/cdk/scrolling';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { pairwise, filter } from 'rxjs';
+
+class Coolmap {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: Coolmap, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: Coolmap, isStandalone: true, selector: "lib-coolmap", ngImport: i0, template: ``, isInline: true, styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: Coolmap, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-coolmap', imports: [], template: `` }]
+        }] });
+
+class SmsCardDetailsComponent {
+    modalOpen = input(false, ...(ngDevMode ? [{ debugName: "modalOpen" }] : []));
+    smsListcollapse = input(false, ...(ngDevMode ? [{ debugName: "smsListcollapse" }] : []));
+    driverListcollapse = input(false, ...(ngDevMode ? [{ debugName: "driverListcollapse" }] : []));
+    modalOpenChange = new EventEmitter();
+    close() {
+        this.modalOpenChange.emit(false);
+    }
+    icons = {
+        X,
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SmsCardDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SmsCardDetailsComponent, isStandalone: true, selector: "lib-sms-card-details", inputs: { modalOpen: { classPropertyName: "modalOpen", publicName: "modalOpen", isSignal: true, isRequired: false, transformFunction: null }, smsListcollapse: { classPropertyName: "smsListcollapse", publicName: "smsListcollapse", isSignal: true, isRequired: false, transformFunction: null }, driverListcollapse: { classPropertyName: "driverListcollapse", publicName: "driverListcollapse", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modalOpenChange: "modalOpenChange" }, ngImport: i0, template: "@if (modalOpen()) {\n<div\n  class=\"fixed lg:absolute inset-0 overflow-y-auto lg:top-0 z-[111] lg:z-auto\"\n  [ngClass]=\"smsListcollapse() && driverListcollapse() ? 'lg:left-[425px]' : 'lg:left-[670px]'\"\n>\n  <div class=\"fixed inset-0 bg-black/50\" (click)=\"close()\"></div>\n  <div class=\"flex min-h-full lg:items-start lg:justify-start items-center justify-center p-3\">\n    <div\n      class=\"relative bg-white dark:bg-slate-800 rounded-lg shadow-xl animate-slide-up w-[350px]\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      <div\n        class=\"flex items-center justify-between px-[12px] py-[10px] border-b border-gray-200 dark:border-slate-700 dark:bg-slate-900 rounded-t-lg\"\n      >\n        <h3 class=\"flex items-center gap-1 text-[13px] font-medium text-gray-900 dark:text-white\">\n          SMS All Drivers\n        </h3>\n        <button\n          (click)=\"close()\"\n          class=\"p-2 hover:bg-gray-100 dark:hover:bg-slate-700 rounded-lg transition-colors\"\n        >\n          <lucide-icon [img]=\"icons.X\" [size]=\"20\"></lucide-icon>\n        </button>\n      </div>\n      <div class=\"max-h-[70vh] overflow-y-auto p-2\">\n        <div class=\"device-info\">\n          <div\n            class=\"flex justify-between py-2 border-b border-gray-200 dark:border-slate-600 text-sm\"\n          >\n            <span class=\"text-gray-500 dark:text-slate-500\">Jobcode</span>\n            <span class=\"value\">016164</span>\n          </div>\n          <div\n            class=\"flex justify-between py-2 border-b border-gray-200 dark:border-slate-600 text-sm\"\n          >\n            <span class=\"text-gray-500 dark:text-slate-500\">Date</span>\n            <span class=\"value\">2026-4-1</span>\n          </div>\n          <div\n            class=\"flex justify-between py-2 border-b border-gray-200 dark:border-slate-600 text-sm\"\n          >\n            <span class=\"text-gray-500 dark:text-slate-500\">Total tasks</span>\n            <span class=\"value\">1</span>\n          </div>\n          <div\n            class=\"flex justify-between py-2 border-b border-gray-200 dark:border-slate-600 text-sm\"\n          >\n            <span class=\"text-gray-500 dark:text-slate-500\">Material</span>\n            <span class=\"value\">#2 Washed Gravel *</span>\n          </div>\n          <div\n            class=\"flex justify-between py-2 border-b border-gray-200 dark:border-slate-600 text-sm\"\n          >\n            <span class=\"text-gray-500 dark:text-slate-500\">Unit</span>\n            <span class=\"value\">Ton</span>\n          </div>\n          <div\n            class=\"flex justify-between py-2 border-b border-gray-200 dark:border-slate-600 text-sm\"\n          >\n            <span class=\"text-gray-500 dark:text-slate-500\">Pickup Address</span>\n            <span class=\"value\">vaibhav loc-1</span>\n          </div>\n          <div\n            class=\"flex justify-between py-2 border-b border-gray-200 dark:border-slate-600 text-sm\"\n          >\n            <span class=\"text-gray-500 dark:text-slate-500\">Delivery Address</span>\n            <span class=\"value\">vaibhav loc-2</span>\n          </div>\n        </div>\n        <div class=\"mt-4\">\n          <textarea\n            rows=\"2\"\n            placeholder=\"Text here....\"\n            class=\"w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-slate-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-blue focus:border-transparent text-sm resize-none ng-pristine ng-valid ng-touched\"\n          ></textarea>\n        </div>\n        <div class=\"mt-2 mb-2 flex justify-end\">\n          <button\n            type=\"button\"\n            class=\"inline-flex items-center justify-center gap-2 px-3 py-1 bg-amber-500 hover:bg-amber-600 disabled:opacity-50 text-white font-medium rounded-md transition-colors text-sm\"\n          >\n            Send SMS\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n}\n", styles: ["@keyframes slide-up{0%{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.animate-fade-in{animation:fade-in .2s ease-out}.animate-slide-up{animation:slide-up .2s ease-out}.device-info{display:flex;flex-direction:column;gap:8px}.value{font-size:13px;font-weight:500;color:var(--text-primary, #1e293b)}:host-context(.dark) .value{color:#f1f5f9}.value.status-ok{color:#22c55e}.value.status-warning{color:#f59e0b}.value.status-error{color:#ef4444}\n"], dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SmsCardDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-sms-card-details', standalone: true, imports: [LucideAngularModule, NgClass], template: "@if (modalOpen()) {\n<div\n  class=\"fixed lg:absolute inset-0 overflow-y-auto lg:top-0 z-[111] lg:z-auto\"\n  [ngClass]=\"smsListcollapse() && driverListcollapse() ? 'lg:left-[425px]' : 'lg:left-[670px]'\"\n>\n  <div class=\"fixed inset-0 bg-black/50\" (click)=\"close()\"></div>\n  <div class=\"flex min-h-full lg:items-start lg:justify-start items-center justify-center p-3\">\n    <div\n      class=\"relative bg-white dark:bg-slate-800 rounded-lg shadow-xl animate-slide-up w-[350px]\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      <div\n        class=\"flex items-center justify-between px-[12px] py-[10px] border-b border-gray-200 dark:border-slate-700 dark:bg-slate-900 rounded-t-lg\"\n      >\n        <h3 class=\"flex items-center gap-1 text-[13px] font-medium text-gray-900 dark:text-white\">\n          SMS All Drivers\n        </h3>\n        <button\n          (click)=\"close()\"\n          class=\"p-2 hover:bg-gray-100 dark:hover:bg-slate-700 rounded-lg transition-colors\"\n        >\n          <lucide-icon [img]=\"icons.X\" [size]=\"20\"></lucide-icon>\n        </button>\n      </div>\n      <div class=\"max-h-[70vh] overflow-y-auto p-2\">\n        <div class=\"device-info\">\n          <div\n            class=\"flex justify-between py-2 border-b border-gray-200 dark:border-slate-600 text-sm\"\n          >\n            <span class=\"text-gray-500 dark:text-slate-500\">Jobcode</span>\n            <span class=\"value\">016164</span>\n          </div>\n          <div\n            class=\"flex justify-between py-2 border-b border-gray-200 dark:border-slate-600 text-sm\"\n          >\n            <span class=\"text-gray-500 dark:text-slate-500\">Date</span>\n            <span class=\"value\">2026-4-1</span>\n          </div>\n          <div\n            class=\"flex justify-between py-2 border-b border-gray-200 dark:border-slate-600 text-sm\"\n          >\n            <span class=\"text-gray-500 dark:text-slate-500\">Total tasks</span>\n            <span class=\"value\">1</span>\n          </div>\n          <div\n            class=\"flex justify-between py-2 border-b border-gray-200 dark:border-slate-600 text-sm\"\n          >\n            <span class=\"text-gray-500 dark:text-slate-500\">Material</span>\n            <span class=\"value\">#2 Washed Gravel *</span>\n          </div>\n          <div\n            class=\"flex justify-between py-2 border-b border-gray-200 dark:border-slate-600 text-sm\"\n          >\n            <span class=\"text-gray-500 dark:text-slate-500\">Unit</span>\n            <span class=\"value\">Ton</span>\n          </div>\n          <div\n            class=\"flex justify-between py-2 border-b border-gray-200 dark:border-slate-600 text-sm\"\n          >\n            <span class=\"text-gray-500 dark:text-slate-500\">Pickup Address</span>\n            <span class=\"value\">vaibhav loc-1</span>\n          </div>\n          <div\n            class=\"flex justify-between py-2 border-b border-gray-200 dark:border-slate-600 text-sm\"\n          >\n            <span class=\"text-gray-500 dark:text-slate-500\">Delivery Address</span>\n            <span class=\"value\">vaibhav loc-2</span>\n          </div>\n        </div>\n        <div class=\"mt-4\">\n          <textarea\n            rows=\"2\"\n            placeholder=\"Text here....\"\n            class=\"w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-slate-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-blue focus:border-transparent text-sm resize-none ng-pristine ng-valid ng-touched\"\n          ></textarea>\n        </div>\n        <div class=\"mt-2 mb-2 flex justify-end\">\n          <button\n            type=\"button\"\n            class=\"inline-flex items-center justify-center gap-2 px-3 py-1 bg-amber-500 hover:bg-amber-600 disabled:opacity-50 text-white font-medium rounded-md transition-colors text-sm\"\n          >\n            Send SMS\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n}\n", styles: ["@keyframes slide-up{0%{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.animate-fade-in{animation:fade-in .2s ease-out}.animate-slide-up{animation:slide-up .2s ease-out}.device-info{display:flex;flex-direction:column;gap:8px}.value{font-size:13px;font-weight:500;color:var(--text-primary, #1e293b)}:host-context(.dark) .value{color:#f1f5f9}.value.status-ok{color:#22c55e}.value.status-warning{color:#f59e0b}.value.status-error{color:#ef4444}\n"] }]
+        }], propDecorators: { modalOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalOpen", required: false }] }], smsListcollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "smsListcollapse", required: false }] }], driverListcollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "driverListcollapse", required: false }] }], modalOpenChange: [{
+                type: Output
+            }] } });
+
+class DriverListComponent {
+    showSmsModal = false;
+    modalOpen = input(false, ...(ngDevMode ? [{ debugName: "modalOpen" }] : []));
+    driverListcollapse = input(false, ...(ngDevMode ? [{ debugName: "driverListcollapse" }] : []));
+    smsListcollapse = signal(false, ...(ngDevMode ? [{ debugName: "smsListcollapse" }] : []));
+    modalOpenChange = new EventEmitter();
+    close() {
+        this.modalOpenChange.emit(false);
+    }
+    icons = {
+        X,
+    };
+    showSmsModalPopup() {
+        this.showSmsModal = !this.showSmsModal;
+        this.smsListcollapse.set(this.showSmsModal);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DriverListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DriverListComponent, isStandalone: true, selector: "lib-driver-list", inputs: { modalOpen: { classPropertyName: "modalOpen", publicName: "modalOpen", isSignal: true, isRequired: false, transformFunction: null }, driverListcollapse: { classPropertyName: "driverListcollapse", publicName: "driverListcollapse", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modalOpenChange: "modalOpenChange" }, ngImport: i0, template: "@if (modalOpen()) {\n<div\n  class=\"absolute inset-0 overflow-y-auto top-0\"\n  [ngClass]=\"driverListcollapse() ? 'left-[60px]' : 'left-[300px]'\"\n>\n  <div class=\"fixed inset-0 bg-black/50\" (click)=\"close()\"></div>\n  <div class=\"flex min-h-full items-start justify-start p-3\">\n    <div\n      class=\"relative bg-white dark:bg-slate-800 rounded-lg shadow-xl animate-slide-up w-[350px]\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      <div\n        class=\"flex items-center justify-between px-[12px] py-[10px] border-b border-gray-200 dark:border-slate-700 dark:bg-slate-900 rounded-t-lg\"\n      >\n        <h3 class=\"flex items-center gap-1 font-medium text-gray-900 dark:text-white text-[13px]\">\n          Driver List\n        </h3>\n        <button\n          type=\"button\"\n          class=\"inline-flex items-center justify-center gap-2 px-3 sm:px-6 py-1 bg-amber-500 hover:bg-amber-600 disabled:opacity-50 text-white font-medium rounded-md transition-colors text-sm\"\n          (click)=\"showSmsModalPopup()\"\n        >\n          SMS\n        </button>\n        <button\n          (click)=\"close()\"\n          class=\"p-2 hover:bg-gray-100 dark:hover:bg-slate-700 rounded-lg transition-colors\"\n        >\n          <lucide-icon [img]=\"icons.X\" [size]=\"20\"></lucide-icon>\n        </button>\n      </div>\n      <div class=\"max-h-[40vh] overflow-y-auto p-2\">\n        <ul class=\"flex flex-col gap-2\">\n          <li>\n            <div\n              class=\"driver-row-1 flex flex-col driver-card bg-gray-100 dark:bg-slate-900 border border-gray-300 dark:border-slate-700 px-2 py-2\"\n            >\n              <span class=\"driver-name\">Nilufarrr Lokmannn</span>\n              <span class=\"com-name\">Aggdirect Android LLC 2</span>\n              <div class=\"cont_del flex justify-between text-black dark:text-grey-600\">\n                <small>Driver contact: <b>8318428713</b></small>\n                <small>Company contact: <b>8318428713</b></small>\n              </div>\n            </div>\n          </li>\n          <li>\n            <div\n              class=\"driver-row-1 flex flex-col driver-card bg-gray-100 dark:bg-slate-900 border border-gray-300 dark:border-slate-700 px-2 py-2\"\n            >\n              <span class=\"driver-name\">Nilufarrr Lokmannn</span>\n              <span class=\"com-name\">Aggdirect Android LLC 2</span>\n              <div class=\"cont_del flex justify-between\">\n                <small>Driver contact: <b>8318428713</b></small>\n                <small>Company contact: <b>8318428713</b></small>\n              </div>\n            </div>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </div>\n</div>\n}\n\n<lib-sms-card-details\n  [(modalOpen)]=\"showSmsModal\"\n  [smsListcollapse]=\"smsListcollapse()\"\n  [driverListcollapse]=\"driverListcollapse()\"\n></lib-sms-card-details>\n", styles: [".driver-name{font-size:12px;font-weight:600;color:var(--text-primary, #1e293b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}:host-context(.dark) .driver-name{color:#f1f5f9}.com-name,.cont_del{font-size:12px;color:var(--text-secondary, #64748b);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cont_del{font-size:12px;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.driver-card{position:relative;display:flex;flex-direction:column;gap:2px;border-radius:8px;cursor:pointer;transition:all .15s ease;min-height:72px}@keyframes slide-up{0%{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.animate-fade-in{animation:fade-in .2s ease-out}.animate-slide-up{animation:slide-up .2s ease-out}\n"], dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "component", type: SmsCardDetailsComponent, selector: "lib-sms-card-details", inputs: ["modalOpen", "smsListcollapse", "driverListcollapse"], outputs: ["modalOpenChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DriverListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-driver-list', standalone: true, imports: [LucideAngularModule, SmsCardDetailsComponent, NgClass], template: "@if (modalOpen()) {\n<div\n  class=\"absolute inset-0 overflow-y-auto top-0\"\n  [ngClass]=\"driverListcollapse() ? 'left-[60px]' : 'left-[300px]'\"\n>\n  <div class=\"fixed inset-0 bg-black/50\" (click)=\"close()\"></div>\n  <div class=\"flex min-h-full items-start justify-start p-3\">\n    <div\n      class=\"relative bg-white dark:bg-slate-800 rounded-lg shadow-xl animate-slide-up w-[350px]\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      <div\n        class=\"flex items-center justify-between px-[12px] py-[10px] border-b border-gray-200 dark:border-slate-700 dark:bg-slate-900 rounded-t-lg\"\n      >\n        <h3 class=\"flex items-center gap-1 font-medium text-gray-900 dark:text-white text-[13px]\">\n          Driver List\n        </h3>\n        <button\n          type=\"button\"\n          class=\"inline-flex items-center justify-center gap-2 px-3 sm:px-6 py-1 bg-amber-500 hover:bg-amber-600 disabled:opacity-50 text-white font-medium rounded-md transition-colors text-sm\"\n          (click)=\"showSmsModalPopup()\"\n        >\n          SMS\n        </button>\n        <button\n          (click)=\"close()\"\n          class=\"p-2 hover:bg-gray-100 dark:hover:bg-slate-700 rounded-lg transition-colors\"\n        >\n          <lucide-icon [img]=\"icons.X\" [size]=\"20\"></lucide-icon>\n        </button>\n      </div>\n      <div class=\"max-h-[40vh] overflow-y-auto p-2\">\n        <ul class=\"flex flex-col gap-2\">\n          <li>\n            <div\n              class=\"driver-row-1 flex flex-col driver-card bg-gray-100 dark:bg-slate-900 border border-gray-300 dark:border-slate-700 px-2 py-2\"\n            >\n              <span class=\"driver-name\">Nilufarrr Lokmannn</span>\n              <span class=\"com-name\">Aggdirect Android LLC 2</span>\n              <div class=\"cont_del flex justify-between text-black dark:text-grey-600\">\n                <small>Driver contact: <b>8318428713</b></small>\n                <small>Company contact: <b>8318428713</b></small>\n              </div>\n            </div>\n          </li>\n          <li>\n            <div\n              class=\"driver-row-1 flex flex-col driver-card bg-gray-100 dark:bg-slate-900 border border-gray-300 dark:border-slate-700 px-2 py-2\"\n            >\n              <span class=\"driver-name\">Nilufarrr Lokmannn</span>\n              <span class=\"com-name\">Aggdirect Android LLC 2</span>\n              <div class=\"cont_del flex justify-between\">\n                <small>Driver contact: <b>8318428713</b></small>\n                <small>Company contact: <b>8318428713</b></small>\n              </div>\n            </div>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </div>\n</div>\n}\n\n<lib-sms-card-details\n  [(modalOpen)]=\"showSmsModal\"\n  [smsListcollapse]=\"smsListcollapse()\"\n  [driverListcollapse]=\"driverListcollapse()\"\n></lib-sms-card-details>\n", styles: [".driver-name{font-size:12px;font-weight:600;color:var(--text-primary, #1e293b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}:host-context(.dark) .driver-name{color:#f1f5f9}.com-name,.cont_del{font-size:12px;color:var(--text-secondary, #64748b);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cont_del{font-size:12px;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.driver-card{position:relative;display:flex;flex-direction:column;gap:2px;border-radius:8px;cursor:pointer;transition:all .15s ease;min-height:72px}@keyframes slide-up{0%{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.animate-fade-in{animation:fade-in .2s ease-out}.animate-slide-up{animation:slide-up .2s ease-out}\n"] }]
+        }], propDecorators: { modalOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalOpen", required: false }] }], driverListcollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "driverListcollapse", required: false }] }], modalOpenChange: [{
+                type: Output
+            }] } });
+
+class JobDetailsComponent {
+    modalOpen = input(false, ...(ngDevMode ? [{ debugName: "modalOpen" }] : []));
+    routeData = input(null, ...(ngDevMode ? [{ debugName: "routeData" }] : []));
+    modalOpenChange = new EventEmitter();
+    dragX = signal(0, ...(ngDevMode ? [{ debugName: "dragX" }] : []));
+    dragY = signal(0, ...(ngDevMode ? [{ debugName: "dragY" }] : []));
+    isDragging = false;
+    dragStartX = 0;
+    dragStartY = 0;
+    dragInitialX = 0;
+    dragInitialY = 0;
+    close() {
+        this.modalOpenChange.emit(false);
+    }
+    icons = {
+        X,
+    };
+    startDrag(event) {
+        this.isDragging = true;
+        this.dragStartX = event.clientX;
+        this.dragStartY = event.clientY;
+        this.dragInitialX = this.dragX();
+        this.dragInitialY = this.dragY();
+        event.preventDefault();
+    }
+    onMouseMove(event) {
+        if (!this.isDragging || !this.modalOpen())
+            return;
+        this.dragX.set(this.dragInitialX + (event.clientX - this.dragStartX));
+        this.dragY.set(this.dragInitialY + (event.clientY - this.dragStartY));
+    }
+    onMouseUp() {
+        this.isDragging = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JobDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: JobDetailsComponent, isStandalone: true, selector: "lib-job-details", inputs: { modalOpen: { classPropertyName: "modalOpen", publicName: "modalOpen", isSignal: true, isRequired: false, transformFunction: null }, routeData: { classPropertyName: "routeData", publicName: "routeData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modalOpenChange: "modalOpenChange" }, host: { listeners: { "document:mousemove": "onMouseMove($event)", "document:mouseup": "onMouseUp()" } }, ngImport: i0, template: "@if (modalOpen()) {\n<div class=\"z-[111] xl:z-[80] bottom-0 lg:left-[300px] fixed lg:absolute inset-0 overflow-y-auto\">\n  <div class=\"fixed inset-0 bg-black/50\" (click)=\"close()\"></div>\n  <div class=\"flex min-h-full lg:items-end lg:justify-start items-center justify-center p-3\">\n    <div\n      class=\"relative bg-white dark:bg-slate-800 rounded-lg shadow-xl animate-slide-up w-[350px]\"\n      [style.transform]=\"'translate(' + dragX() + 'px, ' + dragY() + 'px)'\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      <div\n        class=\"flex items-center justify-between px-[12px] py-[10px] border-b cursor-move border-gray-200 dark:border-slate-700 dark:bg-slate-900 rounded-t-lg\"\n        (mousedown)=\"startDrag($event)\"\n      >\n        <h3 class=\"flex items-center gap-1 font-medium text-gray-900 dark:text-white text-[13px]\">\n          Job Details\n        </h3>\n        <button\n          (click)=\"close()\"\n          class=\"p-2 hover:bg-gray-100 dark:hover:bg-slate-700 rounded-lg transition-colors\"\n        >\n          <lucide-icon [img]=\"icons.X\" [size]=\"20\"></lucide-icon>\n        </button>\n      </div>\n      <div class=\"max-h-[50vh] overflow-y-auto p-2\">\n        <div class=\"stats-row\">\n          <div class=\"stat-item active\" title=\"Active routes (assigned + in progress)\">\n            <span class=\"stat-count\">{{ routeData()?.values?.Done || 0 }}</span>\n            <span class=\"stat-label\">Done</span>\n          </div>\n\n          <div class=\"stat-item completed\" title=\"Completed tasks\">\n            <span class=\"stat-count\">{{ routeData()?.values?.Incomplete || 0 }}</span>\n            <span class=\"stat-label\">Imcomplete</span>\n          </div>\n          <div class=\"stat-item declined\" title=\"Declined routes - needs attention\">\n            <span class=\"stat-count\">{{ routeData()?.values?.Ongoing || 0 }}</span>\n            <span class=\"stat-label\">Ongoing</span>\n          </div>\n          <div class=\"stat-item scheduled\" title=\"Scheduled jobs for today\">\n            <span class=\"stat-count\">{{ routeData()?.values?.Open || 1 }}</span>\n            <span class=\"stat-label\">Open</span>\n          </div>\n        </div>\n        <div\n          class=\"location-flow bg-gray-100 dark:bg-slate-900 border border-gray-300 dark:border-slate-700 px-2 py-2 rounded-lg mt-4\"\n        >\n          <span class=\"pickup truncate block\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"10\"\n              height=\"10\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              class=\"inline mr-1 text-green-500\"\n            >\n              <circle cx=\"12\" cy=\"12\" r=\"8\" />\n            </svg>\n            Pickup: {{ routeData()?.pickup_location || 'N/A' }}\n          </span>\n          <span class=\"delivery truncate block mt-1\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"10\"\n              height=\"10\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              class=\"inline mr-1 text-blue-500\"\n            >\n              <circle cx=\"12\" cy=\"12\" r=\"8\" />\n            </svg>\n            Delivery: {{ routeData()?.delivery_location || 'N/A' }}\n          </span>\n        </div>\n        <div class=\"device-info mt-2\">\n          <div\n            class=\"flex justify-between py-2 border-b border-gray-200 dark:border-slate-600 text-xs\"\n          >\n            <span class=\"text-gray-500 dark:text-slate-500\">Jobcode</span>\n            <span class=\"font-medium truncate max-w-[65%] text-right\">{{ routeData()?.order_number || 'N/A' }}</span>\n          </div>\n          <div\n            class=\"flex justify-between py-2 border-b border-gray-200 dark:border-slate-600 text-xs\"\n          >\n            <span class=\"text-gray-500 dark:text-slate-500\">Customer</span>\n            <span class=\"font-medium truncate max-w-[65%] text-right\">{{ routeData()?.customer_name || 'N/A' }}</span>\n          </div>\n          <div\n            class=\"flex justify-between py-2 border-b border-gray-200 dark:border-slate-600 text-xs\"\n          >\n            <span class=\"text-gray-500 dark:text-slate-500\">Project Name</span>\n            <span class=\"font-medium truncate max-w-[65%] text-right\">{{ routeData()?.project || 'N/A' }}</span>\n          </div>\n          <div\n            class=\"flex justify-between py-2 border-b border-gray-200 dark:border-slate-600 text-xs\"\n          >\n            <span class=\"text-gray-500 dark:text-slate-500\">Job Type</span>\n            <span class=\"font-medium truncate max-w-[65%] text-right\">{{ routeData()?.unit || 'N/A' }}</span>\n          </div>\n          <div\n            class=\"flex justify-between py-2 border-b border-gray-200 dark:border-slate-600 text-xs\"\n          >\n            <span class=\"text-gray-500 dark:text-slate-500\">Material</span>\n            <span class=\"font-medium truncate max-w-[65%] text-right\">{{ routeData()?.material || 'General Freight' }}</span>\n          </div>\n          <div\n            class=\"flex justify-between py-2 border-b border-gray-200 dark:border-slate-600 text-xs\"\n          >\n            <span class=\"text-gray-500 dark:text-slate-500\">Customer Contact</span>\n            <span class=\"font-medium\">{{ routeData()?.customer_contact || 'None' }}</span>\n          </div>\n          <div class=\"flex justify-between py-2 text-xs\">\n            <span class=\"text-gray-500 dark:text-slate-500\">Delivery Contact</span>\n            <span class=\"font-medium\">{{ routeData()?.delivery_contact || 'None' }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n}\n", styles: [".stats-row{display:flex;align-items:center;gap:20px;font-size:12px}.stat-item{display:flex;align-items:center;gap:6px;cursor:default}.stat-count{font-size:15px;font-weight:700;line-height:1}.stat-item.active .stat-count{color:#60a5fa}.stat-item.completed .stat-count{color:#4ade80}.stat-item.declined .stat-count{color:#f87171}.stat-item.scheduled .stat-count{color:#a78bfa}.stat-item.pending .stat-count{color:#fbbf24}.location-flow{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:11px;color:var(--text-secondary, #64748b);margin-bottom:6px}.location-flow .pickup{display:flex;align-items:center;gap:3px;color:#22c55e}.location-flow .pickup svg{width:8px;height:8px}.location-flow .delivery{display:flex;align-items:center;gap:3px;color:#ef4444}.location-flow .delivery svg{width:8px;height:8px}@keyframes slide-up{0%{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.animate-fade-in{animation:fade-in .2s ease-out}.animate-slide-up{animation:slide-up .2s ease-out}\n"], dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JobDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-job-details', standalone: true, imports: [LucideAngularModule], template: "@if (modalOpen()) {\n<div class=\"z-[111] xl:z-[80] bottom-0 lg:left-[300px] fixed lg:absolute inset-0 overflow-y-auto\">\n  <div class=\"fixed inset-0 bg-black/50\" (click)=\"close()\"></div>\n  <div class=\"flex min-h-full lg:items-end lg:justify-start items-center justify-center p-3\">\n    <div\n      class=\"relative bg-white dark:bg-slate-800 rounded-lg shadow-xl animate-slide-up w-[350px]\"\n      [style.transform]=\"'translate(' + dragX() + 'px, ' + dragY() + 'px)'\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      <div\n        class=\"flex items-center justify-between px-[12px] py-[10px] border-b cursor-move border-gray-200 dark:border-slate-700 dark:bg-slate-900 rounded-t-lg\"\n        (mousedown)=\"startDrag($event)\"\n      >\n        <h3 class=\"flex items-center gap-1 font-medium text-gray-900 dark:text-white text-[13px]\">\n          Job Details\n        </h3>\n        <button\n          (click)=\"close()\"\n          class=\"p-2 hover:bg-gray-100 dark:hover:bg-slate-700 rounded-lg transition-colors\"\n        >\n          <lucide-icon [img]=\"icons.X\" [size]=\"20\"></lucide-icon>\n        </button>\n      </div>\n      <div class=\"max-h-[50vh] overflow-y-auto p-2\">\n        <div class=\"stats-row\">\n          <div class=\"stat-item active\" title=\"Active routes (assigned + in progress)\">\n            <span class=\"stat-count\">{{ routeData()?.values?.Done || 0 }}</span>\n            <span class=\"stat-label\">Done</span>\n          </div>\n\n          <div class=\"stat-item completed\" title=\"Completed tasks\">\n            <span class=\"stat-count\">{{ routeData()?.values?.Incomplete || 0 }}</span>\n            <span class=\"stat-label\">Imcomplete</span>\n          </div>\n          <div class=\"stat-item declined\" title=\"Declined routes - needs attention\">\n            <span class=\"stat-count\">{{ routeData()?.values?.Ongoing || 0 }}</span>\n            <span class=\"stat-label\">Ongoing</span>\n          </div>\n          <div class=\"stat-item scheduled\" title=\"Scheduled jobs for today\">\n            <span class=\"stat-count\">{{ routeData()?.values?.Open || 1 }}</span>\n            <span class=\"stat-label\">Open</span>\n          </div>\n        </div>\n        <div\n          class=\"location-flow bg-gray-100 dark:bg-slate-900 border border-gray-300 dark:border-slate-700 px-2 py-2 rounded-lg mt-4\"\n        >\n          <span class=\"pickup truncate block\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"10\"\n              height=\"10\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              class=\"inline mr-1 text-green-500\"\n            >\n              <circle cx=\"12\" cy=\"12\" r=\"8\" />\n            </svg>\n            Pickup: {{ routeData()?.pickup_location || 'N/A' }}\n          </span>\n          <span class=\"delivery truncate block mt-1\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"10\"\n              height=\"10\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              class=\"inline mr-1 text-blue-500\"\n            >\n              <circle cx=\"12\" cy=\"12\" r=\"8\" />\n            </svg>\n            Delivery: {{ routeData()?.delivery_location || 'N/A' }}\n          </span>\n        </div>\n        <div class=\"device-info mt-2\">\n          <div\n            class=\"flex justify-between py-2 border-b border-gray-200 dark:border-slate-600 text-xs\"\n          >\n            <span class=\"text-gray-500 dark:text-slate-500\">Jobcode</span>\n            <span class=\"font-medium truncate max-w-[65%] text-right\">{{ routeData()?.order_number || 'N/A' }}</span>\n          </div>\n          <div\n            class=\"flex justify-between py-2 border-b border-gray-200 dark:border-slate-600 text-xs\"\n          >\n            <span class=\"text-gray-500 dark:text-slate-500\">Customer</span>\n            <span class=\"font-medium truncate max-w-[65%] text-right\">{{ routeData()?.customer_name || 'N/A' }}</span>\n          </div>\n          <div\n            class=\"flex justify-between py-2 border-b border-gray-200 dark:border-slate-600 text-xs\"\n          >\n            <span class=\"text-gray-500 dark:text-slate-500\">Project Name</span>\n            <span class=\"font-medium truncate max-w-[65%] text-right\">{{ routeData()?.project || 'N/A' }}</span>\n          </div>\n          <div\n            class=\"flex justify-between py-2 border-b border-gray-200 dark:border-slate-600 text-xs\"\n          >\n            <span class=\"text-gray-500 dark:text-slate-500\">Job Type</span>\n            <span class=\"font-medium truncate max-w-[65%] text-right\">{{ routeData()?.unit || 'N/A' }}</span>\n          </div>\n          <div\n            class=\"flex justify-between py-2 border-b border-gray-200 dark:border-slate-600 text-xs\"\n          >\n            <span class=\"text-gray-500 dark:text-slate-500\">Material</span>\n            <span class=\"font-medium truncate max-w-[65%] text-right\">{{ routeData()?.material || 'General Freight' }}</span>\n          </div>\n          <div\n            class=\"flex justify-between py-2 border-b border-gray-200 dark:border-slate-600 text-xs\"\n          >\n            <span class=\"text-gray-500 dark:text-slate-500\">Customer Contact</span>\n            <span class=\"font-medium\">{{ routeData()?.customer_contact || 'None' }}</span>\n          </div>\n          <div class=\"flex justify-between py-2 text-xs\">\n            <span class=\"text-gray-500 dark:text-slate-500\">Delivery Contact</span>\n            <span class=\"font-medium\">{{ routeData()?.delivery_contact || 'None' }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n}\n", styles: [".stats-row{display:flex;align-items:center;gap:20px;font-size:12px}.stat-item{display:flex;align-items:center;gap:6px;cursor:default}.stat-count{font-size:15px;font-weight:700;line-height:1}.stat-item.active .stat-count{color:#60a5fa}.stat-item.completed .stat-count{color:#4ade80}.stat-item.declined .stat-count{color:#f87171}.stat-item.scheduled .stat-count{color:#a78bfa}.stat-item.pending .stat-count{color:#fbbf24}.location-flow{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:11px;color:var(--text-secondary, #64748b);margin-bottom:6px}.location-flow .pickup{display:flex;align-items:center;gap:3px;color:#22c55e}.location-flow .pickup svg{width:8px;height:8px}.location-flow .delivery{display:flex;align-items:center;gap:3px;color:#ef4444}.location-flow .delivery svg{width:8px;height:8px}@keyframes slide-up{0%{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.animate-fade-in{animation:fade-in .2s ease-out}.animate-slide-up{animation:slide-up .2s ease-out}\n"] }]
+        }], propDecorators: { modalOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalOpen", required: false }] }], routeData: [{ type: i0.Input, args: [{ isSignal: true, alias: "routeData", required: false }] }], modalOpenChange: [{
+                type: Output
+            }], onMouseMove: [{
+                type: HostListener,
+                args: ['document:mousemove', ['$event']]
+            }], onMouseUp: [{
+                type: HostListener,
+                args: ['document:mouseup']
+            }] } });
+
+class JobCodeComponent {
+    config = inject(COOLMAP_CONFIG);
+    utils = inject(UtilsService);
+    coolmapService = inject(CoolmapService);
+    showDriverModal = false;
+    showDetailModal = false;
+    listMode = 'sidebar';
+    collapsible = true;
+    routes = [];
+    selectedRouteIds = [];
+    isLoading = false;
+    routeSelect = new EventEmitter();
+    collapsed = false;
+    // New Signal States
+    selectedJobDetail = signal(null, ...(ngDevMode ? [{ debugName: "selectedJobDetail" }] : []));
+    contextMenuVisible = signal(false, ...(ngDevMode ? [{ debugName: "contextMenuVisible" }] : []));
+    driverListcollapse = signal(false, ...(ngDevMode ? [{ debugName: "driverListcollapse" }] : []));
+    contextMenuPosition = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "contextMenuPosition" }] : []));
+    icons = {
+        CarFront,
+        Info,
+        LoaderCircle
+    };
+    toggleRouteSelection(route) {
+        const id = route.job_id || route.route_id || route.route_details_id;
+        if (!id)
+            return;
+        this.routeSelect.emit(id);
+    }
+    toggleCollapse() {
+        if (this.collapsible) {
+            this.collapsed = !this.collapsed;
+            this.driverListcollapse.set(this.collapsed);
+        }
+    }
+    calculateStatusPercentage(type, route) {
+        const values = route?.values || { Done: 0, Ongoing: 0, Open: 0 };
+        const total = (values.Done || 0) + (values.Ongoing || 0) + (values.Open || 0);
+        if (total === 0)
+            return type === 'open' ? 100 : 0;
+        if (type === 'done')
+            return Math.round((100 * (values.Done || 0)) / total);
+        if (type === 'ongoing')
+            return Math.round((100 * (values.Ongoing || 0)) / total);
+        if (type === 'open')
+            return Math.round((100 * (values.Open || 0)) / total);
+        return 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JobCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: JobCodeComponent, isStandalone: true, selector: "lib-job-code", inputs: { listMode: "listMode", collapsible: "collapsible", routes: "routes", selectedRouteIds: "selectedRouteIds", isLoading: "isLoading" }, outputs: { routeSelect: "routeSelect" }, host: { listeners: { "document:keydown.escape": "icons()" } }, ngImport: i0, template: "<div\n  class=\"cards-list-container\"\n  [class.floating]=\"listMode === 'floating'\"\n  [class.sidebar]=\"listMode === 'sidebar'\"\n  [class.inline]=\"listMode === 'inline'\"\n  [class.collapsed]=\"collapsed\"\n>\n  <div class=\"list-header\">\n    <div class=\"header-title\">\n      <span class=\"title-text\">Routes</span>\n      <span class=\"routes-count\">({{ routes.length || 0 }})</span>\n    </div>\n    <button\n      class=\"collapse-btn\"\n      (click)=\"toggleCollapse()\"\n      [title]=\"collapsed ? 'Expand' : 'Collapse'\"\n    >\n      @if (collapsed) {\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n      >\n        <path d=\"m9 18 6-6-6-6\" />\n      </svg>\n      } @else {\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n      >\n        <path d=\"m15 18-6-6 6-6\" />\n      </svg>\n      }\n    </button>\n  </div>\n  @if (!collapsed) {\n  <div class=\"cards-scroll-container\" #scrollContainer>\n    @if (isLoading) {\n      <div class=\"list-loader\">\n        <lucide-icon [img]=\"icons.LoaderCircle\" [size]=\"32\" class=\"animate-spin text-amber-500\"></lucide-icon>\n      </div>\n    }\n    <div class=\"cards-list\">\n      @for (route of routes; track $index) {\n      <div class=\"card-wrapper\" (click)=\"toggleRouteSelection(route)\">\n        <div\n          class=\"route-card bg-white dark:bg-slate-800 border transition-all duration-200\"\n          [class.border-brand-blue]=\"selectedRouteIds.includes(route.job_id || route.route_id || route.route_details_id || '')\"\n          [class.border-gray-300]=\"!selectedRouteIds.includes(route.job_id || route.route_id || route.route_details_id || '')\"\n          [class.dark:border-slate-700]=\"!selectedRouteIds.includes(route.job_id || route.route_id || route.route_details_id || '')\"\n          [class.selected]=\"selectedRouteIds.includes(route.job_id || route.route_id || route.route_details_id || '')\"\n        >\n          <div class=\"task-header justify-between\">\n            <span class=\"job-code\">{{ route.order_number || 'N/A' }}</span>\n            <div class=\"flex gap-2\">\n              <div class=\"statusunit text-white\" [ngClass]=\"route.unit || ''\">{{ route.unit?.charAt(0) || 'U' }}</div>\n              @if (config.repository !== 'customer') {\n              <div\n                class=\"statusunit bg-slate-900 dark:bg-white text-white dark:text-black flex items-center justify-center cursor-pointer hover:opacity-80\"\n                (click)=\"showDriverModal = true; toggleCollapse(); $event.stopPropagation()\"\n              >\n                <lucide-icon [img]=\"icons.CarFront\" [size]=\"15\"></lucide-icon>\n              </div>\n              }\n              <div\n                class=\"text-black dark:text-white flex items-center justify-center cursor-pointer hover:opacity-80\"\n                (click)=\"selectedJobDetail.set(route); showDetailModal = true; $event.stopPropagation()\"\n              >\n                <lucide-icon [img]=\"icons.Info\" [size]=\"20\"></lucide-icon>\n              </div>\n            </div>\n          </div>\n          @if (config.repository === 'coolmap') {\n            <div class=\"customer-name font-semibold truncate\">{{ route.customer_name }}</div>\n          }\n          <div class=\"material-info truncate text-gray-600 dark:text-gray-300\">{{ route.project || 'No Project' }}</div>\n          <div class=\"location-flow mt-2 text-sm flex items-center gap-2\">\n            <span class=\"pickup flex items-center gap-1 truncate max-w-[40%] text-green-600 dark:text-green-400\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                <circle cx=\"12\" cy=\"12\" r=\"8\" />\n              </svg>\n              {{ (route.pickup_location || '').split('|')[0] || 'Unknown' }}\n            </span>\n            <span class=\"arrow text-gray-400\">\u2192</span>\n            <span class=\"delivery truncate max-w-[40%] text-brand-blue\">{{ (route.delivery_location || '').split('|')[0] || 'Unknown' }}</span>\n          </div>\n          <div class=\"material-info mt-2 truncate font-medium\">{{ route.material || '' }}</div>\n          <div class=\"driver-row-4 mt-3 flex items-center gap-2\">\n            <div class=\"progress-bar flex-1 h-1.5 bg-gray-200 dark:bg-slate-700 rounded-full overflow-hidden flex\">\n              <div class=\"progress-segment completed h-full bg-green-500 transition-all duration-300\" [style.width.%]=\"calculateStatusPercentage('done', route)\"></div>\n              <div class=\"progress-segment ongoing h-full transition-all duration-300\" [style.backgroundColor]=\"'#fc0'\" [style.width.%]=\"calculateStatusPercentage('ongoing', route)\"></div>\n              <div class=\"progress-segment open h-full bg-gray-300 dark:bg-slate-600 transition-all duration-300\" [style.width.%]=\"calculateStatusPercentage('open', route)\"></div>\n            </div>\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n  </div>\n  }\n</div>\n<lib-driver-list\n  [(modalOpen)]=\"showDriverModal\"\n  [driverListcollapse]=\"driverListcollapse()\"\n></lib-driver-list>\n<lib-job-details [(modalOpen)]=\"showDetailModal\" [routeData]=\"selectedJobDetail()\"></lib-job-details>\n", styles: [":host{display:block}.cards-list-container{display:flex;flex-direction:column;height:100%;background:var(--bg-primary, white)}.cards-list-container.floating{position:absolute;top:12px;left:12px;width:280px;max-height:calc(100% - 24px);border-radius:12px;box-shadow:0 4px 24px #00000026;z-index:100;overflow:hidden}.cards-list-container.floating.collapsed{width:48px}.cards-list-container.sidebar{width:100%;border-right:1px solid var(--border-color, #e2e8f0)}.cards-list-container.inline{width:160px;min-width:160px;border-right:1px solid var(--border-color, #e2e8f0)}:host-context(.dark) .cards-list-container{background-color:#1e293b}:host-context(.dark) .cards-list-container.sidebar,:host-context(.dark) .cards-list-container.inline{border-color:#334155}.list-header{display:flex;align-items:center;justify-content:space-between;padding:12px;border-bottom:1px solid var(--border-color, #e2e8f0);background:var(--bg-secondary, #f8fafc)}:host-context(.dark) .list-header{background-color:#0f172a;border-color:#334155}.collapsed .list-header{padding:12px 8px;justify-content:center}.header-title{display:flex;align-items:center;gap:6px}.collapsed .header-title{display:none}.title-text{font-size:13px;font-weight:600;color:var(--text-primary, #1e293b)}:host-context(.dark) .title-text{color:#f1f5f9}.routes-count{font-size:12px;color:var(--text-secondary, #64748b)}.collapse-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;color:var(--text-secondary, #64748b);cursor:pointer;border-radius:6px;transition:all .15s ease}.collapse-btn:hover{background:var(--hover-bg, #e2e8f0);color:var(--text-primary, #1e293b)}:host-context(.dark) .collapse-btn:hover{background-color:#334155;color:#f1f5f9}.cards-scroll-container{flex:1;overflow-y:auto;overflow-x:hidden}.cards-list{display:flex;flex-direction:column;gap:8px;padding:8px}.card-wrapper{border-radius:8px;transition:all .2s ease}.route-card{position:relative;padding:6px 10px;display:flex;flex-direction:column;gap:2px;border-radius:8px;cursor:pointer;transition:all .15s ease;min-height:72px}.route-card:hover{border-color:var(--accent-color, #3b82f6);box-shadow:0 2px 8px #00000014}.route-card.selected{border-color:var(--accent-color, #3b82f6);background:#3b82f60d}.task-header{display:flex;align-items:center;gap:6px;margin-bottom:4px}.job-code{font-size:13px;font-weight:600;color:var(--text-primary, #1e293b)}:host-context(.dark) .job-code{color:#f1f5f9}.customer-name{font-size:12px;color:var(--text-secondary, #64748b);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-info{font-size:11px;color:var(--text-tertiary, #94a3b8);margin-bottom:6px;font-weight:500}.location-flow{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text-secondary, #64748b);margin-bottom:6px}.location-flow .pickup{display:flex;align-items:center;gap:3px;color:#22c55e}.location-flow .pickup svg{width:8px;height:8px}.location-flow .arrow{color:var(--text-tertiary, #94a3b8)}.location-flow .delivery{color:#ef4444}.driver-row-4{display:flex;align-items:center;gap:4px;margin-top:2px}.progress-bar{display:flex;gap:2px}.progress-segment{height:6px;border-radius:2px;position:relative;cursor:pointer}.progress-segment.completed{background:#22c55e}.progress-segment.in_progress{background:#f59e0b}.progress-segment.pending{background:#cbd5e1}.progress-segment.incomplete{background:#ef4444}.progress-segment:after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:#1e293b;color:#fff;padding:6px 10px;border-radius:6px;font-size:10px;white-space:pre-line;min-width:120px;max-width:180px;box-shadow:0 3px 10px #0003;z-index:1000;opacity:0;visibility:hidden;transition:opacity .15s ease;pointer-events:none}.progress-segment:hover:after{opacity:1;visibility:visible}.task-count{font-size:10px;font-weight:600;color:var(--text-secondary, #64748b);min-width:24px;text-align:right}.on-time-indicator{font-size:10px;color:#22c55e}.on-time-indicator.late{color:#ef4444}.statusunit{border-radius:30px;font-size:12px;text-transform:capitalize;font-weight:600;width:20px;height:20px;text-align:center;line-height:20px}.statusunit.Ton{background:#22c55e}.statusunit.Load{background:#3b82f6}.statusunit.Hourly{background:#f59e0b}.list-loader{position:absolute;inset:0;background:#fff6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:50;border-radius:0 0 12px 12px}:host-context(.dark) .list-loader{background:#0f172a66}.animate-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "component", type: DriverListComponent, selector: "lib-driver-list", inputs: ["modalOpen", "driverListcollapse"], outputs: ["modalOpenChange"] }, { kind: "component", type: JobDetailsComponent, selector: "lib-job-details", inputs: ["modalOpen", "routeData"], outputs: ["modalOpenChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JobCodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-job-code', standalone: true, imports: [LucideAngularModule, DriverListComponent, JobDetailsComponent, NgClass], template: "<div\n  class=\"cards-list-container\"\n  [class.floating]=\"listMode === 'floating'\"\n  [class.sidebar]=\"listMode === 'sidebar'\"\n  [class.inline]=\"listMode === 'inline'\"\n  [class.collapsed]=\"collapsed\"\n>\n  <div class=\"list-header\">\n    <div class=\"header-title\">\n      <span class=\"title-text\">Routes</span>\n      <span class=\"routes-count\">({{ routes.length || 0 }})</span>\n    </div>\n    <button\n      class=\"collapse-btn\"\n      (click)=\"toggleCollapse()\"\n      [title]=\"collapsed ? 'Expand' : 'Collapse'\"\n    >\n      @if (collapsed) {\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n      >\n        <path d=\"m9 18 6-6-6-6\" />\n      </svg>\n      } @else {\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n      >\n        <path d=\"m15 18-6-6 6-6\" />\n      </svg>\n      }\n    </button>\n  </div>\n  @if (!collapsed) {\n  <div class=\"cards-scroll-container\" #scrollContainer>\n    @if (isLoading) {\n      <div class=\"list-loader\">\n        <lucide-icon [img]=\"icons.LoaderCircle\" [size]=\"32\" class=\"animate-spin text-amber-500\"></lucide-icon>\n      </div>\n    }\n    <div class=\"cards-list\">\n      @for (route of routes; track $index) {\n      <div class=\"card-wrapper\" (click)=\"toggleRouteSelection(route)\">\n        <div\n          class=\"route-card bg-white dark:bg-slate-800 border transition-all duration-200\"\n          [class.border-brand-blue]=\"selectedRouteIds.includes(route.job_id || route.route_id || route.route_details_id || '')\"\n          [class.border-gray-300]=\"!selectedRouteIds.includes(route.job_id || route.route_id || route.route_details_id || '')\"\n          [class.dark:border-slate-700]=\"!selectedRouteIds.includes(route.job_id || route.route_id || route.route_details_id || '')\"\n          [class.selected]=\"selectedRouteIds.includes(route.job_id || route.route_id || route.route_details_id || '')\"\n        >\n          <div class=\"task-header justify-between\">\n            <span class=\"job-code\">{{ route.order_number || 'N/A' }}</span>\n            <div class=\"flex gap-2\">\n              <div class=\"statusunit text-white\" [ngClass]=\"route.unit || ''\">{{ route.unit?.charAt(0) || 'U' }}</div>\n              @if (config.repository !== 'customer') {\n              <div\n                class=\"statusunit bg-slate-900 dark:bg-white text-white dark:text-black flex items-center justify-center cursor-pointer hover:opacity-80\"\n                (click)=\"showDriverModal = true; toggleCollapse(); $event.stopPropagation()\"\n              >\n                <lucide-icon [img]=\"icons.CarFront\" [size]=\"15\"></lucide-icon>\n              </div>\n              }\n              <div\n                class=\"text-black dark:text-white flex items-center justify-center cursor-pointer hover:opacity-80\"\n                (click)=\"selectedJobDetail.set(route); showDetailModal = true; $event.stopPropagation()\"\n              >\n                <lucide-icon [img]=\"icons.Info\" [size]=\"20\"></lucide-icon>\n              </div>\n            </div>\n          </div>\n          @if (config.repository === 'coolmap') {\n            <div class=\"customer-name font-semibold truncate\">{{ route.customer_name }}</div>\n          }\n          <div class=\"material-info truncate text-gray-600 dark:text-gray-300\">{{ route.project || 'No Project' }}</div>\n          <div class=\"location-flow mt-2 text-sm flex items-center gap-2\">\n            <span class=\"pickup flex items-center gap-1 truncate max-w-[40%] text-green-600 dark:text-green-400\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                <circle cx=\"12\" cy=\"12\" r=\"8\" />\n              </svg>\n              {{ (route.pickup_location || '').split('|')[0] || 'Unknown' }}\n            </span>\n            <span class=\"arrow text-gray-400\">\u2192</span>\n            <span class=\"delivery truncate max-w-[40%] text-brand-blue\">{{ (route.delivery_location || '').split('|')[0] || 'Unknown' }}</span>\n          </div>\n          <div class=\"material-info mt-2 truncate font-medium\">{{ route.material || '' }}</div>\n          <div class=\"driver-row-4 mt-3 flex items-center gap-2\">\n            <div class=\"progress-bar flex-1 h-1.5 bg-gray-200 dark:bg-slate-700 rounded-full overflow-hidden flex\">\n              <div class=\"progress-segment completed h-full bg-green-500 transition-all duration-300\" [style.width.%]=\"calculateStatusPercentage('done', route)\"></div>\n              <div class=\"progress-segment ongoing h-full transition-all duration-300\" [style.backgroundColor]=\"'#fc0'\" [style.width.%]=\"calculateStatusPercentage('ongoing', route)\"></div>\n              <div class=\"progress-segment open h-full bg-gray-300 dark:bg-slate-600 transition-all duration-300\" [style.width.%]=\"calculateStatusPercentage('open', route)\"></div>\n            </div>\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n  </div>\n  }\n</div>\n<lib-driver-list\n  [(modalOpen)]=\"showDriverModal\"\n  [driverListcollapse]=\"driverListcollapse()\"\n></lib-driver-list>\n<lib-job-details [(modalOpen)]=\"showDetailModal\" [routeData]=\"selectedJobDetail()\"></lib-job-details>\n", styles: [":host{display:block}.cards-list-container{display:flex;flex-direction:column;height:100%;background:var(--bg-primary, white)}.cards-list-container.floating{position:absolute;top:12px;left:12px;width:280px;max-height:calc(100% - 24px);border-radius:12px;box-shadow:0 4px 24px #00000026;z-index:100;overflow:hidden}.cards-list-container.floating.collapsed{width:48px}.cards-list-container.sidebar{width:100%;border-right:1px solid var(--border-color, #e2e8f0)}.cards-list-container.inline{width:160px;min-width:160px;border-right:1px solid var(--border-color, #e2e8f0)}:host-context(.dark) .cards-list-container{background-color:#1e293b}:host-context(.dark) .cards-list-container.sidebar,:host-context(.dark) .cards-list-container.inline{border-color:#334155}.list-header{display:flex;align-items:center;justify-content:space-between;padding:12px;border-bottom:1px solid var(--border-color, #e2e8f0);background:var(--bg-secondary, #f8fafc)}:host-context(.dark) .list-header{background-color:#0f172a;border-color:#334155}.collapsed .list-header{padding:12px 8px;justify-content:center}.header-title{display:flex;align-items:center;gap:6px}.collapsed .header-title{display:none}.title-text{font-size:13px;font-weight:600;color:var(--text-primary, #1e293b)}:host-context(.dark) .title-text{color:#f1f5f9}.routes-count{font-size:12px;color:var(--text-secondary, #64748b)}.collapse-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;color:var(--text-secondary, #64748b);cursor:pointer;border-radius:6px;transition:all .15s ease}.collapse-btn:hover{background:var(--hover-bg, #e2e8f0);color:var(--text-primary, #1e293b)}:host-context(.dark) .collapse-btn:hover{background-color:#334155;color:#f1f5f9}.cards-scroll-container{flex:1;overflow-y:auto;overflow-x:hidden}.cards-list{display:flex;flex-direction:column;gap:8px;padding:8px}.card-wrapper{border-radius:8px;transition:all .2s ease}.route-card{position:relative;padding:6px 10px;display:flex;flex-direction:column;gap:2px;border-radius:8px;cursor:pointer;transition:all .15s ease;min-height:72px}.route-card:hover{border-color:var(--accent-color, #3b82f6);box-shadow:0 2px 8px #00000014}.route-card.selected{border-color:var(--accent-color, #3b82f6);background:#3b82f60d}.task-header{display:flex;align-items:center;gap:6px;margin-bottom:4px}.job-code{font-size:13px;font-weight:600;color:var(--text-primary, #1e293b)}:host-context(.dark) .job-code{color:#f1f5f9}.customer-name{font-size:12px;color:var(--text-secondary, #64748b);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-info{font-size:11px;color:var(--text-tertiary, #94a3b8);margin-bottom:6px;font-weight:500}.location-flow{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text-secondary, #64748b);margin-bottom:6px}.location-flow .pickup{display:flex;align-items:center;gap:3px;color:#22c55e}.location-flow .pickup svg{width:8px;height:8px}.location-flow .arrow{color:var(--text-tertiary, #94a3b8)}.location-flow .delivery{color:#ef4444}.driver-row-4{display:flex;align-items:center;gap:4px;margin-top:2px}.progress-bar{display:flex;gap:2px}.progress-segment{height:6px;border-radius:2px;position:relative;cursor:pointer}.progress-segment.completed{background:#22c55e}.progress-segment.in_progress{background:#f59e0b}.progress-segment.pending{background:#cbd5e1}.progress-segment.incomplete{background:#ef4444}.progress-segment:after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:#1e293b;color:#fff;padding:6px 10px;border-radius:6px;font-size:10px;white-space:pre-line;min-width:120px;max-width:180px;box-shadow:0 3px 10px #0003;z-index:1000;opacity:0;visibility:hidden;transition:opacity .15s ease;pointer-events:none}.progress-segment:hover:after{opacity:1;visibility:visible}.task-count{font-size:10px;font-weight:600;color:var(--text-secondary, #64748b);min-width:24px;text-align:right}.on-time-indicator{font-size:10px;color:#22c55e}.on-time-indicator.late{color:#ef4444}.statusunit{border-radius:30px;font-size:12px;text-transform:capitalize;font-weight:600;width:20px;height:20px;text-align:center;line-height:20px}.statusunit.Ton{background:#22c55e}.statusunit.Load{background:#3b82f6}.statusunit.Hourly{background:#f59e0b}.list-loader{position:absolute;inset:0;background:#fff6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:50;border-radius:0 0 12px 12px}:host-context(.dark) .list-loader{background:#0f172a66}.animate-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        }], propDecorators: { listMode: [{
+                type: Input
+            }], collapsible: [{
+                type: Input
+            }], routes: [{
+                type: Input
+            }], selectedRouteIds: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], routeSelect: [{
+                type: Output
+            }], icons: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
+class RouteInfoCardComponent {
+    modalOpen = input(false, ...(ngDevMode ? [{ debugName: "modalOpen" }] : []));
+    routeData = input(null, ...(ngDevMode ? [{ debugName: "routeData" }] : []));
+    repository = input('coolmap', ...(ngDevMode ? [{ debugName: "repository" }] : []));
+    displayMode = input('dispatch', ...(ngDevMode ? [{ debugName: "displayMode" }] : []));
+    modalOpenChange = new EventEmitter();
+    edit = new EventEmitter();
+    utils = inject(UtilsService);
+    addRouteModal = false;
+    formattedDate = computed(() => {
+        const data = this.routeData();
+        if (!data?.created_at)
+            return 'N/A';
+        return this.utils.getDateFormat(new Date(data.created_at), '/');
+    }, ...(ngDevMode ? [{ debugName: "formattedDate" }] : []));
+    close() {
+        this.modalOpenChange.emit(false);
+    }
+    icons = {
+        X,
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: RouteInfoCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: RouteInfoCardComponent, isStandalone: true, selector: "lib-route-info-card", inputs: { modalOpen: { classPropertyName: "modalOpen", publicName: "modalOpen", isSignal: true, isRequired: false, transformFunction: null }, routeData: { classPropertyName: "routeData", publicName: "routeData", isSignal: true, isRequired: false, transformFunction: null }, repository: { classPropertyName: "repository", publicName: "repository", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modalOpenChange: "modalOpenChange", edit: "edit" }, ngImport: i0, template: "@if (modalOpen()) {\n<div \n  class=\"z-[112] bottom-0 fixed lg:absolute inset-0 overflow-y-auto\"\n  [ngClass]=\"displayMode() === 'catalog' ? 'lg:left-[300px]' : 'lg:right-[300px]'\"\n>\n  <div class=\"fixed inset-0 bg-black/50\" (click)=\"close()\"></div>\n  <div \n    class=\"flex min-h-full lg:items-end items-center justify-center p-3\"\n    [ngClass]=\"displayMode() === 'catalog' ? 'lg:justify-start' : 'lg:justify-end'\"\n  >\n    <div\n      class=\"relative bg-white dark:bg-slate-800 rounded-lg shadow-xl animate-slide-up w-[350px]\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      <div\n        class=\"flex items-center justify-between px-[12px] py-[10px] border-b border-gray-200 dark:border-slate-700 dark:bg-slate-900 rounded-t-lg\"\n      >\n        <h3 class=\"flex items-center gap-1 font-medium text-gray-900 dark:text-white text-[13px]\">\n          Route Info\n        </h3>\n        <button\n          (click)=\"close()\"\n          class=\"p-2 hover:bg-gray-100 dark:hover:bg-slate-700 rounded-lg transition-colors\"\n        >\n          <lucide-icon [img]=\"icons.X\" [size]=\"20\"></lucide-icon>\n        </button>\n      </div>\n      <div class=\"max-h-[60vh] overflow-y-auto p-3\">\n        <div class=\"space-y-2 bg-gray-50 dark:bg-slate-900/50 border border-gray-200 dark:border-slate-700 p-3 rounded-lg mb-4\">\n          <p class=\"text-xs\">\n            <b class=\"text-gray-900 dark:text-white\">Pickup:</b> \n            <span class=\"text-gray-600 dark:text-gray-400\">\n              {{ (routeData()?.pickup_location || '').split('|')[1] || routeData()?.pickup_location || 'N/A' }}\n            </span>\n          </p>\n          <p class=\"text-xs\">\n            <b class=\"text-gray-900 dark:text-white\">Delivery:</b> \n            <span class=\"text-gray-600 dark:text-gray-400\">\n              {{ (routeData()?.delivery_location || '').split('|')[1] || routeData()?.delivery_location || 'N/A' }}\n            </span>\n          </p>\n        </div>\n\n        <div class=\"space-y-2.5\">\n          <div class=\"flex justify-between items-start text-xs border-b border-gray-100 dark:border-slate-700/50 pb-2\">\n            <b class=\"text-gray-900 dark:text-white whitespace-nowrap\">Name:</b>\n            <span class=\"text-gray-600 dark:text-gray-400 text-right ml-4\">{{ routeData()?.route_name || 'N/A' }}</span>\n          </div>\n          <div class=\"flex justify-between items-start text-xs border-b border-gray-100 dark:border-slate-700/50 pb-2\">\n            <b class=\"text-gray-900 dark:text-white whitespace-nowrap\">Customer:</b>\n            <span class=\"text-gray-600 dark:text-gray-400 text-right ml-4\">{{ routeData()?.customer_name || 'N/A' }}</span>\n          </div>\n          <div class=\"flex justify-between items-start text-xs border-b border-gray-100 dark:border-slate-700/50 pb-2\">\n            <b class=\"text-gray-900 dark:text-white whitespace-nowrap\">Type:</b>\n            <span class=\"text-gray-600 dark:text-gray-400 text-right ml-4\">{{ routeData()?.unit || 'N/A' }}</span>\n          </div>\n          <div class=\"flex justify-between items-start text-xs border-b border-gray-100 dark:border-slate-700/50 pb-2\">\n            <b class=\"text-gray-900 dark:text-white whitespace-nowrap\">Distance:</b>\n            <span class=\"text-gray-600 dark:text-gray-400 text-right ml-4\">{{ routeData()?.estimated_distance || '0' }} Miles</span>\n          </div>\n          <div class=\"flex justify-between items-start text-xs border-b border-gray-100 dark:border-slate-700/50 pb-2\">\n            <b class=\"text-gray-900 dark:text-white whitespace-nowrap\">Travel Time:</b>\n            <span class=\"text-gray-600 dark:text-gray-400 text-right ml-4\">{{ routeData()?.estimated_time || '0' }} Min</span>\n          </div>\n\n          @if (repository() !== 'customer') {\n            <div class=\"flex justify-between items-start text-xs border-b border-gray-100 dark:border-slate-700/50 pb-2\">\n              <b class=\"text-gray-900 dark:text-white whitespace-nowrap\">Trucker Pay Estimate:</b>\n              <span class=\"text-brand-blue font-medium text-right ml-4\">{{ routeData()?.trucker_pay_estimate | currency }}</span>\n            </div>\n          }\n\n          <div class=\"flex justify-between items-start text-xs border-b border-gray-100 dark:border-slate-700/50 pb-2\">\n            <b class=\"text-gray-900 dark:text-white whitespace-nowrap\">Customer Price Estimate:</b>\n            <span class=\"text-brand-blue font-medium text-right ml-4\">{{ routeData()?.customer_price_estimate | currency }}</span>\n          </div>\n\n          <div class=\"flex justify-between items-start text-xs border-b border-gray-100 dark:border-slate-700/50 pb-2\">\n            <b class=\"text-gray-900 dark:text-white whitespace-nowrap\">Notes:</b>\n            <span class=\"text-gray-600 dark:text-gray-400 text-right ml-4 italic\">{{ routeData()?.note || 'None' }}</span>\n          </div>\n        </div>\n\n        <div class=\"mt-4 pt-3 border-t border-gray-100 dark:border-slate-700 flex justify-between items-center\">\n          <p class=\"text-[10px] text-gray-400 italic\">\n            Created by {{ routeData()?.created_by_name || routeData()?.user || 'System' }} on {{ formattedDate() }}\n          </p>\n          @if (displayMode() === 'catalog') {\n            <button \n              type=\"button\"\n              (click)=\"edit.emit(); close()\"\n              class=\"px-3 py-1 text-[11px] font-bold uppercase tracking-wider bg-orange-500 hover:bg-orange-600 text-white rounded transition-colors\"\n            >\n              Edit\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n}", styles: [".location-flow{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:11px;color:var(--text-secondary, #64748b);margin-bottom:6px}.location-flow .pickup{display:flex;align-items:flex-start;gap:3px;color:#22c55e}.location-flow .pickup svg{width:8px;height:8px;margin-top:4px}.location-flow .delivery{display:flex;align-items:flex-start;gap:3px;color:#ef4444}.location-flow .delivery svg{width:8px;height:8px;margin-top:4px}@keyframes slide-up{0%{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.animate-fade-in{animation:fade-in .2s ease-out}.animate-slide-up{animation:slide-up .2s ease-out}\n"], dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2.CurrencyPipe, name: "currency" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: RouteInfoCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-route-info-card', standalone: true, imports: [LucideAngularModule, CommonModule, CurrencyPipe], template: "@if (modalOpen()) {\n<div \n  class=\"z-[112] bottom-0 fixed lg:absolute inset-0 overflow-y-auto\"\n  [ngClass]=\"displayMode() === 'catalog' ? 'lg:left-[300px]' : 'lg:right-[300px]'\"\n>\n  <div class=\"fixed inset-0 bg-black/50\" (click)=\"close()\"></div>\n  <div \n    class=\"flex min-h-full lg:items-end items-center justify-center p-3\"\n    [ngClass]=\"displayMode() === 'catalog' ? 'lg:justify-start' : 'lg:justify-end'\"\n  >\n    <div\n      class=\"relative bg-white dark:bg-slate-800 rounded-lg shadow-xl animate-slide-up w-[350px]\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      <div\n        class=\"flex items-center justify-between px-[12px] py-[10px] border-b border-gray-200 dark:border-slate-700 dark:bg-slate-900 rounded-t-lg\"\n      >\n        <h3 class=\"flex items-center gap-1 font-medium text-gray-900 dark:text-white text-[13px]\">\n          Route Info\n        </h3>\n        <button\n          (click)=\"close()\"\n          class=\"p-2 hover:bg-gray-100 dark:hover:bg-slate-700 rounded-lg transition-colors\"\n        >\n          <lucide-icon [img]=\"icons.X\" [size]=\"20\"></lucide-icon>\n        </button>\n      </div>\n      <div class=\"max-h-[60vh] overflow-y-auto p-3\">\n        <div class=\"space-y-2 bg-gray-50 dark:bg-slate-900/50 border border-gray-200 dark:border-slate-700 p-3 rounded-lg mb-4\">\n          <p class=\"text-xs\">\n            <b class=\"text-gray-900 dark:text-white\">Pickup:</b> \n            <span class=\"text-gray-600 dark:text-gray-400\">\n              {{ (routeData()?.pickup_location || '').split('|')[1] || routeData()?.pickup_location || 'N/A' }}\n            </span>\n          </p>\n          <p class=\"text-xs\">\n            <b class=\"text-gray-900 dark:text-white\">Delivery:</b> \n            <span class=\"text-gray-600 dark:text-gray-400\">\n              {{ (routeData()?.delivery_location || '').split('|')[1] || routeData()?.delivery_location || 'N/A' }}\n            </span>\n          </p>\n        </div>\n\n        <div class=\"space-y-2.5\">\n          <div class=\"flex justify-between items-start text-xs border-b border-gray-100 dark:border-slate-700/50 pb-2\">\n            <b class=\"text-gray-900 dark:text-white whitespace-nowrap\">Name:</b>\n            <span class=\"text-gray-600 dark:text-gray-400 text-right ml-4\">{{ routeData()?.route_name || 'N/A' }}</span>\n          </div>\n          <div class=\"flex justify-between items-start text-xs border-b border-gray-100 dark:border-slate-700/50 pb-2\">\n            <b class=\"text-gray-900 dark:text-white whitespace-nowrap\">Customer:</b>\n            <span class=\"text-gray-600 dark:text-gray-400 text-right ml-4\">{{ routeData()?.customer_name || 'N/A' }}</span>\n          </div>\n          <div class=\"flex justify-between items-start text-xs border-b border-gray-100 dark:border-slate-700/50 pb-2\">\n            <b class=\"text-gray-900 dark:text-white whitespace-nowrap\">Type:</b>\n            <span class=\"text-gray-600 dark:text-gray-400 text-right ml-4\">{{ routeData()?.unit || 'N/A' }}</span>\n          </div>\n          <div class=\"flex justify-between items-start text-xs border-b border-gray-100 dark:border-slate-700/50 pb-2\">\n            <b class=\"text-gray-900 dark:text-white whitespace-nowrap\">Distance:</b>\n            <span class=\"text-gray-600 dark:text-gray-400 text-right ml-4\">{{ routeData()?.estimated_distance || '0' }} Miles</span>\n          </div>\n          <div class=\"flex justify-between items-start text-xs border-b border-gray-100 dark:border-slate-700/50 pb-2\">\n            <b class=\"text-gray-900 dark:text-white whitespace-nowrap\">Travel Time:</b>\n            <span class=\"text-gray-600 dark:text-gray-400 text-right ml-4\">{{ routeData()?.estimated_time || '0' }} Min</span>\n          </div>\n\n          @if (repository() !== 'customer') {\n            <div class=\"flex justify-between items-start text-xs border-b border-gray-100 dark:border-slate-700/50 pb-2\">\n              <b class=\"text-gray-900 dark:text-white whitespace-nowrap\">Trucker Pay Estimate:</b>\n              <span class=\"text-brand-blue font-medium text-right ml-4\">{{ routeData()?.trucker_pay_estimate | currency }}</span>\n            </div>\n          }\n\n          <div class=\"flex justify-between items-start text-xs border-b border-gray-100 dark:border-slate-700/50 pb-2\">\n            <b class=\"text-gray-900 dark:text-white whitespace-nowrap\">Customer Price Estimate:</b>\n            <span class=\"text-brand-blue font-medium text-right ml-4\">{{ routeData()?.customer_price_estimate | currency }}</span>\n          </div>\n\n          <div class=\"flex justify-between items-start text-xs border-b border-gray-100 dark:border-slate-700/50 pb-2\">\n            <b class=\"text-gray-900 dark:text-white whitespace-nowrap\">Notes:</b>\n            <span class=\"text-gray-600 dark:text-gray-400 text-right ml-4 italic\">{{ routeData()?.note || 'None' }}</span>\n          </div>\n        </div>\n\n        <div class=\"mt-4 pt-3 border-t border-gray-100 dark:border-slate-700 flex justify-between items-center\">\n          <p class=\"text-[10px] text-gray-400 italic\">\n            Created by {{ routeData()?.created_by_name || routeData()?.user || 'System' }} on {{ formattedDate() }}\n          </p>\n          @if (displayMode() === 'catalog') {\n            <button \n              type=\"button\"\n              (click)=\"edit.emit(); close()\"\n              class=\"px-3 py-1 text-[11px] font-bold uppercase tracking-wider bg-orange-500 hover:bg-orange-600 text-white rounded transition-colors\"\n            >\n              Edit\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n}", styles: [".location-flow{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:11px;color:var(--text-secondary, #64748b);margin-bottom:6px}.location-flow .pickup{display:flex;align-items:flex-start;gap:3px;color:#22c55e}.location-flow .pickup svg{width:8px;height:8px;margin-top:4px}.location-flow .delivery{display:flex;align-items:flex-start;gap:3px;color:#ef4444}.location-flow .delivery svg{width:8px;height:8px;margin-top:4px}@keyframes slide-up{0%{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.animate-fade-in{animation:fade-in .2s ease-out}.animate-slide-up{animation:slide-up .2s ease-out}\n"] }]
+        }], propDecorators: { modalOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalOpen", required: false }] }], routeData: [{ type: i0.Input, args: [{ isSignal: true, alias: "routeData", required: false }] }], repository: [{ type: i0.Input, args: [{ isSignal: true, alias: "repository", required: false }] }], displayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMode", required: false }] }], modalOpenChange: [{
+                type: Output
+            }], edit: [{
+                type: Output
+            }] } });
+
+class JobRouteListComponent {
+    config = inject(COOLMAP_CONFIG);
+    customerRepoDetails;
+    utils = inject(UtilsService);
+    coolmapService = inject(CoolmapService);
+    unitList = [];
+    materialsList = [];
+    routes = signal([], ...(ngDevMode ? [{ debugName: "routes" }] : []));
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    selectedRouteIds = input([], ...(ngDevMode ? [{ debugName: "selectedRouteIds" }] : []));
+    filters = signal([], ...(ngDevMode ? [{ debugName: "filters" }] : []));
+    showSuggestions = signal(false, ...(ngDevMode ? [{ debugName: "showSuggestions" }] : []));
+    suggestions = computed(() => {
+        const term = this.searchTerm();
+        if (term.length < 1)
+            return [];
+        return this.utils.filter(term, this.filters());
+    }, ...(ngDevMode ? [{ debugName: "suggestions" }] : []));
+    filteredRoutes = computed(() => {
+        let list = this.routes();
+        const activeFilters = this.filters();
+        // Apply category search from V1 logic
+        if (activeFilters.length > 0) {
+            list = this.utils.getSearchResults(list, activeFilters);
+        }
+        const search = this.searchTerm().toLowerCase().trim();
+        if (!search || this.showSuggestions())
+            return list;
+        return list.filter(r => {
+            const id = this.getRouteId(r).toLowerCase();
+            const order = (r.order_number || '').toLowerCase();
+            const name = (r.route_name || '').toLowerCase();
+            return id.includes(search) || order.includes(search) || name.includes(search);
+        });
+    }, ...(ngDevMode ? [{ debugName: "filteredRoutes" }] : []));
+    allSelected = computed(() => {
+        const visible = this.filteredRoutes();
+        const selected = this.selectedRouteIds();
+        if (visible.length === 0)
+            return false;
+        return visible.every(r => selected.includes(this.getRouteId(r)));
+    }, ...(ngDevMode ? [{ debugName: "allSelected" }] : []));
+    isAnyPlotting = computed(() => {
+        const prefix = this.modalOpen() ? 'jobrouteList' : 'jobcode';
+        const plotting = this.coolmapService.plottingIds();
+        return Array.from(plotting).some(id => id.startsWith(`${prefix}-`));
+    }, ...(ngDevMode ? [{ debugName: "isAnyPlotting" }] : []));
+    showRouteModal = false;
+    modalOpen = input(false, ...(ngDevMode ? [{ debugName: "modalOpen" }] : []));
+    set initialRoutes(val) {
+        if (val) {
+            this.routes.set(val);
+            this.utils.clearOptions();
+            val.forEach(r => this.utils.makeOptions(r));
+        }
+    }
+    selectedRoute = signal(null, ...(ngDevMode ? [{ debugName: "selectedRoute" }] : []));
+    modalOpenChange = new EventEmitter();
+    routeSelect = new EventEmitter();
+    masterToggleEvent = new EventEmitter();
+    ngOnInit() {
+        this.checkAndCallRouteList();
+    }
+    checkAndCallRouteList() {
+        this.utils.clearOptions();
+        if (this.config.repository === 'customer') {
+            this.utils.fetchUnitsList().then((res) => {
+                this.unitList = res;
+                this.utils.fetchMaterialsListForCustomer().then((res) => {
+                    this.materialsList = res;
+                    this.getRouteListForCustomer();
+                });
+            });
+        }
+        else {
+            this.getRouteListForCoolMap();
+        }
+    }
+    getRouteListForCoolMap() {
+        this.utils.getData('routes/all').subscribe((res) => {
+            if (res && res.data) {
+                const list = res.data;
+                list.forEach((ele) => this.utils.makeOptions(ele));
+                this.routes.set(list);
+            }
+        });
+    }
+    getRouteListForCustomer() {
+        const customerId = this.customerRepoDetails?.customer.id;
+        if (customerId) {
+            this.utils.postdata('routes/all', { customer_id: customerId }).subscribe((res) => {
+                if (res && res.data) {
+                    const list = res.data.map((ele) => {
+                        ele.unit = this.getUnitName(ele);
+                        this.utils.makeOptions(ele);
+                        return ele;
+                    });
+                    this.routes.set(list);
+                }
+            });
+        }
+    }
+    getUnitName(data) {
+        let unitName = '';
+        this.unitList.forEach((res) => {
+            if (res.id === data.unit_id) {
+                unitName = res.type;
+            }
+        });
+        return unitName || data.unit;
+    }
+    close() {
+        this.modalOpenChange.emit(false);
+    }
+    isRouteSelected(route) {
+        const id = this.getRouteId(route);
+        return this.selectedRouteIds().includes(id || '');
+    }
+    toggleRoute(route) {
+        if (this.isPlotting(route))
+            return;
+        this.routeSelect.emit(route);
+    }
+    onMasterToggle() {
+        if (this.isAnyPlotting())
+            return;
+        this.masterToggleEvent.emit(this.filteredRoutes());
+    }
+    addFilter(option) {
+        // V1 behavior: keep single filter
+        this.filters.set([{ name: option.label, type: option.type, value: option.value }]);
+        this.searchTerm.set('');
+        this.showSuggestions.set(false);
+    }
+    removeFilter() {
+        this.filters.set([]);
+    }
+    handleSearchInput(val) {
+        this.searchTerm.set(val);
+        this.showSuggestions.set(true);
+    }
+    onSearchBlur() {
+        // Delay hiding to allow (click) on suggestions to fire first
+        setTimeout(() => {
+            this.showSuggestions.set(false);
+        }, 200);
+    }
+    get hasFilter() {
+        return this.filters().length > 0;
+    }
+    isPlotting(route) {
+        const prefix = this.modalOpen() ? 'jobrouteList' : 'jobcode';
+        const id = this.getRouteId(route);
+        return this.coolmapService.plottingIds().has(`${prefix}-${id}`);
+    }
+    getRouteId(route) {
+        return route.job_id || route.route_id || route.route_details_id || '';
+    }
+    icons = {
+        X,
+        Info,
+        Share2,
+        CheckCircle,
+        LoaderCircle
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JobRouteListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: JobRouteListComponent, isStandalone: true, selector: "lib-job-route-list", inputs: { customerRepoDetails: { classPropertyName: "customerRepoDetails", publicName: "customerRepoDetails", isSignal: false, isRequired: false, transformFunction: null }, selectedRouteIds: { classPropertyName: "selectedRouteIds", publicName: "selectedRouteIds", isSignal: true, isRequired: false, transformFunction: null }, modalOpen: { classPropertyName: "modalOpen", publicName: "modalOpen", isSignal: true, isRequired: false, transformFunction: null }, initialRoutes: { classPropertyName: "initialRoutes", publicName: "initialRoutes", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { modalOpenChange: "modalOpenChange", routeSelect: "routeSelect", masterToggleEvent: "masterToggleEvent" }, ngImport: i0, template: "@if (modalOpen()) {\n<div class=\"fixed z-[111]\">\n  <div class=\"fixed inset-0 bg-black/50\" (click)=\"close()\"></div>\n  <aside class=\"detail-drawer top-[0] sm:top-[115px]\" (click)=\"$event.stopPropagation()\">\n    <div\n      class=\"flex items-center justify-between px-[12px] py-[10px] border-b border-gray-200 dark:border-slate-700 dark:bg-slate-900\"\n    >\n      <h3 class=\"flex items-center gap-1 font-semibold text-gray-900 dark:text-white text-[14px]\">\n        List of Routes\n        <span class=\"text-xs font-normal text-gray-400\">({{ filteredRoutes().length }})</span>\n      </h3>\n      <button\n        type=\"button\"\n        (click)=\"onMasterToggle()\"\n        [disabled]=\"isAnyPlotting()\"\n        class=\"inline-flex items-center justify-center gap-2 px-3 sm:px-4 py-1.5 bg-brand-blue hover:bg-blue-700 disabled:opacity-50 text-white font-medium rounded-md transition-colors text-[12px]\"\n      >\n        {{ allSelected() ? 'Uncheck All' : 'Check All' }}\n      </button>\n      <button\n        (click)=\"close()\"\n        class=\"p-1.5 hover:bg-gray-100 dark:hover:bg-slate-700 rounded-lg transition-colors\"\n      >\n        <lucide-icon [img]=\"icons.X\" [size]=\"18\"></lucide-icon>\n      </button>\n    </div>\n    <div class=\"p-2\">\n      <div class=\"relative w-full\">\n        <div class=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none\">\n          <lucide-icon [img]=\"hasFilter ? icons.Info : icons.Share2\" class=\"text-gray-400\" [size]=\"18\"></lucide-icon>\n        </div>\n        <input\n          type=\"text\"\n          #searchinput\n          [value]=\"searchTerm()\"\n          (input)=\"handleSearchInput(searchinput.value)\"\n          (focus)=\"showSuggestions.set(true)\"\n          (blur)=\"onSearchBlur()\"\n          placeholder=\"Search...\"\n          class=\"w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-brand-blue focus:border-transparent text-sm\"\n        />\n\n        <!-- Autocomplete Suggestions Dropdown -->\n        @if (showSuggestions() && suggestions().length > 0) {\n          <div class=\"absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 max-h-60 overflow-y-auto\">\n            <ul class=\"py-1 text-sm text-gray-700 dark:text-gray-200\">\n              @for (option of suggestions(); track option.label + option.type) {\n                <li (click)=\"addFilter(option)\"\n                    class=\"px-4 py-2 hover:bg-brand-blue/10 dark:hover:bg-brand-blue/20 cursor-pointer flex justify-between items-center group\">\n                  <span>\n                    <span class=\"font-semibold text-brand-blue capitalize\">{{option.type}}:</span> \n                    {{option.label}}\n                  </span>\n                  <lucide-icon [img]=\"icons.CheckCircle\" class=\"opacity-0 group-hover:opacity-100 text-brand-blue transition-opacity\" [size]=\"16\"></lucide-icon>\n                </li>\n              }\n            </ul>\n          </div>\n        }\n      </div>\n\n      <!-- Active Filter Chips -->\n      @if (hasFilter) {\n        <div class=\"flex flex-wrap gap-2 mt-2 px-1\">\n          @for (filter of filters(); track filter.name + filter.type) {\n            <div class=\"inline-flex items-center gap-1.5 px-3 py-1 bg-brand-blue/10 border border-brand-blue/20 text-brand-blue rounded-full text-xs font-medium\">\n              <span class=\"capitalize\">{{filter.type}}:</span>\n              <span class=\"truncate max-w-[150px]\">{{filter.name}}</span>\n              <button (click)=\"removeFilter()\" class=\"hover:text-red-500 transition-colors\">\n                <lucide-icon [img]=\"icons.X\" [size]=\"14\"></lucide-icon>\n              </button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n    <div class=\"overflow-y-auto p-2 drawer-listing-box\">\n      <cdk-virtual-scroll-viewport itemSize=\"60\" class=\"routeList-viewport h-[calc(100vh-250px)]\">\n        @if (filteredRoutes().length > 0) {\n          <ul class=\"route-list-ul gap-2 flex flex-col\">\n            @for (route of filteredRoutes(); track getRouteId(route)) {\n              <li \n                class=\"route-li-v1 bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-700\" \n                [class.selected]=\"isRouteSelected(route)\" \n                [class.pointer-events-none]=\"isAnyPlotting()\"\n                [class.opacity-60]=\"isAnyPlotting()\"\n                (click)=\"toggleRoute(route)\">\n                <div class=\"task-header justify-between\">\n                  <span class=\"job-code\"> {{route.route_name || route.order_number}} </span>\n                  @if (config.repository === 'coolmap') {\n                    <span class=\"job-code\">{{route.customer_name}}</span>\n                  }\n                  <div class=\"iconprt\">\n                    @if (isPlotting(route)) {\n                      <div class=\"plotting-spinner\">\n                        <lucide-icon [img]=\"icons.LoaderCircle\" class=\"animate-spin text-black dark:text-white flex items-center justify-center relative z-10\" [size]=\"18\"></lucide-icon>\n                      </div>\n                    }\n                    <div class=\"statusunit text-white\" [ngClass]=\"route.unit || ''\">\n                      {{ route.unit?.charAt(0) || 'U' }}\n                    </div>\n                    <div class=\"infoicon\" (click)=\"$event.stopPropagation(); selectedRoute.set(route); showRouteModal = true\">\n                      <lucide-icon [img]=\"icons.Info\" [size]=\"18\" class=\"text-gray-400\"></lucide-icon>\n                    </div>\n                    @if (config.repository === 'customer') {\n                      <div class=\"infoicon\" (click)=\"$event.stopPropagation()\">\n                        <lucide-icon [img]=\"icons.Share2\" [size]=\"16\" class=\"text-gray-400\"></lucide-icon>\n                      </div>\n                    }\n                  </div>\n                </div>\n               \n                <div class=\"location-flow bg-gray-100 dark:bg-slate-900 px-2 py-2 pb-3 rounded-lg\">\n                  <span class=\"pickup\">\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      width=\"10\"\n                      height=\"10\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"currentColor\"\n                    >\n                      <circle cx=\"12\" cy=\"12\" r=\"8\" />\n                    </svg>\n                    {{ (route.pickup_location || '').split('|')[1] ? (route.pickup_location || '').split('|')[1] : (route.pickup_location || '') }}\n                  </span>\n                  <span class=\"delivery\">\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      width=\"10\"\n                      height=\"10\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"currentColor\"\n                    >\n                      <circle cx=\"12\" cy=\"12\" r=\"8\" />\n                    </svg>\n                    {{ (route.delivery_location || '').split('|')[1] ? (route.delivery_location || '').split('|')[1] : (route.delivery_location || '') }}\n                  </span>\n                </div>\n              </li>\n            }\n          </ul>\n        } @else if (routes().length === 0) {\n          <div class=\"p-8 text-center text-gray-400\">\n            No routes available for this perspective.\n          </div>\n        }\n      </cdk-virtual-scroll-viewport>\n    </div>\n  </aside>\n</div>\n}\n<lib-route-info-card [(modalOpen)]=\"showRouteModal\" [routeData]=\"selectedRoute()\" [repository]=\"config.repository\" displayMode=\"dispatch\"></lib-route-info-card>\n", styles: [".detail-drawer{position:fixed;right:0;bottom:36px;width:280px;background:var(--bg-primary, white);border-left:1px solid var(--border-color, #e2e8f0);display:flex;flex-direction:column;z-index:501;animation:slideIn .2s ease}:host-context(.dark) .detail-drawer{background-color:#1e293b;border-color:#334155}.drawer-listing-box{flex:1;overflow:hidden;padding:0!important}.routeList-viewport{height:100%;width:100%}.route-list-ul{list-style:none;padding:10px;margin:0}.route-li-v1{position:relative;padding:6px 10px;display:flex;flex-direction:column;gap:2px;border-radius:8px;cursor:pointer;transition:all .15s ease;min-height:72px}.route-li-v1:hover{background:#ffffff0d}.route-li-v1.selected{border:1px solid #3b82f6}.task-header{display:flex;align-items:center;gap:6px;margin-bottom:4px}.job-code{font-size:13px;font-weight:600;color:var(--text-primary, #1e293b);white-space:nowrap;text-overflow:ellipsis;max-width:190px;overflow:hidden}:host-context(.dark) .job-code{color:#f1f5f9}.iconprt{display:flex;flex-shrink:0;gap:5px}.plotting-spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#1e293bb3;border-radius:4px;z-index:10}.animate-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.statusunit{border-radius:30px;font-size:11px;text-transform:capitalize;font-weight:600;width:18px;height:18px;text-align:center;line-height:18px}.statusunit.Ton{background:#ef4444}.statusunit.Load{background:#3b82f6}.statusunit.Hourly{background:#f59e0b}.pickprtbox{flex:1;min-width:0}.pickprtbox h2{font-size:14px;font-weight:600;color:#fff;margin:0;line-height:1.2}.pickprtbox h3{font-size:12px;color:#94a3b8;margin:2px 0 6px;font-weight:400}.pickdropprt{display:flex;flex-direction:column;gap:4px}.pickdropprt .pickprt,.pickdropprt .dropprt{color:#cbd5e1;font-size:11px}.pickdropprt .pickprt h4,.pickdropprt .dropprt h4{margin:0;font-weight:500;color:#94a3b8}.pickdropprt .pickprt.pickprt h4,.pickdropprt .dropprt.pickprt h4{color:#22c55e}.pickdropprt .pickprt.dropprt h4,.pickdropprt .dropprt.dropprt h4{color:#3b82f6}.infoicon{cursor:pointer}.infoicon:hover lucide-icon{color:#fff}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}.animate-slide-in{animation:slideIn .2s ease}.location-flow{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:11px;color:var(--text-secondary, #64748b);margin-bottom:6px}.location-flow .pickup{display:inline;align-items:center;gap:3px;color:#22c55e;white-space:nowrap;text-overflow:ellipsis;max-width:200px;overflow:hidden;position:relative;padding-left:15px}.location-flow .pickup svg{width:8px;height:8px;position:absolute;left:0;top:5px}.location-flow .delivery{display:inline;align-items:center;gap:3px;color:#ef4444;white-space:nowrap;text-overflow:ellipsis;max-width:200px;overflow:hidden;position:relative;padding-left:15px;top:5px}.location-flow .delivery svg{width:8px;height:8px;position:absolute;left:0;top:5px}\n"], dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "component", type: RouteInfoCardComponent, selector: "lib-route-info-card", inputs: ["modalOpen", "routeData", "repository", "displayMode"], outputs: ["modalOpenChange", "edit"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: i2$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JobRouteListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-job-route-list', standalone: true, imports: [LucideAngularModule, RouteInfoCardComponent, NgClass, ScrollingModule], template: "@if (modalOpen()) {\n<div class=\"fixed z-[111]\">\n  <div class=\"fixed inset-0 bg-black/50\" (click)=\"close()\"></div>\n  <aside class=\"detail-drawer top-[0] sm:top-[115px]\" (click)=\"$event.stopPropagation()\">\n    <div\n      class=\"flex items-center justify-between px-[12px] py-[10px] border-b border-gray-200 dark:border-slate-700 dark:bg-slate-900\"\n    >\n      <h3 class=\"flex items-center gap-1 font-semibold text-gray-900 dark:text-white text-[14px]\">\n        List of Routes\n        <span class=\"text-xs font-normal text-gray-400\">({{ filteredRoutes().length }})</span>\n      </h3>\n      <button\n        type=\"button\"\n        (click)=\"onMasterToggle()\"\n        [disabled]=\"isAnyPlotting()\"\n        class=\"inline-flex items-center justify-center gap-2 px-3 sm:px-4 py-1.5 bg-brand-blue hover:bg-blue-700 disabled:opacity-50 text-white font-medium rounded-md transition-colors text-[12px]\"\n      >\n        {{ allSelected() ? 'Uncheck All' : 'Check All' }}\n      </button>\n      <button\n        (click)=\"close()\"\n        class=\"p-1.5 hover:bg-gray-100 dark:hover:bg-slate-700 rounded-lg transition-colors\"\n      >\n        <lucide-icon [img]=\"icons.X\" [size]=\"18\"></lucide-icon>\n      </button>\n    </div>\n    <div class=\"p-2\">\n      <div class=\"relative w-full\">\n        <div class=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none\">\n          <lucide-icon [img]=\"hasFilter ? icons.Info : icons.Share2\" class=\"text-gray-400\" [size]=\"18\"></lucide-icon>\n        </div>\n        <input\n          type=\"text\"\n          #searchinput\n          [value]=\"searchTerm()\"\n          (input)=\"handleSearchInput(searchinput.value)\"\n          (focus)=\"showSuggestions.set(true)\"\n          (blur)=\"onSearchBlur()\"\n          placeholder=\"Search...\"\n          class=\"w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-brand-blue focus:border-transparent text-sm\"\n        />\n\n        <!-- Autocomplete Suggestions Dropdown -->\n        @if (showSuggestions() && suggestions().length > 0) {\n          <div class=\"absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 max-h-60 overflow-y-auto\">\n            <ul class=\"py-1 text-sm text-gray-700 dark:text-gray-200\">\n              @for (option of suggestions(); track option.label + option.type) {\n                <li (click)=\"addFilter(option)\"\n                    class=\"px-4 py-2 hover:bg-brand-blue/10 dark:hover:bg-brand-blue/20 cursor-pointer flex justify-between items-center group\">\n                  <span>\n                    <span class=\"font-semibold text-brand-blue capitalize\">{{option.type}}:</span> \n                    {{option.label}}\n                  </span>\n                  <lucide-icon [img]=\"icons.CheckCircle\" class=\"opacity-0 group-hover:opacity-100 text-brand-blue transition-opacity\" [size]=\"16\"></lucide-icon>\n                </li>\n              }\n            </ul>\n          </div>\n        }\n      </div>\n\n      <!-- Active Filter Chips -->\n      @if (hasFilter) {\n        <div class=\"flex flex-wrap gap-2 mt-2 px-1\">\n          @for (filter of filters(); track filter.name + filter.type) {\n            <div class=\"inline-flex items-center gap-1.5 px-3 py-1 bg-brand-blue/10 border border-brand-blue/20 text-brand-blue rounded-full text-xs font-medium\">\n              <span class=\"capitalize\">{{filter.type}}:</span>\n              <span class=\"truncate max-w-[150px]\">{{filter.name}}</span>\n              <button (click)=\"removeFilter()\" class=\"hover:text-red-500 transition-colors\">\n                <lucide-icon [img]=\"icons.X\" [size]=\"14\"></lucide-icon>\n              </button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n    <div class=\"overflow-y-auto p-2 drawer-listing-box\">\n      <cdk-virtual-scroll-viewport itemSize=\"60\" class=\"routeList-viewport h-[calc(100vh-250px)]\">\n        @if (filteredRoutes().length > 0) {\n          <ul class=\"route-list-ul gap-2 flex flex-col\">\n            @for (route of filteredRoutes(); track getRouteId(route)) {\n              <li \n                class=\"route-li-v1 bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-700\" \n                [class.selected]=\"isRouteSelected(route)\" \n                [class.pointer-events-none]=\"isAnyPlotting()\"\n                [class.opacity-60]=\"isAnyPlotting()\"\n                (click)=\"toggleRoute(route)\">\n                <div class=\"task-header justify-between\">\n                  <span class=\"job-code\"> {{route.route_name || route.order_number}} </span>\n                  @if (config.repository === 'coolmap') {\n                    <span class=\"job-code\">{{route.customer_name}}</span>\n                  }\n                  <div class=\"iconprt\">\n                    @if (isPlotting(route)) {\n                      <div class=\"plotting-spinner\">\n                        <lucide-icon [img]=\"icons.LoaderCircle\" class=\"animate-spin text-black dark:text-white flex items-center justify-center relative z-10\" [size]=\"18\"></lucide-icon>\n                      </div>\n                    }\n                    <div class=\"statusunit text-white\" [ngClass]=\"route.unit || ''\">\n                      {{ route.unit?.charAt(0) || 'U' }}\n                    </div>\n                    <div class=\"infoicon\" (click)=\"$event.stopPropagation(); selectedRoute.set(route); showRouteModal = true\">\n                      <lucide-icon [img]=\"icons.Info\" [size]=\"18\" class=\"text-gray-400\"></lucide-icon>\n                    </div>\n                    @if (config.repository === 'customer') {\n                      <div class=\"infoicon\" (click)=\"$event.stopPropagation()\">\n                        <lucide-icon [img]=\"icons.Share2\" [size]=\"16\" class=\"text-gray-400\"></lucide-icon>\n                      </div>\n                    }\n                  </div>\n                </div>\n               \n                <div class=\"location-flow bg-gray-100 dark:bg-slate-900 px-2 py-2 pb-3 rounded-lg\">\n                  <span class=\"pickup\">\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      width=\"10\"\n                      height=\"10\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"currentColor\"\n                    >\n                      <circle cx=\"12\" cy=\"12\" r=\"8\" />\n                    </svg>\n                    {{ (route.pickup_location || '').split('|')[1] ? (route.pickup_location || '').split('|')[1] : (route.pickup_location || '') }}\n                  </span>\n                  <span class=\"delivery\">\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      width=\"10\"\n                      height=\"10\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"currentColor\"\n                    >\n                      <circle cx=\"12\" cy=\"12\" r=\"8\" />\n                    </svg>\n                    {{ (route.delivery_location || '').split('|')[1] ? (route.delivery_location || '').split('|')[1] : (route.delivery_location || '') }}\n                  </span>\n                </div>\n              </li>\n            }\n          </ul>\n        } @else if (routes().length === 0) {\n          <div class=\"p-8 text-center text-gray-400\">\n            No routes available for this perspective.\n          </div>\n        }\n      </cdk-virtual-scroll-viewport>\n    </div>\n  </aside>\n</div>\n}\n<lib-route-info-card [(modalOpen)]=\"showRouteModal\" [routeData]=\"selectedRoute()\" [repository]=\"config.repository\" displayMode=\"dispatch\"></lib-route-info-card>\n", styles: [".detail-drawer{position:fixed;right:0;bottom:36px;width:280px;background:var(--bg-primary, white);border-left:1px solid var(--border-color, #e2e8f0);display:flex;flex-direction:column;z-index:501;animation:slideIn .2s ease}:host-context(.dark) .detail-drawer{background-color:#1e293b;border-color:#334155}.drawer-listing-box{flex:1;overflow:hidden;padding:0!important}.routeList-viewport{height:100%;width:100%}.route-list-ul{list-style:none;padding:10px;margin:0}.route-li-v1{position:relative;padding:6px 10px;display:flex;flex-direction:column;gap:2px;border-radius:8px;cursor:pointer;transition:all .15s ease;min-height:72px}.route-li-v1:hover{background:#ffffff0d}.route-li-v1.selected{border:1px solid #3b82f6}.task-header{display:flex;align-items:center;gap:6px;margin-bottom:4px}.job-code{font-size:13px;font-weight:600;color:var(--text-primary, #1e293b);white-space:nowrap;text-overflow:ellipsis;max-width:190px;overflow:hidden}:host-context(.dark) .job-code{color:#f1f5f9}.iconprt{display:flex;flex-shrink:0;gap:5px}.plotting-spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#1e293bb3;border-radius:4px;z-index:10}.animate-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.statusunit{border-radius:30px;font-size:11px;text-transform:capitalize;font-weight:600;width:18px;height:18px;text-align:center;line-height:18px}.statusunit.Ton{background:#ef4444}.statusunit.Load{background:#3b82f6}.statusunit.Hourly{background:#f59e0b}.pickprtbox{flex:1;min-width:0}.pickprtbox h2{font-size:14px;font-weight:600;color:#fff;margin:0;line-height:1.2}.pickprtbox h3{font-size:12px;color:#94a3b8;margin:2px 0 6px;font-weight:400}.pickdropprt{display:flex;flex-direction:column;gap:4px}.pickdropprt .pickprt,.pickdropprt .dropprt{color:#cbd5e1;font-size:11px}.pickdropprt .pickprt h4,.pickdropprt .dropprt h4{margin:0;font-weight:500;color:#94a3b8}.pickdropprt .pickprt.pickprt h4,.pickdropprt .dropprt.pickprt h4{color:#22c55e}.pickdropprt .pickprt.dropprt h4,.pickdropprt .dropprt.dropprt h4{color:#3b82f6}.infoicon{cursor:pointer}.infoicon:hover lucide-icon{color:#fff}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}.animate-slide-in{animation:slideIn .2s ease}.location-flow{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:11px;color:var(--text-secondary, #64748b);margin-bottom:6px}.location-flow .pickup{display:inline;align-items:center;gap:3px;color:#22c55e;white-space:nowrap;text-overflow:ellipsis;max-width:200px;overflow:hidden;position:relative;padding-left:15px}.location-flow .pickup svg{width:8px;height:8px;position:absolute;left:0;top:5px}.location-flow .delivery{display:inline;align-items:center;gap:3px;color:#ef4444;white-space:nowrap;text-overflow:ellipsis;max-width:200px;overflow:hidden;position:relative;padding-left:15px;top:5px}.location-flow .delivery svg{width:8px;height:8px;position:absolute;left:0;top:5px}\n"] }]
+        }], propDecorators: { customerRepoDetails: [{
+                type: Input
+            }], selectedRouteIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRouteIds", required: false }] }], modalOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalOpen", required: false }] }], initialRoutes: [{
+                type: Input
+            }], modalOpenChange: [{
+                type: Output
+            }], routeSelect: [{
+                type: Output
+            }], masterToggleEvent: [{
+                type: Output
+            }] } });
+
+class ViewRouteListComponent {
+    showRouteModal = false;
+    selectedRoute = signal(null, ...(ngDevMode ? [{ debugName: "selectedRoute" }] : []));
+    config = inject(COOLMAP_CONFIG);
+    listMode = 'sidebar';
+    collapsible = true;
+    routes = [];
+    selectedRouteIds = [];
+    routeSelect = new EventEmitter();
+    editRoute = new EventEmitter();
+    collapsed = false;
+    icons = {
+        Info,
+        ChevronRight,
+        ChevronLeft
+    };
+    toggleCollapse() {
+        if (this.collapsible) {
+            this.collapsed = !this.collapsed;
+        }
+    }
+    toggleRouteSelection(route) {
+        const id = this.getRouteId(route);
+        if (!id)
+            return;
+        this.routeSelect.emit(id);
+    }
+    getRouteId(route) {
+        return route.job_id || route.route_id || route.route_details_id || '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ViewRouteListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ViewRouteListComponent, isStandalone: true, selector: "lib-view-route-list", inputs: { listMode: "listMode", collapsible: "collapsible", routes: "routes", selectedRouteIds: "selectedRouteIds" }, outputs: { routeSelect: "routeSelect", editRoute: "editRoute" }, ngImport: i0, template: "<div\n  class=\"cards-list-container\"\n  [class.floating]=\"listMode === 'floating'\"\n  [class.sidebar]=\"listMode === 'sidebar'\"\n  [class.inline]=\"listMode === 'inline'\"\n  [class.collapsed]=\"collapsed\"\n>\n  @if (listMode !== 'inline') {\n  <div class=\"list-header\">\n    <div class=\"header-title\">\n      <span class=\"title-text\">View Route</span>\n      <span class=\"routes-count\">({{ routes.length || 0 }})</span>\n    </div>\n    <button\n      class=\"collapse-btn\"\n      (click)=\"toggleCollapse()\"\n      [title]=\"collapsed ? 'Expand' : 'Collapse'\"\n    >\n      @if (collapsed) {\n        <lucide-icon [img]=\"icons.ChevronRight\" [size]=\"16\"></lucide-icon>\n      } @else {\n        <lucide-icon [img]=\"icons.ChevronLeft\" [size]=\"16\"></lucide-icon>\n      }\n    </button>\n  </div>\n  } \n  \n  @if (!collapsed) {\n  <div class=\"cards-scroll-container\" #scrollContainer>\n    <div class=\"cards-list\">\n      @for (route of routes; track getRouteId(route)) {\n        <div class=\"card-wrapper\" (click)=\"toggleRouteSelection(route)\">\n          <div\n            class=\"route-card bg-white dark:bg-slate-800 border transition-all duration-200\"\n            [class.border-brand-blue]=\"selectedRouteIds.includes(getRouteId(route))\"\n            [class.border-gray-200]=\"!selectedRouteIds.includes(getRouteId(route))\"\n            [class.dark:border-slate-700]=\"!selectedRouteIds.includes(getRouteId(route))\"\n            [class.selected]=\"selectedRouteIds.includes(getRouteId(route))\"\n          >\n            <div class=\"task-header justify-between items-start mb-1\">\n              <h2 class=\"text-sm font-semibold text-gray-900 dark:text-white truncate max-w-[80%]\">\n                {{ route.route_name || route.order_number || 'Unnamed Route' }}\n              </h2>\n              <div class=\"flex gap-2 shrink-0\">\n                <div class=\"statusunit text-white\" [ngClass]=\"route.unit || ''\">\n                  {{ route.unit?.charAt(0) || 'U' }}\n                </div>\n                <button\n                  type=\"button\"\n                  class=\"text-gray-400 hover:text-brand-blue transition-colors\"\n                  (click)=\"$event.stopPropagation(); selectedRoute.set(route); showRouteModal = true\"\n                >\n                  <lucide-icon [img]=\"icons.Info\" [size]=\"18\"></lucide-icon>\n                </button>\n              </div>\n            </div>\n            \n            @if (route.customer_name) {\n              <div class=\"text-[10px] text-gray-500 dark:text-slate-500 mb-2 uppercase tracking-wider font-medium truncate\">\n                {{ route.customer_name }}\n              </div>\n            }\n\n            <div class=\"location-flow bg-gray-50 dark:bg-slate-900/50 border border-gray-100 dark:border-slate-700/50 p-2 rounded-lg\">\n              <div class=\"text-[11px] truncate flex items-center gap-1.5 text-gray-600 dark:text-gray-400\">\n                <div class=\"w-1.5 h-1.5 rounded-full bg-green-500 shrink-0\"></div>\n                 {{ (route.pickup_location || '').split('|')[1] || route.pickup_location || 'N/A' }}\n              </div>\n              <div class=\"text-[11px] truncate flex items-center gap-1.5 mt-1 text-gray-600 dark:text-gray-400\">\n                <div class=\"w-1.5 h-1.5 rounded-full bg-blue-500 shrink-0\"></div>\n                {{ (route.delivery_location || '').split('|')[1] || route.delivery_location || 'N/A' }}\n              </div>\n            </div>\n          </div>\n        </div>\n      } @empty {\n        <div class=\"p-8 text-center text-gray-400 text-sm italic\">\n          No routes found in this catalog.\n        </div>\n      }\n    </div>\n  </div>\n  }\n</div>\n\n<lib-route-info-card \n  [(modalOpen)]=\"showRouteModal\" \n  [routeData]=\"selectedRoute()\" \n  [repository]=\"config.repository\" \n  displayMode=\"catalog\"\n  (edit)=\"editRoute.emit(selectedRoute()!)\"\n></lib-route-info-card>\n", styles: [":host{display:block}.cards-list-container{display:flex;flex-direction:column;height:100%;background:var(--bg-primary, white)}.cards-list-container.floating{position:absolute;top:12px;left:12px;width:280px;max-height:calc(100% - 24px);border-radius:12px;box-shadow:0 4px 24px #00000026;z-index:100;overflow:hidden}.cards-list-container.floating.collapsed{width:48px}.cards-list-container.sidebar{width:100%;border-right:1px solid var(--border-color, #e2e8f0)}.cards-list-container.inline{width:160px;min-width:160px;border-right:1px solid var(--border-color, #e2e8f0)}:host-context(.dark) .cards-list-container{background-color:#1e293b}:host-context(.dark) .cards-list-container.sidebar,:host-context(.dark) .cards-list-container.inline{border-color:#334155}.list-header{display:flex;align-items:center;justify-content:space-between;padding:12px;border-bottom:1px solid var(--border-color, #e2e8f0);background:var(--bg-secondary, #f8fafc)}:host-context(.dark) .list-header{background-color:#0f172a;border-color:#334155}.collapsed .list-header{padding:12px 8px;justify-content:center}.header-title{display:flex;align-items:center;gap:6px}.collapsed .header-title{display:none}.title-text{font-size:13px;font-weight:600;color:var(--text-primary, #1e293b)}:host-context(.dark) .title-text{color:#f1f5f9}.cards-scroll-container{flex:1;overflow-y:auto;overflow-x:hidden}.cards-list{display:flex;flex-direction:column;gap:8px;padding:8px}.card-wrapper{border-radius:8px;transition:all .2s ease}.route-card{position:relative;padding:6px 10px;display:flex;flex-direction:column;gap:2px;border-radius:8px;cursor:pointer;transition:all .15s ease;min-height:72px}.route-card:hover{border-color:var(--accent-color, #3b82f6);box-shadow:0 2px 8px #00000014}.task-header{display:flex;align-items:center;gap:6px;margin-bottom:4px}.job-code{font-size:13px;font-weight:600;color:var(--text-primary, #1e293b);white-space:nowrap;text-overflow:ellipsis;max-width:190px;overflow:hidden}:host-context(.dark) .job-code{color:#f1f5f9}.statusunit{border-radius:30px;font-size:12px;text-transform:capitalize;font-weight:600;width:20px;height:20px;text-align:center;line-height:20px}.statusunit.Ton{background:#22c55e}.statusunit.Load{background:#3b82f6}.statusunit.Hourly{background:#f59e0b}.location-flow{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:11px;color:var(--text-secondary, #64748b);margin-bottom:6px}.location-flow .pickup{display:inline;align-items:center;gap:3px;color:#22c55e;white-space:nowrap;text-overflow:ellipsis;max-width:200px;overflow:hidden;position:relative;padding-left:15px}.location-flow .pickup svg{width:8px;height:8px;position:absolute;left:0;top:5px}.location-flow .delivery{display:inline;align-items:center;gap:3px;color:#ef4444;white-space:nowrap;text-overflow:ellipsis;max-width:200px;overflow:hidden;position:relative;padding-left:15px;top:5px}.location-flow .delivery svg{width:8px;height:8px;position:absolute;left:0;top:5px}\n"], dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "component", type: RouteInfoCardComponent, selector: "lib-route-info-card", inputs: ["modalOpen", "routeData", "repository", "displayMode"], outputs: ["modalOpenChange", "edit"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ViewRouteListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-view-route-list', standalone: true, imports: [LucideAngularModule, RouteInfoCardComponent, NgClass], template: "<div\n  class=\"cards-list-container\"\n  [class.floating]=\"listMode === 'floating'\"\n  [class.sidebar]=\"listMode === 'sidebar'\"\n  [class.inline]=\"listMode === 'inline'\"\n  [class.collapsed]=\"collapsed\"\n>\n  @if (listMode !== 'inline') {\n  <div class=\"list-header\">\n    <div class=\"header-title\">\n      <span class=\"title-text\">View Route</span>\n      <span class=\"routes-count\">({{ routes.length || 0 }})</span>\n    </div>\n    <button\n      class=\"collapse-btn\"\n      (click)=\"toggleCollapse()\"\n      [title]=\"collapsed ? 'Expand' : 'Collapse'\"\n    >\n      @if (collapsed) {\n        <lucide-icon [img]=\"icons.ChevronRight\" [size]=\"16\"></lucide-icon>\n      } @else {\n        <lucide-icon [img]=\"icons.ChevronLeft\" [size]=\"16\"></lucide-icon>\n      }\n    </button>\n  </div>\n  } \n  \n  @if (!collapsed) {\n  <div class=\"cards-scroll-container\" #scrollContainer>\n    <div class=\"cards-list\">\n      @for (route of routes; track getRouteId(route)) {\n        <div class=\"card-wrapper\" (click)=\"toggleRouteSelection(route)\">\n          <div\n            class=\"route-card bg-white dark:bg-slate-800 border transition-all duration-200\"\n            [class.border-brand-blue]=\"selectedRouteIds.includes(getRouteId(route))\"\n            [class.border-gray-200]=\"!selectedRouteIds.includes(getRouteId(route))\"\n            [class.dark:border-slate-700]=\"!selectedRouteIds.includes(getRouteId(route))\"\n            [class.selected]=\"selectedRouteIds.includes(getRouteId(route))\"\n          >\n            <div class=\"task-header justify-between items-start mb-1\">\n              <h2 class=\"text-sm font-semibold text-gray-900 dark:text-white truncate max-w-[80%]\">\n                {{ route.route_name || route.order_number || 'Unnamed Route' }}\n              </h2>\n              <div class=\"flex gap-2 shrink-0\">\n                <div class=\"statusunit text-white\" [ngClass]=\"route.unit || ''\">\n                  {{ route.unit?.charAt(0) || 'U' }}\n                </div>\n                <button\n                  type=\"button\"\n                  class=\"text-gray-400 hover:text-brand-blue transition-colors\"\n                  (click)=\"$event.stopPropagation(); selectedRoute.set(route); showRouteModal = true\"\n                >\n                  <lucide-icon [img]=\"icons.Info\" [size]=\"18\"></lucide-icon>\n                </button>\n              </div>\n            </div>\n            \n            @if (route.customer_name) {\n              <div class=\"text-[10px] text-gray-500 dark:text-slate-500 mb-2 uppercase tracking-wider font-medium truncate\">\n                {{ route.customer_name }}\n              </div>\n            }\n\n            <div class=\"location-flow bg-gray-50 dark:bg-slate-900/50 border border-gray-100 dark:border-slate-700/50 p-2 rounded-lg\">\n              <div class=\"text-[11px] truncate flex items-center gap-1.5 text-gray-600 dark:text-gray-400\">\n                <div class=\"w-1.5 h-1.5 rounded-full bg-green-500 shrink-0\"></div>\n                 {{ (route.pickup_location || '').split('|')[1] || route.pickup_location || 'N/A' }}\n              </div>\n              <div class=\"text-[11px] truncate flex items-center gap-1.5 mt-1 text-gray-600 dark:text-gray-400\">\n                <div class=\"w-1.5 h-1.5 rounded-full bg-blue-500 shrink-0\"></div>\n                {{ (route.delivery_location || '').split('|')[1] || route.delivery_location || 'N/A' }}\n              </div>\n            </div>\n          </div>\n        </div>\n      } @empty {\n        <div class=\"p-8 text-center text-gray-400 text-sm italic\">\n          No routes found in this catalog.\n        </div>\n      }\n    </div>\n  </div>\n  }\n</div>\n\n<lib-route-info-card \n  [(modalOpen)]=\"showRouteModal\" \n  [routeData]=\"selectedRoute()\" \n  [repository]=\"config.repository\" \n  displayMode=\"catalog\"\n  (edit)=\"editRoute.emit(selectedRoute()!)\"\n></lib-route-info-card>\n", styles: [":host{display:block}.cards-list-container{display:flex;flex-direction:column;height:100%;background:var(--bg-primary, white)}.cards-list-container.floating{position:absolute;top:12px;left:12px;width:280px;max-height:calc(100% - 24px);border-radius:12px;box-shadow:0 4px 24px #00000026;z-index:100;overflow:hidden}.cards-list-container.floating.collapsed{width:48px}.cards-list-container.sidebar{width:100%;border-right:1px solid var(--border-color, #e2e8f0)}.cards-list-container.inline{width:160px;min-width:160px;border-right:1px solid var(--border-color, #e2e8f0)}:host-context(.dark) .cards-list-container{background-color:#1e293b}:host-context(.dark) .cards-list-container.sidebar,:host-context(.dark) .cards-list-container.inline{border-color:#334155}.list-header{display:flex;align-items:center;justify-content:space-between;padding:12px;border-bottom:1px solid var(--border-color, #e2e8f0);background:var(--bg-secondary, #f8fafc)}:host-context(.dark) .list-header{background-color:#0f172a;border-color:#334155}.collapsed .list-header{padding:12px 8px;justify-content:center}.header-title{display:flex;align-items:center;gap:6px}.collapsed .header-title{display:none}.title-text{font-size:13px;font-weight:600;color:var(--text-primary, #1e293b)}:host-context(.dark) .title-text{color:#f1f5f9}.cards-scroll-container{flex:1;overflow-y:auto;overflow-x:hidden}.cards-list{display:flex;flex-direction:column;gap:8px;padding:8px}.card-wrapper{border-radius:8px;transition:all .2s ease}.route-card{position:relative;padding:6px 10px;display:flex;flex-direction:column;gap:2px;border-radius:8px;cursor:pointer;transition:all .15s ease;min-height:72px}.route-card:hover{border-color:var(--accent-color, #3b82f6);box-shadow:0 2px 8px #00000014}.task-header{display:flex;align-items:center;gap:6px;margin-bottom:4px}.job-code{font-size:13px;font-weight:600;color:var(--text-primary, #1e293b);white-space:nowrap;text-overflow:ellipsis;max-width:190px;overflow:hidden}:host-context(.dark) .job-code{color:#f1f5f9}.statusunit{border-radius:30px;font-size:12px;text-transform:capitalize;font-weight:600;width:20px;height:20px;text-align:center;line-height:20px}.statusunit.Ton{background:#22c55e}.statusunit.Load{background:#3b82f6}.statusunit.Hourly{background:#f59e0b}.location-flow{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:11px;color:var(--text-secondary, #64748b);margin-bottom:6px}.location-flow .pickup{display:inline;align-items:center;gap:3px;color:#22c55e;white-space:nowrap;text-overflow:ellipsis;max-width:200px;overflow:hidden;position:relative;padding-left:15px}.location-flow .pickup svg{width:8px;height:8px;position:absolute;left:0;top:5px}.location-flow .delivery{display:inline;align-items:center;gap:3px;color:#ef4444;white-space:nowrap;text-overflow:ellipsis;max-width:200px;overflow:hidden;position:relative;padding-left:15px;top:5px}.location-flow .delivery svg{width:8px;height:8px;position:absolute;left:0;top:5px}\n"] }]
+        }], propDecorators: { listMode: [{
+                type: Input
+            }], collapsible: [{
+                type: Input
+            }], routes: [{
+                type: Input
+            }], selectedRouteIds: [{
+                type: Input
+            }], routeSelect: [{
+                type: Output
+            }], editRoute: [{
+                type: Output
+            }] } });
+
+class AddRouteComponent {
+    config = inject(COOLMAP_CONFIG);
+    modalOpen = input(false, ...(ngDevMode ? [{ debugName: "modalOpen" }] : []));
+    routeData = input(null, ...(ngDevMode ? [{ debugName: "routeData" }] : []));
+    customerRepoDetails = input(null, ...(ngDevMode ? [{ debugName: "customerRepoDetails" }] : []));
+    modalOpenChange = new EventEmitter();
+    routeDeleted = new EventEmitter();
+    routeSaved = new EventEmitter();
+    dragX = signal(0, ...(ngDevMode ? [{ debugName: "dragX" }] : []));
+    dragY = signal(0, ...(ngDevMode ? [{ debugName: "dragY" }] : []));
+    isDragging = false;
+    dragStartX = 0;
+    dragStartY = 0;
+    dragInitialX = 0;
+    dragInitialY = 0;
+    // New Services
+    utils = inject(UtilsService);
+    coolMapService = inject(CoolmapService);
+    destroyRef = inject(DestroyRef);
+    cdr = inject(ChangeDetectorRef);
+    addRouteForm = new FormGroup({
+        route_name: new FormControl('', [Validators.required]),
+        customer_name: new FormControl({ value: '', disabled: true }, [Validators.required]),
+        customer_id: new FormControl(''),
+        unit_id: new FormControl('', [Validators.required]),
+        path: new FormControl('', [Validators.required]),
+        pickup_location: new FormControl('', [Validators.required]),
+        pickup_lat_lng: new FormControl('', [Validators.required]),
+        delivery_location: new FormControl('', [Validators.required]),
+        delivery_lat_lng: new FormControl('', [Validators.required]),
+        estimated_distance: new FormControl('', [Validators.required]),
+        estimated_time: new FormControl('', [Validators.required]),
+        note: new FormControl('', [Validators.maxLength(2048)]),
+        trucker_pay_estimate: new FormControl(null),
+        customer_price_estimate: new FormControl(null),
+        pickUpSearchOption: new FormControl(inject(COOLMAP_CONFIG).repository === 'coolmap' ? 'system' : 'google'),
+        deliverySearchOtption: new FormControl(inject(COOLMAP_CONFIG).repository === 'coolmap' ? 'system' : 'google'),
+    });
+    // Data signals
+    unitsList = signal([], ...(ngDevMode ? [{ debugName: "unitsList" }] : []));
+    locationList = signal([], ...(ngDevMode ? [{ debugName: "locationList" }] : []));
+    customersList = signal([], ...(ngDevMode ? [{ debugName: "customersList" }] : []));
+    showDeleteModal = signal(false, ...(ngDevMode ? [{ debugName: "showDeleteModal" }] : []));
+    routeId = signal(null, ...(ngDevMode ? [{ debugName: "routeId" }] : []));
+    preventSave = signal(false, ...(ngDevMode ? [{ debugName: "preventSave" }] : []));
+    preventInitialSave = signal(false, ...(ngDevMode ? [{ debugName: "preventInitialSave" }] : []));
+    // Search options
+    customerOptions = signal([], ...(ngDevMode ? [{ debugName: "customerOptions" }] : []));
+    pickupOptions = signal([], ...(ngDevMode ? [{ debugName: "pickupOptions" }] : []));
+    deliveryOptions = signal([], ...(ngDevMode ? [{ debugName: "deliveryOptions" }] : []));
+    // UI toggles
+    showCustomerDropdown = signal(false, ...(ngDevMode ? [{ debugName: "showCustomerDropdown" }] : []));
+    showPickupDropdown = signal(false, ...(ngDevMode ? [{ debugName: "showPickupDropdown" }] : []));
+    showDeliveryDropdown = signal(false, ...(ngDevMode ? [{ debugName: "showDeliveryDropdown" }] : []));
+    loadingLocations = signal(false, ...(ngDevMode ? [{ debugName: "loadingLocations" }] : []));
+    loadingCustomers = signal(false, ...(ngDevMode ? [{ debugName: "loadingCustomers" }] : []));
+    hideDropdown(type) {
+        setTimeout(() => {
+            if (type === 'customer')
+                this.showCustomerDropdown.set(false);
+            if (type === 'pickup')
+                this.showPickupDropdown.set(false);
+            if (type === 'delivery')
+                this.showDeliveryDropdown.set(false);
+        }, 200);
+    }
+    // ElementRefs for Google Maps integration
+    filterPickup = viewChild('filterPickup', ...(ngDevMode ? [{ debugName: "filterPickup" }] : []));
+    filterDelivery = viewChild('filterDelivery', ...(ngDevMode ? [{ debugName: "filterDelivery" }] : []));
+    get isSystemPickup() {
+        return this.addRouteForm.get('pickUpSearchOption')?.value === 'system';
+    }
+    get isSystemDelivery() {
+        return this.addRouteForm.get('deliverySearchOtption')?.value === 'system';
+    }
+    get selectedUnitName() {
+        const unitId = this.addRouteForm.value.unit_id;
+        if (!unitId)
+            return 'Select Unit/Driver';
+        const unit = this.unitsList().find(u => u.id === unitId);
+        return unit ? unit.type : 'Select Unit/Driver';
+    }
+    constructor() {
+        // Effect for handling routeData Input
+        effect(() => {
+            const data = this.routeData();
+            setTimeout(() => {
+                this.inIt(data);
+            }, 0);
+        });
+        effect(() => {
+            if (this.modalOpen()) {
+                this.coolMapService.clearAllRoutes();
+                this.utils.fetchUnitsList().then((res) => {
+                    this.unitsList.set(res || []);
+                });
+                if (this.config.repository === 'coolmap') {
+                    this.loadingLocations.set(true);
+                    this.addRouteForm.get('pickup_location')?.disable();
+                    this.addRouteForm.get('delivery_location')?.disable();
+                    this.utils.fetchLocationlist().then((res) => {
+                        this.locationList.set(res || []);
+                        this.pickupOptions.set(res || []);
+                        this.deliveryOptions.set(res || []);
+                        this.loadingLocations.set(false);
+                        this.addRouteForm.get('pickup_location')?.enable();
+                        this.addRouteForm.get('delivery_location')?.enable();
+                    });
+                    this.loadingCustomers.set(true);
+                    this.utils.fetchCustomersList().then((res) => {
+                        this.customersList.set(res || []);
+                        this.customerOptions.set(res || []);
+                        this.addRouteForm.controls['customer_name'].enable();
+                        this.loadingCustomers.set(false);
+                    });
+                }
+                setTimeout(() => {
+                    this.bindGoogleAutocomplete();
+                }, 150);
+            }
+        });
+        // Reacting to dropdown changes for re-running calculations
+        this.addRouteForm.get('pickup_location')?.valueChanges.pipe(takeUntilDestroyed()).subscribe(res => {
+            if (res && res !== this.addRouteForm.getRawValue().pickup_location) {
+                this.addRouteForm.patchValue({ pickup_lat_lng: '' });
+            }
+            // Populate dropdown for system
+            if (this.isSystemPickup) {
+                if (!res) {
+                    this.pickupOptions.set(this.locationList());
+                }
+                else {
+                    const lower = res.toLowerCase();
+                    this.pickupOptions.set(this.locationList().filter(l => l.formatted_address.toLowerCase().includes(lower)));
+                }
+            }
+        });
+        this.addRouteForm.get('delivery_location')?.valueChanges.pipe(takeUntilDestroyed()).subscribe(res => {
+            if (res && res !== this.addRouteForm.getRawValue().delivery_location) {
+                this.addRouteForm.patchValue({ delivery_lat_lng: '' });
+            }
+            if (this.isSystemDelivery) {
+                if (!res) {
+                    this.deliveryOptions.set(this.locationList());
+                }
+                else {
+                    const lower = res.toLowerCase();
+                    this.deliveryOptions.set(this.locationList().filter(l => l.formatted_address.toLowerCase().includes(lower)));
+                }
+            }
+        });
+        this.addRouteForm.get('customer_name')?.valueChanges.pipe(takeUntilDestroyed()).subscribe(res => {
+            if (!res) {
+                this.customerOptions.set(this.customersList());
+            }
+            else {
+                const lower = res.toLowerCase();
+                this.customerOptions.set(this.customersList().filter(c => c.customer_name.toLowerCase().includes(lower)));
+            }
+        });
+        // Clear path if logic changes
+        this.addRouteForm.valueChanges.pipe(takeUntilDestroyed(), pairwise(), filter(([prev, curr]) => {
+            return (prev.pickUpSearchOption === curr.pickUpSearchOption) &&
+                prev.deliverySearchOtption === curr.deliverySearchOtption;
+        })).subscribe(() => {
+            if (this.preventInitialSave()) {
+                this.preventInitialSave.set(false);
+            }
+        });
+    }
+    ngAfterViewInit() {
+        // Listen for search mode changes
+        this.addRouteForm.get('pickUpSearchOption')?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(val => {
+            this.addRouteForm.patchValue({ pickup_location: null, pickup_lat_lng: null });
+        });
+        this.addRouteForm.get('deliverySearchOtption')?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(val => {
+            this.addRouteForm.patchValue({ delivery_location: null, delivery_lat_lng: null });
+        });
+    }
+    async onGooglePlaceSelect(event, type) {
+        console.log('event', event);
+        const place = event.placePrediction?.toPlace();
+        if (!place)
+            return;
+        // The google API wrapper may require raw DOM event access depending on module configuration
+        try {
+            await place.fetchFields({ fields: ['location', 'formattedAddress', 'displayName'] });
+            const res = {
+                lat: place.location.lat(),
+                lng: place.location.lng(),
+                formatted_address: place.formattedAddress || place.displayName
+            };
+            this.patchAddressValue(res, type);
+        }
+        catch (e) {
+            console.warn("Failed to retrieve Place data natively: ", e);
+        }
+    }
+    bindGoogleAutocomplete() {
+        const pickupEl = this.filterPickup()?.nativeElement;
+        const deliveryEl = this.filterDelivery()?.nativeElement;
+        if (pickupEl) {
+            const autocomplete = new window.google.maps.places.Autocomplete(pickupEl);
+            autocomplete.addListener('place_changed', () => {
+                const place = autocomplete.getPlace();
+                if (place.geometry) {
+                    const res = {
+                        lat: place.geometry.location.lat(),
+                        lng: place.geometry.location.lng(),
+                        formatted_address: place.formatted_address || place.name
+                    };
+                    this.patchAddressValue(res, 'pickup');
+                }
+            });
+        }
+        if (deliveryEl) {
+            const autocomplete = new window.google.maps.places.Autocomplete(deliveryEl);
+            autocomplete.addListener('place_changed', () => {
+                const place = autocomplete.getPlace();
+                if (place.geometry) {
+                    const res = {
+                        lat: place.geometry.location.lat(),
+                        lng: place.geometry.location.lng(),
+                        formatted_address: place.formatted_address || place.name
+                    };
+                    this.patchAddressValue(res, 'delivery');
+                }
+            });
+        }
+    }
+    inIt(changes) {
+        if (changes && Object.keys(changes).length > 0) {
+            if (!changes.prevent) {
+                this.preventSave.set(false);
+                this.patchFormValue(changes).then(() => {
+                    this.checkAndFetchRouteInformation(true);
+                });
+            }
+        }
+        else {
+            this.preventSave.set(true);
+            this.patchFormValue().then(() => {
+                this.checkAndFetchRouteInformation();
+            });
+        }
+    }
+    async patchFormValue(data) {
+        this.addRouteForm.reset();
+        const isCustomerRepo = this.config.repository === 'customer';
+        if (data) {
+            this.addRouteForm.patchValue(data, { emitEvent: false });
+        }
+        if (isCustomerRepo && this.customerRepoDetails()) {
+            this.addRouteForm.patchValue({
+                customer_id: this.customerRepoDetails().customer?.id,
+                customer_name: this.customerRepoDetails().customer?.name,
+                pickUpSearchOption: 'google',
+                deliverySearchOtption: 'google'
+            }, { emitEvent: false });
+        }
+        else {
+            this.addRouteForm.patchValue({
+                pickUpSearchOption: (!data || (data.hasOwnProperty('is_system_pickup') ? data.is_system_pickup : true)) ? 'system' : 'google',
+                deliverySearchOtption: (!data || (data.hasOwnProperty('is_system_delivery') ? data.is_system_delivery : true)) ? 'system' : 'google',
+            }, { emitEvent: false });
+        }
+        this.routeId.set(data?.route_id || data?.id || null);
+        await true;
+    }
+    patchAddressValue(data, type) {
+        this.addRouteForm.patchValue({
+            [type + '_location']: data.formatted_address,
+            [type + '_lat_lng']: `${data.lat},${data.lng}`
+        });
+        this.checkAndFetchRouteInformation();
+    }
+    checkAndFetchRouteInformation(isinitial) {
+        const val = this.addRouteForm.value;
+        if (val.delivery_lat_lng && val.pickup_lat_lng && val.unit_id) {
+            const unit = this.unitsList().find((x) => x.id === val.unit_id);
+            const param = {
+                delivery_lat_lng: val.delivery_lat_lng,
+                pickup_lat_lng: val.pickup_lat_lng,
+                unit: unit?.type || 'Ton'
+            };
+            // Mapbox estimation route
+            this.utils.postdata('calculate/routes/estimation', param).subscribe({
+                next: (res) => {
+                    setTimeout(() => {
+                        if (res && res.path) {
+                            this.addRouteForm.patchValue({
+                                estimated_distance: res.dist,
+                                estimated_time: res.time,
+                                path: res.path,
+                                trucker_pay_estimate: res.trucker_haul_cost,
+                                customer_price_estimate: res.customer_price_estimate
+                            });
+                            // Decode and plot
+                            let path = res.path.split(';').map((str) => {
+                                const parts = str.split(',');
+                                return [parseFloat(parts[1]), parseFloat(parts[0])];
+                            });
+                            const element = {
+                                type: 'FeatureCollection',
+                                features: [{ type: 'Feature', properties: {}, geometry: { type: 'LineString', coordinates: path } }]
+                            };
+                            this.coolMapService.removeRouteAndMarker(1).then(() => {
+                                this.coolMapService.loadMapProperty(element, 1, unit?.type, {
+                                    pickup_location: val.pickup_location,
+                                    delivery_location: val.delivery_location,
+                                    route_name: val.route_name,
+                                    unit: unit?.type
+                                });
+                                this.preventSave.set(true);
+                                this.cdr.detectChanges();
+                            });
+                        }
+                        else {
+                            console.warn('Could not calculate route');
+                            this.preventSave.set(true);
+                            this.utils.openSnackBar((res?.status ? res.status : 'Somthing went wrong, Please try different address.'), 'error');
+                            this.cdr.detectChanges();
+                        }
+                        if (this.routeId() && isinitial) {
+                            this.preventInitialSave.set(true);
+                            this.cdr.detectChanges();
+                        }
+                    });
+                }
+            });
+        }
+        else {
+            this.coolMapService.removeRouteAndMarker(1, 'addroute');
+        }
+    }
+    saveRoute() {
+        if (this.addRouteForm.valid) {
+            const data = this.addRouteForm.getRawValue();
+            const endpoint = this.routeId() ? 'update/routes' : 'add/routes';
+            if (this.routeId())
+                data.id = this.routeId();
+            this.utils.postdata(endpoint, data).subscribe({
+                next: (res) => {
+                    if (res.success) {
+                        this.utils.openSnackBar(res.message, 'success');
+                        // Emit the saved data for local synchronization
+                        this.routeSaved.emit(data);
+                        this.close();
+                    }
+                    else {
+                        this.utils.openSnackBar(res.message, 'error');
+                    }
+                }
+            });
+        }
+        else {
+            this.addRouteForm.markAllAsTouched();
+        }
+    }
+    promptDelete() {
+        this.showDeleteModal.set(true);
+    }
+    confirmDelete() {
+        if (!this.routeId())
+            return;
+        this.utils.postdata('delete/routes', { uuid: this.routeId() }).subscribe({
+            next: (res) => {
+                if (res?.data?.success) {
+                    this.utils.openSnackBar(res.data.message, 'success');
+                    const deletedId = this.routeId();
+                    this.routeDeleted.emit(deletedId);
+                    this.showDeleteModal.set(false);
+                    this.close();
+                }
+            }
+        });
+    }
+    close() {
+        const isCoolmap = this.config.repository === 'coolmap';
+        this.addRouteForm.reset({
+            pickUpSearchOption: isCoolmap ? 'system' : 'google',
+            deliverySearchOtption: isCoolmap ? 'system' : 'google'
+        });
+        this.coolMapService.removeRouteAndMarker(1, 'addroute');
+        this.modalOpenChange.emit(false);
+    }
+    icons = {
+        X, ChevronDown, Check, LoaderCircle
+    };
+    // Dynamic dropdown state logic
+    dropdownOpen = signal(false, ...(ngDevMode ? [{ debugName: "dropdownOpen" }] : []));
+    selectedUnitDriver = signal(null, ...(ngDevMode ? [{ debugName: "selectedUnitDriver" }] : []));
+    toggleDropdown() {
+        this.dropdownOpen.update(v => !v);
+    }
+    selectOption(opt) {
+        this.selectedUnitDriver.set(opt);
+        this.dropdownOpen.set(false);
+    }
+    closeDropdowns(event) {
+        // Basic click-outside wrapper
+        const target = event.target;
+        if (!target.closest('.relative')) {
+            this.dropdownOpen.set(false);
+        }
+    }
+    startDrag(event) {
+        const target = event.target;
+        if (target.tagName.toLowerCase() === 'button' || target.closest('button')) {
+            return;
+        }
+        this.isDragging = true;
+        this.dragStartX = event.clientX;
+        this.dragStartY = event.clientY;
+        this.dragInitialX = this.dragX();
+        this.dragInitialY = this.dragY();
+        event.preventDefault();
+    }
+    onMouseMove(event) {
+        if (!this.isDragging || !this.modalOpen())
+            return;
+        this.dragX.set(this.dragInitialX + (event.clientX - this.dragStartX));
+        this.dragY.set(this.dragInitialY + (event.clientY - this.dragStartY));
+    }
+    onMouseUp() {
+        this.isDragging = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AddRouteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AddRouteComponent, isStandalone: true, selector: "lib-add-route", inputs: { modalOpen: { classPropertyName: "modalOpen", publicName: "modalOpen", isSignal: true, isRequired: false, transformFunction: null }, routeData: { classPropertyName: "routeData", publicName: "routeData", isSignal: true, isRequired: false, transformFunction: null }, customerRepoDetails: { classPropertyName: "customerRepoDetails", publicName: "customerRepoDetails", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modalOpenChange: "modalOpenChange", routeDeleted: "routeDeleted", routeSaved: "routeSaved" }, host: { listeners: { "document:click": "closeDropdowns($event)", "document:mousemove": "onMouseMove($event)", "document:mouseup": "onMouseUp()" } }, viewQueries: [{ propertyName: "filterPickup", first: true, predicate: ["filterPickup"], descendants: true, isSignal: true }, { propertyName: "filterDelivery", first: true, predicate: ["filterDelivery"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (modalOpen()) {\n<div class=\"fixed inset-0 z-[112] pointer-events-none overflow-y-auto\">\n  <div class=\"flex min-h-full items-center justify-center p-4\">\n    <form\n      [formGroup]=\"addRouteForm\"\n      (ngSubmit)=\"saveRoute()\"\n      class=\"pointer-events-auto relative bg-white dark:bg-slate-800 rounded-lg shadow-xl animate-slide-up w-[1000px]\"\n      [style.transform]=\"'translate(' + dragX() + 'px, ' + dragY() + 'px)'\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      <div\n        class=\"flex items-center justify-between p-4 border-b border-gray-200 dark:border-slate-700 cursor-move\"\n        (mousedown)=\"startDrag($event)\"\n      >\n        <h3 class=\"flex items-center gap-1 text-lg font-semibold text-gray-900 dark:text-white\">\n          {{ routeId() ? 'Edit Route' : 'Add Route' }}\n        </h3>\n        <div class=\"flex items-center gap-4\">\n          <button\n            type=\"submit\"\n            class=\"inline-flex items-center justify-center gap-2 px-4 py-2 bg-amber-500 hover:bg-amber-600 disabled:opacity-50 text-white font-medium rounded-lg transition-colors text-sm\">\n            Save\n          </button>\n          @if (routeId()) {\n          <button\n            type=\"button\"\n            (click)=\"promptDelete()\"\n            class=\"inline-flex items-center gap-2 px-4 py-2 bg-red-600 text-white hover:bg-red-700 font-medium rounded-lg transition-colors text-sm\"\n          >\n            Delete\n          </button>\n          }\n          <button\n            type=\"button\"\n            class=\"inline-flex items-center gap-2 px-4 py-2 bg-gray-600 text-white hover:bg-gray-700 font-medium rounded-lg transition-colors text-sm\"\n            (click)=\"close()\"\n          >\n            Close\n          </button>\n        </div>\n      </div>\n      <div class=\"max-h-[70vh] overflow-y-auto p-4\">\n        <div class=\"grid grid-cols-2 mb-[1rem] gap-4\">\n          <div>\n            <label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">\n              Route Name</label\n            >\n            <input\n              type=\"text\"\n              formControlName=\"route_name\"\n              class=\"w-full px-3 py-3 rounded-lg border border-gray-200 dark:border-slate-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-blue focus:border-transparent text-sm\"\n            />\n          </div>\n          <div class=\"relative\">\n            <label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">\n              Customer Name</label>\n            <div class=\"relative\">\n              <input\n                type=\"text\"\n                formControlName=\"customer_name\"\n                (focus)=\"showCustomerDropdown.set(true)\"\n                (blur)=\"hideDropdown('customer')\"\n                class=\"w-full px-3 py-3 rounded-lg border border-gray-200 dark:border-slate-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-blue focus:border-transparent text-sm pr-10\"\n              />\n              @if (loadingCustomers()) {\n                <div class=\"absolute right-3 top-1/2 -translate-y-1/2\">\n                  <lucide-icon [img]=\"icons.LoaderCircle\" [size]=\"18\" class=\"animate-spin text-blue-500\"></lucide-icon>\n                </div>\n              }\n            </div>\n            @if (showCustomerDropdown() && customerOptions().length > 0) {\n            <div class=\"absolute z-50 w-full mt-1 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg shadow-lg max-h-48 overflow-y-auto\">\n              @for (cust of customerOptions(); track cust.customer_id) {\n              <div \n                (mousedown)=\"addRouteForm.patchValue({customer_name: cust.customer_name})\"\n                class=\"px-4 py-2 hover:bg-gray-100 dark:hover:bg-slate-700 cursor-pointer text-sm text-gray-900 dark:text-white\">\n                {{ cust.customer_name }}\n              </div>\n              }\n            </div>\n            }\n          </div>\n        </div>\n        <div class=\"grid grid-cols-1 mb-[1rem]\">\n          <div\n            class=\"location-flow bg-gray-100 dark:bg-slate-900 border border-gray-300 dark:border-slate-700 px-3 py-3 rounded-lg\"\n          >\n            @if (config.repository === 'coolmap') {\n            <div class=\"flex gap-2 mb-2\">\n              <div class=\"radio w-100 md:w-auto\">\n                <input\n                  type=\"radio\"\n                  formControlName=\"pickUpSearchOption\"\n                  value=\"system\"\n                  class=\"shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked\"\n                />\n                <label\n                  class=\"border-solid border-1 border-grey dark:border-slate-400 block shadow-md rounded-lg lg:whitespace-nowrap w-full ml-2\"\n                >\n                  <div class=\"flex justify-between items-center px-4 py-2 text-xs lg:text-base\">\n                    <div class=\"tracking-wide text-xs\">System Search</div>\n                  </div>\n                </label>\n              </div>\n              <div class=\"radio w-100 md:w-auto ml-2\">\n                <input\n                  type=\"radio\"\n                  formControlName=\"pickUpSearchOption\"\n                  value=\"google\"\n                  class=\"shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked\"\n                />\n                <label\n                  class=\"border-solid border-1 border-grey dark:border-slate-400 block shadow-md rounded-lg lg:whitespace-nowrap w-full ml-2\"\n                >\n                  <div class=\"flex justify-between items-center px-4 py-2 text-xs lg:text-base\">\n                    <div class=\"tracking-wide text-xs\">Google Search</div>\n                  </div>\n                </label>\n              </div>\n            </div>\n            }\n            <div class=\"relative\">\n              <input\n                #filterPickup\n                type=\"text\"\n                formControlName=\"pickup_location\"\n                placeholder=\"Pickup\"\n                (focus)=\"showPickupDropdown.set(true)\"\n                (blur)=\"hideDropdown('pickup')\"\n                class=\"w-full px-3 py-3 rounded-lg border border-gray-200 dark:border-slate-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-blue focus:border-transparent text-sm pr-10\"\n              />\n              @if (loadingLocations()) {\n                <div class=\"absolute right-3 top-1/2 -translate-y-1/2\">\n                  <lucide-icon [img]=\"icons.LoaderCircle\" [size]=\"18\" class=\"animate-spin text-blue-500\"></lucide-icon>\n                </div>\n              }\n              @if (isSystemPickup && showPickupDropdown() && pickupOptions().length > 0) {\n              <div class=\"absolute z-50 w-full mt-1 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg shadow-lg max-h-48 overflow-y-auto\">\n                @for (loc of pickupOptions(); track loc.formatted_address) {\n                <div \n                  (mousedown)=\"patchAddressValue(loc, 'pickup')\"\n                  class=\"px-4 py-2 hover:bg-gray-100 dark:hover:bg-slate-700 cursor-pointer text-sm text-gray-900 dark:text-white\">\n                  {{ loc.formatted_address }}\n                </div>\n                }\n              </div>\n              }\n            </div>\n          </div>\n        </div>\n        <div class=\"grid grid-cols-1 mb-[1rem]\">\n          <div\n            class=\"location-flow bg-gray-100 dark:bg-slate-900 border border-gray-300 dark:border-slate-700 px-3 py-3 rounded-lg\"\n          >\n            @if (config.repository === 'coolmap') {\n            <div class=\"flex gap-2 mb-2\">\n              <div class=\"radio w-100 md:w-auto\">\n                <input\n                  type=\"radio\"\n                  formControlName=\"deliverySearchOtption\"\n                  value=\"system\"\n                  class=\"shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked\"/>\n                <label\n                  class=\"border-solid border-1 border-grey dark:border-slate-400 block shadow-md rounded-lg lg:whitespace-nowrap w-full ml-2\">\n                  <div class=\"flex justify-between items-center px-4 py-2 text-xs lg:text-base\">\n                    <div class=\"tracking-wide text-xs\">System Search</div>\n                  </div>\n                </label>\n              </div>\n              <div class=\"radio w-100 md:w-auto ml-2\">\n                <input\n                  type=\"radio\"\n                  formControlName=\"deliverySearchOtption\"\n                  value=\"google\"\n                  class=\"shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked\"/>\n                <label\n                  class=\"border-solid border-1 border-grey dark:border-slate-400 block shadow-md rounded-lg lg:whitespace-nowrap w-full ml-2\">\n                  <div class=\"flex justify-between items-center px-4 py-2 text-xs lg:text-base\">\n                    <div class=\"tracking-wide text-xs\">Google Search</div>\n                  </div>\n                </label>\n              </div>\n            </div>\n            }\n            <div class=\"relative\">\n              <input\n                #filterDelivery\n                type=\"text\"\n                formControlName=\"delivery_location\"\n                placeholder=\"Delivery\"\n                (focus)=\"showDeliveryDropdown.set(true)\"\n                (blur)=\"hideDropdown('delivery')\"\n                class=\"w-full px-3 py-3 rounded-lg border border-gray-200 dark:border-slate-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-blue focus:border-transparent text-sm pr-10\"\n              />\n              @if (loadingLocations()) {\n                <div class=\"absolute right-3 top-1/2 -translate-y-1/2\">\n                  <lucide-icon [img]=\"icons.LoaderCircle\" [size]=\"18\" class=\"animate-spin text-blue-500\"></lucide-icon>\n                </div>\n              }\n              @if (isSystemDelivery && showDeliveryDropdown() && deliveryOptions().length > 0) {\n              <div class=\"absolute z-50 w-full mt-1 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg shadow-lg max-h-48 overflow-y-auto\">\n                @for (loc of deliveryOptions(); track loc.formatted_address) {\n                <div \n                  (mousedown)=\"patchAddressValue(loc, 'delivery')\"\n                  class=\"px-4 py-2 hover:bg-gray-100 dark:hover:bg-slate-700 cursor-pointer text-sm text-gray-900 dark:text-white\">\n                  {{ loc.formatted_address }}\n                </div>\n                }\n              </div>\n              }\n            </div>\n          </div>\n        </div>\n        <div class=\"flex gap-4 flex-col md:flex-row\">\n          <div class=\"w-full md:w-[70%]\">\n            <label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">\n              Notes</label\n            >\n            <textarea\n              formControlName=\"note\"\n              class=\"w-full px-3 py-3 rounded-lg border border-gray-200 dark:border-slate-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-blue focus:border-transparent text-sm h-[46px]\"\n            ></textarea>\n          </div>\n          <div class=\"w-full md:w-[30%]\">\n            <label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">\n              Unit Type</label\n            >\n            <div class=\"relative w-full\">\n              <button\n                type=\"button\"\n                (click)=\"toggleDropdown(); $event.stopPropagation()\"\n                class=\"w-full flex justify-between items-center px-3 py-3 rounded-lg border border-gray-200 dark:border-slate-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-blue focus:border-transparent text-sm text-left\"\n              >\n                <span>{{ selectedUnitName }}</span>\n                <lucide-icon [img]=\"icons.ChevronDown\" [size]=\"16\" class=\"text-gray-400\"></lucide-icon>\n              </button>\n              @if (dropdownOpen()) {\n              <div class=\"absolute z-10 mt-1 w-full bg-white dark:bg-slate-800 rounded-lg shadow-lg border border-gray-200 dark:border-slate-700 py-1 max-h-60 overflow-auto\">\n                @for (opt of unitsList(); track opt.id) {\n                <button\n                  type=\"button\"\n                  (click)=\"addRouteForm.patchValue({unit_id: opt.id}); checkAndFetchRouteInformation(); dropdownOpen.set(false)\"\n                  class=\"w-full flex items-center justify-between px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-slate-700 transition\"\n                >\n                  <span>{{ opt.type }}</span>\n                  @if (addRouteForm.value.unit_id === opt.id) {\n                    <lucide-icon [img]=\"icons.Check\" [size]=\"16\" class=\"text-blue-500\"></lucide-icon>\n                  }\n                </button>\n                }\n              </div>\n              }\n            </div>\n          </div>\n        </div>\n        <div class=\"grid grid-cols-2 mt-2 gap-4\">\n          <div class=\"flex flex-col lg:flex-row gap-2\">\n            <span\n              class=\"text-[10px] text-gray-500 dark:text-slate-400 mb-1 whitespace-nowrap italic\"\n            >\n              Estimation of miles - <b>{{ addRouteForm.value.estimated_distance || '0' }} Miles</b>\n            </span>\n            <span\n              class=\"text-[10px] text-gray-500 dark:text-slate-400 mb-1 whitespace-nowrap italic\"\n            >\n              Estimation of time - <b>{{ addRouteForm.value.estimated_time || '0' }} Minutes</b>\n            </span>\n          </div>\n          <div class=\"flex flex-col lg:flex-row gap-2 justify-end\">\n            @if (config.repository !== 'customer') {\n            <span\n              class=\"text-[10px] text-gray-500 dark:text-slate-400 mb-1 whitespace-nowrap italic\"\n            >\n              Trucker Pay Estimate - <b>{{ addRouteForm.value.trucker_pay_estimate | currency }}</b>\n            </span>\n          }\n            <span\n              class=\"text-[10px] text-gray-500 dark:text-slate-400 mb-1 whitespace-nowrap italic\"\n            >\n              Customer Price Estimate - <b>{{ addRouteForm.value.customer_price_estimate | currency }}</b>\n            </span>\n            \n          </div>\n        </div>\n      </div>\n    </form>\n\n    @if (showDeleteModal()) {\n    <div class=\"fixed inset-0 z-[120] flex items-center justify-center bg-black/60 backdrop-blur-sm animate-fade-in pointer-events-auto\">\n      <div class=\"bg-white dark:bg-slate-900 rounded-xl shadow-2xl p-6 max-w-sm w-full mx-4 border border-gray-200 dark:border-slate-800\" (click)=\"$event.stopPropagation()\">\n        <h3 class=\"text-lg font-bold text-gray-900 dark:text-white mb-2\">Delete Route?</h3>\n        <p class=\"text-gray-600 dark:text-gray-400 text-sm mb-6\">\n          Are you sure you want to delete this route?\n        </p>\n        <div class=\"flex justify-end gap-3\">\n          <button\n            type=\"button\"\n            (click)=\"showDeleteModal.set(false)\"\n            class=\"px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 dark:text-gray-300 dark:bg-slate-800 dark:hover:bg-slate-700 rounded-lg transition-colors\"\n          >\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            (click)=\"confirmDelete()\"\n            class=\"px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-lg shadow-sm transition-colors\"\n          >\n            Delete\n          </button>\n        </div>\n      </div>\n    </div>\n    }\n\n  </div>\n</div>\n}\n", styles: ["@keyframes slide-up{0%{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.animate-fade-in{animation:fade-in .2s ease-out}.animate-slide-up{animation:slide-up .2s ease-out}.radio{position:relative}.radio input{position:absolute;top:50%;transform:translateY(-50%);left:0;opacity:0;width:100%;height:100%;cursor:pointer}.radio svg{opacity:.5}.radio label{height:auto;border-width:1px;border-color:#334155}.radio input:checked+label{border-color:#3b558e;background-color:#334155;color:#fff}.radio input:checked+label svg{opacity:1}.radio label:hover{cursor:pointer}.grid-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}\n"], dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.CurrencyPipe, name: "currency" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AddRouteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-add-route', standalone: true, imports: [LucideAngularModule, ReactiveFormsModule, CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (modalOpen()) {\n<div class=\"fixed inset-0 z-[112] pointer-events-none overflow-y-auto\">\n  <div class=\"flex min-h-full items-center justify-center p-4\">\n    <form\n      [formGroup]=\"addRouteForm\"\n      (ngSubmit)=\"saveRoute()\"\n      class=\"pointer-events-auto relative bg-white dark:bg-slate-800 rounded-lg shadow-xl animate-slide-up w-[1000px]\"\n      [style.transform]=\"'translate(' + dragX() + 'px, ' + dragY() + 'px)'\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      <div\n        class=\"flex items-center justify-between p-4 border-b border-gray-200 dark:border-slate-700 cursor-move\"\n        (mousedown)=\"startDrag($event)\"\n      >\n        <h3 class=\"flex items-center gap-1 text-lg font-semibold text-gray-900 dark:text-white\">\n          {{ routeId() ? 'Edit Route' : 'Add Route' }}\n        </h3>\n        <div class=\"flex items-center gap-4\">\n          <button\n            type=\"submit\"\n            class=\"inline-flex items-center justify-center gap-2 px-4 py-2 bg-amber-500 hover:bg-amber-600 disabled:opacity-50 text-white font-medium rounded-lg transition-colors text-sm\">\n            Save\n          </button>\n          @if (routeId()) {\n          <button\n            type=\"button\"\n            (click)=\"promptDelete()\"\n            class=\"inline-flex items-center gap-2 px-4 py-2 bg-red-600 text-white hover:bg-red-700 font-medium rounded-lg transition-colors text-sm\"\n          >\n            Delete\n          </button>\n          }\n          <button\n            type=\"button\"\n            class=\"inline-flex items-center gap-2 px-4 py-2 bg-gray-600 text-white hover:bg-gray-700 font-medium rounded-lg transition-colors text-sm\"\n            (click)=\"close()\"\n          >\n            Close\n          </button>\n        </div>\n      </div>\n      <div class=\"max-h-[70vh] overflow-y-auto p-4\">\n        <div class=\"grid grid-cols-2 mb-[1rem] gap-4\">\n          <div>\n            <label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">\n              Route Name</label\n            >\n            <input\n              type=\"text\"\n              formControlName=\"route_name\"\n              class=\"w-full px-3 py-3 rounded-lg border border-gray-200 dark:border-slate-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-blue focus:border-transparent text-sm\"\n            />\n          </div>\n          <div class=\"relative\">\n            <label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">\n              Customer Name</label>\n            <div class=\"relative\">\n              <input\n                type=\"text\"\n                formControlName=\"customer_name\"\n                (focus)=\"showCustomerDropdown.set(true)\"\n                (blur)=\"hideDropdown('customer')\"\n                class=\"w-full px-3 py-3 rounded-lg border border-gray-200 dark:border-slate-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-blue focus:border-transparent text-sm pr-10\"\n              />\n              @if (loadingCustomers()) {\n                <div class=\"absolute right-3 top-1/2 -translate-y-1/2\">\n                  <lucide-icon [img]=\"icons.LoaderCircle\" [size]=\"18\" class=\"animate-spin text-blue-500\"></lucide-icon>\n                </div>\n              }\n            </div>\n            @if (showCustomerDropdown() && customerOptions().length > 0) {\n            <div class=\"absolute z-50 w-full mt-1 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg shadow-lg max-h-48 overflow-y-auto\">\n              @for (cust of customerOptions(); track cust.customer_id) {\n              <div \n                (mousedown)=\"addRouteForm.patchValue({customer_name: cust.customer_name})\"\n                class=\"px-4 py-2 hover:bg-gray-100 dark:hover:bg-slate-700 cursor-pointer text-sm text-gray-900 dark:text-white\">\n                {{ cust.customer_name }}\n              </div>\n              }\n            </div>\n            }\n          </div>\n        </div>\n        <div class=\"grid grid-cols-1 mb-[1rem]\">\n          <div\n            class=\"location-flow bg-gray-100 dark:bg-slate-900 border border-gray-300 dark:border-slate-700 px-3 py-3 rounded-lg\"\n          >\n            @if (config.repository === 'coolmap') {\n            <div class=\"flex gap-2 mb-2\">\n              <div class=\"radio w-100 md:w-auto\">\n                <input\n                  type=\"radio\"\n                  formControlName=\"pickUpSearchOption\"\n                  value=\"system\"\n                  class=\"shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked\"\n                />\n                <label\n                  class=\"border-solid border-1 border-grey dark:border-slate-400 block shadow-md rounded-lg lg:whitespace-nowrap w-full ml-2\"\n                >\n                  <div class=\"flex justify-between items-center px-4 py-2 text-xs lg:text-base\">\n                    <div class=\"tracking-wide text-xs\">System Search</div>\n                  </div>\n                </label>\n              </div>\n              <div class=\"radio w-100 md:w-auto ml-2\">\n                <input\n                  type=\"radio\"\n                  formControlName=\"pickUpSearchOption\"\n                  value=\"google\"\n                  class=\"shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked\"\n                />\n                <label\n                  class=\"border-solid border-1 border-grey dark:border-slate-400 block shadow-md rounded-lg lg:whitespace-nowrap w-full ml-2\"\n                >\n                  <div class=\"flex justify-between items-center px-4 py-2 text-xs lg:text-base\">\n                    <div class=\"tracking-wide text-xs\">Google Search</div>\n                  </div>\n                </label>\n              </div>\n            </div>\n            }\n            <div class=\"relative\">\n              <input\n                #filterPickup\n                type=\"text\"\n                formControlName=\"pickup_location\"\n                placeholder=\"Pickup\"\n                (focus)=\"showPickupDropdown.set(true)\"\n                (blur)=\"hideDropdown('pickup')\"\n                class=\"w-full px-3 py-3 rounded-lg border border-gray-200 dark:border-slate-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-blue focus:border-transparent text-sm pr-10\"\n              />\n              @if (loadingLocations()) {\n                <div class=\"absolute right-3 top-1/2 -translate-y-1/2\">\n                  <lucide-icon [img]=\"icons.LoaderCircle\" [size]=\"18\" class=\"animate-spin text-blue-500\"></lucide-icon>\n                </div>\n              }\n              @if (isSystemPickup && showPickupDropdown() && pickupOptions().length > 0) {\n              <div class=\"absolute z-50 w-full mt-1 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg shadow-lg max-h-48 overflow-y-auto\">\n                @for (loc of pickupOptions(); track loc.formatted_address) {\n                <div \n                  (mousedown)=\"patchAddressValue(loc, 'pickup')\"\n                  class=\"px-4 py-2 hover:bg-gray-100 dark:hover:bg-slate-700 cursor-pointer text-sm text-gray-900 dark:text-white\">\n                  {{ loc.formatted_address }}\n                </div>\n                }\n              </div>\n              }\n            </div>\n          </div>\n        </div>\n        <div class=\"grid grid-cols-1 mb-[1rem]\">\n          <div\n            class=\"location-flow bg-gray-100 dark:bg-slate-900 border border-gray-300 dark:border-slate-700 px-3 py-3 rounded-lg\"\n          >\n            @if (config.repository === 'coolmap') {\n            <div class=\"flex gap-2 mb-2\">\n              <div class=\"radio w-100 md:w-auto\">\n                <input\n                  type=\"radio\"\n                  formControlName=\"deliverySearchOtption\"\n                  value=\"system\"\n                  class=\"shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked\"/>\n                <label\n                  class=\"border-solid border-1 border-grey dark:border-slate-400 block shadow-md rounded-lg lg:whitespace-nowrap w-full ml-2\">\n                  <div class=\"flex justify-between items-center px-4 py-2 text-xs lg:text-base\">\n                    <div class=\"tracking-wide text-xs\">System Search</div>\n                  </div>\n                </label>\n              </div>\n              <div class=\"radio w-100 md:w-auto ml-2\">\n                <input\n                  type=\"radio\"\n                  formControlName=\"deliverySearchOtption\"\n                  value=\"google\"\n                  class=\"shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked\"/>\n                <label\n                  class=\"border-solid border-1 border-grey dark:border-slate-400 block shadow-md rounded-lg lg:whitespace-nowrap w-full ml-2\">\n                  <div class=\"flex justify-between items-center px-4 py-2 text-xs lg:text-base\">\n                    <div class=\"tracking-wide text-xs\">Google Search</div>\n                  </div>\n                </label>\n              </div>\n            </div>\n            }\n            <div class=\"relative\">\n              <input\n                #filterDelivery\n                type=\"text\"\n                formControlName=\"delivery_location\"\n                placeholder=\"Delivery\"\n                (focus)=\"showDeliveryDropdown.set(true)\"\n                (blur)=\"hideDropdown('delivery')\"\n                class=\"w-full px-3 py-3 rounded-lg border border-gray-200 dark:border-slate-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-blue focus:border-transparent text-sm pr-10\"\n              />\n              @if (loadingLocations()) {\n                <div class=\"absolute right-3 top-1/2 -translate-y-1/2\">\n                  <lucide-icon [img]=\"icons.LoaderCircle\" [size]=\"18\" class=\"animate-spin text-blue-500\"></lucide-icon>\n                </div>\n              }\n              @if (isSystemDelivery && showDeliveryDropdown() && deliveryOptions().length > 0) {\n              <div class=\"absolute z-50 w-full mt-1 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg shadow-lg max-h-48 overflow-y-auto\">\n                @for (loc of deliveryOptions(); track loc.formatted_address) {\n                <div \n                  (mousedown)=\"patchAddressValue(loc, 'delivery')\"\n                  class=\"px-4 py-2 hover:bg-gray-100 dark:hover:bg-slate-700 cursor-pointer text-sm text-gray-900 dark:text-white\">\n                  {{ loc.formatted_address }}\n                </div>\n                }\n              </div>\n              }\n            </div>\n          </div>\n        </div>\n        <div class=\"flex gap-4 flex-col md:flex-row\">\n          <div class=\"w-full md:w-[70%]\">\n            <label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">\n              Notes</label\n            >\n            <textarea\n              formControlName=\"note\"\n              class=\"w-full px-3 py-3 rounded-lg border border-gray-200 dark:border-slate-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-blue focus:border-transparent text-sm h-[46px]\"\n            ></textarea>\n          </div>\n          <div class=\"w-full md:w-[30%]\">\n            <label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">\n              Unit Type</label\n            >\n            <div class=\"relative w-full\">\n              <button\n                type=\"button\"\n                (click)=\"toggleDropdown(); $event.stopPropagation()\"\n                class=\"w-full flex justify-between items-center px-3 py-3 rounded-lg border border-gray-200 dark:border-slate-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-blue focus:border-transparent text-sm text-left\"\n              >\n                <span>{{ selectedUnitName }}</span>\n                <lucide-icon [img]=\"icons.ChevronDown\" [size]=\"16\" class=\"text-gray-400\"></lucide-icon>\n              </button>\n              @if (dropdownOpen()) {\n              <div class=\"absolute z-10 mt-1 w-full bg-white dark:bg-slate-800 rounded-lg shadow-lg border border-gray-200 dark:border-slate-700 py-1 max-h-60 overflow-auto\">\n                @for (opt of unitsList(); track opt.id) {\n                <button\n                  type=\"button\"\n                  (click)=\"addRouteForm.patchValue({unit_id: opt.id}); checkAndFetchRouteInformation(); dropdownOpen.set(false)\"\n                  class=\"w-full flex items-center justify-between px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-slate-700 transition\"\n                >\n                  <span>{{ opt.type }}</span>\n                  @if (addRouteForm.value.unit_id === opt.id) {\n                    <lucide-icon [img]=\"icons.Check\" [size]=\"16\" class=\"text-blue-500\"></lucide-icon>\n                  }\n                </button>\n                }\n              </div>\n              }\n            </div>\n          </div>\n        </div>\n        <div class=\"grid grid-cols-2 mt-2 gap-4\">\n          <div class=\"flex flex-col lg:flex-row gap-2\">\n            <span\n              class=\"text-[10px] text-gray-500 dark:text-slate-400 mb-1 whitespace-nowrap italic\"\n            >\n              Estimation of miles - <b>{{ addRouteForm.value.estimated_distance || '0' }} Miles</b>\n            </span>\n            <span\n              class=\"text-[10px] text-gray-500 dark:text-slate-400 mb-1 whitespace-nowrap italic\"\n            >\n              Estimation of time - <b>{{ addRouteForm.value.estimated_time || '0' }} Minutes</b>\n            </span>\n          </div>\n          <div class=\"flex flex-col lg:flex-row gap-2 justify-end\">\n            @if (config.repository !== 'customer') {\n            <span\n              class=\"text-[10px] text-gray-500 dark:text-slate-400 mb-1 whitespace-nowrap italic\"\n            >\n              Trucker Pay Estimate - <b>{{ addRouteForm.value.trucker_pay_estimate | currency }}</b>\n            </span>\n          }\n            <span\n              class=\"text-[10px] text-gray-500 dark:text-slate-400 mb-1 whitespace-nowrap italic\"\n            >\n              Customer Price Estimate - <b>{{ addRouteForm.value.customer_price_estimate | currency }}</b>\n            </span>\n            \n          </div>\n        </div>\n      </div>\n    </form>\n\n    @if (showDeleteModal()) {\n    <div class=\"fixed inset-0 z-[120] flex items-center justify-center bg-black/60 backdrop-blur-sm animate-fade-in pointer-events-auto\">\n      <div class=\"bg-white dark:bg-slate-900 rounded-xl shadow-2xl p-6 max-w-sm w-full mx-4 border border-gray-200 dark:border-slate-800\" (click)=\"$event.stopPropagation()\">\n        <h3 class=\"text-lg font-bold text-gray-900 dark:text-white mb-2\">Delete Route?</h3>\n        <p class=\"text-gray-600 dark:text-gray-400 text-sm mb-6\">\n          Are you sure you want to delete this route?\n        </p>\n        <div class=\"flex justify-end gap-3\">\n          <button\n            type=\"button\"\n            (click)=\"showDeleteModal.set(false)\"\n            class=\"px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 dark:text-gray-300 dark:bg-slate-800 dark:hover:bg-slate-700 rounded-lg transition-colors\"\n          >\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            (click)=\"confirmDelete()\"\n            class=\"px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-lg shadow-sm transition-colors\"\n          >\n            Delete\n          </button>\n        </div>\n      </div>\n    </div>\n    }\n\n  </div>\n</div>\n}\n", styles: ["@keyframes slide-up{0%{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.animate-fade-in{animation:fade-in .2s ease-out}.animate-slide-up{animation:slide-up .2s ease-out}.radio{position:relative}.radio input{position:absolute;top:50%;transform:translateY(-50%);left:0;opacity:0;width:100%;height:100%;cursor:pointer}.radio svg{opacity:.5}.radio label{height:auto;border-width:1px;border-color:#334155}.radio input:checked+label{border-color:#3b558e;background-color:#334155;color:#fff}.radio input:checked+label svg{opacity:1}.radio label:hover{cursor:pointer}.grid-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { modalOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalOpen", required: false }] }], routeData: [{ type: i0.Input, args: [{ isSignal: true, alias: "routeData", required: false }] }], customerRepoDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "customerRepoDetails", required: false }] }], modalOpenChange: [{
+                type: Output
+            }], routeDeleted: [{
+                type: Output
+            }], routeSaved: [{
+                type: Output
+            }], filterPickup: [{ type: i0.ViewChild, args: ['filterPickup', { isSignal: true }] }], filterDelivery: [{ type: i0.ViewChild, args: ['filterDelivery', { isSignal: true }] }], closeDropdowns: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onMouseMove: [{
+                type: HostListener,
+                args: ['document:mousemove', ['$event']]
+            }], onMouseUp: [{
+                type: HostListener,
+                args: ['document:mouseup']
+            }] } });
+
+class CoolmapComponent {
+    mobileMode = false;
+    activeSection = 'Jobcode';
+    customerRepoDetails;
+    darkMode = input(false, ...(ngDevMode ? [{ debugName: "darkMode" }] : []));
+    mapContainer;
+    coolmapService = inject(CoolmapService);
+    utils = inject(UtilsService);
+    config = inject(COOLMAP_CONFIG);
+    mapService = inject(MapboxService);
+    showRouteList = false;
+    addRouteModal = false;
+    // Filtering Signals (Lifted from JobCode)
+    routesList = signal([], ...(ngDevMode ? [{ debugName: "routesList" }] : []));
+    viewRoutesList = signal([], ...(ngDevMode ? [{ debugName: "viewRoutesList" }] : []));
+    filters = signal([], ...(ngDevMode ? [{ debugName: "filters" }] : []));
+    filteredOptions = signal([], ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
+    dropdownOpen = signal(false, ...(ngDevMode ? [{ debugName: "dropdownOpen" }] : []));
+    dateValue = signal(this.utils.getDateFormat(new Date()), ...(ngDevMode ? [{ debugName: "dateValue" }] : []));
+    selectedRouteIds = signal([], ...(ngDevMode ? [{ debugName: "selectedRouteIds" }] : []));
+    modalPlottedIds = signal([], ...(ngDevMode ? [{ debugName: "modalPlottedIds" }] : []));
+    modalPlottedRoutes = signal([], ...(ngDevMode ? [{ debugName: "modalPlottedRoutes" }] : []));
+    selectedRouteForEdit = signal(null, ...(ngDevMode ? [{ debugName: "selectedRouteForEdit" }] : []));
+    unitList = signal([], ...(ngDevMode ? [{ debugName: "unitList" }] : []));
+    materialsList = signal([], ...(ngDevMode ? [{ debugName: "materialsList" }] : []));
+    currentlyPlottedIds = [];
+    skipNextRefresh = false;
+    mapOpQueue = Promise.resolve();
+    activeFilteredRoutes = computed(() => {
+        const list = this.activeSection === 'Jobcode' ? this.routesList() : this.viewRoutesList();
+        const filtersArray = this.filters();
+        if (filtersArray.length === 0)
+            return list;
+        return this.utils.getSearchResults(list, filtersArray) || [];
+    }, ...(ngDevMode ? [{ debugName: "activeFilteredRoutes" }] : []));
+    filterForm = new FormGroup({
+        search: new FormControl('')
+    });
+    allSelected = computed(() => {
+        const active = this.activeFilteredRoutes();
+        const selected = this.selectedRouteIds();
+        if (active.length === 0)
+            return false;
+        return active.every(r => selected.includes(this.getRouteId(r)));
+    }, ...(ngDevMode ? [{ debugName: "allSelected" }] : []));
+    modalAllSelected = computed(() => {
+        return false;
+    }, ...(ngDevMode ? [{ debugName: "modalAllSelected" }] : []));
+    masterStats = computed(() => {
+        const routes = this.activeFilteredRoutes();
+        const stats = { Done: 0, Incomplete: 0, Ongoing: 0, Open: 0 };
+        routes.forEach(route => {
+            const v = route?.values || {};
+            stats.Done += (v.Done || 0);
+            stats.Incomplete += (v.Incomplete || 0);
+            stats.Ongoing += (v.Ongoing || 0);
+            stats.Open += (v.Open || 0);
+        });
+        // Fallback default: if no routes, but we expect at least 1 "Open" slot behavior
+        if (routes.length > 0 && stats.Done === 0 && stats.Ongoing === 0 && stats.Open === 0 && stats.Incomplete === 0) {
+            stats.Open = routes.length;
+        }
+        return stats;
+    }, ...(ngDevMode ? [{ debugName: "masterStats" }] : []));
+    masterToggle() {
+        if (this.allSelected()) {
+            this.selectedRouteIds.set([]);
+        }
+        else {
+            const ids = this.activeFilteredRoutes().map(r => this.getRouteId(r));
+            this.selectedRouteIds.set(ids);
+        }
+    }
+    modalMasterToggle(modalRoutes) {
+        const currentPlotted = this.modalPlottedRoutes();
+        const isAllPlotted = modalRoutes.every(r => currentPlotted.some(p => this.getRouteId(p) === this.getRouteId(r)));
+        if (isAllPlotted) {
+            // Unplot all routes in this modal's view
+            const modalIdsInView = modalRoutes.map(r => this.getRouteId(r));
+            this.modalPlottedRoutes.update(curr => curr.filter(r => !modalIdsInView.includes(this.getRouteId(r))));
+        }
+        else {
+            // Plot all routes in this modal's view (prevent duplicates)
+            this.modalPlottedRoutes.update(curr => {
+                const newRoutes = modalRoutes.filter(mr => !curr.some(c => this.getRouteId(c) === this.getRouteId(mr)));
+                return [...curr, ...newRoutes];
+            });
+        }
+        this.modalPlottedIds.set(this.modalPlottedRoutes().map(r => this.getRouteId(r)));
+    }
+    icons = {
+        Route,
+        Search,
+        X,
+        LoaderCircle
+    };
+    constructor() {
+        this.filterForm.get('search')?.valueChanges.pipe(takeUntilDestroyed()).subscribe(value => {
+            if (value && typeof value === 'string') {
+                const options = this.utils.filter(value, this.filters());
+                this.filteredOptions.set(options);
+                this.dropdownOpen.set(options.length > 0);
+            }
+            else {
+                this.filteredOptions.set([]);
+                this.dropdownOpen.set(false);
+            }
+        });
+        effect(() => {
+            const isDark = this.darkMode();
+            this.mapService.updateTheme(isDark);
+        });
+        // Effect 1: Manage Floating List (JobCode)
+        effect(async () => {
+            const routes = this.activeFilteredRoutes();
+            const selectedIds = this.selectedRouteIds();
+            // Queue the sync operation
+            this.mapOpQueue = this.mapOpQueue.then(() => this.syncSpecificPrefix('jobcode', routes, selectedIds));
+        });
+        // Effect 2: Manage Modal List (JobRouteList)
+        effect(async () => {
+            const modalRoutes = this.modalPlottedRoutes();
+            // Queue the sync operation
+            this.mapOpQueue = this.mapOpQueue.then(() => this.syncSpecificPrefix('jobrouteList', modalRoutes, modalRoutes.map(r => this.getRouteId(r))));
+        });
+        // Effect 3: Manage View Route Section
+        effect(async () => {
+            if (this.activeSection === 'ViewRoute') {
+                const routes = this.activeFilteredRoutes();
+                const selectedIds = this.selectedRouteIds();
+                // Queue the sync operation
+                this.mapOpQueue = this.mapOpQueue.then(() => this.syncSpecificPrefix('viewroute', routes, selectedIds));
+            }
+            else {
+                // Clear viewroute prefix if not in the section
+                this.mapOpQueue = this.mapOpQueue.then(() => this.syncSpecificPrefix('viewroute', [], []));
+            }
+        });
+    }
+    ngOnInit() {
+        this.loadData(this.dateValue());
+    }
+    getUnitList() {
+        this.utils.getData('unit/all').subscribe((res) => {
+            if (res && res.data) {
+                this.unitList.set(res.data);
+            }
+        });
+    }
+    getMaterialsList() {
+        this.utils.getData('material/all').subscribe((res) => {
+            if (res && res.data) {
+                this.materialsList.set(res.data);
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes['customerRepoDetails'] && !changes['customerRepoDetails'].firstChange) {
+            if (this.config.repository === 'customer') {
+                if (this.activeSection === 'Jobcode') {
+                    this.loadData(this.dateValue());
+                }
+                else {
+                    this.loadViewRoutes();
+                }
+            }
+        }
+        if (changes['activeSection'] && !changes['activeSection'].firstChange) {
+            this.selectedRouteIds.set([]);
+            this.filters.set([]);
+            if (this.activeSection === 'Jobcode') {
+                this.loadData(this.dateValue());
+            }
+            else {
+                this.loadViewRoutes();
+            }
+        }
+    }
+    loadData(value, isRefresh = false) {
+        this.dateValue.set(value);
+        this.coolmapService.isLoading.set(true);
+        // Clear selection when the base list changes (date/repo switch)
+        if (!isRefresh) {
+            this.selectedRouteIds.set([]);
+        }
+        if (this.config.repository === 'customer') {
+            this.utils.fetchUnitsList().then((unitsRes) => {
+                this.unitList.set(unitsRes);
+                this.utils.fetchMaterialsListForCustomer().then((matRes) => {
+                    this.materialsList.set(matRes);
+                    this.executeJobReportFetch(value);
+                });
+            });
+        }
+        else {
+            this.executeJobReportFetch(value);
+        }
+    }
+    executeJobReportFetch(value) {
+        let dataSet;
+        if (this.config.repository === 'customer') {
+            const custId = this.customerRepoDetails?.customer?.id || '';
+            const projId = this.customerRepoDetails?.projectId || '';
+            dataSet = { date: value, customer_id: custId, project_id: projId };
+        }
+        else {
+            dataSet = { date: value };
+        }
+        this.utils.postdata('jobs_report_v2', dataSet).subscribe({
+            next: (res) => {
+                if (res && res.data && typeof res.data !== 'string') {
+                    const list = res.data.map((ele) => {
+                        ele.date = value;
+                        if (this.config.repository === 'customer') {
+                            ele.unit = this.getUnitName(ele);
+                            ele.material = this.getMaterialName(ele).split('|')[0].trim();
+                        }
+                        this.utils.makeOptions(ele);
+                        return ele;
+                    });
+                    this.routesList.set(list);
+                }
+                else {
+                    this.routesList.set([]);
+                }
+                this.coolmapService.isLoading.set(false);
+            },
+            error: () => {
+                this.routesList.set([]);
+                this.coolmapService.isLoading.set(false);
+            }
+        });
+    }
+    loadViewRoutes(isRefresh = false) {
+        this.coolmapService.isLoading.set(true);
+        if (!isRefresh) {
+            this.selectedRouteIds.set([]);
+        }
+        if (this.config.repository === 'customer') {
+            this.utils.fetchUnitsList().then((unitsRes) => {
+                this.unitList.set(unitsRes);
+                this.utils.fetchMaterialsListForCustomer().then((matRes) => {
+                    this.materialsList.set(matRes);
+                    this.executeViewRoutesFetch();
+                });
+            });
+        }
+        else {
+            this.executeViewRoutesFetch();
+        }
+    }
+    executeViewRoutesFetch() {
+        if (this.config.repository === 'customer') {
+            const dataSet = { customer_id: this.customerRepoDetails?.customer?.id || '' };
+            this.utils.postdata('routes/all', dataSet).subscribe({
+                next: (res) => {
+                    this.handleViewRoutesResponse(res);
+                },
+                error: () => {
+                    this.viewRoutesList.set([]);
+                    this.coolmapService.isLoading.set(false);
+                }
+            });
+        }
+        else {
+            this.utils.getData('routes/all').subscribe({
+                next: (res) => {
+                    this.handleViewRoutesResponse(res);
+                },
+                error: () => {
+                    this.viewRoutesList.set([]);
+                    this.coolmapService.isLoading.set(false);
+                }
+            });
+        }
+    }
+    handleViewRoutesResponse(res) {
+        if (res && res.data && Array.isArray(res.data)) {
+            const list = res.data.map((ele) => {
+                if (this.config.repository === 'customer') {
+                    ele.unit = this.getUnitName(ele);
+                    ele.material = this.getMaterialName(ele).split('|')[0].trim();
+                }
+                this.utils.makeOptions(ele);
+                return ele;
+            });
+            this.viewRoutesList.set(list);
+        }
+        else {
+            this.viewRoutesList.set([]);
+        }
+        this.coolmapService.isLoading.set(false);
+    }
+    getUnitName(data) {
+        let unitName = '';
+        this.unitList().forEach((res) => {
+            if (res.id === data.unit_id) {
+                unitName = res.type;
+            }
+        });
+        return unitName || data.unit;
+    }
+    getMaterialName(data) {
+        let materialName = '';
+        this.materialsList().forEach((res) => {
+            if (res.id === data.material_id) {
+                materialName = res.name;
+            }
+        });
+        return materialName || data.material || '';
+    }
+    onDateChange(event) {
+        const target = event.target;
+        if (target && target.value) {
+            this.loadData(target.value);
+        }
+    }
+    selectFilter(option) {
+        this.filterForm.controls['search'].setValue('');
+        this.selectedRouteIds.set([]); // Clear selection when switching filters
+        this.filters.set([
+            { name: option.label, type: option.type, value: option }
+        ]);
+        this.dropdownOpen.set(false);
+    }
+    removeFilter(filter) {
+        this.filters.update(curr => curr.filter(f => f !== filter));
+    }
+    /**
+     * Performs an isolated, diff-based synchronization for a specific route type.
+     * This ensures that 'jobcode' and 'jobrouteList' updates never interfere.
+     */
+    async syncSpecificPrefix(prefix, sourceRoutes, selectedIds) {
+        // 1. Identify desired state for THIS prefix only
+        const desiredIds = new Set(sourceRoutes.map(r => `${prefix}-${this.getRouteId(r)}`));
+        // 2. Get current state for THIS prefix only from map service
+        const currentPlottedIds = this.mapService.getRegistryKeys().filter(k => k.startsWith(`${prefix}-`));
+        // 3. Diff: Identify what to remove and what to add for THIS prefix
+        const toRemove = currentPlottedIds.filter(id => !desiredIds.has(id));
+        const toAdd = Array.from(desiredIds).filter(id => !currentPlottedIds.includes(id));
+        // 4. Perform removals for THIS prefix
+        for (const regId of toRemove) {
+            const id = regId.substring(prefix.length + 1);
+            this.coolmapService.plottingIds.update(set => {
+                const n = new Set(set);
+                n.add(regId);
+                return n;
+            });
+            try {
+                await this.mapService.removeRouteAndMarker(id, prefix);
+            }
+            finally {
+                this.coolmapService.plottingIds.update(set => {
+                    const n = new Set(set);
+                    n.delete(regId);
+                    return n;
+                });
+            }
+        }
+        // 5. Perform additions for THIS prefix
+        if (toAdd.length > 0) {
+            this.coolmapService.isLoading.set(true);
+            for (const regId of toAdd) {
+                const id = regId.substring(prefix.length + 1);
+                const routeObj = sourceRoutes.find(r => this.getRouteId(r) === id);
+                if (routeObj) {
+                    this.coolmapService.plottingIds.update(set => {
+                        const n = new Set(set);
+                        n.add(regId);
+                        return n;
+                    });
+                    try {
+                        await this.mapService.plotRoute(routeObj, id, prefix, false, false);
+                    }
+                    finally {
+                        this.coolmapService.plottingIds.update(set => {
+                            const n = new Set(set);
+                            n.delete(regId);
+                            return n;
+                        });
+                    }
+                }
+            }
+        }
+        // 6. Update Visibility for THIS prefix only
+        // This allows jobcode and jobrouteList to have independent visibility states.
+        const compositeVisible = selectedIds.map(id => `${prefix}-${id}`);
+        const showAllForThisPrefix = (prefix === 'jobcode' && selectedIds.length === 0);
+        this.mapService.setRoutesVisibility(compositeVisible, showAllForThisPrefix, prefix);
+        this.coolmapService.isLoading.set(false);
+    }
+    toggleSelection(id) {
+        this.selectedRouteIds.update(ids => {
+            if (ids.includes(id)) {
+                return ids.filter(i => i !== id);
+            }
+            else {
+                return [...ids, id];
+            }
+        });
+    }
+    toggleModalRoute(route) {
+        const id = this.getRouteId(route);
+        if (!id)
+            return;
+        this.modalPlottedRoutes.update(routes => {
+            const isPlotted = routes.some(r => this.getRouteId(r) === id);
+            if (isPlotted) {
+                return routes.filter(r => this.getRouteId(r) !== id);
+            }
+            else {
+                return [...routes, route];
+            }
+        });
+        // Also update IDs for UI checkboxes
+        this.modalPlottedIds.set(this.modalPlottedRoutes().map(r => this.getRouteId(r)));
+    }
+    async onAddRouteModalChange(isOpen) {
+        this.addRouteModal = isOpen;
+        if (!isOpen) {
+            if (this.skipNextRefresh) {
+                this.skipNextRefresh = false;
+                return;
+            }
+            // Modal closed - restore map state and refresh data
+            await this.refreshMapState();
+        }
+    }
+    async refreshMapState() {
+        if (this.activeSection === 'Jobcode') {
+            await this.loadData(this.dateValue(), true);
+        }
+        else {
+            await this.loadViewRoutes(true);
+        }
+    }
+    onRouteSaved(data) {
+        if (data.id) {
+            // It was an update - surgical local update
+            this.skipNextRefresh = true;
+            const updater = (list) => list.map(r => this.getRouteId(r) === data.id ? { ...r, ...data } : r);
+            this.routesList.update(updater);
+            this.viewRoutesList.update(updater);
+        }
+        else {
+            // It was an add - need a re-fetch to get new ID from server
+            this.skipNextRefresh = false; // explicitly allow refresh on add to get new ID
+        }
+    }
+    onRouteDeleted(id) {
+        this.skipNextRefresh = true;
+        // 1. Remove from local signals
+        this.routesList.update(list => list.filter(r => this.getRouteId(r) !== id));
+        this.viewRoutesList.update(list => list.filter(r => this.getRouteId(r) !== id));
+        // 2. Clear from selections
+        this.selectedRouteIds.update(ids => ids.filter(i => i !== id));
+        this.modalPlottedIds.update(ids => ids.filter(i => i !== id));
+        this.modalPlottedRoutes.update(routes => routes.filter(r => this.getRouteId(r) !== id));
+        // 3. Cleanup Map
+        this.mapService.removeRouteAndMarker(id, 'jobcode');
+        this.mapService.removeRouteAndMarker(id, 'jobrouteList');
+        this.mapService.removeRouteAndMarker(id, 'viewroute');
+        // 4. Update Filter Pills
+        this.filters.update(curr => curr.filter(f => {
+            if (f.type === 'job') {
+                return f.value.job_id !== id;
+            }
+            return true;
+        }));
+        // 5. Refresh Search Suggestions (Options list in Utils)
+        this.utils.clearOptions();
+        [...this.routesList(), ...this.viewRoutesList()].forEach(r => this.utils.makeOptions(r));
+    }
+    openAddRouteModal() {
+        this.selectedRouteForEdit.set(null);
+        this.addRouteModal = true;
+    }
+    openEditModal(route) {
+        this.selectedRouteForEdit.set(route);
+        this.addRouteModal = true;
+    }
+    getRouteId(route) {
+        return route.job_id || route.route_id || route.route_details_id || '';
+    }
+    clearSelection() {
+        this.selectedRouteIds.set([]);
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.mapService.initializeMap(this.mapContainer.nativeElement, this.darkMode());
+            setTimeout(() => {
+                this.mapService.resize();
+            }, 200);
+        }, 0);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CoolmapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: CoolmapComponent, isStandalone: true, selector: "lib-coolmap", inputs: { mobileMode: { classPropertyName: "mobileMode", publicName: "mobileMode", isSignal: false, isRequired: false, transformFunction: null }, activeSection: { classPropertyName: "activeSection", publicName: "activeSection", isSignal: false, isRequired: false, transformFunction: null }, customerRepoDetails: { classPropertyName: "customerRepoDetails", publicName: "customerRepoDetails", isSignal: false, isRequired: false, transformFunction: null }, darkMode: { classPropertyName: "darkMode", publicName: "darkMode", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "mapContainer", first: true, predicate: ["mapContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"center-area\">\n  <div [formGroup]=\"filterForm\" class=\"toolbar flex flex-col sm:flex-row md:h-[55px] h-auto py-2 px-2 gap-3 items-center\">\n    <div class=\"toolbar-left flex items-center gap-3\">\n      @if (activeSection === 'Jobcode') {\n        <input\n          type=\"date\"\n          [value]=\"dateValue()\"\n          (change)=\"onDateChange($event)\"\n          [disabled]=\"coolmapService.isLoading()\"\n          class=\"w-auto lg:w-[200px] px-3 py-2 rounded-lg border border-gray-200 dark:border-slate-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-blue focus:border-transparent text-sm disabled:opacity-50 disabled:cursor-not-allowed\"\n        />\n        <span class=\"toolbar-divider hidden sm:flex h-6 w-[1px] bg-gray-200 dark:bg-slate-700\"></span>\n      }\n      <div class=\"relative items-center flex\">\n        <lucide-icon [img]=\"icons.Search\" [size]=\"18\" class=\"absolute left-3 top-1/2 -translate-y-1/2 text-gray-400\"></lucide-icon>\n        <input\n          type=\"text\"\n          formControlName=\"search\"\n          [attr.disabled]=\"coolmapService.isLoading() ? true : null\"\n          placeholder=\"Search routes...\"\n          class=\"w-[150px] xl:w-[300px] pl-10 pr-10 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-amber-500 focus:border-transparent text-sm disabled:opacity-50 disabled:cursor-not-allowed\"\n        />\n\n        @if (filterForm.value.search) {\n          <button (click)=\"filterForm.controls.search.setValue('')\" class=\"absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600\">\n            <lucide-icon [img]=\"icons.X\" [size]=\"16\"></lucide-icon>\n          </button>\n        }\n\n        <!-- Autocomplete Dropdown -->\n        @if (dropdownOpen() && filteredOptions().length > 0) {\n          <div class=\"absolute z-50 left-0 right-0 top-full mt-1 max-h-60 overflow-y-auto bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-600 rounded shadow-lg\">\n            @for (option of filteredOptions(); track option.value + option.type) {\n              <div (click)=\"selectFilter(option)\" class=\"px-4 py-2 hover:bg-gray-100 dark:hover:bg-slate-700 cursor-pointer text-sm font-medium border-b border-gray-100 dark:border-slate-700 last:border-0 dark:text-white\">\n                <span class=\"capitalize text-xs text-gray-500 dark:text-gray-400 font-normal mr-1\">{{ option.type }}:</span>\n                {{ option.label }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n\n      @if (filters().length > 0) {\n        <div class=\"flex flex-wrap gap-2 ml-2\">\n          @for (filter of filters(); track filter.value + filter.type) {\n            <div class=\"inline-flex items-center gap-1 px-2 py-1 rounded bg-slate-200 dark:bg-slate-700 text-gray-800 dark:text-gray-200 text-xs font-medium border border-gray-300 dark:border-slate-600\">\n              <span class=\"capitalize opacity-80\">{{ filter.type }}:</span> {{ filter.name }}\n              <button type=\"button\" (click)=\"removeFilter(filter)\" class=\"hover:opacity-75 transition-opacity ml-1\">\n                <lucide-icon [img]=\"icons.X\" [size]=\"12\"></lucide-icon>\n              </button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n    <div class=\"toolbar-right\">\n      @if (selectedRouteIds().length > 0) {\n      <button\n        type=\"button\"\n        (click)=\"clearSelection()\"\n        [disabled]=\"coolmapService.isLoading()\"\n        class=\"inline-flex items-center justify-center gap-2 px-5 sm:px-6 py-2 bg-amber-500 hover:bg-amber-600 disabled:opacity-50 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors text-xs md:text-sm\"\n      >\n        Show All ({{ selectedRouteIds().length }})\n      </button>\n      }\n      @if (activeSection === 'ViewRoute') {\n        <button\n          type=\"button\"\n          class=\"inline-flex items-center justify-center gap-2 px-5 sm:px-6 py-2 bg-amber-500 hover:bg-amber-600 disabled:opacity-50 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors text-xs md:text-sm\"\n          [disabled]=\"coolmapService.isLoading()\"\n          (click)=\"openAddRouteModal()\">\n          <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M12 4v16m8-8H4\"\n            />\n          </svg>\n          Add Route\n        </button>\n      }\n\n      @if(activeSection === 'Jobcode'){\n      <button\n        class=\"inline-flex items-center gap-2 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed relative group\"\n        (click)=\"showRouteList = true\"\n        [disabled]=\"coolmapService.isLoading()\">\n        <lucide-icon [img]=\"icons.Route\" [size]=\"20\"></lucide-icon>\n        <div\n          class=\"absolute top-full left-1/2 -translate-x-1/2 mt-2 hidden group-hover:block bg-gray-800 text-white text-[10px] rounded py-1 px-2 whitespace-nowrap\">\n          Show Route List\n          <div\n            class=\"absolute -top-[8px] left-1/2 -translate-x-1/2 border-4 border-transparent border-b-gray-800\">\n          </div>\n        </div>\n      </button>}\n    </div>\n  </div>\n  <div class=\"view-content\">\n    <div class=\"full-view\">\n      <div class=\"map-container\">\n        <div class=\"mapbox-container\" #mapContainer></div>\n      </div>\n    </div>\n\n    <!-- FOR JOBCODE -->\n    @if (activeSection === 'Jobcode') {\n      <lib-job-code \n        listMode=\"floating\" \n        [routes]=\"activeFilteredRoutes()\"\n        [selectedRouteIds]=\"selectedRouteIds()\"\n        [isLoading]=\"coolmapService.isLoading()\"\n        (routeSelect)=\"toggleSelection($event)\">\n      </lib-job-code>\n    }\n\n    <!-- FOR VIEWROUTE -->\n    @if (activeSection === 'ViewRoute') {\n      <lib-view-route-list \n        listMode=\"floating\" \n        [routes]=\"activeFilteredRoutes()\"\n        [selectedRouteIds]=\"selectedRouteIds()\"\n        (routeSelect)=\"toggleSelection($event)\"\n        (editRoute)=\"openEditModal($event)\"\n      ></lib-view-route-list>\n    }\n  </div>\n  @if (config.repository === 'coolmap') {\n  <div class=\"status-bar\">\n    <div class=\"stats-row\">\n      <div class=\"stat-item active\" title=\"Active routes (assigned + in progress)\">\n        <span class=\"stat-count\">{{ masterStats().Done }}</span>\n        <span class=\"stat-label\">Done</span>\n      </div>\n\n      <div class=\"stat-item completed\" title=\"Completed tasks\">\n        <span class=\"stat-count\">{{ masterStats().Incomplete }}</span>\n        <span class=\"stat-label\">Incomplete</span>\n      </div>\n\n      <div class=\"stat-item declined\" title=\"Declined routes - needs attention\">\n        <span class=\"stat-count\">{{ masterStats().Ongoing }}</span>\n        <span class=\"stat-label\">Ongoing</span>\n      </div>\n\n      <div class=\"stat-item scheduled\" title=\"Scheduled jobs for today\">\n        <span class=\"stat-count\">{{ masterStats().Open }}</span>\n        <span class=\"stat-label\">Open</span>\n      </div>\n    </div>\n  </div>\n  }\n</div>\n<lib-job-route-list \n  [initialRoutes]=\"viewRoutesList()\"\n  [(modalOpen)]=\"showRouteList\"\n  [selectedRouteIds]=\"modalPlottedIds()\"\n  (routeSelect)=\"toggleModalRoute($event)\"\n  (masterToggleEvent)=\"modalMasterToggle($event)\"\n  [customerRepoDetails]=\"customerRepoDetails\"\n></lib-job-route-list>\n<lib-add-route \n  [modalOpen]=\"addRouteModal\"\n  (modalOpenChange)=\"onAddRouteModalChange($event)\"\n  (routeSaved)=\"onRouteSaved($event)\"\n  (routeDeleted)=\"onRouteDeleted($event)\"\n  [customerRepoDetails]=\"customerRepoDetails\"\n  [routeData]=\"selectedRouteForEdit()\"\n></lib-add-route>\n", styles: [":host{display:block;width:100%;height:100%;min-height:400px}.center-area{height:100%;display:flex;flex-direction:column;overflow:hidden}.view-content{flex:1;position:relative;overflow:hidden;z-index:10}.full-view{position:absolute;inset:0}.map-container,.mapbox-container{width:100%;height:100%}.toolbar{align-items:center;justify-content:space-between;background:var(--bg-primary, white);border-bottom:1px solid var(--border-color, #e2e8f0);flex-shrink:0;gap:8px;position:relative;z-index:50}:host-context(.dark) .toolbar{background:var(--bg-dark-primary, #1e293b);border-color:var(--border-dark, #334155);box-shadow:0 1px 3px #0000004d}.toolbar-left{display:flex;align-items:center;gap:12px;flex-shrink:0}.toolbar-divider{width:1px;height:20px;background:var(--border-color, #e2e8f0);margin:0 2px;flex-shrink:0}:host-context(.dark) .toolbar-divider{background:#475569}.toolbar-right{display:flex;align-items:center;gap:10px;flex-shrink:0}.status-bar{display:flex;align-items:center;height:100%;padding:0 16px;background:var(--status-bar-bg, #1e293b);color:#fff;font-size:12px;gap:20px;flex-shrink:0;height:36px}.stats-row{display:flex;align-items:center;gap:20px}.stat-item{display:flex;align-items:center;gap:6px;cursor:default}.stat-count{font-size:15px;font-weight:700;line-height:1}.stat-item.active .stat-count{color:#60a5fa}.stat-item.completed .stat-count{color:#4ade80}.stat-item.declined .stat-count{color:#f87171}.stat-item.scheduled .stat-count{color:#a78bfa}.stat-item.pending .stat-count{color:#fbbf24}.route-list-wrapper{position:absolute;top:10px;left:10px;bottom:10px;width:380px;z-index:20;pointer-events:none;display:flex;flex-direction:column}@media (max-width: 1024px){.route-list-wrapper{width:320px}}.route-list-wrapper>*{pointer-events:auto}.list-loader{position:absolute;inset:0;background:#fff6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100;border-radius:12px;border:1px solid rgba(255,255,255,.2);box-shadow:0 8px 32px #1f268712}:host-context(.dark) .list-loader{background:#0f172a66;border-color:#ffffff1a}.animate-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: JobCodeComponent, selector: "lib-job-code", inputs: ["listMode", "collapsible", "routes", "selectedRouteIds", "isLoading"], outputs: ["routeSelect"] }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "component", type: JobRouteListComponent, selector: "lib-job-route-list", inputs: ["customerRepoDetails", "selectedRouteIds", "modalOpen", "initialRoutes"], outputs: ["modalOpenChange", "routeSelect", "masterToggleEvent"] }, { kind: "component", type: ViewRouteListComponent, selector: "lib-view-route-list", inputs: ["listMode", "collapsible", "routes", "selectedRouteIds"], outputs: ["routeSelect", "editRoute"] }, { kind: "component", type: AddRouteComponent, selector: "lib-add-route", inputs: ["modalOpen", "routeData", "customerRepoDetails"], outputs: ["modalOpenChange", "routeDeleted", "routeSaved"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CoolmapComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-coolmap', standalone: true, imports: [
+                        JobCodeComponent,
+                        LucideAngularModule,
+                        JobRouteListComponent,
+                        ViewRouteListComponent,
+                        AddRouteComponent,
+                        ReactiveFormsModule,
+                    ], template: "<div class=\"center-area\">\n  <div [formGroup]=\"filterForm\" class=\"toolbar flex flex-col sm:flex-row md:h-[55px] h-auto py-2 px-2 gap-3 items-center\">\n    <div class=\"toolbar-left flex items-center gap-3\">\n      @if (activeSection === 'Jobcode') {\n        <input\n          type=\"date\"\n          [value]=\"dateValue()\"\n          (change)=\"onDateChange($event)\"\n          [disabled]=\"coolmapService.isLoading()\"\n          class=\"w-auto lg:w-[200px] px-3 py-2 rounded-lg border border-gray-200 dark:border-slate-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-blue focus:border-transparent text-sm disabled:opacity-50 disabled:cursor-not-allowed\"\n        />\n        <span class=\"toolbar-divider hidden sm:flex h-6 w-[1px] bg-gray-200 dark:bg-slate-700\"></span>\n      }\n      <div class=\"relative items-center flex\">\n        <lucide-icon [img]=\"icons.Search\" [size]=\"18\" class=\"absolute left-3 top-1/2 -translate-y-1/2 text-gray-400\"></lucide-icon>\n        <input\n          type=\"text\"\n          formControlName=\"search\"\n          [attr.disabled]=\"coolmapService.isLoading() ? true : null\"\n          placeholder=\"Search routes...\"\n          class=\"w-[150px] xl:w-[300px] pl-10 pr-10 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-amber-500 focus:border-transparent text-sm disabled:opacity-50 disabled:cursor-not-allowed\"\n        />\n\n        @if (filterForm.value.search) {\n          <button (click)=\"filterForm.controls.search.setValue('')\" class=\"absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600\">\n            <lucide-icon [img]=\"icons.X\" [size]=\"16\"></lucide-icon>\n          </button>\n        }\n\n        <!-- Autocomplete Dropdown -->\n        @if (dropdownOpen() && filteredOptions().length > 0) {\n          <div class=\"absolute z-50 left-0 right-0 top-full mt-1 max-h-60 overflow-y-auto bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-600 rounded shadow-lg\">\n            @for (option of filteredOptions(); track option.value + option.type) {\n              <div (click)=\"selectFilter(option)\" class=\"px-4 py-2 hover:bg-gray-100 dark:hover:bg-slate-700 cursor-pointer text-sm font-medium border-b border-gray-100 dark:border-slate-700 last:border-0 dark:text-white\">\n                <span class=\"capitalize text-xs text-gray-500 dark:text-gray-400 font-normal mr-1\">{{ option.type }}:</span>\n                {{ option.label }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n\n      @if (filters().length > 0) {\n        <div class=\"flex flex-wrap gap-2 ml-2\">\n          @for (filter of filters(); track filter.value + filter.type) {\n            <div class=\"inline-flex items-center gap-1 px-2 py-1 rounded bg-slate-200 dark:bg-slate-700 text-gray-800 dark:text-gray-200 text-xs font-medium border border-gray-300 dark:border-slate-600\">\n              <span class=\"capitalize opacity-80\">{{ filter.type }}:</span> {{ filter.name }}\n              <button type=\"button\" (click)=\"removeFilter(filter)\" class=\"hover:opacity-75 transition-opacity ml-1\">\n                <lucide-icon [img]=\"icons.X\" [size]=\"12\"></lucide-icon>\n              </button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n    <div class=\"toolbar-right\">\n      @if (selectedRouteIds().length > 0) {\n      <button\n        type=\"button\"\n        (click)=\"clearSelection()\"\n        [disabled]=\"coolmapService.isLoading()\"\n        class=\"inline-flex items-center justify-center gap-2 px-5 sm:px-6 py-2 bg-amber-500 hover:bg-amber-600 disabled:opacity-50 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors text-xs md:text-sm\"\n      >\n        Show All ({{ selectedRouteIds().length }})\n      </button>\n      }\n      @if (activeSection === 'ViewRoute') {\n        <button\n          type=\"button\"\n          class=\"inline-flex items-center justify-center gap-2 px-5 sm:px-6 py-2 bg-amber-500 hover:bg-amber-600 disabled:opacity-50 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors text-xs md:text-sm\"\n          [disabled]=\"coolmapService.isLoading()\"\n          (click)=\"openAddRouteModal()\">\n          <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M12 4v16m8-8H4\"\n            />\n          </svg>\n          Add Route\n        </button>\n      }\n\n      @if(activeSection === 'Jobcode'){\n      <button\n        class=\"inline-flex items-center gap-2 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed relative group\"\n        (click)=\"showRouteList = true\"\n        [disabled]=\"coolmapService.isLoading()\">\n        <lucide-icon [img]=\"icons.Route\" [size]=\"20\"></lucide-icon>\n        <div\n          class=\"absolute top-full left-1/2 -translate-x-1/2 mt-2 hidden group-hover:block bg-gray-800 text-white text-[10px] rounded py-1 px-2 whitespace-nowrap\">\n          Show Route List\n          <div\n            class=\"absolute -top-[8px] left-1/2 -translate-x-1/2 border-4 border-transparent border-b-gray-800\">\n          </div>\n        </div>\n      </button>}\n    </div>\n  </div>\n  <div class=\"view-content\">\n    <div class=\"full-view\">\n      <div class=\"map-container\">\n        <div class=\"mapbox-container\" #mapContainer></div>\n      </div>\n    </div>\n\n    <!-- FOR JOBCODE -->\n    @if (activeSection === 'Jobcode') {\n      <lib-job-code \n        listMode=\"floating\" \n        [routes]=\"activeFilteredRoutes()\"\n        [selectedRouteIds]=\"selectedRouteIds()\"\n        [isLoading]=\"coolmapService.isLoading()\"\n        (routeSelect)=\"toggleSelection($event)\">\n      </lib-job-code>\n    }\n\n    <!-- FOR VIEWROUTE -->\n    @if (activeSection === 'ViewRoute') {\n      <lib-view-route-list \n        listMode=\"floating\" \n        [routes]=\"activeFilteredRoutes()\"\n        [selectedRouteIds]=\"selectedRouteIds()\"\n        (routeSelect)=\"toggleSelection($event)\"\n        (editRoute)=\"openEditModal($event)\"\n      ></lib-view-route-list>\n    }\n  </div>\n  @if (config.repository === 'coolmap') {\n  <div class=\"status-bar\">\n    <div class=\"stats-row\">\n      <div class=\"stat-item active\" title=\"Active routes (assigned + in progress)\">\n        <span class=\"stat-count\">{{ masterStats().Done }}</span>\n        <span class=\"stat-label\">Done</span>\n      </div>\n\n      <div class=\"stat-item completed\" title=\"Completed tasks\">\n        <span class=\"stat-count\">{{ masterStats().Incomplete }}</span>\n        <span class=\"stat-label\">Incomplete</span>\n      </div>\n\n      <div class=\"stat-item declined\" title=\"Declined routes - needs attention\">\n        <span class=\"stat-count\">{{ masterStats().Ongoing }}</span>\n        <span class=\"stat-label\">Ongoing</span>\n      </div>\n\n      <div class=\"stat-item scheduled\" title=\"Scheduled jobs for today\">\n        <span class=\"stat-count\">{{ masterStats().Open }}</span>\n        <span class=\"stat-label\">Open</span>\n      </div>\n    </div>\n  </div>\n  }\n</div>\n<lib-job-route-list \n  [initialRoutes]=\"viewRoutesList()\"\n  [(modalOpen)]=\"showRouteList\"\n  [selectedRouteIds]=\"modalPlottedIds()\"\n  (routeSelect)=\"toggleModalRoute($event)\"\n  (masterToggleEvent)=\"modalMasterToggle($event)\"\n  [customerRepoDetails]=\"customerRepoDetails\"\n></lib-job-route-list>\n<lib-add-route \n  [modalOpen]=\"addRouteModal\"\n  (modalOpenChange)=\"onAddRouteModalChange($event)\"\n  (routeSaved)=\"onRouteSaved($event)\"\n  (routeDeleted)=\"onRouteDeleted($event)\"\n  [customerRepoDetails]=\"customerRepoDetails\"\n  [routeData]=\"selectedRouteForEdit()\"\n></lib-add-route>\n", styles: [":host{display:block;width:100%;height:100%;min-height:400px}.center-area{height:100%;display:flex;flex-direction:column;overflow:hidden}.view-content{flex:1;position:relative;overflow:hidden;z-index:10}.full-view{position:absolute;inset:0}.map-container,.mapbox-container{width:100%;height:100%}.toolbar{align-items:center;justify-content:space-between;background:var(--bg-primary, white);border-bottom:1px solid var(--border-color, #e2e8f0);flex-shrink:0;gap:8px;position:relative;z-index:50}:host-context(.dark) .toolbar{background:var(--bg-dark-primary, #1e293b);border-color:var(--border-dark, #334155);box-shadow:0 1px 3px #0000004d}.toolbar-left{display:flex;align-items:center;gap:12px;flex-shrink:0}.toolbar-divider{width:1px;height:20px;background:var(--border-color, #e2e8f0);margin:0 2px;flex-shrink:0}:host-context(.dark) .toolbar-divider{background:#475569}.toolbar-right{display:flex;align-items:center;gap:10px;flex-shrink:0}.status-bar{display:flex;align-items:center;height:100%;padding:0 16px;background:var(--status-bar-bg, #1e293b);color:#fff;font-size:12px;gap:20px;flex-shrink:0;height:36px}.stats-row{display:flex;align-items:center;gap:20px}.stat-item{display:flex;align-items:center;gap:6px;cursor:default}.stat-count{font-size:15px;font-weight:700;line-height:1}.stat-item.active .stat-count{color:#60a5fa}.stat-item.completed .stat-count{color:#4ade80}.stat-item.declined .stat-count{color:#f87171}.stat-item.scheduled .stat-count{color:#a78bfa}.stat-item.pending .stat-count{color:#fbbf24}.route-list-wrapper{position:absolute;top:10px;left:10px;bottom:10px;width:380px;z-index:20;pointer-events:none;display:flex;flex-direction:column}@media (max-width: 1024px){.route-list-wrapper{width:320px}}.route-list-wrapper>*{pointer-events:auto}.list-loader{position:absolute;inset:0;background:#fff6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100;border-radius:12px;border:1px solid rgba(255,255,255,.2);box-shadow:0 8px 32px #1f268712}:host-context(.dark) .list-loader{background:#0f172a66;border-color:#ffffff1a}.animate-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { mobileMode: [{
+                type: Input
+            }], activeSection: [{
+                type: Input
+            }], customerRepoDetails: [{
+                type: Input
+            }], darkMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "darkMode", required: false }] }], mapContainer: [{
+                type: ViewChild,
+                args: ['mapContainer']
+            }] } });
+
+/*
+ * Public API Surface of coolmap
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Coolmap, CoolmapComponent };
+//# sourceMappingURL=coolmap.mjs.map