@aggdirect/coolmap 2.4.5 → 2.4.7

package/fesm2015/aggdirect-coolmap.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { Component, ViewChild, EventEmitter, Output, Input, Inject, NgModule } from '@angular/core';
+import { Component, ViewChild, EventEmitter, Output, Inject, Input, NgModule } from '@angular/core';
 import { Subject, takeUntil, startWith, map, fromEvent, distinctUntilChanged, debounceTime } from 'rxjs';
-import * as i1 from '@aggdirect/coolmap-services';
-import { DriversmsCardKey, DriverSmsCardEnum, JobCodeOverviewData, JobCodeOverviewEnum, EstinationData, EstinationEnum } from '@aggdirect/coolmap-services';
+import * as i1 from '@aggdirect/coolmap-services-test';
+import { DriversmsCardKey, DriverSmsCardEnum, JobCodeOverviewData, JobCodeOverviewEnum, EstinationData, EstinationEnum } from '@aggdirect/coolmap-services-test';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3 from '@angular/material/progress-bar';
@@ -119,8 +119,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class ViewRouteListCardComponent {
-    constructor(utils) {
+    constructor(utils, config) {
         this.utils = utils;
+        this.config = config;
     }
     detailsDict(event, route) {
         if (event === 'click')
@@ -131,12 +132,17 @@ class ViewRouteListCardComponent {
         this.utils.routeDetailsUtility.next({ event, route });
     }
 }
-ViewRouteListCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ViewRouteListCardComponent, deps: [{ token: i1.UtilsService }], target: i0.ɵɵFactoryTarget.Component });
-ViewRouteListCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ViewRouteListCardComponent, selector: "app-view-route-list-card", inputs: { route: "route", emitrouteevent: "emitrouteevent" }, ngImport: i0, template: "<div class=\"routebox\">\r\n  <span>\r\n    <mat-icon>directions</mat-icon>\r\n    <h2 [ngClass]=\"{'routeheading': route['route_name']}\">\r\n      {{route['route_name']}}\r\n    </h2>\r\n  </span>\r\n  <h3>{{route['customer_name']}} | {{route['material']}}</h3>\r\n\r\n  <div class=\"pickdropprt\">\r\n    <div class=\"pickprt\">\r\n      <b>\r\n        <h4>{{route['pickup_location']}}</h4>\r\n      </b>\r\n    </div>\r\n    <div class=\"dropprt\">\r\n      <b>\r\n        <h4>{{route['delivery_location']}}</h4>\r\n      </b>\r\n    </div>\r\n  </div>\r\n  <div class=\"infoicon\" (click)=\"detailsDict('click', route)\" (mouseover)=\"detailsDict(true, route)\"\r\n    (mouseleave)=\"detailsDict(false, route)\">\r\n    <img src=\"assets/images/info_icon.png\" [alt]=\"\" />\r\n  </div>\r\n  <div class=\"status routestatus\" [ngClass]=\"route['unit']\">{{route['unit']}}</div>\r\n</div>\r\n\r\n", styles: [".routebox span{display:flex;align-items:center}.routebox span h2{margin-left:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;margin-bottom:5px;margin-top:5px;font-size:.95rem}.routebox h3{font-size:.85rem;color:#767676;font-weight:400;margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:325px;margin-bottom:10px}.routebox .pickdropprt{font-size:.8125rem}.routebox .pickdropprt .pickprt{position:relative;display:flex;align-items:center;padding-bottom:6px}.routebox .pickdropprt .pickprt span{padding-left:0;padding-right:20px;display:block}.routebox .pickdropprt .pickprt b{position:relative;font-weight:400}.routebox .pickdropprt .pickprt b:after{background:black;width:1px;height:100%;left:3px;content:\"\";position:absolute;top:10px}.routebox .pickdropprt .pickprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;max-width:215px}@media (min-width: 1600px){.routebox .pickdropprt .pickprt h4{max-width:265px}}.routebox .pickdropprt .pickprt h4:before{background:black;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.routebox .pickdropprt .dropprt{position:relative;padding-bottom:10px;display:flex;align-items:center}.routebox .pickdropprt .dropprt span{padding-left:0;padding-right:20px;display:block}.routebox .pickdropprt .dropprt b{position:relative;font-weight:400}.routebox .pickdropprt .dropprt b:after{background:black;width:1px;height:12px;left:3px;content:\"\";position:absolute;top:-7px}.routebox .pickdropprt .dropprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;max-width:215px}.routebox .pickdropprt .dropprt h4:before{background:black;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.routebox .infoicon{position:absolute;right:10px;bottom:10px}.routebox .infoicon img{width:20px;height:20px}.routebox .status{position:absolute;border-radius:30px;top:12px;right:40px;font-size:0;color:#fff;text-transform:capitalize;font-weight:500;padding:3px 10px}.routebox .status.routestatus{right:10px;width:20px;height:20px;text-align:center;line-height:20px;padding:0 0 0 1px}.routebox .status.routestatus:first-letter{font-size:.8rem}@media (min-width: 1600px){.routebox .status.routestatus{padding:0;line-height:22px}}.routebox .status.Ton{background:#ff7272}.routebox .status.Load{background:#a3c52e}.routebox .status.Hourly{background:#ae23d1}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+ViewRouteListCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ViewRouteListCardComponent, deps: [{ token: i1.UtilsService }, { token: 'memberData' }], target: i0.ɵɵFactoryTarget.Component });
+ViewRouteListCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ViewRouteListCardComponent, selector: "app-view-route-list-card", inputs: { route: "route", emitrouteevent: "emitrouteevent" }, ngImport: i0, template: "<div class=\"routebox\">\r\n  <span>\r\n    <mat-icon>directions</mat-icon>\r\n    <h2 [ngClass]=\"{'routeheading': route['route_name']}\">\r\n      {{route['route_name']}}\r\n    </h2>\r\n  </span>\r\n  <h3><ng-container *ngIf=\"config?.repository === 'coolmap'\">{{route['customer_name']}} | </ng-container>{{route['material']}}</h3>\r\n\r\n  <div class=\"pickdropprt\">\r\n    <div class=\"pickprt\">\r\n      <b>\r\n        <h4>{{route['pickup_location']}}</h4>\r\n      </b>\r\n    </div>\r\n    <div class=\"dropprt\">\r\n      <b>\r\n        <h4>{{route['delivery_location']}}</h4>\r\n      </b>\r\n    </div>\r\n  </div>\r\n  <div class=\"infoicon\" (click)=\"detailsDict('click', route)\" (mouseover)=\"detailsDict(true, route)\"\r\n    (mouseleave)=\"detailsDict(false, route)\">\r\n    <img src=\"assets/images/info_icon.png\" [alt]=\"\" />\r\n  </div>\r\n  <div class=\"status routestatus\" [ngClass]=\"route['unit']\">{{route['unit']}}</div>\r\n</div>\r\n\r\n", styles: [".routebox span{display:flex;align-items:center}.routebox span h2{margin-left:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;margin-bottom:5px;margin-top:5px;font-size:.95rem}.routebox h3{font-size:.85rem;color:#767676;font-weight:400;margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:325px;margin-bottom:10px}.routebox .pickdropprt{font-size:.8125rem}.routebox .pickdropprt .pickprt{position:relative;display:flex;align-items:center;padding-bottom:6px}.routebox .pickdropprt .pickprt span{padding-left:0;padding-right:20px;display:block}.routebox .pickdropprt .pickprt b{position:relative;font-weight:400}.routebox .pickdropprt .pickprt b:after{background:black;width:1px;height:100%;left:3px;content:\"\";position:absolute;top:10px}.routebox .pickdropprt .pickprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;max-width:215px}@media (min-width: 1600px){.routebox .pickdropprt .pickprt h4{max-width:265px}}.routebox .pickdropprt .pickprt h4:before{background:black;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.routebox .pickdropprt .dropprt{position:relative;padding-bottom:10px;display:flex;align-items:center}.routebox .pickdropprt .dropprt span{padding-left:0;padding-right:20px;display:block}.routebox .pickdropprt .dropprt b{position:relative;font-weight:400}.routebox .pickdropprt .dropprt b:after{background:black;width:1px;height:12px;left:3px;content:\"\";position:absolute;top:-7px}.routebox .pickdropprt .dropprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;max-width:215px}.routebox .pickdropprt .dropprt h4:before{background:black;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.routebox .infoicon{position:absolute;right:10px;bottom:10px}.routebox .infoicon img{width:20px;height:20px}.routebox .status{position:absolute;border-radius:30px;top:12px;right:40px;font-size:0;color:#fff;text-transform:capitalize;font-weight:500;padding:3px 10px}.routebox .status.routestatus{right:10px;width:20px;height:20px;text-align:center;line-height:20px;padding:0 0 0 1px}.routebox .status.routestatus:first-letter{font-size:.8rem}@media (min-width: 1600px){.routebox .status.routestatus{padding:0;line-height:22px}}.routebox .status.Ton{background:#ff7272}.routebox .status.Load{background:#a3c52e}.routebox .status.Hourly{background:#ae23d1}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ViewRouteListCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-view-route-list-card', template: "<div class=\"routebox\">\r\n  <span>\r\n    <mat-icon>directions</mat-icon>\r\n    <h2 [ngClass]=\"{'routeheading': route['route_name']}\">\r\n      {{route['route_name']}}\r\n    </h2>\r\n  </span>\r\n  <h3>{{route['customer_name']}} | {{route['material']}}</h3>\r\n\r\n  <div class=\"pickdropprt\">\r\n    <div class=\"pickprt\">\r\n      <b>\r\n        <h4>{{route['pickup_location']}}</h4>\r\n      </b>\r\n    </div>\r\n    <div class=\"dropprt\">\r\n      <b>\r\n        <h4>{{route['delivery_location']}}</h4>\r\n      </b>\r\n    </div>\r\n  </div>\r\n  <div class=\"infoicon\" (click)=\"detailsDict('click', route)\" (mouseover)=\"detailsDict(true, route)\"\r\n    (mouseleave)=\"detailsDict(false, route)\">\r\n    <img src=\"assets/images/info_icon.png\" [alt]=\"\" />\r\n  </div>\r\n  <div class=\"status routestatus\" [ngClass]=\"route['unit']\">{{route['unit']}}</div>\r\n</div>\r\n\r\n", styles: [".routebox span{display:flex;align-items:center}.routebox span h2{margin-left:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;margin-bottom:5px;margin-top:5px;font-size:.95rem}.routebox h3{font-size:.85rem;color:#767676;font-weight:400;margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:325px;margin-bottom:10px}.routebox .pickdropprt{font-size:.8125rem}.routebox .pickdropprt .pickprt{position:relative;display:flex;align-items:center;padding-bottom:6px}.routebox .pickdropprt .pickprt span{padding-left:0;padding-right:20px;display:block}.routebox .pickdropprt .pickprt b{position:relative;font-weight:400}.routebox .pickdropprt .pickprt b:after{background:black;width:1px;height:100%;left:3px;content:\"\";position:absolute;top:10px}.routebox .pickdropprt .pickprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;max-width:215px}@media (min-width: 1600px){.routebox .pickdropprt .pickprt h4{max-width:265px}}.routebox .pickdropprt .pickprt h4:before{background:black;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.routebox .pickdropprt .dropprt{position:relative;padding-bottom:10px;display:flex;align-items:center}.routebox .pickdropprt .dropprt span{padding-left:0;padding-right:20px;display:block}.routebox .pickdropprt .dropprt b{position:relative;font-weight:400}.routebox .pickdropprt .dropprt b:after{background:black;width:1px;height:12px;left:3px;content:\"\";position:absolute;top:-7px}.routebox .pickdropprt .dropprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;max-width:215px}.routebox .pickdropprt .dropprt h4:before{background:black;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.routebox .infoicon{position:absolute;right:10px;bottom:10px}.routebox .infoicon img{width:20px;height:20px}.routebox .status{position:absolute;border-radius:30px;top:12px;right:40px;font-size:0;color:#fff;text-transform:capitalize;font-weight:500;padding:3px 10px}.routebox .status.routestatus{right:10px;width:20px;height:20px;text-align:center;line-height:20px;padding:0 0 0 1px}.routebox .status.routestatus:first-letter{font-size:.8rem}@media (min-width: 1600px){.routebox .status.routestatus{padding:0;line-height:22px}}.routebox .status.Ton{background:#ff7272}.routebox .status.Load{background:#a3c52e}.routebox .status.Hourly{background:#ae23d1}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.UtilsService }]; }, propDecorators: { route: [{
+            args: [{ selector: 'app-view-route-list-card', template: "<div class=\"routebox\">\r\n  <span>\r\n    <mat-icon>directions</mat-icon>\r\n    <h2 [ngClass]=\"{'routeheading': route['route_name']}\">\r\n      {{route['route_name']}}\r\n    </h2>\r\n  </span>\r\n  <h3><ng-container *ngIf=\"config?.repository === 'coolmap'\">{{route['customer_name']}} | </ng-container>{{route['material']}}</h3>\r\n\r\n  <div class=\"pickdropprt\">\r\n    <div class=\"pickprt\">\r\n      <b>\r\n        <h4>{{route['pickup_location']}}</h4>\r\n      </b>\r\n    </div>\r\n    <div class=\"dropprt\">\r\n      <b>\r\n        <h4>{{route['delivery_location']}}</h4>\r\n      </b>\r\n    </div>\r\n  </div>\r\n  <div class=\"infoicon\" (click)=\"detailsDict('click', route)\" (mouseover)=\"detailsDict(true, route)\"\r\n    (mouseleave)=\"detailsDict(false, route)\">\r\n    <img src=\"assets/images/info_icon.png\" [alt]=\"\" />\r\n  </div>\r\n  <div class=\"status routestatus\" [ngClass]=\"route['unit']\">{{route['unit']}}</div>\r\n</div>\r\n\r\n", styles: [".routebox span{display:flex;align-items:center}.routebox span h2{margin-left:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;margin-bottom:5px;margin-top:5px;font-size:.95rem}.routebox h3{font-size:.85rem;color:#767676;font-weight:400;margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:325px;margin-bottom:10px}.routebox .pickdropprt{font-size:.8125rem}.routebox .pickdropprt .pickprt{position:relative;display:flex;align-items:center;padding-bottom:6px}.routebox .pickdropprt .pickprt span{padding-left:0;padding-right:20px;display:block}.routebox .pickdropprt .pickprt b{position:relative;font-weight:400}.routebox .pickdropprt .pickprt b:after{background:black;width:1px;height:100%;left:3px;content:\"\";position:absolute;top:10px}.routebox .pickdropprt .pickprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;max-width:215px}@media (min-width: 1600px){.routebox .pickdropprt .pickprt h4{max-width:265px}}.routebox .pickdropprt .pickprt h4:before{background:black;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.routebox .pickdropprt .dropprt{position:relative;padding-bottom:10px;display:flex;align-items:center}.routebox .pickdropprt .dropprt span{padding-left:0;padding-right:20px;display:block}.routebox .pickdropprt .dropprt b{position:relative;font-weight:400}.routebox .pickdropprt .dropprt b:after{background:black;width:1px;height:12px;left:3px;content:\"\";position:absolute;top:-7px}.routebox .pickdropprt .dropprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;max-width:215px}.routebox .pickdropprt .dropprt h4:before{background:black;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.routebox .infoicon{position:absolute;right:10px;bottom:10px}.routebox .infoicon img{width:20px;height:20px}.routebox .status{position:absolute;border-radius:30px;top:12px;right:40px;font-size:0;color:#fff;text-transform:capitalize;font-weight:500;padding:3px 10px}.routebox .status.routestatus{right:10px;width:20px;height:20px;text-align:center;line-height:20px;padding:0 0 0 1px}.routebox .status.routestatus:first-letter{font-size:.8rem}@media (min-width: 1600px){.routebox .status.routestatus{padding:0;line-height:22px}}.routebox .status.Ton{background:#ff7272}.routebox .status.Load{background:#a3c52e}.routebox .status.Hourly{background:#ae23d1}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i1.UtilsService }, { type: i1.CoolmapConfigModel, decorators: [{
+                        type: Inject,
+                        args: ['memberData']
+                    }] }];
+    }, propDecorators: { route: [{
                 type: Input
             }], emitrouteevent: [{
                 type: Input
@@ -580,7 +586,7 @@ class AddRouteNavComponent {
         if (this.config.repository === 'customer') {
             this.utils.fetchUnitsList().then((res) => {
                 this.unitList = res;
-                this.utils.fetchMaterialsList().then((res) => {
+                this.utils.fetchMaterialsListForCustomer().then((res) => {
                     this.materialsList = res;
                     this.getRouteListForCustomer();
                 });
@@ -602,7 +608,7 @@ class AddRouteNavComponent {
     getMaterialName(data) {
         let materialName = '';
         this.materialsList.map((res) => {
-            if (res.material_id === data.materials_id) {
+            if (res.sub_material_id === data.materials_id) {
                 materialName = res.material;
             }
         });
@@ -644,10 +650,10 @@ class AddRouteNavComponent {
     }
 }
 AddRouteNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AddRouteNavComponent, deps: [{ token: i1.UtilsService }, { token: 'memberData' }], target: i0.ɵɵFactoryTarget.Component });
-AddRouteNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AddRouteNavComponent, selector: "app-add-route-nav", inputs: { navValue: "navValue", updateRouteList: "updateRouteList", customerRepoDetails: "customerRepoDetails" }, outputs: { changeNav: "changeNav", addemit: "addemit" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"nav_body\">\r\n  <div class=\"logo\">\r\n    <img src=\"assets/images/logo.png\" alt=\"logo\" />\r\n  </div>\r\n  <div class=\"heading m-20\">\r\n    <h1>View Route</h1>\r\n    <button mat-raised-button color=\"primary\" (click)=\"showAddForm()\">\r\n      <mat-icon>add_circle_outline</mat-icon> Add route\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"search-panel\">\r\n    <div class=\"w-100\">\r\n      <form [formGroup]=\"filterForm\">\r\n        <mat-form-field class=\"full-width\" [class.disabled]=\"loaderVal\">\r\n          <input matInput [matChipInputFor]=\"chipList\" formControlName=\"search\" [matAutocomplete]=\"auto\"\r\n            [disabled]=\"loaderVal\" placeholder=\"Search\">\r\n          <mat-icon matSuffix *ngIf=\"!utils.conveySearchIcon(filterForm.value.search)\">search</mat-icon>\r\n          <button mat-button matSuffix mat-icon-button aria-label=\"Clear\" *ngIf=\"utils.conveySearchIcon(filterForm.value.search)\"\r\n            (click)=\"filterForm.reset()\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n          <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n            <mat-option *ngFor=\"let option of filteredOptions | async\" (onSelectionChange)=\"filterSearch($event)\"\r\n              [value]=\"option\">\r\n              {{option.type | titlecase }}: {{option['label']}}\r\n            </mat-option>\r\n          </mat-autocomplete>\r\n        </mat-form-field>\r\n      </form>\r\n      <div class=\"chip-list\">\r\n        <mat-chip-list #chipList aria-label=\"Filter selection\">\r\n          <mat-chip *ngFor=\"let filter of filters\" (removed)=\"removeFromFilter(filter)\">\r\n            {{filter.type | titlecase }}: {{filter.name}}\r\n            <button matChipRemove>\r\n              <mat-icon>cancel</mat-icon>\r\n            </button>\r\n          </mat-chip>\r\n        </mat-chip-list>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <app-route-jobcode-list [type]=\"'addroute'\" [currentNav]=\"navValue\" [searchTerm]=\"filters\" [data]=\"routes\" [loader]=\"loaderVal\" (emitroute)=\"getRoute($event)\"></app-route-jobcode-list>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i9.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i9.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i9.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i9.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i10.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: RouteJobCodeListComponent, selector: "app-route-jobcode-list", inputs: ["loader", "type", "data", "currentNav", "searchTerm", "clearListSeletion"], outputs: ["emitroute", "showAllRoute", "clearJobDetailsFromList"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] });
+AddRouteNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AddRouteNavComponent, selector: "app-add-route-nav", inputs: { navValue: "navValue", updateRouteList: "updateRouteList", customerRepoDetails: "customerRepoDetails" }, outputs: { changeNav: "changeNav", addemit: "addemit" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"nav_body\">\r\n  <div class=\"logo\">\r\n    <img src=\"assets/images/logo.png\" alt=\"logo\" />\r\n  </div>\r\n  <div class=\"heading m-20\">\r\n    <h1>View Route</h1>\r\n    <button mat-raised-button color=\"primary\" (click)=\"showAddForm()\">\r\n      <mat-icon>add_circle_outline</mat-icon> Add route\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"search-panel\">\r\n    <div class=\"w-100\">\r\n      <form [formGroup]=\"filterForm\">\r\n        <mat-form-field class=\"full-width\" [class.disabled]=\"loaderVal\">\r\n          <input matInput [matChipInputFor]=\"chipList\" formControlName=\"search\" [matAutocomplete]=\"auto\"\r\n            [disabled]=\"loaderVal\" placeholder=\"Search\">\r\n          <mat-icon matSuffix *ngIf=\"!utils.conveySearchIcon(filterForm.value.search)\">search</mat-icon>\r\n          <button mat-button matSuffix mat-icon-button aria-label=\"Clear\" *ngIf=\"utils.conveySearchIcon(filterForm.value.search)\"\r\n            (click)=\"filterForm.reset()\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n          <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" class=\"whole_width\">\r\n            <mat-option *ngFor=\"let option of filteredOptions | async\" (onSelectionChange)=\"filterSearch($event)\"\r\n              [value]=\"option\">\r\n              {{option.type | titlecase }}: {{option['label']}}\r\n            </mat-option>\r\n          </mat-autocomplete>\r\n        </mat-form-field>\r\n      </form>\r\n      <div class=\"chip-list\">\r\n        <mat-chip-list #chipList aria-label=\"Filter selection\">\r\n          <mat-chip *ngFor=\"let filter of filters\" (removed)=\"removeFromFilter(filter)\">\r\n            {{filter.type | titlecase }}: {{filter.name}}\r\n            <button matChipRemove>\r\n              <mat-icon>cancel</mat-icon>\r\n            </button>\r\n          </mat-chip>\r\n        </mat-chip-list>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <app-route-jobcode-list [type]=\"'addroute'\" [currentNav]=\"navValue\" [searchTerm]=\"filters\" [data]=\"routes\" [loader]=\"loaderVal\" (emitroute)=\"getRoute($event)\"></app-route-jobcode-list>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i9.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i9.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i9.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i9.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i10.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: RouteJobCodeListComponent, selector: "app-route-jobcode-list", inputs: ["loader", "type", "data", "currentNav", "searchTerm", "clearListSeletion"], outputs: ["emitroute", "showAllRoute", "clearJobDetailsFromList"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AddRouteNavComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-add-route-nav', template: "<div class=\"nav_body\">\r\n  <div class=\"logo\">\r\n    <img src=\"assets/images/logo.png\" alt=\"logo\" />\r\n  </div>\r\n  <div class=\"heading m-20\">\r\n    <h1>View Route</h1>\r\n    <button mat-raised-button color=\"primary\" (click)=\"showAddForm()\">\r\n      <mat-icon>add_circle_outline</mat-icon> Add route\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"search-panel\">\r\n    <div class=\"w-100\">\r\n      <form [formGroup]=\"filterForm\">\r\n        <mat-form-field class=\"full-width\" [class.disabled]=\"loaderVal\">\r\n          <input matInput [matChipInputFor]=\"chipList\" formControlName=\"search\" [matAutocomplete]=\"auto\"\r\n            [disabled]=\"loaderVal\" placeholder=\"Search\">\r\n          <mat-icon matSuffix *ngIf=\"!utils.conveySearchIcon(filterForm.value.search)\">search</mat-icon>\r\n          <button mat-button matSuffix mat-icon-button aria-label=\"Clear\" *ngIf=\"utils.conveySearchIcon(filterForm.value.search)\"\r\n            (click)=\"filterForm.reset()\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n          <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n            <mat-option *ngFor=\"let option of filteredOptions | async\" (onSelectionChange)=\"filterSearch($event)\"\r\n              [value]=\"option\">\r\n              {{option.type | titlecase }}: {{option['label']}}\r\n            </mat-option>\r\n          </mat-autocomplete>\r\n        </mat-form-field>\r\n      </form>\r\n      <div class=\"chip-list\">\r\n        <mat-chip-list #chipList aria-label=\"Filter selection\">\r\n          <mat-chip *ngFor=\"let filter of filters\" (removed)=\"removeFromFilter(filter)\">\r\n            {{filter.type | titlecase }}: {{filter.name}}\r\n            <button matChipRemove>\r\n              <mat-icon>cancel</mat-icon>\r\n            </button>\r\n          </mat-chip>\r\n        </mat-chip-list>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <app-route-jobcode-list [type]=\"'addroute'\" [currentNav]=\"navValue\" [searchTerm]=\"filters\" [data]=\"routes\" [loader]=\"loaderVal\" (emitroute)=\"getRoute($event)\"></app-route-jobcode-list>\r\n</div>\r\n" }]
+            args: [{ selector: 'app-add-route-nav', template: "<div class=\"nav_body\">\r\n  <div class=\"logo\">\r\n    <img src=\"assets/images/logo.png\" alt=\"logo\" />\r\n  </div>\r\n  <div class=\"heading m-20\">\r\n    <h1>View Route</h1>\r\n    <button mat-raised-button color=\"primary\" (click)=\"showAddForm()\">\r\n      <mat-icon>add_circle_outline</mat-icon> Add route\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"search-panel\">\r\n    <div class=\"w-100\">\r\n      <form [formGroup]=\"filterForm\">\r\n        <mat-form-field class=\"full-width\" [class.disabled]=\"loaderVal\">\r\n          <input matInput [matChipInputFor]=\"chipList\" formControlName=\"search\" [matAutocomplete]=\"auto\"\r\n            [disabled]=\"loaderVal\" placeholder=\"Search\">\r\n          <mat-icon matSuffix *ngIf=\"!utils.conveySearchIcon(filterForm.value.search)\">search</mat-icon>\r\n          <button mat-button matSuffix mat-icon-button aria-label=\"Clear\" *ngIf=\"utils.conveySearchIcon(filterForm.value.search)\"\r\n            (click)=\"filterForm.reset()\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n          <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" class=\"whole_width\">\r\n            <mat-option *ngFor=\"let option of filteredOptions | async\" (onSelectionChange)=\"filterSearch($event)\"\r\n              [value]=\"option\">\r\n              {{option.type | titlecase }}: {{option['label']}}\r\n            </mat-option>\r\n          </mat-autocomplete>\r\n        </mat-form-field>\r\n      </form>\r\n      <div class=\"chip-list\">\r\n        <mat-chip-list #chipList aria-label=\"Filter selection\">\r\n          <mat-chip *ngFor=\"let filter of filters\" (removed)=\"removeFromFilter(filter)\">\r\n            {{filter.type | titlecase }}: {{filter.name}}\r\n            <button matChipRemove>\r\n              <mat-icon>cancel</mat-icon>\r\n            </button>\r\n          </mat-chip>\r\n        </mat-chip-list>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <app-route-jobcode-list [type]=\"'addroute'\" [currentNav]=\"navValue\" [searchTerm]=\"filters\" [data]=\"routes\" [loader]=\"loaderVal\" (emitroute)=\"getRoute($event)\"></app-route-jobcode-list>\r\n</div>\r\n" }]
         }], ctorParameters: function () {
         return [{ type: i1.UtilsService }, { type: i1.CoolmapConfigModel, decorators: [{
                         type: Inject,
@@ -752,10 +758,10 @@ class JobCodeNavComponent {
     }
 }
 JobCodeNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JobCodeNavComponent, deps: [{ token: i1.UtilsService }, { token: 'memberData' }], target: i0.ɵɵFactoryTarget.Component });
-JobCodeNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: JobCodeNavComponent, selector: "app-job-code-nav", inputs: { customerRepoDetails: "customerRepoDetails" }, outputs: { jobemit: "jobemit", clearJobDetails: "clearJobDetails" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"nav_body\">\r\n  <div class=\"search-panel\">\r\n    <div class=\"datepicker\">\r\n      <mat-form-field>\r\n        <mat-label>Choose a date</mat-label>\r\n        <input readonly matInput (click)=\"picker.open()\" [disabled]=\"loaderVal\"  [(ngModel)]=\"dateValue\" [matDatepicker]=\"picker\" (dateChange)=\"getDate($event)\">\r\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n        <mat-datepicker #picker></mat-datepicker>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"search\">\r\n    <form [formGroup]=\"filterForm\">\r\n      <mat-form-field class=\"full-width\" [class.disabled]=\"loaderVal\">\r\n        <input matInput [matChipInputFor]=\"chipList\" formControlName=\"search\" [matAutocomplete]=\"auto\"\r\n          [disabled]=\"loaderVal\" placeholder=\"Search\">\r\n          <mat-icon matSuffix *ngIf=\"!utils.conveySearchIcon(filterForm.value.search)\">search</mat-icon>\r\n          <button mat-button matSuffix mat-icon-button aria-label=\"Clear\" *ngIf=\"utils.conveySearchIcon(filterForm.value.search)\" (click)=\"filterForm.reset()\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n          <mat-option *ngFor=\"let option of filteredOptions | async\" (onSelectionChange)=\"filterSearch($event)\"\r\n            [value]=\"option\">\r\n            {{option.type | titlecase }}: {{option['label']}}\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </form>\r\n\r\n    </div>\r\n\r\n    <div class=\"chip-list\">\r\n      <mat-chip-list #chipList aria-label=\"Filter selection\">\r\n        <mat-chip *ngFor=\"let filter of filters\" (removed)=\"removeFromFilter(filter)\">\r\n          {{filter.type | titlecase }}: {{filter.name}}\r\n          <button matChipRemove>\r\n            <mat-icon>cancel</mat-icon>\r\n          </button>\r\n        </mat-chip>\r\n      </mat-chip-list>\r\n    </div>\r\n  </div>\r\n  <app-route-jobcode-list [type]=\"'jobcode'\" [searchTerm]=\"filters\" [data]=\"listData\" [loader]=\"loaderVal\" (clearJobDetailsFromList)=\"clearJobDetails.emit(true)\" (showAllRoute)=\"filters = []; clearJobDetails.emit(true)\" (emitroute)=\"getRoute($event)\"></app-route-jobcode-list>\r\n</div>\r\n", styles: [".search-panel .datepicker,.search-panel .search{width:47%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i9.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i9.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i9.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i9.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i10$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i10.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: RouteJobCodeListComponent, selector: "app-route-jobcode-list", inputs: ["loader", "type", "data", "currentNav", "searchTerm", "clearListSeletion"], outputs: ["emitroute", "showAllRoute", "clearJobDetailsFromList"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] });
+JobCodeNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: JobCodeNavComponent, selector: "app-job-code-nav", inputs: { customerRepoDetails: "customerRepoDetails" }, outputs: { jobemit: "jobemit", clearJobDetails: "clearJobDetails" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"nav_body\">\r\n  <div class=\"search-panel\">\r\n    <div class=\"datepicker\">\r\n      <mat-form-field>\r\n        <mat-label>Choose a date</mat-label>\r\n        <input readonly matInput (click)=\"picker.open()\" [disabled]=\"loaderVal\"  [(ngModel)]=\"dateValue\" [matDatepicker]=\"picker\" (dateChange)=\"getDate($event)\">\r\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n        <mat-datepicker #picker></mat-datepicker>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"search\">\r\n    <form [formGroup]=\"filterForm\">\r\n      <mat-form-field class=\"full-width\" [class.disabled]=\"loaderVal\">\r\n        <input matInput [matChipInputFor]=\"chipList\" formControlName=\"search\" [matAutocomplete]=\"auto\"\r\n          [disabled]=\"loaderVal\" placeholder=\"Search\">\r\n          <mat-icon matSuffix *ngIf=\"!utils.conveySearchIcon(filterForm.value.search)\">search</mat-icon>\r\n          <button mat-button matSuffix mat-icon-button aria-label=\"Clear\" *ngIf=\"utils.conveySearchIcon(filterForm.value.search)\" (click)=\"filterForm.reset()\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" class=\"whole_width\">\r\n          <mat-option *ngFor=\"let option of filteredOptions | async\" (onSelectionChange)=\"filterSearch($event)\"\r\n            [value]=\"option\">\r\n            {{option.type | titlecase }}: {{option['label']}}\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </form>\r\n\r\n    </div>\r\n\r\n    <div class=\"chip-list\">\r\n      <mat-chip-list #chipList aria-label=\"Filter selection\">\r\n        <mat-chip *ngFor=\"let filter of filters\" (removed)=\"removeFromFilter(filter)\">\r\n          {{filter.type | titlecase }}: {{filter.name}}\r\n          <button matChipRemove>\r\n            <mat-icon>cancel</mat-icon>\r\n          </button>\r\n        </mat-chip>\r\n      </mat-chip-list>\r\n    </div>\r\n  </div>\r\n  <app-route-jobcode-list [type]=\"'jobcode'\" [searchTerm]=\"filters\" [data]=\"listData\" [loader]=\"loaderVal\" (clearJobDetailsFromList)=\"clearJobDetails.emit(true)\" (showAllRoute)=\"filters = []; clearJobDetails.emit(true)\" (emitroute)=\"getRoute($event)\"></app-route-jobcode-list>\r\n</div>\r\n", styles: [".search-panel .datepicker,.search-panel .search{width:47%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i9.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i9.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i9.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i9.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i10$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i10.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: RouteJobCodeListComponent, selector: "app-route-jobcode-list", inputs: ["loader", "type", "data", "currentNav", "searchTerm", "clearListSeletion"], outputs: ["emitroute", "showAllRoute", "clearJobDetailsFromList"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JobCodeNavComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-job-code-nav', template: "<div class=\"nav_body\">\r\n  <div class=\"search-panel\">\r\n    <div class=\"datepicker\">\r\n      <mat-form-field>\r\n        <mat-label>Choose a date</mat-label>\r\n        <input readonly matInput (click)=\"picker.open()\" [disabled]=\"loaderVal\"  [(ngModel)]=\"dateValue\" [matDatepicker]=\"picker\" (dateChange)=\"getDate($event)\">\r\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n        <mat-datepicker #picker></mat-datepicker>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"search\">\r\n    <form [formGroup]=\"filterForm\">\r\n      <mat-form-field class=\"full-width\" [class.disabled]=\"loaderVal\">\r\n        <input matInput [matChipInputFor]=\"chipList\" formControlName=\"search\" [matAutocomplete]=\"auto\"\r\n          [disabled]=\"loaderVal\" placeholder=\"Search\">\r\n          <mat-icon matSuffix *ngIf=\"!utils.conveySearchIcon(filterForm.value.search)\">search</mat-icon>\r\n          <button mat-button matSuffix mat-icon-button aria-label=\"Clear\" *ngIf=\"utils.conveySearchIcon(filterForm.value.search)\" (click)=\"filterForm.reset()\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n          <mat-option *ngFor=\"let option of filteredOptions | async\" (onSelectionChange)=\"filterSearch($event)\"\r\n            [value]=\"option\">\r\n            {{option.type | titlecase }}: {{option['label']}}\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </form>\r\n\r\n    </div>\r\n\r\n    <div class=\"chip-list\">\r\n      <mat-chip-list #chipList aria-label=\"Filter selection\">\r\n        <mat-chip *ngFor=\"let filter of filters\" (removed)=\"removeFromFilter(filter)\">\r\n          {{filter.type | titlecase }}: {{filter.name}}\r\n          <button matChipRemove>\r\n            <mat-icon>cancel</mat-icon>\r\n          </button>\r\n        </mat-chip>\r\n      </mat-chip-list>\r\n    </div>\r\n  </div>\r\n  <app-route-jobcode-list [type]=\"'jobcode'\" [searchTerm]=\"filters\" [data]=\"listData\" [loader]=\"loaderVal\" (clearJobDetailsFromList)=\"clearJobDetails.emit(true)\" (showAllRoute)=\"filters = []; clearJobDetails.emit(true)\" (emitroute)=\"getRoute($event)\"></app-route-jobcode-list>\r\n</div>\r\n", styles: [".search-panel .datepicker,.search-panel .search{width:47%}\n"] }]
+            args: [{ selector: 'app-job-code-nav', template: "<div class=\"nav_body\">\r\n  <div class=\"search-panel\">\r\n    <div class=\"datepicker\">\r\n      <mat-form-field>\r\n        <mat-label>Choose a date</mat-label>\r\n        <input readonly matInput (click)=\"picker.open()\" [disabled]=\"loaderVal\"  [(ngModel)]=\"dateValue\" [matDatepicker]=\"picker\" (dateChange)=\"getDate($event)\">\r\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n        <mat-datepicker #picker></mat-datepicker>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"search\">\r\n    <form [formGroup]=\"filterForm\">\r\n      <mat-form-field class=\"full-width\" [class.disabled]=\"loaderVal\">\r\n        <input matInput [matChipInputFor]=\"chipList\" formControlName=\"search\" [matAutocomplete]=\"auto\"\r\n          [disabled]=\"loaderVal\" placeholder=\"Search\">\r\n          <mat-icon matSuffix *ngIf=\"!utils.conveySearchIcon(filterForm.value.search)\">search</mat-icon>\r\n          <button mat-button matSuffix mat-icon-button aria-label=\"Clear\" *ngIf=\"utils.conveySearchIcon(filterForm.value.search)\" (click)=\"filterForm.reset()\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" class=\"whole_width\">\r\n          <mat-option *ngFor=\"let option of filteredOptions | async\" (onSelectionChange)=\"filterSearch($event)\"\r\n            [value]=\"option\">\r\n            {{option.type | titlecase }}: {{option['label']}}\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </form>\r\n\r\n    </div>\r\n\r\n    <div class=\"chip-list\">\r\n      <mat-chip-list #chipList aria-label=\"Filter selection\">\r\n        <mat-chip *ngFor=\"let filter of filters\" (removed)=\"removeFromFilter(filter)\">\r\n          {{filter.type | titlecase }}: {{filter.name}}\r\n          <button matChipRemove>\r\n            <mat-icon>cancel</mat-icon>\r\n          </button>\r\n        </mat-chip>\r\n      </mat-chip-list>\r\n    </div>\r\n  </div>\r\n  <app-route-jobcode-list [type]=\"'jobcode'\" [searchTerm]=\"filters\" [data]=\"listData\" [loader]=\"loaderVal\" (clearJobDetailsFromList)=\"clearJobDetails.emit(true)\" (showAllRoute)=\"filters = []; clearJobDetails.emit(true)\" (emitroute)=\"getRoute($event)\"></app-route-jobcode-list>\r\n</div>\r\n", styles: [".search-panel .datepicker,.search-panel .search{width:47%}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i1.UtilsService }, { type: i1.CoolmapConfigModel, decorators: [{
                         type: Inject,
@@ -922,10 +928,11 @@ class JobCodeComponent {
     }
     ngOnInit() { this.checkAndCallRouteList(); }
     checkAndCallRouteList() {
+        this.utils.clearOptions();
         if (this.config.repository === 'customer') {
             this.utils.fetchUnitsList().then((res) => {
                 this.unitList = res;
-                this.utils.fetchMaterialsList().then((res) => {
+                this.utils.fetchMaterialsListForCustomer().then((res) => {
                     this.materialsList = res;
                     this.getRouteListForCustomer();
                 });
@@ -947,7 +954,7 @@ class JobCodeComponent {
     getMaterialName(data) {
         let materialName = '';
         this.materialsList.map((res) => {
-            if (res.material_id === data.materials_id) {
+            if (res.sub_material_id === data.materials_id) {
                 materialName = res.material;
             }
         });
@@ -959,7 +966,7 @@ class JobCodeComponent {
                 this.routes = res.data;
                 this.masterRoutes = res.data;
                 this.preventListUpdate = false;
-                this.utils.clearOptions();
+                this.routes.forEach((ele) => { this.utils.makeOptions(ele); });
             }
         });
     }
@@ -971,14 +978,12 @@ class JobCodeComponent {
             if (res) {
                 this.routes = res.data;
                 this.preventListUpdate = false;
-                this.utils.clearOptions();
                 this.routes.map((ele) => {
                     ele.unit = this.getUnitName(ele);
                     ele.material = this.getMaterialName(ele);
                     this.utils.makeOptions(ele);
                 });
                 this.masterRoutes = this.routes;
-                this.routes.forEach((ele) => { this.utils.makeOptions(ele); });
             }
         });
     }
@@ -1052,10 +1057,10 @@ class JobCodeComponent {
     }
 }
 JobCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JobCodeComponent, deps: [{ token: i1.UtilsService }, { token: i1.CoolmapService }, { token: 'memberData' }], target: i0.ɵɵFactoryTarget.Component });
-JobCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: JobCodeComponent, selector: "app-job-code", inputs: { jobdetail: "jobdetail", customerRepoDetails: "customerRepoDetails" }, outputs: { clearJobDetails: "clearJobDetails", openShareRoute: "openShareRoute" }, ngImport: i0, template: "<div class=\"jobcode_detailprt\" (click)=\"isOverlapRouteSection = false\"  *ngIf=\"jobdetail\" [ngClass]=\"{'overlap': !isOverlapRouteSection}\" cdkDrag>\r\n  <span class=\"close\"><mat-icon (click)=\"clearJob()\">clear</mat-icon></span>\r\n  <div class=\"job_details_area\">\r\n    <div class=\"detailnameprt\">\r\n      <app-jobcode-status [jobValue]=\"jobdetail\"></app-jobcode-status>\r\n    </div>\r\n    <app-jobcode-overview [jobValue]=\"jobdetail\"></app-jobcode-overview>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"route_listprt\" (click)=\"isOverlapRouteSection = true\" [ngClass]=\"{ 'show': isVisible, 'overlap': isOverlapRouteSection}\">\r\n  <div class=\"listing_toggle\" (click)=\"toggleSidemenu()\">\r\n    <img src=\"assets/images/route.svg\" alt=\"\" />\r\n  </div>\r\n\r\n  <div class=\"listing_box\">\r\n    <div class=\"closebtn\" (click)=\"toggleSidemenu()\">\r\n      <mat-icon>clear</mat-icon>\r\n    </div>\r\n\r\n    <div class=\"btnprt\">\r\n      <h2> List of Routes </h2>\r\n      <button (click)=\"masterToggle()\">{{routes && routes.length > 0 && routes.length === selectedRoute.selected.length ? 'Uncheck' : 'Check'}} All</button>\r\n    </div>\r\n\r\n    <app-job-route-list [routes]=\"routes\" [masterRoutes]=\"masterRoutes\" [selectedRoute]=\"selectedRoute\" (changeRoutes)=\"routes = $event\" (changeSelectedRoute)=\"selectedRoute = $event\"></app-job-route-list>\r\n\r\n    <perfect-scrollbar>\r\n      <ul *ngIf=\"routes['length'] > 0\">\r\n        <li *ngFor=\"let list of routes\">\r\n          <div class=\"iconprt\">\r\n            <span>\r\n              <input type=\"checkbox\" [checked]=\"selectedRoute.isSelected(list)\"\r\n                (change)=\"$event ? selectRoute(list) : null\" /><label>&nbsp;</label>\r\n              <div class=\"border\"></div>\r\n            </span>\r\n            <div class=\"statusunit\" [ngClass]=\"list['unit']\">{{list['unit']}}</div>\r\n            <div class=\"infoicon\">\r\n              <img (mouseenter)=\"togglerouteDetails(true, list)\" (mouseout)=\"togglerouteDetails(false, list, true)\"\r\n              (click)=\"togglerouteDetails('click', list)\" src=\"assets/images/info_icon.png\" [alt]=\"\" />\r\n            </div>\r\n            <div class=\"infoicon\" *ngIf=\"config.repository === 'customer'\">\r\n              <img src=\"assets/images/share_icon.png\" (click)=\"openShareRouteModal(list)\" [alt]=\"\" />\r\n            </div>\r\n          </div>\r\n          <div class=\"pickprtbox\">\r\n            <h2> {{list['route_name']}} </h2>\r\n            <h3>{{list['customer_name']}} | {{list['material']}}</h3>\r\n            <div class=\"pickdropprt\">\r\n              <div class=\"pickprt\">\r\n                <b>\r\n                  <h4>{{list['pickup_location']}}</h4>\r\n                </b>\r\n              </div>\r\n              <div class=\"dropprt\">\r\n                <b>\r\n                  <h4>{{list['delivery_location']}}</h4>\r\n                </b>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </li>\r\n      </ul>\r\n      <p style=\"color: #fff;\" *ngIf=\"routes.length === 0\">No Route found</p>\r\n    </perfect-scrollbar>\r\n  </div>\r\n\r\n  <div class=\"route_detail\" *ngIf=\"detailsCardEnable\">\r\n    <div class=\"closebtnroutedetail\" (click)=\"detailsCardEnable = false; preventMouseout = false\">\r\n      <mat-icon>clear</mat-icon>\r\n    </div>\r\n    <lib-route-info-card [propData]=\"{className: 'listRoutecard', repository: config['repository']}\"  [popupData]=\"routeCardDetail\"></lib-route-info-card>\r\n    <div class=\"createTxt\">\r\n      <small>\r\n        Created by {{routeCardDetail?.created_by_name}} on {{routeCardDetail?.created_at}}\r\n      </small>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".jobcode_detailprt{position:absolute;left:300px;bottom:10px;background:white;padding:15px 20px;border-radius:20px;max-width:350px;z-index:999;box-shadow:0 0 5px #0000001a}.jobcode_detailprt .close{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#fff;position:absolute;top:-11px;left:-11px}@keyframes autoslide{to{transform:translate(calc(90vw - 100%))}0%{transform:translate(0)}}.route_listprt .listing_toggle{background:white;border-radius:15px;padding:5px;position:absolute;right:10px;top:20px;cursor:pointer}.route_listprt .listing_toggle img{width:28px}.route_listprt .listing_box{background:#282828;height:100vh;position:fixed;right:0;top:0;z-index:1111;box-shadow:-3px 0 5px #ffffff14;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;width:0;border-radius:40px 0 0;opacity:0}.route_listprt .listing_box .closebtn{display:none}.route_listprt .listing_box ul{padding:0 20px 0 0}.route_listprt .listing_box ul li{background:#4a4a4a;padding:10px 15px;border-radius:15px;display:flex;margin-bottom:10px;position:relative;height:inherit}@media (min-width: 1600px){.route_listprt .listing_box ul li{padding:6px 15px;margin-bottom:5px}}.route_listprt .listing_box ul li .iconprt{display:flex;flex-direction:column}.route_listprt .listing_box ul li .iconprt span{display:flex;align-items:center;margin-bottom:32px}.route_listprt .listing_box ul li .iconprt span input[type=checkbox]{width:100%;height:100%;margin-right:10px;opacity:0;position:absolute;left:0;margin-left:0;top:0;z-index:3;cursor:pointer}.route_listprt .listing_box ul li .iconprt span input[type=checkbox]:checked+label{background:url(../../../assets/images/fill-check.png) 16px 15px no-repeat}.route_listprt .listing_box ul li .iconprt span label{background:url(../../../assets/images/blank-check.png) 16px 15px no-repeat;width:100%;position:relative;z-index:2;font-size:12px;color:#878787;height:100%;position:absolute;top:0;left:0}.route_listprt .listing_box ul li .iconprt span .border{position:absolute;width:100%;height:100%;left:0;right:0;top:0;border-radius:15px}.route_listprt .listing_box ul li .iconprt span input:checked~.border{border-left:1px solid white;border-right:1px solid white;border-top:1px solid white;border-bottom:1px solid white}.route_listprt .listing_box ul li .iconprt span h2{margin-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;padding-left:16px;font-size:.9rem;margin-bottom:0;font-weight:400;margin-top:0}.route_listprt .listing_box ul li .iconprt .statusunit{border-radius:30px;font-size:0;color:#fff;text-transform:capitalize;font-weight:500;width:20px;height:20px;text-align:center;line-height:20px;margin-bottom:7px}.route_listprt .listing_box ul li .iconprt .statusunit:first-letter{font-size:.8rem}.route_listprt .listing_box ul li .iconprt .statusunit.Ton{background:#ff7272}.route_listprt .listing_box ul li .iconprt .statusunit.Load{background:#a3c52e}.route_listprt .listing_box ul li .iconprt .statusunit.Hourly{background:#ae23d1}@media (min-width: 1600px){.route_listprt .listing_box ul li .iconprt .statusunit{line-height:21px}}.route_listprt .listing_box ul li .iconprt .infoicon{z-index:5;cursor:pointer}.route_listprt .listing_box ul li .iconprt .infoicon img{width:20px;height:20px}.route_listprt .listing_box ul li .pickprtbox{margin-left:10px}.route_listprt .listing_box ul li .pickprtbox h2{font-size:.9rem;margin:3px 0 5px;white-space:nowrap;text-overflow:ellipsis;max-width:195px;overflow:hidden}.route_listprt .listing_box ul li h3{font-size:.8rem;color:#979797;font-weight:600;margin-top:0;white-space:nowrap;text-overflow:ellipsis;max-width:195px;overflow:hidden;margin-bottom:5px}.route_listprt .listing_box ul li .pickdropprt{font-size:.75rem}.route_listprt .listing_box ul li .pickdropprt .pickprt{position:relative;display:flex;align-items:center;padding-bottom:10px}.route_listprt .listing_box ul li .pickdropprt .pickprt span{padding-left:0;padding-right:20px;display:block}.route_listprt .listing_box ul li .pickdropprt .pickprt b{position:relative}.route_listprt .listing_box ul li .pickdropprt .pickprt b:after{background:#bcbcbc;width:1px;height:100%;left:3px;content:\"\";position:absolute;top:10px}.route_listprt .listing_box ul li .pickdropprt .pickprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;color:#bcbcbc;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.route_listprt .listing_box ul li .pickdropprt .pickprt h4:before{background:#bcbcbc;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.route_listprt .listing_box ul li .pickdropprt .dropprt{position:relative;padding-bottom:10px;display:flex;align-items:center}.route_listprt .listing_box ul li .pickdropprt .dropprt span{padding-left:0;padding-right:20px;display:block}.route_listprt .listing_box ul li .pickdropprt .dropprt b{position:relative}.route_listprt .listing_box ul li .pickdropprt .dropprt b:after{background:#bcbcbc;width:1px;height:12px;left:3px;content:\"\";position:absolute;top:-7px}.route_listprt .listing_box ul li .pickdropprt .dropprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;color:#bcbcbc;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.route_listprt .listing_box ul li .pickdropprt .dropprt h4:before{background:#bcbcbc;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.route_listprt.show .listing_box{width:300px;max-width:300px;flex:0 0 350px;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;padding:40px 0 40px 20px;opacity:1}.route_listprt.show .listing_box h2{color:#fff;white-space:nowrap}.route_listprt.show .listing_box .closebtn{position:absolute;left:-33px;top:50px;background:#282828;color:#fff;padding:8px;border-top-left-radius:15px;border-bottom-left-radius:15px;cursor:pointer;box-shadow:-4px 2px 5px #ffffff14;display:block}.btnprt{display:flex;justify-content:space-between;align-items:center;padding-right:20px}.btnprt h2{margin:0}.btnprt button{font-size:15px;padding:8px 20px;background-color:#326ad3;color:#fff;border:none;border-radius:10px;box-shadow:none;outline:none}.hidden{display:none}.route_detail{background:#282828;position:absolute;width:260px;top:50%;transform:translateY(-50%);right:310px;border-radius:20px;padding:10px;box-shadow:0 0 5px #ffffff36}.createTxt small{color:#fff;font-size:.7rem}.closebtnroutedetail{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#f5f5f5;position:absolute;top:-7px;left:-11px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.PerfectScrollbarComponent, selector: "perfect-scrollbar", inputs: ["disabled", "usePSClass", "autoPropagation", "scrollIndicators", "config"], outputs: ["psScrollY", "psScrollX", "psScrollUp", "psScrollDown", "psScrollLeft", "psScrollRight", "psYReachEnd", "psYReachStart", "psXReachEnd", "psXReachStart"], exportAs: ["ngxPerfectScrollbar"] }, { kind: "component", type: JobRouteListComponent, selector: "app-job-route-list", inputs: ["routes", "selectedRoute", "masterRoutes"], outputs: ["changeNav", "changeRoutes", "changeSelectedRoute"] }, { kind: "component", type: JobcodeStatusComponent, selector: "app-jobcode-status", inputs: ["jobValue"] }, { kind: "component", type: JobcodeOverviewComponent, selector: "app-jobcode-overview", inputs: ["jobValue"] }, { kind: "component", type: RouteInfoCardComponent, selector: "lib-route-info-card", inputs: ["popupData", "propData"] }] });
+JobCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: JobCodeComponent, selector: "app-job-code", inputs: { jobdetail: "jobdetail", customerRepoDetails: "customerRepoDetails" }, outputs: { clearJobDetails: "clearJobDetails", openShareRoute: "openShareRoute" }, ngImport: i0, template: "<div class=\"jobcode_detailprt\" (click)=\"isOverlapRouteSection = false\"  *ngIf=\"jobdetail\" [ngClass]=\"{'overlap': !isOverlapRouteSection}\" cdkDrag>\r\n  <span class=\"close\"><mat-icon (click)=\"clearJob()\">clear</mat-icon></span>\r\n  <div class=\"job_details_area\">\r\n    <div class=\"detailnameprt\">\r\n      <app-jobcode-status [jobValue]=\"jobdetail\"></app-jobcode-status>\r\n    </div>\r\n    <app-jobcode-overview [jobValue]=\"jobdetail\"></app-jobcode-overview>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"route_listprt\" (click)=\"isOverlapRouteSection = true\" [ngClass]=\"{ 'show': isVisible, 'overlap': isOverlapRouteSection}\">\r\n  <div class=\"listing_toggle\" (click)=\"toggleSidemenu()\">\r\n    <img src=\"assets/images/route.svg\" alt=\"\" />\r\n  </div>\r\n\r\n  <div class=\"listing_box\">\r\n    <div class=\"closebtn\" (click)=\"toggleSidemenu()\">\r\n      <mat-icon>clear</mat-icon>\r\n    </div>\r\n\r\n    <div class=\"btnprt\">\r\n      <h2> List of Routes </h2>\r\n      <button (click)=\"masterToggle()\">{{routes && routes.length > 0 && routes.length === selectedRoute.selected.length ? 'Uncheck' : 'Check'}} All</button>\r\n    </div>\r\n\r\n    <app-job-route-list [routes]=\"routes\" [masterRoutes]=\"masterRoutes\" [selectedRoute]=\"selectedRoute\" (changeRoutes)=\"routes = $event\" (changeSelectedRoute)=\"selectedRoute = $event\"></app-job-route-list>\r\n\r\n    <perfect-scrollbar>\r\n      <ul *ngIf=\"routes['length'] > 0\">\r\n        <li *ngFor=\"let list of routes\">\r\n          <div class=\"iconprt\">\r\n            <span>\r\n              <input type=\"checkbox\" [checked]=\"selectedRoute.isSelected(list)\"\r\n                (change)=\"$event ? selectRoute(list) : null\" /><label>&nbsp;</label>\r\n              <div class=\"border\"></div>\r\n            </span>\r\n            <div class=\"statusunit\" [ngClass]=\"list['unit']\">{{list['unit']}}</div>\r\n            <div class=\"infoicon\">\r\n              <img (mouseenter)=\"togglerouteDetails(true, list)\" (mouseout)=\"togglerouteDetails(false, list, true)\"\r\n              (click)=\"togglerouteDetails('click', list)\" src=\"assets/images/info_icon.png\" [alt]=\"\" />\r\n            </div>\r\n            <div class=\"infoicon\" *ngIf=\"config.repository === 'customer'\">\r\n              <img src=\"assets/images/share_icon.png\" (click)=\"openShareRouteModal(list)\" [alt]=\"\" />\r\n            </div>\r\n          </div>\r\n          <div class=\"pickprtbox\">\r\n            <h2> {{list['route_name']}} </h2>\r\n            <h3><ng-container *ngIf=\"config?.repository === 'coolmap'\">{{list['customer_name']}} | </ng-container>{{list['material']}}</h3>\r\n            <div class=\"pickdropprt\">\r\n              <div class=\"pickprt\">\r\n                <b>\r\n                  <h4>{{list['pickup_location']}}</h4>\r\n                </b>\r\n              </div>\r\n              <div class=\"dropprt\">\r\n                <b>\r\n                  <h4>{{list['delivery_location']}}</h4>\r\n                </b>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </li>\r\n      </ul>\r\n      <p style=\"color: #fff;\" *ngIf=\"routes.length === 0\">No Route found</p>\r\n    </perfect-scrollbar>\r\n  </div>\r\n\r\n  <div class=\"route_detail\" *ngIf=\"detailsCardEnable\">\r\n    <div class=\"closebtnroutedetail\" (click)=\"detailsCardEnable = false; preventMouseout = false\">\r\n      <mat-icon>clear</mat-icon>\r\n    </div>\r\n    <lib-route-info-card [propData]=\"{className: 'listRoutecard', repository: config['repository']}\"  [popupData]=\"routeCardDetail\"></lib-route-info-card>\r\n    <div class=\"createTxt\">\r\n      <small>\r\n        Created by {{routeCardDetail?.created_by_name}} on {{routeCardDetail?.created_at}}\r\n      </small>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".jobcode_detailprt{position:absolute;left:300px;bottom:10px;background:white;padding:15px 20px;border-radius:20px;max-width:350px;z-index:999;box-shadow:0 0 5px #0000001a}.jobcode_detailprt .close{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#fff;position:absolute;top:-11px;left:-11px}@keyframes autoslide{to{transform:translate(calc(90vw - 100%))}0%{transform:translate(0)}}.route_listprt .listing_toggle{background:white;border-radius:15px;padding:5px;position:absolute;right:10px;top:20px;cursor:pointer}.route_listprt .listing_toggle img{width:28px}.route_listprt .listing_box{background:#282828;height:100vh;position:fixed;right:0;top:0;z-index:1111;box-shadow:-3px 0 5px #ffffff14;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;width:0;border-radius:40px 0 0;opacity:0}.route_listprt .listing_box .closebtn{display:none}.route_listprt .listing_box ul{padding:0 20px 0 0}.route_listprt .listing_box ul li{background:#4a4a4a;padding:10px 15px;border-radius:15px;display:flex;margin-bottom:10px;position:relative;height:inherit}@media (min-width: 1600px){.route_listprt .listing_box ul li{padding:6px 15px;margin-bottom:5px}}.route_listprt .listing_box ul li .iconprt{display:flex;flex-direction:column}.route_listprt .listing_box ul li .iconprt span{display:flex;align-items:center;margin-bottom:32px}.route_listprt .listing_box ul li .iconprt span input[type=checkbox]{width:100%;height:100%;margin-right:10px;opacity:0;position:absolute;left:0;margin-left:0;top:0;z-index:3;cursor:pointer}.route_listprt .listing_box ul li .iconprt span input[type=checkbox]:checked+label{background:url(../../../assets/images/fill-check.png) 16px 15px no-repeat}.route_listprt .listing_box ul li .iconprt span label{background:url(../../../assets/images/blank-check.png) 16px 15px no-repeat;width:100%;position:relative;z-index:2;font-size:12px;color:#878787;height:100%;position:absolute;top:0;left:0}.route_listprt .listing_box ul li .iconprt span .border{position:absolute;width:100%;height:100%;left:0;right:0;top:0;border-radius:15px}.route_listprt .listing_box ul li .iconprt span input:checked~.border{border-left:1px solid white;border-right:1px solid white;border-top:1px solid white;border-bottom:1px solid white}.route_listprt .listing_box ul li .iconprt span h2{margin-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;padding-left:16px;font-size:.9rem;margin-bottom:0;font-weight:400;margin-top:0}.route_listprt .listing_box ul li .iconprt .statusunit{border-radius:30px;font-size:0;color:#fff;text-transform:capitalize;font-weight:500;width:20px;height:20px;text-align:center;line-height:20px;margin-bottom:7px}.route_listprt .listing_box ul li .iconprt .statusunit:first-letter{font-size:.8rem}.route_listprt .listing_box ul li .iconprt .statusunit.Ton{background:#ff7272}.route_listprt .listing_box ul li .iconprt .statusunit.Load{background:#a3c52e}.route_listprt .listing_box ul li .iconprt .statusunit.Hourly{background:#ae23d1}@media (min-width: 1600px){.route_listprt .listing_box ul li .iconprt .statusunit{line-height:21px}}.route_listprt .listing_box ul li .iconprt .infoicon{z-index:5;cursor:pointer}.route_listprt .listing_box ul li .iconprt .infoicon img{width:20px;height:20px}.route_listprt .listing_box ul li .pickprtbox{margin-left:10px}.route_listprt .listing_box ul li .pickprtbox h2{font-size:.9rem;margin:3px 0 5px;white-space:nowrap;text-overflow:ellipsis;max-width:195px;overflow:hidden}.route_listprt .listing_box ul li h3{font-size:.8rem;color:#979797;font-weight:600;margin-top:0;white-space:nowrap;text-overflow:ellipsis;max-width:195px;overflow:hidden;margin-bottom:5px}.route_listprt .listing_box ul li .pickdropprt{font-size:.75rem}.route_listprt .listing_box ul li .pickdropprt .pickprt{position:relative;display:flex;align-items:center;padding-bottom:10px}.route_listprt .listing_box ul li .pickdropprt .pickprt span{padding-left:0;padding-right:20px;display:block}.route_listprt .listing_box ul li .pickdropprt .pickprt b{position:relative}.route_listprt .listing_box ul li .pickdropprt .pickprt b:after{background:#bcbcbc;width:1px;height:100%;left:3px;content:\"\";position:absolute;top:10px}.route_listprt .listing_box ul li .pickdropprt .pickprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;color:#bcbcbc;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.route_listprt .listing_box ul li .pickdropprt .pickprt h4:before{background:#bcbcbc;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.route_listprt .listing_box ul li .pickdropprt .dropprt{position:relative;padding-bottom:10px;display:flex;align-items:center}.route_listprt .listing_box ul li .pickdropprt .dropprt span{padding-left:0;padding-right:20px;display:block}.route_listprt .listing_box ul li .pickdropprt .dropprt b{position:relative}.route_listprt .listing_box ul li .pickdropprt .dropprt b:after{background:#bcbcbc;width:1px;height:12px;left:3px;content:\"\";position:absolute;top:-7px}.route_listprt .listing_box ul li .pickdropprt .dropprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;color:#bcbcbc;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.route_listprt .listing_box ul li .pickdropprt .dropprt h4:before{background:#bcbcbc;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.route_listprt.show .listing_box{width:300px;max-width:300px;flex:0 0 350px;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;padding:40px 0 40px 20px;opacity:1}.route_listprt.show .listing_box h2{color:#fff;white-space:nowrap}.route_listprt.show .listing_box .closebtn{position:absolute;left:-33px;top:50px;background:#282828;color:#fff;padding:8px;border-top-left-radius:15px;border-bottom-left-radius:15px;cursor:pointer;box-shadow:-4px 2px 5px #ffffff14;display:block}.btnprt{display:flex;justify-content:space-between;align-items:center;padding-right:20px}.btnprt h2{margin:0}.btnprt button{font-size:15px;padding:8px 20px;background-color:#326ad3;color:#fff;border:none;border-radius:10px;box-shadow:none;outline:none}.hidden{display:none}.route_detail{background:#282828;position:absolute;width:260px;top:50%;transform:translateY(-50%);right:310px;border-radius:20px;padding:10px;box-shadow:0 0 5px #ffffff36}.createTxt small{color:#fff;font-size:.7rem}.closebtnroutedetail{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#f5f5f5;position:absolute;top:-7px;left:-11px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.PerfectScrollbarComponent, selector: "perfect-scrollbar", inputs: ["disabled", "usePSClass", "autoPropagation", "scrollIndicators", "config"], outputs: ["psScrollY", "psScrollX", "psScrollUp", "psScrollDown", "psScrollLeft", "psScrollRight", "psYReachEnd", "psYReachStart", "psXReachEnd", "psXReachStart"], exportAs: ["ngxPerfectScrollbar"] }, { kind: "component", type: JobRouteListComponent, selector: "app-job-route-list", inputs: ["routes", "selectedRoute", "masterRoutes"], outputs: ["changeNav", "changeRoutes", "changeSelectedRoute"] }, { kind: "component", type: JobcodeStatusComponent, selector: "app-jobcode-status", inputs: ["jobValue"] }, { kind: "component", type: JobcodeOverviewComponent, selector: "app-jobcode-overview", inputs: ["jobValue"] }, { kind: "component", type: RouteInfoCardComponent, selector: "lib-route-info-card", inputs: ["popupData", "propData"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JobCodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-job-code', template: "<div class=\"jobcode_detailprt\" (click)=\"isOverlapRouteSection = false\"  *ngIf=\"jobdetail\" [ngClass]=\"{'overlap': !isOverlapRouteSection}\" cdkDrag>\r\n  <span class=\"close\"><mat-icon (click)=\"clearJob()\">clear</mat-icon></span>\r\n  <div class=\"job_details_area\">\r\n    <div class=\"detailnameprt\">\r\n      <app-jobcode-status [jobValue]=\"jobdetail\"></app-jobcode-status>\r\n    </div>\r\n    <app-jobcode-overview [jobValue]=\"jobdetail\"></app-jobcode-overview>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"route_listprt\" (click)=\"isOverlapRouteSection = true\" [ngClass]=\"{ 'show': isVisible, 'overlap': isOverlapRouteSection}\">\r\n  <div class=\"listing_toggle\" (click)=\"toggleSidemenu()\">\r\n    <img src=\"assets/images/route.svg\" alt=\"\" />\r\n  </div>\r\n\r\n  <div class=\"listing_box\">\r\n    <div class=\"closebtn\" (click)=\"toggleSidemenu()\">\r\n      <mat-icon>clear</mat-icon>\r\n    </div>\r\n\r\n    <div class=\"btnprt\">\r\n      <h2> List of Routes </h2>\r\n      <button (click)=\"masterToggle()\">{{routes && routes.length > 0 && routes.length === selectedRoute.selected.length ? 'Uncheck' : 'Check'}} All</button>\r\n    </div>\r\n\r\n    <app-job-route-list [routes]=\"routes\" [masterRoutes]=\"masterRoutes\" [selectedRoute]=\"selectedRoute\" (changeRoutes)=\"routes = $event\" (changeSelectedRoute)=\"selectedRoute = $event\"></app-job-route-list>\r\n\r\n    <perfect-scrollbar>\r\n      <ul *ngIf=\"routes['length'] > 0\">\r\n        <li *ngFor=\"let list of routes\">\r\n          <div class=\"iconprt\">\r\n            <span>\r\n              <input type=\"checkbox\" [checked]=\"selectedRoute.isSelected(list)\"\r\n                (change)=\"$event ? selectRoute(list) : null\" /><label>&nbsp;</label>\r\n              <div class=\"border\"></div>\r\n            </span>\r\n            <div class=\"statusunit\" [ngClass]=\"list['unit']\">{{list['unit']}}</div>\r\n            <div class=\"infoicon\">\r\n              <img (mouseenter)=\"togglerouteDetails(true, list)\" (mouseout)=\"togglerouteDetails(false, list, true)\"\r\n              (click)=\"togglerouteDetails('click', list)\" src=\"assets/images/info_icon.png\" [alt]=\"\" />\r\n            </div>\r\n            <div class=\"infoicon\" *ngIf=\"config.repository === 'customer'\">\r\n              <img src=\"assets/images/share_icon.png\" (click)=\"openShareRouteModal(list)\" [alt]=\"\" />\r\n            </div>\r\n          </div>\r\n          <div class=\"pickprtbox\">\r\n            <h2> {{list['route_name']}} </h2>\r\n            <h3>{{list['customer_name']}} | {{list['material']}}</h3>\r\n            <div class=\"pickdropprt\">\r\n              <div class=\"pickprt\">\r\n                <b>\r\n                  <h4>{{list['pickup_location']}}</h4>\r\n                </b>\r\n              </div>\r\n              <div class=\"dropprt\">\r\n                <b>\r\n                  <h4>{{list['delivery_location']}}</h4>\r\n                </b>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </li>\r\n      </ul>\r\n      <p style=\"color: #fff;\" *ngIf=\"routes.length === 0\">No Route found</p>\r\n    </perfect-scrollbar>\r\n  </div>\r\n\r\n  <div class=\"route_detail\" *ngIf=\"detailsCardEnable\">\r\n    <div class=\"closebtnroutedetail\" (click)=\"detailsCardEnable = false; preventMouseout = false\">\r\n      <mat-icon>clear</mat-icon>\r\n    </div>\r\n    <lib-route-info-card [propData]=\"{className: 'listRoutecard', repository: config['repository']}\"  [popupData]=\"routeCardDetail\"></lib-route-info-card>\r\n    <div class=\"createTxt\">\r\n      <small>\r\n        Created by {{routeCardDetail?.created_by_name}} on {{routeCardDetail?.created_at}}\r\n      </small>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".jobcode_detailprt{position:absolute;left:300px;bottom:10px;background:white;padding:15px 20px;border-radius:20px;max-width:350px;z-index:999;box-shadow:0 0 5px #0000001a}.jobcode_detailprt .close{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#fff;position:absolute;top:-11px;left:-11px}@keyframes autoslide{to{transform:translate(calc(90vw - 100%))}0%{transform:translate(0)}}.route_listprt .listing_toggle{background:white;border-radius:15px;padding:5px;position:absolute;right:10px;top:20px;cursor:pointer}.route_listprt .listing_toggle img{width:28px}.route_listprt .listing_box{background:#282828;height:100vh;position:fixed;right:0;top:0;z-index:1111;box-shadow:-3px 0 5px #ffffff14;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;width:0;border-radius:40px 0 0;opacity:0}.route_listprt .listing_box .closebtn{display:none}.route_listprt .listing_box ul{padding:0 20px 0 0}.route_listprt .listing_box ul li{background:#4a4a4a;padding:10px 15px;border-radius:15px;display:flex;margin-bottom:10px;position:relative;height:inherit}@media (min-width: 1600px){.route_listprt .listing_box ul li{padding:6px 15px;margin-bottom:5px}}.route_listprt .listing_box ul li .iconprt{display:flex;flex-direction:column}.route_listprt .listing_box ul li .iconprt span{display:flex;align-items:center;margin-bottom:32px}.route_listprt .listing_box ul li .iconprt span input[type=checkbox]{width:100%;height:100%;margin-right:10px;opacity:0;position:absolute;left:0;margin-left:0;top:0;z-index:3;cursor:pointer}.route_listprt .listing_box ul li .iconprt span input[type=checkbox]:checked+label{background:url(../../../assets/images/fill-check.png) 16px 15px no-repeat}.route_listprt .listing_box ul li .iconprt span label{background:url(../../../assets/images/blank-check.png) 16px 15px no-repeat;width:100%;position:relative;z-index:2;font-size:12px;color:#878787;height:100%;position:absolute;top:0;left:0}.route_listprt .listing_box ul li .iconprt span .border{position:absolute;width:100%;height:100%;left:0;right:0;top:0;border-radius:15px}.route_listprt .listing_box ul li .iconprt span input:checked~.border{border-left:1px solid white;border-right:1px solid white;border-top:1px solid white;border-bottom:1px solid white}.route_listprt .listing_box ul li .iconprt span h2{margin-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;padding-left:16px;font-size:.9rem;margin-bottom:0;font-weight:400;margin-top:0}.route_listprt .listing_box ul li .iconprt .statusunit{border-radius:30px;font-size:0;color:#fff;text-transform:capitalize;font-weight:500;width:20px;height:20px;text-align:center;line-height:20px;margin-bottom:7px}.route_listprt .listing_box ul li .iconprt .statusunit:first-letter{font-size:.8rem}.route_listprt .listing_box ul li .iconprt .statusunit.Ton{background:#ff7272}.route_listprt .listing_box ul li .iconprt .statusunit.Load{background:#a3c52e}.route_listprt .listing_box ul li .iconprt .statusunit.Hourly{background:#ae23d1}@media (min-width: 1600px){.route_listprt .listing_box ul li .iconprt .statusunit{line-height:21px}}.route_listprt .listing_box ul li .iconprt .infoicon{z-index:5;cursor:pointer}.route_listprt .listing_box ul li .iconprt .infoicon img{width:20px;height:20px}.route_listprt .listing_box ul li .pickprtbox{margin-left:10px}.route_listprt .listing_box ul li .pickprtbox h2{font-size:.9rem;margin:3px 0 5px;white-space:nowrap;text-overflow:ellipsis;max-width:195px;overflow:hidden}.route_listprt .listing_box ul li h3{font-size:.8rem;color:#979797;font-weight:600;margin-top:0;white-space:nowrap;text-overflow:ellipsis;max-width:195px;overflow:hidden;margin-bottom:5px}.route_listprt .listing_box ul li .pickdropprt{font-size:.75rem}.route_listprt .listing_box ul li .pickdropprt .pickprt{position:relative;display:flex;align-items:center;padding-bottom:10px}.route_listprt .listing_box ul li .pickdropprt .pickprt span{padding-left:0;padding-right:20px;display:block}.route_listprt .listing_box ul li .pickdropprt .pickprt b{position:relative}.route_listprt .listing_box ul li .pickdropprt .pickprt b:after{background:#bcbcbc;width:1px;height:100%;left:3px;content:\"\";position:absolute;top:10px}.route_listprt .listing_box ul li .pickdropprt .pickprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;color:#bcbcbc;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.route_listprt .listing_box ul li .pickdropprt .pickprt h4:before{background:#bcbcbc;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.route_listprt .listing_box ul li .pickdropprt .dropprt{position:relative;padding-bottom:10px;display:flex;align-items:center}.route_listprt .listing_box ul li .pickdropprt .dropprt span{padding-left:0;padding-right:20px;display:block}.route_listprt .listing_box ul li .pickdropprt .dropprt b{position:relative}.route_listprt .listing_box ul li .pickdropprt .dropprt b:after{background:#bcbcbc;width:1px;height:12px;left:3px;content:\"\";position:absolute;top:-7px}.route_listprt .listing_box ul li .pickdropprt .dropprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;color:#bcbcbc;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.route_listprt .listing_box ul li .pickdropprt .dropprt h4:before{background:#bcbcbc;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.route_listprt.show .listing_box{width:300px;max-width:300px;flex:0 0 350px;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;padding:40px 0 40px 20px;opacity:1}.route_listprt.show .listing_box h2{color:#fff;white-space:nowrap}.route_listprt.show .listing_box .closebtn{position:absolute;left:-33px;top:50px;background:#282828;color:#fff;padding:8px;border-top-left-radius:15px;border-bottom-left-radius:15px;cursor:pointer;box-shadow:-4px 2px 5px #ffffff14;display:block}.btnprt{display:flex;justify-content:space-between;align-items:center;padding-right:20px}.btnprt h2{margin:0}.btnprt button{font-size:15px;padding:8px 20px;background-color:#326ad3;color:#fff;border:none;border-radius:10px;box-shadow:none;outline:none}.hidden{display:none}.route_detail{background:#282828;position:absolute;width:260px;top:50%;transform:translateY(-50%);right:310px;border-radius:20px;padding:10px;box-shadow:0 0 5px #ffffff36}.createTxt small{color:#fff;font-size:.7rem}.closebtnroutedetail{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#f5f5f5;position:absolute;top:-7px;left:-11px}\n"] }]
+            args: [{ selector: 'app-job-code', template: "<div class=\"jobcode_detailprt\" (click)=\"isOverlapRouteSection = false\"  *ngIf=\"jobdetail\" [ngClass]=\"{'overlap': !isOverlapRouteSection}\" cdkDrag>\r\n  <span class=\"close\"><mat-icon (click)=\"clearJob()\">clear</mat-icon></span>\r\n  <div class=\"job_details_area\">\r\n    <div class=\"detailnameprt\">\r\n      <app-jobcode-status [jobValue]=\"jobdetail\"></app-jobcode-status>\r\n    </div>\r\n    <app-jobcode-overview [jobValue]=\"jobdetail\"></app-jobcode-overview>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"route_listprt\" (click)=\"isOverlapRouteSection = true\" [ngClass]=\"{ 'show': isVisible, 'overlap': isOverlapRouteSection}\">\r\n  <div class=\"listing_toggle\" (click)=\"toggleSidemenu()\">\r\n    <img src=\"assets/images/route.svg\" alt=\"\" />\r\n  </div>\r\n\r\n  <div class=\"listing_box\">\r\n    <div class=\"closebtn\" (click)=\"toggleSidemenu()\">\r\n      <mat-icon>clear</mat-icon>\r\n    </div>\r\n\r\n    <div class=\"btnprt\">\r\n      <h2> List of Routes </h2>\r\n      <button (click)=\"masterToggle()\">{{routes && routes.length > 0 && routes.length === selectedRoute.selected.length ? 'Uncheck' : 'Check'}} All</button>\r\n    </div>\r\n\r\n    <app-job-route-list [routes]=\"routes\" [masterRoutes]=\"masterRoutes\" [selectedRoute]=\"selectedRoute\" (changeRoutes)=\"routes = $event\" (changeSelectedRoute)=\"selectedRoute = $event\"></app-job-route-list>\r\n\r\n    <perfect-scrollbar>\r\n      <ul *ngIf=\"routes['length'] > 0\">\r\n        <li *ngFor=\"let list of routes\">\r\n          <div class=\"iconprt\">\r\n            <span>\r\n              <input type=\"checkbox\" [checked]=\"selectedRoute.isSelected(list)\"\r\n                (change)=\"$event ? selectRoute(list) : null\" /><label>&nbsp;</label>\r\n              <div class=\"border\"></div>\r\n            </span>\r\n            <div class=\"statusunit\" [ngClass]=\"list['unit']\">{{list['unit']}}</div>\r\n            <div class=\"infoicon\">\r\n              <img (mouseenter)=\"togglerouteDetails(true, list)\" (mouseout)=\"togglerouteDetails(false, list, true)\"\r\n              (click)=\"togglerouteDetails('click', list)\" src=\"assets/images/info_icon.png\" [alt]=\"\" />\r\n            </div>\r\n            <div class=\"infoicon\" *ngIf=\"config.repository === 'customer'\">\r\n              <img src=\"assets/images/share_icon.png\" (click)=\"openShareRouteModal(list)\" [alt]=\"\" />\r\n            </div>\r\n          </div>\r\n          <div class=\"pickprtbox\">\r\n            <h2> {{list['route_name']}} </h2>\r\n            <h3><ng-container *ngIf=\"config?.repository === 'coolmap'\">{{list['customer_name']}} | </ng-container>{{list['material']}}</h3>\r\n            <div class=\"pickdropprt\">\r\n              <div class=\"pickprt\">\r\n                <b>\r\n                  <h4>{{list['pickup_location']}}</h4>\r\n                </b>\r\n              </div>\r\n              <div class=\"dropprt\">\r\n                <b>\r\n                  <h4>{{list['delivery_location']}}</h4>\r\n                </b>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </li>\r\n      </ul>\r\n      <p style=\"color: #fff;\" *ngIf=\"routes.length === 0\">No Route found</p>\r\n    </perfect-scrollbar>\r\n  </div>\r\n\r\n  <div class=\"route_detail\" *ngIf=\"detailsCardEnable\">\r\n    <div class=\"closebtnroutedetail\" (click)=\"detailsCardEnable = false; preventMouseout = false\">\r\n      <mat-icon>clear</mat-icon>\r\n    </div>\r\n    <lib-route-info-card [propData]=\"{className: 'listRoutecard', repository: config['repository']}\"  [popupData]=\"routeCardDetail\"></lib-route-info-card>\r\n    <div class=\"createTxt\">\r\n      <small>\r\n        Created by {{routeCardDetail?.created_by_name}} on {{routeCardDetail?.created_at}}\r\n      </small>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".jobcode_detailprt{position:absolute;left:300px;bottom:10px;background:white;padding:15px 20px;border-radius:20px;max-width:350px;z-index:999;box-shadow:0 0 5px #0000001a}.jobcode_detailprt .close{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#fff;position:absolute;top:-11px;left:-11px}@keyframes autoslide{to{transform:translate(calc(90vw - 100%))}0%{transform:translate(0)}}.route_listprt .listing_toggle{background:white;border-radius:15px;padding:5px;position:absolute;right:10px;top:20px;cursor:pointer}.route_listprt .listing_toggle img{width:28px}.route_listprt .listing_box{background:#282828;height:100vh;position:fixed;right:0;top:0;z-index:1111;box-shadow:-3px 0 5px #ffffff14;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;width:0;border-radius:40px 0 0;opacity:0}.route_listprt .listing_box .closebtn{display:none}.route_listprt .listing_box ul{padding:0 20px 0 0}.route_listprt .listing_box ul li{background:#4a4a4a;padding:10px 15px;border-radius:15px;display:flex;margin-bottom:10px;position:relative;height:inherit}@media (min-width: 1600px){.route_listprt .listing_box ul li{padding:6px 15px;margin-bottom:5px}}.route_listprt .listing_box ul li .iconprt{display:flex;flex-direction:column}.route_listprt .listing_box ul li .iconprt span{display:flex;align-items:center;margin-bottom:32px}.route_listprt .listing_box ul li .iconprt span input[type=checkbox]{width:100%;height:100%;margin-right:10px;opacity:0;position:absolute;left:0;margin-left:0;top:0;z-index:3;cursor:pointer}.route_listprt .listing_box ul li .iconprt span input[type=checkbox]:checked+label{background:url(../../../assets/images/fill-check.png) 16px 15px no-repeat}.route_listprt .listing_box ul li .iconprt span label{background:url(../../../assets/images/blank-check.png) 16px 15px no-repeat;width:100%;position:relative;z-index:2;font-size:12px;color:#878787;height:100%;position:absolute;top:0;left:0}.route_listprt .listing_box ul li .iconprt span .border{position:absolute;width:100%;height:100%;left:0;right:0;top:0;border-radius:15px}.route_listprt .listing_box ul li .iconprt span input:checked~.border{border-left:1px solid white;border-right:1px solid white;border-top:1px solid white;border-bottom:1px solid white}.route_listprt .listing_box ul li .iconprt span h2{margin-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;padding-left:16px;font-size:.9rem;margin-bottom:0;font-weight:400;margin-top:0}.route_listprt .listing_box ul li .iconprt .statusunit{border-radius:30px;font-size:0;color:#fff;text-transform:capitalize;font-weight:500;width:20px;height:20px;text-align:center;line-height:20px;margin-bottom:7px}.route_listprt .listing_box ul li .iconprt .statusunit:first-letter{font-size:.8rem}.route_listprt .listing_box ul li .iconprt .statusunit.Ton{background:#ff7272}.route_listprt .listing_box ul li .iconprt .statusunit.Load{background:#a3c52e}.route_listprt .listing_box ul li .iconprt .statusunit.Hourly{background:#ae23d1}@media (min-width: 1600px){.route_listprt .listing_box ul li .iconprt .statusunit{line-height:21px}}.route_listprt .listing_box ul li .iconprt .infoicon{z-index:5;cursor:pointer}.route_listprt .listing_box ul li .iconprt .infoicon img{width:20px;height:20px}.route_listprt .listing_box ul li .pickprtbox{margin-left:10px}.route_listprt .listing_box ul li .pickprtbox h2{font-size:.9rem;margin:3px 0 5px;white-space:nowrap;text-overflow:ellipsis;max-width:195px;overflow:hidden}.route_listprt .listing_box ul li h3{font-size:.8rem;color:#979797;font-weight:600;margin-top:0;white-space:nowrap;text-overflow:ellipsis;max-width:195px;overflow:hidden;margin-bottom:5px}.route_listprt .listing_box ul li .pickdropprt{font-size:.75rem}.route_listprt .listing_box ul li .pickdropprt .pickprt{position:relative;display:flex;align-items:center;padding-bottom:10px}.route_listprt .listing_box ul li .pickdropprt .pickprt span{padding-left:0;padding-right:20px;display:block}.route_listprt .listing_box ul li .pickdropprt .pickprt b{position:relative}.route_listprt .listing_box ul li .pickdropprt .pickprt b:after{background:#bcbcbc;width:1px;height:100%;left:3px;content:\"\";position:absolute;top:10px}.route_listprt .listing_box ul li .pickdropprt .pickprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;color:#bcbcbc;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.route_listprt .listing_box ul li .pickdropprt .pickprt h4:before{background:#bcbcbc;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.route_listprt .listing_box ul li .pickdropprt .dropprt{position:relative;padding-bottom:10px;display:flex;align-items:center}.route_listprt .listing_box ul li .pickdropprt .dropprt span{padding-left:0;padding-right:20px;display:block}.route_listprt .listing_box ul li .pickdropprt .dropprt b{position:relative}.route_listprt .listing_box ul li .pickdropprt .dropprt b:after{background:#bcbcbc;width:1px;height:12px;left:3px;content:\"\";position:absolute;top:-7px}.route_listprt .listing_box ul li .pickdropprt .dropprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;color:#bcbcbc;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.route_listprt .listing_box ul li .pickdropprt .dropprt h4:before{background:#bcbcbc;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.route_listprt.show .listing_box{width:300px;max-width:300px;flex:0 0 350px;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;padding:40px 0 40px 20px;opacity:1}.route_listprt.show .listing_box h2{color:#fff;white-space:nowrap}.route_listprt.show .listing_box .closebtn{position:absolute;left:-33px;top:50px;background:#282828;color:#fff;padding:8px;border-top-left-radius:15px;border-bottom-left-radius:15px;cursor:pointer;box-shadow:-4px 2px 5px #ffffff14;display:block}.btnprt{display:flex;justify-content:space-between;align-items:center;padding-right:20px}.btnprt h2{margin:0}.btnprt button{font-size:15px;padding:8px 20px;background-color:#326ad3;color:#fff;border:none;border-radius:10px;box-shadow:none;outline:none}.hidden{display:none}.route_detail{background:#282828;position:absolute;width:260px;top:50%;transform:translateY(-50%);right:310px;border-radius:20px;padding:10px;box-shadow:0 0 5px #ffffff36}.createTxt small{color:#fff;font-size:.7rem}.closebtnroutedetail{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#f5f5f5;position:absolute;top:-7px;left:-11px}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i1.UtilsService }, { type: i1.CoolmapService }, { type: i1.CoolmapConfigModel, decorators: [{
                         type: Inject,
@@ -1133,9 +1138,16 @@ class AddRouteComponent {
         this.enablePopUp = false;
         this.prevantPopupClose = false;
         this.enableForm = false;
-        this.utils.fetchMaterialsList().then((res) => {
-            this.materialsList = res;
-        });
+        if (this.config.repository === 'customer') {
+            this.utils.fetchMaterialsListForCustomer().then((res) => {
+                this.materialsList = res;
+            });
+        }
+        else {
+            this.utils.fetchMaterialsList().then((res) => {
+                this.materialsList = res;
+            });
+        }
         this.utils.fetchUnitsList().then((res) => {
             this.unitsList = res;
         });
@@ -1332,7 +1344,7 @@ class AddRouteComponent {
                     this.coolMapService.removeRouteAndMarker(1).then(() => {
                         var _a, _b, _c;
                         const unit = this.unitsList.find((x) => x.id === this.addRouteForm.value.unit_id);
-                        const materialDetails = this.materialsList.find((x) => x.material_id === this.addRouteForm.value.materials_id);
+                        const materialDetails = this.materialsList.find((x) => x.sub_material_id === this.addRouteForm.value.materials_id);
                         this.coolMapService.loadMapProperty(element, 1, unit === null || unit === void 0 ? void 0 : unit.type, {
                             pickup_location: (_a = this.addRouteForm.get('pickup_location')) === null || _a === void 0 ? void 0 : _a.value,
                             delivery_location: (_b = this.addRouteForm.get('delivery_location')) === null || _b === void 0 ? void 0 : _b.value,
@@ -1406,10 +1418,10 @@ class AddRouteComponent {
     }
 }
 AddRouteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AddRouteComponent, deps: [{ token: i1.CoolmapService }, { token: i1.UtilsService }, { token: i1$1.MatDialog }, { token: 'memberData' }], target: i0.ɵɵFactoryTarget.Component });
-AddRouteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AddRouteComponent, selector: "app-add-route", inputs: { routeData: "routeData", 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\">\r\n  <div class=\"routedetailbox\" *ngIf=\"enablePopUp\">\r\n    <div class=\"closebtnroutedetail\">\r\n      <mat-icon (click)=\"prevantPopupClose = false; enablePopUp = false;\">clear</mat-icon>\r\n    </div>\r\n      <lib-route-info-card [propData]=\"{className: 'routeCard', repository: config['repository']}\" [popupData]=\"popupDetails\"></lib-route-info-card>\r\n    <div class=\"createTxt\">\r\n      <small>\r\n        Created by {{popupDetails['created_by_name']}} on {{popupDetails['created_at']}}\r\n      </small>\r\n      <button class=\"editbtn\" (click)=\"editEvent()\">Edit</button>\r\n    </div>\r\n  </div>\r\n  <div class=\"add_add_route_box\" cdkDrag [style.visibility]=\"!enableForm ? 'hidden' : 'visible'\">\r\n    <div class=\"topheadingprt\">\r\n      <h2> {{routeId? 'EDIT' : 'ADD'}} ROUTE </h2>\r\n      <div class=\"buttonprt\">\r\n        <button *ngIf=\"routeId\" class=\"delbtn\" (click)=\"openDialog()\">Delete</button>\r\n        <button mat-raised-button type=\"submit\" class=\"closebtn\" (click)=\"changeNav.next('Addroute')\">Close</button>\r\n      </div>\r\n    </div>\r\n    <form [formGroup]=\"addRouteForm\">\r\n      <div class=\"route_form_area\">\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Route Name</mat-label>\r\n            <input matInput formControlName=\"route_name\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-error *ngIf=\"addRouteForm.controls['route_name'].hasError('required')\">\r\n              Route Name is required\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <input type=\"text\" placeholder=\"Customer Name\" matInput formControlName=\"customer_name\" [matAutocomplete]=\"auto\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n              <mat-option *ngFor=\"let customer of customersList$ | async\" [value]=\"customer['customer_name']\">\r\n                {{customer['customer_name']}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n            <mat-error *ngIf=\"addRouteForm.controls['customer_name'].hasError('required')\">\r\n              Customer name is required.\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Pickup</mat-label>\r\n            <input type=\"text\" placeholder=\"Search...\" matInput #filterPickup [matAutocomplete]=\"pickupAutocomplete\"\r\n              formControlName=\"pickup_location\" (mousedown)=\"$event.stopPropagation()\">\r\n\r\n            <mat-autocomplete #pickupAutocomplete=\"matAutocomplete\">\r\n              <mat-option (click)=\"selectedLongLat('pickup', option)\" *ngFor=\"let option of pickupOptions\"\r\n                [value]=\"option?.place_name\">\r\n                {{option?.place_name}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n          <mat-error *ngIf=\"addRouteForm.controls['pickup_lat_lng'].touched && addRouteForm.controls['pickup_lat_lng'].hasError('required')\">\r\n            Please select pickup location from the list.\r\n          </mat-error>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Delivery</mat-label>\r\n            <input type=\"text\" placeholder=\"Search...\" matInput #filterDelivery [matAutocomplete]=\"deliveryAutocomplete\"\r\n              formControlName=\"delivery_location\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-autocomplete #deliveryAutocomplete=\"matAutocomplete\">\r\n              <mat-option (click)=\"selectedLongLat('delivery', option)\" *ngFor=\"let option of deliveryOptions\"\r\n                [value]=\"option?.place_name\">\r\n                {{option?.place_name}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n          <mat-error *ngIf=\"addRouteForm.controls['delivery_lat_lng'].touched && addRouteForm.controls['delivery_lat_lng'].hasError('required')\">\r\n            Please select delivery location from the list.\r\n          </mat-error>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Notes</mat-label>\r\n            <textarea style=\"height: 18px; resize: none;\" matInput name=\"\" id=\"\" cols=\"30\" rows=\"10\" formControlName=\"note\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\"></textarea>\r\n            <mat-error *ngIf=\"addRouteForm.controls['note'].hasError('maxlength')\">\r\n              Notes should be within 2048 characters.\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <div class=\"col-6 d-flex\">\r\n          <div class=\"inputbox m-0\">\r\n            <mat-form-field>\r\n              <mat-label>Unit type</mat-label>\r\n              <mat-select formControlName=\"unit_id\" (selectionChange)=\"checkAndFetchRouteInformation()\" (mousedown)=\"$event.stopPropagation()\">\r\n                <mat-option *ngFor=\"let unit of unitsList\" [value]=\"unit?.id\"> {{unit?.type}} </mat-option>\r\n              </mat-select>\r\n              <mat-error *ngIf=\"addRouteForm.controls['unit_id'].hasError('required')\">\r\n                Unit is required\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n\r\n          <div class=\"inputbox m-0\">\r\n            <mat-form-field>\r\n              <mat-label>Material</mat-label>\r\n              <mat-select formControlName=\"materials_id\" (mousedown)=\"$event.stopPropagation()\">\r\n                <mat-option *ngFor=\"let material of materialsList\" [value]=\"material?.material_id\"> {{material?.material}}\r\n                </mat-option>\r\n              </mat-select>\r\n              <mat-error *ngIf=\"addRouteForm.controls['materials_id'].hasError('required')\">\r\n                Meterial is required\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <app-estimation-display *ngIf=\"addRouteForm?.value?.pickup_lat_lng && addRouteForm?.value?.delivery_lat_lng\" [value]=\"addRouteForm['value']\"></app-estimation-display>\r\n        </div>\r\n        <div class=\"col-6\" *ngIf=\"addRouteForm['value']['trucker_pay_estimate'] && addRouteForm['value']['customer_price_estimate']\">\r\n          <span *ngIf=\"config['repository'] !== 'customer'\" class=\"estimate\" (mousedown)=\"$event.stopPropagation()\">\r\n            Trucker Pay Estimate - <b>{{'$'+ addRouteForm['value']['trucker_pay_estimate']}}</b>\r\n          </span>\r\n          <span class=\"estimate\" (mousedown)=\"$event.stopPropagation()\">\r\n            Customer Price Estimate - <b>{{'$'+ addRouteForm['value']['customer_price_estimate']}}</b>\r\n          </span>\r\n        </div>\r\n        <button mat-raised-button type=\"submit\" (click)=\"saveRoute()\" *ngIf=\"preventSave\"\r\n          [disabled]=\"addRouteForm.invalid && preventSave || preventInitialSave\">{{routeId? 'Update' : 'Save'}}\r\n        </button>\r\n        <div class=\"loader\">\r\n          <mat-spinner *ngIf=\"!preventSave\"></mat-spinner>\r\n        </div>\r\n      </div>\r\n    </form>\r\n  </div>\r\n</div>\r\n", styles: [".addroutebox{width:calc(100% - 315px);position:absolute;left:300px;bottom:10px;z-index:999;display:flex;justify-content:space-between;align-items:flex-start}.addroutebox .routedetailbox{max-width:300px;padding:10px;background-color:#fff;border-radius:20px;margin-right:20px}@media (min-width: 1600px){.addroutebox .routedetailbox{max-width:280px}}.addroutebox .editbtn{background:#326ad3;padding:10px 25px;color:#fff;font-size:.8125rem;border-radius:30px;float:right}.add_add_route_box{background:white;padding:10px 20px;border-radius:20px;box-shadow:2px 4px 4px 2px #00000024;height:370px;width:100%;position:relative;cursor:move}.add_add_route_box .route_form_area{display:flex;flex-wrap:wrap;justify-content:space-between}.add_add_route_box .route_form_area .col-6{width:48%;margin-top:15px;justify-content:space-between}.add_add_route_box .route_form_area .col-6 .inputbox{width:47%}.add_add_route_box .route_form_area .col-6 span{font-size:.875rem}.add_add_route_box .route_form_area button{background:#326ad3;padding:0 18px;color:#fff;font-size:.8125rem;border-radius:30px;position:absolute;right:18px;top:20px}.closebtn{background:black;color:#fff;border-radius:30px;padding:0 18px;margin-left:10px}.delbtn{background:red;color:#fff;border-radius:30px;padding:10px 18px}.add_route_listingpart .listing_toggle{background:white;border-radius:15px;padding:8px 10px;position:absolute;right:10px;top:30px;cursor:pointer}.listing_box{background:#282828;height:100vh;position:fixed;right:0;top:0;z-index:1111;box-shadow:-3px 0 5px #ffffff14;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;width:0;border-radius:40px 0 0 40px;opacity:0}.listing_box .closebtn{display:none}.show .listing_box{width:250px;max-width:250px;flex:0 0 250px;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;padding:40px 0 40px 20px;opacity:1}@media (min-width: 1600px){.show .listing_box{width:320px;max-width:320px;flex:0 0 320px}}.show .listing_box h2{color:#fff;white-space:nowrap}.show .listing_box ul{padding:0 20px 0 0}.show .listing_box ul li{background:#4a4a4a;padding:15px;border-radius:15px;display:flex;margin-bottom:15px}.show .listing_box ul li .companayIcon{width:40px;height:40px;border-radius:10px;background:white;margin-right:10px;display:flex;justify-content:center;align-items:center}.show .listing_box ul li .company_cont{width:calc(100% - 50px)}.show .listing_box ul li .company_cont h3{color:#fff;font-size:15px;font-weight:400;margin:0;text-overflow:ellipsis;max-width:129px;-webkit-box-orient:vertical;white-space:nowrap;overflow:hidden}@media (min-width: 1600px){.show .listing_box ul li .company_cont h3{max-width:170px}}.show .listing_box ul li .company_cont p{color:#bcbcbc;font-size:12px;margin:5px 0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:16px}.show .closebtn{position:absolute;left:-33px;top:50px;background:#282828;color:#fff;padding:8px;border-top-left-radius:15px;border-bottom-left-radius:15px;cursor:pointer;box-shadow:-4px 2px 5px #ffffff14;display:block}.loader{position:absolute;width:95%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.buttonprt{margin-right:83px}.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.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i7$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "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" }] });
+AddRouteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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\">\r\n  <div class=\"routedetailbox\" *ngIf=\"enablePopUp\">\r\n    <div class=\"closebtnroutedetail\">\r\n      <mat-icon (click)=\"prevantPopupClose = false; enablePopUp = false;\">clear</mat-icon>\r\n    </div>\r\n      <lib-route-info-card [propData]=\"{className: 'routeCard', repository: config['repository']}\" [popupData]=\"popupDetails\"></lib-route-info-card>\r\n    <div class=\"createTxt\">\r\n      <small>\r\n        Created by {{popupDetails['created_by_name']}} on {{popupDetails['created_at']}}\r\n      </small>\r\n      <button class=\"editbtn\" (click)=\"editEvent()\">Edit</button>\r\n    </div>\r\n  </div>\r\n  <div class=\"add_add_route_box\" cdkDrag [style.visibility]=\"!enableForm ? 'hidden' : 'visible'\">\r\n    <div class=\"topheadingprt\">\r\n      <h2> {{routeId? 'EDIT' : 'ADD'}} ROUTE </h2>\r\n      <div class=\"buttonprt\">\r\n        <button *ngIf=\"routeId\" class=\"delbtn\" (click)=\"openDialog()\">Delete</button>\r\n        <button mat-raised-button type=\"submit\" class=\"closebtn\" (click)=\"changeNav.next('Addroute')\">Close</button>\r\n      </div>\r\n    </div>\r\n    <form [formGroup]=\"addRouteForm\">\r\n      <div class=\"route_form_area\">\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Route Name</mat-label>\r\n            <input matInput formControlName=\"route_name\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-error *ngIf=\"addRouteForm.controls['route_name'].hasError('required')\">\r\n              Route Name is required\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <input type=\"text\" placeholder=\"Customer Name\" matInput formControlName=\"customer_name\" [matAutocomplete]=\"auto\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n              <mat-option *ngFor=\"let customer of customersList$ | async\" [value]=\"customer['customer_name']\">\r\n                {{customer['customer_name']}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n            <mat-error *ngIf=\"addRouteForm.controls['customer_name'].hasError('required')\">\r\n              Customer name is required.\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Pickup</mat-label>\r\n            <input type=\"text\" placeholder=\"Search...\" matInput #filterPickup [matAutocomplete]=\"pickupAutocomplete\"\r\n              formControlName=\"pickup_location\" (mousedown)=\"$event.stopPropagation()\">\r\n\r\n            <mat-autocomplete #pickupAutocomplete=\"matAutocomplete\">\r\n              <mat-option (click)=\"selectedLongLat('pickup', option)\" *ngFor=\"let option of pickupOptions\"\r\n                [value]=\"option?.place_name\">\r\n                {{option?.place_name}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n          <mat-error *ngIf=\"addRouteForm.controls['pickup_lat_lng'].touched && addRouteForm.controls['pickup_lat_lng'].hasError('required')\">\r\n            Please select pickup location from the list.\r\n          </mat-error>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Delivery</mat-label>\r\n            <input type=\"text\" placeholder=\"Search...\" matInput #filterDelivery [matAutocomplete]=\"deliveryAutocomplete\"\r\n              formControlName=\"delivery_location\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-autocomplete #deliveryAutocomplete=\"matAutocomplete\">\r\n              <mat-option (click)=\"selectedLongLat('delivery', option)\" *ngFor=\"let option of deliveryOptions\"\r\n                [value]=\"option?.place_name\">\r\n                {{option?.place_name}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n          <mat-error *ngIf=\"addRouteForm.controls['delivery_lat_lng'].touched && addRouteForm.controls['delivery_lat_lng'].hasError('required')\">\r\n            Please select delivery location from the list.\r\n          </mat-error>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Notes</mat-label>\r\n            <textarea style=\"height: 18px; resize: none;\" matInput name=\"\" id=\"\" cols=\"30\" rows=\"10\" formControlName=\"note\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\"></textarea>\r\n            <mat-error *ngIf=\"addRouteForm.controls['note'].hasError('maxlength')\">\r\n              Notes should be within 2048 characters.\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <div class=\"col-6 d-flex\">\r\n          <div class=\"inputbox m-0\">\r\n            <mat-form-field>\r\n              <mat-label>Unit type</mat-label>\r\n              <mat-select formControlName=\"unit_id\" (selectionChange)=\"checkAndFetchRouteInformation()\" (mousedown)=\"$event.stopPropagation()\">\r\n                <mat-option *ngFor=\"let unit of unitsList\" [value]=\"unit?.id\"> {{unit?.type}} </mat-option>\r\n              </mat-select>\r\n              <mat-error *ngIf=\"addRouteForm.controls['unit_id'].hasError('required')\">\r\n                Unit is required\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n\r\n          <div class=\"inputbox m-0\">\r\n            <mat-form-field>\r\n              <mat-label>Material</mat-label>\r\n              <mat-select formControlName=\"materials_id\" (mousedown)=\"$event.stopPropagation()\">\r\n                <mat-option *ngFor=\"let material of materialsList\" [value]=\"config.repository === 'coolmap' ? material?.material_id : material?.sub_material_id\"> {{config.repository === 'coolmap' ? material?.material : material?.label}}\r\n                </mat-option>\r\n              </mat-select>\r\n              <mat-error *ngIf=\"addRouteForm.controls['materials_id'].hasError('required')\">\r\n                Meterial is required\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <app-estimation-display *ngIf=\"addRouteForm?.value?.pickup_lat_lng && addRouteForm?.value?.delivery_lat_lng\" [value]=\"addRouteForm['value']\"></app-estimation-display>\r\n        </div>\r\n        <div class=\"col-6\" *ngIf=\"addRouteForm['value']['trucker_pay_estimate'] && addRouteForm['value']['customer_price_estimate']\">\r\n          <span *ngIf=\"config['repository'] !== 'customer'\" class=\"estimate\" (mousedown)=\"$event.stopPropagation()\">\r\n            Trucker Pay Estimate - <b>{{'$'+ addRouteForm['value']['trucker_pay_estimate']}}</b>\r\n          </span>\r\n          <span class=\"estimate\" (mousedown)=\"$event.stopPropagation()\">\r\n            Customer Price Estimate - <b>{{'$'+ addRouteForm['value']['customer_price_estimate']}}</b>\r\n          </span>\r\n        </div>\r\n        <button mat-raised-button type=\"submit\" (click)=\"saveRoute()\" *ngIf=\"preventSave\"\r\n          [disabled]=\"addRouteForm.invalid && preventSave || preventInitialSave\">{{routeId? 'Update' : 'Save'}}\r\n        </button>\r\n        <div class=\"loader\">\r\n          <mat-spinner *ngIf=\"!preventSave\"></mat-spinner>\r\n        </div>\r\n      </div>\r\n    </form>\r\n  </div>\r\n</div>\r\n", styles: [".addroutebox{width:calc(100% - 315px);position:absolute;left:300px;bottom:10px;z-index:999;display:flex;justify-content:space-between;align-items:flex-start}.addroutebox .routedetailbox{max-width:300px;padding:10px;background-color:#fff;border-radius:20px;margin-right:20px}@media (min-width: 1600px){.addroutebox .routedetailbox{max-width:280px}}.addroutebox .editbtn{background:#326ad3;padding:10px 25px;color:#fff;font-size:.8125rem;border-radius:30px;float:right}.add_add_route_box{background:white;padding:10px 20px;border-radius:20px;box-shadow:2px 4px 4px 2px #00000024;height:370px;width:100%;position:relative;cursor:move}.add_add_route_box .route_form_area{display:flex;flex-wrap:wrap;justify-content:space-between}.add_add_route_box .route_form_area .col-6{width:48%;margin-top:15px;justify-content:space-between}.add_add_route_box .route_form_area .col-6 .inputbox{width:47%}.add_add_route_box .route_form_area .col-6 span{font-size:.875rem}.add_add_route_box .route_form_area button{background:#326ad3;padding:0 18px;color:#fff;font-size:.8125rem;border-radius:30px;position:absolute;right:18px;top:20px}.closebtn{background:black;color:#fff;border-radius:30px;padding:0 18px;margin-left:10px}.delbtn{background:red;color:#fff;border-radius:30px;padding:10px 18px}.add_route_listingpart .listing_toggle{background:white;border-radius:15px;padding:8px 10px;position:absolute;right:10px;top:30px;cursor:pointer}.listing_box{background:#282828;height:100vh;position:fixed;right:0;top:0;z-index:1111;box-shadow:-3px 0 5px #ffffff14;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;width:0;border-radius:40px 0 0 40px;opacity:0}.listing_box .closebtn{display:none}.show .listing_box{width:250px;max-width:250px;flex:0 0 250px;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;padding:40px 0 40px 20px;opacity:1}@media (min-width: 1600px){.show .listing_box{width:320px;max-width:320px;flex:0 0 320px}}.show .listing_box h2{color:#fff;white-space:nowrap}.show .listing_box ul{padding:0 20px 0 0}.show .listing_box ul li{background:#4a4a4a;padding:15px;border-radius:15px;display:flex;margin-bottom:15px}.show .listing_box ul li .companayIcon{width:40px;height:40px;border-radius:10px;background:white;margin-right:10px;display:flex;justify-content:center;align-items:center}.show .listing_box ul li .company_cont{width:calc(100% - 50px)}.show .listing_box ul li .company_cont h3{color:#fff;font-size:15px;font-weight:400;margin:0;text-overflow:ellipsis;max-width:129px;-webkit-box-orient:vertical;white-space:nowrap;overflow:hidden}@media (min-width: 1600px){.show .listing_box ul li .company_cont h3{max-width:170px}}.show .listing_box ul li .company_cont p{color:#bcbcbc;font-size:12px;margin:5px 0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:16px}.show .closebtn{position:absolute;left:-33px;top:50px;background:#282828;color:#fff;padding:8px;border-top-left-radius:15px;border-bottom-left-radius:15px;cursor:pointer;box-shadow:-4px 2px 5px #ffffff14;display:block}.loader{position:absolute;width:95%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.buttonprt{margin-right:83px}.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.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i7$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "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" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AddRouteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-add-route', template: "<div class=\"addroutebox\">\r\n  <div class=\"routedetailbox\" *ngIf=\"enablePopUp\">\r\n    <div class=\"closebtnroutedetail\">\r\n      <mat-icon (click)=\"prevantPopupClose = false; enablePopUp = false;\">clear</mat-icon>\r\n    </div>\r\n      <lib-route-info-card [propData]=\"{className: 'routeCard', repository: config['repository']}\" [popupData]=\"popupDetails\"></lib-route-info-card>\r\n    <div class=\"createTxt\">\r\n      <small>\r\n        Created by {{popupDetails['created_by_name']}} on {{popupDetails['created_at']}}\r\n      </small>\r\n      <button class=\"editbtn\" (click)=\"editEvent()\">Edit</button>\r\n    </div>\r\n  </div>\r\n  <div class=\"add_add_route_box\" cdkDrag [style.visibility]=\"!enableForm ? 'hidden' : 'visible'\">\r\n    <div class=\"topheadingprt\">\r\n      <h2> {{routeId? 'EDIT' : 'ADD'}} ROUTE </h2>\r\n      <div class=\"buttonprt\">\r\n        <button *ngIf=\"routeId\" class=\"delbtn\" (click)=\"openDialog()\">Delete</button>\r\n        <button mat-raised-button type=\"submit\" class=\"closebtn\" (click)=\"changeNav.next('Addroute')\">Close</button>\r\n      </div>\r\n    </div>\r\n    <form [formGroup]=\"addRouteForm\">\r\n      <div class=\"route_form_area\">\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Route Name</mat-label>\r\n            <input matInput formControlName=\"route_name\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-error *ngIf=\"addRouteForm.controls['route_name'].hasError('required')\">\r\n              Route Name is required\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <input type=\"text\" placeholder=\"Customer Name\" matInput formControlName=\"customer_name\" [matAutocomplete]=\"auto\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n              <mat-option *ngFor=\"let customer of customersList$ | async\" [value]=\"customer['customer_name']\">\r\n                {{customer['customer_name']}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n            <mat-error *ngIf=\"addRouteForm.controls['customer_name'].hasError('required')\">\r\n              Customer name is required.\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Pickup</mat-label>\r\n            <input type=\"text\" placeholder=\"Search...\" matInput #filterPickup [matAutocomplete]=\"pickupAutocomplete\"\r\n              formControlName=\"pickup_location\" (mousedown)=\"$event.stopPropagation()\">\r\n\r\n            <mat-autocomplete #pickupAutocomplete=\"matAutocomplete\">\r\n              <mat-option (click)=\"selectedLongLat('pickup', option)\" *ngFor=\"let option of pickupOptions\"\r\n                [value]=\"option?.place_name\">\r\n                {{option?.place_name}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n          <mat-error *ngIf=\"addRouteForm.controls['pickup_lat_lng'].touched && addRouteForm.controls['pickup_lat_lng'].hasError('required')\">\r\n            Please select pickup location from the list.\r\n          </mat-error>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Delivery</mat-label>\r\n            <input type=\"text\" placeholder=\"Search...\" matInput #filterDelivery [matAutocomplete]=\"deliveryAutocomplete\"\r\n              formControlName=\"delivery_location\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-autocomplete #deliveryAutocomplete=\"matAutocomplete\">\r\n              <mat-option (click)=\"selectedLongLat('delivery', option)\" *ngFor=\"let option of deliveryOptions\"\r\n                [value]=\"option?.place_name\">\r\n                {{option?.place_name}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n          <mat-error *ngIf=\"addRouteForm.controls['delivery_lat_lng'].touched && addRouteForm.controls['delivery_lat_lng'].hasError('required')\">\r\n            Please select delivery location from the list.\r\n          </mat-error>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Notes</mat-label>\r\n            <textarea style=\"height: 18px; resize: none;\" matInput name=\"\" id=\"\" cols=\"30\" rows=\"10\" formControlName=\"note\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\"></textarea>\r\n            <mat-error *ngIf=\"addRouteForm.controls['note'].hasError('maxlength')\">\r\n              Notes should be within 2048 characters.\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <div class=\"col-6 d-flex\">\r\n          <div class=\"inputbox m-0\">\r\n            <mat-form-field>\r\n              <mat-label>Unit type</mat-label>\r\n              <mat-select formControlName=\"unit_id\" (selectionChange)=\"checkAndFetchRouteInformation()\" (mousedown)=\"$event.stopPropagation()\">\r\n                <mat-option *ngFor=\"let unit of unitsList\" [value]=\"unit?.id\"> {{unit?.type}} </mat-option>\r\n              </mat-select>\r\n              <mat-error *ngIf=\"addRouteForm.controls['unit_id'].hasError('required')\">\r\n                Unit is required\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n\r\n          <div class=\"inputbox m-0\">\r\n            <mat-form-field>\r\n              <mat-label>Material</mat-label>\r\n              <mat-select formControlName=\"materials_id\" (mousedown)=\"$event.stopPropagation()\">\r\n                <mat-option *ngFor=\"let material of materialsList\" [value]=\"material?.material_id\"> {{material?.material}}\r\n                </mat-option>\r\n              </mat-select>\r\n              <mat-error *ngIf=\"addRouteForm.controls['materials_id'].hasError('required')\">\r\n                Meterial is required\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <app-estimation-display *ngIf=\"addRouteForm?.value?.pickup_lat_lng && addRouteForm?.value?.delivery_lat_lng\" [value]=\"addRouteForm['value']\"></app-estimation-display>\r\n        </div>\r\n        <div class=\"col-6\" *ngIf=\"addRouteForm['value']['trucker_pay_estimate'] && addRouteForm['value']['customer_price_estimate']\">\r\n          <span *ngIf=\"config['repository'] !== 'customer'\" class=\"estimate\" (mousedown)=\"$event.stopPropagation()\">\r\n            Trucker Pay Estimate - <b>{{'$'+ addRouteForm['value']['trucker_pay_estimate']}}</b>\r\n          </span>\r\n          <span class=\"estimate\" (mousedown)=\"$event.stopPropagation()\">\r\n            Customer Price Estimate - <b>{{'$'+ addRouteForm['value']['customer_price_estimate']}}</b>\r\n          </span>\r\n        </div>\r\n        <button mat-raised-button type=\"submit\" (click)=\"saveRoute()\" *ngIf=\"preventSave\"\r\n          [disabled]=\"addRouteForm.invalid && preventSave || preventInitialSave\">{{routeId? 'Update' : 'Save'}}\r\n        </button>\r\n        <div class=\"loader\">\r\n          <mat-spinner *ngIf=\"!preventSave\"></mat-spinner>\r\n        </div>\r\n      </div>\r\n    </form>\r\n  </div>\r\n</div>\r\n", styles: [".addroutebox{width:calc(100% - 315px);position:absolute;left:300px;bottom:10px;z-index:999;display:flex;justify-content:space-between;align-items:flex-start}.addroutebox .routedetailbox{max-width:300px;padding:10px;background-color:#fff;border-radius:20px;margin-right:20px}@media (min-width: 1600px){.addroutebox .routedetailbox{max-width:280px}}.addroutebox .editbtn{background:#326ad3;padding:10px 25px;color:#fff;font-size:.8125rem;border-radius:30px;float:right}.add_add_route_box{background:white;padding:10px 20px;border-radius:20px;box-shadow:2px 4px 4px 2px #00000024;height:370px;width:100%;position:relative;cursor:move}.add_add_route_box .route_form_area{display:flex;flex-wrap:wrap;justify-content:space-between}.add_add_route_box .route_form_area .col-6{width:48%;margin-top:15px;justify-content:space-between}.add_add_route_box .route_form_area .col-6 .inputbox{width:47%}.add_add_route_box .route_form_area .col-6 span{font-size:.875rem}.add_add_route_box .route_form_area button{background:#326ad3;padding:0 18px;color:#fff;font-size:.8125rem;border-radius:30px;position:absolute;right:18px;top:20px}.closebtn{background:black;color:#fff;border-radius:30px;padding:0 18px;margin-left:10px}.delbtn{background:red;color:#fff;border-radius:30px;padding:10px 18px}.add_route_listingpart .listing_toggle{background:white;border-radius:15px;padding:8px 10px;position:absolute;right:10px;top:30px;cursor:pointer}.listing_box{background:#282828;height:100vh;position:fixed;right:0;top:0;z-index:1111;box-shadow:-3px 0 5px #ffffff14;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;width:0;border-radius:40px 0 0 40px;opacity:0}.listing_box .closebtn{display:none}.show .listing_box{width:250px;max-width:250px;flex:0 0 250px;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;padding:40px 0 40px 20px;opacity:1}@media (min-width: 1600px){.show .listing_box{width:320px;max-width:320px;flex:0 0 320px}}.show .listing_box h2{color:#fff;white-space:nowrap}.show .listing_box ul{padding:0 20px 0 0}.show .listing_box ul li{background:#4a4a4a;padding:15px;border-radius:15px;display:flex;margin-bottom:15px}.show .listing_box ul li .companayIcon{width:40px;height:40px;border-radius:10px;background:white;margin-right:10px;display:flex;justify-content:center;align-items:center}.show .listing_box ul li .company_cont{width:calc(100% - 50px)}.show .listing_box ul li .company_cont h3{color:#fff;font-size:15px;font-weight:400;margin:0;text-overflow:ellipsis;max-width:129px;-webkit-box-orient:vertical;white-space:nowrap;overflow:hidden}@media (min-width: 1600px){.show .listing_box ul li .company_cont h3{max-width:170px}}.show .listing_box ul li .company_cont p{color:#bcbcbc;font-size:12px;margin:5px 0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:16px}.show .closebtn{position:absolute;left:-33px;top:50px;background:#282828;color:#fff;padding:8px;border-top-left-radius:15px;border-bottom-left-radius:15px;cursor:pointer;box-shadow:-4px 2px 5px #ffffff14;display:block}.loader{position:absolute;width:95%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.buttonprt{margin-right:83px}.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"] }]
+            args: [{ selector: 'app-add-route', template: "<div class=\"addroutebox\">\r\n  <div class=\"routedetailbox\" *ngIf=\"enablePopUp\">\r\n    <div class=\"closebtnroutedetail\">\r\n      <mat-icon (click)=\"prevantPopupClose = false; enablePopUp = false;\">clear</mat-icon>\r\n    </div>\r\n      <lib-route-info-card [propData]=\"{className: 'routeCard', repository: config['repository']}\" [popupData]=\"popupDetails\"></lib-route-info-card>\r\n    <div class=\"createTxt\">\r\n      <small>\r\n        Created by {{popupDetails['created_by_name']}} on {{popupDetails['created_at']}}\r\n      </small>\r\n      <button class=\"editbtn\" (click)=\"editEvent()\">Edit</button>\r\n    </div>\r\n  </div>\r\n  <div class=\"add_add_route_box\" cdkDrag [style.visibility]=\"!enableForm ? 'hidden' : 'visible'\">\r\n    <div class=\"topheadingprt\">\r\n      <h2> {{routeId? 'EDIT' : 'ADD'}} ROUTE </h2>\r\n      <div class=\"buttonprt\">\r\n        <button *ngIf=\"routeId\" class=\"delbtn\" (click)=\"openDialog()\">Delete</button>\r\n        <button mat-raised-button type=\"submit\" class=\"closebtn\" (click)=\"changeNav.next('Addroute')\">Close</button>\r\n      </div>\r\n    </div>\r\n    <form [formGroup]=\"addRouteForm\">\r\n      <div class=\"route_form_area\">\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Route Name</mat-label>\r\n            <input matInput formControlName=\"route_name\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-error *ngIf=\"addRouteForm.controls['route_name'].hasError('required')\">\r\n              Route Name is required\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <input type=\"text\" placeholder=\"Customer Name\" matInput formControlName=\"customer_name\" [matAutocomplete]=\"auto\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n              <mat-option *ngFor=\"let customer of customersList$ | async\" [value]=\"customer['customer_name']\">\r\n                {{customer['customer_name']}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n            <mat-error *ngIf=\"addRouteForm.controls['customer_name'].hasError('required')\">\r\n              Customer name is required.\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Pickup</mat-label>\r\n            <input type=\"text\" placeholder=\"Search...\" matInput #filterPickup [matAutocomplete]=\"pickupAutocomplete\"\r\n              formControlName=\"pickup_location\" (mousedown)=\"$event.stopPropagation()\">\r\n\r\n            <mat-autocomplete #pickupAutocomplete=\"matAutocomplete\">\r\n              <mat-option (click)=\"selectedLongLat('pickup', option)\" *ngFor=\"let option of pickupOptions\"\r\n                [value]=\"option?.place_name\">\r\n                {{option?.place_name}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n          <mat-error *ngIf=\"addRouteForm.controls['pickup_lat_lng'].touched && addRouteForm.controls['pickup_lat_lng'].hasError('required')\">\r\n            Please select pickup location from the list.\r\n          </mat-error>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Delivery</mat-label>\r\n            <input type=\"text\" placeholder=\"Search...\" matInput #filterDelivery [matAutocomplete]=\"deliveryAutocomplete\"\r\n              formControlName=\"delivery_location\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-autocomplete #deliveryAutocomplete=\"matAutocomplete\">\r\n              <mat-option (click)=\"selectedLongLat('delivery', option)\" *ngFor=\"let option of deliveryOptions\"\r\n                [value]=\"option?.place_name\">\r\n                {{option?.place_name}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n          <mat-error *ngIf=\"addRouteForm.controls['delivery_lat_lng'].touched && addRouteForm.controls['delivery_lat_lng'].hasError('required')\">\r\n            Please select delivery location from the list.\r\n          </mat-error>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Notes</mat-label>\r\n            <textarea style=\"height: 18px; resize: none;\" matInput name=\"\" id=\"\" cols=\"30\" rows=\"10\" formControlName=\"note\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\"></textarea>\r\n            <mat-error *ngIf=\"addRouteForm.controls['note'].hasError('maxlength')\">\r\n              Notes should be within 2048 characters.\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <div class=\"col-6 d-flex\">\r\n          <div class=\"inputbox m-0\">\r\n            <mat-form-field>\r\n              <mat-label>Unit type</mat-label>\r\n              <mat-select formControlName=\"unit_id\" (selectionChange)=\"checkAndFetchRouteInformation()\" (mousedown)=\"$event.stopPropagation()\">\r\n                <mat-option *ngFor=\"let unit of unitsList\" [value]=\"unit?.id\"> {{unit?.type}} </mat-option>\r\n              </mat-select>\r\n              <mat-error *ngIf=\"addRouteForm.controls['unit_id'].hasError('required')\">\r\n                Unit is required\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n\r\n          <div class=\"inputbox m-0\">\r\n            <mat-form-field>\r\n              <mat-label>Material</mat-label>\r\n              <mat-select formControlName=\"materials_id\" (mousedown)=\"$event.stopPropagation()\">\r\n                <mat-option *ngFor=\"let material of materialsList\" [value]=\"config.repository === 'coolmap' ? material?.material_id : material?.sub_material_id\"> {{config.repository === 'coolmap' ? material?.material : material?.label}}\r\n                </mat-option>\r\n              </mat-select>\r\n              <mat-error *ngIf=\"addRouteForm.controls['materials_id'].hasError('required')\">\r\n                Meterial is required\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <app-estimation-display *ngIf=\"addRouteForm?.value?.pickup_lat_lng && addRouteForm?.value?.delivery_lat_lng\" [value]=\"addRouteForm['value']\"></app-estimation-display>\r\n        </div>\r\n        <div class=\"col-6\" *ngIf=\"addRouteForm['value']['trucker_pay_estimate'] && addRouteForm['value']['customer_price_estimate']\">\r\n          <span *ngIf=\"config['repository'] !== 'customer'\" class=\"estimate\" (mousedown)=\"$event.stopPropagation()\">\r\n            Trucker Pay Estimate - <b>{{'$'+ addRouteForm['value']['trucker_pay_estimate']}}</b>\r\n          </span>\r\n          <span class=\"estimate\" (mousedown)=\"$event.stopPropagation()\">\r\n            Customer Price Estimate - <b>{{'$'+ addRouteForm['value']['customer_price_estimate']}}</b>\r\n          </span>\r\n        </div>\r\n        <button mat-raised-button type=\"submit\" (click)=\"saveRoute()\" *ngIf=\"preventSave\"\r\n          [disabled]=\"addRouteForm.invalid && preventSave || preventInitialSave\">{{routeId? 'Update' : 'Save'}}\r\n        </button>\r\n        <div class=\"loader\">\r\n          <mat-spinner *ngIf=\"!preventSave\"></mat-spinner>\r\n        </div>\r\n      </div>\r\n    </form>\r\n  </div>\r\n</div>\r\n", styles: [".addroutebox{width:calc(100% - 315px);position:absolute;left:300px;bottom:10px;z-index:999;display:flex;justify-content:space-between;align-items:flex-start}.addroutebox .routedetailbox{max-width:300px;padding:10px;background-color:#fff;border-radius:20px;margin-right:20px}@media (min-width: 1600px){.addroutebox .routedetailbox{max-width:280px}}.addroutebox .editbtn{background:#326ad3;padding:10px 25px;color:#fff;font-size:.8125rem;border-radius:30px;float:right}.add_add_route_box{background:white;padding:10px 20px;border-radius:20px;box-shadow:2px 4px 4px 2px #00000024;height:370px;width:100%;position:relative;cursor:move}.add_add_route_box .route_form_area{display:flex;flex-wrap:wrap;justify-content:space-between}.add_add_route_box .route_form_area .col-6{width:48%;margin-top:15px;justify-content:space-between}.add_add_route_box .route_form_area .col-6 .inputbox{width:47%}.add_add_route_box .route_form_area .col-6 span{font-size:.875rem}.add_add_route_box .route_form_area button{background:#326ad3;padding:0 18px;color:#fff;font-size:.8125rem;border-radius:30px;position:absolute;right:18px;top:20px}.closebtn{background:black;color:#fff;border-radius:30px;padding:0 18px;margin-left:10px}.delbtn{background:red;color:#fff;border-radius:30px;padding:10px 18px}.add_route_listingpart .listing_toggle{background:white;border-radius:15px;padding:8px 10px;position:absolute;right:10px;top:30px;cursor:pointer}.listing_box{background:#282828;height:100vh;position:fixed;right:0;top:0;z-index:1111;box-shadow:-3px 0 5px #ffffff14;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;width:0;border-radius:40px 0 0 40px;opacity:0}.listing_box .closebtn{display:none}.show .listing_box{width:250px;max-width:250px;flex:0 0 250px;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;padding:40px 0 40px 20px;opacity:1}@media (min-width: 1600px){.show .listing_box{width:320px;max-width:320px;flex:0 0 320px}}.show .listing_box h2{color:#fff;white-space:nowrap}.show .listing_box ul{padding:0 20px 0 0}.show .listing_box ul li{background:#4a4a4a;padding:15px;border-radius:15px;display:flex;margin-bottom:15px}.show .listing_box ul li .companayIcon{width:40px;height:40px;border-radius:10px;background:white;margin-right:10px;display:flex;justify-content:center;align-items:center}.show .listing_box ul li .company_cont{width:calc(100% - 50px)}.show .listing_box ul li .company_cont h3{color:#fff;font-size:15px;font-weight:400;margin:0;text-overflow:ellipsis;max-width:129px;-webkit-box-orient:vertical;white-space:nowrap;overflow:hidden}@media (min-width: 1600px){.show .listing_box ul li .company_cont h3{max-width:170px}}.show .listing_box ul li .company_cont p{color:#bcbcbc;font-size:12px;margin:5px 0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:16px}.show .closebtn{position:absolute;left:-33px;top:50px;background:#282828;color:#fff;padding:8px;border-top-left-radius:15px;border-bottom-left-radius:15px;cursor:pointer;box-shadow:-4px 2px 5px #ffffff14;display:block}.loader{position:absolute;width:95%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.buttonprt{margin-right:83px}.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"] }]
         }], ctorParameters: function () {
         return [{ type: i1.CoolmapService }, { type: i1.UtilsService }, { type: i1$1.MatDialog }, { type: i1.CoolmapConfigModel, decorators: [{
                         type: Inject,