ca-components 2.0.92 → 2.0.912
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ca-components.mjs +36 -45
- package/fesm2022/ca-components.mjs.map +1 -1
- package/lib/components/ca-dropdown-menu/ca-dropdown-menu.component.d.ts +0 -1
- package/lib/components/ca-period-content/components/ca-period-content-payment/ca-period-content-payment.component.d.ts +0 -1
- package/package.json +1 -1
|
@@ -2537,7 +2537,7 @@ class CaDetailsDropdownComponent {
|
|
|
2537
2537
|
this.tooltip?.close();
|
|
2538
2538
|
}
|
|
2539
2539
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CaDetailsDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2540
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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 class=\"details-dropdown-container\"\n container=\"body\"\n triggers=\"manual\"\n popoverClass=\"details-dropdown-popover\"\n [autoClose]=\"'outside'\"\n [ngbPopover]=\"dropdownPopover\"\n [placement]=\"placement\"\n [ngClass]=\"{\n 'active-drop': dropDownActive === id,\n rightRotation: leftIcon,\n leftRotation: !leftIcon,\n }\"\n [popperOptions]=\"popperOptions\"\n [container]=\"'body'\"\n (click)=\"toggleDropdown(t2)\"\n (hidden)=\"dropDownActive = -1\"\n (hidden)=\"dropdownClosed()\"\n>\n <!-- TODO Check src -->\n <svg-icon class=\"dropdown-dots\" [src]=\"'menuRoute' | caSvg\"></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 @for (action of data; let i = $index; track action.id) {\n @if (\n action.title !== 'border' &&\n action.title !== 'Add New' &&\n action.title !== 'Request' &&\n action.title !== 'Report' &&\n !action.hide\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\n class=\"action-select-holder d-flex align-items-center\"\n >\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' ||\n 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 @if (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 }\n }\n }\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:#fff}.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:#fff}.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:#fff}.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:red!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:
|
|
2540
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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 class=\"details-dropdown-container\"\n container=\"body\"\n triggers=\"manual\"\n popoverClass=\"details-dropdown-popover\"\n [autoClose]=\"'outside'\"\n [ngbPopover]=\"dropdownPopover\"\n [placement]=\"placement\"\n [ngClass]=\"{\n 'active-drop': dropDownActive === id,\n rightRotation: leftIcon,\n leftRotation: !leftIcon,\n }\"\n [popperOptions]=\"popperOptions\"\n [container]=\"'body'\"\n (click)=\"toggleDropdown(t2)\"\n (hidden)=\"dropDownActive = -1\"\n (hidden)=\"dropdownClosed()\"\n>\n <!-- TODO Check src -->\n <svg-icon class=\"dropdown-dots\" [src]=\"'menuRoute' | caSvg\"></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 @for (action of data; let i = $index; track action.id) {\n @if (\n action.title !== 'border' &&\n action.title !== 'Add New' &&\n action.title !== 'Request' &&\n action.title !== 'Report' &&\n !action.hide\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\n class=\"action-select-holder d-flex align-items-center\"\n >\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' ||\n 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 @if (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 }\n }\n }\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}}.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}.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:#fff}.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:#fff}.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:#fff}.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:red!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:
|
|
2541
2541
|
// modules
|
|
2542
2542
|
CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i3.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "pipe", type:
|
|
2543
2543
|
// pipes
|
|
@@ -2552,7 +2552,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2552
2552
|
NgbModule,
|
|
2553
2553
|
// pipes
|
|
2554
2554
|
CaSvgPipe,
|
|
2555
|
-
], animations: [showAnimation$1, borderShowAnimation], template: "<div\n #t2=\"ngbPopover\"\n class=\"details-dropdown-container\"\n container=\"body\"\n triggers=\"manual\"\n popoverClass=\"details-dropdown-popover\"\n [autoClose]=\"'outside'\"\n [ngbPopover]=\"dropdownPopover\"\n [placement]=\"placement\"\n [ngClass]=\"{\n 'active-drop': dropDownActive === id,\n rightRotation: leftIcon,\n leftRotation: !leftIcon,\n }\"\n [popperOptions]=\"popperOptions\"\n [container]=\"'body'\"\n (click)=\"toggleDropdown(t2)\"\n (hidden)=\"dropDownActive = -1\"\n (hidden)=\"dropdownClosed()\"\n>\n <!-- TODO Check src -->\n <svg-icon class=\"dropdown-dots\" [src]=\"'menuRoute' | caSvg\"></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 @for (action of data; let i = $index; track action.id) {\n @if (\n action.title !== 'border' &&\n action.title !== 'Add New' &&\n action.title !== 'Request' &&\n action.title !== 'Report' &&\n !action.hide\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\n class=\"action-select-holder d-flex align-items-center\"\n >\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' ||\n 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 @if (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 }\n }\n }\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:#fff}.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:#fff}.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:#fff}.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:red!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"] }]
|
|
2555
|
+
], animations: [showAnimation$1, borderShowAnimation], template: "<div\n #t2=\"ngbPopover\"\n class=\"details-dropdown-container\"\n container=\"body\"\n triggers=\"manual\"\n popoverClass=\"details-dropdown-popover\"\n [autoClose]=\"'outside'\"\n [ngbPopover]=\"dropdownPopover\"\n [placement]=\"placement\"\n [ngClass]=\"{\n 'active-drop': dropDownActive === id,\n rightRotation: leftIcon,\n leftRotation: !leftIcon,\n }\"\n [popperOptions]=\"popperOptions\"\n [container]=\"'body'\"\n (click)=\"toggleDropdown(t2)\"\n (hidden)=\"dropDownActive = -1\"\n (hidden)=\"dropdownClosed()\"\n>\n <!-- TODO Check src -->\n <svg-icon class=\"dropdown-dots\" [src]=\"'menuRoute' | caSvg\"></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 @for (action of data; let i = $index; track action.id) {\n @if (\n action.title !== 'border' &&\n action.title !== 'Add New' &&\n action.title !== 'Request' &&\n action.title !== 'Report' &&\n !action.hide\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\n class=\"action-select-holder d-flex align-items-center\"\n >\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' ||\n 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 @if (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 }\n }\n }\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}}.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}.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:#fff}.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:#fff}.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:#fff}.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:red!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"] }]
|
|
2556
2556
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { options: [{
|
|
2557
2557
|
type: Input
|
|
2558
2558
|
}], id: [{
|
|
@@ -16371,7 +16371,7 @@ class CaMapDropdownComponent {
|
|
|
16371
16371
|
};
|
|
16372
16372
|
}
|
|
16373
16373
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CaMapDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16374
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaMapDropdownComponent, isStandalone: true, selector: "app-ca-map-dropdown", inputs: { infoWindowContent: "infoWindowContent", markerData: "markerData" }, outputs: { onClusterItemClick: "onClusterItemClick", onClusterListScrollToEnd: "onClusterListScrollToEnd", onBackButtonClick: "onBackButtonClick", bodyActions: "bodyActions" }, providers: [SvgIconRegistryService], ngImport: i0, template: "@if (_infoWindowContent?.clusterData) {\n @if (_infoWindowContent?.selectedClusterItemData) {\n <div\n class=\"marker-container relative\"\n [class.expanded]=\"!isHidden\"\n (click)=\"preventEventPropagation($event, true)\"\n (mousewheel)=\"preventEventPropagation($event)\"\n >\n @if (_infoWindowContent?.selectedClusterItemData?.mainContentTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n _infoWindowContent?.selectedClusterItemData?.mainContentTemplate;\n context: {\n data: _infoWindowContent?.selectedClusterItemData\n .data,\n isCluster: true,\n }\n \"\n ></ng-container>\n } @else {\n @for (\n item of _infoWindowContent?.selectedClusterItemData\n .mainContent;\n let i = $index;\n track i\n ) {\n <ng-container\n *ngTemplateOutlet=\"\n dropdownContentTemplate;\n context: {\n content: item,\n data: _infoWindowContent\n ?.selectedClusterItemData.data,\n isCluster: true,\n }\n \"\n ></ng-container>\n }\n }\n\n <div class=\"expanded-info\" [class.active]=\"!isHidden\">\n @if (_infoWindowContent?.selectedClusterItemData?.expandedContentTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n _infoWindowContent?.selectedClusterItemData?.expandedContentTemplate;\n context: {\n data: _infoWindowContent\n ?.selectedClusterItemData.data,\n }\n \"\n ></ng-container>\n } @else {\n @for (\n item of _infoWindowContent?.selectedClusterItemData\n .expandedContent;\n let i = $index;\n track i\n ) {\n <ng-container\n *ngTemplateOutlet=\"\n dropdownContentTemplate;\n context: {\n content: item,\n data: _infoWindowContent\n ?.selectedClusterItemData.data,\n }\n \"\n ></ng-container>\n }\n }\n </div>\n\n @if (\n _infoWindowContent?.selectedClusterItemData?.expandedContentTemplate ||\n _infoWindowContent?.expandedContentTemplate ||\n _infoWindowContent?.expandedContent?.length\n ) {\n <div\n class=\"dropdown-arrow align-self-end\"\n [class.rotate-arrow]=\"!isHidden\"\n >\n <svg-icon\n [src]=\"mapDropdownSvgRoutes.cornerDownArrowRoute\"\n (click)=\"showHiddenData($event)\"\n ></svg-icon>\n </div>\n }\n </div>\n } @else {\n <div\n class=\"cluster-marker-container d-flex flex-column gap-1\"\n (click)=\"preventEventPropagation($event, true)\"\n (mousewheel)=\"onClusterListScroll($event)\"\n >\n @for (\n item of _infoWindowContent?.clusterData;\n let i = $index;\n track i\n ) {\n <ng-container\n *ngTemplateOutlet=\"\n clusterContentTemplate;\n context: {\n content: item,\n }\n \"\n ></ng-container>\n }\n </div>\n }\n} @else {\n <div\n class=\"marker-container relative\"\n [class.expanded]=\"!isHidden || _infoWindowContent?.isAlwaysExpanded\"\n (click)=\"preventEventPropagation($event, true)\"\n (mousewheel)=\"preventEventPropagation($event)\"\n >\n @if (_infoWindowContent?.mainContentTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n _infoWindowContent!.mainContentTemplate!;\n context: {\n data: _markerData,\n }\n \"\n ></ng-container>\n } @else {\n @for (\n item of _infoWindowContent?.mainContent;\n let i = $index;\n track i\n ) {\n <ng-container\n *ngTemplateOutlet=\"\n dropdownContentTemplate;\n context: {\n content: item,\n data: _markerData,\n }\n \"\n ></ng-container>\n }\n }\n\n <div class=\"expanded-info\" [class.active]=\"!isHidden\">\n @if (_infoWindowContent?.expandedContentTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n _infoWindowContent!.expandedContentTemplate!;\n context: {\n data: _markerData,\n }\n \"\n ></ng-container>\n } @else {\n @for (\n item of _infoWindowContent?.expandedContent;\n let i = $index;\n track i\n ) {\n <ng-container\n *ngTemplateOutlet=\"\n dropdownContentTemplate;\n context: {\n content: item,\n data: _markerData,\n }\n \"\n ></ng-container>\n }\n }\n </div>\n\n @if (\n _infoWindowContent?.expandedContentTemplate ||\n _infoWindowContent?.expandedContent?.length\n ) {\n <div\n class=\"dropdown-arrow align-self-end\"\n [class.rotate-arrow]=\"!isHidden\"\n >\n <svg-icon\n [src]=\"mapDropdownSvgRoutes.cornerDownArrowRoute\"\n (click)=\"showHiddenData($event)\"\n ></svg-icon>\n </div>\n }\n </div>\n}\n\n<ng-template #clusterContentTemplate let-content=\"content\">\n @let item = content | mapDropdownClusterContentType;\n @if (item) {\n <div\n class=\"d-flex align-items-center justify-content-between cluster-marker-item\"\n (click)=\"clusterItemClick(item)\"\n >\n <div\n class=\"d-flex align-items-center gap-1\"\n [ngStyle]=\"{\n 'max-width': item.favourite ? 'calc(100% - 18px)' : '100%',\n }\"\n >\n @if (item.isClosed) {\n <svg-icon\n class=\"d-flex svg-size-18\"\n [src]=\"mapDropdownSvgRoutes.permanentlyClosedRoute\"\n ></svg-icon>\n }\n <div\n class=\"regular-text dark-gray-text text-uppercase text-ellipsis\"\n >\n {{ item.name }}\n </div>\n </div>\n\n @if (item.favourite) {\n <svg-icon\n class=\"d-flex svg-size-18\"\n [src]=\"mapDropdownSvgRoutes.favoriteRoute\"\n ></svg-icon>\n }\n </div>\n }\n</ng-template>\n\n<ng-template #dropdownContentTemplate let-content=\"content\" let-data=\"data\">\n @let item = content | mapDropdownContentType;\n @if (item) {\n @if (!item.sideBySideInfo) {\n <ng-container\n *ngTemplateOutlet=\"\n dropdownContentItemTemplates;\n context: {\n content: item,\n data: data,\n }\n \"\n ></ng-container>\n } @else {\n <!-- Side by Side Data -->\n <div class=\"d-flex align-items-center\">\n <!-- Left Side -->\n @if (item.sideBySideInfo.leftSide) {\n <div class=\"flex-1\">\n <ng-container\n *ngTemplateOutlet=\"\n dropdownContentItemTemplates;\n context: {\n content: item.sideBySideInfo?.leftSide,\n data: data,\n }\n \"\n >\n </ng-container>\n </div>\n }\n\n <!-- Right Side -->\n @if (item.sideBySideInfo.rightSide) {\n <div class=\"flex-1\">\n <ng-container\n *ngTemplateOutlet=\"\n dropdownContentItemTemplates;\n context: {\n content: item.sideBySideInfo?.rightSide,\n data: data,\n }\n \"\n >\n </ng-container>\n </div>\n }\n </div>\n }\n }\n</ng-template>\n\n<ng-template\n #dropdownContentItemTemplates\n let-content=\"content\"\n let-data=\"data\"\n>\n @let item = content | mapDropdownContentType;\n @if (item) {\n @switch (item?.template) {\n @case (eMapDropdownString.HEADER_TITLE) {\n <div\n class=\"heading d-flex justify-content-between align-items-center {{\n item.customClassContainer\n }}\"\n >\n <div\n class=\"header-text-container d-flex align-items-center gap-1 w-100\"\n >\n @if (item.hasBackButton) {\n <div\n class=\"header-back-button d-flex align-items-center justify-content-center\"\n (click)=\"backButtonClick($event)\"\n >\n <svg-icon\n class=\"d-flex svg-size-14\"\n [src]=\"mapDropdownSvgRoutes.backButtonRoute\"\n >\n </svg-icon>\n </div>\n }\n\n <span\n class=\"header ca-font-extra-bold dark-gray-text {{\n item.customClassText\n }}\"\n >\n {{ data | mapDropdownValue: item }}\n </span>\n </div>\n </div>\n }\n\n <!-- Rating Review -->\n @case (eMapDropdownString.RATING_REVIEW) {\n <div\n class=\"d-flex justify-content-start align-items-center align-content-center gap-3 {{\n item.customClassContainer\n }}\"\n >\n <div\n class=\"d-flex justify-content-start align-items-center gap-2\"\n [class.opacity-40]=\"!data[item.field].likeCount\"\n >\n <svg-icon\n class=\"rating-icon like-icon d-flex svg-size-14\"\n [class.active]=\"data[item.field].hasLiked\"\n [src]=\"mapDropdownSvgRoutes.likeRoute\"\n ></svg-icon>\n <span\n class=\"small-text dark-gray-text ca-font-semi-bold user-select-none\"\n >{{ data[item.field].likeCount }}\n </span>\n </div>\n <div\n class=\"d-flex justify-content-start align-items-center gap-2\"\n [class.opacity-40]=\"!data[item.field].dislikeCount\"\n >\n <svg-icon\n class=\"rating-icon dislike-icon d-flex svg-size-14\"\n [class.active]=\"data[item.field].hasDislike\"\n [src]=\"mapDropdownSvgRoutes.dislikeRoute\"\n ></svg-icon>\n <span\n class=\"small-text dark-gray-text ca-font-semi-bold user-select-none\"\n >{{ data[item.field].dislikeCount }}\n </span>\n </div>\n <div\n class=\"d-flex justify-content-start align-items-center gap-2\"\n [class.opacity-40]=\"!data[item.field].reviewCount\"\n >\n <svg-icon\n class=\"rating-icon review-icon d-flex svg-size-14\"\n [src]=\"mapDropdownSvgRoutes.reviewRoute\"\n ></svg-icon>\n <span\n class=\"small-text dark-gray-text ca-font-semi-bold user-select-none\"\n >{{ data[item.field].reviewCount ?? 0 }}\n </span>\n </div>\n </div>\n }\n\n <!-- Border Divider -->\n @case (eMapDropdownString.DIVIDER) {\n <div class=\"info-divider\"></div>\n }\n\n <!-- Repair Shop Services -->\n @case (eMapDropdownString.REPAIR_SHOP_SERVICES) {\n <div\n class=\"d-flex align-items-center justify-content-between {{\n item.customClassContainer\n }}\"\n >\n @for (\n service of data[item.field];\n let i = $index;\n track i\n ) {\n <div\n class=\"d-flex align-items-center justify-content-center\"\n ngbTooltip\n [tooltipBackground]=\"'#424242'\"\n [mainCaTooltip]=\"service.serviceType.name\"\n position=\"bottom\"\n >\n <svg-icon\n class=\"repair-service-icon svg-size-18\"\n [class.active]=\"service.active\"\n [src]=\"\n service.logoName\n | caSvg: 'common' : 'repair-services'\n \"\n ></svg-icon>\n </div>\n }\n </div>\n }\n\n <!-- Icon and Text -->\n @case (eMapDropdownString.ICON_TEXT) {\n <div\n class=\"d-flex align-items-start gap-1 {{\n item.customClassContainer\n }}\"\n >\n @if (item.url) {\n <div\n ngbTooltip\n [tooltipBackground]=\"'#424242'\"\n [mainCaTooltip]=\"item.iconTooltipText\"\n position=\"bottom\"\n [disableTooltip]=\"!item.iconTooltipText\"\n >\n <svg-icon\n class=\"d-flex align-items-center justify-content-center svg-size-18\"\n [src]=\"item.url\"\n ></svg-icon>\n </div>\n }\n\n <span\n class=\"regular-text dark-gray-text {{\n item.customClassText\n }}\"\n >\n {{\n item.isDate\n ? (data[item.field] | date: 'MM/dd/yy')\n : (data | mapDropdownValue: item)\n }}\n </span>\n </div>\n }\n\n <!-- Title -->\n @case (eMapDropdownString.TITLE) {\n <div\n class=\"regular-text dark-gray-text ca-font-extra-bold {{\n item.customClassText\n }}\"\n >\n {{ data | mapDropdownValue: item }}\n </div>\n }\n\n <!-- Title and Count -->\n @case (eMapDropdownString.TITLE_COUNT) {\n <div\n class=\"d-flex align-items-center gap-1 {{\n item.customClassContainer\n }}\"\n >\n <div class=\"regular-text dark-gray-text ca-font-extra-bold\">\n {{ item.title }}\n </div>\n <div\n class=\"count-number white-text d-flex align-items-center justify-content-center ca-font-bold\"\n >\n {{\n item.isDuration\n ? (data[item.field] | formatDuration)\n : (data | mapDropdownValue: item)\n }}\n </div>\n </div>\n }\n\n <!-- Money Text -->\n @case (eMapDropdownString.MONEY_TEXT) {\n <div\n class=\"d-flex align-items-center gap-1 {{\n item.customClassContainer\n }}\"\n >\n <div class=\"regular-text ca-font-bold blue-text\">\n {{\n data?.[item.field] !== ''\n ? (data[item.field] | formatCurrency)\n : '$0'\n }}\n </div>\n <div class=\"regular-text light-gray-text ca-font-bold\">\n {{ item.title }}\n </div>\n </div>\n }\n\n <!-- Open Hours -->\n @case (eMapDropdownString.OPEN_HOURS) {\n <div class=\"d-flex flex-column gap-2\">\n <div\n class=\"regular-text dark-gray-text ca-font-extra-bold {{\n item.customClassText\n }}\"\n >\n {{ item.title }}\n </div>\n <div class=\"open-hours-grid\">\n @if (\n data[item.field]?.openHoursToday &&\n !isShowAllDaysActive\n ) {\n <div class=\"d-flex flex-column flex-1\">\n <div\n class=\"small-text dark-gray-text ca-font-bold\"\n >\n {{ data[item.field].openHoursToday.status }}\n </div>\n <div\n class=\"regular-text dark-gray-text text-ellipsis\"\n >\n {{ data[item.field].openHoursToday.info }}\n </div>\n </div>\n }\n\n @if (data[item.field]?.openHours?.length) {\n @if (isShowAllDaysActive) {\n @for (\n day of data[item.field].openHours;\n let i = $index;\n track i\n ) {\n <div class=\"d-flex flex-column flex-1\">\n <div\n class=\"small-text dark-gray-text ca-font-bold\"\n >\n {{ day.dayOfWeek }}\n </div>\n <div\n class=\"regular-text dark-gray-text text-ellipsis\"\n >\n {{\n day.startTime +\n ' - ' +\n day.endTime\n }}\n </div>\n </div>\n }\n }\n <div\n class=\"d-flex flex-column flex-1 justify-content-end show-all-days-container\"\n >\n <div\n class=\"d-flex align-items-center gap-1\"\n (click)=\"showAllDaysClick()\"\n >\n <svg-icon\n class=\"d-flex svg-size-14\"\n [src]=\"\n mapDropdownSvgRoutes.accidentCalenderRoute\n \"\n ></svg-icon>\n <div\n class=\"regular-text gray-text cursor-pointer\"\n >\n {{\n isShowAllDaysActive\n ? 'Show today'\n : 'Show all days'\n }}\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Text and Count -->\n @case (eMapDropdownString.TEXT_COUNT) {\n <div\n class=\"d-flex align-items-center gap-1 {{\n item.customClassContainer\n }}\"\n >\n <div class=\"regular-text {{ item.customClassText }}\">\n {{ item.title }}\n </div>\n <div\n class=\"regular-text ca-font-semi-bold {{\n item.customClassText\n }}\"\n >\n {{ data | mapDropdownValue: item }}\n </div>\n </div>\n }\n\n <!-- Subtitle -->\n @case (eMapDropdownString.SUBTITLE) {\n <div\n class=\"regular-text dark-gray-text ca-font-extra-bold {{\n item.customClassText\n }}\"\n >\n {{ item.title }}\n </div>\n }\n\n <!-- Regular Text -->\n @case (eMapDropdownString.TEXT) {\n <div class=\"regular-text black-text {{ item.customClassText }}\">\n {{\n item.isDate\n ? (data[item.field] | date: 'MM/dd/yy hh:mm a')\n : (data | mapDropdownValue: item)\n }}\n </div>\n }\n\n <!-- Small Subtitle -->\n @case (eMapDropdownString.SMALL_SUBTITLE) {\n <div\n class=\"small-text dark-gray-text {{ item.customClassText }}\"\n >\n {{ item.title }}\n </div>\n }\n\n <!-- Date -->\n @case (eMapDropdownString.DATE) {\n <div class=\"regular-text black-text {{ item.customClassText }}\">\n {{ data[item.field] | date }}\n </div>\n }\n\n <!-- Fuel Price Range -->\n @case (eMapDropdownString.FUEL_PRICE_RANGE) {\n @if (fuelPriceRangeData) {\n <div\n class=\"d-flex align-items-center justify-content-between gap-1\"\n >\n <div class=\"d-flex flex-column\">\n <div\n class=\"text-size-14 ca-font-semi-bold\"\n [ngClass]=\"\n fuelPriceRangeData.priceOutDated\n ? 'text-color-muted'\n : 'text-color-black'\n \"\n >\n {{\n fuelPriceRangeData.pricePerGallon\n | formatCurrency\n }}\n </div>\n <div class=\"text-size-11 text-color-muted\">\n {{\n fuelPriceRangeData.dieselLastUsed\n | dateFromStringPipe: 'time-ago'\n }}\n </div>\n </div>\n\n <app-ca-last-fuel-price-progress\n [lastFuelPriceData]=\"fuelPriceRangeData\"\n ></app-ca-last-fuel-price-progress>\n </div>\n }\n }\n\n <!-- Miles Stop Type -->\n @case (eMapDropdownString.STOP_TYPE) {\n <div class=\"regular-text {{ item.customClassText }}\">\n {{ data | mapDropdownValue: item }}\n\n @if (data.businessName) {\n <span\n class=\"text-size-14 ca-font-medium text-color-muted text-uppercase\"\n >- {{ data.businessName }}</span\n >\n }\n </div>\n }\n\n <!-- Travel Time -->\n @case (eMapDropdownString.TRAVEL_TIME) {\n <div class=\"regular-text {{ item.customClassText }}\">\n {{\n {\n days: 0,\n hours: data[item.field],\n minutes: data[item.secondField!],\n seconds: 0,\n } | formatDuration\n }}\n </div>\n }\n }\n }\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}}:host{display:block;height:100%;width:100%}.cluster-marker-container{width:354px;max-height:244px;margin:4px 2px 4px 4px;overflow-y:scroll;cursor:default}.cluster-marker-container::-webkit-scrollbar{width:2px}.cluster-marker-container::-webkit-scrollbar-thumb{background-color:#ccc;border:2px solid #cccccc;border-radius:1px}.cluster-marker-container::-webkit-scrollbar-track{width:2px;background-color:#fff}.cluster-marker-container .cluster-marker-item{max-width:100%;padding:4px;cursor:pointer;border-radius:2px}.cluster-marker-container .cluster-marker-item:hover{background:#eee}.marker-container{width:360px;max-height:214px;padding:8px;transition:max-height .2s ease-in-out;cursor:default}.marker-container.expanded{max-height:396px}.marker-container .heading{max-width:100%;margin-bottom:3px}.marker-container .heading .header-text-container{max-width:calc(100% - 26px)}.marker-container .heading .header-text-container .header-back-button{min-width:18px;min-height:18px;background:#eee;border-radius:1px;cursor:pointer}.marker-container .heading .header-text-container .header-back-button svg-icon svg path{fill:#919191}.marker-container .heading .header-text-container .header{font-family:Montserrat,sans-serif;font-size:16px;line-height:20px;color:#424242}.marker-container .heading .dropdown-icon{min-width:26px;min-height:26px}.marker-container .action .side-space{padding-right:4px}.marker-container .action .side-space .count{font-family:Montserrat,sans-serif;font-size:11px;color:#424242;padding:0 7px;position:relative;left:-1px}.marker-container .action .side-space .grey-color{color:#919191}.marker-container .repair-service-icon svg path{fill:#ccc;fill-opacity:1}.marker-container .repair-service-icon.active svg path{fill:#919191;fill-opacity:1}.marker-container .personal-info-items{font-family:Montserrat,sans-serif}.marker-container .personal-info-items .info{max-width:100%;font-size:14px;line-height:18px;padding:0 5px;color:#2f2f2f;font-family:Montserrat,sans-serif;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.marker-container .working-info-detail{font-family:Montserrat,sans-serif}.marker-container .working-info-detail .working-info-item{font-size:11px;line-height:14px;color:#424242}.marker-container .working-info-detail .working-info-item .working-time{font-size:14px;line-height:18px}.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 .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 .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 .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}.info-divider{margin:8px 0;width:100%;height:1px;background:#dadada;border-radius:2px}.dropdown-arrow{position:absolute;right:6px;bottom:6px}.dropdown-arrow svg{transition:transform .2s ease-in-out;transform:rotate(0)}.dropdown-arrow svg path{transition:fill .2s ease-in-out;fill:#919191}.dropdown-arrow.rotate-arrow svg{transform:rotate(180deg)}.dropdown-arrow.rotate-arrow svg path{fill:#6692f1}.dropdown-arrow:hover{cursor:pointer}.dropdown-arrow:hover svg path{fill:#6692f1}.expanded-info{max-height:0px;overflow:hidden;transition:max-height .2s ease-in-out}.expanded-info.active{max-height:300px}.gap-8{gap:8px}.count-number{padding:0 5px;background:#6c6c6c;border-radius:60px;font-size:11px;line-height:14px;-webkit-user-select:none;user-select:none}.rating-icon svg path{fill:#919191;fill-opacity:1}.rating-icon.active.like-icon svg path{fill:#56b4ac}.rating-icon.active.dislike-icon svg path{fill:#e66767}.text-ellipsis{max-width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.text-ellipsis.two-rows-ellipsis{max-width:90%;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;white-space:initial}.blue-text{color:#6692f1!important}.blue-text::-moz-selection{color:#6692f1;background:#3b73ed33}.blue-text::selection{color:#6692f1;background:#3b73ed33}.red-text{color:#df3c3c!important}.red-text::-moz-selection{color:#df3c3c;background:#df3c3c33}.red-text::selection{color:#df3c3c;background:#df3c3c33}.gray-text{color:#919191!important}.gray-text::-moz-selection{color:#919191;background:#91919133}.gray-text::selection{color:#919191;background:#91919133}.light-gray-text{color:#6c6c6c}.light-gray-text::-moz-selection{color:#6c6c6c;background:#6c6c6c33}.light-gray-text::selection{color:#6c6c6c;background:#6c6c6c33}.dark-gray-text{color:#424242}.dark-gray-text::-moz-selection{color:#424242;background:#42424233}.dark-gray-text::selection{color:#424242;background:#42424233}.black-text{color:#2f2f2f}.black-text::-moz-selection{color:#2f2f2f;background:#2f2f2f33}.black-text::selection{color:#2f2f2f;background:#2f2f2f33}.white-text{color:#fff}.white-text::-moz-selection{color:#fff;background:#fff3}.white-text::selection{color:#fff;background:#fff3}.opacity-40{opacity:.4}.regular-text{font-size:14px;line-height:18px;font-family:Montserrat,sans-serif}.small-text{font-size:11px;line-height:14px;font-family:Montserrat,sans-serif}.open-hours-grid{display:grid;grid-template-columns:50% 50%;grid-row-gap:8px}.cursor-pointer{cursor:pointer}.show-all-days-container{grid-column:2/span 1}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
16374
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaMapDropdownComponent, isStandalone: true, selector: "app-ca-map-dropdown", inputs: { infoWindowContent: "infoWindowContent", markerData: "markerData" }, outputs: { onClusterItemClick: "onClusterItemClick", onClusterListScrollToEnd: "onClusterListScrollToEnd", onBackButtonClick: "onBackButtonClick", bodyActions: "bodyActions" }, providers: [SvgIconRegistryService], ngImport: i0, template: "@if (_infoWindowContent?.clusterData) {\n @if (_infoWindowContent?.selectedClusterItemData) {\n <div\n class=\"marker-container relative\"\n [class.expanded]=\"!isHidden\"\n (click)=\"preventEventPropagation($event, true)\"\n (mousewheel)=\"preventEventPropagation($event)\"\n >\n @if (_infoWindowContent?.selectedClusterItemData?.mainContentTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n _infoWindowContent?.selectedClusterItemData?.mainContentTemplate;\n context: {\n data: _infoWindowContent?.selectedClusterItemData\n .data,\n isCluster: true,\n }\n \"\n ></ng-container>\n } @else {\n @for (\n item of _infoWindowContent?.selectedClusterItemData\n .mainContent;\n let i = $index;\n track i\n ) {\n <ng-container\n *ngTemplateOutlet=\"\n dropdownContentTemplate;\n context: {\n content: item,\n data: _infoWindowContent\n ?.selectedClusterItemData.data,\n isCluster: true,\n }\n \"\n ></ng-container>\n }\n }\n\n <div class=\"expanded-info\" [class.active]=\"!isHidden\">\n @if (_infoWindowContent?.selectedClusterItemData?.expandedContentTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n _infoWindowContent?.selectedClusterItemData?.expandedContentTemplate;\n context: {\n data: _infoWindowContent\n ?.selectedClusterItemData.data,\n }\n \"\n ></ng-container>\n } @else {\n @for (\n item of _infoWindowContent?.selectedClusterItemData\n .expandedContent;\n let i = $index;\n track i\n ) {\n <ng-container\n *ngTemplateOutlet=\"\n dropdownContentTemplate;\n context: {\n content: item,\n data: _infoWindowContent\n ?.selectedClusterItemData.data,\n }\n \"\n ></ng-container>\n }\n }\n </div>\n\n @if (\n _infoWindowContent?.selectedClusterItemData?.expandedContentTemplate ||\n _infoWindowContent?.expandedContentTemplate ||\n _infoWindowContent?.expandedContent?.length\n ) {\n <div\n class=\"dropdown-arrow align-self-end\"\n [class.rotate-arrow]=\"!isHidden\"\n >\n <svg-icon\n [src]=\"mapDropdownSvgRoutes.cornerDownArrowRoute\"\n (click)=\"showHiddenData($event)\"\n ></svg-icon>\n </div>\n }\n </div>\n } @else {\n <div\n class=\"cluster-marker-container d-flex flex-column gap-1\"\n (click)=\"preventEventPropagation($event, true)\"\n (mousewheel)=\"onClusterListScroll($event)\"\n >\n @for (\n item of _infoWindowContent?.clusterData;\n let i = $index;\n track i\n ) {\n <ng-container\n *ngTemplateOutlet=\"\n clusterContentTemplate;\n context: {\n content: item,\n }\n \"\n ></ng-container>\n }\n </div>\n }\n} @else {\n <div\n class=\"marker-container relative\"\n [class.expanded]=\"!isHidden || _infoWindowContent?.isAlwaysExpanded\"\n (click)=\"preventEventPropagation($event, true)\"\n (mousewheel)=\"preventEventPropagation($event)\"\n >\n @if (_infoWindowContent?.mainContentTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n _infoWindowContent!.mainContentTemplate!;\n context: {\n data: _markerData,\n }\n \"\n ></ng-container>\n } @else {\n @for (\n item of _infoWindowContent?.mainContent;\n let i = $index;\n track i\n ) {\n <ng-container\n *ngTemplateOutlet=\"\n dropdownContentTemplate;\n context: {\n content: item,\n data: _markerData,\n }\n \"\n ></ng-container>\n }\n }\n\n <div class=\"expanded-info\" [class.active]=\"!isHidden\">\n @if (_infoWindowContent?.expandedContentTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n _infoWindowContent!.expandedContentTemplate!;\n context: {\n data: _markerData,\n }\n \"\n ></ng-container>\n } @else {\n @for (\n item of _infoWindowContent?.expandedContent;\n let i = $index;\n track i\n ) {\n <ng-container\n *ngTemplateOutlet=\"\n dropdownContentTemplate;\n context: {\n content: item,\n data: _markerData,\n }\n \"\n ></ng-container>\n }\n }\n </div>\n\n @if (\n _infoWindowContent?.expandedContentTemplate ||\n _infoWindowContent?.expandedContent?.length\n ) {\n <div\n class=\"dropdown-arrow align-self-end\"\n [class.rotate-arrow]=\"!isHidden\"\n >\n <svg-icon\n [src]=\"mapDropdownSvgRoutes.cornerDownArrowRoute\"\n (click)=\"showHiddenData($event)\"\n ></svg-icon>\n </div>\n }\n </div>\n}\n\n<ng-template #clusterContentTemplate let-content=\"content\">\n @let item = content | mapDropdownClusterContentType;\n @if (item) {\n <div\n class=\"d-flex align-items-center justify-content-between cluster-marker-item\"\n (click)=\"clusterItemClick(item)\"\n >\n <div\n class=\"d-flex align-items-center gap-1\"\n [ngStyle]=\"{\n 'max-width': item.favourite ? 'calc(100% - 18px)' : '100%',\n }\"\n >\n @if (item.isClosed) {\n <svg-icon\n class=\"d-flex svg-size-18\"\n [src]=\"mapDropdownSvgRoutes.permanentlyClosedRoute\"\n ></svg-icon>\n }\n <div\n class=\"regular-text dark-gray-text text-uppercase text-ellipsis\"\n >\n {{ item.name }}\n </div>\n </div>\n\n @if (item.favourite) {\n <svg-icon\n class=\"d-flex svg-size-18\"\n [src]=\"mapDropdownSvgRoutes.favoriteRoute\"\n ></svg-icon>\n }\n </div>\n }\n</ng-template>\n\n<ng-template #dropdownContentTemplate let-content=\"content\" let-data=\"data\">\n @let item = content | mapDropdownContentType;\n @if (item) {\n @if (!item.sideBySideInfo) {\n <ng-container\n *ngTemplateOutlet=\"\n dropdownContentItemTemplates;\n context: {\n content: item,\n data: data,\n }\n \"\n ></ng-container>\n } @else {\n <!-- Side by Side Data -->\n <div class=\"d-flex align-items-center\">\n <!-- Left Side -->\n @if (item.sideBySideInfo.leftSide) {\n <div class=\"flex-1\">\n <ng-container\n *ngTemplateOutlet=\"\n dropdownContentItemTemplates;\n context: {\n content: item.sideBySideInfo?.leftSide,\n data: data,\n }\n \"\n >\n </ng-container>\n </div>\n }\n\n <!-- Right Side -->\n @if (item.sideBySideInfo.rightSide) {\n <div class=\"flex-1\">\n <ng-container\n *ngTemplateOutlet=\"\n dropdownContentItemTemplates;\n context: {\n content: item.sideBySideInfo?.rightSide,\n data: data,\n }\n \"\n >\n </ng-container>\n </div>\n }\n </div>\n }\n }\n</ng-template>\n\n<ng-template\n #dropdownContentItemTemplates\n let-content=\"content\"\n let-data=\"data\"\n>\n @let item = content | mapDropdownContentType;\n @if (item) {\n @switch (item?.template) {\n @case (eMapDropdownString.HEADER_TITLE) {\n <div\n class=\"heading d-flex justify-content-between align-items-center {{\n item.customClassContainer\n }}\"\n >\n <div\n class=\"header-text-container d-flex align-items-center gap-1 w-100\"\n >\n @if (item.hasBackButton) {\n <div\n class=\"header-back-button d-flex align-items-center justify-content-center\"\n (click)=\"backButtonClick($event)\"\n >\n <svg-icon\n class=\"d-flex svg-size-14\"\n [src]=\"mapDropdownSvgRoutes.backButtonRoute\"\n >\n </svg-icon>\n </div>\n }\n\n <span\n class=\"header ca-font-extra-bold dark-gray-text {{\n item.customClassText\n }}\"\n >\n {{ data | mapDropdownValue: item }}\n </span>\n </div>\n </div>\n }\n\n <!-- Rating Review -->\n @case (eMapDropdownString.RATING_REVIEW) {\n <div\n class=\"d-flex justify-content-start align-items-center align-content-center gap-3 {{\n item.customClassContainer\n }}\"\n >\n <div\n class=\"d-flex justify-content-start align-items-center gap-2\"\n [class.opacity-40]=\"!data[item.field].likeCount\"\n >\n <svg-icon\n class=\"rating-icon like-icon d-flex svg-size-14\"\n [class.active]=\"data[item.field].hasLiked\"\n [src]=\"mapDropdownSvgRoutes.likeRoute\"\n ></svg-icon>\n <span\n class=\"small-text dark-gray-text ca-font-semi-bold user-select-none\"\n >{{ data[item.field].likeCount }}\n </span>\n </div>\n <div\n class=\"d-flex justify-content-start align-items-center gap-2\"\n [class.opacity-40]=\"!data[item.field].dislikeCount\"\n >\n <svg-icon\n class=\"rating-icon dislike-icon d-flex svg-size-14\"\n [class.active]=\"data[item.field].hasDislike\"\n [src]=\"mapDropdownSvgRoutes.dislikeRoute\"\n ></svg-icon>\n <span\n class=\"small-text dark-gray-text ca-font-semi-bold user-select-none\"\n >{{ data[item.field].dislikeCount }}\n </span>\n </div>\n <div\n class=\"d-flex justify-content-start align-items-center gap-2\"\n [class.opacity-40]=\"!data[item.field].reviewCount\"\n >\n <svg-icon\n class=\"rating-icon review-icon d-flex svg-size-14\"\n [src]=\"mapDropdownSvgRoutes.reviewRoute\"\n ></svg-icon>\n <span\n class=\"small-text dark-gray-text ca-font-semi-bold user-select-none\"\n >{{ data[item.field].reviewCount ?? 0 }}\n </span>\n </div>\n </div>\n }\n\n <!-- Border Divider -->\n @case (eMapDropdownString.DIVIDER) {\n <div class=\"info-divider\"></div>\n }\n\n <!-- Repair Shop Services -->\n @case (eMapDropdownString.REPAIR_SHOP_SERVICES) {\n <div\n class=\"d-flex align-items-center justify-content-between {{\n item.customClassContainer\n }}\"\n >\n @for (\n service of data[item.field];\n let i = $index;\n track i\n ) {\n <div\n class=\"d-flex align-items-center justify-content-center\"\n ngbTooltip\n [tooltipBackground]=\"'#424242'\"\n [mainCaTooltip]=\"service.serviceType.name\"\n position=\"bottom\"\n >\n <svg-icon\n class=\"repair-service-icon svg-size-18\"\n [class.active]=\"service.active\"\n [src]=\"\n service.logoName\n | caSvg: 'common' : 'repair-services'\n \"\n ></svg-icon>\n </div>\n }\n </div>\n }\n\n <!-- Icon and Text -->\n @case (eMapDropdownString.ICON_TEXT) {\n <div\n class=\"d-flex align-items-start gap-1 {{\n item.customClassContainer\n }}\"\n >\n @if (item.url) {\n <div\n ngbTooltip\n [tooltipBackground]=\"'#424242'\"\n [mainCaTooltip]=\"item.iconTooltipText\"\n position=\"bottom\"\n [disableTooltip]=\"!item.iconTooltipText\"\n >\n <svg-icon\n class=\"d-flex align-items-center justify-content-center svg-size-18\"\n [src]=\"item.url\"\n ></svg-icon>\n </div>\n }\n\n <span\n class=\"regular-text dark-gray-text {{\n item.customClassText\n }}\"\n >\n {{\n item.isDate\n ? (data[item.field] | date: 'MM/dd/yy')\n : (data | mapDropdownValue: item)\n }}\n </span>\n </div>\n }\n\n <!-- Title -->\n @case (eMapDropdownString.TITLE) {\n <div\n class=\"regular-text dark-gray-text ca-font-extra-bold {{\n item.customClassText\n }}\"\n >\n {{ data | mapDropdownValue: item }}\n </div>\n }\n\n <!-- Title and Count -->\n @case (eMapDropdownString.TITLE_COUNT) {\n <div\n class=\"d-flex align-items-center gap-1 {{\n item.customClassContainer\n }}\"\n >\n <div class=\"regular-text dark-gray-text ca-font-extra-bold\">\n {{ item.title }}\n </div>\n <div\n class=\"count-number white-text d-flex align-items-center justify-content-center ca-font-bold\"\n >\n {{\n item.isDuration\n ? (data[item.field] | formatDuration)\n : (data | mapDropdownValue: item)\n }}\n </div>\n </div>\n }\n\n <!-- Money Text -->\n @case (eMapDropdownString.MONEY_TEXT) {\n <div\n class=\"d-flex align-items-center gap-1 {{\n item.customClassContainer\n }}\"\n >\n <div class=\"regular-text ca-font-bold blue-text\">\n {{\n data?.[item.field] !== ''\n ? (data[item.field] | formatCurrency)\n : '$0'\n }}\n </div>\n <div class=\"regular-text light-gray-text ca-font-bold\">\n {{ item.title }}\n </div>\n </div>\n }\n\n <!-- Open Hours -->\n @case (eMapDropdownString.OPEN_HOURS) {\n <div class=\"d-flex flex-column gap-2\">\n <div\n class=\"regular-text dark-gray-text ca-font-extra-bold {{\n item.customClassText\n }}\"\n >\n {{ item.title }}\n </div>\n <div class=\"open-hours-grid\">\n @if (\n data[item.field]?.openHoursToday &&\n !isShowAllDaysActive\n ) {\n <div class=\"d-flex flex-column flex-1\">\n <div\n class=\"small-text dark-gray-text ca-font-bold\"\n >\n {{ data[item.field].openHoursToday.status }}\n </div>\n <div\n class=\"regular-text dark-gray-text text-ellipsis\"\n >\n {{ data[item.field].openHoursToday.info }}\n </div>\n </div>\n }\n\n @if (data[item.field]?.openHours?.length) {\n @if (isShowAllDaysActive) {\n @for (\n day of data[item.field].openHours;\n let i = $index;\n track i\n ) {\n <div class=\"d-flex flex-column flex-1\">\n <div\n class=\"small-text dark-gray-text ca-font-bold\"\n >\n {{ day.dayOfWeek }}\n </div>\n <div\n class=\"regular-text dark-gray-text text-ellipsis\"\n >\n {{\n day.startTime +\n ' - ' +\n day.endTime\n }}\n </div>\n </div>\n }\n }\n <div\n class=\"d-flex flex-column flex-1 justify-content-end show-all-days-container\"\n >\n <div\n class=\"d-flex align-items-center gap-1\"\n (click)=\"showAllDaysClick()\"\n >\n <svg-icon\n class=\"d-flex svg-size-14\"\n [src]=\"\n mapDropdownSvgRoutes.accidentCalenderRoute\n \"\n ></svg-icon>\n <div\n class=\"regular-text gray-text cursor-pointer\"\n >\n {{\n isShowAllDaysActive\n ? 'Show today'\n : 'Show all days'\n }}\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Text and Count -->\n @case (eMapDropdownString.TEXT_COUNT) {\n <div\n class=\"d-flex align-items-center gap-1 {{\n item.customClassContainer\n }}\"\n >\n <div class=\"regular-text {{ item.customClassText }}\">\n {{ item.title }}\n </div>\n <div\n class=\"regular-text ca-font-semi-bold {{\n item.customClassText\n }}\"\n >\n {{ data | mapDropdownValue: item }}\n </div>\n </div>\n }\n\n <!-- Subtitle -->\n @case (eMapDropdownString.SUBTITLE) {\n <div\n class=\"regular-text dark-gray-text ca-font-extra-bold {{\n item.customClassText\n }}\"\n >\n {{ item.title }}\n </div>\n }\n\n <!-- Regular Text -->\n @case (eMapDropdownString.TEXT) {\n <div class=\"regular-text black-text {{ item.customClassText }}\">\n {{\n item.isDate\n ? (data[item.field] | date: 'MM/dd/yy hh:mm a')\n : (data | mapDropdownValue: item)\n }}\n </div>\n }\n\n <!-- Small Subtitle -->\n @case (eMapDropdownString.SMALL_SUBTITLE) {\n <div\n class=\"small-text dark-gray-text {{ item.customClassText }}\"\n >\n {{ item.title }}\n </div>\n }\n\n <!-- Date -->\n @case (eMapDropdownString.DATE) {\n <div class=\"regular-text black-text {{ item.customClassText }}\">\n {{ data[item.field] | date }}\n </div>\n }\n\n <!-- Fuel Price Range -->\n @case (eMapDropdownString.FUEL_PRICE_RANGE) {\n @if (fuelPriceRangeData) {\n <div\n class=\"d-flex align-items-center justify-content-between gap-1\"\n >\n <div class=\"d-flex flex-column\">\n <div\n class=\"text-size-14 ca-font-semi-bold\"\n [ngClass]=\"\n fuelPriceRangeData.priceOutDated\n ? 'text-color-muted'\n : 'text-color-black'\n \"\n >\n {{\n fuelPriceRangeData.pricePerGallon\n | formatCurrency\n }}\n </div>\n <div class=\"text-size-11 text-color-muted\">\n {{\n fuelPriceRangeData.dieselLastUsed\n | dateFromStringPipe: 'time-ago'\n }}\n </div>\n </div>\n\n <app-ca-last-fuel-price-progress\n [lastFuelPriceData]=\"fuelPriceRangeData\"\n ></app-ca-last-fuel-price-progress>\n </div>\n }\n }\n\n <!-- Miles Stop Type -->\n @case (eMapDropdownString.STOP_TYPE) {\n <div class=\"regular-text {{ item.customClassText }}\">\n {{ data | mapDropdownValue: item }}\n\n @if (data.businessName) {\n <span\n class=\"text-size-14 ca-font-medium text-color-muted text-uppercase\"\n >- {{ data.businessName }}</span\n >\n }\n </div>\n }\n\n <!-- Travel Time -->\n @case (eMapDropdownString.TRAVEL_TIME) {\n <div class=\"regular-text {{ item.customClassText }}\">\n {{\n {\n days: 0,\n hours: data[item.field],\n minutes: data[item.secondField!],\n seconds: 0,\n } | formatDuration\n }}\n </div>\n }\n }\n }\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}}.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}:host{display:block;height:100%;width:100%}.cluster-marker-container{width:354px;max-height:244px;margin:4px 2px 4px 4px;overflow-y:scroll;cursor:default}.cluster-marker-container::-webkit-scrollbar{width:2px}.cluster-marker-container::-webkit-scrollbar-thumb{background-color:#ccc;border:2px solid #cccccc;border-radius:1px}.cluster-marker-container::-webkit-scrollbar-track{width:2px;background-color:#fff}.cluster-marker-container .cluster-marker-item{max-width:100%;padding:4px;cursor:pointer;border-radius:2px}.cluster-marker-container .cluster-marker-item:hover{background:#eee}.marker-container{width:360px;max-height:214px;padding:8px;transition:max-height .2s ease-in-out;cursor:default}.marker-container.expanded{max-height:396px}.marker-container .heading{max-width:100%;margin-bottom:3px}.marker-container .heading .header-text-container{max-width:calc(100% - 26px)}.marker-container .heading .header-text-container .header-back-button{min-width:18px;min-height:18px;background:#eee;border-radius:1px;cursor:pointer}.marker-container .heading .header-text-container .header-back-button svg-icon svg path{fill:#919191}.marker-container .heading .header-text-container .header{font-family:Montserrat,sans-serif;font-size:16px;line-height:20px;color:#424242}.marker-container .heading .dropdown-icon{min-width:26px;min-height:26px}.marker-container .action .side-space{padding-right:4px}.marker-container .action .side-space .count{font-family:Montserrat,sans-serif;font-size:11px;color:#424242;padding:0 7px;position:relative;left:-1px}.marker-container .action .side-space .grey-color{color:#919191}.marker-container .repair-service-icon svg path{fill:#ccc;fill-opacity:1}.marker-container .repair-service-icon.active svg path{fill:#919191;fill-opacity:1}.marker-container .personal-info-items{font-family:Montserrat,sans-serif}.marker-container .personal-info-items .info{max-width:100%;font-size:14px;line-height:18px;padding:0 5px;color:#2f2f2f;font-family:Montserrat,sans-serif;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.marker-container .working-info-detail{font-family:Montserrat,sans-serif}.marker-container .working-info-detail .working-info-item{font-size:11px;line-height:14px;color:#424242}.marker-container .working-info-detail .working-info-item .working-time{font-size:14px;line-height:18px}.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 .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 .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 .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}.info-divider{margin:8px 0;width:100%;height:1px;background:#dadada;border-radius:2px}.dropdown-arrow{position:absolute;right:6px;bottom:6px}.dropdown-arrow svg{transition:transform .2s ease-in-out;transform:rotate(0)}.dropdown-arrow svg path{transition:fill .2s ease-in-out;fill:#919191}.dropdown-arrow.rotate-arrow svg{transform:rotate(180deg)}.dropdown-arrow.rotate-arrow svg path{fill:#6692f1}.dropdown-arrow:hover{cursor:pointer}.dropdown-arrow:hover svg path{fill:#6692f1}.expanded-info{max-height:0px;overflow:hidden;transition:max-height .2s ease-in-out}.expanded-info.active{max-height:300px}.gap-8{gap:8px}.count-number{padding:0 5px;background:#6c6c6c;border-radius:60px;font-size:11px;line-height:14px;-webkit-user-select:none;user-select:none}.rating-icon svg path{fill:#919191;fill-opacity:1}.rating-icon.active.like-icon svg path{fill:#56b4ac}.rating-icon.active.dislike-icon svg path{fill:#e66767}.text-ellipsis{max-width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.text-ellipsis.two-rows-ellipsis{max-width:90%;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;white-space:initial}.blue-text{color:#6692f1!important}.blue-text::-moz-selection{color:#6692f1;background:#3b73ed33}.blue-text::selection{color:#6692f1;background:#3b73ed33}.red-text{color:#df3c3c!important}.red-text::-moz-selection{color:#df3c3c;background:#df3c3c33}.red-text::selection{color:#df3c3c;background:#df3c3c33}.gray-text{color:#919191!important}.gray-text::-moz-selection{color:#919191;background:#91919133}.gray-text::selection{color:#919191;background:#91919133}.light-gray-text{color:#6c6c6c}.light-gray-text::-moz-selection{color:#6c6c6c;background:#6c6c6c33}.light-gray-text::selection{color:#6c6c6c;background:#6c6c6c33}.dark-gray-text{color:#424242}.dark-gray-text::-moz-selection{color:#424242;background:#42424233}.dark-gray-text::selection{color:#424242;background:#42424233}.black-text{color:#2f2f2f}.black-text::-moz-selection{color:#2f2f2f;background:#2f2f2f33}.black-text::selection{color:#2f2f2f;background:#2f2f2f33}.white-text{color:#fff}.white-text::-moz-selection{color:#fff;background:#fff3}.white-text::selection{color:#fff;background:#fff3}.opacity-40{opacity:.4}.regular-text{font-size:14px;line-height:18px;font-family:Montserrat,sans-serif}.small-text{font-size:11px;line-height:14px;font-family:Montserrat,sans-serif}.open-hours-grid{display:grid;grid-template-columns:50% 50%;grid-row-gap:8px}.cursor-pointer{cursor:pointer}.show-all-days-container{grid-column:2/span 1}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
16375
16375
|
//modules
|
|
16376
16376
|
CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }, { kind: "directive", type: 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:
|
|
16377
16377
|
// components
|
|
@@ -16398,7 +16398,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
16398
16398
|
DateFromStringPipe,
|
|
16399
16399
|
FormatCurrencyPipe,
|
|
16400
16400
|
FormatDurationPipe,
|
|
16401
|
-
], providers: [SvgIconRegistryService], template: "@if (_infoWindowContent?.clusterData) {\n @if (_infoWindowContent?.selectedClusterItemData) {\n <div\n class=\"marker-container relative\"\n [class.expanded]=\"!isHidden\"\n (click)=\"preventEventPropagation($event, true)\"\n (mousewheel)=\"preventEventPropagation($event)\"\n >\n @if (_infoWindowContent?.selectedClusterItemData?.mainContentTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n _infoWindowContent?.selectedClusterItemData?.mainContentTemplate;\n context: {\n data: _infoWindowContent?.selectedClusterItemData\n .data,\n isCluster: true,\n }\n \"\n ></ng-container>\n } @else {\n @for (\n item of _infoWindowContent?.selectedClusterItemData\n .mainContent;\n let i = $index;\n track i\n ) {\n <ng-container\n *ngTemplateOutlet=\"\n dropdownContentTemplate;\n context: {\n content: item,\n data: _infoWindowContent\n ?.selectedClusterItemData.data,\n isCluster: true,\n }\n \"\n ></ng-container>\n }\n }\n\n <div class=\"expanded-info\" [class.active]=\"!isHidden\">\n @if (_infoWindowContent?.selectedClusterItemData?.expandedContentTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n _infoWindowContent?.selectedClusterItemData?.expandedContentTemplate;\n context: {\n data: _infoWindowContent\n ?.selectedClusterItemData.data,\n }\n \"\n ></ng-container>\n } @else {\n @for (\n item of _infoWindowContent?.selectedClusterItemData\n .expandedContent;\n let i = $index;\n track i\n ) {\n <ng-container\n *ngTemplateOutlet=\"\n dropdownContentTemplate;\n context: {\n content: item,\n data: _infoWindowContent\n ?.selectedClusterItemData.data,\n }\n \"\n ></ng-container>\n }\n }\n </div>\n\n @if (\n _infoWindowContent?.selectedClusterItemData?.expandedContentTemplate ||\n _infoWindowContent?.expandedContentTemplate ||\n _infoWindowContent?.expandedContent?.length\n ) {\n <div\n class=\"dropdown-arrow align-self-end\"\n [class.rotate-arrow]=\"!isHidden\"\n >\n <svg-icon\n [src]=\"mapDropdownSvgRoutes.cornerDownArrowRoute\"\n (click)=\"showHiddenData($event)\"\n ></svg-icon>\n </div>\n }\n </div>\n } @else {\n <div\n class=\"cluster-marker-container d-flex flex-column gap-1\"\n (click)=\"preventEventPropagation($event, true)\"\n (mousewheel)=\"onClusterListScroll($event)\"\n >\n @for (\n item of _infoWindowContent?.clusterData;\n let i = $index;\n track i\n ) {\n <ng-container\n *ngTemplateOutlet=\"\n clusterContentTemplate;\n context: {\n content: item,\n }\n \"\n ></ng-container>\n }\n </div>\n }\n} @else {\n <div\n class=\"marker-container relative\"\n [class.expanded]=\"!isHidden || _infoWindowContent?.isAlwaysExpanded\"\n (click)=\"preventEventPropagation($event, true)\"\n (mousewheel)=\"preventEventPropagation($event)\"\n >\n @if (_infoWindowContent?.mainContentTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n _infoWindowContent!.mainContentTemplate!;\n context: {\n data: _markerData,\n }\n \"\n ></ng-container>\n } @else {\n @for (\n item of _infoWindowContent?.mainContent;\n let i = $index;\n track i\n ) {\n <ng-container\n *ngTemplateOutlet=\"\n dropdownContentTemplate;\n context: {\n content: item,\n data: _markerData,\n }\n \"\n ></ng-container>\n }\n }\n\n <div class=\"expanded-info\" [class.active]=\"!isHidden\">\n @if (_infoWindowContent?.expandedContentTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n _infoWindowContent!.expandedContentTemplate!;\n context: {\n data: _markerData,\n }\n \"\n ></ng-container>\n } @else {\n @for (\n item of _infoWindowContent?.expandedContent;\n let i = $index;\n track i\n ) {\n <ng-container\n *ngTemplateOutlet=\"\n dropdownContentTemplate;\n context: {\n content: item,\n data: _markerData,\n }\n \"\n ></ng-container>\n }\n }\n </div>\n\n @if (\n _infoWindowContent?.expandedContentTemplate ||\n _infoWindowContent?.expandedContent?.length\n ) {\n <div\n class=\"dropdown-arrow align-self-end\"\n [class.rotate-arrow]=\"!isHidden\"\n >\n <svg-icon\n [src]=\"mapDropdownSvgRoutes.cornerDownArrowRoute\"\n (click)=\"showHiddenData($event)\"\n ></svg-icon>\n </div>\n }\n </div>\n}\n\n<ng-template #clusterContentTemplate let-content=\"content\">\n @let item = content | mapDropdownClusterContentType;\n @if (item) {\n <div\n class=\"d-flex align-items-center justify-content-between cluster-marker-item\"\n (click)=\"clusterItemClick(item)\"\n >\n <div\n class=\"d-flex align-items-center gap-1\"\n [ngStyle]=\"{\n 'max-width': item.favourite ? 'calc(100% - 18px)' : '100%',\n }\"\n >\n @if (item.isClosed) {\n <svg-icon\n class=\"d-flex svg-size-18\"\n [src]=\"mapDropdownSvgRoutes.permanentlyClosedRoute\"\n ></svg-icon>\n }\n <div\n class=\"regular-text dark-gray-text text-uppercase text-ellipsis\"\n >\n {{ item.name }}\n </div>\n </div>\n\n @if (item.favourite) {\n <svg-icon\n class=\"d-flex svg-size-18\"\n [src]=\"mapDropdownSvgRoutes.favoriteRoute\"\n ></svg-icon>\n }\n </div>\n }\n</ng-template>\n\n<ng-template #dropdownContentTemplate let-content=\"content\" let-data=\"data\">\n @let item = content | mapDropdownContentType;\n @if (item) {\n @if (!item.sideBySideInfo) {\n <ng-container\n *ngTemplateOutlet=\"\n dropdownContentItemTemplates;\n context: {\n content: item,\n data: data,\n }\n \"\n ></ng-container>\n } @else {\n <!-- Side by Side Data -->\n <div class=\"d-flex align-items-center\">\n <!-- Left Side -->\n @if (item.sideBySideInfo.leftSide) {\n <div class=\"flex-1\">\n <ng-container\n *ngTemplateOutlet=\"\n dropdownContentItemTemplates;\n context: {\n content: item.sideBySideInfo?.leftSide,\n data: data,\n }\n \"\n >\n </ng-container>\n </div>\n }\n\n <!-- Right Side -->\n @if (item.sideBySideInfo.rightSide) {\n <div class=\"flex-1\">\n <ng-container\n *ngTemplateOutlet=\"\n dropdownContentItemTemplates;\n context: {\n content: item.sideBySideInfo?.rightSide,\n data: data,\n }\n \"\n >\n </ng-container>\n </div>\n }\n </div>\n }\n }\n</ng-template>\n\n<ng-template\n #dropdownContentItemTemplates\n let-content=\"content\"\n let-data=\"data\"\n>\n @let item = content | mapDropdownContentType;\n @if (item) {\n @switch (item?.template) {\n @case (eMapDropdownString.HEADER_TITLE) {\n <div\n class=\"heading d-flex justify-content-between align-items-center {{\n item.customClassContainer\n }}\"\n >\n <div\n class=\"header-text-container d-flex align-items-center gap-1 w-100\"\n >\n @if (item.hasBackButton) {\n <div\n class=\"header-back-button d-flex align-items-center justify-content-center\"\n (click)=\"backButtonClick($event)\"\n >\n <svg-icon\n class=\"d-flex svg-size-14\"\n [src]=\"mapDropdownSvgRoutes.backButtonRoute\"\n >\n </svg-icon>\n </div>\n }\n\n <span\n class=\"header ca-font-extra-bold dark-gray-text {{\n item.customClassText\n }}\"\n >\n {{ data | mapDropdownValue: item }}\n </span>\n </div>\n </div>\n }\n\n <!-- Rating Review -->\n @case (eMapDropdownString.RATING_REVIEW) {\n <div\n class=\"d-flex justify-content-start align-items-center align-content-center gap-3 {{\n item.customClassContainer\n }}\"\n >\n <div\n class=\"d-flex justify-content-start align-items-center gap-2\"\n [class.opacity-40]=\"!data[item.field].likeCount\"\n >\n <svg-icon\n class=\"rating-icon like-icon d-flex svg-size-14\"\n [class.active]=\"data[item.field].hasLiked\"\n [src]=\"mapDropdownSvgRoutes.likeRoute\"\n ></svg-icon>\n <span\n class=\"small-text dark-gray-text ca-font-semi-bold user-select-none\"\n >{{ data[item.field].likeCount }}\n </span>\n </div>\n <div\n class=\"d-flex justify-content-start align-items-center gap-2\"\n [class.opacity-40]=\"!data[item.field].dislikeCount\"\n >\n <svg-icon\n class=\"rating-icon dislike-icon d-flex svg-size-14\"\n [class.active]=\"data[item.field].hasDislike\"\n [src]=\"mapDropdownSvgRoutes.dislikeRoute\"\n ></svg-icon>\n <span\n class=\"small-text dark-gray-text ca-font-semi-bold user-select-none\"\n >{{ data[item.field].dislikeCount }}\n </span>\n </div>\n <div\n class=\"d-flex justify-content-start align-items-center gap-2\"\n [class.opacity-40]=\"!data[item.field].reviewCount\"\n >\n <svg-icon\n class=\"rating-icon review-icon d-flex svg-size-14\"\n [src]=\"mapDropdownSvgRoutes.reviewRoute\"\n ></svg-icon>\n <span\n class=\"small-text dark-gray-text ca-font-semi-bold user-select-none\"\n >{{ data[item.field].reviewCount ?? 0 }}\n </span>\n </div>\n </div>\n }\n\n <!-- Border Divider -->\n @case (eMapDropdownString.DIVIDER) {\n <div class=\"info-divider\"></div>\n }\n\n <!-- Repair Shop Services -->\n @case (eMapDropdownString.REPAIR_SHOP_SERVICES) {\n <div\n class=\"d-flex align-items-center justify-content-between {{\n item.customClassContainer\n }}\"\n >\n @for (\n service of data[item.field];\n let i = $index;\n track i\n ) {\n <div\n class=\"d-flex align-items-center justify-content-center\"\n ngbTooltip\n [tooltipBackground]=\"'#424242'\"\n [mainCaTooltip]=\"service.serviceType.name\"\n position=\"bottom\"\n >\n <svg-icon\n class=\"repair-service-icon svg-size-18\"\n [class.active]=\"service.active\"\n [src]=\"\n service.logoName\n | caSvg: 'common' : 'repair-services'\n \"\n ></svg-icon>\n </div>\n }\n </div>\n }\n\n <!-- Icon and Text -->\n @case (eMapDropdownString.ICON_TEXT) {\n <div\n class=\"d-flex align-items-start gap-1 {{\n item.customClassContainer\n }}\"\n >\n @if (item.url) {\n <div\n ngbTooltip\n [tooltipBackground]=\"'#424242'\"\n [mainCaTooltip]=\"item.iconTooltipText\"\n position=\"bottom\"\n [disableTooltip]=\"!item.iconTooltipText\"\n >\n <svg-icon\n class=\"d-flex align-items-center justify-content-center svg-size-18\"\n [src]=\"item.url\"\n ></svg-icon>\n </div>\n }\n\n <span\n class=\"regular-text dark-gray-text {{\n item.customClassText\n }}\"\n >\n {{\n item.isDate\n ? (data[item.field] | date: 'MM/dd/yy')\n : (data | mapDropdownValue: item)\n }}\n </span>\n </div>\n }\n\n <!-- Title -->\n @case (eMapDropdownString.TITLE) {\n <div\n class=\"regular-text dark-gray-text ca-font-extra-bold {{\n item.customClassText\n }}\"\n >\n {{ data | mapDropdownValue: item }}\n </div>\n }\n\n <!-- Title and Count -->\n @case (eMapDropdownString.TITLE_COUNT) {\n <div\n class=\"d-flex align-items-center gap-1 {{\n item.customClassContainer\n }}\"\n >\n <div class=\"regular-text dark-gray-text ca-font-extra-bold\">\n {{ item.title }}\n </div>\n <div\n class=\"count-number white-text d-flex align-items-center justify-content-center ca-font-bold\"\n >\n {{\n item.isDuration\n ? (data[item.field] | formatDuration)\n : (data | mapDropdownValue: item)\n }}\n </div>\n </div>\n }\n\n <!-- Money Text -->\n @case (eMapDropdownString.MONEY_TEXT) {\n <div\n class=\"d-flex align-items-center gap-1 {{\n item.customClassContainer\n }}\"\n >\n <div class=\"regular-text ca-font-bold blue-text\">\n {{\n data?.[item.field] !== ''\n ? (data[item.field] | formatCurrency)\n : '$0'\n }}\n </div>\n <div class=\"regular-text light-gray-text ca-font-bold\">\n {{ item.title }}\n </div>\n </div>\n }\n\n <!-- Open Hours -->\n @case (eMapDropdownString.OPEN_HOURS) {\n <div class=\"d-flex flex-column gap-2\">\n <div\n class=\"regular-text dark-gray-text ca-font-extra-bold {{\n item.customClassText\n }}\"\n >\n {{ item.title }}\n </div>\n <div class=\"open-hours-grid\">\n @if (\n data[item.field]?.openHoursToday &&\n !isShowAllDaysActive\n ) {\n <div class=\"d-flex flex-column flex-1\">\n <div\n class=\"small-text dark-gray-text ca-font-bold\"\n >\n {{ data[item.field].openHoursToday.status }}\n </div>\n <div\n class=\"regular-text dark-gray-text text-ellipsis\"\n >\n {{ data[item.field].openHoursToday.info }}\n </div>\n </div>\n }\n\n @if (data[item.field]?.openHours?.length) {\n @if (isShowAllDaysActive) {\n @for (\n day of data[item.field].openHours;\n let i = $index;\n track i\n ) {\n <div class=\"d-flex flex-column flex-1\">\n <div\n class=\"small-text dark-gray-text ca-font-bold\"\n >\n {{ day.dayOfWeek }}\n </div>\n <div\n class=\"regular-text dark-gray-text text-ellipsis\"\n >\n {{\n day.startTime +\n ' - ' +\n day.endTime\n }}\n </div>\n </div>\n }\n }\n <div\n class=\"d-flex flex-column flex-1 justify-content-end show-all-days-container\"\n >\n <div\n class=\"d-flex align-items-center gap-1\"\n (click)=\"showAllDaysClick()\"\n >\n <svg-icon\n class=\"d-flex svg-size-14\"\n [src]=\"\n mapDropdownSvgRoutes.accidentCalenderRoute\n \"\n ></svg-icon>\n <div\n class=\"regular-text gray-text cursor-pointer\"\n >\n {{\n isShowAllDaysActive\n ? 'Show today'\n : 'Show all days'\n }}\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Text and Count -->\n @case (eMapDropdownString.TEXT_COUNT) {\n <div\n class=\"d-flex align-items-center gap-1 {{\n item.customClassContainer\n }}\"\n >\n <div class=\"regular-text {{ item.customClassText }}\">\n {{ item.title }}\n </div>\n <div\n class=\"regular-text ca-font-semi-bold {{\n item.customClassText\n }}\"\n >\n {{ data | mapDropdownValue: item }}\n </div>\n </div>\n }\n\n <!-- Subtitle -->\n @case (eMapDropdownString.SUBTITLE) {\n <div\n class=\"regular-text dark-gray-text ca-font-extra-bold {{\n item.customClassText\n }}\"\n >\n {{ item.title }}\n </div>\n }\n\n <!-- Regular Text -->\n @case (eMapDropdownString.TEXT) {\n <div class=\"regular-text black-text {{ item.customClassText }}\">\n {{\n item.isDate\n ? (data[item.field] | date: 'MM/dd/yy hh:mm a')\n : (data | mapDropdownValue: item)\n }}\n </div>\n }\n\n <!-- Small Subtitle -->\n @case (eMapDropdownString.SMALL_SUBTITLE) {\n <div\n class=\"small-text dark-gray-text {{ item.customClassText }}\"\n >\n {{ item.title }}\n </div>\n }\n\n <!-- Date -->\n @case (eMapDropdownString.DATE) {\n <div class=\"regular-text black-text {{ item.customClassText }}\">\n {{ data[item.field] | date }}\n </div>\n }\n\n <!-- Fuel Price Range -->\n @case (eMapDropdownString.FUEL_PRICE_RANGE) {\n @if (fuelPriceRangeData) {\n <div\n class=\"d-flex align-items-center justify-content-between gap-1\"\n >\n <div class=\"d-flex flex-column\">\n <div\n class=\"text-size-14 ca-font-semi-bold\"\n [ngClass]=\"\n fuelPriceRangeData.priceOutDated\n ? 'text-color-muted'\n : 'text-color-black'\n \"\n >\n {{\n fuelPriceRangeData.pricePerGallon\n | formatCurrency\n }}\n </div>\n <div class=\"text-size-11 text-color-muted\">\n {{\n fuelPriceRangeData.dieselLastUsed\n | dateFromStringPipe: 'time-ago'\n }}\n </div>\n </div>\n\n <app-ca-last-fuel-price-progress\n [lastFuelPriceData]=\"fuelPriceRangeData\"\n ></app-ca-last-fuel-price-progress>\n </div>\n }\n }\n\n <!-- Miles Stop Type -->\n @case (eMapDropdownString.STOP_TYPE) {\n <div class=\"regular-text {{ item.customClassText }}\">\n {{ data | mapDropdownValue: item }}\n\n @if (data.businessName) {\n <span\n class=\"text-size-14 ca-font-medium text-color-muted text-uppercase\"\n >- {{ data.businessName }}</span\n >\n }\n </div>\n }\n\n <!-- Travel Time -->\n @case (eMapDropdownString.TRAVEL_TIME) {\n <div class=\"regular-text {{ item.customClassText }}\">\n {{\n {\n days: 0,\n hours: data[item.field],\n minutes: data[item.secondField!],\n seconds: 0,\n } | formatDuration\n }}\n </div>\n }\n }\n }\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}}:host{display:block;height:100%;width:100%}.cluster-marker-container{width:354px;max-height:244px;margin:4px 2px 4px 4px;overflow-y:scroll;cursor:default}.cluster-marker-container::-webkit-scrollbar{width:2px}.cluster-marker-container::-webkit-scrollbar-thumb{background-color:#ccc;border:2px solid #cccccc;border-radius:1px}.cluster-marker-container::-webkit-scrollbar-track{width:2px;background-color:#fff}.cluster-marker-container .cluster-marker-item{max-width:100%;padding:4px;cursor:pointer;border-radius:2px}.cluster-marker-container .cluster-marker-item:hover{background:#eee}.marker-container{width:360px;max-height:214px;padding:8px;transition:max-height .2s ease-in-out;cursor:default}.marker-container.expanded{max-height:396px}.marker-container .heading{max-width:100%;margin-bottom:3px}.marker-container .heading .header-text-container{max-width:calc(100% - 26px)}.marker-container .heading .header-text-container .header-back-button{min-width:18px;min-height:18px;background:#eee;border-radius:1px;cursor:pointer}.marker-container .heading .header-text-container .header-back-button svg-icon svg path{fill:#919191}.marker-container .heading .header-text-container .header{font-family:Montserrat,sans-serif;font-size:16px;line-height:20px;color:#424242}.marker-container .heading .dropdown-icon{min-width:26px;min-height:26px}.marker-container .action .side-space{padding-right:4px}.marker-container .action .side-space .count{font-family:Montserrat,sans-serif;font-size:11px;color:#424242;padding:0 7px;position:relative;left:-1px}.marker-container .action .side-space .grey-color{color:#919191}.marker-container .repair-service-icon svg path{fill:#ccc;fill-opacity:1}.marker-container .repair-service-icon.active svg path{fill:#919191;fill-opacity:1}.marker-container .personal-info-items{font-family:Montserrat,sans-serif}.marker-container .personal-info-items .info{max-width:100%;font-size:14px;line-height:18px;padding:0 5px;color:#2f2f2f;font-family:Montserrat,sans-serif;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.marker-container .working-info-detail{font-family:Montserrat,sans-serif}.marker-container .working-info-detail .working-info-item{font-size:11px;line-height:14px;color:#424242}.marker-container .working-info-detail .working-info-item .working-time{font-size:14px;line-height:18px}.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 .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 .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 .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}.info-divider{margin:8px 0;width:100%;height:1px;background:#dadada;border-radius:2px}.dropdown-arrow{position:absolute;right:6px;bottom:6px}.dropdown-arrow svg{transition:transform .2s ease-in-out;transform:rotate(0)}.dropdown-arrow svg path{transition:fill .2s ease-in-out;fill:#919191}.dropdown-arrow.rotate-arrow svg{transform:rotate(180deg)}.dropdown-arrow.rotate-arrow svg path{fill:#6692f1}.dropdown-arrow:hover{cursor:pointer}.dropdown-arrow:hover svg path{fill:#6692f1}.expanded-info{max-height:0px;overflow:hidden;transition:max-height .2s ease-in-out}.expanded-info.active{max-height:300px}.gap-8{gap:8px}.count-number{padding:0 5px;background:#6c6c6c;border-radius:60px;font-size:11px;line-height:14px;-webkit-user-select:none;user-select:none}.rating-icon svg path{fill:#919191;fill-opacity:1}.rating-icon.active.like-icon svg path{fill:#56b4ac}.rating-icon.active.dislike-icon svg path{fill:#e66767}.text-ellipsis{max-width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.text-ellipsis.two-rows-ellipsis{max-width:90%;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;white-space:initial}.blue-text{color:#6692f1!important}.blue-text::-moz-selection{color:#6692f1;background:#3b73ed33}.blue-text::selection{color:#6692f1;background:#3b73ed33}.red-text{color:#df3c3c!important}.red-text::-moz-selection{color:#df3c3c;background:#df3c3c33}.red-text::selection{color:#df3c3c;background:#df3c3c33}.gray-text{color:#919191!important}.gray-text::-moz-selection{color:#919191;background:#91919133}.gray-text::selection{color:#919191;background:#91919133}.light-gray-text{color:#6c6c6c}.light-gray-text::-moz-selection{color:#6c6c6c;background:#6c6c6c33}.light-gray-text::selection{color:#6c6c6c;background:#6c6c6c33}.dark-gray-text{color:#424242}.dark-gray-text::-moz-selection{color:#424242;background:#42424233}.dark-gray-text::selection{color:#424242;background:#42424233}.black-text{color:#2f2f2f}.black-text::-moz-selection{color:#2f2f2f;background:#2f2f2f33}.black-text::selection{color:#2f2f2f;background:#2f2f2f33}.white-text{color:#fff}.white-text::-moz-selection{color:#fff;background:#fff3}.white-text::selection{color:#fff;background:#fff3}.opacity-40{opacity:.4}.regular-text{font-size:14px;line-height:18px;font-family:Montserrat,sans-serif}.small-text{font-size:11px;line-height:14px;font-family:Montserrat,sans-serif}.open-hours-grid{display:grid;grid-template-columns:50% 50%;grid-row-gap:8px}.cursor-pointer{cursor:pointer}.show-all-days-container{grid-column:2/span 1}\n"] }]
|
|
16401
|
+
], providers: [SvgIconRegistryService], template: "@if (_infoWindowContent?.clusterData) {\n @if (_infoWindowContent?.selectedClusterItemData) {\n <div\n class=\"marker-container relative\"\n [class.expanded]=\"!isHidden\"\n (click)=\"preventEventPropagation($event, true)\"\n (mousewheel)=\"preventEventPropagation($event)\"\n >\n @if (_infoWindowContent?.selectedClusterItemData?.mainContentTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n _infoWindowContent?.selectedClusterItemData?.mainContentTemplate;\n context: {\n data: _infoWindowContent?.selectedClusterItemData\n .data,\n isCluster: true,\n }\n \"\n ></ng-container>\n } @else {\n @for (\n item of _infoWindowContent?.selectedClusterItemData\n .mainContent;\n let i = $index;\n track i\n ) {\n <ng-container\n *ngTemplateOutlet=\"\n dropdownContentTemplate;\n context: {\n content: item,\n data: _infoWindowContent\n ?.selectedClusterItemData.data,\n isCluster: true,\n }\n \"\n ></ng-container>\n }\n }\n\n <div class=\"expanded-info\" [class.active]=\"!isHidden\">\n @if (_infoWindowContent?.selectedClusterItemData?.expandedContentTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n _infoWindowContent?.selectedClusterItemData?.expandedContentTemplate;\n context: {\n data: _infoWindowContent\n ?.selectedClusterItemData.data,\n }\n \"\n ></ng-container>\n } @else {\n @for (\n item of _infoWindowContent?.selectedClusterItemData\n .expandedContent;\n let i = $index;\n track i\n ) {\n <ng-container\n *ngTemplateOutlet=\"\n dropdownContentTemplate;\n context: {\n content: item,\n data: _infoWindowContent\n ?.selectedClusterItemData.data,\n }\n \"\n ></ng-container>\n }\n }\n </div>\n\n @if (\n _infoWindowContent?.selectedClusterItemData?.expandedContentTemplate ||\n _infoWindowContent?.expandedContentTemplate ||\n _infoWindowContent?.expandedContent?.length\n ) {\n <div\n class=\"dropdown-arrow align-self-end\"\n [class.rotate-arrow]=\"!isHidden\"\n >\n <svg-icon\n [src]=\"mapDropdownSvgRoutes.cornerDownArrowRoute\"\n (click)=\"showHiddenData($event)\"\n ></svg-icon>\n </div>\n }\n </div>\n } @else {\n <div\n class=\"cluster-marker-container d-flex flex-column gap-1\"\n (click)=\"preventEventPropagation($event, true)\"\n (mousewheel)=\"onClusterListScroll($event)\"\n >\n @for (\n item of _infoWindowContent?.clusterData;\n let i = $index;\n track i\n ) {\n <ng-container\n *ngTemplateOutlet=\"\n clusterContentTemplate;\n context: {\n content: item,\n }\n \"\n ></ng-container>\n }\n </div>\n }\n} @else {\n <div\n class=\"marker-container relative\"\n [class.expanded]=\"!isHidden || _infoWindowContent?.isAlwaysExpanded\"\n (click)=\"preventEventPropagation($event, true)\"\n (mousewheel)=\"preventEventPropagation($event)\"\n >\n @if (_infoWindowContent?.mainContentTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n _infoWindowContent!.mainContentTemplate!;\n context: {\n data: _markerData,\n }\n \"\n ></ng-container>\n } @else {\n @for (\n item of _infoWindowContent?.mainContent;\n let i = $index;\n track i\n ) {\n <ng-container\n *ngTemplateOutlet=\"\n dropdownContentTemplate;\n context: {\n content: item,\n data: _markerData,\n }\n \"\n ></ng-container>\n }\n }\n\n <div class=\"expanded-info\" [class.active]=\"!isHidden\">\n @if (_infoWindowContent?.expandedContentTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n _infoWindowContent!.expandedContentTemplate!;\n context: {\n data: _markerData,\n }\n \"\n ></ng-container>\n } @else {\n @for (\n item of _infoWindowContent?.expandedContent;\n let i = $index;\n track i\n ) {\n <ng-container\n *ngTemplateOutlet=\"\n dropdownContentTemplate;\n context: {\n content: item,\n data: _markerData,\n }\n \"\n ></ng-container>\n }\n }\n </div>\n\n @if (\n _infoWindowContent?.expandedContentTemplate ||\n _infoWindowContent?.expandedContent?.length\n ) {\n <div\n class=\"dropdown-arrow align-self-end\"\n [class.rotate-arrow]=\"!isHidden\"\n >\n <svg-icon\n [src]=\"mapDropdownSvgRoutes.cornerDownArrowRoute\"\n (click)=\"showHiddenData($event)\"\n ></svg-icon>\n </div>\n }\n </div>\n}\n\n<ng-template #clusterContentTemplate let-content=\"content\">\n @let item = content | mapDropdownClusterContentType;\n @if (item) {\n <div\n class=\"d-flex align-items-center justify-content-between cluster-marker-item\"\n (click)=\"clusterItemClick(item)\"\n >\n <div\n class=\"d-flex align-items-center gap-1\"\n [ngStyle]=\"{\n 'max-width': item.favourite ? 'calc(100% - 18px)' : '100%',\n }\"\n >\n @if (item.isClosed) {\n <svg-icon\n class=\"d-flex svg-size-18\"\n [src]=\"mapDropdownSvgRoutes.permanentlyClosedRoute\"\n ></svg-icon>\n }\n <div\n class=\"regular-text dark-gray-text text-uppercase text-ellipsis\"\n >\n {{ item.name }}\n </div>\n </div>\n\n @if (item.favourite) {\n <svg-icon\n class=\"d-flex svg-size-18\"\n [src]=\"mapDropdownSvgRoutes.favoriteRoute\"\n ></svg-icon>\n }\n </div>\n }\n</ng-template>\n\n<ng-template #dropdownContentTemplate let-content=\"content\" let-data=\"data\">\n @let item = content | mapDropdownContentType;\n @if (item) {\n @if (!item.sideBySideInfo) {\n <ng-container\n *ngTemplateOutlet=\"\n dropdownContentItemTemplates;\n context: {\n content: item,\n data: data,\n }\n \"\n ></ng-container>\n } @else {\n <!-- Side by Side Data -->\n <div class=\"d-flex align-items-center\">\n <!-- Left Side -->\n @if (item.sideBySideInfo.leftSide) {\n <div class=\"flex-1\">\n <ng-container\n *ngTemplateOutlet=\"\n dropdownContentItemTemplates;\n context: {\n content: item.sideBySideInfo?.leftSide,\n data: data,\n }\n \"\n >\n </ng-container>\n </div>\n }\n\n <!-- Right Side -->\n @if (item.sideBySideInfo.rightSide) {\n <div class=\"flex-1\">\n <ng-container\n *ngTemplateOutlet=\"\n dropdownContentItemTemplates;\n context: {\n content: item.sideBySideInfo?.rightSide,\n data: data,\n }\n \"\n >\n </ng-container>\n </div>\n }\n </div>\n }\n }\n</ng-template>\n\n<ng-template\n #dropdownContentItemTemplates\n let-content=\"content\"\n let-data=\"data\"\n>\n @let item = content | mapDropdownContentType;\n @if (item) {\n @switch (item?.template) {\n @case (eMapDropdownString.HEADER_TITLE) {\n <div\n class=\"heading d-flex justify-content-between align-items-center {{\n item.customClassContainer\n }}\"\n >\n <div\n class=\"header-text-container d-flex align-items-center gap-1 w-100\"\n >\n @if (item.hasBackButton) {\n <div\n class=\"header-back-button d-flex align-items-center justify-content-center\"\n (click)=\"backButtonClick($event)\"\n >\n <svg-icon\n class=\"d-flex svg-size-14\"\n [src]=\"mapDropdownSvgRoutes.backButtonRoute\"\n >\n </svg-icon>\n </div>\n }\n\n <span\n class=\"header ca-font-extra-bold dark-gray-text {{\n item.customClassText\n }}\"\n >\n {{ data | mapDropdownValue: item }}\n </span>\n </div>\n </div>\n }\n\n <!-- Rating Review -->\n @case (eMapDropdownString.RATING_REVIEW) {\n <div\n class=\"d-flex justify-content-start align-items-center align-content-center gap-3 {{\n item.customClassContainer\n }}\"\n >\n <div\n class=\"d-flex justify-content-start align-items-center gap-2\"\n [class.opacity-40]=\"!data[item.field].likeCount\"\n >\n <svg-icon\n class=\"rating-icon like-icon d-flex svg-size-14\"\n [class.active]=\"data[item.field].hasLiked\"\n [src]=\"mapDropdownSvgRoutes.likeRoute\"\n ></svg-icon>\n <span\n class=\"small-text dark-gray-text ca-font-semi-bold user-select-none\"\n >{{ data[item.field].likeCount }}\n </span>\n </div>\n <div\n class=\"d-flex justify-content-start align-items-center gap-2\"\n [class.opacity-40]=\"!data[item.field].dislikeCount\"\n >\n <svg-icon\n class=\"rating-icon dislike-icon d-flex svg-size-14\"\n [class.active]=\"data[item.field].hasDislike\"\n [src]=\"mapDropdownSvgRoutes.dislikeRoute\"\n ></svg-icon>\n <span\n class=\"small-text dark-gray-text ca-font-semi-bold user-select-none\"\n >{{ data[item.field].dislikeCount }}\n </span>\n </div>\n <div\n class=\"d-flex justify-content-start align-items-center gap-2\"\n [class.opacity-40]=\"!data[item.field].reviewCount\"\n >\n <svg-icon\n class=\"rating-icon review-icon d-flex svg-size-14\"\n [src]=\"mapDropdownSvgRoutes.reviewRoute\"\n ></svg-icon>\n <span\n class=\"small-text dark-gray-text ca-font-semi-bold user-select-none\"\n >{{ data[item.field].reviewCount ?? 0 }}\n </span>\n </div>\n </div>\n }\n\n <!-- Border Divider -->\n @case (eMapDropdownString.DIVIDER) {\n <div class=\"info-divider\"></div>\n }\n\n <!-- Repair Shop Services -->\n @case (eMapDropdownString.REPAIR_SHOP_SERVICES) {\n <div\n class=\"d-flex align-items-center justify-content-between {{\n item.customClassContainer\n }}\"\n >\n @for (\n service of data[item.field];\n let i = $index;\n track i\n ) {\n <div\n class=\"d-flex align-items-center justify-content-center\"\n ngbTooltip\n [tooltipBackground]=\"'#424242'\"\n [mainCaTooltip]=\"service.serviceType.name\"\n position=\"bottom\"\n >\n <svg-icon\n class=\"repair-service-icon svg-size-18\"\n [class.active]=\"service.active\"\n [src]=\"\n service.logoName\n | caSvg: 'common' : 'repair-services'\n \"\n ></svg-icon>\n </div>\n }\n </div>\n }\n\n <!-- Icon and Text -->\n @case (eMapDropdownString.ICON_TEXT) {\n <div\n class=\"d-flex align-items-start gap-1 {{\n item.customClassContainer\n }}\"\n >\n @if (item.url) {\n <div\n ngbTooltip\n [tooltipBackground]=\"'#424242'\"\n [mainCaTooltip]=\"item.iconTooltipText\"\n position=\"bottom\"\n [disableTooltip]=\"!item.iconTooltipText\"\n >\n <svg-icon\n class=\"d-flex align-items-center justify-content-center svg-size-18\"\n [src]=\"item.url\"\n ></svg-icon>\n </div>\n }\n\n <span\n class=\"regular-text dark-gray-text {{\n item.customClassText\n }}\"\n >\n {{\n item.isDate\n ? (data[item.field] | date: 'MM/dd/yy')\n : (data | mapDropdownValue: item)\n }}\n </span>\n </div>\n }\n\n <!-- Title -->\n @case (eMapDropdownString.TITLE) {\n <div\n class=\"regular-text dark-gray-text ca-font-extra-bold {{\n item.customClassText\n }}\"\n >\n {{ data | mapDropdownValue: item }}\n </div>\n }\n\n <!-- Title and Count -->\n @case (eMapDropdownString.TITLE_COUNT) {\n <div\n class=\"d-flex align-items-center gap-1 {{\n item.customClassContainer\n }}\"\n >\n <div class=\"regular-text dark-gray-text ca-font-extra-bold\">\n {{ item.title }}\n </div>\n <div\n class=\"count-number white-text d-flex align-items-center justify-content-center ca-font-bold\"\n >\n {{\n item.isDuration\n ? (data[item.field] | formatDuration)\n : (data | mapDropdownValue: item)\n }}\n </div>\n </div>\n }\n\n <!-- Money Text -->\n @case (eMapDropdownString.MONEY_TEXT) {\n <div\n class=\"d-flex align-items-center gap-1 {{\n item.customClassContainer\n }}\"\n >\n <div class=\"regular-text ca-font-bold blue-text\">\n {{\n data?.[item.field] !== ''\n ? (data[item.field] | formatCurrency)\n : '$0'\n }}\n </div>\n <div class=\"regular-text light-gray-text ca-font-bold\">\n {{ item.title }}\n </div>\n </div>\n }\n\n <!-- Open Hours -->\n @case (eMapDropdownString.OPEN_HOURS) {\n <div class=\"d-flex flex-column gap-2\">\n <div\n class=\"regular-text dark-gray-text ca-font-extra-bold {{\n item.customClassText\n }}\"\n >\n {{ item.title }}\n </div>\n <div class=\"open-hours-grid\">\n @if (\n data[item.field]?.openHoursToday &&\n !isShowAllDaysActive\n ) {\n <div class=\"d-flex flex-column flex-1\">\n <div\n class=\"small-text dark-gray-text ca-font-bold\"\n >\n {{ data[item.field].openHoursToday.status }}\n </div>\n <div\n class=\"regular-text dark-gray-text text-ellipsis\"\n >\n {{ data[item.field].openHoursToday.info }}\n </div>\n </div>\n }\n\n @if (data[item.field]?.openHours?.length) {\n @if (isShowAllDaysActive) {\n @for (\n day of data[item.field].openHours;\n let i = $index;\n track i\n ) {\n <div class=\"d-flex flex-column flex-1\">\n <div\n class=\"small-text dark-gray-text ca-font-bold\"\n >\n {{ day.dayOfWeek }}\n </div>\n <div\n class=\"regular-text dark-gray-text text-ellipsis\"\n >\n {{\n day.startTime +\n ' - ' +\n day.endTime\n }}\n </div>\n </div>\n }\n }\n <div\n class=\"d-flex flex-column flex-1 justify-content-end show-all-days-container\"\n >\n <div\n class=\"d-flex align-items-center gap-1\"\n (click)=\"showAllDaysClick()\"\n >\n <svg-icon\n class=\"d-flex svg-size-14\"\n [src]=\"\n mapDropdownSvgRoutes.accidentCalenderRoute\n \"\n ></svg-icon>\n <div\n class=\"regular-text gray-text cursor-pointer\"\n >\n {{\n isShowAllDaysActive\n ? 'Show today'\n : 'Show all days'\n }}\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Text and Count -->\n @case (eMapDropdownString.TEXT_COUNT) {\n <div\n class=\"d-flex align-items-center gap-1 {{\n item.customClassContainer\n }}\"\n >\n <div class=\"regular-text {{ item.customClassText }}\">\n {{ item.title }}\n </div>\n <div\n class=\"regular-text ca-font-semi-bold {{\n item.customClassText\n }}\"\n >\n {{ data | mapDropdownValue: item }}\n </div>\n </div>\n }\n\n <!-- Subtitle -->\n @case (eMapDropdownString.SUBTITLE) {\n <div\n class=\"regular-text dark-gray-text ca-font-extra-bold {{\n item.customClassText\n }}\"\n >\n {{ item.title }}\n </div>\n }\n\n <!-- Regular Text -->\n @case (eMapDropdownString.TEXT) {\n <div class=\"regular-text black-text {{ item.customClassText }}\">\n {{\n item.isDate\n ? (data[item.field] | date: 'MM/dd/yy hh:mm a')\n : (data | mapDropdownValue: item)\n }}\n </div>\n }\n\n <!-- Small Subtitle -->\n @case (eMapDropdownString.SMALL_SUBTITLE) {\n <div\n class=\"small-text dark-gray-text {{ item.customClassText }}\"\n >\n {{ item.title }}\n </div>\n }\n\n <!-- Date -->\n @case (eMapDropdownString.DATE) {\n <div class=\"regular-text black-text {{ item.customClassText }}\">\n {{ data[item.field] | date }}\n </div>\n }\n\n <!-- Fuel Price Range -->\n @case (eMapDropdownString.FUEL_PRICE_RANGE) {\n @if (fuelPriceRangeData) {\n <div\n class=\"d-flex align-items-center justify-content-between gap-1\"\n >\n <div class=\"d-flex flex-column\">\n <div\n class=\"text-size-14 ca-font-semi-bold\"\n [ngClass]=\"\n fuelPriceRangeData.priceOutDated\n ? 'text-color-muted'\n : 'text-color-black'\n \"\n >\n {{\n fuelPriceRangeData.pricePerGallon\n | formatCurrency\n }}\n </div>\n <div class=\"text-size-11 text-color-muted\">\n {{\n fuelPriceRangeData.dieselLastUsed\n | dateFromStringPipe: 'time-ago'\n }}\n </div>\n </div>\n\n <app-ca-last-fuel-price-progress\n [lastFuelPriceData]=\"fuelPriceRangeData\"\n ></app-ca-last-fuel-price-progress>\n </div>\n }\n }\n\n <!-- Miles Stop Type -->\n @case (eMapDropdownString.STOP_TYPE) {\n <div class=\"regular-text {{ item.customClassText }}\">\n {{ data | mapDropdownValue: item }}\n\n @if (data.businessName) {\n <span\n class=\"text-size-14 ca-font-medium text-color-muted text-uppercase\"\n >- {{ data.businessName }}</span\n >\n }\n </div>\n }\n\n <!-- Travel Time -->\n @case (eMapDropdownString.TRAVEL_TIME) {\n <div class=\"regular-text {{ item.customClassText }}\">\n {{\n {\n days: 0,\n hours: data[item.field],\n minutes: data[item.secondField!],\n seconds: 0,\n } | formatDuration\n }}\n </div>\n }\n }\n }\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}}.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}:host{display:block;height:100%;width:100%}.cluster-marker-container{width:354px;max-height:244px;margin:4px 2px 4px 4px;overflow-y:scroll;cursor:default}.cluster-marker-container::-webkit-scrollbar{width:2px}.cluster-marker-container::-webkit-scrollbar-thumb{background-color:#ccc;border:2px solid #cccccc;border-radius:1px}.cluster-marker-container::-webkit-scrollbar-track{width:2px;background-color:#fff}.cluster-marker-container .cluster-marker-item{max-width:100%;padding:4px;cursor:pointer;border-radius:2px}.cluster-marker-container .cluster-marker-item:hover{background:#eee}.marker-container{width:360px;max-height:214px;padding:8px;transition:max-height .2s ease-in-out;cursor:default}.marker-container.expanded{max-height:396px}.marker-container .heading{max-width:100%;margin-bottom:3px}.marker-container .heading .header-text-container{max-width:calc(100% - 26px)}.marker-container .heading .header-text-container .header-back-button{min-width:18px;min-height:18px;background:#eee;border-radius:1px;cursor:pointer}.marker-container .heading .header-text-container .header-back-button svg-icon svg path{fill:#919191}.marker-container .heading .header-text-container .header{font-family:Montserrat,sans-serif;font-size:16px;line-height:20px;color:#424242}.marker-container .heading .dropdown-icon{min-width:26px;min-height:26px}.marker-container .action .side-space{padding-right:4px}.marker-container .action .side-space .count{font-family:Montserrat,sans-serif;font-size:11px;color:#424242;padding:0 7px;position:relative;left:-1px}.marker-container .action .side-space .grey-color{color:#919191}.marker-container .repair-service-icon svg path{fill:#ccc;fill-opacity:1}.marker-container .repair-service-icon.active svg path{fill:#919191;fill-opacity:1}.marker-container .personal-info-items{font-family:Montserrat,sans-serif}.marker-container .personal-info-items .info{max-width:100%;font-size:14px;line-height:18px;padding:0 5px;color:#2f2f2f;font-family:Montserrat,sans-serif;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.marker-container .working-info-detail{font-family:Montserrat,sans-serif}.marker-container .working-info-detail .working-info-item{font-size:11px;line-height:14px;color:#424242}.marker-container .working-info-detail .working-info-item .working-time{font-size:14px;line-height:18px}.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 .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 .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 .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}.info-divider{margin:8px 0;width:100%;height:1px;background:#dadada;border-radius:2px}.dropdown-arrow{position:absolute;right:6px;bottom:6px}.dropdown-arrow svg{transition:transform .2s ease-in-out;transform:rotate(0)}.dropdown-arrow svg path{transition:fill .2s ease-in-out;fill:#919191}.dropdown-arrow.rotate-arrow svg{transform:rotate(180deg)}.dropdown-arrow.rotate-arrow svg path{fill:#6692f1}.dropdown-arrow:hover{cursor:pointer}.dropdown-arrow:hover svg path{fill:#6692f1}.expanded-info{max-height:0px;overflow:hidden;transition:max-height .2s ease-in-out}.expanded-info.active{max-height:300px}.gap-8{gap:8px}.count-number{padding:0 5px;background:#6c6c6c;border-radius:60px;font-size:11px;line-height:14px;-webkit-user-select:none;user-select:none}.rating-icon svg path{fill:#919191;fill-opacity:1}.rating-icon.active.like-icon svg path{fill:#56b4ac}.rating-icon.active.dislike-icon svg path{fill:#e66767}.text-ellipsis{max-width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.text-ellipsis.two-rows-ellipsis{max-width:90%;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;white-space:initial}.blue-text{color:#6692f1!important}.blue-text::-moz-selection{color:#6692f1;background:#3b73ed33}.blue-text::selection{color:#6692f1;background:#3b73ed33}.red-text{color:#df3c3c!important}.red-text::-moz-selection{color:#df3c3c;background:#df3c3c33}.red-text::selection{color:#df3c3c;background:#df3c3c33}.gray-text{color:#919191!important}.gray-text::-moz-selection{color:#919191;background:#91919133}.gray-text::selection{color:#919191;background:#91919133}.light-gray-text{color:#6c6c6c}.light-gray-text::-moz-selection{color:#6c6c6c;background:#6c6c6c33}.light-gray-text::selection{color:#6c6c6c;background:#6c6c6c33}.dark-gray-text{color:#424242}.dark-gray-text::-moz-selection{color:#424242;background:#42424233}.dark-gray-text::selection{color:#424242;background:#42424233}.black-text{color:#2f2f2f}.black-text::-moz-selection{color:#2f2f2f;background:#2f2f2f33}.black-text::selection{color:#2f2f2f;background:#2f2f2f33}.white-text{color:#fff}.white-text::-moz-selection{color:#fff;background:#fff3}.white-text::selection{color:#fff;background:#fff3}.opacity-40{opacity:.4}.regular-text{font-size:14px;line-height:18px;font-family:Montserrat,sans-serif}.small-text{font-size:11px;line-height:14px;font-family:Montserrat,sans-serif}.open-hours-grid{display:grid;grid-template-columns:50% 50%;grid-row-gap:8px}.cursor-pointer{cursor:pointer}.show-all-days-container{grid-column:2/span 1}\n"] }]
|
|
16402
16402
|
}], propDecorators: { infoWindowContent: [{
|
|
16403
16403
|
type: Input
|
|
16404
16404
|
}], markerData: [{
|
|
@@ -18825,7 +18825,7 @@ class CaNoteContainerComponent {
|
|
|
18825
18825
|
this.destroy$.complete();
|
|
18826
18826
|
}
|
|
18827
18827
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CaNoteContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18828
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaNoteContainerComponent, isStandalone: true, selector: "app-ca-note-container", inputs: { value: "value", range: "range", selectionTaken: "selectionTaken", isExpanded: "isExpanded", isParking: "isParking", isPopoverNote: "isPopoverNote", isVisibleArrow: "isVisibleArrow", type: "type", selectedEditor: "selectedEditor" }, outputs: { stopBlurRemoveTimeout: "stopBlurRemoveTimeout" }, ngImport: i0, template: "<div\n [class.active]=\"isExpanded\"\n [class.parking_editor_menu]=\"isParking\"\n [class.opened_parking_editor.justify-content-end]=\"\n isParking && isShowColorPattern\n \"\n [class.dark]=\"type === 'dark'\"\n class=\"editor_menu d-flex align-items-center\"\n>\n @if (!isParking || (isParking && !isShowColorPattern)) {\n <div class=\"font_editor d-flex\" [class.parking_font_editor]=\"isParking\">\n <div\n (click)=\"executeEditor('bold')\"\n [class.active]=\"activeOptions.bold\"\n [tooltipBackground]=\"type === 'dark' ? '#2F2F2F' : '#6C6C6C'\"\n ngbTooltip\n [mainCaTooltip]=\"'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 [mainCaTooltip]=\"'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 [mainCaTooltip]=\"'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]=\"isShowColorPattern\"\n [class.parking_tooltip.d-flex.justify-content-end]=\"\n isParking && isShowColorPattern\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]=\"isPopoverNote\"\n [class.active]=\"isShowColorPattern\"\n >\n <div\n class=\"colors_patter d-flex align-items-center\"\n id=\"colors_patter\"\n [class.closed_pattern]=\"!isClosedPattern\"\n [class.input_note.flex-reverse]=\"!isPopoverNote\"\n >\n @for (\n paternCol of containerColors;\n let indx = $index;\n track indx\n ) {\n <div\n (click)=\"\n executeEditor('foreColor', paternCol.color, indx)\n \"\n [style.backgroundColor]=\"paternCol.color\"\n [class.hide_elements]=\"indx && !isShowColorPattern\"\n [tooltipBackground]=\"\n indx && !isShowColorPattern\n ? ''\n : type === 'dark'\n ? '#2F2F2F'\n : '#6C6C6C'\n \"\n ngbTooltip\n [mainCaTooltip]=\"\n indx === 0 && !isShowColorPattern\n ? 'Color Picker'\n : indx && !isShowColorPattern\n ? ''\n : !indx && isShowColorPattern\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]=\"isPopoverNote\"\n [ngStyle]=\"{\n opacity: !isShowColorPattern && indx ? 0 : 1,\n }\"\n (mouseenter)=\"\n hoveringArrow(!!isShowColorPattern && !indx)\n \"\n (mouseleave)=\"hoveringArrow(false)\"\n >\n @if (!indx) {\n <div\n class=\"color_picker_arrow d-flex\"\n [class.flip_arrow]=\"\n (!isPopoverNote && isShowColorPattern) ||\n (isPopoverNote && !isShowColorPattern)\n \"\n [class.regular_icon]=\"\n !isPopoverNote &&\n isShowColorPattern &&\n !isHoveringArrowPicker\n \"\n [class.active]=\"isShowColorPattern\"\n [class.hovering_picker]=\"\n !isHoveringArrowPicker && isShowColorPattern\n \"\n >\n <svg-icon\n [src]=\"\n !isHoveringArrowPicker &&\n isShowColorPattern\n ? getSvgPath('checkRoute')\n : getSvgPath('arrowRoute')\n \"\n ></svg-icon>\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n @if (!isParking && !isPopoverNote && isVisibleArrow) {\n <div class=\"note_border_line\" [class.dark]=\"type === 'dark'\"></div>\n }\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 .3s ease-in-out,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:#fff!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:1px;margin:0 4px;background-color:#dadada;border-radius:1px}.editor_menu .note_border_line.dark{background-color:#424242}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
18828
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaNoteContainerComponent, isStandalone: true, selector: "app-ca-note-container", inputs: { value: "value", range: "range", selectionTaken: "selectionTaken", isExpanded: "isExpanded", isParking: "isParking", isPopoverNote: "isPopoverNote", isVisibleArrow: "isVisibleArrow", type: "type", selectedEditor: "selectedEditor" }, outputs: { stopBlurRemoveTimeout: "stopBlurRemoveTimeout" }, ngImport: i0, template: "<div\n [class.active]=\"isExpanded\"\n [class.parking_editor_menu]=\"isParking\"\n [class.opened_parking_editor.justify-content-end]=\"\n isParking && isShowColorPattern\n \"\n [class.dark]=\"type === 'dark'\"\n class=\"editor_menu d-flex align-items-center\"\n>\n @if (!isParking || (isParking && !isShowColorPattern)) {\n <div class=\"font_editor d-flex\" [class.parking_font_editor]=\"isParking\">\n <div\n (click)=\"executeEditor('bold')\"\n [class.active]=\"activeOptions.bold\"\n [tooltipBackground]=\"type === 'dark' ? '#2F2F2F' : '#6C6C6C'\"\n ngbTooltip\n [mainCaTooltip]=\"'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 [mainCaTooltip]=\"'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 [mainCaTooltip]=\"'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]=\"isShowColorPattern\"\n [class.parking_tooltip.d-flex.justify-content-end]=\"\n isParking && isShowColorPattern\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]=\"isPopoverNote\"\n [class.active]=\"isShowColorPattern\"\n >\n <div\n class=\"colors_patter d-flex align-items-center\"\n id=\"colors_patter\"\n [class.closed_pattern]=\"!isClosedPattern\"\n [class.input_note.flex-reverse]=\"!isPopoverNote\"\n >\n @for (\n paternCol of containerColors;\n let indx = $index;\n track indx\n ) {\n <div\n (click)=\"\n executeEditor('foreColor', paternCol.color, indx)\n \"\n [style.backgroundColor]=\"paternCol.color\"\n [class.hide_elements]=\"indx && !isShowColorPattern\"\n [tooltipBackground]=\"\n indx && !isShowColorPattern\n ? ''\n : type === 'dark'\n ? '#2F2F2F'\n : '#6C6C6C'\n \"\n ngbTooltip\n [mainCaTooltip]=\"\n indx === 0 && !isShowColorPattern\n ? 'Color Picker'\n : indx && !isShowColorPattern\n ? ''\n : !indx && isShowColorPattern\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]=\"isPopoverNote\"\n [ngStyle]=\"{\n opacity: !isShowColorPattern && indx ? 0 : 1,\n }\"\n (mouseenter)=\"\n hoveringArrow(!!isShowColorPattern && !indx)\n \"\n (mouseleave)=\"hoveringArrow(false)\"\n >\n @if (!indx) {\n <div\n class=\"color_picker_arrow d-flex\"\n [class.flip_arrow]=\"\n (!isPopoverNote && isShowColorPattern) ||\n (isPopoverNote && !isShowColorPattern)\n \"\n [class.regular_icon]=\"\n !isPopoverNote &&\n isShowColorPattern &&\n !isHoveringArrowPicker\n \"\n [class.active]=\"isShowColorPattern\"\n [class.hovering_picker]=\"\n !isHoveringArrowPicker && isShowColorPattern\n \"\n >\n <svg-icon\n [src]=\"\n !isHoveringArrowPicker &&\n isShowColorPattern\n ? getSvgPath('checkRoute')\n : getSvgPath('arrowRoute')\n \"\n ></svg-icon>\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n @if (!isParking && !isPopoverNote && isVisibleArrow) {\n <div class=\"note_border_line\" [class.dark]=\"type === 'dark'\"></div>\n }\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}}.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}.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 .3s ease-in-out,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:#fff!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:1px;margin:0 4px;background-color:#dadada;border-radius:1px}.editor_menu .note_border_line.dark{background-color:#424242}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
18829
18829
|
// Module
|
|
18830
18830
|
CommonModule }, { 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: i3.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:
|
|
18831
18831
|
// Component
|
|
@@ -18840,7 +18840,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
18840
18840
|
NgbModule,
|
|
18841
18841
|
// Component
|
|
18842
18842
|
CaAppTooltipV2Component,
|
|
18843
|
-
], animations: [pickupAnimation], template: "<div\n [class.active]=\"isExpanded\"\n [class.parking_editor_menu]=\"isParking\"\n [class.opened_parking_editor.justify-content-end]=\"\n isParking && isShowColorPattern\n \"\n [class.dark]=\"type === 'dark'\"\n class=\"editor_menu d-flex align-items-center\"\n>\n @if (!isParking || (isParking && !isShowColorPattern)) {\n <div class=\"font_editor d-flex\" [class.parking_font_editor]=\"isParking\">\n <div\n (click)=\"executeEditor('bold')\"\n [class.active]=\"activeOptions.bold\"\n [tooltipBackground]=\"type === 'dark' ? '#2F2F2F' : '#6C6C6C'\"\n ngbTooltip\n [mainCaTooltip]=\"'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 [mainCaTooltip]=\"'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 [mainCaTooltip]=\"'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]=\"isShowColorPattern\"\n [class.parking_tooltip.d-flex.justify-content-end]=\"\n isParking && isShowColorPattern\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]=\"isPopoverNote\"\n [class.active]=\"isShowColorPattern\"\n >\n <div\n class=\"colors_patter d-flex align-items-center\"\n id=\"colors_patter\"\n [class.closed_pattern]=\"!isClosedPattern\"\n [class.input_note.flex-reverse]=\"!isPopoverNote\"\n >\n @for (\n paternCol of containerColors;\n let indx = $index;\n track indx\n ) {\n <div\n (click)=\"\n executeEditor('foreColor', paternCol.color, indx)\n \"\n [style.backgroundColor]=\"paternCol.color\"\n [class.hide_elements]=\"indx && !isShowColorPattern\"\n [tooltipBackground]=\"\n indx && !isShowColorPattern\n ? ''\n : type === 'dark'\n ? '#2F2F2F'\n : '#6C6C6C'\n \"\n ngbTooltip\n [mainCaTooltip]=\"\n indx === 0 && !isShowColorPattern\n ? 'Color Picker'\n : indx && !isShowColorPattern\n ? ''\n : !indx && isShowColorPattern\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]=\"isPopoverNote\"\n [ngStyle]=\"{\n opacity: !isShowColorPattern && indx ? 0 : 1,\n }\"\n (mouseenter)=\"\n hoveringArrow(!!isShowColorPattern && !indx)\n \"\n (mouseleave)=\"hoveringArrow(false)\"\n >\n @if (!indx) {\n <div\n class=\"color_picker_arrow d-flex\"\n [class.flip_arrow]=\"\n (!isPopoverNote && isShowColorPattern) ||\n (isPopoverNote && !isShowColorPattern)\n \"\n [class.regular_icon]=\"\n !isPopoverNote &&\n isShowColorPattern &&\n !isHoveringArrowPicker\n \"\n [class.active]=\"isShowColorPattern\"\n [class.hovering_picker]=\"\n !isHoveringArrowPicker && isShowColorPattern\n \"\n >\n <svg-icon\n [src]=\"\n !isHoveringArrowPicker &&\n isShowColorPattern\n ? getSvgPath('checkRoute')\n : getSvgPath('arrowRoute')\n \"\n ></svg-icon>\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n @if (!isParking && !isPopoverNote && isVisibleArrow) {\n <div class=\"note_border_line\" [class.dark]=\"type === 'dark'\"></div>\n }\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 .3s ease-in-out,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:#fff!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:1px;margin:0 4px;background-color:#dadada;border-radius:1px}.editor_menu .note_border_line.dark{background-color:#424242}\n"] }]
|
|
18843
|
+
], animations: [pickupAnimation], template: "<div\n [class.active]=\"isExpanded\"\n [class.parking_editor_menu]=\"isParking\"\n [class.opened_parking_editor.justify-content-end]=\"\n isParking && isShowColorPattern\n \"\n [class.dark]=\"type === 'dark'\"\n class=\"editor_menu d-flex align-items-center\"\n>\n @if (!isParking || (isParking && !isShowColorPattern)) {\n <div class=\"font_editor d-flex\" [class.parking_font_editor]=\"isParking\">\n <div\n (click)=\"executeEditor('bold')\"\n [class.active]=\"activeOptions.bold\"\n [tooltipBackground]=\"type === 'dark' ? '#2F2F2F' : '#6C6C6C'\"\n ngbTooltip\n [mainCaTooltip]=\"'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 [mainCaTooltip]=\"'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 [mainCaTooltip]=\"'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]=\"isShowColorPattern\"\n [class.parking_tooltip.d-flex.justify-content-end]=\"\n isParking && isShowColorPattern\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]=\"isPopoverNote\"\n [class.active]=\"isShowColorPattern\"\n >\n <div\n class=\"colors_patter d-flex align-items-center\"\n id=\"colors_patter\"\n [class.closed_pattern]=\"!isClosedPattern\"\n [class.input_note.flex-reverse]=\"!isPopoverNote\"\n >\n @for (\n paternCol of containerColors;\n let indx = $index;\n track indx\n ) {\n <div\n (click)=\"\n executeEditor('foreColor', paternCol.color, indx)\n \"\n [style.backgroundColor]=\"paternCol.color\"\n [class.hide_elements]=\"indx && !isShowColorPattern\"\n [tooltipBackground]=\"\n indx && !isShowColorPattern\n ? ''\n : type === 'dark'\n ? '#2F2F2F'\n : '#6C6C6C'\n \"\n ngbTooltip\n [mainCaTooltip]=\"\n indx === 0 && !isShowColorPattern\n ? 'Color Picker'\n : indx && !isShowColorPattern\n ? ''\n : !indx && isShowColorPattern\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]=\"isPopoverNote\"\n [ngStyle]=\"{\n opacity: !isShowColorPattern && indx ? 0 : 1,\n }\"\n (mouseenter)=\"\n hoveringArrow(!!isShowColorPattern && !indx)\n \"\n (mouseleave)=\"hoveringArrow(false)\"\n >\n @if (!indx) {\n <div\n class=\"color_picker_arrow d-flex\"\n [class.flip_arrow]=\"\n (!isPopoverNote && isShowColorPattern) ||\n (isPopoverNote && !isShowColorPattern)\n \"\n [class.regular_icon]=\"\n !isPopoverNote &&\n isShowColorPattern &&\n !isHoveringArrowPicker\n \"\n [class.active]=\"isShowColorPattern\"\n [class.hovering_picker]=\"\n !isHoveringArrowPicker && isShowColorPattern\n \"\n >\n <svg-icon\n [src]=\"\n !isHoveringArrowPicker &&\n isShowColorPattern\n ? getSvgPath('checkRoute')\n : getSvgPath('arrowRoute')\n \"\n ></svg-icon>\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n @if (!isParking && !isPopoverNote && isVisibleArrow) {\n <div class=\"note_border_line\" [class.dark]=\"type === 'dark'\"></div>\n }\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}}.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}.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 .3s ease-in-out,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:#fff!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:1px;margin:0 4px;background-color:#dadada;border-radius:1px}.editor_menu .note_border_line.dark{background-color:#424242}\n"] }]
|
|
18844
18844
|
}], ctorParameters: () => [], propDecorators: { value: [{
|
|
18845
18845
|
type: Input
|
|
18846
18846
|
}], range: [{
|
|
@@ -19165,7 +19165,7 @@ class CaPayrollListSummaryOverviewComponent {
|
|
|
19165
19165
|
});
|
|
19166
19166
|
}
|
|
19167
19167
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CaPayrollListSummaryOverviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
19168
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaPayrollListSummaryOverviewComponent, isStandalone: true, selector: "app-ca-payroll-list-summary-overview", inputs: { leftTemplate: "leftTemplate", showLeftTemplate: "showLeftTemplate", item: "item", isExpanded: "isExpanded", index: "index", animationMarginParams: "animationMarginParams" }, outputs: { toggle: "toggle" }, ngImport: i0, template: "@let type = item.type;\n@let moneyCounter = item.moneyCounter;\n@let payrollSummaryItemClass = {\n'text-color-red-11': item.status === 'danger',\n'text-color-blue-13': item.status === 'positive',\n'text-color-white-2': isExpanded,\n};\n\n<div class=\"accordion\" id=\"accordionExample\">\n <div class=\"accordion-item\">\n <div>\n <div class=\"d-flex justify-content-between align-items-center accordion-header user-select-none\"\n [ngClass]=\"{ 'is-expanded': isExpanded }\" (click)=\"toggleAccordion()\">\n <div class=\"d-flex flex-column\">\n <div class=\"me-1 item-text text-size-11\">\n <span>{{ item.text }}</span>\n </div>\n <div class=\"d-flex header-content ca-font-extra-bold align-items-center\"\n [ngClass]=\"{ 'is-expanded': isExpanded }\">\n @if (!showLeftTemplate) {\n <div class=\"me-1 item-text text-size-11\">\n <span>{{ type }}</span>\n </div>\n <div class=\"text-size-11 ca-font-bold heading-count d-flex align-items-center justify-content-center\"\n [ngClass]=\"{\n 'is-expanded text-color-black': isExpanded,\n 'text-color-white': !isExpanded,\n }\">\n {{ item.itemCount }}\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"leftTemplate\"></ng-container>\n }\n </div>\n </div>\n\n <div class=\"d-flex align-items-center header-content-right ca-font-bold\">\n @if (item.date) {\n <div class=\"me-2 date\" [class]=\"{ \n 'is-expanded': isExpanded,\n 'text-color-white-2': isExpanded,\n 'text-color-black': !isExpanded,\n }\">\n {{ item.date | date: 'dd/MM/yyyy' }}\n </div>\n }\n @if (item.status !== 'success') {\n <div class=\"d-flex amount me-1\" [ngClass]=\"{\n danger: item.status === 'danger',\n positive: item.status === 'positive',\n }\" [class.is-danger-expanded]=\"\n item.status === 'danger' && isExpanded\n \" [class.is-positive-expanded]=\"\n item.status === 'positive' && isExpanded\n \">\n <div class=\"me-1\" [class]=\"payrollSummaryItemClass\">\n {{ item.money | currency }}\n </div>\n @if (moneyCounter) {\n <div [class]=\"payrollSummaryItemClass\">\n ({{ moneyCounter }})\n </div>\n }\n </div>\n } @else {\n <div class=\"d-flex amount me-1\" [ngClass]=\"{\n success: item.status === 'success',\n }\" [class.is-success-expanded]=\"\n item.status === 'success' && isExpanded\n \">\n <div class=\"me-1\" [class]=\"{\n 'text-color-green-2': item.status === 'success',\n 'text-color-white-2': isExpanded\n }\">\n ALL PAID\n </div>\n </div>\n }\n <div class=\"accordion-toggle-icon d-flex\" [ngClass]=\"{\n svg_rotate: isExpanded,\n rotate_back: !isExpanded,\n }\">\n <svg-icon [src]=\"getSvgPath('downArrow')\" alt=\"Toggle\"></svg-icon>\n </div>\n </div>\n </div>\n </div>\n <div [id]=\"'collapseOne' + index\" class=\"accordion-collapse\" [class.show]=\"isExpanded\"\n data-bs-parent=\"#accordionExample\" [@showHideCardBody]=\"{\n value: isExpanded.toString(),\n params: animationMarginParams,\n }\">\n <ng-container>\n <div class=\"accordion-body\">\n <!-- Add the expanded content here -->\n <!-- {{ item.description }} -->\n @if (isExpanded) {\n <ng-content></ng-content>\n }\n </div>\n </ng-container>\n </div>\n </div>\n</div>", 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}}.accordion-collapse{margin-top:0!important}.accordion-item{border:unset!important;margin-bottom:3px!important;background-color:transparent!important}.accordion-item .accordion-header{cursor:pointer;padding:4px 4px 4px 8px;background-color:#fff;border-radius:4px!important}.accordion-item .accordion-header .header-content{font-family:Montserrat,sans-serif;font-size:14px;color:#6c6c6c}.accordion-item .accordion-header .header-content .item-text{color:#6c6c6c}.accordion-item .accordion-header .header-content .item-text span::-moz-selection{background-color:#6c6c6c33!important;color:#6c6c6c!important}.accordion-item .accordion-header .header-content .item-text span::selection{background-color:#6c6c6c33!important;color:#6c6c6c!important}.accordion-item .accordion-header .header-content .item-type::-moz-selection{background-color:#6c6c6c33!important;color:#6c6c6c!important}.accordion-item .accordion-header .header-content .item-type::selection{background-color:#6c6c6c33!important;color:#6c6c6c!important}.accordion-item .accordion-header .header-content.is-expanded{color:#fff}.accordion-item .accordion-header .header-content.is-expanded .item-text span::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content.is-expanded .item-text span::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content.is-expanded .item-type::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content.is-expanded .item-type::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content .heading-count{background-color:#919191;border-radius:10px;height:18px;padding:2px 5px;min-width:18px}.accordion-item .accordion-header .header-content .heading-count.is-expanded{background-color:#fff}.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.is-expanded{background-color:#424242;border-radius:4px;color:#fff}.accordion-item .accordion-header.is-expanded .item-text span::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header.is-expanded .item-text span::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header.is-expanded .item-type::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header.is-expanded .item-type::selection{background-color:#fff3!important;color:#fff!important}.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 .me-1{padding-left:8px}.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:#f1f1f1;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 .item-text span::-moz-selection{background-color:#42424233!important;color:#424242!important}.accordion-item .accordion-header:not(.is-expanded):hover .header-content .item-text span::selection{background-color:#42424233!important;color:#424242!important}.accordion-item .accordion-header:not(.is-expanded):hover .header-content .item-type::-moz-selection{background-color:#42424233!important;color:#424242!important}.accordion-item .accordion-header:not(.is-expanded):hover .header-content .item-type::selection{background-color:#42424233!important;color:#424242!important}.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 .item-text span::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header:hover .header-content .item-text span::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header:hover .header-content .item-type::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header:hover .header-content .item-type::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header:hover .header-content .heading-count{background-color:#fff}.accordion-item .accordion-header:hover svg path{fill:#fff}.accordion-item .accordion-body{padding:0}.accordion-item .accordion-toggle-icon{width:26px;height:26px;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
19168
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaPayrollListSummaryOverviewComponent, isStandalone: true, selector: "app-ca-payroll-list-summary-overview", inputs: { leftTemplate: "leftTemplate", showLeftTemplate: "showLeftTemplate", item: "item", isExpanded: "isExpanded", index: "index", animationMarginParams: "animationMarginParams" }, outputs: { toggle: "toggle" }, ngImport: i0, template: "@let type = item.type;\n@let moneyCounter = item.moneyCounter;\n@let payrollSummaryItemClass = {\n'text-color-red-11': item.status === 'danger',\n'text-color-blue-13': item.status === 'positive',\n'text-color-white-2': isExpanded,\n};\n\n<div class=\"accordion\" id=\"accordionExample\">\n <div class=\"accordion-item\">\n <div>\n <div class=\"d-flex justify-content-between align-items-center accordion-header user-select-none\"\n [ngClass]=\"{ 'is-expanded': isExpanded }\" (click)=\"toggleAccordion()\">\n <div class=\"d-flex flex-column\">\n <div class=\"me-1 item-text text-size-11\">\n <span>{{ item.text }}</span>\n </div>\n <div class=\"d-flex header-content ca-font-extra-bold align-items-center\"\n [ngClass]=\"{ 'is-expanded': isExpanded }\">\n @if (!showLeftTemplate) {\n <div class=\"me-1 item-text text-size-11\">\n <span>{{ type }}</span>\n </div>\n <div class=\"text-size-11 ca-font-bold heading-count d-flex align-items-center justify-content-center\"\n [ngClass]=\"{\n 'is-expanded text-color-black': isExpanded,\n 'text-color-white': !isExpanded,\n }\">\n {{ item.itemCount }}\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"leftTemplate\"></ng-container>\n }\n </div>\n </div>\n\n <div class=\"d-flex align-items-center header-content-right ca-font-bold\">\n @if (item.date) {\n <div class=\"me-2 date\" [class]=\"{ \n 'is-expanded': isExpanded,\n 'text-color-white-2': isExpanded,\n 'text-color-black': !isExpanded,\n }\">\n {{ item.date | date: 'dd/MM/yyyy' }}\n </div>\n }\n @if (item.status !== 'success') {\n <div class=\"d-flex amount me-1\" [ngClass]=\"{\n danger: item.status === 'danger',\n positive: item.status === 'positive',\n }\" [class.is-danger-expanded]=\"\n item.status === 'danger' && isExpanded\n \" [class.is-positive-expanded]=\"\n item.status === 'positive' && isExpanded\n \">\n <div class=\"me-1\" [class]=\"payrollSummaryItemClass\">\n {{ item.money | currency }}\n </div>\n @if (moneyCounter) {\n <div [class]=\"payrollSummaryItemClass\">\n ({{ moneyCounter }})\n </div>\n }\n </div>\n } @else {\n <div class=\"d-flex amount me-1\" [ngClass]=\"{\n success: item.status === 'success',\n }\" [class.is-success-expanded]=\"\n item.status === 'success' && isExpanded\n \">\n <div class=\"me-1\" [class]=\"{\n 'text-color-green-2': item.status === 'success',\n 'text-color-white-2': isExpanded\n }\">\n ALL PAID\n </div>\n </div>\n }\n <div class=\"accordion-toggle-icon d-flex\" [ngClass]=\"{\n svg_rotate: isExpanded,\n rotate_back: !isExpanded,\n }\">\n <svg-icon [src]=\"getSvgPath('downArrow')\" alt=\"Toggle\"></svg-icon>\n </div>\n </div>\n </div>\n </div>\n <div [id]=\"'collapseOne' + index\" class=\"accordion-collapse\" [class.show]=\"isExpanded\"\n data-bs-parent=\"#accordionExample\" [@showHideCardBody]=\"{\n value: isExpanded.toString(),\n params: animationMarginParams,\n }\">\n <ng-container>\n <div class=\"accordion-body\">\n <!-- Add the expanded content here -->\n <!-- {{ item.description }} -->\n @if (isExpanded) {\n <ng-content></ng-content>\n }\n </div>\n </ng-container>\n </div>\n </div>\n</div>", styles: [".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}}.accordion-collapse{margin-top:0!important}.accordion-item{border:unset!important;margin-bottom:3px!important;background-color:transparent!important}.accordion-item .accordion-header{cursor:pointer;padding:4px 4px 4px 8px;background-color:#fff;border-radius:4px!important}.accordion-item .accordion-header .header-content{font-family:Montserrat,sans-serif;font-size:14px;color:#6c6c6c}.accordion-item .accordion-header .header-content .item-text{color:#6c6c6c}.accordion-item .accordion-header .header-content .item-text span::-moz-selection{background-color:#6c6c6c33!important;color:#6c6c6c!important}.accordion-item .accordion-header .header-content .item-text span::selection{background-color:#6c6c6c33!important;color:#6c6c6c!important}.accordion-item .accordion-header .header-content .item-type::-moz-selection{background-color:#6c6c6c33!important;color:#6c6c6c!important}.accordion-item .accordion-header .header-content .item-type::selection{background-color:#6c6c6c33!important;color:#6c6c6c!important}.accordion-item .accordion-header .header-content.is-expanded{color:#fff}.accordion-item .accordion-header .header-content.is-expanded .item-text span::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content.is-expanded .item-text span::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content.is-expanded .item-type::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content.is-expanded .item-type::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content .heading-count{background-color:#919191;border-radius:10px;height:18px;padding:2px 5px;min-width:18px}.accordion-item .accordion-header .header-content .heading-count.is-expanded{background-color:#fff}.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.is-expanded{background-color:#424242;border-radius:4px;color:#fff}.accordion-item .accordion-header.is-expanded .item-text span::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header.is-expanded .item-text span::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header.is-expanded .item-type::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header.is-expanded .item-type::selection{background-color:#fff3!important;color:#fff!important}.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 .me-1{padding-left:8px}.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:#f1f1f1;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 .item-text span::-moz-selection{background-color:#42424233!important;color:#424242!important}.accordion-item .accordion-header:not(.is-expanded):hover .header-content .item-text span::selection{background-color:#42424233!important;color:#424242!important}.accordion-item .accordion-header:not(.is-expanded):hover .header-content .item-type::-moz-selection{background-color:#42424233!important;color:#424242!important}.accordion-item .accordion-header:not(.is-expanded):hover .header-content .item-type::selection{background-color:#42424233!important;color:#424242!important}.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 .item-text span::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header:hover .header-content .item-text span::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header:hover .header-content .item-type::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header:hover .header-content .item-type::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header:hover .header-content .heading-count{background-color:#fff}.accordion-item .accordion-header:hover svg path{fill:#fff}.accordion-item .accordion-body{padding:0}.accordion-item .accordion-toggle-icon{width:26px;height:26px;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
19169
19169
|
//Modules
|
|
19170
19170
|
CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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')], encapsulation: i0.ViewEncapsulation.None }); }
|
|
19171
19171
|
}
|
|
@@ -19175,7 +19175,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
19175
19175
|
//Modules
|
|
19176
19176
|
CommonModule,
|
|
19177
19177
|
AngularSvgIconModule,
|
|
19178
|
-
], animations: [accordionAnimation('showHideCardBody')], encapsulation: ViewEncapsulation.None, template: "@let type = item.type;\n@let moneyCounter = item.moneyCounter;\n@let payrollSummaryItemClass = {\n'text-color-red-11': item.status === 'danger',\n'text-color-blue-13': item.status === 'positive',\n'text-color-white-2': isExpanded,\n};\n\n<div class=\"accordion\" id=\"accordionExample\">\n <div class=\"accordion-item\">\n <div>\n <div class=\"d-flex justify-content-between align-items-center accordion-header user-select-none\"\n [ngClass]=\"{ 'is-expanded': isExpanded }\" (click)=\"toggleAccordion()\">\n <div class=\"d-flex flex-column\">\n <div class=\"me-1 item-text text-size-11\">\n <span>{{ item.text }}</span>\n </div>\n <div class=\"d-flex header-content ca-font-extra-bold align-items-center\"\n [ngClass]=\"{ 'is-expanded': isExpanded }\">\n @if (!showLeftTemplate) {\n <div class=\"me-1 item-text text-size-11\">\n <span>{{ type }}</span>\n </div>\n <div class=\"text-size-11 ca-font-bold heading-count d-flex align-items-center justify-content-center\"\n [ngClass]=\"{\n 'is-expanded text-color-black': isExpanded,\n 'text-color-white': !isExpanded,\n }\">\n {{ item.itemCount }}\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"leftTemplate\"></ng-container>\n }\n </div>\n </div>\n\n <div class=\"d-flex align-items-center header-content-right ca-font-bold\">\n @if (item.date) {\n <div class=\"me-2 date\" [class]=\"{ \n 'is-expanded': isExpanded,\n 'text-color-white-2': isExpanded,\n 'text-color-black': !isExpanded,\n }\">\n {{ item.date | date: 'dd/MM/yyyy' }}\n </div>\n }\n @if (item.status !== 'success') {\n <div class=\"d-flex amount me-1\" [ngClass]=\"{\n danger: item.status === 'danger',\n positive: item.status === 'positive',\n }\" [class.is-danger-expanded]=\"\n item.status === 'danger' && isExpanded\n \" [class.is-positive-expanded]=\"\n item.status === 'positive' && isExpanded\n \">\n <div class=\"me-1\" [class]=\"payrollSummaryItemClass\">\n {{ item.money | currency }}\n </div>\n @if (moneyCounter) {\n <div [class]=\"payrollSummaryItemClass\">\n ({{ moneyCounter }})\n </div>\n }\n </div>\n } @else {\n <div class=\"d-flex amount me-1\" [ngClass]=\"{\n success: item.status === 'success',\n }\" [class.is-success-expanded]=\"\n item.status === 'success' && isExpanded\n \">\n <div class=\"me-1\" [class]=\"{\n 'text-color-green-2': item.status === 'success',\n 'text-color-white-2': isExpanded\n }\">\n ALL PAID\n </div>\n </div>\n }\n <div class=\"accordion-toggle-icon d-flex\" [ngClass]=\"{\n svg_rotate: isExpanded,\n rotate_back: !isExpanded,\n }\">\n <svg-icon [src]=\"getSvgPath('downArrow')\" alt=\"Toggle\"></svg-icon>\n </div>\n </div>\n </div>\n </div>\n <div [id]=\"'collapseOne' + index\" class=\"accordion-collapse\" [class.show]=\"isExpanded\"\n data-bs-parent=\"#accordionExample\" [@showHideCardBody]=\"{\n value: isExpanded.toString(),\n params: animationMarginParams,\n }\">\n <ng-container>\n <div class=\"accordion-body\">\n <!-- Add the expanded content here -->\n <!-- {{ item.description }} -->\n @if (isExpanded) {\n <ng-content></ng-content>\n }\n </div>\n </ng-container>\n </div>\n </div>\n</div>", 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}}.accordion-collapse{margin-top:0!important}.accordion-item{border:unset!important;margin-bottom:3px!important;background-color:transparent!important}.accordion-item .accordion-header{cursor:pointer;padding:4px 4px 4px 8px;background-color:#fff;border-radius:4px!important}.accordion-item .accordion-header .header-content{font-family:Montserrat,sans-serif;font-size:14px;color:#6c6c6c}.accordion-item .accordion-header .header-content .item-text{color:#6c6c6c}.accordion-item .accordion-header .header-content .item-text span::-moz-selection{background-color:#6c6c6c33!important;color:#6c6c6c!important}.accordion-item .accordion-header .header-content .item-text span::selection{background-color:#6c6c6c33!important;color:#6c6c6c!important}.accordion-item .accordion-header .header-content .item-type::-moz-selection{background-color:#6c6c6c33!important;color:#6c6c6c!important}.accordion-item .accordion-header .header-content .item-type::selection{background-color:#6c6c6c33!important;color:#6c6c6c!important}.accordion-item .accordion-header .header-content.is-expanded{color:#fff}.accordion-item .accordion-header .header-content.is-expanded .item-text span::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content.is-expanded .item-text span::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content.is-expanded .item-type::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content.is-expanded .item-type::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content .heading-count{background-color:#919191;border-radius:10px;height:18px;padding:2px 5px;min-width:18px}.accordion-item .accordion-header .header-content .heading-count.is-expanded{background-color:#fff}.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.is-expanded{background-color:#424242;border-radius:4px;color:#fff}.accordion-item .accordion-header.is-expanded .item-text span::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header.is-expanded .item-text span::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header.is-expanded .item-type::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header.is-expanded .item-type::selection{background-color:#fff3!important;color:#fff!important}.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 .me-1{padding-left:8px}.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:#f1f1f1;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 .item-text span::-moz-selection{background-color:#42424233!important;color:#424242!important}.accordion-item .accordion-header:not(.is-expanded):hover .header-content .item-text span::selection{background-color:#42424233!important;color:#424242!important}.accordion-item .accordion-header:not(.is-expanded):hover .header-content .item-type::-moz-selection{background-color:#42424233!important;color:#424242!important}.accordion-item .accordion-header:not(.is-expanded):hover .header-content .item-type::selection{background-color:#42424233!important;color:#424242!important}.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 .item-text span::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header:hover .header-content .item-text span::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header:hover .header-content .item-type::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header:hover .header-content .item-type::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header:hover .header-content .heading-count{background-color:#fff}.accordion-item .accordion-header:hover svg path{fill:#fff}.accordion-item .accordion-body{padding:0}.accordion-item .accordion-toggle-icon{width:26px;height:26px;align-items:center;justify-content:center}\n"] }]
|
|
19178
|
+
], animations: [accordionAnimation('showHideCardBody')], encapsulation: ViewEncapsulation.None, template: "@let type = item.type;\n@let moneyCounter = item.moneyCounter;\n@let payrollSummaryItemClass = {\n'text-color-red-11': item.status === 'danger',\n'text-color-blue-13': item.status === 'positive',\n'text-color-white-2': isExpanded,\n};\n\n<div class=\"accordion\" id=\"accordionExample\">\n <div class=\"accordion-item\">\n <div>\n <div class=\"d-flex justify-content-between align-items-center accordion-header user-select-none\"\n [ngClass]=\"{ 'is-expanded': isExpanded }\" (click)=\"toggleAccordion()\">\n <div class=\"d-flex flex-column\">\n <div class=\"me-1 item-text text-size-11\">\n <span>{{ item.text }}</span>\n </div>\n <div class=\"d-flex header-content ca-font-extra-bold align-items-center\"\n [ngClass]=\"{ 'is-expanded': isExpanded }\">\n @if (!showLeftTemplate) {\n <div class=\"me-1 item-text text-size-11\">\n <span>{{ type }}</span>\n </div>\n <div class=\"text-size-11 ca-font-bold heading-count d-flex align-items-center justify-content-center\"\n [ngClass]=\"{\n 'is-expanded text-color-black': isExpanded,\n 'text-color-white': !isExpanded,\n }\">\n {{ item.itemCount }}\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"leftTemplate\"></ng-container>\n }\n </div>\n </div>\n\n <div class=\"d-flex align-items-center header-content-right ca-font-bold\">\n @if (item.date) {\n <div class=\"me-2 date\" [class]=\"{ \n 'is-expanded': isExpanded,\n 'text-color-white-2': isExpanded,\n 'text-color-black': !isExpanded,\n }\">\n {{ item.date | date: 'dd/MM/yyyy' }}\n </div>\n }\n @if (item.status !== 'success') {\n <div class=\"d-flex amount me-1\" [ngClass]=\"{\n danger: item.status === 'danger',\n positive: item.status === 'positive',\n }\" [class.is-danger-expanded]=\"\n item.status === 'danger' && isExpanded\n \" [class.is-positive-expanded]=\"\n item.status === 'positive' && isExpanded\n \">\n <div class=\"me-1\" [class]=\"payrollSummaryItemClass\">\n {{ item.money | currency }}\n </div>\n @if (moneyCounter) {\n <div [class]=\"payrollSummaryItemClass\">\n ({{ moneyCounter }})\n </div>\n }\n </div>\n } @else {\n <div class=\"d-flex amount me-1\" [ngClass]=\"{\n success: item.status === 'success',\n }\" [class.is-success-expanded]=\"\n item.status === 'success' && isExpanded\n \">\n <div class=\"me-1\" [class]=\"{\n 'text-color-green-2': item.status === 'success',\n 'text-color-white-2': isExpanded\n }\">\n ALL PAID\n </div>\n </div>\n }\n <div class=\"accordion-toggle-icon d-flex\" [ngClass]=\"{\n svg_rotate: isExpanded,\n rotate_back: !isExpanded,\n }\">\n <svg-icon [src]=\"getSvgPath('downArrow')\" alt=\"Toggle\"></svg-icon>\n </div>\n </div>\n </div>\n </div>\n <div [id]=\"'collapseOne' + index\" class=\"accordion-collapse\" [class.show]=\"isExpanded\"\n data-bs-parent=\"#accordionExample\" [@showHideCardBody]=\"{\n value: isExpanded.toString(),\n params: animationMarginParams,\n }\">\n <ng-container>\n <div class=\"accordion-body\">\n <!-- Add the expanded content here -->\n <!-- {{ item.description }} -->\n @if (isExpanded) {\n <ng-content></ng-content>\n }\n </div>\n </ng-container>\n </div>\n </div>\n</div>", styles: [".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}}.accordion-collapse{margin-top:0!important}.accordion-item{border:unset!important;margin-bottom:3px!important;background-color:transparent!important}.accordion-item .accordion-header{cursor:pointer;padding:4px 4px 4px 8px;background-color:#fff;border-radius:4px!important}.accordion-item .accordion-header .header-content{font-family:Montserrat,sans-serif;font-size:14px;color:#6c6c6c}.accordion-item .accordion-header .header-content .item-text{color:#6c6c6c}.accordion-item .accordion-header .header-content .item-text span::-moz-selection{background-color:#6c6c6c33!important;color:#6c6c6c!important}.accordion-item .accordion-header .header-content .item-text span::selection{background-color:#6c6c6c33!important;color:#6c6c6c!important}.accordion-item .accordion-header .header-content .item-type::-moz-selection{background-color:#6c6c6c33!important;color:#6c6c6c!important}.accordion-item .accordion-header .header-content .item-type::selection{background-color:#6c6c6c33!important;color:#6c6c6c!important}.accordion-item .accordion-header .header-content.is-expanded{color:#fff}.accordion-item .accordion-header .header-content.is-expanded .item-text span::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content.is-expanded .item-text span::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content.is-expanded .item-type::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content.is-expanded .item-type::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content .heading-count{background-color:#919191;border-radius:10px;height:18px;padding:2px 5px;min-width:18px}.accordion-item .accordion-header .header-content .heading-count.is-expanded{background-color:#fff}.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.is-expanded{background-color:#424242;border-radius:4px;color:#fff}.accordion-item .accordion-header.is-expanded .item-text span::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header.is-expanded .item-text span::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header.is-expanded .item-type::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header.is-expanded .item-type::selection{background-color:#fff3!important;color:#fff!important}.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 .me-1{padding-left:8px}.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:#f1f1f1;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 .item-text span::-moz-selection{background-color:#42424233!important;color:#424242!important}.accordion-item .accordion-header:not(.is-expanded):hover .header-content .item-text span::selection{background-color:#42424233!important;color:#424242!important}.accordion-item .accordion-header:not(.is-expanded):hover .header-content .item-type::-moz-selection{background-color:#42424233!important;color:#424242!important}.accordion-item .accordion-header:not(.is-expanded):hover .header-content .item-type::selection{background-color:#42424233!important;color:#424242!important}.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 .item-text span::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header:hover .header-content .item-text span::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header:hover .header-content .item-type::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header:hover .header-content .item-type::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header:hover .header-content .heading-count{background-color:#fff}.accordion-item .accordion-header:hover svg path{fill:#fff}.accordion-item .accordion-body{padding:0}.accordion-item .accordion-toggle-icon{width:26px;height:26px;align-items:center;justify-content:center}\n"] }]
|
|
19179
19179
|
}], ctorParameters: () => [], propDecorators: { leftTemplate: [{
|
|
19180
19180
|
type: Input
|
|
19181
19181
|
}], showLeftTemplate: [{
|
|
@@ -19359,7 +19359,7 @@ class CaCheckboxComponent {
|
|
|
19359
19359
|
this.cdRef?.markForCheck();
|
|
19360
19360
|
}
|
|
19361
19361
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CaCheckboxComponent, deps: [{ token: i0.Renderer2 }, { token: i1$2.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
19362
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaCheckboxComponent, isStandalone: true, selector: "app-ca-checkbox", inputs: { label: "label", required: "required", disabled: "disabled", disabledStillCheckMark: "disabledStillCheckMark", svg: "svg", name: "name", customClass: "customClass", svgCustomClass: "svgCustomClass", moveIconDown: "moveIconDown", isUseCarrieraACHCheckBox: "isUseCarrieraACHCheckBox", isDisabledBlue: "isDisabledBlue", isDisabledRegularCheck: "isDisabledRegularCheck", isLabelDisabled: "isLabelDisabled", isRegularCheckbox: "isRegularCheckbox", isChecked: "isChecked", isGroupPartialyChecked: "isGroupPartialyChecked", isBlackLabelCheckbox: "isBlackLabelCheckbox", isModalCheckbox: "isModalCheckbox", isMarginTopReset: "isMarginTopReset", groupIndex: "groupIndex", itemIndex: "itemIndex", isDarkBackgroundCheckbox: "isDarkBackgroundCheckbox" }, outputs: { formArrayAction: "formArrayAction", columnCheckAction: "columnCheckAction" }, ngImport: i0, template: "<div class=\"d-flex align-items-center h-100\">\n @let isCheckboxDisabled = disabled || disabledStillCheckMark;\n @if (isUseCarrieraACHCheckBox) {\n <div\n [ngClass]=\"{\n disabled: isCheckboxDisabled,\n 'disabled-blue': isDisabledBlue,\n 'ca-dark-bg': isDarkBackgroundCheckbox,\n }\"\n class=\"d-flex align-items-center ca-checkbox-container {{\n customClass\n }}\"\n >\n <label\n class=\"d-flex align-items-center\"\n [for]=\"name\"\n (click)=\"onAction($event)\"\n >\n <input\n type=\"checkbox\"\n class=\"a-checkbox\"\n [name]=\"name\"\n [id]=\"name\"\n [checked]=\"getSuperControl?.value\"\n (change)=\"onChange($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n\n @if (!disabled || getSuperControl?.value) {\n <span class=\"ca-mark position-absolute\"></span>\n }\n\n <svg-icon\n class=\"carriera-icon\"\n [src]=\"\n getSuperControl?.value\n ? checkboxSvgRoutes.carrieraLogoActiveIcon\n : checkboxSvgRoutes.carrieraLogoInactiveIcon\n \"\n ></svg-icon>\n </label>\n </div>\n } @else {\n <div\n [ngClass]=\"{\n disabled: isCheckboxDisabled,\n 'disabled-blue': isDisabledBlue,\n 'disabled-regular-check': isDisabledRegularCheck,\n 'top-0': isMarginTopReset,\n }\"\n class=\"ca-checkbox-container d-flex align-items-center {{\n customClass\n }}\"\n [class.ca-dark-bg]=\"isDarkBackgroundCheckbox\"\n >\n <label\n class=\"d-flex align-items-center\"\n [ngClass]=\"{ 'h-26': isModalCheckbox }\"\n [for]=\"name\"\n (click)=\"onAction($event)\"\n >\n @if (\n getSuperControl?.errors?.['required'] &&\n getSuperControl?.touched\n ) {\n <span class=\"required-text-checkbox ca-font-semi-bold\">\n Required\n </span>\n }\n\n @let checkboxSizeClass =\n isModalCheckbox ? 'h-14 w-14' : 'h-18 w-18';\n <div\n class=\"position-relative d-flex align-items-center justify-content-center ca-checkbox-input-container\"\n [ngClass]=\"checkboxSizeClass\"\n >\n @if (\n (!disabled || disabledStillCheckMark) &&\n !isDisabledBlue &&\n !isDisabledRegularCheck\n ) {\n <input\n type=\"checkbox\"\n class=\"ca-checkbox position-absolute\"\n [name]=\"name\"\n [id]=\"name\"\n (click)=\"$event.stopPropagation()\"\n [checked]=\"\n !isRegularCheckbox\n ? isChecked\n : getSuperControl?.value\n \"\n (change)=\"onChange($event)\"\n />\n }\n\n @if (\n (!disabled ||\n (disabledStillCheckMark &&\n getSuperControl?.value)) &&\n !isDisabledBlue &&\n !isDisabledRegularCheck\n ) {\n <span\n class=\"ca-mark position-relative\"\n [ngClass]=\"{\n invalid:\n getSuperControl?.errors?.['required'] &&\n getSuperControl?.touched,\n disabled: disabledStillCheckMark,\n 'down-position': moveIconDown,\n minus: isGroupPartialyChecked,\n }\"\n ngbTooltip\n [mainCaTooltip]=\"\n getSuperControl?.value || isChecked\n ? eGeneralActions.CLEAR\n : eGeneralActions.SELECT\n \"\n [tooltipMarginTop]=\"'5px'\"\n [tooltipBackground]=\"eColor.BLACK\"\n position=\"bottom\"\n (click)=\"$event.stopPropagation()\"\n ></span>\n }\n\n @if (isDisabledRegularCheck) {\n <svg-icon\n class=\"d-flex justify-content-center align-items-center ca-checkbox-disabled-regular-check\"\n [src]=\"checkboxSvgRoutes.checkedIcon\"\n ></svg-icon>\n }\n\n @if (isDisabledBlue) {\n <svg-icon\n class=\"ca-checkbox-disabled-blue\"\n [src]=\"checkboxSvgRoutes.disabledIcon\"\n ></svg-icon>\n }\n\n @if (disabled && !disabledStillCheckMark) {\n <div\n class=\"d-flex\"\n ngbTooltip\n [mainCaTooltip]=\"'Disabled'\"\n [tooltipBackground]=\"eColor.LIGHT_GREY\"\n [tooltipColor]=\"eColor.DARK_GREY\"\n position=\"bottom\"\n >\n <svg-icon\n class=\"ca-checkbox-disabled\"\n [class.dark-disabled-icon]=\"\n isBlackLabelCheckbox\n \"\n [src]=\"checkboxSvgRoutes.disabledIcon\"\n ></svg-icon>\n </div>\n }\n </div>\n\n @if (svg) {\n <svg-icon\n class=\"ca-checkbox-svg {{ svgCustomClass }}\"\n [src]=\"svg\"\n ></svg-icon>\n }\n\n @if (label) {\n <span\n class=\"ca-checkbox-label\"\n [ngClass]=\"{\n 'ca-checkbox-label-blue': isDisabledBlue,\n 'ca-checkbox-label-regular-check':\n isDisabledRegularCheck,\n 'ca-checkbox-label-disabled': isLabelDisabled,\n 'ca-font-bold': !isBlackLabelCheckbox && isChecked,\n 'ca-font-extra-bold text-size-14': isModalCheckbox,\n 'text-color-white': !isBlackLabelCheckbox,\n 'text-color-light-grey-2':\n !isInputChecked && isBlackLabelCheckbox,\n 'text-color-black':\n isInputChecked && isBlackLabelCheckbox,\n 'text-color-bw6-2':\n isModalCheckbox && !isInputChecked,\n }\"\n (click)=\"!isRegularCheckbox && $event.preventDefault()\"\n >\n {{ label }}\n @if (required) {\n <span class=\"ca-checkbox-label-required\">*</span>\n }\n </span>\n }\n </label>\n </div>\n }\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}}.ca-checkbox-container{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:transform .3s ease-in-out}.ca-checkbox-container .required-text-checkbox{position:absolute;left:-72px;font-size:14px;color:#f44336;line-height:18px}.ca-checkbox-container .ca-checkbox{visibility:hidden;cursor:pointer}.ca-checkbox-container .ca-mark{height:14px;width:14px;background-color:#ccc;border-radius:2px;cursor:pointer;transition:transform .1s cubic-bezier(.46,.03,.51,.95),background-color .1s cubic-bezier(.46,.03,.51,.95)}.ca-checkbox-container .ca-mark:hover{transform:scale(1.29)}.ca-checkbox-container .ca-mark:active{transform:scale(1)}.ca-checkbox-container .ca-mark:after{content:\"\";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .1s cubic-bezier(.46,.03,.51,.95)}.ca-checkbox-container .ca-mark.invalid{background-color:#f44336!important}.ca-checkbox-container .ca-mark.disabled,.ca-checkbox-container .ca-mark.disabled:hover{background-color:#6d82c7!important}.ca-checkbox-container .ca-mark.down-position{top:3px}.ca-checkbox-container:hover .ca-checkbox~.ca-mark{background-color:#919191}.ca-checkbox-container:hover .ca-checkbox~.ca-checkbox-label{color:#424242}.ca-checkbox-container .ca-checkbox:checked~.ca-mark{background-color:#3b73ed}.ca-checkbox-container .ca-checkbox:hover~.ca-mark{background-color:#919191!important}.ca-checkbox-container .ca-checkbox:checked:hover~.ca-mark{background-color:#255bb9!important}.ca-checkbox-container .ca-checkbox:checked~.ca-mark:after{transform:rotate(45deg) scale(1);display:block}.ca-checkbox-container.ca-dark-bg .ca-checkbox:hover~.ca-mark{background-color:#dadada!important}.ca-checkbox-container.ca-dark-bg .ca-checkbox:checked:hover~.ca-mark{background-color:#92b1f5!important}.ca-checkbox-container .ca-checkbox-svg{margin-left:10px;margin-right:4px}.ca-checkbox-container .ca-checkbox-label{cursor:pointer;color:#6c6c6c;font-size:14px;margin-left:6px;position:relative;line-height:14px}.ca-checkbox-container .ca-checkbox-label::-moz-selection{color:#6c6c6c;background:#6c6c6c33}.ca-checkbox-container .ca-checkbox-label::selection{color:#6c6c6c;background:#6c6c6c33}.ca-checkbox-container .ca-checkbox-label-required{color:#f44336}.ca-checkbox-container .carriera-icon{line-height:10px;margin-left:6px;cursor:pointer}.ca-checkbox-container.disabled .ca-checkbox-disabled{height:14px;width:14px;line-height:15px;position:relative;bottom:2px}.ca-checkbox-container.disabled .ca-checkbox-disabled svg path{fill:#fff!important}.ca-checkbox-container.disabled .ca-checkbox-disabled.dark-disabled-icon svg path{fill:#ccc!important}.ca-checkbox-container.disabled .ca-checkbox-label{color:#aaa!important;cursor:auto}.ca-checkbox-container.disabled.disabled-valid svg path{fill:#6d82c7!important}.ca-checkbox-container.disabled.disabled-valid .ca-checkbox-label{font-weight:500!important;color:#6c6c6c!important}.ca-checkbox-container.disabled-blue{pointer-events:none!important}.ca-checkbox-container.disabled-blue .ca-checkbox-disabled-blue{height:14px;width:14px;line-height:15px;position:relative;bottom:2px}.ca-checkbox-container.disabled-blue .ca-checkbox-disabled-blue svg path{fill:#6692f1!important}.ca-checkbox-container.disabled-blue .ca-checkbox-label-blue{font-weight:500!important;color:#424242!important;position:relative;bottom:1px}.ca-checkbox-container.disabled-regular-check{pointer-events:none!important}.ca-checkbox-container.disabled-regular-check .ca-checkbox-disabled-regular-check{background:#e5e5e5;height:14px;width:14px}.ca-checkbox-container.disabled-regular-check .ca-checkbox-disabled-regular-check svg{height:10px;width:10px}.ca-checkbox-container.disabled-regular-check .ca-checkbox-disabled-regular-check svg path{fill:#6c6c6c!important}.ca-checkbox-container.disabled-regular-check .ca-checkbox-label-regular-check{font-weight:700!important;color:#424242!important}.ca-checkbox-container.medium .ca-checkbox-label{font-weight:500!important;color:#6c6c6c}.ca-checkbox-container.regular label{line-height:17px}.ca-checkbox-container.regular .ca-checkbox-label{font-weight:400;color:#aaa;color:#6c6c6c}.ca-checkbox-container.billing-address{margin-bottom:12px;position:relative;left:1px;top:0}.ca-checkbox-container.billing-address.checked{margin-bottom:22px}.ca-checkbox-container.shipper-hours{margin-bottom:10px;position:relative;left:6px;top:0}.ca-checkbox-container.bold-12 .ca-checkbox-label{font-weight:700!important;font-size:12px}.ca-checkbox-container.bold-14 .ca-checkbox-label{font-weight:800!important;font-size:14px}.ca-checkbox-container.regular-14 .ca-checkbox-label{font-weight:400!important;font-size:14px}.ca-checkbox-container.medium-14 .ca-checkbox-label{font-weight:500!important;font-size:14px}.ca-checkbox-container.label-black .ca-checkbox-label{color:#2f2f2f}.ca-checkbox-container.text-align-center label{align-items:unset}.ca-checkbox-container.text-align-center .ca-checkbox-label{text-align:center}.ca-checkbox-container.line-height-18 .ca-checkbox-label{line-height:18px}.ca-checkbox-container.line-height-18 .ca-checkbox-label:before{content:\"\";display:block;height:0;width:0;margin-top:-.1425em}.ca-checkbox-container.dropdown-column .ca-checkbox-label{color:#fff}.ca-checkbox-container.dropdown-column .ca-checkbox:checked~.ca-checkbox-label{font-weight:700!important;color:#fff!important}.ca-checkbox-container.dropdown-column .ca-checkbox:checked~.ca-checkbox-label.ca-checkbox-label-disabled{pointer-events:none!important}.ca-checkbox-container.dropdown-column:hover .ca-checkbox~.ca-checkbox-label{color:#fff}.ca-checkbox-container.dropdown-column .ca-mark{background-color:#919191}.ca-checkbox-container.dropdown-column .ca-mark.minus:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 0px 0;transform:rotate(90deg)!important}.ca-checkbox-container.dropdown-column.disabled svg-icon{position:relative;bottom:1px;width:14px;height:15px;line-height:14px}.ca-checkbox-container.dropdown-column.disabled svg-icon svg path{fill:#6692f1!important}.ca-checkbox-container.dropdown-column.disabled .ca-checkbox-label{font-weight:700!important;color:#fff!important}.ca-checkbox-container.dropdown-column .ca-checkbox:checked~.ca-mark{background-color:#6692f1}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
19362
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaCheckboxComponent, isStandalone: true, selector: "app-ca-checkbox", inputs: { label: "label", required: "required", disabled: "disabled", disabledStillCheckMark: "disabledStillCheckMark", svg: "svg", name: "name", customClass: "customClass", svgCustomClass: "svgCustomClass", moveIconDown: "moveIconDown", isUseCarrieraACHCheckBox: "isUseCarrieraACHCheckBox", isDisabledBlue: "isDisabledBlue", isDisabledRegularCheck: "isDisabledRegularCheck", isLabelDisabled: "isLabelDisabled", isRegularCheckbox: "isRegularCheckbox", isChecked: "isChecked", isGroupPartialyChecked: "isGroupPartialyChecked", isBlackLabelCheckbox: "isBlackLabelCheckbox", isModalCheckbox: "isModalCheckbox", isMarginTopReset: "isMarginTopReset", groupIndex: "groupIndex", itemIndex: "itemIndex", isDarkBackgroundCheckbox: "isDarkBackgroundCheckbox" }, outputs: { formArrayAction: "formArrayAction", columnCheckAction: "columnCheckAction" }, ngImport: i0, template: "<div class=\"d-flex align-items-center h-100\">\n @let isCheckboxDisabled = disabled || disabledStillCheckMark;\n @if (isUseCarrieraACHCheckBox) {\n <div\n [ngClass]=\"{\n disabled: isCheckboxDisabled,\n 'disabled-blue': isDisabledBlue,\n 'ca-dark-bg': isDarkBackgroundCheckbox,\n }\"\n class=\"d-flex align-items-center ca-checkbox-container {{\n customClass\n }}\"\n >\n <label\n class=\"d-flex align-items-center\"\n [for]=\"name\"\n (click)=\"onAction($event)\"\n >\n <input\n type=\"checkbox\"\n class=\"a-checkbox\"\n [name]=\"name\"\n [id]=\"name\"\n [checked]=\"getSuperControl?.value\"\n (change)=\"onChange($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n\n @if (!disabled || getSuperControl?.value) {\n <span class=\"ca-mark position-absolute\"></span>\n }\n\n <svg-icon\n class=\"carriera-icon\"\n [src]=\"\n getSuperControl?.value\n ? checkboxSvgRoutes.carrieraLogoActiveIcon\n : checkboxSvgRoutes.carrieraLogoInactiveIcon\n \"\n ></svg-icon>\n </label>\n </div>\n } @else {\n <div\n [ngClass]=\"{\n disabled: isCheckboxDisabled,\n 'disabled-blue': isDisabledBlue,\n 'disabled-regular-check': isDisabledRegularCheck,\n 'top-0': isMarginTopReset,\n }\"\n class=\"ca-checkbox-container d-flex align-items-center {{\n customClass\n }}\"\n [class.ca-dark-bg]=\"isDarkBackgroundCheckbox\"\n >\n <label\n class=\"d-flex align-items-center\"\n [ngClass]=\"{ 'h-26': isModalCheckbox }\"\n [for]=\"name\"\n (click)=\"onAction($event)\"\n >\n @if (\n getSuperControl?.errors?.['required'] &&\n getSuperControl?.touched\n ) {\n <span class=\"required-text-checkbox ca-font-semi-bold\">\n Required\n </span>\n }\n\n @let checkboxSizeClass =\n isModalCheckbox ? 'h-14 w-14' : 'h-18 w-18';\n <div\n class=\"position-relative d-flex align-items-center justify-content-center ca-checkbox-input-container\"\n [ngClass]=\"checkboxSizeClass\"\n >\n @if (\n (!disabled || disabledStillCheckMark) &&\n !isDisabledBlue &&\n !isDisabledRegularCheck\n ) {\n <input\n type=\"checkbox\"\n class=\"ca-checkbox position-absolute\"\n [name]=\"name\"\n [id]=\"name\"\n (click)=\"$event.stopPropagation()\"\n [checked]=\"\n !isRegularCheckbox\n ? isChecked\n : getSuperControl?.value\n \"\n (change)=\"onChange($event)\"\n />\n }\n\n @if (\n (!disabled ||\n (disabledStillCheckMark &&\n getSuperControl?.value)) &&\n !isDisabledBlue &&\n !isDisabledRegularCheck\n ) {\n <span\n class=\"ca-mark position-relative\"\n [ngClass]=\"{\n invalid:\n getSuperControl?.errors?.['required'] &&\n getSuperControl?.touched,\n disabled: disabledStillCheckMark,\n 'down-position': moveIconDown,\n minus: isGroupPartialyChecked,\n }\"\n ngbTooltip\n [mainCaTooltip]=\"\n getSuperControl?.value || isChecked\n ? eGeneralActions.CLEAR\n : eGeneralActions.SELECT\n \"\n [tooltipMarginTop]=\"'5px'\"\n [tooltipBackground]=\"eColor.BLACK\"\n position=\"bottom\"\n (click)=\"$event.stopPropagation()\"\n ></span>\n }\n\n @if (isDisabledRegularCheck) {\n <svg-icon\n class=\"d-flex justify-content-center align-items-center ca-checkbox-disabled-regular-check\"\n [src]=\"checkboxSvgRoutes.checkedIcon\"\n ></svg-icon>\n }\n\n @if (isDisabledBlue) {\n <svg-icon\n class=\"ca-checkbox-disabled-blue\"\n [src]=\"checkboxSvgRoutes.disabledIcon\"\n ></svg-icon>\n }\n\n @if (disabled && !disabledStillCheckMark) {\n <div\n class=\"d-flex\"\n ngbTooltip\n [mainCaTooltip]=\"'Disabled'\"\n [tooltipBackground]=\"eColor.LIGHT_GREY\"\n [tooltipColor]=\"eColor.DARK_GREY\"\n position=\"bottom\"\n >\n <svg-icon\n class=\"ca-checkbox-disabled\"\n [class.dark-disabled-icon]=\"\n isBlackLabelCheckbox\n \"\n [src]=\"checkboxSvgRoutes.disabledIcon\"\n ></svg-icon>\n </div>\n }\n </div>\n\n @if (svg) {\n <svg-icon\n class=\"ca-checkbox-svg {{ svgCustomClass }}\"\n [src]=\"svg\"\n ></svg-icon>\n }\n\n @if (label) {\n <span\n class=\"ca-checkbox-label\"\n [ngClass]=\"{\n 'ca-checkbox-label-blue': isDisabledBlue,\n 'ca-checkbox-label-regular-check':\n isDisabledRegularCheck,\n 'ca-checkbox-label-disabled': isLabelDisabled,\n 'ca-font-bold': !isBlackLabelCheckbox && isChecked,\n 'ca-font-extra-bold text-size-14': isModalCheckbox,\n 'text-color-white': !isBlackLabelCheckbox,\n 'text-color-light-grey-2':\n !isInputChecked && isBlackLabelCheckbox,\n 'text-color-black':\n isInputChecked && isBlackLabelCheckbox,\n 'text-color-bw6-2':\n isModalCheckbox && !isInputChecked,\n }\"\n (click)=\"!isRegularCheckbox && $event.preventDefault()\"\n >\n {{ label }}\n @if (required) {\n <span class=\"ca-checkbox-label-required\">*</span>\n }\n </span>\n }\n </label>\n </div>\n }\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}}.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}.ca-checkbox-container{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:transform .3s ease-in-out}.ca-checkbox-container .required-text-checkbox{position:absolute;left:-72px;font-size:14px;color:#f44336;line-height:18px}.ca-checkbox-container .ca-checkbox{visibility:hidden;cursor:pointer}.ca-checkbox-container .ca-mark{height:14px;width:14px;background-color:#ccc;border-radius:2px;cursor:pointer;transition:transform .1s cubic-bezier(.46,.03,.51,.95),background-color .1s cubic-bezier(.46,.03,.51,.95)}.ca-checkbox-container .ca-mark:hover{transform:scale(1.29)}.ca-checkbox-container .ca-mark:active{transform:scale(1)}.ca-checkbox-container .ca-mark:after{content:\"\";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .1s cubic-bezier(.46,.03,.51,.95)}.ca-checkbox-container .ca-mark.invalid{background-color:#f44336!important}.ca-checkbox-container .ca-mark.disabled,.ca-checkbox-container .ca-mark.disabled:hover{background-color:#6d82c7!important}.ca-checkbox-container .ca-mark.down-position{top:3px}.ca-checkbox-container:hover .ca-checkbox~.ca-mark{background-color:#919191}.ca-checkbox-container:hover .ca-checkbox~.ca-checkbox-label{color:#424242}.ca-checkbox-container .ca-checkbox:checked~.ca-mark{background-color:#3b73ed}.ca-checkbox-container .ca-checkbox:hover~.ca-mark{background-color:#919191!important}.ca-checkbox-container .ca-checkbox:checked:hover~.ca-mark{background-color:#255bb9!important}.ca-checkbox-container .ca-checkbox:checked~.ca-mark:after{transform:rotate(45deg) scale(1);display:block}.ca-checkbox-container.ca-dark-bg .ca-checkbox:hover~.ca-mark{background-color:#dadada!important}.ca-checkbox-container.ca-dark-bg .ca-checkbox:checked:hover~.ca-mark{background-color:#92b1f5!important}.ca-checkbox-container .ca-checkbox-svg{margin-left:10px;margin-right:4px}.ca-checkbox-container .ca-checkbox-label{cursor:pointer;color:#6c6c6c;font-size:14px;margin-left:6px;position:relative;line-height:14px}.ca-checkbox-container .ca-checkbox-label::-moz-selection{color:#6c6c6c;background:#6c6c6c33}.ca-checkbox-container .ca-checkbox-label::selection{color:#6c6c6c;background:#6c6c6c33}.ca-checkbox-container .ca-checkbox-label-required{color:#f44336}.ca-checkbox-container .carriera-icon{line-height:10px;margin-left:6px;cursor:pointer}.ca-checkbox-container.disabled .ca-checkbox-disabled{height:14px;width:14px;line-height:15px;position:relative;bottom:2px}.ca-checkbox-container.disabled .ca-checkbox-disabled svg path{fill:#fff!important}.ca-checkbox-container.disabled .ca-checkbox-disabled.dark-disabled-icon svg path{fill:#ccc!important}.ca-checkbox-container.disabled .ca-checkbox-label{color:#aaa!important;cursor:auto}.ca-checkbox-container.disabled.disabled-valid svg path{fill:#6d82c7!important}.ca-checkbox-container.disabled.disabled-valid .ca-checkbox-label{font-weight:500!important;color:#6c6c6c!important}.ca-checkbox-container.disabled-blue{pointer-events:none!important}.ca-checkbox-container.disabled-blue .ca-checkbox-disabled-blue{height:14px;width:14px;line-height:15px;position:relative;bottom:2px}.ca-checkbox-container.disabled-blue .ca-checkbox-disabled-blue svg path{fill:#6692f1!important}.ca-checkbox-container.disabled-blue .ca-checkbox-label-blue{font-weight:500!important;color:#424242!important;position:relative;bottom:1px}.ca-checkbox-container.disabled-regular-check{pointer-events:none!important}.ca-checkbox-container.disabled-regular-check .ca-checkbox-disabled-regular-check{background:#e5e5e5;height:14px;width:14px}.ca-checkbox-container.disabled-regular-check .ca-checkbox-disabled-regular-check svg{height:10px;width:10px}.ca-checkbox-container.disabled-regular-check .ca-checkbox-disabled-regular-check svg path{fill:#6c6c6c!important}.ca-checkbox-container.disabled-regular-check .ca-checkbox-label-regular-check{font-weight:700!important;color:#424242!important}.ca-checkbox-container.medium .ca-checkbox-label{font-weight:500!important;color:#6c6c6c}.ca-checkbox-container.regular label{line-height:17px}.ca-checkbox-container.regular .ca-checkbox-label{font-weight:400;color:#aaa;color:#6c6c6c}.ca-checkbox-container.billing-address{margin-bottom:12px;position:relative;left:1px;top:0}.ca-checkbox-container.billing-address.checked{margin-bottom:22px}.ca-checkbox-container.shipper-hours{margin-bottom:10px;position:relative;left:6px;top:0}.ca-checkbox-container.bold-12 .ca-checkbox-label{font-weight:700!important;font-size:12px}.ca-checkbox-container.bold-14 .ca-checkbox-label{font-weight:800!important;font-size:14px}.ca-checkbox-container.regular-14 .ca-checkbox-label{font-weight:400!important;font-size:14px}.ca-checkbox-container.medium-14 .ca-checkbox-label{font-weight:500!important;font-size:14px}.ca-checkbox-container.label-black .ca-checkbox-label{color:#2f2f2f}.ca-checkbox-container.text-align-center label{align-items:unset}.ca-checkbox-container.text-align-center .ca-checkbox-label{text-align:center}.ca-checkbox-container.line-height-18 .ca-checkbox-label{line-height:18px}.ca-checkbox-container.line-height-18 .ca-checkbox-label:before{content:\"\";display:block;height:0;width:0;margin-top:-.1425em}.ca-checkbox-container.dropdown-column .ca-checkbox-label{color:#fff}.ca-checkbox-container.dropdown-column .ca-checkbox:checked~.ca-checkbox-label{font-weight:700!important;color:#fff!important}.ca-checkbox-container.dropdown-column .ca-checkbox:checked~.ca-checkbox-label.ca-checkbox-label-disabled{pointer-events:none!important}.ca-checkbox-container.dropdown-column:hover .ca-checkbox~.ca-checkbox-label{color:#fff}.ca-checkbox-container.dropdown-column .ca-mark{background-color:#919191}.ca-checkbox-container.dropdown-column .ca-mark.minus:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 0px 0;transform:rotate(90deg)!important}.ca-checkbox-container.dropdown-column.disabled svg-icon{position:relative;bottom:1px;width:14px;height:15px;line-height:14px}.ca-checkbox-container.dropdown-column.disabled svg-icon svg path{fill:#6692f1!important}.ca-checkbox-container.dropdown-column.disabled .ca-checkbox-label{font-weight:700!important;color:#fff!important}.ca-checkbox-container.dropdown-column .ca-checkbox:checked~.ca-mark{background-color:#6692f1}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
19363
19363
|
// modules
|
|
19364
19364
|
CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { 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: "directive", type: i3.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:
|
|
19365
19365
|
// components
|
|
@@ -19376,7 +19376,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
19376
19376
|
NgbModule,
|
|
19377
19377
|
// components
|
|
19378
19378
|
CaAppTooltipV2Component,
|
|
19379
|
-
], template: "<div class=\"d-flex align-items-center h-100\">\n @let isCheckboxDisabled = disabled || disabledStillCheckMark;\n @if (isUseCarrieraACHCheckBox) {\n <div\n [ngClass]=\"{\n disabled: isCheckboxDisabled,\n 'disabled-blue': isDisabledBlue,\n 'ca-dark-bg': isDarkBackgroundCheckbox,\n }\"\n class=\"d-flex align-items-center ca-checkbox-container {{\n customClass\n }}\"\n >\n <label\n class=\"d-flex align-items-center\"\n [for]=\"name\"\n (click)=\"onAction($event)\"\n >\n <input\n type=\"checkbox\"\n class=\"a-checkbox\"\n [name]=\"name\"\n [id]=\"name\"\n [checked]=\"getSuperControl?.value\"\n (change)=\"onChange($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n\n @if (!disabled || getSuperControl?.value) {\n <span class=\"ca-mark position-absolute\"></span>\n }\n\n <svg-icon\n class=\"carriera-icon\"\n [src]=\"\n getSuperControl?.value\n ? checkboxSvgRoutes.carrieraLogoActiveIcon\n : checkboxSvgRoutes.carrieraLogoInactiveIcon\n \"\n ></svg-icon>\n </label>\n </div>\n } @else {\n <div\n [ngClass]=\"{\n disabled: isCheckboxDisabled,\n 'disabled-blue': isDisabledBlue,\n 'disabled-regular-check': isDisabledRegularCheck,\n 'top-0': isMarginTopReset,\n }\"\n class=\"ca-checkbox-container d-flex align-items-center {{\n customClass\n }}\"\n [class.ca-dark-bg]=\"isDarkBackgroundCheckbox\"\n >\n <label\n class=\"d-flex align-items-center\"\n [ngClass]=\"{ 'h-26': isModalCheckbox }\"\n [for]=\"name\"\n (click)=\"onAction($event)\"\n >\n @if (\n getSuperControl?.errors?.['required'] &&\n getSuperControl?.touched\n ) {\n <span class=\"required-text-checkbox ca-font-semi-bold\">\n Required\n </span>\n }\n\n @let checkboxSizeClass =\n isModalCheckbox ? 'h-14 w-14' : 'h-18 w-18';\n <div\n class=\"position-relative d-flex align-items-center justify-content-center ca-checkbox-input-container\"\n [ngClass]=\"checkboxSizeClass\"\n >\n @if (\n (!disabled || disabledStillCheckMark) &&\n !isDisabledBlue &&\n !isDisabledRegularCheck\n ) {\n <input\n type=\"checkbox\"\n class=\"ca-checkbox position-absolute\"\n [name]=\"name\"\n [id]=\"name\"\n (click)=\"$event.stopPropagation()\"\n [checked]=\"\n !isRegularCheckbox\n ? isChecked\n : getSuperControl?.value\n \"\n (change)=\"onChange($event)\"\n />\n }\n\n @if (\n (!disabled ||\n (disabledStillCheckMark &&\n getSuperControl?.value)) &&\n !isDisabledBlue &&\n !isDisabledRegularCheck\n ) {\n <span\n class=\"ca-mark position-relative\"\n [ngClass]=\"{\n invalid:\n getSuperControl?.errors?.['required'] &&\n getSuperControl?.touched,\n disabled: disabledStillCheckMark,\n 'down-position': moveIconDown,\n minus: isGroupPartialyChecked,\n }\"\n ngbTooltip\n [mainCaTooltip]=\"\n getSuperControl?.value || isChecked\n ? eGeneralActions.CLEAR\n : eGeneralActions.SELECT\n \"\n [tooltipMarginTop]=\"'5px'\"\n [tooltipBackground]=\"eColor.BLACK\"\n position=\"bottom\"\n (click)=\"$event.stopPropagation()\"\n ></span>\n }\n\n @if (isDisabledRegularCheck) {\n <svg-icon\n class=\"d-flex justify-content-center align-items-center ca-checkbox-disabled-regular-check\"\n [src]=\"checkboxSvgRoutes.checkedIcon\"\n ></svg-icon>\n }\n\n @if (isDisabledBlue) {\n <svg-icon\n class=\"ca-checkbox-disabled-blue\"\n [src]=\"checkboxSvgRoutes.disabledIcon\"\n ></svg-icon>\n }\n\n @if (disabled && !disabledStillCheckMark) {\n <div\n class=\"d-flex\"\n ngbTooltip\n [mainCaTooltip]=\"'Disabled'\"\n [tooltipBackground]=\"eColor.LIGHT_GREY\"\n [tooltipColor]=\"eColor.DARK_GREY\"\n position=\"bottom\"\n >\n <svg-icon\n class=\"ca-checkbox-disabled\"\n [class.dark-disabled-icon]=\"\n isBlackLabelCheckbox\n \"\n [src]=\"checkboxSvgRoutes.disabledIcon\"\n ></svg-icon>\n </div>\n }\n </div>\n\n @if (svg) {\n <svg-icon\n class=\"ca-checkbox-svg {{ svgCustomClass }}\"\n [src]=\"svg\"\n ></svg-icon>\n }\n\n @if (label) {\n <span\n class=\"ca-checkbox-label\"\n [ngClass]=\"{\n 'ca-checkbox-label-blue': isDisabledBlue,\n 'ca-checkbox-label-regular-check':\n isDisabledRegularCheck,\n 'ca-checkbox-label-disabled': isLabelDisabled,\n 'ca-font-bold': !isBlackLabelCheckbox && isChecked,\n 'ca-font-extra-bold text-size-14': isModalCheckbox,\n 'text-color-white': !isBlackLabelCheckbox,\n 'text-color-light-grey-2':\n !isInputChecked && isBlackLabelCheckbox,\n 'text-color-black':\n isInputChecked && isBlackLabelCheckbox,\n 'text-color-bw6-2':\n isModalCheckbox && !isInputChecked,\n }\"\n (click)=\"!isRegularCheckbox && $event.preventDefault()\"\n >\n {{ label }}\n @if (required) {\n <span class=\"ca-checkbox-label-required\">*</span>\n }\n </span>\n }\n </label>\n </div>\n }\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}}.ca-checkbox-container{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:transform .3s ease-in-out}.ca-checkbox-container .required-text-checkbox{position:absolute;left:-72px;font-size:14px;color:#f44336;line-height:18px}.ca-checkbox-container .ca-checkbox{visibility:hidden;cursor:pointer}.ca-checkbox-container .ca-mark{height:14px;width:14px;background-color:#ccc;border-radius:2px;cursor:pointer;transition:transform .1s cubic-bezier(.46,.03,.51,.95),background-color .1s cubic-bezier(.46,.03,.51,.95)}.ca-checkbox-container .ca-mark:hover{transform:scale(1.29)}.ca-checkbox-container .ca-mark:active{transform:scale(1)}.ca-checkbox-container .ca-mark:after{content:\"\";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .1s cubic-bezier(.46,.03,.51,.95)}.ca-checkbox-container .ca-mark.invalid{background-color:#f44336!important}.ca-checkbox-container .ca-mark.disabled,.ca-checkbox-container .ca-mark.disabled:hover{background-color:#6d82c7!important}.ca-checkbox-container .ca-mark.down-position{top:3px}.ca-checkbox-container:hover .ca-checkbox~.ca-mark{background-color:#919191}.ca-checkbox-container:hover .ca-checkbox~.ca-checkbox-label{color:#424242}.ca-checkbox-container .ca-checkbox:checked~.ca-mark{background-color:#3b73ed}.ca-checkbox-container .ca-checkbox:hover~.ca-mark{background-color:#919191!important}.ca-checkbox-container .ca-checkbox:checked:hover~.ca-mark{background-color:#255bb9!important}.ca-checkbox-container .ca-checkbox:checked~.ca-mark:after{transform:rotate(45deg) scale(1);display:block}.ca-checkbox-container.ca-dark-bg .ca-checkbox:hover~.ca-mark{background-color:#dadada!important}.ca-checkbox-container.ca-dark-bg .ca-checkbox:checked:hover~.ca-mark{background-color:#92b1f5!important}.ca-checkbox-container .ca-checkbox-svg{margin-left:10px;margin-right:4px}.ca-checkbox-container .ca-checkbox-label{cursor:pointer;color:#6c6c6c;font-size:14px;margin-left:6px;position:relative;line-height:14px}.ca-checkbox-container .ca-checkbox-label::-moz-selection{color:#6c6c6c;background:#6c6c6c33}.ca-checkbox-container .ca-checkbox-label::selection{color:#6c6c6c;background:#6c6c6c33}.ca-checkbox-container .ca-checkbox-label-required{color:#f44336}.ca-checkbox-container .carriera-icon{line-height:10px;margin-left:6px;cursor:pointer}.ca-checkbox-container.disabled .ca-checkbox-disabled{height:14px;width:14px;line-height:15px;position:relative;bottom:2px}.ca-checkbox-container.disabled .ca-checkbox-disabled svg path{fill:#fff!important}.ca-checkbox-container.disabled .ca-checkbox-disabled.dark-disabled-icon svg path{fill:#ccc!important}.ca-checkbox-container.disabled .ca-checkbox-label{color:#aaa!important;cursor:auto}.ca-checkbox-container.disabled.disabled-valid svg path{fill:#6d82c7!important}.ca-checkbox-container.disabled.disabled-valid .ca-checkbox-label{font-weight:500!important;color:#6c6c6c!important}.ca-checkbox-container.disabled-blue{pointer-events:none!important}.ca-checkbox-container.disabled-blue .ca-checkbox-disabled-blue{height:14px;width:14px;line-height:15px;position:relative;bottom:2px}.ca-checkbox-container.disabled-blue .ca-checkbox-disabled-blue svg path{fill:#6692f1!important}.ca-checkbox-container.disabled-blue .ca-checkbox-label-blue{font-weight:500!important;color:#424242!important;position:relative;bottom:1px}.ca-checkbox-container.disabled-regular-check{pointer-events:none!important}.ca-checkbox-container.disabled-regular-check .ca-checkbox-disabled-regular-check{background:#e5e5e5;height:14px;width:14px}.ca-checkbox-container.disabled-regular-check .ca-checkbox-disabled-regular-check svg{height:10px;width:10px}.ca-checkbox-container.disabled-regular-check .ca-checkbox-disabled-regular-check svg path{fill:#6c6c6c!important}.ca-checkbox-container.disabled-regular-check .ca-checkbox-label-regular-check{font-weight:700!important;color:#424242!important}.ca-checkbox-container.medium .ca-checkbox-label{font-weight:500!important;color:#6c6c6c}.ca-checkbox-container.regular label{line-height:17px}.ca-checkbox-container.regular .ca-checkbox-label{font-weight:400;color:#aaa;color:#6c6c6c}.ca-checkbox-container.billing-address{margin-bottom:12px;position:relative;left:1px;top:0}.ca-checkbox-container.billing-address.checked{margin-bottom:22px}.ca-checkbox-container.shipper-hours{margin-bottom:10px;position:relative;left:6px;top:0}.ca-checkbox-container.bold-12 .ca-checkbox-label{font-weight:700!important;font-size:12px}.ca-checkbox-container.bold-14 .ca-checkbox-label{font-weight:800!important;font-size:14px}.ca-checkbox-container.regular-14 .ca-checkbox-label{font-weight:400!important;font-size:14px}.ca-checkbox-container.medium-14 .ca-checkbox-label{font-weight:500!important;font-size:14px}.ca-checkbox-container.label-black .ca-checkbox-label{color:#2f2f2f}.ca-checkbox-container.text-align-center label{align-items:unset}.ca-checkbox-container.text-align-center .ca-checkbox-label{text-align:center}.ca-checkbox-container.line-height-18 .ca-checkbox-label{line-height:18px}.ca-checkbox-container.line-height-18 .ca-checkbox-label:before{content:\"\";display:block;height:0;width:0;margin-top:-.1425em}.ca-checkbox-container.dropdown-column .ca-checkbox-label{color:#fff}.ca-checkbox-container.dropdown-column .ca-checkbox:checked~.ca-checkbox-label{font-weight:700!important;color:#fff!important}.ca-checkbox-container.dropdown-column .ca-checkbox:checked~.ca-checkbox-label.ca-checkbox-label-disabled{pointer-events:none!important}.ca-checkbox-container.dropdown-column:hover .ca-checkbox~.ca-checkbox-label{color:#fff}.ca-checkbox-container.dropdown-column .ca-mark{background-color:#919191}.ca-checkbox-container.dropdown-column .ca-mark.minus:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 0px 0;transform:rotate(90deg)!important}.ca-checkbox-container.dropdown-column.disabled svg-icon{position:relative;bottom:1px;width:14px;height:15px;line-height:14px}.ca-checkbox-container.dropdown-column.disabled svg-icon svg path{fill:#6692f1!important}.ca-checkbox-container.dropdown-column.disabled .ca-checkbox-label{font-weight:700!important;color:#fff!important}.ca-checkbox-container.dropdown-column .ca-checkbox:checked~.ca-mark{background-color:#6692f1}\n"] }]
|
|
19379
|
+
], template: "<div class=\"d-flex align-items-center h-100\">\n @let isCheckboxDisabled = disabled || disabledStillCheckMark;\n @if (isUseCarrieraACHCheckBox) {\n <div\n [ngClass]=\"{\n disabled: isCheckboxDisabled,\n 'disabled-blue': isDisabledBlue,\n 'ca-dark-bg': isDarkBackgroundCheckbox,\n }\"\n class=\"d-flex align-items-center ca-checkbox-container {{\n customClass\n }}\"\n >\n <label\n class=\"d-flex align-items-center\"\n [for]=\"name\"\n (click)=\"onAction($event)\"\n >\n <input\n type=\"checkbox\"\n class=\"a-checkbox\"\n [name]=\"name\"\n [id]=\"name\"\n [checked]=\"getSuperControl?.value\"\n (change)=\"onChange($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n\n @if (!disabled || getSuperControl?.value) {\n <span class=\"ca-mark position-absolute\"></span>\n }\n\n <svg-icon\n class=\"carriera-icon\"\n [src]=\"\n getSuperControl?.value\n ? checkboxSvgRoutes.carrieraLogoActiveIcon\n : checkboxSvgRoutes.carrieraLogoInactiveIcon\n \"\n ></svg-icon>\n </label>\n </div>\n } @else {\n <div\n [ngClass]=\"{\n disabled: isCheckboxDisabled,\n 'disabled-blue': isDisabledBlue,\n 'disabled-regular-check': isDisabledRegularCheck,\n 'top-0': isMarginTopReset,\n }\"\n class=\"ca-checkbox-container d-flex align-items-center {{\n customClass\n }}\"\n [class.ca-dark-bg]=\"isDarkBackgroundCheckbox\"\n >\n <label\n class=\"d-flex align-items-center\"\n [ngClass]=\"{ 'h-26': isModalCheckbox }\"\n [for]=\"name\"\n (click)=\"onAction($event)\"\n >\n @if (\n getSuperControl?.errors?.['required'] &&\n getSuperControl?.touched\n ) {\n <span class=\"required-text-checkbox ca-font-semi-bold\">\n Required\n </span>\n }\n\n @let checkboxSizeClass =\n isModalCheckbox ? 'h-14 w-14' : 'h-18 w-18';\n <div\n class=\"position-relative d-flex align-items-center justify-content-center ca-checkbox-input-container\"\n [ngClass]=\"checkboxSizeClass\"\n >\n @if (\n (!disabled || disabledStillCheckMark) &&\n !isDisabledBlue &&\n !isDisabledRegularCheck\n ) {\n <input\n type=\"checkbox\"\n class=\"ca-checkbox position-absolute\"\n [name]=\"name\"\n [id]=\"name\"\n (click)=\"$event.stopPropagation()\"\n [checked]=\"\n !isRegularCheckbox\n ? isChecked\n : getSuperControl?.value\n \"\n (change)=\"onChange($event)\"\n />\n }\n\n @if (\n (!disabled ||\n (disabledStillCheckMark &&\n getSuperControl?.value)) &&\n !isDisabledBlue &&\n !isDisabledRegularCheck\n ) {\n <span\n class=\"ca-mark position-relative\"\n [ngClass]=\"{\n invalid:\n getSuperControl?.errors?.['required'] &&\n getSuperControl?.touched,\n disabled: disabledStillCheckMark,\n 'down-position': moveIconDown,\n minus: isGroupPartialyChecked,\n }\"\n ngbTooltip\n [mainCaTooltip]=\"\n getSuperControl?.value || isChecked\n ? eGeneralActions.CLEAR\n : eGeneralActions.SELECT\n \"\n [tooltipMarginTop]=\"'5px'\"\n [tooltipBackground]=\"eColor.BLACK\"\n position=\"bottom\"\n (click)=\"$event.stopPropagation()\"\n ></span>\n }\n\n @if (isDisabledRegularCheck) {\n <svg-icon\n class=\"d-flex justify-content-center align-items-center ca-checkbox-disabled-regular-check\"\n [src]=\"checkboxSvgRoutes.checkedIcon\"\n ></svg-icon>\n }\n\n @if (isDisabledBlue) {\n <svg-icon\n class=\"ca-checkbox-disabled-blue\"\n [src]=\"checkboxSvgRoutes.disabledIcon\"\n ></svg-icon>\n }\n\n @if (disabled && !disabledStillCheckMark) {\n <div\n class=\"d-flex\"\n ngbTooltip\n [mainCaTooltip]=\"'Disabled'\"\n [tooltipBackground]=\"eColor.LIGHT_GREY\"\n [tooltipColor]=\"eColor.DARK_GREY\"\n position=\"bottom\"\n >\n <svg-icon\n class=\"ca-checkbox-disabled\"\n [class.dark-disabled-icon]=\"\n isBlackLabelCheckbox\n \"\n [src]=\"checkboxSvgRoutes.disabledIcon\"\n ></svg-icon>\n </div>\n }\n </div>\n\n @if (svg) {\n <svg-icon\n class=\"ca-checkbox-svg {{ svgCustomClass }}\"\n [src]=\"svg\"\n ></svg-icon>\n }\n\n @if (label) {\n <span\n class=\"ca-checkbox-label\"\n [ngClass]=\"{\n 'ca-checkbox-label-blue': isDisabledBlue,\n 'ca-checkbox-label-regular-check':\n isDisabledRegularCheck,\n 'ca-checkbox-label-disabled': isLabelDisabled,\n 'ca-font-bold': !isBlackLabelCheckbox && isChecked,\n 'ca-font-extra-bold text-size-14': isModalCheckbox,\n 'text-color-white': !isBlackLabelCheckbox,\n 'text-color-light-grey-2':\n !isInputChecked && isBlackLabelCheckbox,\n 'text-color-black':\n isInputChecked && isBlackLabelCheckbox,\n 'text-color-bw6-2':\n isModalCheckbox && !isInputChecked,\n }\"\n (click)=\"!isRegularCheckbox && $event.preventDefault()\"\n >\n {{ label }}\n @if (required) {\n <span class=\"ca-checkbox-label-required\">*</span>\n }\n </span>\n }\n </label>\n </div>\n }\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}}.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}.ca-checkbox-container{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:transform .3s ease-in-out}.ca-checkbox-container .required-text-checkbox{position:absolute;left:-72px;font-size:14px;color:#f44336;line-height:18px}.ca-checkbox-container .ca-checkbox{visibility:hidden;cursor:pointer}.ca-checkbox-container .ca-mark{height:14px;width:14px;background-color:#ccc;border-radius:2px;cursor:pointer;transition:transform .1s cubic-bezier(.46,.03,.51,.95),background-color .1s cubic-bezier(.46,.03,.51,.95)}.ca-checkbox-container .ca-mark:hover{transform:scale(1.29)}.ca-checkbox-container .ca-mark:active{transform:scale(1)}.ca-checkbox-container .ca-mark:after{content:\"\";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .1s cubic-bezier(.46,.03,.51,.95)}.ca-checkbox-container .ca-mark.invalid{background-color:#f44336!important}.ca-checkbox-container .ca-mark.disabled,.ca-checkbox-container .ca-mark.disabled:hover{background-color:#6d82c7!important}.ca-checkbox-container .ca-mark.down-position{top:3px}.ca-checkbox-container:hover .ca-checkbox~.ca-mark{background-color:#919191}.ca-checkbox-container:hover .ca-checkbox~.ca-checkbox-label{color:#424242}.ca-checkbox-container .ca-checkbox:checked~.ca-mark{background-color:#3b73ed}.ca-checkbox-container .ca-checkbox:hover~.ca-mark{background-color:#919191!important}.ca-checkbox-container .ca-checkbox:checked:hover~.ca-mark{background-color:#255bb9!important}.ca-checkbox-container .ca-checkbox:checked~.ca-mark:after{transform:rotate(45deg) scale(1);display:block}.ca-checkbox-container.ca-dark-bg .ca-checkbox:hover~.ca-mark{background-color:#dadada!important}.ca-checkbox-container.ca-dark-bg .ca-checkbox:checked:hover~.ca-mark{background-color:#92b1f5!important}.ca-checkbox-container .ca-checkbox-svg{margin-left:10px;margin-right:4px}.ca-checkbox-container .ca-checkbox-label{cursor:pointer;color:#6c6c6c;font-size:14px;margin-left:6px;position:relative;line-height:14px}.ca-checkbox-container .ca-checkbox-label::-moz-selection{color:#6c6c6c;background:#6c6c6c33}.ca-checkbox-container .ca-checkbox-label::selection{color:#6c6c6c;background:#6c6c6c33}.ca-checkbox-container .ca-checkbox-label-required{color:#f44336}.ca-checkbox-container .carriera-icon{line-height:10px;margin-left:6px;cursor:pointer}.ca-checkbox-container.disabled .ca-checkbox-disabled{height:14px;width:14px;line-height:15px;position:relative;bottom:2px}.ca-checkbox-container.disabled .ca-checkbox-disabled svg path{fill:#fff!important}.ca-checkbox-container.disabled .ca-checkbox-disabled.dark-disabled-icon svg path{fill:#ccc!important}.ca-checkbox-container.disabled .ca-checkbox-label{color:#aaa!important;cursor:auto}.ca-checkbox-container.disabled.disabled-valid svg path{fill:#6d82c7!important}.ca-checkbox-container.disabled.disabled-valid .ca-checkbox-label{font-weight:500!important;color:#6c6c6c!important}.ca-checkbox-container.disabled-blue{pointer-events:none!important}.ca-checkbox-container.disabled-blue .ca-checkbox-disabled-blue{height:14px;width:14px;line-height:15px;position:relative;bottom:2px}.ca-checkbox-container.disabled-blue .ca-checkbox-disabled-blue svg path{fill:#6692f1!important}.ca-checkbox-container.disabled-blue .ca-checkbox-label-blue{font-weight:500!important;color:#424242!important;position:relative;bottom:1px}.ca-checkbox-container.disabled-regular-check{pointer-events:none!important}.ca-checkbox-container.disabled-regular-check .ca-checkbox-disabled-regular-check{background:#e5e5e5;height:14px;width:14px}.ca-checkbox-container.disabled-regular-check .ca-checkbox-disabled-regular-check svg{height:10px;width:10px}.ca-checkbox-container.disabled-regular-check .ca-checkbox-disabled-regular-check svg path{fill:#6c6c6c!important}.ca-checkbox-container.disabled-regular-check .ca-checkbox-label-regular-check{font-weight:700!important;color:#424242!important}.ca-checkbox-container.medium .ca-checkbox-label{font-weight:500!important;color:#6c6c6c}.ca-checkbox-container.regular label{line-height:17px}.ca-checkbox-container.regular .ca-checkbox-label{font-weight:400;color:#aaa;color:#6c6c6c}.ca-checkbox-container.billing-address{margin-bottom:12px;position:relative;left:1px;top:0}.ca-checkbox-container.billing-address.checked{margin-bottom:22px}.ca-checkbox-container.shipper-hours{margin-bottom:10px;position:relative;left:6px;top:0}.ca-checkbox-container.bold-12 .ca-checkbox-label{font-weight:700!important;font-size:12px}.ca-checkbox-container.bold-14 .ca-checkbox-label{font-weight:800!important;font-size:14px}.ca-checkbox-container.regular-14 .ca-checkbox-label{font-weight:400!important;font-size:14px}.ca-checkbox-container.medium-14 .ca-checkbox-label{font-weight:500!important;font-size:14px}.ca-checkbox-container.label-black .ca-checkbox-label{color:#2f2f2f}.ca-checkbox-container.text-align-center label{align-items:unset}.ca-checkbox-container.text-align-center .ca-checkbox-label{text-align:center}.ca-checkbox-container.line-height-18 .ca-checkbox-label{line-height:18px}.ca-checkbox-container.line-height-18 .ca-checkbox-label:before{content:\"\";display:block;height:0;width:0;margin-top:-.1425em}.ca-checkbox-container.dropdown-column .ca-checkbox-label{color:#fff}.ca-checkbox-container.dropdown-column .ca-checkbox:checked~.ca-checkbox-label{font-weight:700!important;color:#fff!important}.ca-checkbox-container.dropdown-column .ca-checkbox:checked~.ca-checkbox-label.ca-checkbox-label-disabled{pointer-events:none!important}.ca-checkbox-container.dropdown-column:hover .ca-checkbox~.ca-checkbox-label{color:#fff}.ca-checkbox-container.dropdown-column .ca-mark{background-color:#919191}.ca-checkbox-container.dropdown-column .ca-mark.minus:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 0px 0;transform:rotate(90deg)!important}.ca-checkbox-container.dropdown-column.disabled svg-icon{position:relative;bottom:1px;width:14px;height:15px;line-height:14px}.ca-checkbox-container.dropdown-column.disabled svg-icon svg path{fill:#6692f1!important}.ca-checkbox-container.dropdown-column.disabled .ca-checkbox-label{font-weight:700!important;color:#fff!important}.ca-checkbox-container.dropdown-column .ca-checkbox:checked~.ca-mark{background-color:#6692f1}\n"] }]
|
|
19380
19380
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i1$2.NgControl, decorators: [{
|
|
19381
19381
|
type: Self
|
|
19382
19382
|
}, {
|
|
@@ -19497,7 +19497,6 @@ class CaDropdownMenuComponent {
|
|
|
19497
19497
|
this.isSelectMenuTypeActionItemSelected = false;
|
|
19498
19498
|
this.isBackToMainDropdownItemHovered = false;
|
|
19499
19499
|
this.isResetTableHovered = false;
|
|
19500
|
-
this.isActionLocked = false;
|
|
19501
19500
|
}
|
|
19502
19501
|
handleCheckboxAction(action) {
|
|
19503
19502
|
const { groupIndex, itemIndex } = action;
|
|
@@ -19586,9 +19585,6 @@ class CaDropdownMenuComponent {
|
|
|
19586
19585
|
return;
|
|
19587
19586
|
}
|
|
19588
19587
|
// regular dropdown option click - emit id if type is not present (select menu simple items)
|
|
19589
|
-
if (this.isActionLocked)
|
|
19590
|
-
return;
|
|
19591
|
-
this.isActionLocked = true;
|
|
19592
19588
|
this.dropdownOptionEmitter.emit(type ? { type } : { id });
|
|
19593
19589
|
if (this.type !== eDropdownMenu.SELECT_MENU_TYPE ||
|
|
19594
19590
|
!isSelectMenuTypeActionItem) {
|
|
@@ -19601,7 +19597,6 @@ class CaDropdownMenuComponent {
|
|
|
19601
19597
|
if (dropdownPopover.isOpen()) {
|
|
19602
19598
|
dropdownPopover.close();
|
|
19603
19599
|
this.dropdownPopover = null;
|
|
19604
|
-
this.isActionLocked = false;
|
|
19605
19600
|
this.dropdownOptionEmitter.emit({
|
|
19606
19601
|
type: eDropdownMenu.CLOSE,
|
|
19607
19602
|
});
|
|
@@ -19610,7 +19605,6 @@ class CaDropdownMenuComponent {
|
|
|
19610
19605
|
this.dropdownPopover?.close();
|
|
19611
19606
|
this.dropdownPopover = dropdownPopover;
|
|
19612
19607
|
this.dropdownPopover.open();
|
|
19613
|
-
this.isActionLocked = false;
|
|
19614
19608
|
this.dropdownOptionEmitter.emit({
|
|
19615
19609
|
type: eDropdownMenu.OPEN,
|
|
19616
19610
|
});
|
|
@@ -19634,13 +19628,12 @@ class CaDropdownMenuComponent {
|
|
|
19634
19628
|
}
|
|
19635
19629
|
handleDropdownClose() {
|
|
19636
19630
|
this.dropdownPopover = null;
|
|
19637
|
-
this.isActionLocked = false;
|
|
19638
19631
|
this.dropdownOptionEmitter.emit({
|
|
19639
19632
|
type: eDropdownMenu.CLOSE,
|
|
19640
19633
|
});
|
|
19641
19634
|
}
|
|
19642
19635
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CaDropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
19643
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaDropdownMenuComponent, isStandalone: true, selector: "ca-dropdown-menu", inputs: { type: "type", options: "options", placement: "placement", popoverClass: "popoverClass", isDarkBackground: "isDarkBackground", isLeftSideIconPosition: "isLeftSideIconPosition", isColumnsDropdown: "isColumnsDropdown" }, outputs: { dropdownOptionEmitter: "dropdownOptionEmitter" }, ngImport: i0, template: "<div\n class=\"d-flex align-items-center dropdown-menu-container\"\n [ngClass]=\"type | dropdownMenuPlacementClass\"\n>\n <!-- Icon -->\n\n @let dropdownMenuPopoverClass = `dropdown-menu-popover ${popoverClass}`;\n\n <div\n #dropdownPopover=\"ngbPopover\"\n triggers=\"'manual'\"\n [ngbPopover]=\"dropdownOptions\"\n [autoClose]=\"'outside'\"\n [placement]=\"placement\"\n [popoverClass]=\"dropdownMenuPopoverClass\"\n [container]=\"'body'\"\n (click)=\"handleDropdownOpenCloseClick(dropdownPopover)\"\n (hidden)=\"handleDropdownClose()\"\n >\n @let tooltipText =\n type === eDropdownMenu.HAMBURGER_MENU_TYPE\n ? isDropdownMenuActive\n ? eDropdownMenu.CLOSE_MENU\n : eDropdownMenu.OPEN_MENU\n : eDropdownMenu.MORE;\n <div\n class=\"d-flex align-items-center justify-content-center p-4 dropdown-icon-container\"\n [ngClass]=\"{\n active: dropdownPopover.isOpen(),\n 'dark-background': isDarkBackground,\n }\"\n ngbTooltip\n [mainCaTooltip]=\"tooltipText\"\n [tooltipBackground]=\"isDropdownMenuActive ? '#CCCCCC' : '#424242'\"\n [tooltipColor]=\"isDropdownMenuActive ? '#2F2F2F' : '#FFFFFF'\"\n [tooltipMarginTop]=\"'4px'\"\n [position]=\"'bottom'\"\n >\n <svg-icon\n class=\"icon svg-size-18 d-flex align-items-center\"\n [src]=\"\n type === eDropdownMenu.DOTS_MENU_TYPE\n ? dropdownMenuSvgRoutes.dotsDropdownIcon\n : dropdownMenuSvgRoutes.hamburgerDropdownIcon\n \"\n ></svg-icon>\n </div>\n </div>\n\n <!-- Dropdown -->\n\n <ng-template #dropdownOptions>\n <div class=\"d-flex flex-column dropdown-container\">\n @for (\n option of options;\n let optionIndex = $index,\n last = $last;\n track optionIndex\n ) {\n @if (option) {\n <div\n class=\"d-flex flex-column dropdown-item\"\n [ngClass]=\"{\n 'has-border': option?.hasBorder && !last,\n disabled: option?.isDisabled,\n 'icon-left': isLeftSideIconPosition,\n 'checkbox-disabled': option?.isCheckBoxDisabled,\n 'sticky-item':\n option?.isColumnDropdown && optionIndex === 0,\n }\"\n >\n <div\n class=\"d-flex flex-column mb-1\"\n [ngClass]=\"{\n 'inner-dropdown-item':\n !!option?.innerDropdownContent,\n active:\n optionIndex ===\n activeInnerDropdownOptionIndex,\n }\"\n >\n @let dropdownItemOptionClass =\n isLeftSideIconPosition\n ? 'gap-6'\n : isBackToMainDropdownItemHovered &&\n !isColumnsDropdown &&\n option.isColumnDropdown &&\n optionIndex === 0\n ? 'justify-content-between'\n : 'justify-content-between gap-6';\n <div\n class=\"d-flex align-items-center w-100 dropdown-item-option\"\n [ngClass]=\"dropdownItemOptionClass\"\n (click)=\"\n handleDropdownOptionClick(\n option,\n optionIndex\n )\n \"\n (mouseenter)=\"\n option.isColumnDropdown &&\n optionIndex === 0 &&\n handleBackToMainDropdownListItemHover(\n true\n )\n \"\n (mouseleave)=\"\n option.isColumnDropdown &&\n optionIndex === 0 &&\n handleBackToMainDropdownListItemHover(\n false\n )\n \"\n >\n @if (\n option.isColumnDropdown && optionIndex > 0\n ) {\n <app-ca-checkbox\n [label]=\"option.title\"\n [name]=\"option.type ?? option.title\"\n [itemIndex]=\"optionIndex\"\n [isRegularCheckbox]=\"false\"\n [isChecked]=\"option?.isChecked\"\n [isGroupPartialyChecked]=\"\n option | groupItemCheckedState\n \"\n [customClass]=\"'dropdown-column'\"\n [disabled]=\"option?.isCheckBoxDisabled\"\n [isLabelDisabled]=\"false\"\n [isDarkBackgroundCheckbox]=\"true\"\n (columnCheckAction)=\"\n handleCheckboxActionEmit($event)\n \"\n ></app-ca-checkbox>\n\n @if (option?.innerDropdownContent) {\n <svg-icon\n [src]=\"\n dropdownMenuSvgRoutes.showMoreIcon\n \"\n class=\"w-12 h-12 svg-size-12 d-flex dropdown-item-option-icon regular\"\n ></svg-icon>\n }\n } @else {\n <p\n class=\"m-0 text-size-14 text-color-white d-flex\"\n [ngClass]=\"{\n 'ca-font-bold':\n optionIndex ===\n activeInnerDropdownOptionIndex,\n }\"\n [ngClass]=\"option?.titleOptionalClass\"\n >\n @if (\n isBackToMainDropdownItemHovered &&\n !isColumnsDropdown\n ) {\n <svg-icon\n class=\"w-18 h-18 svg-size-18 d-flex align-items-center justify-content-center svg-fill-muted m-r-6\"\n [src]=\"\n dropdownMenuSvgRoutes.backToMenuIcon\n \"\n ></svg-icon>\n }\n @let dropdownItemOptionTitle =\n option.isColumnDropdown &&\n optionIndex === 0 &&\n isResetTableHovered\n ? eDropdownMenu.RESET_TABLE_TITLE\n : isBackToMainDropdownItemHovered &&\n !isColumnsDropdown\n ? eDropdownMenu.BACK_TO_MENU\n : option?.title;\n {{ dropdownItemOptionTitle }}\n </p>\n }\n\n @if (option?.svgUrl) {\n @let isFirstColumnDropdown =\n option.isColumnDropdown &&\n optionIndex === 0;\n <svg-icon\n class=\"dropdown-item-option-icon w-18 h-18 svg-size-18 d-flex align-items-center justify-content-center\"\n [ngClass]=\"option?.svgClass\"\n [src]=\"option?.svgUrl || ''\"\n (mouseenter)=\"\n isFirstColumnDropdown &&\n onResetTableHover()\n \"\n (mouseleave)=\"\n isFirstColumnDropdown &&\n onResetTableHover()\n \"\n (click)=\"\n isFirstColumnDropdown &&\n handleResetTableClick($event)\n \"\n ></svg-icon>\n }\n </div>\n\n <!-- Inner Dropdown -->\n\n @if (!!option?.innerDropdownContent) {\n <div\n class=\"d-flex flex-column inner-dropdown-list\"\n >\n @for (\n innerDropdownOption of option?.innerDropdownContent;\n let innerDropdownOptionIndex = $index;\n track innerDropdownOptionIndex\n ) {\n <div\n class=\"d-flex align-items-center justify-content-between gap-20 w-100 dropdown-item-option\"\n (click)=\"\n handleDropdownOptionClick(\n innerDropdownOption,\n innerDropdownOptionIndex,\n optionIndex\n )\n \"\n >\n @if (option?.isColumnDropdown) {\n <app-ca-checkbox\n [label]=\"\n innerDropdownOption.title\n \"\n [name]=\"\n innerDropdownOption.type ??\n innerDropdownOption.title\n \"\n [itemIndex]=\"\n innerDropdownOptionIndex\n \"\n [groupIndex]=\"optionIndex\"\n [isRegularCheckbox]=\"false\"\n [isChecked]=\"\n innerDropdownOption?.isChecked\n \"\n [disabled]=\"\n innerDropdownOption?.isCheckBoxDisabled\n \"\n [isLabelDisabled]=\"false\"\n [customClass]=\"\n 'dropdown-column'\n \"\n [isDarkBackgroundCheckbox]=\"\n true\n \"\n (columnCheckAction)=\"\n handleCheckboxActionEmit(\n $event\n )\n \"\n ></app-ca-checkbox>\n } @else {\n <p\n class=\"m-0 text-size-14 text-color-white\"\n >\n {{\n innerDropdownOption.title\n }}\n </p>\n }\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n }\n </div>\n </ng-template>\n</div>\n", styles: [".pickup-delivery-popover{top:-38px!important;max-width:420px!important}.pickup-delivery-popover .popover-body{transform:none;margin-left:-4px;margin-top:-1px}.pickup-delivery-popover.bs-popover-top{top:auto!important;bottom:-38px!important}.pickup-delivery-popover.bs-popover-top .load-component .assigned-load-holder{order:3;margin-top:4px;margin-bottom:0!important}.pickup-delivery-popover.bs-popover-top .load-component .statusBar{order:2;margin-top:4px}.pickup-delivery-popover.bs-popover-top .load-component .animation-three-tabs{order:1}.load-pickup-delivery-popover{top:-34px!important;max-width:400px!important}.gps_dropdown_popover{top:-38px;max-width:748px!important}.gps_dropdown_popover .popover-body{padding:0}.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;-webkit-animation:progressAnimation .25s ease-in-out;animation:progressAnimation .25s ease-in-out}.table-progress-popover .progress-dropdown .progress-header .progress-title{font-size:18px;font-weight:600;color:#fff}.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:#fff}.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:#fff}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@-webkit-keyframes progressAnimation{0%{height:0px}to{height:220px}}@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}.dispatch-note .popover-body{position:relative;top:-4px;left:-4px}.dropdown-menu-popover .popover-body{transform:none}.dropdown-menu-popover.bs-popover-end-top{margin-left:-4px!important;margin-top:-4px!important}.dropdown-menu-popover.bs-popover-bottom-end{margin-right:-4px!important;margin-top:-3px!important}.dropdown-menu-popover.bs-popover-end-bottom{margin-left:-3px!important;margin-bottom:-4px!important}.dropdown-menu-popover.bs-popover-top-end{margin-right:-4px!important;margin-bottom:-3px!important}.dropdown-menu-popover.ca-pickup-delivery-dropdown-popover.bs-popover-end-top{margin-left:0!important;margin-top:-6px!important}.dropdown-menu-popover.ca-pickup-delivery-list-dropdown-popover.bs-popover-end-top{margin-left:4px!important;margin-top:-6px!important}.dropdown-details-title-card-popover .dropdown-container{transform:translateY(-4px)}.fleet-filter-popover.bs-popover-bottom-start .fleet-filter-dropdown-container{transform:translate(-4px,-4px)!important}.fleet-filter-popover.bs-popover-top-start .fleet-filter-dropdown-container{transform:translate(-4px,4px)!important}.fleet-filter-sort-popover.bs-popover-end-top{transform:translate(158px,-3px)!important}.factoring-dropdown-popover.bs-popover-bottom-end .factoring-dropdown-container{transform:translate(4px,-4px)!important}.tooltip{font-size:12px;position:relative}.tooltip.show{opacity:1}.tooltip.fade:after,.tooltip.fade:before{transform:translateY(-10px);transition:all .15s ease-in-out}.tooltip.fade:hover:after,.tooltip.fade:hover:before{opacity:1;transform:translate(0)}.tooltip-inner{white-space:nowrap;max-width:none;border-radius:3px;font-size:11px;font-weight:600}.tooltip-inner:empty{padding:0}.placeholder-delete .tooltip-inner{background-color:#f66}.placeholder-delete .arrow:before{border-top-color:#f66}.custom-popup-owners-for-flag .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(126%) translate(-50%)!important;width:130px;border-radius:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-for-flag .arrow{bottom:-18%;transform:rotate(180deg);left:calc(50% + 2.7rem)}.custom-popup-owners-for-flag .tooltip{opacity:.93!important;width:0}.custom-popup-owners{z-index:999}.custom-popup-owners .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(132%);z-index:999;box-shadow:0 0 3px #0003}.custom-popup-owners .arrow{bottom:-20%;transform:rotate(180deg)}.custom-popup-owners .tooltip{transform:translateY(-61px)!important}.custom-popup-owners-year{z-index:999}.custom-popup-owners-year .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(132%);z-index:999;box-shadow:0 0 3px #0003}.custom-popup-owners-year .arrow{bottom:-20%;transform:rotate(180deg)}.custom-popup-owners-year .tooltip{transform:translate(70px,-61px)!important}.custom-popup-owners-info .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(-100%) translate(-10%);width:200px;height:36px;display:flex;justify-content:center;align-items:center;border-radius:3px;margin-top:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-info .tooltip{opacity:.93;width:0}.custom-popup-owners-info .arrow{display:none}.custom-popup-owners-info #phone-inside{position:relative;right:26px;bottom:0}.custom-popup-owners-info-at .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(-108%) translate(-7%);width:270px;height:36px;display:flex;justify-content:center;align-items:center;border-radius:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-info-at .tooltip{opacity:1;width:0}.custom-popup-owners-info-at .arrow{display:none}.custom-popup-owners-for-tag .tooltip-inner{color:#3b3b3b;background-color:#fff;width:100px;border-radius:3px;box-shadow:0 0 3px #0003!important}.custom-popup-owners-for-tag .tooltip{top:5px!important}.custom-popup-owners-for-tag .arrow{bottom:-24%}.align-items-flex-start{justify-content:center;align-items:center}.align-items-flex-end{display:flex;justify-content:center;flex-direction:column;align-self:flex-end;align-items:flex-start}.label-add{align-self:flex-start}.fadeInLoad{animation:fadeInLoad .25s}@keyframes fadeInLoad{0%{opacity:0}to{opacity:1}}.fadeIn{opacity:1;-webkit-transition:.25s;-moz-transition:.25s;-o-transition:.25s;transition:.25s}.thisText:hover .fadeIn{opacity:0}.fadeInLoad{animation-name:example;animation-duration:.25s}@keyframes example{0%{transform:scale(.5)}to{transform:scale(1)}}.tooltip.tooltip-table-icons{left:12px!important;opacity:1}.tooltip.tooltip-table-icons .arrow{display:none!important}.tooltip.tooltip-table-icons .tooltip-inner{border-radius:0 50px 50px;background:#28529f}.tooltip.show{opacity:1;animation:fadeIn ease .5s!important;-webkit-animation:fadeIn ease .5s!important;-moz-animation:fadeIn ease .5s!important;-o-animation:fadeIn ease .5s!important;-ms-animation:fadeIn ease .5s!important}.ta-tooltip{position:absolute;font-size:12px;text-align:center;color:#fff;line-height:22px;z-index:999999!important;opacity:0;white-space:nowrap;transform:scale(.7)}.ta-tooltip.ta-tooltip-show{opacity:.85;transform:scale(1);padding:0 12px}.ta-tooltip.ta-tooltip-bottom-right,.ta-tooltip.ta-tooltip-bottom-right-corner{transform-origin:top left;border-radius:0 15px 15px}.ta-tooltip.ta-tooltip-bottom-left{transform-origin:top right;border-radius:15px 0 15px 15px}@keyframes scaleItem{0%{transform:scale(.4)}to{transform:scale(1)}}.app-ca-main-tooltip{pointer-events:none}.app-ca-main-tooltip .tooltip-inner{padding:0;background-color:transparent;pointer-events:none}.app-ca-main-tooltip .tooltip-inner .tooltip-holder{display:flex;font-size:11px;line-height:14px;font-weight:600;border-radius:3px;padding:2px 6px;animation:scaleItem .3s;white-space:normal}.app-ca-main-tooltip .tooltip-inner .tooltip-holder:empty{padding:0}.tooltip-arrow{display:none!important}.trucks.semitruck svg path,.trucks.semisleeper svg path,.trucks.flatbed svg path,.trucks.stepdeck svg path,.trucks.lowboyrgn svg path,.trucks.chassis svg path,.trucks.conestoga svg path,.trucks.sidekit svg path,.trucks.container svg path,.trailers.semitruck svg path,.trailers.semisleeper svg path,.trailers.flatbed svg path,.trailers.stepdeck svg path,.trailers.lowboyrgn svg path,.trailers.chassis svg path,.trailers.conestoga svg path,.trailers.sidekit svg path,.trailers.container svg path{fill:#92b1f5}.trucks.boxtruck svg path,.trucks.reefertruck svg path,.trucks.cargovan svg path,.trucks.dryvan svg path,.trucks.reefer svg path,.trailers.boxtruck svg path,.trailers.reefertruck svg path,.trailers.cargovan svg path,.trailers.dryvan svg path,.trailers.reefer svg path{fill:#fbc88b}.trucks.dumptruck svg path,.trucks.cementtruck svg path,.trucks.garbagetruck svg path,.trucks.enddump svg path,.trucks.bottomdump svg path,.trucks.hopper svg path,.trucks.tanker svg path,.trucks.pneumatictanker svg path,.trailers.dumptruck svg path,.trailers.cementtruck svg path,.trailers.garbagetruck svg path,.trailers.enddump svg path,.trailers.bottomdump svg path,.trailers.hopper svg path,.trailers.tanker svg path,.trailers.pneumatictanker svg path{fill:#ed9292}.trucks.towtruck svg path,.trucks.carhauler svg path,.trucks.spotter svg path,.trucks.carhaulerstigner svg path,.trailers.towtruck svg path,.trailers.carhauler svg path,.trailers.spotter svg path,.trailers.carhaulerstigner svg path{fill:#86c9c3}.trucks .svgtext-template-text,.trailers .svgtext-template-text{color:#fff;transition:color .3s ease-in-out}.colors .black svg #droplet{fill:#6c6c6c}.colors .brown svg #droplet{fill:#a1887f}.colors .darkgreen svg #droplet{fill:#4db6a2}.colors .lightgreen svg #droplet{fill:#81c784}.colors .darkblue svg #droplet{fill:#546fd2}.colors .lightblue svg #droplet{fill:#64b5f6}.colors .gray svg #droplet{fill:#aaa}.colors .purple svg #droplet{fill:#ba68c8}.colors .gold svg #droplet{fill:#bcad79}.colors .silver svg #droplet{fill:#dadada}.colors .red svg #droplet{fill:#f96b69}.colors .pink svg #droplet{fill:#f26ec2}.colors .white svg #droplet{fill:#f1f1f1}.colors .orange svg #droplet{fill:#ff8a65}.colors .yellow svg #droplet{fill:#ffd54f}.colors:hover{transition:all .3s ease-in-out}.colors:hover .black svg #droplet{fill:#3c3c3c}.colors:hover .brown svg #droplet{fill:#8d6e63}.colors:hover .darkgreen svg #droplet{fill:#26a690}.colors:hover .lightgreen svg #droplet{fill:#66bb6a}.colors:hover .darkblue svg #droplet{fill:#304fc1}.colors:hover .lightblue svg #droplet{fill:#42a5f5}.colors:hover .gray svg #droplet{fill:#919191}.colors:hover .purple svg #droplet{fill:#ab47bc}.colors:hover .gold svg #droplet{fill:#aa9c6e}.colors:hover .silver svg #droplet{fill:#b7b7b7}.colors:hover .red svg #droplet{fill:#ef5350}.colors:hover .pink svg #droplet{fill:#fa4daa}.colors:hover .white svg #droplet{fill:#fff}.colors:hover .orange svg #droplet{fill:#ff7043}.colors:hover .yellow svg #droplet{fill:#ffca28}.filter-dropdown-popover{width:260px;position:relative;top:-4px;left:-4px}.filter-dropdown-popover-max-height{max-height:360px}.filter-dropdown-list{max-height:260px;overflow-y:auto}.filter-dropdown-list-icon{height:26px;transition:background-color .3s ease-in-out}.filter-dropdown-list-icon-value{height:14px;width:14px}.filter-dropdown-list-icon-remove{display:none}.filter-dropdown-list-icon:hover{background-color:#424242}.filter-dropdown-list-icon:hover .filter-dropdown-icon-count{display:none}.filter-dropdown-list-icon-selected:hover{background-color:#0b49d1}.filter-dropdown-list-item-icons{transition:opacity .3s ease-in-out;opacity:0}.filter-dropdown-list-item-status-circle{height:10px;width:10px}.filter-dropdown-list-item-remove{display:none}.filter-dropdown-list-item:hover{background-color:#424242}.filter-dropdown-list-item:hover .filter-dropdown-list-item-icons{opacity:1}.filter-dropdown-list-item:hover .filter-dropdown-list-item-icons svg path{fill:var(--svg-fill-color, #e66767)}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-remove{display:flex}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-remove svg path{fill:#e66767!important}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-count{display:none!important}.filter-dropdown-icon{height:26px;width:26px}.filter-dropdown-count{height:14px;width:14px}.filter-dropdown-count-remove,.filter-dropdown-count-hover:hover .filter-dropdown-count-value{display:none}.filter-dropdown-count-hover:hover .filter-dropdown-count-remove{display:flex}.filter-dropdown-button{height:26px}.filter-dropdown-footer-button{color:#dadada;transition:color .3s ease-in-out,background-color .3s ease-in-out;height:18px;width:50%}.filter-dropdown-footer-button-set{color:#fff;background-color:#3b73ed}.filter-dropdown-footer-button-set:hover{background-color:#e9effd;color:#0b49d1}.filter-dropdown-footer-button-clear{color:#dadada}.filter-dropdown-footer-button-clear:hover{background-color:#eee;color:#424242}.filter-dropdown-list-badge{min-width:18px}.shadow-100{box-shadow:0 0 4px #0003}.shadow-300{box-shadow:0 0 6px #0003}.opacity-40{opacity:.4}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-90{opacity:.9}@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}}.transition-width{transition:width .25s cubic-bezier(.46,.03,.51,.95);overflow-x:hidden}.transition-transform{transition:transform .25s cubic-bezier(.46,.03,.51,.95)}.transition-transform-100{transition:transform .1s cubic-bezier(.46,.03,.51,.95)}.transition-transform-400{transition:transform .4s cubic-bezier(.46,.03,.51,.95)}.transition-width-transform{transition-duration:.25s;transition-timing-function:cubic-bezier(.46,.03,.51,.95);transition-property:transform,width}.transition-background{transition:background .2s cubic-bezier(.46,.03,.51,.95)}.transition-background-100{transition:background .1s cubic-bezier(.46,.03,.51,.95)}.transition-background-color-300{transition:background,color .3s cubic-bezier(.46,.03,.51,.95)}.transition-fill-100 svg path{transition:fill .1s cubic-bezier(.46,.03,.51,.95)}.transition-duration-250{transition-duration:.25s}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}::ng-deep .popover{--bs-popover-border-width: 0;--bs-popover-body-padding-y: 0;--bs-popover-body-padding-x: 0}::ng-deep .popover .popover-arrow{display:none}.pointer-events-none{pointer-events:none}.ca-scroll-bar{overflow-y:scroll}.ca-scroll-bar::-webkit-scrollbar{width:2px}.ca-scroll-bar::-webkit-scrollbar-thumb{background:#ccc;border-radius:1px}.ca-scroll-bar::-webkit-scrollbar-track{background:#2f2f2f}.highlight-text-45632{background-color:#3b73ed33;color:#92b1f5;transition:all .3s ease-in-out}.dots-menu .dropdown-icon-container.active .icon,.menu-translate-unset .dropdown-icon-container.active .icon{transform:rotate(90deg)}.menu-translate-unset .dropdown-icon-container.active{padding-left:unset}.menu-translate-unset .dropdown-container{transform:unset}.dropdown-icon-container{width:26px;height:26px;border-radius:2px;transition:background .2s ease-in,padding .2s ease-in;cursor:pointer}.dropdown-icon-container:hover{background:#91919133}.dropdown-icon-container:hover .icon svg path,.dropdown-icon-container:hover .icon svg circle{fill:#424242}.dropdown-icon-container.active{background:#424242}.dropdown-icon-container.active .icon svg path,.dropdown-icon-container.active .icon svg circle{fill:#dadada}.dropdown-icon-container.dark-background .icon svg path,.dropdown-icon-container.dark-background .icon svg circle{fill:#919191}.dropdown-icon-container.dark-background:hover{background:#91919166}.dropdown-icon-container.dark-background:hover .icon svg path,.dropdown-icon-container.dark-background:hover .icon svg circle{fill:#dadada}.dropdown-icon-container.dark-background.active{background:#dadada}.dropdown-icon-container.dark-background.active .icon svg path,.dropdown-icon-container.dark-background.active .icon svg circle{fill:#424242}.dropdown-icon-container .icon{position:relative;transition:transform .2s ease-in}.dropdown-icon-container .icon svg path,.dropdown-icon-container .icon svg circle{transition:fill .2s ease-in;fill:#919191}.dropdown-container{min-width:178px;max-width:220px;padding:4px;border-radius:3px;background:#2f2f2f;max-height:456px;overflow-y:auto}.dropdown-container::-webkit-scrollbar{width:4px}.dropdown-container::-webkit-scrollbar-track{background-color:#424242;border-radius:0 3px 3px 0}.dropdown-container::-webkit-scrollbar-thumb{background:#424242;border-left:2px solid #919191;background-clip:padding-box;border-radius:1px 3px 3px 1px}.dropdown-container:has(.sticky-item){padding:0 4px 4px}.dropdown-container:has(.sticky-item)::-webkit-scrollbar-track{margin-top:34px}.dropdown-container .dropdown-item{cursor:pointer;-ms-user-select:none;-webkit-user-select:none;user-select:none;-moz-user-select:none}.dropdown-container .dropdown-item.sticky-item{position:sticky;top:0;z-index:10;background:#2f2f2f;padding-top:4px}.dropdown-container .dropdown-item.has-border{padding-bottom:3px;border-bottom:1px solid #424242;margin-bottom:4px}.dropdown-container .dropdown-item.disabled .dropdown-item-option{pointer-events:none!important;cursor:auto!important}.dropdown-container .dropdown-item.disabled .dropdown-item-option p{color:#919191!important}.dropdown-container .dropdown-item.disabled .dropdown-item-option .dropdown-item-option-icon svg path{fill:#91919166!important}.dropdown-container .dropdown-item.disabled .dropdown-item-option .dropdown-item-option-icon.delete svg path{fill:#df3c3c66!important}.dropdown-container .dropdown-item.disabled .dropdown-item-option .dropdown-item-option-icon.activate svg path{fill:#3b73ed66!important}.dropdown-container .dropdown-item.disabled .dropdown-item-option .dropdown-item-option-icon.open-business svg path{fill:#259f9466!important}.dropdown-container .dropdown-item.checkbox-disabled{cursor:auto}.dropdown-container .dropdown-item.icon-left .dropdown-item-option .dropdown-item-option-icon{order:1;margin:0 6px 0 0}.dropdown-container .dropdown-item.icon-left .dropdown-item-option p{order:2;margin-right:0}.dropdown-container .dropdown-item-option{padding:4px;border-radius:2px;transition:background .2s ease-in}.dropdown-container .dropdown-item-option:hover{background:#424242}.dropdown-container .dropdown-item-option:hover .dropdown-item-option-icon.regular svg path{fill:#ccc}.dropdown-container .dropdown-item-option:hover .dropdown-item-option-icon.delete svg path{fill:#ed9292}.dropdown-container .dropdown-item-option:hover .dropdown-item-option-icon.activate svg path{fill:#92b1f5}.dropdown-container .dropdown-item-option:hover .dropdown-item-option-icon.open-business svg path{fill:#86c9c3}.dropdown-container .dropdown-item-option-icon svg{width:18px;height:18px}.dropdown-container .dropdown-item-option-icon svg path{transition:fill .2s ease-in}.dropdown-container .dropdown-item-option-icon.regular svg path{fill:#fff3}.dropdown-container .dropdown-item-option-icon.delete svg path{fill-opacity:1;fill:#e66767}.dropdown-container .dropdown-item-option-icon.activate svg path{fill:#6692f1}.dropdown-container .dropdown-item-option-icon.open-business svg path{fill:#56b4ac}.dropdown-container .dropdown-item .inner-dropdown-item.active{background:#424242;border-radius:2px}.dropdown-container .dropdown-item .inner-dropdown-item.active .dropdown-item-option-icon{transform:rotate(180deg)}.dropdown-container .dropdown-item .inner-dropdown-item.active .inner-dropdown-list{max-height:fit-content!important;padding:4px!important}.dropdown-container .dropdown-item .inner-dropdown-item .dropdown-item-option-icon{margin-right:2px;transition:transform .3s}.dropdown-container .dropdown-item .inner-dropdown-item .dropdown-item-option-icon svg{width:16px!important;height:16px!important}.dropdown-container .dropdown-item .inner-dropdown-item .inner-dropdown-list{max-height:0;overflow:hidden;transition:max-height .2s,padding .2s}.dropdown-container .dropdown-item .inner-dropdown-item .inner-dropdown-list .dropdown-item-option{margin-bottom:4px;border-radius:2px}.dropdown-container .dropdown-item .inner-dropdown-item .inner-dropdown-list .dropdown-item-option:hover{background:#91919166}.dropdown-container .dropdown-item .inner-dropdown-item .inner-dropdown-list .dropdown-item-option:last-of-type{margin-bottom:0}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
19636
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaDropdownMenuComponent, isStandalone: true, selector: "ca-dropdown-menu", inputs: { type: "type", options: "options", placement: "placement", popoverClass: "popoverClass", isDarkBackground: "isDarkBackground", isLeftSideIconPosition: "isLeftSideIconPosition", isColumnsDropdown: "isColumnsDropdown" }, outputs: { dropdownOptionEmitter: "dropdownOptionEmitter" }, ngImport: i0, template: "<div\n class=\"d-flex align-items-center dropdown-menu-container\"\n [ngClass]=\"type | dropdownMenuPlacementClass\"\n>\n <!-- Icon -->\n\n @let dropdownMenuPopoverClass = `dropdown-menu-popover ${popoverClass}`;\n\n <div\n #dropdownPopover=\"ngbPopover\"\n triggers=\"'manual'\"\n [ngbPopover]=\"dropdownOptions\"\n [autoClose]=\"'outside'\"\n [placement]=\"placement\"\n [popoverClass]=\"dropdownMenuPopoverClass\"\n [container]=\"'body'\"\n (click)=\"handleDropdownOpenCloseClick(dropdownPopover)\"\n (hidden)=\"handleDropdownClose()\"\n >\n @let tooltipText =\n type === eDropdownMenu.HAMBURGER_MENU_TYPE\n ? isDropdownMenuActive\n ? eDropdownMenu.CLOSE_MENU\n : eDropdownMenu.OPEN_MENU\n : eDropdownMenu.MORE;\n <div\n class=\"d-flex align-items-center justify-content-center p-4 dropdown-icon-container\"\n [ngClass]=\"{\n active: dropdownPopover.isOpen(),\n 'dark-background': isDarkBackground,\n }\"\n ngbTooltip\n [mainCaTooltip]=\"tooltipText\"\n [tooltipBackground]=\"isDropdownMenuActive ? '#CCCCCC' : '#424242'\"\n [tooltipColor]=\"isDropdownMenuActive ? '#2F2F2F' : '#FFFFFF'\"\n [tooltipMarginTop]=\"'4px'\"\n [position]=\"'bottom'\"\n >\n <svg-icon\n class=\"icon svg-size-18 d-flex align-items-center\"\n [src]=\"\n type === eDropdownMenu.DOTS_MENU_TYPE\n ? dropdownMenuSvgRoutes.dotsDropdownIcon\n : dropdownMenuSvgRoutes.hamburgerDropdownIcon\n \"\n ></svg-icon>\n </div>\n </div>\n\n <!-- Dropdown -->\n\n <ng-template #dropdownOptions>\n <div class=\"d-flex flex-column dropdown-container\">\n @for (\n option of options;\n let optionIndex = $index,\n last = $last;\n track optionIndex\n ) {\n @if (option) {\n <div\n class=\"d-flex flex-column dropdown-item\"\n [ngClass]=\"{\n 'has-border': option?.hasBorder && !last,\n disabled: option?.isDisabled,\n 'icon-left': isLeftSideIconPosition,\n 'checkbox-disabled': option?.isCheckBoxDisabled,\n 'sticky-item':\n option?.isColumnDropdown && optionIndex === 0,\n }\"\n >\n <div\n class=\"d-flex flex-column mb-1\"\n [ngClass]=\"{\n 'inner-dropdown-item':\n !!option?.innerDropdownContent,\n active:\n optionIndex ===\n activeInnerDropdownOptionIndex,\n }\"\n >\n @let dropdownItemOptionClass =\n isLeftSideIconPosition\n ? 'gap-6'\n : isBackToMainDropdownItemHovered &&\n !isColumnsDropdown &&\n option.isColumnDropdown &&\n optionIndex === 0\n ? 'justify-content-between'\n : 'justify-content-between gap-6';\n <div\n class=\"d-flex align-items-center w-100 dropdown-item-option\"\n [ngClass]=\"dropdownItemOptionClass\"\n (click)=\"\n handleDropdownOptionClick(\n option,\n optionIndex\n )\n \"\n (mouseenter)=\"\n option.isColumnDropdown &&\n optionIndex === 0 &&\n handleBackToMainDropdownListItemHover(\n true\n )\n \"\n (mouseleave)=\"\n option.isColumnDropdown &&\n optionIndex === 0 &&\n handleBackToMainDropdownListItemHover(\n false\n )\n \"\n >\n @if (\n option.isColumnDropdown && optionIndex > 0\n ) {\n <app-ca-checkbox\n [label]=\"option.title\"\n [name]=\"option.type ?? option.title\"\n [itemIndex]=\"optionIndex\"\n [isRegularCheckbox]=\"false\"\n [isChecked]=\"option?.isChecked\"\n [isGroupPartialyChecked]=\"\n option | groupItemCheckedState\n \"\n [customClass]=\"'dropdown-column'\"\n [disabled]=\"option?.isCheckBoxDisabled\"\n [isLabelDisabled]=\"false\"\n [isDarkBackgroundCheckbox]=\"true\"\n (columnCheckAction)=\"\n handleCheckboxActionEmit($event)\n \"\n ></app-ca-checkbox>\n\n @if (option?.innerDropdownContent) {\n <svg-icon\n [src]=\"\n dropdownMenuSvgRoutes.showMoreIcon\n \"\n class=\"w-12 h-12 svg-size-12 d-flex dropdown-item-option-icon regular\"\n ></svg-icon>\n }\n } @else {\n <p\n class=\"m-0 text-size-14 text-color-white d-flex\"\n [ngClass]=\"{\n 'ca-font-bold':\n optionIndex ===\n activeInnerDropdownOptionIndex,\n }\"\n [ngClass]=\"option?.titleOptionalClass\"\n >\n @if (\n isBackToMainDropdownItemHovered &&\n !isColumnsDropdown\n ) {\n <svg-icon\n class=\"w-18 h-18 svg-size-18 d-flex align-items-center justify-content-center svg-fill-muted m-r-6\"\n [src]=\"\n dropdownMenuSvgRoutes.backToMenuIcon\n \"\n ></svg-icon>\n }\n @let dropdownItemOptionTitle =\n option.isColumnDropdown &&\n optionIndex === 0 &&\n isResetTableHovered\n ? eDropdownMenu.RESET_TABLE_TITLE\n : isBackToMainDropdownItemHovered &&\n !isColumnsDropdown\n ? eDropdownMenu.BACK_TO_MENU\n : option?.title;\n {{ dropdownItemOptionTitle }}\n </p>\n }\n\n @if (option?.svgUrl) {\n @let isFirstColumnDropdown =\n option.isColumnDropdown &&\n optionIndex === 0;\n <svg-icon\n class=\"dropdown-item-option-icon w-18 h-18 svg-size-18 d-flex align-items-center justify-content-center\"\n [ngClass]=\"option?.svgClass\"\n [src]=\"option?.svgUrl || ''\"\n (mouseenter)=\"\n isFirstColumnDropdown &&\n onResetTableHover()\n \"\n (mouseleave)=\"\n isFirstColumnDropdown &&\n onResetTableHover()\n \"\n (click)=\"\n isFirstColumnDropdown &&\n handleResetTableClick($event)\n \"\n ></svg-icon>\n }\n </div>\n\n <!-- Inner Dropdown -->\n\n @if (!!option?.innerDropdownContent) {\n <div\n class=\"d-flex flex-column inner-dropdown-list\"\n >\n @for (\n innerDropdownOption of option?.innerDropdownContent;\n let innerDropdownOptionIndex = $index;\n track innerDropdownOptionIndex\n ) {\n <div\n class=\"d-flex align-items-center justify-content-between gap-20 w-100 dropdown-item-option\"\n (click)=\"\n handleDropdownOptionClick(\n innerDropdownOption,\n innerDropdownOptionIndex,\n optionIndex\n )\n \"\n >\n @if (option?.isColumnDropdown) {\n <app-ca-checkbox\n [label]=\"\n innerDropdownOption.title\n \"\n [name]=\"\n innerDropdownOption.type ??\n innerDropdownOption.title\n \"\n [itemIndex]=\"\n innerDropdownOptionIndex\n \"\n [groupIndex]=\"optionIndex\"\n [isRegularCheckbox]=\"false\"\n [isChecked]=\"\n innerDropdownOption?.isChecked\n \"\n [disabled]=\"\n innerDropdownOption?.isCheckBoxDisabled\n \"\n [isLabelDisabled]=\"false\"\n [customClass]=\"\n 'dropdown-column'\n \"\n [isDarkBackgroundCheckbox]=\"\n true\n \"\n (columnCheckAction)=\"\n handleCheckboxActionEmit(\n $event\n )\n \"\n ></app-ca-checkbox>\n } @else {\n <p\n class=\"m-0 text-size-14 text-color-white\"\n >\n {{\n innerDropdownOption.title\n }}\n </p>\n }\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n }\n </div>\n </ng-template>\n</div>\n", styles: [".pickup-delivery-popover{top:-38px!important;max-width:420px!important}.pickup-delivery-popover .popover-body{transform:none;margin-left:-4px;margin-top:-1px}.pickup-delivery-popover.bs-popover-top{top:auto!important;bottom:-38px!important}.pickup-delivery-popover.bs-popover-top .load-component .assigned-load-holder{order:3;margin-top:4px;margin-bottom:0!important}.pickup-delivery-popover.bs-popover-top .load-component .statusBar{order:2;margin-top:4px}.pickup-delivery-popover.bs-popover-top .load-component .animation-three-tabs{order:1}.load-pickup-delivery-popover{top:-34px!important;max-width:400px!important}.gps_dropdown_popover{top:-38px;max-width:748px!important}.gps_dropdown_popover .popover-body{padding:0}.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;-webkit-animation:progressAnimation .25s ease-in-out;animation:progressAnimation .25s ease-in-out}.table-progress-popover .progress-dropdown .progress-header .progress-title{font-size:18px;font-weight:600;color:#fff}.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:#fff}.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:#fff}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@-webkit-keyframes progressAnimation{0%{height:0px}to{height:220px}}@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}.dispatch-note .popover-body{position:relative;top:-4px;left:-4px}.dropdown-menu-popover .popover-body{transform:none}.dropdown-menu-popover.bs-popover-end-top{margin-left:-4px!important;margin-top:-4px!important}.dropdown-menu-popover.bs-popover-bottom-end{margin-right:-4px!important;margin-top:-3px!important}.dropdown-menu-popover.bs-popover-end-bottom{margin-left:-3px!important;margin-bottom:-4px!important}.dropdown-menu-popover.bs-popover-top-end{margin-right:-4px!important;margin-bottom:-3px!important}.dropdown-menu-popover.ca-pickup-delivery-dropdown-popover.bs-popover-end-top{margin-left:0!important;margin-top:-6px!important}.dropdown-menu-popover.ca-pickup-delivery-list-dropdown-popover.bs-popover-end-top{margin-left:4px!important;margin-top:-6px!important}.dropdown-details-title-card-popover .dropdown-container{transform:translateY(-4px)}.fleet-filter-popover.bs-popover-bottom-start .fleet-filter-dropdown-container{transform:translate(-4px,-4px)!important}.fleet-filter-popover.bs-popover-top-start .fleet-filter-dropdown-container{transform:translate(-4px,4px)!important}.fleet-filter-sort-popover.bs-popover-end-top{transform:translate(158px,-3px)!important}.factoring-dropdown-popover.bs-popover-bottom-end .factoring-dropdown-container{transform:translate(4px,-4px)!important}.tooltip{font-size:12px;position:relative}.tooltip.show{opacity:1}.tooltip.fade:after,.tooltip.fade:before{transform:translateY(-10px);transition:all .15s ease-in-out}.tooltip.fade:hover:after,.tooltip.fade:hover:before{opacity:1;transform:translate(0)}.tooltip-inner{white-space:nowrap;max-width:none;border-radius:3px;font-size:11px;font-weight:600}.tooltip-inner:empty{padding:0}.placeholder-delete .tooltip-inner{background-color:#f66}.placeholder-delete .arrow:before{border-top-color:#f66}.custom-popup-owners-for-flag .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(126%) translate(-50%)!important;width:130px;border-radius:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-for-flag .arrow{bottom:-18%;transform:rotate(180deg);left:calc(50% + 2.7rem)}.custom-popup-owners-for-flag .tooltip{opacity:.93!important;width:0}.custom-popup-owners{z-index:999}.custom-popup-owners .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(132%);z-index:999;box-shadow:0 0 3px #0003}.custom-popup-owners .arrow{bottom:-20%;transform:rotate(180deg)}.custom-popup-owners .tooltip{transform:translateY(-61px)!important}.custom-popup-owners-year{z-index:999}.custom-popup-owners-year .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(132%);z-index:999;box-shadow:0 0 3px #0003}.custom-popup-owners-year .arrow{bottom:-20%;transform:rotate(180deg)}.custom-popup-owners-year .tooltip{transform:translate(70px,-61px)!important}.custom-popup-owners-info .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(-100%) translate(-10%);width:200px;height:36px;display:flex;justify-content:center;align-items:center;border-radius:3px;margin-top:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-info .tooltip{opacity:.93;width:0}.custom-popup-owners-info .arrow{display:none}.custom-popup-owners-info #phone-inside{position:relative;right:26px;bottom:0}.custom-popup-owners-info-at .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(-108%) translate(-7%);width:270px;height:36px;display:flex;justify-content:center;align-items:center;border-radius:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-info-at .tooltip{opacity:1;width:0}.custom-popup-owners-info-at .arrow{display:none}.custom-popup-owners-for-tag .tooltip-inner{color:#3b3b3b;background-color:#fff;width:100px;border-radius:3px;box-shadow:0 0 3px #0003!important}.custom-popup-owners-for-tag .tooltip{top:5px!important}.custom-popup-owners-for-tag .arrow{bottom:-24%}.align-items-flex-start{justify-content:center;align-items:center}.align-items-flex-end{display:flex;justify-content:center;flex-direction:column;align-self:flex-end;align-items:flex-start}.label-add{align-self:flex-start}.fadeInLoad{animation:fadeInLoad .25s}@keyframes fadeInLoad{0%{opacity:0}to{opacity:1}}.fadeIn{opacity:1;-webkit-transition:.25s;-moz-transition:.25s;-o-transition:.25s;transition:.25s}.thisText:hover .fadeIn{opacity:0}.fadeInLoad{animation-name:example;animation-duration:.25s}@keyframes example{0%{transform:scale(.5)}to{transform:scale(1)}}.tooltip.tooltip-table-icons{left:12px!important;opacity:1}.tooltip.tooltip-table-icons .arrow{display:none!important}.tooltip.tooltip-table-icons .tooltip-inner{border-radius:0 50px 50px;background:#28529f}.tooltip.show{opacity:1;animation:fadeIn ease .5s!important;-webkit-animation:fadeIn ease .5s!important;-moz-animation:fadeIn ease .5s!important;-o-animation:fadeIn ease .5s!important;-ms-animation:fadeIn ease .5s!important}.ta-tooltip{position:absolute;font-size:12px;text-align:center;color:#fff;line-height:22px;z-index:999999!important;opacity:0;white-space:nowrap;transform:scale(.7)}.ta-tooltip.ta-tooltip-show{opacity:.85;transform:scale(1);padding:0 12px}.ta-tooltip.ta-tooltip-bottom-right,.ta-tooltip.ta-tooltip-bottom-right-corner{transform-origin:top left;border-radius:0 15px 15px}.ta-tooltip.ta-tooltip-bottom-left{transform-origin:top right;border-radius:15px 0 15px 15px}@keyframes scaleItem{0%{transform:scale(.4)}to{transform:scale(1)}}.app-ca-main-tooltip{pointer-events:none}.app-ca-main-tooltip .tooltip-inner{padding:0;background-color:transparent;pointer-events:none}.app-ca-main-tooltip .tooltip-inner .tooltip-holder{display:flex;font-size:11px;line-height:14px;font-weight:600;border-radius:3px;padding:2px 6px;animation:scaleItem .3s;white-space:normal}.app-ca-main-tooltip .tooltip-inner .tooltip-holder:empty{padding:0}.tooltip-arrow{display:none!important}.trucks.semitruck svg path,.trucks.semisleeper svg path,.trucks.flatbed svg path,.trucks.stepdeck svg path,.trucks.lowboyrgn svg path,.trucks.chassis svg path,.trucks.conestoga svg path,.trucks.sidekit svg path,.trucks.container svg path,.trailers.semitruck svg path,.trailers.semisleeper svg path,.trailers.flatbed svg path,.trailers.stepdeck svg path,.trailers.lowboyrgn svg path,.trailers.chassis svg path,.trailers.conestoga svg path,.trailers.sidekit svg path,.trailers.container svg path{fill:#92b1f5}.trucks.boxtruck svg path,.trucks.reefertruck svg path,.trucks.cargovan svg path,.trucks.dryvan svg path,.trucks.reefer svg path,.trailers.boxtruck svg path,.trailers.reefertruck svg path,.trailers.cargovan svg path,.trailers.dryvan svg path,.trailers.reefer svg path{fill:#fbc88b}.trucks.dumptruck svg path,.trucks.cementtruck svg path,.trucks.garbagetruck svg path,.trucks.enddump svg path,.trucks.bottomdump svg path,.trucks.hopper svg path,.trucks.tanker svg path,.trucks.pneumatictanker svg path,.trailers.dumptruck svg path,.trailers.cementtruck svg path,.trailers.garbagetruck svg path,.trailers.enddump svg path,.trailers.bottomdump svg path,.trailers.hopper svg path,.trailers.tanker svg path,.trailers.pneumatictanker svg path{fill:#ed9292}.trucks.towtruck svg path,.trucks.carhauler svg path,.trucks.spotter svg path,.trucks.carhaulerstigner svg path,.trailers.towtruck svg path,.trailers.carhauler svg path,.trailers.spotter svg path,.trailers.carhaulerstigner svg path{fill:#86c9c3}.trucks .svgtext-template-text,.trailers .svgtext-template-text{color:#fff;transition:color .3s ease-in-out}.colors .black svg #droplet{fill:#6c6c6c}.colors .brown svg #droplet{fill:#a1887f}.colors .darkgreen svg #droplet{fill:#4db6a2}.colors .lightgreen svg #droplet{fill:#81c784}.colors .darkblue svg #droplet{fill:#546fd2}.colors .lightblue svg #droplet{fill:#64b5f6}.colors .gray svg #droplet{fill:#aaa}.colors .purple svg #droplet{fill:#ba68c8}.colors .gold svg #droplet{fill:#bcad79}.colors .silver svg #droplet{fill:#dadada}.colors .red svg #droplet{fill:#f96b69}.colors .pink svg #droplet{fill:#f26ec2}.colors .white svg #droplet{fill:#f1f1f1}.colors .orange svg #droplet{fill:#ff8a65}.colors .yellow svg #droplet{fill:#ffd54f}.colors:hover{transition:all .3s ease-in-out}.colors:hover .black svg #droplet{fill:#3c3c3c}.colors:hover .brown svg #droplet{fill:#8d6e63}.colors:hover .darkgreen svg #droplet{fill:#26a690}.colors:hover .lightgreen svg #droplet{fill:#66bb6a}.colors:hover .darkblue svg #droplet{fill:#304fc1}.colors:hover .lightblue svg #droplet{fill:#42a5f5}.colors:hover .gray svg #droplet{fill:#919191}.colors:hover .purple svg #droplet{fill:#ab47bc}.colors:hover .gold svg #droplet{fill:#aa9c6e}.colors:hover .silver svg #droplet{fill:#b7b7b7}.colors:hover .red svg #droplet{fill:#ef5350}.colors:hover .pink svg #droplet{fill:#fa4daa}.colors:hover .white svg #droplet{fill:#fff}.colors:hover .orange svg #droplet{fill:#ff7043}.colors:hover .yellow svg #droplet{fill:#ffca28}.filter-dropdown-popover{width:260px;position:relative;top:-4px;left:-4px}.filter-dropdown-popover-max-height{max-height:360px}.filter-dropdown-list{max-height:260px;overflow-y:auto}.filter-dropdown-list-icon{height:26px;transition:background-color .3s ease-in-out}.filter-dropdown-list-icon-value{height:14px;width:14px}.filter-dropdown-list-icon-remove{display:none}.filter-dropdown-list-icon:hover{background-color:#424242}.filter-dropdown-list-icon:hover .filter-dropdown-icon-count{display:none}.filter-dropdown-list-icon-selected:hover{background-color:#0b49d1}.filter-dropdown-list-item-icons{transition:opacity .3s ease-in-out;opacity:0}.filter-dropdown-list-item-status-circle{height:10px;width:10px}.filter-dropdown-list-item-remove{display:none}.filter-dropdown-list-item:hover{background-color:#424242}.filter-dropdown-list-item:hover .filter-dropdown-list-item-icons{opacity:1}.filter-dropdown-list-item:hover .filter-dropdown-list-item-icons svg path{fill:var(--svg-fill-color, #e66767)}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-remove{display:flex}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-remove svg path{fill:#e66767!important}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-count{display:none!important}.filter-dropdown-icon{height:26px;width:26px}.filter-dropdown-count{height:14px;width:14px}.filter-dropdown-count-remove,.filter-dropdown-count-hover:hover .filter-dropdown-count-value{display:none}.filter-dropdown-count-hover:hover .filter-dropdown-count-remove{display:flex}.filter-dropdown-button{height:26px}.filter-dropdown-footer-button{color:#dadada;transition:color .3s ease-in-out,background-color .3s ease-in-out;height:18px;width:50%}.filter-dropdown-footer-button-set{color:#fff;background-color:#3b73ed}.filter-dropdown-footer-button-set:hover{background-color:#e9effd;color:#0b49d1}.filter-dropdown-footer-button-clear{color:#dadada}.filter-dropdown-footer-button-clear:hover{background-color:#eee;color:#424242}.filter-dropdown-list-badge{min-width:18px}.shadow-100{box-shadow:0 0 4px #0003}.shadow-300{box-shadow:0 0 6px #0003}.opacity-40{opacity:.4}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-90{opacity:.9}@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}}.transition-width{transition:width .25s cubic-bezier(.46,.03,.51,.95);overflow-x:hidden}.transition-transform{transition:transform .25s cubic-bezier(.46,.03,.51,.95)}.transition-transform-100{transition:transform .1s cubic-bezier(.46,.03,.51,.95)}.transition-transform-400{transition:transform .4s cubic-bezier(.46,.03,.51,.95)}.transition-width-transform{transition-duration:.25s;transition-timing-function:cubic-bezier(.46,.03,.51,.95);transition-property:transform,width}.transition-background{transition:background .2s cubic-bezier(.46,.03,.51,.95)}.transition-background-100{transition:background .1s cubic-bezier(.46,.03,.51,.95)}.transition-background-color-300{transition:background,color .3s cubic-bezier(.46,.03,.51,.95)}.transition-fill-100 svg path{transition:fill .1s cubic-bezier(.46,.03,.51,.95)}.transition-duration-250{transition-duration:.25s}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}::ng-deep .popover{--bs-popover-border-width: 0;--bs-popover-body-padding-y: 0;--bs-popover-body-padding-x: 0}::ng-deep .popover .popover-arrow{display:none}.pointer-events-none{pointer-events:none}.ca-scroll-bar{overflow-y:scroll}.ca-scroll-bar::-webkit-scrollbar{width:2px}.ca-scroll-bar::-webkit-scrollbar-thumb{background:#ccc;border-radius:1px}.ca-scroll-bar::-webkit-scrollbar-track{background:#2f2f2f}.highlight-text-45632{background-color:#3b73ed33;color:#92b1f5;transition:all .3s ease-in-out}.dots-menu .dropdown-icon-container.active .icon,.menu-translate-unset .dropdown-icon-container.active .icon{transform:rotate(90deg)}.dots-menu .dropdown-icon-container .icon,.menu-translate-unset .dropdown-icon-container .icon{bottom:0}.dots-menu .dropdown-icon-container .icon svg,.menu-translate-unset .dropdown-icon-container .icon svg{display:flex;width:18px;height:18px}.menu-translate-unset .dropdown-icon-container.active{padding-left:unset}.menu-translate-unset .dropdown-container{transform:unset}.dropdown-icon-container{width:26px;height:26px;border-radius:2px;transition:background .2s ease-in,padding .2s ease-in;cursor:pointer}.dropdown-icon-container:hover{background:#91919133}.dropdown-icon-container:hover .icon svg path,.dropdown-icon-container:hover .icon svg circle{fill:#424242}.dropdown-icon-container.active{background:#424242}.dropdown-icon-container.active .icon svg path,.dropdown-icon-container.active .icon svg circle{fill:#dadada}.dropdown-icon-container.dark-background .icon svg path,.dropdown-icon-container.dark-background .icon svg circle{fill:#919191}.dropdown-icon-container.dark-background:hover{background:#91919166}.dropdown-icon-container.dark-background:hover .icon svg path,.dropdown-icon-container.dark-background:hover .icon svg circle{fill:#dadada}.dropdown-icon-container.dark-background.active{background:#dadada}.dropdown-icon-container.dark-background.active .icon svg path,.dropdown-icon-container.dark-background.active .icon svg circle{fill:#424242}.dropdown-icon-container .icon{position:relative;transition:transform .2s ease-in}.dropdown-icon-container .icon svg path,.dropdown-icon-container .icon svg circle{transition:fill .2s ease-in;fill:#919191}.dropdown-container{min-width:178px;max-width:220px;padding:4px;border-radius:3px;background:#2f2f2f;max-height:456px;overflow-y:auto}.dropdown-container::-webkit-scrollbar{width:4px}.dropdown-container::-webkit-scrollbar-track{background-color:#424242;border-radius:0 3px 3px 0}.dropdown-container::-webkit-scrollbar-thumb{background:#424242;border-left:2px solid #919191;background-clip:padding-box;border-radius:1px 3px 3px 1px}.dropdown-container:has(.sticky-item){padding:0 4px 4px}.dropdown-container:has(.sticky-item)::-webkit-scrollbar-track{margin-top:34px}.dropdown-container .dropdown-item{cursor:pointer;-ms-user-select:none;-webkit-user-select:none;user-select:none;-moz-user-select:none}.dropdown-container .dropdown-item.sticky-item{position:sticky;top:0;z-index:10;background:#2f2f2f;padding-top:4px}.dropdown-container .dropdown-item.has-border{padding-bottom:3px;border-bottom:1px solid #424242;margin-bottom:4px}.dropdown-container .dropdown-item.disabled .dropdown-item-option{pointer-events:none!important;cursor:auto!important}.dropdown-container .dropdown-item.disabled .dropdown-item-option p{color:#919191!important}.dropdown-container .dropdown-item.disabled .dropdown-item-option .dropdown-item-option-icon svg path{fill:#91919166!important}.dropdown-container .dropdown-item.disabled .dropdown-item-option .dropdown-item-option-icon.delete svg path{fill:#df3c3c66!important}.dropdown-container .dropdown-item.disabled .dropdown-item-option .dropdown-item-option-icon.activate svg path{fill:#3b73ed66!important}.dropdown-container .dropdown-item.disabled .dropdown-item-option .dropdown-item-option-icon.open-business svg path{fill:#259f9466!important}.dropdown-container .dropdown-item.checkbox-disabled{cursor:auto}.dropdown-container .dropdown-item.icon-left .dropdown-item-option .dropdown-item-option-icon{order:1;margin:0 6px 0 0}.dropdown-container .dropdown-item.icon-left .dropdown-item-option p{order:2;margin-right:0}.dropdown-container .dropdown-item-option{padding:4px;border-radius:2px;transition:background .2s ease-in}.dropdown-container .dropdown-item-option:hover{background:#424242}.dropdown-container .dropdown-item-option:hover .dropdown-item-option-icon.regular svg path{fill:#ccc}.dropdown-container .dropdown-item-option:hover .dropdown-item-option-icon.delete svg path{fill:#ed9292}.dropdown-container .dropdown-item-option:hover .dropdown-item-option-icon.activate svg path{fill:#92b1f5}.dropdown-container .dropdown-item-option:hover .dropdown-item-option-icon.open-business svg path{fill:#86c9c3}.dropdown-container .dropdown-item-option-icon svg{width:18px;height:18px}.dropdown-container .dropdown-item-option-icon svg path{transition:fill .2s ease-in}.dropdown-container .dropdown-item-option-icon.regular svg path{fill:#fff3}.dropdown-container .dropdown-item-option-icon.delete svg path{fill-opacity:1;fill:#e66767}.dropdown-container .dropdown-item-option-icon.activate svg path{fill:#6692f1}.dropdown-container .dropdown-item-option-icon.open-business svg path{fill:#56b4ac}.dropdown-container .dropdown-item .inner-dropdown-item.active{background:#424242;border-radius:2px}.dropdown-container .dropdown-item .inner-dropdown-item.active .dropdown-item-option-icon{transform:rotate(180deg)}.dropdown-container .dropdown-item .inner-dropdown-item.active .inner-dropdown-list{max-height:fit-content!important;padding:4px!important}.dropdown-container .dropdown-item .inner-dropdown-item .dropdown-item-option-icon{margin-right:2px;transition:transform .3s}.dropdown-container .dropdown-item .inner-dropdown-item .dropdown-item-option-icon svg{width:16px!important;height:16px!important}.dropdown-container .dropdown-item .inner-dropdown-item .inner-dropdown-list{max-height:0;overflow:hidden;transition:max-height .2s,padding .2s}.dropdown-container .dropdown-item .inner-dropdown-item .inner-dropdown-list .dropdown-item-option{margin-bottom:4px;border-radius:2px}.dropdown-container .dropdown-item .inner-dropdown-item .inner-dropdown-list .dropdown-item-option:hover{background:#91919166}.dropdown-container .dropdown-item .inner-dropdown-item .inner-dropdown-list .dropdown-item-option:last-of-type{margin-bottom:0}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
19644
19637
|
// modules
|
|
19645
19638
|
CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i3.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: i3.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:
|
|
19646
19639
|
// components
|
|
@@ -19661,7 +19654,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
19661
19654
|
// pipes
|
|
19662
19655
|
DropdownMenuPlacementClassPipe,
|
|
19663
19656
|
GroupItemCheckedStatePipe,
|
|
19664
|
-
], template: "<div\n class=\"d-flex align-items-center dropdown-menu-container\"\n [ngClass]=\"type | dropdownMenuPlacementClass\"\n>\n <!-- Icon -->\n\n @let dropdownMenuPopoverClass = `dropdown-menu-popover ${popoverClass}`;\n\n <div\n #dropdownPopover=\"ngbPopover\"\n triggers=\"'manual'\"\n [ngbPopover]=\"dropdownOptions\"\n [autoClose]=\"'outside'\"\n [placement]=\"placement\"\n [popoverClass]=\"dropdownMenuPopoverClass\"\n [container]=\"'body'\"\n (click)=\"handleDropdownOpenCloseClick(dropdownPopover)\"\n (hidden)=\"handleDropdownClose()\"\n >\n @let tooltipText =\n type === eDropdownMenu.HAMBURGER_MENU_TYPE\n ? isDropdownMenuActive\n ? eDropdownMenu.CLOSE_MENU\n : eDropdownMenu.OPEN_MENU\n : eDropdownMenu.MORE;\n <div\n class=\"d-flex align-items-center justify-content-center p-4 dropdown-icon-container\"\n [ngClass]=\"{\n active: dropdownPopover.isOpen(),\n 'dark-background': isDarkBackground,\n }\"\n ngbTooltip\n [mainCaTooltip]=\"tooltipText\"\n [tooltipBackground]=\"isDropdownMenuActive ? '#CCCCCC' : '#424242'\"\n [tooltipColor]=\"isDropdownMenuActive ? '#2F2F2F' : '#FFFFFF'\"\n [tooltipMarginTop]=\"'4px'\"\n [position]=\"'bottom'\"\n >\n <svg-icon\n class=\"icon svg-size-18 d-flex align-items-center\"\n [src]=\"\n type === eDropdownMenu.DOTS_MENU_TYPE\n ? dropdownMenuSvgRoutes.dotsDropdownIcon\n : dropdownMenuSvgRoutes.hamburgerDropdownIcon\n \"\n ></svg-icon>\n </div>\n </div>\n\n <!-- Dropdown -->\n\n <ng-template #dropdownOptions>\n <div class=\"d-flex flex-column dropdown-container\">\n @for (\n option of options;\n let optionIndex = $index,\n last = $last;\n track optionIndex\n ) {\n @if (option) {\n <div\n class=\"d-flex flex-column dropdown-item\"\n [ngClass]=\"{\n 'has-border': option?.hasBorder && !last,\n disabled: option?.isDisabled,\n 'icon-left': isLeftSideIconPosition,\n 'checkbox-disabled': option?.isCheckBoxDisabled,\n 'sticky-item':\n option?.isColumnDropdown && optionIndex === 0,\n }\"\n >\n <div\n class=\"d-flex flex-column mb-1\"\n [ngClass]=\"{\n 'inner-dropdown-item':\n !!option?.innerDropdownContent,\n active:\n optionIndex ===\n activeInnerDropdownOptionIndex,\n }\"\n >\n @let dropdownItemOptionClass =\n isLeftSideIconPosition\n ? 'gap-6'\n : isBackToMainDropdownItemHovered &&\n !isColumnsDropdown &&\n option.isColumnDropdown &&\n optionIndex === 0\n ? 'justify-content-between'\n : 'justify-content-between gap-6';\n <div\n class=\"d-flex align-items-center w-100 dropdown-item-option\"\n [ngClass]=\"dropdownItemOptionClass\"\n (click)=\"\n handleDropdownOptionClick(\n option,\n optionIndex\n )\n \"\n (mouseenter)=\"\n option.isColumnDropdown &&\n optionIndex === 0 &&\n handleBackToMainDropdownListItemHover(\n true\n )\n \"\n (mouseleave)=\"\n option.isColumnDropdown &&\n optionIndex === 0 &&\n handleBackToMainDropdownListItemHover(\n false\n )\n \"\n >\n @if (\n option.isColumnDropdown && optionIndex > 0\n ) {\n <app-ca-checkbox\n [label]=\"option.title\"\n [name]=\"option.type ?? option.title\"\n [itemIndex]=\"optionIndex\"\n [isRegularCheckbox]=\"false\"\n [isChecked]=\"option?.isChecked\"\n [isGroupPartialyChecked]=\"\n option | groupItemCheckedState\n \"\n [customClass]=\"'dropdown-column'\"\n [disabled]=\"option?.isCheckBoxDisabled\"\n [isLabelDisabled]=\"false\"\n [isDarkBackgroundCheckbox]=\"true\"\n (columnCheckAction)=\"\n handleCheckboxActionEmit($event)\n \"\n ></app-ca-checkbox>\n\n @if (option?.innerDropdownContent) {\n <svg-icon\n [src]=\"\n dropdownMenuSvgRoutes.showMoreIcon\n \"\n class=\"w-12 h-12 svg-size-12 d-flex dropdown-item-option-icon regular\"\n ></svg-icon>\n }\n } @else {\n <p\n class=\"m-0 text-size-14 text-color-white d-flex\"\n [ngClass]=\"{\n 'ca-font-bold':\n optionIndex ===\n activeInnerDropdownOptionIndex,\n }\"\n [ngClass]=\"option?.titleOptionalClass\"\n >\n @if (\n isBackToMainDropdownItemHovered &&\n !isColumnsDropdown\n ) {\n <svg-icon\n class=\"w-18 h-18 svg-size-18 d-flex align-items-center justify-content-center svg-fill-muted m-r-6\"\n [src]=\"\n dropdownMenuSvgRoutes.backToMenuIcon\n \"\n ></svg-icon>\n }\n @let dropdownItemOptionTitle =\n option.isColumnDropdown &&\n optionIndex === 0 &&\n isResetTableHovered\n ? eDropdownMenu.RESET_TABLE_TITLE\n : isBackToMainDropdownItemHovered &&\n !isColumnsDropdown\n ? eDropdownMenu.BACK_TO_MENU\n : option?.title;\n {{ dropdownItemOptionTitle }}\n </p>\n }\n\n @if (option?.svgUrl) {\n @let isFirstColumnDropdown =\n option.isColumnDropdown &&\n optionIndex === 0;\n <svg-icon\n class=\"dropdown-item-option-icon w-18 h-18 svg-size-18 d-flex align-items-center justify-content-center\"\n [ngClass]=\"option?.svgClass\"\n [src]=\"option?.svgUrl || ''\"\n (mouseenter)=\"\n isFirstColumnDropdown &&\n onResetTableHover()\n \"\n (mouseleave)=\"\n isFirstColumnDropdown &&\n onResetTableHover()\n \"\n (click)=\"\n isFirstColumnDropdown &&\n handleResetTableClick($event)\n \"\n ></svg-icon>\n }\n </div>\n\n <!-- Inner Dropdown -->\n\n @if (!!option?.innerDropdownContent) {\n <div\n class=\"d-flex flex-column inner-dropdown-list\"\n >\n @for (\n innerDropdownOption of option?.innerDropdownContent;\n let innerDropdownOptionIndex = $index;\n track innerDropdownOptionIndex\n ) {\n <div\n class=\"d-flex align-items-center justify-content-between gap-20 w-100 dropdown-item-option\"\n (click)=\"\n handleDropdownOptionClick(\n innerDropdownOption,\n innerDropdownOptionIndex,\n optionIndex\n )\n \"\n >\n @if (option?.isColumnDropdown) {\n <app-ca-checkbox\n [label]=\"\n innerDropdownOption.title\n \"\n [name]=\"\n innerDropdownOption.type ??\n innerDropdownOption.title\n \"\n [itemIndex]=\"\n innerDropdownOptionIndex\n \"\n [groupIndex]=\"optionIndex\"\n [isRegularCheckbox]=\"false\"\n [isChecked]=\"\n innerDropdownOption?.isChecked\n \"\n [disabled]=\"\n innerDropdownOption?.isCheckBoxDisabled\n \"\n [isLabelDisabled]=\"false\"\n [customClass]=\"\n 'dropdown-column'\n \"\n [isDarkBackgroundCheckbox]=\"\n true\n \"\n (columnCheckAction)=\"\n handleCheckboxActionEmit(\n $event\n )\n \"\n ></app-ca-checkbox>\n } @else {\n <p\n class=\"m-0 text-size-14 text-color-white\"\n >\n {{\n innerDropdownOption.title\n }}\n </p>\n }\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n }\n </div>\n </ng-template>\n</div>\n", styles: [".pickup-delivery-popover{top:-38px!important;max-width:420px!important}.pickup-delivery-popover .popover-body{transform:none;margin-left:-4px;margin-top:-1px}.pickup-delivery-popover.bs-popover-top{top:auto!important;bottom:-38px!important}.pickup-delivery-popover.bs-popover-top .load-component .assigned-load-holder{order:3;margin-top:4px;margin-bottom:0!important}.pickup-delivery-popover.bs-popover-top .load-component .statusBar{order:2;margin-top:4px}.pickup-delivery-popover.bs-popover-top .load-component .animation-three-tabs{order:1}.load-pickup-delivery-popover{top:-34px!important;max-width:400px!important}.gps_dropdown_popover{top:-38px;max-width:748px!important}.gps_dropdown_popover .popover-body{padding:0}.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;-webkit-animation:progressAnimation .25s ease-in-out;animation:progressAnimation .25s ease-in-out}.table-progress-popover .progress-dropdown .progress-header .progress-title{font-size:18px;font-weight:600;color:#fff}.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:#fff}.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:#fff}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@-webkit-keyframes progressAnimation{0%{height:0px}to{height:220px}}@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}.dispatch-note .popover-body{position:relative;top:-4px;left:-4px}.dropdown-menu-popover .popover-body{transform:none}.dropdown-menu-popover.bs-popover-end-top{margin-left:-4px!important;margin-top:-4px!important}.dropdown-menu-popover.bs-popover-bottom-end{margin-right:-4px!important;margin-top:-3px!important}.dropdown-menu-popover.bs-popover-end-bottom{margin-left:-3px!important;margin-bottom:-4px!important}.dropdown-menu-popover.bs-popover-top-end{margin-right:-4px!important;margin-bottom:-3px!important}.dropdown-menu-popover.ca-pickup-delivery-dropdown-popover.bs-popover-end-top{margin-left:0!important;margin-top:-6px!important}.dropdown-menu-popover.ca-pickup-delivery-list-dropdown-popover.bs-popover-end-top{margin-left:4px!important;margin-top:-6px!important}.dropdown-details-title-card-popover .dropdown-container{transform:translateY(-4px)}.fleet-filter-popover.bs-popover-bottom-start .fleet-filter-dropdown-container{transform:translate(-4px,-4px)!important}.fleet-filter-popover.bs-popover-top-start .fleet-filter-dropdown-container{transform:translate(-4px,4px)!important}.fleet-filter-sort-popover.bs-popover-end-top{transform:translate(158px,-3px)!important}.factoring-dropdown-popover.bs-popover-bottom-end .factoring-dropdown-container{transform:translate(4px,-4px)!important}.tooltip{font-size:12px;position:relative}.tooltip.show{opacity:1}.tooltip.fade:after,.tooltip.fade:before{transform:translateY(-10px);transition:all .15s ease-in-out}.tooltip.fade:hover:after,.tooltip.fade:hover:before{opacity:1;transform:translate(0)}.tooltip-inner{white-space:nowrap;max-width:none;border-radius:3px;font-size:11px;font-weight:600}.tooltip-inner:empty{padding:0}.placeholder-delete .tooltip-inner{background-color:#f66}.placeholder-delete .arrow:before{border-top-color:#f66}.custom-popup-owners-for-flag .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(126%) translate(-50%)!important;width:130px;border-radius:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-for-flag .arrow{bottom:-18%;transform:rotate(180deg);left:calc(50% + 2.7rem)}.custom-popup-owners-for-flag .tooltip{opacity:.93!important;width:0}.custom-popup-owners{z-index:999}.custom-popup-owners .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(132%);z-index:999;box-shadow:0 0 3px #0003}.custom-popup-owners .arrow{bottom:-20%;transform:rotate(180deg)}.custom-popup-owners .tooltip{transform:translateY(-61px)!important}.custom-popup-owners-year{z-index:999}.custom-popup-owners-year .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(132%);z-index:999;box-shadow:0 0 3px #0003}.custom-popup-owners-year .arrow{bottom:-20%;transform:rotate(180deg)}.custom-popup-owners-year .tooltip{transform:translate(70px,-61px)!important}.custom-popup-owners-info .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(-100%) translate(-10%);width:200px;height:36px;display:flex;justify-content:center;align-items:center;border-radius:3px;margin-top:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-info .tooltip{opacity:.93;width:0}.custom-popup-owners-info .arrow{display:none}.custom-popup-owners-info #phone-inside{position:relative;right:26px;bottom:0}.custom-popup-owners-info-at .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(-108%) translate(-7%);width:270px;height:36px;display:flex;justify-content:center;align-items:center;border-radius:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-info-at .tooltip{opacity:1;width:0}.custom-popup-owners-info-at .arrow{display:none}.custom-popup-owners-for-tag .tooltip-inner{color:#3b3b3b;background-color:#fff;width:100px;border-radius:3px;box-shadow:0 0 3px #0003!important}.custom-popup-owners-for-tag .tooltip{top:5px!important}.custom-popup-owners-for-tag .arrow{bottom:-24%}.align-items-flex-start{justify-content:center;align-items:center}.align-items-flex-end{display:flex;justify-content:center;flex-direction:column;align-self:flex-end;align-items:flex-start}.label-add{align-self:flex-start}.fadeInLoad{animation:fadeInLoad .25s}@keyframes fadeInLoad{0%{opacity:0}to{opacity:1}}.fadeIn{opacity:1;-webkit-transition:.25s;-moz-transition:.25s;-o-transition:.25s;transition:.25s}.thisText:hover .fadeIn{opacity:0}.fadeInLoad{animation-name:example;animation-duration:.25s}@keyframes example{0%{transform:scale(.5)}to{transform:scale(1)}}.tooltip.tooltip-table-icons{left:12px!important;opacity:1}.tooltip.tooltip-table-icons .arrow{display:none!important}.tooltip.tooltip-table-icons .tooltip-inner{border-radius:0 50px 50px;background:#28529f}.tooltip.show{opacity:1;animation:fadeIn ease .5s!important;-webkit-animation:fadeIn ease .5s!important;-moz-animation:fadeIn ease .5s!important;-o-animation:fadeIn ease .5s!important;-ms-animation:fadeIn ease .5s!important}.ta-tooltip{position:absolute;font-size:12px;text-align:center;color:#fff;line-height:22px;z-index:999999!important;opacity:0;white-space:nowrap;transform:scale(.7)}.ta-tooltip.ta-tooltip-show{opacity:.85;transform:scale(1);padding:0 12px}.ta-tooltip.ta-tooltip-bottom-right,.ta-tooltip.ta-tooltip-bottom-right-corner{transform-origin:top left;border-radius:0 15px 15px}.ta-tooltip.ta-tooltip-bottom-left{transform-origin:top right;border-radius:15px 0 15px 15px}@keyframes scaleItem{0%{transform:scale(.4)}to{transform:scale(1)}}.app-ca-main-tooltip{pointer-events:none}.app-ca-main-tooltip .tooltip-inner{padding:0;background-color:transparent;pointer-events:none}.app-ca-main-tooltip .tooltip-inner .tooltip-holder{display:flex;font-size:11px;line-height:14px;font-weight:600;border-radius:3px;padding:2px 6px;animation:scaleItem .3s;white-space:normal}.app-ca-main-tooltip .tooltip-inner .tooltip-holder:empty{padding:0}.tooltip-arrow{display:none!important}.trucks.semitruck svg path,.trucks.semisleeper svg path,.trucks.flatbed svg path,.trucks.stepdeck svg path,.trucks.lowboyrgn svg path,.trucks.chassis svg path,.trucks.conestoga svg path,.trucks.sidekit svg path,.trucks.container svg path,.trailers.semitruck svg path,.trailers.semisleeper svg path,.trailers.flatbed svg path,.trailers.stepdeck svg path,.trailers.lowboyrgn svg path,.trailers.chassis svg path,.trailers.conestoga svg path,.trailers.sidekit svg path,.trailers.container svg path{fill:#92b1f5}.trucks.boxtruck svg path,.trucks.reefertruck svg path,.trucks.cargovan svg path,.trucks.dryvan svg path,.trucks.reefer svg path,.trailers.boxtruck svg path,.trailers.reefertruck svg path,.trailers.cargovan svg path,.trailers.dryvan svg path,.trailers.reefer svg path{fill:#fbc88b}.trucks.dumptruck svg path,.trucks.cementtruck svg path,.trucks.garbagetruck svg path,.trucks.enddump svg path,.trucks.bottomdump svg path,.trucks.hopper svg path,.trucks.tanker svg path,.trucks.pneumatictanker svg path,.trailers.dumptruck svg path,.trailers.cementtruck svg path,.trailers.garbagetruck svg path,.trailers.enddump svg path,.trailers.bottomdump svg path,.trailers.hopper svg path,.trailers.tanker svg path,.trailers.pneumatictanker svg path{fill:#ed9292}.trucks.towtruck svg path,.trucks.carhauler svg path,.trucks.spotter svg path,.trucks.carhaulerstigner svg path,.trailers.towtruck svg path,.trailers.carhauler svg path,.trailers.spotter svg path,.trailers.carhaulerstigner svg path{fill:#86c9c3}.trucks .svgtext-template-text,.trailers .svgtext-template-text{color:#fff;transition:color .3s ease-in-out}.colors .black svg #droplet{fill:#6c6c6c}.colors .brown svg #droplet{fill:#a1887f}.colors .darkgreen svg #droplet{fill:#4db6a2}.colors .lightgreen svg #droplet{fill:#81c784}.colors .darkblue svg #droplet{fill:#546fd2}.colors .lightblue svg #droplet{fill:#64b5f6}.colors .gray svg #droplet{fill:#aaa}.colors .purple svg #droplet{fill:#ba68c8}.colors .gold svg #droplet{fill:#bcad79}.colors .silver svg #droplet{fill:#dadada}.colors .red svg #droplet{fill:#f96b69}.colors .pink svg #droplet{fill:#f26ec2}.colors .white svg #droplet{fill:#f1f1f1}.colors .orange svg #droplet{fill:#ff8a65}.colors .yellow svg #droplet{fill:#ffd54f}.colors:hover{transition:all .3s ease-in-out}.colors:hover .black svg #droplet{fill:#3c3c3c}.colors:hover .brown svg #droplet{fill:#8d6e63}.colors:hover .darkgreen svg #droplet{fill:#26a690}.colors:hover .lightgreen svg #droplet{fill:#66bb6a}.colors:hover .darkblue svg #droplet{fill:#304fc1}.colors:hover .lightblue svg #droplet{fill:#42a5f5}.colors:hover .gray svg #droplet{fill:#919191}.colors:hover .purple svg #droplet{fill:#ab47bc}.colors:hover .gold svg #droplet{fill:#aa9c6e}.colors:hover .silver svg #droplet{fill:#b7b7b7}.colors:hover .red svg #droplet{fill:#ef5350}.colors:hover .pink svg #droplet{fill:#fa4daa}.colors:hover .white svg #droplet{fill:#fff}.colors:hover .orange svg #droplet{fill:#ff7043}.colors:hover .yellow svg #droplet{fill:#ffca28}.filter-dropdown-popover{width:260px;position:relative;top:-4px;left:-4px}.filter-dropdown-popover-max-height{max-height:360px}.filter-dropdown-list{max-height:260px;overflow-y:auto}.filter-dropdown-list-icon{height:26px;transition:background-color .3s ease-in-out}.filter-dropdown-list-icon-value{height:14px;width:14px}.filter-dropdown-list-icon-remove{display:none}.filter-dropdown-list-icon:hover{background-color:#424242}.filter-dropdown-list-icon:hover .filter-dropdown-icon-count{display:none}.filter-dropdown-list-icon-selected:hover{background-color:#0b49d1}.filter-dropdown-list-item-icons{transition:opacity .3s ease-in-out;opacity:0}.filter-dropdown-list-item-status-circle{height:10px;width:10px}.filter-dropdown-list-item-remove{display:none}.filter-dropdown-list-item:hover{background-color:#424242}.filter-dropdown-list-item:hover .filter-dropdown-list-item-icons{opacity:1}.filter-dropdown-list-item:hover .filter-dropdown-list-item-icons svg path{fill:var(--svg-fill-color, #e66767)}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-remove{display:flex}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-remove svg path{fill:#e66767!important}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-count{display:none!important}.filter-dropdown-icon{height:26px;width:26px}.filter-dropdown-count{height:14px;width:14px}.filter-dropdown-count-remove,.filter-dropdown-count-hover:hover .filter-dropdown-count-value{display:none}.filter-dropdown-count-hover:hover .filter-dropdown-count-remove{display:flex}.filter-dropdown-button{height:26px}.filter-dropdown-footer-button{color:#dadada;transition:color .3s ease-in-out,background-color .3s ease-in-out;height:18px;width:50%}.filter-dropdown-footer-button-set{color:#fff;background-color:#3b73ed}.filter-dropdown-footer-button-set:hover{background-color:#e9effd;color:#0b49d1}.filter-dropdown-footer-button-clear{color:#dadada}.filter-dropdown-footer-button-clear:hover{background-color:#eee;color:#424242}.filter-dropdown-list-badge{min-width:18px}.shadow-100{box-shadow:0 0 4px #0003}.shadow-300{box-shadow:0 0 6px #0003}.opacity-40{opacity:.4}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-90{opacity:.9}@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}}.transition-width{transition:width .25s cubic-bezier(.46,.03,.51,.95);overflow-x:hidden}.transition-transform{transition:transform .25s cubic-bezier(.46,.03,.51,.95)}.transition-transform-100{transition:transform .1s cubic-bezier(.46,.03,.51,.95)}.transition-transform-400{transition:transform .4s cubic-bezier(.46,.03,.51,.95)}.transition-width-transform{transition-duration:.25s;transition-timing-function:cubic-bezier(.46,.03,.51,.95);transition-property:transform,width}.transition-background{transition:background .2s cubic-bezier(.46,.03,.51,.95)}.transition-background-100{transition:background .1s cubic-bezier(.46,.03,.51,.95)}.transition-background-color-300{transition:background,color .3s cubic-bezier(.46,.03,.51,.95)}.transition-fill-100 svg path{transition:fill .1s cubic-bezier(.46,.03,.51,.95)}.transition-duration-250{transition-duration:.25s}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}::ng-deep .popover{--bs-popover-border-width: 0;--bs-popover-body-padding-y: 0;--bs-popover-body-padding-x: 0}::ng-deep .popover .popover-arrow{display:none}.pointer-events-none{pointer-events:none}.ca-scroll-bar{overflow-y:scroll}.ca-scroll-bar::-webkit-scrollbar{width:2px}.ca-scroll-bar::-webkit-scrollbar-thumb{background:#ccc;border-radius:1px}.ca-scroll-bar::-webkit-scrollbar-track{background:#2f2f2f}.highlight-text-45632{background-color:#3b73ed33;color:#92b1f5;transition:all .3s ease-in-out}.dots-menu .dropdown-icon-container.active .icon,.menu-translate-unset .dropdown-icon-container.active .icon{transform:rotate(90deg)}.menu-translate-unset .dropdown-icon-container.active{padding-left:unset}.menu-translate-unset .dropdown-container{transform:unset}.dropdown-icon-container{width:26px;height:26px;border-radius:2px;transition:background .2s ease-in,padding .2s ease-in;cursor:pointer}.dropdown-icon-container:hover{background:#91919133}.dropdown-icon-container:hover .icon svg path,.dropdown-icon-container:hover .icon svg circle{fill:#424242}.dropdown-icon-container.active{background:#424242}.dropdown-icon-container.active .icon svg path,.dropdown-icon-container.active .icon svg circle{fill:#dadada}.dropdown-icon-container.dark-background .icon svg path,.dropdown-icon-container.dark-background .icon svg circle{fill:#919191}.dropdown-icon-container.dark-background:hover{background:#91919166}.dropdown-icon-container.dark-background:hover .icon svg path,.dropdown-icon-container.dark-background:hover .icon svg circle{fill:#dadada}.dropdown-icon-container.dark-background.active{background:#dadada}.dropdown-icon-container.dark-background.active .icon svg path,.dropdown-icon-container.dark-background.active .icon svg circle{fill:#424242}.dropdown-icon-container .icon{position:relative;transition:transform .2s ease-in}.dropdown-icon-container .icon svg path,.dropdown-icon-container .icon svg circle{transition:fill .2s ease-in;fill:#919191}.dropdown-container{min-width:178px;max-width:220px;padding:4px;border-radius:3px;background:#2f2f2f;max-height:456px;overflow-y:auto}.dropdown-container::-webkit-scrollbar{width:4px}.dropdown-container::-webkit-scrollbar-track{background-color:#424242;border-radius:0 3px 3px 0}.dropdown-container::-webkit-scrollbar-thumb{background:#424242;border-left:2px solid #919191;background-clip:padding-box;border-radius:1px 3px 3px 1px}.dropdown-container:has(.sticky-item){padding:0 4px 4px}.dropdown-container:has(.sticky-item)::-webkit-scrollbar-track{margin-top:34px}.dropdown-container .dropdown-item{cursor:pointer;-ms-user-select:none;-webkit-user-select:none;user-select:none;-moz-user-select:none}.dropdown-container .dropdown-item.sticky-item{position:sticky;top:0;z-index:10;background:#2f2f2f;padding-top:4px}.dropdown-container .dropdown-item.has-border{padding-bottom:3px;border-bottom:1px solid #424242;margin-bottom:4px}.dropdown-container .dropdown-item.disabled .dropdown-item-option{pointer-events:none!important;cursor:auto!important}.dropdown-container .dropdown-item.disabled .dropdown-item-option p{color:#919191!important}.dropdown-container .dropdown-item.disabled .dropdown-item-option .dropdown-item-option-icon svg path{fill:#91919166!important}.dropdown-container .dropdown-item.disabled .dropdown-item-option .dropdown-item-option-icon.delete svg path{fill:#df3c3c66!important}.dropdown-container .dropdown-item.disabled .dropdown-item-option .dropdown-item-option-icon.activate svg path{fill:#3b73ed66!important}.dropdown-container .dropdown-item.disabled .dropdown-item-option .dropdown-item-option-icon.open-business svg path{fill:#259f9466!important}.dropdown-container .dropdown-item.checkbox-disabled{cursor:auto}.dropdown-container .dropdown-item.icon-left .dropdown-item-option .dropdown-item-option-icon{order:1;margin:0 6px 0 0}.dropdown-container .dropdown-item.icon-left .dropdown-item-option p{order:2;margin-right:0}.dropdown-container .dropdown-item-option{padding:4px;border-radius:2px;transition:background .2s ease-in}.dropdown-container .dropdown-item-option:hover{background:#424242}.dropdown-container .dropdown-item-option:hover .dropdown-item-option-icon.regular svg path{fill:#ccc}.dropdown-container .dropdown-item-option:hover .dropdown-item-option-icon.delete svg path{fill:#ed9292}.dropdown-container .dropdown-item-option:hover .dropdown-item-option-icon.activate svg path{fill:#92b1f5}.dropdown-container .dropdown-item-option:hover .dropdown-item-option-icon.open-business svg path{fill:#86c9c3}.dropdown-container .dropdown-item-option-icon svg{width:18px;height:18px}.dropdown-container .dropdown-item-option-icon svg path{transition:fill .2s ease-in}.dropdown-container .dropdown-item-option-icon.regular svg path{fill:#fff3}.dropdown-container .dropdown-item-option-icon.delete svg path{fill-opacity:1;fill:#e66767}.dropdown-container .dropdown-item-option-icon.activate svg path{fill:#6692f1}.dropdown-container .dropdown-item-option-icon.open-business svg path{fill:#56b4ac}.dropdown-container .dropdown-item .inner-dropdown-item.active{background:#424242;border-radius:2px}.dropdown-container .dropdown-item .inner-dropdown-item.active .dropdown-item-option-icon{transform:rotate(180deg)}.dropdown-container .dropdown-item .inner-dropdown-item.active .inner-dropdown-list{max-height:fit-content!important;padding:4px!important}.dropdown-container .dropdown-item .inner-dropdown-item .dropdown-item-option-icon{margin-right:2px;transition:transform .3s}.dropdown-container .dropdown-item .inner-dropdown-item .dropdown-item-option-icon svg{width:16px!important;height:16px!important}.dropdown-container .dropdown-item .inner-dropdown-item .inner-dropdown-list{max-height:0;overflow:hidden;transition:max-height .2s,padding .2s}.dropdown-container .dropdown-item .inner-dropdown-item .inner-dropdown-list .dropdown-item-option{margin-bottom:4px;border-radius:2px}.dropdown-container .dropdown-item .inner-dropdown-item .inner-dropdown-list .dropdown-item-option:hover{background:#91919166}.dropdown-container .dropdown-item .inner-dropdown-item .inner-dropdown-list .dropdown-item-option:last-of-type{margin-bottom:0}\n"] }]
|
|
19657
|
+
], template: "<div\n class=\"d-flex align-items-center dropdown-menu-container\"\n [ngClass]=\"type | dropdownMenuPlacementClass\"\n>\n <!-- Icon -->\n\n @let dropdownMenuPopoverClass = `dropdown-menu-popover ${popoverClass}`;\n\n <div\n #dropdownPopover=\"ngbPopover\"\n triggers=\"'manual'\"\n [ngbPopover]=\"dropdownOptions\"\n [autoClose]=\"'outside'\"\n [placement]=\"placement\"\n [popoverClass]=\"dropdownMenuPopoverClass\"\n [container]=\"'body'\"\n (click)=\"handleDropdownOpenCloseClick(dropdownPopover)\"\n (hidden)=\"handleDropdownClose()\"\n >\n @let tooltipText =\n type === eDropdownMenu.HAMBURGER_MENU_TYPE\n ? isDropdownMenuActive\n ? eDropdownMenu.CLOSE_MENU\n : eDropdownMenu.OPEN_MENU\n : eDropdownMenu.MORE;\n <div\n class=\"d-flex align-items-center justify-content-center p-4 dropdown-icon-container\"\n [ngClass]=\"{\n active: dropdownPopover.isOpen(),\n 'dark-background': isDarkBackground,\n }\"\n ngbTooltip\n [mainCaTooltip]=\"tooltipText\"\n [tooltipBackground]=\"isDropdownMenuActive ? '#CCCCCC' : '#424242'\"\n [tooltipColor]=\"isDropdownMenuActive ? '#2F2F2F' : '#FFFFFF'\"\n [tooltipMarginTop]=\"'4px'\"\n [position]=\"'bottom'\"\n >\n <svg-icon\n class=\"icon svg-size-18 d-flex align-items-center\"\n [src]=\"\n type === eDropdownMenu.DOTS_MENU_TYPE\n ? dropdownMenuSvgRoutes.dotsDropdownIcon\n : dropdownMenuSvgRoutes.hamburgerDropdownIcon\n \"\n ></svg-icon>\n </div>\n </div>\n\n <!-- Dropdown -->\n\n <ng-template #dropdownOptions>\n <div class=\"d-flex flex-column dropdown-container\">\n @for (\n option of options;\n let optionIndex = $index,\n last = $last;\n track optionIndex\n ) {\n @if (option) {\n <div\n class=\"d-flex flex-column dropdown-item\"\n [ngClass]=\"{\n 'has-border': option?.hasBorder && !last,\n disabled: option?.isDisabled,\n 'icon-left': isLeftSideIconPosition,\n 'checkbox-disabled': option?.isCheckBoxDisabled,\n 'sticky-item':\n option?.isColumnDropdown && optionIndex === 0,\n }\"\n >\n <div\n class=\"d-flex flex-column mb-1\"\n [ngClass]=\"{\n 'inner-dropdown-item':\n !!option?.innerDropdownContent,\n active:\n optionIndex ===\n activeInnerDropdownOptionIndex,\n }\"\n >\n @let dropdownItemOptionClass =\n isLeftSideIconPosition\n ? 'gap-6'\n : isBackToMainDropdownItemHovered &&\n !isColumnsDropdown &&\n option.isColumnDropdown &&\n optionIndex === 0\n ? 'justify-content-between'\n : 'justify-content-between gap-6';\n <div\n class=\"d-flex align-items-center w-100 dropdown-item-option\"\n [ngClass]=\"dropdownItemOptionClass\"\n (click)=\"\n handleDropdownOptionClick(\n option,\n optionIndex\n )\n \"\n (mouseenter)=\"\n option.isColumnDropdown &&\n optionIndex === 0 &&\n handleBackToMainDropdownListItemHover(\n true\n )\n \"\n (mouseleave)=\"\n option.isColumnDropdown &&\n optionIndex === 0 &&\n handleBackToMainDropdownListItemHover(\n false\n )\n \"\n >\n @if (\n option.isColumnDropdown && optionIndex > 0\n ) {\n <app-ca-checkbox\n [label]=\"option.title\"\n [name]=\"option.type ?? option.title\"\n [itemIndex]=\"optionIndex\"\n [isRegularCheckbox]=\"false\"\n [isChecked]=\"option?.isChecked\"\n [isGroupPartialyChecked]=\"\n option | groupItemCheckedState\n \"\n [customClass]=\"'dropdown-column'\"\n [disabled]=\"option?.isCheckBoxDisabled\"\n [isLabelDisabled]=\"false\"\n [isDarkBackgroundCheckbox]=\"true\"\n (columnCheckAction)=\"\n handleCheckboxActionEmit($event)\n \"\n ></app-ca-checkbox>\n\n @if (option?.innerDropdownContent) {\n <svg-icon\n [src]=\"\n dropdownMenuSvgRoutes.showMoreIcon\n \"\n class=\"w-12 h-12 svg-size-12 d-flex dropdown-item-option-icon regular\"\n ></svg-icon>\n }\n } @else {\n <p\n class=\"m-0 text-size-14 text-color-white d-flex\"\n [ngClass]=\"{\n 'ca-font-bold':\n optionIndex ===\n activeInnerDropdownOptionIndex,\n }\"\n [ngClass]=\"option?.titleOptionalClass\"\n >\n @if (\n isBackToMainDropdownItemHovered &&\n !isColumnsDropdown\n ) {\n <svg-icon\n class=\"w-18 h-18 svg-size-18 d-flex align-items-center justify-content-center svg-fill-muted m-r-6\"\n [src]=\"\n dropdownMenuSvgRoutes.backToMenuIcon\n \"\n ></svg-icon>\n }\n @let dropdownItemOptionTitle =\n option.isColumnDropdown &&\n optionIndex === 0 &&\n isResetTableHovered\n ? eDropdownMenu.RESET_TABLE_TITLE\n : isBackToMainDropdownItemHovered &&\n !isColumnsDropdown\n ? eDropdownMenu.BACK_TO_MENU\n : option?.title;\n {{ dropdownItemOptionTitle }}\n </p>\n }\n\n @if (option?.svgUrl) {\n @let isFirstColumnDropdown =\n option.isColumnDropdown &&\n optionIndex === 0;\n <svg-icon\n class=\"dropdown-item-option-icon w-18 h-18 svg-size-18 d-flex align-items-center justify-content-center\"\n [ngClass]=\"option?.svgClass\"\n [src]=\"option?.svgUrl || ''\"\n (mouseenter)=\"\n isFirstColumnDropdown &&\n onResetTableHover()\n \"\n (mouseleave)=\"\n isFirstColumnDropdown &&\n onResetTableHover()\n \"\n (click)=\"\n isFirstColumnDropdown &&\n handleResetTableClick($event)\n \"\n ></svg-icon>\n }\n </div>\n\n <!-- Inner Dropdown -->\n\n @if (!!option?.innerDropdownContent) {\n <div\n class=\"d-flex flex-column inner-dropdown-list\"\n >\n @for (\n innerDropdownOption of option?.innerDropdownContent;\n let innerDropdownOptionIndex = $index;\n track innerDropdownOptionIndex\n ) {\n <div\n class=\"d-flex align-items-center justify-content-between gap-20 w-100 dropdown-item-option\"\n (click)=\"\n handleDropdownOptionClick(\n innerDropdownOption,\n innerDropdownOptionIndex,\n optionIndex\n )\n \"\n >\n @if (option?.isColumnDropdown) {\n <app-ca-checkbox\n [label]=\"\n innerDropdownOption.title\n \"\n [name]=\"\n innerDropdownOption.type ??\n innerDropdownOption.title\n \"\n [itemIndex]=\"\n innerDropdownOptionIndex\n \"\n [groupIndex]=\"optionIndex\"\n [isRegularCheckbox]=\"false\"\n [isChecked]=\"\n innerDropdownOption?.isChecked\n \"\n [disabled]=\"\n innerDropdownOption?.isCheckBoxDisabled\n \"\n [isLabelDisabled]=\"false\"\n [customClass]=\"\n 'dropdown-column'\n \"\n [isDarkBackgroundCheckbox]=\"\n true\n \"\n (columnCheckAction)=\"\n handleCheckboxActionEmit(\n $event\n )\n \"\n ></app-ca-checkbox>\n } @else {\n <p\n class=\"m-0 text-size-14 text-color-white\"\n >\n {{\n innerDropdownOption.title\n }}\n </p>\n }\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n }\n </div>\n </ng-template>\n</div>\n", styles: [".pickup-delivery-popover{top:-38px!important;max-width:420px!important}.pickup-delivery-popover .popover-body{transform:none;margin-left:-4px;margin-top:-1px}.pickup-delivery-popover.bs-popover-top{top:auto!important;bottom:-38px!important}.pickup-delivery-popover.bs-popover-top .load-component .assigned-load-holder{order:3;margin-top:4px;margin-bottom:0!important}.pickup-delivery-popover.bs-popover-top .load-component .statusBar{order:2;margin-top:4px}.pickup-delivery-popover.bs-popover-top .load-component .animation-three-tabs{order:1}.load-pickup-delivery-popover{top:-34px!important;max-width:400px!important}.gps_dropdown_popover{top:-38px;max-width:748px!important}.gps_dropdown_popover .popover-body{padding:0}.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;-webkit-animation:progressAnimation .25s ease-in-out;animation:progressAnimation .25s ease-in-out}.table-progress-popover .progress-dropdown .progress-header .progress-title{font-size:18px;font-weight:600;color:#fff}.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:#fff}.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:#fff}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@-webkit-keyframes progressAnimation{0%{height:0px}to{height:220px}}@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}.dispatch-note .popover-body{position:relative;top:-4px;left:-4px}.dropdown-menu-popover .popover-body{transform:none}.dropdown-menu-popover.bs-popover-end-top{margin-left:-4px!important;margin-top:-4px!important}.dropdown-menu-popover.bs-popover-bottom-end{margin-right:-4px!important;margin-top:-3px!important}.dropdown-menu-popover.bs-popover-end-bottom{margin-left:-3px!important;margin-bottom:-4px!important}.dropdown-menu-popover.bs-popover-top-end{margin-right:-4px!important;margin-bottom:-3px!important}.dropdown-menu-popover.ca-pickup-delivery-dropdown-popover.bs-popover-end-top{margin-left:0!important;margin-top:-6px!important}.dropdown-menu-popover.ca-pickup-delivery-list-dropdown-popover.bs-popover-end-top{margin-left:4px!important;margin-top:-6px!important}.dropdown-details-title-card-popover .dropdown-container{transform:translateY(-4px)}.fleet-filter-popover.bs-popover-bottom-start .fleet-filter-dropdown-container{transform:translate(-4px,-4px)!important}.fleet-filter-popover.bs-popover-top-start .fleet-filter-dropdown-container{transform:translate(-4px,4px)!important}.fleet-filter-sort-popover.bs-popover-end-top{transform:translate(158px,-3px)!important}.factoring-dropdown-popover.bs-popover-bottom-end .factoring-dropdown-container{transform:translate(4px,-4px)!important}.tooltip{font-size:12px;position:relative}.tooltip.show{opacity:1}.tooltip.fade:after,.tooltip.fade:before{transform:translateY(-10px);transition:all .15s ease-in-out}.tooltip.fade:hover:after,.tooltip.fade:hover:before{opacity:1;transform:translate(0)}.tooltip-inner{white-space:nowrap;max-width:none;border-radius:3px;font-size:11px;font-weight:600}.tooltip-inner:empty{padding:0}.placeholder-delete .tooltip-inner{background-color:#f66}.placeholder-delete .arrow:before{border-top-color:#f66}.custom-popup-owners-for-flag .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(126%) translate(-50%)!important;width:130px;border-radius:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-for-flag .arrow{bottom:-18%;transform:rotate(180deg);left:calc(50% + 2.7rem)}.custom-popup-owners-for-flag .tooltip{opacity:.93!important;width:0}.custom-popup-owners{z-index:999}.custom-popup-owners .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(132%);z-index:999;box-shadow:0 0 3px #0003}.custom-popup-owners .arrow{bottom:-20%;transform:rotate(180deg)}.custom-popup-owners .tooltip{transform:translateY(-61px)!important}.custom-popup-owners-year{z-index:999}.custom-popup-owners-year .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(132%);z-index:999;box-shadow:0 0 3px #0003}.custom-popup-owners-year .arrow{bottom:-20%;transform:rotate(180deg)}.custom-popup-owners-year .tooltip{transform:translate(70px,-61px)!important}.custom-popup-owners-info .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(-100%) translate(-10%);width:200px;height:36px;display:flex;justify-content:center;align-items:center;border-radius:3px;margin-top:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-info .tooltip{opacity:.93;width:0}.custom-popup-owners-info .arrow{display:none}.custom-popup-owners-info #phone-inside{position:relative;right:26px;bottom:0}.custom-popup-owners-info-at .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(-108%) translate(-7%);width:270px;height:36px;display:flex;justify-content:center;align-items:center;border-radius:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-info-at .tooltip{opacity:1;width:0}.custom-popup-owners-info-at .arrow{display:none}.custom-popup-owners-for-tag .tooltip-inner{color:#3b3b3b;background-color:#fff;width:100px;border-radius:3px;box-shadow:0 0 3px #0003!important}.custom-popup-owners-for-tag .tooltip{top:5px!important}.custom-popup-owners-for-tag .arrow{bottom:-24%}.align-items-flex-start{justify-content:center;align-items:center}.align-items-flex-end{display:flex;justify-content:center;flex-direction:column;align-self:flex-end;align-items:flex-start}.label-add{align-self:flex-start}.fadeInLoad{animation:fadeInLoad .25s}@keyframes fadeInLoad{0%{opacity:0}to{opacity:1}}.fadeIn{opacity:1;-webkit-transition:.25s;-moz-transition:.25s;-o-transition:.25s;transition:.25s}.thisText:hover .fadeIn{opacity:0}.fadeInLoad{animation-name:example;animation-duration:.25s}@keyframes example{0%{transform:scale(.5)}to{transform:scale(1)}}.tooltip.tooltip-table-icons{left:12px!important;opacity:1}.tooltip.tooltip-table-icons .arrow{display:none!important}.tooltip.tooltip-table-icons .tooltip-inner{border-radius:0 50px 50px;background:#28529f}.tooltip.show{opacity:1;animation:fadeIn ease .5s!important;-webkit-animation:fadeIn ease .5s!important;-moz-animation:fadeIn ease .5s!important;-o-animation:fadeIn ease .5s!important;-ms-animation:fadeIn ease .5s!important}.ta-tooltip{position:absolute;font-size:12px;text-align:center;color:#fff;line-height:22px;z-index:999999!important;opacity:0;white-space:nowrap;transform:scale(.7)}.ta-tooltip.ta-tooltip-show{opacity:.85;transform:scale(1);padding:0 12px}.ta-tooltip.ta-tooltip-bottom-right,.ta-tooltip.ta-tooltip-bottom-right-corner{transform-origin:top left;border-radius:0 15px 15px}.ta-tooltip.ta-tooltip-bottom-left{transform-origin:top right;border-radius:15px 0 15px 15px}@keyframes scaleItem{0%{transform:scale(.4)}to{transform:scale(1)}}.app-ca-main-tooltip{pointer-events:none}.app-ca-main-tooltip .tooltip-inner{padding:0;background-color:transparent;pointer-events:none}.app-ca-main-tooltip .tooltip-inner .tooltip-holder{display:flex;font-size:11px;line-height:14px;font-weight:600;border-radius:3px;padding:2px 6px;animation:scaleItem .3s;white-space:normal}.app-ca-main-tooltip .tooltip-inner .tooltip-holder:empty{padding:0}.tooltip-arrow{display:none!important}.trucks.semitruck svg path,.trucks.semisleeper svg path,.trucks.flatbed svg path,.trucks.stepdeck svg path,.trucks.lowboyrgn svg path,.trucks.chassis svg path,.trucks.conestoga svg path,.trucks.sidekit svg path,.trucks.container svg path,.trailers.semitruck svg path,.trailers.semisleeper svg path,.trailers.flatbed svg path,.trailers.stepdeck svg path,.trailers.lowboyrgn svg path,.trailers.chassis svg path,.trailers.conestoga svg path,.trailers.sidekit svg path,.trailers.container svg path{fill:#92b1f5}.trucks.boxtruck svg path,.trucks.reefertruck svg path,.trucks.cargovan svg path,.trucks.dryvan svg path,.trucks.reefer svg path,.trailers.boxtruck svg path,.trailers.reefertruck svg path,.trailers.cargovan svg path,.trailers.dryvan svg path,.trailers.reefer svg path{fill:#fbc88b}.trucks.dumptruck svg path,.trucks.cementtruck svg path,.trucks.garbagetruck svg path,.trucks.enddump svg path,.trucks.bottomdump svg path,.trucks.hopper svg path,.trucks.tanker svg path,.trucks.pneumatictanker svg path,.trailers.dumptruck svg path,.trailers.cementtruck svg path,.trailers.garbagetruck svg path,.trailers.enddump svg path,.trailers.bottomdump svg path,.trailers.hopper svg path,.trailers.tanker svg path,.trailers.pneumatictanker svg path{fill:#ed9292}.trucks.towtruck svg path,.trucks.carhauler svg path,.trucks.spotter svg path,.trucks.carhaulerstigner svg path,.trailers.towtruck svg path,.trailers.carhauler svg path,.trailers.spotter svg path,.trailers.carhaulerstigner svg path{fill:#86c9c3}.trucks .svgtext-template-text,.trailers .svgtext-template-text{color:#fff;transition:color .3s ease-in-out}.colors .black svg #droplet{fill:#6c6c6c}.colors .brown svg #droplet{fill:#a1887f}.colors .darkgreen svg #droplet{fill:#4db6a2}.colors .lightgreen svg #droplet{fill:#81c784}.colors .darkblue svg #droplet{fill:#546fd2}.colors .lightblue svg #droplet{fill:#64b5f6}.colors .gray svg #droplet{fill:#aaa}.colors .purple svg #droplet{fill:#ba68c8}.colors .gold svg #droplet{fill:#bcad79}.colors .silver svg #droplet{fill:#dadada}.colors .red svg #droplet{fill:#f96b69}.colors .pink svg #droplet{fill:#f26ec2}.colors .white svg #droplet{fill:#f1f1f1}.colors .orange svg #droplet{fill:#ff8a65}.colors .yellow svg #droplet{fill:#ffd54f}.colors:hover{transition:all .3s ease-in-out}.colors:hover .black svg #droplet{fill:#3c3c3c}.colors:hover .brown svg #droplet{fill:#8d6e63}.colors:hover .darkgreen svg #droplet{fill:#26a690}.colors:hover .lightgreen svg #droplet{fill:#66bb6a}.colors:hover .darkblue svg #droplet{fill:#304fc1}.colors:hover .lightblue svg #droplet{fill:#42a5f5}.colors:hover .gray svg #droplet{fill:#919191}.colors:hover .purple svg #droplet{fill:#ab47bc}.colors:hover .gold svg #droplet{fill:#aa9c6e}.colors:hover .silver svg #droplet{fill:#b7b7b7}.colors:hover .red svg #droplet{fill:#ef5350}.colors:hover .pink svg #droplet{fill:#fa4daa}.colors:hover .white svg #droplet{fill:#fff}.colors:hover .orange svg #droplet{fill:#ff7043}.colors:hover .yellow svg #droplet{fill:#ffca28}.filter-dropdown-popover{width:260px;position:relative;top:-4px;left:-4px}.filter-dropdown-popover-max-height{max-height:360px}.filter-dropdown-list{max-height:260px;overflow-y:auto}.filter-dropdown-list-icon{height:26px;transition:background-color .3s ease-in-out}.filter-dropdown-list-icon-value{height:14px;width:14px}.filter-dropdown-list-icon-remove{display:none}.filter-dropdown-list-icon:hover{background-color:#424242}.filter-dropdown-list-icon:hover .filter-dropdown-icon-count{display:none}.filter-dropdown-list-icon-selected:hover{background-color:#0b49d1}.filter-dropdown-list-item-icons{transition:opacity .3s ease-in-out;opacity:0}.filter-dropdown-list-item-status-circle{height:10px;width:10px}.filter-dropdown-list-item-remove{display:none}.filter-dropdown-list-item:hover{background-color:#424242}.filter-dropdown-list-item:hover .filter-dropdown-list-item-icons{opacity:1}.filter-dropdown-list-item:hover .filter-dropdown-list-item-icons svg path{fill:var(--svg-fill-color, #e66767)}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-remove{display:flex}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-remove svg path{fill:#e66767!important}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-count{display:none!important}.filter-dropdown-icon{height:26px;width:26px}.filter-dropdown-count{height:14px;width:14px}.filter-dropdown-count-remove,.filter-dropdown-count-hover:hover .filter-dropdown-count-value{display:none}.filter-dropdown-count-hover:hover .filter-dropdown-count-remove{display:flex}.filter-dropdown-button{height:26px}.filter-dropdown-footer-button{color:#dadada;transition:color .3s ease-in-out,background-color .3s ease-in-out;height:18px;width:50%}.filter-dropdown-footer-button-set{color:#fff;background-color:#3b73ed}.filter-dropdown-footer-button-set:hover{background-color:#e9effd;color:#0b49d1}.filter-dropdown-footer-button-clear{color:#dadada}.filter-dropdown-footer-button-clear:hover{background-color:#eee;color:#424242}.filter-dropdown-list-badge{min-width:18px}.shadow-100{box-shadow:0 0 4px #0003}.shadow-300{box-shadow:0 0 6px #0003}.opacity-40{opacity:.4}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-90{opacity:.9}@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}}.transition-width{transition:width .25s cubic-bezier(.46,.03,.51,.95);overflow-x:hidden}.transition-transform{transition:transform .25s cubic-bezier(.46,.03,.51,.95)}.transition-transform-100{transition:transform .1s cubic-bezier(.46,.03,.51,.95)}.transition-transform-400{transition:transform .4s cubic-bezier(.46,.03,.51,.95)}.transition-width-transform{transition-duration:.25s;transition-timing-function:cubic-bezier(.46,.03,.51,.95);transition-property:transform,width}.transition-background{transition:background .2s cubic-bezier(.46,.03,.51,.95)}.transition-background-100{transition:background .1s cubic-bezier(.46,.03,.51,.95)}.transition-background-color-300{transition:background,color .3s cubic-bezier(.46,.03,.51,.95)}.transition-fill-100 svg path{transition:fill .1s cubic-bezier(.46,.03,.51,.95)}.transition-duration-250{transition-duration:.25s}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}::ng-deep .popover{--bs-popover-border-width: 0;--bs-popover-body-padding-y: 0;--bs-popover-body-padding-x: 0}::ng-deep .popover .popover-arrow{display:none}.pointer-events-none{pointer-events:none}.ca-scroll-bar{overflow-y:scroll}.ca-scroll-bar::-webkit-scrollbar{width:2px}.ca-scroll-bar::-webkit-scrollbar-thumb{background:#ccc;border-radius:1px}.ca-scroll-bar::-webkit-scrollbar-track{background:#2f2f2f}.highlight-text-45632{background-color:#3b73ed33;color:#92b1f5;transition:all .3s ease-in-out}.dots-menu .dropdown-icon-container.active .icon,.menu-translate-unset .dropdown-icon-container.active .icon{transform:rotate(90deg)}.dots-menu .dropdown-icon-container .icon,.menu-translate-unset .dropdown-icon-container .icon{bottom:0}.dots-menu .dropdown-icon-container .icon svg,.menu-translate-unset .dropdown-icon-container .icon svg{display:flex;width:18px;height:18px}.menu-translate-unset .dropdown-icon-container.active{padding-left:unset}.menu-translate-unset .dropdown-container{transform:unset}.dropdown-icon-container{width:26px;height:26px;border-radius:2px;transition:background .2s ease-in,padding .2s ease-in;cursor:pointer}.dropdown-icon-container:hover{background:#91919133}.dropdown-icon-container:hover .icon svg path,.dropdown-icon-container:hover .icon svg circle{fill:#424242}.dropdown-icon-container.active{background:#424242}.dropdown-icon-container.active .icon svg path,.dropdown-icon-container.active .icon svg circle{fill:#dadada}.dropdown-icon-container.dark-background .icon svg path,.dropdown-icon-container.dark-background .icon svg circle{fill:#919191}.dropdown-icon-container.dark-background:hover{background:#91919166}.dropdown-icon-container.dark-background:hover .icon svg path,.dropdown-icon-container.dark-background:hover .icon svg circle{fill:#dadada}.dropdown-icon-container.dark-background.active{background:#dadada}.dropdown-icon-container.dark-background.active .icon svg path,.dropdown-icon-container.dark-background.active .icon svg circle{fill:#424242}.dropdown-icon-container .icon{position:relative;transition:transform .2s ease-in}.dropdown-icon-container .icon svg path,.dropdown-icon-container .icon svg circle{transition:fill .2s ease-in;fill:#919191}.dropdown-container{min-width:178px;max-width:220px;padding:4px;border-radius:3px;background:#2f2f2f;max-height:456px;overflow-y:auto}.dropdown-container::-webkit-scrollbar{width:4px}.dropdown-container::-webkit-scrollbar-track{background-color:#424242;border-radius:0 3px 3px 0}.dropdown-container::-webkit-scrollbar-thumb{background:#424242;border-left:2px solid #919191;background-clip:padding-box;border-radius:1px 3px 3px 1px}.dropdown-container:has(.sticky-item){padding:0 4px 4px}.dropdown-container:has(.sticky-item)::-webkit-scrollbar-track{margin-top:34px}.dropdown-container .dropdown-item{cursor:pointer;-ms-user-select:none;-webkit-user-select:none;user-select:none;-moz-user-select:none}.dropdown-container .dropdown-item.sticky-item{position:sticky;top:0;z-index:10;background:#2f2f2f;padding-top:4px}.dropdown-container .dropdown-item.has-border{padding-bottom:3px;border-bottom:1px solid #424242;margin-bottom:4px}.dropdown-container .dropdown-item.disabled .dropdown-item-option{pointer-events:none!important;cursor:auto!important}.dropdown-container .dropdown-item.disabled .dropdown-item-option p{color:#919191!important}.dropdown-container .dropdown-item.disabled .dropdown-item-option .dropdown-item-option-icon svg path{fill:#91919166!important}.dropdown-container .dropdown-item.disabled .dropdown-item-option .dropdown-item-option-icon.delete svg path{fill:#df3c3c66!important}.dropdown-container .dropdown-item.disabled .dropdown-item-option .dropdown-item-option-icon.activate svg path{fill:#3b73ed66!important}.dropdown-container .dropdown-item.disabled .dropdown-item-option .dropdown-item-option-icon.open-business svg path{fill:#259f9466!important}.dropdown-container .dropdown-item.checkbox-disabled{cursor:auto}.dropdown-container .dropdown-item.icon-left .dropdown-item-option .dropdown-item-option-icon{order:1;margin:0 6px 0 0}.dropdown-container .dropdown-item.icon-left .dropdown-item-option p{order:2;margin-right:0}.dropdown-container .dropdown-item-option{padding:4px;border-radius:2px;transition:background .2s ease-in}.dropdown-container .dropdown-item-option:hover{background:#424242}.dropdown-container .dropdown-item-option:hover .dropdown-item-option-icon.regular svg path{fill:#ccc}.dropdown-container .dropdown-item-option:hover .dropdown-item-option-icon.delete svg path{fill:#ed9292}.dropdown-container .dropdown-item-option:hover .dropdown-item-option-icon.activate svg path{fill:#92b1f5}.dropdown-container .dropdown-item-option:hover .dropdown-item-option-icon.open-business svg path{fill:#86c9c3}.dropdown-container .dropdown-item-option-icon svg{width:18px;height:18px}.dropdown-container .dropdown-item-option-icon svg path{transition:fill .2s ease-in}.dropdown-container .dropdown-item-option-icon.regular svg path{fill:#fff3}.dropdown-container .dropdown-item-option-icon.delete svg path{fill-opacity:1;fill:#e66767}.dropdown-container .dropdown-item-option-icon.activate svg path{fill:#6692f1}.dropdown-container .dropdown-item-option-icon.open-business svg path{fill:#56b4ac}.dropdown-container .dropdown-item .inner-dropdown-item.active{background:#424242;border-radius:2px}.dropdown-container .dropdown-item .inner-dropdown-item.active .dropdown-item-option-icon{transform:rotate(180deg)}.dropdown-container .dropdown-item .inner-dropdown-item.active .inner-dropdown-list{max-height:fit-content!important;padding:4px!important}.dropdown-container .dropdown-item .inner-dropdown-item .dropdown-item-option-icon{margin-right:2px;transition:transform .3s}.dropdown-container .dropdown-item .inner-dropdown-item .dropdown-item-option-icon svg{width:16px!important;height:16px!important}.dropdown-container .dropdown-item .inner-dropdown-item .inner-dropdown-list{max-height:0;overflow:hidden;transition:max-height .2s,padding .2s}.dropdown-container .dropdown-item .inner-dropdown-item .inner-dropdown-list .dropdown-item-option{margin-bottom:4px;border-radius:2px}.dropdown-container .dropdown-item .inner-dropdown-item .inner-dropdown-list .dropdown-item-option:hover{background:#91919166}.dropdown-container .dropdown-item .inner-dropdown-item .inner-dropdown-list .dropdown-item-option:last-of-type{margin-bottom:0}\n"] }]
|
|
19665
19658
|
}], ctorParameters: () => [], propDecorators: { type: [{
|
|
19666
19659
|
type: Input
|
|
19667
19660
|
}], options: [{
|
|
@@ -19747,7 +19740,7 @@ class ActiveLoadComponent {
|
|
|
19747
19740
|
}
|
|
19748
19741
|
}
|
|
19749
19742
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ActiveLoadComponent, deps: [{ token: FormatCurrencyPipe }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
19750
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ActiveLoadComponent, isStandalone: true, selector: "app-ca-load-single", inputs: { activeLoad: "activeLoad", status: "status" }, outputs: { dropdownMenuAction: "dropdownMenuAction" }, providers: [FormatCurrencyPipe], ngImport: i0, template: "@if (activeLoad && activeLoad.length) {\n <div\n class=\"load-details d-flex\"\n (mouseenter)=\"onLoadDetailsHover()\"\n (mouseleave)=\"onLoadDetailsHover()\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n loadDetailsTemplate;\n context: { load: activeLoad[0] }\n \"\n ></ng-container>\n\n <div class=\"button-container\">\n <ca-dropdown-menu\n [type]=\"'dots-menu-type'\"\n [placement]=\"'end-top'\"\n [popoverClass]=\"'ca-pickup-delivery-dropdown-popover'\"\n [isDarkBackground]=\"true\"\n [isLeftSideIconPosition]=\"true\"\n [options]=\"dropdownOptions\"\n (dropdownOptionEmitter)=\"\n onToggleDropdownMenuActions($event, activeLoad[0]?.id!)\n \"\n >\n </ca-dropdown-menu>\n </div>\n </div>\n\n <div class=\"stops d-flex justify-content-between w-100\">\n <ng-container\n *ngTemplateOutlet=\"stopsTemplate; context: { load: activeLoad[0] }\"\n ></ng-container>\n </div>\n\n <div class=\"dispatch-stops\">\n @let isComboLoad = activeLoad[0].type?.name === 'Combo';\n\n @if (isComboLoad) {\n @let comboChildLoads = activeLoad[0].childLoads!;\n\n @for (\n comboChildLoad of comboChildLoads;\n let first = $first;\n track comboChildLoad.id\n ) {\n @let isBrokerCardOpen =\n openBrokerCardIds.has(comboChildLoad.id);\n\n @let brokerCardClass =\n {\n 'p-t-2': first,\n 'border-top p-t-6': !first,\n active: isBrokerCardOpen,\n };\n\n @let loadNumber = comboChildLoad.loadNumber!;\n @let brokerName = comboChildLoad.broker?.businessName!;\n\n <div\n class=\"d-flex flex-column p-b-6 p-r-4 p-l-2 c-pointer broker-card\"\n [ngClass]=\"brokerCardClass\"\n (click)=\"onToggleBrokerCard(comboChildLoad.id)\"\n >\n <div\n class=\"d-flex align-items-center justify-content-between\"\n >\n <div class=\"d-flex align-items-center\">\n <p class=\"ca-font-bold text-size-11 load-number\">\n {{ loadNumber }}\n </p>\n\n @if (comboChildLoad.referenceNumber) {\n <span\n class=\"m-l-4 text-size-11 ref-number\"\n >\n ({{ comboChildLoad.referenceNumber }})</span\n >\n }\n </div>\n\n <div class=\"d-flex align-items-center max-w-159\">\n @if (!isBrokerCardOpen) {\n <p\n class=\"text-size-11 text-color-muted text-truncate m-r-4\"\n >\n {{ brokerName }}\n </p>\n }\n\n <svg-icon\n class=\"svg-size-14 card-arrow\"\n [class.arrow-rotated]=\"isBrokerCardOpen\"\n [src]=\"getSvgPath('arrowDown')\"\n ></svg-icon>\n </div>\n </div>\n\n <div\n class=\"d-flex align-items-center broker-card-dropdown-content\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n brokerItemTemplate;\n context: { load: comboChildLoad }\n \"\n ></ng-container>\n </div>\n </div>\n }\n } @else {\n <span class=\"bussiness-name ca-font-bold\"> BROKER </span>\n\n <ng-container\n *ngTemplateOutlet=\"\n brokerItemTemplate;\n context: { load: activeLoad[0] }\n \"\n ></ng-container>\n }\n </div>\n\n @if (activeLoad[0]?.driverMessage) {\n <div class=\"driverMessage\">\n <h3 class=\"ca-font-bold\">DRIVER MESSAGE</h3>\n <span\n class=\"message ca-font-regular text-start\"\n [innerHTML]=\"activeLoad[0].driverMessage\"\n ></span>\n </div>\n }\n} @else {\n <div class=\"no-active-load-message\">\n <h2>No active load</h2>\n </div>\n}\n\n<ng-template #loadDetailsTemplate let-load=\"load\">\n @let isSplitLoad = load.type?.name === 'Split';\n @let isComboLoad = load.type?.name === 'Combo';\n\n <div class=\"details-container d-flex flex-column justify-content-between\">\n <div class=\"top-details d-flex justify-content-between\">\n <div class=\"d-flex align-items-center\">\n <span class=\"price ca-font-bold m-r-4\">\n {{ load.loadNumber }}\n </span>\n\n @if (isSplitLoad) {\n <svg-icon\n class=\"svg-size-14\"\n [src]=\"getSvgPath('splitLoad')\"\n ></svg-icon>\n }\n\n @if (isComboLoad) {\n <svg-icon\n class=\"svg-size-14 position-relative bottom-1\"\n [src]=\"getSvgPath('comboLoad')\"\n ></svg-icon>\n }\n </div>\n\n <span class=\"load ca-font-medium\">{{\n load.totalRate! | formatCurrency\n }}</span>\n </div>\n\n <div class=\"bottom-details d-flex justify-content-between h-14\">\n <div class=\"d-flex align-items-center\">\n @if (isLoadDetailsHovered) {\n <svg-icon\n class=\"svg-size-14 m-r-4\"\n [src]=\"getSvgPath('miles')\"\n ></svg-icon>\n\n <p class=\"text-color-white\">\n {{ load.totalMiles }}\n\n mi\n </p>\n } @else {\n <span class=\"ref-text ca-font-bold m-r-4\">Ref.</span>\n\n <p class=\"miles-ref\">\n {{ load.referenceNumber }}\n </p>\n }\n </div>\n\n <div class=\"d-flex align-items-center\">\n @let isClosedLoad = load.statusType?.name === 'Closed';\n\n @if (!isClosedLoad) {\n @let hasAdjustedRate = !!load.totalAdjustedRate;\n\n @if (isLoadDetailsHovered) {\n <p class=\"ref-text ca-font-bold m-r-4\">RPM</p>\n\n <span class=\"ca-font-semi-bold text-color-white\">\n {{ load.rpm | formatCurrency }}\n </span>\n } @else {\n <p class=\"ref-text ca-font-bold m-r-4\">\n {{ hasAdjustedRate ? 'Adj.' : 'RPM' }}\n </p>\n\n <span\n class=\"ca-font-semi-bold\"\n [class]=\"\n hasAdjustedRate\n ? 'text-color-purple-2'\n : 'text-color-white'\n \"\n >\n {{\n (hasAdjustedRate\n ? load.totalAdjustedRate\n : load.rpm\n ) | formatCurrency\n }}\n </span>\n }\n }\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #stopsTemplate let-load=\"load\">\n @let isSplitLoad = load.type?.name === 'Split';\n\n @let pickupStopNumber = isSplitLoad ? 'S' : load.pickup?.stopOrder;\n\n <div class=\"stops-side d-flex align-items-center flex-basis-50\">\n <span\n class=\"line-left d-flex justify-content-center align-items-center ca-font-bold\"\n [class]=\"isSplitLoad ? 'text-color-yellow-4' : 'text-color-green-4'\"\n [class.split-load]=\"isSplitLoad\"\n >\n {{ pickupStopNumber }}\n </span>\n\n <div class=\"date-location left d-flex flex-column align-items-start\">\n <span\n class=\"location ca-font-semi-bold text-start text-truncate d-block\"\n >\n {{\n load.pickup?.shipper?.address?.city\n | formatCityStatePipe\n : load.pickup?.shipper?.address?.stateShortName\n }}\n </span>\n\n <span class=\"date ca-font-regular\">\n {{ load.pickup?.dateFrom | dateFromStringPipe }},\n {{ load.pickup?.dateFrom | dateFromStringPipe: 'time' }}\n </span>\n </div>\n </div>\n\n <span class=\"arrow d-flex justify-content-center align-items-center\">\n <svg-icon\n class=\"svg-size-10\"\n [src]=\"getSvgPath('arrowRight')\"\n ></svg-icon>\n </span>\n\n <div class=\"stops-side right d-flex align-items-center flex-basis-50\">\n <div class=\"date-location right d-flex flex-column align-items-end\">\n <span\n class=\"location ca-font-semi-bold text-end text-truncate d-block\"\n >\n {{\n load.delivery?.shipper?.address?.city\n | formatCityStatePipe\n : load.delivery?.shipper?.address?.stateShortName\n }}\n </span>\n <span class=\"date ca-font-regular\">\n {{ load.delivery?.dateFrom | dateFromStringPipe }},\n {{ load.delivery?.dateFrom | dateFromStringPipe: 'time' }}\n </span>\n </div>\n <span\n class=\"line-right d-flex justify-content-center align-items-center ca-font-bold\"\n >\n {{ load.delivery?.stopOrder }}\n </span>\n </div>\n</ng-template>\n\n<ng-template #brokerItemTemplate let-load=\"load\">\n <div class=\"broker ca-font-regular\">\n @let isFraudCheck = load?.broker?.fraudCheck;\n\n <div class=\"d-flex align-items-center\">\n @if (isFraudCheck) {\n <div\n ngbTooltip\n [mainCaTooltip]=\"'Fraud check'\"\n [tooltipBackground]=\"eColor.LIGHT_GREY\"\n [tooltipColor]=\"eColor.DARK_GREY\"\n [position]=\"ePosition.BOTTOM\"\n >\n <svg-icon\n class=\"svg-size-14 m-r-4 svg-hover-yellow-4\"\n [src]=\"getSvgPath('fraudCheck')\"\n ></svg-icon>\n </div>\n }\n\n <p class=\"text-truncate\">\n {{ load.broker?.businessName }}\n </p>\n </div>\n\n <div\n class=\"d-flex align-items-center justify-content-between m-t-8\"\n >\n @let hasBrokerContact = !!load.broker?.contactName;\n\n <p\n class=\"text-color-muted text-truncate\"\n [class.text-decoration-line-through]=\"!hasBrokerContact\"\n >\n <svg-icon\n class=\"svg-size-14 position-relative bottom-1\"\n [src]=\"getSvgPath('userIcon')\"\n ></svg-icon>\n\n {{ load.broker?.contactName ?? 'No Contact' }}\n </p>\n\n <div class=\"d-flex align-items-center\">\n <cai-copy\n [value]=\"load.broker?.phone!\"\n [copyArea]=\"'full'\"\n [hasNoIcon]=\"true\"\n [inverse]=\"true\"\n [tooltipPlacement]=\"'top'\"\n >\n <div\n class=\"d-flex align-items-center justify-content-center br-1 c-pointer w-18 h-18 background-hover-dark-3 svg-hover-bw-9 m-r-4\"\n >\n <svg-icon\n class=\"svg-size-14 position-relative bottom-1\"\n [src]=\"getSvgPath('phoneIcon')\"\n ></svg-icon>\n </div>\n </cai-copy>\n\n <cai-copy\n [value]=\"load.broker?.email!\"\n [copyArea]=\"'full'\"\n [hasNoIcon]=\"true\"\n [inverse]=\"true\"\n [tooltipPlacement]=\"'top'\"\n >\n <div\n class=\"d-flex align-items-center justify-content-center br-1 c-pointer w-18 h-18 background-hover-dark-3 svg-hover-bw-9\"\n >\n <svg-icon\n class=\"svg-size-14 position-relative bottom-1\"\n [src]=\"getSvgPath('mailIcon')\"\n ></svg-icon>\n </div>\n </cai-copy>\n </div>\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}}.load-details{font-family:Montserrat,sans-serif;padding:2px}.details-container{flex:1}.details-container .top-details{gap:12px;padding:8px 4px 2px}.details-container .bottom-details{gap:8px;padding:0 4px;margin-top:2px}.price,.load{color:#fff;font-size:14px}.price.price,.load.price{text-align:right}.miles-ref{color:#fff}.ref-text{color:#919191}.button-container{margin-top:2px}.menu-button{background:none;border:none;color:#fff;font-size:14px;cursor:pointer;padding:2px 4px}.menu-button:hover{background-color:#ffffff1a;border-radius:4px}.menu-button i{font-size:18px}.stops{font-family:Montserrat,sans-serif;height:30px;background-color:#2f2f2f;margin-bottom:6px;margin-top:6px;font-size:14px}.stops .stops-side{min-width:0;height:26px;padding-top:2px}.stops .stops-side .line-left{border-right:solid 2px rgba(37,159,148,.4);width:22px;height:18px}.stops .stops-side .line-left.split-load{border-right:solid 2px rgba(248,155,46,.4)}.stops .stops-side .line-right{border-left:solid 2px rgba(255,112,67,.4);width:22px;height:18px}.stops .stops-side.right{justify-content:end;padding-right:4px}.stops .stops-side:first-child{color:#86c9c3}.stops .stops-side:last-child{color:#ed9292}.stops .stops-side .date-location{width:100%;min-width:0}.stops .stops-side .date-location.right{margin-right:4px}.stops .stops-side .date-location.left{margin-left:4px}.stops .stops-side .date-location .location{font-size:11px;line-height:14px;color:#fff;width:90%;min-width:0}.stops .stops-side .date-location .date{font-size:11px;line-height:14px;text-align:left;color:#919191}.dispatch-stops{font-family:Montserrat,sans-serif;border-top:1px #424242 solid;color:#fff;text-align:left;padding-top:6px;margin:0 4px}.dispatch-stops .bussiness-name{line-height:18px}.dispatch-stops .broker-card.border-top{border-top:1px solid #424242!important}.dispatch-stops .broker-card:hover .load-number,.dispatch-stops .broker-card.active .load-number{color:#fff}.dispatch-stops .broker-card:hover .card-arrow svg path,.dispatch-stops .broker-card.active .card-arrow svg path{fill:#dadada}.dispatch-stops .broker-card:hover .card-arrow.arrow-rotated,.dispatch-stops .broker-card.active .ref-number{visibility:visible}.dispatch-stops .broker-card.active .broker-card-dropdown-content{max-height:500px;opacity:1;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .25s ease-in .05s}.dispatch-stops .broker-card .load-number{transition:color .3s ease;color:#919191}.dispatch-stops .broker-card .ref-number{transition:visibility .3s ease;visibility:hidden}.dispatch-stops .broker-card .card-arrow{transition:transform .3s ease,visibility .1 ease-in}.dispatch-stops .broker-card .card-arrow.arrow-rotated{transform:rotate(180deg);visibility:hidden}.dispatch-stops .broker-card .broker-card-dropdown-content{max-height:0;overflow:hidden;opacity:0;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity 0s linear .3s}.broker{width:100%;padding:6px 0 4px;color:#fff}.broker>p{font-size:11px;line-height:14px;text-align:left;color:#fff;margin-bottom:4px}.driverMessage{padding:8px 4px 0;border-top:1px #424242 solid;color:#919191}.driverMessage>h3{color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:left;font-family:Montserrat,sans-serif}.driverMessage .message{display:block;width:100%;padding:6px 0 4px;font-family:Montserrat,sans-serif}.no-active-load-message{font-family:Montserrat,sans-serif;padding-top:4px;padding-bottom:4px}\n"], dependencies: [{ 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: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: 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:
|
|
19743
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ActiveLoadComponent, isStandalone: true, selector: "app-ca-load-single", inputs: { activeLoad: "activeLoad", status: "status" }, outputs: { dropdownMenuAction: "dropdownMenuAction" }, providers: [FormatCurrencyPipe], ngImport: i0, template: "@if (activeLoad && activeLoad.length) {\n <div\n class=\"load-details d-flex\"\n (mouseenter)=\"onLoadDetailsHover()\"\n (mouseleave)=\"onLoadDetailsHover()\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n loadDetailsTemplate;\n context: { load: activeLoad[0] }\n \"\n ></ng-container>\n\n <div class=\"button-container\">\n <ca-dropdown-menu\n [type]=\"'dots-menu-type'\"\n [placement]=\"'end-top'\"\n [popoverClass]=\"'ca-pickup-delivery-dropdown-popover'\"\n [isDarkBackground]=\"true\"\n [isLeftSideIconPosition]=\"true\"\n [options]=\"dropdownOptions\"\n (dropdownOptionEmitter)=\"\n onToggleDropdownMenuActions($event, activeLoad[0]?.id!)\n \"\n >\n </ca-dropdown-menu>\n </div>\n </div>\n\n <div class=\"stops d-flex justify-content-between w-100\">\n <ng-container\n *ngTemplateOutlet=\"stopsTemplate; context: { load: activeLoad[0] }\"\n ></ng-container>\n </div>\n\n <div class=\"dispatch-stops\">\n @let isComboLoad = activeLoad[0].type?.name === 'Combo';\n\n @if (isComboLoad) {\n @let comboChildLoads = activeLoad[0].childLoads!;\n\n @for (\n comboChildLoad of comboChildLoads;\n let first = $first;\n track comboChildLoad.id\n ) {\n @let isBrokerCardOpen =\n openBrokerCardIds.has(comboChildLoad.id);\n\n @let brokerCardClass =\n {\n 'p-t-2': first,\n 'border-top p-t-6': !first,\n active: isBrokerCardOpen,\n };\n\n @let loadNumber = comboChildLoad.loadNumber!;\n @let brokerName = comboChildLoad.broker?.businessName!;\n\n <div\n class=\"d-flex flex-column p-b-6 p-r-4 p-l-2 c-pointer broker-card\"\n [ngClass]=\"brokerCardClass\"\n (click)=\"onToggleBrokerCard(comboChildLoad.id)\"\n >\n <div\n class=\"d-flex align-items-center justify-content-between\"\n >\n <div class=\"d-flex align-items-center\">\n <p class=\"ca-font-bold text-size-11 load-number\">\n {{ loadNumber }}\n </p>\n\n @if (comboChildLoad.referenceNumber) {\n <span\n class=\"m-l-4 text-size-11 ref-number\"\n >\n ({{ comboChildLoad.referenceNumber }})</span\n >\n }\n </div>\n\n <div class=\"d-flex align-items-center max-w-159\">\n @if (!isBrokerCardOpen) {\n <p\n class=\"text-size-11 text-color-muted text-truncate m-r-4\"\n >\n {{ brokerName }}\n </p>\n }\n\n <svg-icon\n class=\"svg-size-14 card-arrow\"\n [class.arrow-rotated]=\"isBrokerCardOpen\"\n [src]=\"getSvgPath('arrowDown')\"\n ></svg-icon>\n </div>\n </div>\n\n <div\n class=\"d-flex align-items-center broker-card-dropdown-content\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n brokerItemTemplate;\n context: { load: comboChildLoad }\n \"\n ></ng-container>\n </div>\n </div>\n }\n } @else {\n <span class=\"bussiness-name ca-font-bold\"> BROKER </span>\n\n <ng-container\n *ngTemplateOutlet=\"\n brokerItemTemplate;\n context: { load: activeLoad[0] }\n \"\n ></ng-container>\n }\n </div>\n\n @if (activeLoad[0]?.driverMessage) {\n <div class=\"driverMessage\">\n <h3 class=\"ca-font-bold\">DRIVER MESSAGE</h3>\n <span\n class=\"message ca-font-regular text-start\"\n [innerHTML]=\"activeLoad[0].driverMessage\"\n ></span>\n </div>\n }\n} @else {\n <div class=\"no-active-load-message\">\n <h2>No active load</h2>\n </div>\n}\n\n<ng-template #loadDetailsTemplate let-load=\"load\">\n @let isSplitLoad = load.type?.name === 'Split';\n @let isComboLoad = load.type?.name === 'Combo';\n\n <div class=\"details-container d-flex flex-column justify-content-between\">\n <div class=\"top-details d-flex justify-content-between\">\n <div class=\"d-flex align-items-center\">\n <span class=\"price ca-font-bold m-r-4\">\n {{ load.loadNumber }}\n </span>\n\n @if (isSplitLoad) {\n <svg-icon\n class=\"svg-size-14\"\n [src]=\"getSvgPath('splitLoad')\"\n ></svg-icon>\n }\n\n @if (isComboLoad) {\n <svg-icon\n class=\"svg-size-14 position-relative bottom-1\"\n [src]=\"getSvgPath('comboLoad')\"\n ></svg-icon>\n }\n </div>\n\n <span class=\"load ca-font-medium\">{{\n load.totalRate! | formatCurrency\n }}</span>\n </div>\n\n <div class=\"bottom-details d-flex justify-content-between h-14\">\n <div class=\"d-flex align-items-center\">\n @if (isLoadDetailsHovered) {\n <svg-icon\n class=\"svg-size-14 m-r-4\"\n [src]=\"getSvgPath('miles')\"\n ></svg-icon>\n\n <p class=\"text-color-white\">\n {{ load.totalMiles }}\n\n mi\n </p>\n } @else {\n <span class=\"ref-text ca-font-bold m-r-4\">Ref.</span>\n\n <p class=\"miles-ref\">\n {{ load.referenceNumber }}\n </p>\n }\n </div>\n\n <div class=\"d-flex align-items-center\">\n @let isClosedLoad = load.statusType?.name === 'Closed';\n\n @if (!isClosedLoad) {\n @let hasAdjustedRate = !!load.totalAdjustedRate;\n\n @if (isLoadDetailsHovered) {\n <p class=\"ref-text ca-font-bold m-r-4\">RPM</p>\n\n <span class=\"ca-font-semi-bold text-color-white\">\n {{ load.rpm | formatCurrency }}\n </span>\n } @else {\n <p class=\"ref-text ca-font-bold m-r-4\">\n {{ hasAdjustedRate ? 'Adj.' : 'RPM' }}\n </p>\n\n <span\n class=\"ca-font-semi-bold\"\n [class]=\"\n hasAdjustedRate\n ? 'text-color-purple-2'\n : 'text-color-white'\n \"\n >\n {{\n (hasAdjustedRate\n ? load.totalAdjustedRate\n : load.rpm\n ) | formatCurrency\n }}\n </span>\n }\n }\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #stopsTemplate let-load=\"load\">\n @let isSplitLoad = load.type?.name === 'Split';\n\n @let pickupStopNumber = isSplitLoad ? 'S' : load.pickup?.stopOrder;\n\n <div class=\"stops-side d-flex align-items-center flex-basis-50\">\n <span\n class=\"line-left d-flex justify-content-center align-items-center ca-font-bold\"\n [class]=\"isSplitLoad ? 'text-color-yellow-4' : 'text-color-green-4'\"\n [class.split-load]=\"isSplitLoad\"\n >\n {{ pickupStopNumber }}\n </span>\n\n <div class=\"date-location left d-flex flex-column align-items-start\">\n <span\n class=\"location ca-font-semi-bold text-start text-truncate d-block\"\n >\n {{\n load.pickup?.shipper?.address?.city\n | formatCityStatePipe\n : load.pickup?.shipper?.address?.stateShortName\n }}\n </span>\n\n <span class=\"date ca-font-regular\">\n {{ load.pickup?.dateFrom | dateFromStringPipe }},\n {{ load.pickup?.dateFrom | dateFromStringPipe: 'time' }}\n </span>\n </div>\n </div>\n\n <span class=\"arrow d-flex justify-content-center align-items-center\">\n <svg-icon\n class=\"svg-size-10\"\n [src]=\"getSvgPath('arrowRight')\"\n ></svg-icon>\n </span>\n\n <div class=\"stops-side right d-flex align-items-center flex-basis-50\">\n <div class=\"date-location right d-flex flex-column align-items-end\">\n <span\n class=\"location ca-font-semi-bold text-end text-truncate d-block\"\n >\n {{\n load.delivery?.shipper?.address?.city\n | formatCityStatePipe\n : load.delivery?.shipper?.address?.stateShortName\n }}\n </span>\n <span class=\"date ca-font-regular\">\n {{ load.delivery?.dateFrom | dateFromStringPipe }},\n {{ load.delivery?.dateFrom | dateFromStringPipe: 'time' }}\n </span>\n </div>\n <span\n class=\"line-right d-flex justify-content-center align-items-center ca-font-bold\"\n >\n {{ load.delivery?.stopOrder }}\n </span>\n </div>\n</ng-template>\n\n<ng-template #brokerItemTemplate let-load=\"load\">\n <div class=\"broker ca-font-regular\">\n @let isFraudCheck = load?.broker?.fraudCheck;\n\n <div class=\"d-flex align-items-center\">\n @if (isFraudCheck) {\n <div\n ngbTooltip\n [mainCaTooltip]=\"'Fraud check'\"\n [tooltipBackground]=\"eColor.LIGHT_GREY\"\n [tooltipColor]=\"eColor.DARK_GREY\"\n [position]=\"ePosition.BOTTOM\"\n >\n <svg-icon\n class=\"svg-size-14 m-r-4 svg-hover-yellow-4\"\n [src]=\"getSvgPath('fraudCheck')\"\n ></svg-icon>\n </div>\n }\n\n <p class=\"text-truncate\">\n {{ load.broker?.businessName }}\n </p>\n </div>\n\n <div\n class=\"d-flex align-items-center justify-content-between m-t-8\"\n >\n @let hasBrokerContact = !!load.broker?.contactName;\n\n <p\n class=\"text-color-muted text-truncate\"\n [class.text-decoration-line-through]=\"!hasBrokerContact\"\n >\n <svg-icon\n class=\"svg-size-14 position-relative bottom-1\"\n [src]=\"getSvgPath('userIcon')\"\n ></svg-icon>\n\n {{ load.broker?.contactName ?? 'No Contact' }}\n </p>\n\n <div class=\"d-flex align-items-center\">\n <cai-copy\n [value]=\"load.broker?.phone!\"\n [copyArea]=\"'full'\"\n [hasNoIcon]=\"true\"\n [inverse]=\"true\"\n [tooltipPlacement]=\"'top'\"\n >\n <div\n class=\"d-flex align-items-center justify-content-center br-1 c-pointer w-18 h-18 background-hover-dark-3 svg-hover-bw-9 m-r-4\"\n >\n <svg-icon\n class=\"svg-size-14 position-relative bottom-1\"\n [src]=\"getSvgPath('phoneIcon')\"\n ></svg-icon>\n </div>\n </cai-copy>\n\n <cai-copy\n [value]=\"load.broker?.email!\"\n [copyArea]=\"'full'\"\n [hasNoIcon]=\"true\"\n [inverse]=\"true\"\n [tooltipPlacement]=\"'top'\"\n >\n <div\n class=\"d-flex align-items-center justify-content-center br-1 c-pointer w-18 h-18 background-hover-dark-3 svg-hover-bw-9\"\n >\n <svg-icon\n class=\"svg-size-14 position-relative bottom-1\"\n [src]=\"getSvgPath('mailIcon')\"\n ></svg-icon>\n </div>\n </cai-copy>\n </div>\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}}.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}.load-details{font-family:Montserrat,sans-serif;padding:2px}.details-container{flex:1}.details-container .top-details{gap:12px;padding:8px 4px 2px}.details-container .bottom-details{gap:8px;padding:0 4px;margin-top:2px}.price,.load{color:#fff;font-size:14px}.price.price,.load.price{text-align:right}.miles-ref{color:#fff}.ref-text{color:#919191}.button-container{margin-top:2px}.menu-button{background:none;border:none;color:#fff;font-size:14px;cursor:pointer;padding:2px 4px}.menu-button:hover{background-color:#ffffff1a;border-radius:4px}.menu-button i{font-size:18px}.stops{font-family:Montserrat,sans-serif;height:30px;background-color:#2f2f2f;margin-bottom:6px;margin-top:6px;font-size:14px}.stops .stops-side{min-width:0;height:26px;padding-top:2px}.stops .stops-side .line-left{border-right:solid 2px rgba(37,159,148,.4);width:22px;height:18px}.stops .stops-side .line-left.split-load{border-right:solid 2px rgba(248,155,46,.4)}.stops .stops-side .line-right{border-left:solid 2px rgba(255,112,67,.4);width:22px;height:18px}.stops .stops-side.right{justify-content:end;padding-right:4px}.stops .stops-side:first-child{color:#86c9c3}.stops .stops-side:last-child{color:#ed9292}.stops .stops-side .date-location{width:100%;min-width:0}.stops .stops-side .date-location.right{margin-right:4px}.stops .stops-side .date-location.left{margin-left:4px}.stops .stops-side .date-location .location{font-size:11px;line-height:14px;color:#fff;width:90%;min-width:0}.stops .stops-side .date-location .date{font-size:11px;line-height:14px;text-align:left;color:#919191}.dispatch-stops{font-family:Montserrat,sans-serif;border-top:1px #424242 solid;color:#fff;text-align:left;padding-top:6px;margin:0 4px}.dispatch-stops .bussiness-name{line-height:18px}.dispatch-stops .broker-card.border-top{border-top:1px solid #424242!important}.dispatch-stops .broker-card:hover .load-number,.dispatch-stops .broker-card.active .load-number{color:#fff}.dispatch-stops .broker-card:hover .card-arrow svg path,.dispatch-stops .broker-card.active .card-arrow svg path{fill:#dadada}.dispatch-stops .broker-card:hover .card-arrow.arrow-rotated,.dispatch-stops .broker-card.active .ref-number{visibility:visible}.dispatch-stops .broker-card.active .broker-card-dropdown-content{max-height:500px;opacity:1;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .25s ease-in .05s}.dispatch-stops .broker-card .load-number{transition:color .3s ease;color:#919191}.dispatch-stops .broker-card .ref-number{transition:visibility .3s ease;visibility:hidden}.dispatch-stops .broker-card .card-arrow{transition:transform .3s ease,visibility .1 ease-in}.dispatch-stops .broker-card .card-arrow.arrow-rotated{transform:rotate(180deg);visibility:hidden}.dispatch-stops .broker-card .broker-card-dropdown-content{max-height:0;overflow:hidden;opacity:0;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity 0s linear .3s}.broker{width:100%;padding:6px 0 4px;color:#fff}.broker>p{font-size:11px;line-height:14px;text-align:left;color:#fff;margin-bottom:4px}.driverMessage{padding:8px 4px 0;border-top:1px #424242 solid;color:#919191}.driverMessage>h3{color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:left;font-family:Montserrat,sans-serif}.driverMessage .message{display:block;width:100%;padding:6px 0 4px;font-family:Montserrat,sans-serif}.no-active-load-message{font-family:Montserrat,sans-serif;padding-top:4px;padding-bottom:4px}\n"], dependencies: [{ 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: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: 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:
|
|
19751
19744
|
// components
|
|
19752
19745
|
CaDropdownMenuComponent, selector: "ca-dropdown-menu", inputs: ["type", "options", "placement", "popoverClass", "isDarkBackground", "isLeftSideIconPosition", "isColumnsDropdown"], outputs: ["dropdownOptionEmitter"] }, { kind: "component", type: CopyComponent, selector: "cai-copy", inputs: ["value", "alignment", "copyTooltip", "copyArea", "icon", "iconSize", "iconColor", "tooltipClass", "tooltipPlacement", "inverse", "hasNoIcon"] }, { kind: "component", type: CaAppTooltipV2Component, selector: "mainCaTooltip, [mainCaTooltip]", inputs: ["mainCaTooltip", "position", "tooltipBackground", "tooltipColor", "tooltipTextAlign", "tooltipMarginTop", "tooltipMarginRight", "disableTooltip", "openTooltipDelay"] }, { kind: "pipe", type:
|
|
19753
19746
|
// pipes
|
|
@@ -19767,7 +19760,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
19767
19760
|
DateFromStringPipe,
|
|
19768
19761
|
FormatCurrencyPipe,
|
|
19769
19762
|
FormatCityStatePipe,
|
|
19770
|
-
], template: "@if (activeLoad && activeLoad.length) {\n <div\n class=\"load-details d-flex\"\n (mouseenter)=\"onLoadDetailsHover()\"\n (mouseleave)=\"onLoadDetailsHover()\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n loadDetailsTemplate;\n context: { load: activeLoad[0] }\n \"\n ></ng-container>\n\n <div class=\"button-container\">\n <ca-dropdown-menu\n [type]=\"'dots-menu-type'\"\n [placement]=\"'end-top'\"\n [popoverClass]=\"'ca-pickup-delivery-dropdown-popover'\"\n [isDarkBackground]=\"true\"\n [isLeftSideIconPosition]=\"true\"\n [options]=\"dropdownOptions\"\n (dropdownOptionEmitter)=\"\n onToggleDropdownMenuActions($event, activeLoad[0]?.id!)\n \"\n >\n </ca-dropdown-menu>\n </div>\n </div>\n\n <div class=\"stops d-flex justify-content-between w-100\">\n <ng-container\n *ngTemplateOutlet=\"stopsTemplate; context: { load: activeLoad[0] }\"\n ></ng-container>\n </div>\n\n <div class=\"dispatch-stops\">\n @let isComboLoad = activeLoad[0].type?.name === 'Combo';\n\n @if (isComboLoad) {\n @let comboChildLoads = activeLoad[0].childLoads!;\n\n @for (\n comboChildLoad of comboChildLoads;\n let first = $first;\n track comboChildLoad.id\n ) {\n @let isBrokerCardOpen =\n openBrokerCardIds.has(comboChildLoad.id);\n\n @let brokerCardClass =\n {\n 'p-t-2': first,\n 'border-top p-t-6': !first,\n active: isBrokerCardOpen,\n };\n\n @let loadNumber = comboChildLoad.loadNumber!;\n @let brokerName = comboChildLoad.broker?.businessName!;\n\n <div\n class=\"d-flex flex-column p-b-6 p-r-4 p-l-2 c-pointer broker-card\"\n [ngClass]=\"brokerCardClass\"\n (click)=\"onToggleBrokerCard(comboChildLoad.id)\"\n >\n <div\n class=\"d-flex align-items-center justify-content-between\"\n >\n <div class=\"d-flex align-items-center\">\n <p class=\"ca-font-bold text-size-11 load-number\">\n {{ loadNumber }}\n </p>\n\n @if (comboChildLoad.referenceNumber) {\n <span\n class=\"m-l-4 text-size-11 ref-number\"\n >\n ({{ comboChildLoad.referenceNumber }})</span\n >\n }\n </div>\n\n <div class=\"d-flex align-items-center max-w-159\">\n @if (!isBrokerCardOpen) {\n <p\n class=\"text-size-11 text-color-muted text-truncate m-r-4\"\n >\n {{ brokerName }}\n </p>\n }\n\n <svg-icon\n class=\"svg-size-14 card-arrow\"\n [class.arrow-rotated]=\"isBrokerCardOpen\"\n [src]=\"getSvgPath('arrowDown')\"\n ></svg-icon>\n </div>\n </div>\n\n <div\n class=\"d-flex align-items-center broker-card-dropdown-content\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n brokerItemTemplate;\n context: { load: comboChildLoad }\n \"\n ></ng-container>\n </div>\n </div>\n }\n } @else {\n <span class=\"bussiness-name ca-font-bold\"> BROKER </span>\n\n <ng-container\n *ngTemplateOutlet=\"\n brokerItemTemplate;\n context: { load: activeLoad[0] }\n \"\n ></ng-container>\n }\n </div>\n\n @if (activeLoad[0]?.driverMessage) {\n <div class=\"driverMessage\">\n <h3 class=\"ca-font-bold\">DRIVER MESSAGE</h3>\n <span\n class=\"message ca-font-regular text-start\"\n [innerHTML]=\"activeLoad[0].driverMessage\"\n ></span>\n </div>\n }\n} @else {\n <div class=\"no-active-load-message\">\n <h2>No active load</h2>\n </div>\n}\n\n<ng-template #loadDetailsTemplate let-load=\"load\">\n @let isSplitLoad = load.type?.name === 'Split';\n @let isComboLoad = load.type?.name === 'Combo';\n\n <div class=\"details-container d-flex flex-column justify-content-between\">\n <div class=\"top-details d-flex justify-content-between\">\n <div class=\"d-flex align-items-center\">\n <span class=\"price ca-font-bold m-r-4\">\n {{ load.loadNumber }}\n </span>\n\n @if (isSplitLoad) {\n <svg-icon\n class=\"svg-size-14\"\n [src]=\"getSvgPath('splitLoad')\"\n ></svg-icon>\n }\n\n @if (isComboLoad) {\n <svg-icon\n class=\"svg-size-14 position-relative bottom-1\"\n [src]=\"getSvgPath('comboLoad')\"\n ></svg-icon>\n }\n </div>\n\n <span class=\"load ca-font-medium\">{{\n load.totalRate! | formatCurrency\n }}</span>\n </div>\n\n <div class=\"bottom-details d-flex justify-content-between h-14\">\n <div class=\"d-flex align-items-center\">\n @if (isLoadDetailsHovered) {\n <svg-icon\n class=\"svg-size-14 m-r-4\"\n [src]=\"getSvgPath('miles')\"\n ></svg-icon>\n\n <p class=\"text-color-white\">\n {{ load.totalMiles }}\n\n mi\n </p>\n } @else {\n <span class=\"ref-text ca-font-bold m-r-4\">Ref.</span>\n\n <p class=\"miles-ref\">\n {{ load.referenceNumber }}\n </p>\n }\n </div>\n\n <div class=\"d-flex align-items-center\">\n @let isClosedLoad = load.statusType?.name === 'Closed';\n\n @if (!isClosedLoad) {\n @let hasAdjustedRate = !!load.totalAdjustedRate;\n\n @if (isLoadDetailsHovered) {\n <p class=\"ref-text ca-font-bold m-r-4\">RPM</p>\n\n <span class=\"ca-font-semi-bold text-color-white\">\n {{ load.rpm | formatCurrency }}\n </span>\n } @else {\n <p class=\"ref-text ca-font-bold m-r-4\">\n {{ hasAdjustedRate ? 'Adj.' : 'RPM' }}\n </p>\n\n <span\n class=\"ca-font-semi-bold\"\n [class]=\"\n hasAdjustedRate\n ? 'text-color-purple-2'\n : 'text-color-white'\n \"\n >\n {{\n (hasAdjustedRate\n ? load.totalAdjustedRate\n : load.rpm\n ) | formatCurrency\n }}\n </span>\n }\n }\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #stopsTemplate let-load=\"load\">\n @let isSplitLoad = load.type?.name === 'Split';\n\n @let pickupStopNumber = isSplitLoad ? 'S' : load.pickup?.stopOrder;\n\n <div class=\"stops-side d-flex align-items-center flex-basis-50\">\n <span\n class=\"line-left d-flex justify-content-center align-items-center ca-font-bold\"\n [class]=\"isSplitLoad ? 'text-color-yellow-4' : 'text-color-green-4'\"\n [class.split-load]=\"isSplitLoad\"\n >\n {{ pickupStopNumber }}\n </span>\n\n <div class=\"date-location left d-flex flex-column align-items-start\">\n <span\n class=\"location ca-font-semi-bold text-start text-truncate d-block\"\n >\n {{\n load.pickup?.shipper?.address?.city\n | formatCityStatePipe\n : load.pickup?.shipper?.address?.stateShortName\n }}\n </span>\n\n <span class=\"date ca-font-regular\">\n {{ load.pickup?.dateFrom | dateFromStringPipe }},\n {{ load.pickup?.dateFrom | dateFromStringPipe: 'time' }}\n </span>\n </div>\n </div>\n\n <span class=\"arrow d-flex justify-content-center align-items-center\">\n <svg-icon\n class=\"svg-size-10\"\n [src]=\"getSvgPath('arrowRight')\"\n ></svg-icon>\n </span>\n\n <div class=\"stops-side right d-flex align-items-center flex-basis-50\">\n <div class=\"date-location right d-flex flex-column align-items-end\">\n <span\n class=\"location ca-font-semi-bold text-end text-truncate d-block\"\n >\n {{\n load.delivery?.shipper?.address?.city\n | formatCityStatePipe\n : load.delivery?.shipper?.address?.stateShortName\n }}\n </span>\n <span class=\"date ca-font-regular\">\n {{ load.delivery?.dateFrom | dateFromStringPipe }},\n {{ load.delivery?.dateFrom | dateFromStringPipe: 'time' }}\n </span>\n </div>\n <span\n class=\"line-right d-flex justify-content-center align-items-center ca-font-bold\"\n >\n {{ load.delivery?.stopOrder }}\n </span>\n </div>\n</ng-template>\n\n<ng-template #brokerItemTemplate let-load=\"load\">\n <div class=\"broker ca-font-regular\">\n @let isFraudCheck = load?.broker?.fraudCheck;\n\n <div class=\"d-flex align-items-center\">\n @if (isFraudCheck) {\n <div\n ngbTooltip\n [mainCaTooltip]=\"'Fraud check'\"\n [tooltipBackground]=\"eColor.LIGHT_GREY\"\n [tooltipColor]=\"eColor.DARK_GREY\"\n [position]=\"ePosition.BOTTOM\"\n >\n <svg-icon\n class=\"svg-size-14 m-r-4 svg-hover-yellow-4\"\n [src]=\"getSvgPath('fraudCheck')\"\n ></svg-icon>\n </div>\n }\n\n <p class=\"text-truncate\">\n {{ load.broker?.businessName }}\n </p>\n </div>\n\n <div\n class=\"d-flex align-items-center justify-content-between m-t-8\"\n >\n @let hasBrokerContact = !!load.broker?.contactName;\n\n <p\n class=\"text-color-muted text-truncate\"\n [class.text-decoration-line-through]=\"!hasBrokerContact\"\n >\n <svg-icon\n class=\"svg-size-14 position-relative bottom-1\"\n [src]=\"getSvgPath('userIcon')\"\n ></svg-icon>\n\n {{ load.broker?.contactName ?? 'No Contact' }}\n </p>\n\n <div class=\"d-flex align-items-center\">\n <cai-copy\n [value]=\"load.broker?.phone!\"\n [copyArea]=\"'full'\"\n [hasNoIcon]=\"true\"\n [inverse]=\"true\"\n [tooltipPlacement]=\"'top'\"\n >\n <div\n class=\"d-flex align-items-center justify-content-center br-1 c-pointer w-18 h-18 background-hover-dark-3 svg-hover-bw-9 m-r-4\"\n >\n <svg-icon\n class=\"svg-size-14 position-relative bottom-1\"\n [src]=\"getSvgPath('phoneIcon')\"\n ></svg-icon>\n </div>\n </cai-copy>\n\n <cai-copy\n [value]=\"load.broker?.email!\"\n [copyArea]=\"'full'\"\n [hasNoIcon]=\"true\"\n [inverse]=\"true\"\n [tooltipPlacement]=\"'top'\"\n >\n <div\n class=\"d-flex align-items-center justify-content-center br-1 c-pointer w-18 h-18 background-hover-dark-3 svg-hover-bw-9\"\n >\n <svg-icon\n class=\"svg-size-14 position-relative bottom-1\"\n [src]=\"getSvgPath('mailIcon')\"\n ></svg-icon>\n </div>\n </cai-copy>\n </div>\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}}.load-details{font-family:Montserrat,sans-serif;padding:2px}.details-container{flex:1}.details-container .top-details{gap:12px;padding:8px 4px 2px}.details-container .bottom-details{gap:8px;padding:0 4px;margin-top:2px}.price,.load{color:#fff;font-size:14px}.price.price,.load.price{text-align:right}.miles-ref{color:#fff}.ref-text{color:#919191}.button-container{margin-top:2px}.menu-button{background:none;border:none;color:#fff;font-size:14px;cursor:pointer;padding:2px 4px}.menu-button:hover{background-color:#ffffff1a;border-radius:4px}.menu-button i{font-size:18px}.stops{font-family:Montserrat,sans-serif;height:30px;background-color:#2f2f2f;margin-bottom:6px;margin-top:6px;font-size:14px}.stops .stops-side{min-width:0;height:26px;padding-top:2px}.stops .stops-side .line-left{border-right:solid 2px rgba(37,159,148,.4);width:22px;height:18px}.stops .stops-side .line-left.split-load{border-right:solid 2px rgba(248,155,46,.4)}.stops .stops-side .line-right{border-left:solid 2px rgba(255,112,67,.4);width:22px;height:18px}.stops .stops-side.right{justify-content:end;padding-right:4px}.stops .stops-side:first-child{color:#86c9c3}.stops .stops-side:last-child{color:#ed9292}.stops .stops-side .date-location{width:100%;min-width:0}.stops .stops-side .date-location.right{margin-right:4px}.stops .stops-side .date-location.left{margin-left:4px}.stops .stops-side .date-location .location{font-size:11px;line-height:14px;color:#fff;width:90%;min-width:0}.stops .stops-side .date-location .date{font-size:11px;line-height:14px;text-align:left;color:#919191}.dispatch-stops{font-family:Montserrat,sans-serif;border-top:1px #424242 solid;color:#fff;text-align:left;padding-top:6px;margin:0 4px}.dispatch-stops .bussiness-name{line-height:18px}.dispatch-stops .broker-card.border-top{border-top:1px solid #424242!important}.dispatch-stops .broker-card:hover .load-number,.dispatch-stops .broker-card.active .load-number{color:#fff}.dispatch-stops .broker-card:hover .card-arrow svg path,.dispatch-stops .broker-card.active .card-arrow svg path{fill:#dadada}.dispatch-stops .broker-card:hover .card-arrow.arrow-rotated,.dispatch-stops .broker-card.active .ref-number{visibility:visible}.dispatch-stops .broker-card.active .broker-card-dropdown-content{max-height:500px;opacity:1;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .25s ease-in .05s}.dispatch-stops .broker-card .load-number{transition:color .3s ease;color:#919191}.dispatch-stops .broker-card .ref-number{transition:visibility .3s ease;visibility:hidden}.dispatch-stops .broker-card .card-arrow{transition:transform .3s ease,visibility .1 ease-in}.dispatch-stops .broker-card .card-arrow.arrow-rotated{transform:rotate(180deg);visibility:hidden}.dispatch-stops .broker-card .broker-card-dropdown-content{max-height:0;overflow:hidden;opacity:0;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity 0s linear .3s}.broker{width:100%;padding:6px 0 4px;color:#fff}.broker>p{font-size:11px;line-height:14px;text-align:left;color:#fff;margin-bottom:4px}.driverMessage{padding:8px 4px 0;border-top:1px #424242 solid;color:#919191}.driverMessage>h3{color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:left;font-family:Montserrat,sans-serif}.driverMessage .message{display:block;width:100%;padding:6px 0 4px;font-family:Montserrat,sans-serif}.no-active-load-message{font-family:Montserrat,sans-serif;padding-top:4px;padding-bottom:4px}\n"] }]
|
|
19763
|
+
], template: "@if (activeLoad && activeLoad.length) {\n <div\n class=\"load-details d-flex\"\n (mouseenter)=\"onLoadDetailsHover()\"\n (mouseleave)=\"onLoadDetailsHover()\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n loadDetailsTemplate;\n context: { load: activeLoad[0] }\n \"\n ></ng-container>\n\n <div class=\"button-container\">\n <ca-dropdown-menu\n [type]=\"'dots-menu-type'\"\n [placement]=\"'end-top'\"\n [popoverClass]=\"'ca-pickup-delivery-dropdown-popover'\"\n [isDarkBackground]=\"true\"\n [isLeftSideIconPosition]=\"true\"\n [options]=\"dropdownOptions\"\n (dropdownOptionEmitter)=\"\n onToggleDropdownMenuActions($event, activeLoad[0]?.id!)\n \"\n >\n </ca-dropdown-menu>\n </div>\n </div>\n\n <div class=\"stops d-flex justify-content-between w-100\">\n <ng-container\n *ngTemplateOutlet=\"stopsTemplate; context: { load: activeLoad[0] }\"\n ></ng-container>\n </div>\n\n <div class=\"dispatch-stops\">\n @let isComboLoad = activeLoad[0].type?.name === 'Combo';\n\n @if (isComboLoad) {\n @let comboChildLoads = activeLoad[0].childLoads!;\n\n @for (\n comboChildLoad of comboChildLoads;\n let first = $first;\n track comboChildLoad.id\n ) {\n @let isBrokerCardOpen =\n openBrokerCardIds.has(comboChildLoad.id);\n\n @let brokerCardClass =\n {\n 'p-t-2': first,\n 'border-top p-t-6': !first,\n active: isBrokerCardOpen,\n };\n\n @let loadNumber = comboChildLoad.loadNumber!;\n @let brokerName = comboChildLoad.broker?.businessName!;\n\n <div\n class=\"d-flex flex-column p-b-6 p-r-4 p-l-2 c-pointer broker-card\"\n [ngClass]=\"brokerCardClass\"\n (click)=\"onToggleBrokerCard(comboChildLoad.id)\"\n >\n <div\n class=\"d-flex align-items-center justify-content-between\"\n >\n <div class=\"d-flex align-items-center\">\n <p class=\"ca-font-bold text-size-11 load-number\">\n {{ loadNumber }}\n </p>\n\n @if (comboChildLoad.referenceNumber) {\n <span\n class=\"m-l-4 text-size-11 ref-number\"\n >\n ({{ comboChildLoad.referenceNumber }})</span\n >\n }\n </div>\n\n <div class=\"d-flex align-items-center max-w-159\">\n @if (!isBrokerCardOpen) {\n <p\n class=\"text-size-11 text-color-muted text-truncate m-r-4\"\n >\n {{ brokerName }}\n </p>\n }\n\n <svg-icon\n class=\"svg-size-14 card-arrow\"\n [class.arrow-rotated]=\"isBrokerCardOpen\"\n [src]=\"getSvgPath('arrowDown')\"\n ></svg-icon>\n </div>\n </div>\n\n <div\n class=\"d-flex align-items-center broker-card-dropdown-content\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n brokerItemTemplate;\n context: { load: comboChildLoad }\n \"\n ></ng-container>\n </div>\n </div>\n }\n } @else {\n <span class=\"bussiness-name ca-font-bold\"> BROKER </span>\n\n <ng-container\n *ngTemplateOutlet=\"\n brokerItemTemplate;\n context: { load: activeLoad[0] }\n \"\n ></ng-container>\n }\n </div>\n\n @if (activeLoad[0]?.driverMessage) {\n <div class=\"driverMessage\">\n <h3 class=\"ca-font-bold\">DRIVER MESSAGE</h3>\n <span\n class=\"message ca-font-regular text-start\"\n [innerHTML]=\"activeLoad[0].driverMessage\"\n ></span>\n </div>\n }\n} @else {\n <div class=\"no-active-load-message\">\n <h2>No active load</h2>\n </div>\n}\n\n<ng-template #loadDetailsTemplate let-load=\"load\">\n @let isSplitLoad = load.type?.name === 'Split';\n @let isComboLoad = load.type?.name === 'Combo';\n\n <div class=\"details-container d-flex flex-column justify-content-between\">\n <div class=\"top-details d-flex justify-content-between\">\n <div class=\"d-flex align-items-center\">\n <span class=\"price ca-font-bold m-r-4\">\n {{ load.loadNumber }}\n </span>\n\n @if (isSplitLoad) {\n <svg-icon\n class=\"svg-size-14\"\n [src]=\"getSvgPath('splitLoad')\"\n ></svg-icon>\n }\n\n @if (isComboLoad) {\n <svg-icon\n class=\"svg-size-14 position-relative bottom-1\"\n [src]=\"getSvgPath('comboLoad')\"\n ></svg-icon>\n }\n </div>\n\n <span class=\"load ca-font-medium\">{{\n load.totalRate! | formatCurrency\n }}</span>\n </div>\n\n <div class=\"bottom-details d-flex justify-content-between h-14\">\n <div class=\"d-flex align-items-center\">\n @if (isLoadDetailsHovered) {\n <svg-icon\n class=\"svg-size-14 m-r-4\"\n [src]=\"getSvgPath('miles')\"\n ></svg-icon>\n\n <p class=\"text-color-white\">\n {{ load.totalMiles }}\n\n mi\n </p>\n } @else {\n <span class=\"ref-text ca-font-bold m-r-4\">Ref.</span>\n\n <p class=\"miles-ref\">\n {{ load.referenceNumber }}\n </p>\n }\n </div>\n\n <div class=\"d-flex align-items-center\">\n @let isClosedLoad = load.statusType?.name === 'Closed';\n\n @if (!isClosedLoad) {\n @let hasAdjustedRate = !!load.totalAdjustedRate;\n\n @if (isLoadDetailsHovered) {\n <p class=\"ref-text ca-font-bold m-r-4\">RPM</p>\n\n <span class=\"ca-font-semi-bold text-color-white\">\n {{ load.rpm | formatCurrency }}\n </span>\n } @else {\n <p class=\"ref-text ca-font-bold m-r-4\">\n {{ hasAdjustedRate ? 'Adj.' : 'RPM' }}\n </p>\n\n <span\n class=\"ca-font-semi-bold\"\n [class]=\"\n hasAdjustedRate\n ? 'text-color-purple-2'\n : 'text-color-white'\n \"\n >\n {{\n (hasAdjustedRate\n ? load.totalAdjustedRate\n : load.rpm\n ) | formatCurrency\n }}\n </span>\n }\n }\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #stopsTemplate let-load=\"load\">\n @let isSplitLoad = load.type?.name === 'Split';\n\n @let pickupStopNumber = isSplitLoad ? 'S' : load.pickup?.stopOrder;\n\n <div class=\"stops-side d-flex align-items-center flex-basis-50\">\n <span\n class=\"line-left d-flex justify-content-center align-items-center ca-font-bold\"\n [class]=\"isSplitLoad ? 'text-color-yellow-4' : 'text-color-green-4'\"\n [class.split-load]=\"isSplitLoad\"\n >\n {{ pickupStopNumber }}\n </span>\n\n <div class=\"date-location left d-flex flex-column align-items-start\">\n <span\n class=\"location ca-font-semi-bold text-start text-truncate d-block\"\n >\n {{\n load.pickup?.shipper?.address?.city\n | formatCityStatePipe\n : load.pickup?.shipper?.address?.stateShortName\n }}\n </span>\n\n <span class=\"date ca-font-regular\">\n {{ load.pickup?.dateFrom | dateFromStringPipe }},\n {{ load.pickup?.dateFrom | dateFromStringPipe: 'time' }}\n </span>\n </div>\n </div>\n\n <span class=\"arrow d-flex justify-content-center align-items-center\">\n <svg-icon\n class=\"svg-size-10\"\n [src]=\"getSvgPath('arrowRight')\"\n ></svg-icon>\n </span>\n\n <div class=\"stops-side right d-flex align-items-center flex-basis-50\">\n <div class=\"date-location right d-flex flex-column align-items-end\">\n <span\n class=\"location ca-font-semi-bold text-end text-truncate d-block\"\n >\n {{\n load.delivery?.shipper?.address?.city\n | formatCityStatePipe\n : load.delivery?.shipper?.address?.stateShortName\n }}\n </span>\n <span class=\"date ca-font-regular\">\n {{ load.delivery?.dateFrom | dateFromStringPipe }},\n {{ load.delivery?.dateFrom | dateFromStringPipe: 'time' }}\n </span>\n </div>\n <span\n class=\"line-right d-flex justify-content-center align-items-center ca-font-bold\"\n >\n {{ load.delivery?.stopOrder }}\n </span>\n </div>\n</ng-template>\n\n<ng-template #brokerItemTemplate let-load=\"load\">\n <div class=\"broker ca-font-regular\">\n @let isFraudCheck = load?.broker?.fraudCheck;\n\n <div class=\"d-flex align-items-center\">\n @if (isFraudCheck) {\n <div\n ngbTooltip\n [mainCaTooltip]=\"'Fraud check'\"\n [tooltipBackground]=\"eColor.LIGHT_GREY\"\n [tooltipColor]=\"eColor.DARK_GREY\"\n [position]=\"ePosition.BOTTOM\"\n >\n <svg-icon\n class=\"svg-size-14 m-r-4 svg-hover-yellow-4\"\n [src]=\"getSvgPath('fraudCheck')\"\n ></svg-icon>\n </div>\n }\n\n <p class=\"text-truncate\">\n {{ load.broker?.businessName }}\n </p>\n </div>\n\n <div\n class=\"d-flex align-items-center justify-content-between m-t-8\"\n >\n @let hasBrokerContact = !!load.broker?.contactName;\n\n <p\n class=\"text-color-muted text-truncate\"\n [class.text-decoration-line-through]=\"!hasBrokerContact\"\n >\n <svg-icon\n class=\"svg-size-14 position-relative bottom-1\"\n [src]=\"getSvgPath('userIcon')\"\n ></svg-icon>\n\n {{ load.broker?.contactName ?? 'No Contact' }}\n </p>\n\n <div class=\"d-flex align-items-center\">\n <cai-copy\n [value]=\"load.broker?.phone!\"\n [copyArea]=\"'full'\"\n [hasNoIcon]=\"true\"\n [inverse]=\"true\"\n [tooltipPlacement]=\"'top'\"\n >\n <div\n class=\"d-flex align-items-center justify-content-center br-1 c-pointer w-18 h-18 background-hover-dark-3 svg-hover-bw-9 m-r-4\"\n >\n <svg-icon\n class=\"svg-size-14 position-relative bottom-1\"\n [src]=\"getSvgPath('phoneIcon')\"\n ></svg-icon>\n </div>\n </cai-copy>\n\n <cai-copy\n [value]=\"load.broker?.email!\"\n [copyArea]=\"'full'\"\n [hasNoIcon]=\"true\"\n [inverse]=\"true\"\n [tooltipPlacement]=\"'top'\"\n >\n <div\n class=\"d-flex align-items-center justify-content-center br-1 c-pointer w-18 h-18 background-hover-dark-3 svg-hover-bw-9\"\n >\n <svg-icon\n class=\"svg-size-14 position-relative bottom-1\"\n [src]=\"getSvgPath('mailIcon')\"\n ></svg-icon>\n </div>\n </cai-copy>\n </div>\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}}.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}.load-details{font-family:Montserrat,sans-serif;padding:2px}.details-container{flex:1}.details-container .top-details{gap:12px;padding:8px 4px 2px}.details-container .bottom-details{gap:8px;padding:0 4px;margin-top:2px}.price,.load{color:#fff;font-size:14px}.price.price,.load.price{text-align:right}.miles-ref{color:#fff}.ref-text{color:#919191}.button-container{margin-top:2px}.menu-button{background:none;border:none;color:#fff;font-size:14px;cursor:pointer;padding:2px 4px}.menu-button:hover{background-color:#ffffff1a;border-radius:4px}.menu-button i{font-size:18px}.stops{font-family:Montserrat,sans-serif;height:30px;background-color:#2f2f2f;margin-bottom:6px;margin-top:6px;font-size:14px}.stops .stops-side{min-width:0;height:26px;padding-top:2px}.stops .stops-side .line-left{border-right:solid 2px rgba(37,159,148,.4);width:22px;height:18px}.stops .stops-side .line-left.split-load{border-right:solid 2px rgba(248,155,46,.4)}.stops .stops-side .line-right{border-left:solid 2px rgba(255,112,67,.4);width:22px;height:18px}.stops .stops-side.right{justify-content:end;padding-right:4px}.stops .stops-side:first-child{color:#86c9c3}.stops .stops-side:last-child{color:#ed9292}.stops .stops-side .date-location{width:100%;min-width:0}.stops .stops-side .date-location.right{margin-right:4px}.stops .stops-side .date-location.left{margin-left:4px}.stops .stops-side .date-location .location{font-size:11px;line-height:14px;color:#fff;width:90%;min-width:0}.stops .stops-side .date-location .date{font-size:11px;line-height:14px;text-align:left;color:#919191}.dispatch-stops{font-family:Montserrat,sans-serif;border-top:1px #424242 solid;color:#fff;text-align:left;padding-top:6px;margin:0 4px}.dispatch-stops .bussiness-name{line-height:18px}.dispatch-stops .broker-card.border-top{border-top:1px solid #424242!important}.dispatch-stops .broker-card:hover .load-number,.dispatch-stops .broker-card.active .load-number{color:#fff}.dispatch-stops .broker-card:hover .card-arrow svg path,.dispatch-stops .broker-card.active .card-arrow svg path{fill:#dadada}.dispatch-stops .broker-card:hover .card-arrow.arrow-rotated,.dispatch-stops .broker-card.active .ref-number{visibility:visible}.dispatch-stops .broker-card.active .broker-card-dropdown-content{max-height:500px;opacity:1;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .25s ease-in .05s}.dispatch-stops .broker-card .load-number{transition:color .3s ease;color:#919191}.dispatch-stops .broker-card .ref-number{transition:visibility .3s ease;visibility:hidden}.dispatch-stops .broker-card .card-arrow{transition:transform .3s ease,visibility .1 ease-in}.dispatch-stops .broker-card .card-arrow.arrow-rotated{transform:rotate(180deg);visibility:hidden}.dispatch-stops .broker-card .broker-card-dropdown-content{max-height:0;overflow:hidden;opacity:0;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity 0s linear .3s}.broker{width:100%;padding:6px 0 4px;color:#fff}.broker>p{font-size:11px;line-height:14px;text-align:left;color:#fff;margin-bottom:4px}.driverMessage{padding:8px 4px 0;border-top:1px #424242 solid;color:#919191}.driverMessage>h3{color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:left;font-family:Montserrat,sans-serif}.driverMessage .message{display:block;width:100%;padding:6px 0 4px;font-family:Montserrat,sans-serif}.no-active-load-message{font-family:Montserrat,sans-serif;padding-top:4px;padding-bottom:4px}\n"] }]
|
|
19771
19764
|
}], ctorParameters: () => [{ type: FormatCurrencyPipe }], propDecorators: { activeLoad: [{
|
|
19772
19765
|
type: Input
|
|
19773
19766
|
}], status: [{
|
|
@@ -19818,7 +19811,7 @@ class LoadListComponent {
|
|
|
19818
19811
|
}
|
|
19819
19812
|
}
|
|
19820
19813
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LoadListComponent, deps: [{ token: FormatCurrencyPipe }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
19821
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: LoadListComponent, isStandalone: true, selector: "app-ca-load-list", inputs: { loads: "loads", focusedTab: "focusedTab", isFocusingLoad: "isFocusingLoad" }, outputs: { focusLoadEmitter: "focusLoadEmitter", dropdownMenuAction: "dropdownMenuAction" }, providers: [FormatCurrencyPipe, ToLowerCasePipe], ngImport: i0, template: "@if (!isFocusingLoad && loads.length) {\n <ng-template #loadList>\n <div class=\"wrapper-container inside d-flex flex-column gap-1\">\n @for (load of loads; let indx = $index; track indx) {\n @let isLoadDropdownSelected =\n selectedLoadDropdownId === load.id;\n\n <div\n class=\"wrapper d-flex flex-column\"\n [class.active]=\"isLoadDropdownSelected\"\n (click)=\"focusLoad(load)\"\n >\n <div class=\"d-flex dispatch-stops\">\n <div\n class=\"load-num ca-font-bold d-flex justify-content-between align-items-center\"\n >\n @let isComboLoad = load.type?.name === 'Combo';\n\n <div class=\"d-flex align-items-center\">\n <span class=\"loadNumber-companyName\">\n <span class=\"loadNumber ca-font-bold\">{{\n load.loadNumber\n }}</span>\n </span>\n\n @if (isComboLoad) {\n <svg-icon\n class=\"svg-size-14\"\n [src]=\"getSvgPath('comboLoad')\"\n ></svg-icon>\n }\n </div>\n\n <div class=\"d-flex align-items-center\">\n <span class=\"price ca-font-regular\">{{\n load.totalRate! | formatCurrency\n }}</span>\n\n <div\n class=\"button-container\"\n (click)=\"$event.stopPropagation()\"\n >\n <ca-dropdown-menu\n [type]=\"'dots-menu-type'\"\n [placement]=\"'end-top'\"\n [popoverClass]=\"\n 'ca-pickup-delivery-list-dropdown-popover'\n \"\n [isDarkBackground]=\"true\"\n [isLeftSideIconPosition]=\"true\"\n [options]=\"dropdownOptions\"\n (dropdownOptionEmitter)=\"\n onToggleDropdownMenuActions(\n $event,\n load.id\n )\n \"\n >\n </ca-dropdown-menu>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"stops d-flex justify-content-between w-100\">\n <ng-container\n *ngTemplateOutlet=\"\n stopsSideTemplate;\n context: {\n load: load,\n type: 'pickup',\n side: 'left',\n }\n \"\n ></ng-container>\n\n <span\n class=\"d-flex justify-content-center align-items-center\"\n >\n <svg-icon\n class=\"d-flex svg-size-10\"\n [src]=\"getSvgPath('arrowRight')\"\n ></svg-icon>\n </span>\n\n <ng-container\n *ngTemplateOutlet=\"\n stopsSideTemplate;\n context: {\n load: load,\n type: 'delivery',\n side: 'right',\n }\n \"\n ></ng-container>\n </div>\n </div>\n }\n </div>\n </ng-template>\n\n <ng-container *ngTemplateOutlet=\"loadList\"></ng-container>\n} @else {\n <div class=\"focused-load-template\">\n @if (isFocusingLoad) {\n <app-ca-load-single\n [status]=\"focusedTab\"\n [activeLoad]=\"focusedLoad\"\n (dropdownMenuAction)=\"\n onDropdownMenuAction($event, focusedLoad[0].id)\n \"\n ></app-ca-load-single>\n } @else {\n <div class=\"no-active-load-message\">\n <h2>No {{ focusedTab | toLowerCase }} load</h2>\n </div>\n }\n </div>\n}\n\n<ng-template #stopsSideTemplate let-load=\"load\" let-type=\"type\" let-side=\"side\">\n <div class=\"stops-side {{ side }} d-flex align-items-center flex-basis-50\">\n <div class=\"d-flex align-items-center justify-content-center w-22 h-18\">\n @if (side === 'left') {\n <span\n class=\"line-left line-right d-flex align-items-center justify-content-center ca-font-bold\"\n >\n {{\n type === 'pickup'\n ? load.pickup?.stopOrder\n : load.delivery?.stopOrder\n }}\n </span>\n }\n </div>\n\n <div\n class=\"date-location {{ side }} d-flex flex-column align-items-{{\n side === 'left' ? 'start' : 'end'\n }}\"\n >\n <span\n class=\"location text-start ca-font-medium text-truncate d-block\"\n [class.text-end]=\"type === 'delivery'\"\n >\n {{\n type === 'pickup'\n ? (load.pickup?.shipper?.address?.city\n | formatCityStatePipe\n : load.pickup?.shipper?.address?.stateShortName)\n : (load.delivery?.shipper?.address?.city\n | formatCityStatePipe\n : load.delivery?.shipper?.address?.stateShortName)\n }}\n </span>\n <span class=\"date ca-font-regular\">\n {{\n type === 'pickup'\n ? (load.pickup?.dateFrom | dateFromStringPipe)\n : (load.delivery?.dateFrom | dateFromStringPipe)\n }},\n {{\n type === 'pickup'\n ? (load.pickup?.dateFrom | dateFromStringPipe: 'time')\n : (load.delivery?.dateFrom | dateFromStringPipe: 'time')\n }}\n </span>\n </div>\n\n <div class=\"d-flex align-items-center justify-content-center w-22 h-18\">\n @if (side === 'right') {\n <span\n class=\"line-left line-right d-flex align-items-center justify-content-center ca-font-bold\"\n >\n {{\n type === 'pickup'\n ? load.pickup?.stopOrder\n : load.delivery?.stopOrder\n }}\n </span>\n }\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}}.wrapper-container{max-height:308px;overflow-y:auto;font-family:Montserrat,sans-serif}.wrapper-container.inside{margin-top:4px}.wrapper-container::-webkit-scrollbar{width:2px}.wrapper-container::-webkit-scrollbar-thumb{background:#919191;border-radius:1px}.wrapper-container::-webkit-scrollbar-track{background:#2f2f2f}.wrapper{border-radius:3px;transition:background-color .3s ease;padding:2px 0;margin-right:2px;gap:2px}.wrapper:hover,.wrapper.active{background-color:#424242;cursor:pointer}.stops{padding:0 2px;gap:4px;font-size:14px}.stops .stops-side{min-width:0;height:26px}.stops .stops-side.right{justify-content:end}.stops .stops-side .date-location{width:100%;min-width:0}.stops .stops-side .date-location.left{margin-left:4px}.stops .stops-side .date-location.right{margin-right:4px}.stops .stops-side .date-location .location{font-size:11px;line-height:14px;color:#fff;width:90%;min-width:0}.stops .stops-side .date-location .date{font-size:11px;line-height:14px;color:#919191}.stops .stops-side:first-child{color:#86c9c3}.stops .stops-side:first-child .line-left{border-right:solid 2px rgba(37,159,148,.4);width:22px;height:18px}.stops .stops-side:last-child{color:#ed9292}.stops .stops-side:last-child .line-right{border-left:solid 2px rgba(255,112,67,.4);width:22px;height:18px}.load-num{font-size:11px;line-height:14px;text-align:left;padding:0 2px 0 6px;width:100%}.load-num .loadNumber{gap:4px;padding-right:4px}.load-num .price{margin-right:4px}.dispatch-stops{color:#fff;text-align:left}.focused-load-template{max-height:340px;overflow-y:hidden;overflow-x:hidden}.focused-load-template .no-active-load-message{padding-top:4px;padding-bottom:4px}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
19814
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: LoadListComponent, isStandalone: true, selector: "app-ca-load-list", inputs: { loads: "loads", focusedTab: "focusedTab", isFocusingLoad: "isFocusingLoad" }, outputs: { focusLoadEmitter: "focusLoadEmitter", dropdownMenuAction: "dropdownMenuAction" }, providers: [FormatCurrencyPipe, ToLowerCasePipe], ngImport: i0, template: "@if (!isFocusingLoad && loads.length) {\n <ng-template #loadList>\n <div class=\"wrapper-container inside d-flex flex-column gap-1\">\n @for (load of loads; let indx = $index; track indx) {\n @let isLoadDropdownSelected =\n selectedLoadDropdownId === load.id;\n\n <div\n class=\"wrapper d-flex flex-column\"\n [class.active]=\"isLoadDropdownSelected\"\n (click)=\"focusLoad(load)\"\n >\n <div class=\"d-flex dispatch-stops\">\n <div\n class=\"load-num ca-font-bold d-flex justify-content-between align-items-center\"\n >\n @let isComboLoad = load.type?.name === 'Combo';\n\n <div class=\"d-flex align-items-center\">\n <span class=\"loadNumber-companyName\">\n <span class=\"loadNumber ca-font-bold\">{{\n load.loadNumber\n }}</span>\n </span>\n\n @if (isComboLoad) {\n <svg-icon\n class=\"svg-size-14\"\n [src]=\"getSvgPath('comboLoad')\"\n ></svg-icon>\n }\n </div>\n\n <div class=\"d-flex align-items-center\">\n <span class=\"price ca-font-regular\">{{\n load.totalRate! | formatCurrency\n }}</span>\n\n <div\n class=\"button-container\"\n (click)=\"$event.stopPropagation()\"\n >\n <ca-dropdown-menu\n [type]=\"'dots-menu-type'\"\n [placement]=\"'end-top'\"\n [popoverClass]=\"\n 'ca-pickup-delivery-list-dropdown-popover'\n \"\n [isDarkBackground]=\"true\"\n [isLeftSideIconPosition]=\"true\"\n [options]=\"dropdownOptions\"\n (dropdownOptionEmitter)=\"\n onToggleDropdownMenuActions(\n $event,\n load.id\n )\n \"\n >\n </ca-dropdown-menu>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"stops d-flex justify-content-between w-100\">\n <ng-container\n *ngTemplateOutlet=\"\n stopsSideTemplate;\n context: {\n load: load,\n type: 'pickup',\n side: 'left',\n }\n \"\n ></ng-container>\n\n <span\n class=\"d-flex justify-content-center align-items-center\"\n >\n <svg-icon\n class=\"d-flex svg-size-10\"\n [src]=\"getSvgPath('arrowRight')\"\n ></svg-icon>\n </span>\n\n <ng-container\n *ngTemplateOutlet=\"\n stopsSideTemplate;\n context: {\n load: load,\n type: 'delivery',\n side: 'right',\n }\n \"\n ></ng-container>\n </div>\n </div>\n }\n </div>\n </ng-template>\n\n <ng-container *ngTemplateOutlet=\"loadList\"></ng-container>\n} @else {\n <div class=\"focused-load-template\">\n @if (isFocusingLoad) {\n <app-ca-load-single\n [status]=\"focusedTab\"\n [activeLoad]=\"focusedLoad\"\n (dropdownMenuAction)=\"\n onDropdownMenuAction($event, focusedLoad[0].id)\n \"\n ></app-ca-load-single>\n } @else {\n <div class=\"no-active-load-message\">\n <h2>No {{ focusedTab | toLowerCase }} load</h2>\n </div>\n }\n </div>\n}\n\n<ng-template #stopsSideTemplate let-load=\"load\" let-type=\"type\" let-side=\"side\">\n <div class=\"stops-side {{ side }} d-flex align-items-center flex-basis-50\">\n <div class=\"d-flex align-items-center justify-content-center w-22 h-18\">\n @if (side === 'left') {\n <span\n class=\"line-left line-right d-flex align-items-center justify-content-center ca-font-bold\"\n >\n {{\n type === 'pickup'\n ? load.pickup?.stopOrder\n : load.delivery?.stopOrder\n }}\n </span>\n }\n </div>\n\n <div\n class=\"date-location {{ side }} d-flex flex-column align-items-{{\n side === 'left' ? 'start' : 'end'\n }}\"\n >\n <span\n class=\"location text-start ca-font-medium text-truncate d-block\"\n [class.text-end]=\"type === 'delivery'\"\n >\n {{\n type === 'pickup'\n ? (load.pickup?.shipper?.address?.city\n | formatCityStatePipe\n : load.pickup?.shipper?.address?.stateShortName)\n : (load.delivery?.shipper?.address?.city\n | formatCityStatePipe\n : load.delivery?.shipper?.address?.stateShortName)\n }}\n </span>\n <span class=\"date ca-font-regular\">\n {{\n type === 'pickup'\n ? (load.pickup?.dateFrom | dateFromStringPipe)\n : (load.delivery?.dateFrom | dateFromStringPipe)\n }},\n {{\n type === 'pickup'\n ? (load.pickup?.dateFrom | dateFromStringPipe: 'time')\n : (load.delivery?.dateFrom | dateFromStringPipe: 'time')\n }}\n </span>\n </div>\n\n <div class=\"d-flex align-items-center justify-content-center w-22 h-18\">\n @if (side === 'right') {\n <span\n class=\"line-left line-right d-flex align-items-center justify-content-center ca-font-bold\"\n >\n {{\n type === 'pickup'\n ? load.pickup?.stopOrder\n : load.delivery?.stopOrder\n }}\n </span>\n }\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}}.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}.wrapper-container{max-height:308px;overflow-y:auto;font-family:Montserrat,sans-serif}.wrapper-container.inside{margin-top:4px}.wrapper-container::-webkit-scrollbar{width:2px}.wrapper-container::-webkit-scrollbar-thumb{background:#919191;border-radius:1px}.wrapper-container::-webkit-scrollbar-track{background:#2f2f2f}.wrapper{border-radius:3px;transition:background-color .3s ease;padding:2px 0;margin-right:2px;gap:2px}.wrapper:hover,.wrapper.active{background-color:#424242;cursor:pointer}.stops{padding:0 2px;gap:4px;font-size:14px}.stops .stops-side{min-width:0;height:26px}.stops .stops-side.right{justify-content:end}.stops .stops-side .date-location{width:100%;min-width:0}.stops .stops-side .date-location.left{margin-left:4px}.stops .stops-side .date-location.right{margin-right:4px}.stops .stops-side .date-location .location{font-size:11px;line-height:14px;color:#fff;width:90%;min-width:0}.stops .stops-side .date-location .date{font-size:11px;line-height:14px;color:#919191}.stops .stops-side:first-child{color:#86c9c3}.stops .stops-side:first-child .line-left{border-right:solid 2px rgba(37,159,148,.4);width:22px;height:18px}.stops .stops-side:last-child{color:#ed9292}.stops .stops-side:last-child .line-right{border-left:solid 2px rgba(255,112,67,.4);width:22px;height:18px}.load-num{font-size:11px;line-height:14px;text-align:left;padding:0 2px 0 6px;width:100%}.load-num .loadNumber{gap:4px;padding-right:4px}.load-num .price{margin-right:4px}.dispatch-stops{color:#fff;text-align:left}.focused-load-template{max-height:340px;overflow-y:hidden;overflow-x:hidden}.focused-load-template .no-active-load-message{padding-top:4px;padding-bottom:4px}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
19822
19815
|
// modules
|
|
19823
19816
|
CommonModule }, { 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: "component", type:
|
|
19824
19817
|
// components
|
|
@@ -19840,7 +19833,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
19840
19833
|
FormatCurrencyPipe,
|
|
19841
19834
|
ToLowerCasePipe,
|
|
19842
19835
|
FormatCityStatePipe,
|
|
19843
|
-
], template: "@if (!isFocusingLoad && loads.length) {\n <ng-template #loadList>\n <div class=\"wrapper-container inside d-flex flex-column gap-1\">\n @for (load of loads; let indx = $index; track indx) {\n @let isLoadDropdownSelected =\n selectedLoadDropdownId === load.id;\n\n <div\n class=\"wrapper d-flex flex-column\"\n [class.active]=\"isLoadDropdownSelected\"\n (click)=\"focusLoad(load)\"\n >\n <div class=\"d-flex dispatch-stops\">\n <div\n class=\"load-num ca-font-bold d-flex justify-content-between align-items-center\"\n >\n @let isComboLoad = load.type?.name === 'Combo';\n\n <div class=\"d-flex align-items-center\">\n <span class=\"loadNumber-companyName\">\n <span class=\"loadNumber ca-font-bold\">{{\n load.loadNumber\n }}</span>\n </span>\n\n @if (isComboLoad) {\n <svg-icon\n class=\"svg-size-14\"\n [src]=\"getSvgPath('comboLoad')\"\n ></svg-icon>\n }\n </div>\n\n <div class=\"d-flex align-items-center\">\n <span class=\"price ca-font-regular\">{{\n load.totalRate! | formatCurrency\n }}</span>\n\n <div\n class=\"button-container\"\n (click)=\"$event.stopPropagation()\"\n >\n <ca-dropdown-menu\n [type]=\"'dots-menu-type'\"\n [placement]=\"'end-top'\"\n [popoverClass]=\"\n 'ca-pickup-delivery-list-dropdown-popover'\n \"\n [isDarkBackground]=\"true\"\n [isLeftSideIconPosition]=\"true\"\n [options]=\"dropdownOptions\"\n (dropdownOptionEmitter)=\"\n onToggleDropdownMenuActions(\n $event,\n load.id\n )\n \"\n >\n </ca-dropdown-menu>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"stops d-flex justify-content-between w-100\">\n <ng-container\n *ngTemplateOutlet=\"\n stopsSideTemplate;\n context: {\n load: load,\n type: 'pickup',\n side: 'left',\n }\n \"\n ></ng-container>\n\n <span\n class=\"d-flex justify-content-center align-items-center\"\n >\n <svg-icon\n class=\"d-flex svg-size-10\"\n [src]=\"getSvgPath('arrowRight')\"\n ></svg-icon>\n </span>\n\n <ng-container\n *ngTemplateOutlet=\"\n stopsSideTemplate;\n context: {\n load: load,\n type: 'delivery',\n side: 'right',\n }\n \"\n ></ng-container>\n </div>\n </div>\n }\n </div>\n </ng-template>\n\n <ng-container *ngTemplateOutlet=\"loadList\"></ng-container>\n} @else {\n <div class=\"focused-load-template\">\n @if (isFocusingLoad) {\n <app-ca-load-single\n [status]=\"focusedTab\"\n [activeLoad]=\"focusedLoad\"\n (dropdownMenuAction)=\"\n onDropdownMenuAction($event, focusedLoad[0].id)\n \"\n ></app-ca-load-single>\n } @else {\n <div class=\"no-active-load-message\">\n <h2>No {{ focusedTab | toLowerCase }} load</h2>\n </div>\n }\n </div>\n}\n\n<ng-template #stopsSideTemplate let-load=\"load\" let-type=\"type\" let-side=\"side\">\n <div class=\"stops-side {{ side }} d-flex align-items-center flex-basis-50\">\n <div class=\"d-flex align-items-center justify-content-center w-22 h-18\">\n @if (side === 'left') {\n <span\n class=\"line-left line-right d-flex align-items-center justify-content-center ca-font-bold\"\n >\n {{\n type === 'pickup'\n ? load.pickup?.stopOrder\n : load.delivery?.stopOrder\n }}\n </span>\n }\n </div>\n\n <div\n class=\"date-location {{ side }} d-flex flex-column align-items-{{\n side === 'left' ? 'start' : 'end'\n }}\"\n >\n <span\n class=\"location text-start ca-font-medium text-truncate d-block\"\n [class.text-end]=\"type === 'delivery'\"\n >\n {{\n type === 'pickup'\n ? (load.pickup?.shipper?.address?.city\n | formatCityStatePipe\n : load.pickup?.shipper?.address?.stateShortName)\n : (load.delivery?.shipper?.address?.city\n | formatCityStatePipe\n : load.delivery?.shipper?.address?.stateShortName)\n }}\n </span>\n <span class=\"date ca-font-regular\">\n {{\n type === 'pickup'\n ? (load.pickup?.dateFrom | dateFromStringPipe)\n : (load.delivery?.dateFrom | dateFromStringPipe)\n }},\n {{\n type === 'pickup'\n ? (load.pickup?.dateFrom | dateFromStringPipe: 'time')\n : (load.delivery?.dateFrom | dateFromStringPipe: 'time')\n }}\n </span>\n </div>\n\n <div class=\"d-flex align-items-center justify-content-center w-22 h-18\">\n @if (side === 'right') {\n <span\n class=\"line-left line-right d-flex align-items-center justify-content-center ca-font-bold\"\n >\n {{\n type === 'pickup'\n ? load.pickup?.stopOrder\n : load.delivery?.stopOrder\n }}\n </span>\n }\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}}.wrapper-container{max-height:308px;overflow-y:auto;font-family:Montserrat,sans-serif}.wrapper-container.inside{margin-top:4px}.wrapper-container::-webkit-scrollbar{width:2px}.wrapper-container::-webkit-scrollbar-thumb{background:#919191;border-radius:1px}.wrapper-container::-webkit-scrollbar-track{background:#2f2f2f}.wrapper{border-radius:3px;transition:background-color .3s ease;padding:2px 0;margin-right:2px;gap:2px}.wrapper:hover,.wrapper.active{background-color:#424242;cursor:pointer}.stops{padding:0 2px;gap:4px;font-size:14px}.stops .stops-side{min-width:0;height:26px}.stops .stops-side.right{justify-content:end}.stops .stops-side .date-location{width:100%;min-width:0}.stops .stops-side .date-location.left{margin-left:4px}.stops .stops-side .date-location.right{margin-right:4px}.stops .stops-side .date-location .location{font-size:11px;line-height:14px;color:#fff;width:90%;min-width:0}.stops .stops-side .date-location .date{font-size:11px;line-height:14px;color:#919191}.stops .stops-side:first-child{color:#86c9c3}.stops .stops-side:first-child .line-left{border-right:solid 2px rgba(37,159,148,.4);width:22px;height:18px}.stops .stops-side:last-child{color:#ed9292}.stops .stops-side:last-child .line-right{border-left:solid 2px rgba(255,112,67,.4);width:22px;height:18px}.load-num{font-size:11px;line-height:14px;text-align:left;padding:0 2px 0 6px;width:100%}.load-num .loadNumber{gap:4px;padding-right:4px}.load-num .price{margin-right:4px}.dispatch-stops{color:#fff;text-align:left}.focused-load-template{max-height:340px;overflow-y:hidden;overflow-x:hidden}.focused-load-template .no-active-load-message{padding-top:4px;padding-bottom:4px}\n"] }]
|
|
19836
|
+
], template: "@if (!isFocusingLoad && loads.length) {\n <ng-template #loadList>\n <div class=\"wrapper-container inside d-flex flex-column gap-1\">\n @for (load of loads; let indx = $index; track indx) {\n @let isLoadDropdownSelected =\n selectedLoadDropdownId === load.id;\n\n <div\n class=\"wrapper d-flex flex-column\"\n [class.active]=\"isLoadDropdownSelected\"\n (click)=\"focusLoad(load)\"\n >\n <div class=\"d-flex dispatch-stops\">\n <div\n class=\"load-num ca-font-bold d-flex justify-content-between align-items-center\"\n >\n @let isComboLoad = load.type?.name === 'Combo';\n\n <div class=\"d-flex align-items-center\">\n <span class=\"loadNumber-companyName\">\n <span class=\"loadNumber ca-font-bold\">{{\n load.loadNumber\n }}</span>\n </span>\n\n @if (isComboLoad) {\n <svg-icon\n class=\"svg-size-14\"\n [src]=\"getSvgPath('comboLoad')\"\n ></svg-icon>\n }\n </div>\n\n <div class=\"d-flex align-items-center\">\n <span class=\"price ca-font-regular\">{{\n load.totalRate! | formatCurrency\n }}</span>\n\n <div\n class=\"button-container\"\n (click)=\"$event.stopPropagation()\"\n >\n <ca-dropdown-menu\n [type]=\"'dots-menu-type'\"\n [placement]=\"'end-top'\"\n [popoverClass]=\"\n 'ca-pickup-delivery-list-dropdown-popover'\n \"\n [isDarkBackground]=\"true\"\n [isLeftSideIconPosition]=\"true\"\n [options]=\"dropdownOptions\"\n (dropdownOptionEmitter)=\"\n onToggleDropdownMenuActions(\n $event,\n load.id\n )\n \"\n >\n </ca-dropdown-menu>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"stops d-flex justify-content-between w-100\">\n <ng-container\n *ngTemplateOutlet=\"\n stopsSideTemplate;\n context: {\n load: load,\n type: 'pickup',\n side: 'left',\n }\n \"\n ></ng-container>\n\n <span\n class=\"d-flex justify-content-center align-items-center\"\n >\n <svg-icon\n class=\"d-flex svg-size-10\"\n [src]=\"getSvgPath('arrowRight')\"\n ></svg-icon>\n </span>\n\n <ng-container\n *ngTemplateOutlet=\"\n stopsSideTemplate;\n context: {\n load: load,\n type: 'delivery',\n side: 'right',\n }\n \"\n ></ng-container>\n </div>\n </div>\n }\n </div>\n </ng-template>\n\n <ng-container *ngTemplateOutlet=\"loadList\"></ng-container>\n} @else {\n <div class=\"focused-load-template\">\n @if (isFocusingLoad) {\n <app-ca-load-single\n [status]=\"focusedTab\"\n [activeLoad]=\"focusedLoad\"\n (dropdownMenuAction)=\"\n onDropdownMenuAction($event, focusedLoad[0].id)\n \"\n ></app-ca-load-single>\n } @else {\n <div class=\"no-active-load-message\">\n <h2>No {{ focusedTab | toLowerCase }} load</h2>\n </div>\n }\n </div>\n}\n\n<ng-template #stopsSideTemplate let-load=\"load\" let-type=\"type\" let-side=\"side\">\n <div class=\"stops-side {{ side }} d-flex align-items-center flex-basis-50\">\n <div class=\"d-flex align-items-center justify-content-center w-22 h-18\">\n @if (side === 'left') {\n <span\n class=\"line-left line-right d-flex align-items-center justify-content-center ca-font-bold\"\n >\n {{\n type === 'pickup'\n ? load.pickup?.stopOrder\n : load.delivery?.stopOrder\n }}\n </span>\n }\n </div>\n\n <div\n class=\"date-location {{ side }} d-flex flex-column align-items-{{\n side === 'left' ? 'start' : 'end'\n }}\"\n >\n <span\n class=\"location text-start ca-font-medium text-truncate d-block\"\n [class.text-end]=\"type === 'delivery'\"\n >\n {{\n type === 'pickup'\n ? (load.pickup?.shipper?.address?.city\n | formatCityStatePipe\n : load.pickup?.shipper?.address?.stateShortName)\n : (load.delivery?.shipper?.address?.city\n | formatCityStatePipe\n : load.delivery?.shipper?.address?.stateShortName)\n }}\n </span>\n <span class=\"date ca-font-regular\">\n {{\n type === 'pickup'\n ? (load.pickup?.dateFrom | dateFromStringPipe)\n : (load.delivery?.dateFrom | dateFromStringPipe)\n }},\n {{\n type === 'pickup'\n ? (load.pickup?.dateFrom | dateFromStringPipe: 'time')\n : (load.delivery?.dateFrom | dateFromStringPipe: 'time')\n }}\n </span>\n </div>\n\n <div class=\"d-flex align-items-center justify-content-center w-22 h-18\">\n @if (side === 'right') {\n <span\n class=\"line-left line-right d-flex align-items-center justify-content-center ca-font-bold\"\n >\n {{\n type === 'pickup'\n ? load.pickup?.stopOrder\n : load.delivery?.stopOrder\n }}\n </span>\n }\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}}.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}.wrapper-container{max-height:308px;overflow-y:auto;font-family:Montserrat,sans-serif}.wrapper-container.inside{margin-top:4px}.wrapper-container::-webkit-scrollbar{width:2px}.wrapper-container::-webkit-scrollbar-thumb{background:#919191;border-radius:1px}.wrapper-container::-webkit-scrollbar-track{background:#2f2f2f}.wrapper{border-radius:3px;transition:background-color .3s ease;padding:2px 0;margin-right:2px;gap:2px}.wrapper:hover,.wrapper.active{background-color:#424242;cursor:pointer}.stops{padding:0 2px;gap:4px;font-size:14px}.stops .stops-side{min-width:0;height:26px}.stops .stops-side.right{justify-content:end}.stops .stops-side .date-location{width:100%;min-width:0}.stops .stops-side .date-location.left{margin-left:4px}.stops .stops-side .date-location.right{margin-right:4px}.stops .stops-side .date-location .location{font-size:11px;line-height:14px;color:#fff;width:90%;min-width:0}.stops .stops-side .date-location .date{font-size:11px;line-height:14px;color:#919191}.stops .stops-side:first-child{color:#86c9c3}.stops .stops-side:first-child .line-left{border-right:solid 2px rgba(37,159,148,.4);width:22px;height:18px}.stops .stops-side:last-child{color:#ed9292}.stops .stops-side:last-child .line-right{border-left:solid 2px rgba(255,112,67,.4);width:22px;height:18px}.load-num{font-size:11px;line-height:14px;text-align:left;padding:0 2px 0 6px;width:100%}.load-num .loadNumber{gap:4px;padding-right:4px}.load-num .price{margin-right:4px}.dispatch-stops{color:#fff;text-align:left}.focused-load-template{max-height:340px;overflow-y:hidden;overflow-x:hidden}.focused-load-template .no-active-load-message{padding-top:4px;padding-bottom:4px}\n"] }]
|
|
19844
19837
|
}], ctorParameters: () => [{ type: FormatCurrencyPipe }], propDecorators: { loads: [{
|
|
19845
19838
|
type: Input
|
|
19846
19839
|
}], focusedTab: [{
|
|
@@ -20000,7 +19993,7 @@ class LoadComponent {
|
|
|
20000
19993
|
this.dropdownMenuAction.emit(action);
|
|
20001
19994
|
}
|
|
20002
19995
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LoadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
20003
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: LoadComponent, isStandalone: true, selector: "app-ca-load", inputs: { focusedTab: "focusedTab", loads: "loads", columnWidth: "columnWidth" }, outputs: { dropdownMenuAction: "dropdownMenuAction" }, providers: [AngularSvgIconModule], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"load-component d-flex flex-column prevent-text-selection\"\n [ngStyle]=\"{\n width: columnWidth + 'px',\n }\"\n>\n @if (isTop) {\n <ng-container *ngTemplateOutlet=\"assignedLoadTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"statusBarTemplate\"></ng-container>\n <ng-container\n *ngTemplateOutlet=\"loadInformationTemplate\"\n ></ng-container>\n } @else {\n <ng-container\n *ngTemplateOutlet=\"loadInformationTemplate\"\n ></ng-container>\n <ng-container *ngTemplateOutlet=\"statusBarTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"assignedLoadTemplate\"></ng-container>\n }\n\n <ng-template #assignedLoadTemplate>\n <div class=\"d-flex align-items-center assigned-load-holder\">\n @if (returnButtonVisible) {\n <button\n class=\"d-flex align-items-center justify-content-center returnButton\"\n ngbTooltip\n mainCaTooltip=\"Back\"\n position=\"bottom\"\n tooltipBackground=\"#cccccc\"\n tooltipColor=\"#2f2f2f\"\n (click)=\"toggleFocusedLoad()\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n >\n <svg-icon\n class=\"svg-size-16 position-relative bottom-1\"\n [src]=\"currentIcon\"\n ></svg-icon>\n </button>\n }\n <span class=\"ca-font-extra-bold\">ASSIGNED LOAD</span>\n </div>\n </ng-template>\n\n <ng-template #statusBarTemplate>\n <div\n class=\"statusBar d-flex justify-content-between align-items-center\"\n >\n @for (tab of tabs; let indx = $index; track indx) {\n <button\n class=\"ca-font-bold d-flex justify-content-center align-items-center\"\n (click)=\"setFocusedTab(tab)\"\n [class.active]=\"focusedTab === tab\"\n >\n {{ tab }}\n </button>\n }\n </div>\n </ng-template>\n\n <ng-template #loadInformationTemplate>\n <div\n [@animationTabsModal]=\"animationObject\"\n class=\"animation-three-tabs\"\n >\n <div>\n @switch (focusedTab) {\n @case ('CLOSED') {\n <div class=\"activeLoadInformation\">\n @if (closedLoads) {\n <app-ca-load-list\n (focusLoadEmitter)=\"toggleFocusedLoad()\"\n [loads]=\"closedLoads\"\n [isFocusingLoad]=\"returnButtonVisible\"\n [focusedTab]=\"StatusTypeEnum.CLOSED\"\n (dropdownMenuAction)=\"\n onDropdownMenuAction($event)\n \"\n >\n </app-ca-load-list>\n } @else {\n No closed loads\n }\n </div>\n }\n @case ('ACTIVE') {\n <div class=\"activeLoadInformation\">\n @if (activeLoad) {\n <app-ca-load-single\n [status]=\"focusedTab\"\n [activeLoad]=\"activeLoad\"\n (dropdownMenuAction)=\"\n onDropdownMenuAction($event)\n \"\n >\n </app-ca-load-single>\n }\n </div>\n }\n @case ('PENDING') {\n <div class=\"activeLoadInformation\">\n @if (!pendingLoads) {\n No pending loads\n }\n @if (pendingLoads) {\n <app-ca-load-list\n (focusLoadEmitter)=\"toggleFocusedLoad()\"\n [loads]=\"pendingLoads\"\n [isFocusingLoad]=\"returnButtonVisible\"\n [focusedTab]=\"StatusTypeEnum.PENDING\"\n (dropdownMenuAction)=\"\n onDropdownMenuAction($event)\n \"\n >\n </app-ca-load-list>\n }\n </div>\n }\n }\n </div>\n </div>\n </ng-template>\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}}.load-component{background-color:#2f2f2f;padding:4px;border-radius:3px;display:block;overflow:hidden}.load-component .assigned-load-holder{height:26px;margin-bottom:4px}.load-component .assigned-load-holder>buttton{font-size:11px;margin:10px;padding:4px}.load-component .assigned-load-holder>span{color:#fff;padding-left:6px;font-family:Montserrat,sans-serif;font-size:11px;line-height:14px}.load-component .returnButton{background-color:#91919133;border-radius:2px;width:26px;height:26px;padding:4px}.load-component .returnButton svg-icon svg path{fill:#aaa}.load-component .returnButton:hover{background-color:#91919166}.load-component .returnButton:hover svg-icon svg path{fill:#dadada}.load-component .returnButton:hover{color:#fff;cursor:pointer}.load-component .statusBar{height:26px;padding:4px;background-color:#1d1d1d;border-radius:2px 0 0}.load-component button{width:100%;height:18px;border-radius:1px;padding:2px 8px;color:#919191;background-color:transparent;border:1px solid transparent;font-size:11px;text-align:center;transition:background-color .3s ease,border-color .3s ease}.load-component button.active,.load-component button:active{background-color:#424242;border-color:#424242;color:#fff}.load-component .activeLoadInformation{gap:4px;border-radius:0 0 3px 3px;color:#919191;font-size:11px;line-height:14px;text-align:center}.animation-three-tabs{display:grid;grid-template-rows:100%;grid-template-columns:repeat(3,100%);transition:all .3s}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "ngmodule", type:
|
|
19996
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: LoadComponent, isStandalone: true, selector: "app-ca-load", inputs: { focusedTab: "focusedTab", loads: "loads", columnWidth: "columnWidth" }, outputs: { dropdownMenuAction: "dropdownMenuAction" }, providers: [AngularSvgIconModule], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"load-component d-flex flex-column prevent-text-selection\"\n [ngStyle]=\"{\n width: columnWidth + 'px',\n }\"\n>\n @if (isTop) {\n <ng-container *ngTemplateOutlet=\"assignedLoadTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"statusBarTemplate\"></ng-container>\n <ng-container\n *ngTemplateOutlet=\"loadInformationTemplate\"\n ></ng-container>\n } @else {\n <ng-container\n *ngTemplateOutlet=\"loadInformationTemplate\"\n ></ng-container>\n <ng-container *ngTemplateOutlet=\"statusBarTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"assignedLoadTemplate\"></ng-container>\n }\n\n <ng-template #assignedLoadTemplate>\n <div class=\"d-flex align-items-center assigned-load-holder\">\n @if (returnButtonVisible) {\n <button\n class=\"d-flex align-items-center justify-content-center returnButton\"\n ngbTooltip\n mainCaTooltip=\"Back\"\n position=\"bottom\"\n tooltipBackground=\"#cccccc\"\n tooltipColor=\"#2f2f2f\"\n (click)=\"toggleFocusedLoad()\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n >\n <svg-icon\n class=\"svg-size-16 position-relative bottom-1\"\n [src]=\"currentIcon\"\n ></svg-icon>\n </button>\n }\n <span class=\"ca-font-extra-bold\">ASSIGNED LOAD</span>\n </div>\n </ng-template>\n\n <ng-template #statusBarTemplate>\n <div\n class=\"statusBar d-flex justify-content-between align-items-center\"\n >\n @for (tab of tabs; let indx = $index; track indx) {\n <button\n class=\"ca-font-bold d-flex justify-content-center align-items-center\"\n (click)=\"setFocusedTab(tab)\"\n [class.active]=\"focusedTab === tab\"\n >\n {{ tab }}\n </button>\n }\n </div>\n </ng-template>\n\n <ng-template #loadInformationTemplate>\n <div\n [@animationTabsModal]=\"animationObject\"\n class=\"animation-three-tabs\"\n >\n <div>\n @switch (focusedTab) {\n @case ('CLOSED') {\n <div class=\"activeLoadInformation\">\n @if (closedLoads) {\n <app-ca-load-list\n (focusLoadEmitter)=\"toggleFocusedLoad()\"\n [loads]=\"closedLoads\"\n [isFocusingLoad]=\"returnButtonVisible\"\n [focusedTab]=\"StatusTypeEnum.CLOSED\"\n (dropdownMenuAction)=\"\n onDropdownMenuAction($event)\n \"\n >\n </app-ca-load-list>\n } @else {\n No closed loads\n }\n </div>\n }\n @case ('ACTIVE') {\n <div class=\"activeLoadInformation\">\n @if (activeLoad) {\n <app-ca-load-single\n [status]=\"focusedTab\"\n [activeLoad]=\"activeLoad\"\n (dropdownMenuAction)=\"\n onDropdownMenuAction($event)\n \"\n >\n </app-ca-load-single>\n }\n </div>\n }\n @case ('PENDING') {\n <div class=\"activeLoadInformation\">\n @if (!pendingLoads) {\n No pending loads\n }\n @if (pendingLoads) {\n <app-ca-load-list\n (focusLoadEmitter)=\"toggleFocusedLoad()\"\n [loads]=\"pendingLoads\"\n [isFocusingLoad]=\"returnButtonVisible\"\n [focusedTab]=\"StatusTypeEnum.PENDING\"\n (dropdownMenuAction)=\"\n onDropdownMenuAction($event)\n \"\n >\n </app-ca-load-list>\n }\n </div>\n }\n }\n </div>\n </div>\n </ng-template>\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}}.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}.load-component{background-color:#2f2f2f;padding:4px;border-radius:3px;display:block;overflow:hidden}.load-component .assigned-load-holder{height:26px;margin-bottom:4px}.load-component .assigned-load-holder>buttton{font-size:11px;margin:10px;padding:4px}.load-component .assigned-load-holder>span{color:#fff;padding-left:6px;font-family:Montserrat,sans-serif;font-size:11px;line-height:14px}.load-component .returnButton{background-color:#91919133;border-radius:2px;width:26px;height:26px;padding:4px}.load-component .returnButton svg-icon svg path{fill:#aaa}.load-component .returnButton:hover{background-color:#91919166}.load-component .returnButton:hover svg-icon svg path{fill:#dadada}.load-component .returnButton:hover{color:#fff;cursor:pointer}.load-component .statusBar{height:26px;padding:4px;background-color:#1d1d1d;border-radius:2px 0 0}.load-component button{width:100%;height:18px;border-radius:1px;padding:2px 8px;color:#919191;background-color:transparent;border:1px solid transparent;font-size:11px;text-align:center;transition:background-color .3s ease,border-color .3s ease}.load-component button.active,.load-component button:active{background-color:#424242;border-color:#424242;color:#fff}.load-component .activeLoadInformation{gap:4px;border-radius:0 0 3px 3px;color:#919191;font-size:11px;line-height:14px;text-align:center}.animation-three-tabs{display:grid;grid-template-rows:100%;grid-template-columns:repeat(3,100%);transition:all .3s}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "ngmodule", type:
|
|
20004
19997
|
//Modules
|
|
20005
19998
|
NgbNavModule }, { 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: NgbTooltipModule }, { kind: "directive", type: i3.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:
|
|
20006
19999
|
// Components
|
|
@@ -20019,7 +20012,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
20019
20012
|
ActiveLoadComponent,
|
|
20020
20013
|
LoadListComponent,
|
|
20021
20014
|
CaAppTooltipV2Component,
|
|
20022
|
-
], template: "<div\n class=\"load-component d-flex flex-column prevent-text-selection\"\n [ngStyle]=\"{\n width: columnWidth + 'px',\n }\"\n>\n @if (isTop) {\n <ng-container *ngTemplateOutlet=\"assignedLoadTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"statusBarTemplate\"></ng-container>\n <ng-container\n *ngTemplateOutlet=\"loadInformationTemplate\"\n ></ng-container>\n } @else {\n <ng-container\n *ngTemplateOutlet=\"loadInformationTemplate\"\n ></ng-container>\n <ng-container *ngTemplateOutlet=\"statusBarTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"assignedLoadTemplate\"></ng-container>\n }\n\n <ng-template #assignedLoadTemplate>\n <div class=\"d-flex align-items-center assigned-load-holder\">\n @if (returnButtonVisible) {\n <button\n class=\"d-flex align-items-center justify-content-center returnButton\"\n ngbTooltip\n mainCaTooltip=\"Back\"\n position=\"bottom\"\n tooltipBackground=\"#cccccc\"\n tooltipColor=\"#2f2f2f\"\n (click)=\"toggleFocusedLoad()\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n >\n <svg-icon\n class=\"svg-size-16 position-relative bottom-1\"\n [src]=\"currentIcon\"\n ></svg-icon>\n </button>\n }\n <span class=\"ca-font-extra-bold\">ASSIGNED LOAD</span>\n </div>\n </ng-template>\n\n <ng-template #statusBarTemplate>\n <div\n class=\"statusBar d-flex justify-content-between align-items-center\"\n >\n @for (tab of tabs; let indx = $index; track indx) {\n <button\n class=\"ca-font-bold d-flex justify-content-center align-items-center\"\n (click)=\"setFocusedTab(tab)\"\n [class.active]=\"focusedTab === tab\"\n >\n {{ tab }}\n </button>\n }\n </div>\n </ng-template>\n\n <ng-template #loadInformationTemplate>\n <div\n [@animationTabsModal]=\"animationObject\"\n class=\"animation-three-tabs\"\n >\n <div>\n @switch (focusedTab) {\n @case ('CLOSED') {\n <div class=\"activeLoadInformation\">\n @if (closedLoads) {\n <app-ca-load-list\n (focusLoadEmitter)=\"toggleFocusedLoad()\"\n [loads]=\"closedLoads\"\n [isFocusingLoad]=\"returnButtonVisible\"\n [focusedTab]=\"StatusTypeEnum.CLOSED\"\n (dropdownMenuAction)=\"\n onDropdownMenuAction($event)\n \"\n >\n </app-ca-load-list>\n } @else {\n No closed loads\n }\n </div>\n }\n @case ('ACTIVE') {\n <div class=\"activeLoadInformation\">\n @if (activeLoad) {\n <app-ca-load-single\n [status]=\"focusedTab\"\n [activeLoad]=\"activeLoad\"\n (dropdownMenuAction)=\"\n onDropdownMenuAction($event)\n \"\n >\n </app-ca-load-single>\n }\n </div>\n }\n @case ('PENDING') {\n <div class=\"activeLoadInformation\">\n @if (!pendingLoads) {\n No pending loads\n }\n @if (pendingLoads) {\n <app-ca-load-list\n (focusLoadEmitter)=\"toggleFocusedLoad()\"\n [loads]=\"pendingLoads\"\n [isFocusingLoad]=\"returnButtonVisible\"\n [focusedTab]=\"StatusTypeEnum.PENDING\"\n (dropdownMenuAction)=\"\n onDropdownMenuAction($event)\n \"\n >\n </app-ca-load-list>\n }\n </div>\n }\n }\n </div>\n </div>\n </ng-template>\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}}.load-component{background-color:#2f2f2f;padding:4px;border-radius:3px;display:block;overflow:hidden}.load-component .assigned-load-holder{height:26px;margin-bottom:4px}.load-component .assigned-load-holder>buttton{font-size:11px;margin:10px;padding:4px}.load-component .assigned-load-holder>span{color:#fff;padding-left:6px;font-family:Montserrat,sans-serif;font-size:11px;line-height:14px}.load-component .returnButton{background-color:#91919133;border-radius:2px;width:26px;height:26px;padding:4px}.load-component .returnButton svg-icon svg path{fill:#aaa}.load-component .returnButton:hover{background-color:#91919166}.load-component .returnButton:hover svg-icon svg path{fill:#dadada}.load-component .returnButton:hover{color:#fff;cursor:pointer}.load-component .statusBar{height:26px;padding:4px;background-color:#1d1d1d;border-radius:2px 0 0}.load-component button{width:100%;height:18px;border-radius:1px;padding:2px 8px;color:#919191;background-color:transparent;border:1px solid transparent;font-size:11px;text-align:center;transition:background-color .3s ease,border-color .3s ease}.load-component button.active,.load-component button:active{background-color:#424242;border-color:#424242;color:#fff}.load-component .activeLoadInformation{gap:4px;border-radius:0 0 3px 3px;color:#919191;font-size:11px;line-height:14px;text-align:center}.animation-three-tabs{display:grid;grid-template-rows:100%;grid-template-columns:repeat(3,100%);transition:all .3s}\n"] }]
|
|
20015
|
+
], template: "<div\n class=\"load-component d-flex flex-column prevent-text-selection\"\n [ngStyle]=\"{\n width: columnWidth + 'px',\n }\"\n>\n @if (isTop) {\n <ng-container *ngTemplateOutlet=\"assignedLoadTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"statusBarTemplate\"></ng-container>\n <ng-container\n *ngTemplateOutlet=\"loadInformationTemplate\"\n ></ng-container>\n } @else {\n <ng-container\n *ngTemplateOutlet=\"loadInformationTemplate\"\n ></ng-container>\n <ng-container *ngTemplateOutlet=\"statusBarTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"assignedLoadTemplate\"></ng-container>\n }\n\n <ng-template #assignedLoadTemplate>\n <div class=\"d-flex align-items-center assigned-load-holder\">\n @if (returnButtonVisible) {\n <button\n class=\"d-flex align-items-center justify-content-center returnButton\"\n ngbTooltip\n mainCaTooltip=\"Back\"\n position=\"bottom\"\n tooltipBackground=\"#cccccc\"\n tooltipColor=\"#2f2f2f\"\n (click)=\"toggleFocusedLoad()\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n >\n <svg-icon\n class=\"svg-size-16 position-relative bottom-1\"\n [src]=\"currentIcon\"\n ></svg-icon>\n </button>\n }\n <span class=\"ca-font-extra-bold\">ASSIGNED LOAD</span>\n </div>\n </ng-template>\n\n <ng-template #statusBarTemplate>\n <div\n class=\"statusBar d-flex justify-content-between align-items-center\"\n >\n @for (tab of tabs; let indx = $index; track indx) {\n <button\n class=\"ca-font-bold d-flex justify-content-center align-items-center\"\n (click)=\"setFocusedTab(tab)\"\n [class.active]=\"focusedTab === tab\"\n >\n {{ tab }}\n </button>\n }\n </div>\n </ng-template>\n\n <ng-template #loadInformationTemplate>\n <div\n [@animationTabsModal]=\"animationObject\"\n class=\"animation-three-tabs\"\n >\n <div>\n @switch (focusedTab) {\n @case ('CLOSED') {\n <div class=\"activeLoadInformation\">\n @if (closedLoads) {\n <app-ca-load-list\n (focusLoadEmitter)=\"toggleFocusedLoad()\"\n [loads]=\"closedLoads\"\n [isFocusingLoad]=\"returnButtonVisible\"\n [focusedTab]=\"StatusTypeEnum.CLOSED\"\n (dropdownMenuAction)=\"\n onDropdownMenuAction($event)\n \"\n >\n </app-ca-load-list>\n } @else {\n No closed loads\n }\n </div>\n }\n @case ('ACTIVE') {\n <div class=\"activeLoadInformation\">\n @if (activeLoad) {\n <app-ca-load-single\n [status]=\"focusedTab\"\n [activeLoad]=\"activeLoad\"\n (dropdownMenuAction)=\"\n onDropdownMenuAction($event)\n \"\n >\n </app-ca-load-single>\n }\n </div>\n }\n @case ('PENDING') {\n <div class=\"activeLoadInformation\">\n @if (!pendingLoads) {\n No pending loads\n }\n @if (pendingLoads) {\n <app-ca-load-list\n (focusLoadEmitter)=\"toggleFocusedLoad()\"\n [loads]=\"pendingLoads\"\n [isFocusingLoad]=\"returnButtonVisible\"\n [focusedTab]=\"StatusTypeEnum.PENDING\"\n (dropdownMenuAction)=\"\n onDropdownMenuAction($event)\n \"\n >\n </app-ca-load-list>\n }\n </div>\n }\n }\n </div>\n </div>\n </ng-template>\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}}.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}.load-component{background-color:#2f2f2f;padding:4px;border-radius:3px;display:block;overflow:hidden}.load-component .assigned-load-holder{height:26px;margin-bottom:4px}.load-component .assigned-load-holder>buttton{font-size:11px;margin:10px;padding:4px}.load-component .assigned-load-holder>span{color:#fff;padding-left:6px;font-family:Montserrat,sans-serif;font-size:11px;line-height:14px}.load-component .returnButton{background-color:#91919133;border-radius:2px;width:26px;height:26px;padding:4px}.load-component .returnButton svg-icon svg path{fill:#aaa}.load-component .returnButton:hover{background-color:#91919166}.load-component .returnButton:hover svg-icon svg path{fill:#dadada}.load-component .returnButton:hover{color:#fff;cursor:pointer}.load-component .statusBar{height:26px;padding:4px;background-color:#1d1d1d;border-radius:2px 0 0}.load-component button{width:100%;height:18px;border-radius:1px;padding:2px 8px;color:#919191;background-color:transparent;border:1px solid transparent;font-size:11px;text-align:center;transition:background-color .3s ease,border-color .3s ease}.load-component button.active,.load-component button:active{background-color:#424242;border-color:#424242;color:#fff}.load-component .activeLoadInformation{gap:4px;border-radius:0 0 3px 3px;color:#919191;font-size:11px;line-height:14px;text-align:center}.animation-three-tabs{display:grid;grid-template-rows:100%;grid-template-columns:repeat(3,100%);transition:all .3s}\n"] }]
|
|
20023
20016
|
}], ctorParameters: () => [], propDecorators: { focusedTab: [{
|
|
20024
20017
|
type: Input
|
|
20025
20018
|
}], loads: [{
|
|
@@ -20067,7 +20060,7 @@ class PickupDeliveryBlockComponent {
|
|
|
20067
20060
|
this.dropdownMenuAction.emit(action);
|
|
20068
20061
|
}
|
|
20069
20062
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PickupDeliveryBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
20070
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: PickupDeliveryBlockComponent, isStandalone: true, selector: "app-ca-pickup-delivery-block", inputs: { columnWidth: "columnWidth", searchStrings: "searchStrings", loads: "loads", dispatchResponse: "dispatchResponse", isHoveringRow: "isHoveringRow", isDisabled: "isDisabled" }, outputs: { dropdownMenuAction: "dropdownMenuAction" }, ngImport: i0, template: "<div\n class=\"incomplete-table-container prevent-text-selection\"\n [ngStyle]=\"{\n width: _columnWidth + 'px',\n }\"\n>\n @if (dispatchResponse?.activeLoad) {\n <ng-container\n *ngTemplateOutlet=\"\n loadDetailsTemplate;\n context: { load: dispatchResponse?.activeLoad }\n \"\n ></ng-container>\n } @else {\n <div\n class=\"incomplete-table-holder no-active-load d-flex align-items-center ca-font-medium\"\n [class.pe-none]=\"isDisabled\"\n #t2=\"ngbPopover\"\n [ngClass]=\"{\n 'opacity-0': !isHoveringRow,\n }\"\n [ngbPopover]=\"loadDetailsPopoverTemplate\"\n popoverClass=\"pickup-delivery-popover\"\n triggers=\"manual\"\n [autoClose]=\"'outside'\"\n container=\"body\"\n [placement]=\"['bottom-start', 'top-start']\"\n (click)=\"openPopover(t2)\"\n (hidden)=\"closePopover(t2)\"\n >\n NO ACTIVE OR PENDING LOAD\n </div>\n }\n\n <ng-template #loadDetailsTemplate let-load=\"load\">\n <div\n class=\"incomplete-table-holder stops d-flex justify-content-between align-items-center\"\n [class.pe-none]=\"isDisabled\"\n #t2=\"ngbPopover\"\n [ngbPopover]=\"loadDetailsPopoverTemplate\"\n popoverClass=\"pickup-delivery-popover\"\n triggers=\"manual\"\n [autoClose]=\"'outside'\"\n container=\"body\"\n [placement]=\"['bottom-start', 'top-start']\"\n (click)=\"openPopover(t2)\"\n (hidden)=\"closePopover(t2)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n stopsSideTemplate;\n context: {\n side: 'left',\n stopOrder: load?.pickupCount,\n city: load?.pickup?.shipper?.address?.city,\n state: load?.pickup?.shipper?.address?.stateShortName,\n date: load?.pickup?.dateFrom,\n status: load?.statusType?.name,\n type: 'pickup',\n loadType: load?.type?.name,\n }\n \"\n ></ng-container>\n\n <ng-container\n *ngTemplateOutlet=\"\n stopsSideTemplate;\n context: {\n side: 'right',\n stopOrder: load?.deliveryCount,\n city: load?.delivery?.shipper?.address?.city,\n state: load?.delivery?.shipper?.address?.stateShortName,\n date: load?.delivery?.dateFrom,\n status: load?.statusType?.name,\n type: 'delivery',\n loadType: load?.type?.name,\n }\n \"\n ></ng-container>\n </div>\n </ng-template>\n <ng-template\n #stopsSideTemplate\n let-side=\"side\"\n let-stopOrder=\"stopOrder\"\n let-city=\"city\"\n let-state=\"state\"\n let-date=\"date\"\n let-status=\"status\"\n let-type=\"type\"\n let-loadType=\"loadType\"\n >\n <div\n class=\"stops-side d-flex align-items-center flex-basis-50 {{\n side\n }}\"\n >\n @let isSplitLoad = loadType === 'Split';\n\n <span\n class=\"d-flex justify-content-center align-items-center {{\n type\n }}StationNumber ca-font-bold\"\n [ngClass]=\"{\n 'active-pickup': status === 'Active' && type === 'pickup',\n 'pending-pickup': status === 'Pending' && type === 'pickup',\n 'active-delivery':\n status === 'Active' && type === 'delivery',\n 'pending-delivery':\n status === 'Pending' && type === 'delivery',\n 'split-pickup': isSplitLoad,\n }\"\n >\n @let pickupStopNumber = isSplitLoad ? 'S' : stopOrder;\n\n {{ pickupStopNumber }}\n </span>\n <div class=\"stop-info-container d-flex flex-column\">\n @let formattedCityState = city | formatCityStatePipe: state;\n\n <span\n class=\"location ca-font-semi-bold d-block text-truncate\"\n [innerHTML]=\"\n formattedCityState\n | tableHighlightSearchText: _searchStrings\n \"\n >\n </span>\n\n <div class=\"date-time-holder d-flex\">\n @let formattedDate = date | dateFromStringPipe;\n\n <span\n class=\"date ca-font-regular d-flex justify-content-start m-r-4\"\n [innerHTML]=\"\n formattedDate\n | tableHighlightSearchText: _searchStrings\n \"\n >\n </span>\n <span\n class=\"date pickup-delivery-time d-none ca-font-regular text-truncate\"\n >{{ date | dateFromStringPipe: 'time' }}</span\n >\n </div>\n </div>\n </div>\n </ng-template>\n\n <ng-template #loadDetailsPopoverTemplate>\n <app-ca-load\n [focusedTab]=\"loadType\"\n [loads]=\"loads\"\n [columnWidth]=\"_columnWidth\"\n (dropdownMenuAction)=\"onDropdownMenuAction($event)\"\n ></app-ca-load>\n </ng-template>\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}}.incomplete-table-container{border-radius:3px;font-family:Montserrat,sans-serif}.incomplete-table-container .incomplete-table-holder{height:26px;border-radius:2px;border:none;cursor:pointer;padding:0}.incomplete-table-container .incomplete-table-holder.stops{width:100%;padding:4px;font-size:14px}.incomplete-table-container .incomplete-table-holder.stops .stops-side{gap:4px;height:26px;min-width:0}.incomplete-table-container .incomplete-table-holder.stops .stops-side .stop-info-container{width:calc(100% - 22px);min-width:0}.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;color:#424242;padding-left:0!important}.incomplete-table-container .incomplete-table-holder.stops .stops-side .date{color:#919191!important}.incomplete-table-container .incomplete-table-holder.stops .stops-side .location{width:90%;min-width:0}.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:#fff;border-radius:1px}.incomplete-table-container .incomplete-table-holder.stops .stops-side .pickupStationNumber.active-pickup{background-color:#91919133;color:#6c6c6c}.incomplete-table-container .incomplete-table-holder.stops .stops-side .pickupStationNumber.pending-pickup{background-color:#91919133;color:#259f94}.incomplete-table-container .incomplete-table-holder.stops .stops-side .pickupStationNumber.split-pickup{background-color:#f89b2e33;color:#f89b2e}.incomplete-table-container .incomplete-table-holder.stops .stops-side .deliveryStationNumber.active-delivery{background-color:#91919133;color:#6c6c6c}.incomplete-table-container .incomplete-table-holder.stops .stops-side .deliveryStationNumber.pending-delivery{background-color:#91919133;color:#ff7043}.incomplete-table-container .incomplete-table-holder.no-active-load{padding:6px;font-size:11px;line-height:14px;color:#919191;opacity:1;transition:opacity .2s ease-in,color .2s ease-in}.incomplete-table-container .incomplete-table-holder.no-active-load::-moz-selection{color:#2f2f2f;background:#2f2f2f33}.incomplete-table-container .incomplete-table-holder.no-active-load::selection{color:#2f2f2f;background:#2f2f2f33}.incomplete-table-container:hover .pickup-delivery-time{display:flex!important}.incomplete-table-container:hover .no-active-load{color:#424242}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i3.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:
|
|
20063
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: PickupDeliveryBlockComponent, isStandalone: true, selector: "app-ca-pickup-delivery-block", inputs: { columnWidth: "columnWidth", searchStrings: "searchStrings", loads: "loads", dispatchResponse: "dispatchResponse", isHoveringRow: "isHoveringRow", isDisabled: "isDisabled" }, outputs: { dropdownMenuAction: "dropdownMenuAction" }, ngImport: i0, template: "<div\n class=\"incomplete-table-container prevent-text-selection\"\n [ngStyle]=\"{\n width: _columnWidth + 'px',\n }\"\n>\n @if (dispatchResponse?.activeLoad) {\n <ng-container\n *ngTemplateOutlet=\"\n loadDetailsTemplate;\n context: { load: dispatchResponse?.activeLoad }\n \"\n ></ng-container>\n } @else {\n <div\n class=\"incomplete-table-holder no-active-load d-flex align-items-center ca-font-medium\"\n [class.pe-none]=\"isDisabled\"\n #t2=\"ngbPopover\"\n [ngClass]=\"{\n 'opacity-0': !isHoveringRow,\n }\"\n [ngbPopover]=\"loadDetailsPopoverTemplate\"\n popoverClass=\"pickup-delivery-popover\"\n triggers=\"manual\"\n [autoClose]=\"'outside'\"\n container=\"body\"\n [placement]=\"['bottom-start', 'top-start']\"\n (click)=\"openPopover(t2)\"\n (hidden)=\"closePopover(t2)\"\n >\n NO ACTIVE OR PENDING LOAD\n </div>\n }\n\n <ng-template #loadDetailsTemplate let-load=\"load\">\n <div\n class=\"incomplete-table-holder stops d-flex justify-content-between align-items-center\"\n [class.pe-none]=\"isDisabled\"\n #t2=\"ngbPopover\"\n [ngbPopover]=\"loadDetailsPopoverTemplate\"\n popoverClass=\"pickup-delivery-popover\"\n triggers=\"manual\"\n [autoClose]=\"'outside'\"\n container=\"body\"\n [placement]=\"['bottom-start', 'top-start']\"\n (click)=\"openPopover(t2)\"\n (hidden)=\"closePopover(t2)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n stopsSideTemplate;\n context: {\n side: 'left',\n stopOrder: load?.pickupCount,\n city: load?.pickup?.shipper?.address?.city,\n state: load?.pickup?.shipper?.address?.stateShortName,\n date: load?.pickup?.dateFrom,\n status: load?.statusType?.name,\n type: 'pickup',\n loadType: load?.type?.name,\n }\n \"\n ></ng-container>\n\n <ng-container\n *ngTemplateOutlet=\"\n stopsSideTemplate;\n context: {\n side: 'right',\n stopOrder: load?.deliveryCount,\n city: load?.delivery?.shipper?.address?.city,\n state: load?.delivery?.shipper?.address?.stateShortName,\n date: load?.delivery?.dateFrom,\n status: load?.statusType?.name,\n type: 'delivery',\n loadType: load?.type?.name,\n }\n \"\n ></ng-container>\n </div>\n </ng-template>\n <ng-template\n #stopsSideTemplate\n let-side=\"side\"\n let-stopOrder=\"stopOrder\"\n let-city=\"city\"\n let-state=\"state\"\n let-date=\"date\"\n let-status=\"status\"\n let-type=\"type\"\n let-loadType=\"loadType\"\n >\n <div\n class=\"stops-side d-flex align-items-center flex-basis-50 {{\n side\n }}\"\n >\n @let isSplitLoad = loadType === 'Split';\n\n <span\n class=\"d-flex justify-content-center align-items-center {{\n type\n }}StationNumber ca-font-bold\"\n [ngClass]=\"{\n 'active-pickup': status === 'Active' && type === 'pickup',\n 'pending-pickup': status === 'Pending' && type === 'pickup',\n 'active-delivery':\n status === 'Active' && type === 'delivery',\n 'pending-delivery':\n status === 'Pending' && type === 'delivery',\n 'split-pickup': isSplitLoad,\n }\"\n >\n @let pickupStopNumber = isSplitLoad ? 'S' : stopOrder;\n\n {{ pickupStopNumber }}\n </span>\n <div class=\"stop-info-container d-flex flex-column\">\n @let formattedCityState = city | formatCityStatePipe: state;\n\n <span\n class=\"location ca-font-semi-bold d-block text-truncate\"\n [innerHTML]=\"\n formattedCityState\n | tableHighlightSearchText: _searchStrings\n \"\n >\n </span>\n\n <div class=\"date-time-holder d-flex\">\n @let formattedDate = date | dateFromStringPipe;\n\n <span\n class=\"date ca-font-regular d-flex justify-content-start m-r-4\"\n [innerHTML]=\"\n formattedDate\n | tableHighlightSearchText: _searchStrings\n \"\n >\n </span>\n <span\n class=\"date pickup-delivery-time d-none ca-font-regular text-truncate\"\n >{{ date | dateFromStringPipe: 'time' }}</span\n >\n </div>\n </div>\n </div>\n </ng-template>\n\n <ng-template #loadDetailsPopoverTemplate>\n <app-ca-load\n [focusedTab]=\"loadType\"\n [loads]=\"loads\"\n [columnWidth]=\"_columnWidth\"\n (dropdownMenuAction)=\"onDropdownMenuAction($event)\"\n ></app-ca-load>\n </ng-template>\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}}.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}.incomplete-table-container{border-radius:3px;font-family:Montserrat,sans-serif}.incomplete-table-container .incomplete-table-holder{height:26px;border-radius:2px;border:none;cursor:pointer;padding:0}.incomplete-table-container .incomplete-table-holder.stops{width:100%;padding:4px;font-size:14px}.incomplete-table-container .incomplete-table-holder.stops .stops-side{gap:4px;height:26px;min-width:0}.incomplete-table-container .incomplete-table-holder.stops .stops-side .stop-info-container{width:calc(100% - 22px);min-width:0}.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;color:#424242;padding-left:0!important}.incomplete-table-container .incomplete-table-holder.stops .stops-side .date{color:#919191!important}.incomplete-table-container .incomplete-table-holder.stops .stops-side .location{width:90%;min-width:0}.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:#fff;border-radius:1px}.incomplete-table-container .incomplete-table-holder.stops .stops-side .pickupStationNumber.active-pickup{background-color:#91919133;color:#6c6c6c}.incomplete-table-container .incomplete-table-holder.stops .stops-side .pickupStationNumber.pending-pickup{background-color:#91919133;color:#259f94}.incomplete-table-container .incomplete-table-holder.stops .stops-side .pickupStationNumber.split-pickup{background-color:#f89b2e33;color:#f89b2e}.incomplete-table-container .incomplete-table-holder.stops .stops-side .deliveryStationNumber.active-delivery{background-color:#91919133;color:#6c6c6c}.incomplete-table-container .incomplete-table-holder.stops .stops-side .deliveryStationNumber.pending-delivery{background-color:#91919133;color:#ff7043}.incomplete-table-container .incomplete-table-holder.no-active-load{padding:6px;font-size:11px;line-height:14px;color:#919191;opacity:1;transition:opacity .2s ease-in,color .2s ease-in}.incomplete-table-container .incomplete-table-holder.no-active-load::-moz-selection{color:#2f2f2f;background:#2f2f2f33}.incomplete-table-container .incomplete-table-holder.no-active-load::selection{color:#2f2f2f;background:#2f2f2f33}.incomplete-table-container:hover .pickup-delivery-time{display:flex!important}.incomplete-table-container:hover .no-active-load{color:#424242}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i3.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:
|
|
20071
20064
|
// Components
|
|
20072
20065
|
LoadComponent, selector: "app-ca-load", inputs: ["focusedTab", "loads", "columnWidth"], outputs: ["dropdownMenuAction"] }, { kind: "pipe", type:
|
|
20073
20066
|
// Pipes
|
|
@@ -20084,7 +20077,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
20084
20077
|
DateFromStringPipe,
|
|
20085
20078
|
FormatCityStatePipe,
|
|
20086
20079
|
TableHighlightSearchTextPipe,
|
|
20087
|
-
], encapsulation: ViewEncapsulation.None, template: "<div\n class=\"incomplete-table-container prevent-text-selection\"\n [ngStyle]=\"{\n width: _columnWidth + 'px',\n }\"\n>\n @if (dispatchResponse?.activeLoad) {\n <ng-container\n *ngTemplateOutlet=\"\n loadDetailsTemplate;\n context: { load: dispatchResponse?.activeLoad }\n \"\n ></ng-container>\n } @else {\n <div\n class=\"incomplete-table-holder no-active-load d-flex align-items-center ca-font-medium\"\n [class.pe-none]=\"isDisabled\"\n #t2=\"ngbPopover\"\n [ngClass]=\"{\n 'opacity-0': !isHoveringRow,\n }\"\n [ngbPopover]=\"loadDetailsPopoverTemplate\"\n popoverClass=\"pickup-delivery-popover\"\n triggers=\"manual\"\n [autoClose]=\"'outside'\"\n container=\"body\"\n [placement]=\"['bottom-start', 'top-start']\"\n (click)=\"openPopover(t2)\"\n (hidden)=\"closePopover(t2)\"\n >\n NO ACTIVE OR PENDING LOAD\n </div>\n }\n\n <ng-template #loadDetailsTemplate let-load=\"load\">\n <div\n class=\"incomplete-table-holder stops d-flex justify-content-between align-items-center\"\n [class.pe-none]=\"isDisabled\"\n #t2=\"ngbPopover\"\n [ngbPopover]=\"loadDetailsPopoverTemplate\"\n popoverClass=\"pickup-delivery-popover\"\n triggers=\"manual\"\n [autoClose]=\"'outside'\"\n container=\"body\"\n [placement]=\"['bottom-start', 'top-start']\"\n (click)=\"openPopover(t2)\"\n (hidden)=\"closePopover(t2)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n stopsSideTemplate;\n context: {\n side: 'left',\n stopOrder: load?.pickupCount,\n city: load?.pickup?.shipper?.address?.city,\n state: load?.pickup?.shipper?.address?.stateShortName,\n date: load?.pickup?.dateFrom,\n status: load?.statusType?.name,\n type: 'pickup',\n loadType: load?.type?.name,\n }\n \"\n ></ng-container>\n\n <ng-container\n *ngTemplateOutlet=\"\n stopsSideTemplate;\n context: {\n side: 'right',\n stopOrder: load?.deliveryCount,\n city: load?.delivery?.shipper?.address?.city,\n state: load?.delivery?.shipper?.address?.stateShortName,\n date: load?.delivery?.dateFrom,\n status: load?.statusType?.name,\n type: 'delivery',\n loadType: load?.type?.name,\n }\n \"\n ></ng-container>\n </div>\n </ng-template>\n <ng-template\n #stopsSideTemplate\n let-side=\"side\"\n let-stopOrder=\"stopOrder\"\n let-city=\"city\"\n let-state=\"state\"\n let-date=\"date\"\n let-status=\"status\"\n let-type=\"type\"\n let-loadType=\"loadType\"\n >\n <div\n class=\"stops-side d-flex align-items-center flex-basis-50 {{\n side\n }}\"\n >\n @let isSplitLoad = loadType === 'Split';\n\n <span\n class=\"d-flex justify-content-center align-items-center {{\n type\n }}StationNumber ca-font-bold\"\n [ngClass]=\"{\n 'active-pickup': status === 'Active' && type === 'pickup',\n 'pending-pickup': status === 'Pending' && type === 'pickup',\n 'active-delivery':\n status === 'Active' && type === 'delivery',\n 'pending-delivery':\n status === 'Pending' && type === 'delivery',\n 'split-pickup': isSplitLoad,\n }\"\n >\n @let pickupStopNumber = isSplitLoad ? 'S' : stopOrder;\n\n {{ pickupStopNumber }}\n </span>\n <div class=\"stop-info-container d-flex flex-column\">\n @let formattedCityState = city | formatCityStatePipe: state;\n\n <span\n class=\"location ca-font-semi-bold d-block text-truncate\"\n [innerHTML]=\"\n formattedCityState\n | tableHighlightSearchText: _searchStrings\n \"\n >\n </span>\n\n <div class=\"date-time-holder d-flex\">\n @let formattedDate = date | dateFromStringPipe;\n\n <span\n class=\"date ca-font-regular d-flex justify-content-start m-r-4\"\n [innerHTML]=\"\n formattedDate\n | tableHighlightSearchText: _searchStrings\n \"\n >\n </span>\n <span\n class=\"date pickup-delivery-time d-none ca-font-regular text-truncate\"\n >{{ date | dateFromStringPipe: 'time' }}</span\n >\n </div>\n </div>\n </div>\n </ng-template>\n\n <ng-template #loadDetailsPopoverTemplate>\n <app-ca-load\n [focusedTab]=\"loadType\"\n [loads]=\"loads\"\n [columnWidth]=\"_columnWidth\"\n (dropdownMenuAction)=\"onDropdownMenuAction($event)\"\n ></app-ca-load>\n </ng-template>\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}}.incomplete-table-container{border-radius:3px;font-family:Montserrat,sans-serif}.incomplete-table-container .incomplete-table-holder{height:26px;border-radius:2px;border:none;cursor:pointer;padding:0}.incomplete-table-container .incomplete-table-holder.stops{width:100%;padding:4px;font-size:14px}.incomplete-table-container .incomplete-table-holder.stops .stops-side{gap:4px;height:26px;min-width:0}.incomplete-table-container .incomplete-table-holder.stops .stops-side .stop-info-container{width:calc(100% - 22px);min-width:0}.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;color:#424242;padding-left:0!important}.incomplete-table-container .incomplete-table-holder.stops .stops-side .date{color:#919191!important}.incomplete-table-container .incomplete-table-holder.stops .stops-side .location{width:90%;min-width:0}.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:#fff;border-radius:1px}.incomplete-table-container .incomplete-table-holder.stops .stops-side .pickupStationNumber.active-pickup{background-color:#91919133;color:#6c6c6c}.incomplete-table-container .incomplete-table-holder.stops .stops-side .pickupStationNumber.pending-pickup{background-color:#91919133;color:#259f94}.incomplete-table-container .incomplete-table-holder.stops .stops-side .pickupStationNumber.split-pickup{background-color:#f89b2e33;color:#f89b2e}.incomplete-table-container .incomplete-table-holder.stops .stops-side .deliveryStationNumber.active-delivery{background-color:#91919133;color:#6c6c6c}.incomplete-table-container .incomplete-table-holder.stops .stops-side .deliveryStationNumber.pending-delivery{background-color:#91919133;color:#ff7043}.incomplete-table-container .incomplete-table-holder.no-active-load{padding:6px;font-size:11px;line-height:14px;color:#919191;opacity:1;transition:opacity .2s ease-in,color .2s ease-in}.incomplete-table-container .incomplete-table-holder.no-active-load::-moz-selection{color:#2f2f2f;background:#2f2f2f33}.incomplete-table-container .incomplete-table-holder.no-active-load::selection{color:#2f2f2f;background:#2f2f2f33}.incomplete-table-container:hover .pickup-delivery-time{display:flex!important}.incomplete-table-container:hover .no-active-load{color:#424242}\n"] }]
|
|
20080
|
+
], encapsulation: ViewEncapsulation.None, template: "<div\n class=\"incomplete-table-container prevent-text-selection\"\n [ngStyle]=\"{\n width: _columnWidth + 'px',\n }\"\n>\n @if (dispatchResponse?.activeLoad) {\n <ng-container\n *ngTemplateOutlet=\"\n loadDetailsTemplate;\n context: { load: dispatchResponse?.activeLoad }\n \"\n ></ng-container>\n } @else {\n <div\n class=\"incomplete-table-holder no-active-load d-flex align-items-center ca-font-medium\"\n [class.pe-none]=\"isDisabled\"\n #t2=\"ngbPopover\"\n [ngClass]=\"{\n 'opacity-0': !isHoveringRow,\n }\"\n [ngbPopover]=\"loadDetailsPopoverTemplate\"\n popoverClass=\"pickup-delivery-popover\"\n triggers=\"manual\"\n [autoClose]=\"'outside'\"\n container=\"body\"\n [placement]=\"['bottom-start', 'top-start']\"\n (click)=\"openPopover(t2)\"\n (hidden)=\"closePopover(t2)\"\n >\n NO ACTIVE OR PENDING LOAD\n </div>\n }\n\n <ng-template #loadDetailsTemplate let-load=\"load\">\n <div\n class=\"incomplete-table-holder stops d-flex justify-content-between align-items-center\"\n [class.pe-none]=\"isDisabled\"\n #t2=\"ngbPopover\"\n [ngbPopover]=\"loadDetailsPopoverTemplate\"\n popoverClass=\"pickup-delivery-popover\"\n triggers=\"manual\"\n [autoClose]=\"'outside'\"\n container=\"body\"\n [placement]=\"['bottom-start', 'top-start']\"\n (click)=\"openPopover(t2)\"\n (hidden)=\"closePopover(t2)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n stopsSideTemplate;\n context: {\n side: 'left',\n stopOrder: load?.pickupCount,\n city: load?.pickup?.shipper?.address?.city,\n state: load?.pickup?.shipper?.address?.stateShortName,\n date: load?.pickup?.dateFrom,\n status: load?.statusType?.name,\n type: 'pickup',\n loadType: load?.type?.name,\n }\n \"\n ></ng-container>\n\n <ng-container\n *ngTemplateOutlet=\"\n stopsSideTemplate;\n context: {\n side: 'right',\n stopOrder: load?.deliveryCount,\n city: load?.delivery?.shipper?.address?.city,\n state: load?.delivery?.shipper?.address?.stateShortName,\n date: load?.delivery?.dateFrom,\n status: load?.statusType?.name,\n type: 'delivery',\n loadType: load?.type?.name,\n }\n \"\n ></ng-container>\n </div>\n </ng-template>\n <ng-template\n #stopsSideTemplate\n let-side=\"side\"\n let-stopOrder=\"stopOrder\"\n let-city=\"city\"\n let-state=\"state\"\n let-date=\"date\"\n let-status=\"status\"\n let-type=\"type\"\n let-loadType=\"loadType\"\n >\n <div\n class=\"stops-side d-flex align-items-center flex-basis-50 {{\n side\n }}\"\n >\n @let isSplitLoad = loadType === 'Split';\n\n <span\n class=\"d-flex justify-content-center align-items-center {{\n type\n }}StationNumber ca-font-bold\"\n [ngClass]=\"{\n 'active-pickup': status === 'Active' && type === 'pickup',\n 'pending-pickup': status === 'Pending' && type === 'pickup',\n 'active-delivery':\n status === 'Active' && type === 'delivery',\n 'pending-delivery':\n status === 'Pending' && type === 'delivery',\n 'split-pickup': isSplitLoad,\n }\"\n >\n @let pickupStopNumber = isSplitLoad ? 'S' : stopOrder;\n\n {{ pickupStopNumber }}\n </span>\n <div class=\"stop-info-container d-flex flex-column\">\n @let formattedCityState = city | formatCityStatePipe: state;\n\n <span\n class=\"location ca-font-semi-bold d-block text-truncate\"\n [innerHTML]=\"\n formattedCityState\n | tableHighlightSearchText: _searchStrings\n \"\n >\n </span>\n\n <div class=\"date-time-holder d-flex\">\n @let formattedDate = date | dateFromStringPipe;\n\n <span\n class=\"date ca-font-regular d-flex justify-content-start m-r-4\"\n [innerHTML]=\"\n formattedDate\n | tableHighlightSearchText: _searchStrings\n \"\n >\n </span>\n <span\n class=\"date pickup-delivery-time d-none ca-font-regular text-truncate\"\n >{{ date | dateFromStringPipe: 'time' }}</span\n >\n </div>\n </div>\n </div>\n </ng-template>\n\n <ng-template #loadDetailsPopoverTemplate>\n <app-ca-load\n [focusedTab]=\"loadType\"\n [loads]=\"loads\"\n [columnWidth]=\"_columnWidth\"\n (dropdownMenuAction)=\"onDropdownMenuAction($event)\"\n ></app-ca-load>\n </ng-template>\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}}.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}.incomplete-table-container{border-radius:3px;font-family:Montserrat,sans-serif}.incomplete-table-container .incomplete-table-holder{height:26px;border-radius:2px;border:none;cursor:pointer;padding:0}.incomplete-table-container .incomplete-table-holder.stops{width:100%;padding:4px;font-size:14px}.incomplete-table-container .incomplete-table-holder.stops .stops-side{gap:4px;height:26px;min-width:0}.incomplete-table-container .incomplete-table-holder.stops .stops-side .stop-info-container{width:calc(100% - 22px);min-width:0}.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;color:#424242;padding-left:0!important}.incomplete-table-container .incomplete-table-holder.stops .stops-side .date{color:#919191!important}.incomplete-table-container .incomplete-table-holder.stops .stops-side .location{width:90%;min-width:0}.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:#fff;border-radius:1px}.incomplete-table-container .incomplete-table-holder.stops .stops-side .pickupStationNumber.active-pickup{background-color:#91919133;color:#6c6c6c}.incomplete-table-container .incomplete-table-holder.stops .stops-side .pickupStationNumber.pending-pickup{background-color:#91919133;color:#259f94}.incomplete-table-container .incomplete-table-holder.stops .stops-side .pickupStationNumber.split-pickup{background-color:#f89b2e33;color:#f89b2e}.incomplete-table-container .incomplete-table-holder.stops .stops-side .deliveryStationNumber.active-delivery{background-color:#91919133;color:#6c6c6c}.incomplete-table-container .incomplete-table-holder.stops .stops-side .deliveryStationNumber.pending-delivery{background-color:#91919133;color:#ff7043}.incomplete-table-container .incomplete-table-holder.no-active-load{padding:6px;font-size:11px;line-height:14px;color:#919191;opacity:1;transition:opacity .2s ease-in,color .2s ease-in}.incomplete-table-container .incomplete-table-holder.no-active-load::-moz-selection{color:#2f2f2f;background:#2f2f2f33}.incomplete-table-container .incomplete-table-holder.no-active-load::selection{color:#2f2f2f;background:#2f2f2f33}.incomplete-table-container:hover .pickup-delivery-time{display:flex!important}.incomplete-table-container:hover .no-active-load{color:#424242}\n"] }]
|
|
20088
20081
|
}], ctorParameters: () => [], propDecorators: { columnWidth: [{
|
|
20089
20082
|
type: Input
|
|
20090
20083
|
}], searchStrings: [{
|
|
@@ -20921,7 +20914,7 @@ class CaInputNoteComponent {
|
|
|
20921
20914
|
useExisting: forwardRef(() => CaInputNoteComponent),
|
|
20922
20915
|
multi: true,
|
|
20923
20916
|
},
|
|
20924
|
-
], viewQueries: [{ propertyName: "noteRef", first: true, predicate: ["main_editor"], descendants: true, static: true }, { propertyName: "noteContainer", first: true, predicate: ["noteContainer"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"note-container {{ customClass }}\">\n <!-- Header -->\n <div\n class=\"note-header d-flex align-items-center\"\n [class.pointer]=\"isVisibleArrow\"\n >\n <div\n class=\"d-flex align-items-center note-label\"\n [ngStyle]=\"{ color: _isVisibleNote ? '#424242' : '#6C6C6C' }\"\n (click)=\"isVisibleArrow ? openNote() : ''\"\n >\n {{ noteLabel }}\n </div>\n\n <div\n class=\"note_tools_container\"\n (click)=\"isVisibleArrow && !_isVisibleNote ? openNote() : ''\"\n >\n <app-ca-note-container\n #noteContainer\n [isExpanded]=\"_isVisibleNote && _isVisibleNote != 'null'\"\n [range]=\"range\"\n [selectionTaken]=\"selectionTaken\"\n [value]=\"value\"\n [isPopoverNote]=\"false\"\n [selectedEditor]=\"noteRef?.nativeElement\"\n [isVisibleArrow]=\"isVisibleArrow\"\n (stopBlurRemoveTimeout)=\"stopBlurRemoveTimeout()\"\n ></app-ca-note-container>\n </div>\n\n @if (isVisibleArrow) {\n <div class=\"p-4\">\n <svg-icon\n class=\"note-arrow d-flex justify-content-center align-items-center\"\n [ngClass]=\"{\n rotate: _isVisibleNote && _isVisibleNote != 'null',\n }\"\n [style.width.px]=\"18\"\n [style.height.px]=\"18\"\n [src]=\"\n hasDefArrow\n ? getSvgPath('downArrow')\n : getSvgPath('upArrow')\n \"\n (click)=\"openNote()\"\n ></svg-icon>\n </div>\n }\n </div>\n\n <!-- Body -->\n\n <div\n class=\"note-body\"\n [ngClass]=\"noActive\"\n #noteBody\n [@showHideCardBody]=\"{\n value: _isVisibleNote.toString(),\n params: {\n marginTop: '0px',\n marginBottom: '0px',\n },\n }\"\n >\n <div\n #main_editor\n id=\"main_editor\"\n class=\"note-textarea\"\n [class.details_textarea]=\"noteType == 'details-card'\"\n contenteditable=\"true\"\n [attr.data-text]=\"placeholder\"\n spellcheck=\"false\"\n (input)=\"changeValue($event)\"\n (focus)=\"checkFocus()\"\n (blur)=\"prepareForTextRange()\"\n [innerHTML]=\"showNote | safeHtml\"\n (paste)=\"onPaste($event)\"\n ></div>\n\n <!-- Spinner -->\n @if (isSavingNote && noteType == 'details-card') {\n <div class=\"spinner d-flex\">\n <app-ca-spinner\n [size]=\"'small'\"\n [color]=\"'blueDark'\"\n ></app-ca-spinner>\n </div>\n }\n </div>\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}}.note-container{display:block}.note-container .note-header{line-height:18px;height:26px;font-family:Montserrat,sans-serif}.note-container .note-header.pointer{cursor:pointer}.note-container .note-header .note-label{font-weight:800;font-size:14px;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.note-container .note-header .note_upper_hold{width:18px}.note-container .note-header .note_upper_hold .note_tools_container{margin-right:7px}.note-container .note-header .note-arrow{transition:all .3s ease-in-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative}.note-container .note-header .note-arrow svg-icon svg{display:flex}.note-container .note-header .rotate{transform:rotate(180deg);transition:all .3s ease-in-out}@keyframes growDown{0%{max-height:0px;overflow:hidden}to{max-height:600px;overflow:auto}}.note-container .note-body{position:relative;overflow:hidden;padding-right:6px;cursor:text;max-width:607px}.note-container .note-body.innactive{height:0px!important;overflow:hidden!important;opacity:0!important;margin-top:0!important;margin-bottom:0!important}.note-container .note-body.active{overflow:visible!important;opacity:1!important}.note-container .note-body .note-textarea{overflow:auto;line-height:18px;min-height:15px;padding-bottom:12px;padding-top:5px;max-height:75px;font-size:14px;width:100%;resize:none;color:#424242;border:none;box-shadow:none;outline:none;scrollbar-width:none!important}.note-container .note-body .note-textarea.details_textarea{padding-bottom:7px;padding-right:20px}.note-container .note-body .note-textarea::-webkit-scrollbar{width:3px}.note-container .note-body .note-textarea::-webkit-scrollbar-thumb{background-color:transparent;border:6px solid #e5e5e5;border-radius:1px}.note-container .note-body .note-textarea::-webkit-scrollbar-track{padding:0;position:relative;right:0;top:0;background:transparent}.note-container .note-body .note-textarea::-webkit-input-placeholder{color:#dadada!important}.note-container .note-body .note-textarea::-moz-placeholder{color:#dadada!important}.note-container .note-body .note-textarea:-ms-input-placeholder{color:#dadada!important}.note-container .note-body .note-textarea::-ms-input-placeholder{color:#dadada!important}.note-container .note-body .note-textarea::placeholder{color:#dadada!important}.note-container .note-body .note-textarea:empty:before{content:attr(placeholder);color:#aaa}.note-container .note-body [contentEditable=true]:empty:not(:focus):before{content:attr(data-text)}.note-container .note-body .spinner{position:absolute;bottom:1px;right:0}.note-container.note-small .note-header,.note-container.note-small .note-body{padding:0}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
20917
|
+
], viewQueries: [{ propertyName: "noteRef", first: true, predicate: ["main_editor"], descendants: true, static: true }, { propertyName: "noteContainer", first: true, predicate: ["noteContainer"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"note-container {{ customClass }}\">\n <!-- Header -->\n <div\n class=\"note-header d-flex align-items-center\"\n [class.pointer]=\"isVisibleArrow\"\n >\n <div\n class=\"d-flex align-items-center note-label\"\n [ngStyle]=\"{ color: _isVisibleNote ? '#424242' : '#6C6C6C' }\"\n (click)=\"isVisibleArrow ? openNote() : ''\"\n >\n {{ noteLabel }}\n </div>\n\n <div\n class=\"note_tools_container\"\n (click)=\"isVisibleArrow && !_isVisibleNote ? openNote() : ''\"\n >\n <app-ca-note-container\n #noteContainer\n [isExpanded]=\"_isVisibleNote && _isVisibleNote != 'null'\"\n [range]=\"range\"\n [selectionTaken]=\"selectionTaken\"\n [value]=\"value\"\n [isPopoverNote]=\"false\"\n [selectedEditor]=\"noteRef?.nativeElement\"\n [isVisibleArrow]=\"isVisibleArrow\"\n (stopBlurRemoveTimeout)=\"stopBlurRemoveTimeout()\"\n ></app-ca-note-container>\n </div>\n\n @if (isVisibleArrow) {\n <div class=\"p-4\">\n <svg-icon\n class=\"note-arrow d-flex justify-content-center align-items-center\"\n [ngClass]=\"{\n rotate: _isVisibleNote && _isVisibleNote != 'null',\n }\"\n [style.width.px]=\"18\"\n [style.height.px]=\"18\"\n [src]=\"\n hasDefArrow\n ? getSvgPath('downArrow')\n : getSvgPath('upArrow')\n \"\n (click)=\"openNote()\"\n ></svg-icon>\n </div>\n }\n </div>\n\n <!-- Body -->\n\n <div\n class=\"note-body\"\n [ngClass]=\"noActive\"\n #noteBody\n [@showHideCardBody]=\"{\n value: _isVisibleNote.toString(),\n params: {\n marginTop: '0px',\n marginBottom: '0px',\n },\n }\"\n >\n <div\n #main_editor\n id=\"main_editor\"\n class=\"note-textarea\"\n [class.details_textarea]=\"noteType == 'details-card'\"\n contenteditable=\"true\"\n [attr.data-text]=\"placeholder\"\n spellcheck=\"false\"\n (input)=\"changeValue($event)\"\n (focus)=\"checkFocus()\"\n (blur)=\"prepareForTextRange()\"\n [innerHTML]=\"showNote | safeHtml\"\n (paste)=\"onPaste($event)\"\n ></div>\n\n <!-- Spinner -->\n @if (isSavingNote && noteType == 'details-card') {\n <div class=\"spinner d-flex\">\n <app-ca-spinner\n [size]=\"'small'\"\n [color]=\"'blueDark'\"\n ></app-ca-spinner>\n </div>\n }\n </div>\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}}.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}.note-container{display:block}.note-container .note-header{line-height:18px;height:26px;font-family:Montserrat,sans-serif}.note-container .note-header.pointer{cursor:pointer}.note-container .note-header .note-label{font-weight:800;font-size:14px;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.note-container .note-header .note_upper_hold{width:18px}.note-container .note-header .note_upper_hold .note_tools_container{margin-right:7px}.note-container .note-header .note-arrow{transition:all .3s ease-in-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative}.note-container .note-header .note-arrow svg-icon svg{display:flex}.note-container .note-header .rotate{transform:rotate(180deg);transition:all .3s ease-in-out}@keyframes growDown{0%{max-height:0px;overflow:hidden}to{max-height:600px;overflow:auto}}.note-container .note-body{position:relative;overflow:hidden;padding-right:6px;cursor:text;max-width:607px}.note-container .note-body.innactive{height:0px!important;overflow:hidden!important;opacity:0!important;margin-top:0!important;margin-bottom:0!important}.note-container .note-body.active{overflow:visible!important;opacity:1!important}.note-container .note-body .note-textarea{overflow:auto;line-height:18px;min-height:15px;padding-bottom:12px;padding-top:5px;max-height:75px;font-size:14px;width:100%;resize:none;color:#424242;border:none;box-shadow:none;outline:none;scrollbar-width:none!important}.note-container .note-body .note-textarea.details_textarea{padding-bottom:7px;padding-right:20px}.note-container .note-body .note-textarea::-webkit-scrollbar{width:3px}.note-container .note-body .note-textarea::-webkit-scrollbar-thumb{background-color:transparent;border:6px solid #e5e5e5;border-radius:1px}.note-container .note-body .note-textarea::-webkit-scrollbar-track{padding:0;position:relative;right:0;top:0;background:transparent}.note-container .note-body .note-textarea::-webkit-input-placeholder{color:#dadada!important}.note-container .note-body .note-textarea::-moz-placeholder{color:#dadada!important}.note-container .note-body .note-textarea:-ms-input-placeholder{color:#dadada!important}.note-container .note-body .note-textarea::-ms-input-placeholder{color:#dadada!important}.note-container .note-body .note-textarea::placeholder{color:#dadada!important}.note-container .note-body .note-textarea:empty:before{content:attr(placeholder);color:#aaa}.note-container .note-body [contentEditable=true]:empty:not(:focus):before{content:attr(data-text)}.note-container .note-body .spinner{position:absolute;bottom:1px;right:0}.note-container.note-small .note-header,.note-container.note-small .note-body{padding:0}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
20925
20918
|
// Module
|
|
20926
20919
|
CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NgbModule }, { 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:
|
|
20927
20920
|
// Component
|
|
@@ -20949,7 +20942,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
20949
20942
|
useExisting: forwardRef(() => CaInputNoteComponent),
|
|
20950
20943
|
multi: true,
|
|
20951
20944
|
},
|
|
20952
|
-
], template: "<div class=\"note-container {{ customClass }}\">\n <!-- Header -->\n <div\n class=\"note-header d-flex align-items-center\"\n [class.pointer]=\"isVisibleArrow\"\n >\n <div\n class=\"d-flex align-items-center note-label\"\n [ngStyle]=\"{ color: _isVisibleNote ? '#424242' : '#6C6C6C' }\"\n (click)=\"isVisibleArrow ? openNote() : ''\"\n >\n {{ noteLabel }}\n </div>\n\n <div\n class=\"note_tools_container\"\n (click)=\"isVisibleArrow && !_isVisibleNote ? openNote() : ''\"\n >\n <app-ca-note-container\n #noteContainer\n [isExpanded]=\"_isVisibleNote && _isVisibleNote != 'null'\"\n [range]=\"range\"\n [selectionTaken]=\"selectionTaken\"\n [value]=\"value\"\n [isPopoverNote]=\"false\"\n [selectedEditor]=\"noteRef?.nativeElement\"\n [isVisibleArrow]=\"isVisibleArrow\"\n (stopBlurRemoveTimeout)=\"stopBlurRemoveTimeout()\"\n ></app-ca-note-container>\n </div>\n\n @if (isVisibleArrow) {\n <div class=\"p-4\">\n <svg-icon\n class=\"note-arrow d-flex justify-content-center align-items-center\"\n [ngClass]=\"{\n rotate: _isVisibleNote && _isVisibleNote != 'null',\n }\"\n [style.width.px]=\"18\"\n [style.height.px]=\"18\"\n [src]=\"\n hasDefArrow\n ? getSvgPath('downArrow')\n : getSvgPath('upArrow')\n \"\n (click)=\"openNote()\"\n ></svg-icon>\n </div>\n }\n </div>\n\n <!-- Body -->\n\n <div\n class=\"note-body\"\n [ngClass]=\"noActive\"\n #noteBody\n [@showHideCardBody]=\"{\n value: _isVisibleNote.toString(),\n params: {\n marginTop: '0px',\n marginBottom: '0px',\n },\n }\"\n >\n <div\n #main_editor\n id=\"main_editor\"\n class=\"note-textarea\"\n [class.details_textarea]=\"noteType == 'details-card'\"\n contenteditable=\"true\"\n [attr.data-text]=\"placeholder\"\n spellcheck=\"false\"\n (input)=\"changeValue($event)\"\n (focus)=\"checkFocus()\"\n (blur)=\"prepareForTextRange()\"\n [innerHTML]=\"showNote | safeHtml\"\n (paste)=\"onPaste($event)\"\n ></div>\n\n <!-- Spinner -->\n @if (isSavingNote && noteType == 'details-card') {\n <div class=\"spinner d-flex\">\n <app-ca-spinner\n [size]=\"'small'\"\n [color]=\"'blueDark'\"\n ></app-ca-spinner>\n </div>\n }\n </div>\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}}.note-container{display:block}.note-container .note-header{line-height:18px;height:26px;font-family:Montserrat,sans-serif}.note-container .note-header.pointer{cursor:pointer}.note-container .note-header .note-label{font-weight:800;font-size:14px;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.note-container .note-header .note_upper_hold{width:18px}.note-container .note-header .note_upper_hold .note_tools_container{margin-right:7px}.note-container .note-header .note-arrow{transition:all .3s ease-in-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative}.note-container .note-header .note-arrow svg-icon svg{display:flex}.note-container .note-header .rotate{transform:rotate(180deg);transition:all .3s ease-in-out}@keyframes growDown{0%{max-height:0px;overflow:hidden}to{max-height:600px;overflow:auto}}.note-container .note-body{position:relative;overflow:hidden;padding-right:6px;cursor:text;max-width:607px}.note-container .note-body.innactive{height:0px!important;overflow:hidden!important;opacity:0!important;margin-top:0!important;margin-bottom:0!important}.note-container .note-body.active{overflow:visible!important;opacity:1!important}.note-container .note-body .note-textarea{overflow:auto;line-height:18px;min-height:15px;padding-bottom:12px;padding-top:5px;max-height:75px;font-size:14px;width:100%;resize:none;color:#424242;border:none;box-shadow:none;outline:none;scrollbar-width:none!important}.note-container .note-body .note-textarea.details_textarea{padding-bottom:7px;padding-right:20px}.note-container .note-body .note-textarea::-webkit-scrollbar{width:3px}.note-container .note-body .note-textarea::-webkit-scrollbar-thumb{background-color:transparent;border:6px solid #e5e5e5;border-radius:1px}.note-container .note-body .note-textarea::-webkit-scrollbar-track{padding:0;position:relative;right:0;top:0;background:transparent}.note-container .note-body .note-textarea::-webkit-input-placeholder{color:#dadada!important}.note-container .note-body .note-textarea::-moz-placeholder{color:#dadada!important}.note-container .note-body .note-textarea:-ms-input-placeholder{color:#dadada!important}.note-container .note-body .note-textarea::-ms-input-placeholder{color:#dadada!important}.note-container .note-body .note-textarea::placeholder{color:#dadada!important}.note-container .note-body .note-textarea:empty:before{content:attr(placeholder);color:#aaa}.note-container .note-body [contentEditable=true]:empty:not(:focus):before{content:attr(data-text)}.note-container .note-body .spinner{position:absolute;bottom:1px;right:0}.note-container.note-small .note-header,.note-container.note-small .note-body{padding:0}\n"] }]
|
|
20945
|
+
], template: "<div class=\"note-container {{ customClass }}\">\n <!-- Header -->\n <div\n class=\"note-header d-flex align-items-center\"\n [class.pointer]=\"isVisibleArrow\"\n >\n <div\n class=\"d-flex align-items-center note-label\"\n [ngStyle]=\"{ color: _isVisibleNote ? '#424242' : '#6C6C6C' }\"\n (click)=\"isVisibleArrow ? openNote() : ''\"\n >\n {{ noteLabel }}\n </div>\n\n <div\n class=\"note_tools_container\"\n (click)=\"isVisibleArrow && !_isVisibleNote ? openNote() : ''\"\n >\n <app-ca-note-container\n #noteContainer\n [isExpanded]=\"_isVisibleNote && _isVisibleNote != 'null'\"\n [range]=\"range\"\n [selectionTaken]=\"selectionTaken\"\n [value]=\"value\"\n [isPopoverNote]=\"false\"\n [selectedEditor]=\"noteRef?.nativeElement\"\n [isVisibleArrow]=\"isVisibleArrow\"\n (stopBlurRemoveTimeout)=\"stopBlurRemoveTimeout()\"\n ></app-ca-note-container>\n </div>\n\n @if (isVisibleArrow) {\n <div class=\"p-4\">\n <svg-icon\n class=\"note-arrow d-flex justify-content-center align-items-center\"\n [ngClass]=\"{\n rotate: _isVisibleNote && _isVisibleNote != 'null',\n }\"\n [style.width.px]=\"18\"\n [style.height.px]=\"18\"\n [src]=\"\n hasDefArrow\n ? getSvgPath('downArrow')\n : getSvgPath('upArrow')\n \"\n (click)=\"openNote()\"\n ></svg-icon>\n </div>\n }\n </div>\n\n <!-- Body -->\n\n <div\n class=\"note-body\"\n [ngClass]=\"noActive\"\n #noteBody\n [@showHideCardBody]=\"{\n value: _isVisibleNote.toString(),\n params: {\n marginTop: '0px',\n marginBottom: '0px',\n },\n }\"\n >\n <div\n #main_editor\n id=\"main_editor\"\n class=\"note-textarea\"\n [class.details_textarea]=\"noteType == 'details-card'\"\n contenteditable=\"true\"\n [attr.data-text]=\"placeholder\"\n spellcheck=\"false\"\n (input)=\"changeValue($event)\"\n (focus)=\"checkFocus()\"\n (blur)=\"prepareForTextRange()\"\n [innerHTML]=\"showNote | safeHtml\"\n (paste)=\"onPaste($event)\"\n ></div>\n\n <!-- Spinner -->\n @if (isSavingNote && noteType == 'details-card') {\n <div class=\"spinner d-flex\">\n <app-ca-spinner\n [size]=\"'small'\"\n [color]=\"'blueDark'\"\n ></app-ca-spinner>\n </div>\n }\n </div>\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}}.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}.note-container{display:block}.note-container .note-header{line-height:18px;height:26px;font-family:Montserrat,sans-serif}.note-container .note-header.pointer{cursor:pointer}.note-container .note-header .note-label{font-weight:800;font-size:14px;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.note-container .note-header .note_upper_hold{width:18px}.note-container .note-header .note_upper_hold .note_tools_container{margin-right:7px}.note-container .note-header .note-arrow{transition:all .3s ease-in-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative}.note-container .note-header .note-arrow svg-icon svg{display:flex}.note-container .note-header .rotate{transform:rotate(180deg);transition:all .3s ease-in-out}@keyframes growDown{0%{max-height:0px;overflow:hidden}to{max-height:600px;overflow:auto}}.note-container .note-body{position:relative;overflow:hidden;padding-right:6px;cursor:text;max-width:607px}.note-container .note-body.innactive{height:0px!important;overflow:hidden!important;opacity:0!important;margin-top:0!important;margin-bottom:0!important}.note-container .note-body.active{overflow:visible!important;opacity:1!important}.note-container .note-body .note-textarea{overflow:auto;line-height:18px;min-height:15px;padding-bottom:12px;padding-top:5px;max-height:75px;font-size:14px;width:100%;resize:none;color:#424242;border:none;box-shadow:none;outline:none;scrollbar-width:none!important}.note-container .note-body .note-textarea.details_textarea{padding-bottom:7px;padding-right:20px}.note-container .note-body .note-textarea::-webkit-scrollbar{width:3px}.note-container .note-body .note-textarea::-webkit-scrollbar-thumb{background-color:transparent;border:6px solid #e5e5e5;border-radius:1px}.note-container .note-body .note-textarea::-webkit-scrollbar-track{padding:0;position:relative;right:0;top:0;background:transparent}.note-container .note-body .note-textarea::-webkit-input-placeholder{color:#dadada!important}.note-container .note-body .note-textarea::-moz-placeholder{color:#dadada!important}.note-container .note-body .note-textarea:-ms-input-placeholder{color:#dadada!important}.note-container .note-body .note-textarea::-ms-input-placeholder{color:#dadada!important}.note-container .note-body .note-textarea::placeholder{color:#dadada!important}.note-container .note-body .note-textarea:empty:before{content:attr(placeholder);color:#aaa}.note-container .note-body [contentEditable=true]:empty:not(:focus):before{content:attr(data-text)}.note-container .note-body .spinner{position:absolute;bottom:1px;right:0}.note-container.note-small .note-header,.note-container.note-small .note-body{padding:0}\n"] }]
|
|
20953
20946
|
}], ctorParameters: () => [], propDecorators: { noteRef: [{
|
|
20954
20947
|
type: ViewChild,
|
|
20955
20948
|
args: ['main_editor', { static: true }]
|
|
@@ -21131,7 +21124,6 @@ class CaPeriodContentPaymentComponent {
|
|
|
21131
21124
|
this.reorderedDataEmiter = new EventEmitter();
|
|
21132
21125
|
// dropdown
|
|
21133
21126
|
this.dropdownHoverIndex = -1;
|
|
21134
|
-
this.dropdownMenuActionType = '';
|
|
21135
21127
|
// icons
|
|
21136
21128
|
this.periodContentSvgRoutes = PeriodContentSvgRoutes;
|
|
21137
21129
|
this.titleColorClassMap = titleColorClassMap;
|
|
@@ -21172,11 +21164,10 @@ class CaPeriodContentPaymentComponent {
|
|
|
21172
21164
|
this.openAddNewModalEmiter.emit(this.title);
|
|
21173
21165
|
}
|
|
21174
21166
|
handleMenuOpen(event) {
|
|
21175
|
-
this.dropdownMenuActionType = event.$event.type ?? '';
|
|
21176
21167
|
this.openEditEntryItem.emit(event);
|
|
21177
21168
|
}
|
|
21178
21169
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CaPeriodContentPaymentComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
21179
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaPeriodContentPaymentComponent, isStandalone: true, selector: "app-ca-period-content-payment", inputs: { disableReorder: "disableReorder", included: "included", excluded: "excluded", isOpen: "isOpen", title: "title", hideTotal: "hideTotal" }, outputs: { openAddNewModalEmiter: "openAddNewModalEmiter", openEditEntryItem: "openEditEntryItem", reorderedDataEmiter: "reorderedDataEmiter" }, providers: [FormatCurrencyPipe], viewQueries: [{ propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }], ngImport: i0, template: "@let periodColorClass = titleColorClassMap.get(title) || 'text-color-black';\n\n<div class=\"main-container\">\n <ng-container>\n <div\n class=\"wrapper d-flex flex-column align-items-center justify-content-start\"\n >\n <div\n class=\"title-container container d-flex flex-column justify-content-center\"\n >\n <div\n class=\"text-value d-flex justify-content-between align-items-center\"\n >\n <div\n class=\"payment-count d-flex align-items-center justify-content-start user-select-none\"\n >\n <span\n class=\"text ca-font-extra-bold text-color-black\"\n >{{ title }}</span\n >\n @if (_included?.length) {\n <span\n class=\"round ca-font-bold d-flex align-items-center justify-content-center\"\n >\n {{ _included.length }}\n </span>\n }\n </div>\n <span\n class=\"value d-flex align-items-center add_new_item\"\n (click)=\"openAddNewModal()\"\n [class.value-hover]=\"isOpen\"\n >\n @if (isOpen) {\n <svg-icon\n class=\"d-flex icon svg-size-18\"\n [src]=\"getSvgPath('plus')\"\n ></svg-icon>\n }\n </span>\n </div>\n </div>\n <div class=\"included_excluded_holder\">\n <div\n cdkDropList\n #includedList=\"cdkDropList\"\n [cdkDropListConnectedTo]=\"[excludedList]\"\n [cdkDropListData]=\"_included\"\n class=\"component-data-container d-flex justify-content-center flex-column\"\n [class.empty_list_ex_in]=\"!_included.length\"\n (cdkDropListDropped)=\"onDrop($event)\"\n >\n @for (data of _included; let i = $index; track i) {\n <ng-container>\n <div\n cdkDrag\n cdkDragLockAxis=\"y\"\n cdkDragPreviewContainer=\"parent\"\n [cdkDragDisabled]=\"!isOpen || disableReorder\"\n >\n <ng-container *cdkDragPlaceholder>\n <div class=\"drag-placeholder\"></div>\n </ng-container>\n <ng-template cdkDragPreview matchSize>\n <div class=\"custom-drag-preview\">\n <ng-container\n *ngTemplateOutlet=\"\n paymentListItem;\n context: {\n $implicit: data,\n index: i + 1,\n isDragPreview: true,\n }\n \"\n ></ng-container>\n </div>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"\n paymentListItem;\n context: {\n $implicit: data,\n index: i + 1,\n }\n \"\n ></ng-container>\n </div>\n </ng-container>\n }\n </div>\n @if (!hideTotal) {\n <ng-container\n *ngTemplateOutlet=\"paymentListTotal\"\n ></ng-container>\n }\n <div\n cdkDropList\n [cdkDropListConnectedTo]=\"[includedList]\"\n [cdkDropListData]=\"_excluded\"\n #excludedList=\"cdkDropList\"\n class=\"component-data-container d-flex justify-content-center flex-column exclude_list\"\n [class.empty_list_ex_in]=\"!_excluded.length\"\n (cdkDropListDropped)=\"onDrop($event)\"\n >\n @for (data of _excluded; let i = $index; track i) {\n @if (data.reorderItem) {\n <ng-container\n *ngTemplateOutlet=\"paymentListTotal\"\n ></ng-container>\n } @else {\n <div\n cdkDrag\n cdkDragLockAxis=\"y\"\n cdkDragPreviewContainer=\"parent\"\n [cdkDragDisabled]=\"!isOpen || disableReorder\"\n >\n <ng-container *cdkDragPlaceholder>\n <div class=\"drag-placeholder\"></div>\n </ng-container>\n <ng-template cdkDragPreview matchSize>\n <div class=\"custom-drag-preview\">\n <ng-container\n *ngTemplateOutlet=\"\n paymentListItem;\n context: {\n $implicit: data,\n index:\n i +\n _included.length +\n 1,\n isDragPreview: true,\n }\n \"\n ></ng-container>\n </div>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"\n paymentListItem;\n context: {\n $implicit: data,\n index: i + _included.length + 1,\n isExcluded: true,\n }\n \"\n ></ng-container>\n </div>\n }\n }\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-template #emptyComponentData>\n <div class=\"title-container container-empty d-flex flex-column\">\n <div class=\"text-value d-flex justify-content-between\">\n <div\n class=\"payment-count d-flex align-items-center justify-content-start user-select-none\"\n >\n <span\n class=\"text ca-font-extra-bold text-color-black\"\n [ngStyle]=\"{ color: isOpen ? '#424242' : '#aaaaaa' }\"\n >{{ title }}</span\n >\n </div>\n <span class=\"value d-flex align-items-center\">\n @if (isOpen) {\n <svg-icon\n class=\"d-flex icon svg-size-18\"\n (click)=\"openAddNewModal()\"\n [src]=\"getSvgPath('plus')\"\n ></svg-icon>\n } @else {\n <span class=\"total-money-closed ca-font-semi-bold\"\n >$0.00</span\n >\n }\n </span>\n </div>\n </div>\n </ng-template>\n</div>\n\n<!-- CA PERIOD TEMPLATES -->\n\n<ng-template #paymentListTotal>\n @let includedCount = _included | includedCount: isOpen;\n @if (includedCount) {\n <div\n class=\"total-money-title d-flex justify-content-between align-items-center\"\n >\n <div class=\"icon-total d-flex align-items-center\">\n <span\n class=\"dolar-icon d-flex align-items-center\"\n [ngClass]=\"periodColorClass\"\n >\n <svg-icon\n class=\"d-flex align-items-center svg-size-18\"\n [src]=\"getSvgPath('dolarSign')\"\n ></svg-icon>\n </span>\n <span\n class=\"total-title ca-font-bold text-color-black user-select-none\"\n >Total</span\n >\n </div>\n <span\n class=\"total-money d-flex justify-content-end align-items-center ca-font-semi-bold\"\n [ngClass]=\"periodColorClass\"\n >{{ includedCount }}</span\n >\n </div>\n }\n</ng-template>\n\n<ng-template\n #paymentListItem\n let-data\n let-i=\"index\"\n let-isDragPreview=\"isDragPreview\"\n let-isExcluded=\"isExcluded\"\n>\n <div\n class=\"d-flex justify-content-between align-items-center information\"\n [class.excluded]=\"isExcluded\"\n >\n <div\n class=\"number-date-location-holder d-flex justify-content-between\"\n (mouseenter)=\"handleDropdownMenuHover(i)\"\n (mouseleave)=\"handleDropdownMenuHover(-1)\"\n >\n @if (isDragPreview) {\n <div class=\"drag-preview-icon\">\n <svg-icon\n class=\"svg-size-14\"\n [svgStyle]=\"{\n color: '#DADADA',\n }\"\n [src]=\"getSvgPath('previewArrows')\"\n ></svg-icon>\n </div>\n } @else {\n <span\n class=\"number d-flex justify-content-center align-items-center ca-font-medium text-color-muted\"\n >\n @let isDropdownMenuOpen = dropdownMenuActionType === 'Open';\n @if (i === dropdownHoverIndex || isDropdownMenuOpen) {\n <ca-dropdown-menu\n #dropdownMenu\n [type]=\"'dots-menu-type'\"\n [placement]=\"'bottom-right'\"\n [options]=\"dropdownOptions\"\n (dropdownOptionEmitter)=\"\n handleMenuOpen({ $event, data, title })\n \"\n >\n </ca-dropdown-menu>\n } @else {\n {{ i }}\n }\n </span>\n }\n\n <div\n class=\"date-location d-flex flex-column justify-content-start align-items-start text-ellipsis\"\n >\n @if (title === 'Fuel') {\n <span\n class=\"ca-font-semi-bold location d-flex align-items-center text-color-black w-100\"\n >{{ data.fuelStop.businessName }}\n {{\n data.fuelStop.store\n ? '- ' + data.fuelStop.store\n : ''\n }}</span\n >\n } @else {\n <span\n class=\"ca-font-semi-bold location d-flex align-items-center text-color-black w-100\"\n >{{ data.description }}</span\n >\n }\n\n <span\n class=\"date ca-font-medium d-flex align-items-center text-color-muted\"\n >{{ formatDate(data.date) }}</span\n >\n </div>\n </div>\n <div\n [ngClass]=\"{\n 'justify-content-between':\n title === 'Deduction' || title === 'Fuel',\n 'justify-content-end':\n title !== 'Deduction' && title !== 'Fuel',\n }\"\n class=\"icon-money-holder d-flex\"\n >\n @if (title === 'Deduction') {\n <span\n class=\"recurring d-flex align-items-center justify-content-center\"\n >\n @if (data.recurring && !data.allRecurrance) {\n <svg-icon\n class=\"d-flex align-items-center svg-size-18\"\n [src]=\"getSvgPath('infinityIcon')\"\n ></svg-icon>\n }\n @if (data.recurring && data.allRecurrance) {\n <div class=\"recurring-count d-flex align-items-center\">\n {{ data.currentRecurrance }}/{{\n data.allRecurrance\n }}\n </div>\n }\n </span>\n }\n\n @if (title === 'Fuel') {\n <span\n class=\"recurring d-flex align-items-center justify-content-center text-color-black-2\"\n >\n {{ data.galons }}\n </span>\n }\n\n <span\n class=\"money d-flex justify-content-end align-items-center ca-font-regular text-color-black-2\"\n >\n {{ (data.subtotal || data.total | currency: 'USD') ?? '$0.00' }}\n </span>\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}}.main-container{max-width:320px;width:100%}.main-container .wrapper{max-width:308px;width:100%;font-family:Montserrat,sans-serif;padding-bottom:2px}.main-container .wrapper .included_excluded_holder{width:100%}.main-container .wrapper .included_excluded_holder .cdk-drop-list-receiving,.main-container .wrapper .included_excluded_holder .cdk-drop-list-dragging{position:relative;min-height:32px}.main-container .wrapper .container{gap:4px}.main-container .wrapper .container.title-container{height:36px;padding-left:6px;padding-right:10px}.main-container .wrapper .container .text-value{width:auto;height:26px}.main-container .wrapper .container .text-value .payment-count{gap:4px;color:#424242}.main-container .wrapper .container .text-value .payment-count .text{height:26px;width:auto}.main-container .wrapper .container .text-value .payment-count .round{width:18px;height:18px;border-radius:20px;background-color:#6c6c6c;color:#fff;font-size:11px;-ms-user-select:none;-webkit-user-select:none;user-select:none;-moz-user-select:none}.main-container .wrapper .container .text-value .value{height:26px;width:26px;justify-content:center}.main-container .wrapper .container .text-value .value-hover:hover{background-color:#e9effd;cursor:pointer}.main-container .wrapper .container .text-value .value-hover:hover svg{border-radius:2px}.main-container .wrapper .container .text-value .value-hover:hover svg path{fill:#0b49d1}.main-container .wrapper .container .text-value .value .total-money-closed{height:26px;width:26px}.main-container .wrapper .total-money-title{width:100%;padding-left:4px;padding-right:6px;height:26px;width:auto;margin:4px 0}.main-container .wrapper .total-money-title .total-money{width:auto}.main-container .wrapper .total-money-title .icon-total{gap:10px}.main-container .wrapper .total-money-title .icon-total .dolar-icon{height:18px;width:18px}.main-container .wrapper .total-money-title .icon-total .dolar-icon svg path{fill:currentColor}.main-container .wrapper .component-data-container{width:100%;gap:4px}.main-container .wrapper .component-data-container.empty_list_ex_in{position:absolute;width:300px}.main-container .container-empty{gap:4px;padding-left:6px;padding-right:18px;color:#aaa;width:100%}.main-container .container-empty.title-container{height:36px;border-top:1px solid #dadada;padding-left:6px;padding-right:10px;justify-content:center}.main-container .container-empty .text-value{width:auto;height:26px;gap:4px}.main-container .container-empty .text-value .payment-count{gap:4px}.main-container .container-empty .text-value .payment-count .text{height:26px;width:auto}.main-container .container-empty .text-value .payment-count .round{width:18px;height:18px;border-radius:20px;background-color:#6c6c6c;color:#fff;font-size:11px;-ms-user-select:none;-webkit-user-select:none;user-select:none;-moz-user-select:none}.main-container .container-empty .text-value .value{height:26px;width:26px;justify-content:center}.main-container .container-empty .text-value .value .icon:hover svg{background-color:#e9effd}.main-container .container-empty .text-value .value .icon:hover svg path{fill:#0b49d1}.main-container .container-empty .text-value .value .total-money-closed{height:26px;width:100%}.main-container .cdk-drag:not(.cdk-drag-disabled){transition:transform .25s cubic-bezier(.25,.1,.25,1);cursor:grab}.main-container .cdk-drag-preview{background-color:#424242!important;color:#fff;font-size:12px;box-shadow:0 2px 10px #0003;font-family:Montserrat,sans-serif;border-radius:3px}.main-container .cdk-drag-preview .location{color:#fff}.main-container .cdk-drag-preview .date{color:#919191}.main-container .cdk-drag-preview .money{color:#fff}.main-container .cdk-drop-list.cdk-drop-list-dragging{cursor:grabbing}.main-container .disabled-drag{pointer-events:none}.main-container .drag-disabled{cursor:not-allowed}.main-container .information{padding-right:6px}.main-container .information .number-date-location-holder{gap:4px}.main-container .information .icon-money-holder{max-width:130px;width:100%}.main-container .information:hover{background-color:#eee;border-radius:2px;transition:.3s}.main-container .information.clicked{background-color:#eee}.main-container .information.clicked:hover{background-color:#eee;opacity:1}.main-container .information .number{border-radius:2px;width:26px;height:26px;gap:2px;color:#919191}.main-container .information .date-location{max-width:200px}.main-container .information .date-location .location,.main-container .information .date-location .date{font-size:11px;line-height:13px}.main-container .information .date-location .date{color:#919191}.main-container .information .date-location .location{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block!important}.main-container .information .recurring{height:26px}.main-container .information .recurring-count{padding:2px 5px;background-color:#6c6c6c;border-radius:50px;color:#fff;font-size:11px;line-height:14px;font-weight:600}.main-container .information .money{height:26px;max-width:60px;width:100%;width:auto}.main-container .information .drag-preview-icon{width:26px;height:26px;display:flex;align-items:center;justify-content:center}.main-container .information .drag-preview-icon svg path{fill:#dadada}.main-container .information.excluded .date-location .location{color:#919191}.main-container .information.excluded .date-location .date,.main-container .information.excluded .number{color:#ccc}.main-container .information.excluded .money{color:#919191}.drag-placeholder{height:32px;width:100%;box-shadow:0 0 4px #0000004d inset;border-radius:3px}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
21170
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaPeriodContentPaymentComponent, isStandalone: true, selector: "app-ca-period-content-payment", inputs: { disableReorder: "disableReorder", included: "included", excluded: "excluded", isOpen: "isOpen", title: "title", hideTotal: "hideTotal" }, outputs: { openAddNewModalEmiter: "openAddNewModalEmiter", openEditEntryItem: "openEditEntryItem", reorderedDataEmiter: "reorderedDataEmiter" }, providers: [FormatCurrencyPipe], viewQueries: [{ propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }], ngImport: i0, template: "@let periodColorClass = titleColorClassMap.get(title) || 'text-color-black';\n\n<div class=\"main-container\">\n <ng-container>\n <div\n class=\"wrapper d-flex flex-column align-items-center justify-content-start\"\n >\n <div\n class=\"title-container container d-flex flex-column justify-content-center\"\n >\n <div\n class=\"text-value d-flex justify-content-between align-items-center\"\n >\n <div\n class=\"payment-count d-flex align-items-center justify-content-start user-select-none\"\n >\n <span\n class=\"text ca-font-extra-bold text-color-black\"\n >{{ title }}</span\n >\n @if (_included?.length) {\n <span\n class=\"round ca-font-bold d-flex align-items-center justify-content-center\"\n >\n {{ _included.length }}\n </span>\n }\n </div>\n <span\n class=\"value d-flex align-items-center add_new_item\"\n (click)=\"openAddNewModal()\"\n [class.value-hover]=\"isOpen\"\n >\n @if (isOpen) {\n <svg-icon\n class=\"d-flex icon svg-size-18\"\n [src]=\"getSvgPath('plus')\"\n ></svg-icon>\n }\n </span>\n </div>\n </div>\n <div class=\"included_excluded_holder\">\n <div\n cdkDropList\n #includedList=\"cdkDropList\"\n [cdkDropListConnectedTo]=\"[excludedList]\"\n [cdkDropListData]=\"_included\"\n class=\"component-data-container d-flex justify-content-center flex-column\"\n [class.empty_list_ex_in]=\"!_included.length\"\n (cdkDropListDropped)=\"onDrop($event)\"\n >\n @for (data of _included; let i = $index; track i) {\n <ng-container>\n <div\n cdkDrag\n cdkDragLockAxis=\"y\"\n cdkDragPreviewContainer=\"parent\"\n [cdkDragDisabled]=\"!isOpen || disableReorder\"\n >\n <ng-container *cdkDragPlaceholder>\n <div class=\"drag-placeholder\"></div>\n </ng-container>\n <ng-template cdkDragPreview matchSize>\n <div class=\"custom-drag-preview\">\n <ng-container\n *ngTemplateOutlet=\"\n paymentListItem;\n context: {\n $implicit: data,\n index: i + 1,\n isDragPreview: true,\n }\n \"\n ></ng-container>\n </div>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"\n paymentListItem;\n context: {\n $implicit: data,\n index: i + 1,\n }\n \"\n ></ng-container>\n </div>\n </ng-container>\n }\n </div>\n @if (!hideTotal) {\n <ng-container\n *ngTemplateOutlet=\"paymentListTotal\"\n ></ng-container>\n }\n <div\n cdkDropList\n [cdkDropListConnectedTo]=\"[includedList]\"\n [cdkDropListData]=\"_excluded\"\n #excludedList=\"cdkDropList\"\n class=\"component-data-container d-flex justify-content-center flex-column exclude_list\"\n [class.empty_list_ex_in]=\"!_excluded.length\"\n (cdkDropListDropped)=\"onDrop($event)\"\n >\n @for (data of _excluded; let i = $index; track i) {\n @if (data.reorderItem) {\n <ng-container\n *ngTemplateOutlet=\"paymentListTotal\"\n ></ng-container>\n } @else {\n <div\n cdkDrag\n cdkDragLockAxis=\"y\"\n cdkDragPreviewContainer=\"parent\"\n [cdkDragDisabled]=\"!isOpen || disableReorder\"\n >\n <ng-container *cdkDragPlaceholder>\n <div class=\"drag-placeholder\"></div>\n </ng-container>\n <ng-template cdkDragPreview matchSize>\n <div class=\"custom-drag-preview\">\n <ng-container\n *ngTemplateOutlet=\"\n paymentListItem;\n context: {\n $implicit: data,\n index:\n i +\n _included.length +\n 1,\n isDragPreview: true,\n }\n \"\n ></ng-container>\n </div>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"\n paymentListItem;\n context: {\n $implicit: data,\n index: i + _included.length + 1,\n isExcluded: true,\n }\n \"\n ></ng-container>\n </div>\n }\n }\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-template #emptyComponentData>\n <div class=\"title-container container-empty d-flex flex-column\">\n <div class=\"text-value d-flex justify-content-between\">\n <div\n class=\"payment-count d-flex align-items-center justify-content-start user-select-none\"\n >\n <span\n class=\"text ca-font-extra-bold text-color-black\"\n [ngStyle]=\"{ color: isOpen ? '#424242' : '#aaaaaa' }\"\n >{{ title }}</span\n >\n </div>\n <span class=\"value d-flex align-items-center\">\n @if (isOpen) {\n <svg-icon\n class=\"d-flex icon svg-size-18\"\n (click)=\"openAddNewModal()\"\n [src]=\"getSvgPath('plus')\"\n ></svg-icon>\n } @else {\n <span class=\"total-money-closed ca-font-semi-bold\"\n >$0.00</span\n >\n }\n </span>\n </div>\n </div>\n </ng-template>\n</div>\n\n<!-- CA PERIOD TEMPLATES -->\n\n<ng-template #paymentListTotal>\n @let includedCount = _included | includedCount: isOpen;\n @if (includedCount) {\n <div\n class=\"total-money-title d-flex justify-content-between align-items-center\"\n >\n <div class=\"icon-total d-flex align-items-center\">\n <span\n class=\"dolar-icon d-flex align-items-center\"\n [ngClass]=\"periodColorClass\"\n >\n <svg-icon\n class=\"d-flex align-items-center svg-size-18\"\n [src]=\"getSvgPath('dolarSign')\"\n ></svg-icon>\n </span>\n <span class=\"total-title ca-font-bold text-color-black user-select-none\"\n >Total</span\n >\n </div>\n <span\n class=\"total-money d-flex justify-content-end align-items-center ca-font-semi-bold\"\n [ngClass]=\"periodColorClass\"\n >{{ includedCount }}</span\n >\n </div>\n }\n</ng-template>\n\n<ng-template\n #paymentListItem\n let-data\n let-i=\"index\"\n let-isDragPreview=\"isDragPreview\"\n let-isExcluded=\"isExcluded\"\n>\n <div\n class=\"d-flex justify-content-between align-items-center information\"\n [class.excluded]=\"isExcluded\"\n >\n <div\n class=\"number-date-location-holder d-flex justify-content-between\"\n (mouseenter)=\"handleDropdownMenuHover(i)\"\n (mouseleave)=\"handleDropdownMenuHover(-1)\"\n >\n @if (isDragPreview) {\n <div class=\"drag-preview-icon\">\n <svg-icon\n class=\"svg-size-14\"\n [svgStyle]=\"{\n color: '#DADADA',\n }\"\n [src]=\"getSvgPath('previewArrows')\"\n ></svg-icon>\n </div>\n } @else {\n <span\n class=\"number d-flex justify-content-center align-items-center ca-font-medium text-color-muted\"\n >\n @if (i === dropdownHoverIndex) {\n <ca-dropdown-menu\n #dropdownMenu\n [type]=\"'dots-menu-type'\"\n [placement]=\"'bottom-right'\"\n [options]=\"dropdownOptions\"\n (dropdownOptionEmitter)=\"\n handleMenuOpen({ $event, data, title })\n \"\n >\n </ca-dropdown-menu>\n } @else {\n {{ i }}\n }\n </span>\n }\n\n <div\n class=\"date-location d-flex flex-column justify-content-start align-items-start text-ellipsis\"\n >\n @if (title === 'Fuel') {\n <span\n class=\"ca-font-semi-bold location d-flex align-items-center text-color-black w-100\"\n >{{ data.fuelStop.businessName }}\n {{\n data.fuelStop.store\n ? '- ' + data.fuelStop.store\n : ''\n }}</span\n >\n } @else {\n <span\n class=\"ca-font-semi-bold location d-flex align-items-center text-color-black w-100\"\n >{{ data.description }}</span\n >\n }\n\n <span\n class=\"date ca-font-medium d-flex align-items-center text-color-muted\"\n >{{ formatDate(data.date) }}</span\n >\n </div>\n </div>\n <div\n [ngClass]=\"{\n 'justify-content-between':\n title === 'Deduction' || title === 'Fuel',\n 'justify-content-end':\n title !== 'Deduction' && title !== 'Fuel',\n }\"\n class=\"icon-money-holder d-flex\"\n >\n @if (title === 'Deduction') {\n <span\n class=\"recurring d-flex align-items-center justify-content-center\"\n >\n @if (data.recurring && !data.allRecurrance) {\n <svg-icon\n class=\"d-flex align-items-center svg-size-18\"\n [src]=\"getSvgPath('infinityIcon')\"\n ></svg-icon>\n }\n @if (data.recurring && data.allRecurrance) {\n <div class=\"recurring-count d-flex align-items-center\">\n {{ data.currentRecurrance }}/{{\n data.allRecurrance\n }}\n </div>\n }\n </span>\n }\n\n @if (title === 'Fuel') {\n <span\n class=\"recurring d-flex align-items-center justify-content-center text-color-black-2\"\n >\n {{ data.galons }}\n </span>\n }\n\n <span\n class=\"money d-flex justify-content-end align-items-center ca-font-regular text-color-black-2\"\n >\n {{ (data.subtotal || data.total | currency: 'USD') ?? '$0.00' }}\n </span>\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}}.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}.main-container{max-width:320px;width:100%}.main-container .wrapper{max-width:308px;width:100%;font-family:Montserrat,sans-serif;padding-bottom:2px}.main-container .wrapper .included_excluded_holder{width:100%}.main-container .wrapper .included_excluded_holder .cdk-drop-list-receiving,.main-container .wrapper .included_excluded_holder .cdk-drop-list-dragging{position:relative;min-height:32px}.main-container .wrapper .container{gap:4px}.main-container .wrapper .container.title-container{height:36px;padding-left:6px;padding-right:10px}.main-container .wrapper .container .text-value{width:auto;height:26px}.main-container .wrapper .container .text-value .payment-count{gap:4px;color:#424242}.main-container .wrapper .container .text-value .payment-count .text{height:26px;width:auto}.main-container .wrapper .container .text-value .payment-count .round{width:18px;height:18px;border-radius:20px;background-color:#6c6c6c;color:#fff;font-size:11px;-ms-user-select:none;-webkit-user-select:none;user-select:none;-moz-user-select:none}.main-container .wrapper .container .text-value .value{height:26px;width:26px;justify-content:center}.main-container .wrapper .container .text-value .value-hover:hover{background-color:#e9effd;cursor:pointer}.main-container .wrapper .container .text-value .value-hover:hover svg{border-radius:2px}.main-container .wrapper .container .text-value .value-hover:hover svg path{fill:#0b49d1}.main-container .wrapper .container .text-value .value .total-money-closed{height:26px;width:26px}.main-container .wrapper .total-money-title{width:100%;padding-left:4px;padding-right:6px;height:26px;width:auto;margin:4px 0}.main-container .wrapper .total-money-title .total-money{width:auto}.main-container .wrapper .total-money-title .icon-total{gap:10px}.main-container .wrapper .total-money-title .icon-total .dolar-icon{height:18px;width:18px}.main-container .wrapper .total-money-title .icon-total .dolar-icon svg path{fill:currentColor}.main-container .wrapper .component-data-container{width:100%;gap:4px}.main-container .wrapper .component-data-container.empty_list_ex_in{position:absolute;width:300px}.main-container .container-empty{gap:4px;padding-left:6px;padding-right:18px;color:#aaa;width:100%}.main-container .container-empty.title-container{height:36px;border-top:1px solid #dadada;padding-left:6px;padding-right:10px;justify-content:center}.main-container .container-empty .text-value{width:auto;height:26px;gap:4px}.main-container .container-empty .text-value .payment-count{gap:4px}.main-container .container-empty .text-value .payment-count .text{height:26px;width:auto}.main-container .container-empty .text-value .payment-count .round{width:18px;height:18px;border-radius:20px;background-color:#6c6c6c;color:#fff;font-size:11px;-ms-user-select:none;-webkit-user-select:none;user-select:none;-moz-user-select:none}.main-container .container-empty .text-value .value{height:26px;width:26px;justify-content:center}.main-container .container-empty .text-value .value .icon:hover svg{background-color:#e9effd}.main-container .container-empty .text-value .value .icon:hover svg path{fill:#0b49d1}.main-container .container-empty .text-value .value .total-money-closed{height:26px;width:100%}.main-container .cdk-drag:not(.cdk-drag-disabled){transition:transform .25s cubic-bezier(.25,.1,.25,1);cursor:grab}.main-container .cdk-drag-preview{background-color:#424242!important;color:#fff;font-size:12px;box-shadow:0 2px 10px #0003;font-family:Montserrat,sans-serif;border-radius:3px}.main-container .cdk-drag-preview .location{color:#fff}.main-container .cdk-drag-preview .date{color:#919191}.main-container .cdk-drag-preview .money{color:#fff}.main-container .cdk-drop-list.cdk-drop-list-dragging{cursor:grabbing}.main-container .disabled-drag{pointer-events:none}.main-container .drag-disabled{cursor:not-allowed}.main-container .information{padding-right:6px}.main-container .information .number-date-location-holder{gap:4px}.main-container .information .icon-money-holder{max-width:130px;width:100%}.main-container .information:hover{background-color:#eee;border-radius:2px;transition:.3s}.main-container .information.clicked{background-color:#eee}.main-container .information.clicked:hover{background-color:#eee;opacity:1}.main-container .information .number{border-radius:2px;width:26px;height:26px;gap:2px;color:#919191}.main-container .information .date-location{max-width:200px}.main-container .information .date-location .location,.main-container .information .date-location .date{font-size:11px;line-height:13px}.main-container .information .date-location .date{color:#919191}.main-container .information .date-location .location{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block!important}.main-container .information .recurring{height:26px}.main-container .information .recurring-count{padding:2px 5px;background-color:#6c6c6c;border-radius:50px;color:#fff;font-size:11px;line-height:14px;font-weight:600}.main-container .information .money{height:26px;max-width:60px;width:100%;width:auto}.main-container .information .drag-preview-icon{width:26px;height:26px;display:flex;align-items:center;justify-content:center}.main-container .information .drag-preview-icon svg path{fill:#dadada}.main-container .information.excluded .date-location .location{color:#919191}.main-container .information.excluded .date-location .date,.main-container .information.excluded .number{color:#ccc}.main-container .information.excluded .money{color:#919191}.drag-placeholder{height:32px;width:100%;box-shadow:0 0 4px #0000004d inset;border-radius:3px}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
21180
21171
|
//Modules
|
|
21181
21172
|
CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { 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: DragDropModule }, { kind: "directive", type: i3$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$2.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i3$2.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type:
|
|
21182
21173
|
//Components
|
|
@@ -21195,7 +21186,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
21195
21186
|
CaDropdownMenuComponent,
|
|
21196
21187
|
//Pipes
|
|
21197
21188
|
IncludedCountPipe,
|
|
21198
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let periodColorClass = titleColorClassMap.get(title) || 'text-color-black';\n\n<div class=\"main-container\">\n <ng-container>\n <div\n class=\"wrapper d-flex flex-column align-items-center justify-content-start\"\n >\n <div\n class=\"title-container container d-flex flex-column justify-content-center\"\n >\n <div\n class=\"text-value d-flex justify-content-between align-items-center\"\n >\n <div\n class=\"payment-count d-flex align-items-center justify-content-start user-select-none\"\n >\n <span\n class=\"text ca-font-extra-bold text-color-black\"\n >{{ title }}</span\n >\n @if (_included?.length) {\n <span\n class=\"round ca-font-bold d-flex align-items-center justify-content-center\"\n >\n {{ _included.length }}\n </span>\n }\n </div>\n <span\n class=\"value d-flex align-items-center add_new_item\"\n (click)=\"openAddNewModal()\"\n [class.value-hover]=\"isOpen\"\n >\n @if (isOpen) {\n <svg-icon\n class=\"d-flex icon svg-size-18\"\n [src]=\"getSvgPath('plus')\"\n ></svg-icon>\n }\n </span>\n </div>\n </div>\n <div class=\"included_excluded_holder\">\n <div\n cdkDropList\n #includedList=\"cdkDropList\"\n [cdkDropListConnectedTo]=\"[excludedList]\"\n [cdkDropListData]=\"_included\"\n class=\"component-data-container d-flex justify-content-center flex-column\"\n [class.empty_list_ex_in]=\"!_included.length\"\n (cdkDropListDropped)=\"onDrop($event)\"\n >\n @for (data of _included; let i = $index; track i) {\n <ng-container>\n <div\n cdkDrag\n cdkDragLockAxis=\"y\"\n cdkDragPreviewContainer=\"parent\"\n [cdkDragDisabled]=\"!isOpen || disableReorder\"\n >\n <ng-container *cdkDragPlaceholder>\n <div class=\"drag-placeholder\"></div>\n </ng-container>\n <ng-template cdkDragPreview matchSize>\n <div class=\"custom-drag-preview\">\n <ng-container\n *ngTemplateOutlet=\"\n paymentListItem;\n context: {\n $implicit: data,\n index: i + 1,\n isDragPreview: true,\n }\n \"\n ></ng-container>\n </div>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"\n paymentListItem;\n context: {\n $implicit: data,\n index: i + 1,\n }\n \"\n ></ng-container>\n </div>\n </ng-container>\n }\n </div>\n @if (!hideTotal) {\n <ng-container\n *ngTemplateOutlet=\"paymentListTotal\"\n ></ng-container>\n }\n <div\n cdkDropList\n [cdkDropListConnectedTo]=\"[includedList]\"\n [cdkDropListData]=\"_excluded\"\n #excludedList=\"cdkDropList\"\n class=\"component-data-container d-flex justify-content-center flex-column exclude_list\"\n [class.empty_list_ex_in]=\"!_excluded.length\"\n (cdkDropListDropped)=\"onDrop($event)\"\n >\n @for (data of _excluded; let i = $index; track i) {\n @if (data.reorderItem) {\n <ng-container\n *ngTemplateOutlet=\"paymentListTotal\"\n ></ng-container>\n } @else {\n <div\n cdkDrag\n cdkDragLockAxis=\"y\"\n cdkDragPreviewContainer=\"parent\"\n [cdkDragDisabled]=\"!isOpen || disableReorder\"\n >\n <ng-container *cdkDragPlaceholder>\n <div class=\"drag-placeholder\"></div>\n </ng-container>\n <ng-template cdkDragPreview matchSize>\n <div class=\"custom-drag-preview\">\n <ng-container\n *ngTemplateOutlet=\"\n paymentListItem;\n context: {\n $implicit: data,\n index:\n i +\n _included.length +\n 1,\n isDragPreview: true,\n }\n \"\n ></ng-container>\n </div>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"\n paymentListItem;\n context: {\n $implicit: data,\n index: i + _included.length + 1,\n isExcluded: true,\n }\n \"\n ></ng-container>\n </div>\n }\n }\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-template #emptyComponentData>\n <div class=\"title-container container-empty d-flex flex-column\">\n <div class=\"text-value d-flex justify-content-between\">\n <div\n class=\"payment-count d-flex align-items-center justify-content-start user-select-none\"\n >\n <span\n class=\"text ca-font-extra-bold text-color-black\"\n [ngStyle]=\"{ color: isOpen ? '#424242' : '#aaaaaa' }\"\n >{{ title }}</span\n >\n </div>\n <span class=\"value d-flex align-items-center\">\n @if (isOpen) {\n <svg-icon\n class=\"d-flex icon svg-size-18\"\n (click)=\"openAddNewModal()\"\n [src]=\"getSvgPath('plus')\"\n ></svg-icon>\n } @else {\n <span class=\"total-money-closed ca-font-semi-bold\"\n >$0.00</span\n >\n }\n </span>\n </div>\n </div>\n </ng-template>\n</div>\n\n<!-- CA PERIOD TEMPLATES -->\n\n<ng-template #paymentListTotal>\n @let includedCount = _included | includedCount: isOpen;\n @if (includedCount) {\n <div\n class=\"total-money-title d-flex justify-content-between align-items-center\"\n >\n <div class=\"icon-total d-flex align-items-center\">\n <span\n class=\"dolar-icon d-flex align-items-center\"\n [ngClass]=\"periodColorClass\"\n >\n <svg-icon\n class=\"d-flex align-items-center svg-size-18\"\n [src]=\"getSvgPath('dolarSign')\"\n ></svg-icon>\n </span>\n <span\n class=\"total-title ca-font-bold text-color-black user-select-none\"\n >Total</span\n >\n </div>\n <span\n class=\"total-money d-flex justify-content-end align-items-center ca-font-semi-bold\"\n [ngClass]=\"periodColorClass\"\n >{{ includedCount }}</span\n >\n </div>\n }\n</ng-template>\n\n<ng-template\n #paymentListItem\n let-data\n let-i=\"index\"\n let-isDragPreview=\"isDragPreview\"\n let-isExcluded=\"isExcluded\"\n>\n <div\n class=\"d-flex justify-content-between align-items-center information\"\n [class.excluded]=\"isExcluded\"\n >\n <div\n class=\"number-date-location-holder d-flex justify-content-between\"\n (mouseenter)=\"handleDropdownMenuHover(i)\"\n (mouseleave)=\"handleDropdownMenuHover(-1)\"\n >\n @if (isDragPreview) {\n <div class=\"drag-preview-icon\">\n <svg-icon\n class=\"svg-size-14\"\n [svgStyle]=\"{\n color: '#DADADA',\n }\"\n [src]=\"getSvgPath('previewArrows')\"\n ></svg-icon>\n </div>\n } @else {\n <span\n class=\"number d-flex justify-content-center align-items-center ca-font-medium text-color-muted\"\n >\n @let isDropdownMenuOpen = dropdownMenuActionType === 'Open';\n @if (i === dropdownHoverIndex || isDropdownMenuOpen) {\n <ca-dropdown-menu\n #dropdownMenu\n [type]=\"'dots-menu-type'\"\n [placement]=\"'bottom-right'\"\n [options]=\"dropdownOptions\"\n (dropdownOptionEmitter)=\"\n handleMenuOpen({ $event, data, title })\n \"\n >\n </ca-dropdown-menu>\n } @else {\n {{ i }}\n }\n </span>\n }\n\n <div\n class=\"date-location d-flex flex-column justify-content-start align-items-start text-ellipsis\"\n >\n @if (title === 'Fuel') {\n <span\n class=\"ca-font-semi-bold location d-flex align-items-center text-color-black w-100\"\n >{{ data.fuelStop.businessName }}\n {{\n data.fuelStop.store\n ? '- ' + data.fuelStop.store\n : ''\n }}</span\n >\n } @else {\n <span\n class=\"ca-font-semi-bold location d-flex align-items-center text-color-black w-100\"\n >{{ data.description }}</span\n >\n }\n\n <span\n class=\"date ca-font-medium d-flex align-items-center text-color-muted\"\n >{{ formatDate(data.date) }}</span\n >\n </div>\n </div>\n <div\n [ngClass]=\"{\n 'justify-content-between':\n title === 'Deduction' || title === 'Fuel',\n 'justify-content-end':\n title !== 'Deduction' && title !== 'Fuel',\n }\"\n class=\"icon-money-holder d-flex\"\n >\n @if (title === 'Deduction') {\n <span\n class=\"recurring d-flex align-items-center justify-content-center\"\n >\n @if (data.recurring && !data.allRecurrance) {\n <svg-icon\n class=\"d-flex align-items-center svg-size-18\"\n [src]=\"getSvgPath('infinityIcon')\"\n ></svg-icon>\n }\n @if (data.recurring && data.allRecurrance) {\n <div class=\"recurring-count d-flex align-items-center\">\n {{ data.currentRecurrance }}/{{\n data.allRecurrance\n }}\n </div>\n }\n </span>\n }\n\n @if (title === 'Fuel') {\n <span\n class=\"recurring d-flex align-items-center justify-content-center text-color-black-2\"\n >\n {{ data.galons }}\n </span>\n }\n\n <span\n class=\"money d-flex justify-content-end align-items-center ca-font-regular text-color-black-2\"\n >\n {{ (data.subtotal || data.total | currency: 'USD') ?? '$0.00' }}\n </span>\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}}.main-container{max-width:320px;width:100%}.main-container .wrapper{max-width:308px;width:100%;font-family:Montserrat,sans-serif;padding-bottom:2px}.main-container .wrapper .included_excluded_holder{width:100%}.main-container .wrapper .included_excluded_holder .cdk-drop-list-receiving,.main-container .wrapper .included_excluded_holder .cdk-drop-list-dragging{position:relative;min-height:32px}.main-container .wrapper .container{gap:4px}.main-container .wrapper .container.title-container{height:36px;padding-left:6px;padding-right:10px}.main-container .wrapper .container .text-value{width:auto;height:26px}.main-container .wrapper .container .text-value .payment-count{gap:4px;color:#424242}.main-container .wrapper .container .text-value .payment-count .text{height:26px;width:auto}.main-container .wrapper .container .text-value .payment-count .round{width:18px;height:18px;border-radius:20px;background-color:#6c6c6c;color:#fff;font-size:11px;-ms-user-select:none;-webkit-user-select:none;user-select:none;-moz-user-select:none}.main-container .wrapper .container .text-value .value{height:26px;width:26px;justify-content:center}.main-container .wrapper .container .text-value .value-hover:hover{background-color:#e9effd;cursor:pointer}.main-container .wrapper .container .text-value .value-hover:hover svg{border-radius:2px}.main-container .wrapper .container .text-value .value-hover:hover svg path{fill:#0b49d1}.main-container .wrapper .container .text-value .value .total-money-closed{height:26px;width:26px}.main-container .wrapper .total-money-title{width:100%;padding-left:4px;padding-right:6px;height:26px;width:auto;margin:4px 0}.main-container .wrapper .total-money-title .total-money{width:auto}.main-container .wrapper .total-money-title .icon-total{gap:10px}.main-container .wrapper .total-money-title .icon-total .dolar-icon{height:18px;width:18px}.main-container .wrapper .total-money-title .icon-total .dolar-icon svg path{fill:currentColor}.main-container .wrapper .component-data-container{width:100%;gap:4px}.main-container .wrapper .component-data-container.empty_list_ex_in{position:absolute;width:300px}.main-container .container-empty{gap:4px;padding-left:6px;padding-right:18px;color:#aaa;width:100%}.main-container .container-empty.title-container{height:36px;border-top:1px solid #dadada;padding-left:6px;padding-right:10px;justify-content:center}.main-container .container-empty .text-value{width:auto;height:26px;gap:4px}.main-container .container-empty .text-value .payment-count{gap:4px}.main-container .container-empty .text-value .payment-count .text{height:26px;width:auto}.main-container .container-empty .text-value .payment-count .round{width:18px;height:18px;border-radius:20px;background-color:#6c6c6c;color:#fff;font-size:11px;-ms-user-select:none;-webkit-user-select:none;user-select:none;-moz-user-select:none}.main-container .container-empty .text-value .value{height:26px;width:26px;justify-content:center}.main-container .container-empty .text-value .value .icon:hover svg{background-color:#e9effd}.main-container .container-empty .text-value .value .icon:hover svg path{fill:#0b49d1}.main-container .container-empty .text-value .value .total-money-closed{height:26px;width:100%}.main-container .cdk-drag:not(.cdk-drag-disabled){transition:transform .25s cubic-bezier(.25,.1,.25,1);cursor:grab}.main-container .cdk-drag-preview{background-color:#424242!important;color:#fff;font-size:12px;box-shadow:0 2px 10px #0003;font-family:Montserrat,sans-serif;border-radius:3px}.main-container .cdk-drag-preview .location{color:#fff}.main-container .cdk-drag-preview .date{color:#919191}.main-container .cdk-drag-preview .money{color:#fff}.main-container .cdk-drop-list.cdk-drop-list-dragging{cursor:grabbing}.main-container .disabled-drag{pointer-events:none}.main-container .drag-disabled{cursor:not-allowed}.main-container .information{padding-right:6px}.main-container .information .number-date-location-holder{gap:4px}.main-container .information .icon-money-holder{max-width:130px;width:100%}.main-container .information:hover{background-color:#eee;border-radius:2px;transition:.3s}.main-container .information.clicked{background-color:#eee}.main-container .information.clicked:hover{background-color:#eee;opacity:1}.main-container .information .number{border-radius:2px;width:26px;height:26px;gap:2px;color:#919191}.main-container .information .date-location{max-width:200px}.main-container .information .date-location .location,.main-container .information .date-location .date{font-size:11px;line-height:13px}.main-container .information .date-location .date{color:#919191}.main-container .information .date-location .location{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block!important}.main-container .information .recurring{height:26px}.main-container .information .recurring-count{padding:2px 5px;background-color:#6c6c6c;border-radius:50px;color:#fff;font-size:11px;line-height:14px;font-weight:600}.main-container .information .money{height:26px;max-width:60px;width:100%;width:auto}.main-container .information .drag-preview-icon{width:26px;height:26px;display:flex;align-items:center;justify-content:center}.main-container .information .drag-preview-icon svg path{fill:#dadada}.main-container .information.excluded .date-location .location{color:#919191}.main-container .information.excluded .date-location .date,.main-container .information.excluded .number{color:#ccc}.main-container .information.excluded .money{color:#919191}.drag-placeholder{height:32px;width:100%;box-shadow:0 0 4px #0000004d inset;border-radius:3px}\n"] }]
|
|
21189
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let periodColorClass = titleColorClassMap.get(title) || 'text-color-black';\n\n<div class=\"main-container\">\n <ng-container>\n <div\n class=\"wrapper d-flex flex-column align-items-center justify-content-start\"\n >\n <div\n class=\"title-container container d-flex flex-column justify-content-center\"\n >\n <div\n class=\"text-value d-flex justify-content-between align-items-center\"\n >\n <div\n class=\"payment-count d-flex align-items-center justify-content-start user-select-none\"\n >\n <span\n class=\"text ca-font-extra-bold text-color-black\"\n >{{ title }}</span\n >\n @if (_included?.length) {\n <span\n class=\"round ca-font-bold d-flex align-items-center justify-content-center\"\n >\n {{ _included.length }}\n </span>\n }\n </div>\n <span\n class=\"value d-flex align-items-center add_new_item\"\n (click)=\"openAddNewModal()\"\n [class.value-hover]=\"isOpen\"\n >\n @if (isOpen) {\n <svg-icon\n class=\"d-flex icon svg-size-18\"\n [src]=\"getSvgPath('plus')\"\n ></svg-icon>\n }\n </span>\n </div>\n </div>\n <div class=\"included_excluded_holder\">\n <div\n cdkDropList\n #includedList=\"cdkDropList\"\n [cdkDropListConnectedTo]=\"[excludedList]\"\n [cdkDropListData]=\"_included\"\n class=\"component-data-container d-flex justify-content-center flex-column\"\n [class.empty_list_ex_in]=\"!_included.length\"\n (cdkDropListDropped)=\"onDrop($event)\"\n >\n @for (data of _included; let i = $index; track i) {\n <ng-container>\n <div\n cdkDrag\n cdkDragLockAxis=\"y\"\n cdkDragPreviewContainer=\"parent\"\n [cdkDragDisabled]=\"!isOpen || disableReorder\"\n >\n <ng-container *cdkDragPlaceholder>\n <div class=\"drag-placeholder\"></div>\n </ng-container>\n <ng-template cdkDragPreview matchSize>\n <div class=\"custom-drag-preview\">\n <ng-container\n *ngTemplateOutlet=\"\n paymentListItem;\n context: {\n $implicit: data,\n index: i + 1,\n isDragPreview: true,\n }\n \"\n ></ng-container>\n </div>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"\n paymentListItem;\n context: {\n $implicit: data,\n index: i + 1,\n }\n \"\n ></ng-container>\n </div>\n </ng-container>\n }\n </div>\n @if (!hideTotal) {\n <ng-container\n *ngTemplateOutlet=\"paymentListTotal\"\n ></ng-container>\n }\n <div\n cdkDropList\n [cdkDropListConnectedTo]=\"[includedList]\"\n [cdkDropListData]=\"_excluded\"\n #excludedList=\"cdkDropList\"\n class=\"component-data-container d-flex justify-content-center flex-column exclude_list\"\n [class.empty_list_ex_in]=\"!_excluded.length\"\n (cdkDropListDropped)=\"onDrop($event)\"\n >\n @for (data of _excluded; let i = $index; track i) {\n @if (data.reorderItem) {\n <ng-container\n *ngTemplateOutlet=\"paymentListTotal\"\n ></ng-container>\n } @else {\n <div\n cdkDrag\n cdkDragLockAxis=\"y\"\n cdkDragPreviewContainer=\"parent\"\n [cdkDragDisabled]=\"!isOpen || disableReorder\"\n >\n <ng-container *cdkDragPlaceholder>\n <div class=\"drag-placeholder\"></div>\n </ng-container>\n <ng-template cdkDragPreview matchSize>\n <div class=\"custom-drag-preview\">\n <ng-container\n *ngTemplateOutlet=\"\n paymentListItem;\n context: {\n $implicit: data,\n index:\n i +\n _included.length +\n 1,\n isDragPreview: true,\n }\n \"\n ></ng-container>\n </div>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"\n paymentListItem;\n context: {\n $implicit: data,\n index: i + _included.length + 1,\n isExcluded: true,\n }\n \"\n ></ng-container>\n </div>\n }\n }\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-template #emptyComponentData>\n <div class=\"title-container container-empty d-flex flex-column\">\n <div class=\"text-value d-flex justify-content-between\">\n <div\n class=\"payment-count d-flex align-items-center justify-content-start user-select-none\"\n >\n <span\n class=\"text ca-font-extra-bold text-color-black\"\n [ngStyle]=\"{ color: isOpen ? '#424242' : '#aaaaaa' }\"\n >{{ title }}</span\n >\n </div>\n <span class=\"value d-flex align-items-center\">\n @if (isOpen) {\n <svg-icon\n class=\"d-flex icon svg-size-18\"\n (click)=\"openAddNewModal()\"\n [src]=\"getSvgPath('plus')\"\n ></svg-icon>\n } @else {\n <span class=\"total-money-closed ca-font-semi-bold\"\n >$0.00</span\n >\n }\n </span>\n </div>\n </div>\n </ng-template>\n</div>\n\n<!-- CA PERIOD TEMPLATES -->\n\n<ng-template #paymentListTotal>\n @let includedCount = _included | includedCount: isOpen;\n @if (includedCount) {\n <div\n class=\"total-money-title d-flex justify-content-between align-items-center\"\n >\n <div class=\"icon-total d-flex align-items-center\">\n <span\n class=\"dolar-icon d-flex align-items-center\"\n [ngClass]=\"periodColorClass\"\n >\n <svg-icon\n class=\"d-flex align-items-center svg-size-18\"\n [src]=\"getSvgPath('dolarSign')\"\n ></svg-icon>\n </span>\n <span class=\"total-title ca-font-bold text-color-black user-select-none\"\n >Total</span\n >\n </div>\n <span\n class=\"total-money d-flex justify-content-end align-items-center ca-font-semi-bold\"\n [ngClass]=\"periodColorClass\"\n >{{ includedCount }}</span\n >\n </div>\n }\n</ng-template>\n\n<ng-template\n #paymentListItem\n let-data\n let-i=\"index\"\n let-isDragPreview=\"isDragPreview\"\n let-isExcluded=\"isExcluded\"\n>\n <div\n class=\"d-flex justify-content-between align-items-center information\"\n [class.excluded]=\"isExcluded\"\n >\n <div\n class=\"number-date-location-holder d-flex justify-content-between\"\n (mouseenter)=\"handleDropdownMenuHover(i)\"\n (mouseleave)=\"handleDropdownMenuHover(-1)\"\n >\n @if (isDragPreview) {\n <div class=\"drag-preview-icon\">\n <svg-icon\n class=\"svg-size-14\"\n [svgStyle]=\"{\n color: '#DADADA',\n }\"\n [src]=\"getSvgPath('previewArrows')\"\n ></svg-icon>\n </div>\n } @else {\n <span\n class=\"number d-flex justify-content-center align-items-center ca-font-medium text-color-muted\"\n >\n @if (i === dropdownHoverIndex) {\n <ca-dropdown-menu\n #dropdownMenu\n [type]=\"'dots-menu-type'\"\n [placement]=\"'bottom-right'\"\n [options]=\"dropdownOptions\"\n (dropdownOptionEmitter)=\"\n handleMenuOpen({ $event, data, title })\n \"\n >\n </ca-dropdown-menu>\n } @else {\n {{ i }}\n }\n </span>\n }\n\n <div\n class=\"date-location d-flex flex-column justify-content-start align-items-start text-ellipsis\"\n >\n @if (title === 'Fuel') {\n <span\n class=\"ca-font-semi-bold location d-flex align-items-center text-color-black w-100\"\n >{{ data.fuelStop.businessName }}\n {{\n data.fuelStop.store\n ? '- ' + data.fuelStop.store\n : ''\n }}</span\n >\n } @else {\n <span\n class=\"ca-font-semi-bold location d-flex align-items-center text-color-black w-100\"\n >{{ data.description }}</span\n >\n }\n\n <span\n class=\"date ca-font-medium d-flex align-items-center text-color-muted\"\n >{{ formatDate(data.date) }}</span\n >\n </div>\n </div>\n <div\n [ngClass]=\"{\n 'justify-content-between':\n title === 'Deduction' || title === 'Fuel',\n 'justify-content-end':\n title !== 'Deduction' && title !== 'Fuel',\n }\"\n class=\"icon-money-holder d-flex\"\n >\n @if (title === 'Deduction') {\n <span\n class=\"recurring d-flex align-items-center justify-content-center\"\n >\n @if (data.recurring && !data.allRecurrance) {\n <svg-icon\n class=\"d-flex align-items-center svg-size-18\"\n [src]=\"getSvgPath('infinityIcon')\"\n ></svg-icon>\n }\n @if (data.recurring && data.allRecurrance) {\n <div class=\"recurring-count d-flex align-items-center\">\n {{ data.currentRecurrance }}/{{\n data.allRecurrance\n }}\n </div>\n }\n </span>\n }\n\n @if (title === 'Fuel') {\n <span\n class=\"recurring d-flex align-items-center justify-content-center text-color-black-2\"\n >\n {{ data.galons }}\n </span>\n }\n\n <span\n class=\"money d-flex justify-content-end align-items-center ca-font-regular text-color-black-2\"\n >\n {{ (data.subtotal || data.total | currency: 'USD') ?? '$0.00' }}\n </span>\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}}.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}.main-container{max-width:320px;width:100%}.main-container .wrapper{max-width:308px;width:100%;font-family:Montserrat,sans-serif;padding-bottom:2px}.main-container .wrapper .included_excluded_holder{width:100%}.main-container .wrapper .included_excluded_holder .cdk-drop-list-receiving,.main-container .wrapper .included_excluded_holder .cdk-drop-list-dragging{position:relative;min-height:32px}.main-container .wrapper .container{gap:4px}.main-container .wrapper .container.title-container{height:36px;padding-left:6px;padding-right:10px}.main-container .wrapper .container .text-value{width:auto;height:26px}.main-container .wrapper .container .text-value .payment-count{gap:4px;color:#424242}.main-container .wrapper .container .text-value .payment-count .text{height:26px;width:auto}.main-container .wrapper .container .text-value .payment-count .round{width:18px;height:18px;border-radius:20px;background-color:#6c6c6c;color:#fff;font-size:11px;-ms-user-select:none;-webkit-user-select:none;user-select:none;-moz-user-select:none}.main-container .wrapper .container .text-value .value{height:26px;width:26px;justify-content:center}.main-container .wrapper .container .text-value .value-hover:hover{background-color:#e9effd;cursor:pointer}.main-container .wrapper .container .text-value .value-hover:hover svg{border-radius:2px}.main-container .wrapper .container .text-value .value-hover:hover svg path{fill:#0b49d1}.main-container .wrapper .container .text-value .value .total-money-closed{height:26px;width:26px}.main-container .wrapper .total-money-title{width:100%;padding-left:4px;padding-right:6px;height:26px;width:auto;margin:4px 0}.main-container .wrapper .total-money-title .total-money{width:auto}.main-container .wrapper .total-money-title .icon-total{gap:10px}.main-container .wrapper .total-money-title .icon-total .dolar-icon{height:18px;width:18px}.main-container .wrapper .total-money-title .icon-total .dolar-icon svg path{fill:currentColor}.main-container .wrapper .component-data-container{width:100%;gap:4px}.main-container .wrapper .component-data-container.empty_list_ex_in{position:absolute;width:300px}.main-container .container-empty{gap:4px;padding-left:6px;padding-right:18px;color:#aaa;width:100%}.main-container .container-empty.title-container{height:36px;border-top:1px solid #dadada;padding-left:6px;padding-right:10px;justify-content:center}.main-container .container-empty .text-value{width:auto;height:26px;gap:4px}.main-container .container-empty .text-value .payment-count{gap:4px}.main-container .container-empty .text-value .payment-count .text{height:26px;width:auto}.main-container .container-empty .text-value .payment-count .round{width:18px;height:18px;border-radius:20px;background-color:#6c6c6c;color:#fff;font-size:11px;-ms-user-select:none;-webkit-user-select:none;user-select:none;-moz-user-select:none}.main-container .container-empty .text-value .value{height:26px;width:26px;justify-content:center}.main-container .container-empty .text-value .value .icon:hover svg{background-color:#e9effd}.main-container .container-empty .text-value .value .icon:hover svg path{fill:#0b49d1}.main-container .container-empty .text-value .value .total-money-closed{height:26px;width:100%}.main-container .cdk-drag:not(.cdk-drag-disabled){transition:transform .25s cubic-bezier(.25,.1,.25,1);cursor:grab}.main-container .cdk-drag-preview{background-color:#424242!important;color:#fff;font-size:12px;box-shadow:0 2px 10px #0003;font-family:Montserrat,sans-serif;border-radius:3px}.main-container .cdk-drag-preview .location{color:#fff}.main-container .cdk-drag-preview .date{color:#919191}.main-container .cdk-drag-preview .money{color:#fff}.main-container .cdk-drop-list.cdk-drop-list-dragging{cursor:grabbing}.main-container .disabled-drag{pointer-events:none}.main-container .drag-disabled{cursor:not-allowed}.main-container .information{padding-right:6px}.main-container .information .number-date-location-holder{gap:4px}.main-container .information .icon-money-holder{max-width:130px;width:100%}.main-container .information:hover{background-color:#eee;border-radius:2px;transition:.3s}.main-container .information.clicked{background-color:#eee}.main-container .information.clicked:hover{background-color:#eee;opacity:1}.main-container .information .number{border-radius:2px;width:26px;height:26px;gap:2px;color:#919191}.main-container .information .date-location{max-width:200px}.main-container .information .date-location .location,.main-container .information .date-location .date{font-size:11px;line-height:13px}.main-container .information .date-location .date{color:#919191}.main-container .information .date-location .location{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block!important}.main-container .information .recurring{height:26px}.main-container .information .recurring-count{padding:2px 5px;background-color:#6c6c6c;border-radius:50px;color:#fff;font-size:11px;line-height:14px;font-weight:600}.main-container .information .money{height:26px;max-width:60px;width:100%;width:auto}.main-container .information .drag-preview-icon{width:26px;height:26px;display:flex;align-items:center;justify-content:center}.main-container .information .drag-preview-icon svg path{fill:#dadada}.main-container .information.excluded .date-location .location{color:#919191}.main-container .information.excluded .date-location .date,.main-container .information.excluded .number{color:#ccc}.main-container .information.excluded .money{color:#919191}.drag-placeholder{height:32px;width:100%;box-shadow:0 0 4px #0000004d inset;border-radius:3px}\n"] }]
|
|
21199
21190
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { disableReorder: [{
|
|
21200
21191
|
type: Input
|
|
21201
21192
|
}], included: [{
|
|
@@ -21294,7 +21285,7 @@ class CaPeriodContentUserInfoComponent {
|
|
|
21294
21285
|
return PayrollPeriodContentHelper.getSvgPath(propertyName);
|
|
21295
21286
|
}
|
|
21296
21287
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CaPeriodContentUserInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
21297
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaPeriodContentUserInfoComponent, isStandalone: true, selector: "app-ca-period-content-user-info", inputs: { componentData: "componentData", type: "type", isOpen: "isOpen" }, ngImport: i0, template: "<div class=\"title d-flex align-items-center\">\n @if (componentData) {\n <div class=\"container_period_content_user d-flex align-items-center\">\n @if (type !== 'OWNER') {\n <div class=\"profile_image_holder\">\n <app-ca-profile-image\n [isRound]=\"false\"\n [isHoverEffect]=\"false\"\n [textShortName]=\"\n componentData.fullName | userNameInitials\n \"\n size=\"74\"\n height=\"82\"\n [fontSize]=\"'28'\"\n [avatarImg]=\"componentData.avatar!\"\n ></app-ca-profile-image>\n </div>\n }\n <div\n class=\"user-information d-flex flex-column justify-content-center\"\n >\n <span\n class=\"user-detail ca-font-extra-bold user-name text-color-black\"\n >\n {{ componentData.fullName }}\n </span>\n <span\n class=\"user-detail d-flex align-items-center ca-font-medium payroll-number-content text-color-black\"\n >\n {{ componentData.payrollNumber }}\n </span>\n <span\n class=\"user-detail d-flex align-items-center ca-font-bold icon-row\"\n [ngClass]=\"isOpen | payrollStatusClass: componentData\"\n >\n <svg-icon\n class=\"d-flex icon align-items-center svg-size-18\"\n [src]=\"\n (isOpen | periodStatus: componentData)?.url || ''\n \"\n ></svg-icon>\n <span class=\"status-text text-color-black user-select-none\">\n {{\n (isOpen | periodStatus: componentData)?.title ?? ''\n }}\n </span>\n </span>\n </div>\n @if (type == 'OWNER') {\n <div class=\"semi-div d-flex align-items-end\">\n <img\n class=\"img-frame-semi\"\n [src]=\"getSvgPath('semiTruck')\"\n alt=\"User Avatar\"\n />\n </div>\n }\n </div>\n }\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}}.title{max-width:320px;height:108px;font-family:Montserrat,sans-serif;border-radius:3px;padding:6px}.title .container_period_content_user{max-width:100%;height:96px}.title .container_period_content_user .profile_image_holder{margin-right:12px}.title .container_period_content_user .img-frame{width:74px;height:82px}.title .container_period_content_user .semi-div{height:50px}.title .container_period_content_user .semi-div .img-frame-semi{width:96px;height:36px;-ms-user-select:none;-webkit-user-select:none;user-select:none;-moz-user-select:none}.title .container_period_content_user .user-information{width:210px;height:96px}.title .container_period_content_user .user-information .user-detail{height:30px;white-space:nowrap;text-overflow:ellipsis}.title .container_period_content_user .user-information .user-detail.payroll-number-content{font-weight:500;font-size:18px}.title .container_period_content_user .user-information .user-detail.user-name{font-weight:800;font-size:16px;max-width:300px;overflow:hidden;text-overflow:ellipsis;display:inline-block!important}.title .container_period_content_user .user-information .user-detail.icon-row{gap:4px}.title .container_period_content_user .user-information .user-detail svg-icon{width:18px;height:18px}.title .container_period_content_user .user-information .user-detail .status-text{font-weight:700;font-size:14px;text-transform:uppercase}.title .container_period_content_user .user-information .user-detail.incomplete svg-icon path{fill:#919191}.title .container_period_content_user .user-information .user-detail.incomplete .status-text{color:#919191}.title .container_period_content_user .user-information .user-detail.ready svg-icon path{fill:#6692f1}.title .container_period_content_user .user-information .user-detail.ready .status-text{color:#6692f1}.title .container_period_content_user .user-information .user-detail.overdue svg-icon path{fill:#e66767}.title .container_period_content_user .user-information .user-detail.overdue .status-text{color:#e66767}.title .container_period_content_user .user-information .user-detail.paidInFull svg-icon path{fill:#259f94}.title .container_period_content_user .user-information .user-detail.paidInFull .status-text{color:#259f94}.title .container_period_content_user .user-information .debt{color:#df3c3c}.title .container_period_content_user .user-information .debt .icon svg path{fill:#df3c3c}.title .container_period_content_user .user-information .neutral{color:#6c6c6c}.title .container_period_content_user .user-information .neutral .icon svg path{fill:#6c6c6c}.title .container_period_content_user .user-information .paid{color:#6692f1}.title .container_period_content_user .user-information .paid .icon svg path{fill:#6692f1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: CaProfileImageComponent, selector: "app-ca-profile-image", inputs: ["indx", "avatarImg", "avatarColor", "textShortName", "name", "isRound", "size", "height", "fontSize", "isHoverEffect", "isCursorPointer"] }, { kind: "pipe", type: PeriodStatusPipe, name: "periodStatus" }, { kind: "pipe", type: UserNameInitialsPipe, name: "userNameInitials" }, { kind: "pipe", type: PayrollStatusClassPipe, name: "payrollStatusClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
21288
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaPeriodContentUserInfoComponent, isStandalone: true, selector: "app-ca-period-content-user-info", inputs: { componentData: "componentData", type: "type", isOpen: "isOpen" }, ngImport: i0, template: "<div class=\"title d-flex align-items-center\">\n @if (componentData) {\n <div class=\"container_period_content_user d-flex align-items-center\">\n @if (type !== 'OWNER') {\n <div class=\"profile_image_holder\">\n <app-ca-profile-image\n [isRound]=\"false\"\n [isHoverEffect]=\"false\"\n [textShortName]=\"\n componentData.fullName | userNameInitials\n \"\n size=\"74\"\n height=\"82\"\n [fontSize]=\"'28'\"\n [avatarImg]=\"componentData.avatar!\"\n ></app-ca-profile-image>\n </div>\n }\n <div\n class=\"user-information d-flex flex-column justify-content-center\"\n >\n <span\n class=\"user-detail ca-font-extra-bold user-name text-color-black\"\n >\n {{ componentData.fullName }}\n </span>\n <span\n class=\"user-detail d-flex align-items-center ca-font-medium payroll-number-content text-color-black\"\n >\n {{ componentData.payrollNumber }}\n </span>\n <span\n class=\"user-detail d-flex align-items-center ca-font-bold icon-row\"\n [ngClass]=\"isOpen | payrollStatusClass: componentData\"\n >\n <svg-icon\n class=\"d-flex icon align-items-center svg-size-18\"\n [src]=\"\n (isOpen | periodStatus: componentData)?.url || ''\n \"\n ></svg-icon>\n <span class=\"status-text text-color-black user-select-none\">\n {{\n (isOpen | periodStatus: componentData)?.title ?? ''\n }}\n </span>\n </span>\n </div>\n @if (type == 'OWNER') {\n <div class=\"semi-div d-flex align-items-end\">\n <img\n class=\"img-frame-semi\"\n [src]=\"getSvgPath('semiTruck')\"\n alt=\"User Avatar\"\n />\n </div>\n }\n </div>\n }\n</div>\n", styles: [".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}}.title{max-width:320px;height:108px;font-family:Montserrat,sans-serif;border-radius:3px;padding:6px}.title .container_period_content_user{max-width:100%;height:96px}.title .container_period_content_user .profile_image_holder{margin-right:12px}.title .container_period_content_user .img-frame{width:74px;height:82px}.title .container_period_content_user .semi-div{height:50px}.title .container_period_content_user .semi-div .img-frame-semi{width:96px;height:36px;-ms-user-select:none;-webkit-user-select:none;user-select:none;-moz-user-select:none}.title .container_period_content_user .user-information{width:210px;height:96px}.title .container_period_content_user .user-information .user-detail{height:30px;white-space:nowrap;text-overflow:ellipsis}.title .container_period_content_user .user-information .user-detail.payroll-number-content{font-weight:500;font-size:18px}.title .container_period_content_user .user-information .user-detail.user-name{font-weight:800;font-size:16px;max-width:300px;overflow:hidden;text-overflow:ellipsis;display:inline-block!important}.title .container_period_content_user .user-information .user-detail.icon-row{gap:4px}.title .container_period_content_user .user-information .user-detail svg-icon{width:18px;height:18px}.title .container_period_content_user .user-information .user-detail .status-text{font-weight:700;font-size:14px;text-transform:uppercase}.title .container_period_content_user .user-information .user-detail.incomplete svg-icon path{fill:#919191}.title .container_period_content_user .user-information .user-detail.incomplete .status-text{color:#919191}.title .container_period_content_user .user-information .user-detail.ready svg-icon path{fill:#6692f1}.title .container_period_content_user .user-information .user-detail.ready .status-text{color:#6692f1}.title .container_period_content_user .user-information .user-detail.overdue svg-icon path{fill:#e66767}.title .container_period_content_user .user-information .user-detail.overdue .status-text{color:#e66767}.title .container_period_content_user .user-information .user-detail.paidInFull svg-icon path{fill:#259f94}.title .container_period_content_user .user-information .user-detail.paidInFull .status-text{color:#259f94}.title .container_period_content_user .user-information .debt{color:#df3c3c}.title .container_period_content_user .user-information .debt .icon svg path{fill:#df3c3c}.title .container_period_content_user .user-information .neutral{color:#6c6c6c}.title .container_period_content_user .user-information .neutral .icon svg path{fill:#6c6c6c}.title .container_period_content_user .user-information .paid{color:#6692f1}.title .container_period_content_user .user-information .paid .icon svg path{fill:#6692f1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: CaProfileImageComponent, selector: "app-ca-profile-image", inputs: ["indx", "avatarImg", "avatarColor", "textShortName", "name", "isRound", "size", "height", "fontSize", "isHoverEffect", "isCursorPointer"] }, { kind: "pipe", type: PeriodStatusPipe, name: "periodStatus" }, { kind: "pipe", type: UserNameInitialsPipe, name: "userNameInitials" }, { kind: "pipe", type: PayrollStatusClassPipe, name: "payrollStatusClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
21298
21289
|
}
|
|
21299
21290
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CaPeriodContentUserInfoComponent, decorators: [{
|
|
21300
21291
|
type: Component,
|
|
@@ -21305,7 +21296,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
21305
21296
|
PeriodStatusPipe,
|
|
21306
21297
|
UserNameInitialsPipe,
|
|
21307
21298
|
PayrollStatusClassPipe,
|
|
21308
|
-
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"title d-flex align-items-center\">\n @if (componentData) {\n <div class=\"container_period_content_user d-flex align-items-center\">\n @if (type !== 'OWNER') {\n <div class=\"profile_image_holder\">\n <app-ca-profile-image\n [isRound]=\"false\"\n [isHoverEffect]=\"false\"\n [textShortName]=\"\n componentData.fullName | userNameInitials\n \"\n size=\"74\"\n height=\"82\"\n [fontSize]=\"'28'\"\n [avatarImg]=\"componentData.avatar!\"\n ></app-ca-profile-image>\n </div>\n }\n <div\n class=\"user-information d-flex flex-column justify-content-center\"\n >\n <span\n class=\"user-detail ca-font-extra-bold user-name text-color-black\"\n >\n {{ componentData.fullName }}\n </span>\n <span\n class=\"user-detail d-flex align-items-center ca-font-medium payroll-number-content text-color-black\"\n >\n {{ componentData.payrollNumber }}\n </span>\n <span\n class=\"user-detail d-flex align-items-center ca-font-bold icon-row\"\n [ngClass]=\"isOpen | payrollStatusClass: componentData\"\n >\n <svg-icon\n class=\"d-flex icon align-items-center svg-size-18\"\n [src]=\"\n (isOpen | periodStatus: componentData)?.url || ''\n \"\n ></svg-icon>\n <span class=\"status-text text-color-black user-select-none\">\n {{\n (isOpen | periodStatus: componentData)?.title ?? ''\n }}\n </span>\n </span>\n </div>\n @if (type == 'OWNER') {\n <div class=\"semi-div d-flex align-items-end\">\n <img\n class=\"img-frame-semi\"\n [src]=\"getSvgPath('semiTruck')\"\n alt=\"User Avatar\"\n />\n </div>\n }\n </div>\n }\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}}.title{max-width:320px;height:108px;font-family:Montserrat,sans-serif;border-radius:3px;padding:6px}.title .container_period_content_user{max-width:100%;height:96px}.title .container_period_content_user .profile_image_holder{margin-right:12px}.title .container_period_content_user .img-frame{width:74px;height:82px}.title .container_period_content_user .semi-div{height:50px}.title .container_period_content_user .semi-div .img-frame-semi{width:96px;height:36px;-ms-user-select:none;-webkit-user-select:none;user-select:none;-moz-user-select:none}.title .container_period_content_user .user-information{width:210px;height:96px}.title .container_period_content_user .user-information .user-detail{height:30px;white-space:nowrap;text-overflow:ellipsis}.title .container_period_content_user .user-information .user-detail.payroll-number-content{font-weight:500;font-size:18px}.title .container_period_content_user .user-information .user-detail.user-name{font-weight:800;font-size:16px;max-width:300px;overflow:hidden;text-overflow:ellipsis;display:inline-block!important}.title .container_period_content_user .user-information .user-detail.icon-row{gap:4px}.title .container_period_content_user .user-information .user-detail svg-icon{width:18px;height:18px}.title .container_period_content_user .user-information .user-detail .status-text{font-weight:700;font-size:14px;text-transform:uppercase}.title .container_period_content_user .user-information .user-detail.incomplete svg-icon path{fill:#919191}.title .container_period_content_user .user-information .user-detail.incomplete .status-text{color:#919191}.title .container_period_content_user .user-information .user-detail.ready svg-icon path{fill:#6692f1}.title .container_period_content_user .user-information .user-detail.ready .status-text{color:#6692f1}.title .container_period_content_user .user-information .user-detail.overdue svg-icon path{fill:#e66767}.title .container_period_content_user .user-information .user-detail.overdue .status-text{color:#e66767}.title .container_period_content_user .user-information .user-detail.paidInFull svg-icon path{fill:#259f94}.title .container_period_content_user .user-information .user-detail.paidInFull .status-text{color:#259f94}.title .container_period_content_user .user-information .debt{color:#df3c3c}.title .container_period_content_user .user-information .debt .icon svg path{fill:#df3c3c}.title .container_period_content_user .user-information .neutral{color:#6c6c6c}.title .container_period_content_user .user-information .neutral .icon svg path{fill:#6c6c6c}.title .container_period_content_user .user-information .paid{color:#6692f1}.title .container_period_content_user .user-information .paid .icon svg path{fill:#6692f1}\n"] }]
|
|
21299
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"title d-flex align-items-center\">\n @if (componentData) {\n <div class=\"container_period_content_user d-flex align-items-center\">\n @if (type !== 'OWNER') {\n <div class=\"profile_image_holder\">\n <app-ca-profile-image\n [isRound]=\"false\"\n [isHoverEffect]=\"false\"\n [textShortName]=\"\n componentData.fullName | userNameInitials\n \"\n size=\"74\"\n height=\"82\"\n [fontSize]=\"'28'\"\n [avatarImg]=\"componentData.avatar!\"\n ></app-ca-profile-image>\n </div>\n }\n <div\n class=\"user-information d-flex flex-column justify-content-center\"\n >\n <span\n class=\"user-detail ca-font-extra-bold user-name text-color-black\"\n >\n {{ componentData.fullName }}\n </span>\n <span\n class=\"user-detail d-flex align-items-center ca-font-medium payroll-number-content text-color-black\"\n >\n {{ componentData.payrollNumber }}\n </span>\n <span\n class=\"user-detail d-flex align-items-center ca-font-bold icon-row\"\n [ngClass]=\"isOpen | payrollStatusClass: componentData\"\n >\n <svg-icon\n class=\"d-flex icon align-items-center svg-size-18\"\n [src]=\"\n (isOpen | periodStatus: componentData)?.url || ''\n \"\n ></svg-icon>\n <span class=\"status-text text-color-black user-select-none\">\n {{\n (isOpen | periodStatus: componentData)?.title ?? ''\n }}\n </span>\n </span>\n </div>\n @if (type == 'OWNER') {\n <div class=\"semi-div d-flex align-items-end\">\n <img\n class=\"img-frame-semi\"\n [src]=\"getSvgPath('semiTruck')\"\n alt=\"User Avatar\"\n />\n </div>\n }\n </div>\n }\n</div>\n", styles: [".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}}.title{max-width:320px;height:108px;font-family:Montserrat,sans-serif;border-radius:3px;padding:6px}.title .container_period_content_user{max-width:100%;height:96px}.title .container_period_content_user .profile_image_holder{margin-right:12px}.title .container_period_content_user .img-frame{width:74px;height:82px}.title .container_period_content_user .semi-div{height:50px}.title .container_period_content_user .semi-div .img-frame-semi{width:96px;height:36px;-ms-user-select:none;-webkit-user-select:none;user-select:none;-moz-user-select:none}.title .container_period_content_user .user-information{width:210px;height:96px}.title .container_period_content_user .user-information .user-detail{height:30px;white-space:nowrap;text-overflow:ellipsis}.title .container_period_content_user .user-information .user-detail.payroll-number-content{font-weight:500;font-size:18px}.title .container_period_content_user .user-information .user-detail.user-name{font-weight:800;font-size:16px;max-width:300px;overflow:hidden;text-overflow:ellipsis;display:inline-block!important}.title .container_period_content_user .user-information .user-detail.icon-row{gap:4px}.title .container_period_content_user .user-information .user-detail svg-icon{width:18px;height:18px}.title .container_period_content_user .user-information .user-detail .status-text{font-weight:700;font-size:14px;text-transform:uppercase}.title .container_period_content_user .user-information .user-detail.incomplete svg-icon path{fill:#919191}.title .container_period_content_user .user-information .user-detail.incomplete .status-text{color:#919191}.title .container_period_content_user .user-information .user-detail.ready svg-icon path{fill:#6692f1}.title .container_period_content_user .user-information .user-detail.ready .status-text{color:#6692f1}.title .container_period_content_user .user-information .user-detail.overdue svg-icon path{fill:#e66767}.title .container_period_content_user .user-information .user-detail.overdue .status-text{color:#e66767}.title .container_period_content_user .user-information .user-detail.paidInFull svg-icon path{fill:#259f94}.title .container_period_content_user .user-information .user-detail.paidInFull .status-text{color:#259f94}.title .container_period_content_user .user-information .debt{color:#df3c3c}.title .container_period_content_user .user-information .debt .icon svg path{fill:#df3c3c}.title .container_period_content_user .user-information .neutral{color:#6c6c6c}.title .container_period_content_user .user-information .neutral .icon svg path{fill:#6c6c6c}.title .container_period_content_user .user-information .paid{color:#6692f1}.title .container_period_content_user .user-information .paid .icon svg path{fill:#6692f1}\n"] }]
|
|
21309
21300
|
}], propDecorators: { componentData: [{
|
|
21310
21301
|
type: Input
|
|
21311
21302
|
}], type: [{
|
|
@@ -21338,7 +21329,7 @@ class CaPeriodContentComponent {
|
|
|
21338
21329
|
this.openActionEditItems.emit(item);
|
|
21339
21330
|
}
|
|
21340
21331
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CaPeriodContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
21341
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaPeriodContentComponent, isStandalone: true, selector: "app-ca-period-content", inputs: { isOpen: "isOpen", type: "type", componentData: "componentData" }, outputs: { reorderedDataEmiter: "reorderedDataEmiter", openModalEmiter: "openModalEmiter", openActionEditItems: "openActionEditItems", proccessPayroll: "proccessPayroll" }, providers: [FormatCurrencyPipe], ngImport: i0, template: "@if (componentData) {\n <div class=\"main-container\">\n <!-- User info -->\n <app-ca-period-content-user-info\n [componentData]=\"componentData\"\n [type]=\"type\"\n [isOpen]=\"isOpen\"\n ></app-ca-period-content-user-info>\n\n <!-- Bonues, salary... -->\n <div class=\"payment-container d-flex flex-column align-items-center\">\n <div\n class=\"extra-info-holder d-flex flex-column align-items-center\"\n >\n @if (type === 'MILEAGE') {\n <div class=\"component-holder\">\n <app-ca-period-content-extra-info\n title=\"Mileage pay\"\n [amount]=\"componentData.mileagePay\"\n ></app-ca-period-content-extra-info>\n <app-ca-period-content-extra-info\n title=\"Extra stop\"\n [amount]=\"componentData.extraStopPay || 0\"\n [stopsCount]=\"componentData.extraStopCount\"\n ></app-ca-period-content-extra-info>\n </div>\n }\n @if (type === 'FLAT_RATE') {\n <ng-container #flatRate>\n <div class=\"component-holder\">\n <app-ca-period-content-extra-info\n title=\"Load pay\"\n [amount]=\"componentData?.flatPay\"\n ></app-ca-period-content-extra-info>\n </div>\n </ng-container>\n }\n </div>\n\n <!-- BONUS -->\n @if (type === 'MILEAGE' || type === 'FLAT_RATE') {\n <div class=\"component-holder with-border-top\">\n <app-ca-period-content-payment\n (reorderedDataEmiter)=\"getReorderedData($event)\"\n (openAddNewModalEmiter)=\"openAddNewModal($event)\"\n (openEditEntryItem)=\"handleOpenEditEntryItem($event)\"\n [title]=\"'Bonus'\"\n [isOpen]=\"isOpen\"\n [included]=\"componentData?.includedBonuses!\"\n [excluded]=\"componentData?.excludedBonuses!\"\n [disableReorder]=\"true\"\n ></app-ca-period-content-payment>\n </div>\n }\n\n <div\n class=\"salary d-flex justify-content-between align-items-center\"\n >\n <span class=\"salary-title ca-font-extra-bold text-color-black user-select-none\">\n SALARY\n </span>\n <span class=\"salary-value ca-font-bold text-color-black\">\n {{ componentData.salary! | formatCurrency }}\n </span>\n </div>\n\n <!-- CREDIT -->\n <div class=\"component-holder\">\n <app-ca-period-content-payment\n (openAddNewModalEmiter)=\"openAddNewModal($event)\"\n (openEditEntryItem)=\"handleOpenEditEntryItem($event)\"\n [title]=\"'Credit'\"\n [isOpen]=\"isOpen\"\n (reorderedDataEmiter)=\"getReorderedData($event)\"\n [included]=\"componentData?.includedCredits!\"\n [excluded]=\"[]\"\n ></app-ca-period-content-payment>\n </div>\n\n <!-- FUEL -->\n @if (type === 'OWNER') {\n <div class=\"component-holder\">\n <app-ca-period-content-payment\n (openAddNewModalEmiter)=\"openAddNewModal($event)\"\n (openEditEntryItem)=\"handleOpenEditEntryItem($event)\"\n [title]=\"'Fuel'\"\n [isOpen]=\"isOpen\"\n (reorderedDataEmiter)=\"getReorderedData($event)\"\n [included]=\"componentData?.includedFuels!\"\n [excluded]=\"componentData?.excludedFuels!\"\n ></app-ca-period-content-payment>\n </div>\n }\n\n <!-- DEDUCTION -->\n <div class=\"component-holder with-border-top\">\n <app-ca-period-content-payment\n (openAddNewModalEmiter)=\"openAddNewModal($event)\"\n (openEditEntryItem)=\"handleOpenEditEntryItem($event)\"\n [title]=\"'Deduction'\"\n [isOpen]=\"isOpen\"\n (reorderedDataEmiter)=\"getReorderedData($event)\"\n [included]=\"componentData?.includedDeductions!\"\n [excluded]=\"componentData?.excludedDeductions!\"\n ></app-ca-period-content-payment>\n </div>\n\n <div\n class=\"earnings d-flex justify-content-between align-items-center\"\n >\n <span\n class=\"ca-font-extra-bold earnings-tlitle text-color-blue-13 user-select-none\"\n >\n EARNINGS\n </span>\n @if (componentData) {\n <span class=\"ca-font-bold money text-color-blue-13\">\n {{ componentData!.earnings! | formatCurrency }}\n </span>\n }\n </div>\n\n @if (componentData.payments) {\n <div class=\"component-holder with-border-top\">\n <app-ca-period-content-payment\n [title]=\"'Transaction'\"\n [isOpen]=\"isOpen\"\n (reorderedDataEmiter)=\"getReorderedData($event)\"\n (openEditEntryItem)=\"handleOpenEditEntryItem($event)\"\n [included]=\"componentData.payments\"\n [excluded]=\"[]\"\n [hideTotal]=\"true\"\n ></app-ca-period-content-payment>\n </div>\n }\n\n <!-- PROCESS BUTTON -->\n @if (componentData!.debt && !isOpen) {\n <div\n class=\"earnings d-flex justify-content-between align-items-center debth\"\n >\n <span\n class=\"ca-font-extra-bold earnings-tlitle text-color-red-11 user-select-none\"\n >\n DEBT\n </span>\n @if (componentData) {\n <span class=\"ca-font-bold money text-color-red-11\">\n {{ componentData!.debt! | formatCurrency }}\n </span>\n }\n </div>\n }\n\n @if (isOpen) {\n <div\n class=\"button-cnt process-btn d-flex justify-content-between align-items-center\"\n >\n <button\n (click)=\"processPayment()\"\n class=\"earnings process-button ca-font-bold user-select-none\"\n [class.incomplete-status]=\"\n componentData.payrollDeadLine?.period == 'Pending'\n \"\n [class]=\"{\n 'text-color-blue-13':\n componentData.payrollDeadLine?.period ===\n 'Pending',\n 'text-color-white-2':\n componentData.payrollDeadLine?.period !==\n 'Pending',\n }\"\n >\n {{\n componentData.payrollDeadLine?.period == 'Pending'\n ? 'Process Early'\n : 'Process'\n }}\n </button>\n </div>\n } @else {\n @if (componentData.status?.id === 4) {\n <div\n [ngStyle]=\"{\n backgroundColor:\n componentData.status.id == 4\n ? '#F7F7F7'\n : '#FBE9E9',\n color:\n componentData.status.id == 4\n ? '#259F94'\n : '#DF3C3C',\n }\"\n class=\"earnings paid-in-full d-flex justify-content-between align-items-center\"\n >\n <span class=\"ca-font-extra-bold text-color-green-2 user-select-none\">\n PAID IN FULL\n </span>\n <span class=\"ca-font-bold money text-color-green-2\">\n {{ componentData!.earnings! | formatCurrency }}\n </span>\n </div>\n }\n @if (componentData.status?.id != 4) {\n <div\n class=\"button-cnt d-flex justify-content-between align-items-center\"\n >\n <button\n class=\"earnings process-button ca-font-bold user-select-none\"\n (click)=\"addPayment()\"\n >\n Add payment\n </button>\n </div>\n }\n }\n\n <!-- PROCESS BUTTON END -->\n </div>\n </div>\n}\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}}.main-container{background-color:#fff;border-radius:3px;max-width:320px}.main-container .payment-container{max-width:320px;font-family:Montserrat,sans-serif}.main-container .payment-container .component-holder{max-width:308px;width:100%}.main-container .payment-container .component-holder.with-border-top{border-top:1px solid #dadada}.main-container .payment-container .extra-info-holder{max-width:320px;width:100%}.main-container .payment-container .extra-info-holder .divider-custom{max-width:296px;height:8px;border-top:solid 2px #dadada}.main-container .payment-container .extra-info-holder .component-holder{max-width:308px;width:100%}.main-container .payment-container .divider-custom{max-width:296px;height:8px;border-top:solid 2px #dadada}.main-container .payment-container .mileage-pay{height:34px;gap:4px;padding:0 6px}.main-container .payment-container .mileage-pay .text-value{width:auto;height:26px;gap:4px}.main-container .payment-container .mileage-pay .text-value .payment-count{gap:4px;color:#424242}.main-container .payment-container .mileage-pay .text-value .payment-count .text{height:26px;width:auto}.main-container .payment-container .mileage-pay .text-value .payment-count .round{width:18px;height:18px;border-radius:20px;background-color:#6c6c6c;color:#fff;font-size:11px;line-height:18px;text-align:center}.main-container .payment-container .mileage-pay .text-value .value,.main-container .payment-container .mileage-pay .text-value .value .total-money-closed{height:26px;width:auto}.main-container .payment-container .salary-value{padding-right:4px}.main-container .payment-container .salary-title{padding-left:5px}.main-container .payment-container .salary,.main-container .payment-container .earnings{background-color:#f7f7f7;height:30px;width:100%;max-width:308px;border-radius:2px}.main-container .payment-container .salary .money,.main-container .payment-container .earnings .money{padding-right:6px}.main-container .payment-container .salary .earnings-tlitle,.main-container .payment-container .earnings .earnings-tlitle{margin-left:6px}.main-container .payment-container .salary.debth,.main-container .payment-container .earnings.debth{background-color:#fbe9e9}.main-container .payment-container .salary.debth .money,.main-container .payment-container .earnings.debth .money{color:#df3c3c}.main-container .payment-container .earnings{color:#6692f1}.main-container .payment-container .paid-in-full{color:#259f94}.main-container .payment-container .paid-in-full .ca-font-extra-bold{padding-left:6px}.main-container .payment-container .button-cnt{height:40px;width:100%;border-radius:2px;padding:5px 0}.main-container .payment-container .process-btn:hover .earnings{background-color:#dedede}.main-container .payment-container .process-button{background-color:#6692f1;border-radius:2px;border:none;color:#eee;transition:background-color .3s ease;height:32px}.main-container .payment-container .process-button.incomplete-status{background-color:#eee;color:#6692f1}.main-container .payment-container .process-button:not(.incomplete-status):hover{background-color:#3771ed;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
21332
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaPeriodContentComponent, isStandalone: true, selector: "app-ca-period-content", inputs: { isOpen: "isOpen", type: "type", componentData: "componentData" }, outputs: { reorderedDataEmiter: "reorderedDataEmiter", openModalEmiter: "openModalEmiter", openActionEditItems: "openActionEditItems", proccessPayroll: "proccessPayroll" }, providers: [FormatCurrencyPipe], ngImport: i0, template: "@if (componentData) {\n <div class=\"main-container\">\n <!-- User info -->\n <app-ca-period-content-user-info\n [componentData]=\"componentData\"\n [type]=\"type\"\n [isOpen]=\"isOpen\"\n ></app-ca-period-content-user-info>\n\n <!-- Bonues, salary... -->\n <div class=\"payment-container d-flex flex-column align-items-center\">\n <div\n class=\"extra-info-holder d-flex flex-column align-items-center\"\n >\n @if (type === 'MILEAGE') {\n <div class=\"component-holder\">\n <app-ca-period-content-extra-info\n title=\"Mileage pay\"\n [amount]=\"componentData.mileagePay\"\n ></app-ca-period-content-extra-info>\n <app-ca-period-content-extra-info\n title=\"Extra stop\"\n [amount]=\"componentData.extraStopPay || 0\"\n [stopsCount]=\"componentData.extraStopCount\"\n ></app-ca-period-content-extra-info>\n </div>\n }\n @if (type === 'FLAT_RATE') {\n <ng-container #flatRate>\n <div class=\"component-holder\">\n <app-ca-period-content-extra-info\n title=\"Load pay\"\n [amount]=\"componentData?.flatPay\"\n ></app-ca-period-content-extra-info>\n </div>\n </ng-container>\n }\n </div>\n\n <!-- BONUS -->\n @if (type === 'MILEAGE' || type === 'FLAT_RATE') {\n <div class=\"component-holder with-border-top\">\n <app-ca-period-content-payment\n (reorderedDataEmiter)=\"getReorderedData($event)\"\n (openAddNewModalEmiter)=\"openAddNewModal($event)\"\n (openEditEntryItem)=\"handleOpenEditEntryItem($event)\"\n [title]=\"'Bonus'\"\n [isOpen]=\"isOpen\"\n [included]=\"componentData?.includedBonuses!\"\n [excluded]=\"componentData?.excludedBonuses!\"\n [disableReorder]=\"true\"\n ></app-ca-period-content-payment>\n </div>\n }\n\n <div\n class=\"salary d-flex justify-content-between align-items-center\"\n >\n <span class=\"salary-title ca-font-extra-bold text-color-black user-select-none\">\n SALARY\n </span>\n <span class=\"salary-value ca-font-bold text-color-black\">\n {{ componentData.salary! | formatCurrency }}\n </span>\n </div>\n\n <!-- CREDIT -->\n <div class=\"component-holder\">\n <app-ca-period-content-payment\n (openAddNewModalEmiter)=\"openAddNewModal($event)\"\n (openEditEntryItem)=\"handleOpenEditEntryItem($event)\"\n [title]=\"'Credit'\"\n [isOpen]=\"isOpen\"\n (reorderedDataEmiter)=\"getReorderedData($event)\"\n [included]=\"componentData?.includedCredits!\"\n [excluded]=\"[]\"\n ></app-ca-period-content-payment>\n </div>\n\n <!-- FUEL -->\n @if (type === 'OWNER') {\n <div class=\"component-holder\">\n <app-ca-period-content-payment\n (openAddNewModalEmiter)=\"openAddNewModal($event)\"\n (openEditEntryItem)=\"handleOpenEditEntryItem($event)\"\n [title]=\"'Fuel'\"\n [isOpen]=\"isOpen\"\n (reorderedDataEmiter)=\"getReorderedData($event)\"\n [included]=\"componentData?.includedFuels!\"\n [excluded]=\"componentData?.excludedFuels!\"\n ></app-ca-period-content-payment>\n </div>\n }\n\n <!-- DEDUCTION -->\n <div class=\"component-holder with-border-top\">\n <app-ca-period-content-payment\n (openAddNewModalEmiter)=\"openAddNewModal($event)\"\n (openEditEntryItem)=\"handleOpenEditEntryItem($event)\"\n [title]=\"'Deduction'\"\n [isOpen]=\"isOpen\"\n (reorderedDataEmiter)=\"getReorderedData($event)\"\n [included]=\"componentData?.includedDeductions!\"\n [excluded]=\"componentData?.excludedDeductions!\"\n ></app-ca-period-content-payment>\n </div>\n\n <div\n class=\"earnings d-flex justify-content-between align-items-center\"\n >\n <span\n class=\"ca-font-extra-bold earnings-tlitle text-color-blue-13 user-select-none\"\n >\n EARNINGS\n </span>\n @if (componentData) {\n <span class=\"ca-font-bold money text-color-blue-13\">\n {{ componentData!.earnings! | formatCurrency }}\n </span>\n }\n </div>\n\n @if (componentData.payments) {\n <div class=\"component-holder with-border-top\">\n <app-ca-period-content-payment\n [title]=\"'Transaction'\"\n [isOpen]=\"isOpen\"\n (reorderedDataEmiter)=\"getReorderedData($event)\"\n (openEditEntryItem)=\"handleOpenEditEntryItem($event)\"\n [included]=\"componentData.payments\"\n [excluded]=\"[]\"\n [hideTotal]=\"true\"\n ></app-ca-period-content-payment>\n </div>\n }\n\n <!-- PROCESS BUTTON -->\n @if (componentData!.debt && !isOpen) {\n <div\n class=\"earnings d-flex justify-content-between align-items-center debth\"\n >\n <span\n class=\"ca-font-extra-bold earnings-tlitle text-color-red-11 user-select-none\"\n >\n DEBT\n </span>\n @if (componentData) {\n <span class=\"ca-font-bold money text-color-red-11\">\n {{ componentData!.debt! | formatCurrency }}\n </span>\n }\n </div>\n }\n\n @if (isOpen) {\n <div\n class=\"button-cnt process-btn d-flex justify-content-between align-items-center\"\n >\n <button\n (click)=\"processPayment()\"\n class=\"earnings process-button ca-font-bold user-select-none\"\n [class.incomplete-status]=\"\n componentData.payrollDeadLine?.period == 'Pending'\n \"\n [class]=\"{\n 'text-color-blue-13':\n componentData.payrollDeadLine?.period ===\n 'Pending',\n 'text-color-white-2':\n componentData.payrollDeadLine?.period !==\n 'Pending',\n }\"\n >\n {{\n componentData.payrollDeadLine?.period == 'Pending'\n ? 'Process Early'\n : 'Process'\n }}\n </button>\n </div>\n } @else {\n @if (componentData.status?.id === 4) {\n <div\n [ngStyle]=\"{\n backgroundColor:\n componentData.status.id == 4\n ? '#F7F7F7'\n : '#FBE9E9',\n color:\n componentData.status.id == 4\n ? '#259F94'\n : '#DF3C3C',\n }\"\n class=\"earnings paid-in-full d-flex justify-content-between align-items-center\"\n >\n <span class=\"ca-font-extra-bold text-color-green-2 user-select-none\">\n PAID IN FULL\n </span>\n <span class=\"ca-font-bold money text-color-green-2\">\n {{ componentData!.earnings! | formatCurrency }}\n </span>\n </div>\n }\n @if (componentData.status?.id != 4) {\n <div\n class=\"button-cnt d-flex justify-content-between align-items-center\"\n >\n <button\n class=\"earnings process-button ca-font-bold user-select-none\"\n (click)=\"addPayment()\"\n >\n Add payment\n </button>\n </div>\n }\n }\n\n <!-- PROCESS BUTTON END -->\n </div>\n </div>\n}\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}}.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}.main-container{background-color:#fff;border-radius:3px;max-width:320px}.main-container .payment-container{max-width:320px;font-family:Montserrat,sans-serif}.main-container .payment-container .component-holder{max-width:308px;width:100%}.main-container .payment-container .component-holder.with-border-top{border-top:1px solid #dadada}.main-container .payment-container .extra-info-holder{max-width:320px;width:100%}.main-container .payment-container .extra-info-holder .divider-custom{max-width:296px;height:8px;border-top:solid 2px #dadada}.main-container .payment-container .extra-info-holder .component-holder{max-width:308px;width:100%}.main-container .payment-container .divider-custom{max-width:296px;height:8px;border-top:solid 2px #dadada}.main-container .payment-container .mileage-pay{height:34px;gap:4px;padding:0 6px}.main-container .payment-container .mileage-pay .text-value{width:auto;height:26px;gap:4px}.main-container .payment-container .mileage-pay .text-value .payment-count{gap:4px;color:#424242}.main-container .payment-container .mileage-pay .text-value .payment-count .text{height:26px;width:auto}.main-container .payment-container .mileage-pay .text-value .payment-count .round{width:18px;height:18px;border-radius:20px;background-color:#6c6c6c;color:#fff;font-size:11px;line-height:18px;text-align:center}.main-container .payment-container .mileage-pay .text-value .value,.main-container .payment-container .mileage-pay .text-value .value .total-money-closed{height:26px;width:auto}.main-container .payment-container .salary-value{padding-right:4px}.main-container .payment-container .salary-title{padding-left:5px}.main-container .payment-container .salary,.main-container .payment-container .earnings{background-color:#f7f7f7;height:30px;width:100%;max-width:308px;border-radius:2px}.main-container .payment-container .salary .money,.main-container .payment-container .earnings .money{padding-right:6px}.main-container .payment-container .salary .earnings-tlitle,.main-container .payment-container .earnings .earnings-tlitle{margin-left:6px}.main-container .payment-container .salary.debth,.main-container .payment-container .earnings.debth{background-color:#fbe9e9}.main-container .payment-container .salary.debth .money,.main-container .payment-container .earnings.debth .money{color:#df3c3c}.main-container .payment-container .earnings{color:#6692f1}.main-container .payment-container .paid-in-full{color:#259f94}.main-container .payment-container .paid-in-full .ca-font-extra-bold{padding-left:6px}.main-container .payment-container .button-cnt{height:40px;width:100%;border-radius:2px;padding:5px 0}.main-container .payment-container .process-btn:hover .earnings{background-color:#dedede}.main-container .payment-container .process-button{background-color:#6692f1;border-radius:2px;border:none;color:#eee;transition:background-color .3s ease;height:32px}.main-container .payment-container .process-button.incomplete-status{background-color:#eee;color:#6692f1}.main-container .payment-container .process-button:not(.incomplete-status):hover{background-color:#3771ed;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
21342
21333
|
//Modules
|
|
21343
21334
|
CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AngularSvgIconModule }, { kind: "component", type:
|
|
21344
21335
|
//Components
|
|
@@ -21358,7 +21349,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
21358
21349
|
CaPeriodContentExtraInfoComponent,
|
|
21359
21350
|
//pipes
|
|
21360
21351
|
FormatCurrencyPipe,
|
|
21361
|
-
], template: "@if (componentData) {\n <div class=\"main-container\">\n <!-- User info -->\n <app-ca-period-content-user-info\n [componentData]=\"componentData\"\n [type]=\"type\"\n [isOpen]=\"isOpen\"\n ></app-ca-period-content-user-info>\n\n <!-- Bonues, salary... -->\n <div class=\"payment-container d-flex flex-column align-items-center\">\n <div\n class=\"extra-info-holder d-flex flex-column align-items-center\"\n >\n @if (type === 'MILEAGE') {\n <div class=\"component-holder\">\n <app-ca-period-content-extra-info\n title=\"Mileage pay\"\n [amount]=\"componentData.mileagePay\"\n ></app-ca-period-content-extra-info>\n <app-ca-period-content-extra-info\n title=\"Extra stop\"\n [amount]=\"componentData.extraStopPay || 0\"\n [stopsCount]=\"componentData.extraStopCount\"\n ></app-ca-period-content-extra-info>\n </div>\n }\n @if (type === 'FLAT_RATE') {\n <ng-container #flatRate>\n <div class=\"component-holder\">\n <app-ca-period-content-extra-info\n title=\"Load pay\"\n [amount]=\"componentData?.flatPay\"\n ></app-ca-period-content-extra-info>\n </div>\n </ng-container>\n }\n </div>\n\n <!-- BONUS -->\n @if (type === 'MILEAGE' || type === 'FLAT_RATE') {\n <div class=\"component-holder with-border-top\">\n <app-ca-period-content-payment\n (reorderedDataEmiter)=\"getReorderedData($event)\"\n (openAddNewModalEmiter)=\"openAddNewModal($event)\"\n (openEditEntryItem)=\"handleOpenEditEntryItem($event)\"\n [title]=\"'Bonus'\"\n [isOpen]=\"isOpen\"\n [included]=\"componentData?.includedBonuses!\"\n [excluded]=\"componentData?.excludedBonuses!\"\n [disableReorder]=\"true\"\n ></app-ca-period-content-payment>\n </div>\n }\n\n <div\n class=\"salary d-flex justify-content-between align-items-center\"\n >\n <span class=\"salary-title ca-font-extra-bold text-color-black user-select-none\">\n SALARY\n </span>\n <span class=\"salary-value ca-font-bold text-color-black\">\n {{ componentData.salary! | formatCurrency }}\n </span>\n </div>\n\n <!-- CREDIT -->\n <div class=\"component-holder\">\n <app-ca-period-content-payment\n (openAddNewModalEmiter)=\"openAddNewModal($event)\"\n (openEditEntryItem)=\"handleOpenEditEntryItem($event)\"\n [title]=\"'Credit'\"\n [isOpen]=\"isOpen\"\n (reorderedDataEmiter)=\"getReorderedData($event)\"\n [included]=\"componentData?.includedCredits!\"\n [excluded]=\"[]\"\n ></app-ca-period-content-payment>\n </div>\n\n <!-- FUEL -->\n @if (type === 'OWNER') {\n <div class=\"component-holder\">\n <app-ca-period-content-payment\n (openAddNewModalEmiter)=\"openAddNewModal($event)\"\n (openEditEntryItem)=\"handleOpenEditEntryItem($event)\"\n [title]=\"'Fuel'\"\n [isOpen]=\"isOpen\"\n (reorderedDataEmiter)=\"getReorderedData($event)\"\n [included]=\"componentData?.includedFuels!\"\n [excluded]=\"componentData?.excludedFuels!\"\n ></app-ca-period-content-payment>\n </div>\n }\n\n <!-- DEDUCTION -->\n <div class=\"component-holder with-border-top\">\n <app-ca-period-content-payment\n (openAddNewModalEmiter)=\"openAddNewModal($event)\"\n (openEditEntryItem)=\"handleOpenEditEntryItem($event)\"\n [title]=\"'Deduction'\"\n [isOpen]=\"isOpen\"\n (reorderedDataEmiter)=\"getReorderedData($event)\"\n [included]=\"componentData?.includedDeductions!\"\n [excluded]=\"componentData?.excludedDeductions!\"\n ></app-ca-period-content-payment>\n </div>\n\n <div\n class=\"earnings d-flex justify-content-between align-items-center\"\n >\n <span\n class=\"ca-font-extra-bold earnings-tlitle text-color-blue-13 user-select-none\"\n >\n EARNINGS\n </span>\n @if (componentData) {\n <span class=\"ca-font-bold money text-color-blue-13\">\n {{ componentData!.earnings! | formatCurrency }}\n </span>\n }\n </div>\n\n @if (componentData.payments) {\n <div class=\"component-holder with-border-top\">\n <app-ca-period-content-payment\n [title]=\"'Transaction'\"\n [isOpen]=\"isOpen\"\n (reorderedDataEmiter)=\"getReorderedData($event)\"\n (openEditEntryItem)=\"handleOpenEditEntryItem($event)\"\n [included]=\"componentData.payments\"\n [excluded]=\"[]\"\n [hideTotal]=\"true\"\n ></app-ca-period-content-payment>\n </div>\n }\n\n <!-- PROCESS BUTTON -->\n @if (componentData!.debt && !isOpen) {\n <div\n class=\"earnings d-flex justify-content-between align-items-center debth\"\n >\n <span\n class=\"ca-font-extra-bold earnings-tlitle text-color-red-11 user-select-none\"\n >\n DEBT\n </span>\n @if (componentData) {\n <span class=\"ca-font-bold money text-color-red-11\">\n {{ componentData!.debt! | formatCurrency }}\n </span>\n }\n </div>\n }\n\n @if (isOpen) {\n <div\n class=\"button-cnt process-btn d-flex justify-content-between align-items-center\"\n >\n <button\n (click)=\"processPayment()\"\n class=\"earnings process-button ca-font-bold user-select-none\"\n [class.incomplete-status]=\"\n componentData.payrollDeadLine?.period == 'Pending'\n \"\n [class]=\"{\n 'text-color-blue-13':\n componentData.payrollDeadLine?.period ===\n 'Pending',\n 'text-color-white-2':\n componentData.payrollDeadLine?.period !==\n 'Pending',\n }\"\n >\n {{\n componentData.payrollDeadLine?.period == 'Pending'\n ? 'Process Early'\n : 'Process'\n }}\n </button>\n </div>\n } @else {\n @if (componentData.status?.id === 4) {\n <div\n [ngStyle]=\"{\n backgroundColor:\n componentData.status.id == 4\n ? '#F7F7F7'\n : '#FBE9E9',\n color:\n componentData.status.id == 4\n ? '#259F94'\n : '#DF3C3C',\n }\"\n class=\"earnings paid-in-full d-flex justify-content-between align-items-center\"\n >\n <span class=\"ca-font-extra-bold text-color-green-2 user-select-none\">\n PAID IN FULL\n </span>\n <span class=\"ca-font-bold money text-color-green-2\">\n {{ componentData!.earnings! | formatCurrency }}\n </span>\n </div>\n }\n @if (componentData.status?.id != 4) {\n <div\n class=\"button-cnt d-flex justify-content-between align-items-center\"\n >\n <button\n class=\"earnings process-button ca-font-bold user-select-none\"\n (click)=\"addPayment()\"\n >\n Add payment\n </button>\n </div>\n }\n }\n\n <!-- PROCESS BUTTON END -->\n </div>\n </div>\n}\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}}.main-container{background-color:#fff;border-radius:3px;max-width:320px}.main-container .payment-container{max-width:320px;font-family:Montserrat,sans-serif}.main-container .payment-container .component-holder{max-width:308px;width:100%}.main-container .payment-container .component-holder.with-border-top{border-top:1px solid #dadada}.main-container .payment-container .extra-info-holder{max-width:320px;width:100%}.main-container .payment-container .extra-info-holder .divider-custom{max-width:296px;height:8px;border-top:solid 2px #dadada}.main-container .payment-container .extra-info-holder .component-holder{max-width:308px;width:100%}.main-container .payment-container .divider-custom{max-width:296px;height:8px;border-top:solid 2px #dadada}.main-container .payment-container .mileage-pay{height:34px;gap:4px;padding:0 6px}.main-container .payment-container .mileage-pay .text-value{width:auto;height:26px;gap:4px}.main-container .payment-container .mileage-pay .text-value .payment-count{gap:4px;color:#424242}.main-container .payment-container .mileage-pay .text-value .payment-count .text{height:26px;width:auto}.main-container .payment-container .mileage-pay .text-value .payment-count .round{width:18px;height:18px;border-radius:20px;background-color:#6c6c6c;color:#fff;font-size:11px;line-height:18px;text-align:center}.main-container .payment-container .mileage-pay .text-value .value,.main-container .payment-container .mileage-pay .text-value .value .total-money-closed{height:26px;width:auto}.main-container .payment-container .salary-value{padding-right:4px}.main-container .payment-container .salary-title{padding-left:5px}.main-container .payment-container .salary,.main-container .payment-container .earnings{background-color:#f7f7f7;height:30px;width:100%;max-width:308px;border-radius:2px}.main-container .payment-container .salary .money,.main-container .payment-container .earnings .money{padding-right:6px}.main-container .payment-container .salary .earnings-tlitle,.main-container .payment-container .earnings .earnings-tlitle{margin-left:6px}.main-container .payment-container .salary.debth,.main-container .payment-container .earnings.debth{background-color:#fbe9e9}.main-container .payment-container .salary.debth .money,.main-container .payment-container .earnings.debth .money{color:#df3c3c}.main-container .payment-container .earnings{color:#6692f1}.main-container .payment-container .paid-in-full{color:#259f94}.main-container .payment-container .paid-in-full .ca-font-extra-bold{padding-left:6px}.main-container .payment-container .button-cnt{height:40px;width:100%;border-radius:2px;padding:5px 0}.main-container .payment-container .process-btn:hover .earnings{background-color:#dedede}.main-container .payment-container .process-button{background-color:#6692f1;border-radius:2px;border:none;color:#eee;transition:background-color .3s ease;height:32px}.main-container .payment-container .process-button.incomplete-status{background-color:#eee;color:#6692f1}.main-container .payment-container .process-button:not(.incomplete-status):hover{background-color:#3771ed;cursor:pointer}\n"] }]
|
|
21352
|
+
], template: "@if (componentData) {\n <div class=\"main-container\">\n <!-- User info -->\n <app-ca-period-content-user-info\n [componentData]=\"componentData\"\n [type]=\"type\"\n [isOpen]=\"isOpen\"\n ></app-ca-period-content-user-info>\n\n <!-- Bonues, salary... -->\n <div class=\"payment-container d-flex flex-column align-items-center\">\n <div\n class=\"extra-info-holder d-flex flex-column align-items-center\"\n >\n @if (type === 'MILEAGE') {\n <div class=\"component-holder\">\n <app-ca-period-content-extra-info\n title=\"Mileage pay\"\n [amount]=\"componentData.mileagePay\"\n ></app-ca-period-content-extra-info>\n <app-ca-period-content-extra-info\n title=\"Extra stop\"\n [amount]=\"componentData.extraStopPay || 0\"\n [stopsCount]=\"componentData.extraStopCount\"\n ></app-ca-period-content-extra-info>\n </div>\n }\n @if (type === 'FLAT_RATE') {\n <ng-container #flatRate>\n <div class=\"component-holder\">\n <app-ca-period-content-extra-info\n title=\"Load pay\"\n [amount]=\"componentData?.flatPay\"\n ></app-ca-period-content-extra-info>\n </div>\n </ng-container>\n }\n </div>\n\n <!-- BONUS -->\n @if (type === 'MILEAGE' || type === 'FLAT_RATE') {\n <div class=\"component-holder with-border-top\">\n <app-ca-period-content-payment\n (reorderedDataEmiter)=\"getReorderedData($event)\"\n (openAddNewModalEmiter)=\"openAddNewModal($event)\"\n (openEditEntryItem)=\"handleOpenEditEntryItem($event)\"\n [title]=\"'Bonus'\"\n [isOpen]=\"isOpen\"\n [included]=\"componentData?.includedBonuses!\"\n [excluded]=\"componentData?.excludedBonuses!\"\n [disableReorder]=\"true\"\n ></app-ca-period-content-payment>\n </div>\n }\n\n <div\n class=\"salary d-flex justify-content-between align-items-center\"\n >\n <span class=\"salary-title ca-font-extra-bold text-color-black user-select-none\">\n SALARY\n </span>\n <span class=\"salary-value ca-font-bold text-color-black\">\n {{ componentData.salary! | formatCurrency }}\n </span>\n </div>\n\n <!-- CREDIT -->\n <div class=\"component-holder\">\n <app-ca-period-content-payment\n (openAddNewModalEmiter)=\"openAddNewModal($event)\"\n (openEditEntryItem)=\"handleOpenEditEntryItem($event)\"\n [title]=\"'Credit'\"\n [isOpen]=\"isOpen\"\n (reorderedDataEmiter)=\"getReorderedData($event)\"\n [included]=\"componentData?.includedCredits!\"\n [excluded]=\"[]\"\n ></app-ca-period-content-payment>\n </div>\n\n <!-- FUEL -->\n @if (type === 'OWNER') {\n <div class=\"component-holder\">\n <app-ca-period-content-payment\n (openAddNewModalEmiter)=\"openAddNewModal($event)\"\n (openEditEntryItem)=\"handleOpenEditEntryItem($event)\"\n [title]=\"'Fuel'\"\n [isOpen]=\"isOpen\"\n (reorderedDataEmiter)=\"getReorderedData($event)\"\n [included]=\"componentData?.includedFuels!\"\n [excluded]=\"componentData?.excludedFuels!\"\n ></app-ca-period-content-payment>\n </div>\n }\n\n <!-- DEDUCTION -->\n <div class=\"component-holder with-border-top\">\n <app-ca-period-content-payment\n (openAddNewModalEmiter)=\"openAddNewModal($event)\"\n (openEditEntryItem)=\"handleOpenEditEntryItem($event)\"\n [title]=\"'Deduction'\"\n [isOpen]=\"isOpen\"\n (reorderedDataEmiter)=\"getReorderedData($event)\"\n [included]=\"componentData?.includedDeductions!\"\n [excluded]=\"componentData?.excludedDeductions!\"\n ></app-ca-period-content-payment>\n </div>\n\n <div\n class=\"earnings d-flex justify-content-between align-items-center\"\n >\n <span\n class=\"ca-font-extra-bold earnings-tlitle text-color-blue-13 user-select-none\"\n >\n EARNINGS\n </span>\n @if (componentData) {\n <span class=\"ca-font-bold money text-color-blue-13\">\n {{ componentData!.earnings! | formatCurrency }}\n </span>\n }\n </div>\n\n @if (componentData.payments) {\n <div class=\"component-holder with-border-top\">\n <app-ca-period-content-payment\n [title]=\"'Transaction'\"\n [isOpen]=\"isOpen\"\n (reorderedDataEmiter)=\"getReorderedData($event)\"\n (openEditEntryItem)=\"handleOpenEditEntryItem($event)\"\n [included]=\"componentData.payments\"\n [excluded]=\"[]\"\n [hideTotal]=\"true\"\n ></app-ca-period-content-payment>\n </div>\n }\n\n <!-- PROCESS BUTTON -->\n @if (componentData!.debt && !isOpen) {\n <div\n class=\"earnings d-flex justify-content-between align-items-center debth\"\n >\n <span\n class=\"ca-font-extra-bold earnings-tlitle text-color-red-11 user-select-none\"\n >\n DEBT\n </span>\n @if (componentData) {\n <span class=\"ca-font-bold money text-color-red-11\">\n {{ componentData!.debt! | formatCurrency }}\n </span>\n }\n </div>\n }\n\n @if (isOpen) {\n <div\n class=\"button-cnt process-btn d-flex justify-content-between align-items-center\"\n >\n <button\n (click)=\"processPayment()\"\n class=\"earnings process-button ca-font-bold user-select-none\"\n [class.incomplete-status]=\"\n componentData.payrollDeadLine?.period == 'Pending'\n \"\n [class]=\"{\n 'text-color-blue-13':\n componentData.payrollDeadLine?.period ===\n 'Pending',\n 'text-color-white-2':\n componentData.payrollDeadLine?.period !==\n 'Pending',\n }\"\n >\n {{\n componentData.payrollDeadLine?.period == 'Pending'\n ? 'Process Early'\n : 'Process'\n }}\n </button>\n </div>\n } @else {\n @if (componentData.status?.id === 4) {\n <div\n [ngStyle]=\"{\n backgroundColor:\n componentData.status.id == 4\n ? '#F7F7F7'\n : '#FBE9E9',\n color:\n componentData.status.id == 4\n ? '#259F94'\n : '#DF3C3C',\n }\"\n class=\"earnings paid-in-full d-flex justify-content-between align-items-center\"\n >\n <span class=\"ca-font-extra-bold text-color-green-2 user-select-none\">\n PAID IN FULL\n </span>\n <span class=\"ca-font-bold money text-color-green-2\">\n {{ componentData!.earnings! | formatCurrency }}\n </span>\n </div>\n }\n @if (componentData.status?.id != 4) {\n <div\n class=\"button-cnt d-flex justify-content-between align-items-center\"\n >\n <button\n class=\"earnings process-button ca-font-bold user-select-none\"\n (click)=\"addPayment()\"\n >\n Add payment\n </button>\n </div>\n }\n }\n\n <!-- PROCESS BUTTON END -->\n </div>\n </div>\n}\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}}.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}.main-container{background-color:#fff;border-radius:3px;max-width:320px}.main-container .payment-container{max-width:320px;font-family:Montserrat,sans-serif}.main-container .payment-container .component-holder{max-width:308px;width:100%}.main-container .payment-container .component-holder.with-border-top{border-top:1px solid #dadada}.main-container .payment-container .extra-info-holder{max-width:320px;width:100%}.main-container .payment-container .extra-info-holder .divider-custom{max-width:296px;height:8px;border-top:solid 2px #dadada}.main-container .payment-container .extra-info-holder .component-holder{max-width:308px;width:100%}.main-container .payment-container .divider-custom{max-width:296px;height:8px;border-top:solid 2px #dadada}.main-container .payment-container .mileage-pay{height:34px;gap:4px;padding:0 6px}.main-container .payment-container .mileage-pay .text-value{width:auto;height:26px;gap:4px}.main-container .payment-container .mileage-pay .text-value .payment-count{gap:4px;color:#424242}.main-container .payment-container .mileage-pay .text-value .payment-count .text{height:26px;width:auto}.main-container .payment-container .mileage-pay .text-value .payment-count .round{width:18px;height:18px;border-radius:20px;background-color:#6c6c6c;color:#fff;font-size:11px;line-height:18px;text-align:center}.main-container .payment-container .mileage-pay .text-value .value,.main-container .payment-container .mileage-pay .text-value .value .total-money-closed{height:26px;width:auto}.main-container .payment-container .salary-value{padding-right:4px}.main-container .payment-container .salary-title{padding-left:5px}.main-container .payment-container .salary,.main-container .payment-container .earnings{background-color:#f7f7f7;height:30px;width:100%;max-width:308px;border-radius:2px}.main-container .payment-container .salary .money,.main-container .payment-container .earnings .money{padding-right:6px}.main-container .payment-container .salary .earnings-tlitle,.main-container .payment-container .earnings .earnings-tlitle{margin-left:6px}.main-container .payment-container .salary.debth,.main-container .payment-container .earnings.debth{background-color:#fbe9e9}.main-container .payment-container .salary.debth .money,.main-container .payment-container .earnings.debth .money{color:#df3c3c}.main-container .payment-container .earnings{color:#6692f1}.main-container .payment-container .paid-in-full{color:#259f94}.main-container .payment-container .paid-in-full .ca-font-extra-bold{padding-left:6px}.main-container .payment-container .button-cnt{height:40px;width:100%;border-radius:2px;padding:5px 0}.main-container .payment-container .process-btn:hover .earnings{background-color:#dedede}.main-container .payment-container .process-button{background-color:#6692f1;border-radius:2px;border:none;color:#eee;transition:background-color .3s ease;height:32px}.main-container .payment-container .process-button.incomplete-status{background-color:#eee;color:#6692f1}.main-container .payment-container .process-button:not(.incomplete-status):hover{background-color:#3771ed;cursor:pointer}\n"] }]
|
|
21362
21353
|
}], ctorParameters: () => [], propDecorators: { isOpen: [{
|
|
21363
21354
|
type: Input
|
|
21364
21355
|
}], type: [{
|
|
@@ -24271,7 +24262,7 @@ class CaRatingsReviewsPopupComponent {
|
|
|
24271
24262
|
this.emitData.emit(event);
|
|
24272
24263
|
}
|
|
24273
24264
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CaRatingsReviewsPopupComponent, deps: [{ token: i1$2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
24274
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaRatingsReviewsPopupComponent, isStandalone: true, selector: "app-ca-ratings-reviews-popup", inputs: { ratingsReviews: "ratingsReviews", newReviewRating: "newReviewRating", focusedTab: "focusedTab" }, outputs: { emitData: "emitData" }, ngImport: i0, template: "<div class=\"rating-review-component\">\n <div\n class=\"rating-review-component-header d-flex align-items-center justify-content-between\"\n >\n <div\n class=\"assigned-load-holder d-flex justify-content-between align-items-center\"\n >\n <span class=\"ca-font-extra-bold\">Rating & Review</span>\n <span\n class=\"round-number d-flex justify-content-center align-items-center\"\n >\n {{ ratingsReviews?.length ?? 0 }}\n </span>\n </div>\n @if (ratingsReviews?.length) {\n <div\n class=\"sort-date d-flex justify-content-center align-items-center\"\n >\n <p (click)=\"sortByDate()\">Date</p>\n <svg-icon\n class=\"svg-size-16\"\n [src]=\"getSvgPath('sortIcon')\"\n (click)=\"sortByDate()\"\n ></svg-icon>\n </div>\n }\n </div>\n\n @if (ratingsReviews?.length || isNewReview) {\n @if (ratingsReviews?.length) {\n <div class=\"search-input-header\" [formGroup]=\"searchForm\">\n <app-ca-input\n class=\"input-form-holder\"\n formControlName=\"search\"\n [inputConfig]=\"ratingReviewSearch\"\n ></app-ca-input>\n </div>\n\n <div class=\"statusBar d-flex justify-content-evenly\">\n @for (tab of tabs; let indx = $index; track indx) {\n <button\n class=\"ca-font-bold d-flex justify-content-center align-items-center\"\n (click)=\"setFocusedTab(tab)\"\n [class.active]=\"focusedTab === tab\"\n >\n {{ tab }}\n </button>\n }\n </div>\n @if (!isCurentUserLeaveReview && !isNewReview) {\n <div\n (click)=\"newReview()\"\n class=\"add d-flex justify-content-between align-items-center\"\n >\n <p>ADD REVIEW</p>\n <svg-icon\n class=\"svg-size-14\"\n [src]=\"getSvgPath('add')\"\n ></svg-icon>\n </div>\n }\n }\n\n @if (isNewReview) {\n <app-ca-rating-review-user\n [isNewReview]=\"true\"\n [data]=\"newReviewRating\"\n (ratingReviewData)=\"addNewReview($event)\"\n ></app-ca-rating-review-user>\n }\n\n @if (ratingsReviews?.length) {\n <div>\n <div>\n @switch (focusedTab) {\n @case ('All') {\n <ng-container\n *ngTemplateOutlet=\"\n ratingReviewTemplate;\n context: {\n data: ratingsReviews,\n isRating: false,\n }\n \"\n ></ng-container>\n }\n @case ('RATING') {\n <ng-container\n *ngTemplateOutlet=\"\n ratingReviewTemplate;\n context: {\n data: likesDislikesData,\n isRating: true,\n }\n \"\n ></ng-container>\n }\n @case ('REVIEW') {\n <ng-container\n *ngTemplateOutlet=\"\n ratingReviewTemplate;\n context: {\n data: likesDislikesData,\n isRating: false,\n }\n \"\n ></ng-container>\n }\n }\n </div>\n </div>\n }\n } @else {\n <ng-container *ngTemplateOutlet=\"noComments\"></ng-container>\n }\n</div>\n\n<ng-template #noComments>\n <div class=\"no-comments-container\">\n <p>\n subtle <br />\n illustration\n </p>\n </div>\n</ng-template>\n\n<ng-template #ratingReviewTemplate let-data=\"data\" let-isRating=\"isRating\">\n <div class=\"ratingInformation\">\n @if (data.length) {\n @let filteredData =\n data | filterByTitle: searchForm.get('search')?.value;\n @for (item of filteredData; let indx = $index; track indx) {\n <app-ca-rating-review-user\n (ratingReviewData)=\"ratingData($event)\"\n [data]=\"item\"\n [isRating]=\"isRating\"\n ></app-ca-rating-review-user>\n }\n }\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}}.rating-review-component{width:260px;padding:4px;border-radius:3px;background-color:#2f2f2f!important;display:block}.rating-review-component .rating-review-component-header{height:18px;padding-bottom:4px;border-bottom:1px solid #424242}.rating-review-component .sort-date{cursor:pointer;gap:4px}.rating-review-component .sort-date p{font-size:11px;font-weight:500;line-height:14px;color:#fff}.rating-review-component .search-input-header{width:100%!important;background:#424242!important;color:#aaa!important;margin-top:6px;margin-bottom:4px;border-radius:2px;transition:transform .3s}.rating-review-component .search-input-header ::ng-deep .input-form-holder .input-custom-group .input-control{height:26px!important;background:#424242!important;color:#fff}.rating-review-component .search-input-header ::ng-deep .input-form-holder .input-custom-group .input-clear{top:2px!important}.rating-review-component .round-number{width:18px;height:18px;padding:2px 5px;margin-left:4px;border-radius:50%;font-size:11px;font-weight:700;line-height:14px;background:#424242}.rating-review-component .add{cursor:pointer;height:26px;padding:4px 6px 4px 4px;margin:2px 0;border-radius:2px 0 0}.rating-review-component .add p{color:#92b1f5;font-size:11px;font-weight:700;line-height:18px}.rating-review-component .add svg path{fill:#6692f1!important}.rating-review-component .add:hover{background:#3b73ed66}.rating-review-component .add:hover p{color:#fff!important}.rating-review-component .assigned-load-holder>span{color:#fff;padding-left:4px;font-family:Montserrat,sans-serif;font-size:11px;font-weight:800;text-transform:uppercase}.rating-review-component .statusBar{height:26px;padding:4px 0;width:252px;background-color:#1d1d1d;border-radius:2px 0 0}.rating-review-component button{width:105.33px;height:18px;border-radius:2px;padding:2px 8px;color:#919191;background-color:transparent;border:1px solid transparent;font-size:11px;text-align:center;transition:background-color .3s ease,border-color .3s ease}.rating-review-component button.active,.rating-review-component button:active{background-color:#424242;border-color:#424242;color:#fff}.rating-review-component .ratingInformation{margin-top:4px;gap:4px;border-radius:0 0 3px 3px;color:#919191;font-size:11px;line-height:14px;text-align:center}.no-comments-container{width:252px;height:78px;gap:10px;background:#424242}.no-comments-container p{font-family:Montserrat;font-size:32px;font-weight:800;line-height:39.01px;text-align:center;color:#6c6c6c}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
24265
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaRatingsReviewsPopupComponent, isStandalone: true, selector: "app-ca-ratings-reviews-popup", inputs: { ratingsReviews: "ratingsReviews", newReviewRating: "newReviewRating", focusedTab: "focusedTab" }, outputs: { emitData: "emitData" }, ngImport: i0, template: "<div class=\"rating-review-component\">\n <div\n class=\"rating-review-component-header d-flex align-items-center justify-content-between\"\n >\n <div\n class=\"assigned-load-holder d-flex justify-content-between align-items-center\"\n >\n <span class=\"ca-font-extra-bold\">Rating & Review</span>\n <span\n class=\"round-number d-flex justify-content-center align-items-center\"\n >\n {{ ratingsReviews?.length ?? 0 }}\n </span>\n </div>\n @if (ratingsReviews?.length) {\n <div\n class=\"sort-date d-flex justify-content-center align-items-center\"\n >\n <p (click)=\"sortByDate()\">Date</p>\n <svg-icon\n class=\"svg-size-16\"\n [src]=\"getSvgPath('sortIcon')\"\n (click)=\"sortByDate()\"\n ></svg-icon>\n </div>\n }\n </div>\n\n @if (ratingsReviews?.length || isNewReview) {\n @if (ratingsReviews?.length) {\n <div class=\"search-input-header\" [formGroup]=\"searchForm\">\n <app-ca-input\n class=\"input-form-holder\"\n formControlName=\"search\"\n [inputConfig]=\"ratingReviewSearch\"\n ></app-ca-input>\n </div>\n\n <div class=\"statusBar d-flex justify-content-evenly\">\n @for (tab of tabs; let indx = $index; track indx) {\n <button\n class=\"ca-font-bold d-flex justify-content-center align-items-center\"\n (click)=\"setFocusedTab(tab)\"\n [class.active]=\"focusedTab === tab\"\n >\n {{ tab }}\n </button>\n }\n </div>\n @if (!isCurentUserLeaveReview && !isNewReview) {\n <div\n (click)=\"newReview()\"\n class=\"add d-flex justify-content-between align-items-center\"\n >\n <p>ADD REVIEW</p>\n <svg-icon\n class=\"svg-size-14\"\n [src]=\"getSvgPath('add')\"\n ></svg-icon>\n </div>\n }\n }\n\n @if (isNewReview) {\n <app-ca-rating-review-user\n [isNewReview]=\"true\"\n [data]=\"newReviewRating\"\n (ratingReviewData)=\"addNewReview($event)\"\n ></app-ca-rating-review-user>\n }\n\n @if (ratingsReviews?.length) {\n <div>\n <div>\n @switch (focusedTab) {\n @case ('All') {\n <ng-container\n *ngTemplateOutlet=\"\n ratingReviewTemplate;\n context: {\n data: ratingsReviews,\n isRating: false,\n }\n \"\n ></ng-container>\n }\n @case ('RATING') {\n <ng-container\n *ngTemplateOutlet=\"\n ratingReviewTemplate;\n context: {\n data: likesDislikesData,\n isRating: true,\n }\n \"\n ></ng-container>\n }\n @case ('REVIEW') {\n <ng-container\n *ngTemplateOutlet=\"\n ratingReviewTemplate;\n context: {\n data: likesDislikesData,\n isRating: false,\n }\n \"\n ></ng-container>\n }\n }\n </div>\n </div>\n }\n } @else {\n <ng-container *ngTemplateOutlet=\"noComments\"></ng-container>\n }\n</div>\n\n<ng-template #noComments>\n <div class=\"no-comments-container\">\n <p>\n subtle <br />\n illustration\n </p>\n </div>\n</ng-template>\n\n<ng-template #ratingReviewTemplate let-data=\"data\" let-isRating=\"isRating\">\n <div class=\"ratingInformation\">\n @if (data.length) {\n @let filteredData =\n data | filterByTitle: searchForm.get('search')?.value;\n @for (item of filteredData; let indx = $index; track indx) {\n <app-ca-rating-review-user\n (ratingReviewData)=\"ratingData($event)\"\n [data]=\"item\"\n [isRating]=\"isRating\"\n ></app-ca-rating-review-user>\n }\n }\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}}.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}.rating-review-component{width:260px;padding:4px;border-radius:3px;background-color:#2f2f2f!important;display:block}.rating-review-component .rating-review-component-header{height:18px;padding-bottom:4px;border-bottom:1px solid #424242}.rating-review-component .sort-date{cursor:pointer;gap:4px}.rating-review-component .sort-date p{font-size:11px;font-weight:500;line-height:14px;color:#fff}.rating-review-component .search-input-header{width:100%!important;background:#424242!important;color:#aaa!important;margin-top:6px;margin-bottom:4px;border-radius:2px;transition:transform .3s}.rating-review-component .search-input-header ::ng-deep .input-form-holder .input-custom-group .input-control{height:26px!important;background:#424242!important;color:#fff}.rating-review-component .search-input-header ::ng-deep .input-form-holder .input-custom-group .input-clear{top:2px!important}.rating-review-component .round-number{width:18px;height:18px;padding:2px 5px;margin-left:4px;border-radius:50%;font-size:11px;font-weight:700;line-height:14px;background:#424242}.rating-review-component .add{cursor:pointer;height:26px;padding:4px 6px 4px 4px;margin:2px 0;border-radius:2px 0 0}.rating-review-component .add p{color:#92b1f5;font-size:11px;font-weight:700;line-height:18px}.rating-review-component .add svg path{fill:#6692f1!important}.rating-review-component .add:hover{background:#3b73ed66}.rating-review-component .add:hover p{color:#fff!important}.rating-review-component .assigned-load-holder>span{color:#fff;padding-left:4px;font-family:Montserrat,sans-serif;font-size:11px;font-weight:800;text-transform:uppercase}.rating-review-component .statusBar{height:26px;padding:4px 0;width:252px;background-color:#1d1d1d;border-radius:2px 0 0}.rating-review-component button{width:105.33px;height:18px;border-radius:2px;padding:2px 8px;color:#919191;background-color:transparent;border:1px solid transparent;font-size:11px;text-align:center;transition:background-color .3s ease,border-color .3s ease}.rating-review-component button.active,.rating-review-component button:active{background-color:#424242;border-color:#424242;color:#fff}.rating-review-component .ratingInformation{margin-top:4px;gap:4px;border-radius:0 0 3px 3px;color:#919191;font-size:11px;line-height:14px;text-align:center}.no-comments-container{width:252px;height:78px;gap:10px;background:#424242}.no-comments-container p{font-family:Montserrat;font-size:32px;font-weight:800;line-height:39.01px;text-align:center;color:#6c6c6c}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
24275
24266
|
// modules
|
|
24276
24267
|
CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "ngmodule", type: NgbModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: NgbTooltipModule }, { 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: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type:
|
|
24277
24268
|
// components
|
|
@@ -24295,7 +24286,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
24295
24286
|
CaInputComponent,
|
|
24296
24287
|
// pipes
|
|
24297
24288
|
FilterByTitlePipe
|
|
24298
|
-
], template: "<div class=\"rating-review-component\">\n <div\n class=\"rating-review-component-header d-flex align-items-center justify-content-between\"\n >\n <div\n class=\"assigned-load-holder d-flex justify-content-between align-items-center\"\n >\n <span class=\"ca-font-extra-bold\">Rating & Review</span>\n <span\n class=\"round-number d-flex justify-content-center align-items-center\"\n >\n {{ ratingsReviews?.length ?? 0 }}\n </span>\n </div>\n @if (ratingsReviews?.length) {\n <div\n class=\"sort-date d-flex justify-content-center align-items-center\"\n >\n <p (click)=\"sortByDate()\">Date</p>\n <svg-icon\n class=\"svg-size-16\"\n [src]=\"getSvgPath('sortIcon')\"\n (click)=\"sortByDate()\"\n ></svg-icon>\n </div>\n }\n </div>\n\n @if (ratingsReviews?.length || isNewReview) {\n @if (ratingsReviews?.length) {\n <div class=\"search-input-header\" [formGroup]=\"searchForm\">\n <app-ca-input\n class=\"input-form-holder\"\n formControlName=\"search\"\n [inputConfig]=\"ratingReviewSearch\"\n ></app-ca-input>\n </div>\n\n <div class=\"statusBar d-flex justify-content-evenly\">\n @for (tab of tabs; let indx = $index; track indx) {\n <button\n class=\"ca-font-bold d-flex justify-content-center align-items-center\"\n (click)=\"setFocusedTab(tab)\"\n [class.active]=\"focusedTab === tab\"\n >\n {{ tab }}\n </button>\n }\n </div>\n @if (!isCurentUserLeaveReview && !isNewReview) {\n <div\n (click)=\"newReview()\"\n class=\"add d-flex justify-content-between align-items-center\"\n >\n <p>ADD REVIEW</p>\n <svg-icon\n class=\"svg-size-14\"\n [src]=\"getSvgPath('add')\"\n ></svg-icon>\n </div>\n }\n }\n\n @if (isNewReview) {\n <app-ca-rating-review-user\n [isNewReview]=\"true\"\n [data]=\"newReviewRating\"\n (ratingReviewData)=\"addNewReview($event)\"\n ></app-ca-rating-review-user>\n }\n\n @if (ratingsReviews?.length) {\n <div>\n <div>\n @switch (focusedTab) {\n @case ('All') {\n <ng-container\n *ngTemplateOutlet=\"\n ratingReviewTemplate;\n context: {\n data: ratingsReviews,\n isRating: false,\n }\n \"\n ></ng-container>\n }\n @case ('RATING') {\n <ng-container\n *ngTemplateOutlet=\"\n ratingReviewTemplate;\n context: {\n data: likesDislikesData,\n isRating: true,\n }\n \"\n ></ng-container>\n }\n @case ('REVIEW') {\n <ng-container\n *ngTemplateOutlet=\"\n ratingReviewTemplate;\n context: {\n data: likesDislikesData,\n isRating: false,\n }\n \"\n ></ng-container>\n }\n }\n </div>\n </div>\n }\n } @else {\n <ng-container *ngTemplateOutlet=\"noComments\"></ng-container>\n }\n</div>\n\n<ng-template #noComments>\n <div class=\"no-comments-container\">\n <p>\n subtle <br />\n illustration\n </p>\n </div>\n</ng-template>\n\n<ng-template #ratingReviewTemplate let-data=\"data\" let-isRating=\"isRating\">\n <div class=\"ratingInformation\">\n @if (data.length) {\n @let filteredData =\n data | filterByTitle: searchForm.get('search')?.value;\n @for (item of filteredData; let indx = $index; track indx) {\n <app-ca-rating-review-user\n (ratingReviewData)=\"ratingData($event)\"\n [data]=\"item\"\n [isRating]=\"isRating\"\n ></app-ca-rating-review-user>\n }\n }\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}}.rating-review-component{width:260px;padding:4px;border-radius:3px;background-color:#2f2f2f!important;display:block}.rating-review-component .rating-review-component-header{height:18px;padding-bottom:4px;border-bottom:1px solid #424242}.rating-review-component .sort-date{cursor:pointer;gap:4px}.rating-review-component .sort-date p{font-size:11px;font-weight:500;line-height:14px;color:#fff}.rating-review-component .search-input-header{width:100%!important;background:#424242!important;color:#aaa!important;margin-top:6px;margin-bottom:4px;border-radius:2px;transition:transform .3s}.rating-review-component .search-input-header ::ng-deep .input-form-holder .input-custom-group .input-control{height:26px!important;background:#424242!important;color:#fff}.rating-review-component .search-input-header ::ng-deep .input-form-holder .input-custom-group .input-clear{top:2px!important}.rating-review-component .round-number{width:18px;height:18px;padding:2px 5px;margin-left:4px;border-radius:50%;font-size:11px;font-weight:700;line-height:14px;background:#424242}.rating-review-component .add{cursor:pointer;height:26px;padding:4px 6px 4px 4px;margin:2px 0;border-radius:2px 0 0}.rating-review-component .add p{color:#92b1f5;font-size:11px;font-weight:700;line-height:18px}.rating-review-component .add svg path{fill:#6692f1!important}.rating-review-component .add:hover{background:#3b73ed66}.rating-review-component .add:hover p{color:#fff!important}.rating-review-component .assigned-load-holder>span{color:#fff;padding-left:4px;font-family:Montserrat,sans-serif;font-size:11px;font-weight:800;text-transform:uppercase}.rating-review-component .statusBar{height:26px;padding:4px 0;width:252px;background-color:#1d1d1d;border-radius:2px 0 0}.rating-review-component button{width:105.33px;height:18px;border-radius:2px;padding:2px 8px;color:#919191;background-color:transparent;border:1px solid transparent;font-size:11px;text-align:center;transition:background-color .3s ease,border-color .3s ease}.rating-review-component button.active,.rating-review-component button:active{background-color:#424242;border-color:#424242;color:#fff}.rating-review-component .ratingInformation{margin-top:4px;gap:4px;border-radius:0 0 3px 3px;color:#919191;font-size:11px;line-height:14px;text-align:center}.no-comments-container{width:252px;height:78px;gap:10px;background:#424242}.no-comments-container p{font-family:Montserrat;font-size:32px;font-weight:800;line-height:39.01px;text-align:center;color:#6c6c6c}\n"] }]
|
|
24289
|
+
], template: "<div class=\"rating-review-component\">\n <div\n class=\"rating-review-component-header d-flex align-items-center justify-content-between\"\n >\n <div\n class=\"assigned-load-holder d-flex justify-content-between align-items-center\"\n >\n <span class=\"ca-font-extra-bold\">Rating & Review</span>\n <span\n class=\"round-number d-flex justify-content-center align-items-center\"\n >\n {{ ratingsReviews?.length ?? 0 }}\n </span>\n </div>\n @if (ratingsReviews?.length) {\n <div\n class=\"sort-date d-flex justify-content-center align-items-center\"\n >\n <p (click)=\"sortByDate()\">Date</p>\n <svg-icon\n class=\"svg-size-16\"\n [src]=\"getSvgPath('sortIcon')\"\n (click)=\"sortByDate()\"\n ></svg-icon>\n </div>\n }\n </div>\n\n @if (ratingsReviews?.length || isNewReview) {\n @if (ratingsReviews?.length) {\n <div class=\"search-input-header\" [formGroup]=\"searchForm\">\n <app-ca-input\n class=\"input-form-holder\"\n formControlName=\"search\"\n [inputConfig]=\"ratingReviewSearch\"\n ></app-ca-input>\n </div>\n\n <div class=\"statusBar d-flex justify-content-evenly\">\n @for (tab of tabs; let indx = $index; track indx) {\n <button\n class=\"ca-font-bold d-flex justify-content-center align-items-center\"\n (click)=\"setFocusedTab(tab)\"\n [class.active]=\"focusedTab === tab\"\n >\n {{ tab }}\n </button>\n }\n </div>\n @if (!isCurentUserLeaveReview && !isNewReview) {\n <div\n (click)=\"newReview()\"\n class=\"add d-flex justify-content-between align-items-center\"\n >\n <p>ADD REVIEW</p>\n <svg-icon\n class=\"svg-size-14\"\n [src]=\"getSvgPath('add')\"\n ></svg-icon>\n </div>\n }\n }\n\n @if (isNewReview) {\n <app-ca-rating-review-user\n [isNewReview]=\"true\"\n [data]=\"newReviewRating\"\n (ratingReviewData)=\"addNewReview($event)\"\n ></app-ca-rating-review-user>\n }\n\n @if (ratingsReviews?.length) {\n <div>\n <div>\n @switch (focusedTab) {\n @case ('All') {\n <ng-container\n *ngTemplateOutlet=\"\n ratingReviewTemplate;\n context: {\n data: ratingsReviews,\n isRating: false,\n }\n \"\n ></ng-container>\n }\n @case ('RATING') {\n <ng-container\n *ngTemplateOutlet=\"\n ratingReviewTemplate;\n context: {\n data: likesDislikesData,\n isRating: true,\n }\n \"\n ></ng-container>\n }\n @case ('REVIEW') {\n <ng-container\n *ngTemplateOutlet=\"\n ratingReviewTemplate;\n context: {\n data: likesDislikesData,\n isRating: false,\n }\n \"\n ></ng-container>\n }\n }\n </div>\n </div>\n }\n } @else {\n <ng-container *ngTemplateOutlet=\"noComments\"></ng-container>\n }\n</div>\n\n<ng-template #noComments>\n <div class=\"no-comments-container\">\n <p>\n subtle <br />\n illustration\n </p>\n </div>\n</ng-template>\n\n<ng-template #ratingReviewTemplate let-data=\"data\" let-isRating=\"isRating\">\n <div class=\"ratingInformation\">\n @if (data.length) {\n @let filteredData =\n data | filterByTitle: searchForm.get('search')?.value;\n @for (item of filteredData; let indx = $index; track indx) {\n <app-ca-rating-review-user\n (ratingReviewData)=\"ratingData($event)\"\n [data]=\"item\"\n [isRating]=\"isRating\"\n ></app-ca-rating-review-user>\n }\n }\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}}.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}.rating-review-component{width:260px;padding:4px;border-radius:3px;background-color:#2f2f2f!important;display:block}.rating-review-component .rating-review-component-header{height:18px;padding-bottom:4px;border-bottom:1px solid #424242}.rating-review-component .sort-date{cursor:pointer;gap:4px}.rating-review-component .sort-date p{font-size:11px;font-weight:500;line-height:14px;color:#fff}.rating-review-component .search-input-header{width:100%!important;background:#424242!important;color:#aaa!important;margin-top:6px;margin-bottom:4px;border-radius:2px;transition:transform .3s}.rating-review-component .search-input-header ::ng-deep .input-form-holder .input-custom-group .input-control{height:26px!important;background:#424242!important;color:#fff}.rating-review-component .search-input-header ::ng-deep .input-form-holder .input-custom-group .input-clear{top:2px!important}.rating-review-component .round-number{width:18px;height:18px;padding:2px 5px;margin-left:4px;border-radius:50%;font-size:11px;font-weight:700;line-height:14px;background:#424242}.rating-review-component .add{cursor:pointer;height:26px;padding:4px 6px 4px 4px;margin:2px 0;border-radius:2px 0 0}.rating-review-component .add p{color:#92b1f5;font-size:11px;font-weight:700;line-height:18px}.rating-review-component .add svg path{fill:#6692f1!important}.rating-review-component .add:hover{background:#3b73ed66}.rating-review-component .add:hover p{color:#fff!important}.rating-review-component .assigned-load-holder>span{color:#fff;padding-left:4px;font-family:Montserrat,sans-serif;font-size:11px;font-weight:800;text-transform:uppercase}.rating-review-component .statusBar{height:26px;padding:4px 0;width:252px;background-color:#1d1d1d;border-radius:2px 0 0}.rating-review-component button{width:105.33px;height:18px;border-radius:2px;padding:2px 8px;color:#919191;background-color:transparent;border:1px solid transparent;font-size:11px;text-align:center;transition:background-color .3s ease,border-color .3s ease}.rating-review-component button.active,.rating-review-component button:active{background-color:#424242;border-color:#424242;color:#fff}.rating-review-component .ratingInformation{margin-top:4px;gap:4px;border-radius:0 0 3px 3px;color:#919191;font-size:11px;line-height:14px;text-align:center}.no-comments-container{width:252px;height:78px;gap:10px;background:#424242}.no-comments-container p{font-family:Montserrat;font-size:32px;font-weight:800;line-height:39.01px;text-align:center;color:#6c6c6c}\n"] }]
|
|
24299
24290
|
}], ctorParameters: () => [{ type: i1$2.UntypedFormBuilder }], propDecorators: { ratingsReviews: [{
|
|
24300
24291
|
type: Input
|
|
24301
24292
|
}], newReviewRating: [{
|
|
@@ -27200,7 +27191,7 @@ class CaTodoComponent {
|
|
|
27200
27191
|
});
|
|
27201
27192
|
}
|
|
27202
27193
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CaTodoComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
27203
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaTodoComponent, isStandalone: true, selector: "app-ca-todo", inputs: { todoConfigs: "todoConfigs", inProgressConfigs: "inProgressConfigs", completedConfigs: "completedConfigs" }, providers: [FileService], ngImport: i0, template: "<div class=\"todo-container d-flex flex-row align-items-start\" cdkDropListGroup>\n @for (column of columns; track column.id) {\n <div\n class=\"todo-column d-flex flex-column\"\n cdkDropList\n [cdkDropListData]=\"column.toDoConfigs\"\n (cdkDropListDropped)=\"onDrop($event)\"\n >\n <div class=\"heading d-flex align-items-center\">\n <h3 class=\"title\">\n {{ column.title }} ({{ column.toDoConfigs.length }})\n </h3>\n </div>\n @for (item of column.toDoConfigs; track $index) {\n @if (item) {\n <div class=\"todo-card\" cdkDrag>\n <app-ca-todo-card\n [config]=\"item.config\"\n [commentConfig]=\"item.commentConfig || []\"\n [newCommentConfig]=\"item.newCommentConfig || []\"\n [configProgress]=\"item?.configProgress || []\"\n [uploadFilesConfig]=\"item.uploadFilesConfig\"\n ></app-ca-todo-card>\n\n <ng-template cdkDragPlaceholder>\n <div\n class=\"todo-placeholder d-flex align-items-center justify-content-center\"\n ></div>\n </ng-template>\n </div>\n }\n }\n </div>\n }\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}}.todo-container{gap:12px}.todo-container .todo-column{min-width:602.67px;max-width:800px;flex:1}.todo-container .todo-column .todo-placeholder{background-color:#f7f7f7;box-shadow:0 0 4px #0000004d;border-radius:3px;height:140px;transition:background ease-in-out .2s}.todo-container .todo-column .todo-column.dragging-over{height:auto;min-height:300px;background-color:#f1f1f1}.todo-container .todo-column:last-child{margin-right:0}.todo-container .todo-column .dropShadowClass{background-color:#0000001a;border:1px dashed #cccccc;height:50px;border-radius:4px}.todo-container .todo-column .heading{width:100%;height:14px;padding:0 12px;gap:2px}.todo-container .todo-column .heading .title{font-weight:700;font-family:Montserrat,sans-serif;font-size:11px;line-height:14px;color:#6c6c6c}.todo-container .todo-column .todo-card{margin:8px 2px;border-radius:3px;background-color:#fff;box-shadow:0 1px 4px #a2a2a299}.todo-container .todo-column .todo-card:hover{transition:background ease .2s}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CaTodoCardComponent, selector: "app-ca-todo-card", inputs: ["config", "commentConfig", "newCommentConfig", "configProgress", "uploadFilesConfig"], outputs: ["onFileEvent"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }] }); }
|
|
27194
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaTodoComponent, isStandalone: true, selector: "app-ca-todo", inputs: { todoConfigs: "todoConfigs", inProgressConfigs: "inProgressConfigs", completedConfigs: "completedConfigs" }, providers: [FileService], ngImport: i0, template: "<div class=\"todo-container d-flex flex-row align-items-start\" cdkDropListGroup>\n @for (column of columns; track column.id) {\n <div\n class=\"todo-column d-flex flex-column\"\n cdkDropList\n [cdkDropListData]=\"column.toDoConfigs\"\n (cdkDropListDropped)=\"onDrop($event)\"\n >\n <div class=\"heading d-flex align-items-center\">\n <h3 class=\"title\">\n {{ column.title }} ({{ column.toDoConfigs.length }})\n </h3>\n </div>\n @for (item of column.toDoConfigs; track $index) {\n @if (item) {\n <div class=\"todo-card\" cdkDrag>\n <app-ca-todo-card\n [config]=\"item.config\"\n [commentConfig]=\"item.commentConfig || []\"\n [newCommentConfig]=\"item.newCommentConfig || []\"\n [configProgress]=\"item?.configProgress || []\"\n [uploadFilesConfig]=\"item.uploadFilesConfig\"\n ></app-ca-todo-card>\n\n <ng-template cdkDragPlaceholder>\n <div\n class=\"todo-placeholder d-flex align-items-center justify-content-center\"\n ></div>\n </ng-template>\n </div>\n }\n }\n </div>\n }\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}}.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}.todo-container{gap:12px}.todo-container .todo-column{min-width:602.67px;max-width:800px;flex:1}.todo-container .todo-column .todo-placeholder{background-color:#f7f7f7;box-shadow:0 0 4px #0000004d;border-radius:3px;height:140px;transition:background ease-in-out .2s}.todo-container .todo-column .todo-column.dragging-over{height:auto;min-height:300px;background-color:#f1f1f1}.todo-container .todo-column:last-child{margin-right:0}.todo-container .todo-column .dropShadowClass{background-color:#0000001a;border:1px dashed #cccccc;height:50px;border-radius:4px}.todo-container .todo-column .heading{width:100%;height:14px;padding:0 12px;gap:2px}.todo-container .todo-column .heading .title{font-weight:700;font-family:Montserrat,sans-serif;font-size:11px;line-height:14px;color:#6c6c6c}.todo-container .todo-column .todo-card{margin:8px 2px;border-radius:3px;background-color:#fff;box-shadow:0 1px 4px #a2a2a299}.todo-container .todo-column .todo-card:hover{transition:background ease .2s}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CaTodoCardComponent, selector: "app-ca-todo-card", inputs: ["config", "commentConfig", "newCommentConfig", "configProgress", "uploadFilesConfig"], outputs: ["onFileEvent"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }] }); }
|
|
27204
27195
|
}
|
|
27205
27196
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CaTodoComponent, decorators: [{
|
|
27206
27197
|
type: Component,
|
|
@@ -27211,7 +27202,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
27211
27202
|
CdkDrag,
|
|
27212
27203
|
CdkDropListGroup,
|
|
27213
27204
|
CdkDragPlaceholder,
|
|
27214
|
-
], selector: 'app-ca-todo', providers: [FileService], template: "<div class=\"todo-container d-flex flex-row align-items-start\" cdkDropListGroup>\n @for (column of columns; track column.id) {\n <div\n class=\"todo-column d-flex flex-column\"\n cdkDropList\n [cdkDropListData]=\"column.toDoConfigs\"\n (cdkDropListDropped)=\"onDrop($event)\"\n >\n <div class=\"heading d-flex align-items-center\">\n <h3 class=\"title\">\n {{ column.title }} ({{ column.toDoConfigs.length }})\n </h3>\n </div>\n @for (item of column.toDoConfigs; track $index) {\n @if (item) {\n <div class=\"todo-card\" cdkDrag>\n <app-ca-todo-card\n [config]=\"item.config\"\n [commentConfig]=\"item.commentConfig || []\"\n [newCommentConfig]=\"item.newCommentConfig || []\"\n [configProgress]=\"item?.configProgress || []\"\n [uploadFilesConfig]=\"item.uploadFilesConfig\"\n ></app-ca-todo-card>\n\n <ng-template cdkDragPlaceholder>\n <div\n class=\"todo-placeholder d-flex align-items-center justify-content-center\"\n ></div>\n </ng-template>\n </div>\n }\n }\n </div>\n }\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}}.todo-container{gap:12px}.todo-container .todo-column{min-width:602.67px;max-width:800px;flex:1}.todo-container .todo-column .todo-placeholder{background-color:#f7f7f7;box-shadow:0 0 4px #0000004d;border-radius:3px;height:140px;transition:background ease-in-out .2s}.todo-container .todo-column .todo-column.dragging-over{height:auto;min-height:300px;background-color:#f1f1f1}.todo-container .todo-column:last-child{margin-right:0}.todo-container .todo-column .dropShadowClass{background-color:#0000001a;border:1px dashed #cccccc;height:50px;border-radius:4px}.todo-container .todo-column .heading{width:100%;height:14px;padding:0 12px;gap:2px}.todo-container .todo-column .heading .title{font-weight:700;font-family:Montserrat,sans-serif;font-size:11px;line-height:14px;color:#6c6c6c}.todo-container .todo-column .todo-card{margin:8px 2px;border-radius:3px;background-color:#fff;box-shadow:0 1px 4px #a2a2a299}.todo-container .todo-column .todo-card:hover{transition:background ease .2s}\n"] }]
|
|
27205
|
+
], selector: 'app-ca-todo', providers: [FileService], template: "<div class=\"todo-container d-flex flex-row align-items-start\" cdkDropListGroup>\n @for (column of columns; track column.id) {\n <div\n class=\"todo-column d-flex flex-column\"\n cdkDropList\n [cdkDropListData]=\"column.toDoConfigs\"\n (cdkDropListDropped)=\"onDrop($event)\"\n >\n <div class=\"heading d-flex align-items-center\">\n <h3 class=\"title\">\n {{ column.title }} ({{ column.toDoConfigs.length }})\n </h3>\n </div>\n @for (item of column.toDoConfigs; track $index) {\n @if (item) {\n <div class=\"todo-card\" cdkDrag>\n <app-ca-todo-card\n [config]=\"item.config\"\n [commentConfig]=\"item.commentConfig || []\"\n [newCommentConfig]=\"item.newCommentConfig || []\"\n [configProgress]=\"item?.configProgress || []\"\n [uploadFilesConfig]=\"item.uploadFilesConfig\"\n ></app-ca-todo-card>\n\n <ng-template cdkDragPlaceholder>\n <div\n class=\"todo-placeholder d-flex align-items-center justify-content-center\"\n ></div>\n </ng-template>\n </div>\n }\n }\n </div>\n }\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}}.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}.todo-container{gap:12px}.todo-container .todo-column{min-width:602.67px;max-width:800px;flex:1}.todo-container .todo-column .todo-placeholder{background-color:#f7f7f7;box-shadow:0 0 4px #0000004d;border-radius:3px;height:140px;transition:background ease-in-out .2s}.todo-container .todo-column .todo-column.dragging-over{height:auto;min-height:300px;background-color:#f1f1f1}.todo-container .todo-column:last-child{margin-right:0}.todo-container .todo-column .dropShadowClass{background-color:#0000001a;border:1px dashed #cccccc;height:50px;border-radius:4px}.todo-container .todo-column .heading{width:100%;height:14px;padding:0 12px;gap:2px}.todo-container .todo-column .heading .title{font-weight:700;font-family:Montserrat,sans-serif;font-size:11px;line-height:14px;color:#6c6c6c}.todo-container .todo-column .todo-card{margin:8px 2px;border-radius:3px;background-color:#fff;box-shadow:0 1px 4px #a2a2a299}.todo-container .todo-column .todo-card:hover{transition:background ease .2s}\n"] }]
|
|
27215
27206
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { todoConfigs: [{
|
|
27216
27207
|
type: Input
|
|
27217
27208
|
}], inProgressConfigs: [{
|
|
@@ -31700,7 +31691,7 @@ class CaCustomCardComponent {
|
|
|
31700
31691
|
}
|
|
31701
31692
|
}
|
|
31702
31693
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CaCustomCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
31703
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaCustomCardComponent, isStandalone: true, selector: "app-ca-custom-card", inputs: { headerLeftSideTemplate: "headerLeftSideTemplate", headerRightSideTemplate: "headerRightSideTemplate", headerLeftSideContext: "headerLeftSideContext", headerRightSideClass: "headerRightSideClass", cardHeight: "cardHeight", isAnimationsDisabled: "isAnimationsDisabled", cardName: "cardName", cardSubText: "cardSubText", hasArrow: "hasArrow", hasPlusIcon: "hasPlusIcon", isPlusIconDisabled: "isPlusIconDisabled", plusIconTooltip: "plusIconTooltip", isHeaderSvgEnabled: "isHeaderSvgEnabled", counter: "counter", hasDivider: "hasDivider", hasBodyData: "hasBodyData", hasScrollBody: "hasScrollBody", isStayOpen: "isStayOpen", isDisabledCard: "isDisabledCard", isHeaderHidden: "isHeaderHidden", isTwoRowTitle: "isTwoRowTitle", isAlwaysOpen: "isAlwaysOpen", animationMarginParams: "animationMarginParams", isCardOpen: "isCardOpen", customClass: "customClass", customNameClass: "customNameClass", customDividerClass: "customDividerClass" }, outputs: { onActionEvent: "onActionEvent", onOpenCard: "onOpenCard" }, ngImport: i0, template: "<div\n class=\"ca-custom-card\"\n (mouseenter)=\"isCardHover = true\"\n (mouseleave)=\"isCardHover = false\"\n>\n @if (hasDivider) {\n <div class=\"divider {{ customDividerClass }}\"></div>\n }\n\n @if (!isHeaderHidden) {\n <div\n class=\"ca-card-header d-flex justify-content-between\"\n [ngClass]=\"\n isTwoRowTitle ? 'align-items-start' : 'h-26 align-items-center'\n \"\n [class.no-data]=\"!hasBodyData\"\n [class.disabled]=\"isDisabledCard\"\n [class.always-open]=\"isAlwaysOpen\"\n [class.active]=\"_isCardOpen\"\n (mouseenter)=\"isHeaderHover = true\"\n (mouseleave)=\"isHeaderHover = false\"\n (click)=\"isCardOpenEvent($event)\"\n >\n <!-- Left side of header -->\n\n <div class=\"header-content d-flex align-items-center p-y-4\">\n <!-- Name -->\n\n <span\n class=\"header-text ca-font-extra-bold text-size-14 {{\n customNameClass\n }}\"\n [ngClass]=\"_isCardOpen ? 'text-color-black' : 'text-color-bw6-2'\"\n >\n {{ cardName }}\n </span>\n\n <!-- Counter -->\n\n @if (counter >= 0) {\n <div\n class=\"d-flex align-items-center justify-content-center p-x-5 p-y-4 m-l-4 h-18 min-w-18 br-60\"\n [ngClass]=\"_isCardOpen ? 'background-gray-2' : 'background-muted'\"\n >\n <span\n class=\"text-color-white ca-font-bold text-size-11\"\n >{{ counter }}</span\n >\n </div>\n }\n\n <ng-container\n *ngTemplateOutlet=\"\n headerLeftSideTemplate;\n context: headerLeftSideContext\n \"\n ></ng-container>\n\n <!-- Sub Text -->\n\n @if (cardSubText) {\n <span\n class=\"text-size-11 line-height-15 text-color-muted ca-font-medium m-l-4 m-t-2\"\n >\n {{ cardSubText }}\n </span>\n }\n </div>\n\n <!-- Right Side of header -->\n <div\n class=\"header-actions d-flex align-items-center {{\n headerRightSideClass\n }}\"\n >\n <ng-container\n *ngTemplateOutlet=\"headerRightSideTemplate\"\n ></ng-container>\n\n <!-- Arrow -->\n @if (\n hasArrow &&\n hasBodyData &&\n !isAlwaysOpen &&\n (!hasPlusIcon || (hasPlusIcon && !_isCardOpen))\n ) {\n <svg-icon\n class=\"header-arrow\"\n [class.header-arrow-hide]=\"!isCardHover && _isCardOpen\"\n [ngClass]=\"{ rotate: _isCardOpen }\"\n [src]=\"sharedSvgRoutes.ARROW_DOWN\"\n ></svg-icon>\n }\n\n <!-- Plus -->\n @if (\n (hasArrow && hasPlusIcon && _isCardOpen) ||\n (!hasArrow && hasPlusIcon)\n ) {\n <div\n class=\"d-flex align-items-center justify-content-center br-2 p-x-4 p-y-4 w-26 h-26 c-pointer\"\n [ngClass]=\"\n isPlusIconDisabled\n ? 'svg-fill-light-grey-6 cursor-default'\n : 'svg-fill-blue-8 svg-hover-blue-9 background-hover-blue-16'\n \"\n ngbTooltip\n [mainCaTooltip]=\"plusIconTooltip\"\n [tooltipBackground]=\"eColor.BLACK\"\n [position]=\"ePosition.BOTTOM\"\n [disableTooltip]=\"isPlusIconDisabled\"\n (click)=\"onPlusIconClick($event)\"\n >\n <svg-icon\n class=\"svg-size-18 d-flex align-items-center justify-content-center\"\n [src]=\"sharedSvgRoutes.PLUS_ICON\"\n ></svg-icon>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Body -->\n\n <div\n class=\"ca-card-body\"\n [ngClass]=\"{\n scroll: hasScrollBody,\n }\"\n >\n <div\n [ngClass]=\"noActive\"\n [ngStyle]=\"animationMarginParams\"\n [class.openedCardClass]=\"_isCardOpen\"\n [@showHideCardBody]=\"{\n value: _isCardOpen,\n params: animationMarginParams,\n }\"\n class=\"content-holder {{ customClass }}\"\n >\n @if (isCardOpenAnimated) {\n <ng-content></ng-content>\n }\n </div>\n </div>\n</div>\n", styles: [".pickup-delivery-popover{top:-38px!important;max-width:420px!important}.pickup-delivery-popover .popover-body{transform:none;margin-left:-4px;margin-top:-1px}.pickup-delivery-popover.bs-popover-top{top:auto!important;bottom:-38px!important}.pickup-delivery-popover.bs-popover-top .load-component .assigned-load-holder{order:3;margin-top:4px;margin-bottom:0!important}.pickup-delivery-popover.bs-popover-top .load-component .statusBar{order:2;margin-top:4px}.pickup-delivery-popover.bs-popover-top .load-component .animation-three-tabs{order:1}.load-pickup-delivery-popover{top:-34px!important;max-width:400px!important}.gps_dropdown_popover{top:-38px;max-width:748px!important}.gps_dropdown_popover .popover-body{padding:0}.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;-webkit-animation:progressAnimation .25s ease-in-out;animation:progressAnimation .25s ease-in-out}.table-progress-popover .progress-dropdown .progress-header .progress-title{font-size:18px;font-weight:600;color:#fff}.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:#fff}.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:#fff}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@-webkit-keyframes progressAnimation{0%{height:0px}to{height:220px}}@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}.dispatch-note .popover-body{position:relative;top:-4px;left:-4px}.dropdown-menu-popover .popover-body{transform:none}.dropdown-menu-popover.bs-popover-end-top{margin-left:-4px!important;margin-top:-4px!important}.dropdown-menu-popover.bs-popover-bottom-end{margin-right:-4px!important;margin-top:-3px!important}.dropdown-menu-popover.bs-popover-end-bottom{margin-left:-3px!important;margin-bottom:-4px!important}.dropdown-menu-popover.bs-popover-top-end{margin-right:-4px!important;margin-bottom:-3px!important}.dropdown-menu-popover.ca-pickup-delivery-dropdown-popover.bs-popover-end-top{margin-left:0!important;margin-top:-6px!important}.dropdown-menu-popover.ca-pickup-delivery-list-dropdown-popover.bs-popover-end-top{margin-left:4px!important;margin-top:-6px!important}.dropdown-details-title-card-popover .dropdown-container{transform:translateY(-4px)}.fleet-filter-popover.bs-popover-bottom-start .fleet-filter-dropdown-container{transform:translate(-4px,-4px)!important}.fleet-filter-popover.bs-popover-top-start .fleet-filter-dropdown-container{transform:translate(-4px,4px)!important}.fleet-filter-sort-popover.bs-popover-end-top{transform:translate(158px,-3px)!important}.factoring-dropdown-popover.bs-popover-bottom-end .factoring-dropdown-container{transform:translate(4px,-4px)!important}.tooltip{font-size:12px;position:relative}.tooltip.show{opacity:1}.tooltip.fade:after,.tooltip.fade:before{transform:translateY(-10px);transition:all .15s ease-in-out}.tooltip.fade:hover:after,.tooltip.fade:hover:before{opacity:1;transform:translate(0)}.tooltip-inner{white-space:nowrap;max-width:none;border-radius:3px;font-size:11px;font-weight:600}.tooltip-inner:empty{padding:0}.placeholder-delete .tooltip-inner{background-color:#f66}.placeholder-delete .arrow:before{border-top-color:#f66}.custom-popup-owners-for-flag .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(126%) translate(-50%)!important;width:130px;border-radius:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-for-flag .arrow{bottom:-18%;transform:rotate(180deg);left:calc(50% + 2.7rem)}.custom-popup-owners-for-flag .tooltip{opacity:.93!important;width:0}.custom-popup-owners{z-index:999}.custom-popup-owners .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(132%);z-index:999;box-shadow:0 0 3px #0003}.custom-popup-owners .arrow{bottom:-20%;transform:rotate(180deg)}.custom-popup-owners .tooltip{transform:translateY(-61px)!important}.custom-popup-owners-year{z-index:999}.custom-popup-owners-year .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(132%);z-index:999;box-shadow:0 0 3px #0003}.custom-popup-owners-year .arrow{bottom:-20%;transform:rotate(180deg)}.custom-popup-owners-year .tooltip{transform:translate(70px,-61px)!important}.custom-popup-owners-info .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(-100%) translate(-10%);width:200px;height:36px;display:flex;justify-content:center;align-items:center;border-radius:3px;margin-top:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-info .tooltip{opacity:.93;width:0}.custom-popup-owners-info .arrow{display:none}.custom-popup-owners-info #phone-inside{position:relative;right:26px;bottom:0}.custom-popup-owners-info-at .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(-108%) translate(-7%);width:270px;height:36px;display:flex;justify-content:center;align-items:center;border-radius:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-info-at .tooltip{opacity:1;width:0}.custom-popup-owners-info-at .arrow{display:none}.custom-popup-owners-for-tag .tooltip-inner{color:#3b3b3b;background-color:#fff;width:100px;border-radius:3px;box-shadow:0 0 3px #0003!important}.custom-popup-owners-for-tag .tooltip{top:5px!important}.custom-popup-owners-for-tag .arrow{bottom:-24%}.align-items-flex-start{justify-content:center;align-items:center}.align-items-flex-end{display:flex;justify-content:center;flex-direction:column;align-self:flex-end;align-items:flex-start}.label-add{align-self:flex-start}.fadeInLoad{animation:fadeInLoad .25s}@keyframes fadeInLoad{0%{opacity:0}to{opacity:1}}.fadeIn{opacity:1;-webkit-transition:.25s;-moz-transition:.25s;-o-transition:.25s;transition:.25s}.thisText:hover .fadeIn{opacity:0}.fadeInLoad{animation-name:example;animation-duration:.25s}@keyframes example{0%{transform:scale(.5)}to{transform:scale(1)}}.tooltip.tooltip-table-icons{left:12px!important;opacity:1}.tooltip.tooltip-table-icons .arrow{display:none!important}.tooltip.tooltip-table-icons .tooltip-inner{border-radius:0 50px 50px;background:#28529f}.tooltip.show{opacity:1;animation:fadeIn ease .5s!important;-webkit-animation:fadeIn ease .5s!important;-moz-animation:fadeIn ease .5s!important;-o-animation:fadeIn ease .5s!important;-ms-animation:fadeIn ease .5s!important}.ta-tooltip{position:absolute;font-size:12px;text-align:center;color:#fff;line-height:22px;z-index:999999!important;opacity:0;white-space:nowrap;transform:scale(.7)}.ta-tooltip.ta-tooltip-show{opacity:.85;transform:scale(1);padding:0 12px}.ta-tooltip.ta-tooltip-bottom-right,.ta-tooltip.ta-tooltip-bottom-right-corner{transform-origin:top left;border-radius:0 15px 15px}.ta-tooltip.ta-tooltip-bottom-left{transform-origin:top right;border-radius:15px 0 15px 15px}@keyframes scaleItem{0%{transform:scale(.4)}to{transform:scale(1)}}.app-ca-main-tooltip{pointer-events:none}.app-ca-main-tooltip .tooltip-inner{padding:0;background-color:transparent;pointer-events:none}.app-ca-main-tooltip .tooltip-inner .tooltip-holder{display:flex;font-size:11px;line-height:14px;font-weight:600;border-radius:3px;padding:2px 6px;animation:scaleItem .3s;white-space:normal}.app-ca-main-tooltip .tooltip-inner .tooltip-holder:empty{padding:0}.tooltip-arrow{display:none!important}.trucks.semitruck svg path,.trucks.semisleeper svg path,.trucks.flatbed svg path,.trucks.stepdeck svg path,.trucks.lowboyrgn svg path,.trucks.chassis svg path,.trucks.conestoga svg path,.trucks.sidekit svg path,.trucks.container svg path,.trailers.semitruck svg path,.trailers.semisleeper svg path,.trailers.flatbed svg path,.trailers.stepdeck svg path,.trailers.lowboyrgn svg path,.trailers.chassis svg path,.trailers.conestoga svg path,.trailers.sidekit svg path,.trailers.container svg path{fill:#92b1f5}.trucks.boxtruck svg path,.trucks.reefertruck svg path,.trucks.cargovan svg path,.trucks.dryvan svg path,.trucks.reefer svg path,.trailers.boxtruck svg path,.trailers.reefertruck svg path,.trailers.cargovan svg path,.trailers.dryvan svg path,.trailers.reefer svg path{fill:#fbc88b}.trucks.dumptruck svg path,.trucks.cementtruck svg path,.trucks.garbagetruck svg path,.trucks.enddump svg path,.trucks.bottomdump svg path,.trucks.hopper svg path,.trucks.tanker svg path,.trucks.pneumatictanker svg path,.trailers.dumptruck svg path,.trailers.cementtruck svg path,.trailers.garbagetruck svg path,.trailers.enddump svg path,.trailers.bottomdump svg path,.trailers.hopper svg path,.trailers.tanker svg path,.trailers.pneumatictanker svg path{fill:#ed9292}.trucks.towtruck svg path,.trucks.carhauler svg path,.trucks.spotter svg path,.trucks.carhaulerstigner svg path,.trailers.towtruck svg path,.trailers.carhauler svg path,.trailers.spotter svg path,.trailers.carhaulerstigner svg path{fill:#86c9c3}.trucks .svgtext-template-text,.trailers .svgtext-template-text{color:#fff;transition:color .3s ease-in-out}.colors .black svg #droplet{fill:#6c6c6c}.colors .brown svg #droplet{fill:#a1887f}.colors .darkgreen svg #droplet{fill:#4db6a2}.colors .lightgreen svg #droplet{fill:#81c784}.colors .darkblue svg #droplet{fill:#546fd2}.colors .lightblue svg #droplet{fill:#64b5f6}.colors .gray svg #droplet{fill:#aaa}.colors .purple svg #droplet{fill:#ba68c8}.colors .gold svg #droplet{fill:#bcad79}.colors .silver svg #droplet{fill:#dadada}.colors .red svg #droplet{fill:#f96b69}.colors .pink svg #droplet{fill:#f26ec2}.colors .white svg #droplet{fill:#f1f1f1}.colors .orange svg #droplet{fill:#ff8a65}.colors .yellow svg #droplet{fill:#ffd54f}.colors:hover{transition:all .3s ease-in-out}.colors:hover .black svg #droplet{fill:#3c3c3c}.colors:hover .brown svg #droplet{fill:#8d6e63}.colors:hover .darkgreen svg #droplet{fill:#26a690}.colors:hover .lightgreen svg #droplet{fill:#66bb6a}.colors:hover .darkblue svg #droplet{fill:#304fc1}.colors:hover .lightblue svg #droplet{fill:#42a5f5}.colors:hover .gray svg #droplet{fill:#919191}.colors:hover .purple svg #droplet{fill:#ab47bc}.colors:hover .gold svg #droplet{fill:#aa9c6e}.colors:hover .silver svg #droplet{fill:#b7b7b7}.colors:hover .red svg #droplet{fill:#ef5350}.colors:hover .pink svg #droplet{fill:#fa4daa}.colors:hover .white svg #droplet{fill:#fff}.colors:hover .orange svg #droplet{fill:#ff7043}.colors:hover .yellow svg #droplet{fill:#ffca28}.filter-dropdown-popover{width:260px;position:relative;top:-4px;left:-4px}.filter-dropdown-popover-max-height{max-height:360px}.filter-dropdown-list{max-height:260px;overflow-y:auto}.filter-dropdown-list-icon{height:26px;transition:background-color .3s ease-in-out}.filter-dropdown-list-icon-value{height:14px;width:14px}.filter-dropdown-list-icon-remove{display:none}.filter-dropdown-list-icon:hover{background-color:#424242}.filter-dropdown-list-icon:hover .filter-dropdown-icon-count{display:none}.filter-dropdown-list-icon-selected:hover{background-color:#0b49d1}.filter-dropdown-list-item-icons{transition:opacity .3s ease-in-out;opacity:0}.filter-dropdown-list-item-status-circle{height:10px;width:10px}.filter-dropdown-list-item-remove{display:none}.filter-dropdown-list-item:hover{background-color:#424242}.filter-dropdown-list-item:hover .filter-dropdown-list-item-icons{opacity:1}.filter-dropdown-list-item:hover .filter-dropdown-list-item-icons svg path{fill:var(--svg-fill-color, #e66767)}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-remove{display:flex}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-remove svg path{fill:#e66767!important}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-count{display:none!important}.filter-dropdown-icon{height:26px;width:26px}.filter-dropdown-count{height:14px;width:14px}.filter-dropdown-count-remove,.filter-dropdown-count-hover:hover .filter-dropdown-count-value{display:none}.filter-dropdown-count-hover:hover .filter-dropdown-count-remove{display:flex}.filter-dropdown-button{height:26px}.filter-dropdown-footer-button{color:#dadada;transition:color .3s ease-in-out,background-color .3s ease-in-out;height:18px;width:50%}.filter-dropdown-footer-button-set{color:#fff;background-color:#3b73ed}.filter-dropdown-footer-button-set:hover{background-color:#e9effd;color:#0b49d1}.filter-dropdown-footer-button-clear{color:#dadada}.filter-dropdown-footer-button-clear:hover{background-color:#eee;color:#424242}.filter-dropdown-list-badge{min-width:18px}.shadow-100{box-shadow:0 0 4px #0003}.shadow-300{box-shadow:0 0 6px #0003}.opacity-40{opacity:.4}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-90{opacity:.9}@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}}.transition-width{transition:width .25s cubic-bezier(.46,.03,.51,.95);overflow-x:hidden}.transition-transform{transition:transform .25s cubic-bezier(.46,.03,.51,.95)}.transition-transform-100{transition:transform .1s cubic-bezier(.46,.03,.51,.95)}.transition-transform-400{transition:transform .4s cubic-bezier(.46,.03,.51,.95)}.transition-width-transform{transition-duration:.25s;transition-timing-function:cubic-bezier(.46,.03,.51,.95);transition-property:transform,width}.transition-background{transition:background .2s cubic-bezier(.46,.03,.51,.95)}.transition-background-100{transition:background .1s cubic-bezier(.46,.03,.51,.95)}.transition-background-color-300{transition:background,color .3s cubic-bezier(.46,.03,.51,.95)}.transition-fill-100 svg path{transition:fill .1s cubic-bezier(.46,.03,.51,.95)}.transition-duration-250{transition-duration:.25s}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}::ng-deep .popover{--bs-popover-border-width: 0;--bs-popover-body-padding-y: 0;--bs-popover-body-padding-x: 0}::ng-deep .popover .popover-arrow{display:none}.pointer-events-none{pointer-events:none}.ca-scroll-bar{overflow-y:scroll}.ca-scroll-bar::-webkit-scrollbar{width:2px}.ca-scroll-bar::-webkit-scrollbar-thumb{background:#ccc;border-radius:1px}.ca-scroll-bar::-webkit-scrollbar-track{background:#2f2f2f}.highlight-text-45632{background-color:#3b73ed33;color:#92b1f5;transition:all .3s ease-in-out}@keyframes selectFix{0%{-webkit-user-select:none;user-select:none}to{-webkit-user-select:auto!important;user-select:auto!important}}.ca-custom-card{transition:background .1s ease-in-out}.ca-custom-card .ca-card-header{margin:4px 0;cursor:pointer;-webkit-user-select:none;user-select:none;max-width:616px}.ca-custom-card .ca-card-header .header-content .header-text{transition:color .3s ease-in-out}.ca-custom-card .ca-card-header .header-actions .header-arrow{width:18px;height:18px;line-height:18px;opacity:1;visibility:visible;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.ca-custom-card .ca-card-header .header-actions .header-arrow-hide{opacity:0;visibility:hidden}.ca-custom-card .ca-card-header .header-actions .header-arrow svg{transform:rotate(0);transition:all .3s ease-in-out}.ca-custom-card .ca-card-header .header-actions .header-arrow svg path{fill:#919191;transition:all .3s ease-in-out}.ca-custom-card .ca-card-header .header-actions .header-arrow.rotate svg{transform:rotate(180deg);transition:all .3s ease-in-out}.ca-custom-card .ca-card-header:hover{transition:all .3s ease-in-out}.ca-custom-card .ca-card-header:hover .header-text{color:#424242!important}.ca-custom-card .ca-card-header:hover .header-arrow svg path{transition:all .3s ease-in-out;fill:#424242}.ca-custom-card .ca-card-header.no-data{cursor:auto!important}.ca-custom-card .ca-card-header.no-data:hover .header-arrow svg path{fill:#aaa}.ca-custom-card .ca-card-header.disabled{cursor:default}.ca-custom-card .ca-card-header.disabled .header-text{color:#aaa!important}.ca-custom-card .ca-card-header.always-open{cursor:default}.ca-custom-card .ca-card-header.always-open .header-text{color:#424242!important}.ca-custom-card .ca-card-body{max-height:auto;position:relative}.ca-custom-card .ca-card-body .content-holder{height:0;opacity:0;overflow:hidden;transition:height .3s ease-in-out,opacity .15s ease-in-out;will-change:height,opacity}.ca-custom-card .ca-card-body .content-holder.inactive{opacity:0;overflow:hidden}.ca-custom-card .ca-card-body .content-holder.active{opacity:1;overflow:visible;height:100%}.ca-custom-card .ca-card-body .content-holder.openedCardClass{animation:selectFix 1.5s ease}.ca-custom-card .ca-card-body.scroll{overflow-y:auto!important;overflow-x:hidden!important;scrollbar-width:thin!important}.ca-custom-card .ca-card-body.scroll::-webkit-scrollbar{width:6px}.ca-custom-card .ca-card-body.scroll::-webkit-scrollbar-thumb{background-color:#dadada;border-radius:3px;border:1px solid #f7f7f7}.ca-custom-card .ca-card-body.scroll::-webkit-scrollbar-track{background:#f7f7f7;border-radius:3px}.cursor-default{cursor:default}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
31694
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaCustomCardComponent, isStandalone: true, selector: "app-ca-custom-card", inputs: { headerLeftSideTemplate: "headerLeftSideTemplate", headerRightSideTemplate: "headerRightSideTemplate", headerLeftSideContext: "headerLeftSideContext", headerRightSideClass: "headerRightSideClass", cardHeight: "cardHeight", isAnimationsDisabled: "isAnimationsDisabled", cardName: "cardName", cardSubText: "cardSubText", hasArrow: "hasArrow", hasPlusIcon: "hasPlusIcon", isPlusIconDisabled: "isPlusIconDisabled", plusIconTooltip: "plusIconTooltip", isHeaderSvgEnabled: "isHeaderSvgEnabled", counter: "counter", hasDivider: "hasDivider", hasBodyData: "hasBodyData", hasScrollBody: "hasScrollBody", isStayOpen: "isStayOpen", isDisabledCard: "isDisabledCard", isHeaderHidden: "isHeaderHidden", isTwoRowTitle: "isTwoRowTitle", isAlwaysOpen: "isAlwaysOpen", animationMarginParams: "animationMarginParams", isCardOpen: "isCardOpen", customClass: "customClass", customNameClass: "customNameClass", customDividerClass: "customDividerClass" }, outputs: { onActionEvent: "onActionEvent", onOpenCard: "onOpenCard" }, ngImport: i0, template: "<div\n class=\"ca-custom-card\"\n (mouseenter)=\"isCardHover = true\"\n (mouseleave)=\"isCardHover = false\"\n>\n @if (hasDivider) {\n <div class=\"divider {{ customDividerClass }}\"></div>\n }\n\n @if (!isHeaderHidden) {\n <div\n class=\"ca-card-header d-flex justify-content-between\"\n [ngClass]=\"\n isTwoRowTitle ? 'align-items-start' : 'h-26 align-items-center'\n \"\n [class.no-data]=\"!hasBodyData\"\n [class.disabled]=\"isDisabledCard\"\n [class.always-open]=\"isAlwaysOpen\"\n [class.active]=\"_isCardOpen\"\n (mouseenter)=\"isHeaderHover = true\"\n (mouseleave)=\"isHeaderHover = false\"\n (click)=\"isCardOpenEvent($event)\"\n >\n <!-- Left side of header -->\n\n <div class=\"header-content d-flex align-items-center p-y-4\">\n <!-- Name -->\n\n <span\n class=\"header-text ca-font-extra-bold text-size-14 {{\n customNameClass\n }}\"\n [ngClass]=\"_isCardOpen ? 'text-color-black' : 'text-color-bw6-2'\"\n >\n {{ cardName }}\n </span>\n\n <!-- Counter -->\n\n @if (counter >= 0) {\n <div\n class=\"d-flex align-items-center justify-content-center p-x-5 p-y-4 m-l-4 h-18 min-w-18 br-60\"\n [ngClass]=\"_isCardOpen ? 'background-gray-2' : 'background-muted'\"\n >\n <span\n class=\"text-color-white ca-font-bold text-size-11\"\n >{{ counter }}</span\n >\n </div>\n }\n\n <ng-container\n *ngTemplateOutlet=\"\n headerLeftSideTemplate;\n context: headerLeftSideContext\n \"\n ></ng-container>\n\n <!-- Sub Text -->\n\n @if (cardSubText) {\n <span\n class=\"text-size-11 line-height-15 text-color-muted ca-font-medium m-l-4 m-t-2\"\n >\n {{ cardSubText }}\n </span>\n }\n </div>\n\n <!-- Right Side of header -->\n <div\n class=\"header-actions d-flex align-items-center {{\n headerRightSideClass\n }}\"\n >\n <ng-container\n *ngTemplateOutlet=\"headerRightSideTemplate\"\n ></ng-container>\n\n <!-- Arrow -->\n @if (\n hasArrow &&\n hasBodyData &&\n !isAlwaysOpen &&\n (!hasPlusIcon || (hasPlusIcon && !_isCardOpen))\n ) {\n <svg-icon\n class=\"header-arrow\"\n [class.header-arrow-hide]=\"!isCardHover && _isCardOpen\"\n [ngClass]=\"{ rotate: _isCardOpen }\"\n [src]=\"sharedSvgRoutes.ARROW_DOWN\"\n ></svg-icon>\n }\n\n <!-- Plus -->\n @if (\n (hasArrow && hasPlusIcon && _isCardOpen) ||\n (!hasArrow && hasPlusIcon)\n ) {\n <div\n class=\"d-flex align-items-center justify-content-center br-2 p-x-4 p-y-4 w-26 h-26 c-pointer\"\n [ngClass]=\"\n isPlusIconDisabled\n ? 'svg-fill-light-grey-6 cursor-default'\n : 'svg-fill-blue-8 svg-hover-blue-9 background-hover-blue-16'\n \"\n ngbTooltip\n [mainCaTooltip]=\"plusIconTooltip\"\n [tooltipBackground]=\"eColor.BLACK\"\n [position]=\"ePosition.BOTTOM\"\n [disableTooltip]=\"isPlusIconDisabled\"\n (click)=\"onPlusIconClick($event)\"\n >\n <svg-icon\n class=\"svg-size-18 d-flex align-items-center justify-content-center\"\n [src]=\"sharedSvgRoutes.PLUS_ICON\"\n ></svg-icon>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Body -->\n\n <div\n class=\"ca-card-body\"\n [ngClass]=\"{\n scroll: hasScrollBody,\n }\"\n >\n <div\n [ngClass]=\"noActive\"\n [ngStyle]=\"animationMarginParams\"\n [class.openedCardClass]=\"_isCardOpen\"\n [@showHideCardBody]=\"{\n value: _isCardOpen,\n params: animationMarginParams,\n }\"\n class=\"content-holder {{ customClass }}\"\n >\n @if (isCardOpenAnimated) {\n <ng-content></ng-content>\n }\n </div>\n </div>\n</div>\n", styles: [".pickup-delivery-popover{top:-38px!important;max-width:420px!important}.pickup-delivery-popover .popover-body{transform:none;margin-left:-4px;margin-top:-1px}.pickup-delivery-popover.bs-popover-top{top:auto!important;bottom:-38px!important}.pickup-delivery-popover.bs-popover-top .load-component .assigned-load-holder{order:3;margin-top:4px;margin-bottom:0!important}.pickup-delivery-popover.bs-popover-top .load-component .statusBar{order:2;margin-top:4px}.pickup-delivery-popover.bs-popover-top .load-component .animation-three-tabs{order:1}.load-pickup-delivery-popover{top:-34px!important;max-width:400px!important}.gps_dropdown_popover{top:-38px;max-width:748px!important}.gps_dropdown_popover .popover-body{padding:0}.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;-webkit-animation:progressAnimation .25s ease-in-out;animation:progressAnimation .25s ease-in-out}.table-progress-popover .progress-dropdown .progress-header .progress-title{font-size:18px;font-weight:600;color:#fff}.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:#fff}.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:#fff}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@-webkit-keyframes progressAnimation{0%{height:0px}to{height:220px}}@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}.dispatch-note .popover-body{position:relative;top:-4px;left:-4px}.dropdown-menu-popover .popover-body{transform:none}.dropdown-menu-popover.bs-popover-end-top{margin-left:-4px!important;margin-top:-4px!important}.dropdown-menu-popover.bs-popover-bottom-end{margin-right:-4px!important;margin-top:-3px!important}.dropdown-menu-popover.bs-popover-end-bottom{margin-left:-3px!important;margin-bottom:-4px!important}.dropdown-menu-popover.bs-popover-top-end{margin-right:-4px!important;margin-bottom:-3px!important}.dropdown-menu-popover.ca-pickup-delivery-dropdown-popover.bs-popover-end-top{margin-left:0!important;margin-top:-6px!important}.dropdown-menu-popover.ca-pickup-delivery-list-dropdown-popover.bs-popover-end-top{margin-left:4px!important;margin-top:-6px!important}.dropdown-details-title-card-popover .dropdown-container{transform:translateY(-4px)}.fleet-filter-popover.bs-popover-bottom-start .fleet-filter-dropdown-container{transform:translate(-4px,-4px)!important}.fleet-filter-popover.bs-popover-top-start .fleet-filter-dropdown-container{transform:translate(-4px,4px)!important}.fleet-filter-sort-popover.bs-popover-end-top{transform:translate(158px,-3px)!important}.factoring-dropdown-popover.bs-popover-bottom-end .factoring-dropdown-container{transform:translate(4px,-4px)!important}.tooltip{font-size:12px;position:relative}.tooltip.show{opacity:1}.tooltip.fade:after,.tooltip.fade:before{transform:translateY(-10px);transition:all .15s ease-in-out}.tooltip.fade:hover:after,.tooltip.fade:hover:before{opacity:1;transform:translate(0)}.tooltip-inner{white-space:nowrap;max-width:none;border-radius:3px;font-size:11px;font-weight:600}.tooltip-inner:empty{padding:0}.placeholder-delete .tooltip-inner{background-color:#f66}.placeholder-delete .arrow:before{border-top-color:#f66}.custom-popup-owners-for-flag .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(126%) translate(-50%)!important;width:130px;border-radius:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-for-flag .arrow{bottom:-18%;transform:rotate(180deg);left:calc(50% + 2.7rem)}.custom-popup-owners-for-flag .tooltip{opacity:.93!important;width:0}.custom-popup-owners{z-index:999}.custom-popup-owners .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(132%);z-index:999;box-shadow:0 0 3px #0003}.custom-popup-owners .arrow{bottom:-20%;transform:rotate(180deg)}.custom-popup-owners .tooltip{transform:translateY(-61px)!important}.custom-popup-owners-year{z-index:999}.custom-popup-owners-year .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(132%);z-index:999;box-shadow:0 0 3px #0003}.custom-popup-owners-year .arrow{bottom:-20%;transform:rotate(180deg)}.custom-popup-owners-year .tooltip{transform:translate(70px,-61px)!important}.custom-popup-owners-info .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(-100%) translate(-10%);width:200px;height:36px;display:flex;justify-content:center;align-items:center;border-radius:3px;margin-top:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-info .tooltip{opacity:.93;width:0}.custom-popup-owners-info .arrow{display:none}.custom-popup-owners-info #phone-inside{position:relative;right:26px;bottom:0}.custom-popup-owners-info-at .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(-108%) translate(-7%);width:270px;height:36px;display:flex;justify-content:center;align-items:center;border-radius:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-info-at .tooltip{opacity:1;width:0}.custom-popup-owners-info-at .arrow{display:none}.custom-popup-owners-for-tag .tooltip-inner{color:#3b3b3b;background-color:#fff;width:100px;border-radius:3px;box-shadow:0 0 3px #0003!important}.custom-popup-owners-for-tag .tooltip{top:5px!important}.custom-popup-owners-for-tag .arrow{bottom:-24%}.align-items-flex-start{justify-content:center;align-items:center}.align-items-flex-end{display:flex;justify-content:center;flex-direction:column;align-self:flex-end;align-items:flex-start}.label-add{align-self:flex-start}.fadeInLoad{animation:fadeInLoad .25s}@keyframes fadeInLoad{0%{opacity:0}to{opacity:1}}.fadeIn{opacity:1;-webkit-transition:.25s;-moz-transition:.25s;-o-transition:.25s;transition:.25s}.thisText:hover .fadeIn{opacity:0}.fadeInLoad{animation-name:example;animation-duration:.25s}@keyframes example{0%{transform:scale(.5)}to{transform:scale(1)}}.tooltip.tooltip-table-icons{left:12px!important;opacity:1}.tooltip.tooltip-table-icons .arrow{display:none!important}.tooltip.tooltip-table-icons .tooltip-inner{border-radius:0 50px 50px;background:#28529f}.tooltip.show{opacity:1;animation:fadeIn ease .5s!important;-webkit-animation:fadeIn ease .5s!important;-moz-animation:fadeIn ease .5s!important;-o-animation:fadeIn ease .5s!important;-ms-animation:fadeIn ease .5s!important}.ta-tooltip{position:absolute;font-size:12px;text-align:center;color:#fff;line-height:22px;z-index:999999!important;opacity:0;white-space:nowrap;transform:scale(.7)}.ta-tooltip.ta-tooltip-show{opacity:.85;transform:scale(1);padding:0 12px}.ta-tooltip.ta-tooltip-bottom-right,.ta-tooltip.ta-tooltip-bottom-right-corner{transform-origin:top left;border-radius:0 15px 15px}.ta-tooltip.ta-tooltip-bottom-left{transform-origin:top right;border-radius:15px 0 15px 15px}@keyframes scaleItem{0%{transform:scale(.4)}to{transform:scale(1)}}.app-ca-main-tooltip{pointer-events:none}.app-ca-main-tooltip .tooltip-inner{padding:0;background-color:transparent;pointer-events:none}.app-ca-main-tooltip .tooltip-inner .tooltip-holder{display:flex;font-size:11px;line-height:14px;font-weight:600;border-radius:3px;padding:2px 6px;animation:scaleItem .3s;white-space:normal}.app-ca-main-tooltip .tooltip-inner .tooltip-holder:empty{padding:0}.tooltip-arrow{display:none!important}.trucks.semitruck svg path,.trucks.semisleeper svg path,.trucks.flatbed svg path,.trucks.stepdeck svg path,.trucks.lowboyrgn svg path,.trucks.chassis svg path,.trucks.conestoga svg path,.trucks.sidekit svg path,.trucks.container svg path,.trailers.semitruck svg path,.trailers.semisleeper svg path,.trailers.flatbed svg path,.trailers.stepdeck svg path,.trailers.lowboyrgn svg path,.trailers.chassis svg path,.trailers.conestoga svg path,.trailers.sidekit svg path,.trailers.container svg path{fill:#92b1f5}.trucks.boxtruck svg path,.trucks.reefertruck svg path,.trucks.cargovan svg path,.trucks.dryvan svg path,.trucks.reefer svg path,.trailers.boxtruck svg path,.trailers.reefertruck svg path,.trailers.cargovan svg path,.trailers.dryvan svg path,.trailers.reefer svg path{fill:#fbc88b}.trucks.dumptruck svg path,.trucks.cementtruck svg path,.trucks.garbagetruck svg path,.trucks.enddump svg path,.trucks.bottomdump svg path,.trucks.hopper svg path,.trucks.tanker svg path,.trucks.pneumatictanker svg path,.trailers.dumptruck svg path,.trailers.cementtruck svg path,.trailers.garbagetruck svg path,.trailers.enddump svg path,.trailers.bottomdump svg path,.trailers.hopper svg path,.trailers.tanker svg path,.trailers.pneumatictanker svg path{fill:#ed9292}.trucks.towtruck svg path,.trucks.carhauler svg path,.trucks.spotter svg path,.trucks.carhaulerstigner svg path,.trailers.towtruck svg path,.trailers.carhauler svg path,.trailers.spotter svg path,.trailers.carhaulerstigner svg path{fill:#86c9c3}.trucks .svgtext-template-text,.trailers .svgtext-template-text{color:#fff;transition:color .3s ease-in-out}.colors .black svg #droplet{fill:#6c6c6c}.colors .brown svg #droplet{fill:#a1887f}.colors .darkgreen svg #droplet{fill:#4db6a2}.colors .lightgreen svg #droplet{fill:#81c784}.colors .darkblue svg #droplet{fill:#546fd2}.colors .lightblue svg #droplet{fill:#64b5f6}.colors .gray svg #droplet{fill:#aaa}.colors .purple svg #droplet{fill:#ba68c8}.colors .gold svg #droplet{fill:#bcad79}.colors .silver svg #droplet{fill:#dadada}.colors .red svg #droplet{fill:#f96b69}.colors .pink svg #droplet{fill:#f26ec2}.colors .white svg #droplet{fill:#f1f1f1}.colors .orange svg #droplet{fill:#ff8a65}.colors .yellow svg #droplet{fill:#ffd54f}.colors:hover{transition:all .3s ease-in-out}.colors:hover .black svg #droplet{fill:#3c3c3c}.colors:hover .brown svg #droplet{fill:#8d6e63}.colors:hover .darkgreen svg #droplet{fill:#26a690}.colors:hover .lightgreen svg #droplet{fill:#66bb6a}.colors:hover .darkblue svg #droplet{fill:#304fc1}.colors:hover .lightblue svg #droplet{fill:#42a5f5}.colors:hover .gray svg #droplet{fill:#919191}.colors:hover .purple svg #droplet{fill:#ab47bc}.colors:hover .gold svg #droplet{fill:#aa9c6e}.colors:hover .silver svg #droplet{fill:#b7b7b7}.colors:hover .red svg #droplet{fill:#ef5350}.colors:hover .pink svg #droplet{fill:#fa4daa}.colors:hover .white svg #droplet{fill:#fff}.colors:hover .orange svg #droplet{fill:#ff7043}.colors:hover .yellow svg #droplet{fill:#ffca28}.filter-dropdown-popover{width:260px;position:relative;top:-4px;left:-4px}.filter-dropdown-popover-max-height{max-height:360px}.filter-dropdown-list{max-height:260px;overflow-y:auto}.filter-dropdown-list-icon{height:26px;transition:background-color .3s ease-in-out}.filter-dropdown-list-icon-value{height:14px;width:14px}.filter-dropdown-list-icon-remove{display:none}.filter-dropdown-list-icon:hover{background-color:#424242}.filter-dropdown-list-icon:hover .filter-dropdown-icon-count{display:none}.filter-dropdown-list-icon-selected:hover{background-color:#0b49d1}.filter-dropdown-list-item-icons{transition:opacity .3s ease-in-out;opacity:0}.filter-dropdown-list-item-status-circle{height:10px;width:10px}.filter-dropdown-list-item-remove{display:none}.filter-dropdown-list-item:hover{background-color:#424242}.filter-dropdown-list-item:hover .filter-dropdown-list-item-icons{opacity:1}.filter-dropdown-list-item:hover .filter-dropdown-list-item-icons svg path{fill:var(--svg-fill-color, #e66767)}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-remove{display:flex}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-remove svg path{fill:#e66767!important}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-count{display:none!important}.filter-dropdown-icon{height:26px;width:26px}.filter-dropdown-count{height:14px;width:14px}.filter-dropdown-count-remove,.filter-dropdown-count-hover:hover .filter-dropdown-count-value{display:none}.filter-dropdown-count-hover:hover .filter-dropdown-count-remove{display:flex}.filter-dropdown-button{height:26px}.filter-dropdown-footer-button{color:#dadada;transition:color .3s ease-in-out,background-color .3s ease-in-out;height:18px;width:50%}.filter-dropdown-footer-button-set{color:#fff;background-color:#3b73ed}.filter-dropdown-footer-button-set:hover{background-color:#e9effd;color:#0b49d1}.filter-dropdown-footer-button-clear{color:#dadada}.filter-dropdown-footer-button-clear:hover{background-color:#eee;color:#424242}.filter-dropdown-list-badge{min-width:18px}.shadow-100{box-shadow:0 0 4px #0003}.shadow-300{box-shadow:0 0 6px #0003}.opacity-40{opacity:.4}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-90{opacity:.9}@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}}.transition-width{transition:width .25s cubic-bezier(.46,.03,.51,.95);overflow-x:hidden}.transition-transform{transition:transform .25s cubic-bezier(.46,.03,.51,.95)}.transition-transform-100{transition:transform .1s cubic-bezier(.46,.03,.51,.95)}.transition-transform-400{transition:transform .4s cubic-bezier(.46,.03,.51,.95)}.transition-width-transform{transition-duration:.25s;transition-timing-function:cubic-bezier(.46,.03,.51,.95);transition-property:transform,width}.transition-background{transition:background .2s cubic-bezier(.46,.03,.51,.95)}.transition-background-100{transition:background .1s cubic-bezier(.46,.03,.51,.95)}.transition-background-color-300{transition:background,color .3s cubic-bezier(.46,.03,.51,.95)}.transition-fill-100 svg path{transition:fill .1s cubic-bezier(.46,.03,.51,.95)}.transition-duration-250{transition-duration:.25s}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}::ng-deep .popover{--bs-popover-border-width: 0;--bs-popover-body-padding-y: 0;--bs-popover-body-padding-x: 0}::ng-deep .popover .popover-arrow{display:none}.pointer-events-none{pointer-events:none}.ca-scroll-bar{overflow-y:scroll}.ca-scroll-bar::-webkit-scrollbar{width:2px}.ca-scroll-bar::-webkit-scrollbar-thumb{background:#ccc;border-radius:1px}.ca-scroll-bar::-webkit-scrollbar-track{background:#2f2f2f}.highlight-text-45632{background-color:#3b73ed33;color:#92b1f5;transition:all .3s ease-in-out}@keyframes selectFix{0%{-webkit-user-select:none;user-select:none}to{-webkit-user-select:auto!important;user-select:auto!important}}.ca-custom-card{transition:background .1s ease-in-out}.ca-custom-card .ca-card-header{margin:4px 0;cursor:pointer;-webkit-user-select:none;user-select:none;max-width:616px}.ca-custom-card .ca-card-header .header-content .header-text{transition:color .3s ease-in-out}.ca-custom-card .ca-card-header .header-actions .header-arrow{width:18px;height:18px;line-height:18px;opacity:1;visibility:visible;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.ca-custom-card .ca-card-header .header-actions .header-arrow-hide{opacity:0;visibility:hidden}.ca-custom-card .ca-card-header .header-actions .header-arrow svg{transform:rotate(0);transition:all .3s ease-in-out}.ca-custom-card .ca-card-header .header-actions .header-arrow svg path{fill:#919191;transition:all .3s ease-in-out}.ca-custom-card .ca-card-header .header-actions .header-arrow.rotate svg{transform:rotate(180deg);transition:all .3s ease-in-out}.ca-custom-card .ca-card-header:hover{transition:all .3s ease-in-out}.ca-custom-card .ca-card-header:hover .header-text{color:#424242!important}.ca-custom-card .ca-card-header:hover .header-arrow svg path{transition:all .3s ease-in-out;fill:#424242}.ca-custom-card .ca-card-header.no-data{cursor:auto!important}.ca-custom-card .ca-card-header.no-data:hover .header-arrow svg path{fill:#aaa}.ca-custom-card .ca-card-header.disabled{cursor:default}.ca-custom-card .ca-card-header.disabled .header-text{color:#aaa!important}.ca-custom-card .ca-card-header.always-open{cursor:default}.ca-custom-card .ca-card-header.always-open .header-text{color:#424242!important}.ca-custom-card .ca-card-body{max-height:auto;position:relative}.ca-custom-card .ca-card-body .content-holder{height:0;opacity:0;overflow:hidden;transition:height .3s ease-in-out,opacity .15s ease-in-out;will-change:height,opacity}.ca-custom-card .ca-card-body .content-holder.inactive{opacity:0;overflow:hidden}.ca-custom-card .ca-card-body .content-holder.active{opacity:1;overflow:visible;height:100%}.ca-custom-card .ca-card-body .content-holder.openedCardClass{animation:selectFix 1.5s ease}.ca-custom-card .ca-card-body.scroll{overflow-y:auto!important;overflow-x:hidden!important;scrollbar-width:thin!important}.ca-custom-card .ca-card-body.scroll::-webkit-scrollbar{width:6px}.ca-custom-card .ca-card-body.scroll::-webkit-scrollbar-thumb{background-color:#dadada;border-radius:3px;border:1px solid #f7f7f7}.ca-custom-card .ca-card-body.scroll::-webkit-scrollbar-track{background:#f7f7f7;border-radius:3px}.divider{margin:0;height:1px;width:100%;border-radius:1px;background-color:#f3f3f3}.cursor-default{cursor:default}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
31704
31695
|
// modules
|
|
31705
31696
|
CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i3.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:
|
|
31706
31697
|
// components
|
|
@@ -31715,7 +31706,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
31715
31706
|
NgbModule,
|
|
31716
31707
|
// components
|
|
31717
31708
|
CaAppTooltipV2Component,
|
|
31718
|
-
], template: "<div\n class=\"ca-custom-card\"\n (mouseenter)=\"isCardHover = true\"\n (mouseleave)=\"isCardHover = false\"\n>\n @if (hasDivider) {\n <div class=\"divider {{ customDividerClass }}\"></div>\n }\n\n @if (!isHeaderHidden) {\n <div\n class=\"ca-card-header d-flex justify-content-between\"\n [ngClass]=\"\n isTwoRowTitle ? 'align-items-start' : 'h-26 align-items-center'\n \"\n [class.no-data]=\"!hasBodyData\"\n [class.disabled]=\"isDisabledCard\"\n [class.always-open]=\"isAlwaysOpen\"\n [class.active]=\"_isCardOpen\"\n (mouseenter)=\"isHeaderHover = true\"\n (mouseleave)=\"isHeaderHover = false\"\n (click)=\"isCardOpenEvent($event)\"\n >\n <!-- Left side of header -->\n\n <div class=\"header-content d-flex align-items-center p-y-4\">\n <!-- Name -->\n\n <span\n class=\"header-text ca-font-extra-bold text-size-14 {{\n customNameClass\n }}\"\n [ngClass]=\"_isCardOpen ? 'text-color-black' : 'text-color-bw6-2'\"\n >\n {{ cardName }}\n </span>\n\n <!-- Counter -->\n\n @if (counter >= 0) {\n <div\n class=\"d-flex align-items-center justify-content-center p-x-5 p-y-4 m-l-4 h-18 min-w-18 br-60\"\n [ngClass]=\"_isCardOpen ? 'background-gray-2' : 'background-muted'\"\n >\n <span\n class=\"text-color-white ca-font-bold text-size-11\"\n >{{ counter }}</span\n >\n </div>\n }\n\n <ng-container\n *ngTemplateOutlet=\"\n headerLeftSideTemplate;\n context: headerLeftSideContext\n \"\n ></ng-container>\n\n <!-- Sub Text -->\n\n @if (cardSubText) {\n <span\n class=\"text-size-11 line-height-15 text-color-muted ca-font-medium m-l-4 m-t-2\"\n >\n {{ cardSubText }}\n </span>\n }\n </div>\n\n <!-- Right Side of header -->\n <div\n class=\"header-actions d-flex align-items-center {{\n headerRightSideClass\n }}\"\n >\n <ng-container\n *ngTemplateOutlet=\"headerRightSideTemplate\"\n ></ng-container>\n\n <!-- Arrow -->\n @if (\n hasArrow &&\n hasBodyData &&\n !isAlwaysOpen &&\n (!hasPlusIcon || (hasPlusIcon && !_isCardOpen))\n ) {\n <svg-icon\n class=\"header-arrow\"\n [class.header-arrow-hide]=\"!isCardHover && _isCardOpen\"\n [ngClass]=\"{ rotate: _isCardOpen }\"\n [src]=\"sharedSvgRoutes.ARROW_DOWN\"\n ></svg-icon>\n }\n\n <!-- Plus -->\n @if (\n (hasArrow && hasPlusIcon && _isCardOpen) ||\n (!hasArrow && hasPlusIcon)\n ) {\n <div\n class=\"d-flex align-items-center justify-content-center br-2 p-x-4 p-y-4 w-26 h-26 c-pointer\"\n [ngClass]=\"\n isPlusIconDisabled\n ? 'svg-fill-light-grey-6 cursor-default'\n : 'svg-fill-blue-8 svg-hover-blue-9 background-hover-blue-16'\n \"\n ngbTooltip\n [mainCaTooltip]=\"plusIconTooltip\"\n [tooltipBackground]=\"eColor.BLACK\"\n [position]=\"ePosition.BOTTOM\"\n [disableTooltip]=\"isPlusIconDisabled\"\n (click)=\"onPlusIconClick($event)\"\n >\n <svg-icon\n class=\"svg-size-18 d-flex align-items-center justify-content-center\"\n [src]=\"sharedSvgRoutes.PLUS_ICON\"\n ></svg-icon>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Body -->\n\n <div\n class=\"ca-card-body\"\n [ngClass]=\"{\n scroll: hasScrollBody,\n }\"\n >\n <div\n [ngClass]=\"noActive\"\n [ngStyle]=\"animationMarginParams\"\n [class.openedCardClass]=\"_isCardOpen\"\n [@showHideCardBody]=\"{\n value: _isCardOpen,\n params: animationMarginParams,\n }\"\n class=\"content-holder {{ customClass }}\"\n >\n @if (isCardOpenAnimated) {\n <ng-content></ng-content>\n }\n </div>\n </div>\n</div>\n", styles: [".pickup-delivery-popover{top:-38px!important;max-width:420px!important}.pickup-delivery-popover .popover-body{transform:none;margin-left:-4px;margin-top:-1px}.pickup-delivery-popover.bs-popover-top{top:auto!important;bottom:-38px!important}.pickup-delivery-popover.bs-popover-top .load-component .assigned-load-holder{order:3;margin-top:4px;margin-bottom:0!important}.pickup-delivery-popover.bs-popover-top .load-component .statusBar{order:2;margin-top:4px}.pickup-delivery-popover.bs-popover-top .load-component .animation-three-tabs{order:1}.load-pickup-delivery-popover{top:-34px!important;max-width:400px!important}.gps_dropdown_popover{top:-38px;max-width:748px!important}.gps_dropdown_popover .popover-body{padding:0}.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;-webkit-animation:progressAnimation .25s ease-in-out;animation:progressAnimation .25s ease-in-out}.table-progress-popover .progress-dropdown .progress-header .progress-title{font-size:18px;font-weight:600;color:#fff}.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:#fff}.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:#fff}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@-webkit-keyframes progressAnimation{0%{height:0px}to{height:220px}}@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}.dispatch-note .popover-body{position:relative;top:-4px;left:-4px}.dropdown-menu-popover .popover-body{transform:none}.dropdown-menu-popover.bs-popover-end-top{margin-left:-4px!important;margin-top:-4px!important}.dropdown-menu-popover.bs-popover-bottom-end{margin-right:-4px!important;margin-top:-3px!important}.dropdown-menu-popover.bs-popover-end-bottom{margin-left:-3px!important;margin-bottom:-4px!important}.dropdown-menu-popover.bs-popover-top-end{margin-right:-4px!important;margin-bottom:-3px!important}.dropdown-menu-popover.ca-pickup-delivery-dropdown-popover.bs-popover-end-top{margin-left:0!important;margin-top:-6px!important}.dropdown-menu-popover.ca-pickup-delivery-list-dropdown-popover.bs-popover-end-top{margin-left:4px!important;margin-top:-6px!important}.dropdown-details-title-card-popover .dropdown-container{transform:translateY(-4px)}.fleet-filter-popover.bs-popover-bottom-start .fleet-filter-dropdown-container{transform:translate(-4px,-4px)!important}.fleet-filter-popover.bs-popover-top-start .fleet-filter-dropdown-container{transform:translate(-4px,4px)!important}.fleet-filter-sort-popover.bs-popover-end-top{transform:translate(158px,-3px)!important}.factoring-dropdown-popover.bs-popover-bottom-end .factoring-dropdown-container{transform:translate(4px,-4px)!important}.tooltip{font-size:12px;position:relative}.tooltip.show{opacity:1}.tooltip.fade:after,.tooltip.fade:before{transform:translateY(-10px);transition:all .15s ease-in-out}.tooltip.fade:hover:after,.tooltip.fade:hover:before{opacity:1;transform:translate(0)}.tooltip-inner{white-space:nowrap;max-width:none;border-radius:3px;font-size:11px;font-weight:600}.tooltip-inner:empty{padding:0}.placeholder-delete .tooltip-inner{background-color:#f66}.placeholder-delete .arrow:before{border-top-color:#f66}.custom-popup-owners-for-flag .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(126%) translate(-50%)!important;width:130px;border-radius:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-for-flag .arrow{bottom:-18%;transform:rotate(180deg);left:calc(50% + 2.7rem)}.custom-popup-owners-for-flag .tooltip{opacity:.93!important;width:0}.custom-popup-owners{z-index:999}.custom-popup-owners .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(132%);z-index:999;box-shadow:0 0 3px #0003}.custom-popup-owners .arrow{bottom:-20%;transform:rotate(180deg)}.custom-popup-owners .tooltip{transform:translateY(-61px)!important}.custom-popup-owners-year{z-index:999}.custom-popup-owners-year .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(132%);z-index:999;box-shadow:0 0 3px #0003}.custom-popup-owners-year .arrow{bottom:-20%;transform:rotate(180deg)}.custom-popup-owners-year .tooltip{transform:translate(70px,-61px)!important}.custom-popup-owners-info .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(-100%) translate(-10%);width:200px;height:36px;display:flex;justify-content:center;align-items:center;border-radius:3px;margin-top:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-info .tooltip{opacity:.93;width:0}.custom-popup-owners-info .arrow{display:none}.custom-popup-owners-info #phone-inside{position:relative;right:26px;bottom:0}.custom-popup-owners-info-at .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(-108%) translate(-7%);width:270px;height:36px;display:flex;justify-content:center;align-items:center;border-radius:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-info-at .tooltip{opacity:1;width:0}.custom-popup-owners-info-at .arrow{display:none}.custom-popup-owners-for-tag .tooltip-inner{color:#3b3b3b;background-color:#fff;width:100px;border-radius:3px;box-shadow:0 0 3px #0003!important}.custom-popup-owners-for-tag .tooltip{top:5px!important}.custom-popup-owners-for-tag .arrow{bottom:-24%}.align-items-flex-start{justify-content:center;align-items:center}.align-items-flex-end{display:flex;justify-content:center;flex-direction:column;align-self:flex-end;align-items:flex-start}.label-add{align-self:flex-start}.fadeInLoad{animation:fadeInLoad .25s}@keyframes fadeInLoad{0%{opacity:0}to{opacity:1}}.fadeIn{opacity:1;-webkit-transition:.25s;-moz-transition:.25s;-o-transition:.25s;transition:.25s}.thisText:hover .fadeIn{opacity:0}.fadeInLoad{animation-name:example;animation-duration:.25s}@keyframes example{0%{transform:scale(.5)}to{transform:scale(1)}}.tooltip.tooltip-table-icons{left:12px!important;opacity:1}.tooltip.tooltip-table-icons .arrow{display:none!important}.tooltip.tooltip-table-icons .tooltip-inner{border-radius:0 50px 50px;background:#28529f}.tooltip.show{opacity:1;animation:fadeIn ease .5s!important;-webkit-animation:fadeIn ease .5s!important;-moz-animation:fadeIn ease .5s!important;-o-animation:fadeIn ease .5s!important;-ms-animation:fadeIn ease .5s!important}.ta-tooltip{position:absolute;font-size:12px;text-align:center;color:#fff;line-height:22px;z-index:999999!important;opacity:0;white-space:nowrap;transform:scale(.7)}.ta-tooltip.ta-tooltip-show{opacity:.85;transform:scale(1);padding:0 12px}.ta-tooltip.ta-tooltip-bottom-right,.ta-tooltip.ta-tooltip-bottom-right-corner{transform-origin:top left;border-radius:0 15px 15px}.ta-tooltip.ta-tooltip-bottom-left{transform-origin:top right;border-radius:15px 0 15px 15px}@keyframes scaleItem{0%{transform:scale(.4)}to{transform:scale(1)}}.app-ca-main-tooltip{pointer-events:none}.app-ca-main-tooltip .tooltip-inner{padding:0;background-color:transparent;pointer-events:none}.app-ca-main-tooltip .tooltip-inner .tooltip-holder{display:flex;font-size:11px;line-height:14px;font-weight:600;border-radius:3px;padding:2px 6px;animation:scaleItem .3s;white-space:normal}.app-ca-main-tooltip .tooltip-inner .tooltip-holder:empty{padding:0}.tooltip-arrow{display:none!important}.trucks.semitruck svg path,.trucks.semisleeper svg path,.trucks.flatbed svg path,.trucks.stepdeck svg path,.trucks.lowboyrgn svg path,.trucks.chassis svg path,.trucks.conestoga svg path,.trucks.sidekit svg path,.trucks.container svg path,.trailers.semitruck svg path,.trailers.semisleeper svg path,.trailers.flatbed svg path,.trailers.stepdeck svg path,.trailers.lowboyrgn svg path,.trailers.chassis svg path,.trailers.conestoga svg path,.trailers.sidekit svg path,.trailers.container svg path{fill:#92b1f5}.trucks.boxtruck svg path,.trucks.reefertruck svg path,.trucks.cargovan svg path,.trucks.dryvan svg path,.trucks.reefer svg path,.trailers.boxtruck svg path,.trailers.reefertruck svg path,.trailers.cargovan svg path,.trailers.dryvan svg path,.trailers.reefer svg path{fill:#fbc88b}.trucks.dumptruck svg path,.trucks.cementtruck svg path,.trucks.garbagetruck svg path,.trucks.enddump svg path,.trucks.bottomdump svg path,.trucks.hopper svg path,.trucks.tanker svg path,.trucks.pneumatictanker svg path,.trailers.dumptruck svg path,.trailers.cementtruck svg path,.trailers.garbagetruck svg path,.trailers.enddump svg path,.trailers.bottomdump svg path,.trailers.hopper svg path,.trailers.tanker svg path,.trailers.pneumatictanker svg path{fill:#ed9292}.trucks.towtruck svg path,.trucks.carhauler svg path,.trucks.spotter svg path,.trucks.carhaulerstigner svg path,.trailers.towtruck svg path,.trailers.carhauler svg path,.trailers.spotter svg path,.trailers.carhaulerstigner svg path{fill:#86c9c3}.trucks .svgtext-template-text,.trailers .svgtext-template-text{color:#fff;transition:color .3s ease-in-out}.colors .black svg #droplet{fill:#6c6c6c}.colors .brown svg #droplet{fill:#a1887f}.colors .darkgreen svg #droplet{fill:#4db6a2}.colors .lightgreen svg #droplet{fill:#81c784}.colors .darkblue svg #droplet{fill:#546fd2}.colors .lightblue svg #droplet{fill:#64b5f6}.colors .gray svg #droplet{fill:#aaa}.colors .purple svg #droplet{fill:#ba68c8}.colors .gold svg #droplet{fill:#bcad79}.colors .silver svg #droplet{fill:#dadada}.colors .red svg #droplet{fill:#f96b69}.colors .pink svg #droplet{fill:#f26ec2}.colors .white svg #droplet{fill:#f1f1f1}.colors .orange svg #droplet{fill:#ff8a65}.colors .yellow svg #droplet{fill:#ffd54f}.colors:hover{transition:all .3s ease-in-out}.colors:hover .black svg #droplet{fill:#3c3c3c}.colors:hover .brown svg #droplet{fill:#8d6e63}.colors:hover .darkgreen svg #droplet{fill:#26a690}.colors:hover .lightgreen svg #droplet{fill:#66bb6a}.colors:hover .darkblue svg #droplet{fill:#304fc1}.colors:hover .lightblue svg #droplet{fill:#42a5f5}.colors:hover .gray svg #droplet{fill:#919191}.colors:hover .purple svg #droplet{fill:#ab47bc}.colors:hover .gold svg #droplet{fill:#aa9c6e}.colors:hover .silver svg #droplet{fill:#b7b7b7}.colors:hover .red svg #droplet{fill:#ef5350}.colors:hover .pink svg #droplet{fill:#fa4daa}.colors:hover .white svg #droplet{fill:#fff}.colors:hover .orange svg #droplet{fill:#ff7043}.colors:hover .yellow svg #droplet{fill:#ffca28}.filter-dropdown-popover{width:260px;position:relative;top:-4px;left:-4px}.filter-dropdown-popover-max-height{max-height:360px}.filter-dropdown-list{max-height:260px;overflow-y:auto}.filter-dropdown-list-icon{height:26px;transition:background-color .3s ease-in-out}.filter-dropdown-list-icon-value{height:14px;width:14px}.filter-dropdown-list-icon-remove{display:none}.filter-dropdown-list-icon:hover{background-color:#424242}.filter-dropdown-list-icon:hover .filter-dropdown-icon-count{display:none}.filter-dropdown-list-icon-selected:hover{background-color:#0b49d1}.filter-dropdown-list-item-icons{transition:opacity .3s ease-in-out;opacity:0}.filter-dropdown-list-item-status-circle{height:10px;width:10px}.filter-dropdown-list-item-remove{display:none}.filter-dropdown-list-item:hover{background-color:#424242}.filter-dropdown-list-item:hover .filter-dropdown-list-item-icons{opacity:1}.filter-dropdown-list-item:hover .filter-dropdown-list-item-icons svg path{fill:var(--svg-fill-color, #e66767)}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-remove{display:flex}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-remove svg path{fill:#e66767!important}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-count{display:none!important}.filter-dropdown-icon{height:26px;width:26px}.filter-dropdown-count{height:14px;width:14px}.filter-dropdown-count-remove,.filter-dropdown-count-hover:hover .filter-dropdown-count-value{display:none}.filter-dropdown-count-hover:hover .filter-dropdown-count-remove{display:flex}.filter-dropdown-button{height:26px}.filter-dropdown-footer-button{color:#dadada;transition:color .3s ease-in-out,background-color .3s ease-in-out;height:18px;width:50%}.filter-dropdown-footer-button-set{color:#fff;background-color:#3b73ed}.filter-dropdown-footer-button-set:hover{background-color:#e9effd;color:#0b49d1}.filter-dropdown-footer-button-clear{color:#dadada}.filter-dropdown-footer-button-clear:hover{background-color:#eee;color:#424242}.filter-dropdown-list-badge{min-width:18px}.shadow-100{box-shadow:0 0 4px #0003}.shadow-300{box-shadow:0 0 6px #0003}.opacity-40{opacity:.4}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-90{opacity:.9}@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}}.transition-width{transition:width .25s cubic-bezier(.46,.03,.51,.95);overflow-x:hidden}.transition-transform{transition:transform .25s cubic-bezier(.46,.03,.51,.95)}.transition-transform-100{transition:transform .1s cubic-bezier(.46,.03,.51,.95)}.transition-transform-400{transition:transform .4s cubic-bezier(.46,.03,.51,.95)}.transition-width-transform{transition-duration:.25s;transition-timing-function:cubic-bezier(.46,.03,.51,.95);transition-property:transform,width}.transition-background{transition:background .2s cubic-bezier(.46,.03,.51,.95)}.transition-background-100{transition:background .1s cubic-bezier(.46,.03,.51,.95)}.transition-background-color-300{transition:background,color .3s cubic-bezier(.46,.03,.51,.95)}.transition-fill-100 svg path{transition:fill .1s cubic-bezier(.46,.03,.51,.95)}.transition-duration-250{transition-duration:.25s}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}::ng-deep .popover{--bs-popover-border-width: 0;--bs-popover-body-padding-y: 0;--bs-popover-body-padding-x: 0}::ng-deep .popover .popover-arrow{display:none}.pointer-events-none{pointer-events:none}.ca-scroll-bar{overflow-y:scroll}.ca-scroll-bar::-webkit-scrollbar{width:2px}.ca-scroll-bar::-webkit-scrollbar-thumb{background:#ccc;border-radius:1px}.ca-scroll-bar::-webkit-scrollbar-track{background:#2f2f2f}.highlight-text-45632{background-color:#3b73ed33;color:#92b1f5;transition:all .3s ease-in-out}@keyframes selectFix{0%{-webkit-user-select:none;user-select:none}to{-webkit-user-select:auto!important;user-select:auto!important}}.ca-custom-card{transition:background .1s ease-in-out}.ca-custom-card .ca-card-header{margin:4px 0;cursor:pointer;-webkit-user-select:none;user-select:none;max-width:616px}.ca-custom-card .ca-card-header .header-content .header-text{transition:color .3s ease-in-out}.ca-custom-card .ca-card-header .header-actions .header-arrow{width:18px;height:18px;line-height:18px;opacity:1;visibility:visible;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.ca-custom-card .ca-card-header .header-actions .header-arrow-hide{opacity:0;visibility:hidden}.ca-custom-card .ca-card-header .header-actions .header-arrow svg{transform:rotate(0);transition:all .3s ease-in-out}.ca-custom-card .ca-card-header .header-actions .header-arrow svg path{fill:#919191;transition:all .3s ease-in-out}.ca-custom-card .ca-card-header .header-actions .header-arrow.rotate svg{transform:rotate(180deg);transition:all .3s ease-in-out}.ca-custom-card .ca-card-header:hover{transition:all .3s ease-in-out}.ca-custom-card .ca-card-header:hover .header-text{color:#424242!important}.ca-custom-card .ca-card-header:hover .header-arrow svg path{transition:all .3s ease-in-out;fill:#424242}.ca-custom-card .ca-card-header.no-data{cursor:auto!important}.ca-custom-card .ca-card-header.no-data:hover .header-arrow svg path{fill:#aaa}.ca-custom-card .ca-card-header.disabled{cursor:default}.ca-custom-card .ca-card-header.disabled .header-text{color:#aaa!important}.ca-custom-card .ca-card-header.always-open{cursor:default}.ca-custom-card .ca-card-header.always-open .header-text{color:#424242!important}.ca-custom-card .ca-card-body{max-height:auto;position:relative}.ca-custom-card .ca-card-body .content-holder{height:0;opacity:0;overflow:hidden;transition:height .3s ease-in-out,opacity .15s ease-in-out;will-change:height,opacity}.ca-custom-card .ca-card-body .content-holder.inactive{opacity:0;overflow:hidden}.ca-custom-card .ca-card-body .content-holder.active{opacity:1;overflow:visible;height:100%}.ca-custom-card .ca-card-body .content-holder.openedCardClass{animation:selectFix 1.5s ease}.ca-custom-card .ca-card-body.scroll{overflow-y:auto!important;overflow-x:hidden!important;scrollbar-width:thin!important}.ca-custom-card .ca-card-body.scroll::-webkit-scrollbar{width:6px}.ca-custom-card .ca-card-body.scroll::-webkit-scrollbar-thumb{background-color:#dadada;border-radius:3px;border:1px solid #f7f7f7}.ca-custom-card .ca-card-body.scroll::-webkit-scrollbar-track{background:#f7f7f7;border-radius:3px}.cursor-default{cursor:default}\n"] }]
|
|
31709
|
+
], template: "<div\n class=\"ca-custom-card\"\n (mouseenter)=\"isCardHover = true\"\n (mouseleave)=\"isCardHover = false\"\n>\n @if (hasDivider) {\n <div class=\"divider {{ customDividerClass }}\"></div>\n }\n\n @if (!isHeaderHidden) {\n <div\n class=\"ca-card-header d-flex justify-content-between\"\n [ngClass]=\"\n isTwoRowTitle ? 'align-items-start' : 'h-26 align-items-center'\n \"\n [class.no-data]=\"!hasBodyData\"\n [class.disabled]=\"isDisabledCard\"\n [class.always-open]=\"isAlwaysOpen\"\n [class.active]=\"_isCardOpen\"\n (mouseenter)=\"isHeaderHover = true\"\n (mouseleave)=\"isHeaderHover = false\"\n (click)=\"isCardOpenEvent($event)\"\n >\n <!-- Left side of header -->\n\n <div class=\"header-content d-flex align-items-center p-y-4\">\n <!-- Name -->\n\n <span\n class=\"header-text ca-font-extra-bold text-size-14 {{\n customNameClass\n }}\"\n [ngClass]=\"_isCardOpen ? 'text-color-black' : 'text-color-bw6-2'\"\n >\n {{ cardName }}\n </span>\n\n <!-- Counter -->\n\n @if (counter >= 0) {\n <div\n class=\"d-flex align-items-center justify-content-center p-x-5 p-y-4 m-l-4 h-18 min-w-18 br-60\"\n [ngClass]=\"_isCardOpen ? 'background-gray-2' : 'background-muted'\"\n >\n <span\n class=\"text-color-white ca-font-bold text-size-11\"\n >{{ counter }}</span\n >\n </div>\n }\n\n <ng-container\n *ngTemplateOutlet=\"\n headerLeftSideTemplate;\n context: headerLeftSideContext\n \"\n ></ng-container>\n\n <!-- Sub Text -->\n\n @if (cardSubText) {\n <span\n class=\"text-size-11 line-height-15 text-color-muted ca-font-medium m-l-4 m-t-2\"\n >\n {{ cardSubText }}\n </span>\n }\n </div>\n\n <!-- Right Side of header -->\n <div\n class=\"header-actions d-flex align-items-center {{\n headerRightSideClass\n }}\"\n >\n <ng-container\n *ngTemplateOutlet=\"headerRightSideTemplate\"\n ></ng-container>\n\n <!-- Arrow -->\n @if (\n hasArrow &&\n hasBodyData &&\n !isAlwaysOpen &&\n (!hasPlusIcon || (hasPlusIcon && !_isCardOpen))\n ) {\n <svg-icon\n class=\"header-arrow\"\n [class.header-arrow-hide]=\"!isCardHover && _isCardOpen\"\n [ngClass]=\"{ rotate: _isCardOpen }\"\n [src]=\"sharedSvgRoutes.ARROW_DOWN\"\n ></svg-icon>\n }\n\n <!-- Plus -->\n @if (\n (hasArrow && hasPlusIcon && _isCardOpen) ||\n (!hasArrow && hasPlusIcon)\n ) {\n <div\n class=\"d-flex align-items-center justify-content-center br-2 p-x-4 p-y-4 w-26 h-26 c-pointer\"\n [ngClass]=\"\n isPlusIconDisabled\n ? 'svg-fill-light-grey-6 cursor-default'\n : 'svg-fill-blue-8 svg-hover-blue-9 background-hover-blue-16'\n \"\n ngbTooltip\n [mainCaTooltip]=\"plusIconTooltip\"\n [tooltipBackground]=\"eColor.BLACK\"\n [position]=\"ePosition.BOTTOM\"\n [disableTooltip]=\"isPlusIconDisabled\"\n (click)=\"onPlusIconClick($event)\"\n >\n <svg-icon\n class=\"svg-size-18 d-flex align-items-center justify-content-center\"\n [src]=\"sharedSvgRoutes.PLUS_ICON\"\n ></svg-icon>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Body -->\n\n <div\n class=\"ca-card-body\"\n [ngClass]=\"{\n scroll: hasScrollBody,\n }\"\n >\n <div\n [ngClass]=\"noActive\"\n [ngStyle]=\"animationMarginParams\"\n [class.openedCardClass]=\"_isCardOpen\"\n [@showHideCardBody]=\"{\n value: _isCardOpen,\n params: animationMarginParams,\n }\"\n class=\"content-holder {{ customClass }}\"\n >\n @if (isCardOpenAnimated) {\n <ng-content></ng-content>\n }\n </div>\n </div>\n</div>\n", styles: [".pickup-delivery-popover{top:-38px!important;max-width:420px!important}.pickup-delivery-popover .popover-body{transform:none;margin-left:-4px;margin-top:-1px}.pickup-delivery-popover.bs-popover-top{top:auto!important;bottom:-38px!important}.pickup-delivery-popover.bs-popover-top .load-component .assigned-load-holder{order:3;margin-top:4px;margin-bottom:0!important}.pickup-delivery-popover.bs-popover-top .load-component .statusBar{order:2;margin-top:4px}.pickup-delivery-popover.bs-popover-top .load-component .animation-three-tabs{order:1}.load-pickup-delivery-popover{top:-34px!important;max-width:400px!important}.gps_dropdown_popover{top:-38px;max-width:748px!important}.gps_dropdown_popover .popover-body{padding:0}.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;-webkit-animation:progressAnimation .25s ease-in-out;animation:progressAnimation .25s ease-in-out}.table-progress-popover .progress-dropdown .progress-header .progress-title{font-size:18px;font-weight:600;color:#fff}.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:#fff}.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:#fff}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@-webkit-keyframes progressAnimation{0%{height:0px}to{height:220px}}@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}.dispatch-note .popover-body{position:relative;top:-4px;left:-4px}.dropdown-menu-popover .popover-body{transform:none}.dropdown-menu-popover.bs-popover-end-top{margin-left:-4px!important;margin-top:-4px!important}.dropdown-menu-popover.bs-popover-bottom-end{margin-right:-4px!important;margin-top:-3px!important}.dropdown-menu-popover.bs-popover-end-bottom{margin-left:-3px!important;margin-bottom:-4px!important}.dropdown-menu-popover.bs-popover-top-end{margin-right:-4px!important;margin-bottom:-3px!important}.dropdown-menu-popover.ca-pickup-delivery-dropdown-popover.bs-popover-end-top{margin-left:0!important;margin-top:-6px!important}.dropdown-menu-popover.ca-pickup-delivery-list-dropdown-popover.bs-popover-end-top{margin-left:4px!important;margin-top:-6px!important}.dropdown-details-title-card-popover .dropdown-container{transform:translateY(-4px)}.fleet-filter-popover.bs-popover-bottom-start .fleet-filter-dropdown-container{transform:translate(-4px,-4px)!important}.fleet-filter-popover.bs-popover-top-start .fleet-filter-dropdown-container{transform:translate(-4px,4px)!important}.fleet-filter-sort-popover.bs-popover-end-top{transform:translate(158px,-3px)!important}.factoring-dropdown-popover.bs-popover-bottom-end .factoring-dropdown-container{transform:translate(4px,-4px)!important}.tooltip{font-size:12px;position:relative}.tooltip.show{opacity:1}.tooltip.fade:after,.tooltip.fade:before{transform:translateY(-10px);transition:all .15s ease-in-out}.tooltip.fade:hover:after,.tooltip.fade:hover:before{opacity:1;transform:translate(0)}.tooltip-inner{white-space:nowrap;max-width:none;border-radius:3px;font-size:11px;font-weight:600}.tooltip-inner:empty{padding:0}.placeholder-delete .tooltip-inner{background-color:#f66}.placeholder-delete .arrow:before{border-top-color:#f66}.custom-popup-owners-for-flag .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(126%) translate(-50%)!important;width:130px;border-radius:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-for-flag .arrow{bottom:-18%;transform:rotate(180deg);left:calc(50% + 2.7rem)}.custom-popup-owners-for-flag .tooltip{opacity:.93!important;width:0}.custom-popup-owners{z-index:999}.custom-popup-owners .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(132%);z-index:999;box-shadow:0 0 3px #0003}.custom-popup-owners .arrow{bottom:-20%;transform:rotate(180deg)}.custom-popup-owners .tooltip{transform:translateY(-61px)!important}.custom-popup-owners-year{z-index:999}.custom-popup-owners-year .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(132%);z-index:999;box-shadow:0 0 3px #0003}.custom-popup-owners-year .arrow{bottom:-20%;transform:rotate(180deg)}.custom-popup-owners-year .tooltip{transform:translate(70px,-61px)!important}.custom-popup-owners-info .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(-100%) translate(-10%);width:200px;height:36px;display:flex;justify-content:center;align-items:center;border-radius:3px;margin-top:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-info .tooltip{opacity:.93;width:0}.custom-popup-owners-info .arrow{display:none}.custom-popup-owners-info #phone-inside{position:relative;right:26px;bottom:0}.custom-popup-owners-info-at .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(-108%) translate(-7%);width:270px;height:36px;display:flex;justify-content:center;align-items:center;border-radius:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-info-at .tooltip{opacity:1;width:0}.custom-popup-owners-info-at .arrow{display:none}.custom-popup-owners-for-tag .tooltip-inner{color:#3b3b3b;background-color:#fff;width:100px;border-radius:3px;box-shadow:0 0 3px #0003!important}.custom-popup-owners-for-tag .tooltip{top:5px!important}.custom-popup-owners-for-tag .arrow{bottom:-24%}.align-items-flex-start{justify-content:center;align-items:center}.align-items-flex-end{display:flex;justify-content:center;flex-direction:column;align-self:flex-end;align-items:flex-start}.label-add{align-self:flex-start}.fadeInLoad{animation:fadeInLoad .25s}@keyframes fadeInLoad{0%{opacity:0}to{opacity:1}}.fadeIn{opacity:1;-webkit-transition:.25s;-moz-transition:.25s;-o-transition:.25s;transition:.25s}.thisText:hover .fadeIn{opacity:0}.fadeInLoad{animation-name:example;animation-duration:.25s}@keyframes example{0%{transform:scale(.5)}to{transform:scale(1)}}.tooltip.tooltip-table-icons{left:12px!important;opacity:1}.tooltip.tooltip-table-icons .arrow{display:none!important}.tooltip.tooltip-table-icons .tooltip-inner{border-radius:0 50px 50px;background:#28529f}.tooltip.show{opacity:1;animation:fadeIn ease .5s!important;-webkit-animation:fadeIn ease .5s!important;-moz-animation:fadeIn ease .5s!important;-o-animation:fadeIn ease .5s!important;-ms-animation:fadeIn ease .5s!important}.ta-tooltip{position:absolute;font-size:12px;text-align:center;color:#fff;line-height:22px;z-index:999999!important;opacity:0;white-space:nowrap;transform:scale(.7)}.ta-tooltip.ta-tooltip-show{opacity:.85;transform:scale(1);padding:0 12px}.ta-tooltip.ta-tooltip-bottom-right,.ta-tooltip.ta-tooltip-bottom-right-corner{transform-origin:top left;border-radius:0 15px 15px}.ta-tooltip.ta-tooltip-bottom-left{transform-origin:top right;border-radius:15px 0 15px 15px}@keyframes scaleItem{0%{transform:scale(.4)}to{transform:scale(1)}}.app-ca-main-tooltip{pointer-events:none}.app-ca-main-tooltip .tooltip-inner{padding:0;background-color:transparent;pointer-events:none}.app-ca-main-tooltip .tooltip-inner .tooltip-holder{display:flex;font-size:11px;line-height:14px;font-weight:600;border-radius:3px;padding:2px 6px;animation:scaleItem .3s;white-space:normal}.app-ca-main-tooltip .tooltip-inner .tooltip-holder:empty{padding:0}.tooltip-arrow{display:none!important}.trucks.semitruck svg path,.trucks.semisleeper svg path,.trucks.flatbed svg path,.trucks.stepdeck svg path,.trucks.lowboyrgn svg path,.trucks.chassis svg path,.trucks.conestoga svg path,.trucks.sidekit svg path,.trucks.container svg path,.trailers.semitruck svg path,.trailers.semisleeper svg path,.trailers.flatbed svg path,.trailers.stepdeck svg path,.trailers.lowboyrgn svg path,.trailers.chassis svg path,.trailers.conestoga svg path,.trailers.sidekit svg path,.trailers.container svg path{fill:#92b1f5}.trucks.boxtruck svg path,.trucks.reefertruck svg path,.trucks.cargovan svg path,.trucks.dryvan svg path,.trucks.reefer svg path,.trailers.boxtruck svg path,.trailers.reefertruck svg path,.trailers.cargovan svg path,.trailers.dryvan svg path,.trailers.reefer svg path{fill:#fbc88b}.trucks.dumptruck svg path,.trucks.cementtruck svg path,.trucks.garbagetruck svg path,.trucks.enddump svg path,.trucks.bottomdump svg path,.trucks.hopper svg path,.trucks.tanker svg path,.trucks.pneumatictanker svg path,.trailers.dumptruck svg path,.trailers.cementtruck svg path,.trailers.garbagetruck svg path,.trailers.enddump svg path,.trailers.bottomdump svg path,.trailers.hopper svg path,.trailers.tanker svg path,.trailers.pneumatictanker svg path{fill:#ed9292}.trucks.towtruck svg path,.trucks.carhauler svg path,.trucks.spotter svg path,.trucks.carhaulerstigner svg path,.trailers.towtruck svg path,.trailers.carhauler svg path,.trailers.spotter svg path,.trailers.carhaulerstigner svg path{fill:#86c9c3}.trucks .svgtext-template-text,.trailers .svgtext-template-text{color:#fff;transition:color .3s ease-in-out}.colors .black svg #droplet{fill:#6c6c6c}.colors .brown svg #droplet{fill:#a1887f}.colors .darkgreen svg #droplet{fill:#4db6a2}.colors .lightgreen svg #droplet{fill:#81c784}.colors .darkblue svg #droplet{fill:#546fd2}.colors .lightblue svg #droplet{fill:#64b5f6}.colors .gray svg #droplet{fill:#aaa}.colors .purple svg #droplet{fill:#ba68c8}.colors .gold svg #droplet{fill:#bcad79}.colors .silver svg #droplet{fill:#dadada}.colors .red svg #droplet{fill:#f96b69}.colors .pink svg #droplet{fill:#f26ec2}.colors .white svg #droplet{fill:#f1f1f1}.colors .orange svg #droplet{fill:#ff8a65}.colors .yellow svg #droplet{fill:#ffd54f}.colors:hover{transition:all .3s ease-in-out}.colors:hover .black svg #droplet{fill:#3c3c3c}.colors:hover .brown svg #droplet{fill:#8d6e63}.colors:hover .darkgreen svg #droplet{fill:#26a690}.colors:hover .lightgreen svg #droplet{fill:#66bb6a}.colors:hover .darkblue svg #droplet{fill:#304fc1}.colors:hover .lightblue svg #droplet{fill:#42a5f5}.colors:hover .gray svg #droplet{fill:#919191}.colors:hover .purple svg #droplet{fill:#ab47bc}.colors:hover .gold svg #droplet{fill:#aa9c6e}.colors:hover .silver svg #droplet{fill:#b7b7b7}.colors:hover .red svg #droplet{fill:#ef5350}.colors:hover .pink svg #droplet{fill:#fa4daa}.colors:hover .white svg #droplet{fill:#fff}.colors:hover .orange svg #droplet{fill:#ff7043}.colors:hover .yellow svg #droplet{fill:#ffca28}.filter-dropdown-popover{width:260px;position:relative;top:-4px;left:-4px}.filter-dropdown-popover-max-height{max-height:360px}.filter-dropdown-list{max-height:260px;overflow-y:auto}.filter-dropdown-list-icon{height:26px;transition:background-color .3s ease-in-out}.filter-dropdown-list-icon-value{height:14px;width:14px}.filter-dropdown-list-icon-remove{display:none}.filter-dropdown-list-icon:hover{background-color:#424242}.filter-dropdown-list-icon:hover .filter-dropdown-icon-count{display:none}.filter-dropdown-list-icon-selected:hover{background-color:#0b49d1}.filter-dropdown-list-item-icons{transition:opacity .3s ease-in-out;opacity:0}.filter-dropdown-list-item-status-circle{height:10px;width:10px}.filter-dropdown-list-item-remove{display:none}.filter-dropdown-list-item:hover{background-color:#424242}.filter-dropdown-list-item:hover .filter-dropdown-list-item-icons{opacity:1}.filter-dropdown-list-item:hover .filter-dropdown-list-item-icons svg path{fill:var(--svg-fill-color, #e66767)}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-remove{display:flex}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-remove svg path{fill:#e66767!important}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-count{display:none!important}.filter-dropdown-icon{height:26px;width:26px}.filter-dropdown-count{height:14px;width:14px}.filter-dropdown-count-remove,.filter-dropdown-count-hover:hover .filter-dropdown-count-value{display:none}.filter-dropdown-count-hover:hover .filter-dropdown-count-remove{display:flex}.filter-dropdown-button{height:26px}.filter-dropdown-footer-button{color:#dadada;transition:color .3s ease-in-out,background-color .3s ease-in-out;height:18px;width:50%}.filter-dropdown-footer-button-set{color:#fff;background-color:#3b73ed}.filter-dropdown-footer-button-set:hover{background-color:#e9effd;color:#0b49d1}.filter-dropdown-footer-button-clear{color:#dadada}.filter-dropdown-footer-button-clear:hover{background-color:#eee;color:#424242}.filter-dropdown-list-badge{min-width:18px}.shadow-100{box-shadow:0 0 4px #0003}.shadow-300{box-shadow:0 0 6px #0003}.opacity-40{opacity:.4}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-90{opacity:.9}@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}}.transition-width{transition:width .25s cubic-bezier(.46,.03,.51,.95);overflow-x:hidden}.transition-transform{transition:transform .25s cubic-bezier(.46,.03,.51,.95)}.transition-transform-100{transition:transform .1s cubic-bezier(.46,.03,.51,.95)}.transition-transform-400{transition:transform .4s cubic-bezier(.46,.03,.51,.95)}.transition-width-transform{transition-duration:.25s;transition-timing-function:cubic-bezier(.46,.03,.51,.95);transition-property:transform,width}.transition-background{transition:background .2s cubic-bezier(.46,.03,.51,.95)}.transition-background-100{transition:background .1s cubic-bezier(.46,.03,.51,.95)}.transition-background-color-300{transition:background,color .3s cubic-bezier(.46,.03,.51,.95)}.transition-fill-100 svg path{transition:fill .1s cubic-bezier(.46,.03,.51,.95)}.transition-duration-250{transition-duration:.25s}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}::ng-deep .popover{--bs-popover-border-width: 0;--bs-popover-body-padding-y: 0;--bs-popover-body-padding-x: 0}::ng-deep .popover .popover-arrow{display:none}.pointer-events-none{pointer-events:none}.ca-scroll-bar{overflow-y:scroll}.ca-scroll-bar::-webkit-scrollbar{width:2px}.ca-scroll-bar::-webkit-scrollbar-thumb{background:#ccc;border-radius:1px}.ca-scroll-bar::-webkit-scrollbar-track{background:#2f2f2f}.highlight-text-45632{background-color:#3b73ed33;color:#92b1f5;transition:all .3s ease-in-out}@keyframes selectFix{0%{-webkit-user-select:none;user-select:none}to{-webkit-user-select:auto!important;user-select:auto!important}}.ca-custom-card{transition:background .1s ease-in-out}.ca-custom-card .ca-card-header{margin:4px 0;cursor:pointer;-webkit-user-select:none;user-select:none;max-width:616px}.ca-custom-card .ca-card-header .header-content .header-text{transition:color .3s ease-in-out}.ca-custom-card .ca-card-header .header-actions .header-arrow{width:18px;height:18px;line-height:18px;opacity:1;visibility:visible;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.ca-custom-card .ca-card-header .header-actions .header-arrow-hide{opacity:0;visibility:hidden}.ca-custom-card .ca-card-header .header-actions .header-arrow svg{transform:rotate(0);transition:all .3s ease-in-out}.ca-custom-card .ca-card-header .header-actions .header-arrow svg path{fill:#919191;transition:all .3s ease-in-out}.ca-custom-card .ca-card-header .header-actions .header-arrow.rotate svg{transform:rotate(180deg);transition:all .3s ease-in-out}.ca-custom-card .ca-card-header:hover{transition:all .3s ease-in-out}.ca-custom-card .ca-card-header:hover .header-text{color:#424242!important}.ca-custom-card .ca-card-header:hover .header-arrow svg path{transition:all .3s ease-in-out;fill:#424242}.ca-custom-card .ca-card-header.no-data{cursor:auto!important}.ca-custom-card .ca-card-header.no-data:hover .header-arrow svg path{fill:#aaa}.ca-custom-card .ca-card-header.disabled{cursor:default}.ca-custom-card .ca-card-header.disabled .header-text{color:#aaa!important}.ca-custom-card .ca-card-header.always-open{cursor:default}.ca-custom-card .ca-card-header.always-open .header-text{color:#424242!important}.ca-custom-card .ca-card-body{max-height:auto;position:relative}.ca-custom-card .ca-card-body .content-holder{height:0;opacity:0;overflow:hidden;transition:height .3s ease-in-out,opacity .15s ease-in-out;will-change:height,opacity}.ca-custom-card .ca-card-body .content-holder.inactive{opacity:0;overflow:hidden}.ca-custom-card .ca-card-body .content-holder.active{opacity:1;overflow:visible;height:100%}.ca-custom-card .ca-card-body .content-holder.openedCardClass{animation:selectFix 1.5s ease}.ca-custom-card .ca-card-body.scroll{overflow-y:auto!important;overflow-x:hidden!important;scrollbar-width:thin!important}.ca-custom-card .ca-card-body.scroll::-webkit-scrollbar{width:6px}.ca-custom-card .ca-card-body.scroll::-webkit-scrollbar-thumb{background-color:#dadada;border-radius:3px;border:1px solid #f7f7f7}.ca-custom-card .ca-card-body.scroll::-webkit-scrollbar-track{background:#f7f7f7;border-radius:3px}.divider{margin:0;height:1px;width:100%;border-radius:1px;background-color:#f3f3f3}.cursor-default{cursor:default}\n"] }]
|
|
31719
31710
|
}], ctorParameters: () => [], propDecorators: { headerLeftSideTemplate: [{
|
|
31720
31711
|
type: Input
|
|
31721
31712
|
}], headerRightSideTemplate: [{
|
|
@@ -38205,7 +38196,7 @@ class CaIconDropdownComponent {
|
|
|
38205
38196
|
this.isHovered = isHovered;
|
|
38206
38197
|
}
|
|
38207
38198
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CaIconDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
38208
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaIconDropdownComponent, isStandalone: true, selector: "app-ca-icon-dropdown", inputs: { iconDropdownConfig: "iconDropdownConfig" }, outputs: { selectedItem: "selectedItem" }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], ngImport: i0, template: "@let tooltipLabel = !popover.isOpen() ? iconDropdownConfig?.tooltipLabel : null;\n<div\n class=\"d-flex justify-content-center icon-container\"\n [ngStyle]=\"{\n '--icon-color': iconColor,\n '--icon-background-color': backgroundColor,\n }\"\n [ngbTooltip]=\"tooltipLabel\"\n [mainCaTooltip]=\"iconDropdownConfig?.tooltipLabel\"\n position=\"bottom\"\n [tooltipBackground]=\"'#424242'\"\n tooltipTextAlign=\"center\"\n [ngbPopover]=\"dropdown\"\n #popover=\"ngbPopover\"\n [autoClose]=\"'outside'\"\n [popoverClass]=\"'dropdown-container-wrapper'\"\n [placement]=\"iconDropdownConfig.placement\"\n [container]=\"'body'\"\n (mouseenter)=\"setHoveredIconState(true)\"\n (mouseleave)=\"setHoveredIconState(false)\"\n>\n <svg-icon class=\"icon\" [src]=\"iconDropdownConfig.icon\"> </svg-icon>\n</div>\n\n<ng-template #dropdown>\n <div class=\"dropdown-container\">\n <div [style.width.px]=\"iconDropdownConfig?.dropdownWidth\">\n <div class=\"dropdown-content\">\n @for (item of iconDropdownConfig?.dropdownItems; track $index) {\n @let fontWeightClass =\n item.isSelected ? 'ca-font-bold' : 'ca-font-regular';\n <div\n class=\"d-flex justify-content-between align-items-center list-item\"\n (click)=\"selectItem(item, popover)\"\n >\n <div\n class=\"label\"\n [style.width.px]=\"\n '(iconDropdownConfig?.dropdownWidth - 60)'\n \"\n [ngClass]=\"fontWeightClass\"\n >\n {{ item.label }}\n </div>\n @if (item.isSelected) {\n <div>\n <svg-icon\n class=\"check-mark\"\n [src]=\"iconDropdownSvgRoutes.colorDrop\"\n >\n </svg-icon>\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [".pickup-delivery-popover{top:-38px!important;max-width:420px!important}.pickup-delivery-popover .popover-body{transform:none;margin-left:-4px;margin-top:-1px}.pickup-delivery-popover.bs-popover-top{top:auto!important;bottom:-38px!important}.pickup-delivery-popover.bs-popover-top .load-component .assigned-load-holder{order:3;margin-top:4px;margin-bottom:0!important}.pickup-delivery-popover.bs-popover-top .load-component .statusBar{order:2;margin-top:4px}.pickup-delivery-popover.bs-popover-top .load-component .animation-three-tabs{order:1}.load-pickup-delivery-popover{top:-34px!important;max-width:400px!important}.gps_dropdown_popover{top:-38px;max-width:748px!important}.gps_dropdown_popover .popover-body{padding:0}.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;-webkit-animation:progressAnimation .25s ease-in-out;animation:progressAnimation .25s ease-in-out}.table-progress-popover .progress-dropdown .progress-header .progress-title{font-size:18px;font-weight:600;color:#fff}.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:#fff}.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:#fff}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@-webkit-keyframes progressAnimation{0%{height:0px}to{height:220px}}@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}.dispatch-note .popover-body{position:relative;top:-4px;left:-4px}.dropdown-menu-popover .popover-body{transform:none}.dropdown-menu-popover.bs-popover-end-top{margin-left:-4px!important;margin-top:-4px!important}.dropdown-menu-popover.bs-popover-bottom-end{margin-right:-4px!important;margin-top:-3px!important}.dropdown-menu-popover.bs-popover-end-bottom{margin-left:-3px!important;margin-bottom:-4px!important}.dropdown-menu-popover.bs-popover-top-end{margin-right:-4px!important;margin-bottom:-3px!important}.dropdown-menu-popover.ca-pickup-delivery-dropdown-popover.bs-popover-end-top{margin-left:0!important;margin-top:-6px!important}.dropdown-menu-popover.ca-pickup-delivery-list-dropdown-popover.bs-popover-end-top{margin-left:4px!important;margin-top:-6px!important}.dropdown-details-title-card-popover .dropdown-container{transform:translateY(-4px)}.fleet-filter-popover.bs-popover-bottom-start .fleet-filter-dropdown-container{transform:translate(-4px,-4px)!important}.fleet-filter-popover.bs-popover-top-start .fleet-filter-dropdown-container{transform:translate(-4px,4px)!important}.fleet-filter-sort-popover.bs-popover-end-top{transform:translate(158px,-3px)!important}.factoring-dropdown-popover.bs-popover-bottom-end .factoring-dropdown-container{transform:translate(4px,-4px)!important}.tooltip{font-size:12px;position:relative}.tooltip.show{opacity:1}.tooltip.fade:after,.tooltip.fade:before{transform:translateY(-10px);transition:all .15s ease-in-out}.tooltip.fade:hover:after,.tooltip.fade:hover:before{opacity:1;transform:translate(0)}.tooltip-inner{white-space:nowrap;max-width:none;border-radius:3px;font-size:11px;font-weight:600}.tooltip-inner:empty{padding:0}.placeholder-delete .tooltip-inner{background-color:#f66}.placeholder-delete .arrow:before{border-top-color:#f66}.custom-popup-owners-for-flag .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(126%) translate(-50%)!important;width:130px;border-radius:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-for-flag .arrow{bottom:-18%;transform:rotate(180deg);left:calc(50% + 2.7rem)}.custom-popup-owners-for-flag .tooltip{opacity:.93!important;width:0}.custom-popup-owners{z-index:999}.custom-popup-owners .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(132%);z-index:999;box-shadow:0 0 3px #0003}.custom-popup-owners .arrow{bottom:-20%;transform:rotate(180deg)}.custom-popup-owners .tooltip{transform:translateY(-61px)!important}.custom-popup-owners-year{z-index:999}.custom-popup-owners-year .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(132%);z-index:999;box-shadow:0 0 3px #0003}.custom-popup-owners-year .arrow{bottom:-20%;transform:rotate(180deg)}.custom-popup-owners-year .tooltip{transform:translate(70px,-61px)!important}.custom-popup-owners-info .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(-100%) translate(-10%);width:200px;height:36px;display:flex;justify-content:center;align-items:center;border-radius:3px;margin-top:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-info .tooltip{opacity:.93;width:0}.custom-popup-owners-info .arrow{display:none}.custom-popup-owners-info #phone-inside{position:relative;right:26px;bottom:0}.custom-popup-owners-info-at .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(-108%) translate(-7%);width:270px;height:36px;display:flex;justify-content:center;align-items:center;border-radius:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-info-at .tooltip{opacity:1;width:0}.custom-popup-owners-info-at .arrow{display:none}.custom-popup-owners-for-tag .tooltip-inner{color:#3b3b3b;background-color:#fff;width:100px;border-radius:3px;box-shadow:0 0 3px #0003!important}.custom-popup-owners-for-tag .tooltip{top:5px!important}.custom-popup-owners-for-tag .arrow{bottom:-24%}.align-items-flex-start{justify-content:center;align-items:center}.align-items-flex-end{display:flex;justify-content:center;flex-direction:column;align-self:flex-end;align-items:flex-start}.label-add{align-self:flex-start}.fadeInLoad{animation:fadeInLoad .25s}@keyframes fadeInLoad{0%{opacity:0}to{opacity:1}}.fadeIn{opacity:1;-webkit-transition:.25s;-moz-transition:.25s;-o-transition:.25s;transition:.25s}.thisText:hover .fadeIn{opacity:0}.fadeInLoad{animation-name:example;animation-duration:.25s}@keyframes example{0%{transform:scale(.5)}to{transform:scale(1)}}.tooltip.tooltip-table-icons{left:12px!important;opacity:1}.tooltip.tooltip-table-icons .arrow{display:none!important}.tooltip.tooltip-table-icons .tooltip-inner{border-radius:0 50px 50px;background:#28529f}.tooltip.show{opacity:1;animation:fadeIn ease .5s!important;-webkit-animation:fadeIn ease .5s!important;-moz-animation:fadeIn ease .5s!important;-o-animation:fadeIn ease .5s!important;-ms-animation:fadeIn ease .5s!important}.ta-tooltip{position:absolute;font-size:12px;text-align:center;color:#fff;line-height:22px;z-index:999999!important;opacity:0;white-space:nowrap;transform:scale(.7)}.ta-tooltip.ta-tooltip-show{opacity:.85;transform:scale(1);padding:0 12px}.ta-tooltip.ta-tooltip-bottom-right,.ta-tooltip.ta-tooltip-bottom-right-corner{transform-origin:top left;border-radius:0 15px 15px}.ta-tooltip.ta-tooltip-bottom-left{transform-origin:top right;border-radius:15px 0 15px 15px}@keyframes scaleItem{0%{transform:scale(.4)}to{transform:scale(1)}}.app-ca-main-tooltip{pointer-events:none}.app-ca-main-tooltip .tooltip-inner{padding:0;background-color:transparent;pointer-events:none}.app-ca-main-tooltip .tooltip-inner .tooltip-holder{display:flex;font-size:11px;line-height:14px;font-weight:600;border-radius:3px;padding:2px 6px;animation:scaleItem .3s;white-space:normal}.app-ca-main-tooltip .tooltip-inner .tooltip-holder:empty{padding:0}.tooltip-arrow{display:none!important}.trucks.semitruck svg path,.trucks.semisleeper svg path,.trucks.flatbed svg path,.trucks.stepdeck svg path,.trucks.lowboyrgn svg path,.trucks.chassis svg path,.trucks.conestoga svg path,.trucks.sidekit svg path,.trucks.container svg path,.trailers.semitruck svg path,.trailers.semisleeper svg path,.trailers.flatbed svg path,.trailers.stepdeck svg path,.trailers.lowboyrgn svg path,.trailers.chassis svg path,.trailers.conestoga svg path,.trailers.sidekit svg path,.trailers.container svg path{fill:#92b1f5}.trucks.boxtruck svg path,.trucks.reefertruck svg path,.trucks.cargovan svg path,.trucks.dryvan svg path,.trucks.reefer svg path,.trailers.boxtruck svg path,.trailers.reefertruck svg path,.trailers.cargovan svg path,.trailers.dryvan svg path,.trailers.reefer svg path{fill:#fbc88b}.trucks.dumptruck svg path,.trucks.cementtruck svg path,.trucks.garbagetruck svg path,.trucks.enddump svg path,.trucks.bottomdump svg path,.trucks.hopper svg path,.trucks.tanker svg path,.trucks.pneumatictanker svg path,.trailers.dumptruck svg path,.trailers.cementtruck svg path,.trailers.garbagetruck svg path,.trailers.enddump svg path,.trailers.bottomdump svg path,.trailers.hopper svg path,.trailers.tanker svg path,.trailers.pneumatictanker svg path{fill:#ed9292}.trucks.towtruck svg path,.trucks.carhauler svg path,.trucks.spotter svg path,.trucks.carhaulerstigner svg path,.trailers.towtruck svg path,.trailers.carhauler svg path,.trailers.spotter svg path,.trailers.carhaulerstigner svg path{fill:#86c9c3}.trucks .svgtext-template-text,.trailers .svgtext-template-text{color:#fff;transition:color .3s ease-in-out}.colors .black svg #droplet{fill:#6c6c6c}.colors .brown svg #droplet{fill:#a1887f}.colors .darkgreen svg #droplet{fill:#4db6a2}.colors .lightgreen svg #droplet{fill:#81c784}.colors .darkblue svg #droplet{fill:#546fd2}.colors .lightblue svg #droplet{fill:#64b5f6}.colors .gray svg #droplet{fill:#aaa}.colors .purple svg #droplet{fill:#ba68c8}.colors .gold svg #droplet{fill:#bcad79}.colors .silver svg #droplet{fill:#dadada}.colors .red svg #droplet{fill:#f96b69}.colors .pink svg #droplet{fill:#f26ec2}.colors .white svg #droplet{fill:#f1f1f1}.colors .orange svg #droplet{fill:#ff8a65}.colors .yellow svg #droplet{fill:#ffd54f}.colors:hover{transition:all .3s ease-in-out}.colors:hover .black svg #droplet{fill:#3c3c3c}.colors:hover .brown svg #droplet{fill:#8d6e63}.colors:hover .darkgreen svg #droplet{fill:#26a690}.colors:hover .lightgreen svg #droplet{fill:#66bb6a}.colors:hover .darkblue svg #droplet{fill:#304fc1}.colors:hover .lightblue svg #droplet{fill:#42a5f5}.colors:hover .gray svg #droplet{fill:#919191}.colors:hover .purple svg #droplet{fill:#ab47bc}.colors:hover .gold svg #droplet{fill:#aa9c6e}.colors:hover .silver svg #droplet{fill:#b7b7b7}.colors:hover .red svg #droplet{fill:#ef5350}.colors:hover .pink svg #droplet{fill:#fa4daa}.colors:hover .white svg #droplet{fill:#fff}.colors:hover .orange svg #droplet{fill:#ff7043}.colors:hover .yellow svg #droplet{fill:#ffca28}.filter-dropdown-popover{width:260px;position:relative;top:-4px;left:-4px}.filter-dropdown-popover-max-height{max-height:360px}.filter-dropdown-list{max-height:260px;overflow-y:auto}.filter-dropdown-list-icon{height:26px;transition:background-color .3s ease-in-out}.filter-dropdown-list-icon-value{height:14px;width:14px}.filter-dropdown-list-icon-remove{display:none}.filter-dropdown-list-icon:hover{background-color:#424242}.filter-dropdown-list-icon:hover .filter-dropdown-icon-count{display:none}.filter-dropdown-list-icon-selected:hover{background-color:#0b49d1}.filter-dropdown-list-item-icons{transition:opacity .3s ease-in-out;opacity:0}.filter-dropdown-list-item-status-circle{height:10px;width:10px}.filter-dropdown-list-item-remove{display:none}.filter-dropdown-list-item:hover{background-color:#424242}.filter-dropdown-list-item:hover .filter-dropdown-list-item-icons{opacity:1}.filter-dropdown-list-item:hover .filter-dropdown-list-item-icons svg path{fill:var(--svg-fill-color, #e66767)}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-remove{display:flex}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-remove svg path{fill:#e66767!important}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-count{display:none!important}.filter-dropdown-icon{height:26px;width:26px}.filter-dropdown-count{height:14px;width:14px}.filter-dropdown-count-remove,.filter-dropdown-count-hover:hover .filter-dropdown-count-value{display:none}.filter-dropdown-count-hover:hover .filter-dropdown-count-remove{display:flex}.filter-dropdown-button{height:26px}.filter-dropdown-footer-button{color:#dadada;transition:color .3s ease-in-out,background-color .3s ease-in-out;height:18px;width:50%}.filter-dropdown-footer-button-set{color:#fff;background-color:#3b73ed}.filter-dropdown-footer-button-set:hover{background-color:#e9effd;color:#0b49d1}.filter-dropdown-footer-button-clear{color:#dadada}.filter-dropdown-footer-button-clear:hover{background-color:#eee;color:#424242}.filter-dropdown-list-badge{min-width:18px}.shadow-100{box-shadow:0 0 4px #0003}.shadow-300{box-shadow:0 0 6px #0003}.opacity-40{opacity:.4}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-90{opacity:.9}@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}}.transition-width{transition:width .25s cubic-bezier(.46,.03,.51,.95);overflow-x:hidden}.transition-transform{transition:transform .25s cubic-bezier(.46,.03,.51,.95)}.transition-transform-100{transition:transform .1s cubic-bezier(.46,.03,.51,.95)}.transition-transform-400{transition:transform .4s cubic-bezier(.46,.03,.51,.95)}.transition-width-transform{transition-duration:.25s;transition-timing-function:cubic-bezier(.46,.03,.51,.95);transition-property:transform,width}.transition-background{transition:background .2s cubic-bezier(.46,.03,.51,.95)}.transition-background-100{transition:background .1s cubic-bezier(.46,.03,.51,.95)}.transition-background-color-300{transition:background,color .3s cubic-bezier(.46,.03,.51,.95)}.transition-fill-100 svg path{transition:fill .1s cubic-bezier(.46,.03,.51,.95)}.transition-duration-250{transition-duration:.25s}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}::ng-deep .popover{--bs-popover-border-width: 0;--bs-popover-body-padding-y: 0;--bs-popover-body-padding-x: 0}::ng-deep .popover .popover-arrow{display:none}.pointer-events-none{pointer-events:none}.ca-scroll-bar{overflow-y:scroll}.ca-scroll-bar::-webkit-scrollbar{width:2px}.ca-scroll-bar::-webkit-scrollbar-thumb{background:#ccc;border-radius:1px}.ca-scroll-bar::-webkit-scrollbar-track{background:#2f2f2f}.highlight-text-45632{background-color:#3b73ed33;color:#92b1f5;transition:all .3s ease-in-out}::ng-deep app-ca-icon-dropdown .icon-container{width:26px;height:26px;cursor:pointer;background-color:var(--icon-background-color, #eeeeee);border-radius:2px}::ng-deep app-ca-icon-dropdown .icon-container .icon svg{display:block;width:18px;height:100%}::ng-deep app-ca-icon-dropdown .icon-container .icon svg path{fill:var(--icon-color, #919191)}::ng-deep .dropdown-container{max-height:240px;overflow-y:auto;overflow-x:hidden;padding:10px 0 10px 10px;border-radius:3px;background-color:#2f2f2f;box-shadow:0 4px 8px #0003;font-family:Montserrat,sans-serif;font-size:14px;color:#fff;transition:opacity .1s ease-in-out;opacity:1}::ng-deep .dropdown-container .list-item{padding:4px 6px;cursor:pointer}::ng-deep .dropdown-container .list-item:hover{border-radius:2px;background-color:#424242}::ng-deep .dropdown-container .list-item .check-mark svg{display:block;width:14px;height:14px}::ng-deep .dropdown-container .dropdown-content{max-height:200px;overflow-y:auto;padding-right:10px;margin-right:2px}::ng-deep .dropdown-container .dropdown-content .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}::ng-deep .dropdown-container .dropdown-content::-webkit-scrollbar{width:2px!important}::ng-deep .dropdown-container .dropdown-content::-webkit-scrollbar-track{background:transparent!important}::ng-deep .dropdown-container .dropdown-content::-webkit-scrollbar-thumb{background:#919191!important;border-radius:3px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: 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: 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: CaAppTooltipV2Component, selector: "mainCaTooltip, [mainCaTooltip]", inputs: ["mainCaTooltip", "position", "tooltipBackground", "tooltipColor", "tooltipTextAlign", "tooltipMarginTop", "tooltipMarginRight", "disableTooltip", "openTooltipDelay"] }] }); }
|
|
38199
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaIconDropdownComponent, isStandalone: true, selector: "app-ca-icon-dropdown", inputs: { iconDropdownConfig: "iconDropdownConfig" }, outputs: { selectedItem: "selectedItem" }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], ngImport: i0, template: "@let tooltipLabel = !popover.isOpen() ? iconDropdownConfig?.tooltipLabel : null;\n<div\n class=\"d-flex justify-content-center icon-container\"\n [ngStyle]=\"{\n '--icon-color': iconColor,\n '--icon-background-color': backgroundColor,\n }\"\n [ngbTooltip]=\"tooltipLabel\"\n [mainCaTooltip]=\"iconDropdownConfig?.tooltipLabel\"\n position=\"bottom\"\n [tooltipBackground]=\"'#424242'\"\n tooltipTextAlign=\"center\"\n [ngbPopover]=\"dropdown\"\n #popover=\"ngbPopover\"\n [autoClose]=\"'outside'\"\n [popoverClass]=\"'dropdown-container-wrapper'\"\n [placement]=\"iconDropdownConfig.placement\"\n [container]=\"'body'\"\n (mouseenter)=\"setHoveredIconState(true)\"\n (mouseleave)=\"setHoveredIconState(false)\"\n>\n <svg-icon class=\"icon\" [src]=\"iconDropdownConfig.icon\"> </svg-icon>\n</div>\n\n<ng-template #dropdown>\n <div class=\"dropdown-container\">\n <div [style.width.px]=\"iconDropdownConfig?.dropdownWidth\">\n <div class=\"dropdown-content\">\n @for (item of iconDropdownConfig?.dropdownItems; track $index) {\n @let fontWeightClass =\n item.isSelected ? 'ca-font-bold' : 'ca-font-regular';\n <div\n class=\"d-flex justify-content-between align-items-center list-item\"\n (click)=\"selectItem(item, popover)\"\n >\n <div\n class=\"label\"\n [style.width.px]=\"\n '(iconDropdownConfig?.dropdownWidth - 60)'\n \"\n [ngClass]=\"fontWeightClass\"\n >\n {{ item.label }}\n </div>\n @if (item.isSelected) {\n <div>\n <svg-icon\n class=\"check-mark\"\n [src]=\"iconDropdownSvgRoutes.colorDrop\"\n >\n </svg-icon>\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [".pickup-delivery-popover{top:-38px!important;max-width:420px!important}.pickup-delivery-popover .popover-body{transform:none;margin-left:-4px;margin-top:-1px}.pickup-delivery-popover.bs-popover-top{top:auto!important;bottom:-38px!important}.pickup-delivery-popover.bs-popover-top .load-component .assigned-load-holder{order:3;margin-top:4px;margin-bottom:0!important}.pickup-delivery-popover.bs-popover-top .load-component .statusBar{order:2;margin-top:4px}.pickup-delivery-popover.bs-popover-top .load-component .animation-three-tabs{order:1}.load-pickup-delivery-popover{top:-34px!important;max-width:400px!important}.gps_dropdown_popover{top:-38px;max-width:748px!important}.gps_dropdown_popover .popover-body{padding:0}.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;-webkit-animation:progressAnimation .25s ease-in-out;animation:progressAnimation .25s ease-in-out}.table-progress-popover .progress-dropdown .progress-header .progress-title{font-size:18px;font-weight:600;color:#fff}.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:#fff}.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:#fff}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@-webkit-keyframes progressAnimation{0%{height:0px}to{height:220px}}@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}.dispatch-note .popover-body{position:relative;top:-4px;left:-4px}.dropdown-menu-popover .popover-body{transform:none}.dropdown-menu-popover.bs-popover-end-top{margin-left:-4px!important;margin-top:-4px!important}.dropdown-menu-popover.bs-popover-bottom-end{margin-right:-4px!important;margin-top:-3px!important}.dropdown-menu-popover.bs-popover-end-bottom{margin-left:-3px!important;margin-bottom:-4px!important}.dropdown-menu-popover.bs-popover-top-end{margin-right:-4px!important;margin-bottom:-3px!important}.dropdown-menu-popover.ca-pickup-delivery-dropdown-popover.bs-popover-end-top{margin-left:0!important;margin-top:-6px!important}.dropdown-menu-popover.ca-pickup-delivery-list-dropdown-popover.bs-popover-end-top{margin-left:4px!important;margin-top:-6px!important}.dropdown-details-title-card-popover .dropdown-container{transform:translateY(-4px)}.fleet-filter-popover.bs-popover-bottom-start .fleet-filter-dropdown-container{transform:translate(-4px,-4px)!important}.fleet-filter-popover.bs-popover-top-start .fleet-filter-dropdown-container{transform:translate(-4px,4px)!important}.fleet-filter-sort-popover.bs-popover-end-top{transform:translate(158px,-3px)!important}.factoring-dropdown-popover.bs-popover-bottom-end .factoring-dropdown-container{transform:translate(4px,-4px)!important}.tooltip{font-size:12px;position:relative}.tooltip.show{opacity:1}.tooltip.fade:after,.tooltip.fade:before{transform:translateY(-10px);transition:all .15s ease-in-out}.tooltip.fade:hover:after,.tooltip.fade:hover:before{opacity:1;transform:translate(0)}.tooltip-inner{white-space:nowrap;max-width:none;border-radius:3px;font-size:11px;font-weight:600}.tooltip-inner:empty{padding:0}.placeholder-delete .tooltip-inner{background-color:#f66}.placeholder-delete .arrow:before{border-top-color:#f66}.custom-popup-owners-for-flag .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(126%) translate(-50%)!important;width:130px;border-radius:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-for-flag .arrow{bottom:-18%;transform:rotate(180deg);left:calc(50% + 2.7rem)}.custom-popup-owners-for-flag .tooltip{opacity:.93!important;width:0}.custom-popup-owners{z-index:999}.custom-popup-owners .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(132%);z-index:999;box-shadow:0 0 3px #0003}.custom-popup-owners .arrow{bottom:-20%;transform:rotate(180deg)}.custom-popup-owners .tooltip{transform:translateY(-61px)!important}.custom-popup-owners-year{z-index:999}.custom-popup-owners-year .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(132%);z-index:999;box-shadow:0 0 3px #0003}.custom-popup-owners-year .arrow{bottom:-20%;transform:rotate(180deg)}.custom-popup-owners-year .tooltip{transform:translate(70px,-61px)!important}.custom-popup-owners-info .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(-100%) translate(-10%);width:200px;height:36px;display:flex;justify-content:center;align-items:center;border-radius:3px;margin-top:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-info .tooltip{opacity:.93;width:0}.custom-popup-owners-info .arrow{display:none}.custom-popup-owners-info #phone-inside{position:relative;right:26px;bottom:0}.custom-popup-owners-info-at .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(-108%) translate(-7%);width:270px;height:36px;display:flex;justify-content:center;align-items:center;border-radius:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-info-at .tooltip{opacity:1;width:0}.custom-popup-owners-info-at .arrow{display:none}.custom-popup-owners-for-tag .tooltip-inner{color:#3b3b3b;background-color:#fff;width:100px;border-radius:3px;box-shadow:0 0 3px #0003!important}.custom-popup-owners-for-tag .tooltip{top:5px!important}.custom-popup-owners-for-tag .arrow{bottom:-24%}.align-items-flex-start{justify-content:center;align-items:center}.align-items-flex-end{display:flex;justify-content:center;flex-direction:column;align-self:flex-end;align-items:flex-start}.label-add{align-self:flex-start}.fadeInLoad{animation:fadeInLoad .25s}@keyframes fadeInLoad{0%{opacity:0}to{opacity:1}}.fadeIn{opacity:1;-webkit-transition:.25s;-moz-transition:.25s;-o-transition:.25s;transition:.25s}.thisText:hover .fadeIn{opacity:0}.fadeInLoad{animation-name:example;animation-duration:.25s}@keyframes example{0%{transform:scale(.5)}to{transform:scale(1)}}.tooltip.tooltip-table-icons{left:12px!important;opacity:1}.tooltip.tooltip-table-icons .arrow{display:none!important}.tooltip.tooltip-table-icons .tooltip-inner{border-radius:0 50px 50px;background:#28529f}.tooltip.show{opacity:1;animation:fadeIn ease .5s!important;-webkit-animation:fadeIn ease .5s!important;-moz-animation:fadeIn ease .5s!important;-o-animation:fadeIn ease .5s!important;-ms-animation:fadeIn ease .5s!important}.ta-tooltip{position:absolute;font-size:12px;text-align:center;color:#fff;line-height:22px;z-index:999999!important;opacity:0;white-space:nowrap;transform:scale(.7)}.ta-tooltip.ta-tooltip-show{opacity:.85;transform:scale(1);padding:0 12px}.ta-tooltip.ta-tooltip-bottom-right,.ta-tooltip.ta-tooltip-bottom-right-corner{transform-origin:top left;border-radius:0 15px 15px}.ta-tooltip.ta-tooltip-bottom-left{transform-origin:top right;border-radius:15px 0 15px 15px}@keyframes scaleItem{0%{transform:scale(.4)}to{transform:scale(1)}}.app-ca-main-tooltip{pointer-events:none}.app-ca-main-tooltip .tooltip-inner{padding:0;background-color:transparent;pointer-events:none}.app-ca-main-tooltip .tooltip-inner .tooltip-holder{display:flex;font-size:11px;line-height:14px;font-weight:600;border-radius:3px;padding:2px 6px;animation:scaleItem .3s;white-space:normal}.app-ca-main-tooltip .tooltip-inner .tooltip-holder:empty{padding:0}.tooltip-arrow{display:none!important}.trucks.semitruck svg path,.trucks.semisleeper svg path,.trucks.flatbed svg path,.trucks.stepdeck svg path,.trucks.lowboyrgn svg path,.trucks.chassis svg path,.trucks.conestoga svg path,.trucks.sidekit svg path,.trucks.container svg path,.trailers.semitruck svg path,.trailers.semisleeper svg path,.trailers.flatbed svg path,.trailers.stepdeck svg path,.trailers.lowboyrgn svg path,.trailers.chassis svg path,.trailers.conestoga svg path,.trailers.sidekit svg path,.trailers.container svg path{fill:#92b1f5}.trucks.boxtruck svg path,.trucks.reefertruck svg path,.trucks.cargovan svg path,.trucks.dryvan svg path,.trucks.reefer svg path,.trailers.boxtruck svg path,.trailers.reefertruck svg path,.trailers.cargovan svg path,.trailers.dryvan svg path,.trailers.reefer svg path{fill:#fbc88b}.trucks.dumptruck svg path,.trucks.cementtruck svg path,.trucks.garbagetruck svg path,.trucks.enddump svg path,.trucks.bottomdump svg path,.trucks.hopper svg path,.trucks.tanker svg path,.trucks.pneumatictanker svg path,.trailers.dumptruck svg path,.trailers.cementtruck svg path,.trailers.garbagetruck svg path,.trailers.enddump svg path,.trailers.bottomdump svg path,.trailers.hopper svg path,.trailers.tanker svg path,.trailers.pneumatictanker svg path{fill:#ed9292}.trucks.towtruck svg path,.trucks.carhauler svg path,.trucks.spotter svg path,.trucks.carhaulerstigner svg path,.trailers.towtruck svg path,.trailers.carhauler svg path,.trailers.spotter svg path,.trailers.carhaulerstigner svg path{fill:#86c9c3}.trucks .svgtext-template-text,.trailers .svgtext-template-text{color:#fff;transition:color .3s ease-in-out}.colors .black svg #droplet{fill:#6c6c6c}.colors .brown svg #droplet{fill:#a1887f}.colors .darkgreen svg #droplet{fill:#4db6a2}.colors .lightgreen svg #droplet{fill:#81c784}.colors .darkblue svg #droplet{fill:#546fd2}.colors .lightblue svg #droplet{fill:#64b5f6}.colors .gray svg #droplet{fill:#aaa}.colors .purple svg #droplet{fill:#ba68c8}.colors .gold svg #droplet{fill:#bcad79}.colors .silver svg #droplet{fill:#dadada}.colors .red svg #droplet{fill:#f96b69}.colors .pink svg #droplet{fill:#f26ec2}.colors .white svg #droplet{fill:#f1f1f1}.colors .orange svg #droplet{fill:#ff8a65}.colors .yellow svg #droplet{fill:#ffd54f}.colors:hover{transition:all .3s ease-in-out}.colors:hover .black svg #droplet{fill:#3c3c3c}.colors:hover .brown svg #droplet{fill:#8d6e63}.colors:hover .darkgreen svg #droplet{fill:#26a690}.colors:hover .lightgreen svg #droplet{fill:#66bb6a}.colors:hover .darkblue svg #droplet{fill:#304fc1}.colors:hover .lightblue svg #droplet{fill:#42a5f5}.colors:hover .gray svg #droplet{fill:#919191}.colors:hover .purple svg #droplet{fill:#ab47bc}.colors:hover .gold svg #droplet{fill:#aa9c6e}.colors:hover .silver svg #droplet{fill:#b7b7b7}.colors:hover .red svg #droplet{fill:#ef5350}.colors:hover .pink svg #droplet{fill:#fa4daa}.colors:hover .white svg #droplet{fill:#fff}.colors:hover .orange svg #droplet{fill:#ff7043}.colors:hover .yellow svg #droplet{fill:#ffca28}.filter-dropdown-popover{width:260px;position:relative;top:-4px;left:-4px}.filter-dropdown-popover-max-height{max-height:360px}.filter-dropdown-list{max-height:260px;overflow-y:auto}.filter-dropdown-list-icon{height:26px;transition:background-color .3s ease-in-out}.filter-dropdown-list-icon-value{height:14px;width:14px}.filter-dropdown-list-icon-remove{display:none}.filter-dropdown-list-icon:hover{background-color:#424242}.filter-dropdown-list-icon:hover .filter-dropdown-icon-count{display:none}.filter-dropdown-list-icon-selected:hover{background-color:#0b49d1}.filter-dropdown-list-item-icons{transition:opacity .3s ease-in-out;opacity:0}.filter-dropdown-list-item-status-circle{height:10px;width:10px}.filter-dropdown-list-item-remove{display:none}.filter-dropdown-list-item:hover{background-color:#424242}.filter-dropdown-list-item:hover .filter-dropdown-list-item-icons{opacity:1}.filter-dropdown-list-item:hover .filter-dropdown-list-item-icons svg path{fill:var(--svg-fill-color, #e66767)}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-remove{display:flex}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-remove svg path{fill:#e66767!important}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-count{display:none!important}.filter-dropdown-icon{height:26px;width:26px}.filter-dropdown-count{height:14px;width:14px}.filter-dropdown-count-remove,.filter-dropdown-count-hover:hover .filter-dropdown-count-value{display:none}.filter-dropdown-count-hover:hover .filter-dropdown-count-remove{display:flex}.filter-dropdown-button{height:26px}.filter-dropdown-footer-button{color:#dadada;transition:color .3s ease-in-out,background-color .3s ease-in-out;height:18px;width:50%}.filter-dropdown-footer-button-set{color:#fff;background-color:#3b73ed}.filter-dropdown-footer-button-set:hover{background-color:#e9effd;color:#0b49d1}.filter-dropdown-footer-button-clear{color:#dadada}.filter-dropdown-footer-button-clear:hover{background-color:#eee;color:#424242}.filter-dropdown-list-badge{min-width:18px}.shadow-100{box-shadow:0 0 4px #0003}.shadow-300{box-shadow:0 0 6px #0003}.opacity-40{opacity:.4}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-90{opacity:.9}@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}}.transition-width{transition:width .25s cubic-bezier(.46,.03,.51,.95);overflow-x:hidden}.transition-transform{transition:transform .25s cubic-bezier(.46,.03,.51,.95)}.transition-transform-100{transition:transform .1s cubic-bezier(.46,.03,.51,.95)}.transition-transform-400{transition:transform .4s cubic-bezier(.46,.03,.51,.95)}.transition-width-transform{transition-duration:.25s;transition-timing-function:cubic-bezier(.46,.03,.51,.95);transition-property:transform,width}.transition-background{transition:background .2s cubic-bezier(.46,.03,.51,.95)}.transition-background-100{transition:background .1s cubic-bezier(.46,.03,.51,.95)}.transition-background-color-300{transition:background,color .3s cubic-bezier(.46,.03,.51,.95)}.transition-fill-100 svg path{transition:fill .1s cubic-bezier(.46,.03,.51,.95)}.transition-duration-250{transition-duration:.25s}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}::ng-deep .popover{--bs-popover-border-width: 0;--bs-popover-body-padding-y: 0;--bs-popover-body-padding-x: 0}::ng-deep .popover .popover-arrow{display:none}.pointer-events-none{pointer-events:none}.ca-scroll-bar{overflow-y:scroll}.ca-scroll-bar::-webkit-scrollbar{width:2px}.ca-scroll-bar::-webkit-scrollbar-thumb{background:#ccc;border-radius:1px}.ca-scroll-bar::-webkit-scrollbar-track{background:#2f2f2f}.highlight-text-45632{background-color:#3b73ed33;color:#92b1f5;transition:all .3s ease-in-out}.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}::ng-deep app-ca-icon-dropdown .icon-container{width:26px;height:26px;cursor:pointer;background-color:var(--icon-background-color, #eeeeee);border-radius:2px}::ng-deep app-ca-icon-dropdown .icon-container .icon svg{display:block;width:18px;height:100%}::ng-deep app-ca-icon-dropdown .icon-container .icon svg path{fill:var(--icon-color, #919191)}::ng-deep .dropdown-container{max-height:240px;overflow-y:auto;overflow-x:hidden;padding:10px 0 10px 10px;border-radius:3px;background-color:#2f2f2f;box-shadow:0 4px 8px #0003;font-family:Montserrat,sans-serif;font-size:14px;color:#fff;transition:opacity .1s ease-in-out;opacity:1}::ng-deep .dropdown-container .list-item{padding:4px 6px;cursor:pointer}::ng-deep .dropdown-container .list-item:hover{border-radius:2px;background-color:#424242}::ng-deep .dropdown-container .list-item .check-mark svg{display:block;width:14px;height:14px}::ng-deep .dropdown-container .dropdown-content{max-height:200px;overflow-y:auto;padding-right:10px;margin-right:2px}::ng-deep .dropdown-container .dropdown-content .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}::ng-deep .dropdown-container .dropdown-content::-webkit-scrollbar{width:2px!important}::ng-deep .dropdown-container .dropdown-content::-webkit-scrollbar-track{background:transparent!important}::ng-deep .dropdown-container .dropdown-content::-webkit-scrollbar-thumb{background:#919191!important;border-radius:3px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: 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: 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: CaAppTooltipV2Component, selector: "mainCaTooltip, [mainCaTooltip]", inputs: ["mainCaTooltip", "position", "tooltipBackground", "tooltipColor", "tooltipTextAlign", "tooltipMarginTop", "tooltipMarginRight", "disableTooltip", "openTooltipDelay"] }] }); }
|
|
38209
38200
|
}
|
|
38210
38201
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CaIconDropdownComponent, decorators: [{
|
|
38211
38202
|
type: Component,
|
|
@@ -38215,7 +38206,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
38215
38206
|
NgbPopover,
|
|
38216
38207
|
NgbTooltip,
|
|
38217
38208
|
CaAppTooltipV2Component,
|
|
38218
|
-
], template: "@let tooltipLabel = !popover.isOpen() ? iconDropdownConfig?.tooltipLabel : null;\n<div\n class=\"d-flex justify-content-center icon-container\"\n [ngStyle]=\"{\n '--icon-color': iconColor,\n '--icon-background-color': backgroundColor,\n }\"\n [ngbTooltip]=\"tooltipLabel\"\n [mainCaTooltip]=\"iconDropdownConfig?.tooltipLabel\"\n position=\"bottom\"\n [tooltipBackground]=\"'#424242'\"\n tooltipTextAlign=\"center\"\n [ngbPopover]=\"dropdown\"\n #popover=\"ngbPopover\"\n [autoClose]=\"'outside'\"\n [popoverClass]=\"'dropdown-container-wrapper'\"\n [placement]=\"iconDropdownConfig.placement\"\n [container]=\"'body'\"\n (mouseenter)=\"setHoveredIconState(true)\"\n (mouseleave)=\"setHoveredIconState(false)\"\n>\n <svg-icon class=\"icon\" [src]=\"iconDropdownConfig.icon\"> </svg-icon>\n</div>\n\n<ng-template #dropdown>\n <div class=\"dropdown-container\">\n <div [style.width.px]=\"iconDropdownConfig?.dropdownWidth\">\n <div class=\"dropdown-content\">\n @for (item of iconDropdownConfig?.dropdownItems; track $index) {\n @let fontWeightClass =\n item.isSelected ? 'ca-font-bold' : 'ca-font-regular';\n <div\n class=\"d-flex justify-content-between align-items-center list-item\"\n (click)=\"selectItem(item, popover)\"\n >\n <div\n class=\"label\"\n [style.width.px]=\"\n '(iconDropdownConfig?.dropdownWidth - 60)'\n \"\n [ngClass]=\"fontWeightClass\"\n >\n {{ item.label }}\n </div>\n @if (item.isSelected) {\n <div>\n <svg-icon\n class=\"check-mark\"\n [src]=\"iconDropdownSvgRoutes.colorDrop\"\n >\n </svg-icon>\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [".pickup-delivery-popover{top:-38px!important;max-width:420px!important}.pickup-delivery-popover .popover-body{transform:none;margin-left:-4px;margin-top:-1px}.pickup-delivery-popover.bs-popover-top{top:auto!important;bottom:-38px!important}.pickup-delivery-popover.bs-popover-top .load-component .assigned-load-holder{order:3;margin-top:4px;margin-bottom:0!important}.pickup-delivery-popover.bs-popover-top .load-component .statusBar{order:2;margin-top:4px}.pickup-delivery-popover.bs-popover-top .load-component .animation-three-tabs{order:1}.load-pickup-delivery-popover{top:-34px!important;max-width:400px!important}.gps_dropdown_popover{top:-38px;max-width:748px!important}.gps_dropdown_popover .popover-body{padding:0}.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;-webkit-animation:progressAnimation .25s ease-in-out;animation:progressAnimation .25s ease-in-out}.table-progress-popover .progress-dropdown .progress-header .progress-title{font-size:18px;font-weight:600;color:#fff}.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:#fff}.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:#fff}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@-webkit-keyframes progressAnimation{0%{height:0px}to{height:220px}}@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}.dispatch-note .popover-body{position:relative;top:-4px;left:-4px}.dropdown-menu-popover .popover-body{transform:none}.dropdown-menu-popover.bs-popover-end-top{margin-left:-4px!important;margin-top:-4px!important}.dropdown-menu-popover.bs-popover-bottom-end{margin-right:-4px!important;margin-top:-3px!important}.dropdown-menu-popover.bs-popover-end-bottom{margin-left:-3px!important;margin-bottom:-4px!important}.dropdown-menu-popover.bs-popover-top-end{margin-right:-4px!important;margin-bottom:-3px!important}.dropdown-menu-popover.ca-pickup-delivery-dropdown-popover.bs-popover-end-top{margin-left:0!important;margin-top:-6px!important}.dropdown-menu-popover.ca-pickup-delivery-list-dropdown-popover.bs-popover-end-top{margin-left:4px!important;margin-top:-6px!important}.dropdown-details-title-card-popover .dropdown-container{transform:translateY(-4px)}.fleet-filter-popover.bs-popover-bottom-start .fleet-filter-dropdown-container{transform:translate(-4px,-4px)!important}.fleet-filter-popover.bs-popover-top-start .fleet-filter-dropdown-container{transform:translate(-4px,4px)!important}.fleet-filter-sort-popover.bs-popover-end-top{transform:translate(158px,-3px)!important}.factoring-dropdown-popover.bs-popover-bottom-end .factoring-dropdown-container{transform:translate(4px,-4px)!important}.tooltip{font-size:12px;position:relative}.tooltip.show{opacity:1}.tooltip.fade:after,.tooltip.fade:before{transform:translateY(-10px);transition:all .15s ease-in-out}.tooltip.fade:hover:after,.tooltip.fade:hover:before{opacity:1;transform:translate(0)}.tooltip-inner{white-space:nowrap;max-width:none;border-radius:3px;font-size:11px;font-weight:600}.tooltip-inner:empty{padding:0}.placeholder-delete .tooltip-inner{background-color:#f66}.placeholder-delete .arrow:before{border-top-color:#f66}.custom-popup-owners-for-flag .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(126%) translate(-50%)!important;width:130px;border-radius:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-for-flag .arrow{bottom:-18%;transform:rotate(180deg);left:calc(50% + 2.7rem)}.custom-popup-owners-for-flag .tooltip{opacity:.93!important;width:0}.custom-popup-owners{z-index:999}.custom-popup-owners .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(132%);z-index:999;box-shadow:0 0 3px #0003}.custom-popup-owners .arrow{bottom:-20%;transform:rotate(180deg)}.custom-popup-owners .tooltip{transform:translateY(-61px)!important}.custom-popup-owners-year{z-index:999}.custom-popup-owners-year .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(132%);z-index:999;box-shadow:0 0 3px #0003}.custom-popup-owners-year .arrow{bottom:-20%;transform:rotate(180deg)}.custom-popup-owners-year .tooltip{transform:translate(70px,-61px)!important}.custom-popup-owners-info .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(-100%) translate(-10%);width:200px;height:36px;display:flex;justify-content:center;align-items:center;border-radius:3px;margin-top:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-info .tooltip{opacity:.93;width:0}.custom-popup-owners-info .arrow{display:none}.custom-popup-owners-info #phone-inside{position:relative;right:26px;bottom:0}.custom-popup-owners-info-at .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(-108%) translate(-7%);width:270px;height:36px;display:flex;justify-content:center;align-items:center;border-radius:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-info-at .tooltip{opacity:1;width:0}.custom-popup-owners-info-at .arrow{display:none}.custom-popup-owners-for-tag .tooltip-inner{color:#3b3b3b;background-color:#fff;width:100px;border-radius:3px;box-shadow:0 0 3px #0003!important}.custom-popup-owners-for-tag .tooltip{top:5px!important}.custom-popup-owners-for-tag .arrow{bottom:-24%}.align-items-flex-start{justify-content:center;align-items:center}.align-items-flex-end{display:flex;justify-content:center;flex-direction:column;align-self:flex-end;align-items:flex-start}.label-add{align-self:flex-start}.fadeInLoad{animation:fadeInLoad .25s}@keyframes fadeInLoad{0%{opacity:0}to{opacity:1}}.fadeIn{opacity:1;-webkit-transition:.25s;-moz-transition:.25s;-o-transition:.25s;transition:.25s}.thisText:hover .fadeIn{opacity:0}.fadeInLoad{animation-name:example;animation-duration:.25s}@keyframes example{0%{transform:scale(.5)}to{transform:scale(1)}}.tooltip.tooltip-table-icons{left:12px!important;opacity:1}.tooltip.tooltip-table-icons .arrow{display:none!important}.tooltip.tooltip-table-icons .tooltip-inner{border-radius:0 50px 50px;background:#28529f}.tooltip.show{opacity:1;animation:fadeIn ease .5s!important;-webkit-animation:fadeIn ease .5s!important;-moz-animation:fadeIn ease .5s!important;-o-animation:fadeIn ease .5s!important;-ms-animation:fadeIn ease .5s!important}.ta-tooltip{position:absolute;font-size:12px;text-align:center;color:#fff;line-height:22px;z-index:999999!important;opacity:0;white-space:nowrap;transform:scale(.7)}.ta-tooltip.ta-tooltip-show{opacity:.85;transform:scale(1);padding:0 12px}.ta-tooltip.ta-tooltip-bottom-right,.ta-tooltip.ta-tooltip-bottom-right-corner{transform-origin:top left;border-radius:0 15px 15px}.ta-tooltip.ta-tooltip-bottom-left{transform-origin:top right;border-radius:15px 0 15px 15px}@keyframes scaleItem{0%{transform:scale(.4)}to{transform:scale(1)}}.app-ca-main-tooltip{pointer-events:none}.app-ca-main-tooltip .tooltip-inner{padding:0;background-color:transparent;pointer-events:none}.app-ca-main-tooltip .tooltip-inner .tooltip-holder{display:flex;font-size:11px;line-height:14px;font-weight:600;border-radius:3px;padding:2px 6px;animation:scaleItem .3s;white-space:normal}.app-ca-main-tooltip .tooltip-inner .tooltip-holder:empty{padding:0}.tooltip-arrow{display:none!important}.trucks.semitruck svg path,.trucks.semisleeper svg path,.trucks.flatbed svg path,.trucks.stepdeck svg path,.trucks.lowboyrgn svg path,.trucks.chassis svg path,.trucks.conestoga svg path,.trucks.sidekit svg path,.trucks.container svg path,.trailers.semitruck svg path,.trailers.semisleeper svg path,.trailers.flatbed svg path,.trailers.stepdeck svg path,.trailers.lowboyrgn svg path,.trailers.chassis svg path,.trailers.conestoga svg path,.trailers.sidekit svg path,.trailers.container svg path{fill:#92b1f5}.trucks.boxtruck svg path,.trucks.reefertruck svg path,.trucks.cargovan svg path,.trucks.dryvan svg path,.trucks.reefer svg path,.trailers.boxtruck svg path,.trailers.reefertruck svg path,.trailers.cargovan svg path,.trailers.dryvan svg path,.trailers.reefer svg path{fill:#fbc88b}.trucks.dumptruck svg path,.trucks.cementtruck svg path,.trucks.garbagetruck svg path,.trucks.enddump svg path,.trucks.bottomdump svg path,.trucks.hopper svg path,.trucks.tanker svg path,.trucks.pneumatictanker svg path,.trailers.dumptruck svg path,.trailers.cementtruck svg path,.trailers.garbagetruck svg path,.trailers.enddump svg path,.trailers.bottomdump svg path,.trailers.hopper svg path,.trailers.tanker svg path,.trailers.pneumatictanker svg path{fill:#ed9292}.trucks.towtruck svg path,.trucks.carhauler svg path,.trucks.spotter svg path,.trucks.carhaulerstigner svg path,.trailers.towtruck svg path,.trailers.carhauler svg path,.trailers.spotter svg path,.trailers.carhaulerstigner svg path{fill:#86c9c3}.trucks .svgtext-template-text,.trailers .svgtext-template-text{color:#fff;transition:color .3s ease-in-out}.colors .black svg #droplet{fill:#6c6c6c}.colors .brown svg #droplet{fill:#a1887f}.colors .darkgreen svg #droplet{fill:#4db6a2}.colors .lightgreen svg #droplet{fill:#81c784}.colors .darkblue svg #droplet{fill:#546fd2}.colors .lightblue svg #droplet{fill:#64b5f6}.colors .gray svg #droplet{fill:#aaa}.colors .purple svg #droplet{fill:#ba68c8}.colors .gold svg #droplet{fill:#bcad79}.colors .silver svg #droplet{fill:#dadada}.colors .red svg #droplet{fill:#f96b69}.colors .pink svg #droplet{fill:#f26ec2}.colors .white svg #droplet{fill:#f1f1f1}.colors .orange svg #droplet{fill:#ff8a65}.colors .yellow svg #droplet{fill:#ffd54f}.colors:hover{transition:all .3s ease-in-out}.colors:hover .black svg #droplet{fill:#3c3c3c}.colors:hover .brown svg #droplet{fill:#8d6e63}.colors:hover .darkgreen svg #droplet{fill:#26a690}.colors:hover .lightgreen svg #droplet{fill:#66bb6a}.colors:hover .darkblue svg #droplet{fill:#304fc1}.colors:hover .lightblue svg #droplet{fill:#42a5f5}.colors:hover .gray svg #droplet{fill:#919191}.colors:hover .purple svg #droplet{fill:#ab47bc}.colors:hover .gold svg #droplet{fill:#aa9c6e}.colors:hover .silver svg #droplet{fill:#b7b7b7}.colors:hover .red svg #droplet{fill:#ef5350}.colors:hover .pink svg #droplet{fill:#fa4daa}.colors:hover .white svg #droplet{fill:#fff}.colors:hover .orange svg #droplet{fill:#ff7043}.colors:hover .yellow svg #droplet{fill:#ffca28}.filter-dropdown-popover{width:260px;position:relative;top:-4px;left:-4px}.filter-dropdown-popover-max-height{max-height:360px}.filter-dropdown-list{max-height:260px;overflow-y:auto}.filter-dropdown-list-icon{height:26px;transition:background-color .3s ease-in-out}.filter-dropdown-list-icon-value{height:14px;width:14px}.filter-dropdown-list-icon-remove{display:none}.filter-dropdown-list-icon:hover{background-color:#424242}.filter-dropdown-list-icon:hover .filter-dropdown-icon-count{display:none}.filter-dropdown-list-icon-selected:hover{background-color:#0b49d1}.filter-dropdown-list-item-icons{transition:opacity .3s ease-in-out;opacity:0}.filter-dropdown-list-item-status-circle{height:10px;width:10px}.filter-dropdown-list-item-remove{display:none}.filter-dropdown-list-item:hover{background-color:#424242}.filter-dropdown-list-item:hover .filter-dropdown-list-item-icons{opacity:1}.filter-dropdown-list-item:hover .filter-dropdown-list-item-icons svg path{fill:var(--svg-fill-color, #e66767)}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-remove{display:flex}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-remove svg path{fill:#e66767!important}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-count{display:none!important}.filter-dropdown-icon{height:26px;width:26px}.filter-dropdown-count{height:14px;width:14px}.filter-dropdown-count-remove,.filter-dropdown-count-hover:hover .filter-dropdown-count-value{display:none}.filter-dropdown-count-hover:hover .filter-dropdown-count-remove{display:flex}.filter-dropdown-button{height:26px}.filter-dropdown-footer-button{color:#dadada;transition:color .3s ease-in-out,background-color .3s ease-in-out;height:18px;width:50%}.filter-dropdown-footer-button-set{color:#fff;background-color:#3b73ed}.filter-dropdown-footer-button-set:hover{background-color:#e9effd;color:#0b49d1}.filter-dropdown-footer-button-clear{color:#dadada}.filter-dropdown-footer-button-clear:hover{background-color:#eee;color:#424242}.filter-dropdown-list-badge{min-width:18px}.shadow-100{box-shadow:0 0 4px #0003}.shadow-300{box-shadow:0 0 6px #0003}.opacity-40{opacity:.4}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-90{opacity:.9}@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}}.transition-width{transition:width .25s cubic-bezier(.46,.03,.51,.95);overflow-x:hidden}.transition-transform{transition:transform .25s cubic-bezier(.46,.03,.51,.95)}.transition-transform-100{transition:transform .1s cubic-bezier(.46,.03,.51,.95)}.transition-transform-400{transition:transform .4s cubic-bezier(.46,.03,.51,.95)}.transition-width-transform{transition-duration:.25s;transition-timing-function:cubic-bezier(.46,.03,.51,.95);transition-property:transform,width}.transition-background{transition:background .2s cubic-bezier(.46,.03,.51,.95)}.transition-background-100{transition:background .1s cubic-bezier(.46,.03,.51,.95)}.transition-background-color-300{transition:background,color .3s cubic-bezier(.46,.03,.51,.95)}.transition-fill-100 svg path{transition:fill .1s cubic-bezier(.46,.03,.51,.95)}.transition-duration-250{transition-duration:.25s}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}::ng-deep .popover{--bs-popover-border-width: 0;--bs-popover-body-padding-y: 0;--bs-popover-body-padding-x: 0}::ng-deep .popover .popover-arrow{display:none}.pointer-events-none{pointer-events:none}.ca-scroll-bar{overflow-y:scroll}.ca-scroll-bar::-webkit-scrollbar{width:2px}.ca-scroll-bar::-webkit-scrollbar-thumb{background:#ccc;border-radius:1px}.ca-scroll-bar::-webkit-scrollbar-track{background:#2f2f2f}.highlight-text-45632{background-color:#3b73ed33;color:#92b1f5;transition:all .3s ease-in-out}::ng-deep app-ca-icon-dropdown .icon-container{width:26px;height:26px;cursor:pointer;background-color:var(--icon-background-color, #eeeeee);border-radius:2px}::ng-deep app-ca-icon-dropdown .icon-container .icon svg{display:block;width:18px;height:100%}::ng-deep app-ca-icon-dropdown .icon-container .icon svg path{fill:var(--icon-color, #919191)}::ng-deep .dropdown-container{max-height:240px;overflow-y:auto;overflow-x:hidden;padding:10px 0 10px 10px;border-radius:3px;background-color:#2f2f2f;box-shadow:0 4px 8px #0003;font-family:Montserrat,sans-serif;font-size:14px;color:#fff;transition:opacity .1s ease-in-out;opacity:1}::ng-deep .dropdown-container .list-item{padding:4px 6px;cursor:pointer}::ng-deep .dropdown-container .list-item:hover{border-radius:2px;background-color:#424242}::ng-deep .dropdown-container .list-item .check-mark svg{display:block;width:14px;height:14px}::ng-deep .dropdown-container .dropdown-content{max-height:200px;overflow-y:auto;padding-right:10px;margin-right:2px}::ng-deep .dropdown-container .dropdown-content .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}::ng-deep .dropdown-container .dropdown-content::-webkit-scrollbar{width:2px!important}::ng-deep .dropdown-container .dropdown-content::-webkit-scrollbar-track{background:transparent!important}::ng-deep .dropdown-container .dropdown-content::-webkit-scrollbar-thumb{background:#919191!important;border-radius:3px!important}\n"] }]
|
|
38209
|
+
], template: "@let tooltipLabel = !popover.isOpen() ? iconDropdownConfig?.tooltipLabel : null;\n<div\n class=\"d-flex justify-content-center icon-container\"\n [ngStyle]=\"{\n '--icon-color': iconColor,\n '--icon-background-color': backgroundColor,\n }\"\n [ngbTooltip]=\"tooltipLabel\"\n [mainCaTooltip]=\"iconDropdownConfig?.tooltipLabel\"\n position=\"bottom\"\n [tooltipBackground]=\"'#424242'\"\n tooltipTextAlign=\"center\"\n [ngbPopover]=\"dropdown\"\n #popover=\"ngbPopover\"\n [autoClose]=\"'outside'\"\n [popoverClass]=\"'dropdown-container-wrapper'\"\n [placement]=\"iconDropdownConfig.placement\"\n [container]=\"'body'\"\n (mouseenter)=\"setHoveredIconState(true)\"\n (mouseleave)=\"setHoveredIconState(false)\"\n>\n <svg-icon class=\"icon\" [src]=\"iconDropdownConfig.icon\"> </svg-icon>\n</div>\n\n<ng-template #dropdown>\n <div class=\"dropdown-container\">\n <div [style.width.px]=\"iconDropdownConfig?.dropdownWidth\">\n <div class=\"dropdown-content\">\n @for (item of iconDropdownConfig?.dropdownItems; track $index) {\n @let fontWeightClass =\n item.isSelected ? 'ca-font-bold' : 'ca-font-regular';\n <div\n class=\"d-flex justify-content-between align-items-center list-item\"\n (click)=\"selectItem(item, popover)\"\n >\n <div\n class=\"label\"\n [style.width.px]=\"\n '(iconDropdownConfig?.dropdownWidth - 60)'\n \"\n [ngClass]=\"fontWeightClass\"\n >\n {{ item.label }}\n </div>\n @if (item.isSelected) {\n <div>\n <svg-icon\n class=\"check-mark\"\n [src]=\"iconDropdownSvgRoutes.colorDrop\"\n >\n </svg-icon>\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [".pickup-delivery-popover{top:-38px!important;max-width:420px!important}.pickup-delivery-popover .popover-body{transform:none;margin-left:-4px;margin-top:-1px}.pickup-delivery-popover.bs-popover-top{top:auto!important;bottom:-38px!important}.pickup-delivery-popover.bs-popover-top .load-component .assigned-load-holder{order:3;margin-top:4px;margin-bottom:0!important}.pickup-delivery-popover.bs-popover-top .load-component .statusBar{order:2;margin-top:4px}.pickup-delivery-popover.bs-popover-top .load-component .animation-three-tabs{order:1}.load-pickup-delivery-popover{top:-34px!important;max-width:400px!important}.gps_dropdown_popover{top:-38px;max-width:748px!important}.gps_dropdown_popover .popover-body{padding:0}.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;-webkit-animation:progressAnimation .25s ease-in-out;animation:progressAnimation .25s ease-in-out}.table-progress-popover .progress-dropdown .progress-header .progress-title{font-size:18px;font-weight:600;color:#fff}.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:#fff}.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:#fff}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@-webkit-keyframes progressAnimation{0%{height:0px}to{height:220px}}@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}.dispatch-note .popover-body{position:relative;top:-4px;left:-4px}.dropdown-menu-popover .popover-body{transform:none}.dropdown-menu-popover.bs-popover-end-top{margin-left:-4px!important;margin-top:-4px!important}.dropdown-menu-popover.bs-popover-bottom-end{margin-right:-4px!important;margin-top:-3px!important}.dropdown-menu-popover.bs-popover-end-bottom{margin-left:-3px!important;margin-bottom:-4px!important}.dropdown-menu-popover.bs-popover-top-end{margin-right:-4px!important;margin-bottom:-3px!important}.dropdown-menu-popover.ca-pickup-delivery-dropdown-popover.bs-popover-end-top{margin-left:0!important;margin-top:-6px!important}.dropdown-menu-popover.ca-pickup-delivery-list-dropdown-popover.bs-popover-end-top{margin-left:4px!important;margin-top:-6px!important}.dropdown-details-title-card-popover .dropdown-container{transform:translateY(-4px)}.fleet-filter-popover.bs-popover-bottom-start .fleet-filter-dropdown-container{transform:translate(-4px,-4px)!important}.fleet-filter-popover.bs-popover-top-start .fleet-filter-dropdown-container{transform:translate(-4px,4px)!important}.fleet-filter-sort-popover.bs-popover-end-top{transform:translate(158px,-3px)!important}.factoring-dropdown-popover.bs-popover-bottom-end .factoring-dropdown-container{transform:translate(4px,-4px)!important}.tooltip{font-size:12px;position:relative}.tooltip.show{opacity:1}.tooltip.fade:after,.tooltip.fade:before{transform:translateY(-10px);transition:all .15s ease-in-out}.tooltip.fade:hover:after,.tooltip.fade:hover:before{opacity:1;transform:translate(0)}.tooltip-inner{white-space:nowrap;max-width:none;border-radius:3px;font-size:11px;font-weight:600}.tooltip-inner:empty{padding:0}.placeholder-delete .tooltip-inner{background-color:#f66}.placeholder-delete .arrow:before{border-top-color:#f66}.custom-popup-owners-for-flag .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(126%) translate(-50%)!important;width:130px;border-radius:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-for-flag .arrow{bottom:-18%;transform:rotate(180deg);left:calc(50% + 2.7rem)}.custom-popup-owners-for-flag .tooltip{opacity:.93!important;width:0}.custom-popup-owners{z-index:999}.custom-popup-owners .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(132%);z-index:999;box-shadow:0 0 3px #0003}.custom-popup-owners .arrow{bottom:-20%;transform:rotate(180deg)}.custom-popup-owners .tooltip{transform:translateY(-61px)!important}.custom-popup-owners-year{z-index:999}.custom-popup-owners-year .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(132%);z-index:999;box-shadow:0 0 3px #0003}.custom-popup-owners-year .arrow{bottom:-20%;transform:rotate(180deg)}.custom-popup-owners-year .tooltip{transform:translate(70px,-61px)!important}.custom-popup-owners-info .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(-100%) translate(-10%);width:200px;height:36px;display:flex;justify-content:center;align-items:center;border-radius:3px;margin-top:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-info .tooltip{opacity:.93;width:0}.custom-popup-owners-info .arrow{display:none}.custom-popup-owners-info #phone-inside{position:relative;right:26px;bottom:0}.custom-popup-owners-info-at .tooltip-inner{color:#3b3b3b;background-color:#fff;transform:translateY(-108%) translate(-7%);width:270px;height:36px;display:flex;justify-content:center;align-items:center;border-radius:3px;box-shadow:0 0 3px #0003}.custom-popup-owners-info-at .tooltip{opacity:1;width:0}.custom-popup-owners-info-at .arrow{display:none}.custom-popup-owners-for-tag .tooltip-inner{color:#3b3b3b;background-color:#fff;width:100px;border-radius:3px;box-shadow:0 0 3px #0003!important}.custom-popup-owners-for-tag .tooltip{top:5px!important}.custom-popup-owners-for-tag .arrow{bottom:-24%}.align-items-flex-start{justify-content:center;align-items:center}.align-items-flex-end{display:flex;justify-content:center;flex-direction:column;align-self:flex-end;align-items:flex-start}.label-add{align-self:flex-start}.fadeInLoad{animation:fadeInLoad .25s}@keyframes fadeInLoad{0%{opacity:0}to{opacity:1}}.fadeIn{opacity:1;-webkit-transition:.25s;-moz-transition:.25s;-o-transition:.25s;transition:.25s}.thisText:hover .fadeIn{opacity:0}.fadeInLoad{animation-name:example;animation-duration:.25s}@keyframes example{0%{transform:scale(.5)}to{transform:scale(1)}}.tooltip.tooltip-table-icons{left:12px!important;opacity:1}.tooltip.tooltip-table-icons .arrow{display:none!important}.tooltip.tooltip-table-icons .tooltip-inner{border-radius:0 50px 50px;background:#28529f}.tooltip.show{opacity:1;animation:fadeIn ease .5s!important;-webkit-animation:fadeIn ease .5s!important;-moz-animation:fadeIn ease .5s!important;-o-animation:fadeIn ease .5s!important;-ms-animation:fadeIn ease .5s!important}.ta-tooltip{position:absolute;font-size:12px;text-align:center;color:#fff;line-height:22px;z-index:999999!important;opacity:0;white-space:nowrap;transform:scale(.7)}.ta-tooltip.ta-tooltip-show{opacity:.85;transform:scale(1);padding:0 12px}.ta-tooltip.ta-tooltip-bottom-right,.ta-tooltip.ta-tooltip-bottom-right-corner{transform-origin:top left;border-radius:0 15px 15px}.ta-tooltip.ta-tooltip-bottom-left{transform-origin:top right;border-radius:15px 0 15px 15px}@keyframes scaleItem{0%{transform:scale(.4)}to{transform:scale(1)}}.app-ca-main-tooltip{pointer-events:none}.app-ca-main-tooltip .tooltip-inner{padding:0;background-color:transparent;pointer-events:none}.app-ca-main-tooltip .tooltip-inner .tooltip-holder{display:flex;font-size:11px;line-height:14px;font-weight:600;border-radius:3px;padding:2px 6px;animation:scaleItem .3s;white-space:normal}.app-ca-main-tooltip .tooltip-inner .tooltip-holder:empty{padding:0}.tooltip-arrow{display:none!important}.trucks.semitruck svg path,.trucks.semisleeper svg path,.trucks.flatbed svg path,.trucks.stepdeck svg path,.trucks.lowboyrgn svg path,.trucks.chassis svg path,.trucks.conestoga svg path,.trucks.sidekit svg path,.trucks.container svg path,.trailers.semitruck svg path,.trailers.semisleeper svg path,.trailers.flatbed svg path,.trailers.stepdeck svg path,.trailers.lowboyrgn svg path,.trailers.chassis svg path,.trailers.conestoga svg path,.trailers.sidekit svg path,.trailers.container svg path{fill:#92b1f5}.trucks.boxtruck svg path,.trucks.reefertruck svg path,.trucks.cargovan svg path,.trucks.dryvan svg path,.trucks.reefer svg path,.trailers.boxtruck svg path,.trailers.reefertruck svg path,.trailers.cargovan svg path,.trailers.dryvan svg path,.trailers.reefer svg path{fill:#fbc88b}.trucks.dumptruck svg path,.trucks.cementtruck svg path,.trucks.garbagetruck svg path,.trucks.enddump svg path,.trucks.bottomdump svg path,.trucks.hopper svg path,.trucks.tanker svg path,.trucks.pneumatictanker svg path,.trailers.dumptruck svg path,.trailers.cementtruck svg path,.trailers.garbagetruck svg path,.trailers.enddump svg path,.trailers.bottomdump svg path,.trailers.hopper svg path,.trailers.tanker svg path,.trailers.pneumatictanker svg path{fill:#ed9292}.trucks.towtruck svg path,.trucks.carhauler svg path,.trucks.spotter svg path,.trucks.carhaulerstigner svg path,.trailers.towtruck svg path,.trailers.carhauler svg path,.trailers.spotter svg path,.trailers.carhaulerstigner svg path{fill:#86c9c3}.trucks .svgtext-template-text,.trailers .svgtext-template-text{color:#fff;transition:color .3s ease-in-out}.colors .black svg #droplet{fill:#6c6c6c}.colors .brown svg #droplet{fill:#a1887f}.colors .darkgreen svg #droplet{fill:#4db6a2}.colors .lightgreen svg #droplet{fill:#81c784}.colors .darkblue svg #droplet{fill:#546fd2}.colors .lightblue svg #droplet{fill:#64b5f6}.colors .gray svg #droplet{fill:#aaa}.colors .purple svg #droplet{fill:#ba68c8}.colors .gold svg #droplet{fill:#bcad79}.colors .silver svg #droplet{fill:#dadada}.colors .red svg #droplet{fill:#f96b69}.colors .pink svg #droplet{fill:#f26ec2}.colors .white svg #droplet{fill:#f1f1f1}.colors .orange svg #droplet{fill:#ff8a65}.colors .yellow svg #droplet{fill:#ffd54f}.colors:hover{transition:all .3s ease-in-out}.colors:hover .black svg #droplet{fill:#3c3c3c}.colors:hover .brown svg #droplet{fill:#8d6e63}.colors:hover .darkgreen svg #droplet{fill:#26a690}.colors:hover .lightgreen svg #droplet{fill:#66bb6a}.colors:hover .darkblue svg #droplet{fill:#304fc1}.colors:hover .lightblue svg #droplet{fill:#42a5f5}.colors:hover .gray svg #droplet{fill:#919191}.colors:hover .purple svg #droplet{fill:#ab47bc}.colors:hover .gold svg #droplet{fill:#aa9c6e}.colors:hover .silver svg #droplet{fill:#b7b7b7}.colors:hover .red svg #droplet{fill:#ef5350}.colors:hover .pink svg #droplet{fill:#fa4daa}.colors:hover .white svg #droplet{fill:#fff}.colors:hover .orange svg #droplet{fill:#ff7043}.colors:hover .yellow svg #droplet{fill:#ffca28}.filter-dropdown-popover{width:260px;position:relative;top:-4px;left:-4px}.filter-dropdown-popover-max-height{max-height:360px}.filter-dropdown-list{max-height:260px;overflow-y:auto}.filter-dropdown-list-icon{height:26px;transition:background-color .3s ease-in-out}.filter-dropdown-list-icon-value{height:14px;width:14px}.filter-dropdown-list-icon-remove{display:none}.filter-dropdown-list-icon:hover{background-color:#424242}.filter-dropdown-list-icon:hover .filter-dropdown-icon-count{display:none}.filter-dropdown-list-icon-selected:hover{background-color:#0b49d1}.filter-dropdown-list-item-icons{transition:opacity .3s ease-in-out;opacity:0}.filter-dropdown-list-item-status-circle{height:10px;width:10px}.filter-dropdown-list-item-remove{display:none}.filter-dropdown-list-item:hover{background-color:#424242}.filter-dropdown-list-item:hover .filter-dropdown-list-item-icons{opacity:1}.filter-dropdown-list-item:hover .filter-dropdown-list-item-icons svg path{fill:var(--svg-fill-color, #e66767)}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-remove{display:flex}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-remove svg path{fill:#e66767!important}.filter-dropdown-list-item-hover:hover .filter-dropdown-list-item-count{display:none!important}.filter-dropdown-icon{height:26px;width:26px}.filter-dropdown-count{height:14px;width:14px}.filter-dropdown-count-remove,.filter-dropdown-count-hover:hover .filter-dropdown-count-value{display:none}.filter-dropdown-count-hover:hover .filter-dropdown-count-remove{display:flex}.filter-dropdown-button{height:26px}.filter-dropdown-footer-button{color:#dadada;transition:color .3s ease-in-out,background-color .3s ease-in-out;height:18px;width:50%}.filter-dropdown-footer-button-set{color:#fff;background-color:#3b73ed}.filter-dropdown-footer-button-set:hover{background-color:#e9effd;color:#0b49d1}.filter-dropdown-footer-button-clear{color:#dadada}.filter-dropdown-footer-button-clear:hover{background-color:#eee;color:#424242}.filter-dropdown-list-badge{min-width:18px}.shadow-100{box-shadow:0 0 4px #0003}.shadow-300{box-shadow:0 0 6px #0003}.opacity-40{opacity:.4}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-90{opacity:.9}@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}}.transition-width{transition:width .25s cubic-bezier(.46,.03,.51,.95);overflow-x:hidden}.transition-transform{transition:transform .25s cubic-bezier(.46,.03,.51,.95)}.transition-transform-100{transition:transform .1s cubic-bezier(.46,.03,.51,.95)}.transition-transform-400{transition:transform .4s cubic-bezier(.46,.03,.51,.95)}.transition-width-transform{transition-duration:.25s;transition-timing-function:cubic-bezier(.46,.03,.51,.95);transition-property:transform,width}.transition-background{transition:background .2s cubic-bezier(.46,.03,.51,.95)}.transition-background-100{transition:background .1s cubic-bezier(.46,.03,.51,.95)}.transition-background-color-300{transition:background,color .3s cubic-bezier(.46,.03,.51,.95)}.transition-fill-100 svg path{transition:fill .1s cubic-bezier(.46,.03,.51,.95)}.transition-duration-250{transition-duration:.25s}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}::ng-deep .popover{--bs-popover-border-width: 0;--bs-popover-body-padding-y: 0;--bs-popover-body-padding-x: 0}::ng-deep .popover .popover-arrow{display:none}.pointer-events-none{pointer-events:none}.ca-scroll-bar{overflow-y:scroll}.ca-scroll-bar::-webkit-scrollbar{width:2px}.ca-scroll-bar::-webkit-scrollbar-thumb{background:#ccc;border-radius:1px}.ca-scroll-bar::-webkit-scrollbar-track{background:#2f2f2f}.highlight-text-45632{background-color:#3b73ed33;color:#92b1f5;transition:all .3s ease-in-out}.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}::ng-deep app-ca-icon-dropdown .icon-container{width:26px;height:26px;cursor:pointer;background-color:var(--icon-background-color, #eeeeee);border-radius:2px}::ng-deep app-ca-icon-dropdown .icon-container .icon svg{display:block;width:18px;height:100%}::ng-deep app-ca-icon-dropdown .icon-container .icon svg path{fill:var(--icon-color, #919191)}::ng-deep .dropdown-container{max-height:240px;overflow-y:auto;overflow-x:hidden;padding:10px 0 10px 10px;border-radius:3px;background-color:#2f2f2f;box-shadow:0 4px 8px #0003;font-family:Montserrat,sans-serif;font-size:14px;color:#fff;transition:opacity .1s ease-in-out;opacity:1}::ng-deep .dropdown-container .list-item{padding:4px 6px;cursor:pointer}::ng-deep .dropdown-container .list-item:hover{border-radius:2px;background-color:#424242}::ng-deep .dropdown-container .list-item .check-mark svg{display:block;width:14px;height:14px}::ng-deep .dropdown-container .dropdown-content{max-height:200px;overflow-y:auto;padding-right:10px;margin-right:2px}::ng-deep .dropdown-container .dropdown-content .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}::ng-deep .dropdown-container .dropdown-content::-webkit-scrollbar{width:2px!important}::ng-deep .dropdown-container .dropdown-content::-webkit-scrollbar-track{background:transparent!important}::ng-deep .dropdown-container .dropdown-content::-webkit-scrollbar-thumb{background:#919191!important;border-radius:3px!important}\n"] }]
|
|
38219
38210
|
}], propDecorators: { popover: [{
|
|
38220
38211
|
type: ViewChild,
|
|
38221
38212
|
args: ['popover']
|