ca-components 1.0.70 → 1.0.71

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';
@@ -23205,6 +23205,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 +23262,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 +23333,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 +23389,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 +23416,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 +23459,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 +23489,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 +23636,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 +23678,7 @@ class CaChartComponent {
                         display: false,
                     },
                     ticks: {
+                        display: true,
                         padding: 0,
                         color: "#919191" /* ChartColorsStringEnum.X_AXIS_LABEL_COLOR */,
                         font: {
@@ -23504,7 +23690,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 +23706,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 +23769,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 +23893,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 +23903,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 +23980,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 +24028,7 @@ class CaTooltipListConstants {
 
 class CaTooltipListComponent {
     constructor() {
+        this.tooltipList = null;
         this.constants = CaTooltipListConstants;
         this.truncateLength = 18;
     }
@@ -23742,22 +24036,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) {\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) {\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 +24431,7 @@ class CaComponentsLibModule {
             CaRightSidePanelTopBarComponent,
             CaRightSidePanelComponent,
             CaChartComponent,
+            CaChartManagerComponent,
             CaDropdownMenuComponent,
             CaUploadFilesComponent,
             CaRightSidePanelCompanyComponent,
@@ -24069,6 +24463,7 @@ class CaComponentsLibModule {
             CaRightSidePanelTopBarComponent,
             CaRightSidePanelComponent,
             CaChartComponent,
+            CaChartManagerComponent,
             CaDropdownMenuComponent,
             CaUploadFilesComponent,
             CaRightSidePanelCompanyComponent,
@@ -24105,6 +24500,7 @@ class CaComponentsLibModule {
             CaRightSidePanelTopBarComponent,
             CaRightSidePanelComponent,
             CaChartComponent,
+            CaChartManagerComponent,
             CaDropdownMenuComponent,
             CaUploadFilesComponent,
             CaRightSidePanelCompanyComponent,
@@ -24146,6 +24542,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         CaRightSidePanelTopBarComponent,
                         CaRightSidePanelComponent,
                         CaChartComponent,
+                        CaChartManagerComponent,
                         CaDropdownMenuComponent,
                         CaUploadFilesComponent,
                         CaRightSidePanelCompanyComponent,
@@ -24181,6 +24578,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         CaRightSidePanelTopBarComponent,
                         CaRightSidePanelComponent,
                         CaChartComponent,
+                        CaChartManagerComponent,
                         CaDropdownMenuComponent,
                         CaUploadFilesComponent,
                         CaRightSidePanelCompanyComponent,
@@ -24434,5 +24832,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