@aggdirect/coolmap 2.8.9 → 2.9.0

package/esm2022/lib/component/route-jobcode-list/route-jobcode-list.component.mjs

@@ -292,11 +292,11 @@ export class RouteJobCodeListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: RouteJobCodeListComponent, deps: [{ token: i1.CoolmapService }, { token: i1.UtilsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: RouteJobCodeListComponent, selector: "app-route-jobcode-list", inputs: { loader: "loader", type: "type", data: "data", currentNav: "currentNav", searchTerm: "searchTerm", clearListSeletion: "clearListSeletion" }, outputs: { emitroute: "emitroute", showAllRoute: "showAllRoute", clearJobDetailsFromList: "clearJobDetailsFromList" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"scrollprt addroutelist\" [class.viewroute]=\"visiblesection('addroute')\"\n  [class.jobList]=\"visiblesection('jobcode')\">\n  <button (click)=\"showRoute()\" [disabled]=\"loader\" *ngIf=\"selectedRoute.selected.length\" class=\"show_routebtn\">Show all\n    route</button>\n    <cdk-virtual-scroll-viewport itemSize=\"50\" [class.jobscroll]=\"visiblesection('jobcode')\" class=\"example-viewport\">\n      <mat-spinner *ngIf=\"loader\"></mat-spinner>\n      <ul *ngIf=\"!loader && data.length > 0\">\n        <li [class.active]=\"route['isActive'] && visiblesection('addroute')\" *ngFor=\"let route of data\">\n            <app-job-code-list-card *ngIf=\"visiblesection('jobcode')\" \n                                    (toggleDrivermenu)=\"toggleDrivermenu($event)\"\n                                    (routeSeletion)=\"selectRoute($event)\" \n                                    [preventCloseDetails]=\"preventDetailsClose\" \n                                    [emitJobdetails]=\"{emitroute, clearJobDetailsFromList}\" \n                                    [route]=\"checkroutes(route)\">\n            </app-job-code-list-card>\n            <app-view-route-list-card *ngIf=\"visiblesection('addroute')\"\n                                      [emitrouteevent]=\"emitroute\" \n                                      [route]=\"route\">\n            </app-view-route-list-card>\n        </li>\n      </ul>\n      <p *ngIf=\"!loader && data.length === 0\">{{visiblesection('addroute') ? 'No Route found' : 'No Job code found.'}}</p>\n    </cdk-virtual-scroll-viewport>\n</div>\n\n<div class=\"driver_list\" *ngIf=\"isDriverList\">\n  <div class=\"driver_headingprt\">\n    <h2>Driver List</h2>\n    <button *ngIf=\"driverList.driver_list?.length > 0\" (click)=\"isSmsList = true\">SMS</button>\n    <div class=\"closebtn\" (click)=\"isDriverList = false; preventMouseout = false; isSmsList = false\">\n      <mat-icon>clear</mat-icon>\n    </div>\n  </div>\n  <ul class=\"driverList\" *ngIf=\"driverList && driverList.driver_list\">\n    <li *ngFor=\"let driver of driverList?.driver_list\">\n      <img src=\"assets/images/driver_icon.png\" [alt]=\"driver['driver_name']\" />\n      <div class=\"driver_detail\">\n        <b>{{driver['driver_name']}}</b> <span>{{driver['trucking_company']}}</span>\n        <div class=\"cont_del\">\n          <small>Driver contact: <b>{{driver['driver_phone'] ? driver['driver_phone'] : 'N/A'}}</b></small>\n          <small>Company contact: <b>{{driver['trucking_company_phone'] ? driver['trucking_company_phone'] : 'N/A'}}</b></small>\n        </div>\n      </div>\n    </li>\n    <p *ngIf=\"driverList.driver_list?.length === 0\" style=\"font-weight:700; text-align:center;\">\n      No Driver found\n    </p>\n  </ul>\n  <div class=\"smslist\" *ngIf=\"isSmsList\">\n    <div class=\"heading\">\n      <h2>SMS All Drivers</h2>\n      <div class=\"closebtn\" (click)=\"isSmsList = false\">\n        <mat-icon>clear</mat-icon>\n      </div>\n    </div>\n    <div class=\"detailprt\">\n      <app-sms-card-details-overview [jobValue]=\"driverList\"></app-sms-card-details-overview>\n      <div class=\"form_input\">\n        <mat-form-field class=\"example-full-width\">\n          <textarea matInput placeholder=\"Text here...\" autocomplete=\"nope\" column=\"10\"\n            [formControl]=\"driverMessage\"></textarea>\n          <mat-hint>{{driverMessage.value?.length}} / 256</mat-hint>\n        </mat-form-field>\n        <button *ngIf=\"!messageLoader\" [disabled]=\"!driverMessage.value || driverMessage.invalid\" (click)=\"sendMessage()\">\n          Send SMS\n        </button>\n      </div>\n    </div>\n    <div class=\"loader\">\n      <mat-spinner *ngIf=\"messageLoader\"></mat-spinner>\n    </div>\n  </div>\n</div>\n", styles: [".driver_iconprt{position:absolute;right:10px;top:12px;z-index:9999}.driver_iconprt img{width:25px;height:25px}.driver_list{background:#fff;position:fixed;width:300px;top:10px;left:360px;border-top-left-radius:20px;border-top-right-radius:20px}.driver_list .driver_headingprt{display:flex;justify-content:space-between;align-items:center;padding:0 15px}.driver_list .driver_headingprt button{background:none;border:1px solid #ccc;border-radius:10px;padding:5px 20px}.driver_list .driver_headingprt button:hover{background:#326ad3;color:#fff}.driver_list h2{font-size:20px}.driver_list .driverList{height:300px;overflow:auto}.driver_list .driverList li{display:flex;padding:10px;align-items:flex-start;cursor:pointer;border-bottom:1px solid white;background:#eee}.driver_list .driverList li img{width:35px;height:35px;border-radius:100%;margin-right:10px}.driver_list .driverList li .driver_detail{width:calc(100% - 45px);display:flex;flex-direction:column;justify-content:flex-start}.driver_list .driverList li .driver_detail b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:135px;font-size:.9rem}.driver_list .driverList li .driver_detail span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;font-size:.8rem}.driver_list:after{height:10px;background:#fff;border-bottom-right-radius:20px;border-bottom-left-radius:20px;content:\"\";position:absolute;bottom:-9px;width:100%}.smslist{background:#fff;position:absolute;width:480px;top:0;left:105%;border-radius:20px;padding-bottom:20px}.smslist .heading{display:flex;justify-content:space-between;align-items:center;padding:0 15px}.smslist .detailprt{padding:0 15px}.smslist .detailprt span{display:flex;margin-bottom:12px;font-size:.8rem;align-items:center}.smslist .detailprt span label{font-weight:600;width:37%}.smslist .detailprt .form_input{display:flex;flex-direction:column;font-size:.8rem}.smslist .detailprt .form_input button{background:#326ad3;padding:10px 18px;color:#fff;font-size:.8125rem;border-radius:30px;display:flex;align-self:flex-end}.closebtn{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#f5f5f5}.show_routebtn{font-size:.9rem;margin-bottom:20px;padding:6px 11px;position:absolute;top:8px;right:10px;background-color:transparent;color:#3f51b5;border:1px solid #3f51b5;border-radius:10px;box-shadow:none}.show_routebtn:hover{background-color:#3f51b5;color:#fff}.cont_del{margin-top:10px}.cont_del small{display:block}.jobList ul{margin:0 .93em 0 0;width:100%}.jobList ul li{position:relative;background:#fbfbfb;padding:10px;border-radius:15px;margin-bottom:5px;border:1px solid #fbfbfb;border-left:3px solid #fbfbfb;cursor:pointer;height:inherit;width:15.62em}@media (min-width: 2500px){.jobList ul li{height:7.65vh}}@media (min-width: 3300px){.jobList ul li{height:5.61vh}}.viewroute ul{width:100%}.viewroute ul li{position:relative;background:#fbfbfb;padding:7px 10px;border-radius:15px;margin-bottom:5px;border:1px solid #fbfbfb;border-left:3px solid #fbfbfb;cursor:pointer;height:16.4vh;width:15.62em}@media (min-width: 1600px){.viewroute ul li{height:12.4vh}}.viewroute ul li.active{border:1px solid #39c471;border-left:3px solid #39c471}.loader{position:absolute;height:100%;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:center;pointer-events:none}.example-viewport{height:900px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i8.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: i8.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i9.ViewRouteListCardComponent, selector: "app-view-route-list-card", inputs: ["route", "emitrouteevent"] }, { kind: "component", type: i10.SmsCardDetailsOverviewComponent, selector: "app-sms-card-details-overview", inputs: ["jobValue"] }, { kind: "component", type: i11.JobCodeListCardComponent, selector: "app-job-code-list-card", inputs: ["route", "emitJobdetails", "preventCloseDetails"], outputs: ["routeSeletion", "toggleDrivermenu"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: RouteJobCodeListComponent, selector: "app-route-jobcode-list", inputs: { loader: "loader", type: "type", data: "data", currentNav: "currentNav", searchTerm: "searchTerm", clearListSeletion: "clearListSeletion" }, outputs: { emitroute: "emitroute", showAllRoute: "showAllRoute", clearJobDetailsFromList: "clearJobDetailsFromList" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"scrollprt addroutelist\" [class.viewroute]=\"visiblesection('addroute')\"\n  [class.jobList]=\"visiblesection('jobcode')\">\n  <button (click)=\"showRoute()\" [disabled]=\"loader\" *ngIf=\"selectedRoute.selected.length\" class=\"show_routebtn\">Show all\n    route</button>\n    <cdk-virtual-scroll-viewport itemSize=\"50\" [class.jobscroll]=\"visiblesection('jobcode')\" class=\"example-viewport\">\n      <mat-spinner *ngIf=\"loader\"></mat-spinner>\n      <ul *ngIf=\"!loader && data.length > 0\">\n        <li [class.active]=\"route['isActive'] && visiblesection('addroute')\" *ngFor=\"let route of data\">\n            <app-job-code-list-card *ngIf=\"visiblesection('jobcode')\" \n                                    (toggleDrivermenu)=\"toggleDrivermenu($event)\"\n                                    (routeSeletion)=\"selectRoute($event)\" \n                                    [preventCloseDetails]=\"preventDetailsClose\" \n                                    [emitJobdetails]=\"{emitroute, clearJobDetailsFromList}\" \n                                    [route]=\"checkroutes(route)\">\n            </app-job-code-list-card>\n            <app-view-route-list-card *ngIf=\"visiblesection('addroute')\"\n                                      [emitrouteevent]=\"emitroute\" \n                                      [route]=\"route\">\n            </app-view-route-list-card>\n        </li>\n      </ul>\n      <p *ngIf=\"!loader && data.length === 0\">{{visiblesection('addroute') ? 'No Route found' : 'No Job code found.'}}</p>\n    </cdk-virtual-scroll-viewport>\n</div>\n\n<div class=\"driver_list\" *ngIf=\"isDriverList\">\n  <div class=\"driver_headingprt\">\n    <h2>Driver List</h2>\n    <button *ngIf=\"driverList.driver_list?.length > 0\" (click)=\"isSmsList = true\">SMS</button>\n    <div class=\"closebtn\" (click)=\"isDriverList = false; preventMouseout = false; isSmsList = false\">\n      <mat-icon>clear</mat-icon>\n    </div>\n  </div>\n  <ul class=\"driverList\" *ngIf=\"driverList && driverList.driver_list\">\n    <li *ngFor=\"let driver of driverList?.driver_list\">\n      <img src=\"assets/images/driver_icon.png\" [alt]=\"driver['driver_name']\" />\n      <div class=\"driver_detail\">\n        <b>{{driver['driver_name']}}</b> <span>{{driver['trucking_company']}}</span>\n        <div class=\"cont_del\">\n          <small>Driver contact: <b>{{driver['driver_phone'] ? driver['driver_phone'] : 'N/A'}}</b></small>\n          <small>Company contact: <b>{{driver['trucking_company_phone'] ? driver['trucking_company_phone'] : 'N/A'}}</b></small>\n        </div>\n      </div>\n    </li>\n    <p *ngIf=\"driverList.driver_list?.length === 0\" style=\"font-weight:700; text-align:center;\">\n      No Driver found\n    </p>\n  </ul>\n  <div class=\"smslist\" *ngIf=\"isSmsList\">\n    <div class=\"heading\">\n      <h2>SMS All Drivers</h2>\n      <div class=\"closebtn\" (click)=\"isSmsList = false\">\n        <mat-icon>clear</mat-icon>\n      </div>\n    </div>\n    <div class=\"detailprt\">\n      <app-sms-card-details-overview [jobValue]=\"driverList\"></app-sms-card-details-overview>\n      <div class=\"form_input\">\n        <mat-form-field class=\"example-full-width\">\n          <textarea matInput placeholder=\"Text here...\" autocomplete=\"nope\" column=\"10\"\n            [formControl]=\"driverMessage\"></textarea>\n          <mat-hint>{{driverMessage.value?.length}} / 256</mat-hint>\n        </mat-form-field>\n        <button *ngIf=\"!messageLoader\" [disabled]=\"!driverMessage.value || driverMessage.invalid\" (click)=\"sendMessage()\">\n          Send SMS\n        </button>\n      </div>\n    </div>\n    <div class=\"loader\">\n      <mat-spinner *ngIf=\"messageLoader\"></mat-spinner>\n    </div>\n  </div>\n</div>\n", styles: [".driver_iconprt{position:absolute;right:10px;top:12px;z-index:9999}.driver_iconprt img{width:25px;height:25px}.driver_list{background:#fff;position:fixed;width:300px;top:10px;left:360px;border-top-left-radius:20px;border-top-right-radius:20px}.driver_list .driver_headingprt{display:flex;justify-content:space-between;align-items:center;padding:0 15px}.driver_list .driver_headingprt button{background:none;border:1px solid #ccc;border-radius:10px;padding:5px 20px}.driver_list .driver_headingprt button:hover{background:#326ad3;color:#fff}.driver_list h2{font-size:20px}.driver_list .driverList{height:300px;overflow:auto}.driver_list .driverList li{display:flex;padding:10px;align-items:flex-start;cursor:pointer;border-bottom:1px solid white;background:#eee}.driver_list .driverList li img{width:35px;height:35px;border-radius:100%;margin-right:10px}.driver_list .driverList li .driver_detail{width:calc(100% - 45px);display:flex;flex-direction:column;justify-content:flex-start}.driver_list .driverList li .driver_detail b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:135px;font-size:.9rem}.driver_list .driverList li .driver_detail span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;font-size:.8rem}.driver_list:after{height:10px;background:#fff;border-bottom-right-radius:20px;border-bottom-left-radius:20px;content:\"\";position:absolute;bottom:-9px;width:100%}.smslist{background:#fff;position:absolute;width:480px;top:0;left:105%;border-radius:20px;padding-bottom:20px}.smslist .heading{display:flex;justify-content:space-between;align-items:center;padding:0 15px}.smslist .detailprt{padding:0 15px}.smslist .detailprt span{display:flex;margin-bottom:12px;font-size:.8rem;align-items:center}.smslist .detailprt span label{font-weight:600;width:37%}.smslist .detailprt .form_input{display:flex;flex-direction:column;font-size:.8rem}.smslist .detailprt .form_input button{background:#326ad3;padding:10px 18px;color:#fff;font-size:.8125rem;border-radius:30px;display:flex;align-self:flex-end}.closebtn{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#f5f5f5}.show_routebtn{font-size:.9rem;margin-bottom:20px;padding:6px 11px;position:absolute;top:8px;right:10px;background-color:transparent;color:#3f51b5;border:1px solid #3f51b5;border-radius:10px;box-shadow:none}.show_routebtn:hover{background-color:#3f51b5;color:#fff}.cont_del{margin-top:10px}.cont_del small{display:block}.jobList ul{margin:0 .93em 0 0;width:100%}.jobList ul li{position:relative;background:#fbfbfb;padding:10px;border-radius:15px;margin-bottom:5px;border:1px solid #fbfbfb;border-left:3px solid #fbfbfb;cursor:pointer;height:inherit;width:15.62em}@media (min-width: 2500px){.jobList ul li{height:7.65vh}}@media (min-width: 3300px){.jobList ul li{height:5.61vh}}.viewroute ul{width:100%}.viewroute ul li{position:relative;background:#fbfbfb;padding:7px 10px;border-radius:15px;margin-bottom:5px;border:1px solid #fbfbfb;border-left:3px solid #fbfbfb;cursor:pointer;width:15.62em}.viewroute ul li.active{border:1px solid #39c471;border-left:3px solid #39c471}.loader{position:absolute;height:100%;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:center;pointer-events:none}.example-viewport{height:74vh}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i8.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: i8.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i9.ViewRouteListCardComponent, selector: "app-view-route-list-card", inputs: ["route", "emitrouteevent"] }, { kind: "component", type: i10.SmsCardDetailsOverviewComponent, selector: "app-sms-card-details-overview", inputs: ["jobValue"] }, { kind: "component", type: i11.JobCodeListCardComponent, selector: "app-job-code-list-card", inputs: ["route", "emitJobdetails", "preventCloseDetails"], outputs: ["routeSeletion", "toggleDrivermenu"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: RouteJobCodeListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-route-jobcode-list', template: "<div class=\"scrollprt addroutelist\" [class.viewroute]=\"visiblesection('addroute')\"\n  [class.jobList]=\"visiblesection('jobcode')\">\n  <button (click)=\"showRoute()\" [disabled]=\"loader\" *ngIf=\"selectedRoute.selected.length\" class=\"show_routebtn\">Show all\n    route</button>\n    <cdk-virtual-scroll-viewport itemSize=\"50\" [class.jobscroll]=\"visiblesection('jobcode')\" class=\"example-viewport\">\n      <mat-spinner *ngIf=\"loader\"></mat-spinner>\n      <ul *ngIf=\"!loader && data.length > 0\">\n        <li [class.active]=\"route['isActive'] && visiblesection('addroute')\" *ngFor=\"let route of data\">\n            <app-job-code-list-card *ngIf=\"visiblesection('jobcode')\" \n                                    (toggleDrivermenu)=\"toggleDrivermenu($event)\"\n                                    (routeSeletion)=\"selectRoute($event)\" \n                                    [preventCloseDetails]=\"preventDetailsClose\" \n                                    [emitJobdetails]=\"{emitroute, clearJobDetailsFromList}\" \n                                    [route]=\"checkroutes(route)\">\n            </app-job-code-list-card>\n            <app-view-route-list-card *ngIf=\"visiblesection('addroute')\"\n                                      [emitrouteevent]=\"emitroute\" \n                                      [route]=\"route\">\n            </app-view-route-list-card>\n        </li>\n      </ul>\n      <p *ngIf=\"!loader && data.length === 0\">{{visiblesection('addroute') ? 'No Route found' : 'No Job code found.'}}</p>\n    </cdk-virtual-scroll-viewport>\n</div>\n\n<div class=\"driver_list\" *ngIf=\"isDriverList\">\n  <div class=\"driver_headingprt\">\n    <h2>Driver List</h2>\n    <button *ngIf=\"driverList.driver_list?.length > 0\" (click)=\"isSmsList = true\">SMS</button>\n    <div class=\"closebtn\" (click)=\"isDriverList = false; preventMouseout = false; isSmsList = false\">\n      <mat-icon>clear</mat-icon>\n    </div>\n  </div>\n  <ul class=\"driverList\" *ngIf=\"driverList && driverList.driver_list\">\n    <li *ngFor=\"let driver of driverList?.driver_list\">\n      <img src=\"assets/images/driver_icon.png\" [alt]=\"driver['driver_name']\" />\n      <div class=\"driver_detail\">\n        <b>{{driver['driver_name']}}</b> <span>{{driver['trucking_company']}}</span>\n        <div class=\"cont_del\">\n          <small>Driver contact: <b>{{driver['driver_phone'] ? driver['driver_phone'] : 'N/A'}}</b></small>\n          <small>Company contact: <b>{{driver['trucking_company_phone'] ? driver['trucking_company_phone'] : 'N/A'}}</b></small>\n        </div>\n      </div>\n    </li>\n    <p *ngIf=\"driverList.driver_list?.length === 0\" style=\"font-weight:700; text-align:center;\">\n      No Driver found\n    </p>\n  </ul>\n  <div class=\"smslist\" *ngIf=\"isSmsList\">\n    <div class=\"heading\">\n      <h2>SMS All Drivers</h2>\n      <div class=\"closebtn\" (click)=\"isSmsList = false\">\n        <mat-icon>clear</mat-icon>\n      </div>\n    </div>\n    <div class=\"detailprt\">\n      <app-sms-card-details-overview [jobValue]=\"driverList\"></app-sms-card-details-overview>\n      <div class=\"form_input\">\n        <mat-form-field class=\"example-full-width\">\n          <textarea matInput placeholder=\"Text here...\" autocomplete=\"nope\" column=\"10\"\n            [formControl]=\"driverMessage\"></textarea>\n          <mat-hint>{{driverMessage.value?.length}} / 256</mat-hint>\n        </mat-form-field>\n        <button *ngIf=\"!messageLoader\" [disabled]=\"!driverMessage.value || driverMessage.invalid\" (click)=\"sendMessage()\">\n          Send SMS\n        </button>\n      </div>\n    </div>\n    <div class=\"loader\">\n      <mat-spinner *ngIf=\"messageLoader\"></mat-spinner>\n    </div>\n  </div>\n</div>\n", styles: [".driver_iconprt{position:absolute;right:10px;top:12px;z-index:9999}.driver_iconprt img{width:25px;height:25px}.driver_list{background:#fff;position:fixed;width:300px;top:10px;left:360px;border-top-left-radius:20px;border-top-right-radius:20px}.driver_list .driver_headingprt{display:flex;justify-content:space-between;align-items:center;padding:0 15px}.driver_list .driver_headingprt button{background:none;border:1px solid #ccc;border-radius:10px;padding:5px 20px}.driver_list .driver_headingprt button:hover{background:#326ad3;color:#fff}.driver_list h2{font-size:20px}.driver_list .driverList{height:300px;overflow:auto}.driver_list .driverList li{display:flex;padding:10px;align-items:flex-start;cursor:pointer;border-bottom:1px solid white;background:#eee}.driver_list .driverList li img{width:35px;height:35px;border-radius:100%;margin-right:10px}.driver_list .driverList li .driver_detail{width:calc(100% - 45px);display:flex;flex-direction:column;justify-content:flex-start}.driver_list .driverList li .driver_detail b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:135px;font-size:.9rem}.driver_list .driverList li .driver_detail span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;font-size:.8rem}.driver_list:after{height:10px;background:#fff;border-bottom-right-radius:20px;border-bottom-left-radius:20px;content:\"\";position:absolute;bottom:-9px;width:100%}.smslist{background:#fff;position:absolute;width:480px;top:0;left:105%;border-radius:20px;padding-bottom:20px}.smslist .heading{display:flex;justify-content:space-between;align-items:center;padding:0 15px}.smslist .detailprt{padding:0 15px}.smslist .detailprt span{display:flex;margin-bottom:12px;font-size:.8rem;align-items:center}.smslist .detailprt span label{font-weight:600;width:37%}.smslist .detailprt .form_input{display:flex;flex-direction:column;font-size:.8rem}.smslist .detailprt .form_input button{background:#326ad3;padding:10px 18px;color:#fff;font-size:.8125rem;border-radius:30px;display:flex;align-self:flex-end}.closebtn{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#f5f5f5}.show_routebtn{font-size:.9rem;margin-bottom:20px;padding:6px 11px;position:absolute;top:8px;right:10px;background-color:transparent;color:#3f51b5;border:1px solid #3f51b5;border-radius:10px;box-shadow:none}.show_routebtn:hover{background-color:#3f51b5;color:#fff}.cont_del{margin-top:10px}.cont_del small{display:block}.jobList ul{margin:0 .93em 0 0;width:100%}.jobList ul li{position:relative;background:#fbfbfb;padding:10px;border-radius:15px;margin-bottom:5px;border:1px solid #fbfbfb;border-left:3px solid #fbfbfb;cursor:pointer;height:inherit;width:15.62em}@media (min-width: 2500px){.jobList ul li{height:7.65vh}}@media (min-width: 3300px){.jobList ul li{height:5.61vh}}.viewroute ul{width:100%}.viewroute ul li{position:relative;background:#fbfbfb;padding:7px 10px;border-radius:15px;margin-bottom:5px;border:1px solid #fbfbfb;border-left:3px solid #fbfbfb;cursor:pointer;height:16.4vh;width:15.62em}@media (min-width: 1600px){.viewroute ul li{height:12.4vh}}.viewroute ul li.active{border:1px solid #39c471;border-left:3px solid #39c471}.loader{position:absolute;height:100%;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:center;pointer-events:none}.example-viewport{height:900px}\n"] }]
+            args: [{ selector: 'app-route-jobcode-list', template: "<div class=\"scrollprt addroutelist\" [class.viewroute]=\"visiblesection('addroute')\"\n  [class.jobList]=\"visiblesection('jobcode')\">\n  <button (click)=\"showRoute()\" [disabled]=\"loader\" *ngIf=\"selectedRoute.selected.length\" class=\"show_routebtn\">Show all\n    route</button>\n    <cdk-virtual-scroll-viewport itemSize=\"50\" [class.jobscroll]=\"visiblesection('jobcode')\" class=\"example-viewport\">\n      <mat-spinner *ngIf=\"loader\"></mat-spinner>\n      <ul *ngIf=\"!loader && data.length > 0\">\n        <li [class.active]=\"route['isActive'] && visiblesection('addroute')\" *ngFor=\"let route of data\">\n            <app-job-code-list-card *ngIf=\"visiblesection('jobcode')\" \n                                    (toggleDrivermenu)=\"toggleDrivermenu($event)\"\n                                    (routeSeletion)=\"selectRoute($event)\" \n                                    [preventCloseDetails]=\"preventDetailsClose\" \n                                    [emitJobdetails]=\"{emitroute, clearJobDetailsFromList}\" \n                                    [route]=\"checkroutes(route)\">\n            </app-job-code-list-card>\n            <app-view-route-list-card *ngIf=\"visiblesection('addroute')\"\n                                      [emitrouteevent]=\"emitroute\" \n                                      [route]=\"route\">\n            </app-view-route-list-card>\n        </li>\n      </ul>\n      <p *ngIf=\"!loader && data.length === 0\">{{visiblesection('addroute') ? 'No Route found' : 'No Job code found.'}}</p>\n    </cdk-virtual-scroll-viewport>\n</div>\n\n<div class=\"driver_list\" *ngIf=\"isDriverList\">\n  <div class=\"driver_headingprt\">\n    <h2>Driver List</h2>\n    <button *ngIf=\"driverList.driver_list?.length > 0\" (click)=\"isSmsList = true\">SMS</button>\n    <div class=\"closebtn\" (click)=\"isDriverList = false; preventMouseout = false; isSmsList = false\">\n      <mat-icon>clear</mat-icon>\n    </div>\n  </div>\n  <ul class=\"driverList\" *ngIf=\"driverList && driverList.driver_list\">\n    <li *ngFor=\"let driver of driverList?.driver_list\">\n      <img src=\"assets/images/driver_icon.png\" [alt]=\"driver['driver_name']\" />\n      <div class=\"driver_detail\">\n        <b>{{driver['driver_name']}}</b> <span>{{driver['trucking_company']}}</span>\n        <div class=\"cont_del\">\n          <small>Driver contact: <b>{{driver['driver_phone'] ? driver['driver_phone'] : 'N/A'}}</b></small>\n          <small>Company contact: <b>{{driver['trucking_company_phone'] ? driver['trucking_company_phone'] : 'N/A'}}</b></small>\n        </div>\n      </div>\n    </li>\n    <p *ngIf=\"driverList.driver_list?.length === 0\" style=\"font-weight:700; text-align:center;\">\n      No Driver found\n    </p>\n  </ul>\n  <div class=\"smslist\" *ngIf=\"isSmsList\">\n    <div class=\"heading\">\n      <h2>SMS All Drivers</h2>\n      <div class=\"closebtn\" (click)=\"isSmsList = false\">\n        <mat-icon>clear</mat-icon>\n      </div>\n    </div>\n    <div class=\"detailprt\">\n      <app-sms-card-details-overview [jobValue]=\"driverList\"></app-sms-card-details-overview>\n      <div class=\"form_input\">\n        <mat-form-field class=\"example-full-width\">\n          <textarea matInput placeholder=\"Text here...\" autocomplete=\"nope\" column=\"10\"\n            [formControl]=\"driverMessage\"></textarea>\n          <mat-hint>{{driverMessage.value?.length}} / 256</mat-hint>\n        </mat-form-field>\n        <button *ngIf=\"!messageLoader\" [disabled]=\"!driverMessage.value || driverMessage.invalid\" (click)=\"sendMessage()\">\n          Send SMS\n        </button>\n      </div>\n    </div>\n    <div class=\"loader\">\n      <mat-spinner *ngIf=\"messageLoader\"></mat-spinner>\n    </div>\n  </div>\n</div>\n", styles: [".driver_iconprt{position:absolute;right:10px;top:12px;z-index:9999}.driver_iconprt img{width:25px;height:25px}.driver_list{background:#fff;position:fixed;width:300px;top:10px;left:360px;border-top-left-radius:20px;border-top-right-radius:20px}.driver_list .driver_headingprt{display:flex;justify-content:space-between;align-items:center;padding:0 15px}.driver_list .driver_headingprt button{background:none;border:1px solid #ccc;border-radius:10px;padding:5px 20px}.driver_list .driver_headingprt button:hover{background:#326ad3;color:#fff}.driver_list h2{font-size:20px}.driver_list .driverList{height:300px;overflow:auto}.driver_list .driverList li{display:flex;padding:10px;align-items:flex-start;cursor:pointer;border-bottom:1px solid white;background:#eee}.driver_list .driverList li img{width:35px;height:35px;border-radius:100%;margin-right:10px}.driver_list .driverList li .driver_detail{width:calc(100% - 45px);display:flex;flex-direction:column;justify-content:flex-start}.driver_list .driverList li .driver_detail b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:135px;font-size:.9rem}.driver_list .driverList li .driver_detail span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;font-size:.8rem}.driver_list:after{height:10px;background:#fff;border-bottom-right-radius:20px;border-bottom-left-radius:20px;content:\"\";position:absolute;bottom:-9px;width:100%}.smslist{background:#fff;position:absolute;width:480px;top:0;left:105%;border-radius:20px;padding-bottom:20px}.smslist .heading{display:flex;justify-content:space-between;align-items:center;padding:0 15px}.smslist .detailprt{padding:0 15px}.smslist .detailprt span{display:flex;margin-bottom:12px;font-size:.8rem;align-items:center}.smslist .detailprt span label{font-weight:600;width:37%}.smslist .detailprt .form_input{display:flex;flex-direction:column;font-size:.8rem}.smslist .detailprt .form_input button{background:#326ad3;padding:10px 18px;color:#fff;font-size:.8125rem;border-radius:30px;display:flex;align-self:flex-end}.closebtn{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#f5f5f5}.show_routebtn{font-size:.9rem;margin-bottom:20px;padding:6px 11px;position:absolute;top:8px;right:10px;background-color:transparent;color:#3f51b5;border:1px solid #3f51b5;border-radius:10px;box-shadow:none}.show_routebtn:hover{background-color:#3f51b5;color:#fff}.cont_del{margin-top:10px}.cont_del small{display:block}.jobList ul{margin:0 .93em 0 0;width:100%}.jobList ul li{position:relative;background:#fbfbfb;padding:10px;border-radius:15px;margin-bottom:5px;border:1px solid #fbfbfb;border-left:3px solid #fbfbfb;cursor:pointer;height:inherit;width:15.62em}@media (min-width: 2500px){.jobList ul li{height:7.65vh}}@media (min-width: 3300px){.jobList ul li{height:5.61vh}}.viewroute ul{width:100%}.viewroute ul li{position:relative;background:#fbfbfb;padding:7px 10px;border-radius:15px;margin-bottom:5px;border:1px solid #fbfbfb;border-left:3px solid #fbfbfb;cursor:pointer;width:15.62em}.viewroute ul li.active{border:1px solid #39c471;border-left:3px solid #39c471}.loader{position:absolute;height:100%;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:center;pointer-events:none}.example-viewport{height:74vh}\n"] }]
         }], ctorParameters: () => [{ type: i1.CoolmapService }, { type: i1.UtilsService }], propDecorators: { loader: [{
                 type: Input
             }], type: [{

package/esm2022/lib/component/route-jobcode-list/view-route-list-card/view-route-list-card.component.mjs

@@ -21,11 +21,11 @@ export class ViewRouteListCardComponent {
         this.utils.routeDetailsUtility.next({ event, route });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ViewRouteListCardComponent, deps: [{ token: i1.UtilsService }, { token: 'memberData' }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ViewRouteListCardComponent, selector: "app-view-route-list-card", inputs: { route: "route", emitrouteevent: "emitrouteevent" }, ngImport: i0, template: "<div class=\"routebox\">\n  <span>\n    <mat-icon>directions</mat-icon>\n    <h2 [ngClass]=\"{'routeheading': route['route_name']}\">\n      {{route['route_name']}}\n    </h2>\n  </span>\n  <h3><ng-container *ngIf=\"config?.repository === 'coolmap'\">{{route['customer_name']}}</ng-container></h3>\n\n  <div class=\"pickdropprt\">\n    <div class=\"pickprt\">\n      <b>\n        <h4>{{route['pickup_location']}}</h4>\n      </b>\n    </div>\n    <div class=\"dropprt\">\n      <b>\n        <h4>{{route['delivery_location']}}</h4>\n      </b>\n    </div>\n  </div>\n  <div class=\"infoicon\" (click)=\"detailsDict('click', route)\" (mouseover)=\"detailsDict(true, route)\"\n    (mouseleave)=\"detailsDict(false, route)\">\n    <img src=\"assets/images/info_icon.png\" [alt]=\"\" />\n  </div>\n  <div class=\"status routestatus\" [ngClass]=\"route['unit']\">{{route['unit']}}</div>\n</div>\n\n", styles: [".routebox span{display:flex;align-items:center}.routebox span h2{margin-left:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;margin-bottom:5px;margin-top:5px;font-size:.95rem}.routebox h3{font-size:.85rem;color:#767676;font-weight:400;margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:325px;margin-bottom:10px}.routebox .pickdropprt{font-size:.8125rem}.routebox .pickdropprt .pickprt{position:relative;display:flex;align-items:center;padding-bottom:6px}.routebox .pickdropprt .pickprt span{padding-left:0;padding-right:20px;display:block}.routebox .pickdropprt .pickprt b{position:relative;font-weight:400}.routebox .pickdropprt .pickprt b:after{background:#000;width:1px;height:100%;left:3px;content:\"\";position:absolute;top:10px}.routebox .pickdropprt .pickprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;max-width:215px}@media (min-width: 1600px){.routebox .pickdropprt .pickprt h4{max-width:265px}}.routebox .pickdropprt .pickprt h4:before{background:#000;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.routebox .pickdropprt .dropprt{position:relative;padding-bottom:10px;display:flex;align-items:center}.routebox .pickdropprt .dropprt span{padding-left:0;padding-right:20px;display:block}.routebox .pickdropprt .dropprt b{position:relative;font-weight:400}.routebox .pickdropprt .dropprt b:after{background:#000;width:1px;height:12px;left:3px;content:\"\";position:absolute;top:-7px}.routebox .pickdropprt .dropprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;max-width:215px}.routebox .pickdropprt .dropprt h4:before{background:#000;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.routebox .infoicon{position:absolute;right:10px;bottom:10px}.routebox .infoicon img{width:20px;height:20px}.routebox .status{position:absolute;border-radius:30px;top:12px;right:40px;font-size:0;color:#fff;text-transform:capitalize;font-weight:500;padding:3px 10px}.routebox .status.routestatus{right:10px;width:20px;height:20px;text-align:center;line-height:20px;padding:0 0 0 1px}.routebox .status.routestatus:first-letter{font-size:.8rem}@media (min-width: 1600px){.routebox .status.routestatus{padding:0;line-height:22px}}.routebox .status.Ton{background:#ff7272}.routebox .status.Load{background:#a3c52e}.routebox .status.Hourly{background:#ae23d1}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ViewRouteListCardComponent, selector: "app-view-route-list-card", inputs: { route: "route", emitrouteevent: "emitrouteevent" }, ngImport: i0, template: "<div class=\"routebox\">\n  <span>\n    <mat-icon>directions</mat-icon>\n    <h2 [ngClass]=\"{'routeheading': route['route_name']}\">\n      {{route['route_name']}}\n    </h2>\n  </span>\n  <h3><ng-container *ngIf=\"config?.repository === 'coolmap'\">{{route['customer_name']}}</ng-container></h3>\n\n  <div class=\"pickdropprt\">\n    <div class=\"pickprt\">\n      <b>\n        <h4>{{route['pickup_location']}}</h4>\n      </b>\n    </div>\n    <div class=\"dropprt\">\n      <b>\n        <h4>{{route['delivery_location']}}</h4>\n      </b>\n    </div>\n  </div>\n  <div class=\"infoicon\" (click)=\"detailsDict('click', route)\" (mouseover)=\"detailsDict(true, route)\"\n    (mouseleave)=\"detailsDict(false, route)\">\n    <img src=\"assets/images/info_icon.png\" [alt]=\"\" />\n  </div>\n  <div class=\"status routestatus\" [ngClass]=\"route['unit']\">{{route['unit']}}</div>\n</div>\n\n", styles: [".routebox span{display:flex;align-items:center}.routebox span h2{margin-left:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;margin-bottom:5px;margin-top:5px;font-size:.95rem}.routebox h3{font-size:.85rem;color:#767676;font-weight:400;margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:325px;margin-bottom:10px}.routebox .pickdropprt{font-size:.8125rem}.routebox .pickdropprt .pickprt{position:relative;display:flex;align-items:center;padding-bottom:6px}.routebox .pickdropprt .pickprt span{padding-left:0;padding-right:20px;display:block}.routebox .pickdropprt .pickprt b{position:relative;font-weight:400}.routebox .pickdropprt .pickprt b:after{background:#000;width:1px;height:100%;left:3px;content:\"\";position:absolute;top:10px}.routebox .pickdropprt .pickprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;font-weight:400;overflow:hidden}@media (min-width: 1600px){.routebox .pickdropprt .pickprt h4{max-width:265px}}.routebox .pickdropprt .pickprt h4:before{background:green;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.routebox .pickdropprt .dropprt{position:relative;padding-bottom:10px;display:flex;align-items:center}.routebox .pickdropprt .dropprt span{padding-left:0;padding-right:20px;display:block}.routebox .pickdropprt .dropprt b{position:relative;font-weight:400}.routebox .pickdropprt .dropprt b:after{background:#000;width:1px;height:12px;left:3px;content:\"\";position:absolute;top:-7px}.routebox .pickdropprt .dropprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;font-weight:400;overflow:hidden}.routebox .pickdropprt .dropprt h4:before{background:red;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.routebox .infoicon{position:absolute;right:10px;top:11px}.routebox .infoicon img{width:20px;height:20px}.routebox .status{position:absolute;border-radius:30px;top:12px;right:40px;font-size:0;color:#fff;text-transform:capitalize;font-weight:500;padding:3px 10px}.routebox .status.routestatus{right:36px;width:20px;height:20px;text-align:center;line-height:20px;padding:0 0 0 1px}.routebox .status.routestatus:first-letter{font-size:.8rem}@media (min-width: 1600px){.routebox .status.routestatus{padding:0;line-height:22px}}.routebox .status.Ton{background:#ff7272}.routebox .status.Load{background:#a3c52e}.routebox .status.Hourly{background:#ae23d1}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ViewRouteListCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-view-route-list-card', template: "<div class=\"routebox\">\n  <span>\n    <mat-icon>directions</mat-icon>\n    <h2 [ngClass]=\"{'routeheading': route['route_name']}\">\n      {{route['route_name']}}\n    </h2>\n  </span>\n  <h3><ng-container *ngIf=\"config?.repository === 'coolmap'\">{{route['customer_name']}}</ng-container></h3>\n\n  <div class=\"pickdropprt\">\n    <div class=\"pickprt\">\n      <b>\n        <h4>{{route['pickup_location']}}</h4>\n      </b>\n    </div>\n    <div class=\"dropprt\">\n      <b>\n        <h4>{{route['delivery_location']}}</h4>\n      </b>\n    </div>\n  </div>\n  <div class=\"infoicon\" (click)=\"detailsDict('click', route)\" (mouseover)=\"detailsDict(true, route)\"\n    (mouseleave)=\"detailsDict(false, route)\">\n    <img src=\"assets/images/info_icon.png\" [alt]=\"\" />\n  </div>\n  <div class=\"status routestatus\" [ngClass]=\"route['unit']\">{{route['unit']}}</div>\n</div>\n\n", styles: [".routebox span{display:flex;align-items:center}.routebox span h2{margin-left:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;margin-bottom:5px;margin-top:5px;font-size:.95rem}.routebox h3{font-size:.85rem;color:#767676;font-weight:400;margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:325px;margin-bottom:10px}.routebox .pickdropprt{font-size:.8125rem}.routebox .pickdropprt .pickprt{position:relative;display:flex;align-items:center;padding-bottom:6px}.routebox .pickdropprt .pickprt span{padding-left:0;padding-right:20px;display:block}.routebox .pickdropprt .pickprt b{position:relative;font-weight:400}.routebox .pickdropprt .pickprt b:after{background:#000;width:1px;height:100%;left:3px;content:\"\";position:absolute;top:10px}.routebox .pickdropprt .pickprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;max-width:215px}@media (min-width: 1600px){.routebox .pickdropprt .pickprt h4{max-width:265px}}.routebox .pickdropprt .pickprt h4:before{background:#000;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.routebox .pickdropprt .dropprt{position:relative;padding-bottom:10px;display:flex;align-items:center}.routebox .pickdropprt .dropprt span{padding-left:0;padding-right:20px;display:block}.routebox .pickdropprt .dropprt b{position:relative;font-weight:400}.routebox .pickdropprt .dropprt b:after{background:#000;width:1px;height:12px;left:3px;content:\"\";position:absolute;top:-7px}.routebox .pickdropprt .dropprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;max-width:215px}.routebox .pickdropprt .dropprt h4:before{background:#000;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.routebox .infoicon{position:absolute;right:10px;bottom:10px}.routebox .infoicon img{width:20px;height:20px}.routebox .status{position:absolute;border-radius:30px;top:12px;right:40px;font-size:0;color:#fff;text-transform:capitalize;font-weight:500;padding:3px 10px}.routebox .status.routestatus{right:10px;width:20px;height:20px;text-align:center;line-height:20px;padding:0 0 0 1px}.routebox .status.routestatus:first-letter{font-size:.8rem}@media (min-width: 1600px){.routebox .status.routestatus{padding:0;line-height:22px}}.routebox .status.Ton{background:#ff7272}.routebox .status.Load{background:#a3c52e}.routebox .status.Hourly{background:#ae23d1}\n"] }]
+            args: [{ selector: 'app-view-route-list-card', template: "<div class=\"routebox\">\n  <span>\n    <mat-icon>directions</mat-icon>\n    <h2 [ngClass]=\"{'routeheading': route['route_name']}\">\n      {{route['route_name']}}\n    </h2>\n  </span>\n  <h3><ng-container *ngIf=\"config?.repository === 'coolmap'\">{{route['customer_name']}}</ng-container></h3>\n\n  <div class=\"pickdropprt\">\n    <div class=\"pickprt\">\n      <b>\n        <h4>{{route['pickup_location']}}</h4>\n      </b>\n    </div>\n    <div class=\"dropprt\">\n      <b>\n        <h4>{{route['delivery_location']}}</h4>\n      </b>\n    </div>\n  </div>\n  <div class=\"infoicon\" (click)=\"detailsDict('click', route)\" (mouseover)=\"detailsDict(true, route)\"\n    (mouseleave)=\"detailsDict(false, route)\">\n    <img src=\"assets/images/info_icon.png\" [alt]=\"\" />\n  </div>\n  <div class=\"status routestatus\" [ngClass]=\"route['unit']\">{{route['unit']}}</div>\n</div>\n\n", styles: [".routebox span{display:flex;align-items:center}.routebox span h2{margin-left:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;margin-bottom:5px;margin-top:5px;font-size:.95rem}.routebox h3{font-size:.85rem;color:#767676;font-weight:400;margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:325px;margin-bottom:10px}.routebox .pickdropprt{font-size:.8125rem}.routebox .pickdropprt .pickprt{position:relative;display:flex;align-items:center;padding-bottom:6px}.routebox .pickdropprt .pickprt span{padding-left:0;padding-right:20px;display:block}.routebox .pickdropprt .pickprt b{position:relative;font-weight:400}.routebox .pickdropprt .pickprt b:after{background:#000;width:1px;height:100%;left:3px;content:\"\";position:absolute;top:10px}.routebox .pickdropprt .pickprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;font-weight:400;overflow:hidden}@media (min-width: 1600px){.routebox .pickdropprt .pickprt h4{max-width:265px}}.routebox .pickdropprt .pickprt h4:before{background:green;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.routebox .pickdropprt .dropprt{position:relative;padding-bottom:10px;display:flex;align-items:center}.routebox .pickdropprt .dropprt span{padding-left:0;padding-right:20px;display:block}.routebox .pickdropprt .dropprt b{position:relative;font-weight:400}.routebox .pickdropprt .dropprt b:after{background:#000;width:1px;height:12px;left:3px;content:\"\";position:absolute;top:-7px}.routebox .pickdropprt .dropprt h4{position:relative;padding-left:15px;margin:0;line-height:18px;font-weight:400;overflow:hidden}.routebox .pickdropprt .dropprt h4:before{background:red;top:4px;left:0;position:absolute;content:\"\";width:7px;height:7px;border-radius:100%}.routebox .infoicon{position:absolute;right:10px;top:11px}.routebox .infoicon img{width:20px;height:20px}.routebox .status{position:absolute;border-radius:30px;top:12px;right:40px;font-size:0;color:#fff;text-transform:capitalize;font-weight:500;padding:3px 10px}.routebox .status.routestatus{right:36px;width:20px;height:20px;text-align:center;line-height:20px;padding:0 0 0 1px}.routebox .status.routestatus:first-letter{font-size:.8rem}@media (min-width: 1600px){.routebox .status.routestatus{padding:0;line-height:22px}}.routebox .status.Ton{background:#ff7272}.routebox .status.Load{background:#a3c52e}.routebox .status.Hourly{background:#ae23d1}\n"] }]
         }], ctorParameters: () => [{ type: i1.UtilsService }, { type: i1.CoolmapConfigModel, decorators: [{
                     type: Inject,
                     args: ['memberData']