ca-components 0.0.2 → 0.0.3

package/fesm2022/ca-components.mjs

@@ -1,7 +1,78 @@
+import * as i0 from '@angular/core';
+import { Component, Input, TemplateRef, Host, ViewChild, EventEmitter, ViewEncapsulation, ChangeDetectionStrategy, Output, CUSTOM_ELEMENTS_SCHEMA, Self, ViewChildren, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Component, Input, NgModule } from '@angular/core';
+import * as i1$1 from '@ng-bootstrap/ng-bootstrap';
+import { NgbModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import * as i2 from 'angular-svg-icon';
+import { AngularSvgIconModule, SvgIconRegistryService } from 'angular-svg-icon';
+import { showAnimation, borderShowAnimation, pickupAnimation, noteLongAnimation } from '@shared/animations/animation';
+import { DetailDropdownSvgRoutes } from '@shared/components/ca-details-dropdown/utils/svg-routes/detail-dropdown-svg-routes';
+import { Subject, combineLatest, takeUntil } from 'rxjs';
+import { HttpClientModule } from '@angular/common/http';
+import { showAnimation as showAnimation$1 } from '@shared/animations/show.animation';
+import { closeForm } from '@shared/animations/close-form.animation';
+import { CaFiltersSvgRoutes } from '@shared/components/ca-filters/utils/svg-routes/ca-filters-svg-routes';
+import { ToolbarFilterStringEnum } from '@shared/components/ca-map/enums/toolbar-filter-string.enum';
+import { CaMoneyFilterComponent } from '@shared/components/ca-filters/components/ca-money-filter/ca-money-filter.component';
+import { CaStatusFilterComponent } from '@shared/components/ca-filters/components/ca-status-filter/ca-status-filter.component';
+import { CaTimeFilterComponent } from '@shared/components/ca-filters/components/ca-time-filter/ca-time-filter.component';
+import * as i1$2 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { InputErrorPipe } from '@shared/components/ca-input/pipes/input-error.pipe';
+import { InputContainerClassPipe } from '@shared/components/ca-input/pipes/input-container-class.pipe';
+import { InputClassPipe } from '@shared/components/ca-input/pipes/input-class.pipe';
+import { LabelClassPipe } from '@shared/components/ca-input/pipes/label-class.pipe';
+import { ShowClearPipe } from '@shared/components/ca-input/pipes/show-clear.pipe';
+import { ShowInvalidDangerMarkPipe } from '@shared/components/ca-input/pipes/show-invalid-danger-mark.pipe';
+import { ShowValidCheckPipe } from '@shared/components/ca-input/pipes/show-valid-check.pipe';
+import { TaSvgPipe } from '@shared/pipes/ta-svg.pipe';
+import { InputTypePipe } from '@shared/components/ca-input/pipes/input-type.pipe';
+import { CaInputClearComponent } from '@shared/components/ca-input/components/ca-input-clear/ca-input-clear.component';
+import { CaAppTooltipV2Component as CaAppTooltipV2Component$1 } from '@shared/components/ca-app-tooltip-v2/ca-app-tooltip-v2.component';
+import { CaInputPasswordComponent } from '@shared/components/ca-input/components/ca-input-password/ca-input-password.component';
+import { CaInputPlaceholderIconComponent } from '@shared/components/ca-input/components/ca-input-placeholder-icon/ca-input-placeholder-icon.component';
+import * as i2$1 from '@shared/components/ca-input/services/ca-input-state.service';
+import { InputStateService } from '@shared/components/ca-input/services/ca-input-state.service';
+import { InputSvgRoutes } from '@shared/components/ca-input/utils/input-svg-routes';
+import * as i1$3 from '@angular/google-maps';
+import { GoogleMap, MapInfoWindow, GoogleMapsModule } from '@angular/google-maps';
+import { CaMapDropdownComponent as CaMapDropdownComponent$1 } from '@shared/components/ca-map-dropdown/ca-map-dropdown.component';
+import { GoogleMapEnum } from '@shared/components/ca-map/enums/google-map.enum';
+import { MapHelper } from '@shared/components/ca-map/utils/helpers/map.helper';
+import { MapSvgRoutes } from '@shared/components/ca-map/utils/map-svg-routes/map-svg-routes';
+import { CaDetailsDropdownComponent as CaDetailsDropdownComponent$1 } from '@shared/components/ca-details-dropdown/ca-details-dropdown.component';
+import taDetailDropdownJson from '@assets/json/ta-detail-dropdown.json';
+import { MapDropdownSvgRoutes } from '@shared/components/ca-map-dropdown/utils/svg-routes/map-dropdown-svg-routes';
+import moment from 'moment';
+import { SafeHtmlPipe } from '@shared/pipes/safe-html.pipe';
+import { PlaceholderDirective } from '@shared/directives/placeholder-directive';
+import { CopyPasteHelper } from '@shared/components/ca-note/utils/helper/copy-paste.helper';
+import { CaNoteContainerComponent as CaNoteContainerComponent$1 } from '@shared/components/ca-note-container/ca-note-container.component';
+import { CaSpinnerComponent as CaSpinnerComponent$1 } from '@shared/components/ca-spinner/ca-spinner.component';
+import { NoteSvgRoutes } from '@shared/components/ca-note/utils/svg-routes/note-svg-routes';
+import { NoteConfigConstants } from '@shared/components/ca-note-container/utils/constants/note-config.constant';
+import { NoteSelectedColorStringEnum } from '@shared/components/ca-note-container/enums/note-selected-color.enum';
+import { NoteDefaultStringEnum } from '@shared/components/ca-note-container/enums/note-default-string.enum';
+import { NoteContainerSvgRoutes } from '@shared/components/ca-note-container/utils/svg-routes/note-container-svg-routes';
+import { accordionAnimation } from '@shared/animations/accordion-animation';
+import { PayrollListSummaryOverviewSvgRoutes } from '@shared/components/ca-payroll-list-summary-overview/utils/svg-routes/payroll-list-summary-svg-routes';
+import { CaPayrollListSummaryOverviewComponent as CaPayrollListSummaryOverviewComponent$1 } from '@shared/components/ca-payroll-list-summary-overview/ca-payroll-list-summary-overview.component';
+import CaTable from '@assets/json/ca-table.json';
+import { LoadComponent } from '@shared/components/ca-pickup-delivery-block/components/ca-load/ca-load.component';
+import { PickupDeliveryHelper } from '@shared/components/ca-pickup-delivery-block/utils/helpers/pickup-delivery.helper';
+import { CaMapComponent as CaMapComponent$1 } from '@shared/components/ca-map/ca-map.component';
+import { MapConstants } from '@shared/constants/map.constant';
+import { ProgressBarConstants } from '@shared/components/ca-progress-bar/utils/constants/progress-bar.constants';
+import { ProgressBarSvgRoutes } from '@shared/components/ca-progress-bar/utils/svg-routes/progress-bar-svg-routes';
+import { SearchMultipleStatesRoutes } from '@shared/components/ca-search-multiple-states/utils/svg-routes/search-multiple-states.routes';
+import { CaInputComponent as CaInputComponent$1 } from '@shared/components/ca-input/ca-input.component';
+import { toggleAnimation } from '@shared/animations/expand-search-button.animation';
+import { inputConfig } from '@shared/components/ca-search-multiple-states/utils/config/input-config';
+import * as i2$2 from 'ngx-lottie';
+import { LottieModule } from 'ngx-lottie';
+import { ThousandToShortFormatPipe } from '@shared/pipes/thousand-to-short-format-pipe';
+import { FormatCurrencyPipe } from '@shared/pipes/format-currency.pipe';
 
 class CaProfileImageComponent {
     constructor() {
@@ -10,11 +81,11 @@ class CaProfileImageComponent {
     }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaProfileImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CaProfileImageComponent, isStandalone: true, selector: "app-ca-profile-image", inputs: { avatarImg: "avatarImg", avatarColor: "avatarColor", textShortName: "textShortName", isRound: "isRound", size: "size", fontSize: "fontSize", isHoverEffect: "isHoverEffect" }, ngImport: i0, template: "<div \n  class=\"avatar-container d-flex\"\n  [ngClass]=\"{\n    'avatar-hover': isHoverEffect,\n  }\"  \n>\n  <ng-container *ngIf=\"avatarImg else noImage\">\n    <div \n      class=\"avatar-img\" \n      [ngClass]=\"{\n        'round-avatar': isRound,\n        'regular-avatar': !isRound\n      }\" \n      [ngStyle]=\"{\n        width: size + 'px',\n        height: size + 'px'\n      }\"\n      >\n      \n      <img class=\"d-flex\" alt=\"avatar\" [src]=\"avatarImg\" />\n    </div>\n  </ng-container>\n\n  <ng-template #noImage>\n    <div class=\"avatar-no-img d-flex justify-content-center align-items-center\" \n      [ngClass]=\"{\n        'round-avatar': isRound,\n        'regular-avatar': !isRound\n      }\" \n      [ngStyle]=\"{\n        'background-color': \n          avatarColor.background\n          ? avatarColor.background\n          : 'unset',\n        color: avatarColor.color\n          ? avatarColor.color\n          : 'unset',\n        width: size + 'px',\n        height: size + 'px',\n        'font-size': fontSize + 'px'\n      }\"\n      >\n      {{ textShortName }}\n    </div>\n  </ng-template>\n</div>", styles: [".avatar-container{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;cursor:pointer}.avatar-container.avatar-hover{transition:transform .2s}.avatar-container.avatar-hover:hover{transform:scale(1.8);transition:.2s}.avatar-container .round-avatar{border-radius:50%;width:20px;height:20px;overflow:hidden}.avatar-container .regular-avatar{border-radius:2px;width:18px;height:20px;overflow:hidden}.avatar-container .regular-avatar img{border-radius:2px}.avatar-container .avatar-img img{width:100%;height:100%}.avatar-container .avatar-no-img{font-size:7px;font-weight:800;-webkit-user-select:none;user-select:none}.avatar-container .avatar-owner{-webkit-user-select:none;user-select:none;width:10px;height:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CaProfileImageComponent, isStandalone: true, selector: "app-ca-profile-image", inputs: { avatarImg: "avatarImg", avatarColor: "avatarColor", textShortName: "textShortName", isRound: "isRound", size: "size", fontSize: "fontSize", isHoverEffect: "isHoverEffect" }, ngImport: i0, template: "<div \n  class=\"avatar-container d-flex\"\n  [ngClass]=\"{\n    'avatar-hover': isHoverEffect,\n  }\"  \n>\n  <ng-container *ngIf=\"avatarImg else noImage\">\n    <div \n      class=\"avatar-img\" \n      [ngClass]=\"{\n        'round-avatar': isRound,\n        'regular-avatar': !isRound\n      }\" \n      [ngStyle]=\"{\n        width: size + 'px',\n        height: size + 'px'\n      }\"\n      >\n      \n      <img class=\"d-flex\" alt=\"avatar\" [src]=\"avatarImg\" />\n    </div>\n  </ng-container>\n\n  <ng-template #noImage>\n    <div class=\"avatar-no-img d-flex justify-content-center align-items-center\" \n      [ngClass]=\"{\n        'round-avatar': isRound,\n        'regular-avatar': !isRound\n      }\" \n      [ngStyle]=\"{\n        'background-color': \n          avatarColor.background\n          ? avatarColor.background\n          : 'unset',\n        color: avatarColor.color\n          ? avatarColor.color\n          : 'unset',\n        width: size + 'px',\n        height: size + 'px',\n        'font-size': fontSize + 'px'\n      }\"\n      >\n      {{ textShortName }}\n    </div>\n  </ng-template>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap\";@import\"/node_modules/bootstrap/dist/css/bootstrap.css\";.ca-font-thin{font-weight:100!important}.ca-font-extra-light{font-weight:200!important}.ca-font-light{font-weight:300!important}.ca-font-regular{font-weight:400!important}.ca-font-medium{font-weight:500!important}.ca-font-semi-bold{font-weight:600!important}.ca-font-bold{font-weight:700!important}.ca-font-extra-bold{font-weight:800!important}.ca-font-black{font-weight:900!important}@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.table-progress-popover{background-color:unset!important;margin-left:-10px}.table-progress-popover .progress-dropdown{margin-top:-6px;width:260px;height:200px;background:#2f2f2f;border-radius:3px;padding:8px;box-shadow:0 0 4px #00000026;overflow:hidden;animation:progressAnimation .25s ease-in-out}.table-progress-popover .progress-dropdown .progress-header .progress-title{font-size:18px;font-weight:600;color:#dadada}.table-progress-popover .progress-dropdown .progress-header .progress-title span{font-weight:400}.table-progress-popover .progress-dropdown .progress-header .progress-total{font-size:14px;line-height:17px;color:#dadada}.table-progress-popover .progress-dropdown .table-progress-bar-container{width:100%;height:8px;margin-top:6px;border-radius:2px;overflow:hidden}.table-progress-popover .progress-dropdown .table-progress-bar-container .table-progress-bar{height:100%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-dual-info-container .progress-info-container{width:50%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container{margin-top:10px}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-title{margin-bottom:2px;font-size:11px;font-weight:700;line-height:14px;color:#ffffffb2}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-text{font-size:14px;line-height:18px;color:#dadada}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@keyframes progressAnimation{0%{height:0px}to{height:220px}}ngb-popover-window{padding:unset!important;border:unset!important}ngb-popover-window .popover-arrow{display:none!important}ngb-popover-window .popover-body{padding:unset!important}*{margin:0;font-family:Roboto,Helvetica Neue,sans-serif}html{scroll-behavior:auto!important}.gm-style-iw-chr,.gm-style-iw-tc{display:none}.gm-style .gm-style-iw-c{border-radius:0}.gm-style-iw{overflow-y:auto!important;overflow-x:hidden!important}.gm-style-iw>div{overflow:visible!important}.infoWindow{overflow:hidden!important}.gm-style-iw-d,.gm-style-iw.gm-style-iw-c{max-height:350px!important}.avatar-container{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;cursor:pointer}.avatar-container.avatar-hover{transition:transform .2s}.avatar-container.avatar-hover:hover{transform:scale(1.8);transition:.2s}.avatar-container .round-avatar{border-radius:50%;width:20px;height:20px;overflow:hidden}.avatar-container .regular-avatar{border-radius:2px;width:18px;height:20px;overflow:hidden}.avatar-container .regular-avatar img{border-radius:2px}.avatar-container .avatar-img img{width:100%;height:100%}.avatar-container .avatar-no-img{font-size:7px;font-weight:800;-webkit-user-select:none;user-select:none}.avatar-container .avatar-owner{-webkit-user-select:none;user-select:none;width:10px;height:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaProfileImageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-ca-profile-image', standalone: true, imports: [CommonModule], template: "<div \n  class=\"avatar-container d-flex\"\n  [ngClass]=\"{\n    'avatar-hover': isHoverEffect,\n  }\"  \n>\n  <ng-container *ngIf=\"avatarImg else noImage\">\n    <div \n      class=\"avatar-img\" \n      [ngClass]=\"{\n        'round-avatar': isRound,\n        'regular-avatar': !isRound\n      }\" \n      [ngStyle]=\"{\n        width: size + 'px',\n        height: size + 'px'\n      }\"\n      >\n      \n      <img class=\"d-flex\" alt=\"avatar\" [src]=\"avatarImg\" />\n    </div>\n  </ng-container>\n\n  <ng-template #noImage>\n    <div class=\"avatar-no-img d-flex justify-content-center align-items-center\" \n      [ngClass]=\"{\n        'round-avatar': isRound,\n        'regular-avatar': !isRound\n      }\" \n      [ngStyle]=\"{\n        'background-color': \n          avatarColor.background\n          ? avatarColor.background\n          : 'unset',\n        color: avatarColor.color\n          ? avatarColor.color\n          : 'unset',\n        width: size + 'px',\n        height: size + 'px',\n        'font-size': fontSize + 'px'\n      }\"\n      >\n      {{ textShortName }}\n    </div>\n  </ng-template>\n</div>", styles: [".avatar-container{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;cursor:pointer}.avatar-container.avatar-hover{transition:transform .2s}.avatar-container.avatar-hover:hover{transform:scale(1.8);transition:.2s}.avatar-container .round-avatar{border-radius:50%;width:20px;height:20px;overflow:hidden}.avatar-container .regular-avatar{border-radius:2px;width:18px;height:20px;overflow:hidden}.avatar-container .regular-avatar img{border-radius:2px}.avatar-container .avatar-img img{width:100%;height:100%}.avatar-container .avatar-no-img{font-size:7px;font-weight:800;-webkit-user-select:none;user-select:none}.avatar-container .avatar-owner{-webkit-user-select:none;user-select:none;width:10px;height:10px}\n"] }]
+            args: [{ selector: "app-ca-profile-image", standalone: true, imports: [CommonModule], template: "<div \n  class=\"avatar-container d-flex\"\n  [ngClass]=\"{\n    'avatar-hover': isHoverEffect,\n  }\"  \n>\n  <ng-container *ngIf=\"avatarImg else noImage\">\n    <div \n      class=\"avatar-img\" \n      [ngClass]=\"{\n        'round-avatar': isRound,\n        'regular-avatar': !isRound\n      }\" \n      [ngStyle]=\"{\n        width: size + 'px',\n        height: size + 'px'\n      }\"\n      >\n      \n      <img class=\"d-flex\" alt=\"avatar\" [src]=\"avatarImg\" />\n    </div>\n  </ng-container>\n\n  <ng-template #noImage>\n    <div class=\"avatar-no-img d-flex justify-content-center align-items-center\" \n      [ngClass]=\"{\n        'round-avatar': isRound,\n        'regular-avatar': !isRound\n      }\" \n      [ngStyle]=\"{\n        'background-color': \n          avatarColor.background\n          ? avatarColor.background\n          : 'unset',\n        color: avatarColor.color\n          ? avatarColor.color\n          : 'unset',\n        width: size + 'px',\n        height: size + 'px',\n        'font-size': fontSize + 'px'\n      }\"\n      >\n      {{ textShortName }}\n    </div>\n  </ng-template>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap\";@import\"/node_modules/bootstrap/dist/css/bootstrap.css\";.ca-font-thin{font-weight:100!important}.ca-font-extra-light{font-weight:200!important}.ca-font-light{font-weight:300!important}.ca-font-regular{font-weight:400!important}.ca-font-medium{font-weight:500!important}.ca-font-semi-bold{font-weight:600!important}.ca-font-bold{font-weight:700!important}.ca-font-extra-bold{font-weight:800!important}.ca-font-black{font-weight:900!important}@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.table-progress-popover{background-color:unset!important;margin-left:-10px}.table-progress-popover .progress-dropdown{margin-top:-6px;width:260px;height:200px;background:#2f2f2f;border-radius:3px;padding:8px;box-shadow:0 0 4px #00000026;overflow:hidden;animation:progressAnimation .25s ease-in-out}.table-progress-popover .progress-dropdown .progress-header .progress-title{font-size:18px;font-weight:600;color:#dadada}.table-progress-popover .progress-dropdown .progress-header .progress-title span{font-weight:400}.table-progress-popover .progress-dropdown .progress-header .progress-total{font-size:14px;line-height:17px;color:#dadada}.table-progress-popover .progress-dropdown .table-progress-bar-container{width:100%;height:8px;margin-top:6px;border-radius:2px;overflow:hidden}.table-progress-popover .progress-dropdown .table-progress-bar-container .table-progress-bar{height:100%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-dual-info-container .progress-info-container{width:50%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container{margin-top:10px}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-title{margin-bottom:2px;font-size:11px;font-weight:700;line-height:14px;color:#ffffffb2}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-text{font-size:14px;line-height:18px;color:#dadada}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@keyframes progressAnimation{0%{height:0px}to{height:220px}}ngb-popover-window{padding:unset!important;border:unset!important}ngb-popover-window .popover-arrow{display:none!important}ngb-popover-window .popover-body{padding:unset!important}*{margin:0;font-family:Roboto,Helvetica Neue,sans-serif}html{scroll-behavior:auto!important}.gm-style-iw-chr,.gm-style-iw-tc{display:none}.gm-style .gm-style-iw-c{border-radius:0}.gm-style-iw{overflow-y:auto!important;overflow-x:hidden!important}.gm-style-iw>div{overflow:visible!important}.infoWindow{overflow:hidden!important}.gm-style-iw-d,.gm-style-iw.gm-style-iw-c{max-height:350px!important}.avatar-container{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;cursor:pointer}.avatar-container.avatar-hover{transition:transform .2s}.avatar-container.avatar-hover:hover{transform:scale(1.8);transition:.2s}.avatar-container .round-avatar{border-radius:50%;width:20px;height:20px;overflow:hidden}.avatar-container .regular-avatar{border-radius:2px;width:18px;height:20px;overflow:hidden}.avatar-container .regular-avatar img{border-radius:2px}.avatar-container .avatar-img img{width:100%;height:100%}.avatar-container .avatar-no-img{font-size:7px;font-weight:800;-webkit-user-select:none;user-select:none}.avatar-container .avatar-owner{-webkit-user-select:none;user-select:none;width:10px;height:10px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { avatarImg: [{
                 type: Input
             }], avatarColor: [{
@@ -31,17 +102,1803 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+class CaAppTooltipV2Component {
+    constructor(ngbTooltop) {
+        this.ngbTooltop = ngbTooltop;
+        this.mainTooltip = '';
+        this.position = '';
+        this.openTooltipDelay = 300;
+        this.tooltipBackground = 'rgb(40, 82, 159)';
+        this.tooltipColor = '#fff';
+        this.tooltipTextAlign = 'left';
+        this.ngbTooltop.container = 'body';
+    }
+    ngAfterViewInit() {
+        this.bindTemplete();
+    }
+    bindTemplete() {
+        if (this.ngbTooltop) {
+            this.ngbTooltop.tooltipClass = 'app-main-tooltip';
+            this.ngbTooltop.placement = this.position;
+            this.ngbTooltop.ngbTooltip = this.template;
+            this.ngbTooltop.openDelay = this.openTooltipDelay;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaAppTooltipV2Component, deps: [{ token: i1$1.NgbTooltip, host: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CaAppTooltipV2Component, isStandalone: true, selector: "mainTooltip, [mainTooltip]", inputs: { mainTooltip: "mainTooltip", position: "position", openTooltipDelay: "openTooltipDelay", tooltipBackground: "tooltipBackground", tooltipColor: "tooltipColor", tooltipTextAlign: "tooltipTextAlign", tooltipMarginTop: "tooltipMarginTop" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-content> </ng-content>\n<ng-template>\n    <div\n        class=\"tooltip-holder\"\n        [style]=\"\n            'margin-top: ' +\n            tooltipMarginTop +\n            '; background-color: ' +\n            tooltipBackground +\n            '; color: ' +\n            tooltipColor +\n            '; text-align: ' +\n            tooltipTextAlign +\n            ' '\n        \"\n        [innerHTML]=\"mainTooltip\"\n    ></div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaAppTooltipV2Component, decorators: [{
+            type: Component,
+            args: [{ selector: "mainTooltip, [mainTooltip]", standalone: true, imports: [CommonModule], template: "<ng-content> </ng-content>\n<ng-template>\n    <div\n        class=\"tooltip-holder\"\n        [style]=\"\n            'margin-top: ' +\n            tooltipMarginTop +\n            '; background-color: ' +\n            tooltipBackground +\n            '; color: ' +\n            tooltipColor +\n            '; text-align: ' +\n            tooltipTextAlign +\n            ' '\n        \"\n        [innerHTML]=\"mainTooltip\"\n    ></div>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$1.NgbTooltip, decorators: [{
+                    type: Host
+                }] }]; }, propDecorators: { mainTooltip: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], openTooltipDelay: [{
+                type: Input
+            }], tooltipBackground: [{
+                type: Input
+            }], tooltipColor: [{
+                type: Input
+            }], tooltipTextAlign: [{
+                type: Input
+            }], tooltipMarginTop: [{
+                type: Input
+            }], template: [{
+                type: ViewChild,
+                args: [TemplateRef, { static: false }]
+            }] } });
+
+class CaDetailsDropdownComponent {
+    constructor(chnd, ngZone) {
+        this.chnd = chnd;
+        this.ngZone = ngZone;
+        this.leftIcon = true;
+        this.placement = "bottom-right";
+        this.dropDownActions = new EventEmitter();
+        this.openModalAction = new EventEmitter();
+        this.dropDownActive = -1;
+        this.subtypeHovered = false;
+        this.popperOptions = (options) => {
+            options.modifiers?.push({
+                name: "custom",
+                enabled: true,
+                phase: "main",
+                effect: ({ state, instance }) => {
+                    const observer = new ResizeObserver(() => instance.update());
+                    observer.observe(state.elements.reference);
+                    return () => {
+                        observer.disconnect();
+                    };
+                },
+            });
+            return options;
+        };
+    }
+    toggleDropdown(tooltip) {
+        this.ngZone.run(() => {
+            this.tooltip = tooltip;
+            if (tooltip.isOpen()) {
+                tooltip.close();
+            }
+            else {
+                if (this.options) {
+                    tooltip.open({ data: [...this.options] });
+                }
+            }
+            this.dropDownActive = tooltip.isOpen() ? this.id : -1;
+            this.chnd.detectChanges();
+        });
+    }
+    /**Function retrun id */
+    identity(index) {
+        return index;
+    }
+    onAction(action, event) {
+        event.stopPropagation();
+        event.preventDefault();
+        if (action?.disabled) {
+            return false;
+        }
+        this.dropDownActions.emit({
+            id: this.id,
+            data: this.data,
+            type: action.name,
+        });
+        this.tooltip.close();
+    }
+    dropdownClosed() {
+        this.options.map((item) => {
+            item["mutedStyle"] = false;
+        });
+    }
+    getSvgPath(propertyName) {
+        return DetailDropdownSvgRoutes[propertyName];
+    }
+    ngOnDestroy() {
+        this.tooltip?.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaDetailsDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CaDetailsDropdownComponent, isStandalone: true, selector: "app-ca-details-dropdown", inputs: { options: "options", id: "id", customClassDropDown: "customClassDropDown", hasVericalDots: "hasVericalDots", data: "data", leftIcon: "leftIcon", placement: "placement" }, outputs: { dropDownActions: "dropDownActions", openModalAction: "openModalAction" }, ngImport: i0, template: "<div\n  #t2=\"ngbPopover\"\n  (click)=\"toggleDropdown(t2)\"\n  (hidden)=\"dropdownClosed()\"\n  [autoClose]=\"'outside'\"\n  [ngbPopover]=\"dropdownPopover\"\n  [placement]=\"placement\"\n  class=\"details-dropdown-container\"\n  [ngClass]=\"{\n    'active-drop': dropDownActive === id,\n    rightRotation: leftIcon,\n    leftRotation: !leftIcon,\n  }\"\n  popoverClass=\"details-dropdown-popover\"\n  [popperOptions]=\"popperOptions\"\n  triggers=\"manual\"\n  [container]=\"'body'\"\n  (hidden)=\"dropDownActive = -1\"\n  container=\"body\"\n>\n  <svg-icon class=\"dropdown-dots\" [src]=\"getSvgPath('menuRoute')\"></svg-icon>\n</div>\n\n<ng-template #dropdownPopover let-data=\"data\">\n  <div\n    class=\"dropdown-main-popover-body d-flex justify-content-center align-items-center\"\n  >\n    <div class=\"details-dropdown-body\">\n      <ng-container\n        *ngFor=\"let action of data; let i = index; trackBy: identity\"\n      >\n        <ng-container\n          *ngIf=\"\n            action.title !== 'border' &&\n            action.title !== 'Add New' &&\n            action.title !== 'Request' &&\n            action.title !== 'Report' &&\n            !action.hide\n          \"\n        >\n          <div\n            class=\"action-holder d-flex justify-content-between align-content-center\"\n            @showAnimation\n            [class.leftIcon]=\"leftIcon\"\n            [class.disabledAction]=\"action.disabled\"\n            [class.disabledActionMain]=\"action.disabled\"\n            (click)=\"onAction(action, $event)\"\n          >\n            <div class=\"action-select-holder d-flex align-items-center\">\n              <div class=\"actionTitle d-flex align-items-center\">\n                {{ action.title }}\n              </div>\n              <div\n                class=\"actionIcon d-flex justify-content-center align-items-center\"\n                [class.redIcon]=\"\n                  action.title === 'Delete' || action.title === 'Close Business'\n                \"\n                [class.blueIcon]=\"action.blueIcon\"\n                [class.greenIcon]=\"action.greenIcon\"\n              >\n                <svg-icon [src]=\"action.svgUrl\"></svg-icon>\n              </div>\n            </div>\n          </div>\n          <ng-container *ngIf=\"action.hasBorder\">\n            <div\n              class=\"border-holder d-flex justify-content-center\"\n              @borderShowAnimation\n            >\n              <div class=\"action-border-line\"></div>\n            </div>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n", styles: ["@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.details-dropdown-popover{background-color:transparent}.details-dropdown-container{width:26px;height:26px;border-radius:2px}.details-dropdown-container .dropdown-dots{cursor:pointer}.details-dropdown-container .dropdown-dots svg{display:flex;justify-content:center;align-items:center;transform:rotate(0);fill:#919191;transition:transform .1s ease}.details-dropdown-container .dropdown-dots svg path{fill:#919191}.details-dropdown-container:hover{cursor:pointer;background-color:#42424220}.details-dropdown-container:hover .dropdown-dots svg path{fill:#424242}.details-dropdown-container.active-drop{background-color:#424242}.details-dropdown-container.active-drop.rightRotation .dropdown-dots{cursor:pointer}.details-dropdown-container.active-drop.rightRotation .dropdown-dots svg{transform:rotate(-90deg)}.details-dropdown-container.active-drop.rightRotation .dropdown-dots svg path{fill:#dadada}.details-dropdown-container.active-drop.leftRotation .dropdown-dots{cursor:pointer}.details-dropdown-container.active-drop.leftRotation .dropdown-dots svg{transform:rotate(90deg)}.details-dropdown-container.active-drop.leftRotation .dropdown-dots svg path{fill:#dadada}.details-dropdown-container.active-drop:hover{background-color:#424242}.details-dropdown-container.active-drop:hover svg path{fill:#ebebeb}.dropdown-main-popover-body{position:relative;top:-4px;left:4px;background-color:transparent;transition:transform .1s ease;animation:scaleItem .3s}.details-dropdown-body{padding:4px 4px .1px;background-color:#2f2f2f;border-radius:3px}.details-dropdown-body .action-holder{position:relative;height:26px;margin-bottom:4px;border-radius:2px;-webkit-user-select:none;user-select:none}.details-dropdown-body .action-holder .actionTitle{flex:1;margin-right:22px;margin-left:5px;line-height:18px;font-size:14px;color:#fff;font-family:Montserrat,sans-serif}.details-dropdown-body .action-holder .action-select-holder{position:relative;width:100%;border-radius:2px;min-height:26px}.details-dropdown-body .action-holder .actionIcon{height:18px;width:18px;margin-right:5px}.details-dropdown-body .action-holder .actionIcon svg-icon{display:flex;align-items:center;transform:rotate(0);transition:transform .1s ease-in}.details-dropdown-body .action-holder .actionIcon svg-icon svg rect{fill:transparent;height:17.1px;width:17.1px}.details-dropdown-body .action-holder .actionIcon svg-icon svg path{height:17.1px;width:17.1px;fill:#aaa}.details-dropdown-body .action-holder .actionIcon.redIcon svg-icon svg path{fill:#e57373}.details-dropdown-body .action-holder .actionIcon.blueIcon svg-icon svg path{fill:#6f9ee0}.details-dropdown-body .action-holder .actionIcon.greenIcon svg-icon svg path{fill:#6f9ee0}.details-dropdown-body .action-holder .actionIcon.arrowIcon{justify-content:right}.details-dropdown-body .action-holder .actionIcon.arrowIcon svg-icon{display:flex;justify-content:right}.details-dropdown-body .action-holder .actionIcon.arrowIcon svg-icon svg{height:14px;width:14px}.details-dropdown-body .action-holder .actionIcon.arrowIcon svg-icon svg rect{height:14px;width:14px}.details-dropdown-body .action-holder .actionIcon.arrowIcon svg-icon svg path{height:14px;width:14px}.details-dropdown-body .action-holder.leftIcon .actionTitle{margin-right:22px;margin-left:30px}.details-dropdown-body .action-holder.leftIcon .actionIcon{position:absolute;left:0;margin:0 5px}.details-dropdown-body .action-holder:hover{cursor:pointer;background-color:#1d1d1d}.details-dropdown-body .action-holder:hover.disabledAction.disabledActionMain{background-color:transparent}.details-dropdown-body .action-holder:hover.disabledAction.subTypeHolder{cursor:pointer!important}.details-dropdown-body .action-holder:hover .hoveredSubtype{background-color:#aaaaaa10!important}.details-dropdown-body .action-holder:hover .actionTitle{color:#fff}.details-dropdown-body .action-holder:hover .actionIcon svg-icon svg path{fill:#dadada}.details-dropdown-body .action-holder:hover .redIcon svg-icon svg path{fill:#ef9a9a}.details-dropdown-body .action-holder:hover .blueIcon svg-icon svg path{fill:#98b9ea}.details-dropdown-body .action-holder:hover .greenIcon svg-icon svg path{fill:#80cbba}.details-dropdown-body .border-holder .action-border-line{height:1px;width:calc(100% - 8px);margin-bottom:4px;background-color:#aaaaaa20;border-radius:1px}.details-dropdown-body .disabledAction{pointer-events:none!important;cursor:auto!important}.details-dropdown-body .disabledAction .actionTitle{color:#6c6c6c}.details-dropdown-body .disabledAction .actionIcon svg-icon svg path{fill:#aaaaaa40}.details-dropdown-body .disabledAction .redIcon svg-icon svg path{fill:#e5737340!important}.details-dropdown-body .disabledAction .blueIcon svg-icon svg path{fill:#6f9ee040!important}.details-dropdown-body .disabledAction .greenIcon svg-icon svg path{fill:#4db6a240!important}.details-dropdown-body .disabledAction:hover .actionTitle{color:#6c6c6c}.details-dropdown-body .disabledAction:hover .actionIcon svg-icon svg path{fill:#aaaaaa40}@keyframes scaleItem{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: 
+                //modules
+                CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: AngularSvgIconModule }, { kind: "component", type: i2.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i1$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }], animations: [showAnimation, borderShowAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaDetailsDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-ca-details-dropdown", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        //modules
+                        CommonModule,
+                        AngularSvgIconModule,
+                        NgbModule,
+                    ], animations: [showAnimation, borderShowAnimation], template: "<div\n  #t2=\"ngbPopover\"\n  (click)=\"toggleDropdown(t2)\"\n  (hidden)=\"dropdownClosed()\"\n  [autoClose]=\"'outside'\"\n  [ngbPopover]=\"dropdownPopover\"\n  [placement]=\"placement\"\n  class=\"details-dropdown-container\"\n  [ngClass]=\"{\n    'active-drop': dropDownActive === id,\n    rightRotation: leftIcon,\n    leftRotation: !leftIcon,\n  }\"\n  popoverClass=\"details-dropdown-popover\"\n  [popperOptions]=\"popperOptions\"\n  triggers=\"manual\"\n  [container]=\"'body'\"\n  (hidden)=\"dropDownActive = -1\"\n  container=\"body\"\n>\n  <svg-icon class=\"dropdown-dots\" [src]=\"getSvgPath('menuRoute')\"></svg-icon>\n</div>\n\n<ng-template #dropdownPopover let-data=\"data\">\n  <div\n    class=\"dropdown-main-popover-body d-flex justify-content-center align-items-center\"\n  >\n    <div class=\"details-dropdown-body\">\n      <ng-container\n        *ngFor=\"let action of data; let i = index; trackBy: identity\"\n      >\n        <ng-container\n          *ngIf=\"\n            action.title !== 'border' &&\n            action.title !== 'Add New' &&\n            action.title !== 'Request' &&\n            action.title !== 'Report' &&\n            !action.hide\n          \"\n        >\n          <div\n            class=\"action-holder d-flex justify-content-between align-content-center\"\n            @showAnimation\n            [class.leftIcon]=\"leftIcon\"\n            [class.disabledAction]=\"action.disabled\"\n            [class.disabledActionMain]=\"action.disabled\"\n            (click)=\"onAction(action, $event)\"\n          >\n            <div class=\"action-select-holder d-flex align-items-center\">\n              <div class=\"actionTitle d-flex align-items-center\">\n                {{ action.title }}\n              </div>\n              <div\n                class=\"actionIcon d-flex justify-content-center align-items-center\"\n                [class.redIcon]=\"\n                  action.title === 'Delete' || action.title === 'Close Business'\n                \"\n                [class.blueIcon]=\"action.blueIcon\"\n                [class.greenIcon]=\"action.greenIcon\"\n              >\n                <svg-icon [src]=\"action.svgUrl\"></svg-icon>\n              </div>\n            </div>\n          </div>\n          <ng-container *ngIf=\"action.hasBorder\">\n            <div\n              class=\"border-holder d-flex justify-content-center\"\n              @borderShowAnimation\n            >\n              <div class=\"action-border-line\"></div>\n            </div>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n", styles: ["@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.details-dropdown-popover{background-color:transparent}.details-dropdown-container{width:26px;height:26px;border-radius:2px}.details-dropdown-container .dropdown-dots{cursor:pointer}.details-dropdown-container .dropdown-dots svg{display:flex;justify-content:center;align-items:center;transform:rotate(0);fill:#919191;transition:transform .1s ease}.details-dropdown-container .dropdown-dots svg path{fill:#919191}.details-dropdown-container:hover{cursor:pointer;background-color:#42424220}.details-dropdown-container:hover .dropdown-dots svg path{fill:#424242}.details-dropdown-container.active-drop{background-color:#424242}.details-dropdown-container.active-drop.rightRotation .dropdown-dots{cursor:pointer}.details-dropdown-container.active-drop.rightRotation .dropdown-dots svg{transform:rotate(-90deg)}.details-dropdown-container.active-drop.rightRotation .dropdown-dots svg path{fill:#dadada}.details-dropdown-container.active-drop.leftRotation .dropdown-dots{cursor:pointer}.details-dropdown-container.active-drop.leftRotation .dropdown-dots svg{transform:rotate(90deg)}.details-dropdown-container.active-drop.leftRotation .dropdown-dots svg path{fill:#dadada}.details-dropdown-container.active-drop:hover{background-color:#424242}.details-dropdown-container.active-drop:hover svg path{fill:#ebebeb}.dropdown-main-popover-body{position:relative;top:-4px;left:4px;background-color:transparent;transition:transform .1s ease;animation:scaleItem .3s}.details-dropdown-body{padding:4px 4px .1px;background-color:#2f2f2f;border-radius:3px}.details-dropdown-body .action-holder{position:relative;height:26px;margin-bottom:4px;border-radius:2px;-webkit-user-select:none;user-select:none}.details-dropdown-body .action-holder .actionTitle{flex:1;margin-right:22px;margin-left:5px;line-height:18px;font-size:14px;color:#fff;font-family:Montserrat,sans-serif}.details-dropdown-body .action-holder .action-select-holder{position:relative;width:100%;border-radius:2px;min-height:26px}.details-dropdown-body .action-holder .actionIcon{height:18px;width:18px;margin-right:5px}.details-dropdown-body .action-holder .actionIcon svg-icon{display:flex;align-items:center;transform:rotate(0);transition:transform .1s ease-in}.details-dropdown-body .action-holder .actionIcon svg-icon svg rect{fill:transparent;height:17.1px;width:17.1px}.details-dropdown-body .action-holder .actionIcon svg-icon svg path{height:17.1px;width:17.1px;fill:#aaa}.details-dropdown-body .action-holder .actionIcon.redIcon svg-icon svg path{fill:#e57373}.details-dropdown-body .action-holder .actionIcon.blueIcon svg-icon svg path{fill:#6f9ee0}.details-dropdown-body .action-holder .actionIcon.greenIcon svg-icon svg path{fill:#6f9ee0}.details-dropdown-body .action-holder .actionIcon.arrowIcon{justify-content:right}.details-dropdown-body .action-holder .actionIcon.arrowIcon svg-icon{display:flex;justify-content:right}.details-dropdown-body .action-holder .actionIcon.arrowIcon svg-icon svg{height:14px;width:14px}.details-dropdown-body .action-holder .actionIcon.arrowIcon svg-icon svg rect{height:14px;width:14px}.details-dropdown-body .action-holder .actionIcon.arrowIcon svg-icon svg path{height:14px;width:14px}.details-dropdown-body .action-holder.leftIcon .actionTitle{margin-right:22px;margin-left:30px}.details-dropdown-body .action-holder.leftIcon .actionIcon{position:absolute;left:0;margin:0 5px}.details-dropdown-body .action-holder:hover{cursor:pointer;background-color:#1d1d1d}.details-dropdown-body .action-holder:hover.disabledAction.disabledActionMain{background-color:transparent}.details-dropdown-body .action-holder:hover.disabledAction.subTypeHolder{cursor:pointer!important}.details-dropdown-body .action-holder:hover .hoveredSubtype{background-color:#aaaaaa10!important}.details-dropdown-body .action-holder:hover .actionTitle{color:#fff}.details-dropdown-body .action-holder:hover .actionIcon svg-icon svg path{fill:#dadada}.details-dropdown-body .action-holder:hover .redIcon svg-icon svg path{fill:#ef9a9a}.details-dropdown-body .action-holder:hover .blueIcon svg-icon svg path{fill:#98b9ea}.details-dropdown-body .action-holder:hover .greenIcon svg-icon svg path{fill:#80cbba}.details-dropdown-body .border-holder .action-border-line{height:1px;width:calc(100% - 8px);margin-bottom:4px;background-color:#aaaaaa20;border-radius:1px}.details-dropdown-body .disabledAction{pointer-events:none!important;cursor:auto!important}.details-dropdown-body .disabledAction .actionTitle{color:#6c6c6c}.details-dropdown-body .disabledAction .actionIcon svg-icon svg path{fill:#aaaaaa40}.details-dropdown-body .disabledAction .redIcon svg-icon svg path{fill:#e5737340!important}.details-dropdown-body .disabledAction .blueIcon svg-icon svg path{fill:#6f9ee040!important}.details-dropdown-body .disabledAction .greenIcon svg-icon svg path{fill:#4db6a240!important}.details-dropdown-body .disabledAction:hover .actionTitle{color:#6c6c6c}.details-dropdown-body .disabledAction:hover .actionIcon svg-icon svg path{fill:#aaaaaa40}@keyframes scaleItem{0%{opacity:0}to{opacity:1}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { options: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], customClassDropDown: [{
+                type: Input
+            }], hasVericalDots: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], leftIcon: [{
+                type: Input
+            }], placement: [{
+                type: Input
+            }], dropDownActions: [{
+                type: Output
+            }], openModalAction: [{
+                type: Output
+            }] } });
+
+class CaDropdownComponent {
+    constructor() {
+        this.onClick = new EventEmitter();
+        this.isPopupShown = false;
+    }
+    ngOnChanges(changes) {
+        this.isPopupShown = changes["isPopupShown"]?.currentValue;
+    }
+    toggleMenu(event) {
+        this.isPopupShown = !this.isPopupShown;
+        this.onClick.emit(event);
+    }
+    identity(index, item) {
+        return item.text;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CaDropdownComponent, isStandalone: true, selector: "app-ca-dropdown", inputs: { icon: "icon", itemList: "itemList", isPopupShown: "isPopupShown" }, outputs: { onClick: "onClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sidemenu-container-box\">\n  <svg-icon [src]=\"icon\" (click)=\"toggleMenu($event)\"></svg-icon>\n  <ng-container *ngIf=\"isPopupShown\">\n    <div class=\"sidemenu\">\n      <ng-container *ngFor=\"let item of itemList; trackBy: identity\">\n        <div class=\"sidemenu-container\">\n          <div class=\"item-container d-flex\">\n            <svg-icon [src]=\"item.Icon\" class=\"item-icon\" />\n            <span class=\"sidemenu-items\">{{ item.text }}</span>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n</div>\n", styles: ["@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.sidemenu-container-box .sidemenu{background-color:#2e2d2d;border-radius:5px;width:180px;position:absolute;top:20px;left:46px}.sidemenu-container-box .sidemenu .sidemenu-container{padding:8px 10px}.sidemenu-container-box .sidemenu .sidemenu-container:nth-child(1),.sidemenu-container-box .sidemenu .sidemenu-container:nth-child(4),.sidemenu-container-box .sidemenu .sidemenu-container:nth-child(6){border-bottom:1px solid rgba(255,255,255,.2196078431)}.sidemenu-container-box .sidemenu .sidemenu-container .item-container{cursor:pointer}.sidemenu-container-box .sidemenu .sidemenu-container .item-container .item-icon{padding:0 6px}.sidemenu-container-box .sidemenu .sidemenu-container .item-container .sidemenu-items{color:#fff;font-family:Montserrat,sans-serif}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: AngularSvgIconModule }, { kind: "component", type: i2.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-ca-dropdown", standalone: true, imports: [CommonModule, AngularSvgIconModule], template: "<div class=\"sidemenu-container-box\">\n  <svg-icon [src]=\"icon\" (click)=\"toggleMenu($event)\"></svg-icon>\n  <ng-container *ngIf=\"isPopupShown\">\n    <div class=\"sidemenu\">\n      <ng-container *ngFor=\"let item of itemList; trackBy: identity\">\n        <div class=\"sidemenu-container\">\n          <div class=\"item-container d-flex\">\n            <svg-icon [src]=\"item.Icon\" class=\"item-icon\" />\n            <span class=\"sidemenu-items\">{{ item.text }}</span>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n</div>\n", styles: ["@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.sidemenu-container-box .sidemenu{background-color:#2e2d2d;border-radius:5px;width:180px;position:absolute;top:20px;left:46px}.sidemenu-container-box .sidemenu .sidemenu-container{padding:8px 10px}.sidemenu-container-box .sidemenu .sidemenu-container:nth-child(1),.sidemenu-container-box .sidemenu .sidemenu-container:nth-child(4),.sidemenu-container-box .sidemenu .sidemenu-container:nth-child(6){border-bottom:1px solid rgba(255,255,255,.2196078431)}.sidemenu-container-box .sidemenu .sidemenu-container .item-container{cursor:pointer}.sidemenu-container-box .sidemenu .sidemenu-container .item-container .item-icon{padding:0 6px}.sidemenu-container-box .sidemenu .sidemenu-container .item-container .sidemenu-items{color:#fff;font-family:Montserrat,sans-serif}\n"] }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], itemList: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }], isPopupShown: [{
+                type: Input
+            }] } });
+
+class CaFilterComponent {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.type = ToolbarFilterStringEnum.EMPTY_STRING_PLACEHOLDER;
+        this.subType = "pendingStatus";
+        this.isRepairFilter = false;
+        this.isDefFilterHolder = true;
+        this.hasNoLeftIcon = false;
+        this.hasLeftSideIcon = false;
+        this.hasLargeLeftIcon = false;
+        this.isMoneyFilter = true;
+        this.isFuelType = false;
+        this.isLoadType = true;
+        this.filterTitle = ToolbarFilterStringEnum.EMPTY_STRING_PLACEHOLDER;
+        this.setFilter = new EventEmitter();
+        this.clearAll = new EventEmitter();
+        this.destroy$ = new Subject();
+        this.isFilterActive = false;
+        this.selectedUser = [];
+        this.isAscendingSortOrder = true;
+        this.usaSelectedStates = [];
+        this.canadaSelectedStates = [];
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    sortItems() {
+        if (this.caStatusFilter) {
+            this.caStatusFilter.sortItems();
+            this.isAscendingSortOrder = this.caStatusFilter.isAscendingSortOrder;
+        }
+    }
+    showSearch(mod) {
+        const filterSearchHead = this.renderer.selectRootElement(".search-input-header");
+        const filterTextHead = this.renderer.selectRootElement(".filter-text-part");
+        if (mod) {
+            this.isSearchExpanded = false;
+            filterSearchHead?.classList.remove("activeSearch");
+            filterSearchHead?.classList.add("inactiveSearch");
+            filterTextHead?.classList.add("activeHeader");
+            filterTextHead?.classList.remove("inactiveHeader");
+        }
+        else {
+            filterSearchHead?.classList.add("activeSearch");
+            filterSearchHead?.classList.remove("inactiveSearch");
+            filterTextHead?.classList.remove("activeHeader");
+            filterTextHead?.classList.add("inactiveHeader");
+            this.isSearchExpanded = true;
+        }
+    }
+    setFilterValue(event) {
+        let filterResult;
+        if (this.caMoneyFilter && this.type === "moneyFilter") {
+            filterResult = this.caMoneyFilter.setFilterValue(event);
+        }
+        if (this.caStatusFilter && this.type === "statusFilter") {
+            filterResult = this.caStatusFilter.setFilterValue(event);
+        }
+        if (this.caTimeFilter && this.type === "timeFilter") {
+            filterResult = this.caTimeFilter.setFilterValue(event);
+        }
+        this.setFilterEmit(filterResult);
+    }
+    setFilterEmit(data) {
+        if (this.setFilter) {
+            this.setFilter.emit(data);
+        }
+    }
+    clearAllValues(event) {
+        let filterResult;
+        if (this.caMoneyFilter && this.type === "moneyFilter") {
+            filterResult = this.caMoneyFilter.clearAll(event);
+        }
+        if (this.caStatusFilter && this.type === "statusFilter") {
+            filterResult = this.caStatusFilter.clearAll(event);
+        }
+        if (this.caTimeFilter && this.type === "timeFilter") {
+            filterResult = this.caTimeFilter.clearAll(event);
+        }
+        this.clearAllValuesEmit(filterResult);
+    }
+    clearAllValuesEmit(data) {
+        if (this.setFilter) {
+            this.clearAll.emit(data);
+        }
+    }
+    getSvgPath(propertyName) {
+        return CaFiltersSvgRoutes[propertyName];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaFilterComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CaFilterComponent, isStandalone: true, selector: "app-ca-filter", inputs: { type: "type", subType: "subType", isRepairFilter: "isRepairFilter", isDefFilterHolder: "isDefFilterHolder", hasNoLeftIcon: "hasNoLeftIcon", hasLeftSideIcon: "hasLeftSideIcon", hasLargeLeftIcon: "hasLargeLeftIcon", isMoneyFilter: "isMoneyFilter", isFuelType: "isFuelType", isLoadType: "isLoadType", filterTitle: "filterTitle" }, outputs: { setFilter: "setFilter", clearAll: "clearAll" }, viewQueries: [{ propertyName: "caStatusFilter", first: true, predicate: CaStatusFilterComponent, descendants: true }, { propertyName: "caMoneyFilter", first: true, predicate: CaMoneyFilterComponent, descendants: true }, { propertyName: "caTimeFilter", first: true, predicate: CaTimeFilterComponent, descendants: true }], ngImport: i0, template: "<div class=\"main-popover-body\">\n  <ng-container *ngIf=\"isDefFilterHolder\">\n    <div\n      [@showAnimation]=\"!!isFilterActive\"\n      class=\"filter-holder d-flex justify-content-start align-items-start\"\n      [class.state-filter]=\"type === 'stateFilter'\"\n      [class.department-filter]=\"hasNoLeftIcon\"\n      [class.status-filter]=\"type === 'statusFilter'\"\n      [class.pm-filter]=\"hasLeftSideIcon\"\n      [class.truck-icon-holder]=\"hasLargeLeftIcon\"\n      [class.money-filter]=\"type === 'moneyFilter'\"\n    >\n      <div\n        class=\"filter-header filter-text-part d-flex justify-content-between align-items-center\"\n      >\n        <div\n          class=\"user-title-text counter-padd-title d-flex align-items-center fw-bold\"\n        >\n          {{ filterTitle | uppercase }}\n\n          <ng-container *ngIf=\"type === 'userFilter' && selectedUser?.length\">\n            <div\n              class=\"user-filter-box d-flex flex-column justify-content-center align-items-center fw-bold ms-1\"\n            >\n              {{ selectedUser.length }}\n            </div>\n          </ng-container>\n        </div>\n\n        <ng-container\n          *ngIf=\"\n            type !== 'stateFilter' &&\n            type !== 'statusFilter' &&\n            type !== 'userFilter' &&\n            type !== 'moneyFilter' &&\n            type !== 'timeFilter'\n          \"\n        >\n          <div\n            class=\"user-filter-box d-flex flex-column justify-content-center align-items-center fw-bold ms-1\"\n          >\n            {{ selectedUser.length }}\n          </div>\n        </ng-container>\n        <ng-container\n          *ngIf=\"\n            type === 'categoryRepairFilter' ||\n              type === 'pmFilter' ||\n              type === 'truckFilter' ||\n              type === 'trailerFilter' ||\n              type === 'statusFilter' ||\n              type === 'userFilter';\n            else truckFilter\n          \"\n        >\n          <div\n            (click)=\"sortItems()\"\n            class=\"user-title-text sort-text ta-font-medium d-flex align-items-center fw-bold justify-content-end\"\n          >\n            {{\n              type === \"statusFilter\" || type === \"userFilter\"\n                ? \"Count\"\n                : \"Sort Text\"\n            }}\n            <svg-icon\n              class=\"sort-arrow ms-1\"\n              [class.rotate]=\"!isAscendingSortOrder\"\n              [src]=\"getSvgPath('sortArrowSvgRoute')\"\n              [svgStyle]=\"{\n                'width.px': '18',\n                'height.px': '18',\n              }\"\n            ></svg-icon>\n          </div>\n        </ng-container>\n        <ng-template #truckFilter>\n          <ng-container\n            *ngIf=\"\n              (type === 'truckFilter' || type === 'trailerFilter') &&\n                isRepairFilter;\n              else stateFilter\n            \"\n          >\n            <div\n              (click)=\"sortItems()\"\n              class=\"user-title-text sort-text d-flex align-items-center fw-bold justify-content-end\"\n            >\n              Count\n              <svg-icon [src]=\"getSvgPath('sortArrowSvgRoute')\"></svg-icon>\n            </div>\n          </ng-container>\n        </ng-template>\n        <ng-template #stateFilter>\n          <ng-container *ngIf=\"type === 'stateFilter'; else searchState\">\n            <div\n              class=\"user-filter-box d-flex flex-column justify-content-center align-items-center fw-bold ms-1\"\n            >\n              {{ canadaSelectedStates.length + usaSelectedStates.length }}\n            </div>\n          </ng-container>\n        </ng-template>\n        <ng-template #searchState>\n          <ng-container *ngIf=\"!searchState\">\n            <div\n              class=\"search-icon-holder d-flex justify-content-center align-items-center\"\n              (click)=\"showSearch()\"\n            >\n              <svg-icon [src]=\"getSvgPath('searchIconRoute')\"></svg-icon>\n            </div>\n          </ng-container>\n        </ng-template>\n      </div>\n      <div class=\"filter-body-holder\">\n        <app-ca-money-filter\n          *ngIf=\"type === 'moneyFilter'\"\n          (setFilter)=\"setFilterValue($event)\"\n          [moneyFilter]=\"isMoneyFilter\"\n          [fuelType]=\"isFuelType\"\n          [loadType]=\"isLoadType\"\n          [subType]=\"subType\"\n          [isFilterActive]=\"isFilterActive\"\n        />\n        <app-ca-status-filter\n          *ngIf=\"type === 'statusFilter'\"\n          (setFilter)=\"setFilterValue($event)\"\n          [isFilterActive]=\"isFilterActive\"\n        />\n        <app-ca-time-filter\n          *ngIf=\"type === 'timeFilter'\"\n          (setFilter)=\"setFilterValue($event)\"\n          [isFilterActive]=\"isFilterActive\"\n        />\n      </div>\n      <div\n        class=\"buttons-holder d-flex justify-content-between align-items-center\"\n      >\n        <div\n          (click)=\"clearAllValues($event)\"\n          class=\"button-clear d-flex justify-content-center align-items-center fw-bold\"\n          [class.active]=\"\n            type === 'moneyFilter'\n              ? caMoneyFilter?.moneyFilterStatus\n              : type === 'statusFilter'\n                ? caStatusFilter?.selectedUser?.length\n                : type === 'timeFilter'\n                  ? caTimeFilter?.selectedTimeValue !==\n                      caTimeFilter?.filterActiveTime ||\n                    caTimeFilter?.selectedTimeValue !== ''\n                  : ''\n          \"\n        >\n          Clear All\n        </div>\n        <div\n          (click)=\"setFilterValue($event)\"\n          class=\"button-set d-flex justify-content-center align-items-center fw-bold\"\n          [class.active]=\"\n            type === 'moneyFilter'\n              ? caMoneyFilter?.subType === 'all'\n                ? caMoneyFilter?.moneyFilterStatus &&\n                  caMoneyFilter?.isButtonAvailable\n                : caMoneyFilter?.moneyFilterStatus &&\n                  caMoneyFilter?.isButtonAvailable &&\n                  !caMoneyFilter?.singleFormError\n              : type === 'statusFilter'\n                ? caStatusFilter?.selectedUser?.length\n                : type === 'timeFilter'\n                  ? caTimeFilter?.selectedTimeValue !==\n                    caTimeFilter?.filterActiveTime\n                  : ''\n          \"\n        >\n          Set\n        </div>\n      </div>\n    </div>\n  </ng-container>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap\";@import\"/node_modules/bootstrap/dist/css/bootstrap.css\";.ca-font-thin{font-weight:100!important}.ca-font-extra-light{font-weight:200!important}.ca-font-light{font-weight:300!important}.ca-font-regular{font-weight:400!important}.ca-font-medium{font-weight:500!important}.ca-font-semi-bold{font-weight:600!important}.ca-font-bold{font-weight:700!important}.ca-font-extra-bold{font-weight:800!important}.ca-font-black{font-weight:900!important}@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.table-progress-popover{background-color:unset!important;margin-left:-10px}.table-progress-popover .progress-dropdown{margin-top:-6px;width:260px;height:200px;background:#2f2f2f;border-radius:3px;padding:8px;box-shadow:0 0 4px #00000026;overflow:hidden;animation:progressAnimation .25s ease-in-out}.table-progress-popover .progress-dropdown .progress-header .progress-title{font-size:18px;font-weight:600;color:#dadada}.table-progress-popover .progress-dropdown .progress-header .progress-title span{font-weight:400}.table-progress-popover .progress-dropdown .progress-header .progress-total{font-size:14px;line-height:17px;color:#dadada}.table-progress-popover .progress-dropdown .table-progress-bar-container{width:100%;height:8px;margin-top:6px;border-radius:2px;overflow:hidden}.table-progress-popover .progress-dropdown .table-progress-bar-container .table-progress-bar{height:100%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-dual-info-container .progress-info-container{width:50%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container{margin-top:10px}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-title{margin-bottom:2px;font-size:11px;font-weight:700;line-height:14px;color:#ffffffb2}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-text{font-size:14px;line-height:18px;color:#dadada}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@keyframes progressAnimation{0%{height:0px}to{height:220px}}ngb-popover-window{padding:unset!important;border:unset!important}ngb-popover-window .popover-arrow{display:none!important}ngb-popover-window .popover-body{padding:unset!important}*{margin:0;font-family:Roboto,Helvetica Neue,sans-serif}html{scroll-behavior:auto!important}.gm-style-iw-chr,.gm-style-iw-tc{display:none}.gm-style .gm-style-iw-c{border-radius:0}.gm-style-iw{overflow-y:auto!important;overflow-x:hidden!important}.gm-style-iw>div{overflow:visible!important}.infoWindow{overflow:hidden!important}.gm-style-iw-d,.gm-style-iw.gm-style-iw-c{max-height:350px!important}.filter-holder{position:relative;left:-8px;width:260px;padding:4px;border-radius:3px;background-color:#2f2f2f;box-shadow:0 0 4px #00000026;flex-direction:column;overflow:hidden}.filter-holder .filter-header{position:relative;width:100%;padding-top:2px;box-sizing:border-box;-webkit-user-select:none;user-select:none}.filter-holder .filter-header .user-filter-box{width:18px;height:18px;padding:4px;border-radius:60px;background-color:#424242;font-size:11px;color:#dadada;line-height:14px}.filter-holder .filter-header .user-title-text{line-height:14px;font-size:11px;color:#dadada;padding:0 4px;box-sizing:border-box}.filter-holder .filter-header .user-title-text.sort-text{border-radius:1px;transition:background .2s ease-in-out}.filter-holder .filter-header .user-title-text.sort-text .sort-arrow{transform:rotate(0);transition:transform .2s}.filter-holder .filter-header .user-title-text.sort-text .sort-arrow.rotate{transform:rotate(180deg)}.filter-holder .filter-header .user-title-text.sort-text:hover{cursor:pointer;background:#1d1d1d}.filter-holder .filter-header .user-title-text.counter-padd-title{padding-left:4px;padding-right:6px}.filter-holder .filter-header .search-icon-holder{position:absolute;width:18px;height:18px;width:252px;top:3px;right:4px;cursor:pointer}.filter-holder .filter-header .search-icon-holder svg-icon svg{width:17.1px;height:17.1px}.filter-holder .filter-header .search-icon-holder svg-icon svg path{fill:#aaa}.filter-holder .filter-header .search-icon-holder:hover svg-icon svg path{fill:#6c6c6c}.filter-holder .filter-body-holder{width:100%}.filter-holder .buttons-holder{width:100%;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}.filter-holder .buttons-holder .button-clear{width:120px;height:18px;border-radius:1px;background-color:#424242;font-size:11px;color:#aaa;line-height:14px;text-transform:uppercase}.filter-holder .buttons-holder .button-clear.active{cursor:pointer;color:#dadada}.filter-holder .buttons-holder .button-clear.active:hover{cursor:pointer;background-color:#6c6c6c;color:#dadada}.filter-holder .buttons-holder .button-set{width:120px;height:18px;border-radius:1px;background-color:#424242;font-size:11px;color:#aaa;line-height:14px;text-transform:uppercase}.filter-holder .buttons-holder .button-set.active{background-color:#6692f1;color:#dadada;cursor:pointer}.filter-holder .buttons-holder .button-set.active:hover{cursor:pointer;background-color:#0b49d1;color:#dadada}.money-filter{padding:10px 6px 6px;width:300px}.money-filter .button-clear,.money-filter .button-set{width:140px!important}\n"], dependencies: [{ kind: "ngmodule", type: 
+                // modules
+                CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: HttpClientModule }, { kind: "ngmodule", type: AngularSvgIconModule }, { kind: "component", type: i2.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }, { kind: "component", type: 
+                // components
+                CaMoneyFilterComponent, selector: "app-ca-money-filter", inputs: ["type", "subType", "moneyFilter", "fuelType", "loadType", "isRepairFilter", "isFilterActive"] }, { kind: "component", type: CaStatusFilterComponent, selector: "app-ca-status-filter", inputs: ["type", "isLegendView", "isFilterActive", "toDoSubType"] }, { kind: "component", type: CaTimeFilterComponent, selector: "app-ca-time-filter", inputs: ["type", "isFilterActive"] }], animations: [showAnimation$1("showAnimation"), closeForm("closeForm")] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-ca-filter", standalone: true, imports: [
+                        // modules
+                        CommonModule,
+                        HttpClientModule,
+                        AngularSvgIconModule,
+                        // components
+                        CaMoneyFilterComponent,
+                        CaStatusFilterComponent,
+                        CaTimeFilterComponent,
+                    ], animations: [showAnimation$1("showAnimation"), closeForm("closeForm")], template: "<div class=\"main-popover-body\">\n  <ng-container *ngIf=\"isDefFilterHolder\">\n    <div\n      [@showAnimation]=\"!!isFilterActive\"\n      class=\"filter-holder d-flex justify-content-start align-items-start\"\n      [class.state-filter]=\"type === 'stateFilter'\"\n      [class.department-filter]=\"hasNoLeftIcon\"\n      [class.status-filter]=\"type === 'statusFilter'\"\n      [class.pm-filter]=\"hasLeftSideIcon\"\n      [class.truck-icon-holder]=\"hasLargeLeftIcon\"\n      [class.money-filter]=\"type === 'moneyFilter'\"\n    >\n      <div\n        class=\"filter-header filter-text-part d-flex justify-content-between align-items-center\"\n      >\n        <div\n          class=\"user-title-text counter-padd-title d-flex align-items-center fw-bold\"\n        >\n          {{ filterTitle | uppercase }}\n\n          <ng-container *ngIf=\"type === 'userFilter' && selectedUser?.length\">\n            <div\n              class=\"user-filter-box d-flex flex-column justify-content-center align-items-center fw-bold ms-1\"\n            >\n              {{ selectedUser.length }}\n            </div>\n          </ng-container>\n        </div>\n\n        <ng-container\n          *ngIf=\"\n            type !== 'stateFilter' &&\n            type !== 'statusFilter' &&\n            type !== 'userFilter' &&\n            type !== 'moneyFilter' &&\n            type !== 'timeFilter'\n          \"\n        >\n          <div\n            class=\"user-filter-box d-flex flex-column justify-content-center align-items-center fw-bold ms-1\"\n          >\n            {{ selectedUser.length }}\n          </div>\n        </ng-container>\n        <ng-container\n          *ngIf=\"\n            type === 'categoryRepairFilter' ||\n              type === 'pmFilter' ||\n              type === 'truckFilter' ||\n              type === 'trailerFilter' ||\n              type === 'statusFilter' ||\n              type === 'userFilter';\n            else truckFilter\n          \"\n        >\n          <div\n            (click)=\"sortItems()\"\n            class=\"user-title-text sort-text ta-font-medium d-flex align-items-center fw-bold justify-content-end\"\n          >\n            {{\n              type === \"statusFilter\" || type === \"userFilter\"\n                ? \"Count\"\n                : \"Sort Text\"\n            }}\n            <svg-icon\n              class=\"sort-arrow ms-1\"\n              [class.rotate]=\"!isAscendingSortOrder\"\n              [src]=\"getSvgPath('sortArrowSvgRoute')\"\n              [svgStyle]=\"{\n                'width.px': '18',\n                'height.px': '18',\n              }\"\n            ></svg-icon>\n          </div>\n        </ng-container>\n        <ng-template #truckFilter>\n          <ng-container\n            *ngIf=\"\n              (type === 'truckFilter' || type === 'trailerFilter') &&\n                isRepairFilter;\n              else stateFilter\n            \"\n          >\n            <div\n              (click)=\"sortItems()\"\n              class=\"user-title-text sort-text d-flex align-items-center fw-bold justify-content-end\"\n            >\n              Count\n              <svg-icon [src]=\"getSvgPath('sortArrowSvgRoute')\"></svg-icon>\n            </div>\n          </ng-container>\n        </ng-template>\n        <ng-template #stateFilter>\n          <ng-container *ngIf=\"type === 'stateFilter'; else searchState\">\n            <div\n              class=\"user-filter-box d-flex flex-column justify-content-center align-items-center fw-bold ms-1\"\n            >\n              {{ canadaSelectedStates.length + usaSelectedStates.length }}\n            </div>\n          </ng-container>\n        </ng-template>\n        <ng-template #searchState>\n          <ng-container *ngIf=\"!searchState\">\n            <div\n              class=\"search-icon-holder d-flex justify-content-center align-items-center\"\n              (click)=\"showSearch()\"\n            >\n              <svg-icon [src]=\"getSvgPath('searchIconRoute')\"></svg-icon>\n            </div>\n          </ng-container>\n        </ng-template>\n      </div>\n      <div class=\"filter-body-holder\">\n        <app-ca-money-filter\n          *ngIf=\"type === 'moneyFilter'\"\n          (setFilter)=\"setFilterValue($event)\"\n          [moneyFilter]=\"isMoneyFilter\"\n          [fuelType]=\"isFuelType\"\n          [loadType]=\"isLoadType\"\n          [subType]=\"subType\"\n          [isFilterActive]=\"isFilterActive\"\n        />\n        <app-ca-status-filter\n          *ngIf=\"type === 'statusFilter'\"\n          (setFilter)=\"setFilterValue($event)\"\n          [isFilterActive]=\"isFilterActive\"\n        />\n        <app-ca-time-filter\n          *ngIf=\"type === 'timeFilter'\"\n          (setFilter)=\"setFilterValue($event)\"\n          [isFilterActive]=\"isFilterActive\"\n        />\n      </div>\n      <div\n        class=\"buttons-holder d-flex justify-content-between align-items-center\"\n      >\n        <div\n          (click)=\"clearAllValues($event)\"\n          class=\"button-clear d-flex justify-content-center align-items-center fw-bold\"\n          [class.active]=\"\n            type === 'moneyFilter'\n              ? caMoneyFilter?.moneyFilterStatus\n              : type === 'statusFilter'\n                ? caStatusFilter?.selectedUser?.length\n                : type === 'timeFilter'\n                  ? caTimeFilter?.selectedTimeValue !==\n                      caTimeFilter?.filterActiveTime ||\n                    caTimeFilter?.selectedTimeValue !== ''\n                  : ''\n          \"\n        >\n          Clear All\n        </div>\n        <div\n          (click)=\"setFilterValue($event)\"\n          class=\"button-set d-flex justify-content-center align-items-center fw-bold\"\n          [class.active]=\"\n            type === 'moneyFilter'\n              ? caMoneyFilter?.subType === 'all'\n                ? caMoneyFilter?.moneyFilterStatus &&\n                  caMoneyFilter?.isButtonAvailable\n                : caMoneyFilter?.moneyFilterStatus &&\n                  caMoneyFilter?.isButtonAvailable &&\n                  !caMoneyFilter?.singleFormError\n              : type === 'statusFilter'\n                ? caStatusFilter?.selectedUser?.length\n                : type === 'timeFilter'\n                  ? caTimeFilter?.selectedTimeValue !==\n                    caTimeFilter?.filterActiveTime\n                  : ''\n          \"\n        >\n          Set\n        </div>\n      </div>\n    </div>\n  </ng-container>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap\";@import\"/node_modules/bootstrap/dist/css/bootstrap.css\";.ca-font-thin{font-weight:100!important}.ca-font-extra-light{font-weight:200!important}.ca-font-light{font-weight:300!important}.ca-font-regular{font-weight:400!important}.ca-font-medium{font-weight:500!important}.ca-font-semi-bold{font-weight:600!important}.ca-font-bold{font-weight:700!important}.ca-font-extra-bold{font-weight:800!important}.ca-font-black{font-weight:900!important}@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.table-progress-popover{background-color:unset!important;margin-left:-10px}.table-progress-popover .progress-dropdown{margin-top:-6px;width:260px;height:200px;background:#2f2f2f;border-radius:3px;padding:8px;box-shadow:0 0 4px #00000026;overflow:hidden;animation:progressAnimation .25s ease-in-out}.table-progress-popover .progress-dropdown .progress-header .progress-title{font-size:18px;font-weight:600;color:#dadada}.table-progress-popover .progress-dropdown .progress-header .progress-title span{font-weight:400}.table-progress-popover .progress-dropdown .progress-header .progress-total{font-size:14px;line-height:17px;color:#dadada}.table-progress-popover .progress-dropdown .table-progress-bar-container{width:100%;height:8px;margin-top:6px;border-radius:2px;overflow:hidden}.table-progress-popover .progress-dropdown .table-progress-bar-container .table-progress-bar{height:100%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-dual-info-container .progress-info-container{width:50%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container{margin-top:10px}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-title{margin-bottom:2px;font-size:11px;font-weight:700;line-height:14px;color:#ffffffb2}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-text{font-size:14px;line-height:18px;color:#dadada}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@keyframes progressAnimation{0%{height:0px}to{height:220px}}ngb-popover-window{padding:unset!important;border:unset!important}ngb-popover-window .popover-arrow{display:none!important}ngb-popover-window .popover-body{padding:unset!important}*{margin:0;font-family:Roboto,Helvetica Neue,sans-serif}html{scroll-behavior:auto!important}.gm-style-iw-chr,.gm-style-iw-tc{display:none}.gm-style .gm-style-iw-c{border-radius:0}.gm-style-iw{overflow-y:auto!important;overflow-x:hidden!important}.gm-style-iw>div{overflow:visible!important}.infoWindow{overflow:hidden!important}.gm-style-iw-d,.gm-style-iw.gm-style-iw-c{max-height:350px!important}.filter-holder{position:relative;left:-8px;width:260px;padding:4px;border-radius:3px;background-color:#2f2f2f;box-shadow:0 0 4px #00000026;flex-direction:column;overflow:hidden}.filter-holder .filter-header{position:relative;width:100%;padding-top:2px;box-sizing:border-box;-webkit-user-select:none;user-select:none}.filter-holder .filter-header .user-filter-box{width:18px;height:18px;padding:4px;border-radius:60px;background-color:#424242;font-size:11px;color:#dadada;line-height:14px}.filter-holder .filter-header .user-title-text{line-height:14px;font-size:11px;color:#dadada;padding:0 4px;box-sizing:border-box}.filter-holder .filter-header .user-title-text.sort-text{border-radius:1px;transition:background .2s ease-in-out}.filter-holder .filter-header .user-title-text.sort-text .sort-arrow{transform:rotate(0);transition:transform .2s}.filter-holder .filter-header .user-title-text.sort-text .sort-arrow.rotate{transform:rotate(180deg)}.filter-holder .filter-header .user-title-text.sort-text:hover{cursor:pointer;background:#1d1d1d}.filter-holder .filter-header .user-title-text.counter-padd-title{padding-left:4px;padding-right:6px}.filter-holder .filter-header .search-icon-holder{position:absolute;width:18px;height:18px;width:252px;top:3px;right:4px;cursor:pointer}.filter-holder .filter-header .search-icon-holder svg-icon svg{width:17.1px;height:17.1px}.filter-holder .filter-header .search-icon-holder svg-icon svg path{fill:#aaa}.filter-holder .filter-header .search-icon-holder:hover svg-icon svg path{fill:#6c6c6c}.filter-holder .filter-body-holder{width:100%}.filter-holder .buttons-holder{width:100%;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}.filter-holder .buttons-holder .button-clear{width:120px;height:18px;border-radius:1px;background-color:#424242;font-size:11px;color:#aaa;line-height:14px;text-transform:uppercase}.filter-holder .buttons-holder .button-clear.active{cursor:pointer;color:#dadada}.filter-holder .buttons-holder .button-clear.active:hover{cursor:pointer;background-color:#6c6c6c;color:#dadada}.filter-holder .buttons-holder .button-set{width:120px;height:18px;border-radius:1px;background-color:#424242;font-size:11px;color:#aaa;line-height:14px;text-transform:uppercase}.filter-holder .buttons-holder .button-set.active{background-color:#6692f1;color:#dadada;cursor:pointer}.filter-holder .buttons-holder .button-set.active:hover{cursor:pointer;background-color:#0b49d1;color:#dadada}.money-filter{padding:10px 6px 6px;width:300px}.money-filter .button-clear,.money-filter .button-set{width:140px!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { type: [{
+                type: Input
+            }], subType: [{
+                type: Input
+            }], isRepairFilter: [{
+                type: Input
+            }], isDefFilterHolder: [{
+                type: Input
+            }], hasNoLeftIcon: [{
+                type: Input
+            }], hasLeftSideIcon: [{
+                type: Input
+            }], hasLargeLeftIcon: [{
+                type: Input
+            }], isMoneyFilter: [{
+                type: Input
+            }], isFuelType: [{
+                type: Input
+            }], isLoadType: [{
+                type: Input
+            }], filterTitle: [{
+                type: Input
+            }], setFilter: [{
+                type: Output
+            }], clearAll: [{
+                type: Output
+            }], caStatusFilter: [{
+                type: ViewChild,
+                args: [CaStatusFilterComponent]
+            }], caMoneyFilter: [{
+                type: ViewChild,
+                args: [CaMoneyFilterComponent]
+            }], caTimeFilter: [{
+                type: ViewChild,
+                args: [CaTimeFilterComponent]
+            }] } });
+
+class CaInputComponent {
+    constructor(superControl, cdRef, inputStateService) {
+        this.superControl = superControl;
+        this.cdRef = cdRef;
+        this.inputStateService = inputStateService;
+        this.blurInput = new EventEmitter();
+        this.isFocusInputEvent = new EventEmitter();
+        this.changeInput = new EventEmitter();
+        this.isFocusInput = false;
+        this.isTouchedInput = false;
+        // Input Commands
+        this.isVisibleCommands = false;
+        // Password
+        this.isTogglePassword = false;
+        this.isCapsLockOn = false;
+        // Destroy
+        this.destroy$ = new Subject();
+        this.superControl.valueAccessor = this;
+    }
+    get getSuperControl() {
+        return this.superControl.control;
+    }
+    ngOnInit() {
+        this.initChangesListener();
+        this.initStateService();
+    }
+    ngOnChanges(changes) {
+        this.setStateInputs(changes);
+    }
+    initStateService() {
+        this.inputStateService.setSuperControl(this.superControl);
+        this.inputStateService.setInputElementRef(this.input);
+        combineLatest([
+            this.inputStateService.isFocusInput$,
+            this.inputStateService.isTouchedInput$,
+        ])
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(([focus, touched]) => {
+            this.isFocusInput = focus;
+            this.isTouchedInput = touched;
+        });
+    }
+    initChangesListener() {
+        const combinedChanges = combineLatest([
+            this.getSuperControl?.valueChanges,
+            this.getSuperControl?.statusChanges,
+        ]);
+        combinedChanges.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            this.cdRef.detectChanges();
+        });
+    }
+    setStateInputs(changes) {
+        this.inputStateService.setInputConfig(changes["inputConfig"].currentValue);
+    }
+    writeValue(obj) {
+        this.changeInput.emit(obj);
+        this.input.nativeElement.value = obj;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    onChange(_) { }
+    registerOnTouched() { }
+    onBlur(event) {
+        this.inputStateService.setisFocusInput(false);
+        this.blurInput.emit(true);
+        this.inputStateService.setisTouchedInput(true);
+    }
+    onFocus(event) {
+        this.isFocusInputEvent.emit(true);
+        this.inputStateService.setisFocusInput(true);
+    }
+    onKeydown(event) {
+        this.isCapsLockOn = event?.getModifierState?.("CapsLock");
+    }
+    transformText(event) {
+        this.inputStateService.transformText(event);
+    }
+    clearInput(event) {
+        this.inputStateService.clearInput(event);
+    }
+    onTogglePassword(event) {
+        event.preventDefault();
+        this.isTogglePassword = !this.isTogglePassword;
+    }
+    getSvgPath(propertyName) {
+        return InputSvgRoutes[propertyName];
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaInputComponent, deps: [{ token: i1$2.NgControl, self: true }, { token: i0.ChangeDetectorRef }, { token: i2$1.InputStateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CaInputComponent, isStandalone: true, selector: "app-ca-input", inputs: { inputConfig: "inputConfig", incorrectValue: "incorrectValue", selectedDropdownLabelColor: "selectedDropdownLabelColor" }, outputs: { blurInput: "blurInput", isFocusInputEvent: "isFocusInput", changeInput: "change" }, providers: [InputStateService], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"input-custom-group {{ inputConfig.customClass }}\"\n  [ngClass]=\"\n    getSuperControl\n      | inputContainerClass\n        : isFocusInput\n        : isTouchedInput\n        : inputConfig\n        : getSuperControl?.value\n  \"\n>\n  <input\n    #input\n    [type]=\"inputConfig.type | inputType: isTogglePassword\"\n    [id]=\"inputConfig.id ? inputConfig.id : inputConfig.name\"\n    [name]=\"inputConfig.name\"\n    [disabled]=\"inputConfig.isDisabled\"\n    [autocomplete]=\"inputConfig.autocomplete ? inputConfig.autocomplete : 'off'\"\n    [placeholder]=\"\n      (inputConfig.placeholderInsteadOfLabel &&\n      inputConfig.placeholder &&\n      isFocusInput\n        ? inputConfig.placeholder\n        : '') ||\n      (inputConfig.placeholder && isFocusInput ? inputConfig.placeholder : '')\n    \"\n    [minLength]=\"inputConfig.minLength ? inputConfig.minLength : 0\"\n    [maxLength]=\"inputConfig.maxLength ? inputConfig.maxLength : 999\"\n    [min]=\"inputConfig.min ? inputConfig.min : 0\"\n    [max]=\"inputConfig.max\"\n    [step]=\"inputConfig.step ? inputConfig.step : null\"\n    [readOnly]=\"inputConfig.readOnly\"\n    inputformat=\"dd-mm-yy\"\n    class=\"input-control\n  {{ inputConfig.textTransform }}\n  {{ inputConfig.textAlign }}\n  {{ inputConfig.customClass }}\n  \"\n    [ngClass]=\"\n      getSuperControl\n        | inputClass\n          : isFocusInput\n          : isTouchedInput\n          : inputConfig\n          : input\n          : isVisibleCommands\n          : getSuperControl?.value\n    \"\n    (blur)=\"onBlur($event)\"\n    (focus)=\"onFocus($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (input)=\"onChange($event.target); transformText($event)\"\n    [(ngModel)]=\"input.value\"\n  />\n\n  <!-- Input Label -->\n  <ng-container *ngIf=\"!inputConfig.multiSelectDropdownActive\">\n    <label\n      [for]=\"inputConfig.name\"\n      class=\"input-label {{ inputConfig.customClass }} {{\n        inputConfig.multipleLabel?.customClass\n      }}\"\n      [ngClass]=\"\n        getSuperControl?.value | labelClass: isFocusInput : inputConfig\n      \"\n    >\n      <ng-container *ngIf=\"inputConfig.label\">\n        <span>{{ inputConfig.label }} </span>\n      </ng-container>\n    </label>\n  </ng-container>\n\n  <!-- Input Clear -->\n  <ng-container *ngIf=\"inputConfig | showClear\">\n    <app-ca-input-clear\n      [inputConfig]=\"inputConfig\"\n      [getSuperControl]=\"getSuperControl\"\n      [isFocusInput]=\"isFocusInput\"\n      [incorrectValue]=\"incorrectValue\"\n      [selectedDropdownLabelColor]=\"selectedDropdownLabelColor\"\n      (clearInputClick)=\"clearInput($event)\"\n    >\n    </app-ca-input-clear>\n  </ng-container>\n\n  <!-- Input Invalid Danger Mark -->\n  <ng-container\n    *ngIf=\"\n      inputConfig\n        | showInvalidDangerMark\n          : getSuperControl\n          : isFocusInput\n          : isTouchedInput\n          : getSuperControl?.value\n    \"\n  >\n    <svg-icon\n      class=\"input-invalid-danger-mark  {{ inputConfig.customClass }}\"\n      [src]=\"getSvgPath('dangerSvg')\"\n    >\n    </svg-icon>\n  </ng-container>\n\n  <!-- Input Valid Check -->\n  <ng-container\n    *ngIf=\"\n      getSuperControl\n        | showValidCheck: isFocusInput : inputConfig : getSuperControl?.value\n    \"\n  >\n    <svg-icon\n      class=\"input-required-check {{ inputConfig.customClass }}\"\n      [src]=\"getSvgPath('confirmSvg')\"\n    ></svg-icon>\n  </ng-container>\n\n  <!-- Input Password Caps Lock And Eye -->\n  <ng-container *ngIf=\"inputConfig.type === 'password'\">\n    <app-ca-input-password\n      [inputConfig]=\"inputConfig\"\n      [getSuperControl]=\"getSuperControl\"\n      [isFocusInput]=\"isFocusInput\"\n      [isTouchedInput]=\"isTouchedInput\"\n      [isCapsLockOn]=\"isCapsLockOn\"\n      [isTogglePassword]=\"isTogglePassword\"\n      (onTogglePasswordClick)=\"onTogglePassword($event)\"\n    >\n    </app-ca-input-password>\n  </ng-container>\n\n  <!-- Input Placeholder Icon -->\n  <ng-container *ngIf=\"inputConfig.placeholderIcon\">\n    <app-ca-input-placeholder-icon\n      [inputConfig]=\"inputConfig\"\n      [getSuperControl]=\"getSuperControl\"\n      [isFocusInput]=\"isFocusInput\"\n      [isTouchedInput]=\"isTouchedInput\"\n      [selectedDropdownLabelColor]=\"selectedDropdownLabelColor\"\n    >\n    </app-ca-input-placeholder-icon>\n  </ng-container>\n\n  <!-- Input Error Message -->\n  <ng-container\n    *ngIf=\"\n      !inputConfig.hideErrorMessage &&\n      !(!getSuperControl?.value && isFocusInput) &&\n      (isTouchedInput || getSuperControl?.touched || getSuperControl?.value) &&\n      getSuperControl?.invalid &&\n      !inputConfig.isInvalidSearchInDropdown &&\n      !inputConfig.isDisabled\n    \"\n  >\n    <span class=\"input-error {{ inputConfig.customClass }}\">\n      {{ getSuperControl?.errors | inputError: inputConfig.name }}\n    </span>\n  </ng-container>\n\n  <ng-container *ngIf=\"inputConfig.fixedPlacholder && input.value\">\n    <span class=\"input-fixed-placehoder-label\">\n      {{ inputConfig.fixedPlacholder }}\n    </span>\n  </ng-container>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap\";@import\"/node_modules/bootstrap/dist/css/bootstrap.css\";.ca-font-thin{font-weight:100!important}.ca-font-extra-light{font-weight:200!important}.ca-font-light{font-weight:300!important}.ca-font-regular{font-weight:400!important}.ca-font-medium{font-weight:500!important}.ca-font-semi-bold{font-weight:600!important}.ca-font-bold{font-weight:700!important}.ca-font-extra-bold{font-weight:800!important}.ca-font-black{font-weight:900!important}.table-progress-popover{background-color:unset!important;margin-left:-10px}.table-progress-popover .progress-dropdown{margin-top:-6px;width:260px;height:200px;background:#2f2f2f;border-radius:3px;padding:8px;box-shadow:0 0 4px #00000026;overflow:hidden;animation:progressAnimation .25s ease-in-out}.table-progress-popover .progress-dropdown .progress-header .progress-title{font-size:18px;font-weight:600;color:#dadada}.table-progress-popover .progress-dropdown .progress-header .progress-title span{font-weight:400}.table-progress-popover .progress-dropdown .progress-header .progress-total{font-size:14px;line-height:17px;color:#dadada}.table-progress-popover .progress-dropdown .table-progress-bar-container{width:100%;height:8px;margin-top:6px;border-radius:2px;overflow:hidden}.table-progress-popover .progress-dropdown .table-progress-bar-container .table-progress-bar{height:100%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-dual-info-container .progress-info-container{width:50%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container{margin-top:10px}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-title{margin-bottom:2px;font-size:11px;font-weight:700;line-height:14px;color:#ffffffb2}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-text{font-size:14px;line-height:18px;color:#dadada}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@keyframes progressAnimation{0%{height:0px}to{height:220px}}ngb-popover-window{padding:unset!important;border:unset!important}ngb-popover-window .popover-arrow{display:none!important}ngb-popover-window .popover-body{padding:unset!important}*{margin:0;font-family:Roboto,Helvetica Neue,sans-serif}html{scroll-behavior:auto!important}.gm-style-iw-chr,.gm-style-iw-tc{display:none}.gm-style .gm-style-iw-c{border-radius:0}.gm-style-iw{overflow-y:auto!important;overflow-x:hidden!important}.gm-style-iw>div{overflow:visible!important}.infoWindow{overflow:hidden!important}.gm-style-iw-d,.gm-style-iw.gm-style-iw-c{max-height:350px!important}.input-custom-group{display:block;position:relative}.input-custom-group .location-area-filter,.input-custom-group .location-area-filter.focus,.input-custom-group .location-area-filter.focus:hover{background-color:#424242!important;color:#fff!important}.input-custom-group .location-area-filter.focus::placeholder{background-color:#424242!important}.input-custom-group .location-area-filter:focus{background-color:#424242!important;color:#fff!important}.input-custom-group.datetimeclass{border-radius:2px!important}.input-custom-group.datetimeclass:not(.invalid-focus-out-filled),.input-custom-group.datetimeclass:not(.valid-focus-in),.input-custom-group.datetimeclass:not(.valid-focus-out),.input-custom-group.datetimeclass:not(.valid-focus-out-filled),.input-custom-group.datetimeclass:not(.invalid-focus-in),.input-custom-group.datetimeclass:not(.invalid-focus-out-empty){background-color:#2f2f2f}.input-custom-group.datetimeclass:not(.invalid-focus-out-filled):hover,.input-custom-group.datetimeclass:not(.valid-focus-in):hover,.input-custom-group.datetimeclass:not(.valid-focus-out):hover,.input-custom-group.datetimeclass:not(.valid-focus-out-filled):hover,.input-custom-group.datetimeclass:not(.invalid-focus-in):hover,.input-custom-group.datetimeclass:not(.invalid-focus-out-empty):hover{background-color:#2f2f2f}.input-custom-group.datetimeclass.invalid-empty-focus-out{background-color:#fae3e3}.input-custom-group.datetimeclass.invalid-empty-focus-out:hover{background-color:#f5c7c7}.input-custom-group.datetimeclass.valid-focus-out{background-color:#e2ecf9}.input-custom-group.datetimeclass.valid-focus-out:hover{background-color:#c5d8f3}.input-custom-group.datetimeclass.inactive-empty,.input-custom-group.datetimeclass.inactive-filled{background-color:#f7f7f7}.input-custom-group.datetimeclass.dark:not(.invalid-focus-out-filled),.input-custom-group.datetimeclass.dark:not(.valid-focus-in),.input-custom-group.datetimeclass.dark:not(.valid-focus-out),.input-custom-group.datetimeclass.dark:not(.valid-focus-out-filled),.input-custom-group.datetimeclass.dark:not(.invalid-focus-in),.input-custom-group.datetimeclass.dark:not(.invalid-focus-out-empty){background-color:#424242}.input-custom-group.datetimeclass.dark:not(.invalid-focus-out-filled):hover,.input-custom-group.datetimeclass.dark:not(.valid-focus-in):hover,.input-custom-group.datetimeclass.dark:not(.valid-focus-out):hover,.input-custom-group.datetimeclass.dark:not(.valid-focus-out-filled):hover,.input-custom-group.datetimeclass.dark:not(.invalid-focus-in):hover,.input-custom-group.datetimeclass.dark:not(.invalid-focus-out-empty):hover{background-color:#424242}.input-custom-group.datetimeclass.dark.valid-focus-out-filled{background-color:red}.input-custom-group.datetimeclass.dark.valid-focus-out-filled:hover{background-color:#c5d8f3}.input-custom-group.datetimeclass.dark.inactive-empty,.input-custom-group.datetimeclass.dark.inactive-filled{background-color:#f7f7f7}.input-custom-group.custom-empty-hover:hover{transition:.3s ease-in-out}.input-custom-group.custom-empty-hover:hover .input-dropdown-arrow:hover~.input-control,.input-custom-group.custom-empty-hover:hover .input-icon:hover~.input-control{background-color:#2f2f2f}.input-custom-group.custom-empty-hover:hover .input-dropdown-arrow:before:hover,.input-custom-group.custom-empty-hover:hover .input-dropdown-arrow:after:hover~.input-control,.input-custom-group.custom-empty-hover:hover .input-icon:before:hover,.input-custom-group.custom-empty-hover:hover .input-icon:after:hover~.input-control{background-color:#2f2f2f}.input-custom-group.custom-filled-hover:hover{transition:.3s ease-in-out}.input-custom-group.custom-filled-hover:hover .input-clear{display:inline-block}.input-custom-group.custom-filled-hover:hover .input-dropdown-arrow:hover~.input-control,.input-custom-group.custom-filled-hover:hover .input-icon:hover~.input-control,.input-custom-group.custom-filled-hover:hover .input-clear:hover~.input-control{background-color:#2f2f2f}.input-custom-group.custom-filled-hover:hover .input-dropdown-arrow:before:hover,.input-custom-group.custom-filled-hover:hover .input-dropdown-arrow:after:hover~.input-control,.input-custom-group.custom-filled-hover:hover .input-icon:before:hover,.input-custom-group.custom-filled-hover:hover .input-icon:after:hover~.input-control,.input-custom-group.custom-filled-hover:hover .input-clear:before:hover,.input-custom-group.custom-filled-hover:hover .input-clear:after:hover~.input-control{background-color:#2f2f2f}.input-custom-group.input-remove-trash-can:hover .input-clear{display:inline-block}.input-custom-group.input-remove-trash-can:hover .input-clear:hover~.input-control{background-color:#2f2f2f}.input-custom-group.input-remove-trash-can:hover .placeholder-icon-right-side{opacity:0}.input-custom-group.input-remove-background:hover .input-control{background:transparent!important}.input-custom-group.input-remove-background.input-blue-text{color:red}.input-custom-group.input-remove-background .input-control{background:transparent;color:#2f2f2f;font-weight:400}.input-custom-group.input-remove-background .input-control.focus,.input-custom-group.input-remove-background .input-control.focus:hover{background:#2f2f2f!important;color:#fff!important}.input-custom-group.input-remove-background .input-control.focus::placeholder{color:#fff!important}.input-custom-group.input-remove-background .input-control:focus{background:#2f2f2f!important;color:#fff!important}.input-custom-group.input-remove-background .input-dropdown-arrow svg path{fill:#919191!important}.input-custom-group.input-blue-text .input-control{color:#6692f1}.input-custom-group.invalid-filled-focus-out:hover{transition:.3s ease-in-out}.input-custom-group.invalid-filled-focus-out:hover .input-clear,.input-custom-group.invalid-filled-focus-out:hover .input-pen-container,.input-custom-group.invalid-filled-focus-out:hover .input-invalid-danger-mark,.input-custom-group.invalid-filled-focus-out:hover .input-dropdown-arrow,.input-custom-group.invalid-filled-focus-out:hover .input-icon,.input-custom-group.invalid-filled-focus-out:hover .input-label-counter,.input-custom-group.invalid-filled-focus-out:hover .input-password-eye{display:inline-block}.input-custom-group.invalid-filled-focus-out:hover .input-clear:hover~.input-control,.input-custom-group.invalid-filled-focus-out:hover .input-pen-container:hover~.input-control,.input-custom-group.invalid-filled-focus-out:hover .input-invalid-danger-mark:hover~.input-control,.input-custom-group.invalid-filled-focus-out:hover .input-dropdown-arrow:hover~.input-control,.input-custom-group.invalid-filled-focus-out:hover .input-icon:hover~.input-control,.input-custom-group.invalid-filled-focus-out:hover .input-label-counter:hover~.input-control,.input-custom-group.invalid-filled-focus-out:hover .input-password-eye:hover~.input-control{background-color:#f5c7c7}.input-custom-group.invalid-filled-focus-out:hover .input-clear:before:hover,.input-custom-group.invalid-filled-focus-out:hover .input-clear:after:hover~.input-control,.input-custom-group.invalid-filled-focus-out:hover .input-pen-container:before:hover,.input-custom-group.invalid-filled-focus-out:hover .input-pen-container:after:hover~.input-control,.input-custom-group.invalid-filled-focus-out:hover .input-invalid-danger-mark:before:hover,.input-custom-group.invalid-filled-focus-out:hover .input-invalid-danger-mark:after:hover~.input-control,.input-custom-group.invalid-filled-focus-out:hover .input-dropdown-arrow:before:hover,.input-custom-group.invalid-filled-focus-out:hover .input-dropdown-arrow:after:hover~.input-control,.input-custom-group.invalid-filled-focus-out:hover .input-icon:before:hover,.input-custom-group.invalid-filled-focus-out:hover .input-icon:after:hover~.input-control,.input-custom-group.invalid-filled-focus-out:hover .input-label-counter:before:hover,.input-custom-group.invalid-filled-focus-out:hover .input-label-counter:after:hover~.input-control,.input-custom-group.invalid-filled-focus-out:hover .input-password-eye:before:hover,.input-custom-group.invalid-filled-focus-out:hover .input-password-eye:after:hover~.input-control{background-color:#f5c7c7}.input-custom-group.invalid-filled-focus-out:hover .input-label-counter{display:flex}.input-custom-group.invalid-empty-focus-out:hover{transition:.3s ease-in-out}.input-custom-group.invalid-empty-focus-out:hover .input-clear{display:none}.input-custom-group.invalid-empty-focus-out:hover .input-pen-container,.input-custom-group.invalid-empty-focus-out:hover .input-invalid-danger-mark,.input-custom-group.invalid-empty-focus-out:hover .input-dropdown-arrow,.input-custom-group.invalid-empty-focus-out:hover .input-icon{display:inline-block}.input-custom-group.invalid-empty-focus-out:hover .input-pen-container:hover~.input-control,.input-custom-group.invalid-empty-focus-out:hover .input-invalid-danger-mark:hover~.input-control,.input-custom-group.invalid-empty-focus-out:hover .input-dropdown-arrow:hover~.input-control,.input-custom-group.invalid-empty-focus-out:hover .input-icon:hover~.input-control{background-color:#f5c7c7}.input-custom-group.invalid-empty-focus-out:hover .input-pen-container:before:hover,.input-custom-group.invalid-empty-focus-out:hover .input-pen-container:after:hover~.input-control,.input-custom-group.invalid-empty-focus-out:hover .input-invalid-danger-mark:before:hover,.input-custom-group.invalid-empty-focus-out:hover .input-invalid-danger-mark:after:hover~.input-control,.input-custom-group.invalid-empty-focus-out:hover .input-dropdown-arrow:before:hover,.input-custom-group.invalid-empty-focus-out:hover .input-dropdown-arrow:after:hover~.input-control,.input-custom-group.invalid-empty-focus-out:hover .input-icon:before:hover,.input-custom-group.invalid-empty-focus-out:hover .input-icon:after:hover~.input-control{background-color:#f5c7c7}.input-custom-group.invalid-focus-in:hover{transition:.3s ease-in-out}.input-custom-group.invalid-focus-in:hover .input-password-eye:hover~.input-control{background-color:#e22e22}.input-custom-group.invalid-focus-in:hover .input-password-eye:before:hover,.input-custom-group.invalid-focus-in:hover .input-password-eye:after:hover~.input-control{background-color:#e22e22}.input-custom-group.valid-focus-out:hover{transition:.3s ease-in-out}.input-custom-group.valid-focus-out:hover .input-clear,.input-custom-group.valid-focus-out:hover .input-pen-container,.input-custom-group.valid-focus-out:hover .input-dropdown-arrow,.input-custom-group.valid-focus-out:hover .input-icon,.input-custom-group.valid-focus-out:hover .input-label-counter,.input-custom-group.valid-focus-out:hover .input-password-eye{display:inline-block;transition:.3s ease-in-out}.input-custom-group.valid-focus-out:hover .input-clear:hover~.input-control,.input-custom-group.valid-focus-out:hover .input-pen-container:hover~.input-control,.input-custom-group.valid-focus-out:hover .input-dropdown-arrow:hover~.input-control,.input-custom-group.valid-focus-out:hover .input-icon:hover~.input-control,.input-custom-group.valid-focus-out:hover .input-label-counter:hover~.input-control,.input-custom-group.valid-focus-out:hover .input-password-eye:hover~.input-control{background-color:#c5d8f3}.input-custom-group.valid-focus-out:hover .input-clear:before:hover,.input-custom-group.valid-focus-out:hover .input-clear:after:hover~.input-control,.input-custom-group.valid-focus-out:hover .input-pen-container:before:hover,.input-custom-group.valid-focus-out:hover .input-pen-container:after:hover~.input-control,.input-custom-group.valid-focus-out:hover .input-dropdown-arrow:before:hover,.input-custom-group.valid-focus-out:hover .input-dropdown-arrow:after:hover~.input-control,.input-custom-group.valid-focus-out:hover .input-icon:before:hover,.input-custom-group.valid-focus-out:hover .input-icon:after:hover~.input-control,.input-custom-group.valid-focus-out:hover .input-label-counter:before:hover,.input-custom-group.valid-focus-out:hover .input-label-counter:after:hover~.input-control,.input-custom-group.valid-focus-out:hover .input-password-eye:before:hover,.input-custom-group.valid-focus-out:hover .input-password-eye:after:hover~.input-control{background-color:#c5d8f3}.input-custom-group.valid-focus-out:hover .input-label-counter{display:flex}.input-custom-group.valid-focus-out:hover .input-required-check{display:none}.input-custom-group.valid-focus-in:hover{transition:.3s ease-in-out}.input-custom-group.valid-focus-in:hover .trash-can-svg:hover~.input-control,.input-custom-group.valid-focus-in:hover .input-password-eye:hover~.input-control{background-color:#255bb9}.input-custom-group.valid-focus-in:hover .trash-can-svg:before:hover,.input-custom-group.valid-focus-in:hover .trash-can-svg:after:hover~.input-control,.input-custom-group.valid-focus-in:hover .input-password-eye:before:hover,.input-custom-group.valid-focus-in:hover .input-password-eye:after:hover~.input-control{background-color:#255bb9}.input-custom-group.inactive-filled:hover .input-clear,.input-custom-group.inactive-filled:hover .trash-can-svg,.input-custom-group.inactive-filled:hover .input-pen-container,.input-custom-group.inactive-filled:hover .input-dropdown-arrow,.input-custom-group.inactive-filled:hover .input-icon,.input-custom-group.inactive-filled:hover .input-password-eye{display:inline-block;transition:.3s ease-in-out}.input-custom-group.inactive-filled:hover .input-clear:hover~.input-control,.input-custom-group.inactive-filled:hover .trash-can-svg:hover~.input-control,.input-custom-group.inactive-filled:hover .input-pen-container:hover~.input-control,.input-custom-group.inactive-filled:hover .input-dropdown-arrow:hover~.input-control,.input-custom-group.inactive-filled:hover .input-icon:hover~.input-control,.input-custom-group.inactive-filled:hover .input-password-eye:hover~.input-control{background-color:#f7f7f7}.input-custom-group.inactive-filled:hover .input-clear:before:hover,.input-custom-group.inactive-filled:hover .input-clear:after:hover~.input-control,.input-custom-group.inactive-filled:hover .trash-can-svg:before:hover,.input-custom-group.inactive-filled:hover .trash-can-svg:after:hover~.input-control,.input-custom-group.inactive-filled:hover .input-pen-container:before:hover,.input-custom-group.inactive-filled:hover .input-pen-container:after:hover~.input-control,.input-custom-group.inactive-filled:hover .input-dropdown-arrow:before:hover,.input-custom-group.inactive-filled:hover .input-dropdown-arrow:after:hover~.input-control,.input-custom-group.inactive-filled:hover .input-icon:before:hover,.input-custom-group.inactive-filled:hover .input-icon:after:hover~.input-control,.input-custom-group.inactive-filled:hover .input-password-eye:before:hover,.input-custom-group.inactive-filled:hover .input-password-eye:after:hover~.input-control{background-color:#f7f7f7}.input-custom-group.inactive-empty:hover .input-clear,.input-custom-group.inactive-empty:hover .input-pen-container,.input-custom-group.inactive-empty:hover .input-dropdown-arrow,.input-custom-group.inactive-empty:hover .input-icon,.input-custom-group.inactive-empty:hover .input-password-eye{display:inline-block;transition:.3s ease-in-out}.input-custom-group.inactive-empty:hover .input-clear:hover~.input-control,.input-custom-group.inactive-empty:hover .input-pen-container:hover~.input-control,.input-custom-group.inactive-empty:hover .input-dropdown-arrow:hover~.input-control,.input-custom-group.inactive-empty:hover .input-icon:hover~.input-control,.input-custom-group.inactive-empty:hover .input-password-eye:hover~.input-control{background-color:#f7f7f7}.input-custom-group.inactive-empty:hover .input-clear:before:hover,.input-custom-group.inactive-empty:hover .input-clear:after:hover~.input-control,.input-custom-group.inactive-empty:hover .input-pen-container:before:hover,.input-custom-group.inactive-empty:hover .input-pen-container:after:hover~.input-control,.input-custom-group.inactive-empty:hover .input-dropdown-arrow:before:hover,.input-custom-group.inactive-empty:hover .input-dropdown-arrow:after:hover~.input-control,.input-custom-group.inactive-empty:hover .input-icon:before:hover,.input-custom-group.inactive-empty:hover .input-icon:after:hover~.input-control,.input-custom-group.inactive-empty:hover .input-password-eye:before:hover,.input-custom-group.inactive-empty:hover .input-password-eye:after:hover~.input-control{background-color:#f7f7f7}.input-custom-group .input-label{position:absolute;top:4px;left:6px;font-size:14px;line-height:18px;-webkit-user-select:none;user-select:none;pointer-events:none;transition:.3s ease-in-out}.input-custom-group .input-label span::selection{background-color:#2f2f2f33!important;color:#2f2f2f!important}.input-custom-group .input-label.required:after{content:\" *\";color:#ef5350}.input-custom-group .input-label.inactive-empty{color:#919191!important}.input-custom-group .input-label.up-label{top:-17px;left:6px;font-size:11px;font-weight:600}.input-custom-group .input-label.in-label{top:4px!important;font-size:11px!important;font-weight:600!important;transition:none!important}.input-custom-group .input-label.in-label.in-label-focus{color:#fff!important}.input-custom-group .input-label.no-transition{transition:none!important}.input-custom-group .input-label.input-placeholderIcon-on{left:37px}.input-custom-group .input-label.input-placeholderIcon-on.up-label{left:36px}.input-custom-group .input-label.hidden{display:none!important}.input-custom-group .input-label.load-shipper .load-shipper{display:grid;grid-template-columns:455px 120px;align-items:center}.input-custom-group .input-label.load-shipper .load-shipper span:nth-child(2){text-align:right;color:#6c6c6c;font-size:11px;font-weight:600}.input-custom-group .input-label.load-shipper.required:after{position:absolute;right:0;left:60px;top:0}.input-custom-group .input-label.load-shipper.multiple-labels.required:after,.input-custom-group .input-label.load-shipper.up-label.required:after{transition-delay:.1s;transition-timing-function:ease-in;position:absolute;right:0;left:48px;top:0}.input-custom-group .input-label .load-dispatches-ttd{display:grid;grid-template-columns:92px 89px 182px 53px;align-items:center;-moz-column-gap:65px;grid-column-gap:65px;column-gap:65px}.input-custom-group .input-label .load-dispatches-ttd span:nth-child(4){color:#2f2f2f!important;opacity:0;top:-19px;font-size:11px;font-weight:600}.input-custom-group .input-label .load-dispatches-ttd.multiple-labels-position-on-focus span:nth-child(4){transition-delay:.3s;color:#6c6c6c!important;opacity:1;top:-19px}.input-custom-group .input-label.dropdown-double-column>*{display:grid;grid-template-columns:118px 1fr;align-items:center;-moz-column-gap:4px;grid-column-gap:4px;column-gap:4px}.input-custom-group .input-label.dropdown-triple-column>*{display:grid;grid-template-columns:220px 138px 220px;align-items:center;-moz-column-gap:4px;grid-column-gap:4px;column-gap:4px}.input-custom-group .input-label.load-broker .load-broker{display:grid;align-items:center;grid-template-columns:277px 82px 69px}.input-custom-group .input-label.load-broker .load-broker span:nth-child(2),.input-custom-group .input-label.load-broker .load-broker span:nth-child(3){color:#2f2f2f!important;opacity:0;top:-19px;font-size:11px;font-weight:600}.input-custom-group .input-label.load-broker .load-broker.multiple-labels-position-on-focus span:nth-child(2),.input-custom-group .input-label.load-broker .load-broker.multiple-labels-position-on-focus span:nth-child(3){transition-delay:.3s;color:#919191!important;opacity:1;top:-19px;text-align:right}.input-custom-group .input-label.load-broker.required:after{position:absolute;left:51px;right:0;top:-1px}.input-custom-group .input-label.load-broker.multiple-labels.required:after,.input-custom-group .input-label.load-broker.up-label.required:after{transition-delay:.1s;transition-timing-function:ease-in;position:absolute;left:44px;right:0;top:-1px}.input-custom-group .input-label .load-broker-contact,.input-custom-group .input-label .load-shipper-contact{display:grid;grid-template-columns:235px 38px;align-items:center;grid-column-gap:10px;column-gap:10px;transition:.3 ease-in-out}.input-custom-group .input-label .load-broker-contact span:nth-child(2),.input-custom-group .input-label .load-shipper-contact span:nth-child(2){color:#2f2f2f!important;opacity:0;top:-19px;font-size:11px;font-weight:600}.input-custom-group .input-label .load-broker-contact.multiple-labels-position-on-focus span:nth-child(2),.input-custom-group .input-label .load-shipper-contact.multiple-labels-position-on-focus span:nth-child(2){transition-delay:.3s;opacity:1;top:-19px;color:#6c6c6c!important}.input-custom-group .input-label.load-shipper-contact .load-shipper-contact{grid-template-columns:295px 38px}.input-custom-group .input-label.regular{font-weight:400}.input-custom-group .input-label.datetimeclass.dark{color:#fff}.input-custom-group .hide-loads .load-broker{grid-template-columns:365px 92px}.input-custom-group .input-control{width:100%;height:26px;border:none;outline:none;border-radius:2px;padding:4px 6px;font-size:14px;font-weight:400;background-color:#2f2f2f;color:#2f2f2f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.input-custom-group .input-control::selection{background-color:#2f2f2f33;color:#2f2f2f}.input-custom-group .input-control.center{text-align:center}.input-custom-group .input-control.uppercase{text-transform:uppercase}.input-custom-group .input-control.lowercase{text-transform:lowercase}.input-custom-group .input-control:hover{background-color:#2f2f2f}.input-custom-group .input-control:focus{background-color:#1d1d1d;color:#fff;transition:.2s ease-in-out}.input-custom-group .input-control:focus::placeholder{color:#fff6}.input-custom-group .input-control:focus::selection{background-color:#fff3;color:#fff}.input-custom-group .input-control.valid-focus-in,.input-custom-group .input-control.dropdown-placeholder-active,.input-custom-group .input-control.multiSelect-dropdown-active{background-color:#255bb9;color:#fff}.input-custom-group .input-control.valid-focus-in::placeholder,.input-custom-group .input-control.dropdown-placeholder-active::placeholder,.input-custom-group .input-control.multiSelect-dropdown-active::placeholder{color:#6f9ee0}.input-custom-group .input-control.valid-focus-in::selection,.input-custom-group .input-control.dropdown-placeholder-active::selection,.input-custom-group .input-control.multiSelect-dropdown-active::selection{background-color:#fff3;color:#fff}.input-custom-group .input-control.valid-focus-out-filled{background-color:#e2ecf9;color:#2f2f2f}.input-custom-group .input-control.valid-focus-out-filled.input-dropdown-table{background-color:#fff}.input-custom-group .input-control.valid-focus-out-filled::selection{background-color:#2f2f2f33;color:#2f2f2f}.input-custom-group .input-control.valid-focus-out-filled:hover{background-color:#c5d8f3}.input-custom-group .input-control.invalid-focus-in,.input-custom-group .input-control.invalid-search-in-dropdown-focus-in{background-color:#e22e22;color:#fff}.input-custom-group .input-control.invalid-focus-in::selection,.input-custom-group .input-control.invalid-search-in-dropdown-focus-in::selection{background-color:#fff3;color:#fff}.input-custom-group .input-control.invalid-focus-out-filled,.input-custom-group .input-control.invalid-focus-out-empty{background-color:#fae3e3;color:#2f2f2f}.input-custom-group .input-control.invalid-focus-out-filled::selection,.input-custom-group .input-control.invalid-focus-out-empty::selection{background-color:#2f2f2f33;color:#2f2f2f}.input-custom-group .input-control.invalid-focus-out-filled:hover,.input-custom-group .input-control.invalid-focus-out-empty:hover{background-color:#f5c7c7}.input-custom-group .input-control.inactive-empty{background-color:#f7f7f7;-webkit-user-select:none;user-select:none;pointer-events:none}.input-custom-group .input-control.inactive-filled{background-color:#f7f7f7;color:#2f2f2f;-webkit-user-select:none;user-select:none;pointer-events:none}.input-custom-group .input-control.inactive-filled::selection{background-color:#2f2f2f33;color:#2f2f2f}.input-custom-group .input-control.datetimeclass:not(.inactive-filled){letter-spacing:1px;pointer-events:none;opacity:0}.input-custom-group .input-control.has-placeholderIcon{padding-left:37px}.input-custom-group .input-control.dropdown-input-image-truck{padding-left:63px}.input-custom-group .input-control.dropdown-input-image-truck-focus::placeholder{padding-left:63px}.input-custom-group .input-control.dropdown-input-image-trailer{padding-left:68px}.input-custom-group .input-control.dropdown-input-image-trailer-focus::placeholder{padding-left:68px}.input-custom-group .input-control.dropdown-input-image-color{padding-left:29px}.input-custom-group .input-control.dropdown-input-image-user{padding-left:30px}.input-custom-group .input-control.dropdown-input-image-pm{padding-left:37px}.input-custom-group .input-control.dropdown-input-image-without-text-transparent,.input-custom-group .input-control.multiple-input-values{color:transparent}.input-custom-group .input-control.input-32-font-20{font-weight:700;font-size:20px}.input-custom-group .input-control.details-pages{height:32px;background:#1d1d1d;color:#fff6}.input-custom-group .input-control.details-pages .input-dropdown-arrow:hover,.input-custom-group .input-control.details-pages:hover{background:#1d1d1d}.input-custom-group .input-control.details-pages::placeholder{color:#fff6}.input-custom-group .input-control.disable-select-on-focus-out::selection{background-color:transparent}.input-custom-group .input-control.hide-placeholder-in-multiple-placeholder-input::placeholder{opacity:0;color:transparent}.input-custom-group .input-control.multiple-input-placeholder{pointer-events:none;-webkit-user-select:none;user-select:none}.input-custom-group .input-control.load-dispatches-ttd,.input-custom-group .input-control.load-broker,.input-custom-group .input-control.load-shipper,.input-custom-group .input-control.load-shipper-contact{position:absolute;bottom:1.5px;background-color:transparent;display:grid;align-items:center}.input-custom-group .input-control.load-dispatches-ttd span,.input-custom-group .input-control.load-broker span,.input-custom-group .input-control.load-shipper span,.input-custom-group .input-control.load-shipper-contact span{-webkit-user-select:none;user-select:none}.input-custom-group .input-control.double-text-dropdown{position:absolute;top:50%;transform:translateY(-48%);background-color:transparent;display:flex;align-items:center;justify-content:space-between;padding-right:26px}.input-custom-group .input-control.double-text-dropdown span:last-child .multiple-input-text{color:#919191;font-size:11px;font-weight:400}.input-custom-group .input-control.double-text-dropdown span:last-child .multiple-input-text.focusable-text{color:#6f9ee0;font-size:11px;font-weight:400}.input-custom-group .input-control.double-text-dropdown span.focusable-text{color:#6f9ee0}.input-custom-group .input-control.load-dispatches-ttd{grid-template-columns:repeat(2,156px) 150px 122px;padding-top:3px}.input-custom-group .input-control.load-dispatches-ttd svg{height:16px;width:44px}.input-custom-group .input-control.load-dispatches-ttd svg path{fill:#919191}.input-custom-group .input-control.load-dispatches-ttd span:nth-child(1) .multiple-input-text,.input-custom-group .input-control.load-dispatches-ttd span:nth-child(2) .multiple-input-text{max-width:70px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.input-custom-group .input-control.load-dispatches-ttd span:nth-child(3) .multiple-input-text{max-width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.input-custom-group .input-control.load-dispatches-ttd span:last-child{justify-content:flex-end}.input-custom-group .input-control.load-dispatches-ttd span:last-child .multiple-input-text{color:#919191!important;font-size:11px;font-weight:400;line-height:24px}.input-custom-group .input-control.load-dispatches-ttd span:last-child .multiple-input-text.focusable-text{color:#6f9ee0;font-size:11px;font-weight:400}.input-custom-group .input-control.load-dispatches-ttd span.focusable-text{color:#6f9ee0}.input-custom-group .input-control.load-dispatches-ttd span span{line-height:23px;position:relative}.input-custom-group .input-control.load-dispatches-ttd .focusable-svg svg #Ellipse_9856,.input-custom-group .input-control.load-dispatches-ttd .focusable-svg svg #Ellipse_9857,.input-custom-group .input-control.load-dispatches-ttd .focusable-svg svg #Ellipse_9858,.input-custom-group .input-control.load-dispatches-ttd .focusable-svg svg path{fill:#6f9ee0}.input-custom-group .input-control.load-dispatches-ttd .focusable-image{opacity:.6}.input-custom-group .input-control.load-dispatches-ttd .trailerContainer{width:max-content!important;padding:0!important;margin:0!important}.input-custom-group .input-control.load-broker{display:grid;grid-template-columns:229px 115px 48px;align-items:center;height:24px}.input-custom-group .input-control.load-broker span:nth-child(1){white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.input-custom-group .input-control.load-broker span:nth-child(2),.input-custom-group .input-control.load-broker span:nth-child(3){justify-content:flex-end}.input-custom-group .input-control.load-broker span:nth-child(3){position:relative;bottom:1px}.input-custom-group .input-control.load-broker span:nth-child(3) .multiple-input-text.counter{max-width:max-content;height:18px;border-radius:30px;text-align:center;font-size:11px;font-weight:400;color:#919191;background-color:#91919133;padding:1px 6px}.input-custom-group .input-control.load-broker span:nth-child(3) .multiple-input-text.counter.counter-focus{color:#6f9ee0;background-color:#6f9ee033}.input-custom-group .input-control.load-broker span:nth-child(3) .multiple-input-text.counter.counter-one{max-width:none!important;width:19px!important}.input-custom-group .input-control.load-broker-contact,.input-custom-group .input-control.load-shipper-contact{position:absolute;top:50%;transform:translateY(-50%);background-color:transparent!important;display:grid;grid-template-columns:165px 94px;align-items:center;grid-column-gap:20px;column-gap:20px;-webkit-user-select:none;user-select:none;height:25px;padding-right:35px}.input-custom-group .input-control.load-broker-contact span,.input-custom-group .input-control.load-shipper-contact span{overflow:hidden;-webkit-user-select:none;user-select:none}.input-custom-group .input-control.load-broker-contact span span,.input-custom-group .input-control.load-shipper-contact span span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.input-custom-group .input-control.load-broker-contact span:nth-child(2),.input-custom-group .input-control.load-shipper-contact span:nth-child(2){justify-self:flex-end;font-size:11px;font-weight:400;line-height:24px}.input-custom-group .input-control.load-broker-contact span:nth-child(2) span,.input-custom-group .input-control.load-shipper-contact span:nth-child(2) span{color:#919191!important}.input-custom-group .input-control.load-shipper-contact{grid-template-columns:283px 38px}.input-custom-group .input-control.load-shipper{grid-template-columns:394px 180px;column-gap:2px;padding-right:25px;-webkit-user-select:none;user-select:none;height:25px}.input-custom-group .input-control.load-shipper span:nth-child(2),.input-custom-group .input-control.load-shipper span:nth-child(3){justify-content:flex-end;font-size:11px;color:#919191!important;font-weight:400}.input-custom-group .input-control.load-shipper span:nth-child(2) span{color:#919191!important}.input-custom-group .input-control.load-shipper span:nth-child(2) span.focusable-text{color:#6f9ee0}.input-custom-group .input-control.load-shipper span:nth-child(3) .multiple-input-text.counter{max-width:max-content;height:18px;border-radius:30px;text-align:center;font-size:11px;font-weight:400;color:#919191;background-color:#91919133;padding:1px 6px;position:relative;bottom:1px}.input-custom-group .input-control.load-shipper span:nth-child(3) .multiple-input-text.counter.counter-focus{color:#6f9ee0;background-color:#6f9ee033}.input-custom-group .input-control.load-shipper span:nth-child(3) .multiple-input-text.counter.counter-one{max-width:none!important;width:19px!important}.input-custom-group .input-control.load-shipper span span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.input-custom-group .input-control.cursor-on-right-side{text-align:right;padding-right:32px}.input-custom-group .input-control.merge-dropdown-body-with-input::placeholder{color:#fff}.input-custom-group .input-control.input-commands{background-color:#1d1d1d!important;color:#fff!important}.input-custom-group .input-control.input-commands.blue-commands{background-color:#0b49d1!important}.input-custom-group .input-control.dropdown-label-active{background-color:#1d1d1d!important;color:#fff!important}.input-custom-group .input-control.dispatch-dropdown{background-color:#2f2f2f!important}.input-custom-group input[type=number]::-webkit-inner-spin-button,.input-custom-group input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0!important}.input-custom-group input[type=number]::-webkit-inner-spin-button:hover,.input-custom-group input[type=number]::-webkit-outer-spin-button:hover,.input-custom-group input[type=number]::-webkit-inner-spin-button:focus,.input-custom-group input[type=number]::-webkit-outer-spin-button:focus{appearance:none;margin:0!important}.input-custom-group input[type=number]{-moz-appearance:textfield!important}.input-custom-group input[type=number]:hover,.input-custom-group input[type=number]:focus{-moz-appearance:textfield!important}.input-custom-group .load-dispatches-ttd-owner{position:absolute;left:13px;bottom:7px;width:10px;height:10px}.input-custom-group .load-dispatches-ttd-owner svg{width:10px!important;height:10px!important}.input-custom-group .input-required-check{position:absolute;right:6px;width:14px;height:10px;display:inline-block;-webkit-user-select:none;user-select:none}.input-custom-group .input-required-check svg path{fill:#6f9ee0}.input-custom-group .input-clear{position:absolute;right:4px;top:47%;transform:translateY(-50%);border-radius:1px;display:none;z-index:10;cursor:pointer;transition:.3s ease-in-out}.input-custom-group .input-clear .input-clear-x svg{width:18px!important;height:18px!important;overflow:visible}.input-custom-group .input-clear .input-clear-x svg path{fill:#2f2f2f}.input-custom-group .input-clear .input-clear-x svg rect{fill:#919191;transition:transform .3s;transform:scale(1);transform-origin:center}.input-custom-group .input-clear .input-clear-x:hover svg{overflow:visible}.input-custom-group .input-clear .input-clear-x:hover svg rect{transform:scale(1.2);transform-origin:center;transition:transform .3s;fill:#424242}.input-custom-group .input-clear.datetimeclass{z-index:22!important}.input-custom-group .input-clear.focus{display:inline-block}.input-custom-group .input-clear.focus .input-clear-x svg path{fill:#1d1d1d}.input-custom-group .input-clear.focus .input-clear-x svg rect{fill:#aaa}.input-custom-group .input-clear.focus .input-clear-x:hover svg rect{fill:#fff}.input-custom-group .input-clear.valid-focus-in{display:inline-block}.input-custom-group .input-clear.valid-focus-in .input-clear-x svg path{fill:#255bb9}.input-custom-group .input-clear.valid-focus-in .input-clear-x svg rect{fill:#c5d8f3}.input-custom-group .input-clear.valid-focus-in .input-clear-x:hover svg rect{fill:#fff}.input-custom-group .input-clear.valid-focus-out .input-clear-x svg path{fill:#c5d8f3}.input-custom-group .input-clear.valid-focus-out .input-clear-x svg rect{fill:#6f9ee0}.input-custom-group .input-clear.valid-focus-out .input-clear-x:hover svg rect{fill:#3074d3}.input-custom-group .input-clear.invalid-focus-in{display:inline-block}.input-custom-group .input-clear.invalid-focus-in .input-clear-x svg path{fill:#e22e22}.input-custom-group .input-clear.invalid-focus-in .input-clear-x svg rect{fill:#f5c7c7}.input-custom-group .input-clear.invalid-focus-in .input-clear-x:hover svg rect{fill:#fff}.input-custom-group .input-clear.invalid-focus-out .input-clear-x svg path{fill:#f5c7c7}.input-custom-group .input-clear.invalid-focus-out .input-clear-x svg rect{fill:#e57373}.input-custom-group .input-clear.invalid-focus-out .input-clear-x:hover svg rect{fill:#ef5350}.input-custom-group .input-clear.incorrect-input{display:none}.input-custom-group .input-clear.incorrect-input .input-clear-x svg path{fill:#ef5350!important}.input-custom-group .input-clear.incorrect-input .input-clear-x svg rect{fill:transparent!important}.input-custom-group .input-clear.incorrect-input .input-clear-x:hover{display:inline-block}.input-custom-group .input-clear.incorrect-input .input-clear-x:hover svg path{fill:#2f2f2f!important}.input-custom-group .input-clear.incorrect-input .input-clear-x:hover svg rect{fill:#ef5350!important}.input-custom-group .input-clear.incorrect-input-on{display:inline-block}.input-custom-group .input-clear.incorrect-input-on .input-clear-x svg path{fill:#2f2f2f!important}.input-custom-group .input-clear.incorrect-input-on .input-clear-x svg rect{fill:#e57373!important}.input-custom-group .input-clear.incorrect-input-on .input-clear-x:hover svg path{fill:#2f2f2f!important}.input-custom-group .input-clear.incorrect-input-on .input-clear-x:hover svg rect{fill:#ef5350!important}.input-custom-group .input-clear.dropdown-on{right:27px!important;top:50%;transform:translateY(-50%)}.input-custom-group .input-clear.dropdown-on svg-icon{display:flex}.input-custom-group .input-clear.hidden{display:none}.input-custom-group .input-clear.trash-can-svg .input-clear-x svg{width:20px!important;height:20px!important;position:relative;left:1px}.input-custom-group .input-clear.trash-can-svg .input-clear-x svg path{fill:#aaa}.input-custom-group .input-clear.trash-can-svg .input-clear-x svg rect{fill:#aaa}.input-custom-group .input-clear.trash-can-svg .input-clear-x:hover svg path{fill:#919191}.input-custom-group .input-clear.trash-can-svg .input-clear-x:hover svg rect{fill:#919191}.input-custom-group .input-clear.trash-can-svg:before{content:\"\";display:block;height:16px;width:1px;border-radius:3px;background-color:#91919166;position:absolute;right:22px;top:56%;transform:translateY(-50%)}.input-custom-group .input-clear.trash-can-svg.valid-focus-in .input-clear-x svg path{fill:#c5d8f3}.input-custom-group .input-clear.trash-can-svg.valid-focus-in .input-clear-x svg rect{fill:#c5d8f3}.input-custom-group .input-clear.trash-can-svg.valid-focus-in .input-clear-x:hover svg path{fill:#fff}.input-custom-group .input-clear.trash-can-svg.valid-focus-in .input-clear-x:hover svg rect{fill:#fff}.input-custom-group .input-clear.trash-can-svg.valid-focus-in:before{background-color:#c5d8f3}.input-custom-group .input-clear.trash-can-svg.valid-focus-out .input-clear-x svg path{fill:#6f9ee0}.input-custom-group .input-clear.trash-can-svg.valid-focus-out .input-clear-x svg rect{fill:#6f9ee0}.input-custom-group .input-clear.trash-can-svg.valid-focus-out .input-clear-x:hover svg path{fill:#3074d3}.input-custom-group .input-clear.trash-can-svg.valid-focus-out .input-clear-x:hover svg rect{fill:#3074d3}.input-custom-group .input-clear.trash-can-svg.valid-focus-out:before{background-color:#6f9ee066}.input-custom-group .input-clear-dispatch{position:absolute;right:0;top:47%;display:flex;justify-content:center;align-items:center;width:26px;height:26px;transform:translateY(-50%);border-radius:1px;z-index:10;cursor:pointer;transition:.3s ease-in-out}.input-custom-group .input-clear-dispatch svg-icon svg{display:flex;width:12px!important;height:12px!important}.input-custom-group .input-clear-dispatch svg-icon svg path{fill:#aaa}.input-custom-group .input-clear-dispatch:hover{background-color:#1d1d1d}.input-custom-group .input-clear-dispatch:hover svg-icon svg path{fill:#2f2f2f}.input-custom-group .input-icon{position:absolute;left:6px;top:47%;transform:translateY(-50%);z-index:10;-webkit-user-select:none;user-select:none;transition:.3s ease-in-out}.input-custom-group .input-icon svg-icon svg{width:18px;height:18px}.input-custom-group .input-icon.datetimeclass{z-index:21}.input-custom-group .input-icon.default-svg-color svg path{fill:#919191}.input-custom-group .input-icon.cursor-pointer{cursor:pointer}.input-custom-group .input-icon:after{content:\"\";display:block;height:15px;width:1px;border-radius:3px;background:#91919166;position:absolute;left:21px;top:55%;transform:translateY(-50%)}.input-custom-group .input-icon.focus svg path{fill:#ccc}.input-custom-group .input-icon.focus text{fill:#ccc}.input-custom-group .input-icon.focus:after{background:#ccc6}.input-custom-group .input-icon.valid-focus-in svg path{fill:#98b9ea}.input-custom-group .input-icon.valid-focus-in text{fill:#98b9ea}.input-custom-group .input-icon.valid-focus-in:after{background:#c5d8f3}.input-custom-group .input-icon.valid-focus-out svg path{fill:#6692f1}.input-custom-group .input-icon.valid-focus-out text{fill:#6f9ee0}.input-custom-group .input-icon.valid-focus-out:after{background-color:#6f9ee066}.input-custom-group .input-icon.valid-focus-out-dropdown-label:after{background-color:#6f9ee066}.input-custom-group .input-icon.invalid-focus-in svg path{fill:#ffb0a8}.input-custom-group .input-icon.invalid-focus-in text{fill:#ffb0a8}.input-custom-group .input-icon.invalid-focus-in:after{background-color:#f5c7c7}.input-custom-group .input-icon.invalid-focus-out svg path{fill:#e57373}.input-custom-group .input-icon.invalid-focus-out text{fill:#e57373}.input-custom-group .input-icon.invalid-focus-out:after{background:#e5737366}.input-custom-group .input-icon.inactive-empty svg path{fill:#ccc}.input-custom-group .input-icon.inactive-filled svg path{fill:#aaa}.input-custom-group .input-icon.inactive-filled:after{background-color:#aaa6}.input-custom-group .input-icon.discolor-placeholder svg path{fill:#919191}.input-custom-group .input-icon.load-adjusted-rate svg path{fill:#ffa726}.input-custom-group .input-icon.load-advance-rate svg path{fill:#4db6a2}.input-custom-group .input-icon.hidden{display:none!important}.input-custom-group .input-dropdown-arrow{display:inline-block;position:absolute;right:6px;top:50%;transform:translateY(-50%);width:14px;height:14px;line-height:18px;-webkit-user-select:none;user-select:none;z-index:10;cursor:pointer}.input-custom-group .input-dropdown-arrow svg{display:flex;width:100%;transform:rotate(0);transition:.3s ease-in-out}.input-custom-group .input-dropdown-arrow svg path{fill:#919191}.input-custom-group .input-dropdown-arrow:hover svg path{fill:#424242}.input-custom-group .input-dropdown-arrow.datetimeclass{z-index:22!important}.input-custom-group .input-dropdown-arrow.focus svg{transform:rotate(180deg);transition:.3s ease-in-out}.input-custom-group .input-dropdown-arrow.focus svg path{fill:#ccc}.input-custom-group .input-dropdown-arrow.focus:hover svg path{fill:#fff}.input-custom-group .input-dropdown-arrow.invalid-focus-out svg path{fill:#e57373}.input-custom-group .input-dropdown-arrow.invalid-focus-out:hover svg path{fill:#ef5350}.input-custom-group .input-dropdown-arrow.invalid-focus-in svg path,.input-custom-group .input-dropdown-arrow.invalid-search-in-dropdown-focus-in svg path{fill:#f5c7c7}.input-custom-group .input-dropdown-arrow.invalid-focus-in:hover svg path,.input-custom-group .input-dropdown-arrow.invalid-search-in-dropdown-focus-in:hover svg path{fill:#fff}.input-custom-group .input-dropdown-arrow.valid-focus-in svg path{fill:#c5d8f3}.input-custom-group .input-dropdown-arrow.valid-focus-in:hover svg path{fill:#fff}.input-custom-group .input-dropdown-arrow.valid-focus-out svg path{fill:#6692f1}.input-custom-group .input-dropdown-arrow.valid-focus-out:hover svg path{fill:#3074d3}.input-custom-group .input-error{position:absolute;top:100%;right:5px;color:#ef5350;font-size:11px;font-weight:600;line-height:14px;display:inline-block}.input-custom-group .input-error::selection{background-color:#ef535033;color:#ef5350}.input-custom-group .input-password-eye{display:none;width:18px;height:18px;position:absolute;left:6px;top:50%;transform:translateY(-50%);padding-top:0;cursor:pointer;transition:.3s ease-in-out}.input-custom-group .input-password-eye svg{width:18px;height:18px;position:absolute;bottom:0}.input-custom-group .input-password-eye svg path{fill:#919191}.input-custom-group .input-password-eye:after{content:\"\";display:block;height:15px;width:1px;border-radius:3px;background:#91919166;position:absolute;left:24px;top:52%;transform:translateY(-50%)}.input-custom-group .input-password-eye.visible{display:inline-block}.input-custom-group .input-password-eye.inactive svg path{fill:#ccc}.input-custom-group .input-password-eye.inactive:after{background-color:#aaa6}.input-custom-group .input-password-eye.valid-focus-out svg path{fill:#6f9ee0}.input-custom-group .input-password-eye.valid-focus-out:hover svg path{fill:#3074d3}.input-custom-group .input-password-eye.valid-focus-out:after{background-color:#6f9ee066}.input-custom-group .input-password-eye.valid-focus-in{display:inline-block}.input-custom-group .input-password-eye.valid-focus-in svg path{fill:#98b9ea}.input-custom-group .input-password-eye.valid-focus-in:hover svg path{fill:#fff}.input-custom-group .input-password-eye.valid-focus-in:after{background-color:#c5d8f3}.input-custom-group .input-password-eye.invalid-focus-out svg{transition:.3s ease-in-out}.input-custom-group .input-password-eye.invalid-focus-out svg path{fill:#e57373}.input-custom-group .input-password-eye.invalid-focus-out:hover svg path{fill:#ef5350}.input-custom-group .input-password-eye.invalid-focus-out:after{background-color:#e5737366}.input-custom-group .input-password-eye.invalid-focus-in svg{transition:.3s ease-in-out}.input-custom-group .input-password-eye.invalid-focus-in svg path{fill:#ffb0a8}.input-custom-group .input-password-eye.invalid-focus-in:hover svg path{fill:#fff}.input-custom-group .input-password-eye.invalid-focus-in:after{background-color:#f5c7c7}@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.input-custom-group .date_time_holder{display:flex;align-items:center;position:absolute;top:0;width:100%;height:100%;opacity:0;padding:0 6px 0 27px;z-index:20;cursor:text}.input-custom-group .date_time_holder span{position:relative;line-height:14px;display:flex;height:100%;align-items:center;z-index:10}.input-custom-group .date_time_holder span .border-picker{position:absolute;top:0;left:50%;transform:translate(-50%);height:100%;display:flex;align-items:center;justify-content:center;width:0px}.input-custom-group .date_time_holder span::selection{background-color:#fff3;color:#fff}.input-custom-group .date_time_holder span div::selection{background-color:#fff3;color:#fff}.input-custom-group .date_time_holder::selection{background-color:transparent!important;color:#fff}.input-custom-group .date_time_holder span.main{padding:0 2px;outline:none;font-size:14px;z-index:11}.input-custom-group .date_time_holder span.main::selection{z-index:10}.input-custom-group .date_time_holder span.main:first-child{padding-left:4px}.input-custom-group .date_time_holder.focus{opacity:1;padding-left:35px}.input-custom-group .date_time_holder.focus span:nth-child(2){z-index:12;pointer-events:none}.input-custom-group .date_time_holder.focus span:nth-child(3){z-index:13}.input-custom-group .date_time_holder.focus span:nth-child(4){z-index:14;pointer-events:none}.input-custom-group .date_time_holder.focus span:nth-child(5){z-index:15}.input-custom-group .date_time_holder.valid-focus-out-filled{opacity:1}.input-custom-group .date_time_holder.valid-focus-out-filled span,.input-custom-group .date_time_holder.valid-focus-out-filled span .border-picker{color:#2f2f2f!important;-webkit-user-select:none;user-select:none}.input-custom-group .date_time_holder.dark.valid-focus-out-filled{background:#3b73ed33!important}.input-custom-group .date_time_holder.dark.valid-focus-out-filled span,.input-custom-group .date_time_holder.dark.valid-focus-out-filled span .border-picker{color:#dadada!important}.input-custom-group .date_time_holder.focus{background-color:#1d1d1d;color:#fff;transition:.2s ease-in-out}.input-custom-group .date_time_holder.valid-focus-in{opacity:1}.input-custom-group .date_time_holder.valid-focus-in::selection,.input-custom-group .date_time_holder.valid-focus-in div::selection{background-color:#fff3;color:#fff}.input-custom-group .date_time_holder.invalid-focus-out-filled{opacity:1}.input-custom-group .date_time_holder.date_time_holder_bank_card span.main{padding:0 3px}.input-custom-group .placeholder-text{position:absolute;-webkit-user-select:none;user-select:none;pointer-events:none;top:47%;transform:translateY(-50%)}.input-custom-group .placeholder-text svg text{fill:#919191}.input-custom-group .placeholder-text.inactive-filled svg text{fill:#aaa}.input-custom-group .placeholder-text.focus svg text{fill:#919191}.input-custom-group .placeholder-text.valid-focus-in svg text{fill:#c5d8f3}.input-custom-group .placeholder-text.valid-focus-out svg text{fill:#919191}.input-custom-group .placeholder-text.invalid-focus-in svg text{fill:#f5c7c7}.input-custom-group .placeholder-text.invalid-focus-out svg text{fill:#919191}.input-custom-group .input-invalid-danger-mark{position:absolute;right:5px;top:48%;transform:translateY(-50%);line-height:13.3px}.input-custom-group .input-invalid-danger-mark svg{width:13.3px;height:13.3px}.input-custom-group .input-invalid-danger-mark svg path{fill:#e57373}.input-custom-group .password-capslock{position:absolute;right:5px;top:-16px;color:#ffb74d;font-size:11px;font-weight:600;margin:0;padding:0;-webkit-user-select:none!important;user-select:none!important}.input-custom-group .ta-input-commands{display:flex;align-items:center;gap:4px;position:absolute;right:4px}.input-custom-group .ta-input-commands .ta-input-command-first{border-radius:1px;display:block;z-index:20;cursor:pointer}.input-custom-group .ta-input-commands .ta-input-command-first .ta-input-command-svg-first svg{width:18px!important;height:18px!important;overflow:visible;transition:transform .3s}.input-custom-group .ta-input-commands .ta-input-command-first .ta-input-command-svg-first svg path{fill:#1d1d1d}.input-custom-group .ta-input-commands .ta-input-command-first .ta-input-command-svg-first svg rect{transition:transform .3s;transform:scale(1);transform-origin:center;fill:#ccc}.input-custom-group .ta-input-commands .ta-input-command-first .ta-input-command-svg-first:hover svg{overflow:visible}.input-custom-group .ta-input-commands .ta-input-command-first .ta-input-command-svg-first:hover svg rect{transform:scale(1.2);transform-origin:center;transition:transform .3s;fill:#fff}.input-custom-group .ta-input-commands .ta-input-command-second{border-radius:1px;display:block;z-index:20;cursor:pointer}.input-custom-group .ta-input-commands .ta-input-command-second .ta-input-command-svg-second svg{width:18px!important;height:18px!important;overflow:visible;transition:transform .3s}.input-custom-group .ta-input-commands .ta-input-command-second .ta-input-command-svg-second svg path{fill:#1d1d1d}.input-custom-group .ta-input-commands .ta-input-command-second .ta-input-command-svg-second svg rect{transition:transform .3s;transform:scale(1);transform-origin:center;fill:#ccc}.input-custom-group .ta-input-commands .ta-input-command-second .ta-input-command-svg-second:hover svg{overflow:visible}.input-custom-group .ta-input-commands .ta-input-command-second .ta-input-command-svg-second:hover svg rect{transform:scale(1.2);transform-origin:center;transition:transform .3s;fill:#fff}.input-custom-group .ta-input-commands .ta-input-command-third{border-radius:1px;display:block;z-index:20;cursor:pointer}.input-custom-group .ta-input-commands .ta-input-command-third .ta-input-command-svg-third svg{width:18px!important;height:18px!important;overflow:visible;transition:transform .3s}.input-custom-group .ta-input-commands .ta-input-command-third .ta-input-command-svg-third svg path{fill:#1d1d1d}.input-custom-group .ta-input-commands .ta-input-command-third .ta-input-command-svg-third svg rect{transition:transform .3s;transform:scale(1);transform-origin:center;fill:#ccc}.input-custom-group .ta-input-commands .ta-input-command-third .ta-input-command-svg-third:hover svg{overflow:visible}.input-custom-group .ta-input-commands .ta-input-command-third .ta-input-command-svg-third:hover svg rect{transform:scale(1.2);transform-origin:center;transition:transform .3s;fill:#fff}.input-custom-group .ta-input-commands.blue-commands .ta-input-command-svg-first svg rect,.input-custom-group .ta-input-commands.blue-commands .ta-input-command-svg-second svg rect,.input-custom-group .ta-input-commands.blue-commands .ta-input-command-svg-third svg rect{fill:none}.input-custom-group .ta-input-commands.blue-commands .ta-input-command-svg-first svg path,.input-custom-group .ta-input-commands.blue-commands .ta-input-command-svg-second svg path,.input-custom-group .ta-input-commands.blue-commands .ta-input-command-svg-third svg path{fill:#6692f1}.input-custom-group .ta-input-commands.blue-commands .ta-input-command-svg-first:hover svg,.input-custom-group .ta-input-commands.blue-commands .ta-input-command-svg-second:hover svg,.input-custom-group .ta-input-commands.blue-commands .ta-input-command-svg-third:hover svg{overflow:visible}.input-custom-group .ta-input-commands.blue-commands .ta-input-command-svg-first:hover svg rect,.input-custom-group .ta-input-commands.blue-commands .ta-input-command-svg-second:hover svg rect,.input-custom-group .ta-input-commands.blue-commands .ta-input-command-svg-third:hover svg rect{transform:scale(1.2);transform-origin:center;transition:transform .3s;fill:#6692f1}.input-custom-group .ta-input-commands.blue-commands .ta-input-command-svg-first:hover svg path,.input-custom-group .ta-input-commands.blue-commands .ta-input-command-svg-second:hover svg path,.input-custom-group .ta-input-commands.blue-commands .ta-input-command-svg-third:hover svg path{fill:#bed0f9}.input-custom-group .ta-input-commands.blue-commands-focus .ta-input-command-svg-first svg rect,.input-custom-group .ta-input-commands.blue-commands-focus .ta-input-command-svg-second svg rect,.input-custom-group .ta-input-commands.blue-commands-focus .ta-input-command-svg-third svg rect{fill:#ffffffb2}.input-custom-group .ta-input-commands.blue-commands-focus .ta-input-command-svg-first svg path,.input-custom-group .ta-input-commands.blue-commands-focus .ta-input-command-svg-second svg path,.input-custom-group .ta-input-commands.blue-commands-focus .ta-input-command-svg-third svg path{fill:#0b49d1}.input-custom-group .ta-input-commands.blue-commands-focus .ta-input-command-svg-first:hover svg,.input-custom-group .ta-input-commands.blue-commands-focus .ta-input-command-svg-second:hover svg,.input-custom-group .ta-input-commands.blue-commands-focus .ta-input-command-svg-third:hover svg{overflow:visible}.input-custom-group .ta-input-commands.blue-commands-focus .ta-input-command-svg-first:hover svg rect,.input-custom-group .ta-input-commands.blue-commands-focus .ta-input-command-svg-second:hover svg rect,.input-custom-group .ta-input-commands.blue-commands-focus .ta-input-command-svg-third:hover svg rect{transform:scale(1.2);transform-origin:center;transition:transform .3s}.input-custom-group .input-label-counter{position:absolute;display:flex;align-items:center;justify-content:center;width:22px;height:18px;font-size:11px;font-weight:700;color:#424242;background-color:#42424233;border-radius:9px;margin:0;padding-left:.5px;-webkit-user-select:none;user-select:none}.input-custom-group .input-loading-spinner{position:absolute;right:6px;bottom:3px}.input-custom-group .input-pen-container{position:absolute;right:50px;top:46%;transform:translateY(-50%);display:none;z-index:10;cursor:pointer;transition:.3s ease-in-out}.input-custom-group .input-pen-container .input-pen svg{width:18px!important;height:18px!important;overflow:visible}.input-custom-group .input-pen-container .input-pen svg path{fill:#c5d8f3}.input-custom-group .input-pen-container .input-pen svg rect{transition:transform .3s;transform:scale(1);transform-origin:center;fill:#6f9ee0}.input-custom-group .input-pen-container .input-pen:hover svg{overflow:visible}.input-custom-group .input-pen-container .input-pen:hover svg rect{transform:scale(1.2);transform-origin:center;transition:transform .3s;fill:#3074d3}.input-custom-group .dropdown-selected-image{position:absolute;left:6px;top:48%;transform:translateY(-50%);-webkit-user-select:none;user-select:none;pointer-events:none}.input-custom-group .dropdown-selected-image.truck-make svg path{fill:#6c6c6c}.input-custom-group .dropdown-selected-image.trailer-make svg path{fill:#6c6c6c}.input-custom-group .dropdown-selected-image.name-initials-instead-url{width:18px;height:18px;border-radius:50%;object-fit:cover;top:50%;transform:translateY(-50%)}.input-custom-group .dropdown-selected-image.load-broker{height:26px}.input-custom-group .dropdown-selected-image.load-broker svg{height:18px}.input-custom-group .dropdown-selected-image.load-broker.medium svg #Path_33564{fill:#ffb74d}.input-custom-group .dropdown-selected-image.load-broker.low svg #Path_33564{fill:#e57373}.input-custom-group .dropdown-selected-image.semitruck svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.semisleeper svg #Ellipse_9856,.input-custom-group .dropdown-selected-image.semisleeper svg #Ellipse_9857,.input-custom-group .dropdown-selected-image.semisleeper svg #Ellipse_9858,.input-custom-group .dropdown-selected-image.semisleeper svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.boxtruck svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.cargovan svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.towtruck svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.spotter svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.bus svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.reefer svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.dryvan svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.sidekit svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.conestoga svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.dumper svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.container{padding:0!important}.input-custom-group .dropdown-selected-image.container svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.tanker svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.pneumatictanker svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.carhauler svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.carhaulerstinger svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.flatbed svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.low-boy-rgn svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.chassis svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.stepdeck svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.unset-color svg #Ellipse_9856,.input-custom-group .dropdown-selected-image.unset-color svg #Ellipse_9857,.input-custom-group .dropdown-selected-image.unset-color svg #Ellipse_9858,.input-custom-group .dropdown-selected-image.unset-color svg path{fill:#fff6}.input-custom-group .placeholder-icon-right-side{position:absolute;right:4px}.input-custom-group .placeholder-icon-right-side.green svg path{fill:#4db6a2}.input-custom-group .placeholder-icon-right-side.purple svg path{fill:#ba68c8}.input-custom-group .placeholder-icon-right-side.blue svg path{fill:#6f9ee0}.input-custom-group .placeholder-icon-right-side.orange svg path{fill:#f89b2e}.input-custom-group .placeholder-icon-right-side.red svg path{fill:#e66767}.input-custom-group .placeholder-icon-right-side:before{content:\"\";display:block;height:15px;width:1px;border-radius:3px;position:absolute;right:22px;top:55%;transform:translateY(-50%);background-color:#91919166}.input-custom-group .placeholder-icon-right-side.focus:before{background-color:#ccc6}.input-custom-group .placeholder-icon-right-side.valid-focus-out:before{background-color:#6f9ee066}.input-custom-group .placeholder-icon-right-side.valid-focus-in:before{background-color:#c5d8f3}.input-custom-group .placeholder-icon-right-side.invalid-focus-out:before{background-color:#e5737366}.input-custom-group .placeholder-icon-right-side.invalid-focus-in:before{background-color:#f5c7c7}.input-fixed-placehoder-label{color:#919191;position:absolute;right:0;font-size:14px;top:3px}.input-fixed-placehoder-input{padding-right:25px!important}.input-border-radius{border-radius:8px!important}\n"], dependencies: [{ kind: "ngmodule", type: 
+                // Module
+                CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: AngularSvgIconModule }, { kind: "component", type: i2.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }, { kind: "ngmodule", type: NgbModule }, { kind: "pipe", type: 
+                // Pipe
+                InputErrorPipe, name: "inputError" }, { kind: "pipe", type: InputContainerClassPipe, name: "inputContainerClass" }, { kind: "pipe", type: InputClassPipe, name: "inputClass" }, { kind: "pipe", type: LabelClassPipe, name: "labelClass" }, { kind: "pipe", type: ShowClearPipe, name: "showClear" }, { kind: "pipe", type: ShowInvalidDangerMarkPipe, name: "showInvalidDangerMark" }, { kind: "pipe", type: ShowValidCheckPipe, name: "showValidCheck" }, { kind: "pipe", type: InputTypePipe, name: "inputType" }, { kind: "component", type: 
+                // Components
+                CaInputClearComponent, selector: "app-ca-input-clear", inputs: ["inputConfig", "getSuperControl", "isFocusInput", "incorrectValue", "selectedDropdownLabelColor"], outputs: ["clearInputClick"] }, { kind: "component", type: CaInputPasswordComponent, selector: "app-ca-input-password", inputs: ["inputConfig", "getSuperControl", "isFocusInput", "isTouchedInput", "isCapsLockOn", "isTogglePassword"], outputs: ["onTogglePasswordClick"] }, { kind: "component", type: CaInputPlaceholderIconComponent, selector: "app-ca-input-placeholder-icon", inputs: ["inputConfig", "getSuperControl", "isFocusInput", "isTouchedInput", "selectedDropdownLabelColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-ca-input", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        // Module
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        AngularSvgIconModule,
+                        NgbModule,
+                        // Pipe
+                        InputErrorPipe,
+                        InputContainerClassPipe,
+                        InputClassPipe,
+                        LabelClassPipe,
+                        ShowClearPipe,
+                        ShowInvalidDangerMarkPipe,
+                        ShowValidCheckPipe,
+                        InputTypePipe,
+                        TaSvgPipe,
+                        // Components
+                        CaInputClearComponent,
+                        CaAppTooltipV2Component$1,
+                        CaInputPasswordComponent,
+                        CaInputPlaceholderIconComponent,
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], providers: [InputStateService], template: "<div\n  class=\"input-custom-group {{ inputConfig.customClass }}\"\n  [ngClass]=\"\n    getSuperControl\n      | inputContainerClass\n        : isFocusInput\n        : isTouchedInput\n        : inputConfig\n        : getSuperControl?.value\n  \"\n>\n  <input\n    #input\n    [type]=\"inputConfig.type | inputType: isTogglePassword\"\n    [id]=\"inputConfig.id ? inputConfig.id : inputConfig.name\"\n    [name]=\"inputConfig.name\"\n    [disabled]=\"inputConfig.isDisabled\"\n    [autocomplete]=\"inputConfig.autocomplete ? inputConfig.autocomplete : 'off'\"\n    [placeholder]=\"\n      (inputConfig.placeholderInsteadOfLabel &&\n      inputConfig.placeholder &&\n      isFocusInput\n        ? inputConfig.placeholder\n        : '') ||\n      (inputConfig.placeholder && isFocusInput ? inputConfig.placeholder : '')\n    \"\n    [minLength]=\"inputConfig.minLength ? inputConfig.minLength : 0\"\n    [maxLength]=\"inputConfig.maxLength ? inputConfig.maxLength : 999\"\n    [min]=\"inputConfig.min ? inputConfig.min : 0\"\n    [max]=\"inputConfig.max\"\n    [step]=\"inputConfig.step ? inputConfig.step : null\"\n    [readOnly]=\"inputConfig.readOnly\"\n    inputformat=\"dd-mm-yy\"\n    class=\"input-control\n  {{ inputConfig.textTransform }}\n  {{ inputConfig.textAlign }}\n  {{ inputConfig.customClass }}\n  \"\n    [ngClass]=\"\n      getSuperControl\n        | inputClass\n          : isFocusInput\n          : isTouchedInput\n          : inputConfig\n          : input\n          : isVisibleCommands\n          : getSuperControl?.value\n    \"\n    (blur)=\"onBlur($event)\"\n    (focus)=\"onFocus($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (input)=\"onChange($event.target); transformText($event)\"\n    [(ngModel)]=\"input.value\"\n  />\n\n  <!-- Input Label -->\n  <ng-container *ngIf=\"!inputConfig.multiSelectDropdownActive\">\n    <label\n      [for]=\"inputConfig.name\"\n      class=\"input-label {{ inputConfig.customClass }} {{\n        inputConfig.multipleLabel?.customClass\n      }}\"\n      [ngClass]=\"\n        getSuperControl?.value | labelClass: isFocusInput : inputConfig\n      \"\n    >\n      <ng-container *ngIf=\"inputConfig.label\">\n        <span>{{ inputConfig.label }} </span>\n      </ng-container>\n    </label>\n  </ng-container>\n\n  <!-- Input Clear -->\n  <ng-container *ngIf=\"inputConfig | showClear\">\n    <app-ca-input-clear\n      [inputConfig]=\"inputConfig\"\n      [getSuperControl]=\"getSuperControl\"\n      [isFocusInput]=\"isFocusInput\"\n      [incorrectValue]=\"incorrectValue\"\n      [selectedDropdownLabelColor]=\"selectedDropdownLabelColor\"\n      (clearInputClick)=\"clearInput($event)\"\n    >\n    </app-ca-input-clear>\n  </ng-container>\n\n  <!-- Input Invalid Danger Mark -->\n  <ng-container\n    *ngIf=\"\n      inputConfig\n        | showInvalidDangerMark\n          : getSuperControl\n          : isFocusInput\n          : isTouchedInput\n          : getSuperControl?.value\n    \"\n  >\n    <svg-icon\n      class=\"input-invalid-danger-mark  {{ inputConfig.customClass }}\"\n      [src]=\"getSvgPath('dangerSvg')\"\n    >\n    </svg-icon>\n  </ng-container>\n\n  <!-- Input Valid Check -->\n  <ng-container\n    *ngIf=\"\n      getSuperControl\n        | showValidCheck: isFocusInput : inputConfig : getSuperControl?.value\n    \"\n  >\n    <svg-icon\n      class=\"input-required-check {{ inputConfig.customClass }}\"\n      [src]=\"getSvgPath('confirmSvg')\"\n    ></svg-icon>\n  </ng-container>\n\n  <!-- Input Password Caps Lock And Eye -->\n  <ng-container *ngIf=\"inputConfig.type === 'password'\">\n    <app-ca-input-password\n      [inputConfig]=\"inputConfig\"\n      [getSuperControl]=\"getSuperControl\"\n      [isFocusInput]=\"isFocusInput\"\n      [isTouchedInput]=\"isTouchedInput\"\n      [isCapsLockOn]=\"isCapsLockOn\"\n      [isTogglePassword]=\"isTogglePassword\"\n      (onTogglePasswordClick)=\"onTogglePassword($event)\"\n    >\n    </app-ca-input-password>\n  </ng-container>\n\n  <!-- Input Placeholder Icon -->\n  <ng-container *ngIf=\"inputConfig.placeholderIcon\">\n    <app-ca-input-placeholder-icon\n      [inputConfig]=\"inputConfig\"\n      [getSuperControl]=\"getSuperControl\"\n      [isFocusInput]=\"isFocusInput\"\n      [isTouchedInput]=\"isTouchedInput\"\n      [selectedDropdownLabelColor]=\"selectedDropdownLabelColor\"\n    >\n    </app-ca-input-placeholder-icon>\n  </ng-container>\n\n  <!-- Input Error Message -->\n  <ng-container\n    *ngIf=\"\n      !inputConfig.hideErrorMessage &&\n      !(!getSuperControl?.value && isFocusInput) &&\n      (isTouchedInput || getSuperControl?.touched || getSuperControl?.value) &&\n      getSuperControl?.invalid &&\n      !inputConfig.isInvalidSearchInDropdown &&\n      !inputConfig.isDisabled\n    \"\n  >\n    <span class=\"input-error {{ inputConfig.customClass }}\">\n      {{ getSuperControl?.errors | inputError: inputConfig.name }}\n    </span>\n  </ng-container>\n\n  <ng-container *ngIf=\"inputConfig.fixedPlacholder && input.value\">\n    <span class=\"input-fixed-placehoder-label\">\n      {{ inputConfig.fixedPlacholder }}\n    </span>\n  </ng-container>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap\";@import\"/node_modules/bootstrap/dist/css/bootstrap.css\";.ca-font-thin{font-weight:100!important}.ca-font-extra-light{font-weight:200!important}.ca-font-light{font-weight:300!important}.ca-font-regular{font-weight:400!important}.ca-font-medium{font-weight:500!important}.ca-font-semi-bold{font-weight:600!important}.ca-font-bold{font-weight:700!important}.ca-font-extra-bold{font-weight:800!important}.ca-font-black{font-weight:900!important}.table-progress-popover{background-color:unset!important;margin-left:-10px}.table-progress-popover .progress-dropdown{margin-top:-6px;width:260px;height:200px;background:#2f2f2f;border-radius:3px;padding:8px;box-shadow:0 0 4px #00000026;overflow:hidden;animation:progressAnimation .25s ease-in-out}.table-progress-popover .progress-dropdown .progress-header .progress-title{font-size:18px;font-weight:600;color:#dadada}.table-progress-popover .progress-dropdown .progress-header .progress-title span{font-weight:400}.table-progress-popover .progress-dropdown .progress-header .progress-total{font-size:14px;line-height:17px;color:#dadada}.table-progress-popover .progress-dropdown .table-progress-bar-container{width:100%;height:8px;margin-top:6px;border-radius:2px;overflow:hidden}.table-progress-popover .progress-dropdown .table-progress-bar-container .table-progress-bar{height:100%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-dual-info-container .progress-info-container{width:50%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container{margin-top:10px}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-title{margin-bottom:2px;font-size:11px;font-weight:700;line-height:14px;color:#ffffffb2}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-text{font-size:14px;line-height:18px;color:#dadada}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@keyframes progressAnimation{0%{height:0px}to{height:220px}}ngb-popover-window{padding:unset!important;border:unset!important}ngb-popover-window .popover-arrow{display:none!important}ngb-popover-window .popover-body{padding:unset!important}*{margin:0;font-family:Roboto,Helvetica Neue,sans-serif}html{scroll-behavior:auto!important}.gm-style-iw-chr,.gm-style-iw-tc{display:none}.gm-style .gm-style-iw-c{border-radius:0}.gm-style-iw{overflow-y:auto!important;overflow-x:hidden!important}.gm-style-iw>div{overflow:visible!important}.infoWindow{overflow:hidden!important}.gm-style-iw-d,.gm-style-iw.gm-style-iw-c{max-height:350px!important}.input-custom-group{display:block;position:relative}.input-custom-group .location-area-filter,.input-custom-group .location-area-filter.focus,.input-custom-group .location-area-filter.focus:hover{background-color:#424242!important;color:#fff!important}.input-custom-group .location-area-filter.focus::placeholder{background-color:#424242!important}.input-custom-group .location-area-filter:focus{background-color:#424242!important;color:#fff!important}.input-custom-group.datetimeclass{border-radius:2px!important}.input-custom-group.datetimeclass:not(.invalid-focus-out-filled),.input-custom-group.datetimeclass:not(.valid-focus-in),.input-custom-group.datetimeclass:not(.valid-focus-out),.input-custom-group.datetimeclass:not(.valid-focus-out-filled),.input-custom-group.datetimeclass:not(.invalid-focus-in),.input-custom-group.datetimeclass:not(.invalid-focus-out-empty){background-color:#2f2f2f}.input-custom-group.datetimeclass:not(.invalid-focus-out-filled):hover,.input-custom-group.datetimeclass:not(.valid-focus-in):hover,.input-custom-group.datetimeclass:not(.valid-focus-out):hover,.input-custom-group.datetimeclass:not(.valid-focus-out-filled):hover,.input-custom-group.datetimeclass:not(.invalid-focus-in):hover,.input-custom-group.datetimeclass:not(.invalid-focus-out-empty):hover{background-color:#2f2f2f}.input-custom-group.datetimeclass.invalid-empty-focus-out{background-color:#fae3e3}.input-custom-group.datetimeclass.invalid-empty-focus-out:hover{background-color:#f5c7c7}.input-custom-group.datetimeclass.valid-focus-out{background-color:#e2ecf9}.input-custom-group.datetimeclass.valid-focus-out:hover{background-color:#c5d8f3}.input-custom-group.datetimeclass.inactive-empty,.input-custom-group.datetimeclass.inactive-filled{background-color:#f7f7f7}.input-custom-group.datetimeclass.dark:not(.invalid-focus-out-filled),.input-custom-group.datetimeclass.dark:not(.valid-focus-in),.input-custom-group.datetimeclass.dark:not(.valid-focus-out),.input-custom-group.datetimeclass.dark:not(.valid-focus-out-filled),.input-custom-group.datetimeclass.dark:not(.invalid-focus-in),.input-custom-group.datetimeclass.dark:not(.invalid-focus-out-empty){background-color:#424242}.input-custom-group.datetimeclass.dark:not(.invalid-focus-out-filled):hover,.input-custom-group.datetimeclass.dark:not(.valid-focus-in):hover,.input-custom-group.datetimeclass.dark:not(.valid-focus-out):hover,.input-custom-group.datetimeclass.dark:not(.valid-focus-out-filled):hover,.input-custom-group.datetimeclass.dark:not(.invalid-focus-in):hover,.input-custom-group.datetimeclass.dark:not(.invalid-focus-out-empty):hover{background-color:#424242}.input-custom-group.datetimeclass.dark.valid-focus-out-filled{background-color:red}.input-custom-group.datetimeclass.dark.valid-focus-out-filled:hover{background-color:#c5d8f3}.input-custom-group.datetimeclass.dark.inactive-empty,.input-custom-group.datetimeclass.dark.inactive-filled{background-color:#f7f7f7}.input-custom-group.custom-empty-hover:hover{transition:.3s ease-in-out}.input-custom-group.custom-empty-hover:hover .input-dropdown-arrow:hover~.input-control,.input-custom-group.custom-empty-hover:hover .input-icon:hover~.input-control{background-color:#2f2f2f}.input-custom-group.custom-empty-hover:hover .input-dropdown-arrow:before:hover,.input-custom-group.custom-empty-hover:hover .input-dropdown-arrow:after:hover~.input-control,.input-custom-group.custom-empty-hover:hover .input-icon:before:hover,.input-custom-group.custom-empty-hover:hover .input-icon:after:hover~.input-control{background-color:#2f2f2f}.input-custom-group.custom-filled-hover:hover{transition:.3s ease-in-out}.input-custom-group.custom-filled-hover:hover .input-clear{display:inline-block}.input-custom-group.custom-filled-hover:hover .input-dropdown-arrow:hover~.input-control,.input-custom-group.custom-filled-hover:hover .input-icon:hover~.input-control,.input-custom-group.custom-filled-hover:hover .input-clear:hover~.input-control{background-color:#2f2f2f}.input-custom-group.custom-filled-hover:hover .input-dropdown-arrow:before:hover,.input-custom-group.custom-filled-hover:hover .input-dropdown-arrow:after:hover~.input-control,.input-custom-group.custom-filled-hover:hover .input-icon:before:hover,.input-custom-group.custom-filled-hover:hover .input-icon:after:hover~.input-control,.input-custom-group.custom-filled-hover:hover .input-clear:before:hover,.input-custom-group.custom-filled-hover:hover .input-clear:after:hover~.input-control{background-color:#2f2f2f}.input-custom-group.input-remove-trash-can:hover .input-clear{display:inline-block}.input-custom-group.input-remove-trash-can:hover .input-clear:hover~.input-control{background-color:#2f2f2f}.input-custom-group.input-remove-trash-can:hover .placeholder-icon-right-side{opacity:0}.input-custom-group.input-remove-background:hover .input-control{background:transparent!important}.input-custom-group.input-remove-background.input-blue-text{color:red}.input-custom-group.input-remove-background .input-control{background:transparent;color:#2f2f2f;font-weight:400}.input-custom-group.input-remove-background .input-control.focus,.input-custom-group.input-remove-background .input-control.focus:hover{background:#2f2f2f!important;color:#fff!important}.input-custom-group.input-remove-background .input-control.focus::placeholder{color:#fff!important}.input-custom-group.input-remove-background .input-control:focus{background:#2f2f2f!important;color:#fff!important}.input-custom-group.input-remove-background .input-dropdown-arrow svg path{fill:#919191!important}.input-custom-group.input-blue-text .input-control{color:#6692f1}.input-custom-group.invalid-filled-focus-out:hover{transition:.3s ease-in-out}.input-custom-group.invalid-filled-focus-out:hover .input-clear,.input-custom-group.invalid-filled-focus-out:hover .input-pen-container,.input-custom-group.invalid-filled-focus-out:hover .input-invalid-danger-mark,.input-custom-group.invalid-filled-focus-out:hover .input-dropdown-arrow,.input-custom-group.invalid-filled-focus-out:hover .input-icon,.input-custom-group.invalid-filled-focus-out:hover .input-label-counter,.input-custom-group.invalid-filled-focus-out:hover .input-password-eye{display:inline-block}.input-custom-group.invalid-filled-focus-out:hover .input-clear:hover~.input-control,.input-custom-group.invalid-filled-focus-out:hover .input-pen-container:hover~.input-control,.input-custom-group.invalid-filled-focus-out:hover .input-invalid-danger-mark:hover~.input-control,.input-custom-group.invalid-filled-focus-out:hover .input-dropdown-arrow:hover~.input-control,.input-custom-group.invalid-filled-focus-out:hover .input-icon:hover~.input-control,.input-custom-group.invalid-filled-focus-out:hover .input-label-counter:hover~.input-control,.input-custom-group.invalid-filled-focus-out:hover .input-password-eye:hover~.input-control{background-color:#f5c7c7}.input-custom-group.invalid-filled-focus-out:hover .input-clear:before:hover,.input-custom-group.invalid-filled-focus-out:hover .input-clear:after:hover~.input-control,.input-custom-group.invalid-filled-focus-out:hover .input-pen-container:before:hover,.input-custom-group.invalid-filled-focus-out:hover .input-pen-container:after:hover~.input-control,.input-custom-group.invalid-filled-focus-out:hover .input-invalid-danger-mark:before:hover,.input-custom-group.invalid-filled-focus-out:hover .input-invalid-danger-mark:after:hover~.input-control,.input-custom-group.invalid-filled-focus-out:hover .input-dropdown-arrow:before:hover,.input-custom-group.invalid-filled-focus-out:hover .input-dropdown-arrow:after:hover~.input-control,.input-custom-group.invalid-filled-focus-out:hover .input-icon:before:hover,.input-custom-group.invalid-filled-focus-out:hover .input-icon:after:hover~.input-control,.input-custom-group.invalid-filled-focus-out:hover .input-label-counter:before:hover,.input-custom-group.invalid-filled-focus-out:hover .input-label-counter:after:hover~.input-control,.input-custom-group.invalid-filled-focus-out:hover .input-password-eye:before:hover,.input-custom-group.invalid-filled-focus-out:hover .input-password-eye:after:hover~.input-control{background-color:#f5c7c7}.input-custom-group.invalid-filled-focus-out:hover .input-label-counter{display:flex}.input-custom-group.invalid-empty-focus-out:hover{transition:.3s ease-in-out}.input-custom-group.invalid-empty-focus-out:hover .input-clear{display:none}.input-custom-group.invalid-empty-focus-out:hover .input-pen-container,.input-custom-group.invalid-empty-focus-out:hover .input-invalid-danger-mark,.input-custom-group.invalid-empty-focus-out:hover .input-dropdown-arrow,.input-custom-group.invalid-empty-focus-out:hover .input-icon{display:inline-block}.input-custom-group.invalid-empty-focus-out:hover .input-pen-container:hover~.input-control,.input-custom-group.invalid-empty-focus-out:hover .input-invalid-danger-mark:hover~.input-control,.input-custom-group.invalid-empty-focus-out:hover .input-dropdown-arrow:hover~.input-control,.input-custom-group.invalid-empty-focus-out:hover .input-icon:hover~.input-control{background-color:#f5c7c7}.input-custom-group.invalid-empty-focus-out:hover .input-pen-container:before:hover,.input-custom-group.invalid-empty-focus-out:hover .input-pen-container:after:hover~.input-control,.input-custom-group.invalid-empty-focus-out:hover .input-invalid-danger-mark:before:hover,.input-custom-group.invalid-empty-focus-out:hover .input-invalid-danger-mark:after:hover~.input-control,.input-custom-group.invalid-empty-focus-out:hover .input-dropdown-arrow:before:hover,.input-custom-group.invalid-empty-focus-out:hover .input-dropdown-arrow:after:hover~.input-control,.input-custom-group.invalid-empty-focus-out:hover .input-icon:before:hover,.input-custom-group.invalid-empty-focus-out:hover .input-icon:after:hover~.input-control{background-color:#f5c7c7}.input-custom-group.invalid-focus-in:hover{transition:.3s ease-in-out}.input-custom-group.invalid-focus-in:hover .input-password-eye:hover~.input-control{background-color:#e22e22}.input-custom-group.invalid-focus-in:hover .input-password-eye:before:hover,.input-custom-group.invalid-focus-in:hover .input-password-eye:after:hover~.input-control{background-color:#e22e22}.input-custom-group.valid-focus-out:hover{transition:.3s ease-in-out}.input-custom-group.valid-focus-out:hover .input-clear,.input-custom-group.valid-focus-out:hover .input-pen-container,.input-custom-group.valid-focus-out:hover .input-dropdown-arrow,.input-custom-group.valid-focus-out:hover .input-icon,.input-custom-group.valid-focus-out:hover .input-label-counter,.input-custom-group.valid-focus-out:hover .input-password-eye{display:inline-block;transition:.3s ease-in-out}.input-custom-group.valid-focus-out:hover .input-clear:hover~.input-control,.input-custom-group.valid-focus-out:hover .input-pen-container:hover~.input-control,.input-custom-group.valid-focus-out:hover .input-dropdown-arrow:hover~.input-control,.input-custom-group.valid-focus-out:hover .input-icon:hover~.input-control,.input-custom-group.valid-focus-out:hover .input-label-counter:hover~.input-control,.input-custom-group.valid-focus-out:hover .input-password-eye:hover~.input-control{background-color:#c5d8f3}.input-custom-group.valid-focus-out:hover .input-clear:before:hover,.input-custom-group.valid-focus-out:hover .input-clear:after:hover~.input-control,.input-custom-group.valid-focus-out:hover .input-pen-container:before:hover,.input-custom-group.valid-focus-out:hover .input-pen-container:after:hover~.input-control,.input-custom-group.valid-focus-out:hover .input-dropdown-arrow:before:hover,.input-custom-group.valid-focus-out:hover .input-dropdown-arrow:after:hover~.input-control,.input-custom-group.valid-focus-out:hover .input-icon:before:hover,.input-custom-group.valid-focus-out:hover .input-icon:after:hover~.input-control,.input-custom-group.valid-focus-out:hover .input-label-counter:before:hover,.input-custom-group.valid-focus-out:hover .input-label-counter:after:hover~.input-control,.input-custom-group.valid-focus-out:hover .input-password-eye:before:hover,.input-custom-group.valid-focus-out:hover .input-password-eye:after:hover~.input-control{background-color:#c5d8f3}.input-custom-group.valid-focus-out:hover .input-label-counter{display:flex}.input-custom-group.valid-focus-out:hover .input-required-check{display:none}.input-custom-group.valid-focus-in:hover{transition:.3s ease-in-out}.input-custom-group.valid-focus-in:hover .trash-can-svg:hover~.input-control,.input-custom-group.valid-focus-in:hover .input-password-eye:hover~.input-control{background-color:#255bb9}.input-custom-group.valid-focus-in:hover .trash-can-svg:before:hover,.input-custom-group.valid-focus-in:hover .trash-can-svg:after:hover~.input-control,.input-custom-group.valid-focus-in:hover .input-password-eye:before:hover,.input-custom-group.valid-focus-in:hover .input-password-eye:after:hover~.input-control{background-color:#255bb9}.input-custom-group.inactive-filled:hover .input-clear,.input-custom-group.inactive-filled:hover .trash-can-svg,.input-custom-group.inactive-filled:hover .input-pen-container,.input-custom-group.inactive-filled:hover .input-dropdown-arrow,.input-custom-group.inactive-filled:hover .input-icon,.input-custom-group.inactive-filled:hover .input-password-eye{display:inline-block;transition:.3s ease-in-out}.input-custom-group.inactive-filled:hover .input-clear:hover~.input-control,.input-custom-group.inactive-filled:hover .trash-can-svg:hover~.input-control,.input-custom-group.inactive-filled:hover .input-pen-container:hover~.input-control,.input-custom-group.inactive-filled:hover .input-dropdown-arrow:hover~.input-control,.input-custom-group.inactive-filled:hover .input-icon:hover~.input-control,.input-custom-group.inactive-filled:hover .input-password-eye:hover~.input-control{background-color:#f7f7f7}.input-custom-group.inactive-filled:hover .input-clear:before:hover,.input-custom-group.inactive-filled:hover .input-clear:after:hover~.input-control,.input-custom-group.inactive-filled:hover .trash-can-svg:before:hover,.input-custom-group.inactive-filled:hover .trash-can-svg:after:hover~.input-control,.input-custom-group.inactive-filled:hover .input-pen-container:before:hover,.input-custom-group.inactive-filled:hover .input-pen-container:after:hover~.input-control,.input-custom-group.inactive-filled:hover .input-dropdown-arrow:before:hover,.input-custom-group.inactive-filled:hover .input-dropdown-arrow:after:hover~.input-control,.input-custom-group.inactive-filled:hover .input-icon:before:hover,.input-custom-group.inactive-filled:hover .input-icon:after:hover~.input-control,.input-custom-group.inactive-filled:hover .input-password-eye:before:hover,.input-custom-group.inactive-filled:hover .input-password-eye:after:hover~.input-control{background-color:#f7f7f7}.input-custom-group.inactive-empty:hover .input-clear,.input-custom-group.inactive-empty:hover .input-pen-container,.input-custom-group.inactive-empty:hover .input-dropdown-arrow,.input-custom-group.inactive-empty:hover .input-icon,.input-custom-group.inactive-empty:hover .input-password-eye{display:inline-block;transition:.3s ease-in-out}.input-custom-group.inactive-empty:hover .input-clear:hover~.input-control,.input-custom-group.inactive-empty:hover .input-pen-container:hover~.input-control,.input-custom-group.inactive-empty:hover .input-dropdown-arrow:hover~.input-control,.input-custom-group.inactive-empty:hover .input-icon:hover~.input-control,.input-custom-group.inactive-empty:hover .input-password-eye:hover~.input-control{background-color:#f7f7f7}.input-custom-group.inactive-empty:hover .input-clear:before:hover,.input-custom-group.inactive-empty:hover .input-clear:after:hover~.input-control,.input-custom-group.inactive-empty:hover .input-pen-container:before:hover,.input-custom-group.inactive-empty:hover .input-pen-container:after:hover~.input-control,.input-custom-group.inactive-empty:hover .input-dropdown-arrow:before:hover,.input-custom-group.inactive-empty:hover .input-dropdown-arrow:after:hover~.input-control,.input-custom-group.inactive-empty:hover .input-icon:before:hover,.input-custom-group.inactive-empty:hover .input-icon:after:hover~.input-control,.input-custom-group.inactive-empty:hover .input-password-eye:before:hover,.input-custom-group.inactive-empty:hover .input-password-eye:after:hover~.input-control{background-color:#f7f7f7}.input-custom-group .input-label{position:absolute;top:4px;left:6px;font-size:14px;line-height:18px;-webkit-user-select:none;user-select:none;pointer-events:none;transition:.3s ease-in-out}.input-custom-group .input-label span::selection{background-color:#2f2f2f33!important;color:#2f2f2f!important}.input-custom-group .input-label.required:after{content:\" *\";color:#ef5350}.input-custom-group .input-label.inactive-empty{color:#919191!important}.input-custom-group .input-label.up-label{top:-17px;left:6px;font-size:11px;font-weight:600}.input-custom-group .input-label.in-label{top:4px!important;font-size:11px!important;font-weight:600!important;transition:none!important}.input-custom-group .input-label.in-label.in-label-focus{color:#fff!important}.input-custom-group .input-label.no-transition{transition:none!important}.input-custom-group .input-label.input-placeholderIcon-on{left:37px}.input-custom-group .input-label.input-placeholderIcon-on.up-label{left:36px}.input-custom-group .input-label.hidden{display:none!important}.input-custom-group .input-label.load-shipper .load-shipper{display:grid;grid-template-columns:455px 120px;align-items:center}.input-custom-group .input-label.load-shipper .load-shipper span:nth-child(2){text-align:right;color:#6c6c6c;font-size:11px;font-weight:600}.input-custom-group .input-label.load-shipper.required:after{position:absolute;right:0;left:60px;top:0}.input-custom-group .input-label.load-shipper.multiple-labels.required:after,.input-custom-group .input-label.load-shipper.up-label.required:after{transition-delay:.1s;transition-timing-function:ease-in;position:absolute;right:0;left:48px;top:0}.input-custom-group .input-label .load-dispatches-ttd{display:grid;grid-template-columns:92px 89px 182px 53px;align-items:center;-moz-column-gap:65px;grid-column-gap:65px;column-gap:65px}.input-custom-group .input-label .load-dispatches-ttd span:nth-child(4){color:#2f2f2f!important;opacity:0;top:-19px;font-size:11px;font-weight:600}.input-custom-group .input-label .load-dispatches-ttd.multiple-labels-position-on-focus span:nth-child(4){transition-delay:.3s;color:#6c6c6c!important;opacity:1;top:-19px}.input-custom-group .input-label.dropdown-double-column>*{display:grid;grid-template-columns:118px 1fr;align-items:center;-moz-column-gap:4px;grid-column-gap:4px;column-gap:4px}.input-custom-group .input-label.dropdown-triple-column>*{display:grid;grid-template-columns:220px 138px 220px;align-items:center;-moz-column-gap:4px;grid-column-gap:4px;column-gap:4px}.input-custom-group .input-label.load-broker .load-broker{display:grid;align-items:center;grid-template-columns:277px 82px 69px}.input-custom-group .input-label.load-broker .load-broker span:nth-child(2),.input-custom-group .input-label.load-broker .load-broker span:nth-child(3){color:#2f2f2f!important;opacity:0;top:-19px;font-size:11px;font-weight:600}.input-custom-group .input-label.load-broker .load-broker.multiple-labels-position-on-focus span:nth-child(2),.input-custom-group .input-label.load-broker .load-broker.multiple-labels-position-on-focus span:nth-child(3){transition-delay:.3s;color:#919191!important;opacity:1;top:-19px;text-align:right}.input-custom-group .input-label.load-broker.required:after{position:absolute;left:51px;right:0;top:-1px}.input-custom-group .input-label.load-broker.multiple-labels.required:after,.input-custom-group .input-label.load-broker.up-label.required:after{transition-delay:.1s;transition-timing-function:ease-in;position:absolute;left:44px;right:0;top:-1px}.input-custom-group .input-label .load-broker-contact,.input-custom-group .input-label .load-shipper-contact{display:grid;grid-template-columns:235px 38px;align-items:center;grid-column-gap:10px;column-gap:10px;transition:.3 ease-in-out}.input-custom-group .input-label .load-broker-contact span:nth-child(2),.input-custom-group .input-label .load-shipper-contact span:nth-child(2){color:#2f2f2f!important;opacity:0;top:-19px;font-size:11px;font-weight:600}.input-custom-group .input-label .load-broker-contact.multiple-labels-position-on-focus span:nth-child(2),.input-custom-group .input-label .load-shipper-contact.multiple-labels-position-on-focus span:nth-child(2){transition-delay:.3s;opacity:1;top:-19px;color:#6c6c6c!important}.input-custom-group .input-label.load-shipper-contact .load-shipper-contact{grid-template-columns:295px 38px}.input-custom-group .input-label.regular{font-weight:400}.input-custom-group .input-label.datetimeclass.dark{color:#fff}.input-custom-group .hide-loads .load-broker{grid-template-columns:365px 92px}.input-custom-group .input-control{width:100%;height:26px;border:none;outline:none;border-radius:2px;padding:4px 6px;font-size:14px;font-weight:400;background-color:#2f2f2f;color:#2f2f2f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.input-custom-group .input-control::selection{background-color:#2f2f2f33;color:#2f2f2f}.input-custom-group .input-control.center{text-align:center}.input-custom-group .input-control.uppercase{text-transform:uppercase}.input-custom-group .input-control.lowercase{text-transform:lowercase}.input-custom-group .input-control:hover{background-color:#2f2f2f}.input-custom-group .input-control:focus{background-color:#1d1d1d;color:#fff;transition:.2s ease-in-out}.input-custom-group .input-control:focus::placeholder{color:#fff6}.input-custom-group .input-control:focus::selection{background-color:#fff3;color:#fff}.input-custom-group .input-control.valid-focus-in,.input-custom-group .input-control.dropdown-placeholder-active,.input-custom-group .input-control.multiSelect-dropdown-active{background-color:#255bb9;color:#fff}.input-custom-group .input-control.valid-focus-in::placeholder,.input-custom-group .input-control.dropdown-placeholder-active::placeholder,.input-custom-group .input-control.multiSelect-dropdown-active::placeholder{color:#6f9ee0}.input-custom-group .input-control.valid-focus-in::selection,.input-custom-group .input-control.dropdown-placeholder-active::selection,.input-custom-group .input-control.multiSelect-dropdown-active::selection{background-color:#fff3;color:#fff}.input-custom-group .input-control.valid-focus-out-filled{background-color:#e2ecf9;color:#2f2f2f}.input-custom-group .input-control.valid-focus-out-filled.input-dropdown-table{background-color:#fff}.input-custom-group .input-control.valid-focus-out-filled::selection{background-color:#2f2f2f33;color:#2f2f2f}.input-custom-group .input-control.valid-focus-out-filled:hover{background-color:#c5d8f3}.input-custom-group .input-control.invalid-focus-in,.input-custom-group .input-control.invalid-search-in-dropdown-focus-in{background-color:#e22e22;color:#fff}.input-custom-group .input-control.invalid-focus-in::selection,.input-custom-group .input-control.invalid-search-in-dropdown-focus-in::selection{background-color:#fff3;color:#fff}.input-custom-group .input-control.invalid-focus-out-filled,.input-custom-group .input-control.invalid-focus-out-empty{background-color:#fae3e3;color:#2f2f2f}.input-custom-group .input-control.invalid-focus-out-filled::selection,.input-custom-group .input-control.invalid-focus-out-empty::selection{background-color:#2f2f2f33;color:#2f2f2f}.input-custom-group .input-control.invalid-focus-out-filled:hover,.input-custom-group .input-control.invalid-focus-out-empty:hover{background-color:#f5c7c7}.input-custom-group .input-control.inactive-empty{background-color:#f7f7f7;-webkit-user-select:none;user-select:none;pointer-events:none}.input-custom-group .input-control.inactive-filled{background-color:#f7f7f7;color:#2f2f2f;-webkit-user-select:none;user-select:none;pointer-events:none}.input-custom-group .input-control.inactive-filled::selection{background-color:#2f2f2f33;color:#2f2f2f}.input-custom-group .input-control.datetimeclass:not(.inactive-filled){letter-spacing:1px;pointer-events:none;opacity:0}.input-custom-group .input-control.has-placeholderIcon{padding-left:37px}.input-custom-group .input-control.dropdown-input-image-truck{padding-left:63px}.input-custom-group .input-control.dropdown-input-image-truck-focus::placeholder{padding-left:63px}.input-custom-group .input-control.dropdown-input-image-trailer{padding-left:68px}.input-custom-group .input-control.dropdown-input-image-trailer-focus::placeholder{padding-left:68px}.input-custom-group .input-control.dropdown-input-image-color{padding-left:29px}.input-custom-group .input-control.dropdown-input-image-user{padding-left:30px}.input-custom-group .input-control.dropdown-input-image-pm{padding-left:37px}.input-custom-group .input-control.dropdown-input-image-without-text-transparent,.input-custom-group .input-control.multiple-input-values{color:transparent}.input-custom-group .input-control.input-32-font-20{font-weight:700;font-size:20px}.input-custom-group .input-control.details-pages{height:32px;background:#1d1d1d;color:#fff6}.input-custom-group .input-control.details-pages .input-dropdown-arrow:hover,.input-custom-group .input-control.details-pages:hover{background:#1d1d1d}.input-custom-group .input-control.details-pages::placeholder{color:#fff6}.input-custom-group .input-control.disable-select-on-focus-out::selection{background-color:transparent}.input-custom-group .input-control.hide-placeholder-in-multiple-placeholder-input::placeholder{opacity:0;color:transparent}.input-custom-group .input-control.multiple-input-placeholder{pointer-events:none;-webkit-user-select:none;user-select:none}.input-custom-group .input-control.load-dispatches-ttd,.input-custom-group .input-control.load-broker,.input-custom-group .input-control.load-shipper,.input-custom-group .input-control.load-shipper-contact{position:absolute;bottom:1.5px;background-color:transparent;display:grid;align-items:center}.input-custom-group .input-control.load-dispatches-ttd span,.input-custom-group .input-control.load-broker span,.input-custom-group .input-control.load-shipper span,.input-custom-group .input-control.load-shipper-contact span{-webkit-user-select:none;user-select:none}.input-custom-group .input-control.double-text-dropdown{position:absolute;top:50%;transform:translateY(-48%);background-color:transparent;display:flex;align-items:center;justify-content:space-between;padding-right:26px}.input-custom-group .input-control.double-text-dropdown span:last-child .multiple-input-text{color:#919191;font-size:11px;font-weight:400}.input-custom-group .input-control.double-text-dropdown span:last-child .multiple-input-text.focusable-text{color:#6f9ee0;font-size:11px;font-weight:400}.input-custom-group .input-control.double-text-dropdown span.focusable-text{color:#6f9ee0}.input-custom-group .input-control.load-dispatches-ttd{grid-template-columns:repeat(2,156px) 150px 122px;padding-top:3px}.input-custom-group .input-control.load-dispatches-ttd svg{height:16px;width:44px}.input-custom-group .input-control.load-dispatches-ttd svg path{fill:#919191}.input-custom-group .input-control.load-dispatches-ttd span:nth-child(1) .multiple-input-text,.input-custom-group .input-control.load-dispatches-ttd span:nth-child(2) .multiple-input-text{max-width:70px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.input-custom-group .input-control.load-dispatches-ttd span:nth-child(3) .multiple-input-text{max-width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.input-custom-group .input-control.load-dispatches-ttd span:last-child{justify-content:flex-end}.input-custom-group .input-control.load-dispatches-ttd span:last-child .multiple-input-text{color:#919191!important;font-size:11px;font-weight:400;line-height:24px}.input-custom-group .input-control.load-dispatches-ttd span:last-child .multiple-input-text.focusable-text{color:#6f9ee0;font-size:11px;font-weight:400}.input-custom-group .input-control.load-dispatches-ttd span.focusable-text{color:#6f9ee0}.input-custom-group .input-control.load-dispatches-ttd span span{line-height:23px;position:relative}.input-custom-group .input-control.load-dispatches-ttd .focusable-svg svg #Ellipse_9856,.input-custom-group .input-control.load-dispatches-ttd .focusable-svg svg #Ellipse_9857,.input-custom-group .input-control.load-dispatches-ttd .focusable-svg svg #Ellipse_9858,.input-custom-group .input-control.load-dispatches-ttd .focusable-svg svg path{fill:#6f9ee0}.input-custom-group .input-control.load-dispatches-ttd .focusable-image{opacity:.6}.input-custom-group .input-control.load-dispatches-ttd .trailerContainer{width:max-content!important;padding:0!important;margin:0!important}.input-custom-group .input-control.load-broker{display:grid;grid-template-columns:229px 115px 48px;align-items:center;height:24px}.input-custom-group .input-control.load-broker span:nth-child(1){white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.input-custom-group .input-control.load-broker span:nth-child(2),.input-custom-group .input-control.load-broker span:nth-child(3){justify-content:flex-end}.input-custom-group .input-control.load-broker span:nth-child(3){position:relative;bottom:1px}.input-custom-group .input-control.load-broker span:nth-child(3) .multiple-input-text.counter{max-width:max-content;height:18px;border-radius:30px;text-align:center;font-size:11px;font-weight:400;color:#919191;background-color:#91919133;padding:1px 6px}.input-custom-group .input-control.load-broker span:nth-child(3) .multiple-input-text.counter.counter-focus{color:#6f9ee0;background-color:#6f9ee033}.input-custom-group .input-control.load-broker span:nth-child(3) .multiple-input-text.counter.counter-one{max-width:none!important;width:19px!important}.input-custom-group .input-control.load-broker-contact,.input-custom-group .input-control.load-shipper-contact{position:absolute;top:50%;transform:translateY(-50%);background-color:transparent!important;display:grid;grid-template-columns:165px 94px;align-items:center;grid-column-gap:20px;column-gap:20px;-webkit-user-select:none;user-select:none;height:25px;padding-right:35px}.input-custom-group .input-control.load-broker-contact span,.input-custom-group .input-control.load-shipper-contact span{overflow:hidden;-webkit-user-select:none;user-select:none}.input-custom-group .input-control.load-broker-contact span span,.input-custom-group .input-control.load-shipper-contact span span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.input-custom-group .input-control.load-broker-contact span:nth-child(2),.input-custom-group .input-control.load-shipper-contact span:nth-child(2){justify-self:flex-end;font-size:11px;font-weight:400;line-height:24px}.input-custom-group .input-control.load-broker-contact span:nth-child(2) span,.input-custom-group .input-control.load-shipper-contact span:nth-child(2) span{color:#919191!important}.input-custom-group .input-control.load-shipper-contact{grid-template-columns:283px 38px}.input-custom-group .input-control.load-shipper{grid-template-columns:394px 180px;column-gap:2px;padding-right:25px;-webkit-user-select:none;user-select:none;height:25px}.input-custom-group .input-control.load-shipper span:nth-child(2),.input-custom-group .input-control.load-shipper span:nth-child(3){justify-content:flex-end;font-size:11px;color:#919191!important;font-weight:400}.input-custom-group .input-control.load-shipper span:nth-child(2) span{color:#919191!important}.input-custom-group .input-control.load-shipper span:nth-child(2) span.focusable-text{color:#6f9ee0}.input-custom-group .input-control.load-shipper span:nth-child(3) .multiple-input-text.counter{max-width:max-content;height:18px;border-radius:30px;text-align:center;font-size:11px;font-weight:400;color:#919191;background-color:#91919133;padding:1px 6px;position:relative;bottom:1px}.input-custom-group .input-control.load-shipper span:nth-child(3) .multiple-input-text.counter.counter-focus{color:#6f9ee0;background-color:#6f9ee033}.input-custom-group .input-control.load-shipper span:nth-child(3) .multiple-input-text.counter.counter-one{max-width:none!important;width:19px!important}.input-custom-group .input-control.load-shipper span span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.input-custom-group .input-control.cursor-on-right-side{text-align:right;padding-right:32px}.input-custom-group .input-control.merge-dropdown-body-with-input::placeholder{color:#fff}.input-custom-group .input-control.input-commands{background-color:#1d1d1d!important;color:#fff!important}.input-custom-group .input-control.input-commands.blue-commands{background-color:#0b49d1!important}.input-custom-group .input-control.dropdown-label-active{background-color:#1d1d1d!important;color:#fff!important}.input-custom-group .input-control.dispatch-dropdown{background-color:#2f2f2f!important}.input-custom-group input[type=number]::-webkit-inner-spin-button,.input-custom-group input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0!important}.input-custom-group input[type=number]::-webkit-inner-spin-button:hover,.input-custom-group input[type=number]::-webkit-outer-spin-button:hover,.input-custom-group input[type=number]::-webkit-inner-spin-button:focus,.input-custom-group input[type=number]::-webkit-outer-spin-button:focus{appearance:none;margin:0!important}.input-custom-group input[type=number]{-moz-appearance:textfield!important}.input-custom-group input[type=number]:hover,.input-custom-group input[type=number]:focus{-moz-appearance:textfield!important}.input-custom-group .load-dispatches-ttd-owner{position:absolute;left:13px;bottom:7px;width:10px;height:10px}.input-custom-group .load-dispatches-ttd-owner svg{width:10px!important;height:10px!important}.input-custom-group .input-required-check{position:absolute;right:6px;width:14px;height:10px;display:inline-block;-webkit-user-select:none;user-select:none}.input-custom-group .input-required-check svg path{fill:#6f9ee0}.input-custom-group .input-clear{position:absolute;right:4px;top:47%;transform:translateY(-50%);border-radius:1px;display:none;z-index:10;cursor:pointer;transition:.3s ease-in-out}.input-custom-group .input-clear .input-clear-x svg{width:18px!important;height:18px!important;overflow:visible}.input-custom-group .input-clear .input-clear-x svg path{fill:#2f2f2f}.input-custom-group .input-clear .input-clear-x svg rect{fill:#919191;transition:transform .3s;transform:scale(1);transform-origin:center}.input-custom-group .input-clear .input-clear-x:hover svg{overflow:visible}.input-custom-group .input-clear .input-clear-x:hover svg rect{transform:scale(1.2);transform-origin:center;transition:transform .3s;fill:#424242}.input-custom-group .input-clear.datetimeclass{z-index:22!important}.input-custom-group .input-clear.focus{display:inline-block}.input-custom-group .input-clear.focus .input-clear-x svg path{fill:#1d1d1d}.input-custom-group .input-clear.focus .input-clear-x svg rect{fill:#aaa}.input-custom-group .input-clear.focus .input-clear-x:hover svg rect{fill:#fff}.input-custom-group .input-clear.valid-focus-in{display:inline-block}.input-custom-group .input-clear.valid-focus-in .input-clear-x svg path{fill:#255bb9}.input-custom-group .input-clear.valid-focus-in .input-clear-x svg rect{fill:#c5d8f3}.input-custom-group .input-clear.valid-focus-in .input-clear-x:hover svg rect{fill:#fff}.input-custom-group .input-clear.valid-focus-out .input-clear-x svg path{fill:#c5d8f3}.input-custom-group .input-clear.valid-focus-out .input-clear-x svg rect{fill:#6f9ee0}.input-custom-group .input-clear.valid-focus-out .input-clear-x:hover svg rect{fill:#3074d3}.input-custom-group .input-clear.invalid-focus-in{display:inline-block}.input-custom-group .input-clear.invalid-focus-in .input-clear-x svg path{fill:#e22e22}.input-custom-group .input-clear.invalid-focus-in .input-clear-x svg rect{fill:#f5c7c7}.input-custom-group .input-clear.invalid-focus-in .input-clear-x:hover svg rect{fill:#fff}.input-custom-group .input-clear.invalid-focus-out .input-clear-x svg path{fill:#f5c7c7}.input-custom-group .input-clear.invalid-focus-out .input-clear-x svg rect{fill:#e57373}.input-custom-group .input-clear.invalid-focus-out .input-clear-x:hover svg rect{fill:#ef5350}.input-custom-group .input-clear.incorrect-input{display:none}.input-custom-group .input-clear.incorrect-input .input-clear-x svg path{fill:#ef5350!important}.input-custom-group .input-clear.incorrect-input .input-clear-x svg rect{fill:transparent!important}.input-custom-group .input-clear.incorrect-input .input-clear-x:hover{display:inline-block}.input-custom-group .input-clear.incorrect-input .input-clear-x:hover svg path{fill:#2f2f2f!important}.input-custom-group .input-clear.incorrect-input .input-clear-x:hover svg rect{fill:#ef5350!important}.input-custom-group .input-clear.incorrect-input-on{display:inline-block}.input-custom-group .input-clear.incorrect-input-on .input-clear-x svg path{fill:#2f2f2f!important}.input-custom-group .input-clear.incorrect-input-on .input-clear-x svg rect{fill:#e57373!important}.input-custom-group .input-clear.incorrect-input-on .input-clear-x:hover svg path{fill:#2f2f2f!important}.input-custom-group .input-clear.incorrect-input-on .input-clear-x:hover svg rect{fill:#ef5350!important}.input-custom-group .input-clear.dropdown-on{right:27px!important;top:50%;transform:translateY(-50%)}.input-custom-group .input-clear.dropdown-on svg-icon{display:flex}.input-custom-group .input-clear.hidden{display:none}.input-custom-group .input-clear.trash-can-svg .input-clear-x svg{width:20px!important;height:20px!important;position:relative;left:1px}.input-custom-group .input-clear.trash-can-svg .input-clear-x svg path{fill:#aaa}.input-custom-group .input-clear.trash-can-svg .input-clear-x svg rect{fill:#aaa}.input-custom-group .input-clear.trash-can-svg .input-clear-x:hover svg path{fill:#919191}.input-custom-group .input-clear.trash-can-svg .input-clear-x:hover svg rect{fill:#919191}.input-custom-group .input-clear.trash-can-svg:before{content:\"\";display:block;height:16px;width:1px;border-radius:3px;background-color:#91919166;position:absolute;right:22px;top:56%;transform:translateY(-50%)}.input-custom-group .input-clear.trash-can-svg.valid-focus-in .input-clear-x svg path{fill:#c5d8f3}.input-custom-group .input-clear.trash-can-svg.valid-focus-in .input-clear-x svg rect{fill:#c5d8f3}.input-custom-group .input-clear.trash-can-svg.valid-focus-in .input-clear-x:hover svg path{fill:#fff}.input-custom-group .input-clear.trash-can-svg.valid-focus-in .input-clear-x:hover svg rect{fill:#fff}.input-custom-group .input-clear.trash-can-svg.valid-focus-in:before{background-color:#c5d8f3}.input-custom-group .input-clear.trash-can-svg.valid-focus-out .input-clear-x svg path{fill:#6f9ee0}.input-custom-group .input-clear.trash-can-svg.valid-focus-out .input-clear-x svg rect{fill:#6f9ee0}.input-custom-group .input-clear.trash-can-svg.valid-focus-out .input-clear-x:hover svg path{fill:#3074d3}.input-custom-group .input-clear.trash-can-svg.valid-focus-out .input-clear-x:hover svg rect{fill:#3074d3}.input-custom-group .input-clear.trash-can-svg.valid-focus-out:before{background-color:#6f9ee066}.input-custom-group .input-clear-dispatch{position:absolute;right:0;top:47%;display:flex;justify-content:center;align-items:center;width:26px;height:26px;transform:translateY(-50%);border-radius:1px;z-index:10;cursor:pointer;transition:.3s ease-in-out}.input-custom-group .input-clear-dispatch svg-icon svg{display:flex;width:12px!important;height:12px!important}.input-custom-group .input-clear-dispatch svg-icon svg path{fill:#aaa}.input-custom-group .input-clear-dispatch:hover{background-color:#1d1d1d}.input-custom-group .input-clear-dispatch:hover svg-icon svg path{fill:#2f2f2f}.input-custom-group .input-icon{position:absolute;left:6px;top:47%;transform:translateY(-50%);z-index:10;-webkit-user-select:none;user-select:none;transition:.3s ease-in-out}.input-custom-group .input-icon svg-icon svg{width:18px;height:18px}.input-custom-group .input-icon.datetimeclass{z-index:21}.input-custom-group .input-icon.default-svg-color svg path{fill:#919191}.input-custom-group .input-icon.cursor-pointer{cursor:pointer}.input-custom-group .input-icon:after{content:\"\";display:block;height:15px;width:1px;border-radius:3px;background:#91919166;position:absolute;left:21px;top:55%;transform:translateY(-50%)}.input-custom-group .input-icon.focus svg path{fill:#ccc}.input-custom-group .input-icon.focus text{fill:#ccc}.input-custom-group .input-icon.focus:after{background:#ccc6}.input-custom-group .input-icon.valid-focus-in svg path{fill:#98b9ea}.input-custom-group .input-icon.valid-focus-in text{fill:#98b9ea}.input-custom-group .input-icon.valid-focus-in:after{background:#c5d8f3}.input-custom-group .input-icon.valid-focus-out svg path{fill:#6692f1}.input-custom-group .input-icon.valid-focus-out text{fill:#6f9ee0}.input-custom-group .input-icon.valid-focus-out:after{background-color:#6f9ee066}.input-custom-group .input-icon.valid-focus-out-dropdown-label:after{background-color:#6f9ee066}.input-custom-group .input-icon.invalid-focus-in svg path{fill:#ffb0a8}.input-custom-group .input-icon.invalid-focus-in text{fill:#ffb0a8}.input-custom-group .input-icon.invalid-focus-in:after{background-color:#f5c7c7}.input-custom-group .input-icon.invalid-focus-out svg path{fill:#e57373}.input-custom-group .input-icon.invalid-focus-out text{fill:#e57373}.input-custom-group .input-icon.invalid-focus-out:after{background:#e5737366}.input-custom-group .input-icon.inactive-empty svg path{fill:#ccc}.input-custom-group .input-icon.inactive-filled svg path{fill:#aaa}.input-custom-group .input-icon.inactive-filled:after{background-color:#aaa6}.input-custom-group .input-icon.discolor-placeholder svg path{fill:#919191}.input-custom-group .input-icon.load-adjusted-rate svg path{fill:#ffa726}.input-custom-group .input-icon.load-advance-rate svg path{fill:#4db6a2}.input-custom-group .input-icon.hidden{display:none!important}.input-custom-group .input-dropdown-arrow{display:inline-block;position:absolute;right:6px;top:50%;transform:translateY(-50%);width:14px;height:14px;line-height:18px;-webkit-user-select:none;user-select:none;z-index:10;cursor:pointer}.input-custom-group .input-dropdown-arrow svg{display:flex;width:100%;transform:rotate(0);transition:.3s ease-in-out}.input-custom-group .input-dropdown-arrow svg path{fill:#919191}.input-custom-group .input-dropdown-arrow:hover svg path{fill:#424242}.input-custom-group .input-dropdown-arrow.datetimeclass{z-index:22!important}.input-custom-group .input-dropdown-arrow.focus svg{transform:rotate(180deg);transition:.3s ease-in-out}.input-custom-group .input-dropdown-arrow.focus svg path{fill:#ccc}.input-custom-group .input-dropdown-arrow.focus:hover svg path{fill:#fff}.input-custom-group .input-dropdown-arrow.invalid-focus-out svg path{fill:#e57373}.input-custom-group .input-dropdown-arrow.invalid-focus-out:hover svg path{fill:#ef5350}.input-custom-group .input-dropdown-arrow.invalid-focus-in svg path,.input-custom-group .input-dropdown-arrow.invalid-search-in-dropdown-focus-in svg path{fill:#f5c7c7}.input-custom-group .input-dropdown-arrow.invalid-focus-in:hover svg path,.input-custom-group .input-dropdown-arrow.invalid-search-in-dropdown-focus-in:hover svg path{fill:#fff}.input-custom-group .input-dropdown-arrow.valid-focus-in svg path{fill:#c5d8f3}.input-custom-group .input-dropdown-arrow.valid-focus-in:hover svg path{fill:#fff}.input-custom-group .input-dropdown-arrow.valid-focus-out svg path{fill:#6692f1}.input-custom-group .input-dropdown-arrow.valid-focus-out:hover svg path{fill:#3074d3}.input-custom-group .input-error{position:absolute;top:100%;right:5px;color:#ef5350;font-size:11px;font-weight:600;line-height:14px;display:inline-block}.input-custom-group .input-error::selection{background-color:#ef535033;color:#ef5350}.input-custom-group .input-password-eye{display:none;width:18px;height:18px;position:absolute;left:6px;top:50%;transform:translateY(-50%);padding-top:0;cursor:pointer;transition:.3s ease-in-out}.input-custom-group .input-password-eye svg{width:18px;height:18px;position:absolute;bottom:0}.input-custom-group .input-password-eye svg path{fill:#919191}.input-custom-group .input-password-eye:after{content:\"\";display:block;height:15px;width:1px;border-radius:3px;background:#91919166;position:absolute;left:24px;top:52%;transform:translateY(-50%)}.input-custom-group .input-password-eye.visible{display:inline-block}.input-custom-group .input-password-eye.inactive svg path{fill:#ccc}.input-custom-group .input-password-eye.inactive:after{background-color:#aaa6}.input-custom-group .input-password-eye.valid-focus-out svg path{fill:#6f9ee0}.input-custom-group .input-password-eye.valid-focus-out:hover svg path{fill:#3074d3}.input-custom-group .input-password-eye.valid-focus-out:after{background-color:#6f9ee066}.input-custom-group .input-password-eye.valid-focus-in{display:inline-block}.input-custom-group .input-password-eye.valid-focus-in svg path{fill:#98b9ea}.input-custom-group .input-password-eye.valid-focus-in:hover svg path{fill:#fff}.input-custom-group .input-password-eye.valid-focus-in:after{background-color:#c5d8f3}.input-custom-group .input-password-eye.invalid-focus-out svg{transition:.3s ease-in-out}.input-custom-group .input-password-eye.invalid-focus-out svg path{fill:#e57373}.input-custom-group .input-password-eye.invalid-focus-out:hover svg path{fill:#ef5350}.input-custom-group .input-password-eye.invalid-focus-out:after{background-color:#e5737366}.input-custom-group .input-password-eye.invalid-focus-in svg{transition:.3s ease-in-out}.input-custom-group .input-password-eye.invalid-focus-in svg path{fill:#ffb0a8}.input-custom-group .input-password-eye.invalid-focus-in:hover svg path{fill:#fff}.input-custom-group .input-password-eye.invalid-focus-in:after{background-color:#f5c7c7}@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.input-custom-group .date_time_holder{display:flex;align-items:center;position:absolute;top:0;width:100%;height:100%;opacity:0;padding:0 6px 0 27px;z-index:20;cursor:text}.input-custom-group .date_time_holder span{position:relative;line-height:14px;display:flex;height:100%;align-items:center;z-index:10}.input-custom-group .date_time_holder span .border-picker{position:absolute;top:0;left:50%;transform:translate(-50%);height:100%;display:flex;align-items:center;justify-content:center;width:0px}.input-custom-group .date_time_holder span::selection{background-color:#fff3;color:#fff}.input-custom-group .date_time_holder span div::selection{background-color:#fff3;color:#fff}.input-custom-group .date_time_holder::selection{background-color:transparent!important;color:#fff}.input-custom-group .date_time_holder span.main{padding:0 2px;outline:none;font-size:14px;z-index:11}.input-custom-group .date_time_holder span.main::selection{z-index:10}.input-custom-group .date_time_holder span.main:first-child{padding-left:4px}.input-custom-group .date_time_holder.focus{opacity:1;padding-left:35px}.input-custom-group .date_time_holder.focus span:nth-child(2){z-index:12;pointer-events:none}.input-custom-group .date_time_holder.focus span:nth-child(3){z-index:13}.input-custom-group .date_time_holder.focus span:nth-child(4){z-index:14;pointer-events:none}.input-custom-group .date_time_holder.focus span:nth-child(5){z-index:15}.input-custom-group .date_time_holder.valid-focus-out-filled{opacity:1}.input-custom-group .date_time_holder.valid-focus-out-filled span,.input-custom-group .date_time_holder.valid-focus-out-filled span .border-picker{color:#2f2f2f!important;-webkit-user-select:none;user-select:none}.input-custom-group .date_time_holder.dark.valid-focus-out-filled{background:#3b73ed33!important}.input-custom-group .date_time_holder.dark.valid-focus-out-filled span,.input-custom-group .date_time_holder.dark.valid-focus-out-filled span .border-picker{color:#dadada!important}.input-custom-group .date_time_holder.focus{background-color:#1d1d1d;color:#fff;transition:.2s ease-in-out}.input-custom-group .date_time_holder.valid-focus-in{opacity:1}.input-custom-group .date_time_holder.valid-focus-in::selection,.input-custom-group .date_time_holder.valid-focus-in div::selection{background-color:#fff3;color:#fff}.input-custom-group .date_time_holder.invalid-focus-out-filled{opacity:1}.input-custom-group .date_time_holder.date_time_holder_bank_card span.main{padding:0 3px}.input-custom-group .placeholder-text{position:absolute;-webkit-user-select:none;user-select:none;pointer-events:none;top:47%;transform:translateY(-50%)}.input-custom-group .placeholder-text svg text{fill:#919191}.input-custom-group .placeholder-text.inactive-filled svg text{fill:#aaa}.input-custom-group .placeholder-text.focus svg text{fill:#919191}.input-custom-group .placeholder-text.valid-focus-in svg text{fill:#c5d8f3}.input-custom-group .placeholder-text.valid-focus-out svg text{fill:#919191}.input-custom-group .placeholder-text.invalid-focus-in svg text{fill:#f5c7c7}.input-custom-group .placeholder-text.invalid-focus-out svg text{fill:#919191}.input-custom-group .input-invalid-danger-mark{position:absolute;right:5px;top:48%;transform:translateY(-50%);line-height:13.3px}.input-custom-group .input-invalid-danger-mark svg{width:13.3px;height:13.3px}.input-custom-group .input-invalid-danger-mark svg path{fill:#e57373}.input-custom-group .password-capslock{position:absolute;right:5px;top:-16px;color:#ffb74d;font-size:11px;font-weight:600;margin:0;padding:0;-webkit-user-select:none!important;user-select:none!important}.input-custom-group .ta-input-commands{display:flex;align-items:center;gap:4px;position:absolute;right:4px}.input-custom-group .ta-input-commands .ta-input-command-first{border-radius:1px;display:block;z-index:20;cursor:pointer}.input-custom-group .ta-input-commands .ta-input-command-first .ta-input-command-svg-first svg{width:18px!important;height:18px!important;overflow:visible;transition:transform .3s}.input-custom-group .ta-input-commands .ta-input-command-first .ta-input-command-svg-first svg path{fill:#1d1d1d}.input-custom-group .ta-input-commands .ta-input-command-first .ta-input-command-svg-first svg rect{transition:transform .3s;transform:scale(1);transform-origin:center;fill:#ccc}.input-custom-group .ta-input-commands .ta-input-command-first .ta-input-command-svg-first:hover svg{overflow:visible}.input-custom-group .ta-input-commands .ta-input-command-first .ta-input-command-svg-first:hover svg rect{transform:scale(1.2);transform-origin:center;transition:transform .3s;fill:#fff}.input-custom-group .ta-input-commands .ta-input-command-second{border-radius:1px;display:block;z-index:20;cursor:pointer}.input-custom-group .ta-input-commands .ta-input-command-second .ta-input-command-svg-second svg{width:18px!important;height:18px!important;overflow:visible;transition:transform .3s}.input-custom-group .ta-input-commands .ta-input-command-second .ta-input-command-svg-second svg path{fill:#1d1d1d}.input-custom-group .ta-input-commands .ta-input-command-second .ta-input-command-svg-second svg rect{transition:transform .3s;transform:scale(1);transform-origin:center;fill:#ccc}.input-custom-group .ta-input-commands .ta-input-command-second .ta-input-command-svg-second:hover svg{overflow:visible}.input-custom-group .ta-input-commands .ta-input-command-second .ta-input-command-svg-second:hover svg rect{transform:scale(1.2);transform-origin:center;transition:transform .3s;fill:#fff}.input-custom-group .ta-input-commands .ta-input-command-third{border-radius:1px;display:block;z-index:20;cursor:pointer}.input-custom-group .ta-input-commands .ta-input-command-third .ta-input-command-svg-third svg{width:18px!important;height:18px!important;overflow:visible;transition:transform .3s}.input-custom-group .ta-input-commands .ta-input-command-third .ta-input-command-svg-third svg path{fill:#1d1d1d}.input-custom-group .ta-input-commands .ta-input-command-third .ta-input-command-svg-third svg rect{transition:transform .3s;transform:scale(1);transform-origin:center;fill:#ccc}.input-custom-group .ta-input-commands .ta-input-command-third .ta-input-command-svg-third:hover svg{overflow:visible}.input-custom-group .ta-input-commands .ta-input-command-third .ta-input-command-svg-third:hover svg rect{transform:scale(1.2);transform-origin:center;transition:transform .3s;fill:#fff}.input-custom-group .ta-input-commands.blue-commands .ta-input-command-svg-first svg rect,.input-custom-group .ta-input-commands.blue-commands .ta-input-command-svg-second svg rect,.input-custom-group .ta-input-commands.blue-commands .ta-input-command-svg-third svg rect{fill:none}.input-custom-group .ta-input-commands.blue-commands .ta-input-command-svg-first svg path,.input-custom-group .ta-input-commands.blue-commands .ta-input-command-svg-second svg path,.input-custom-group .ta-input-commands.blue-commands .ta-input-command-svg-third svg path{fill:#6692f1}.input-custom-group .ta-input-commands.blue-commands .ta-input-command-svg-first:hover svg,.input-custom-group .ta-input-commands.blue-commands .ta-input-command-svg-second:hover svg,.input-custom-group .ta-input-commands.blue-commands .ta-input-command-svg-third:hover svg{overflow:visible}.input-custom-group .ta-input-commands.blue-commands .ta-input-command-svg-first:hover svg rect,.input-custom-group .ta-input-commands.blue-commands .ta-input-command-svg-second:hover svg rect,.input-custom-group .ta-input-commands.blue-commands .ta-input-command-svg-third:hover svg rect{transform:scale(1.2);transform-origin:center;transition:transform .3s;fill:#6692f1}.input-custom-group .ta-input-commands.blue-commands .ta-input-command-svg-first:hover svg path,.input-custom-group .ta-input-commands.blue-commands .ta-input-command-svg-second:hover svg path,.input-custom-group .ta-input-commands.blue-commands .ta-input-command-svg-third:hover svg path{fill:#bed0f9}.input-custom-group .ta-input-commands.blue-commands-focus .ta-input-command-svg-first svg rect,.input-custom-group .ta-input-commands.blue-commands-focus .ta-input-command-svg-second svg rect,.input-custom-group .ta-input-commands.blue-commands-focus .ta-input-command-svg-third svg rect{fill:#ffffffb2}.input-custom-group .ta-input-commands.blue-commands-focus .ta-input-command-svg-first svg path,.input-custom-group .ta-input-commands.blue-commands-focus .ta-input-command-svg-second svg path,.input-custom-group .ta-input-commands.blue-commands-focus .ta-input-command-svg-third svg path{fill:#0b49d1}.input-custom-group .ta-input-commands.blue-commands-focus .ta-input-command-svg-first:hover svg,.input-custom-group .ta-input-commands.blue-commands-focus .ta-input-command-svg-second:hover svg,.input-custom-group .ta-input-commands.blue-commands-focus .ta-input-command-svg-third:hover svg{overflow:visible}.input-custom-group .ta-input-commands.blue-commands-focus .ta-input-command-svg-first:hover svg rect,.input-custom-group .ta-input-commands.blue-commands-focus .ta-input-command-svg-second:hover svg rect,.input-custom-group .ta-input-commands.blue-commands-focus .ta-input-command-svg-third:hover svg rect{transform:scale(1.2);transform-origin:center;transition:transform .3s}.input-custom-group .input-label-counter{position:absolute;display:flex;align-items:center;justify-content:center;width:22px;height:18px;font-size:11px;font-weight:700;color:#424242;background-color:#42424233;border-radius:9px;margin:0;padding-left:.5px;-webkit-user-select:none;user-select:none}.input-custom-group .input-loading-spinner{position:absolute;right:6px;bottom:3px}.input-custom-group .input-pen-container{position:absolute;right:50px;top:46%;transform:translateY(-50%);display:none;z-index:10;cursor:pointer;transition:.3s ease-in-out}.input-custom-group .input-pen-container .input-pen svg{width:18px!important;height:18px!important;overflow:visible}.input-custom-group .input-pen-container .input-pen svg path{fill:#c5d8f3}.input-custom-group .input-pen-container .input-pen svg rect{transition:transform .3s;transform:scale(1);transform-origin:center;fill:#6f9ee0}.input-custom-group .input-pen-container .input-pen:hover svg{overflow:visible}.input-custom-group .input-pen-container .input-pen:hover svg rect{transform:scale(1.2);transform-origin:center;transition:transform .3s;fill:#3074d3}.input-custom-group .dropdown-selected-image{position:absolute;left:6px;top:48%;transform:translateY(-50%);-webkit-user-select:none;user-select:none;pointer-events:none}.input-custom-group .dropdown-selected-image.truck-make svg path{fill:#6c6c6c}.input-custom-group .dropdown-selected-image.trailer-make svg path{fill:#6c6c6c}.input-custom-group .dropdown-selected-image.name-initials-instead-url{width:18px;height:18px;border-radius:50%;object-fit:cover;top:50%;transform:translateY(-50%)}.input-custom-group .dropdown-selected-image.load-broker{height:26px}.input-custom-group .dropdown-selected-image.load-broker svg{height:18px}.input-custom-group .dropdown-selected-image.load-broker.medium svg #Path_33564{fill:#ffb74d}.input-custom-group .dropdown-selected-image.load-broker.low svg #Path_33564{fill:#e57373}.input-custom-group .dropdown-selected-image.semitruck svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.semisleeper svg #Ellipse_9856,.input-custom-group .dropdown-selected-image.semisleeper svg #Ellipse_9857,.input-custom-group .dropdown-selected-image.semisleeper svg #Ellipse_9858,.input-custom-group .dropdown-selected-image.semisleeper svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.boxtruck svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.cargovan svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.towtruck svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.spotter svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.bus svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.reefer svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.dryvan svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.sidekit svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.conestoga svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.dumper svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.container{padding:0!important}.input-custom-group .dropdown-selected-image.container svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.tanker svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.pneumatictanker svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.carhauler svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.carhaulerstinger svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.flatbed svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.low-boy-rgn svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.chassis svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.stepdeck svg path{fill:#919191!important}.input-custom-group .dropdown-selected-image.unset-color svg #Ellipse_9856,.input-custom-group .dropdown-selected-image.unset-color svg #Ellipse_9857,.input-custom-group .dropdown-selected-image.unset-color svg #Ellipse_9858,.input-custom-group .dropdown-selected-image.unset-color svg path{fill:#fff6}.input-custom-group .placeholder-icon-right-side{position:absolute;right:4px}.input-custom-group .placeholder-icon-right-side.green svg path{fill:#4db6a2}.input-custom-group .placeholder-icon-right-side.purple svg path{fill:#ba68c8}.input-custom-group .placeholder-icon-right-side.blue svg path{fill:#6f9ee0}.input-custom-group .placeholder-icon-right-side.orange svg path{fill:#f89b2e}.input-custom-group .placeholder-icon-right-side.red svg path{fill:#e66767}.input-custom-group .placeholder-icon-right-side:before{content:\"\";display:block;height:15px;width:1px;border-radius:3px;position:absolute;right:22px;top:55%;transform:translateY(-50%);background-color:#91919166}.input-custom-group .placeholder-icon-right-side.focus:before{background-color:#ccc6}.input-custom-group .placeholder-icon-right-side.valid-focus-out:before{background-color:#6f9ee066}.input-custom-group .placeholder-icon-right-side.valid-focus-in:before{background-color:#c5d8f3}.input-custom-group .placeholder-icon-right-side.invalid-focus-out:before{background-color:#e5737366}.input-custom-group .placeholder-icon-right-side.invalid-focus-in:before{background-color:#f5c7c7}.input-fixed-placehoder-label{color:#919191;position:absolute;right:0;font-size:14px;top:3px}.input-fixed-placehoder-input{padding-right:25px!important}.input-border-radius{border-radius:8px!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$2.NgControl, decorators: [{
+                    type: Self
+                }] }, { type: i0.ChangeDetectorRef }, { type: i2$1.InputStateService }]; }, propDecorators: { input: [{
+                type: ViewChild,
+                args: ["input", { static: true }]
+            }], inputConfig: [{
+                type: Input
+            }], incorrectValue: [{
+                type: Input
+            }], selectedDropdownLabelColor: [{
+                type: Input
+            }], blurInput: [{
+                type: Output,
+                args: ["blurInput"]
+            }], isFocusInputEvent: [{
+                type: Output,
+                args: ["isFocusInput"]
+            }], changeInput: [{
+                type: Output,
+                args: ["change"]
+            }] } });
+
+class CaInputRadiobuttonsComponent {
+    constructor() {
+        this.buttons = null;
+        this.disabled = false;
+        this.displayRequiredNote = false;
+        this.changedValue = new EventEmitter(undefined);
+    }
+    onChange(button) {
+        this.buttons?.filter((item) => (item.checked = false));
+        button.checked = true;
+        this.changedValue.emit(this.buttons);
+    }
+    identity(index, item) {
+        return item.value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaInputRadiobuttonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CaInputRadiobuttonsComponent, isStandalone: true, selector: "app-ca-input-radiobuttons", inputs: { buttons: "buttons", disabled: "disabled", displayRequiredNote: "displayRequiredNote" }, outputs: { changedValue: "changedValue" }, ngImport: i0, template: "<div\n    class=\"ta-input-radiobutons\"\n    [ngClass]=\"{ disabled, required: displayRequiredNote }\"\n>\n    <label\n        *ngFor=\"let button of buttons; trackBy: identity\"\n        class=\"d-flex justify-content-center align-items-center radio-button-label\"\n        [ngClass]=\"{\n            checked: button.checked,\n            'no-checked': !button.checked,\n            disabled,\n            required: displayRequiredNote\n        }\"\n        for=\"{{ button.id }}\"\n    >\n        <input\n            [id]=\"button.id\"\n            [name]=\"button.name\"\n            [value]=\"button.value\"\n            [checked]=\"button.checked\"\n            type=\"radio\"\n            class=\"radio-button\"\n            (change)=\"onChange(button)\"\n        />\n        <span class=\"radio-button-text\">{{ button.label }}</span>\n    </label>\n</div>\n", styles: [".ta-input-radiobutons{display:flex;justify-content:space-between;align-items:center;background:#f3f3f3;padding:2px;border-radius:2px;position:relative;width:100%;height:26px;max-width:120px}.ta-input-radiobutons.disabled{background:#fbfbfb}.ta-input-radiobutons.required{background:#e5737333}.ta-input-radiobutons .radio-button-label{width:60px;height:22px;cursor:pointer;border-radius:2px;background:#f3f3f3;font-size:12px;text-align:center;font-weight:700}.ta-input-radiobutons .radio-button-label.checked{background-color:#fff!important;transition:all .3 ease-in-out!important}.ta-input-radiobutons .radio-button-label.no-checked:hover .radio-button-text{color:#424242!important;transition:all .3 ease-in-out!important}.ta-input-radiobutons .radio-button-label.disabled{pointer-events:none}.ta-input-radiobutons .radio-button-label.disabled.checked .radio-button:checked~.radio-button-text{color:#3074d3}.ta-input-radiobutons .radio-button-label.disabled.no-checked{background:transparent}.ta-input-radiobutons .radio-button-label.disabled.no-checked .radio-button-text{color:#dadada}.ta-input-radiobutons .radio-button-label.required{background:transparent;transition:background .2s ease-in-out}.ta-input-radiobutons .radio-button-label.required .radio-button-text{color:#ef5350!important}.ta-input-radiobutons .radio-button-label.required:hover{background:#fff}.ta-input-radiobutons .radio-button-label.required:hover .radio-button-text{color:#ef5350!important}.ta-input-radiobutons .radio-button-label .radio-button{appearance:none;outline:none}.ta-input-radiobutons .radio-button-label .radio-button:checked~.radio-button-text{color:#3074d3;transition:all .3 ease-in-out}.ta-input-radiobutons .radio-button-label .radio-button-text{color:#b7b7b7;-webkit-user-select:none!important;user-select:none!important;position:relative;top:1.5px}\n"], dependencies: [{ kind: "ngmodule", type: 
+                // Module
+                CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaInputRadiobuttonsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-ca-input-radiobuttons', standalone: true, imports: [
+                        // Module
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                    ], template: "<div\n    class=\"ta-input-radiobutons\"\n    [ngClass]=\"{ disabled, required: displayRequiredNote }\"\n>\n    <label\n        *ngFor=\"let button of buttons; trackBy: identity\"\n        class=\"d-flex justify-content-center align-items-center radio-button-label\"\n        [ngClass]=\"{\n            checked: button.checked,\n            'no-checked': !button.checked,\n            disabled,\n            required: displayRequiredNote\n        }\"\n        for=\"{{ button.id }}\"\n    >\n        <input\n            [id]=\"button.id\"\n            [name]=\"button.name\"\n            [value]=\"button.value\"\n            [checked]=\"button.checked\"\n            type=\"radio\"\n            class=\"radio-button\"\n            (change)=\"onChange(button)\"\n        />\n        <span class=\"radio-button-text\">{{ button.label }}</span>\n    </label>\n</div>\n", styles: [".ta-input-radiobutons{display:flex;justify-content:space-between;align-items:center;background:#f3f3f3;padding:2px;border-radius:2px;position:relative;width:100%;height:26px;max-width:120px}.ta-input-radiobutons.disabled{background:#fbfbfb}.ta-input-radiobutons.required{background:#e5737333}.ta-input-radiobutons .radio-button-label{width:60px;height:22px;cursor:pointer;border-radius:2px;background:#f3f3f3;font-size:12px;text-align:center;font-weight:700}.ta-input-radiobutons .radio-button-label.checked{background-color:#fff!important;transition:all .3 ease-in-out!important}.ta-input-radiobutons .radio-button-label.no-checked:hover .radio-button-text{color:#424242!important;transition:all .3 ease-in-out!important}.ta-input-radiobutons .radio-button-label.disabled{pointer-events:none}.ta-input-radiobutons .radio-button-label.disabled.checked .radio-button:checked~.radio-button-text{color:#3074d3}.ta-input-radiobutons .radio-button-label.disabled.no-checked{background:transparent}.ta-input-radiobutons .radio-button-label.disabled.no-checked .radio-button-text{color:#dadada}.ta-input-radiobutons .radio-button-label.required{background:transparent;transition:background .2s ease-in-out}.ta-input-radiobutons .radio-button-label.required .radio-button-text{color:#ef5350!important}.ta-input-radiobutons .radio-button-label.required:hover{background:#fff}.ta-input-radiobutons .radio-button-label.required:hover .radio-button-text{color:#ef5350!important}.ta-input-radiobutons .radio-button-label .radio-button{appearance:none;outline:none}.ta-input-radiobutons .radio-button-label .radio-button:checked~.radio-button-text{color:#3074d3;transition:all .3 ease-in-out}.ta-input-radiobutons .radio-button-label .radio-button-text{color:#b7b7b7;-webkit-user-select:none!important;user-select:none!important;position:relative;top:1.5px}\n"] }]
+        }], propDecorators: { buttons: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], displayRequiredNote: [{
+                type: Input
+            }], changedValue: [{
+                type: Output
+            }] } });
+
+class CaMapComponent {
+    constructor(cd) {
+        this.cd = cd;
+        this.markerClick = new EventEmitter();
+        this.currentlyOpenWindowIndex = null;
+        this.currentlyOpenWindowIndexRouting = null;
+        this.showLabel = true;
+        this.directionService = new google.maps.DirectionsService();
+        this.directionsRenderers = [];
+        this.initialIcons = [];
+        this.initialMarkerIcons = [];
+    }
+    ngOnInit() {
+        this.storeInitialIconForMarker();
+        this.storeInitialIconForRoutingMarker();
+        // Reset all icons to their initial state on page load
+        this.resetMarkersIcons();
+        this.resetRoutingMarkers();
+        //Display routes for routingMarkers
+        this.calculateAndDisplayRoute();
+    }
+    ngOnChanges(changes) {
+        if (changes['routingMarkers']) {
+            this.data.routingMarkers = changes['routingMarkers'].currentValue;
+        }
+    }
+    storeInitialIconForMarker() {
+        this.data.markers?.forEach((marker, index) => {
+            this.initialMarkerIcons[index] = {
+                url: marker.icon.url,
+                labelOrigin: marker.icon.labelOrigin || null,
+            };
+        });
+    }
+    storeInitialIconForRoutingMarker() {
+        this.data.routingMarkers?.forEach((marker, index) => {
+            this.initialIcons[index] = {
+                url: marker.icon.url,
+                labelOrigin: marker.icon.labelOrigin || null,
+            };
+        });
+    }
+    onMarkerClick(i, event, markeritem) {
+        if (markeritem?.infoWindowContent) {
+            if (this.currentlyOpenWindowIndex === i &&
+                this.currentlyOpenWindow) {
+                const infoWindow = this.infoWindowsView.toArray()[i];
+                // Close the currently open info window and reset the index
+                this.data.markers.map((item, index) => {
+                    if (index === i) {
+                        item.icon = {
+                            url: this.initialMarkerIcons[index].url,
+                            labelOrigin: this.initialMarkerIcons[index].labelOrigin,
+                        };
+                    }
+                });
+                infoWindow.close();
+                this.currentlyOpenWindowIndex = null;
+            }
+            else {
+                const markerIndex = this.marker.toArray()[i];
+                const infoWindow = this.infoWindowsView.toArray()[i];
+                if (this.currentlyOpenWindow) {
+                    this.currentlyOpenWindow.close();
+                }
+                if (infoWindow) {
+                    this.data.markers.map((item, index) => {
+                        if (index === i) {
+                            this.focusedIcon = i;
+                            this.showLabel = false;
+                            item.icon = {
+                                url: this.initialMarkerIcons[index].url,
+                                scaledSize: new google.maps.Size(70, 70),
+                            };
+                        }
+                        else {
+                            this.showLabel = true;
+                            item.icon = {
+                                url: this.initialMarkerIcons[index].url,
+                                labelOrigin: this.initialMarkerIcons[index]
+                                    .labelOrigin,
+                            };
+                        }
+                    });
+                    infoWindow.open(markerIndex);
+                    this.currentlyOpenWindow = infoWindow;
+                    this.currentlyOpenWindowIndex = i;
+                    this.markerClick.emit(event);
+                }
+            }
+        }
+        else {
+            return;
+        }
+    }
+    setDirectionsOnMap() {
+        if (this.maps?.googleMap) {
+            this.directionsRenderers.forEach((renderer) => renderer.setMap(this.maps?.googleMap));
+        }
+    }
+    calculateAndDisplayRoute() {
+        if (this.data.routePaths) {
+            // Clear any previous directions renderers
+            this.directionsRenderers.forEach((renderer) => renderer.setMap(null));
+            this.directionsRenderers = [];
+            this.data.routePaths.forEach((route) => {
+                const request = {
+                    origin: route.path[0],
+                    destination: route.path[route.path.length - 1],
+                    waypoints: route.path
+                        .slice(1, route.path.length - 1)
+                        .map((position) => ({ location: position })),
+                    travelMode: google.maps.TravelMode.BICYCLING,
+                };
+                this.directionService.route(request, (result, status) => {
+                    if (status === google.maps.DirectionsStatus.OK &&
+                        result?.routes[0]) {
+                        const directionsRenderer = new google.maps.DirectionsRenderer({
+                            suppressInfoWindows: true,
+                            suppressMarkers: true,
+                            preserveViewport: true,
+                            polylineOptions: {
+                                strokeColor: route.strokeColor ||
+                                    GoogleMapEnum.STROKE_COLOR,
+                                strokeOpacity: route.strokeOpacity ||
+                                    GoogleMapEnum.STROKE_OPACITY,
+                            },
+                        });
+                        directionsRenderer.setDirections(result);
+                        this.directionsRenderers.push(directionsRenderer);
+                        this.setDirectionsOnMap();
+                    }
+                });
+            });
+        }
+        else {
+            return;
+        }
+    }
+    onRoutingMarkerClick(i, event, markeritem) {
+        if (markeritem?.infoWindowContent) {
+            if (this.currentlyOpenWindowIndexRouting === i &&
+                this.currentlyOpenWindowRouting) {
+                const infoWindow = this.infoWindowsViewRouting.toArray()[i];
+                // Close the currently open info window and reset the index
+                this.data.routingMarkers.map((item, index) => {
+                    if (index === i) {
+                        item.icon = {
+                            url: this.initialIcons[index].url,
+                            labelOrigin: this.initialIcons[index].labelOrigin,
+                        };
+                    }
+                });
+                infoWindow.close();
+                this.currentlyOpenWindowIndexRouting = null;
+            }
+            else {
+                const markerIndex = this.markerRouting.toArray()[i];
+                const infoWindow = this.infoWindowsViewRouting.toArray()[i];
+                if (this.currentlyOpenWindowRouting) {
+                    this.currentlyOpenWindowRouting.close();
+                }
+                if (infoWindow) {
+                    // Restore the previous icon for the previously focused routing marker
+                    if (this.focusedIconRouting !== undefined &&
+                        this.focusedIconRouting !== i) {
+                        const previousFocusedItem = this.data.routingMarkers[this.focusedIconRouting];
+                        if (previousFocusedItem) {
+                            previousFocusedItem.icon = {
+                                url: this.initialIcons[this.focusedIconRouting]
+                                    .url,
+                                labelOrigin: this.initialIcons[this.focusedIconRouting]
+                                    .labelOrigin,
+                            };
+                        }
+                    }
+                    // Update the current marker
+                    this.data.routingMarkers.map((item, index) => {
+                        if (index === i) {
+                            this.previousIconUrlRouting = item.icon
+                                ? item.icon.url
+                                : '';
+                            this.focusedIconRouting = i;
+                            this.showLabel = false;
+                            item.icon = {
+                                url: this.data.isUnitViewStops ||
+                                    this.data.isDriverMiles
+                                    ? item.icon.url
+                                    : MapSvgRoutes.markerSvgRoute,
+                            };
+                        }
+                        else {
+                            this.showLabel = true;
+                        }
+                    });
+                    infoWindow.open(markerIndex);
+                    this.currentlyOpenWindowRouting = infoWindow;
+                    this.currentlyOpenWindowIndexRouting = i;
+                    this.markerClick.emit(event);
+                }
+            }
+        }
+        else {
+            return;
+        }
+    }
+    ngAfterViewInit() {
+        this.maps.googleMap?.addListener('click', () => {
+            this.infoWindowsView.forEach((window) => {
+                window.close();
+                this.currentlyOpenWindow = null;
+            });
+            this.infoWindowsViewRouting.forEach((window) => {
+                window.close();
+                this.currentlyOpenWindowRouting = null;
+            });
+            this.data.markers?.map((item, i) => {
+                if (i === this.focusedIcon) {
+                    item.icon = { url: item.icon ? item.icon.url : '' };
+                    this.cd.detectChanges();
+                }
+            });
+            this.data.routingMarkers?.map((item, i) => {
+                if (i === this.focusedIconRouting) {
+                    item.icon = {
+                        url: this.initialIcons[i].url,
+                    };
+                    this.cd.detectChanges();
+                }
+            });
+        });
+    }
+    resetMarkersIcons() {
+        this.data.markers?.forEach((marker, index) => {
+            marker.icon = {
+                url: this.initialMarkerIcons[index].url,
+                labelOrigin: this.initialMarkerIcons[index].labelOrigin,
+            };
+        });
+        this.cd.detectChanges();
+    }
+    resetRoutingMarkers() {
+        this.data.routingMarkers?.forEach((marker, index) => {
+            marker.icon = {
+                url: marker.icon.url,
+                labelOrigin: marker.icon.labelOrigin,
+            };
+        });
+    }
+    onMapReady() {
+        if (this.data.stateBoundariesUrl) {
+            const stateBoundariesUrl = this.data.stateBoundariesUrl.url;
+            this.maps.googleMap?.data.loadGeoJson(stateBoundariesUrl);
+            this.maps.googleMap?.data.setStyle((feature) => {
+                //leave this as any for now
+                const stateDensity = feature.getProperty('density');
+                const { fillColor, fillOpacity } = MapHelper.getFillColorForState(stateDensity, this.data.view);
+                return {
+                    fillColor: fillColor,
+                    strokeColor: '#EEEEEE',
+                    strokeWeight: 0.6,
+                    fillOpacity: fillOpacity,
+                };
+            });
+        }
+        else {
+            return;
+        }
+    }
+    identity(index) {
+        return index;
+    }
+    ngOnDestroy() {
+        this.directionsRenderers.forEach((renderer) => renderer.setMap(null));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaMapComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CaMapComponent, isStandalone: true, selector: "app-ca-map", inputs: { data: "data" }, outputs: { markerClick: "markerClick" }, viewQueries: [{ propertyName: "maps", first: true, predicate: GoogleMap, descendants: true }, { propertyName: "marker", predicate: ["marker"], descendants: true }, { propertyName: "infoWindowsView", predicate: MapInfoWindow, descendants: true }, { propertyName: "markerRouting", predicate: ["markerRouting"], descendants: true }, { propertyName: "infoWindowsViewRouting", predicate: MapInfoWindow, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<google-map\n  height=\"500px\"\n  width=\"100%\"\n  [zoom]=\"data.mapZoom\"\n  [center]=\"data.center\"\n  [options]=\"data.mapOptions\"\n  (idle)=\"onMapReady()\"\n>\n  <map-marker\n    #marker=\"mapMarker\"\n    *ngFor=\"let markeritem of data.markers; let i = index; trackBy: identity\"\n    [position]=\"markeritem.position\"\n    [icon]=\"markeritem.icon!\"\n    [label]=\"focusedIcon !== i ? markeritem.label! : ''\"\n    [title]=\"markeritem.title!\"\n    [options]=\"markeritem.options!\"\n    (mapClick)=\"onMarkerClick(i, $event, markeritem)\"\n  >\n    <map-info-window #infoWindowsView=\"mapInfoWindow\">\n      <app-ca-map-dropdown\n        [isAccidentMap]=\"data.isAccidentMap ?? false\"\n      ></app-ca-map-dropdown>\n    </map-info-window>\n  </map-marker>\n  <map-marker\n    *ngFor=\"let marker of data.clustermarkers; let i = index; trackBy: identity\"\n    [position]=\"marker.position\"\n    [icon]=\"marker.icon\"\n    [label]=\"marker.label!\"\n    [title]=\"marker.title!\"\n  >\n  </map-marker>\n\n  <map-marker\n    #markerRouting=\"mapMarker\"\n    *ngFor=\"\n      let markeritem of data.routingMarkers;\n      let i = index;\n      trackBy: identity\n    \"\n    [position]=\"markeritem.position\"\n    [icon]=\"markeritem.icon!\"\n    [label]=\"focusedIconRouting !== i ? markeritem.label! : ''\"\n    [title]=\"markeritem.title!\"\n    [options]=\"markeritem.options!\"\n    (mapClick)=\"onRoutingMarkerClick(i, $event, markeritem)\"\n  >\n    <map-info-window #infoWindowsViewRouting=\"mapInfoWindow\">\n      <app-ca-map-dropdown [isAccidentMap]=\"false\"></app-ca-map-dropdown>\n    </map-info-window>\n  </map-marker>\n</google-map>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: 
+                //Modules
+                GoogleMapsModule }, { kind: "component", type: i1$3.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: i1$3.MapInfoWindow, selector: "map-info-window", inputs: ["options", "position"], outputs: ["closeclick", "contentChanged", "domready", "positionChanged", "zindexChanged"], exportAs: ["mapInfoWindow"] }, { kind: "directive", type: i1$3.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged"], exportAs: ["mapMarker"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: AngularSvgIconModule }, { kind: "component", type: 
+                //Components
+                CaMapDropdownComponent$1, selector: "app-ca-map-dropdown", inputs: ["isAccidentMap"], outputs: ["bodyActions"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaMapComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-ca-map', standalone: true, imports: [
+                        //Modules
+                        GoogleMapsModule,
+                        CommonModule,
+                        AngularSvgIconModule,
+                        //Components
+                        CaMapDropdownComponent$1,
+                    ], template: "<google-map\n  height=\"500px\"\n  width=\"100%\"\n  [zoom]=\"data.mapZoom\"\n  [center]=\"data.center\"\n  [options]=\"data.mapOptions\"\n  (idle)=\"onMapReady()\"\n>\n  <map-marker\n    #marker=\"mapMarker\"\n    *ngFor=\"let markeritem of data.markers; let i = index; trackBy: identity\"\n    [position]=\"markeritem.position\"\n    [icon]=\"markeritem.icon!\"\n    [label]=\"focusedIcon !== i ? markeritem.label! : ''\"\n    [title]=\"markeritem.title!\"\n    [options]=\"markeritem.options!\"\n    (mapClick)=\"onMarkerClick(i, $event, markeritem)\"\n  >\n    <map-info-window #infoWindowsView=\"mapInfoWindow\">\n      <app-ca-map-dropdown\n        [isAccidentMap]=\"data.isAccidentMap ?? false\"\n      ></app-ca-map-dropdown>\n    </map-info-window>\n  </map-marker>\n  <map-marker\n    *ngFor=\"let marker of data.clustermarkers; let i = index; trackBy: identity\"\n    [position]=\"marker.position\"\n    [icon]=\"marker.icon\"\n    [label]=\"marker.label!\"\n    [title]=\"marker.title!\"\n  >\n  </map-marker>\n\n  <map-marker\n    #markerRouting=\"mapMarker\"\n    *ngFor=\"\n      let markeritem of data.routingMarkers;\n      let i = index;\n      trackBy: identity\n    \"\n    [position]=\"markeritem.position\"\n    [icon]=\"markeritem.icon!\"\n    [label]=\"focusedIconRouting !== i ? markeritem.label! : ''\"\n    [title]=\"markeritem.title!\"\n    [options]=\"markeritem.options!\"\n    (mapClick)=\"onRoutingMarkerClick(i, $event, markeritem)\"\n  >\n    <map-info-window #infoWindowsViewRouting=\"mapInfoWindow\">\n      <app-ca-map-dropdown [isAccidentMap]=\"false\"></app-ca-map-dropdown>\n    </map-info-window>\n  </map-marker>\n</google-map>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                type: Input
+            }], markerClick: [{
+                type: Output
+            }], maps: [{
+                type: ViewChild,
+                args: [GoogleMap, { static: false }]
+            }], marker: [{
+                type: ViewChildren,
+                args: ['marker']
+            }], infoWindowsView: [{
+                type: ViewChildren,
+                args: [MapInfoWindow]
+            }], markerRouting: [{
+                type: ViewChildren,
+                args: ['markerRouting']
+            }], infoWindowsViewRouting: [{
+                type: ViewChildren,
+                args: [MapInfoWindow]
+            }] } });
+
+class CaMapDropdownComponent {
+    constructor() {
+        this.isAccidentMap = false;
+        this.bodyActions = new EventEmitter();
+        this.isPopupShown = false;
+        this.isHidden = false;
+        this.isDropdownActive = true;
+        this.data = taDetailDropdownJson.taDetailDropDown;
+    }
+    openSideMenu() {
+        this.isPopupShown = !this.isPopupShown;
+    }
+    showHiddenData() {
+        this.isDropdownActive = !this.isDropdownActive;
+        this.isHidden = !this.isHidden;
+    }
+    callBodyAction(action) {
+        this.bodyActions.emit(action);
+    }
+    getSvgPath(propertyName) {
+        return MapDropdownSvgRoutes[propertyName];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaMapDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CaMapDropdownComponent, isStandalone: true, selector: "app-ca-map-dropdown", inputs: { isAccidentMap: "isAccidentMap" }, outputs: { bodyActions: "bodyActions" }, providers: [SvgIconRegistryService], ngImport: i0, template: "<ng-container *ngIf=\"!isAccidentMap\">\n  <div class=\"marker-container\" >\n     <div class=\"heading-container\">\n        <div class=\"heading d-flex justify-content-between align-items-center\">\n           <span class=\"header ca-font-extra-bold\">DOGMA BREWERY LOGISTICS</span>\n           <app-ca-details-dropdown\n               #detailsDropdown\n               [options]=\"data\"\n               [placement]=\"'right-top'\"\n               [id]=\"item.id!\"\n               [data]=\"item\"\n               [customClassDropDown]=\"\n                   'map-list-card-dropdown marker-dropdown-popover'\n               \"\n               (dropDownActions)=\"callBodyAction($event)\"\n           ></app-ca-details-dropdown>\n        </div>\n        <div class=\"action d-flex justify-content-start align-items-center align-content-center\">\n           <div class=\"side-space d-flex justify-content-start align-items-center\"><svg-icon [src]=\"getSvgPath('likeRoute')\"></svg-icon><span class=\"count ca-font-semi-bold\">2</span></div>\n           <div class=\"side-space  d-flex justify-content-start align-items-center\"><svg-icon [src]=\"getSvgPath('dislikeRoute')\"></svg-icon><span  class=\"count grey-color ca-font-semi-bold\">0</span></div>\n           <div class=\"side-space  d-flex justify-content-start align-items-center\"><svg-icon [src]=\"getSvgPath('reviewRoute')\"></svg-icon><span  class=\"count grey-color ca-font-semi-bold\">0</span></div>\n        </div>\n      </div>\n\n      <div class=\"personal-info d-flex flex-column align-content-center\"> \n        <div class=\"personal-info-items d-flex align-items-start\"><svg-icon [src]=\"getSvgPath('phoneRoute')\"></svg-icon><span class=\"info ca-font-regular\">(123) 456-7890</span></div>\n        <div class=\"personal-info-items d-flex align-items-start\"><svg-icon [src]=\"getSvgPath('emailRoute')\"></svg-icon><span class=\"info ca-font-regular\">repairs-office@ivs-trucking.com</span></div>\n        <div class=\"personal-info-items d-flex align-items-start\"><svg-icon [src]=\"getSvgPath('addressRoute')\"></svg-icon><span class=\"info ca-font-regular\">3181 Donald Hollowell Pkwy NW Atlanta, GA 30318, USA</span></div>\n     </div>\n\n     <div class=\"working-info\">\n        <div class=\"working-heading ca-font-extra-bold\">Available Hours</div>\n        <div class=\"working-info-detail d-flex justify-content-between\">\n           <div>\n              <div class=\"working-info-item ca-font-bold\">Shipping</div>\n              <div class=\"working-time ca-font-regular\">10:00 AM - 02:00 PM</div>\n           </div>\n           <div>\n              <div class=\"working-info-item ca-font-bold\">Receiving </div>\n              <div class=\"working-time ca-font-regular\">08:00 AM - 07:00 PM\n              </div>\n           </div>\n           <div class=\"dropdown-arrow align-self-end\">\n            <svg-icon [src]=\"getSvgPath('cornerDownArrowRoute')\" (click)=\"showHiddenData()\" *ngIf=\"isDropdownActive\"></svg-icon>\n         </div>\n        </div>\n     </div>\n\n     <ng-container *ngIf=\"isHidden\">\n     <div class=\"load-info\">\n        <div class=\"load-heading ca-font-semi-bold d-flex align-content-center\"><span>Load</span><span class=\"load-head-count\">12</span></div>\n        <div class=\"load-info-detail d-flex justify-content-between\">\n           <div>\n              <div class=\"load-info-item ca-font-regular\">Pickup <span class=\"item-count ca-font-semi-bold\">7</span></div>\n              <div class=\"loading-hours\">Avg. Loading <span class=\"load-time ca-font-medium\">32m 45s</span></div>\n           </div>\n           <div>\n              <div class=\"load-info-item ca-font-regular\">Delivery <span class=\"item-count ca-font-semi-bold\">5</span></div>\n              <div class=\"loading-hours\">Avg. Offloading <span class=\"load-time ca-font-medium\">43m 23s</span>\n              </div>\n           </div>\n           <div>\n           </div>\n        </div>\n     </div>\n     \n     <div class=\"avg-info\">\n        <div class=\"avg-info-detail  d-flex justify-content-between\">\n           <div class=\"avg-item d-flex align-items-center\">\n              <svg-icon [src]=\"getSvgPath('calenderRoute')\"></svg-icon><span class=\"item-date\">04/04/24</span>\n           </div>\n           <div class=\"avg-item d-flex align-items-center\">\n              <svg-icon [src]=\"getSvgPath('calenderTwoRoute')\"></svg-icon><span class=\"item-date\">04/04/24</span>\n           </div>\n           <div class=\"avg-item d-flex align-items-center\">\n              <svg-icon [src]=\"getSvgPath('cornerTopArrowRoute')\" (click)=\"showHiddenData()\"></svg-icon>\n           </div>\n        </div>\n     </div>\n     </ng-container>\n\n  </div>\n</ng-container>\n<ng-container  *ngIf=\"isAccidentMap\">\n  <div class=\"infowindow-container\">\n\n    <div class=\"heading-container\">\n        <div class=\"heading  d-flex justify-content-between align-items-center\">\n           <span class=\"header ca-font-extra-bold\" >MS1017010339</span>\n           <app-ca-details-dropdown\n           #detailsDropdown\n           [options]=\"data\"\n           [placement]=\"'right-top'\"\n           [id]=\"item.id!\"\n           [data]=\"item\"\n           [customClassDropDown]=\"\n               'map-list-card-dropdown marker-dropdown-popover'\n           \"\n           (dropDownActions)=\"callBodyAction($event)\"\n       ></app-ca-details-dropdown>\n        </div>\n        <div class=\"action  d-flex justify-content-start align-items-center align-content-center\">\n           <div class=\"side-space d-flex justify-content-center align-items-center\"><svg-icon [src]=\"getSvgPath('vechileRoute')\"></svg-icon><span class=\"count ca-font-semi-bold\">2 Vehicle</span></div>\n           <div class=\"side-space d-flex justify-content-center align-items-center\"><svg-icon [src]=\"getSvgPath('injuryRoute')\"></svg-icon><span  class=\"count ca-font-semi-bold\"> 4 Injury</span></div>\n           <div class=\"side-space d-flex justify-content-center align-items-center\"><svg-icon [src]=\"getSvgPath('hazmatRoute')\"></svg-icon><span  class=\"count ca-font-semi-bold\">Hazmat</span></div>\n           <div class=\"side-space d-flex justify-content-center align-items-center\"><svg-icon [src]=\"getSvgPath('towingRoute')\"></svg-icon><span  class=\"count ca-font-semi-bold\">Towing</span></div>\n        </div>\n     </div>\n\n     <div class=\"personal-info d-flex flex-column align-content-center\">\n        <div class=\"personal-info-items d-flex align-items-start\"><svg-icon [src]=\"getSvgPath('accidentCalenderRoute')\"></svg-icon><span class=\"info ca-font-regular\">04/04/24 08:47 AM</span></div>\n        <div class=\"personal-info-items d-flex align-items-start\"><svg-icon [src]=\"getSvgPath('addressRoute')\"></svg-icon><span class=\"info ca-font-regular\">3181 Donald Hollowell Pkwy NW Atlanta, GA 30318, USA</span></div>\n     </div>\n     <div class=\"weight-info\" >\n        <div class=\"weight-heading ca-font-semi-bold d-flex align-content-center\"><span>Total Weight</span><span class=\"weight-head-count\">21</span></div>\n        <div class=\"weight-info-detail d-flex justify-content-between\">\n           <div>\n              <div class=\"weight-info-item\"><span class=\"item-count ca-font-regular\">Severity Weight</span><span class=\"weight-time ca-font-extra-bold\">7</span> </div>\n           </div>\n           <div>\n              <div class=\"weight-info-item\"><span class=\"item-count ca-font-regular\">Time Weight</span> <span class=\"weight-time ca-font-extra-bold\">3</span></div>\n           </div>\n            <div class=\"dropdown-arrow align-self-end\">\n               <svg-icon [src]=\"getSvgPath('cornerDownArrowRoute')\" (click)=\"showHiddenData()\" *ngIf=\"isDropdownActive\"></svg-icon>\n            </div>\n        </div>\n     </div>\n     <ng-container *ngIf=\"isHidden\">\n\n     <div class=\"transport-info\">\n        <div class=\"transport-container\">\n           <div class=\"driver-info d-flex justify-content-between\">\n              <div>\n                 <div class=\"title ca-font-bold\">Driver </div>\n                 <div class=\"detail ca-font-regular\">A. Djordjevic <svg-icon [src]=\"getSvgPath('ossRoute')\"></svg-icon></div>\n              </div>\n              <div  class=\"side-space\">\n                 <div class=\"title ca-font-bold\">Co-Driver </div>\n                 <div class=\"detail ca-font-regular\">Angelo Trotter</div>\n              </div>\n              <div>\n              </div>\n           </div>\n        </div>\n     </div>\n\n     <div class=\"transport-info\">\n        <div class=\"transport-container\">\n           <div class=\"truck-info d-flex justify-content-between\">\n              <div>\n                 <div class=\"title ca-font-bold\">Truck </div>\n                 <div class=\"detail ca-font-regular\">26985A</div>\n              </div>\n              <div class=\"side-space\">\n                 <div class=\"title ca-font-bold\">Trailer </div>\n                 <div class=\"detail ca-font-regular\">W156100</div>\n              </div>\n              <div class=\"dropdown-arrow align-self-end\">\n               <svg-icon [src]=\"getSvgPath('cornerTopArrowRoute')\" (click)=\"showHiddenData()\" ></svg-icon>\n              </div>\n           </div>\n        </div>\n     </div>\n   </ng-container>\n\n  </div>\n</ng-container>", styles: ["@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}:host{display:block;height:100%;width:100%}.marker-container{width:320px;padding:2px 9px 9px 0}.marker-container .heading-container{border-bottom:1px solid #dadada;padding-bottom:5px;margin-bottom:5px}.marker-container .heading-container .heading{margin-top:2px}.marker-container .heading-container .heading .header{font-family:Montserrat,sans-serif;font-size:15px;line-height:19.5px}.marker-container .heading-container .action .side-space{padding-right:4px}.marker-container .heading-container .action .side-space .count{font-family:Montserrat,sans-serif;font-size:11px;color:#424242;padding:0 7px;position:relative;left:-1px}.marker-container .heading-container .action .side-space .grey-color{color:#919191}.marker-container .personal-info{border-bottom:1px solid #dadada;padding-bottom:0;margin-bottom:5px}.marker-container .personal-info .personal-info-items{padding:1px 0;margin-bottom:3px;font-family:Montserrat,sans-serif}.marker-container .personal-info .personal-info-items .info{font-size:14px;line-height:18px;padding:0 5px;color:#2f2f2f;font-family:Montserrat,sans-serif}.marker-container .working-info{border-bottom:1px solid #dadada;padding-bottom:5px;margin-bottom:5px}.marker-container .working-info .working-heading{line-height:18px;font-family:Montserrat,sans-serif;color:#424242;padding-bottom:5px}.marker-container .working-info .working-info-detail{font-family:Montserrat,sans-serif}.marker-container .working-info .working-info-detail .working-info-item{font-size:11px;line-height:18px;color:#424242}.marker-container .working-info .working-info-detail .working-info-item .working-time{font-size:14px;line-height:18px}.marker-container .load-info{border-bottom:1px solid #dadada;padding-bottom:5px;margin-bottom:5px}.marker-container .load-info .load-heading{font-family:Montserrat,sans-serif;font-size:13px;margin-bottom:5px}.marker-container .load-info .load-heading .load-head-count{background-color:#6c6c6c;border-radius:50%;padding:3px 4px;color:#fff;font-size:7px;margin:1px 4px 0;font-family:Montserrat,sans-serif}.marker-container .load-info .load-info-detail{font-family:Montserrat,sans-serif}.marker-container .load-info .load-info-detail .load-info-item{font-size:12px;line-height:18px;color:#2f2f2f}.marker-container .load-info .load-info-detail .loading-hours{font-size:10px;color:#919191}.marker-container .load-info .load-info-detail .loading-hours .load-time{color:#919191}.marker-container .avg-info .avg-info-detail{font-family:Montserrat,sans-serif}.marker-container .avg-info .avg-info-detail .avg-item .item-date{padding:0 7px;color:#2f2f2f}.infowindow-container{width:300px;padding:2px 9px 9px 0}.infowindow-container .heading-container{border-bottom:1px solid #dadada;padding-bottom:5px;margin-bottom:0}.infowindow-container .heading-container .heading{margin-top:15px;margin-bottom:3px}.infowindow-container .heading-container .heading .header{font-family:Montserrat,sans-serif;font-size:15px;line-height:19.5px}.infowindow-container .heading-container .action .side-space{padding-right:4px}.infowindow-container .heading-container .action .side-space .count{font-family:Montserrat,sans-serif;font-size:11px;color:#424242;padding:0 4px;position:relative;left:-1px}.infowindow-container .heading-container .action .side-space .grey-color{color:#919191}.infowindow-container .personal-info{border-bottom:1px solid #dadada;padding-bottom:5px;margin-bottom:10px;margin-top:10px}.infowindow-container .personal-info .personal-info-items{padding:1px 0;margin-bottom:3px;font-family:Montserrat,sans-serif}.infowindow-container .personal-info .personal-info-items .info{font-size:14px;line-height:18px;padding:0 5px;color:#2f2f2f;font-family:Montserrat,sans-serif}.infowindow-container .weight-info{border-bottom:1px solid #dadada;padding-bottom:5px;margin-bottom:5px}.infowindow-container .weight-info .weight-heading{font-family:Montserrat,sans-serif;font-size:13px;margin-bottom:5px}.infowindow-container .weight-info .weight-heading .weight-head-count{background-color:#6c6c6c;border-radius:50%;padding:3px 4px;color:#fff;font-size:7px;margin:1px 4px 0;font-family:Montserrat,sans-serif}.infowindow-container .weight-info .weight-info-detail{font-family:Montserrat,sans-serif}.infowindow-container .weight-info .weight-info-detail .weight-info-item{font-size:12px;line-height:18px;color:#424242}.infowindow-container .weight-info .weight-info-detail .weight-info-item .weight-time{color:#424242;padding:0 5px}.infowindow-container .transport-info .transport-container{margin-top:15px;font-family:Montserrat,sans-serif;margin-bottom:10px}.infowindow-container .transport-info .transport-container .driver-info .side-space{margin-left:20px}.infowindow-container .transport-info .transport-container .driver-info .title{font-size:11px;line-height:14px}.infowindow-container .transport-info .transport-container .driver-info .detail{font-size:13px;line-height:18px;color:#2f2f2f}.infowindow-container .transport-info .transport-container .truck-info .side-space{margin-left:50px}.infowindow-container .transport-info .transport-container .truck-info .title{font-size:11px;line-height:14px}.infowindow-container .transport-info .transport-container .truck-info .detail{font-size:13px;line-height:18px;color:#2f2f2f}\n"], dependencies: [{ kind: "ngmodule", type: 
+                //modules
+                CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: AngularSvgIconModule }, { kind: "component", type: i2.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }, { kind: "component", type: 
+                //components
+                CaDetailsDropdownComponent$1, selector: "app-ca-details-dropdown", inputs: ["options", "id", "customClassDropDown", "hasVericalDots", "data", "leftIcon", "placement"], outputs: ["dropDownActions", "openModalAction"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaMapDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-ca-map-dropdown", standalone: true, imports: [
+                        //modules
+                        CommonModule,
+                        AngularSvgIconModule,
+                        //components
+                        CaDetailsDropdownComponent$1,
+                    ], providers: [SvgIconRegistryService], template: "<ng-container *ngIf=\"!isAccidentMap\">\n  <div class=\"marker-container\" >\n     <div class=\"heading-container\">\n        <div class=\"heading d-flex justify-content-between align-items-center\">\n           <span class=\"header ca-font-extra-bold\">DOGMA BREWERY LOGISTICS</span>\n           <app-ca-details-dropdown\n               #detailsDropdown\n               [options]=\"data\"\n               [placement]=\"'right-top'\"\n               [id]=\"item.id!\"\n               [data]=\"item\"\n               [customClassDropDown]=\"\n                   'map-list-card-dropdown marker-dropdown-popover'\n               \"\n               (dropDownActions)=\"callBodyAction($event)\"\n           ></app-ca-details-dropdown>\n        </div>\n        <div class=\"action d-flex justify-content-start align-items-center align-content-center\">\n           <div class=\"side-space d-flex justify-content-start align-items-center\"><svg-icon [src]=\"getSvgPath('likeRoute')\"></svg-icon><span class=\"count ca-font-semi-bold\">2</span></div>\n           <div class=\"side-space  d-flex justify-content-start align-items-center\"><svg-icon [src]=\"getSvgPath('dislikeRoute')\"></svg-icon><span  class=\"count grey-color ca-font-semi-bold\">0</span></div>\n           <div class=\"side-space  d-flex justify-content-start align-items-center\"><svg-icon [src]=\"getSvgPath('reviewRoute')\"></svg-icon><span  class=\"count grey-color ca-font-semi-bold\">0</span></div>\n        </div>\n      </div>\n\n      <div class=\"personal-info d-flex flex-column align-content-center\"> \n        <div class=\"personal-info-items d-flex align-items-start\"><svg-icon [src]=\"getSvgPath('phoneRoute')\"></svg-icon><span class=\"info ca-font-regular\">(123) 456-7890</span></div>\n        <div class=\"personal-info-items d-flex align-items-start\"><svg-icon [src]=\"getSvgPath('emailRoute')\"></svg-icon><span class=\"info ca-font-regular\">repairs-office@ivs-trucking.com</span></div>\n        <div class=\"personal-info-items d-flex align-items-start\"><svg-icon [src]=\"getSvgPath('addressRoute')\"></svg-icon><span class=\"info ca-font-regular\">3181 Donald Hollowell Pkwy NW Atlanta, GA 30318, USA</span></div>\n     </div>\n\n     <div class=\"working-info\">\n        <div class=\"working-heading ca-font-extra-bold\">Available Hours</div>\n        <div class=\"working-info-detail d-flex justify-content-between\">\n           <div>\n              <div class=\"working-info-item ca-font-bold\">Shipping</div>\n              <div class=\"working-time ca-font-regular\">10:00 AM - 02:00 PM</div>\n           </div>\n           <div>\n              <div class=\"working-info-item ca-font-bold\">Receiving </div>\n              <div class=\"working-time ca-font-regular\">08:00 AM - 07:00 PM\n              </div>\n           </div>\n           <div class=\"dropdown-arrow align-self-end\">\n            <svg-icon [src]=\"getSvgPath('cornerDownArrowRoute')\" (click)=\"showHiddenData()\" *ngIf=\"isDropdownActive\"></svg-icon>\n         </div>\n        </div>\n     </div>\n\n     <ng-container *ngIf=\"isHidden\">\n     <div class=\"load-info\">\n        <div class=\"load-heading ca-font-semi-bold d-flex align-content-center\"><span>Load</span><span class=\"load-head-count\">12</span></div>\n        <div class=\"load-info-detail d-flex justify-content-between\">\n           <div>\n              <div class=\"load-info-item ca-font-regular\">Pickup <span class=\"item-count ca-font-semi-bold\">7</span></div>\n              <div class=\"loading-hours\">Avg. Loading <span class=\"load-time ca-font-medium\">32m 45s</span></div>\n           </div>\n           <div>\n              <div class=\"load-info-item ca-font-regular\">Delivery <span class=\"item-count ca-font-semi-bold\">5</span></div>\n              <div class=\"loading-hours\">Avg. Offloading <span class=\"load-time ca-font-medium\">43m 23s</span>\n              </div>\n           </div>\n           <div>\n           </div>\n        </div>\n     </div>\n     \n     <div class=\"avg-info\">\n        <div class=\"avg-info-detail  d-flex justify-content-between\">\n           <div class=\"avg-item d-flex align-items-center\">\n              <svg-icon [src]=\"getSvgPath('calenderRoute')\"></svg-icon><span class=\"item-date\">04/04/24</span>\n           </div>\n           <div class=\"avg-item d-flex align-items-center\">\n              <svg-icon [src]=\"getSvgPath('calenderTwoRoute')\"></svg-icon><span class=\"item-date\">04/04/24</span>\n           </div>\n           <div class=\"avg-item d-flex align-items-center\">\n              <svg-icon [src]=\"getSvgPath('cornerTopArrowRoute')\" (click)=\"showHiddenData()\"></svg-icon>\n           </div>\n        </div>\n     </div>\n     </ng-container>\n\n  </div>\n</ng-container>\n<ng-container  *ngIf=\"isAccidentMap\">\n  <div class=\"infowindow-container\">\n\n    <div class=\"heading-container\">\n        <div class=\"heading  d-flex justify-content-between align-items-center\">\n           <span class=\"header ca-font-extra-bold\" >MS1017010339</span>\n           <app-ca-details-dropdown\n           #detailsDropdown\n           [options]=\"data\"\n           [placement]=\"'right-top'\"\n           [id]=\"item.id!\"\n           [data]=\"item\"\n           [customClassDropDown]=\"\n               'map-list-card-dropdown marker-dropdown-popover'\n           \"\n           (dropDownActions)=\"callBodyAction($event)\"\n       ></app-ca-details-dropdown>\n        </div>\n        <div class=\"action  d-flex justify-content-start align-items-center align-content-center\">\n           <div class=\"side-space d-flex justify-content-center align-items-center\"><svg-icon [src]=\"getSvgPath('vechileRoute')\"></svg-icon><span class=\"count ca-font-semi-bold\">2 Vehicle</span></div>\n           <div class=\"side-space d-flex justify-content-center align-items-center\"><svg-icon [src]=\"getSvgPath('injuryRoute')\"></svg-icon><span  class=\"count ca-font-semi-bold\"> 4 Injury</span></div>\n           <div class=\"side-space d-flex justify-content-center align-items-center\"><svg-icon [src]=\"getSvgPath('hazmatRoute')\"></svg-icon><span  class=\"count ca-font-semi-bold\">Hazmat</span></div>\n           <div class=\"side-space d-flex justify-content-center align-items-center\"><svg-icon [src]=\"getSvgPath('towingRoute')\"></svg-icon><span  class=\"count ca-font-semi-bold\">Towing</span></div>\n        </div>\n     </div>\n\n     <div class=\"personal-info d-flex flex-column align-content-center\">\n        <div class=\"personal-info-items d-flex align-items-start\"><svg-icon [src]=\"getSvgPath('accidentCalenderRoute')\"></svg-icon><span class=\"info ca-font-regular\">04/04/24 08:47 AM</span></div>\n        <div class=\"personal-info-items d-flex align-items-start\"><svg-icon [src]=\"getSvgPath('addressRoute')\"></svg-icon><span class=\"info ca-font-regular\">3181 Donald Hollowell Pkwy NW Atlanta, GA 30318, USA</span></div>\n     </div>\n     <div class=\"weight-info\" >\n        <div class=\"weight-heading ca-font-semi-bold d-flex align-content-center\"><span>Total Weight</span><span class=\"weight-head-count\">21</span></div>\n        <div class=\"weight-info-detail d-flex justify-content-between\">\n           <div>\n              <div class=\"weight-info-item\"><span class=\"item-count ca-font-regular\">Severity Weight</span><span class=\"weight-time ca-font-extra-bold\">7</span> </div>\n           </div>\n           <div>\n              <div class=\"weight-info-item\"><span class=\"item-count ca-font-regular\">Time Weight</span> <span class=\"weight-time ca-font-extra-bold\">3</span></div>\n           </div>\n            <div class=\"dropdown-arrow align-self-end\">\n               <svg-icon [src]=\"getSvgPath('cornerDownArrowRoute')\" (click)=\"showHiddenData()\" *ngIf=\"isDropdownActive\"></svg-icon>\n            </div>\n        </div>\n     </div>\n     <ng-container *ngIf=\"isHidden\">\n\n     <div class=\"transport-info\">\n        <div class=\"transport-container\">\n           <div class=\"driver-info d-flex justify-content-between\">\n              <div>\n                 <div class=\"title ca-font-bold\">Driver </div>\n                 <div class=\"detail ca-font-regular\">A. Djordjevic <svg-icon [src]=\"getSvgPath('ossRoute')\"></svg-icon></div>\n              </div>\n              <div  class=\"side-space\">\n                 <div class=\"title ca-font-bold\">Co-Driver </div>\n                 <div class=\"detail ca-font-regular\">Angelo Trotter</div>\n              </div>\n              <div>\n              </div>\n           </div>\n        </div>\n     </div>\n\n     <div class=\"transport-info\">\n        <div class=\"transport-container\">\n           <div class=\"truck-info d-flex justify-content-between\">\n              <div>\n                 <div class=\"title ca-font-bold\">Truck </div>\n                 <div class=\"detail ca-font-regular\">26985A</div>\n              </div>\n              <div class=\"side-space\">\n                 <div class=\"title ca-font-bold\">Trailer </div>\n                 <div class=\"detail ca-font-regular\">W156100</div>\n              </div>\n              <div class=\"dropdown-arrow align-self-end\">\n               <svg-icon [src]=\"getSvgPath('cornerTopArrowRoute')\" (click)=\"showHiddenData()\" ></svg-icon>\n              </div>\n           </div>\n        </div>\n     </div>\n   </ng-container>\n\n  </div>\n</ng-container>", styles: ["@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}:host{display:block;height:100%;width:100%}.marker-container{width:320px;padding:2px 9px 9px 0}.marker-container .heading-container{border-bottom:1px solid #dadada;padding-bottom:5px;margin-bottom:5px}.marker-container .heading-container .heading{margin-top:2px}.marker-container .heading-container .heading .header{font-family:Montserrat,sans-serif;font-size:15px;line-height:19.5px}.marker-container .heading-container .action .side-space{padding-right:4px}.marker-container .heading-container .action .side-space .count{font-family:Montserrat,sans-serif;font-size:11px;color:#424242;padding:0 7px;position:relative;left:-1px}.marker-container .heading-container .action .side-space .grey-color{color:#919191}.marker-container .personal-info{border-bottom:1px solid #dadada;padding-bottom:0;margin-bottom:5px}.marker-container .personal-info .personal-info-items{padding:1px 0;margin-bottom:3px;font-family:Montserrat,sans-serif}.marker-container .personal-info .personal-info-items .info{font-size:14px;line-height:18px;padding:0 5px;color:#2f2f2f;font-family:Montserrat,sans-serif}.marker-container .working-info{border-bottom:1px solid #dadada;padding-bottom:5px;margin-bottom:5px}.marker-container .working-info .working-heading{line-height:18px;font-family:Montserrat,sans-serif;color:#424242;padding-bottom:5px}.marker-container .working-info .working-info-detail{font-family:Montserrat,sans-serif}.marker-container .working-info .working-info-detail .working-info-item{font-size:11px;line-height:18px;color:#424242}.marker-container .working-info .working-info-detail .working-info-item .working-time{font-size:14px;line-height:18px}.marker-container .load-info{border-bottom:1px solid #dadada;padding-bottom:5px;margin-bottom:5px}.marker-container .load-info .load-heading{font-family:Montserrat,sans-serif;font-size:13px;margin-bottom:5px}.marker-container .load-info .load-heading .load-head-count{background-color:#6c6c6c;border-radius:50%;padding:3px 4px;color:#fff;font-size:7px;margin:1px 4px 0;font-family:Montserrat,sans-serif}.marker-container .load-info .load-info-detail{font-family:Montserrat,sans-serif}.marker-container .load-info .load-info-detail .load-info-item{font-size:12px;line-height:18px;color:#2f2f2f}.marker-container .load-info .load-info-detail .loading-hours{font-size:10px;color:#919191}.marker-container .load-info .load-info-detail .loading-hours .load-time{color:#919191}.marker-container .avg-info .avg-info-detail{font-family:Montserrat,sans-serif}.marker-container .avg-info .avg-info-detail .avg-item .item-date{padding:0 7px;color:#2f2f2f}.infowindow-container{width:300px;padding:2px 9px 9px 0}.infowindow-container .heading-container{border-bottom:1px solid #dadada;padding-bottom:5px;margin-bottom:0}.infowindow-container .heading-container .heading{margin-top:15px;margin-bottom:3px}.infowindow-container .heading-container .heading .header{font-family:Montserrat,sans-serif;font-size:15px;line-height:19.5px}.infowindow-container .heading-container .action .side-space{padding-right:4px}.infowindow-container .heading-container .action .side-space .count{font-family:Montserrat,sans-serif;font-size:11px;color:#424242;padding:0 4px;position:relative;left:-1px}.infowindow-container .heading-container .action .side-space .grey-color{color:#919191}.infowindow-container .personal-info{border-bottom:1px solid #dadada;padding-bottom:5px;margin-bottom:10px;margin-top:10px}.infowindow-container .personal-info .personal-info-items{padding:1px 0;margin-bottom:3px;font-family:Montserrat,sans-serif}.infowindow-container .personal-info .personal-info-items .info{font-size:14px;line-height:18px;padding:0 5px;color:#2f2f2f;font-family:Montserrat,sans-serif}.infowindow-container .weight-info{border-bottom:1px solid #dadada;padding-bottom:5px;margin-bottom:5px}.infowindow-container .weight-info .weight-heading{font-family:Montserrat,sans-serif;font-size:13px;margin-bottom:5px}.infowindow-container .weight-info .weight-heading .weight-head-count{background-color:#6c6c6c;border-radius:50%;padding:3px 4px;color:#fff;font-size:7px;margin:1px 4px 0;font-family:Montserrat,sans-serif}.infowindow-container .weight-info .weight-info-detail{font-family:Montserrat,sans-serif}.infowindow-container .weight-info .weight-info-detail .weight-info-item{font-size:12px;line-height:18px;color:#424242}.infowindow-container .weight-info .weight-info-detail .weight-info-item .weight-time{color:#424242;padding:0 5px}.infowindow-container .transport-info .transport-container{margin-top:15px;font-family:Montserrat,sans-serif;margin-bottom:10px}.infowindow-container .transport-info .transport-container .driver-info .side-space{margin-left:20px}.infowindow-container .transport-info .transport-container .driver-info .title{font-size:11px;line-height:14px}.infowindow-container .transport-info .transport-container .driver-info .detail{font-size:13px;line-height:18px;color:#2f2f2f}.infowindow-container .transport-info .transport-container .truck-info .side-space{margin-left:50px}.infowindow-container .transport-info .transport-container .truck-info .title{font-size:11px;line-height:14px}.infowindow-container .transport-info .transport-container .truck-info .detail{font-size:13px;line-height:18px;color:#2f2f2f}\n"] }]
+        }], propDecorators: { isAccidentMap: [{
+                type: Input
+            }], bodyActions: [{
+                type: Output
+            }] } });
+
+class CaNoteComponent {
+    constructor() {
+        this.saveNoteValue = new EventEmitter();
+        this.parking = false;
+        this.dispatchIndex = -1;
+        this.isDispatch = false;
+        this.placeholder = "Write Something...";
+        this._noteWidth = 250;
+        this._parentWidth = 250;
+        this.noteIcon = this._note !== "" ? NoteSvgRoutes.noteRoute : NoteSvgRoutes.noteFilledRoute;
+        this.buttonsExpanded = false;
+        this.selectedPaternColor = "#6C6C6C";
+        //properties and values
+        this.isExpanded = false;
+        this.noteOpened = false;
+        this.value = "";
+        this.isFocused = false;
+        this.preventClosing = false;
+        //saving
+        this.savingNote = false;
+        this.savedValue = "";
+        this.destroy$ = new Subject();
+    }
+    set noteWidth(value) {
+        this._noteWidth = value;
+    }
+    ngAfterViewInit() {
+        this.value = this._note;
+    }
+    checkFocus(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.isFocused = true;
+        this.leaveThisOpened = true;
+        this.isExpanded = true;
+        setTimeout(() => {
+            this.buttonsExpanded = true;
+        }, 150);
+    }
+    toggleNote(data, t2) {
+        this.preventClosing = true;
+        setTimeout(() => {
+            this.preventClosing = false;
+        }, 200);
+        if (t2?.isOpen()) {
+            if (this.openedAll) {
+                this.leaveThisOpened = true;
+            }
+            else if (!this.isExpanded) {
+                this.leaveThisOpened = false;
+                this.isExpanded = true;
+                this.buttonsExpanded = true;
+                setTimeout(() => {
+                    t2.open();
+                }, 1);
+            }
+            else {
+                this.isExpanded = false;
+                this.buttonsExpanded = false;
+                this.leaveThisOpened = false;
+                this.noteOpened = false;
+                this._note = this.value;
+                t2.close();
+            }
+            this.showCollorPattern = false;
+        }
+        else {
+            if (!data || data == "" || this.openedAll) {
+                this.buttonsExpanded = true;
+                this.isExpanded = true;
+            }
+            this.leaveThisOpened = true;
+            setTimeout(() => {
+                this.noteOpened = true;
+            }, 1);
+            t2.open();
+        }
+    }
+    prepareForTextRange() {
+        this.isFocused = false;
+        this.selectionTaken = window.getSelection();
+        if (this.selectionTaken.rangeCount && this.selectionTaken.getRangeAt) {
+            this.range = this.selectionTaken.getRangeAt(0);
+            this.selectionTaken.removeAllRanges();
+            this.selectionTaken.addRange(this.range);
+        }
+    }
+    preventMouseDown(ev) {
+        ev.stopPropagation();
+        ev.preventDefault();
+    }
+    valueChange(event, deleteAll) {
+        if (event) {
+            const target = event.target;
+            this.value = target.innerHTML;
+        }
+        else {
+            this.value = event;
+        }
+        this.lastTypeTime = moment().unix();
+        this.checkNoteImage(this.value);
+    }
+    saveNote(autoSave, deleteAll) {
+        setTimeout(() => {
+            if (!autoSave && this.openedAll) {
+                this.closeNote();
+            }
+        }, 200);
+        if (this.value == "<br>") {
+            this.value = this.value.replace("<br>", "");
+        }
+        this.savedValue = this.value;
+        if (deleteAll)
+            this.closeNote();
+    }
+    closeNote() {
+        this.noteOpened = false;
+        this.leaveThisOpened = false;
+        this.showCollorPattern = false;
+        this.isExpanded = false;
+        this.buttonsExpanded = false;
+        this._note = this.value;
+        this.transferNoteData();
+    }
+    popoverClosed() {
+        if (!this.preventClosing) {
+            this.closeNote();
+        }
+        this.preventClosing = false;
+    }
+    onPaste(event) {
+        CopyPasteHelper.onPaste(event);
+    }
+    transferNoteData() {
+        if (this.dispatchIndex === -1)
+            this.saveNoteValue.emit(this.value);
+        else
+            this.saveNoteValue.emit({
+                note: this.value,
+                dispatchIndex: this.dispatchIndex,
+            });
+    }
+    checkNoteImage(note) {
+        if (note && note != "") {
+            this.noteIcon = this.getSvgPath("noteFilledRoute");
+        }
+        else {
+            this.noteIcon = this.getSvgPath("noteRoute");
+        }
+    }
+    getSvgPath(propertyName) {
+        return NoteSvgRoutes[propertyName];
+    }
+    ngOnDestroy() {
+        this.leaveThisOpened = false;
+        this.showCollorPattern = false;
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaNoteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CaNoteComponent, isStandalone: true, selector: "app-ca-note", inputs: { parking: "parking", dispatchIndex: "dispatchIndex", type: "type", parentWidth: "parentWidth", openedAll: "openedAll", isDispatch: "isDispatch", noteWidth: "noteWidth" }, outputs: { saveNoteValue: "saveNoteValue" }, viewQueries: [{ propertyName: "main_editor", first: true, predicate: ["main_editor"], descendants: true }, { propertyName: "note_popover", first: true, predicate: ["note_popover"], descendants: true }, { propertyName: "noteContainer", first: true, predicate: ["noteContainer"], descendants: true }], ngImport: i0, template: "<div\n  class=\"all_note_holder\"\n  [class.closed_main_holder.d-flex]=\"!openedAll && noteOpened\"\n  [class.opened_main_all_holder.d-flex.align-items-center]=\"openedAll\"\n  #t2=\"ngbPopover\"\n  [ngbPopover]=\"note_popover\"\n  [autoClose]=\"'outside'\"\n  [container]=\"'body'\"\n  [placement]=\"'right-top'\"\n  popoverClass=\"my-note-popover\"\n  triggers=\"manual\"\n  (click)=\"openedAll ? toggleNote(_note, t2) : ''\"\n>\n  <ng-container\n    *ngIf=\"!openedAll && (noteOpened || (!noteOpened && !savingNote))\"\n  >\n    <div\n      class=\"note_button_hold\"\n      [ngClass]=\"{\n        'note-normal-icon': !openedAll,\n        'note-note-empty': !_note && !openedAll,\n        'note-all-expanded': noteOpened,\n      }\"\n      [tooltipBackground]=\"'#424242'\"\n      ngbTooltip\n      [mainTooltip]=\"noteOpened ? 'Close Note' : 'Note'\"\n      position=\"bottom\"\n    >\n      <svg-icon\n        #t2=\"ngbPopover\"\n        [ngbPopover]=\"note_popover\"\n        [autoClose]=\"'outside'\"\n        class=\"note-btn\"\n        [container]=\"'body'\"\n        [placement]=\"'right-top'\"\n        [animation]=\"false\"\n        popoverClass=\"my-note-popover\"\n        triggers=\"manual\"\n        (click)=\"toggleNote(_note, t2)\"\n        (hidden)=\"popoverClosed()\"\n        [src]=\"noteIcon\"\n      >\n      </svg-icon>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"!openedAll && !noteOpened && savingNote\">\n    <div class=\"spinner d-flex justify-content-center align-items-center\">\n      <app-ca-spinner\n        [size]=\"'small'\"\n        [color]=\"'blueDark'\"\n      ></app-ca-spinner></div\n  ></ng-container>\n  <ng-container *ngIf=\"openedAll\">\n    <div [innerHTML]=\"_note | safeHtml\" class=\"note_inner_text\"></div\n  ></ng-container>\n</div>\n\n<ng-template #note_popover let-data=\"data\">\n  <div\n    class=\"kendo-editor-note-wrapper\"\n    [class.opened_all_hold]=\"openedAll\"\n    [class.closed_note_hold]=\"!openedAll && noteOpened\"\n    [class.dispatch]=\"isDispatch\"\n  >\n    <div\n      [class.expanded]=\"isExpanded\"\n      class=\"k-widget k-editor custom_editor\"\n      [ngStyle]=\"{\n        width: parentWidth ? _parentWidth + 'px' : _noteWidth + 'px',\n      }\"\n    >\n      <div\n        (blur)=\"prepareForTextRange()\"\n        (focus)=\"checkFocus($event)\"\n        (input)=\"valueChange($event)\"\n        [class.not_expanded]=\"!isExpanded\"\n        [class.parking_text_hold]=\"parking\"\n        [class.opened_all_editor]=\"openedAll\"\n        [innerHTML]=\"_note | safeHtml\"\n        class=\"editor\"\n        contenteditable=\"true\"\n        spellcheck=\"false\"\n        id=\"main_editor\"\n        #mainEditorDiv\n        (paste)=\"onPaste($event)\"\n        Placeholder\n        [placeholder]=\"placeholder\"\n      ></div>\n      <ng-container *ngIf=\"isExpanded\">\n        <div class=\"container_separate\">\n          <div class=\"container_separate_inner\"></div>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"savingNote && isExpanded\">\n        <div class=\"spinner\">\n          <app-ca-spinner\n            [size]=\"'small'\"\n            [color]=\"'blueDark'\"\n          ></app-ca-spinner>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"isExpanded\">\n        <div\n          class=\"note_container d-flex align-items-center justify-content-between\"\n          (click)=\"preventMouseDown($event)\"\n        >\n          <app-ca-note-container\n            #noteContainer\n            [isExpanded]=\"isExpanded\"\n            [range]=\"range\"\n            [selectionTaken]=\"selectionTaken\"\n            [value]=\"value\"\n            [parking]=\"parking\"\n            [popoverNote]=\"true\"\n            [type]=\"'dark'\"\n          ></app-ca-note-container>\n          <ng-container *ngIf=\"!savingNote && value\">\n            <div\n              [tooltipBackground]=\"'#424242'\"\n              ngbTooltip\n              [mainTooltip]=\"'Delete'\"\n              position=\"bottom\"\n            >\n              <svg-icon\n                [src]=\"getSvgPath('trashRoute')\"\n                (click)=\"valueChange('', true)\"\n              ></svg-icon>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap\";@import\"/node_modules/bootstrap/dist/css/bootstrap.css\";.ca-font-thin{font-weight:100!important}.ca-font-extra-light{font-weight:200!important}.ca-font-light{font-weight:300!important}.ca-font-regular{font-weight:400!important}.ca-font-medium{font-weight:500!important}.ca-font-semi-bold{font-weight:600!important}.ca-font-bold{font-weight:700!important}.ca-font-extra-bold{font-weight:800!important}.ca-font-black{font-weight:900!important}@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.table-progress-popover{background-color:unset!important;margin-left:-10px}.table-progress-popover .progress-dropdown{margin-top:-6px;width:260px;height:200px;background:#2f2f2f;border-radius:3px;padding:8px;box-shadow:0 0 4px #00000026;overflow:hidden;animation:progressAnimation .25s ease-in-out}.table-progress-popover .progress-dropdown .progress-header .progress-title{font-size:18px;font-weight:600;color:#dadada}.table-progress-popover .progress-dropdown .progress-header .progress-title span{font-weight:400}.table-progress-popover .progress-dropdown .progress-header .progress-total{font-size:14px;line-height:17px;color:#dadada}.table-progress-popover .progress-dropdown .table-progress-bar-container{width:100%;height:8px;margin-top:6px;border-radius:2px;overflow:hidden}.table-progress-popover .progress-dropdown .table-progress-bar-container .table-progress-bar{height:100%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-dual-info-container .progress-info-container{width:50%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container{margin-top:10px}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-title{margin-bottom:2px;font-size:11px;font-weight:700;line-height:14px;color:#ffffffb2}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-text{font-size:14px;line-height:18px;color:#dadada}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@keyframes progressAnimation{0%{height:0px}to{height:220px}}ngb-popover-window{padding:unset!important;border:unset!important}ngb-popover-window .popover-arrow{display:none!important}ngb-popover-window .popover-body{padding:unset!important}*{margin:0;font-family:Roboto,Helvetica Neue,sans-serif}html{scroll-behavior:auto!important}.gm-style-iw-chr,.gm-style-iw-tc{display:none}.gm-style .gm-style-iw-c{border-radius:0}.gm-style-iw{overflow-y:auto!important;overflow-x:hidden!important}.gm-style-iw>div{overflow:visible!important}.infoWindow{overflow:hidden!important}.gm-style-iw-d,.gm-style-iw.gm-style-iw-c{max-height:350px!important}.my-note-popover{margin-right:4px;box-shadow:none!important;background-color:transparent}.my-note-popover:after{display:none!important}.my-note-popover.editor:after{display:none!important}.closed_main_holder{position:relative}.all_note_holder .note_inner_text{display:-webkit-box;font-size:11px;color:#6c6c6c;overflow:hidden;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;-webkit-user-select:none;user-select:none}.all_note_holder.opened_main_all_holder{height:100%}.all_note_holder.opened_main_all_holder .note_inner_text{flex:1}.all_note_holder .note_button_hold{height:26px;width:26px;padding:4px;border-radius:2px}.all_note_holder .note_button_hold:hover{background-color:#91919133}.all_note_holder .note_button_hold:hover svg path{fill:#424242}.all_note_holder .note_button_hold .note-btn{width:18px;height:18px;cursor:pointer}.all_note_holder .note_button_hold svg-icon svg{display:flex}.all_note_holder .note_button_hold.note-all-expanded{background-color:#424242!important}.all_note_holder .note_button_hold.note-all-expanded svg path{fill:#ffffffb2!important}.all_note_holder .spinner{width:18px;height:18px}.note-normal-icon,.note-note-empty,.note-all-expanded{width:16px;height:18px;background-repeat:no-repeat}.note_holder_span{width:100%}.note_holder_span .kendo-editor-note-wrapper{position:relative}.note_holder_span .kendo-editor-note-wrapper .k-editor{width:100%}.note_holder_span .kendo-editor-note-wrapper .custom_editor{min-width:100%}.note_holder_span .kendo-editor-note-wrapper .custom_editor .editor{width:100%;text-align:left}.note_holder_span .kendo-editor-note-wrapper .custom_editor .editor:after{display:none}.note_holder_span .kendo-editor-note-wrapper .custom_editor .editor.not_expanded{box-shadow:none!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.note_holder_span .kendo-editor-note-wrapper .custom_editor.expanded{z-index:100}.kendo-editor-note-wrapper .save-note-check{width:22px;height:22px;right:28px;bottom:2px;border-radius:2px}.kendo-editor-note-wrapper .save-note-check svg-icon{display:flex;height:22px;justify-content:center;align-items:center}.kendo-editor-note-wrapper .save-note-check svg-icon path{fill:#b7b7b7}.kendo-editor-note-wrapper .save-note-check:hover{background-color:#dadada}.kendo-editor-note-wrapper .save-note-check:hover svg-icon path{fill:#fff}.kendo-editor-note-wrapper .save-note-check.close_note{right:2px}.kendo-editor-note-wrapper .custom_editor{position:relative;display:block;line-height:1.5;height:auto;min-width:159px;background-color:#1d1d1d}.kendo-editor-note-wrapper .custom_editor.expanded{box-shadow:0 0 4px 0 0 0 4px 0 #00000026!important}.kendo-editor-note-wrapper .custom_editor .editor{min-height:34px;max-height:64px;width:250px;border-radius:3px;background-color:#1d1d1d;white-space:break-spaces;overflow:auto;outline:none;color:#dadada;font-size:11px;margin:0 0 0 auto;line-height:14px;padding:3px 6px;font-weight:500}.kendo-editor-note-wrapper .custom_editor .editor::selection{color:#6c6c6c;background:#6c6c6c33}.kendo-editor-note-wrapper .custom_editor .editor span::selection,.kendo-editor-note-wrapper .custom_editor .editor div::selection,.kendo-editor-note-wrapper .custom_editor .editor b::selection{color:#6c6c6c;background:#6c6c6c33}.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#919191\"],.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#424242\"]{color:#dadada}.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#919191\"]::selection,.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#424242\"]::selection{color:#dadada!important;background:#dadada33!important}.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#6692f1\"],.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#3b73ed\"]{color:#6692f1}.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#6692f1\"]::selection,.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#3b73ed\"]::selection{color:#6692f1!important;background:#6692f133!important}.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#56b4ac\"],.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#259f94\"]{color:#56b4ac}.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#56b4ac\"]::selection,.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#259f94\"]::selection{color:#56b4ac!important;background:#56b4ac33!important}.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#e66767\"],.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#df3c3c\"]{color:#e66767}.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#e66767\"]::selection,.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#df3c3c\"]::selection{color:#e66767!important;background:#e6676733!important}.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#fab15c\"],.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#f89b2e\"]{color:#fab15c}.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#fab15c\"]::selection,.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#f89b2e\"]::selection{color:#fab15c!important;background:#fab15c33!important}.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#b370f0\"],.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#9e47ec\"]{color:#b370f0}.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#b370f0\"]::selection,.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#9e47ec\"]::selection{color:#b370f0!important;background:#b370f033!important}.kendo-editor-note-wrapper .custom_editor .editor.opened_all_editor{width:100%}.kendo-editor-note-wrapper .custom_editor .editor.not_expanded{height:32px;border-radius:3px;box-shadow:0 0 4px 0 0 0 4px 0 #00000026!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.kendo-editor-note-wrapper .custom_editor .editor.not_expanded.openedAll:after{border-left:5px solid #6c6c6c}.kendo-editor-note-wrapper .custom_editor .editor.parking_text_hold{max-height:124px}.kendo-editor-note-wrapper .custom_editor .spinner{position:absolute;right:2px;bottom:6px;width:18px;height:18px}.kendo-editor-note-wrapper .custom_editor .container_separate{padding:0 4px}.kendo-editor-note-wrapper .custom_editor .container_separate .container_separate_inner{height:1px;border-radius:1px;background-color:#424242}.kendo-editor-note-wrapper .custom_editor .note_container{width:100%;padding:4px 4px 4px 2px}.kendo-editor-note-wrapper .custom_editor .note_container:first-child{flex:1}.kendo-editor-note-wrapper .custom_editor .note_container svg-icon{height:14px;width:14px;cursor:pointer}.kendo-editor-note-wrapper .custom_editor .note_container svg-icon svg{display:flex}.kendo-editor-note-wrapper .custom_editor .note_container svg-icon:hover svg path{fill:#f4bebe}.kendo-editor-note-wrapper.opened_all_hold{position:absolute;top:0;left:-2px;width:100%;z-index:1}.kendo-editor-note-wrapper.opened_all_hold .custom_editor .editor::selection{color:#6c6c6c;background:#6c6c6c33}.kendo-editor-note-wrapper.opened_all_hold .custom_editor .editor span::selection{color:#6c6c6c!important;background:#6c6c6c33!important}.kendo-editor-note-wrapper.dispatch{left:2px}.kendo-editor-note-wrapper.closed_note_hold{position:relative;top:-8px}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:#424242}::-webkit-scrollbar-thumb{background:#919191;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#919191}\n"], dependencies: [{ kind: "ngmodule", type: 
+                // Module
+                CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i1$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "ngmodule", type: AngularSvgIconModule }, { kind: "component", type: i2.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }, { kind: "component", type: 
+                //Components
+                CaNoteContainerComponent$1, selector: "app-ca-note-container", inputs: ["value", "range", "selectionTaken", "isExpanded", "parking", "popoverNote", "isVisibleArrow", "type"], outputs: ["stopBlurRemoveTimeout"] }, { kind: "component", type: CaAppTooltipV2Component$1, selector: "mainTooltip, [mainTooltip]", inputs: ["mainTooltip", "position", "openTooltipDelay", "tooltipBackground", "tooltipColor", "tooltipTextAlign", "tooltipMarginTop"] }, { kind: "component", type: CaSpinnerComponent$1, selector: "app-ca-spinner", inputs: ["size", "color", "isBarSpinner"] }, { kind: "directive", type: 
+                //Directives
+                PlaceholderDirective, selector: "[Placeholder]", inputs: ["placeholder"] }, { kind: "pipe", type: 
+                // Pipe
+                SafeHtmlPipe, name: "safeHtml" }], animations: [pickupAnimation, noteLongAnimation], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaNoteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-ca-note", encapsulation: ViewEncapsulation.None, standalone: true, imports: [
+                        // Module
+                        CommonModule,
+                        NgbModule,
+                        AngularSvgIconModule,
+                        //Components
+                        CaNoteContainerComponent$1,
+                        CaAppTooltipV2Component$1,
+                        CaSpinnerComponent$1,
+                        //Directives
+                        PlaceholderDirective,
+                        // Pipe
+                        SafeHtmlPipe,
+                    ], animations: [pickupAnimation, noteLongAnimation], template: "<div\n  class=\"all_note_holder\"\n  [class.closed_main_holder.d-flex]=\"!openedAll && noteOpened\"\n  [class.opened_main_all_holder.d-flex.align-items-center]=\"openedAll\"\n  #t2=\"ngbPopover\"\n  [ngbPopover]=\"note_popover\"\n  [autoClose]=\"'outside'\"\n  [container]=\"'body'\"\n  [placement]=\"'right-top'\"\n  popoverClass=\"my-note-popover\"\n  triggers=\"manual\"\n  (click)=\"openedAll ? toggleNote(_note, t2) : ''\"\n>\n  <ng-container\n    *ngIf=\"!openedAll && (noteOpened || (!noteOpened && !savingNote))\"\n  >\n    <div\n      class=\"note_button_hold\"\n      [ngClass]=\"{\n        'note-normal-icon': !openedAll,\n        'note-note-empty': !_note && !openedAll,\n        'note-all-expanded': noteOpened,\n      }\"\n      [tooltipBackground]=\"'#424242'\"\n      ngbTooltip\n      [mainTooltip]=\"noteOpened ? 'Close Note' : 'Note'\"\n      position=\"bottom\"\n    >\n      <svg-icon\n        #t2=\"ngbPopover\"\n        [ngbPopover]=\"note_popover\"\n        [autoClose]=\"'outside'\"\n        class=\"note-btn\"\n        [container]=\"'body'\"\n        [placement]=\"'right-top'\"\n        [animation]=\"false\"\n        popoverClass=\"my-note-popover\"\n        triggers=\"manual\"\n        (click)=\"toggleNote(_note, t2)\"\n        (hidden)=\"popoverClosed()\"\n        [src]=\"noteIcon\"\n      >\n      </svg-icon>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"!openedAll && !noteOpened && savingNote\">\n    <div class=\"spinner d-flex justify-content-center align-items-center\">\n      <app-ca-spinner\n        [size]=\"'small'\"\n        [color]=\"'blueDark'\"\n      ></app-ca-spinner></div\n  ></ng-container>\n  <ng-container *ngIf=\"openedAll\">\n    <div [innerHTML]=\"_note | safeHtml\" class=\"note_inner_text\"></div\n  ></ng-container>\n</div>\n\n<ng-template #note_popover let-data=\"data\">\n  <div\n    class=\"kendo-editor-note-wrapper\"\n    [class.opened_all_hold]=\"openedAll\"\n    [class.closed_note_hold]=\"!openedAll && noteOpened\"\n    [class.dispatch]=\"isDispatch\"\n  >\n    <div\n      [class.expanded]=\"isExpanded\"\n      class=\"k-widget k-editor custom_editor\"\n      [ngStyle]=\"{\n        width: parentWidth ? _parentWidth + 'px' : _noteWidth + 'px',\n      }\"\n    >\n      <div\n        (blur)=\"prepareForTextRange()\"\n        (focus)=\"checkFocus($event)\"\n        (input)=\"valueChange($event)\"\n        [class.not_expanded]=\"!isExpanded\"\n        [class.parking_text_hold]=\"parking\"\n        [class.opened_all_editor]=\"openedAll\"\n        [innerHTML]=\"_note | safeHtml\"\n        class=\"editor\"\n        contenteditable=\"true\"\n        spellcheck=\"false\"\n        id=\"main_editor\"\n        #mainEditorDiv\n        (paste)=\"onPaste($event)\"\n        Placeholder\n        [placeholder]=\"placeholder\"\n      ></div>\n      <ng-container *ngIf=\"isExpanded\">\n        <div class=\"container_separate\">\n          <div class=\"container_separate_inner\"></div>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"savingNote && isExpanded\">\n        <div class=\"spinner\">\n          <app-ca-spinner\n            [size]=\"'small'\"\n            [color]=\"'blueDark'\"\n          ></app-ca-spinner>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"isExpanded\">\n        <div\n          class=\"note_container d-flex align-items-center justify-content-between\"\n          (click)=\"preventMouseDown($event)\"\n        >\n          <app-ca-note-container\n            #noteContainer\n            [isExpanded]=\"isExpanded\"\n            [range]=\"range\"\n            [selectionTaken]=\"selectionTaken\"\n            [value]=\"value\"\n            [parking]=\"parking\"\n            [popoverNote]=\"true\"\n            [type]=\"'dark'\"\n          ></app-ca-note-container>\n          <ng-container *ngIf=\"!savingNote && value\">\n            <div\n              [tooltipBackground]=\"'#424242'\"\n              ngbTooltip\n              [mainTooltip]=\"'Delete'\"\n              position=\"bottom\"\n            >\n              <svg-icon\n                [src]=\"getSvgPath('trashRoute')\"\n                (click)=\"valueChange('', true)\"\n              ></svg-icon>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap\";@import\"/node_modules/bootstrap/dist/css/bootstrap.css\";.ca-font-thin{font-weight:100!important}.ca-font-extra-light{font-weight:200!important}.ca-font-light{font-weight:300!important}.ca-font-regular{font-weight:400!important}.ca-font-medium{font-weight:500!important}.ca-font-semi-bold{font-weight:600!important}.ca-font-bold{font-weight:700!important}.ca-font-extra-bold{font-weight:800!important}.ca-font-black{font-weight:900!important}@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.table-progress-popover{background-color:unset!important;margin-left:-10px}.table-progress-popover .progress-dropdown{margin-top:-6px;width:260px;height:200px;background:#2f2f2f;border-radius:3px;padding:8px;box-shadow:0 0 4px #00000026;overflow:hidden;animation:progressAnimation .25s ease-in-out}.table-progress-popover .progress-dropdown .progress-header .progress-title{font-size:18px;font-weight:600;color:#dadada}.table-progress-popover .progress-dropdown .progress-header .progress-title span{font-weight:400}.table-progress-popover .progress-dropdown .progress-header .progress-total{font-size:14px;line-height:17px;color:#dadada}.table-progress-popover .progress-dropdown .table-progress-bar-container{width:100%;height:8px;margin-top:6px;border-radius:2px;overflow:hidden}.table-progress-popover .progress-dropdown .table-progress-bar-container .table-progress-bar{height:100%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-dual-info-container .progress-info-container{width:50%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container{margin-top:10px}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-title{margin-bottom:2px;font-size:11px;font-weight:700;line-height:14px;color:#ffffffb2}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-text{font-size:14px;line-height:18px;color:#dadada}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@keyframes progressAnimation{0%{height:0px}to{height:220px}}ngb-popover-window{padding:unset!important;border:unset!important}ngb-popover-window .popover-arrow{display:none!important}ngb-popover-window .popover-body{padding:unset!important}*{margin:0;font-family:Roboto,Helvetica Neue,sans-serif}html{scroll-behavior:auto!important}.gm-style-iw-chr,.gm-style-iw-tc{display:none}.gm-style .gm-style-iw-c{border-radius:0}.gm-style-iw{overflow-y:auto!important;overflow-x:hidden!important}.gm-style-iw>div{overflow:visible!important}.infoWindow{overflow:hidden!important}.gm-style-iw-d,.gm-style-iw.gm-style-iw-c{max-height:350px!important}.my-note-popover{margin-right:4px;box-shadow:none!important;background-color:transparent}.my-note-popover:after{display:none!important}.my-note-popover.editor:after{display:none!important}.closed_main_holder{position:relative}.all_note_holder .note_inner_text{display:-webkit-box;font-size:11px;color:#6c6c6c;overflow:hidden;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;-webkit-user-select:none;user-select:none}.all_note_holder.opened_main_all_holder{height:100%}.all_note_holder.opened_main_all_holder .note_inner_text{flex:1}.all_note_holder .note_button_hold{height:26px;width:26px;padding:4px;border-radius:2px}.all_note_holder .note_button_hold:hover{background-color:#91919133}.all_note_holder .note_button_hold:hover svg path{fill:#424242}.all_note_holder .note_button_hold .note-btn{width:18px;height:18px;cursor:pointer}.all_note_holder .note_button_hold svg-icon svg{display:flex}.all_note_holder .note_button_hold.note-all-expanded{background-color:#424242!important}.all_note_holder .note_button_hold.note-all-expanded svg path{fill:#ffffffb2!important}.all_note_holder .spinner{width:18px;height:18px}.note-normal-icon,.note-note-empty,.note-all-expanded{width:16px;height:18px;background-repeat:no-repeat}.note_holder_span{width:100%}.note_holder_span .kendo-editor-note-wrapper{position:relative}.note_holder_span .kendo-editor-note-wrapper .k-editor{width:100%}.note_holder_span .kendo-editor-note-wrapper .custom_editor{min-width:100%}.note_holder_span .kendo-editor-note-wrapper .custom_editor .editor{width:100%;text-align:left}.note_holder_span .kendo-editor-note-wrapper .custom_editor .editor:after{display:none}.note_holder_span .kendo-editor-note-wrapper .custom_editor .editor.not_expanded{box-shadow:none!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.note_holder_span .kendo-editor-note-wrapper .custom_editor.expanded{z-index:100}.kendo-editor-note-wrapper .save-note-check{width:22px;height:22px;right:28px;bottom:2px;border-radius:2px}.kendo-editor-note-wrapper .save-note-check svg-icon{display:flex;height:22px;justify-content:center;align-items:center}.kendo-editor-note-wrapper .save-note-check svg-icon path{fill:#b7b7b7}.kendo-editor-note-wrapper .save-note-check:hover{background-color:#dadada}.kendo-editor-note-wrapper .save-note-check:hover svg-icon path{fill:#fff}.kendo-editor-note-wrapper .save-note-check.close_note{right:2px}.kendo-editor-note-wrapper .custom_editor{position:relative;display:block;line-height:1.5;height:auto;min-width:159px;background-color:#1d1d1d}.kendo-editor-note-wrapper .custom_editor.expanded{box-shadow:0 0 4px 0 0 0 4px 0 #00000026!important}.kendo-editor-note-wrapper .custom_editor .editor{min-height:34px;max-height:64px;width:250px;border-radius:3px;background-color:#1d1d1d;white-space:break-spaces;overflow:auto;outline:none;color:#dadada;font-size:11px;margin:0 0 0 auto;line-height:14px;padding:3px 6px;font-weight:500}.kendo-editor-note-wrapper .custom_editor .editor::selection{color:#6c6c6c;background:#6c6c6c33}.kendo-editor-note-wrapper .custom_editor .editor span::selection,.kendo-editor-note-wrapper .custom_editor .editor div::selection,.kendo-editor-note-wrapper .custom_editor .editor b::selection{color:#6c6c6c;background:#6c6c6c33}.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#919191\"],.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#424242\"]{color:#dadada}.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#919191\"]::selection,.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#424242\"]::selection{color:#dadada!important;background:#dadada33!important}.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#6692f1\"],.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#3b73ed\"]{color:#6692f1}.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#6692f1\"]::selection,.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#3b73ed\"]::selection{color:#6692f1!important;background:#6692f133!important}.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#56b4ac\"],.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#259f94\"]{color:#56b4ac}.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#56b4ac\"]::selection,.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#259f94\"]::selection{color:#56b4ac!important;background:#56b4ac33!important}.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#e66767\"],.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#df3c3c\"]{color:#e66767}.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#e66767\"]::selection,.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#df3c3c\"]::selection{color:#e66767!important;background:#e6676733!important}.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#fab15c\"],.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#f89b2e\"]{color:#fab15c}.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#fab15c\"]::selection,.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#f89b2e\"]::selection{color:#fab15c!important;background:#fab15c33!important}.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#b370f0\"],.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#9e47ec\"]{color:#b370f0}.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#b370f0\"]::selection,.kendo-editor-note-wrapper .custom_editor .editor font[color=\"#9e47ec\"]::selection{color:#b370f0!important;background:#b370f033!important}.kendo-editor-note-wrapper .custom_editor .editor.opened_all_editor{width:100%}.kendo-editor-note-wrapper .custom_editor .editor.not_expanded{height:32px;border-radius:3px;box-shadow:0 0 4px 0 0 0 4px 0 #00000026!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.kendo-editor-note-wrapper .custom_editor .editor.not_expanded.openedAll:after{border-left:5px solid #6c6c6c}.kendo-editor-note-wrapper .custom_editor .editor.parking_text_hold{max-height:124px}.kendo-editor-note-wrapper .custom_editor .spinner{position:absolute;right:2px;bottom:6px;width:18px;height:18px}.kendo-editor-note-wrapper .custom_editor .container_separate{padding:0 4px}.kendo-editor-note-wrapper .custom_editor .container_separate .container_separate_inner{height:1px;border-radius:1px;background-color:#424242}.kendo-editor-note-wrapper .custom_editor .note_container{width:100%;padding:4px 4px 4px 2px}.kendo-editor-note-wrapper .custom_editor .note_container:first-child{flex:1}.kendo-editor-note-wrapper .custom_editor .note_container svg-icon{height:14px;width:14px;cursor:pointer}.kendo-editor-note-wrapper .custom_editor .note_container svg-icon svg{display:flex}.kendo-editor-note-wrapper .custom_editor .note_container svg-icon:hover svg path{fill:#f4bebe}.kendo-editor-note-wrapper.opened_all_hold{position:absolute;top:0;left:-2px;width:100%;z-index:1}.kendo-editor-note-wrapper.opened_all_hold .custom_editor .editor::selection{color:#6c6c6c;background:#6c6c6c33}.kendo-editor-note-wrapper.opened_all_hold .custom_editor .editor span::selection{color:#6c6c6c!important;background:#6c6c6c33!important}.kendo-editor-note-wrapper.dispatch{left:2px}.kendo-editor-note-wrapper.closed_note_hold{position:relative;top:-8px}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:#424242}::-webkit-scrollbar-thumb{background:#919191;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#919191}\n"] }]
+        }], propDecorators: { saveNoteValue: [{
+                type: Output
+            }], parking: [{
+                type: Input
+            }], dispatchIndex: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], parentWidth: [{
+                type: Input
+            }], openedAll: [{
+                type: Input
+            }], isDispatch: [{
+                type: Input
+            }], noteWidth: [{
+                type: Input
+            }], main_editor: [{
+                type: ViewChild,
+                args: ["main_editor"]
+            }], note_popover: [{
+                type: ViewChild,
+                args: ["note_popover"]
+            }], noteContainer: [{
+                type: ViewChild,
+                args: ["noteContainer"]
+            }] } });
+
+class CaNoteContainerComponent {
+    constructor() {
+        this.parking = false;
+        this.popoverNote = false;
+        this.isVisibleArrow = true;
+        this.stopBlurRemoveTimeout = new EventEmitter();
+        //Colors
+        this.selectedPaternColor = NoteSelectedColorStringEnum.GRAY_RGB;
+        this.activeOptions = {
+            ...NoteConfigConstants.noteActiveOptions,
+        };
+        //Timeout
+        this.lastSavedIndex = -1;
+        this.closedPattern = false;
+        this.hoveringArrowPicker = false;
+        this.destroy$ = new Subject();
+    }
+    ngOnInit() {
+        this.setContainerColors();
+    }
+    filterContainersColor() {
+        this.containerColors.sort((a) => {
+            if (a[NoteDefaultStringEnum.COLOR] !== this.selectedColorName.color) {
+                return 1;
+            }
+            return -1;
+        });
+    }
+    executeEditor(action, color, indx) {
+        this.stopBlurRemoveTimeout.emit();
+        if (indx || indx === 0)
+            this.selectedColorName = this.containerColors[indx];
+        if (this.range) {
+            this.selectionTaken.removeAllRanges();
+            this.selectionTaken.addRange(this.range);
+        }
+        if (action !== NoteDefaultStringEnum.FORE_COLOR2) {
+            this.showCollorPattern = false;
+            this.activeOptions[action] = !this.activeOptions[action];
+            if (!this.activeOptions[action]) {
+                if (this.value.replace("<br>", "") === "")
+                    this.selectionTaken.removeAllRanges();
+                document.execCommand(NoteDefaultStringEnum.CSS_STYLE, false, NoteDefaultStringEnum.FALSE);
+                document.execCommand(action, false);
+            }
+            else {
+                document.execCommand(action, false);
+            }
+        }
+        else {
+            if (this.lastSavedIndex != indx)
+                this.filterContainersColor();
+            this.lastSavedIndex = indx || -1;
+            setTimeout(() => {
+                setTimeout(() => {
+                    this.selectedPaternColor = color || "grey";
+                    document.execCommand(NoteDefaultStringEnum.FORE_COLOR2, false, color);
+                });
+            });
+        }
+    }
+    togglePattern() {
+        this.showCollorPattern = !this.showCollorPattern;
+        if (!this.showCollorPattern)
+            setTimeout(() => {
+                this.closedPattern = false;
+            }, 300);
+        else
+            this.closedPattern = true;
+    }
+    hoveringArrow(value) {
+        this.hoveringArrowPicker = value;
+    }
+    setContainerColors() {
+        this.containerColors =
+            this.type === NoteDefaultStringEnum.DARK
+                ? [...NoteConfigConstants.noteDarkColors]
+                : [...NoteConfigConstants.noteLightColors];
+        this.selectedColorName = {
+            name: this.containerColors[0].name,
+            color: this.containerColors[0].color,
+        };
+    }
+    /**Function retrun id */
+    identity(index) {
+        return index;
+    }
+    getSvgPath(propertyName) {
+        return NoteContainerSvgRoutes[propertyName];
+    }
+    ngOnDestroy() {
+        this.showCollorPattern = false;
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaNoteContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CaNoteContainerComponent, isStandalone: true, selector: "app-ca-note-container", inputs: { value: "value", range: "range", selectionTaken: "selectionTaken", isExpanded: "isExpanded", parking: "parking", popoverNote: "popoverNote", isVisibleArrow: "isVisibleArrow", type: "type" }, outputs: { stopBlurRemoveTimeout: "stopBlurRemoveTimeout" }, ngImport: i0, template: "<div\n  [class.active]=\"isExpanded\"\n  [class.parking_editor_menu]=\"parking\"\n  [class.opened_parking_editor.justify-content-end]=\"\n    parking && showCollorPattern\n  \"\n  [class.dark]=\"type === 'dark'\"\n  class=\"editor_menu d-flex align-items-center\"\n>\n  <ng-container *ngIf=\"!parking || (parking && !showCollorPattern)\">\n    <div class=\"font_editor d-flex\" [class.parking_font_editor]=\"parking\">\n      <div\n        (click)=\"executeEditor('bold')\"\n        [class.active]=\"activeOptions.bold\"\n        [tooltipBackground]=\"type === 'dark' ? '#2F2F2F' : '#6C6C6C'\"\n        ngbTooltip\n        [mainTooltip]=\"'Bold'\"\n        position=\"bottom\"\n        class=\"editor_buttons main_commands bold_text d-flex justify-content-center align-items-center\"\n      >\n        <svg-icon [src]=\"getSvgPath('boldRoute')\"></svg-icon>\n      </div>\n      <div\n        (click)=\"executeEditor('italic')\"\n        [class.active]=\"activeOptions.italic\"\n        [tooltipBackground]=\"type === 'dark' ? '#2F2F2F' : '#6C6C6C'\"\n        ngbTooltip\n        [mainTooltip]=\"'Italic'\"\n        position=\"bottom\"\n        class=\"editor_buttons d-flex justify-content-center align-items-center main_commands italic_text\"\n      >\n        <svg-icon [src]=\"getSvgPath('itallicRoute')\"></svg-icon>\n      </div>\n      <div\n        (click)=\"executeEditor('underline')\"\n        [class.active]=\"activeOptions.underline\"\n        [tooltipBackground]=\"type === 'dark' ? '#2F2F2F' : '#6C6C6C'\"\n        ngbTooltip\n        [mainTooltip]=\"'Underline'\"\n        position=\"bottom\"\n        class=\"editor_buttons d-flex justify-content-center align-items-center main_commands underline_text\"\n      >\n        <svg-icon [src]=\"getSvgPath('underlineRoute')\"></svg-icon>\n      </div>\n      <div class=\"note_separator\"></div>\n    </div>\n    <div\n      (click)=\"togglePattern()\"\n      [class.no_opacity]=\"showCollorPattern\"\n      [class.parking_tooltip.d-flex.justify-content-end]=\"\n        parking && showCollorPattern\n      \"\n      class=\"editor_buttons d-flex justify-content-center align-items-center text_color justify-content-end\"\n      [class.popover_text_color.justify-content-start]=\"popoverNote\"\n      [class.active]=\"showCollorPattern\"\n    >\n      <div\n        class=\"colors_patter d-flex align-items-center\"\n        id=\"colors_patter\"\n        [class.closed_pattern]=\"!closedPattern\"\n        [class.input_note.flex-reverse]=\"!popoverNote\"\n      >\n        <ng-container\n          *ngFor=\"\n            let paternCol of containerColors;\n            let indx = index;\n            trackBy: identity\n          \"\n        >\n          <div\n            (click)=\"executeEditor('foreColor', paternCol.color, indx)\"\n            [style.backgroundColor]=\"paternCol.color\"\n            [class.hide_elements]=\"indx && !showCollorPattern\"\n            [tooltipBackground]=\"\n              indx && !showCollorPattern\n                ? ''\n                : type === 'dark'\n                  ? '#2F2F2F'\n                  : '#6C6C6C'\n            \"\n            ngbTooltip\n            [mainTooltip]=\"\n              indx === 0 && !showCollorPattern\n                ? 'Color Picker'\n                : indx && !showCollorPattern\n                  ? ''\n                  : !indx && showCollorPattern\n                    ? 'Close'\n                    : paternCol.name\n            \"\n            position=\"bottom\"\n            class=\"editor_buttons_colors d-flex justify-content-center align-items-center\"\n            [class.justify-content-start]=\"popoverNote\"\n            [ngStyle]=\"{\n              opacity: !showCollorPattern && indx ? 0 : 1,\n            }\"\n            (mouseenter)=\"\n              hoveringArrow(showCollorPattern && !indx ? true : false)\n            \"\n            (mouseleave)=\"hoveringArrow(false)\"\n          >\n            <ng-container *ngIf=\"!indx\">\n              <div\n                class=\"color_picker_arrow d-flex\"\n                [class.flip_arrow]=\"\n                  (!popoverNote && showCollorPattern) ||\n                  (popoverNote && !showCollorPattern)\n                \"\n                [class.regular_icon]=\"\n                  !popoverNote && showCollorPattern && !hoveringArrowPicker\n                \"\n                [class.active]=\"showCollorPattern\"\n                [class.hovering_picker]=\"\n                  !hoveringArrowPicker && showCollorPattern\n                \"\n              >\n                <svg-icon\n                  [src]=\"\n                    !hoveringArrowPicker && showCollorPattern\n                      ? getSvgPath('checkRoute')\n                      : getSvgPath('arrowRoute')\n                  \"\n                ></svg-icon>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"!parking && !popoverNote && isVisibleArrow\">\n    <div class=\"note_border_line\" [class.dark]=\"type === 'dark'\"></div>\n  </ng-container>\n</div>\n", styles: ["@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.editor_menu{height:18px;padding-left:2px;transition:.3s ease-in-out;opacity:0;pointer-events:none}.editor_menu.active{opacity:1;pointer-events:all}.editor_menu.parking_editor_menu{padding:0 5px 0 4px}.editor_menu .font_editor.parking_font_editor{flex:1}.editor_menu .editor_buttons{width:18px;height:18px;font-family:WebComponentsIcons,sans-serif;font-size:20px;color:#919191;cursor:pointer}.editor_menu .editor_buttons .color_picker_arrow{display:none!important}.editor_menu .editor_buttons.italic_text,.editor_menu .editor_buttons.underline_text{margin-left:4px}.editor_menu .editor_buttons.active svg-icon path{fill:#6c6c6c}.editor_menu .editor_buttons svg-icon{display:flex;justify-content:center;align-items:center}.editor_menu .editor_buttons svg-icon path{fill:#b7b7b7}.editor_menu .editor_buttons svg-icon:hover path{fill:#919191}.editor_menu .editor_buttons.text_color{overflow:hidden}.editor_menu .editor_buttons:hover,.editor_menu .editor_buttons.active{background-color:#f3f3f3;opacity:1;color:#919191;border-radius:1px}.editor_menu .editor_buttons:hover.text_color,.editor_menu .editor_buttons.active.text_color{background-color:transparent}.editor_menu .editor_buttons:before{position:absolute;height:100%;width:100%;text-align:center;line-height:1.6;background-repeat:no-repeat;background-position:center;cursor:pointer}.editor_menu .editor_buttons.text_color{position:relative;transition:.3s ease-in-out;border-radius:2px;padding:2px;width:18px;background-repeat:no-repeat;background-position:calc(100% - 3px) center;background-size:6px auto}.editor_menu .editor_buttons.text_color.no_opacity{opacity:1;width:98px}.editor_menu .editor_buttons.text_color.parking_tooltip{width:100%}.editor_menu .editor_buttons.text_color:hover{opacity:1;background-color:#eee}.editor_menu .editor_buttons.text_color:hover .color_picker_arrow{display:flex!important}.editor_menu .editor_buttons.text_color .colors_patter{height:18px!important;border-radius:1px;z-index:10}.editor_menu .editor_buttons.text_color .colors_patter.closed_pattern{width:18px;overflow:hidden}.editor_menu .editor_buttons.text_color .colors_patter div{min-width:14px;max-width:14px;height:14px;margin:0 1px;cursor:pointer}.editor_menu .editor_buttons.text_color .colors_patter div:first-child{margin-right:0}.editor_menu .editor_buttons.text_color .colors_patter div:hover:not(:first-child){transform:scale(1.1);transform-origin:center}.editor_menu .editor_buttons.text_color .colors_patter div svg-icon{height:100%}.editor_menu .editor_buttons.text_color .colors_patter div svg-icon svg path{fill:#fff}.editor_menu .editor_buttons.text_color .colors_patter .editor_buttons_colors{position:relative;border-radius:1px;transition:transform opacity .3s ease-in-out;overflow:hidden}.editor_menu .editor_buttons.text_color .colors_patter .editor_buttons_colors.hide_elements{opacity:0}.editor_menu .editor_buttons.text_color .colors_patter .editor_buttons_colors .color_picker_arrow{position:absolute;z-index:11;background-color:transparent!important}.editor_menu .editor_buttons.text_color .colors_patter .editor_buttons_colors .color_picker_arrow.flip_arrow{transform:scaleX(-1)}.editor_menu .editor_buttons.text_color .colors_patter .editor_buttons_colors .color_picker_arrow.regular_icon{transform:scaleX(1)}.editor_menu .editor_buttons.text_color .colors_patter .editor_buttons_colors .color_picker_arrow svg-icon svg{display:flex;width:6px;height:10px}.editor_menu .editor_buttons.text_color .colors_patter .editor_buttons_colors .color_picker_arrow svg-icon svg path{fill:#fff}.editor_menu .editor_buttons.text_color .colors_patter .editor_buttons_colors .color_picker_arrow.hovering_picker svg-icon svg{width:10px;height:10px}.editor_menu .editor_buttons.text_color:hover,.editor_menu .editor_buttons.text_color.active{background-color:#eee!important}.editor_menu .editor_buttons.main_commands{background-color:transparent}.editor_menu .editor_buttons svg-icon path{fill:#919191}.editor_menu .editor_buttons:hover svg-icon path{fill:#424242}.editor_menu .editor_buttons.active svg-icon path{fill:#6692f1}.editor_menu .editor_buttons.active:hover svg-icon path{fill:#0b49d1}.editor_menu.dark .editor_buttons:hover,.editor_menu.dark .editor_buttons.active{background-color:#424242!important}.editor_menu.dark .editor_buttons.main_commands{background-color:transparent!important}.editor_menu.dark .editor_buttons svg-icon path{fill:#919191!important}.editor_menu.dark .editor_buttons:hover svg-icon path{fill:#dadada!important}.editor_menu.dark .editor_buttons.active svg-icon path{fill:#6692f1!important}.editor_menu.dark .editor_buttons.active:hover svg-icon path{fill:#bed0f9!important}.editor_menu.dark .colors_patter div{margin:0 1px}.editor_menu.dark .colors_patter div:nth-child(1){margin-right:1px!important;margin-left:0!important}.editor_menu.dark .colors_patter .editor_buttons_colors .color_picker_arrow svg-icon path{fill:#424242!important}.editor_menu .note_separator{margin:0 2px}.editor_menu .note_border_line{height:24px;width:2px;margin:0 4px;background-color:#f3f3f3;border-radius:1px}.editor_menu .note_border_line.dark{background-color:#424242}\n"], dependencies: [{ kind: "ngmodule", type: 
+                // Module
+                CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AngularSvgIconModule }, { kind: "component", type: i2.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: 
+                // Component
+                CaAppTooltipV2Component$1, selector: "mainTooltip, [mainTooltip]", inputs: ["mainTooltip", "position", "openTooltipDelay", "tooltipBackground", "tooltipColor", "tooltipTextAlign", "tooltipMarginTop"] }], animations: [pickupAnimation] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaNoteContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-ca-note-container", standalone: true, imports: [
+                        // Module
+                        CommonModule,
+                        AngularSvgIconModule,
+                        NgbModule,
+                        // Component
+                        CaAppTooltipV2Component$1,
+                    ], animations: [pickupAnimation], template: "<div\n  [class.active]=\"isExpanded\"\n  [class.parking_editor_menu]=\"parking\"\n  [class.opened_parking_editor.justify-content-end]=\"\n    parking && showCollorPattern\n  \"\n  [class.dark]=\"type === 'dark'\"\n  class=\"editor_menu d-flex align-items-center\"\n>\n  <ng-container *ngIf=\"!parking || (parking && !showCollorPattern)\">\n    <div class=\"font_editor d-flex\" [class.parking_font_editor]=\"parking\">\n      <div\n        (click)=\"executeEditor('bold')\"\n        [class.active]=\"activeOptions.bold\"\n        [tooltipBackground]=\"type === 'dark' ? '#2F2F2F' : '#6C6C6C'\"\n        ngbTooltip\n        [mainTooltip]=\"'Bold'\"\n        position=\"bottom\"\n        class=\"editor_buttons main_commands bold_text d-flex justify-content-center align-items-center\"\n      >\n        <svg-icon [src]=\"getSvgPath('boldRoute')\"></svg-icon>\n      </div>\n      <div\n        (click)=\"executeEditor('italic')\"\n        [class.active]=\"activeOptions.italic\"\n        [tooltipBackground]=\"type === 'dark' ? '#2F2F2F' : '#6C6C6C'\"\n        ngbTooltip\n        [mainTooltip]=\"'Italic'\"\n        position=\"bottom\"\n        class=\"editor_buttons d-flex justify-content-center align-items-center main_commands italic_text\"\n      >\n        <svg-icon [src]=\"getSvgPath('itallicRoute')\"></svg-icon>\n      </div>\n      <div\n        (click)=\"executeEditor('underline')\"\n        [class.active]=\"activeOptions.underline\"\n        [tooltipBackground]=\"type === 'dark' ? '#2F2F2F' : '#6C6C6C'\"\n        ngbTooltip\n        [mainTooltip]=\"'Underline'\"\n        position=\"bottom\"\n        class=\"editor_buttons d-flex justify-content-center align-items-center main_commands underline_text\"\n      >\n        <svg-icon [src]=\"getSvgPath('underlineRoute')\"></svg-icon>\n      </div>\n      <div class=\"note_separator\"></div>\n    </div>\n    <div\n      (click)=\"togglePattern()\"\n      [class.no_opacity]=\"showCollorPattern\"\n      [class.parking_tooltip.d-flex.justify-content-end]=\"\n        parking && showCollorPattern\n      \"\n      class=\"editor_buttons d-flex justify-content-center align-items-center text_color justify-content-end\"\n      [class.popover_text_color.justify-content-start]=\"popoverNote\"\n      [class.active]=\"showCollorPattern\"\n    >\n      <div\n        class=\"colors_patter d-flex align-items-center\"\n        id=\"colors_patter\"\n        [class.closed_pattern]=\"!closedPattern\"\n        [class.input_note.flex-reverse]=\"!popoverNote\"\n      >\n        <ng-container\n          *ngFor=\"\n            let paternCol of containerColors;\n            let indx = index;\n            trackBy: identity\n          \"\n        >\n          <div\n            (click)=\"executeEditor('foreColor', paternCol.color, indx)\"\n            [style.backgroundColor]=\"paternCol.color\"\n            [class.hide_elements]=\"indx && !showCollorPattern\"\n            [tooltipBackground]=\"\n              indx && !showCollorPattern\n                ? ''\n                : type === 'dark'\n                  ? '#2F2F2F'\n                  : '#6C6C6C'\n            \"\n            ngbTooltip\n            [mainTooltip]=\"\n              indx === 0 && !showCollorPattern\n                ? 'Color Picker'\n                : indx && !showCollorPattern\n                  ? ''\n                  : !indx && showCollorPattern\n                    ? 'Close'\n                    : paternCol.name\n            \"\n            position=\"bottom\"\n            class=\"editor_buttons_colors d-flex justify-content-center align-items-center\"\n            [class.justify-content-start]=\"popoverNote\"\n            [ngStyle]=\"{\n              opacity: !showCollorPattern && indx ? 0 : 1,\n            }\"\n            (mouseenter)=\"\n              hoveringArrow(showCollorPattern && !indx ? true : false)\n            \"\n            (mouseleave)=\"hoveringArrow(false)\"\n          >\n            <ng-container *ngIf=\"!indx\">\n              <div\n                class=\"color_picker_arrow d-flex\"\n                [class.flip_arrow]=\"\n                  (!popoverNote && showCollorPattern) ||\n                  (popoverNote && !showCollorPattern)\n                \"\n                [class.regular_icon]=\"\n                  !popoverNote && showCollorPattern && !hoveringArrowPicker\n                \"\n                [class.active]=\"showCollorPattern\"\n                [class.hovering_picker]=\"\n                  !hoveringArrowPicker && showCollorPattern\n                \"\n              >\n                <svg-icon\n                  [src]=\"\n                    !hoveringArrowPicker && showCollorPattern\n                      ? getSvgPath('checkRoute')\n                      : getSvgPath('arrowRoute')\n                  \"\n                ></svg-icon>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"!parking && !popoverNote && isVisibleArrow\">\n    <div class=\"note_border_line\" [class.dark]=\"type === 'dark'\"></div>\n  </ng-container>\n</div>\n", styles: ["@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.editor_menu{height:18px;padding-left:2px;transition:.3s ease-in-out;opacity:0;pointer-events:none}.editor_menu.active{opacity:1;pointer-events:all}.editor_menu.parking_editor_menu{padding:0 5px 0 4px}.editor_menu .font_editor.parking_font_editor{flex:1}.editor_menu .editor_buttons{width:18px;height:18px;font-family:WebComponentsIcons,sans-serif;font-size:20px;color:#919191;cursor:pointer}.editor_menu .editor_buttons .color_picker_arrow{display:none!important}.editor_menu .editor_buttons.italic_text,.editor_menu .editor_buttons.underline_text{margin-left:4px}.editor_menu .editor_buttons.active svg-icon path{fill:#6c6c6c}.editor_menu .editor_buttons svg-icon{display:flex;justify-content:center;align-items:center}.editor_menu .editor_buttons svg-icon path{fill:#b7b7b7}.editor_menu .editor_buttons svg-icon:hover path{fill:#919191}.editor_menu .editor_buttons.text_color{overflow:hidden}.editor_menu .editor_buttons:hover,.editor_menu .editor_buttons.active{background-color:#f3f3f3;opacity:1;color:#919191;border-radius:1px}.editor_menu .editor_buttons:hover.text_color,.editor_menu .editor_buttons.active.text_color{background-color:transparent}.editor_menu .editor_buttons:before{position:absolute;height:100%;width:100%;text-align:center;line-height:1.6;background-repeat:no-repeat;background-position:center;cursor:pointer}.editor_menu .editor_buttons.text_color{position:relative;transition:.3s ease-in-out;border-radius:2px;padding:2px;width:18px;background-repeat:no-repeat;background-position:calc(100% - 3px) center;background-size:6px auto}.editor_menu .editor_buttons.text_color.no_opacity{opacity:1;width:98px}.editor_menu .editor_buttons.text_color.parking_tooltip{width:100%}.editor_menu .editor_buttons.text_color:hover{opacity:1;background-color:#eee}.editor_menu .editor_buttons.text_color:hover .color_picker_arrow{display:flex!important}.editor_menu .editor_buttons.text_color .colors_patter{height:18px!important;border-radius:1px;z-index:10}.editor_menu .editor_buttons.text_color .colors_patter.closed_pattern{width:18px;overflow:hidden}.editor_menu .editor_buttons.text_color .colors_patter div{min-width:14px;max-width:14px;height:14px;margin:0 1px;cursor:pointer}.editor_menu .editor_buttons.text_color .colors_patter div:first-child{margin-right:0}.editor_menu .editor_buttons.text_color .colors_patter div:hover:not(:first-child){transform:scale(1.1);transform-origin:center}.editor_menu .editor_buttons.text_color .colors_patter div svg-icon{height:100%}.editor_menu .editor_buttons.text_color .colors_patter div svg-icon svg path{fill:#fff}.editor_menu .editor_buttons.text_color .colors_patter .editor_buttons_colors{position:relative;border-radius:1px;transition:transform opacity .3s ease-in-out;overflow:hidden}.editor_menu .editor_buttons.text_color .colors_patter .editor_buttons_colors.hide_elements{opacity:0}.editor_menu .editor_buttons.text_color .colors_patter .editor_buttons_colors .color_picker_arrow{position:absolute;z-index:11;background-color:transparent!important}.editor_menu .editor_buttons.text_color .colors_patter .editor_buttons_colors .color_picker_arrow.flip_arrow{transform:scaleX(-1)}.editor_menu .editor_buttons.text_color .colors_patter .editor_buttons_colors .color_picker_arrow.regular_icon{transform:scaleX(1)}.editor_menu .editor_buttons.text_color .colors_patter .editor_buttons_colors .color_picker_arrow svg-icon svg{display:flex;width:6px;height:10px}.editor_menu .editor_buttons.text_color .colors_patter .editor_buttons_colors .color_picker_arrow svg-icon svg path{fill:#fff}.editor_menu .editor_buttons.text_color .colors_patter .editor_buttons_colors .color_picker_arrow.hovering_picker svg-icon svg{width:10px;height:10px}.editor_menu .editor_buttons.text_color:hover,.editor_menu .editor_buttons.text_color.active{background-color:#eee!important}.editor_menu .editor_buttons.main_commands{background-color:transparent}.editor_menu .editor_buttons svg-icon path{fill:#919191}.editor_menu .editor_buttons:hover svg-icon path{fill:#424242}.editor_menu .editor_buttons.active svg-icon path{fill:#6692f1}.editor_menu .editor_buttons.active:hover svg-icon path{fill:#0b49d1}.editor_menu.dark .editor_buttons:hover,.editor_menu.dark .editor_buttons.active{background-color:#424242!important}.editor_menu.dark .editor_buttons.main_commands{background-color:transparent!important}.editor_menu.dark .editor_buttons svg-icon path{fill:#919191!important}.editor_menu.dark .editor_buttons:hover svg-icon path{fill:#dadada!important}.editor_menu.dark .editor_buttons.active svg-icon path{fill:#6692f1!important}.editor_menu.dark .editor_buttons.active:hover svg-icon path{fill:#bed0f9!important}.editor_menu.dark .colors_patter div{margin:0 1px}.editor_menu.dark .colors_patter div:nth-child(1){margin-right:1px!important;margin-left:0!important}.editor_menu.dark .colors_patter .editor_buttons_colors .color_picker_arrow svg-icon path{fill:#424242!important}.editor_menu .note_separator{margin:0 2px}.editor_menu .note_border_line{height:24px;width:2px;margin:0 4px;background-color:#f3f3f3;border-radius:1px}.editor_menu .note_border_line.dark{background-color:#424242}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { value: [{
+                type: Input
+            }], range: [{
+                type: Input
+            }], selectionTaken: [{
+                type: Input
+            }], isExpanded: [{
+                type: Input
+            }], parking: [{
+                type: Input
+            }], popoverNote: [{
+                type: Input
+            }], isVisibleArrow: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], stopBlurRemoveTimeout: [{
+                type: Output
+            }] } });
+
+class CaPayrollListSummaryOverviewComponent {
+    constructor() {
+        this.isItemExpanded = true;
+        this.isExpanded = false;
+        this.index = -1;
+        this.toggle = new EventEmitter();
+        this.animationMarginParams = {
+            marginTop: "12px",
+            marginBottom: "12px",
+        };
+    }
+    getSvgPath(propertyName) {
+        return PayrollListSummaryOverviewSvgRoutes[propertyName];
+    }
+    toggleAccordion() {
+        this.isExpanded = !this.isExpanded;
+        this.toggle.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaPayrollListSummaryOverviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CaPayrollListSummaryOverviewComponent, isStandalone: true, selector: "app-ca-payroll-list-summary-overview", inputs: { item: "item", isExpanded: "isExpanded", index: "index", animationMarginParams: "animationMarginParams" }, outputs: { toggle: "toggle" }, ngImport: i0, template: "<div class=\"accordion\" id=\"accordionExample\">\n  <div class=\"accordion-item\">\n    <div>\n      <div\n        class=\"d-flex justify-content-between align-items-center accordion-header\"\n        [ngClass]=\"{ 'is-expanded': isExpanded }\"\n        (click)=\"toggleAccordion()\"\n      >\n        <div\n          class=\"d-flex header-content ca-font-extra-bold\"\n          [ngClass]=\"{ 'is-expanded': isExpanded }\"\n        >\n          <div class=\"me-1\">\n            <span>{{ item.text }}</span>\n          </div>\n          <div class=\"me-1\">({{ item.type }})</div>\n          <div\n            class=\"small me-1 heading-count d-flex align-items-center\"\n            [ngClass]=\"{ 'is-expanded': isExpanded }\"\n          >\n            <div\n              class=\"item-count ca-font-bold\"\n              [ngClass]=\"{ 'is-expanded': isExpanded }\"\n            >\n              {{ item.itemCount }}\n            </div>\n          </div>\n        </div>\n        <div\n          class=\"d-flex align-items-center header-content-right ca-font-bold\"\n        >\n          <ng-container *ngIf=\"item.isOpen\">\n            <div class=\"me-2 date\" [ngClass]=\"{ 'is-expanded': isExpanded }\">\n              {{ item.date | date: \"dd/MM/yyyy\" }}\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"item.status !== 'success'; else successStatus\">\n            <div\n              class=\"d-flex amount me-1\"\n              [ngClass]=\"{\n                danger: item.status === 'danger',\n                positive: item.status === 'positive',\n              }\"\n              [class.is-danger-expanded]=\"\n                item.status === 'danger' && isExpanded\n              \"\n              [class.is-positive-expanded]=\"\n                item.status === 'positive' && isExpanded\n              \"\n            >\n              <div class=\"me-1\">{{ item.money | currency }}</div>\n              <div>({{ item.moneyCounter }})</div>\n            </div>\n          </ng-container>\n          <ng-template #successStatus\n            ><div\n              class=\"d-flex amount me-1\"\n              [ngClass]=\"{\n                success: item.status === 'success',\n              }\"\n              [class.is-success-expanded]=\"\n                item.status === 'success' && isExpanded\n              \"\n            >\n              <div class=\"me-1\">ALL PAID</div>\n            </div>\n          </ng-template>\n          <div\n            class=\"accordion-toggle-icon\"\n            [ngClass]=\"{\n              svg_rotate: isExpanded,\n              rotate_back: !isExpanded,\n            }\"\n          >\n            <svg-icon [src]=\"getSvgPath('downArrow')\" alt=\"Toggle\"></svg-icon>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      [id]=\"'collapseOne' + index\"\n      class=\"accordion-collapse\"\n      [class.show]=\"isExpanded\"\n      data-bs-parent=\"#accordionExample\"\n      [@showHideCardBody]=\"{\n        value: isExpanded.toString(),\n        params: animationMarginParams,\n      }\"\n    >\n      <ng-container>\n        <div class=\"accordion-body\">\n          <!-- Add the expanded content here -->\n          {{ item.description }}\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap\";@import\"/node_modules/bootstrap/dist/css/bootstrap.css\";.ca-font-thin{font-weight:100!important}.ca-font-extra-light{font-weight:200!important}.ca-font-light{font-weight:300!important}.ca-font-regular{font-weight:400!important}.ca-font-medium{font-weight:500!important}.ca-font-semi-bold{font-weight:600!important}.ca-font-bold{font-weight:700!important}.ca-font-extra-bold{font-weight:800!important}.ca-font-black{font-weight:900!important}@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.table-progress-popover{background-color:unset!important;margin-left:-10px}.table-progress-popover .progress-dropdown{margin-top:-6px;width:260px;height:200px;background:#2f2f2f;border-radius:3px;padding:8px;box-shadow:0 0 4px #00000026;overflow:hidden;animation:progressAnimation .25s ease-in-out}.table-progress-popover .progress-dropdown .progress-header .progress-title{font-size:18px;font-weight:600;color:#dadada}.table-progress-popover .progress-dropdown .progress-header .progress-title span{font-weight:400}.table-progress-popover .progress-dropdown .progress-header .progress-total{font-size:14px;line-height:17px;color:#dadada}.table-progress-popover .progress-dropdown .table-progress-bar-container{width:100%;height:8px;margin-top:6px;border-radius:2px;overflow:hidden}.table-progress-popover .progress-dropdown .table-progress-bar-container .table-progress-bar{height:100%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-dual-info-container .progress-info-container{width:50%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container{margin-top:10px}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-title{margin-bottom:2px;font-size:11px;font-weight:700;line-height:14px;color:#ffffffb2}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-text{font-size:14px;line-height:18px;color:#dadada}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@keyframes progressAnimation{0%{height:0px}to{height:220px}}ngb-popover-window{padding:unset!important;border:unset!important}ngb-popover-window .popover-arrow{display:none!important}ngb-popover-window .popover-body{padding:unset!important}*{margin:0;font-family:Roboto,Helvetica Neue,sans-serif}html{scroll-behavior:auto!important}.gm-style-iw-chr,.gm-style-iw-tc{display:none}.gm-style .gm-style-iw-c{border-radius:0}.gm-style-iw{overflow-y:auto!important;overflow-x:hidden!important}.gm-style-iw>div{overflow:visible!important}.infoWindow{overflow:hidden!important}.gm-style-iw-d,.gm-style-iw.gm-style-iw-c{max-height:350px!important}.accordion-item{border:unset;border-radius:4px;margin-bottom:3px}.accordion-item .accordion-header{cursor:pointer;padding:10px}.accordion-item .accordion-header.is-expanded{background-color:#424242}.accordion-item .accordion-header .header-content{font-family:Montserrat,sans-serif;font-size:14px;color:#6c6c6c}.accordion-item .accordion-header .header-content.is-expanded{color:#fff}.accordion-item .accordion-header .header-content .heading-count{background-color:#919191;border-radius:12px;padding:0 6px}.accordion-item .accordion-header .header-content .heading-count.is-expanded{background-color:#dadada}.accordion-item .accordion-header .header-content .heading-count .item-count{font-size:11px;color:#fff}.accordion-item .accordion-header .header-content .heading-count .item-count.is-expanded{color:#424242}.accordion-item .accordion-header .header-content-right{font-family:Montserrat,sans-serif;font-size:11px}.accordion-item .accordion-header .header-content-right.is-expanded{color:#fff}.accordion-item .accordion-header .header-content-right .date{background-color:#eee;color:#424242;padding:2px 5px;border-radius:2px}.accordion-item .accordion-header .header-content-right .date.is-expanded{background-color:#91919166;color:#fff}.accordion-item .accordion-header .header-content-right .amount{padding:2px 5px;border-radius:2px}.accordion-item .accordion-header .header-content-right .amount.danger{background-color:#fbe9e9;color:#df3c3c}.accordion-item .accordion-header .header-content-right .amount.positive{background-color:#e9effd;color:#3b73ed}.accordion-item .accordion-header .header-content-right .amount.success{background-color:#e7f4f3;color:#259f94}.accordion-item .accordion-header .header-content-right .amount.is-danger-expanded{background-color:#df3c3c66;color:#fff}.accordion-item .accordion-header .header-content-right .amount.is-positive-expanded{background-color:#3b73ed66;color:#fff}.accordion-item .accordion-header .header-content-right .amount.is-success-expanded{background-color:#259f9466;color:#fff}.accordion-item .accordion-header .header-content-right .svg_rotate svg{transform:rotate(180deg);transition:transform .2s ease-in-out}.accordion-item .accordion-header .header-content-right .rotate_back svg{transform:rotate(0);transition:transform .2s ease-in-out}.accordion-item .accordion-header:not(.is-expanded):hover .header-content{color:#424242}.accordion-item .accordion-header:not(.is-expanded):hover .header-content .heading-count{background-color:#6c6c6c}.accordion-item .accordion-header:not(.is-expanded):hover svg path{fill:#424242}.accordion-item .accordion-header:hover .header-content{color:#fff}.accordion-item .accordion-header:hover .header-content .heading-count{background-color:#dadada}.accordion-item .accordion-header:hover svg path{fill:#dadada}.accordion-item .accordion-body{padding:5px}\n"], dependencies: [{ kind: "ngmodule", type: 
+                //Modules
+                CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "ngmodule", type: AngularSvgIconModule }, { kind: "component", type: i2.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }], animations: [accordionAnimation("showHideCardBody")] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaPayrollListSummaryOverviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-ca-payroll-list-summary-overview", standalone: true, imports: [
+                        //Modules
+                        CommonModule,
+                        AngularSvgIconModule,
+                    ], animations: [accordionAnimation("showHideCardBody")], template: "<div class=\"accordion\" id=\"accordionExample\">\n  <div class=\"accordion-item\">\n    <div>\n      <div\n        class=\"d-flex justify-content-between align-items-center accordion-header\"\n        [ngClass]=\"{ 'is-expanded': isExpanded }\"\n        (click)=\"toggleAccordion()\"\n      >\n        <div\n          class=\"d-flex header-content ca-font-extra-bold\"\n          [ngClass]=\"{ 'is-expanded': isExpanded }\"\n        >\n          <div class=\"me-1\">\n            <span>{{ item.text }}</span>\n          </div>\n          <div class=\"me-1\">({{ item.type }})</div>\n          <div\n            class=\"small me-1 heading-count d-flex align-items-center\"\n            [ngClass]=\"{ 'is-expanded': isExpanded }\"\n          >\n            <div\n              class=\"item-count ca-font-bold\"\n              [ngClass]=\"{ 'is-expanded': isExpanded }\"\n            >\n              {{ item.itemCount }}\n            </div>\n          </div>\n        </div>\n        <div\n          class=\"d-flex align-items-center header-content-right ca-font-bold\"\n        >\n          <ng-container *ngIf=\"item.isOpen\">\n            <div class=\"me-2 date\" [ngClass]=\"{ 'is-expanded': isExpanded }\">\n              {{ item.date | date: \"dd/MM/yyyy\" }}\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"item.status !== 'success'; else successStatus\">\n            <div\n              class=\"d-flex amount me-1\"\n              [ngClass]=\"{\n                danger: item.status === 'danger',\n                positive: item.status === 'positive',\n              }\"\n              [class.is-danger-expanded]=\"\n                item.status === 'danger' && isExpanded\n              \"\n              [class.is-positive-expanded]=\"\n                item.status === 'positive' && isExpanded\n              \"\n            >\n              <div class=\"me-1\">{{ item.money | currency }}</div>\n              <div>({{ item.moneyCounter }})</div>\n            </div>\n          </ng-container>\n          <ng-template #successStatus\n            ><div\n              class=\"d-flex amount me-1\"\n              [ngClass]=\"{\n                success: item.status === 'success',\n              }\"\n              [class.is-success-expanded]=\"\n                item.status === 'success' && isExpanded\n              \"\n            >\n              <div class=\"me-1\">ALL PAID</div>\n            </div>\n          </ng-template>\n          <div\n            class=\"accordion-toggle-icon\"\n            [ngClass]=\"{\n              svg_rotate: isExpanded,\n              rotate_back: !isExpanded,\n            }\"\n          >\n            <svg-icon [src]=\"getSvgPath('downArrow')\" alt=\"Toggle\"></svg-icon>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      [id]=\"'collapseOne' + index\"\n      class=\"accordion-collapse\"\n      [class.show]=\"isExpanded\"\n      data-bs-parent=\"#accordionExample\"\n      [@showHideCardBody]=\"{\n        value: isExpanded.toString(),\n        params: animationMarginParams,\n      }\"\n    >\n      <ng-container>\n        <div class=\"accordion-body\">\n          <!-- Add the expanded content here -->\n          {{ item.description }}\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap\";@import\"/node_modules/bootstrap/dist/css/bootstrap.css\";.ca-font-thin{font-weight:100!important}.ca-font-extra-light{font-weight:200!important}.ca-font-light{font-weight:300!important}.ca-font-regular{font-weight:400!important}.ca-font-medium{font-weight:500!important}.ca-font-semi-bold{font-weight:600!important}.ca-font-bold{font-weight:700!important}.ca-font-extra-bold{font-weight:800!important}.ca-font-black{font-weight:900!important}@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.table-progress-popover{background-color:unset!important;margin-left:-10px}.table-progress-popover .progress-dropdown{margin-top:-6px;width:260px;height:200px;background:#2f2f2f;border-radius:3px;padding:8px;box-shadow:0 0 4px #00000026;overflow:hidden;animation:progressAnimation .25s ease-in-out}.table-progress-popover .progress-dropdown .progress-header .progress-title{font-size:18px;font-weight:600;color:#dadada}.table-progress-popover .progress-dropdown .progress-header .progress-title span{font-weight:400}.table-progress-popover .progress-dropdown .progress-header .progress-total{font-size:14px;line-height:17px;color:#dadada}.table-progress-popover .progress-dropdown .table-progress-bar-container{width:100%;height:8px;margin-top:6px;border-radius:2px;overflow:hidden}.table-progress-popover .progress-dropdown .table-progress-bar-container .table-progress-bar{height:100%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-dual-info-container .progress-info-container{width:50%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container{margin-top:10px}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-title{margin-bottom:2px;font-size:11px;font-weight:700;line-height:14px;color:#ffffffb2}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-text{font-size:14px;line-height:18px;color:#dadada}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@keyframes progressAnimation{0%{height:0px}to{height:220px}}ngb-popover-window{padding:unset!important;border:unset!important}ngb-popover-window .popover-arrow{display:none!important}ngb-popover-window .popover-body{padding:unset!important}*{margin:0;font-family:Roboto,Helvetica Neue,sans-serif}html{scroll-behavior:auto!important}.gm-style-iw-chr,.gm-style-iw-tc{display:none}.gm-style .gm-style-iw-c{border-radius:0}.gm-style-iw{overflow-y:auto!important;overflow-x:hidden!important}.gm-style-iw>div{overflow:visible!important}.infoWindow{overflow:hidden!important}.gm-style-iw-d,.gm-style-iw.gm-style-iw-c{max-height:350px!important}.accordion-item{border:unset;border-radius:4px;margin-bottom:3px}.accordion-item .accordion-header{cursor:pointer;padding:10px}.accordion-item .accordion-header.is-expanded{background-color:#424242}.accordion-item .accordion-header .header-content{font-family:Montserrat,sans-serif;font-size:14px;color:#6c6c6c}.accordion-item .accordion-header .header-content.is-expanded{color:#fff}.accordion-item .accordion-header .header-content .heading-count{background-color:#919191;border-radius:12px;padding:0 6px}.accordion-item .accordion-header .header-content .heading-count.is-expanded{background-color:#dadada}.accordion-item .accordion-header .header-content .heading-count .item-count{font-size:11px;color:#fff}.accordion-item .accordion-header .header-content .heading-count .item-count.is-expanded{color:#424242}.accordion-item .accordion-header .header-content-right{font-family:Montserrat,sans-serif;font-size:11px}.accordion-item .accordion-header .header-content-right.is-expanded{color:#fff}.accordion-item .accordion-header .header-content-right .date{background-color:#eee;color:#424242;padding:2px 5px;border-radius:2px}.accordion-item .accordion-header .header-content-right .date.is-expanded{background-color:#91919166;color:#fff}.accordion-item .accordion-header .header-content-right .amount{padding:2px 5px;border-radius:2px}.accordion-item .accordion-header .header-content-right .amount.danger{background-color:#fbe9e9;color:#df3c3c}.accordion-item .accordion-header .header-content-right .amount.positive{background-color:#e9effd;color:#3b73ed}.accordion-item .accordion-header .header-content-right .amount.success{background-color:#e7f4f3;color:#259f94}.accordion-item .accordion-header .header-content-right .amount.is-danger-expanded{background-color:#df3c3c66;color:#fff}.accordion-item .accordion-header .header-content-right .amount.is-positive-expanded{background-color:#3b73ed66;color:#fff}.accordion-item .accordion-header .header-content-right .amount.is-success-expanded{background-color:#259f9466;color:#fff}.accordion-item .accordion-header .header-content-right .svg_rotate svg{transform:rotate(180deg);transition:transform .2s ease-in-out}.accordion-item .accordion-header .header-content-right .rotate_back svg{transform:rotate(0);transition:transform .2s ease-in-out}.accordion-item .accordion-header:not(.is-expanded):hover .header-content{color:#424242}.accordion-item .accordion-header:not(.is-expanded):hover .header-content .heading-count{background-color:#6c6c6c}.accordion-item .accordion-header:not(.is-expanded):hover svg path{fill:#424242}.accordion-item .accordion-header:hover .header-content{color:#fff}.accordion-item .accordion-header:hover .header-content .heading-count{background-color:#dadada}.accordion-item .accordion-header:hover svg path{fill:#dadada}.accordion-item .accordion-body{padding:5px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { item: [{
+                type: Input
+            }], isExpanded: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], toggle: [{
+                type: Output
+            }], animationMarginParams: [{
+                type: Input
+            }] } });
+
+class CaPayrollListSummaryOverviewTableComponent {
+    constructor() {
+        this.data = CaTable.CaTablePayrollList;
+    }
+    identity(index, item) {
+        return item.text;
+    }
+    toggleItem(index) {
+        this.openIndex = this.openIndex === index ? null : index;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaPayrollListSummaryOverviewTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CaPayrollListSummaryOverviewTableComponent, isStandalone: true, selector: "app-ca-payroll-list-summary-overview-table", ngImport: i0, template: "<table class=\"table\">\n  <tbody>\n    <tr *ngFor=\"let item of data; let i = index; trackBy: identity\">\n      <td>\n        <app-ca-payroll-list-summary-overview\n          [item]=\"item\"\n          [index]=\"i\"\n          [isExpanded]=\"openIndex === i\"\n          (toggle)=\"toggleItem(i)\"\n        ></app-ca-payroll-list-summary-overview>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap\";@import\"/node_modules/bootstrap/dist/css/bootstrap.css\";.ca-font-thin{font-weight:100!important}.ca-font-extra-light{font-weight:200!important}.ca-font-light{font-weight:300!important}.ca-font-regular{font-weight:400!important}.ca-font-medium{font-weight:500!important}.ca-font-semi-bold{font-weight:600!important}.ca-font-bold{font-weight:700!important}.ca-font-extra-bold{font-weight:800!important}.ca-font-black{font-weight:900!important}@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.table-progress-popover{background-color:unset!important;margin-left:-10px}.table-progress-popover .progress-dropdown{margin-top:-6px;width:260px;height:200px;background:#2f2f2f;border-radius:3px;padding:8px;box-shadow:0 0 4px #00000026;overflow:hidden;animation:progressAnimation .25s ease-in-out}.table-progress-popover .progress-dropdown .progress-header .progress-title{font-size:18px;font-weight:600;color:#dadada}.table-progress-popover .progress-dropdown .progress-header .progress-title span{font-weight:400}.table-progress-popover .progress-dropdown .progress-header .progress-total{font-size:14px;line-height:17px;color:#dadada}.table-progress-popover .progress-dropdown .table-progress-bar-container{width:100%;height:8px;margin-top:6px;border-radius:2px;overflow:hidden}.table-progress-popover .progress-dropdown .table-progress-bar-container .table-progress-bar{height:100%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-dual-info-container .progress-info-container{width:50%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container{margin-top:10px}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-title{margin-bottom:2px;font-size:11px;font-weight:700;line-height:14px;color:#ffffffb2}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-text{font-size:14px;line-height:18px;color:#dadada}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@keyframes progressAnimation{0%{height:0px}to{height:220px}}ngb-popover-window{padding:unset!important;border:unset!important}ngb-popover-window .popover-arrow{display:none!important}ngb-popover-window .popover-body{padding:unset!important}*{margin:0;font-family:Roboto,Helvetica Neue,sans-serif}html{scroll-behavior:auto!important}.gm-style-iw-chr,.gm-style-iw-tc{display:none}.gm-style .gm-style-iw-c{border-radius:0}.gm-style-iw{overflow-y:auto!important;overflow-x:hidden!important}.gm-style-iw>div{overflow:visible!important}.infoWindow{overflow:hidden!important}.gm-style-iw-d,.gm-style-iw.gm-style-iw-c{max-height:350px!important}thead,tbody,tfoot,tr,td,th{border:unset;cursor:pointer}.table>:not(caption)>*>*{background-color:#eee;padding:0 10px}.table tr{position:relative;z-index:99999}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CaPayrollListSummaryOverviewComponent$1, selector: "app-ca-payroll-list-summary-overview", inputs: ["item", "isExpanded", "index", "animationMarginParams"], outputs: ["toggle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaPayrollListSummaryOverviewTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-ca-payroll-list-summary-overview-table", standalone: true, imports: [CommonModule, CaPayrollListSummaryOverviewComponent$1], template: "<table class=\"table\">\n  <tbody>\n    <tr *ngFor=\"let item of data; let i = index; trackBy: identity\">\n      <td>\n        <app-ca-payroll-list-summary-overview\n          [item]=\"item\"\n          [index]=\"i\"\n          [isExpanded]=\"openIndex === i\"\n          (toggle)=\"toggleItem(i)\"\n        ></app-ca-payroll-list-summary-overview>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap\";@import\"/node_modules/bootstrap/dist/css/bootstrap.css\";.ca-font-thin{font-weight:100!important}.ca-font-extra-light{font-weight:200!important}.ca-font-light{font-weight:300!important}.ca-font-regular{font-weight:400!important}.ca-font-medium{font-weight:500!important}.ca-font-semi-bold{font-weight:600!important}.ca-font-bold{font-weight:700!important}.ca-font-extra-bold{font-weight:800!important}.ca-font-black{font-weight:900!important}@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.table-progress-popover{background-color:unset!important;margin-left:-10px}.table-progress-popover .progress-dropdown{margin-top:-6px;width:260px;height:200px;background:#2f2f2f;border-radius:3px;padding:8px;box-shadow:0 0 4px #00000026;overflow:hidden;animation:progressAnimation .25s ease-in-out}.table-progress-popover .progress-dropdown .progress-header .progress-title{font-size:18px;font-weight:600;color:#dadada}.table-progress-popover .progress-dropdown .progress-header .progress-title span{font-weight:400}.table-progress-popover .progress-dropdown .progress-header .progress-total{font-size:14px;line-height:17px;color:#dadada}.table-progress-popover .progress-dropdown .table-progress-bar-container{width:100%;height:8px;margin-top:6px;border-radius:2px;overflow:hidden}.table-progress-popover .progress-dropdown .table-progress-bar-container .table-progress-bar{height:100%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-dual-info-container .progress-info-container{width:50%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container{margin-top:10px}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-title{margin-bottom:2px;font-size:11px;font-weight:700;line-height:14px;color:#ffffffb2}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-text{font-size:14px;line-height:18px;color:#dadada}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@keyframes progressAnimation{0%{height:0px}to{height:220px}}ngb-popover-window{padding:unset!important;border:unset!important}ngb-popover-window .popover-arrow{display:none!important}ngb-popover-window .popover-body{padding:unset!important}*{margin:0;font-family:Roboto,Helvetica Neue,sans-serif}html{scroll-behavior:auto!important}.gm-style-iw-chr,.gm-style-iw-tc{display:none}.gm-style .gm-style-iw-c{border-radius:0}.gm-style-iw{overflow-y:auto!important;overflow-x:hidden!important}.gm-style-iw>div{overflow:visible!important}.infoWindow{overflow:hidden!important}.gm-style-iw-d,.gm-style-iw.gm-style-iw-c{max-height:350px!important}thead,tbody,tfoot,tr,td,th{border:unset;cursor:pointer}.table>:not(caption)>*>*{background-color:#eee;padding:0 10px}.table tr{position:relative;z-index:99999}\n"] }]
+        }] });
+
+class PickupDeliveryBlockComponent {
+    constructor(modalService) {
+        this.modalService = modalService;
+        this.loadInfo = {};
+        this.hasLoad = false;
+    }
+    ngOnInit() {
+        this.initializeLoadDetails();
+    }
+    initializeLoadDetails() {
+        const { load, loadType } = PickupDeliveryHelper.setLoadDetails(this.loads);
+        if (load) {
+            this.loadInfo = load;
+            this.hasLoad = true;
+            this.loadType = loadType;
+        }
+        else {
+            this.hasLoad = false;
+        }
+    }
+    openLoadModal() {
+        const modalRef = this.modalService.open(LoadComponent);
+        modalRef.componentInstance.loads = this.loads;
+        modalRef.componentInstance.focusedTab = this.loadType;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PickupDeliveryBlockComponent, deps: [{ token: i1$1.NgbModal }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PickupDeliveryBlockComponent, isStandalone: true, selector: "app-ca-pickup-delivery-block", inputs: { loads: "loads" }, ngImport: i0, template: "<div\n  class=\"d-flex justify-content-center align-items-center incomplete-table-container\"\n>\n  <ng-container *ngIf=\"hasLoad; else noLoadInfo\">\n    <div\n      class=\"incomplete-table-holder stops d-flex justify-content-between align-items-center\"\n      (click)=\"openLoadModal()\"\n    >\n      <div class=\"stops-side d-flex align-items-center left\">\n        <span\n          class=\"d-flex justify-content-center align-items-center pickupStationNumber ca-font-bold\"\n          [ngClass]=\"{\n            'active-pickup': loadType === 'ACTIVE',\n            'pending-pickup': loadType === 'PENDING',\n          }\"\n          >{{ loadInfo.pickupCount }}</span\n        >\n        <div class=\"d-flex flex-column\">\n          <span class=\"location ca-font-semi-bold\">{{\n            loadInfo.pickup?.shipper?.address?.address\n          }}</span>\n          <span class=\"date ca-font-regular\">{{\n            loadInfo.pickup?.dateFrom\n          }}</span>\n        </div>\n      </div>\n\n      <div class=\"stops-side d-flex align-items-center right\">\n        <div class=\"d-flex flex-column\">\n          <span class=\"location ca-font-semi-bold\">{{\n            loadInfo.delivery?.shipper?.address?.address\n          }}</span>\n          <span class=\"date ca-font-regular\">{{\n            loadInfo.delivery?.dateFrom\n          }}</span>\n        </div>\n        <span\n          class=\"d-flex justify-content-center align-items-center deliveryStationNumber ca-font-bold\"\n          [ngClass]=\"{\n            'active-delivery': loadType === 'ACTIVE',\n            'pending-delivery': loadType === 'PENDING',\n          }\"\n          >{{ loadInfo.deliveryCount }}</span\n        >\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-template #noLoadInfo>\n    <div class=\"incomplete-table-holder\"></div>\n  </ng-template>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap\";@import\"/node_modules/bootstrap/dist/css/bootstrap.css\";.ca-font-thin{font-weight:100!important}.ca-font-extra-light{font-weight:200!important}.ca-font-light{font-weight:300!important}.ca-font-regular{font-weight:400!important}.ca-font-medium{font-weight:500!important}.ca-font-semi-bold{font-weight:600!important}.ca-font-bold{font-weight:700!important}.ca-font-extra-bold{font-weight:800!important}.ca-font-black{font-weight:900!important}@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.table-progress-popover{background-color:unset!important;margin-left:-10px}.table-progress-popover .progress-dropdown{margin-top:-6px;width:260px;height:200px;background:#2f2f2f;border-radius:3px;padding:8px;box-shadow:0 0 4px #00000026;overflow:hidden;animation:progressAnimation .25s ease-in-out}.table-progress-popover .progress-dropdown .progress-header .progress-title{font-size:18px;font-weight:600;color:#dadada}.table-progress-popover .progress-dropdown .progress-header .progress-title span{font-weight:400}.table-progress-popover .progress-dropdown .progress-header .progress-total{font-size:14px;line-height:17px;color:#dadada}.table-progress-popover .progress-dropdown .table-progress-bar-container{width:100%;height:8px;margin-top:6px;border-radius:2px;overflow:hidden}.table-progress-popover .progress-dropdown .table-progress-bar-container .table-progress-bar{height:100%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-dual-info-container .progress-info-container{width:50%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container{margin-top:10px}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-title{margin-bottom:2px;font-size:11px;font-weight:700;line-height:14px;color:#ffffffb2}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-text{font-size:14px;line-height:18px;color:#dadada}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@keyframes progressAnimation{0%{height:0px}to{height:220px}}ngb-popover-window{padding:unset!important;border:unset!important}ngb-popover-window .popover-arrow{display:none!important}ngb-popover-window .popover-body{padding:unset!important}*{margin:0;font-family:Roboto,Helvetica Neue,sans-serif}html{scroll-behavior:auto!important}.gm-style-iw-chr,.gm-style-iw-tc{display:none}.gm-style .gm-style-iw-c{border-radius:0}.gm-style-iw{overflow-y:auto!important;overflow-x:hidden!important}.gm-style-iw>div{overflow:visible!important}.infoWindow{overflow:hidden!important}.gm-style-iw-d,.gm-style-iw.gm-style-iw-c{max-height:350px!important}.incomplete-table-container{width:340px;height:34px;border-radius:3px;font-family:Montserrat,sans-serif}.incomplete-table-container .incomplete-table-holder{width:332px;height:26px;margin:2px;border-radius:2px;border:none;cursor:pointer;padding:0;gap:8px}.incomplete-table-container .incomplete-table-holder:hover{background-color:#ddd}.incomplete-table-container .incomplete-table-holder.stops{width:100%;padding:4px;gap:4px;font-size:14px}.incomplete-table-container .incomplete-table-holder.stops .stops-side{gap:4px}.incomplete-table-container .incomplete-table-holder.stops .stops-side .location,.incomplete-table-container .incomplete-table-holder.stops .stops-side .date,.incomplete-table-container .incomplete-table-holder.stops .stops-side .pickupStationNumber,.incomplete-table-container .incomplete-table-holder.stops .stops-side .deliveryStationNumber{font-size:11px;line-height:14px;text-align:center;color:#424242}.incomplete-table-container .incomplete-table-holder.stops .stops-side .location{text-align:start}.incomplete-table-container .incomplete-table-holder.stops .stops-side .pickupStationNumber,.incomplete-table-container .incomplete-table-holder.stops .stops-side .deliveryStationNumber{width:18px;height:18px;color:#dadada;border-radius:1px}.incomplete-table-container .incomplete-table-holder.stops .stops-side .pickupStationNumber.active-pickup{background-color:#56b4ac}.incomplete-table-container .incomplete-table-holder.stops .stops-side .pickupStationNumber.pending-pickup{background-color:#91919133;color:#56b4ac}.incomplete-table-container .incomplete-table-holder.stops .stops-side .deliveryStationNumber.active-delivery{background-color:#e66767}.incomplete-table-container .incomplete-table-holder.stops .stops-side .deliveryStationNumber.pending-delivery{background-color:#91919133;color:#e66767}::ng-deep .modal-content{width:340px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PickupDeliveryBlockComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-ca-pickup-delivery-block", imports: [CommonModule], standalone: true, template: "<div\n  class=\"d-flex justify-content-center align-items-center incomplete-table-container\"\n>\n  <ng-container *ngIf=\"hasLoad; else noLoadInfo\">\n    <div\n      class=\"incomplete-table-holder stops d-flex justify-content-between align-items-center\"\n      (click)=\"openLoadModal()\"\n    >\n      <div class=\"stops-side d-flex align-items-center left\">\n        <span\n          class=\"d-flex justify-content-center align-items-center pickupStationNumber ca-font-bold\"\n          [ngClass]=\"{\n            'active-pickup': loadType === 'ACTIVE',\n            'pending-pickup': loadType === 'PENDING',\n          }\"\n          >{{ loadInfo.pickupCount }}</span\n        >\n        <div class=\"d-flex flex-column\">\n          <span class=\"location ca-font-semi-bold\">{{\n            loadInfo.pickup?.shipper?.address?.address\n          }}</span>\n          <span class=\"date ca-font-regular\">{{\n            loadInfo.pickup?.dateFrom\n          }}</span>\n        </div>\n      </div>\n\n      <div class=\"stops-side d-flex align-items-center right\">\n        <div class=\"d-flex flex-column\">\n          <span class=\"location ca-font-semi-bold\">{{\n            loadInfo.delivery?.shipper?.address?.address\n          }}</span>\n          <span class=\"date ca-font-regular\">{{\n            loadInfo.delivery?.dateFrom\n          }}</span>\n        </div>\n        <span\n          class=\"d-flex justify-content-center align-items-center deliveryStationNumber ca-font-bold\"\n          [ngClass]=\"{\n            'active-delivery': loadType === 'ACTIVE',\n            'pending-delivery': loadType === 'PENDING',\n          }\"\n          >{{ loadInfo.deliveryCount }}</span\n        >\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-template #noLoadInfo>\n    <div class=\"incomplete-table-holder\"></div>\n  </ng-template>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap\";@import\"/node_modules/bootstrap/dist/css/bootstrap.css\";.ca-font-thin{font-weight:100!important}.ca-font-extra-light{font-weight:200!important}.ca-font-light{font-weight:300!important}.ca-font-regular{font-weight:400!important}.ca-font-medium{font-weight:500!important}.ca-font-semi-bold{font-weight:600!important}.ca-font-bold{font-weight:700!important}.ca-font-extra-bold{font-weight:800!important}.ca-font-black{font-weight:900!important}@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.table-progress-popover{background-color:unset!important;margin-left:-10px}.table-progress-popover .progress-dropdown{margin-top:-6px;width:260px;height:200px;background:#2f2f2f;border-radius:3px;padding:8px;box-shadow:0 0 4px #00000026;overflow:hidden;animation:progressAnimation .25s ease-in-out}.table-progress-popover .progress-dropdown .progress-header .progress-title{font-size:18px;font-weight:600;color:#dadada}.table-progress-popover .progress-dropdown .progress-header .progress-title span{font-weight:400}.table-progress-popover .progress-dropdown .progress-header .progress-total{font-size:14px;line-height:17px;color:#dadada}.table-progress-popover .progress-dropdown .table-progress-bar-container{width:100%;height:8px;margin-top:6px;border-radius:2px;overflow:hidden}.table-progress-popover .progress-dropdown .table-progress-bar-container .table-progress-bar{height:100%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-dual-info-container .progress-info-container{width:50%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container{margin-top:10px}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-title{margin-bottom:2px;font-size:11px;font-weight:700;line-height:14px;color:#ffffffb2}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-text{font-size:14px;line-height:18px;color:#dadada}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@keyframes progressAnimation{0%{height:0px}to{height:220px}}ngb-popover-window{padding:unset!important;border:unset!important}ngb-popover-window .popover-arrow{display:none!important}ngb-popover-window .popover-body{padding:unset!important}*{margin:0;font-family:Roboto,Helvetica Neue,sans-serif}html{scroll-behavior:auto!important}.gm-style-iw-chr,.gm-style-iw-tc{display:none}.gm-style .gm-style-iw-c{border-radius:0}.gm-style-iw{overflow-y:auto!important;overflow-x:hidden!important}.gm-style-iw>div{overflow:visible!important}.infoWindow{overflow:hidden!important}.gm-style-iw-d,.gm-style-iw.gm-style-iw-c{max-height:350px!important}.incomplete-table-container{width:340px;height:34px;border-radius:3px;font-family:Montserrat,sans-serif}.incomplete-table-container .incomplete-table-holder{width:332px;height:26px;margin:2px;border-radius:2px;border:none;cursor:pointer;padding:0;gap:8px}.incomplete-table-container .incomplete-table-holder:hover{background-color:#ddd}.incomplete-table-container .incomplete-table-holder.stops{width:100%;padding:4px;gap:4px;font-size:14px}.incomplete-table-container .incomplete-table-holder.stops .stops-side{gap:4px}.incomplete-table-container .incomplete-table-holder.stops .stops-side .location,.incomplete-table-container .incomplete-table-holder.stops .stops-side .date,.incomplete-table-container .incomplete-table-holder.stops .stops-side .pickupStationNumber,.incomplete-table-container .incomplete-table-holder.stops .stops-side .deliveryStationNumber{font-size:11px;line-height:14px;text-align:center;color:#424242}.incomplete-table-container .incomplete-table-holder.stops .stops-side .location{text-align:start}.incomplete-table-container .incomplete-table-holder.stops .stops-side .pickupStationNumber,.incomplete-table-container .incomplete-table-holder.stops .stops-side .deliveryStationNumber{width:18px;height:18px;color:#dadada;border-radius:1px}.incomplete-table-container .incomplete-table-holder.stops .stops-side .pickupStationNumber.active-pickup{background-color:#56b4ac}.incomplete-table-container .incomplete-table-holder.stops .stops-side .pickupStationNumber.pending-pickup{background-color:#91919133;color:#56b4ac}.incomplete-table-container .incomplete-table-holder.stops .stops-side .deliveryStationNumber.active-delivery{background-color:#e66767}.incomplete-table-container .incomplete-table-holder.stops .stops-side .deliveryStationNumber.pending-delivery{background-color:#91919133;color:#e66767}::ng-deep .modal-content{width:340px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.NgbModal }]; }, propDecorators: { loads: [{
+                type: Input
+            }] } });
+
+class ProgressBarComponent {
+    constructor() {
+        this.isDropdown = false;
+        this.gpsTitle = "";
+        this.gpsProgress = [];
+        this.hoveredGpsIcon = false;
+        this.hoveredGpsCurrentPosition = false;
+        this.showDropdown = false;
+        this.focusedIcon = -1;
+        this.isIcon = false;
+        this.tooltip = "";
+        this.staticConstant = ProgressBarConstants;
+        this.Mapdata = {
+            center: { lat: 41.860119, lng: -87.660156 },
+            mapZoom: 1,
+            markers: [],
+            clustermarkers: [],
+            routingMarkers: [
+                {
+                    position: { lat: 38.122958832669, lng: -85.6978972106951 },
+                    icon: {
+                        url: "svg/map/gps-location.svg",
+                        labelOrigin: new google.maps.Point(80, 15),
+                    },
+                },
+                {
+                    position: { lat: 34.81629127878479, lng: -84.05705557447767 },
+                    icon: {
+                        url: "svg/map/progress_marker_reached.svg",
+                        labelOrigin: new google.maps.Point(80, 15),
+                    },
+                },
+                {
+                    position: { lat: 29.533042509319234, lng: -82.27005101950496 },
+                    icon: {
+                        url: "svg/map/progress_marker-pin-dark.svg",
+                        labelOrigin: new google.maps.Point(80, 15),
+                    },
+                },
+                {
+                    position: { lat: 34.001049366913065, lng: -84.48820105737911 },
+                    icon: {
+                        url: "svg/map/progress-marker-checked.svg",
+                        labelOrigin: new google.maps.Point(90, 15),
+                    },
+                },
+                {
+                    position: { lat: 38.197103511601675, lng: -85.79030629905438 },
+                    icon: {
+                        url: "svg/map/progress-marker-pickup.svg",
+                        labelOrigin: new google.maps.Point(90, 15),
+                    },
+                },
+                {
+                    position: { lat: 40.324100681086385, lng: -86.37922103258747 },
+                    icon: {
+                        url: "svg/map/progress-marker-pickup-checked.svg",
+                        labelOrigin: new google.maps.Point(90, 15),
+                    },
+                },
+            ],
+            routePaths: [
+                {
+                    path: [
+                        { lat: 34.81629127878479, lng: -84.05705557447767 },
+                        { lat: 29.533042509319234, lng: -82.27005101950496 },
+                    ],
+                    strokeColor: "white",
+                },
+                {
+                    path: [
+                        { lat: 29.533042509319234, lng: -82.27005101950496 },
+                        { lat: 34.001049366913065, lng: -84.48820105737911 },
+                    ],
+                    strokeColor: "white",
+                },
+                {
+                    path: [
+                        { lat: 34.001049366913065, lng: -84.48820105737911 },
+                        { lat: 43.121294982393685, lng: -88.02218586773331 },
+                    ],
+                    strokeColor: "red",
+                },
+                {
+                    path: [
+                        { lat: 43.121294982393685, lng: -88.02218586773331 },
+                        { lat: 38.122958832669, lng: -85.6978972106951 },
+                    ],
+                    strokeColor: "red",
+                },
+                {
+                    path: [
+                        { lat: 38.122958832669, lng: -85.6978972106951 },
+                        { lat: 38.197103511601675, lng: -85.79030629905438 },
+                    ],
+                    strokeColor: "red",
+                },
+            ],
+            mapOptions: {
+                restriction: {
+                    latLngBounds: MapConstants.NORTH_AMERICA_BOUNDS,
+                    strictBounds: true,
+                },
+                streetViewControl: false,
+                styles: MapConstants.GOOGLE_MAP_DARK_STYLES,
+                keyboardShortcuts: false,
+                panControl: true,
+                gestureHandling: "greedy",
+                mapTypeControl: false,
+                disableDefaultUI: true,
+            },
+        };
+    }
+    hoverStop(stop, i, isIcon = false) {
+        this.hoveredGpsCurrentPosition = true;
+        this.gpsTitle = stop.heading || "";
+        this.mileageInfo = stop.mileage;
+        this.focusedIcon = i;
+        this.isIcon = isIcon;
+        this.getToolTip();
+    }
+    leaveStop() {
+        this.hoveredGpsCurrentPosition = false;
+        this.gpsTitle = "128.4 mi";
+        this.mileageInfo = "226.3 mi";
+        this.focusedIcon = -1;
+    }
+    getLeftStyle() {
+        if (this.isIcon) {
+            return this.currentStop.position + "%";
+        }
+        else {
+            return this.gpsProgress[this.focusedIcon].position - 20 + "%";
+        }
+    }
+    getToolTip() {
+        if (this.isIcon) {
+            this.tooltip = this.currentStop?.location;
+            return this.tooltip;
+        }
+        else {
+            this.tooltip = this.gpsProgress[this.focusedIcon].location;
+            return this.tooltip;
+        }
+    }
+    identity(index) {
+        return index;
+    }
+    showDropdownMap(t2) {
+        t2.open();
+    }
+    getSvgPath(propertyName) {
+        return ProgressBarSvgRoutes[propertyName];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProgressBarComponent, isStandalone: true, selector: "app-ca-progress-bar", inputs: { isDropdown: "isDropdown", currentPosition: "currentPosition", mileageInfo: "mileageInfo", currentStop: "currentStop", gpsTitle: "gpsTitle", gpsIcon: "gpsIcon", gpsInfo: "gpsInfo", mileagesPercent: "mileagesPercent", gpsProgress: "gpsProgress", gpsLocationIcon: "gpsLocationIcon" }, ngImport: i0, template: "<div class=\"gps-progress-bar\">\n  <div\n    class=\"gps-progress-holder d-flex align-items-center\"\n    #t2=\"ngbPopover\"\n    [ngbPopover]=\"gpsDropdownPopover\"\n    [autoClose]=\"'outside'\"\n    container=\"body\"\n    [placement]=\"'bottom'\"\n    popoverClass=\"gps_dropdown_popover\"\n    triggers=\"manual\"\n    (click)=\"showDropdownMap(t2)\"\n  >\n    <div\n      class=\"gps-progress-img\"\n      (mouseenter)=\"hoveredGpsIcon = true\"\n      (mouseleave)=\"hoveredGpsIcon = false\"\n    >\n      <svg-icon [src]=\"gpsIcon\"></svg-icon>\n    </div>\n    <ng-container *ngIf=\"!hoveredGpsIcon\">\n      <div class=\"gps-progress-text\">\n        <div class=\"mileage-gps d-flex justify-content-between\">\n          <div class=\"mileages ca-font-semi-bold\">{{ gpsTitle }}</div>\n          <div class=\"mileage-normal ca-font-regular\">\n            {{ mileageInfo }}\n          </div>\n        </div>\n        <div class=\"mileage-gps d-flex\">\n          <div class=\"gps-timeline\">\n            <div\n              class=\"gps-timeline-active\"\n              [ngStyle]=\"{ width: currentPosition + '%' }\"\n            ></div>\n            <ng-container\n              *ngFor=\"let stop of gpsProgress; let i = index; trackBy: identity\"\n            >\n              <div\n                class=\"gps-stop\"\n                (mouseenter)=\"hoverStop(stop, i, false)\"\n                (mouseleave)=\"leaveStop()\"\n                [ngClass]=\"{\n                  'pickup-stop': stop.type === 'pickup',\n                  'delivery-stop': stop.type === 'delivery',\n                }\"\n                [ngStyle]=\"{ left: stop.position + '%' }\"\n              ></div>\n            </ng-container>\n            <div\n              class=\"current-pos\"\n              (mouseenter)=\"hoverStop(currentStop, -2, true)\"\n              (mouseleave)=\"leaveStop()\"\n              [ngStyle]=\"{ left: currentPosition + '%' }\"\n            >\n              <svg-icon [src]=\"gpsLocationIcon\"></svg-icon>\n            </div>\n            <ng-container\n              *ngIf=\"hoveredGpsCurrentPosition && focusedIcon !== -1\"\n            >\n              <div\n                class=\"gps_current_info\"\n                [ngStyle]=\"{ left: getLeftStyle() }\"\n              >\n                <div class=\"gps_info_title ca-font-bold\">{{ tooltip }}</div>\n              </div>\n            </ng-container>\n          </div>\n          <div class=\"mileages ca-font-semi-bold\">{{ mileagesPercent }}</div>\n        </div>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"hoveredGpsIcon\">\n      <div class=\"gps_info_hold d-flex flex-column justify-content-center\">\n        <div\n          class=\"moving_side ca-font-black\"\n          [ngStyle]=\"{ color: gpsInfo?.gpsheadingColor }\"\n        >\n          {{ gpsInfo?.gpsheading }}\n        </div>\n        <div class=\"moving_time ca-font-medium\">{{ gpsInfo?.gpsTime }}</div>\n      </div>\n    </ng-container>\n  </div>\n\n  <ng-template #gpsDropdownPopover let-data=\"data\">\n    <div class=\"main_dropdown_holder d-flex\">\n      <div class=\"map_holder\">\n        <app-ca-map [data]=\"Mapdata\"></app-ca-map>\n      </div>\n      <div class=\"gps_all_hold\">\n        <div\n          class=\"gps_header d-flex align-items-center\"\n          (mouseenter)=\"hoveredGpsIcon = true\"\n          (mouseleave)=\"hoveredGpsIcon = false\"\n        >\n          <div class=\"gps-progress-img\">\n            <svg-icon [src]=\"gpsIcon\"></svg-icon>\n          </div>\n          <div class=\"gps_info_hold d-flex flex-column justify-content-center\">\n            <div\n              class=\"moving_side ca-font-black\"\n              [ngStyle]=\"{ color: gpsInfo?.gpsheadingColor }\"\n            >\n              {{ gpsInfo?.gpsheading }}\n            </div>\n            <div class=\"moving_time ca-font-medium\">\n              {{ !hoveredGpsIcon ? \"Near Maplewood, MO\" : \"03:47\" }}\n            </div>\n          </div>\n        </div>\n        <div class=\"gps_info_border\"></div>\n        <div class=\"gps_progress_hold\">\n          <div\n            class=\"gps_progress_hold_inner d-flex flex-column justify-content-between align-items-start\"\n          >\n            <div class=\"progress_line\">\n              <div\n                class=\"progress_inner_line\"\n                [ngStyle]=\"{\n                  height: currentPosition + '%',\n                }\"\n              ></div>\n              <div\n                class=\"progress_moving_dot d-flex justify-content-center align-items-center\"\n                [style.top]=\"'calc(' + currentPosition + '% - 7px)'\"\n              >\n                <div class=\"moving_dot_inner\"></div>\n              </div>\n            </div>\n            <div class=\"progress_inner\" *ngFor=\"let stop of gpsProgress\">\n              <div class=\"progress_header d-flex align-items-center\">\n                <div class=\"progress_header_inside d-flex\">\n                  <div\n                    class=\"progress_icon d-flex justify-content-center align-items-center\"\n                    [ngClass]=\"{\n                      pickup_future:\n                        currentPosition < stop.position &&\n                        stop.type === 'pickup',\n                    }\"\n                  >\n                    <svg-icon\n                      *ngIf=\"currentPosition > stop.position\"\n                      [src]=\"getSvgPath('checkRoute')\"\n                    ></svg-icon>\n                    <ng-container *ngIf=\"currentPosition < stop.position\">\n                      <div\n                        class=\"progress_dot\"\n                        [ngStyle]=\"{\n                          backgroundColor:\n                            stop.type === 'pickup' ? '#4DB6A2' : '#E57373',\n                        }\"\n                      ></div>\n                    </ng-container>\n                  </div>\n                  <div class=\"progress_info_hold d-flex flex-column\">\n                    <div\n                      class=\"progress_name ca-font-bold\"\n                      [ngStyle]=\"{\n                        color:\n                          currentPosition < stop.position\n                            ? '#ffffff'\n                            : '#919191',\n                      }\"\n                    >\n                      {{ stop.location }}\n                    </div>\n                    <ng-container *ngIf=\"currentPosition < stop.position\">\n                      <div class=\"progress_time ca-font-regular\">\n                        {{ stop.time }}\n                      </div></ng-container\n                    >\n                  </div>\n                </div>\n                <div\n                  class=\"progress_type d-flex justify-content-center align-items-center\"\n                  [ngStyle]=\"{\n                    backgroundColor:\n                      currentPosition > stop.position\n                        ? '#AAAAAA'\n                        : stop.type === 'pickup'\n                          ? '#4DB6A2'\n                          : '#E57373',\n                  }\"\n                >\n                  <div class=\"progress_number ca-font-bold\">\n                    {{ staticConstant.zero }}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"gps_info_border\"></div>\n        <div class=\"gps_complete_hold\">\n          <div class=\"gps_complete_row d-flex\">\n            <div class=\"gps_complete_text ca-font-bold\">\n              {{ staticConstant.completed }}\n            </div>\n            <div class=\"gps_complete_text_info ca-font-bold\">\n              {{ staticConstant.total }}\n            </div>\n          </div>\n          <div class=\"gps_complete_second_row d-flex\">\n            <div class=\"gps_complete_text ca-font-bold\">\n              {{ currentPosition }}{{ staticConstant.percentage }}\n            </div>\n            <div class=\"gps_complete_text_info ca-font-bold\">\n              {{ staticConstant.completed_text }}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap\";@import\"/node_modules/bootstrap/dist/css/bootstrap.css\";.ca-font-thin{font-weight:100!important}.ca-font-extra-light{font-weight:200!important}.ca-font-light{font-weight:300!important}.ca-font-regular{font-weight:400!important}.ca-font-medium{font-weight:500!important}.ca-font-semi-bold{font-weight:600!important}.ca-font-bold{font-weight:700!important}.ca-font-extra-bold{font-weight:800!important}.ca-font-black{font-weight:900!important}@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.table-progress-popover{background-color:unset!important;margin-left:-10px}.table-progress-popover .progress-dropdown{margin-top:-6px;width:260px;height:200px;background:#2f2f2f;border-radius:3px;padding:8px;box-shadow:0 0 4px #00000026;overflow:hidden;animation:progressAnimation .25s ease-in-out}.table-progress-popover .progress-dropdown .progress-header .progress-title{font-size:18px;font-weight:600;color:#dadada}.table-progress-popover .progress-dropdown .progress-header .progress-title span{font-weight:400}.table-progress-popover .progress-dropdown .progress-header .progress-total{font-size:14px;line-height:17px;color:#dadada}.table-progress-popover .progress-dropdown .table-progress-bar-container{width:100%;height:8px;margin-top:6px;border-radius:2px;overflow:hidden}.table-progress-popover .progress-dropdown .table-progress-bar-container .table-progress-bar{height:100%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-dual-info-container .progress-info-container{width:50%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container{margin-top:10px}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-title{margin-bottom:2px;font-size:11px;font-weight:700;line-height:14px;color:#ffffffb2}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-text{font-size:14px;line-height:18px;color:#dadada}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@keyframes progressAnimation{0%{height:0px}to{height:220px}}ngb-popover-window{padding:unset!important;border:unset!important}ngb-popover-window .popover-arrow{display:none!important}ngb-popover-window .popover-body{padding:unset!important}*{margin:0;font-family:Roboto,Helvetica Neue,sans-serif}html{scroll-behavior:auto!important}.gm-style-iw-chr,.gm-style-iw-tc{display:none}.gm-style .gm-style-iw-c{border-radius:0}.gm-style-iw{overflow-y:auto!important;overflow-x:hidden!important}.gm-style-iw>div{overflow:visible!important}.infoWindow{overflow:hidden!important}.gm-style-iw-d,.gm-style-iw.gm-style-iw-c{max-height:350px!important}.gps-progress-bar{width:300px}.gps-progress-bar .gps-progress-holder{height:26px;padding:2px}.gps-progress-bar .gps-progress-holder .gps-progress-img{cursor:pointer}.gps-progress-bar .gps-progress-holder .gps-progress-img svg-icon svg{width:22px;height:22px}.gps-progress-bar .gps-progress-holder .gps-progress-text{height:26px;padding:0 10px 0 8px;flex:1}.gps-progress-bar .gps-progress-holder .gps-progress-text .mileage-gps{height:12px}.gps-progress-bar .gps-progress-holder .gps-progress-text .mileage-gps:last-child{align-items:center}.gps-progress-bar .gps-progress-holder .gps-progress-text .mileage-gps .mileages,.gps-progress-bar .gps-progress-holder .gps-progress-text .mileage-gps .mileage-normal{font-size:11px;color:#2f2f2f;-webkit-user-select:none;user-select:none}.gps-progress-bar .gps-progress-holder .gps-progress-text .mileage-gps .mileages::selection,.gps-progress-bar .gps-progress-holder .gps-progress-text .mileage-gps .mileage-normal::selection{color:#919191;background:#91919120}.gps-progress-bar .gps-progress-holder .gps-progress-text .mileage-gps .gps-timeline{position:relative;margin-right:12px;flex:1;height:2px;background-color:#dadada}.gps-progress-bar .gps-progress-holder .gps-progress-text .mileage-gps .gps-timeline .gps-stop{position:absolute;top:50%;width:4px;height:6px;border-radius:1px;background-color:#aaa;transform:translateY(-50%);cursor:pointer}.gps-progress-bar .gps-progress-holder .gps-progress-text .mileage-gps .gps-timeline .gps-stop.pickup-stop{background-color:#80cbba}.gps-progress-bar .gps-progress-holder .gps-progress-text .mileage-gps .gps-timeline .gps-stop.delivery-stop{background-color:#ef5350}.gps-progress-bar .gps-progress-holder .gps-progress-text .mileage-gps .gps-timeline .current-pos{position:absolute;top:50%;left:0%;transform:translateY(-50%);cursor:pointer}.gps-progress-bar .gps-progress-holder .gps-progress-text .mileage-gps .gps-timeline .current-pos svg-icon svg{width:10px;height:10px}.gps-progress-bar .gps-progress-holder .gps-progress-text .mileage-gps .gps-timeline .current-pos svg-icon svg rect:first-child{fill:#3074d3}.gps-progress-bar .gps-progress-holder .gps-progress-text .mileage-gps .gps-timeline .current-pos svg-icon svg rect:last-child{fill:#fff}.gps-progress-bar .gps-progress-holder .gps-progress-text .mileage-gps .gps-timeline .gps-timeline-active{position:absolute;height:2px;left:0;width:0%;background-color:#6c6c6c}.gps-progress-bar .gps-progress-holder .gps-progress-text .mileage-gps .gps-timeline .gps_current_info{position:absolute;background-color:#424242;padding:3px 6px 1px;margin-top:7px;color:#fff;border-radius:3px}.gps-progress-bar .gps-progress-holder .gps-progress-text .mileage-gps .gps-timeline .gps_current_info .gps_info_title{font-size:10px}.gps-progress-bar .gps-progress-holder .gps_info_hold{height:26px;padding:0 10px 0 8px;flex:1}.gps-progress-bar .gps-progress-holder .gps_info_hold .moving_side{color:#3074d3;font-size:11px;line-height:11px}.gps-progress-bar .gps-progress-holder .gps_info_hold .moving_side::selection{color:#919191;background:#91919120}.gps-progress-bar .gps-progress-holder .gps_info_hold .moving_time{color:#2f2f2f;font-size:11px;line-height:11px}.gps-progress-bar .gps-progress-holder .gps_info_hold .moving_time::selection{color:#919191;background:#91919120}.main_dropdown_holder{width:494px;background-color:#2f2f2f;border-radius:3px;overflow:hidden}.main_dropdown_holder .map_holder{flex:1}.main_dropdown_holder .gps_all_hold{padding:4px;width:224px}.main_dropdown_holder .gps_all_hold .gps_header{margin-bottom:4px;padding:2px;border-radius:2px}.main_dropdown_holder .gps_all_hold .gps_header:hover{background-color:#1d1d1d}.main_dropdown_holder .gps_all_hold .gps_header .gps-progress-img{cursor:pointer}.main_dropdown_holder .gps_all_hold .gps_header .gps-progress-img svg-icon svg{width:22px;height:22px}.main_dropdown_holder .gps_all_hold .gps_header .gps_info_hold{padding:0 10px 0 8px}.main_dropdown_holder .gps_all_hold .gps_header .gps_info_hold .moving_side{color:#3074d3;font-size:11px;line-height:11px}.main_dropdown_holder .gps_all_hold .gps_header .gps_info_hold .moving_side::selection{color:#919191;background:#91919120}.main_dropdown_holder .gps_all_hold .gps_header .gps_info_hold .moving_time{color:#fff;font-size:11px;line-height:11px}.main_dropdown_holder .gps_all_hold .gps_header .gps_info_hold .moving_time::selection{color:#919191;background:#91919120}.main_dropdown_holder .gps_all_hold .gps_info_border{height:1px;width:100%;background-color:#424242;border-radius:1px}.main_dropdown_holder .gps_all_hold .gps_progress_hold{padding:9px 0}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner{position:relative;min-height:191px;overflow-y:auto}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_line{position:absolute;left:16px;height:100%;width:2px;background-color:#ccc3}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_line .progress_inner_line{width:2px;height:30%;background-color:#ccc}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_line .progress_moving_dot{position:absolute;left:-6px;top:calc(30% - 7px);width:14px;height:14px;background-color:#6f9ee0;border-radius:100%;z-index:3}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_line .progress_moving_dot .moving_dot_inner{width:6px;height:6px;background-color:#fff;border-radius:100%}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_inner{width:100%;padding:4px 8px 5px 10px;border-radius:1px}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_inner .progress_header .progress_header_inside{flex:1}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_inner .progress_header .progress_header_inside .progress_icon{height:14px;width:14px;margin-top:2px;background-color:#2f2f2f;z-index:2}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_inner .progress_header .progress_header_inside .progress_icon svg-icon svg{display:flex;width:14px;height:14px}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_inner .progress_header .progress_header_inside .progress_icon svg-icon svg path{fill:#919191}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_inner .progress_header .progress_header_inside .progress_icon .progress_dot{width:6px;height:6px;border-radius:100%;background-color:#4db6a2}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_inner .progress_header .progress_header_inside .progress_info_hold{margin-left:8px}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_inner .progress_header .progress_header_inside .progress_info_hold .progress_name{font-size:14px;line-height:18px;color:#919191}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_inner .progress_header .progress_header_inside .progress_info_hold .progress_name::selection{color:#919191;background:#91919120}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_inner .progress_header .progress_header_inside .progress_info_hold .progress_time{margin-top:3px;font-size:11px;line-height:13px;color:#fff}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_inner .progress_header .progress_header_inside .progress_info_hold .progress_time::selection{color:#919191;background:#91919120}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_inner .progress_header .progress_type{height:22px;width:22px;background-color:#aaa;border-radius:100%}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_inner .progress_header .progress_type .progress_number{color:#fff;line-height:17px;font-size:14px}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_inner .progress_header .progress_type .progress_number::selection{color:#919191;background:#91919120}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_inner:hover,.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_inner:hover .progress_header .progress_header_inside .progress_icon{background-color:#1d1d1d}.main_dropdown_holder .gps_all_hold .gps_complete_hold{margin-top:7px;padding:0 10px}.main_dropdown_holder .gps_all_hold .gps_complete_hold .gps_complete_row{margin-bottom:2px}.main_dropdown_holder .gps_all_hold .gps_complete_hold .gps_complete_row .gps_complete_text{flex:1;color:#fff6;font-size:11px;line-height:14px}.main_dropdown_holder .gps_all_hold .gps_complete_hold .gps_complete_row .gps_complete_text::selection{color:#919191;background:#91919120}.main_dropdown_holder .gps_all_hold .gps_complete_hold .gps_complete_row .gps_complete_text_info{color:#fff6;font-size:11px;line-height:14px}.main_dropdown_holder .gps_all_hold .gps_complete_hold .gps_complete_row .gps_complete_text_info::selection{color:#919191;background:#91919120}.main_dropdown_holder .gps_all_hold .gps_complete_hold .gps_complete_second_row .gps_complete_text{flex:1;color:#fff;font-size:14px;line-height:18px}.main_dropdown_holder .gps_all_hold .gps_complete_hold .gps_complete_second_row .gps_complete_text::selection{color:#919191;background:#91919120}.main_dropdown_holder .gps_all_hold .gps_complete_hold .gps_complete_second_row .gps_complete_text_info{color:#fff;font-size:14px;line-height:18px}.main_dropdown_holder .gps_all_hold .gps_complete_hold .gps_complete_second_row .gps_complete_text_info::selection{color:#919191;background:#91919120}\n"], dependencies: [{ kind: "ngmodule", type: 
+                //Modules
+                CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AngularSvgIconModule }, { kind: "component", type: i2.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i1$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: 
+                //Components
+                CaMapComponent$1, selector: "app-ca-map", inputs: ["data"], outputs: ["markerClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-ca-progress-bar", standalone: true, imports: [
+                        //Modules
+                        CommonModule,
+                        AngularSvgIconModule,
+                        NgbModule,
+                        //Components
+                        CaMapComponent$1,
+                    ], template: "<div class=\"gps-progress-bar\">\n  <div\n    class=\"gps-progress-holder d-flex align-items-center\"\n    #t2=\"ngbPopover\"\n    [ngbPopover]=\"gpsDropdownPopover\"\n    [autoClose]=\"'outside'\"\n    container=\"body\"\n    [placement]=\"'bottom'\"\n    popoverClass=\"gps_dropdown_popover\"\n    triggers=\"manual\"\n    (click)=\"showDropdownMap(t2)\"\n  >\n    <div\n      class=\"gps-progress-img\"\n      (mouseenter)=\"hoveredGpsIcon = true\"\n      (mouseleave)=\"hoveredGpsIcon = false\"\n    >\n      <svg-icon [src]=\"gpsIcon\"></svg-icon>\n    </div>\n    <ng-container *ngIf=\"!hoveredGpsIcon\">\n      <div class=\"gps-progress-text\">\n        <div class=\"mileage-gps d-flex justify-content-between\">\n          <div class=\"mileages ca-font-semi-bold\">{{ gpsTitle }}</div>\n          <div class=\"mileage-normal ca-font-regular\">\n            {{ mileageInfo }}\n          </div>\n        </div>\n        <div class=\"mileage-gps d-flex\">\n          <div class=\"gps-timeline\">\n            <div\n              class=\"gps-timeline-active\"\n              [ngStyle]=\"{ width: currentPosition + '%' }\"\n            ></div>\n            <ng-container\n              *ngFor=\"let stop of gpsProgress; let i = index; trackBy: identity\"\n            >\n              <div\n                class=\"gps-stop\"\n                (mouseenter)=\"hoverStop(stop, i, false)\"\n                (mouseleave)=\"leaveStop()\"\n                [ngClass]=\"{\n                  'pickup-stop': stop.type === 'pickup',\n                  'delivery-stop': stop.type === 'delivery',\n                }\"\n                [ngStyle]=\"{ left: stop.position + '%' }\"\n              ></div>\n            </ng-container>\n            <div\n              class=\"current-pos\"\n              (mouseenter)=\"hoverStop(currentStop, -2, true)\"\n              (mouseleave)=\"leaveStop()\"\n              [ngStyle]=\"{ left: currentPosition + '%' }\"\n            >\n              <svg-icon [src]=\"gpsLocationIcon\"></svg-icon>\n            </div>\n            <ng-container\n              *ngIf=\"hoveredGpsCurrentPosition && focusedIcon !== -1\"\n            >\n              <div\n                class=\"gps_current_info\"\n                [ngStyle]=\"{ left: getLeftStyle() }\"\n              >\n                <div class=\"gps_info_title ca-font-bold\">{{ tooltip }}</div>\n              </div>\n            </ng-container>\n          </div>\n          <div class=\"mileages ca-font-semi-bold\">{{ mileagesPercent }}</div>\n        </div>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"hoveredGpsIcon\">\n      <div class=\"gps_info_hold d-flex flex-column justify-content-center\">\n        <div\n          class=\"moving_side ca-font-black\"\n          [ngStyle]=\"{ color: gpsInfo?.gpsheadingColor }\"\n        >\n          {{ gpsInfo?.gpsheading }}\n        </div>\n        <div class=\"moving_time ca-font-medium\">{{ gpsInfo?.gpsTime }}</div>\n      </div>\n    </ng-container>\n  </div>\n\n  <ng-template #gpsDropdownPopover let-data=\"data\">\n    <div class=\"main_dropdown_holder d-flex\">\n      <div class=\"map_holder\">\n        <app-ca-map [data]=\"Mapdata\"></app-ca-map>\n      </div>\n      <div class=\"gps_all_hold\">\n        <div\n          class=\"gps_header d-flex align-items-center\"\n          (mouseenter)=\"hoveredGpsIcon = true\"\n          (mouseleave)=\"hoveredGpsIcon = false\"\n        >\n          <div class=\"gps-progress-img\">\n            <svg-icon [src]=\"gpsIcon\"></svg-icon>\n          </div>\n          <div class=\"gps_info_hold d-flex flex-column justify-content-center\">\n            <div\n              class=\"moving_side ca-font-black\"\n              [ngStyle]=\"{ color: gpsInfo?.gpsheadingColor }\"\n            >\n              {{ gpsInfo?.gpsheading }}\n            </div>\n            <div class=\"moving_time ca-font-medium\">\n              {{ !hoveredGpsIcon ? \"Near Maplewood, MO\" : \"03:47\" }}\n            </div>\n          </div>\n        </div>\n        <div class=\"gps_info_border\"></div>\n        <div class=\"gps_progress_hold\">\n          <div\n            class=\"gps_progress_hold_inner d-flex flex-column justify-content-between align-items-start\"\n          >\n            <div class=\"progress_line\">\n              <div\n                class=\"progress_inner_line\"\n                [ngStyle]=\"{\n                  height: currentPosition + '%',\n                }\"\n              ></div>\n              <div\n                class=\"progress_moving_dot d-flex justify-content-center align-items-center\"\n                [style.top]=\"'calc(' + currentPosition + '% - 7px)'\"\n              >\n                <div class=\"moving_dot_inner\"></div>\n              </div>\n            </div>\n            <div class=\"progress_inner\" *ngFor=\"let stop of gpsProgress\">\n              <div class=\"progress_header d-flex align-items-center\">\n                <div class=\"progress_header_inside d-flex\">\n                  <div\n                    class=\"progress_icon d-flex justify-content-center align-items-center\"\n                    [ngClass]=\"{\n                      pickup_future:\n                        currentPosition < stop.position &&\n                        stop.type === 'pickup',\n                    }\"\n                  >\n                    <svg-icon\n                      *ngIf=\"currentPosition > stop.position\"\n                      [src]=\"getSvgPath('checkRoute')\"\n                    ></svg-icon>\n                    <ng-container *ngIf=\"currentPosition < stop.position\">\n                      <div\n                        class=\"progress_dot\"\n                        [ngStyle]=\"{\n                          backgroundColor:\n                            stop.type === 'pickup' ? '#4DB6A2' : '#E57373',\n                        }\"\n                      ></div>\n                    </ng-container>\n                  </div>\n                  <div class=\"progress_info_hold d-flex flex-column\">\n                    <div\n                      class=\"progress_name ca-font-bold\"\n                      [ngStyle]=\"{\n                        color:\n                          currentPosition < stop.position\n                            ? '#ffffff'\n                            : '#919191',\n                      }\"\n                    >\n                      {{ stop.location }}\n                    </div>\n                    <ng-container *ngIf=\"currentPosition < stop.position\">\n                      <div class=\"progress_time ca-font-regular\">\n                        {{ stop.time }}\n                      </div></ng-container\n                    >\n                  </div>\n                </div>\n                <div\n                  class=\"progress_type d-flex justify-content-center align-items-center\"\n                  [ngStyle]=\"{\n                    backgroundColor:\n                      currentPosition > stop.position\n                        ? '#AAAAAA'\n                        : stop.type === 'pickup'\n                          ? '#4DB6A2'\n                          : '#E57373',\n                  }\"\n                >\n                  <div class=\"progress_number ca-font-bold\">\n                    {{ staticConstant.zero }}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"gps_info_border\"></div>\n        <div class=\"gps_complete_hold\">\n          <div class=\"gps_complete_row d-flex\">\n            <div class=\"gps_complete_text ca-font-bold\">\n              {{ staticConstant.completed }}\n            </div>\n            <div class=\"gps_complete_text_info ca-font-bold\">\n              {{ staticConstant.total }}\n            </div>\n          </div>\n          <div class=\"gps_complete_second_row d-flex\">\n            <div class=\"gps_complete_text ca-font-bold\">\n              {{ currentPosition }}{{ staticConstant.percentage }}\n            </div>\n            <div class=\"gps_complete_text_info ca-font-bold\">\n              {{ staticConstant.completed_text }}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap\";@import\"/node_modules/bootstrap/dist/css/bootstrap.css\";.ca-font-thin{font-weight:100!important}.ca-font-extra-light{font-weight:200!important}.ca-font-light{font-weight:300!important}.ca-font-regular{font-weight:400!important}.ca-font-medium{font-weight:500!important}.ca-font-semi-bold{font-weight:600!important}.ca-font-bold{font-weight:700!important}.ca-font-extra-bold{font-weight:800!important}.ca-font-black{font-weight:900!important}@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.table-progress-popover{background-color:unset!important;margin-left:-10px}.table-progress-popover .progress-dropdown{margin-top:-6px;width:260px;height:200px;background:#2f2f2f;border-radius:3px;padding:8px;box-shadow:0 0 4px #00000026;overflow:hidden;animation:progressAnimation .25s ease-in-out}.table-progress-popover .progress-dropdown .progress-header .progress-title{font-size:18px;font-weight:600;color:#dadada}.table-progress-popover .progress-dropdown .progress-header .progress-title span{font-weight:400}.table-progress-popover .progress-dropdown .progress-header .progress-total{font-size:14px;line-height:17px;color:#dadada}.table-progress-popover .progress-dropdown .table-progress-bar-container{width:100%;height:8px;margin-top:6px;border-radius:2px;overflow:hidden}.table-progress-popover .progress-dropdown .table-progress-bar-container .table-progress-bar{height:100%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-dual-info-container .progress-info-container{width:50%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container{margin-top:10px}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-title{margin-bottom:2px;font-size:11px;font-weight:700;line-height:14px;color:#ffffffb2}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-text{font-size:14px;line-height:18px;color:#dadada}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@keyframes progressAnimation{0%{height:0px}to{height:220px}}ngb-popover-window{padding:unset!important;border:unset!important}ngb-popover-window .popover-arrow{display:none!important}ngb-popover-window .popover-body{padding:unset!important}*{margin:0;font-family:Roboto,Helvetica Neue,sans-serif}html{scroll-behavior:auto!important}.gm-style-iw-chr,.gm-style-iw-tc{display:none}.gm-style .gm-style-iw-c{border-radius:0}.gm-style-iw{overflow-y:auto!important;overflow-x:hidden!important}.gm-style-iw>div{overflow:visible!important}.infoWindow{overflow:hidden!important}.gm-style-iw-d,.gm-style-iw.gm-style-iw-c{max-height:350px!important}.gps-progress-bar{width:300px}.gps-progress-bar .gps-progress-holder{height:26px;padding:2px}.gps-progress-bar .gps-progress-holder .gps-progress-img{cursor:pointer}.gps-progress-bar .gps-progress-holder .gps-progress-img svg-icon svg{width:22px;height:22px}.gps-progress-bar .gps-progress-holder .gps-progress-text{height:26px;padding:0 10px 0 8px;flex:1}.gps-progress-bar .gps-progress-holder .gps-progress-text .mileage-gps{height:12px}.gps-progress-bar .gps-progress-holder .gps-progress-text .mileage-gps:last-child{align-items:center}.gps-progress-bar .gps-progress-holder .gps-progress-text .mileage-gps .mileages,.gps-progress-bar .gps-progress-holder .gps-progress-text .mileage-gps .mileage-normal{font-size:11px;color:#2f2f2f;-webkit-user-select:none;user-select:none}.gps-progress-bar .gps-progress-holder .gps-progress-text .mileage-gps .mileages::selection,.gps-progress-bar .gps-progress-holder .gps-progress-text .mileage-gps .mileage-normal::selection{color:#919191;background:#91919120}.gps-progress-bar .gps-progress-holder .gps-progress-text .mileage-gps .gps-timeline{position:relative;margin-right:12px;flex:1;height:2px;background-color:#dadada}.gps-progress-bar .gps-progress-holder .gps-progress-text .mileage-gps .gps-timeline .gps-stop{position:absolute;top:50%;width:4px;height:6px;border-radius:1px;background-color:#aaa;transform:translateY(-50%);cursor:pointer}.gps-progress-bar .gps-progress-holder .gps-progress-text .mileage-gps .gps-timeline .gps-stop.pickup-stop{background-color:#80cbba}.gps-progress-bar .gps-progress-holder .gps-progress-text .mileage-gps .gps-timeline .gps-stop.delivery-stop{background-color:#ef5350}.gps-progress-bar .gps-progress-holder .gps-progress-text .mileage-gps .gps-timeline .current-pos{position:absolute;top:50%;left:0%;transform:translateY(-50%);cursor:pointer}.gps-progress-bar .gps-progress-holder .gps-progress-text .mileage-gps .gps-timeline .current-pos svg-icon svg{width:10px;height:10px}.gps-progress-bar .gps-progress-holder .gps-progress-text .mileage-gps .gps-timeline .current-pos svg-icon svg rect:first-child{fill:#3074d3}.gps-progress-bar .gps-progress-holder .gps-progress-text .mileage-gps .gps-timeline .current-pos svg-icon svg rect:last-child{fill:#fff}.gps-progress-bar .gps-progress-holder .gps-progress-text .mileage-gps .gps-timeline .gps-timeline-active{position:absolute;height:2px;left:0;width:0%;background-color:#6c6c6c}.gps-progress-bar .gps-progress-holder .gps-progress-text .mileage-gps .gps-timeline .gps_current_info{position:absolute;background-color:#424242;padding:3px 6px 1px;margin-top:7px;color:#fff;border-radius:3px}.gps-progress-bar .gps-progress-holder .gps-progress-text .mileage-gps .gps-timeline .gps_current_info .gps_info_title{font-size:10px}.gps-progress-bar .gps-progress-holder .gps_info_hold{height:26px;padding:0 10px 0 8px;flex:1}.gps-progress-bar .gps-progress-holder .gps_info_hold .moving_side{color:#3074d3;font-size:11px;line-height:11px}.gps-progress-bar .gps-progress-holder .gps_info_hold .moving_side::selection{color:#919191;background:#91919120}.gps-progress-bar .gps-progress-holder .gps_info_hold .moving_time{color:#2f2f2f;font-size:11px;line-height:11px}.gps-progress-bar .gps-progress-holder .gps_info_hold .moving_time::selection{color:#919191;background:#91919120}.main_dropdown_holder{width:494px;background-color:#2f2f2f;border-radius:3px;overflow:hidden}.main_dropdown_holder .map_holder{flex:1}.main_dropdown_holder .gps_all_hold{padding:4px;width:224px}.main_dropdown_holder .gps_all_hold .gps_header{margin-bottom:4px;padding:2px;border-radius:2px}.main_dropdown_holder .gps_all_hold .gps_header:hover{background-color:#1d1d1d}.main_dropdown_holder .gps_all_hold .gps_header .gps-progress-img{cursor:pointer}.main_dropdown_holder .gps_all_hold .gps_header .gps-progress-img svg-icon svg{width:22px;height:22px}.main_dropdown_holder .gps_all_hold .gps_header .gps_info_hold{padding:0 10px 0 8px}.main_dropdown_holder .gps_all_hold .gps_header .gps_info_hold .moving_side{color:#3074d3;font-size:11px;line-height:11px}.main_dropdown_holder .gps_all_hold .gps_header .gps_info_hold .moving_side::selection{color:#919191;background:#91919120}.main_dropdown_holder .gps_all_hold .gps_header .gps_info_hold .moving_time{color:#fff;font-size:11px;line-height:11px}.main_dropdown_holder .gps_all_hold .gps_header .gps_info_hold .moving_time::selection{color:#919191;background:#91919120}.main_dropdown_holder .gps_all_hold .gps_info_border{height:1px;width:100%;background-color:#424242;border-radius:1px}.main_dropdown_holder .gps_all_hold .gps_progress_hold{padding:9px 0}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner{position:relative;min-height:191px;overflow-y:auto}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_line{position:absolute;left:16px;height:100%;width:2px;background-color:#ccc3}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_line .progress_inner_line{width:2px;height:30%;background-color:#ccc}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_line .progress_moving_dot{position:absolute;left:-6px;top:calc(30% - 7px);width:14px;height:14px;background-color:#6f9ee0;border-radius:100%;z-index:3}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_line .progress_moving_dot .moving_dot_inner{width:6px;height:6px;background-color:#fff;border-radius:100%}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_inner{width:100%;padding:4px 8px 5px 10px;border-radius:1px}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_inner .progress_header .progress_header_inside{flex:1}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_inner .progress_header .progress_header_inside .progress_icon{height:14px;width:14px;margin-top:2px;background-color:#2f2f2f;z-index:2}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_inner .progress_header .progress_header_inside .progress_icon svg-icon svg{display:flex;width:14px;height:14px}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_inner .progress_header .progress_header_inside .progress_icon svg-icon svg path{fill:#919191}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_inner .progress_header .progress_header_inside .progress_icon .progress_dot{width:6px;height:6px;border-radius:100%;background-color:#4db6a2}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_inner .progress_header .progress_header_inside .progress_info_hold{margin-left:8px}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_inner .progress_header .progress_header_inside .progress_info_hold .progress_name{font-size:14px;line-height:18px;color:#919191}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_inner .progress_header .progress_header_inside .progress_info_hold .progress_name::selection{color:#919191;background:#91919120}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_inner .progress_header .progress_header_inside .progress_info_hold .progress_time{margin-top:3px;font-size:11px;line-height:13px;color:#fff}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_inner .progress_header .progress_header_inside .progress_info_hold .progress_time::selection{color:#919191;background:#91919120}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_inner .progress_header .progress_type{height:22px;width:22px;background-color:#aaa;border-radius:100%}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_inner .progress_header .progress_type .progress_number{color:#fff;line-height:17px;font-size:14px}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_inner .progress_header .progress_type .progress_number::selection{color:#919191;background:#91919120}.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_inner:hover,.main_dropdown_holder .gps_all_hold .gps_progress_hold .gps_progress_hold_inner .progress_inner:hover .progress_header .progress_header_inside .progress_icon{background-color:#1d1d1d}.main_dropdown_holder .gps_all_hold .gps_complete_hold{margin-top:7px;padding:0 10px}.main_dropdown_holder .gps_all_hold .gps_complete_hold .gps_complete_row{margin-bottom:2px}.main_dropdown_holder .gps_all_hold .gps_complete_hold .gps_complete_row .gps_complete_text{flex:1;color:#fff6;font-size:11px;line-height:14px}.main_dropdown_holder .gps_all_hold .gps_complete_hold .gps_complete_row .gps_complete_text::selection{color:#919191;background:#91919120}.main_dropdown_holder .gps_all_hold .gps_complete_hold .gps_complete_row .gps_complete_text_info{color:#fff6;font-size:11px;line-height:14px}.main_dropdown_holder .gps_all_hold .gps_complete_hold .gps_complete_row .gps_complete_text_info::selection{color:#919191;background:#91919120}.main_dropdown_holder .gps_all_hold .gps_complete_hold .gps_complete_second_row .gps_complete_text{flex:1;color:#fff;font-size:14px;line-height:18px}.main_dropdown_holder .gps_all_hold .gps_complete_hold .gps_complete_second_row .gps_complete_text::selection{color:#919191;background:#91919120}.main_dropdown_holder .gps_all_hold .gps_complete_hold .gps_complete_second_row .gps_complete_text_info{color:#fff;font-size:14px;line-height:18px}.main_dropdown_holder .gps_all_hold .gps_complete_hold .gps_complete_second_row .gps_complete_text_info::selection{color:#919191;background:#91919120}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { isDropdown: [{
+                type: Input
+            }], currentPosition: [{
+                type: Input
+            }], mileageInfo: [{
+                type: Input
+            }], currentStop: [{
+                type: Input
+            }], gpsTitle: [{
+                type: Input
+            }], gpsIcon: [{
+                type: Input
+            }], gpsInfo: [{
+                type: Input
+            }], mileagesPercent: [{
+                type: Input
+            }], gpsProgress: [{
+                type: Input
+            }], gpsLocationIcon: [{
+                type: Input
+            }] } });
+
+class CaSearchMultipleStatesComponent {
+    constructor() {
+        this.searchQueriesEmitter = new EventEmitter();
+        this.isFocused = false;
+        this.searchQueries = [];
+        this.searchQuery = "";
+        this.searchMultipleStatesSvgRoutes = SearchMultipleStatesRoutes;
+        this.inputConfig = inputConfig;
+    }
+    get isSearchQueryNotEmpty() {
+        return this.searchQuery.trim() !== "";
+    }
+    emitSearchQueries() {
+        this.searchQueriesEmitter.emit(this.searchQueries);
+    }
+    toggleFocus() {
+        this.isFocused = !this.isFocused;
+    }
+    addSearchQuery() {
+        if (this.searchQuery.trim() && this.searchQueries.length < 3) {
+            this.searchQueries.push(this.searchQuery.trim());
+            this.searchQuery = "";
+        }
+    }
+    removeSearchQuery(index) {
+        this.searchQueries.splice(index, 1);
+    }
+    clearSearchBar() {
+        this.searchQuery = "";
+    }
+    removeSelected(index) {
+        this.searchQueries.splice(index, 1);
+        this.isFocused = false;
+    }
+    removeQuery() {
+        this.searchQueries = [];
+    }
+    trackByQuery(index, query) {
+        return query;
+    }
+    getSvgPath(propertyName) {
+        return SearchMultipleStatesRoutes[propertyName];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaSearchMultipleStatesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CaSearchMultipleStatesComponent, isStandalone: true, selector: "app-ca-search-multiple-states", outputs: { searchQueriesEmitter: "searchQueriesEmitter" }, ngImport: i0, template: "<div [@focusChange]=\"isFocused ? 'focused' : 'default'\">\n  <div *ngIf=\"isFocused; else defaultTemplate\">\n    <ng-container *ngIf=\"searchQueries.length >= 3; else focusedTemplate\">\n      <ng-container *ngTemplateOutlet=\"searchArrayFull\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<!-- Default Template -->\n<ng-template #defaultTemplate>\n  <div class=\"d-flex align-items-center justify-content-start wrapper\">\n    <span\n      class=\"divider d-flex align-items-center justify-content-center\"\n    ></span>\n    <span class=\"d-flex justify-content-center\">\n      <span\n        ngbTooltip\n        [mainTooltip]=\"'Search'\"\n        tooltipBackground=\"#000000\"\n        position=\"bottom\"\n        (click)=\"toggleFocus()\"\n        class=\"search-icon d-flex align-items-center\"\n      >\n        <svg-icon\n          class=\"search-icon d-flex align-items-center\"\n          [src]=\"getSvgPath('searchButton')\"\n          [svgStyle]=\"{ 'width.px': 26, 'height.px': 26 }\"\n        ></svg-icon>\n      </span>\n      <ng-container *ngIf=\"searchQueries.length\">\n        <div\n          class=\"search-queries d-flex align-items-center justify-content-center\"\n        >\n          <ng-container\n            *ngFor=\"\n              let query of searchQueries;\n              let i = index;\n              trackBy: trackByQuery\n            \"\n          >\n            <span\n              (click)=\"removeSelected(i)\"\n              class=\"query d-flex justify-content-center\"\n              ngbTooltip\n              [mainTooltip]=\"'Clear'\"\n              tooltipBackground=\"#000000\"\n              position=\"bottom\"\n            >\n              {{ query }}\n            </span>\n          </ng-container>\n          <ng-container *ngIf=\"searchQueries.length\">\n            <div\n              ngbTooltip\n              [mainTooltip]=\"'Clear All'\"\n              tooltipBackground=\"#000000\"\n              position=\"bottom\"\n            >\n              <svg-icon\n                class=\"svg-icon-clear d-flex\"\n                [src]=\"getSvgPath('clearSearch')\"\n                (click)=\"removeQuery()\"\n              ></svg-icon>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n    </span>\n    <span class=\"divider d-flex align-items-center\"></span>\n  </div>\n</ng-template>\n\n<!-- Focused Template -->\n<ng-template #focusedTemplate>\n  <div class=\"d-flex align-items-center justify-content-start wrapperFocused\">\n    <span class=\"divider d-flex align-items-center\"></span>\n    <div class=\"d-flex align-items-center justify-content-start form\">\n      <div\n        (click)=\"toggleFocus()\"\n        class=\"d-flex align-items-center justify-content-start search\"\n        ngbTooltip\n        [mainTooltip]=\"'Close'\"\n        tooltipBackground=\"#000000\"\n        position=\"bottom\"\n      >\n        <svg-icon\n          class=\"search-icon d-flex justify-content-center align-items-center\"\n          [src]=\"getSvgPath('focusedSearchButton')\"\n          [svgStyle]=\"{ 'width.px': 26, 'height.px': 26 }\"\n        ></svg-icon>\n        <span\n          class=\"divider d-flex align-items-center justify-content-center\"\n        ></span>\n      </div>\n\n      <div class=\"d-flex align-items-center\">\n        <app-ca-input\n          class=\"input\"\n          type=\"text\"\n          (keyup.enter)=\"addSearchQuery()\"\n          [(ngModel)]=\"searchQuery\"\n          name=\"search\"\n          placeholder=\"Find Title\"\n          [inputConfig]=\"inputConfig\"\n        ></app-ca-input>\n        <ng-container *ngIf=\"isSearchQueryNotEmpty\">\n          <div\n            class=\"d-flex justify-content-start align-items-center add-clear-icons\"\n          >\n            <div\n              (click)=\"addSearchQuery()\"\n              ngbTooltip\n              [mainTooltip]=\"'Confirm'\"\n              tooltipBackground=\"#000000\"\n              position=\"top\"\n            >\n              <svg-icon\n                class=\"svg-icon-in-form d-flex\"\n                [src]=\"getSvgPath('add')\"\n              ></svg-icon>\n            </div>\n            <div\n              (click)=\"clearSearchBar()\"\n              ngbTooltip\n              [mainTooltip]=\"'Clear'\"\n              tooltipBackground=\"#000000\"\n              position=\"top\"\n            >\n              <svg-icon\n                class=\"svg-icon-in-form d-flex\"\n                [src]=\"getSvgPath('clearSearch')\"\n              ></svg-icon>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n    <ng-container *ngIf=\"searchQueries.length\">\n      <div\n        class=\"search-queries d-flex align-items-center justify-content-center\"\n      >\n        <ng-container\n          *ngFor=\"\n            let query of searchQueries;\n            let i = index;\n            trackBy: trackByQuery\n          \"\n        >\n          <span\n            (click)=\"removeSelected(i)\"\n            class=\"query d-flex justify-content-center\"\n            ngbTooltip\n            [mainTooltip]=\"'Clear'\"\n            tooltipBackground=\"#000000\"\n            position=\"bottom\"\n          >\n            {{ query }}\n          </span>\n        </ng-container>\n        <div\n          (click)=\"removeQuery()\"\n          ngbTooltip\n          [mainTooltip]=\"'Clear All'\"\n          tooltipBackground=\"#000000\"\n          position=\"top\"\n        >\n          <svg-icon\n            class=\"svg-icon-clear d-flex align-items-center\"\n            [src]=\"getSvgPath('clearSearch')\"\n          ></svg-icon>\n        </div>\n      </div>\n    </ng-container>\n    <span class=\"divider d-flex align-items-center\"></span>\n  </div>\n</ng-template>\n\n<!-- Search Array Full -->\n<ng-template #searchArrayFull>\n  <div class=\"d-flex align-items-center justify-content-start wrapperFocused\">\n    <span class=\"divider d-flex align-items-center\"></span>\n    <div class=\"d-flex align-items-center justify-content-start\">\n      <div\n        class=\"d-flex align-items-center justify-content-start search\"\n        ngbTooltip\n        [mainTooltip]=\"'Max added'\"\n        tooltipBackground=\"#000000\"\n        position=\"bottom\"\n      >\n        <svg-icon\n          class=\"svg-icon d-flex\"\n          [src]=\"getSvgPath('searchButton')\"\n          [svgStyle]=\"{ 'width.px': 26, 'height.px': 26 }\"\n        ></svg-icon>\n      </div>\n    </div>\n    <ng-container *ngIf=\"searchQueries.length\">\n      <div\n        class=\"d-flex align-items-center search-queries justify-content-center\"\n      >\n        <ng-container\n          *ngFor=\"\n            let query of searchQueries;\n            let i = index;\n            trackBy: trackByQuery\n          \"\n        >\n          <span\n            (click)=\"removeSelected(i)\"\n            class=\"query d-flex justify-content-center\"\n            ngbTooltip\n            [mainTooltip]=\"'Clear'\"\n            tooltipBackground=\"#000000\"\n            position=\"bottom\"\n          >\n            {{ query }}\n          </span>\n        </ng-container>\n        <div\n          (click)=\"removeQuery()\"\n          ngbTooltip\n          [mainTooltip]=\"'Clear All'\"\n          tooltipBackground=\"#000000\"\n          position=\"bottom\"\n        >\n          <svg-icon\n            class=\"svg-icon-clear d-flex\"\n            [src]=\"getSvgPath('clearSearch')\"\n          ></svg-icon>\n        </div>\n      </div>\n    </ng-container>\n    <span class=\"divider d-flex align-items-center\"></span>\n  </div>\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap\";@import\"/node_modules/bootstrap/dist/css/bootstrap.css\";.ca-font-thin{font-weight:100!important}.ca-font-extra-light{font-weight:200!important}.ca-font-light{font-weight:300!important}.ca-font-regular{font-weight:400!important}.ca-font-medium{font-weight:500!important}.ca-font-semi-bold{font-weight:600!important}.ca-font-bold{font-weight:700!important}.ca-font-extra-bold{font-weight:800!important}.ca-font-black{font-weight:900!important}@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.table-progress-popover{background-color:unset!important;margin-left:-10px}.table-progress-popover .progress-dropdown{margin-top:-6px;width:260px;height:200px;background:#2f2f2f;border-radius:3px;padding:8px;box-shadow:0 0 4px #00000026;overflow:hidden;animation:progressAnimation .25s ease-in-out}.table-progress-popover .progress-dropdown .progress-header .progress-title{font-size:18px;font-weight:600;color:#dadada}.table-progress-popover .progress-dropdown .progress-header .progress-title span{font-weight:400}.table-progress-popover .progress-dropdown .progress-header .progress-total{font-size:14px;line-height:17px;color:#dadada}.table-progress-popover .progress-dropdown .table-progress-bar-container{width:100%;height:8px;margin-top:6px;border-radius:2px;overflow:hidden}.table-progress-popover .progress-dropdown .table-progress-bar-container .table-progress-bar{height:100%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-dual-info-container .progress-info-container{width:50%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container{margin-top:10px}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-title{margin-bottom:2px;font-size:11px;font-weight:700;line-height:14px;color:#ffffffb2}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-text{font-size:14px;line-height:18px;color:#dadada}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@keyframes progressAnimation{0%{height:0px}to{height:220px}}ngb-popover-window{padding:unset!important;border:unset!important}ngb-popover-window .popover-arrow{display:none!important}ngb-popover-window .popover-body{padding:unset!important}*{margin:0;font-family:Roboto,Helvetica Neue,sans-serif}html{scroll-behavior:auto!important}.gm-style-iw-chr,.gm-style-iw-tc{display:none}.gm-style .gm-style-iw-c{border-radius:0}.gm-style-iw{overflow-y:auto!important;overflow-x:hidden!important}.gm-style-iw>div{overflow:visible!important}.infoWindow{overflow:hidden!important}.gm-style-iw-d,.gm-style-iw.gm-style-iw-c{max-height:350px!important}.wrapper .search-icon:hover{background-color:#fff3;border-radius:2px;cursor:pointer;fill:#424242;color:#424242}.wrapper .search-icon:hover:hover svg{background-color:#dadada;border-radius:2px}.wrapper .search-icon:hover:hover svg path{fill:#424242}.wrapper,.wrapperFocused{width:58px;height:34px;border-radius:2px;font-family:Montserrat,sans-serif}.wrapper .search-queries,.wrapperFocused .search-queries{cursor:pointer;gap:4px;padding:4px 8px}.wrapper .search-queries .clear-all-button,.wrapperFocused .search-queries .clear-all-button{gap:4px}.wrapper .search-queries .query,.wrapperFocused .search-queries .query{cursor:pointer;padding-left:4px;padding-right:4px;gap:10px;color:#eee;border-radius:2px}.wrapper .search-queries .query:nth-child(1),.wrapperFocused .search-queries .query:nth-child(1){background-color:#259f94}.wrapper .search-queries .query:nth-child(2),.wrapperFocused .search-queries .query:nth-child(2){background-color:#f89b2e}.wrapper .search-queries .query:nth-child(3),.wrapperFocused .search-queries .query:nth-child(3){background-color:#9e47ec}.wrapper .search-queries .query:hover:nth-child(1),.wrapperFocused .search-queries .query:hover:nth-child(1){background-color:#b6dfdb}.wrapper .search-queries .query:hover:nth-child(2),.wrapperFocused .search-queries .query:hover:nth-child(2){background-color:#cdb255}.wrapper .search-queries .query:hover:nth-child(3),.wrapperFocused .search-queries .query:hover:nth-child(3){background-color:#ab47bc}.wrapper .divider,.wrapperFocused .divider{border:1px solid #cccccc;width:0px;height:18px;margin:4px}.wrapperFocused{width:auto}.wrapperFocused .search-icon:hover{border-radius:2px;cursor:pointer;fill:#424242;color:#424242;transition:.3}.wrapperFocused .search-icon:hover:hover svg path{fill:#dadada}.wrapperFocused .form{width:200px;background-color:#1d1d1d;gap:4px;border-radius:2px;height:26px}.wrapperFocused .form .search{padding-left:4px}.wrapperFocused .form .add-clear-icons{gap:4px;padding-right:2px}.wrapperFocused .form .input{background-color:#1d1d1d;border-radius:2px;border:none;color:#fff;outline:none;max-width:122px}.wrapperFocused .form .input:focus{background-color:#1d1d1d;color:#dadada}.wrapperFocused .divider{color:#f3f3f3}.svg-icon-in-form,.svg-icon-clear{border-radius:2px;width:18px;height:18px}.svg-icon-in-form:hover,.svg-icon-clear:hover{transform:scale(1.2)}.svg-icon-in-form:hover svg,.svg-icon-clear:hover svg{background-color:#dadada}.svg-icon-clear:hover svg{background-color:#fbe9e9;border-radius:2px}.svg-icon-clear:hover svg path{fill:#c20c0c}\n"], dependencies: [{ kind: "ngmodule", type: 
+                // Angular
+                CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AngularSvgIconModule }, { kind: "component", type: i2.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "ngmodule", type: 
+                // Modules
+                FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: 
+                // Components
+                CaAppTooltipV2Component$1, selector: "mainTooltip, [mainTooltip]", inputs: ["mainTooltip", "position", "openTooltipDelay", "tooltipBackground", "tooltipColor", "tooltipTextAlign", "tooltipMarginTop"] }, { kind: "component", type: CaInputComponent$1, selector: "app-ca-input", inputs: ["inputConfig", "incorrectValue", "selectedDropdownLabelColor"], outputs: ["blurInput", "isFocusInput", "change"] }], animations: [toggleAnimation] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaSearchMultipleStatesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-ca-search-multiple-states", standalone: true, animations: [toggleAnimation], imports: [
+                        // Angular
+                        CommonModule,
+                        AngularSvgIconModule,
+                        HttpClientModule,
+                        // Modules
+                        FormsModule,
+                        NgbTooltipModule,
+                        // Components
+                        CaAppTooltipV2Component$1,
+                        CaInputComponent$1,
+                    ], template: "<div [@focusChange]=\"isFocused ? 'focused' : 'default'\">\n  <div *ngIf=\"isFocused; else defaultTemplate\">\n    <ng-container *ngIf=\"searchQueries.length >= 3; else focusedTemplate\">\n      <ng-container *ngTemplateOutlet=\"searchArrayFull\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<!-- Default Template -->\n<ng-template #defaultTemplate>\n  <div class=\"d-flex align-items-center justify-content-start wrapper\">\n    <span\n      class=\"divider d-flex align-items-center justify-content-center\"\n    ></span>\n    <span class=\"d-flex justify-content-center\">\n      <span\n        ngbTooltip\n        [mainTooltip]=\"'Search'\"\n        tooltipBackground=\"#000000\"\n        position=\"bottom\"\n        (click)=\"toggleFocus()\"\n        class=\"search-icon d-flex align-items-center\"\n      >\n        <svg-icon\n          class=\"search-icon d-flex align-items-center\"\n          [src]=\"getSvgPath('searchButton')\"\n          [svgStyle]=\"{ 'width.px': 26, 'height.px': 26 }\"\n        ></svg-icon>\n      </span>\n      <ng-container *ngIf=\"searchQueries.length\">\n        <div\n          class=\"search-queries d-flex align-items-center justify-content-center\"\n        >\n          <ng-container\n            *ngFor=\"\n              let query of searchQueries;\n              let i = index;\n              trackBy: trackByQuery\n            \"\n          >\n            <span\n              (click)=\"removeSelected(i)\"\n              class=\"query d-flex justify-content-center\"\n              ngbTooltip\n              [mainTooltip]=\"'Clear'\"\n              tooltipBackground=\"#000000\"\n              position=\"bottom\"\n            >\n              {{ query }}\n            </span>\n          </ng-container>\n          <ng-container *ngIf=\"searchQueries.length\">\n            <div\n              ngbTooltip\n              [mainTooltip]=\"'Clear All'\"\n              tooltipBackground=\"#000000\"\n              position=\"bottom\"\n            >\n              <svg-icon\n                class=\"svg-icon-clear d-flex\"\n                [src]=\"getSvgPath('clearSearch')\"\n                (click)=\"removeQuery()\"\n              ></svg-icon>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n    </span>\n    <span class=\"divider d-flex align-items-center\"></span>\n  </div>\n</ng-template>\n\n<!-- Focused Template -->\n<ng-template #focusedTemplate>\n  <div class=\"d-flex align-items-center justify-content-start wrapperFocused\">\n    <span class=\"divider d-flex align-items-center\"></span>\n    <div class=\"d-flex align-items-center justify-content-start form\">\n      <div\n        (click)=\"toggleFocus()\"\n        class=\"d-flex align-items-center justify-content-start search\"\n        ngbTooltip\n        [mainTooltip]=\"'Close'\"\n        tooltipBackground=\"#000000\"\n        position=\"bottom\"\n      >\n        <svg-icon\n          class=\"search-icon d-flex justify-content-center align-items-center\"\n          [src]=\"getSvgPath('focusedSearchButton')\"\n          [svgStyle]=\"{ 'width.px': 26, 'height.px': 26 }\"\n        ></svg-icon>\n        <span\n          class=\"divider d-flex align-items-center justify-content-center\"\n        ></span>\n      </div>\n\n      <div class=\"d-flex align-items-center\">\n        <app-ca-input\n          class=\"input\"\n          type=\"text\"\n          (keyup.enter)=\"addSearchQuery()\"\n          [(ngModel)]=\"searchQuery\"\n          name=\"search\"\n          placeholder=\"Find Title\"\n          [inputConfig]=\"inputConfig\"\n        ></app-ca-input>\n        <ng-container *ngIf=\"isSearchQueryNotEmpty\">\n          <div\n            class=\"d-flex justify-content-start align-items-center add-clear-icons\"\n          >\n            <div\n              (click)=\"addSearchQuery()\"\n              ngbTooltip\n              [mainTooltip]=\"'Confirm'\"\n              tooltipBackground=\"#000000\"\n              position=\"top\"\n            >\n              <svg-icon\n                class=\"svg-icon-in-form d-flex\"\n                [src]=\"getSvgPath('add')\"\n              ></svg-icon>\n            </div>\n            <div\n              (click)=\"clearSearchBar()\"\n              ngbTooltip\n              [mainTooltip]=\"'Clear'\"\n              tooltipBackground=\"#000000\"\n              position=\"top\"\n            >\n              <svg-icon\n                class=\"svg-icon-in-form d-flex\"\n                [src]=\"getSvgPath('clearSearch')\"\n              ></svg-icon>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n    <ng-container *ngIf=\"searchQueries.length\">\n      <div\n        class=\"search-queries d-flex align-items-center justify-content-center\"\n      >\n        <ng-container\n          *ngFor=\"\n            let query of searchQueries;\n            let i = index;\n            trackBy: trackByQuery\n          \"\n        >\n          <span\n            (click)=\"removeSelected(i)\"\n            class=\"query d-flex justify-content-center\"\n            ngbTooltip\n            [mainTooltip]=\"'Clear'\"\n            tooltipBackground=\"#000000\"\n            position=\"bottom\"\n          >\n            {{ query }}\n          </span>\n        </ng-container>\n        <div\n          (click)=\"removeQuery()\"\n          ngbTooltip\n          [mainTooltip]=\"'Clear All'\"\n          tooltipBackground=\"#000000\"\n          position=\"top\"\n        >\n          <svg-icon\n            class=\"svg-icon-clear d-flex align-items-center\"\n            [src]=\"getSvgPath('clearSearch')\"\n          ></svg-icon>\n        </div>\n      </div>\n    </ng-container>\n    <span class=\"divider d-flex align-items-center\"></span>\n  </div>\n</ng-template>\n\n<!-- Search Array Full -->\n<ng-template #searchArrayFull>\n  <div class=\"d-flex align-items-center justify-content-start wrapperFocused\">\n    <span class=\"divider d-flex align-items-center\"></span>\n    <div class=\"d-flex align-items-center justify-content-start\">\n      <div\n        class=\"d-flex align-items-center justify-content-start search\"\n        ngbTooltip\n        [mainTooltip]=\"'Max added'\"\n        tooltipBackground=\"#000000\"\n        position=\"bottom\"\n      >\n        <svg-icon\n          class=\"svg-icon d-flex\"\n          [src]=\"getSvgPath('searchButton')\"\n          [svgStyle]=\"{ 'width.px': 26, 'height.px': 26 }\"\n        ></svg-icon>\n      </div>\n    </div>\n    <ng-container *ngIf=\"searchQueries.length\">\n      <div\n        class=\"d-flex align-items-center search-queries justify-content-center\"\n      >\n        <ng-container\n          *ngFor=\"\n            let query of searchQueries;\n            let i = index;\n            trackBy: trackByQuery\n          \"\n        >\n          <span\n            (click)=\"removeSelected(i)\"\n            class=\"query d-flex justify-content-center\"\n            ngbTooltip\n            [mainTooltip]=\"'Clear'\"\n            tooltipBackground=\"#000000\"\n            position=\"bottom\"\n          >\n            {{ query }}\n          </span>\n        </ng-container>\n        <div\n          (click)=\"removeQuery()\"\n          ngbTooltip\n          [mainTooltip]=\"'Clear All'\"\n          tooltipBackground=\"#000000\"\n          position=\"bottom\"\n        >\n          <svg-icon\n            class=\"svg-icon-clear d-flex\"\n            [src]=\"getSvgPath('clearSearch')\"\n          ></svg-icon>\n        </div>\n      </div>\n    </ng-container>\n    <span class=\"divider d-flex align-items-center\"></span>\n  </div>\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap\";@import\"/node_modules/bootstrap/dist/css/bootstrap.css\";.ca-font-thin{font-weight:100!important}.ca-font-extra-light{font-weight:200!important}.ca-font-light{font-weight:300!important}.ca-font-regular{font-weight:400!important}.ca-font-medium{font-weight:500!important}.ca-font-semi-bold{font-weight:600!important}.ca-font-bold{font-weight:700!important}.ca-font-extra-bold{font-weight:800!important}.ca-font-black{font-weight:900!important}@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.table-progress-popover{background-color:unset!important;margin-left:-10px}.table-progress-popover .progress-dropdown{margin-top:-6px;width:260px;height:200px;background:#2f2f2f;border-radius:3px;padding:8px;box-shadow:0 0 4px #00000026;overflow:hidden;animation:progressAnimation .25s ease-in-out}.table-progress-popover .progress-dropdown .progress-header .progress-title{font-size:18px;font-weight:600;color:#dadada}.table-progress-popover .progress-dropdown .progress-header .progress-title span{font-weight:400}.table-progress-popover .progress-dropdown .progress-header .progress-total{font-size:14px;line-height:17px;color:#dadada}.table-progress-popover .progress-dropdown .table-progress-bar-container{width:100%;height:8px;margin-top:6px;border-radius:2px;overflow:hidden}.table-progress-popover .progress-dropdown .table-progress-bar-container .table-progress-bar{height:100%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-dual-info-container .progress-info-container{width:50%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container{margin-top:10px}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-title{margin-bottom:2px;font-size:11px;font-weight:700;line-height:14px;color:#ffffffb2}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-text{font-size:14px;line-height:18px;color:#dadada}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@keyframes progressAnimation{0%{height:0px}to{height:220px}}ngb-popover-window{padding:unset!important;border:unset!important}ngb-popover-window .popover-arrow{display:none!important}ngb-popover-window .popover-body{padding:unset!important}*{margin:0;font-family:Roboto,Helvetica Neue,sans-serif}html{scroll-behavior:auto!important}.gm-style-iw-chr,.gm-style-iw-tc{display:none}.gm-style .gm-style-iw-c{border-radius:0}.gm-style-iw{overflow-y:auto!important;overflow-x:hidden!important}.gm-style-iw>div{overflow:visible!important}.infoWindow{overflow:hidden!important}.gm-style-iw-d,.gm-style-iw.gm-style-iw-c{max-height:350px!important}.wrapper .search-icon:hover{background-color:#fff3;border-radius:2px;cursor:pointer;fill:#424242;color:#424242}.wrapper .search-icon:hover:hover svg{background-color:#dadada;border-radius:2px}.wrapper .search-icon:hover:hover svg path{fill:#424242}.wrapper,.wrapperFocused{width:58px;height:34px;border-radius:2px;font-family:Montserrat,sans-serif}.wrapper .search-queries,.wrapperFocused .search-queries{cursor:pointer;gap:4px;padding:4px 8px}.wrapper .search-queries .clear-all-button,.wrapperFocused .search-queries .clear-all-button{gap:4px}.wrapper .search-queries .query,.wrapperFocused .search-queries .query{cursor:pointer;padding-left:4px;padding-right:4px;gap:10px;color:#eee;border-radius:2px}.wrapper .search-queries .query:nth-child(1),.wrapperFocused .search-queries .query:nth-child(1){background-color:#259f94}.wrapper .search-queries .query:nth-child(2),.wrapperFocused .search-queries .query:nth-child(2){background-color:#f89b2e}.wrapper .search-queries .query:nth-child(3),.wrapperFocused .search-queries .query:nth-child(3){background-color:#9e47ec}.wrapper .search-queries .query:hover:nth-child(1),.wrapperFocused .search-queries .query:hover:nth-child(1){background-color:#b6dfdb}.wrapper .search-queries .query:hover:nth-child(2),.wrapperFocused .search-queries .query:hover:nth-child(2){background-color:#cdb255}.wrapper .search-queries .query:hover:nth-child(3),.wrapperFocused .search-queries .query:hover:nth-child(3){background-color:#ab47bc}.wrapper .divider,.wrapperFocused .divider{border:1px solid #cccccc;width:0px;height:18px;margin:4px}.wrapperFocused{width:auto}.wrapperFocused .search-icon:hover{border-radius:2px;cursor:pointer;fill:#424242;color:#424242;transition:.3}.wrapperFocused .search-icon:hover:hover svg path{fill:#dadada}.wrapperFocused .form{width:200px;background-color:#1d1d1d;gap:4px;border-radius:2px;height:26px}.wrapperFocused .form .search{padding-left:4px}.wrapperFocused .form .add-clear-icons{gap:4px;padding-right:2px}.wrapperFocused .form .input{background-color:#1d1d1d;border-radius:2px;border:none;color:#fff;outline:none;max-width:122px}.wrapperFocused .form .input:focus{background-color:#1d1d1d;color:#dadada}.wrapperFocused .divider{color:#f3f3f3}.svg-icon-in-form,.svg-icon-clear{border-radius:2px;width:18px;height:18px}.svg-icon-in-form:hover,.svg-icon-clear:hover{transform:scale(1.2)}.svg-icon-in-form:hover svg,.svg-icon-clear:hover svg{background-color:#dadada}.svg-icon-clear:hover svg{background-color:#fbe9e9;border-radius:2px}.svg-icon-clear:hover svg path{fill:#c20c0c}\n"] }]
+        }], propDecorators: { searchQueriesEmitter: [{
+                type: Output
+            }] } });
+
+class CaSpinnerComponent {
+    constructor() {
+        this.isBarSpinner = false;
+    }
+    ngOnChanges(changes) {
+        this.getLottieSpinner(changes);
+    }
+    getLottieSpinner(changes) {
+        if (changes["size"]?.currentValue !== changes["size"]?.previousValue) {
+            this.lottieSpinner = {
+                path: `lottie/ta-lottie-spinner/${this.size === "small" ? "18px" : "32px"}/${this.color}.json`,
+            };
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CaSpinnerComponent, isStandalone: true, selector: "app-ca-spinner", inputs: { size: "size", color: "color", isBarSpinner: "isBarSpinner" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"d-flex align-items-center justify-content-left spinner-container\"\n  [ngStyle]=\"{\n    width: isBarSpinner ? '100px' : 'unset',\n    'margin-right': isBarSpinner ? '30px' : 0,\n  }\"\n>\n  <ng-container *ngIf=\"!isBarSpinner; else barSpinner\">\n    <ng-lottie [options]=\"lottieSpinner\"></ng-lottie>\n  </ng-container>\n\n  <ng-template #barSpinner>\n    <span class=\"bar-spinner\"></span>\n  </ng-template>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap\";@import\"/node_modules/bootstrap/dist/css/bootstrap.css\";.ca-font-thin{font-weight:100!important}.ca-font-extra-light{font-weight:200!important}.ca-font-light{font-weight:300!important}.ca-font-regular{font-weight:400!important}.ca-font-medium{font-weight:500!important}.ca-font-semi-bold{font-weight:600!important}.ca-font-bold{font-weight:700!important}.ca-font-extra-bold{font-weight:800!important}.ca-font-black{font-weight:900!important}@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.table-progress-popover{background-color:unset!important;margin-left:-10px}.table-progress-popover .progress-dropdown{margin-top:-6px;width:260px;height:200px;background:#2f2f2f;border-radius:3px;padding:8px;box-shadow:0 0 4px #00000026;overflow:hidden;animation:progressAnimation .25s ease-in-out}.table-progress-popover .progress-dropdown .progress-header .progress-title{font-size:18px;font-weight:600;color:#dadada}.table-progress-popover .progress-dropdown .progress-header .progress-title span{font-weight:400}.table-progress-popover .progress-dropdown .progress-header .progress-total{font-size:14px;line-height:17px;color:#dadada}.table-progress-popover .progress-dropdown .table-progress-bar-container{width:100%;height:8px;margin-top:6px;border-radius:2px;overflow:hidden}.table-progress-popover .progress-dropdown .table-progress-bar-container .table-progress-bar{height:100%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-dual-info-container .progress-info-container{width:50%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container{margin-top:10px}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-title{margin-bottom:2px;font-size:11px;font-weight:700;line-height:14px;color:#ffffffb2}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-text{font-size:14px;line-height:18px;color:#dadada}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@keyframes progressAnimation{0%{height:0px}to{height:220px}}ngb-popover-window{padding:unset!important;border:unset!important}ngb-popover-window .popover-arrow{display:none!important}ngb-popover-window .popover-body{padding:unset!important}*{margin:0;font-family:Roboto,Helvetica Neue,sans-serif}html{scroll-behavior:auto!important}.gm-style-iw-chr,.gm-style-iw-tc{display:none}.gm-style .gm-style-iw-c{border-radius:0}.gm-style-iw{overflow-y:auto!important;overflow-x:hidden!important}.gm-style-iw>div{overflow:visible!important}.infoWindow{overflow:hidden!important}.gm-style-iw-d,.gm-style-iw.gm-style-iw-c{max-height:350px!important}.spinner-container .bar-spinner{width:8px;height:48px;display:inline-block;position:relative;border-radius:4px;box-sizing:border-box;animation:animateBarSpinner 1s linear infinite alternate}@keyframes animateBarSpinner{0%{box-shadow:20px 0 #ccc0,40px 0 #ccc0,60px 0 #ccc0,80px 0 #ccc0,100px 0 #ccc0}20%{box-shadow:20px 0 #ccc,40px 0 #ccc0,60px 0 #ccc0,80px 0 #ccc0,100px 0 #ccc0}40%{box-shadow:20px 0 #ccc,40px 0 #ccc,60px 0 #ccc0,80px 0 #ccc0,100px 0 #ccc0}60%{box-shadow:20px 0 #ccc,40px 0 #ccc,60px 0 #ccc,80px 0 #ccc0,100px 0 #ccc0}80%{box-shadow:20px 0 #ccc,40px 0 #ccc,60px 0 #ccc,80px 0 #ccc,100px 0 #ccc0}to{box-shadow:20px 0 #ccc,40px 0 #ccc,60px 0 #ccc,80px 0 #ccc,100px 0 #ccc}}\n"], dependencies: [{ kind: "ngmodule", type: 
+                // Module
+                CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: LottieModule }, { kind: "component", type: i2$2.LottieComponent, selector: "ng-lottie", inputs: ["width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-ca-spinner", changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        // Module
+                        CommonModule,
+                        LottieModule,
+                    ], template: "<div\n  class=\"d-flex align-items-center justify-content-left spinner-container\"\n  [ngStyle]=\"{\n    width: isBarSpinner ? '100px' : 'unset',\n    'margin-right': isBarSpinner ? '30px' : 0,\n  }\"\n>\n  <ng-container *ngIf=\"!isBarSpinner; else barSpinner\">\n    <ng-lottie [options]=\"lottieSpinner\"></ng-lottie>\n  </ng-container>\n\n  <ng-template #barSpinner>\n    <span class=\"bar-spinner\"></span>\n  </ng-template>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap\";@import\"/node_modules/bootstrap/dist/css/bootstrap.css\";.ca-font-thin{font-weight:100!important}.ca-font-extra-light{font-weight:200!important}.ca-font-light{font-weight:300!important}.ca-font-regular{font-weight:400!important}.ca-font-medium{font-weight:500!important}.ca-font-semi-bold{font-weight:600!important}.ca-font-bold{font-weight:700!important}.ca-font-extra-bold{font-weight:800!important}.ca-font-black{font-weight:900!important}@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.table-progress-popover{background-color:unset!important;margin-left:-10px}.table-progress-popover .progress-dropdown{margin-top:-6px;width:260px;height:200px;background:#2f2f2f;border-radius:3px;padding:8px;box-shadow:0 0 4px #00000026;overflow:hidden;animation:progressAnimation .25s ease-in-out}.table-progress-popover .progress-dropdown .progress-header .progress-title{font-size:18px;font-weight:600;color:#dadada}.table-progress-popover .progress-dropdown .progress-header .progress-title span{font-weight:400}.table-progress-popover .progress-dropdown .progress-header .progress-total{font-size:14px;line-height:17px;color:#dadada}.table-progress-popover .progress-dropdown .table-progress-bar-container{width:100%;height:8px;margin-top:6px;border-radius:2px;overflow:hidden}.table-progress-popover .progress-dropdown .table-progress-bar-container .table-progress-bar{height:100%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-dual-info-container .progress-info-container{width:50%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container{margin-top:10px}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-title{margin-bottom:2px;font-size:11px;font-weight:700;line-height:14px;color:#ffffffb2}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-text{font-size:14px;line-height:18px;color:#dadada}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@keyframes progressAnimation{0%{height:0px}to{height:220px}}ngb-popover-window{padding:unset!important;border:unset!important}ngb-popover-window .popover-arrow{display:none!important}ngb-popover-window .popover-body{padding:unset!important}*{margin:0;font-family:Roboto,Helvetica Neue,sans-serif}html{scroll-behavior:auto!important}.gm-style-iw-chr,.gm-style-iw-tc{display:none}.gm-style .gm-style-iw-c{border-radius:0}.gm-style-iw{overflow-y:auto!important;overflow-x:hidden!important}.gm-style-iw>div{overflow:visible!important}.infoWindow{overflow:hidden!important}.gm-style-iw-d,.gm-style-iw.gm-style-iw-c{max-height:350px!important}.spinner-container .bar-spinner{width:8px;height:48px;display:inline-block;position:relative;border-radius:4px;box-sizing:border-box;animation:animateBarSpinner 1s linear infinite alternate}@keyframes animateBarSpinner{0%{box-shadow:20px 0 #ccc0,40px 0 #ccc0,60px 0 #ccc0,80px 0 #ccc0,100px 0 #ccc0}20%{box-shadow:20px 0 #ccc,40px 0 #ccc0,60px 0 #ccc0,80px 0 #ccc0,100px 0 #ccc0}40%{box-shadow:20px 0 #ccc,40px 0 #ccc,60px 0 #ccc0,80px 0 #ccc0,100px 0 #ccc0}60%{box-shadow:20px 0 #ccc,40px 0 #ccc,60px 0 #ccc,80px 0 #ccc0,100px 0 #ccc0}80%{box-shadow:20px 0 #ccc,40px 0 #ccc,60px 0 #ccc,80px 0 #ccc,100px 0 #ccc0}to{box-shadow:20px 0 #ccc,40px 0 #ccc,60px 0 #ccc,80px 0 #ccc,100px 0 #ccc}}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { size: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], isBarSpinner: [{
+                type: Input
+            }] } });
+
+class CaTruckTrailerProgresBarComponent {
+    constructor() {
+        this.type = "";
+        this.text = "";
+        this.isTable = false;
+        this.daysExpired = false;
+        this.hasPopover = false;
+        this.pmName = "Add PM Item";
+        this.progressDropdownActive = -1;
+        this.progressDropdownColumnActive = ""; // leave this any for now
+        this.isOpenPopup = false;
+    }
+    get daysPluralization() {
+        const text = isNaN(this.text) ? this.text : this.text.toString();
+        if (text === "1") {
+            return "Day";
+        }
+        return "Days";
+    }
+    // Toggle Progress Dropdown
+    toggleProgressDropdown(tooltip) {
+        if (this.hasPopover) {
+            if (tooltip.isOpen()) {
+                tooltip.close();
+                this.isOpenPopup = false;
+            }
+            else {
+                tooltip.open();
+                this.isOpenPopup = true;
+            }
+            this.progressDropdownActive = tooltip.isOpen() ? this.data.textUnit : -1;
+            this.progressDropdownColumnActive = tooltip.isOpen()
+                ? this.columnField
+                : null;
+            this.progressDropdownData = {
+                row: this.data,
+                column: this.data[this.columnField],
+            };
+        }
+        else {
+            return;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaTruckTrailerProgresBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CaTruckTrailerProgresBarComponent, isStandalone: true, selector: "app-ca-truck-trailer-progress-bar", inputs: { type: "type", text: "text", percents: "percents", data: "data", columnField: "columnField", isTable: "isTable", daysExpired: "daysExpired", daysToPay: "daysToPay", hasPopover: "hasPopover", pmName: "pmName" }, ngImport: i0, template: "<div\n  class=\"progress-bar-parent d-flex align-items-center\"\n  [class.disable-hover]=\"text === '/'\"\n  [class.progress-bar-parent-expired]=\"daysExpired\"\n  #ngbProgress=\"ngbPopover\"\n  [autoClose]=\"false\"\n  [ngbPopover]=\"milesProgressPopover\"\n  [placement]=\"'bottom-left bottom-right'\"\n  container=\"body\"\n  popoverClass=\"table-progress-popover\"\n  triggers=\"manual\"\n  (hidden)=\"(progressDropdownActive === -1)\"\n  (click)=\"\n    data[columnField]?.expirationDaysText ||\n    data[columnField]?.expirationMilesText ||\n    data[columnField]?.expirationCreditText\n      ? toggleProgressDropdown(ngbProgress)\n      : {}\n  \"\n>\n  <div\n    class=\"progress-bar-tooltip d-flex align-items-center\"\n    [class.progress-bar-active-dropdown]=\"isOpenPopup\"\n    [tooltipBackground]=\"'#424242'\"\n    ngbTooltip\n    [mainTooltip]=\"pmName\"\n    position=\"bottom\"\n  >\n    <ng-container *ngIf=\"text !== '/'\">\n      <div class=\"progress-bar-holder mx-2\">\n        <div\n          class=\"progress-child-back\"\n          [ngClass]=\"{\n            expired: percents === 0,\n            'back-gray': percents > 50 || percents === -1,\n            'back-yellow': percents > 20 && percents <= 50,\n            'back-red': percents <= 20 && percents > 0 && text !== '/',\n          }\"\n        ></div>\n        <div\n          class=\"progress-child-front\"\n          [ngClass]=\"{\n            'front-gray': percents > 50,\n            'front-yellow': percents > 20 && percents <= 50,\n            'front-red': percents <= 20,\n          }\"\n          [style.width.%]=\"daysExpired ? 100 - percents : percents\"\n        ></div>\n      </div>\n    </ng-container>\n    <!-- In (days) of or ago (days) dispaly text bassed on expired or it will expire -->\n\n    <ng-container *ngIf=\"percents && text !== '/'\">\n      <span\n        class=\"progress-text\"\n        [class.table-progress-text]=\"isTable\"\n        [class.progress-bar-text]=\"isOpenPopup\"\n      >\n        <ng-container *ngIf=\"type === 'days'\">\n          <ng-container *ngIf=\"daysExpired; else daysExpired\"\n            >in {{ text }} days</ng-container\n          >\n          <ng-template #daysExpired>\n            <div class=\"progress-text-title\">\n              <span>{{ text }} {{ daysPluralization }} left</span>\n              <span>{{ daysToPay }} days</span>\n            </div></ng-template\n          >\n        </ng-container>\n\n        <ng-container [ngSwitch]=\"type\">\n          <ng-container *ngSwitchCase=\"'miles'\">\n            {{ +text | thousandToShortFormatPipe }} mi to go\n          </ng-container>\n          <ng-container *ngSwitchCase=\"'credit'\">\n            {{ text }}\n          </ng-container>\n          <ng-container *ngSwitchCase=\"''\">\n            {{ text }}\n          </ng-container>\n        </ng-container>\n      </span>\n    </ng-container>\n    <ng-container *ngIf=\"percents === 0 && percents !== null && text !== '/'\">\n      <span\n        class=\"progress-text ta-font-semi-bold\"\n        [class.table-progress-text]=\"isTable\"\n        [class.progress-bar-text]=\"isOpenPopup\"\n      >\n        <ng-container *ngIf=\"type === 'days'\">\n          <ng-container *ngIf=\"daysExpired; else daysExpired\"\n            >{{ text }} days ago</ng-container\n          >\n          <ng-template #daysExpired>\n            <div class=\"progress-text-title\">\n              <span>{{ text }} {{ daysPluralization }} over</span>\n              <span>{{ daysToPay }} days</span>\n            </div>\n          </ng-template>\n        </ng-container>\n\n        <ng-container [ngSwitch]=\"type\">\n          <ng-container *ngSwitchCase=\"'miles'\">\n            {{ +text | thousandToShortFormatPipe }} mi over\n          </ng-container>\n          <ng-container *ngSwitchCase=\"'credit'\">\n            {{ text }}\n          </ng-container>\n        </ng-container>\n      </span>\n    </ng-container>\n    <ng-container *ngIf=\"text === '/'\">\n      <span> / </span>\n    </ng-container>\n  </div>\n</div>\n\n<!-- MILES PROGRESS POPOVER -->\n<ng-template #milesProgressPopover>\n  <div\n    class=\"progress-dropdown\"\n    [ngClass]=\"{ 'credit-dropdown': type === 'credit' }\"\n  >\n    <div\n      class=\"progress-header d-flex align-items-center justify-content-between\"\n    >\n      <div class=\"progress-title\">\n        <ng-container *ngIf=\"progressDropdownData.column.expirationMilesText\">\n          {{ progressDropdownData.column.expirationMilesText ?? 0 }}\n\n          <ng-container\n            *ngIf=\"percents && percents <= 100; else isPercentsMiles\"\n          >\n            <span> mi to go</span>\n          </ng-container>\n\n          <ng-template #isPercentsMiles>\n            <span> mi over</span>\n          </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"progressDropdownData.column.expirationDaysText\">\n          {{ progressDropdownData.column?.expirationDaysText ?? 0 }}\n          <ng-container *ngIf=\"percents && percents < 100; else isPercentsDays\">\n            <span> days left</span>\n          </ng-container>\n\n          <ng-template #isPercentsDays>\n            <span> days ago</span>\n          </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"progressDropdownData.column.expirationCreditText\">\n          {{ progressDropdownData.column?.expirationCreditText ?? 0 }}\n        </ng-container>\n      </div>\n      <div class=\"progress-total\">\n        {{ progressDropdownData.column.totalValueText }}\n      </div>\n    </div>\n    <div\n      class=\"table-progress-bar-container\"\n      [ngClass]=\"{\n        'bg-expired-container': !percents,\n        'bg-sliver-container': percents >= 50 && percents < 100,\n        'bg-orange-container': percents >= 20 && percents < 50,\n        'bg-danger-container': percents > 0 && percents < 20,\n        'bg-inactive-container': percents === 100,\n      }\"\n    >\n      <div\n        [ngClass]=\"{\n          'bg-progress-sliver': percents >= 50 && percents <= 100,\n          'bg-progress-orange': percents >= 20 && percents < 50,\n          'bg-progress-danger': percents > 0 && percents < 20,\n        }\"\n        [ngStyle]=\"{\n          width: percents + '%',\n        }\"\n        class=\"table-progress-bar bg-progress-danger\"\n      ></div>\n    </div>\n    <div class=\"progress-dropdown-body\">\n      <ng-container *ngIf=\"type === 'days' || type === 'miles'\">\n        <div class=\"progress-dual-info-container d-flex align-items-center\">\n          <div class=\"progress-info-container\">\n            <div class=\"progress-info-title\">Last Serviced</div>\n            <div class=\"progress-info-text\">\n              {{ progressDropdownData.row.lastService ?? \"/\" }}\n            </div>\n          </div>\n          <div class=\"progress-info-container\">\n            <div class=\"progress-info-title\">Odometer</div>\n            <div class=\"progress-info-text\">\n              {{ progressDropdownData.row.textOdometer ?? \"/\" }}\n            </div>\n          </div>\n        </div>\n        <div class=\"progress-info-container\">\n          <div class=\"progress-info-title\">Repair Shop</div>\n          <div class=\"progress-info-text\">\n            {{ progressDropdownData.row.textRepairShop ?? \"/\" }}\n          </div>\n        </div>\n        <div class=\"progress-dual-info-container d-flex align-items-center\">\n          <div class=\"progress-info-container\">\n            <div class=\"progress-info-title\">Invoice</div>\n            <div class=\"progress-info-text\">\n              {{ progressDropdownData.row.textInv ?? \"/\" }}\n            </div>\n          </div>\n          <div class=\"progress-info-container\">\n            <div class=\"progress-info-title\">Cost</div>\n            <div class=\"progress-info-text\">\n              {{ progressDropdownData.row?.cost ?? \"/\" }}\n            </div>\n          </div>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"type === 'credit'\">\n        <div class=\"progress-dual-info-container d-flex align-items-center\">\n          <div class=\"progress-info-container\">\n            <div class=\"progress-info-title\">Total Credit</div>\n            <div class=\"progress-info-text\">\n              {{\n                progressDropdownData.row.creditLimit\n                  ? (progressDropdownData.row.creditLimit | formatCurrency)\n                  : \"/\"\n              }}\n            </div>\n          </div>\n          <div class=\"progress-info-container\">\n            <div class=\"progress-info-title\">Pay Term</div>\n            <div class=\"progress-info-text\">\n              {{ progressDropdownData.row.broker!.payTerm?.name ?? \"/\" }}\n            </div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap\";@import\"/node_modules/bootstrap/dist/css/bootstrap.css\";.ca-font-thin{font-weight:100!important}.ca-font-extra-light{font-weight:200!important}.ca-font-light{font-weight:300!important}.ca-font-regular{font-weight:400!important}.ca-font-medium{font-weight:500!important}.ca-font-semi-bold{font-weight:600!important}.ca-font-bold{font-weight:700!important}.ca-font-extra-bold{font-weight:800!important}.ca-font-black{font-weight:900!important}@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.table-progress-popover{background-color:unset!important;margin-left:-10px}.table-progress-popover .progress-dropdown{margin-top:-6px;width:260px;height:200px;background:#2f2f2f;border-radius:3px;padding:8px;box-shadow:0 0 4px #00000026;overflow:hidden;animation:progressAnimation .25s ease-in-out}.table-progress-popover .progress-dropdown .progress-header .progress-title{font-size:18px;font-weight:600;color:#dadada}.table-progress-popover .progress-dropdown .progress-header .progress-title span{font-weight:400}.table-progress-popover .progress-dropdown .progress-header .progress-total{font-size:14px;line-height:17px;color:#dadada}.table-progress-popover .progress-dropdown .table-progress-bar-container{width:100%;height:8px;margin-top:6px;border-radius:2px;overflow:hidden}.table-progress-popover .progress-dropdown .table-progress-bar-container .table-progress-bar{height:100%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-dual-info-container .progress-info-container{width:50%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container{margin-top:10px}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-title{margin-bottom:2px;font-size:11px;font-weight:700;line-height:14px;color:#ffffffb2}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-text{font-size:14px;line-height:18px;color:#dadada}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@keyframes progressAnimation{0%{height:0px}to{height:220px}}ngb-popover-window{padding:unset!important;border:unset!important}ngb-popover-window .popover-arrow{display:none!important}ngb-popover-window .popover-body{padding:unset!important}*{margin:0;font-family:Roboto,Helvetica Neue,sans-serif}html{scroll-behavior:auto!important}.gm-style-iw-chr,.gm-style-iw-tc{display:none}.gm-style .gm-style-iw-c{border-radius:0}.gm-style-iw{overflow-y:auto!important;overflow-x:hidden!important}.gm-style-iw>div{overflow:visible!important}.infoWindow{overflow:hidden!important}.gm-style-iw-d,.gm-style-iw.gm-style-iw-c{max-height:350px!important}.progress-bar-parent{gap:4px;padding:0 4px;border-radius:2px}.progress-bar-parent .progress-bar-tooltip{padding:4px}.progress-bar-parent .progress-bar-tooltip .progress-text{color:#2f2f2f;width:100%}.progress-bar-parent .progress-bar-tooltip .progress-text.table-progress-text{font-size:14px;font-weight:400;line-height:18px}.progress-bar-parent .progress-bar-tooltip .progress-text::selection{color:#2f2f2f;background:#2f2f2f33}.progress-bar-parent .progress-bar-tooltip .progress-text.progress-bar-text{color:#dadada}.progress-bar-parent .progress-bar-tooltip .progress-bar-holder{width:35px;height:8px;border-radius:2px;overflow:hidden;position:relative}.progress-bar-parent .progress-bar-tooltip .progress-bar-holder .progress-child-back{opacity:.2;width:100%;height:8px;position:absolute}.progress-bar-parent .progress-bar-tooltip .progress-bar-holder .progress-child-front{height:8px;position:absolute;left:0;top:0}.progress-bar-parent .progress-bar-tooltip .progress-bar-holder .expired{background:#df3c3c;opacity:1}.progress-bar-parent .progress-bar-tooltip .progress-bar-holder .back-gray{background:#919191;opacity:.2}.progress-bar-parent .progress-bar-tooltip .progress-bar-holder .back-yellow{background:#f89b2e;opacity:.2}.progress-bar-parent .progress-bar-tooltip .progress-bar-holder .back-red{background:#df3c3c;opacity:.2}.progress-bar-parent .progress-bar-tooltip .progress-bar-holder .front-gray{background:#919191}.progress-bar-parent .progress-bar-tooltip .progress-bar-holder .front-yellow{background:#f89b2e}.progress-bar-parent .progress-bar-tooltip .progress-bar-holder .front-red{background:#df3c3c}.progress-bar-parent .progress-bar-tooltip.disable-hover:hover{background-color:unset;cursor:default}.progress-bar-parent .progress-bar-tooltip:hover{background-color:#91919133;cursor:pointer}.progress-bar-parent .progress-bar-tooltip.progress-bar-active-dropdown{background-color:#424242}.bg-sliver-container{background:#91919133}.bg-expired-container{background:#e57373}.bg-inactive-container{background:#e5e5e5}.bg-orange-container{background:#f89b2e33}.bg-danger-container{background:#df3c3c33}.bg-progress-sliver{background:#919191;width:80%}.bg-progress-orange{background:#fab15c;width:50%}.bg-progress-danger{background:#e66767;width:20%}\n"], dependencies: [{ kind: "ngmodule", type: 
+                // Modules
+                CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i1$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: 
+                //Components
+                CaAppTooltipV2Component$1, selector: "mainTooltip, [mainTooltip]", inputs: ["mainTooltip", "position", "openTooltipDelay", "tooltipBackground", "tooltipColor", "tooltipTextAlign", "tooltipMarginTop"] }, { kind: "pipe", type: 
+                // Pipes
+                ThousandToShortFormatPipe, name: "thousandToShortFormatPipe" }, { kind: "pipe", type: FormatCurrencyPipe, name: "formatCurrency" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaTruckTrailerProgresBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-ca-truck-trailer-progress-bar", imports: [
+                        // Modules
+                        CommonModule,
+                        NgbModule,
+                        //Components
+                        CaAppTooltipV2Component$1,
+                        // Pipes
+                        ThousandToShortFormatPipe,
+                        FormatCurrencyPipe,
+                    ], standalone: true, template: "<div\n  class=\"progress-bar-parent d-flex align-items-center\"\n  [class.disable-hover]=\"text === '/'\"\n  [class.progress-bar-parent-expired]=\"daysExpired\"\n  #ngbProgress=\"ngbPopover\"\n  [autoClose]=\"false\"\n  [ngbPopover]=\"milesProgressPopover\"\n  [placement]=\"'bottom-left bottom-right'\"\n  container=\"body\"\n  popoverClass=\"table-progress-popover\"\n  triggers=\"manual\"\n  (hidden)=\"(progressDropdownActive === -1)\"\n  (click)=\"\n    data[columnField]?.expirationDaysText ||\n    data[columnField]?.expirationMilesText ||\n    data[columnField]?.expirationCreditText\n      ? toggleProgressDropdown(ngbProgress)\n      : {}\n  \"\n>\n  <div\n    class=\"progress-bar-tooltip d-flex align-items-center\"\n    [class.progress-bar-active-dropdown]=\"isOpenPopup\"\n    [tooltipBackground]=\"'#424242'\"\n    ngbTooltip\n    [mainTooltip]=\"pmName\"\n    position=\"bottom\"\n  >\n    <ng-container *ngIf=\"text !== '/'\">\n      <div class=\"progress-bar-holder mx-2\">\n        <div\n          class=\"progress-child-back\"\n          [ngClass]=\"{\n            expired: percents === 0,\n            'back-gray': percents > 50 || percents === -1,\n            'back-yellow': percents > 20 && percents <= 50,\n            'back-red': percents <= 20 && percents > 0 && text !== '/',\n          }\"\n        ></div>\n        <div\n          class=\"progress-child-front\"\n          [ngClass]=\"{\n            'front-gray': percents > 50,\n            'front-yellow': percents > 20 && percents <= 50,\n            'front-red': percents <= 20,\n          }\"\n          [style.width.%]=\"daysExpired ? 100 - percents : percents\"\n        ></div>\n      </div>\n    </ng-container>\n    <!-- In (days) of or ago (days) dispaly text bassed on expired or it will expire -->\n\n    <ng-container *ngIf=\"percents && text !== '/'\">\n      <span\n        class=\"progress-text\"\n        [class.table-progress-text]=\"isTable\"\n        [class.progress-bar-text]=\"isOpenPopup\"\n      >\n        <ng-container *ngIf=\"type === 'days'\">\n          <ng-container *ngIf=\"daysExpired; else daysExpired\"\n            >in {{ text }} days</ng-container\n          >\n          <ng-template #daysExpired>\n            <div class=\"progress-text-title\">\n              <span>{{ text }} {{ daysPluralization }} left</span>\n              <span>{{ daysToPay }} days</span>\n            </div></ng-template\n          >\n        </ng-container>\n\n        <ng-container [ngSwitch]=\"type\">\n          <ng-container *ngSwitchCase=\"'miles'\">\n            {{ +text | thousandToShortFormatPipe }} mi to go\n          </ng-container>\n          <ng-container *ngSwitchCase=\"'credit'\">\n            {{ text }}\n          </ng-container>\n          <ng-container *ngSwitchCase=\"''\">\n            {{ text }}\n          </ng-container>\n        </ng-container>\n      </span>\n    </ng-container>\n    <ng-container *ngIf=\"percents === 0 && percents !== null && text !== '/'\">\n      <span\n        class=\"progress-text ta-font-semi-bold\"\n        [class.table-progress-text]=\"isTable\"\n        [class.progress-bar-text]=\"isOpenPopup\"\n      >\n        <ng-container *ngIf=\"type === 'days'\">\n          <ng-container *ngIf=\"daysExpired; else daysExpired\"\n            >{{ text }} days ago</ng-container\n          >\n          <ng-template #daysExpired>\n            <div class=\"progress-text-title\">\n              <span>{{ text }} {{ daysPluralization }} over</span>\n              <span>{{ daysToPay }} days</span>\n            </div>\n          </ng-template>\n        </ng-container>\n\n        <ng-container [ngSwitch]=\"type\">\n          <ng-container *ngSwitchCase=\"'miles'\">\n            {{ +text | thousandToShortFormatPipe }} mi over\n          </ng-container>\n          <ng-container *ngSwitchCase=\"'credit'\">\n            {{ text }}\n          </ng-container>\n        </ng-container>\n      </span>\n    </ng-container>\n    <ng-container *ngIf=\"text === '/'\">\n      <span> / </span>\n    </ng-container>\n  </div>\n</div>\n\n<!-- MILES PROGRESS POPOVER -->\n<ng-template #milesProgressPopover>\n  <div\n    class=\"progress-dropdown\"\n    [ngClass]=\"{ 'credit-dropdown': type === 'credit' }\"\n  >\n    <div\n      class=\"progress-header d-flex align-items-center justify-content-between\"\n    >\n      <div class=\"progress-title\">\n        <ng-container *ngIf=\"progressDropdownData.column.expirationMilesText\">\n          {{ progressDropdownData.column.expirationMilesText ?? 0 }}\n\n          <ng-container\n            *ngIf=\"percents && percents <= 100; else isPercentsMiles\"\n          >\n            <span> mi to go</span>\n          </ng-container>\n\n          <ng-template #isPercentsMiles>\n            <span> mi over</span>\n          </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"progressDropdownData.column.expirationDaysText\">\n          {{ progressDropdownData.column?.expirationDaysText ?? 0 }}\n          <ng-container *ngIf=\"percents && percents < 100; else isPercentsDays\">\n            <span> days left</span>\n          </ng-container>\n\n          <ng-template #isPercentsDays>\n            <span> days ago</span>\n          </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"progressDropdownData.column.expirationCreditText\">\n          {{ progressDropdownData.column?.expirationCreditText ?? 0 }}\n        </ng-container>\n      </div>\n      <div class=\"progress-total\">\n        {{ progressDropdownData.column.totalValueText }}\n      </div>\n    </div>\n    <div\n      class=\"table-progress-bar-container\"\n      [ngClass]=\"{\n        'bg-expired-container': !percents,\n        'bg-sliver-container': percents >= 50 && percents < 100,\n        'bg-orange-container': percents >= 20 && percents < 50,\n        'bg-danger-container': percents > 0 && percents < 20,\n        'bg-inactive-container': percents === 100,\n      }\"\n    >\n      <div\n        [ngClass]=\"{\n          'bg-progress-sliver': percents >= 50 && percents <= 100,\n          'bg-progress-orange': percents >= 20 && percents < 50,\n          'bg-progress-danger': percents > 0 && percents < 20,\n        }\"\n        [ngStyle]=\"{\n          width: percents + '%',\n        }\"\n        class=\"table-progress-bar bg-progress-danger\"\n      ></div>\n    </div>\n    <div class=\"progress-dropdown-body\">\n      <ng-container *ngIf=\"type === 'days' || type === 'miles'\">\n        <div class=\"progress-dual-info-container d-flex align-items-center\">\n          <div class=\"progress-info-container\">\n            <div class=\"progress-info-title\">Last Serviced</div>\n            <div class=\"progress-info-text\">\n              {{ progressDropdownData.row.lastService ?? \"/\" }}\n            </div>\n          </div>\n          <div class=\"progress-info-container\">\n            <div class=\"progress-info-title\">Odometer</div>\n            <div class=\"progress-info-text\">\n              {{ progressDropdownData.row.textOdometer ?? \"/\" }}\n            </div>\n          </div>\n        </div>\n        <div class=\"progress-info-container\">\n          <div class=\"progress-info-title\">Repair Shop</div>\n          <div class=\"progress-info-text\">\n            {{ progressDropdownData.row.textRepairShop ?? \"/\" }}\n          </div>\n        </div>\n        <div class=\"progress-dual-info-container d-flex align-items-center\">\n          <div class=\"progress-info-container\">\n            <div class=\"progress-info-title\">Invoice</div>\n            <div class=\"progress-info-text\">\n              {{ progressDropdownData.row.textInv ?? \"/\" }}\n            </div>\n          </div>\n          <div class=\"progress-info-container\">\n            <div class=\"progress-info-title\">Cost</div>\n            <div class=\"progress-info-text\">\n              {{ progressDropdownData.row?.cost ?? \"/\" }}\n            </div>\n          </div>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"type === 'credit'\">\n        <div class=\"progress-dual-info-container d-flex align-items-center\">\n          <div class=\"progress-info-container\">\n            <div class=\"progress-info-title\">Total Credit</div>\n            <div class=\"progress-info-text\">\n              {{\n                progressDropdownData.row.creditLimit\n                  ? (progressDropdownData.row.creditLimit | formatCurrency)\n                  : \"/\"\n              }}\n            </div>\n          </div>\n          <div class=\"progress-info-container\">\n            <div class=\"progress-info-title\">Pay Term</div>\n            <div class=\"progress-info-text\">\n              {{ progressDropdownData.row.broker!.payTerm?.name ?? \"/\" }}\n            </div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap\";@import\"/node_modules/bootstrap/dist/css/bootstrap.css\";.ca-font-thin{font-weight:100!important}.ca-font-extra-light{font-weight:200!important}.ca-font-light{font-weight:300!important}.ca-font-regular{font-weight:400!important}.ca-font-medium{font-weight:500!important}.ca-font-semi-bold{font-weight:600!important}.ca-font-bold{font-weight:700!important}.ca-font-extra-bold{font-weight:800!important}.ca-font-black{font-weight:900!important}@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.table-progress-popover{background-color:unset!important;margin-left:-10px}.table-progress-popover .progress-dropdown{margin-top:-6px;width:260px;height:200px;background:#2f2f2f;border-radius:3px;padding:8px;box-shadow:0 0 4px #00000026;overflow:hidden;animation:progressAnimation .25s ease-in-out}.table-progress-popover .progress-dropdown .progress-header .progress-title{font-size:18px;font-weight:600;color:#dadada}.table-progress-popover .progress-dropdown .progress-header .progress-title span{font-weight:400}.table-progress-popover .progress-dropdown .progress-header .progress-total{font-size:14px;line-height:17px;color:#dadada}.table-progress-popover .progress-dropdown .table-progress-bar-container{width:100%;height:8px;margin-top:6px;border-radius:2px;overflow:hidden}.table-progress-popover .progress-dropdown .table-progress-bar-container .table-progress-bar{height:100%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-dual-info-container .progress-info-container{width:50%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container{margin-top:10px}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-title{margin-bottom:2px;font-size:11px;font-weight:700;line-height:14px;color:#ffffffb2}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-text{font-size:14px;line-height:18px;color:#dadada}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@keyframes progressAnimation{0%{height:0px}to{height:220px}}ngb-popover-window{padding:unset!important;border:unset!important}ngb-popover-window .popover-arrow{display:none!important}ngb-popover-window .popover-body{padding:unset!important}*{margin:0;font-family:Roboto,Helvetica Neue,sans-serif}html{scroll-behavior:auto!important}.gm-style-iw-chr,.gm-style-iw-tc{display:none}.gm-style .gm-style-iw-c{border-radius:0}.gm-style-iw{overflow-y:auto!important;overflow-x:hidden!important}.gm-style-iw>div{overflow:visible!important}.infoWindow{overflow:hidden!important}.gm-style-iw-d,.gm-style-iw.gm-style-iw-c{max-height:350px!important}.progress-bar-parent{gap:4px;padding:0 4px;border-radius:2px}.progress-bar-parent .progress-bar-tooltip{padding:4px}.progress-bar-parent .progress-bar-tooltip .progress-text{color:#2f2f2f;width:100%}.progress-bar-parent .progress-bar-tooltip .progress-text.table-progress-text{font-size:14px;font-weight:400;line-height:18px}.progress-bar-parent .progress-bar-tooltip .progress-text::selection{color:#2f2f2f;background:#2f2f2f33}.progress-bar-parent .progress-bar-tooltip .progress-text.progress-bar-text{color:#dadada}.progress-bar-parent .progress-bar-tooltip .progress-bar-holder{width:35px;height:8px;border-radius:2px;overflow:hidden;position:relative}.progress-bar-parent .progress-bar-tooltip .progress-bar-holder .progress-child-back{opacity:.2;width:100%;height:8px;position:absolute}.progress-bar-parent .progress-bar-tooltip .progress-bar-holder .progress-child-front{height:8px;position:absolute;left:0;top:0}.progress-bar-parent .progress-bar-tooltip .progress-bar-holder .expired{background:#df3c3c;opacity:1}.progress-bar-parent .progress-bar-tooltip .progress-bar-holder .back-gray{background:#919191;opacity:.2}.progress-bar-parent .progress-bar-tooltip .progress-bar-holder .back-yellow{background:#f89b2e;opacity:.2}.progress-bar-parent .progress-bar-tooltip .progress-bar-holder .back-red{background:#df3c3c;opacity:.2}.progress-bar-parent .progress-bar-tooltip .progress-bar-holder .front-gray{background:#919191}.progress-bar-parent .progress-bar-tooltip .progress-bar-holder .front-yellow{background:#f89b2e}.progress-bar-parent .progress-bar-tooltip .progress-bar-holder .front-red{background:#df3c3c}.progress-bar-parent .progress-bar-tooltip.disable-hover:hover{background-color:unset;cursor:default}.progress-bar-parent .progress-bar-tooltip:hover{background-color:#91919133;cursor:pointer}.progress-bar-parent .progress-bar-tooltip.progress-bar-active-dropdown{background-color:#424242}.bg-sliver-container{background:#91919133}.bg-expired-container{background:#e57373}.bg-inactive-container{background:#e5e5e5}.bg-orange-container{background:#f89b2e33}.bg-danger-container{background:#df3c3c33}.bg-progress-sliver{background:#919191;width:80%}.bg-progress-orange{background:#fab15c;width:50%}.bg-progress-danger{background:#e66767;width:20%}\n"] }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], percents: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], columnField: [{
+                type: Input
+            }], isTable: [{
+                type: Input
+            }], daysExpired: [{
+                type: Input
+            }], daysToPay: [{
+                type: Input
+            }], hasPopover: [{
+                type: Input
+            }], pmName: [{
+                type: Input
+            }] } });
+
 class CaComponentsLibModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaComponentsLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: CaComponentsLibModule, imports: [CommonModule, CaProfileImageComponent], exports: [CaProfileImageComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaComponentsLibModule, imports: [CommonModule, CaProfileImageComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: CaComponentsLibModule, imports: [CommonModule,
+            CaProfileImageComponent,
+            CaAppTooltipV2Component,
+            CaDetailsDropdownComponent,
+            CaDropdownComponent,
+            CaFilterComponent,
+            CaInputComponent,
+            CaInputRadiobuttonsComponent,
+            CaMapComponent,
+            CaMapDropdownComponent,
+            CaNoteComponent,
+            CaNoteContainerComponent,
+            CaPayrollListSummaryOverviewComponent,
+            CaPayrollListSummaryOverviewTableComponent,
+            PickupDeliveryBlockComponent,
+            ProgressBarComponent,
+            CaSearchMultipleStatesComponent,
+            CaSpinnerComponent,
+            CaTruckTrailerProgresBarComponent], exports: [CaProfileImageComponent,
+            CaAppTooltipV2Component,
+            CaDetailsDropdownComponent,
+            CaDropdownComponent,
+            CaFilterComponent,
+            CaInputComponent,
+            CaInputRadiobuttonsComponent,
+            CaMapComponent,
+            CaMapDropdownComponent,
+            CaNoteComponent,
+            CaNoteContainerComponent,
+            CaPayrollListSummaryOverviewComponent,
+            CaPayrollListSummaryOverviewTableComponent,
+            PickupDeliveryBlockComponent,
+            ProgressBarComponent,
+            CaSearchMultipleStatesComponent,
+            CaSpinnerComponent,
+            CaTruckTrailerProgresBarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaComponentsLibModule, imports: [CommonModule,
+            CaProfileImageComponent,
+            CaAppTooltipV2Component,
+            CaDetailsDropdownComponent,
+            CaDropdownComponent,
+            CaFilterComponent,
+            CaInputComponent,
+            CaInputRadiobuttonsComponent,
+            CaMapComponent,
+            CaMapDropdownComponent,
+            CaNoteComponent,
+            CaNoteContainerComponent,
+            CaPayrollListSummaryOverviewComponent,
+            CaPayrollListSummaryOverviewTableComponent,
+            PickupDeliveryBlockComponent,
+            ProgressBarComponent,
+            CaSearchMultipleStatesComponent,
+            CaSpinnerComponent,
+            CaTruckTrailerProgresBarComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaComponentsLibModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
-                    imports: [CommonModule, CaProfileImageComponent],
-                    exports: [CaProfileImageComponent],
+                    imports: [
+                        CommonModule,
+                        CaProfileImageComponent,
+                        CaAppTooltipV2Component,
+                        CaDetailsDropdownComponent,
+                        CaDropdownComponent,
+                        CaFilterComponent,
+                        CaInputComponent,
+                        CaInputRadiobuttonsComponent,
+                        CaMapComponent,
+                        CaMapDropdownComponent,
+                        CaNoteComponent,
+                        CaNoteContainerComponent,
+                        CaPayrollListSummaryOverviewComponent,
+                        CaPayrollListSummaryOverviewTableComponent,
+                        PickupDeliveryBlockComponent,
+                        ProgressBarComponent,
+                        CaSearchMultipleStatesComponent,
+                        CaSpinnerComponent,
+                        CaTruckTrailerProgresBarComponent,
+                    ],
+                    exports: [
+                        CaProfileImageComponent,
+                        CaAppTooltipV2Component,
+                        CaDetailsDropdownComponent,
+                        CaDropdownComponent,
+                        CaFilterComponent,
+                        CaInputComponent,
+                        CaInputRadiobuttonsComponent,
+                        CaMapComponent,
+                        CaMapDropdownComponent,
+                        CaNoteComponent,
+                        CaNoteContainerComponent,
+                        CaPayrollListSummaryOverviewComponent,
+                        CaPayrollListSummaryOverviewTableComponent,
+                        PickupDeliveryBlockComponent,
+                        ProgressBarComponent,
+                        CaSearchMultipleStatesComponent,
+                        CaSpinnerComponent,
+                        CaTruckTrailerProgresBarComponent,
+                    ],
                 }]
         }] });
 
@@ -53,5 +1910,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CaComponentsLibModule, CaProfileImageComponent };
+export { CaAppTooltipV2Component, CaComponentsLibModule, CaDetailsDropdownComponent, CaDropdownComponent, CaFilterComponent, CaInputComponent, CaInputRadiobuttonsComponent, CaMapComponent, CaMapDropdownComponent, CaNoteComponent, CaNoteContainerComponent, CaPayrollListSummaryOverviewComponent, CaPayrollListSummaryOverviewTableComponent, CaProfileImageComponent, CaSearchMultipleStatesComponent, CaSpinnerComponent, CaTruckTrailerProgresBarComponent, PickupDeliveryBlockComponent, ProgressBarComponent };
 //# sourceMappingURL=ca-components.mjs.map