@aggdirect/coolmap 2.8.1 → 2.8.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -139,11 +139,11 @@ class ViewRouteListCardComponent {
139
139
  this.utils.routeDetailsUtility.next({ event, route });
140
140
  }
141
141
  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 });
142
- 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>{{config.repository === 'coolmap' ? route['material'] : route['materialLabel']}}</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"] }] });
142
+ 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"] }] });
143
143
  }
144
144
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ViewRouteListCardComponent, decorators: [{
145
145
  type: Component,
146
- 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>{{config.repository === 'coolmap' ? route['material'] : route['materialLabel']}}</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"] }]
146
+ 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"] }]
147
147
  }], ctorParameters: () => [{ type: i1.UtilsService }, { type: i1.CoolmapConfigModel, decorators: [{
148
148
  type: Inject,
149
149
  args: ['memberData']
@@ -363,8 +363,6 @@ class RouteJobCodeListComponent {
363
363
  if (this.currentNav !== 'addForm') {
364
364
  changes['data']['currentValue'].forEach((ele, indexForData) => {
365
365
  const id = (ele['job_id'] ? ele['job_id'] : ele['route_id']);
366
- if (this.type === 'jobcode')
367
- ele.materialLabel = ele.material;
368
366
  this.coolMap.plotRoute(ele, id, this.type, false, (indexForData === (this.data.length - 1))).then((res) => {
369
367
  if (indexForData === (this.data.length - 1)) {
370
368
  this.loader = false;
@@ -649,7 +647,6 @@ class AddRouteNavComponent {
649
647
  this.utils.clearOptions();
650
648
  this.routes.map((ele) => {
651
649
  ele.unit = this.getUnitName(ele);
652
- ele.materialLabel = this.getMaterialName(ele);
653
650
  ele.material = this.getMaterialName(ele).split('|')[0].trim();
654
651
  this.utils.makeOptions(ele);
655
652
  });
@@ -912,13 +909,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
912
909
  type: Input
913
910
  }] } });
914
911
 
915
- const CardKeysValue = ['route_name', 'customer_name', 'material', 'unit',
916
- 'estimated_distance', 'estimated_time', 'trucker_pay_estimate', 'customer_price_estimate', 'note', 'pickup_location', 'delivery_location'];
912
+ const CardKeysValue = [
913
+ 'route_name',
914
+ 'customer_name',
915
+ 'unit',
916
+ 'estimated_distance',
917
+ 'estimated_time',
918
+ 'trucker_pay_estimate',
919
+ 'customer_price_estimate',
920
+ 'note',
921
+ 'pickup_location',
922
+ 'delivery_location',
923
+ ];
917
924
  var CardElements;
918
925
  (function (CardElements) {
919
926
  CardElements["route_name"] = "Name";
920
927
  CardElements["customer_name"] = "Customer";
921
- CardElements["material"] = "Material";
922
928
  CardElements["unit"] = "Type";
923
929
  CardElements["estimated_distance"] = "Distance";
924
930
  CardElements["estimated_time"] = "Travel Time";
@@ -944,17 +950,7 @@ class RouteInfoCardComponent {
944
950
  }
945
951
  createLabel(itemName) {
946
952
  let obj;
947
- if (this.propData['repository'] === 'coolmap') {
948
- obj = { label: CardElements[itemName], value: this.popupData[itemName] };
949
- }
950
- if (this.propData['repository'] === 'customer') {
951
- if (itemName === 'material') {
952
- obj = { label: CardElements[itemName], value: this.popupData['materialLabel'] };
953
- }
954
- else {
955
- obj = { label: CardElements[itemName], value: this.popupData[itemName] };
956
- }
957
- }
953
+ obj = { label: CardElements[itemName], value: this.popupData[itemName] };
958
954
  if (itemName === 'trucker_pay_estimate' || itemName === 'customer_price_estimate') {
959
955
  obj['value'] = obj['value'] ? '$' + obj['value'] : '';
960
956
  }
@@ -1027,15 +1023,6 @@ class JobCodeComponent {
1027
1023
  });
1028
1024
  return unitName;
1029
1025
  }
1030
- getMaterialName(data) {
1031
- let materialName = '';
1032
- this.materialsList.map((res) => {
1033
- if (res.sub_material_id === data.materials_id) {
1034
- materialName = res.label;
1035
- }
1036
- });
1037
- return materialName;
1038
- }
1039
1026
  getRouteListForCoolMap() {
1040
1027
  this.utils.getData('routes/all').pipe(takeUntil(this.destroyer$)).subscribe((res) => {
1041
1028
  if (res) {
@@ -1056,8 +1043,6 @@ class JobCodeComponent {
1056
1043
  this.preventListUpdate = false;
1057
1044
  this.routes.map((ele) => {
1058
1045
  ele.unit = this.getUnitName(ele);
1059
- ele.materialLabel = this.getMaterialName(ele);
1060
- ele.material = this.getMaterialName(ele).split('|')[0].trim();
1061
1046
  this.utils.makeOptions(ele);
1062
1047
  });
1063
1048
  this.masterRoutes = this.routes;
@@ -1133,11 +1118,11 @@ class JobCodeComponent {
1133
1118
  this.destroyer$.unsubscribe();
1134
1119
  }
1135
1120
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: JobCodeComponent, deps: [{ token: i1.UtilsService }, { token: i1.CoolmapService }, { token: 'memberData' }], target: i0.ɵɵFactoryTarget.Component });
1136
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: JobCodeComponent, selector: "app-job-code", inputs: { jobdetail: "jobdetail", customerRepoDetails: "customerRepoDetails" }, outputs: { clearJobDetails: "clearJobDetails", openShareRoute: "openShareRoute" }, 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 <cdk-virtual-scroll-viewport itemSize=\"50\" class=\"routeList-viewport\">\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 class=\"infoicon\" *ngIf=\"config.repository === 'customer'\">\n <img src=\"assets/images/share_icon.png\" (click)=\"openShareRouteModal(list)\" [alt]=\"\" />\n </div>\n </div>\n <div class=\"pickprtbox\">\n <h2> {{list['route_name']}} </h2>\n <h3><ng-container *ngIf=\"config?.repository === 'coolmap'\">{{list['customer_name']}} | </ng-container>{{config.repository === 'coolmap' ? list['material'] : list['materialLabel']}}</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 </cdk-virtual-scroll-viewport>\n\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 <lib-route-info-card [propData]=\"{className: 'listRoutecard', repository: config['repository']}\" [popupData]=\"routeCardDetail\"></lib-route-info-card>\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:20em;bottom:10px;background:#fff;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:#fff;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 label{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:7px 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;-webkit-box-flex:0;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}.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}.routeList-viewport{height:944px}\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: "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: 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"] }, { kind: "component", type: RouteInfoCardComponent, selector: "lib-route-info-card", inputs: ["popupData", "propData"] }] });
1121
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: JobCodeComponent, selector: "app-job-code", inputs: { jobdetail: "jobdetail", customerRepoDetails: "customerRepoDetails" }, outputs: { clearJobDetails: "clearJobDetails", openShareRoute: "openShareRoute" }, 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 <cdk-virtual-scroll-viewport itemSize=\"50\" class=\"routeList-viewport\">\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 class=\"infoicon\" *ngIf=\"config.repository === 'customer'\">\n <img src=\"assets/images/share_icon.png\" (click)=\"openShareRouteModal(list)\" [alt]=\"\" />\n </div>\n </div>\n <div class=\"pickprtbox\">\n <h2> {{list['route_name']}} </h2>\n <h3><ng-container *ngIf=\"config?.repository === 'coolmap'\">{{list['customer_name']}} </ng-container></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 </cdk-virtual-scroll-viewport>\n\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 <lib-route-info-card [propData]=\"{className: 'listRoutecard', repository: config['repository']}\" [popupData]=\"routeCardDetail\"></lib-route-info-card>\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:20em;bottom:10px;background:#fff;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:#fff;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 label{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:7px 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;-webkit-box-flex:0;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}.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}.routeList-viewport{height:944px}\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: "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: 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"] }, { kind: "component", type: RouteInfoCardComponent, selector: "lib-route-info-card", inputs: ["popupData", "propData"] }] });
1137
1122
  }
1138
1123
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: JobCodeComponent, decorators: [{
1139
1124
  type: Component,
1140
- 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 <cdk-virtual-scroll-viewport itemSize=\"50\" class=\"routeList-viewport\">\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 class=\"infoicon\" *ngIf=\"config.repository === 'customer'\">\n <img src=\"assets/images/share_icon.png\" (click)=\"openShareRouteModal(list)\" [alt]=\"\" />\n </div>\n </div>\n <div class=\"pickprtbox\">\n <h2> {{list['route_name']}} </h2>\n <h3><ng-container *ngIf=\"config?.repository === 'coolmap'\">{{list['customer_name']}} | </ng-container>{{config.repository === 'coolmap' ? list['material'] : list['materialLabel']}}</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 </cdk-virtual-scroll-viewport>\n\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 <lib-route-info-card [propData]=\"{className: 'listRoutecard', repository: config['repository']}\" [popupData]=\"routeCardDetail\"></lib-route-info-card>\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:20em;bottom:10px;background:#fff;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:#fff;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 label{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:7px 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;-webkit-box-flex:0;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}.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}.routeList-viewport{height:944px}\n"] }]
1125
+ 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 <cdk-virtual-scroll-viewport itemSize=\"50\" class=\"routeList-viewport\">\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 class=\"infoicon\" *ngIf=\"config.repository === 'customer'\">\n <img src=\"assets/images/share_icon.png\" (click)=\"openShareRouteModal(list)\" [alt]=\"\" />\n </div>\n </div>\n <div class=\"pickprtbox\">\n <h2> {{list['route_name']}} </h2>\n <h3><ng-container *ngIf=\"config?.repository === 'coolmap'\">{{list['customer_name']}} </ng-container></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 </cdk-virtual-scroll-viewport>\n\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 <lib-route-info-card [propData]=\"{className: 'listRoutecard', repository: config['repository']}\" [popupData]=\"routeCardDetail\"></lib-route-info-card>\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:20em;bottom:10px;background:#fff;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:#fff;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 label{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:7px 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;-webkit-box-flex:0;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}.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}.routeList-viewport{height:944px}\n"] }]
1141
1126
  }], ctorParameters: () => [{ type: i1.UtilsService }, { type: i1.CoolmapService }, { type: i1.CoolmapConfigModel, decorators: [{
1142
1127
  type: Inject,
1143
1128
  args: ['memberData']
@@ -1206,7 +1191,6 @@ class AddRouteComponent {
1206
1191
  requestParmsForRouteDetails = { pickup_lat_lng: '', delivery_lat_lng: '' };
1207
1192
  customersList = [];
1208
1193
  unitsList = [];
1209
- materialsList = [];
1210
1194
  addRouteForm;
1211
1195
  routeData;
1212
1196
  customerRepoDetails;
@@ -1225,16 +1209,6 @@ class AddRouteComponent {
1225
1209
  this.utils = utils;
1226
1210
  this.dialog = dialog;
1227
1211
  this.config = config;
1228
- if (this.config.repository === 'customer') {
1229
- this.utils.fetchMaterialsListForCustomer().then((res) => {
1230
- this.materialsList = res;
1231
- });
1232
- }
1233
- else {
1234
- this.utils.fetchMaterialsList().then((res) => {
1235
- this.materialsList = res;
1236
- });
1237
- }
1238
1212
  this.utils.fetchUnitsList().then((res) => {
1239
1213
  this.unitsList = res;
1240
1214
  });
@@ -1364,7 +1338,6 @@ class AddRouteComponent {
1364
1338
  route_name: new FormControl('', [Validators.required]),
1365
1339
  customer_name: new FormControl({ value: '', disabled: true }, [Validators.required]),
1366
1340
  customer_id: new FormControl(''),
1367
- materials_id: new FormControl('', [Validators.required]),
1368
1341
  unit_id: new FormControl('', [Validators.required]),
1369
1342
  path: new FormControl('', [Validators.required]),
1370
1343
  pickup_location: new FormControl('', [Validators.required]),
@@ -1424,12 +1397,10 @@ class AddRouteComponent {
1424
1397
  };
1425
1398
  this.coolMapService.removeRouteAndMarker(1).then(() => {
1426
1399
  const unit = this.unitsList.find((x) => x.id === this.addRouteForm.value.unit_id);
1427
- const materialDetails = this.materialsList.find((x) => x.sub_material_id === this.addRouteForm.value.materials_id);
1428
1400
  this.coolMapService.loadMapProperty(element, 1, unit?.type, {
1429
1401
  pickup_location: this.addRouteForm.get('pickup_location')?.value,
1430
1402
  delivery_location: this.addRouteForm.get('delivery_location')?.value,
1431
1403
  route_name: this.addRouteForm.get('route_name')?.value,
1432
- materialLabel: materialDetails?.label,
1433
1404
  unit: unit?.type
1434
1405
  }).then((res) => { this.preventSave = true; });
1435
1406
  });
@@ -1496,11 +1467,11 @@ class AddRouteComponent {
1496
1467
  this.destroyer$.unsubscribe();
1497
1468
  }
1498
1469
  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 });
1499
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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 <mat-form-field>\n <mat-label>Pickup</mat-label>\n <input type=\"text\" \n placeholder=\"Search...\" matInput #filterPickup\n formControlName=\"pickup_location\" \n (mousedown)=\"$event.stopPropagation()\">\n </mat-form-field>\n <mat-error *ngIf=\"addRouteForm.controls['pickup_lat_lng'].touched && addRouteForm.controls['pickup_lat_lng'].hasError('required')\">\n Please select pickup location from the list.\n </mat-error>\n </div>\n <div class=\"col-6\">\n <mat-form-field>\n <mat-label>Delivery</mat-label>\n <input type=\"text\" \n placeholder=\"Search...\"\n matInput #filterDelivery\n formControlName=\"delivery_location\" \n (mousedown)=\"$event.stopPropagation()\">\n </mat-form-field>\n <mat-error *ngIf=\"addRouteForm.controls['delivery_lat_lng'].touched && addRouteForm.controls['delivery_lat_lng'].hasError('required')\">\n Please select delivery location from the list.\n </mat-error>\n </div>\n <div class=\"col-6\">\n <mat-form-field>\n <mat-label>Notes</mat-label>\n <textarea style=\"height: 18px; resize: none;\" matInput name=\"\" id=\"\" cols=\"30\" rows=\"10\" formControlName=\"note\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\"></textarea>\n <mat-error *ngIf=\"addRouteForm.controls['note'].hasError('maxlength')\">\n Notes should be within 2048 characters.\n </mat-error>\n </mat-form-field>\n </div>\n\n <div class=\"col-6 d-flex\">\n <div class=\"inputbox m-0\">\n <mat-form-field>\n <mat-label>Unit type</mat-label>\n <mat-select formControlName=\"unit_id\" (selectionChange)=\"checkAndFetchRouteInformation()\" (mousedown)=\"$event.stopPropagation()\">\n <mat-option *ngFor=\"let unit of unitsList\" [value]=\"unit?.id\"> {{unit?.type}} </mat-option>\n </mat-select>\n <mat-error *ngIf=\"addRouteForm.controls['unit_id'].hasError('required')\">\n Unit is required\n </mat-error>\n </mat-form-field>\n </div>\n\n <div class=\"inputbox m-0\">\n <mat-form-field>\n <mat-label>Material</mat-label>\n <mat-select formControlName=\"materials_id\" (mousedown)=\"$event.stopPropagation()\">\n <mat-option *ngFor=\"let material of materialsList\" [value]=\"material?.sub_material_id\"> {{material?.label}}\n </mat-option>\n </mat-select>\n <mat-error *ngIf=\"addRouteForm.controls['materials_id'].hasError('required')\">\n Material 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;height:370px;width:100%;position:relative;cursor:move}.add_add_route_box .route_form_area{display:flex;flex-wrap:wrap;justify-content:space-between}.add_add_route_box .route_form_area .col-6{width:48%;margin-top: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}}\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: "pipe", type: i2.AsyncPipe, name: "async" }] });
1470
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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 <mat-form-field>\n <mat-label>Pickup</mat-label>\n <input type=\"text\" \n placeholder=\"Search...\" matInput #filterPickup\n formControlName=\"pickup_location\" \n (mousedown)=\"$event.stopPropagation()\">\n </mat-form-field>\n <mat-error *ngIf=\"addRouteForm.controls['pickup_lat_lng'].touched && addRouteForm.controls['pickup_lat_lng'].hasError('required')\">\n Please select pickup location from the list.\n </mat-error>\n </div>\n <div class=\"col-6\">\n <mat-form-field>\n <mat-label>Delivery</mat-label>\n <input type=\"text\" \n placeholder=\"Search...\"\n matInput #filterDelivery\n formControlName=\"delivery_location\" \n (mousedown)=\"$event.stopPropagation()\">\n </mat-form-field>\n <mat-error *ngIf=\"addRouteForm.controls['delivery_lat_lng'].touched && addRouteForm.controls['delivery_lat_lng'].hasError('required')\">\n Please select delivery location from the list.\n </mat-error>\n </div>\n <div class=\"col-6\">\n <mat-form-field>\n <mat-label>Notes</mat-label>\n <textarea style=\"height: 18px; resize: none;\" matInput name=\"\" id=\"\" cols=\"30\" rows=\"10\" formControlName=\"note\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\"></textarea>\n <mat-error *ngIf=\"addRouteForm.controls['note'].hasError('maxlength')\">\n Notes should be within 2048 characters.\n </mat-error>\n </mat-form-field>\n </div>\n\n <div class=\"col-6 d-flex\">\n <div class=\"inputbox m-0\">\n <mat-form-field>\n <mat-label>Unit type</mat-label>\n <mat-select formControlName=\"unit_id\" (selectionChange)=\"checkAndFetchRouteInformation()\" (mousedown)=\"$event.stopPropagation()\">\n <mat-option *ngFor=\"let unit of unitsList\" [value]=\"unit?.id\"> {{unit?.type}} </mat-option>\n </mat-select>\n <mat-error *ngIf=\"addRouteForm.controls['unit_id'].hasError('required')\">\n Unit is required\n </mat-error>\n </mat-form-field>\n </div>\n </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;height:370px;width:100%;position:relative;cursor:move}.add_add_route_box .route_form_area{display:flex;flex-wrap:wrap;justify-content:space-between}.add_add_route_box .route_form_area .col-6{width:48%;margin-top: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}}\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: "pipe", type: i2.AsyncPipe, name: "async" }] });
1500
1471
  }
1501
1472
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: AddRouteComponent, decorators: [{
1502
1473
  type: Component,
1503
- 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 <mat-form-field>\n <mat-label>Pickup</mat-label>\n <input type=\"text\" \n placeholder=\"Search...\" matInput #filterPickup\n formControlName=\"pickup_location\" \n (mousedown)=\"$event.stopPropagation()\">\n </mat-form-field>\n <mat-error *ngIf=\"addRouteForm.controls['pickup_lat_lng'].touched && addRouteForm.controls['pickup_lat_lng'].hasError('required')\">\n Please select pickup location from the list.\n </mat-error>\n </div>\n <div class=\"col-6\">\n <mat-form-field>\n <mat-label>Delivery</mat-label>\n <input type=\"text\" \n placeholder=\"Search...\"\n matInput #filterDelivery\n formControlName=\"delivery_location\" \n (mousedown)=\"$event.stopPropagation()\">\n </mat-form-field>\n <mat-error *ngIf=\"addRouteForm.controls['delivery_lat_lng'].touched && addRouteForm.controls['delivery_lat_lng'].hasError('required')\">\n Please select delivery location from the list.\n </mat-error>\n </div>\n <div class=\"col-6\">\n <mat-form-field>\n <mat-label>Notes</mat-label>\n <textarea style=\"height: 18px; resize: none;\" matInput name=\"\" id=\"\" cols=\"30\" rows=\"10\" formControlName=\"note\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\"></textarea>\n <mat-error *ngIf=\"addRouteForm.controls['note'].hasError('maxlength')\">\n Notes should be within 2048 characters.\n </mat-error>\n </mat-form-field>\n </div>\n\n <div class=\"col-6 d-flex\">\n <div class=\"inputbox m-0\">\n <mat-form-field>\n <mat-label>Unit type</mat-label>\n <mat-select formControlName=\"unit_id\" (selectionChange)=\"checkAndFetchRouteInformation()\" (mousedown)=\"$event.stopPropagation()\">\n <mat-option *ngFor=\"let unit of unitsList\" [value]=\"unit?.id\"> {{unit?.type}} </mat-option>\n </mat-select>\n <mat-error *ngIf=\"addRouteForm.controls['unit_id'].hasError('required')\">\n Unit is required\n </mat-error>\n </mat-form-field>\n </div>\n\n <div class=\"inputbox m-0\">\n <mat-form-field>\n <mat-label>Material</mat-label>\n <mat-select formControlName=\"materials_id\" (mousedown)=\"$event.stopPropagation()\">\n <mat-option *ngFor=\"let material of materialsList\" [value]=\"material?.sub_material_id\"> {{material?.label}}\n </mat-option>\n </mat-select>\n <mat-error *ngIf=\"addRouteForm.controls['materials_id'].hasError('required')\">\n Material 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;height:370px;width:100%;position:relative;cursor:move}.add_add_route_box .route_form_area{display:flex;flex-wrap:wrap;justify-content:space-between}.add_add_route_box .route_form_area .col-6{width:48%;margin-top: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}}\n"] }]
1474
+ 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 <mat-form-field>\n <mat-label>Pickup</mat-label>\n <input type=\"text\" \n placeholder=\"Search...\" matInput #filterPickup\n formControlName=\"pickup_location\" \n (mousedown)=\"$event.stopPropagation()\">\n </mat-form-field>\n <mat-error *ngIf=\"addRouteForm.controls['pickup_lat_lng'].touched && addRouteForm.controls['pickup_lat_lng'].hasError('required')\">\n Please select pickup location from the list.\n </mat-error>\n </div>\n <div class=\"col-6\">\n <mat-form-field>\n <mat-label>Delivery</mat-label>\n <input type=\"text\" \n placeholder=\"Search...\"\n matInput #filterDelivery\n formControlName=\"delivery_location\" \n (mousedown)=\"$event.stopPropagation()\">\n </mat-form-field>\n <mat-error *ngIf=\"addRouteForm.controls['delivery_lat_lng'].touched && addRouteForm.controls['delivery_lat_lng'].hasError('required')\">\n Please select delivery location from the list.\n </mat-error>\n </div>\n <div class=\"col-6\">\n <mat-form-field>\n <mat-label>Notes</mat-label>\n <textarea style=\"height: 18px; resize: none;\" matInput name=\"\" id=\"\" cols=\"30\" rows=\"10\" formControlName=\"note\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\"></textarea>\n <mat-error *ngIf=\"addRouteForm.controls['note'].hasError('maxlength')\">\n Notes should be within 2048 characters.\n </mat-error>\n </mat-form-field>\n </div>\n\n <div class=\"col-6 d-flex\">\n <div class=\"inputbox m-0\">\n <mat-form-field>\n <mat-label>Unit type</mat-label>\n <mat-select formControlName=\"unit_id\" (selectionChange)=\"checkAndFetchRouteInformation()\" (mousedown)=\"$event.stopPropagation()\">\n <mat-option *ngFor=\"let unit of unitsList\" [value]=\"unit?.id\"> {{unit?.type}} </mat-option>\n </mat-select>\n <mat-error *ngIf=\"addRouteForm.controls['unit_id'].hasError('required')\">\n Unit is required\n </mat-error>\n </mat-form-field>\n </div>\n </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;height:370px;width:100%;position:relative;cursor:move}.add_add_route_box .route_form_area{display:flex;flex-wrap:wrap;justify-content:space-between}.add_add_route_box .route_form_area .col-6{width:48%;margin-top: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}}\n"] }]
1504
1475
  }], ctorParameters: () => [{ type: i1.CoolmapService }, { type: i1.UtilsService }, { type: i1$1.MatDialog }, { type: i1.CoolmapConfigModel, decorators: [{
1505
1476
  type: Inject,
1506
1477
  args: ['memberData']