@aggdirect/coolmap 2.7.1 → 2.7.3

package/fesm2022/aggdirect-coolmap.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Component, ViewChild, EventEmitter, Output, Inject, Input, NgModule } from '@angular/core';
-import { Subject, takeUntil, startWith, map, filter, fromEvent, distinctUntilChanged, debounceTime } from 'rxjs';
+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 i2 from '@angular/common';
@@ -31,16 +31,14 @@ import * as i7$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i9 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
-import * as i1$2 from '@angular/material/dialog';
+import * as i1$1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i6 from '@angular/material/core';
 import { MatNativeDateModule, MatPseudoCheckboxModule } from '@angular/material/core';
 import { SelectionModel } from '@angular/cdk/collections';
 import * as i8 from '@angular/cdk/scrolling';
 import { ScrollingModule } from '@angular/cdk/scrolling';
-import * as i1$1 from '@angular/router';
-import { NavigationEnd } from '@angular/router';
-import * as i11 from '@angular/material/datepicker';
+import * as i10$1 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 
 class MapComponent {
@@ -664,11 +662,11 @@ class AddRouteNavComponent {
         this.destroyer$.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AddRouteNavComponent, deps: [{ token: i1.UtilsService }, { token: 'memberData' }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", 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\">\n  <div class=\"logo\">\n    <img src=\"assets/images/logo.png\" alt=\"logo\" />\n  </div>\n  <div class=\"heading m-20\">\n    <h1>View Route</h1>\n    <button mat-raised-button (click)=\"showAddForm()\">\n      <mat-icon>add_circle_outline</mat-icon> Add route\n    </button>\n  </div>\n\n  <div class=\"search-panel\">\n    <div class=\"w-100\">\n      <form [formGroup]=\"filterForm\">\n        <mat-form-field class=\"full-width\" [class.disabled]=\"loaderVal\">\n          <input matInput [matChipInputFor]=\"chipList\" formControlName=\"search\" [matAutocomplete]=\"auto\"\n            [disabled]=\"loaderVal\" placeholder=\"Search\">\n          <mat-icon matSuffix *ngIf=\"!utils.conveySearchIcon(filterForm.value.search)\">search</mat-icon>\n          <button mat-button matSuffix mat-icon-button aria-label=\"Clear\" *ngIf=\"utils.conveySearchIcon(filterForm.value.search)\"\n            (click)=\"filterForm.reset()\">\n            <mat-icon>close</mat-icon>\n          </button>\n          <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" class=\"whole_width\">\n            <mat-option *ngFor=\"let option of filteredOptions | async\" (onSelectionChange)=\"filterSearch($event)\"\n              [value]=\"option\">\n              {{option.type | titlecase }}: {{option['label']}}\n            </mat-option>\n          </mat-autocomplete>\n        </mat-form-field>\n      </form>\n      <div class=\"chip-list\">\n        <mat-chip-grid #chipList aria-label=\"Filter selection\">\n          @for (filter of filters; track filter) {\n            <mat-chip-row class=\"chip-grid\" (removed)=\"removeFromFilter(filter)\">\n              {{filter.type | titlecase }}: {{filter.name}}\n              <button matChipRemove>\n                <mat-icon>cancel</mat-icon>\n              </button>\n            </mat-chip-row>\n          }\n        </mat-chip-grid>\n      </div>\n    </div>\n  </div>\n  <app-route-jobcode-list [type]=\"'addroute'\" [currentNav]=\"navValue\" [searchTerm]=\"filters\" [data]=\"routes\" [loader]=\"loaderVal\" (emitroute)=\"getRoute($event)\"></app-route-jobcode-list>\n</div>\n", styles: [".chip-grid{width:auto;height:auto}:host ::ng-deep .mdc-evolution-chip-set__chips{max-width:100%}:host ::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,:host ::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__action--primary,:host ::ng-deep .mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:hidden}:host ::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding:auto}\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: 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.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i9.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { 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: i9.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i10.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i10.MatIconButton, selector: "button[mat-icon-button]", 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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", 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\">\n  <div class=\"logo\">\n    <img src=\"assets/images/logo.png\" alt=\"logo\" />\n  </div>\n  <div class=\"heading m-20\">\n    <h1>View Route</h1>\n    <button mat-raised-button (click)=\"showAddForm()\">\n      <mat-icon>add_circle_outline</mat-icon> Add route\n    </button>\n  </div>\n\n  <div class=\"search-panel\">\n    <div class=\"w-100\">\n      <form [formGroup]=\"filterForm\">\n        <mat-form-field class=\"full-width\" [class.disabled]=\"loaderVal\">\n          <input matInput [matChipInputFor]=\"chipList\" formControlName=\"search\" [matAutocomplete]=\"auto\"\n            [disabled]=\"loaderVal\" placeholder=\"Search\">\n          <mat-icon matSuffix *ngIf=\"!utils.conveySearchIcon(filterForm.value.search)\">search</mat-icon>\n          <button mat-button matSuffix mat-icon-button aria-label=\"Clear\" *ngIf=\"utils.conveySearchIcon(filterForm.value.search)\"\n            (click)=\"filterForm.reset()\">\n            <mat-icon>close</mat-icon>\n          </button>\n          <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" class=\"whole_width\">\n            <mat-option *ngFor=\"let option of filteredOptions | async\" (onSelectionChange)=\"filterSearch($event)\"\n              [value]=\"option\">\n              {{option.type | titlecase }}: {{option['label']}}\n            </mat-option>\n          </mat-autocomplete>\n        </mat-form-field>\n      </form>\n      <div class=\"chip-list\">\n        <mat-chip-grid #chipList aria-label=\"Filter selection\">\n          @for (filter of filters; track filter) {\n            <mat-chip-row class=\"chip-grid\" (removed)=\"removeFromFilter(filter)\">\n              {{filter.type | titlecase }}: {{filter.name}}\n              <button matChipRemove>\n                <mat-icon>cancel</mat-icon>\n              </button>\n            </mat-chip-row>\n          }\n        </mat-chip-grid>\n      </div>\n    </div>\n  </div>\n  <app-route-jobcode-list [type]=\"'addroute'\" [currentNav]=\"navValue\" [searchTerm]=\"filters\" [data]=\"routes\" [loader]=\"loaderVal\" (emitroute)=\"getRoute($event)\"></app-route-jobcode-list>\n</div>\n", styles: [".chip-grid{width:auto;height:auto}:host ::ng-deep .mdc-evolution-chip-set__chips{max-width:100%}:host ::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,:host ::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__action--primary,:host ::ng-deep .mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:balance}:host ::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding:auto}\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: 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.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i9.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { 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: i9.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i10.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i10.MatIconButton, selector: "button[mat-icon-button]", 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: "17.3.2", ngImport: i0, type: AddRouteNavComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-add-route-nav', template: "<div class=\"nav_body\">\n  <div class=\"logo\">\n    <img src=\"assets/images/logo.png\" alt=\"logo\" />\n  </div>\n  <div class=\"heading m-20\">\n    <h1>View Route</h1>\n    <button mat-raised-button (click)=\"showAddForm()\">\n      <mat-icon>add_circle_outline</mat-icon> Add route\n    </button>\n  </div>\n\n  <div class=\"search-panel\">\n    <div class=\"w-100\">\n      <form [formGroup]=\"filterForm\">\n        <mat-form-field class=\"full-width\" [class.disabled]=\"loaderVal\">\n          <input matInput [matChipInputFor]=\"chipList\" formControlName=\"search\" [matAutocomplete]=\"auto\"\n            [disabled]=\"loaderVal\" placeholder=\"Search\">\n          <mat-icon matSuffix *ngIf=\"!utils.conveySearchIcon(filterForm.value.search)\">search</mat-icon>\n          <button mat-button matSuffix mat-icon-button aria-label=\"Clear\" *ngIf=\"utils.conveySearchIcon(filterForm.value.search)\"\n            (click)=\"filterForm.reset()\">\n            <mat-icon>close</mat-icon>\n          </button>\n          <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" class=\"whole_width\">\n            <mat-option *ngFor=\"let option of filteredOptions | async\" (onSelectionChange)=\"filterSearch($event)\"\n              [value]=\"option\">\n              {{option.type | titlecase }}: {{option['label']}}\n            </mat-option>\n          </mat-autocomplete>\n        </mat-form-field>\n      </form>\n      <div class=\"chip-list\">\n        <mat-chip-grid #chipList aria-label=\"Filter selection\">\n          @for (filter of filters; track filter) {\n            <mat-chip-row class=\"chip-grid\" (removed)=\"removeFromFilter(filter)\">\n              {{filter.type | titlecase }}: {{filter.name}}\n              <button matChipRemove>\n                <mat-icon>cancel</mat-icon>\n              </button>\n            </mat-chip-row>\n          }\n        </mat-chip-grid>\n      </div>\n    </div>\n  </div>\n  <app-route-jobcode-list [type]=\"'addroute'\" [currentNav]=\"navValue\" [searchTerm]=\"filters\" [data]=\"routes\" [loader]=\"loaderVal\" (emitroute)=\"getRoute($event)\"></app-route-jobcode-list>\n</div>\n", styles: [".chip-grid{width:auto;height:auto}:host ::ng-deep .mdc-evolution-chip-set__chips{max-width:100%}:host ::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,:host ::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__action--primary,:host ::ng-deep .mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:hidden}:host ::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding:auto}\n"] }]
+            args: [{ selector: 'app-add-route-nav', template: "<div class=\"nav_body\">\n  <div class=\"logo\">\n    <img src=\"assets/images/logo.png\" alt=\"logo\" />\n  </div>\n  <div class=\"heading m-20\">\n    <h1>View Route</h1>\n    <button mat-raised-button (click)=\"showAddForm()\">\n      <mat-icon>add_circle_outline</mat-icon> Add route\n    </button>\n  </div>\n\n  <div class=\"search-panel\">\n    <div class=\"w-100\">\n      <form [formGroup]=\"filterForm\">\n        <mat-form-field class=\"full-width\" [class.disabled]=\"loaderVal\">\n          <input matInput [matChipInputFor]=\"chipList\" formControlName=\"search\" [matAutocomplete]=\"auto\"\n            [disabled]=\"loaderVal\" placeholder=\"Search\">\n          <mat-icon matSuffix *ngIf=\"!utils.conveySearchIcon(filterForm.value.search)\">search</mat-icon>\n          <button mat-button matSuffix mat-icon-button aria-label=\"Clear\" *ngIf=\"utils.conveySearchIcon(filterForm.value.search)\"\n            (click)=\"filterForm.reset()\">\n            <mat-icon>close</mat-icon>\n          </button>\n          <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" class=\"whole_width\">\n            <mat-option *ngFor=\"let option of filteredOptions | async\" (onSelectionChange)=\"filterSearch($event)\"\n              [value]=\"option\">\n              {{option.type | titlecase }}: {{option['label']}}\n            </mat-option>\n          </mat-autocomplete>\n        </mat-form-field>\n      </form>\n      <div class=\"chip-list\">\n        <mat-chip-grid #chipList aria-label=\"Filter selection\">\n          @for (filter of filters; track filter) {\n            <mat-chip-row class=\"chip-grid\" (removed)=\"removeFromFilter(filter)\">\n              {{filter.type | titlecase }}: {{filter.name}}\n              <button matChipRemove>\n                <mat-icon>cancel</mat-icon>\n              </button>\n            </mat-chip-row>\n          }\n        </mat-chip-grid>\n      </div>\n    </div>\n  </div>\n  <app-route-jobcode-list [type]=\"'addroute'\" [currentNav]=\"navValue\" [searchTerm]=\"filters\" [data]=\"routes\" [loader]=\"loaderVal\" (emitroute)=\"getRoute($event)\"></app-route-jobcode-list>\n</div>\n", styles: [".chip-grid{width:auto;height:auto}:host ::ng-deep .mdc-evolution-chip-set__chips{max-width:100%}:host ::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,:host ::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__action--primary,:host ::ng-deep .mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:balance}:host ::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding:auto}\n"] }]
         }], ctorParameters: () => [{ type: i1.UtilsService }, { type: i1.CoolmapConfigModel, decorators: [{
                     type: Inject,
                     args: ['memberData']
@@ -685,7 +683,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
             }] } });
 
 class JobCodeNavComponent {
-    route;
     utils;
     config;
     filterForm = new FormGroup({ search: new FormControl() });
@@ -700,8 +697,7 @@ class JobCodeNavComponent {
     destroyer$ = new Subject();
     customerRepoDetails;
     selectedDate;
-    constructor(route, utils, config) {
-        this.route = route;
+    constructor(utils, config) {
         this.utils = utils;
         this.config = config;
         this.selectedDate = this.utils.getDateFormat(new Date());
@@ -712,13 +708,6 @@ class JobCodeNavComponent {
             else
                 this.loaderVal = true;
         });
-        this.route.events
-            .pipe(filter((event) => event instanceof NavigationEnd))
-            .subscribe((event) => {
-            console.log(`The current event is : ${event.id} | 
-                 ${event.url}`);
-            this.loadData(this.selectedDate);
-        });
     }
     ngOnChanges(changes) {
         if (changes['customerRepoDetails'] &&
@@ -756,9 +745,11 @@ class JobCodeNavComponent {
                     });
                 let projectName = window.location.href.split('project=').pop();
                 projectName = projectName.toLowerCase();
+                console.log('project name = ', projectName);
                 this.listData = this.listData.filter((ele) => {
                     const project = ele.project.toLowerCase();
                     let adjustedProject = project.replace(' ', '_');
+                    console.log('adjusted project = ', adjustedProject);
                     return adjustedProject === projectName;
                 });
                 this.listData.forEach((ele) => {
@@ -806,13 +797,13 @@ class JobCodeNavComponent {
         this.destroyer$.next(true);
         this.destroyer$.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: JobCodeNavComponent, deps: [{ token: i1$1.Router }, { token: i1.UtilsService }, { token: 'memberData' }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: JobCodeNavComponent, selector: "app-job-code-nav", inputs: { customerRepoDetails: "customerRepoDetails" }, outputs: { jobemit: "jobemit", clearJobDetails: "clearJobDetails" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"nav_body\">\n  <div class=\"search-panel\">\n    <div class=\"datepicker\">\n      <mat-form-field>\n        <mat-label>Choose a date</mat-label>\n        <input readonly matInput (click)=\"picker.open()\" [disabled]=\"loaderVal\"  [(ngModel)]=\"dateValue\" [matDatepicker]=\"picker\" (dateChange)=\"getDate($event)\">\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-datepicker #picker></mat-datepicker>\n      </mat-form-field>\n    </div>\n    <div class=\"search\">\n    <form [formGroup]=\"filterForm\">\n      <mat-form-field class=\"full-width\" [class.disabled]=\"loaderVal\">\n        <input matInput [matChipInputFor]=\"chipList\" formControlName=\"search\" [matAutocomplete]=\"auto\"\n          [disabled]=\"loaderVal\" placeholder=\"Search\">\n          <mat-icon matSuffix *ngIf=\"!utils.conveySearchIcon(filterForm.value.search)\">search</mat-icon>\n          <button mat-button \n            matSuffix \n            mat-icon-button \n            aria-label=\"Clear\" \n            *ngIf=\"utils.conveySearchIcon(filterForm.value.search)\" (click)=\"filterForm.reset()\">\n            <mat-icon>close</mat-icon>\n          </button>\n        <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" class=\"whole_width\">\n          <mat-option *ngFor=\"let option of filteredOptions | async\" (onSelectionChange)=\"filterSearch($event)\"\n            [value]=\"option\">\n            {{option.type | titlecase }}: {{option['label']}}\n          </mat-option>\n        </mat-autocomplete>\n      </mat-form-field>\n    </form>\n    </div>\n\n    <div class=\"chip-list\">\n      <mat-chip-grid #chipList aria-label=\"Filter selection\">\n        @for (filter of filters; track filter) {\n          <mat-chip-row class=\"chip-grid\" (removed)=\"removeFromFilter(filter)\">\n            {{filter.type | titlecase }}: {{filter.name}}\n            <button matChipRemove>\n              <mat-icon>cancel</mat-icon>\n            </button>\n          </mat-chip-row>\n        }\n      </mat-chip-grid>\n    </div>\n  </div>\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>\n</div>\n", styles: [".search-panel .datepicker,.search-panel .search{width:47%}.chip-grid{width:auto;height:auto}\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: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i9.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { 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: i9.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i11.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i11.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-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i10.MatIconButton, selector: "button[mat-icon-button]", 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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: JobCodeNavComponent, deps: [{ token: i1.UtilsService }, { token: 'memberData' }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: JobCodeNavComponent, selector: "app-job-code-nav", inputs: { customerRepoDetails: "customerRepoDetails" }, outputs: { jobemit: "jobemit", clearJobDetails: "clearJobDetails" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"nav_body\">\n  <div class=\"search-panel\">\n    <div class=\"datepicker\">\n      <mat-form-field>\n        <mat-label>Choose a date</mat-label>\n        <input readonly matInput (click)=\"picker.open()\" [disabled]=\"loaderVal\"  [(ngModel)]=\"dateValue\" [matDatepicker]=\"picker\" (dateChange)=\"getDate($event)\">\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-datepicker #picker></mat-datepicker>\n      </mat-form-field>\n    </div>\n    <div class=\"search\">\n    <form [formGroup]=\"filterForm\">\n      <mat-form-field class=\"full-width\" [class.disabled]=\"loaderVal\">\n        <input matInput [matChipInputFor]=\"chipList\" formControlName=\"search\" [matAutocomplete]=\"auto\"\n          [disabled]=\"loaderVal\" placeholder=\"Search\">\n          <mat-icon matSuffix *ngIf=\"!utils.conveySearchIcon(filterForm.value.search)\">search</mat-icon>\n          <button mat-button \n            matSuffix \n            mat-icon-button \n            aria-label=\"Clear\" \n            *ngIf=\"utils.conveySearchIcon(filterForm.value.search)\" (click)=\"filterForm.reset()\">\n            <mat-icon>close</mat-icon>\n          </button>\n        <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" class=\"whole_width\">\n          <mat-option *ngFor=\"let option of filteredOptions | async\" (onSelectionChange)=\"filterSearch($event)\"\n            [value]=\"option\">\n            {{option.type | titlecase }}: {{option['label']}}\n          </mat-option>\n        </mat-autocomplete>\n      </mat-form-field>\n    </form>\n    </div>\n\n    <div class=\"chip-list\">\n      <mat-chip-grid #chipList aria-label=\"Filter selection\">\n        @for (filter of filters; track filter) {\n          <mat-chip-row class=\"chip-grid\" (removed)=\"removeFromFilter(filter)\">\n            {{filter.type | titlecase }}: {{filter.name}}\n            <button matChipRemove>\n              <mat-icon>cancel</mat-icon>\n            </button>\n          </mat-chip-row>\n        }\n      </mat-chip-grid>\n    </div>\n  </div>\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>\n</div>\n", styles: [".search-panel .datepicker,.search-panel .search{width:47%}.chip-grid{width:auto;height:auto}:host ::ng-deep .mdc-evolution-chip-set__chips{max-width:100%}:host ::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,:host ::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__action--primary,:host ::ng-deep .mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:balance}:host ::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding:auto}\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: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i9.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { 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: i9.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { 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-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i10.MatIconButton, selector: "button[mat-icon-button]", 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: "17.3.2", ngImport: i0, type: JobCodeNavComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-job-code-nav', template: "<div class=\"nav_body\">\n  <div class=\"search-panel\">\n    <div class=\"datepicker\">\n      <mat-form-field>\n        <mat-label>Choose a date</mat-label>\n        <input readonly matInput (click)=\"picker.open()\" [disabled]=\"loaderVal\"  [(ngModel)]=\"dateValue\" [matDatepicker]=\"picker\" (dateChange)=\"getDate($event)\">\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-datepicker #picker></mat-datepicker>\n      </mat-form-field>\n    </div>\n    <div class=\"search\">\n    <form [formGroup]=\"filterForm\">\n      <mat-form-field class=\"full-width\" [class.disabled]=\"loaderVal\">\n        <input matInput [matChipInputFor]=\"chipList\" formControlName=\"search\" [matAutocomplete]=\"auto\"\n          [disabled]=\"loaderVal\" placeholder=\"Search\">\n          <mat-icon matSuffix *ngIf=\"!utils.conveySearchIcon(filterForm.value.search)\">search</mat-icon>\n          <button mat-button \n            matSuffix \n            mat-icon-button \n            aria-label=\"Clear\" \n            *ngIf=\"utils.conveySearchIcon(filterForm.value.search)\" (click)=\"filterForm.reset()\">\n            <mat-icon>close</mat-icon>\n          </button>\n        <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" class=\"whole_width\">\n          <mat-option *ngFor=\"let option of filteredOptions | async\" (onSelectionChange)=\"filterSearch($event)\"\n            [value]=\"option\">\n            {{option.type | titlecase }}: {{option['label']}}\n          </mat-option>\n        </mat-autocomplete>\n      </mat-form-field>\n    </form>\n    </div>\n\n    <div class=\"chip-list\">\n      <mat-chip-grid #chipList aria-label=\"Filter selection\">\n        @for (filter of filters; track filter) {\n          <mat-chip-row class=\"chip-grid\" (removed)=\"removeFromFilter(filter)\">\n            {{filter.type | titlecase }}: {{filter.name}}\n            <button matChipRemove>\n              <mat-icon>cancel</mat-icon>\n            </button>\n          </mat-chip-row>\n        }\n      </mat-chip-grid>\n    </div>\n  </div>\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>\n</div>\n", styles: [".search-panel .datepicker,.search-panel .search{width:47%}.chip-grid{width:auto;height:auto}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.Router }, { type: i1.UtilsService }, { type: i1.CoolmapConfigModel, decorators: [{
+            args: [{ selector: 'app-job-code-nav', template: "<div class=\"nav_body\">\n  <div class=\"search-panel\">\n    <div class=\"datepicker\">\n      <mat-form-field>\n        <mat-label>Choose a date</mat-label>\n        <input readonly matInput (click)=\"picker.open()\" [disabled]=\"loaderVal\"  [(ngModel)]=\"dateValue\" [matDatepicker]=\"picker\" (dateChange)=\"getDate($event)\">\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-datepicker #picker></mat-datepicker>\n      </mat-form-field>\n    </div>\n    <div class=\"search\">\n    <form [formGroup]=\"filterForm\">\n      <mat-form-field class=\"full-width\" [class.disabled]=\"loaderVal\">\n        <input matInput [matChipInputFor]=\"chipList\" formControlName=\"search\" [matAutocomplete]=\"auto\"\n          [disabled]=\"loaderVal\" placeholder=\"Search\">\n          <mat-icon matSuffix *ngIf=\"!utils.conveySearchIcon(filterForm.value.search)\">search</mat-icon>\n          <button mat-button \n            matSuffix \n            mat-icon-button \n            aria-label=\"Clear\" \n            *ngIf=\"utils.conveySearchIcon(filterForm.value.search)\" (click)=\"filterForm.reset()\">\n            <mat-icon>close</mat-icon>\n          </button>\n        <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" class=\"whole_width\">\n          <mat-option *ngFor=\"let option of filteredOptions | async\" (onSelectionChange)=\"filterSearch($event)\"\n            [value]=\"option\">\n            {{option.type | titlecase }}: {{option['label']}}\n          </mat-option>\n        </mat-autocomplete>\n      </mat-form-field>\n    </form>\n    </div>\n\n    <div class=\"chip-list\">\n      <mat-chip-grid #chipList aria-label=\"Filter selection\">\n        @for (filter of filters; track filter) {\n          <mat-chip-row class=\"chip-grid\" (removed)=\"removeFromFilter(filter)\">\n            {{filter.type | titlecase }}: {{filter.name}}\n            <button matChipRemove>\n              <mat-icon>cancel</mat-icon>\n            </button>\n          </mat-chip-row>\n        }\n      </mat-chip-grid>\n    </div>\n  </div>\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>\n</div>\n", styles: [".search-panel .datepicker,.search-panel .search{width:47%}.chip-grid{width:auto;height:auto}:host ::ng-deep .mdc-evolution-chip-set__chips{max-width:100%}:host ::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,:host ::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__action--primary,:host ::ng-deep .mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:balance}:host ::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding:auto}\n"] }]
+        }], ctorParameters: () => [{ type: i1.UtilsService }, { type: i1.CoolmapConfigModel, decorators: [{
                     type: Inject,
                     args: ['memberData']
                 }] }], propDecorators: { jobemit: [{
@@ -1169,13 +1160,13 @@ class DialogComponent {
         });
     }
     onClose(result) { this.dialogRef.close(result); }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: DialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: DialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: DialogComponent, selector: "app-dialog", ngImport: i0, template: "<div class=\"dialogbox\">\n  <h2>{{body}}</h2>\n  <div class=\"twobtnprt\">\n    <button class=\"delbtn\" (click)=\"onClose(true)\">{{positive}}</button>\n    <button class=\"closebtn\" (click)=\"onClose(false)\">{{negative}}</button>\n  </div>\n</div>\n", styles: [".dialogbox{display:flex;flex-direction:column}.dialogbox h2{font-size:1.5rem}.dialogbox .twobtnprt{display:flex;justify-content:center;margin-top:10px}.closebtn{background:#000;color:#fff;border-radius:30px;padding:10px 18px;margin:0 10px;font-size:1rem}.delbtn{background:red;color:#fff;border-radius:30px;padding:10px 18px;margin:0 10px;font-size:1rem}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-dialog', template: "<div class=\"dialogbox\">\n  <h2>{{body}}</h2>\n  <div class=\"twobtnprt\">\n    <button class=\"delbtn\" (click)=\"onClose(true)\">{{positive}}</button>\n    <button class=\"closebtn\" (click)=\"onClose(false)\">{{negative}}</button>\n  </div>\n</div>\n", styles: [".dialogbox{display:flex;flex-direction:column}.dialogbox h2{font-size:1.5rem}.dialogbox .twobtnprt{display:flex;justify-content:center;margin-top:10px}.closebtn{background:#000;color:#fff;border-radius:30px;padding:10px 18px;margin:0 10px;font-size:1rem}.delbtn{background:red;color:#fff;border-radius:30px;padding:10px 18px;margin:0 10px;font-size:1rem}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }] });
@@ -1497,13 +1488,13 @@ class AddRouteComponent {
         this.destroyer$.next(true);
         this.destroyer$.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AddRouteComponent, deps: [{ token: i1.CoolmapService }, { token: i1.UtilsService }, { token: i1$2.MatDialog }, { token: 'memberData' }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AddRouteComponent, deps: [{ token: i1.CoolmapService }, { token: i1.UtilsService }, { token: i1$1.MatDialog }, { token: 'memberData' }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: AddRouteComponent, selector: "app-add-route", inputs: { routeData: "routeData", customerRepoDetails: "customerRepoDetails" }, outputs: { changeNav: "changeNav", updateRouteList: "updateRouteList" }, viewQueries: [{ propertyName: "filterPickup", first: true, predicate: ["filterPickup"], descendants: true }, { propertyName: "filterDelivery", first: true, predicate: ["filterDelivery"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"addroutebox\">\n  <div class=\"routedetailbox\" *ngIf=\"enablePopUp\">\n    <div class=\"closebtnroutedetail\">\n      <mat-icon (click)=\"prevantPopupClose = false; enablePopUp = false;\">clear</mat-icon>\n    </div>\n      <lib-route-info-card [propData]=\"{className: 'routeCard', repository: config['repository']}\" [popupData]=\"popupDetails\"></lib-route-info-card>\n    <div class=\"createTxt\">\n      <small>\n        Created by {{popupDetails['created_by_name']}} on {{popupDetails['created_at']}}\n      </small>\n      <button class=\"editbtn\" (click)=\"editEvent()\">Edit</button>\n    </div>\n  </div>\n  <div class=\"add_add_route_box\" cdkDrag [style.visibility]=\"!enableForm ? 'hidden' : 'visible'\">\n    <div class=\"topheadingprt\">\n      <h2> {{routeId? 'EDIT' : 'ADD'}} ROUTE </h2>\n      <div class=\"buttonprt\">\n        <button *ngIf=\"routeId\" class=\"delbtn\" (click)=\"openDialog()\">Delete</button>\n        <button mat-raised-button type=\"submit\" class=\"closebtn\" (click)=\"changeNav.next('Addroute')\">Close</button>\n      </div>\n    </div>\n    <form [formGroup]=\"addRouteForm\">\n      <div class=\"route_form_area\">\n        <div class=\"col-6\">\n          <mat-form-field>\n            <mat-label>Route Name</mat-label>\n            <input matInput formControlName=\"route_name\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\">\n            <mat-error *ngIf=\"addRouteForm.controls['route_name'].hasError('required')\">\n              Route Name is required\n            </mat-error>\n          </mat-form-field>\n        </div>\n        <div class=\"col-6\">\n          <mat-form-field>\n            <mat-label>Customer_name</mat-label>\n            <input type=\"text\" placeholder=\"Customer Name\" matInput formControlName=\"customer_name\" [matAutocomplete]=\"auto\" (mousedown)=\"$event.stopPropagation()\">\n            <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\n              <mat-option *ngFor=\"let customer of customersList$ | async\" [value]=\"customer['customer_name']\">\n                {{customer['customer_name']}}\n              </mat-option>\n            </mat-autocomplete>\n            <mat-error *ngIf=\"addRouteForm.controls['customer_name'].hasError('required')\">\n              Customer name is required.\n            </mat-error>\n          </mat-form-field>\n        </div>\n        <div class=\"col-6\">\n          <mat-form-field>\n            <mat-label>Pickup</mat-label>\n            <input type=\"text\" placeholder=\"Search...\" matInput #filterPickup [matAutocomplete]=\"pickupAutocomplete\"\n              formControlName=\"pickup_location\" (mousedown)=\"$event.stopPropagation()\">\n\n            <mat-autocomplete #pickupAutocomplete=\"matAutocomplete\">\n              <mat-option (click)=\"selectedLongLat('pickup', option)\" *ngFor=\"let option of pickupOptions\"\n                [value]=\"option?.place_name\">\n                {{option?.place_name}}\n              </mat-option>\n            </mat-autocomplete>\n          </mat-form-field>\n          <mat-error *ngIf=\"addRouteForm.controls['pickup_lat_lng'].touched && addRouteForm.controls['pickup_lat_lng'].hasError('required')\">\n            Please select pickup location from the list.\n          </mat-error>\n        </div>\n        <div class=\"col-6\">\n          <mat-form-field>\n            <mat-label>Delivery</mat-label>\n            <input type=\"text\" placeholder=\"Search...\" matInput #filterDelivery [matAutocomplete]=\"deliveryAutocomplete\"\n              formControlName=\"delivery_location\" (mousedown)=\"$event.stopPropagation()\">\n            <mat-autocomplete #deliveryAutocomplete=\"matAutocomplete\">\n              <mat-option (click)=\"selectedLongLat('delivery', option)\" *ngFor=\"let option of deliveryOptions\"\n                [value]=\"option?.place_name\">\n                {{option?.place_name}}\n              </mat-option>\n            </mat-autocomplete>\n          </mat-form-field>\n          <mat-error *ngIf=\"addRouteForm.controls['delivery_lat_lng'].touched && addRouteForm.controls['delivery_lat_lng'].hasError('required')\">\n            Please select delivery location from the list.\n          </mat-error>\n        </div>\n        <div class=\"col-6\">\n          <mat-form-field>\n            <mat-label>Notes</mat-label>\n            <textarea style=\"height: 18px; resize: none;\" matInput name=\"\" id=\"\" cols=\"30\" rows=\"10\" formControlName=\"note\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\"></textarea>\n            <mat-error *ngIf=\"addRouteForm.controls['note'].hasError('maxlength')\">\n              Notes should be within 2048 characters.\n            </mat-error>\n          </mat-form-field>\n        </div>\n\n        <div class=\"col-6 d-flex\">\n          <div class=\"inputbox m-0\">\n            <mat-form-field>\n              <mat-label>Unit type</mat-label>\n              <mat-select formControlName=\"unit_id\" (selectionChange)=\"checkAndFetchRouteInformation()\" (mousedown)=\"$event.stopPropagation()\">\n                <mat-option *ngFor=\"let unit of unitsList\" [value]=\"unit?.id\"> {{unit?.type}} </mat-option>\n              </mat-select>\n              <mat-error *ngIf=\"addRouteForm.controls['unit_id'].hasError('required')\">\n                Unit is required\n              </mat-error>\n            </mat-form-field>\n          </div>\n\n          <div class=\"inputbox m-0\">\n            <mat-form-field>\n              <mat-label>Material</mat-label>\n              <mat-select formControlName=\"materials_id\" (mousedown)=\"$event.stopPropagation()\">\n                <mat-option *ngFor=\"let material of materialsList\" [value]=\"config.repository === 'coolmap' ? material?.material_id : material?.sub_material_id\"> {{config.repository === 'coolmap' ? material?.material : material?.label}}\n                </mat-option>\n              </mat-select>\n              <mat-error *ngIf=\"addRouteForm.controls['materials_id'].hasError('required')\">\n                Material is required\n              </mat-error>\n            </mat-form-field>\n          </div>\n        </div>\n        <div class=\"col-6\">\n          <app-estimation-display *ngIf=\"addRouteForm?.value?.pickup_lat_lng && addRouteForm?.value?.delivery_lat_lng\" [value]=\"addRouteForm['value']\"></app-estimation-display>\n        </div>\n        <div class=\"col-6\" *ngIf=\"addRouteForm['value']['trucker_pay_estimate'] && addRouteForm['value']['customer_price_estimate']\">\n          <span *ngIf=\"config['repository'] !== 'customer'\" class=\"estimate\" (mousedown)=\"$event.stopPropagation()\">\n            Trucker Pay Estimate - <b>{{'$'+ addRouteForm['value']['trucker_pay_estimate']}}</b>\n          </span>\n          <span class=\"estimate\" (mousedown)=\"$event.stopPropagation()\">\n            Customer Price Estimate - <b>{{'$'+ addRouteForm['value']['customer_price_estimate']}}</b>\n          </span>\n        </div>\n        <button mat-raised-button type=\"submit\" (click)=\"saveRoute()\" *ngIf=\"preventSave\"\n          [disabled]=\"addRouteForm.invalid && preventSave || preventInitialSave\">{{routeId? 'Update' : 'Save'}}\n        </button>\n        <div class=\"loader\">\n          <mat-spinner *ngIf=\"!preventSave\"></mat-spinner>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n", styles: [".addroutebox{width:calc(100% - 340px);position:absolute;left:320px;bottom:10px;display:flex;justify-content:space-between;align-items:flex-start}.addroutebox .routedetailbox{max-width:300px;padding:10px;background-color:#fff;border-radius:20px;margin-right:20px}@media (min-width: 1600px){.addroutebox .routedetailbox{max-width:280px}}.addroutebox .editbtn{background:#326ad3;padding:10px 25px;color:#fff;font-size:.8125rem;border-radius:30px;float:right}.add_add_route_box{background:#fff;padding:10px 20px;border-radius:20px;box-shadow:2px 4px 4px 2px #00000024;height:370px;width:100%;position:relative;cursor:move}.add_add_route_box .route_form_area{display:flex;flex-wrap:wrap;justify-content:space-between}.add_add_route_box .route_form_area .col-6{width:48%;margin-top:10px;justify-content:space-between}.add_add_route_box .route_form_area .col-6 .inputbox{width:47%}.add_add_route_box .route_form_area .col-6 span{font-size:.875rem}.add_add_route_box .route_form_area button{background:#326ad3;padding:0 18px;color:#fff;font-size:.8125rem;border-radius:30px;position:absolute;right:18px;top:20px;height:35px}.closebtn{background:#000;color:#fff;border-radius:30px;padding:0 18px;margin-left:10px;height:35px}.delbtn{background:red;color:#fff;border-radius:30px;padding:10px 18px}.add_route_listingpart .listing_toggle{background:#fff;border-radius:15px;padding:8px 10px;position:absolute;right:10px;top:30px;cursor:pointer}.listing_box{background:#282828;height:100vh;position:fixed;right:0;top:0;z-index:1111;box-shadow:-3px 0 5px #ffffff14;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;width:0;border-radius:40px 0 0 40px;opacity:0}.listing_box .closebtn{display:none}.show .listing_box{width:250px;max-width:250px;-webkit-box-flex:0;flex:0 0 250px;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;padding:40px 0 40px 20px;opacity:1}@media (min-width: 1600px){.show .listing_box{width:320px;max-width:320px;-webkit-box-flex:0;flex:0 0 320px}}.show .listing_box h2{color:#fff;white-space:nowrap}.show .listing_box ul{padding:0 20px 0 0}.show .listing_box ul li{background:#4a4a4a;padding:15px;border-radius:15px;display:flex;margin-bottom:15px}.show .listing_box ul li .companayIcon{width:40px;height:40px;border-radius:10px;background:#fff;margin-right:10px;display:flex;justify-content:center;align-items:center}.show .listing_box ul li .company_cont{width:calc(100% - 50px)}.show .listing_box ul li .company_cont h3{color:#fff;font-size:15px;font-weight:400;margin:0;text-overflow:ellipsis;max-width:129px;-webkit-box-orient:vertical;white-space:nowrap;overflow:hidden}@media (min-width: 1600px){.show .listing_box ul li .company_cont h3{max-width:170px}}.show .listing_box ul li .company_cont p{color:#bcbcbc;font-size:12px;margin:5px 0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:16px}.show .closebtn{position:absolute;left:-33px;top:50px;background:#282828;color:#fff;padding:8px;border-top-left-radius:15px;border-bottom-left-radius:15px;cursor:pointer;box-shadow:-4px 2px 5px #ffffff14;display:block}.loader{position:absolute;width:95%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.buttonprt{margin-right:83px}.closebtnroutedetail{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#fff;position:absolute;top:-11px;left:-11px}.routenotes{max-height:170px;overflow:auto}.estimate{margin-right:20px;font-size:.7rem}@media (min-width: 1600px){.estimate{font-size:.95rem}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i8$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i7$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: EstimationDisplayComponent, selector: "app-estimation-display", inputs: ["value"] }, { kind: "component", type: RouteInfoCardComponent, selector: "lib-route-info-card", inputs: ["popupData", "propData"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AddRouteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-add-route', template: "<div class=\"addroutebox\">\n  <div class=\"routedetailbox\" *ngIf=\"enablePopUp\">\n    <div class=\"closebtnroutedetail\">\n      <mat-icon (click)=\"prevantPopupClose = false; enablePopUp = false;\">clear</mat-icon>\n    </div>\n      <lib-route-info-card [propData]=\"{className: 'routeCard', repository: config['repository']}\" [popupData]=\"popupDetails\"></lib-route-info-card>\n    <div class=\"createTxt\">\n      <small>\n        Created by {{popupDetails['created_by_name']}} on {{popupDetails['created_at']}}\n      </small>\n      <button class=\"editbtn\" (click)=\"editEvent()\">Edit</button>\n    </div>\n  </div>\n  <div class=\"add_add_route_box\" cdkDrag [style.visibility]=\"!enableForm ? 'hidden' : 'visible'\">\n    <div class=\"topheadingprt\">\n      <h2> {{routeId? 'EDIT' : 'ADD'}} ROUTE </h2>\n      <div class=\"buttonprt\">\n        <button *ngIf=\"routeId\" class=\"delbtn\" (click)=\"openDialog()\">Delete</button>\n        <button mat-raised-button type=\"submit\" class=\"closebtn\" (click)=\"changeNav.next('Addroute')\">Close</button>\n      </div>\n    </div>\n    <form [formGroup]=\"addRouteForm\">\n      <div class=\"route_form_area\">\n        <div class=\"col-6\">\n          <mat-form-field>\n            <mat-label>Route Name</mat-label>\n            <input matInput formControlName=\"route_name\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\">\n            <mat-error *ngIf=\"addRouteForm.controls['route_name'].hasError('required')\">\n              Route Name is required\n            </mat-error>\n          </mat-form-field>\n        </div>\n        <div class=\"col-6\">\n          <mat-form-field>\n            <mat-label>Customer_name</mat-label>\n            <input type=\"text\" placeholder=\"Customer Name\" matInput formControlName=\"customer_name\" [matAutocomplete]=\"auto\" (mousedown)=\"$event.stopPropagation()\">\n            <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\n              <mat-option *ngFor=\"let customer of customersList$ | async\" [value]=\"customer['customer_name']\">\n                {{customer['customer_name']}}\n              </mat-option>\n            </mat-autocomplete>\n            <mat-error *ngIf=\"addRouteForm.controls['customer_name'].hasError('required')\">\n              Customer name is required.\n            </mat-error>\n          </mat-form-field>\n        </div>\n        <div class=\"col-6\">\n          <mat-form-field>\n            <mat-label>Pickup</mat-label>\n            <input type=\"text\" placeholder=\"Search...\" matInput #filterPickup [matAutocomplete]=\"pickupAutocomplete\"\n              formControlName=\"pickup_location\" (mousedown)=\"$event.stopPropagation()\">\n\n            <mat-autocomplete #pickupAutocomplete=\"matAutocomplete\">\n              <mat-option (click)=\"selectedLongLat('pickup', option)\" *ngFor=\"let option of pickupOptions\"\n                [value]=\"option?.place_name\">\n                {{option?.place_name}}\n              </mat-option>\n            </mat-autocomplete>\n          </mat-form-field>\n          <mat-error *ngIf=\"addRouteForm.controls['pickup_lat_lng'].touched && addRouteForm.controls['pickup_lat_lng'].hasError('required')\">\n            Please select pickup location from the list.\n          </mat-error>\n        </div>\n        <div class=\"col-6\">\n          <mat-form-field>\n            <mat-label>Delivery</mat-label>\n            <input type=\"text\" placeholder=\"Search...\" matInput #filterDelivery [matAutocomplete]=\"deliveryAutocomplete\"\n              formControlName=\"delivery_location\" (mousedown)=\"$event.stopPropagation()\">\n            <mat-autocomplete #deliveryAutocomplete=\"matAutocomplete\">\n              <mat-option (click)=\"selectedLongLat('delivery', option)\" *ngFor=\"let option of deliveryOptions\"\n                [value]=\"option?.place_name\">\n                {{option?.place_name}}\n              </mat-option>\n            </mat-autocomplete>\n          </mat-form-field>\n          <mat-error *ngIf=\"addRouteForm.controls['delivery_lat_lng'].touched && addRouteForm.controls['delivery_lat_lng'].hasError('required')\">\n            Please select delivery location from the list.\n          </mat-error>\n        </div>\n        <div class=\"col-6\">\n          <mat-form-field>\n            <mat-label>Notes</mat-label>\n            <textarea style=\"height: 18px; resize: none;\" matInput name=\"\" id=\"\" cols=\"30\" rows=\"10\" formControlName=\"note\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\"></textarea>\n            <mat-error *ngIf=\"addRouteForm.controls['note'].hasError('maxlength')\">\n              Notes should be within 2048 characters.\n            </mat-error>\n          </mat-form-field>\n        </div>\n\n        <div class=\"col-6 d-flex\">\n          <div class=\"inputbox m-0\">\n            <mat-form-field>\n              <mat-label>Unit type</mat-label>\n              <mat-select formControlName=\"unit_id\" (selectionChange)=\"checkAndFetchRouteInformation()\" (mousedown)=\"$event.stopPropagation()\">\n                <mat-option *ngFor=\"let unit of unitsList\" [value]=\"unit?.id\"> {{unit?.type}} </mat-option>\n              </mat-select>\n              <mat-error *ngIf=\"addRouteForm.controls['unit_id'].hasError('required')\">\n                Unit is required\n              </mat-error>\n            </mat-form-field>\n          </div>\n\n          <div class=\"inputbox m-0\">\n            <mat-form-field>\n              <mat-label>Material</mat-label>\n              <mat-select formControlName=\"materials_id\" (mousedown)=\"$event.stopPropagation()\">\n                <mat-option *ngFor=\"let material of materialsList\" [value]=\"config.repository === 'coolmap' ? material?.material_id : material?.sub_material_id\"> {{config.repository === 'coolmap' ? material?.material : material?.label}}\n                </mat-option>\n              </mat-select>\n              <mat-error *ngIf=\"addRouteForm.controls['materials_id'].hasError('required')\">\n                Material is required\n              </mat-error>\n            </mat-form-field>\n          </div>\n        </div>\n        <div class=\"col-6\">\n          <app-estimation-display *ngIf=\"addRouteForm?.value?.pickup_lat_lng && addRouteForm?.value?.delivery_lat_lng\" [value]=\"addRouteForm['value']\"></app-estimation-display>\n        </div>\n        <div class=\"col-6\" *ngIf=\"addRouteForm['value']['trucker_pay_estimate'] && addRouteForm['value']['customer_price_estimate']\">\n          <span *ngIf=\"config['repository'] !== 'customer'\" class=\"estimate\" (mousedown)=\"$event.stopPropagation()\">\n            Trucker Pay Estimate - <b>{{'$'+ addRouteForm['value']['trucker_pay_estimate']}}</b>\n          </span>\n          <span class=\"estimate\" (mousedown)=\"$event.stopPropagation()\">\n            Customer Price Estimate - <b>{{'$'+ addRouteForm['value']['customer_price_estimate']}}</b>\n          </span>\n        </div>\n        <button mat-raised-button type=\"submit\" (click)=\"saveRoute()\" *ngIf=\"preventSave\"\n          [disabled]=\"addRouteForm.invalid && preventSave || preventInitialSave\">{{routeId? 'Update' : 'Save'}}\n        </button>\n        <div class=\"loader\">\n          <mat-spinner *ngIf=\"!preventSave\"></mat-spinner>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n", styles: [".addroutebox{width:calc(100% - 340px);position:absolute;left:320px;bottom:10px;display:flex;justify-content:space-between;align-items:flex-start}.addroutebox .routedetailbox{max-width:300px;padding:10px;background-color:#fff;border-radius:20px;margin-right:20px}@media (min-width: 1600px){.addroutebox .routedetailbox{max-width:280px}}.addroutebox .editbtn{background:#326ad3;padding:10px 25px;color:#fff;font-size:.8125rem;border-radius:30px;float:right}.add_add_route_box{background:#fff;padding:10px 20px;border-radius:20px;box-shadow:2px 4px 4px 2px #00000024;height:370px;width:100%;position:relative;cursor:move}.add_add_route_box .route_form_area{display:flex;flex-wrap:wrap;justify-content:space-between}.add_add_route_box .route_form_area .col-6{width:48%;margin-top:10px;justify-content:space-between}.add_add_route_box .route_form_area .col-6 .inputbox{width:47%}.add_add_route_box .route_form_area .col-6 span{font-size:.875rem}.add_add_route_box .route_form_area button{background:#326ad3;padding:0 18px;color:#fff;font-size:.8125rem;border-radius:30px;position:absolute;right:18px;top:20px;height:35px}.closebtn{background:#000;color:#fff;border-radius:30px;padding:0 18px;margin-left:10px;height:35px}.delbtn{background:red;color:#fff;border-radius:30px;padding:10px 18px}.add_route_listingpart .listing_toggle{background:#fff;border-radius:15px;padding:8px 10px;position:absolute;right:10px;top:30px;cursor:pointer}.listing_box{background:#282828;height:100vh;position:fixed;right:0;top:0;z-index:1111;box-shadow:-3px 0 5px #ffffff14;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;width:0;border-radius:40px 0 0 40px;opacity:0}.listing_box .closebtn{display:none}.show .listing_box{width:250px;max-width:250px;-webkit-box-flex:0;flex:0 0 250px;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;padding:40px 0 40px 20px;opacity:1}@media (min-width: 1600px){.show .listing_box{width:320px;max-width:320px;-webkit-box-flex:0;flex:0 0 320px}}.show .listing_box h2{color:#fff;white-space:nowrap}.show .listing_box ul{padding:0 20px 0 0}.show .listing_box ul li{background:#4a4a4a;padding:15px;border-radius:15px;display:flex;margin-bottom:15px}.show .listing_box ul li .companayIcon{width:40px;height:40px;border-radius:10px;background:#fff;margin-right:10px;display:flex;justify-content:center;align-items:center}.show .listing_box ul li .company_cont{width:calc(100% - 50px)}.show .listing_box ul li .company_cont h3{color:#fff;font-size:15px;font-weight:400;margin:0;text-overflow:ellipsis;max-width:129px;-webkit-box-orient:vertical;white-space:nowrap;overflow:hidden}@media (min-width: 1600px){.show .listing_box ul li .company_cont h3{max-width:170px}}.show .listing_box ul li .company_cont p{color:#bcbcbc;font-size:12px;margin:5px 0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:16px}.show .closebtn{position:absolute;left:-33px;top:50px;background:#282828;color:#fff;padding:8px;border-top-left-radius:15px;border-bottom-left-radius:15px;cursor:pointer;box-shadow:-4px 2px 5px #ffffff14;display:block}.loader{position:absolute;width:95%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.buttonprt{margin-right:83px}.closebtnroutedetail{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#fff;position:absolute;top:-11px;left:-11px}.routenotes{max-height:170px;overflow:auto}.estimate{margin-right:20px;font-size:.7rem}@media (min-width: 1600px){.estimate{font-size:.95rem}}\n"] }]
-        }], ctorParameters: () => [{ type: i1.CoolmapService }, { type: i1.UtilsService }, { type: i1$2.MatDialog }, { type: i1.CoolmapConfigModel, decorators: [{
+        }], ctorParameters: () => [{ type: i1.CoolmapService }, { type: i1.UtilsService }, { type: i1$1.MatDialog }, { type: i1.CoolmapConfigModel, decorators: [{
                     type: Inject,
                     args: ['memberData']
                 }] }], propDecorators: { filterPickup: [{