axidio-styleguide-library1-v2 0.2.48 → 0.2.49

package/fesm2022/axidio-styleguide-library1-v2.mjs

@@ -6488,8 +6488,11 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             LONG_TICK_LENGTH: 16,
             SHORT_TICK_LENGTH_BG: 5,
             LONG_TICK_LENGTH_BG: 30,
-            FIXED_BAR_WIDTH: 40, // Fixed bar width for all resolutions
-            FIXED_BAR_PADDING: 0, // Fixed padding
+            MIN_MOBILE_BAR_WIDTH: 28, // Adjusted for better mobile fit
+            DESKTOP_MIN_BAR_WIDTH: 40,
+            TABLET_MIN_BAR_WIDTH: 35, // Added tablet-specific width
+            MOBILE_BAR_PADDING: 10, // Reduced padding for mobile
+            TABLET_BAR_PADDING: 8, // Added tablet-specific padding
             ZOOM_THRESHOLD: 30,
             ZOOM_IN_THRESHOLD: 8,
         };
@@ -6554,6 +6557,48 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
     removeExistingChart() {
         d3.select('#' + this.uniqueId).remove();
     }
+    getDeviceConfig() {
+        const width = window.innerWidth;
+        return {
+            isMobile: width < 768, // Changed from 576 to 768 for better mobile coverage
+            isTablet: width >= 768 && width < 1024, // Changed from 576-992 to 768-1024
+            isDesktop: width >= 1024, // Changed from 992 to 1024
+        };
+    }
+    configureResponsiveSettings(device) {
+        if (device.isMobile) {
+            this.chartConfiguration.margin = { top: 15, right: 5, bottom: 35, left: 25 };
+            this.chartConfiguration.numberOfYTicks = 4;
+            this.chartConfiguration.svgHeight = 55;
+        }
+        else if (device.isTablet) {
+            this.chartConfiguration.margin = { top: 20, right: 15, bottom: 40, left: 35 };
+            this.chartConfiguration.numberOfYTicks = 5;
+            this.chartConfiguration.svgHeight = 65;
+        }
+        else {
+            // Desktop/Large screens
+            const width = window.innerWidth;
+            if (width >= 1920) {
+                // Large monitors
+                this.chartConfiguration.margin = { top: 35, right: 35, bottom: 55, left: 70 };
+                this.chartConfiguration.numberOfYTicks = 8;
+                this.chartConfiguration.svgHeight = 85;
+            }
+            else if (width >= 1366) {
+                // Medium monitors
+                this.chartConfiguration.margin = { top: 30, right: 30, bottom: 50, left: 60 };
+                this.chartConfiguration.numberOfYTicks = 7;
+                this.chartConfiguration.svgHeight = 80;
+            }
+            else {
+                // Small desktops/laptops
+                this.chartConfiguration.margin = { top: 25, right: 25, bottom: 45, left: 50 };
+                this.chartConfiguration.numberOfYTicks = 6;
+                this.chartConfiguration.svgHeight = 75;
+            }
+        }
+    }
     mergeConfigurations() {
         for (const key in this.defaultConfiguration) {
             this.chartConfiguration[key] = ChartHelper.getValueByConfigurationType(key, this.defaultConfiguration, this.customChartConfiguration);
@@ -6572,18 +6617,26 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         }
         return metaData;
     }
-    calculateDimensions(chartContainer, verticalContainer, margin, dataLength) {
+    calculateDimensions(chartContainer, verticalContainer, margin, device, dataLength) {
         const containerWidth = chartContainer.node().getBoundingClientRect().width;
         const containerHeight = verticalContainer.node().getBoundingClientRect().height;
         let width = containerWidth - margin.left - margin.right;
         let height = containerHeight * (this.chartConfiguration.svgHeight / 100) - margin.top - margin.bottom;
-        // Fixed zoom handling - same for all resolutions
+        // Responsive zoom handling
         if (dataLength > this.CONSTANTS.ZOOM_THRESHOLD && this.isZoomedOut) {
-            const minWidth = dataLength * 25;
+            const minWidth = device.isMobile
+                ? dataLength * 12
+                : device.isTablet
+                    ? dataLength * 20
+                    : dataLength * 25;
             width = Math.max(width, minWidth);
         }
         if (dataLength > this.CONSTANTS.ZOOM_IN_THRESHOLD && !this.isZoomedOut) {
-            width = dataLength * 130;
+            width = device.isMobile
+                ? dataLength * 50
+                : device.isTablet
+                    ? dataLength * 90
+                    : dataLength * 130;
         }
         if (this.chartConfiguration.isFullScreen) {
             height = this.chartConfiguration.svgHeight !== 80
@@ -6591,13 +6644,28 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 : containerHeight;
         }
         if (this.chartConfiguration.isDrilldownChart) {
-            height = containerHeight - margin.top - margin.bottom - 130;
+            const offset = device.isMobile ? 60 : device.isTablet ? 90 : 130;
+            height = containerHeight - margin.top - margin.bottom - offset;
+        }
+        let barWidth;
+        let barPadding;
+        let requiredSvgWidth;
+        if (device.isMobile) {
+            barWidth = this.CONSTANTS.MIN_MOBILE_BAR_WIDTH;
+            barPadding = this.CONSTANTS.MOBILE_BAR_PADDING;
+            requiredSvgWidth = Math.max(width - this.CONSTANTS.RIGHT_SVG_WIDTH, (barWidth + barPadding) * dataLength + this.CONSTANTS.LEFT_RIGHT_SPACES * 2 +
+                this.CONSTANTS.RIGHT_SVG_WIDTH - barPadding);
+        }
+        else if (device.isTablet) {
+            barWidth = this.CONSTANTS.TABLET_MIN_BAR_WIDTH;
+            barPadding = this.CONSTANTS.TABLET_BAR_PADDING;
+            requiredSvgWidth = Math.max(width - this.CONSTANTS.RIGHT_SVG_WIDTH, (barWidth + barPadding) * dataLength + this.CONSTANTS.LEFT_RIGHT_SPACES * 2);
+        }
+        else {
+            barWidth = Math.max(this.CONSTANTS.DESKTOP_MIN_BAR_WIDTH, (width - this.CONSTANTS.RIGHT_SVG_WIDTH - this.CONSTANTS.LEFT_RIGHT_SPACES * 2) / dataLength);
+            barPadding = 0;
+            requiredSvgWidth = width - this.CONSTANTS.RIGHT_SVG_WIDTH;
         }
-        // Fixed bar width and padding for all resolutions
-        const barWidth = this.CONSTANTS.FIXED_BAR_WIDTH;
-        const barPadding = this.CONSTANTS.FIXED_BAR_PADDING;
-        // Calculate required SVG width based on fixed bar dimensions
-        const requiredSvgWidth = Math.max(width - this.CONSTANTS.RIGHT_SVG_WIDTH, (barWidth + barPadding) * dataLength + this.CONSTANTS.LEFT_RIGHT_SPACES * 2);
         return {
             width,
             height,
@@ -6615,7 +6683,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .attr('class', 'outer-container')
             .style('width', '100%')
             .style('height', dimensions.height)
-            .style('overflow-x', 'auto') // Enable scroll for all resolutions
+            .style('overflow-x', 'hidden')
             .style('padding-left', `${margin.left}px`)
             .style('margin-left', '10px')
             .style('padding-right', `${this.CONSTANTS.RIGHT_SVG_WIDTH}px`);
@@ -6641,7 +6709,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .append('div')
             .attr('class', 'inner-container')
             .style('width', '100%')
-            .style('overflow-x', 'visible');
+            .style('overflow-x', 'auto');
         const svg = innerContainer
             .append('svg')
             .attr('width', dimensions.requiredSvgWidth)
@@ -6650,10 +6718,10 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .attr('transform', `translate(0,${margin.top})`);
         return { svg, svgYAxisLeft, svgYAxisRight, innerContainer };
     }
-    createScales(data, layers, lineData, dimensions) {
+    createScales(data, layers, lineData, dimensions, device) {
         const { width, height, barWidth, barPadding } = dimensions;
-        // Fixed padding of 0.5 for all resolutions
-        const padding = 0.5;
+        // Adjust padding based on device
+        const padding = device.isMobile ? 0.15 : device.isTablet ? 0.3 : 0.5;
         const xScale = d3
             .scaleBand()
             .rangeRound([
@@ -6710,7 +6778,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         }
         return { xAxis, yAxis, yLineAxis };
     }
-    renderBars(svg, layers, scales, metaData, dimensions) {
+    renderBars(svg, layers, scales, metaData, dimensions, device) {
         const layer = svg
             .selectAll('.layer')
             .data(layers)
@@ -6722,11 +6790,11 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .selectAll('rect')
             .data((d) => d)
             .enter();
-        this.appendRectangles(rect, scales, metaData, dimensions);
+        this.appendRectangles(rect, scales, metaData, dimensions, device);
         this.addInteractions(rect, svg, metaData, scales);
         return rect;
     }
-    appendRectangles(rect, scales, metaData, dimensions) {
+    appendRectangles(rect, scales, metaData, dimensions, device) {
         const { barWidth, barPadding } = dimensions;
         const { xScale, yScale } = scales;
         rect
@@ -6745,18 +6813,17 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             }
             return 0;
         })
-            .attr('x', (d) => {
-            // Center the bar within its bandwidth
+            .attr('x', (d, i) => {
+            if (device.isMobile) {
+                return this.CONSTANTS.LEFT_RIGHT_SPACES + i * (barWidth + barPadding);
+            }
             if (!this.chartConfiguration.isMultiChartGridLine) {
-                const bandwidth = xScale.bandwidth();
-                return xScale(d.data.name) + (bandwidth - barWidth) / 2;
+                return xScale(d.data.name);
             }
             if (this.chartConfiguration.isDrilldownChart && this.chartData.data.length <= 3) {
                 return xScale(d.data.name) + xScale.bandwidth() / 2 - 35;
             }
-            const bandwidth = xScale.bandwidth();
-            const calculatedWidth = bandwidth * 0.8;
-            return xScale(d.data.name) + (bandwidth - calculatedWidth) / 2;
+            return xScale(d.data.name) + xScale.bandwidth() * 0.1;
         })
             .attr('height', (d) => {
             if (!isNaN(d[0]) && !isNaN(d[1])) {
@@ -6766,8 +6833,10 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             return 0;
         })
             .attr('width', (d) => {
-            if (!this.chartConfiguration.isMultiChartGridLine)
+            if (device.isMobile)
                 return barWidth;
+            if (!this.chartConfiguration.isMultiChartGridLine)
+                return xScale.bandwidth();
             if (this.chartConfiguration.isDrilldownChart && this.chartData.data.length <= 3) {
                 return 70;
             }
@@ -6823,13 +6892,23 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         const value = d[1] - d[0];
         if (isNaN(value))
             return;
+        const device = this.getDeviceConfig();
         const bandwidth = xScale.bandwidth();
-        // Fixed tooltip width for all resolutions
-        const width = /week/i.test(d.data.name) && /\d{4}-\d{2}-\d{2}/.test(d.data.name)
-            ? '250px'
-            : bandwidth + this.CONSTANTS.LEFT_RIGHT_SPACES * 2 > 180
-                ? '180px'
-                : bandwidth + this.CONSTANTS.LEFT_RIGHT_SPACES * 2;
+        // Responsive tooltip width
+        let width;
+        if (device.isMobile) {
+            width = Math.min(bandwidth + 40, 150);
+        }
+        else if (device.isTablet) {
+            width = Math.min(bandwidth + 60, 200);
+        }
+        else {
+            width = /week/i.test(d.data.name) && /\d{4}-\d{2}-\d{2}/.test(d.data.name)
+                ? '250px'
+                : bandwidth + this.CONSTANTS.LEFT_RIGHT_SPACES * 2 > 180
+                    ? '180px'
+                    : bandwidth + this.CONSTANTS.LEFT_RIGHT_SPACES * 2;
+        }
         svg
             .append('foreignObject')
             .attr('x', this.calculateTooltipX(d, xScale, width))
@@ -6947,10 +7026,8 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         }
     }
     initializeStackedChart() {
-        // Use fixed configuration for all resolutions
-        this.chartConfiguration.margin = { top: 20, right: 20, bottom: 40, left: 40 };
-        this.chartConfiguration.numberOfYTicks = 5;
-        this.chartConfiguration.svgHeight = 70;
+        const device = this.getDeviceConfig();
+        this.configureResponsiveSettings(device);
         this.mergeConfigurations();
         this.applyConfigurationFlags();
         const data = this.chartData.data;
@@ -6961,16 +7038,16 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         const chartContainer = d3.select(this.containerElt.nativeElement);
         const verticalstackedcontainer = d3.select(this.verticalstackedcontainerElt.nativeElement);
         const margin = this.chartConfiguration.margin;
-        const dimensions = this.calculateDimensions(chartContainer, verticalstackedcontainer, margin, data.length);
+        const dimensions = this.calculateDimensions(chartContainer, verticalstackedcontainer, margin, device, data.length);
         const { svg, svgYAxisLeft, svgYAxisRight } = this.createSvgContainers(chartContainer, dimensions, margin);
         const stack = d3.stack().keys(keyList).offset(d3.stackOffsetNone);
         const layers = stack(data);
         data.sort((a, b) => b.total - a.total);
-        const scales = this.createScales(data, layers, lineData, dimensions);
+        const scales = this.createScales(data, layers, lineData, dimensions, device);
         const axes = this.createAxes(scales);
         this.renderGrids(svg, scales, dimensions);
-        const rect = this.renderBars(svg, layers, scales, metaData, dimensions);
-        this.renderAxes(svg, svgYAxisLeft, svgYAxisRight, axes, scales, dimensions, data);
+        const rect = this.renderBars(svg, layers, scales, metaData, dimensions, device);
+        this.renderAxes(svg, svgYAxisLeft, svgYAxisRight, axes, scales, dimensions, device, data);
         this.renderAxisLabels(svg, svgYAxisLeft, metaData, dimensions, margin);
         this.renderTargetLine(svg, svgYAxisRight, scales, dimensions, metaData);
         this.renderDataLabels(rect, scales, metaData, dimensions);
@@ -7011,7 +7088,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             }
         }
     }
-    renderAxes(svg, svgYAxisLeft, svgYAxisRight, axes, scales, dimensions, data) {
+    renderAxes(svg, svgYAxisLeft, svgYAxisRight, axes, scales, dimensions, device, data) {
         if (this.chartConfiguration.showXaxisTop) {
             svg
                 .append('g')
@@ -7021,7 +7098,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             svg.selectAll('.x-axis > g > text').attr('class', 'lib-display-hidden');
         }
         if (!this.chartConfiguration.isMultiChartGridLine) {
-            this.renderStandardAxes(svg, axes, scales, dimensions, data);
+            this.renderStandardAxes(svg, axes, scales, dimensions, device, data);
         }
         else if (this.chartConfiguration.isDrilldownChart) {
             this.renderDrilldownAxes(svg, svgYAxisLeft, svgYAxisRight, axes, scales, dimensions);
@@ -7032,19 +7109,24 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         this.applyAxisStyling(svg, svgYAxisLeft, svgYAxisRight);
         this.applyAxisConfigurations(svg, scales, dimensions, data);
     }
-    renderStandardAxes(svg, axes, scales, dimensions, data) {
-        svg
-            .append('g')
-            .attr('transform', `translate(0,${dimensions.height})`)
-            .attr('class', 'lib-stacked-x-axis-text')
-            .call(axes.xAxis)
-            .selectAll('text')
-            .style('fill', 'var(--chart-text-color)')
-            .style('font-size', '12px')
-            .attr('text-anchor', 'middle')
-            .attr('dx', '0')
-            .attr('dy', '0.71em')
-            .attr('transform', null);
+    renderStandardAxes(svg, axes, scales, dimensions, device, data) {
+        if (device.isMobile) {
+            this.renderMobileXAxis(svg, data, dimensions);
+        }
+        else {
+            svg
+                .append('g')
+                .attr('transform', `translate(0,${dimensions.height})`)
+                .attr('class', 'lib-stacked-x-axis-text')
+                .call(axes.xAxis)
+                .selectAll('text')
+                .style('fill', 'var(--chart-text-color)')
+                .style('font-size', '12px')
+                .attr('text-anchor', 'middle')
+                .attr('dx', '0')
+                .attr('dy', '0.71em')
+                .attr('transform', null);
+        }
         svg
             .append('g')
             .attr('class', 'lib-stacked-y-axis-text')
@@ -7053,6 +7135,27 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .selectAll('text')
             .style('fill', 'var(--chart-text-color)');
     }
+    renderMobileXAxis(svg, data, dimensions) {
+        svg.selectAll('.custom-x-label').remove();
+        const maxLength = Math.max(...data.map(d => d.name.length));
+        const fontSize = maxLength > 10 ? '8px' : '10px';
+        data.forEach((d, i) => {
+            const xVal = this.CONSTANTS.LEFT_RIGHT_SPACES +
+                i * (dimensions.barWidth + dimensions.barPadding) +
+                dimensions.barWidth / 2;
+            svg
+                .append('text')
+                .attr('class', 'custom-x-label')
+                .attr('x', 0)
+                .attr('y', dimensions.height + 18)
+                .attr('text-anchor', 'middle')
+                .attr('transform', `translate(${xVal + 20},0)`)
+                .style('font-size', fontSize)
+                .style('fill', 'var(--chart-text-color)')
+                .style('writing-mode', 'sideways-lr')
+                .text(d.name.length > 6 ? d.name.substring(0, 4) + '...' : d.name);
+        });
+    }
     renderDrilldownAxes(svg, svgYAxisLeft, svgYAxisRight, axes, scales, dimensions) {
         svg
             .append('g')
@@ -7134,6 +7237,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         }
     }
     renderCustomXAxis(svg, scales, dimensions, data) {
+        const device = this.getDeviceConfig();
         svg
             .append('g')
             .attr('class', 'x1 axis1')
@@ -7141,12 +7245,12 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .style('color', '#000')
             .call(d3.axisBottom(scales.xScale).tickSize(0))
             .call((g) => g.select('.domain').attr('fill', 'none'));
-        this.styleCustomXAxisTicks(svg, data);
+        this.styleCustomXAxisTicks(svg, data, device);
         if (this.chartConfiguration.xLabelsOnSameLine) {
-            this.applyXLabelsOnSameLine(svg);
+            this.applyXLabelsOnSameLine(svg, device);
         }
     }
-    styleCustomXAxisTicks(svg, data) {
+    styleCustomXAxisTicks(svg, data, device) {
         let alternateText = false;
         svg.selectAll('.x1.axis1 .tick line').attr('y2', () => {
             if (this.chartConfiguration.hideXaxisTick)
@@ -7178,17 +7282,28 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             return this.CONSTANTS.SHORT_TICK_LENGTH_BG;
         });
     }
-    applyXLabelsOnSameLine(svg) {
+    applyXLabelsOnSameLine(svg, device) {
         svg
             .selectAll('g.x1.axis1 g.tick text')
             .attr('class', 'lib-xaxis-labels-texts-drilldown')
             .attr('y', this.CONSTANTS.SHORT_TICK_LENGTH_BG)
             .text((d) => {
+            if (device.isMobile) {
+                return d.split(' ')[0].substring(0, 3);
+            }
             const trimmed = d.trim();
             const spaceIndex = trimmed.indexOf(' ');
             return spaceIndex > -1
                 ? trimmed.substring(0, spaceIndex).toLowerCase()
                 : trimmed.toLowerCase();
+        })
+            .attr('transform', function (d, i) {
+            if (device.isMobile) {
+                const parent = this.parentNode?.parentNode;
+                const totalBars = parent ? d3.select(parent).selectAll('g.tick').size() : 0;
+                return totalBars === 2 ? 'translate(0,0)' : `translate(${i * 30},0)`;
+            }
+            return null;
         });
         svg
             .selectAll('g.x1.axis1 g.tick')
@@ -7197,11 +7312,16 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .attr('y', this.CONSTANTS.LONG_TICK_LENGTH_BG)
             .attr('fill', 'currentColor')
             .text((d) => {
+            if (device.isMobile)
+                return '';
             const trimmed = d.trim();
             const spaceIndex = trimmed.indexOf(' ');
             return spaceIndex > -1
                 ? trimmed.substring(spaceIndex).toLowerCase()
                 : '';
+        })
+            .attr('transform', (d, i) => {
+            return device.isMobile && i === 0 ? 'translate(20,0)' : null;
         });
     }
     renderDataLabels(rect, scales, metaData, dimensions) {
@@ -7392,11 +7512,11 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         this.isZoomOutSelected(isZoomOut);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HorizontalBarsWithScrollZoomComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HorizontalBarsWithScrollZoomComponent, selector: "lib-horizontal-bars-with-scroll-zoom", inputs: { chartData: "chartData", customChartConfiguration: "customChartConfiguration" }, outputs: { clickEvent: "clickEvent", headerMenuclickEvent: "headerMenuclickEvent" }, viewQueries: [{ propertyName: "containerElt", first: true, predicate: ["verticalstackedchartcontainer"], descendants: true, static: true }, { propertyName: "verticalstackedcontainerElt", first: true, predicate: ["verticalstackedcontainer"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<meta http-equiv=\"CACHE-CONTROL\" content=\"NO-CACHE\" />\r\n<meta http-equiv=\"EXPIRES\" content=\"Sat, 01 Jun 2004 11:12:01 GMT\" />\r\n<div\r\n  #verticalstackedcontainer\r\n  class=\"lib-chart-wrapper\"\r\n  [ngClass]=\"{ 'lib-no-background': isTransparentBackground }\"\r\n    style=\"background-color: var(--card-bg);\"\r\n\r\n  (resized)=\"onResized($event)\"\r\n>\r\n  <div class=\"header-alt\" *ngIf=\"!isHeaderVisible\">\r\n    <lib-chart-header-v2\r\n      [chartData]=\"chartData\"\r\n      [chartConfiguration]=\"chartConfiguration\"\r\n      (clickEvent)=\"handleClick($event)\"\r\n    ></lib-chart-header-v2>\r\n\r\n    <lib-chart-header-v3\r\n      [chartData]=\"chartData\"\r\n      [chartConfiguration]=\"chartConfiguration\"\r\n      (compareByFilterSelection)=\"handleCompareByFilterSelection($event)\"\r\n      (zoomInZoomOutClick)=\"handleZoominZoomoutClick($event)\"\r\n    ></lib-chart-header-v3>\r\n  </div>\r\n  <div\r\n    [style.height]=\"chartConfiguration.svgHeight\"\r\n    id=\"verticalstackedchartcontainer\"\r\n    #verticalstackedchartcontainer\r\n    class=\"lib-chart-svg\"\r\n  ></div>\r\n</div>\r\n", styles: [".lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-weight:400;letter-spacing:0px;color:#000;opacity:1;font-size:12px}.lib-axis-group-label{font-size:12px;font-weight:600;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;color:#000;opacity:1}.dots{font-size:10px}.inline__display{display:flex;justify-content:space-around;padding-top:2%}.verticalbar__text{font-style:normal;font-variant:normal;font-weight:400;font-size:13px;line-height:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;opacity:1}.lib-line-label-item{display:inline-block!important;font-size:.85em;margin-right:10px;font-weight:600}.lib-line-label-wrapper-vertical{display:flex;justify-content:center}.target-display{font-size:11px;line-height:13px;font-weight:700;text-transform:uppercase;float:right}.title{background-color:#d9d9d9;height:40px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:3px;line-height:1;padding:4px 8px;box-sizing:border-box}.title-top-text{color:var(--font-color)!important;font-size:12px;font-weight:600}.title-bar-name{color:var(--font-color)!important;font-size:14px;font-weight:700;text-transform:capitalize}.title-bottom-text{color:var(--font-color)!important;font-size:11px}.zoomIcons-holder{display:flex;align-items:center;margin-right:15px}.zoomIcons{border:.5px solid #b6b6b6;cursor:pointer;display:flex;justify-content:center;align-items:center;width:30px;height:30px;color:var(--color)!important}.zoom-active{background-color:#2d5ca0;opacity:1}.zoom-inactive{background-color:#d9d9d9;opacity:.5}.bottom__text{position:absolute!important;bottom:0!important;display:flex!important;justify-content:center!important;align-items:center!important;width:100%!important}.box__heightwidth{opacity:1;height:10px;width:10px;border:none!important;border-radius:50%}.label__text{margin-right:10px;display:flex;justify-content:center;align-items:center;font-style:normal;font-variant:normal;font-weight:400;font-size:10px;line-height:13px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;letter-spacing:.2px;color:#707070!important}.lib-verticalstack-labels-ontop-weklycharts{font-style:normal;font-variant:normal;font-weight:700;font-size:10px;line-height:11px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.05px;text-anchor:middle;fill:#000}.lib-verticalstack-title-ontop{font-style:normal;font-variant:normal;font-size:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.05px;text-anchor:middle;fill:#000}.marginLeft-20{margin-left:20px}.flex-inline{display:flex;justify-content:center;align-items:center;font-size:14px}.lib-xaxis-labels-texts-drilldown,.lib-xaxis-labels-texts-drilldown-alt,.lib-xaxis-labels-texts-weeklycharts{font-size:12px}.lib-display-hidden{display:none!important}\n", ".lib-chart-wrapper{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;background:#fff 0% 0% no-repeat padding-box;position:relative}.lib-chart-wrapper-wo-shadow{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background){background-color:#2e3640}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background) .chart-title{color:#fff}.lib-chart-svg{width:100%}.lib-chart-header{text-align:center;background-color:#052340;color:#fff;width:100%;height:17%;word-spacing:.5px;line-height:1.8;font-weight:700;padding-top:2%;letter-spacing:0;font-size:1.2em}.lib-donut-chart-footer{width:100%;text-align:right}.lib-donut-label-text{font-size:.9em;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-weight:400;letter-spacing:0px;color:#000;opacity:1}.lib-donut-label-icon{display:inline-block;width:10px;height:10px;margin-right:20px;border-radius:3px}.lib-donut-label-item{font-weight:400;font-size:.85em;color:#2f2f2f}.lib-donut-justified-label-wrapper{width:100%;display:inline-block;text-align:center;list-style-type:none}.lib-donut-justified-label-item{font-weight:400;font-size:.85em;color:#2f2f2f;display:inline-block;text-align:left;padding:0 10px}.lib-donut-justified-label-icon{display:inline-block;width:10px;height:10px;margin-right:5px;border-radius:3px}.lib-no-background{background:none!important}.lib-display-hidden{display:none}.lib-ylabel-weeklyCharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:12px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.07px;text-transform:capitalize;color:#000}.lib-data-labels-weeklycharts{font-style:normal;font-variant:normal;font-weight:400;font-size:12px;line-height:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.06px;color:#000}.lib-data-labels-angled-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:9.5px;line-height:11px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:.4px;text-anchor:start}.lib-xaxis-labels-texts-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:11px;letter-spacing:-.05px;fill:#000}.lib-xaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:-1px;color:#000;opacity:1;text-transform:capitalize}.lib-white-space-nowrap{white-space:nowrap}.lib-xaxis-labels-texts-drilldown-alt{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:10px;letter-spacing:0px;color:#000;opacity:1;text-transform:capitalize}.lib-yaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:0px;color:#000!important;opacity:1}.lib-ylabel-drilldowncharts,.lib-xlabel-drilldowncharts{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:16px;letter-spacing:-.1px;color:#000!important;opacity:1}.lib-donut-justified-label-icon-drilldown{display:inline-block;width:14px;height:14px;margin-right:10px;border-radius:50%}.marginright-2{margin-right:2%}.margintop-5{margin-top:5%}.width-100{width:100%}.float-right{float:right}.marginBottom-10{margin-bottom:10px}.header-alt{align-items:center;margin-bottom:10px}input::placeholder{font-size:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;color:#000;opacity:1}.padding-5{padding:5px}.hidden{visibility:hidden}.font-weight-bold{font-weight:900}.textalign-center{text-align:center}.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.font-weight-600{font-weight:600}.marginRight-15{margin-right:15px}.marginRight-20{margin-right:20px}.switch{position:relative;display:inline-block;width:46px;height:24px;margin-left:5px;margin-right:5px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#2d5ca0;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:\"\";height:18px;width:18px;right:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider.round{border-radius:18px}.slider.round:before{border-radius:50%}.slider1{position:absolute;cursor:pointer;inset:0;background-color:#015ba2cf;-webkit-transition:.4s;transition:.4s}.slider1:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider1.round1{border-radius:18px}.slider1.round1:before{border-radius:50%}.lib-display-flex{display:flex}.lib-align-items-center{align-items:center}.lib-flex-direction-column{flex-direction:column}.lib-justify-content-space-between{justify-content:space-between}.lib-justify-content-space-around{justify-content:space-around}.lib-justify-content-center{justify-content:center}.lib-justify-content-start{justify-content:start}.lib-justify-content-end{justify-content:end}.lib-ml-20{margin-left:20px}.lib-position-absolute{position:absolute}.lib-z-index-9{z-index:9}.marginright-3{margin-right:3px}@media (min-height: 900px){.lib-chart-wrapper{border-radius:8px}.header-font-size-1{font-size:18px!important}.font-size-1{font-size:14px!important}.font-size-2{font-size:16px!important}.font-size-3{font-size:14px!important}.font-size-4{font-size:22px!important}.font-size-5{font-size:24px!important}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ResizedDirective, selector: "[resized]", outputs: ["resized"] }, { kind: "component", type: ChartHeaderV2Component, selector: "lib-chart-header-v2", inputs: ["chartData", "chartConfiguration"], outputs: ["clickEvent", "zoomInZoomOutClick"] }, { kind: "component", type: ChartHeaderV3Component, selector: "lib-chart-header-v3", inputs: ["chartData", "chartConfiguration"], outputs: ["compareByFilterSelection", "zoomInZoomOutClick"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HorizontalBarsWithScrollZoomComponent, selector: "lib-horizontal-bars-with-scroll-zoom", inputs: { chartData: "chartData", customChartConfiguration: "customChartConfiguration" }, outputs: { clickEvent: "clickEvent", headerMenuclickEvent: "headerMenuclickEvent" }, viewQueries: [{ propertyName: "containerElt", first: true, predicate: ["verticalstackedchartcontainer"], descendants: true, static: true }, { propertyName: "verticalstackedcontainerElt", first: true, predicate: ["verticalstackedcontainer"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<meta http-equiv=\"CACHE-CONTROL\" content=\"NO-CACHE\" />\r\n<meta http-equiv=\"EXPIRES\" content=\"Sat, 01 Jun 2004 11:12:01 GMT\" />\r\n<div\r\n  #verticalstackedcontainer\r\n  class=\"lib-chart-wrapper\"\r\n  [ngClass]=\"{ 'lib-no-background': isTransparentBackground }\"\r\n    style=\"background-color: var(--card-bg);\"\r\n\r\n  (resized)=\"onResized($event)\"\r\n>\r\n  <div class=\"header-alt\" *ngIf=\"!isHeaderVisible\">\r\n    <lib-chart-header-v2\r\n      [chartData]=\"chartData\"\r\n      [chartConfiguration]=\"chartConfiguration\"\r\n      (clickEvent)=\"handleClick($event)\"\r\n    ></lib-chart-header-v2>\r\n\r\n    <lib-chart-header-v3\r\n      [chartData]=\"chartData\"\r\n      [chartConfiguration]=\"chartConfiguration\"\r\n      (compareByFilterSelection)=\"handleCompareByFilterSelection($event)\"\r\n      (zoomInZoomOutClick)=\"handleZoominZoomoutClick($event)\"\r\n    ></lib-chart-header-v3>\r\n  </div>\r\n  <div\r\n    [style.height]=\"chartConfiguration.svgHeight\"\r\n    id=\"verticalstackedchartcontainer\"\r\n    #verticalstackedchartcontainer\r\n    class=\"lib-chart-svg\"\r\n  ></div>\r\n</div>\r\n", styles: [".lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-weight:400;letter-spacing:0px;color:#000;opacity:1;font-size:12px}.lib-axis-group-label{font-size:12px;font-weight:600;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;color:#000;opacity:1}.dots{font-size:10px}.inline__display{display:flex;justify-content:space-around;padding-top:2%}.verticalbar__text{font-style:normal;font-variant:normal;font-weight:400;font-size:13px;line-height:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;opacity:1}.lib-line-label-item{display:inline-block!important;font-size:.85em;margin-right:10px;font-weight:600}.lib-line-label-wrapper-vertical{display:flex;justify-content:center}.target-display{font-size:11px;line-height:13px;font-weight:700;text-transform:uppercase;float:right}.title{background-color:#d9d9d9;height:40px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:3px;line-height:1;padding:4px 8px;box-sizing:border-box}.title-top-text{color:var(--font-color)!important;font-size:12px;font-weight:600}.title-bar-name{color:var(--font-color)!important;font-size:14px;font-weight:700;text-transform:capitalize}.title-bottom-text{color:var(--font-color)!important;font-size:11px}.zoomIcons-holder{display:flex;align-items:center;margin-right:15px}.zoomIcons{border:.5px solid #b6b6b6;cursor:pointer;display:flex;justify-content:center;align-items:center;width:30px;height:30px;color:var(--color)!important}.zoom-active{background-color:#2d5ca0;opacity:1}.zoom-inactive{background-color:#d9d9d9;opacity:.5}.bottom__text{position:absolute!important;bottom:0!important;display:flex!important;justify-content:center!important;align-items:center!important;width:100%!important}.box__heightwidth{opacity:1;height:10px;width:10px;border:none!important;border-radius:50%}.label__text{margin-right:10px;display:flex;justify-content:center;align-items:center;font-style:normal;font-variant:normal;font-weight:400;font-size:10px;line-height:13px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;letter-spacing:.2px;color:#707070!important}.lib-verticalstack-labels-ontop-weklycharts{font-style:normal;font-variant:normal;font-weight:700;font-size:10px;line-height:11px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.05px;text-anchor:middle;fill:#000}.lib-verticalstack-title-ontop{font-style:normal;font-variant:normal;font-size:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.05px;text-anchor:middle;fill:#000}.marginLeft-20{margin-left:20px}.flex-inline{display:flex;justify-content:center;align-items:center;font-size:14px}@media (max-width: 767px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:9px!important}.lib-axis-group-label{font-size:10px!important}.dots{font-size:8px!important}.lib-xaxis-labels-texts-drilldown{writing-mode:sideways-lr;font-size:9px!important}.target-display{font-size:9px;line-height:11px}.title-top-text{font-size:10px}.title-bar-name{font-size:12px}.zoomIcons{width:26px;height:26px}.lib-verticalstack-labels-ontop-weklycharts{font-size:9px}}@media (min-width: 768px) and (max-width: 1023px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:10px!important}.lib-axis-group-label{font-size:11px!important}.dots{font-size:9px!important}.target-display{font-size:10px;line-height:12px}.title-top-text{font-size:11px}.title-bar-name{font-size:13px}.zoomIcons{width:28px;height:28px}}@media (min-width: 1024px) and (max-width: 1365px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:11px!important}.lib-axis-group-label{font-size:12px!important}.dots{font-size:10px!important}}@media (min-width: 1366px) and (max-width: 1919px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:12px!important}.lib-axis-group-label{font-size:13px!important}.dots{font-size:11px!important}}@media (min-width: 1920px) and (max-width: 2559px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:14px!important}.lib-axis-group-label{font-size:14px!important}.dots{font-size:12px!important}.target-display{font-size:13px;line-height:15px}.title-top-text{font-size:14px}.title-bar-name{font-size:16px}}@media (min-width: 2560px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:16px!important}.lib-axis-group-label{font-size:15px!important}.dots{font-size:14px!important}.target-display{font-size:14px;line-height:16px}.title-top-text{font-size:15px}.title-bar-name{font-size:18px}.zoomIcons{width:34px;height:34px}}@media (orientation: portrait) and (max-width: 767px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:8px!important}.lib-xaxis-labels-texts-drilldown{font-size:8px!important}}@media (orientation: landscape) and (min-width: 768px) and (max-width: 1023px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:11px!important}}\n", ".lib-chart-wrapper{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;background:#fff 0% 0% no-repeat padding-box;position:relative}.lib-chart-wrapper-wo-shadow{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background){background-color:#2e3640}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background) .chart-title{color:#fff}.lib-chart-svg{width:100%}.lib-chart-header{text-align:center;background-color:#052340;color:#fff;width:100%;height:17%;word-spacing:.5px;line-height:1.8;font-weight:700;padding-top:2%;letter-spacing:0;font-size:1.2em}.lib-donut-chart-footer{width:100%;text-align:right}.lib-donut-label-text{font-size:.9em;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-weight:400;letter-spacing:0px;color:#000;opacity:1}.lib-donut-label-icon{display:inline-block;width:10px;height:10px;margin-right:20px;border-radius:3px}.lib-donut-label-item{font-weight:400;font-size:.85em;color:#2f2f2f}.lib-donut-justified-label-wrapper{width:100%;display:inline-block;text-align:center;list-style-type:none}.lib-donut-justified-label-item{font-weight:400;font-size:.85em;color:#2f2f2f;display:inline-block;text-align:left;padding:0 10px}.lib-donut-justified-label-icon{display:inline-block;width:10px;height:10px;margin-right:5px;border-radius:3px}.lib-no-background{background:none!important}.lib-display-hidden{display:none}.lib-ylabel-weeklyCharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:12px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.07px;text-transform:capitalize;color:#000}.lib-data-labels-weeklycharts{font-style:normal;font-variant:normal;font-weight:400;font-size:12px;line-height:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.06px;color:#000}.lib-data-labels-angled-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:9.5px;line-height:11px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:.4px;text-anchor:start}.lib-xaxis-labels-texts-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:11px;letter-spacing:-.05px;fill:#000}.lib-xaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:-1px;color:#000;opacity:1;text-transform:capitalize}.lib-white-space-nowrap{white-space:nowrap}.lib-xaxis-labels-texts-drilldown-alt{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:10px;letter-spacing:0px;color:#000;opacity:1;text-transform:capitalize}.lib-yaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:0px;color:#000!important;opacity:1}.lib-ylabel-drilldowncharts,.lib-xlabel-drilldowncharts{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:16px;letter-spacing:-.1px;color:#000!important;opacity:1}.lib-donut-justified-label-icon-drilldown{display:inline-block;width:14px;height:14px;margin-right:10px;border-radius:50%}.marginright-2{margin-right:2%}.margintop-5{margin-top:5%}.width-100{width:100%}.float-right{float:right}.marginBottom-10{margin-bottom:10px}.header-alt{align-items:center;margin-bottom:10px}input::placeholder{font-size:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;color:#000;opacity:1}.padding-5{padding:5px}.hidden{visibility:hidden}.font-weight-bold{font-weight:900}.textalign-center{text-align:center}.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.font-weight-600{font-weight:600}.marginRight-15{margin-right:15px}.marginRight-20{margin-right:20px}.switch{position:relative;display:inline-block;width:46px;height:24px;margin-left:5px;margin-right:5px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#2d5ca0;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:\"\";height:18px;width:18px;right:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider.round{border-radius:18px}.slider.round:before{border-radius:50%}.slider1{position:absolute;cursor:pointer;inset:0;background-color:#015ba2cf;-webkit-transition:.4s;transition:.4s}.slider1:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider1.round1{border-radius:18px}.slider1.round1:before{border-radius:50%}.lib-display-flex{display:flex}.lib-align-items-center{align-items:center}.lib-flex-direction-column{flex-direction:column}.lib-justify-content-space-between{justify-content:space-between}.lib-justify-content-space-around{justify-content:space-around}.lib-justify-content-center{justify-content:center}.lib-justify-content-start{justify-content:start}.lib-justify-content-end{justify-content:end}.lib-ml-20{margin-left:20px}.lib-position-absolute{position:absolute}.lib-z-index-9{z-index:9}.marginright-3{margin-right:3px}@media (min-height: 900px){.lib-chart-wrapper{border-radius:8px}.header-font-size-1{font-size:18px!important}.font-size-1{font-size:14px!important}.font-size-2{font-size:16px!important}.font-size-3{font-size:14px!important}.font-size-4{font-size:22px!important}.font-size-5{font-size:24px!important}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ResizedDirective, selector: "[resized]", outputs: ["resized"] }, { kind: "component", type: ChartHeaderV2Component, selector: "lib-chart-header-v2", inputs: ["chartData", "chartConfiguration"], outputs: ["clickEvent", "zoomInZoomOutClick"] }, { kind: "component", type: ChartHeaderV3Component, selector: "lib-chart-header-v3", inputs: ["chartData", "chartConfiguration"], outputs: ["compareByFilterSelection", "zoomInZoomOutClick"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HorizontalBarsWithScrollZoomComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-horizontal-bars-with-scroll-zoom', encapsulation: ViewEncapsulation.None, template: "<meta http-equiv=\"CACHE-CONTROL\" content=\"NO-CACHE\" />\r\n<meta http-equiv=\"EXPIRES\" content=\"Sat, 01 Jun 2004 11:12:01 GMT\" />\r\n<div\r\n  #verticalstackedcontainer\r\n  class=\"lib-chart-wrapper\"\r\n  [ngClass]=\"{ 'lib-no-background': isTransparentBackground }\"\r\n    style=\"background-color: var(--card-bg);\"\r\n\r\n  (resized)=\"onResized($event)\"\r\n>\r\n  <div class=\"header-alt\" *ngIf=\"!isHeaderVisible\">\r\n    <lib-chart-header-v2\r\n      [chartData]=\"chartData\"\r\n      [chartConfiguration]=\"chartConfiguration\"\r\n      (clickEvent)=\"handleClick($event)\"\r\n    ></lib-chart-header-v2>\r\n\r\n    <lib-chart-header-v3\r\n      [chartData]=\"chartData\"\r\n      [chartConfiguration]=\"chartConfiguration\"\r\n      (compareByFilterSelection)=\"handleCompareByFilterSelection($event)\"\r\n      (zoomInZoomOutClick)=\"handleZoominZoomoutClick($event)\"\r\n    ></lib-chart-header-v3>\r\n  </div>\r\n  <div\r\n    [style.height]=\"chartConfiguration.svgHeight\"\r\n    id=\"verticalstackedchartcontainer\"\r\n    #verticalstackedchartcontainer\r\n    class=\"lib-chart-svg\"\r\n  ></div>\r\n</div>\r\n", styles: [".lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-weight:400;letter-spacing:0px;color:#000;opacity:1;font-size:12px}.lib-axis-group-label{font-size:12px;font-weight:600;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;color:#000;opacity:1}.dots{font-size:10px}.inline__display{display:flex;justify-content:space-around;padding-top:2%}.verticalbar__text{font-style:normal;font-variant:normal;font-weight:400;font-size:13px;line-height:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;opacity:1}.lib-line-label-item{display:inline-block!important;font-size:.85em;margin-right:10px;font-weight:600}.lib-line-label-wrapper-vertical{display:flex;justify-content:center}.target-display{font-size:11px;line-height:13px;font-weight:700;text-transform:uppercase;float:right}.title{background-color:#d9d9d9;height:40px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:3px;line-height:1;padding:4px 8px;box-sizing:border-box}.title-top-text{color:var(--font-color)!important;font-size:12px;font-weight:600}.title-bar-name{color:var(--font-color)!important;font-size:14px;font-weight:700;text-transform:capitalize}.title-bottom-text{color:var(--font-color)!important;font-size:11px}.zoomIcons-holder{display:flex;align-items:center;margin-right:15px}.zoomIcons{border:.5px solid #b6b6b6;cursor:pointer;display:flex;justify-content:center;align-items:center;width:30px;height:30px;color:var(--color)!important}.zoom-active{background-color:#2d5ca0;opacity:1}.zoom-inactive{background-color:#d9d9d9;opacity:.5}.bottom__text{position:absolute!important;bottom:0!important;display:flex!important;justify-content:center!important;align-items:center!important;width:100%!important}.box__heightwidth{opacity:1;height:10px;width:10px;border:none!important;border-radius:50%}.label__text{margin-right:10px;display:flex;justify-content:center;align-items:center;font-style:normal;font-variant:normal;font-weight:400;font-size:10px;line-height:13px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;letter-spacing:.2px;color:#707070!important}.lib-verticalstack-labels-ontop-weklycharts{font-style:normal;font-variant:normal;font-weight:700;font-size:10px;line-height:11px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.05px;text-anchor:middle;fill:#000}.lib-verticalstack-title-ontop{font-style:normal;font-variant:normal;font-size:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.05px;text-anchor:middle;fill:#000}.marginLeft-20{margin-left:20px}.flex-inline{display:flex;justify-content:center;align-items:center;font-size:14px}.lib-xaxis-labels-texts-drilldown,.lib-xaxis-labels-texts-drilldown-alt,.lib-xaxis-labels-texts-weeklycharts{font-size:12px}.lib-display-hidden{display:none!important}\n", ".lib-chart-wrapper{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;background:#fff 0% 0% no-repeat padding-box;position:relative}.lib-chart-wrapper-wo-shadow{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background){background-color:#2e3640}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background) .chart-title{color:#fff}.lib-chart-svg{width:100%}.lib-chart-header{text-align:center;background-color:#052340;color:#fff;width:100%;height:17%;word-spacing:.5px;line-height:1.8;font-weight:700;padding-top:2%;letter-spacing:0;font-size:1.2em}.lib-donut-chart-footer{width:100%;text-align:right}.lib-donut-label-text{font-size:.9em;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-weight:400;letter-spacing:0px;color:#000;opacity:1}.lib-donut-label-icon{display:inline-block;width:10px;height:10px;margin-right:20px;border-radius:3px}.lib-donut-label-item{font-weight:400;font-size:.85em;color:#2f2f2f}.lib-donut-justified-label-wrapper{width:100%;display:inline-block;text-align:center;list-style-type:none}.lib-donut-justified-label-item{font-weight:400;font-size:.85em;color:#2f2f2f;display:inline-block;text-align:left;padding:0 10px}.lib-donut-justified-label-icon{display:inline-block;width:10px;height:10px;margin-right:5px;border-radius:3px}.lib-no-background{background:none!important}.lib-display-hidden{display:none}.lib-ylabel-weeklyCharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:12px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.07px;text-transform:capitalize;color:#000}.lib-data-labels-weeklycharts{font-style:normal;font-variant:normal;font-weight:400;font-size:12px;line-height:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.06px;color:#000}.lib-data-labels-angled-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:9.5px;line-height:11px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:.4px;text-anchor:start}.lib-xaxis-labels-texts-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:11px;letter-spacing:-.05px;fill:#000}.lib-xaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:-1px;color:#000;opacity:1;text-transform:capitalize}.lib-white-space-nowrap{white-space:nowrap}.lib-xaxis-labels-texts-drilldown-alt{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:10px;letter-spacing:0px;color:#000;opacity:1;text-transform:capitalize}.lib-yaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:0px;color:#000!important;opacity:1}.lib-ylabel-drilldowncharts,.lib-xlabel-drilldowncharts{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:16px;letter-spacing:-.1px;color:#000!important;opacity:1}.lib-donut-justified-label-icon-drilldown{display:inline-block;width:14px;height:14px;margin-right:10px;border-radius:50%}.marginright-2{margin-right:2%}.margintop-5{margin-top:5%}.width-100{width:100%}.float-right{float:right}.marginBottom-10{margin-bottom:10px}.header-alt{align-items:center;margin-bottom:10px}input::placeholder{font-size:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;color:#000;opacity:1}.padding-5{padding:5px}.hidden{visibility:hidden}.font-weight-bold{font-weight:900}.textalign-center{text-align:center}.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.font-weight-600{font-weight:600}.marginRight-15{margin-right:15px}.marginRight-20{margin-right:20px}.switch{position:relative;display:inline-block;width:46px;height:24px;margin-left:5px;margin-right:5px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#2d5ca0;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:\"\";height:18px;width:18px;right:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider.round{border-radius:18px}.slider.round:before{border-radius:50%}.slider1{position:absolute;cursor:pointer;inset:0;background-color:#015ba2cf;-webkit-transition:.4s;transition:.4s}.slider1:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider1.round1{border-radius:18px}.slider1.round1:before{border-radius:50%}.lib-display-flex{display:flex}.lib-align-items-center{align-items:center}.lib-flex-direction-column{flex-direction:column}.lib-justify-content-space-between{justify-content:space-between}.lib-justify-content-space-around{justify-content:space-around}.lib-justify-content-center{justify-content:center}.lib-justify-content-start{justify-content:start}.lib-justify-content-end{justify-content:end}.lib-ml-20{margin-left:20px}.lib-position-absolute{position:absolute}.lib-z-index-9{z-index:9}.marginright-3{margin-right:3px}@media (min-height: 900px){.lib-chart-wrapper{border-radius:8px}.header-font-size-1{font-size:18px!important}.font-size-1{font-size:14px!important}.font-size-2{font-size:16px!important}.font-size-3{font-size:14px!important}.font-size-4{font-size:22px!important}.font-size-5{font-size:24px!important}}\n"] }]
+            args: [{ selector: 'lib-horizontal-bars-with-scroll-zoom', encapsulation: ViewEncapsulation.None, template: "<meta http-equiv=\"CACHE-CONTROL\" content=\"NO-CACHE\" />\r\n<meta http-equiv=\"EXPIRES\" content=\"Sat, 01 Jun 2004 11:12:01 GMT\" />\r\n<div\r\n  #verticalstackedcontainer\r\n  class=\"lib-chart-wrapper\"\r\n  [ngClass]=\"{ 'lib-no-background': isTransparentBackground }\"\r\n    style=\"background-color: var(--card-bg);\"\r\n\r\n  (resized)=\"onResized($event)\"\r\n>\r\n  <div class=\"header-alt\" *ngIf=\"!isHeaderVisible\">\r\n    <lib-chart-header-v2\r\n      [chartData]=\"chartData\"\r\n      [chartConfiguration]=\"chartConfiguration\"\r\n      (clickEvent)=\"handleClick($event)\"\r\n    ></lib-chart-header-v2>\r\n\r\n    <lib-chart-header-v3\r\n      [chartData]=\"chartData\"\r\n      [chartConfiguration]=\"chartConfiguration\"\r\n      (compareByFilterSelection)=\"handleCompareByFilterSelection($event)\"\r\n      (zoomInZoomOutClick)=\"handleZoominZoomoutClick($event)\"\r\n    ></lib-chart-header-v3>\r\n  </div>\r\n  <div\r\n    [style.height]=\"chartConfiguration.svgHeight\"\r\n    id=\"verticalstackedchartcontainer\"\r\n    #verticalstackedchartcontainer\r\n    class=\"lib-chart-svg\"\r\n  ></div>\r\n</div>\r\n", styles: [".lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-weight:400;letter-spacing:0px;color:#000;opacity:1;font-size:12px}.lib-axis-group-label{font-size:12px;font-weight:600;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;color:#000;opacity:1}.dots{font-size:10px}.inline__display{display:flex;justify-content:space-around;padding-top:2%}.verticalbar__text{font-style:normal;font-variant:normal;font-weight:400;font-size:13px;line-height:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;opacity:1}.lib-line-label-item{display:inline-block!important;font-size:.85em;margin-right:10px;font-weight:600}.lib-line-label-wrapper-vertical{display:flex;justify-content:center}.target-display{font-size:11px;line-height:13px;font-weight:700;text-transform:uppercase;float:right}.title{background-color:#d9d9d9;height:40px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:3px;line-height:1;padding:4px 8px;box-sizing:border-box}.title-top-text{color:var(--font-color)!important;font-size:12px;font-weight:600}.title-bar-name{color:var(--font-color)!important;font-size:14px;font-weight:700;text-transform:capitalize}.title-bottom-text{color:var(--font-color)!important;font-size:11px}.zoomIcons-holder{display:flex;align-items:center;margin-right:15px}.zoomIcons{border:.5px solid #b6b6b6;cursor:pointer;display:flex;justify-content:center;align-items:center;width:30px;height:30px;color:var(--color)!important}.zoom-active{background-color:#2d5ca0;opacity:1}.zoom-inactive{background-color:#d9d9d9;opacity:.5}.bottom__text{position:absolute!important;bottom:0!important;display:flex!important;justify-content:center!important;align-items:center!important;width:100%!important}.box__heightwidth{opacity:1;height:10px;width:10px;border:none!important;border-radius:50%}.label__text{margin-right:10px;display:flex;justify-content:center;align-items:center;font-style:normal;font-variant:normal;font-weight:400;font-size:10px;line-height:13px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;letter-spacing:.2px;color:#707070!important}.lib-verticalstack-labels-ontop-weklycharts{font-style:normal;font-variant:normal;font-weight:700;font-size:10px;line-height:11px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.05px;text-anchor:middle;fill:#000}.lib-verticalstack-title-ontop{font-style:normal;font-variant:normal;font-size:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.05px;text-anchor:middle;fill:#000}.marginLeft-20{margin-left:20px}.flex-inline{display:flex;justify-content:center;align-items:center;font-size:14px}@media (max-width: 767px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:9px!important}.lib-axis-group-label{font-size:10px!important}.dots{font-size:8px!important}.lib-xaxis-labels-texts-drilldown{writing-mode:sideways-lr;font-size:9px!important}.target-display{font-size:9px;line-height:11px}.title-top-text{font-size:10px}.title-bar-name{font-size:12px}.zoomIcons{width:26px;height:26px}.lib-verticalstack-labels-ontop-weklycharts{font-size:9px}}@media (min-width: 768px) and (max-width: 1023px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:10px!important}.lib-axis-group-label{font-size:11px!important}.dots{font-size:9px!important}.target-display{font-size:10px;line-height:12px}.title-top-text{font-size:11px}.title-bar-name{font-size:13px}.zoomIcons{width:28px;height:28px}}@media (min-width: 1024px) and (max-width: 1365px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:11px!important}.lib-axis-group-label{font-size:12px!important}.dots{font-size:10px!important}}@media (min-width: 1366px) and (max-width: 1919px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:12px!important}.lib-axis-group-label{font-size:13px!important}.dots{font-size:11px!important}}@media (min-width: 1920px) and (max-width: 2559px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:14px!important}.lib-axis-group-label{font-size:14px!important}.dots{font-size:12px!important}.target-display{font-size:13px;line-height:15px}.title-top-text{font-size:14px}.title-bar-name{font-size:16px}}@media (min-width: 2560px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:16px!important}.lib-axis-group-label{font-size:15px!important}.dots{font-size:14px!important}.target-display{font-size:14px;line-height:16px}.title-top-text{font-size:15px}.title-bar-name{font-size:18px}.zoomIcons{width:34px;height:34px}}@media (orientation: portrait) and (max-width: 767px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:8px!important}.lib-xaxis-labels-texts-drilldown{font-size:8px!important}}@media (orientation: landscape) and (min-width: 768px) and (max-width: 1023px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:11px!important}}\n", ".lib-chart-wrapper{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;background:#fff 0% 0% no-repeat padding-box;position:relative}.lib-chart-wrapper-wo-shadow{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background){background-color:#2e3640}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background) .chart-title{color:#fff}.lib-chart-svg{width:100%}.lib-chart-header{text-align:center;background-color:#052340;color:#fff;width:100%;height:17%;word-spacing:.5px;line-height:1.8;font-weight:700;padding-top:2%;letter-spacing:0;font-size:1.2em}.lib-donut-chart-footer{width:100%;text-align:right}.lib-donut-label-text{font-size:.9em;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-weight:400;letter-spacing:0px;color:#000;opacity:1}.lib-donut-label-icon{display:inline-block;width:10px;height:10px;margin-right:20px;border-radius:3px}.lib-donut-label-item{font-weight:400;font-size:.85em;color:#2f2f2f}.lib-donut-justified-label-wrapper{width:100%;display:inline-block;text-align:center;list-style-type:none}.lib-donut-justified-label-item{font-weight:400;font-size:.85em;color:#2f2f2f;display:inline-block;text-align:left;padding:0 10px}.lib-donut-justified-label-icon{display:inline-block;width:10px;height:10px;margin-right:5px;border-radius:3px}.lib-no-background{background:none!important}.lib-display-hidden{display:none}.lib-ylabel-weeklyCharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:12px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.07px;text-transform:capitalize;color:#000}.lib-data-labels-weeklycharts{font-style:normal;font-variant:normal;font-weight:400;font-size:12px;line-height:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.06px;color:#000}.lib-data-labels-angled-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:9.5px;line-height:11px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:.4px;text-anchor:start}.lib-xaxis-labels-texts-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:11px;letter-spacing:-.05px;fill:#000}.lib-xaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:-1px;color:#000;opacity:1;text-transform:capitalize}.lib-white-space-nowrap{white-space:nowrap}.lib-xaxis-labels-texts-drilldown-alt{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:10px;letter-spacing:0px;color:#000;opacity:1;text-transform:capitalize}.lib-yaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:0px;color:#000!important;opacity:1}.lib-ylabel-drilldowncharts,.lib-xlabel-drilldowncharts{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:16px;letter-spacing:-.1px;color:#000!important;opacity:1}.lib-donut-justified-label-icon-drilldown{display:inline-block;width:14px;height:14px;margin-right:10px;border-radius:50%}.marginright-2{margin-right:2%}.margintop-5{margin-top:5%}.width-100{width:100%}.float-right{float:right}.marginBottom-10{margin-bottom:10px}.header-alt{align-items:center;margin-bottom:10px}input::placeholder{font-size:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;color:#000;opacity:1}.padding-5{padding:5px}.hidden{visibility:hidden}.font-weight-bold{font-weight:900}.textalign-center{text-align:center}.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.font-weight-600{font-weight:600}.marginRight-15{margin-right:15px}.marginRight-20{margin-right:20px}.switch{position:relative;display:inline-block;width:46px;height:24px;margin-left:5px;margin-right:5px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#2d5ca0;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:\"\";height:18px;width:18px;right:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider.round{border-radius:18px}.slider.round:before{border-radius:50%}.slider1{position:absolute;cursor:pointer;inset:0;background-color:#015ba2cf;-webkit-transition:.4s;transition:.4s}.slider1:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider1.round1{border-radius:18px}.slider1.round1:before{border-radius:50%}.lib-display-flex{display:flex}.lib-align-items-center{align-items:center}.lib-flex-direction-column{flex-direction:column}.lib-justify-content-space-between{justify-content:space-between}.lib-justify-content-space-around{justify-content:space-around}.lib-justify-content-center{justify-content:center}.lib-justify-content-start{justify-content:start}.lib-justify-content-end{justify-content:end}.lib-ml-20{margin-left:20px}.lib-position-absolute{position:absolute}.lib-z-index-9{z-index:9}.marginright-3{margin-right:3px}@media (min-height: 900px){.lib-chart-wrapper{border-radius:8px}.header-font-size-1{font-size:18px!important}.font-size-1{font-size:14px!important}.font-size-2{font-size:16px!important}.font-size-3{font-size:14px!important}.font-size-4{font-size:22px!important}.font-size-5{font-size:24px!important}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { containerElt: [{
                 type: ViewChild,
                 args: ['verticalstackedchartcontainer', { static: true }]
@@ -8786,7 +8906,28 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
         const chartContainer = d3.select(this.containerElt.nativeElement);
         const verticalstackedcontainer = d3.select(this.groupcontainerElt.nativeElement);
         const margin = this.chartConfiguration.margin;
-        const { width, height } = this.calculateChartDimensions(chartContainer, verticalstackedcontainer, margin, self);
+        let { width, height } = this.calculateChartDimensions(chartContainer, verticalstackedcontainer, margin, self);
+        // Ensure there's enough inner width when there are many groups or
+        // when subgroups per group are large. This makes the inner svg wider
+        // so the `.inner-container` will show a horizontal scrollbar allowing
+        // the user to scroll to view all groups (especially on mobile/tablet).
+        try {
+            const subgroupsCount = (keyList && keyList.length) || 0;
+            const groupsCount = (data && data.length) || 0;
+            // Responsive minimum bar widths (per subgroup). These values were
+            // chosen to keep bars readable on each device; tweak if needed.
+            const minBarPerSubgroup = window.innerWidth < 576 ? 18 : window.innerWidth < 992 ? 26 : 36;
+            if (subgroupsCount > 2 && groupsCount > 0) {
+                const perGroupMin = subgroupsCount * minBarPerSubgroup + 12; // 12px padding between groups
+                const requiredTotal = groupsCount * perGroupMin;
+                if (width < requiredTotal) {
+                    width = requiredTotal;
+                }
+            }
+        }
+        catch (e) {
+            // In case window isn't available or something else fails, keep calculated width
+        }
         // ==================== VISIBILITY CONFIGURATION ====================
         if (this.chartConfiguration.isHeaderVisible !== undefined) {
             this.isHeaderVisible = this.chartConfiguration.isHeaderVisible;
@@ -9231,13 +9372,16 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
         return y(0);
     }
     calculateBarWidth(d, data, subgroups, x, xSubgroup, self, tempScale) {
+        // Device detection for responsive min widths
+        const isMobile = window.innerWidth < 576;
+        const isTablet = window.innerWidth >= 576 && window.innerWidth < 992;
         // For grouped bar charts in zoom-in view
         if (subgroups.length > 1 && !self.isZoomedOut) {
-            return 50;
+            return isMobile ? 22 : isTablet ? 36 : 50;
         }
         // For single-bar charts in zoom-in view
         if (subgroups.length === 1 && !self.isZoomedOut) {
-            return 80;
+            return isMobile ? 60 : 80;
         }
         // Default logic for drilldown charts
         if (self.chartConfiguration.isDrilldownChart) {
@@ -9253,9 +9397,17 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                     }
                 }
             });
-            return calculatedScale.bandwidth();
+            // Ensure a minimum width per subgroup when there are many subgroups
+            const minPerSub = isMobile ? 18 : isTablet ? 26 : 36;
+            return Math.max(calculatedScale.bandwidth(), minPerSub);
         }
-        return xSubgroup.bandwidth();
+        // For default grouped charts ensure a minimum width per subgroup when subgroups length > 2
+        const minPerSubDefault = isMobile ? 18 : isTablet ? 26 : 36;
+        const bw = xSubgroup.bandwidth();
+        if (subgroups && subgroups.length > 2) {
+            return Math.max(bw, minPerSubDefault);
+        }
+        return bw;
     }
     calculateBarHeight(d, y, height, self) {
         if (d.value === -1) {
@@ -9769,11 +9921,11 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
         this.clickEvent.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HorizontalGroupedBarWithScrollZoomComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HorizontalGroupedBarWithScrollZoomComponent, selector: "lib-horizontal-grouped-bar-with-scroll-zoom", inputs: { chartData: "chartData", customChartConfiguration: "customChartConfiguration" }, outputs: { clickEvent: "clickEvent", headerMenuclickEvent: "headerMenuclickEvent" }, viewQueries: [{ propertyName: "containerElt", first: true, predicate: ["groupchartcontainer"], descendants: true, static: true }, { propertyName: "groupcontainerElt", first: true, predicate: ["groupcontainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  #groupcontainer\r\n  class=\"lib-chart-wrapper\"\r\n  [ngClass]=\"{ 'lib-no-background': isTransparentBackground }\"\r\n  style=\"background-color: var(--card-bg);\"\r\n  (resized)=\"onResized($event)\"\r\n>\r\n  <div class=\"header-alt\" *ngIf=\"!isHeaderVisible\">\r\n    <lib-chart-header-v2\r\n      [chartData]=\"chartData\"\r\n      [chartConfiguration]=\"chartConfiguration\"\r\n      (clickEvent)=\"handleClick($event)\"\r\n    ></lib-chart-header-v2>\r\n    <lib-chart-header-v3\r\n      [chartData]=\"chartData\"\r\n      [chartConfiguration]=\"chartConfiguration\"\r\n      (compareByFilterSelection)=\"handleCompareByFilterSelection($event)\"\r\n      (zoomInZoomOutClick)=\"handleZoominZoomoutClick($event)\"\r\n    ></lib-chart-header-v3>\r\n  </div>\r\n  <lib-chart-header-v1\r\n    [title]=\"chartData.metaData.title\"\r\n    [hasDrillDown]=\"chartData.metaData.hasDrillDown\"\r\n    [isEditEnabled]=\"chartData.metaData.isEditEnabled\"\r\n    [menuOptions]=\"chartConfiguration.headerMenuOptions\"\r\n    [isria]=\"customChartConfiguration.isRia\"\r\n    [selectedKpiTooltop]=\"chartConfiguration.selectedKpiTooltop\"\r\n    (menuOptionClickEvent)=\"handleHeaderMenuClick($event)\"\r\n    [isAlertEnabled]=\"isAlertEnabled\"\r\n    *ngIf=\"isHeaderVisible\"\r\n  ></lib-chart-header-v1>\r\n  <div\r\n    *ngIf=\"\r\n      chartData &&\r\n      chartData.metaData &&\r\n      chartConfiguration.legendJustified &&\r\n      legendVisible &&\r\n      chartConfiguration.legendAtTopRight\r\n    \"\r\n    class=\"legend-holder-right\"\r\n    [style.height]=\"chartConfiguration.footerHeight\"\r\n  >\r\n    <ul class=\"display-flex\">\r\n      <li\r\n        class=\"legends-positioning-inline\"\r\n        *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"\r\n      >\r\n        <span\r\n          class=\"lib-donut-justified-label-icon-drilldown\"\r\n          [style.background-color]=\"item.value\"\r\n        ></span\r\n        ><span>{{ item.key }}</span>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n  <div\r\n    [style.height]=\"chartConfiguration.svgHeight\"\r\n    id=\"groupchartcontainer\"\r\n    #groupchartcontainer\r\n    class=\"lib-chart-svg\"\r\n  ></div>\r\n\r\n\r\n  <!-- <div\r\n    *ngIf=\"\r\n      chartData &&\r\n      chartData.metaData &&\r\n      chartConfiguration.legendJustified &&\r\n      legendVisible &&\r\n      !chartConfiguration.legendAtTopRight\r\n    \"\r\n    class=\"lib-donut-chart-footer\"\r\n    [style.height]=\"chartConfiguration.footerHeight\"\r\n  >\r\n    <ul class=\"lib-donut-justified-label-wrapper\">\r\n      <li\r\n        class=\"lib-donut-justified-label-item\"\r\n        *ngFor=\"let item of chartData.metaData.colors | keyvalue\"\r\n      >\r\n        <span\r\n          class=\"lib-donut-justified-label-icon\"\r\n          [style.background-color]=\"item.value\"\r\n        ></span\r\n        ><span>{{ item.key }}</span>\r\n      </li>\r\n    </ul>\r\n  </div> -->\r\n\r\n\r\n  <!-- <div *ngIf=\"chartConfiguration?.isDisplayBarDetailsAtBottom\">\r\n    <div\r\n      class=\"bar-values lib-display-flex lib-justify-content-center lib-align-items-center\"\r\n      *ngFor=\"\r\n        let item of chartData.metaData.colors | keyvalue : keepOrder;\r\n        let i = index\r\n      \">\r\n      <div\r\n        class=\"bar-name font-size-1\"\r\n        *ngIf=\"\r\n          chartData.data[0][item.key] &&\r\n          i <= chartConfiguration.howmanyBarDetailsToDisplay\r\n        \"\r\n      >\r\n        {{ item.key }}\r\n      </div>\r\n      <div\r\n        class=\"bar-value lib-display-flex lib-align-items-center font-size-1\"\r\n        [style.color]=\"\r\n          chartConfiguration.barVauleColor ? barVauleColor : item.value\r\n        \"\r\n        *ngIf=\"\r\n          chartData.data[0][item.key] &&\r\n          i <= chartConfiguration.howmanyBarDetailsToDisplay\r\n        \"\r\n      >\r\n        {{ chartData.data[0][item.key] }}\r\n      </div>\r\n    </div>\r\n  </div> -->\r\n</div>\r\n", styles: [".lib-axis-group-label{font-size:.85em;font-weight:600;letter-spacing:0px;color:#000;opacity:1}.text-transform-uppercase{text-transform:uppercase!important}.text-transform-capitalize{text-transform:capitalize!important}.legend-holder-right{display:flex;justify-content:flex-end}.display-flex{display:flex}.legends-positioning-inline{display:flex;align-items:center;justify-content:center;margin-right:10px;margin-left:35px;font-size:18px;font-weight:700;letter-spacing:0px;color:#000;opacity:1}.title{background-color:#d9d9d9;height:50px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:3px;line-height:1.3}.title:after{content:\"\";position:absolute;bottom:0;margin-bottom:-10px;left:50%;margin-left:-10px;width:0;height:0;border-top:solid 10px #d3d3d3;border-left:solid 10px transparent;border-right:solid 10px transparent}.title-bar-name{color:var(--font-color)!important;font-size:17px;font-weight:700;text-transform:capitalize}.title-bar-value{color:var(--font-color)!important;font-size:14px}.title-bar-value>span{font-weight:600}.zoomIcons-holder{display:flex;align-items:center}.legends-latest{height:14px;width:14px;display:flex;margin-right:10px}.legend-latest-holder{font-size:12px;display:flex;justify-content:flex-start;align-items:center}.marginRight-30{margin-right:30px}.zoomIcons-holder{display:flex;align-items:center;margin-right:15px}.zoomIcons{border:.5px solid #b6b6b6;cursor:pointer;display:flex;justify-content:center;align-items:center;width:30px;height:30px;color:var(--color)!important}.zoom-active{background-color:#2d5ca0;opacity:1}.zoom-inactive{background-color:#d9d9d9;opacity:.5}.flex-inline{display:flex;justify-content:center;align-items:center;font-size:14px}.marginLeft-20{margin-left:20px}.target-display{font-size:12px;line-height:14.52px;font-weight:700;text-transform:uppercase;float:right}.legend-style{font-weight:600;text-transform:capitalize}.bar-values{margin-top:10px}.bar-name{font-weight:600;margin-right:10px;text-transform:capitalize}.lib-chart-svg{margin-top:10px}.bar-value{height:29px;background-color:#f4f4f4;padding-left:15px;padding-right:15px;border-radius:8px;box-shadow:-2px 2px 10px #0000004d,2px 2px 10px #0000004d;font-weight:600}.mobile-xaxis-override{writing-mode:sideways-lr}.mobile-xaxis-override[style*=\"writing-mode: horizontal-tb\"]{writing-mode:horizontal-tb!important;transform:none!important}g.x1.axis1 g.tick text[style*=\"writing-mode: horizontal-tb\"]{writing-mode:horizontal-tb!important;transform:none!important}@media (min-height: 900px){.legends-latest{height:17px;width:17px}}\n", ".lib-chart-wrapper{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;background:#fff 0% 0% no-repeat padding-box;position:relative}.lib-chart-wrapper-wo-shadow{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background){background-color:#2e3640}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background) .chart-title{color:#fff}.lib-chart-svg{width:100%}.lib-chart-header{text-align:center;background-color:#052340;color:#fff;width:100%;height:17%;word-spacing:.5px;line-height:1.8;font-weight:700;padding-top:2%;letter-spacing:0;font-size:1.2em}.lib-donut-chart-footer{width:100%;text-align:right}.lib-donut-label-text{font-size:.9em;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-weight:400;letter-spacing:0px;color:#000;opacity:1}.lib-donut-label-icon{display:inline-block;width:10px;height:10px;margin-right:20px;border-radius:3px}.lib-donut-label-item{font-weight:400;font-size:.85em;color:#2f2f2f}.lib-donut-justified-label-wrapper{width:100%;display:inline-block;text-align:center;list-style-type:none}.lib-donut-justified-label-item{font-weight:400;font-size:.85em;color:#2f2f2f;display:inline-block;text-align:left;padding:0 10px}.lib-donut-justified-label-icon{display:inline-block;width:10px;height:10px;margin-right:5px;border-radius:3px}.lib-no-background{background:none!important}.lib-display-hidden{display:none}.lib-ylabel-weeklyCharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:12px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.07px;text-transform:capitalize;color:#000}.lib-data-labels-weeklycharts{font-style:normal;font-variant:normal;font-weight:400;font-size:12px;line-height:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.06px;color:#000}.lib-data-labels-angled-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:9.5px;line-height:11px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:.4px;text-anchor:start}.lib-xaxis-labels-texts-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:11px;letter-spacing:-.05px;fill:#000}.lib-xaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:-1px;color:#000;opacity:1;text-transform:capitalize}.lib-white-space-nowrap{white-space:nowrap}.lib-xaxis-labels-texts-drilldown-alt{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:10px;letter-spacing:0px;color:#000;opacity:1;text-transform:capitalize}.lib-yaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:0px;color:#000!important;opacity:1}.lib-ylabel-drilldowncharts,.lib-xlabel-drilldowncharts{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:16px;letter-spacing:-.1px;color:#000!important;opacity:1}.lib-donut-justified-label-icon-drilldown{display:inline-block;width:14px;height:14px;margin-right:10px;border-radius:50%}.marginright-2{margin-right:2%}.margintop-5{margin-top:5%}.width-100{width:100%}.float-right{float:right}.marginBottom-10{margin-bottom:10px}.header-alt{align-items:center;margin-bottom:10px}input::placeholder{font-size:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;color:#000;opacity:1}.padding-5{padding:5px}.hidden{visibility:hidden}.font-weight-bold{font-weight:900}.textalign-center{text-align:center}.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.font-weight-600{font-weight:600}.marginRight-15{margin-right:15px}.marginRight-20{margin-right:20px}.switch{position:relative;display:inline-block;width:46px;height:24px;margin-left:5px;margin-right:5px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#2d5ca0;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:\"\";height:18px;width:18px;right:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider.round{border-radius:18px}.slider.round:before{border-radius:50%}.slider1{position:absolute;cursor:pointer;inset:0;background-color:#015ba2cf;-webkit-transition:.4s;transition:.4s}.slider1:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider1.round1{border-radius:18px}.slider1.round1:before{border-radius:50%}.lib-display-flex{display:flex}.lib-align-items-center{align-items:center}.lib-flex-direction-column{flex-direction:column}.lib-justify-content-space-between{justify-content:space-between}.lib-justify-content-space-around{justify-content:space-around}.lib-justify-content-center{justify-content:center}.lib-justify-content-start{justify-content:start}.lib-justify-content-end{justify-content:end}.lib-ml-20{margin-left:20px}.lib-position-absolute{position:absolute}.lib-z-index-9{z-index:9}.marginright-3{margin-right:3px}@media (min-height: 900px){.lib-chart-wrapper{border-radius:8px}.header-font-size-1{font-size:18px!important}.font-size-1{font-size:14px!important}.font-size-2{font-size:16px!important}.font-size-3{font-size:14px!important}.font-size-4{font-size:22px!important}.font-size-5{font-size:24px!important}}\n"], dependencies: [{ 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: i2.ResizedDirective, selector: "[resized]", outputs: ["resized"] }, { kind: "component", type: ChartHeaderV1Component, selector: "lib-chart-header-v1", inputs: ["isAlertEnabled", "title", "menuOptions", "isEditEnabled", "isria", "hasDrillDown", "selectedKpiTooltop"], outputs: ["menuOptionClickEvent"] }, { kind: "component", type: ChartHeaderV2Component, selector: "lib-chart-header-v2", inputs: ["chartData", "chartConfiguration"], outputs: ["clickEvent", "zoomInZoomOutClick"] }, { kind: "component", type: ChartHeaderV3Component, selector: "lib-chart-header-v3", inputs: ["chartData", "chartConfiguration"], outputs: ["compareByFilterSelection", "zoomInZoomOutClick"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HorizontalGroupedBarWithScrollZoomComponent, selector: "lib-horizontal-grouped-bar-with-scroll-zoom", inputs: { chartData: "chartData", customChartConfiguration: "customChartConfiguration" }, outputs: { clickEvent: "clickEvent", headerMenuclickEvent: "headerMenuclickEvent" }, viewQueries: [{ propertyName: "containerElt", first: true, predicate: ["groupchartcontainer"], descendants: true, static: true }, { propertyName: "groupcontainerElt", first: true, predicate: ["groupcontainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  #groupcontainer\r\n  class=\"lib-chart-wrapper\"\r\n  [ngClass]=\"{ 'lib-no-background': isTransparentBackground }\"\r\n  style=\"background-color: var(--card-bg);\"\r\n  (resized)=\"onResized($event)\"\r\n>\r\n  <div class=\"header-alt\" *ngIf=\"!isHeaderVisible\">\r\n    <lib-chart-header-v2\r\n      [chartData]=\"chartData\"\r\n      [chartConfiguration]=\"chartConfiguration\"\r\n      (clickEvent)=\"handleClick($event)\"\r\n    ></lib-chart-header-v2>\r\n    <lib-chart-header-v3\r\n      [chartData]=\"chartData\"\r\n      [chartConfiguration]=\"chartConfiguration\"\r\n      (compareByFilterSelection)=\"handleCompareByFilterSelection($event)\"\r\n      (zoomInZoomOutClick)=\"handleZoominZoomoutClick($event)\"\r\n    ></lib-chart-header-v3>\r\n  </div>\r\n  <lib-chart-header-v1\r\n    [title]=\"chartData.metaData.title\"\r\n    [hasDrillDown]=\"chartData.metaData.hasDrillDown\"\r\n    [isEditEnabled]=\"chartData.metaData.isEditEnabled\"\r\n    [menuOptions]=\"chartConfiguration.headerMenuOptions\"\r\n    [isria]=\"customChartConfiguration.isRia\"\r\n    [selectedKpiTooltop]=\"chartConfiguration.selectedKpiTooltop\"\r\n    (menuOptionClickEvent)=\"handleHeaderMenuClick($event)\"\r\n    [isAlertEnabled]=\"isAlertEnabled\"\r\n    *ngIf=\"isHeaderVisible\"\r\n  ></lib-chart-header-v1>\r\n  <div\r\n    *ngIf=\"\r\n      chartData &&\r\n      chartData.metaData &&\r\n      chartConfiguration.legendJustified &&\r\n      legendVisible &&\r\n      chartConfiguration.legendAtTopRight\r\n    \"\r\n    class=\"legend-holder-right\"\r\n    [style.height]=\"chartConfiguration.footerHeight\"\r\n  >\r\n    <ul class=\"display-flex\">\r\n      <li\r\n        class=\"legends-positioning-inline\"\r\n        *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"\r\n      >\r\n        <span\r\n          class=\"lib-donut-justified-label-icon-drilldown\"\r\n          [style.background-color]=\"item.value\"\r\n        ></span\r\n        ><span>{{ item.key }}</span>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n  <div\r\n    [style.height]=\"chartConfiguration.svgHeight\"\r\n    id=\"groupchartcontainer\"\r\n    #groupchartcontainer\r\n    class=\"lib-chart-svg\"\r\n  ></div>\r\n\r\n\r\n  <!-- <div\r\n    *ngIf=\"\r\n      chartData &&\r\n      chartData.metaData &&\r\n      chartConfiguration.legendJustified &&\r\n      legendVisible &&\r\n      !chartConfiguration.legendAtTopRight\r\n    \"\r\n    class=\"lib-donut-chart-footer\"\r\n    [style.height]=\"chartConfiguration.footerHeight\"\r\n  >\r\n    <ul class=\"lib-donut-justified-label-wrapper\">\r\n      <li\r\n        class=\"lib-donut-justified-label-item\"\r\n        *ngFor=\"let item of chartData.metaData.colors | keyvalue\"\r\n      >\r\n        <span\r\n          class=\"lib-donut-justified-label-icon\"\r\n          [style.background-color]=\"item.value\"\r\n        ></span\r\n        ><span>{{ item.key }}</span>\r\n      </li>\r\n    </ul>\r\n  </div> -->\r\n\r\n\r\n  <!-- <div *ngIf=\"chartConfiguration?.isDisplayBarDetailsAtBottom\">\r\n    <div\r\n      class=\"bar-values lib-display-flex lib-justify-content-center lib-align-items-center\"\r\n      *ngFor=\"\r\n        let item of chartData.metaData.colors | keyvalue : keepOrder;\r\n        let i = index\r\n      \">\r\n      <div\r\n        class=\"bar-name font-size-1\"\r\n        *ngIf=\"\r\n          chartData.data[0][item.key] &&\r\n          i <= chartConfiguration.howmanyBarDetailsToDisplay\r\n        \"\r\n      >\r\n        {{ item.key }}\r\n      </div>\r\n      <div\r\n        class=\"bar-value lib-display-flex lib-align-items-center font-size-1\"\r\n        [style.color]=\"\r\n          chartConfiguration.barVauleColor ? barVauleColor : item.value\r\n        \"\r\n        *ngIf=\"\r\n          chartData.data[0][item.key] &&\r\n          i <= chartConfiguration.howmanyBarDetailsToDisplay\r\n        \"\r\n      >\r\n        {{ chartData.data[0][item.key] }}\r\n      </div>\r\n    </div>\r\n  </div> -->\r\n</div>\r\n", styles: [".lib-axis-group-label{font-size:.85em;font-weight:600;letter-spacing:0px;color:#000;opacity:1}.text-transform-uppercase{text-transform:uppercase!important}.text-transform-capitalize{text-transform:capitalize!important}.legend-holder-right{display:flex;justify-content:flex-end}.display-flex{display:flex}.legends-positioning-inline{display:flex;align-items:center;justify-content:center;margin-right:10px;margin-left:35px;font-size:18px;font-weight:700;letter-spacing:0px;color:#000;opacity:1}.title{background-color:#d9d9d9;height:50px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:3px;line-height:1.3}.title:after{content:\"\";position:absolute;bottom:0;margin-bottom:-10px;left:50%;margin-left:-10px;width:0;height:0;border-top:solid 10px #d3d3d3;border-left:solid 10px transparent;border-right:solid 10px transparent}.title-bar-name{color:var(--font-color)!important;font-size:17px;font-weight:700;text-transform:capitalize}.title-bar-value{color:var(--font-color)!important;font-size:14px}.title-bar-value>span{font-weight:600}.zoomIcons-holder{display:flex;align-items:center}.legends-latest{height:14px;width:14px;display:flex;margin-right:10px}.legend-latest-holder{font-size:12px;display:flex;justify-content:flex-start;align-items:center}.marginRight-30{margin-right:30px}.zoomIcons-holder{display:flex;align-items:center;margin-right:15px}.zoomIcons{border:.5px solid #b6b6b6;cursor:pointer;display:flex;justify-content:center;align-items:center;width:30px;height:30px;color:var(--color)!important}.zoom-active{background-color:#2d5ca0;opacity:1}.zoom-inactive{background-color:#d9d9d9;opacity:.5}.flex-inline{display:flex;justify-content:center;align-items:center;font-size:14px}.marginLeft-20{margin-left:20px}.target-display{font-size:12px;line-height:14.52px;font-weight:700;text-transform:uppercase;float:right}.legend-style{font-weight:600;text-transform:capitalize}.bar-values{margin-top:10px}.bar-name{font-weight:600;margin-right:10px;text-transform:capitalize}.lib-chart-svg{margin-top:10px}.outer-container{position:relative;width:100%;overflow:visible}.inner-container{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.inner-container::-webkit-scrollbar{height:10px}.inner-container::-webkit-scrollbar-thumb{background:#0003;border-radius:5px}.inner-container::-webkit-scrollbar-track{background:transparent}.inner-container svg{display:block;min-width:100%}.bar-value{height:29px;background-color:#f4f4f4;padding-left:15px;padding-right:15px;border-radius:8px;box-shadow:-2px 2px 10px #0000004d,2px 2px 10px #0000004d;font-weight:600}.mobile-xaxis-override{writing-mode:sideways-lr}.mobile-xaxis-override[style*=\"writing-mode: horizontal-tb\"]{writing-mode:horizontal-tb!important;transform:none!important}g.x1.axis1 g.tick text[style*=\"writing-mode: horizontal-tb\"]{writing-mode:horizontal-tb!important;transform:none!important}@media (min-height: 900px){.legends-latest{height:17px;width:17px}}\n", ".lib-chart-wrapper{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;background:#fff 0% 0% no-repeat padding-box;position:relative}.lib-chart-wrapper-wo-shadow{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background){background-color:#2e3640}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background) .chart-title{color:#fff}.lib-chart-svg{width:100%}.lib-chart-header{text-align:center;background-color:#052340;color:#fff;width:100%;height:17%;word-spacing:.5px;line-height:1.8;font-weight:700;padding-top:2%;letter-spacing:0;font-size:1.2em}.lib-donut-chart-footer{width:100%;text-align:right}.lib-donut-label-text{font-size:.9em;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-weight:400;letter-spacing:0px;color:#000;opacity:1}.lib-donut-label-icon{display:inline-block;width:10px;height:10px;margin-right:20px;border-radius:3px}.lib-donut-label-item{font-weight:400;font-size:.85em;color:#2f2f2f}.lib-donut-justified-label-wrapper{width:100%;display:inline-block;text-align:center;list-style-type:none}.lib-donut-justified-label-item{font-weight:400;font-size:.85em;color:#2f2f2f;display:inline-block;text-align:left;padding:0 10px}.lib-donut-justified-label-icon{display:inline-block;width:10px;height:10px;margin-right:5px;border-radius:3px}.lib-no-background{background:none!important}.lib-display-hidden{display:none}.lib-ylabel-weeklyCharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:12px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.07px;text-transform:capitalize;color:#000}.lib-data-labels-weeklycharts{font-style:normal;font-variant:normal;font-weight:400;font-size:12px;line-height:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.06px;color:#000}.lib-data-labels-angled-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:9.5px;line-height:11px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:.4px;text-anchor:start}.lib-xaxis-labels-texts-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:11px;letter-spacing:-.05px;fill:#000}.lib-xaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:-1px;color:#000;opacity:1;text-transform:capitalize}.lib-white-space-nowrap{white-space:nowrap}.lib-xaxis-labels-texts-drilldown-alt{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:10px;letter-spacing:0px;color:#000;opacity:1;text-transform:capitalize}.lib-yaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:0px;color:#000!important;opacity:1}.lib-ylabel-drilldowncharts,.lib-xlabel-drilldowncharts{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:16px;letter-spacing:-.1px;color:#000!important;opacity:1}.lib-donut-justified-label-icon-drilldown{display:inline-block;width:14px;height:14px;margin-right:10px;border-radius:50%}.marginright-2{margin-right:2%}.margintop-5{margin-top:5%}.width-100{width:100%}.float-right{float:right}.marginBottom-10{margin-bottom:10px}.header-alt{align-items:center;margin-bottom:10px}input::placeholder{font-size:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;color:#000;opacity:1}.padding-5{padding:5px}.hidden{visibility:hidden}.font-weight-bold{font-weight:900}.textalign-center{text-align:center}.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.font-weight-600{font-weight:600}.marginRight-15{margin-right:15px}.marginRight-20{margin-right:20px}.switch{position:relative;display:inline-block;width:46px;height:24px;margin-left:5px;margin-right:5px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#2d5ca0;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:\"\";height:18px;width:18px;right:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider.round{border-radius:18px}.slider.round:before{border-radius:50%}.slider1{position:absolute;cursor:pointer;inset:0;background-color:#015ba2cf;-webkit-transition:.4s;transition:.4s}.slider1:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider1.round1{border-radius:18px}.slider1.round1:before{border-radius:50%}.lib-display-flex{display:flex}.lib-align-items-center{align-items:center}.lib-flex-direction-column{flex-direction:column}.lib-justify-content-space-between{justify-content:space-between}.lib-justify-content-space-around{justify-content:space-around}.lib-justify-content-center{justify-content:center}.lib-justify-content-start{justify-content:start}.lib-justify-content-end{justify-content:end}.lib-ml-20{margin-left:20px}.lib-position-absolute{position:absolute}.lib-z-index-9{z-index:9}.marginright-3{margin-right:3px}@media (min-height: 900px){.lib-chart-wrapper{border-radius:8px}.header-font-size-1{font-size:18px!important}.font-size-1{font-size:14px!important}.font-size-2{font-size:16px!important}.font-size-3{font-size:14px!important}.font-size-4{font-size:22px!important}.font-size-5{font-size:24px!important}}\n"], dependencies: [{ 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: i2.ResizedDirective, selector: "[resized]", outputs: ["resized"] }, { kind: "component", type: ChartHeaderV1Component, selector: "lib-chart-header-v1", inputs: ["isAlertEnabled", "title", "menuOptions", "isEditEnabled", "isria", "hasDrillDown", "selectedKpiTooltop"], outputs: ["menuOptionClickEvent"] }, { kind: "component", type: ChartHeaderV2Component, selector: "lib-chart-header-v2", inputs: ["chartData", "chartConfiguration"], outputs: ["clickEvent", "zoomInZoomOutClick"] }, { kind: "component", type: ChartHeaderV3Component, selector: "lib-chart-header-v3", inputs: ["chartData", "chartConfiguration"], outputs: ["compareByFilterSelection", "zoomInZoomOutClick"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HorizontalGroupedBarWithScrollZoomComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-horizontal-grouped-bar-with-scroll-zoom', encapsulation: ViewEncapsulation.None, template: "<div\r\n  #groupcontainer\r\n  class=\"lib-chart-wrapper\"\r\n  [ngClass]=\"{ 'lib-no-background': isTransparentBackground }\"\r\n  style=\"background-color: var(--card-bg);\"\r\n  (resized)=\"onResized($event)\"\r\n>\r\n  <div class=\"header-alt\" *ngIf=\"!isHeaderVisible\">\r\n    <lib-chart-header-v2\r\n      [chartData]=\"chartData\"\r\n      [chartConfiguration]=\"chartConfiguration\"\r\n      (clickEvent)=\"handleClick($event)\"\r\n    ></lib-chart-header-v2>\r\n    <lib-chart-header-v3\r\n      [chartData]=\"chartData\"\r\n      [chartConfiguration]=\"chartConfiguration\"\r\n      (compareByFilterSelection)=\"handleCompareByFilterSelection($event)\"\r\n      (zoomInZoomOutClick)=\"handleZoominZoomoutClick($event)\"\r\n    ></lib-chart-header-v3>\r\n  </div>\r\n  <lib-chart-header-v1\r\n    [title]=\"chartData.metaData.title\"\r\n    [hasDrillDown]=\"chartData.metaData.hasDrillDown\"\r\n    [isEditEnabled]=\"chartData.metaData.isEditEnabled\"\r\n    [menuOptions]=\"chartConfiguration.headerMenuOptions\"\r\n    [isria]=\"customChartConfiguration.isRia\"\r\n    [selectedKpiTooltop]=\"chartConfiguration.selectedKpiTooltop\"\r\n    (menuOptionClickEvent)=\"handleHeaderMenuClick($event)\"\r\n    [isAlertEnabled]=\"isAlertEnabled\"\r\n    *ngIf=\"isHeaderVisible\"\r\n  ></lib-chart-header-v1>\r\n  <div\r\n    *ngIf=\"\r\n      chartData &&\r\n      chartData.metaData &&\r\n      chartConfiguration.legendJustified &&\r\n      legendVisible &&\r\n      chartConfiguration.legendAtTopRight\r\n    \"\r\n    class=\"legend-holder-right\"\r\n    [style.height]=\"chartConfiguration.footerHeight\"\r\n  >\r\n    <ul class=\"display-flex\">\r\n      <li\r\n        class=\"legends-positioning-inline\"\r\n        *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"\r\n      >\r\n        <span\r\n          class=\"lib-donut-justified-label-icon-drilldown\"\r\n          [style.background-color]=\"item.value\"\r\n        ></span\r\n        ><span>{{ item.key }}</span>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n  <div\r\n    [style.height]=\"chartConfiguration.svgHeight\"\r\n    id=\"groupchartcontainer\"\r\n    #groupchartcontainer\r\n    class=\"lib-chart-svg\"\r\n  ></div>\r\n\r\n\r\n  <!-- <div\r\n    *ngIf=\"\r\n      chartData &&\r\n      chartData.metaData &&\r\n      chartConfiguration.legendJustified &&\r\n      legendVisible &&\r\n      !chartConfiguration.legendAtTopRight\r\n    \"\r\n    class=\"lib-donut-chart-footer\"\r\n    [style.height]=\"chartConfiguration.footerHeight\"\r\n  >\r\n    <ul class=\"lib-donut-justified-label-wrapper\">\r\n      <li\r\n        class=\"lib-donut-justified-label-item\"\r\n        *ngFor=\"let item of chartData.metaData.colors | keyvalue\"\r\n      >\r\n        <span\r\n          class=\"lib-donut-justified-label-icon\"\r\n          [style.background-color]=\"item.value\"\r\n        ></span\r\n        ><span>{{ item.key }}</span>\r\n      </li>\r\n    </ul>\r\n  </div> -->\r\n\r\n\r\n  <!-- <div *ngIf=\"chartConfiguration?.isDisplayBarDetailsAtBottom\">\r\n    <div\r\n      class=\"bar-values lib-display-flex lib-justify-content-center lib-align-items-center\"\r\n      *ngFor=\"\r\n        let item of chartData.metaData.colors | keyvalue : keepOrder;\r\n        let i = index\r\n      \">\r\n      <div\r\n        class=\"bar-name font-size-1\"\r\n        *ngIf=\"\r\n          chartData.data[0][item.key] &&\r\n          i <= chartConfiguration.howmanyBarDetailsToDisplay\r\n        \"\r\n      >\r\n        {{ item.key }}\r\n      </div>\r\n      <div\r\n        class=\"bar-value lib-display-flex lib-align-items-center font-size-1\"\r\n        [style.color]=\"\r\n          chartConfiguration.barVauleColor ? barVauleColor : item.value\r\n        \"\r\n        *ngIf=\"\r\n          chartData.data[0][item.key] &&\r\n          i <= chartConfiguration.howmanyBarDetailsToDisplay\r\n        \"\r\n      >\r\n        {{ chartData.data[0][item.key] }}\r\n      </div>\r\n    </div>\r\n  </div> -->\r\n</div>\r\n", styles: [".lib-axis-group-label{font-size:.85em;font-weight:600;letter-spacing:0px;color:#000;opacity:1}.text-transform-uppercase{text-transform:uppercase!important}.text-transform-capitalize{text-transform:capitalize!important}.legend-holder-right{display:flex;justify-content:flex-end}.display-flex{display:flex}.legends-positioning-inline{display:flex;align-items:center;justify-content:center;margin-right:10px;margin-left:35px;font-size:18px;font-weight:700;letter-spacing:0px;color:#000;opacity:1}.title{background-color:#d9d9d9;height:50px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:3px;line-height:1.3}.title:after{content:\"\";position:absolute;bottom:0;margin-bottom:-10px;left:50%;margin-left:-10px;width:0;height:0;border-top:solid 10px #d3d3d3;border-left:solid 10px transparent;border-right:solid 10px transparent}.title-bar-name{color:var(--font-color)!important;font-size:17px;font-weight:700;text-transform:capitalize}.title-bar-value{color:var(--font-color)!important;font-size:14px}.title-bar-value>span{font-weight:600}.zoomIcons-holder{display:flex;align-items:center}.legends-latest{height:14px;width:14px;display:flex;margin-right:10px}.legend-latest-holder{font-size:12px;display:flex;justify-content:flex-start;align-items:center}.marginRight-30{margin-right:30px}.zoomIcons-holder{display:flex;align-items:center;margin-right:15px}.zoomIcons{border:.5px solid #b6b6b6;cursor:pointer;display:flex;justify-content:center;align-items:center;width:30px;height:30px;color:var(--color)!important}.zoom-active{background-color:#2d5ca0;opacity:1}.zoom-inactive{background-color:#d9d9d9;opacity:.5}.flex-inline{display:flex;justify-content:center;align-items:center;font-size:14px}.marginLeft-20{margin-left:20px}.target-display{font-size:12px;line-height:14.52px;font-weight:700;text-transform:uppercase;float:right}.legend-style{font-weight:600;text-transform:capitalize}.bar-values{margin-top:10px}.bar-name{font-weight:600;margin-right:10px;text-transform:capitalize}.lib-chart-svg{margin-top:10px}.bar-value{height:29px;background-color:#f4f4f4;padding-left:15px;padding-right:15px;border-radius:8px;box-shadow:-2px 2px 10px #0000004d,2px 2px 10px #0000004d;font-weight:600}.mobile-xaxis-override{writing-mode:sideways-lr}.mobile-xaxis-override[style*=\"writing-mode: horizontal-tb\"]{writing-mode:horizontal-tb!important;transform:none!important}g.x1.axis1 g.tick text[style*=\"writing-mode: horizontal-tb\"]{writing-mode:horizontal-tb!important;transform:none!important}@media (min-height: 900px){.legends-latest{height:17px;width:17px}}\n", ".lib-chart-wrapper{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;background:#fff 0% 0% no-repeat padding-box;position:relative}.lib-chart-wrapper-wo-shadow{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background){background-color:#2e3640}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background) .chart-title{color:#fff}.lib-chart-svg{width:100%}.lib-chart-header{text-align:center;background-color:#052340;color:#fff;width:100%;height:17%;word-spacing:.5px;line-height:1.8;font-weight:700;padding-top:2%;letter-spacing:0;font-size:1.2em}.lib-donut-chart-footer{width:100%;text-align:right}.lib-donut-label-text{font-size:.9em;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-weight:400;letter-spacing:0px;color:#000;opacity:1}.lib-donut-label-icon{display:inline-block;width:10px;height:10px;margin-right:20px;border-radius:3px}.lib-donut-label-item{font-weight:400;font-size:.85em;color:#2f2f2f}.lib-donut-justified-label-wrapper{width:100%;display:inline-block;text-align:center;list-style-type:none}.lib-donut-justified-label-item{font-weight:400;font-size:.85em;color:#2f2f2f;display:inline-block;text-align:left;padding:0 10px}.lib-donut-justified-label-icon{display:inline-block;width:10px;height:10px;margin-right:5px;border-radius:3px}.lib-no-background{background:none!important}.lib-display-hidden{display:none}.lib-ylabel-weeklyCharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:12px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.07px;text-transform:capitalize;color:#000}.lib-data-labels-weeklycharts{font-style:normal;font-variant:normal;font-weight:400;font-size:12px;line-height:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.06px;color:#000}.lib-data-labels-angled-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:9.5px;line-height:11px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:.4px;text-anchor:start}.lib-xaxis-labels-texts-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:11px;letter-spacing:-.05px;fill:#000}.lib-xaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:-1px;color:#000;opacity:1;text-transform:capitalize}.lib-white-space-nowrap{white-space:nowrap}.lib-xaxis-labels-texts-drilldown-alt{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:10px;letter-spacing:0px;color:#000;opacity:1;text-transform:capitalize}.lib-yaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:0px;color:#000!important;opacity:1}.lib-ylabel-drilldowncharts,.lib-xlabel-drilldowncharts{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:16px;letter-spacing:-.1px;color:#000!important;opacity:1}.lib-donut-justified-label-icon-drilldown{display:inline-block;width:14px;height:14px;margin-right:10px;border-radius:50%}.marginright-2{margin-right:2%}.margintop-5{margin-top:5%}.width-100{width:100%}.float-right{float:right}.marginBottom-10{margin-bottom:10px}.header-alt{align-items:center;margin-bottom:10px}input::placeholder{font-size:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;color:#000;opacity:1}.padding-5{padding:5px}.hidden{visibility:hidden}.font-weight-bold{font-weight:900}.textalign-center{text-align:center}.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.font-weight-600{font-weight:600}.marginRight-15{margin-right:15px}.marginRight-20{margin-right:20px}.switch{position:relative;display:inline-block;width:46px;height:24px;margin-left:5px;margin-right:5px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#2d5ca0;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:\"\";height:18px;width:18px;right:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider.round{border-radius:18px}.slider.round:before{border-radius:50%}.slider1{position:absolute;cursor:pointer;inset:0;background-color:#015ba2cf;-webkit-transition:.4s;transition:.4s}.slider1:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider1.round1{border-radius:18px}.slider1.round1:before{border-radius:50%}.lib-display-flex{display:flex}.lib-align-items-center{align-items:center}.lib-flex-direction-column{flex-direction:column}.lib-justify-content-space-between{justify-content:space-between}.lib-justify-content-space-around{justify-content:space-around}.lib-justify-content-center{justify-content:center}.lib-justify-content-start{justify-content:start}.lib-justify-content-end{justify-content:end}.lib-ml-20{margin-left:20px}.lib-position-absolute{position:absolute}.lib-z-index-9{z-index:9}.marginright-3{margin-right:3px}@media (min-height: 900px){.lib-chart-wrapper{border-radius:8px}.header-font-size-1{font-size:18px!important}.font-size-1{font-size:14px!important}.font-size-2{font-size:16px!important}.font-size-3{font-size:14px!important}.font-size-4{font-size:22px!important}.font-size-5{font-size:24px!important}}\n"] }]
+            args: [{ selector: 'lib-horizontal-grouped-bar-with-scroll-zoom', encapsulation: ViewEncapsulation.None, template: "<div\r\n  #groupcontainer\r\n  class=\"lib-chart-wrapper\"\r\n  [ngClass]=\"{ 'lib-no-background': isTransparentBackground }\"\r\n  style=\"background-color: var(--card-bg);\"\r\n  (resized)=\"onResized($event)\"\r\n>\r\n  <div class=\"header-alt\" *ngIf=\"!isHeaderVisible\">\r\n    <lib-chart-header-v2\r\n      [chartData]=\"chartData\"\r\n      [chartConfiguration]=\"chartConfiguration\"\r\n      (clickEvent)=\"handleClick($event)\"\r\n    ></lib-chart-header-v2>\r\n    <lib-chart-header-v3\r\n      [chartData]=\"chartData\"\r\n      [chartConfiguration]=\"chartConfiguration\"\r\n      (compareByFilterSelection)=\"handleCompareByFilterSelection($event)\"\r\n      (zoomInZoomOutClick)=\"handleZoominZoomoutClick($event)\"\r\n    ></lib-chart-header-v3>\r\n  </div>\r\n  <lib-chart-header-v1\r\n    [title]=\"chartData.metaData.title\"\r\n    [hasDrillDown]=\"chartData.metaData.hasDrillDown\"\r\n    [isEditEnabled]=\"chartData.metaData.isEditEnabled\"\r\n    [menuOptions]=\"chartConfiguration.headerMenuOptions\"\r\n    [isria]=\"customChartConfiguration.isRia\"\r\n    [selectedKpiTooltop]=\"chartConfiguration.selectedKpiTooltop\"\r\n    (menuOptionClickEvent)=\"handleHeaderMenuClick($event)\"\r\n    [isAlertEnabled]=\"isAlertEnabled\"\r\n    *ngIf=\"isHeaderVisible\"\r\n  ></lib-chart-header-v1>\r\n  <div\r\n    *ngIf=\"\r\n      chartData &&\r\n      chartData.metaData &&\r\n      chartConfiguration.legendJustified &&\r\n      legendVisible &&\r\n      chartConfiguration.legendAtTopRight\r\n    \"\r\n    class=\"legend-holder-right\"\r\n    [style.height]=\"chartConfiguration.footerHeight\"\r\n  >\r\n    <ul class=\"display-flex\">\r\n      <li\r\n        class=\"legends-positioning-inline\"\r\n        *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"\r\n      >\r\n        <span\r\n          class=\"lib-donut-justified-label-icon-drilldown\"\r\n          [style.background-color]=\"item.value\"\r\n        ></span\r\n        ><span>{{ item.key }}</span>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n  <div\r\n    [style.height]=\"chartConfiguration.svgHeight\"\r\n    id=\"groupchartcontainer\"\r\n    #groupchartcontainer\r\n    class=\"lib-chart-svg\"\r\n  ></div>\r\n\r\n\r\n  <!-- <div\r\n    *ngIf=\"\r\n      chartData &&\r\n      chartData.metaData &&\r\n      chartConfiguration.legendJustified &&\r\n      legendVisible &&\r\n      !chartConfiguration.legendAtTopRight\r\n    \"\r\n    class=\"lib-donut-chart-footer\"\r\n    [style.height]=\"chartConfiguration.footerHeight\"\r\n  >\r\n    <ul class=\"lib-donut-justified-label-wrapper\">\r\n      <li\r\n        class=\"lib-donut-justified-label-item\"\r\n        *ngFor=\"let item of chartData.metaData.colors | keyvalue\"\r\n      >\r\n        <span\r\n          class=\"lib-donut-justified-label-icon\"\r\n          [style.background-color]=\"item.value\"\r\n        ></span\r\n        ><span>{{ item.key }}</span>\r\n      </li>\r\n    </ul>\r\n  </div> -->\r\n\r\n\r\n  <!-- <div *ngIf=\"chartConfiguration?.isDisplayBarDetailsAtBottom\">\r\n    <div\r\n      class=\"bar-values lib-display-flex lib-justify-content-center lib-align-items-center\"\r\n      *ngFor=\"\r\n        let item of chartData.metaData.colors | keyvalue : keepOrder;\r\n        let i = index\r\n      \">\r\n      <div\r\n        class=\"bar-name font-size-1\"\r\n        *ngIf=\"\r\n          chartData.data[0][item.key] &&\r\n          i <= chartConfiguration.howmanyBarDetailsToDisplay\r\n        \"\r\n      >\r\n        {{ item.key }}\r\n      </div>\r\n      <div\r\n        class=\"bar-value lib-display-flex lib-align-items-center font-size-1\"\r\n        [style.color]=\"\r\n          chartConfiguration.barVauleColor ? barVauleColor : item.value\r\n        \"\r\n        *ngIf=\"\r\n          chartData.data[0][item.key] &&\r\n          i <= chartConfiguration.howmanyBarDetailsToDisplay\r\n        \"\r\n      >\r\n        {{ chartData.data[0][item.key] }}\r\n      </div>\r\n    </div>\r\n  </div> -->\r\n</div>\r\n", styles: [".lib-axis-group-label{font-size:.85em;font-weight:600;letter-spacing:0px;color:#000;opacity:1}.text-transform-uppercase{text-transform:uppercase!important}.text-transform-capitalize{text-transform:capitalize!important}.legend-holder-right{display:flex;justify-content:flex-end}.display-flex{display:flex}.legends-positioning-inline{display:flex;align-items:center;justify-content:center;margin-right:10px;margin-left:35px;font-size:18px;font-weight:700;letter-spacing:0px;color:#000;opacity:1}.title{background-color:#d9d9d9;height:50px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:3px;line-height:1.3}.title:after{content:\"\";position:absolute;bottom:0;margin-bottom:-10px;left:50%;margin-left:-10px;width:0;height:0;border-top:solid 10px #d3d3d3;border-left:solid 10px transparent;border-right:solid 10px transparent}.title-bar-name{color:var(--font-color)!important;font-size:17px;font-weight:700;text-transform:capitalize}.title-bar-value{color:var(--font-color)!important;font-size:14px}.title-bar-value>span{font-weight:600}.zoomIcons-holder{display:flex;align-items:center}.legends-latest{height:14px;width:14px;display:flex;margin-right:10px}.legend-latest-holder{font-size:12px;display:flex;justify-content:flex-start;align-items:center}.marginRight-30{margin-right:30px}.zoomIcons-holder{display:flex;align-items:center;margin-right:15px}.zoomIcons{border:.5px solid #b6b6b6;cursor:pointer;display:flex;justify-content:center;align-items:center;width:30px;height:30px;color:var(--color)!important}.zoom-active{background-color:#2d5ca0;opacity:1}.zoom-inactive{background-color:#d9d9d9;opacity:.5}.flex-inline{display:flex;justify-content:center;align-items:center;font-size:14px}.marginLeft-20{margin-left:20px}.target-display{font-size:12px;line-height:14.52px;font-weight:700;text-transform:uppercase;float:right}.legend-style{font-weight:600;text-transform:capitalize}.bar-values{margin-top:10px}.bar-name{font-weight:600;margin-right:10px;text-transform:capitalize}.lib-chart-svg{margin-top:10px}.outer-container{position:relative;width:100%;overflow:visible}.inner-container{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.inner-container::-webkit-scrollbar{height:10px}.inner-container::-webkit-scrollbar-thumb{background:#0003;border-radius:5px}.inner-container::-webkit-scrollbar-track{background:transparent}.inner-container svg{display:block;min-width:100%}.bar-value{height:29px;background-color:#f4f4f4;padding-left:15px;padding-right:15px;border-radius:8px;box-shadow:-2px 2px 10px #0000004d,2px 2px 10px #0000004d;font-weight:600}.mobile-xaxis-override{writing-mode:sideways-lr}.mobile-xaxis-override[style*=\"writing-mode: horizontal-tb\"]{writing-mode:horizontal-tb!important;transform:none!important}g.x1.axis1 g.tick text[style*=\"writing-mode: horizontal-tb\"]{writing-mode:horizontal-tb!important;transform:none!important}@media (min-height: 900px){.legends-latest{height:17px;width:17px}}\n", ".lib-chart-wrapper{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;background:#fff 0% 0% no-repeat padding-box;position:relative}.lib-chart-wrapper-wo-shadow{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background){background-color:#2e3640}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background) .chart-title{color:#fff}.lib-chart-svg{width:100%}.lib-chart-header{text-align:center;background-color:#052340;color:#fff;width:100%;height:17%;word-spacing:.5px;line-height:1.8;font-weight:700;padding-top:2%;letter-spacing:0;font-size:1.2em}.lib-donut-chart-footer{width:100%;text-align:right}.lib-donut-label-text{font-size:.9em;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-weight:400;letter-spacing:0px;color:#000;opacity:1}.lib-donut-label-icon{display:inline-block;width:10px;height:10px;margin-right:20px;border-radius:3px}.lib-donut-label-item{font-weight:400;font-size:.85em;color:#2f2f2f}.lib-donut-justified-label-wrapper{width:100%;display:inline-block;text-align:center;list-style-type:none}.lib-donut-justified-label-item{font-weight:400;font-size:.85em;color:#2f2f2f;display:inline-block;text-align:left;padding:0 10px}.lib-donut-justified-label-icon{display:inline-block;width:10px;height:10px;margin-right:5px;border-radius:3px}.lib-no-background{background:none!important}.lib-display-hidden{display:none}.lib-ylabel-weeklyCharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:12px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.07px;text-transform:capitalize;color:#000}.lib-data-labels-weeklycharts{font-style:normal;font-variant:normal;font-weight:400;font-size:12px;line-height:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.06px;color:#000}.lib-data-labels-angled-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:9.5px;line-height:11px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:.4px;text-anchor:start}.lib-xaxis-labels-texts-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:11px;letter-spacing:-.05px;fill:#000}.lib-xaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:-1px;color:#000;opacity:1;text-transform:capitalize}.lib-white-space-nowrap{white-space:nowrap}.lib-xaxis-labels-texts-drilldown-alt{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:10px;letter-spacing:0px;color:#000;opacity:1;text-transform:capitalize}.lib-yaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:0px;color:#000!important;opacity:1}.lib-ylabel-drilldowncharts,.lib-xlabel-drilldowncharts{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:16px;letter-spacing:-.1px;color:#000!important;opacity:1}.lib-donut-justified-label-icon-drilldown{display:inline-block;width:14px;height:14px;margin-right:10px;border-radius:50%}.marginright-2{margin-right:2%}.margintop-5{margin-top:5%}.width-100{width:100%}.float-right{float:right}.marginBottom-10{margin-bottom:10px}.header-alt{align-items:center;margin-bottom:10px}input::placeholder{font-size:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;color:#000;opacity:1}.padding-5{padding:5px}.hidden{visibility:hidden}.font-weight-bold{font-weight:900}.textalign-center{text-align:center}.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.font-weight-600{font-weight:600}.marginRight-15{margin-right:15px}.marginRight-20{margin-right:20px}.switch{position:relative;display:inline-block;width:46px;height:24px;margin-left:5px;margin-right:5px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#2d5ca0;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:\"\";height:18px;width:18px;right:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider.round{border-radius:18px}.slider.round:before{border-radius:50%}.slider1{position:absolute;cursor:pointer;inset:0;background-color:#015ba2cf;-webkit-transition:.4s;transition:.4s}.slider1:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider1.round1{border-radius:18px}.slider1.round1:before{border-radius:50%}.lib-display-flex{display:flex}.lib-align-items-center{align-items:center}.lib-flex-direction-column{flex-direction:column}.lib-justify-content-space-between{justify-content:space-between}.lib-justify-content-space-around{justify-content:space-around}.lib-justify-content-center{justify-content:center}.lib-justify-content-start{justify-content:start}.lib-justify-content-end{justify-content:end}.lib-ml-20{margin-left:20px}.lib-position-absolute{position:absolute}.lib-z-index-9{z-index:9}.marginright-3{margin-right:3px}@media (min-height: 900px){.lib-chart-wrapper{border-radius:8px}.header-font-size-1{font-size:18px!important}.font-size-1{font-size:14px!important}.font-size-2{font-size:16px!important}.font-size-3{font-size:14px!important}.font-size-4{font-size:22px!important}.font-size-5{font-size:24px!important}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { containerElt: [{
                 type: ViewChild,
                 args: ['groupchartcontainer', { static: true }]