@aggdirect/coolmap 2.0.5 → 2.0.7

package/fesm2020/aggdirect-coolmap.mjs

@@ -41,1306 +41,1308 @@ import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 import * as i10$1 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 
-class CoolmapComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-}
-CoolmapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CoolmapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CoolmapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CoolmapComponent, selector: "lib-coolmap", ngImport: i0, template: `
+class CoolmapComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+}
+CoolmapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CoolmapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CoolmapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CoolmapComponent, selector: "lib-coolmap", ngImport: i0, template: `
     <p>
       coolmap works!
     </p>
-  `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CoolmapComponent, decorators: [{
-            type: Component,
+  `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CoolmapComponent, decorators: [{
+            type: Component,
             args: [{ selector: 'lib-coolmap', template: `
     <p>
       coolmap works!
     </p>
-  ` }]
+  ` }]
         }], ctorParameters: function () { return []; } });
 
-class MapComponent {
-    constructor(coolmapService) {
-        this.coolmapService = coolmapService;
-        this.enableProgress = true;
-        this.destroyer$ = new Subject();
-    }
-    ngAfterViewInit() {
-        this.coolmapService.reintiatecoolmap.pipe(takeUntil(this.destroyer$)).subscribe((res) => {
-            this.enableProgress = true;
-            if (res) {
-                this.coolmapService.initiateMapForAddRoute(this.mapDiv.nativeElement).then((res) => {
-                    this.enableProgress = false;
-                });
-            }
-        });
-    }
-    ngOnDestroy() {
-        this.destroyer$.next(true);
-        this.destroyer$.unsubscribe();
-    }
-}
-MapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MapComponent, deps: [{ token: i1.CoolmapService }], target: i0.ɵɵFactoryTarget.Component });
-MapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MapComponent, selector: "app-map", viewQueries: [{ propertyName: "mapDiv", first: true, predicate: ["map"], descendants: true, static: true }], ngImport: i0, template: "<div>\n  <mat-progress-bar *ngIf=\"enableProgress\" mode=\"indeterminate\"></mat-progress-bar>\n  <div #map class=\"coolmap\" style=\"height: 100vh;\"></div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MapComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-map', template: "<div>\n  <mat-progress-bar *ngIf=\"enableProgress\" mode=\"indeterminate\"></mat-progress-bar>\n  <div #map class=\"coolmap\" style=\"height: 100vh;\"></div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.CoolmapService }]; }, propDecorators: { mapDiv: [{
-                type: ViewChild,
-                args: ['map', { static: true }]
+class MapComponent {
+    constructor(coolmapService) {
+        this.coolmapService = coolmapService;
+        this.enableProgress = true;
+        this.destroyer$ = new Subject();
+    }
+    ngAfterViewInit() {
+        this.coolmapService.reintiatecoolmap.pipe(takeUntil(this.destroyer$)).subscribe((res) => {
+            this.enableProgress = true;
+            if (res) {
+                this.coolmapService.initiateMapForAddRoute(this.mapDiv.nativeElement).then((res) => {
+                    this.enableProgress = false;
+                });
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.destroyer$.next(true);
+        this.destroyer$.unsubscribe();
+    }
+}
+MapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MapComponent, deps: [{ token: i1.CoolmapService }], target: i0.ɵɵFactoryTarget.Component });
+MapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: MapComponent, selector: "app-map", viewQueries: [{ propertyName: "mapDiv", first: true, predicate: ["map"], descendants: true, static: true }], ngImport: i0, template: "<div>\r\n  <mat-progress-bar *ngIf=\"enableProgress\" mode=\"indeterminate\"></mat-progress-bar>\r\n  <div #map class=\"coolmap\" style=\"height: 100vh;\"></div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MapComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-map', template: "<div>\r\n  <mat-progress-bar *ngIf=\"enableProgress\" mode=\"indeterminate\"></mat-progress-bar>\r\n  <div #map class=\"coolmap\" style=\"height: 100vh;\"></div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i1.CoolmapService }]; }, propDecorators: { mapDiv: [{
+                type: ViewChild,
+                args: ['map', { static: true }]
             }] } });
 
-class NavComponent {
-    constructor(utils, coolMap) {
-        this.utils = utils;
-        this.coolMap = coolMap;
-        this.drawer = new EventEmitter();
-        this.changeNav = new EventEmitter();
-        this.navValue = 'Jobcode';
-        this.isnavChange = true;
-        this.paddinForJobCode = { top: 0, bottom: 250, left: 500, right: 400 };
-        this.paddinForViewRoute = { top: 0, bottom: 400, left: 400, right: 0 };
-        this.destroyer$ = new Subject();
-        this.utils.navChangeObserve.pipe(takeUntil(this.destroyer$)).subscribe(res => { this.isnavChange = res; });
-        this.coolMap.setPadding(this.paddinForJobCode);
-    }
-    openDrawer() { this.drawer.emit(true); }
-    chnageNav(name) {
-        if (this.isnavChange) {
-            this.changeNav.emit(name);
-            this.navValue = name;
-            this.coolMap.clearBound();
-            if (name === 'Addroute') {
-                this.coolMap.setPadding(this.paddinForViewRoute);
-            }
-            else {
-                this.coolMap.setPadding(this.paddinForJobCode);
-            }
-            this.utils.clearOptions();
-        }
-    }
-    ngOnDestroy() {
-        this.destroyer$.next(true);
-        this.destroyer$.unsubscribe();
-    }
-}
-NavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NavComponent, deps: [{ token: i1.UtilsService }, { token: i1.CoolmapService }], target: i0.ɵɵFactoryTarget.Component });
-NavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NavComponent, selector: "app-nav", outputs: { drawer: "drawer", changeNav: "changeNav" }, ngImport: i0, template: "<div class=\"nav\">\n  <button (click)=\"openDrawer()\" class=\"toggle\">\n    <img src=\"assets/images/toggle.svg\" alt=\"\" />\n  </button>\n\n  <ul class=\"m-100\">\n    <li [ngClass]=\"{'active': navValue === 'Jobcode'}\">\n      <a mat-raised-button #tooltip=\"matTooltip\" matTooltip=\"Job Code\" aria-label=\"Job-code\" (click)=\"chnageNav('Jobcode')\">\n        <img src=\"assets/images/job-code.svg\" alt=\"\" />\n      </a>\n    </li>\n\n    <li [ngClass]=\"{'active': navValue === 'Addroute', 'disabled': !isnavChange }\">\n      <a mat-raised-button #tooltip=\"matTooltip\" matTooltip=\"View Route\" aria-label=\"View-route\" (click)=\"chnageNav('Addroute')\">\n        <img src=\"assets/images/route.svg\" alt=\"\" />\n      </a>\n    </li>\n  </ul>\n</div>\n", styles: [".nav{background:#e8e8e8;height:100vh;padding:15px 0;display:flex;align-items:center;flex-direction:column}.nav button{background:white;border-radius:15px;padding:5px 6px}.nav button img{width:28px}.nav ul{display:flex;flex-direction:column;align-items:center}.nav ul li{margin:10px 0;padding:0 5px;border-right:2px solid #e8e8e8}.nav ul li:hover{border-right:2px solid #326ad3;padding:0 5px}.nav ul li.disabled a{pointer-events:none;opacity:.5}.nav ul li.disabled:hover{border-right:2px solid #e8e8e8}.nav ul li a{padding:6px 0;display:block;border-radius:15px;min-width:42px;box-shadow:none;line-height:30px}.nav ul li a img{width:27px}.nav ul li a:hover{background:white}.nav ul li a:hover img{filter:invert(.2) sepia(1) saturate(8) hue-rotate(180deg)}.nav ul li.active{border-right:2px solid #326ad3}.nav ul li.active a{background:white}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i10.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NavComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-nav', template: "<div class=\"nav\">\n  <button (click)=\"openDrawer()\" class=\"toggle\">\n    <img src=\"assets/images/toggle.svg\" alt=\"\" />\n  </button>\n\n  <ul class=\"m-100\">\n    <li [ngClass]=\"{'active': navValue === 'Jobcode'}\">\n      <a mat-raised-button #tooltip=\"matTooltip\" matTooltip=\"Job Code\" aria-label=\"Job-code\" (click)=\"chnageNav('Jobcode')\">\n        <img src=\"assets/images/job-code.svg\" alt=\"\" />\n      </a>\n    </li>\n\n    <li [ngClass]=\"{'active': navValue === 'Addroute', 'disabled': !isnavChange }\">\n      <a mat-raised-button #tooltip=\"matTooltip\" matTooltip=\"View Route\" aria-label=\"View-route\" (click)=\"chnageNav('Addroute')\">\n        <img src=\"assets/images/route.svg\" alt=\"\" />\n      </a>\n    </li>\n  </ul>\n</div>\n", styles: [".nav{background:#e8e8e8;height:100vh;padding:15px 0;display:flex;align-items:center;flex-direction:column}.nav button{background:white;border-radius:15px;padding:5px 6px}.nav button img{width:28px}.nav ul{display:flex;flex-direction:column;align-items:center}.nav ul li{margin:10px 0;padding:0 5px;border-right:2px solid #e8e8e8}.nav ul li:hover{border-right:2px solid #326ad3;padding:0 5px}.nav ul li.disabled a{pointer-events:none;opacity:.5}.nav ul li.disabled:hover{border-right:2px solid #e8e8e8}.nav ul li a{padding:6px 0;display:block;border-radius:15px;min-width:42px;box-shadow:none;line-height:30px}.nav ul li a img{width:27px}.nav ul li a:hover{background:white}.nav ul li a:hover img{filter:invert(.2) sepia(1) saturate(8) hue-rotate(180deg)}.nav ul li.active{border-right:2px solid #326ad3}.nav ul li.active a{background:white}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.UtilsService }, { type: i1.CoolmapService }]; }, propDecorators: { drawer: [{
-                type: Output
-            }], changeNav: [{
-                type: Output
+class NavComponent {
+    constructor(utils, coolMap) {
+        this.utils = utils;
+        this.coolMap = coolMap;
+        this.drawer = new EventEmitter();
+        this.changeNav = new EventEmitter();
+        this.navValue = 'Jobcode';
+        this.isnavChange = true;
+        this.paddinForJobCode = { top: 0, bottom: 250, left: 500, right: 400 };
+        this.paddinForViewRoute = { top: 0, bottom: 400, left: 400, right: 0 };
+        this.destroyer$ = new Subject();
+        this.utils.navChangeObserve.pipe(takeUntil(this.destroyer$)).subscribe(res => { this.isnavChange = res; });
+        this.coolMap.setPadding(this.paddinForJobCode);
+    }
+    openDrawer() { this.drawer.emit(true); }
+    chnageNav(name) {
+        if (this.isnavChange) {
+            this.changeNav.emit(name);
+            this.navValue = name;
+            this.coolMap.clearBound();
+            if (name === 'Addroute') {
+                this.coolMap.setPadding(this.paddinForViewRoute);
+            }
+            else {
+                this.coolMap.setPadding(this.paddinForJobCode);
+            }
+            this.utils.clearOptions();
+        }
+    }
+    ngOnDestroy() {
+        this.destroyer$.next(true);
+        this.destroyer$.unsubscribe();
+    }
+}
+NavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NavComponent, deps: [{ token: i1.UtilsService }, { token: i1.CoolmapService }], target: i0.ɵɵFactoryTarget.Component });
+NavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: NavComponent, selector: "app-nav", outputs: { drawer: "drawer", changeNav: "changeNav" }, ngImport: i0, template: "<div class=\"nav\">\r\n  <button (click)=\"openDrawer()\" class=\"toggle\">\r\n    <img src=\"assets/images/toggle.svg\" alt=\"\" />\r\n  </button>\r\n\r\n  <ul class=\"m-100\">\r\n    <li [ngClass]=\"{'active': navValue === 'Jobcode'}\">\r\n      <a mat-raised-button #tooltip=\"matTooltip\" matTooltip=\"Job Code\" aria-label=\"Job-code\" (click)=\"chnageNav('Jobcode')\">\r\n        <img src=\"assets/images/job-code.svg\" alt=\"\" />\r\n      </a>\r\n    </li>\r\n\r\n    <li [ngClass]=\"{'active': navValue === 'Addroute', 'disabled': !isnavChange }\">\r\n      <a mat-raised-button #tooltip=\"matTooltip\" matTooltip=\"View Route\" aria-label=\"View-route\" (click)=\"chnageNav('Addroute')\">\r\n        <img src=\"assets/images/route.svg\" alt=\"\" />\r\n      </a>\r\n    </li>\r\n  </ul>\r\n</div>\r\n", styles: [".nav{background:#e8e8e8;height:100vh;padding:15px 0;display:flex;align-items:center;flex-direction:column}.nav button{background:white;border-radius:15px;padding:5px 6px}.nav button img{width:28px}.nav ul{display:flex;flex-direction:column;align-items:center}.nav ul li{margin:10px 0;padding:0 5px;border-right:2px solid #e8e8e8}.nav ul li:hover{border-right:2px solid #326ad3;padding:0 5px}.nav ul li.disabled a{pointer-events:none;opacity:.5}.nav ul li.disabled:hover{border-right:2px solid #e8e8e8}.nav ul li a{padding:6px 0;display:block;border-radius:15px;min-width:42px;box-shadow:none;line-height:30px}.nav ul li a img{width:27px}.nav ul li a:hover{background:white}.nav ul li a:hover img{filter:invert(.2) sepia(1) saturate(8) hue-rotate(180deg)}.nav ul li.active{border-right:2px solid #326ad3}.nav ul li.active a{background:white}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i10.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-nav', template: "<div class=\"nav\">\r\n  <button (click)=\"openDrawer()\" class=\"toggle\">\r\n    <img src=\"assets/images/toggle.svg\" alt=\"\" />\r\n  </button>\r\n\r\n  <ul class=\"m-100\">\r\n    <li [ngClass]=\"{'active': navValue === 'Jobcode'}\">\r\n      <a mat-raised-button #tooltip=\"matTooltip\" matTooltip=\"Job Code\" aria-label=\"Job-code\" (click)=\"chnageNav('Jobcode')\">\r\n        <img src=\"assets/images/job-code.svg\" alt=\"\" />\r\n      </a>\r\n    </li>\r\n\r\n    <li [ngClass]=\"{'active': navValue === 'Addroute', 'disabled': !isnavChange }\">\r\n      <a mat-raised-button #tooltip=\"matTooltip\" matTooltip=\"View Route\" aria-label=\"View-route\" (click)=\"chnageNav('Addroute')\">\r\n        <img src=\"assets/images/route.svg\" alt=\"\" />\r\n      </a>\r\n    </li>\r\n  </ul>\r\n</div>\r\n", styles: [".nav{background:#e8e8e8;height:100vh;padding:15px 0;display:flex;align-items:center;flex-direction:column}.nav button{background:white;border-radius:15px;padding:5px 6px}.nav button img{width:28px}.nav ul{display:flex;flex-direction:column;align-items:center}.nav ul li{margin:10px 0;padding:0 5px;border-right:2px solid #e8e8e8}.nav ul li:hover{border-right:2px solid #326ad3;padding:0 5px}.nav ul li.disabled a{pointer-events:none;opacity:.5}.nav ul li.disabled:hover{border-right:2px solid #e8e8e8}.nav ul li a{padding:6px 0;display:block;border-radius:15px;min-width:42px;box-shadow:none;line-height:30px}.nav ul li a img{width:27px}.nav ul li a:hover{background:white}.nav ul li a:hover img{filter:invert(.2) sepia(1) saturate(8) hue-rotate(180deg)}.nav ul li.active{border-right:2px solid #326ad3}.nav ul li.active a{background:white}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.UtilsService }, { type: i1.CoolmapService }]; }, propDecorators: { drawer: [{
+                type: Output
+            }], changeNav: [{
+                type: Output
             }] } });
 
-class ViewRouteListCardComponent {
-    constructor(utils) {
-        this.utils = utils;
-    }
-    detailsDict(event, route) {
-        if (event === 'click')
-            this.utils.setdictValue('route-detailsv2', JSON.stringify(route));
-        route['type'] = 'editroute';
-        route['prevent'] = true;
-        this.emitrouteevent.emit(route);
-        this.utils.routeDetailsUtility.next({ event, route });
-    }
-}
-ViewRouteListCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ViewRouteListCardComponent, deps: [{ token: i1.UtilsService }], target: i0.ɵɵFactoryTarget.Component });
-ViewRouteListCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ViewRouteListCardComponent, selector: "app-view-route-list-card", inputs: { route: "route", emitrouteevent: "emitrouteevent" }, ngImport: i0, template: "<div class=\"routebox\">\n  <span>\n    <mat-icon>directions</mat-icon>\n    <h2 [ngClass]=\"{'routeheading': route['route_name']}\">\n      {{route['route_name']}}\n    </h2>\n  </span>\n  <h3>{{route['customer_name']}} | {{route['material']}}</h3>\n\n  <div class=\"pickdropprt\">\n    <div class=\"pickprt\">\n      <b>\n        <h4>{{route['pickup_location']}}</h4>\n      </b>\n    </div>\n    <div class=\"dropprt\">\n      <b>\n        <h4>{{route['delivery_location']}}</h4>\n      </b>\n    </div>\n  </div>\n  <div class=\"infoicon\" (click)=\"detailsDict('click', route)\" (mouseover)=\"detailsDict(true, route)\"\n    (mouseleave)=\"detailsDict(false, route)\">\n    <img src=\"assets/images/info_icon.png\" [alt]=\"\" />\n  </div>\n  <div class=\"status routestatus\" [ngClass]=\"route['unit']\">{{route['unit']}}</div>\n</div>\n\n\n\n", styles: [".routebox span{display:flex;align-items:center}.routebox span h2{margin-left:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;margin-bottom:5px;margin-top:5px;font-size:.95rem}.routebox h3{font-size:.85rem;color:#767676;font-weight:400;margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:325px;margin-bottom:10px}.routebox .pickdropprt{font-size:.8125rem}.routebox .pickdropprt .pickprt{position:relative;display:flex;align-items:center;padding-bottom:6px}.routebox .pickdropprt .pickprt span{padding-left:0;padding-right:20px;display:block}.routebox .pickdropprt .pickprt b{position:relative;font-weight:400}.routebox .pickdropprt .pickprt b:after{background:black;width:1px;height:100%;left:3px;content:\"\";position:absolute;top:10px}.routebox .pickdropprt .pickprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;max-width:215px}@media (min-width: 1600px){.routebox .pickdropprt .pickprt h4{max-width:265px}}.routebox .pickdropprt .pickprt h4:before{background:black;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.routebox .pickdropprt .dropprt{position:relative;padding-bottom:10px;display:flex;align-items:center}.routebox .pickdropprt .dropprt span{padding-left:0;padding-right:20px;display:block}.routebox .pickdropprt .dropprt b{position:relative;font-weight:400}.routebox .pickdropprt .dropprt b:after{background:black;width:1px;height:12px;left:3px;content:\"\";position:absolute;top:-7px}.routebox .pickdropprt .dropprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;max-width:215px}.routebox .pickdropprt .dropprt h4:before{background:black;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.routebox .infoicon{position:absolute;right:10px;bottom:10px}.routebox .infoicon img{width:20px;height:20px}.routebox .status{position:absolute;border-radius:30px;top:12px;right:40px;font-size:0;color:#fff;text-transform:capitalize;font-weight:500;padding:3px 10px}.routebox .status.routestatus{right:10px;width:20px;height:20px;text-align:center;line-height:20px;padding:0 0 0 1px}.routebox .status.routestatus:first-letter{font-size:.8rem}@media (min-width: 1600px){.routebox .status.routestatus{padding:0;line-height:22px}}.routebox .status.Ton{background:#ff7272}.routebox .status.Load{background:#a3c52e}.routebox .status.Hourly{background:#ae23d1}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ViewRouteListCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-view-route-list-card', template: "<div class=\"routebox\">\n  <span>\n    <mat-icon>directions</mat-icon>\n    <h2 [ngClass]=\"{'routeheading': route['route_name']}\">\n      {{route['route_name']}}\n    </h2>\n  </span>\n  <h3>{{route['customer_name']}} | {{route['material']}}</h3>\n\n  <div class=\"pickdropprt\">\n    <div class=\"pickprt\">\n      <b>\n        <h4>{{route['pickup_location']}}</h4>\n      </b>\n    </div>\n    <div class=\"dropprt\">\n      <b>\n        <h4>{{route['delivery_location']}}</h4>\n      </b>\n    </div>\n  </div>\n  <div class=\"infoicon\" (click)=\"detailsDict('click', route)\" (mouseover)=\"detailsDict(true, route)\"\n    (mouseleave)=\"detailsDict(false, route)\">\n    <img src=\"assets/images/info_icon.png\" [alt]=\"\" />\n  </div>\n  <div class=\"status routestatus\" [ngClass]=\"route['unit']\">{{route['unit']}}</div>\n</div>\n\n\n\n", styles: [".routebox span{display:flex;align-items:center}.routebox span h2{margin-left:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;margin-bottom:5px;margin-top:5px;font-size:.95rem}.routebox h3{font-size:.85rem;color:#767676;font-weight:400;margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:325px;margin-bottom:10px}.routebox .pickdropprt{font-size:.8125rem}.routebox .pickdropprt .pickprt{position:relative;display:flex;align-items:center;padding-bottom:6px}.routebox .pickdropprt .pickprt span{padding-left:0;padding-right:20px;display:block}.routebox .pickdropprt .pickprt b{position:relative;font-weight:400}.routebox .pickdropprt .pickprt b:after{background:black;width:1px;height:100%;left:3px;content:\"\";position:absolute;top:10px}.routebox .pickdropprt .pickprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;max-width:215px}@media (min-width: 1600px){.routebox .pickdropprt .pickprt h4{max-width:265px}}.routebox .pickdropprt .pickprt h4:before{background:black;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.routebox .pickdropprt .dropprt{position:relative;padding-bottom:10px;display:flex;align-items:center}.routebox .pickdropprt .dropprt span{padding-left:0;padding-right:20px;display:block}.routebox .pickdropprt .dropprt b{position:relative;font-weight:400}.routebox .pickdropprt .dropprt b:after{background:black;width:1px;height:12px;left:3px;content:\"\";position:absolute;top:-7px}.routebox .pickdropprt .dropprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;max-width:215px}.routebox .pickdropprt .dropprt h4:before{background:black;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.routebox .infoicon{position:absolute;right:10px;bottom:10px}.routebox .infoicon img{width:20px;height:20px}.routebox .status{position:absolute;border-radius:30px;top:12px;right:40px;font-size:0;color:#fff;text-transform:capitalize;font-weight:500;padding:3px 10px}.routebox .status.routestatus{right:10px;width:20px;height:20px;text-align:center;line-height:20px;padding:0 0 0 1px}.routebox .status.routestatus:first-letter{font-size:.8rem}@media (min-width: 1600px){.routebox .status.routestatus{padding:0;line-height:22px}}.routebox .status.Ton{background:#ff7272}.routebox .status.Load{background:#a3c52e}.routebox .status.Hourly{background:#ae23d1}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.UtilsService }]; }, propDecorators: { route: [{
-                type: Input
-            }], emitrouteevent: [{
-                type: Input
+class ViewRouteListCardComponent {
+    constructor(utils) {
+        this.utils = utils;
+    }
+    detailsDict(event, route) {
+        if (event === 'click')
+            this.utils.setdictValue('route-detailsv2', JSON.stringify(route));
+        route['type'] = 'editroute';
+        route['prevent'] = true;
+        this.emitrouteevent.emit(route);
+        this.utils.routeDetailsUtility.next({ event, route });
+    }
+}
+ViewRouteListCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ViewRouteListCardComponent, deps: [{ token: i1.UtilsService }], target: i0.ɵɵFactoryTarget.Component });
+ViewRouteListCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ViewRouteListCardComponent, selector: "app-view-route-list-card", inputs: { route: "route", emitrouteevent: "emitrouteevent" }, ngImport: i0, template: "<div class=\"routebox\">\r\n  <span>\r\n    <mat-icon>directions</mat-icon>\r\n    <h2 [ngClass]=\"{'routeheading': route['route_name']}\">\r\n      {{route['route_name']}}\r\n    </h2>\r\n  </span>\r\n  <h3>{{route['customer_name']}} | {{route['material']}}</h3>\r\n\r\n  <div class=\"pickdropprt\">\r\n    <div class=\"pickprt\">\r\n      <b>\r\n        <h4>{{route['pickup_location']}}</h4>\r\n      </b>\r\n    </div>\r\n    <div class=\"dropprt\">\r\n      <b>\r\n        <h4>{{route['delivery_location']}}</h4>\r\n      </b>\r\n    </div>\r\n  </div>\r\n  <div class=\"infoicon\" (click)=\"detailsDict('click', route)\" (mouseover)=\"detailsDict(true, route)\"\r\n    (mouseleave)=\"detailsDict(false, route)\">\r\n    <img src=\"assets/images/info_icon.png\" [alt]=\"\" />\r\n  </div>\r\n  <div class=\"status routestatus\" [ngClass]=\"route['unit']\">{{route['unit']}}</div>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".routebox span{display:flex;align-items:center}.routebox span h2{margin-left:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;margin-bottom:5px;margin-top:5px;font-size:.95rem}.routebox h3{font-size:.85rem;color:#767676;font-weight:400;margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:325px;margin-bottom:10px}.routebox .pickdropprt{font-size:.8125rem}.routebox .pickdropprt .pickprt{position:relative;display:flex;align-items:center;padding-bottom:6px}.routebox .pickdropprt .pickprt span{padding-left:0;padding-right:20px;display:block}.routebox .pickdropprt .pickprt b{position:relative;font-weight:400}.routebox .pickdropprt .pickprt b:after{background:black;width:1px;height:100%;left:3px;content:\"\";position:absolute;top:10px}.routebox .pickdropprt .pickprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;max-width:215px}@media (min-width: 1600px){.routebox .pickdropprt .pickprt h4{max-width:265px}}.routebox .pickdropprt .pickprt h4:before{background:black;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.routebox .pickdropprt .dropprt{position:relative;padding-bottom:10px;display:flex;align-items:center}.routebox .pickdropprt .dropprt span{padding-left:0;padding-right:20px;display:block}.routebox .pickdropprt .dropprt b{position:relative;font-weight:400}.routebox .pickdropprt .dropprt b:after{background:black;width:1px;height:12px;left:3px;content:\"\";position:absolute;top:-7px}.routebox .pickdropprt .dropprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;max-width:215px}.routebox .pickdropprt .dropprt h4:before{background:black;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.routebox .infoicon{position:absolute;right:10px;bottom:10px}.routebox .infoicon img{width:20px;height:20px}.routebox .status{position:absolute;border-radius:30px;top:12px;right:40px;font-size:0;color:#fff;text-transform:capitalize;font-weight:500;padding:3px 10px}.routebox .status.routestatus{right:10px;width:20px;height:20px;text-align:center;line-height:20px;padding:0 0 0 1px}.routebox .status.routestatus:first-letter{font-size:.8rem}@media (min-width: 1600px){.routebox .status.routestatus{padding:0;line-height:22px}}.routebox .status.Ton{background:#ff7272}.routebox .status.Load{background:#a3c52e}.routebox .status.Hourly{background:#ae23d1}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ViewRouteListCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-view-route-list-card', template: "<div class=\"routebox\">\r\n  <span>\r\n    <mat-icon>directions</mat-icon>\r\n    <h2 [ngClass]=\"{'routeheading': route['route_name']}\">\r\n      {{route['route_name']}}\r\n    </h2>\r\n  </span>\r\n  <h3>{{route['customer_name']}} | {{route['material']}}</h3>\r\n\r\n  <div class=\"pickdropprt\">\r\n    <div class=\"pickprt\">\r\n      <b>\r\n        <h4>{{route['pickup_location']}}</h4>\r\n      </b>\r\n    </div>\r\n    <div class=\"dropprt\">\r\n      <b>\r\n        <h4>{{route['delivery_location']}}</h4>\r\n      </b>\r\n    </div>\r\n  </div>\r\n  <div class=\"infoicon\" (click)=\"detailsDict('click', route)\" (mouseover)=\"detailsDict(true, route)\"\r\n    (mouseleave)=\"detailsDict(false, route)\">\r\n    <img src=\"assets/images/info_icon.png\" [alt]=\"\" />\r\n  </div>\r\n  <div class=\"status routestatus\" [ngClass]=\"route['unit']\">{{route['unit']}}</div>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".routebox span{display:flex;align-items:center}.routebox span h2{margin-left:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;margin-bottom:5px;margin-top:5px;font-size:.95rem}.routebox h3{font-size:.85rem;color:#767676;font-weight:400;margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:325px;margin-bottom:10px}.routebox .pickdropprt{font-size:.8125rem}.routebox .pickdropprt .pickprt{position:relative;display:flex;align-items:center;padding-bottom:6px}.routebox .pickdropprt .pickprt span{padding-left:0;padding-right:20px;display:block}.routebox .pickdropprt .pickprt b{position:relative;font-weight:400}.routebox .pickdropprt .pickprt b:after{background:black;width:1px;height:100%;left:3px;content:\"\";position:absolute;top:10px}.routebox .pickdropprt .pickprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;max-width:215px}@media (min-width: 1600px){.routebox .pickdropprt .pickprt h4{max-width:265px}}.routebox .pickdropprt .pickprt h4:before{background:black;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.routebox .pickdropprt .dropprt{position:relative;padding-bottom:10px;display:flex;align-items:center}.routebox .pickdropprt .dropprt span{padding-left:0;padding-right:20px;display:block}.routebox .pickdropprt .dropprt b{position:relative;font-weight:400}.routebox .pickdropprt .dropprt b:after{background:black;width:1px;height:12px;left:3px;content:\"\";position:absolute;top:-7px}.routebox .pickdropprt .dropprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;max-width:215px}.routebox .pickdropprt .dropprt h4:before{background:black;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.routebox .infoicon{position:absolute;right:10px;bottom:10px}.routebox .infoicon img{width:20px;height:20px}.routebox .status{position:absolute;border-radius:30px;top:12px;right:40px;font-size:0;color:#fff;text-transform:capitalize;font-weight:500;padding:3px 10px}.routebox .status.routestatus{right:10px;width:20px;height:20px;text-align:center;line-height:20px;padding:0 0 0 1px}.routebox .status.routestatus:first-letter{font-size:.8rem}@media (min-width: 1600px){.routebox .status.routestatus{padding:0;line-height:22px}}.routebox .status.Ton{background:#ff7272}.routebox .status.Load{background:#a3c52e}.routebox .status.Hourly{background:#ae23d1}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.UtilsService }]; }, propDecorators: { route: [{
+                type: Input
+            }], emitrouteevent: [{
+                type: Input
             }] } });
 
-class SmsCardDetailsOverviewComponent {
-    constructor() {
-        this.label = DriversmsCardKey;
-        this.overViewEnum = DriverSmsCardEnum;
-    }
-}
-SmsCardDetailsOverviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmsCardDetailsOverviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SmsCardDetailsOverviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SmsCardDetailsOverviewComponent, selector: "app-sms-card-details-overview", inputs: { jobValue: "jobValue" }, ngImport: i0, template: "<ng-container *ngFor=\"let item of label\">\n  <span>\n    <label>{{overViewEnum[item]}}</label>\n    <ng-container *ngIf=\"item !== 'values'\">{{jobValue[item] ? jobValue[item] : 'N/A'}}</ng-container>\n    <ng-container *ngIf=\"item === 'values'\">{{jobValue[item]['Done'] + jobValue[item]['Ongoing'] + jobValue[item]['Open']}}</ng-container>\n  </span>\n</ng-container>\n", styles: ["span{display:flex;margin-bottom:12px;font-size:.8rem;align-items:center}span label{font-weight:600;width:37%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmsCardDetailsOverviewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-sms-card-details-overview', template: "<ng-container *ngFor=\"let item of label\">\n  <span>\n    <label>{{overViewEnum[item]}}</label>\n    <ng-container *ngIf=\"item !== 'values'\">{{jobValue[item] ? jobValue[item] : 'N/A'}}</ng-container>\n    <ng-container *ngIf=\"item === 'values'\">{{jobValue[item]['Done'] + jobValue[item]['Ongoing'] + jobValue[item]['Open']}}</ng-container>\n  </span>\n</ng-container>\n", styles: ["span{display:flex;margin-bottom:12px;font-size:.8rem;align-items:center}span label{font-weight:600;width:37%}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { jobValue: [{
-                type: Input
+class SmsCardDetailsOverviewComponent {
+    constructor() {
+        this.label = DriversmsCardKey;
+        this.overViewEnum = DriverSmsCardEnum;
+    }
+}
+SmsCardDetailsOverviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SmsCardDetailsOverviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SmsCardDetailsOverviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SmsCardDetailsOverviewComponent, selector: "app-sms-card-details-overview", inputs: { jobValue: "jobValue" }, ngImport: i0, template: "<ng-container *ngFor=\"let item of label\">\r\n  <span>\r\n    <label>{{overViewEnum[item]}}</label>\r\n    <ng-container *ngIf=\"item !== 'values'\">{{jobValue[item] ? jobValue[item] : 'N/A'}}</ng-container>\r\n    <ng-container *ngIf=\"item === 'values'\">{{jobValue[item]['Done'] + jobValue[item]['Ongoing'] + jobValue[item]['Open']}}</ng-container>\r\n  </span>\r\n</ng-container>\r\n", styles: ["span{display:flex;margin-bottom:12px;font-size:.8rem;align-items:center}span label{font-weight:600;width:37%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SmsCardDetailsOverviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sms-card-details-overview', template: "<ng-container *ngFor=\"let item of label\">\r\n  <span>\r\n    <label>{{overViewEnum[item]}}</label>\r\n    <ng-container *ngIf=\"item !== 'values'\">{{jobValue[item] ? jobValue[item] : 'N/A'}}</ng-container>\r\n    <ng-container *ngIf=\"item === 'values'\">{{jobValue[item]['Done'] + jobValue[item]['Ongoing'] + jobValue[item]['Open']}}</ng-container>\r\n  </span>\r\n</ng-container>\r\n", styles: ["span{display:flex;margin-bottom:12px;font-size:.8rem;align-items:center}span label{font-weight:600;width:37%}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { jobValue: [{
+                type: Input
             }] } });
 
-class JobCodeListCardComponent {
-    constructor(utils) {
-        this.utils = utils;
-        this.routeSeletion = new EventEmitter();
-        this.toggleDrivermenu = new EventEmitter();
-    }
-    selectRoute(route) { this.routeSeletion.emit(route); }
-    toggleDriverlist(mouseevntType, route, isHoverOut) {
-        const data = { mouseevntType, route, isHoverOut };
-        this.toggleDrivermenu.emit(data);
-        if (mouseevntType === 'click')
-            this.utils.setdictValue('driver-details', JSON.stringify(this.route));
-    }
-    toggleJobCodeDetails(mouseEventType, route) {
-        if (mouseEventType) {
-            route['type'] = 'jobcode';
-            this.emitJobdetails.emitroute.emit(route);
-        }
-        else if (!mouseEventType && this.preventCloseDetails) {
-            route = this.utils.getdictValue('route-details');
-            route['type'] = 'jobcode';
-            this.emitJobdetails.emitroute.emit(route);
-        }
-        else if (!mouseEventType && !this.preventCloseDetails)
-            this.emitJobdetails.clearJobDetailsFromList.emit(true);
-    }
-    calculateStatusPercentage(type, route) {
-        const total = route['Done'] + route['Ongoing'] + route['Open'];
-        if (type === 'done') {
-            return Math.round((100 * route['Done']) / total);
-        }
-        else if (type === 'ongoing') {
-            return Math.round((100 * route['Ongoing']) / total);
-        }
-        else if (type === 'open') {
-            return Math.round((100 * route['Open']) / total);
-        }
-        else {
-            return null;
-        }
-    }
-    setRouteItem() {
-        this.utils.preVentJobdetailclose.next(true);
-        this.utils.setdictValue('route-details', JSON.stringify(this.route));
-    }
-}
-JobCodeListCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JobCodeListCardComponent, deps: [{ token: i1.UtilsService }], target: i0.ɵɵFactoryTarget.Component });
-JobCodeListCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: JobCodeListCardComponent, selector: "app-job-code-list-card", inputs: { route: "route", emitJobdetails: "emitJobdetails", preventCloseDetails: "preventCloseDetails" }, outputs: { routeSeletion: "routeSeletion", toggleDrivermenu: "toggleDrivermenu" }, ngImport: i0, template: "<div class=\"innerbox\">\n  <div class=\"inputarea\">\n    <input type=\"checkbox\" name=\"selectroute\" [checked]=\"route['isSelected']\" (change)=\"$event ? selectRoute(route) : null\" />\n    <label>&nbsp;</label>\n    <div class=\"border\"></div>\n  </div>\n  <div class=\"job_intro\">\n    <div class=\"heading\">\n      <h2>\n        {{route['order_number'] ? route['order_number'] : ''}}\n      </h2>\n      |\n      <span>\n        {{route['customer_name']}}\n      </span>\n      |\n      <span>\n        {{route['project']}}\n      </span>\n    </div>\n    <div class=\"destinationprt\">\n      <span style=\"padding-left: 0;\">\n        {{route['pickup_location']}}\n      </span>\n      <b>></b>\n      <span>\n        {{route['delivery_location']}}\n      </span>\n    </div>\n    <div class=\"mat_cat\">\n      <span>\n        {{route['material']}}\n      </span>\n    </div>\n\n    <div class=\"statusbar\">\n      <div class=\"status_percent\">\n        <span class=\"done\" [style]=\"'width:'+calculateStatusPercentage('done',route['values'])+'%'\"></span>\n        <span class=\"ongoing\" [style]=\"'width:'+calculateStatusPercentage('ongoing', route['values'])+'%'\"> </span>\n        <span class=\"open\" [style]=\"'width:'+calculateStatusPercentage('open', route['values'])+'%'\"> </span>\n      </div>\n    </div>\n  </div>\n  <div class=\"statusarea\">\n    <div class=\"statusunit\" [ngClass]=\"route['unit']\">{{route['unit']}}</div>\n    <div class=\"driver_icon\" (mouseover)=\"toggleDriverlist(true, route)\" (mouseout)=\"toggleDriverlist(false, route, true)\"\n      mat-raised-button #tooltip=\"matTooltip\" matTooltip=\"Click on icon to show the driver list\" matTooltipPosition=\"above\"\n      (click)=\"toggleDriverlist('click', route)\">\n      <img src=\"assets/images/driver_icon.png\" [alt]=\"\" />\n    </div>\n    <div class=\"infoicon\" (click)=\"setRouteItem()\" (mouseover)=\"toggleJobCodeDetails(true, route)\"\n      (mouseout)=\"toggleJobCodeDetails(false, route)\">\n      <img src=\"assets/images/info_icon.png\" [alt]=\"\" />\n    </div>\n  </div>\n</div>\n", styles: [".innerbox{display:flex;justify-content:space-between}.innerbox .inputarea{display:flex;align-items:center;width:6%}.innerbox .inputarea input[type=checkbox]{width:100%;height:100%;margin-right:10px;opacity:0;position:absolute;left:0;margin-left:0;top:0;z-index:3;cursor:pointer}.innerbox .inputarea input[type=checkbox]:checked+label{background:url(../../../../../assets/images/fill-radio.png) 10px 11px no-repeat}.innerbox .inputarea label{background:url(../../../../../assets/images/blank-radio.png) 10px 11px no-repeat;width:100%;position:relative;z-index:2;font-size:12px;color:#878787;height:100%;position:absolute;top:0;left:0}.innerbox .inputarea .border{position:absolute;width:100%;height:100%;left:0;right:0;top:-1px;border-radius:15px}.innerbox .inputarea input:checked~.border{border-left:3px solid #39c471;border-right:1px solid #39c471;border-top:1px solid #39c471;border-bottom:1px solid #39c471}.innerbox .inputarea h2{margin-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:214px;padding-left:16px;margin-bottom:5px;margin-top:0}.innerbox .job_intro{width:80%}.innerbox .job_intro .heading{display:flex;font-size:.8rem}.innerbox .job_intro .heading h2{margin:0 4px 0 0;font-size:.8rem}.innerbox .job_intro .heading span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100px;padding:0 3px;display:block}.innerbox .job_intro .destinationprt{display:flex;margin-top:10px;font-size:.8rem}.innerbox .job_intro .destinationprt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:132px;padding:0 5px;display:block}.innerbox .job_intro .mat_cat{margin-top:10px;font-size:.8rem}.innerbox .job_intro .statusbar{width:100%;position:relative;height:5px;margin-top:10px}.innerbox .job_intro .statusbar .status_percent{position:absolute;left:0;display:flex;width:100%;height:100%}.innerbox .job_intro .statusbar .status_percent span{display:block}.innerbox .job_intro .statusbar .status_percent .done{background:#008000}.innerbox .job_intro .statusbar .status_percent .ongoing{background:#ffcc00}.innerbox .job_intro .statusbar .status_percent .open{background:#bfbfbf}.innerbox .statusarea{display:flex;flex-direction:column;align-items:center;width:10%}.innerbox .statusarea .statusunit{border-radius:30px;font-size:0;color:#fff;text-transform:capitalize;font-weight:500;width:20px;height:20px;text-align:center;line-height:20px}.innerbox .statusarea .statusunit:first-letter{font-size:.8rem}.innerbox .statusarea .statusunit.routestatus{right:10px}.innerbox .statusarea .statusunit.Ton{background:#39c471}.innerbox .statusarea .statusunit.Load{background:#326ad3}.innerbox .statusarea .statusunit.Hourly{background:#ffad56}.innerbox .statusarea .driver_icon,.innerbox .statusarea .infoicon{z-index:9999}.innerbox .statusarea .driver_icon img,.innerbox .statusarea .infoicon img{width:20px;height:20px}.innerbox .statusarea .driver_icon{margin:5px 0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JobCodeListCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-job-code-list-card', template: "<div class=\"innerbox\">\n  <div class=\"inputarea\">\n    <input type=\"checkbox\" name=\"selectroute\" [checked]=\"route['isSelected']\" (change)=\"$event ? selectRoute(route) : null\" />\n    <label>&nbsp;</label>\n    <div class=\"border\"></div>\n  </div>\n  <div class=\"job_intro\">\n    <div class=\"heading\">\n      <h2>\n        {{route['order_number'] ? route['order_number'] : ''}}\n      </h2>\n      |\n      <span>\n        {{route['customer_name']}}\n      </span>\n      |\n      <span>\n        {{route['project']}}\n      </span>\n    </div>\n    <div class=\"destinationprt\">\n      <span style=\"padding-left: 0;\">\n        {{route['pickup_location']}}\n      </span>\n      <b>></b>\n      <span>\n        {{route['delivery_location']}}\n      </span>\n    </div>\n    <div class=\"mat_cat\">\n      <span>\n        {{route['material']}}\n      </span>\n    </div>\n\n    <div class=\"statusbar\">\n      <div class=\"status_percent\">\n        <span class=\"done\" [style]=\"'width:'+calculateStatusPercentage('done',route['values'])+'%'\"></span>\n        <span class=\"ongoing\" [style]=\"'width:'+calculateStatusPercentage('ongoing', route['values'])+'%'\"> </span>\n        <span class=\"open\" [style]=\"'width:'+calculateStatusPercentage('open', route['values'])+'%'\"> </span>\n      </div>\n    </div>\n  </div>\n  <div class=\"statusarea\">\n    <div class=\"statusunit\" [ngClass]=\"route['unit']\">{{route['unit']}}</div>\n    <div class=\"driver_icon\" (mouseover)=\"toggleDriverlist(true, route)\" (mouseout)=\"toggleDriverlist(false, route, true)\"\n      mat-raised-button #tooltip=\"matTooltip\" matTooltip=\"Click on icon to show the driver list\" matTooltipPosition=\"above\"\n      (click)=\"toggleDriverlist('click', route)\">\n      <img src=\"assets/images/driver_icon.png\" [alt]=\"\" />\n    </div>\n    <div class=\"infoicon\" (click)=\"setRouteItem()\" (mouseover)=\"toggleJobCodeDetails(true, route)\"\n      (mouseout)=\"toggleJobCodeDetails(false, route)\">\n      <img src=\"assets/images/info_icon.png\" [alt]=\"\" />\n    </div>\n  </div>\n</div>\n", styles: [".innerbox{display:flex;justify-content:space-between}.innerbox .inputarea{display:flex;align-items:center;width:6%}.innerbox .inputarea input[type=checkbox]{width:100%;height:100%;margin-right:10px;opacity:0;position:absolute;left:0;margin-left:0;top:0;z-index:3;cursor:pointer}.innerbox .inputarea input[type=checkbox]:checked+label{background:url(../../../../../assets/images/fill-radio.png) 10px 11px no-repeat}.innerbox .inputarea label{background:url(../../../../../assets/images/blank-radio.png) 10px 11px no-repeat;width:100%;position:relative;z-index:2;font-size:12px;color:#878787;height:100%;position:absolute;top:0;left:0}.innerbox .inputarea .border{position:absolute;width:100%;height:100%;left:0;right:0;top:-1px;border-radius:15px}.innerbox .inputarea input:checked~.border{border-left:3px solid #39c471;border-right:1px solid #39c471;border-top:1px solid #39c471;border-bottom:1px solid #39c471}.innerbox .inputarea h2{margin-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:214px;padding-left:16px;margin-bottom:5px;margin-top:0}.innerbox .job_intro{width:80%}.innerbox .job_intro .heading{display:flex;font-size:.8rem}.innerbox .job_intro .heading h2{margin:0 4px 0 0;font-size:.8rem}.innerbox .job_intro .heading span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100px;padding:0 3px;display:block}.innerbox .job_intro .destinationprt{display:flex;margin-top:10px;font-size:.8rem}.innerbox .job_intro .destinationprt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:132px;padding:0 5px;display:block}.innerbox .job_intro .mat_cat{margin-top:10px;font-size:.8rem}.innerbox .job_intro .statusbar{width:100%;position:relative;height:5px;margin-top:10px}.innerbox .job_intro .statusbar .status_percent{position:absolute;left:0;display:flex;width:100%;height:100%}.innerbox .job_intro .statusbar .status_percent span{display:block}.innerbox .job_intro .statusbar .status_percent .done{background:#008000}.innerbox .job_intro .statusbar .status_percent .ongoing{background:#ffcc00}.innerbox .job_intro .statusbar .status_percent .open{background:#bfbfbf}.innerbox .statusarea{display:flex;flex-direction:column;align-items:center;width:10%}.innerbox .statusarea .statusunit{border-radius:30px;font-size:0;color:#fff;text-transform:capitalize;font-weight:500;width:20px;height:20px;text-align:center;line-height:20px}.innerbox .statusarea .statusunit:first-letter{font-size:.8rem}.innerbox .statusarea .statusunit.routestatus{right:10px}.innerbox .statusarea .statusunit.Ton{background:#39c471}.innerbox .statusarea .statusunit.Load{background:#326ad3}.innerbox .statusarea .statusunit.Hourly{background:#ffad56}.innerbox .statusarea .driver_icon,.innerbox .statusarea .infoicon{z-index:9999}.innerbox .statusarea .driver_icon img,.innerbox .statusarea .infoicon img{width:20px;height:20px}.innerbox .statusarea .driver_icon{margin:5px 0}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.UtilsService }]; }, propDecorators: { route: [{
-                type: Input
-            }], routeSeletion: [{
-                type: Output
-            }], toggleDrivermenu: [{
-                type: Output
-            }], emitJobdetails: [{
-                type: Input
-            }], preventCloseDetails: [{
-                type: Input
+class JobCodeListCardComponent {
+    constructor(utils) {
+        this.utils = utils;
+        this.routeSeletion = new EventEmitter();
+        this.toggleDrivermenu = new EventEmitter();
+    }
+    selectRoute(route) { this.routeSeletion.emit(route); }
+    toggleDriverlist(mouseevntType, route, isHoverOut) {
+        const data = { mouseevntType, route, isHoverOut };
+        this.toggleDrivermenu.emit(data);
+        if (mouseevntType === 'click')
+            this.utils.setdictValue('driver-details', JSON.stringify(this.route));
+    }
+    toggleJobCodeDetails(mouseEventType, route) {
+        if (mouseEventType) {
+            route['type'] = 'jobcode';
+            this.emitJobdetails.emitroute.emit(route);
+        }
+        else if (!mouseEventType && this.preventCloseDetails) {
+            route = this.utils.getdictValue('route-details');
+            route['type'] = 'jobcode';
+            this.emitJobdetails.emitroute.emit(route);
+        }
+        else if (!mouseEventType && !this.preventCloseDetails)
+            this.emitJobdetails.clearJobDetailsFromList.emit(true);
+    }
+    calculateStatusPercentage(type, route) {
+        const total = route['Done'] + route['Ongoing'] + route['Open'];
+        if (type === 'done') {
+            return Math.round((100 * route['Done']) / total);
+        }
+        else if (type === 'ongoing') {
+            return Math.round((100 * route['Ongoing']) / total);
+        }
+        else if (type === 'open') {
+            return Math.round((100 * route['Open']) / total);
+        }
+        else {
+            return null;
+        }
+    }
+    setRouteItem() {
+        this.utils.preVentJobdetailclose.next(true);
+        this.utils.setdictValue('route-details', JSON.stringify(this.route));
+    }
+}
+JobCodeListCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: JobCodeListCardComponent, deps: [{ token: i1.UtilsService }], target: i0.ɵɵFactoryTarget.Component });
+JobCodeListCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: JobCodeListCardComponent, selector: "app-job-code-list-card", inputs: { route: "route", emitJobdetails: "emitJobdetails", preventCloseDetails: "preventCloseDetails" }, outputs: { routeSeletion: "routeSeletion", toggleDrivermenu: "toggleDrivermenu" }, ngImport: i0, template: "<div class=\"innerbox\">\r\n  <div class=\"inputarea\">\r\n    <input type=\"checkbox\" name=\"selectroute\" [checked]=\"route['isSelected']\" (change)=\"$event ? selectRoute(route) : null\" />\r\n    <label>&nbsp;</label>\r\n    <div class=\"border\"></div>\r\n  </div>\r\n  <div class=\"job_intro\">\r\n    <div class=\"heading\">\r\n      <h2>\r\n        {{route['order_number'] ? route['order_number'] : ''}}\r\n      </h2>\r\n      |\r\n      <span>\r\n        {{route['customer_name']}}\r\n      </span>\r\n      |\r\n      <span>\r\n        {{route['project']}}\r\n      </span>\r\n    </div>\r\n    <div class=\"destinationprt\">\r\n      <span style=\"padding-left: 0;\">\r\n        {{route['pickup_location']}}\r\n      </span>\r\n      <b>></b>\r\n      <span>\r\n        {{route['delivery_location']}}\r\n      </span>\r\n    </div>\r\n    <div class=\"mat_cat\">\r\n      <span>\r\n        {{route['material']}}\r\n      </span>\r\n    </div>\r\n\r\n    <div class=\"statusbar\">\r\n      <div class=\"status_percent\">\r\n        <span class=\"done\" [style]=\"'width:'+calculateStatusPercentage('done',route['values'])+'%'\"></span>\r\n        <span class=\"ongoing\" [style]=\"'width:'+calculateStatusPercentage('ongoing', route['values'])+'%'\"> </span>\r\n        <span class=\"open\" [style]=\"'width:'+calculateStatusPercentage('open', route['values'])+'%'\"> </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"statusarea\">\r\n    <div class=\"statusunit\" [ngClass]=\"route['unit']\">{{route['unit']}}</div>\r\n    <div class=\"driver_icon\" (mouseover)=\"toggleDriverlist(true, route)\" (mouseout)=\"toggleDriverlist(false, route, true)\"\r\n      mat-raised-button #tooltip=\"matTooltip\" matTooltip=\"Click on icon to show the driver list\" matTooltipPosition=\"above\"\r\n      (click)=\"toggleDriverlist('click', route)\">\r\n      <img src=\"assets/images/driver_icon.png\" [alt]=\"\" />\r\n    </div>\r\n    <div class=\"infoicon\" (click)=\"setRouteItem()\" (mouseover)=\"toggleJobCodeDetails(true, route)\"\r\n      (mouseout)=\"toggleJobCodeDetails(false, route)\">\r\n      <img src=\"assets/images/info_icon.png\" [alt]=\"\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".innerbox{display:flex;justify-content:space-between}.innerbox .inputarea{display:flex;align-items:center;width:6%}.innerbox .inputarea input[type=checkbox]{width:100%;height:100%;margin-right:10px;opacity:0;position:absolute;left:0;margin-left:0;top:0;z-index:3;cursor:pointer}.innerbox .inputarea input[type=checkbox]:checked+label{background:url(../../../../../assets/images/fill-radio.png) 10px 11px no-repeat}.innerbox .inputarea label{background:url(../../../../../assets/images/blank-radio.png) 10px 11px no-repeat;width:100%;position:relative;z-index:2;font-size:12px;color:#878787;height:100%;position:absolute;top:0;left:0}.innerbox .inputarea .border{position:absolute;width:100%;height:100%;left:0;right:0;top:-1px;border-radius:15px}.innerbox .inputarea input:checked~.border{border-left:3px solid #39c471;border-right:1px solid #39c471;border-top:1px solid #39c471;border-bottom:1px solid #39c471}.innerbox .inputarea h2{margin-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:214px;padding-left:16px;margin-bottom:5px;margin-top:0}.innerbox .job_intro{width:80%}.innerbox .job_intro .heading{display:flex;font-size:.8rem}.innerbox .job_intro .heading h2{margin:0 4px 0 0;font-size:.8rem}.innerbox .job_intro .heading span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100px;padding:0 3px;display:block}.innerbox .job_intro .destinationprt{display:flex;margin-top:10px;font-size:.8rem}.innerbox .job_intro .destinationprt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:132px;padding:0 5px;display:block}.innerbox .job_intro .mat_cat{margin-top:10px;font-size:.8rem}.innerbox .job_intro .statusbar{width:100%;position:relative;height:5px;margin-top:10px}.innerbox .job_intro .statusbar .status_percent{position:absolute;left:0;display:flex;width:100%;height:100%}.innerbox .job_intro .statusbar .status_percent span{display:block}.innerbox .job_intro .statusbar .status_percent .done{background:#008000}.innerbox .job_intro .statusbar .status_percent .ongoing{background:#ffcc00}.innerbox .job_intro .statusbar .status_percent .open{background:#bfbfbf}.innerbox .statusarea{display:flex;flex-direction:column;align-items:center;width:10%}.innerbox .statusarea .statusunit{border-radius:30px;font-size:0;color:#fff;text-transform:capitalize;font-weight:500;width:20px;height:20px;text-align:center;line-height:20px}.innerbox .statusarea .statusunit:first-letter{font-size:.8rem}.innerbox .statusarea .statusunit.routestatus{right:10px}.innerbox .statusarea .statusunit.Ton{background:#39c471}.innerbox .statusarea .statusunit.Load{background:#326ad3}.innerbox .statusarea .statusunit.Hourly{background:#ffad56}.innerbox .statusarea .driver_icon,.innerbox .statusarea .infoicon{z-index:9999}.innerbox .statusarea .driver_icon img,.innerbox .statusarea .infoicon img{width:20px;height:20px}.innerbox .statusarea .driver_icon{margin:5px 0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: JobCodeListCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-job-code-list-card', template: "<div class=\"innerbox\">\r\n  <div class=\"inputarea\">\r\n    <input type=\"checkbox\" name=\"selectroute\" [checked]=\"route['isSelected']\" (change)=\"$event ? selectRoute(route) : null\" />\r\n    <label>&nbsp;</label>\r\n    <div class=\"border\"></div>\r\n  </div>\r\n  <div class=\"job_intro\">\r\n    <div class=\"heading\">\r\n      <h2>\r\n        {{route['order_number'] ? route['order_number'] : ''}}\r\n      </h2>\r\n      |\r\n      <span>\r\n        {{route['customer_name']}}\r\n      </span>\r\n      |\r\n      <span>\r\n        {{route['project']}}\r\n      </span>\r\n    </div>\r\n    <div class=\"destinationprt\">\r\n      <span style=\"padding-left: 0;\">\r\n        {{route['pickup_location']}}\r\n      </span>\r\n      <b>></b>\r\n      <span>\r\n        {{route['delivery_location']}}\r\n      </span>\r\n    </div>\r\n    <div class=\"mat_cat\">\r\n      <span>\r\n        {{route['material']}}\r\n      </span>\r\n    </div>\r\n\r\n    <div class=\"statusbar\">\r\n      <div class=\"status_percent\">\r\n        <span class=\"done\" [style]=\"'width:'+calculateStatusPercentage('done',route['values'])+'%'\"></span>\r\n        <span class=\"ongoing\" [style]=\"'width:'+calculateStatusPercentage('ongoing', route['values'])+'%'\"> </span>\r\n        <span class=\"open\" [style]=\"'width:'+calculateStatusPercentage('open', route['values'])+'%'\"> </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"statusarea\">\r\n    <div class=\"statusunit\" [ngClass]=\"route['unit']\">{{route['unit']}}</div>\r\n    <div class=\"driver_icon\" (mouseover)=\"toggleDriverlist(true, route)\" (mouseout)=\"toggleDriverlist(false, route, true)\"\r\n      mat-raised-button #tooltip=\"matTooltip\" matTooltip=\"Click on icon to show the driver list\" matTooltipPosition=\"above\"\r\n      (click)=\"toggleDriverlist('click', route)\">\r\n      <img src=\"assets/images/driver_icon.png\" [alt]=\"\" />\r\n    </div>\r\n    <div class=\"infoicon\" (click)=\"setRouteItem()\" (mouseover)=\"toggleJobCodeDetails(true, route)\"\r\n      (mouseout)=\"toggleJobCodeDetails(false, route)\">\r\n      <img src=\"assets/images/info_icon.png\" [alt]=\"\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".innerbox{display:flex;justify-content:space-between}.innerbox .inputarea{display:flex;align-items:center;width:6%}.innerbox .inputarea input[type=checkbox]{width:100%;height:100%;margin-right:10px;opacity:0;position:absolute;left:0;margin-left:0;top:0;z-index:3;cursor:pointer}.innerbox .inputarea input[type=checkbox]:checked+label{background:url(../../../../../assets/images/fill-radio.png) 10px 11px no-repeat}.innerbox .inputarea label{background:url(../../../../../assets/images/blank-radio.png) 10px 11px no-repeat;width:100%;position:relative;z-index:2;font-size:12px;color:#878787;height:100%;position:absolute;top:0;left:0}.innerbox .inputarea .border{position:absolute;width:100%;height:100%;left:0;right:0;top:-1px;border-radius:15px}.innerbox .inputarea input:checked~.border{border-left:3px solid #39c471;border-right:1px solid #39c471;border-top:1px solid #39c471;border-bottom:1px solid #39c471}.innerbox .inputarea h2{margin-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:214px;padding-left:16px;margin-bottom:5px;margin-top:0}.innerbox .job_intro{width:80%}.innerbox .job_intro .heading{display:flex;font-size:.8rem}.innerbox .job_intro .heading h2{margin:0 4px 0 0;font-size:.8rem}.innerbox .job_intro .heading span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100px;padding:0 3px;display:block}.innerbox .job_intro .destinationprt{display:flex;margin-top:10px;font-size:.8rem}.innerbox .job_intro .destinationprt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:132px;padding:0 5px;display:block}.innerbox .job_intro .mat_cat{margin-top:10px;font-size:.8rem}.innerbox .job_intro .statusbar{width:100%;position:relative;height:5px;margin-top:10px}.innerbox .job_intro .statusbar .status_percent{position:absolute;left:0;display:flex;width:100%;height:100%}.innerbox .job_intro .statusbar .status_percent span{display:block}.innerbox .job_intro .statusbar .status_percent .done{background:#008000}.innerbox .job_intro .statusbar .status_percent .ongoing{background:#ffcc00}.innerbox .job_intro .statusbar .status_percent .open{background:#bfbfbf}.innerbox .statusarea{display:flex;flex-direction:column;align-items:center;width:10%}.innerbox .statusarea .statusunit{border-radius:30px;font-size:0;color:#fff;text-transform:capitalize;font-weight:500;width:20px;height:20px;text-align:center;line-height:20px}.innerbox .statusarea .statusunit:first-letter{font-size:.8rem}.innerbox .statusarea .statusunit.routestatus{right:10px}.innerbox .statusarea .statusunit.Ton{background:#39c471}.innerbox .statusarea .statusunit.Load{background:#326ad3}.innerbox .statusarea .statusunit.Hourly{background:#ffad56}.innerbox .statusarea .driver_icon,.innerbox .statusarea .infoicon{z-index:9999}.innerbox .statusarea .driver_icon img,.innerbox .statusarea .infoicon img{width:20px;height:20px}.innerbox .statusarea .driver_icon{margin:5px 0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.UtilsService }]; }, propDecorators: { route: [{
+                type: Input
+            }], routeSeletion: [{
+                type: Output
+            }], toggleDrivermenu: [{
+                type: Output
+            }], emitJobdetails: [{
+                type: Input
+            }], preventCloseDetails: [{
+                type: Input
             }] } });
 
-class RouteJobCodeListComponent {
-    constructor(coolMap, utils) {
-        this.coolMap = coolMap;
-        this.utils = utils;
-        this.loader = true;
-        this.type = '';
-        this.data = [];
-        this.currentNav = '';
-        this.emitroute = new EventEmitter();
-        this.showAllRoute = new EventEmitter();
-        this.preventMouseout = false;
-        this.filterList = this.data;
-        this.isDriverList = false;
-        this.selectedRoute = new SelectionModel(true, []);
-        this.preventListSelect = false;
-        this.clearJobDetailsFromList = new EventEmitter();
-        this.preventDetailsClose = false;
-        this.messageLoader = false;
-        this.driverMessage = new FormControl('', [Validators.maxLength(256)]);
-        this.isSmsList = false;
-        this.driverList = [];
-    }
-    ngOnInit() {
-        this.utils.getpreVentJobdetailclose.subscribe(res => { this.preventDetailsClose = res; });
-        this.utils.removeMapEntityUtility.subscribe((res) => { this.passRoute(res); });
-    }
-    passRoute(job) {
-        this.data.forEach((each) => { if (each['route_id'] !== job['route_id']) {
-            each['isActive'] = false;
-        }
-        else {
-            each['isActive'] = true;
-        } });
-        if (this.type == 'addroute')
-            this.filterList.forEach(ele => this.coolMap.filterRoute(ele['route_id'], 'none'));
-    }
-    selectRoute(route) {
-        if (!this.preventListSelect) {
-            this.preventListSelect = true;
-            this.selectedRoute.toggle(route);
-            this.clearJobDetailsFromList.emit(true);
-            this.utils.preVentJobdetailclose.next(false);
-            this.filterList.forEach(ele => this.coolMap.filterRoute(ele['job_id'], 'none'));
-            this.clearList();
-            this.selectedRoute.selected.forEach((ele, index) => {
-                this.coolMap.filterRoute(ele['job_id'], 'visible', ((this.selectedRoute.selected.length - 1) === index)).then(() => {
-                    this.preventListSelect = false;
-                });
-            });
-            if (!this.selectedRoute.selected.length) {
-                this.preventListSelect = false;
-                this.data.forEach(ele => this.coolMap.filterRoute(ele['job_id'], 'visible'));
-            }
-            ;
-        }
-    }
-    checkroutes(route) {
-        const selectedRoute = this.selectedRoute.selected;
-        this.filterList = this.filterList.map(ele => { ele['isSelected'] = false; return ele; });
-        if (selectedRoute.length > 0) {
-            selectedRoute.forEach(ele => {
-                if (route['order_number'] === ele['order_number']) {
-                    ele['isSelected'] = true;
-                }
-            });
-        }
-        return route;
-    }
-    ngOnChanges(changes) {
-        setTimeout(() => {
-            if (this.currentNav === 'Addroute' && (this.data.length < this.filterList.length)) {
-                const index = this.filterList.findIndex(ele => ele.isActive);
-                if (index > 0)
-                    this.filterList[index].isActive = false;
-                this.data.forEach((ele, indexForData) => {
-                    const id = (ele['job_id'] ? ele['job_id'] : ele['route_id']);
-                    this.coolMap.plotRoute(ele, id, this.type, false, (indexForData === (this.data.length - 1))).then((res) => {
-                    });
-                });
-            }
-        }, 500);
-        if (changes['data'] && changes['data']['currentValue']) {
-            this.filterList = changes['data']['currentValue'];
-            if (this.searchTerm) {
-                if (this.searchTerm.length > 0) {
-                    this.data = this.utils.getSearchResults(changes['data']['currentValue'], this.searchTerm);
-                    this.filterList = this.data;
-                }
-                else {
-                    this.filterList = changes['data']['currentValue'];
-                }
-            }
-            if (this.type === 'jobcode') {
-                this.loader = true;
-                this.clearList();
-                if (this.filterList.length === 0)
-                    this.loader = false;
-            }
-            if (this.type !== 'jobcode') {
-                if (changes['data']['previousValue'] && this.currentNav === 'addForm') {
-                    const activeRoute = changes['data']['previousValue'].find((ele) => ele.isActive);
-                    if (activeRoute) {
-                        this.filterList.map((item) => {
-                            if (item.route_id === activeRoute.route_id) {
-                                item.isActive = true;
-                            }
-                        });
-                    }
-                }
-            }
-            if (changes['data']['previousValue'] && this.currentNav !== 'addForm') {
-                this.coolMap.removeJobFromMap(changes['data']['previousValue']);
-                this.selectedRoute.clear();
-            }
-            ;
-            if (this.currentNav !== 'addForm') {
-                changes['data']['currentValue'].forEach((ele, indexForData) => {
-                    const id = (ele['job_id'] ? ele['job_id'] : ele['route_id']);
-                    this.coolMap.plotRoute(ele, id, this.type, false, (indexForData === (this.data.length - 1))).then((res) => {
-                        if (indexForData === (this.data.length - 1)) {
-                            this.loader = false;
-                            this.utils.preventnavChange.next(true);
-                        }
-                    });
-                });
-            }
-        }
-        if (changes['searchTerm']) {
-            if (this.filterList) {
-                this.data = this.filterList;
-                this.clearList();
-                if (changes['searchTerm']['currentValue'].length > 0) {
-                    this.coolMap.removeRouteAndMarker(1);
-                    this.data = this.utils.getSearchResults(this.data, changes['searchTerm']['currentValue']);
-                }
-                else {
-                    this.data = this.filterList;
-                }
-                setTimeout(() => {
-                    this.coolMap.clearBoundWithCordinates();
-                    if (this.currentNav !== 'addForm' && !this.selectedRoute['selected'].length) {
-                        this.coolMap.removeRouteAndMarker(1);
-                        this.toggleFilterRoute(this.filterList);
-                    }
-                }, 500);
-                if (this.currentNav !== 'addForm' && this.selectedRoute['selected'].length) {
-                    if (this.data && this.data.length > 0) {
-                        this.clearList();
-                        this.clearJobDetailsFromList.emit(true);
-                        this.coolMap.removeJobFromMap(this.selectedRoute.selected);
-                        setTimeout(() => {
-                            this.data.forEach((ele, indexForData) => {
-                                this.coolMap.plotRoute(ele, ele['job_id'], this.type, false, (indexForData === (this.data.length - 1))).then(() => {
-                                    if (indexForData === (this.data.length - 1)) {
-                                        this.loader = false;
-                                        this.utils.preventnavChange.next(true);
-                                    }
-                                    if (this.selectedRoute['selected'].length && this.selectedRoute['selected'][0]['job_id'] === ele['job_id']) {
-                                        this.selectedRoute.clear();
-                                    }
-                                });
-                            });
-                        }, 500);
-                    }
-                }
-            }
-        }
-    }
-    showRoute() {
-        this.utils.preventnavChange.next(false);
-        this.loader = true;
-        this.clearList();
-        this.showAllRoute.emit(true);
-        if (this.filterList && this.filterList.length > 0) {
-            this.coolMap.removeJobFromMap(this.selectedRoute.selected);
-            setTimeout(() => {
-                this.filterList.forEach((ele, indexForData) => {
-                    this.coolMap.plotRoute(ele, ele['job_id'], this.type, false, (indexForData === this.filterList.length - 1)).then(() => {
-                        if (indexForData === this.filterList.length - 1) {
-                            this.loader = false;
-                            this.utils.preventnavChange.next(true);
-                        }
-                        if (this.selectedRoute['selected'].length && this.selectedRoute['selected'][0]['job_id'] === ele['job_id']) {
-                            this.selectedRoute.clear();
-                        }
-                    });
-                });
-            }, 500);
-        }
-    }
-    toggleDrivermenu(event) {
-        const mouseevntType = event.mouseevntType;
-        let route = event.route;
-        const isHoverOut = event.isHoverOut;
-        if (typeof (mouseevntType) === 'string') {
-            if (this.preventMouseout) {
-                this.isDriverList = !this.isDriverList;
-            }
-            ;
-            this.preventMouseout = true;
-        }
-        if (typeof (mouseevntType) === 'boolean' && !mouseevntType && !this.preventMouseout) {
-            this.isDriverList = mouseevntType;
-        }
-        ;
-        if (typeof (mouseevntType) === 'boolean' && mouseevntType && !this.preventMouseout) {
-            this.isDriverList = mouseevntType;
-        }
-        ;
-        if (this.preventMouseout && !this.isDriverList)
-            this.preventMouseout = false;
-        if (isHoverOut) {
-            if (this.preventMouseout) {
-                route = this.utils.getdictValue('driver-details');
-                this.driverList = route;
-            }
-            if (!this.preventMouseout) {
-                this.driverList = route;
-            }
-        }
-        else {
-            this.driverList = route;
-        }
-    }
-    visiblesection(value) { if (this.type === value) {
-        return true;
-    }
-    else
-        return false; }
-    toggleFilterRoute(filterList) {
-        filterList.forEach((ele) => {
-            const filterItem = (this.type === 'jobcode') ? 'job_id' : 'route_id';
-            const index = this.data.findIndex((ele1) => { return (ele1[`${filterItem}`] === ele[`${filterItem}`]); });
-            const id = (ele['job_id'] ? ele['job_id'] : ele['route_id']);
-            if (id && index < 0)
-                this.coolMap.filterRoute(id, 'none');
-            if (id && index >= 0) {
-                this.data[index].isActive = false;
-                this.coolMap.filterRoute(id, 'visible');
-                this.coolMap.extendBound(ele['path'], (index === (this.data.length - 1)));
-            }
-            ;
-        });
-    }
-    clearList() {
-        this.isDriverList = false;
-        this.driverList = null;
-        this.preventMouseout = false;
-        this.isSmsList = false;
-    }
-    sendMessage() {
-        this.messageLoader = true;
-        if (this.driverMessage.valid) {
-            const data = {
-                order_number: this.driverList['order_number'],
-                date: this.driverList['date'],
-                message: this.driverMessage.value,
-            };
-            this.utils.postdata('coolmap/jobs_report_chat', data).subscribe((res) => {
-                if (res['data']['status'] === 'Success.') {
-                    this.messageLoader = false;
-                    this.driverMessage.reset();
-                    this.utils.openSnackBar('Message Sent', 'success');
-                }
-                else {
-                    this.messageLoader = false;
-                    this.utils.openSnackBar('Message not sent', 'error');
-                }
-            }, err => { if (err) {
-                this.messageLoader = false;
-            } });
-        }
-    }
-}
-RouteJobCodeListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RouteJobCodeListComponent, deps: [{ token: i1.CoolmapService }, { token: i1.UtilsService }], target: i0.ɵɵFactoryTarget.Component });
-RouteJobCodeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: RouteJobCodeListComponent, selector: "app-route-jobcode-list", inputs: { loader: "loader", type: "type", data: "data", currentNav: "currentNav", searchTerm: "searchTerm", clearListSeletion: "clearListSeletion" }, outputs: { emitroute: "emitroute", showAllRoute: "showAllRoute", clearJobDetailsFromList: "clearJobDetailsFromList" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"scrollprt addroutelist\" [class.viewroute]=\"visiblesection('addroute')\"\n  [class.jobList]=\"visiblesection('jobcode')\">\n  <button (click)=\"showRoute()\" [disabled]=\"loader\" *ngIf=\"selectedRoute.selected.length\" class=\"show_routebtn\">Show all\n    route</button>\n  <perfect-scrollbar [class.jobscroll]=\"visiblesection('jobcode')\">\n    <mat-spinner *ngIf=\"loader\"></mat-spinner>\n    <ul *ngIf=\"!loader && data.length > 0\">\n      <li [class.active]=\"route['isActive'] && visiblesection('addroute')\" *ngFor=\"let route of data\">\n        <app-job-code-list-card *ngIf=\"visiblesection('jobcode')\" (toggleDrivermenu)=\"toggleDrivermenu($event)\"\n          (routeSeletion)=\"selectRoute($event)\" [preventCloseDetails]=\"preventDetailsClose\" [emitJobdetails]=\"{emitroute, clearJobDetailsFromList}\" [route]=\"checkroutes(route)\"></app-job-code-list-card>\n        <app-view-route-list-card [emitrouteevent]=\"emitroute\" *ngIf=\"visiblesection('addroute')\"\n          [route]=\"route\"></app-view-route-list-card>\n      </li>\n    </ul>\n    <p *ngIf=\"!loader && data.length === 0\">{{visiblesection('addroute') ? 'No Route found' : 'No Job code found.'}}</p>\n  </perfect-scrollbar>\n</div>\n\n<div class=\"driver_list\" *ngIf=\"isDriverList\">\n  <div class=\"driver_headingprt\">\n    <h2>Driver List</h2>\n    <button *ngIf=\"driverList.driver_list?.length > 0\" (click)=\"isSmsList = true\">SMS</button>\n    <div class=\"closebtn\" (click)=\"isDriverList = false; preventMouseout = false; isSmsList = false\">\n      <mat-icon>clear</mat-icon>\n    </div>\n  </div>\n  <ul class=\"driverList\" *ngIf=\"driverList && driverList.driver_list\">\n    <li *ngFor=\"let driver of driverList?.driver_list\">\n      <img src=\"assets/images/driver_icon.png\" [alt]=\"driver['driver_name']\" />\n      <div class=\"driver_detail\">\n        <b>{{driver['driver_name']}}</b> <span>{{driver['trucking_company']}}</span>\n        <div class=\"cont_del\">\n          <small>Driver contact: <b>{{driver['driver_phone'] ? driver['driver_phone'] : 'N/A'}}</b></small>\n          <small>Company contact: <b>{{driver['trucking_company_phone'] ? driver['trucking_company_phone'] : 'N/A'}}</b></small>\n        </div>\n      </div>\n    </li>\n    <p *ngIf=\"driverList.driver_list?.length === 0\" style=\"font-weight:700; text-align:center;\">\n      No Driver found\n    </p>\n  </ul>\n  <div class=\"smslist\" *ngIf=\"isSmsList\">\n    <div class=\"heading\">\n      <h2>SMS All Drivers</h2>\n      <div class=\"closebtn\" (click)=\"isSmsList = false\">\n        <mat-icon>clear</mat-icon>\n      </div>\n    </div>\n    <div class=\"detailprt\">\n      <app-sms-card-details-overview [jobValue]=\"driverList\"></app-sms-card-details-overview>\n      <div class=\"form_input\">\n        <mat-form-field class=\"example-full-width\">\n          <textarea matInput placeholder=\"Text here...\" autocomplete=\"nope\" column=\"10\"\n            [formControl]=\"driverMessage\"></textarea>\n          <mat-hint>{{driverMessage.value?.length}} / 256</mat-hint>\n        </mat-form-field>\n        <button *ngIf=\"!messageLoader\" [disabled]=\"!driverMessage.value || driverMessage.invalid\" (click)=\"sendMessage()\">\n          Send SMS\n        </button>\n      </div>\n    </div>\n    <div class=\"loader\">\n      <mat-spinner *ngIf=\"messageLoader\"></mat-spinner>\n    </div>\n  </div>\n</div>\n", styles: [".driver_iconprt{position:absolute;right:10px;top:12px;z-index:9999}.driver_iconprt img{width:25px;height:25px}.driver_list{background:white;position:fixed;width:300px;top:10px;left:360px;border-top-left-radius:20px;border-top-right-radius:20px}.driver_list .driver_headingprt{display:flex;justify-content:space-between;align-items:center;padding:0 15px}.driver_list .driver_headingprt button{background:none;border:1px solid #ccc;border-radius:10px;padding:5px 20px}.driver_list .driver_headingprt button:hover{background:#326ad3;color:#fff}.driver_list h2{font-size:20px}.driver_list .driverList{height:300px;overflow:auto}.driver_list .driverList li{display:flex;padding:10px;align-items:flex-start;cursor:pointer;border-bottom:1px solid white;background:#eee}.driver_list .driverList li img{width:35px;height:35px;border-radius:100%;margin-right:10px}.driver_list .driverList li .driver_detail{width:calc(100% - 45px);display:flex;flex-direction:column;justify-content:flex-start}.driver_list .driverList li .driver_detail b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:135px;font-size:.9rem}.driver_list .driverList li .driver_detail span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;font-size:.8rem}.driver_list:after{height:10px;background:white;border-bottom-right-radius:20px;border-bottom-left-radius:20px;content:\"\";position:absolute;bottom:-9px;width:100%}.smslist{background:white;position:absolute;width:480px;top:0;left:105%;border-radius:20px;padding-bottom:20px}.smslist .heading{display:flex;justify-content:space-between;align-items:center;padding:0 15px}.smslist .detailprt{padding:0 15px}.smslist .detailprt span{display:flex;margin-bottom:12px;font-size:.8rem;align-items:center}.smslist .detailprt span label{font-weight:600;width:37%}.smslist .detailprt .form_input{display:flex;flex-direction:column;font-size:.8rem}.smslist .detailprt .form_input button{background:#326ad3;padding:10px 18px;color:#fff;font-size:.8125rem;border-radius:30px;display:flex;align-self:flex-end}.closebtn{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#f5f5f5}.show_routebtn{font-size:.9rem;margin-bottom:20px;padding:6px 11px;position:absolute;top:8px;right:10px;background-color:transparent;color:#3f51b5;border:1px solid #3f51b5;border-radius:10px;box-shadow:none}.show_routebtn:hover{background-color:#3f51b5;color:#fff}.cont_del{margin-top:10px}.cont_del small{display:block}.jobList ul{margin:0 15px 0 10px;width:100%}.jobList ul li{position:relative;background:#fbfbfb;padding:10px;border-radius:15px;margin-bottom:5px;border:1px solid #fbfbfb;border-left:3px solid #fbfbfb;cursor:pointer;height:inherit}@media (min-width: 2500px){.jobList ul li{height:7.65vh}}@media (min-width: 3300px){.jobList ul li{height:5.61vh}}.viewroute ul{margin:0 15px;width:100%}.viewroute ul li{position:relative;background:#fbfbfb;padding:7px 10px;border-radius:15px;margin-bottom:5px;border:1px solid #fbfbfb;border-left:3px solid #fbfbfb;cursor:pointer;height:16.4vh}@media (min-width: 1600px){.viewroute ul li{height:12.4vh}}.viewroute ul li.active{border:1px solid #39c471;border-left:3px solid #39c471}.loader{position:absolute;height:100%;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:center;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i7$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i8.PerfectScrollbarComponent, selector: "perfect-scrollbar", inputs: ["disabled", "usePSClass", "autoPropagation", "scrollIndicators", "config"], outputs: ["psScrollY", "psScrollX", "psScrollUp", "psScrollDown", "psScrollLeft", "psScrollRight", "psYReachEnd", "psYReachStart", "psXReachEnd", "psXReachStart"], exportAs: ["ngxPerfectScrollbar"] }, { kind: "component", type: ViewRouteListCardComponent, selector: "app-view-route-list-card", inputs: ["route", "emitrouteevent"] }, { kind: "component", type: SmsCardDetailsOverviewComponent, selector: "app-sms-card-details-overview", inputs: ["jobValue"] }, { kind: "component", type: JobCodeListCardComponent, selector: "app-job-code-list-card", inputs: ["route", "emitJobdetails", "preventCloseDetails"], outputs: ["routeSeletion", "toggleDrivermenu"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RouteJobCodeListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-route-jobcode-list', template: "<div class=\"scrollprt addroutelist\" [class.viewroute]=\"visiblesection('addroute')\"\n  [class.jobList]=\"visiblesection('jobcode')\">\n  <button (click)=\"showRoute()\" [disabled]=\"loader\" *ngIf=\"selectedRoute.selected.length\" class=\"show_routebtn\">Show all\n    route</button>\n  <perfect-scrollbar [class.jobscroll]=\"visiblesection('jobcode')\">\n    <mat-spinner *ngIf=\"loader\"></mat-spinner>\n    <ul *ngIf=\"!loader && data.length > 0\">\n      <li [class.active]=\"route['isActive'] && visiblesection('addroute')\" *ngFor=\"let route of data\">\n        <app-job-code-list-card *ngIf=\"visiblesection('jobcode')\" (toggleDrivermenu)=\"toggleDrivermenu($event)\"\n          (routeSeletion)=\"selectRoute($event)\" [preventCloseDetails]=\"preventDetailsClose\" [emitJobdetails]=\"{emitroute, clearJobDetailsFromList}\" [route]=\"checkroutes(route)\"></app-job-code-list-card>\n        <app-view-route-list-card [emitrouteevent]=\"emitroute\" *ngIf=\"visiblesection('addroute')\"\n          [route]=\"route\"></app-view-route-list-card>\n      </li>\n    </ul>\n    <p *ngIf=\"!loader && data.length === 0\">{{visiblesection('addroute') ? 'No Route found' : 'No Job code found.'}}</p>\n  </perfect-scrollbar>\n</div>\n\n<div class=\"driver_list\" *ngIf=\"isDriverList\">\n  <div class=\"driver_headingprt\">\n    <h2>Driver List</h2>\n    <button *ngIf=\"driverList.driver_list?.length > 0\" (click)=\"isSmsList = true\">SMS</button>\n    <div class=\"closebtn\" (click)=\"isDriverList = false; preventMouseout = false; isSmsList = false\">\n      <mat-icon>clear</mat-icon>\n    </div>\n  </div>\n  <ul class=\"driverList\" *ngIf=\"driverList && driverList.driver_list\">\n    <li *ngFor=\"let driver of driverList?.driver_list\">\n      <img src=\"assets/images/driver_icon.png\" [alt]=\"driver['driver_name']\" />\n      <div class=\"driver_detail\">\n        <b>{{driver['driver_name']}}</b> <span>{{driver['trucking_company']}}</span>\n        <div class=\"cont_del\">\n          <small>Driver contact: <b>{{driver['driver_phone'] ? driver['driver_phone'] : 'N/A'}}</b></small>\n          <small>Company contact: <b>{{driver['trucking_company_phone'] ? driver['trucking_company_phone'] : 'N/A'}}</b></small>\n        </div>\n      </div>\n    </li>\n    <p *ngIf=\"driverList.driver_list?.length === 0\" style=\"font-weight:700; text-align:center;\">\n      No Driver found\n    </p>\n  </ul>\n  <div class=\"smslist\" *ngIf=\"isSmsList\">\n    <div class=\"heading\">\n      <h2>SMS All Drivers</h2>\n      <div class=\"closebtn\" (click)=\"isSmsList = false\">\n        <mat-icon>clear</mat-icon>\n      </div>\n    </div>\n    <div class=\"detailprt\">\n      <app-sms-card-details-overview [jobValue]=\"driverList\"></app-sms-card-details-overview>\n      <div class=\"form_input\">\n        <mat-form-field class=\"example-full-width\">\n          <textarea matInput placeholder=\"Text here...\" autocomplete=\"nope\" column=\"10\"\n            [formControl]=\"driverMessage\"></textarea>\n          <mat-hint>{{driverMessage.value?.length}} / 256</mat-hint>\n        </mat-form-field>\n        <button *ngIf=\"!messageLoader\" [disabled]=\"!driverMessage.value || driverMessage.invalid\" (click)=\"sendMessage()\">\n          Send SMS\n        </button>\n      </div>\n    </div>\n    <div class=\"loader\">\n      <mat-spinner *ngIf=\"messageLoader\"></mat-spinner>\n    </div>\n  </div>\n</div>\n", styles: [".driver_iconprt{position:absolute;right:10px;top:12px;z-index:9999}.driver_iconprt img{width:25px;height:25px}.driver_list{background:white;position:fixed;width:300px;top:10px;left:360px;border-top-left-radius:20px;border-top-right-radius:20px}.driver_list .driver_headingprt{display:flex;justify-content:space-between;align-items:center;padding:0 15px}.driver_list .driver_headingprt button{background:none;border:1px solid #ccc;border-radius:10px;padding:5px 20px}.driver_list .driver_headingprt button:hover{background:#326ad3;color:#fff}.driver_list h2{font-size:20px}.driver_list .driverList{height:300px;overflow:auto}.driver_list .driverList li{display:flex;padding:10px;align-items:flex-start;cursor:pointer;border-bottom:1px solid white;background:#eee}.driver_list .driverList li img{width:35px;height:35px;border-radius:100%;margin-right:10px}.driver_list .driverList li .driver_detail{width:calc(100% - 45px);display:flex;flex-direction:column;justify-content:flex-start}.driver_list .driverList li .driver_detail b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:135px;font-size:.9rem}.driver_list .driverList li .driver_detail span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;font-size:.8rem}.driver_list:after{height:10px;background:white;border-bottom-right-radius:20px;border-bottom-left-radius:20px;content:\"\";position:absolute;bottom:-9px;width:100%}.smslist{background:white;position:absolute;width:480px;top:0;left:105%;border-radius:20px;padding-bottom:20px}.smslist .heading{display:flex;justify-content:space-between;align-items:center;padding:0 15px}.smslist .detailprt{padding:0 15px}.smslist .detailprt span{display:flex;margin-bottom:12px;font-size:.8rem;align-items:center}.smslist .detailprt span label{font-weight:600;width:37%}.smslist .detailprt .form_input{display:flex;flex-direction:column;font-size:.8rem}.smslist .detailprt .form_input button{background:#326ad3;padding:10px 18px;color:#fff;font-size:.8125rem;border-radius:30px;display:flex;align-self:flex-end}.closebtn{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#f5f5f5}.show_routebtn{font-size:.9rem;margin-bottom:20px;padding:6px 11px;position:absolute;top:8px;right:10px;background-color:transparent;color:#3f51b5;border:1px solid #3f51b5;border-radius:10px;box-shadow:none}.show_routebtn:hover{background-color:#3f51b5;color:#fff}.cont_del{margin-top:10px}.cont_del small{display:block}.jobList ul{margin:0 15px 0 10px;width:100%}.jobList ul li{position:relative;background:#fbfbfb;padding:10px;border-radius:15px;margin-bottom:5px;border:1px solid #fbfbfb;border-left:3px solid #fbfbfb;cursor:pointer;height:inherit}@media (min-width: 2500px){.jobList ul li{height:7.65vh}}@media (min-width: 3300px){.jobList ul li{height:5.61vh}}.viewroute ul{margin:0 15px;width:100%}.viewroute ul li{position:relative;background:#fbfbfb;padding:7px 10px;border-radius:15px;margin-bottom:5px;border:1px solid #fbfbfb;border-left:3px solid #fbfbfb;cursor:pointer;height:16.4vh}@media (min-width: 1600px){.viewroute ul li{height:12.4vh}}.viewroute ul li.active{border:1px solid #39c471;border-left:3px solid #39c471}.loader{position:absolute;height:100%;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:center;pointer-events:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.CoolmapService }, { type: i1.UtilsService }]; }, propDecorators: { loader: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], currentNav: [{
-                type: Input
-            }], emitroute: [{
-                type: Output
-            }], showAllRoute: [{
-                type: Output
-            }], searchTerm: [{
-                type: Input
-            }], clearJobDetailsFromList: [{
-                type: Output
-            }], clearListSeletion: [{
-                type: Input
+class RouteJobCodeListComponent {
+    constructor(coolMap, utils) {
+        this.coolMap = coolMap;
+        this.utils = utils;
+        this.loader = true;
+        this.type = '';
+        this.data = [];
+        this.currentNav = '';
+        this.emitroute = new EventEmitter();
+        this.showAllRoute = new EventEmitter();
+        this.preventMouseout = false;
+        this.filterList = this.data;
+        this.isDriverList = false;
+        this.selectedRoute = new SelectionModel(true, []);
+        this.preventListSelect = false;
+        this.clearJobDetailsFromList = new EventEmitter();
+        this.preventDetailsClose = false;
+        this.messageLoader = false;
+        this.driverMessage = new FormControl('', [Validators.maxLength(256)]);
+        this.isSmsList = false;
+        this.driverList = [];
+    }
+    ngOnInit() {
+        this.utils.getpreVentJobdetailclose.subscribe(res => { this.preventDetailsClose = res; });
+        this.utils.removeMapEntityUtility.subscribe((res) => { this.passRoute(res); });
+    }
+    passRoute(job) {
+        this.data.forEach((each) => { if (each['route_id'] !== job['route_id']) {
+            each['isActive'] = false;
+        }
+        else {
+            each['isActive'] = true;
+        } });
+        if (this.type == 'addroute')
+            this.filterList.forEach(ele => this.coolMap.filterRoute(ele['route_id'], 'none'));
+    }
+    selectRoute(route) {
+        if (!this.preventListSelect) {
+            this.preventListSelect = true;
+            this.selectedRoute.toggle(route);
+            this.clearJobDetailsFromList.emit(true);
+            this.utils.preVentJobdetailclose.next(false);
+            this.filterList.forEach(ele => this.coolMap.filterRoute(ele['job_id'], 'none'));
+            this.clearList();
+            this.selectedRoute.selected.forEach((ele, index) => {
+                this.coolMap.filterRoute(ele['job_id'], 'visible', ((this.selectedRoute.selected.length - 1) === index)).then(() => {
+                    this.preventListSelect = false;
+                });
+            });
+            if (!this.selectedRoute.selected.length) {
+                this.preventListSelect = false;
+                this.data.forEach(ele => this.coolMap.filterRoute(ele['job_id'], 'visible'));
+            }
+            ;
+        }
+    }
+    checkroutes(route) {
+        const selectedRoute = this.selectedRoute.selected;
+        this.filterList = this.filterList.map(ele => { ele['isSelected'] = false; return ele; });
+        if (selectedRoute.length > 0) {
+            selectedRoute.forEach(ele => {
+                if (route['order_number'] === ele['order_number']) {
+                    ele['isSelected'] = true;
+                }
+            });
+        }
+        return route;
+    }
+    ngOnChanges(changes) {
+        setTimeout(() => {
+            if (this.currentNav === 'Addroute' && (this.data.length < this.filterList.length)) {
+                const index = this.filterList.findIndex(ele => ele.isActive);
+                if (index > 0)
+                    this.filterList[index].isActive = false;
+                this.data.forEach((ele, indexForData) => {
+                    const id = (ele['job_id'] ? ele['job_id'] : ele['route_id']);
+                    this.coolMap.plotRoute(ele, id, this.type, false, (indexForData === (this.data.length - 1))).then((res) => {
+                    });
+                });
+            }
+        }, 500);
+        if (changes['data'] && changes['data']['currentValue']) {
+            this.filterList = changes['data']['currentValue'];
+            if (this.searchTerm) {
+                if (this.searchTerm.length > 0) {
+                    this.data = this.utils.getSearchResults(changes['data']['currentValue'], this.searchTerm);
+                    this.filterList = this.data;
+                }
+                else {
+                    this.filterList = changes['data']['currentValue'];
+                }
+            }
+            if (this.type === 'jobcode') {
+                this.loader = true;
+                this.clearList();
+                if (this.filterList.length === 0)
+                    this.loader = false;
+            }
+            if (this.type !== 'jobcode') {
+                if (changes['data']['previousValue'] && this.currentNav === 'addForm') {
+                    const activeRoute = changes['data']['previousValue'].find((ele) => ele.isActive);
+                    if (activeRoute) {
+                        this.filterList.map((item) => {
+                            if (item.route_id === activeRoute.route_id) {
+                                item.isActive = true;
+                            }
+                        });
+                    }
+                }
+            }
+            if (changes['data']['previousValue'] && this.currentNav !== 'addForm') {
+                this.coolMap.removeJobFromMap(changes['data']['previousValue']);
+                this.selectedRoute.clear();
+            }
+            ;
+            if (this.currentNav !== 'addForm') {
+                changes['data']['currentValue'].forEach((ele, indexForData) => {
+                    const id = (ele['job_id'] ? ele['job_id'] : ele['route_id']);
+                    this.coolMap.plotRoute(ele, id, this.type, false, (indexForData === (this.data.length - 1))).then((res) => {
+                        if (indexForData === (this.data.length - 1)) {
+                            this.loader = false;
+                            this.utils.preventnavChange.next(true);
+                        }
+                    });
+                });
+            }
+        }
+        if (changes['searchTerm']) {
+            if (this.filterList) {
+                this.data = this.filterList;
+                this.clearList();
+                if (changes['searchTerm']['currentValue'].length > 0) {
+                    this.coolMap.removeRouteAndMarker(1);
+                    this.data = this.utils.getSearchResults(this.data, changes['searchTerm']['currentValue']);
+                }
+                else {
+                    this.data = this.filterList;
+                }
+                setTimeout(() => {
+                    this.coolMap.clearBoundWithCordinates();
+                    if (this.currentNav !== 'addForm' && !this.selectedRoute['selected'].length) {
+                        this.coolMap.removeRouteAndMarker(1);
+                        this.toggleFilterRoute(this.filterList);
+                    }
+                }, 500);
+                if (this.currentNav !== 'addForm' && this.selectedRoute['selected'].length) {
+                    if (this.data && this.data.length > 0) {
+                        this.clearList();
+                        this.clearJobDetailsFromList.emit(true);
+                        this.coolMap.removeJobFromMap(this.selectedRoute.selected);
+                        setTimeout(() => {
+                            this.data.forEach((ele, indexForData) => {
+                                this.coolMap.plotRoute(ele, ele['job_id'], this.type, false, (indexForData === (this.data.length - 1))).then(() => {
+                                    if (indexForData === (this.data.length - 1)) {
+                                        this.loader = false;
+                                        this.utils.preventnavChange.next(true);
+                                    }
+                                    if (this.selectedRoute['selected'].length && this.selectedRoute['selected'][0]['job_id'] === ele['job_id']) {
+                                        this.selectedRoute.clear();
+                                    }
+                                });
+                            });
+                        }, 500);
+                    }
+                }
+            }
+        }
+    }
+    showRoute() {
+        this.utils.preventnavChange.next(false);
+        this.loader = true;
+        this.clearList();
+        this.showAllRoute.emit(true);
+        if (this.filterList && this.filterList.length > 0) {
+            this.coolMap.removeJobFromMap(this.selectedRoute.selected);
+            setTimeout(() => {
+                this.filterList.forEach((ele, indexForData) => {
+                    this.coolMap.plotRoute(ele, ele['job_id'], this.type, false, (indexForData === this.filterList.length - 1)).then(() => {
+                        if (indexForData === this.filterList.length - 1) {
+                            this.loader = false;
+                            this.utils.preventnavChange.next(true);
+                        }
+                        if (this.selectedRoute['selected'].length && this.selectedRoute['selected'][0]['job_id'] === ele['job_id']) {
+                            this.selectedRoute.clear();
+                        }
+                    });
+                });
+            }, 500);
+        }
+    }
+    toggleDrivermenu(event) {
+        const mouseevntType = event.mouseevntType;
+        let route = event.route;
+        const isHoverOut = event.isHoverOut;
+        if (typeof (mouseevntType) === 'string') {
+            if (this.preventMouseout) {
+                this.isDriverList = !this.isDriverList;
+            }
+            ;
+            this.preventMouseout = true;
+        }
+        if (typeof (mouseevntType) === 'boolean' && !mouseevntType && !this.preventMouseout) {
+            this.isDriverList = mouseevntType;
+        }
+        ;
+        if (typeof (mouseevntType) === 'boolean' && mouseevntType && !this.preventMouseout) {
+            this.isDriverList = mouseevntType;
+        }
+        ;
+        if (this.preventMouseout && !this.isDriverList)
+            this.preventMouseout = false;
+        if (isHoverOut) {
+            if (this.preventMouseout) {
+                route = this.utils.getdictValue('driver-details');
+                this.driverList = route;
+            }
+            if (!this.preventMouseout) {
+                this.driverList = route;
+            }
+        }
+        else {
+            this.driverList = route;
+        }
+    }
+    visiblesection(value) { if (this.type === value) {
+        return true;
+    }
+    else
+        return false; }
+    toggleFilterRoute(filterList) {
+        filterList.forEach((ele) => {
+            const filterItem = (this.type === 'jobcode') ? 'job_id' : 'route_id';
+            const index = this.data.findIndex((ele1) => { return (ele1[`${filterItem}`] === ele[`${filterItem}`]); });
+            const id = (ele['job_id'] ? ele['job_id'] : ele['route_id']);
+            if (id && index < 0)
+                this.coolMap.filterRoute(id, 'none');
+            if (id && index >= 0) {
+                this.data[index].isActive = false;
+                this.coolMap.filterRoute(id, 'visible');
+                this.coolMap.extendBound(ele['path'], (index === (this.data.length - 1)));
+            }
+            ;
+        });
+    }
+    clearList() {
+        this.isDriverList = false;
+        this.driverList = null;
+        this.preventMouseout = false;
+        this.isSmsList = false;
+    }
+    sendMessage() {
+        this.messageLoader = true;
+        if (this.driverMessage.valid) {
+            const data = {
+                order_number: this.driverList['order_number'],
+                date: this.driverList['date'],
+                message: this.driverMessage.value,
+            };
+            this.utils.postdata('coolmap/jobs_report_chat', data).subscribe((res) => {
+                if (res['data']['status'] === 'Success.') {
+                    this.messageLoader = false;
+                    this.driverMessage.reset();
+                    this.utils.openSnackBar('Message Sent', 'success');
+                }
+                else {
+                    this.messageLoader = false;
+                    this.utils.openSnackBar('Message not sent', 'error');
+                }
+            }, err => { if (err) {
+                this.messageLoader = false;
+            } });
+        }
+    }
+}
+RouteJobCodeListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RouteJobCodeListComponent, deps: [{ token: i1.CoolmapService }, { token: i1.UtilsService }], target: i0.ɵɵFactoryTarget.Component });
+RouteJobCodeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: RouteJobCodeListComponent, selector: "app-route-jobcode-list", inputs: { loader: "loader", type: "type", data: "data", currentNav: "currentNav", searchTerm: "searchTerm", clearListSeletion: "clearListSeletion" }, outputs: { emitroute: "emitroute", showAllRoute: "showAllRoute", clearJobDetailsFromList: "clearJobDetailsFromList" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"scrollprt addroutelist\" [class.viewroute]=\"visiblesection('addroute')\"\r\n  [class.jobList]=\"visiblesection('jobcode')\">\r\n  <button (click)=\"showRoute()\" [disabled]=\"loader\" *ngIf=\"selectedRoute.selected.length\" class=\"show_routebtn\">Show all\r\n    route</button>\r\n  <perfect-scrollbar [class.jobscroll]=\"visiblesection('jobcode')\">\r\n    <mat-spinner *ngIf=\"loader\"></mat-spinner>\r\n    <ul *ngIf=\"!loader && data.length > 0\">\r\n      <li [class.active]=\"route['isActive'] && visiblesection('addroute')\" *ngFor=\"let route of data\">\r\n        <app-job-code-list-card *ngIf=\"visiblesection('jobcode')\" (toggleDrivermenu)=\"toggleDrivermenu($event)\"\r\n          (routeSeletion)=\"selectRoute($event)\" [preventCloseDetails]=\"preventDetailsClose\" [emitJobdetails]=\"{emitroute, clearJobDetailsFromList}\" [route]=\"checkroutes(route)\"></app-job-code-list-card>\r\n        <app-view-route-list-card [emitrouteevent]=\"emitroute\" *ngIf=\"visiblesection('addroute')\"\r\n          [route]=\"route\"></app-view-route-list-card>\r\n      </li>\r\n    </ul>\r\n    <p *ngIf=\"!loader && data.length === 0\">{{visiblesection('addroute') ? 'No Route found' : 'No Job code found.'}}</p>\r\n  </perfect-scrollbar>\r\n</div>\r\n\r\n<div class=\"driver_list\" *ngIf=\"isDriverList\">\r\n  <div class=\"driver_headingprt\">\r\n    <h2>Driver List</h2>\r\n    <button *ngIf=\"driverList.driver_list?.length > 0\" (click)=\"isSmsList = true\">SMS</button>\r\n    <div class=\"closebtn\" (click)=\"isDriverList = false; preventMouseout = false; isSmsList = false\">\r\n      <mat-icon>clear</mat-icon>\r\n    </div>\r\n  </div>\r\n  <ul class=\"driverList\" *ngIf=\"driverList && driverList.driver_list\">\r\n    <li *ngFor=\"let driver of driverList?.driver_list\">\r\n      <img src=\"assets/images/driver_icon.png\" [alt]=\"driver['driver_name']\" />\r\n      <div class=\"driver_detail\">\r\n        <b>{{driver['driver_name']}}</b> <span>{{driver['trucking_company']}}</span>\r\n        <div class=\"cont_del\">\r\n          <small>Driver contact: <b>{{driver['driver_phone'] ? driver['driver_phone'] : 'N/A'}}</b></small>\r\n          <small>Company contact: <b>{{driver['trucking_company_phone'] ? driver['trucking_company_phone'] : 'N/A'}}</b></small>\r\n        </div>\r\n      </div>\r\n    </li>\r\n    <p *ngIf=\"driverList.driver_list?.length === 0\" style=\"font-weight:700; text-align:center;\">\r\n      No Driver found\r\n    </p>\r\n  </ul>\r\n  <div class=\"smslist\" *ngIf=\"isSmsList\">\r\n    <div class=\"heading\">\r\n      <h2>SMS All Drivers</h2>\r\n      <div class=\"closebtn\" (click)=\"isSmsList = false\">\r\n        <mat-icon>clear</mat-icon>\r\n      </div>\r\n    </div>\r\n    <div class=\"detailprt\">\r\n      <app-sms-card-details-overview [jobValue]=\"driverList\"></app-sms-card-details-overview>\r\n      <div class=\"form_input\">\r\n        <mat-form-field class=\"example-full-width\">\r\n          <textarea matInput placeholder=\"Text here...\" autocomplete=\"nope\" column=\"10\"\r\n            [formControl]=\"driverMessage\"></textarea>\r\n          <mat-hint>{{driverMessage.value?.length}} / 256</mat-hint>\r\n        </mat-form-field>\r\n        <button *ngIf=\"!messageLoader\" [disabled]=\"!driverMessage.value || driverMessage.invalid\" (click)=\"sendMessage()\">\r\n          Send SMS\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div class=\"loader\">\r\n      <mat-spinner *ngIf=\"messageLoader\"></mat-spinner>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".driver_iconprt{position:absolute;right:10px;top:12px;z-index:9999}.driver_iconprt img{width:25px;height:25px}.driver_list{background:white;position:fixed;width:300px;top:10px;left:360px;border-top-left-radius:20px;border-top-right-radius:20px}.driver_list .driver_headingprt{display:flex;justify-content:space-between;align-items:center;padding:0 15px}.driver_list .driver_headingprt button{background:none;border:1px solid #ccc;border-radius:10px;padding:5px 20px}.driver_list .driver_headingprt button:hover{background:#326ad3;color:#fff}.driver_list h2{font-size:20px}.driver_list .driverList{height:300px;overflow:auto}.driver_list .driverList li{display:flex;padding:10px;align-items:flex-start;cursor:pointer;border-bottom:1px solid white;background:#eee}.driver_list .driverList li img{width:35px;height:35px;border-radius:100%;margin-right:10px}.driver_list .driverList li .driver_detail{width:calc(100% - 45px);display:flex;flex-direction:column;justify-content:flex-start}.driver_list .driverList li .driver_detail b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:135px;font-size:.9rem}.driver_list .driverList li .driver_detail span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;font-size:.8rem}.driver_list:after{height:10px;background:white;border-bottom-right-radius:20px;border-bottom-left-radius:20px;content:\"\";position:absolute;bottom:-9px;width:100%}.smslist{background:white;position:absolute;width:480px;top:0;left:105%;border-radius:20px;padding-bottom:20px}.smslist .heading{display:flex;justify-content:space-between;align-items:center;padding:0 15px}.smslist .detailprt{padding:0 15px}.smslist .detailprt span{display:flex;margin-bottom:12px;font-size:.8rem;align-items:center}.smslist .detailprt span label{font-weight:600;width:37%}.smslist .detailprt .form_input{display:flex;flex-direction:column;font-size:.8rem}.smslist .detailprt .form_input button{background:#326ad3;padding:10px 18px;color:#fff;font-size:.8125rem;border-radius:30px;display:flex;align-self:flex-end}.closebtn{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#f5f5f5}.show_routebtn{font-size:.9rem;margin-bottom:20px;padding:6px 11px;position:absolute;top:8px;right:10px;background-color:transparent;color:#3f51b5;border:1px solid #3f51b5;border-radius:10px;box-shadow:none}.show_routebtn:hover{background-color:#3f51b5;color:#fff}.cont_del{margin-top:10px}.cont_del small{display:block}.jobList ul{margin:0 15px 0 10px;width:100%}.jobList ul li{position:relative;background:#fbfbfb;padding:10px;border-radius:15px;margin-bottom:5px;border:1px solid #fbfbfb;border-left:3px solid #fbfbfb;cursor:pointer;height:inherit}@media (min-width: 2500px){.jobList ul li{height:7.65vh}}@media (min-width: 3300px){.jobList ul li{height:5.61vh}}.viewroute ul{margin:0 15px;width:100%}.viewroute ul li{position:relative;background:#fbfbfb;padding:7px 10px;border-radius:15px;margin-bottom:5px;border:1px solid #fbfbfb;border-left:3px solid #fbfbfb;cursor:pointer;height:16.4vh}@media (min-width: 1600px){.viewroute ul li{height:12.4vh}}.viewroute ul li.active{border:1px solid #39c471;border-left:3px solid #39c471}.loader{position:absolute;height:100%;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:center;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i7$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i8.PerfectScrollbarComponent, selector: "perfect-scrollbar", inputs: ["disabled", "usePSClass", "autoPropagation", "scrollIndicators", "config"], outputs: ["psScrollY", "psScrollX", "psScrollUp", "psScrollDown", "psScrollLeft", "psScrollRight", "psYReachEnd", "psYReachStart", "psXReachEnd", "psXReachStart"], exportAs: ["ngxPerfectScrollbar"] }, { kind: "component", type: ViewRouteListCardComponent, selector: "app-view-route-list-card", inputs: ["route", "emitrouteevent"] }, { kind: "component", type: SmsCardDetailsOverviewComponent, selector: "app-sms-card-details-overview", inputs: ["jobValue"] }, { kind: "component", type: JobCodeListCardComponent, selector: "app-job-code-list-card", inputs: ["route", "emitJobdetails", "preventCloseDetails"], outputs: ["routeSeletion", "toggleDrivermenu"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RouteJobCodeListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-route-jobcode-list', template: "<div class=\"scrollprt addroutelist\" [class.viewroute]=\"visiblesection('addroute')\"\r\n  [class.jobList]=\"visiblesection('jobcode')\">\r\n  <button (click)=\"showRoute()\" [disabled]=\"loader\" *ngIf=\"selectedRoute.selected.length\" class=\"show_routebtn\">Show all\r\n    route</button>\r\n  <perfect-scrollbar [class.jobscroll]=\"visiblesection('jobcode')\">\r\n    <mat-spinner *ngIf=\"loader\"></mat-spinner>\r\n    <ul *ngIf=\"!loader && data.length > 0\">\r\n      <li [class.active]=\"route['isActive'] && visiblesection('addroute')\" *ngFor=\"let route of data\">\r\n        <app-job-code-list-card *ngIf=\"visiblesection('jobcode')\" (toggleDrivermenu)=\"toggleDrivermenu($event)\"\r\n          (routeSeletion)=\"selectRoute($event)\" [preventCloseDetails]=\"preventDetailsClose\" [emitJobdetails]=\"{emitroute, clearJobDetailsFromList}\" [route]=\"checkroutes(route)\"></app-job-code-list-card>\r\n        <app-view-route-list-card [emitrouteevent]=\"emitroute\" *ngIf=\"visiblesection('addroute')\"\r\n          [route]=\"route\"></app-view-route-list-card>\r\n      </li>\r\n    </ul>\r\n    <p *ngIf=\"!loader && data.length === 0\">{{visiblesection('addroute') ? 'No Route found' : 'No Job code found.'}}</p>\r\n  </perfect-scrollbar>\r\n</div>\r\n\r\n<div class=\"driver_list\" *ngIf=\"isDriverList\">\r\n  <div class=\"driver_headingprt\">\r\n    <h2>Driver List</h2>\r\n    <button *ngIf=\"driverList.driver_list?.length > 0\" (click)=\"isSmsList = true\">SMS</button>\r\n    <div class=\"closebtn\" (click)=\"isDriverList = false; preventMouseout = false; isSmsList = false\">\r\n      <mat-icon>clear</mat-icon>\r\n    </div>\r\n  </div>\r\n  <ul class=\"driverList\" *ngIf=\"driverList && driverList.driver_list\">\r\n    <li *ngFor=\"let driver of driverList?.driver_list\">\r\n      <img src=\"assets/images/driver_icon.png\" [alt]=\"driver['driver_name']\" />\r\n      <div class=\"driver_detail\">\r\n        <b>{{driver['driver_name']}}</b> <span>{{driver['trucking_company']}}</span>\r\n        <div class=\"cont_del\">\r\n          <small>Driver contact: <b>{{driver['driver_phone'] ? driver['driver_phone'] : 'N/A'}}</b></small>\r\n          <small>Company contact: <b>{{driver['trucking_company_phone'] ? driver['trucking_company_phone'] : 'N/A'}}</b></small>\r\n        </div>\r\n      </div>\r\n    </li>\r\n    <p *ngIf=\"driverList.driver_list?.length === 0\" style=\"font-weight:700; text-align:center;\">\r\n      No Driver found\r\n    </p>\r\n  </ul>\r\n  <div class=\"smslist\" *ngIf=\"isSmsList\">\r\n    <div class=\"heading\">\r\n      <h2>SMS All Drivers</h2>\r\n      <div class=\"closebtn\" (click)=\"isSmsList = false\">\r\n        <mat-icon>clear</mat-icon>\r\n      </div>\r\n    </div>\r\n    <div class=\"detailprt\">\r\n      <app-sms-card-details-overview [jobValue]=\"driverList\"></app-sms-card-details-overview>\r\n      <div class=\"form_input\">\r\n        <mat-form-field class=\"example-full-width\">\r\n          <textarea matInput placeholder=\"Text here...\" autocomplete=\"nope\" column=\"10\"\r\n            [formControl]=\"driverMessage\"></textarea>\r\n          <mat-hint>{{driverMessage.value?.length}} / 256</mat-hint>\r\n        </mat-form-field>\r\n        <button *ngIf=\"!messageLoader\" [disabled]=\"!driverMessage.value || driverMessage.invalid\" (click)=\"sendMessage()\">\r\n          Send SMS\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div class=\"loader\">\r\n      <mat-spinner *ngIf=\"messageLoader\"></mat-spinner>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".driver_iconprt{position:absolute;right:10px;top:12px;z-index:9999}.driver_iconprt img{width:25px;height:25px}.driver_list{background:white;position:fixed;width:300px;top:10px;left:360px;border-top-left-radius:20px;border-top-right-radius:20px}.driver_list .driver_headingprt{display:flex;justify-content:space-between;align-items:center;padding:0 15px}.driver_list .driver_headingprt button{background:none;border:1px solid #ccc;border-radius:10px;padding:5px 20px}.driver_list .driver_headingprt button:hover{background:#326ad3;color:#fff}.driver_list h2{font-size:20px}.driver_list .driverList{height:300px;overflow:auto}.driver_list .driverList li{display:flex;padding:10px;align-items:flex-start;cursor:pointer;border-bottom:1px solid white;background:#eee}.driver_list .driverList li img{width:35px;height:35px;border-radius:100%;margin-right:10px}.driver_list .driverList li .driver_detail{width:calc(100% - 45px);display:flex;flex-direction:column;justify-content:flex-start}.driver_list .driverList li .driver_detail b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:135px;font-size:.9rem}.driver_list .driverList li .driver_detail span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;font-size:.8rem}.driver_list:after{height:10px;background:white;border-bottom-right-radius:20px;border-bottom-left-radius:20px;content:\"\";position:absolute;bottom:-9px;width:100%}.smslist{background:white;position:absolute;width:480px;top:0;left:105%;border-radius:20px;padding-bottom:20px}.smslist .heading{display:flex;justify-content:space-between;align-items:center;padding:0 15px}.smslist .detailprt{padding:0 15px}.smslist .detailprt span{display:flex;margin-bottom:12px;font-size:.8rem;align-items:center}.smslist .detailprt span label{font-weight:600;width:37%}.smslist .detailprt .form_input{display:flex;flex-direction:column;font-size:.8rem}.smslist .detailprt .form_input button{background:#326ad3;padding:10px 18px;color:#fff;font-size:.8125rem;border-radius:30px;display:flex;align-self:flex-end}.closebtn{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#f5f5f5}.show_routebtn{font-size:.9rem;margin-bottom:20px;padding:6px 11px;position:absolute;top:8px;right:10px;background-color:transparent;color:#3f51b5;border:1px solid #3f51b5;border-radius:10px;box-shadow:none}.show_routebtn:hover{background-color:#3f51b5;color:#fff}.cont_del{margin-top:10px}.cont_del small{display:block}.jobList ul{margin:0 15px 0 10px;width:100%}.jobList ul li{position:relative;background:#fbfbfb;padding:10px;border-radius:15px;margin-bottom:5px;border:1px solid #fbfbfb;border-left:3px solid #fbfbfb;cursor:pointer;height:inherit}@media (min-width: 2500px){.jobList ul li{height:7.65vh}}@media (min-width: 3300px){.jobList ul li{height:5.61vh}}.viewroute ul{margin:0 15px;width:100%}.viewroute ul li{position:relative;background:#fbfbfb;padding:7px 10px;border-radius:15px;margin-bottom:5px;border:1px solid #fbfbfb;border-left:3px solid #fbfbfb;cursor:pointer;height:16.4vh}@media (min-width: 1600px){.viewroute ul li{height:12.4vh}}.viewroute ul li.active{border:1px solid #39c471;border-left:3px solid #39c471}.loader{position:absolute;height:100%;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:center;pointer-events:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.CoolmapService }, { type: i1.UtilsService }]; }, propDecorators: { loader: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], currentNav: [{
+                type: Input
+            }], emitroute: [{
+                type: Output
+            }], showAllRoute: [{
+                type: Output
+            }], searchTerm: [{
+                type: Input
+            }], clearJobDetailsFromList: [{
+                type: Output
+            }], clearListSeletion: [{
+                type: Input
             }] } });
 
-class AddRouteNavComponent {
-    constructor(utils) {
-        this.utils = utils;
-        this.filterForm = new FormGroup({ search: new FormControl() });
-        this.filters = [];
-        this.loaderVal = false;
-        this.routes = [];
-        this.changeNav = new EventEmitter();
-        this.navValue = '';
-        this.addemit = new EventEmitter();
-        this.updateRouteList = false;
-        this.destroyer$ = new Subject();
-        this.preventListUpdate = false;
-        this.filteredOptions = this.filterForm.get('search')?.valueChanges.pipe(startWith(''), map(value => this.utils.filter(value, this.filters)));
-    }
-    showAddForm() { this.changeNav.emit('addForm'); this.addemit.emit(''); }
-    filterSearch(e) {
-        this.changeNav.emit({ type: 'Addroute' });
-        this.preventListUpdate = true;
-        this.filterForm.controls.search.setValue(null);
-        this.filters = [{ name: e.source.value.label, type: e.source.value.type, value: e.source.value }];
-    }
-    removeFromFilter(filter) {
-        this.changeNav.emit({ type: 'Addroute' });
-        const index = this.filters.indexOf(filter);
-        if (index >= 0) {
-            this.filters = [];
-        }
-    }
-    ngAfterViewInit() { this.getRouteList(); }
-    ngOnChanges(changes) {
-        if (changes['updateRouteList'] && changes['updateRouteList']['currentValue'])
-            this.getRouteList();
-        if (changes['navValue'] && (changes['navValue']['previousValue'] === 'addForm') && !this.preventListUpdate)
-            this.getRouteList();
-    }
-    getRoute(event) { if (event['type'] === 'editroute') {
-        this.addemit.emit(event);
-    } }
-    getRouteList() {
-        this.utils.getData('coolmap/routes/all').pipe(takeUntil(this.destroyer$)).subscribe((res) => {
-            if (res) {
-                this.filters = [];
-                this.routes = res['data'];
-                this.preventListUpdate = false;
-                this.utils.clearOptions();
-                this.routes.forEach((ele) => { this.utils.makeOptions(ele); });
-            }
-        });
-    }
-    resetSearch() { this.changeNav.emit('Addroute'); }
-    ngOnDestroy() {
-        this.destroyer$.next(true);
-        this.destroyer$.unsubscribe();
-    }
-}
-AddRouteNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AddRouteNavComponent, deps: [{ token: i1.UtilsService }], target: i0.ɵɵFactoryTarget.Component });
-AddRouteNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AddRouteNavComponent, selector: "app-add-route-nav", inputs: { navValue: "navValue", updateRouteList: "updateRouteList" }, outputs: { changeNav: "changeNav", addemit: "addemit" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"nav_body\">\n  <div class=\"logo\">\n    <img src=\"assets/images/logo.png\" alt=\"logo\" />\n  </div>\n  <div class=\"heading m-20\">\n    <h1>View Route</h1>\n    <button mat-raised-button color=\"primary\" (click)=\"showAddForm()\">\n      <mat-icon>add_circle_outline</mat-icon> Add route\n    </button>\n  </div>\n\n  <div class=\"search-panel\">\n    <div class=\"w-100\">\n      <form [formGroup]=\"filterForm\">\n        <mat-form-field class=\"full-width\" [class.disabled]=\"loaderVal\">\n          <input matInput [matChipInputFor]=\"chipList\" formControlName=\"search\" [matAutocomplete]=\"auto\"\n            [disabled]=\"loaderVal\" placeholder=\"Search\">\n          <mat-icon matSuffix *ngIf=\"!utils.conveySearchIcon(filterForm.value.search)\">search</mat-icon>\n          <button mat-button matSuffix mat-icon-button aria-label=\"Clear\" *ngIf=\"utils.conveySearchIcon(filterForm.value.search)\"\n            (click)=\"filterForm.reset()\">\n            <mat-icon>close</mat-icon>\n          </button>\n          <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\n            <mat-option *ngFor=\"let option of filteredOptions | async\" (onSelectionChange)=\"filterSearch($event)\"\n              [value]=\"option\">\n              {{option.type | titlecase }}: {{option['label']}}\n            </mat-option>\n          </mat-autocomplete>\n        </mat-form-field>\n      </form>\n      <div class=\"chip-list\">\n        <mat-chip-list #chipList aria-label=\"Filter selection\">\n          <mat-chip *ngFor=\"let filter of filters\" (removed)=\"removeFromFilter(filter)\">\n            {{filter.type | titlecase }}: {{filter.name}}\n            <button matChipRemove>\n              <mat-icon>cancel</mat-icon>\n            </button>\n          </mat-chip>\n        </mat-chip-list>\n      </div>\n    </div>\n  </div>\n  <app-route-jobcode-list [type]=\"'addroute'\" [currentNav]=\"navValue\" [searchTerm]=\"filters\" [data]=\"routes\" [loader]=\"loaderVal\" (emitroute)=\"getRoute($event)\"></app-route-jobcode-list>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i9.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i9.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i9.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i9.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i10.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: RouteJobCodeListComponent, selector: "app-route-jobcode-list", inputs: ["loader", "type", "data", "currentNav", "searchTerm", "clearListSeletion"], outputs: ["emitroute", "showAllRoute", "clearJobDetailsFromList"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AddRouteNavComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-add-route-nav', template: "<div class=\"nav_body\">\n  <div class=\"logo\">\n    <img src=\"assets/images/logo.png\" alt=\"logo\" />\n  </div>\n  <div class=\"heading m-20\">\n    <h1>View Route</h1>\n    <button mat-raised-button color=\"primary\" (click)=\"showAddForm()\">\n      <mat-icon>add_circle_outline</mat-icon> Add route\n    </button>\n  </div>\n\n  <div class=\"search-panel\">\n    <div class=\"w-100\">\n      <form [formGroup]=\"filterForm\">\n        <mat-form-field class=\"full-width\" [class.disabled]=\"loaderVal\">\n          <input matInput [matChipInputFor]=\"chipList\" formControlName=\"search\" [matAutocomplete]=\"auto\"\n            [disabled]=\"loaderVal\" placeholder=\"Search\">\n          <mat-icon matSuffix *ngIf=\"!utils.conveySearchIcon(filterForm.value.search)\">search</mat-icon>\n          <button mat-button matSuffix mat-icon-button aria-label=\"Clear\" *ngIf=\"utils.conveySearchIcon(filterForm.value.search)\"\n            (click)=\"filterForm.reset()\">\n            <mat-icon>close</mat-icon>\n          </button>\n          <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\n            <mat-option *ngFor=\"let option of filteredOptions | async\" (onSelectionChange)=\"filterSearch($event)\"\n              [value]=\"option\">\n              {{option.type | titlecase }}: {{option['label']}}\n            </mat-option>\n          </mat-autocomplete>\n        </mat-form-field>\n      </form>\n      <div class=\"chip-list\">\n        <mat-chip-list #chipList aria-label=\"Filter selection\">\n          <mat-chip *ngFor=\"let filter of filters\" (removed)=\"removeFromFilter(filter)\">\n            {{filter.type | titlecase }}: {{filter.name}}\n            <button matChipRemove>\n              <mat-icon>cancel</mat-icon>\n            </button>\n          </mat-chip>\n        </mat-chip-list>\n      </div>\n    </div>\n  </div>\n  <app-route-jobcode-list [type]=\"'addroute'\" [currentNav]=\"navValue\" [searchTerm]=\"filters\" [data]=\"routes\" [loader]=\"loaderVal\" (emitroute)=\"getRoute($event)\"></app-route-jobcode-list>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.UtilsService }]; }, propDecorators: { changeNav: [{
-                type: Output
-            }], navValue: [{
-                type: Input
-            }], addemit: [{
-                type: Output
-            }], updateRouteList: [{
-                type: Input
+class AddRouteNavComponent {
+    constructor(utils) {
+        this.utils = utils;
+        this.filterForm = new FormGroup({ search: new FormControl() });
+        this.filters = [];
+        this.loaderVal = false;
+        this.routes = [];
+        this.changeNav = new EventEmitter();
+        this.navValue = '';
+        this.addemit = new EventEmitter();
+        this.updateRouteList = false;
+        this.destroyer$ = new Subject();
+        this.preventListUpdate = false;
+        this.filteredOptions = this.filterForm.get('search')?.valueChanges.pipe(startWith(''), map(value => this.utils.filter(value, this.filters)));
+    }
+    showAddForm() { this.changeNav.emit('addForm'); this.addemit.emit(''); }
+    filterSearch(e) {
+        this.changeNav.emit({ type: 'Addroute' });
+        this.preventListUpdate = true;
+        this.filterForm.controls.search.setValue(null);
+        this.filters = [{ name: e.source.value.label, type: e.source.value.type, value: e.source.value }];
+    }
+    removeFromFilter(filter) {
+        this.changeNav.emit({ type: 'Addroute' });
+        const index = this.filters.indexOf(filter);
+        if (index >= 0) {
+            this.filters = [];
+        }
+    }
+    ngAfterViewInit() { this.getRouteList(); }
+    ngOnChanges(changes) {
+        if (changes['updateRouteList'] && changes['updateRouteList']['currentValue'])
+            this.getRouteList();
+        if (changes['navValue'] && (changes['navValue']['previousValue'] === 'addForm') && !this.preventListUpdate)
+            this.getRouteList();
+    }
+    getRoute(event) { if (event['type'] === 'editroute') {
+        this.addemit.emit(event);
+    } }
+    getRouteList() {
+        this.utils.getData('coolmap/routes/all').pipe(takeUntil(this.destroyer$)).subscribe((res) => {
+            if (res) {
+                this.filters = [];
+                this.routes = res['data'];
+                this.preventListUpdate = false;
+                this.utils.clearOptions();
+                this.routes.forEach((ele) => { this.utils.makeOptions(ele); });
+            }
+        });
+    }
+    resetSearch() { this.changeNav.emit('Addroute'); }
+    ngOnDestroy() {
+        this.destroyer$.next(true);
+        this.destroyer$.unsubscribe();
+    }
+}
+AddRouteNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AddRouteNavComponent, deps: [{ token: i1.UtilsService }], target: i0.ɵɵFactoryTarget.Component });
+AddRouteNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: AddRouteNavComponent, selector: "app-add-route-nav", inputs: { navValue: "navValue", updateRouteList: "updateRouteList" }, outputs: { changeNav: "changeNav", addemit: "addemit" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"nav_body\">\r\n  <div class=\"logo\">\r\n    <img src=\"assets/images/logo.png\" alt=\"logo\" />\r\n  </div>\r\n  <div class=\"heading m-20\">\r\n    <h1>View Route</h1>\r\n    <button mat-raised-button color=\"primary\" (click)=\"showAddForm()\">\r\n      <mat-icon>add_circle_outline</mat-icon> Add route\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"search-panel\">\r\n    <div class=\"w-100\">\r\n      <form [formGroup]=\"filterForm\">\r\n        <mat-form-field class=\"full-width\" [class.disabled]=\"loaderVal\">\r\n          <input matInput [matChipInputFor]=\"chipList\" formControlName=\"search\" [matAutocomplete]=\"auto\"\r\n            [disabled]=\"loaderVal\" placeholder=\"Search\">\r\n          <mat-icon matSuffix *ngIf=\"!utils.conveySearchIcon(filterForm.value.search)\">search</mat-icon>\r\n          <button mat-button matSuffix mat-icon-button aria-label=\"Clear\" *ngIf=\"utils.conveySearchIcon(filterForm.value.search)\"\r\n            (click)=\"filterForm.reset()\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n          <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n            <mat-option *ngFor=\"let option of filteredOptions | async\" (onSelectionChange)=\"filterSearch($event)\"\r\n              [value]=\"option\">\r\n              {{option.type | titlecase }}: {{option['label']}}\r\n            </mat-option>\r\n          </mat-autocomplete>\r\n        </mat-form-field>\r\n      </form>\r\n      <div class=\"chip-list\">\r\n        <mat-chip-list #chipList aria-label=\"Filter selection\">\r\n          <mat-chip *ngFor=\"let filter of filters\" (removed)=\"removeFromFilter(filter)\">\r\n            {{filter.type | titlecase }}: {{filter.name}}\r\n            <button matChipRemove>\r\n              <mat-icon>cancel</mat-icon>\r\n            </button>\r\n          </mat-chip>\r\n        </mat-chip-list>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <app-route-jobcode-list [type]=\"'addroute'\" [currentNav]=\"navValue\" [searchTerm]=\"filters\" [data]=\"routes\" [loader]=\"loaderVal\" (emitroute)=\"getRoute($event)\"></app-route-jobcode-list>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i9.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i9.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i9.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i9.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i10.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: RouteJobCodeListComponent, selector: "app-route-jobcode-list", inputs: ["loader", "type", "data", "currentNav", "searchTerm", "clearListSeletion"], outputs: ["emitroute", "showAllRoute", "clearJobDetailsFromList"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AddRouteNavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-add-route-nav', template: "<div class=\"nav_body\">\r\n  <div class=\"logo\">\r\n    <img src=\"assets/images/logo.png\" alt=\"logo\" />\r\n  </div>\r\n  <div class=\"heading m-20\">\r\n    <h1>View Route</h1>\r\n    <button mat-raised-button color=\"primary\" (click)=\"showAddForm()\">\r\n      <mat-icon>add_circle_outline</mat-icon> Add route\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"search-panel\">\r\n    <div class=\"w-100\">\r\n      <form [formGroup]=\"filterForm\">\r\n        <mat-form-field class=\"full-width\" [class.disabled]=\"loaderVal\">\r\n          <input matInput [matChipInputFor]=\"chipList\" formControlName=\"search\" [matAutocomplete]=\"auto\"\r\n            [disabled]=\"loaderVal\" placeholder=\"Search\">\r\n          <mat-icon matSuffix *ngIf=\"!utils.conveySearchIcon(filterForm.value.search)\">search</mat-icon>\r\n          <button mat-button matSuffix mat-icon-button aria-label=\"Clear\" *ngIf=\"utils.conveySearchIcon(filterForm.value.search)\"\r\n            (click)=\"filterForm.reset()\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n          <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n            <mat-option *ngFor=\"let option of filteredOptions | async\" (onSelectionChange)=\"filterSearch($event)\"\r\n              [value]=\"option\">\r\n              {{option.type | titlecase }}: {{option['label']}}\r\n            </mat-option>\r\n          </mat-autocomplete>\r\n        </mat-form-field>\r\n      </form>\r\n      <div class=\"chip-list\">\r\n        <mat-chip-list #chipList aria-label=\"Filter selection\">\r\n          <mat-chip *ngFor=\"let filter of filters\" (removed)=\"removeFromFilter(filter)\">\r\n            {{filter.type | titlecase }}: {{filter.name}}\r\n            <button matChipRemove>\r\n              <mat-icon>cancel</mat-icon>\r\n            </button>\r\n          </mat-chip>\r\n        </mat-chip-list>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <app-route-jobcode-list [type]=\"'addroute'\" [currentNav]=\"navValue\" [searchTerm]=\"filters\" [data]=\"routes\" [loader]=\"loaderVal\" (emitroute)=\"getRoute($event)\"></app-route-jobcode-list>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i1.UtilsService }]; }, propDecorators: { changeNav: [{
+                type: Output
+            }], navValue: [{
+                type: Input
+            }], addemit: [{
+                type: Output
+            }], updateRouteList: [{
+                type: Input
             }] } });
 
-class JobCodeNavComponent {
-    constructor(utils) {
-        this.utils = utils;
-        this.filterForm = new FormGroup({ search: new FormControl() });
-        this.listData = [];
-        this.loaderVal = false;
-        this.dateValue = new Date();
-        this.jobemit = new EventEmitter();
-        this.value = '';
-        this.filters = [];
-        this.clearJobDetails = new EventEmitter();
-        this.destroyer$ = new Subject();
-        utils.navChangeObserve.pipe(takeUntil(this.destroyer$)).subscribe(res => {
-            if (res) {
-                this.loaderVal = false;
-            }
-            else
-                this.loaderVal = true;
-        });
-    }
-    ngOnInit() { this.loadData(this.utils.getDateFormat(new Date())); }
-    loadData(value) {
-        this.filteredOptions = this.filterForm.get('search')?.valueChanges.pipe(startWith(''), map(value => this.utils.filter(value, this.filters)));
-        this.utils.preventnavChange.next(false);
-        this.loaderVal = true;
-        this.utils.postdata('coolmap/jobs_report_v2', { date: value }).pipe(takeUntil(this.destroyer$)).subscribe((res) => {
-            if (typeof res['data'] !== 'string') {
-                if (res['data'].length > 0)
-                    this.listData = res['data'].map((ele) => { ele['date'] = value; return ele; });
-                this.listData.forEach((ele) => { this.utils.makeOptions(ele); });
-            }
-            else
-                this.listData = [];
-            this.clearJobDetails.emit(true);
-            this.utils.clearViewRouteforJobCode.next(true);
-            this.filters = [];
-            if (typeof res['data'] === 'string')
-                this.utils.preventnavChange.next(true);
-        }, (err) => { if (err)
-            this.utils.preventnavChange.next(true); });
-    }
-    getRoute(job) { if (job['type'] === 'jobcode') {
-        this.jobemit.emit(job);
-    } }
-    getDate(ev) { this.loadData(this.utils.getDateFormat(ev.value)); }
-    filterSearch(e) {
-        this.filterForm.controls.search.setValue(null);
-        this.filterForm.controls.search.updateValueAndValidity();
-        this.filters = [{ name: e.source.value.label, type: e.source.value.type, value: e.source.value }];
-    }
-    removeFromFilter(filter) {
-        const index = this.filters.indexOf(filter);
-        if (index >= 0) {
-            this.filters = [];
-        }
-    }
-    ngOnDestroy() {
-        this.destroyer$.next(true);
-        this.destroyer$.unsubscribe();
-    }
-}
-JobCodeNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JobCodeNavComponent, deps: [{ token: i1.UtilsService }], target: i0.ɵɵFactoryTarget.Component });
-JobCodeNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: JobCodeNavComponent, selector: "app-job-code-nav", outputs: { jobemit: "jobemit", clearJobDetails: "clearJobDetails" }, ngImport: i0, template: "<div class=\"nav_body\">\n  <div class=\"search-panel\">\n    <div class=\"datepicker\">\n      <mat-form-field>\n        <mat-label>Choose a date</mat-label>\n        <input readonly matInput (click)=\"picker.open()\" [disabled]=\"loaderVal\"  [(ngModel)]=\"dateValue\" [matDatepicker]=\"picker\" (dateChange)=\"getDate($event)\">\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-datepicker #picker></mat-datepicker>\n      </mat-form-field>\n    </div>\n    <div class=\"search\">\n    <form [formGroup]=\"filterForm\">\n      <mat-form-field class=\"full-width\" [class.disabled]=\"loaderVal\">\n        <input matInput [matChipInputFor]=\"chipList\" formControlName=\"search\" [matAutocomplete]=\"auto\"\n          [disabled]=\"loaderVal\" placeholder=\"Search\">\n          <mat-icon matSuffix *ngIf=\"!utils.conveySearchIcon(filterForm.value.search)\">search</mat-icon>\n          <button mat-button matSuffix mat-icon-button aria-label=\"Clear\" *ngIf=\"utils.conveySearchIcon(filterForm.value.search)\" (click)=\"filterForm.reset()\">\n            <mat-icon>close</mat-icon>\n          </button>\n        <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\n          <mat-option *ngFor=\"let option of filteredOptions | async\" (onSelectionChange)=\"filterSearch($event)\"\n            [value]=\"option\">\n            {{option.type | titlecase }}: {{option['label']}}\n          </mat-option>\n        </mat-autocomplete>\n      </mat-form-field>\n    </form>\n\n    </div>\n\n    <div class=\"chip-list\">\n      <mat-chip-list #chipList aria-label=\"Filter selection\">\n        <mat-chip *ngFor=\"let filter of filters\" (removed)=\"removeFromFilter(filter)\">\n          {{filter.type | titlecase }}: {{filter.name}}\n          <button matChipRemove>\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </mat-chip>\n      </mat-chip-list>\n    </div>\n  </div>\n  <app-route-jobcode-list [type]=\"'jobcode'\" [searchTerm]=\"filters\" [data]=\"listData\" [loader]=\"loaderVal\" (clearJobDetailsFromList)=\"clearJobDetails.emit(true)\" (showAllRoute)=\"filters = []; clearJobDetails.emit(true)\" (emitroute)=\"getRoute($event)\"></app-route-jobcode-list>\n</div>\n", styles: [".search-panel .datepicker,.search-panel .search{width:47%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i9.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i9.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i9.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i9.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i10$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i10.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: RouteJobCodeListComponent, selector: "app-route-jobcode-list", inputs: ["loader", "type", "data", "currentNav", "searchTerm", "clearListSeletion"], outputs: ["emitroute", "showAllRoute", "clearJobDetailsFromList"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JobCodeNavComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-job-code-nav', template: "<div class=\"nav_body\">\n  <div class=\"search-panel\">\n    <div class=\"datepicker\">\n      <mat-form-field>\n        <mat-label>Choose a date</mat-label>\n        <input readonly matInput (click)=\"picker.open()\" [disabled]=\"loaderVal\"  [(ngModel)]=\"dateValue\" [matDatepicker]=\"picker\" (dateChange)=\"getDate($event)\">\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-datepicker #picker></mat-datepicker>\n      </mat-form-field>\n    </div>\n    <div class=\"search\">\n    <form [formGroup]=\"filterForm\">\n      <mat-form-field class=\"full-width\" [class.disabled]=\"loaderVal\">\n        <input matInput [matChipInputFor]=\"chipList\" formControlName=\"search\" [matAutocomplete]=\"auto\"\n          [disabled]=\"loaderVal\" placeholder=\"Search\">\n          <mat-icon matSuffix *ngIf=\"!utils.conveySearchIcon(filterForm.value.search)\">search</mat-icon>\n          <button mat-button matSuffix mat-icon-button aria-label=\"Clear\" *ngIf=\"utils.conveySearchIcon(filterForm.value.search)\" (click)=\"filterForm.reset()\">\n            <mat-icon>close</mat-icon>\n          </button>\n        <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\n          <mat-option *ngFor=\"let option of filteredOptions | async\" (onSelectionChange)=\"filterSearch($event)\"\n            [value]=\"option\">\n            {{option.type | titlecase }}: {{option['label']}}\n          </mat-option>\n        </mat-autocomplete>\n      </mat-form-field>\n    </form>\n\n    </div>\n\n    <div class=\"chip-list\">\n      <mat-chip-list #chipList aria-label=\"Filter selection\">\n        <mat-chip *ngFor=\"let filter of filters\" (removed)=\"removeFromFilter(filter)\">\n          {{filter.type | titlecase }}: {{filter.name}}\n          <button matChipRemove>\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </mat-chip>\n      </mat-chip-list>\n    </div>\n  </div>\n  <app-route-jobcode-list [type]=\"'jobcode'\" [searchTerm]=\"filters\" [data]=\"listData\" [loader]=\"loaderVal\" (clearJobDetailsFromList)=\"clearJobDetails.emit(true)\" (showAllRoute)=\"filters = []; clearJobDetails.emit(true)\" (emitroute)=\"getRoute($event)\"></app-route-jobcode-list>\n</div>\n", styles: [".search-panel .datepicker,.search-panel .search{width:47%}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.UtilsService }]; }, propDecorators: { jobemit: [{
-                type: Output
-            }], clearJobDetails: [{
-                type: Output
+class JobCodeNavComponent {
+    constructor(utils) {
+        this.utils = utils;
+        this.filterForm = new FormGroup({ search: new FormControl() });
+        this.listData = [];
+        this.loaderVal = false;
+        this.dateValue = new Date();
+        this.jobemit = new EventEmitter();
+        this.value = '';
+        this.filters = [];
+        this.clearJobDetails = new EventEmitter();
+        this.destroyer$ = new Subject();
+        utils.navChangeObserve.pipe(takeUntil(this.destroyer$)).subscribe(res => {
+            if (res) {
+                this.loaderVal = false;
+            }
+            else
+                this.loaderVal = true;
+        });
+    }
+    ngOnInit() { this.loadData(this.utils.getDateFormat(new Date())); }
+    loadData(value) {
+        this.filteredOptions = this.filterForm.get('search')?.valueChanges.pipe(startWith(''), map(value => this.utils.filter(value, this.filters)));
+        this.utils.preventnavChange.next(false);
+        this.loaderVal = true;
+        this.utils.postdata('coolmap/jobs_report_v2', { date: value }).pipe(takeUntil(this.destroyer$)).subscribe((res) => {
+            if (typeof res['data'] !== 'string') {
+                if (res['data'].length > 0)
+                    this.listData = res['data'].map((ele) => { ele['date'] = value; return ele; });
+                this.listData.forEach((ele) => { this.utils.makeOptions(ele); });
+            }
+            else
+                this.listData = [];
+            this.clearJobDetails.emit(true);
+            this.utils.clearViewRouteforJobCode.next(true);
+            this.filters = [];
+            if (typeof res['data'] === 'string')
+                this.utils.preventnavChange.next(true);
+        }, (err) => { if (err)
+            this.utils.preventnavChange.next(true); });
+    }
+    getRoute(job) { if (job['type'] === 'jobcode') {
+        this.jobemit.emit(job);
+    } }
+    getDate(ev) { this.loadData(this.utils.getDateFormat(ev.value)); }
+    filterSearch(e) {
+        this.filterForm.controls.search.setValue(null);
+        this.filterForm.controls.search.updateValueAndValidity();
+        this.filters = [{ name: e.source.value.label, type: e.source.value.type, value: e.source.value }];
+    }
+    removeFromFilter(filter) {
+        const index = this.filters.indexOf(filter);
+        if (index >= 0) {
+            this.filters = [];
+        }
+    }
+    ngOnDestroy() {
+        this.destroyer$.next(true);
+        this.destroyer$.unsubscribe();
+    }
+}
+JobCodeNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: JobCodeNavComponent, deps: [{ token: i1.UtilsService }], target: i0.ɵɵFactoryTarget.Component });
+JobCodeNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: JobCodeNavComponent, selector: "app-job-code-nav", outputs: { jobemit: "jobemit", clearJobDetails: "clearJobDetails" }, ngImport: i0, template: "<div class=\"nav_body\">\r\n  <div class=\"search-panel\">\r\n    <div class=\"datepicker\">\r\n      <mat-form-field>\r\n        <mat-label>Choose a date</mat-label>\r\n        <input readonly matInput (click)=\"picker.open()\" [disabled]=\"loaderVal\"  [(ngModel)]=\"dateValue\" [matDatepicker]=\"picker\" (dateChange)=\"getDate($event)\">\r\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n        <mat-datepicker #picker></mat-datepicker>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"search\">\r\n    <form [formGroup]=\"filterForm\">\r\n      <mat-form-field class=\"full-width\" [class.disabled]=\"loaderVal\">\r\n        <input matInput [matChipInputFor]=\"chipList\" formControlName=\"search\" [matAutocomplete]=\"auto\"\r\n          [disabled]=\"loaderVal\" placeholder=\"Search\">\r\n          <mat-icon matSuffix *ngIf=\"!utils.conveySearchIcon(filterForm.value.search)\">search</mat-icon>\r\n          <button mat-button matSuffix mat-icon-button aria-label=\"Clear\" *ngIf=\"utils.conveySearchIcon(filterForm.value.search)\" (click)=\"filterForm.reset()\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n          <mat-option *ngFor=\"let option of filteredOptions | async\" (onSelectionChange)=\"filterSearch($event)\"\r\n            [value]=\"option\">\r\n            {{option.type | titlecase }}: {{option['label']}}\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </form>\r\n\r\n    </div>\r\n\r\n    <div class=\"chip-list\">\r\n      <mat-chip-list #chipList aria-label=\"Filter selection\">\r\n        <mat-chip *ngFor=\"let filter of filters\" (removed)=\"removeFromFilter(filter)\">\r\n          {{filter.type | titlecase }}: {{filter.name}}\r\n          <button matChipRemove>\r\n            <mat-icon>cancel</mat-icon>\r\n          </button>\r\n        </mat-chip>\r\n      </mat-chip-list>\r\n    </div>\r\n  </div>\r\n  <app-route-jobcode-list [type]=\"'jobcode'\" [searchTerm]=\"filters\" [data]=\"listData\" [loader]=\"loaderVal\" (clearJobDetailsFromList)=\"clearJobDetails.emit(true)\" (showAllRoute)=\"filters = []; clearJobDetails.emit(true)\" (emitroute)=\"getRoute($event)\"></app-route-jobcode-list>\r\n</div>\r\n", styles: [".search-panel .datepicker,.search-panel .search{width:47%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i9.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i9.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i9.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i9.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i10$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i10.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: RouteJobCodeListComponent, selector: "app-route-jobcode-list", inputs: ["loader", "type", "data", "currentNav", "searchTerm", "clearListSeletion"], outputs: ["emitroute", "showAllRoute", "clearJobDetailsFromList"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: JobCodeNavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-job-code-nav', template: "<div class=\"nav_body\">\r\n  <div class=\"search-panel\">\r\n    <div class=\"datepicker\">\r\n      <mat-form-field>\r\n        <mat-label>Choose a date</mat-label>\r\n        <input readonly matInput (click)=\"picker.open()\" [disabled]=\"loaderVal\"  [(ngModel)]=\"dateValue\" [matDatepicker]=\"picker\" (dateChange)=\"getDate($event)\">\r\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n        <mat-datepicker #picker></mat-datepicker>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"search\">\r\n    <form [formGroup]=\"filterForm\">\r\n      <mat-form-field class=\"full-width\" [class.disabled]=\"loaderVal\">\r\n        <input matInput [matChipInputFor]=\"chipList\" formControlName=\"search\" [matAutocomplete]=\"auto\"\r\n          [disabled]=\"loaderVal\" placeholder=\"Search\">\r\n          <mat-icon matSuffix *ngIf=\"!utils.conveySearchIcon(filterForm.value.search)\">search</mat-icon>\r\n          <button mat-button matSuffix mat-icon-button aria-label=\"Clear\" *ngIf=\"utils.conveySearchIcon(filterForm.value.search)\" (click)=\"filterForm.reset()\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n          <mat-option *ngFor=\"let option of filteredOptions | async\" (onSelectionChange)=\"filterSearch($event)\"\r\n            [value]=\"option\">\r\n            {{option.type | titlecase }}: {{option['label']}}\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </form>\r\n\r\n    </div>\r\n\r\n    <div class=\"chip-list\">\r\n      <mat-chip-list #chipList aria-label=\"Filter selection\">\r\n        <mat-chip *ngFor=\"let filter of filters\" (removed)=\"removeFromFilter(filter)\">\r\n          {{filter.type | titlecase }}: {{filter.name}}\r\n          <button matChipRemove>\r\n            <mat-icon>cancel</mat-icon>\r\n          </button>\r\n        </mat-chip>\r\n      </mat-chip-list>\r\n    </div>\r\n  </div>\r\n  <app-route-jobcode-list [type]=\"'jobcode'\" [searchTerm]=\"filters\" [data]=\"listData\" [loader]=\"loaderVal\" (clearJobDetailsFromList)=\"clearJobDetails.emit(true)\" (showAllRoute)=\"filters = []; clearJobDetails.emit(true)\" (emitroute)=\"getRoute($event)\"></app-route-jobcode-list>\r\n</div>\r\n", styles: [".search-panel .datepicker,.search-panel .search{width:47%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.UtilsService }]; }, propDecorators: { jobemit: [{
+                type: Output
+            }], clearJobDetails: [{
+                type: Output
             }] } });
 
-class JobRouteListComponent {
-    constructor(utils, coolMap) {
-        this.utils = utils;
-        this.coolMap = coolMap;
-        this.changeNav = new EventEmitter();
-        this.filterForm = new FormGroup({ search: new FormControl() });
-        this.changeRoutes = new EventEmitter();
-        this.changeSelectedRoute = new EventEmitter();
-        this.filters = [];
-        this.filteredOptions = this.filterForm.get('search')?.valueChanges.pipe(startWith(''), map(value => this.utils.filter(value, this.filters)));
-    }
-    filterSearch(e) {
-        this.changeNav.emit({ type: 'Addroute' });
-        this.preventListUpdate = true;
-        this.filterForm.controls.search.setValue(null);
-        this.filters = [{ name: e.source.value.label, type: e.source.value.type, value: e.source.value }];
-        const filteredRoutes = this.utils.getSearchResults(this.masterRoutes, [{ name: e.source.value.label, type: e.source.value.type, value: e.source.value }]);
-        this.changeRoutes.emit(filteredRoutes);
-        this.selectedRoute.selected.forEach((item) => {
-            const routeData = filteredRoutes.find(x => x.route_id === item.route_id);
-            if (!routeData) {
-                this.selectedRoute.toggle(item);
-                this.changeSelectedRoute.emit(this.selectedRoute);
-                this.coolMap.removeRouteAndMarker(item['route_id']).then((res) => {
-                    this.coolMap.extendReBound();
-                });
-            }
-        });
-    }
-    removeFromFilter(filter) {
-        this.changeNav.emit({ type: 'Addroute' });
-        const index = this.filters.indexOf(filter);
-        if (index >= 0) {
-            this.filters = [];
-            this.changeRoutes.emit(this.masterRoutes);
-        }
-    }
-}
-JobRouteListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JobRouteListComponent, deps: [{ token: i1.UtilsService }, { token: i1.CoolmapService }], target: i0.ɵɵFactoryTarget.Component });
-JobRouteListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: JobRouteListComponent, selector: "app-job-route-list", inputs: { routes: "routes", selectedRoute: "selectedRoute", masterRoutes: "masterRoutes" }, outputs: { changeNav: "changeNav", changeRoutes: "changeRoutes", changeSelectedRoute: "changeSelectedRoute" }, ngImport: i0, template: "<div class=\"searchprt\">\n  <form [formGroup]=\"filterForm\">\n  <mat-form-field class=\"full-width\">\n    <input matInput [matChipInputFor]=\"chipList\" formControlName=\"search\" [matAutocomplete]=\"auto\" placeholder=\"Search\">\n      <mat-icon matSuffix *ngIf=\"!utils.conveySearchIcon(filterForm.value.search)\">search</mat-icon>\n      <button mat-button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"filterForm.reset()\" *ngIf=\"utils.conveySearchIcon(filterForm.value.search)\">\n        <mat-icon>close</mat-icon>\n      </button>\n      <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\n        <mat-option *ngFor=\"let option of filteredOptions | async\" (onSelectionChange)=\"filterSearch($event)\"\n          [value]=\"option\">\n          {{option.type | titlecase }}: {{option['label']}}\n        </mat-option>\n      </mat-autocomplete>\n  </mat-form-field>\n</form>\n</div>\n<div class=\"chip-list\">\n  <mat-chip-list #chipList aria-label=\"Filter selection\">\n    <mat-chip *ngFor=\"let filter of filters\" (removed)=\"removeFromFilter(filter)\">\n      {{filter.type | titlecase }}: {{filter.name}}\n      <button matChipRemove>\n        <mat-icon>cancel</mat-icon>\n      </button>\n    </mat-chip>\n  </mat-chip-list>\n</div>\n", styles: [".searchprt{padding-right:20px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i9.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i9.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i9.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i9.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i10.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JobRouteListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-job-route-list', template: "<div class=\"searchprt\">\n  <form [formGroup]=\"filterForm\">\n  <mat-form-field class=\"full-width\">\n    <input matInput [matChipInputFor]=\"chipList\" formControlName=\"search\" [matAutocomplete]=\"auto\" placeholder=\"Search\">\n      <mat-icon matSuffix *ngIf=\"!utils.conveySearchIcon(filterForm.value.search)\">search</mat-icon>\n      <button mat-button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"filterForm.reset()\" *ngIf=\"utils.conveySearchIcon(filterForm.value.search)\">\n        <mat-icon>close</mat-icon>\n      </button>\n      <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\n        <mat-option *ngFor=\"let option of filteredOptions | async\" (onSelectionChange)=\"filterSearch($event)\"\n          [value]=\"option\">\n          {{option.type | titlecase }}: {{option['label']}}\n        </mat-option>\n      </mat-autocomplete>\n  </mat-form-field>\n</form>\n</div>\n<div class=\"chip-list\">\n  <mat-chip-list #chipList aria-label=\"Filter selection\">\n    <mat-chip *ngFor=\"let filter of filters\" (removed)=\"removeFromFilter(filter)\">\n      {{filter.type | titlecase }}: {{filter.name}}\n      <button matChipRemove>\n        <mat-icon>cancel</mat-icon>\n      </button>\n    </mat-chip>\n  </mat-chip-list>\n</div>\n", styles: [".searchprt{padding-right:20px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.UtilsService }, { type: i1.CoolmapService }]; }, propDecorators: { changeNav: [{
-                type: Output
-            }], routes: [{
-                type: Input
-            }], selectedRoute: [{
-                type: Input
-            }], changeRoutes: [{
-                type: Output
-            }], changeSelectedRoute: [{
-                type: Output
-            }], masterRoutes: [{
-                type: Input
+class JobRouteListComponent {
+    constructor(utils, coolMap) {
+        this.utils = utils;
+        this.coolMap = coolMap;
+        this.changeNav = new EventEmitter();
+        this.filterForm = new FormGroup({ search: new FormControl() });
+        this.changeRoutes = new EventEmitter();
+        this.changeSelectedRoute = new EventEmitter();
+        this.filters = [];
+        this.filteredOptions = this.filterForm.get('search')?.valueChanges.pipe(startWith(''), map(value => this.utils.filter(value, this.filters)));
+    }
+    filterSearch(e) {
+        this.changeNav.emit({ type: 'Addroute' });
+        this.preventListUpdate = true;
+        this.filterForm.controls.search.setValue(null);
+        this.filters = [{ name: e.source.value.label, type: e.source.value.type, value: e.source.value }];
+        const filteredRoutes = this.utils.getSearchResults(this.masterRoutes, [{ name: e.source.value.label, type: e.source.value.type, value: e.source.value }]);
+        this.changeRoutes.emit(filteredRoutes);
+        this.selectedRoute.selected.forEach((item) => {
+            const routeData = filteredRoutes.find(x => x.route_id === item.route_id);
+            if (!routeData) {
+                this.selectedRoute.toggle(item);
+                this.changeSelectedRoute.emit(this.selectedRoute);
+                this.coolMap.removeRouteAndMarker(item['route_id']).then((res) => {
+                    this.coolMap.extendReBound();
+                });
+            }
+        });
+    }
+    removeFromFilter(filter) {
+        this.changeNav.emit({ type: 'Addroute' });
+        const index = this.filters.indexOf(filter);
+        if (index >= 0) {
+            this.filters = [];
+            this.changeRoutes.emit(this.masterRoutes);
+        }
+    }
+}
+JobRouteListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: JobRouteListComponent, deps: [{ token: i1.UtilsService }, { token: i1.CoolmapService }], target: i0.ɵɵFactoryTarget.Component });
+JobRouteListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: JobRouteListComponent, selector: "app-job-route-list", inputs: { routes: "routes", selectedRoute: "selectedRoute", masterRoutes: "masterRoutes" }, outputs: { changeNav: "changeNav", changeRoutes: "changeRoutes", changeSelectedRoute: "changeSelectedRoute" }, ngImport: i0, template: "<div class=\"searchprt\">\r\n  <form [formGroup]=\"filterForm\">\r\n  <mat-form-field class=\"full-width\">\r\n    <input matInput [matChipInputFor]=\"chipList\" formControlName=\"search\" [matAutocomplete]=\"auto\" placeholder=\"Search\">\r\n      <mat-icon matSuffix *ngIf=\"!utils.conveySearchIcon(filterForm.value.search)\">search</mat-icon>\r\n      <button mat-button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"filterForm.reset()\" *ngIf=\"utils.conveySearchIcon(filterForm.value.search)\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n      <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n        <mat-option *ngFor=\"let option of filteredOptions | async\" (onSelectionChange)=\"filterSearch($event)\"\r\n          [value]=\"option\">\r\n          {{option.type | titlecase }}: {{option['label']}}\r\n        </mat-option>\r\n      </mat-autocomplete>\r\n  </mat-form-field>\r\n</form>\r\n</div>\r\n<div class=\"chip-list\">\r\n  <mat-chip-list #chipList aria-label=\"Filter selection\">\r\n    <mat-chip *ngFor=\"let filter of filters\" (removed)=\"removeFromFilter(filter)\">\r\n      {{filter.type | titlecase }}: {{filter.name}}\r\n      <button matChipRemove>\r\n        <mat-icon>cancel</mat-icon>\r\n      </button>\r\n    </mat-chip>\r\n  </mat-chip-list>\r\n</div>\r\n", styles: [".searchprt{padding-right:20px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i9.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i9.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i9.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i9.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i10.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: JobRouteListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-job-route-list', template: "<div class=\"searchprt\">\r\n  <form [formGroup]=\"filterForm\">\r\n  <mat-form-field class=\"full-width\">\r\n    <input matInput [matChipInputFor]=\"chipList\" formControlName=\"search\" [matAutocomplete]=\"auto\" placeholder=\"Search\">\r\n      <mat-icon matSuffix *ngIf=\"!utils.conveySearchIcon(filterForm.value.search)\">search</mat-icon>\r\n      <button mat-button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"filterForm.reset()\" *ngIf=\"utils.conveySearchIcon(filterForm.value.search)\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n      <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n        <mat-option *ngFor=\"let option of filteredOptions | async\" (onSelectionChange)=\"filterSearch($event)\"\r\n          [value]=\"option\">\r\n          {{option.type | titlecase }}: {{option['label']}}\r\n        </mat-option>\r\n      </mat-autocomplete>\r\n  </mat-form-field>\r\n</form>\r\n</div>\r\n<div class=\"chip-list\">\r\n  <mat-chip-list #chipList aria-label=\"Filter selection\">\r\n    <mat-chip *ngFor=\"let filter of filters\" (removed)=\"removeFromFilter(filter)\">\r\n      {{filter.type | titlecase }}: {{filter.name}}\r\n      <button matChipRemove>\r\n        <mat-icon>cancel</mat-icon>\r\n      </button>\r\n    </mat-chip>\r\n  </mat-chip-list>\r\n</div>\r\n", styles: [".searchprt{padding-right:20px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.UtilsService }, { type: i1.CoolmapService }]; }, propDecorators: { changeNav: [{
+                type: Output
+            }], routes: [{
+                type: Input
+            }], selectedRoute: [{
+                type: Input
+            }], changeRoutes: [{
+                type: Output
+            }], changeSelectedRoute: [{
+                type: Output
+            }], masterRoutes: [{
+                type: Input
             }] } });
 
-class JobcodeStatusComponent {
-    constructor() { }
-}
-JobcodeStatusComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JobcodeStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-JobcodeStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: JobcodeStatusComponent, selector: "app-jobcode-status", inputs: { jobValue: "jobValue" }, ngImport: i0, template: "<div class=\"statusprt\">\n  <span class=\"done\"> Done - {{jobValue['values']['Done']}} </span>\n  <span class=\"ongoing\"> Ongoing - {{jobValue['values']['Ongoing']}} </span>\n  <span class=\"open\"> Open - {{jobValue['values']['Open']}} </span>\n</div>\n", styles: [".statusprt span{padding:10px;font-size:.9rem}.statusprt span.done{border:2px solid #0b843c;color:#0b843c}.statusprt span.done:hover{background:#0b843c;color:#fff}.statusprt span.ongoing{border:2px solid #eecb27;color:#eecb27}.statusprt span.ongoing:hover{background:#eecb27;color:#fff}.statusprt span.open{border:2px solid #12afcb;color:#12afcb}.statusprt span.open:hover{background:#12afcb;color:#fff}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JobcodeStatusComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-jobcode-status', template: "<div class=\"statusprt\">\n  <span class=\"done\"> Done - {{jobValue['values']['Done']}} </span>\n  <span class=\"ongoing\"> Ongoing - {{jobValue['values']['Ongoing']}} </span>\n  <span class=\"open\"> Open - {{jobValue['values']['Open']}} </span>\n</div>\n", styles: [".statusprt span{padding:10px;font-size:.9rem}.statusprt span.done{border:2px solid #0b843c;color:#0b843c}.statusprt span.done:hover{background:#0b843c;color:#fff}.statusprt span.ongoing{border:2px solid #eecb27;color:#eecb27}.statusprt span.ongoing:hover{background:#eecb27;color:#fff}.statusprt span.open{border:2px solid #12afcb;color:#12afcb}.statusprt span.open:hover{background:#12afcb;color:#fff}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { jobValue: [{
-                type: Input
+class JobcodeStatusComponent {
+    constructor() { }
+}
+JobcodeStatusComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: JobcodeStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+JobcodeStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: JobcodeStatusComponent, selector: "app-jobcode-status", inputs: { jobValue: "jobValue" }, ngImport: i0, template: "<div class=\"statusprt\">\r\n  <span class=\"done\"> Done - {{jobValue['values']['Done']}} </span>\r\n  <span class=\"ongoing\"> Ongoing - {{jobValue['values']['Ongoing']}} </span>\r\n  <span class=\"open\"> Open - {{jobValue['values']['Open']}} </span>\r\n</div>\r\n", styles: [".statusprt span{padding:10px;font-size:.9rem}.statusprt span.done{border:2px solid #0b843c;color:#0b843c}.statusprt span.done:hover{background:#0b843c;color:#fff}.statusprt span.ongoing{border:2px solid #eecb27;color:#eecb27}.statusprt span.ongoing:hover{background:#eecb27;color:#fff}.statusprt span.open{border:2px solid #12afcb;color:#12afcb}.statusprt span.open:hover{background:#12afcb;color:#fff}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: JobcodeStatusComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-jobcode-status', template: "<div class=\"statusprt\">\r\n  <span class=\"done\"> Done - {{jobValue['values']['Done']}} </span>\r\n  <span class=\"ongoing\"> Ongoing - {{jobValue['values']['Ongoing']}} </span>\r\n  <span class=\"open\"> Open - {{jobValue['values']['Open']}} </span>\r\n</div>\r\n", styles: [".statusprt span{padding:10px;font-size:.9rem}.statusprt span.done{border:2px solid #0b843c;color:#0b843c}.statusprt span.done:hover{background:#0b843c;color:#fff}.statusprt span.ongoing{border:2px solid #eecb27;color:#eecb27}.statusprt span.ongoing:hover{background:#eecb27;color:#fff}.statusprt span.open{border:2px solid #12afcb;color:#12afcb}.statusprt span.open:hover{background:#12afcb;color:#fff}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { jobValue: [{
+                type: Input
             }] } });
 
-class JobcodeOverviewComponent {
-    constructor() {
-        this.label = JobCodeOverviewData;
-        this.overViewEnum = JobCodeOverviewEnum;
-    }
-}
-JobcodeOverviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JobcodeOverviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-JobcodeOverviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: JobcodeOverviewComponent, selector: "app-jobcode-overview", inputs: { jobValue: "jobValue" }, ngImport: i0, template: "<div class=\"detail_view m-40\">\n  <ng-container *ngFor=\"let item of label\">\n    <span [class.pickprt]=\"item === 'pickup_location'\" [class.dropprt]=\"item === 'delivery_location'\">\n      <label>{{overViewEnum[item]}}</label>\n      <b> {{jobValue[item] ? jobValue[item] : 'N/A'}} </b>\n    </span>\n  </ng-container>\n</div>\n", styles: [".detail_view{display:flex;flex-direction:row;justify-content:space-between}.detail_view span{display:flex;flex-direction:column;font-size:.8125rem;width:15%;margin:0 7px 0 0}.detail_view span.pickprt,.detail_view span.dropprt{width:20%}.detail_view span label{font-size:.8125rem;font-weight:400;color:#767676;padding-bottom:8px}.detail_view span b{font-weight:500}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JobcodeOverviewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-jobcode-overview', template: "<div class=\"detail_view m-40\">\n  <ng-container *ngFor=\"let item of label\">\n    <span [class.pickprt]=\"item === 'pickup_location'\" [class.dropprt]=\"item === 'delivery_location'\">\n      <label>{{overViewEnum[item]}}</label>\n      <b> {{jobValue[item] ? jobValue[item] : 'N/A'}} </b>\n    </span>\n  </ng-container>\n</div>\n", styles: [".detail_view{display:flex;flex-direction:row;justify-content:space-between}.detail_view span{display:flex;flex-direction:column;font-size:.8125rem;width:15%;margin:0 7px 0 0}.detail_view span.pickprt,.detail_view span.dropprt{width:20%}.detail_view span label{font-size:.8125rem;font-weight:400;color:#767676;padding-bottom:8px}.detail_view span b{font-weight:500}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { jobValue: [{
-                type: Input
+class JobcodeOverviewComponent {
+    constructor() {
+        this.label = JobCodeOverviewData;
+        this.overViewEnum = JobCodeOverviewEnum;
+    }
+}
+JobcodeOverviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: JobcodeOverviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+JobcodeOverviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: JobcodeOverviewComponent, selector: "app-jobcode-overview", inputs: { jobValue: "jobValue" }, ngImport: i0, template: "<div class=\"detail_view m-40\">\r\n  <ng-container *ngFor=\"let item of label\">\r\n    <span [class.pickprt]=\"item === 'pickup_location'\" [class.dropprt]=\"item === 'delivery_location'\">\r\n      <label>{{overViewEnum[item]}}</label>\r\n      <b> {{jobValue[item] ? jobValue[item] : 'N/A'}} </b>\r\n    </span>\r\n  </ng-container>\r\n</div>\r\n", styles: [".detail_view{display:flex;flex-direction:row;justify-content:space-between}.detail_view span{display:flex;flex-direction:column;font-size:.8125rem;width:15%;margin:0 7px 0 0}.detail_view span.pickprt,.detail_view span.dropprt{width:20%}.detail_view span label{font-size:.8125rem;font-weight:400;color:#767676;padding-bottom:8px}.detail_view span b{font-weight:500}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: JobcodeOverviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-jobcode-overview', template: "<div class=\"detail_view m-40\">\r\n  <ng-container *ngFor=\"let item of label\">\r\n    <span [class.pickprt]=\"item === 'pickup_location'\" [class.dropprt]=\"item === 'delivery_location'\">\r\n      <label>{{overViewEnum[item]}}</label>\r\n      <b> {{jobValue[item] ? jobValue[item] : 'N/A'}} </b>\r\n    </span>\r\n  </ng-container>\r\n</div>\r\n", styles: [".detail_view{display:flex;flex-direction:row;justify-content:space-between}.detail_view span{display:flex;flex-direction:column;font-size:.8125rem;width:15%;margin:0 7px 0 0}.detail_view span.pickprt,.detail_view span.dropprt{width:20%}.detail_view span label{font-size:.8125rem;font-weight:400;color:#767676;padding-bottom:8px}.detail_view span b{font-weight:500}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { jobValue: [{
+                type: Input
             }] } });
 
-class JobCodeComponent {
-    constructor(utils, coolMap) {
-        this.utils = utils;
-        this.coolMap = coolMap;
-        this.isVisible = false;
-        this.routes = [];
-        this.selectedRoute = new SelectionModel(true, []);
-        this.clearJobDetails = new EventEmitter();
-        this.isOverlapRouteSection = false;
-        this.destroyer$ = new Subject();
-        this.preventMouseout = false;
-        this.utils.clearViewRouteforJobCodeObserve.pipe(takeUntil(this.destroyer$)).subscribe(res => {
-            if (res)
-                this.coolMap.removeJobFromMap(this.selectedRoute.selected);
-            this.selectedRoute.clear();
-        });
-    }
-    ngOnInit() { this.getRouteList(); }
-    getRouteList() {
-        this.utils.getData('coolmap/routes/all').pipe(takeUntil(this.destroyer$)).subscribe((res) => {
-            if (res) {
-                this.routes = res.data;
-                this.masterRoutes = res.data;
-                this.preventListUpdate = false;
-                this.utils.clearOptions();
-                this.routes.forEach((ele) => { this.utils.makeOptions(ele); });
-            }
-        });
-    }
-    toggleSidemenu() {
-        this.isVisible = !this.isVisible;
-        this.detailsCardEnable = false;
-        this.preventMouseout = false;
-    }
-    clearJob() { this.clearJobDetails.emit(true); this.utils.preVentJobdetailclose.next(false); }
-    selectRoute(event) {
-        const i = this.selectedRoute.selected.findIndex(ele => ele['order_number'] === event['order_number']);
-        this.selectedRoute.toggle(event);
-        if (!this.selectedRoute.isSelected(event) && event['route_id']) {
-            this.coolMap.removeRouteAndMarker(event['route_id']).then((res) => {
-                this.coolMap.extendReBound();
-            });
-        }
-        else {
-            this.coolMap.plotRoute(event, event['route_id'], 'jobrouteList', false, true);
-        }
-    }
-    masterToggle() {
-        if (this.routes.length === this.selectedRoute.selected.length) {
-            this.selectedRoute.clear();
-            this.routes.forEach(row => {
-                this.coolMap.removeRouteAndMarker(row['route_id']).then((res) => { this.coolMap.extendReBound(); });
-            });
-        }
-        else {
-            this.routes.forEach(row => {
-                this.selectedRoute.select(row);
-                this.coolMap.plotRoute(row, row['route_id'], 'jobrouteList', false, true);
-            });
-        }
-    }
-    togglerouteDetails(eventType, route, mouseOut) {
-        if (typeof (eventType) === 'string') {
-            this.preventMouseout = true;
-            this.utils.setdictValue('route-details', JSON.stringify(route));
-        }
-        if (typeof (eventType) === 'boolean' && eventType && !this.preventMouseout) {
-            this.detailsCardEnable = eventType;
-        }
-        ;
-        if (typeof (eventType) === 'boolean' && !eventType && !this.preventMouseout) {
-            this.detailsCardEnable = eventType;
-        }
-        ;
-        if (this.preventMouseout && !this.detailsCardEnable)
-            this.preventMouseout = false;
-        if (mouseOut) {
-            if (this.preventMouseout) {
-                route = this.utils.getdictValue('route-details');
-                this.routeCardDetail = route;
-            }
-            if (!this.preventMouseout) {
-                this.routeCardDetail = route;
-            }
-        }
-        else {
-            this.routeCardDetail = route;
-        }
-        this.routeCardDetail['created_at'] = this.utils.getDateFormat(new Date(this.routeCardDetail['created_at']), '/');
-    }
-    ngOnDestroy() {
-        this.destroyer$.next(true);
-        this.destroyer$.unsubscribe();
-    }
-}
-JobCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JobCodeComponent, deps: [{ token: i1.UtilsService }, { token: i1.CoolmapService }], target: i0.ɵɵFactoryTarget.Component });
-JobCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: JobCodeComponent, selector: "app-job-code", inputs: { jobdetail: "jobdetail" }, outputs: { clearJobDetails: "clearJobDetails" }, ngImport: i0, template: "<div class=\"jobcode_detailprt\" (click)=\"isOverlapRouteSection = false\"  *ngIf=\"jobdetail\" [ngClass]=\"{'overlap': !isOverlapRouteSection}\" cdkDrag>\n  <div class=\"topheadingprt\" *ngIf=\"jobdetail['order_number']\">\n    <h2>{{jobdetail['order_number']}}</h2>\n  </div>\n  <span class=\"close\"><mat-icon (click)=\"clearJob()\">clear</mat-icon></span>\n  <div class=\"job_details_area\">\n    <div class=\"detailnameprt\">\n      <span> <b> {{jobdetail.customer_name}} </b> Customer </span>\n      <app-jobcode-status [jobValue]=\"jobdetail\"></app-jobcode-status>\n    </div>\n    <app-jobcode-overview [jobValue]=\"jobdetail\"></app-jobcode-overview>\n  </div>\n</div>\n\n<div class=\"route_listprt\" (click)=\"isOverlapRouteSection = true\" [ngClass]=\"{ 'show': isVisible, 'overlap': isOverlapRouteSection}\">\n  <div class=\"listing_toggle\" (click)=\"toggleSidemenu()\">\n    <img src=\"assets/images/route.svg\" alt=\"\" />\n  </div>\n\n  <div class=\"listing_box\">\n    <div class=\"closebtn\" (click)=\"toggleSidemenu()\">\n      <mat-icon>clear</mat-icon>\n    </div>\n\n    <div class=\"btnprt\">\n      <h2> List of Routes </h2>\n      <button (click)=\"masterToggle()\">{{routes && routes.length > 0 && routes.length === selectedRoute.selected.length ? 'Uncheck' : 'Check'}} All</button>\n    </div>\n\n    <app-job-route-list [routes]=\"routes\" [masterRoutes]=\"masterRoutes\" [selectedRoute]=\"selectedRoute\" (changeRoutes)=\"routes = $event\" (changeSelectedRoute)=\"selectedRoute = $event\"></app-job-route-list>\n\n    <perfect-scrollbar>\n      <ul *ngIf=\"routes['length'] > 0\">\n        <li *ngFor=\"let list of routes\">\n          <div class=\"iconprt\">\n            <span>\n              <input type=\"checkbox\" [checked]=\"selectedRoute.isSelected(list)\"\n                (change)=\"$event ? selectRoute(list) : null\" /><label>&nbsp;</label>\n              <div class=\"border\"></div>\n            </span>\n            <div class=\"statusunit\" [ngClass]=\"list['unit']\">{{list['unit']}}</div>\n            <div class=\"infoicon\">\n              <img (mouseenter)=\"togglerouteDetails(true, list)\" (mouseout)=\"togglerouteDetails(false, list, true)\"\n              (click)=\"togglerouteDetails('click', list)\" src=\"assets/images/info_icon.png\" [alt]=\"\" />\n            </div>\n          </div>\n          <div class=\"pickprtbox\">\n            <h2> {{list['route_name']}} </h2>\n            <h3>{{list['customer_name']}} | {{list['material']}}</h3>\n            <div class=\"pickdropprt\">\n              <div class=\"pickprt\">\n                <b>\n                  <h4>{{list['pickup_location']}}</h4>\n                </b>\n              </div>\n              <div class=\"dropprt\">\n                <b>\n                  <h4>{{list['delivery_location']}}</h4>\n                </b>\n              </div>\n            </div>\n          </div>\n        </li>\n      </ul>\n      <p style=\"color: #fff;\" *ngIf=\"routes.length === 0\">No Route found</p>\n    </perfect-scrollbar>\n  </div>\n\n  <div class=\"route_detail\" *ngIf=\"detailsCardEnable\">\n    <div class=\"closebtnroutedetail\" (click)=\"detailsCardEnable = false; preventMouseout = false\">\n      <mat-icon>clear</mat-icon>\n    </div>\n    <div class=\"destination\">\n      <div class=\"duration\">\n        <p class=\"pickprt\"><b>Pickup:</b> {{routeCardDetail?.pickup_location}}</p>\n        <p class=\"dropprt\"><b>Delivery:</b> {{routeCardDetail?.delivery_location}} </p>\n      </div>\n      <span><b>Name:</b> {{routeCardDetail?.route_name}}</span>\n      <span><b>Customer:</b> {{routeCardDetail?.customer_name}}</span>\n      <span><b>Material:</b> {{routeCardDetail?.material}}</span>\n      <span><b>Type:</b> {{routeCardDetail?.unit}}</span>\n      <span><b>Distance:</b> {{routeCardDetail?.estimated_distance}}</span>\n      <span><b>Travel Time:</b> {{routeCardDetail?.estimated_time}}</span>\n      <span class=\"notes\"><b>Notes:</b> {{routeCardDetail?.note}}</span>\n    </div>\n\n    <div class=\"createTxt\">\n      <small>\n        Created by {{routeCardDetail?.created_by_name}} on {{routeCardDetail?.created_at}}\n      </small>\n    </div>\n  </div>\n</div>\n", styles: [".jobcode_detailprt{position:absolute;left:300px;bottom:10px;background:white;padding:10px 20px;border-radius:20px;width:calc(100% - 315px);z-index:999;box-shadow:0 0 5px #0000001a;height:250px;cursor:move}@media (min-width: 1600px){.jobcode_detailprt{left:307px;width:calc(100% - 325px)}}.jobcode_detailprt .topheadingprt .driver_list ul{display:flex;width:450px;justify-content:flex-end}.jobcode_detailprt .topheadingprt .driver_list ul li{position:relative;margin:0 -6px 2px 0;cursor:pointer}.jobcode_detailprt .topheadingprt .driver_list ul li img{width:30px;height:30px;border-radius:100%;border:1px solid #fff}.jobcode_detailprt .topheadingprt .driver_list ul li:hover .driver_detail{display:flex}.jobcode_detailprt .topheadingprt .driver_list ul li .driver_detail{position:absolute;top:-70px;left:-50px;display:none;will-change:transform;pointer-events:none;border-radius:10px;box-shadow:0 4px 4px #00000024;width:133px;background:white;text-align:center;padding:10px;flex-direction:column;font-size:.8125rem}.jobcode_detailprt .topheadingprt .driver_list ul li .driver_detail b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:135px}.jobcode_detailprt .topheadingprt .driver_list ul li .driver_detail span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:117px;display:block}.jobcode_detailprt .topheadingprt .driver_list ul li .driver_detail:after{width:0;height:0;border-top:15px solid white;border-left:10px solid transparent;border-right:10px solid transparent;z-index:1;content:\"\";position:absolute;filter:drop-shadow(0px 3px 1px rgba(0,0,0,.2));bottom:-14px;left:50%;transform:translate(-50%)}.jobcode_detailprt .topheadingprt .driver_list ul li.extraicon{background:white;width:30px;height:30px;border-radius:100%;display:flex;justify-content:center;align-items:center;margin:0 0 0 10px;border:1px solid #eee}.jobcode_detailprt .close{position:absolute;top:10px;right:20px;background:#e8e8e8;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer}@keyframes autoslide{to{transform:translate(calc(90vw - 100%))}0%{transform:translate(0)}}.jobcode_detailprt .job_details_area{padding:15px 0}.jobcode_detailprt .job_details_area .detailnameprt{display:flex;justify-content:space-between}.jobcode_detailprt .job_details_area .detailnameprt span{display:flex;flex-direction:column;font-size:.875rem;color:#767676}.jobcode_detailprt .job_details_area .detailnameprt span b{font-size:.9375rem;font-weight:500;color:#000}.route_listprt .listing_toggle{background:white;border-radius:15px;padding:5px;position:absolute;right:10px;top:20px;cursor:pointer}.route_listprt .listing_toggle img{width:28px}.route_listprt .listing_box{background:#282828;height:100vh;position:fixed;right:0;top:0;z-index:1111;box-shadow:-3px 0 5px #ffffff14;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;width:0;border-radius:40px 0 0;opacity:0}.route_listprt .listing_box .closebtn{display:none}.route_listprt .listing_box ul{padding:0 20px 0 0}.route_listprt .listing_box ul li{background:#4a4a4a;padding:10px 15px;border-radius:15px;display:flex;margin-bottom:10px;position:relative;height:inherit}@media (min-width: 1600px){.route_listprt .listing_box ul li{padding:6px 15px;margin-bottom:5px}}.route_listprt .listing_box ul li .iconprt{display:flex;flex-direction:column}.route_listprt .listing_box ul li .iconprt span{display:flex;align-items:center;margin-bottom:32px}.route_listprt .listing_box ul li .iconprt span input[type=checkbox]{width:100%;height:100%;margin-right:10px;opacity:0;position:absolute;left:0;margin-left:0;top:0;z-index:3;cursor:pointer}.route_listprt .listing_box ul li .iconprt span input[type=checkbox]:checked+label{background:url(../../../assets/images/fill-check.png) 16px 15px no-repeat}.route_listprt .listing_box ul li .iconprt span label{background:url(../../../assets/images/blank-check.png) 16px 15px no-repeat;width:100%;position:relative;z-index:2;font-size:12px;color:#878787;height:100%;position:absolute;top:0;left:0}.route_listprt .listing_box ul li .iconprt span .border{position:absolute;width:100%;height:100%;left:0;right:0;top:0;border-radius:15px}.route_listprt .listing_box ul li .iconprt span input:checked~.border{border-left:1px solid white;border-right:1px solid white;border-top:1px solid white;border-bottom:1px solid white}.route_listprt .listing_box ul li .iconprt span h2{margin-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;padding-left:16px;font-size:.9rem;margin-bottom:0;font-weight:400;margin-top:0}.route_listprt .listing_box ul li .iconprt .statusunit{border-radius:30px;font-size:0;color:#fff;text-transform:capitalize;font-weight:500;width:20px;height:20px;text-align:center;line-height:20px;margin-bottom:7px}.route_listprt .listing_box ul li .iconprt .statusunit:first-letter{font-size:.8rem}.route_listprt .listing_box ul li .iconprt .statusunit.Ton{background:#ff7272}.route_listprt .listing_box ul li .iconprt .statusunit.Load{background:#a3c52e}.route_listprt .listing_box ul li .iconprt .statusunit.Hourly{background:#ae23d1}@media (min-width: 1600px){.route_listprt .listing_box ul li .iconprt .statusunit{line-height:21px}}.route_listprt .listing_box ul li .iconprt .infoicon{z-index:5;cursor:pointer}.route_listprt .listing_box ul li .iconprt .infoicon img{width:20px;height:20px}.route_listprt .listing_box ul li .pickprtbox{margin-left:10px}.route_listprt .listing_box ul li .pickprtbox h2{font-size:.9rem;margin:3px 0 5px;white-space:nowrap;text-overflow:ellipsis;max-width:195px;overflow:hidden}.route_listprt .listing_box ul li h3{font-size:.8rem;color:#979797;font-weight:600;margin-top:0;white-space:nowrap;text-overflow:ellipsis;max-width:195px;overflow:hidden;margin-bottom:5px}.route_listprt .listing_box ul li .pickdropprt{font-size:.75rem}.route_listprt .listing_box ul li .pickdropprt .pickprt{position:relative;display:flex;align-items:center;padding-bottom:10px}.route_listprt .listing_box ul li .pickdropprt .pickprt span{padding-left:0;padding-right:20px;display:block}.route_listprt .listing_box ul li .pickdropprt .pickprt b{position:relative}.route_listprt .listing_box ul li .pickdropprt .pickprt b:after{background:#bcbcbc;width:1px;height:100%;left:3px;content:\"\";position:absolute;top:10px}.route_listprt .listing_box ul li .pickdropprt .pickprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;color:#bcbcbc;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.route_listprt .listing_box ul li .pickdropprt .pickprt h4:before{background:#bcbcbc;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.route_listprt .listing_box ul li .pickdropprt .dropprt{position:relative;padding-bottom:10px;display:flex;align-items:center}.route_listprt .listing_box ul li .pickdropprt .dropprt span{padding-left:0;padding-right:20px;display:block}.route_listprt .listing_box ul li .pickdropprt .dropprt b{position:relative}.route_listprt .listing_box ul li .pickdropprt .dropprt b:after{background:#bcbcbc;width:1px;height:12px;left:3px;content:\"\";position:absolute;top:-7px}.route_listprt .listing_box ul li .pickdropprt .dropprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;color:#bcbcbc;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.route_listprt .listing_box ul li .pickdropprt .dropprt h4:before{background:#bcbcbc;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.route_listprt.show .listing_box{width:300px;max-width:300px;flex:0 0 350px;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;padding:40px 0 40px 20px;opacity:1}.route_listprt.show .listing_box h2{color:#fff;white-space:nowrap}.route_listprt.show .listing_box .closebtn{position:absolute;left:-33px;top:50px;background:#282828;color:#fff;padding:8px;border-top-left-radius:15px;border-bottom-left-radius:15px;cursor:pointer;box-shadow:-4px 2px 5px #ffffff14;display:block}.overlap{z-index:9999}.btnprt{display:flex;justify-content:space-between;align-items:center;padding-right:20px}.btnprt h2{margin:0}.btnprt button{font-size:15px;padding:8px 20px;background-color:#326ad3;color:#fff;border:none;border-radius:10px;box-shadow:none;outline:none}.hidden{display:none}.route_detail{background:#282828;position:absolute;width:260px;top:50%;transform:translateY(-50%);right:310px;border-radius:20px;padding:10px;box-shadow:0 0 5px #ffffff36}.route_detail .destination .duration{background:#444343;border:1px solid #918e8e;padding:10px;color:#fff}.route_detail .destination .duration b{color:#fff}.route_detail .destination .pickprt:before,.route_detail .destination .dropprt:before{background:#fff}.route_detail .destination .pickprt b:before,.route_detail .destination .dropprt b:before{background:#fff}.route_detail .destination span{line-height:20px;color:#fff;padding:3px 0}.route_detail .destination span b{color:#fff}.route_detail .destination span.notes{max-height:200px;overflow:auto}.createTxt small{color:#fff;font-size:.7rem}.closebtnroutedetail{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#f5f5f5;position:absolute;top:-7px;left:-11px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.PerfectScrollbarComponent, selector: "perfect-scrollbar", inputs: ["disabled", "usePSClass", "autoPropagation", "scrollIndicators", "config"], outputs: ["psScrollY", "psScrollX", "psScrollUp", "psScrollDown", "psScrollLeft", "psScrollRight", "psYReachEnd", "psYReachStart", "psXReachEnd", "psXReachStart"], exportAs: ["ngxPerfectScrollbar"] }, { kind: "component", type: JobRouteListComponent, selector: "app-job-route-list", inputs: ["routes", "selectedRoute", "masterRoutes"], outputs: ["changeNav", "changeRoutes", "changeSelectedRoute"] }, { kind: "component", type: JobcodeStatusComponent, selector: "app-jobcode-status", inputs: ["jobValue"] }, { kind: "component", type: JobcodeOverviewComponent, selector: "app-jobcode-overview", inputs: ["jobValue"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JobCodeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-job-code', template: "<div class=\"jobcode_detailprt\" (click)=\"isOverlapRouteSection = false\"  *ngIf=\"jobdetail\" [ngClass]=\"{'overlap': !isOverlapRouteSection}\" cdkDrag>\n  <div class=\"topheadingprt\" *ngIf=\"jobdetail['order_number']\">\n    <h2>{{jobdetail['order_number']}}</h2>\n  </div>\n  <span class=\"close\"><mat-icon (click)=\"clearJob()\">clear</mat-icon></span>\n  <div class=\"job_details_area\">\n    <div class=\"detailnameprt\">\n      <span> <b> {{jobdetail.customer_name}} </b> Customer </span>\n      <app-jobcode-status [jobValue]=\"jobdetail\"></app-jobcode-status>\n    </div>\n    <app-jobcode-overview [jobValue]=\"jobdetail\"></app-jobcode-overview>\n  </div>\n</div>\n\n<div class=\"route_listprt\" (click)=\"isOverlapRouteSection = true\" [ngClass]=\"{ 'show': isVisible, 'overlap': isOverlapRouteSection}\">\n  <div class=\"listing_toggle\" (click)=\"toggleSidemenu()\">\n    <img src=\"assets/images/route.svg\" alt=\"\" />\n  </div>\n\n  <div class=\"listing_box\">\n    <div class=\"closebtn\" (click)=\"toggleSidemenu()\">\n      <mat-icon>clear</mat-icon>\n    </div>\n\n    <div class=\"btnprt\">\n      <h2> List of Routes </h2>\n      <button (click)=\"masterToggle()\">{{routes && routes.length > 0 && routes.length === selectedRoute.selected.length ? 'Uncheck' : 'Check'}} All</button>\n    </div>\n\n    <app-job-route-list [routes]=\"routes\" [masterRoutes]=\"masterRoutes\" [selectedRoute]=\"selectedRoute\" (changeRoutes)=\"routes = $event\" (changeSelectedRoute)=\"selectedRoute = $event\"></app-job-route-list>\n\n    <perfect-scrollbar>\n      <ul *ngIf=\"routes['length'] > 0\">\n        <li *ngFor=\"let list of routes\">\n          <div class=\"iconprt\">\n            <span>\n              <input type=\"checkbox\" [checked]=\"selectedRoute.isSelected(list)\"\n                (change)=\"$event ? selectRoute(list) : null\" /><label>&nbsp;</label>\n              <div class=\"border\"></div>\n            </span>\n            <div class=\"statusunit\" [ngClass]=\"list['unit']\">{{list['unit']}}</div>\n            <div class=\"infoicon\">\n              <img (mouseenter)=\"togglerouteDetails(true, list)\" (mouseout)=\"togglerouteDetails(false, list, true)\"\n              (click)=\"togglerouteDetails('click', list)\" src=\"assets/images/info_icon.png\" [alt]=\"\" />\n            </div>\n          </div>\n          <div class=\"pickprtbox\">\n            <h2> {{list['route_name']}} </h2>\n            <h3>{{list['customer_name']}} | {{list['material']}}</h3>\n            <div class=\"pickdropprt\">\n              <div class=\"pickprt\">\n                <b>\n                  <h4>{{list['pickup_location']}}</h4>\n                </b>\n              </div>\n              <div class=\"dropprt\">\n                <b>\n                  <h4>{{list['delivery_location']}}</h4>\n                </b>\n              </div>\n            </div>\n          </div>\n        </li>\n      </ul>\n      <p style=\"color: #fff;\" *ngIf=\"routes.length === 0\">No Route found</p>\n    </perfect-scrollbar>\n  </div>\n\n  <div class=\"route_detail\" *ngIf=\"detailsCardEnable\">\n    <div class=\"closebtnroutedetail\" (click)=\"detailsCardEnable = false; preventMouseout = false\">\n      <mat-icon>clear</mat-icon>\n    </div>\n    <div class=\"destination\">\n      <div class=\"duration\">\n        <p class=\"pickprt\"><b>Pickup:</b> {{routeCardDetail?.pickup_location}}</p>\n        <p class=\"dropprt\"><b>Delivery:</b> {{routeCardDetail?.delivery_location}} </p>\n      </div>\n      <span><b>Name:</b> {{routeCardDetail?.route_name}}</span>\n      <span><b>Customer:</b> {{routeCardDetail?.customer_name}}</span>\n      <span><b>Material:</b> {{routeCardDetail?.material}}</span>\n      <span><b>Type:</b> {{routeCardDetail?.unit}}</span>\n      <span><b>Distance:</b> {{routeCardDetail?.estimated_distance}}</span>\n      <span><b>Travel Time:</b> {{routeCardDetail?.estimated_time}}</span>\n      <span class=\"notes\"><b>Notes:</b> {{routeCardDetail?.note}}</span>\n    </div>\n\n    <div class=\"createTxt\">\n      <small>\n        Created by {{routeCardDetail?.created_by_name}} on {{routeCardDetail?.created_at}}\n      </small>\n    </div>\n  </div>\n</div>\n", styles: [".jobcode_detailprt{position:absolute;left:300px;bottom:10px;background:white;padding:10px 20px;border-radius:20px;width:calc(100% - 315px);z-index:999;box-shadow:0 0 5px #0000001a;height:250px;cursor:move}@media (min-width: 1600px){.jobcode_detailprt{left:307px;width:calc(100% - 325px)}}.jobcode_detailprt .topheadingprt .driver_list ul{display:flex;width:450px;justify-content:flex-end}.jobcode_detailprt .topheadingprt .driver_list ul li{position:relative;margin:0 -6px 2px 0;cursor:pointer}.jobcode_detailprt .topheadingprt .driver_list ul li img{width:30px;height:30px;border-radius:100%;border:1px solid #fff}.jobcode_detailprt .topheadingprt .driver_list ul li:hover .driver_detail{display:flex}.jobcode_detailprt .topheadingprt .driver_list ul li .driver_detail{position:absolute;top:-70px;left:-50px;display:none;will-change:transform;pointer-events:none;border-radius:10px;box-shadow:0 4px 4px #00000024;width:133px;background:white;text-align:center;padding:10px;flex-direction:column;font-size:.8125rem}.jobcode_detailprt .topheadingprt .driver_list ul li .driver_detail b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:135px}.jobcode_detailprt .topheadingprt .driver_list ul li .driver_detail span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:117px;display:block}.jobcode_detailprt .topheadingprt .driver_list ul li .driver_detail:after{width:0;height:0;border-top:15px solid white;border-left:10px solid transparent;border-right:10px solid transparent;z-index:1;content:\"\";position:absolute;filter:drop-shadow(0px 3px 1px rgba(0,0,0,.2));bottom:-14px;left:50%;transform:translate(-50%)}.jobcode_detailprt .topheadingprt .driver_list ul li.extraicon{background:white;width:30px;height:30px;border-radius:100%;display:flex;justify-content:center;align-items:center;margin:0 0 0 10px;border:1px solid #eee}.jobcode_detailprt .close{position:absolute;top:10px;right:20px;background:#e8e8e8;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer}@keyframes autoslide{to{transform:translate(calc(90vw - 100%))}0%{transform:translate(0)}}.jobcode_detailprt .job_details_area{padding:15px 0}.jobcode_detailprt .job_details_area .detailnameprt{display:flex;justify-content:space-between}.jobcode_detailprt .job_details_area .detailnameprt span{display:flex;flex-direction:column;font-size:.875rem;color:#767676}.jobcode_detailprt .job_details_area .detailnameprt span b{font-size:.9375rem;font-weight:500;color:#000}.route_listprt .listing_toggle{background:white;border-radius:15px;padding:5px;position:absolute;right:10px;top:20px;cursor:pointer}.route_listprt .listing_toggle img{width:28px}.route_listprt .listing_box{background:#282828;height:100vh;position:fixed;right:0;top:0;z-index:1111;box-shadow:-3px 0 5px #ffffff14;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;width:0;border-radius:40px 0 0;opacity:0}.route_listprt .listing_box .closebtn{display:none}.route_listprt .listing_box ul{padding:0 20px 0 0}.route_listprt .listing_box ul li{background:#4a4a4a;padding:10px 15px;border-radius:15px;display:flex;margin-bottom:10px;position:relative;height:inherit}@media (min-width: 1600px){.route_listprt .listing_box ul li{padding:6px 15px;margin-bottom:5px}}.route_listprt .listing_box ul li .iconprt{display:flex;flex-direction:column}.route_listprt .listing_box ul li .iconprt span{display:flex;align-items:center;margin-bottom:32px}.route_listprt .listing_box ul li .iconprt span input[type=checkbox]{width:100%;height:100%;margin-right:10px;opacity:0;position:absolute;left:0;margin-left:0;top:0;z-index:3;cursor:pointer}.route_listprt .listing_box ul li .iconprt span input[type=checkbox]:checked+label{background:url(../../../assets/images/fill-check.png) 16px 15px no-repeat}.route_listprt .listing_box ul li .iconprt span label{background:url(../../../assets/images/blank-check.png) 16px 15px no-repeat;width:100%;position:relative;z-index:2;font-size:12px;color:#878787;height:100%;position:absolute;top:0;left:0}.route_listprt .listing_box ul li .iconprt span .border{position:absolute;width:100%;height:100%;left:0;right:0;top:0;border-radius:15px}.route_listprt .listing_box ul li .iconprt span input:checked~.border{border-left:1px solid white;border-right:1px solid white;border-top:1px solid white;border-bottom:1px solid white}.route_listprt .listing_box ul li .iconprt span h2{margin-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;padding-left:16px;font-size:.9rem;margin-bottom:0;font-weight:400;margin-top:0}.route_listprt .listing_box ul li .iconprt .statusunit{border-radius:30px;font-size:0;color:#fff;text-transform:capitalize;font-weight:500;width:20px;height:20px;text-align:center;line-height:20px;margin-bottom:7px}.route_listprt .listing_box ul li .iconprt .statusunit:first-letter{font-size:.8rem}.route_listprt .listing_box ul li .iconprt .statusunit.Ton{background:#ff7272}.route_listprt .listing_box ul li .iconprt .statusunit.Load{background:#a3c52e}.route_listprt .listing_box ul li .iconprt .statusunit.Hourly{background:#ae23d1}@media (min-width: 1600px){.route_listprt .listing_box ul li .iconprt .statusunit{line-height:21px}}.route_listprt .listing_box ul li .iconprt .infoicon{z-index:5;cursor:pointer}.route_listprt .listing_box ul li .iconprt .infoicon img{width:20px;height:20px}.route_listprt .listing_box ul li .pickprtbox{margin-left:10px}.route_listprt .listing_box ul li .pickprtbox h2{font-size:.9rem;margin:3px 0 5px;white-space:nowrap;text-overflow:ellipsis;max-width:195px;overflow:hidden}.route_listprt .listing_box ul li h3{font-size:.8rem;color:#979797;font-weight:600;margin-top:0;white-space:nowrap;text-overflow:ellipsis;max-width:195px;overflow:hidden;margin-bottom:5px}.route_listprt .listing_box ul li .pickdropprt{font-size:.75rem}.route_listprt .listing_box ul li .pickdropprt .pickprt{position:relative;display:flex;align-items:center;padding-bottom:10px}.route_listprt .listing_box ul li .pickdropprt .pickprt span{padding-left:0;padding-right:20px;display:block}.route_listprt .listing_box ul li .pickdropprt .pickprt b{position:relative}.route_listprt .listing_box ul li .pickdropprt .pickprt b:after{background:#bcbcbc;width:1px;height:100%;left:3px;content:\"\";position:absolute;top:10px}.route_listprt .listing_box ul li .pickdropprt .pickprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;color:#bcbcbc;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.route_listprt .listing_box ul li .pickdropprt .pickprt h4:before{background:#bcbcbc;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.route_listprt .listing_box ul li .pickdropprt .dropprt{position:relative;padding-bottom:10px;display:flex;align-items:center}.route_listprt .listing_box ul li .pickdropprt .dropprt span{padding-left:0;padding-right:20px;display:block}.route_listprt .listing_box ul li .pickdropprt .dropprt b{position:relative}.route_listprt .listing_box ul li .pickdropprt .dropprt b:after{background:#bcbcbc;width:1px;height:12px;left:3px;content:\"\";position:absolute;top:-7px}.route_listprt .listing_box ul li .pickdropprt .dropprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;color:#bcbcbc;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.route_listprt .listing_box ul li .pickdropprt .dropprt h4:before{background:#bcbcbc;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.route_listprt.show .listing_box{width:300px;max-width:300px;flex:0 0 350px;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;padding:40px 0 40px 20px;opacity:1}.route_listprt.show .listing_box h2{color:#fff;white-space:nowrap}.route_listprt.show .listing_box .closebtn{position:absolute;left:-33px;top:50px;background:#282828;color:#fff;padding:8px;border-top-left-radius:15px;border-bottom-left-radius:15px;cursor:pointer;box-shadow:-4px 2px 5px #ffffff14;display:block}.overlap{z-index:9999}.btnprt{display:flex;justify-content:space-between;align-items:center;padding-right:20px}.btnprt h2{margin:0}.btnprt button{font-size:15px;padding:8px 20px;background-color:#326ad3;color:#fff;border:none;border-radius:10px;box-shadow:none;outline:none}.hidden{display:none}.route_detail{background:#282828;position:absolute;width:260px;top:50%;transform:translateY(-50%);right:310px;border-radius:20px;padding:10px;box-shadow:0 0 5px #ffffff36}.route_detail .destination .duration{background:#444343;border:1px solid #918e8e;padding:10px;color:#fff}.route_detail .destination .duration b{color:#fff}.route_detail .destination .pickprt:before,.route_detail .destination .dropprt:before{background:#fff}.route_detail .destination .pickprt b:before,.route_detail .destination .dropprt b:before{background:#fff}.route_detail .destination span{line-height:20px;color:#fff;padding:3px 0}.route_detail .destination span b{color:#fff}.route_detail .destination span.notes{max-height:200px;overflow:auto}.createTxt small{color:#fff;font-size:.7rem}.closebtnroutedetail{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#f5f5f5;position:absolute;top:-7px;left:-11px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.UtilsService }, { type: i1.CoolmapService }]; }, propDecorators: { jobdetail: [{
-                type: Input
-            }], clearJobDetails: [{
-                type: Output
+class JobCodeComponent {
+    constructor(utils, coolMap) {
+        this.utils = utils;
+        this.coolMap = coolMap;
+        this.isVisible = false;
+        this.routes = [];
+        this.selectedRoute = new SelectionModel(true, []);
+        this.clearJobDetails = new EventEmitter();
+        this.isOverlapRouteSection = false;
+        this.destroyer$ = new Subject();
+        this.preventMouseout = false;
+        this.utils.clearViewRouteforJobCodeObserve.pipe(takeUntil(this.destroyer$)).subscribe(res => {
+            if (res)
+                this.coolMap.removeJobFromMap(this.selectedRoute.selected);
+            this.selectedRoute.clear();
+        });
+    }
+    ngOnInit() { this.getRouteList(); }
+    getRouteList() {
+        this.utils.getData('coolmap/routes/all').pipe(takeUntil(this.destroyer$)).subscribe((res) => {
+            if (res) {
+                this.routes = res.data;
+                this.masterRoutes = res.data;
+                this.preventListUpdate = false;
+                this.utils.clearOptions();
+                this.routes.forEach((ele) => { this.utils.makeOptions(ele); });
+            }
+        });
+    }
+    toggleSidemenu() {
+        this.isVisible = !this.isVisible;
+        this.detailsCardEnable = false;
+        this.preventMouseout = false;
+    }
+    clearJob() { this.clearJobDetails.emit(true); this.utils.preVentJobdetailclose.next(false); }
+    selectRoute(event) {
+        const i = this.selectedRoute.selected.findIndex(ele => ele['order_number'] === event['order_number']);
+        this.selectedRoute.toggle(event);
+        if (!this.selectedRoute.isSelected(event) && event['route_id']) {
+            this.coolMap.removeRouteAndMarker(event['route_id']).then((res) => {
+                this.coolMap.extendReBound();
+            });
+        }
+        else {
+            this.coolMap.plotRoute(event, event['route_id'], 'jobrouteList', false, true);
+        }
+    }
+    masterToggle() {
+        if (this.routes.length === this.selectedRoute.selected.length) {
+            this.selectedRoute.clear();
+            this.routes.forEach(row => {
+                this.coolMap.removeRouteAndMarker(row['route_id']).then((res) => { this.coolMap.extendReBound(); });
+            });
+        }
+        else {
+            this.routes.forEach(row => {
+                this.selectedRoute.select(row);
+                this.coolMap.plotRoute(row, row['route_id'], 'jobrouteList', false, true);
+            });
+        }
+    }
+    togglerouteDetails(eventType, route, mouseOut) {
+        if (typeof (eventType) === 'string') {
+            this.preventMouseout = true;
+            this.utils.setdictValue('route-details', JSON.stringify(route));
+        }
+        if (typeof (eventType) === 'boolean' && eventType && !this.preventMouseout) {
+            this.detailsCardEnable = eventType;
+        }
+        ;
+        if (typeof (eventType) === 'boolean' && !eventType && !this.preventMouseout) {
+            this.detailsCardEnable = eventType;
+        }
+        ;
+        if (this.preventMouseout && !this.detailsCardEnable)
+            this.preventMouseout = false;
+        if (mouseOut) {
+            if (this.preventMouseout) {
+                route = this.utils.getdictValue('route-details');
+                this.routeCardDetail = route;
+            }
+            if (!this.preventMouseout) {
+                this.routeCardDetail = route;
+            }
+        }
+        else {
+            this.routeCardDetail = route;
+        }
+        this.routeCardDetail['created_at'] = this.utils.getDateFormat(new Date(this.routeCardDetail['created_at']), '/');
+    }
+    ngOnDestroy() {
+        this.destroyer$.next(true);
+        this.destroyer$.unsubscribe();
+    }
+}
+JobCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: JobCodeComponent, deps: [{ token: i1.UtilsService }, { token: i1.CoolmapService }], target: i0.ɵɵFactoryTarget.Component });
+JobCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: JobCodeComponent, selector: "app-job-code", inputs: { jobdetail: "jobdetail" }, outputs: { clearJobDetails: "clearJobDetails" }, ngImport: i0, template: "<div class=\"jobcode_detailprt\" (click)=\"isOverlapRouteSection = false\"  *ngIf=\"jobdetail\" [ngClass]=\"{'overlap': !isOverlapRouteSection}\" cdkDrag>\r\n  <div class=\"topheadingprt\" *ngIf=\"jobdetail['order_number']\">\r\n    <h2>{{jobdetail['order_number']}}</h2>\r\n  </div>\r\n  <span class=\"close\"><mat-icon (click)=\"clearJob()\">clear</mat-icon></span>\r\n  <div class=\"job_details_area\">\r\n    <div class=\"detailnameprt\">\r\n      <span> <b> {{jobdetail.customer_name}} </b> Customer </span>\r\n      <app-jobcode-status [jobValue]=\"jobdetail\"></app-jobcode-status>\r\n    </div>\r\n    <app-jobcode-overview [jobValue]=\"jobdetail\"></app-jobcode-overview>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"route_listprt\" (click)=\"isOverlapRouteSection = true\" [ngClass]=\"{ 'show': isVisible, 'overlap': isOverlapRouteSection}\">\r\n  <div class=\"listing_toggle\" (click)=\"toggleSidemenu()\">\r\n    <img src=\"assets/images/route.svg\" alt=\"\" />\r\n  </div>\r\n\r\n  <div class=\"listing_box\">\r\n    <div class=\"closebtn\" (click)=\"toggleSidemenu()\">\r\n      <mat-icon>clear</mat-icon>\r\n    </div>\r\n\r\n    <div class=\"btnprt\">\r\n      <h2> List of Routes </h2>\r\n      <button (click)=\"masterToggle()\">{{routes && routes.length > 0 && routes.length === selectedRoute.selected.length ? 'Uncheck' : 'Check'}} All</button>\r\n    </div>\r\n\r\n    <app-job-route-list [routes]=\"routes\" [masterRoutes]=\"masterRoutes\" [selectedRoute]=\"selectedRoute\" (changeRoutes)=\"routes = $event\" (changeSelectedRoute)=\"selectedRoute = $event\"></app-job-route-list>\r\n\r\n    <perfect-scrollbar>\r\n      <ul *ngIf=\"routes['length'] > 0\">\r\n        <li *ngFor=\"let list of routes\">\r\n          <div class=\"iconprt\">\r\n            <span>\r\n              <input type=\"checkbox\" [checked]=\"selectedRoute.isSelected(list)\"\r\n                (change)=\"$event ? selectRoute(list) : null\" /><label>&nbsp;</label>\r\n              <div class=\"border\"></div>\r\n            </span>\r\n            <div class=\"statusunit\" [ngClass]=\"list['unit']\">{{list['unit']}}</div>\r\n            <div class=\"infoicon\">\r\n              <img (mouseenter)=\"togglerouteDetails(true, list)\" (mouseout)=\"togglerouteDetails(false, list, true)\"\r\n              (click)=\"togglerouteDetails('click', list)\" src=\"assets/images/info_icon.png\" [alt]=\"\" />\r\n            </div>\r\n          </div>\r\n          <div class=\"pickprtbox\">\r\n            <h2> {{list['route_name']}} </h2>\r\n            <h3>{{list['customer_name']}} | {{list['material']}}</h3>\r\n            <div class=\"pickdropprt\">\r\n              <div class=\"pickprt\">\r\n                <b>\r\n                  <h4>{{list['pickup_location']}}</h4>\r\n                </b>\r\n              </div>\r\n              <div class=\"dropprt\">\r\n                <b>\r\n                  <h4>{{list['delivery_location']}}</h4>\r\n                </b>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </li>\r\n      </ul>\r\n      <p style=\"color: #fff;\" *ngIf=\"routes.length === 0\">No Route found</p>\r\n    </perfect-scrollbar>\r\n  </div>\r\n\r\n  <div class=\"route_detail\" *ngIf=\"detailsCardEnable\">\r\n    <div class=\"closebtnroutedetail\" (click)=\"detailsCardEnable = false; preventMouseout = false\">\r\n      <mat-icon>clear</mat-icon>\r\n    </div>\r\n    <div class=\"destination\">\r\n      <div class=\"duration\">\r\n        <p class=\"pickprt\"><b>Pickup:</b> {{routeCardDetail?.pickup_location}}</p>\r\n        <p class=\"dropprt\"><b>Delivery:</b> {{routeCardDetail?.delivery_location}} </p>\r\n      </div>\r\n      <span><b>Name:</b> {{routeCardDetail?.route_name}}</span>\r\n      <span><b>Customer:</b> {{routeCardDetail?.customer_name}}</span>\r\n      <span><b>Material:</b> {{routeCardDetail?.material}}</span>\r\n      <span><b>Type:</b> {{routeCardDetail?.unit}}</span>\r\n      <span><b>Distance:</b> {{routeCardDetail?.estimated_distance}}</span>\r\n      <span><b>Travel Time:</b> {{routeCardDetail?.estimated_time}}</span>\r\n      <span class=\"notes\"><b>Notes:</b> {{routeCardDetail?.note}}</span>\r\n    </div>\r\n\r\n    <div class=\"createTxt\">\r\n      <small>\r\n        Created by {{routeCardDetail?.created_by_name}} on {{routeCardDetail?.created_at}}\r\n      </small>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".jobcode_detailprt{position:absolute;left:300px;bottom:10px;background:white;padding:10px 20px;border-radius:20px;width:calc(100% - 315px);z-index:999;box-shadow:0 0 5px #0000001a;height:250px;cursor:move}@media (min-width: 1600px){.jobcode_detailprt{left:307px;width:calc(100% - 325px)}}.jobcode_detailprt .topheadingprt .driver_list ul{display:flex;width:450px;justify-content:flex-end}.jobcode_detailprt .topheadingprt .driver_list ul li{position:relative;margin:0 -6px 2px 0;cursor:pointer}.jobcode_detailprt .topheadingprt .driver_list ul li img{width:30px;height:30px;border-radius:100%;border:1px solid #fff}.jobcode_detailprt .topheadingprt .driver_list ul li:hover .driver_detail{display:flex}.jobcode_detailprt .topheadingprt .driver_list ul li .driver_detail{position:absolute;top:-70px;left:-50px;display:none;will-change:transform;pointer-events:none;border-radius:10px;box-shadow:0 4px 4px #00000024;width:133px;background:white;text-align:center;padding:10px;flex-direction:column;font-size:.8125rem}.jobcode_detailprt .topheadingprt .driver_list ul li .driver_detail b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:135px}.jobcode_detailprt .topheadingprt .driver_list ul li .driver_detail span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:117px;display:block}.jobcode_detailprt .topheadingprt .driver_list ul li .driver_detail:after{width:0;height:0;border-top:15px solid white;border-left:10px solid transparent;border-right:10px solid transparent;z-index:1;content:\"\";position:absolute;filter:drop-shadow(0px 3px 1px rgba(0,0,0,.2));bottom:-14px;left:50%;transform:translate(-50%)}.jobcode_detailprt .topheadingprt .driver_list ul li.extraicon{background:white;width:30px;height:30px;border-radius:100%;display:flex;justify-content:center;align-items:center;margin:0 0 0 10px;border:1px solid #eee}.jobcode_detailprt .close{position:absolute;top:10px;right:20px;background:#e8e8e8;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer}@keyframes autoslide{to{transform:translate(calc(90vw - 100%))}0%{transform:translate(0)}}.jobcode_detailprt .job_details_area{padding:15px 0}.jobcode_detailprt .job_details_area .detailnameprt{display:flex;justify-content:space-between}.jobcode_detailprt .job_details_area .detailnameprt span{display:flex;flex-direction:column;font-size:.875rem;color:#767676}.jobcode_detailprt .job_details_area .detailnameprt span b{font-size:.9375rem;font-weight:500;color:#000}.route_listprt .listing_toggle{background:white;border-radius:15px;padding:5px;position:absolute;right:10px;top:20px;cursor:pointer}.route_listprt .listing_toggle img{width:28px}.route_listprt .listing_box{background:#282828;height:100vh;position:fixed;right:0;top:0;z-index:1111;box-shadow:-3px 0 5px #ffffff14;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;width:0;border-radius:40px 0 0;opacity:0}.route_listprt .listing_box .closebtn{display:none}.route_listprt .listing_box ul{padding:0 20px 0 0}.route_listprt .listing_box ul li{background:#4a4a4a;padding:10px 15px;border-radius:15px;display:flex;margin-bottom:10px;position:relative;height:inherit}@media (min-width: 1600px){.route_listprt .listing_box ul li{padding:6px 15px;margin-bottom:5px}}.route_listprt .listing_box ul li .iconprt{display:flex;flex-direction:column}.route_listprt .listing_box ul li .iconprt span{display:flex;align-items:center;margin-bottom:32px}.route_listprt .listing_box ul li .iconprt span input[type=checkbox]{width:100%;height:100%;margin-right:10px;opacity:0;position:absolute;left:0;margin-left:0;top:0;z-index:3;cursor:pointer}.route_listprt .listing_box ul li .iconprt span input[type=checkbox]:checked+label{background:url(../../../assets/images/fill-check.png) 16px 15px no-repeat}.route_listprt .listing_box ul li .iconprt span label{background:url(../../../assets/images/blank-check.png) 16px 15px no-repeat;width:100%;position:relative;z-index:2;font-size:12px;color:#878787;height:100%;position:absolute;top:0;left:0}.route_listprt .listing_box ul li .iconprt span .border{position:absolute;width:100%;height:100%;left:0;right:0;top:0;border-radius:15px}.route_listprt .listing_box ul li .iconprt span input:checked~.border{border-left:1px solid white;border-right:1px solid white;border-top:1px solid white;border-bottom:1px solid white}.route_listprt .listing_box ul li .iconprt span h2{margin-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;padding-left:16px;font-size:.9rem;margin-bottom:0;font-weight:400;margin-top:0}.route_listprt .listing_box ul li .iconprt .statusunit{border-radius:30px;font-size:0;color:#fff;text-transform:capitalize;font-weight:500;width:20px;height:20px;text-align:center;line-height:20px;margin-bottom:7px}.route_listprt .listing_box ul li .iconprt .statusunit:first-letter{font-size:.8rem}.route_listprt .listing_box ul li .iconprt .statusunit.Ton{background:#ff7272}.route_listprt .listing_box ul li .iconprt .statusunit.Load{background:#a3c52e}.route_listprt .listing_box ul li .iconprt .statusunit.Hourly{background:#ae23d1}@media (min-width: 1600px){.route_listprt .listing_box ul li .iconprt .statusunit{line-height:21px}}.route_listprt .listing_box ul li .iconprt .infoicon{z-index:5;cursor:pointer}.route_listprt .listing_box ul li .iconprt .infoicon img{width:20px;height:20px}.route_listprt .listing_box ul li .pickprtbox{margin-left:10px}.route_listprt .listing_box ul li .pickprtbox h2{font-size:.9rem;margin:3px 0 5px;white-space:nowrap;text-overflow:ellipsis;max-width:195px;overflow:hidden}.route_listprt .listing_box ul li h3{font-size:.8rem;color:#979797;font-weight:600;margin-top:0;white-space:nowrap;text-overflow:ellipsis;max-width:195px;overflow:hidden;margin-bottom:5px}.route_listprt .listing_box ul li .pickdropprt{font-size:.75rem}.route_listprt .listing_box ul li .pickdropprt .pickprt{position:relative;display:flex;align-items:center;padding-bottom:10px}.route_listprt .listing_box ul li .pickdropprt .pickprt span{padding-left:0;padding-right:20px;display:block}.route_listprt .listing_box ul li .pickdropprt .pickprt b{position:relative}.route_listprt .listing_box ul li .pickdropprt .pickprt b:after{background:#bcbcbc;width:1px;height:100%;left:3px;content:\"\";position:absolute;top:10px}.route_listprt .listing_box ul li .pickdropprt .pickprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;color:#bcbcbc;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.route_listprt .listing_box ul li .pickdropprt .pickprt h4:before{background:#bcbcbc;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.route_listprt .listing_box ul li .pickdropprt .dropprt{position:relative;padding-bottom:10px;display:flex;align-items:center}.route_listprt .listing_box ul li .pickdropprt .dropprt span{padding-left:0;padding-right:20px;display:block}.route_listprt .listing_box ul li .pickdropprt .dropprt b{position:relative}.route_listprt .listing_box ul li .pickdropprt .dropprt b:after{background:#bcbcbc;width:1px;height:12px;left:3px;content:\"\";position:absolute;top:-7px}.route_listprt .listing_box ul li .pickdropprt .dropprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;color:#bcbcbc;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.route_listprt .listing_box ul li .pickdropprt .dropprt h4:before{background:#bcbcbc;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.route_listprt.show .listing_box{width:300px;max-width:300px;flex:0 0 350px;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;padding:40px 0 40px 20px;opacity:1}.route_listprt.show .listing_box h2{color:#fff;white-space:nowrap}.route_listprt.show .listing_box .closebtn{position:absolute;left:-33px;top:50px;background:#282828;color:#fff;padding:8px;border-top-left-radius:15px;border-bottom-left-radius:15px;cursor:pointer;box-shadow:-4px 2px 5px #ffffff14;display:block}.overlap{z-index:9999}.btnprt{display:flex;justify-content:space-between;align-items:center;padding-right:20px}.btnprt h2{margin:0}.btnprt button{font-size:15px;padding:8px 20px;background-color:#326ad3;color:#fff;border:none;border-radius:10px;box-shadow:none;outline:none}.hidden{display:none}.route_detail{background:#282828;position:absolute;width:260px;top:50%;transform:translateY(-50%);right:310px;border-radius:20px;padding:10px;box-shadow:0 0 5px #ffffff36}.route_detail .destination .duration{background:#444343;border:1px solid #918e8e;padding:10px;color:#fff}.route_detail .destination .duration b{color:#fff}.route_detail .destination .pickprt:before,.route_detail .destination .dropprt:before{background:#fff}.route_detail .destination .pickprt b:before,.route_detail .destination .dropprt b:before{background:#fff}.route_detail .destination span{line-height:20px;color:#fff;padding:3px 0}.route_detail .destination span b{color:#fff}.route_detail .destination span.notes{max-height:200px;overflow:auto}.createTxt small{color:#fff;font-size:.7rem}.closebtnroutedetail{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#f5f5f5;position:absolute;top:-7px;left:-11px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.PerfectScrollbarComponent, selector: "perfect-scrollbar", inputs: ["disabled", "usePSClass", "autoPropagation", "scrollIndicators", "config"], outputs: ["psScrollY", "psScrollX", "psScrollUp", "psScrollDown", "psScrollLeft", "psScrollRight", "psYReachEnd", "psYReachStart", "psXReachEnd", "psXReachStart"], exportAs: ["ngxPerfectScrollbar"] }, { kind: "component", type: JobRouteListComponent, selector: "app-job-route-list", inputs: ["routes", "selectedRoute", "masterRoutes"], outputs: ["changeNav", "changeRoutes", "changeSelectedRoute"] }, { kind: "component", type: JobcodeStatusComponent, selector: "app-jobcode-status", inputs: ["jobValue"] }, { kind: "component", type: JobcodeOverviewComponent, selector: "app-jobcode-overview", inputs: ["jobValue"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: JobCodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-job-code', template: "<div class=\"jobcode_detailprt\" (click)=\"isOverlapRouteSection = false\"  *ngIf=\"jobdetail\" [ngClass]=\"{'overlap': !isOverlapRouteSection}\" cdkDrag>\r\n  <div class=\"topheadingprt\" *ngIf=\"jobdetail['order_number']\">\r\n    <h2>{{jobdetail['order_number']}}</h2>\r\n  </div>\r\n  <span class=\"close\"><mat-icon (click)=\"clearJob()\">clear</mat-icon></span>\r\n  <div class=\"job_details_area\">\r\n    <div class=\"detailnameprt\">\r\n      <span> <b> {{jobdetail.customer_name}} </b> Customer </span>\r\n      <app-jobcode-status [jobValue]=\"jobdetail\"></app-jobcode-status>\r\n    </div>\r\n    <app-jobcode-overview [jobValue]=\"jobdetail\"></app-jobcode-overview>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"route_listprt\" (click)=\"isOverlapRouteSection = true\" [ngClass]=\"{ 'show': isVisible, 'overlap': isOverlapRouteSection}\">\r\n  <div class=\"listing_toggle\" (click)=\"toggleSidemenu()\">\r\n    <img src=\"assets/images/route.svg\" alt=\"\" />\r\n  </div>\r\n\r\n  <div class=\"listing_box\">\r\n    <div class=\"closebtn\" (click)=\"toggleSidemenu()\">\r\n      <mat-icon>clear</mat-icon>\r\n    </div>\r\n\r\n    <div class=\"btnprt\">\r\n      <h2> List of Routes </h2>\r\n      <button (click)=\"masterToggle()\">{{routes && routes.length > 0 && routes.length === selectedRoute.selected.length ? 'Uncheck' : 'Check'}} All</button>\r\n    </div>\r\n\r\n    <app-job-route-list [routes]=\"routes\" [masterRoutes]=\"masterRoutes\" [selectedRoute]=\"selectedRoute\" (changeRoutes)=\"routes = $event\" (changeSelectedRoute)=\"selectedRoute = $event\"></app-job-route-list>\r\n\r\n    <perfect-scrollbar>\r\n      <ul *ngIf=\"routes['length'] > 0\">\r\n        <li *ngFor=\"let list of routes\">\r\n          <div class=\"iconprt\">\r\n            <span>\r\n              <input type=\"checkbox\" [checked]=\"selectedRoute.isSelected(list)\"\r\n                (change)=\"$event ? selectRoute(list) : null\" /><label>&nbsp;</label>\r\n              <div class=\"border\"></div>\r\n            </span>\r\n            <div class=\"statusunit\" [ngClass]=\"list['unit']\">{{list['unit']}}</div>\r\n            <div class=\"infoicon\">\r\n              <img (mouseenter)=\"togglerouteDetails(true, list)\" (mouseout)=\"togglerouteDetails(false, list, true)\"\r\n              (click)=\"togglerouteDetails('click', list)\" src=\"assets/images/info_icon.png\" [alt]=\"\" />\r\n            </div>\r\n          </div>\r\n          <div class=\"pickprtbox\">\r\n            <h2> {{list['route_name']}} </h2>\r\n            <h3>{{list['customer_name']}} | {{list['material']}}</h3>\r\n            <div class=\"pickdropprt\">\r\n              <div class=\"pickprt\">\r\n                <b>\r\n                  <h4>{{list['pickup_location']}}</h4>\r\n                </b>\r\n              </div>\r\n              <div class=\"dropprt\">\r\n                <b>\r\n                  <h4>{{list['delivery_location']}}</h4>\r\n                </b>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </li>\r\n      </ul>\r\n      <p style=\"color: #fff;\" *ngIf=\"routes.length === 0\">No Route found</p>\r\n    </perfect-scrollbar>\r\n  </div>\r\n\r\n  <div class=\"route_detail\" *ngIf=\"detailsCardEnable\">\r\n    <div class=\"closebtnroutedetail\" (click)=\"detailsCardEnable = false; preventMouseout = false\">\r\n      <mat-icon>clear</mat-icon>\r\n    </div>\r\n    <div class=\"destination\">\r\n      <div class=\"duration\">\r\n        <p class=\"pickprt\"><b>Pickup:</b> {{routeCardDetail?.pickup_location}}</p>\r\n        <p class=\"dropprt\"><b>Delivery:</b> {{routeCardDetail?.delivery_location}} </p>\r\n      </div>\r\n      <span><b>Name:</b> {{routeCardDetail?.route_name}}</span>\r\n      <span><b>Customer:</b> {{routeCardDetail?.customer_name}}</span>\r\n      <span><b>Material:</b> {{routeCardDetail?.material}}</span>\r\n      <span><b>Type:</b> {{routeCardDetail?.unit}}</span>\r\n      <span><b>Distance:</b> {{routeCardDetail?.estimated_distance}}</span>\r\n      <span><b>Travel Time:</b> {{routeCardDetail?.estimated_time}}</span>\r\n      <span class=\"notes\"><b>Notes:</b> {{routeCardDetail?.note}}</span>\r\n    </div>\r\n\r\n    <div class=\"createTxt\">\r\n      <small>\r\n        Created by {{routeCardDetail?.created_by_name}} on {{routeCardDetail?.created_at}}\r\n      </small>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".jobcode_detailprt{position:absolute;left:300px;bottom:10px;background:white;padding:10px 20px;border-radius:20px;width:calc(100% - 315px);z-index:999;box-shadow:0 0 5px #0000001a;height:250px;cursor:move}@media (min-width: 1600px){.jobcode_detailprt{left:307px;width:calc(100% - 325px)}}.jobcode_detailprt .topheadingprt .driver_list ul{display:flex;width:450px;justify-content:flex-end}.jobcode_detailprt .topheadingprt .driver_list ul li{position:relative;margin:0 -6px 2px 0;cursor:pointer}.jobcode_detailprt .topheadingprt .driver_list ul li img{width:30px;height:30px;border-radius:100%;border:1px solid #fff}.jobcode_detailprt .topheadingprt .driver_list ul li:hover .driver_detail{display:flex}.jobcode_detailprt .topheadingprt .driver_list ul li .driver_detail{position:absolute;top:-70px;left:-50px;display:none;will-change:transform;pointer-events:none;border-radius:10px;box-shadow:0 4px 4px #00000024;width:133px;background:white;text-align:center;padding:10px;flex-direction:column;font-size:.8125rem}.jobcode_detailprt .topheadingprt .driver_list ul li .driver_detail b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:135px}.jobcode_detailprt .topheadingprt .driver_list ul li .driver_detail span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:117px;display:block}.jobcode_detailprt .topheadingprt .driver_list ul li .driver_detail:after{width:0;height:0;border-top:15px solid white;border-left:10px solid transparent;border-right:10px solid transparent;z-index:1;content:\"\";position:absolute;filter:drop-shadow(0px 3px 1px rgba(0,0,0,.2));bottom:-14px;left:50%;transform:translate(-50%)}.jobcode_detailprt .topheadingprt .driver_list ul li.extraicon{background:white;width:30px;height:30px;border-radius:100%;display:flex;justify-content:center;align-items:center;margin:0 0 0 10px;border:1px solid #eee}.jobcode_detailprt .close{position:absolute;top:10px;right:20px;background:#e8e8e8;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer}@keyframes autoslide{to{transform:translate(calc(90vw - 100%))}0%{transform:translate(0)}}.jobcode_detailprt .job_details_area{padding:15px 0}.jobcode_detailprt .job_details_area .detailnameprt{display:flex;justify-content:space-between}.jobcode_detailprt .job_details_area .detailnameprt span{display:flex;flex-direction:column;font-size:.875rem;color:#767676}.jobcode_detailprt .job_details_area .detailnameprt span b{font-size:.9375rem;font-weight:500;color:#000}.route_listprt .listing_toggle{background:white;border-radius:15px;padding:5px;position:absolute;right:10px;top:20px;cursor:pointer}.route_listprt .listing_toggle img{width:28px}.route_listprt .listing_box{background:#282828;height:100vh;position:fixed;right:0;top:0;z-index:1111;box-shadow:-3px 0 5px #ffffff14;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;width:0;border-radius:40px 0 0;opacity:0}.route_listprt .listing_box .closebtn{display:none}.route_listprt .listing_box ul{padding:0 20px 0 0}.route_listprt .listing_box ul li{background:#4a4a4a;padding:10px 15px;border-radius:15px;display:flex;margin-bottom:10px;position:relative;height:inherit}@media (min-width: 1600px){.route_listprt .listing_box ul li{padding:6px 15px;margin-bottom:5px}}.route_listprt .listing_box ul li .iconprt{display:flex;flex-direction:column}.route_listprt .listing_box ul li .iconprt span{display:flex;align-items:center;margin-bottom:32px}.route_listprt .listing_box ul li .iconprt span input[type=checkbox]{width:100%;height:100%;margin-right:10px;opacity:0;position:absolute;left:0;margin-left:0;top:0;z-index:3;cursor:pointer}.route_listprt .listing_box ul li .iconprt span input[type=checkbox]:checked+label{background:url(../../../assets/images/fill-check.png) 16px 15px no-repeat}.route_listprt .listing_box ul li .iconprt span label{background:url(../../../assets/images/blank-check.png) 16px 15px no-repeat;width:100%;position:relative;z-index:2;font-size:12px;color:#878787;height:100%;position:absolute;top:0;left:0}.route_listprt .listing_box ul li .iconprt span .border{position:absolute;width:100%;height:100%;left:0;right:0;top:0;border-radius:15px}.route_listprt .listing_box ul li .iconprt span input:checked~.border{border-left:1px solid white;border-right:1px solid white;border-top:1px solid white;border-bottom:1px solid white}.route_listprt .listing_box ul li .iconprt span h2{margin-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;padding-left:16px;font-size:.9rem;margin-bottom:0;font-weight:400;margin-top:0}.route_listprt .listing_box ul li .iconprt .statusunit{border-radius:30px;font-size:0;color:#fff;text-transform:capitalize;font-weight:500;width:20px;height:20px;text-align:center;line-height:20px;margin-bottom:7px}.route_listprt .listing_box ul li .iconprt .statusunit:first-letter{font-size:.8rem}.route_listprt .listing_box ul li .iconprt .statusunit.Ton{background:#ff7272}.route_listprt .listing_box ul li .iconprt .statusunit.Load{background:#a3c52e}.route_listprt .listing_box ul li .iconprt .statusunit.Hourly{background:#ae23d1}@media (min-width: 1600px){.route_listprt .listing_box ul li .iconprt .statusunit{line-height:21px}}.route_listprt .listing_box ul li .iconprt .infoicon{z-index:5;cursor:pointer}.route_listprt .listing_box ul li .iconprt .infoicon img{width:20px;height:20px}.route_listprt .listing_box ul li .pickprtbox{margin-left:10px}.route_listprt .listing_box ul li .pickprtbox h2{font-size:.9rem;margin:3px 0 5px;white-space:nowrap;text-overflow:ellipsis;max-width:195px;overflow:hidden}.route_listprt .listing_box ul li h3{font-size:.8rem;color:#979797;font-weight:600;margin-top:0;white-space:nowrap;text-overflow:ellipsis;max-width:195px;overflow:hidden;margin-bottom:5px}.route_listprt .listing_box ul li .pickdropprt{font-size:.75rem}.route_listprt .listing_box ul li .pickdropprt .pickprt{position:relative;display:flex;align-items:center;padding-bottom:10px}.route_listprt .listing_box ul li .pickdropprt .pickprt span{padding-left:0;padding-right:20px;display:block}.route_listprt .listing_box ul li .pickdropprt .pickprt b{position:relative}.route_listprt .listing_box ul li .pickdropprt .pickprt b:after{background:#bcbcbc;width:1px;height:100%;left:3px;content:\"\";position:absolute;top:10px}.route_listprt .listing_box ul li .pickdropprt .pickprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;color:#bcbcbc;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.route_listprt .listing_box ul li .pickdropprt .pickprt h4:before{background:#bcbcbc;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.route_listprt .listing_box ul li .pickdropprt .dropprt{position:relative;padding-bottom:10px;display:flex;align-items:center}.route_listprt .listing_box ul li .pickdropprt .dropprt span{padding-left:0;padding-right:20px;display:block}.route_listprt .listing_box ul li .pickdropprt .dropprt b{position:relative}.route_listprt .listing_box ul li .pickdropprt .dropprt b:after{background:#bcbcbc;width:1px;height:12px;left:3px;content:\"\";position:absolute;top:-7px}.route_listprt .listing_box ul li .pickdropprt .dropprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;color:#bcbcbc;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.route_listprt .listing_box ul li .pickdropprt .dropprt h4:before{background:#bcbcbc;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.route_listprt.show .listing_box{width:300px;max-width:300px;flex:0 0 350px;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;padding:40px 0 40px 20px;opacity:1}.route_listprt.show .listing_box h2{color:#fff;white-space:nowrap}.route_listprt.show .listing_box .closebtn{position:absolute;left:-33px;top:50px;background:#282828;color:#fff;padding:8px;border-top-left-radius:15px;border-bottom-left-radius:15px;cursor:pointer;box-shadow:-4px 2px 5px #ffffff14;display:block}.overlap{z-index:9999}.btnprt{display:flex;justify-content:space-between;align-items:center;padding-right:20px}.btnprt h2{margin:0}.btnprt button{font-size:15px;padding:8px 20px;background-color:#326ad3;color:#fff;border:none;border-radius:10px;box-shadow:none;outline:none}.hidden{display:none}.route_detail{background:#282828;position:absolute;width:260px;top:50%;transform:translateY(-50%);right:310px;border-radius:20px;padding:10px;box-shadow:0 0 5px #ffffff36}.route_detail .destination .duration{background:#444343;border:1px solid #918e8e;padding:10px;color:#fff}.route_detail .destination .duration b{color:#fff}.route_detail .destination .pickprt:before,.route_detail .destination .dropprt:before{background:#fff}.route_detail .destination .pickprt b:before,.route_detail .destination .dropprt b:before{background:#fff}.route_detail .destination span{line-height:20px;color:#fff;padding:3px 0}.route_detail .destination span b{color:#fff}.route_detail .destination span.notes{max-height:200px;overflow:auto}.createTxt small{color:#fff;font-size:.7rem}.closebtnroutedetail{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#f5f5f5;position:absolute;top:-7px;left:-11px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.UtilsService }, { type: i1.CoolmapService }]; }, propDecorators: { jobdetail: [{
+                type: Input
+            }], clearJobDetails: [{
+                type: Output
             }] } });
 
-class DialogComponent {
-    constructor(dialogRef, data) {
-        this.dialogRef = dialogRef;
-        this.data = data;
-        this.body = 'Are you sure you want to delete?';
-        this.positive = 'Delete';
-        this.negative = 'Cancel';
-        ['body', 'positive', 'negative'].map(elem => {
-            if (this.data[elem] !== undefined) {
-                this[elem] = this.data[elem];
-            }
-        });
-    }
-    onClose(result) { this.dialogRef.close(result); }
-}
-DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DialogComponent, selector: "app-dialog", ngImport: i0, template: "<div class=\"dialogbox\">\n  <h2>{{body}}</h2>\n  <div class=\"twobtnprt\">\n    <button class=\"delbtn\" (click)=\"onClose(true)\">{{positive}}</button>\n    <button class=\"closebtn\" (click)=\"onClose(false)\">{{negative}}</button>\n  </div>\n</div>\n", styles: [".dialogbox{display:flex;flex-direction:column}.dialogbox h2{font-size:1.5rem}.dialogbox .twobtnprt{display:flex;justify-content:center;margin-top:10px}.closebtn{background:black;color:#fff;border-radius:30px;padding:10px 18px;margin:0 10px;font-size:1rem}.delbtn{background:red;color:#fff;border-radius:30px;padding:10px 18px;margin:0 10px;font-size:1rem}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-dialog', template: "<div class=\"dialogbox\">\n  <h2>{{body}}</h2>\n  <div class=\"twobtnprt\">\n    <button class=\"delbtn\" (click)=\"onClose(true)\">{{positive}}</button>\n    <button class=\"closebtn\" (click)=\"onClose(false)\">{{negative}}</button>\n  </div>\n</div>\n", styles: [".dialogbox{display:flex;flex-direction:column}.dialogbox h2{font-size:1.5rem}.dialogbox .twobtnprt{display:flex;justify-content:center;margin-top:10px}.closebtn{background:black;color:#fff;border-radius:30px;padding:10px 18px;margin:0 10px;font-size:1rem}.delbtn{background:red;color:#fff;border-radius:30px;padding:10px 18px;margin:0 10px;font-size:1rem}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
+class DialogComponent {
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.body = 'Are you sure you want to delete?';
+        this.positive = 'Delete';
+        this.negative = 'Cancel';
+        ['body', 'positive', 'negative'].map(elem => {
+            if (this.data[elem] !== undefined) {
+                this[elem] = this.data[elem];
+            }
+        });
+    }
+    onClose(result) { this.dialogRef.close(result); }
+}
+DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DialogComponent, selector: "app-dialog", ngImport: i0, template: "<div class=\"dialogbox\">\r\n  <h2>{{body}}</h2>\r\n  <div class=\"twobtnprt\">\r\n    <button class=\"delbtn\" (click)=\"onClose(true)\">{{positive}}</button>\r\n    <button class=\"closebtn\" (click)=\"onClose(false)\">{{negative}}</button>\r\n  </div>\r\n</div>\r\n", styles: [".dialogbox{display:flex;flex-direction:column}.dialogbox h2{font-size:1.5rem}.dialogbox .twobtnprt{display:flex;justify-content:center;margin-top:10px}.closebtn{background:black;color:#fff;border-radius:30px;padding:10px 18px;margin:0 10px;font-size:1rem}.delbtn{background:red;color:#fff;border-radius:30px;padding:10px 18px;margin:0 10px;font-size:1rem}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-dialog', template: "<div class=\"dialogbox\">\r\n  <h2>{{body}}</h2>\r\n  <div class=\"twobtnprt\">\r\n    <button class=\"delbtn\" (click)=\"onClose(true)\">{{positive}}</button>\r\n    <button class=\"closebtn\" (click)=\"onClose(false)\">{{negative}}</button>\r\n  </div>\r\n</div>\r\n", styles: [".dialogbox{display:flex;flex-direction:column}.dialogbox h2{font-size:1.5rem}.dialogbox .twobtnprt{display:flex;justify-content:center;margin-top:10px}.closebtn{background:black;color:#fff;border-radius:30px;padding:10px 18px;margin:0 10px;font-size:1rem}.delbtn{background:red;color:#fff;border-radius:30px;padding:10px 18px;margin:0 10px;font-size:1rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
                 }] }]; } });
 
-class AddRouteComponent {
-    constructor(coolMapService, utils, dialog) {
-        this.coolMapService = coolMapService;
-        this.utils = utils;
-        this.dialog = dialog;
-        this.changeNav = new EventEmitter();
-        this.updateRouteList = new EventEmitter();
-        this.pickupOptions = [];
-        this.deliveryOptions = [];
-        this.requestParmsForRouteDetails = { pickup_lat_lng: '', delivery_lat_lng: '' };
-        this.customersList = [];
-        this.unitsList = [];
-        this.materialsList = [];
-        this.preventSave = false;
-        this.preventInitialSave = false;
-        this.destroyer$ = new Subject();
-        this.enablePopUp = false;
-        this.prevantPopupClose = false;
-        this.enableForm = false;
-        this.fetchCustomersList();
-        this.fetchUnitsList();
-        this.fetchMaterialsList();
-        this.formInit();
-        this.utils.getrouteDetailsUtility.subscribe(res => {
-            if (res) {
-                if (res['event'] !== 'click' && !this.prevantPopupClose) {
-                    this.enablePopUp = res['event'];
-                }
-                else if (this.enablePopUp && !this.prevantPopupClose) {
-                    this.prevantPopupClose = true;
-                }
-                if (res['event'] !== 'click' && !res['event'] && this.prevantPopupClose) {
-                    this.popupDetails = this.utils.getdictValue('route-detailsv2');
-                }
-                else {
-                    this.popupDetails = res['route'];
-                }
-                if (this.enablePopUp)
-                    this.popupDetails['created_at'] = this.utils.getDateFormat(new Date(this.popupDetails['created_at']), '/');
-            }
-        });
-    }
-    filterCustomerList() {
-        this.customersList$ = this.addRouteForm.controls['customer_name'].valueChanges.pipe(startWith(''), map(value => this._filter(value || '')));
-    }
-    _filter(value) {
-        const filterValue = value.toLowerCase();
-        return this.customersList.filter((option) => option['customer_name'].toLowerCase().includes(filterValue));
-    }
-    ngOnChanges(changes) {
-        if (changes['routeData'] && !changes['routeData']['currentValue'])
-            this.inIt(null);
-    }
-    openDialog() {
-        const dialogRef = this.dialog.open(DialogComponent, {
-            data: { body: 'Are you sure you want to delete this route?' },
-        });
-        dialogRef.afterClosed().subscribe(res => { if (res) {
-            this.deleteRoute();
-        } });
-    }
-    editEvent() {
-        this.prevantPopupClose = false;
-        this.enableForm = true;
-        this.enablePopUp = false;
-        this.popupDetails['prevent'] = false;
-        this.utils.removeMapEntity.next(this.popupDetails);
-        this.inIt(this.popupDetails);
-    }
-    inIt(changes) {
-        if (changes) {
-            if (!changes['prevent']) {
-                this.preventSave = false;
-                this.formControlValue();
-                this.patchFormValue(changes);
-                this.checkAndFetchRouteInformation(true);
-            }
-        }
-        if (!changes) {
-            this.enableForm = true;
-            this.preventSave = true;
-            this.patchFormValue();
-            this.checkAndFetchRouteInformation();
-        }
-    }
-    ngOnInit() {
-        this.formControlValue();
-    }
-    ngAfterViewInit() {
-        fromEvent(this.filterPickup.nativeElement, 'keyup').pipe(distinctUntilChanged(), debounceTime(150)).pipe(takeUntil(this.destroyer$)).subscribe(() => {
-            this.utils.fetchAutoCompleteLocations(this.filterPickup.nativeElement.value).pipe(takeUntil(this.destroyer$)).subscribe((res) => {
-                this.pickupOptions = res.features;
-            });
-        });
-        fromEvent(this.filterDelivery.nativeElement, 'keyup').pipe(distinctUntilChanged(), debounceTime(150)).pipe(takeUntil(this.destroyer$)).subscribe(() => {
-            this.utils.fetchAutoCompleteLocations(this.filterDelivery.nativeElement.value).pipe(takeUntil(this.destroyer$)).subscribe((res) => {
-                this.deliveryOptions = res.features;
-            });
-        });
-    }
-    formControlValue() {
-        this.addRouteForm.controls['pickup_location']?.valueChanges.pipe(takeUntil(this.destroyer$)).subscribe((res) => {
-            if (this.addRouteForm.value.pickup_location && res !== this.addRouteForm.value.pickup_location) {
-                this.addRouteForm.patchValue({
-                    pickup_lat_lng: '',
-                });
-                this.addRouteForm.controls['pickup_lat_lng'].markAsTouched();
-            }
-        });
-        this.addRouteForm.controls['delivery_location']?.valueChanges.pipe(takeUntil(this.destroyer$)).subscribe((res) => {
-            if (this.addRouteForm.value.delivery_location && res !== this.addRouteForm.value.delivery_location) {
-                this.addRouteForm.patchValue({
-                    delivery_lat_lng: '',
-                });
-                this.addRouteForm.controls['delivery_lat_lng'].markAsTouched();
-            }
-        });
-    }
-    formInit() {
-        this.addRouteForm = new FormGroup({
-            route_name: new FormControl('', [Validators.required]),
-            customer_name: new FormControl({ value: '', disabled: true }, [Validators.required]),
-            materials_id: new FormControl('', [Validators.required]),
-            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)]),
-        });
-    }
-    patchFormValue(data) {
-        this.addRouteForm.reset();
-        this.addRouteForm.patchValue(data);
-        this.routeId = data?.route_id;
-        this.routeDetails = data ? { pickup_location: data.pickup_location, delivery_location: data.delivery_location } : null;
-        this.addRouteForm.valueChanges.pipe(takeUntil(this.destroyer$)).subscribe(res => {
-            if (res) {
-                if (this.preventInitialSave)
-                    this.preventInitialSave = false;
-            }
-        });
-        this.filterCustomerList();
-    }
-    fetchCustomersList() {
-        this.utils.getData('coolmap/company/list/view').pipe(takeUntil(this.destroyer$)).subscribe((res) => {
-            if (res) {
-                this.customersList = res.data;
-                this.filterCustomerList();
-                this.addRouteForm.controls['customer_name'].enable();
-            }
-        });
-    }
-    fetchUnitsList() {
-        this.utils.getData('coolmap/unit/list/view').pipe(takeUntil(this.destroyer$)).subscribe((res) => {
-            if (res) {
-                this.unitsList = res.data;
-            }
-        });
-    }
-    fetchMaterialsList() {
-        this.utils.getData('coolmap/material/list/view').pipe(takeUntil(this.destroyer$)).subscribe(((res) => {
-            res.data.sort((a, b) => a.material.localeCompare(b.material));
-            this.materialsList = res.data;
-        }));
-    }
-    selectedLongLat(type, event) {
-        if (type === 'pickup') {
-            this.addRouteForm.patchValue({
-                pickup_lat_lng: (event.geometry.coordinates[1] + ',' + event.geometry.coordinates[0]).toString()
-            });
-            this.coolMapService.clearBoundWithCordinates();
-        }
-        else if (type === 'delivery') {
-            this.addRouteForm.patchValue({
-                delivery_lat_lng: (event.geometry.coordinates[1] + ',' + event.geometry.coordinates[0]).toString()
-            });
-        }
-        this.checkAndFetchRouteInformation();
-    }
-    checkAndFetchRouteInformation(isinitial) {
-        if (this.addRouteForm.value?.delivery_lat_lng?.length > 0 && this.addRouteForm.value?.pickup_lat_lng?.length > 0 && this.addRouteForm.value.unit_id) {
-            let unit = this.unitsList.find((x) => x.id === this.addRouteForm.value.unit_id);
-            const param = {
-                delivery_lat_lng: this.addRouteForm.value.delivery_lat_lng,
-                pickup_lat_lng: this.addRouteForm.value.pickup_lat_lng,
-                unit: unit?.type
-            };
-            this.utils.postdata('coolmap/calculate/routes/estimation', param).pipe(takeUntil(this.destroyer$)).subscribe((res) => {
-                if (res && res['path']) {
-                    this.addRouteForm.patchValue({
-                        estimated_distance: res.dist, estimated_time: res.time, path: res.path
-                    });
-                    let path = res['path'].split(';');
-                    path = path.map((ele) => { return ele = this.formateLatLong(ele); });
-                    res['path'] = path;
-                    const element = {
-                        type: 'FeatureCollection',
-                        features: [{ type: 'Feature', properties: {}, geometry: { type: 'LineString', coordinates: res['path'] } }]
-                    };
-                    this.coolMapService.removeRouteAndMarker(1).then(() => {
-                        const unit = this.unitsList.find((x) => x.id === this.addRouteForm.value.unit_id);
-                        const materialDetails = this.materialsList.find((x) => x.material_id === this.addRouteForm.value.materials_id);
-                        this.coolMapService.loadMapProperty(element, 1, unit?.type, {
-                            pickup_location: this.addRouteForm.get('pickup_location')?.value,
-                            delivery_location: this.addRouteForm.get('delivery_location')?.value,
-                            route_name: this.addRouteForm.get('route_name')?.value,
-                            material: materialDetails?.material, unit: unit?.type
-                        }).then((res) => { this.preventSave = true; });
-                    });
-                }
-                else {
-                    this.coolMapService.removeRouteAndMarker(1);
-                    this.utils.openSnackBar(res['status'], 'error');
-                }
-                if (this.routeId && isinitial)
-                    this.preventInitialSave = true;
-            });
-        }
-        else {
-            this.coolMapService.removeRouteAndMarker(1);
-        }
-    }
-    formateLatLong(latlong) { return latlong ? latlong.split(',').map(x => +x).reverse() : null; }
-    saveRoute() {
-        if (this.addRouteForm.valid) {
-            this.preventSave = false;
-            const data = this.addRouteForm.value;
-            data['trucker_pay_estimate'] = null;
-            data['customer_price_estimate'] = null;
-            const url = this.routeId ? this.utils.postdata('coolmap/update/routes', data) : this.utils.postdata('coolmap/add/routes', data);
-            if (this.routeId)
-                data['id'] = this.routeId;
-            url.pipe(takeUntil(this.destroyer$)).subscribe((res) => {
-                if (res.success) {
-                    this.updateRouteList.emit(true);
-                    this.utils.openSnackBar(res.message, 'success');
-                    this.preventInitialSave = true;
-                    this.preventSave = true;
-                    if (!this.routeId)
-                        this.changeNav.next('Addroute');
-                }
-                else {
-                    this.utils.openSnackBar(res.message, 'error');
-                    this.preventSave = true;
-                }
-            }, (err) => { if (err) {
-                this.preventSave = true;
-            } });
-        }
-        else {
-            this.addRouteForm.markAllAsTouched();
-        }
-    }
-    deleteRoute() {
-        this.preventSave = false;
-        this.utils.postdata('coolmap/delete/routes', { uuid: this.routeId }).subscribe(res => {
-            if (res['data']['success']) {
-                this.utils.openSnackBar(res['data']['message'], 'success');
-                this.updateRouteList.emit(true);
-                this.changeNav.next('Addroute');
-                this.preventInitialSave = true;
-                this.preventSave = true;
-            }
-            else {
-                this.utils.openSnackBar('Somthing went wrong', 'error');
-                this.preventSave = true;
-            }
-        }, (err) => { this.preventSave = true; });
-    }
-    ngOnDestroy() {
-        this.destroyer$.next(true);
-        this.destroyer$.unsubscribe();
-    }
-}
-AddRouteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AddRouteComponent, deps: [{ token: i1.CoolmapService }, { token: i1.UtilsService }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-AddRouteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AddRouteComponent, selector: "app-add-route", inputs: { routeData: "routeData" }, outputs: { changeNav: "changeNav", updateRouteList: "updateRouteList" }, viewQueries: [{ propertyName: "filterPickup", first: true, predicate: ["filterPickup"], descendants: true }, { propertyName: "filterDelivery", first: true, predicate: ["filterDelivery"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"addroutebox\">\n  <div class=\"routedetailbox\" *ngIf=\"enablePopUp\">\n    <div class=\"closebtnroutedetail\">\n      <mat-icon (click)=\"prevantPopupClose = false; enablePopUp = false;\">clear</mat-icon>\n    </div>\n    <div class=\"destination\">\n      <div class=\"duration\">\n        <p class=\"pickprt\"><b>Pickup:</b>{{popupDetails['pickup_location']}}</p>\n        <p class=\"dropprt\"><b>Delivery:</b>{{popupDetails['delivery_location']}}</p>\n      </div>\n      <span><b>Name:</b> {{popupDetails['route_name']}}</span>\n      <span><b>Customer:</b> {{popupDetails['customer_name']}}</span>\n      <span><b>Material:</b> {{popupDetails['material']}}</span>\n      <span><b>Type:</b> {{popupDetails['unit']}}</span>\n      <span><b>Distance:</b> {{popupDetails['estimated_distance']}}</span>\n      <span><b>Travel Time:</b> {{popupDetails['estimated_time']}}</span>\n\n      <span class=\"routenotes\"><b>Notes:</b> {{popupDetails['note']}}</span>\n    </div>\n    <div class=\"createTxt\">\n      <small>\n        Created by {{popupDetails['created_by_name']}} on {{popupDetails['created_at']}}\n      </small>\n      <button class=\"editbtn\" (click)=\"editEvent()\">Edit</button>\n    </div>\n  </div>\n  <div class=\"add_add_route_box\" cdkDrag [style.visibility]=\"!enableForm ? 'hidden' : 'visible'\">\n    <div class=\"topheadingprt\">\n      <h2> {{routeId? 'EDIT' : 'ADD'}} ROUTE </h2>\n      <div class=\"buttonprt\">\n        <button *ngIf=\"routeId\" class=\"delbtn\" (click)=\"openDialog()\">Delete</button>\n        <button mat-raised-button type=\"submit\" class=\"closebtn\" (click)=\"changeNav.next('Addroute')\">Close</button>\n      </div>\n    </div>\n    <form [formGroup]=\"addRouteForm\">\n      <div class=\"route_form_area\">\n        <div class=\"col-6\">\n          <mat-form-field>\n            <mat-label>Route Name</mat-label>\n            <input matInput formControlName=\"route_name\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\">\n            <mat-error *ngIf=\"addRouteForm.controls['route_name'].hasError('required')\">\n              Route Name is required\n            </mat-error>\n          </mat-form-field>\n        </div>\n        <div class=\"col-6\">\n          <mat-form-field>\n            <input type=\"text\" placeholder=\"Customer Name\" matInput formControlName=\"customer_name\" [matAutocomplete]=\"auto\" (mousedown)=\"$event.stopPropagation()\">\n            <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\n              <mat-option *ngFor=\"let customer of customersList$ | async\" [value]=\"customer['customer_name']\">\n                {{customer['customer_name']}}\n              </mat-option>\n            </mat-autocomplete>\n            <mat-error *ngIf=\"addRouteForm.controls['customer_name'].hasError('required')\">\n              Customer name is required.\n            </mat-error>\n          </mat-form-field>\n        </div>\n        <div class=\"col-6\">\n          <mat-form-field>\n            <mat-label>Pickup</mat-label>\n            <input type=\"text\" placeholder=\"Search...\" matInput #filterPickup [matAutocomplete]=\"pickupAutocomplete\"\n              formControlName=\"pickup_location\" (mousedown)=\"$event.stopPropagation()\">\n\n            <mat-autocomplete #pickupAutocomplete=\"matAutocomplete\">\n              <mat-option (click)=\"selectedLongLat('pickup', option)\" *ngFor=\"let option of pickupOptions\"\n                [value]=\"option?.place_name\">\n                {{option?.place_name}}\n              </mat-option>\n            </mat-autocomplete>\n          </mat-form-field>\n          <mat-error *ngIf=\"addRouteForm.controls['pickup_lat_lng'].touched && addRouteForm.controls['pickup_lat_lng'].hasError('required')\">\n            Please select pickup location from the list.\n          </mat-error>\n        </div>\n        <div class=\"col-6\">\n          <mat-form-field>\n            <mat-label>Delivery</mat-label>\n            <input type=\"text\" placeholder=\"Search...\" matInput #filterDelivery [matAutocomplete]=\"deliveryAutocomplete\"\n              formControlName=\"delivery_location\" (mousedown)=\"$event.stopPropagation()\">\n            <mat-autocomplete #deliveryAutocomplete=\"matAutocomplete\">\n              <mat-option (click)=\"selectedLongLat('delivery', option)\" *ngFor=\"let option of deliveryOptions\"\n                [value]=\"option?.place_name\">\n                {{option?.place_name}}\n              </mat-option>\n            </mat-autocomplete>\n          </mat-form-field>\n          <mat-error *ngIf=\"addRouteForm.controls['delivery_lat_lng'].touched && addRouteForm.controls['delivery_lat_lng'].hasError('required')\">\n            Please select delivery location from the list.\n          </mat-error>\n        </div>\n        <div class=\"col-6\">\n          <mat-form-field>\n            <mat-label>Notes</mat-label>\n            <textarea style=\"height: 18px; resize: none;\" matInput name=\"\" id=\"\" cols=\"30\" rows=\"10\" formControlName=\"note\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\"></textarea>\n            <mat-error *ngIf=\"addRouteForm.controls['note'].hasError('maxlength')\">\n              Notes should be within 2048 characters.\n            </mat-error>\n          </mat-form-field>\n        </div>\n\n        <div class=\"col-6 d-flex\">\n          <div class=\"inputbox m-0\">\n            <mat-form-field>\n              <mat-label>Unit type</mat-label>\n              <mat-select formControlName=\"unit_id\" (selectionChange)=\"checkAndFetchRouteInformation()\" (mousedown)=\"$event.stopPropagation()\">\n                <mat-option *ngFor=\"let unit of unitsList\" [value]=\"unit?.id\"> {{unit?.type}} </mat-option>\n              </mat-select>\n              <mat-error *ngIf=\"addRouteForm.controls['unit_id'].hasError('required')\">\n                Unit is required\n              </mat-error>\n            </mat-form-field>\n          </div>\n\n          <div class=\"inputbox m-0\">\n            <mat-form-field>\n              <mat-label>Material</mat-label>\n              <mat-select formControlName=\"materials_id\" (mousedown)=\"$event.stopPropagation()\">\n                <mat-option *ngFor=\"let material of materialsList\" [value]=\"material?.material_id\"> {{material?.material}}\n                </mat-option>\n              </mat-select>\n              <mat-error *ngIf=\"addRouteForm.controls['materials_id'].hasError('required')\">\n                Meterial is required\n              </mat-error>\n            </mat-form-field>\n          </div>\n        </div>\n        <div class=\"col-6\">\n          <app-estimation-display *ngIf=\"addRouteForm?.value?.pickup_lat_lng && addRouteForm?.value?.delivery_lat_lng\" [value]=\"addRouteForm['value']\"></app-estimation-display>\n        </div>\n        <button mat-raised-button type=\"submit\" (click)=\"saveRoute()\" *ngIf=\"preventSave\"\n          [disabled]=\"addRouteForm.invalid && preventSave || preventInitialSave\">{{routeId? 'Update' : 'Save'}}\n        </button>\n        <div class=\"loader\">\n          <mat-spinner *ngIf=\"!preventSave\"></mat-spinner>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n", styles: [".addroutebox{width:calc(100% - 315px);position:absolute;left:300px;bottom:10px;z-index:999;display:flex;justify-content:space-between;align-items:flex-start}.addroutebox .routedetailbox{max-width:300px;padding:10px;background-color:#fff;border-radius:20px;margin-right:20px}@media (min-width: 1600px){.addroutebox .routedetailbox{max-width:280px}}.addroutebox .editbtn{background:#326ad3;padding:10px 25px;color:#fff;font-size:.8125rem;border-radius:30px;float:right}.add_add_route_box{background:white;padding:10px 20px;border-radius:20px;box-shadow:2px 4px 4px 2px #00000024;height:370px;width:100%;position:relative;cursor:move}.add_add_route_box .route_form_area{display:flex;flex-wrap:wrap;justify-content:space-between}.add_add_route_box .route_form_area .col-6{width:48%;margin-top:15px;justify-content:space-between}.add_add_route_box .route_form_area .col-6 .inputbox{width:47%}.add_add_route_box .route_form_area .col-6 span{font-size:.875rem}.add_add_route_box .route_form_area button{background:#326ad3;padding:0 18px;color:#fff;font-size:.8125rem;border-radius:30px;position:absolute;right:18px;top:20px}.closebtn{background:black;color:#fff;border-radius:30px;padding:0 18px;margin-left:10px}.delbtn{background:red;color:#fff;border-radius:30px;padding:10px 18px}.add_route_listingpart .listing_toggle{background:white;border-radius:15px;padding:8px 10px;position:absolute;right:10px;top:30px;cursor:pointer}.listing_box{background:#282828;height:100vh;position:fixed;right:0;top:0;z-index:1111;box-shadow:-3px 0 5px #ffffff14;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;width:0;border-radius:40px 0 0 40px;opacity:0}.listing_box .closebtn{display:none}.show .listing_box{width:250px;max-width:250px;flex:0 0 250px;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;padding:40px 0 40px 20px;opacity:1}@media (min-width: 1600px){.show .listing_box{width:320px;max-width:320px;flex:0 0 320px}}.show .listing_box h2{color:#fff;white-space:nowrap}.show .listing_box ul{padding:0 20px 0 0}.show .listing_box ul li{background:#4a4a4a;padding:15px;border-radius:15px;display:flex;margin-bottom:15px}.show .listing_box ul li .companayIcon{width:40px;height:40px;border-radius:10px;background:white;margin-right:10px;display:flex;justify-content:center;align-items:center}.show .listing_box ul li .company_cont{width:calc(100% - 50px)}.show .listing_box ul li .company_cont h3{color:#fff;font-size:15px;font-weight:400;margin:0;text-overflow:ellipsis;max-width:129px;-webkit-box-orient:vertical;white-space:nowrap;overflow:hidden}@media (min-width: 1600px){.show .listing_box ul li .company_cont h3{max-width:170px}}.show .listing_box ul li .company_cont p{color:#bcbcbc;font-size:12px;margin:5px 0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:16px}.show .closebtn{position:absolute;left:-33px;top:50px;background:#282828;color:#fff;padding:8px;border-top-left-radius:15px;border-bottom-left-radius:15px;cursor:pointer;box-shadow:-4px 2px 5px #ffffff14;display:block}.loader{position:absolute;width:95%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.buttonprt{margin-right:83px}.destination .duration{padding:10px}.destination span{padding:5px 0}.closebtnroutedetail{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#fff;position:absolute;top:-11px;left:-11px}.routenotes{max-height:170px;overflow:auto}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i7$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AddRouteComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-add-route', template: "<div class=\"addroutebox\">\n  <div class=\"routedetailbox\" *ngIf=\"enablePopUp\">\n    <div class=\"closebtnroutedetail\">\n      <mat-icon (click)=\"prevantPopupClose = false; enablePopUp = false;\">clear</mat-icon>\n    </div>\n    <div class=\"destination\">\n      <div class=\"duration\">\n        <p class=\"pickprt\"><b>Pickup:</b>{{popupDetails['pickup_location']}}</p>\n        <p class=\"dropprt\"><b>Delivery:</b>{{popupDetails['delivery_location']}}</p>\n      </div>\n      <span><b>Name:</b> {{popupDetails['route_name']}}</span>\n      <span><b>Customer:</b> {{popupDetails['customer_name']}}</span>\n      <span><b>Material:</b> {{popupDetails['material']}}</span>\n      <span><b>Type:</b> {{popupDetails['unit']}}</span>\n      <span><b>Distance:</b> {{popupDetails['estimated_distance']}}</span>\n      <span><b>Travel Time:</b> {{popupDetails['estimated_time']}}</span>\n\n      <span class=\"routenotes\"><b>Notes:</b> {{popupDetails['note']}}</span>\n    </div>\n    <div class=\"createTxt\">\n      <small>\n        Created by {{popupDetails['created_by_name']}} on {{popupDetails['created_at']}}\n      </small>\n      <button class=\"editbtn\" (click)=\"editEvent()\">Edit</button>\n    </div>\n  </div>\n  <div class=\"add_add_route_box\" cdkDrag [style.visibility]=\"!enableForm ? 'hidden' : 'visible'\">\n    <div class=\"topheadingprt\">\n      <h2> {{routeId? 'EDIT' : 'ADD'}} ROUTE </h2>\n      <div class=\"buttonprt\">\n        <button *ngIf=\"routeId\" class=\"delbtn\" (click)=\"openDialog()\">Delete</button>\n        <button mat-raised-button type=\"submit\" class=\"closebtn\" (click)=\"changeNav.next('Addroute')\">Close</button>\n      </div>\n    </div>\n    <form [formGroup]=\"addRouteForm\">\n      <div class=\"route_form_area\">\n        <div class=\"col-6\">\n          <mat-form-field>\n            <mat-label>Route Name</mat-label>\n            <input matInput formControlName=\"route_name\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\">\n            <mat-error *ngIf=\"addRouteForm.controls['route_name'].hasError('required')\">\n              Route Name is required\n            </mat-error>\n          </mat-form-field>\n        </div>\n        <div class=\"col-6\">\n          <mat-form-field>\n            <input type=\"text\" placeholder=\"Customer Name\" matInput formControlName=\"customer_name\" [matAutocomplete]=\"auto\" (mousedown)=\"$event.stopPropagation()\">\n            <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\n              <mat-option *ngFor=\"let customer of customersList$ | async\" [value]=\"customer['customer_name']\">\n                {{customer['customer_name']}}\n              </mat-option>\n            </mat-autocomplete>\n            <mat-error *ngIf=\"addRouteForm.controls['customer_name'].hasError('required')\">\n              Customer name is required.\n            </mat-error>\n          </mat-form-field>\n        </div>\n        <div class=\"col-6\">\n          <mat-form-field>\n            <mat-label>Pickup</mat-label>\n            <input type=\"text\" placeholder=\"Search...\" matInput #filterPickup [matAutocomplete]=\"pickupAutocomplete\"\n              formControlName=\"pickup_location\" (mousedown)=\"$event.stopPropagation()\">\n\n            <mat-autocomplete #pickupAutocomplete=\"matAutocomplete\">\n              <mat-option (click)=\"selectedLongLat('pickup', option)\" *ngFor=\"let option of pickupOptions\"\n                [value]=\"option?.place_name\">\n                {{option?.place_name}}\n              </mat-option>\n            </mat-autocomplete>\n          </mat-form-field>\n          <mat-error *ngIf=\"addRouteForm.controls['pickup_lat_lng'].touched && addRouteForm.controls['pickup_lat_lng'].hasError('required')\">\n            Please select pickup location from the list.\n          </mat-error>\n        </div>\n        <div class=\"col-6\">\n          <mat-form-field>\n            <mat-label>Delivery</mat-label>\n            <input type=\"text\" placeholder=\"Search...\" matInput #filterDelivery [matAutocomplete]=\"deliveryAutocomplete\"\n              formControlName=\"delivery_location\" (mousedown)=\"$event.stopPropagation()\">\n            <mat-autocomplete #deliveryAutocomplete=\"matAutocomplete\">\n              <mat-option (click)=\"selectedLongLat('delivery', option)\" *ngFor=\"let option of deliveryOptions\"\n                [value]=\"option?.place_name\">\n                {{option?.place_name}}\n              </mat-option>\n            </mat-autocomplete>\n          </mat-form-field>\n          <mat-error *ngIf=\"addRouteForm.controls['delivery_lat_lng'].touched && addRouteForm.controls['delivery_lat_lng'].hasError('required')\">\n            Please select delivery location from the list.\n          </mat-error>\n        </div>\n        <div class=\"col-6\">\n          <mat-form-field>\n            <mat-label>Notes</mat-label>\n            <textarea style=\"height: 18px; resize: none;\" matInput name=\"\" id=\"\" cols=\"30\" rows=\"10\" formControlName=\"note\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\"></textarea>\n            <mat-error *ngIf=\"addRouteForm.controls['note'].hasError('maxlength')\">\n              Notes should be within 2048 characters.\n            </mat-error>\n          </mat-form-field>\n        </div>\n\n        <div class=\"col-6 d-flex\">\n          <div class=\"inputbox m-0\">\n            <mat-form-field>\n              <mat-label>Unit type</mat-label>\n              <mat-select formControlName=\"unit_id\" (selectionChange)=\"checkAndFetchRouteInformation()\" (mousedown)=\"$event.stopPropagation()\">\n                <mat-option *ngFor=\"let unit of unitsList\" [value]=\"unit?.id\"> {{unit?.type}} </mat-option>\n              </mat-select>\n              <mat-error *ngIf=\"addRouteForm.controls['unit_id'].hasError('required')\">\n                Unit is required\n              </mat-error>\n            </mat-form-field>\n          </div>\n\n          <div class=\"inputbox m-0\">\n            <mat-form-field>\n              <mat-label>Material</mat-label>\n              <mat-select formControlName=\"materials_id\" (mousedown)=\"$event.stopPropagation()\">\n                <mat-option *ngFor=\"let material of materialsList\" [value]=\"material?.material_id\"> {{material?.material}}\n                </mat-option>\n              </mat-select>\n              <mat-error *ngIf=\"addRouteForm.controls['materials_id'].hasError('required')\">\n                Meterial is required\n              </mat-error>\n            </mat-form-field>\n          </div>\n        </div>\n        <div class=\"col-6\">\n          <app-estimation-display *ngIf=\"addRouteForm?.value?.pickup_lat_lng && addRouteForm?.value?.delivery_lat_lng\" [value]=\"addRouteForm['value']\"></app-estimation-display>\n        </div>\n        <button mat-raised-button type=\"submit\" (click)=\"saveRoute()\" *ngIf=\"preventSave\"\n          [disabled]=\"addRouteForm.invalid && preventSave || preventInitialSave\">{{routeId? 'Update' : 'Save'}}\n        </button>\n        <div class=\"loader\">\n          <mat-spinner *ngIf=\"!preventSave\"></mat-spinner>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n", styles: [".addroutebox{width:calc(100% - 315px);position:absolute;left:300px;bottom:10px;z-index:999;display:flex;justify-content:space-between;align-items:flex-start}.addroutebox .routedetailbox{max-width:300px;padding:10px;background-color:#fff;border-radius:20px;margin-right:20px}@media (min-width: 1600px){.addroutebox .routedetailbox{max-width:280px}}.addroutebox .editbtn{background:#326ad3;padding:10px 25px;color:#fff;font-size:.8125rem;border-radius:30px;float:right}.add_add_route_box{background:white;padding:10px 20px;border-radius:20px;box-shadow:2px 4px 4px 2px #00000024;height:370px;width:100%;position:relative;cursor:move}.add_add_route_box .route_form_area{display:flex;flex-wrap:wrap;justify-content:space-between}.add_add_route_box .route_form_area .col-6{width:48%;margin-top:15px;justify-content:space-between}.add_add_route_box .route_form_area .col-6 .inputbox{width:47%}.add_add_route_box .route_form_area .col-6 span{font-size:.875rem}.add_add_route_box .route_form_area button{background:#326ad3;padding:0 18px;color:#fff;font-size:.8125rem;border-radius:30px;position:absolute;right:18px;top:20px}.closebtn{background:black;color:#fff;border-radius:30px;padding:0 18px;margin-left:10px}.delbtn{background:red;color:#fff;border-radius:30px;padding:10px 18px}.add_route_listingpart .listing_toggle{background:white;border-radius:15px;padding:8px 10px;position:absolute;right:10px;top:30px;cursor:pointer}.listing_box{background:#282828;height:100vh;position:fixed;right:0;top:0;z-index:1111;box-shadow:-3px 0 5px #ffffff14;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;width:0;border-radius:40px 0 0 40px;opacity:0}.listing_box .closebtn{display:none}.show .listing_box{width:250px;max-width:250px;flex:0 0 250px;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;padding:40px 0 40px 20px;opacity:1}@media (min-width: 1600px){.show .listing_box{width:320px;max-width:320px;flex:0 0 320px}}.show .listing_box h2{color:#fff;white-space:nowrap}.show .listing_box ul{padding:0 20px 0 0}.show .listing_box ul li{background:#4a4a4a;padding:15px;border-radius:15px;display:flex;margin-bottom:15px}.show .listing_box ul li .companayIcon{width:40px;height:40px;border-radius:10px;background:white;margin-right:10px;display:flex;justify-content:center;align-items:center}.show .listing_box ul li .company_cont{width:calc(100% - 50px)}.show .listing_box ul li .company_cont h3{color:#fff;font-size:15px;font-weight:400;margin:0;text-overflow:ellipsis;max-width:129px;-webkit-box-orient:vertical;white-space:nowrap;overflow:hidden}@media (min-width: 1600px){.show .listing_box ul li .company_cont h3{max-width:170px}}.show .listing_box ul li .company_cont p{color:#bcbcbc;font-size:12px;margin:5px 0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:16px}.show .closebtn{position:absolute;left:-33px;top:50px;background:#282828;color:#fff;padding:8px;border-top-left-radius:15px;border-bottom-left-radius:15px;cursor:pointer;box-shadow:-4px 2px 5px #ffffff14;display:block}.loader{position:absolute;width:95%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.buttonprt{margin-right:83px}.destination .duration{padding:10px}.destination span{padding:5px 0}.closebtnroutedetail{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#fff;position:absolute;top:-11px;left:-11px}.routenotes{max-height:170px;overflow:auto}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.CoolmapService }, { type: i1.UtilsService }, { type: i1$1.MatDialog }]; }, propDecorators: { filterPickup: [{
-                type: ViewChild,
-                args: ['filterPickup']
-            }], filterDelivery: [{
-                type: ViewChild,
-                args: ['filterDelivery']
-            }], changeNav: [{
-                type: Output
-            }], updateRouteList: [{
-                type: Output
-            }], routeData: [{
-                type: Input
+class AddRouteComponent {
+    constructor(coolMapService, utils, dialog) {
+        this.coolMapService = coolMapService;
+        this.utils = utils;
+        this.dialog = dialog;
+        this.changeNav = new EventEmitter();
+        this.updateRouteList = new EventEmitter();
+        this.pickupOptions = [];
+        this.deliveryOptions = [];
+        this.requestParmsForRouteDetails = { pickup_lat_lng: '', delivery_lat_lng: '' };
+        this.customersList = [];
+        this.unitsList = [];
+        this.materialsList = [];
+        this.preventSave = false;
+        this.preventInitialSave = false;
+        this.destroyer$ = new Subject();
+        this.enablePopUp = false;
+        this.prevantPopupClose = false;
+        this.enableForm = false;
+        this.formInit();
+        this.utils.getrouteDetailsUtility.subscribe(res => {
+            if (res) {
+                if (res['event'] !== 'click' && !this.prevantPopupClose) {
+                    this.enablePopUp = res['event'];
+                }
+                else if (this.enablePopUp && !this.prevantPopupClose) {
+                    this.prevantPopupClose = true;
+                }
+                if (res['event'] !== 'click' && !res['event'] && this.prevantPopupClose) {
+                    this.popupDetails = this.utils.getdictValue('route-detailsv2');
+                }
+                else {
+                    this.popupDetails = res['route'];
+                }
+                if (this.enablePopUp)
+                    this.popupDetails['created_at'] = this.utils.getDateFormat(new Date(this.popupDetails['created_at']), '/');
+            }
+        });
+    }
+    filterCustomerList() {
+        this.customersList$ = this.addRouteForm.controls['customer_name'].valueChanges.pipe(startWith(''), map(value => this._filter(value || '')));
+    }
+    _filter(value) {
+        const filterValue = value.toLowerCase();
+        return this.customersList.filter((option) => option['customer_name'].toLowerCase().includes(filterValue));
+    }
+    ngOnChanges(changes) {
+        if (changes['routeData'] && !changes['routeData']['currentValue'])
+            this.inIt(null);
+    }
+    openDialog() {
+        const dialogRef = this.dialog.open(DialogComponent, {
+            data: { body: 'Are you sure you want to delete this route?' },
+        });
+        dialogRef.afterClosed().subscribe(res => { if (res) {
+            this.deleteRoute();
+        } });
+    }
+    editEvent() {
+        this.prevantPopupClose = false;
+        this.enableForm = true;
+        this.enablePopUp = false;
+        this.popupDetails['prevent'] = false;
+        this.utils.removeMapEntity.next(this.popupDetails);
+        this.inIt(this.popupDetails);
+    }
+    inIt(changes) {
+        if (changes) {
+            if (!changes['prevent']) {
+                this.preventSave = false;
+                this.formControlValue();
+                this.patchFormValue(changes);
+                this.checkAndFetchRouteInformation(true);
+            }
+        }
+        if (!changes) {
+            this.enableForm = true;
+            this.preventSave = true;
+            this.patchFormValue();
+            this.checkAndFetchRouteInformation();
+        }
+    }
+    ngOnInit() {
+        this.fetchCustomersList();
+        this.fetchUnitsList();
+        this.fetchMaterialsList();
+        this.formControlValue();
+    }
+    ngAfterViewInit() {
+        fromEvent(this.filterPickup.nativeElement, 'keyup').pipe(distinctUntilChanged(), debounceTime(150)).pipe(takeUntil(this.destroyer$)).subscribe(() => {
+            this.utils.fetchAutoCompleteLocations(this.filterPickup.nativeElement.value).pipe(takeUntil(this.destroyer$)).subscribe((res) => {
+                this.pickupOptions = res.features;
+            });
+        });
+        fromEvent(this.filterDelivery.nativeElement, 'keyup').pipe(distinctUntilChanged(), debounceTime(150)).pipe(takeUntil(this.destroyer$)).subscribe(() => {
+            this.utils.fetchAutoCompleteLocations(this.filterDelivery.nativeElement.value).pipe(takeUntil(this.destroyer$)).subscribe((res) => {
+                this.deliveryOptions = res.features;
+            });
+        });
+    }
+    formControlValue() {
+        this.addRouteForm.controls['pickup_location']?.valueChanges.pipe(takeUntil(this.destroyer$)).subscribe((res) => {
+            if (this.addRouteForm.value.pickup_location && res !== this.addRouteForm.value.pickup_location) {
+                this.addRouteForm.patchValue({
+                    pickup_lat_lng: '',
+                });
+                this.addRouteForm.controls['pickup_lat_lng'].markAsTouched();
+            }
+        });
+        this.addRouteForm.controls['delivery_location']?.valueChanges.pipe(takeUntil(this.destroyer$)).subscribe((res) => {
+            if (this.addRouteForm.value.delivery_location && res !== this.addRouteForm.value.delivery_location) {
+                this.addRouteForm.patchValue({
+                    delivery_lat_lng: '',
+                });
+                this.addRouteForm.controls['delivery_lat_lng'].markAsTouched();
+            }
+        });
+    }
+    formInit() {
+        this.addRouteForm = new FormGroup({
+            route_name: new FormControl('', [Validators.required]),
+            customer_name: new FormControl({ value: '', disabled: true }, [Validators.required]),
+            materials_id: new FormControl('', [Validators.required]),
+            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)]),
+        });
+    }
+    patchFormValue(data) {
+        this.addRouteForm.reset();
+        this.addRouteForm.patchValue(data);
+        this.routeId = data?.route_id;
+        this.routeDetails = data ? { pickup_location: data.pickup_location, delivery_location: data.delivery_location } : null;
+        this.addRouteForm.valueChanges.pipe(takeUntil(this.destroyer$)).subscribe(res => {
+            if (res) {
+                if (this.preventInitialSave)
+                    this.preventInitialSave = false;
+            }
+        });
+        this.filterCustomerList();
+    }
+    fetchCustomersList() {
+        this.utils.getData(`${this.portalName}/company/list/view`).pipe(takeUntil(this.destroyer$)).subscribe((res) => {
+            if (res) {
+                this.customersList = res.data;
+                this.filterCustomerList();
+                this.addRouteForm.controls['customer_name'].enable();
+            }
+        });
+    }
+    fetchUnitsList() {
+        this.utils.getData(`${this.portalName}/unit/list/view`).pipe(takeUntil(this.destroyer$)).subscribe((res) => {
+            if (res) {
+                this.unitsList = res.data;
+            }
+        });
+    }
+    fetchMaterialsList() {
+        this.utils.getData(`${this.portalName}/material/list/view`).pipe(takeUntil(this.destroyer$)).subscribe(((res) => {
+            res.data.sort((a, b) => a.material.localeCompare(b.material));
+            this.materialsList = res.data;
+        }));
+    }
+    selectedLongLat(type, event) {
+        if (type === 'pickup') {
+            this.addRouteForm.patchValue({
+                pickup_lat_lng: (event.geometry.coordinates[1] + ',' + event.geometry.coordinates[0]).toString()
+            });
+            this.coolMapService.clearBoundWithCordinates();
+        }
+        else if (type === 'delivery') {
+            this.addRouteForm.patchValue({
+                delivery_lat_lng: (event.geometry.coordinates[1] + ',' + event.geometry.coordinates[0]).toString()
+            });
+        }
+        this.checkAndFetchRouteInformation();
+    }
+    checkAndFetchRouteInformation(isinitial) {
+        if (this.addRouteForm.value?.delivery_lat_lng?.length > 0 && this.addRouteForm.value?.pickup_lat_lng?.length > 0 && this.addRouteForm.value.unit_id) {
+            let unit = this.unitsList.find((x) => x.id === this.addRouteForm.value.unit_id);
+            const param = {
+                delivery_lat_lng: this.addRouteForm.value.delivery_lat_lng,
+                pickup_lat_lng: this.addRouteForm.value.pickup_lat_lng,
+                unit: unit?.type
+            };
+            this.utils.postdata('coolmap/calculate/routes/estimation', param).pipe(takeUntil(this.destroyer$)).subscribe((res) => {
+                if (res && res['path']) {
+                    this.addRouteForm.patchValue({
+                        estimated_distance: res.dist, estimated_time: res.time, path: res.path
+                    });
+                    let path = res['path'].split(';');
+                    path = path.map((ele) => { return ele = this.formateLatLong(ele); });
+                    res['path'] = path;
+                    const element = {
+                        type: 'FeatureCollection',
+                        features: [{ type: 'Feature', properties: {}, geometry: { type: 'LineString', coordinates: res['path'] } }]
+                    };
+                    this.coolMapService.removeRouteAndMarker(1).then(() => {
+                        const unit = this.unitsList.find((x) => x.id === this.addRouteForm.value.unit_id);
+                        const materialDetails = this.materialsList.find((x) => x.material_id === this.addRouteForm.value.materials_id);
+                        this.coolMapService.loadMapProperty(element, 1, unit?.type, {
+                            pickup_location: this.addRouteForm.get('pickup_location')?.value,
+                            delivery_location: this.addRouteForm.get('delivery_location')?.value,
+                            route_name: this.addRouteForm.get('route_name')?.value,
+                            material: materialDetails?.material, unit: unit?.type
+                        }).then((res) => { this.preventSave = true; });
+                    });
+                }
+                else {
+                    this.coolMapService.removeRouteAndMarker(1);
+                    this.utils.openSnackBar(res['status'], 'error');
+                }
+                if (this.routeId && isinitial)
+                    this.preventInitialSave = true;
+            });
+        }
+        else {
+            this.coolMapService.removeRouteAndMarker(1);
+        }
+    }
+    formateLatLong(latlong) { return latlong ? latlong.split(',').map(x => +x).reverse() : null; }
+    saveRoute() {
+        if (this.addRouteForm.valid) {
+            this.preventSave = false;
+            const data = this.addRouteForm.value;
+            data['trucker_pay_estimate'] = null;
+            data['customer_price_estimate'] = null;
+            const url = this.routeId ? this.utils.postdata('coolmap/update/routes', data) : this.utils.postdata('coolmap/add/routes', data);
+            if (this.routeId)
+                data['id'] = this.routeId;
+            url.pipe(takeUntil(this.destroyer$)).subscribe((res) => {
+                if (res.success) {
+                    this.updateRouteList.emit(true);
+                    this.utils.openSnackBar(res.message, 'success');
+                    this.preventInitialSave = true;
+                    this.preventSave = true;
+                    if (!this.routeId)
+                        this.changeNav.next('Addroute');
+                }
+                else {
+                    this.utils.openSnackBar(res.message, 'error');
+                    this.preventSave = true;
+                }
+            }, (err) => { if (err) {
+                this.preventSave = true;
+            } });
+        }
+        else {
+            this.addRouteForm.markAllAsTouched();
+        }
+    }
+    deleteRoute() {
+        this.preventSave = false;
+        this.utils.postdata('coolmap/delete/routes', { uuid: this.routeId }).subscribe(res => {
+            if (res['data']['success']) {
+                this.utils.openSnackBar(res['data']['message'], 'success');
+                this.updateRouteList.emit(true);
+                this.changeNav.next('Addroute');
+                this.preventInitialSave = true;
+                this.preventSave = true;
+            }
+            else {
+                this.utils.openSnackBar('Somthing went wrong', 'error');
+                this.preventSave = true;
+            }
+        }, (err) => { this.preventSave = true; });
+    }
+    ngOnDestroy() {
+        this.destroyer$.next(true);
+        this.destroyer$.unsubscribe();
+    }
+}
+AddRouteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AddRouteComponent, deps: [{ token: i1.CoolmapService }, { token: i1.UtilsService }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+AddRouteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: AddRouteComponent, selector: "app-add-route", inputs: { routeData: "routeData", portalName: "portalName" }, outputs: { changeNav: "changeNav", updateRouteList: "updateRouteList" }, viewQueries: [{ propertyName: "filterPickup", first: true, predicate: ["filterPickup"], descendants: true }, { propertyName: "filterDelivery", first: true, predicate: ["filterDelivery"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"addroutebox\">\r\n  <div class=\"routedetailbox\" *ngIf=\"enablePopUp\">\r\n    <div class=\"closebtnroutedetail\">\r\n      <mat-icon (click)=\"prevantPopupClose = false; enablePopUp = false;\">clear</mat-icon>\r\n    </div>\r\n    <div class=\"destination\">\r\n      <div class=\"duration\">\r\n        <p class=\"pickprt\"><b>Pickup:</b>{{popupDetails['pickup_location']}}</p>\r\n        <p class=\"dropprt\"><b>Delivery:</b>{{popupDetails['delivery_location']}}</p>\r\n      </div>\r\n      <span><b>Name:</b> {{popupDetails['route_name']}}</span>\r\n      <span><b>Customer:</b> {{popupDetails['customer_name']}}</span>\r\n      <span><b>Material:</b> {{popupDetails['material']}}</span>\r\n      <span><b>Type:</b> {{popupDetails['unit']}}</span>\r\n      <span><b>Distance:</b> {{popupDetails['estimated_distance']}}</span>\r\n      <span><b>Travel Time:</b> {{popupDetails['estimated_time']}}</span>\r\n\r\n      <span class=\"routenotes\"><b>Notes:</b> {{popupDetails['note']}}</span>\r\n    </div>\r\n    <div class=\"createTxt\">\r\n      <small>\r\n        Created by {{popupDetails['created_by_name']}} on {{popupDetails['created_at']}}\r\n      </small>\r\n      <button class=\"editbtn\" (click)=\"editEvent()\">Edit</button>\r\n    </div>\r\n  </div>\r\n  <div class=\"add_add_route_box\" cdkDrag [style.visibility]=\"!enableForm ? 'hidden' : 'visible'\">\r\n    <div class=\"topheadingprt\">\r\n      <h2> {{routeId? 'EDIT' : 'ADD'}} ROUTE </h2>\r\n      <div class=\"buttonprt\">\r\n        <button *ngIf=\"routeId\" class=\"delbtn\" (click)=\"openDialog()\">Delete</button>\r\n        <button mat-raised-button type=\"submit\" class=\"closebtn\" (click)=\"changeNav.next('Addroute')\">Close</button>\r\n      </div>\r\n    </div>\r\n    <form [formGroup]=\"addRouteForm\">\r\n      <div class=\"route_form_area\">\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Route Name</mat-label>\r\n            <input matInput formControlName=\"route_name\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-error *ngIf=\"addRouteForm.controls['route_name'].hasError('required')\">\r\n              Route Name is required\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <input type=\"text\" placeholder=\"Customer Name\" matInput formControlName=\"customer_name\" [matAutocomplete]=\"auto\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n              <mat-option *ngFor=\"let customer of customersList$ | async\" [value]=\"customer['customer_name']\">\r\n                {{customer['customer_name']}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n            <mat-error *ngIf=\"addRouteForm.controls['customer_name'].hasError('required')\">\r\n              Customer name is required.\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Pickup</mat-label>\r\n            <input type=\"text\" placeholder=\"Search...\" matInput #filterPickup [matAutocomplete]=\"pickupAutocomplete\"\r\n              formControlName=\"pickup_location\" (mousedown)=\"$event.stopPropagation()\">\r\n\r\n            <mat-autocomplete #pickupAutocomplete=\"matAutocomplete\">\r\n              <mat-option (click)=\"selectedLongLat('pickup', option)\" *ngFor=\"let option of pickupOptions\"\r\n                [value]=\"option?.place_name\">\r\n                {{option?.place_name}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n          <mat-error *ngIf=\"addRouteForm.controls['pickup_lat_lng'].touched && addRouteForm.controls['pickup_lat_lng'].hasError('required')\">\r\n            Please select pickup location from the list.\r\n          </mat-error>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Delivery</mat-label>\r\n            <input type=\"text\" placeholder=\"Search...\" matInput #filterDelivery [matAutocomplete]=\"deliveryAutocomplete\"\r\n              formControlName=\"delivery_location\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-autocomplete #deliveryAutocomplete=\"matAutocomplete\">\r\n              <mat-option (click)=\"selectedLongLat('delivery', option)\" *ngFor=\"let option of deliveryOptions\"\r\n                [value]=\"option?.place_name\">\r\n                {{option?.place_name}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n          <mat-error *ngIf=\"addRouteForm.controls['delivery_lat_lng'].touched && addRouteForm.controls['delivery_lat_lng'].hasError('required')\">\r\n            Please select delivery location from the list.\r\n          </mat-error>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Notes</mat-label>\r\n            <textarea style=\"height: 18px; resize: none;\" matInput name=\"\" id=\"\" cols=\"30\" rows=\"10\" formControlName=\"note\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\"></textarea>\r\n            <mat-error *ngIf=\"addRouteForm.controls['note'].hasError('maxlength')\">\r\n              Notes should be within 2048 characters.\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <div class=\"col-6 d-flex\">\r\n          <div class=\"inputbox m-0\">\r\n            <mat-form-field>\r\n              <mat-label>Unit type</mat-label>\r\n              <mat-select formControlName=\"unit_id\" (selectionChange)=\"checkAndFetchRouteInformation()\" (mousedown)=\"$event.stopPropagation()\">\r\n                <mat-option *ngFor=\"let unit of unitsList\" [value]=\"unit?.id\"> {{unit?.type}} </mat-option>\r\n              </mat-select>\r\n              <mat-error *ngIf=\"addRouteForm.controls['unit_id'].hasError('required')\">\r\n                Unit is required\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n\r\n          <div class=\"inputbox m-0\">\r\n            <mat-form-field>\r\n              <mat-label>Material</mat-label>\r\n              <mat-select formControlName=\"materials_id\" (mousedown)=\"$event.stopPropagation()\">\r\n                <mat-option *ngFor=\"let material of materialsList\" [value]=\"material?.material_id\"> {{material?.material}}\r\n                </mat-option>\r\n              </mat-select>\r\n              <mat-error *ngIf=\"addRouteForm.controls['materials_id'].hasError('required')\">\r\n                Meterial is required\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <app-estimation-display *ngIf=\"addRouteForm?.value?.pickup_lat_lng && addRouteForm?.value?.delivery_lat_lng\" [value]=\"addRouteForm['value']\"></app-estimation-display>\r\n        </div>\r\n        <button mat-raised-button type=\"submit\" (click)=\"saveRoute()\" *ngIf=\"preventSave\"\r\n          [disabled]=\"addRouteForm.invalid && preventSave || preventInitialSave\">{{routeId? 'Update' : 'Save'}}\r\n        </button>\r\n        <div class=\"loader\">\r\n          <mat-spinner *ngIf=\"!preventSave\"></mat-spinner>\r\n        </div>\r\n      </div>\r\n    </form>\r\n  </div>\r\n</div>\r\n", styles: [".addroutebox{width:calc(100% - 315px);position:absolute;left:300px;bottom:10px;z-index:999;display:flex;justify-content:space-between;align-items:flex-start}.addroutebox .routedetailbox{max-width:300px;padding:10px;background-color:#fff;border-radius:20px;margin-right:20px}@media (min-width: 1600px){.addroutebox .routedetailbox{max-width:280px}}.addroutebox .editbtn{background:#326ad3;padding:10px 25px;color:#fff;font-size:.8125rem;border-radius:30px;float:right}.add_add_route_box{background:white;padding:10px 20px;border-radius:20px;box-shadow:2px 4px 4px 2px #00000024;height:370px;width:100%;position:relative;cursor:move}.add_add_route_box .route_form_area{display:flex;flex-wrap:wrap;justify-content:space-between}.add_add_route_box .route_form_area .col-6{width:48%;margin-top:15px;justify-content:space-between}.add_add_route_box .route_form_area .col-6 .inputbox{width:47%}.add_add_route_box .route_form_area .col-6 span{font-size:.875rem}.add_add_route_box .route_form_area button{background:#326ad3;padding:0 18px;color:#fff;font-size:.8125rem;border-radius:30px;position:absolute;right:18px;top:20px}.closebtn{background:black;color:#fff;border-radius:30px;padding:0 18px;margin-left:10px}.delbtn{background:red;color:#fff;border-radius:30px;padding:10px 18px}.add_route_listingpart .listing_toggle{background:white;border-radius:15px;padding:8px 10px;position:absolute;right:10px;top:30px;cursor:pointer}.listing_box{background:#282828;height:100vh;position:fixed;right:0;top:0;z-index:1111;box-shadow:-3px 0 5px #ffffff14;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;width:0;border-radius:40px 0 0 40px;opacity:0}.listing_box .closebtn{display:none}.show .listing_box{width:250px;max-width:250px;flex:0 0 250px;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;padding:40px 0 40px 20px;opacity:1}@media (min-width: 1600px){.show .listing_box{width:320px;max-width:320px;flex:0 0 320px}}.show .listing_box h2{color:#fff;white-space:nowrap}.show .listing_box ul{padding:0 20px 0 0}.show .listing_box ul li{background:#4a4a4a;padding:15px;border-radius:15px;display:flex;margin-bottom:15px}.show .listing_box ul li .companayIcon{width:40px;height:40px;border-radius:10px;background:white;margin-right:10px;display:flex;justify-content:center;align-items:center}.show .listing_box ul li .company_cont{width:calc(100% - 50px)}.show .listing_box ul li .company_cont h3{color:#fff;font-size:15px;font-weight:400;margin:0;text-overflow:ellipsis;max-width:129px;-webkit-box-orient:vertical;white-space:nowrap;overflow:hidden}@media (min-width: 1600px){.show .listing_box ul li .company_cont h3{max-width:170px}}.show .listing_box ul li .company_cont p{color:#bcbcbc;font-size:12px;margin:5px 0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:16px}.show .closebtn{position:absolute;left:-33px;top:50px;background:#282828;color:#fff;padding:8px;border-top-left-radius:15px;border-bottom-left-radius:15px;cursor:pointer;box-shadow:-4px 2px 5px #ffffff14;display:block}.loader{position:absolute;width:95%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.buttonprt{margin-right:83px}.destination .duration{padding:10px}.destination span{padding:5px 0}.closebtnroutedetail{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#fff;position:absolute;top:-11px;left:-11px}.routenotes{max-height:170px;overflow:auto}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i7$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AddRouteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-add-route', template: "<div class=\"addroutebox\">\r\n  <div class=\"routedetailbox\" *ngIf=\"enablePopUp\">\r\n    <div class=\"closebtnroutedetail\">\r\n      <mat-icon (click)=\"prevantPopupClose = false; enablePopUp = false;\">clear</mat-icon>\r\n    </div>\r\n    <div class=\"destination\">\r\n      <div class=\"duration\">\r\n        <p class=\"pickprt\"><b>Pickup:</b>{{popupDetails['pickup_location']}}</p>\r\n        <p class=\"dropprt\"><b>Delivery:</b>{{popupDetails['delivery_location']}}</p>\r\n      </div>\r\n      <span><b>Name:</b> {{popupDetails['route_name']}}</span>\r\n      <span><b>Customer:</b> {{popupDetails['customer_name']}}</span>\r\n      <span><b>Material:</b> {{popupDetails['material']}}</span>\r\n      <span><b>Type:</b> {{popupDetails['unit']}}</span>\r\n      <span><b>Distance:</b> {{popupDetails['estimated_distance']}}</span>\r\n      <span><b>Travel Time:</b> {{popupDetails['estimated_time']}}</span>\r\n\r\n      <span class=\"routenotes\"><b>Notes:</b> {{popupDetails['note']}}</span>\r\n    </div>\r\n    <div class=\"createTxt\">\r\n      <small>\r\n        Created by {{popupDetails['created_by_name']}} on {{popupDetails['created_at']}}\r\n      </small>\r\n      <button class=\"editbtn\" (click)=\"editEvent()\">Edit</button>\r\n    </div>\r\n  </div>\r\n  <div class=\"add_add_route_box\" cdkDrag [style.visibility]=\"!enableForm ? 'hidden' : 'visible'\">\r\n    <div class=\"topheadingprt\">\r\n      <h2> {{routeId? 'EDIT' : 'ADD'}} ROUTE </h2>\r\n      <div class=\"buttonprt\">\r\n        <button *ngIf=\"routeId\" class=\"delbtn\" (click)=\"openDialog()\">Delete</button>\r\n        <button mat-raised-button type=\"submit\" class=\"closebtn\" (click)=\"changeNav.next('Addroute')\">Close</button>\r\n      </div>\r\n    </div>\r\n    <form [formGroup]=\"addRouteForm\">\r\n      <div class=\"route_form_area\">\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Route Name</mat-label>\r\n            <input matInput formControlName=\"route_name\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-error *ngIf=\"addRouteForm.controls['route_name'].hasError('required')\">\r\n              Route Name is required\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <input type=\"text\" placeholder=\"Customer Name\" matInput formControlName=\"customer_name\" [matAutocomplete]=\"auto\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n              <mat-option *ngFor=\"let customer of customersList$ | async\" [value]=\"customer['customer_name']\">\r\n                {{customer['customer_name']}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n            <mat-error *ngIf=\"addRouteForm.controls['customer_name'].hasError('required')\">\r\n              Customer name is required.\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Pickup</mat-label>\r\n            <input type=\"text\" placeholder=\"Search...\" matInput #filterPickup [matAutocomplete]=\"pickupAutocomplete\"\r\n              formControlName=\"pickup_location\" (mousedown)=\"$event.stopPropagation()\">\r\n\r\n            <mat-autocomplete #pickupAutocomplete=\"matAutocomplete\">\r\n              <mat-option (click)=\"selectedLongLat('pickup', option)\" *ngFor=\"let option of pickupOptions\"\r\n                [value]=\"option?.place_name\">\r\n                {{option?.place_name}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n          <mat-error *ngIf=\"addRouteForm.controls['pickup_lat_lng'].touched && addRouteForm.controls['pickup_lat_lng'].hasError('required')\">\r\n            Please select pickup location from the list.\r\n          </mat-error>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Delivery</mat-label>\r\n            <input type=\"text\" placeholder=\"Search...\" matInput #filterDelivery [matAutocomplete]=\"deliveryAutocomplete\"\r\n              formControlName=\"delivery_location\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-autocomplete #deliveryAutocomplete=\"matAutocomplete\">\r\n              <mat-option (click)=\"selectedLongLat('delivery', option)\" *ngFor=\"let option of deliveryOptions\"\r\n                [value]=\"option?.place_name\">\r\n                {{option?.place_name}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n          <mat-error *ngIf=\"addRouteForm.controls['delivery_lat_lng'].touched && addRouteForm.controls['delivery_lat_lng'].hasError('required')\">\r\n            Please select delivery location from the list.\r\n          </mat-error>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Notes</mat-label>\r\n            <textarea style=\"height: 18px; resize: none;\" matInput name=\"\" id=\"\" cols=\"30\" rows=\"10\" formControlName=\"note\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\"></textarea>\r\n            <mat-error *ngIf=\"addRouteForm.controls['note'].hasError('maxlength')\">\r\n              Notes should be within 2048 characters.\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <div class=\"col-6 d-flex\">\r\n          <div class=\"inputbox m-0\">\r\n            <mat-form-field>\r\n              <mat-label>Unit type</mat-label>\r\n              <mat-select formControlName=\"unit_id\" (selectionChange)=\"checkAndFetchRouteInformation()\" (mousedown)=\"$event.stopPropagation()\">\r\n                <mat-option *ngFor=\"let unit of unitsList\" [value]=\"unit?.id\"> {{unit?.type}} </mat-option>\r\n              </mat-select>\r\n              <mat-error *ngIf=\"addRouteForm.controls['unit_id'].hasError('required')\">\r\n                Unit is required\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n\r\n          <div class=\"inputbox m-0\">\r\n            <mat-form-field>\r\n              <mat-label>Material</mat-label>\r\n              <mat-select formControlName=\"materials_id\" (mousedown)=\"$event.stopPropagation()\">\r\n                <mat-option *ngFor=\"let material of materialsList\" [value]=\"material?.material_id\"> {{material?.material}}\r\n                </mat-option>\r\n              </mat-select>\r\n              <mat-error *ngIf=\"addRouteForm.controls['materials_id'].hasError('required')\">\r\n                Meterial is required\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <app-estimation-display *ngIf=\"addRouteForm?.value?.pickup_lat_lng && addRouteForm?.value?.delivery_lat_lng\" [value]=\"addRouteForm['value']\"></app-estimation-display>\r\n        </div>\r\n        <button mat-raised-button type=\"submit\" (click)=\"saveRoute()\" *ngIf=\"preventSave\"\r\n          [disabled]=\"addRouteForm.invalid && preventSave || preventInitialSave\">{{routeId? 'Update' : 'Save'}}\r\n        </button>\r\n        <div class=\"loader\">\r\n          <mat-spinner *ngIf=\"!preventSave\"></mat-spinner>\r\n        </div>\r\n      </div>\r\n    </form>\r\n  </div>\r\n</div>\r\n", styles: [".addroutebox{width:calc(100% - 315px);position:absolute;left:300px;bottom:10px;z-index:999;display:flex;justify-content:space-between;align-items:flex-start}.addroutebox .routedetailbox{max-width:300px;padding:10px;background-color:#fff;border-radius:20px;margin-right:20px}@media (min-width: 1600px){.addroutebox .routedetailbox{max-width:280px}}.addroutebox .editbtn{background:#326ad3;padding:10px 25px;color:#fff;font-size:.8125rem;border-radius:30px;float:right}.add_add_route_box{background:white;padding:10px 20px;border-radius:20px;box-shadow:2px 4px 4px 2px #00000024;height:370px;width:100%;position:relative;cursor:move}.add_add_route_box .route_form_area{display:flex;flex-wrap:wrap;justify-content:space-between}.add_add_route_box .route_form_area .col-6{width:48%;margin-top:15px;justify-content:space-between}.add_add_route_box .route_form_area .col-6 .inputbox{width:47%}.add_add_route_box .route_form_area .col-6 span{font-size:.875rem}.add_add_route_box .route_form_area button{background:#326ad3;padding:0 18px;color:#fff;font-size:.8125rem;border-radius:30px;position:absolute;right:18px;top:20px}.closebtn{background:black;color:#fff;border-radius:30px;padding:0 18px;margin-left:10px}.delbtn{background:red;color:#fff;border-radius:30px;padding:10px 18px}.add_route_listingpart .listing_toggle{background:white;border-radius:15px;padding:8px 10px;position:absolute;right:10px;top:30px;cursor:pointer}.listing_box{background:#282828;height:100vh;position:fixed;right:0;top:0;z-index:1111;box-shadow:-3px 0 5px #ffffff14;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;width:0;border-radius:40px 0 0 40px;opacity:0}.listing_box .closebtn{display:none}.show .listing_box{width:250px;max-width:250px;flex:0 0 250px;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;padding:40px 0 40px 20px;opacity:1}@media (min-width: 1600px){.show .listing_box{width:320px;max-width:320px;flex:0 0 320px}}.show .listing_box h2{color:#fff;white-space:nowrap}.show .listing_box ul{padding:0 20px 0 0}.show .listing_box ul li{background:#4a4a4a;padding:15px;border-radius:15px;display:flex;margin-bottom:15px}.show .listing_box ul li .companayIcon{width:40px;height:40px;border-radius:10px;background:white;margin-right:10px;display:flex;justify-content:center;align-items:center}.show .listing_box ul li .company_cont{width:calc(100% - 50px)}.show .listing_box ul li .company_cont h3{color:#fff;font-size:15px;font-weight:400;margin:0;text-overflow:ellipsis;max-width:129px;-webkit-box-orient:vertical;white-space:nowrap;overflow:hidden}@media (min-width: 1600px){.show .listing_box ul li .company_cont h3{max-width:170px}}.show .listing_box ul li .company_cont p{color:#bcbcbc;font-size:12px;margin:5px 0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:16px}.show .closebtn{position:absolute;left:-33px;top:50px;background:#282828;color:#fff;padding:8px;border-top-left-radius:15px;border-bottom-left-radius:15px;cursor:pointer;box-shadow:-4px 2px 5px #ffffff14;display:block}.loader{position:absolute;width:95%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.buttonprt{margin-right:83px}.destination .duration{padding:10px}.destination span{padding:5px 0}.closebtnroutedetail{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#fff;position:absolute;top:-11px;left:-11px}.routenotes{max-height:170px;overflow:auto}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.CoolmapService }, { type: i1.UtilsService }, { type: i1$1.MatDialog }]; }, propDecorators: { filterPickup: [{
+                type: ViewChild,
+                args: ['filterPickup']
+            }], filterDelivery: [{
+                type: ViewChild,
+                args: ['filterDelivery']
+            }], changeNav: [{
+                type: Output
+            }], updateRouteList: [{
+                type: Output
+            }], routeData: [{
+                type: Input
+            }], portalName: [{
+                type: Input
             }] } });
 
-class CoolmapModule {
-}
-CoolmapModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CoolmapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CoolmapModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: CoolmapModule, declarations: [CoolmapComponent,
-        MapComponent,
-        NavComponent,
-        AddRouteNavComponent,
-        JobCodeNavComponent,
-        RouteJobCodeListComponent,
-        ViewRouteListCardComponent,
-        SmsCardDetailsOverviewComponent,
-        JobCodeListCardComponent,
-        JobCodeComponent,
-        JobRouteListComponent,
-        JobcodeStatusComponent,
-        JobcodeOverviewComponent,
-        DialogComponent,
-        AddRouteComponent], imports: [CommonModule,
-        MatSnackBarModule,
-        MatSidenavModule,
-        DragDropModule,
-        FormsModule,
-        MatInputModule,
-        MatSelectModule,
-        MatIconModule,
-        ReactiveFormsModule,
-        MatAutocompleteModule,
-        MatFormFieldModule,
-        MatProgressSpinnerModule,
-        MatChipsModule,
-        MatDialogModule,
-        MatTooltipModule,
-        MatDatepickerModule,
-        MatNativeDateModule,
-        PerfectScrollbarModule,
-        MatPseudoCheckboxModule,
-        MatButtonModule,
-        MatProgressBarModule], exports: [CoolmapComponent,
-        MapComponent,
-        NavComponent,
-        AddRouteNavComponent,
-        JobCodeNavComponent,
-        RouteJobCodeListComponent,
-        ViewRouteListCardComponent,
-        SmsCardDetailsOverviewComponent,
-        JobCodeListCardComponent,
-        JobCodeComponent,
-        JobRouteListComponent,
-        JobcodeStatusComponent,
-        JobcodeOverviewComponent,
-        DialogComponent,
-        AddRouteComponent] });
-CoolmapModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CoolmapModule, imports: [CommonModule,
-        MatSnackBarModule,
-        MatSidenavModule,
-        DragDropModule,
-        FormsModule,
-        MatInputModule,
-        MatSelectModule,
-        MatIconModule,
-        ReactiveFormsModule,
-        MatAutocompleteModule,
-        MatFormFieldModule,
-        MatProgressSpinnerModule,
-        MatChipsModule,
-        MatDialogModule,
-        MatTooltipModule,
-        MatDatepickerModule,
-        MatNativeDateModule,
-        PerfectScrollbarModule,
-        MatPseudoCheckboxModule,
-        MatButtonModule,
-        MatProgressBarModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CoolmapModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        CoolmapComponent,
-                        MapComponent,
-                        NavComponent,
-                        AddRouteNavComponent,
-                        JobCodeNavComponent,
-                        RouteJobCodeListComponent,
-                        ViewRouteListCardComponent,
-                        SmsCardDetailsOverviewComponent,
-                        JobCodeListCardComponent,
-                        JobCodeComponent,
-                        JobRouteListComponent,
-                        JobcodeStatusComponent,
-                        JobcodeOverviewComponent,
-                        DialogComponent,
-                        AddRouteComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        MatSnackBarModule,
-                        MatSidenavModule,
-                        DragDropModule,
-                        FormsModule,
-                        MatInputModule,
-                        MatSelectModule,
-                        MatIconModule,
-                        ReactiveFormsModule,
-                        MatAutocompleteModule,
-                        MatFormFieldModule,
-                        MatProgressSpinnerModule,
-                        MatChipsModule,
-                        MatDialogModule,
-                        MatTooltipModule,
-                        MatDatepickerModule,
-                        MatNativeDateModule,
-                        PerfectScrollbarModule,
-                        MatPseudoCheckboxModule,
-                        MatButtonModule,
-                        MatProgressBarModule,
-                    ],
-                    exports: [
-                        CoolmapComponent,
-                        MapComponent,
-                        NavComponent,
-                        AddRouteNavComponent,
-                        JobCodeNavComponent,
-                        RouteJobCodeListComponent,
-                        ViewRouteListCardComponent,
-                        SmsCardDetailsOverviewComponent,
-                        JobCodeListCardComponent,
-                        JobCodeComponent,
-                        JobRouteListComponent,
-                        JobcodeStatusComponent,
-                        JobcodeOverviewComponent,
-                        DialogComponent,
-                        AddRouteComponent
-                    ],
-                    entryComponents: [
-                        DialogComponent,
-                        JobCodeComponent,
-                        AddRouteComponent
-                    ],
-                    providers: []
-                }]
+class CoolmapModule {
+}
+CoolmapModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CoolmapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CoolmapModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: CoolmapModule, declarations: [CoolmapComponent,
+        MapComponent,
+        NavComponent,
+        AddRouteNavComponent,
+        JobCodeNavComponent,
+        RouteJobCodeListComponent,
+        ViewRouteListCardComponent,
+        SmsCardDetailsOverviewComponent,
+        JobCodeListCardComponent,
+        JobCodeComponent,
+        JobRouteListComponent,
+        JobcodeStatusComponent,
+        JobcodeOverviewComponent,
+        DialogComponent,
+        AddRouteComponent], imports: [CommonModule,
+        MatSnackBarModule,
+        MatSidenavModule,
+        DragDropModule,
+        FormsModule,
+        MatInputModule,
+        MatSelectModule,
+        MatIconModule,
+        ReactiveFormsModule,
+        MatAutocompleteModule,
+        MatFormFieldModule,
+        MatProgressSpinnerModule,
+        MatChipsModule,
+        MatDialogModule,
+        MatTooltipModule,
+        MatDatepickerModule,
+        MatNativeDateModule,
+        PerfectScrollbarModule,
+        MatPseudoCheckboxModule,
+        MatButtonModule,
+        MatProgressBarModule], exports: [CoolmapComponent,
+        MapComponent,
+        NavComponent,
+        AddRouteNavComponent,
+        JobCodeNavComponent,
+        RouteJobCodeListComponent,
+        ViewRouteListCardComponent,
+        SmsCardDetailsOverviewComponent,
+        JobCodeListCardComponent,
+        JobCodeComponent,
+        JobRouteListComponent,
+        JobcodeStatusComponent,
+        JobcodeOverviewComponent,
+        DialogComponent,
+        AddRouteComponent] });
+CoolmapModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CoolmapModule, imports: [CommonModule,
+        MatSnackBarModule,
+        MatSidenavModule,
+        DragDropModule,
+        FormsModule,
+        MatInputModule,
+        MatSelectModule,
+        MatIconModule,
+        ReactiveFormsModule,
+        MatAutocompleteModule,
+        MatFormFieldModule,
+        MatProgressSpinnerModule,
+        MatChipsModule,
+        MatDialogModule,
+        MatTooltipModule,
+        MatDatepickerModule,
+        MatNativeDateModule,
+        PerfectScrollbarModule,
+        MatPseudoCheckboxModule,
+        MatButtonModule,
+        MatProgressBarModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CoolmapModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        CoolmapComponent,
+                        MapComponent,
+                        NavComponent,
+                        AddRouteNavComponent,
+                        JobCodeNavComponent,
+                        RouteJobCodeListComponent,
+                        ViewRouteListCardComponent,
+                        SmsCardDetailsOverviewComponent,
+                        JobCodeListCardComponent,
+                        JobCodeComponent,
+                        JobRouteListComponent,
+                        JobcodeStatusComponent,
+                        JobcodeOverviewComponent,
+                        DialogComponent,
+                        AddRouteComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        MatSnackBarModule,
+                        MatSidenavModule,
+                        DragDropModule,
+                        FormsModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatIconModule,
+                        ReactiveFormsModule,
+                        MatAutocompleteModule,
+                        MatFormFieldModule,
+                        MatProgressSpinnerModule,
+                        MatChipsModule,
+                        MatDialogModule,
+                        MatTooltipModule,
+                        MatDatepickerModule,
+                        MatNativeDateModule,
+                        PerfectScrollbarModule,
+                        MatPseudoCheckboxModule,
+                        MatButtonModule,
+                        MatProgressBarModule,
+                    ],
+                    exports: [
+                        CoolmapComponent,
+                        MapComponent,
+                        NavComponent,
+                        AddRouteNavComponent,
+                        JobCodeNavComponent,
+                        RouteJobCodeListComponent,
+                        ViewRouteListCardComponent,
+                        SmsCardDetailsOverviewComponent,
+                        JobCodeListCardComponent,
+                        JobCodeComponent,
+                        JobRouteListComponent,
+                        JobcodeStatusComponent,
+                        JobcodeOverviewComponent,
+                        DialogComponent,
+                        AddRouteComponent
+                    ],
+                    entryComponents: [
+                        DialogComponent,
+                        JobCodeComponent,
+                        AddRouteComponent
+                    ],
+                    providers: []
+                }]
         }] });
 
-/*
- * Public API Surface of coolmap
+/*
+ * Public API Surface of coolmap
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { AddRouteComponent, AddRouteNavComponent, CoolmapComponent, CoolmapModule, DialogComponent, JobCodeComponent, JobCodeListCardComponent, JobCodeNavComponent, JobRouteListComponent, JobcodeOverviewComponent, JobcodeStatusComponent, MapComponent, NavComponent, RouteJobCodeListComponent, SmsCardDetailsOverviewComponent, ViewRouteListCardComponent };