@porscheinformatik/clr-addons 21.9.0 → 21.10.0

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

@@ -2,11 +2,12 @@ import * as i0 from '@angular/core';
 import { input, viewChild, computed, signal, Directive, ChangeDetectionStrategy, Component, Injectable, inject, output, Renderer2, DestroyRef, DOCUMENT, Inject, ElementRef, contentChild, NgModule } from '@angular/core';
 import { format, select, scaleBand, scaleLinear, max, axisBottom, axisLeft, group, sum, scalePoint, min, line, curveMonotoneX, area, axisRight, arc, pie, color } from 'd3';
 import * as i1 from '@clr/angular';
-import { ClrAlertModule, ClrDropdownModule, ClrIcon, ClrSignpostContent, ClrStartDateInput, ClrEndDateInput, ClrSignpostModule } from '@clr/angular';
+import { ClrAlertModule, ClrDropdownModule, ClrIcon, ClrSignpostModule, ClrSignpostContent, ClrStartDateInput, ClrEndDateInput } from '@clr/angular';
 import * as i3 from '@clr/angular/icon';
 import { ClarityIcons, downloadIcon } from '@clr/angular/icon';
 import * as i2 from '@clr/angular/popover/common';
-import { NgxSkeletonLoaderComponent } from 'ngx-skeleton-loader';
+import * as i1$1 from 'ngx-skeleton-loader';
+import { NgxSkeletonLoaderComponent, NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ReplaySubject, skip } from 'rxjs';
 import { map, distinctUntilChanged, debounceTime } from 'rxjs/operators';
@@ -459,33 +460,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
 class ChartLegendComponent {
     constructor() {
         this.items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        this.hoveredIndex = input(-1, ...(ngDevMode ? [{ debugName: "hoveredIndex" }] : /* istanbul ignore next */ []));
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        this.itemHover = output();
+        this.clicked = output();
         this.toChartColor = toChartColor;
     }
+    onLegendHover(item, index, hover) {
+        this.itemHover.emit({ item, index, hover });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ChartLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: ChartLegendComponent, isStandalone: true, selector: "cng-chart-legend", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: ChartLegendComponent, isStandalone: true, selector: "cng-chart-legend", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, hoveredIndex: { classPropertyName: "hoveredIndex", publicName: "hoveredIndex", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemHover: "itemHover", clicked: "clicked" }, ngImport: i0, template: `
     <div class="chart-legend" data-testid="chart-legend">
-      @for (item of items(); track item.label) {
-        <div class="legend-item" [attr.data-testid]="'chart-legend-item-' + item.label">
+      @for (item of items(); track item.label; let i = $index) {
+        <div
+          class="legend-item has-more-info"
+          [attr.data-testid]="'chart-legend-item-' + item.label"
+          (mouseenter)="onLegendHover(item, i, true)"
+          (mouseleave)="onLegendHover(item, i, false)"
+          (click)="clicked.emit(item)"
+        >
           <span class="legend-color-square" [style.background-color]="toChartColor(item.color)"></span>
-          <span class="legend-label" [attr.data-testid]="'chart-legend-label-' + item.label">{{ item.label }}</span>
+          <span
+            class="legend-label"
+            [class.legend-label-hover]="hoveredIndex() === i"
+            [attr.data-testid]="'chart-legend-label-' + item.label"
+            >{{ item.label }}</span
+          >
         </div>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block}.chart-legend{display:flex;flex-wrap:wrap;gap:.25rem 1rem;padding:.5rem 0 .25rem;font-size:11px;color:var(--cds-global-color-construction-400, #666)}.legend-item{display:flex;align-items:center;gap:.35rem}.legend-color-square{width:10px;height:10px;border-radius:2px;flex-shrink:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block}.chart-legend{display:flex;flex-wrap:wrap;gap:.25rem 1rem;padding:.5rem 0 .25rem;font-size:11px;color:var(--cds-global-color-construction-400, #666)}.legend-item{display:flex;align-items:center}.legend-label{margin-left:4px;max-width:85px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;line-height:16px;font-weight:500;color:var(--clr-color-neutral-900, #222);transition:font-weight .15s}.legend-color-square{width:10px;height:10px;border-radius:2px;flex-shrink:0}.legend-label-hover,.legend-item:hover .legend-label{font-weight:700;color:var(--clr-color-neutral-1000, #000)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ChartLegendComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cng-chart-legend', template: `
     <div class="chart-legend" data-testid="chart-legend">
-      @for (item of items(); track item.label) {
-        <div class="legend-item" [attr.data-testid]="'chart-legend-item-' + item.label">
+      @for (item of items(); track item.label; let i = $index) {
+        <div
+          class="legend-item has-more-info"
+          [attr.data-testid]="'chart-legend-item-' + item.label"
+          (mouseenter)="onLegendHover(item, i, true)"
+          (mouseleave)="onLegendHover(item, i, false)"
+          (click)="clicked.emit(item)"
+        >
           <span class="legend-color-square" [style.background-color]="toChartColor(item.color)"></span>
-          <span class="legend-label" [attr.data-testid]="'chart-legend-label-' + item.label">{{ item.label }}</span>
+          <span
+            class="legend-label"
+            [class.legend-label-hover]="hoveredIndex() === i"
+            [attr.data-testid]="'chart-legend-label-' + item.label"
+            >{{ item.label }}</span
+          >
         </div>
       }
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.chart-legend{display:flex;flex-wrap:wrap;gap:.25rem 1rem;padding:.5rem 0 .25rem;font-size:11px;color:var(--cds-global-color-construction-400, #666)}.legend-item{display:flex;align-items:center;gap:.35rem}.legend-color-square{width:10px;height:10px;border-radius:2px;flex-shrink:0}\n"] }]
-        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }] } });
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.chart-legend{display:flex;flex-wrap:wrap;gap:.25rem 1rem;padding:.5rem 0 .25rem;font-size:11px;color:var(--cds-global-color-construction-400, #666)}.legend-item{display:flex;align-items:center}.legend-label{margin-left:4px;max-width:85px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;line-height:16px;font-weight:500;color:var(--clr-color-neutral-900, #222);transition:font-weight .15s}.legend-color-square{width:10px;height:10px;border-radius:2px;flex-shrink:0}.legend-label-hover,.legend-item:hover .legend-label{font-weight:700;color:var(--clr-color-neutral-1000, #000)}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], hoveredIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoveredIndex", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], itemHover: [{ type: i0.Output, args: ["itemHover"] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 class ChartSkeletonComponent {
     constructor() {
@@ -1063,11 +1094,11 @@ 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.23", ngImport: i0, type: BarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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%;position:absolute;inset:0}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", "hoveredIndex", "loading", "orientation"], outputs: ["itemHover", "clicked"] }, { 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.23", ngImport: i0, type: BarChartComponent, decorators: [{
             type: Component,
-            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"] }]
+            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%;position:absolute;inset:0}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 {
@@ -1085,6 +1116,8 @@ class GroupedBarChartComponent extends ChartBase {
         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.showValues = input(false, ...(ngDevMode ? [{ debugName: "showValues" }] : /* istanbul ignore next */ []));
+        this.showValueOnHover = input(false, ...(ngDevMode ? [{ debugName: "showValueOnHover" }] : /* 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 */ []));
@@ -1134,6 +1167,7 @@ class GroupedBarChartComponent extends ChartBase {
         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.hoveredValueKey = signal(undefined, ...(ngDevMode ? [{ debugName: "hoveredValueKey" }] : /* istanbul ignore next */ []));
         this.barSelection = null;
         this.labelSelection = null;
     }
@@ -1152,6 +1186,7 @@ class GroupedBarChartComponent extends ChartBase {
     }
     updateChart() {
         this.svg.selectAll('*').remove();
+        this.hoveredValueKey.set(undefined);
         if (this.loading()) {
             this.resetVisibleState();
             return;
@@ -1231,6 +1266,7 @@ class GroupedBarChartComponent extends ChartBase {
         this.addVerticalBarRectangle(x0, x1, y)
             .attr('class', 'bar')
             .style('fill', (d) => toChartColor(d.color));
+        this.addVerticalValueLabels(g, x0, x1, y);
         this.appendAxisLabel(g, xAxisLabel, width / 2, height + 40);
         this.appendAxisLabel(g, yAxisLabel, -height / 2, -(leftMargin - 10), 'rotate(-90)');
     }
@@ -1269,6 +1305,7 @@ class GroupedBarChartComponent extends ChartBase {
         this.addHorizontalBarRectangle(x, y0, y1)
             .attr('class', 'bar')
             .style('fill', (d) => toChartColor(d.color));
+        this.addHorizontalValueLabels(g, x, y0, y1);
         this.appendAxisLabel(g, xAxisLabel, width / 2, height + 40);
         this.appendAxisLabel(g, yAxisLabel, -height / 2, -(leftMargin - this.yAxisLabelWidthPx() / 2), 'rotate(-90)');
     }
@@ -1279,10 +1316,73 @@ class GroupedBarChartComponent extends ChartBase {
             .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))
+            .on('mouseover', (_event, d) => {
+            this.setHoverStyles(d, true);
+            if (this.showValueOnHover()) {
+                this.hoveredValueKey.set(d.key);
+                this.updateHoveredValueLabels();
+            }
+        })
+            .on('mouseout', (_event, d) => {
+            this.setHoverStyles(d, false);
+            if (this.showValueOnHover()) {
+                this.hoveredValueKey.set(undefined);
+                this.updateHoveredValueLabels();
+            }
+        })
             .call(this.addBarClickHandler.bind(this));
     }
+    addHorizontalValueLabels(g, x, y0, y1) {
+        if (!this.showValues() && !this.showValueOnHover()) {
+            return;
+        }
+        const barHeight = Math.max(0, Math.min(this.barSizePx(), y1.bandwidth()));
+        const yOffset = (y1.bandwidth() - barHeight) / 2;
+        g.selectAll('.value-label')
+            .data(this.slicedDataPoints(), (d) => d.key)
+            .join('text')
+            .attr('class', 'value-label')
+            .attr('x', (d) => x(d.value) + 5)
+            .attr('y', (d) => {
+            return (y0(d.groupKey) || 0) + (y1(d.fullLabel ?? d.label) || 0) + yOffset + barHeight / 2;
+        })
+            .attr('dominant-baseline', 'middle')
+            .attr('text-anchor', 'start')
+            .call(this.addValueLabelStyles.bind(this));
+    }
+    addVerticalValueLabels(g, x0, x1, y) {
+        if (!this.showValues() && !this.showValueOnHover()) {
+            return;
+        }
+        const barWidth = Math.max(0, Math.min(this.barSizePx(), x1.bandwidth()));
+        const xOffset = (x1.bandwidth() - barWidth) / 2;
+        g.selectAll('.value-label')
+            .data(this.slicedDataPoints(), (d) => d.key)
+            .join('text')
+            .attr('class', 'value-label')
+            .attr('x', (d) => {
+            return (x0(d.groupKey) || 0) + (x1(d.fullLabel ?? d.label) || 0) + xOffset + barWidth / 2;
+        })
+            .attr('y', (d) => y(d.value) - 6)
+            .attr('text-anchor', 'middle')
+            .call(this.addValueLabelStyles.bind(this));
+    }
+    addValueLabelStyles(g) {
+        g.style('font-size', '11px')
+            .style('font-weight', '600')
+            .style('fill', (d) => toChartColor(d.color))
+            .attr('stroke', '#fff')
+            .attr('stroke-width', 3)
+            .attr('paint-order', 'stroke fill')
+            .style('pointer-events', 'none')
+            .style('opacity', (d) => this.showValues() || this.hoveredValueKey() === d.key ? '1' : '0')
+            .text((d) => format('~s')(d.value));
+    }
+    updateHoveredValueLabels() {
+        this.svg
+            .selectAll('.value-label')
+            .style('opacity', (d) => this.showValues() || this.hoveredValueKey() === d.key ? '1' : '0');
+    }
     addHorizontalBarRectangle(x, y0, y1, outlineSize = 0) {
         const barHeight = Math.max(0, Math.min(this.barSizePx(), y1.bandwidth()));
         const yOffset = (y1.bandwidth() - barHeight) / 2;
@@ -1417,12 +1517,12 @@ class GroupedBarChartComponent extends ChartBase {
         this.slicedDataPoints.set([]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: GroupedBarChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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 }, yAxisLabelWidthPx: { classPropertyName: "yAxisLabelWidthPx", publicName: "yAxisLabelWidthPx", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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 }, yAxisLabelWidthPx: { classPropertyName: "yAxisLabelWidthPx", publicName: "yAxisLabelWidthPx", 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 }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, showValueOnHover: { classPropertyName: "showValueOnHover", publicName: "showValueOnHover", 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", "hoveredIndex", "loading", "orientation"], outputs: ["itemHover", "clicked"] }, { 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.23", 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 }] }], yAxisLabelWidthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxisLabelWidthPx", 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"] }] } });
+        }], 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 }] }], yAxisLabelWidthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxisLabelWidthPx", 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 }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], showValueOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueOnHover", 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.
@@ -1436,7 +1536,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
  * - Calls `onClick` with the clicked element, data point and series when a dot is clicked.
  *
  */
-function renderDots(g, series, x, y, onClick) {
+function renderDots(g, series, x, y, onClick, onHover, onHoverEnd) {
     g.selectAll(`.dot-${series.key}`)
         .data(series.data, (d) => d.x)
         .join('circle')
@@ -1448,11 +1548,13 @@ function renderDots(g, series, x, y, onClick) {
         .attr('stroke', '#fff')
         .attr('stroke-width', 2)
         .style('cursor', 'pointer')
-        .on('mouseover', (e) => {
+        .on('mouseover', (e, d) => {
         select(e.currentTarget).attr('r', 6);
+        onHover?.(d, series);
     })
         .on('mouseout', (e) => {
         select(e.currentTarget).attr('r', 4);
+        onHoverEnd?.();
     })
         .on('click', (event, d) => {
         event.stopPropagation();
@@ -1558,6 +1660,7 @@ class LineChartComponent extends ChartBase {
         this.showArea = input(false, ...(ngDevMode ? [{ debugName: "showArea" }] : /* istanbul ignore next */ []));
         this.showLegend = input(true, ...(ngDevMode ? [{ debugName: "showLegend" }] : /* istanbul ignore next */ []));
         this.showValues = input(false, ...(ngDevMode ? [{ debugName: "showValues" }] : /* istanbul ignore next */ []));
+        this.showValueOnHover = input(false, ...(ngDevMode ? [{ debugName: "showValueOnHover" }] : /* 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('line-chart', ...(ngDevMode ? [{ debugName: "exportFilename" }] : /* istanbul ignore next */ []));
@@ -1588,6 +1691,7 @@ class LineChartComponent extends ChartBase {
             }
             return this.series().map(s => ({ label: s.label, color: s.color }));
         }, ...(ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []));
+        this.hoveredValueKey = signal(undefined, ...(ngDevMode ? [{ debugName: "hoveredValueKey" }] : /* istanbul ignore next */ []));
     }
     ngOnChanges(_changes) {
         if (!this.svg) {
@@ -1601,6 +1705,7 @@ class LineChartComponent extends ChartBase {
     }
     updateChart() {
         this.svg.selectAll('*').remove();
+        this.hoveredValueKey.set(undefined);
         if (this.loading()) {
             return;
         }
@@ -1670,15 +1775,15 @@ class LineChartComponent extends ChartBase {
                 .attr('stroke-linecap', 'round')
                 .attr('d', lineGenerator);
             // Dots
-            renderDots(g, series, x, y, (el, point, s) => this.openTooltip(el, point, s));
-            // Value labels above each dot
-            if (this.showValues()) {
+            renderDots(g, series, x, y, (el, point, s) => this.openTooltip(el, point, s), point => this.setHoveredValueKey(this.getValueKey(series.key, point.x)), () => this.setHoveredValueKey(undefined));
+            if (this.showValues() || this.showValueOnHover()) {
                 g.selectAll(`.value-label-${series.key}`)
                     .data(series.data, (d) => d.x)
                     .join('text')
                     .attr('class', `value-label value-label-${series.key}`)
                     .attr('x', (d) => x(d.x) ?? 0)
                     .attr('y', (d) => y(d.value) - 9)
+                    .attr('data-value-key', (d) => this.getValueKey(series.key, d.x))
                     .attr('text-anchor', 'middle')
                     .style('font-size', '11px')
                     .style('font-weight', '600')
@@ -1687,10 +1792,26 @@ class LineChartComponent extends ChartBase {
                     .attr('stroke-width', 3)
                     .attr('paint-order', 'stroke fill')
                     .style('pointer-events', 'none')
+                    .style('opacity', (d) => this.showValues() || this.hoveredValueKey() === this.getValueKey(series.key, d.x) ? '1' : '0')
                     .text((d) => format('~s')(d.value));
             }
         }
     }
+    getValueKey(seriesKey, x) {
+        return `${seriesKey}:${x}`;
+    }
+    setHoveredValueKey(key) {
+        if (!this.showValueOnHover()) {
+            return;
+        }
+        this.hoveredValueKey.set(key);
+        this.updateHoveredValueLabels();
+    }
+    updateHoveredValueLabels() {
+        this.svg.selectAll('.value-label').style('opacity', (_d, index, nodes) => {
+            return this.showValues() || select(nodes[index]).attr('data-value-key') === this.hoveredValueKey() ? '1' : '0';
+        });
+    }
     openTooltip(el, point, series) {
         const rect = el.getBoundingClientRect();
         const container = this.chartRef().nativeElement.getBoundingClientRect();
@@ -1701,12 +1822,12 @@ 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.23", ngImport: i0, type: LineChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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 }, showValueOnHover: { classPropertyName: "showValueOnHover", publicName: "showValueOnHover", 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", "hoveredIndex", "loading", "orientation"], outputs: ["itemHover", "clicked"] }, { 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.23", ngImport: i0, type: LineChartComponent, decorators: [{
             type: Component,
             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"] }] } });
+        }], 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 }] }], showValueOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueOnHover", 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 {
     constructor() {
@@ -1838,7 +1959,7 @@ 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.23", ngImport: i0, type: AreaChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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", "hoveredIndex", "loading", "orientation"], outputs: ["itemHover", "clicked"] }, { 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.23", ngImport: i0, type: AreaChartComponent, decorators: [{
             type: Component,
@@ -2133,26 +2254,126 @@ class ComboChartComponent extends ChartBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ComboChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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", "hoveredIndex", "loading", "orientation"], outputs: ["itemHover", "clicked"] }, { 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.23", ngImport: i0, type: ComboChartComponent, decorators: [{
             type: Component,
             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 DonutChartSkeletonComponent {
+    constructor() {
+        this.donutSize = input(...(ngDevMode ? [undefined, { debugName: "donutSize" }] : /* istanbul ignore next */ []));
+        this.innerRadiusRatio = input.required(...(ngDevMode ? [{ debugName: "innerRadiusRatio" }] : /* istanbul ignore next */ []));
+        this.skeletonType = input('loading', ...(ngDevMode ? [{ debugName: "skeletonType" }] : /* istanbul ignore next */ []));
+        this.animationStyle = computed(() => (this.skeletonType() === 'loading' ? 'pulse' : false), ...(ngDevMode ? [{ debugName: "animationStyle" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DonutChartSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: DonutChartSkeletonComponent, isStandalone: true, selector: "cng-donut-chart-skeleton", inputs: { donutSize: { classPropertyName: "donutSize", publicName: "donutSize", isSignal: true, isRequired: false, transformFunction: null }, innerRadiusRatio: { classPropertyName: "innerRadiusRatio", publicName: "innerRadiusRatio", isSignal: true, isRequired: true, transformFunction: null }, skeletonType: { classPropertyName: "skeletonType", publicName: "skeletonType", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="chart-skeleton">
+      <div class="donut-wrapper">
+        <ngx-skeleton-loader
+          [class.placeholder-skeleton]="skeletonType() === 'placeholder'"
+          [appearance]="'circle'"
+          [animation]="animationStyle()"
+          [theme]="{ width: '100%', height: '100%', margin: '0' }"
+        />
+        <div
+          class="inner-donut-circle"
+          [style.width.%]="(1 - innerRadiusRatio()) * 100"
+          [style.height.%]="(1 - innerRadiusRatio()) * 100"
+        ></div>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box}:host(.pt-3){padding-top:3rem}.chart-skeleton{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:0}.donut-wrapper{position:relative;height:100%;max-height:200px;aspect-ratio:1;max-width:100%}.inner-donut-circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--clr-card-bg-color);border-radius:50%}\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.23", ngImport: i0, type: DonutChartSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cng-donut-chart-skeleton', template: `
+    <div class="chart-skeleton">
+      <div class="donut-wrapper">
+        <ngx-skeleton-loader
+          [class.placeholder-skeleton]="skeletonType() === 'placeholder'"
+          [appearance]="'circle'"
+          [animation]="animationStyle()"
+          [theme]="{ width: '100%', height: '100%', margin: '0' }"
+        />
+        <div
+          class="inner-donut-circle"
+          [style.width.%]="(1 - innerRadiusRatio()) * 100"
+          [style.height.%]="(1 - innerRadiusRatio()) * 100"
+        ></div>
+      </div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgxSkeletonLoaderComponent], styles: [":host{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box}:host(.pt-3){padding-top:3rem}.chart-skeleton{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:0}.donut-wrapper{position:relative;height:100%;max-height:200px;aspect-ratio:1;max-width:100%}.inner-donut-circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--clr-card-bg-color);border-radius:50%}\n"] }]
+        }], propDecorators: { donutSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "donutSize", required: false }] }], innerRadiusRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "innerRadiusRatio", required: true }] }], skeletonType: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonType", required: false }] }] } });
+
+class ChartLegendSkeletonComponent {
+    constructor() {
+        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        this.count = input(2, ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+        this.skeletonType = input('loading', ...(ngDevMode ? [{ debugName: "skeletonType" }] : /* istanbul ignore next */ []));
+        this.animationStyle = computed(() => (this.skeletonType() === 'loading' ? 'pulse' : false), ...(ngDevMode ? [{ debugName: "animationStyle" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ChartLegendSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: ChartLegendSkeletonComponent, isStandalone: true, selector: "cng-chart-legend-skeleton", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, skeletonType: { classPropertyName: "skeletonType", publicName: "skeletonType", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <ngx-skeleton-loader
+      class="d-flex gap-m"
+      [class.clr-flex-column]="orientation() === 'vertical'"
+      [class.clr-flex-row]="orientation() === 'horizontal'"
+      [class.placeholder-skeleton]="skeletonType() === 'placeholder'"
+      [appearance]="'line'"
+      [count]="count()"
+      [animation]="animationStyle()"
+      [theme]="{
+        height: '16px',
+        width: '60px',
+        marginBottom: '0px',
+      }"
+    />
+  `, isInline: true, styles: [".placeholder-skeleton ::ng-deep .skeleton-loader{cursor:default}\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.23", ngImport: i0, type: ChartLegendSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cng-chart-legend-skeleton', template: `
+    <ngx-skeleton-loader
+      class="d-flex gap-m"
+      [class.clr-flex-column]="orientation() === 'vertical'"
+      [class.clr-flex-row]="orientation() === 'horizontal'"
+      [class.placeholder-skeleton]="skeletonType() === 'placeholder'"
+      [appearance]="'line'"
+      [count]="count()"
+      [animation]="animationStyle()"
+      [theme]="{
+        height: '16px',
+        width: '60px',
+        marginBottom: '0px',
+      }"
+    />
+  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgxSkeletonLoaderComponent], styles: [".placeholder-skeleton ::ng-deep .skeleton-loader{cursor:default}\n"] }]
+        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], skeletonType: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonType", required: false }] }] } });
+
 class PieChartComponent extends ChartBase {
     constructor() {
         super(...arguments);
         this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
         this.donut = input(true, ...(ngDevMode ? [{ debugName: "donut" }] : /* istanbul ignore next */ []));
+        this.centerValue = input(undefined, ...(ngDevMode ? [{ debugName: "centerValue" }] : /* istanbul ignore next */ []));
+        this.centerLabel = input(undefined, ...(ngDevMode ? [{ debugName: "centerLabel" }] : /* istanbul ignore next */ []));
+        this.formatCenterValue = input(false, ...(ngDevMode ? [{ debugName: "formatCenterValue" }] : /* istanbul ignore next */ []));
+        this.formatSlices = input(false, ...(ngDevMode ? [{ debugName: "formatSlices" }] : /* istanbul ignore next */ []));
         this.showLegend = input(true, ...(ngDevMode ? [{ debugName: "showLegend" }] : /* istanbul ignore next */ []));
+        this.legendPosition = input('bottom', ...(ngDevMode ? [{ debugName: "legendPosition" }] : /* 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('pie-chart', ...(ngDevMode ? [{ debugName: "exportFilename" }] : /* istanbul ignore next */ []));
         this.tooltipOrientation = input('top', ...(ngDevMode ? [{ debugName: "tooltipOrientation" }] : /* istanbul ignore next */ []));
+        this.innerRadiusRatio = input(0.5, ...(ngDevMode ? [{ debugName: "innerRadiusRatio" }] : /* istanbul ignore next */ []));
+        this.excludeZeroItemValuesFromLegend = input(true, ...(ngDevMode ? [{ debugName: "excludeZeroItemValuesFromLegend" }] : /* istanbul ignore next */ []));
         this.noItemsMessage = input(NO_ITEMS_MESSAGE, ...(ngDevMode ? [{ debugName: "noItemsMessage" }] : /* istanbul ignore next */ []));
         this.tooltipPercentOfTotal = input('of total', ...(ngDevMode ? [{ debugName: "tooltipPercentOfTotal" }] : /* istanbul ignore next */ []));
         this.valueClicked = output();
+        this.showSkeleton = computed(() => this.loading() || !this.total(), ...(ngDevMode ? [{ debugName: "showSkeleton" }] : /* istanbul ignore next */ []));
         this.hasData = computed(() => this.data()?.some(d => d.value > 0), ...(ngDevMode ? [{ debugName: "hasData" }] : /* istanbul ignore next */ []));
         this.total = computed(() => this.data()?.reduce((acc, d) => acc + d.value, 0) ?? 0, ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
         this.alertMessageAndType = computed(() => {
@@ -2168,8 +2389,11 @@ class PieChartComponent extends ChartBase {
             if (!this.showLegend()) {
                 return [];
             }
-            return (this.data() ?? []).filter(d => d.value > 0).map(d => ({ label: d.fullLabel ?? d.label, color: d.color }));
+            return (this.data() ?? [])
+                .filter(d => (this.excludeZeroItemValuesFromLegend() ? d.value > 0 : d.value >= 0))
+                .map(d => ({ label: d.fullLabel ?? d.label, color: d.color, key: d.key, value: d.value }));
         }, ...(ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []));
+        this.hoveredIndex = signal(undefined, ...(ngDevMode ? [{ debugName: "hoveredIndex" }] : /* istanbul ignore next */ []));
     }
     ngOnChanges(_changes) {
         if (!this.svg) {
@@ -2188,16 +2412,14 @@ class PieChartComponent extends ChartBase {
         }
         const { width, height } = this.getContainerDimensions();
         const radius = Math.min(width, height) / 2;
-        const innerRadius = this.donut() ? radius * 0.55 : 0;
-        const outerRadius = radius * 0.9;
+        const innerRadius = this.donut() ? radius * this.innerRadiusRatio() : 0;
+        const outerRadius = radius - 5;
         this.arcGen = arc().innerRadius(innerRadius).outerRadius(outerRadius);
-        const hoverArc = arc()
-            .innerRadius(innerRadius)
-            .outerRadius(outerRadius * 1.06);
+        this.hoverArcGen = arc().innerRadius(innerRadius).outerRadius(radius);
         const pieGen = pie()
             .value(d => d.value)
             .sort(null);
-        const arcs = pieGen(this.data().filter(d => d.value > 0));
+        const arcs = pieGen(this.data());
         const g = this.svg
             .attr('width', width)
             .attr('height', height)
@@ -2209,15 +2431,22 @@ class PieChartComponent extends ChartBase {
             .join('path')
             .attr('class', 'slice')
             .attr('d', this.arcGen)
+            .style('display', (d) => (d.data.value ? null : 'none'))
             .style('fill', (d) => toChartColor(d.data.color))
             .attr('stroke', '#fff')
             .attr('stroke-width', 2)
             .style('cursor', 'pointer')
-            .on('mouseover', (e) => {
-            select(e.currentTarget).attr('d', hoverArc);
+            .on('mouseover', (e, d) => {
+            select(e.currentTarget)
+                .attr('d', this.hoverArcGen)
+                .style('opacity', 0.8);
+            this.hoveredIndex.set(this.data().indexOf(d.data));
         })
             .on('mouseout', (e) => {
-            select(e.currentTarget).attr('d', this.arcGen);
+            select(e.currentTarget)
+                .attr('d', this.arcGen)
+                .style('opacity', 1);
+            this.hoveredIndex.set(undefined);
         })
             .on('click', (event, d) => {
             event.stopPropagation();
@@ -2247,7 +2476,7 @@ class PieChartComponent extends ChartBase {
             .style('font-weight', '600')
             .style('fill', '#fff')
             .style('pointer-events', 'none')
-            .text((d) => format('~s')(d.data.value));
+            .text((d) => this.formatSlices() ? format('~s')(d.data.value) : d.data.value || '');
         labelGroups
             .append('text')
             .attr('class', 'label-percent')
@@ -2258,7 +2487,7 @@ class PieChartComponent extends ChartBase {
             .style('pointer-events', 'none')
             .text((d) => `${((100 * d.data.value) / total).toFixed(1)}%`);
         // Center label (donut only)
-        if (this.donut()) {
+        if (this.donut() && this.centerValue() === undefined) {
             g.append('text')
                 .attr('class', 'center-label')
                 .attr('text-anchor', 'middle')
@@ -2266,7 +2495,7 @@ class PieChartComponent extends ChartBase {
                 .style('font-size', '1.4rem')
                 .style('font-weight', '600')
                 .style('fill', 'var(--cds-global-color-gray-900, #21333b)')
-                .text(format('~s')(this.total()));
+                .text(this.formatCenterValue() ? format('~s')(this.total()) : this.total());
             g.append('text')
                 .attr('class', 'center-sublabel')
                 .attr('text-anchor', 'middle')
@@ -2274,8 +2503,7 @@ class PieChartComponent extends ChartBase {
                 .style('font-size', '0.65rem')
                 .style('fill', 'var(--cds-global-color-construction-400, #666)')
                 .style('text-transform', 'uppercase')
-                .style('letter-spacing', '0.05em')
-                .text('Total');
+                .style('letter-spacing', '0.05em');
         }
     }
     openTooltip(d, width, height) {
@@ -2286,13 +2514,79 @@ class PieChartComponent extends ChartBase {
         });
         this.selectedItem.set(d.data);
     }
+    setHoverStylesByIndex(index) {
+        this.svg
+            .selectAll('.slice')
+            .filter((_d, i) => i === index)
+            .attr('d', this.hoverArcGen)
+            .style('opacity', 0.8);
+        this.hoveredIndex.set(index);
+    }
+    unsetHoverStylesByIndex(index) {
+        this.svg
+            .selectAll('.slice')
+            .filter((_d, i) => i === index)
+            .attr('d', this.arcGen)
+            .style('opacity', 1);
+        this.hoveredIndex.set(undefined);
+    }
+    onLegendHover(index, hover) {
+        return hover ? this.setHoverStylesByIndex(index) : this.unsetHoverStylesByIndex(index);
+    }
+    onLegendClick(item) {
+        this.valueClicked.emit({ key: item.key, label: item.label, value: item.value });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: PieChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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 }, centerValue: { classPropertyName: "centerValue", publicName: "centerValue", isSignal: true, isRequired: false, transformFunction: null }, centerLabel: { classPropertyName: "centerLabel", publicName: "centerLabel", isSignal: true, isRequired: false, transformFunction: null }, formatCenterValue: { classPropertyName: "formatCenterValue", publicName: "formatCenterValue", isSignal: true, isRequired: false, transformFunction: null }, formatSlices: { classPropertyName: "formatSlices", publicName: "formatSlices", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, legendPosition: { classPropertyName: "legendPosition", publicName: "legendPosition", 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 }, innerRadiusRatio: { classPropertyName: "innerRadiusRatio", publicName: "innerRadiusRatio", isSignal: true, isRequired: false, transformFunction: null }, excludeZeroItemValuesFromLegend: { classPropertyName: "excludeZeroItemValuesFromLegend", publicName: "excludeZeroItemValuesFromLegend", 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 (centerValue() != null && !showSkeleton()) {\n      <div class=\"center-text\">\n        <div\n          class=\"center-number has-more-info\"\n          (click)=\"\n            valueClicked.emit({\n              value: centerValue(),\n            })\n          \"\n        >\n          {{ centerValue() }}\n        </div>\n        @if (centerLabel()) {\n          <div class=\"center-sublabel-text\">{{ centerLabel() }}</div>\n        }\n      </div>\n    }\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    }\n    @if (loading() || !hasData()) {\n      <cng-donut-chart-skeleton\n        data-testid=\"pie-chart-skeleton\"\n        [innerRadiusRatio]=\"0.55\"\n        [skeletonType]=\"loading() ? 'loading' : 'placeholder'\"\n        [class.pt-3]=\"!!alertMessageAndType()\"\n      />\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()) {\n    <cng-chart-legend-skeleton [count]=\"2\" [skeletonType]=\"'loading'\" [class.legend-top]=\"legendPosition() === 'top'\" />\n  } @else if (showLegend() && !loading() && legendItems().length && !alertMessageAndType()) {\n    <cng-chart-legend\n      data-testid=\"pie-chart-legend\"\n      [items]=\"legendItems()\"\n      [hoveredIndex]=\"hoveredIndex() ?? -1\"\n      (itemHover)=\"onLegendHover($event.index, $event.hover)\"\n      (clicked)=\"onLegendClick($event)\"\n      [class.legend-top]=\"legendPosition() === 'top'\"\n    />\n  }\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 1 auto;height:auto;min-height:0;position:relative}svg{height:100%;width:100%}cng-donut-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-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}.center-number{text-decoration:underline;text-decoration-style:dotted;text-decoration-thickness:2px;text-decoration-color:var(--clr-color-neutral-600, #666);text-underline-offset:3px;font-size:1.4rem;font-weight:600;color:var(--cds-global-color-gray-900, #21333b);pointer-events:auto;cursor:pointer}.center-sublabel-text{font-size:.75rem;color:var(--cds-global-color-construction-400, #666);margin-top:2px}.center-sublabel{font-size:.65rem;fill:var(--cds-global-color-construction-400, #666);text-transform:uppercase;letter-spacing:.05em}.legend-top{order:-1}\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", "hoveredIndex", "loading", "orientation"], outputs: ["itemHover", "clicked"] }, { 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: "component", type: DonutChartSkeletonComponent, selector: "cng-donut-chart-skeleton", inputs: ["donutSize", "innerRadiusRatio", "skeletonType"] }, { kind: "component", type: ChartLegendSkeletonComponent, selector: "cng-chart-legend-skeleton", inputs: ["orientation", "count", "skeletonType"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: PieChartComponent, decorators: [{
             type: Component,
-            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"] }] } });
+            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 (centerValue() != null && !showSkeleton()) {\n      <div class=\"center-text\">\n        <div\n          class=\"center-number has-more-info\"\n          (click)=\"\n            valueClicked.emit({\n              value: centerValue(),\n            })\n          \"\n        >\n          {{ centerValue() }}\n        </div>\n        @if (centerLabel()) {\n          <div class=\"center-sublabel-text\">{{ centerLabel() }}</div>\n        }\n      </div>\n    }\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    }\n    @if (loading() || !hasData()) {\n      <cng-donut-chart-skeleton\n        data-testid=\"pie-chart-skeleton\"\n        [innerRadiusRatio]=\"0.55\"\n        [skeletonType]=\"loading() ? 'loading' : 'placeholder'\"\n        [class.pt-3]=\"!!alertMessageAndType()\"\n      />\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()) {\n    <cng-chart-legend-skeleton [count]=\"2\" [skeletonType]=\"'loading'\" [class.legend-top]=\"legendPosition() === 'top'\" />\n  } @else if (showLegend() && !loading() && legendItems().length && !alertMessageAndType()) {\n    <cng-chart-legend\n      data-testid=\"pie-chart-legend\"\n      [items]=\"legendItems()\"\n      [hoveredIndex]=\"hoveredIndex() ?? -1\"\n      (itemHover)=\"onLegendHover($event.index, $event.hover)\"\n      (clicked)=\"onLegendClick($event)\"\n      [class.legend-top]=\"legendPosition() === 'top'\"\n    />\n  }\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 1 auto;height:auto;min-height:0;position:relative}svg{height:100%;width:100%}cng-donut-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-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}.center-number{text-decoration:underline;text-decoration-style:dotted;text-decoration-thickness:2px;text-decoration-color:var(--clr-color-neutral-600, #666);text-underline-offset:3px;font-size:1.4rem;font-weight:600;color:var(--cds-global-color-gray-900, #21333b);pointer-events:auto;cursor:pointer}.center-sublabel-text{font-size:.75rem;color:var(--cds-global-color-construction-400, #666);margin-top:2px}.center-sublabel{font-size:.65rem;fill:var(--cds-global-color-construction-400, #666);text-transform:uppercase;letter-spacing:.05em}.legend-top{order:-1}\n"] }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], donut: [{ type: i0.Input, args: [{ isSignal: true, alias: "donut", required: false }] }], centerValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerValue", required: false }] }], centerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerLabel", required: false }] }], formatCenterValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatCenterValue", required: false }] }], formatSlices: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatSlices", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], legendPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendPosition", 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 }] }], innerRadiusRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "innerRadiusRatio", required: false }] }], excludeZeroItemValuesFromLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludeZeroItemValuesFromLegend", 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"] }] } });
+
+class FunnelSkeletonComponent {
+    constructor() {
+        this.centered = input(false, ...(ngDevMode ? [{ debugName: "centered" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FunnelSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: FunnelSkeletonComponent, isStandalone: true, selector: "cng-funnel-skeleton", inputs: { centered: { classPropertyName: "centered", publicName: "centered", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="funnel-skeleton-container">
+      @for (_ of [1, 2, 3, 4, 5, 6, 7, 8]; track $index) {
+        <div class="funnel-bar bar-{{ $index + 1 }}" [class.centered]="centered()">
+          <ngx-skeleton-loader
+            [appearance]="'line'"
+            [count]="1"
+            [animation]="'pulse'"
+            [theme]="{
+              height: '100%',
+              'border-radius': 'var(--clr-base-border-radius-xxs)',
+            }"
+          />
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [".funnel-skeleton-container{width:100%;height:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--clr-base-gap-xs);padding:0 250px}.funnel-bar{height:calc((100% - 5 * var(--clr-base-gap-xs)) / 6);min-height:2rem}.funnel-bar.centered{margin:auto}.funnel-bar.bar-1{width:100%}.funnel-bar.bar-2{width:85%}.funnel-bar.bar-3{width:70%}.funnel-bar.bar-4{width:55%}.funnel-bar.bar-5{width:40%}.funnel-bar.bar-6{width:35%}.funnel-bar.bar-7{width:20%}.funnel-bar.bar-8{width:15%}\n"], dependencies: [{ kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i1$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme", "size", "measureUnit"] }, { kind: "ngmodule", type: ClrSignpostModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FunnelSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cng-funnel-skeleton', imports: [NgxSkeletonLoaderModule, ClrSignpostModule], template: `
+    <div class="funnel-skeleton-container">
+      @for (_ of [1, 2, 3, 4, 5, 6, 7, 8]; track $index) {
+        <div class="funnel-bar bar-{{ $index + 1 }}" [class.centered]="centered()">
+          <ngx-skeleton-loader
+            [appearance]="'line'"
+            [count]="1"
+            [animation]="'pulse'"
+            [theme]="{
+              height: '100%',
+              'border-radius': 'var(--clr-base-border-radius-xxs)',
+            }"
+          />
+        </div>
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".funnel-skeleton-container{width:100%;height:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--clr-base-gap-xs);padding:0 250px}.funnel-bar{height:calc((100% - 5 * var(--clr-base-gap-xs)) / 6);min-height:2rem}.funnel-bar.centered{margin:auto}.funnel-bar.bar-1{width:100%}.funnel-bar.bar-2{width:85%}.funnel-bar.bar-3{width:70%}.funnel-bar.bar-4{width:55%}.funnel-bar.bar-5{width:40%}.funnel-bar.bar-6{width:35%}.funnel-bar.bar-7{width:20%}.funnel-bar.bar-8{width:15%}\n"] }]
+        }], propDecorators: { centered: [{ type: i0.Input, args: [{ isSignal: true, alias: "centered", required: false }] }] } });
 
 /*
  * Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
@@ -2316,6 +2610,8 @@ class FunnelChartComponent extends ChartBase {
         this.exportFilename = input('funnel-chart', ...(ngDevMode ? [{ debugName: "exportFilename" }] : /* istanbul ignore next */ []));
         /** Rendering mode. 'default' = horizontal bars with sections; 'centered' = centered trapezoid funnel. */
         this.orientation = input('default', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        this.tooltipOrientation = input('bottom', ...(ngDevMode ? [{ debugName: "tooltipOrientation" }] : /* istanbul ignore next */ []));
+        this.prefixTotalWithLabel = input(false, ...(ngDevMode ? [{ debugName: "prefixTotalWithLabel" }] : /* istanbul ignore next */ []));
         /** Width reserved on each side for labels (px). */
         this.textSize = input(200, ...(ngDevMode ? [{ debugName: "textSize" }] : /* istanbul ignore next */ []));
         /** Gap between funnel bars and their side-line labels (px). */
@@ -2347,6 +2643,8 @@ class FunnelChartComponent extends ChartBase {
          * the built-in default palette.
          */
         this.sectionColors = input({}, ...(ngDevMode ? [{ debugName: "sectionColors" }] : /* istanbul ignore next */ []));
+        this.tooltipPercentOfTotal = input('', ...(ngDevMode ? [{ debugName: "tooltipPercentOfTotal" }] : /* istanbul ignore next */ []));
+        this.emptyChartWhenNoData = input(false, ...(ngDevMode ? [{ debugName: "emptyChartWhenNoData" }] : /* istanbul ignore next */ []));
         // ── Outputs ─────────────────────────────────────────────────────────────────
         this.valueClicked = output();
         // ── Computed ─────────────────────────────────────────────────────────────────
@@ -2401,7 +2699,9 @@ class FunnelChartComponent extends ChartBase {
     }
     // ── Data calculation ─────────────────────────────────────────────────────────
     calculateDataPoints(funnelWidth, barHeight) {
-        const maxValue = max(this.data(), d => d.value) ?? 1;
+        const maxValue = this.emptyChartWhenNoData()
+            ? max(this.data(), d => d.value) || 1
+            : (max(this.data(), d => d.value) ?? 1);
         const widthScale = scaleLinear().domain([0, maxValue]).range([0, funnelWidth]);
         const sectionColorOverrides = this.sectionColors();
         return this.data().map((d, i) => {
@@ -2623,7 +2923,9 @@ class FunnelChartComponent extends ChartBase {
     }
     calculateCenteredDataPoints(maxFunnelWidth, barHeight, spacerHeight) {
         const total = this.data()[0]?.value ?? 1;
-        const maxValue = max(this.data(), d => d.value) ?? 1;
+        const maxValue = this.emptyChartWhenNoData()
+            ? max(this.data(), d => d.value) || 1
+            : (max(this.data(), d => d.value) ?? 1);
         const scale = scaleLinear().domain([0, maxValue]).range([0, maxFunnelWidth]);
         return this.data().map((d, i) => {
             const point = {
@@ -2893,12 +3195,12 @@ class FunnelChartComponent extends ChartBase {
         return Math.round(factor * value) / factor;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FunnelChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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 }, tooltipOrientation: { classPropertyName: "tooltipOrientation", publicName: "tooltipOrientation", isSignal: true, isRequired: false, transformFunction: null }, prefixTotalWithLabel: { classPropertyName: "prefixTotalWithLabel", publicName: "prefixTotalWithLabel", 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 }, tooltipPercentOfTotal: { classPropertyName: "tooltipPercentOfTotal", publicName: "tooltipPercentOfTotal", isSignal: true, isRequired: false, transformFunction: null }, emptyChartWhenNoData: { classPropertyName: "emptyChartWhenNoData", publicName: "emptyChartWhenNoData", 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          *clrIfOpen\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    @if (orientation() === 'centered') {\n      <cng-funnel-skeleton data-testid=\"funnel-chart-skeleton\" [centered]=\"true\" />\n    } @else {\n      <cng-funnel-skeleton data-testid=\"funnel-chart-skeleton\" />\n    }\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]=\"tooltipOrientation()\"\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()) }}% {{ tooltipPercentOfTotal() || 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]=\"tooltipOrientation()\"\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\n            >{{\n              (prefixTotalWithLabel() ? selectedItemLabel() + ' ' : '') + resolvedChartLabels().total\n            }}\n            :&nbsp;</strong\n          >\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: "directive", type: i2.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { 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: "component", type: FunnelSkeletonComponent, selector: "cng-funnel-skeleton", inputs: ["centered"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FunnelChartComponent, decorators: [{
             type: Component,
-            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"] }] } });
+            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          *clrIfOpen\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    @if (orientation() === 'centered') {\n      <cng-funnel-skeleton data-testid=\"funnel-chart-skeleton\" [centered]=\"true\" />\n    } @else {\n      <cng-funnel-skeleton data-testid=\"funnel-chart-skeleton\" />\n    }\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]=\"tooltipOrientation()\"\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()) }}% {{ tooltipPercentOfTotal() || 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]=\"tooltipOrientation()\"\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\n            >{{\n              (prefixTotalWithLabel() ? selectedItemLabel() + ' ' : '') + resolvedChartLabels().total\n            }}\n            :&nbsp;</strong\n          >\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 }] }], tooltipOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipOrientation", required: false }] }], prefixTotalWithLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixTotalWithLabel", 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 }] }], tooltipPercentOfTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPercentOfTotal", required: false }] }], emptyChartWhenNoData: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyChartWhenNoData", required: false }] }], valueClicked: [{ type: i0.Output, args: ["valueClicked"] }] } });
 
 const PREFERRED_ORDER = ['top-right', 'top-left', 'bottom-right', 'bottom-left'];
 class AutoPositionDirective {
@@ -3045,7 +3347,10 @@ class ClrChartsModule {
             ChartSkeletonComponent,
             ChartTooltipComponent,
             OutsideClickDirective,
-            WindowResizeDirective], exports: [AreaChartComponent,
+            WindowResizeDirective,
+            DonutChartSkeletonComponent,
+            ChartLegendSkeletonComponent,
+            FunnelSkeletonComponent], exports: [AreaChartComponent,
             BarChartComponent,
             ComboChartComponent,
             FunnelChartComponent,
@@ -3060,7 +3365,10 @@ class ClrChartsModule {
             ChartAlertOverlayComponent,
             ChartExportButtonComponent,
             ChartSkeletonComponent,
-            ChartTooltipComponent] }); }
+            ChartTooltipComponent,
+            DonutChartSkeletonComponent,
+            ChartLegendSkeletonComponent,
+            FunnelSkeletonComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ClrChartsModule, decorators: [{
             type: NgModule,
@@ -3079,6 +3387,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
                         ChartTooltipComponent,
                         OutsideClickDirective,
                         WindowResizeDirective,
+                        DonutChartSkeletonComponent,
+                        ChartLegendSkeletonComponent,
+                        FunnelSkeletonComponent,
                     ],
                     declarations: [...CLR_CHARTS_DECLARATIONS],
                     exports: [...CLR_CHARTS_DECLARATIONS],