ca-components 1.0.70 → 1.0.72

package/fesm2022/ca-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Pipe, Component, Input, TemplateRef, Host, ViewChild, EventEmitter, ViewEncapsulation, ChangeDetectionStrategy, Output, Injectable, Directive, HostListener, Inject, forwardRef, ViewContainerRef, CUSTOM_ELEMENTS_SCHEMA, Self, ViewChildren, Injector, NgModule } from '@angular/core';
+import { Pipe, Component, Input, TemplateRef, Host, ViewChild, EventEmitter, ViewEncapsulation, ChangeDetectionStrategy, Output, Injectable, Directive, HostListener, Inject, forwardRef, ViewContainerRef, CUSTOM_ELEMENTS_SCHEMA, Self, ViewChildren, Injector, Optional, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DatePipe, NgTemplateOutlet } from '@angular/common';
 import * as i3 from '@ng-bootstrap/ng-bootstrap';
@@ -1019,6 +1019,7 @@ var StatusTypeEnum;
 class DropdownMenuContentHelper {
     // payroll - period content payment component
     static getPayrollDropdownContent(isOpenPayroll) {
+        // requested items
         const requestedSharedItems = isOpenPayroll
             ? []
             : [
@@ -1026,6 +1027,7 @@ class DropdownMenuContentHelper {
                 DropdownMenuStringEnum$1.SHARE,
                 DropdownMenuStringEnum$1.PRINT,
             ];
+        // items
         const sharedItems = DropdownMenuContentConditionalItemsHelper.getConditionalItems(requestedSharedItems, true);
         return [...sharedItems];
     }
@@ -16834,6 +16836,7 @@ class CaDropdownMenuComponent {
         }
     }
     handleDropdownOpenCloseClick(dropdownPopover) {
+        this.activeInnerDropdownOptionIndex = -1;
         if (dropdownPopover.isOpen()) {
             dropdownPopover.close();
             this.dropdownPopover = null;
@@ -23205,6 +23208,7 @@ var ChartPluginIdsStringEnum;
 (function (ChartPluginIdsStringEnum) {
     ChartPluginIdsStringEnum["HIGHLIGHT_SEGMENT_ON_HOVER"] = "highlightSegmentOnHover";
     ChartPluginIdsStringEnum["HIGHLIGHT_POINT_ON_HOVER"] = "highlightPointOnHover";
+    ChartPluginIdsStringEnum["BORDER_BOTTOM_LINE_CHART"] = "borderBottomLineChart";
 })(ChartPluginIdsStringEnum || (ChartPluginIdsStringEnum = {}));
 
 var ChartEventTypesStringEnum;
@@ -23261,17 +23265,35 @@ class ChartHelper {
         else
             return rgb;
     }
+    static changeOpacityOfRgbOrRgba(color, opacity) {
+        const rgbaRegex = /^rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})(?:,\s*(\d?\.?\d+))?\)$/;
+        const match = color.match(rgbaRegex);
+        if (match) {
+            const red = parseInt(match[1], 10);
+            const green = parseInt(match[2], 10);
+            const blue = parseInt(match[3], 10);
+            return `rgba(${red}, ${green}, ${blue}, ${opacity})`;
+        }
+        return color;
+    }
     static calculateMinValue(data) {
         return Math.min(...data);
     }
     static calculateMaxValue(data) {
         return Math.max(...data);
     }
-    static createGradient(chartContext, chartCanvas, color, color2) {
+    static createGradient(chartContext, chartCanvas, color, color2, opacityColor1 = 1, opacityColor2 = 1, areColorsInRgbaFormat = false) {
         const gradient = chartContext.createLinearGradient(0, 0, 0, chartCanvas.nativeElement.height);
-        const opacity = 0.4;
-        const fillColorTop = this.hexToRgba(color, opacity);
-        const fillColorBottom = this.hexToRgba(color2, 1);
+        let fillColorTop = '';
+        let fillColorBottom = '';
+        if (areColorsInRgbaFormat) {
+            fillColorTop = this.changeOpacityOfRgbOrRgba(color, opacityColor1);
+            fillColorBottom = this.changeOpacityOfRgbOrRgba(color2, opacityColor2);
+        }
+        else {
+            fillColorTop = this.hexToRgba(color, opacityColor1);
+            fillColorBottom = this.hexToRgba(color2, opacityColor2);
+        }
         gradient.addColorStop(0, fillColorTop);
         gradient.addColorStop(0.8, fillColorBottom);
         return gradient;
@@ -23314,15 +23336,47 @@ class ChartHelper {
         ctx.fill();
         ctx.restore();
     }
+    // This is a dumb function whose only function is only to position legend elements one below under
+    // Call it in ngFor
+    static drawDoughnutLegend(chart, position, text, 
+    // Initial idea
+    fontSize = 18, color = '#424242') {
+        const { ctx } = chart;
+        if (!ctx)
+            return;
+        ctx.save();
+        const datasetMeta = chart.getDatasetMeta(0);
+        const xCoord = datasetMeta?.data[0]?.x;
+        const yCoord = datasetMeta?.data[0]?.y / 3 * 2 +
+            position.indx * 20 +
+            position.offsetTop;
+        if (xCoord === undefined || yCoord == undefined)
+            return;
+        ctx.font = `bold ${fontSize}px sans-serif`;
+        ctx.fillStyle = color;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(text, xCoord, yCoord);
+        ctx.restore();
+    }
     static highlightPoint(ctx, chart, index, chartData) {
         chartData.datasets.forEach((dataset, datasetIndex) => {
             const meta = chart.getDatasetMeta(datasetIndex);
+            if (!meta || !meta.data[index])
+                return;
             const point = meta.data[index];
+            const yScale = chart.scales[dataset.yAxisID || 'y-axis-0'];
+            const xScale = chart.scales['x'];
+            const value = dataset.data[index];
+            if (value === undefined || value === null)
+                return;
+            const xPixel = xScale.getPixelForValue(index);
+            const yPixel = Math.abs(yScale.getPixelForValue(value));
             if (!point)
                 return;
             ctx.save();
             ctx.beginPath();
-            ctx.arc(point.x, point.y, 4, 0, 2 * Math.PI);
+            ctx.arc(xPixel, yPixel, 4, 0, 2 * Math.PI);
             ctx.fillStyle = "#FFFFFF" /* ChartColorsStringEnum.WHITE */;
             ctx.fill();
             ctx.lineWidth = 2;
@@ -23338,6 +23392,24 @@ class ChartHelper {
         const segmentStart = tickPositions[index] - segmentWidth / 2;
         return { segmentStart, segmentWidth };
     }
+    static convertRgbToRgba(colorValue, alpha = 1) {
+        if (alpha < 0 || alpha > 1)
+            return colorValue;
+        const rgbaMatch = colorValue.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*(\d+(\.\d+)?)\)/);
+        if (rgbaMatch) {
+            const [, r, g, b] = rgbaMatch;
+            // Return updated RGBA with the new alpha
+            return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+        }
+        // Extract the RGB values using a regular expression
+        const rgbMatch = colorValue.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+        if (!rgbMatch)
+            return colorValue;
+        // Destructure the matched values
+        const [, r, g, b] = rgbMatch;
+        // Return the RGBA string
+        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    }
 }
 
 class ChartTypeGuard {
@@ -23347,21 +23419,40 @@ class ChartTypeGuard {
     }
 }
 
-class CaBaseChartDatasetConfig {
-    static getBaseChartDatasetConfig() {
-        return {
-            type: "line" /* ChartTypesStringEnum.LINE */,
-            label: '',
-            data: [],
-        };
+class ChartConstants {
+    static { this.STRING_EMPTY = ''; }
+}
+
+class ChartManagerService {
+    constructor() {
+        this.hoverStateSubject = new BehaviorSubject({
+            index: null,
+            chartId: null,
+        });
+        this.hoverState$ = this.hoverStateSubject.asObservable();
     }
+    setHoverState(index, chartId) {
+        this.hoverStateSubject.next({ index, chartId });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChartManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChartManagerService }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChartManagerService, decorators: [{
+            type: Injectable
+        }] });
 
 class CaChartComponent {
+    set chartDatasetHover(value) {
+        if (value)
+            this.updateDatasetBackgroundOnHover(value);
+    }
     set chartConfig(value) {
         this._chartConfig = value;
         this.isChartDataAvailable = false;
-        this._chartConfig.chartData.datasets.forEach((item) => {
+        this._chartConfig?.
+            chartData?.
+            datasets?.
+            forEach((item) => {
             item.data.forEach((value) => {
                 if (Array.isArray(value)) {
                     if (value[0] !== 0 || value[1] !== 0)
@@ -23371,21 +23462,29 @@ class CaChartComponent {
                     this.isChartDataAvailable = true;
             });
         });
-    }
-    //for testing hover state on dataset
-    set isDatasetHovered(value) {
-        this._isDatasetHovered = value;
-        if (this.chart) {
-            this.updateDatasetBackgroundOnHover('Sales', '#6692F1', this._isDatasetHovered);
-        }
-    }
-    constructor() {
-        this.originalChartDataset = CaBaseChartDatasetConfig.getBaseChartDatasetConfig();
-        this.isChartDataAvailable = true;
-    }
-    ngOnChanges(changes) {
-        if (this.isChartDataAvailable && !changes['chartConfig'].firstChange)
+        this.changeDetector.detectChanges();
+        if (this.isChartDataAvailable)
             this.updateChart();
+        this._chartConfig.chartData.datasets.forEach((item) => {
+            item.data.forEach((value) => {
+                if (Array.isArray(value)) {
+                    if (value[0] !== 0 || value[1] !== 0)
+                        this.isChartDataAvailable = true;
+                }
+                else {
+                    if (value !== 0)
+                        this.isChartDataAvailable = true;
+                }
+            });
+        });
+    }
+    constructor(changeDetector, chartManagerService) {
+        this.changeDetector = changeDetector;
+        this.chartManagerService = chartManagerService;
+        this.hoveredIndex = new EventEmitter();
+        this.areAnimationsCompleated = false;
+        this._hoveredIndex = null;
+        this.isChartDataAvailable = false;
     }
     ngAfterViewInit() {
         if (this.isChartDataAvailable) {
@@ -23393,77 +23492,145 @@ class CaChartComponent {
             this.createChart();
         }
     }
+    ngOnInit() {
+        this.initializeChartManagerService();
+    }
+    initializeChartManagerService() {
+        if (!this.chartManagerService)
+            return;
+        this.subscription = this.chartManagerService.hoverState$.subscribe(({ index, chartId }) => {
+            if (chartId !== this.chartId) {
+                this._hoveredIndex = index;
+                if (this.chart)
+                    this.chart.draw();
+            }
+        });
+    }
     initializeAnnotationPlugin() {
         Chart.register(annotationPlugin);
     }
-    updateDatasetBackgroundOnHover(dataSetLabel, color, isDatasetHovered) {
-        if (isDatasetHovered) {
-            this.originalChartDataset = JSON.parse(JSON.stringify(this._chartConfig.chartData.datasets));
-            const gradient = ChartHelper.createGradient(this.chartContext, this.chartCanvas, color, color);
-            this._chartConfig.chartData.datasets =
-                this._chartConfig.chartData.datasets.map((dataset) => {
-                    if (dataset.label === dataSetLabel) {
-                        return {
-                            ...dataset,
-                            fill: true,
-                            backgroundColor: gradient,
-                            borderColor: color,
-                        };
-                    }
-                    else {
-                        const borderColorWithOpacity = ChartHelper.rgbToRgba(dataset.borderColor, 0.2);
-                        return {
-                            ...dataset,
-                            fill: false,
-                            borderColor: borderColorWithOpacity,
-                        };
-                    }
-                });
+    updateDatasetBackgroundOnHover(chartDatasetHover) {
+        if (!this.chart || !this.chart.data.datasets)
+            return;
+        if (chartDatasetHover.isHoverd) {
+            const gradient = ChartHelper.createGradient(this.chartContext, this.chartCanvas, chartDatasetHover.color, chartDatasetHover.color, 0.6, 0.1, true);
+            this.chart.data.datasets = this.chart.data.datasets.map((dataset) => {
+                if (dataset.hidden)
+                    return dataset;
+                if (dataset.label?.toUpperCase() === chartDatasetHover.label.toUpperCase()) {
+                    const hoverdDataSet = {
+                        ...dataset,
+                        fill: true,
+                        backgroundColor: gradient,
+                        borderColor: chartDatasetHover.color,
+                        order: 1,
+                    };
+                    return hoverdDataSet;
+                }
+                else {
+                    const borderColorWithOpacity = ChartHelper.changeOpacityOfRgbOrRgba(dataset.borderColor, 0.2);
+                    return {
+                        ...dataset,
+                        fill: false,
+                        borderColor: borderColorWithOpacity,
+                    };
+                }
+            });
+        }
+        else {
+            this.chart.data.datasets = this.chart.data.datasets.map((dataset) => {
+                if (!dataset.hidden) {
+                    const originalColor = dataset.borderColor
+                        ? ChartHelper.changeOpacityOfRgbOrRgba(dataset.borderColor, 1)
+                        : ChartConstants.STRING_EMPTY;
+                    return {
+                        ...dataset,
+                        fill: false,
+                        borderColor: originalColor,
+                        backgroundColor: ChartConstants.STRING_EMPTY,
+                    };
+                }
+                else
+                    return dataset;
+            });
         }
-        else
-            this._chartConfig.chartData.datasets = JSON.parse(JSON.stringify(this.originalChartDataset));
         this.chart.update();
     }
     createChart() {
-        this.chartContext = this.chartCanvas.nativeElement.getContext('2d');
+        this.chartContext = this.chartCanvas?.
+            nativeElement?.
+            getContext('2d');
         this.setChartOptionsProperties();
         this.setChartDataProperties();
         this.setChartPluginsProperties();
+        if (this.chart)
+            this.chart.destroy();
+        this.initializeAnnotationPlugin();
+        if (this._chartConfig.chartType === "doughnut" /* ChartTypesStringEnum.DOUGHNUT */)
+            Chart.overrides.doughnut.cutout = '80%';
         this.chart = new Chart(this.chartContext, {
             type: this._chartConfig.chartType,
             data: this._chartConfig.chartData,
             options: this._chartConfig.chartOptions,
             plugins: this.plugins,
         });
-        this.chart.config.data.datasets = [
-            ...this._chartConfig?.
-                chartData?.
-                datasets?.map((item, indx) => {
-                if (!item.shiftValue)
-                    return {
+        if (!this._chartConfig.isDashboardChart) {
+            this.chart.config.data.datasets = [
+                ...this._chartConfig?.
+                    chartData?.
+                    datasets?.
+                    map((item, indx) => {
+                    const pointConfig = {
+                        pointBackgroundColor: "#FFFFFF" /* ChartColorsStringEnum.WHITE */,
+                        pointBorderWidth: 2,
+                        pointRadius: 3,
+                    };
+                    this.updateChartAnnotations(item, indx);
+                    const yScale = this.chart.scales[EChartEventProperties.Y_AXIS_0];
+                    const datasetConfig = {
                         ...item,
+                        pointBorderColor: item.color,
+                        ...pointConfig,
                         backgroundColor: item?.color &&
                             item?.color2 &&
                             item?.color !== item?.color2 ?
                             ChartHelper.createGradient(this.chartContext, this.chartCanvas, item?.color, item?.color2) : item?.color,
                         fill: item?.fill
                     };
-                this.updateChartAnnotations(item, indx);
-                const yScale = this.chart.scales[EChartEventProperties.Y_AXIS_0];
-                const shiftValuePx = yScale.getPixelForValue(item.shiftValue || 0);
-                const shiftValueAdjusted = shiftValuePx / yScale.maxHeight;
-                return {
-                    ...item,
-                    backgroundColor: ChartHelper.createGradientWithShiftValue(this.chartContext, yScale.maxHeight, item.color || '', item.color2 || '', shiftValueAdjusted, true),
-                    borderColor: ChartHelper.createGradientWithShiftValue(this.chartContext, yScale.maxHeight, item.color || '', item.color2 || '', shiftValueAdjusted),
-                    fill: true
-                };
-            })
-        ];
+                    if (this._chartConfig.chartType === "doughnut" /* ChartTypesStringEnum.DOUGHNUT */) {
+                        return {
+                            ...datasetConfig,
+                            backgroundColor: item.backgroundColor
+                        };
+                    }
+                    if (!item.shiftValue) {
+                        return {
+                            ...datasetConfig,
+                            backgroundColor: item?.color &&
+                                item?.color2 &&
+                                item?.color !== item?.color2 ?
+                                ChartHelper.createGradient(this.chartContext, this.chartCanvas, item?.color, item?.color2) : item?.color,
+                        };
+                    }
+                    const shiftValuePx = yScale.getPixelForValue(item.shiftValue || 0);
+                    const shiftValueAdjusted = shiftValuePx / yScale.maxHeight;
+                    const borderColor = ChartHelper.createGradientWithShiftValue(this.chartContext, yScale.maxHeight, item.color || ChartConstants.STRING_EMPTY, item.color2 || ChartConstants.STRING_EMPTY, shiftValueAdjusted);
+                    return {
+                        ...item,
+                        ...pointConfig,
+                        pointBorderColor: borderColor,
+                        backgroundColor: ChartHelper.createGradientWithShiftValue(this.chartContext, yScale.maxHeight, item.color || ChartConstants.STRING_EMPTY, item.color2 || ChartConstants.STRING_EMPTY, shiftValueAdjusted, true),
+                        borderColor,
+                        fill: true
+                    };
+                })
+            ];
+        }
         this.chart.update();
     }
     updateChart() {
-        this.chart?.destroy();
+        if (this.chart)
+            this.chart?.destroy();
         this.createChart();
     }
     setChartOptionsProperties() {
@@ -23472,16 +23639,37 @@ class CaChartComponent {
             responsive: true,
             maintainAspectRatio: false,
             clip: false,
+            animation: {
+                onComplete: () => {
+                    this.areAnimationsCompleated = true;
+                    this.chart.draw();
+                },
+                onProgress: () => {
+                    this.areAnimationsCompleated = false;
+                    this.chart.draw();
+                },
+            },
             layout: {
                 padding: {
                     top: 0,
-                    bottom: -25
-                }
+                    bottom: 0,
+                    left: this._chartConfig.chartType === "bar" /* ChartTypesStringEnum.BAR */ &&
+                        this._chartConfig.verticalyAlignBarChartWithLineCart
+                        ? 6
+                        : 0,
+                    right: this._chartConfig.chartType === "bar" /* ChartTypesStringEnum.BAR */ &&
+                        this._chartConfig.verticalyAlignBarChartWithLineCart
+                        ? 6
+                        : 0,
+                },
             },
             plugins: {
                 legend: {
                     display: false,
                 },
+                tooltip: {
+                    enabled: false,
+                },
             },
             scales: {
                 x: {
@@ -23493,6 +23681,7 @@ class CaChartComponent {
                         display: false,
                     },
                     ticks: {
+                        display: true,
                         padding: 0,
                         color: "#919191" /* ChartColorsStringEnum.X_AXIS_LABEL_COLOR */,
                         font: {
@@ -23504,7 +23693,7 @@ class CaChartComponent {
                         autoSkipPadding: 12,
                         maxRotation: 0,
                         minRotation: 0,
-                        //ispis lable u 2 reda za dane - ceka se dizaj za prikaz dana
+                        //Label written in 2 lines, will be ujusted with new design
                         callback: function (value, index) {
                             const label = labels[index];
                             const multiLineLabel = label ? label.split(' ') : [];
@@ -23520,20 +23709,44 @@ class CaChartComponent {
                     beginAtZero: true,
                     min: 0,
                     max: 1,
+                    offset: false,
                 },
             },
-            onHover: (event, dataItem) => {
-                if (!this._chartConfig.hasVerticalDashedAnnotation)
-                    return;
-                this.resetAnnotations();
-                if (!dataItem || !dataItem?.length)
+            onHover: (event, item) => {
+                if (this._chartConfig.hasVerticalDashedAnnotation)
+                    this.resetAnnotations();
+                if (this._chartConfig.chartType === "doughnut" /* ChartTypesStringEnum.DOUGHNUT */) {
+                    const colors = this.chart.data.datasets[0].backgroundColor;
+                    this.chart.data.datasets[0].backgroundColor =
+                        colors.map((color) => {
+                            return ChartHelper.convertRgbToRgba(color);
+                        });
+                    this.chart.update();
+                }
+                if (!item ||
+                    !item?.length) {
+                    this.hoveredIndex.emit(null);
                     return;
-                this.setVerticalDashedAnnotationLine(dataItem[0].element.x);
+                }
+                this.hoveredIndex.emit(item[0].index);
+                if (this._chartConfig.chartType === "doughnut" /* ChartTypesStringEnum.DOUGHNUT */) {
+                    const colors = this.chart.data.datasets[0].backgroundColor;
+                    const updatedColors = colors.map((color, indx) => {
+                        if (indx === item[0].index)
+                            return color;
+                        const convertedValue = ChartHelper.convertRgbToRgba(color, 0.2);
+                        return convertedValue;
+                    });
+                    this.chart.data.datasets[0].backgroundColor = updatedColors;
+                }
+                if (this._chartConfig.hasVerticalDashedAnnotation)
+                    this.setVerticalDashedAnnotationLine(item[0].element.x);
+                this.chart.update();
             },
         };
     }
     setChartDataProperties() {
-        if ((this._chartConfig.chartType = "line" /* ChartTypesStringEnum.LINE */)) {
+        if ((this._chartConfig.chartType === "line" /* ChartTypesStringEnum.LINE */)) {
             this._chartConfig.chartData.datasets.forEach((dataset) => {
                 dataset.order = dataset.order;
                 if (ChartTypeGuard.isLineDataset(dataset)) {
@@ -23559,43 +23772,110 @@ class CaChartComponent {
             {
                 id: ChartPluginIdsStringEnum.HIGHLIGHT_SEGMENT_ON_HOVER,
                 afterEvent: (chart, event) => {
-                    if (!this._chartConfig.showTooltipBackground) {
+                    if (!this._chartConfig.showTooltipBackground)
                         return;
-                    }
                     const nativeEvent = event.event.native;
-                    if (event.event.type === ChartEventTypesStringEnum.MOUSE_OUT &&
-                        hoveredIndex !== null) {
-                        hoveredIndex = null;
+                    if (event.event.type === ChartEventTypesStringEnum.MOUSE_OUT) {
+                        const boundingRect = this.chart.canvas.getBoundingClientRect();
+                        const isMouseOutsideChart = nativeEvent.clientX < boundingRect.left ||
+                            nativeEvent.clientX > boundingRect.right ||
+                            nativeEvent.clientY < boundingRect.top ||
+                            nativeEvent.clientY > boundingRect.bottom;
+                        if (isMouseOutsideChart) {
+                            this._hoveredIndex = null;
+                            this.chartManagerService?.setHoverState(null, this.chartId);
+                            this.chart.draw();
+                        }
+                        return;
+                    }
+                    const boundingRect = this.chart.canvas.getBoundingClientRect();
+                    const mouseHorizontalCoordinate = nativeEvent.clientX - boundingRect.left;
+                    const { left, right } = this.chart.chartArea;
+                    if (mouseHorizontalCoordinate < left ||
+                        mouseHorizontalCoordinate > right) {
+                        this._hoveredIndex = null;
+                        this.chartManagerService?.setHoverState(null, this.chartId);
                         this.chart.draw();
                         return;
                     }
-                    const mouseHorizontalCoordinate = nativeEvent[EChartEventProperties.X];
                     const xScale = this.chart.scales[EChartEventProperties.X];
-                    const tickPositions = ChartHelper.calculateTickPositions(xScale);
-                    const newHoveredIndex = tickPositions.findIndex((tickPos) => mouseHorizontalCoordinate >
-                        tickPos - (tickPositions[1] - tickPositions[0]) / 2 &&
-                        mouseHorizontalCoordinate <=
-                            tickPos + (tickPositions[1] - tickPositions[0]) / 2);
-                    if (newHoveredIndex !== hoveredIndex) {
-                        hoveredIndex = newHoveredIndex === -1 ? null : newHoveredIndex;
+                    const tickPositions = xScale.ticks.map((tick) => xScale.getPixelForValue(tick.value));
+                    const segmentBoundaries = tickPositions.map((tickPos, index) => {
+                        const leftBoundary = index === 0 ? left : (tickPos + tickPositions[index - 1]) / 2;
+                        const rightBoundary = index === tickPositions.length - 1
+                            ? right
+                            : (tickPos + tickPositions[index + 1]) / 2;
+                        return { leftBoundary, rightBoundary };
+                    });
+                    const newHoveredIndex = segmentBoundaries.findIndex((boundary) => mouseHorizontalCoordinate >= boundary.leftBoundary &&
+                        mouseHorizontalCoordinate < boundary.rightBoundary);
+                    if (newHoveredIndex !== this._hoveredIndex) {
+                        this._hoveredIndex = newHoveredIndex === -1 ? null : newHoveredIndex;
+                        this.chartManagerService?.setHoverState(this._hoveredIndex, this.chartId);
                         this.chart.draw();
                     }
                 },
                 beforeDraw: () => {
-                    if (hoveredIndex !== null) {
+                    if (this._hoveredIndex !== null) {
                         const { chartArea, scales: { x: xScale }, } = this.chart;
-                        ChartHelper.highlightSegment(this.chartContext, xScale, chartArea, this._chartConfig.height, hoveredIndex);
+                        ChartHelper.highlightSegment(this.chartContext, xScale, chartArea, this._chartConfig.height, this._hoveredIndex);
                     }
                 },
             },
             {
                 id: ChartPluginIdsStringEnum.HIGHLIGHT_POINT_ON_HOVER,
                 afterDraw: () => {
-                    if (hoveredIndex !== null)
-                        ChartHelper.highlightPoint(this.chartContext, this.chart, hoveredIndex, this._chartConfig.chartData);
+                    if (this._hoveredIndex !== null &&
+                        this._chartConfig.showHighlightPointOnHover &&
+                        this.areAnimationsCompleated) {
+                        const visibleDatasets = this._chartConfig.chartData.datasets.filter((dataset) => !dataset.hidden);
+                        ChartHelper.highlightPoint(this.chartContext, this.chart, this._hoveredIndex, { ...this._chartConfig.chartData, datasets: visibleDatasets });
+                    }
+                },
+            },
+            {
+                id: ChartPluginIdsStringEnum.BORDER_BOTTOM_LINE_CHART,
+                beforeDraw: () => {
+                    if (this._chartConfig?.showBottomLineOnLineChart) {
+                        const { ctx, data, chartArea, scales: { x: xScale }, } = this.chart;
+                        const dataset = data.datasets[0];
+                        const firstIndex = 0;
+                        const lastIndex = dataset.data.length - 1;
+                        const firstValue = dataset.data[firstIndex];
+                        const lastValue = dataset.data[lastIndex];
+                        if (firstValue !== undefined && lastValue !== undefined) {
+                            const xStart = xScale.getPixelForValue(firstIndex);
+                            const xEnd = xScale.getPixelForValue(lastIndex);
+                            const yBottom = chartArea.bottom;
+                            ctx.save();
+                            ctx.strokeStyle =
+                                "#DADADA" /* ChartColorsStringEnum.BORDER_BOTTOM_LINE_CHART_COLOR */;
+                            ctx.lineWidth = 1;
+                            ctx.beginPath();
+                            ctx.moveTo(xStart, yBottom);
+                            ctx.lineTo(xEnd, yBottom);
+                            ctx.stroke();
+                            ctx.restore();
+                        }
+                    }
                 },
             },
         ];
+        if (this._chartConfig.chartType === "doughnut" /* ChartTypesStringEnum.DOUGHNUT */)
+            this.plugins = [
+                ...this.plugins,
+                {
+                    id: 'doughnut-label',
+                    beforeDatasetDraw: (chart) => {
+                        this._chartConfig.centerLabels?.map((label, indx) => {
+                            ChartHelper.drawDoughnutLegend(chart, {
+                                indx,
+                                offsetTop: label.position?.top || 0
+                            }, label.value, label.fontSize, label.color);
+                        });
+                    },
+                }
+            ];
     }
     updateChartAnnotations(item, indx) {
         if (!this._chartConfig.annotations?.length)
@@ -23616,7 +23896,7 @@ class CaChartComponent {
                         [`${item.label}-${indx}-${key}`]: {
                             id: annotation.id || `annotation-${indx}-${key}`,
                             type: annotation.type,
-                            scaleID: annotation.axis || item.yAxisId,
+                            scaleID: annotation.axis || item.yAxisID,
                             value: annotation.value || item.shiftValue,
                             borderColor: annotation.color || '#DADADA',
                             borderWidth: annotation.borderWidth || 2,
@@ -23626,37 +23906,45 @@ class CaChartComponent {
                 },
             };
         });
+        this.chart.update();
     }
     setMultipleYAxis(chartData) {
         let absoluteMax;
         chartData.datasets.forEach((dataset, index) => {
-            if (dataset.type == "line" /* ChartTypesStringEnum.LINE */ ||
-                dataset.type == "bar" /* ChartTypesStringEnum.BAR */) {
+            if (dataset.type === "line" /* ChartTypesStringEnum.LINE */ ||
+                dataset.type === "bar" /* ChartTypesStringEnum.BAR */) {
                 const yAxisID = this._chartConfig.isMultiYAxis
                     ? `y-axis-${index}`
-                    : dataset.yAxisId || 'y-axis-0';
-                chartData.datasets[index] = {
-                    ...dataset,
-                    yAxisID,
-                };
-                const minValue = ChartHelper.calculateMinValue(dataset.data);
-                const maxValue = ChartHelper.calculateMaxValue(dataset.data);
-                if (!absoluteMax || maxValue > absoluteMax)
-                    absoluteMax = maxValue;
+                    : dataset.yAxisID || 'y-axis-0';
+                // Detect if the dataset is all 0
+                const isAllZeroDataset = dataset.data.every((val) => val === 0);
+                let minValue = ChartHelper.calculateMinValue(dataset.data);
+                let maxValue = ChartHelper.calculateMaxValue(dataset.data);
                 const padding = maxValue * 0.03;
-                const minValueAdjusted = padding == 0 ? minValue : 0;
-                const maxValueAdjusted = absoluteMax + padding;
+                // Adjust scaling for all 0 datasets
+                if (isAllZeroDataset) {
+                    minValue = 0;
+                    maxValue = 1;
+                }
+                else {
+                    minValue = maxValue === minValue ? minValue - 0.1 : minValue;
+                    maxValue =
+                        maxValue === minValue ? maxValue + 0.1 : maxValue + padding;
+                }
                 this._chartConfig.chartOptions.scales = {
                     ...this._chartConfig.chartOptions.scales,
                     [yAxisID]: {
                         display: false,
                         beginAtZero: true,
-                        min: minValueAdjusted,
-                        max: maxValueAdjusted,
-                        // Ovo je jako bitno, moramo ovu osu sa stacked parametrom namjestiti
+                        min: minValue,
+                        max: maxValue,
                         stacked: this._chartConfig.isStacked,
                     },
                 };
+                chartData.datasets[index] = {
+                    ...dataset,
+                    yAxisID,
+                };
             }
         });
     }
@@ -23695,21 +23983,29 @@ class CaChartComponent {
                 },
             },
         };
-        this.chart.update();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CaChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CaChartComponent, isStandalone: true, selector: "app-ca-chart", inputs: { chartConfig: "chartConfig", isDatasetHovered: "isDatasetHovered" }, viewQueries: [{ propertyName: "chartCanvas", first: true, predicate: ["chartCanvas"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"isChartDataAvailable; else noDataTemplate\">\n  <div\n    [ngStyle]=\"{\n      height: _chartConfig.height + 'px',\n      width: _chartConfig.width + '%',\n    }\"\n  >\n    <canvas #chartCanvas> </canvas>\n  </div>\n</ng-container>\n<ng-template #noDataTemplate>\n  <div\n    class=\"d-flex justify-content-center align-items-center\"\n    [ngStyle]=\"{\n      height: _chartConfig.height + 'px',\n      width: _chartConfig.width + '%',\n    }\"\n  >\n    <svg-icon\n      [src]=\"_chartConfig.noDataImage\"\n      alt=\"No data available\"\n      class=\"no-data-svg\"\n    ></svg-icon>\n  </div>\n</ng-template>\n", styles: [".no-data-svg{width:100%;height:auto;max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AngularSvgIconModule }, { kind: "component", type: i2.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }] }); }
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CaChartComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ChartManagerService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CaChartComponent, isStandalone: true, selector: "app-ca-chart", inputs: { chartId: "chartId", chartDatasetHover: "chartDatasetHover", chartConfig: "chartConfig" }, outputs: { hoveredIndex: "hoveredIndex" }, viewQueries: [{ propertyName: "chartCanvas", first: true, predicate: ["chartCanvas"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"isChartDataAvailable; else noDataTemplate\">\n  <div\n    [ngStyle]=\"{\n      height: _chartConfig.height + 'px',\n      width: _chartConfig.width + '%',\n    }\"\n  >\n    <canvas #chartCanvas></canvas>\n  </div>\n</ng-container>\n<ng-template #noDataTemplate>\n  <div\n    class=\"d-flex justify-content-center align-items-center\"\n    [ngStyle]=\"{\n      height: _chartConfig.height + 'px',\n      width: _chartConfig.width + '%',\n    }\"\n  >\n    <svg-icon\n      [src]=\"_chartConfig.noDataImage\"\n      alt=\"No data available\"\n      class=\"no-data-svg\"\n    ></svg-icon>\n  </div>\n</ng-template>\n", styles: [".no-data-svg{width:100%;height:auto;max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AngularSvgIconModule }, { kind: "component", type: i2.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CaChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-ca-chart', standalone: true, imports: [CommonModule, AngularSvgIconModule], template: "<ng-container *ngIf=\"isChartDataAvailable; else noDataTemplate\">\n  <div\n    [ngStyle]=\"{\n      height: _chartConfig.height + 'px',\n      width: _chartConfig.width + '%',\n    }\"\n  >\n    <canvas #chartCanvas> </canvas>\n  </div>\n</ng-container>\n<ng-template #noDataTemplate>\n  <div\n    class=\"d-flex justify-content-center align-items-center\"\n    [ngStyle]=\"{\n      height: _chartConfig.height + 'px',\n      width: _chartConfig.width + '%',\n    }\"\n  >\n    <svg-icon\n      [src]=\"_chartConfig.noDataImage\"\n      alt=\"No data available\"\n      class=\"no-data-svg\"\n    ></svg-icon>\n  </div>\n</ng-template>\n", styles: [".no-data-svg{width:100%;height:auto;max-width:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { chartCanvas: [{
+            args: [{ selector: 'app-ca-chart', standalone: true, imports: [CommonModule, AngularSvgIconModule], template: "<ng-container *ngIf=\"isChartDataAvailable; else noDataTemplate\">\n  <div\n    [ngStyle]=\"{\n      height: _chartConfig.height + 'px',\n      width: _chartConfig.width + '%',\n    }\"\n  >\n    <canvas #chartCanvas></canvas>\n  </div>\n</ng-container>\n<ng-template #noDataTemplate>\n  <div\n    class=\"d-flex justify-content-center align-items-center\"\n    [ngStyle]=\"{\n      height: _chartConfig.height + 'px',\n      width: _chartConfig.width + '%',\n    }\"\n  >\n    <svg-icon\n      [src]=\"_chartConfig.noDataImage\"\n      alt=\"No data available\"\n      class=\"no-data-svg\"\n    ></svg-icon>\n  </div>\n</ng-template>\n", styles: [".no-data-svg{width:100%;height:auto;max-width:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ChartManagerService, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { chartCanvas: [{
                 type: ViewChild,
-                args: ['chartCanvas']
-            }], chartConfig: [{
+                args: ['chartCanvas', { static: false }]
+            }], chartId: [{
                 type: Input
-            }], isDatasetHovered: [{
+            }], chartDatasetHover: [{
                 type: Input
+            }], chartConfig: [{
+                type: Input
+            }], hoveredIndex: [{
+                type: Output
             }] } });
 
 class TruncatePipe {
@@ -23735,6 +24031,7 @@ class CaTooltipListConstants {
 
 class CaTooltipListComponent {
     constructor() {
+        this.tooltipList = null;
         this.constants = CaTooltipListConstants;
         this.truncateLength = 18;
     }
@@ -23742,22 +24039,121 @@ class CaTooltipListComponent {
         return this.tooltipList?.selectedItems?.length === 1;
     }
     get isLessThanFourItemsSelected() {
-        return (!this.tooltipList.selectedItems ||
+        return (!this.tooltipList?.selectedItems ||
             this.tooltipList?.selectedItems?.length < 4);
     }
     trackByIdentity(index) {
         return index;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CaTooltipListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CaTooltipListComponent, isStandalone: true, selector: "app-ca-tooltip-list", inputs: { tooltipList: "tooltipList" }, ngImport: i0, template: "<ng-container\n  [ngTemplateOutlet]=\"\n    tooltipList?.showPercentage ? percentageTemplate : noPercentageTemplate\n  \"\n  [ngTemplateOutletContext]=\"{ tooltipList: tooltipList }\"\n>\n</ng-container>\n\n<ng-template #noPercentageTemplate let-tooltipList=\"tooltipList\">\n  <div\n    class=\"tooltip-list-container\"\n    [ngClass]=\"isSingleItemSelected ? 'width-small' : 'width-medium'\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"tooltipHeader\"\n      [ngTemplateOutletContext]=\"{ tooltipList: tooltipList }\"\n    >\n    </ng-container>\n    <div\n      [ngClass]=\"\n        isSingleItemSelected\n          ? 'tooltip-list-body-list'\n          : 'tooltip-list-body-table'\n      \"\n    >\n      <ng-container\n        *ngFor=\"\n          let item of tooltipList.selectedItems;\n          let indx = index;\n          trackBy: trackByIdentity\n        \"\n        [ngTemplateOutlet]=\"\n          isSingleItemSelected ? listItemTemplate : tableItemTemplate\n        \"\n        [ngTemplateOutletContext]=\"{ item: item }\"\n      >\n      </ng-container>\n      <ng-container\n        *ngFor=\"\n          let item of tooltipList.otherItems;\n          let indx = index;\n          trackBy: trackByIdentity\n        \"\n        [ngTemplateOutlet]=\"\n          isSingleItemSelected ? listItemTemplate : tableItemTemplate\n        \"\n        [ngTemplateOutletContext]=\"{ item: item }\"\n      >\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #percentageTemplate let-tooltipList=\"tooltipList\">\n  <div\n    class=\"tooltip-list-container\"\n    [ngClass]=\"isLessThanFourItemsSelected ? 'width-small' : 'width-large'\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"tooltipHeader; context: { tooltipList: tooltipList }\"\n    >\n    </ng-container>\n    <div\n      [ngClass]=\"\n        isLessThanFourItemsSelected\n          ? 'tooltip-list-body-list'\n          : 'tooltip-list-body-table'\n      \"\n    >\n      <ng-container *ngIf=\"this.tooltipList?.selectedItems?.length >= 1\">\n        <ng-container\n          *ngFor=\"\n            let item of tooltipList.selectedItems;\n            let indx = index;\n            trackBy: trackByIdentity\n          \"\n          [ngTemplateOutlet]=\"\n            isLessThanFourItemsSelected\n              ? listItemPercentageTemplate\n              : tableItemTemplate\n          \"\n          [ngTemplateOutletContext]=\"{ item: item }\"\n        >\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"this.tooltipList?.selectedItems?.length < 1\">\n        <ng-container\n          *ngFor=\"\n            let item of tooltipList.otherItems;\n            let indx = index;\n            trackBy: trackByIdentity\n          \"\n          [ngTemplateOutlet]=\"listItemPercentageTemplate\"\n          [ngTemplateOutletContext]=\"{ item: item }\"\n        >\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #tooltipHeader let-tooltipList=\"tooltipList\">\n  <div class=\"tooltip-list-header\">\n    <ng-container *ngIf=\"tooltipList?.singleDate\">\n      <span>{{ tooltipList.singleDate | uppercase }}</span>\n    </ng-container>\n    <ng-container *ngIf=\"tooltipList?.startDate && tooltipList?.endDate\">\n      <span>{{ tooltipList.startDate }} - {{ tooltipList.endDate }}</span>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #listItemTemplate let-item=\"item\">\n  <div class=\"d-flex flex-column justify-content-between tooltip-list-item\">\n    <div class=\"tooltip-list-inline\">\n      <span\n        class=\"tooltip-list-item-dot\"\n        [style.backgroundColor]=\"item.color\"\n      ></span>\n      <span class=\"tooltip-list-item-label\">{{\n        item.label | truncate: truncateLength\n      }}</span>\n    </div>\n    <span class=\"tooltip-list-item-value\">{{\n      item.isCurrency\n        ? (item.value | formatCurrency: item.isCurrency)\n        : (item.value | nFormatter)\n    }}</span>\n    <ng-container *ngIf=\"item.percentage\">\n      <span class=\"tooltip-list-item-percentage\">{{ item.percentage }}</span>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #listItemPercentageTemplate let-item=\"item\">\n  <div class=\"d-flex flex-column justify-content-between tooltip-list-item\">\n    <div class=\"tooltip-list-inline\">\n      <span\n        class=\"tooltip-list-item-dot\"\n        [style.backgroundColor]=\"item.color\"\n      ></span>\n      <span class=\"tooltip-list-item-label\">{{\n        item.label | truncate: truncateLength\n      }}</span>\n    </div>\n    <div class=\"d-flex align-items-center\">\n      <span class=\"tooltip-list-item-value\">{{\n        item.isCurrency\n          ? (item.value | formatCurrency: item.isCurrency)\n          : (item.value | nFormatter)\n      }}</span>\n      <span class=\"dot-delimiter\">{{\n        constants.VALUE_PERCENTAGE_DELIMITER\n      }}</span>\n      <ng-container *ngIf=\"item.percentage\">\n        <span class=\"tooltip-list-item-percentage\">{{ item.percentage }}</span>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #tableItemTemplate let-item=\"item\">\n  <div class=\"table-item-layout\">\n    <div class=\"table-item-cell\">\n      <span\n        class=\"tooltip-list-item-dot\"\n        [style.backgroundColor]=\"item.color\"\n      ></span>\n      <span class=\"tooltip-list-item-label\">{{\n        item.label | truncate: truncateLength\n      }}</span>\n    </div>\n    <span class=\"text-end table-item-cell tooltip-list-item-value\">{{\n      item.isCurrency\n        ? (item.value | formatCurrency: item.isCurrency)\n        : (item.value | nFormatter)\n    }}</span>\n    <ng-container *ngIf=\"item.percentage\">\n      <span class=\"text-end table-item-cell tooltip-list-item-percentage\">{{\n        item.percentage\n      }}</span>\n    </ng-container>\n  </div>\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap\";@import\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css\";.ca-font-thin{font-weight:100!important}.ca-font-extra-light{font-weight:200!important}.ca-font-light{font-weight:300!important}.ca-font-regular{font-weight:400!important}.ca-font-medium{font-weight:500!important}.ca-font-semi-bold{font-weight:600!important}.ca-font-bold{font-weight:700!important}.ca-font-extra-bold{font-weight:800!important}.ca-font-black{font-weight:900!important}.pickup-delivery-popover{top:-38px!important;max-width:340px!important}.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}.gps_dropdown_popover{top:-38px;max-width:494px}.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:#dadada}.table-progress-popover .progress-dropdown .progress-header .progress-title span{font-weight:400}.table-progress-popover .progress-dropdown .progress-header .progress-total{font-size:14px;line-height:17px;color:#dadada}.table-progress-popover .progress-dropdown .table-progress-bar-container{width:100%;height:8px;margin-top:6px;border-radius:2px;overflow:hidden}.table-progress-popover .progress-dropdown .table-progress-bar-container .table-progress-bar{height:100%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-dual-info-container .progress-info-container{width:50%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container{margin-top:10px}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-title{margin-bottom:2px;font-size:11px;font-weight:700;line-height:14px;color:#ffffffb2}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-text{font-size:14px;line-height:18px;color:#dadada}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@-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}.tooltip{font-size:12px;position:relative}.tooltip.show{opacity:.83}.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{padding:4px 10px;white-space:nowrap;max-width:none;border-radius:3px}.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;pointer-events:none}.app-ca-main-tooltip .tooltip-inner .tooltip-holder{display:flex;font-size:11px;font-weight:700;border-radius:2px;padding:2px 8px;animation:scaleItem .3s;white-space:normal}.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}.text-color-black{color:#424242!important}.text-color-black::-moz-selection{background:#42424233!important;color:#424242!important}.text-color-black::selection{background:#42424233!important;color:#424242!important}.text-color-black-2{color:#2f2f2f!important}.text-color-black-2::-moz-selection{background:#2f2f2f33!important;color:#2f2f2f!important}.text-color-black-2::selection{background:#2f2f2f33!important;color:#2f2f2f!important}.text-color-muted{color:#919191!important}.text-color-muted::-moz-selection{background:#91919133!important;color:#919191!important}.text-color-muted::selection{background:#91919133!important;color:#919191!important}.text-color-green{color:#56b4ac!important}.text-color-green::-moz-selection{background:#56b4ac33!important;color:#56b4ac!important}.text-color-green::selection{background:#56b4ac33!important;color:#56b4ac!important}.text-color-blue-13{color:#6692f1!important}.text-color-blue-13::-moz-selection{background:#66921833!important;color:#6692f1!important}.text-color-blue-13::selection{background:#66921833!important;color:#6692f1!important}.text-color-blue-18{color:#3b73ed!important}.text-color-blue-18::-moz-selection{background:#3b73ed33!important;color:#3b73ed!important}.text-color-blue-18::selection{background:#3b73ed33!important;color:#3b73ed!important}.text-color-red-10{color:#e66767!important}.text-color-red-10::-moz-selection{background:#e6676733!important;color:#e66767!important}.text-color-red-10::selection{background:#e6676733!important;color:#e66767!important}.text-color-light-grey{color:#e5e5e5!important}.text-color-light-grey::-moz-selection{background:#e5e5e533!important;color:#e5e5e5!important}.text-color-light-grey::selection{background:#e5e5e533!important;color:#e5e5e5!important}.text-color-light-grey-2{color:#aaa!important}.text-color-light-grey-2::-moz-selection{background:#aaa3!important;color:#aaa!important}.text-color-light-grey-2::selection{background:#aaa3!important;color:#aaa!important}.text-color-light-grey-6{color:#ccc!important}.text-color-light-grey-6::-moz-selection{color:#ccc!important;background:#aaa3!important}.text-color-light-grey-6::selection{color:#ccc!important;background:#aaa3!important}.text-color-white{color:#dadada!important}.text-color-white::-moz-selection{color:#dadada!important;background:#fff3!important}.text-color-white::selection{color:#dadada!important;background:#fff3!important}.text-color-white-4{color:#ffffffb2!important}.text-color-white-4::-moz-selection{color:#ffffffb2!important;background:#fff3!important}.text-color-white-4::selection{color:#ffffffb2!important;background:#fff3!important}.text-color-dark-grey{color:#6c6c6c!important}.text-color-dark-grey::-moz-selection{color:#6c6c6c!important;background:#6c6c6c33!important}.text-color-dark-grey::selection{color:#6c6c6c!important;background:#6c6c6c33!important}.text-color-bw6-2{color:#6c6c6c!important}.text-color-bw6-2::-moz-selection{color:#6c6c6c!important;background:#6c6c6c33!important}.text-color-bw6-2::selection{color:#6c6c6c!important;background:#6c6c6c33!important}.text-color-bw-9{color:#dadada!important}.text-color-bw-9::-moz-selection{color:#6c6c6c!important;background:#6c6c6c33!important}.text-color-bw-9::selection{color:#6c6c6c!important;background:#6c6c6c33!important}.text-color-grey{color:#919191!important}.text-color-grey::-moz-selection{color:#919191!important;background:#91919133!important}.text-color-grey::selection{color:#919191!important;background:#91919133!important}.text-color-grey .address-text::-moz-selection,.text-color-grey .marker-bold-text::-moz-selection{color:#919191!important;background:#91919133!important}.text-color-grey .address-text::selection,.text-color-grey .marker-bold-text::selection{color:#919191!important;background:#91919133!important}.text-size-11{font-size:11px!important;line-height:14px!important}.text-size-14{font-size:14px!important;line-height:18px!important}.text-size-16{font-size:16px!important;line-height:19px!important}.text-size-18{font-size:18px!important;line-height:22px!important}.text-size-26{font-size:26px!important;line-height:32px!important}.text-size-28{font-size:28px!important;line-height:34px!important}@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.svg-fill-black svg path{fill:#424242!important}.svg-fill-muted svg path{fill:#919191!important}.svg-fill-bw-9 svg path{fill:#dadada!important}.svg-fill-light-grey-2 svg path{fill:#aaa!important}.svg-fill-light-grey-6 svg path{fill:#ccc!important}.svg-fill-blue-13 svg path{fill:#6692f1!important}.svg-fill-blue-19 svg path{fill:#92b1f5!important}.svg-fill-blue-26 svg path{fill:#4dc5eb!important}.svg-hover-muted svg path{transition:all .3s ease-in-out}.svg-hover-muted:hover svg path{fill:#919191!important}.svg-hover-black svg path{transition:all .3s ease-in-out}.svg-hover-black:hover svg path{fill:#424242!important}.svg-hover-blue-15 svg path{transition:all .3s ease-in-out}.svg-hover-blue-15:hover svg path{fill:#0b49d1!important}.svg-hover-bw6-2 svg path{transition:all .3s ease-in-out}.svg-hover-bw6-2:hover svg path{fill:#6c6c6c!important}.svg-hover-trash-red svg path{transition:all .3s ease-in-out}.svg-hover-trash-red:hover svg path{fill:#ff5050!important}.svg-hover-red-14 svg path{transition:all .3s ease-in-out}.svg-hover-red-14:hover svg path{fill:#c20c0c!important}.svg-size-12 svg{width:12px;height:12px}.svg-size-14 svg{width:14px;height:14px}.svg-size-16 svg{width:16px;height:16px}.svg-size-18 svg{width:18px;height:18px}.svg-size-44-16 svg{width:44px;height:16px}*{margin:0;font-family:Montserrat,sans-serif}html{scroll-behavior:auto!important}.gm-style-iw-chr,.gm-style-iw-tc{display:none}.gm-style .gm-style-iw-c{border-radius:0}.gm-style-iw{overflow-y:auto!important;overflow-x:hidden!important}.gm-style-iw>div{overflow:visible!important}.infoWindow{overflow:hidden!important}.gm-style-iw-d,.gm-style-iw.gm-style-iw-c{max-height:350px!important}::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}::ng-deep app-ca-tooltip-list .width-small{width:160px}::ng-deep app-ca-tooltip-list .width-medium{width:200px}::ng-deep app-ca-tooltip-list .width-large{width:240px}::ng-deep app-ca-tooltip-list .tooltip-list-container{padding:4px;background-color:#2f2f2f;color:#fff;border-radius:3px;box-shadow:0 4px 8px #0003}::ng-deep app-ca-tooltip-list .tooltip-list-header{margin:0;padding:4px;border-bottom:1px solid #424242}::ng-deep app-ca-tooltip-list .tooltip-list-header span{font-size:11px;font-weight:800;color:#fff;text-align:left}::ng-deep app-ca-tooltip-list .tooltip-list-body-list{margin-top:8px}::ng-deep app-ca-tooltip-list .tooltip-list-body-table{display:table;width:100%;padding:4px}::ng-deep app-ca-tooltip-list .tooltip-list-item{padding:4px;font-size:11px}::ng-deep app-ca-tooltip-list .tooltip-list-inline{line-height:1}::ng-deep app-ca-tooltip-list .table-item-layout{display:table-row;width:100%}::ng-deep app-ca-tooltip-list .table-item-cell{display:table-cell}::ng-deep app-ca-tooltip-list .table-item-cell:not(:last-child){padding-right:10px!important}::ng-deep app-ca-tooltip-list .tooltip-list-item-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px}::ng-deep app-ca-tooltip-list .tooltip-list-item-label{font-size:11px;font-weight:700;color:#fff}::ng-deep app-ca-tooltip-list .tooltip-list-item-value{font-weight:400;font-size:11px;color:#fff}::ng-deep app-ca-tooltip-list .tooltip-list-item-percentage{font-weight:700;font-size:11px;color:#fff}::ng-deep app-ca-tooltip-list .dot-delimiter{margin:0 4px;font-size:.8em;line-height:1;color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: NFormatterPipe, name: "nFormatter" }, { kind: "pipe", type: FormatCurrencyPipe, name: "formatCurrency" }, { kind: "pipe", type: TruncatePipe, name: "truncate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CaTooltipListComponent, isStandalone: true, selector: "app-ca-tooltip-list", inputs: { tooltipList: "tooltipList" }, ngImport: i0, template: "<ng-container\n  [ngTemplateOutlet]=\"\n    tooltipList?.showPercentage ? percentageTemplate : noPercentageTemplate\n  \"\n  [ngTemplateOutletContext]=\"{ tooltipList: tooltipList }\"\n>\n</ng-container>\n\n<ng-template #noPercentageTemplate let-tooltipList=\"tooltipList\">\n  <div\n    class=\"tooltip-list-container\"\n    [ngClass]=\"isSingleItemSelected ? 'width-small' : 'width-medium'\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"tooltipHeader\"\n      [ngTemplateOutletContext]=\"{ tooltipList: tooltipList }\"\n    >\n    </ng-container>\n    <div\n      [ngClass]=\"\n        isSingleItemSelected\n          ? 'tooltip-list-body-list'\n          : 'tooltip-list-body-table'\n      \"\n    >\n      <ng-container\n        *ngFor=\"\n          let item of tooltipList.selectedItems;\n          let indx = index;\n          trackBy: trackByIdentity\n        \"\n        [ngTemplateOutlet]=\"\n          isSingleItemSelected ? listItemTemplate : tableItemTemplate\n        \"\n        [ngTemplateOutletContext]=\"{ item: item }\"\n      >\n      </ng-container>\n      <ng-container\n        *ngFor=\"\n          let item of tooltipList.otherItems;\n          let indx = index;\n          trackBy: trackByIdentity\n        \"\n        [ngTemplateOutlet]=\"\n          isSingleItemSelected ? listItemTemplate : tableItemTemplate\n        \"\n        [ngTemplateOutletContext]=\"{ item: item }\"\n      >\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #percentageTemplate let-tooltipList=\"tooltipList\">\n  <div\n    class=\"tooltip-list-container\"\n    [ngClass]=\"isLessThanFourItemsSelected ? 'width-small' : 'width-large'\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"tooltipHeader; context: { tooltipList: tooltipList }\"\n    >\n    </ng-container>\n    <div\n      [ngClass]=\"\n        isLessThanFourItemsSelected\n          ? 'tooltip-list-body-list'\n          : 'tooltip-list-body-table'\n      \"\n    >\n      <ng-container *ngIf=\"this.tooltipList?.selectedItems?.length >= 1\">\n        <ng-container\n          *ngFor=\"\n            let item of tooltipList.selectedItems;\n            let indx = index;\n            trackBy: trackByIdentity\n          \"\n          [ngTemplateOutlet]=\"\n            isLessThanFourItemsSelected\n              ? listItemPercentageTemplate\n              : tableItemTemplate\n          \"\n          [ngTemplateOutletContext]=\"{ item: item }\"\n        >\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"this.tooltipList?.selectedItems?.length < 1\">\n        <ng-container\n          *ngFor=\"\n            let item of tooltipList.otherItems;\n            let indx = index;\n            trackBy: trackByIdentity\n          \"\n          [ngTemplateOutlet]=\"listItemPercentageTemplate\"\n          [ngTemplateOutletContext]=\"{ item: item }\"\n        >\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #tooltipHeader let-tooltipList=\"tooltipList\">\n  <div class=\"tooltip-list-header\">\n    <span>{{tooltipList.date}}</span>\n  </div>\n</ng-template>\n\n<ng-template #listItemTemplate let-item=\"item\">\n  <div class=\"d-flex flex-column justify-content-between tooltip-list-item\">\n    <div class=\"tooltip-list-inline\">\n      <span\n        class=\"tooltip-list-item-dot\"\n        [style.backgroundColor]=\"item.color\"\n      ></span>\n      <span class=\"tooltip-list-item-label\">{{\n        item.label | truncate: truncateLength\n      }}</span>\n    </div>\n    <span class=\"tooltip-list-item-value\">{{\n      item.isCurrency\n        ? (item.value | formatCurrency: item.isCurrency)\n        : (item.value | nFormatter)\n    }}</span>\n    <ng-container *ngIf=\"item.percentage\">\n      <span class=\"tooltip-list-item-percentage\">{{ item.percentage }}</span>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #listItemPercentageTemplate let-item=\"item\">\n  <div class=\"d-flex flex-column justify-content-between tooltip-list-item\">\n    <div class=\"tooltip-list-inline\">\n      <span\n        class=\"tooltip-list-item-dot\"\n        [style.backgroundColor]=\"item.color\"\n      ></span>\n      <span class=\"tooltip-list-item-label\">{{\n        item.label | truncate: truncateLength\n      }}</span>\n    </div>\n    <div class=\"d-flex align-items-center\">\n      <span class=\"tooltip-list-item-value\">{{\n        item.isCurrency\n          ? (item.value | formatCurrency: item.isCurrency)\n          : (item.value | nFormatter)\n      }}</span>\n      <span class=\"dot-delimiter\">{{\n        constants.VALUE_PERCENTAGE_DELIMITER\n      }}</span>\n      <ng-container *ngIf=\"item.percentage\">\n        <span class=\"tooltip-list-item-percentage\">{{ item.percentage }}</span>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #tableItemTemplate let-item=\"item\">\n  <div class=\"table-item-layout\">\n    <div class=\"table-item-cell\">\n      <span\n        class=\"tooltip-list-item-dot\"\n        [style.backgroundColor]=\"item.color\"\n      ></span>\n      <span class=\"tooltip-list-item-label\">{{\n        item.label | truncate: truncateLength\n      }}</span>\n    </div>\n    <span class=\"text-end table-item-cell tooltip-list-item-value\">{{\n      item.isCurrency\n        ? (item.value | formatCurrency: item.isCurrency)\n        : (item.value | nFormatter)\n    }}</span>\n    <ng-container *ngIf=\"item.percentage\">\n      <span class=\"text-end table-item-cell tooltip-list-item-percentage\">{{\n        item.percentage\n      }}</span>\n    </ng-container>\n  </div>\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap\";@import\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css\";.ca-font-thin{font-weight:100!important}.ca-font-extra-light{font-weight:200!important}.ca-font-light{font-weight:300!important}.ca-font-regular{font-weight:400!important}.ca-font-medium{font-weight:500!important}.ca-font-semi-bold{font-weight:600!important}.ca-font-bold{font-weight:700!important}.ca-font-extra-bold{font-weight:800!important}.ca-font-black{font-weight:900!important}.pickup-delivery-popover{top:-38px!important;max-width:340px!important}.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}.gps_dropdown_popover{top:-38px;max-width:494px}.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:#dadada}.table-progress-popover .progress-dropdown .progress-header .progress-title span{font-weight:400}.table-progress-popover .progress-dropdown .progress-header .progress-total{font-size:14px;line-height:17px;color:#dadada}.table-progress-popover .progress-dropdown .table-progress-bar-container{width:100%;height:8px;margin-top:6px;border-radius:2px;overflow:hidden}.table-progress-popover .progress-dropdown .table-progress-bar-container .table-progress-bar{height:100%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-dual-info-container .progress-info-container{width:50%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container{margin-top:10px}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-title{margin-bottom:2px;font-size:11px;font-weight:700;line-height:14px;color:#ffffffb2}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-text{font-size:14px;line-height:18px;color:#dadada}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@-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}.tooltip{font-size:12px;position:relative}.tooltip.show{opacity:.83}.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{padding:4px 10px;white-space:nowrap;max-width:none;border-radius:3px}.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;pointer-events:none}.app-ca-main-tooltip .tooltip-inner .tooltip-holder{display:flex;font-size:11px;font-weight:700;border-radius:2px;padding:2px 8px;animation:scaleItem .3s;white-space:normal}.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}.text-color-black{color:#424242!important}.text-color-black::-moz-selection{background:#42424233!important;color:#424242!important}.text-color-black::selection{background:#42424233!important;color:#424242!important}.text-color-black-2{color:#2f2f2f!important}.text-color-black-2::-moz-selection{background:#2f2f2f33!important;color:#2f2f2f!important}.text-color-black-2::selection{background:#2f2f2f33!important;color:#2f2f2f!important}.text-color-muted{color:#919191!important}.text-color-muted::-moz-selection{background:#91919133!important;color:#919191!important}.text-color-muted::selection{background:#91919133!important;color:#919191!important}.text-color-green{color:#56b4ac!important}.text-color-green::-moz-selection{background:#56b4ac33!important;color:#56b4ac!important}.text-color-green::selection{background:#56b4ac33!important;color:#56b4ac!important}.text-color-blue-13{color:#6692f1!important}.text-color-blue-13::-moz-selection{background:#66921833!important;color:#6692f1!important}.text-color-blue-13::selection{background:#66921833!important;color:#6692f1!important}.text-color-blue-18{color:#3b73ed!important}.text-color-blue-18::-moz-selection{background:#3b73ed33!important;color:#3b73ed!important}.text-color-blue-18::selection{background:#3b73ed33!important;color:#3b73ed!important}.text-color-red-10{color:#e66767!important}.text-color-red-10::-moz-selection{background:#e6676733!important;color:#e66767!important}.text-color-red-10::selection{background:#e6676733!important;color:#e66767!important}.text-color-light-grey{color:#e5e5e5!important}.text-color-light-grey::-moz-selection{background:#e5e5e533!important;color:#e5e5e5!important}.text-color-light-grey::selection{background:#e5e5e533!important;color:#e5e5e5!important}.text-color-light-grey-2{color:#aaa!important}.text-color-light-grey-2::-moz-selection{background:#aaa3!important;color:#aaa!important}.text-color-light-grey-2::selection{background:#aaa3!important;color:#aaa!important}.text-color-light-grey-6{color:#ccc!important}.text-color-light-grey-6::-moz-selection{color:#ccc!important;background:#aaa3!important}.text-color-light-grey-6::selection{color:#ccc!important;background:#aaa3!important}.text-color-white{color:#dadada!important}.text-color-white::-moz-selection{color:#dadada!important;background:#fff3!important}.text-color-white::selection{color:#dadada!important;background:#fff3!important}.text-color-white-4{color:#ffffffb2!important}.text-color-white-4::-moz-selection{color:#ffffffb2!important;background:#fff3!important}.text-color-white-4::selection{color:#ffffffb2!important;background:#fff3!important}.text-color-dark-grey{color:#6c6c6c!important}.text-color-dark-grey::-moz-selection{color:#6c6c6c!important;background:#6c6c6c33!important}.text-color-dark-grey::selection{color:#6c6c6c!important;background:#6c6c6c33!important}.text-color-bw6-2{color:#6c6c6c!important}.text-color-bw6-2::-moz-selection{color:#6c6c6c!important;background:#6c6c6c33!important}.text-color-bw6-2::selection{color:#6c6c6c!important;background:#6c6c6c33!important}.text-color-bw-9{color:#dadada!important}.text-color-bw-9::-moz-selection{color:#6c6c6c!important;background:#6c6c6c33!important}.text-color-bw-9::selection{color:#6c6c6c!important;background:#6c6c6c33!important}.text-color-grey{color:#919191!important}.text-color-grey::-moz-selection{color:#919191!important;background:#91919133!important}.text-color-grey::selection{color:#919191!important;background:#91919133!important}.text-color-grey .address-text::-moz-selection,.text-color-grey .marker-bold-text::-moz-selection{color:#919191!important;background:#91919133!important}.text-color-grey .address-text::selection,.text-color-grey .marker-bold-text::selection{color:#919191!important;background:#91919133!important}.text-size-11{font-size:11px!important;line-height:14px!important}.text-size-14{font-size:14px!important;line-height:18px!important}.text-size-16{font-size:16px!important;line-height:19px!important}.text-size-18{font-size:18px!important;line-height:22px!important}.text-size-26{font-size:26px!important;line-height:32px!important}.text-size-28{font-size:28px!important;line-height:34px!important}@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.svg-fill-black svg path{fill:#424242!important}.svg-fill-muted svg path{fill:#919191!important}.svg-fill-bw-9 svg path{fill:#dadada!important}.svg-fill-light-grey-2 svg path{fill:#aaa!important}.svg-fill-light-grey-6 svg path{fill:#ccc!important}.svg-fill-blue-13 svg path{fill:#6692f1!important}.svg-fill-blue-19 svg path{fill:#92b1f5!important}.svg-fill-blue-26 svg path{fill:#4dc5eb!important}.svg-hover-muted svg path{transition:all .3s ease-in-out}.svg-hover-muted:hover svg path{fill:#919191!important}.svg-hover-black svg path{transition:all .3s ease-in-out}.svg-hover-black:hover svg path{fill:#424242!important}.svg-hover-blue-15 svg path{transition:all .3s ease-in-out}.svg-hover-blue-15:hover svg path{fill:#0b49d1!important}.svg-hover-bw6-2 svg path{transition:all .3s ease-in-out}.svg-hover-bw6-2:hover svg path{fill:#6c6c6c!important}.svg-hover-trash-red svg path{transition:all .3s ease-in-out}.svg-hover-trash-red:hover svg path{fill:#ff5050!important}.svg-hover-red-14 svg path{transition:all .3s ease-in-out}.svg-hover-red-14:hover svg path{fill:#c20c0c!important}.svg-size-12 svg{width:12px;height:12px}.svg-size-14 svg{width:14px;height:14px}.svg-size-16 svg{width:16px;height:16px}.svg-size-18 svg{width:18px;height:18px}.svg-size-44-16 svg{width:44px;height:16px}*{margin:0;font-family:Montserrat,sans-serif}html{scroll-behavior:auto!important}.gm-style-iw-chr,.gm-style-iw-tc{display:none}.gm-style .gm-style-iw-c{border-radius:0}.gm-style-iw{overflow-y:auto!important;overflow-x:hidden!important}.gm-style-iw>div{overflow:visible!important}.infoWindow{overflow:hidden!important}.gm-style-iw-d,.gm-style-iw.gm-style-iw-c{max-height:350px!important}::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}::ng-deep app-ca-tooltip-list .width-small{width:160px}::ng-deep app-ca-tooltip-list .width-medium{width:200px}::ng-deep app-ca-tooltip-list .width-large{width:240px}::ng-deep app-ca-tooltip-list .tooltip-list-container{padding:4px;background-color:#2f2f2f;color:#fff;border-radius:3px;box-shadow:0 4px 8px #0003}::ng-deep app-ca-tooltip-list .tooltip-list-header{margin:0;padding:4px;border-bottom:1px solid #424242}::ng-deep app-ca-tooltip-list .tooltip-list-header span{font-size:11px;font-weight:800;color:#fff;text-align:left;word-wrap:break-word;word-break:break-word;white-space:normal}::ng-deep app-ca-tooltip-list .tooltip-list-body-list{margin-top:8px}::ng-deep app-ca-tooltip-list .tooltip-list-body-table{display:table;width:100%;padding:4px}::ng-deep app-ca-tooltip-list .tooltip-list-item{padding:4px;font-size:11px}::ng-deep app-ca-tooltip-list .tooltip-list-inline{line-height:1}::ng-deep app-ca-tooltip-list .table-item-layout{display:table-row;width:100%}::ng-deep app-ca-tooltip-list .table-item-cell{display:table-cell}::ng-deep app-ca-tooltip-list .table-item-cell:not(:last-child){padding-right:10px!important}::ng-deep app-ca-tooltip-list .tooltip-list-item-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px}::ng-deep app-ca-tooltip-list .tooltip-list-item-label{font-size:11px;font-weight:700;color:#fff}::ng-deep app-ca-tooltip-list .tooltip-list-item-value{font-weight:400;font-size:11px;color:#fff}::ng-deep app-ca-tooltip-list .tooltip-list-item-percentage{font-weight:700;font-size:11px;color:#fff}::ng-deep app-ca-tooltip-list .dot-delimiter{margin:0 4px;font-size:.8em;line-height:1;color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: NFormatterPipe, name: "nFormatter" }, { kind: "pipe", type: FormatCurrencyPipe, name: "formatCurrency" }, { kind: "pipe", type: TruncatePipe, name: "truncate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CaTooltipListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-ca-tooltip-list', standalone: true, imports: [CommonModule, NFormatterPipe, FormatCurrencyPipe, TruncatePipe], template: "<ng-container\n  [ngTemplateOutlet]=\"\n    tooltipList?.showPercentage ? percentageTemplate : noPercentageTemplate\n  \"\n  [ngTemplateOutletContext]=\"{ tooltipList: tooltipList }\"\n>\n</ng-container>\n\n<ng-template #noPercentageTemplate let-tooltipList=\"tooltipList\">\n  <div\n    class=\"tooltip-list-container\"\n    [ngClass]=\"isSingleItemSelected ? 'width-small' : 'width-medium'\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"tooltipHeader\"\n      [ngTemplateOutletContext]=\"{ tooltipList: tooltipList }\"\n    >\n    </ng-container>\n    <div\n      [ngClass]=\"\n        isSingleItemSelected\n          ? 'tooltip-list-body-list'\n          : 'tooltip-list-body-table'\n      \"\n    >\n      <ng-container\n        *ngFor=\"\n          let item of tooltipList.selectedItems;\n          let indx = index;\n          trackBy: trackByIdentity\n        \"\n        [ngTemplateOutlet]=\"\n          isSingleItemSelected ? listItemTemplate : tableItemTemplate\n        \"\n        [ngTemplateOutletContext]=\"{ item: item }\"\n      >\n      </ng-container>\n      <ng-container\n        *ngFor=\"\n          let item of tooltipList.otherItems;\n          let indx = index;\n          trackBy: trackByIdentity\n        \"\n        [ngTemplateOutlet]=\"\n          isSingleItemSelected ? listItemTemplate : tableItemTemplate\n        \"\n        [ngTemplateOutletContext]=\"{ item: item }\"\n      >\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #percentageTemplate let-tooltipList=\"tooltipList\">\n  <div\n    class=\"tooltip-list-container\"\n    [ngClass]=\"isLessThanFourItemsSelected ? 'width-small' : 'width-large'\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"tooltipHeader; context: { tooltipList: tooltipList }\"\n    >\n    </ng-container>\n    <div\n      [ngClass]=\"\n        isLessThanFourItemsSelected\n          ? 'tooltip-list-body-list'\n          : 'tooltip-list-body-table'\n      \"\n    >\n      <ng-container *ngIf=\"this.tooltipList?.selectedItems?.length >= 1\">\n        <ng-container\n          *ngFor=\"\n            let item of tooltipList.selectedItems;\n            let indx = index;\n            trackBy: trackByIdentity\n          \"\n          [ngTemplateOutlet]=\"\n            isLessThanFourItemsSelected\n              ? listItemPercentageTemplate\n              : tableItemTemplate\n          \"\n          [ngTemplateOutletContext]=\"{ item: item }\"\n        >\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"this.tooltipList?.selectedItems?.length < 1\">\n        <ng-container\n          *ngFor=\"\n            let item of tooltipList.otherItems;\n            let indx = index;\n            trackBy: trackByIdentity\n          \"\n          [ngTemplateOutlet]=\"listItemPercentageTemplate\"\n          [ngTemplateOutletContext]=\"{ item: item }\"\n        >\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #tooltipHeader let-tooltipList=\"tooltipList\">\n  <div class=\"tooltip-list-header\">\n    <ng-container *ngIf=\"tooltipList?.singleDate\">\n      <span>{{ tooltipList.singleDate | uppercase }}</span>\n    </ng-container>\n    <ng-container *ngIf=\"tooltipList?.startDate && tooltipList?.endDate\">\n      <span>{{ tooltipList.startDate }} - {{ tooltipList.endDate }}</span>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #listItemTemplate let-item=\"item\">\n  <div class=\"d-flex flex-column justify-content-between tooltip-list-item\">\n    <div class=\"tooltip-list-inline\">\n      <span\n        class=\"tooltip-list-item-dot\"\n        [style.backgroundColor]=\"item.color\"\n      ></span>\n      <span class=\"tooltip-list-item-label\">{{\n        item.label | truncate: truncateLength\n      }}</span>\n    </div>\n    <span class=\"tooltip-list-item-value\">{{\n      item.isCurrency\n        ? (item.value | formatCurrency: item.isCurrency)\n        : (item.value | nFormatter)\n    }}</span>\n    <ng-container *ngIf=\"item.percentage\">\n      <span class=\"tooltip-list-item-percentage\">{{ item.percentage }}</span>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #listItemPercentageTemplate let-item=\"item\">\n  <div class=\"d-flex flex-column justify-content-between tooltip-list-item\">\n    <div class=\"tooltip-list-inline\">\n      <span\n        class=\"tooltip-list-item-dot\"\n        [style.backgroundColor]=\"item.color\"\n      ></span>\n      <span class=\"tooltip-list-item-label\">{{\n        item.label | truncate: truncateLength\n      }}</span>\n    </div>\n    <div class=\"d-flex align-items-center\">\n      <span class=\"tooltip-list-item-value\">{{\n        item.isCurrency\n          ? (item.value | formatCurrency: item.isCurrency)\n          : (item.value | nFormatter)\n      }}</span>\n      <span class=\"dot-delimiter\">{{\n        constants.VALUE_PERCENTAGE_DELIMITER\n      }}</span>\n      <ng-container *ngIf=\"item.percentage\">\n        <span class=\"tooltip-list-item-percentage\">{{ item.percentage }}</span>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #tableItemTemplate let-item=\"item\">\n  <div class=\"table-item-layout\">\n    <div class=\"table-item-cell\">\n      <span\n        class=\"tooltip-list-item-dot\"\n        [style.backgroundColor]=\"item.color\"\n      ></span>\n      <span class=\"tooltip-list-item-label\">{{\n        item.label | truncate: truncateLength\n      }}</span>\n    </div>\n    <span class=\"text-end table-item-cell tooltip-list-item-value\">{{\n      item.isCurrency\n        ? (item.value | formatCurrency: item.isCurrency)\n        : (item.value | nFormatter)\n    }}</span>\n    <ng-container *ngIf=\"item.percentage\">\n      <span class=\"text-end table-item-cell tooltip-list-item-percentage\">{{\n        item.percentage\n      }}</span>\n    </ng-container>\n  </div>\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap\";@import\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css\";.ca-font-thin{font-weight:100!important}.ca-font-extra-light{font-weight:200!important}.ca-font-light{font-weight:300!important}.ca-font-regular{font-weight:400!important}.ca-font-medium{font-weight:500!important}.ca-font-semi-bold{font-weight:600!important}.ca-font-bold{font-weight:700!important}.ca-font-extra-bold{font-weight:800!important}.ca-font-black{font-weight:900!important}.pickup-delivery-popover{top:-38px!important;max-width:340px!important}.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}.gps_dropdown_popover{top:-38px;max-width:494px}.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:#dadada}.table-progress-popover .progress-dropdown .progress-header .progress-title span{font-weight:400}.table-progress-popover .progress-dropdown .progress-header .progress-total{font-size:14px;line-height:17px;color:#dadada}.table-progress-popover .progress-dropdown .table-progress-bar-container{width:100%;height:8px;margin-top:6px;border-radius:2px;overflow:hidden}.table-progress-popover .progress-dropdown .table-progress-bar-container .table-progress-bar{height:100%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-dual-info-container .progress-info-container{width:50%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container{margin-top:10px}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-title{margin-bottom:2px;font-size:11px;font-weight:700;line-height:14px;color:#ffffffb2}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-text{font-size:14px;line-height:18px;color:#dadada}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@-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}.tooltip{font-size:12px;position:relative}.tooltip.show{opacity:.83}.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{padding:4px 10px;white-space:nowrap;max-width:none;border-radius:3px}.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;pointer-events:none}.app-ca-main-tooltip .tooltip-inner .tooltip-holder{display:flex;font-size:11px;font-weight:700;border-radius:2px;padding:2px 8px;animation:scaleItem .3s;white-space:normal}.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}.text-color-black{color:#424242!important}.text-color-black::-moz-selection{background:#42424233!important;color:#424242!important}.text-color-black::selection{background:#42424233!important;color:#424242!important}.text-color-black-2{color:#2f2f2f!important}.text-color-black-2::-moz-selection{background:#2f2f2f33!important;color:#2f2f2f!important}.text-color-black-2::selection{background:#2f2f2f33!important;color:#2f2f2f!important}.text-color-muted{color:#919191!important}.text-color-muted::-moz-selection{background:#91919133!important;color:#919191!important}.text-color-muted::selection{background:#91919133!important;color:#919191!important}.text-color-green{color:#56b4ac!important}.text-color-green::-moz-selection{background:#56b4ac33!important;color:#56b4ac!important}.text-color-green::selection{background:#56b4ac33!important;color:#56b4ac!important}.text-color-blue-13{color:#6692f1!important}.text-color-blue-13::-moz-selection{background:#66921833!important;color:#6692f1!important}.text-color-blue-13::selection{background:#66921833!important;color:#6692f1!important}.text-color-blue-18{color:#3b73ed!important}.text-color-blue-18::-moz-selection{background:#3b73ed33!important;color:#3b73ed!important}.text-color-blue-18::selection{background:#3b73ed33!important;color:#3b73ed!important}.text-color-red-10{color:#e66767!important}.text-color-red-10::-moz-selection{background:#e6676733!important;color:#e66767!important}.text-color-red-10::selection{background:#e6676733!important;color:#e66767!important}.text-color-light-grey{color:#e5e5e5!important}.text-color-light-grey::-moz-selection{background:#e5e5e533!important;color:#e5e5e5!important}.text-color-light-grey::selection{background:#e5e5e533!important;color:#e5e5e5!important}.text-color-light-grey-2{color:#aaa!important}.text-color-light-grey-2::-moz-selection{background:#aaa3!important;color:#aaa!important}.text-color-light-grey-2::selection{background:#aaa3!important;color:#aaa!important}.text-color-light-grey-6{color:#ccc!important}.text-color-light-grey-6::-moz-selection{color:#ccc!important;background:#aaa3!important}.text-color-light-grey-6::selection{color:#ccc!important;background:#aaa3!important}.text-color-white{color:#dadada!important}.text-color-white::-moz-selection{color:#dadada!important;background:#fff3!important}.text-color-white::selection{color:#dadada!important;background:#fff3!important}.text-color-white-4{color:#ffffffb2!important}.text-color-white-4::-moz-selection{color:#ffffffb2!important;background:#fff3!important}.text-color-white-4::selection{color:#ffffffb2!important;background:#fff3!important}.text-color-dark-grey{color:#6c6c6c!important}.text-color-dark-grey::-moz-selection{color:#6c6c6c!important;background:#6c6c6c33!important}.text-color-dark-grey::selection{color:#6c6c6c!important;background:#6c6c6c33!important}.text-color-bw6-2{color:#6c6c6c!important}.text-color-bw6-2::-moz-selection{color:#6c6c6c!important;background:#6c6c6c33!important}.text-color-bw6-2::selection{color:#6c6c6c!important;background:#6c6c6c33!important}.text-color-bw-9{color:#dadada!important}.text-color-bw-9::-moz-selection{color:#6c6c6c!important;background:#6c6c6c33!important}.text-color-bw-9::selection{color:#6c6c6c!important;background:#6c6c6c33!important}.text-color-grey{color:#919191!important}.text-color-grey::-moz-selection{color:#919191!important;background:#91919133!important}.text-color-grey::selection{color:#919191!important;background:#91919133!important}.text-color-grey .address-text::-moz-selection,.text-color-grey .marker-bold-text::-moz-selection{color:#919191!important;background:#91919133!important}.text-color-grey .address-text::selection,.text-color-grey .marker-bold-text::selection{color:#919191!important;background:#91919133!important}.text-size-11{font-size:11px!important;line-height:14px!important}.text-size-14{font-size:14px!important;line-height:18px!important}.text-size-16{font-size:16px!important;line-height:19px!important}.text-size-18{font-size:18px!important;line-height:22px!important}.text-size-26{font-size:26px!important;line-height:32px!important}.text-size-28{font-size:28px!important;line-height:34px!important}@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.svg-fill-black svg path{fill:#424242!important}.svg-fill-muted svg path{fill:#919191!important}.svg-fill-bw-9 svg path{fill:#dadada!important}.svg-fill-light-grey-2 svg path{fill:#aaa!important}.svg-fill-light-grey-6 svg path{fill:#ccc!important}.svg-fill-blue-13 svg path{fill:#6692f1!important}.svg-fill-blue-19 svg path{fill:#92b1f5!important}.svg-fill-blue-26 svg path{fill:#4dc5eb!important}.svg-hover-muted svg path{transition:all .3s ease-in-out}.svg-hover-muted:hover svg path{fill:#919191!important}.svg-hover-black svg path{transition:all .3s ease-in-out}.svg-hover-black:hover svg path{fill:#424242!important}.svg-hover-blue-15 svg path{transition:all .3s ease-in-out}.svg-hover-blue-15:hover svg path{fill:#0b49d1!important}.svg-hover-bw6-2 svg path{transition:all .3s ease-in-out}.svg-hover-bw6-2:hover svg path{fill:#6c6c6c!important}.svg-hover-trash-red svg path{transition:all .3s ease-in-out}.svg-hover-trash-red:hover svg path{fill:#ff5050!important}.svg-hover-red-14 svg path{transition:all .3s ease-in-out}.svg-hover-red-14:hover svg path{fill:#c20c0c!important}.svg-size-12 svg{width:12px;height:12px}.svg-size-14 svg{width:14px;height:14px}.svg-size-16 svg{width:16px;height:16px}.svg-size-18 svg{width:18px;height:18px}.svg-size-44-16 svg{width:44px;height:16px}*{margin:0;font-family:Montserrat,sans-serif}html{scroll-behavior:auto!important}.gm-style-iw-chr,.gm-style-iw-tc{display:none}.gm-style .gm-style-iw-c{border-radius:0}.gm-style-iw{overflow-y:auto!important;overflow-x:hidden!important}.gm-style-iw>div{overflow:visible!important}.infoWindow{overflow:hidden!important}.gm-style-iw-d,.gm-style-iw.gm-style-iw-c{max-height:350px!important}::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}::ng-deep app-ca-tooltip-list .width-small{width:160px}::ng-deep app-ca-tooltip-list .width-medium{width:200px}::ng-deep app-ca-tooltip-list .width-large{width:240px}::ng-deep app-ca-tooltip-list .tooltip-list-container{padding:4px;background-color:#2f2f2f;color:#fff;border-radius:3px;box-shadow:0 4px 8px #0003}::ng-deep app-ca-tooltip-list .tooltip-list-header{margin:0;padding:4px;border-bottom:1px solid #424242}::ng-deep app-ca-tooltip-list .tooltip-list-header span{font-size:11px;font-weight:800;color:#fff;text-align:left}::ng-deep app-ca-tooltip-list .tooltip-list-body-list{margin-top:8px}::ng-deep app-ca-tooltip-list .tooltip-list-body-table{display:table;width:100%;padding:4px}::ng-deep app-ca-tooltip-list .tooltip-list-item{padding:4px;font-size:11px}::ng-deep app-ca-tooltip-list .tooltip-list-inline{line-height:1}::ng-deep app-ca-tooltip-list .table-item-layout{display:table-row;width:100%}::ng-deep app-ca-tooltip-list .table-item-cell{display:table-cell}::ng-deep app-ca-tooltip-list .table-item-cell:not(:last-child){padding-right:10px!important}::ng-deep app-ca-tooltip-list .tooltip-list-item-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px}::ng-deep app-ca-tooltip-list .tooltip-list-item-label{font-size:11px;font-weight:700;color:#fff}::ng-deep app-ca-tooltip-list .tooltip-list-item-value{font-weight:400;font-size:11px;color:#fff}::ng-deep app-ca-tooltip-list .tooltip-list-item-percentage{font-weight:700;font-size:11px;color:#fff}::ng-deep app-ca-tooltip-list .dot-delimiter{margin:0 4px;font-size:.8em;line-height:1;color:#fff}\n"] }]
+            args: [{ selector: 'app-ca-tooltip-list', standalone: true, imports: [CommonModule, NFormatterPipe, FormatCurrencyPipe, TruncatePipe], template: "<ng-container\n  [ngTemplateOutlet]=\"\n    tooltipList?.showPercentage ? percentageTemplate : noPercentageTemplate\n  \"\n  [ngTemplateOutletContext]=\"{ tooltipList: tooltipList }\"\n>\n</ng-container>\n\n<ng-template #noPercentageTemplate let-tooltipList=\"tooltipList\">\n  <div\n    class=\"tooltip-list-container\"\n    [ngClass]=\"isSingleItemSelected ? 'width-small' : 'width-medium'\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"tooltipHeader\"\n      [ngTemplateOutletContext]=\"{ tooltipList: tooltipList }\"\n    >\n    </ng-container>\n    <div\n      [ngClass]=\"\n        isSingleItemSelected\n          ? 'tooltip-list-body-list'\n          : 'tooltip-list-body-table'\n      \"\n    >\n      <ng-container\n        *ngFor=\"\n          let item of tooltipList.selectedItems;\n          let indx = index;\n          trackBy: trackByIdentity\n        \"\n        [ngTemplateOutlet]=\"\n          isSingleItemSelected ? listItemTemplate : tableItemTemplate\n        \"\n        [ngTemplateOutletContext]=\"{ item: item }\"\n      >\n      </ng-container>\n      <ng-container\n        *ngFor=\"\n          let item of tooltipList.otherItems;\n          let indx = index;\n          trackBy: trackByIdentity\n        \"\n        [ngTemplateOutlet]=\"\n          isSingleItemSelected ? listItemTemplate : tableItemTemplate\n        \"\n        [ngTemplateOutletContext]=\"{ item: item }\"\n      >\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #percentageTemplate let-tooltipList=\"tooltipList\">\n  <div\n    class=\"tooltip-list-container\"\n    [ngClass]=\"isLessThanFourItemsSelected ? 'width-small' : 'width-large'\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"tooltipHeader; context: { tooltipList: tooltipList }\"\n    >\n    </ng-container>\n    <div\n      [ngClass]=\"\n        isLessThanFourItemsSelected\n          ? 'tooltip-list-body-list'\n          : 'tooltip-list-body-table'\n      \"\n    >\n      <ng-container *ngIf=\"this.tooltipList?.selectedItems?.length >= 1\">\n        <ng-container\n          *ngFor=\"\n            let item of tooltipList.selectedItems;\n            let indx = index;\n            trackBy: trackByIdentity\n          \"\n          [ngTemplateOutlet]=\"\n            isLessThanFourItemsSelected\n              ? listItemPercentageTemplate\n              : tableItemTemplate\n          \"\n          [ngTemplateOutletContext]=\"{ item: item }\"\n        >\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"this.tooltipList?.selectedItems?.length < 1\">\n        <ng-container\n          *ngFor=\"\n            let item of tooltipList.otherItems;\n            let indx = index;\n            trackBy: trackByIdentity\n          \"\n          [ngTemplateOutlet]=\"listItemPercentageTemplate\"\n          [ngTemplateOutletContext]=\"{ item: item }\"\n        >\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #tooltipHeader let-tooltipList=\"tooltipList\">\n  <div class=\"tooltip-list-header\">\n    <span>{{tooltipList.date}}</span>\n  </div>\n</ng-template>\n\n<ng-template #listItemTemplate let-item=\"item\">\n  <div class=\"d-flex flex-column justify-content-between tooltip-list-item\">\n    <div class=\"tooltip-list-inline\">\n      <span\n        class=\"tooltip-list-item-dot\"\n        [style.backgroundColor]=\"item.color\"\n      ></span>\n      <span class=\"tooltip-list-item-label\">{{\n        item.label | truncate: truncateLength\n      }}</span>\n    </div>\n    <span class=\"tooltip-list-item-value\">{{\n      item.isCurrency\n        ? (item.value | formatCurrency: item.isCurrency)\n        : (item.value | nFormatter)\n    }}</span>\n    <ng-container *ngIf=\"item.percentage\">\n      <span class=\"tooltip-list-item-percentage\">{{ item.percentage }}</span>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #listItemPercentageTemplate let-item=\"item\">\n  <div class=\"d-flex flex-column justify-content-between tooltip-list-item\">\n    <div class=\"tooltip-list-inline\">\n      <span\n        class=\"tooltip-list-item-dot\"\n        [style.backgroundColor]=\"item.color\"\n      ></span>\n      <span class=\"tooltip-list-item-label\">{{\n        item.label | truncate: truncateLength\n      }}</span>\n    </div>\n    <div class=\"d-flex align-items-center\">\n      <span class=\"tooltip-list-item-value\">{{\n        item.isCurrency\n          ? (item.value | formatCurrency: item.isCurrency)\n          : (item.value | nFormatter)\n      }}</span>\n      <span class=\"dot-delimiter\">{{\n        constants.VALUE_PERCENTAGE_DELIMITER\n      }}</span>\n      <ng-container *ngIf=\"item.percentage\">\n        <span class=\"tooltip-list-item-percentage\">{{ item.percentage }}</span>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #tableItemTemplate let-item=\"item\">\n  <div class=\"table-item-layout\">\n    <div class=\"table-item-cell\">\n      <span\n        class=\"tooltip-list-item-dot\"\n        [style.backgroundColor]=\"item.color\"\n      ></span>\n      <span class=\"tooltip-list-item-label\">{{\n        item.label | truncate: truncateLength\n      }}</span>\n    </div>\n    <span class=\"text-end table-item-cell tooltip-list-item-value\">{{\n      item.isCurrency\n        ? (item.value | formatCurrency: item.isCurrency)\n        : (item.value | nFormatter)\n    }}</span>\n    <ng-container *ngIf=\"item.percentage\">\n      <span class=\"text-end table-item-cell tooltip-list-item-percentage\">{{\n        item.percentage\n      }}</span>\n    </ng-container>\n  </div>\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap\";@import\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css\";.ca-font-thin{font-weight:100!important}.ca-font-extra-light{font-weight:200!important}.ca-font-light{font-weight:300!important}.ca-font-regular{font-weight:400!important}.ca-font-medium{font-weight:500!important}.ca-font-semi-bold{font-weight:600!important}.ca-font-bold{font-weight:700!important}.ca-font-extra-bold{font-weight:800!important}.ca-font-black{font-weight:900!important}.pickup-delivery-popover{top:-38px!important;max-width:340px!important}.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}.gps_dropdown_popover{top:-38px;max-width:494px}.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:#dadada}.table-progress-popover .progress-dropdown .progress-header .progress-title span{font-weight:400}.table-progress-popover .progress-dropdown .progress-header .progress-total{font-size:14px;line-height:17px;color:#dadada}.table-progress-popover .progress-dropdown .table-progress-bar-container{width:100%;height:8px;margin-top:6px;border-radius:2px;overflow:hidden}.table-progress-popover .progress-dropdown .table-progress-bar-container .table-progress-bar{height:100%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-dual-info-container .progress-info-container{width:50%}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container{margin-top:10px}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-title{margin-bottom:2px;font-size:11px;font-weight:700;line-height:14px;color:#ffffffb2}.table-progress-popover .progress-dropdown .progress-dropdown-body .progress-info-container .progress-info-text{font-size:14px;line-height:18px;color:#dadada}.table-progress-popover .progress-dropdown.credit-dropdown{height:100px}@-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}.tooltip{font-size:12px;position:relative}.tooltip.show{opacity:.83}.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{padding:4px 10px;white-space:nowrap;max-width:none;border-radius:3px}.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;pointer-events:none}.app-ca-main-tooltip .tooltip-inner .tooltip-holder{display:flex;font-size:11px;font-weight:700;border-radius:2px;padding:2px 8px;animation:scaleItem .3s;white-space:normal}.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}.text-color-black{color:#424242!important}.text-color-black::-moz-selection{background:#42424233!important;color:#424242!important}.text-color-black::selection{background:#42424233!important;color:#424242!important}.text-color-black-2{color:#2f2f2f!important}.text-color-black-2::-moz-selection{background:#2f2f2f33!important;color:#2f2f2f!important}.text-color-black-2::selection{background:#2f2f2f33!important;color:#2f2f2f!important}.text-color-muted{color:#919191!important}.text-color-muted::-moz-selection{background:#91919133!important;color:#919191!important}.text-color-muted::selection{background:#91919133!important;color:#919191!important}.text-color-green{color:#56b4ac!important}.text-color-green::-moz-selection{background:#56b4ac33!important;color:#56b4ac!important}.text-color-green::selection{background:#56b4ac33!important;color:#56b4ac!important}.text-color-blue-13{color:#6692f1!important}.text-color-blue-13::-moz-selection{background:#66921833!important;color:#6692f1!important}.text-color-blue-13::selection{background:#66921833!important;color:#6692f1!important}.text-color-blue-18{color:#3b73ed!important}.text-color-blue-18::-moz-selection{background:#3b73ed33!important;color:#3b73ed!important}.text-color-blue-18::selection{background:#3b73ed33!important;color:#3b73ed!important}.text-color-red-10{color:#e66767!important}.text-color-red-10::-moz-selection{background:#e6676733!important;color:#e66767!important}.text-color-red-10::selection{background:#e6676733!important;color:#e66767!important}.text-color-light-grey{color:#e5e5e5!important}.text-color-light-grey::-moz-selection{background:#e5e5e533!important;color:#e5e5e5!important}.text-color-light-grey::selection{background:#e5e5e533!important;color:#e5e5e5!important}.text-color-light-grey-2{color:#aaa!important}.text-color-light-grey-2::-moz-selection{background:#aaa3!important;color:#aaa!important}.text-color-light-grey-2::selection{background:#aaa3!important;color:#aaa!important}.text-color-light-grey-6{color:#ccc!important}.text-color-light-grey-6::-moz-selection{color:#ccc!important;background:#aaa3!important}.text-color-light-grey-6::selection{color:#ccc!important;background:#aaa3!important}.text-color-white{color:#dadada!important}.text-color-white::-moz-selection{color:#dadada!important;background:#fff3!important}.text-color-white::selection{color:#dadada!important;background:#fff3!important}.text-color-white-4{color:#ffffffb2!important}.text-color-white-4::-moz-selection{color:#ffffffb2!important;background:#fff3!important}.text-color-white-4::selection{color:#ffffffb2!important;background:#fff3!important}.text-color-dark-grey{color:#6c6c6c!important}.text-color-dark-grey::-moz-selection{color:#6c6c6c!important;background:#6c6c6c33!important}.text-color-dark-grey::selection{color:#6c6c6c!important;background:#6c6c6c33!important}.text-color-bw6-2{color:#6c6c6c!important}.text-color-bw6-2::-moz-selection{color:#6c6c6c!important;background:#6c6c6c33!important}.text-color-bw6-2::selection{color:#6c6c6c!important;background:#6c6c6c33!important}.text-color-bw-9{color:#dadada!important}.text-color-bw-9::-moz-selection{color:#6c6c6c!important;background:#6c6c6c33!important}.text-color-bw-9::selection{color:#6c6c6c!important;background:#6c6c6c33!important}.text-color-grey{color:#919191!important}.text-color-grey::-moz-selection{color:#919191!important;background:#91919133!important}.text-color-grey::selection{color:#919191!important;background:#91919133!important}.text-color-grey .address-text::-moz-selection,.text-color-grey .marker-bold-text::-moz-selection{color:#919191!important;background:#91919133!important}.text-color-grey .address-text::selection,.text-color-grey .marker-bold-text::selection{color:#919191!important;background:#91919133!important}.text-size-11{font-size:11px!important;line-height:14px!important}.text-size-14{font-size:14px!important;line-height:18px!important}.text-size-16{font-size:16px!important;line-height:19px!important}.text-size-18{font-size:18px!important;line-height:22px!important}.text-size-26{font-size:26px!important;line-height:32px!important}.text-size-28{font-size:28px!important;line-height:34px!important}@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.svg-fill-black svg path{fill:#424242!important}.svg-fill-muted svg path{fill:#919191!important}.svg-fill-bw-9 svg path{fill:#dadada!important}.svg-fill-light-grey-2 svg path{fill:#aaa!important}.svg-fill-light-grey-6 svg path{fill:#ccc!important}.svg-fill-blue-13 svg path{fill:#6692f1!important}.svg-fill-blue-19 svg path{fill:#92b1f5!important}.svg-fill-blue-26 svg path{fill:#4dc5eb!important}.svg-hover-muted svg path{transition:all .3s ease-in-out}.svg-hover-muted:hover svg path{fill:#919191!important}.svg-hover-black svg path{transition:all .3s ease-in-out}.svg-hover-black:hover svg path{fill:#424242!important}.svg-hover-blue-15 svg path{transition:all .3s ease-in-out}.svg-hover-blue-15:hover svg path{fill:#0b49d1!important}.svg-hover-bw6-2 svg path{transition:all .3s ease-in-out}.svg-hover-bw6-2:hover svg path{fill:#6c6c6c!important}.svg-hover-trash-red svg path{transition:all .3s ease-in-out}.svg-hover-trash-red:hover svg path{fill:#ff5050!important}.svg-hover-red-14 svg path{transition:all .3s ease-in-out}.svg-hover-red-14:hover svg path{fill:#c20c0c!important}.svg-size-12 svg{width:12px;height:12px}.svg-size-14 svg{width:14px;height:14px}.svg-size-16 svg{width:16px;height:16px}.svg-size-18 svg{width:18px;height:18px}.svg-size-44-16 svg{width:44px;height:16px}*{margin:0;font-family:Montserrat,sans-serif}html{scroll-behavior:auto!important}.gm-style-iw-chr,.gm-style-iw-tc{display:none}.gm-style .gm-style-iw-c{border-radius:0}.gm-style-iw{overflow-y:auto!important;overflow-x:hidden!important}.gm-style-iw>div{overflow:visible!important}.infoWindow{overflow:hidden!important}.gm-style-iw-d,.gm-style-iw.gm-style-iw-c{max-height:350px!important}::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}::ng-deep app-ca-tooltip-list .width-small{width:160px}::ng-deep app-ca-tooltip-list .width-medium{width:200px}::ng-deep app-ca-tooltip-list .width-large{width:240px}::ng-deep app-ca-tooltip-list .tooltip-list-container{padding:4px;background-color:#2f2f2f;color:#fff;border-radius:3px;box-shadow:0 4px 8px #0003}::ng-deep app-ca-tooltip-list .tooltip-list-header{margin:0;padding:4px;border-bottom:1px solid #424242}::ng-deep app-ca-tooltip-list .tooltip-list-header span{font-size:11px;font-weight:800;color:#fff;text-align:left;word-wrap:break-word;word-break:break-word;white-space:normal}::ng-deep app-ca-tooltip-list .tooltip-list-body-list{margin-top:8px}::ng-deep app-ca-tooltip-list .tooltip-list-body-table{display:table;width:100%;padding:4px}::ng-deep app-ca-tooltip-list .tooltip-list-item{padding:4px;font-size:11px}::ng-deep app-ca-tooltip-list .tooltip-list-inline{line-height:1}::ng-deep app-ca-tooltip-list .table-item-layout{display:table-row;width:100%}::ng-deep app-ca-tooltip-list .table-item-cell{display:table-cell}::ng-deep app-ca-tooltip-list .table-item-cell:not(:last-child){padding-right:10px!important}::ng-deep app-ca-tooltip-list .tooltip-list-item-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px}::ng-deep app-ca-tooltip-list .tooltip-list-item-label{font-size:11px;font-weight:700;color:#fff}::ng-deep app-ca-tooltip-list .tooltip-list-item-value{font-weight:400;font-size:11px;color:#fff}::ng-deep app-ca-tooltip-list .tooltip-list-item-percentage{font-weight:700;font-size:11px;color:#fff}::ng-deep app-ca-tooltip-list .dot-delimiter{margin:0 4px;font-size:.8em;line-height:1;color:#fff}\n"] }]
         }], propDecorators: { tooltipList: [{
                 type: Input
             }] } });
 
+class CaChartManagerComponent {
+    constructor(chartManagerService, cdr) {
+        this.chartManagerService = chartManagerService;
+        this.cdr = cdr;
+        this.chartConfigs = [];
+        this.tooltipLables = [];
+        this.chartDatasetHover = null;
+        this.hoveredIndex = null;
+        this.hoveredChartId = null;
+        this.tooltipList = null;
+        this.tooltipPosition = { x: 0, y: 0 };
+        this.chartManagerService.hoverState$.subscribe(({ index, chartId }) => {
+            this.hoveredIndex = index;
+            this.hoveredChartId = chartId;
+            this.updateTooltipList(this.hoveredIndex);
+            this.cdr.markForCheck();
+        });
+    }
+    trackByIndex(index) {
+        return index;
+    }
+    onMouseMove(event) {
+        const containerRect = this.chartManagerContainer.nativeElement.getBoundingClientRect();
+        const padding = 100;
+        let x = event.clientX - containerRect.left + padding;
+        let y = event.clientY - containerRect.top + padding;
+        if (this.tooltipContainer) {
+            const tooltipWidth = this.tooltipContainer.nativeElement.offsetWidth;
+            const tooltipHeight = this.tooltipContainer.nativeElement.offsetHeight;
+            // Adjust Y position if the tooltip goes above the top of container
+            if (y < tooltipHeight / 2)
+                y = tooltipHeight / 2 + padding;
+            // Adjust Y position if the tooltip goes below the container
+            if (y + tooltipHeight / 2 > containerRect.height)
+                y = containerRect.height - tooltipHeight / 2 - padding;
+            // Adjust X position if it overflows the right edge
+            if (x + tooltipWidth > containerRect.width)
+                x = event.clientX - containerRect.left - tooltipWidth - padding; // Move tooltip to the left
+        }
+        this.tooltipPosition = { x, y };
+    }
+    updateTooltipList(index) {
+        if (index === null || !this.chartConfigs.length) {
+            this.tooltipList = null;
+            return;
+        }
+        const selectedItems = [];
+        const otherItems = [];
+        this.chartConfigs.forEach((config) => {
+            const visibleDatasets = config.chartData.datasets.filter((dataset) => !dataset.hidden);
+            visibleDatasets.forEach((dataset) => {
+                const rawData = dataset.data[index];
+                const value = Array.isArray(rawData) ? rawData[0] : rawData;
+                const tooltipItem = {
+                    label: dataset.label,
+                    value: value || 0,
+                    isCurrency: dataset.isCurrency || false,
+                    color: dataset.borderColor || "#FFFFFF" /* ChartColorsStringEnum.WHITE */,
+                };
+                if (config.isTooltipItemInSelectedItems)
+                    selectedItems.push(tooltipItem);
+                else
+                    otherItems.push(tooltipItem);
+            });
+        });
+        this.tooltipList = {
+            date: this.tooltipLables[index],
+            selectedItems: selectedItems,
+            otherItems: otherItems,
+            showPercentage: false,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CaChartManagerComponent, deps: [{ token: ChartManagerService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CaChartManagerComponent, isStandalone: true, selector: "app-ca-chart-manager", inputs: { chartConfigs: "chartConfigs", tooltipLables: "tooltipLables", chartDatasetHover: "chartDatasetHover" }, providers: [ChartManagerService], viewQueries: [{ propertyName: "chartManagerContainer", first: true, predicate: ["chartManagerContainer"], descendants: true }, { propertyName: "tooltipContainer", first: true, predicate: ["tooltipContainer"], descendants: true }], ngImport: i0, template: "<div\n    #chartManagerContainer\n    class=\"chart-manager-container\"\n    (mousemove)=\"onMouseMove($event)\"\n>\n    @for (chartConfig of chartConfigs; let i = $index; track trackByIndex) {\n        <app-ca-chart\n            [chartConfig]=\"chartConfig\"\n            [chartId]=\"'chart-' + i\"\n            [chartDatasetHover]=\"\n                chartConfig?.isDatasetHoverEnabled ? chartDatasetHover : null\n            \"\n        >\n        </app-ca-chart>\n    }\n\n    @if (hoveredIndex !== null) {\n        <div\n            #tooltipContainer\n            class=\"tooltip-container\"\n            [style.top.px]=\"tooltipPosition.y\"\n            [style.left.px]=\"tooltipPosition.x\"\n        >\n            <app-ca-tooltip-list [tooltipList]=\"tooltipList\">\n            </app-ca-tooltip-list>\n        </div>\n    }\n</div>\n", styles: ["::ng-deep app-ca-chart-manager .chart-manager-container{position:relative;overflow:hidden}::ng-deep app-ca-chart-manager .tooltip-container{position:absolute;pointer-events:none;z-index:1000;transform:translateY(-50%);white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: 
+                //Components
+                CaChartComponent, selector: "app-ca-chart", inputs: ["chartId", "chartDatasetHover", "chartConfig"], outputs: ["hoveredIndex"] }, { kind: "component", type: CaTooltipListComponent, selector: "app-ca-tooltip-list", inputs: ["tooltipList"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CaChartManagerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-ca-chart-manager', standalone: true, imports: [
+                        CommonModule,
+                        //Components
+                        CaChartComponent,
+                        CaTooltipListComponent,
+                    ], providers: [ChartManagerService], template: "<div\n    #chartManagerContainer\n    class=\"chart-manager-container\"\n    (mousemove)=\"onMouseMove($event)\"\n>\n    @for (chartConfig of chartConfigs; let i = $index; track trackByIndex) {\n        <app-ca-chart\n            [chartConfig]=\"chartConfig\"\n            [chartId]=\"'chart-' + i\"\n            [chartDatasetHover]=\"\n                chartConfig?.isDatasetHoverEnabled ? chartDatasetHover : null\n            \"\n        >\n        </app-ca-chart>\n    }\n\n    @if (hoveredIndex !== null) {\n        <div\n            #tooltipContainer\n            class=\"tooltip-container\"\n            [style.top.px]=\"tooltipPosition.y\"\n            [style.left.px]=\"tooltipPosition.x\"\n        >\n            <app-ca-tooltip-list [tooltipList]=\"tooltipList\">\n            </app-ca-tooltip-list>\n        </div>\n    }\n</div>\n", styles: ["::ng-deep app-ca-chart-manager .chart-manager-container{position:relative;overflow:hidden}::ng-deep app-ca-chart-manager .tooltip-container{position:absolute;pointer-events:none;z-index:1000;transform:translateY(-50%);white-space:nowrap}\n"] }]
+        }], ctorParameters: () => [{ type: ChartManagerService }, { type: i0.ChangeDetectorRef }], propDecorators: { chartConfigs: [{
+                type: Input
+            }], tooltipLables: [{
+                type: Input
+            }], chartDatasetHover: [{
+                type: Input
+            }], chartManagerContainer: [{
+                type: ViewChild,
+                args: ['chartManagerContainer']
+            }], tooltipContainer: [{
+                type: ViewChild,
+                args: ['tooltipContainer']
+            }] } });
+
 var eProgressRangePrice;
 (function (eProgressRangePrice) {
     eProgressRangePrice[eProgressRangePrice["Expired"] = 0] = "Expired";
@@ -24038,6 +24434,7 @@ class CaComponentsLibModule {
             CaRightSidePanelTopBarComponent,
             CaRightSidePanelComponent,
             CaChartComponent,
+            CaChartManagerComponent,
             CaDropdownMenuComponent,
             CaUploadFilesComponent,
             CaRightSidePanelCompanyComponent,
@@ -24069,6 +24466,7 @@ class CaComponentsLibModule {
             CaRightSidePanelTopBarComponent,
             CaRightSidePanelComponent,
             CaChartComponent,
+            CaChartManagerComponent,
             CaDropdownMenuComponent,
             CaUploadFilesComponent,
             CaRightSidePanelCompanyComponent,
@@ -24105,6 +24503,7 @@ class CaComponentsLibModule {
             CaRightSidePanelTopBarComponent,
             CaRightSidePanelComponent,
             CaChartComponent,
+            CaChartManagerComponent,
             CaDropdownMenuComponent,
             CaUploadFilesComponent,
             CaRightSidePanelCompanyComponent,
@@ -24146,6 +24545,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         CaRightSidePanelTopBarComponent,
                         CaRightSidePanelComponent,
                         CaChartComponent,
+                        CaChartManagerComponent,
                         CaDropdownMenuComponent,
                         CaUploadFilesComponent,
                         CaRightSidePanelCompanyComponent,
@@ -24181,6 +24581,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         CaRightSidePanelTopBarComponent,
                         CaRightSidePanelComponent,
                         CaChartComponent,
+                        CaChartManagerComponent,
                         CaDropdownMenuComponent,
                         CaUploadFilesComponent,
                         CaRightSidePanelCompanyComponent,
@@ -24434,5 +24835,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CaActivityLogListComponent, CaAppTooltipV2Component, CaChartComponent, CaComponentsLibModule, CaDetailsDropdownComponent, CaDropdownMenuComponent, CaFilterComponent, CaInputAddressDropdownComponent, CaInputComponent, CaInputDropdownComponent, CaInputNoteComponent, CaInputRadiobuttonsComponent, CaMainTableComponent, CaMapComponent, CaMapDropdownComponent, CaModalButtonComponent, CaModalComponent, CaNoteComponent, CaNoteContainerComponent, CaPayrollListSummaryOverviewComponent, CaPayrollListSummaryOverviewTableComponent, CaPeriodContentComponent, CaProfileImageComponent, CaProgressExpirationComponent, CaProgressRangeComponent, CaRatingReviewComponent, CaRightSidePanelCompanyComponent, CaRightSidePanelComponent, CaRightSidePanelMenuComponent, CaRightSidePanelTopBarComponent, CaSearchMultipleStatesComponent, CaSearchMultipleStatesService, CaSortDropdownComponent, CaSpinnerComponent, CaTodoComponent, CaTooltipListComponent, CaTruckTrailerProgresBarComponent, CaUploadFilesComponent, ChartEventTypesStringEnum, ChartFontPropertiesStringEnum, ChartPluginIdsStringEnum, CubicInterpolationStringEnum, EChartAnnotationType, EChartEventProperties, MapHelper, MapInfoWindowOptionsConstants, MapMarkerIconHelper, MapOptionsConstants, PayrollTypeEnum, PickupDeliveryBlockComponent, ProgressBarComponent, SortDropdownEnum, eProgressRangePrice, eProgressRangeTooltipPosition, eProgressRangeUnit, userInfoEnum };
+export { CaActivityLogListComponent, CaAppTooltipV2Component, CaChartComponent, CaChartManagerComponent, CaComponentsLibModule, CaDetailsDropdownComponent, CaDropdownMenuComponent, CaFilterComponent, CaInputAddressDropdownComponent, CaInputComponent, CaInputDropdownComponent, CaInputNoteComponent, CaInputRadiobuttonsComponent, CaMainTableComponent, CaMapComponent, CaMapDropdownComponent, CaModalButtonComponent, CaModalComponent, CaNoteComponent, CaNoteContainerComponent, CaPayrollListSummaryOverviewComponent, CaPayrollListSummaryOverviewTableComponent, CaPeriodContentComponent, CaProfileImageComponent, CaProgressExpirationComponent, CaProgressRangeComponent, CaRatingReviewComponent, CaRightSidePanelCompanyComponent, CaRightSidePanelComponent, CaRightSidePanelMenuComponent, CaRightSidePanelTopBarComponent, CaSearchMultipleStatesComponent, CaSearchMultipleStatesService, CaSortDropdownComponent, CaSpinnerComponent, CaTodoComponent, CaTooltipListComponent, CaTruckTrailerProgresBarComponent, CaUploadFilesComponent, ChartEventTypesStringEnum, ChartFontPropertiesStringEnum, ChartPluginIdsStringEnum, CubicInterpolationStringEnum, EChartAnnotationType, EChartEventProperties, MapHelper, MapInfoWindowOptionsConstants, MapMarkerIconHelper, MapOptionsConstants, PayrollTypeEnum, PickupDeliveryBlockComponent, ProgressBarComponent, SortDropdownEnum, eProgressRangePrice, eProgressRangeTooltipPosition, eProgressRangeUnit, userInfoEnum };
 //# sourceMappingURL=ca-components.mjs.map