@porscheinformatik/clr-addons 19.21.2 → 21.0.0

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

@@ -1,15 +1,17 @@
 import * as i0 from '@angular/core';
-import { input, viewChild, computed, signal, Directive, ChangeDetectionStrategy, Component, Injectable, inject, output, Renderer2, DestroyRef, Inject, ElementRef, contentChild, NgModule } 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, ClrIconModule, ClrSignpostContent, ClrStartDateInput, ClrEndDateInput, ClrSignpostModule } from '@clr/angular';
-import { ClarityIcons, downloadIcon } from '@cds/core/icon';
+import { ClrAlertModule, ClrDropdownModule, ClrIcon, ClrSignpostContent, ClrStartDateInput, ClrEndDateInput, ClrSignpostModule } 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 { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ReplaySubject, skip } from 'rxjs';
 import { map, distinctUntilChanged, debounceTime } from 'rxjs/operators';
 import * as i8 from '@angular/common';
-import { DOCUMENT, CommonModule, DecimalPipe } from '@angular/common';
+import { CommonModule, DecimalPipe } from '@angular/common';
 
 /*
  * Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
@@ -106,17 +108,17 @@ class ChartBase {
     constructor() {
         // ── Common Input ───────────────────────────────────────────────────────────
         /** Whether the chart is in loading state (shows skeleton). */
-        this.loading = input(false);
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
         // ── View references ────────────────────────────────────────────────────────
         /** Reference to the `<svg #chart>` element in the component template. */
-        this.chartRef = viewChild('chart');
+        this.chartRef = viewChild('chart', ...(ngDevMode ? [{ debugName: "chartRef" }] : /* istanbul ignore next */ []));
         /** Reference to the `<div #container>` host element in the component template. */
-        this.containerRef = viewChild('container');
+        this.containerRef = viewChild('container', ...(ngDevMode ? [{ debugName: "containerRef" }] : /* istanbul ignore next */ []));
         /** Exposes the raw SVG element for the chart-export button. */
-        this.svgElement = computed(() => this.chartRef()?.nativeElement);
+        this.svgElement = computed(() => this.chartRef()?.nativeElement, ...(ngDevMode ? [{ debugName: "svgElement" }] : /* istanbul ignore next */ []));
         // ── Tooltip State ──────────────────────────────────────────────────────────
-        this.selectedItem = signal(undefined);
-        this.tooltipPosition = signal(undefined);
+        this.selectedItem = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedItem" }] : /* istanbul ignore next */ []));
+        this.tooltipPosition = signal(undefined, ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
     }
     // ── Lifecycle ──────────────────────────────────────────────────────────────
     /** Schedules the first render after the view is ready. */
@@ -139,20 +141,20 @@ class ChartBase {
             this.tooltipPosition.set(undefined);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ChartBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.18", type: ChartBase, isStandalone: true, inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true, isSignal: true }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, isSignal: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ChartBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.13", type: ChartBase, isStandalone: true, inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true, isSignal: true }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, isSignal: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ChartBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ChartBase, decorators: [{
             type: Directive
-        }] });
+        }], propDecorators: { loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], chartRef: [{ type: i0.ViewChild, args: ['chart', { isSignal: true }] }], containerRef: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }] } });
 
 class ChartAlertOverlayComponent {
     constructor() {
-        this.alertMessage = input.required();
-        this.alertType = input('info');
+        this.alertMessage = input.required(...(ngDevMode ? [{ debugName: "alertMessage" }] : /* istanbul ignore next */ []));
+        this.alertType = input('info', ...(ngDevMode ? [{ debugName: "alertType" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ChartAlertOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: ChartAlertOverlayComponent, isStandalone: true, selector: "cng-chart-alert-overlay", inputs: { alertMessage: { classPropertyName: "alertMessage", publicName: "alertMessage", isSignal: true, isRequired: true, transformFunction: null }, alertType: { classPropertyName: "alertType", publicName: "alertType", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ChartAlertOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: ChartAlertOverlayComponent, isStandalone: true, selector: "cng-chart-alert-overlay", inputs: { alertMessage: { classPropertyName: "alertMessage", publicName: "alertMessage", isSignal: true, isRequired: true, transformFunction: null }, alertType: { classPropertyName: "alertType", publicName: "alertType", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <clr-alert [clrAlertSizeSmall]="true" [clrAlertClosable]="false" [clrAlertType]="alertType()">
       <clr-alert-item>
         <span class="alert-text">
@@ -161,9 +163,9 @@ class ChartAlertOverlayComponent {
       </clr-alert-item>
     </clr-alert>
     <div class="overlay"></div>
-  `, isInline: true, styles: [":host{position:absolute;top:0;left:0;right:0;pointer-events:none;z-index:1;clr-alert{pointer-events:auto;::ng-deep .alert{margin-bottom:0}}.overlay{height:2rem;background:linear-gradient(to bottom,#fff,#fff0)}}\n"], dependencies: [{ kind: "ngmodule", type: ClrAlertModule }, { kind: "component", type: i1.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertLightweight", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "component", type: i1.ClrAlertItem, selector: "clr-alert-item" }, { kind: "directive", type: i1.ClrAlertText, selector: ".alert-text" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{position:absolute;top:0;left:0;right:0;pointer-events:none;z-index:1}:host clr-alert{pointer-events:auto}:host clr-alert ::ng-deep .alert{margin-bottom:0}:host .overlay{height:2rem;background:linear-gradient(to bottom,#fff,#fff0)}\n"], dependencies: [{ kind: "ngmodule", type: ClrAlertModule }, { kind: "component", type: i1.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertLightweight", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "component", type: i1.ClrAlertItem, selector: "clr-alert-item" }, { kind: "directive", type: i1.ClrAlertText, selector: ".alert-text" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ChartAlertOverlayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ChartAlertOverlayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cng-chart-alert-overlay', template: `
     <clr-alert [clrAlertSizeSmall]="true" [clrAlertClosable]="false" [clrAlertType]="alertType()">
@@ -174,8 +176,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
       </clr-alert-item>
     </clr-alert>
     <div class="overlay"></div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ClrAlertModule], styles: [":host{position:absolute;top:0;left:0;right:0;pointer-events:none;z-index:1;clr-alert{pointer-events:auto;::ng-deep .alert{margin-bottom:0}}.overlay{height:2rem;background:linear-gradient(to bottom,#fff,#fff0)}}\n"] }]
-        }] });
+  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ClrAlertModule], styles: [":host{position:absolute;top:0;left:0;right:0;pointer-events:none;z-index:1}:host clr-alert{pointer-events:auto}:host clr-alert ::ng-deep .alert{margin-bottom:0}:host .overlay{height:2rem;background:linear-gradient(to bottom,#fff,#fff0)}\n"] }]
+        }], propDecorators: { alertMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "alertMessage", required: true }] }], alertType: [{ type: i0.Input, args: [{ isSignal: true, alias: "alertType", required: false }] }] } });
 
 // ── Legend layout constants (mirror chart-legend.component styles) ─────────────
 const LEGEND_PADDING_TOP = 12;
@@ -371,10 +373,10 @@ class ChartExportService {
         a.click();
         setTimeout(() => URL.revokeObjectURL(url), 100);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ChartExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ChartExportService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ChartExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ChartExportService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ChartExportService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ChartExportService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -382,11 +384,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 ClarityIcons.addIcons(downloadIcon);
 class ChartExportButtonComponent {
     constructor() {
-        this.svgRef = input(undefined);
-        this.filename = input('chart');
-        this.buttonTitle = input('Export');
+        this.svgRef = input(undefined, ...(ngDevMode ? [{ debugName: "svgRef" }] : /* istanbul ignore next */ []));
+        this.filename = input('chart', ...(ngDevMode ? [{ debugName: "filename" }] : /* istanbul ignore next */ []));
+        this.buttonTitle = input('Export', ...(ngDevMode ? [{ debugName: "buttonTitle" }] : /* istanbul ignore next */ []));
         /** Legend items to include below the chart in the exported file. */
-        this.legendItems = input(undefined);
+        this.legendItems = input(undefined, ...(ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []));
         this.exportService = inject(ChartExportService);
     }
     export(format) {
@@ -403,8 +405,8 @@ class ChartExportButtonComponent {
                 break;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ChartExportButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: ChartExportButtonComponent, isStandalone: true, selector: "cng-chart-export-button", inputs: { svgRef: { classPropertyName: "svgRef", publicName: "svgRef", isSignal: true, isRequired: false, transformFunction: null }, filename: { classPropertyName: "filename", publicName: "filename", isSignal: true, isRequired: false, transformFunction: null }, buttonTitle: { classPropertyName: "buttonTitle", publicName: "buttonTitle", isSignal: true, isRequired: false, transformFunction: null }, legendItems: { classPropertyName: "legendItems", publicName: "legendItems", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ChartExportButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: ChartExportButtonComponent, isStandalone: true, selector: "cng-chart-export-button", inputs: { svgRef: { classPropertyName: "svgRef", publicName: "svgRef", isSignal: true, isRequired: false, transformFunction: null }, filename: { classPropertyName: "filename", publicName: "filename", isSignal: true, isRequired: false, transformFunction: null }, buttonTitle: { classPropertyName: "buttonTitle", publicName: "buttonTitle", isSignal: true, isRequired: false, transformFunction: null }, legendItems: { classPropertyName: "legendItems", publicName: "legendItems", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <clr-dropdown>
       <button class="btn btn-sm btn-icon btn-link export-trigger" clrDropdownTrigger title="Export chart">
         <cds-icon shape="download" size="16"></cds-icon>
@@ -415,9 +417,9 @@ class ChartExportButtonComponent {
         <button clrDropdownItem (click)="export('png')">PNG</button>
       </clr-dropdown-menu>
     </clr-dropdown>
-  `, isInline: true, styles: [":host{position:absolute;top:15px;right:15px;z-index:10;opacity:1;pointer-events:auto}\n"], dependencies: [{ kind: "ngmodule", type: ClrDropdownModule }, { kind: "component", type: i1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: i1.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "directive", type: i1.CdsIconCustomTag, selector: "cds-icon" }, { kind: "ngmodule", type: ClrIconModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{position:absolute;top:15px;right:15px;z-index:10;opacity:1;pointer-events:auto}\n"], dependencies: [{ kind: "ngmodule", type: ClrDropdownModule }, { kind: "component", type: i1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: i2.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "component", type: i3.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ChartExportButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ChartExportButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cng-chart-export-button', template: `
     <clr-dropdown>
@@ -430,16 +432,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         <button clrDropdownItem (click)="export('png')">PNG</button>
       </clr-dropdown-menu>
     </clr-dropdown>
-  `, imports: [ClrDropdownModule, ClrIconModule], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{position:absolute;top:15px;right:15px;z-index:10;opacity:1;pointer-events:auto}\n"] }]
-        }] });
+  `, imports: [ClrDropdownModule, ClrIcon], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{position:absolute;top:15px;right:15px;z-index:10;opacity:1;pointer-events:auto}\n"] }]
+        }], propDecorators: { svgRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "svgRef", required: false }] }], filename: [{ type: i0.Input, args: [{ isSignal: true, alias: "filename", required: false }] }], buttonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonTitle", required: false }] }], legendItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendItems", required: false }] }] } });
 
 class ChartLegendComponent {
     constructor() {
-        this.items = input.required();
+        this.items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
         this.toChartColor = toChartColor;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ChartLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ChartLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: ChartLegendComponent, isStandalone: true, selector: "cng-chart-legend", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
     <div class="chart-legend">
       @for (item of items(); track item.label) {
       <div class="legend-item">
@@ -448,9 +450,9 @@ class ChartLegendComponent {
       </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(--clr-color-neutral-600, #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;gap:.35rem}.legend-color-square{width:10px;height:10px;border-radius:2px;flex-shrink:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ChartLegendComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ChartLegendComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cng-chart-legend', template: `
     <div class="chart-legend">
@@ -461,40 +463,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
       </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(--clr-color-neutral-600, #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: 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 }] }] } });
 
 class ChartSkeletonComponent {
     constructor() {
-        this.skeletonType = input('loading');
-        this.orientation = input.required();
-        this.animationStyle = computed(() => (this.skeletonType() === 'loading' ? 'pulse' : undefined));
+        this.skeletonType = input('loading', ...(ngDevMode ? [{ debugName: "skeletonType" }] : /* istanbul ignore next */ []));
+        this.orientation = input.required(...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        this.animationStyle = computed(() => (this.skeletonType() === 'loading' ? 'pulse' : undefined), ...(ngDevMode ? [{ debugName: "animationStyle" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ChartSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: ChartSkeletonComponent, isStandalone: true, selector: "cng-bar-chart-skeleton", inputs: { skeletonType: { classPropertyName: "skeletonType", publicName: "skeletonType", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"chart-skeleton\" [class.placeholder-skeleton]=\"skeletonType() === 'placeholder'\">\n  <div\n    class=\"skeleton-bars\"\n    [class.horizontal]=\"orientation() === 'horizontal'\"\n    [class.vertical]=\"orientation() === 'vertical'\"\n  >\n    @for (_item of [1, 2, 3, 4, 5, 6]; track $index) {\n    <div class=\"skeleton-bar bar-{{ $index + 1 }}\">\n      <ngx-skeleton-loader\n        [appearance]=\"'circle'\"\n        [count]=\"1\"\n        [animation]=\"animationStyle()\"\n        [theme]=\"{\n            width: '100%',\n            height: '100%',\n            'border-radius': 'var(--clr-base-border-radius-xxs)',\n          }\"\n      />\n    </div>\n    }\n  </div>\n</div>\n", styles: [".chart-skeleton{width:100%;height:100%}.placeholder-skeleton ::ng-deep .skeleton-loader{cursor:default}.skeleton-bars{display:flex;gap:var(--clr-base-gap-l);width:100%;height:100%;padding:var(--cds-global-layout-space-xs) var(--cds-global-layout-space-xl)}.skeleton-bars.vertical{flex-direction:row;align-items:flex-end;justify-content:center}.skeleton-bars.vertical .skeleton-bar{width:var(--cds-global-layout-space-md)}.skeleton-bars.vertical .skeleton-bar.bar-1{height:60%}.skeleton-bars.vertical .skeleton-bar.bar-2{height:95%}.skeleton-bars.vertical .skeleton-bar.bar-3{height:40%}.skeleton-bars.vertical .skeleton-bar.bar-4{height:75%}.skeleton-bars.vertical .skeleton-bar.bar-5{height:50%}.skeleton-bars.vertical .skeleton-bar.bar-6{height:25%}.skeleton-bars.horizontal{flex-direction:column;justify-content:center}.skeleton-bars.horizontal .skeleton-bar{height:var(--cds-global-layout-space-md)}.skeleton-bars.horizontal .skeleton-bar.bar-1{width:60%}.skeleton-bars.horizontal .skeleton-bar.bar-2{width:95%}.skeleton-bars.horizontal .skeleton-bar.bar-3{width:40%}.skeleton-bars.horizontal .skeleton-bar.bar-4{width:75%}.skeleton-bars.horizontal .skeleton-bar.bar-5{width:50%}.skeleton-bars.horizontal .skeleton-bar.bar-6{width:25%}\n"], dependencies: [{ kind: "component", type: NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ChartSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: ChartSkeletonComponent, isStandalone: true, selector: "cng-bar-chart-skeleton", inputs: { skeletonType: { classPropertyName: "skeletonType", publicName: "skeletonType", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"chart-skeleton\" [class.placeholder-skeleton]=\"skeletonType() === 'placeholder'\">\n  <div\n    class=\"skeleton-bars\"\n    [class.horizontal]=\"orientation() === 'horizontal'\"\n    [class.vertical]=\"orientation() === 'vertical'\"\n  >\n    @for (_item of [1, 2, 3, 4, 5, 6]; track $index) {\n    <div class=\"skeleton-bar bar-{{ $index + 1 }}\">\n      <ngx-skeleton-loader\n        [appearance]=\"'circle'\"\n        [count]=\"1\"\n        [animation]=\"animationStyle()\"\n        [theme]=\"{\n            width: '100%',\n            height: '100%',\n            'border-radius': 'var(--clr-base-border-radius-xxs)',\n          }\"\n      />\n    </div>\n    }\n  </div>\n</div>\n", styles: [".chart-skeleton{width:100%;height:100%}.placeholder-skeleton ::ng-deep .skeleton-loader{cursor:default}.skeleton-bars{display:flex;gap:var(--clr-base-gap-l);width:100%;height:100%;padding:var(--cds-global-layout-space-xs) var(--cds-global-layout-space-xl)}.skeleton-bars.vertical{flex-direction:row;align-items:flex-end;justify-content:center}.skeleton-bars.vertical .skeleton-bar{width:var(--cds-global-layout-space-md)}.skeleton-bars.vertical .skeleton-bar.bar-1{height:60%}.skeleton-bars.vertical .skeleton-bar.bar-2{height:95%}.skeleton-bars.vertical .skeleton-bar.bar-3{height:40%}.skeleton-bars.vertical .skeleton-bar.bar-4{height:75%}.skeleton-bars.vertical .skeleton-bar.bar-5{height:50%}.skeleton-bars.vertical .skeleton-bar.bar-6{height:25%}.skeleton-bars.horizontal{flex-direction:column;justify-content:center}.skeleton-bars.horizontal .skeleton-bar{height:var(--cds-global-layout-space-md)}.skeleton-bars.horizontal .skeleton-bar.bar-1{width:60%}.skeleton-bars.horizontal .skeleton-bar.bar-2{width:95%}.skeleton-bars.horizontal .skeleton-bar.bar-3{width:40%}.skeleton-bars.horizontal .skeleton-bar.bar-4{width:75%}.skeleton-bars.horizontal .skeleton-bar.bar-5{width:50%}.skeleton-bars.horizontal .skeleton-bar.bar-6{width:25%}\n"], dependencies: [{ kind: "component", type: NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ChartSkeletonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ChartSkeletonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cng-bar-chart-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgxSkeletonLoaderComponent], template: "<div class=\"chart-skeleton\" [class.placeholder-skeleton]=\"skeletonType() === 'placeholder'\">\n  <div\n    class=\"skeleton-bars\"\n    [class.horizontal]=\"orientation() === 'horizontal'\"\n    [class.vertical]=\"orientation() === 'vertical'\"\n  >\n    @for (_item of [1, 2, 3, 4, 5, 6]; track $index) {\n    <div class=\"skeleton-bar bar-{{ $index + 1 }}\">\n      <ngx-skeleton-loader\n        [appearance]=\"'circle'\"\n        [count]=\"1\"\n        [animation]=\"animationStyle()\"\n        [theme]=\"{\n            width: '100%',\n            height: '100%',\n            'border-radius': 'var(--clr-base-border-radius-xxs)',\n          }\"\n      />\n    </div>\n    }\n  </div>\n</div>\n", styles: [".chart-skeleton{width:100%;height:100%}.placeholder-skeleton ::ng-deep .skeleton-loader{cursor:default}.skeleton-bars{display:flex;gap:var(--clr-base-gap-l);width:100%;height:100%;padding:var(--cds-global-layout-space-xs) var(--cds-global-layout-space-xl)}.skeleton-bars.vertical{flex-direction:row;align-items:flex-end;justify-content:center}.skeleton-bars.vertical .skeleton-bar{width:var(--cds-global-layout-space-md)}.skeleton-bars.vertical .skeleton-bar.bar-1{height:60%}.skeleton-bars.vertical .skeleton-bar.bar-2{height:95%}.skeleton-bars.vertical .skeleton-bar.bar-3{height:40%}.skeleton-bars.vertical .skeleton-bar.bar-4{height:75%}.skeleton-bars.vertical .skeleton-bar.bar-5{height:50%}.skeleton-bars.vertical .skeleton-bar.bar-6{height:25%}.skeleton-bars.horizontal{flex-direction:column;justify-content:center}.skeleton-bars.horizontal .skeleton-bar{height:var(--cds-global-layout-space-md)}.skeleton-bars.horizontal .skeleton-bar.bar-1{width:60%}.skeleton-bars.horizontal .skeleton-bar.bar-2{width:95%}.skeleton-bars.horizontal .skeleton-bar.bar-3{width:40%}.skeleton-bars.horizontal .skeleton-bar.bar-4{width:75%}.skeleton-bars.horizontal .skeleton-bar.bar-5{width:50%}.skeleton-bars.horizontal .skeleton-bar.bar-6{width:25%}\n"] }]
-        }] });
+        }], propDecorators: { skeletonType: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonType", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: true }] }] } });
 
 class ChartTooltipComponent {
     constructor() {
-        this.tooltipPosition = input.required();
-        this.tooltipOrientation = input('top');
-        this.squareColor = input.required();
-        this.tooltipClickable = input(true);
+        this.tooltipPosition = input.required(...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
+        this.tooltipOrientation = input('top', ...(ngDevMode ? [{ debugName: "tooltipOrientation" }] : /* istanbul ignore next */ []));
+        this.squareColor = input.required(...(ngDevMode ? [{ debugName: "squareColor" }] : /* istanbul ignore next */ []));
+        this.tooltipClickable = input(true, ...(ngDevMode ? [{ debugName: "tooltipClickable" }] : /* istanbul ignore next */ []));
         this.tooltipClosed = output();
         this.tooltipHeaderClicked = output();
         this.toChartColor = toChartColor;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ChartTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: ChartTooltipComponent, isStandalone: true, selector: "cng-chart-tooltip", inputs: { tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: true, transformFunction: null }, tooltipOrientation: { classPropertyName: "tooltipOrientation", publicName: "tooltipOrientation", isSignal: true, isRequired: false, transformFunction: null }, squareColor: { classPropertyName: "squareColor", publicName: "squareColor", isSignal: true, isRequired: true, transformFunction: null }, tooltipClickable: { classPropertyName: "tooltipClickable", publicName: "tooltipClickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tooltipClosed: "tooltipClosed", tooltipHeaderClicked: "tooltipHeaderClicked" }, ngImport: i0, template: "<div\n  class=\"tooltip-container\"\n  [class.orientation-bottom]=\"tooltipOrientation() === 'bottom'\"\n  (click)=\"$event.stopPropagation()\"\n  [style.left.px]=\"tooltipPosition().x\"\n  [style.top.px]=\"tooltipPosition().y\"\n>\n  <div class=\"tooltip-header\">\n    <div class=\"color-label-wrapper\">\n      @if (squareColor()) {\n      <div class=\"color-square\" [style.background-color]=\"toChartColor(squareColor())\"></div>\n      }\n      <h5\n        [class.has-more-info]=\"tooltipClickable()\"\n        (click)=\"$event.stopPropagation(); tooltipClickable() && tooltipHeaderClicked.emit()\"\n      >\n        <ng-content select=\"cng-title\" />\n      </h5>\n    </div>\n    <cds-icon shape=\"times\" class=\"tooltip-close-btn\" (click)=\"$event.stopPropagation(); tooltipClosed.emit()\" />\n  </div>\n  <div class=\"tooltip-content\">\n    <ng-content />\n  </div>\n  <hr />\n  <div class=\"tooltip-footer\"><ng-content select=\"cng-footer\" /></div>\n</div>\n", styles: [".tooltip-container{position:absolute;background:var(--clr-color-neutral-0, #fff);border:1px solid var(--clr-color-neutral-400, #ccc);border-radius:4px;box-shadow:0 2px 8px #00000026;padding:12px 16px;z-index:1000;min-width:150px;transform:translate(-50%,-100%) translateY(-10px)}.tooltip-container.orientation-bottom{transform:translate(-50%) translateY(10px)}.tooltip-header{display:flex;flex-direction:row;justify-content:space-between;gap:8px}.tooltip-header h5{margin:0;font-size:14px;font-weight:600;color:var(--clr-color-neutral-1000, #000);flex-grow:1;max-width:200px}.tooltip-close-btn{cursor:pointer;color:var(--clr-close-color)}.tooltip-close-btn:hover,.tooltip-close-btn:focus{color:var(--clr-close-color-hover)}.color-label-wrapper{display:flex;flex-direction:row;gap:8px}.tooltip-content{font-size:12px;color:var(--clr-color-neutral-700, #565656)}hr:has(+.tooltip-footer:empty){display:none}hr{margin:6px -16px}\n"], dependencies: [{ kind: "ngmodule", type: ClrIconModule }, { kind: "directive", type: i1.CdsIconCustomTag, selector: "cds-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ChartTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: ChartTooltipComponent, isStandalone: true, selector: "cng-chart-tooltip", inputs: { tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: true, transformFunction: null }, tooltipOrientation: { classPropertyName: "tooltipOrientation", publicName: "tooltipOrientation", isSignal: true, isRequired: false, transformFunction: null }, squareColor: { classPropertyName: "squareColor", publicName: "squareColor", isSignal: true, isRequired: true, transformFunction: null }, tooltipClickable: { classPropertyName: "tooltipClickable", publicName: "tooltipClickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tooltipClosed: "tooltipClosed", tooltipHeaderClicked: "tooltipHeaderClicked" }, ngImport: i0, template: "<div\n  class=\"tooltip-container\"\n  [class.orientation-bottom]=\"tooltipOrientation() === 'bottom'\"\n  (click)=\"$event.stopPropagation()\"\n  [style.left.px]=\"tooltipPosition().x\"\n  [style.top.px]=\"tooltipPosition().y\"\n>\n  <div class=\"tooltip-header\">\n    <div class=\"color-label-wrapper\">\n      @if (squareColor()) {\n      <div class=\"color-square\" [style.background-color]=\"toChartColor(squareColor())\"></div>\n      }\n      <h5\n        [class.has-more-info]=\"tooltipClickable()\"\n        (click)=\"$event.stopPropagation(); tooltipClickable() && tooltipHeaderClicked.emit()\"\n      >\n        <ng-content select=\"cng-title\" />\n      </h5>\n    </div>\n    <cds-icon shape=\"times\" class=\"tooltip-close-btn\" (click)=\"$event.stopPropagation(); tooltipClosed.emit()\" />\n  </div>\n  <div class=\"tooltip-content\">\n    <ng-content />\n  </div>\n  <hr />\n  <div class=\"tooltip-footer\"><ng-content select=\"cng-footer\" /></div>\n</div>\n", styles: [".tooltip-container{position:absolute;background:var(--cds-global-color-gray-0, #fff);border:1px solid var(--cds-global-color-gray-400, #ccc);border-radius:4px;box-shadow:0 2px 8px #00000026;padding:12px 16px;z-index:1000;min-width:150px;transform:translate(-50%,-100%) translateY(-10px)}.tooltip-container.orientation-bottom{transform:translate(-50%) translateY(10px)}.tooltip-header{display:flex;flex-direction:row;justify-content:space-between;gap:8px}.tooltip-header h5{margin:0;font-size:14px;font-weight:600;color:var(--cds-global-color-gray-1000, #000);flex-grow:1;max-width:200px}.tooltip-close-btn{cursor:pointer;color:var(--clr-close-color)}.tooltip-close-btn:hover,.tooltip-close-btn:focus{color:var(--clr-close-color-hover)}.color-label-wrapper{display:flex;flex-direction:row;gap:8px}.tooltip-content{font-size:12px;color:var(--cds-global-color-gray-700, #565656)}hr:has(+.tooltip-footer:empty){display:none}hr{margin:6px -16px}\n"], dependencies: [{ kind: "component", type: ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ChartTooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ChartTooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cng-chart-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ClrIconModule], template: "<div\n  class=\"tooltip-container\"\n  [class.orientation-bottom]=\"tooltipOrientation() === 'bottom'\"\n  (click)=\"$event.stopPropagation()\"\n  [style.left.px]=\"tooltipPosition().x\"\n  [style.top.px]=\"tooltipPosition().y\"\n>\n  <div class=\"tooltip-header\">\n    <div class=\"color-label-wrapper\">\n      @if (squareColor()) {\n      <div class=\"color-square\" [style.background-color]=\"toChartColor(squareColor())\"></div>\n      }\n      <h5\n        [class.has-more-info]=\"tooltipClickable()\"\n        (click)=\"$event.stopPropagation(); tooltipClickable() && tooltipHeaderClicked.emit()\"\n      >\n        <ng-content select=\"cng-title\" />\n      </h5>\n    </div>\n    <cds-icon shape=\"times\" class=\"tooltip-close-btn\" (click)=\"$event.stopPropagation(); tooltipClosed.emit()\" />\n  </div>\n  <div class=\"tooltip-content\">\n    <ng-content />\n  </div>\n  <hr />\n  <div class=\"tooltip-footer\"><ng-content select=\"cng-footer\" /></div>\n</div>\n", styles: [".tooltip-container{position:absolute;background:var(--clr-color-neutral-0, #fff);border:1px solid var(--clr-color-neutral-400, #ccc);border-radius:4px;box-shadow:0 2px 8px #00000026;padding:12px 16px;z-index:1000;min-width:150px;transform:translate(-50%,-100%) translateY(-10px)}.tooltip-container.orientation-bottom{transform:translate(-50%) translateY(10px)}.tooltip-header{display:flex;flex-direction:row;justify-content:space-between;gap:8px}.tooltip-header h5{margin:0;font-size:14px;font-weight:600;color:var(--clr-color-neutral-1000, #000);flex-grow:1;max-width:200px}.tooltip-close-btn{cursor:pointer;color:var(--clr-close-color)}.tooltip-close-btn:hover,.tooltip-close-btn:focus{color:var(--clr-close-color-hover)}.color-label-wrapper{display:flex;flex-direction:row;gap:8px}.tooltip-content{font-size:12px;color:var(--clr-color-neutral-700, #565656)}hr:has(+.tooltip-footer:empty){display:none}hr{margin:6px -16px}\n"] }]
-        }] });
+            args: [{ selector: 'cng-chart-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ClrIcon], template: "<div\n  class=\"tooltip-container\"\n  [class.orientation-bottom]=\"tooltipOrientation() === 'bottom'\"\n  (click)=\"$event.stopPropagation()\"\n  [style.left.px]=\"tooltipPosition().x\"\n  [style.top.px]=\"tooltipPosition().y\"\n>\n  <div class=\"tooltip-header\">\n    <div class=\"color-label-wrapper\">\n      @if (squareColor()) {\n      <div class=\"color-square\" [style.background-color]=\"toChartColor(squareColor())\"></div>\n      }\n      <h5\n        [class.has-more-info]=\"tooltipClickable()\"\n        (click)=\"$event.stopPropagation(); tooltipClickable() && tooltipHeaderClicked.emit()\"\n      >\n        <ng-content select=\"cng-title\" />\n      </h5>\n    </div>\n    <cds-icon shape=\"times\" class=\"tooltip-close-btn\" (click)=\"$event.stopPropagation(); tooltipClosed.emit()\" />\n  </div>\n  <div class=\"tooltip-content\">\n    <ng-content />\n  </div>\n  <hr />\n  <div class=\"tooltip-footer\"><ng-content select=\"cng-footer\" /></div>\n</div>\n", styles: [".tooltip-container{position:absolute;background:var(--cds-global-color-gray-0, #fff);border:1px solid var(--cds-global-color-gray-400, #ccc);border-radius:4px;box-shadow:0 2px 8px #00000026;padding:12px 16px;z-index:1000;min-width:150px;transform:translate(-50%,-100%) translateY(-10px)}.tooltip-container.orientation-bottom{transform:translate(-50%) translateY(10px)}.tooltip-header{display:flex;flex-direction:row;justify-content:space-between;gap:8px}.tooltip-header h5{margin:0;font-size:14px;font-weight:600;color:var(--cds-global-color-gray-1000, #000);flex-grow:1;max-width:200px}.tooltip-close-btn{cursor:pointer;color:var(--clr-close-color)}.tooltip-close-btn:hover,.tooltip-close-btn:focus{color:var(--clr-close-color-hover)}.color-label-wrapper{display:flex;flex-direction:row;gap:8px}.tooltip-content{font-size:12px;color:var(--cds-global-color-gray-700, #565656)}hr:has(+.tooltip-footer:empty){display:none}hr{margin:6px -16px}\n"] }]
+        }], propDecorators: { tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: true }] }], tooltipOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipOrientation", required: false }] }], squareColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "squareColor", required: true }] }], tooltipClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipClickable", required: false }] }], tooltipClosed: [{ type: i0.Output, args: ["tooltipClosed"] }], tooltipHeaderClicked: [{ type: i0.Output, args: ["tooltipHeaderClicked"] }] } });
 
 // Clarity actually has an "outside-click" directive, but they don't export it 🤷
 class OutsideClickDirective {
@@ -507,15 +509,15 @@ class OutsideClickDirective {
         const listener = this.renderer.listen('document', 'click', () => this.outsideClick.emit());
         this.destroyRef.onDestroy(listener);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: OutsideClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: OutsideClickDirective, isStandalone: true, selector: "[cngOutsideClick]", outputs: { outsideClick: "cngOutsideClick" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OutsideClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: OutsideClickDirective, isStandalone: true, selector: "[cngOutsideClick]", outputs: { outsideClick: "cngOutsideClick" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: OutsideClickDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OutsideClickDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cngOutsideClick]',
                 }]
-        }] });
+        }], propDecorators: { outsideClick: [{ type: i0.Output, args: ["cngOutsideClick"] }] } });
 
 /**
  * Enum for the Screen size in pixels, defined by clarity here https://vmware.github.io/clarity/documentation/v0.12/grid
@@ -586,10 +588,10 @@ class ScreenStateService {
             this.isUserAgentMobile = MOBILE_USERAGENT_REGEX.test(this._document.defaultView.navigator.userAgent);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ScreenStateService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ScreenStateService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ScreenStateService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ScreenStateService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ScreenStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ScreenStateService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: Document, decorators: [{
@@ -599,8 +601,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 
 class WindowResizeDirective {
     constructor() {
-        this.debounce = input(250);
-        this.includeFirst = input(false);
+        this.debounce = input(250, ...(ngDevMode ? [{ debugName: "debounce" }] : /* istanbul ignore next */ []));
+        this.includeFirst = input(false, ...(ngDevMode ? [{ debugName: "includeFirst" }] : /* istanbul ignore next */ []));
         this.windowResize = output({ alias: 'cngWindowResize' });
         this.screenStateService = inject(ScreenStateService);
         this.destroyRef = inject(DestroyRef);
@@ -612,51 +614,51 @@ class WindowResizeDirective {
             .pipe(takeUntilDestroyed(this.destroyRef), skip(skipCount), debounceTime(this.debounce()))
             .subscribe(width => this.windowResize.emit(width));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WindowResizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.18", type: WindowResizeDirective, isStandalone: true, selector: "[cngWindowResize]", inputs: { debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, includeFirst: { classPropertyName: "includeFirst", publicName: "includeFirst", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { windowResize: "cngWindowResize" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: WindowResizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.13", type: WindowResizeDirective, isStandalone: true, selector: "[cngWindowResize]", inputs: { debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, includeFirst: { classPropertyName: "includeFirst", publicName: "includeFirst", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { windowResize: "cngWindowResize" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WindowResizeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: WindowResizeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cngWindowResize]',
                 }]
-        }] });
+        }], propDecorators: { debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }], includeFirst: [{ type: i0.Input, args: [{ isSignal: true, alias: "includeFirst", required: false }] }], windowResize: [{ type: i0.Output, args: ["cngWindowResize"] }] } });
 
 class BarChartComponent extends ChartBase {
     static { this.HORIZONTAL_BAR_MIN_HEIGHT_PX = 25; }
     constructor() {
         super();
-        this.data = input.required();
-        this.stacks = input(undefined);
-        this.orientation = input.required();
-        this.tooltipOrientation = input('top');
-        this.barSizePx = input(15);
-        this.barAreaSizePx = input(40);
-        this.tooltipPercentOfTotal = input('of total');
-        this.tooltipPercentOf = input('of');
-        this.noItemsMessage = input(NO_ITEMS_MESSAGE);
-        this.tooManyItemsMessage = input(TOO_MANY_ITEMS_MESSAGE);
-        this.tooManyItemsGroupedMessage = input(TOO_MANY_ITEMS_GROUPED_MESSAGE);
-        this.showLegend = input(true);
-        this.showExportButton = input(false);
-        this.exportButtonTitle = input('Export');
-        this.exportFilename = input('bar-chart');
+        this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        this.stacks = input(undefined, ...(ngDevMode ? [{ debugName: "stacks" }] : /* istanbul ignore next */ []));
+        this.orientation = input.required(...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        this.tooltipOrientation = input('top', ...(ngDevMode ? [{ debugName: "tooltipOrientation" }] : /* istanbul ignore next */ []));
+        this.barSizePx = input(15, ...(ngDevMode ? [{ debugName: "barSizePx" }] : /* istanbul ignore next */ []));
+        this.barAreaSizePx = input(40, ...(ngDevMode ? [{ debugName: "barAreaSizePx" }] : /* istanbul ignore next */ []));
+        this.tooltipPercentOfTotal = input('of total', ...(ngDevMode ? [{ debugName: "tooltipPercentOfTotal" }] : /* istanbul ignore next */ []));
+        this.tooltipPercentOf = input('of', ...(ngDevMode ? [{ debugName: "tooltipPercentOf" }] : /* istanbul ignore next */ []));
+        this.noItemsMessage = input(NO_ITEMS_MESSAGE, ...(ngDevMode ? [{ debugName: "noItemsMessage" }] : /* istanbul ignore next */ []));
+        this.tooManyItemsMessage = input(TOO_MANY_ITEMS_MESSAGE, ...(ngDevMode ? [{ debugName: "tooManyItemsMessage" }] : /* istanbul ignore next */ []));
+        this.tooManyItemsGroupedMessage = input(TOO_MANY_ITEMS_GROUPED_MESSAGE, ...(ngDevMode ? [{ debugName: "tooManyItemsGroupedMessage" }] : /* istanbul ignore next */ []));
+        this.showLegend = input(true, ...(ngDevMode ? [{ debugName: "showLegend" }] : /* istanbul ignore next */ []));
+        this.showExportButton = input(false, ...(ngDevMode ? [{ debugName: "showExportButton" }] : /* istanbul ignore next */ []));
+        this.exportButtonTitle = input('Export', ...(ngDevMode ? [{ debugName: "exportButtonTitle" }] : /* istanbul ignore next */ []));
+        this.exportFilename = input('bar-chart', ...(ngDevMode ? [{ debugName: "exportFilename" }] : /* istanbul ignore next */ []));
         /** Optional label rendered below the X axis. */
-        this.xAxisLabel = input('');
+        this.xAxisLabel = input('', ...(ngDevMode ? [{ debugName: "xAxisLabel" }] : /* istanbul ignore next */ []));
         /** Optional label rendered rotated to the left of the Y axis. */
-        this.yAxisLabel = input('');
+        this.yAxisLabel = input('', ...(ngDevMode ? [{ debugName: "yAxisLabel" }] : /* istanbul ignore next */ []));
         this.valueClicked = output();
         this.textRenderer = new TextRenderer();
         this.MARGIN = { top: 10, right: 20, bottom: 30, left: 65 };
         this.toChartColor = toChartColor;
-        this.total = computed(() => this.data().reduce((acc, v) => acc + v.value, 0));
+        this.total = computed(() => this.data().reduce((acc, v) => acc + v.value, 0), ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
         this.totalByStack = computed(() => {
             const totals = {};
             for (const d of this.slicedDataPoints()) {
                 totals[d.stackKey] = (totals[d.stackKey] ?? 0) + d.value;
             }
             return totals;
-        });
+        }, ...(ngDevMode ? [{ debugName: "totalByStack" }] : /* istanbul ignore next */ []));
         this.keysByStack = computed(() => {
             const keys = {};
             for (const d of this.slicedDataPoints()) {
@@ -666,14 +668,14 @@ class BarChartComponent extends ChartBase {
                 keys[d.stackKey].push(d.key);
             }
             return keys;
-        });
+        }, ...(ngDevMode ? [{ debugName: "keysByStack" }] : /* istanbul ignore next */ []));
         // Count the total amount of bars by either the stacKey (if stacked) or the key (if not stacked)
         this.totalBarCount = computed(() => new Set(this.data()
             .filter(d => d.value > 0)
-            .map(d => d.stackKey ?? d.key)).size);
+            .map(d => d.stackKey ?? d.key)).size, ...(ngDevMode ? [{ debugName: "totalBarCount" }] : /* istanbul ignore next */ []));
         this.showingBarCount = computed(() => new Set(this.slicedDataPoints()
             .filter(d => d.value > 0)
-            .map(d => d.stackKey)).size);
+            .map(d => d.stackKey)).size, ...(ngDevMode ? [{ debugName: "showingBarCount" }] : /* istanbul ignore next */ []));
         this.alertMessageAndType = computed(() => {
             if (this.loading()) {
                 return undefined;
@@ -688,7 +690,7 @@ class BarChartComponent extends ChartBase {
                 ];
             }
             return undefined;
-        });
+        }, ...(ngDevMode ? [{ debugName: "alertMessageAndType" }] : /* istanbul ignore next */ []));
         this.legendItems = computed(() => {
             if (!this.showLegend() || !this.data()?.length) {
                 return [];
@@ -708,7 +710,7 @@ class BarChartComponent extends ChartBase {
             }
             // Non-stacked: one entry per bar
             return this.data().map(item => ({ label: item.fullLabel ?? item.label, color: item.color }));
-        });
+        }, ...(ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []));
         /** Computed values used by the tooltip to avoid inline logic in the template. */
         this.tooltipKey = computed(() => {
             const item = this.selectedItem();
@@ -716,21 +718,21 @@ class BarChartComponent extends ChartBase {
                 return undefined;
             }
             return this.stacks()?.length ? this.keysByStack()[item.stackKey] ?? [] : [item.key];
-        });
+        }, ...(ngDevMode ? [{ debugName: "tooltipKey" }] : /* istanbul ignore next */ []));
         this.tooltipLabel = computed(() => {
             const item = this.selectedItem();
             if (!item) {
                 return undefined;
             }
             return this.stacks()?.find(stack => stack.stackKey === item.stackKey)?.label ?? item.fullLabel ?? item.label;
-        });
+        }, ...(ngDevMode ? [{ debugName: "tooltipLabel" }] : /* istanbul ignore next */ []));
         this.tooltipValue = computed(() => {
             const item = this.selectedItem();
             if (!item) {
                 return undefined;
             }
             return this.stacks()?.length ? this.totalByStack()[item.stackKey] ?? 0 : item.value;
-        });
+        }, ...(ngDevMode ? [{ debugName: "tooltipValue" }] : /* istanbul ignore next */ []));
         /** Slices belonging to the currently selected stack – used by the tooltip @for loop. */
         this.selectedStackSlices = computed(() => {
             const item = this.selectedItem();
@@ -738,9 +740,9 @@ class BarChartComponent extends ChartBase {
                 return [];
             }
             return this.slicedDataPoints().filter(d => d.stackKey === item.stackKey);
-        });
-        this.maxAmountOfItems = signal(undefined);
-        this.slicedDataPoints = signal([]);
+        }, ...(ngDevMode ? [{ debugName: "selectedStackSlices" }] : /* istanbul ignore next */ []));
+        this.maxAmountOfItems = signal(undefined, ...(ngDevMode ? [{ debugName: "maxAmountOfItems" }] : /* istanbul ignore next */ []));
+        this.slicedDataPoints = signal([], ...(ngDevMode ? [{ debugName: "slicedDataPoints" }] : /* istanbul ignore next */ []));
         this.barSelection = null;
         this.labelSelection = null;
     }
@@ -901,7 +903,7 @@ class BarChartComponent extends ChartBase {
             .call(this.addBarClickHandler.bind(this));
     }
     addTextCommonInfo(g) {
-        g.style('font-size', '11px').style('fill', 'var(--clr-color-neutral-600, #666)');
+        g.style('font-size', '11px').style('fill', 'var(--cds-global-color-construction-400, #666)');
     }
     addTextHoverHandlers(g) {
         g.on('mouseover', (_e, d) => this.setHoverStylesByStackKey(d.stackKey, undefined, true)) //
@@ -956,7 +958,7 @@ class BarChartComponent extends ChartBase {
         });
     }
     styleGridLines(g) {
-        g.selectAll('.tick line').style('stroke', 'var(--clr-color-neutral-200, #e8e8e8)');
+        g.selectAll('.tick line').style('stroke', 'var(--cds-global-color-gray-200, #e8e8e8)');
     }
     addVerticalBarRectangle(x, y, extraSize = 0) {
         return this.barSelection
@@ -991,7 +993,7 @@ class BarChartComponent extends ChartBase {
             .append('text')
             .attr('text-anchor', 'middle')
             .style('font-size', '12px')
-            .style('fill', 'var(--clr-color-neutral-600, #666)')
+            .style('fill', 'var(--cds-global-color-construction-400, #666)')
             .text(text)
             .attr('x', x)
             .attr('y', y);
@@ -1034,13 +1036,13 @@ class BarChartComponent extends ChartBase {
         }
         return Math.floor(height / BarChartComponent.HORIZONTAL_BAR_MIN_HEIGHT_PX);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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 }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, xAxisLabel: { classPropertyName: "xAxisLabel", publicName: "xAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yAxisLabel: { classPropertyName: "yAxisLabel", publicName: "yAxisLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\">\n  <div class=\"chart-area\" #container (cngWindowResize)=\"updateChart()\" [class.pt-3]=\"alertMessageAndType()\">\n    <svg [class.d-none]=\"loading() || !data()?.length\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"!stacks() ? selectedItem()?.color : undefined\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"valueClicked.emit({ key: tooltipKey(), label: tooltipLabel(), value: tooltipValue() })\"\n    >\n      <ng-container ngProjectAs=\"cng-title\"> ({{ tooltipValue() }}) {{ tooltipLabel() }}</ng-container>\n\n      <p class=\"mt-0\">\n        {{ (100 * tooltipValue()) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n\n      @if (stacks()) { @for (slice of selectedStackSlices(); track slice.key) {\n      <div class=\"mt-0-5 d-flex\">\n        <div class=\"color-square mr-0-5\" [style.background-color]=\"toChartColor(slice.color)\"></div>\n        <strong>{{ slice.fullLabel || slice.label }}:&nbsp;</strong>\n        <span\n          class=\"has-more-info\"\n          (click)=\"\n                  valueClicked.emit({\n                    key: [slice.key],\n                    label: slice.fullLabel || slice.label,\n                    value: slice.value,\n                  })\n                \"\n        >\n          {{ slice.value }}\n        </span>\n      </div>\n      <p class=\"mt-0-25 percentage-info\">\n        {{ (100 * slice.value) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n        {{ slice.percentageOfStack | number : '1.0-2' }}% {{ tooltipPercentOf() }} \"{{ tooltipLabel() }}\"\n      </p>\n      } }\n    </cng-chart-tooltip>\n    } @if (loading() || !data()?.length) {\n    <cng-bar-chart-skeleton [orientation]=\"orientation()\" [skeletonType]=\"loading() ? 'loading' : 'placeholder'\" />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay [alertType]=\"alertMessageAndType()[1]\" [alertMessage]=\"alertMessageAndType()[0]\" />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length) {\n  <cng-chart-legend [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && data()?.length) {\n  <cng-chart-export-button\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.percentage-info{margin-left:15px}\n"], dependencies: [{ kind: "component", type: ChartAlertOverlayComponent, selector: "cng-chart-alert-overlay", inputs: ["alertMessage", "alertType"] }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { kind: "component", type: ChartLegendComponent, selector: "cng-chart-legend", inputs: ["items"] }, { kind: "component", type: ChartSkeletonComponent, selector: "cng-bar-chart-skeleton", inputs: ["skeletonType", "orientation"] }, { kind: "component", type: ChartTooltipComponent, selector: "cng-chart-tooltip", inputs: ["tooltipPosition", "tooltipOrientation", "squareColor", "tooltipClickable"], outputs: ["tooltipClosed", "tooltipHeaderClicked"] }, { kind: "directive", type: OutsideClickDirective, selector: "[cngOutsideClick]", outputs: ["cngOutsideClick"] }, { kind: "directive", type: WindowResizeDirective, selector: "[cngWindowResize]", inputs: ["debounce", "includeFirst"], outputs: ["cngWindowResize"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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 }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, xAxisLabel: { classPropertyName: "xAxisLabel", publicName: "xAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yAxisLabel: { classPropertyName: "yAxisLabel", publicName: "yAxisLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\">\n  <div class=\"chart-area\" #container (cngWindowResize)=\"updateChart()\" [class.pt-3]=\"alertMessageAndType()\">\n    <svg [class.d-none]=\"loading() || !data()?.length\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"!stacks() ? selectedItem()?.color : undefined\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"valueClicked.emit({ key: tooltipKey(), label: tooltipLabel(), value: tooltipValue() })\"\n    >\n      <ng-container ngProjectAs=\"cng-title\"> ({{ tooltipValue() }}) {{ tooltipLabel() }}</ng-container>\n\n      <p class=\"mt-0\">\n        {{ (100 * tooltipValue()) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n\n      @if (stacks()) { @for (slice of selectedStackSlices(); track slice.key) {\n      <div class=\"mt-0-5 d-flex\">\n        <div class=\"color-square mr-0-5\" [style.background-color]=\"toChartColor(slice.color)\"></div>\n        <strong>{{ slice.fullLabel || slice.label }}:&nbsp;</strong>\n        <span\n          class=\"has-more-info\"\n          (click)=\"\n                  valueClicked.emit({\n                    key: [slice.key],\n                    label: slice.fullLabel || slice.label,\n                    value: slice.value,\n                  })\n                \"\n        >\n          {{ slice.value }}\n        </span>\n      </div>\n      <p class=\"mt-0-25 percentage-info\">\n        {{ (100 * slice.value) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n        {{ slice.percentageOfStack | number : '1.0-2' }}% {{ tooltipPercentOf() }} \"{{ tooltipLabel() }}\"\n      </p>\n      } }\n    </cng-chart-tooltip>\n    } @if (loading() || !data()?.length) {\n    <cng-bar-chart-skeleton [orientation]=\"orientation()\" [skeletonType]=\"loading() ? 'loading' : 'placeholder'\" />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay [alertType]=\"alertMessageAndType()[1]\" [alertMessage]=\"alertMessageAndType()[0]\" />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length) {\n  <cng-chart-legend [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && data()?.length) {\n  <cng-chart-export-button\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.percentage-info{margin-left:15px}\n"], dependencies: [{ kind: "component", type: ChartAlertOverlayComponent, selector: "cng-chart-alert-overlay", inputs: ["alertMessage", "alertType"] }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { kind: "component", type: ChartLegendComponent, selector: "cng-chart-legend", inputs: ["items"] }, { kind: "component", type: ChartSkeletonComponent, selector: "cng-bar-chart-skeleton", inputs: ["skeletonType", "orientation"] }, { kind: "component", type: ChartTooltipComponent, selector: "cng-chart-tooltip", inputs: ["tooltipPosition", "tooltipOrientation", "squareColor", "tooltipClickable"], outputs: ["tooltipClosed", "tooltipHeaderClicked"] }, { kind: "directive", type: OutsideClickDirective, selector: "[cngOutsideClick]", outputs: ["cngOutsideClick"] }, { kind: "directive", type: WindowResizeDirective, selector: "[cngWindowResize]", inputs: ["debounce", "includeFirst"], outputs: ["cngWindowResize"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BarChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BarChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'clr-bar-chart', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"chart-container\">\n  <div class=\"chart-area\" #container (cngWindowResize)=\"updateChart()\" [class.pt-3]=\"alertMessageAndType()\">\n    <svg [class.d-none]=\"loading() || !data()?.length\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"!stacks() ? selectedItem()?.color : undefined\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"valueClicked.emit({ key: tooltipKey(), label: tooltipLabel(), value: tooltipValue() })\"\n    >\n      <ng-container ngProjectAs=\"cng-title\"> ({{ tooltipValue() }}) {{ tooltipLabel() }}</ng-container>\n\n      <p class=\"mt-0\">\n        {{ (100 * tooltipValue()) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n\n      @if (stacks()) { @for (slice of selectedStackSlices(); track slice.key) {\n      <div class=\"mt-0-5 d-flex\">\n        <div class=\"color-square mr-0-5\" [style.background-color]=\"toChartColor(slice.color)\"></div>\n        <strong>{{ slice.fullLabel || slice.label }}:&nbsp;</strong>\n        <span\n          class=\"has-more-info\"\n          (click)=\"\n                  valueClicked.emit({\n                    key: [slice.key],\n                    label: slice.fullLabel || slice.label,\n                    value: slice.value,\n                  })\n                \"\n        >\n          {{ slice.value }}\n        </span>\n      </div>\n      <p class=\"mt-0-25 percentage-info\">\n        {{ (100 * slice.value) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n        {{ slice.percentageOfStack | number : '1.0-2' }}% {{ tooltipPercentOf() }} \"{{ tooltipLabel() }}\"\n      </p>\n      } }\n    </cng-chart-tooltip>\n    } @if (loading() || !data()?.length) {\n    <cng-bar-chart-skeleton [orientation]=\"orientation()\" [skeletonType]=\"loading() ? 'loading' : 'placeholder'\" />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay [alertType]=\"alertMessageAndType()[1]\" [alertMessage]=\"alertMessageAndType()[0]\" />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length) {\n  <cng-chart-legend [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && data()?.length) {\n  <cng-chart-export-button\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.percentage-info{margin-left:15px}\n"] }]
-        }], ctorParameters: () => [] });
+        }], 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 }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], exportButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportButtonTitle", required: false }] }], exportFilename: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFilename", required: false }] }], xAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAxisLabel", required: false }] }], yAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxisLabel", required: false }] }], valueClicked: [{ type: i0.Output, args: ["valueClicked"] }] } });
 
 /*
  * Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
@@ -1130,7 +1132,7 @@ function drawXYAxes(g, x, y, opts) {
         .call(axisBottom(x).tickFormat((d) => xLabelMap.get(d) ?? d))
         .selectAll('text')
         .style('font-size', '11px')
-        .style('fill', 'var(--clr-color-neutral-600, #666)');
+        .style('fill', 'var(--cds-global-color-construction-400, #666)');
     // Y axis
     const tickValues = computeYTickValues(y);
     const tickFormat = computeYTickFormat(y);
@@ -1138,7 +1140,7 @@ function drawXYAxes(g, x, y, opts) {
         .call(axisLeft(y).tickValues(tickValues).tickSize(-width).tickFormat(tickFormat))
         .selectAll('text')
         .style('font-size', '11px')
-        .style('fill', 'var(--clr-color-neutral-600, #666)');
+        .style('fill', 'var(--cds-global-color-construction-400, #666)');
     // Optional X axis description label
     if (xAxisLabel) {
         g.append('text')
@@ -1146,7 +1148,7 @@ function drawXYAxes(g, x, y, opts) {
             .attr('y', height + 40)
             .attr('text-anchor', 'middle')
             .style('font-size', '12px')
-            .style('fill', 'var(--clr-color-neutral-600, #666)')
+            .style('fill', 'var(--cds-global-color-construction-400, #666)')
             .text(xAxisLabel);
     }
     // Optional Y axis description label (rotated, centred in the left-margin band)
@@ -1157,7 +1159,7 @@ function drawXYAxes(g, x, y, opts) {
             .attr('y', -(effectiveLeft / 2))
             .attr('text-anchor', 'middle')
             .style('font-size', '12px')
-            .style('fill', 'var(--clr-color-neutral-600, #666)')
+            .style('fill', 'var(--cds-global-color-construction-400, #666)')
             .text(yAxisLabel);
     }
 }
@@ -1165,32 +1167,32 @@ function drawXYAxes(g, x, y, opts) {
  * Styles all D3 grid tick lines inside `g` with the neutral chart grid color.
  */
 function styleGridLines(g) {
-    g.selectAll('.tick line').style('stroke', 'var(--clr-color-neutral-200, #e8e8e8)');
+    g.selectAll('.tick line').style('stroke', 'var(--cds-global-color-gray-200, #e8e8e8)');
 }
 
 class LineChartComponent extends ChartBase {
     constructor() {
         super(...arguments);
-        this.series = input.required();
-        this.tooltipOrientation = input('top');
-        this.showArea = input(false);
-        this.showLegend = input(true);
-        this.showValues = input(false);
-        this.showExportButton = input(false);
-        this.exportButtonTitle = input('Export');
-        this.exportFilename = input('line-chart');
-        this.noItemsMessage = input(NO_ITEMS_MESSAGE);
-        this.tooltipPercentOfTotal = input('of total');
+        this.series = input.required(...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
+        this.tooltipOrientation = input('top', ...(ngDevMode ? [{ debugName: "tooltipOrientation" }] : /* istanbul ignore next */ []));
+        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.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 */ []));
+        this.noItemsMessage = input(NO_ITEMS_MESSAGE, ...(ngDevMode ? [{ debugName: "noItemsMessage" }] : /* istanbul ignore next */ []));
+        this.tooltipPercentOfTotal = input('of total', ...(ngDevMode ? [{ debugName: "tooltipPercentOfTotal" }] : /* istanbul ignore next */ []));
         /** Optional label rendered below the X axis. */
-        this.xAxisLabel = input('');
+        this.xAxisLabel = input('', ...(ngDevMode ? [{ debugName: "xAxisLabel" }] : /* istanbul ignore next */ []));
         /** Optional label rendered rotated to the left of the Y axis. */
-        this.yAxisLabel = input('');
-        this.yMin = input(0);
-        this.autoscaleYAxis = input(false);
+        this.yAxisLabel = input('', ...(ngDevMode ? [{ debugName: "yAxisLabel" }] : /* istanbul ignore next */ []));
+        this.yMin = input(0, ...(ngDevMode ? [{ debugName: "yMin" }] : /* istanbul ignore next */ []));
+        this.autoscaleYAxis = input(false, ...(ngDevMode ? [{ debugName: "autoscaleYAxis" }] : /* istanbul ignore next */ []));
         this.valueClicked = output();
         this.MARGIN = { top: 20, right: 30, bottom: 30, left: 65 };
-        this.hasData = computed(() => this.series().some(s => s.data.length > 0));
-        this.total = computed(() => this.series().reduce((acc, s) => acc + s.data.reduce((a, d) => a + d.value, 0), 0));
+        this.hasData = computed(() => this.series().some(s => s.data.length > 0), ...(ngDevMode ? [{ debugName: "hasData" }] : /* istanbul ignore next */ []));
+        this.total = computed(() => this.series().reduce((acc, s) => acc + s.data.reduce((a, d) => a + d.value, 0), 0), ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
         this.alertMessageAndType = computed(() => {
             if (this.loading()) {
                 return undefined;
@@ -1199,13 +1201,13 @@ class LineChartComponent extends ChartBase {
                 return [this.noItemsMessage(), NO_ITEMS_ALERT_TYPE];
             }
             return undefined;
-        });
+        }, ...(ngDevMode ? [{ debugName: "alertMessageAndType" }] : /* istanbul ignore next */ []));
         this.legendItems = computed(() => {
             if (!this.showLegend()) {
                 return [];
             }
             return this.series().map(s => ({ label: s.label, color: s.color }));
-        });
+        }, ...(ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []));
     }
     ngOnChanges(_changes) {
         if (!this.svg) {
@@ -1316,35 +1318,35 @@ 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: "19.2.18", ngImport: i0, type: LineChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: LineChartComponent, isStandalone: false, selector: "clr-line-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, tooltipOrientation: { classPropertyName: "tooltipOrientation", publicName: "tooltipOrientation", isSignal: true, isRequired: false, transformFunction: null }, showArea: { classPropertyName: "showArea", publicName: "showArea", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, tooltipPercentOfTotal: { classPropertyName: "tooltipPercentOfTotal", publicName: "tooltipPercentOfTotal", isSignal: true, isRequired: false, transformFunction: null }, xAxisLabel: { classPropertyName: "xAxisLabel", publicName: "xAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yAxisLabel: { classPropertyName: "yAxisLabel", publicName: "yAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yMin: { classPropertyName: "yMin", publicName: "yMin", isSignal: true, isRequired: false, transformFunction: null }, autoscaleYAxis: { classPropertyName: "autoscaleYAxis", publicName: "autoscaleYAxis", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\">\n  <div class=\"chart-area\" #container (cngWindowResize)=\"updateChart()\" [class.pt-3]=\"alertMessageAndType()\">\n    <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"selectedItem()?.color\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"\n          valueClicked.emit({\n            seriesKey: selectedItem().seriesKey,\n            seriesLabel: selectedItem().seriesLabel,\n            x: selectedItem().x,\n            xLabel: selectedItem().xLabel,\n            value: selectedItem().value,\n          })\n        \"\n    >\n      <ng-container ngProjectAs=\"cng-title\">\n        ({{ selectedItem().value }}) {{ selectedItem().xLabel || selectedItem().x }}\n      </ng-container>\n\n      <p class=\"mt-0\">\n        <strong>{{ selectedItem().seriesLabel }}:</strong>\n        {{ selectedItem().value }}\n      </p>\n      <p class=\"mt-0\">\n        {{ (100 * selectedItem().value) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n    </cng-chart-tooltip>\n    } @if (loading() || !hasData()) {\n    <cng-bar-chart-skeleton orientation=\"vertical\" [skeletonType]=\"loading() ? 'loading' : 'placeholder'\" />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay [alertType]=\"alertMessageAndType()[1]\" [alertMessage]=\"alertMessageAndType()[0]\" />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length) {\n  <cng-chart-legend [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && hasData()) {\n  <cng-chart-export-button\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.line,.area{pointer-events:none}.dot{transition:r .1s ease}\n"], dependencies: [{ kind: "component", type: ChartAlertOverlayComponent, selector: "cng-chart-alert-overlay", inputs: ["alertMessage", "alertType"] }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { kind: "component", type: ChartLegendComponent, selector: "cng-chart-legend", inputs: ["items"] }, { kind: "component", type: ChartSkeletonComponent, selector: "cng-bar-chart-skeleton", inputs: ["skeletonType", "orientation"] }, { kind: "component", type: ChartTooltipComponent, selector: "cng-chart-tooltip", inputs: ["tooltipPosition", "tooltipOrientation", "squareColor", "tooltipClickable"], outputs: ["tooltipClosed", "tooltipHeaderClicked"] }, { kind: "directive", type: OutsideClickDirective, selector: "[cngOutsideClick]", outputs: ["cngOutsideClick"] }, { kind: "directive", type: WindowResizeDirective, selector: "[cngWindowResize]", inputs: ["debounce", "includeFirst"], outputs: ["cngWindowResize"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: LineChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: LineChartComponent, isStandalone: false, selector: "clr-line-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, tooltipOrientation: { classPropertyName: "tooltipOrientation", publicName: "tooltipOrientation", isSignal: true, isRequired: false, transformFunction: null }, showArea: { classPropertyName: "showArea", publicName: "showArea", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, tooltipPercentOfTotal: { classPropertyName: "tooltipPercentOfTotal", publicName: "tooltipPercentOfTotal", isSignal: true, isRequired: false, transformFunction: null }, xAxisLabel: { classPropertyName: "xAxisLabel", publicName: "xAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yAxisLabel: { classPropertyName: "yAxisLabel", publicName: "yAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yMin: { classPropertyName: "yMin", publicName: "yMin", isSignal: true, isRequired: false, transformFunction: null }, autoscaleYAxis: { classPropertyName: "autoscaleYAxis", publicName: "autoscaleYAxis", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\">\n  <div class=\"chart-area\" #container (cngWindowResize)=\"updateChart()\" [class.pt-3]=\"alertMessageAndType()\">\n    <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"selectedItem()?.color\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"\n          valueClicked.emit({\n            seriesKey: selectedItem().seriesKey,\n            seriesLabel: selectedItem().seriesLabel,\n            x: selectedItem().x,\n            xLabel: selectedItem().xLabel,\n            value: selectedItem().value,\n          })\n        \"\n    >\n      <ng-container ngProjectAs=\"cng-title\">\n        ({{ selectedItem().value }}) {{ selectedItem().xLabel || selectedItem().x }}\n      </ng-container>\n\n      <p class=\"mt-0\">\n        <strong>{{ selectedItem().seriesLabel }}:</strong>\n        {{ selectedItem().value }}\n      </p>\n      <p class=\"mt-0\">\n        {{ (100 * selectedItem().value) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n    </cng-chart-tooltip>\n    } @if (loading() || !hasData()) {\n    <cng-bar-chart-skeleton orientation=\"vertical\" [skeletonType]=\"loading() ? 'loading' : 'placeholder'\" />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay [alertType]=\"alertMessageAndType()[1]\" [alertMessage]=\"alertMessageAndType()[0]\" />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length) {\n  <cng-chart-legend [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && hasData()) {\n  <cng-chart-export-button\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.line,.area{pointer-events:none}.dot{transition:r .1s ease}\n"], dependencies: [{ kind: "component", type: ChartAlertOverlayComponent, selector: "cng-chart-alert-overlay", inputs: ["alertMessage", "alertType"] }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { kind: "component", type: ChartLegendComponent, selector: "cng-chart-legend", inputs: ["items"] }, { kind: "component", type: ChartSkeletonComponent, selector: "cng-bar-chart-skeleton", inputs: ["skeletonType", "orientation"] }, { kind: "component", type: ChartTooltipComponent, selector: "cng-chart-tooltip", inputs: ["tooltipPosition", "tooltipOrientation", "squareColor", "tooltipClickable"], outputs: ["tooltipClosed", "tooltipHeaderClicked"] }, { kind: "directive", type: OutsideClickDirective, selector: "[cngOutsideClick]", outputs: ["cngOutsideClick"] }, { kind: "directive", type: WindowResizeDirective, selector: "[cngWindowResize]", inputs: ["debounce", "includeFirst"], outputs: ["cngWindowResize"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: LineChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: LineChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'clr-line-chart', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"chart-container\">\n  <div class=\"chart-area\" #container (cngWindowResize)=\"updateChart()\" [class.pt-3]=\"alertMessageAndType()\">\n    <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"selectedItem()?.color\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"\n          valueClicked.emit({\n            seriesKey: selectedItem().seriesKey,\n            seriesLabel: selectedItem().seriesLabel,\n            x: selectedItem().x,\n            xLabel: selectedItem().xLabel,\n            value: selectedItem().value,\n          })\n        \"\n    >\n      <ng-container ngProjectAs=\"cng-title\">\n        ({{ selectedItem().value }}) {{ selectedItem().xLabel || selectedItem().x }}\n      </ng-container>\n\n      <p class=\"mt-0\">\n        <strong>{{ selectedItem().seriesLabel }}:</strong>\n        {{ selectedItem().value }}\n      </p>\n      <p class=\"mt-0\">\n        {{ (100 * selectedItem().value) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n    </cng-chart-tooltip>\n    } @if (loading() || !hasData()) {\n    <cng-bar-chart-skeleton orientation=\"vertical\" [skeletonType]=\"loading() ? 'loading' : 'placeholder'\" />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay [alertType]=\"alertMessageAndType()[1]\" [alertMessage]=\"alertMessageAndType()[0]\" />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length) {\n  <cng-chart-legend [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && hasData()) {\n  <cng-chart-export-button\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.line,.area{pointer-events:none}.dot{transition:r .1s ease}\n"] }]
-        }] });
+        }], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], tooltipOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipOrientation", required: false }] }], showArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArea", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], exportButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportButtonTitle", required: false }] }], exportFilename: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFilename", required: false }] }], noItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsMessage", required: false }] }], tooltipPercentOfTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPercentOfTotal", required: false }] }], xAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAxisLabel", required: false }] }], yAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxisLabel", required: false }] }], yMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "yMin", required: false }] }], autoscaleYAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoscaleYAxis", required: false }] }], valueClicked: [{ type: i0.Output, args: ["valueClicked"] }] } });
 
 class AreaChartComponent extends ChartBase {
     constructor() {
         super(...arguments);
-        this.series = input.required();
-        this.tooltipOrientation = input('top');
-        this.showLegend = input(true);
-        this.showExportButton = input(false);
-        this.exportButtonTitle = input('Export');
-        this.exportFilename = input('area-chart');
+        this.series = input.required(...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
+        this.tooltipOrientation = input('top', ...(ngDevMode ? [{ debugName: "tooltipOrientation" }] : /* istanbul ignore next */ []));
+        this.showLegend = input(true, ...(ngDevMode ? [{ debugName: "showLegend" }] : /* istanbul ignore next */ []));
+        this.showExportButton = input(false, ...(ngDevMode ? [{ debugName: "showExportButton" }] : /* istanbul ignore next */ []));
+        this.exportButtonTitle = input('Export', ...(ngDevMode ? [{ debugName: "exportButtonTitle" }] : /* istanbul ignore next */ []));
+        this.exportFilename = input('area-chart', ...(ngDevMode ? [{ debugName: "exportFilename" }] : /* istanbul ignore next */ []));
         /** Area fill opacity (0–1). Default: 0.2. */
-        this.areaOpacity = input(0.2);
-        this.noItemsMessage = input(NO_ITEMS_MESSAGE);
-        this.tooltipPercentOfTotal = input('of total');
+        this.areaOpacity = input(0.2, ...(ngDevMode ? [{ debugName: "areaOpacity" }] : /* 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 */ []));
         /** Optional label rendered below the X axis. */
-        this.xAxisLabel = input('');
+        this.xAxisLabel = input('', ...(ngDevMode ? [{ debugName: "xAxisLabel" }] : /* istanbul ignore next */ []));
         /** Optional label rendered rotated to the left of the Y axis. */
-        this.yAxisLabel = input('');
+        this.yAxisLabel = input('', ...(ngDevMode ? [{ debugName: "yAxisLabel" }] : /* istanbul ignore next */ []));
         this.valueClicked = output();
         this.MARGIN = { top: 20, right: 30, bottom: 30, left: 65 };
-        this.hasData = computed(() => this.series().some(s => s.data.length > 0));
-        this.total = computed(() => this.series().reduce((acc, s) => acc + s.data.reduce((a, d) => a + d.value, 0), 0));
+        this.hasData = computed(() => this.series().some(s => s.data.length > 0), ...(ngDevMode ? [{ debugName: "hasData" }] : /* istanbul ignore next */ []));
+        this.total = computed(() => this.series().reduce((acc, s) => acc + s.data.reduce((a, d) => a + d.value, 0), 0), ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
         this.alertMessageAndType = computed(() => {
             if (this.loading()) {
                 return undefined;
@@ -1353,13 +1355,13 @@ class AreaChartComponent extends ChartBase {
                 return [this.noItemsMessage(), NO_ITEMS_ALERT_TYPE];
             }
             return undefined;
-        });
+        }, ...(ngDevMode ? [{ debugName: "alertMessageAndType" }] : /* istanbul ignore next */ []));
         this.legendItems = computed(() => {
             if (!this.showLegend()) {
                 return [];
             }
             return this.series().map(s => ({ label: s.label, color: s.color }));
-        });
+        }, ...(ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []));
     }
     ngOnChanges(_changes) {
         if (!this.svg) {
@@ -1453,48 +1455,48 @@ 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: "19.2.18", ngImport: i0, type: AreaChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: AreaChartComponent, isStandalone: false, selector: "clr-area-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, tooltipOrientation: { classPropertyName: "tooltipOrientation", publicName: "tooltipOrientation", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, areaOpacity: { classPropertyName: "areaOpacity", publicName: "areaOpacity", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, tooltipPercentOfTotal: { classPropertyName: "tooltipPercentOfTotal", publicName: "tooltipPercentOfTotal", isSignal: true, isRequired: false, transformFunction: null }, xAxisLabel: { classPropertyName: "xAxisLabel", publicName: "xAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yAxisLabel: { classPropertyName: "yAxisLabel", publicName: "yAxisLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\">\n  <div class=\"chart-area\" #container (cngWindowResize)=\"updateChart()\" [class.pt-3]=\"alertMessageAndType()\">\n    <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"selectedItem()?.color\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"\n          valueClicked.emit({\n            seriesKey: selectedItem().seriesKey,\n            seriesLabel: selectedItem().seriesLabel,\n            x: selectedItem().x,\n            xLabel: selectedItem().xLabel,\n            value: selectedItem().value,\n          })\n        \"\n    >\n      <ng-container ngProjectAs=\"cng-title\">\n        ({{ selectedItem().value }}) {{ selectedItem().xLabel || selectedItem().x }}\n      </ng-container>\n\n      <p class=\"mt-0\">\n        <strong>{{ selectedItem().seriesLabel }}:</strong>\n        {{ selectedItem().value }}\n      </p>\n      <p class=\"mt-0\">\n        {{ (100 * selectedItem().value) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n    </cng-chart-tooltip>\n    } @if (loading() || !hasData()) {\n    <cng-bar-chart-skeleton orientation=\"vertical\" [skeletonType]=\"loading() ? 'loading' : 'placeholder'\" />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay [alertType]=\"alertMessageAndType()[1]\" [alertMessage]=\"alertMessageAndType()[0]\" />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length) {\n  <cng-chart-legend [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && hasData()) {\n  <cng-chart-export-button\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.line,.area{pointer-events:none}.dot{transition:r .1s ease}\n"], dependencies: [{ kind: "component", type: ChartAlertOverlayComponent, selector: "cng-chart-alert-overlay", inputs: ["alertMessage", "alertType"] }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { kind: "component", type: ChartLegendComponent, selector: "cng-chart-legend", inputs: ["items"] }, { kind: "component", type: ChartSkeletonComponent, selector: "cng-bar-chart-skeleton", inputs: ["skeletonType", "orientation"] }, { kind: "component", type: ChartTooltipComponent, selector: "cng-chart-tooltip", inputs: ["tooltipPosition", "tooltipOrientation", "squareColor", "tooltipClickable"], outputs: ["tooltipClosed", "tooltipHeaderClicked"] }, { kind: "directive", type: OutsideClickDirective, selector: "[cngOutsideClick]", outputs: ["cngOutsideClick"] }, { kind: "directive", type: WindowResizeDirective, selector: "[cngWindowResize]", inputs: ["debounce", "includeFirst"], outputs: ["cngWindowResize"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AreaChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: AreaChartComponent, isStandalone: false, selector: "clr-area-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, tooltipOrientation: { classPropertyName: "tooltipOrientation", publicName: "tooltipOrientation", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, areaOpacity: { classPropertyName: "areaOpacity", publicName: "areaOpacity", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, tooltipPercentOfTotal: { classPropertyName: "tooltipPercentOfTotal", publicName: "tooltipPercentOfTotal", isSignal: true, isRequired: false, transformFunction: null }, xAxisLabel: { classPropertyName: "xAxisLabel", publicName: "xAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yAxisLabel: { classPropertyName: "yAxisLabel", publicName: "yAxisLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\">\n  <div class=\"chart-area\" #container (cngWindowResize)=\"updateChart()\" [class.pt-3]=\"alertMessageAndType()\">\n    <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"selectedItem()?.color\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"\n          valueClicked.emit({\n            seriesKey: selectedItem().seriesKey,\n            seriesLabel: selectedItem().seriesLabel,\n            x: selectedItem().x,\n            xLabel: selectedItem().xLabel,\n            value: selectedItem().value,\n          })\n        \"\n    >\n      <ng-container ngProjectAs=\"cng-title\">\n        ({{ selectedItem().value }}) {{ selectedItem().xLabel || selectedItem().x }}\n      </ng-container>\n\n      <p class=\"mt-0\">\n        <strong>{{ selectedItem().seriesLabel }}:</strong>\n        {{ selectedItem().value }}\n      </p>\n      <p class=\"mt-0\">\n        {{ (100 * selectedItem().value) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n    </cng-chart-tooltip>\n    } @if (loading() || !hasData()) {\n    <cng-bar-chart-skeleton orientation=\"vertical\" [skeletonType]=\"loading() ? 'loading' : 'placeholder'\" />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay [alertType]=\"alertMessageAndType()[1]\" [alertMessage]=\"alertMessageAndType()[0]\" />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length) {\n  <cng-chart-legend [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && hasData()) {\n  <cng-chart-export-button\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.line,.area{pointer-events:none}.dot{transition:r .1s ease}\n"], dependencies: [{ kind: "component", type: ChartAlertOverlayComponent, selector: "cng-chart-alert-overlay", inputs: ["alertMessage", "alertType"] }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { kind: "component", type: ChartLegendComponent, selector: "cng-chart-legend", inputs: ["items"] }, { kind: "component", type: ChartSkeletonComponent, selector: "cng-bar-chart-skeleton", inputs: ["skeletonType", "orientation"] }, { kind: "component", type: ChartTooltipComponent, selector: "cng-chart-tooltip", inputs: ["tooltipPosition", "tooltipOrientation", "squareColor", "tooltipClickable"], outputs: ["tooltipClosed", "tooltipHeaderClicked"] }, { kind: "directive", type: OutsideClickDirective, selector: "[cngOutsideClick]", outputs: ["cngOutsideClick"] }, { kind: "directive", type: WindowResizeDirective, selector: "[cngWindowResize]", inputs: ["debounce", "includeFirst"], outputs: ["cngWindowResize"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AreaChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AreaChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'clr-area-chart', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"chart-container\">\n  <div class=\"chart-area\" #container (cngWindowResize)=\"updateChart()\" [class.pt-3]=\"alertMessageAndType()\">\n    <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"selectedItem()?.color\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"\n          valueClicked.emit({\n            seriesKey: selectedItem().seriesKey,\n            seriesLabel: selectedItem().seriesLabel,\n            x: selectedItem().x,\n            xLabel: selectedItem().xLabel,\n            value: selectedItem().value,\n          })\n        \"\n    >\n      <ng-container ngProjectAs=\"cng-title\">\n        ({{ selectedItem().value }}) {{ selectedItem().xLabel || selectedItem().x }}\n      </ng-container>\n\n      <p class=\"mt-0\">\n        <strong>{{ selectedItem().seriesLabel }}:</strong>\n        {{ selectedItem().value }}\n      </p>\n      <p class=\"mt-0\">\n        {{ (100 * selectedItem().value) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n    </cng-chart-tooltip>\n    } @if (loading() || !hasData()) {\n    <cng-bar-chart-skeleton orientation=\"vertical\" [skeletonType]=\"loading() ? 'loading' : 'placeholder'\" />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay [alertType]=\"alertMessageAndType()[1]\" [alertMessage]=\"alertMessageAndType()[0]\" />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length) {\n  <cng-chart-legend [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && hasData()) {\n  <cng-chart-export-button\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.line,.area{pointer-events:none}.dot{transition:r .1s ease}\n"] }]
-        }] });
+        }], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], tooltipOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipOrientation", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], exportButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportButtonTitle", required: false }] }], exportFilename: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFilename", required: false }] }], areaOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "areaOpacity", required: false }] }], noItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsMessage", required: false }] }], tooltipPercentOfTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPercentOfTotal", required: false }] }], xAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAxisLabel", required: false }] }], yAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxisLabel", required: false }] }], valueClicked: [{ type: i0.Output, args: ["valueClicked"] }] } });
 
 class ComboChartComponent extends ChartBase {
     constructor() {
         super(...arguments);
         // ── Inputs ──────────────────────────────────────────────────────────────────
-        this.barSeries = input([]);
-        this.lineSeries = input([]);
-        this.tooltipOrientation = input('top');
-        this.showLegend = input(true);
-        this.showExportButton = input(false);
-        this.exportButtonTitle = input('Export');
-        this.exportFilename = input('combo-chart');
-        this.noItemsMessage = input(NO_ITEMS_MESSAGE);
-        this.tooltipPercentOfTotal = input('of total');
+        this.barSeries = input([], ...(ngDevMode ? [{ debugName: "barSeries" }] : /* istanbul ignore next */ []));
+        this.lineSeries = input([], ...(ngDevMode ? [{ debugName: "lineSeries" }] : /* istanbul ignore next */ []));
+        this.tooltipOrientation = input('top', ...(ngDevMode ? [{ debugName: "tooltipOrientation" }] : /* istanbul ignore next */ []));
+        this.showLegend = input(true, ...(ngDevMode ? [{ debugName: "showLegend" }] : /* istanbul ignore next */ []));
+        this.showExportButton = input(false, ...(ngDevMode ? [{ debugName: "showExportButton" }] : /* istanbul ignore next */ []));
+        this.exportButtonTitle = input('Export', ...(ngDevMode ? [{ debugName: "exportButtonTitle" }] : /* istanbul ignore next */ []));
+        this.exportFilename = input('combo-chart', ...(ngDevMode ? [{ debugName: "exportFilename" }] : /* 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 */ []));
         /** Optional label rendered below the X axis. */
-        this.xAxisLabel = input('');
+        this.xAxisLabel = input('', ...(ngDevMode ? [{ debugName: "xAxisLabel" }] : /* istanbul ignore next */ []));
         /** Optional label rendered rotated to the left of the Y axis (bar scale). */
-        this.yAxisLabel = input('');
+        this.yAxisLabel = input('', ...(ngDevMode ? [{ debugName: "yAxisLabel" }] : /* istanbul ignore next */ []));
         /** Optional label rendered rotated to the right of the Y axis (line scale). */
-        this.yLineAxisLabel = input('');
+        this.yLineAxisLabel = input('', ...(ngDevMode ? [{ debugName: "yLineAxisLabel" }] : /* istanbul ignore next */ []));
         /** Optional fixed maximum value for the bar Y axis (left). Defaults to auto. */
-        this.yBarMax = input(undefined);
+        this.yBarMax = input(undefined, ...(ngDevMode ? [{ debugName: "yBarMax" }] : /* istanbul ignore next */ []));
         /** Optional fixed maximum value for the line Y axis (right). Defaults to auto. */
-        this.yLineMax = input(undefined);
+        this.yLineMax = input(undefined, ...(ngDevMode ? [{ debugName: "yLineMax" }] : /* istanbul ignore next */ []));
         // ── Outputs ─────────────────────────────────────────────────────────────────
         this.valueClicked = output();
         // ── Layout ───────────────────────────────────────────────────────────────────
         this.MARGIN = { top: 20, right: 30, bottom: 30, left: 65 };
         // ── Computed ─────────────────────────────────────────────────────────────────
-        this.hasData = computed(() => this.barSeries().some(s => s.data.length > 0) || this.lineSeries().some(s => s.data.length > 0));
+        this.hasData = computed(() => this.barSeries().some(s => s.data.length > 0) || this.lineSeries().some(s => s.data.length > 0), ...(ngDevMode ? [{ debugName: "hasData" }] : /* istanbul ignore next */ []));
         this.total = computed(() => {
             const barTotal = this.barSeries().reduce((acc, s) => acc + s.data.reduce((a, d) => a + d.value, 0), 0);
             const lineTotal = this.lineSeries().reduce((acc, s) => acc + s.data.reduce((a, d) => a + d.value, 0), 0);
             return barTotal + lineTotal;
-        });
+        }, ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
         this.alertMessageAndType = computed(() => {
             if (this.loading()) {
                 return undefined;
@@ -1503,7 +1505,7 @@ class ComboChartComponent extends ChartBase {
                 return [this.noItemsMessage(), NO_ITEMS_ALERT_TYPE];
             }
             return undefined;
-        });
+        }, ...(ngDevMode ? [{ debugName: "alertMessageAndType" }] : /* istanbul ignore next */ []));
         this.legendItems = computed(() => {
             if (!this.showLegend()) {
                 return [];
@@ -1511,7 +1513,7 @@ class ComboChartComponent extends ChartBase {
             const barItems = this.barSeries().map(s => ({ label: s.label, color: s.color }));
             const lineItems = this.lineSeries().map(s => ({ label: s.label, color: s.color }));
             return [...barItems, ...lineItems];
-        });
+        }, ...(ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []));
         this._clipIdCounter = 0;
     }
     // ── Lifecycle ────────────────────────────────────────────────────────────────
@@ -1605,11 +1607,14 @@ class ComboChartComponent extends ChartBase {
                 .append('g')
                 .attr('transform', `translate(${width},0)`)
                 .call(axisRight(yLine).tickValues(lineTickValues).tickFormat(lineTickFormat).tickSize(-width));
-            rightAxisG.selectAll('text').style('font-size', '11px').style('fill', 'var(--clr-color-neutral-600, #666)');
+            rightAxisG
+                .selectAll('text')
+                .style('font-size', '11px')
+                .style('fill', 'var(--cds-global-color-construction-400, #666)');
             // Style the line-axis grid lines with a distinct dashed color
             rightAxisG
                 .selectAll('.tick line')
-                .style('stroke', 'var(--clr-color-neutral-400, #b3b3b3)')
+                .style('stroke', 'var(--cds-global-color-gray-400, #b3b3b3)')
                 .style('stroke-dasharray', '4 3')
                 .style('stroke-opacity', '0.8');
             // Remove the default domain line so it doesn't overlap the chart
@@ -1621,7 +1626,7 @@ class ComboChartComponent extends ChartBase {
                     .attr('y', width + extraRight - 4)
                     .attr('text-anchor', 'middle')
                     .style('font-size', '12px')
-                    .style('fill', 'var(--clr-color-neutral-600, #666)')
+                    .style('fill', 'var(--cds-global-color-construction-400, #666)')
                     .text(this.yLineAxisLabel());
             }
         }
@@ -1745,29 +1750,29 @@ class ComboChartComponent extends ChartBase {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ComboChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: ComboChartComponent, isStandalone: false, selector: "clr-combo-chart", inputs: { barSeries: { classPropertyName: "barSeries", publicName: "barSeries", isSignal: true, isRequired: false, transformFunction: null }, lineSeries: { classPropertyName: "lineSeries", publicName: "lineSeries", isSignal: true, isRequired: false, transformFunction: null }, tooltipOrientation: { classPropertyName: "tooltipOrientation", publicName: "tooltipOrientation", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, tooltipPercentOfTotal: { classPropertyName: "tooltipPercentOfTotal", publicName: "tooltipPercentOfTotal", isSignal: true, isRequired: false, transformFunction: null }, xAxisLabel: { classPropertyName: "xAxisLabel", publicName: "xAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yAxisLabel: { classPropertyName: "yAxisLabel", publicName: "yAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yLineAxisLabel: { classPropertyName: "yLineAxisLabel", publicName: "yLineAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yBarMax: { classPropertyName: "yBarMax", publicName: "yBarMax", isSignal: true, isRequired: false, transformFunction: null }, yLineMax: { classPropertyName: "yLineMax", publicName: "yLineMax", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\">\n  <div class=\"chart-area\" #container (cngWindowResize)=\"updateChart()\" [class.pt-3]=\"alertMessageAndType()\">\n    <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"selectedItem()?.color\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"\n          valueClicked.emit({\n            seriesKey: selectedItem().seriesKey,\n            seriesLabel: selectedItem().seriesLabel,\n            seriesType: selectedItem().seriesType,\n            x: selectedItem().x,\n            xLabel: selectedItem().xLabel,\n            value: selectedItem().value,\n          })\n        \"\n    >\n      <ng-container ngProjectAs=\"cng-title\">\n        ({{ selectedItem().value }}) {{ selectedItem().xLabel || selectedItem().x }}\n      </ng-container>\n\n      <p class=\"mt-0\">\n        <strong>{{ selectedItem().seriesLabel }}:</strong>\n        {{ selectedItem().value }}\n      </p>\n      <p class=\"mt-0\">\n        {{ (100 * selectedItem().value) / selectedItem().total | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n    </cng-chart-tooltip>\n    } @if (loading() || !hasData()) {\n    <cng-bar-chart-skeleton orientation=\"vertical\" [skeletonType]=\"loading() ? 'loading' : 'placeholder'\" />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay [alertType]=\"alertMessageAndType()[1]\" [alertMessage]=\"alertMessageAndType()[0]\" />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length) {\n  <cng-chart-legend [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && hasData()) {\n  <cng-chart-export-button\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.combo-line{pointer-events:none}.combo-dot{transition:r .1s ease}\n"], dependencies: [{ kind: "component", type: ChartAlertOverlayComponent, selector: "cng-chart-alert-overlay", inputs: ["alertMessage", "alertType"] }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { kind: "component", type: ChartLegendComponent, selector: "cng-chart-legend", inputs: ["items"] }, { kind: "component", type: ChartSkeletonComponent, selector: "cng-bar-chart-skeleton", inputs: ["skeletonType", "orientation"] }, { kind: "component", type: ChartTooltipComponent, selector: "cng-chart-tooltip", inputs: ["tooltipPosition", "tooltipOrientation", "squareColor", "tooltipClickable"], outputs: ["tooltipClosed", "tooltipHeaderClicked"] }, { kind: "directive", type: OutsideClickDirective, selector: "[cngOutsideClick]", outputs: ["cngOutsideClick"] }, { kind: "directive", type: WindowResizeDirective, selector: "[cngWindowResize]", inputs: ["debounce", "includeFirst"], outputs: ["cngWindowResize"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ComboChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: ComboChartComponent, isStandalone: false, selector: "clr-combo-chart", inputs: { barSeries: { classPropertyName: "barSeries", publicName: "barSeries", isSignal: true, isRequired: false, transformFunction: null }, lineSeries: { classPropertyName: "lineSeries", publicName: "lineSeries", isSignal: true, isRequired: false, transformFunction: null }, tooltipOrientation: { classPropertyName: "tooltipOrientation", publicName: "tooltipOrientation", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, tooltipPercentOfTotal: { classPropertyName: "tooltipPercentOfTotal", publicName: "tooltipPercentOfTotal", isSignal: true, isRequired: false, transformFunction: null }, xAxisLabel: { classPropertyName: "xAxisLabel", publicName: "xAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yAxisLabel: { classPropertyName: "yAxisLabel", publicName: "yAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yLineAxisLabel: { classPropertyName: "yLineAxisLabel", publicName: "yLineAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yBarMax: { classPropertyName: "yBarMax", publicName: "yBarMax", isSignal: true, isRequired: false, transformFunction: null }, yLineMax: { classPropertyName: "yLineMax", publicName: "yLineMax", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\">\n  <div class=\"chart-area\" #container (cngWindowResize)=\"updateChart()\" [class.pt-3]=\"alertMessageAndType()\">\n    <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"selectedItem()?.color\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"\n          valueClicked.emit({\n            seriesKey: selectedItem().seriesKey,\n            seriesLabel: selectedItem().seriesLabel,\n            seriesType: selectedItem().seriesType,\n            x: selectedItem().x,\n            xLabel: selectedItem().xLabel,\n            value: selectedItem().value,\n          })\n        \"\n    >\n      <ng-container ngProjectAs=\"cng-title\">\n        ({{ selectedItem().value }}) {{ selectedItem().xLabel || selectedItem().x }}\n      </ng-container>\n\n      <p class=\"mt-0\">\n        <strong>{{ selectedItem().seriesLabel }}:</strong>\n        {{ selectedItem().value }}\n      </p>\n      <p class=\"mt-0\">\n        {{ (100 * selectedItem().value) / selectedItem().total | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n    </cng-chart-tooltip>\n    } @if (loading() || !hasData()) {\n    <cng-bar-chart-skeleton orientation=\"vertical\" [skeletonType]=\"loading() ? 'loading' : 'placeholder'\" />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay [alertType]=\"alertMessageAndType()[1]\" [alertMessage]=\"alertMessageAndType()[0]\" />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length) {\n  <cng-chart-legend [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && hasData()) {\n  <cng-chart-export-button\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.combo-line{pointer-events:none}.combo-dot{transition:r .1s ease}\n"], dependencies: [{ kind: "component", type: ChartAlertOverlayComponent, selector: "cng-chart-alert-overlay", inputs: ["alertMessage", "alertType"] }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { kind: "component", type: ChartLegendComponent, selector: "cng-chart-legend", inputs: ["items"] }, { kind: "component", type: ChartSkeletonComponent, selector: "cng-bar-chart-skeleton", inputs: ["skeletonType", "orientation"] }, { kind: "component", type: ChartTooltipComponent, selector: "cng-chart-tooltip", inputs: ["tooltipPosition", "tooltipOrientation", "squareColor", "tooltipClickable"], outputs: ["tooltipClosed", "tooltipHeaderClicked"] }, { kind: "directive", type: OutsideClickDirective, selector: "[cngOutsideClick]", outputs: ["cngOutsideClick"] }, { kind: "directive", type: WindowResizeDirective, selector: "[cngWindowResize]", inputs: ["debounce", "includeFirst"], outputs: ["cngWindowResize"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ComboChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ComboChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'clr-combo-chart', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"chart-container\">\n  <div class=\"chart-area\" #container (cngWindowResize)=\"updateChart()\" [class.pt-3]=\"alertMessageAndType()\">\n    <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"selectedItem()?.color\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"\n          valueClicked.emit({\n            seriesKey: selectedItem().seriesKey,\n            seriesLabel: selectedItem().seriesLabel,\n            seriesType: selectedItem().seriesType,\n            x: selectedItem().x,\n            xLabel: selectedItem().xLabel,\n            value: selectedItem().value,\n          })\n        \"\n    >\n      <ng-container ngProjectAs=\"cng-title\">\n        ({{ selectedItem().value }}) {{ selectedItem().xLabel || selectedItem().x }}\n      </ng-container>\n\n      <p class=\"mt-0\">\n        <strong>{{ selectedItem().seriesLabel }}:</strong>\n        {{ selectedItem().value }}\n      </p>\n      <p class=\"mt-0\">\n        {{ (100 * selectedItem().value) / selectedItem().total | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n    </cng-chart-tooltip>\n    } @if (loading() || !hasData()) {\n    <cng-bar-chart-skeleton orientation=\"vertical\" [skeletonType]=\"loading() ? 'loading' : 'placeholder'\" />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay [alertType]=\"alertMessageAndType()[1]\" [alertMessage]=\"alertMessageAndType()[0]\" />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length) {\n  <cng-chart-legend [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && hasData()) {\n  <cng-chart-export-button\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.combo-line{pointer-events:none}.combo-dot{transition:r .1s ease}\n"] }]
-        }] });
+        }], propDecorators: { barSeries: [{ type: i0.Input, args: [{ isSignal: true, alias: "barSeries", required: false }] }], lineSeries: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineSeries", required: false }] }], tooltipOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipOrientation", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], exportButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportButtonTitle", required: false }] }], exportFilename: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFilename", required: false }] }], noItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsMessage", required: false }] }], tooltipPercentOfTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPercentOfTotal", required: false }] }], xAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAxisLabel", required: false }] }], yAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxisLabel", required: false }] }], yLineAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yLineAxisLabel", required: false }] }], yBarMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "yBarMax", required: false }] }], yLineMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "yLineMax", required: false }] }], valueClicked: [{ type: i0.Output, args: ["valueClicked"] }] } });
 
 class PieChartComponent extends ChartBase {
     constructor() {
         super(...arguments);
-        this.data = input.required();
-        this.donut = input(true);
-        this.showLegend = input(true);
-        this.showExportButton = input(false);
-        this.exportButtonTitle = input('Export');
-        this.exportFilename = input('pie-chart');
-        this.tooltipOrientation = input('top');
-        this.noItemsMessage = input(NO_ITEMS_MESSAGE);
-        this.tooltipPercentOfTotal = input('of total');
+        this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        this.donut = input(true, ...(ngDevMode ? [{ debugName: "donut" }] : /* istanbul ignore next */ []));
+        this.showLegend = input(true, ...(ngDevMode ? [{ debugName: "showLegend" }] : /* istanbul ignore next */ []));
+        this.showExportButton = input(false, ...(ngDevMode ? [{ debugName: "showExportButton" }] : /* istanbul ignore next */ []));
+        this.exportButtonTitle = input('Export', ...(ngDevMode ? [{ debugName: "exportButtonTitle" }] : /* istanbul ignore next */ []));
+        this.exportFilename = input('pie-chart', ...(ngDevMode ? [{ debugName: "exportFilename" }] : /* istanbul ignore next */ []));
+        this.tooltipOrientation = input('top', ...(ngDevMode ? [{ debugName: "tooltipOrientation" }] : /* 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.hasData = computed(() => this.data()?.some(d => d.value > 0));
-        this.total = computed(() => this.data()?.reduce((acc, d) => acc + d.value, 0) ?? 0);
+        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(() => {
             if (this.loading()) {
                 return undefined;
@@ -1776,13 +1781,13 @@ class PieChartComponent extends ChartBase {
                 return [this.noItemsMessage(), NO_ITEMS_ALERT_TYPE];
             }
             return undefined;
-        });
+        }, ...(ngDevMode ? [{ debugName: "alertMessageAndType" }] : /* istanbul ignore next */ []));
         this.legendItems = computed(() => {
             if (!this.showLegend()) {
                 return [];
             }
             return (this.data() ?? []).filter(d => d.value > 0).map(d => ({ label: d.fullLabel ?? d.label, color: d.color }));
-        });
+        }, ...(ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []));
     }
     ngOnChanges(_changes) {
         if (!this.svg) {
@@ -1880,14 +1885,14 @@ class PieChartComponent extends ChartBase {
                 .attr('dy', '-0.1em')
                 .style('font-size', '1.4rem')
                 .style('font-weight', '600')
-                .style('fill', 'var(--clr-color-neutral-900, #21333b)')
+                .style('fill', 'var(--cds-global-color-gray-900, #21333b)')
                 .text(format('~s')(this.total()));
             g.append('text')
                 .attr('class', 'center-sublabel')
                 .attr('text-anchor', 'middle')
                 .attr('dy', '1.2em')
                 .style('font-size', '0.65rem')
-                .style('fill', 'var(--clr-color-neutral-600, #666)')
+                .style('fill', 'var(--cds-global-color-construction-400, #666)')
                 .style('text-transform', 'uppercase')
                 .style('letter-spacing', '0.05em')
                 .text('Total');
@@ -1901,13 +1906,13 @@ class PieChartComponent extends ChartBase {
         });
         this.selectedItem.set(d.data);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PieChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: PieChartComponent, isStandalone: false, selector: "clr-pie-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, donut: { classPropertyName: "donut", publicName: "donut", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, tooltipOrientation: { classPropertyName: "tooltipOrientation", publicName: "tooltipOrientation", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, tooltipPercentOfTotal: { classPropertyName: "tooltipPercentOfTotal", publicName: "tooltipPercentOfTotal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\">\n  <div class=\"chart-area\" #container (cngWindowResize)=\"updateChart()\" [class.pt-3]=\"alertMessageAndType()\">\n    <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"selectedItem()?.color\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"\n          valueClicked.emit({\n            key: selectedItem().key,\n            label: selectedItem().fullLabel || selectedItem().label,\n            value: selectedItem().value,\n          })\n        \"\n    >\n      <ng-container ngProjectAs=\"cng-title\">\n        ({{ selectedItem().value }}) {{ selectedItem().fullLabel || selectedItem().label }}\n      </ng-container>\n\n      <p class=\"mt-0\">\n        {{ (100 * selectedItem().value) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n    </cng-chart-tooltip>\n    } @if (loading() || !hasData()) {\n    <cng-bar-chart-skeleton orientation=\"vertical\" [skeletonType]=\"loading() ? 'loading' : 'placeholder'\" />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay [alertType]=\"alertMessageAndType()[1]\" [alertMessage]=\"alertMessageAndType()[0]\" />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length) {\n  <cng-chart-legend [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && hasData()) {\n  <cng-chart-export-button\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.slice{transition:d .15s ease}.label-value{font-size:11px;font-weight:600;fill:#fff}.label-percent{font-size:10px;fill:#ffffffe6}.center-label{font-size:1.4rem;font-weight:600;fill:var(--clr-color-neutral-900, #21333b)}.center-sublabel{font-size:.65rem;fill:var(--clr-color-neutral-600, #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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: PieChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: PieChartComponent, isStandalone: false, selector: "clr-pie-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, donut: { classPropertyName: "donut", publicName: "donut", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, tooltipOrientation: { classPropertyName: "tooltipOrientation", publicName: "tooltipOrientation", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, tooltipPercentOfTotal: { classPropertyName: "tooltipPercentOfTotal", publicName: "tooltipPercentOfTotal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\">\n  <div class=\"chart-area\" #container (cngWindowResize)=\"updateChart()\" [class.pt-3]=\"alertMessageAndType()\">\n    <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"selectedItem()?.color\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"\n          valueClicked.emit({\n            key: selectedItem().key,\n            label: selectedItem().fullLabel || selectedItem().label,\n            value: selectedItem().value,\n          })\n        \"\n    >\n      <ng-container ngProjectAs=\"cng-title\">\n        ({{ selectedItem().value }}) {{ selectedItem().fullLabel || selectedItem().label }}\n      </ng-container>\n\n      <p class=\"mt-0\">\n        {{ (100 * selectedItem().value) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n    </cng-chart-tooltip>\n    } @if (loading() || !hasData()) {\n    <cng-bar-chart-skeleton orientation=\"vertical\" [skeletonType]=\"loading() ? 'loading' : 'placeholder'\" />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay [alertType]=\"alertMessageAndType()[1]\" [alertMessage]=\"alertMessageAndType()[0]\" />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length) {\n  <cng-chart-legend [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && hasData()) {\n  <cng-chart-export-button\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.slice{transition:d .15s ease}.label-value{font-size:11px;font-weight:600;fill:#fff}.label-percent{font-size:10px;fill:#ffffffe6}.center-label{font-size:1.4rem;font-weight:600;fill:var(--cds-global-color-gray-900, #21333b)}.center-sublabel{font-size:.65rem;fill:var(--cds-global-color-construction-400, #666);text-transform:uppercase;letter-spacing:.05em}\n"], dependencies: [{ kind: "component", type: ChartAlertOverlayComponent, selector: "cng-chart-alert-overlay", inputs: ["alertMessage", "alertType"] }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { kind: "component", type: ChartLegendComponent, selector: "cng-chart-legend", inputs: ["items"] }, { kind: "component", type: ChartSkeletonComponent, selector: "cng-bar-chart-skeleton", inputs: ["skeletonType", "orientation"] }, { kind: "component", type: ChartTooltipComponent, selector: "cng-chart-tooltip", inputs: ["tooltipPosition", "tooltipOrientation", "squareColor", "tooltipClickable"], outputs: ["tooltipClosed", "tooltipHeaderClicked"] }, { kind: "directive", type: OutsideClickDirective, selector: "[cngOutsideClick]", outputs: ["cngOutsideClick"] }, { kind: "directive", type: WindowResizeDirective, selector: "[cngWindowResize]", inputs: ["debounce", "includeFirst"], outputs: ["cngWindowResize"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PieChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: PieChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-pie-chart', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"chart-container\">\n  <div class=\"chart-area\" #container (cngWindowResize)=\"updateChart()\" [class.pt-3]=\"alertMessageAndType()\">\n    <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"selectedItem()?.color\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"\n          valueClicked.emit({\n            key: selectedItem().key,\n            label: selectedItem().fullLabel || selectedItem().label,\n            value: selectedItem().value,\n          })\n        \"\n    >\n      <ng-container ngProjectAs=\"cng-title\">\n        ({{ selectedItem().value }}) {{ selectedItem().fullLabel || selectedItem().label }}\n      </ng-container>\n\n      <p class=\"mt-0\">\n        {{ (100 * selectedItem().value) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n    </cng-chart-tooltip>\n    } @if (loading() || !hasData()) {\n    <cng-bar-chart-skeleton orientation=\"vertical\" [skeletonType]=\"loading() ? 'loading' : 'placeholder'\" />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay [alertType]=\"alertMessageAndType()[1]\" [alertMessage]=\"alertMessageAndType()[0]\" />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length) {\n  <cng-chart-legend [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && hasData()) {\n  <cng-chart-export-button\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.slice{transition:d .15s ease}.label-value{font-size:11px;font-weight:600;fill:#fff}.label-percent{font-size:10px;fill:#ffffffe6}.center-label{font-size:1.4rem;font-weight:600;fill:var(--clr-color-neutral-900, #21333b)}.center-sublabel{font-size:.65rem;fill:var(--clr-color-neutral-600, #666);text-transform:uppercase;letter-spacing:.05em}\n"] }]
-        }] });
+            args: [{ selector: 'clr-pie-chart', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"chart-container\">\n  <div class=\"chart-area\" #container (cngWindowResize)=\"updateChart()\" [class.pt-3]=\"alertMessageAndType()\">\n    <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"selectedItem()?.color\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"\n          valueClicked.emit({\n            key: selectedItem().key,\n            label: selectedItem().fullLabel || selectedItem().label,\n            value: selectedItem().value,\n          })\n        \"\n    >\n      <ng-container ngProjectAs=\"cng-title\">\n        ({{ selectedItem().value }}) {{ selectedItem().fullLabel || selectedItem().label }}\n      </ng-container>\n\n      <p class=\"mt-0\">\n        {{ (100 * selectedItem().value) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n    </cng-chart-tooltip>\n    } @if (loading() || !hasData()) {\n    <cng-bar-chart-skeleton orientation=\"vertical\" [skeletonType]=\"loading() ? 'loading' : 'placeholder'\" />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay [alertType]=\"alertMessageAndType()[1]\" [alertMessage]=\"alertMessageAndType()[0]\" />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length) {\n  <cng-chart-legend [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && hasData()) {\n  <cng-chart-export-button\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.slice{transition:d .15s ease}.label-value{font-size:11px;font-weight:600;fill:#fff}.label-percent{font-size:10px;fill:#ffffffe6}.center-label{font-size:1.4rem;font-weight:600;fill:var(--cds-global-color-gray-900, #21333b)}.center-sublabel{font-size:.65rem;fill:var(--cds-global-color-construction-400, #666);text-transform:uppercase;letter-spacing:.05em}\n"] }]
+        }], 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"] }] } });
 
 /*
  * Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
@@ -1925,60 +1930,60 @@ class FunnelChartComponent extends ChartBase {
     constructor() {
         super(...arguments);
         // ── Inputs ──────────────────────────────────────────────────────────────────
-        this.data = input([]);
-        this.showExportButton = input(false);
-        this.exportButtonTitle = input('Export');
-        this.exportFilename = input('funnel-chart');
+        this.data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* 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('funnel-chart', ...(ngDevMode ? [{ debugName: "exportFilename" }] : /* istanbul ignore next */ []));
         /** Rendering mode. 'default' = horizontal bars with sections; 'centered' = centered trapezoid funnel. */
-        this.orientation = input('default');
+        this.orientation = input('default', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
         /** Width reserved on each side for labels (px). */
-        this.textSize = input(200);
+        this.textSize = input(200, ...(ngDevMode ? [{ debugName: "textSize" }] : /* istanbul ignore next */ []));
         /** Gap between funnel bars and their side-line labels (px). */
-        this.lineTextPadding = input(8);
+        this.lineTextPadding = input(8, ...(ngDevMode ? [{ debugName: "lineTextPadding" }] : /* istanbul ignore next */ []));
         /** Vertical gap between funnel bars – default mode only (px). */
-        this.barGap = input(2);
+        this.barGap = input(2, ...(ngDevMode ? [{ debugName: "barGap" }] : /* istanbul ignore next */ []));
         /** Vertical padding inside the side measurement lines (px). */
-        this.sideLineVerticalPadding = input(4);
+        this.sideLineVerticalPadding = input(4, ...(ngDevMode ? [{ debugName: "sideLineVerticalPadding" }] : /* istanbul ignore next */ []));
         // ── Centered-mode specific inputs ────────────────────────────────────────────
         /** Minimum length of the horizontal measurement lines on each side (px). Centered mode only. */
-        this.minLineSize = input(30);
+        this.minLineSize = input(30, ...(ngDevMode ? [{ debugName: "minLineSize" }] : /* istanbul ignore next */ []));
         /** Ratio of bar height to spacer height. Centered mode only. */
-        this.barToSpacerRatio = input(2);
+        this.barToSpacerRatio = input(2, ...(ngDevMode ? [{ debugName: "barToSpacerRatio" }] : /* istanbul ignore next */ []));
         /** Vertical padding inside the center divider lines (px). Centered mode only. */
-        this.middleLineVerticalPadding = input(4);
+        this.middleLineVerticalPadding = input(4, ...(ngDevMode ? [{ debugName: "middleLineVerticalPadding" }] : /* istanbul ignore next */ []));
         /** Fill color of the centered-mode bars. Accepts hex or CSS custom property. Centered mode only. */
-        this.barColor = input(DEFAULT_SECTION_COLORS[0]);
+        this.barColor = input(DEFAULT_SECTION_COLORS[0], ...(ngDevMode ? [{ debugName: "barColor" }] : /* istanbul ignore next */ []));
         /** Fill color of the trapezoid spacers. Accepts hex or CSS custom property. Centered mode only. */
-        this.spacerColor = input('#D9D9D9');
+        this.spacerColor = input('#D9D9D9', ...(ngDevMode ? [{ debugName: "spacerColor" }] : /* istanbul ignore next */ []));
         /**
          * Override the chart labels shown in the tooltip (total / all rows).
          * Partial – any key not provided falls back to the English default.
          */
-        this.chartLabels = input({});
+        this.chartLabels = input({}, ...(ngDevMode ? [{ debugName: "chartLabels" }] : /* istanbul ignore next */ []));
         /**
          * Override section colors by section key.
          * Accepts hex values ('#009ADB') or CSS custom properties ('--cds-global-color-blue-800').
          * Per-section `color` in the data takes priority over this map; this map takes priority over
          * the built-in default palette.
          */
-        this.sectionColors = input({});
+        this.sectionColors = input({}, ...(ngDevMode ? [{ debugName: "sectionColors" }] : /* istanbul ignore next */ []));
         // ── Outputs ─────────────────────────────────────────────────────────────────
         this.valueClicked = output();
         // ── Computed ─────────────────────────────────────────────────────────────────
         this.resolvedChartLabels = computed(() => ({
             ...DEFAULT_CHART_LABELS,
             ...this.chartLabels(),
-        }));
+        }), ...(ngDevMode ? [{ debugName: "resolvedChartLabels" }] : /* istanbul ignore next */ []));
         /** CSS-ready color for the centered-mode bar. */
-        this.centeredBarCssColor = computed(() => toChartColor(this.barColor()));
+        this.centeredBarCssColor = computed(() => toChartColor(this.barColor()), ...(ngDevMode ? [{ debugName: "centeredBarCssColor" }] : /* istanbul ignore next */ []));
         /** CSS-ready spacer color. */
-        this.centeredSpacerCssColor = computed(() => toChartColor(this.spacerColor()));
-        this.total = computed(() => this.data()[0]?.value ?? 0);
-        this.hasData = computed(() => this.data().length > 0);
+        this.centeredSpacerCssColor = computed(() => toChartColor(this.spacerColor()), ...(ngDevMode ? [{ debugName: "centeredSpacerCssColor" }] : /* istanbul ignore next */ []));
+        this.total = computed(() => this.data()[0]?.value ?? 0, ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+        this.hasData = computed(() => this.data().length > 0, ...(ngDevMode ? [{ debugName: "hasData" }] : /* istanbul ignore next */ []));
         // ── State ─────────────────────────────────────────────────────────────────────
-        this.selectedItemLabel = computed(() => this.selectedItem()?.fullLabel ?? this.selectedItem()?.label ?? '');
-        this.selectedSpacerItem = signal(undefined);
-        this.sectionTooltips = signal([]);
+        this.selectedItemLabel = computed(() => this.selectedItem()?.fullLabel ?? this.selectedItem()?.label ?? '', ...(ngDevMode ? [{ debugName: "selectedItemLabel" }] : /* istanbul ignore next */ []));
+        this.selectedSpacerItem = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedSpacerItem" }] : /* istanbul ignore next */ []));
+        this.sectionTooltips = signal([], ...(ngDevMode ? [{ debugName: "sectionTooltips" }] : /* istanbul ignore next */ []));
     }
     // ── Lifecycle ────────────────────────────────────────────────────────────────
     ngOnChanges(_changes) {
@@ -2073,7 +2078,7 @@ class FunnelChartComponent extends ChartBase {
                 .attr('y', labelY)
                 .attr('text-anchor', 'start')
                 .style('font-size', '12px')
-                .style('fill', 'var(--clr-color-neutral-600, #666)')
+                .style('fill', 'var(--cds-global-color-construction-400, #666)')
                 .text(`-${this.round(d.deltaPercentage)}% (${d.delta})`);
         });
     }
@@ -2091,7 +2096,7 @@ class FunnelChartComponent extends ChartBase {
                 .attr('text-anchor', 'end')
                 .style('font-size', '13px')
                 .style('font-weight', '600')
-                .style('fill', 'var(--clr-color-neutral-900, #21333b)')
+                .style('fill', 'var(--cds-global-color-gray-900, #21333b)')
                 .style('cursor', 'pointer')
                 .text(d.label)
                 .on('click', () => this.valueClicked.emit({ value: d.value, label: d.label, key: d.key }))
@@ -2111,7 +2116,7 @@ class FunnelChartComponent extends ChartBase {
                 .attr('y1', labelY - 5)
                 .attr('x2', this.textSize() - iconSpacing)
                 .attr('y2', labelY - 5)
-                .attr('stroke', 'var(--clr-color-neutral-600, #666)')
+                .attr('stroke', 'var(--cds-global-color-construction-400, #666)')
                 .attr('stroke-width', 2)
                 .attr('stroke-dasharray', '2,2');
             leftG
@@ -2120,7 +2125,7 @@ class FunnelChartComponent extends ChartBase {
                 .attr('y', labelY + 10)
                 .attr('text-anchor', 'end')
                 .style('font-size', '12px')
-                .style('fill', 'var(--clr-color-neutral-600, #666)')
+                .style('fill', 'var(--cds-global-color-construction-400, #666)')
                 .text(`${this.round(d.percentage)}% (${d.value})`);
         });
         this.sectionTooltips.set(positions);
@@ -2287,7 +2292,7 @@ class FunnelChartComponent extends ChartBase {
                 .attr('text-anchor', 'end')
                 .style('font-size', '13px')
                 .style('font-weight', '600')
-                .style('fill', 'var(--clr-color-neutral-900, #21333b)')
+                .style('fill', 'var(--cds-global-color-gray-900, #21333b)')
                 .style('cursor', 'pointer')
                 .text(d.label)
                 .on('click', () => this.valueClicked.emit({ value: d.value, label: d.label, key: d.key }))
@@ -2301,7 +2306,7 @@ class FunnelChartComponent extends ChartBase {
                 .attr('y1', cy - 5)
                 .attr('x2', -iconSpacing)
                 .attr('y2', cy - 5)
-                .attr('stroke', 'var(--clr-color-neutral-600, #666)')
+                .attr('stroke', 'var(--cds-global-color-construction-400, #666)')
                 .attr('stroke-width', 2)
                 .attr('stroke-dasharray', '2,2');
             g.append('text')
@@ -2309,7 +2314,7 @@ class FunnelChartComponent extends ChartBase {
                 .attr('y', cy + 10)
                 .attr('text-anchor', 'end')
                 .style('font-size', '12px')
-                .style('fill', 'var(--clr-color-neutral-600, #666)')
+                .style('fill', 'var(--cds-global-color-construction-400, #666)')
                 .text(`${this.round(d.percentage)}% (${d.value})`);
         });
         this.sectionTooltips.set(positions);
@@ -2339,7 +2344,7 @@ class FunnelChartComponent extends ChartBase {
                 .attr('y', cy)
                 .attr('text-anchor', 'start')
                 .style('font-size', '12px')
-                .style('fill', 'var(--clr-color-neutral-600, #666)')
+                .style('fill', 'var(--cds-global-color-construction-400, #666)')
                 .text(`-${this.round(d.deltaPercentage)}% (${d.delta})`);
         });
     }
@@ -2507,13 +2512,13 @@ class FunnelChartComponent extends ChartBase {
         const factor = 10 ** decimals;
         return Math.round(factor * value) / factor;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FunnelChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: FunnelChartComponent, isStandalone: false, selector: "clr-funnel-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, textSize: { classPropertyName: "textSize", publicName: "textSize", isSignal: true, isRequired: false, transformFunction: null }, lineTextPadding: { classPropertyName: "lineTextPadding", publicName: "lineTextPadding", isSignal: true, isRequired: false, transformFunction: null }, barGap: { classPropertyName: "barGap", publicName: "barGap", isSignal: true, isRequired: false, transformFunction: null }, sideLineVerticalPadding: { classPropertyName: "sideLineVerticalPadding", publicName: "sideLineVerticalPadding", isSignal: true, isRequired: false, transformFunction: null }, minLineSize: { classPropertyName: "minLineSize", publicName: "minLineSize", isSignal: true, isRequired: false, transformFunction: null }, barToSpacerRatio: { classPropertyName: "barToSpacerRatio", publicName: "barToSpacerRatio", isSignal: true, isRequired: false, transformFunction: null }, middleLineVerticalPadding: { classPropertyName: "middleLineVerticalPadding", publicName: "middleLineVerticalPadding", isSignal: true, isRequired: false, transformFunction: null }, barColor: { classPropertyName: "barColor", publicName: "barColor", isSignal: true, isRequired: false, transformFunction: null }, spacerColor: { classPropertyName: "spacerColor", publicName: "spacerColor", isSignal: true, isRequired: false, transformFunction: null }, chartLabels: { classPropertyName: "chartLabels", publicName: "chartLabels", isSignal: true, isRequired: false, transformFunction: null }, sectionColors: { classPropertyName: "sectionColors", publicName: "sectionColors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"funnel-container\" #container (cngWindowResize)=\"updateChart()\">\n  <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n  @if (!loading()) { @for (pos of sectionTooltips(); track pos.key) {\n  <clr-signpost [style.left.px]=\"pos.x\" [style.top.px]=\"pos.y\">\n    <cds-icon clrSignpostTrigger shape=\"info-circle\" size=\"18\" />\n    <clr-signpost-content clrPosition=\"bottom-left\">\n      <p class=\"mt-0\">{{ pos.description }}</p>\n    </clr-signpost-content>\n  </clr-signpost>\n  } } @if (loading()) {\n  <cng-bar-chart-skeleton orientation=\"vertical\" skeletonType=\"loading\" />\n  } @if (tooltipPosition()) { @if (orientation() === 'centered') {\n\n  <!-- \u2500\u2500 Centered mode tooltip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <cng-chart-tooltip\n    [tooltipPosition]=\"tooltipPosition()\"\n    tooltipOrientation=\"bottom\"\n    [squareColor]=\"selectedSpacerItem() ? centeredSpacerCssColor() : centeredBarCssColor()\"\n    [tooltipClickable]=\"!selectedSpacerItem()\"\n    (tooltipClosed)=\"resetTooltip()\"\n    (cngOutsideClick)=\"resetTooltip()\"\n    (tooltipHeaderClicked)=\"\n          selectedItem() && valueClicked.emit({\n            value: selectedItem().value,\n            label: selectedItem().label,\n            key: selectedItem().key,\n            section: undefined,\n          })\n        \"\n  >\n    <ng-container ngProjectAs=\"cng-title\">\n      @if (selectedSpacerItem()) {\n      {{ data()[selectedSpacerItem().index].label }} \u2192 {{ data()[selectedSpacerItem().index + 1].label }} } @else { ({{\n        selectedItem().value\n      }}) {{ selectedItem().label }}\n      }\n    </ng-container>\n\n    @if (selectedSpacerItem()) {\n    <p class=\"mt-0\">\n      <strong\n        >{{ data()[selectedSpacerItem().index].value }} \u2192 {{ data()[selectedSpacerItem().index + 1].value }}</strong\n      >\n    </p>\n    @for (section of (data()[selectedSpacerItem().index].sections ?? []); track section.key) { @let drillable =\n    section.value > 0;\n    <p class=\"tooltip-row mt-0 mt-0-5 d-flex\">\n      <strong>{{ section.label }}:&nbsp;</strong>\n      <span\n        class=\"row-right\"\n        [class.has-more-info]=\"drillable\"\n        (click)=\"\n                  drillable && valueClicked.emit({\n                    value: section.value,\n                    label: data()[selectedSpacerItem().index].label + ': ' + section.label,\n                    key: data()[selectedSpacerItem().index].key,\n                    section: section.key,\n                  })\n                \"\n        >{{ section.value }}</span\n      >\n      &nbsp;({{ pct(section.value, data()[selectedSpacerItem().index].value) }}%)\n    </p>\n    } } @else {\n    <p class=\"mt-0\">{{ pct(selectedItem().value, total()) }}% {{ resolvedChartLabels().all }}</p>\n    }\n  </cng-chart-tooltip>\n\n  } @else {\n\n  <!-- \u2500\u2500 Default mode tooltip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <cng-chart-tooltip\n    [tooltipPosition]=\"tooltipPosition()\"\n    tooltipOrientation=\"bottom\"\n    [squareColor]=\"undefined\"\n    [tooltipClickable]=\"false\"\n    (tooltipClosed)=\"resetTooltip()\"\n    (cngOutsideClick)=\"resetTooltip()\"\n  >\n    <ng-container ngProjectAs=\"cng-title\">{{ selectedItemLabel() }}</ng-container>\n    @for (section of selectedItem().sections; track section.key) { @let drillable = section.value > 0;\n    <p class=\"tooltip-row mt-0 mt-0-5 d-flex\">\n      <span>\n        <div class=\"color-square mr-0-5\" [style.background-color]=\"section.cssColor\"></div>\n      </span>\n      <strong>{{ section.label }}:&nbsp;</strong>\n      <span\n        class=\"row-right\"\n        [class.has-more-info]=\"drillable\"\n        (click)=\"\n                drillable && valueClicked.emit({\n                  value: section.value,\n                  label: selectedItemLabel() + ': ' + section.label,\n                  key: selectedItem().key,\n                  section: section.key,\n                })\n              \"\n        >{{ section.value }}</span\n      >\n      &nbsp;({{ section.percentage }}%)\n    </p>\n    }\n\n    <p class=\"tooltip-row mt-0-5\">\n      <strong>{{ resolvedChartLabels().total }}:&nbsp;</strong>\n      <span\n        class=\"has-more-info\"\n        (click)=\"\n          valueClicked.emit({\n            value: selectedItem().value,\n            label: selectedItemLabel(),\n            key: selectedItem().key,\n            section: undefined\n          })\n        \"\n        >{{ selectedItem().value }}</span\n      >\n    </p>\n\n    <ng-container ngProjectAs=\"cng-footer\">\n      <p class=\"tooltip-row mt-0\">\n        <strong>{{ resolvedChartLabels().all }}:&nbsp;</strong>\n        <span class=\"row-right\">{{ total() }}</span>\n      </p>\n    </ng-container>\n  </cng-chart-tooltip>\n\n  } } @if (showExportButton() && !loading() && hasData()) {\n  <cng-chart-export-button\n    class=\"funnel-export-btn\"\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.funnel-container{height:100%;width:100%;max-width:1400px;margin:auto;position:relative}svg{width:100%;height:100%}clr-signpost{position:absolute!important}.tooltip-row{display:flex;justify-content:space-between;align-items:center}.row-right{margin-left:auto}.funnel-export-btn{position:absolute;bottom:0;right:0;opacity:0;pointer-events:none;transition:opacity .2s ease}.funnel-container:hover .funnel-export-btn{opacity:1;pointer-events:auto}\n"], dependencies: [{ kind: "directive", type: i1.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: i1.ClrSignpost, selector: "clr-signpost", inputs: ["clrSignpostTriggerAriaLabel"] }, { 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: FunnelChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: FunnelChartComponent, isStandalone: false, selector: "clr-funnel-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, textSize: { classPropertyName: "textSize", publicName: "textSize", isSignal: true, isRequired: false, transformFunction: null }, lineTextPadding: { classPropertyName: "lineTextPadding", publicName: "lineTextPadding", isSignal: true, isRequired: false, transformFunction: null }, barGap: { classPropertyName: "barGap", publicName: "barGap", isSignal: true, isRequired: false, transformFunction: null }, sideLineVerticalPadding: { classPropertyName: "sideLineVerticalPadding", publicName: "sideLineVerticalPadding", isSignal: true, isRequired: false, transformFunction: null }, minLineSize: { classPropertyName: "minLineSize", publicName: "minLineSize", isSignal: true, isRequired: false, transformFunction: null }, barToSpacerRatio: { classPropertyName: "barToSpacerRatio", publicName: "barToSpacerRatio", isSignal: true, isRequired: false, transformFunction: null }, middleLineVerticalPadding: { classPropertyName: "middleLineVerticalPadding", publicName: "middleLineVerticalPadding", isSignal: true, isRequired: false, transformFunction: null }, barColor: { classPropertyName: "barColor", publicName: "barColor", isSignal: true, isRequired: false, transformFunction: null }, spacerColor: { classPropertyName: "spacerColor", publicName: "spacerColor", isSignal: true, isRequired: false, transformFunction: null }, chartLabels: { classPropertyName: "chartLabels", publicName: "chartLabels", isSignal: true, isRequired: false, transformFunction: null }, sectionColors: { classPropertyName: "sectionColors", publicName: "sectionColors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"funnel-container\" #container (cngWindowResize)=\"updateChart()\">\n  <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n  @if (!loading()) { @for (pos of sectionTooltips(); track pos.key) {\n  <clr-signpost [style.left.px]=\"pos.x\" [style.top.px]=\"pos.y\">\n    <cds-icon clrSignpostTrigger shape=\"info-circle\" size=\"18\" />\n    <clr-signpost-content clrPosition=\"bottom-left\">\n      <p class=\"mt-0\">{{ pos.description }}</p>\n    </clr-signpost-content>\n  </clr-signpost>\n  } } @if (loading()) {\n  <cng-bar-chart-skeleton orientation=\"vertical\" skeletonType=\"loading\" />\n  } @if (tooltipPosition()) { @if (orientation() === 'centered') {\n\n  <!-- \u2500\u2500 Centered mode tooltip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <cng-chart-tooltip\n    [tooltipPosition]=\"tooltipPosition()\"\n    tooltipOrientation=\"bottom\"\n    [squareColor]=\"selectedSpacerItem() ? centeredSpacerCssColor() : centeredBarCssColor()\"\n    [tooltipClickable]=\"!selectedSpacerItem()\"\n    (tooltipClosed)=\"resetTooltip()\"\n    (cngOutsideClick)=\"resetTooltip()\"\n    (tooltipHeaderClicked)=\"\n          selectedItem() && valueClicked.emit({\n            value: selectedItem().value,\n            label: selectedItem().label,\n            key: selectedItem().key,\n            section: undefined,\n          })\n        \"\n  >\n    <ng-container ngProjectAs=\"cng-title\">\n      @if (selectedSpacerItem()) {\n      {{ data()[selectedSpacerItem().index].label }} \u2192 {{ data()[selectedSpacerItem().index + 1].label }} } @else { ({{\n        selectedItem().value\n      }}) {{ selectedItem().label }}\n      }\n    </ng-container>\n\n    @if (selectedSpacerItem()) {\n    <p class=\"mt-0\">\n      <strong\n        >{{ data()[selectedSpacerItem().index].value }} \u2192 {{ data()[selectedSpacerItem().index + 1].value }}</strong\n      >\n    </p>\n    @for (section of (data()[selectedSpacerItem().index].sections ?? []); track section.key) { @let drillable =\n    section.value > 0;\n    <p class=\"tooltip-row mt-0 mt-0-5 d-flex\">\n      <strong>{{ section.label }}:&nbsp;</strong>\n      <span\n        class=\"row-right\"\n        [class.has-more-info]=\"drillable\"\n        (click)=\"\n                  drillable && valueClicked.emit({\n                    value: section.value,\n                    label: data()[selectedSpacerItem().index].label + ': ' + section.label,\n                    key: data()[selectedSpacerItem().index].key,\n                    section: section.key,\n                  })\n                \"\n        >{{ section.value }}</span\n      >\n      &nbsp;({{ pct(section.value, data()[selectedSpacerItem().index].value) }}%)\n    </p>\n    } } @else {\n    <p class=\"mt-0\">{{ pct(selectedItem().value, total()) }}% {{ resolvedChartLabels().all }}</p>\n    }\n  </cng-chart-tooltip>\n\n  } @else {\n\n  <!-- \u2500\u2500 Default mode tooltip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <cng-chart-tooltip\n    [tooltipPosition]=\"tooltipPosition()\"\n    tooltipOrientation=\"bottom\"\n    [squareColor]=\"undefined\"\n    [tooltipClickable]=\"false\"\n    (tooltipClosed)=\"resetTooltip()\"\n    (cngOutsideClick)=\"resetTooltip()\"\n  >\n    <ng-container ngProjectAs=\"cng-title\">{{ selectedItemLabel() }}</ng-container>\n    @for (section of selectedItem().sections; track section.key) { @let drillable = section.value > 0;\n    <p class=\"tooltip-row mt-0 mt-0-5 d-flex\">\n      <span>\n        <div class=\"color-square mr-0-5\" [style.background-color]=\"section.cssColor\"></div>\n      </span>\n      <strong>{{ section.label }}:&nbsp;</strong>\n      <span\n        class=\"row-right\"\n        [class.has-more-info]=\"drillable\"\n        (click)=\"\n                drillable && valueClicked.emit({\n                  value: section.value,\n                  label: selectedItemLabel() + ': ' + section.label,\n                  key: selectedItem().key,\n                  section: section.key,\n                })\n              \"\n        >{{ section.value }}</span\n      >\n      &nbsp;({{ section.percentage }}%)\n    </p>\n    }\n\n    <p class=\"tooltip-row mt-0-5\">\n      <strong>{{ resolvedChartLabels().total }}:&nbsp;</strong>\n      <span\n        class=\"has-more-info\"\n        (click)=\"\n          valueClicked.emit({\n            value: selectedItem().value,\n            label: selectedItemLabel(),\n            key: selectedItem().key,\n            section: undefined\n          })\n        \"\n        >{{ selectedItem().value }}</span\n      >\n    </p>\n\n    <ng-container ngProjectAs=\"cng-footer\">\n      <p class=\"tooltip-row mt-0\">\n        <strong>{{ resolvedChartLabels().all }}:&nbsp;</strong>\n        <span class=\"row-right\">{{ total() }}</span>\n      </p>\n    </ng-container>\n  </cng-chart-tooltip>\n\n  } } @if (showExportButton() && !loading() && hasData()) {\n  <cng-chart-export-button\n    class=\"funnel-export-btn\"\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.funnel-container{height:100%;width:100%;max-width:1400px;margin:auto;position:relative}svg{width:100%;height:100%}clr-signpost{position:absolute!important}.tooltip-row{display:flex;justify-content:space-between;align-items:center}.row-right{margin-left:auto}.funnel-export-btn{position:absolute;bottom:0;right:0;opacity:0;pointer-events:none;transition:opacity .2s ease}.funnel-container:hover .funnel-export-btn{opacity:1;pointer-events:auto}\n"], dependencies: [{ kind: "component", type: i1.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "component", type: i1.ClrSignpost, selector: "clr-signpost", inputs: ["clrSignpostTriggerAriaLabel", "clrSignpostHideTrigger"] }, { kind: "component", type: i1.ClrSignpostContent, selector: "clr-signpost-content", inputs: ["clrSignpostCloseAriaLabel", "clrPosition"] }, { kind: "directive", type: i1.ClrSignpostTrigger, selector: "[clrSignpostTrigger]" }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { kind: "component", type: ChartSkeletonComponent, selector: "cng-bar-chart-skeleton", inputs: ["skeletonType", "orientation"] }, { kind: "component", type: ChartTooltipComponent, selector: "cng-chart-tooltip", inputs: ["tooltipPosition", "tooltipOrientation", "squareColor", "tooltipClickable"], outputs: ["tooltipClosed", "tooltipHeaderClicked"] }, { kind: "directive", type: OutsideClickDirective, selector: "[cngOutsideClick]", outputs: ["cngOutsideClick"] }, { kind: "directive", type: WindowResizeDirective, selector: "[cngWindowResize]", inputs: ["debounce", "includeFirst"], outputs: ["cngWindowResize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FunnelChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: FunnelChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'clr-funnel-chart', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"funnel-container\" #container (cngWindowResize)=\"updateChart()\">\n  <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n  @if (!loading()) { @for (pos of sectionTooltips(); track pos.key) {\n  <clr-signpost [style.left.px]=\"pos.x\" [style.top.px]=\"pos.y\">\n    <cds-icon clrSignpostTrigger shape=\"info-circle\" size=\"18\" />\n    <clr-signpost-content clrPosition=\"bottom-left\">\n      <p class=\"mt-0\">{{ pos.description }}</p>\n    </clr-signpost-content>\n  </clr-signpost>\n  } } @if (loading()) {\n  <cng-bar-chart-skeleton orientation=\"vertical\" skeletonType=\"loading\" />\n  } @if (tooltipPosition()) { @if (orientation() === 'centered') {\n\n  <!-- \u2500\u2500 Centered mode tooltip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <cng-chart-tooltip\n    [tooltipPosition]=\"tooltipPosition()\"\n    tooltipOrientation=\"bottom\"\n    [squareColor]=\"selectedSpacerItem() ? centeredSpacerCssColor() : centeredBarCssColor()\"\n    [tooltipClickable]=\"!selectedSpacerItem()\"\n    (tooltipClosed)=\"resetTooltip()\"\n    (cngOutsideClick)=\"resetTooltip()\"\n    (tooltipHeaderClicked)=\"\n          selectedItem() && valueClicked.emit({\n            value: selectedItem().value,\n            label: selectedItem().label,\n            key: selectedItem().key,\n            section: undefined,\n          })\n        \"\n  >\n    <ng-container ngProjectAs=\"cng-title\">\n      @if (selectedSpacerItem()) {\n      {{ data()[selectedSpacerItem().index].label }} \u2192 {{ data()[selectedSpacerItem().index + 1].label }} } @else { ({{\n        selectedItem().value\n      }}) {{ selectedItem().label }}\n      }\n    </ng-container>\n\n    @if (selectedSpacerItem()) {\n    <p class=\"mt-0\">\n      <strong\n        >{{ data()[selectedSpacerItem().index].value }} \u2192 {{ data()[selectedSpacerItem().index + 1].value }}</strong\n      >\n    </p>\n    @for (section of (data()[selectedSpacerItem().index].sections ?? []); track section.key) { @let drillable =\n    section.value > 0;\n    <p class=\"tooltip-row mt-0 mt-0-5 d-flex\">\n      <strong>{{ section.label }}:&nbsp;</strong>\n      <span\n        class=\"row-right\"\n        [class.has-more-info]=\"drillable\"\n        (click)=\"\n                  drillable && valueClicked.emit({\n                    value: section.value,\n                    label: data()[selectedSpacerItem().index].label + ': ' + section.label,\n                    key: data()[selectedSpacerItem().index].key,\n                    section: section.key,\n                  })\n                \"\n        >{{ section.value }}</span\n      >\n      &nbsp;({{ pct(section.value, data()[selectedSpacerItem().index].value) }}%)\n    </p>\n    } } @else {\n    <p class=\"mt-0\">{{ pct(selectedItem().value, total()) }}% {{ resolvedChartLabels().all }}</p>\n    }\n  </cng-chart-tooltip>\n\n  } @else {\n\n  <!-- \u2500\u2500 Default mode tooltip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <cng-chart-tooltip\n    [tooltipPosition]=\"tooltipPosition()\"\n    tooltipOrientation=\"bottom\"\n    [squareColor]=\"undefined\"\n    [tooltipClickable]=\"false\"\n    (tooltipClosed)=\"resetTooltip()\"\n    (cngOutsideClick)=\"resetTooltip()\"\n  >\n    <ng-container ngProjectAs=\"cng-title\">{{ selectedItemLabel() }}</ng-container>\n    @for (section of selectedItem().sections; track section.key) { @let drillable = section.value > 0;\n    <p class=\"tooltip-row mt-0 mt-0-5 d-flex\">\n      <span>\n        <div class=\"color-square mr-0-5\" [style.background-color]=\"section.cssColor\"></div>\n      </span>\n      <strong>{{ section.label }}:&nbsp;</strong>\n      <span\n        class=\"row-right\"\n        [class.has-more-info]=\"drillable\"\n        (click)=\"\n                drillable && valueClicked.emit({\n                  value: section.value,\n                  label: selectedItemLabel() + ': ' + section.label,\n                  key: selectedItem().key,\n                  section: section.key,\n                })\n              \"\n        >{{ section.value }}</span\n      >\n      &nbsp;({{ section.percentage }}%)\n    </p>\n    }\n\n    <p class=\"tooltip-row mt-0-5\">\n      <strong>{{ resolvedChartLabels().total }}:&nbsp;</strong>\n      <span\n        class=\"has-more-info\"\n        (click)=\"\n          valueClicked.emit({\n            value: selectedItem().value,\n            label: selectedItemLabel(),\n            key: selectedItem().key,\n            section: undefined\n          })\n        \"\n        >{{ selectedItem().value }}</span\n      >\n    </p>\n\n    <ng-container ngProjectAs=\"cng-footer\">\n      <p class=\"tooltip-row mt-0\">\n        <strong>{{ resolvedChartLabels().all }}:&nbsp;</strong>\n        <span class=\"row-right\">{{ total() }}</span>\n      </p>\n    </ng-container>\n  </cng-chart-tooltip>\n\n  } } @if (showExportButton() && !loading() && hasData()) {\n  <cng-chart-export-button\n    class=\"funnel-export-btn\"\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.funnel-container{height:100%;width:100%;max-width:1400px;margin:auto;position:relative}svg{width:100%;height:100%}clr-signpost{position:absolute!important}.tooltip-row{display:flex;justify-content:space-between;align-items:center}.row-right{margin-left:auto}.funnel-export-btn{position:absolute;bottom:0;right:0;opacity:0;pointer-events:none;transition:opacity .2s ease}.funnel-container:hover .funnel-export-btn{opacity:1;pointer-events:auto}\n"] }]
-        }] });
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], exportButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportButtonTitle", required: false }] }], exportFilename: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFilename", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], textSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "textSize", required: false }] }], lineTextPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineTextPadding", required: false }] }], barGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "barGap", required: false }] }], sideLineVerticalPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideLineVerticalPadding", required: false }] }], minLineSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLineSize", required: false }] }], barToSpacerRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "barToSpacerRatio", required: false }] }], middleLineVerticalPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "middleLineVerticalPadding", required: false }] }], barColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "barColor", required: false }] }], spacerColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacerColor", required: false }] }], chartLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartLabels", required: false }] }], sectionColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionColors", required: false }] }], valueClicked: [{ type: i0.Output, args: ["valueClicked"] }] } });
 
 const PREFERRED_ORDER = ['top-right', 'top-left', 'bottom-right', 'bottom-left'];
 class AutoPositionDirective {
@@ -2576,10 +2581,10 @@ class AutoPositionDirective {
         }
         this.resizeObserver?.disconnect();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AutoPositionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: AutoPositionDirective, isStandalone: true, selector: "clr-signpost-content[autoPosition]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AutoPositionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: AutoPositionDirective, isStandalone: true, selector: "clr-signpost-content[autoPosition]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AutoPositionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AutoPositionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'clr-signpost-content[autoPosition]',
@@ -2589,8 +2594,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 
 class TenantFullDateRangeDirective {
     constructor() {
-        this.start = contentChild(ClrStartDateInput);
-        this.end = contentChild(ClrEndDateInput);
+        this.start = contentChild(ClrStartDateInput, ...(ngDevMode ? [{ debugName: "start" }] : /* istanbul ignore next */ []));
+        this.end = contentChild(ClrEndDateInput, ...(ngDevMode ? [{ debugName: "end" }] : /* istanbul ignore next */ []));
     }
     ngAfterContentInit() {
         if (this.start()) {
@@ -2615,16 +2620,16 @@ class TenantFullDateRangeDirective {
         result.setHours(hours, minutes, 0, 0);
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TenantFullDateRangeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.18", type: TenantFullDateRangeDirective, isStandalone: true, selector: "clr-date-range-container[cngTenantFullDateRange]", queries: [{ propertyName: "start", first: true, predicate: ClrStartDateInput, descendants: true, isSignal: true }, { propertyName: "end", first: true, predicate: ClrEndDateInput, descendants: true, isSignal: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TenantFullDateRangeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.13", type: TenantFullDateRangeDirective, isStandalone: true, selector: "clr-date-range-container[cngTenantFullDateRange]", queries: [{ propertyName: "start", first: true, predicate: ClrStartDateInput, descendants: true, isSignal: true }, { propertyName: "end", first: true, predicate: ClrEndDateInput, descendants: true, isSignal: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TenantFullDateRangeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TenantFullDateRangeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'clr-date-range-container[cngTenantFullDateRange]',
                     standalone: true,
                 }]
-        }] });
+        }], propDecorators: { start: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClrStartDateInput), { isSignal: true }] }], end: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClrEndDateInput), { isSignal: true }] }] } });
 
 /*
  * Copyright (c) 2026 Porsche Informatik. All Rights Reserved.
@@ -2640,8 +2645,8 @@ const CLR_CHARTS_DECLARATIONS = [
     PieChartComponent,
 ];
 class ClrChartsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ClrChartsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: ClrChartsModule, declarations: [AreaChartComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrChartsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: ClrChartsModule, declarations: [AreaChartComponent,
             BarChartComponent,
             ComboChartComponent,
             FunnelChartComponent,
@@ -2649,7 +2654,7 @@ class ClrChartsModule {
             PieChartComponent], imports: [CommonModule,
             DecimalPipe,
             ClrAlertModule,
-            ClrIconModule,
+            ClrIcon,
             ClrSignpostModule,
             // standalone helpers consumed by the non-standalone chart components
             ChartAlertOverlayComponent,
@@ -2664,9 +2669,9 @@ class ClrChartsModule {
             FunnelChartComponent,
             LineChartComponent,
             PieChartComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ClrChartsModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrChartsModule, imports: [CommonModule,
             ClrAlertModule,
-            ClrIconModule,
+            ClrIcon,
             ClrSignpostModule,
             // standalone helpers consumed by the non-standalone chart components
             ChartAlertOverlayComponent,
@@ -2674,14 +2679,14 @@ class ClrChartsModule {
             ChartSkeletonComponent,
             ChartTooltipComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ClrChartsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrChartsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         CommonModule,
                         DecimalPipe,
                         ClrAlertModule,
-                        ClrIconModule,
+                        ClrIcon,
                         ClrSignpostModule,
                         // standalone helpers consumed by the non-standalone chart components
                         ChartAlertOverlayComponent,