@aggdirect/coolmap 2.1.0 → 2.3.0

package/fesm2020/aggdirect-coolmap.mjs

@@ -809,10 +809,10 @@ class JobcodeStatusComponent {
     constructor() { }
 }
 JobcodeStatusComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JobcodeStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-JobcodeStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: JobcodeStatusComponent, selector: "app-jobcode-status", inputs: { jobValue: "jobValue" }, ngImport: i0, template: "<div class=\"statusprt\">\n  <span class=\"done\"> Done - {{jobValue['values']['Done']}} </span>\n  <span class=\"ongoing\"> Ongoing - {{jobValue['values']['Ongoing']}} </span>\n  <span class=\"open\"> Open - {{jobValue['values']['Open']}} </span>\n</div>\n", styles: [".statusprt span{padding:10px;font-size:.9rem}.statusprt span.done{border:2px solid #0b843c;color:#0b843c}.statusprt span.done:hover{background:#0b843c;color:#fff}.statusprt span.ongoing{border:2px solid #eecb27;color:#eecb27}.statusprt span.ongoing:hover{background:#eecb27;color:#fff}.statusprt span.open{border:2px solid #12afcb;color:#12afcb}.statusprt span.open:hover{background:#12afcb;color:#fff}\n"] });
+JobcodeStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: JobcodeStatusComponent, selector: "app-jobcode-status", inputs: { jobValue: "jobValue" }, ngImport: i0, template: "<div class=\"statusprt\">\n  <span class=\"done\"> Done - {{jobValue['values']['Done']}} </span>\n  <span class=\"ongoing\"> Ongoing - {{jobValue['values']['Ongoing']}} </span>\n  <span class=\"open\"> Open - {{jobValue['values']['Open']}} </span>\n</div>\n", styles: [".statusprt span{padding:5px 10px;font-size:.9rem;margin-left:0;margin-right:5px}.statusprt span.done{border:2px solid #0b843c;color:#0b843c}.statusprt span.done:hover{background:#0b843c;color:#fff}.statusprt span.ongoing{border:2px solid #eecb27;color:#eecb27}.statusprt span.ongoing:hover{background:#eecb27;color:#fff}.statusprt span.open{border:2px solid #12afcb;color:#12afcb}.statusprt span.open:hover{background:#12afcb;color:#fff}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JobcodeStatusComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-jobcode-status', template: "<div class=\"statusprt\">\n  <span class=\"done\"> Done - {{jobValue['values']['Done']}} </span>\n  <span class=\"ongoing\"> Ongoing - {{jobValue['values']['Ongoing']}} </span>\n  <span class=\"open\"> Open - {{jobValue['values']['Open']}} </span>\n</div>\n", styles: [".statusprt span{padding:10px;font-size:.9rem}.statusprt span.done{border:2px solid #0b843c;color:#0b843c}.statusprt span.done:hover{background:#0b843c;color:#fff}.statusprt span.ongoing{border:2px solid #eecb27;color:#eecb27}.statusprt span.ongoing:hover{background:#eecb27;color:#fff}.statusprt span.open{border:2px solid #12afcb;color:#12afcb}.statusprt span.open:hover{background:#12afcb;color:#fff}\n"] }]
+            args: [{ selector: 'app-jobcode-status', template: "<div class=\"statusprt\">\n  <span class=\"done\"> Done - {{jobValue['values']['Done']}} </span>\n  <span class=\"ongoing\"> Ongoing - {{jobValue['values']['Ongoing']}} </span>\n  <span class=\"open\"> Open - {{jobValue['values']['Open']}} </span>\n</div>\n", styles: [".statusprt span{padding:5px 10px;font-size:.9rem;margin-left:0;margin-right:5px}.statusprt span.done{border:2px solid #0b843c;color:#0b843c}.statusprt span.done:hover{background:#0b843c;color:#fff}.statusprt span.ongoing{border:2px solid #eecb27;color:#eecb27}.statusprt span.ongoing:hover{background:#eecb27;color:#fff}.statusprt span.open{border:2px solid #12afcb;color:#12afcb}.statusprt span.open:hover{background:#12afcb;color:#fff}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { jobValue: [{
                 type: Input
             }] } });
@@ -822,12 +822,17 @@ class JobcodeOverviewComponent {
         this.label = JobCodeOverviewData;
         this.overViewEnum = JobCodeOverviewEnum;
     }
+    makeValueObject(item) {
+        let obj;
+        obj = { label: this.overViewEnum[item], value: this.jobValue[item] };
+        return obj;
+    }
 }
 JobcodeOverviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JobcodeOverviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-JobcodeOverviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: JobcodeOverviewComponent, selector: "app-jobcode-overview", inputs: { jobValue: "jobValue" }, ngImport: i0, template: "<div class=\"detail_view m-40\">\n  <ng-container *ngFor=\"let item of label\">\n    <span [class.pickprt]=\"item === 'pickup_location'\" [class.dropprt]=\"item === 'delivery_location'\">\n      <label>{{overViewEnum[item]}}</label>\n      <b> {{jobValue[item] ? jobValue[item] : 'N/A'}} </b>\n    </span>\n  </ng-container>\n</div>\n", styles: [".detail_view{display:flex;flex-direction:row;justify-content:space-between}.detail_view span{display:flex;flex-direction:column;font-size:.8125rem;width:15%;margin:0 7px 0 0}.detail_view span.pickprt,.detail_view span.dropprt{width:20%}.detail_view span label{font-size:.8125rem;font-weight:400;color:#767676;padding-bottom:8px}.detail_view span b{font-weight:500}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+JobcodeOverviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: JobcodeOverviewComponent, selector: "app-jobcode-overview", inputs: { jobValue: "jobValue" }, ngImport: i0, template: "<div class=\"detail_view m-20\">\n    <div class=\"destination\">\n       <div class=\"duration\">\n         <p class=\"pickprt\"><b>{{makeValueObject('pickup_location')['label']}}:</b> {{makeValueObject('pickup_location')['value']}}</p>\n         <p class=\"dropprt\"><b>{{makeValueObject('delivery_location')['label']}}:</b> {{makeValueObject('delivery_location')['value']}}</p>\n       </div>\n       <ng-container *ngFor=\"let item of label\">\n        <span *ngIf=\"item !== 'pickup_location' && item !== 'delivery_location'\" (mousedown)=\"$event.stopPropagation()\"><b>{{makeValueObject(item)['label']}}:</b> {{makeValueObject(item)['value']}}</span>\n       </ng-container>\n     </div>\n\n", styles: [".detail_view .destination .duration{padding:10px}.detail_view .destination span{padding:5px 0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JobcodeOverviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-jobcode-overview', template: "<div class=\"detail_view m-40\">\n  <ng-container *ngFor=\"let item of label\">\n    <span [class.pickprt]=\"item === 'pickup_location'\" [class.dropprt]=\"item === 'delivery_location'\">\n      <label>{{overViewEnum[item]}}</label>\n      <b> {{jobValue[item] ? jobValue[item] : 'N/A'}} </b>\n    </span>\n  </ng-container>\n</div>\n", styles: [".detail_view{display:flex;flex-direction:row;justify-content:space-between}.detail_view span{display:flex;flex-direction:column;font-size:.8125rem;width:15%;margin:0 7px 0 0}.detail_view span.pickprt,.detail_view span.dropprt{width:20%}.detail_view span label{font-size:.8125rem;font-weight:400;color:#767676;padding-bottom:8px}.detail_view span b{font-weight:500}\n"] }]
+            args: [{ selector: 'app-jobcode-overview', template: "<div class=\"detail_view m-20\">\n    <div class=\"destination\">\n       <div class=\"duration\">\n         <p class=\"pickprt\"><b>{{makeValueObject('pickup_location')['label']}}:</b> {{makeValueObject('pickup_location')['value']}}</p>\n         <p class=\"dropprt\"><b>{{makeValueObject('delivery_location')['label']}}:</b> {{makeValueObject('delivery_location')['value']}}</p>\n       </div>\n       <ng-container *ngFor=\"let item of label\">\n        <span *ngIf=\"item !== 'pickup_location' && item !== 'delivery_location'\" (mousedown)=\"$event.stopPropagation()\"><b>{{makeValueObject(item)['label']}}:</b> {{makeValueObject(item)['value']}}</span>\n       </ng-container>\n     </div>\n\n", styles: [".detail_view .destination .duration{padding:10px}.detail_view .destination span{padding:5px 0}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { jobValue: [{
                 type: Input
             }] } });
@@ -979,10 +984,10 @@ class JobCodeComponent {
     }
 }
 JobCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JobCodeComponent, deps: [{ token: i1.UtilsService }, { token: i1.CoolmapService }, { token: 'memberData' }], target: i0.ɵɵFactoryTarget.Component });
-JobCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: JobCodeComponent, selector: "app-job-code", inputs: { jobdetail: "jobdetail", customerRepoDetails: "customerRepoDetails" }, outputs: { clearJobDetails: "clearJobDetails" }, ngImport: i0, template: "<div class=\"jobcode_detailprt\" (click)=\"isOverlapRouteSection = false\"  *ngIf=\"jobdetail\" [ngClass]=\"{'overlap': !isOverlapRouteSection}\" cdkDrag>\n  <div class=\"topheadingprt\" *ngIf=\"jobdetail['order_number']\">\n    <h2>{{jobdetail['order_number']}}</h2>\n  </div>\n  <span class=\"close\"><mat-icon (click)=\"clearJob()\">clear</mat-icon></span>\n  <div class=\"job_details_area\">\n    <div class=\"detailnameprt\">\n      <span> <b> {{jobdetail.customer_name}} </b> Customer </span>\n      <app-jobcode-status [jobValue]=\"jobdetail\"></app-jobcode-status>\n    </div>\n    <app-jobcode-overview [jobValue]=\"jobdetail\"></app-jobcode-overview>\n  </div>\n</div>\n\n<div class=\"route_listprt\" (click)=\"isOverlapRouteSection = true\" [ngClass]=\"{ 'show': isVisible, 'overlap': isOverlapRouteSection}\">\n  <div class=\"listing_toggle\" (click)=\"toggleSidemenu()\">\n    <img src=\"assets/images/route.svg\" alt=\"\" />\n  </div>\n\n  <div class=\"listing_box\">\n    <div class=\"closebtn\" (click)=\"toggleSidemenu()\">\n      <mat-icon>clear</mat-icon>\n    </div>\n\n    <div class=\"btnprt\">\n      <h2> List of Routes </h2>\n      <button (click)=\"masterToggle()\">{{routes && routes.length > 0 && routes.length === selectedRoute.selected.length ? 'Uncheck' : 'Check'}} All</button>\n    </div>\n\n    <app-job-route-list [routes]=\"routes\" [masterRoutes]=\"masterRoutes\" [selectedRoute]=\"selectedRoute\" (changeRoutes)=\"routes = $event\" (changeSelectedRoute)=\"selectedRoute = $event\"></app-job-route-list>\n\n    <perfect-scrollbar>\n      <ul *ngIf=\"routes['length'] > 0\">\n        <li *ngFor=\"let list of routes\">\n          <div class=\"iconprt\">\n            <span>\n              <input type=\"checkbox\" [checked]=\"selectedRoute.isSelected(list)\"\n                (change)=\"$event ? selectRoute(list) : null\" /><label>&nbsp;</label>\n              <div class=\"border\"></div>\n            </span>\n            <div class=\"statusunit\" [ngClass]=\"list['unit']\">{{list['unit']}}</div>\n            <div class=\"infoicon\">\n              <img (mouseenter)=\"togglerouteDetails(true, list)\" (mouseout)=\"togglerouteDetails(false, list, true)\"\n              (click)=\"togglerouteDetails('click', list)\" src=\"assets/images/info_icon.png\" [alt]=\"\" />\n            </div>\n          </div>\n          <div class=\"pickprtbox\">\n            <h2> {{list['route_name']}} </h2>\n            <h3>{{list['customer_name']}} | {{list['material']}}</h3>\n            <div class=\"pickdropprt\">\n              <div class=\"pickprt\">\n                <b>\n                  <h4>{{list['pickup_location']}}</h4>\n                </b>\n              </div>\n              <div class=\"dropprt\">\n                <b>\n                  <h4>{{list['delivery_location']}}</h4>\n                </b>\n              </div>\n            </div>\n          </div>\n        </li>\n      </ul>\n      <p style=\"color: #fff;\" *ngIf=\"routes.length === 0\">No Route found</p>\n    </perfect-scrollbar>\n  </div>\n\n  <div class=\"route_detail\" *ngIf=\"detailsCardEnable\">\n    <div class=\"closebtnroutedetail\" (click)=\"detailsCardEnable = false; preventMouseout = false\">\n      <mat-icon>clear</mat-icon>\n    </div>\n    <div class=\"destination\">\n      <div class=\"duration\">\n        <p class=\"pickprt\"><b>Pickup:</b> {{routeCardDetail?.pickup_location}}</p>\n        <p class=\"dropprt\"><b>Delivery:</b> {{routeCardDetail?.delivery_location}} </p>\n      </div>\n      <span><b>Name:</b> {{routeCardDetail?.route_name}}</span>\n      <span><b>Customer:</b> {{routeCardDetail?.customer_name}}</span>\n      <span><b>Material:</b> {{routeCardDetail?.material}}</span>\n      <span><b>Type:</b> {{routeCardDetail?.unit}}</span>\n      <span><b>Distance:</b> {{routeCardDetail?.estimated_distance}}</span>\n      <span><b>Travel Time:</b> {{routeCardDetail?.estimated_time}}</span>\n      <span class=\"notes\"><b>Notes:</b> {{routeCardDetail?.note}}</span>\n    </div>\n\n    <div class=\"createTxt\">\n      <small>\n        Created by {{routeCardDetail?.created_by_name}} on {{routeCardDetail?.created_at}}\n      </small>\n    </div>\n  </div>\n</div>\n", styles: [".jobcode_detailprt{position:absolute;left:300px;bottom:10px;background:white;padding:10px 20px;border-radius:20px;width:calc(100% - 315px);z-index:999;box-shadow:0 0 5px #0000001a;height:250px;cursor:move}@media (min-width: 1600px){.jobcode_detailprt{left:307px;width:calc(100% - 325px)}}.jobcode_detailprt .topheadingprt .driver_list ul{display:flex;width:450px;justify-content:flex-end}.jobcode_detailprt .topheadingprt .driver_list ul li{position:relative;margin:0 -6px 2px 0;cursor:pointer}.jobcode_detailprt .topheadingprt .driver_list ul li img{width:30px;height:30px;border-radius:100%;border:1px solid #fff}.jobcode_detailprt .topheadingprt .driver_list ul li:hover .driver_detail{display:flex}.jobcode_detailprt .topheadingprt .driver_list ul li .driver_detail{position:absolute;top:-70px;left:-50px;display:none;will-change:transform;pointer-events:none;border-radius:10px;box-shadow:0 4px 4px #00000024;width:133px;background:white;text-align:center;padding:10px;flex-direction:column;font-size:.8125rem}.jobcode_detailprt .topheadingprt .driver_list ul li .driver_detail b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:135px}.jobcode_detailprt .topheadingprt .driver_list ul li .driver_detail span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:117px;display:block}.jobcode_detailprt .topheadingprt .driver_list ul li .driver_detail:after{width:0;height:0;border-top:15px solid white;border-left:10px solid transparent;border-right:10px solid transparent;z-index:1;content:\"\";position:absolute;filter:drop-shadow(0px 3px 1px rgba(0,0,0,.2));bottom:-14px;left:50%;transform:translate(-50%)}.jobcode_detailprt .topheadingprt .driver_list ul li.extraicon{background:white;width:30px;height:30px;border-radius:100%;display:flex;justify-content:center;align-items:center;margin:0 0 0 10px;border:1px solid #eee}.jobcode_detailprt .close{position:absolute;top:10px;right:20px;background:#e8e8e8;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer}@keyframes autoslide{to{transform:translate(calc(90vw - 100%))}0%{transform:translate(0)}}.jobcode_detailprt .job_details_area{padding:15px 0}.jobcode_detailprt .job_details_area .detailnameprt{display:flex;justify-content:space-between}.jobcode_detailprt .job_details_area .detailnameprt span{display:flex;flex-direction:column;font-size:.875rem;color:#767676}.jobcode_detailprt .job_details_area .detailnameprt span b{font-size:.9375rem;font-weight:500;color:#000}.route_listprt .listing_toggle{background:white;border-radius:15px;padding:5px;position:absolute;right:10px;top:20px;cursor:pointer}.route_listprt .listing_toggle img{width:28px}.route_listprt .listing_box{background:#282828;height:100vh;position:fixed;right:0;top:0;z-index:1111;box-shadow:-3px 0 5px #ffffff14;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;width:0;border-radius:40px 0 0;opacity:0}.route_listprt .listing_box .closebtn{display:none}.route_listprt .listing_box ul{padding:0 20px 0 0}.route_listprt .listing_box ul li{background:#4a4a4a;padding:10px 15px;border-radius:15px;display:flex;margin-bottom:10px;position:relative;height:inherit}@media (min-width: 1600px){.route_listprt .listing_box ul li{padding:6px 15px;margin-bottom:5px}}.route_listprt .listing_box ul li .iconprt{display:flex;flex-direction:column}.route_listprt .listing_box ul li .iconprt span{display:flex;align-items:center;margin-bottom:32px}.route_listprt .listing_box ul li .iconprt span input[type=checkbox]{width:100%;height:100%;margin-right:10px;opacity:0;position:absolute;left:0;margin-left:0;top:0;z-index:3;cursor:pointer}.route_listprt .listing_box ul li .iconprt span input[type=checkbox]:checked+label{background:url(../../../assets/images/fill-check.png) 16px 15px no-repeat}.route_listprt .listing_box ul li .iconprt span label{background:url(../../../assets/images/blank-check.png) 16px 15px no-repeat;width:100%;position:relative;z-index:2;font-size:12px;color:#878787;height:100%;position:absolute;top:0;left:0}.route_listprt .listing_box ul li .iconprt span .border{position:absolute;width:100%;height:100%;left:0;right:0;top:0;border-radius:15px}.route_listprt .listing_box ul li .iconprt span input:checked~.border{border-left:1px solid white;border-right:1px solid white;border-top:1px solid white;border-bottom:1px solid white}.route_listprt .listing_box ul li .iconprt span h2{margin-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;padding-left:16px;font-size:.9rem;margin-bottom:0;font-weight:400;margin-top:0}.route_listprt .listing_box ul li .iconprt .statusunit{border-radius:30px;font-size:0;color:#fff;text-transform:capitalize;font-weight:500;width:20px;height:20px;text-align:center;line-height:20px;margin-bottom:7px}.route_listprt .listing_box ul li .iconprt .statusunit:first-letter{font-size:.8rem}.route_listprt .listing_box ul li .iconprt .statusunit.Ton{background:#ff7272}.route_listprt .listing_box ul li .iconprt .statusunit.Load{background:#a3c52e}.route_listprt .listing_box ul li .iconprt .statusunit.Hourly{background:#ae23d1}@media (min-width: 1600px){.route_listprt .listing_box ul li .iconprt .statusunit{line-height:21px}}.route_listprt .listing_box ul li .iconprt .infoicon{z-index:5;cursor:pointer}.route_listprt .listing_box ul li .iconprt .infoicon img{width:20px;height:20px}.route_listprt .listing_box ul li .pickprtbox{margin-left:10px}.route_listprt .listing_box ul li .pickprtbox h2{font-size:.9rem;margin:3px 0 5px;white-space:nowrap;text-overflow:ellipsis;max-width:195px;overflow:hidden}.route_listprt .listing_box ul li h3{font-size:.8rem;color:#979797;font-weight:600;margin-top:0;white-space:nowrap;text-overflow:ellipsis;max-width:195px;overflow:hidden;margin-bottom:5px}.route_listprt .listing_box ul li .pickdropprt{font-size:.75rem}.route_listprt .listing_box ul li .pickdropprt .pickprt{position:relative;display:flex;align-items:center;padding-bottom:10px}.route_listprt .listing_box ul li .pickdropprt .pickprt span{padding-left:0;padding-right:20px;display:block}.route_listprt .listing_box ul li .pickdropprt .pickprt b{position:relative}.route_listprt .listing_box ul li .pickdropprt .pickprt b:after{background:#bcbcbc;width:1px;height:100%;left:3px;content:\"\";position:absolute;top:10px}.route_listprt .listing_box ul li .pickdropprt .pickprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;color:#bcbcbc;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.route_listprt .listing_box ul li .pickdropprt .pickprt h4:before{background:#bcbcbc;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.route_listprt .listing_box ul li .pickdropprt .dropprt{position:relative;padding-bottom:10px;display:flex;align-items:center}.route_listprt .listing_box ul li .pickdropprt .dropprt span{padding-left:0;padding-right:20px;display:block}.route_listprt .listing_box ul li .pickdropprt .dropprt b{position:relative}.route_listprt .listing_box ul li .pickdropprt .dropprt b:after{background:#bcbcbc;width:1px;height:12px;left:3px;content:\"\";position:absolute;top:-7px}.route_listprt .listing_box ul li .pickdropprt .dropprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;color:#bcbcbc;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.route_listprt .listing_box ul li .pickdropprt .dropprt h4:before{background:#bcbcbc;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.route_listprt.show .listing_box{width:300px;max-width:300px;flex:0 0 350px;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;padding:40px 0 40px 20px;opacity:1}.route_listprt.show .listing_box h2{color:#fff;white-space:nowrap}.route_listprt.show .listing_box .closebtn{position:absolute;left:-33px;top:50px;background:#282828;color:#fff;padding:8px;border-top-left-radius:15px;border-bottom-left-radius:15px;cursor:pointer;box-shadow:-4px 2px 5px #ffffff14;display:block}.overlap{z-index:9999}.btnprt{display:flex;justify-content:space-between;align-items:center;padding-right:20px}.btnprt h2{margin:0}.btnprt button{font-size:15px;padding:8px 20px;background-color:#326ad3;color:#fff;border:none;border-radius:10px;box-shadow:none;outline:none}.hidden{display:none}.route_detail{background:#282828;position:absolute;width:260px;top:50%;transform:translateY(-50%);right:310px;border-radius:20px;padding:10px;box-shadow:0 0 5px #ffffff36}.route_detail .destination .duration{background:#444343;border:1px solid #918e8e;padding:10px;color:#fff}.route_detail .destination .duration b{color:#fff}.route_detail .destination .pickprt:before,.route_detail .destination .dropprt:before{background:#fff}.route_detail .destination .pickprt b:before,.route_detail .destination .dropprt b:before{background:#fff}.route_detail .destination span{line-height:20px;color:#fff;padding:3px 0}.route_detail .destination span b{color:#fff}.route_detail .destination span.notes{max-height:200px;overflow:auto}.createTxt small{color:#fff;font-size:.7rem}.closebtnroutedetail{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#f5f5f5;position:absolute;top:-7px;left:-11px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.PerfectScrollbarComponent, selector: "perfect-scrollbar", inputs: ["disabled", "usePSClass", "autoPropagation", "scrollIndicators", "config"], outputs: ["psScrollY", "psScrollX", "psScrollUp", "psScrollDown", "psScrollLeft", "psScrollRight", "psYReachEnd", "psYReachStart", "psXReachEnd", "psXReachStart"], exportAs: ["ngxPerfectScrollbar"] }, { kind: "component", type: JobRouteListComponent, selector: "app-job-route-list", inputs: ["routes", "selectedRoute", "masterRoutes"], outputs: ["changeNav", "changeRoutes", "changeSelectedRoute"] }, { kind: "component", type: JobcodeStatusComponent, selector: "app-jobcode-status", inputs: ["jobValue"] }, { kind: "component", type: JobcodeOverviewComponent, selector: "app-jobcode-overview", inputs: ["jobValue"] }] });
+JobCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: JobCodeComponent, selector: "app-job-code", inputs: { jobdetail: "jobdetail", customerRepoDetails: "customerRepoDetails" }, outputs: { clearJobDetails: "clearJobDetails" }, ngImport: i0, template: "<div class=\"jobcode_detailprt\" (click)=\"isOverlapRouteSection = false\"  *ngIf=\"jobdetail\" [ngClass]=\"{'overlap': !isOverlapRouteSection}\" cdkDrag>\n  <span class=\"close\"><mat-icon (click)=\"clearJob()\">clear</mat-icon></span>\n  <div class=\"job_details_area\">\n    <div class=\"detailnameprt\">\n      <app-jobcode-status [jobValue]=\"jobdetail\"></app-jobcode-status>\n    </div>\n    <app-jobcode-overview [jobValue]=\"jobdetail\"></app-jobcode-overview>\n  </div>\n</div>\n\n<div class=\"route_listprt\" (click)=\"isOverlapRouteSection = true\" [ngClass]=\"{ 'show': isVisible, 'overlap': isOverlapRouteSection}\">\n  <div class=\"listing_toggle\" (click)=\"toggleSidemenu()\">\n    <img src=\"assets/images/route.svg\" alt=\"\" />\n  </div>\n\n  <div class=\"listing_box\">\n    <div class=\"closebtn\" (click)=\"toggleSidemenu()\">\n      <mat-icon>clear</mat-icon>\n    </div>\n\n    <div class=\"btnprt\">\n      <h2> List of Routes </h2>\n      <button (click)=\"masterToggle()\">{{routes && routes.length > 0 && routes.length === selectedRoute.selected.length ? 'Uncheck' : 'Check'}} All</button>\n    </div>\n\n    <app-job-route-list [routes]=\"routes\" [masterRoutes]=\"masterRoutes\" [selectedRoute]=\"selectedRoute\" (changeRoutes)=\"routes = $event\" (changeSelectedRoute)=\"selectedRoute = $event\"></app-job-route-list>\n\n    <perfect-scrollbar>\n      <ul *ngIf=\"routes['length'] > 0\">\n        <li *ngFor=\"let list of routes\">\n          <div class=\"iconprt\">\n            <span>\n              <input type=\"checkbox\" [checked]=\"selectedRoute.isSelected(list)\"\n                (change)=\"$event ? selectRoute(list) : null\" /><label>&nbsp;</label>\n              <div class=\"border\"></div>\n            </span>\n            <div class=\"statusunit\" [ngClass]=\"list['unit']\">{{list['unit']}}</div>\n            <div class=\"infoicon\">\n              <img (mouseenter)=\"togglerouteDetails(true, list)\" (mouseout)=\"togglerouteDetails(false, list, true)\"\n              (click)=\"togglerouteDetails('click', list)\" src=\"assets/images/info_icon.png\" [alt]=\"\" />\n            </div>\n          </div>\n          <div class=\"pickprtbox\">\n            <h2> {{list['route_name']}} </h2>\n            <h3>{{list['customer_name']}} | {{list['material']}}</h3>\n            <div class=\"pickdropprt\">\n              <div class=\"pickprt\">\n                <b>\n                  <h4>{{list['pickup_location']}}</h4>\n                </b>\n              </div>\n              <div class=\"dropprt\">\n                <b>\n                  <h4>{{list['delivery_location']}}</h4>\n                </b>\n              </div>\n            </div>\n          </div>\n        </li>\n      </ul>\n      <p style=\"color: #fff;\" *ngIf=\"routes.length === 0\">No Route found</p>\n    </perfect-scrollbar>\n  </div>\n\n  <div class=\"route_detail\" *ngIf=\"detailsCardEnable\">\n    <div class=\"closebtnroutedetail\" (click)=\"detailsCardEnable = false; preventMouseout = false\">\n      <mat-icon>clear</mat-icon>\n    </div>\n    <div class=\"destination\">\n      <div class=\"duration\">\n        <p class=\"pickprt\"><b>Pickup:</b> {{routeCardDetail?.pickup_location}}</p>\n        <p class=\"dropprt\"><b>Delivery:</b> {{routeCardDetail?.delivery_location}} </p>\n      </div>\n      <span><b>Name:</b> {{routeCardDetail?.route_name}}</span>\n      <span><b>Customer:</b> {{routeCardDetail?.customer_name}}</span>\n      <span><b>Material:</b> {{routeCardDetail?.material}}</span>\n      <span><b>Type:</b> {{routeCardDetail?.unit}}</span>\n      <span><b>Distance:</b> {{routeCardDetail?.estimated_distance}}</span>\n      <span><b>Travel Time:</b> {{routeCardDetail?.estimated_time}}</span>\n      <span class=\"notes\"><b>Notes:</b> {{routeCardDetail?.note}}</span>\n    </div>\n\n    <div class=\"createTxt\">\n      <small>\n        Created by {{routeCardDetail?.created_by_name}} on {{routeCardDetail?.created_at}}\n      </small>\n    </div>\n  </div>\n</div>\n", styles: [".jobcode_detailprt{position:absolute;left:300px;bottom:10px;background:white;padding:15px 20px;border-radius:20px;max-width:350px;z-index:999;box-shadow:0 0 5px #0000001a}.jobcode_detailprt .close{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}@keyframes autoslide{to{transform:translate(calc(90vw - 100%))}0%{transform:translate(0)}}.route_listprt .listing_toggle{background:white;border-radius:15px;padding:5px;position:absolute;right:10px;top:20px;cursor:pointer}.route_listprt .listing_toggle img{width:28px}.route_listprt .listing_box{background:#282828;height:100vh;position:fixed;right:0;top:0;z-index:1111;box-shadow:-3px 0 5px #ffffff14;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;width:0;border-radius:40px 0 0;opacity:0}.route_listprt .listing_box .closebtn{display:none}.route_listprt .listing_box ul{padding:0 20px 0 0}.route_listprt .listing_box ul li{background:#4a4a4a;padding:10px 15px;border-radius:15px;display:flex;margin-bottom:10px;position:relative;height:inherit}@media (min-width: 1600px){.route_listprt .listing_box ul li{padding:6px 15px;margin-bottom:5px}}.route_listprt .listing_box ul li .iconprt{display:flex;flex-direction:column}.route_listprt .listing_box ul li .iconprt span{display:flex;align-items:center;margin-bottom:32px}.route_listprt .listing_box ul li .iconprt span input[type=checkbox]{width:100%;height:100%;margin-right:10px;opacity:0;position:absolute;left:0;margin-left:0;top:0;z-index:3;cursor:pointer}.route_listprt .listing_box ul li .iconprt span input[type=checkbox]:checked+label{background:url(../../../assets/images/fill-check.png) 16px 15px no-repeat}.route_listprt .listing_box ul li .iconprt span label{background:url(../../../assets/images/blank-check.png) 16px 15px no-repeat;width:100%;position:relative;z-index:2;font-size:12px;color:#878787;height:100%;position:absolute;top:0;left:0}.route_listprt .listing_box ul li .iconprt span .border{position:absolute;width:100%;height:100%;left:0;right:0;top:0;border-radius:15px}.route_listprt .listing_box ul li .iconprt span input:checked~.border{border-left:1px solid white;border-right:1px solid white;border-top:1px solid white;border-bottom:1px solid white}.route_listprt .listing_box ul li .iconprt span h2{margin-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;padding-left:16px;font-size:.9rem;margin-bottom:0;font-weight:400;margin-top:0}.route_listprt .listing_box ul li .iconprt .statusunit{border-radius:30px;font-size:0;color:#fff;text-transform:capitalize;font-weight:500;width:20px;height:20px;text-align:center;line-height:20px;margin-bottom:7px}.route_listprt .listing_box ul li .iconprt .statusunit:first-letter{font-size:.8rem}.route_listprt .listing_box ul li .iconprt .statusunit.Ton{background:#ff7272}.route_listprt .listing_box ul li .iconprt .statusunit.Load{background:#a3c52e}.route_listprt .listing_box ul li .iconprt .statusunit.Hourly{background:#ae23d1}@media (min-width: 1600px){.route_listprt .listing_box ul li .iconprt .statusunit{line-height:21px}}.route_listprt .listing_box ul li .iconprt .infoicon{z-index:5;cursor:pointer}.route_listprt .listing_box ul li .iconprt .infoicon img{width:20px;height:20px}.route_listprt .listing_box ul li .pickprtbox{margin-left:10px}.route_listprt .listing_box ul li .pickprtbox h2{font-size:.9rem;margin:3px 0 5px;white-space:nowrap;text-overflow:ellipsis;max-width:195px;overflow:hidden}.route_listprt .listing_box ul li h3{font-size:.8rem;color:#979797;font-weight:600;margin-top:0;white-space:nowrap;text-overflow:ellipsis;max-width:195px;overflow:hidden;margin-bottom:5px}.route_listprt .listing_box ul li .pickdropprt{font-size:.75rem}.route_listprt .listing_box ul li .pickdropprt .pickprt{position:relative;display:flex;align-items:center;padding-bottom:10px}.route_listprt .listing_box ul li .pickdropprt .pickprt span{padding-left:0;padding-right:20px;display:block}.route_listprt .listing_box ul li .pickdropprt .pickprt b{position:relative}.route_listprt .listing_box ul li .pickdropprt .pickprt b:after{background:#bcbcbc;width:1px;height:100%;left:3px;content:\"\";position:absolute;top:10px}.route_listprt .listing_box ul li .pickdropprt .pickprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;color:#bcbcbc;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.route_listprt .listing_box ul li .pickdropprt .pickprt h4:before{background:#bcbcbc;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.route_listprt .listing_box ul li .pickdropprt .dropprt{position:relative;padding-bottom:10px;display:flex;align-items:center}.route_listprt .listing_box ul li .pickdropprt .dropprt span{padding-left:0;padding-right:20px;display:block}.route_listprt .listing_box ul li .pickdropprt .dropprt b{position:relative}.route_listprt .listing_box ul li .pickdropprt .dropprt b:after{background:#bcbcbc;width:1px;height:12px;left:3px;content:\"\";position:absolute;top:-7px}.route_listprt .listing_box ul li .pickdropprt .dropprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;color:#bcbcbc;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.route_listprt .listing_box ul li .pickdropprt .dropprt h4:before{background:#bcbcbc;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.route_listprt.show .listing_box{width:300px;max-width:300px;flex:0 0 350px;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;padding:40px 0 40px 20px;opacity:1}.route_listprt.show .listing_box h2{color:#fff;white-space:nowrap}.route_listprt.show .listing_box .closebtn{position:absolute;left:-33px;top:50px;background:#282828;color:#fff;padding:8px;border-top-left-radius:15px;border-bottom-left-radius:15px;cursor:pointer;box-shadow:-4px 2px 5px #ffffff14;display:block}.btnprt{display:flex;justify-content:space-between;align-items:center;padding-right:20px}.btnprt h2{margin:0}.btnprt button{font-size:15px;padding:8px 20px;background-color:#326ad3;color:#fff;border:none;border-radius:10px;box-shadow:none;outline:none}.hidden{display:none}.route_detail{background:#282828;position:absolute;width:260px;top:50%;transform:translateY(-50%);right:310px;border-radius:20px;padding:10px;box-shadow:0 0 5px #ffffff36}.route_detail .destination .duration{background:#444343;border:1px solid #918e8e;padding:10px;color:#fff}.route_detail .destination .duration b{color:#fff}.route_detail .destination .pickprt:before,.route_detail .destination .dropprt:before{background:#fff}.route_detail .destination .pickprt b:before,.route_detail .destination .dropprt b:before{background:#fff}.route_detail .destination span{line-height:20px;color:#fff;padding:3px 0}.route_detail .destination span b{color:#fff}.route_detail .destination span.notes{max-height:200px;overflow:auto}.createTxt small{color:#fff;font-size:.7rem}.closebtnroutedetail{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#f5f5f5;position:absolute;top:-7px;left:-11px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.PerfectScrollbarComponent, selector: "perfect-scrollbar", inputs: ["disabled", "usePSClass", "autoPropagation", "scrollIndicators", "config"], outputs: ["psScrollY", "psScrollX", "psScrollUp", "psScrollDown", "psScrollLeft", "psScrollRight", "psYReachEnd", "psYReachStart", "psXReachEnd", "psXReachStart"], exportAs: ["ngxPerfectScrollbar"] }, { kind: "component", type: JobRouteListComponent, selector: "app-job-route-list", inputs: ["routes", "selectedRoute", "masterRoutes"], outputs: ["changeNav", "changeRoutes", "changeSelectedRoute"] }, { kind: "component", type: JobcodeStatusComponent, selector: "app-jobcode-status", inputs: ["jobValue"] }, { kind: "component", type: JobcodeOverviewComponent, selector: "app-jobcode-overview", inputs: ["jobValue"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JobCodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-job-code', template: "<div class=\"jobcode_detailprt\" (click)=\"isOverlapRouteSection = false\"  *ngIf=\"jobdetail\" [ngClass]=\"{'overlap': !isOverlapRouteSection}\" cdkDrag>\n  <div class=\"topheadingprt\" *ngIf=\"jobdetail['order_number']\">\n    <h2>{{jobdetail['order_number']}}</h2>\n  </div>\n  <span class=\"close\"><mat-icon (click)=\"clearJob()\">clear</mat-icon></span>\n  <div class=\"job_details_area\">\n    <div class=\"detailnameprt\">\n      <span> <b> {{jobdetail.customer_name}} </b> Customer </span>\n      <app-jobcode-status [jobValue]=\"jobdetail\"></app-jobcode-status>\n    </div>\n    <app-jobcode-overview [jobValue]=\"jobdetail\"></app-jobcode-overview>\n  </div>\n</div>\n\n<div class=\"route_listprt\" (click)=\"isOverlapRouteSection = true\" [ngClass]=\"{ 'show': isVisible, 'overlap': isOverlapRouteSection}\">\n  <div class=\"listing_toggle\" (click)=\"toggleSidemenu()\">\n    <img src=\"assets/images/route.svg\" alt=\"\" />\n  </div>\n\n  <div class=\"listing_box\">\n    <div class=\"closebtn\" (click)=\"toggleSidemenu()\">\n      <mat-icon>clear</mat-icon>\n    </div>\n\n    <div class=\"btnprt\">\n      <h2> List of Routes </h2>\n      <button (click)=\"masterToggle()\">{{routes && routes.length > 0 && routes.length === selectedRoute.selected.length ? 'Uncheck' : 'Check'}} All</button>\n    </div>\n\n    <app-job-route-list [routes]=\"routes\" [masterRoutes]=\"masterRoutes\" [selectedRoute]=\"selectedRoute\" (changeRoutes)=\"routes = $event\" (changeSelectedRoute)=\"selectedRoute = $event\"></app-job-route-list>\n\n    <perfect-scrollbar>\n      <ul *ngIf=\"routes['length'] > 0\">\n        <li *ngFor=\"let list of routes\">\n          <div class=\"iconprt\">\n            <span>\n              <input type=\"checkbox\" [checked]=\"selectedRoute.isSelected(list)\"\n                (change)=\"$event ? selectRoute(list) : null\" /><label>&nbsp;</label>\n              <div class=\"border\"></div>\n            </span>\n            <div class=\"statusunit\" [ngClass]=\"list['unit']\">{{list['unit']}}</div>\n            <div class=\"infoicon\">\n              <img (mouseenter)=\"togglerouteDetails(true, list)\" (mouseout)=\"togglerouteDetails(false, list, true)\"\n              (click)=\"togglerouteDetails('click', list)\" src=\"assets/images/info_icon.png\" [alt]=\"\" />\n            </div>\n          </div>\n          <div class=\"pickprtbox\">\n            <h2> {{list['route_name']}} </h2>\n            <h3>{{list['customer_name']}} | {{list['material']}}</h3>\n            <div class=\"pickdropprt\">\n              <div class=\"pickprt\">\n                <b>\n                  <h4>{{list['pickup_location']}}</h4>\n                </b>\n              </div>\n              <div class=\"dropprt\">\n                <b>\n                  <h4>{{list['delivery_location']}}</h4>\n                </b>\n              </div>\n            </div>\n          </div>\n        </li>\n      </ul>\n      <p style=\"color: #fff;\" *ngIf=\"routes.length === 0\">No Route found</p>\n    </perfect-scrollbar>\n  </div>\n\n  <div class=\"route_detail\" *ngIf=\"detailsCardEnable\">\n    <div class=\"closebtnroutedetail\" (click)=\"detailsCardEnable = false; preventMouseout = false\">\n      <mat-icon>clear</mat-icon>\n    </div>\n    <div class=\"destination\">\n      <div class=\"duration\">\n        <p class=\"pickprt\"><b>Pickup:</b> {{routeCardDetail?.pickup_location}}</p>\n        <p class=\"dropprt\"><b>Delivery:</b> {{routeCardDetail?.delivery_location}} </p>\n      </div>\n      <span><b>Name:</b> {{routeCardDetail?.route_name}}</span>\n      <span><b>Customer:</b> {{routeCardDetail?.customer_name}}</span>\n      <span><b>Material:</b> {{routeCardDetail?.material}}</span>\n      <span><b>Type:</b> {{routeCardDetail?.unit}}</span>\n      <span><b>Distance:</b> {{routeCardDetail?.estimated_distance}}</span>\n      <span><b>Travel Time:</b> {{routeCardDetail?.estimated_time}}</span>\n      <span class=\"notes\"><b>Notes:</b> {{routeCardDetail?.note}}</span>\n    </div>\n\n    <div class=\"createTxt\">\n      <small>\n        Created by {{routeCardDetail?.created_by_name}} on {{routeCardDetail?.created_at}}\n      </small>\n    </div>\n  </div>\n</div>\n", styles: [".jobcode_detailprt{position:absolute;left:300px;bottom:10px;background:white;padding:10px 20px;border-radius:20px;width:calc(100% - 315px);z-index:999;box-shadow:0 0 5px #0000001a;height:250px;cursor:move}@media (min-width: 1600px){.jobcode_detailprt{left:307px;width:calc(100% - 325px)}}.jobcode_detailprt .topheadingprt .driver_list ul{display:flex;width:450px;justify-content:flex-end}.jobcode_detailprt .topheadingprt .driver_list ul li{position:relative;margin:0 -6px 2px 0;cursor:pointer}.jobcode_detailprt .topheadingprt .driver_list ul li img{width:30px;height:30px;border-radius:100%;border:1px solid #fff}.jobcode_detailprt .topheadingprt .driver_list ul li:hover .driver_detail{display:flex}.jobcode_detailprt .topheadingprt .driver_list ul li .driver_detail{position:absolute;top:-70px;left:-50px;display:none;will-change:transform;pointer-events:none;border-radius:10px;box-shadow:0 4px 4px #00000024;width:133px;background:white;text-align:center;padding:10px;flex-direction:column;font-size:.8125rem}.jobcode_detailprt .topheadingprt .driver_list ul li .driver_detail b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:135px}.jobcode_detailprt .topheadingprt .driver_list ul li .driver_detail span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:117px;display:block}.jobcode_detailprt .topheadingprt .driver_list ul li .driver_detail:after{width:0;height:0;border-top:15px solid white;border-left:10px solid transparent;border-right:10px solid transparent;z-index:1;content:\"\";position:absolute;filter:drop-shadow(0px 3px 1px rgba(0,0,0,.2));bottom:-14px;left:50%;transform:translate(-50%)}.jobcode_detailprt .topheadingprt .driver_list ul li.extraicon{background:white;width:30px;height:30px;border-radius:100%;display:flex;justify-content:center;align-items:center;margin:0 0 0 10px;border:1px solid #eee}.jobcode_detailprt .close{position:absolute;top:10px;right:20px;background:#e8e8e8;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer}@keyframes autoslide{to{transform:translate(calc(90vw - 100%))}0%{transform:translate(0)}}.jobcode_detailprt .job_details_area{padding:15px 0}.jobcode_detailprt .job_details_area .detailnameprt{display:flex;justify-content:space-between}.jobcode_detailprt .job_details_area .detailnameprt span{display:flex;flex-direction:column;font-size:.875rem;color:#767676}.jobcode_detailprt .job_details_area .detailnameprt span b{font-size:.9375rem;font-weight:500;color:#000}.route_listprt .listing_toggle{background:white;border-radius:15px;padding:5px;position:absolute;right:10px;top:20px;cursor:pointer}.route_listprt .listing_toggle img{width:28px}.route_listprt .listing_box{background:#282828;height:100vh;position:fixed;right:0;top:0;z-index:1111;box-shadow:-3px 0 5px #ffffff14;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;width:0;border-radius:40px 0 0;opacity:0}.route_listprt .listing_box .closebtn{display:none}.route_listprt .listing_box ul{padding:0 20px 0 0}.route_listprt .listing_box ul li{background:#4a4a4a;padding:10px 15px;border-radius:15px;display:flex;margin-bottom:10px;position:relative;height:inherit}@media (min-width: 1600px){.route_listprt .listing_box ul li{padding:6px 15px;margin-bottom:5px}}.route_listprt .listing_box ul li .iconprt{display:flex;flex-direction:column}.route_listprt .listing_box ul li .iconprt span{display:flex;align-items:center;margin-bottom:32px}.route_listprt .listing_box ul li .iconprt span input[type=checkbox]{width:100%;height:100%;margin-right:10px;opacity:0;position:absolute;left:0;margin-left:0;top:0;z-index:3;cursor:pointer}.route_listprt .listing_box ul li .iconprt span input[type=checkbox]:checked+label{background:url(../../../assets/images/fill-check.png) 16px 15px no-repeat}.route_listprt .listing_box ul li .iconprt span label{background:url(../../../assets/images/blank-check.png) 16px 15px no-repeat;width:100%;position:relative;z-index:2;font-size:12px;color:#878787;height:100%;position:absolute;top:0;left:0}.route_listprt .listing_box ul li .iconprt span .border{position:absolute;width:100%;height:100%;left:0;right:0;top:0;border-radius:15px}.route_listprt .listing_box ul li .iconprt span input:checked~.border{border-left:1px solid white;border-right:1px solid white;border-top:1px solid white;border-bottom:1px solid white}.route_listprt .listing_box ul li .iconprt span h2{margin-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;padding-left:16px;font-size:.9rem;margin-bottom:0;font-weight:400;margin-top:0}.route_listprt .listing_box ul li .iconprt .statusunit{border-radius:30px;font-size:0;color:#fff;text-transform:capitalize;font-weight:500;width:20px;height:20px;text-align:center;line-height:20px;margin-bottom:7px}.route_listprt .listing_box ul li .iconprt .statusunit:first-letter{font-size:.8rem}.route_listprt .listing_box ul li .iconprt .statusunit.Ton{background:#ff7272}.route_listprt .listing_box ul li .iconprt .statusunit.Load{background:#a3c52e}.route_listprt .listing_box ul li .iconprt .statusunit.Hourly{background:#ae23d1}@media (min-width: 1600px){.route_listprt .listing_box ul li .iconprt .statusunit{line-height:21px}}.route_listprt .listing_box ul li .iconprt .infoicon{z-index:5;cursor:pointer}.route_listprt .listing_box ul li .iconprt .infoicon img{width:20px;height:20px}.route_listprt .listing_box ul li .pickprtbox{margin-left:10px}.route_listprt .listing_box ul li .pickprtbox h2{font-size:.9rem;margin:3px 0 5px;white-space:nowrap;text-overflow:ellipsis;max-width:195px;overflow:hidden}.route_listprt .listing_box ul li h3{font-size:.8rem;color:#979797;font-weight:600;margin-top:0;white-space:nowrap;text-overflow:ellipsis;max-width:195px;overflow:hidden;margin-bottom:5px}.route_listprt .listing_box ul li .pickdropprt{font-size:.75rem}.route_listprt .listing_box ul li .pickdropprt .pickprt{position:relative;display:flex;align-items:center;padding-bottom:10px}.route_listprt .listing_box ul li .pickdropprt .pickprt span{padding-left:0;padding-right:20px;display:block}.route_listprt .listing_box ul li .pickdropprt .pickprt b{position:relative}.route_listprt .listing_box ul li .pickdropprt .pickprt b:after{background:#bcbcbc;width:1px;height:100%;left:3px;content:\"\";position:absolute;top:10px}.route_listprt .listing_box ul li .pickdropprt .pickprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;color:#bcbcbc;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.route_listprt .listing_box ul li .pickdropprt .pickprt h4:before{background:#bcbcbc;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.route_listprt .listing_box ul li .pickdropprt .dropprt{position:relative;padding-bottom:10px;display:flex;align-items:center}.route_listprt .listing_box ul li .pickdropprt .dropprt span{padding-left:0;padding-right:20px;display:block}.route_listprt .listing_box ul li .pickdropprt .dropprt b{position:relative}.route_listprt .listing_box ul li .pickdropprt .dropprt b:after{background:#bcbcbc;width:1px;height:12px;left:3px;content:\"\";position:absolute;top:-7px}.route_listprt .listing_box ul li .pickdropprt .dropprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;color:#bcbcbc;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.route_listprt .listing_box ul li .pickdropprt .dropprt h4:before{background:#bcbcbc;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.route_listprt.show .listing_box{width:300px;max-width:300px;flex:0 0 350px;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;padding:40px 0 40px 20px;opacity:1}.route_listprt.show .listing_box h2{color:#fff;white-space:nowrap}.route_listprt.show .listing_box .closebtn{position:absolute;left:-33px;top:50px;background:#282828;color:#fff;padding:8px;border-top-left-radius:15px;border-bottom-left-radius:15px;cursor:pointer;box-shadow:-4px 2px 5px #ffffff14;display:block}.overlap{z-index:9999}.btnprt{display:flex;justify-content:space-between;align-items:center;padding-right:20px}.btnprt h2{margin:0}.btnprt button{font-size:15px;padding:8px 20px;background-color:#326ad3;color:#fff;border:none;border-radius:10px;box-shadow:none;outline:none}.hidden{display:none}.route_detail{background:#282828;position:absolute;width:260px;top:50%;transform:translateY(-50%);right:310px;border-radius:20px;padding:10px;box-shadow:0 0 5px #ffffff36}.route_detail .destination .duration{background:#444343;border:1px solid #918e8e;padding:10px;color:#fff}.route_detail .destination .duration b{color:#fff}.route_detail .destination .pickprt:before,.route_detail .destination .dropprt:before{background:#fff}.route_detail .destination .pickprt b:before,.route_detail .destination .dropprt b:before{background:#fff}.route_detail .destination span{line-height:20px;color:#fff;padding:3px 0}.route_detail .destination span b{color:#fff}.route_detail .destination span.notes{max-height:200px;overflow:auto}.createTxt small{color:#fff;font-size:.7rem}.closebtnroutedetail{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#f5f5f5;position:absolute;top:-7px;left:-11px}\n"] }]
+            args: [{ selector: 'app-job-code', template: "<div class=\"jobcode_detailprt\" (click)=\"isOverlapRouteSection = false\"  *ngIf=\"jobdetail\" [ngClass]=\"{'overlap': !isOverlapRouteSection}\" cdkDrag>\n  <span class=\"close\"><mat-icon (click)=\"clearJob()\">clear</mat-icon></span>\n  <div class=\"job_details_area\">\n    <div class=\"detailnameprt\">\n      <app-jobcode-status [jobValue]=\"jobdetail\"></app-jobcode-status>\n    </div>\n    <app-jobcode-overview [jobValue]=\"jobdetail\"></app-jobcode-overview>\n  </div>\n</div>\n\n<div class=\"route_listprt\" (click)=\"isOverlapRouteSection = true\" [ngClass]=\"{ 'show': isVisible, 'overlap': isOverlapRouteSection}\">\n  <div class=\"listing_toggle\" (click)=\"toggleSidemenu()\">\n    <img src=\"assets/images/route.svg\" alt=\"\" />\n  </div>\n\n  <div class=\"listing_box\">\n    <div class=\"closebtn\" (click)=\"toggleSidemenu()\">\n      <mat-icon>clear</mat-icon>\n    </div>\n\n    <div class=\"btnprt\">\n      <h2> List of Routes </h2>\n      <button (click)=\"masterToggle()\">{{routes && routes.length > 0 && routes.length === selectedRoute.selected.length ? 'Uncheck' : 'Check'}} All</button>\n    </div>\n\n    <app-job-route-list [routes]=\"routes\" [masterRoutes]=\"masterRoutes\" [selectedRoute]=\"selectedRoute\" (changeRoutes)=\"routes = $event\" (changeSelectedRoute)=\"selectedRoute = $event\"></app-job-route-list>\n\n    <perfect-scrollbar>\n      <ul *ngIf=\"routes['length'] > 0\">\n        <li *ngFor=\"let list of routes\">\n          <div class=\"iconprt\">\n            <span>\n              <input type=\"checkbox\" [checked]=\"selectedRoute.isSelected(list)\"\n                (change)=\"$event ? selectRoute(list) : null\" /><label>&nbsp;</label>\n              <div class=\"border\"></div>\n            </span>\n            <div class=\"statusunit\" [ngClass]=\"list['unit']\">{{list['unit']}}</div>\n            <div class=\"infoicon\">\n              <img (mouseenter)=\"togglerouteDetails(true, list)\" (mouseout)=\"togglerouteDetails(false, list, true)\"\n              (click)=\"togglerouteDetails('click', list)\" src=\"assets/images/info_icon.png\" [alt]=\"\" />\n            </div>\n          </div>\n          <div class=\"pickprtbox\">\n            <h2> {{list['route_name']}} </h2>\n            <h3>{{list['customer_name']}} | {{list['material']}}</h3>\n            <div class=\"pickdropprt\">\n              <div class=\"pickprt\">\n                <b>\n                  <h4>{{list['pickup_location']}}</h4>\n                </b>\n              </div>\n              <div class=\"dropprt\">\n                <b>\n                  <h4>{{list['delivery_location']}}</h4>\n                </b>\n              </div>\n            </div>\n          </div>\n        </li>\n      </ul>\n      <p style=\"color: #fff;\" *ngIf=\"routes.length === 0\">No Route found</p>\n    </perfect-scrollbar>\n  </div>\n\n  <div class=\"route_detail\" *ngIf=\"detailsCardEnable\">\n    <div class=\"closebtnroutedetail\" (click)=\"detailsCardEnable = false; preventMouseout = false\">\n      <mat-icon>clear</mat-icon>\n    </div>\n    <div class=\"destination\">\n      <div class=\"duration\">\n        <p class=\"pickprt\"><b>Pickup:</b> {{routeCardDetail?.pickup_location}}</p>\n        <p class=\"dropprt\"><b>Delivery:</b> {{routeCardDetail?.delivery_location}} </p>\n      </div>\n      <span><b>Name:</b> {{routeCardDetail?.route_name}}</span>\n      <span><b>Customer:</b> {{routeCardDetail?.customer_name}}</span>\n      <span><b>Material:</b> {{routeCardDetail?.material}}</span>\n      <span><b>Type:</b> {{routeCardDetail?.unit}}</span>\n      <span><b>Distance:</b> {{routeCardDetail?.estimated_distance}}</span>\n      <span><b>Travel Time:</b> {{routeCardDetail?.estimated_time}}</span>\n      <span class=\"notes\"><b>Notes:</b> {{routeCardDetail?.note}}</span>\n    </div>\n\n    <div class=\"createTxt\">\n      <small>\n        Created by {{routeCardDetail?.created_by_name}} on {{routeCardDetail?.created_at}}\n      </small>\n    </div>\n  </div>\n</div>\n", styles: [".jobcode_detailprt{position:absolute;left:300px;bottom:10px;background:white;padding:15px 20px;border-radius:20px;max-width:350px;z-index:999;box-shadow:0 0 5px #0000001a}.jobcode_detailprt .close{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}@keyframes autoslide{to{transform:translate(calc(90vw - 100%))}0%{transform:translate(0)}}.route_listprt .listing_toggle{background:white;border-radius:15px;padding:5px;position:absolute;right:10px;top:20px;cursor:pointer}.route_listprt .listing_toggle img{width:28px}.route_listprt .listing_box{background:#282828;height:100vh;position:fixed;right:0;top:0;z-index:1111;box-shadow:-3px 0 5px #ffffff14;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;width:0;border-radius:40px 0 0;opacity:0}.route_listprt .listing_box .closebtn{display:none}.route_listprt .listing_box ul{padding:0 20px 0 0}.route_listprt .listing_box ul li{background:#4a4a4a;padding:10px 15px;border-radius:15px;display:flex;margin-bottom:10px;position:relative;height:inherit}@media (min-width: 1600px){.route_listprt .listing_box ul li{padding:6px 15px;margin-bottom:5px}}.route_listprt .listing_box ul li .iconprt{display:flex;flex-direction:column}.route_listprt .listing_box ul li .iconprt span{display:flex;align-items:center;margin-bottom:32px}.route_listprt .listing_box ul li .iconprt span input[type=checkbox]{width:100%;height:100%;margin-right:10px;opacity:0;position:absolute;left:0;margin-left:0;top:0;z-index:3;cursor:pointer}.route_listprt .listing_box ul li .iconprt span input[type=checkbox]:checked+label{background:url(../../../assets/images/fill-check.png) 16px 15px no-repeat}.route_listprt .listing_box ul li .iconprt span label{background:url(../../../assets/images/blank-check.png) 16px 15px no-repeat;width:100%;position:relative;z-index:2;font-size:12px;color:#878787;height:100%;position:absolute;top:0;left:0}.route_listprt .listing_box ul li .iconprt span .border{position:absolute;width:100%;height:100%;left:0;right:0;top:0;border-radius:15px}.route_listprt .listing_box ul li .iconprt span input:checked~.border{border-left:1px solid white;border-right:1px solid white;border-top:1px solid white;border-bottom:1px solid white}.route_listprt .listing_box ul li .iconprt span h2{margin-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;padding-left:16px;font-size:.9rem;margin-bottom:0;font-weight:400;margin-top:0}.route_listprt .listing_box ul li .iconprt .statusunit{border-radius:30px;font-size:0;color:#fff;text-transform:capitalize;font-weight:500;width:20px;height:20px;text-align:center;line-height:20px;margin-bottom:7px}.route_listprt .listing_box ul li .iconprt .statusunit:first-letter{font-size:.8rem}.route_listprt .listing_box ul li .iconprt .statusunit.Ton{background:#ff7272}.route_listprt .listing_box ul li .iconprt .statusunit.Load{background:#a3c52e}.route_listprt .listing_box ul li .iconprt .statusunit.Hourly{background:#ae23d1}@media (min-width: 1600px){.route_listprt .listing_box ul li .iconprt .statusunit{line-height:21px}}.route_listprt .listing_box ul li .iconprt .infoicon{z-index:5;cursor:pointer}.route_listprt .listing_box ul li .iconprt .infoicon img{width:20px;height:20px}.route_listprt .listing_box ul li .pickprtbox{margin-left:10px}.route_listprt .listing_box ul li .pickprtbox h2{font-size:.9rem;margin:3px 0 5px;white-space:nowrap;text-overflow:ellipsis;max-width:195px;overflow:hidden}.route_listprt .listing_box ul li h3{font-size:.8rem;color:#979797;font-weight:600;margin-top:0;white-space:nowrap;text-overflow:ellipsis;max-width:195px;overflow:hidden;margin-bottom:5px}.route_listprt .listing_box ul li .pickdropprt{font-size:.75rem}.route_listprt .listing_box ul li .pickdropprt .pickprt{position:relative;display:flex;align-items:center;padding-bottom:10px}.route_listprt .listing_box ul li .pickdropprt .pickprt span{padding-left:0;padding-right:20px;display:block}.route_listprt .listing_box ul li .pickdropprt .pickprt b{position:relative}.route_listprt .listing_box ul li .pickdropprt .pickprt b:after{background:#bcbcbc;width:1px;height:100%;left:3px;content:\"\";position:absolute;top:10px}.route_listprt .listing_box ul li .pickdropprt .pickprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;color:#bcbcbc;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.route_listprt .listing_box ul li .pickdropprt .pickprt h4:before{background:#bcbcbc;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.route_listprt .listing_box ul li .pickdropprt .dropprt{position:relative;padding-bottom:10px;display:flex;align-items:center}.route_listprt .listing_box ul li .pickdropprt .dropprt span{padding-left:0;padding-right:20px;display:block}.route_listprt .listing_box ul li .pickdropprt .dropprt b{position:relative}.route_listprt .listing_box ul li .pickdropprt .dropprt b:after{background:#bcbcbc;width:1px;height:12px;left:3px;content:\"\";position:absolute;top:-7px}.route_listprt .listing_box ul li .pickdropprt .dropprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;color:#bcbcbc;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.route_listprt .listing_box ul li .pickdropprt .dropprt h4:before{background:#bcbcbc;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.route_listprt.show .listing_box{width:300px;max-width:300px;flex:0 0 350px;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;padding:40px 0 40px 20px;opacity:1}.route_listprt.show .listing_box h2{color:#fff;white-space:nowrap}.route_listprt.show .listing_box .closebtn{position:absolute;left:-33px;top:50px;background:#282828;color:#fff;padding:8px;border-top-left-radius:15px;border-bottom-left-radius:15px;cursor:pointer;box-shadow:-4px 2px 5px #ffffff14;display:block}.btnprt{display:flex;justify-content:space-between;align-items:center;padding-right:20px}.btnprt h2{margin:0}.btnprt button{font-size:15px;padding:8px 20px;background-color:#326ad3;color:#fff;border:none;border-radius:10px;box-shadow:none;outline:none}.hidden{display:none}.route_detail{background:#282828;position:absolute;width:260px;top:50%;transform:translateY(-50%);right:310px;border-radius:20px;padding:10px;box-shadow:0 0 5px #ffffff36}.route_detail .destination .duration{background:#444343;border:1px solid #918e8e;padding:10px;color:#fff}.route_detail .destination .duration b{color:#fff}.route_detail .destination .pickprt:before,.route_detail .destination .dropprt:before{background:#fff}.route_detail .destination .pickprt b:before,.route_detail .destination .dropprt b:before{background:#fff}.route_detail .destination span{line-height:20px;color:#fff;padding:3px 0}.route_detail .destination span b{color:#fff}.route_detail .destination span.notes{max-height:200px;overflow:auto}.createTxt small{color:#fff;font-size:.7rem}.closebtnroutedetail{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#f5f5f5;position:absolute;top:-7px;left:-11px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.UtilsService }, { type: i1.CoolmapService }, { type: i1.CoolmapConfigModel, decorators: [{
                     type: Inject,
                     args: ['memberData']
@@ -1112,15 +1117,17 @@ class AddRouteComponent {
             if (!changes['prevent']) {
                 this.preventSave = false;
                 this.formControlValue();
-                this.patchFormValue(changes);
-                this.checkAndFetchRouteInformation(true);
+                this.patchFormValue(changes).then(() => {
+                    this.checkAndFetchRouteInformation(true);
+                });
             }
         }
         if (!changes) {
             this.enableForm = true;
             this.preventSave = true;
-            this.patchFormValue();
-            this.checkAndFetchRouteInformation();
+            this.patchFormValue().then(() => {
+                this.checkAndFetchRouteInformation();
+            });
         }
     }
     ngOnInit() {
@@ -1154,17 +1161,13 @@ class AddRouteComponent {
     formControlValue() {
         this.addRouteForm.controls['pickup_location']?.valueChanges.pipe(takeUntil(this.destroyer$)).subscribe((res) => {
             if (this.addRouteForm.value.pickup_location && res !== this.addRouteForm.value.pickup_location) {
-                this.addRouteForm.patchValue({
-                    pickup_lat_lng: '',
-                });
+                this.addRouteForm.patchValue({ pickup_lat_lng: '' });
                 this.addRouteForm.controls['pickup_lat_lng'].markAsTouched();
             }
         });
         this.addRouteForm.controls['delivery_location']?.valueChanges.pipe(takeUntil(this.destroyer$)).subscribe((res) => {
             if (this.addRouteForm.value.delivery_location && res !== this.addRouteForm.value.delivery_location) {
-                this.addRouteForm.patchValue({
-                    delivery_lat_lng: '',
-                });
+                this.addRouteForm.patchValue({ delivery_lat_lng: '' });
                 this.addRouteForm.controls['delivery_lat_lng'].markAsTouched();
             }
         });
@@ -1186,7 +1189,7 @@ class AddRouteComponent {
             note: new FormControl('', [Validators.maxLength(2048)]),
         });
     }
-    patchFormValue(data) {
+    async patchFormValue(data) {
         this.addRouteForm.reset();
         this.addRouteForm.patchValue(data);
         this.routeId = data?.route_id;
@@ -1198,6 +1201,7 @@ class AddRouteComponent {
             }
         });
         this.filterCustomerList();
+        await true;
     }
     selectedLongLat(type, event) {
         if (type === 'pickup') {