ca-components 2.0.93 → 2.0.95
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/assets/scss/styles.scss +1 -4
- package/fesm2022/ca-components.mjs +121 -138
- package/fesm2022/ca-components.mjs.map +1 -1
- package/lib/animations/index.d.ts +0 -1
- package/lib/components/ca-checkbox/ca-checkbox.component.d.ts +1 -1
- package/lib/components/ca-factoring-dropdown/ca-factoring-dropdown.component.d.ts +3 -2
- package/lib/components/ca-filters/ca-filter.component.d.ts +2 -2
- package/lib/components/ca-pickup-delivery-block/ca-pickup-delivery-block.component.d.ts +3 -2
- package/lib/components/ca-table-card-view/ca-table-card-view.component.d.ts +5 -2
- package/lib/components/ca-toolbar-tab-switch/ca-toolbar-tab-switch.component.d.ts +11 -11
- package/lib/pipes/table-highlight-search-text.pipe.d.ts +2 -1
- package/package.json +1 -1
- package/lib/animations/details-page-enter-leave.animation.d.ts +0 -1
|
@@ -2444,11 +2444,11 @@ class TableHighlightSearchTextPipe {
|
|
|
2444
2444
|
return textString;
|
|
2445
2445
|
let highlighted = textString;
|
|
2446
2446
|
// Apply all chips cumulatively so earlier matches are preserved
|
|
2447
|
-
chips.forEach((chip
|
|
2448
|
-
if (!chip)
|
|
2447
|
+
chips.forEach((chip) => {
|
|
2448
|
+
if (!chip || !chip.text)
|
|
2449
2449
|
return;
|
|
2450
2450
|
// Escape regex special characters
|
|
2451
|
-
let pattern = chip.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
|
|
2451
|
+
let pattern = chip.text.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
|
|
2452
2452
|
pattern = pattern
|
|
2453
2453
|
.split(' ')
|
|
2454
2454
|
.filter((_pattern) => !!_pattern.length)
|
|
@@ -2456,7 +2456,9 @@ class TableHighlightSearchTextPipe {
|
|
|
2456
2456
|
if (!pattern)
|
|
2457
2457
|
return;
|
|
2458
2458
|
const regex = new RegExp('(' + pattern + ')(?!([^<]+)?>)', 'gi');
|
|
2459
|
-
|
|
2459
|
+
// Get colorClass from chip
|
|
2460
|
+
const colorClass = chip.colorClass || '';
|
|
2461
|
+
highlighted = highlighted.replace(regex, (match) => `<span class="table-highlight-text-${colorClass}">${match}</span>`);
|
|
2460
2462
|
});
|
|
2461
2463
|
return this.sanitizer.bypassSecurityTrustHtml(highlighted);
|
|
2462
2464
|
}
|
|
@@ -19340,26 +19342,43 @@ class CaCheckboxComponent {
|
|
|
19340
19342
|
this.columnCheckAction.emit(columnAction);
|
|
19341
19343
|
}
|
|
19342
19344
|
else {
|
|
19343
|
-
// For regular checkboxes, also update isChecked
|
|
19345
|
+
// For regular checkboxes, also update isChecked and emit formArrayAction
|
|
19344
19346
|
this.isChecked = newValue;
|
|
19347
|
+
this.formArrayAction.emit(newValue);
|
|
19345
19348
|
}
|
|
19346
19349
|
}
|
|
19347
|
-
|
|
19348
|
-
|
|
19350
|
+
onHandleClick(event, fromCheckboxArea = false) {
|
|
19351
|
+
const shouldHandle = fromCheckboxArea
|
|
19352
|
+
? !this.isRegularCheckbox
|
|
19353
|
+
: this.isRegularCheckbox;
|
|
19354
|
+
if (!shouldHandle || this.isLabelDisabled || this.disabled)
|
|
19349
19355
|
return;
|
|
19350
19356
|
event?.preventDefault();
|
|
19351
19357
|
event?.stopPropagation();
|
|
19352
|
-
const current = this.
|
|
19358
|
+
const current = this.isRegularCheckbox
|
|
19359
|
+
? (this.getSuperControl?.value ?? this.isInputChecked ?? false)
|
|
19360
|
+
: (this.isChecked ?? this.isInputChecked ?? false);
|
|
19353
19361
|
const next = !current;
|
|
19354
19362
|
this.isInputChecked = next;
|
|
19355
19363
|
this.isChecked = next;
|
|
19356
19364
|
this.onChangeCallback(next);
|
|
19357
19365
|
this.onTouchedCallback();
|
|
19358
|
-
|
|
19366
|
+
const columnAction = {
|
|
19367
|
+
isChecked: this.isChecked,
|
|
19368
|
+
name: this.label,
|
|
19369
|
+
groupIndex: this.groupIndex,
|
|
19370
|
+
itemIndex: this.itemIndex,
|
|
19371
|
+
};
|
|
19372
|
+
if (this.isRegularCheckbox) {
|
|
19373
|
+
this.formArrayAction.emit(next);
|
|
19374
|
+
}
|
|
19375
|
+
else {
|
|
19376
|
+
this.columnCheckAction.emit(columnAction);
|
|
19377
|
+
}
|
|
19359
19378
|
this.cdRef?.markForCheck();
|
|
19360
19379
|
}
|
|
19361
19380
|
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:
|
|
19381
|
+
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)=\"onHandleClick($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 @let isDisabledState = disabled && !disabledStillCheckMark;\n\n <div\n [ngClass]=\"{\n disabled: isCheckboxDisabled,\n 'disabled-blue': isDisabledBlue,\n 'disabled-regular-check': isDisabledRegularCheck,\n 'c-pointer': !isDisabledState,\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 [class.checked]=\"isChecked\"\n (click)=\"onHandleClick($event)\"\n >\n <label\n class=\"d-flex align-items-center\"\n [ngClass]=\"{\n 'h-26': isModalCheckbox,\n 'c-pointer': !isDisabledState,\n }\"\n [for]=\"name\"\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 @let tooltipText =\n isDisabledState\n ? 'Disabled'\n : getSuperControl?.value || isChecked\n ? eGeneralActions.CLEAR\n : eGeneralActions.SELECT;\n @let tooltipBgColor =\n isDisabledState ? eColor.LIGHT_GREY : eColor.BLACK;\n @let tooltipTextColor = isDisabledState ? eColor.DARK_GREY : '';\n\n <div\n class=\"position-relative d-flex align-items-center justify-content-center ca-checkbox-input-container\"\n [ngClass]=\"checkboxSizeClass\"\n ngbTooltip\n [mainCaTooltip]=\"tooltipText\"\n [tooltipMarginTop]=\"'4px'\"\n [tooltipBackground]=\"tooltipBgColor\"\n [tooltipColor]=\"tooltipTextColor\"\n position=\"bottom\"\n (click)=\"onHandleClick($event, true)\"\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 >\n @if (isChecked && !isGroupPartialyChecked) {\n <svg-icon\n class=\"ca-mark-checked-icon d-flex justify-content-center align-items-center w-100 h-100 svg-fill-white svg-size-9\"\n [src]=\"checkboxSvgRoutes.checkedIcon\"\n ></svg-icon>\n }\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 (isDisabledState) {\n <svg-icon\n class=\"ca-checkbox-disabled\"\n [class.dark-disabled-icon]=\"isBlackLabelCheckbox\"\n [src]=\"checkboxSvgRoutes.disabledIcon\"\n ></svg-icon>\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-checked-icon{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;transform:scale(1.29)}.ca-checkbox-container:hover .ca-checkbox~.ca-mark .ca-mark-checked-icon{transform:scale(.7751937984)}@starting-style{.ca-checkbox-container:hover .ca-checkbox~.ca-mark .ca-mark-checked-icon{transform:scale(0)}}.ca-checkbox-container:hover .ca-checkbox:checked~.ca-mark{background-color:#255bb9!important}.ca-checkbox-container:active .ca-checkbox~.ca-mark{transform:scale(1)}.ca-checkbox-container:active .ca-checkbox~.ca-mark .ca-mark-checked-icon{transform:scale(1)}.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{display:block}.ca-checkbox-container.ca-dark-bg:hover .ca-checkbox~.ca-mark{background-color:#dadada!important}.ca-checkbox-container.ca-dark-bg:hover .ca-checkbox:checked~.ca-mark{background-color:#92b1f5!important}.ca-checkbox-container:active label:has(.ca-checkbox-label) .ca-mark{transform:scale(1.29)}.ca-checkbox-container:active label:has(.ca-checkbox-label) .ca-mark .ca-mark-checked-icon{transform:scale(.7751937984)}.ca-checkbox-container:active label:has(.ca-checkbox-svg) .ca-mark{transform:scale(1.29)}.ca-checkbox-container:active label:has(.ca-checkbox-svg) .ca-mark .ca-mark-checked-icon{transform:scale(.7751937984)}.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!important}.ca-checkbox-container.regular-14:not(.checked) .ca-checkbox-label{color:#aaa!important}.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
19382
|
// modules
|
|
19364
19383
|
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
19384
|
// components
|
|
@@ -19376,7 +19395,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
19376
19395
|
NgbModule,
|
|
19377
19396
|
// components
|
|
19378
19397
|
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"] }]
|
|
19398
|
+
], 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)=\"onHandleClick($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 @let isDisabledState = disabled && !disabledStillCheckMark;\n\n <div\n [ngClass]=\"{\n disabled: isCheckboxDisabled,\n 'disabled-blue': isDisabledBlue,\n 'disabled-regular-check': isDisabledRegularCheck,\n 'c-pointer': !isDisabledState,\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 [class.checked]=\"isChecked\"\n (click)=\"onHandleClick($event)\"\n >\n <label\n class=\"d-flex align-items-center\"\n [ngClass]=\"{\n 'h-26': isModalCheckbox,\n 'c-pointer': !isDisabledState,\n }\"\n [for]=\"name\"\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 @let tooltipText =\n isDisabledState\n ? 'Disabled'\n : getSuperControl?.value || isChecked\n ? eGeneralActions.CLEAR\n : eGeneralActions.SELECT;\n @let tooltipBgColor =\n isDisabledState ? eColor.LIGHT_GREY : eColor.BLACK;\n @let tooltipTextColor = isDisabledState ? eColor.DARK_GREY : '';\n\n <div\n class=\"position-relative d-flex align-items-center justify-content-center ca-checkbox-input-container\"\n [ngClass]=\"checkboxSizeClass\"\n ngbTooltip\n [mainCaTooltip]=\"tooltipText\"\n [tooltipMarginTop]=\"'4px'\"\n [tooltipBackground]=\"tooltipBgColor\"\n [tooltipColor]=\"tooltipTextColor\"\n position=\"bottom\"\n (click)=\"onHandleClick($event, true)\"\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 >\n @if (isChecked && !isGroupPartialyChecked) {\n <svg-icon\n class=\"ca-mark-checked-icon d-flex justify-content-center align-items-center w-100 h-100 svg-fill-white svg-size-9\"\n [src]=\"checkboxSvgRoutes.checkedIcon\"\n ></svg-icon>\n }\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 (isDisabledState) {\n <svg-icon\n class=\"ca-checkbox-disabled\"\n [class.dark-disabled-icon]=\"isBlackLabelCheckbox\"\n [src]=\"checkboxSvgRoutes.disabledIcon\"\n ></svg-icon>\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-checked-icon{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;transform:scale(1.29)}.ca-checkbox-container:hover .ca-checkbox~.ca-mark .ca-mark-checked-icon{transform:scale(.7751937984)}@starting-style{.ca-checkbox-container:hover .ca-checkbox~.ca-mark .ca-mark-checked-icon{transform:scale(0)}}.ca-checkbox-container:hover .ca-checkbox:checked~.ca-mark{background-color:#255bb9!important}.ca-checkbox-container:active .ca-checkbox~.ca-mark{transform:scale(1)}.ca-checkbox-container:active .ca-checkbox~.ca-mark .ca-mark-checked-icon{transform:scale(1)}.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{display:block}.ca-checkbox-container.ca-dark-bg:hover .ca-checkbox~.ca-mark{background-color:#dadada!important}.ca-checkbox-container.ca-dark-bg:hover .ca-checkbox:checked~.ca-mark{background-color:#92b1f5!important}.ca-checkbox-container:active label:has(.ca-checkbox-label) .ca-mark{transform:scale(1.29)}.ca-checkbox-container:active label:has(.ca-checkbox-label) .ca-mark .ca-mark-checked-icon{transform:scale(.7751937984)}.ca-checkbox-container:active label:has(.ca-checkbox-svg) .ca-mark{transform:scale(1.29)}.ca-checkbox-container:active label:has(.ca-checkbox-svg) .ca-mark .ca-mark-checked-icon{transform:scale(.7751937984)}.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!important}.ca-checkbox-container.regular-14:not(.checked) .ca-checkbox-label{color:#aaa!important}.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
19399
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i1$2.NgControl, decorators: [{
|
|
19381
19400
|
type: Self
|
|
19382
19401
|
}, {
|
|
@@ -19640,7 +19659,7 @@ class CaDropdownMenuComponent {
|
|
|
19640
19659
|
});
|
|
19641
19660
|
}
|
|
19642
19661
|
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:#0b49d1;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:
|
|
19662
|
+
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 p-4';\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 @let dropdownCheckboxCustomClass =\n 'dropdown-column w-100 h-26 p-l-4' +\n (option?.innerDropdownContent\n ? ' p-r-4'\n : '');\n\n <app-ca-checkbox\n class=\"flex-1\"\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]=\"\n dropdownCheckboxCustomClass\n \"\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 m-r-6\"\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 class=\"flex-1\"\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 w-100 h-26 p-x-4'\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:#0b49d1;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:has(app-ca-checkbox){padding:0!important}.dropdown-container .dropdown-item-option:has(app-ca-checkbox) .dropdown-item-option-icon{margin-right:6px!important}.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
19663
|
// modules
|
|
19645
19664
|
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
19665
|
// components
|
|
@@ -19661,7 +19680,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
19661
19680
|
// pipes
|
|
19662
19681
|
DropdownMenuPlacementClassPipe,
|
|
19663
19682
|
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:#0b49d1;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"] }]
|
|
19683
|
+
], 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 p-4';\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 @let dropdownCheckboxCustomClass =\n 'dropdown-column w-100 h-26 p-l-4' +\n (option?.innerDropdownContent\n ? ' p-r-4'\n : '');\n\n <app-ca-checkbox\n class=\"flex-1\"\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]=\"\n dropdownCheckboxCustomClass\n \"\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 m-r-6\"\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 class=\"flex-1\"\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 w-100 h-26 p-x-4'\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:#0b49d1;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:has(app-ca-checkbox){padding:0!important}.dropdown-container .dropdown-item-option:has(app-ca-checkbox) .dropdown-item-option-icon{margin-right:6px!important}.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
19684
|
}], ctorParameters: () => [], propDecorators: { type: [{
|
|
19666
19685
|
type: Input
|
|
19667
19686
|
}], options: [{
|
|
@@ -21294,7 +21313,7 @@ class CaPeriodContentUserInfoComponent {
|
|
|
21294
21313
|
return PayrollPeriodContentHelper.getSvgPath(propertyName);
|
|
21295
21314
|
}
|
|
21296
21315
|
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:
|
|
21316
|
+
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:90px}.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
21317
|
}
|
|
21299
21318
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CaPeriodContentUserInfoComponent, decorators: [{
|
|
21300
21319
|
type: Component,
|
|
@@ -21305,7 +21324,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
21305
21324
|
PeriodStatusPipe,
|
|
21306
21325
|
UserNameInitialsPipe,
|
|
21307
21326
|
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:
|
|
21327
|
+
], 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:90px}.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
21328
|
}], propDecorators: { componentData: [{
|
|
21310
21329
|
type: Input
|
|
21311
21330
|
}], type: [{
|
|
@@ -30734,33 +30753,6 @@ const fadeInAnimation = trigger('fadeIn', [
|
|
|
30734
30753
|
]),
|
|
30735
30754
|
]);
|
|
30736
30755
|
|
|
30737
|
-
const detailsPageEnterLeaveAnimation = trigger('detailsPageEnterLeave', [
|
|
30738
|
-
transition(':enter', [
|
|
30739
|
-
style({
|
|
30740
|
-
width: '0px',
|
|
30741
|
-
left: '0px',
|
|
30742
|
-
position: 'relative',
|
|
30743
|
-
}),
|
|
30744
|
-
animate('250ms cubic-bezier(0.46, 0.03, 0.51, 0.95)', style({
|
|
30745
|
-
width: '*',
|
|
30746
|
-
left: '0px',
|
|
30747
|
-
position: 'relative',
|
|
30748
|
-
})),
|
|
30749
|
-
]),
|
|
30750
|
-
transition(':leave', [
|
|
30751
|
-
style({
|
|
30752
|
-
width: '*',
|
|
30753
|
-
left: '0px',
|
|
30754
|
-
position: 'relative',
|
|
30755
|
-
}),
|
|
30756
|
-
animate('250ms cubic-bezier(0.46, 0.03, 0.51, 0.95)', style({
|
|
30757
|
-
width: '0px',
|
|
30758
|
-
left: '0px',
|
|
30759
|
-
position: 'relative',
|
|
30760
|
-
})),
|
|
30761
|
-
]),
|
|
30762
|
-
]);
|
|
30763
|
-
|
|
30764
30756
|
class MultipleSearchStateSvg {
|
|
30765
30757
|
static { this.SEARCH_ICON = 'assets/ca-components/svg/search-multiple-states/search-button.svg'; }
|
|
30766
30758
|
static { this.CANCEL_ICON = 'assets/ca-components/svg/search-multiple-states/clear-search.svg'; }
|
|
@@ -30771,7 +30763,8 @@ class MultipleSearchStateSvg {
|
|
|
30771
30763
|
class CaSearchMultipleStates2Component {
|
|
30772
30764
|
onDocumentClick(event) {
|
|
30773
30765
|
if (!this.elementRef.nativeElement.contains(event.target) &&
|
|
30774
|
-
!this._isDetailsPageSearch
|
|
30766
|
+
!this._isDetailsPageSearch &&
|
|
30767
|
+
this.searchQuery.length !== this.SEARCH_LIMIT) {
|
|
30775
30768
|
this.isSearchActive = false;
|
|
30776
30769
|
this.resetSearchControl();
|
|
30777
30770
|
}
|
|
@@ -30918,7 +30911,7 @@ class CaSearchMultipleStates2Component {
|
|
|
30918
30911
|
this.onSearchQueryChange.emit(this.searchQuery);
|
|
30919
30912
|
}
|
|
30920
30913
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CaSearchMultipleStates2Component, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
30921
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaSearchMultipleStates2Component, isStandalone: true, selector: "ca-search-multiple-states-2", inputs: { selectedTab: "selectedTab", isDetailsPageSearch: "isDetailsPageSearch", inputPlaceholder: "inputPlaceholder", isDisabled: "isDisabled" }, outputs: { onSearchQueryChange: "onSearchQueryChange", onToggleSearch: "onToggleSearch" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div\n class=\"container d-flex\"\n [@detailsPageEnterLeave]=\"_isDetailsPageSearch || null\"\n>\n @let searchQueryCount = searchQuery.length;\n @let isSearchLimitReached = searchQueryCount >= SEARCH_LIMIT;\n @let isSearchEnabled =\n _isDetailsPageSearch || (isSearchActive && !isSearchLimitReached);\n @let searchButtonState = isSearchEnabled ? 'open' : 'closed';\n\n <div\n class=\"container-search d-flex br-2 transition-background\"\n [class.search-input-active]=\"isSearchEnabled && !isSearchLimitReached\"\n [class.background-light-gray-5]=\"\n isSearchLimitReached && _isDetailsPageSearch\n \"\n [class.ca-full-width]=\"_isDetailsPageSearch && isSearchEnabled\"\n >\n <div\n class=\"icon-container d-flex justify-content-center align-items-center c-pointer br-2 transition-background-100\"\n ngbTooltip\n [tooltipBackground]=\"eColor.BLACK\"\n [position]=\"ePosition.BOTTOM\"\n [mainCaTooltip]=\"\n isSearchActive\n ? isSearchLimitReached\n ? eSearchMultipleStateAction.MAX_ADDED\n : eCommonAction.CLOSE\n : eCommonAction.SEARCH\n \"\n [class.svg-fill-light-grey-6]=\"isSearchLimitReached\"\n [class.icon-disabled]=\"isSearchLimitReached\"\n [class.not-focused]=\"isSearchActive\"\n [class.icon-container]=\"!isDisabled\"\n [class.c-pointer]=\"!isDisabled\"\n (click)=\"toggleSearch()\"\n >\n <svg-icon\n class=\"d-flex svg-size-26 transition-fill-100\"\n [class.svg-fill-light-grey-6]=\"isDisabled\"\n [src]=\"multipleSearchStateSvg.SEARCH_ICON\"\n ></svg-icon>\n </div>\n\n <div\n [@searchInputExpand]=\"{\n value: searchButtonState,\n params: {\n maxWidth: _isDetailsPageSearch ? '100%' : '147px',\n },\n }\"\n class=\"d-flex\"\n [class.flex-grow-1]=\"_isDetailsPageSearch && isSearchEnabled\"\n >\n @if (isSearchEnabled) {\n <div class=\"inner-border\"></div>\n <div\n class=\"multiple-search-input d-flex justify-content-between align-items-center\"\n [class.ca-full-width]=\"_isDetailsPageSearch\"\n >\n @let inputPlaceholderValue =\n isSearchLimitReached\n ? '3 Items selected'\n : `Find ${inputPlaceholder || eStringPlaceholder.EMPTY}`;\n <input\n #searchInput\n class=\"text-color-white-2 text-size-14 ca-font-regular\"\n type=\"text\"\n autofocus\n maxlength=\"30\"\n [placeholder]=\"inputPlaceholderValue\"\n [formControl]=\"searchControl\"\n (keyup.enter)=\"addSearchItem()\"\n />\n @if (isSearchEnabled && searchControl.value) {\n <div\n class=\"d-flex align-items-center btn-container\"\n [@searchBarButtonOpacity]\n >\n <div\n class=\"c-pointer m-r-4\"\n ngbTooltip\n [tooltipBackground]=\"eColor.BLACK\"\n [mainCaTooltip]=\"eCommonAction.CONFIRM\"\n [position]=\"ePosition.BOTTOM\"\n (click)=\"addSearchItem()\"\n >\n <svg-icon\n class=\"clear-icon transition-transform-100 d-flex svg-size-18\"\n [src]=\"multipleSearchStateSvg.ADD_ICON\"\n ></svg-icon>\n </div>\n <div\n class=\"c-pointer\"\n ngbTooltip\n [tooltipBackground]=\"eColor.BLACK\"\n [mainCaTooltip]=\"eCommonAction.CLEAR\"\n [position]=\"ePosition.BOTTOM\"\n (click)=\"clearSearch()\"\n >\n <svg-icon\n class=\"clear-icon transition-transform-100 d-flex svg-size-18\"\n [src]=\"multipleSearchStateSvg.CANCEL_ICON\"\n ></svg-icon>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </div>\n\n @if (searchQuery.length) {\n <div class=\"chips d-flex\" [@puffAnimation]>\n @for (item of searchQuery; let ind = $index; track item.text) {\n <div\n class=\"text-size-14 text-color-white-2 ca-font-semi-bold c-pointer br-2 m-l-4\"\n [ngClass]=\"item.colorClass\"\n [@puffAnimation]\n ngbTooltip\n [tooltipBackground]=\"eColor.BLACK\"\n [mainCaTooltip]=\"eCommonAction.CLEAR\"\n [position]=\"ePosition.BOTTOM\"\n (click)=\"deleteSearchQueryItem(ind)\"\n >\n {{ item.text }}\n </div>\n }\n </div>\n <div\n class=\"icon-container icon-close d-flex justify-content-center align-items-center c-pointer br-2 svg-hover-red-14 m-l-4\"\n ngbTooltip\n [tooltipBackground]=\"eColor.BLACK\"\n [mainCaTooltip]=\"eCommonAction.CLEAR_ALL\"\n [position]=\"ePosition.BOTTOM\"\n (click)=\"clearAll()\"\n >\n <svg-icon\n class=\"d-flex svg-size-18 svg-fill-muted\"\n [src]=\"multipleSearchStateSvg.CLEAR_ALL_ICON\"\n ></svg-icon>\n </div>\n }\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:#0b49d1;transition:all .3s ease-in-out}.container{padding:0!important}.container-search .multiple-search-input{height:26px;transition:background .25s}.container-search .multiple-search-input input{width:100%;height:100%;border:none;background:transparent;padding:0;margin-left:2px;outline:none}.container-search .multiple-search-input input::selection{color:#fff;background:#ffffff20}.container-search .multiple-search-input .btn-container{margin-right:4px;padding-left:5px}.container-search .multiple-search-input .btn-container .confirm-icon,.container-search .multiple-search-input .btn-container .clear-icon{line-height:0}.container-search .multiple-search-input .btn-container .confirm-icon:hover,.container-search .multiple-search-input .btn-container .clear-icon:hover{transform:scale(1.2)}.container-search .multiple-search-input .btn-container .confirm-icon:hover svg,.container-search .multiple-search-input .btn-container .clear-icon:hover svg{transition:background-color .3s ease;background-color:#fff}.container-search .multiple-search-input .btn-container .confirm-icon:hover svg rect,.container-search .multiple-search-input .btn-container .clear-icon:hover svg rect{fill:#fff}.container-search .multiple-search-input .btn-container .confirm-icon:active,.container-search .multiple-search-input .btn-container .clear-icon:active{transform:scale(1)}.container-search .multiple-search-input .btn-container .confirm-icon svg rect,.container-search .multiple-search-input .btn-container .clear-icon svg rect{transition:fill .3s ease}.container-search .multiple-search-input .btn-container .confirm-icon svg path,.container-search .multiple-search-input .btn-container .clear-icon svg path{transition:fill .3s ease;fill:#1d1d1d}.container-search .multiple-search-input .btn-container .confirm-icon{margin-right:4px}.container-search .multiple-search-input input::placeholder{color:#aaa}.container-search.search-input-active{background:#1d1d1d!important;transition:background .25s!important}.container-search.search-input-active .icon-container{background-color:unset!important}.container-search.search-input-active .icon-container:hover svg-icon svg path{fill:#eee!important;transition:fill .1s cubic-bezier(.46,.03,.51,.95)!important}.container-search.search-input-active .icon-container:active svg-icon svg path{fill:#919191!important}.container-search.search-input-active .icon-container svg-icon svg path{fill:#b7b7b7!important}.container-search.search-input-active .multiple-search-input{width:147px;transition:width .25s}.container-search.search-input-active .multiple-search-input.ca-full-width{width:100%}.container-search .inner-border{margin:auto 2px auto 0;width:1px;height:14px;background:#cccccc40}.container .chips{flex-direction:row-reverse}.container .chips div{max-width:100px;padding:4px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}.container .chips .chip-green{background:#259f94}.container .chips .chip-green:hover{background:#007a6e;transition:background .25s}.container .chips .chip-yellow{background:#f89b2e}.container .chips .chip-yellow:hover{background:#de7700;transition:background .25s}.container .chips .chip-purple{background:#9e47ec}.container .chips .chip-purple:hover{background:#7919d0;transition:background .25s}.icon-container{width:26px;height:26px;padding:4px}.icon-container:hover:not(.not-focused){background-color:#eee}.icon-container:hover:not(.not-focused) svg-icon svg path{fill:#424242}.icon-container:active:not(.not-focused){background-color:#dadada;transition:background-color .2s cubic-bezier(.46,.03,.51,.95)}.icon-container svg-icon svg rect,.icon-container svg-icon svg path{stroke-width:none!important;stroke:none!important}.icon-container.icon-disabled:hover{background-color:unset}.icon-close:hover{background-color:#f1f1f1!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "ngmodule", type:
|
|
30914
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaSearchMultipleStates2Component, isStandalone: true, selector: "ca-search-multiple-states-2", inputs: { selectedTab: "selectedTab", isDetailsPageSearch: "isDetailsPageSearch", inputPlaceholder: "inputPlaceholder", isDisabled: "isDisabled" }, outputs: { onSearchQueryChange: "onSearchQueryChange", onToggleSearch: "onToggleSearch" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div class=\"d-flex\">\n @let searchQueryCount = searchQuery.length;\n @let isSearchLimitReached = searchQueryCount >= SEARCH_LIMIT;\n @let isSearchEnabled =\n _isDetailsPageSearch || (isSearchActive && !isSearchLimitReached);\n @let searchButtonState = isSearchActive ? 'open' : 'closed';\n\n <div\n class=\"container-search d-flex br-2 transition-background\"\n [class.search-input-active]=\"isSearchEnabled && !isSearchLimitReached\"\n [class.background-light-grey-5]=\"isSearchLimitReached\"\n [class.w-100]=\"_isDetailsPageSearch && isSearchEnabled\"\n >\n <div\n class=\"icon-container d-flex justify-content-center align-items-center br-2\"\n ngbTooltip\n [tooltipBackground]=\"eColor.BLACK\"\n [position]=\"ePosition.BOTTOM\"\n [mainCaTooltip]=\"\n isSearchActive\n ? isSearchLimitReached\n ? eSearchMultipleStateAction.MAX_ADDED\n : eCommonAction.CLOSE\n : eCommonAction.SEARCH\n \"\n [ngClass]=\"{\n 'svg-hover-black background-hover-bw2': !isSearchLimitReached,\n 'c-pointer icon-container':\n !isSearchLimitReached && !isDisabled,\n 'svg-fill-light-grey-6 icon-disabled': isSearchLimitReached,\n 'not-focused': isSearchActive,\n }\"\n (click)=\"toggleSearch()\"\n >\n <svg-icon\n class=\"d-flex svg-size-26 transition-fill-100\"\n [ngClass]=\"\n isDisabled ? 'svg-fill-light-grey-6' : 'svg-fill-muted'\n \"\n [src]=\"multipleSearchStateSvg.SEARCH_ICON\"\n ></svg-icon>\n </div>\n\n <div\n [@searchInputExpand]=\"{\n value: searchButtonState,\n params: {\n maxWidth: _isDetailsPageSearch ? '100%' : '169px',\n },\n }\"\n class=\"d-flex\"\n [class.flex-grow-1]=\"_isDetailsPageSearch && isSearchEnabled\"\n >\n @if (isSearchActive) {\n <div class=\"inner-border\"></div>\n <div\n class=\"multiple-search-input d-flex justify-content-between align-items-center\"\n [class.ca-full-width]=\"_isDetailsPageSearch\"\n >\n @let inputPlaceholderValue =\n isSearchLimitReached && _isDetailsPageSearch\n ? '3 Items selected'\n : isSearchLimitReached\n ? 'Max Added'\n : `Find ${inputPlaceholder || eStringPlaceholder.EMPTY}`;\n <input\n #searchInput\n class=\"text-color-white text-size-14 ca-font-regular placeholder-light-grey-2\"\n type=\"text\"\n autofocus\n maxlength=\"30\"\n [placeholder]=\"inputPlaceholderValue\"\n [formControl]=\"searchControl\"\n (keyup.enter)=\"addSearchItem()\"\n />\n @if (isSearchActive && searchControl.value) {\n <div\n class=\"d-flex align-items-center btn-container\"\n [@searchBarButtonOpacity]\n >\n <div\n class=\"c-pointer m-r-4\"\n ngbTooltip\n [tooltipBackground]=\"eColor.BLACK\"\n [mainCaTooltip]=\"eCommonAction.CONFIRM\"\n [position]=\"ePosition.BOTTOM\"\n (click)=\"addSearchItem()\"\n >\n <svg-icon\n class=\"clear-icon transition-transform-100 d-flex svg-size-18\"\n [src]=\"multipleSearchStateSvg.ADD_ICON\"\n ></svg-icon>\n </div>\n <div\n class=\"c-pointer\"\n ngbTooltip\n [tooltipBackground]=\"eColor.BLACK\"\n [mainCaTooltip]=\"eCommonAction.CLEAR\"\n [position]=\"ePosition.BOTTOM\"\n (click)=\"clearSearch()\"\n >\n <svg-icon\n class=\"clear-icon transition-transform-100 d-flex svg-size-18\"\n [src]=\"multipleSearchStateSvg.CANCEL_ICON\"\n ></svg-icon>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </div>\n\n @if (searchQuery.length) {\n <div class=\"chips d-flex\" [@puffAnimation]>\n @for (item of searchQuery; let ind = $index; track item.text) {\n <div\n [@puffAnimation]\n ngbTooltip\n [tooltipBackground]=\"eColor.BLACK\"\n [mainCaTooltip]=\"eCommonAction.CLEAR\"\n [position]=\"ePosition.BOTTOM\"\n class=\"text-size-14 text-color-white ca-font-semi-bold c-pointer br-2 m-l-4\"\n [ngClass]=\"item.colorClass\"\n (click)=\"deleteSearchQueryItem(ind)\"\n >\n {{ item.text }}\n </div>\n }\n </div>\n <div\n class=\"icon-container icon-close d-flex justify-content-center align-items-center c-pointer br-2 svg-hover-red-14 m-l-4\"\n ngbTooltip\n [tooltipBackground]=\"eColor.BLACK\"\n [mainCaTooltip]=\"eCommonAction.CLEAR_ALL\"\n [position]=\"ePosition.BOTTOM\"\n (click)=\"clearAll()\"\n >\n <svg-icon\n class=\"d-flex svg-size-18 svg-fill-muted\"\n [src]=\"multipleSearchStateSvg.CLEAR_ALL_ICON\"\n ></svg-icon>\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}}.container-search.search-input-active{background:#1d1d1d!important;transition:background .25s!important}.container-search.search-input-active .icon-container{background-color:unset!important}.container-search.search-input-active .icon-container:hover svg-icon svg path{fill:#eee!important;transition:fill .1s cubic-bezier(.46,.03,.51,.95)!important}.container-search.search-input-active .icon-container:active svg-icon svg path{fill:#919191!important}.container-search.search-input-active .icon-container svg-icon svg path{fill:#b7b7b7!important}.container-search .multiple-search-input{caret-color:#fff;width:171px;height:26px;transition:background .25s,width .25s}.container-search .multiple-search-input.ca-full-width{width:100%}.container-search .multiple-search-input input{width:100%;height:100%;border:none;background:transparent;padding:0;margin-left:2px;outline:none}.container-search .multiple-search-input input::selection{color:#fff;background:#ffffff20}.container-search .multiple-search-input .btn-container{margin-right:4px;padding-left:5px}.container-search .multiple-search-input .btn-container .confirm-icon,.container-search .multiple-search-input .btn-container .clear-icon{line-height:0}.container-search .multiple-search-input .btn-container .confirm-icon:hover,.container-search .multiple-search-input .btn-container .clear-icon:hover{transform:scale(1.2)}.container-search .multiple-search-input .btn-container .confirm-icon:hover svg,.container-search .multiple-search-input .btn-container .clear-icon:hover svg{transition:background-color .3s ease;background-color:#fff}.container-search .multiple-search-input .btn-container .confirm-icon:hover svg rect,.container-search .multiple-search-input .btn-container .clear-icon:hover svg rect{fill:#fff}.container-search .multiple-search-input .btn-container .confirm-icon:active,.container-search .multiple-search-input .btn-container .clear-icon:active{transform:scale(1)}.container-search .multiple-search-input .btn-container .confirm-icon svg rect,.container-search .multiple-search-input .btn-container .clear-icon svg rect{transition:fill .3s ease}.container-search .multiple-search-input .btn-container .confirm-icon svg path,.container-search .multiple-search-input .btn-container .clear-icon svg path{transition:fill .3s ease;fill:#1d1d1d}.container-search .multiple-search-input .btn-container .confirm-icon{margin-right:4px}.container-search .multiple-search-input input::placeholder{color:#aaa}.container-search .inner-border{margin:auto 2px auto 0;width:1px;height:14px;background:#cccccc40}.chips{flex-direction:row-reverse}.chips div{max-width:100px;padding:4px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}.chips .chip-green{background:#259f94}.chips .chip-green:hover{background:#007a6e;transition:background .25s}.chips .chip-yellow{background:#f89b2e}.chips .chip-yellow:hover{background:#de7700;transition:background .25s}.chips .chip-purple{background:#9e47ec}.chips .chip-purple:hover{background:#7919d0;transition:background .25s}.icon-container{width:26px;height:26px;padding:4px}.icon-container:hover:not(.not-focused){background-color:#eee}.icon-container:hover:not(.not-focused) svg-icon svg path{fill:#424242}.icon-container:active:not(.not-focused){background-color:#dadada;transition:background-color .2s cubic-bezier(.46,.03,.51,.95)}.icon-container svg-icon svg rect,.icon-container svg-icon svg path{stroke-width:none!important;stroke:none!important}.icon-container.icon-disabled:hover{background-color:unset}.icon-close:hover{background-color:#f1f1f1!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "ngmodule", type:
|
|
30922
30915
|
// Third-party modules
|
|
30923
30916
|
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:
|
|
30924
30917
|
// Components
|
|
@@ -30926,7 +30919,6 @@ class CaSearchMultipleStates2Component {
|
|
|
30926
30919
|
searchInputExpandAnimation,
|
|
30927
30920
|
puffAnimation,
|
|
30928
30921
|
searchBarButtonOpacityAnimation,
|
|
30929
|
-
detailsPageEnterLeaveAnimation,
|
|
30930
30922
|
] }); }
|
|
30931
30923
|
}
|
|
30932
30924
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CaSearchMultipleStates2Component, decorators: [{
|
|
@@ -30935,7 +30927,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
30935
30927
|
searchInputExpandAnimation,
|
|
30936
30928
|
puffAnimation,
|
|
30937
30929
|
searchBarButtonOpacityAnimation,
|
|
30938
|
-
detailsPageEnterLeaveAnimation,
|
|
30939
30930
|
], imports: [
|
|
30940
30931
|
CommonModule,
|
|
30941
30932
|
FormsModule,
|
|
@@ -30946,7 +30937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
30946
30937
|
NgbTooltipModule,
|
|
30947
30938
|
// Components
|
|
30948
30939
|
CaAppTooltipV2Component,
|
|
30949
|
-
], template: "<div\n class=\"container d-flex\"\n [@detailsPageEnterLeave]=\"_isDetailsPageSearch || null\"\n>\n @let searchQueryCount = searchQuery.length;\n @let isSearchLimitReached = searchQueryCount >= SEARCH_LIMIT;\n @let isSearchEnabled =\n _isDetailsPageSearch || (isSearchActive && !isSearchLimitReached);\n @let searchButtonState = isSearchEnabled ? 'open' : 'closed';\n\n <div\n class=\"container-search d-flex br-2 transition-background\"\n [class.search-input-active]=\"isSearchEnabled && !isSearchLimitReached\"\n [class.background-light-gray-5]=\"\n isSearchLimitReached && _isDetailsPageSearch\n \"\n [class.ca-full-width]=\"_isDetailsPageSearch && isSearchEnabled\"\n >\n <div\n class=\"icon-container d-flex justify-content-center align-items-center c-pointer br-2 transition-background-100\"\n ngbTooltip\n [tooltipBackground]=\"eColor.BLACK\"\n [position]=\"ePosition.BOTTOM\"\n [mainCaTooltip]=\"\n isSearchActive\n ? isSearchLimitReached\n ? eSearchMultipleStateAction.MAX_ADDED\n : eCommonAction.CLOSE\n : eCommonAction.SEARCH\n \"\n [class.svg-fill-light-grey-6]=\"isSearchLimitReached\"\n [class.icon-disabled]=\"isSearchLimitReached\"\n [class.not-focused]=\"isSearchActive\"\n [class.icon-container]=\"!isDisabled\"\n [class.c-pointer]=\"!isDisabled\"\n (click)=\"toggleSearch()\"\n >\n <svg-icon\n class=\"d-flex svg-size-26 transition-fill-100\"\n [class.svg-fill-light-grey-6]=\"isDisabled\"\n [src]=\"multipleSearchStateSvg.SEARCH_ICON\"\n ></svg-icon>\n </div>\n\n <div\n [@searchInputExpand]=\"{\n value: searchButtonState,\n params: {\n maxWidth: _isDetailsPageSearch ? '100%' : '147px',\n },\n }\"\n class=\"d-flex\"\n [class.flex-grow-1]=\"_isDetailsPageSearch && isSearchEnabled\"\n >\n @if (isSearchEnabled) {\n <div class=\"inner-border\"></div>\n <div\n class=\"multiple-search-input d-flex justify-content-between align-items-center\"\n [class.ca-full-width]=\"_isDetailsPageSearch\"\n >\n @let inputPlaceholderValue =\n isSearchLimitReached\n ? '3 Items selected'\n : `Find ${inputPlaceholder || eStringPlaceholder.EMPTY}`;\n <input\n #searchInput\n class=\"text-color-white-2 text-size-14 ca-font-regular\"\n type=\"text\"\n autofocus\n maxlength=\"30\"\n [placeholder]=\"inputPlaceholderValue\"\n [formControl]=\"searchControl\"\n (keyup.enter)=\"addSearchItem()\"\n />\n @if (isSearchEnabled && searchControl.value) {\n <div\n class=\"d-flex align-items-center btn-container\"\n [@searchBarButtonOpacity]\n >\n <div\n class=\"c-pointer m-r-4\"\n ngbTooltip\n [tooltipBackground]=\"eColor.BLACK\"\n [mainCaTooltip]=\"eCommonAction.CONFIRM\"\n [position]=\"ePosition.BOTTOM\"\n (click)=\"addSearchItem()\"\n >\n <svg-icon\n class=\"clear-icon transition-transform-100 d-flex svg-size-18\"\n [src]=\"multipleSearchStateSvg.ADD_ICON\"\n ></svg-icon>\n </div>\n <div\n class=\"c-pointer\"\n ngbTooltip\n [tooltipBackground]=\"eColor.BLACK\"\n [mainCaTooltip]=\"eCommonAction.CLEAR\"\n [position]=\"ePosition.BOTTOM\"\n (click)=\"clearSearch()\"\n >\n <svg-icon\n class=\"clear-icon transition-transform-100 d-flex svg-size-18\"\n [src]=\"multipleSearchStateSvg.CANCEL_ICON\"\n ></svg-icon>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </div>\n\n @if (searchQuery.length) {\n <div class=\"chips d-flex\" [@puffAnimation]>\n @for (item of searchQuery; let ind = $index; track item.text) {\n <div\n class=\"text-size-14 text-color-white-2 ca-font-semi-bold c-pointer br-2 m-l-4\"\n [ngClass]=\"item.colorClass\"\n [@puffAnimation]\n ngbTooltip\n [tooltipBackground]=\"eColor.BLACK\"\n [mainCaTooltip]=\"eCommonAction.CLEAR\"\n [position]=\"ePosition.BOTTOM\"\n (click)=\"deleteSearchQueryItem(ind)\"\n >\n {{ item.text }}\n </div>\n }\n </div>\n <div\n class=\"icon-container icon-close d-flex justify-content-center align-items-center c-pointer br-2 svg-hover-red-14 m-l-4\"\n ngbTooltip\n [tooltipBackground]=\"eColor.BLACK\"\n [mainCaTooltip]=\"eCommonAction.CLEAR_ALL\"\n [position]=\"ePosition.BOTTOM\"\n (click)=\"clearAll()\"\n >\n <svg-icon\n class=\"d-flex svg-size-18 svg-fill-muted\"\n [src]=\"multipleSearchStateSvg.CLEAR_ALL_ICON\"\n ></svg-icon>\n </div>\n }\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:#0b49d1;transition:all .3s ease-in-out}.container{padding:0!important}.container-search .multiple-search-input{height:26px;transition:background .25s}.container-search .multiple-search-input input{width:100%;height:100%;border:none;background:transparent;padding:0;margin-left:2px;outline:none}.container-search .multiple-search-input input::selection{color:#fff;background:#ffffff20}.container-search .multiple-search-input .btn-container{margin-right:4px;padding-left:5px}.container-search .multiple-search-input .btn-container .confirm-icon,.container-search .multiple-search-input .btn-container .clear-icon{line-height:0}.container-search .multiple-search-input .btn-container .confirm-icon:hover,.container-search .multiple-search-input .btn-container .clear-icon:hover{transform:scale(1.2)}.container-search .multiple-search-input .btn-container .confirm-icon:hover svg,.container-search .multiple-search-input .btn-container .clear-icon:hover svg{transition:background-color .3s ease;background-color:#fff}.container-search .multiple-search-input .btn-container .confirm-icon:hover svg rect,.container-search .multiple-search-input .btn-container .clear-icon:hover svg rect{fill:#fff}.container-search .multiple-search-input .btn-container .confirm-icon:active,.container-search .multiple-search-input .btn-container .clear-icon:active{transform:scale(1)}.container-search .multiple-search-input .btn-container .confirm-icon svg rect,.container-search .multiple-search-input .btn-container .clear-icon svg rect{transition:fill .3s ease}.container-search .multiple-search-input .btn-container .confirm-icon svg path,.container-search .multiple-search-input .btn-container .clear-icon svg path{transition:fill .3s ease;fill:#1d1d1d}.container-search .multiple-search-input .btn-container .confirm-icon{margin-right:4px}.container-search .multiple-search-input input::placeholder{color:#aaa}.container-search.search-input-active{background:#1d1d1d!important;transition:background .25s!important}.container-search.search-input-active .icon-container{background-color:unset!important}.container-search.search-input-active .icon-container:hover svg-icon svg path{fill:#eee!important;transition:fill .1s cubic-bezier(.46,.03,.51,.95)!important}.container-search.search-input-active .icon-container:active svg-icon svg path{fill:#919191!important}.container-search.search-input-active .icon-container svg-icon svg path{fill:#b7b7b7!important}.container-search.search-input-active .multiple-search-input{width:147px;transition:width .25s}.container-search.search-input-active .multiple-search-input.ca-full-width{width:100%}.container-search .inner-border{margin:auto 2px auto 0;width:1px;height:14px;background:#cccccc40}.container .chips{flex-direction:row-reverse}.container .chips div{max-width:100px;padding:4px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}.container .chips .chip-green{background:#259f94}.container .chips .chip-green:hover{background:#007a6e;transition:background .25s}.container .chips .chip-yellow{background:#f89b2e}.container .chips .chip-yellow:hover{background:#de7700;transition:background .25s}.container .chips .chip-purple{background:#9e47ec}.container .chips .chip-purple:hover{background:#7919d0;transition:background .25s}.icon-container{width:26px;height:26px;padding:4px}.icon-container:hover:not(.not-focused){background-color:#eee}.icon-container:hover:not(.not-focused) svg-icon svg path{fill:#424242}.icon-container:active:not(.not-focused){background-color:#dadada;transition:background-color .2s cubic-bezier(.46,.03,.51,.95)}.icon-container svg-icon svg rect,.icon-container svg-icon svg path{stroke-width:none!important;stroke:none!important}.icon-container.icon-disabled:hover{background-color:unset}.icon-close:hover{background-color:#f1f1f1!important}\n"] }]
|
|
30940
|
+
], template: "<div class=\"d-flex\">\n @let searchQueryCount = searchQuery.length;\n @let isSearchLimitReached = searchQueryCount >= SEARCH_LIMIT;\n @let isSearchEnabled =\n _isDetailsPageSearch || (isSearchActive && !isSearchLimitReached);\n @let searchButtonState = isSearchActive ? 'open' : 'closed';\n\n <div\n class=\"container-search d-flex br-2 transition-background\"\n [class.search-input-active]=\"isSearchEnabled && !isSearchLimitReached\"\n [class.background-light-grey-5]=\"isSearchLimitReached\"\n [class.w-100]=\"_isDetailsPageSearch && isSearchEnabled\"\n >\n <div\n class=\"icon-container d-flex justify-content-center align-items-center br-2\"\n ngbTooltip\n [tooltipBackground]=\"eColor.BLACK\"\n [position]=\"ePosition.BOTTOM\"\n [mainCaTooltip]=\"\n isSearchActive\n ? isSearchLimitReached\n ? eSearchMultipleStateAction.MAX_ADDED\n : eCommonAction.CLOSE\n : eCommonAction.SEARCH\n \"\n [ngClass]=\"{\n 'svg-hover-black background-hover-bw2': !isSearchLimitReached,\n 'c-pointer icon-container':\n !isSearchLimitReached && !isDisabled,\n 'svg-fill-light-grey-6 icon-disabled': isSearchLimitReached,\n 'not-focused': isSearchActive,\n }\"\n (click)=\"toggleSearch()\"\n >\n <svg-icon\n class=\"d-flex svg-size-26 transition-fill-100\"\n [ngClass]=\"\n isDisabled ? 'svg-fill-light-grey-6' : 'svg-fill-muted'\n \"\n [src]=\"multipleSearchStateSvg.SEARCH_ICON\"\n ></svg-icon>\n </div>\n\n <div\n [@searchInputExpand]=\"{\n value: searchButtonState,\n params: {\n maxWidth: _isDetailsPageSearch ? '100%' : '169px',\n },\n }\"\n class=\"d-flex\"\n [class.flex-grow-1]=\"_isDetailsPageSearch && isSearchEnabled\"\n >\n @if (isSearchActive) {\n <div class=\"inner-border\"></div>\n <div\n class=\"multiple-search-input d-flex justify-content-between align-items-center\"\n [class.ca-full-width]=\"_isDetailsPageSearch\"\n >\n @let inputPlaceholderValue =\n isSearchLimitReached && _isDetailsPageSearch\n ? '3 Items selected'\n : isSearchLimitReached\n ? 'Max Added'\n : `Find ${inputPlaceholder || eStringPlaceholder.EMPTY}`;\n <input\n #searchInput\n class=\"text-color-white text-size-14 ca-font-regular placeholder-light-grey-2\"\n type=\"text\"\n autofocus\n maxlength=\"30\"\n [placeholder]=\"inputPlaceholderValue\"\n [formControl]=\"searchControl\"\n (keyup.enter)=\"addSearchItem()\"\n />\n @if (isSearchActive && searchControl.value) {\n <div\n class=\"d-flex align-items-center btn-container\"\n [@searchBarButtonOpacity]\n >\n <div\n class=\"c-pointer m-r-4\"\n ngbTooltip\n [tooltipBackground]=\"eColor.BLACK\"\n [mainCaTooltip]=\"eCommonAction.CONFIRM\"\n [position]=\"ePosition.BOTTOM\"\n (click)=\"addSearchItem()\"\n >\n <svg-icon\n class=\"clear-icon transition-transform-100 d-flex svg-size-18\"\n [src]=\"multipleSearchStateSvg.ADD_ICON\"\n ></svg-icon>\n </div>\n <div\n class=\"c-pointer\"\n ngbTooltip\n [tooltipBackground]=\"eColor.BLACK\"\n [mainCaTooltip]=\"eCommonAction.CLEAR\"\n [position]=\"ePosition.BOTTOM\"\n (click)=\"clearSearch()\"\n >\n <svg-icon\n class=\"clear-icon transition-transform-100 d-flex svg-size-18\"\n [src]=\"multipleSearchStateSvg.CANCEL_ICON\"\n ></svg-icon>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </div>\n\n @if (searchQuery.length) {\n <div class=\"chips d-flex\" [@puffAnimation]>\n @for (item of searchQuery; let ind = $index; track item.text) {\n <div\n [@puffAnimation]\n ngbTooltip\n [tooltipBackground]=\"eColor.BLACK\"\n [mainCaTooltip]=\"eCommonAction.CLEAR\"\n [position]=\"ePosition.BOTTOM\"\n class=\"text-size-14 text-color-white ca-font-semi-bold c-pointer br-2 m-l-4\"\n [ngClass]=\"item.colorClass\"\n (click)=\"deleteSearchQueryItem(ind)\"\n >\n {{ item.text }}\n </div>\n }\n </div>\n <div\n class=\"icon-container icon-close d-flex justify-content-center align-items-center c-pointer br-2 svg-hover-red-14 m-l-4\"\n ngbTooltip\n [tooltipBackground]=\"eColor.BLACK\"\n [mainCaTooltip]=\"eCommonAction.CLEAR_ALL\"\n [position]=\"ePosition.BOTTOM\"\n (click)=\"clearAll()\"\n >\n <svg-icon\n class=\"d-flex svg-size-18 svg-fill-muted\"\n [src]=\"multipleSearchStateSvg.CLEAR_ALL_ICON\"\n ></svg-icon>\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}}.container-search.search-input-active{background:#1d1d1d!important;transition:background .25s!important}.container-search.search-input-active .icon-container{background-color:unset!important}.container-search.search-input-active .icon-container:hover svg-icon svg path{fill:#eee!important;transition:fill .1s cubic-bezier(.46,.03,.51,.95)!important}.container-search.search-input-active .icon-container:active svg-icon svg path{fill:#919191!important}.container-search.search-input-active .icon-container svg-icon svg path{fill:#b7b7b7!important}.container-search .multiple-search-input{caret-color:#fff;width:171px;height:26px;transition:background .25s,width .25s}.container-search .multiple-search-input.ca-full-width{width:100%}.container-search .multiple-search-input input{width:100%;height:100%;border:none;background:transparent;padding:0;margin-left:2px;outline:none}.container-search .multiple-search-input input::selection{color:#fff;background:#ffffff20}.container-search .multiple-search-input .btn-container{margin-right:4px;padding-left:5px}.container-search .multiple-search-input .btn-container .confirm-icon,.container-search .multiple-search-input .btn-container .clear-icon{line-height:0}.container-search .multiple-search-input .btn-container .confirm-icon:hover,.container-search .multiple-search-input .btn-container .clear-icon:hover{transform:scale(1.2)}.container-search .multiple-search-input .btn-container .confirm-icon:hover svg,.container-search .multiple-search-input .btn-container .clear-icon:hover svg{transition:background-color .3s ease;background-color:#fff}.container-search .multiple-search-input .btn-container .confirm-icon:hover svg rect,.container-search .multiple-search-input .btn-container .clear-icon:hover svg rect{fill:#fff}.container-search .multiple-search-input .btn-container .confirm-icon:active,.container-search .multiple-search-input .btn-container .clear-icon:active{transform:scale(1)}.container-search .multiple-search-input .btn-container .confirm-icon svg rect,.container-search .multiple-search-input .btn-container .clear-icon svg rect{transition:fill .3s ease}.container-search .multiple-search-input .btn-container .confirm-icon svg path,.container-search .multiple-search-input .btn-container .clear-icon svg path{transition:fill .3s ease;fill:#1d1d1d}.container-search .multiple-search-input .btn-container .confirm-icon{margin-right:4px}.container-search .multiple-search-input input::placeholder{color:#aaa}.container-search .inner-border{margin:auto 2px auto 0;width:1px;height:14px;background:#cccccc40}.chips{flex-direction:row-reverse}.chips div{max-width:100px;padding:4px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}.chips .chip-green{background:#259f94}.chips .chip-green:hover{background:#007a6e;transition:background .25s}.chips .chip-yellow{background:#f89b2e}.chips .chip-yellow:hover{background:#de7700;transition:background .25s}.chips .chip-purple{background:#9e47ec}.chips .chip-purple:hover{background:#7919d0;transition:background .25s}.icon-container{width:26px;height:26px;padding:4px}.icon-container:hover:not(.not-focused){background-color:#eee}.icon-container:hover:not(.not-focused) svg-icon svg path{fill:#424242}.icon-container:active:not(.not-focused){background-color:#dadada;transition:background-color .2s cubic-bezier(.46,.03,.51,.95)}.icon-container svg-icon svg rect,.icon-container svg-icon svg path{stroke-width:none!important;stroke:none!important}.icon-container.icon-disabled:hover{background-color:unset}.icon-close:hover{background-color:#f1f1f1!important}\n"] }]
|
|
30950
30941
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { onDocumentClick: [{
|
|
30951
30942
|
type: HostListener,
|
|
30952
30943
|
args: ['document:click', ['$event']]
|
|
@@ -31268,10 +31259,17 @@ class CaTableCardViewComponent {
|
|
|
31268
31259
|
this.isCardFlippedCheckInCards = [
|
|
31269
31260
|
...TableCardViewHelper.isCardFlippedCheckInCards,
|
|
31270
31261
|
];
|
|
31262
|
+
this.copyHandler = this.handleCopyEvent.bind(this);
|
|
31263
|
+
document.addEventListener('copy', this.copyHandler);
|
|
31271
31264
|
}
|
|
31272
31265
|
ngAfterViewInit() {
|
|
31273
31266
|
this.waitForCardsContainerAndCalculate();
|
|
31274
31267
|
}
|
|
31268
|
+
handleCopyEvent(clipboardEvent) {
|
|
31269
|
+
const plainText = window.getSelection()?.toString() || '';
|
|
31270
|
+
clipboardEvent.clipboardData?.setData('text/plain', plainText);
|
|
31271
|
+
clipboardEvent.preventDefault();
|
|
31272
|
+
}
|
|
31275
31273
|
adjustShowMoreWidth() {
|
|
31276
31274
|
if (this.cardsContainer && this.showMoreContainer) {
|
|
31277
31275
|
const firstCard = this.cardsContainer.nativeElement.querySelector('.flip-card');
|
|
@@ -31347,6 +31345,7 @@ class CaTableCardViewComponent {
|
|
|
31347
31345
|
}
|
|
31348
31346
|
ngOnDestroy() {
|
|
31349
31347
|
this.disconnectDeferObserver();
|
|
31348
|
+
document.removeEventListener('copy', this.copyHandler);
|
|
31350
31349
|
}
|
|
31351
31350
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CaTableCardViewComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
31352
31351
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaTableCardViewComponent, isStandalone: true, selector: "ca-table-card-view", inputs: { frontSide: "frontSide", backSide: "backSide", titleIcon: "titleIcon", rightSideTemplate: "rightSideTemplate", viewData: "viewData", cardTitle: "cardTitle", isLoading: "isLoading", searchStrings: "searchStrings", totalDataCount: "totalDataCount", cardsFlipType: "cardsFlipType", isDropdownMenuHidden: "isDropdownMenuHidden", isSelectHidden: "isSelectHidden", isBannerVisible: "isBannerVisible", showBackSide: "showBackSide", dropdownMenuOptions: "dropdownMenuOptions", hasDetailsPage: "hasDetailsPage", isCardSortingActive: "isCardSortingActive" }, outputs: { showMore: "showMore", selectCard: "selectCard", cardTitleClick: "cardTitleClick", finishOrder: "finishOrder", dropdownOptionEmitter: "dropdownOptionEmitter" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "showMoreContainer", first: true, predicate: ["showMoreContainer"], descendants: true }, { propertyName: "cardsContainer", first: true, predicate: ["cardsContainer"], descendants: true }, { propertyName: "skeletonLoader", first: true, predicate: ["skeletonLoader"], descendants: true }, { propertyName: "cardBodyContents", predicate: ["cardBodyContent"], descendants: true }], ngImport: i0, template: "@let displayedDataCount = _viewData.length;\n@let isShowMoreLoading = _isLoading && displayedDataCount;\n\n@defer (when !_isLoading) {\n <div\n class=\"cards-container d-grid gap-1 m-t-7 m-r-15\"\n [class.placeholder-wave]=\"_isLoading\"\n #cardsContainer\n >\n @for (card of _viewData; let index = $index; track $index) {\n @let isCardFlipped =\n (index | isCardFlipped: isCardFlippedCheckInCards) ||\n cardsFlipType === tableCardTypes.BACK;\n\n <div [@fadeIn] class=\"br-3 flip-card\">\n <div\n class=\"flip-card-content position-relative w-100 h-100 transition-transform-400\"\n [class.flipped]=\"isCardFlipped\"\n >\n <div\n class=\"flip-card-front br-3 background-white p-4 w-100 h-100\"\n [ngClass]=\"\n isCardFlipped\n ? 'position-absolute top-0 left-0'\n : 'position-relative'\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n cardContentTemplate;\n context: {\n card,\n index,\n sideOfCard: _frontSide,\n }\n \"\n ></ng-container>\n </div>\n\n <div\n class=\"flip-card-back br-3 background-white p-4 w-100 h-100\"\n [ngClass]=\"\n isCardFlipped\n ? 'position-relative'\n : 'position-absolute top-0 left-0'\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n cardContentTemplate;\n context: {\n card,\n index,\n sideOfCard: _backSide,\n }\n \"\n ></ng-container>\n </div>\n </div>\n </div>\n }\n\n @if (isShowMoreLoading) {\n @let numberOfCards =\n totalDataCount - displayedDataCount > 25\n ? 25\n : totalDataCount - displayedDataCount;\n\n <ca-table-card-view-skeleton\n #skeletonLoader\n [cardsCount]=\"numberOfCards\"\n ></ca-table-card-view-skeleton>\n }\n </div>\n\n @if (displayedDataCount) {\n <div #showMoreContainer>\n <app-ca-show-more\n [displayedDataCount]=\"displayedDataCount\"\n [totalDataCount]=\"totalDataCount\"\n (onShowMore)=\"onShowMoreClick()\"\n ></app-ca-show-more>\n </div>\n }\n} @placeholder (minimum 800ms) {\n <ca-table-card-view-skeleton\n class=\"placeholder-wave cards-container d-grid gap-1 m-t-7 m-r-15\"\n ></ca-table-card-view-skeleton>\n}\n\n<ng-template\n #cardContentTemplate\n let-card=\"card\"\n let-index=\"index\"\n let-sideOfCard=\"sideOfCard\"\n>\n <div\n class=\"card-body d-flex justify-content-between position-relative gap-1 br-2 p-4 h-100\"\n [ngClass]=\"\n card.isSelected\n ? 'background-gray background-hover-gray'\n : 'background-hover-bw2'\n \"\n >\n <!-- Left side of the card -->\n <div class=\"card-body-left d-flex flex-column gap-8\">\n <!-- Head of the card -->\n\n <div\n class=\"card-header d-flex align-items-center gap-8 p-l-2 h-26\"\n [ngClass]=\"card?.isRepairOrder ? 'with-finish-order' : 'p-r-4'\"\n [class.select-hidden]=\"isSelectHidden\"\n >\n @if (!isSelectHidden) {\n <app-ca-checkbox\n [name]=\"'checkbox' + index\"\n [isChecked]=\"card.isSelected\"\n [isRegularCheckbox]=\"false\"\n (columnCheckAction)=\"onCheckboxSelect(card.id)\"\n ></app-ca-checkbox>\n }\n\n <div\n class=\"d-flex align-items-center flex-grow-1 gap-1 min-w-0\"\n >\n @if (_titleIcon) {\n <ng-container\n *ngTemplateOutlet=\"\n _titleIcon;\n context: { data: card }\n \"\n ></ng-container>\n }\n\n <div\n class=\"card-title text-color-black ca-font-bold text-size-14 min-w-0\"\n [ngClass]=\"{\n 'c-pointer text-hover-blue-15': hasDetailsPage,\n }\"\n (click)=\"cardTitleClicked(card.id)\"\n >\n <p\n class=\"text-truncate\"\n ngbTooltip\n [mainCaTooltip]=\"\n hasDetailsPage\n ? eTableCardGeneral.VIEW_DETAILS\n : undefined\n \"\n [position]=\"ePosition.BOTTOM\"\n [tooltipBackground]=\"eColor.BLACK\"\n [innerHTML]=\"\n card[_cardTitle] ??\n eStringPlaceholder.FORWARD_SLASH\n | tableHighlightSearchText: _searchStrings\n \"\n ></p>\n </div>\n </div>\n\n @if (card?.isRepairOrder) {\n <div\n class=\"finish-order-btn text-size-11 text-color-blue-11 ca-font-bold p-y-4 p-x-8 br-2 c-pointer text-nowrap transition-background-300\"\n (click)=\"repairFinishOrder(card.id)\"\n >\n FINISH ORDER\n </div>\n }\n </div>\n\n <!-- Card body front-->\n\n <div\n class=\"card-body-content d-flex flex-column gap-2\"\n #cardBodyContent\n >\n <ng-container\n *ngTemplateOutlet=\"sideOfCard; context: { data: card }\"\n ></ng-container>\n </div>\n </div>\n\n <!-- Right side of the card -->\n <div class=\"card-body-right d-flex flex-column\">\n <div class=\"d-flex flex-column gap-1 flex-grow-1\">\n <!-- Dropdown Menu-->\n\n @if (!isDropdownMenuHidden) {\n <ca-dropdown-menu\n [type]=\"'dots-menu-type'\"\n [placement]=\"ePosition.TABLE_CARDS_DROPDOWN_MENU\"\n [options]=\"dropdownMenuOptions\"\n (dropdownOptionEmitter)=\"\n handleToggleDropdownMenuActions($event, card)\n \"\n >\n </ca-dropdown-menu>\n }\n\n <!-- Note element -->\n\n @if (_rightSideTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n _rightSideTemplate;\n context: { data: card }\n \"\n ></ng-container>\n }\n </div>\n\n <!-- Expand element -->\n\n @let showBackSideCard =\n (index | isCardFlipped: isCardFlippedCheckInCards) ||\n cardsFlipType === tableCardTypes.BACK;\n\n @if (showBackSide) {\n <div\n class=\"bottom-side d-flex justify-content-center h-26 w-26\"\n (click)=\"flipCard(index)\"\n >\n <span\n class=\"p-t-6 p-b-2 p-l-6 p-r-2\"\n [ngClass]=\"\n showBackSideCard\n ? 'svg-hover-blue-15'\n : 'svg-hover-black'\n \"\n type=\"button\"\n ngbTooltip\n [mainCaTooltip]=\"eTableCardGeneral.FLIP_CARD\"\n [position]=\"ePosition.BOTTOM\"\n [tooltipBackground]=\"eColor.BLACK\"\n >\n <svg-icon\n class=\"svg-size-18 d-flex align-items-center justify-content-center\"\n [ngClass]=\"{\n 'rotate-svg svg-fill-blue-13': showBackSideCard,\n }\"\n [src]=\"tableCardViewSvgRoutes.flipArrowRoute\"\n ></svg-icon>\n </span>\n </div>\n }\n </div>\n\n <!-- Sort by blur overlay -->\n @if (isCardSortingActive) {\n <div\n class=\"blur-overlay background-white-7 position-absolute top-0 start-0 end-0 bottom-0 z-3\"\n ></div>\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}}.cards-container{grid-template-columns:repeat(auto-fill,minmax(302px,1fr))}.cards-container .flip-card{perspective:1000px}.cards-container .flip-card .flip-card-content{transform-style:preserve-3d}.cards-container .flip-card .flip-card-content.flipped{transform:rotate3d(var(--flip-width),var(--flip-height),0,180deg)}.cards-container .flip-card .flip-card-front,.cards-container .flip-card .flip-card-back{-webkit-backface-visibility:hidden;backface-visibility:hidden}.cards-container .flip-card .flip-card-front{transform:rotate3d(var(--flip-width),var(--flip-height),0,0)}.cards-container .flip-card .flip-card-back{transform:rotate3d(var(--flip-width),var(--flip-height),0,180deg)}.cards-container .flip-card .card-body:hover .finish-order-btn{background-color:#3b73ed!important;color:#fff!important}.cards-container .flip-card .card-body .card-body-left{width:calc(100% - 30px)}.cards-container .flip-card .card-body .rotate-svg{rotate:180deg}.cards-container .blur-overlay{-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);animation:pulse .7s cubic-bezier(.46,.03,.51,.95) infinite alternate}@keyframes pulse{0%{background-color:#ffffff20}to{background-color:#ffffffb2}}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
@@ -38516,15 +38515,15 @@ class CaFactoringDropdownComponent {
|
|
|
38516
38515
|
return this.checkBoxItems.filter((c) => !!raw[c.name]).length;
|
|
38517
38516
|
}));
|
|
38518
38517
|
}
|
|
38519
|
-
onFactoringDropdownOpenCloseClick(factoringDropdownPopover) {
|
|
38518
|
+
onFactoringDropdownOpenCloseClick(factoringDropdownPopover, event) {
|
|
38519
|
+
event?.stopPropagation();
|
|
38520
38520
|
if (factoringDropdownPopover.isOpen()) {
|
|
38521
38521
|
factoringDropdownPopover.close();
|
|
38522
38522
|
this.factoringDropdownPopover = null;
|
|
38523
38523
|
}
|
|
38524
38524
|
else {
|
|
38525
|
-
this.factoringDropdownPopover?.close();
|
|
38526
38525
|
this.factoringDropdownPopover = factoringDropdownPopover;
|
|
38527
|
-
this.factoringDropdownPopover
|
|
38526
|
+
this.factoringDropdownPopover?.open();
|
|
38528
38527
|
}
|
|
38529
38528
|
}
|
|
38530
38529
|
onCLoseDropdown() {
|
|
@@ -38566,8 +38565,15 @@ class CaFactoringDropdownComponent {
|
|
|
38566
38565
|
organizePdf.markAsTouched();
|
|
38567
38566
|
}
|
|
38568
38567
|
}
|
|
38569
|
-
|
|
38570
|
-
|
|
38568
|
+
onExportClick(event) {
|
|
38569
|
+
event?.stopPropagation();
|
|
38570
|
+
this.isExportClicked = true;
|
|
38571
|
+
}
|
|
38572
|
+
onExportBatch(isUpload, event) {
|
|
38573
|
+
event?.stopPropagation();
|
|
38574
|
+
isUpload
|
|
38575
|
+
? (this.isInProgressUpload = true)
|
|
38576
|
+
: (this.isInProgressExport = true);
|
|
38571
38577
|
const formValue = this.factoringDropdownForm.getRawValue();
|
|
38572
38578
|
const factoringExportItem = {
|
|
38573
38579
|
scheduleNumber: formValue.scheduleNo,
|
|
@@ -38583,7 +38589,7 @@ class CaFactoringDropdownComponent {
|
|
|
38583
38589
|
: this.onFactoringExport.emit(factoringExportItem);
|
|
38584
38590
|
}
|
|
38585
38591
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CaFactoringDropdownComponent, deps: [{ token: i1$2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
38586
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaFactoringDropdownComponent, isStandalone: true, selector: "app-ca-factoring-dropdown", inputs: { itemsCount: "itemsCount", isExportFinished: "isExportFinished" }, outputs: { onFactoringExport: "onFactoringExport", onFactoringUploadToRts: "onFactoringUploadToRts" }, ngImport: i0, template: "<div class=\"w-26 h-26\">\n <div\n #factoringDropdownPopover=\"ngbPopover\"\n triggers=\"'manual'\"\n [ngbPopover]=\"factoringDropdown\"\n [autoClose]=\"'outside'\"\n [placement]=\"ePosition.BOTTOM_END\"\n [popoverClass]=\"'factoring-dropdown-popover'\"\n [container]=\"'body'\"\n (click)=\"onFactoringDropdownOpenCloseClick(factoringDropdownPopover)\"\n >\n <div\n class=\"d-flex align-items-center justify-content-center br-2 w-26 h-26 c-pointer\"\n [ngClass]=\"\n factoringDropdownPopover.isOpen()\n ? 'background-blue-15'\n : 'background-hover-blue-16'\n \"\n ngbTooltip\n [mainCaTooltip]=\"\n 'Create factoring schedule and Export batch documents (' +\n itemsCount +\n ')'\n \"\n [tooltipBackground]=\"'#424242'\"\n [position]=\"'bottom'\"\n >\n <svg-icon\n class=\"factoring-icon d-flex align-items-center justify-content-center\"\n [ngClass]=\"\n factoringDropdownPopover.isOpen()\n ? 'svg-fill-white-4'\n : 'svg-fill-blue-9'\n \"\n [src]=\"sharedSvgRoutes.DOCUMENT_ICON\"\n ></svg-icon>\n </div>\n </div>\n\n <ng-template #factoringDropdown>\n @let isFormValid = factoringDropdownForm.valid;\n @let pdfFormat =\n factoringDropdownForm.get(eFactoringFormControl.PDF_FORMAT)?.value;\n @let organizePdf =\n factoringDropdownForm.get(eFactoringFormControl.ORGANIZE_PDF)\n ?.value;\n <div\n class=\"factoring-dropdown-container d-flex flex-column w-180 p-4 br-3 background-black-2\"\n [formGroup]=\"factoringDropdownForm\"\n >\n <div\n class=\"factoring-dropdown-title-container d-flex align-items-center justify-content-between\"\n >\n <div\n class=\"factoring-dropdown-title d-flex align-items-center p-l-6\"\n >\n <p\n class=\"factoring-dropdown-title-text m-r-4 text-size-14 ca-font-extra-bold text-color-white\"\n >\n Export Batch\n </p>\n <div\n class=\"text-size-11 ca-font-bold min-w-16 p-x-4 p-y-1 br-60 fleet-filter-dropdown-list-badge text-center background-black text-color-white\"\n >\n {{ itemsCount }}\n </div>\n </div>\n <div\n class=\"factoring-dropdown-title-icon-container w-26 h-26 d-flex align-items-center justify-content-center c-pointer background-hover-dark-3 br-2\"\n ngbTooltip\n [mainCaTooltip]=\"eSharedString.CLOSE\"\n [tooltipBackground]=\"'#424242'\"\n [position]=\"'bottom'\"\n (click)=\"onCLoseDropdown()\"\n >\n <svg-icon\n class=\"factoring-dropdown-title-icon svg-size-18 d-flex align-items-center justify-content-center\"\n [src]=\"sharedSvgRoutes.CLOSE_ICON_NORMAL\"\n ></svg-icon>\n </div>\n </div>\n\n <div class=\"w-100 h-1 background-black m-y-4\"></div>\n <div\n class=\"factoring-dropdown-search-container p-x-2 p-t-18 padding-b-14\"\n >\n <cai-input\n [id]=\"'test'\"\n [config]=\"scheduleNoInputConfig\"\n [formControlName]=\"eFactoringFormControl.SCHEDULE_NO\"\n ></cai-input>\n </div>\n <div class=\"w-100 h-1 background-black m-t-4\"></div>\n <div\n class=\"factoring-dropdown-table-columns-container d-flex align-items-center p-t-6 p-b-2 p-l-6\"\n >\n <p\n class=\"factoring-dropdown-title-text m-r-4 text-size-11 ca-font-bold text-color-white\"\n >\n TABLE COLUMN\n </p>\n <div\n class=\"text-size-11 ca-font-semi-bold p-x-4 p-y-1 br-60 fleet-filter-dropdown-list-badge text-center background-black text-color-white\"\n >\n {{ checkedCount$ | async }} of 8\n </div>\n </div>\n\n @for (\n item of checkBoxItems;\n let itemIndex = $index;\n track itemIndex\n ) {\n <div\n class=\"factoring-dropdown-checkbox-item p-y-4 p-l-6 p-r-4 m-t-4 br-2 background-hover-black c-pointer h-26 d-flex align-items-center\"\n (click)=\"onCheckboxRowClick(item.name)\"\n >\n <app-ca-checkbox\n [formControlName]=\"item.name\"\n [label]=\"item.label\"\n [name]=\"item.name\"\n [isRegularCheckbox]=\"true\"\n [customClass]=\"'dropdown-column'\"\n [disabled]=\"item.isChecked\"\n [isLabelDisabled]=\"true\"\n [isDarkBackgroundCheckbox]=\"true\"\n ></app-ca-checkbox>\n </div>\n }\n <div class=\"w-100 h-1 background-black m-t-4\"></div>\n <div\n class=\"factoring-dropdown-table-columns-container d-flex align-items-center p-t-6 p-b-2 p-l-6\"\n >\n <p\n class=\"factoring-dropdown-title-text m-r-4 text-size-11 ca-font-bold text-color-white\"\n >\n PDF FORMAT\n </p>\n </div>\n <div\n class=\"p-l-6 p-y-4 background-hover-black c-pointer d-flex align-items-center m-y-4\"\n (click)=\"\n onRadioPdfFormatClick(eFactoringPdfFormat.SINGLE, $event)\n \"\n >\n <label class=\"radio-row d-flex align-items-center c-pointer\">\n <input\n type=\"radio\"\n class=\"factoring-radio m-r-6 c-pointer h-14 w-14 br-circle background-bw5\"\n [formControlName]=\"eFactoringFormControl.PDF_FORMAT\"\n [value]=\"eFactoringPdfFormat.SINGLE\"\n />\n <span\n class=\"text-size-14 text-color-white\"\n [ngClass]=\"\n pdfFormat === eFactoringPdfFormat.SINGLE\n ? 'ca-font-bold'\n : 'ca-font-regular'\n \"\n >Single (All Loads)</span\n >\n </label>\n </div>\n\n <div\n class=\"p-l-6 p-y-4 background-hover-black c-pointer d-flex align-items-center\"\n (click)=\"\n onRadioPdfFormatClick(eFactoringPdfFormat.MULTIPLE, $event)\n \"\n >\n <label class=\"radio-row d-flex align-items-center c-pointer\">\n <input\n type=\"radio\"\n class=\"factoring-radio m-r-6 c-pointer h-14 w-14 br-circle background-bw5\"\n [formControlName]=\"eFactoringFormControl.PDF_FORMAT\"\n [value]=\"eFactoringPdfFormat.MULTIPLE\"\n />\n <span\n class=\"text-size-14 text-color-white\"\n [ngClass]=\"\n pdfFormat === eFactoringPdfFormat.MULTIPLE\n ? 'ca-font-bold'\n : 'ca-font-regular'\n \"\n >Multiple (Per Load)</span\n >\n </label>\n </div>\n\n <div class=\"w-100 h-1 background-black m-t-4\"></div>\n <div\n class=\"factoring-dropdown-table-columns-container d-flex align-items-center p-t-6 p-b-2 p-l-6\"\n >\n <p\n class=\"factoring-dropdown-title-text m-r-4 text-size-11 ca-font-bold text-color-white\"\n >\n ORGANIZE PDF\n </p>\n </div>\n <div\n class=\"p-l-6 p-y-4 background-hover-black c-pointer d-flex align-items-center m-y-4\"\n (click)=\"\n onRadioOrganizePdfClick(\n eFactoringPdfOrganize.BY_LOAD,\n $event\n )\n \"\n >\n <label class=\"radio-row d-flex align-items-center c-pointer\">\n <input\n type=\"radio\"\n class=\"factoring-radio m-r-6 c-pointer h-14 w-14 br-circle background-bw5\"\n [formControlName]=\"eFactoringFormControl.ORGANIZE_PDF\"\n [value]=\"eFactoringPdfOrganize.BY_LOAD\"\n (click)=\"$event.stopPropagation()\"\n />\n <span\n class=\"text-size-14 text-color-white\"\n [ngClass]=\"\n organizePdf === eFactoringPdfOrganize.BY_LOAD\n ? 'ca-font-bold'\n : 'ca-font-regular'\n \"\n >By Load</span\n >\n </label>\n </div>\n\n <div\n class=\"p-l-6 p-y-4 background-hover-black c-pointer d-flex align-items-center\"\n (click)=\"\n !isByTagDisabled &&\n onRadioOrganizePdfClick(\n eFactoringPdfOrganize.BY_TAG,\n $event\n )\n \"\n >\n <label class=\"radio-row d-flex align-items-center c-pointer\">\n @if (isByTagDisabled) {\n <svg-icon\n class=\"factoring-dropdown-title-icon svg-size-14 d-flex align-items-center justify-content-center m-r-6 svg-fill-grey-2\"\n [src]=\"checkboxSvgRputes.disabledIcon\"\n ></svg-icon>\n } @else {\n <input\n type=\"radio\"\n class=\"factoring-radio m-r-6 c-pointer h-14 w-14 br-circle background-bw5\"\n [formControlName]=\"\n eFactoringFormControl.ORGANIZE_PDF\n \"\n [value]=\"eFactoringPdfOrganize.BY_TAG\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n\n <span\n class=\"text-size-14 text-color-white\"\n [ngClass]=\"{\n 'text-color-bw6-2': isByTagDisabled,\n 'text-color-white': !isByTagDisabled,\n\n 'ca-font-bold':\n organizePdf === eFactoringPdfOrganize.BY_TAG &&\n !isByTagDisabled,\n 'ca-font-regular':\n organizePdf !== eFactoringPdfOrganize.BY_TAG ||\n isByTagDisabled,\n }\"\n >By Tag</span\n >\n </label>\n </div>\n <div\n class=\"factoring-dropdown-checkbox-item p-y-4 p-l-6 p-r-4 m-t-4 br-2 background-hover-black c-pointer\"\n (click)=\"\n onCheckboxRowClick(eFactoringFormControl.INCLUDE_UNTAGGED)\n \"\n >\n <app-ca-checkbox\n #checkboxCmp\n [formControlName]=\"eFactoringFormControl.INCLUDE_UNTAGGED\"\n [label]=\"'Include Untagged'\"\n [name]=\"eFactoringFormControl.INCLUDE_UNTAGGED\"\n [isRegularCheckbox]=\"true\"\n [customClass]=\"'dropdown-column'\"\n [isLabelDisabled]=\"true\"\n [isDarkBackgroundCheckbox]=\"true\"\n ></app-ca-checkbox>\n </div>\n <div class=\"w-100 h-1 background-black m-t-6 m-b-4\"></div>\n\n @if (!isExportClicked) {\n <button\n class=\"factoring-export-btn d-flex align-items-center justify-content-center ca-font-bold br-1 text-size-11 p-2\"\n [ngClass]=\"\n isFormValid &&\n !isInProgressUpload &&\n !isInProgressExport\n ? 'background-blue-13 text-color-white'\n : 'background-dark-2 text-color-grey'\n \"\n [disabled]=\"\n !isFormValid || isInProgressUpload || isInProgressExport\n \"\n (click)=\"isExportClicked = true\"\n >\n <span>EXPORT</span>\n </button>\n } @else {\n <button\n class=\"factoring-export-btn d-flex align-items-center justify-content-center ca-font-bold br-1 text-size-11 p-2\"\n [ngClass]=\"\n isFormValid &&\n !isInProgressUpload &&\n !isInProgressExport\n ? 'background-blue-13 text-color-white'\n : 'background-dark-2 text-color-grey'\n \"\n [disabled]=\"\n !isFormValid || isInProgressUpload || isInProgressExport\n \"\n (click)=\"onExportBatch(true)\"\n >\n @if (isInProgressUpload) {\n Preparing...\n <app-ca-spinner\n [size]=\"'extra-small'\"\n [color]=\"'gray'\"\n ></app-ca-spinner>\n } @else {\n <span>UPLOAD TO RTS</span>\n }\n </button>\n\n <button\n class=\"factoring-export-btn d-flex align-items-center justify-content-center ca-font-bold br-1 text-size-11 p-2 mt-2\"\n [ngClass]=\"\n isFormValid &&\n !isInProgressExport &&\n !isInProgressUpload\n ? 'background-dark-2 text-color-blue-19'\n : 'background-dark-2 text-color-grey'\n \"\n [disabled]=\"\n !isFormValid || isInProgressExport || isInProgressUpload\n \"\n (click)=\"onExportBatch(false)\"\n >\n @if (isInProgressExport) {\n Preparing...\n <app-ca-spinner\n [size]=\"'extra-small'\"\n [color]=\"'gray'\"\n ></app-ca-spinner>\n } @else {\n <span>EXPORT TO PC</span>\n }\n </button>\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:#0b49d1;transition:all .3s ease-in-out}.factoring-radio{appearance:none;-webkit-appearance:none;outline:none;position:relative;transition:background .15s ease,border .15s ease}.factoring-radio:after{content:\"\";position:absolute;top:4px;left:4px;width:6px;height:6px;border-radius:50%;background:#fff;display:none}.factoring-radio:checked{background:#6692f1}.factoring-radio:checked:after{display:block}.factoring-export-btn{outline:none;border:none}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
38592
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaFactoringDropdownComponent, isStandalone: true, selector: "app-ca-factoring-dropdown", inputs: { itemsCount: "itemsCount", isExportFinished: "isExportFinished" }, outputs: { onFactoringExport: "onFactoringExport", onFactoringUploadToRts: "onFactoringUploadToRts" }, ngImport: i0, template: "<div class=\"w-26 h-26\">\n <div\n #factoringDropdownPopover=\"ngbPopover\"\n triggers=\"'manual'\"\n [ngbPopover]=\"factoringDropdown\"\n [autoClose]=\"'outside'\"\n [placement]=\"ePosition.BOTTOM_END\"\n [popoverClass]=\"'factoring-dropdown-popover'\"\n [container]=\"'body'\"\n (click)=\"\n onFactoringDropdownOpenCloseClick(factoringDropdownPopover, $event)\n \"\n >\n <div\n class=\"d-flex align-items-center justify-content-center br-2 w-26 h-26 c-pointer\"\n [ngClass]=\"\n factoringDropdownPopover.isOpen()\n ? 'background-blue-15'\n : 'background-hover-blue-16'\n \"\n ngbTooltip\n [mainCaTooltip]=\"\n 'Create factoring schedule and Export batch documents (' +\n itemsCount +\n ')'\n \"\n [tooltipBackground]=\"'#424242'\"\n [position]=\"'bottom'\"\n >\n <svg-icon\n class=\"factoring-icon d-flex align-items-center justify-content-center\"\n [ngClass]=\"\n factoringDropdownPopover.isOpen()\n ? 'svg-fill-white-4'\n : 'svg-fill-blue-9'\n \"\n [src]=\"sharedSvgRoutes.DOCUMENT_ICON\"\n ></svg-icon>\n </div>\n </div>\n\n <ng-template #factoringDropdown>\n @let isFormValid = factoringDropdownForm.valid;\n @let pdfFormat =\n factoringDropdownForm.get(eFactoringFormControl.PDF_FORMAT)?.value;\n @let organizePdf =\n factoringDropdownForm.get(eFactoringFormControl.ORGANIZE_PDF)\n ?.value;\n <div\n class=\"factoring-dropdown-container d-flex flex-column w-180 p-4 br-3 background-black-2\"\n [formGroup]=\"factoringDropdownForm\"\n >\n <div\n class=\"factoring-dropdown-title-container d-flex align-items-center justify-content-between\"\n >\n <div\n class=\"factoring-dropdown-title d-flex align-items-center p-l-6\"\n >\n <p\n class=\"factoring-dropdown-title-text m-r-4 text-size-14 ca-font-extra-bold text-color-white\"\n >\n Export Batch\n </p>\n <div\n class=\"text-size-11 ca-font-bold min-w-16 p-x-4 p-y-1 br-60 fleet-filter-dropdown-list-badge text-center background-black text-color-white\"\n >\n {{ itemsCount }}\n </div>\n </div>\n <div\n class=\"factoring-dropdown-title-icon-container w-26 h-26 d-flex align-items-center justify-content-center c-pointer background-hover-dark-3 br-2\"\n ngbTooltip\n [mainCaTooltip]=\"eSharedString.CLOSE\"\n [tooltipBackground]=\"'#424242'\"\n [position]=\"'bottom'\"\n (click)=\"onCLoseDropdown()\"\n >\n <svg-icon\n class=\"factoring-dropdown-title-icon svg-size-18 d-flex align-items-center justify-content-center\"\n [src]=\"sharedSvgRoutes.CLOSE_ICON_NORMAL\"\n ></svg-icon>\n </div>\n </div>\n\n <div class=\"w-100 h-1 background-black m-y-4\"></div>\n <div\n class=\"factoring-dropdown-search-container p-x-2 p-t-18 padding-b-14\"\n >\n <cai-input\n [id]=\"'test'\"\n [config]=\"scheduleNoInputConfig\"\n [formControlName]=\"eFactoringFormControl.SCHEDULE_NO\"\n ></cai-input>\n </div>\n <div class=\"w-100 h-1 background-black m-t-4\"></div>\n <div\n class=\"factoring-dropdown-table-columns-container d-flex align-items-center p-t-6 p-b-2 p-l-6\"\n >\n <p\n class=\"factoring-dropdown-title-text m-r-4 text-size-11 ca-font-bold text-color-white\"\n >\n TABLE COLUMN\n </p>\n <div\n class=\"text-size-11 ca-font-semi-bold p-x-4 p-y-1 br-60 fleet-filter-dropdown-list-badge text-center background-black text-color-white\"\n >\n {{ checkedCount$ | async }} of 8\n </div>\n </div>\n\n @for (\n item of checkBoxItems;\n let itemIndex = $index;\n track itemIndex\n ) {\n <div\n class=\"factoring-dropdown-checkbox-item p-y-4 p-l-6 p-r-4 m-t-4 br-2 background-hover-black c-pointer h-26 d-flex align-items-center\"\n (click)=\"onCheckboxRowClick(item.name)\"\n >\n <app-ca-checkbox\n [formControlName]=\"item.name\"\n [label]=\"item.label\"\n [name]=\"item.name\"\n [isRegularCheckbox]=\"true\"\n [customClass]=\"'dropdown-column'\"\n [disabled]=\"item.isChecked\"\n [isLabelDisabled]=\"true\"\n [isDarkBackgroundCheckbox]=\"true\"\n ></app-ca-checkbox>\n </div>\n }\n <div class=\"w-100 h-1 background-black m-t-4\"></div>\n <div\n class=\"factoring-dropdown-table-columns-container d-flex align-items-center p-t-6 p-b-2 p-l-6\"\n >\n <p\n class=\"factoring-dropdown-title-text m-r-4 text-size-11 ca-font-bold text-color-white\"\n >\n PDF FORMAT\n </p>\n </div>\n <div\n class=\"p-l-6 p-y-4 background-hover-black c-pointer d-flex align-items-center m-y-4\"\n (click)=\"\n onRadioPdfFormatClick(eFactoringPdfFormat.SINGLE, $event)\n \"\n >\n <label class=\"radio-row d-flex align-items-center c-pointer\">\n <input\n type=\"radio\"\n class=\"factoring-radio m-r-6 c-pointer h-14 w-14 br-circle background-bw5\"\n [formControlName]=\"eFactoringFormControl.PDF_FORMAT\"\n [value]=\"eFactoringPdfFormat.SINGLE\"\n />\n <span\n class=\"text-size-14 text-color-white\"\n [ngClass]=\"\n pdfFormat === eFactoringPdfFormat.SINGLE\n ? 'ca-font-bold'\n : 'ca-font-regular'\n \"\n >Single (All Loads)</span\n >\n </label>\n </div>\n\n <div\n class=\"p-l-6 p-y-4 background-hover-black c-pointer d-flex align-items-center\"\n (click)=\"\n onRadioPdfFormatClick(eFactoringPdfFormat.MULTIPLE, $event)\n \"\n >\n <label class=\"radio-row d-flex align-items-center c-pointer\">\n <input\n type=\"radio\"\n class=\"factoring-radio m-r-6 c-pointer h-14 w-14 br-circle background-bw5\"\n [formControlName]=\"eFactoringFormControl.PDF_FORMAT\"\n [value]=\"eFactoringPdfFormat.MULTIPLE\"\n />\n <span\n class=\"text-size-14 text-color-white\"\n [ngClass]=\"\n pdfFormat === eFactoringPdfFormat.MULTIPLE\n ? 'ca-font-bold'\n : 'ca-font-regular'\n \"\n >Multiple (Per Load)</span\n >\n </label>\n </div>\n\n <div class=\"w-100 h-1 background-black m-t-4\"></div>\n <div\n class=\"factoring-dropdown-table-columns-container d-flex align-items-center p-t-6 p-b-2 p-l-6\"\n >\n <p\n class=\"factoring-dropdown-title-text m-r-4 text-size-11 ca-font-bold text-color-white\"\n >\n ORGANIZE PDF\n </p>\n </div>\n <div\n class=\"p-l-6 p-y-4 background-hover-black c-pointer d-flex align-items-center m-y-4\"\n (click)=\"\n onRadioOrganizePdfClick(\n eFactoringPdfOrganize.BY_LOAD,\n $event\n )\n \"\n >\n <label class=\"radio-row d-flex align-items-center c-pointer\">\n <input\n type=\"radio\"\n class=\"factoring-radio m-r-6 c-pointer h-14 w-14 br-circle background-bw5\"\n [formControlName]=\"eFactoringFormControl.ORGANIZE_PDF\"\n [value]=\"eFactoringPdfOrganize.BY_LOAD\"\n (click)=\"$event.stopPropagation()\"\n />\n <span\n class=\"text-size-14 text-color-white\"\n [ngClass]=\"\n organizePdf === eFactoringPdfOrganize.BY_LOAD\n ? 'ca-font-bold'\n : 'ca-font-regular'\n \"\n >By Load</span\n >\n </label>\n </div>\n\n <div\n class=\"p-l-6 p-y-4 background-hover-black c-pointer d-flex align-items-center\"\n (click)=\"\n !isByTagDisabled &&\n onRadioOrganizePdfClick(\n eFactoringPdfOrganize.BY_TAG,\n $event\n )\n \"\n >\n <label class=\"radio-row d-flex align-items-center c-pointer\">\n @if (isByTagDisabled) {\n <svg-icon\n class=\"factoring-dropdown-title-icon svg-size-14 d-flex align-items-center justify-content-center m-r-6 svg-fill-grey-2\"\n [src]=\"checkboxSvgRputes.disabledIcon\"\n ></svg-icon>\n } @else {\n <input\n type=\"radio\"\n class=\"factoring-radio m-r-6 c-pointer h-14 w-14 br-circle background-bw5\"\n [formControlName]=\"\n eFactoringFormControl.ORGANIZE_PDF\n \"\n [value]=\"eFactoringPdfOrganize.BY_TAG\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n\n <span\n class=\"text-size-14 text-color-white\"\n [ngClass]=\"{\n 'text-color-bw6-2': isByTagDisabled,\n 'text-color-white': !isByTagDisabled,\n\n 'ca-font-bold':\n organizePdf === eFactoringPdfOrganize.BY_TAG &&\n !isByTagDisabled,\n 'ca-font-regular':\n organizePdf !== eFactoringPdfOrganize.BY_TAG ||\n isByTagDisabled,\n }\"\n >By Tag</span\n >\n </label>\n </div>\n <div\n class=\"factoring-dropdown-checkbox-item p-y-4 p-l-6 p-r-4 m-t-4 br-2 background-hover-black c-pointer\"\n (click)=\"\n onCheckboxRowClick(eFactoringFormControl.INCLUDE_UNTAGGED)\n \"\n >\n <app-ca-checkbox\n #checkboxCmp\n [formControlName]=\"eFactoringFormControl.INCLUDE_UNTAGGED\"\n [label]=\"'Include Untagged'\"\n [name]=\"eFactoringFormControl.INCLUDE_UNTAGGED\"\n [isRegularCheckbox]=\"true\"\n [customClass]=\"'dropdown-column'\"\n [isLabelDisabled]=\"true\"\n [isDarkBackgroundCheckbox]=\"true\"\n ></app-ca-checkbox>\n </div>\n <div class=\"w-100 h-1 background-black m-t-6 m-b-4\"></div>\n\n @if (!isExportClicked) {\n <button\n class=\"factoring-export-btn d-flex align-items-center justify-content-center ca-font-bold br-1 text-size-11 p-2\"\n [ngClass]=\"\n isFormValid &&\n !isInProgressUpload &&\n !isInProgressExport\n ? 'background-blue-13 text-color-white'\n : 'background-dark-2 text-color-grey'\n \"\n [disabled]=\"\n !isFormValid || isInProgressUpload || isInProgressExport\n \"\n (click)=\"onExportClick($event)\"\n >\n <span>EXPORT</span>\n </button>\n } @else {\n <button\n class=\"factoring-export-btn d-flex align-items-center justify-content-center ca-font-bold br-1 text-size-11 p-2\"\n [ngClass]=\"\n isFormValid &&\n !isInProgressUpload &&\n !isInProgressExport\n ? 'background-blue-13 text-color-white'\n : 'background-dark-2 text-color-grey'\n \"\n [disabled]=\"\n !isFormValid || isInProgressUpload || isInProgressExport\n \"\n (click)=\"onExportBatch(true, $event)\"\n >\n @if (isInProgressUpload) {\n Preparing...\n <app-ca-spinner\n [size]=\"'extra-small'\"\n [color]=\"'gray'\"\n ></app-ca-spinner>\n } @else {\n <span>UPLOAD TO RTS</span>\n }\n </button>\n\n <button\n class=\"factoring-export-btn d-flex align-items-center justify-content-center ca-font-bold br-1 text-size-11 p-2 mt-2\"\n [ngClass]=\"\n isFormValid &&\n !isInProgressExport &&\n !isInProgressUpload\n ? 'background-dark-2 text-color-blue-19'\n : 'background-dark-2 text-color-grey'\n \"\n [disabled]=\"\n !isFormValid || isInProgressExport || isInProgressUpload\n \"\n (click)=\"onExportBatch(false, $event)\"\n >\n @if (isInProgressExport) {\n Preparing...\n <app-ca-spinner\n [size]=\"'extra-small'\"\n [color]=\"'gray'\"\n ></app-ca-spinner>\n } @else {\n <span>EXPORT TO PC</span>\n }\n </button>\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:#0b49d1;transition:all .3s ease-in-out}.factoring-radio{appearance:none;-webkit-appearance:none;outline:none;position:relative;transition:background .15s ease,border .15s ease}.factoring-radio:after{content:\"\";position:absolute;top:4px;left:4px;width:6px;height:6px;border-radius:50%;background:#fff;display:none}.factoring-radio:checked{background:#6692f1}.factoring-radio:checked:after{display:block}.factoring-export-btn{outline:none;border:none}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
38587
38593
|
// modules
|
|
38588
38594
|
CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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: "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:
|
|
38589
38595
|
// components
|
|
@@ -38602,7 +38608,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
38602
38608
|
CaCheckboxComponent,
|
|
38603
38609
|
CaSpinnerComponent,
|
|
38604
38610
|
InputComponent,
|
|
38605
|
-
], template: "<div class=\"w-26 h-26\">\n <div\n #factoringDropdownPopover=\"ngbPopover\"\n triggers=\"'manual'\"\n [ngbPopover]=\"factoringDropdown\"\n [autoClose]=\"'outside'\"\n [placement]=\"ePosition.BOTTOM_END\"\n [popoverClass]=\"'factoring-dropdown-popover'\"\n [container]=\"'body'\"\n (click)=\"onFactoringDropdownOpenCloseClick(factoringDropdownPopover)\"\n >\n <div\n class=\"d-flex align-items-center justify-content-center br-2 w-26 h-26 c-pointer\"\n [ngClass]=\"\n factoringDropdownPopover.isOpen()\n ? 'background-blue-15'\n : 'background-hover-blue-16'\n \"\n ngbTooltip\n [mainCaTooltip]=\"\n 'Create factoring schedule and Export batch documents (' +\n itemsCount +\n ')'\n \"\n [tooltipBackground]=\"'#424242'\"\n [position]=\"'bottom'\"\n >\n <svg-icon\n class=\"factoring-icon d-flex align-items-center justify-content-center\"\n [ngClass]=\"\n factoringDropdownPopover.isOpen()\n ? 'svg-fill-white-4'\n : 'svg-fill-blue-9'\n \"\n [src]=\"sharedSvgRoutes.DOCUMENT_ICON\"\n ></svg-icon>\n </div>\n </div>\n\n <ng-template #factoringDropdown>\n @let isFormValid = factoringDropdownForm.valid;\n @let pdfFormat =\n factoringDropdownForm.get(eFactoringFormControl.PDF_FORMAT)?.value;\n @let organizePdf =\n factoringDropdownForm.get(eFactoringFormControl.ORGANIZE_PDF)\n ?.value;\n <div\n class=\"factoring-dropdown-container d-flex flex-column w-180 p-4 br-3 background-black-2\"\n [formGroup]=\"factoringDropdownForm\"\n >\n <div\n class=\"factoring-dropdown-title-container d-flex align-items-center justify-content-between\"\n >\n <div\n class=\"factoring-dropdown-title d-flex align-items-center p-l-6\"\n >\n <p\n class=\"factoring-dropdown-title-text m-r-4 text-size-14 ca-font-extra-bold text-color-white\"\n >\n Export Batch\n </p>\n <div\n class=\"text-size-11 ca-font-bold min-w-16 p-x-4 p-y-1 br-60 fleet-filter-dropdown-list-badge text-center background-black text-color-white\"\n >\n {{ itemsCount }}\n </div>\n </div>\n <div\n class=\"factoring-dropdown-title-icon-container w-26 h-26 d-flex align-items-center justify-content-center c-pointer background-hover-dark-3 br-2\"\n ngbTooltip\n [mainCaTooltip]=\"eSharedString.CLOSE\"\n [tooltipBackground]=\"'#424242'\"\n [position]=\"'bottom'\"\n (click)=\"onCLoseDropdown()\"\n >\n <svg-icon\n class=\"factoring-dropdown-title-icon svg-size-18 d-flex align-items-center justify-content-center\"\n [src]=\"sharedSvgRoutes.CLOSE_ICON_NORMAL\"\n ></svg-icon>\n </div>\n </div>\n\n <div class=\"w-100 h-1 background-black m-y-4\"></div>\n <div\n class=\"factoring-dropdown-search-container p-x-2 p-t-18 padding-b-14\"\n >\n <cai-input\n [id]=\"'test'\"\n [config]=\"scheduleNoInputConfig\"\n [formControlName]=\"eFactoringFormControl.SCHEDULE_NO\"\n ></cai-input>\n </div>\n <div class=\"w-100 h-1 background-black m-t-4\"></div>\n <div\n class=\"factoring-dropdown-table-columns-container d-flex align-items-center p-t-6 p-b-2 p-l-6\"\n >\n <p\n class=\"factoring-dropdown-title-text m-r-4 text-size-11 ca-font-bold text-color-white\"\n >\n TABLE COLUMN\n </p>\n <div\n class=\"text-size-11 ca-font-semi-bold p-x-4 p-y-1 br-60 fleet-filter-dropdown-list-badge text-center background-black text-color-white\"\n >\n {{ checkedCount$ | async }} of 8\n </div>\n </div>\n\n @for (\n item of checkBoxItems;\n let itemIndex = $index;\n track itemIndex\n ) {\n <div\n class=\"factoring-dropdown-checkbox-item p-y-4 p-l-6 p-r-4 m-t-4 br-2 background-hover-black c-pointer h-26 d-flex align-items-center\"\n (click)=\"onCheckboxRowClick(item.name)\"\n >\n <app-ca-checkbox\n [formControlName]=\"item.name\"\n [label]=\"item.label\"\n [name]=\"item.name\"\n [isRegularCheckbox]=\"true\"\n [customClass]=\"'dropdown-column'\"\n [disabled]=\"item.isChecked\"\n [isLabelDisabled]=\"true\"\n [isDarkBackgroundCheckbox]=\"true\"\n ></app-ca-checkbox>\n </div>\n }\n <div class=\"w-100 h-1 background-black m-t-4\"></div>\n <div\n class=\"factoring-dropdown-table-columns-container d-flex align-items-center p-t-6 p-b-2 p-l-6\"\n >\n <p\n class=\"factoring-dropdown-title-text m-r-4 text-size-11 ca-font-bold text-color-white\"\n >\n PDF FORMAT\n </p>\n </div>\n <div\n class=\"p-l-6 p-y-4 background-hover-black c-pointer d-flex align-items-center m-y-4\"\n (click)=\"\n onRadioPdfFormatClick(eFactoringPdfFormat.SINGLE, $event)\n \"\n >\n <label class=\"radio-row d-flex align-items-center c-pointer\">\n <input\n type=\"radio\"\n class=\"factoring-radio m-r-6 c-pointer h-14 w-14 br-circle background-bw5\"\n [formControlName]=\"eFactoringFormControl.PDF_FORMAT\"\n [value]=\"eFactoringPdfFormat.SINGLE\"\n />\n <span\n class=\"text-size-14 text-color-white\"\n [ngClass]=\"\n pdfFormat === eFactoringPdfFormat.SINGLE\n ? 'ca-font-bold'\n : 'ca-font-regular'\n \"\n >Single (All Loads)</span\n >\n </label>\n </div>\n\n <div\n class=\"p-l-6 p-y-4 background-hover-black c-pointer d-flex align-items-center\"\n (click)=\"\n onRadioPdfFormatClick(eFactoringPdfFormat.MULTIPLE, $event)\n \"\n >\n <label class=\"radio-row d-flex align-items-center c-pointer\">\n <input\n type=\"radio\"\n class=\"factoring-radio m-r-6 c-pointer h-14 w-14 br-circle background-bw5\"\n [formControlName]=\"eFactoringFormControl.PDF_FORMAT\"\n [value]=\"eFactoringPdfFormat.MULTIPLE\"\n />\n <span\n class=\"text-size-14 text-color-white\"\n [ngClass]=\"\n pdfFormat === eFactoringPdfFormat.MULTIPLE\n ? 'ca-font-bold'\n : 'ca-font-regular'\n \"\n >Multiple (Per Load)</span\n >\n </label>\n </div>\n\n <div class=\"w-100 h-1 background-black m-t-4\"></div>\n <div\n class=\"factoring-dropdown-table-columns-container d-flex align-items-center p-t-6 p-b-2 p-l-6\"\n >\n <p\n class=\"factoring-dropdown-title-text m-r-4 text-size-11 ca-font-bold text-color-white\"\n >\n ORGANIZE PDF\n </p>\n </div>\n <div\n class=\"p-l-6 p-y-4 background-hover-black c-pointer d-flex align-items-center m-y-4\"\n (click)=\"\n onRadioOrganizePdfClick(\n eFactoringPdfOrganize.BY_LOAD,\n $event\n )\n \"\n >\n <label class=\"radio-row d-flex align-items-center c-pointer\">\n <input\n type=\"radio\"\n class=\"factoring-radio m-r-6 c-pointer h-14 w-14 br-circle background-bw5\"\n [formControlName]=\"eFactoringFormControl.ORGANIZE_PDF\"\n [value]=\"eFactoringPdfOrganize.BY_LOAD\"\n (click)=\"$event.stopPropagation()\"\n />\n <span\n class=\"text-size-14 text-color-white\"\n [ngClass]=\"\n organizePdf === eFactoringPdfOrganize.BY_LOAD\n ? 'ca-font-bold'\n : 'ca-font-regular'\n \"\n >By Load</span\n >\n </label>\n </div>\n\n <div\n class=\"p-l-6 p-y-4 background-hover-black c-pointer d-flex align-items-center\"\n (click)=\"\n !isByTagDisabled &&\n onRadioOrganizePdfClick(\n eFactoringPdfOrganize.BY_TAG,\n $event\n )\n \"\n >\n <label class=\"radio-row d-flex align-items-center c-pointer\">\n @if (isByTagDisabled) {\n <svg-icon\n class=\"factoring-dropdown-title-icon svg-size-14 d-flex align-items-center justify-content-center m-r-6 svg-fill-grey-2\"\n [src]=\"checkboxSvgRputes.disabledIcon\"\n ></svg-icon>\n } @else {\n <input\n type=\"radio\"\n class=\"factoring-radio m-r-6 c-pointer h-14 w-14 br-circle background-bw5\"\n [formControlName]=\"\n eFactoringFormControl.ORGANIZE_PDF\n \"\n [value]=\"eFactoringPdfOrganize.BY_TAG\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n\n <span\n class=\"text-size-14 text-color-white\"\n [ngClass]=\"{\n 'text-color-bw6-2': isByTagDisabled,\n 'text-color-white': !isByTagDisabled,\n\n 'ca-font-bold':\n organizePdf === eFactoringPdfOrganize.BY_TAG &&\n !isByTagDisabled,\n 'ca-font-regular':\n organizePdf !== eFactoringPdfOrganize.BY_TAG ||\n isByTagDisabled,\n }\"\n >By Tag</span\n >\n </label>\n </div>\n <div\n class=\"factoring-dropdown-checkbox-item p-y-4 p-l-6 p-r-4 m-t-4 br-2 background-hover-black c-pointer\"\n (click)=\"\n onCheckboxRowClick(eFactoringFormControl.INCLUDE_UNTAGGED)\n \"\n >\n <app-ca-checkbox\n #checkboxCmp\n [formControlName]=\"eFactoringFormControl.INCLUDE_UNTAGGED\"\n [label]=\"'Include Untagged'\"\n [name]=\"eFactoringFormControl.INCLUDE_UNTAGGED\"\n [isRegularCheckbox]=\"true\"\n [customClass]=\"'dropdown-column'\"\n [isLabelDisabled]=\"true\"\n [isDarkBackgroundCheckbox]=\"true\"\n ></app-ca-checkbox>\n </div>\n <div class=\"w-100 h-1 background-black m-t-6 m-b-4\"></div>\n\n @if (!isExportClicked) {\n <button\n class=\"factoring-export-btn d-flex align-items-center justify-content-center ca-font-bold br-1 text-size-11 p-2\"\n [ngClass]=\"\n isFormValid &&\n !isInProgressUpload &&\n !isInProgressExport\n ? 'background-blue-13 text-color-white'\n : 'background-dark-2 text-color-grey'\n \"\n [disabled]=\"\n !isFormValid || isInProgressUpload || isInProgressExport\n \"\n (click)=\"isExportClicked = true\"\n >\n <span>EXPORT</span>\n </button>\n } @else {\n <button\n class=\"factoring-export-btn d-flex align-items-center justify-content-center ca-font-bold br-1 text-size-11 p-2\"\n [ngClass]=\"\n isFormValid &&\n !isInProgressUpload &&\n !isInProgressExport\n ? 'background-blue-13 text-color-white'\n : 'background-dark-2 text-color-grey'\n \"\n [disabled]=\"\n !isFormValid || isInProgressUpload || isInProgressExport\n \"\n (click)=\"onExportBatch(true)\"\n >\n @if (isInProgressUpload) {\n Preparing...\n <app-ca-spinner\n [size]=\"'extra-small'\"\n [color]=\"'gray'\"\n ></app-ca-spinner>\n } @else {\n <span>UPLOAD TO RTS</span>\n }\n </button>\n\n <button\n class=\"factoring-export-btn d-flex align-items-center justify-content-center ca-font-bold br-1 text-size-11 p-2 mt-2\"\n [ngClass]=\"\n isFormValid &&\n !isInProgressExport &&\n !isInProgressUpload\n ? 'background-dark-2 text-color-blue-19'\n : 'background-dark-2 text-color-grey'\n \"\n [disabled]=\"\n !isFormValid || isInProgressExport || isInProgressUpload\n \"\n (click)=\"onExportBatch(false)\"\n >\n @if (isInProgressExport) {\n Preparing...\n <app-ca-spinner\n [size]=\"'extra-small'\"\n [color]=\"'gray'\"\n ></app-ca-spinner>\n } @else {\n <span>EXPORT TO PC</span>\n }\n </button>\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:#0b49d1;transition:all .3s ease-in-out}.factoring-radio{appearance:none;-webkit-appearance:none;outline:none;position:relative;transition:background .15s ease,border .15s ease}.factoring-radio:after{content:\"\";position:absolute;top:4px;left:4px;width:6px;height:6px;border-radius:50%;background:#fff;display:none}.factoring-radio:checked{background:#6692f1}.factoring-radio:checked:after{display:block}.factoring-export-btn{outline:none;border:none}\n"] }]
|
|
38611
|
+
], template: "<div class=\"w-26 h-26\">\n <div\n #factoringDropdownPopover=\"ngbPopover\"\n triggers=\"'manual'\"\n [ngbPopover]=\"factoringDropdown\"\n [autoClose]=\"'outside'\"\n [placement]=\"ePosition.BOTTOM_END\"\n [popoverClass]=\"'factoring-dropdown-popover'\"\n [container]=\"'body'\"\n (click)=\"\n onFactoringDropdownOpenCloseClick(factoringDropdownPopover, $event)\n \"\n >\n <div\n class=\"d-flex align-items-center justify-content-center br-2 w-26 h-26 c-pointer\"\n [ngClass]=\"\n factoringDropdownPopover.isOpen()\n ? 'background-blue-15'\n : 'background-hover-blue-16'\n \"\n ngbTooltip\n [mainCaTooltip]=\"\n 'Create factoring schedule and Export batch documents (' +\n itemsCount +\n ')'\n \"\n [tooltipBackground]=\"'#424242'\"\n [position]=\"'bottom'\"\n >\n <svg-icon\n class=\"factoring-icon d-flex align-items-center justify-content-center\"\n [ngClass]=\"\n factoringDropdownPopover.isOpen()\n ? 'svg-fill-white-4'\n : 'svg-fill-blue-9'\n \"\n [src]=\"sharedSvgRoutes.DOCUMENT_ICON\"\n ></svg-icon>\n </div>\n </div>\n\n <ng-template #factoringDropdown>\n @let isFormValid = factoringDropdownForm.valid;\n @let pdfFormat =\n factoringDropdownForm.get(eFactoringFormControl.PDF_FORMAT)?.value;\n @let organizePdf =\n factoringDropdownForm.get(eFactoringFormControl.ORGANIZE_PDF)\n ?.value;\n <div\n class=\"factoring-dropdown-container d-flex flex-column w-180 p-4 br-3 background-black-2\"\n [formGroup]=\"factoringDropdownForm\"\n >\n <div\n class=\"factoring-dropdown-title-container d-flex align-items-center justify-content-between\"\n >\n <div\n class=\"factoring-dropdown-title d-flex align-items-center p-l-6\"\n >\n <p\n class=\"factoring-dropdown-title-text m-r-4 text-size-14 ca-font-extra-bold text-color-white\"\n >\n Export Batch\n </p>\n <div\n class=\"text-size-11 ca-font-bold min-w-16 p-x-4 p-y-1 br-60 fleet-filter-dropdown-list-badge text-center background-black text-color-white\"\n >\n {{ itemsCount }}\n </div>\n </div>\n <div\n class=\"factoring-dropdown-title-icon-container w-26 h-26 d-flex align-items-center justify-content-center c-pointer background-hover-dark-3 br-2\"\n ngbTooltip\n [mainCaTooltip]=\"eSharedString.CLOSE\"\n [tooltipBackground]=\"'#424242'\"\n [position]=\"'bottom'\"\n (click)=\"onCLoseDropdown()\"\n >\n <svg-icon\n class=\"factoring-dropdown-title-icon svg-size-18 d-flex align-items-center justify-content-center\"\n [src]=\"sharedSvgRoutes.CLOSE_ICON_NORMAL\"\n ></svg-icon>\n </div>\n </div>\n\n <div class=\"w-100 h-1 background-black m-y-4\"></div>\n <div\n class=\"factoring-dropdown-search-container p-x-2 p-t-18 padding-b-14\"\n >\n <cai-input\n [id]=\"'test'\"\n [config]=\"scheduleNoInputConfig\"\n [formControlName]=\"eFactoringFormControl.SCHEDULE_NO\"\n ></cai-input>\n </div>\n <div class=\"w-100 h-1 background-black m-t-4\"></div>\n <div\n class=\"factoring-dropdown-table-columns-container d-flex align-items-center p-t-6 p-b-2 p-l-6\"\n >\n <p\n class=\"factoring-dropdown-title-text m-r-4 text-size-11 ca-font-bold text-color-white\"\n >\n TABLE COLUMN\n </p>\n <div\n class=\"text-size-11 ca-font-semi-bold p-x-4 p-y-1 br-60 fleet-filter-dropdown-list-badge text-center background-black text-color-white\"\n >\n {{ checkedCount$ | async }} of 8\n </div>\n </div>\n\n @for (\n item of checkBoxItems;\n let itemIndex = $index;\n track itemIndex\n ) {\n <div\n class=\"factoring-dropdown-checkbox-item p-y-4 p-l-6 p-r-4 m-t-4 br-2 background-hover-black c-pointer h-26 d-flex align-items-center\"\n (click)=\"onCheckboxRowClick(item.name)\"\n >\n <app-ca-checkbox\n [formControlName]=\"item.name\"\n [label]=\"item.label\"\n [name]=\"item.name\"\n [isRegularCheckbox]=\"true\"\n [customClass]=\"'dropdown-column'\"\n [disabled]=\"item.isChecked\"\n [isLabelDisabled]=\"true\"\n [isDarkBackgroundCheckbox]=\"true\"\n ></app-ca-checkbox>\n </div>\n }\n <div class=\"w-100 h-1 background-black m-t-4\"></div>\n <div\n class=\"factoring-dropdown-table-columns-container d-flex align-items-center p-t-6 p-b-2 p-l-6\"\n >\n <p\n class=\"factoring-dropdown-title-text m-r-4 text-size-11 ca-font-bold text-color-white\"\n >\n PDF FORMAT\n </p>\n </div>\n <div\n class=\"p-l-6 p-y-4 background-hover-black c-pointer d-flex align-items-center m-y-4\"\n (click)=\"\n onRadioPdfFormatClick(eFactoringPdfFormat.SINGLE, $event)\n \"\n >\n <label class=\"radio-row d-flex align-items-center c-pointer\">\n <input\n type=\"radio\"\n class=\"factoring-radio m-r-6 c-pointer h-14 w-14 br-circle background-bw5\"\n [formControlName]=\"eFactoringFormControl.PDF_FORMAT\"\n [value]=\"eFactoringPdfFormat.SINGLE\"\n />\n <span\n class=\"text-size-14 text-color-white\"\n [ngClass]=\"\n pdfFormat === eFactoringPdfFormat.SINGLE\n ? 'ca-font-bold'\n : 'ca-font-regular'\n \"\n >Single (All Loads)</span\n >\n </label>\n </div>\n\n <div\n class=\"p-l-6 p-y-4 background-hover-black c-pointer d-flex align-items-center\"\n (click)=\"\n onRadioPdfFormatClick(eFactoringPdfFormat.MULTIPLE, $event)\n \"\n >\n <label class=\"radio-row d-flex align-items-center c-pointer\">\n <input\n type=\"radio\"\n class=\"factoring-radio m-r-6 c-pointer h-14 w-14 br-circle background-bw5\"\n [formControlName]=\"eFactoringFormControl.PDF_FORMAT\"\n [value]=\"eFactoringPdfFormat.MULTIPLE\"\n />\n <span\n class=\"text-size-14 text-color-white\"\n [ngClass]=\"\n pdfFormat === eFactoringPdfFormat.MULTIPLE\n ? 'ca-font-bold'\n : 'ca-font-regular'\n \"\n >Multiple (Per Load)</span\n >\n </label>\n </div>\n\n <div class=\"w-100 h-1 background-black m-t-4\"></div>\n <div\n class=\"factoring-dropdown-table-columns-container d-flex align-items-center p-t-6 p-b-2 p-l-6\"\n >\n <p\n class=\"factoring-dropdown-title-text m-r-4 text-size-11 ca-font-bold text-color-white\"\n >\n ORGANIZE PDF\n </p>\n </div>\n <div\n class=\"p-l-6 p-y-4 background-hover-black c-pointer d-flex align-items-center m-y-4\"\n (click)=\"\n onRadioOrganizePdfClick(\n eFactoringPdfOrganize.BY_LOAD,\n $event\n )\n \"\n >\n <label class=\"radio-row d-flex align-items-center c-pointer\">\n <input\n type=\"radio\"\n class=\"factoring-radio m-r-6 c-pointer h-14 w-14 br-circle background-bw5\"\n [formControlName]=\"eFactoringFormControl.ORGANIZE_PDF\"\n [value]=\"eFactoringPdfOrganize.BY_LOAD\"\n (click)=\"$event.stopPropagation()\"\n />\n <span\n class=\"text-size-14 text-color-white\"\n [ngClass]=\"\n organizePdf === eFactoringPdfOrganize.BY_LOAD\n ? 'ca-font-bold'\n : 'ca-font-regular'\n \"\n >By Load</span\n >\n </label>\n </div>\n\n <div\n class=\"p-l-6 p-y-4 background-hover-black c-pointer d-flex align-items-center\"\n (click)=\"\n !isByTagDisabled &&\n onRadioOrganizePdfClick(\n eFactoringPdfOrganize.BY_TAG,\n $event\n )\n \"\n >\n <label class=\"radio-row d-flex align-items-center c-pointer\">\n @if (isByTagDisabled) {\n <svg-icon\n class=\"factoring-dropdown-title-icon svg-size-14 d-flex align-items-center justify-content-center m-r-6 svg-fill-grey-2\"\n [src]=\"checkboxSvgRputes.disabledIcon\"\n ></svg-icon>\n } @else {\n <input\n type=\"radio\"\n class=\"factoring-radio m-r-6 c-pointer h-14 w-14 br-circle background-bw5\"\n [formControlName]=\"\n eFactoringFormControl.ORGANIZE_PDF\n \"\n [value]=\"eFactoringPdfOrganize.BY_TAG\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n\n <span\n class=\"text-size-14 text-color-white\"\n [ngClass]=\"{\n 'text-color-bw6-2': isByTagDisabled,\n 'text-color-white': !isByTagDisabled,\n\n 'ca-font-bold':\n organizePdf === eFactoringPdfOrganize.BY_TAG &&\n !isByTagDisabled,\n 'ca-font-regular':\n organizePdf !== eFactoringPdfOrganize.BY_TAG ||\n isByTagDisabled,\n }\"\n >By Tag</span\n >\n </label>\n </div>\n <div\n class=\"factoring-dropdown-checkbox-item p-y-4 p-l-6 p-r-4 m-t-4 br-2 background-hover-black c-pointer\"\n (click)=\"\n onCheckboxRowClick(eFactoringFormControl.INCLUDE_UNTAGGED)\n \"\n >\n <app-ca-checkbox\n #checkboxCmp\n [formControlName]=\"eFactoringFormControl.INCLUDE_UNTAGGED\"\n [label]=\"'Include Untagged'\"\n [name]=\"eFactoringFormControl.INCLUDE_UNTAGGED\"\n [isRegularCheckbox]=\"true\"\n [customClass]=\"'dropdown-column'\"\n [isLabelDisabled]=\"true\"\n [isDarkBackgroundCheckbox]=\"true\"\n ></app-ca-checkbox>\n </div>\n <div class=\"w-100 h-1 background-black m-t-6 m-b-4\"></div>\n\n @if (!isExportClicked) {\n <button\n class=\"factoring-export-btn d-flex align-items-center justify-content-center ca-font-bold br-1 text-size-11 p-2\"\n [ngClass]=\"\n isFormValid &&\n !isInProgressUpload &&\n !isInProgressExport\n ? 'background-blue-13 text-color-white'\n : 'background-dark-2 text-color-grey'\n \"\n [disabled]=\"\n !isFormValid || isInProgressUpload || isInProgressExport\n \"\n (click)=\"onExportClick($event)\"\n >\n <span>EXPORT</span>\n </button>\n } @else {\n <button\n class=\"factoring-export-btn d-flex align-items-center justify-content-center ca-font-bold br-1 text-size-11 p-2\"\n [ngClass]=\"\n isFormValid &&\n !isInProgressUpload &&\n !isInProgressExport\n ? 'background-blue-13 text-color-white'\n : 'background-dark-2 text-color-grey'\n \"\n [disabled]=\"\n !isFormValid || isInProgressUpload || isInProgressExport\n \"\n (click)=\"onExportBatch(true, $event)\"\n >\n @if (isInProgressUpload) {\n Preparing...\n <app-ca-spinner\n [size]=\"'extra-small'\"\n [color]=\"'gray'\"\n ></app-ca-spinner>\n } @else {\n <span>UPLOAD TO RTS</span>\n }\n </button>\n\n <button\n class=\"factoring-export-btn d-flex align-items-center justify-content-center ca-font-bold br-1 text-size-11 p-2 mt-2\"\n [ngClass]=\"\n isFormValid &&\n !isInProgressExport &&\n !isInProgressUpload\n ? 'background-dark-2 text-color-blue-19'\n : 'background-dark-2 text-color-grey'\n \"\n [disabled]=\"\n !isFormValid || isInProgressExport || isInProgressUpload\n \"\n (click)=\"onExportBatch(false, $event)\"\n >\n @if (isInProgressExport) {\n Preparing...\n <app-ca-spinner\n [size]=\"'extra-small'\"\n [color]=\"'gray'\"\n ></app-ca-spinner>\n } @else {\n <span>EXPORT TO PC</span>\n }\n </button>\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:#0b49d1;transition:all .3s ease-in-out}.factoring-radio{appearance:none;-webkit-appearance:none;outline:none;position:relative;transition:background .15s ease,border .15s ease}.factoring-radio:after{content:\"\";position:absolute;top:4px;left:4px;width:6px;height:6px;border-radius:50%;background:#fff;display:none}.factoring-radio:checked{background:#6692f1}.factoring-radio:checked:after{display:block}.factoring-export-btn{outline:none;border:none}\n"] }]
|
|
38606
38612
|
}], ctorParameters: () => [{ type: i1$2.UntypedFormBuilder }], propDecorators: { itemsCount: [{
|
|
38607
38613
|
type: Input
|
|
38608
38614
|
}], isExportFinished: [{
|
|
@@ -38649,7 +38655,7 @@ class CaContactsCardComponent {
|
|
|
38649
38655
|
this.onDeleteClick.emit(contactId);
|
|
38650
38656
|
}
|
|
38651
38657
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CaContactsCardComponent, deps: [{ token: i1$4.Clipboard }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
38652
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaContactsCardComponent, isStandalone: true, selector: "app-ca-contacts-card", inputs: { departmentContacts: "departmentContacts", searchText: "searchText" }, outputs: { onEditClick: "onEditClick", onDeleteClick: "onDeleteClick" }, ngImport: i0, template: "<div class=\"background-white br-3 overflow-hidden\">\n @for (\n department of departmentContacts;\n let index = $index;\n
|
|
38658
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaContactsCardComponent, isStandalone: true, selector: "app-ca-contacts-card", inputs: { departmentContacts: "departmentContacts", searchText: "searchText" }, outputs: { onEditClick: "onEditClick", onDeleteClick: "onDeleteClick" }, ngImport: i0, template: "<div class=\"background-white br-3 overflow-hidden border p-x-6\">\n @for (\n department of departmentContacts;\n let index = $index;\n track department\n ) {\n <div\n [ngStyle]=\"{ 'max-width': '312px' }\"\n >\n @if (index > 0) {\n <div\n class=\"h-1 background-bw-9 br-1 m-x-2\"\n ></div>\n }\n\n <app-ca-custom-card\n customDividerClass=\"divider--dark divider--small\"\n customNameClass=\"p-l-6\"\n headerRightSideClass=\"p-r-6\"\n [cardName]=\"department.name\"\n [hasDivider]=\"false\"\n [counter]=\"department.contacts.length\"\n [isCardOpen]=\"!index\"\n [animationMarginParams]=\"{\n marginTop: '0',\n marginBottom: '0',\n }\"\n >\n <div origin>\n @for (\n contact of department.contacts;\n let i = $index;\n let last = $last;\n track contact.id\n ) {\n <ng-container\n *ngTemplateOutlet=\"\n contactItemTemplate;\n context: {\n contact,\n index: i,\n isLast: last\n }\n \"\n ></ng-container>\n }\n </div>\n </app-ca-custom-card>\n </div>\n }\n</div>\n\n<ng-template\n #contactItemTemplate\n let-contact=\"contact\"\n let-index=\"index\"\n let-isLast=\"isLast\"\n>\n <div\n class=\"p-x-6 p-y-4 background-hover-bw2 br-2\"\n [ngClass]=\"{\n 'm-b-8': isLast,\n 'm-b-4': !isLast\n }\"\n (mouseenter)=\"onHoverContact(contact.id)\"\n (mouseleave)=\"onHoverContact()\"\n >\n <div\n class=\"d-flex align-items-center justify-content-between m-b-4\"\n >\n <div class=\"d-flex align-items-center text-truncate\">\n <div\n class=\"text-size-14 text-color-black-2 ca-font-medium text-truncate\"\n [innerHTML]=\"contact.fullName | caHighlight: [{ index: 45632, text: searchText }]\"\n ></div>\n </div>\n\n @if (hoveredContactId === contact.id) {\n <div class=\"d-flex align-items-center\">\n <div\n class=\"w-18 h-18 d-flex align-items-center justify-content-center background-hover-dark-2 svg-hover-black br-1 c-pointer m-r-4\"\n ngbTooltip\n [mainCaTooltip]=\"eGeneralActions.EDIT\"\n [tooltipMarginTop]=\"'0px'\"\n [tooltipBackground]=\"eColor.BLACK\"\n [position]=\"ePosition.TOP\"\n (click)=\"onEditEvent(contact.id)\"\n >\n <svg-icon\n class=\"d-flex svg-size-14 svg-fill-muted\"\n [src]=\"svgRoutes.EDIT_ICON\"\n ></svg-icon>\n </div>\n\n <div\n class=\"w-18 h-18 d-flex align-items-center justify-content-center background-hover-red-15 svg-hover-red-14 br-1 c-pointer\"\n ngbTooltip\n [mainCaTooltip]=\"eGeneralActions.DELETE\"\n [tooltipMarginTop]=\"'0px'\"\n [tooltipBackground]=\"eColor.RED\"\n [position]=\"ePosition.TOP\"\n (click)=\"onDeleteEvent(contact.id)\"\n >\n <svg-icon\n class=\"d-flex svg-size-14 svg-fill-muted\"\n [src]=\"svgRoutes.DELETE_ICON\"\n ></svg-icon>\n </div>\n </div>\n }\n </div>\n\n <ng-container\n *ngTemplateOutlet=\"\n contactSvgTextTemplate;\n context: {\n svg: svgRoutes.PHONE_ICON,\n text: contact.phone,\n additionalText: contact.phoneExt,\n contactId: contact.id,\n index: 0,\n }\n \"\n ></ng-container>\n\n @if (contact.email) {\n <ng-container\n *ngTemplateOutlet=\"\n contactSvgTextTemplate;\n context: {\n svg: svgRoutes.EMAIL_ICON,\n text: contact.email,\n contactId: contact.id,\n index: 1,\n }\n \"\n ></ng-container>\n }\n </div>\n</ng-template>\n\n<ng-template\n #contactSvgTextTemplate\n let-svg=\"svg\"\n let-text=\"text\"\n let-additionalText=\"additionalText\"\n let-contactId=\"contactId\"\n let-index=\"index\"\n>\n <div \n class=\"d-flex align-items-center\"\n [ngClass]=\"{ 'm-b-4': index !== 1 }\"\n (mouseenter)=\"onHoverText(index)\"\n (mouseleave)=\"onHoverText()\"\n >\n <div class=\"m-r-4\">\n <svg-icon\n class=\"d-flex svg-size-18 svg-fill-muted\"\n [src]=\"svg\"\n ></svg-icon>\n </div>\n\n <div class=\"d-flex align-items-center overflow-hidden\">\n <div\n class=\"text-size-14 text-color-black-2 text-truncate\"\n [innerHTML]=\"text | caHighlight: [{ index: 45632, text: searchText }]\"\n ></div>\n\n @if (additionalText) {\n <div\n class=\"text-size-14 text-color-muted text-nowrap m-l-4\"\n >\n {{ additionalText }}\n </div>\n }\n </div>\n\n @if (hoveredContactId === contactId && hoveredTextIndex === index) {\n @let isCopied = copiedIndex === index;\n @let copyText =\n text +\n (additionalText\n ? eStringPlaceholder.WHITESPACE + additionalText\n : eStringPlaceholder.EMPTY);\n\n <div\n class=\"m-l-4\"\n ngbTooltip\n [mainCaTooltip]=\"\n isCopied ? eGeneralActions.COPIED : eGeneralActions.COPY\n \"\n [tooltipMarginTop]=\"'0px'\"\n [tooltipBackground]=\"isCopied ? eColor.BLUE : eColor.BLACK\"\n [position]=\"ePosition.BOTTOM\"\n (click)=\"copyToClipboard(copyText, index)\"\n >\n <svg-icon\n class=\"d-flex svg-size-12 c-pointer\"\n [ngClass]=\"\n isCopied\n ? 'svg-fill-blue-9'\n : 'svg-fill-muted svg-hover-black'\n \"\n [src]=\"svgRoutes.COPY_ICON\"\n ></svg-icon>\n </div>\n }\n </div>\n</ng-template>", styles: [""], 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: 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:
|
|
38653
38659
|
// Components
|
|
38654
38660
|
CaCustomCardComponent, selector: "app-ca-custom-card", inputs: ["headerLeftSideTemplate", "headerRightSideTemplate", "headerLeftSideContext", "headerRightSideClass", "cardHeight", "isAnimationsDisabled", "cardName", "cardSubText", "hasArrow", "hasPlusIcon", "isPlusIconDisabled", "plusIconTooltip", "isHeaderSvgEnabled", "counter", "hasDivider", "hasBodyData", "hasScrollBody", "isStayOpen", "isDisabledCard", "isHeaderHidden", "isTwoRowTitle", "isAlwaysOpen", "isShowArrowOnHover", "animationMarginParams", "isCardOpen", "customClass", "customNameClass", "customDividerClass"], outputs: ["onActionEvent", "onOpenCard"] }, { kind: "component", type: CaAppTooltipV2Component, selector: "mainCaTooltip, [mainCaTooltip]", inputs: ["mainCaTooltip", "position", "tooltipBackground", "tooltipColor", "tooltipTextAlign", "tooltipMarginTop", "tooltipMarginRight", "disableTooltip", "openTooltipDelay"] }, { kind: "pipe", type:
|
|
38655
38661
|
//Pipes
|
|
@@ -38666,7 +38672,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
38666
38672
|
CaAppTooltipV2Component,
|
|
38667
38673
|
//Pipes
|
|
38668
38674
|
HighlightSearchPipe,
|
|
38669
|
-
], template: "<div class=\"background-white br-3 overflow-hidden\">\n @for (\n department of departmentContacts;\n let index = $index;\n
|
|
38675
|
+
], template: "<div class=\"background-white br-3 overflow-hidden border p-x-6\">\n @for (\n department of departmentContacts;\n let index = $index;\n track department\n ) {\n <div\n [ngStyle]=\"{ 'max-width': '312px' }\"\n >\n @if (index > 0) {\n <div\n class=\"h-1 background-bw-9 br-1 m-x-2\"\n ></div>\n }\n\n <app-ca-custom-card\n customDividerClass=\"divider--dark divider--small\"\n customNameClass=\"p-l-6\"\n headerRightSideClass=\"p-r-6\"\n [cardName]=\"department.name\"\n [hasDivider]=\"false\"\n [counter]=\"department.contacts.length\"\n [isCardOpen]=\"!index\"\n [animationMarginParams]=\"{\n marginTop: '0',\n marginBottom: '0',\n }\"\n >\n <div origin>\n @for (\n contact of department.contacts;\n let i = $index;\n let last = $last;\n track contact.id\n ) {\n <ng-container\n *ngTemplateOutlet=\"\n contactItemTemplate;\n context: {\n contact,\n index: i,\n isLast: last\n }\n \"\n ></ng-container>\n }\n </div>\n </app-ca-custom-card>\n </div>\n }\n</div>\n\n<ng-template\n #contactItemTemplate\n let-contact=\"contact\"\n let-index=\"index\"\n let-isLast=\"isLast\"\n>\n <div\n class=\"p-x-6 p-y-4 background-hover-bw2 br-2\"\n [ngClass]=\"{\n 'm-b-8': isLast,\n 'm-b-4': !isLast\n }\"\n (mouseenter)=\"onHoverContact(contact.id)\"\n (mouseleave)=\"onHoverContact()\"\n >\n <div\n class=\"d-flex align-items-center justify-content-between m-b-4\"\n >\n <div class=\"d-flex align-items-center text-truncate\">\n <div\n class=\"text-size-14 text-color-black-2 ca-font-medium text-truncate\"\n [innerHTML]=\"contact.fullName | caHighlight: [{ index: 45632, text: searchText }]\"\n ></div>\n </div>\n\n @if (hoveredContactId === contact.id) {\n <div class=\"d-flex align-items-center\">\n <div\n class=\"w-18 h-18 d-flex align-items-center justify-content-center background-hover-dark-2 svg-hover-black br-1 c-pointer m-r-4\"\n ngbTooltip\n [mainCaTooltip]=\"eGeneralActions.EDIT\"\n [tooltipMarginTop]=\"'0px'\"\n [tooltipBackground]=\"eColor.BLACK\"\n [position]=\"ePosition.TOP\"\n (click)=\"onEditEvent(contact.id)\"\n >\n <svg-icon\n class=\"d-flex svg-size-14 svg-fill-muted\"\n [src]=\"svgRoutes.EDIT_ICON\"\n ></svg-icon>\n </div>\n\n <div\n class=\"w-18 h-18 d-flex align-items-center justify-content-center background-hover-red-15 svg-hover-red-14 br-1 c-pointer\"\n ngbTooltip\n [mainCaTooltip]=\"eGeneralActions.DELETE\"\n [tooltipMarginTop]=\"'0px'\"\n [tooltipBackground]=\"eColor.RED\"\n [position]=\"ePosition.TOP\"\n (click)=\"onDeleteEvent(contact.id)\"\n >\n <svg-icon\n class=\"d-flex svg-size-14 svg-fill-muted\"\n [src]=\"svgRoutes.DELETE_ICON\"\n ></svg-icon>\n </div>\n </div>\n }\n </div>\n\n <ng-container\n *ngTemplateOutlet=\"\n contactSvgTextTemplate;\n context: {\n svg: svgRoutes.PHONE_ICON,\n text: contact.phone,\n additionalText: contact.phoneExt,\n contactId: contact.id,\n index: 0,\n }\n \"\n ></ng-container>\n\n @if (contact.email) {\n <ng-container\n *ngTemplateOutlet=\"\n contactSvgTextTemplate;\n context: {\n svg: svgRoutes.EMAIL_ICON,\n text: contact.email,\n contactId: contact.id,\n index: 1,\n }\n \"\n ></ng-container>\n }\n </div>\n</ng-template>\n\n<ng-template\n #contactSvgTextTemplate\n let-svg=\"svg\"\n let-text=\"text\"\n let-additionalText=\"additionalText\"\n let-contactId=\"contactId\"\n let-index=\"index\"\n>\n <div \n class=\"d-flex align-items-center\"\n [ngClass]=\"{ 'm-b-4': index !== 1 }\"\n (mouseenter)=\"onHoverText(index)\"\n (mouseleave)=\"onHoverText()\"\n >\n <div class=\"m-r-4\">\n <svg-icon\n class=\"d-flex svg-size-18 svg-fill-muted\"\n [src]=\"svg\"\n ></svg-icon>\n </div>\n\n <div class=\"d-flex align-items-center overflow-hidden\">\n <div\n class=\"text-size-14 text-color-black-2 text-truncate\"\n [innerHTML]=\"text | caHighlight: [{ index: 45632, text: searchText }]\"\n ></div>\n\n @if (additionalText) {\n <div\n class=\"text-size-14 text-color-muted text-nowrap m-l-4\"\n >\n {{ additionalText }}\n </div>\n }\n </div>\n\n @if (hoveredContactId === contactId && hoveredTextIndex === index) {\n @let isCopied = copiedIndex === index;\n @let copyText =\n text +\n (additionalText\n ? eStringPlaceholder.WHITESPACE + additionalText\n : eStringPlaceholder.EMPTY);\n\n <div\n class=\"m-l-4\"\n ngbTooltip\n [mainCaTooltip]=\"\n isCopied ? eGeneralActions.COPIED : eGeneralActions.COPY\n \"\n [tooltipMarginTop]=\"'0px'\"\n [tooltipBackground]=\"isCopied ? eColor.BLUE : eColor.BLACK\"\n [position]=\"ePosition.BOTTOM\"\n (click)=\"copyToClipboard(copyText, index)\"\n >\n <svg-icon\n class=\"d-flex svg-size-12 c-pointer\"\n [ngClass]=\"\n isCopied\n ? 'svg-fill-blue-9'\n : 'svg-fill-muted svg-hover-black'\n \"\n [src]=\"svgRoutes.COPY_ICON\"\n ></svg-icon>\n </div>\n }\n </div>\n</ng-template>" }]
|
|
38670
38676
|
}], ctorParameters: () => [{ type: i1$4.Clipboard }], propDecorators: { departmentContacts: [{
|
|
38671
38677
|
type: Input
|
|
38672
38678
|
}], searchText: [{
|
|
@@ -38689,7 +38695,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
38689
38695
|
class ToolbarTabsClassPipe {
|
|
38690
38696
|
transform({ isLargeLayout, isLargeAndActive, isLargeAndInActive, isSmallActive, isSmallAndInActive, isDisabled, }) {
|
|
38691
38697
|
const classMap = {
|
|
38692
|
-
'
|
|
38698
|
+
'd-flex align-items-center gap-1 p-8 text-size-16 line-height-20': isLargeLayout,
|
|
38693
38699
|
'text-color-white h-36': isLargeAndActive,
|
|
38694
38700
|
'text-color-bw6-2': isLargeAndInActive,
|
|
38695
38701
|
'text-size-14 p-x-8 p-y-4': !isLargeLayout,
|
|
@@ -38720,115 +38726,92 @@ var eToolbarVariant;
|
|
|
38720
38726
|
|
|
38721
38727
|
class CaToolbarTabSwitchComponent {
|
|
38722
38728
|
set selectedTab(value) {
|
|
38723
|
-
const previousTab = this._selectedTab;
|
|
38724
38729
|
this._selectedTab = value;
|
|
38725
|
-
if (this.
|
|
38726
|
-
this.
|
|
38730
|
+
if (this.indicator && this.tabItems) {
|
|
38731
|
+
this.animateIndicatorTransition();
|
|
38727
38732
|
}
|
|
38728
38733
|
}
|
|
38729
|
-
|
|
38734
|
+
set data(value) {
|
|
38735
|
+
this._data = value;
|
|
38736
|
+
if (this.indicator && this.tabItems) {
|
|
38737
|
+
requestAnimationFrame(() => this.updateIndicatorPosition());
|
|
38738
|
+
}
|
|
38739
|
+
}
|
|
38740
|
+
get data() {
|
|
38741
|
+
return this._data;
|
|
38742
|
+
}
|
|
38743
|
+
get selectedTab() {
|
|
38744
|
+
return this._selectedTab;
|
|
38745
|
+
}
|
|
38746
|
+
constructor(renderer) {
|
|
38730
38747
|
this.renderer = renderer;
|
|
38731
|
-
this.cdRef = cdRef;
|
|
38732
38748
|
this.variant = eToolbarVariant.Large;
|
|
38733
38749
|
this.tabSelected = new EventEmitter();
|
|
38734
|
-
this.selectedItem = null;
|
|
38735
38750
|
this.isAnimating = false;
|
|
38736
38751
|
this.toolbarVariant = eToolbarVariant;
|
|
38737
38752
|
}
|
|
38738
|
-
get selectedTab() {
|
|
38739
|
-
return this._selectedTab;
|
|
38740
|
-
}
|
|
38741
38753
|
ngAfterViewInit() {
|
|
38742
|
-
|
|
38743
|
-
|
|
38744
|
-
setSwitchActive(data) {
|
|
38745
|
-
const indexSwitch = data?.findIndex((item) => this.selectedTab === item.name ||
|
|
38746
|
-
this.selectedTab === item.title);
|
|
38747
|
-
if (indexSwitch === -1)
|
|
38748
|
-
return;
|
|
38749
|
-
const tabSwitchHolder = this.tabSwitchHolderRef?.nativeElement;
|
|
38750
|
-
if (!tabSwitchHolder)
|
|
38751
|
-
return;
|
|
38752
|
-
const tabSwitchItem = tabSwitchHolder.children[indexSwitch];
|
|
38753
|
-
if (!tabSwitchItem)
|
|
38754
|
-
return;
|
|
38755
|
-
if (this.selectedItem && this.selectedItem !== tabSwitchItem) {
|
|
38756
|
-
this.isAnimating = true;
|
|
38757
|
-
this.animateTabSwitch(tabSwitchItem);
|
|
38758
|
-
}
|
|
38759
|
-
else {
|
|
38760
|
-
this.selectedItem = tabSwitchItem;
|
|
38761
|
-
this.renderer.addClass(tabSwitchItem, 'active');
|
|
38762
|
-
const indicator = tabSwitchItem.children[0];
|
|
38763
|
-
this.renderer.removeClass(indicator, 'opacity-0');
|
|
38764
|
-
this.renderer.addClass(indicator, 'opacity-100');
|
|
38765
|
-
this.cdRef.detectChanges();
|
|
38754
|
+
if (this._selectedTab) {
|
|
38755
|
+
requestAnimationFrame(() => this.updateIndicatorPosition());
|
|
38766
38756
|
}
|
|
38767
38757
|
}
|
|
38768
|
-
|
|
38769
|
-
|
|
38770
|
-
if (!oldSelectedItem || !clickedElement)
|
|
38758
|
+
updateIndicatorPosition() {
|
|
38759
|
+
if (!this.indicator || !this.tabItems || !this._selectedTab) {
|
|
38771
38760
|
return;
|
|
38772
|
-
|
|
38773
|
-
const
|
|
38774
|
-
|
|
38775
|
-
|
|
38761
|
+
}
|
|
38762
|
+
const isLargeLayout = this.variant === this.toolbarVariant.Large;
|
|
38763
|
+
const tabItemsArray = this.tabItems.toArray();
|
|
38764
|
+
tabItemsArray.forEach((tabItem) => {
|
|
38765
|
+
this.renderer.removeClass(tabItem.nativeElement, 'active');
|
|
38766
|
+
});
|
|
38767
|
+
const activeTabIndex = this.data?.findIndex((item) => {
|
|
38768
|
+
return isLargeLayout
|
|
38769
|
+
? item.title === this._selectedTab
|
|
38770
|
+
: item.name === this._selectedTab;
|
|
38771
|
+
});
|
|
38772
|
+
if (activeTabIndex === undefined) {
|
|
38776
38773
|
return;
|
|
38777
|
-
const oldPosition = oldSelectedItem.getBoundingClientRect().left;
|
|
38778
|
-
const newPosition = newSelectedItem.getBoundingClientRect().left;
|
|
38779
|
-
const translateX = newPosition - oldPosition;
|
|
38780
|
-
const oldHeight = oldSelectedItem.getBoundingClientRect().height;
|
|
38781
|
-
this.renderer.setStyle(animatedIndicator, 'width', getComputedStyle(newSelectedItem).width);
|
|
38782
|
-
this.renderer.setStyle(animatedIndicator, 'height', `${oldHeight}px`);
|
|
38783
|
-
if (this.variant === eToolbarVariant.Large) {
|
|
38784
|
-
this.renderer.setStyle(animatedIndicator, 'top', '-1px', 1);
|
|
38785
38774
|
}
|
|
38786
|
-
|
|
38787
|
-
|
|
38788
|
-
if (tabSwitchHolder) {
|
|
38789
|
-
this.renderer.setStyle(tabSwitchHolder, 'pointerEvents', 'none');
|
|
38775
|
+
if (activeTabIndex === -1 || !tabItemsArray[activeTabIndex]) {
|
|
38776
|
+
return;
|
|
38790
38777
|
}
|
|
38791
|
-
|
|
38792
|
-
|
|
38793
|
-
|
|
38794
|
-
|
|
38795
|
-
this.
|
|
38778
|
+
const activeTabElement = tabItemsArray[activeTabIndex].nativeElement;
|
|
38779
|
+
const left = activeTabElement.offsetLeft;
|
|
38780
|
+
const width = activeTabElement.offsetWidth;
|
|
38781
|
+
this.renderer.addClass(activeTabElement, 'active');
|
|
38782
|
+
this.renderer.setStyle(this.indicator.nativeElement, 'left', `${left}px`);
|
|
38783
|
+
this.renderer.setStyle(this.indicator.nativeElement, 'width', `${width}px`);
|
|
38796
38784
|
}
|
|
38797
|
-
|
|
38798
|
-
this.renderer.
|
|
38799
|
-
|
|
38800
|
-
|
|
38801
|
-
|
|
38802
|
-
|
|
38803
|
-
|
|
38804
|
-
|
|
38805
|
-
|
|
38806
|
-
|
|
38807
|
-
|
|
38808
|
-
this.renderer.removeClass(animatedIndicator, 'opacity-100');
|
|
38809
|
-
this.renderer.addClass(animatedIndicator, 'opacity-0');
|
|
38810
|
-
const newIndicator = newSelectedItem.children[0];
|
|
38811
|
-
this.renderer.addClass(newIndicator, 'opacity-100');
|
|
38812
|
-
this.renderer.removeClass(newIndicator, 'opacity-0');
|
|
38813
|
-
this.isAnimating = false;
|
|
38814
|
-
this.cdRef.detectChanges();
|
|
38785
|
+
animateIndicatorTransition() {
|
|
38786
|
+
this.renderer.addClass(this.indicator.nativeElement, 'transition-left-width');
|
|
38787
|
+
requestAnimationFrame(() => {
|
|
38788
|
+
this.updateIndicatorPosition();
|
|
38789
|
+
const indicatorElement = this.indicator.nativeElement;
|
|
38790
|
+
const handleTransitionEnd = () => {
|
|
38791
|
+
this.renderer.removeClass(indicatorElement, 'transition-left-width');
|
|
38792
|
+
indicatorElement.removeEventListener('transitionend', handleTransitionEnd);
|
|
38793
|
+
};
|
|
38794
|
+
indicatorElement.addEventListener('transitionend', handleTransitionEnd);
|
|
38795
|
+
});
|
|
38815
38796
|
}
|
|
38816
38797
|
onTabClick(event, tabName) {
|
|
38817
38798
|
event.stopPropagation();
|
|
38818
38799
|
if (tabName !== this.selectedTab) {
|
|
38819
38800
|
this.tabSelected.emit(tabName);
|
|
38820
38801
|
}
|
|
38821
|
-
this.selectedTab = tabName;
|
|
38822
38802
|
}
|
|
38823
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CaToolbarTabSwitchComponent, deps: [{ token: i0.Renderer2 }
|
|
38824
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaToolbarTabSwitchComponent, isStandalone: true, selector: "ca-toolbar-tab-switch", inputs: { selectedTab: "selectedTab", data: "data", variant: "variant" }, outputs: { tabSelected: "tabSelected" }, viewQueries: [{ propertyName: "tabSwitchHolderRef", first: true, predicate: ["tabSwitchHolder"], descendants: true }], ngImport: i0, template: "@let isLargeLayout = variant === toolbarVariant.Large;\n\n<div #tabSwitchHolder class=\"d-flex gap-1 align-items-center\">\n @for (item of data; let indx = $index; track indx) {\n @let name = item.name;\n @let title = item.title;\n @let isSmallActive = !isLargeLayout && selectedTab === name;\n @let isSmallAndInActive = !isLargeLayout && selectedTab !== name;\n @let isLargeAndActive = isLargeLayout && selectedTab === title;\n @let isLargeAndInActive = isLargeLayout && selectedTab !== title;\n @let isDisabled = item.isDisabled;\n @let tabClasses =\n {\n isLargeLayout,\n isLargeAndActive,\n isLargeAndInActive,\n isSmallActive,\n isSmallAndInActive,\n isDisabled: isDisabled ?? false,\n } | toolbarTabsClassPipe;\n\n <div\n class=\"tab-switch-items-holder c-pointer ca-font-extra-bold br-3 d-flex align-items-center position-relative background-bw10\"\n [ngClass]=\"tabClasses\"\n (click)=\"onTabClick($event, isLargeLayout ? title! : name!)\"\n >\n <div\n class=\"transition-width-transform position-absolute top-0 bottom-0 start-0 end-0 z-index-0 br-3 w-100p opacity-0\"\n [ngClass]=\"\n isLargeLayout ? 'background-black' : 'background-bw2'\n \"\n ></div>\n <div\n class=\"title z-index-1 transition-duration-250\"\n [ngClass]=\"\n isLargeLayout\n ? 'title-large line-height-100'\n : 'title-small'\n \"\n [attr.data-test-id]=\"\n isLargeLayout\n ? 'table-toolbar-main-tab'\n : 'table-toolbar-view-tab'\n \"\n >\n {{ isLargeLayout ? title : name }}\n </div>\n\n @if (isLargeLayout) {\n @let counterText = item.length;\n @let counterClass =\n selectedTab === title\n ? 'background-white text-color-black'\n : 'background-muted text-color-white';\n @let widthClass =\n counterText && counterText > 99\n ? 'w-20'\n : counterText && counterText > 9\n ? 'w-14'\n : 'w-8';\n\n <div\n class=\"counter z-index-1 transition-duration-250 m-l-4 d-flex align-items-center justify-content-center font-size-11 line-height-18 h-18 min-w-18 br-50 text-center p-x-5\"\n [ngClass]=\"[counterClass]\"\n >\n <div class=\"line-height-18\" [ngClass]=\"widthClass\">\n {{ counterText }}\n </div>\n </div>\n }\n </div>\n }\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:#0b49d1;transition:all .3s ease-in-out}.tab-switch-items-holder:hover:not(.active) .title-large{color:#424242!important}.tab-switch-items-holder:hover:not(.active) .title-small{color:#6c6c6c!important}.tab-switch-items-holder:hover:not(.active) .counter{background-color:#6c6c6c!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: ToolbarTabsClassPipe, name: "toolbarTabsClassPipe" }] }); }
|
|
38803
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CaToolbarTabSwitchComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
38804
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaToolbarTabSwitchComponent, isStandalone: true, selector: "ca-toolbar-tab-switch", inputs: { selectedTab: "selectedTab", data: "data", variant: "variant" }, outputs: { tabSelected: "tabSelected" }, viewQueries: [{ propertyName: "indicator", first: true, predicate: ["tabSwitchIndicator"], descendants: true }, { propertyName: "tabItems", predicate: ["tabSwitchItems"], descendants: true }], ngImport: i0, template: "@let isLargeLayout = variant === toolbarVariant.Large;\n\n<div\n #tabSwitchHolder\n class=\"d-flex gap-1 align-items-center position-relative prevent-text-selection\"\n>\n <div\n #tabSwitchIndicator\n class=\"br-3 position-absolute h-100p\"\n [ngClass]=\"isLargeLayout ? 'background-black' : 'background-bw2'\"\n ></div>\n\n @for (item of data; let index = $index; track index) {\n @let name = item.name;\n @let title = item.title;\n @let isSmallActive = !isLargeLayout && selectedTab === name;\n @let isSmallAndInActive = !isLargeLayout && selectedTab !== name;\n @let isLargeAndActive = isLargeLayout && selectedTab === title;\n @let isLargeAndInActive = isLargeLayout && selectedTab !== title;\n @let isDisabled = item.isDisabled;\n @let tabClasses =\n {\n isLargeLayout,\n isLargeAndActive,\n isLargeAndInActive,\n isSmallActive,\n isSmallAndInActive,\n isDisabled: isDisabled ?? false,\n } | toolbarTabsClassPipe;\n\n <div\n #tabSwitchItems\n class=\"tab-switch-items-holder c-pointer ca-font-extra-bold z-index-1 {{\n tabClasses\n }}\"\n (click)=\"onTabClick($event, isLargeLayout ? title! : name!)\"\n >\n <div\n class=\"title transition-color\"\n [ngClass]=\"\n isLargeLayout\n ? 'title-large line-height-100'\n : 'title-small'\n \"\n [attr.data-test-id]=\"\n isLargeLayout\n ? 'table-toolbar-main-tab'\n : 'table-toolbar-view-tab'\n \"\n >\n {{ isLargeLayout ? title : name }}\n </div>\n\n @if (isLargeLayout) {\n @let counterText = item.length;\n @let counterClass =\n selectedTab === title\n ? 'background-white text-color-black'\n : 'background-muted text-color-white';\n @let widthClass =\n counterText && counterText > 99\n ? 'w-20'\n : counterText && counterText > 9\n ? 'w-14'\n : 'w-8';\n\n <div\n class=\"counter transition-background-color d-flex align-items-center justify-content-center h-18 min-w-18 br-50 text-center p-x-5\"\n [ngClass]=\"counterClass\"\n >\n <div\n class=\"font-size-11 line-height-18\"\n [ngClass]=\"widthClass\"\n >\n {{ counterText }}\n </div>\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}}.tab-switch-items-holder:hover:not(.active) .title-large{color:#424242!important}.tab-switch-items-holder:hover:not(.active) .title-small{color:#6c6c6c!important}.tab-switch-items-holder:hover:not(.active) .counter{background-color:#6c6c6c!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: ToolbarTabsClassPipe, name: "toolbarTabsClassPipe" }] }); }
|
|
38825
38805
|
}
|
|
38826
38806
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CaToolbarTabSwitchComponent, decorators: [{
|
|
38827
38807
|
type: Component,
|
|
38828
|
-
args: [{ selector: 'ca-toolbar-tab-switch', imports: [NgClass, ToolbarTabsClassPipe], template: "@let isLargeLayout = variant === toolbarVariant.Large;\n\n<div #tabSwitchHolder class=\"d-flex gap-1 align-items-center\">\n @for (item of data; let indx = $index; track indx) {\n @let name = item.name;\n @let title = item.title;\n @let isSmallActive = !isLargeLayout && selectedTab === name;\n @let isSmallAndInActive = !isLargeLayout && selectedTab !== name;\n @let isLargeAndActive = isLargeLayout && selectedTab === title;\n @let isLargeAndInActive = isLargeLayout && selectedTab !== title;\n @let isDisabled = item.isDisabled;\n @let tabClasses =\n {\n isLargeLayout,\n isLargeAndActive,\n isLargeAndInActive,\n isSmallActive,\n isSmallAndInActive,\n isDisabled: isDisabled ?? false,\n } | toolbarTabsClassPipe;\n\n <div\n class=\"tab-switch-items-holder c-pointer ca-font-extra-bold br-3 d-flex align-items-center position-relative background-bw10\"\n [ngClass]=\"tabClasses\"\n (click)=\"onTabClick($event, isLargeLayout ? title! : name!)\"\n >\n <div\n class=\"transition-width-transform position-absolute top-0 bottom-0 start-0 end-0 z-index-0 br-3 w-100p opacity-0\"\n [ngClass]=\"\n isLargeLayout ? 'background-black' : 'background-bw2'\n \"\n ></div>\n <div\n class=\"title z-index-1 transition-duration-250\"\n [ngClass]=\"\n isLargeLayout\n ? 'title-large line-height-100'\n : 'title-small'\n \"\n [attr.data-test-id]=\"\n isLargeLayout\n ? 'table-toolbar-main-tab'\n : 'table-toolbar-view-tab'\n \"\n >\n {{ isLargeLayout ? title : name }}\n </div>\n\n @if (isLargeLayout) {\n @let counterText = item.length;\n @let counterClass =\n selectedTab === title\n ? 'background-white text-color-black'\n : 'background-muted text-color-white';\n @let widthClass =\n counterText && counterText > 99\n ? 'w-20'\n : counterText && counterText > 9\n ? 'w-14'\n : 'w-8';\n\n <div\n class=\"counter z-index-1 transition-duration-250 m-l-4 d-flex align-items-center justify-content-center font-size-11 line-height-18 h-18 min-w-18 br-50 text-center p-x-5\"\n [ngClass]=\"[counterClass]\"\n >\n <div class=\"line-height-18\" [ngClass]=\"widthClass\">\n {{ counterText }}\n </div>\n </div>\n }\n </div>\n }\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:#0b49d1;transition:all .3s ease-in-out}.tab-switch-items-holder:hover:not(.active) .title-large{color:#424242!important}.tab-switch-items-holder:hover:not(.active) .title-small{color:#6c6c6c!important}.tab-switch-items-holder:hover:not(.active) .counter{background-color:#6c6c6c!important}\n"] }]
|
|
38829
|
-
}], ctorParameters: () => [{ type: i0.Renderer2 }
|
|
38808
|
+
args: [{ selector: 'ca-toolbar-tab-switch', imports: [NgClass, ToolbarTabsClassPipe], template: "@let isLargeLayout = variant === toolbarVariant.Large;\n\n<div\n #tabSwitchHolder\n class=\"d-flex gap-1 align-items-center position-relative prevent-text-selection\"\n>\n <div\n #tabSwitchIndicator\n class=\"br-3 position-absolute h-100p\"\n [ngClass]=\"isLargeLayout ? 'background-black' : 'background-bw2'\"\n ></div>\n\n @for (item of data; let index = $index; track index) {\n @let name = item.name;\n @let title = item.title;\n @let isSmallActive = !isLargeLayout && selectedTab === name;\n @let isSmallAndInActive = !isLargeLayout && selectedTab !== name;\n @let isLargeAndActive = isLargeLayout && selectedTab === title;\n @let isLargeAndInActive = isLargeLayout && selectedTab !== title;\n @let isDisabled = item.isDisabled;\n @let tabClasses =\n {\n isLargeLayout,\n isLargeAndActive,\n isLargeAndInActive,\n isSmallActive,\n isSmallAndInActive,\n isDisabled: isDisabled ?? false,\n } | toolbarTabsClassPipe;\n\n <div\n #tabSwitchItems\n class=\"tab-switch-items-holder c-pointer ca-font-extra-bold z-index-1 {{\n tabClasses\n }}\"\n (click)=\"onTabClick($event, isLargeLayout ? title! : name!)\"\n >\n <div\n class=\"title transition-color\"\n [ngClass]=\"\n isLargeLayout\n ? 'title-large line-height-100'\n : 'title-small'\n \"\n [attr.data-test-id]=\"\n isLargeLayout\n ? 'table-toolbar-main-tab'\n : 'table-toolbar-view-tab'\n \"\n >\n {{ isLargeLayout ? title : name }}\n </div>\n\n @if (isLargeLayout) {\n @let counterText = item.length;\n @let counterClass =\n selectedTab === title\n ? 'background-white text-color-black'\n : 'background-muted text-color-white';\n @let widthClass =\n counterText && counterText > 99\n ? 'w-20'\n : counterText && counterText > 9\n ? 'w-14'\n : 'w-8';\n\n <div\n class=\"counter transition-background-color d-flex align-items-center justify-content-center h-18 min-w-18 br-50 text-center p-x-5\"\n [ngClass]=\"counterClass\"\n >\n <div\n class=\"font-size-11 line-height-18\"\n [ngClass]=\"widthClass\"\n >\n {{ counterText }}\n </div>\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}}.tab-switch-items-holder:hover:not(.active) .title-large{color:#424242!important}.tab-switch-items-holder:hover:not(.active) .title-small{color:#6c6c6c!important}.tab-switch-items-holder:hover:not(.active) .counter{background-color:#6c6c6c!important}\n"] }]
|
|
38809
|
+
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { indicator: [{
|
|
38830
38810
|
type: ViewChild,
|
|
38831
|
-
args: ['
|
|
38811
|
+
args: ['tabSwitchIndicator']
|
|
38812
|
+
}], tabItems: [{
|
|
38813
|
+
type: ViewChildren,
|
|
38814
|
+
args: ['tabSwitchItems']
|
|
38832
38815
|
}], selectedTab: [{
|
|
38833
38816
|
type: Input
|
|
38834
38817
|
}], data: [{
|