@porscheinformatik/clr-addons 21.3.3 → 21.5.0

package/fesm2022/porscheinformatik-clr-addons-charts.mjs

@@ -156,27 +156,37 @@ class ChartAlertOverlayComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ChartAlertOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.19", type: ChartAlertOverlayComponent, isStandalone: true, selector: "cng-chart-alert-overlay", inputs: { alertMessage: { classPropertyName: "alertMessage", publicName: "alertMessage", isSignal: true, isRequired: true, transformFunction: null }, alertType: { classPropertyName: "alertType", publicName: "alertType", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <clr-alert [clrAlertSizeSmall]="true" [clrAlertClosable]="false" [clrAlertType]="alertType()">
+    <clr-alert
+      data-testid="chart-alert-overlay"
+      [clrAlertSizeSmall]="true"
+      [clrAlertClosable]="false"
+      [clrAlertType]="alertType()"
+    >
       <clr-alert-item>
-        <span class="alert-text">
+        <span class="alert-text" data-testid="chart-alert-overlay-message">
           {{ alertMessage() }}
         </span>
       </clr-alert-item>
     </clr-alert>
-    <div class="overlay"></div>
+    <div class="overlay" data-testid="chart-alert-overlay-gradient"></div>
   `, isInline: true, styles: [":host{position:absolute;top:0;left:0;right:0;pointer-events:none;z-index:1}:host clr-alert{pointer-events:auto}:host clr-alert ::ng-deep .alert{margin-bottom:0}:host .overlay{height:2rem;background:linear-gradient(to bottom,#fff,#fff0)}\n"], dependencies: [{ kind: "ngmodule", type: ClrAlertModule }, { kind: "component", type: i1.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertLightweight", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "component", type: i1.ClrAlertItem, selector: "clr-alert-item" }, { kind: "directive", type: i1.ClrAlertText, selector: ".alert-text" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ChartAlertOverlayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cng-chart-alert-overlay', template: `
-    <clr-alert [clrAlertSizeSmall]="true" [clrAlertClosable]="false" [clrAlertType]="alertType()">
+    <clr-alert
+      data-testid="chart-alert-overlay"
+      [clrAlertSizeSmall]="true"
+      [clrAlertClosable]="false"
+      [clrAlertType]="alertType()"
+    >
       <clr-alert-item>
-        <span class="alert-text">
+        <span class="alert-text" data-testid="chart-alert-overlay-message">
           {{ alertMessage() }}
         </span>
       </clr-alert-item>
     </clr-alert>
-    <div class="overlay"></div>
+    <div class="overlay" data-testid="chart-alert-overlay-gradient"></div>
   `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ClrAlertModule], styles: [":host{position:absolute;top:0;left:0;right:0;pointer-events:none;z-index:1}:host clr-alert{pointer-events:auto}:host clr-alert ::ng-deep .alert{margin-bottom:0}:host .overlay{height:2rem;background:linear-gradient(to bottom,#fff,#fff0)}\n"] }]
         }], propDecorators: { alertMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "alertMessage", required: true }] }], alertType: [{ type: i0.Input, args: [{ isSignal: true, alias: "alertType", required: false }] }] } });
 
@@ -408,14 +418,19 @@ class ChartExportButtonComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ChartExportButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.19", type: ChartExportButtonComponent, isStandalone: true, selector: "cng-chart-export-button", inputs: { svgRef: { classPropertyName: "svgRef", publicName: "svgRef", isSignal: true, isRequired: false, transformFunction: null }, filename: { classPropertyName: "filename", publicName: "filename", isSignal: true, isRequired: false, transformFunction: null }, buttonTitle: { classPropertyName: "buttonTitle", publicName: "buttonTitle", isSignal: true, isRequired: false, transformFunction: null }, legendItems: { classPropertyName: "legendItems", publicName: "legendItems", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <clr-dropdown>
-      <button class="btn btn-sm btn-icon btn-link export-trigger" clrDropdownTrigger title="Export chart">
+    <clr-dropdown data-testid="chart-export-dropdown">
+      <button
+        class="btn btn-sm btn-icon btn-link export-trigger"
+        data-testid="chart-export-button"
+        clrDropdownTrigger
+        title="Export chart"
+      >
         <cds-icon shape="download" size="16"></cds-icon>
         {{ buttonTitle() }}
       </button>
-      <clr-dropdown-menu *clrIfOpen clrPosition="bottom-left">
-        <button clrDropdownItem (click)="export('svg')">SVG</button>
-        <button clrDropdownItem (click)="export('png')">PNG</button>
+      <clr-dropdown-menu *clrIfOpen clrPosition="bottom-left" data-testid="chart-export-menu">
+        <button clrDropdownItem data-testid="chart-export-svg-button" (click)="export('svg')">SVG</button>
+        <button clrDropdownItem data-testid="chart-export-png-button" (click)="export('png')">PNG</button>
       </clr-dropdown-menu>
     </clr-dropdown>
   `, isInline: true, styles: [":host{position:absolute;top:15px;right:15px;z-index:10;opacity:1;pointer-events:auto}\n"], dependencies: [{ kind: "ngmodule", type: ClrDropdownModule }, { kind: "component", type: i1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: i2.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "component", type: i3.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -423,14 +438,19 @@ class ChartExportButtonComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ChartExportButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cng-chart-export-button', template: `
-    <clr-dropdown>
-      <button class="btn btn-sm btn-icon btn-link export-trigger" clrDropdownTrigger title="Export chart">
+    <clr-dropdown data-testid="chart-export-dropdown">
+      <button
+        class="btn btn-sm btn-icon btn-link export-trigger"
+        data-testid="chart-export-button"
+        clrDropdownTrigger
+        title="Export chart"
+      >
         <cds-icon shape="download" size="16"></cds-icon>
         {{ buttonTitle() }}
       </button>
-      <clr-dropdown-menu *clrIfOpen clrPosition="bottom-left">
-        <button clrDropdownItem (click)="export('svg')">SVG</button>
-        <button clrDropdownItem (click)="export('png')">PNG</button>
+      <clr-dropdown-menu *clrIfOpen clrPosition="bottom-left" data-testid="chart-export-menu">
+        <button clrDropdownItem data-testid="chart-export-svg-button" (click)="export('svg')">SVG</button>
+        <button clrDropdownItem data-testid="chart-export-png-button" (click)="export('png')">PNG</button>
       </clr-dropdown-menu>
     </clr-dropdown>
   `, imports: [ClrDropdownModule, ClrIcon], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{position:absolute;top:15px;right:15px;z-index:10;opacity:1;pointer-events:auto}\n"] }]
@@ -443,11 +463,11 @@ class ChartLegendComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ChartLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ChartLegendComponent, isStandalone: true, selector: "cng-chart-legend", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-    <div class="chart-legend">
+    <div class="chart-legend" data-testid="chart-legend">
       @for (item of items(); track item.label) {
-        <div class="legend-item">
+        <div class="legend-item" [attr.data-testid]="'chart-legend-item-' + item.label">
           <span class="legend-color-square" [style.background-color]="toChartColor(item.color)"></span>
-          <span class="legend-label">{{ item.label }}</span>
+          <span class="legend-label" [attr.data-testid]="'chart-legend-label-' + item.label">{{ item.label }}</span>
         </div>
       }
     </div>
@@ -456,11 +476,11 @@ class ChartLegendComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ChartLegendComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cng-chart-legend', template: `
-    <div class="chart-legend">
+    <div class="chart-legend" data-testid="chart-legend">
       @for (item of items(); track item.label) {
-        <div class="legend-item">
+        <div class="legend-item" [attr.data-testid]="'chart-legend-item-' + item.label">
           <span class="legend-color-square" [style.background-color]="toChartColor(item.color)"></span>
-          <span class="legend-label">{{ item.label }}</span>
+          <span class="legend-label" [attr.data-testid]="'chart-legend-label-' + item.label">{{ item.label }}</span>
         </div>
       }
     </div>
@@ -474,11 +494,11 @@ class ChartSkeletonComponent {
         this.animationStyle = computed(() => (this.skeletonType() === 'loading' ? 'pulse' : undefined), ...(ngDevMode ? [{ debugName: "animationStyle" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ChartSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ChartSkeletonComponent, isStandalone: true, selector: "cng-bar-chart-skeleton", inputs: { skeletonType: { classPropertyName: "skeletonType", publicName: "skeletonType", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"chart-skeleton\" [class.placeholder-skeleton]=\"skeletonType() === 'placeholder'\">\n  <div\n    class=\"skeleton-bars\"\n    [class.horizontal]=\"orientation() === 'horizontal'\"\n    [class.vertical]=\"orientation() === 'vertical'\"\n  >\n    @for (_item of [1, 2, 3, 4, 5, 6]; track $index) {\n    <div class=\"skeleton-bar bar-{{ $index + 1 }}\">\n      <ngx-skeleton-loader\n        [appearance]=\"'circle'\"\n        [count]=\"1\"\n        [animation]=\"animationStyle()\"\n        [theme]=\"{\n            width: '100%',\n            height: '100%',\n            'border-radius': 'var(--clr-base-border-radius-xxs)',\n          }\"\n      />\n    </div>\n    }\n  </div>\n</div>\n", styles: [".chart-skeleton{width:100%;height:100%}.placeholder-skeleton ::ng-deep .skeleton-loader{cursor:default}.skeleton-bars{display:flex;gap:var(--clr-base-gap-l);width:100%;height:100%;padding:var(--cds-global-layout-space-xs) var(--cds-global-layout-space-xl)}.skeleton-bars.vertical{flex-direction:row;align-items:flex-end;justify-content:center}.skeleton-bars.vertical .skeleton-bar{width:var(--cds-global-layout-space-md)}.skeleton-bars.vertical .skeleton-bar.bar-1{height:60%}.skeleton-bars.vertical .skeleton-bar.bar-2{height:95%}.skeleton-bars.vertical .skeleton-bar.bar-3{height:40%}.skeleton-bars.vertical .skeleton-bar.bar-4{height:75%}.skeleton-bars.vertical .skeleton-bar.bar-5{height:50%}.skeleton-bars.vertical .skeleton-bar.bar-6{height:25%}.skeleton-bars.horizontal{flex-direction:column;justify-content:center}.skeleton-bars.horizontal .skeleton-bar{height:var(--cds-global-layout-space-md)}.skeleton-bars.horizontal .skeleton-bar.bar-1{width:60%}.skeleton-bars.horizontal .skeleton-bar.bar-2{width:95%}.skeleton-bars.horizontal .skeleton-bar.bar-3{width:40%}.skeleton-bars.horizontal .skeleton-bar.bar-4{width:75%}.skeleton-bars.horizontal .skeleton-bar.bar-5{width:50%}.skeleton-bars.horizontal .skeleton-bar.bar-6{width:25%}\n"], dependencies: [{ kind: "component", type: NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme", "size", "measureUnit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ChartSkeletonComponent, isStandalone: true, selector: "cng-bar-chart-skeleton", inputs: { skeletonType: { classPropertyName: "skeletonType", publicName: "skeletonType", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"chart-skeleton\"\n  data-testid=\"chart-skeleton\"\n  [class.placeholder-skeleton]=\"skeletonType() === 'placeholder'\"\n>\n  <div\n    class=\"skeleton-bars\"\n    data-testid=\"chart-skeleton-bars\"\n    [class.horizontal]=\"orientation() === 'horizontal'\"\n    [class.vertical]=\"orientation() === 'vertical'\"\n  >\n    @for (_item of [1, 2, 3, 4, 5, 6]; track $index) {\n      <div class=\"skeleton-bar bar-{{ $index + 1 }}\" [attr.data-testid]=\"'chart-skeleton-bar-' + ($index + 1)\">\n        <ngx-skeleton-loader\n          [appearance]=\"'circle'\"\n          [count]=\"1\"\n          [animation]=\"animationStyle()\"\n          [theme]=\"{\n            width: '100%',\n            height: '100%',\n            'border-radius': 'var(--clr-base-border-radius-xxs)',\n          }\"\n        />\n      </div>\n    }\n  </div>\n</div>\n", styles: [".chart-skeleton{width:100%;height:100%}.placeholder-skeleton ::ng-deep .skeleton-loader{cursor:default}.skeleton-bars{display:flex;gap:var(--clr-base-gap-l);width:100%;height:100%;padding:var(--cds-global-layout-space-xs) var(--cds-global-layout-space-xl)}.skeleton-bars.vertical{flex-direction:row;align-items:flex-end;justify-content:center}.skeleton-bars.vertical .skeleton-bar{width:var(--cds-global-layout-space-md)}.skeleton-bars.vertical .skeleton-bar.bar-1{height:60%}.skeleton-bars.vertical .skeleton-bar.bar-2{height:95%}.skeleton-bars.vertical .skeleton-bar.bar-3{height:40%}.skeleton-bars.vertical .skeleton-bar.bar-4{height:75%}.skeleton-bars.vertical .skeleton-bar.bar-5{height:50%}.skeleton-bars.vertical .skeleton-bar.bar-6{height:25%}.skeleton-bars.horizontal{flex-direction:column;justify-content:center}.skeleton-bars.horizontal .skeleton-bar{height:var(--cds-global-layout-space-md)}.skeleton-bars.horizontal .skeleton-bar.bar-1{width:60%}.skeleton-bars.horizontal .skeleton-bar.bar-2{width:95%}.skeleton-bars.horizontal .skeleton-bar.bar-3{width:40%}.skeleton-bars.horizontal .skeleton-bar.bar-4{width:75%}.skeleton-bars.horizontal .skeleton-bar.bar-5{width:50%}.skeleton-bars.horizontal .skeleton-bar.bar-6{width:25%}\n"], dependencies: [{ kind: "component", type: NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme", "size", "measureUnit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ChartSkeletonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cng-bar-chart-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgxSkeletonLoaderComponent], template: "<div class=\"chart-skeleton\" [class.placeholder-skeleton]=\"skeletonType() === 'placeholder'\">\n  <div\n    class=\"skeleton-bars\"\n    [class.horizontal]=\"orientation() === 'horizontal'\"\n    [class.vertical]=\"orientation() === 'vertical'\"\n  >\n    @for (_item of [1, 2, 3, 4, 5, 6]; track $index) {\n    <div class=\"skeleton-bar bar-{{ $index + 1 }}\">\n      <ngx-skeleton-loader\n        [appearance]=\"'circle'\"\n        [count]=\"1\"\n        [animation]=\"animationStyle()\"\n        [theme]=\"{\n            width: '100%',\n            height: '100%',\n            'border-radius': 'var(--clr-base-border-radius-xxs)',\n          }\"\n      />\n    </div>\n    }\n  </div>\n</div>\n", styles: [".chart-skeleton{width:100%;height:100%}.placeholder-skeleton ::ng-deep .skeleton-loader{cursor:default}.skeleton-bars{display:flex;gap:var(--clr-base-gap-l);width:100%;height:100%;padding:var(--cds-global-layout-space-xs) var(--cds-global-layout-space-xl)}.skeleton-bars.vertical{flex-direction:row;align-items:flex-end;justify-content:center}.skeleton-bars.vertical .skeleton-bar{width:var(--cds-global-layout-space-md)}.skeleton-bars.vertical .skeleton-bar.bar-1{height:60%}.skeleton-bars.vertical .skeleton-bar.bar-2{height:95%}.skeleton-bars.vertical .skeleton-bar.bar-3{height:40%}.skeleton-bars.vertical .skeleton-bar.bar-4{height:75%}.skeleton-bars.vertical .skeleton-bar.bar-5{height:50%}.skeleton-bars.vertical .skeleton-bar.bar-6{height:25%}.skeleton-bars.horizontal{flex-direction:column;justify-content:center}.skeleton-bars.horizontal .skeleton-bar{height:var(--cds-global-layout-space-md)}.skeleton-bars.horizontal .skeleton-bar.bar-1{width:60%}.skeleton-bars.horizontal .skeleton-bar.bar-2{width:95%}.skeleton-bars.horizontal .skeleton-bar.bar-3{width:40%}.skeleton-bars.horizontal .skeleton-bar.bar-4{width:75%}.skeleton-bars.horizontal .skeleton-bar.bar-5{width:50%}.skeleton-bars.horizontal .skeleton-bar.bar-6{width:25%}\n"] }]
+            args: [{ selector: 'cng-bar-chart-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgxSkeletonLoaderComponent], template: "<div\n  class=\"chart-skeleton\"\n  data-testid=\"chart-skeleton\"\n  [class.placeholder-skeleton]=\"skeletonType() === 'placeholder'\"\n>\n  <div\n    class=\"skeleton-bars\"\n    data-testid=\"chart-skeleton-bars\"\n    [class.horizontal]=\"orientation() === 'horizontal'\"\n    [class.vertical]=\"orientation() === 'vertical'\"\n  >\n    @for (_item of [1, 2, 3, 4, 5, 6]; track $index) {\n      <div class=\"skeleton-bar bar-{{ $index + 1 }}\" [attr.data-testid]=\"'chart-skeleton-bar-' + ($index + 1)\">\n        <ngx-skeleton-loader\n          [appearance]=\"'circle'\"\n          [count]=\"1\"\n          [animation]=\"animationStyle()\"\n          [theme]=\"{\n            width: '100%',\n            height: '100%',\n            'border-radius': 'var(--clr-base-border-radius-xxs)',\n          }\"\n        />\n      </div>\n    }\n  </div>\n</div>\n", styles: [".chart-skeleton{width:100%;height:100%}.placeholder-skeleton ::ng-deep .skeleton-loader{cursor:default}.skeleton-bars{display:flex;gap:var(--clr-base-gap-l);width:100%;height:100%;padding:var(--cds-global-layout-space-xs) var(--cds-global-layout-space-xl)}.skeleton-bars.vertical{flex-direction:row;align-items:flex-end;justify-content:center}.skeleton-bars.vertical .skeleton-bar{width:var(--cds-global-layout-space-md)}.skeleton-bars.vertical .skeleton-bar.bar-1{height:60%}.skeleton-bars.vertical .skeleton-bar.bar-2{height:95%}.skeleton-bars.vertical .skeleton-bar.bar-3{height:40%}.skeleton-bars.vertical .skeleton-bar.bar-4{height:75%}.skeleton-bars.vertical .skeleton-bar.bar-5{height:50%}.skeleton-bars.vertical .skeleton-bar.bar-6{height:25%}.skeleton-bars.horizontal{flex-direction:column;justify-content:center}.skeleton-bars.horizontal .skeleton-bar{height:var(--cds-global-layout-space-md)}.skeleton-bars.horizontal .skeleton-bar.bar-1{width:60%}.skeleton-bars.horizontal .skeleton-bar.bar-2{width:95%}.skeleton-bars.horizontal .skeleton-bar.bar-3{width:40%}.skeleton-bars.horizontal .skeleton-bar.bar-4{width:75%}.skeleton-bars.horizontal .skeleton-bar.bar-5{width:50%}.skeleton-bars.horizontal .skeleton-bar.bar-6{width:25%}\n"] }]
         }], propDecorators: { skeletonType: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonType", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: true }] }] } });
 
 class ChartTooltipComponent {
@@ -492,11 +512,11 @@ class ChartTooltipComponent {
         this.toChartColor = toChartColor;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ChartTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ChartTooltipComponent, isStandalone: true, selector: "cng-chart-tooltip", inputs: { tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: true, transformFunction: null }, tooltipOrientation: { classPropertyName: "tooltipOrientation", publicName: "tooltipOrientation", isSignal: true, isRequired: false, transformFunction: null }, squareColor: { classPropertyName: "squareColor", publicName: "squareColor", isSignal: true, isRequired: true, transformFunction: null }, tooltipClickable: { classPropertyName: "tooltipClickable", publicName: "tooltipClickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tooltipClosed: "tooltipClosed", tooltipHeaderClicked: "tooltipHeaderClicked" }, ngImport: i0, template: "<div\n  class=\"tooltip-container\"\n  [class.orientation-bottom]=\"tooltipOrientation() === 'bottom'\"\n  (click)=\"$event.stopPropagation()\"\n  [style.left.px]=\"tooltipPosition().x\"\n  [style.top.px]=\"tooltipPosition().y\"\n>\n  <div class=\"tooltip-header\">\n    <div class=\"color-label-wrapper\">\n      @if (squareColor()) {\n      <div class=\"color-square\" [style.background-color]=\"toChartColor(squareColor())\"></div>\n      }\n      <h5\n        [class.has-more-info]=\"tooltipClickable()\"\n        (click)=\"$event.stopPropagation(); tooltipClickable() && tooltipHeaderClicked.emit()\"\n      >\n        <ng-content select=\"cng-title\" />\n      </h5>\n    </div>\n    <cds-icon shape=\"times\" class=\"tooltip-close-btn\" (click)=\"$event.stopPropagation(); tooltipClosed.emit()\" />\n  </div>\n  <div class=\"tooltip-content\">\n    <ng-content />\n  </div>\n  <hr />\n  <div class=\"tooltip-footer\"><ng-content select=\"cng-footer\" /></div>\n</div>\n", styles: [".tooltip-container{position:absolute;background:var(--cds-global-color-gray-0, #fff);border:1px solid var(--cds-global-color-gray-400, #ccc);border-radius:4px;box-shadow:0 2px 8px #00000026;padding:12px 16px;z-index:1000;min-width:150px;transform:translate(-50%,-100%) translateY(-10px)}.tooltip-container.orientation-bottom{transform:translate(-50%) translateY(10px)}.tooltip-header{display:flex;flex-direction:row;justify-content:space-between;gap:8px}.tooltip-header h5{margin:0;font-size:14px;font-weight:600;color:var(--cds-global-color-gray-1000, #000);flex-grow:1;max-width:200px}.tooltip-close-btn{cursor:pointer;color:var(--clr-close-color)}.tooltip-close-btn:hover,.tooltip-close-btn:focus{color:var(--clr-close-color-hover)}.color-label-wrapper{display:flex;flex-direction:row;gap:8px}.tooltip-content{font-size:12px;color:var(--cds-global-color-gray-700, #565656)}hr:has(+.tooltip-footer:empty){display:none}hr{margin:6px -16px}\n"], dependencies: [{ kind: "component", type: ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ChartTooltipComponent, isStandalone: true, selector: "cng-chart-tooltip", inputs: { tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: true, transformFunction: null }, tooltipOrientation: { classPropertyName: "tooltipOrientation", publicName: "tooltipOrientation", isSignal: true, isRequired: false, transformFunction: null }, squareColor: { classPropertyName: "squareColor", publicName: "squareColor", isSignal: true, isRequired: true, transformFunction: null }, tooltipClickable: { classPropertyName: "tooltipClickable", publicName: "tooltipClickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tooltipClosed: "tooltipClosed", tooltipHeaderClicked: "tooltipHeaderClicked" }, ngImport: i0, template: "<div\n  class=\"tooltip-container\"\n  data-testid=\"chart-tooltip\"\n  [class.orientation-bottom]=\"tooltipOrientation() === 'bottom'\"\n  (click)=\"$event.stopPropagation()\"\n  [style.left.px]=\"tooltipPosition().x\"\n  [style.top.px]=\"tooltipPosition().y\"\n>\n  <div class=\"tooltip-header\" data-testid=\"chart-tooltip-header\">\n    <div class=\"color-label-wrapper\">\n      @if (squareColor()) {\n      <div class=\"color-square\" [style.background-color]=\"toChartColor(squareColor())\"></div>\n      }\n      <h5\n        data-testid=\"chart-tooltip-title\"\n        [class.has-more-info]=\"tooltipClickable()\"\n        (click)=\"$event.stopPropagation(); tooltipClickable() && tooltipHeaderClicked.emit()\"\n      >\n        <ng-content select=\"cng-title\" />\n      </h5>\n    </div>\n    <cds-icon\n      shape=\"times\"\n      class=\"tooltip-close-btn\"\n      data-testid=\"chart-tooltip-close\"\n      (click)=\"$event.stopPropagation(); tooltipClosed.emit()\"\n    />\n  </div>\n  <div class=\"tooltip-content\" data-testid=\"chart-tooltip-content\">\n    <ng-content />\n  </div>\n  <hr />\n  <div class=\"tooltip-footer\" data-testid=\"chart-tooltip-footer\"><ng-content select=\"cng-footer\" /></div>\n</div>\n", styles: [".tooltip-container{position:absolute;background:var(--cds-global-color-gray-0, #fff);border:1px solid var(--cds-global-color-gray-400, #ccc);border-radius:4px;box-shadow:0 2px 8px #00000026;padding:12px 16px;z-index:1000;min-width:150px;transform:translate(-50%,-100%) translateY(-10px)}.tooltip-container.orientation-bottom{transform:translate(-50%) translateY(10px)}.tooltip-header{display:flex;flex-direction:row;justify-content:space-between;gap:8px}.tooltip-header h5{margin:0;font-size:14px;font-weight:600;color:var(--cds-global-color-gray-1000, #000);flex-grow:1;max-width:200px}.tooltip-close-btn{cursor:pointer;color:var(--clr-close-color)}.tooltip-close-btn:hover,.tooltip-close-btn:focus{color:var(--clr-close-color-hover)}.color-label-wrapper{display:flex;flex-direction:row;gap:8px}.tooltip-content{font-size:12px;color:var(--cds-global-color-gray-700, #565656)}hr:has(+.tooltip-footer:empty){display:none}hr{margin:6px -16px}\n"], dependencies: [{ kind: "component", type: ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ChartTooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cng-chart-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ClrIcon], template: "<div\n  class=\"tooltip-container\"\n  [class.orientation-bottom]=\"tooltipOrientation() === 'bottom'\"\n  (click)=\"$event.stopPropagation()\"\n  [style.left.px]=\"tooltipPosition().x\"\n  [style.top.px]=\"tooltipPosition().y\"\n>\n  <div class=\"tooltip-header\">\n    <div class=\"color-label-wrapper\">\n      @if (squareColor()) {\n      <div class=\"color-square\" [style.background-color]=\"toChartColor(squareColor())\"></div>\n      }\n      <h5\n        [class.has-more-info]=\"tooltipClickable()\"\n        (click)=\"$event.stopPropagation(); tooltipClickable() && tooltipHeaderClicked.emit()\"\n      >\n        <ng-content select=\"cng-title\" />\n      </h5>\n    </div>\n    <cds-icon shape=\"times\" class=\"tooltip-close-btn\" (click)=\"$event.stopPropagation(); tooltipClosed.emit()\" />\n  </div>\n  <div class=\"tooltip-content\">\n    <ng-content />\n  </div>\n  <hr />\n  <div class=\"tooltip-footer\"><ng-content select=\"cng-footer\" /></div>\n</div>\n", styles: [".tooltip-container{position:absolute;background:var(--cds-global-color-gray-0, #fff);border:1px solid var(--cds-global-color-gray-400, #ccc);border-radius:4px;box-shadow:0 2px 8px #00000026;padding:12px 16px;z-index:1000;min-width:150px;transform:translate(-50%,-100%) translateY(-10px)}.tooltip-container.orientation-bottom{transform:translate(-50%) translateY(10px)}.tooltip-header{display:flex;flex-direction:row;justify-content:space-between;gap:8px}.tooltip-header h5{margin:0;font-size:14px;font-weight:600;color:var(--cds-global-color-gray-1000, #000);flex-grow:1;max-width:200px}.tooltip-close-btn{cursor:pointer;color:var(--clr-close-color)}.tooltip-close-btn:hover,.tooltip-close-btn:focus{color:var(--clr-close-color-hover)}.color-label-wrapper{display:flex;flex-direction:row;gap:8px}.tooltip-content{font-size:12px;color:var(--cds-global-color-gray-700, #565656)}hr:has(+.tooltip-footer:empty){display:none}hr{margin:6px -16px}\n"] }]
+            args: [{ selector: 'cng-chart-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ClrIcon], template: "<div\n  class=\"tooltip-container\"\n  data-testid=\"chart-tooltip\"\n  [class.orientation-bottom]=\"tooltipOrientation() === 'bottom'\"\n  (click)=\"$event.stopPropagation()\"\n  [style.left.px]=\"tooltipPosition().x\"\n  [style.top.px]=\"tooltipPosition().y\"\n>\n  <div class=\"tooltip-header\" data-testid=\"chart-tooltip-header\">\n    <div class=\"color-label-wrapper\">\n      @if (squareColor()) {\n      <div class=\"color-square\" [style.background-color]=\"toChartColor(squareColor())\"></div>\n      }\n      <h5\n        data-testid=\"chart-tooltip-title\"\n        [class.has-more-info]=\"tooltipClickable()\"\n        (click)=\"$event.stopPropagation(); tooltipClickable() && tooltipHeaderClicked.emit()\"\n      >\n        <ng-content select=\"cng-title\" />\n      </h5>\n    </div>\n    <cds-icon\n      shape=\"times\"\n      class=\"tooltip-close-btn\"\n      data-testid=\"chart-tooltip-close\"\n      (click)=\"$event.stopPropagation(); tooltipClosed.emit()\"\n    />\n  </div>\n  <div class=\"tooltip-content\" data-testid=\"chart-tooltip-content\">\n    <ng-content />\n  </div>\n  <hr />\n  <div class=\"tooltip-footer\" data-testid=\"chart-tooltip-footer\"><ng-content select=\"cng-footer\" /></div>\n</div>\n", styles: [".tooltip-container{position:absolute;background:var(--cds-global-color-gray-0, #fff);border:1px solid var(--cds-global-color-gray-400, #ccc);border-radius:4px;box-shadow:0 2px 8px #00000026;padding:12px 16px;z-index:1000;min-width:150px;transform:translate(-50%,-100%) translateY(-10px)}.tooltip-container.orientation-bottom{transform:translate(-50%) translateY(10px)}.tooltip-header{display:flex;flex-direction:row;justify-content:space-between;gap:8px}.tooltip-header h5{margin:0;font-size:14px;font-weight:600;color:var(--cds-global-color-gray-1000, #000);flex-grow:1;max-width:200px}.tooltip-close-btn{cursor:pointer;color:var(--clr-close-color)}.tooltip-close-btn:hover,.tooltip-close-btn:focus{color:var(--clr-close-color-hover)}.color-label-wrapper{display:flex;flex-direction:row;gap:8px}.tooltip-content{font-size:12px;color:var(--cds-global-color-gray-700, #565656)}hr:has(+.tooltip-footer:empty){display:none}hr{margin:6px -16px}\n"] }]
         }], propDecorators: { tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: true }] }], tooltipOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipOrientation", required: false }] }], squareColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "squareColor", required: true }] }], tooltipClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipClickable", required: false }] }], tooltipClosed: [{ type: i0.Output, args: ["tooltipClosed"] }], tooltipHeaderClicked: [{ type: i0.Output, args: ["tooltipHeaderClicked"] }] } });
 
 // Clarity actually has an "outside-click" directive, but they don't export it 🤷
@@ -1043,13 +1063,364 @@ class BarChartComponent extends ChartBase {
         return Math.floor(height / BarChartComponent.HORIZONTAL_BAR_MIN_HEIGHT_PX);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: BarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: BarChartComponent, isStandalone: false, selector: "clr-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, stacks: { classPropertyName: "stacks", publicName: "stacks", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: true, transformFunction: null }, tooltipOrientation: { classPropertyName: "tooltipOrientation", publicName: "tooltipOrientation", isSignal: true, isRequired: false, transformFunction: null }, barSizePx: { classPropertyName: "barSizePx", publicName: "barSizePx", isSignal: true, isRequired: false, transformFunction: null }, barAreaSizePx: { classPropertyName: "barAreaSizePx", publicName: "barAreaSizePx", isSignal: true, isRequired: false, transformFunction: null }, tooltipPercentOfTotal: { classPropertyName: "tooltipPercentOfTotal", publicName: "tooltipPercentOfTotal", isSignal: true, isRequired: false, transformFunction: null }, tooltipPercentOf: { classPropertyName: "tooltipPercentOf", publicName: "tooltipPercentOf", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, tooManyItemsMessage: { classPropertyName: "tooManyItemsMessage", publicName: "tooManyItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, tooManyItemsGroupedMessage: { classPropertyName: "tooManyItemsGroupedMessage", publicName: "tooManyItemsGroupedMessage", isSignal: true, isRequired: false, transformFunction: null }, allValuesZeroMessage: { classPropertyName: "allValuesZeroMessage", publicName: "allValuesZeroMessage", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, xAxisLabel: { classPropertyName: "xAxisLabel", publicName: "xAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yAxisLabel: { classPropertyName: "yAxisLabel", publicName: "yAxisLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\">\n  <div class=\"chart-area\" #container (cngWindowResize)=\"updateChart()\" [class.pt-3]=\"alertMessageAndType()\">\n    <svg [class.d-none]=\"loading() || !data()?.length || allValuesZero()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"!stacks() ? selectedItem()?.color : undefined\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"valueClicked.emit({ key: tooltipKey(), label: tooltipLabel(), value: tooltipValue() })\"\n    >\n      <ng-container ngProjectAs=\"cng-title\"> ({{ tooltipValue() }}) {{ tooltipLabel() }}</ng-container>\n\n      <p class=\"mt-0\">\n        {{ (100 * tooltipValue()) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n\n      @if (stacks()) { @for (slice of selectedStackSlices(); track slice.key) {\n      <div class=\"mt-0-5 d-flex\">\n        <div class=\"color-square mr-0-5\" [style.background-color]=\"toChartColor(slice.color)\"></div>\n        <strong>{{ slice.fullLabel || slice.label }}:&nbsp;</strong>\n        <span\n          class=\"has-more-info\"\n          (click)=\"\n                  valueClicked.emit({\n                    key: [slice.key],\n                    label: slice.fullLabel || slice.label,\n                    value: slice.value,\n                  })\n                \"\n        >\n          {{ slice.value }}\n        </span>\n      </div>\n      <p class=\"mt-0-25 percentage-info\">\n        {{ (100 * slice.value) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n        {{ slice.percentageOfStack | number : '1.0-2' }}% {{ tooltipPercentOf() }} \"{{ tooltipLabel() }}\"\n      </p>\n      } }\n    </cng-chart-tooltip>\n    } @if (loading() || !data()?.length || allValuesZero()) {\n    <cng-bar-chart-skeleton [orientation]=\"orientation()\" [skeletonType]=\"loading() ? 'loading' : 'placeholder'\" />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay [alertType]=\"alertMessageAndType()[1]\" [alertMessage]=\"alertMessageAndType()[0]\" />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length && !allValuesZero()) {\n  <cng-chart-legend [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && data()?.length) {\n  <cng-chart-export-button\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.percentage-info{margin-left:15px}\n"], dependencies: [{ kind: "component", type: ChartAlertOverlayComponent, selector: "cng-chart-alert-overlay", inputs: ["alertMessage", "alertType"] }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { kind: "component", type: ChartLegendComponent, selector: "cng-chart-legend", inputs: ["items"] }, { kind: "component", type: ChartSkeletonComponent, selector: "cng-bar-chart-skeleton", inputs: ["skeletonType", "orientation"] }, { kind: "component", type: ChartTooltipComponent, selector: "cng-chart-tooltip", inputs: ["tooltipPosition", "tooltipOrientation", "squareColor", "tooltipClickable"], outputs: ["tooltipClosed", "tooltipHeaderClicked"] }, { kind: "directive", type: OutsideClickDirective, selector: "[cngOutsideClick]", outputs: ["cngOutsideClick"] }, { kind: "directive", type: WindowResizeDirective, selector: "[cngWindowResize]", inputs: ["debounce", "includeFirst"], outputs: ["cngWindowResize"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: BarChartComponent, isStandalone: false, selector: "clr-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, stacks: { classPropertyName: "stacks", publicName: "stacks", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: true, transformFunction: null }, tooltipOrientation: { classPropertyName: "tooltipOrientation", publicName: "tooltipOrientation", isSignal: true, isRequired: false, transformFunction: null }, barSizePx: { classPropertyName: "barSizePx", publicName: "barSizePx", isSignal: true, isRequired: false, transformFunction: null }, barAreaSizePx: { classPropertyName: "barAreaSizePx", publicName: "barAreaSizePx", isSignal: true, isRequired: false, transformFunction: null }, tooltipPercentOfTotal: { classPropertyName: "tooltipPercentOfTotal", publicName: "tooltipPercentOfTotal", isSignal: true, isRequired: false, transformFunction: null }, tooltipPercentOf: { classPropertyName: "tooltipPercentOf", publicName: "tooltipPercentOf", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, tooManyItemsMessage: { classPropertyName: "tooManyItemsMessage", publicName: "tooManyItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, tooManyItemsGroupedMessage: { classPropertyName: "tooManyItemsGroupedMessage", publicName: "tooManyItemsGroupedMessage", isSignal: true, isRequired: false, transformFunction: null }, allValuesZeroMessage: { classPropertyName: "allValuesZeroMessage", publicName: "allValuesZeroMessage", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, xAxisLabel: { classPropertyName: "xAxisLabel", publicName: "xAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yAxisLabel: { classPropertyName: "yAxisLabel", publicName: "yAxisLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\" data-testid=\"bar-chart\">\n  <div\n    class=\"chart-area\"\n    data-testid=\"bar-chart-area\"\n    #container\n    (cngWindowResize)=\"updateChart()\"\n    [class.pt-3]=\"alertMessageAndType()\"\n  >\n    <svg [class.d-none]=\"loading() || !data()?.length || allValuesZero()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n      <cng-chart-tooltip\n        data-testid=\"bar-chart-tooltip\"\n        [tooltipPosition]=\"tooltipPosition()\"\n        [tooltipOrientation]=\"tooltipOrientation()\"\n        [squareColor]=\"!stacks() ? selectedItem()?.color : undefined\"\n        (tooltipClosed)=\"resetTooltip()\"\n        (cngOutsideClick)=\"resetTooltip()\"\n        (tooltipHeaderClicked)=\"valueClicked.emit({ key: tooltipKey(), label: tooltipLabel(), value: tooltipValue() })\"\n      >\n        <ng-container ngProjectAs=\"cng-title\"> ({{ tooltipValue() }}) {{ tooltipLabel() }}</ng-container>\n\n        <p class=\"mt-0\" data-testid=\"bar-chart-tooltip-percentage\">\n          {{ (100 * tooltipValue()) / total() | number: '1.0-2' }}%\n          {{ tooltipPercentOfTotal() }}\n        </p>\n\n        @if (stacks()) {\n          @for (slice of selectedStackSlices(); track slice.key) {\n            <div\n              class=\"mt-0-5 d-flex\"\n              [attr.data-testid]=\"'bar-chart-tooltip-stack-slice-' + (slice.fullLabel || slice.label)\"\n            >\n              <div class=\"color-square mr-0-5\" [style.background-color]=\"toChartColor(slice.color)\"></div>\n              <strong>{{ slice.fullLabel || slice.label }}:&nbsp;</strong>\n              <span\n                class=\"has-more-info\"\n                [attr.data-testid]=\"'bar-chart-tooltip-stack-value-' + (slice.fullLabel || slice.label)\"\n                (click)=\"\n                  valueClicked.emit({\n                    key: [slice.key],\n                    label: slice.fullLabel || slice.label,\n                    value: slice.value,\n                  })\n                \"\n              >\n                {{ slice.value }}\n              </span>\n            </div>\n            <p\n              class=\"mt-0-25 percentage-info\"\n              [attr.data-testid]=\"'bar-chart-tooltip-stack-percentage-' + (slice.fullLabel || slice.label)\"\n            >\n              {{ (100 * slice.value) / total() | number: '1.0-2' }}%\n              {{ tooltipPercentOfTotal() }}\n              {{ slice.percentageOfStack | number: '1.0-2' }}% {{ tooltipPercentOf() }} \"{{ tooltipLabel() }}\"\n            </p>\n          }\n        }\n      </cng-chart-tooltip>\n    }\n    @if (loading() || !data()?.length || allValuesZero()) {\n      <cng-bar-chart-skeleton\n        data-testid=\"bar-chart-skeleton\"\n        [orientation]=\"orientation()\"\n        [skeletonType]=\"loading() ? 'loading' : 'placeholder'\"\n      />\n    }\n    @if (alertMessageAndType()) {\n      <cng-chart-alert-overlay\n        data-testid=\"bar-chart-alert-overlay\"\n        [alertType]=\"alertMessageAndType()[1]\"\n        [alertMessage]=\"alertMessageAndType()[0]\"\n      />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length && !allValuesZero()) {\n    <cng-chart-legend data-testid=\"bar-chart-legend\" [items]=\"legendItems()\" />\n  }\n  @if (showExportButton() && !loading() && data()?.length) {\n    <cng-chart-export-button\n      data-testid=\"bar-chart-export\"\n      [svgRef]=\"svgElement()\"\n      [filename]=\"exportFilename()\"\n      [buttonTitle]=\"exportButtonTitle()\"\n      [legendItems]=\"legendItems()\"\n    />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.percentage-info{margin-left:15px}\n"], dependencies: [{ kind: "component", type: ChartAlertOverlayComponent, selector: "cng-chart-alert-overlay", inputs: ["alertMessage", "alertType"] }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { kind: "component", type: ChartLegendComponent, selector: "cng-chart-legend", inputs: ["items"] }, { kind: "component", type: ChartSkeletonComponent, selector: "cng-bar-chart-skeleton", inputs: ["skeletonType", "orientation"] }, { kind: "component", type: ChartTooltipComponent, selector: "cng-chart-tooltip", inputs: ["tooltipPosition", "tooltipOrientation", "squareColor", "tooltipClickable"], outputs: ["tooltipClosed", "tooltipHeaderClicked"] }, { kind: "directive", type: OutsideClickDirective, selector: "[cngOutsideClick]", outputs: ["cngOutsideClick"] }, { kind: "directive", type: WindowResizeDirective, selector: "[cngWindowResize]", inputs: ["debounce", "includeFirst"], outputs: ["cngWindowResize"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: BarChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-bar-chart', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"chart-container\">\n  <div class=\"chart-area\" #container (cngWindowResize)=\"updateChart()\" [class.pt-3]=\"alertMessageAndType()\">\n    <svg [class.d-none]=\"loading() || !data()?.length || allValuesZero()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"!stacks() ? selectedItem()?.color : undefined\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"valueClicked.emit({ key: tooltipKey(), label: tooltipLabel(), value: tooltipValue() })\"\n    >\n      <ng-container ngProjectAs=\"cng-title\"> ({{ tooltipValue() }}) {{ tooltipLabel() }}</ng-container>\n\n      <p class=\"mt-0\">\n        {{ (100 * tooltipValue()) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n\n      @if (stacks()) { @for (slice of selectedStackSlices(); track slice.key) {\n      <div class=\"mt-0-5 d-flex\">\n        <div class=\"color-square mr-0-5\" [style.background-color]=\"toChartColor(slice.color)\"></div>\n        <strong>{{ slice.fullLabel || slice.label }}:&nbsp;</strong>\n        <span\n          class=\"has-more-info\"\n          (click)=\"\n                  valueClicked.emit({\n                    key: [slice.key],\n                    label: slice.fullLabel || slice.label,\n                    value: slice.value,\n                  })\n                \"\n        >\n          {{ slice.value }}\n        </span>\n      </div>\n      <p class=\"mt-0-25 percentage-info\">\n        {{ (100 * slice.value) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n        {{ slice.percentageOfStack | number : '1.0-2' }}% {{ tooltipPercentOf() }} \"{{ tooltipLabel() }}\"\n      </p>\n      } }\n    </cng-chart-tooltip>\n    } @if (loading() || !data()?.length || allValuesZero()) {\n    <cng-bar-chart-skeleton [orientation]=\"orientation()\" [skeletonType]=\"loading() ? 'loading' : 'placeholder'\" />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay [alertType]=\"alertMessageAndType()[1]\" [alertMessage]=\"alertMessageAndType()[0]\" />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length && !allValuesZero()) {\n  <cng-chart-legend [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && data()?.length) {\n  <cng-chart-export-button\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.percentage-info{margin-left:15px}\n"] }]
+            args: [{ selector: 'clr-bar-chart', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"chart-container\" data-testid=\"bar-chart\">\n  <div\n    class=\"chart-area\"\n    data-testid=\"bar-chart-area\"\n    #container\n    (cngWindowResize)=\"updateChart()\"\n    [class.pt-3]=\"alertMessageAndType()\"\n  >\n    <svg [class.d-none]=\"loading() || !data()?.length || allValuesZero()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n      <cng-chart-tooltip\n        data-testid=\"bar-chart-tooltip\"\n        [tooltipPosition]=\"tooltipPosition()\"\n        [tooltipOrientation]=\"tooltipOrientation()\"\n        [squareColor]=\"!stacks() ? selectedItem()?.color : undefined\"\n        (tooltipClosed)=\"resetTooltip()\"\n        (cngOutsideClick)=\"resetTooltip()\"\n        (tooltipHeaderClicked)=\"valueClicked.emit({ key: tooltipKey(), label: tooltipLabel(), value: tooltipValue() })\"\n      >\n        <ng-container ngProjectAs=\"cng-title\"> ({{ tooltipValue() }}) {{ tooltipLabel() }}</ng-container>\n\n        <p class=\"mt-0\" data-testid=\"bar-chart-tooltip-percentage\">\n          {{ (100 * tooltipValue()) / total() | number: '1.0-2' }}%\n          {{ tooltipPercentOfTotal() }}\n        </p>\n\n        @if (stacks()) {\n          @for (slice of selectedStackSlices(); track slice.key) {\n            <div\n              class=\"mt-0-5 d-flex\"\n              [attr.data-testid]=\"'bar-chart-tooltip-stack-slice-' + (slice.fullLabel || slice.label)\"\n            >\n              <div class=\"color-square mr-0-5\" [style.background-color]=\"toChartColor(slice.color)\"></div>\n              <strong>{{ slice.fullLabel || slice.label }}:&nbsp;</strong>\n              <span\n                class=\"has-more-info\"\n                [attr.data-testid]=\"'bar-chart-tooltip-stack-value-' + (slice.fullLabel || slice.label)\"\n                (click)=\"\n                  valueClicked.emit({\n                    key: [slice.key],\n                    label: slice.fullLabel || slice.label,\n                    value: slice.value,\n                  })\n                \"\n              >\n                {{ slice.value }}\n              </span>\n            </div>\n            <p\n              class=\"mt-0-25 percentage-info\"\n              [attr.data-testid]=\"'bar-chart-tooltip-stack-percentage-' + (slice.fullLabel || slice.label)\"\n            >\n              {{ (100 * slice.value) / total() | number: '1.0-2' }}%\n              {{ tooltipPercentOfTotal() }}\n              {{ slice.percentageOfStack | number: '1.0-2' }}% {{ tooltipPercentOf() }} \"{{ tooltipLabel() }}\"\n            </p>\n          }\n        }\n      </cng-chart-tooltip>\n    }\n    @if (loading() || !data()?.length || allValuesZero()) {\n      <cng-bar-chart-skeleton\n        data-testid=\"bar-chart-skeleton\"\n        [orientation]=\"orientation()\"\n        [skeletonType]=\"loading() ? 'loading' : 'placeholder'\"\n      />\n    }\n    @if (alertMessageAndType()) {\n      <cng-chart-alert-overlay\n        data-testid=\"bar-chart-alert-overlay\"\n        [alertType]=\"alertMessageAndType()[1]\"\n        [alertMessage]=\"alertMessageAndType()[0]\"\n      />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length && !allValuesZero()) {\n    <cng-chart-legend data-testid=\"bar-chart-legend\" [items]=\"legendItems()\" />\n  }\n  @if (showExportButton() && !loading() && data()?.length) {\n    <cng-chart-export-button\n      data-testid=\"bar-chart-export\"\n      [svgRef]=\"svgElement()\"\n      [filename]=\"exportFilename()\"\n      [buttonTitle]=\"exportButtonTitle()\"\n      [legendItems]=\"legendItems()\"\n    />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.percentage-info{margin-left:15px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], stacks: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacks", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: true }] }], tooltipOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipOrientation", required: false }] }], barSizePx: [{ type: i0.Input, args: [{ isSignal: true, alias: "barSizePx", required: false }] }], barAreaSizePx: [{ type: i0.Input, args: [{ isSignal: true, alias: "barAreaSizePx", required: false }] }], tooltipPercentOfTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPercentOfTotal", required: false }] }], tooltipPercentOf: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPercentOf", required: false }] }], noItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsMessage", required: false }] }], tooManyItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooManyItemsMessage", required: false }] }], tooManyItemsGroupedMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooManyItemsGroupedMessage", required: false }] }], allValuesZeroMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "allValuesZeroMessage", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], exportButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportButtonTitle", required: false }] }], exportFilename: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFilename", required: false }] }], xAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAxisLabel", required: false }] }], yAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxisLabel", required: false }] }], valueClicked: [{ type: i0.Output, args: ["valueClicked"] }] } });
 
+class GroupedBarChartComponent extends ChartBase {
+    constructor() {
+        super(...arguments);
+        this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        this.groups = input(undefined, ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        this.tooltipOrientation = input('top', ...(ngDevMode ? [{ debugName: "tooltipOrientation" }] : /* istanbul ignore next */ []));
+        this.barSizePx = input(12, ...(ngDevMode ? [{ debugName: "barSizePx" }] : /* istanbul ignore next */ []));
+        this.groupAreaSizePx = input(60, ...(ngDevMode ? [{ debugName: "groupAreaSizePx" }] : /* istanbul ignore next */ []));
+        this.noItemsMessage = input(NO_ITEMS_MESSAGE, ...(ngDevMode ? [{ debugName: "noItemsMessage" }] : /* istanbul ignore next */ []));
+        this.tooManyItemsGroupedMessage = input(TOO_MANY_ITEMS_GROUPED_MESSAGE, ...(ngDevMode ? [{ debugName: "tooManyItemsGroupedMessage" }] : /* istanbul ignore next */ []));
+        this.allValuesZeroMessage = input(ALL_ITEMS_ZERO_MESSAGE, ...(ngDevMode ? [{ debugName: "allValuesZeroMessage" }] : /* istanbul ignore next */ []));
+        this.showLegend = input(true, ...(ngDevMode ? [{ debugName: "showLegend" }] : /* istanbul ignore next */ []));
+        this.showExportButton = input(false, ...(ngDevMode ? [{ debugName: "showExportButton" }] : /* istanbul ignore next */ []));
+        this.exportButtonTitle = input('Export', ...(ngDevMode ? [{ debugName: "exportButtonTitle" }] : /* istanbul ignore next */ []));
+        this.exportFilename = input('grouped-bar-chart', ...(ngDevMode ? [{ debugName: "exportFilename" }] : /* istanbul ignore next */ []));
+        /** Optional label rendered below the X axis. */
+        this.xAxisLabel = input('', ...(ngDevMode ? [{ debugName: "xAxisLabel" }] : /* istanbul ignore next */ []));
+        /** Optional label rendered rotated to the left of the Y axis. */
+        this.yAxisLabel = input('', ...(ngDevMode ? [{ debugName: "yAxisLabel" }] : /* istanbul ignore next */ []));
+        this.valueClicked = output();
+        this.allValuesZero = computed(() => !!this.data()?.length && this.data().every(d => d.value === 0), ...(ngDevMode ? [{ debugName: "allValuesZero" }] : /* istanbul ignore next */ []));
+        this.toChartColor = toChartColor;
+        this.tooltipLabel = computed(() => this.selectedItem()?.fullLabel ?? this.selectedItem()?.label, ...(ngDevMode ? [{ debugName: "tooltipLabel" }] : /* istanbul ignore next */ []));
+        this.legendItems = computed(() => {
+            if (!this.showLegend() || !this.data()?.length) {
+                return [];
+            }
+            const seen = new Set();
+            const items = [];
+            for (const item of this.data()) {
+                const label = item.fullLabel ?? item.label;
+                if (!seen.has(label)) {
+                    seen.add(label);
+                    items.push({ label, color: item.color });
+                }
+            }
+            return items;
+        }, ...(ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []));
+        this.alertMessageAndType = computed(() => {
+            if (this.loading()) {
+                return undefined;
+            }
+            if (this.allValuesZero()) {
+                return [this.allValuesZeroMessage(), NO_ITEMS_ALERT_TYPE];
+            }
+            if (!this.showingGroupCount()) {
+                return [this.noItemsMessage(), NO_ITEMS_ALERT_TYPE];
+            }
+            if (this.totalGroupCount() !== this.showingGroupCount()) {
+                const message = this.tooManyItemsGroupedMessage()
+                    .replace('{{totalAmount}}', String(this.totalGroupCount()))
+                    .replace('{{showingAmount}}', String(this.showingGroupCount()));
+                return [message, TOO_MANY_ITEMS_ALERT_TYPE];
+            }
+            return undefined;
+        }, ...(ngDevMode ? [{ debugName: "alertMessageAndType" }] : /* istanbul ignore next */ []));
+        this.textRenderer = new TextRenderer();
+        this.MARGIN = { top: 10, right: 20, bottom: 30, left: 80 };
+        this.totalGroupCount = signal(0, ...(ngDevMode ? [{ debugName: "totalGroupCount" }] : /* istanbul ignore next */ []));
+        this.showingGroupCount = signal(0, ...(ngDevMode ? [{ debugName: "showingGroupCount" }] : /* istanbul ignore next */ []));
+        this.slicedDataPoints = signal([], ...(ngDevMode ? [{ debugName: "slicedDataPoints" }] : /* istanbul ignore next */ []));
+        this.barSelection = null;
+        this.labelSelection = null;
+    }
+    ngOnChanges(_changes) {
+        if (!this.svg) {
+            return;
+        }
+        requestAnimationFrame(() => this.updateChart());
+    }
+    ngAfterViewInit() {
+        this.createChart();
+        super.ngAfterViewInit();
+    }
+    createChart() {
+        this.svg = select(this.chartRef().nativeElement);
+    }
+    updateChart() {
+        this.svg.selectAll('*').remove();
+        if (this.loading()) {
+            this.resetVisibleState();
+            return;
+        }
+        const normalizedGroups = this.getNormalizedGroups();
+        this.totalGroupCount.set(normalizedGroups.length);
+        if (!this.data()?.length || !normalizedGroups.length) {
+            this.resetVisibleState();
+            return;
+        }
+        const { width: containerWidth, height: containerHeight } = this.getContainerDimensions();
+        const extraBottom = this.xAxisLabel() ? 16 : 0;
+        const extraLeft = this.yAxisLabel() ? 16 : 0;
+        const leftMargin = (this.orientation() === 'horizontal' ? this.MARGIN.left : 30) + extraLeft;
+        const width = containerWidth - leftMargin - this.MARGIN.right;
+        const height = containerHeight - this.MARGIN.top - (this.MARGIN.bottom + extraBottom);
+        if (width <= 0 || height <= 0) {
+            this.resetVisibleState();
+            return;
+        }
+        const visibleGroups = normalizedGroups.slice(0, this.getMaxAmountOfGroups(width, height));
+        const visibleGroupKeys = new Set(visibleGroups.map(group => group.key));
+        const dataPoints = this.data()
+            .filter(item => visibleGroupKeys.has(item.groupKey))
+            .map(item => ({
+            ...item,
+            groupLabel: visibleGroups.find(group => group.key === item.groupKey)?.label ?? item.groupLabel ?? item.groupKey,
+        }));
+        this.showingGroupCount.set(visibleGroups.length);
+        this.slicedDataPoints.set(dataPoints);
+        const g = this.svg
+            .attr('width', width)
+            .attr('height', height)
+            .append('g')
+            .attr('transform', `translate(${leftMargin},${this.MARGIN.top})`);
+        if (this.orientation() === 'vertical') {
+            this.createVerticalChart(g, visibleGroups, width, height, this.xAxisLabel(), this.yAxisLabel(), leftMargin);
+        }
+        else {
+            this.createHorizontalChart(g, visibleGroups, width, height, this.xAxisLabel(), this.yAxisLabel(), leftMargin);
+        }
+        this.styleGridLines(g);
+    }
+    createVerticalChart(g, groups, width, height, xAxisLabel, yAxisLabel, leftMargin) {
+        const x0 = scaleBand()
+            .domain(groups.map(group => group.key))
+            .range([0, width])
+            .paddingInner(0.2);
+        const x1 = scaleBand().domain(this.seriesLabels()).range([0, x0.bandwidth()]).padding(0.05);
+        const y = scaleLinear()
+            .domain([0, max(this.slicedDataPoints(), (d) => d.value) || 0])
+            .nice()
+            .range([height, 0]);
+        const xAxis = g
+            .append('g')
+            .attr('transform', `translate(0,${height})`)
+            .call(axisBottom(x0).tickFormat(groupKey => groups.find(group => group.key === groupKey)?.label ?? groupKey));
+        this.labelSelection = xAxis
+            .selectAll('text')
+            .data(groups)
+            .call(this.addTextCommonInfo)
+            .call(this.addTextAndTitle.bind(this), x0.bandwidth());
+        const tickValues = y.ticks(5).filter((tick) => Number.isInteger(tick));
+        const yAxis = g
+            .append('g')
+            .call(axisLeft(y).tickValues(tickValues).tickSize(-width).tickFormat(format('~s')))
+            .selectAll('text');
+        yAxis.call(this.addTextCommonInfo);
+        this.createBarSelectionGroups(g);
+        this.addVerticalBarRectangle(x0, x1, y, 2)
+            .attr('class', 'bar-highlight')
+            .attr('fill', '#fff')
+            .style('stroke', (d) => toChartColor(d.color))
+            .attr('stroke-width', 2)
+            .style('opacity', 0);
+        this.addVerticalBarRectangle(x0, x1, y)
+            .attr('class', 'bar')
+            .style('fill', (d) => toChartColor(d.color));
+        this.appendAxisLabel(g, xAxisLabel, width / 2, height + 40);
+        this.appendAxisLabel(g, yAxisLabel, -height / 2, -(leftMargin - 10), 'rotate(-90)');
+    }
+    createHorizontalChart(g, groups, width, height, xAxisLabel, yAxisLabel, leftMargin) {
+        const x = scaleLinear()
+            .domain([0, max(this.slicedDataPoints(), (d) => d.value) || 0])
+            .nice()
+            .range([0, width]);
+        const y0 = scaleBand()
+            .domain(groups.map(group => group.key))
+            .range([0, height])
+            .paddingInner(0.2);
+        const y1 = scaleBand().domain(this.seriesLabels()).range([0, y0.bandwidth()]).padding(0.05);
+        const tickValues = x.ticks(5).filter((tick) => Number.isInteger(tick));
+        const xAxis = g
+            .append('g')
+            .attr('transform', `translate(0,${height})`)
+            .call(axisBottom(x).tickValues(tickValues).tickSize(-height).tickFormat(format('~s')))
+            .selectAll('text');
+        xAxis.call(this.addTextCommonInfo);
+        const yAxis = g
+            .append('g')
+            .call(axisLeft(y0).tickFormat(groupKey => groups.find(group => group.key === groupKey)?.label ?? groupKey));
+        this.labelSelection = yAxis
+            .selectAll('text')
+            .data(groups)
+            .call(this.addTextCommonInfo)
+            .call(this.addTextAndTitle.bind(this), this.MARGIN.left - 10);
+        this.createBarSelectionGroups(g);
+        this.addHorizontalBarRectangle(x, y0, y1, 2)
+            .attr('class', 'bar-highlight')
+            .attr('fill', '#fff')
+            .style('stroke', (d) => toChartColor(d.color))
+            .attr('stroke-width', 2)
+            .style('opacity', 0);
+        this.addHorizontalBarRectangle(x, y0, y1)
+            .attr('class', 'bar')
+            .style('fill', (d) => toChartColor(d.color));
+        this.appendAxisLabel(g, xAxisLabel, width / 2, height + 40);
+        this.appendAxisLabel(g, yAxisLabel, -height / 2, -((this.MARGIN.left + leftMargin) / 2), 'rotate(-90)');
+    }
+    createBarSelectionGroups(g) {
+        this.barSelection = g
+            .selectAll('.bar-group')
+            .data(this.slicedDataPoints(), (d) => d.key)
+            .join('g')
+            .attr('class', 'bar-group')
+            .style('cursor', 'pointer')
+            .on('mouseover', (_event, d) => this.setHoverStyles(d, true))
+            .on('mouseout', (_event, d) => this.setHoverStyles(d, false))
+            .call(this.addBarClickHandler.bind(this));
+    }
+    addHorizontalBarRectangle(x, y0, y1, outlineSize = 0) {
+        const barHeight = Math.max(0, Math.min(this.barSizePx(), y1.bandwidth()));
+        const yOffset = (y1.bandwidth() - barHeight) / 2;
+        return this.barSelection
+            .append('rect')
+            .attr('x', -outlineSize)
+            .attr('y', (d) => {
+            return (y0(d.groupKey) || 0) + (y1(d.fullLabel ?? d.label) || 0) + yOffset - outlineSize;
+        })
+            .attr('width', (d) => x(d.value) + 2 * outlineSize)
+            .attr('height', barHeight + 2 * outlineSize)
+            .attr('rx', 1)
+            .attr('ry', 1);
+    }
+    addVerticalBarRectangle(x0, x1, y, outlineSize = 0) {
+        const barWidth = Math.max(0, Math.min(this.barSizePx(), x1.bandwidth()));
+        const xOffset = (x1.bandwidth() - barWidth) / 2;
+        return this.barSelection
+            .append('rect')
+            .attr('x', (d) => {
+            return (x0(d.groupKey) || 0) + (x1(d.fullLabel ?? d.label) || 0) + xOffset - outlineSize;
+        })
+            .attr('y', (d) => y(d.value) - outlineSize)
+            .attr('width', barWidth + 2 * outlineSize)
+            .attr('height', (d) => y(0) - y(d.value) + 2 * outlineSize)
+            .attr('rx', 1)
+            .attr('ry', 1);
+    }
+    emitSelectedValue() {
+        const item = this.selectedItem();
+        if (!item) {
+            return;
+        }
+        this.valueClicked.emit({
+            key: item.key,
+            label: item.fullLabel ?? item.label,
+            groupKey: item.groupKey,
+            groupLabel: item.groupLabel,
+            value: item.value,
+        });
+    }
+    addBarClickHandler(g) {
+        g.on('click', (event, d) => {
+            event.stopPropagation();
+            this.openTooltip(d.key);
+        });
+    }
+    openTooltip(key) {
+        const index = this.slicedDataPoints().findIndex(item => item.key === key);
+        const rect = this.barSelection
+            .filter((_d, i) => i === index)
+            .node()
+            .children[0].getBoundingClientRect();
+        const container = this.chartRef().nativeElement.getBoundingClientRect();
+        this.tooltipPosition.set({
+            x: rect.left - container.left + rect.width / 2,
+            y: (this.tooltipOrientation() === 'top' ? rect.top : rect.bottom) - container.top,
+        });
+        this.selectedItem.set(this.slicedDataPoints()[index]);
+    }
+    setHoverStyles(d, isHover) {
+        const barGroup = this.barSelection.filter((item) => item.key === d.key);
+        barGroup.select('.bar').style('mix-blend-mode', isHover ? 'multiply' : 'unset');
+        barGroup.select('.bar-highlight').style('opacity', isHover ? '1' : '0');
+        this.labelSelection
+            .filter((group) => group.key === d.groupKey)
+            .style('font-weight', isHover ? 'bold' : 'unset');
+    }
+    addTextCommonInfo(g) {
+        g.style('font-size', '11px').style('fill', 'var(--cds-global-color-construction-400, #666)');
+    }
+    addTextAndTitle(g, availableWidth) {
+        g.each((d, index, nodes) => {
+            const target = select(nodes[index]);
+            target.text(this.textRenderer.render(d.label, 15, availableWidth, target.style('font-size'), target.style('font-family')));
+            target.append('title').text(d.label);
+        });
+    }
+    appendAxisLabel(g, text, x, y, transform) {
+        if (!text) {
+            return;
+        }
+        const el = g
+            .append('text')
+            .attr('text-anchor', 'middle')
+            .style('font-size', '12px')
+            .style('fill', 'var(--cds-global-color-construction-400, #666)')
+            .text(text)
+            .attr('x', x)
+            .attr('y', y);
+        if (transform) {
+            el.attr('transform', transform);
+        }
+    }
+    styleGridLines(g) {
+        g.selectAll('.tick line').style('stroke', 'var(--cds-global-color-gray-200, #e8e8e8)');
+    }
+    getNormalizedGroups() {
+        if (this.groups()?.length) {
+            return this.groups();
+        }
+        const seen = new Set();
+        const groups = [];
+        for (const item of this.data() ?? []) {
+            if (!seen.has(item.groupKey)) {
+                seen.add(item.groupKey);
+                groups.push({ key: item.groupKey, label: item.groupLabel ?? item.groupKey });
+            }
+        }
+        return groups;
+    }
+    seriesLabels() {
+        const seen = new Set();
+        const labels = [];
+        for (const item of this.slicedDataPoints()) {
+            const label = item.fullLabel ?? item.label;
+            if (!seen.has(label)) {
+                seen.add(label);
+                labels.push(label);
+            }
+        }
+        return labels;
+    }
+    getMaxAmountOfGroups(width, height) {
+        if (this.orientation() === 'vertical') {
+            return Math.floor(width / this.groupAreaSizePx());
+        }
+        return Math.floor(height / this.groupAreaSizePx());
+    }
+    resetVisibleState() {
+        this.showingGroupCount.set(0);
+        this.slicedDataPoints.set([]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: GroupedBarChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: GroupedBarChartComponent, isStandalone: false, selector: "clr-grouped-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, tooltipOrientation: { classPropertyName: "tooltipOrientation", publicName: "tooltipOrientation", isSignal: true, isRequired: false, transformFunction: null }, barSizePx: { classPropertyName: "barSizePx", publicName: "barSizePx", isSignal: true, isRequired: false, transformFunction: null }, groupAreaSizePx: { classPropertyName: "groupAreaSizePx", publicName: "groupAreaSizePx", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, tooManyItemsGroupedMessage: { classPropertyName: "tooManyItemsGroupedMessage", publicName: "tooManyItemsGroupedMessage", isSignal: true, isRequired: false, transformFunction: null }, allValuesZeroMessage: { classPropertyName: "allValuesZeroMessage", publicName: "allValuesZeroMessage", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, xAxisLabel: { classPropertyName: "xAxisLabel", publicName: "xAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yAxisLabel: { classPropertyName: "yAxisLabel", publicName: "yAxisLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\">\n  <div class=\"chart-area\" #container (cngWindowResize)=\"updateChart()\" [class.pt-3]=\"alertMessageAndType()\">\n    <svg\n      [class.d-none]=\"loading() || !data()?.length || allValuesZero()\"\n      #chart\n      role=\"img\"\n      [attr.aria-label]=\"xAxisLabel() || yAxisLabel() ? yAxisLabel() + ' by ' + xAxisLabel() : 'Grouped bar chart'\"\n    ></svg>\n\n    @if (tooltipPosition()) {\n      <cng-chart-tooltip\n        [tooltipPosition]=\"tooltipPosition()\"\n        [tooltipOrientation]=\"tooltipOrientation()\"\n        [squareColor]=\"selectedItem()?.color\"\n        (tooltipClosed)=\"resetTooltip()\"\n        (cngOutsideClick)=\"resetTooltip()\"\n        (tooltipHeaderClicked)=\"emitSelectedValue()\"\n      >\n        <ng-container ngProjectAs=\"cng-title\">({{ selectedItem()?.value }}) {{ tooltipLabel() }}</ng-container>\n\n        <p class=\"mt-0\">\n          <strong>{{ selectedItem()?.groupLabel }}</strong>\n        </p>\n      </cng-chart-tooltip>\n    }\n    @if (loading() || !data()?.length || allValuesZero()) {\n      <cng-bar-chart-skeleton [orientation]=\"orientation()\" [skeletonType]=\"loading() ? 'loading' : 'placeholder'\" />\n    }\n    @if (alertMessageAndType()) {\n      <cng-chart-alert-overlay [alertType]=\"alertMessageAndType()[1]\" [alertMessage]=\"alertMessageAndType()[0]\" />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length && !allValuesZero()) {\n    <cng-chart-legend [items]=\"legendItems()\" />\n  }\n  @if (showExportButton() && !loading() && data()?.length) {\n    <cng-chart-export-button\n      [svgRef]=\"svgElement()\"\n      [filename]=\"exportFilename()\"\n      [buttonTitle]=\"exportButtonTitle()\"\n      [legendItems]=\"legendItems()\"\n    />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}\n"], dependencies: [{ kind: "component", type: ChartAlertOverlayComponent, selector: "cng-chart-alert-overlay", inputs: ["alertMessage", "alertType"] }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { kind: "component", type: ChartLegendComponent, selector: "cng-chart-legend", inputs: ["items"] }, { kind: "component", type: ChartSkeletonComponent, selector: "cng-bar-chart-skeleton", inputs: ["skeletonType", "orientation"] }, { kind: "component", type: ChartTooltipComponent, selector: "cng-chart-tooltip", inputs: ["tooltipPosition", "tooltipOrientation", "squareColor", "tooltipClickable"], outputs: ["tooltipClosed", "tooltipHeaderClicked"] }, { kind: "directive", type: OutsideClickDirective, selector: "[cngOutsideClick]", outputs: ["cngOutsideClick"] }, { kind: "directive", type: WindowResizeDirective, selector: "[cngWindowResize]", inputs: ["debounce", "includeFirst"], outputs: ["cngWindowResize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: GroupedBarChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'clr-grouped-bar-chart', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"chart-container\">\n  <div class=\"chart-area\" #container (cngWindowResize)=\"updateChart()\" [class.pt-3]=\"alertMessageAndType()\">\n    <svg\n      [class.d-none]=\"loading() || !data()?.length || allValuesZero()\"\n      #chart\n      role=\"img\"\n      [attr.aria-label]=\"xAxisLabel() || yAxisLabel() ? yAxisLabel() + ' by ' + xAxisLabel() : 'Grouped bar chart'\"\n    ></svg>\n\n    @if (tooltipPosition()) {\n      <cng-chart-tooltip\n        [tooltipPosition]=\"tooltipPosition()\"\n        [tooltipOrientation]=\"tooltipOrientation()\"\n        [squareColor]=\"selectedItem()?.color\"\n        (tooltipClosed)=\"resetTooltip()\"\n        (cngOutsideClick)=\"resetTooltip()\"\n        (tooltipHeaderClicked)=\"emitSelectedValue()\"\n      >\n        <ng-container ngProjectAs=\"cng-title\">({{ selectedItem()?.value }}) {{ tooltipLabel() }}</ng-container>\n\n        <p class=\"mt-0\">\n          <strong>{{ selectedItem()?.groupLabel }}</strong>\n        </p>\n      </cng-chart-tooltip>\n    }\n    @if (loading() || !data()?.length || allValuesZero()) {\n      <cng-bar-chart-skeleton [orientation]=\"orientation()\" [skeletonType]=\"loading() ? 'loading' : 'placeholder'\" />\n    }\n    @if (alertMessageAndType()) {\n      <cng-chart-alert-overlay [alertType]=\"alertMessageAndType()[1]\" [alertMessage]=\"alertMessageAndType()[0]\" />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length && !allValuesZero()) {\n    <cng-chart-legend [items]=\"legendItems()\" />\n  }\n  @if (showExportButton() && !loading() && data()?.length) {\n    <cng-chart-export-button\n      [svgRef]=\"svgElement()\"\n      [filename]=\"exportFilename()\"\n      [buttonTitle]=\"exportButtonTitle()\"\n      [legendItems]=\"legendItems()\"\n    />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}\n"] }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], tooltipOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipOrientation", required: false }] }], barSizePx: [{ type: i0.Input, args: [{ isSignal: true, alias: "barSizePx", required: false }] }], groupAreaSizePx: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupAreaSizePx", required: false }] }], noItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsMessage", required: false }] }], tooManyItemsGroupedMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooManyItemsGroupedMessage", required: false }] }], allValuesZeroMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "allValuesZeroMessage", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], exportButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportButtonTitle", required: false }] }], exportFilename: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFilename", required: false }] }], xAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAxisLabel", required: false }] }], yAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxisLabel", required: false }] }], valueClicked: [{ type: i0.Output, args: ["valueClicked"] }] } });
+
 /*
  * Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
@@ -1327,11 +1698,11 @@ class LineChartComponent extends ChartBase {
         this.selectedItem.set({ ...point, seriesKey: series.key, seriesLabel: series.label, color: series.color });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LineChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: LineChartComponent, isStandalone: false, selector: "clr-line-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, tooltipOrientation: { classPropertyName: "tooltipOrientation", publicName: "tooltipOrientation", isSignal: true, isRequired: false, transformFunction: null }, showArea: { classPropertyName: "showArea", publicName: "showArea", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, tooltipPercentOfTotal: { classPropertyName: "tooltipPercentOfTotal", publicName: "tooltipPercentOfTotal", isSignal: true, isRequired: false, transformFunction: null }, xAxisLabel: { classPropertyName: "xAxisLabel", publicName: "xAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yAxisLabel: { classPropertyName: "yAxisLabel", publicName: "yAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yMin: { classPropertyName: "yMin", publicName: "yMin", isSignal: true, isRequired: false, transformFunction: null }, autoscaleYAxis: { classPropertyName: "autoscaleYAxis", publicName: "autoscaleYAxis", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\">\n  <div class=\"chart-area\" #container (cngWindowResize)=\"updateChart()\" [class.pt-3]=\"alertMessageAndType()\">\n    <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"selectedItem()?.color\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"\n          valueClicked.emit({\n            seriesKey: selectedItem().seriesKey,\n            seriesLabel: selectedItem().seriesLabel,\n            x: selectedItem().x,\n            xLabel: selectedItem().xLabel,\n            value: selectedItem().value,\n          })\n        \"\n    >\n      <ng-container ngProjectAs=\"cng-title\">\n        ({{ selectedItem().value }}) {{ selectedItem().xLabel || selectedItem().x }}\n      </ng-container>\n\n      <p class=\"mt-0\">\n        <strong>{{ selectedItem().seriesLabel }}:</strong>\n        {{ selectedItem().value }}\n      </p>\n      <p class=\"mt-0\">\n        {{ (100 * selectedItem().value) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n    </cng-chart-tooltip>\n    } @if (loading() || !hasData()) {\n    <cng-bar-chart-skeleton orientation=\"vertical\" [skeletonType]=\"loading() ? 'loading' : 'placeholder'\" />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay [alertType]=\"alertMessageAndType()[1]\" [alertMessage]=\"alertMessageAndType()[0]\" />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length) {\n  <cng-chart-legend [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && hasData()) {\n  <cng-chart-export-button\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.line,.area{pointer-events:none}.dot{transition:r .1s ease}\n"], dependencies: [{ kind: "component", type: ChartAlertOverlayComponent, selector: "cng-chart-alert-overlay", inputs: ["alertMessage", "alertType"] }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { kind: "component", type: ChartLegendComponent, selector: "cng-chart-legend", inputs: ["items"] }, { kind: "component", type: ChartSkeletonComponent, selector: "cng-bar-chart-skeleton", inputs: ["skeletonType", "orientation"] }, { kind: "component", type: ChartTooltipComponent, selector: "cng-chart-tooltip", inputs: ["tooltipPosition", "tooltipOrientation", "squareColor", "tooltipClickable"], outputs: ["tooltipClosed", "tooltipHeaderClicked"] }, { kind: "directive", type: OutsideClickDirective, selector: "[cngOutsideClick]", outputs: ["cngOutsideClick"] }, { kind: "directive", type: WindowResizeDirective, selector: "[cngWindowResize]", inputs: ["debounce", "includeFirst"], outputs: ["cngWindowResize"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: LineChartComponent, isStandalone: false, selector: "clr-line-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, tooltipOrientation: { classPropertyName: "tooltipOrientation", publicName: "tooltipOrientation", isSignal: true, isRequired: false, transformFunction: null }, showArea: { classPropertyName: "showArea", publicName: "showArea", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, tooltipPercentOfTotal: { classPropertyName: "tooltipPercentOfTotal", publicName: "tooltipPercentOfTotal", isSignal: true, isRequired: false, transformFunction: null }, xAxisLabel: { classPropertyName: "xAxisLabel", publicName: "xAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yAxisLabel: { classPropertyName: "yAxisLabel", publicName: "yAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yMin: { classPropertyName: "yMin", publicName: "yMin", isSignal: true, isRequired: false, transformFunction: null }, autoscaleYAxis: { classPropertyName: "autoscaleYAxis", publicName: "autoscaleYAxis", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\" data-testid=\"line-chart\">\n  <div\n    class=\"chart-area\"\n    data-testid=\"line-chart-area\"\n    #container\n    (cngWindowResize)=\"updateChart()\"\n    [class.pt-3]=\"alertMessageAndType()\"\n  >\n    <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      data-testid=\"line-chart-tooltip\"\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"selectedItem()?.color\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"\n          valueClicked.emit({\n            seriesKey: selectedItem().seriesKey,\n            seriesLabel: selectedItem().seriesLabel,\n            x: selectedItem().x,\n            xLabel: selectedItem().xLabel,\n            value: selectedItem().value,\n          })\n        \"\n    >\n      <ng-container ngProjectAs=\"cng-title\">\n        ({{ selectedItem().value }}) {{ selectedItem().xLabel || selectedItem().x }}\n      </ng-container>\n\n      <p class=\"mt-0\" data-testid=\"line-chart-tooltip-series\">\n        <strong>{{ selectedItem().seriesLabel }}:</strong>\n        {{ selectedItem().value }}\n      </p>\n      <p class=\"mt-0\" data-testid=\"line-chart-tooltip-percentage\">\n        {{ (100 * selectedItem().value) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n    </cng-chart-tooltip>\n    } @if (loading() || !hasData()) {\n    <cng-bar-chart-skeleton\n      data-testid=\"line-chart-skeleton\"\n      orientation=\"vertical\"\n      [skeletonType]=\"loading() ? 'loading' : 'placeholder'\"\n    />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay\n      data-testid=\"line-chart-alert-overlay\"\n      [alertType]=\"alertMessageAndType()[1]\"\n      [alertMessage]=\"alertMessageAndType()[0]\"\n    />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length) {\n  <cng-chart-legend data-testid=\"line-chart-legend\" [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && hasData()) {\n  <cng-chart-export-button\n    data-testid=\"line-chart-export\"\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.line,.area{pointer-events:none}.dot{transition:r .1s ease}\n"], dependencies: [{ kind: "component", type: ChartAlertOverlayComponent, selector: "cng-chart-alert-overlay", inputs: ["alertMessage", "alertType"] }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { kind: "component", type: ChartLegendComponent, selector: "cng-chart-legend", inputs: ["items"] }, { kind: "component", type: ChartSkeletonComponent, selector: "cng-bar-chart-skeleton", inputs: ["skeletonType", "orientation"] }, { kind: "component", type: ChartTooltipComponent, selector: "cng-chart-tooltip", inputs: ["tooltipPosition", "tooltipOrientation", "squareColor", "tooltipClickable"], outputs: ["tooltipClosed", "tooltipHeaderClicked"] }, { kind: "directive", type: OutsideClickDirective, selector: "[cngOutsideClick]", outputs: ["cngOutsideClick"] }, { kind: "directive", type: WindowResizeDirective, selector: "[cngWindowResize]", inputs: ["debounce", "includeFirst"], outputs: ["cngWindowResize"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LineChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-line-chart', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"chart-container\">\n  <div class=\"chart-area\" #container (cngWindowResize)=\"updateChart()\" [class.pt-3]=\"alertMessageAndType()\">\n    <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"selectedItem()?.color\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"\n          valueClicked.emit({\n            seriesKey: selectedItem().seriesKey,\n            seriesLabel: selectedItem().seriesLabel,\n            x: selectedItem().x,\n            xLabel: selectedItem().xLabel,\n            value: selectedItem().value,\n          })\n        \"\n    >\n      <ng-container ngProjectAs=\"cng-title\">\n        ({{ selectedItem().value }}) {{ selectedItem().xLabel || selectedItem().x }}\n      </ng-container>\n\n      <p class=\"mt-0\">\n        <strong>{{ selectedItem().seriesLabel }}:</strong>\n        {{ selectedItem().value }}\n      </p>\n      <p class=\"mt-0\">\n        {{ (100 * selectedItem().value) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n    </cng-chart-tooltip>\n    } @if (loading() || !hasData()) {\n    <cng-bar-chart-skeleton orientation=\"vertical\" [skeletonType]=\"loading() ? 'loading' : 'placeholder'\" />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay [alertType]=\"alertMessageAndType()[1]\" [alertMessage]=\"alertMessageAndType()[0]\" />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length) {\n  <cng-chart-legend [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && hasData()) {\n  <cng-chart-export-button\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.line,.area{pointer-events:none}.dot{transition:r .1s ease}\n"] }]
+            args: [{ selector: 'clr-line-chart', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"chart-container\" data-testid=\"line-chart\">\n  <div\n    class=\"chart-area\"\n    data-testid=\"line-chart-area\"\n    #container\n    (cngWindowResize)=\"updateChart()\"\n    [class.pt-3]=\"alertMessageAndType()\"\n  >\n    <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      data-testid=\"line-chart-tooltip\"\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"selectedItem()?.color\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"\n          valueClicked.emit({\n            seriesKey: selectedItem().seriesKey,\n            seriesLabel: selectedItem().seriesLabel,\n            x: selectedItem().x,\n            xLabel: selectedItem().xLabel,\n            value: selectedItem().value,\n          })\n        \"\n    >\n      <ng-container ngProjectAs=\"cng-title\">\n        ({{ selectedItem().value }}) {{ selectedItem().xLabel || selectedItem().x }}\n      </ng-container>\n\n      <p class=\"mt-0\" data-testid=\"line-chart-tooltip-series\">\n        <strong>{{ selectedItem().seriesLabel }}:</strong>\n        {{ selectedItem().value }}\n      </p>\n      <p class=\"mt-0\" data-testid=\"line-chart-tooltip-percentage\">\n        {{ (100 * selectedItem().value) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n    </cng-chart-tooltip>\n    } @if (loading() || !hasData()) {\n    <cng-bar-chart-skeleton\n      data-testid=\"line-chart-skeleton\"\n      orientation=\"vertical\"\n      [skeletonType]=\"loading() ? 'loading' : 'placeholder'\"\n    />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay\n      data-testid=\"line-chart-alert-overlay\"\n      [alertType]=\"alertMessageAndType()[1]\"\n      [alertMessage]=\"alertMessageAndType()[0]\"\n    />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length) {\n  <cng-chart-legend data-testid=\"line-chart-legend\" [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && hasData()) {\n  <cng-chart-export-button\n    data-testid=\"line-chart-export\"\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.line,.area{pointer-events:none}.dot{transition:r .1s ease}\n"] }]
         }], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], tooltipOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipOrientation", required: false }] }], showArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArea", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], exportButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportButtonTitle", required: false }] }], exportFilename: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFilename", required: false }] }], noItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsMessage", required: false }] }], tooltipPercentOfTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPercentOfTotal", required: false }] }], xAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAxisLabel", required: false }] }], yAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxisLabel", required: false }] }], yMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "yMin", required: false }] }], autoscaleYAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoscaleYAxis", required: false }] }], valueClicked: [{ type: i0.Output, args: ["valueClicked"] }] } });
 
 class AreaChartComponent extends ChartBase {
@@ -1464,11 +1835,11 @@ class AreaChartComponent extends ChartBase {
         this.selectedItem.set({ ...point, seriesKey: series.key, seriesLabel: series.label, color: series.color });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AreaChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: AreaChartComponent, isStandalone: false, selector: "clr-area-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, tooltipOrientation: { classPropertyName: "tooltipOrientation", publicName: "tooltipOrientation", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, areaOpacity: { classPropertyName: "areaOpacity", publicName: "areaOpacity", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, tooltipPercentOfTotal: { classPropertyName: "tooltipPercentOfTotal", publicName: "tooltipPercentOfTotal", isSignal: true, isRequired: false, transformFunction: null }, xAxisLabel: { classPropertyName: "xAxisLabel", publicName: "xAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yAxisLabel: { classPropertyName: "yAxisLabel", publicName: "yAxisLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\">\n  <div class=\"chart-area\" #container (cngWindowResize)=\"updateChart()\" [class.pt-3]=\"alertMessageAndType()\">\n    <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"selectedItem()?.color\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"\n          valueClicked.emit({\n            seriesKey: selectedItem().seriesKey,\n            seriesLabel: selectedItem().seriesLabel,\n            x: selectedItem().x,\n            xLabel: selectedItem().xLabel,\n            value: selectedItem().value,\n          })\n        \"\n    >\n      <ng-container ngProjectAs=\"cng-title\">\n        ({{ selectedItem().value }}) {{ selectedItem().xLabel || selectedItem().x }}\n      </ng-container>\n\n      <p class=\"mt-0\">\n        <strong>{{ selectedItem().seriesLabel }}:</strong>\n        {{ selectedItem().value }}\n      </p>\n      <p class=\"mt-0\">\n        {{ (100 * selectedItem().value) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n    </cng-chart-tooltip>\n    } @if (loading() || !hasData()) {\n    <cng-bar-chart-skeleton orientation=\"vertical\" [skeletonType]=\"loading() ? 'loading' : 'placeholder'\" />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay [alertType]=\"alertMessageAndType()[1]\" [alertMessage]=\"alertMessageAndType()[0]\" />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length) {\n  <cng-chart-legend [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && hasData()) {\n  <cng-chart-export-button\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.line,.area{pointer-events:none}.dot{transition:r .1s ease}\n"], dependencies: [{ kind: "component", type: ChartAlertOverlayComponent, selector: "cng-chart-alert-overlay", inputs: ["alertMessage", "alertType"] }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { kind: "component", type: ChartLegendComponent, selector: "cng-chart-legend", inputs: ["items"] }, { kind: "component", type: ChartSkeletonComponent, selector: "cng-bar-chart-skeleton", inputs: ["skeletonType", "orientation"] }, { kind: "component", type: ChartTooltipComponent, selector: "cng-chart-tooltip", inputs: ["tooltipPosition", "tooltipOrientation", "squareColor", "tooltipClickable"], outputs: ["tooltipClosed", "tooltipHeaderClicked"] }, { kind: "directive", type: OutsideClickDirective, selector: "[cngOutsideClick]", outputs: ["cngOutsideClick"] }, { kind: "directive", type: WindowResizeDirective, selector: "[cngWindowResize]", inputs: ["debounce", "includeFirst"], outputs: ["cngWindowResize"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: AreaChartComponent, isStandalone: false, selector: "clr-area-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, tooltipOrientation: { classPropertyName: "tooltipOrientation", publicName: "tooltipOrientation", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, areaOpacity: { classPropertyName: "areaOpacity", publicName: "areaOpacity", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, tooltipPercentOfTotal: { classPropertyName: "tooltipPercentOfTotal", publicName: "tooltipPercentOfTotal", isSignal: true, isRequired: false, transformFunction: null }, xAxisLabel: { classPropertyName: "xAxisLabel", publicName: "xAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yAxisLabel: { classPropertyName: "yAxisLabel", publicName: "yAxisLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\" data-testid=\"area-chart\">\n  <div\n    class=\"chart-area\"\n    data-testid=\"area-chart-area\"\n    #container\n    (cngWindowResize)=\"updateChart()\"\n    [class.pt-3]=\"alertMessageAndType()\"\n  >\n    <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      data-testid=\"area-chart-tooltip\"\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"selectedItem()?.color\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"\n          valueClicked.emit({\n            seriesKey: selectedItem().seriesKey,\n            seriesLabel: selectedItem().seriesLabel,\n            x: selectedItem().x,\n            xLabel: selectedItem().xLabel,\n            value: selectedItem().value,\n          })\n        \"\n    >\n      <ng-container ngProjectAs=\"cng-title\">\n        ({{ selectedItem().value }}) {{ selectedItem().xLabel || selectedItem().x }}\n      </ng-container>\n\n      <p class=\"mt-0\" data-testid=\"area-chart-tooltip-series\">\n        <strong>{{ selectedItem().seriesLabel }}:</strong>\n        {{ selectedItem().value }}\n      </p>\n      <p class=\"mt-0\" data-testid=\"area-chart-tooltip-percentage\">\n        {{ (100 * selectedItem().value) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n    </cng-chart-tooltip>\n    } @if (loading() || !hasData()) {\n    <cng-bar-chart-skeleton\n      data-testid=\"area-chart-skeleton\"\n      orientation=\"vertical\"\n      [skeletonType]=\"loading() ? 'loading' : 'placeholder'\"\n    />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay\n      data-testid=\"area-chart-alert-overlay\"\n      [alertType]=\"alertMessageAndType()[1]\"\n      [alertMessage]=\"alertMessageAndType()[0]\"\n    />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length) {\n  <cng-chart-legend data-testid=\"area-chart-legend\" [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && hasData()) {\n  <cng-chart-export-button\n    data-testid=\"area-chart-export\"\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.line,.area{pointer-events:none}.dot{transition:r .1s ease}\n"], dependencies: [{ kind: "component", type: ChartAlertOverlayComponent, selector: "cng-chart-alert-overlay", inputs: ["alertMessage", "alertType"] }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { kind: "component", type: ChartLegendComponent, selector: "cng-chart-legend", inputs: ["items"] }, { kind: "component", type: ChartSkeletonComponent, selector: "cng-bar-chart-skeleton", inputs: ["skeletonType", "orientation"] }, { kind: "component", type: ChartTooltipComponent, selector: "cng-chart-tooltip", inputs: ["tooltipPosition", "tooltipOrientation", "squareColor", "tooltipClickable"], outputs: ["tooltipClosed", "tooltipHeaderClicked"] }, { kind: "directive", type: OutsideClickDirective, selector: "[cngOutsideClick]", outputs: ["cngOutsideClick"] }, { kind: "directive", type: WindowResizeDirective, selector: "[cngWindowResize]", inputs: ["debounce", "includeFirst"], outputs: ["cngWindowResize"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AreaChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-area-chart', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"chart-container\">\n  <div class=\"chart-area\" #container (cngWindowResize)=\"updateChart()\" [class.pt-3]=\"alertMessageAndType()\">\n    <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"selectedItem()?.color\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"\n          valueClicked.emit({\n            seriesKey: selectedItem().seriesKey,\n            seriesLabel: selectedItem().seriesLabel,\n            x: selectedItem().x,\n            xLabel: selectedItem().xLabel,\n            value: selectedItem().value,\n          })\n        \"\n    >\n      <ng-container ngProjectAs=\"cng-title\">\n        ({{ selectedItem().value }}) {{ selectedItem().xLabel || selectedItem().x }}\n      </ng-container>\n\n      <p class=\"mt-0\">\n        <strong>{{ selectedItem().seriesLabel }}:</strong>\n        {{ selectedItem().value }}\n      </p>\n      <p class=\"mt-0\">\n        {{ (100 * selectedItem().value) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n    </cng-chart-tooltip>\n    } @if (loading() || !hasData()) {\n    <cng-bar-chart-skeleton orientation=\"vertical\" [skeletonType]=\"loading() ? 'loading' : 'placeholder'\" />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay [alertType]=\"alertMessageAndType()[1]\" [alertMessage]=\"alertMessageAndType()[0]\" />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length) {\n  <cng-chart-legend [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && hasData()) {\n  <cng-chart-export-button\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.line,.area{pointer-events:none}.dot{transition:r .1s ease}\n"] }]
+            args: [{ selector: 'clr-area-chart', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"chart-container\" data-testid=\"area-chart\">\n  <div\n    class=\"chart-area\"\n    data-testid=\"area-chart-area\"\n    #container\n    (cngWindowResize)=\"updateChart()\"\n    [class.pt-3]=\"alertMessageAndType()\"\n  >\n    <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      data-testid=\"area-chart-tooltip\"\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"selectedItem()?.color\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"\n          valueClicked.emit({\n            seriesKey: selectedItem().seriesKey,\n            seriesLabel: selectedItem().seriesLabel,\n            x: selectedItem().x,\n            xLabel: selectedItem().xLabel,\n            value: selectedItem().value,\n          })\n        \"\n    >\n      <ng-container ngProjectAs=\"cng-title\">\n        ({{ selectedItem().value }}) {{ selectedItem().xLabel || selectedItem().x }}\n      </ng-container>\n\n      <p class=\"mt-0\" data-testid=\"area-chart-tooltip-series\">\n        <strong>{{ selectedItem().seriesLabel }}:</strong>\n        {{ selectedItem().value }}\n      </p>\n      <p class=\"mt-0\" data-testid=\"area-chart-tooltip-percentage\">\n        {{ (100 * selectedItem().value) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n    </cng-chart-tooltip>\n    } @if (loading() || !hasData()) {\n    <cng-bar-chart-skeleton\n      data-testid=\"area-chart-skeleton\"\n      orientation=\"vertical\"\n      [skeletonType]=\"loading() ? 'loading' : 'placeholder'\"\n    />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay\n      data-testid=\"area-chart-alert-overlay\"\n      [alertType]=\"alertMessageAndType()[1]\"\n      [alertMessage]=\"alertMessageAndType()[0]\"\n    />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length) {\n  <cng-chart-legend data-testid=\"area-chart-legend\" [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && hasData()) {\n  <cng-chart-export-button\n    data-testid=\"area-chart-export\"\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.line,.area{pointer-events:none}.dot{transition:r .1s ease}\n"] }]
         }], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], tooltipOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipOrientation", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], exportButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportButtonTitle", required: false }] }], exportFilename: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFilename", required: false }] }], areaOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "areaOpacity", required: false }] }], noItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsMessage", required: false }] }], tooltipPercentOfTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPercentOfTotal", required: false }] }], xAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAxisLabel", required: false }] }], yAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxisLabel", required: false }] }], valueClicked: [{ type: i0.Output, args: ["valueClicked"] }] } });
 
 class ComboChartComponent extends ChartBase {
@@ -1759,11 +2130,11 @@ class ComboChartComponent extends ChartBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ComboChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ComboChartComponent, isStandalone: false, selector: "clr-combo-chart", inputs: { barSeries: { classPropertyName: "barSeries", publicName: "barSeries", isSignal: true, isRequired: false, transformFunction: null }, lineSeries: { classPropertyName: "lineSeries", publicName: "lineSeries", isSignal: true, isRequired: false, transformFunction: null }, tooltipOrientation: { classPropertyName: "tooltipOrientation", publicName: "tooltipOrientation", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, tooltipPercentOfTotal: { classPropertyName: "tooltipPercentOfTotal", publicName: "tooltipPercentOfTotal", isSignal: true, isRequired: false, transformFunction: null }, xAxisLabel: { classPropertyName: "xAxisLabel", publicName: "xAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yAxisLabel: { classPropertyName: "yAxisLabel", publicName: "yAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yLineAxisLabel: { classPropertyName: "yLineAxisLabel", publicName: "yLineAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yBarMax: { classPropertyName: "yBarMax", publicName: "yBarMax", isSignal: true, isRequired: false, transformFunction: null }, yLineMax: { classPropertyName: "yLineMax", publicName: "yLineMax", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\">\n  <div class=\"chart-area\" #container (cngWindowResize)=\"updateChart()\" [class.pt-3]=\"alertMessageAndType()\">\n    <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"selectedItem()?.color\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"\n          valueClicked.emit({\n            seriesKey: selectedItem().seriesKey,\n            seriesLabel: selectedItem().seriesLabel,\n            seriesType: selectedItem().seriesType,\n            x: selectedItem().x,\n            xLabel: selectedItem().xLabel,\n            value: selectedItem().value,\n          })\n        \"\n    >\n      <ng-container ngProjectAs=\"cng-title\">\n        ({{ selectedItem().value }}) {{ selectedItem().xLabel || selectedItem().x }}\n      </ng-container>\n\n      <p class=\"mt-0\">\n        <strong>{{ selectedItem().seriesLabel }}:</strong>\n        {{ selectedItem().value }}\n      </p>\n      <p class=\"mt-0\">\n        {{ (100 * selectedItem().value) / selectedItem().total | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n    </cng-chart-tooltip>\n    } @if (loading() || !hasData()) {\n    <cng-bar-chart-skeleton orientation=\"vertical\" [skeletonType]=\"loading() ? 'loading' : 'placeholder'\" />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay [alertType]=\"alertMessageAndType()[1]\" [alertMessage]=\"alertMessageAndType()[0]\" />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length) {\n  <cng-chart-legend [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && hasData()) {\n  <cng-chart-export-button\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.combo-line{pointer-events:none}.combo-dot{transition:r .1s ease}\n"], dependencies: [{ kind: "component", type: ChartAlertOverlayComponent, selector: "cng-chart-alert-overlay", inputs: ["alertMessage", "alertType"] }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { kind: "component", type: ChartLegendComponent, selector: "cng-chart-legend", inputs: ["items"] }, { kind: "component", type: ChartSkeletonComponent, selector: "cng-bar-chart-skeleton", inputs: ["skeletonType", "orientation"] }, { kind: "component", type: ChartTooltipComponent, selector: "cng-chart-tooltip", inputs: ["tooltipPosition", "tooltipOrientation", "squareColor", "tooltipClickable"], outputs: ["tooltipClosed", "tooltipHeaderClicked"] }, { kind: "directive", type: OutsideClickDirective, selector: "[cngOutsideClick]", outputs: ["cngOutsideClick"] }, { kind: "directive", type: WindowResizeDirective, selector: "[cngWindowResize]", inputs: ["debounce", "includeFirst"], outputs: ["cngWindowResize"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ComboChartComponent, isStandalone: false, selector: "clr-combo-chart", inputs: { barSeries: { classPropertyName: "barSeries", publicName: "barSeries", isSignal: true, isRequired: false, transformFunction: null }, lineSeries: { classPropertyName: "lineSeries", publicName: "lineSeries", isSignal: true, isRequired: false, transformFunction: null }, tooltipOrientation: { classPropertyName: "tooltipOrientation", publicName: "tooltipOrientation", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, tooltipPercentOfTotal: { classPropertyName: "tooltipPercentOfTotal", publicName: "tooltipPercentOfTotal", isSignal: true, isRequired: false, transformFunction: null }, xAxisLabel: { classPropertyName: "xAxisLabel", publicName: "xAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yAxisLabel: { classPropertyName: "yAxisLabel", publicName: "yAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yLineAxisLabel: { classPropertyName: "yLineAxisLabel", publicName: "yLineAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yBarMax: { classPropertyName: "yBarMax", publicName: "yBarMax", isSignal: true, isRequired: false, transformFunction: null }, yLineMax: { classPropertyName: "yLineMax", publicName: "yLineMax", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\" data-testid=\"combo-chart\">\n  <div\n    class=\"chart-area\"\n    data-testid=\"combo-chart-area\"\n    #container\n    (cngWindowResize)=\"updateChart()\"\n    [class.pt-3]=\"alertMessageAndType()\"\n  >\n    <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      data-testid=\"combo-chart-tooltip\"\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"selectedItem()?.color\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"\n          valueClicked.emit({\n            seriesKey: selectedItem().seriesKey,\n            seriesLabel: selectedItem().seriesLabel,\n            seriesType: selectedItem().seriesType,\n            x: selectedItem().x,\n            xLabel: selectedItem().xLabel,\n            value: selectedItem().value,\n          })\n        \"\n    >\n      <ng-container ngProjectAs=\"cng-title\">\n        ({{ selectedItem().value }}) {{ selectedItem().xLabel || selectedItem().x }}\n      </ng-container>\n\n      <p class=\"mt-0\" data-testid=\"combo-chart-tooltip-series\">\n        <strong>{{ selectedItem().seriesLabel }}:</strong>\n        {{ selectedItem().value }}\n      </p>\n      <p class=\"mt-0\" data-testid=\"combo-chart-tooltip-percentage\">\n        {{ (100 * selectedItem().value) / selectedItem().total | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n    </cng-chart-tooltip>\n    } @if (loading() || !hasData()) {\n    <cng-bar-chart-skeleton\n      data-testid=\"combo-chart-skeleton\"\n      orientation=\"vertical\"\n      [skeletonType]=\"loading() ? 'loading' : 'placeholder'\"\n    />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay\n      data-testid=\"combo-chart-alert-overlay\"\n      [alertType]=\"alertMessageAndType()[1]\"\n      [alertMessage]=\"alertMessageAndType()[0]\"\n    />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length) {\n  <cng-chart-legend data-testid=\"combo-chart-legend\" [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && hasData()) {\n  <cng-chart-export-button\n    data-testid=\"combo-chart-export\"\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.combo-line{pointer-events:none}.combo-dot{transition:r .1s ease}\n"], dependencies: [{ kind: "component", type: ChartAlertOverlayComponent, selector: "cng-chart-alert-overlay", inputs: ["alertMessage", "alertType"] }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { kind: "component", type: ChartLegendComponent, selector: "cng-chart-legend", inputs: ["items"] }, { kind: "component", type: ChartSkeletonComponent, selector: "cng-bar-chart-skeleton", inputs: ["skeletonType", "orientation"] }, { kind: "component", type: ChartTooltipComponent, selector: "cng-chart-tooltip", inputs: ["tooltipPosition", "tooltipOrientation", "squareColor", "tooltipClickable"], outputs: ["tooltipClosed", "tooltipHeaderClicked"] }, { kind: "directive", type: OutsideClickDirective, selector: "[cngOutsideClick]", outputs: ["cngOutsideClick"] }, { kind: "directive", type: WindowResizeDirective, selector: "[cngWindowResize]", inputs: ["debounce", "includeFirst"], outputs: ["cngWindowResize"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ComboChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-combo-chart', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"chart-container\">\n  <div class=\"chart-area\" #container (cngWindowResize)=\"updateChart()\" [class.pt-3]=\"alertMessageAndType()\">\n    <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"selectedItem()?.color\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"\n          valueClicked.emit({\n            seriesKey: selectedItem().seriesKey,\n            seriesLabel: selectedItem().seriesLabel,\n            seriesType: selectedItem().seriesType,\n            x: selectedItem().x,\n            xLabel: selectedItem().xLabel,\n            value: selectedItem().value,\n          })\n        \"\n    >\n      <ng-container ngProjectAs=\"cng-title\">\n        ({{ selectedItem().value }}) {{ selectedItem().xLabel || selectedItem().x }}\n      </ng-container>\n\n      <p class=\"mt-0\">\n        <strong>{{ selectedItem().seriesLabel }}:</strong>\n        {{ selectedItem().value }}\n      </p>\n      <p class=\"mt-0\">\n        {{ (100 * selectedItem().value) / selectedItem().total | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n    </cng-chart-tooltip>\n    } @if (loading() || !hasData()) {\n    <cng-bar-chart-skeleton orientation=\"vertical\" [skeletonType]=\"loading() ? 'loading' : 'placeholder'\" />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay [alertType]=\"alertMessageAndType()[1]\" [alertMessage]=\"alertMessageAndType()[0]\" />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length) {\n  <cng-chart-legend [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && hasData()) {\n  <cng-chart-export-button\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.combo-line{pointer-events:none}.combo-dot{transition:r .1s ease}\n"] }]
+            args: [{ selector: 'clr-combo-chart', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"chart-container\" data-testid=\"combo-chart\">\n  <div\n    class=\"chart-area\"\n    data-testid=\"combo-chart-area\"\n    #container\n    (cngWindowResize)=\"updateChart()\"\n    [class.pt-3]=\"alertMessageAndType()\"\n  >\n    <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      data-testid=\"combo-chart-tooltip\"\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"selectedItem()?.color\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"\n          valueClicked.emit({\n            seriesKey: selectedItem().seriesKey,\n            seriesLabel: selectedItem().seriesLabel,\n            seriesType: selectedItem().seriesType,\n            x: selectedItem().x,\n            xLabel: selectedItem().xLabel,\n            value: selectedItem().value,\n          })\n        \"\n    >\n      <ng-container ngProjectAs=\"cng-title\">\n        ({{ selectedItem().value }}) {{ selectedItem().xLabel || selectedItem().x }}\n      </ng-container>\n\n      <p class=\"mt-0\" data-testid=\"combo-chart-tooltip-series\">\n        <strong>{{ selectedItem().seriesLabel }}:</strong>\n        {{ selectedItem().value }}\n      </p>\n      <p class=\"mt-0\" data-testid=\"combo-chart-tooltip-percentage\">\n        {{ (100 * selectedItem().value) / selectedItem().total | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n    </cng-chart-tooltip>\n    } @if (loading() || !hasData()) {\n    <cng-bar-chart-skeleton\n      data-testid=\"combo-chart-skeleton\"\n      orientation=\"vertical\"\n      [skeletonType]=\"loading() ? 'loading' : 'placeholder'\"\n    />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay\n      data-testid=\"combo-chart-alert-overlay\"\n      [alertType]=\"alertMessageAndType()[1]\"\n      [alertMessage]=\"alertMessageAndType()[0]\"\n    />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length) {\n  <cng-chart-legend data-testid=\"combo-chart-legend\" [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && hasData()) {\n  <cng-chart-export-button\n    data-testid=\"combo-chart-export\"\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.combo-line{pointer-events:none}.combo-dot{transition:r .1s ease}\n"] }]
         }], propDecorators: { barSeries: [{ type: i0.Input, args: [{ isSignal: true, alias: "barSeries", required: false }] }], lineSeries: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineSeries", required: false }] }], tooltipOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipOrientation", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], exportButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportButtonTitle", required: false }] }], exportFilename: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFilename", required: false }] }], noItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsMessage", required: false }] }], tooltipPercentOfTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPercentOfTotal", required: false }] }], xAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAxisLabel", required: false }] }], yAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxisLabel", required: false }] }], yLineAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yLineAxisLabel", required: false }] }], yBarMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "yBarMax", required: false }] }], yLineMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "yLineMax", required: false }] }], valueClicked: [{ type: i0.Output, args: ["valueClicked"] }] } });
 
 class PieChartComponent extends ChartBase {
@@ -1913,11 +2284,11 @@ class PieChartComponent extends ChartBase {
         this.selectedItem.set(d.data);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PieChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PieChartComponent, isStandalone: false, selector: "clr-pie-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, donut: { classPropertyName: "donut", publicName: "donut", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, tooltipOrientation: { classPropertyName: "tooltipOrientation", publicName: "tooltipOrientation", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, tooltipPercentOfTotal: { classPropertyName: "tooltipPercentOfTotal", publicName: "tooltipPercentOfTotal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\">\n  <div class=\"chart-area\" #container (cngWindowResize)=\"updateChart()\" [class.pt-3]=\"alertMessageAndType()\">\n    <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"selectedItem()?.color\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"\n          valueClicked.emit({\n            key: selectedItem().key,\n            label: selectedItem().fullLabel || selectedItem().label,\n            value: selectedItem().value,\n          })\n        \"\n    >\n      <ng-container ngProjectAs=\"cng-title\">\n        ({{ selectedItem().value }}) {{ selectedItem().fullLabel || selectedItem().label }}\n      </ng-container>\n\n      <p class=\"mt-0\">\n        {{ (100 * selectedItem().value) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n    </cng-chart-tooltip>\n    } @if (loading() || !hasData()) {\n    <cng-bar-chart-skeleton orientation=\"vertical\" [skeletonType]=\"loading() ? 'loading' : 'placeholder'\" />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay [alertType]=\"alertMessageAndType()[1]\" [alertMessage]=\"alertMessageAndType()[0]\" />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length) {\n  <cng-chart-legend [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && hasData()) {\n  <cng-chart-export-button\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.slice{transition:d .15s ease}.label-value{font-size:11px;font-weight:600;fill:#fff}.label-percent{font-size:10px;fill:#ffffffe6}.center-label{font-size:1.4rem;font-weight:600;fill:var(--cds-global-color-gray-900, #21333b)}.center-sublabel{font-size:.65rem;fill:var(--cds-global-color-construction-400, #666);text-transform:uppercase;letter-spacing:.05em}\n"], dependencies: [{ kind: "component", type: ChartAlertOverlayComponent, selector: "cng-chart-alert-overlay", inputs: ["alertMessage", "alertType"] }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { kind: "component", type: ChartLegendComponent, selector: "cng-chart-legend", inputs: ["items"] }, { kind: "component", type: ChartSkeletonComponent, selector: "cng-bar-chart-skeleton", inputs: ["skeletonType", "orientation"] }, { kind: "component", type: ChartTooltipComponent, selector: "cng-chart-tooltip", inputs: ["tooltipPosition", "tooltipOrientation", "squareColor", "tooltipClickable"], outputs: ["tooltipClosed", "tooltipHeaderClicked"] }, { kind: "directive", type: OutsideClickDirective, selector: "[cngOutsideClick]", outputs: ["cngOutsideClick"] }, { kind: "directive", type: WindowResizeDirective, selector: "[cngWindowResize]", inputs: ["debounce", "includeFirst"], outputs: ["cngWindowResize"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PieChartComponent, isStandalone: false, selector: "clr-pie-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, donut: { classPropertyName: "donut", publicName: "donut", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, tooltipOrientation: { classPropertyName: "tooltipOrientation", publicName: "tooltipOrientation", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, tooltipPercentOfTotal: { classPropertyName: "tooltipPercentOfTotal", publicName: "tooltipPercentOfTotal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\" data-testid=\"pie-chart\">\n  <div\n    class=\"chart-area\"\n    data-testid=\"pie-chart-area\"\n    #container\n    (cngWindowResize)=\"updateChart()\"\n    [class.pt-3]=\"alertMessageAndType()\"\n  >\n    <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      data-testid=\"pie-chart-tooltip\"\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"selectedItem()?.color\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"\n          valueClicked.emit({\n            key: selectedItem().key,\n            label: selectedItem().fullLabel || selectedItem().label,\n            value: selectedItem().value,\n          })\n        \"\n    >\n      <ng-container ngProjectAs=\"cng-title\">\n        ({{ selectedItem().value }}) {{ selectedItem().fullLabel || selectedItem().label }}\n      </ng-container>\n\n      <p class=\"mt-0\" data-testid=\"pie-chart-tooltip-percentage\">\n        {{ (100 * selectedItem().value) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n    </cng-chart-tooltip>\n    } @if (loading() || !hasData()) {\n    <cng-bar-chart-skeleton\n      data-testid=\"pie-chart-skeleton\"\n      orientation=\"vertical\"\n      [skeletonType]=\"loading() ? 'loading' : 'placeholder'\"\n    />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay\n      data-testid=\"pie-chart-alert-overlay\"\n      [alertType]=\"alertMessageAndType()[1]\"\n      [alertMessage]=\"alertMessageAndType()[0]\"\n    />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length) {\n  <cng-chart-legend data-testid=\"pie-chart-legend\" [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && hasData()) {\n  <cng-chart-export-button\n    data-testid=\"pie-chart-export\"\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.slice{transition:d .15s ease}.label-value{font-size:11px;font-weight:600;fill:#fff}.label-percent{font-size:10px;fill:#ffffffe6}.center-label{font-size:1.4rem;font-weight:600;fill:var(--cds-global-color-gray-900, #21333b)}.center-sublabel{font-size:.65rem;fill:var(--cds-global-color-construction-400, #666);text-transform:uppercase;letter-spacing:.05em}\n"], dependencies: [{ kind: "component", type: ChartAlertOverlayComponent, selector: "cng-chart-alert-overlay", inputs: ["alertMessage", "alertType"] }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { kind: "component", type: ChartLegendComponent, selector: "cng-chart-legend", inputs: ["items"] }, { kind: "component", type: ChartSkeletonComponent, selector: "cng-bar-chart-skeleton", inputs: ["skeletonType", "orientation"] }, { kind: "component", type: ChartTooltipComponent, selector: "cng-chart-tooltip", inputs: ["tooltipPosition", "tooltipOrientation", "squareColor", "tooltipClickable"], outputs: ["tooltipClosed", "tooltipHeaderClicked"] }, { kind: "directive", type: OutsideClickDirective, selector: "[cngOutsideClick]", outputs: ["cngOutsideClick"] }, { kind: "directive", type: WindowResizeDirective, selector: "[cngWindowResize]", inputs: ["debounce", "includeFirst"], outputs: ["cngWindowResize"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PieChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-pie-chart', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"chart-container\">\n  <div class=\"chart-area\" #container (cngWindowResize)=\"updateChart()\" [class.pt-3]=\"alertMessageAndType()\">\n    <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"selectedItem()?.color\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"\n          valueClicked.emit({\n            key: selectedItem().key,\n            label: selectedItem().fullLabel || selectedItem().label,\n            value: selectedItem().value,\n          })\n        \"\n    >\n      <ng-container ngProjectAs=\"cng-title\">\n        ({{ selectedItem().value }}) {{ selectedItem().fullLabel || selectedItem().label }}\n      </ng-container>\n\n      <p class=\"mt-0\">\n        {{ (100 * selectedItem().value) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n    </cng-chart-tooltip>\n    } @if (loading() || !hasData()) {\n    <cng-bar-chart-skeleton orientation=\"vertical\" [skeletonType]=\"loading() ? 'loading' : 'placeholder'\" />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay [alertType]=\"alertMessageAndType()[1]\" [alertMessage]=\"alertMessageAndType()[0]\" />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length) {\n  <cng-chart-legend [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && hasData()) {\n  <cng-chart-export-button\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.slice{transition:d .15s ease}.label-value{font-size:11px;font-weight:600;fill:#fff}.label-percent{font-size:10px;fill:#ffffffe6}.center-label{font-size:1.4rem;font-weight:600;fill:var(--cds-global-color-gray-900, #21333b)}.center-sublabel{font-size:.65rem;fill:var(--cds-global-color-construction-400, #666);text-transform:uppercase;letter-spacing:.05em}\n"] }]
+            args: [{ selector: 'clr-pie-chart', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"chart-container\" data-testid=\"pie-chart\">\n  <div\n    class=\"chart-area\"\n    data-testid=\"pie-chart-area\"\n    #container\n    (cngWindowResize)=\"updateChart()\"\n    [class.pt-3]=\"alertMessageAndType()\"\n  >\n    <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      data-testid=\"pie-chart-tooltip\"\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"selectedItem()?.color\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"\n          valueClicked.emit({\n            key: selectedItem().key,\n            label: selectedItem().fullLabel || selectedItem().label,\n            value: selectedItem().value,\n          })\n        \"\n    >\n      <ng-container ngProjectAs=\"cng-title\">\n        ({{ selectedItem().value }}) {{ selectedItem().fullLabel || selectedItem().label }}\n      </ng-container>\n\n      <p class=\"mt-0\" data-testid=\"pie-chart-tooltip-percentage\">\n        {{ (100 * selectedItem().value) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n    </cng-chart-tooltip>\n    } @if (loading() || !hasData()) {\n    <cng-bar-chart-skeleton\n      data-testid=\"pie-chart-skeleton\"\n      orientation=\"vertical\"\n      [skeletonType]=\"loading() ? 'loading' : 'placeholder'\"\n    />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay\n      data-testid=\"pie-chart-alert-overlay\"\n      [alertType]=\"alertMessageAndType()[1]\"\n      [alertMessage]=\"alertMessageAndType()[0]\"\n    />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length) {\n  <cng-chart-legend data-testid=\"pie-chart-legend\" [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && hasData()) {\n  <cng-chart-export-button\n    data-testid=\"pie-chart-export\"\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.slice{transition:d .15s ease}.label-value{font-size:11px;font-weight:600;fill:#fff}.label-percent{font-size:10px;fill:#ffffffe6}.center-label{font-size:1.4rem;font-weight:600;fill:var(--cds-global-color-gray-900, #21333b)}.center-sublabel{font-size:.65rem;fill:var(--cds-global-color-construction-400, #666);text-transform:uppercase;letter-spacing:.05em}\n"] }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], donut: [{ type: i0.Input, args: [{ isSignal: true, alias: "donut", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], exportButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportButtonTitle", required: false }] }], exportFilename: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFilename", required: false }] }], tooltipOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipOrientation", required: false }] }], noItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsMessage", required: false }] }], tooltipPercentOfTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPercentOfTotal", required: false }] }], valueClicked: [{ type: i0.Output, args: ["valueClicked"] }] } });
 
 /*
@@ -2519,11 +2890,11 @@ class FunnelChartComponent extends ChartBase {
         return Math.round(factor * value) / factor;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FunnelChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FunnelChartComponent, isStandalone: false, selector: "clr-funnel-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, textSize: { classPropertyName: "textSize", publicName: "textSize", isSignal: true, isRequired: false, transformFunction: null }, lineTextPadding: { classPropertyName: "lineTextPadding", publicName: "lineTextPadding", isSignal: true, isRequired: false, transformFunction: null }, barGap: { classPropertyName: "barGap", publicName: "barGap", isSignal: true, isRequired: false, transformFunction: null }, sideLineVerticalPadding: { classPropertyName: "sideLineVerticalPadding", publicName: "sideLineVerticalPadding", isSignal: true, isRequired: false, transformFunction: null }, minLineSize: { classPropertyName: "minLineSize", publicName: "minLineSize", isSignal: true, isRequired: false, transformFunction: null }, barToSpacerRatio: { classPropertyName: "barToSpacerRatio", publicName: "barToSpacerRatio", isSignal: true, isRequired: false, transformFunction: null }, middleLineVerticalPadding: { classPropertyName: "middleLineVerticalPadding", publicName: "middleLineVerticalPadding", isSignal: true, isRequired: false, transformFunction: null }, barColor: { classPropertyName: "barColor", publicName: "barColor", isSignal: true, isRequired: false, transformFunction: null }, spacerColor: { classPropertyName: "spacerColor", publicName: "spacerColor", isSignal: true, isRequired: false, transformFunction: null }, chartLabels: { classPropertyName: "chartLabels", publicName: "chartLabels", isSignal: true, isRequired: false, transformFunction: null }, sectionColors: { classPropertyName: "sectionColors", publicName: "sectionColors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"funnel-container\" #container (cngWindowResize)=\"updateChart()\">\n  <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n  @if (!loading()) { @for (pos of sectionTooltips(); track pos.key) {\n  <clr-signpost [style.left.px]=\"pos.x\" [style.top.px]=\"pos.y\">\n    <cds-icon clrSignpostTrigger shape=\"info-circle\" size=\"18\" />\n    <clr-signpost-content clrPosition=\"bottom-left\">\n      <p class=\"mt-0\">{{ pos.description }}</p>\n    </clr-signpost-content>\n  </clr-signpost>\n  } } @if (loading()) {\n  <cng-bar-chart-skeleton orientation=\"vertical\" skeletonType=\"loading\" />\n  } @if (tooltipPosition()) { @if (orientation() === 'centered') {\n\n  <!-- \u2500\u2500 Centered mode tooltip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <cng-chart-tooltip\n    [tooltipPosition]=\"tooltipPosition()\"\n    tooltipOrientation=\"bottom\"\n    [squareColor]=\"selectedSpacerItem() ? centeredSpacerCssColor() : centeredBarCssColor()\"\n    [tooltipClickable]=\"!selectedSpacerItem()\"\n    (tooltipClosed)=\"resetTooltip()\"\n    (cngOutsideClick)=\"resetTooltip()\"\n    (tooltipHeaderClicked)=\"\n          selectedItem() && valueClicked.emit({\n            value: selectedItem().value,\n            label: selectedItem().label,\n            key: selectedItem().key,\n            section: undefined,\n          })\n        \"\n  >\n    <ng-container ngProjectAs=\"cng-title\">\n      @if (selectedSpacerItem()) {\n      {{ data()[selectedSpacerItem().index].label }} \u2192 {{ data()[selectedSpacerItem().index + 1].label }} } @else { ({{\n        selectedItem().value\n      }}) {{ selectedItem().label }}\n      }\n    </ng-container>\n\n    @if (selectedSpacerItem()) {\n    <p class=\"mt-0\">\n      <strong\n        >{{ data()[selectedSpacerItem().index].value }} \u2192 {{ data()[selectedSpacerItem().index + 1].value }}</strong\n      >\n    </p>\n    @for (section of (data()[selectedSpacerItem().index].sections ?? []); track section.key) { @let drillable =\n    section.value > 0;\n    <p class=\"tooltip-row mt-0 mt-0-5 d-flex\">\n      <strong>{{ section.label }}:&nbsp;</strong>\n      <span\n        class=\"row-right\"\n        [class.has-more-info]=\"drillable\"\n        (click)=\"\n                  drillable && valueClicked.emit({\n                    value: section.value,\n                    label: data()[selectedSpacerItem().index].label + ': ' + section.label,\n                    key: data()[selectedSpacerItem().index].key,\n                    section: section.key,\n                  })\n                \"\n        >{{ section.value }}</span\n      >\n      &nbsp;({{ pct(section.value, data()[selectedSpacerItem().index].value) }}%)\n    </p>\n    } } @else {\n    <p class=\"mt-0\">{{ pct(selectedItem().value, total()) }}% {{ resolvedChartLabels().all }}</p>\n    }\n  </cng-chart-tooltip>\n\n  } @else {\n\n  <!-- \u2500\u2500 Default mode tooltip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <cng-chart-tooltip\n    [tooltipPosition]=\"tooltipPosition()\"\n    tooltipOrientation=\"bottom\"\n    [squareColor]=\"undefined\"\n    [tooltipClickable]=\"false\"\n    (tooltipClosed)=\"resetTooltip()\"\n    (cngOutsideClick)=\"resetTooltip()\"\n  >\n    <ng-container ngProjectAs=\"cng-title\">{{ selectedItemLabel() }}</ng-container>\n    @for (section of selectedItem().sections; track section.key) { @let drillable = section.value > 0;\n    <p class=\"tooltip-row mt-0 mt-0-5 d-flex\">\n      <span>\n        <div class=\"color-square mr-0-5\" [style.background-color]=\"section.cssColor\"></div>\n      </span>\n      <strong>{{ section.label }}:&nbsp;</strong>\n      <span\n        class=\"row-right\"\n        [class.has-more-info]=\"drillable\"\n        (click)=\"\n                drillable && valueClicked.emit({\n                  value: section.value,\n                  label: selectedItemLabel() + ': ' + section.label,\n                  key: selectedItem().key,\n                  section: section.key,\n                })\n              \"\n        >{{ section.value }}</span\n      >\n      &nbsp;({{ section.percentage }}%)\n    </p>\n    }\n\n    <p class=\"tooltip-row mt-0-5\">\n      <strong>{{ resolvedChartLabels().total }}:&nbsp;</strong>\n      <span\n        class=\"has-more-info\"\n        (click)=\"\n          valueClicked.emit({\n            value: selectedItem().value,\n            label: selectedItemLabel(),\n            key: selectedItem().key,\n            section: undefined\n          })\n        \"\n        >{{ selectedItem().value }}</span\n      >\n    </p>\n\n    <ng-container ngProjectAs=\"cng-footer\">\n      <p class=\"tooltip-row mt-0\">\n        <strong>{{ resolvedChartLabels().all }}:&nbsp;</strong>\n        <span class=\"row-right\">{{ total() }}</span>\n      </p>\n    </ng-container>\n  </cng-chart-tooltip>\n\n  } } @if (showExportButton() && !loading() && hasData()) {\n  <cng-chart-export-button\n    class=\"funnel-export-btn\"\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.funnel-container{height:100%;width:100%;max-width:1400px;margin:auto;position:relative}svg{width:100%;height:100%}clr-signpost{position:absolute!important}.tooltip-row{display:flex;justify-content:space-between;align-items:center}.row-right{margin-left:auto}.funnel-export-btn{position:absolute;bottom:0;right:0;opacity:0;pointer-events:none;transition:opacity .2s ease}.funnel-container:hover .funnel-export-btn{opacity:1;pointer-events:auto}\n"], dependencies: [{ kind: "component", type: i1.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "component", type: i1.ClrSignpost, selector: "clr-signpost", inputs: ["clrSignpostTriggerAriaLabel", "clrSignpostHideTrigger"] }, { kind: "component", type: i1.ClrSignpostContent, selector: "clr-signpost-content", inputs: ["clrSignpostCloseAriaLabel", "clrPosition"] }, { kind: "directive", type: i1.ClrSignpostTrigger, selector: "[clrSignpostTrigger]" }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { kind: "component", type: ChartSkeletonComponent, selector: "cng-bar-chart-skeleton", inputs: ["skeletonType", "orientation"] }, { kind: "component", type: ChartTooltipComponent, selector: "cng-chart-tooltip", inputs: ["tooltipPosition", "tooltipOrientation", "squareColor", "tooltipClickable"], outputs: ["tooltipClosed", "tooltipHeaderClicked"] }, { kind: "directive", type: OutsideClickDirective, selector: "[cngOutsideClick]", outputs: ["cngOutsideClick"] }, { kind: "directive", type: WindowResizeDirective, selector: "[cngWindowResize]", inputs: ["debounce", "includeFirst"], outputs: ["cngWindowResize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FunnelChartComponent, isStandalone: false, selector: "clr-funnel-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, textSize: { classPropertyName: "textSize", publicName: "textSize", isSignal: true, isRequired: false, transformFunction: null }, lineTextPadding: { classPropertyName: "lineTextPadding", publicName: "lineTextPadding", isSignal: true, isRequired: false, transformFunction: null }, barGap: { classPropertyName: "barGap", publicName: "barGap", isSignal: true, isRequired: false, transformFunction: null }, sideLineVerticalPadding: { classPropertyName: "sideLineVerticalPadding", publicName: "sideLineVerticalPadding", isSignal: true, isRequired: false, transformFunction: null }, minLineSize: { classPropertyName: "minLineSize", publicName: "minLineSize", isSignal: true, isRequired: false, transformFunction: null }, barToSpacerRatio: { classPropertyName: "barToSpacerRatio", publicName: "barToSpacerRatio", isSignal: true, isRequired: false, transformFunction: null }, middleLineVerticalPadding: { classPropertyName: "middleLineVerticalPadding", publicName: "middleLineVerticalPadding", isSignal: true, isRequired: false, transformFunction: null }, barColor: { classPropertyName: "barColor", publicName: "barColor", isSignal: true, isRequired: false, transformFunction: null }, spacerColor: { classPropertyName: "spacerColor", publicName: "spacerColor", isSignal: true, isRequired: false, transformFunction: null }, chartLabels: { classPropertyName: "chartLabels", publicName: "chartLabels", isSignal: true, isRequired: false, transformFunction: null }, sectionColors: { classPropertyName: "sectionColors", publicName: "sectionColors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"funnel-container\" data-testid=\"funnel-chart\" #container (cngWindowResize)=\"updateChart()\">\n  <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n  @if (!loading()) {\n    @for (pos of sectionTooltips(); track pos.key) {\n      <clr-signpost\n        [attr.data-testid]=\"'funnel-chart-section-signpost-' + pos.key\"\n        [style.left.px]=\"pos.x\"\n        [style.top.px]=\"pos.y\"\n      >\n        <cds-icon\n          clrSignpostTrigger\n          [attr.data-testid]=\"'funnel-chart-section-signpost-trigger-' + pos.key\"\n          shape=\"info-circle\"\n          size=\"18\"\n        />\n        <clr-signpost-content\n          clrPosition=\"bottom-left\"\n          [attr.data-testid]=\"'funnel-chart-section-signpost-content-' + pos.key\"\n        >\n          <p class=\"mt-0\" [attr.data-testid]=\"'funnel-chart-section-description-' + pos.key\">{{ pos.description }}</p>\n        </clr-signpost-content>\n      </clr-signpost>\n    }\n  }\n  @if (loading()) {\n    <cng-bar-chart-skeleton data-testid=\"funnel-chart-skeleton\" orientation=\"vertical\" skeletonType=\"loading\" />\n  }\n  @if (tooltipPosition()) {\n    @if (orientation() === 'centered') {\n      <!-- \u2500\u2500 Centered mode tooltip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <cng-chart-tooltip\n        data-testid=\"funnel-chart-centered-tooltip\"\n        [tooltipPosition]=\"tooltipPosition()\"\n        tooltipOrientation=\"bottom\"\n        [squareColor]=\"selectedSpacerItem() ? centeredSpacerCssColor() : centeredBarCssColor()\"\n        [tooltipClickable]=\"!selectedSpacerItem()\"\n        (tooltipClosed)=\"resetTooltip()\"\n        (cngOutsideClick)=\"resetTooltip()\"\n        (tooltipHeaderClicked)=\"\n          selectedItem() &&\n            valueClicked.emit({\n              value: selectedItem().value,\n              label: selectedItem().label,\n              key: selectedItem().key,\n              section: undefined,\n            })\n        \"\n      >\n        <ng-container ngProjectAs=\"cng-title\">\n          @if (selectedSpacerItem()) {\n            {{ data()[selectedSpacerItem().index].label }} \u2192 {{ data()[selectedSpacerItem().index + 1].label }}\n          } @else {\n            ({{ selectedItem().value }}) {{ selectedItem().label }}\n          }\n        </ng-container>\n\n        @if (selectedSpacerItem()) {\n          <p class=\"mt-0\" data-testid=\"funnel-chart-centered-tooltip-transition\">\n            <strong\n              >{{ data()[selectedSpacerItem().index].value }} \u2192\n              {{ data()[selectedSpacerItem().index + 1].value }}</strong\n            >\n          </p>\n          @for (section of data()[selectedSpacerItem().index].sections ?? []; track section.key) {\n            @let drillable = section.value > 0;\n            <p\n              class=\"tooltip-row mt-0 mt-0-5 d-flex\"\n              [attr.data-testid]=\"'funnel-chart-centered-tooltip-section-' + section.key\"\n            >\n              <strong>{{ section.label }}:&nbsp;</strong>\n              <span\n                class=\"row-right\"\n                [attr.data-testid]=\"'funnel-chart-centered-tooltip-section-value-' + section.key\"\n                [class.has-more-info]=\"drillable\"\n                (click)=\"\n                  drillable &&\n                    valueClicked.emit({\n                      value: section.value,\n                      label: data()[selectedSpacerItem().index].label + ': ' + section.label,\n                      key: data()[selectedSpacerItem().index].key,\n                      section: section.key,\n                    })\n                \"\n                >{{ section.value }}</span\n              >\n              &nbsp;({{ pct(section.value, data()[selectedSpacerItem().index].value) }}%)\n            </p>\n          }\n        } @else {\n          <p class=\"mt-0\" data-testid=\"funnel-chart-centered-tooltip-percentage\">\n            {{ pct(selectedItem().value, total()) }}% {{ resolvedChartLabels().all }}\n          </p>\n        }\n      </cng-chart-tooltip>\n    } @else {\n      <!-- \u2500\u2500 Default mode tooltip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <cng-chart-tooltip\n        data-testid=\"funnel-chart-default-tooltip\"\n        [tooltipPosition]=\"tooltipPosition()\"\n        tooltipOrientation=\"bottom\"\n        [squareColor]=\"undefined\"\n        [tooltipClickable]=\"false\"\n        (tooltipClosed)=\"resetTooltip()\"\n        (cngOutsideClick)=\"resetTooltip()\"\n      >\n        <ng-container ngProjectAs=\"cng-title\">{{ selectedItemLabel() }}</ng-container>\n        @for (section of selectedItem().sections; track section.key) {\n          @let drillable = section.value > 0;\n          <p\n            class=\"tooltip-row mt-0 mt-0-5 d-flex\"\n            [attr.data-testid]=\"'funnel-chart-default-tooltip-section-' + section.key\"\n          >\n            <span>\n              <div class=\"color-square mr-0-5\" [style.background-color]=\"section.cssColor\"></div>\n            </span>\n            <strong>{{ section.label }}:&nbsp;</strong>\n            <span\n              class=\"row-right\"\n              [attr.data-testid]=\"'funnel-chart-default-tooltip-section-value-' + section.key\"\n              [class.has-more-info]=\"drillable\"\n              (click)=\"\n                drillable &&\n                  valueClicked.emit({\n                    value: section.value,\n                    label: selectedItemLabel() + ': ' + section.label,\n                    key: selectedItem().key,\n                    section: section.key,\n                  })\n              \"\n              >{{ section.value }}</span\n            >\n            &nbsp;({{ section.percentage }}%)\n          </p>\n        }\n\n        <p class=\"tooltip-row mt-0-5\" data-testid=\"funnel-chart-default-tooltip-total\">\n          <strong>{{ resolvedChartLabels().total }}:&nbsp;</strong>\n          <span\n            class=\"has-more-info\"\n            data-testid=\"funnel-chart-default-tooltip-total-value\"\n            (click)=\"\n              valueClicked.emit({\n                value: selectedItem().value,\n                label: selectedItemLabel(),\n                key: selectedItem().key,\n                section: undefined,\n              })\n            \"\n            >{{ selectedItem().value }}</span\n          >\n        </p>\n\n        <ng-container ngProjectAs=\"cng-footer\">\n          <p class=\"tooltip-row mt-0\" data-testid=\"funnel-chart-default-tooltip-all\">\n            <strong>{{ resolvedChartLabels().all }}:&nbsp;</strong>\n            <span class=\"row-right\" data-testid=\"funnel-chart-default-tooltip-all-value\">{{ total() }}</span>\n          </p>\n        </ng-container>\n      </cng-chart-tooltip>\n    }\n  }\n  @if (showExportButton() && !loading() && hasData()) {\n    <cng-chart-export-button\n      class=\"funnel-export-btn\"\n      data-testid=\"funnel-chart-export\"\n      [svgRef]=\"svgElement()\"\n      [filename]=\"exportFilename()\"\n      [buttonTitle]=\"exportButtonTitle()\"\n    />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.funnel-container{height:100%;width:100%;max-width:1400px;margin:auto;position:relative}svg{width:100%;height:100%}clr-signpost{position:absolute!important}.tooltip-row{display:flex;justify-content:space-between;align-items:center}.row-right{margin-left:auto}.funnel-export-btn{position:absolute;bottom:0;right:0;opacity:0;pointer-events:none;transition:opacity .2s ease}.funnel-container:hover .funnel-export-btn{opacity:1;pointer-events:auto}\n"], dependencies: [{ kind: "component", type: i1.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "component", type: i1.ClrSignpost, selector: "clr-signpost", inputs: ["clrSignpostTriggerAriaLabel", "clrSignpostHideTrigger"] }, { kind: "component", type: i1.ClrSignpostContent, selector: "clr-signpost-content", inputs: ["clrSignpostCloseAriaLabel", "clrPosition"] }, { kind: "directive", type: i1.ClrSignpostTrigger, selector: "[clrSignpostTrigger]" }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { kind: "component", type: ChartSkeletonComponent, selector: "cng-bar-chart-skeleton", inputs: ["skeletonType", "orientation"] }, { kind: "component", type: ChartTooltipComponent, selector: "cng-chart-tooltip", inputs: ["tooltipPosition", "tooltipOrientation", "squareColor", "tooltipClickable"], outputs: ["tooltipClosed", "tooltipHeaderClicked"] }, { kind: "directive", type: OutsideClickDirective, selector: "[cngOutsideClick]", outputs: ["cngOutsideClick"] }, { kind: "directive", type: WindowResizeDirective, selector: "[cngWindowResize]", inputs: ["debounce", "includeFirst"], outputs: ["cngWindowResize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FunnelChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-funnel-chart', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"funnel-container\" #container (cngWindowResize)=\"updateChart()\">\n  <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n  @if (!loading()) { @for (pos of sectionTooltips(); track pos.key) {\n  <clr-signpost [style.left.px]=\"pos.x\" [style.top.px]=\"pos.y\">\n    <cds-icon clrSignpostTrigger shape=\"info-circle\" size=\"18\" />\n    <clr-signpost-content clrPosition=\"bottom-left\">\n      <p class=\"mt-0\">{{ pos.description }}</p>\n    </clr-signpost-content>\n  </clr-signpost>\n  } } @if (loading()) {\n  <cng-bar-chart-skeleton orientation=\"vertical\" skeletonType=\"loading\" />\n  } @if (tooltipPosition()) { @if (orientation() === 'centered') {\n\n  <!-- \u2500\u2500 Centered mode tooltip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <cng-chart-tooltip\n    [tooltipPosition]=\"tooltipPosition()\"\n    tooltipOrientation=\"bottom\"\n    [squareColor]=\"selectedSpacerItem() ? centeredSpacerCssColor() : centeredBarCssColor()\"\n    [tooltipClickable]=\"!selectedSpacerItem()\"\n    (tooltipClosed)=\"resetTooltip()\"\n    (cngOutsideClick)=\"resetTooltip()\"\n    (tooltipHeaderClicked)=\"\n          selectedItem() && valueClicked.emit({\n            value: selectedItem().value,\n            label: selectedItem().label,\n            key: selectedItem().key,\n            section: undefined,\n          })\n        \"\n  >\n    <ng-container ngProjectAs=\"cng-title\">\n      @if (selectedSpacerItem()) {\n      {{ data()[selectedSpacerItem().index].label }} \u2192 {{ data()[selectedSpacerItem().index + 1].label }} } @else { ({{\n        selectedItem().value\n      }}) {{ selectedItem().label }}\n      }\n    </ng-container>\n\n    @if (selectedSpacerItem()) {\n    <p class=\"mt-0\">\n      <strong\n        >{{ data()[selectedSpacerItem().index].value }} \u2192 {{ data()[selectedSpacerItem().index + 1].value }}</strong\n      >\n    </p>\n    @for (section of (data()[selectedSpacerItem().index].sections ?? []); track section.key) { @let drillable =\n    section.value > 0;\n    <p class=\"tooltip-row mt-0 mt-0-5 d-flex\">\n      <strong>{{ section.label }}:&nbsp;</strong>\n      <span\n        class=\"row-right\"\n        [class.has-more-info]=\"drillable\"\n        (click)=\"\n                  drillable && valueClicked.emit({\n                    value: section.value,\n                    label: data()[selectedSpacerItem().index].label + ': ' + section.label,\n                    key: data()[selectedSpacerItem().index].key,\n                    section: section.key,\n                  })\n                \"\n        >{{ section.value }}</span\n      >\n      &nbsp;({{ pct(section.value, data()[selectedSpacerItem().index].value) }}%)\n    </p>\n    } } @else {\n    <p class=\"mt-0\">{{ pct(selectedItem().value, total()) }}% {{ resolvedChartLabels().all }}</p>\n    }\n  </cng-chart-tooltip>\n\n  } @else {\n\n  <!-- \u2500\u2500 Default mode tooltip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <cng-chart-tooltip\n    [tooltipPosition]=\"tooltipPosition()\"\n    tooltipOrientation=\"bottom\"\n    [squareColor]=\"undefined\"\n    [tooltipClickable]=\"false\"\n    (tooltipClosed)=\"resetTooltip()\"\n    (cngOutsideClick)=\"resetTooltip()\"\n  >\n    <ng-container ngProjectAs=\"cng-title\">{{ selectedItemLabel() }}</ng-container>\n    @for (section of selectedItem().sections; track section.key) { @let drillable = section.value > 0;\n    <p class=\"tooltip-row mt-0 mt-0-5 d-flex\">\n      <span>\n        <div class=\"color-square mr-0-5\" [style.background-color]=\"section.cssColor\"></div>\n      </span>\n      <strong>{{ section.label }}:&nbsp;</strong>\n      <span\n        class=\"row-right\"\n        [class.has-more-info]=\"drillable\"\n        (click)=\"\n                drillable && valueClicked.emit({\n                  value: section.value,\n                  label: selectedItemLabel() + ': ' + section.label,\n                  key: selectedItem().key,\n                  section: section.key,\n                })\n              \"\n        >{{ section.value }}</span\n      >\n      &nbsp;({{ section.percentage }}%)\n    </p>\n    }\n\n    <p class=\"tooltip-row mt-0-5\">\n      <strong>{{ resolvedChartLabels().total }}:&nbsp;</strong>\n      <span\n        class=\"has-more-info\"\n        (click)=\"\n          valueClicked.emit({\n            value: selectedItem().value,\n            label: selectedItemLabel(),\n            key: selectedItem().key,\n            section: undefined\n          })\n        \"\n        >{{ selectedItem().value }}</span\n      >\n    </p>\n\n    <ng-container ngProjectAs=\"cng-footer\">\n      <p class=\"tooltip-row mt-0\">\n        <strong>{{ resolvedChartLabels().all }}:&nbsp;</strong>\n        <span class=\"row-right\">{{ total() }}</span>\n      </p>\n    </ng-container>\n  </cng-chart-tooltip>\n\n  } } @if (showExportButton() && !loading() && hasData()) {\n  <cng-chart-export-button\n    class=\"funnel-export-btn\"\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.funnel-container{height:100%;width:100%;max-width:1400px;margin:auto;position:relative}svg{width:100%;height:100%}clr-signpost{position:absolute!important}.tooltip-row{display:flex;justify-content:space-between;align-items:center}.row-right{margin-left:auto}.funnel-export-btn{position:absolute;bottom:0;right:0;opacity:0;pointer-events:none;transition:opacity .2s ease}.funnel-container:hover .funnel-export-btn{opacity:1;pointer-events:auto}\n"] }]
+            args: [{ selector: 'clr-funnel-chart', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"funnel-container\" data-testid=\"funnel-chart\" #container (cngWindowResize)=\"updateChart()\">\n  <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n  @if (!loading()) {\n    @for (pos of sectionTooltips(); track pos.key) {\n      <clr-signpost\n        [attr.data-testid]=\"'funnel-chart-section-signpost-' + pos.key\"\n        [style.left.px]=\"pos.x\"\n        [style.top.px]=\"pos.y\"\n      >\n        <cds-icon\n          clrSignpostTrigger\n          [attr.data-testid]=\"'funnel-chart-section-signpost-trigger-' + pos.key\"\n          shape=\"info-circle\"\n          size=\"18\"\n        />\n        <clr-signpost-content\n          clrPosition=\"bottom-left\"\n          [attr.data-testid]=\"'funnel-chart-section-signpost-content-' + pos.key\"\n        >\n          <p class=\"mt-0\" [attr.data-testid]=\"'funnel-chart-section-description-' + pos.key\">{{ pos.description }}</p>\n        </clr-signpost-content>\n      </clr-signpost>\n    }\n  }\n  @if (loading()) {\n    <cng-bar-chart-skeleton data-testid=\"funnel-chart-skeleton\" orientation=\"vertical\" skeletonType=\"loading\" />\n  }\n  @if (tooltipPosition()) {\n    @if (orientation() === 'centered') {\n      <!-- \u2500\u2500 Centered mode tooltip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <cng-chart-tooltip\n        data-testid=\"funnel-chart-centered-tooltip\"\n        [tooltipPosition]=\"tooltipPosition()\"\n        tooltipOrientation=\"bottom\"\n        [squareColor]=\"selectedSpacerItem() ? centeredSpacerCssColor() : centeredBarCssColor()\"\n        [tooltipClickable]=\"!selectedSpacerItem()\"\n        (tooltipClosed)=\"resetTooltip()\"\n        (cngOutsideClick)=\"resetTooltip()\"\n        (tooltipHeaderClicked)=\"\n          selectedItem() &&\n            valueClicked.emit({\n              value: selectedItem().value,\n              label: selectedItem().label,\n              key: selectedItem().key,\n              section: undefined,\n            })\n        \"\n      >\n        <ng-container ngProjectAs=\"cng-title\">\n          @if (selectedSpacerItem()) {\n            {{ data()[selectedSpacerItem().index].label }} \u2192 {{ data()[selectedSpacerItem().index + 1].label }}\n          } @else {\n            ({{ selectedItem().value }}) {{ selectedItem().label }}\n          }\n        </ng-container>\n\n        @if (selectedSpacerItem()) {\n          <p class=\"mt-0\" data-testid=\"funnel-chart-centered-tooltip-transition\">\n            <strong\n              >{{ data()[selectedSpacerItem().index].value }} \u2192\n              {{ data()[selectedSpacerItem().index + 1].value }}</strong\n            >\n          </p>\n          @for (section of data()[selectedSpacerItem().index].sections ?? []; track section.key) {\n            @let drillable = section.value > 0;\n            <p\n              class=\"tooltip-row mt-0 mt-0-5 d-flex\"\n              [attr.data-testid]=\"'funnel-chart-centered-tooltip-section-' + section.key\"\n            >\n              <strong>{{ section.label }}:&nbsp;</strong>\n              <span\n                class=\"row-right\"\n                [attr.data-testid]=\"'funnel-chart-centered-tooltip-section-value-' + section.key\"\n                [class.has-more-info]=\"drillable\"\n                (click)=\"\n                  drillable &&\n                    valueClicked.emit({\n                      value: section.value,\n                      label: data()[selectedSpacerItem().index].label + ': ' + section.label,\n                      key: data()[selectedSpacerItem().index].key,\n                      section: section.key,\n                    })\n                \"\n                >{{ section.value }}</span\n              >\n              &nbsp;({{ pct(section.value, data()[selectedSpacerItem().index].value) }}%)\n            </p>\n          }\n        } @else {\n          <p class=\"mt-0\" data-testid=\"funnel-chart-centered-tooltip-percentage\">\n            {{ pct(selectedItem().value, total()) }}% {{ resolvedChartLabels().all }}\n          </p>\n        }\n      </cng-chart-tooltip>\n    } @else {\n      <!-- \u2500\u2500 Default mode tooltip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <cng-chart-tooltip\n        data-testid=\"funnel-chart-default-tooltip\"\n        [tooltipPosition]=\"tooltipPosition()\"\n        tooltipOrientation=\"bottom\"\n        [squareColor]=\"undefined\"\n        [tooltipClickable]=\"false\"\n        (tooltipClosed)=\"resetTooltip()\"\n        (cngOutsideClick)=\"resetTooltip()\"\n      >\n        <ng-container ngProjectAs=\"cng-title\">{{ selectedItemLabel() }}</ng-container>\n        @for (section of selectedItem().sections; track section.key) {\n          @let drillable = section.value > 0;\n          <p\n            class=\"tooltip-row mt-0 mt-0-5 d-flex\"\n            [attr.data-testid]=\"'funnel-chart-default-tooltip-section-' + section.key\"\n          >\n            <span>\n              <div class=\"color-square mr-0-5\" [style.background-color]=\"section.cssColor\"></div>\n            </span>\n            <strong>{{ section.label }}:&nbsp;</strong>\n            <span\n              class=\"row-right\"\n              [attr.data-testid]=\"'funnel-chart-default-tooltip-section-value-' + section.key\"\n              [class.has-more-info]=\"drillable\"\n              (click)=\"\n                drillable &&\n                  valueClicked.emit({\n                    value: section.value,\n                    label: selectedItemLabel() + ': ' + section.label,\n                    key: selectedItem().key,\n                    section: section.key,\n                  })\n              \"\n              >{{ section.value }}</span\n            >\n            &nbsp;({{ section.percentage }}%)\n          </p>\n        }\n\n        <p class=\"tooltip-row mt-0-5\" data-testid=\"funnel-chart-default-tooltip-total\">\n          <strong>{{ resolvedChartLabels().total }}:&nbsp;</strong>\n          <span\n            class=\"has-more-info\"\n            data-testid=\"funnel-chart-default-tooltip-total-value\"\n            (click)=\"\n              valueClicked.emit({\n                value: selectedItem().value,\n                label: selectedItemLabel(),\n                key: selectedItem().key,\n                section: undefined,\n              })\n            \"\n            >{{ selectedItem().value }}</span\n          >\n        </p>\n\n        <ng-container ngProjectAs=\"cng-footer\">\n          <p class=\"tooltip-row mt-0\" data-testid=\"funnel-chart-default-tooltip-all\">\n            <strong>{{ resolvedChartLabels().all }}:&nbsp;</strong>\n            <span class=\"row-right\" data-testid=\"funnel-chart-default-tooltip-all-value\">{{ total() }}</span>\n          </p>\n        </ng-container>\n      </cng-chart-tooltip>\n    }\n  }\n  @if (showExportButton() && !loading() && hasData()) {\n    <cng-chart-export-button\n      class=\"funnel-export-btn\"\n      data-testid=\"funnel-chart-export\"\n      [svgRef]=\"svgElement()\"\n      [filename]=\"exportFilename()\"\n      [buttonTitle]=\"exportButtonTitle()\"\n    />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.funnel-container{height:100%;width:100%;max-width:1400px;margin:auto;position:relative}svg{width:100%;height:100%}clr-signpost{position:absolute!important}.tooltip-row{display:flex;justify-content:space-between;align-items:center}.row-right{margin-left:auto}.funnel-export-btn{position:absolute;bottom:0;right:0;opacity:0;pointer-events:none;transition:opacity .2s ease}.funnel-container:hover .funnel-export-btn{opacity:1;pointer-events:auto}\n"] }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], exportButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportButtonTitle", required: false }] }], exportFilename: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFilename", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], textSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "textSize", required: false }] }], lineTextPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineTextPadding", required: false }] }], barGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "barGap", required: false }] }], sideLineVerticalPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideLineVerticalPadding", required: false }] }], minLineSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLineSize", required: false }] }], barToSpacerRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "barToSpacerRatio", required: false }] }], middleLineVerticalPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "middleLineVerticalPadding", required: false }] }], barColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "barColor", required: false }] }], spacerColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacerColor", required: false }] }], chartLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartLabels", required: false }] }], sectionColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionColors", required: false }] }], valueClicked: [{ type: i0.Output, args: ["valueClicked"] }] } });
 
 const PREFERRED_ORDER = ['top-right', 'top-left', 'bottom-right', 'bottom-left'];
@@ -2647,6 +3018,7 @@ const CLR_CHARTS_DECLARATIONS = [
     BarChartComponent,
     ComboChartComponent,
     FunnelChartComponent,
+    GroupedBarChartComponent,
     LineChartComponent,
     PieChartComponent,
 ];
@@ -2656,6 +3028,7 @@ class ClrChartsModule {
             BarChartComponent,
             ComboChartComponent,
             FunnelChartComponent,
+            GroupedBarChartComponent,
             LineChartComponent,
             PieChartComponent], imports: [CommonModule,
             DecimalPipe,
@@ -2673,6 +3046,7 @@ class ClrChartsModule {
             BarChartComponent,
             ComboChartComponent,
             FunnelChartComponent,
+            GroupedBarChartComponent,
             LineChartComponent,
             PieChartComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ClrChartsModule, imports: [CommonModule,
@@ -2718,5 +3092,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AreaChartComponent, BarChartComponent, ClrChartsModule, ComboChartComponent, FunnelChartComponent, LineChartComponent, PieChartComponent };
+export { AreaChartComponent, BarChartComponent, ClrChartsModule, ComboChartComponent, FunnelChartComponent, GroupedBarChartComponent, LineChartComponent, PieChartComponent };
 //# sourceMappingURL=porscheinformatik-clr-addons-charts.mjs.map