@aggdirect/coolmap 2.8.9 → 2.9.1

package/fesm2022/aggdirect-coolmap.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Component, ViewChild, EventEmitter, Output, Inject, Input, inject, ChangeDetectorRef, NgModule } from '@angular/core';
-import { Subject, takeUntil, startWith, map, fromEvent, distinctUntilChanged, debounceTime } from 'rxjs';
+import { Subject, takeUntil, startWith, map, fromEvent, distinctUntilChanged, debounceTime, pairwise, filter } from 'rxjs';
 import * as i1 from '@aggdirect/coolmap-services';
 import { DriversmsCardKey, DriverSmsCardEnum, JobCodeOverviewData, JobCodeOverviewEnum, EstinationData, EstinationEnum } from '@aggdirect/coolmap-services';
 import * as i2 from '@angular/common';
@@ -141,11 +141,11 @@ class ViewRouteListCardComponent {
         this.utils.routeDetailsUtility.next({ event, route });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ViewRouteListCardComponent, deps: [{ token: i1.UtilsService }, { token: 'memberData' }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", 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><ng-container *ngIf=\"config?.repository === 'coolmap'\">{{route['customer_name']}}</ng-container></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", 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:#000;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:#000;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:#000;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:#000;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: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", 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><ng-container *ngIf=\"config?.repository === 'coolmap'\">{{route['customer_name']}}</ng-container></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", 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:#000;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}@media (min-width: 1600px){.routebox .pickdropprt .pickprt h4{max-width:265px}}.routebox .pickdropprt .pickprt h4:before{background:green;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:#000;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}.routebox .pickdropprt .dropprt h4:before{background:red;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.routebox .infoicon{position:absolute;right:10px;top:11px}.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:36px;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: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", 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><ng-container *ngIf=\"config?.repository === 'coolmap'\">{{route['customer_name']}}</ng-container></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", 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:#000;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:#000;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:#000;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:#000;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"] }]
+            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><ng-container *ngIf=\"config?.repository === 'coolmap'\">{{route['customer_name']}}</ng-container></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", 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:#000;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}@media (min-width: 1600px){.routebox .pickdropprt .pickprt h4{max-width:265px}}.routebox .pickdropprt .pickprt h4:before{background:green;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:#000;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}.routebox .pickdropprt .dropprt h4:before{background:red;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.routebox .infoicon{position:absolute;right:10px;top:11px}.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:36px;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: () => [{ type: i1.UtilsService }, { type: i1.CoolmapConfigModel, decorators: [{
                     type: Inject,
                     args: ['memberData']
@@ -521,11 +521,11 @@ class RouteJobCodeListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: RouteJobCodeListComponent, deps: [{ token: i1.CoolmapService }, { token: i1.UtilsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", 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    <cdk-virtual-scroll-viewport itemSize=\"50\" [class.jobscroll]=\"visiblesection('jobcode')\" class=\"example-viewport\">\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')\" \n                                    (toggleDrivermenu)=\"toggleDrivermenu($event)\"\n                                    (routeSeletion)=\"selectRoute($event)\" \n                                    [preventCloseDetails]=\"preventDetailsClose\" \n                                    [emitJobdetails]=\"{emitroute, clearJobDetailsFromList}\" \n                                    [route]=\"checkroutes(route)\">\n            </app-job-code-list-card>\n            <app-view-route-list-card *ngIf=\"visiblesection('addroute')\"\n                                      [emitrouteevent]=\"emitroute\" \n                                      [route]=\"route\">\n            </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    </cdk-virtual-scroll-viewport>\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:#fff;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:#fff;border-bottom-right-radius:20px;border-bottom-left-radius:20px;content:\"\";position:absolute;bottom:-9px;width:100%}.smslist{background:#fff;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 .93em 0 0;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;width:15.62em}@media (min-width: 2500px){.jobList ul li{height:7.65vh}}@media (min-width: 3300px){.jobList ul li{height:5.61vh}}.viewroute ul{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;width:15.62em}@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}.example-viewport{height:900px}\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: "directive", type: i4.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: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i8.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: i8.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", 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    <cdk-virtual-scroll-viewport itemSize=\"50\" [class.jobscroll]=\"visiblesection('jobcode')\" class=\"example-viewport\">\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')\" \n                                    (toggleDrivermenu)=\"toggleDrivermenu($event)\"\n                                    (routeSeletion)=\"selectRoute($event)\" \n                                    [preventCloseDetails]=\"preventDetailsClose\" \n                                    [emitJobdetails]=\"{emitroute, clearJobDetailsFromList}\" \n                                    [route]=\"checkroutes(route)\">\n            </app-job-code-list-card>\n            <app-view-route-list-card *ngIf=\"visiblesection('addroute')\"\n                                      [emitrouteevent]=\"emitroute\" \n                                      [route]=\"route\">\n            </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    </cdk-virtual-scroll-viewport>\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:#fff;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:#fff;border-bottom-right-radius:20px;border-bottom-left-radius:20px;content:\"\";position:absolute;bottom:-9px;width:100%}.smslist{background:#fff;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 .93em 0 0;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;width:15.62em}@media (min-width: 2500px){.jobList ul li{height:7.65vh}}@media (min-width: 3300px){.jobList ul li{height:5.61vh}}.viewroute ul{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;width:15.62em}.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}.example-viewport{height:74vh}\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: "directive", type: i4.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: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i8.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: i8.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { 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: "17.2.1", 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    <cdk-virtual-scroll-viewport itemSize=\"50\" [class.jobscroll]=\"visiblesection('jobcode')\" class=\"example-viewport\">\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')\" \n                                    (toggleDrivermenu)=\"toggleDrivermenu($event)\"\n                                    (routeSeletion)=\"selectRoute($event)\" \n                                    [preventCloseDetails]=\"preventDetailsClose\" \n                                    [emitJobdetails]=\"{emitroute, clearJobDetailsFromList}\" \n                                    [route]=\"checkroutes(route)\">\n            </app-job-code-list-card>\n            <app-view-route-list-card *ngIf=\"visiblesection('addroute')\"\n                                      [emitrouteevent]=\"emitroute\" \n                                      [route]=\"route\">\n            </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    </cdk-virtual-scroll-viewport>\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:#fff;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:#fff;border-bottom-right-radius:20px;border-bottom-left-radius:20px;content:\"\";position:absolute;bottom:-9px;width:100%}.smslist{background:#fff;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 .93em 0 0;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;width:15.62em}@media (min-width: 2500px){.jobList ul li{height:7.65vh}}@media (min-width: 3300px){.jobList ul li{height:5.61vh}}.viewroute ul{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;width:15.62em}@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}.example-viewport{height:900px}\n"] }]
+            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    <cdk-virtual-scroll-viewport itemSize=\"50\" [class.jobscroll]=\"visiblesection('jobcode')\" class=\"example-viewport\">\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')\" \n                                    (toggleDrivermenu)=\"toggleDrivermenu($event)\"\n                                    (routeSeletion)=\"selectRoute($event)\" \n                                    [preventCloseDetails]=\"preventDetailsClose\" \n                                    [emitJobdetails]=\"{emitroute, clearJobDetailsFromList}\" \n                                    [route]=\"checkroutes(route)\">\n            </app-job-code-list-card>\n            <app-view-route-list-card *ngIf=\"visiblesection('addroute')\"\n                                      [emitrouteevent]=\"emitroute\" \n                                      [route]=\"route\">\n            </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    </cdk-virtual-scroll-viewport>\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:#fff;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:#fff;border-bottom-right-radius:20px;border-bottom-left-radius:20px;content:\"\";position:absolute;bottom:-9px;width:100%}.smslist{background:#fff;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 .93em 0 0;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;width:15.62em}@media (min-width: 2500px){.jobList ul li{height:7.65vh}}@media (min-width: 3300px){.jobList ul li{height:5.61vh}}.viewroute ul{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;width:15.62em}.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}.example-viewport{height:74vh}\n"] }]
         }], ctorParameters: () => [{ type: i1.CoolmapService }, { type: i1.UtilsService }], propDecorators: { loader: [{
                 type: Input
             }], type: [{
@@ -1207,6 +1207,8 @@ class AddRouteComponent {
     config;
     filterPickup;
     filterDelivery;
+    pickup_system_location;
+    delivery_system_location;
     changeNav = new EventEmitter();
     updateRouteList = new EventEmitter();
     pickupOptions;
@@ -1232,6 +1234,9 @@ class AddRouteComponent {
     get isSystemPickup() {
         return this.addRouteForm.get('pickUpSearchOption')?.value === 'system';
     }
+    get isSystemDelivery() {
+        return this.addRouteForm.get('deliverySearchOtption')?.value === 'system';
+    }
     constructor(coolMapService, utils, dialog, config) {
         this.coolMapService = coolMapService;
         this.utils = utils;
@@ -1322,8 +1327,8 @@ class AddRouteComponent {
             if (this.config.repository === 'coolmap') {
                 this.utils.fetchLocationlist().then((res) => {
                     this.locationList = res;
-                    this.pickupOptions = this.createAddressFilter('pickup_location', this.locationList, 'formatted_address');
-                    this.deliveryOptions = this.createAddressFilter('delivery_location', this.locationList, 'formatted_address');
+                    this.pickupOptions = this.createAddressFilter('pickup_location', this.locationList, 'complete_address');
+                    this.deliveryOptions = this.createAddressFilter('delivery_location', this.locationList, 'complete_address');
                 });
             }
         }
@@ -1337,6 +1342,7 @@ class AddRouteComponent {
                 .then((res) => {
                 if (res) {
                     this.patchAddressValue(res, 'pickup');
+                    this.resetPickUpDeliveryField('pickup', 'system');
                 }
             });
         });
@@ -1349,6 +1355,7 @@ class AddRouteComponent {
             this.utils.autocomplete(this.filterDelivery).then((res) => {
                 if (res) {
                     this.patchAddressValue(res, 'delivery');
+                    this.resetPickUpDeliveryField('delivery', 'system');
                 }
             });
         });
@@ -1360,16 +1367,27 @@ class AddRouteComponent {
         this.formPickUpFilter();
         this.formDeliveryFilter();
     }
-    resetPickUpDelivery(type) {
-        setTimeout(() => {
-            const form = this.addRouteForm;
-            form.patchValue({
-                [type + '_location']: '',
-                [type + '_lat_lng']: ''
-            });
-            form.get(`${type}_location`).updateValueAndValidity();
-            form.get(type + `_lat_lng`).markAsTouched();
-        }, 100);
+    resetPickUpDeliveryField(locationType, searchType) {
+        if (this.config.repository === 'coolmap') {
+            setTimeout(() => {
+                if (locationType === 'pickup') {
+                    const inputelement = document.getElementById((searchType === 'system')
+                        ? 'pickup_system_location'
+                        : 'pickup_google_location');
+                    if (inputelement) {
+                        inputelement.value = null;
+                    }
+                }
+                else {
+                    const inputelement = document.getElementById((searchType === 'system')
+                        ? 'delivery_system_location'
+                        : 'delivery_google_location');
+                    if (inputelement) {
+                        inputelement.value = null;
+                    }
+                }
+            }, 100);
+        }
     }
     patchAddressValue(data, type) {
         setTimeout(() => {
@@ -1380,19 +1398,24 @@ class AddRouteComponent {
             this.addRouteForm.updateValueAndValidity();
             if (type === 'pickup')
                 this.coolMapService.clearBoundWithCordinates();
-            ;
+            if (type === 'pickup' && this.addRouteForm.get('pickUpSearchOption').value === 'system') {
+                this.resetPickUpDeliveryField('pickup', 'google');
+            }
+            else if (type === 'delivery' && this.addRouteForm.get('deliverySearchOtption').value === 'system') {
+                this.resetPickUpDeliveryField('delivery', 'google');
+            }
             this.checkAndFetchRouteInformation();
         }, 100);
     }
     formControlValue() {
-        this.addRouteForm.controls['pickup_location']?.valueChanges.pipe(takeUntil(this.destroyer$)).subscribe((res) => {
+        this.addRouteForm.get('pickup_location')?.valueChanges.pipe(takeUntil(this.destroyer$)).subscribe((res) => {
             const rawFormvalue = this.addRouteForm.getRawValue();
             if ((rawFormvalue.pickup_location && res) !== rawFormvalue.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) => {
+        this.addRouteForm.get('delivery_location')?.valueChanges.pipe(takeUntil(this.destroyer$)).subscribe((res) => {
             const rawFormvalue = this.addRouteForm.getRawValue();
             if ((rawFormvalue.delivery_location && res) !== rawFormvalue.delivery_location) {
                 this.addRouteForm.patchValue({ delivery_lat_lng: '' });
@@ -1430,12 +1453,16 @@ class AddRouteComponent {
             });
         }
         else {
-            setTimeout(() => {
-                this.addRouteForm.patchValue({
-                    pickUpSearchOption: (!data || data.is_system_pickup) ? 'system' : 'google',
-                    deliverySearchOtption: (!data || data.is_system_delivery) ? 'system' : 'google',
-                });
-            }, 100);
+            this.addRouteForm.patchValue({
+                pickUpSearchOption: (!data || data.is_system_pickup) ? 'system' : 'google',
+                deliverySearchOtption: (!data || data.is_system_delivery) ? 'system' : 'google',
+            });
+            if (data) {
+                const pickUpSearchOption = data.is_system_pickup ? 'google' : 'system';
+                const deliverySearchOtption = data.is_system_delivery ? 'google' : 'system';
+                this.resetPickUpDeliveryField('pickup', pickUpSearchOption);
+                this.resetPickUpDeliveryField('delivery', deliverySearchOtption);
+            }
         }
         this.routeId = data?.route_id;
         this.routeDetails = data
@@ -1444,10 +1471,13 @@ class AddRouteComponent {
                 delivery_location: data.delivery_location,
             }
             : null;
-        this.addRouteForm.valueChanges.pipe(takeUntil(this.destroyer$)).subscribe(res => {
-            if (res) {
-                if (this.preventInitialSave)
-                    this.preventInitialSave = false;
+        this.addRouteForm.valueChanges
+            .pipe(takeUntil(this.destroyer$), pairwise(), filter(([prev, curr]) => {
+            return (prev.pickUpSearchOption === curr.pickUpSearchOption) &&
+                prev.deliverySearchOtption === curr.deliverySearchOtption;
+        })).subscribe(() => {
+            if (this.preventInitialSave) {
+                this.preventInitialSave = false;
             }
         });
         this.filterCustomerList();
@@ -1559,11 +1589,11 @@ class AddRouteComponent {
         this.destroyer$.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: AddRouteComponent, deps: [{ token: i1.CoolmapService }, { token: i1.UtilsService }, { token: i1$1.MatDialog }, { token: 'memberData' }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: AddRouteComponent, selector: "app-add-route", inputs: { routeData: "routeData", customerRepoDetails: "customerRepoDetails" }, 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      <lib-route-info-card [propData]=\"{className: 'routeCard', repository: config['repository']}\" [popupData]=\"popupDetails\"></lib-route-info-card>\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            <mat-label>Customer name</mat-label>\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          <div class=\"wrap-box\">\n            @if (config.repository === 'coolmap') {\n              <lib-searchoptiongroup \n              (onUpdatePickUpSearchOption)=\"resetPickUpDelivery('pickup')\" \n              [searchConfig]=\"{form: addRouteForm, controlname: 'pickUpSearchOption'}\"/>\n            }\n            <div class=\"col-12\">\n              <mat-form-field>\n                <mat-label>Pickup</mat-label>\n                @if (isSystemPickup) {\n                  <input type=\"text\"\n                  placeholder=\"Search...\" matInput formControlName=\"pickup_location\"\n                  (mousedown)=\"$event.stopPropagation()\" [matAutocomplete]=\"autopickUpList\">\n                }\n                <input type=\"text\"\n                  [style.display]=\"isSystemPickup ? 'none' : 'block'\"\n                  placeholder=\"Search...\" matInput \n                  formControlName=\"pickup_location\"\n                  (mousedown)=\"$event.stopPropagation()\"\n                  #filterPickup>\n                <mat-autocomplete #autopickUpList=\"matAutocomplete\" class=\"list_panel\">\n                  <mat-option *ngFor=\"let name of pickupOptions | async\" \n                    [value]=\"name.formatted_address\"\n                    (onSelectionChange)=\"patchAddressValue(name, 'pickup')\">\n                    {{ name.formatted_address }}\n                  </mat-option>\n                </mat-autocomplete>\n                <mat-error\n                *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              </mat-form-field>\n            </div>\n          </div>\n        </div>\n        <div class=\"col-6\">\n          <div class=\"wrap-box\">\n            @if (config.repository === 'coolmap') {\n              <lib-searchoptiongroup \n              (onUpdatePickUpSearchOption)=\"resetPickUpDelivery('delivery')\"\n              [searchConfig]=\"{form: addRouteForm, controlname: 'deliverySearchOtption'}\"/>\n            }\n            <div class=\"col-12\">\n            <mat-form-field>\n              <mat-label>Delivery</mat-label>\n                @if (addRouteForm.get('deliverySearchOtption').value === 'system') {\n                  <input type=\"text\" placeholder=\"Search...\" matInput formControlName=\"delivery_location\"\n                  (mousedown)=\"$event.stopPropagation()\" [matAutocomplete]=\"autoDeliveryList\">\n                }\n                <input type=\"text\"\n                    [style.display]=\"addRouteForm.get('deliverySearchOtption').value === 'system' ? 'none' : 'block'\"\n                    placeholder=\"Search...\"\n                    matInput #filterDelivery\n                    formControlName=\"delivery_location\"\n                    (mousedown)=\"$event.stopPropagation()\">\n                <mat-autocomplete #autoDeliveryList=\"matAutocomplete\" class=\"list_panel\">\n                  <mat-option *ngFor=\"let name of deliveryOptions | async\" \n                    [value]=\"name.formatted_address\"\n                    (onSelectionChange)=\"patchAddressValue(name, 'delivery')\">\n                    {{ name.formatted_address }}\n                  </mat-option>\n                </mat-autocomplete>\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            </mat-form-field>\n\n            </div>\n          </div>\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        </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        <div class=\"col-6\" *ngIf=\"addRouteForm['value']['trucker_pay_estimate'] && addRouteForm['value']['customer_price_estimate']\">\n          <span *ngIf=\"config['repository'] !== 'customer'\" class=\"estimate\" (mousedown)=\"$event.stopPropagation()\">\n            Trucker Pay Estimate - <b>{{'$'+ addRouteForm['value']['trucker_pay_estimate']}}</b>\n          </span>\n          <span class=\"estimate\" (mousedown)=\"$event.stopPropagation()\">\n            Customer Price Estimate - <b>{{'$'+ addRouteForm['value']['customer_price_estimate']}}</b>\n          </span>\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% - 340px);position:absolute;left:320px;bottom:10px;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:#fff;padding:10px 20px;border-radius:20px;box-shadow:2px 4px 4px 2px #00000024;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:10px;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;height:35px}.closebtn{background:#000;color:#fff;border-radius:30px;padding:0 18px;margin-left:10px;height:35px}.delbtn{background:red;color:#fff;border-radius:30px;padding:10px 18px}.add_route_listingpart .listing_toggle{background:#fff;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;-webkit-box-flex:0;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;-webkit-box-flex:0;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:#fff;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}.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}.estimate{margin-right:20px;font-size:.7rem}@media (min-width: 1600px){.estimate{font-size:.95rem}}.wrap-box{background:#f3f3f3;padding:10px 20px;border-radius:15px;border:1px solid #dadada;margin-bottom: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$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.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: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i8$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], 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: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i7$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: EstimationDisplayComponent, selector: "app-estimation-display", inputs: ["value"] }, { kind: "component", type: RouteInfoCardComponent, selector: "lib-route-info-card", inputs: ["popupData", "propData"] }, { kind: "component", type: SearchoptiongroupComponent, selector: "lib-searchoptiongroup", inputs: ["searchConfig"], outputs: ["onUpdatePickUpSearchOption"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: AddRouteComponent, selector: "app-add-route", inputs: { routeData: "routeData", customerRepoDetails: "customerRepoDetails" }, outputs: { changeNav: "changeNav", updateRouteList: "updateRouteList" }, viewQueries: [{ propertyName: "filterPickup", first: true, predicate: ["filterPickup"], descendants: true }, { propertyName: "filterDelivery", first: true, predicate: ["filterDelivery"], descendants: true }, { propertyName: "pickup_system_location", first: true, predicate: ["pickup_system_location"], descendants: true }, { propertyName: "delivery_system_location", first: true, predicate: ["delivery_system_location"], 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      <lib-route-info-card [propData]=\"{className: 'routeCard', repository: config['repository']}\" [popupData]=\"popupDetails\"></lib-route-info-card>\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            <mat-label>Customer name</mat-label>\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          <div class=\"wrap-box\">\n            @if (config.repository === 'coolmap') {\n              <lib-searchoptiongroup\n              [searchConfig]=\"{form: addRouteForm, controlname: 'pickUpSearchOption'}\"/>\n            }\n            <div class=\"col-12\">\n              <mat-form-field [style.display]=\"isSystemPickup ? 'block' : 'none'\">\n                <mat-label>Pickup</mat-label>\n                  <input type=\"text\"\n                  placeholder=\"Search...\" matInput formControlName=\"pickup_location\"\n                  (mousedown)=\"$event.stopPropagation()\" [matAutocomplete]=\"autopickUpList\"\n                  id=\"pickup_system_location\">\n                  <mat-autocomplete #autopickUpList=\"matAutocomplete\" class=\"list_panel\">\n                    <mat-option *ngFor=\"let name of pickupOptions | async\" \n                      [value]=\"name.view_address_value\"\n                      (onSelectionChange)=\"patchAddressValue(name, 'pickup')\">\n                      {{ name.complete_address }}\n                    </mat-option>\n                  </mat-autocomplete>\n                <mat-error\n                *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              </mat-form-field>\n              <mat-form-field [style.display]=\"isSystemPickup ? 'none' : 'block'\">\n                <mat-label>Pickup</mat-label>\n                <input type=\"text\"\n                placeholder=\"Search...\" matInput \n                formControlName=\"pickup_location\"\n                (mousedown)=\"$event.stopPropagation()\"\n                #filterPickup id=\"pickup_google_location\">\n                <mat-error\n                *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              </mat-form-field>\n            </div>\n          </div>\n        </div>\n        <div class=\"col-6\">\n          <div class=\"wrap-box\">\n            @if (config.repository === 'coolmap') {\n              <lib-searchoptiongroup \n              [searchConfig]=\"{form: addRouteForm, controlname: 'deliverySearchOtption'}\"/>\n            }\n            <div class=\"col-12\">\n            <mat-form-field [style.display]=\"isSystemDelivery ? 'none' : 'block'\">\n              <mat-label>Delivery</mat-label>\n              <div>\n                <input type=\"text\"\n                placeholder=\"Search...\"\n                matInput #filterDelivery\n                formControlName=\"delivery_location\"\n                (mousedown)=\"$event.stopPropagation()\"\n                id=\"delivery_google_location\">\n              </div>\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            </mat-form-field>\n            <mat-form-field [style.display]=\"isSystemDelivery ? 'block' : 'none'\">\n              <mat-label>Delivery</mat-label>\n              <div>\n                <input type=\"text\" placeholder=\"Search...\" matInput formControlName=\"delivery_location\"\n                (mousedown)=\"$event.stopPropagation()\" [matAutocomplete]=\"autoDeliveryList\"\n                id=\"delivery_system_location\">\n                <mat-autocomplete #autoDeliveryList=\"matAutocomplete\" class=\"list_panel\">\n                  <mat-option *ngFor=\"let name of deliveryOptions | async\" \n                    [value]=\"name.formatted_address\"\n                    (onSelectionChange)=\"patchAddressValue(name, 'delivery')\">\n                    {{ name.complete_address }}\n                  </mat-option>\n                </mat-autocomplete>\n              </div>\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            </mat-form-field>\n            </div>\n          </div>\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        </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        <div class=\"col-6\" *ngIf=\"addRouteForm['value']['trucker_pay_estimate'] && addRouteForm['value']['customer_price_estimate']\">\n          <span *ngIf=\"config['repository'] !== 'customer'\" class=\"estimate\" (mousedown)=\"$event.stopPropagation()\">\n            Trucker Pay Estimate - <b>{{'$'+ addRouteForm['value']['trucker_pay_estimate']}}</b>\n          </span>\n          <span class=\"estimate\" (mousedown)=\"$event.stopPropagation()\">\n            Customer Price Estimate - <b>{{'$'+ addRouteForm['value']['customer_price_estimate']}}</b>\n          </span>\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% - 340px);position:absolute;left:320px;bottom:10px;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:#fff;padding:10px 20px;border-radius:20px;box-shadow:2px 4px 4px 2px #00000024;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:10px;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;height:35px}.closebtn{background:#000;color:#fff;border-radius:30px;padding:0 18px;margin-left:10px;height:35px}.delbtn{background:red;color:#fff;border-radius:30px;padding:10px 18px}.add_route_listingpart .listing_toggle{background:#fff;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;-webkit-box-flex:0;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;-webkit-box-flex:0;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:#fff;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}.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}.estimate{margin-right:20px;font-size:.7rem}@media (min-width: 1600px){.estimate{font-size:.95rem}}.wrap-box{background:#f3f3f3;padding:10px 20px;border-radius:15px;border:1px solid #dadada;margin-bottom: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$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.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: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i8$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], 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: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i7$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: EstimationDisplayComponent, selector: "app-estimation-display", inputs: ["value"] }, { kind: "component", type: RouteInfoCardComponent, selector: "lib-route-info-card", inputs: ["popupData", "propData"] }, { kind: "component", type: SearchoptiongroupComponent, selector: "lib-searchoptiongroup", inputs: ["searchConfig"], outputs: ["onUpdatePickUpSearchOption"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", 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      <lib-route-info-card [propData]=\"{className: 'routeCard', repository: config['repository']}\" [popupData]=\"popupDetails\"></lib-route-info-card>\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            <mat-label>Customer name</mat-label>\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          <div class=\"wrap-box\">\n            @if (config.repository === 'coolmap') {\n              <lib-searchoptiongroup \n              (onUpdatePickUpSearchOption)=\"resetPickUpDelivery('pickup')\" \n              [searchConfig]=\"{form: addRouteForm, controlname: 'pickUpSearchOption'}\"/>\n            }\n            <div class=\"col-12\">\n              <mat-form-field>\n                <mat-label>Pickup</mat-label>\n                @if (isSystemPickup) {\n                  <input type=\"text\"\n                  placeholder=\"Search...\" matInput formControlName=\"pickup_location\"\n                  (mousedown)=\"$event.stopPropagation()\" [matAutocomplete]=\"autopickUpList\">\n                }\n                <input type=\"text\"\n                  [style.display]=\"isSystemPickup ? 'none' : 'block'\"\n                  placeholder=\"Search...\" matInput \n                  formControlName=\"pickup_location\"\n                  (mousedown)=\"$event.stopPropagation()\"\n                  #filterPickup>\n                <mat-autocomplete #autopickUpList=\"matAutocomplete\" class=\"list_panel\">\n                  <mat-option *ngFor=\"let name of pickupOptions | async\" \n                    [value]=\"name.formatted_address\"\n                    (onSelectionChange)=\"patchAddressValue(name, 'pickup')\">\n                    {{ name.formatted_address }}\n                  </mat-option>\n                </mat-autocomplete>\n                <mat-error\n                *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              </mat-form-field>\n            </div>\n          </div>\n        </div>\n        <div class=\"col-6\">\n          <div class=\"wrap-box\">\n            @if (config.repository === 'coolmap') {\n              <lib-searchoptiongroup \n              (onUpdatePickUpSearchOption)=\"resetPickUpDelivery('delivery')\"\n              [searchConfig]=\"{form: addRouteForm, controlname: 'deliverySearchOtption'}\"/>\n            }\n            <div class=\"col-12\">\n            <mat-form-field>\n              <mat-label>Delivery</mat-label>\n                @if (addRouteForm.get('deliverySearchOtption').value === 'system') {\n                  <input type=\"text\" placeholder=\"Search...\" matInput formControlName=\"delivery_location\"\n                  (mousedown)=\"$event.stopPropagation()\" [matAutocomplete]=\"autoDeliveryList\">\n                }\n                <input type=\"text\"\n                    [style.display]=\"addRouteForm.get('deliverySearchOtption').value === 'system' ? 'none' : 'block'\"\n                    placeholder=\"Search...\"\n                    matInput #filterDelivery\n                    formControlName=\"delivery_location\"\n                    (mousedown)=\"$event.stopPropagation()\">\n                <mat-autocomplete #autoDeliveryList=\"matAutocomplete\" class=\"list_panel\">\n                  <mat-option *ngFor=\"let name of deliveryOptions | async\" \n                    [value]=\"name.formatted_address\"\n                    (onSelectionChange)=\"patchAddressValue(name, 'delivery')\">\n                    {{ name.formatted_address }}\n                  </mat-option>\n                </mat-autocomplete>\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            </mat-form-field>\n\n            </div>\n          </div>\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        </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        <div class=\"col-6\" *ngIf=\"addRouteForm['value']['trucker_pay_estimate'] && addRouteForm['value']['customer_price_estimate']\">\n          <span *ngIf=\"config['repository'] !== 'customer'\" class=\"estimate\" (mousedown)=\"$event.stopPropagation()\">\n            Trucker Pay Estimate - <b>{{'$'+ addRouteForm['value']['trucker_pay_estimate']}}</b>\n          </span>\n          <span class=\"estimate\" (mousedown)=\"$event.stopPropagation()\">\n            Customer Price Estimate - <b>{{'$'+ addRouteForm['value']['customer_price_estimate']}}</b>\n          </span>\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% - 340px);position:absolute;left:320px;bottom:10px;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:#fff;padding:10px 20px;border-radius:20px;box-shadow:2px 4px 4px 2px #00000024;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:10px;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;height:35px}.closebtn{background:#000;color:#fff;border-radius:30px;padding:0 18px;margin-left:10px;height:35px}.delbtn{background:red;color:#fff;border-radius:30px;padding:10px 18px}.add_route_listingpart .listing_toggle{background:#fff;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;-webkit-box-flex:0;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;-webkit-box-flex:0;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:#fff;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}.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}.estimate{margin-right:20px;font-size:.7rem}@media (min-width: 1600px){.estimate{font-size:.95rem}}.wrap-box{background:#f3f3f3;padding:10px 20px;border-radius:15px;border:1px solid #dadada;margin-bottom:20px}\n"] }]
+            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      <lib-route-info-card [propData]=\"{className: 'routeCard', repository: config['repository']}\" [popupData]=\"popupDetails\"></lib-route-info-card>\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            <mat-label>Customer name</mat-label>\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          <div class=\"wrap-box\">\n            @if (config.repository === 'coolmap') {\n              <lib-searchoptiongroup\n              [searchConfig]=\"{form: addRouteForm, controlname: 'pickUpSearchOption'}\"/>\n            }\n            <div class=\"col-12\">\n              <mat-form-field [style.display]=\"isSystemPickup ? 'block' : 'none'\">\n                <mat-label>Pickup</mat-label>\n                  <input type=\"text\"\n                  placeholder=\"Search...\" matInput formControlName=\"pickup_location\"\n                  (mousedown)=\"$event.stopPropagation()\" [matAutocomplete]=\"autopickUpList\"\n                  id=\"pickup_system_location\">\n                  <mat-autocomplete #autopickUpList=\"matAutocomplete\" class=\"list_panel\">\n                    <mat-option *ngFor=\"let name of pickupOptions | async\" \n                      [value]=\"name.view_address_value\"\n                      (onSelectionChange)=\"patchAddressValue(name, 'pickup')\">\n                      {{ name.complete_address }}\n                    </mat-option>\n                  </mat-autocomplete>\n                <mat-error\n                *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              </mat-form-field>\n              <mat-form-field [style.display]=\"isSystemPickup ? 'none' : 'block'\">\n                <mat-label>Pickup</mat-label>\n                <input type=\"text\"\n                placeholder=\"Search...\" matInput \n                formControlName=\"pickup_location\"\n                (mousedown)=\"$event.stopPropagation()\"\n                #filterPickup id=\"pickup_google_location\">\n                <mat-error\n                *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              </mat-form-field>\n            </div>\n          </div>\n        </div>\n        <div class=\"col-6\">\n          <div class=\"wrap-box\">\n            @if (config.repository === 'coolmap') {\n              <lib-searchoptiongroup \n              [searchConfig]=\"{form: addRouteForm, controlname: 'deliverySearchOtption'}\"/>\n            }\n            <div class=\"col-12\">\n            <mat-form-field [style.display]=\"isSystemDelivery ? 'none' : 'block'\">\n              <mat-label>Delivery</mat-label>\n              <div>\n                <input type=\"text\"\n                placeholder=\"Search...\"\n                matInput #filterDelivery\n                formControlName=\"delivery_location\"\n                (mousedown)=\"$event.stopPropagation()\"\n                id=\"delivery_google_location\">\n              </div>\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            </mat-form-field>\n            <mat-form-field [style.display]=\"isSystemDelivery ? 'block' : 'none'\">\n              <mat-label>Delivery</mat-label>\n              <div>\n                <input type=\"text\" placeholder=\"Search...\" matInput formControlName=\"delivery_location\"\n                (mousedown)=\"$event.stopPropagation()\" [matAutocomplete]=\"autoDeliveryList\"\n                id=\"delivery_system_location\">\n                <mat-autocomplete #autoDeliveryList=\"matAutocomplete\" class=\"list_panel\">\n                  <mat-option *ngFor=\"let name of deliveryOptions | async\" \n                    [value]=\"name.formatted_address\"\n                    (onSelectionChange)=\"patchAddressValue(name, 'delivery')\">\n                    {{ name.complete_address }}\n                  </mat-option>\n                </mat-autocomplete>\n              </div>\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            </mat-form-field>\n            </div>\n          </div>\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        </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        <div class=\"col-6\" *ngIf=\"addRouteForm['value']['trucker_pay_estimate'] && addRouteForm['value']['customer_price_estimate']\">\n          <span *ngIf=\"config['repository'] !== 'customer'\" class=\"estimate\" (mousedown)=\"$event.stopPropagation()\">\n            Trucker Pay Estimate - <b>{{'$'+ addRouteForm['value']['trucker_pay_estimate']}}</b>\n          </span>\n          <span class=\"estimate\" (mousedown)=\"$event.stopPropagation()\">\n            Customer Price Estimate - <b>{{'$'+ addRouteForm['value']['customer_price_estimate']}}</b>\n          </span>\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% - 340px);position:absolute;left:320px;bottom:10px;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:#fff;padding:10px 20px;border-radius:20px;box-shadow:2px 4px 4px 2px #00000024;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:10px;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;height:35px}.closebtn{background:#000;color:#fff;border-radius:30px;padding:0 18px;margin-left:10px;height:35px}.delbtn{background:red;color:#fff;border-radius:30px;padding:10px 18px}.add_route_listingpart .listing_toggle{background:#fff;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;-webkit-box-flex:0;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;-webkit-box-flex:0;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:#fff;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}.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}.estimate{margin-right:20px;font-size:.7rem}@media (min-width: 1600px){.estimate{font-size:.95rem}}.wrap-box{background:#f3f3f3;padding:10px 20px;border-radius:15px;border:1px solid #dadada;margin-bottom:20px}\n"] }]
         }], ctorParameters: () => [{ type: i1.CoolmapService }, { type: i1.UtilsService }, { type: i1$1.MatDialog }, { type: i1.CoolmapConfigModel, decorators: [{
                     type: Inject,
                     args: ['memberData']
@@ -1573,6 +1603,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
             }], filterDelivery: [{
                 type: ViewChild,
                 args: ['filterDelivery']
+            }], pickup_system_location: [{
+                type: ViewChild,
+                args: ['pickup_system_location']
+            }], delivery_system_location: [{
+                type: ViewChild,
+                args: ['delivery_system_location']
             }], changeNav: [{
                 type: Output
             }], updateRouteList: [{