@aggdirect/coolmap 2.4.6 → 2.4.7

package/fesm2020/aggdirect-coolmap.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
 import { Component, ViewChild, EventEmitter, Output, Inject, Input, NgModule } from '@angular/core';
 import { Subject, takeUntil, startWith, map, fromEvent, distinctUntilChanged, debounceTime } from 'rxjs';
-import * as i1 from '@aggdirect/coolmap-services';
-import { DriversmsCardKey, DriverSmsCardEnum, JobCodeOverviewData, JobCodeOverviewEnum, EstinationData, EstinationEnum } from '@aggdirect/coolmap-services';
+import * as i1 from '@aggdirect/coolmap-services-test';
+import { DriversmsCardKey, DriverSmsCardEnum, JobCodeOverviewData, JobCodeOverviewEnum, EstinationData, EstinationEnum } from '@aggdirect/coolmap-services-test';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3 from '@angular/material/progress-bar';
@@ -572,7 +572,7 @@ class AddRouteNavComponent {
         if (this.config.repository === 'customer') {
             this.utils.fetchUnitsList().then((res) => {
                 this.unitList = res;
-                this.utils.fetchMaterialsList().then((res) => {
+                this.utils.fetchMaterialsListForCustomer().then((res) => {
                     this.materialsList = res;
                     this.getRouteListForCustomer();
                 });
@@ -594,7 +594,7 @@ class AddRouteNavComponent {
     getMaterialName(data) {
         let materialName = '';
         this.materialsList.map((res) => {
-            if (res.material_id === data.materials_id) {
+            if (res.sub_material_id === data.materials_id) {
                 materialName = res.material;
             }
         });
@@ -908,7 +908,7 @@ class JobCodeComponent {
         if (this.config.repository === 'customer') {
             this.utils.fetchUnitsList().then((res) => {
                 this.unitList = res;
-                this.utils.fetchMaterialsList().then((res) => {
+                this.utils.fetchMaterialsListForCustomer().then((res) => {
                     this.materialsList = res;
                     this.getRouteListForCustomer();
                 });
@@ -930,7 +930,7 @@ class JobCodeComponent {
     getMaterialName(data) {
         let materialName = '';
         this.materialsList.map((res) => {
-            if (res.material_id === data.materials_id) {
+            if (res.sub_material_id === data.materials_id) {
                 materialName = res.material;
             }
         });
@@ -1110,9 +1110,16 @@ class AddRouteComponent {
         this.enablePopUp = false;
         this.prevantPopupClose = false;
         this.enableForm = false;
-        this.utils.fetchMaterialsList().then((res) => {
-            this.materialsList = res;
-        });
+        if (this.config.repository === 'customer') {
+            this.utils.fetchMaterialsListForCustomer().then((res) => {
+                this.materialsList = res;
+            });
+        }
+        else {
+            this.utils.fetchMaterialsList().then((res) => {
+                this.materialsList = res;
+            });
+        }
         this.utils.fetchUnitsList().then((res) => {
             this.unitsList = res;
         });
@@ -1302,7 +1309,7 @@ class AddRouteComponent {
                     };
                     this.coolMapService.removeRouteAndMarker(1).then(() => {
                         const unit = this.unitsList.find((x) => x.id === this.addRouteForm.value.unit_id);
-                        const materialDetails = this.materialsList.find((x) => x.material_id === this.addRouteForm.value.materials_id);
+                        const materialDetails = this.materialsList.find((x) => x.sub_material_id === this.addRouteForm.value.materials_id);
                         this.coolMapService.loadMapProperty(element, 1, unit?.type, {
                             pickup_location: this.addRouteForm.get('pickup_location')?.value,
                             delivery_location: this.addRouteForm.get('delivery_location')?.value,
@@ -1374,10 +1381,10 @@ class AddRouteComponent {
     }
 }
 AddRouteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AddRouteComponent, deps: [{ token: i1.CoolmapService }, { token: i1.UtilsService }, { token: i1$1.MatDialog }, { token: 'memberData' }], target: i0.ɵɵFactoryTarget.Component });
-AddRouteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AddRouteComponent, selector: "app-add-route", inputs: { routeData: "routeData", customerRepoDetails: "customerRepoDetails" }, outputs: { changeNav: "changeNav", updateRouteList: "updateRouteList" }, viewQueries: [{ propertyName: "filterPickup", first: true, predicate: ["filterPickup"], descendants: true }, { propertyName: "filterDelivery", first: true, predicate: ["filterDelivery"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"addroutebox\">\r\n  <div class=\"routedetailbox\" *ngIf=\"enablePopUp\">\r\n    <div class=\"closebtnroutedetail\">\r\n      <mat-icon (click)=\"prevantPopupClose = false; enablePopUp = false;\">clear</mat-icon>\r\n    </div>\r\n      <lib-route-info-card [propData]=\"{className: 'routeCard', repository: config['repository']}\" [popupData]=\"popupDetails\"></lib-route-info-card>\r\n    <div class=\"createTxt\">\r\n      <small>\r\n        Created by {{popupDetails['created_by_name']}} on {{popupDetails['created_at']}}\r\n      </small>\r\n      <button class=\"editbtn\" (click)=\"editEvent()\">Edit</button>\r\n    </div>\r\n  </div>\r\n  <div class=\"add_add_route_box\" cdkDrag [style.visibility]=\"!enableForm ? 'hidden' : 'visible'\">\r\n    <div class=\"topheadingprt\">\r\n      <h2> {{routeId? 'EDIT' : 'ADD'}} ROUTE </h2>\r\n      <div class=\"buttonprt\">\r\n        <button *ngIf=\"routeId\" class=\"delbtn\" (click)=\"openDialog()\">Delete</button>\r\n        <button mat-raised-button type=\"submit\" class=\"closebtn\" (click)=\"changeNav.next('Addroute')\">Close</button>\r\n      </div>\r\n    </div>\r\n    <form [formGroup]=\"addRouteForm\">\r\n      <div class=\"route_form_area\">\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Route Name</mat-label>\r\n            <input matInput formControlName=\"route_name\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-error *ngIf=\"addRouteForm.controls['route_name'].hasError('required')\">\r\n              Route Name is required\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <input type=\"text\" placeholder=\"Customer Name\" matInput formControlName=\"customer_name\" [matAutocomplete]=\"auto\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n              <mat-option *ngFor=\"let customer of customersList$ | async\" [value]=\"customer['customer_name']\">\r\n                {{customer['customer_name']}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n            <mat-error *ngIf=\"addRouteForm.controls['customer_name'].hasError('required')\">\r\n              Customer name is required.\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Pickup</mat-label>\r\n            <input type=\"text\" placeholder=\"Search...\" matInput #filterPickup [matAutocomplete]=\"pickupAutocomplete\"\r\n              formControlName=\"pickup_location\" (mousedown)=\"$event.stopPropagation()\">\r\n\r\n            <mat-autocomplete #pickupAutocomplete=\"matAutocomplete\">\r\n              <mat-option (click)=\"selectedLongLat('pickup', option)\" *ngFor=\"let option of pickupOptions\"\r\n                [value]=\"option?.place_name\">\r\n                {{option?.place_name}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n          <mat-error *ngIf=\"addRouteForm.controls['pickup_lat_lng'].touched && addRouteForm.controls['pickup_lat_lng'].hasError('required')\">\r\n            Please select pickup location from the list.\r\n          </mat-error>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Delivery</mat-label>\r\n            <input type=\"text\" placeholder=\"Search...\" matInput #filterDelivery [matAutocomplete]=\"deliveryAutocomplete\"\r\n              formControlName=\"delivery_location\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-autocomplete #deliveryAutocomplete=\"matAutocomplete\">\r\n              <mat-option (click)=\"selectedLongLat('delivery', option)\" *ngFor=\"let option of deliveryOptions\"\r\n                [value]=\"option?.place_name\">\r\n                {{option?.place_name}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n          <mat-error *ngIf=\"addRouteForm.controls['delivery_lat_lng'].touched && addRouteForm.controls['delivery_lat_lng'].hasError('required')\">\r\n            Please select delivery location from the list.\r\n          </mat-error>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Notes</mat-label>\r\n            <textarea style=\"height: 18px; resize: none;\" matInput name=\"\" id=\"\" cols=\"30\" rows=\"10\" formControlName=\"note\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\"></textarea>\r\n            <mat-error *ngIf=\"addRouteForm.controls['note'].hasError('maxlength')\">\r\n              Notes should be within 2048 characters.\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <div class=\"col-6 d-flex\">\r\n          <div class=\"inputbox m-0\">\r\n            <mat-form-field>\r\n              <mat-label>Unit type</mat-label>\r\n              <mat-select formControlName=\"unit_id\" (selectionChange)=\"checkAndFetchRouteInformation()\" (mousedown)=\"$event.stopPropagation()\">\r\n                <mat-option *ngFor=\"let unit of unitsList\" [value]=\"unit?.id\"> {{unit?.type}} </mat-option>\r\n              </mat-select>\r\n              <mat-error *ngIf=\"addRouteForm.controls['unit_id'].hasError('required')\">\r\n                Unit is required\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n\r\n          <div class=\"inputbox m-0\">\r\n            <mat-form-field>\r\n              <mat-label>Material</mat-label>\r\n              <mat-select formControlName=\"materials_id\" (mousedown)=\"$event.stopPropagation()\">\r\n                <mat-option *ngFor=\"let material of materialsList\" [value]=\"material?.material_id\"> {{material?.material}}\r\n                </mat-option>\r\n              </mat-select>\r\n              <mat-error *ngIf=\"addRouteForm.controls['materials_id'].hasError('required')\">\r\n                Meterial is required\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <app-estimation-display *ngIf=\"addRouteForm?.value?.pickup_lat_lng && addRouteForm?.value?.delivery_lat_lng\" [value]=\"addRouteForm['value']\"></app-estimation-display>\r\n        </div>\r\n        <div class=\"col-6\" *ngIf=\"addRouteForm['value']['trucker_pay_estimate'] && addRouteForm['value']['customer_price_estimate']\">\r\n          <span *ngIf=\"config['repository'] !== 'customer'\" class=\"estimate\" (mousedown)=\"$event.stopPropagation()\">\r\n            Trucker Pay Estimate - <b>{{'$'+ addRouteForm['value']['trucker_pay_estimate']}}</b>\r\n          </span>\r\n          <span class=\"estimate\" (mousedown)=\"$event.stopPropagation()\">\r\n            Customer Price Estimate - <b>{{'$'+ addRouteForm['value']['customer_price_estimate']}}</b>\r\n          </span>\r\n        </div>\r\n        <button mat-raised-button type=\"submit\" (click)=\"saveRoute()\" *ngIf=\"preventSave\"\r\n          [disabled]=\"addRouteForm.invalid && preventSave || preventInitialSave\">{{routeId? 'Update' : 'Save'}}\r\n        </button>\r\n        <div class=\"loader\">\r\n          <mat-spinner *ngIf=\"!preventSave\"></mat-spinner>\r\n        </div>\r\n      </div>\r\n    </form>\r\n  </div>\r\n</div>\r\n", styles: [".addroutebox{width:calc(100% - 315px);position:absolute;left:300px;bottom:10px;z-index:999;display:flex;justify-content:space-between;align-items:flex-start}.addroutebox .routedetailbox{max-width:300px;padding:10px;background-color:#fff;border-radius:20px;margin-right:20px}@media (min-width: 1600px){.addroutebox .routedetailbox{max-width:280px}}.addroutebox .editbtn{background:#326ad3;padding:10px 25px;color:#fff;font-size:.8125rem;border-radius:30px;float:right}.add_add_route_box{background:white;padding:10px 20px;border-radius:20px;box-shadow:2px 4px 4px 2px #00000024;height:370px;width:100%;position:relative;cursor:move}.add_add_route_box .route_form_area{display:flex;flex-wrap:wrap;justify-content:space-between}.add_add_route_box .route_form_area .col-6{width:48%;margin-top:15px;justify-content:space-between}.add_add_route_box .route_form_area .col-6 .inputbox{width:47%}.add_add_route_box .route_form_area .col-6 span{font-size:.875rem}.add_add_route_box .route_form_area button{background:#326ad3;padding:0 18px;color:#fff;font-size:.8125rem;border-radius:30px;position:absolute;right:18px;top:20px}.closebtn{background:black;color:#fff;border-radius:30px;padding:0 18px;margin-left:10px}.delbtn{background:red;color:#fff;border-radius:30px;padding:10px 18px}.add_route_listingpart .listing_toggle{background:white;border-radius:15px;padding:8px 10px;position:absolute;right:10px;top:30px;cursor:pointer}.listing_box{background:#282828;height:100vh;position:fixed;right:0;top:0;z-index:1111;box-shadow:-3px 0 5px #ffffff14;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;width:0;border-radius:40px 0 0 40px;opacity:0}.listing_box .closebtn{display:none}.show .listing_box{width:250px;max-width:250px;flex:0 0 250px;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;padding:40px 0 40px 20px;opacity:1}@media (min-width: 1600px){.show .listing_box{width:320px;max-width:320px;flex:0 0 320px}}.show .listing_box h2{color:#fff;white-space:nowrap}.show .listing_box ul{padding:0 20px 0 0}.show .listing_box ul li{background:#4a4a4a;padding:15px;border-radius:15px;display:flex;margin-bottom:15px}.show .listing_box ul li .companayIcon{width:40px;height:40px;border-radius:10px;background:white;margin-right:10px;display:flex;justify-content:center;align-items:center}.show .listing_box ul li .company_cont{width:calc(100% - 50px)}.show .listing_box ul li .company_cont h3{color:#fff;font-size:15px;font-weight:400;margin:0;text-overflow:ellipsis;max-width:129px;-webkit-box-orient:vertical;white-space:nowrap;overflow:hidden}@media (min-width: 1600px){.show .listing_box ul li .company_cont h3{max-width:170px}}.show .listing_box ul li .company_cont p{color:#bcbcbc;font-size:12px;margin:5px 0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:16px}.show .closebtn{position:absolute;left:-33px;top:50px;background:#282828;color:#fff;padding:8px;border-top-left-radius:15px;border-bottom-left-radius:15px;cursor:pointer;box-shadow:-4px 2px 5px #ffffff14;display:block}.loader{position:absolute;width:95%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.buttonprt{margin-right:83px}.closebtnroutedetail{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#fff;position:absolute;top:-11px;left:-11px}.routenotes{max-height:170px;overflow:auto}.estimate{margin-right:20px;font-size:.7rem}@media (min-width: 1600px){.estimate{font-size:.95rem}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i7$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: EstimationDisplayComponent, selector: "app-estimation-display", inputs: ["value"] }, { kind: "component", type: RouteInfoCardComponent, selector: "lib-route-info-card", inputs: ["popupData", "propData"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
+AddRouteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AddRouteComponent, selector: "app-add-route", inputs: { routeData: "routeData", customerRepoDetails: "customerRepoDetails" }, outputs: { changeNav: "changeNav", updateRouteList: "updateRouteList" }, viewQueries: [{ propertyName: "filterPickup", first: true, predicate: ["filterPickup"], descendants: true }, { propertyName: "filterDelivery", first: true, predicate: ["filterDelivery"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"addroutebox\">\r\n  <div class=\"routedetailbox\" *ngIf=\"enablePopUp\">\r\n    <div class=\"closebtnroutedetail\">\r\n      <mat-icon (click)=\"prevantPopupClose = false; enablePopUp = false;\">clear</mat-icon>\r\n    </div>\r\n      <lib-route-info-card [propData]=\"{className: 'routeCard', repository: config['repository']}\" [popupData]=\"popupDetails\"></lib-route-info-card>\r\n    <div class=\"createTxt\">\r\n      <small>\r\n        Created by {{popupDetails['created_by_name']}} on {{popupDetails['created_at']}}\r\n      </small>\r\n      <button class=\"editbtn\" (click)=\"editEvent()\">Edit</button>\r\n    </div>\r\n  </div>\r\n  <div class=\"add_add_route_box\" cdkDrag [style.visibility]=\"!enableForm ? 'hidden' : 'visible'\">\r\n    <div class=\"topheadingprt\">\r\n      <h2> {{routeId? 'EDIT' : 'ADD'}} ROUTE </h2>\r\n      <div class=\"buttonprt\">\r\n        <button *ngIf=\"routeId\" class=\"delbtn\" (click)=\"openDialog()\">Delete</button>\r\n        <button mat-raised-button type=\"submit\" class=\"closebtn\" (click)=\"changeNav.next('Addroute')\">Close</button>\r\n      </div>\r\n    </div>\r\n    <form [formGroup]=\"addRouteForm\">\r\n      <div class=\"route_form_area\">\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Route Name</mat-label>\r\n            <input matInput formControlName=\"route_name\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-error *ngIf=\"addRouteForm.controls['route_name'].hasError('required')\">\r\n              Route Name is required\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <input type=\"text\" placeholder=\"Customer Name\" matInput formControlName=\"customer_name\" [matAutocomplete]=\"auto\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n              <mat-option *ngFor=\"let customer of customersList$ | async\" [value]=\"customer['customer_name']\">\r\n                {{customer['customer_name']}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n            <mat-error *ngIf=\"addRouteForm.controls['customer_name'].hasError('required')\">\r\n              Customer name is required.\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Pickup</mat-label>\r\n            <input type=\"text\" placeholder=\"Search...\" matInput #filterPickup [matAutocomplete]=\"pickupAutocomplete\"\r\n              formControlName=\"pickup_location\" (mousedown)=\"$event.stopPropagation()\">\r\n\r\n            <mat-autocomplete #pickupAutocomplete=\"matAutocomplete\">\r\n              <mat-option (click)=\"selectedLongLat('pickup', option)\" *ngFor=\"let option of pickupOptions\"\r\n                [value]=\"option?.place_name\">\r\n                {{option?.place_name}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n          <mat-error *ngIf=\"addRouteForm.controls['pickup_lat_lng'].touched && addRouteForm.controls['pickup_lat_lng'].hasError('required')\">\r\n            Please select pickup location from the list.\r\n          </mat-error>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Delivery</mat-label>\r\n            <input type=\"text\" placeholder=\"Search...\" matInput #filterDelivery [matAutocomplete]=\"deliveryAutocomplete\"\r\n              formControlName=\"delivery_location\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-autocomplete #deliveryAutocomplete=\"matAutocomplete\">\r\n              <mat-option (click)=\"selectedLongLat('delivery', option)\" *ngFor=\"let option of deliveryOptions\"\r\n                [value]=\"option?.place_name\">\r\n                {{option?.place_name}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n          <mat-error *ngIf=\"addRouteForm.controls['delivery_lat_lng'].touched && addRouteForm.controls['delivery_lat_lng'].hasError('required')\">\r\n            Please select delivery location from the list.\r\n          </mat-error>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Notes</mat-label>\r\n            <textarea style=\"height: 18px; resize: none;\" matInput name=\"\" id=\"\" cols=\"30\" rows=\"10\" formControlName=\"note\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\"></textarea>\r\n            <mat-error *ngIf=\"addRouteForm.controls['note'].hasError('maxlength')\">\r\n              Notes should be within 2048 characters.\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <div class=\"col-6 d-flex\">\r\n          <div class=\"inputbox m-0\">\r\n            <mat-form-field>\r\n              <mat-label>Unit type</mat-label>\r\n              <mat-select formControlName=\"unit_id\" (selectionChange)=\"checkAndFetchRouteInformation()\" (mousedown)=\"$event.stopPropagation()\">\r\n                <mat-option *ngFor=\"let unit of unitsList\" [value]=\"unit?.id\"> {{unit?.type}} </mat-option>\r\n              </mat-select>\r\n              <mat-error *ngIf=\"addRouteForm.controls['unit_id'].hasError('required')\">\r\n                Unit is required\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n\r\n          <div class=\"inputbox m-0\">\r\n            <mat-form-field>\r\n              <mat-label>Material</mat-label>\r\n              <mat-select formControlName=\"materials_id\" (mousedown)=\"$event.stopPropagation()\">\r\n                <mat-option *ngFor=\"let material of materialsList\" [value]=\"config.repository === 'coolmap' ? material?.material_id : material?.sub_material_id\"> {{config.repository === 'coolmap' ? material?.material : material?.label}}\r\n                </mat-option>\r\n              </mat-select>\r\n              <mat-error *ngIf=\"addRouteForm.controls['materials_id'].hasError('required')\">\r\n                Meterial is required\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <app-estimation-display *ngIf=\"addRouteForm?.value?.pickup_lat_lng && addRouteForm?.value?.delivery_lat_lng\" [value]=\"addRouteForm['value']\"></app-estimation-display>\r\n        </div>\r\n        <div class=\"col-6\" *ngIf=\"addRouteForm['value']['trucker_pay_estimate'] && addRouteForm['value']['customer_price_estimate']\">\r\n          <span *ngIf=\"config['repository'] !== 'customer'\" class=\"estimate\" (mousedown)=\"$event.stopPropagation()\">\r\n            Trucker Pay Estimate - <b>{{'$'+ addRouteForm['value']['trucker_pay_estimate']}}</b>\r\n          </span>\r\n          <span class=\"estimate\" (mousedown)=\"$event.stopPropagation()\">\r\n            Customer Price Estimate - <b>{{'$'+ addRouteForm['value']['customer_price_estimate']}}</b>\r\n          </span>\r\n        </div>\r\n        <button mat-raised-button type=\"submit\" (click)=\"saveRoute()\" *ngIf=\"preventSave\"\r\n          [disabled]=\"addRouteForm.invalid && preventSave || preventInitialSave\">{{routeId? 'Update' : 'Save'}}\r\n        </button>\r\n        <div class=\"loader\">\r\n          <mat-spinner *ngIf=\"!preventSave\"></mat-spinner>\r\n        </div>\r\n      </div>\r\n    </form>\r\n  </div>\r\n</div>\r\n", styles: [".addroutebox{width:calc(100% - 315px);position:absolute;left:300px;bottom:10px;z-index:999;display:flex;justify-content:space-between;align-items:flex-start}.addroutebox .routedetailbox{max-width:300px;padding:10px;background-color:#fff;border-radius:20px;margin-right:20px}@media (min-width: 1600px){.addroutebox .routedetailbox{max-width:280px}}.addroutebox .editbtn{background:#326ad3;padding:10px 25px;color:#fff;font-size:.8125rem;border-radius:30px;float:right}.add_add_route_box{background:white;padding:10px 20px;border-radius:20px;box-shadow:2px 4px 4px 2px #00000024;height:370px;width:100%;position:relative;cursor:move}.add_add_route_box .route_form_area{display:flex;flex-wrap:wrap;justify-content:space-between}.add_add_route_box .route_form_area .col-6{width:48%;margin-top:15px;justify-content:space-between}.add_add_route_box .route_form_area .col-6 .inputbox{width:47%}.add_add_route_box .route_form_area .col-6 span{font-size:.875rem}.add_add_route_box .route_form_area button{background:#326ad3;padding:0 18px;color:#fff;font-size:.8125rem;border-radius:30px;position:absolute;right:18px;top:20px}.closebtn{background:black;color:#fff;border-radius:30px;padding:0 18px;margin-left:10px}.delbtn{background:red;color:#fff;border-radius:30px;padding:10px 18px}.add_route_listingpart .listing_toggle{background:white;border-radius:15px;padding:8px 10px;position:absolute;right:10px;top:30px;cursor:pointer}.listing_box{background:#282828;height:100vh;position:fixed;right:0;top:0;z-index:1111;box-shadow:-3px 0 5px #ffffff14;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;width:0;border-radius:40px 0 0 40px;opacity:0}.listing_box .closebtn{display:none}.show .listing_box{width:250px;max-width:250px;flex:0 0 250px;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;padding:40px 0 40px 20px;opacity:1}@media (min-width: 1600px){.show .listing_box{width:320px;max-width:320px;flex:0 0 320px}}.show .listing_box h2{color:#fff;white-space:nowrap}.show .listing_box ul{padding:0 20px 0 0}.show .listing_box ul li{background:#4a4a4a;padding:15px;border-radius:15px;display:flex;margin-bottom:15px}.show .listing_box ul li .companayIcon{width:40px;height:40px;border-radius:10px;background:white;margin-right:10px;display:flex;justify-content:center;align-items:center}.show .listing_box ul li .company_cont{width:calc(100% - 50px)}.show .listing_box ul li .company_cont h3{color:#fff;font-size:15px;font-weight:400;margin:0;text-overflow:ellipsis;max-width:129px;-webkit-box-orient:vertical;white-space:nowrap;overflow:hidden}@media (min-width: 1600px){.show .listing_box ul li .company_cont h3{max-width:170px}}.show .listing_box ul li .company_cont p{color:#bcbcbc;font-size:12px;margin:5px 0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:16px}.show .closebtn{position:absolute;left:-33px;top:50px;background:#282828;color:#fff;padding:8px;border-top-left-radius:15px;border-bottom-left-radius:15px;cursor:pointer;box-shadow:-4px 2px 5px #ffffff14;display:block}.loader{position:absolute;width:95%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.buttonprt{margin-right:83px}.closebtnroutedetail{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#fff;position:absolute;top:-11px;left:-11px}.routenotes{max-height:170px;overflow:auto}.estimate{margin-right:20px;font-size:.7rem}@media (min-width: 1600px){.estimate{font-size:.95rem}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i7$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: EstimationDisplayComponent, selector: "app-estimation-display", inputs: ["value"] }, { kind: "component", type: RouteInfoCardComponent, selector: "lib-route-info-card", inputs: ["popupData", "propData"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AddRouteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-add-route', template: "<div class=\"addroutebox\">\r\n  <div class=\"routedetailbox\" *ngIf=\"enablePopUp\">\r\n    <div class=\"closebtnroutedetail\">\r\n      <mat-icon (click)=\"prevantPopupClose = false; enablePopUp = false;\">clear</mat-icon>\r\n    </div>\r\n      <lib-route-info-card [propData]=\"{className: 'routeCard', repository: config['repository']}\" [popupData]=\"popupDetails\"></lib-route-info-card>\r\n    <div class=\"createTxt\">\r\n      <small>\r\n        Created by {{popupDetails['created_by_name']}} on {{popupDetails['created_at']}}\r\n      </small>\r\n      <button class=\"editbtn\" (click)=\"editEvent()\">Edit</button>\r\n    </div>\r\n  </div>\r\n  <div class=\"add_add_route_box\" cdkDrag [style.visibility]=\"!enableForm ? 'hidden' : 'visible'\">\r\n    <div class=\"topheadingprt\">\r\n      <h2> {{routeId? 'EDIT' : 'ADD'}} ROUTE </h2>\r\n      <div class=\"buttonprt\">\r\n        <button *ngIf=\"routeId\" class=\"delbtn\" (click)=\"openDialog()\">Delete</button>\r\n        <button mat-raised-button type=\"submit\" class=\"closebtn\" (click)=\"changeNav.next('Addroute')\">Close</button>\r\n      </div>\r\n    </div>\r\n    <form [formGroup]=\"addRouteForm\">\r\n      <div class=\"route_form_area\">\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Route Name</mat-label>\r\n            <input matInput formControlName=\"route_name\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-error *ngIf=\"addRouteForm.controls['route_name'].hasError('required')\">\r\n              Route Name is required\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <input type=\"text\" placeholder=\"Customer Name\" matInput formControlName=\"customer_name\" [matAutocomplete]=\"auto\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n              <mat-option *ngFor=\"let customer of customersList$ | async\" [value]=\"customer['customer_name']\">\r\n                {{customer['customer_name']}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n            <mat-error *ngIf=\"addRouteForm.controls['customer_name'].hasError('required')\">\r\n              Customer name is required.\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Pickup</mat-label>\r\n            <input type=\"text\" placeholder=\"Search...\" matInput #filterPickup [matAutocomplete]=\"pickupAutocomplete\"\r\n              formControlName=\"pickup_location\" (mousedown)=\"$event.stopPropagation()\">\r\n\r\n            <mat-autocomplete #pickupAutocomplete=\"matAutocomplete\">\r\n              <mat-option (click)=\"selectedLongLat('pickup', option)\" *ngFor=\"let option of pickupOptions\"\r\n                [value]=\"option?.place_name\">\r\n                {{option?.place_name}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n          <mat-error *ngIf=\"addRouteForm.controls['pickup_lat_lng'].touched && addRouteForm.controls['pickup_lat_lng'].hasError('required')\">\r\n            Please select pickup location from the list.\r\n          </mat-error>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Delivery</mat-label>\r\n            <input type=\"text\" placeholder=\"Search...\" matInput #filterDelivery [matAutocomplete]=\"deliveryAutocomplete\"\r\n              formControlName=\"delivery_location\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-autocomplete #deliveryAutocomplete=\"matAutocomplete\">\r\n              <mat-option (click)=\"selectedLongLat('delivery', option)\" *ngFor=\"let option of deliveryOptions\"\r\n                [value]=\"option?.place_name\">\r\n                {{option?.place_name}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n          <mat-error *ngIf=\"addRouteForm.controls['delivery_lat_lng'].touched && addRouteForm.controls['delivery_lat_lng'].hasError('required')\">\r\n            Please select delivery location from the list.\r\n          </mat-error>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Notes</mat-label>\r\n            <textarea style=\"height: 18px; resize: none;\" matInput name=\"\" id=\"\" cols=\"30\" rows=\"10\" formControlName=\"note\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\"></textarea>\r\n            <mat-error *ngIf=\"addRouteForm.controls['note'].hasError('maxlength')\">\r\n              Notes should be within 2048 characters.\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <div class=\"col-6 d-flex\">\r\n          <div class=\"inputbox m-0\">\r\n            <mat-form-field>\r\n              <mat-label>Unit type</mat-label>\r\n              <mat-select formControlName=\"unit_id\" (selectionChange)=\"checkAndFetchRouteInformation()\" (mousedown)=\"$event.stopPropagation()\">\r\n                <mat-option *ngFor=\"let unit of unitsList\" [value]=\"unit?.id\"> {{unit?.type}} </mat-option>\r\n              </mat-select>\r\n              <mat-error *ngIf=\"addRouteForm.controls['unit_id'].hasError('required')\">\r\n                Unit is required\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n\r\n          <div class=\"inputbox m-0\">\r\n            <mat-form-field>\r\n              <mat-label>Material</mat-label>\r\n              <mat-select formControlName=\"materials_id\" (mousedown)=\"$event.stopPropagation()\">\r\n                <mat-option *ngFor=\"let material of materialsList\" [value]=\"material?.material_id\"> {{material?.material}}\r\n                </mat-option>\r\n              </mat-select>\r\n              <mat-error *ngIf=\"addRouteForm.controls['materials_id'].hasError('required')\">\r\n                Meterial is required\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <app-estimation-display *ngIf=\"addRouteForm?.value?.pickup_lat_lng && addRouteForm?.value?.delivery_lat_lng\" [value]=\"addRouteForm['value']\"></app-estimation-display>\r\n        </div>\r\n        <div class=\"col-6\" *ngIf=\"addRouteForm['value']['trucker_pay_estimate'] && addRouteForm['value']['customer_price_estimate']\">\r\n          <span *ngIf=\"config['repository'] !== 'customer'\" class=\"estimate\" (mousedown)=\"$event.stopPropagation()\">\r\n            Trucker Pay Estimate - <b>{{'$'+ addRouteForm['value']['trucker_pay_estimate']}}</b>\r\n          </span>\r\n          <span class=\"estimate\" (mousedown)=\"$event.stopPropagation()\">\r\n            Customer Price Estimate - <b>{{'$'+ addRouteForm['value']['customer_price_estimate']}}</b>\r\n          </span>\r\n        </div>\r\n        <button mat-raised-button type=\"submit\" (click)=\"saveRoute()\" *ngIf=\"preventSave\"\r\n          [disabled]=\"addRouteForm.invalid && preventSave || preventInitialSave\">{{routeId? 'Update' : 'Save'}}\r\n        </button>\r\n        <div class=\"loader\">\r\n          <mat-spinner *ngIf=\"!preventSave\"></mat-spinner>\r\n        </div>\r\n      </div>\r\n    </form>\r\n  </div>\r\n</div>\r\n", styles: [".addroutebox{width:calc(100% - 315px);position:absolute;left:300px;bottom:10px;z-index:999;display:flex;justify-content:space-between;align-items:flex-start}.addroutebox .routedetailbox{max-width:300px;padding:10px;background-color:#fff;border-radius:20px;margin-right:20px}@media (min-width: 1600px){.addroutebox .routedetailbox{max-width:280px}}.addroutebox .editbtn{background:#326ad3;padding:10px 25px;color:#fff;font-size:.8125rem;border-radius:30px;float:right}.add_add_route_box{background:white;padding:10px 20px;border-radius:20px;box-shadow:2px 4px 4px 2px #00000024;height:370px;width:100%;position:relative;cursor:move}.add_add_route_box .route_form_area{display:flex;flex-wrap:wrap;justify-content:space-between}.add_add_route_box .route_form_area .col-6{width:48%;margin-top:15px;justify-content:space-between}.add_add_route_box .route_form_area .col-6 .inputbox{width:47%}.add_add_route_box .route_form_area .col-6 span{font-size:.875rem}.add_add_route_box .route_form_area button{background:#326ad3;padding:0 18px;color:#fff;font-size:.8125rem;border-radius:30px;position:absolute;right:18px;top:20px}.closebtn{background:black;color:#fff;border-radius:30px;padding:0 18px;margin-left:10px}.delbtn{background:red;color:#fff;border-radius:30px;padding:10px 18px}.add_route_listingpart .listing_toggle{background:white;border-radius:15px;padding:8px 10px;position:absolute;right:10px;top:30px;cursor:pointer}.listing_box{background:#282828;height:100vh;position:fixed;right:0;top:0;z-index:1111;box-shadow:-3px 0 5px #ffffff14;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;width:0;border-radius:40px 0 0 40px;opacity:0}.listing_box .closebtn{display:none}.show .listing_box{width:250px;max-width:250px;flex:0 0 250px;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;padding:40px 0 40px 20px;opacity:1}@media (min-width: 1600px){.show .listing_box{width:320px;max-width:320px;flex:0 0 320px}}.show .listing_box h2{color:#fff;white-space:nowrap}.show .listing_box ul{padding:0 20px 0 0}.show .listing_box ul li{background:#4a4a4a;padding:15px;border-radius:15px;display:flex;margin-bottom:15px}.show .listing_box ul li .companayIcon{width:40px;height:40px;border-radius:10px;background:white;margin-right:10px;display:flex;justify-content:center;align-items:center}.show .listing_box ul li .company_cont{width:calc(100% - 50px)}.show .listing_box ul li .company_cont h3{color:#fff;font-size:15px;font-weight:400;margin:0;text-overflow:ellipsis;max-width:129px;-webkit-box-orient:vertical;white-space:nowrap;overflow:hidden}@media (min-width: 1600px){.show .listing_box ul li .company_cont h3{max-width:170px}}.show .listing_box ul li .company_cont p{color:#bcbcbc;font-size:12px;margin:5px 0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:16px}.show .closebtn{position:absolute;left:-33px;top:50px;background:#282828;color:#fff;padding:8px;border-top-left-radius:15px;border-bottom-left-radius:15px;cursor:pointer;box-shadow:-4px 2px 5px #ffffff14;display:block}.loader{position:absolute;width:95%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.buttonprt{margin-right:83px}.closebtnroutedetail{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#fff;position:absolute;top:-11px;left:-11px}.routenotes{max-height:170px;overflow:auto}.estimate{margin-right:20px;font-size:.7rem}@media (min-width: 1600px){.estimate{font-size:.95rem}}\n"] }]
+            args: [{ selector: 'app-add-route', template: "<div class=\"addroutebox\">\r\n  <div class=\"routedetailbox\" *ngIf=\"enablePopUp\">\r\n    <div class=\"closebtnroutedetail\">\r\n      <mat-icon (click)=\"prevantPopupClose = false; enablePopUp = false;\">clear</mat-icon>\r\n    </div>\r\n      <lib-route-info-card [propData]=\"{className: 'routeCard', repository: config['repository']}\" [popupData]=\"popupDetails\"></lib-route-info-card>\r\n    <div class=\"createTxt\">\r\n      <small>\r\n        Created by {{popupDetails['created_by_name']}} on {{popupDetails['created_at']}}\r\n      </small>\r\n      <button class=\"editbtn\" (click)=\"editEvent()\">Edit</button>\r\n    </div>\r\n  </div>\r\n  <div class=\"add_add_route_box\" cdkDrag [style.visibility]=\"!enableForm ? 'hidden' : 'visible'\">\r\n    <div class=\"topheadingprt\">\r\n      <h2> {{routeId? 'EDIT' : 'ADD'}} ROUTE </h2>\r\n      <div class=\"buttonprt\">\r\n        <button *ngIf=\"routeId\" class=\"delbtn\" (click)=\"openDialog()\">Delete</button>\r\n        <button mat-raised-button type=\"submit\" class=\"closebtn\" (click)=\"changeNav.next('Addroute')\">Close</button>\r\n      </div>\r\n    </div>\r\n    <form [formGroup]=\"addRouteForm\">\r\n      <div class=\"route_form_area\">\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Route Name</mat-label>\r\n            <input matInput formControlName=\"route_name\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-error *ngIf=\"addRouteForm.controls['route_name'].hasError('required')\">\r\n              Route Name is required\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <input type=\"text\" placeholder=\"Customer Name\" matInput formControlName=\"customer_name\" [matAutocomplete]=\"auto\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n              <mat-option *ngFor=\"let customer of customersList$ | async\" [value]=\"customer['customer_name']\">\r\n                {{customer['customer_name']}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n            <mat-error *ngIf=\"addRouteForm.controls['customer_name'].hasError('required')\">\r\n              Customer name is required.\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Pickup</mat-label>\r\n            <input type=\"text\" placeholder=\"Search...\" matInput #filterPickup [matAutocomplete]=\"pickupAutocomplete\"\r\n              formControlName=\"pickup_location\" (mousedown)=\"$event.stopPropagation()\">\r\n\r\n            <mat-autocomplete #pickupAutocomplete=\"matAutocomplete\">\r\n              <mat-option (click)=\"selectedLongLat('pickup', option)\" *ngFor=\"let option of pickupOptions\"\r\n                [value]=\"option?.place_name\">\r\n                {{option?.place_name}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n          <mat-error *ngIf=\"addRouteForm.controls['pickup_lat_lng'].touched && addRouteForm.controls['pickup_lat_lng'].hasError('required')\">\r\n            Please select pickup location from the list.\r\n          </mat-error>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Delivery</mat-label>\r\n            <input type=\"text\" placeholder=\"Search...\" matInput #filterDelivery [matAutocomplete]=\"deliveryAutocomplete\"\r\n              formControlName=\"delivery_location\" (mousedown)=\"$event.stopPropagation()\">\r\n            <mat-autocomplete #deliveryAutocomplete=\"matAutocomplete\">\r\n              <mat-option (click)=\"selectedLongLat('delivery', option)\" *ngFor=\"let option of deliveryOptions\"\r\n                [value]=\"option?.place_name\">\r\n                {{option?.place_name}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n          <mat-error *ngIf=\"addRouteForm.controls['delivery_lat_lng'].touched && addRouteForm.controls['delivery_lat_lng'].hasError('required')\">\r\n            Please select delivery location from the list.\r\n          </mat-error>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <mat-form-field>\r\n            <mat-label>Notes</mat-label>\r\n            <textarea style=\"height: 18px; resize: none;\" matInput name=\"\" id=\"\" cols=\"30\" rows=\"10\" formControlName=\"note\" autocomplete=\"nope\" (mousedown)=\"$event.stopPropagation()\"></textarea>\r\n            <mat-error *ngIf=\"addRouteForm.controls['note'].hasError('maxlength')\">\r\n              Notes should be within 2048 characters.\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <div class=\"col-6 d-flex\">\r\n          <div class=\"inputbox m-0\">\r\n            <mat-form-field>\r\n              <mat-label>Unit type</mat-label>\r\n              <mat-select formControlName=\"unit_id\" (selectionChange)=\"checkAndFetchRouteInformation()\" (mousedown)=\"$event.stopPropagation()\">\r\n                <mat-option *ngFor=\"let unit of unitsList\" [value]=\"unit?.id\"> {{unit?.type}} </mat-option>\r\n              </mat-select>\r\n              <mat-error *ngIf=\"addRouteForm.controls['unit_id'].hasError('required')\">\r\n                Unit is required\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n\r\n          <div class=\"inputbox m-0\">\r\n            <mat-form-field>\r\n              <mat-label>Material</mat-label>\r\n              <mat-select formControlName=\"materials_id\" (mousedown)=\"$event.stopPropagation()\">\r\n                <mat-option *ngFor=\"let material of materialsList\" [value]=\"config.repository === 'coolmap' ? material?.material_id : material?.sub_material_id\"> {{config.repository === 'coolmap' ? material?.material : material?.label}}\r\n                </mat-option>\r\n              </mat-select>\r\n              <mat-error *ngIf=\"addRouteForm.controls['materials_id'].hasError('required')\">\r\n                Meterial is required\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <app-estimation-display *ngIf=\"addRouteForm?.value?.pickup_lat_lng && addRouteForm?.value?.delivery_lat_lng\" [value]=\"addRouteForm['value']\"></app-estimation-display>\r\n        </div>\r\n        <div class=\"col-6\" *ngIf=\"addRouteForm['value']['trucker_pay_estimate'] && addRouteForm['value']['customer_price_estimate']\">\r\n          <span *ngIf=\"config['repository'] !== 'customer'\" class=\"estimate\" (mousedown)=\"$event.stopPropagation()\">\r\n            Trucker Pay Estimate - <b>{{'$'+ addRouteForm['value']['trucker_pay_estimate']}}</b>\r\n          </span>\r\n          <span class=\"estimate\" (mousedown)=\"$event.stopPropagation()\">\r\n            Customer Price Estimate - <b>{{'$'+ addRouteForm['value']['customer_price_estimate']}}</b>\r\n          </span>\r\n        </div>\r\n        <button mat-raised-button type=\"submit\" (click)=\"saveRoute()\" *ngIf=\"preventSave\"\r\n          [disabled]=\"addRouteForm.invalid && preventSave || preventInitialSave\">{{routeId? 'Update' : 'Save'}}\r\n        </button>\r\n        <div class=\"loader\">\r\n          <mat-spinner *ngIf=\"!preventSave\"></mat-spinner>\r\n        </div>\r\n      </div>\r\n    </form>\r\n  </div>\r\n</div>\r\n", styles: [".addroutebox{width:calc(100% - 315px);position:absolute;left:300px;bottom:10px;z-index:999;display:flex;justify-content:space-between;align-items:flex-start}.addroutebox .routedetailbox{max-width:300px;padding:10px;background-color:#fff;border-radius:20px;margin-right:20px}@media (min-width: 1600px){.addroutebox .routedetailbox{max-width:280px}}.addroutebox .editbtn{background:#326ad3;padding:10px 25px;color:#fff;font-size:.8125rem;border-radius:30px;float:right}.add_add_route_box{background:white;padding:10px 20px;border-radius:20px;box-shadow:2px 4px 4px 2px #00000024;height:370px;width:100%;position:relative;cursor:move}.add_add_route_box .route_form_area{display:flex;flex-wrap:wrap;justify-content:space-between}.add_add_route_box .route_form_area .col-6{width:48%;margin-top:15px;justify-content:space-between}.add_add_route_box .route_form_area .col-6 .inputbox{width:47%}.add_add_route_box .route_form_area .col-6 span{font-size:.875rem}.add_add_route_box .route_form_area button{background:#326ad3;padding:0 18px;color:#fff;font-size:.8125rem;border-radius:30px;position:absolute;right:18px;top:20px}.closebtn{background:black;color:#fff;border-radius:30px;padding:0 18px;margin-left:10px}.delbtn{background:red;color:#fff;border-radius:30px;padding:10px 18px}.add_route_listingpart .listing_toggle{background:white;border-radius:15px;padding:8px 10px;position:absolute;right:10px;top:30px;cursor:pointer}.listing_box{background:#282828;height:100vh;position:fixed;right:0;top:0;z-index:1111;box-shadow:-3px 0 5px #ffffff14;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;width:0;border-radius:40px 0 0 40px;opacity:0}.listing_box .closebtn{display:none}.show .listing_box{width:250px;max-width:250px;flex:0 0 250px;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;padding:40px 0 40px 20px;opacity:1}@media (min-width: 1600px){.show .listing_box{width:320px;max-width:320px;flex:0 0 320px}}.show .listing_box h2{color:#fff;white-space:nowrap}.show .listing_box ul{padding:0 20px 0 0}.show .listing_box ul li{background:#4a4a4a;padding:15px;border-radius:15px;display:flex;margin-bottom:15px}.show .listing_box ul li .companayIcon{width:40px;height:40px;border-radius:10px;background:white;margin-right:10px;display:flex;justify-content:center;align-items:center}.show .listing_box ul li .company_cont{width:calc(100% - 50px)}.show .listing_box ul li .company_cont h3{color:#fff;font-size:15px;font-weight:400;margin:0;text-overflow:ellipsis;max-width:129px;-webkit-box-orient:vertical;white-space:nowrap;overflow:hidden}@media (min-width: 1600px){.show .listing_box ul li .company_cont h3{max-width:170px}}.show .listing_box ul li .company_cont p{color:#bcbcbc;font-size:12px;margin:5px 0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:16px}.show .closebtn{position:absolute;left:-33px;top:50px;background:#282828;color:#fff;padding:8px;border-top-left-radius:15px;border-bottom-left-radius:15px;cursor:pointer;box-shadow:-4px 2px 5px #ffffff14;display:block}.loader{position:absolute;width:95%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.buttonprt{margin-right:83px}.closebtnroutedetail{box-shadow:0 0 5px #0000001c;border-radius:100%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#fff;position:absolute;top:-11px;left:-11px}.routenotes{max-height:170px;overflow:auto}.estimate{margin-right:20px;font-size:.7rem}@media (min-width: 1600px){.estimate{font-size:.95rem}}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.CoolmapService }, { type: i1.UtilsService }, { type: i1$1.MatDialog }, { type: i1.CoolmapConfigModel, decorators: [{
                     type: Inject,
                     args: ['memberData']