@porscheinformatik/clr-addons 19.15.2 → 19.17.0

package/fesm2022/clr-addons.mjs

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
-import { Component, NgModule, Injectable, EventEmitter, Output, Input, Directive, ViewChild, ContentChildren, TemplateRef, ViewChildren, HostBinding, ElementRef, Renderer2, forwardRef, Inject, ContentChild, Optional, input, ChangeDetectionStrategy, signal, computed, SkipSelf, inject, model, contentChild, linkedSignal, DestroyRef, contentChildren, effect, output, viewChild, InjectionToken, isSignal, HostListener, LOCALE_ID, Self, Host, NgZone, ChangeDetectorRef, Injector, untracked, runInInjectionContext } from '@angular/core';
+import { Component, NgModule, Injectable, EventEmitter, Output, Input, Directive, ViewChild, ContentChildren, TemplateRef, ViewChildren, HostBinding, ElementRef, Renderer2, forwardRef, Inject, ContentChild, Optional, input, ChangeDetectionStrategy, signal, computed, SkipSelf, inject, model, contentChild, linkedSignal, DestroyRef, contentChildren, effect, output, viewChild, InjectionToken, isSignal, HostListener, LOCALE_ID, Self, Host, ChangeDetectorRef, NgZone, Injector, untracked, runInInjectionContext } from '@angular/core';
 import * as i1 from '@angular/common';
-import { CommonModule, DOCUMENT, NgComponentOutlet, NgTemplateOutlet, getLocaleDateFormat, FormatWidth, NgForOf, NgClass } from '@angular/common';
-import { ClarityIcons, arrowIcon, angleIcon, timesIcon, trashIcon, plusCircleIcon, exclamationCircleIcon, searchIcon, ellipsisVerticalIcon, filterGridCircleIcon, filterGridIcon, pencilIcon, historyIcon as historyIcon$1, treeViewIcon, organizationIcon, calendarIcon, checkCircleIcon, windowCloseIcon, exclamationTriangleIcon, infoStandardIcon, copyToClipboardIcon, successStandardIcon, angleDoubleIcon } from '@cds/core/icon';
+import { CommonModule, DOCUMENT, NgComponentOutlet, NgTemplateOutlet, getLocaleDateFormat, FormatWidth, DecimalPipe, NgForOf, NgClass } from '@angular/common';
+import { ClarityIcons, arrowIcon, angleIcon, timesIcon, trashIcon, plusCircleIcon, exclamationCircleIcon, searchIcon, ellipsisVerticalIcon, filterGridCircleIcon, filterGridIcon, pencilIcon, historyIcon as historyIcon$1, treeViewIcon, organizationIcon, calendarIcon, checkCircleIcon, windowCloseIcon, exclamationTriangleIcon, infoStandardIcon, downloadIcon, copyToClipboardIcon, successStandardIcon, angleDoubleIcon } from '@cds/core/icon';
 import * as i1$1 from '@clr/angular';
-import { ClarityModule, ClrFormsModule, ClrDropdown, ClrIconModule, ClrForm, ClrAlert, ClrAlignment, ClrSide, ClrAxis, ClrPopoverToggleService, ClrPopoverEventsService, ClrPopoverPositionService, ClrPopoverHostDirective, ClrCommonStringsService, ClrDropdownModule, ClrDatagrid, ClrDatagridColumn, ClrDatagridSortOrder, DatagridPropertyComparator, ClrDatagridPagination, ClrDatagridFilter, ClrDateContainer, ClrLabel, ClrControlHelper, ClrControlError, ClrControlSuccess, ClrDatepickerModule, ClrSignpostContent, ClrSignpostModule, ClrTooltipModule } from '@clr/angular';
+import { ClarityModule, ClrFormsModule, ClrDropdown, ClrIconModule, ClrForm, ClrAlert, ClrAlignment, ClrSide, ClrAxis, ClrPopoverToggleService, ClrPopoverEventsService, ClrPopoverPositionService, ClrPopoverHostDirective, ClrCommonStringsService, ClrDropdownModule, ClrDatagrid, ClrDatagridColumn, ClrDatagridSortOrder, DatagridPropertyComparator, ClrDatagridPagination, ClrDatagridFilter, ClrDateContainer, ClrLabel, ClrControlHelper, ClrControlError, ClrControlSuccess, ClrDatepickerModule, ClrSignpostContent, ClrSignpostModule, ClrAlertModule, ClrStartDateInput, ClrEndDateInput, ClrTooltipModule } from '@clr/angular';
 import * as i3$1 from '@angular/forms';
 import { FormsModule, NG_VALIDATORS, NgControl, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormControl, NgModel } from '@angular/forms';
 import { Subject, BehaviorSubject, timer as timer$1, asyncScheduler, interval, map as map$1, distinctUntilChanged, shareReplay, combineLatest, skip, auditTime, fromEvent, take as take$1, merge, debounceTime as debounceTime$1, tap, of, switchMap, filter as filter$2, ReplaySubject, takeUntil as takeUntil$1, delay } from 'rxjs';
-import { takeUntil, take, observeOn, filter as filter$1, debounceTime } from 'rxjs/operators';
+import { takeUntil, take, observeOn, filter as filter$1, debounceTime, map as map$2, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs/operators';
 import * as i3 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { trigger, transition, style, animate, state } from '@angular/animations';
@@ -16,8 +16,10 @@ import { takeUntilDestroyed, toObservable, outputFromObservable, toSignal } from
 import * as i1$2 from '@angular/common/http';
 import '@cds/core/icon/register.js';
 import { CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
-import { provideAnimations } from '@angular/platform-browser/animations';
+import { format, select, scaleBand, scaleLinear, max, axisBottom, axisLeft, group, sum, scalePoint, line, curveMonotoneX, area, axisRight, arc, pie, color } from 'd3';
+import { NgxSkeletonLoaderComponent } from 'ngx-skeleton-loader';
 import { CdkCopyToClipboard } from '@angular/cdk/clipboard';
+import { provideAnimations } from '@angular/platform-browser/animations';
 
 /*
  * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
@@ -15483,13 +15485,12 @@ class ClrControlEnterSubmitDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ClrControlEnterSubmitDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1$1.ClrForm, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: ClrControlEnterSubmitDirective, isStandalone: false, selector: "form[clrControlEnterSubmit]", inputs: { tooltipText: ["clrControlEnterSubmit", "tooltipText"] }, host: { listeners: { "window:keydown.control.enter": "submitCtrlEnter($event)" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: ClrControlEnterSubmitDirective, isStandalone: true, selector: "form[clrControlEnterSubmit]", inputs: { tooltipText: ["clrControlEnterSubmit", "tooltipText"] }, host: { listeners: { "window:keydown.control.enter": "submitCtrlEnter($event)" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ClrControlEnterSubmitDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'form[clrControlEnterSubmit]',
-                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1$1.ClrForm, decorators: [{
                     type: Optional
@@ -15607,237 +15608,2719 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
-class ClrAddonsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ClrAddonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: ClrAddonsModule, declarations: [ClrControlEnterSubmitDirective], imports: [ClrFocusFirstInvalidFieldDirective], exports: [ClrViewEditSectionModule,
-            ClrPagerModule,
-            ClrDotPagerModule,
-            ClrPagedSearchResultListModule,
-            ClrCollapseExpandSectionModule,
-            ClrBreadcrumbModule,
-            ClrMainNavGroupModule,
-            ClrContentPanelModule,
-            ClrNotificationModule,
-            ClrFlowBarModule,
-            ClrBackButtonModule,
-            ClrNumericFieldModule,
-            ClrSearchFieldModule,
-            ClrTreetableModule,
-            ClrProgressSpinnerModule,
-            ClrDateTimeModule,
-            ClrQuickListModule,
-            ClrIconAvatarModule,
-            ClrLetterAvatarModule,
-            ClrMultilingualModule,
-            ClrGenericQuickListModule,
-            ClrDataListValidatorModule,
-            ClrHistoryModule,
-            ClrAutocompleteOffModule,
-            ClrBrandAvatarModule,
-            ClrLocationBarModule,
-            ClrFormModule,
-            ClrDropdownOverflowModule,
-            ClrDatagridStatePersistenceModule,
-            ClrEnumFilterModule,
-            ClrDateFilterModule,
-            ClrDaterangepickerModule,
-            ClrIfWarningModule,
-            ClrActionPanelModule,
-            ClrReadonlyDirectiveModule,
-            ClrDatagridColumnReorderModule,
-            ClrSignpostAddonModule,
-            ClrFocusFirstInvalidFieldDirective,
-            ClrControlEnterSubmitDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ClrAddonsModule, imports: [ClrViewEditSectionModule,
-            ClrPagerModule,
-            ClrDotPagerModule,
-            ClrPagedSearchResultListModule,
-            ClrCollapseExpandSectionModule,
-            ClrBreadcrumbModule,
-            ClrMainNavGroupModule,
-            ClrContentPanelModule,
-            ClrNotificationModule,
-            ClrFlowBarModule,
-            ClrBackButtonModule,
-            ClrNumericFieldModule,
-            ClrSearchFieldModule,
-            ClrTreetableModule,
-            ClrProgressSpinnerModule,
-            ClrDateTimeModule,
-            ClrQuickListModule,
-            ClrIconAvatarModule,
-            ClrLetterAvatarModule,
-            ClrMultilingualModule,
-            ClrGenericQuickListModule,
-            ClrDataListValidatorModule,
-            ClrHistoryModule,
-            ClrAutocompleteOffModule,
-            ClrBrandAvatarModule,
-            ClrLocationBarModule,
-            ClrFormModule,
-            ClrDropdownOverflowModule,
-            ClrDatagridStatePersistenceModule,
-            ClrEnumFilterModule,
-            ClrDateFilterModule,
-            ClrDaterangepickerModule,
-            ClrIfWarningModule,
-            ClrActionPanelModule,
-            ClrReadonlyDirectiveModule,
-            ClrDatagridColumnReorderModule,
-            ClrSignpostAddonModule] }); }
+
+const TOO_MANY_ITEMS_MESSAGE = 'too many items';
+const TOO_MANY_ITEMS_GROUPED_MESSAGE = 'too many items';
+const TOO_MANY_ITEMS_ALERT_TYPE = 'warning';
+const NO_ITEMS_MESSAGE = 'no items';
+const NO_ITEMS_ALERT_TYPE = 'info';
+
+/**
+ * Converts a chart color value to a CSS-compatible string.
+ *
+ * Supports:
+ *  - Hex values:        '#e57200'                        → returned as-is
+ *  - CSS custom props:  '--cds-global-color-lavender-1000' → wrapped in var(...)
+ *  - Any other string:  'rgb(...)' / 'hsl(...)'          → returned as-is
+ */
+function toChartColor(color) {
+    if (!color) {
+        return '';
+    }
+    return color.startsWith('--') ? `var(${color})` : color;
+}
+
+class TextRenderer {
+    constructor() {
+        this.cachedFont = '';
+        this.cachedEllipsisWidth = 0;
+        this.canvas = document.createElement('canvas');
+        const ctx = this.canvas.getContext('2d');
+        if (!ctx) {
+            throw new Error('2D context error');
+        }
+        this.context = ctx;
+    }
+    render(text, availableHeight, availableWidth, fontSize = '12px', fontFamily = 'Arial') {
+        const font = `${fontSize} ${fontFamily}`;
+        if (this.cachedFont !== font) {
+            this.context.font = font;
+            this.cachedEllipsisWidth = this.context.measureText('...').width;
+            this.cachedFont = font;
+        }
+        else {
+            this.context.font = font;
+        }
+        const textMetrics = this.context.measureText(text);
+        const textWidth = textMetrics.width;
+        const textHeight = Math.abs(textMetrics.actualBoundingBoxAscent) + Math.abs(textMetrics.actualBoundingBoxDescent);
+        if (textWidth <= availableWidth && textHeight <= availableHeight) {
+            return text;
+        }
+        let remainingWidth = availableWidth - this.cachedEllipsisWidth;
+        let truncatedText = '';
+        for (const char of text) {
+            const charWidth = this.context.measureText(char).width;
+            if (remainingWidth - charWidth >= 0) {
+                truncatedText += char;
+                remainingWidth -= charWidth;
+            }
+            else {
+                break;
+            }
+        }
+        truncatedText = truncatedText.trim();
+        if (truncatedText.length === 0) {
+            return '';
+        }
+        return truncatedText + '...';
+    }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ClrAddonsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [ClrFocusFirstInvalidFieldDirective],
-                    declarations: [ClrControlEnterSubmitDirective],
-                    exports: [
-                        ClrViewEditSectionModule,
-                        ClrPagerModule,
-                        ClrDotPagerModule,
-                        ClrPagedSearchResultListModule,
-                        ClrCollapseExpandSectionModule,
-                        ClrBreadcrumbModule,
-                        ClrMainNavGroupModule,
-                        ClrContentPanelModule,
-                        ClrNotificationModule,
-                        ClrFlowBarModule,
-                        ClrBackButtonModule,
-                        ClrNumericFieldModule,
-                        ClrSearchFieldModule,
-                        ClrTreetableModule,
-                        ClrProgressSpinnerModule,
-                        ClrDateTimeModule,
-                        ClrQuickListModule,
-                        ClrIconAvatarModule,
-                        ClrLetterAvatarModule,
-                        ClrMultilingualModule,
-                        ClrGenericQuickListModule,
-                        ClrDataListValidatorModule,
-                        ClrHistoryModule,
-                        ClrAutocompleteOffModule,
-                        ClrBrandAvatarModule,
-                        ClrLocationBarModule,
-                        ClrFormModule,
-                        ClrDropdownOverflowModule,
-                        ClrDatagridStatePersistenceModule,
-                        ClrEnumFilterModule,
-                        ClrDateFilterModule,
-                        ClrDaterangepickerModule,
-                        ClrIfWarningModule,
-                        ClrActionPanelModule,
-                        ClrReadonlyDirectiveModule,
-                        ClrDatagridColumnReorderModule,
-                        ClrSignpostAddonModule,
-                        ClrFocusFirstInvalidFieldDirective,
-                        ClrControlEnterSubmitDirective,
-                    ],
-                }]
-        }] });
+
+const percentage = (value, total) => {
+    if (total <= 0) {
+        return 0;
+    }
+    return Math.min(100, Math.max(0, Math.round((value / total) * 100)));
+};
+const d3percentFormat = (f => (d) => `${f(d)}%`)(format('.1f'));
 
 /*
- * Copyright (c) 2018-2024 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
-
-var ExportTypeEnum;
-(function (ExportTypeEnum) {
-    ExportTypeEnum["ALL"] = "ALL";
-    ExportTypeEnum["FILTERED"] = "FILTERED";
-    ExportTypeEnum["SELECTED"] = "SELECTED";
-})(ExportTypeEnum || (ExportTypeEnum = {}));
-
-class ExportDatagridService {
+/**
+ * Abstract base class shared by all chart components.
+ * ...
+ */
+class ChartBase {
     constructor() {
-        this.init();
+        // ── Common Input ───────────────────────────────────────────────────────────
+        /** Whether the chart is in loading state (shows skeleton). */
+        this.loading = input(false);
+        // ── View references ────────────────────────────────────────────────────────
+        /** Reference to the `<svg #chart>` element in the component template. */
+        this.chartRef = viewChild('chart');
+        /** Reference to the `<div #container>` host element in the component template. */
+        this.containerRef = viewChild('container');
+        /** Exposes the raw SVG element for the chart-export button. */
+        this.svgElement = computed(() => this.chartRef()?.nativeElement);
+        // ── Tooltip State ──────────────────────────────────────────────────────────
+        this.selectedItem = signal(undefined);
+        this.tooltipPosition = signal(undefined);
+    }
+    // ── Lifecycle ──────────────────────────────────────────────────────────────
+    /** Schedules the first render after the view is ready. */
+    ngAfterViewInit() {
+        requestAnimationFrame(() => this.updateChart());
     }
-    async init() {
-        try {
-            this.zipcelx = await import('zipcelx');
-        }
-        catch (error) {
-            console.warn('Optional feature requires `zipcelx`. Please install it: npm install zipcelx', error);
-        }
+    // ── Common Implementations ─────────────────────────────────────────────────
+    /** Returns the pixel dimensions of the container div. */
+    getContainerDimensions() {
+        const el = this.containerRef().nativeElement;
+        return { width: el.clientWidth, height: el.clientHeight };
     }
-    exportToExcel(filename, headers, rows) {
-        const config = {
-            filename,
-            sheet: {
-                data: [headers, ...rows],
-            },
-        };
-        this.zipcelx.default(config);
+    /**
+     * Clears the active tooltip.  Override in subclasses that have additional
+     * selection state
+     */
+    resetTooltip() {
+        if (this.selectedItem() || this.tooltipPosition()) {
+            this.selectedItem.set(undefined);
+            this.tooltipPosition.set(undefined);
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ExportDatagridService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ExportDatagridService }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ExportDatagridService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ChartBase, decorators: [{
+            type: Directive
+        }] });
 
-class ExportDatagridButtonComponent {
-    constructor(exportService) {
-        this.exportService = exportService;
-        /* input signals */
-        this.datagrid = input();
-        this.datagridRef = input();
-        this.exportTypesToShow = input();
-        this.isBackendExport = input(false);
-        this.exportTitlePrefix = input('export-datagrid');
-        this.exportButtonPosition = input('right');
-        this.possibleExportTypes = signal([ExportTypeEnum.ALL]);
-        this.exportButtonText = input('EXPORT');
-        this.destroy$ = new Subject();
-        /* outputs */
-        this.backendExport = new EventEmitter();
-        this.exportTypes = [
-            { type: ExportTypeEnum.ALL, value: 'All entries' },
-            { type: ExportTypeEnum.FILTERED, value: 'Filtered entries' },
-            { type: ExportTypeEnum.SELECTED, value: 'Selected entries' },
-        ];
-        this.exportTypesFiltered = computed(() => {
-            let exportTypesToShowVal = this.exportTypesToShow();
-            if (!exportTypesToShowVal || exportTypesToShowVal.length === 0) {
-                exportTypesToShowVal = this.exportTypes;
-            }
-            return exportTypesToShowVal
-                .filter(showType => this.possibleExportTypes().some(et => et === showType.type))
-                .map(showType => {
-                const defaultType = this.exportTypes.find(et => et.type === showType.type);
-                return {
-                    type: showType.type,
-                    value: showType.value != null ? showType.value : defaultType?.value,
-                };
-            });
-        });
-        effect(() => {
-            const datagrid = this.datagrid();
-            if (!datagrid) {
-                return undefined;
-            }
-            this.destroy$.next();
-            datagrid.refresh.pipe(delay(0), takeUntil(this.destroy$)).subscribe(dgState => {
-                const hasFilter = dgState.filters && dgState.filters.length > 0;
-                this.updateExportType(ExportTypeEnum.FILTERED, hasFilter, this.exportTypesToShow() || this.exportTypes);
-            });
-            datagrid.selectedChanged.pipe(takeUntil(this.destroy$)).subscribe(() => {
-                const hasSelection = datagrid.selection.current.length > 0;
-                this.updateExportType(ExportTypeEnum.SELECTED, hasSelection, this.exportTypesToShow() || this.exportTypes);
-            });
+class ChartAlertOverlayComponent {
+    constructor() {
+        this.alertMessage = input.required();
+        this.alertType = input('info');
+    }
+    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: `
+    <clr-alert [clrAlertSizeSmall]="true" [clrAlertClosable]="false" [clrAlertType]="alertType()">
+      <clr-alert-item>
+        <span class="alert-text">
+          {{ alertMessage() }}
+        </span>
+      </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$1.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertLightweight", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "component", type: i1$1.ClrAlertItem, selector: "clr-alert-item" }, { kind: "directive", type: i1$1.ClrAlertText, selector: ".alert-text" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ChartAlertOverlayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cng-chart-alert-overlay', template: `
+    <clr-alert [clrAlertSizeSmall]="true" [clrAlertClosable]="false" [clrAlertType]="alertType()">
+      <clr-alert-item>
+        <span class="alert-text">
+          {{ alertMessage() }}
+        </span>
+      </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"] }]
+        }] });
+
+class ChartExportService {
+    exportSvg(svgEl, filename) {
+        const clone = this.cloneWithDimensions(svgEl);
+        const svgStr = new XMLSerializer().serializeToString(clone);
+        this.download(new Blob([svgStr], { type: 'image/svg+xml;charset=utf-8' }), `${filename}.svg`);
+    }
+    exportPng(svgEl, filename) {
+        this.toCanvas(svgEl).then(canvas => canvas.toBlob(blob => this.download(blob, `${filename}.png`), 'image/png'));
+    }
+    toCanvas(svgEl) {
+        return new Promise(resolve => {
+            const w = svgEl.clientWidth || Number(svgEl.getAttribute('width')) || 800;
+            const h = svgEl.clientHeight || Number(svgEl.getAttribute('height')) || 600;
+            const clone = this.cloneWithDimensions(svgEl, w, h);
+            const url = URL.createObjectURL(new Blob([new XMLSerializer().serializeToString(clone)], { type: 'image/svg+xml;charset=utf-8' }));
+            const img = new Image();
+            img.onload = () => {
+                const scale = 2; // 2× for retina quality
+                const canvas = document.createElement('canvas');
+                canvas.width = w * scale;
+                canvas.height = h * scale;
+                const ctx = canvas.getContext('2d');
+                ctx.scale(scale, scale);
+                ctx.fillStyle = '#ffffff';
+                ctx.fillRect(0, 0, w, h);
+                ctx.drawImage(img, 0, 0, w, h);
+                URL.revokeObjectURL(url);
+                resolve(canvas);
+            };
+            img.src = url;
         });
     }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
+    cloneWithDimensions(svgEl, w, h) {
+        const clone = svgEl.cloneNode(true);
+        const width = w ?? svgEl.clientWidth ?? Number(svgEl.getAttribute('width')) ?? 800;
+        const height = h ?? svgEl.clientHeight ?? Number(svgEl.getAttribute('height')) ?? 600;
+        clone.setAttribute('width', String(width));
+        clone.setAttribute('height', String(height));
+        clone.style.background = '#ffffff';
+        return clone;
+    }
+    download(blob, filename) {
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        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' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ChartExportService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+ClarityIcons.addIcons(downloadIcon);
+class ChartExportButtonComponent {
+    constructor() {
+        this.svgRef = input(undefined);
+        this.filename = input('chart');
+        this.exportService = inject(ChartExportService);
     }
-    exportExcel(type) {
-        if (!this.datagrid() || !this.datagridRef()) {
+    export(format) {
+        const svg = this.svgRef();
+        if (!svg) {
             return;
         }
-        // Filter visible columns once
-        const visibleColumns = this.datagrid().columns.filter(col => !col.isHidden);
-        // Get header titles for visible columns only
+        switch (format) {
+            case 'svg':
+                this.exportService.exportSvg(svg, this.filename());
+                break;
+            case 'png':
+                this.exportService.exportPng(svg, this.filename());
+                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 } }, 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>
+      </button>
+      <clr-dropdown-menu *clrIfOpen clrPosition="bottom-left">
+        <button clrDropdownItem (click)="export('svg')">SVG</button>
+        <button clrDropdownItem (click)="export('png')">PNG</button>
+      </clr-dropdown-menu>
+    </clr-dropdown>
+  `, isInline: true, styles: [":host{position:absolute;bottom:-15px;left:-5px;z-index:10;opacity:1;pointer-events:auto}\n"], dependencies: [{ kind: "ngmodule", type: ClrDropdownModule }, { kind: "component", type: i1$1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i1$1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i1$1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i1$1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: i1$1.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "directive", type: i1$1.CdsIconCustomTag, selector: "cds-icon" }, { kind: "ngmodule", type: ClrIconModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ChartExportButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cng-chart-export-button', template: `
+    <clr-dropdown>
+      <button class="btn btn-sm btn-icon btn-link export-trigger" clrDropdownTrigger title="Export chart">
+        <cds-icon shape="download" size="16"></cds-icon>
+      </button>
+      <clr-dropdown-menu *clrIfOpen clrPosition="bottom-left">
+        <button clrDropdownItem (click)="export('svg')">SVG</button>
+        <button clrDropdownItem (click)="export('png')">PNG</button>
+      </clr-dropdown-menu>
+    </clr-dropdown>
+  `, imports: [ClrDropdownModule, ClrIconModule], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{position:absolute;bottom:-15px;left:-5px;z-index:10;opacity:1;pointer-events:auto}\n"] }]
+        }] });
+
+class ChartLegendComponent {
+    constructor() {
+        this.items = input.required();
+        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: `
+    <div class="chart-legend">
+      @for (item of items(); track item.label) {
+      <div class="legend-item">
+        <span class="legend-color-square" [style.background-color]="toChartColor(item.color)"></span>
+        <span class="legend-label">{{ item.label }}</span>
+      </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block}.chart-legend{display:flex;flex-wrap:wrap;gap:.25rem 1rem;padding:.5rem 0 .25rem;font-size:11px;color:var(--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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ChartLegendComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cng-chart-legend', template: `
+    <div class="chart-legend">
+      @for (item of items(); track item.label) {
+      <div class="legend-item">
+        <span class="legend-color-square" [style.background-color]="toChartColor(item.color)"></span>
+        <span class="legend-label">{{ item.label }}</span>
+      </div>
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.chart-legend{display:flex;flex-wrap:wrap;gap:.25rem 1rem;padding:.5rem 0 .25rem;font-size:11px;color:var(--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"] }]
+        }] });
+
+class ChartSkeletonComponent {
+    constructor() {
+        this.skeletonType = input('loading');
+        this.orientation = input.required();
+        this.animationStyle = computed(() => (this.skeletonType() === 'loading' ? 'pulse' : undefined));
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", 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"] }]
+        }] });
+
+class ChartTooltipComponent {
+    constructor() {
+        this.tooltipPosition = input.required();
+        this.tooltipOrientation = input('top');
+        this.squareColor = input.required();
+        this.tooltipClickable = input(true);
+        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$1.CdsIconCustomTag, selector: "cds-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", 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"] }]
+        }] });
+
+// Clarity actually has an "outside-click" directive, but they don't export it 🤷
+class OutsideClickDirective {
+    constructor() {
+        this.outsideClick = output({ alias: 'cngOutsideClick' });
+        this.renderer = inject(Renderer2);
+        this.destroyRef = inject(DestroyRef);
+    }
+    ngAfterViewInit() {
+        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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: OutsideClickDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cngOutsideClick]',
+                }]
+        }] });
+
+/**
+ * Enum for the Screen size in pixels, defined by clarity here https://vmware.github.io/clarity/documentation/v0.12/grid
+ * We consider screens above 1200px to be a desktop, between 576px and 1199px to be a tablet and below 576px to be a phone.
+ */
+var ScreenWidth;
+(function (ScreenWidth) {
+    ScreenWidth[ScreenWidth["EXTRA_LARGE"] = 1200] = "EXTRA_LARGE";
+    ScreenWidth[ScreenWidth["LARGE"] = 992] = "LARGE";
+    ScreenWidth[ScreenWidth["MEDIUM"] = 768] = "MEDIUM";
+    ScreenWidth[ScreenWidth["SMALL"] = 576] = "SMALL";
+    ScreenWidth[ScreenWidth["EXTRA_SMALL"] = 575] = "EXTRA_SMALL";
+})(ScreenWidth || (ScreenWidth = {}));
+var ScreenOrientation;
+(function (ScreenOrientation) {
+    ScreenOrientation["PORTRAIT"] = "PORTRAIT";
+    ScreenOrientation["LANDSCAPE"] = "LANDSCAPE";
+})(ScreenOrientation || (ScreenOrientation = {}));
+const DATEPICKER_ENABLE_BREAKPOINT = 768;
+const MOBILE_USERAGENT_REGEX = /Mobi/i;
+class ScreenStateService {
+    constructor(_document) {
+        this._document = _document;
+        this.isUserAgentMobile = false;
+        this.screenWidthSubject = new ReplaySubject(1);
+        this.screenOrientationSubject = new ReplaySubject(1);
+        window.addEventListener('resize', () => {
+            this.onResize();
+        });
+        window.addEventListener('orientationchange', () => {
+            this.onOrientationChange();
+        });
+        this.determineMobileUserAgent();
+        // Execute them once for initial values
+        this.onResize();
+        this.onOrientationChange();
+    }
+    getScreenWidthChanged() {
+        return this.screenWidthSubject;
+    }
+    getMobileStateChanged() {
+        return this.getScreenWidthChanged().pipe(map$2(screenWidth => screenWidth < DATEPICKER_ENABLE_BREAKPOINT && this.isUserAgentMobile), distinctUntilChanged$1());
+    }
+    getScreenOrientationChanged() {
+        return this.screenOrientationSubject;
+    }
+    onResize() {
+        const windowWidth = window.innerWidth;
+        this.screenWidthSubject.next(windowWidth);
+    }
+    onOrientationChange() {
+        const prevOrientation = this.screenOrientation;
+        const orientation = window.orientation;
+        // Probably not always correct since this depends on the devices default orientation.
+        // Better way to identify this would probably be comparing height & width of the screen.
+        if (orientation === -90 || orientation === 90) {
+            this.screenOrientation = ScreenOrientation.LANDSCAPE;
+        }
+        else {
+            this.screenOrientation = ScreenOrientation.PORTRAIT;
+        }
+        if (this.screenOrientation !== prevOrientation) {
+            this.screenOrientationSubject.next(this.screenOrientation);
+        }
+    }
+    determineMobileUserAgent() {
+        if (this._document) {
+            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' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ScreenStateService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }] });
+
+class WindowResizeDirective {
+    constructor() {
+        this.debounce = input(250);
+        this.includeFirst = input(false);
+        this.windowResize = output({ alias: 'cngWindowResize' });
+        this.screenStateService = inject(ScreenStateService);
+        this.destroyRef = inject(DestroyRef);
+    }
+    ngOnInit() {
+        const skipCount = this.includeFirst() ? 0 : 1;
+        this.screenStateService
+            .getScreenWidthChanged()
+            .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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WindowResizeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cngWindowResize]',
+                }]
+        }] });
+
+class BarChartComponent extends ChartBase {
+    static { this.HORIZONTAL_BAR_MIN_HEIGHT_PX = 25; }
+    constructor() {
+        super();
+        this.data = input.required();
+        this.stackLabels = 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.exportFilename = input('bar-chart');
+        /** Optional label rendered below the X axis. */
+        this.xAxisLabel = input('');
+        /** Optional label rendered rotated to the left of the Y axis. */
+        this.yAxisLabel = input('');
+        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.totalByStack = computed(() => {
+            const totals = {};
+            for (const d of this.slicedDataPoints()) {
+                totals[d.stackKey] = (totals[d.stackKey] ?? 0) + d.value;
+            }
+            return totals;
+        });
+        this.keysByStack = computed(() => {
+            const keys = {};
+            for (const d of this.slicedDataPoints()) {
+                if (!keys[d.stackKey]) {
+                    keys[d.stackKey] = [];
+                }
+                keys[d.stackKey].push(d.key);
+            }
+            return keys;
+        });
+        // 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);
+        this.showingBarCount = computed(() => new Set(this.slicedDataPoints()
+            .filter(d => d.value > 0)
+            .map(d => d.stackKey)).size);
+        this.alertMessageAndType = computed(() => {
+            if (this.loading()) {
+                return undefined;
+            }
+            if (!this.showingBarCount()) {
+                return [this.noItemsMessage(), NO_ITEMS_ALERT_TYPE];
+            }
+            else if (this.totalBarCount() !== this.showingBarCount()) {
+                return [
+                    this.stackLabels() ? this.tooManyItemsGroupedMessage() : this.tooManyItemsMessage(),
+                    TOO_MANY_ITEMS_ALERT_TYPE,
+                ];
+            }
+            return undefined;
+        });
+        this.legendItems = computed(() => {
+            if (!this.showLegend() || !this.data()?.length) {
+                return [];
+            }
+            if (this.stackLabels()?.length) {
+                // Stacked: one legend entry per distinct label (= each layer in the stack)
+                const seen = new Set();
+                const items = [];
+                for (const item of this.data()) {
+                    const label = item.fullLabel ?? item.label;
+                    if (!seen.has(label)) {
+                        seen.add(label);
+                        items.push({ label, color: item.color });
+                    }
+                }
+                return items;
+            }
+            // Non-stacked: one entry per bar
+            return this.data().map(item => ({ label: item.fullLabel ?? item.label, color: item.color }));
+        });
+        /** Computed values used by the tooltip to avoid inline logic in the template. */
+        this.tooltipKey = computed(() => {
+            const item = this.selectedItem();
+            if (!item) {
+                return undefined;
+            }
+            return this.stackLabels()?.length ? this.keysByStack()[item.stackKey] ?? [] : [item.key];
+        });
+        this.tooltipLabel = computed(() => {
+            const item = this.selectedItem();
+            if (!item) {
+                return undefined;
+            }
+            return this.stackLabels()?.length ? item.stackKey : item.fullLabel ?? item.label;
+        });
+        this.tooltipValue = computed(() => {
+            const item = this.selectedItem();
+            if (!item) {
+                return undefined;
+            }
+            return this.stackLabels()?.length ? this.totalByStack()[item.stackKey] ?? 0 : item.value;
+        });
+        /** Slices belonging to the currently selected stack – used by the tooltip @for loop. */
+        this.selectedStackSlices = computed(() => {
+            const item = this.selectedItem();
+            if (!item || !this.stackLabels()?.length) {
+                return [];
+            }
+            return this.slicedDataPoints().filter(d => d.stackKey === item.stackKey);
+        });
+        this.maxAmountOfItems = signal(undefined);
+        this.slicedDataPoints = signal([]);
+        this.barSelection = null;
+        this.labelSelection = null;
+    }
+    ngOnChanges(_changes) {
+        if (!this.svg) {
+            return;
+        }
+        requestAnimationFrame(() => this.updateChart());
+    }
+    ngAfterViewInit() {
+        this.createChart();
+        super.ngAfterViewInit(); // schedules the initial requestAnimationFrame(() => updateChart())
+    }
+    createChart() {
+        const element = this.chartRef().nativeElement;
+        this.svg = select(element);
+    }
+    updateChart() {
+        this.svg.selectAll('*').remove();
+        if (this.loading()) {
+            this.slicedDataPoints.set([]);
+            return;
+        }
+        const { width: containerWidth, height: containerHeight } = this.getContainerDimensions();
+        const extraBottom = this.xAxisLabel() ? 16 : 0;
+        const extraLeft = this.yAxisLabel() ? 16 : 0;
+        const leftMargin = (this.orientation() === 'horizontal' ? this.MARGIN.left : 30) + extraLeft;
+        const width = containerWidth - leftMargin - this.MARGIN.right;
+        const height = containerHeight - this.MARGIN.top - (this.MARGIN.bottom + extraBottom);
+        this.maxAmountOfItems.set(this.getMaxAmountOfItems(width, height));
+        if (!this.data()?.length) {
+            this.slicedDataPoints.set([]);
+            return;
+        }
+        const stacks = this.stackItems(this.data());
+        const slicedStacks = stacks.slice(0, this.maxAmountOfItems());
+        const flatStacks = slicedStacks.flat();
+        this.slicedDataPoints.set(flatStacks);
+        const slicedStackKeys = new Set(slicedStacks.map(stack => stack[0].stackKey));
+        const labels = this.stackLabels()?.length
+            ? this.stackLabels()
+                .filter(label => slicedStackKeys.has(label))
+                .map(label => ({ stackKey: label, label }))
+            : flatStacks.map(d => ({ stackKey: d.stackKey, label: d.label }));
+        const g = this.svg
+            .attr('width', width)
+            .attr('height', height)
+            .append('g')
+            .attr('transform', `translate(${leftMargin},${this.MARGIN.top})`);
+        if (this.orientation() === 'vertical') {
+            this.createVerticalChart(g, labels, width, height, this.xAxisLabel(), this.yAxisLabel(), leftMargin);
+        }
+        else {
+            this.createHorizontalChart(g, labels, width, height, this.xAxisLabel(), this.yAxisLabel(), leftMargin);
+        }
+        this.styleGridLines(g);
+    }
+    createVerticalChart(g, labels, width, height, xAxisLabel, yAxisLabel, leftMargin) {
+        const keys = labels.map(d => d.stackKey);
+        const x = scaleBand().domain(keys).range([0, width]);
+        const y = scaleLinear()
+            .domain([0, max(this.slicedDataPoints(), (d) => d.stackValue1) || 0])
+            .nice()
+            .range([height, 0]);
+        // X Axis
+        const labelSelection = g
+            .append('g')
+            .attr('transform', `translate(0,${height})`)
+            .call(axisBottom(x))
+            .selectAll('text');
+        this.labelSelection = labelSelection
+            .data(labels)
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            .call(this.addTextCommonInfo)
+            .style('cursor', 'pointer')
+            .call(this.addTextAndTitle.bind(this), x.bandwidth())
+            .call(this.addTextHoverHandlers.bind(this))
+            .call(this.addTextClickHandler.bind(this));
+        // Y Axis
+        const tickValues = y.ticks(5).filter((tick) => Number.isInteger(tick));
+        const yAxis = g
+            .append('g')
+            .call(axisLeft(y).tickValues(tickValues).tickSize(-width).tickFormat(format('~s')))
+            .selectAll('text');
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        yAxis.call(this.addTextCommonInfo);
+        this.createBarSelectionGroups(g);
+        // Add highlight rect (behind)
+        this.addVerticalBarRectangle(x, y, 2)
+            .attr('class', 'bar-highlight')
+            .attr('fill', '#fff')
+            .style('stroke', (d) => toChartColor(d.color))
+            .attr('stroke-width', 2)
+            .style('opacity', 0); // hidden by default;
+        // Add main bar rect (on top)
+        this.addVerticalBarRectangle(x, y)
+            .attr('class', 'bar')
+            .style('fill', (d) => toChartColor(d.color));
+        this.appendAxisLabel(g, xAxisLabel, width / 2, height + 40);
+        this.appendAxisLabel(g, yAxisLabel, -height / 2, -(leftMargin - 8), 'rotate(-90)');
+    }
+    createHorizontalChart(g, labels, width, height, xAxisLabel, yAxisLabel, leftMargin) {
+        const x = scaleLinear()
+            .domain([0, max(this.slicedDataPoints(), (d) => d.stackValue1) || 0])
+            .nice()
+            .range([0, width]);
+        const keys = labels.map(d => d.stackKey);
+        const y = scaleBand().domain(keys).range([0, height]);
+        // X Axis
+        const tickValues = x.ticks(5).filter((tick) => Number.isInteger(tick));
+        const xAxis = g
+            .append('g')
+            .attr('transform', `translate(0,${height})`)
+            .call(axisBottom(x).tickValues(tickValues).tickSize(-height).tickFormat(format('~s')))
+            .selectAll('text');
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        xAxis.call(this.addTextCommonInfo);
+        // Y Axis
+        const labelSelection = g
+            .append('g')
+            .attr('transform', `translate(0,0)`)
+            .call(axisLeft(y))
+            .selectAll('text');
+        this.labelSelection = labelSelection
+            .data(labels)
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            .call(this.addTextCommonInfo)
+            .style('cursor', 'pointer')
+            .call(this.addTextAndTitle.bind(this), this.MARGIN.left - 10)
+            .call(this.addTextHoverHandlers.bind(this))
+            .call(this.addTextClickHandler.bind(this));
+        this.createBarSelectionGroups(g);
+        // Add highlight rect (behind)
+        this.addHorizontalBarRectangle(x, y, 2)
+            .attr('class', 'bar-highlight')
+            .attr('fill', '#fff')
+            .style('stroke', (d) => toChartColor(d.color))
+            .attr('stroke-width', 2)
+            .style('opacity', 0); // hidden by default;
+        // Add main bar rect (on top)
+        this.addHorizontalBarRectangle(x, y)
+            .attr('class', 'bar')
+            .style('fill', (d) => toChartColor(d.color));
+        // X axis description label (value axis at bottom)
+        this.appendAxisLabel(g, xAxisLabel, width / 2, height + 40);
+        // Y axis description label: centred in the extra band reserved for it
+        this.appendAxisLabel(g, yAxisLabel, -height / 2, -((this.MARGIN.left + leftMargin) / 2), 'rotate(-90)');
+    }
+    createBarSelectionGroups(g) {
+        this.barSelection = g
+            .selectAll('.bar-group')
+            .data(this.slicedDataPoints(), (d) => d.key)
+            .join('g')
+            .attr('class', 'bar-group')
+            .style('cursor', 'pointer')
+            .on('mouseover', (_e, d) => this.setHoverStylesByStackKey(d.stackKey, d.key, true))
+            .on('mouseout', (_e, d) => this.setHoverStylesByStackKey(d.stackKey, d.key, false))
+            .call(this.addBarClickHandler.bind(this));
+    }
+    addTextCommonInfo(g) {
+        g.style('font-size', '11px').style('fill', 'var(--clr-color-neutral-600, #666)');
+    }
+    addTextHoverHandlers(g) {
+        g.on('mouseover', (_e, d) => this.setHoverStylesByStackKey(d.stackKey, undefined, true)) //
+            .on('mouseout', (_e, d) => this.setHoverStylesByStackKey(d.stackKey, undefined, false));
+    }
+    setHoverStylesByStackKey(stackKey, key, isHover) {
+        // When hovering a stack section, we also need to highlight the label, but not the other sections of the same stack.
+        // But when hovering a label, we need to highlight all sections of the stack.
+        const barGroup = this.barSelection.filter((d) => d.stackKey === stackKey && (key == null || d.key === key));
+        barGroup.select('.bar').style('mix-blend-mode', isHover ? 'multiply' : 'unset');
+        barGroup.select('.bar-highlight').style('opacity', isHover ? '1' : '0');
+        this.labelSelection
+            .filter((d) => d.stackKey === stackKey)
+            .style('font-weight', isHover ? 'bold' : 'unset');
+    }
+    addBarClickHandler(g) {
+        g.on('click', (event, d) => {
+            event.stopPropagation();
+            this.openTooltipByKey(d.key);
+        });
+    }
+    addTextClickHandler(g) {
+        // no click handler for labels in stacked charts
+        if (this.stackLabels()?.length) {
+            return;
+        }
+        g.on('click', (event, d) => {
+            event.stopPropagation();
+            // Note: In non-stacked charts, the stackKey is equal to the key, so this works - but the logic is confusing [VU3REQ-4790]
+            this.openTooltipByKey(d.stackKey);
+        });
+    }
+    openTooltipByKey(key) {
+        const index = this.slicedDataPoints().findIndex(item => item.key === key);
+        const rect = this.barSelection
+            .filter((_d, i) => i === index)
+            // we actually want the bar, not the group (because if value is 0, then the group is not positioned correctly
+            .node()
+            .children[0].getBoundingClientRect();
+        const container = this.chartRef().nativeElement.getBoundingClientRect();
+        this.tooltipPosition.set({
+            x: rect.left - container.left + rect.width / 2,
+            y: (this.tooltipOrientation() === 'top' ? rect.top : rect.bottom) - container.top,
+        });
+        this.selectedItem.set(this.slicedDataPoints()[index]);
+    }
+    addTextAndTitle(g, availableWidth) {
+        g.each((d, index, nodes) => {
+            const target = select(nodes[index]);
+            target.text(this.textRenderer.render(d.label, 15, availableWidth, target.style('font-size'), target.style('font-family')));
+            target.append('title').text(d.label);
+        });
+    }
+    styleGridLines(g) {
+        g.selectAll('.tick line').style('stroke', 'var(--clr-color-neutral-200, #e8e8e8)');
+    }
+    addVerticalBarRectangle(x, y, extraSize = 0) {
+        return this.barSelection
+            .append('rect')
+            .attr('x', (d) => {
+            return (x(d.stackKey) || 0) + (x.bandwidth() - this.barSizePx()) / 2 + extraSize;
+        })
+            .attr('y', (d) => y(d.stackValue1))
+            .attr('width', this.barSizePx() - 2 * extraSize)
+            .attr('height', (d) => y(d.stackValue0) - y(d.stackValue1))
+            .attr('rx', 1)
+            .attr('ry', 1);
+    }
+    addHorizontalBarRectangle(x, y, extraSize = 0) {
+        return this.barSelection
+            .append('rect')
+            .attr('x', (d) => x(d.stackValue0))
+            .attr('y', (d) => {
+            return (y(d.stackKey) || 0) + (y.bandwidth() - this.barSizePx()) / 2 + extraSize;
+        })
+            .attr('width', (d) => x(d.stackValue1) - x(d.stackValue0))
+            .attr('height', this.barSizePx() - 2 * extraSize)
+            .attr('rx', 1)
+            .attr('ry', 1);
+    }
+    /** Appends a shared-style axis description label to the chart group. */
+    appendAxisLabel(g, text, x, y, transform) {
+        if (!text) {
+            return;
+        }
+        const el = g
+            .append('text')
+            .attr('text-anchor', 'middle')
+            .style('font-size', '12px')
+            .style('fill', 'var(--clr-color-neutral-600, #666)')
+            .text(text)
+            .attr('x', x)
+            .attr('y', y);
+        if (transform) {
+            el.attr('transform', transform);
+        }
+    }
+    stackItems(data) {
+        let groups;
+        if (this.stackLabels()?.length) {
+            groups = Array.from(group(data, (d) => d.stackKey ?? d.key));
+        }
+        else {
+            groups = data.map(item => [item.key, [item]]);
+        }
+        return this.mapItems(groups);
+    }
+    mapItems(groups) {
+        const result = [];
+        for (const [_, items] of groups) {
+            let stackValue = 0;
+            const stackSum = sum(items, (d) => d.value);
+            result.push(items.map(item => {
+                const stackValue0 = stackValue;
+                stackValue += item.value;
+                return {
+                    ...item,
+                    stackValue0,
+                    stackValue1: stackValue,
+                    stackKey: item.stackKey ?? item.key,
+                    percentageOfStack: stackSum === 0 ? 0 : (100 * item.value) / stackSum,
+                };
+            }));
+        }
+        return result;
+    }
+    getMaxAmountOfItems(width, height) {
+        if (this.orientation() === 'vertical') {
+            return Math.floor(width / this.barAreaSizePx());
+        }
+        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 }, stackLabels: { classPropertyName: "stackLabels", publicName: "stackLabels", 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 }, 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]=\"!stackLabels() ? 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 (stackLabels()) { @let stackKey = selectedItem().stackKey; @for (slice of selectedStackSlices(); track\n      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() }} \"{{ stackKey }}\"\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 class=\"chart-export-btn\" [svgRef]=\"svgElement()\" [filename]=\"exportFilename()\" />\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"] }, { 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: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", 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]=\"!stackLabels() ? 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 (stackLabels()) { @let stackKey = selectedItem().stackKey; @for (slice of selectedStackSlices(); track\n      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() }} \"{{ stackKey }}\"\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 class=\"chart-export-btn\" [svgRef]=\"svgElement()\" [filename]=\"exportFilename()\" />\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: () => [] });
+
+/*
+ * Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+/**
+ * Renders interactive dot circles for a single XY series onto the given D3 group.
+ *
+ * - Default radius: 4px, hover radius: 6px.
+ * - Calls `onClick` with the clicked element, data point and series when a dot is clicked.
+ *
+ */
+function renderDots(g, series, x, y, onClick) {
+    g.selectAll(`.dot-${series.key}`)
+        .data(series.data, (d) => d.x)
+        .join('circle')
+        .attr('class', `dot dot-${series.key}`)
+        .attr('cx', (d) => x(d.x) ?? 0)
+        .attr('cy', (d) => y(d.value))
+        .attr('r', 4)
+        .style('fill', toChartColor(series.color))
+        .attr('stroke', '#fff')
+        .attr('stroke-width', 2)
+        .style('cursor', 'pointer')
+        .on('mouseover', (e) => {
+        select(e.currentTarget).attr('r', 6);
+    })
+        .on('mouseout', (e) => {
+        select(e.currentTarget).attr('r', 4);
+    })
+        .on('click', (event, d) => {
+        event.stopPropagation();
+        onClick(event.currentTarget, d, series);
+    });
+}
+
+/*
+ * Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+/**
+ * Draws the X and Y axes (with integer-only Y ticks and grid lines) plus
+ * optional description labels onto the given D3 group.
+ *
+ * @param g          The D3 group element to append into.
+ * @param x          Any D3 axis scale keyed on strings (`ScalePoint` or `ScaleBand`).
+ * @param y          The linear Y scale.
+ * @param opts       Axis configuration options.
+ */
+function drawXYAxes(g, x, y, opts) {
+    const { xLabelMap, width, height, xAxisLabel, yAxisLabel, effectiveLeft } = opts;
+    // X axis
+    g.append('g')
+        .attr('transform', `translate(0,${height})`)
+        .call(axisBottom(x).tickFormat((d) => xLabelMap.get(d) ?? d))
+        .selectAll('text')
+        .style('font-size', '11px')
+        .style('fill', 'var(--clr-color-neutral-600, #666)');
+    // Y axis
+    const tickValues = y.ticks(5).filter((t) => Number.isInteger(t));
+    g.append('g')
+        .call(axisLeft(y).tickValues(tickValues).tickSize(-width).tickFormat(format('~s')))
+        .selectAll('text')
+        .style('font-size', '11px')
+        .style('fill', 'var(--clr-color-neutral-600, #666)');
+    // Optional X axis description label
+    if (xAxisLabel) {
+        g.append('text')
+            .attr('x', width / 2)
+            .attr('y', height + 40)
+            .attr('text-anchor', 'middle')
+            .style('font-size', '12px')
+            .style('fill', 'var(--clr-color-neutral-600, #666)')
+            .text(xAxisLabel);
+    }
+    // Optional Y axis description label (rotated, centred in the left-margin band)
+    if (yAxisLabel) {
+        g.append('text')
+            .attr('transform', 'rotate(-90)')
+            .attr('x', -height / 2)
+            .attr('y', -(effectiveLeft / 2))
+            .attr('text-anchor', 'middle')
+            .style('font-size', '12px')
+            .style('fill', 'var(--clr-color-neutral-600, #666)')
+            .text(yAxisLabel);
+    }
+}
+/**
+ * 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)');
+}
+
+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.exportFilename = input('line-chart');
+        this.noItemsMessage = input(NO_ITEMS_MESSAGE);
+        this.tooltipPercentOfTotal = input('of total');
+        /** Optional label rendered below the X axis. */
+        this.xAxisLabel = input('');
+        /** Optional label rendered rotated to the left of the Y axis. */
+        this.yAxisLabel = input('');
+        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.alertMessageAndType = computed(() => {
+            if (this.loading()) {
+                return undefined;
+            }
+            if (!this.hasData()) {
+                return [this.noItemsMessage(), NO_ITEMS_ALERT_TYPE];
+            }
+            return undefined;
+        });
+        this.legendItems = computed(() => {
+            if (!this.showLegend()) {
+                return [];
+            }
+            return this.series().map(s => ({ label: s.label, color: s.color }));
+        });
+    }
+    ngOnChanges(_changes) {
+        if (!this.svg) {
+            return;
+        }
+        requestAnimationFrame(() => this.updateChart());
+    }
+    ngAfterViewInit() {
+        this.svg = select(this.chartRef().nativeElement);
+        super.ngAfterViewInit();
+    }
+    updateChart() {
+        this.svg.selectAll('*').remove();
+        if (this.loading()) {
+            return;
+        }
+        if (!this.hasData()) {
+            return;
+        }
+        const { width: containerWidth, height: containerHeight } = this.getContainerDimensions();
+        const extraBottom = this.xAxisLabel() ? 16 : 0;
+        const extraLeft = this.yAxisLabel() ? 16 : 0;
+        const extraTop = this.showValues() ? 14 : 0;
+        const effectiveLeft = this.MARGIN.left + extraLeft;
+        const width = containerWidth - effectiveLeft - this.MARGIN.right;
+        const height = containerHeight - (this.MARGIN.top + extraTop) - (this.MARGIN.bottom + extraBottom);
+        // Collect all unique X keys in the order they appear across all series
+        const xKeys = [...new Set(this.series().flatMap(s => s.data.map(d => d.x)))];
+        // Build a display-label map
+        const xLabelMap = new Map();
+        this.series().forEach(s => s.data.forEach(d => xLabelMap.set(d.x, d.xLabel ?? d.x)));
+        const x = scalePoint().domain(xKeys).range([0, width]).padding(0.5);
+        const maxY = max(this.series().flatMap(s => s.data.map(d => d.value))) ?? 0;
+        const y = scaleLinear().domain([0, maxY]).nice().range([height, 0]);
+        const g = this.svg
+            .attr('width', width)
+            .attr('height', height)
+            .append('g')
+            .attr('transform', `translate(${effectiveLeft},${this.MARGIN.top + extraTop})`);
+        drawXYAxes(g, x, y, {
+            xLabelMap,
+            width,
+            height,
+            xAxisLabel: this.xAxisLabel(),
+            yAxisLabel: this.yAxisLabel(),
+            effectiveLeft,
+        });
+        styleGridLines(g);
+        this.drawSeries(g, x, y);
+    }
+    drawSeries(g, x, y) {
+        const lineGenerator = line()
+            .x((d) => x(d.x) ?? 0)
+            .y((d) => y(d.value))
+            .curve(curveMonotoneX);
+        for (const series of this.series()) {
+            if (!series.data.length) {
+                continue;
+            }
+            // Optional area fill
+            if (this.showArea()) {
+                g.append('path')
+                    .datum(series.data)
+                    .attr('class', `area area-${series.key}`)
+                    .style('fill', toChartColor(series.color))
+                    .attr('fill-opacity', 0.1)
+                    .attr('d', lineGenerator);
+            }
+            // Line path
+            g.append('path')
+                .datum(series.data)
+                .attr('class', `line line-${series.key}`)
+                .attr('fill', 'none')
+                .style('stroke', toChartColor(series.color))
+                .attr('stroke-width', 2)
+                .attr('stroke-linejoin', 'round')
+                .attr('stroke-linecap', 'round')
+                .attr('d', lineGenerator);
+            // Dots
+            renderDots(g, series, x, y, (el, point, s) => this.openTooltip(el, point, s));
+            // Value labels above each dot
+            if (this.showValues()) {
+                g.selectAll(`.value-label-${series.key}`)
+                    .data(series.data, (d) => d.x)
+                    .join('text')
+                    .attr('class', `value-label value-label-${series.key}`)
+                    .attr('x', (d) => x(d.x) ?? 0)
+                    .attr('y', (d) => y(d.value) - 9)
+                    .attr('text-anchor', 'middle')
+                    .style('font-size', '11px')
+                    .style('font-weight', '600')
+                    .style('fill', toChartColor(series.color))
+                    .attr('stroke', '#fff')
+                    .attr('stroke-width', 3)
+                    .attr('paint-order', 'stroke fill')
+                    .style('pointer-events', 'none')
+                    .text((d) => format('~s')(d.value));
+            }
+        }
+    }
+    openTooltip(el, point, series) {
+        const rect = el.getBoundingClientRect();
+        const container = this.chartRef().nativeElement.getBoundingClientRect();
+        this.tooltipPosition.set({
+            x: rect.left - container.left + rect.width / 2,
+            y: (this.tooltipOrientation() === 'top' ? rect.top : rect.bottom) - container.top,
+        });
+        this.selectedItem.set({ ...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 }, 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 } }, 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 class=\"chart-export-btn\" [svgRef]=\"svgElement()\" [filename]=\"exportFilename()\" />\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"] }, { 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: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", 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 class=\"chart-export-btn\" [svgRef]=\"svgElement()\" [filename]=\"exportFilename()\" />\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"] }]
+        }] });
+
+class AreaChartComponent extends ChartBase {
+    constructor() {
+        super(...arguments);
+        this.series = input.required();
+        this.tooltipOrientation = input('top');
+        this.showLegend = input(true);
+        this.showExportButton = input(false);
+        this.exportFilename = input('area-chart');
+        /** Area fill opacity (0–1). Default: 0.2. */
+        this.areaOpacity = input(0.2);
+        this.noItemsMessage = input(NO_ITEMS_MESSAGE);
+        this.tooltipPercentOfTotal = input('of total');
+        /** Optional label rendered below the X axis. */
+        this.xAxisLabel = input('');
+        /** Optional label rendered rotated to the left of the Y axis. */
+        this.yAxisLabel = input('');
+        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.alertMessageAndType = computed(() => {
+            if (this.loading()) {
+                return undefined;
+            }
+            if (!this.hasData()) {
+                return [this.noItemsMessage(), NO_ITEMS_ALERT_TYPE];
+            }
+            return undefined;
+        });
+        this.legendItems = computed(() => {
+            if (!this.showLegend()) {
+                return [];
+            }
+            return this.series().map(s => ({ label: s.label, color: s.color }));
+        });
+    }
+    ngOnChanges(_changes) {
+        if (!this.svg) {
+            return;
+        }
+        requestAnimationFrame(() => this.updateChart());
+    }
+    ngAfterViewInit() {
+        this.svg = select(this.chartRef().nativeElement);
+        super.ngAfterViewInit();
+    }
+    updateChart() {
+        this.svg.selectAll('*').remove();
+        if (this.loading() || !this.hasData()) {
+            return;
+        }
+        const { width: containerWidth, height: containerHeight } = this.getContainerDimensions();
+        const extraBottom = this.xAxisLabel() ? 16 : 0;
+        const extraLeft = this.yAxisLabel() ? 16 : 0;
+        const effectiveLeft = this.MARGIN.left + extraLeft;
+        const width = containerWidth - effectiveLeft - this.MARGIN.right;
+        const height = containerHeight - this.MARGIN.top - (this.MARGIN.bottom + extraBottom);
+        const xKeys = [...new Set(this.series().flatMap(s => s.data.map(d => d.x)))];
+        const xLabelMap = new Map();
+        this.series().forEach(s => s.data.forEach(d => xLabelMap.set(d.x, d.xLabel ?? d.x)));
+        const x = scalePoint().domain(xKeys).range([0, width]).padding(0.5);
+        const maxY = max(this.series().flatMap(s => s.data.map(d => d.value))) ?? 0;
+        const y = scaleLinear().domain([0, maxY]).nice().range([height, 0]);
+        const g = this.svg
+            .attr('width', width)
+            .attr('height', height)
+            .append('g')
+            .attr('transform', `translate(${effectiveLeft},${this.MARGIN.top})`);
+        drawXYAxes(g, x, y, {
+            xLabelMap,
+            width,
+            height,
+            xAxisLabel: this.xAxisLabel(),
+            yAxisLabel: this.yAxisLabel(),
+            effectiveLeft,
+        });
+        styleGridLines(g);
+        this.drawSeries(g, x, y, height);
+    }
+    drawSeries(g, x, y, height) {
+        const areaGenerator = area()
+            .x((d) => x(d.x) ?? 0)
+            .y0(height)
+            .y1((d) => y(d.value))
+            .curve(curveMonotoneX);
+        const lineGenerator = line()
+            .x((d) => x(d.x) ?? 0)
+            .y((d) => y(d.value))
+            .curve(curveMonotoneX);
+        // Draw areas first (behind lines)
+        for (const series of this.series()) {
+            if (!series.data.length) {
+                continue;
+            }
+            g.append('path')
+                .datum(series.data)
+                .attr('class', `area area-${series.key}`)
+                .style('fill', toChartColor(series.color))
+                .attr('fill-opacity', this.areaOpacity())
+                .attr('stroke', 'none')
+                .attr('d', areaGenerator);
+        }
+        // Draw lines and dots on top
+        for (const series of this.series()) {
+            if (!series.data.length) {
+                continue;
+            }
+            g.append('path')
+                .datum(series.data)
+                .attr('class', `line line-${series.key}`)
+                .attr('fill', 'none')
+                .style('stroke', toChartColor(series.color))
+                .attr('stroke-width', 2)
+                .attr('stroke-linejoin', 'round')
+                .attr('stroke-linecap', 'round')
+                .attr('d', lineGenerator);
+            renderDots(g, series, x, y, (el, point, s) => this.openTooltip(el, point, s));
+        }
+    }
+    openTooltip(el, point, series) {
+        const rect = el.getBoundingClientRect();
+        const container = this.chartRef().nativeElement.getBoundingClientRect();
+        this.tooltipPosition.set({
+            x: rect.left - container.left + rect.width / 2,
+            y: (this.tooltipOrientation() === 'top' ? rect.top : rect.bottom) - container.top,
+        });
+        this.selectedItem.set({ ...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 }, 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 class=\"chart-export-btn\" [svgRef]=\"svgElement()\" [filename]=\"exportFilename()\" />\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"] }, { 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: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", 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 class=\"chart-export-btn\" [svgRef]=\"svgElement()\" [filename]=\"exportFilename()\" />\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"] }]
+        }] });
+
+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.exportFilename = input('combo-chart');
+        this.noItemsMessage = input(NO_ITEMS_MESSAGE);
+        this.tooltipPercentOfTotal = input('of total');
+        /** Optional label rendered below the X axis. */
+        this.xAxisLabel = input('');
+        /** Optional label rendered rotated to the left of the Y axis (bar scale). */
+        this.yAxisLabel = input('');
+        /** Optional label rendered rotated to the right of the Y axis (line scale). */
+        this.yLineAxisLabel = input('');
+        // ── 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.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;
+        });
+        this.alertMessageAndType = computed(() => {
+            if (this.loading()) {
+                return undefined;
+            }
+            if (!this.hasData()) {
+                return [this.noItemsMessage(), NO_ITEMS_ALERT_TYPE];
+            }
+            return undefined;
+        });
+        this.legendItems = computed(() => {
+            if (!this.showLegend()) {
+                return [];
+            }
+            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];
+        });
+    }
+    // ── Lifecycle ────────────────────────────────────────────────────────────────
+    ngOnChanges(_changes) {
+        if (!this.svg) {
+            return;
+        }
+        requestAnimationFrame(() => this.updateChart());
+    }
+    ngAfterViewInit() {
+        this.svg = select(this.chartRef().nativeElement);
+        super.ngAfterViewInit();
+    }
+    // ── Chart rendering ──────────────────────────────────────────────────────────
+    updateChart() {
+        this.svg.selectAll('*').remove();
+        if (this.loading() || !this.hasData()) {
+            return;
+        }
+        const { width: cw, height: ch } = this.getContainerDimensions();
+        const extraBottom = this.xAxisLabel() ? 16 : 0;
+        const extraLeft = this.yAxisLabel() ? 16 : 0;
+        const effectiveLeft = this.MARGIN.left + extraLeft;
+        // Reserve extra right margin when line series are present (right Y axis)
+        const hasLines = this.lineSeries().some(s => s.data.length > 0);
+        const extraRight = hasLines ? (this.yLineAxisLabel() ? 50 : 40) : 0;
+        const width = cw - effectiveLeft - this.MARGIN.right - extraRight;
+        const height = ch - this.MARGIN.top - (this.MARGIN.bottom + extraBottom);
+        // Collect all unique X keys preserving order
+        const allBarKeys = this.barSeries().flatMap(s => s.data.map(d => d.x));
+        const allLineKeys = this.lineSeries().flatMap(s => s.data.map(d => d.x));
+        const xKeys = [...new Set([...allBarKeys, ...allLineKeys])];
+        // Build X-label map
+        const xLabelMap = new Map();
+        this.barSeries().forEach(s => s.data.forEach(d => xLabelMap.set(d.x, d.xLabel ?? d.x)));
+        // Outer X scale (one band per category)
+        const x = scaleBand().domain(xKeys).range([0, width]).paddingInner(0.35).paddingOuter(0.15);
+        // ── Separate Y scales ────────────────────────────────────────────────────
+        // Bar Y scale (left axis)
+        const xStackTotals = new Map();
+        for (const series of this.barSeries()) {
+            for (const point of series.data) {
+                xStackTotals.set(point.x, (xStackTotals.get(point.x) ?? 0) + point.value);
+            }
+        }
+        const maxBar = max([...xStackTotals.values()]) ?? 0;
+        const yBar = scaleLinear()
+            .domain([0, maxBar || 1])
+            .nice()
+            .range([height, 0]);
+        // Line Y scale (right axis)
+        const maxLine = max(this.lineSeries().flatMap(s => s.data.map(d => d.value))) ?? 0;
+        const yLine = scaleLinear()
+            .domain([0, maxLine || 1])
+            .nice()
+            .range([height, 0]);
+        const g = this.svg
+            .attr('width', width)
+            .attr('height', height)
+            .append('g')
+            .attr('transform', `translate(${effectiveLeft},${this.MARGIN.top})`);
+        drawXYAxes(g, x, yBar, {
+            xLabelMap,
+            width,
+            height,
+            xAxisLabel: this.xAxisLabel(),
+            yAxisLabel: this.yAxisLabel(),
+            effectiveLeft,
+        });
+        styleGridLines(g);
+        // ── Right Y axis for line series ─────────────────────────────────────────
+        if (hasLines) {
+            const lineTickValues = yLine.ticks(5).filter((t) => Number.isInteger(t));
+            const rightAxisG = g
+                .append('g')
+                .attr('transform', `translate(${width},0)`)
+                .call(axisRight(yLine).tickValues(lineTickValues).tickFormat(format('~s')).tickSize(-width) // draw grid lines across the chart
+            );
+            rightAxisG.selectAll('text').style('font-size', '11px').style('fill', 'var(--clr-color-neutral-600, #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-dasharray', '4 3')
+                .style('stroke-opacity', '0.8');
+            // Remove the default domain line so it doesn't overlap the chart
+            rightAxisG.select('.domain').remove();
+            if (this.yLineAxisLabel()) {
+                g.append('text')
+                    .attr('transform', 'rotate(-90)')
+                    .attr('x', -height / 2)
+                    .attr('y', width + extraRight - 4)
+                    .attr('text-anchor', 'middle')
+                    .style('font-size', '12px')
+                    .style('fill', 'var(--clr-color-neutral-600, #666)')
+                    .text(this.yLineAxisLabel());
+            }
+        }
+        this.drawBars(g, x, yBar);
+        this.drawLines(g, x, yLine);
+    }
+    drawBars(g, x, y) {
+        // Running stack base (cumulative sum) per X key across all bar series
+        const stackBase = new Map();
+        for (const series of this.barSeries()) {
+            if (!series.data.length) {
+                continue;
+            }
+            const stacked = series.data.map(d => ({
+                ...d,
+                base: stackBase.get(d.x) ?? 0,
+            }));
+            // Advance running totals for the next series
+            for (const d of series.data) {
+                stackBase.set(d.x, (stackBase.get(d.x) ?? 0) + d.value);
+            }
+            g.selectAll(`.bar-${series.key}`)
+                .data(stacked, (d) => d.x)
+                .join('rect')
+                .attr('class', `bar bar-${series.key}`)
+                .attr('x', (d) => x(d.x) ?? 0)
+                .attr('y', (d) => y(d.base + d.value))
+                .attr('width', x.bandwidth())
+                .attr('height', (d) => y(d.base) - y(d.base + d.value))
+                .attr('rx', 2)
+                .attr('ry', 2)
+                .style('fill', toChartColor(series.color))
+                .style('cursor', 'pointer')
+                .on('mouseover', (e) => {
+                select(e.currentTarget).attr('fill-opacity', 0.75);
+            })
+                .on('mouseout', (e) => {
+                select(e.currentTarget).attr('fill-opacity', 1);
+            })
+                .on('click', (event, d) => {
+                event.stopPropagation();
+                const rect = event.currentTarget.getBoundingClientRect();
+                const container = this.chartRef().nativeElement.getBoundingClientRect();
+                this.tooltipPosition.set({
+                    x: rect.left - container.left + rect.width / 2,
+                    y: (this.tooltipOrientation() === 'top' ? rect.top : rect.bottom) - container.top,
+                });
+                this.selectedItem.set({
+                    seriesKey: series.key,
+                    seriesLabel: series.label,
+                    seriesType: 'bar',
+                    color: series.color,
+                    x: d.x,
+                    xLabel: d.xLabel,
+                    value: d.value,
+                    total: this.total(),
+                });
+            });
+        }
+    }
+    drawLines(g, x, y) {
+        // Map X key → band center position for line/dot placement
+        const lineX = (key) => (x(key) ?? 0) + x.bandwidth() / 2;
+        const lineGenerator = line()
+            .x((d) => lineX(d.x))
+            .y((d) => y(d.value))
+            .curve(curveMonotoneX);
+        for (const series of this.lineSeries()) {
+            if (!series.data.length) {
+                continue;
+            }
+            // Line path
+            g.append('path')
+                .datum(series.data)
+                .attr('class', `combo-line combo-line-${series.key}`)
+                .attr('fill', 'none')
+                .style('stroke', toChartColor(series.color))
+                .attr('stroke-width', 2.5)
+                .attr('stroke-linejoin', 'round')
+                .attr('stroke-linecap', 'round')
+                .attr('d', lineGenerator);
+            // Dots
+            g.selectAll(`.combo-dot-${series.key}`)
+                .data(series.data, (d) => d.x)
+                .join('circle')
+                .attr('class', `combo-dot combo-dot-${series.key}`)
+                .attr('cx', (d) => lineX(d.x))
+                .attr('cy', (d) => y(d.value))
+                .attr('r', 4)
+                .style('fill', toChartColor(series.color))
+                .attr('stroke', '#fff')
+                .attr('stroke-width', 2)
+                .style('cursor', 'pointer')
+                .on('mouseover', (e) => {
+                select(e.currentTarget).attr('r', 6);
+            })
+                .on('mouseout', (e) => {
+                select(e.currentTarget).attr('r', 4);
+            })
+                .on('click', (event, d) => {
+                event.stopPropagation();
+                const el = event.currentTarget;
+                const rect = el.getBoundingClientRect();
+                const container = this.chartRef().nativeElement.getBoundingClientRect();
+                this.tooltipPosition.set({
+                    x: rect.left - container.left + rect.width / 2,
+                    y: (this.tooltipOrientation() === 'top' ? rect.top : rect.bottom) - container.top,
+                });
+                this.selectedItem.set({
+                    seriesKey: series.key,
+                    seriesLabel: series.label,
+                    seriesType: 'line',
+                    color: series.color,
+                    x: d.x,
+                    value: d.value,
+                    total: this.total(),
+                });
+            });
+        }
+    }
+    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 }, 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 } }, 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 class=\"chart-export-btn\" [svgRef]=\"svgElement()\" [filename]=\"exportFilename()\" />\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"] }, { 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: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", 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 class=\"chart-export-btn\" [svgRef]=\"svgElement()\" [filename]=\"exportFilename()\" />\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"] }]
+        }] });
+
+class PieChartComponent extends ChartBase {
+    constructor() {
+        super(...arguments);
+        this.data = input.required();
+        this.donut = input(true);
+        this.showLegend = input(true);
+        this.showExportButton = input(false);
+        this.exportFilename = input('pie-chart');
+        this.tooltipOrientation = input('top');
+        this.noItemsMessage = input(NO_ITEMS_MESSAGE);
+        this.tooltipPercentOfTotal = input('of total');
+        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.alertMessageAndType = computed(() => {
+            if (this.loading()) {
+                return undefined;
+            }
+            if (!this.hasData()) {
+                return [this.noItemsMessage(), NO_ITEMS_ALERT_TYPE];
+            }
+            return undefined;
+        });
+        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 }));
+        });
+    }
+    ngOnChanges(_changes) {
+        if (!this.svg) {
+            return;
+        }
+        requestAnimationFrame(() => this.updateChart());
+    }
+    ngAfterViewInit() {
+        this.svg = select(this.chartRef().nativeElement);
+        super.ngAfterViewInit();
+    }
+    updateChart() {
+        this.svg.selectAll('*').remove();
+        if (this.loading() || !this.hasData()) {
+            return;
+        }
+        const { width, height } = this.getContainerDimensions();
+        const radius = Math.min(width, height) / 2;
+        const innerRadius = this.donut() ? radius * 0.55 : 0;
+        const outerRadius = radius * 0.9;
+        this.arcGen = arc().innerRadius(innerRadius).outerRadius(outerRadius);
+        const hoverArc = arc()
+            .innerRadius(innerRadius)
+            .outerRadius(outerRadius * 1.06);
+        const pieGen = pie()
+            .value(d => d.value)
+            .sort(null);
+        const arcs = pieGen(this.data().filter(d => d.value > 0));
+        const g = this.svg
+            .attr('width', width)
+            .attr('height', height)
+            .append('g')
+            .attr('transform', `translate(${width / 2},${height / 2})`);
+        // Slices
+        g.selectAll('.slice')
+            .data(arcs, (d) => d.data.key)
+            .join('path')
+            .attr('class', 'slice')
+            .attr('d', this.arcGen)
+            .style('fill', (d) => toChartColor(d.data.color))
+            .attr('stroke', '#fff')
+            .attr('stroke-width', 2)
+            .style('cursor', 'pointer')
+            .on('mouseover', (e) => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            select(e.currentTarget).attr('d', hoverArc);
+        })
+            .on('mouseout', (e) => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            select(e.currentTarget).attr('d', this.arcGen);
+        })
+            .on('click', (event, d) => {
+            event.stopPropagation();
+            this.openTooltip(d, width, height);
+        });
+        // Slice labels – only show when the slice angle is large enough to fit text
+        const MIN_ANGLE = 0.4; // ~23°
+        const labelRadius = this.donut() ? (innerRadius + outerRadius) / 2 : outerRadius * 0.65;
+        const labelArc = arc().innerRadius(labelRadius).outerRadius(labelRadius);
+        const total = this.total();
+        const labelGroups = g
+            .selectAll('.slice-label')
+            .data(arcs.filter((d) => d.endAngle - d.startAngle >= MIN_ANGLE), (d) => d.data.key)
+            .join('g')
+            .attr('class', 'slice-label')
+            .attr('transform', (d) => {
+            const [x, y] = labelArc.centroid(d);
+            return `translate(${x},${y})`;
+        })
+            .style('pointer-events', 'none');
+        labelGroups
+            .append('text')
+            .attr('class', 'label-value')
+            .attr('text-anchor', 'middle')
+            .attr('dy', '-0.3em')
+            .style('font-size', '11px')
+            .style('font-weight', '600')
+            .style('fill', '#fff')
+            .style('pointer-events', 'none')
+            .text((d) => format('~s')(d.data.value));
+        labelGroups
+            .append('text')
+            .attr('class', 'label-percent')
+            .attr('text-anchor', 'middle')
+            .attr('dy', '0.9em')
+            .style('font-size', '10px')
+            .style('fill', 'rgba(255, 255, 255, 0.9)')
+            .style('pointer-events', 'none')
+            .text((d) => `${((100 * d.data.value) / total).toFixed(1)}%`);
+        // Center label (donut only)
+        if (this.donut()) {
+            g.append('text')
+                .attr('class', 'center-label')
+                .attr('text-anchor', 'middle')
+                .attr('dy', '-0.1em')
+                .style('font-size', '1.4rem')
+                .style('font-weight', '600')
+                .style('fill', 'var(--clr-color-neutral-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('text-transform', 'uppercase')
+                .style('letter-spacing', '0.05em')
+                .text('Total');
+        }
+    }
+    openTooltip(d, width, height) {
+        const [cx, cy] = this.arcGen.centroid(d);
+        this.tooltipPosition.set({
+            x: width / 2 + cx,
+            y: height / 2 + cy,
+        });
+        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 }, 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 class=\"chart-export-btn\" [svgRef]=\"svgElement()\" [filename]=\"exportFilename()\" />\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"] }, { 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: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", 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 class=\"chart-export-btn\" [svgRef]=\"svgElement()\" [filename]=\"exportFilename()\" />\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"] }]
+        }] });
+
+/*
+ * Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+// ─── Constants ────────────────────────────────────────────────────────────────
+const DEFAULT_SECTION_COLORS = ['#009ADB', '#66D1FF', '#D9D9D9', '#A6A6A6'];
+const DEFAULT_TEXT_COLORS = ['#eee', '#eee', '#555', '#eee'];
+const DEFAULT_CHART_LABELS = {
+    total: 'Total',
+    all: 'All',
+};
+class FunnelChartComponent extends ChartBase {
+    constructor() {
+        super(...arguments);
+        // ── Inputs ──────────────────────────────────────────────────────────────────
+        this.data = input([]);
+        this.showExportButton = input(false);
+        this.exportFilename = input('funnel-chart');
+        /** Rendering mode. 'default' = horizontal bars with sections; 'centered' = centered trapezoid funnel. */
+        this.orientation = input('default');
+        /** Width reserved on each side for labels (px). */
+        this.textSize = input(200);
+        /** Gap between funnel bars and their side-line labels (px). */
+        this.lineTextPadding = input(8);
+        /** Vertical gap between funnel bars – default mode only (px). */
+        this.barGap = input(2);
+        /** Vertical padding inside the side measurement lines (px). */
+        this.sideLineVerticalPadding = input(4);
+        // ── Centered-mode specific inputs ────────────────────────────────────────────
+        /** Minimum length of the horizontal measurement lines on each side (px). Centered mode only. */
+        this.minLineSize = input(30);
+        /** Ratio of bar height to spacer height. Centered mode only. */
+        this.barToSpacerRatio = input(2);
+        /** Vertical padding inside the center divider lines (px). Centered mode only. */
+        this.middleLineVerticalPadding = input(4);
+        /** Fill color of the centered-mode bars. Accepts hex or CSS custom property. Centered mode only. */
+        this.barColor = input(DEFAULT_SECTION_COLORS[0]);
+        /** Fill color of the trapezoid spacers. Accepts hex or CSS custom property. Centered mode only. */
+        this.spacerColor = input('#D9D9D9');
+        /**
+         * 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({});
+        /**
+         * 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({});
+        // ── Outputs ─────────────────────────────────────────────────────────────────
+        this.valueClicked = output();
+        // ── Computed ─────────────────────────────────────────────────────────────────
+        this.resolvedChartLabels = computed(() => ({
+            ...DEFAULT_CHART_LABELS,
+            ...this.chartLabels(),
+        }));
+        /** CSS-ready color for the centered-mode bar. */
+        this.centeredBarCssColor = computed(() => toChartColor(this.barColor()));
+        /** 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);
+        // ── State ─────────────────────────────────────────────────────────────────────
+        this.selectedItemLabel = computed(() => this.selectedItem()?.fullLabel ?? this.selectedItem()?.label ?? '');
+        this.selectedSpacerItem = signal(undefined);
+        this.sectionTooltips = signal([]);
+    }
+    // ── Lifecycle ────────────────────────────────────────────────────────────────
+    ngOnChanges(_changes) {
+        if (!this.svg) {
+            return;
+        }
+        requestAnimationFrame(() => this.updateChart());
+    }
+    ngAfterViewInit() {
+        this.svg = select(this.chartRef().nativeElement);
+        super.ngAfterViewInit();
+    }
+    // ── Chart rendering ──────────────────────────────────────────────────────────
+    updateChart() {
+        if (!this.svg) {
+            return;
+        }
+        this.svg.selectAll('*').remove();
+        if (this.loading() || !this.hasData()) {
+            return;
+        }
+        const { width: containerWidth, height: containerHeight } = this.getContainerDimensions();
+        if (this.orientation() === 'centered') {
+            this.renderCenteredChart(containerWidth, containerHeight);
+        }
+        else {
+            const funnelWidth = this.getFunnelWidth(containerWidth);
+            const barHeight = this.getBarHeight(containerHeight);
+            const dataPoints = this.calculateDataPoints(funnelWidth, barHeight);
+            this.renderRightSideText(dataPoints, containerWidth, barHeight);
+            this.renderLeftSideText(dataPoints, barHeight);
+            this.renderSideLines(dataPoints, containerWidth, funnelWidth, barHeight);
+            this.renderFunnel(dataPoints, containerWidth, containerHeight, funnelWidth, barHeight);
+        }
+    }
+    // ── Data calculation ─────────────────────────────────────────────────────────
+    calculateDataPoints(funnelWidth, barHeight) {
+        const maxValue = max(this.data(), d => d.value) ?? 1;
+        const widthScale = scaleLinear().domain([0, maxValue]).range([0, funnelWidth]);
+        const sectionColorOverrides = this.sectionColors();
+        return this.data().map((d, i) => {
+            let xOffset = 0;
+            const sections = (d.sections ?? []).map((s, si) => {
+                const rawColor = s.color ?? sectionColorOverrides[s.key] ?? DEFAULT_SECTION_COLORS[si % DEFAULT_SECTION_COLORS.length];
+                const cssColor = toChartColor(rawColor);
+                const hoverColor = rawColor.startsWith('--')
+                    ? cssColor
+                    : color(rawColor)?.darker(0.5)?.formatHex() ?? cssColor;
+                const textColor = s.textColor ?? DEFAULT_TEXT_COLORS[si % DEFAULT_TEXT_COLORS.length];
+                const sWidth = widthScale(s.value);
+                const sec = {
+                    key: s.key,
+                    label: s.label,
+                    x: xOffset,
+                    width: sWidth,
+                    value: s.value,
+                    percentage: d.value ? this.round((s.value / d.value) * 100) : 0,
+                    cssColor,
+                    hoverColor,
+                    textColor,
+                };
+                xOffset += sWidth;
+                return sec;
+            });
+            const point = {
+                ...d,
+                sections,
+                y: i * (barHeight + this.barGap()),
+                width: widthScale(d.value),
+                percentage: this.total() ? this.round((d.value / this.total()) * 100) : 0,
+            };
+            if (i > 0) {
+                const previousValue = this.data()[i - 1].value;
+                point.delta = previousValue - d.value;
+                point.deltaPercentage = previousValue === 0 ? 0 : this.round((point.delta / previousValue) * 100);
+            }
+            return point;
+        });
+    }
+    // ── Rendering helpers ────────────────────────────────────────────────────────
+    renderRightSideText(dataPoints, containerWidth, barHeight) {
+        const rightG = this.svg.append('g').attr('transform', `translate(${containerWidth - this.textSize()},0)`);
+        dataPoints.forEach((d, i) => {
+            if (i === 0) {
+                return;
+            }
+            const prev = dataPoints[i - 1];
+            const labelY = (prev.y + barHeight + d.y) / 2 + 4;
+            rightG
+                .append('text')
+                .attr('x', 0)
+                .attr('y', labelY)
+                .attr('text-anchor', 'start')
+                .style('font-size', '12px')
+                .style('fill', 'var(--clr-color-neutral-600, #666)')
+                .text(`-${this.round(d.deltaPercentage)}% (${d.delta})`);
+        });
+    }
+    renderLeftSideText(dataPoints, barHeight) {
+        const leftG = this.svg.append('g');
+        const ICON_SPACE = 20;
+        const positions = [];
+        dataPoints.forEach(d => {
+            const labelY = (d.y + barHeight + d.y) / 2 + 4;
+            const iconSpacing = d.description ? ICON_SPACE : 0;
+            const textLength = leftG
+                .append('text')
+                .attr('x', this.textSize() - iconSpacing)
+                .attr('y', labelY - 8)
+                .attr('text-anchor', 'end')
+                .style('font-size', '13px')
+                .style('font-weight', '600')
+                .style('fill', 'var(--clr-color-neutral-900, #21333b)')
+                .style('cursor', 'pointer')
+                .text(d.label)
+                .on('click', () => this.valueClicked.emit({ value: d.value, label: d.label, key: d.key }))
+                .node()
+                .getComputedTextLength();
+            if (d.description) {
+                positions.push({
+                    x: this.textSize() - iconSpacing + 5,
+                    y: labelY - 24,
+                    key: d.key,
+                    description: d.description,
+                });
+            }
+            leftG
+                .append('line')
+                .attr('x1', this.textSize() - textLength - iconSpacing)
+                .attr('y1', labelY - 5)
+                .attr('x2', this.textSize() - iconSpacing)
+                .attr('y2', labelY - 5)
+                .attr('stroke', 'var(--clr-color-neutral-600, #666)')
+                .attr('stroke-width', 2)
+                .attr('stroke-dasharray', '2,2');
+            leftG
+                .append('text')
+                .attr('x', this.textSize())
+                .attr('y', labelY + 10)
+                .attr('text-anchor', 'end')
+                .style('font-size', '12px')
+                .style('fill', 'var(--clr-color-neutral-600, #666)')
+                .text(`${this.round(d.percentage)}% (${d.value})`);
+        });
+        this.sectionTooltips.set(positions);
+    }
+    renderSideLines(dataPoints, containerWidth, funnelWidth, barHeight) {
+        const lineG = this.svg.append('g').attr('transform', `translate(${(containerWidth - funnelWidth) / 2},0)`);
+        dataPoints.forEach(d => {
+            const midY = d.y + barHeight / 2;
+            lineG
+                .append('line')
+                .attr('x1', 0)
+                .attr('y1', midY)
+                .attr('x2', funnelWidth)
+                .attr('y2', midY)
+                .attr('stroke', '#D9D9D9')
+                .attr('stroke-width', 1);
+            this.renderSideLine(lineG, funnelWidth, d.y, barHeight);
+            if (d.value === 0) {
+                this.renderSideLine(lineG, 0, d.y, barHeight);
+            }
+        });
+    }
+    renderSideLine(g, x, y, barHeight) {
+        g.append('line')
+            .attr('x1', x)
+            .attr('y1', y + this.sideLineVerticalPadding())
+            .attr('x2', x)
+            .attr('y2', y + barHeight - this.sideLineVerticalPadding())
+            .attr('stroke', '#D9D9D9')
+            .attr('stroke-width', 1);
+    }
+    renderFunnel(dataPoints, containerWidth, containerHeight, funnelWidth, barHeight) {
+        const funnelG = this.svg
+            .attr('width', containerWidth)
+            .attr('height', containerHeight)
+            .append('g')
+            .attr('transform', `translate(${(containerWidth - funnelWidth) / 2},0)`);
+        // First pass: all rects (z-order: rects below texts)
+        dataPoints.forEach(dp => {
+            dp.sections.forEach(section => {
+                funnelG
+                    .append('rect')
+                    .attr('x', section.x)
+                    .attr('y', dp.y)
+                    .attr('width', section.width)
+                    .attr('height', barHeight)
+                    .style('fill', section.cssColor)
+                    .style('cursor', 'pointer')
+                    .on('mouseover', e => {
+                    select(e.currentTarget).style('fill', section.hoverColor);
+                })
+                    .on('mouseout', e => {
+                    select(e.currentTarget).style('fill', section.cssColor);
+                })
+                    .on('click', (event) => {
+                    this.handleSectionClick(event, dp, section.key);
+                });
+            });
+        });
+        // Second pass: texts on top
+        dataPoints.forEach(dp => {
+            dp.sections.forEach(section => {
+                if (section.width > 40) {
+                    funnelG
+                        .append('text')
+                        .attr('x', section.x + section.width / 2)
+                        .attr('y', dp.y + barHeight / 2)
+                        .attr('text-anchor', 'middle')
+                        .attr('dominant-baseline', 'middle')
+                        .style('font-size', '13px')
+                        .style('font-weight', '600')
+                        .style('pointer-events', 'none')
+                        .style('fill', section.textColor)
+                        .text(`${section.percentage}%`);
+                }
+            });
+        });
+    }
+    // ── Event handlers ────────────────────────────────────────────────────────────
+    handleSectionClick(event, d, _sectionKey) {
+        event.stopPropagation();
+        const target = event.currentTarget;
+        const rect = target.getBoundingClientRect();
+        const container = this.chartRef().nativeElement.getBoundingClientRect();
+        this.tooltipPosition.set({
+            x: rect.left - container.left + rect.width / 2,
+            y: rect.bottom - container.top,
+        });
+        this.selectedItem.set(d);
+    }
+    resetTooltip() {
+        if (this.selectedItem() || this.selectedSpacerItem() || this.tooltipPosition()) {
+            this.selectedItem.set(undefined);
+            this.selectedSpacerItem.set(undefined);
+            this.tooltipPosition.set(undefined);
+        }
+    }
+    /** Formats a percentage to 2 decimal places for template use. */
+    pct(value, total) {
+        return this.round(total ? (value / total) * 100 : 0);
+    }
+    // ── Centered chart ────────────────────────────────────────────────────────────
+    renderCenteredChart(containerWidth, containerHeight) {
+        const maxFunnelWidth = this.getMaxFunnelWidth(containerWidth);
+        const barHeight = this.getCenteredBarHeight(containerHeight);
+        const spacerHeight = this.getCenteredSpacerHeight(containerHeight);
+        const dataPoints = this.calculateCenteredDataPoints(maxFunnelWidth, barHeight, spacerHeight);
+        const spacerPoints = this.calculateSpacerDataPoints(dataPoints, maxFunnelWidth, barHeight);
+        this.renderCenteredLeftSideText(dataPoints, barHeight);
+        this.renderCenteredLeftSideLines(dataPoints, maxFunnelWidth, barHeight);
+        this.renderCenteredRightSideText(dataPoints, containerWidth, barHeight);
+        this.renderCenteredRightSideLines(dataPoints, containerWidth, maxFunnelWidth, barHeight);
+        this.renderCenteredMiddleLines(dataPoints, spacerPoints, containerWidth, barHeight);
+        this.renderCenteredFunnel(dataPoints, spacerPoints, containerWidth, containerHeight, maxFunnelWidth, barHeight, spacerHeight);
+    }
+    calculateCenteredDataPoints(maxFunnelWidth, barHeight, spacerHeight) {
+        const total = this.data()[0]?.value ?? 1;
+        const maxValue = max(this.data(), d => d.value) ?? 1;
+        const scale = scaleLinear().domain([0, maxValue]).range([0, maxFunnelWidth]);
+        return this.data().map((d, i) => {
+            const point = {
+                ...d,
+                y: i * (barHeight + spacerHeight),
+                width: scale(d.value),
+                percentage: total ? this.round((d.value / total) * 100) : 0,
+            };
+            if (i > 0) {
+                const prev = this.data()[i - 1].value;
+                point.delta = prev - d.value;
+                point.deltaPercentage = prev === 0 ? 0 : this.round((point.delta / prev) * 100);
+            }
+            return point;
+        });
+    }
+    calculateSpacerDataPoints(dataPoints, maxFunnelWidth, barHeight) {
+        const spacers = [];
+        for (let i = 0; i < dataPoints.length - 1; i++) {
+            const cur = dataPoints[i];
+            const next = dataPoints[i + 1];
+            spacers.push({
+                index: i,
+                topWidth: cur.width,
+                bottomWidth: next.width,
+                topY: cur.y + barHeight,
+                bottomY: next.y,
+                topX: (maxFunnelWidth - cur.width) / 2,
+                bottomX: (maxFunnelWidth - next.width) / 2,
+                deltaPercentage: next.deltaPercentage ?? 0,
+            });
+        }
+        return spacers;
+    }
+    renderCenteredLeftSideText(dataPoints, barHeight) {
+        const g = this.svg.append('g').attr('transform', `translate(${this.textSize()},0)`);
+        const ICON_SPACE = 20;
+        const positions = [];
+        dataPoints.forEach(d => {
+            const cy = d.y + barHeight / 2;
+            const iconSpacing = d.description ? ICON_SPACE : 0;
+            const textLen = g
+                .append('text')
+                .attr('x', -iconSpacing)
+                .attr('y', cy - 8)
+                .attr('text-anchor', 'end')
+                .style('font-size', '13px')
+                .style('font-weight', '600')
+                .style('fill', 'var(--clr-color-neutral-900, #21333b)')
+                .style('cursor', 'pointer')
+                .text(d.label)
+                .on('click', () => this.valueClicked.emit({ value: d.value, label: d.label, key: d.key }))
+                .node()
+                .getComputedTextLength();
+            if (d.description) {
+                positions.push({ key: d.key, x: this.textSize() - iconSpacing + 5, y: cy - 24, description: d.description });
+            }
+            g.append('line')
+                .attr('x1', -textLen - iconSpacing)
+                .attr('y1', cy - 5)
+                .attr('x2', -iconSpacing)
+                .attr('y2', cy - 5)
+                .attr('stroke', 'var(--clr-color-neutral-600, #666)')
+                .attr('stroke-width', 2)
+                .attr('stroke-dasharray', '2,2');
+            g.append('text')
+                .attr('x', 0)
+                .attr('y', cy + 10)
+                .attr('text-anchor', 'end')
+                .style('font-size', '12px')
+                .style('fill', 'var(--clr-color-neutral-600, #666)')
+                .text(`${this.round(d.percentage)}% (${d.value})`);
+        });
+        this.sectionTooltips.set(positions);
+    }
+    renderCenteredLeftSideLines(dataPoints, maxFunnelWidth, barHeight) {
+        const g = this.svg.append('g').attr('transform', `translate(${this.textSize() + this.lineTextPadding()},0)`);
+        dataPoints.forEach(d => {
+            g.append('line')
+                .attr('x1', 0)
+                .attr('y1', d.y + barHeight / 2)
+                .attr('x2', maxFunnelWidth / 2 + this.minLineSize())
+                .attr('y2', d.y + barHeight / 2)
+                .attr('stroke', '#D9D9D9')
+                .attr('stroke-width', 1);
+        });
+    }
+    renderCenteredRightSideText(dataPoints, containerWidth, barHeight) {
+        const g = this.svg.append('g').attr('transform', `translate(${containerWidth - this.textSize()},0)`);
+        dataPoints.forEach((d, i) => {
+            if (i === 0) {
+                return;
+            }
+            const prev = dataPoints[i - 1];
+            const cy = (prev.y + barHeight + d.y) / 2 + 4;
+            g.append('text')
+                .attr('x', 0)
+                .attr('y', cy)
+                .attr('text-anchor', 'start')
+                .style('font-size', '12px')
+                .style('fill', 'var(--clr-color-neutral-600, #666)')
+                .text(`-${this.round(d.deltaPercentage)}% (${d.delta})`);
+        });
+    }
+    renderCenteredRightSideLines(dataPoints, containerWidth, maxFunnelWidth, barHeight) {
+        const g = this.svg.append('g').attr('transform', `translate(${containerWidth / 2},0)`);
+        dataPoints.forEach((d, i) => {
+            if (i === 0) {
+                return;
+            }
+            const prev = dataPoints[i - 1];
+            const cy = (prev.y + barHeight + d.y) / 2;
+            g.append('line')
+                .attr('x1', 0)
+                .attr('y1', cy)
+                .attr('x2', maxFunnelWidth / 2 + this.minLineSize())
+                .attr('y2', cy)
+                .attr('stroke', '#D9D9D9')
+                .attr('stroke-width', 1);
+        });
+    }
+    renderCenteredMiddleLines(dataPoints, spacerPoints, containerWidth, barHeight) {
+        const vPad = this.middleLineVerticalPadding();
+        const g = this.svg.append('g').attr('transform', `translate(${containerWidth / 2},0)`);
+        g.selectAll('.bar-mid')
+            .data(dataPoints)
+            .enter()
+            .append('line')
+            .attr('x1', 0)
+            .attr('y1', d => d.y + vPad)
+            .attr('x2', 0)
+            .attr('y2', d => d.y + barHeight - vPad)
+            .attr('stroke', '#D9D9D9')
+            .attr('stroke-width', 1);
+        g.selectAll('.spacer-mid')
+            .data(spacerPoints)
+            .enter()
+            .append('line')
+            .attr('x1', 0)
+            .attr('y1', d => d.topY + vPad)
+            .attr('x2', 0)
+            .attr('y2', d => d.bottomY - vPad)
+            .attr('stroke', '#D9D9D9')
+            .attr('stroke-width', 1);
+    }
+    renderCenteredFunnel(dataPoints, spacerPoints, containerWidth, containerHeight, maxFunnelWidth, barHeight, spacerHeight) {
+        const g = this.svg
+            .attr('width', containerWidth)
+            .attr('height', containerHeight)
+            .append('g')
+            .attr('transform', `translate(${(containerWidth - maxFunnelWidth) / 2},0)`);
+        // ── Bars ──────────────────────────────────────────────────────────────────
+        const rawBarColor = this.barColor();
+        const cssBarColor = toChartColor(rawBarColor);
+        const hoverBarColor = rawBarColor.startsWith('--')
+            ? cssBarColor
+            : color(rawBarColor)?.darker(0.5)?.formatHex() ?? cssBarColor;
+        const bars = g
+            .selectAll('.c-bar')
+            .data(dataPoints)
+            .enter()
+            .append('g')
+            .attr('class', 'c-bar');
+        bars
+            .append('rect')
+            .attr('x', d => (maxFunnelWidth - d.width) / 2)
+            .attr('y', d => d.y)
+            .attr('width', d => d.width)
+            .attr('height', barHeight)
+            .style('fill', cssBarColor)
+            .style('cursor', 'pointer')
+            .on('mouseover', e => {
+            select(e.currentTarget).style('fill', hoverBarColor);
+        })
+            .on('mouseout', e => {
+            select(e.currentTarget).style('fill', cssBarColor);
+        })
+            .on('click', (event, d) => {
+            event.stopPropagation();
+            const rect = event.currentTarget.getBoundingClientRect();
+            const cont = this.chartRef().nativeElement.getBoundingClientRect();
+            this.tooltipPosition.set({ x: rect.left - cont.left + rect.width / 2, y: rect.top - cont.top });
+            this.selectedSpacerItem.set(undefined);
+            this.selectedItem.set(d);
+        });
+        bars
+            .selectAll('.c-bar-label')
+            .data(dataPoints.filter(d => d.width > 40))
+            .enter()
+            .append('text')
+            .attr('x', maxFunnelWidth / 2)
+            .attr('y', d => d.y + barHeight / 2)
+            .attr('text-anchor', 'middle')
+            .attr('dominant-baseline', 'middle')
+            .style('font-size', '13px')
+            .style('font-weight', '600')
+            .style('pointer-events', 'none')
+            .style('fill', '#eee')
+            .text(d => `${this.round(d.percentage)}%`);
+        // ── Spacers ───────────────────────────────────────────────────────────────
+        const rawSpacerColor = this.spacerColor();
+        const cssSpacerColor = toChartColor(rawSpacerColor);
+        const hoverSpacerColor = rawSpacerColor.startsWith('--')
+            ? cssSpacerColor
+            : color(rawSpacerColor)?.darker(0.2)?.formatHex() ?? cssSpacerColor;
+        g.selectAll('.c-spacer')
+            .data(spacerPoints)
+            .enter()
+            .append('polygon')
+            .attr('class', 'c-spacer')
+            .attr('points', d => `${d.topX},${d.topY} ${d.topX + d.topWidth},${d.topY} ${d.bottomX + d.bottomWidth},${d.bottomY} ${d.bottomX},${d.bottomY}`)
+            .style('fill', cssSpacerColor)
+            .style('cursor', 'pointer')
+            .on('mouseover', e => {
+            select(e.currentTarget).style('fill', hoverSpacerColor);
+        })
+            .on('mouseout', e => {
+            select(e.currentTarget).style('fill', cssSpacerColor);
+        })
+            .on('click', (event, d) => {
+            event.stopPropagation();
+            const rect = event.currentTarget.getBoundingClientRect();
+            const cont = this.chartRef().nativeElement.getBoundingClientRect();
+            this.tooltipPosition.set({ x: rect.left - cont.left + rect.width / 2, y: rect.top - cont.top });
+            this.selectedItem.set(undefined);
+            this.selectedSpacerItem.set(d);
+        });
+        g.selectAll('.c-spacer-label')
+            .data(spacerPoints.filter(d => d.bottomWidth > 40))
+            .enter()
+            .append('text')
+            .attr('x', maxFunnelWidth / 2)
+            .attr('y', d => d.topY + spacerHeight / 2)
+            .attr('text-anchor', 'middle')
+            .attr('dominant-baseline', 'middle')
+            .style('font-size', '13px')
+            .style('font-weight', '600')
+            .style('pointer-events', 'none')
+            .style('fill', '#333')
+            .text(d => `-${this.round(d.deltaPercentage)}%`);
+    }
+    // ── Helpers ───────────────────────────────────────────────────────────────────
+    getMaxFunnelWidth(containerWidth) {
+        return containerWidth - this.textSize() * 2 - this.minLineSize() * 2 - this.lineTextPadding() * 2;
+    }
+    getCenteredFractionHeight(containerHeight) {
+        return containerHeight / (this.data().length * (this.barToSpacerRatio() + 1) - 1);
+    }
+    getCenteredBarHeight(containerHeight) {
+        return this.getCenteredFractionHeight(containerHeight) * this.barToSpacerRatio();
+    }
+    getCenteredSpacerHeight(containerHeight) {
+        return this.getCenteredFractionHeight(containerHeight);
+    }
+    getFunnelWidth(containerWidth) {
+        return containerWidth - this.textSize() * 2 - this.lineTextPadding() * 2;
+    }
+    getBarHeight(containerHeight) {
+        const n = this.data().length;
+        if (n === 0) {
+            return 0;
+        }
+        return (containerHeight - (n - 1) * this.barGap()) / n;
+    }
+    round(value, decimals = 2) {
+        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 }, 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 class=\"funnel-export-btn\" [svgRef]=\"svgElement()\" [filename]=\"exportFilename()\" />\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$1.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: i1$1.ClrSignpost, selector: "clr-signpost", inputs: ["clrSignpostTriggerAriaLabel"] }, { kind: "component", type: i1$1.ClrSignpostContent, selector: "clr-signpost-content", inputs: ["clrSignpostCloseAriaLabel", "clrPosition"] }, { kind: "directive", type: i1$1.ClrSignpostTrigger, selector: "[clrSignpostTrigger]" }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename"] }, { 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: [{
+            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 class=\"funnel-export-btn\" [svgRef]=\"svgElement()\" [filename]=\"exportFilename()\" />\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"] }]
+        }] });
+
+const PREFERRED_ORDER = ['top-right', 'top-left', 'bottom-right', 'bottom-left'];
+class AutoPositionDirective {
+    constructor() {
+        this.signpostContent = inject(ClrSignpostContent, { optional: true });
+        this.elementRef = inject(ElementRef);
+        this.handleMouseDown = () => {
+            // Only calculate when signpost is closed (about to open)
+            if (this.elementRef.nativeElement.classList.contains('is-off-screen')) {
+                this.updatePosition();
+            }
+        };
+    }
+    ngOnInit() {
+        const signpost = this.elementRef.nativeElement.closest('clr-signpost');
+        this.trigger = signpost?.querySelector('[clrSignpostTrigger]');
+        if (this.trigger) {
+            this.trigger.addEventListener('mousedown', this.handleMouseDown);
+        }
+        this.resizeObserver = new ResizeObserver(() => {
+            if (!this.elementRef.nativeElement.classList.contains('is-off-screen')) {
+                this.updatePosition();
+            }
+        });
+        this.resizeObserver.observe(document.body);
+    }
+    updatePosition() {
+        if (!this.signpostContent || !this.trigger) {
+            return;
+        }
+        const triggerRect = this.trigger.getBoundingClientRect();
+        this.signpostContent.position = this.getBestPosition(triggerRect);
+    }
+    getBestPosition(triggerRect) {
+        const contentWidth = 300;
+        const contentHeight = 200;
+        const buffer = 50;
+        const contentHeaderHeight = document.querySelector('.content-header')?.getBoundingClientRect().height ?? 0;
+        const appHeaderHight = document.querySelector('.header')?.getBoundingClientRect().height ?? 0;
+        const headerHeight = contentHeaderHeight + appHeaderHight;
+        // Find first position with enough space
+        for (const pos of PREFERRED_ORDER) {
+            if (this.hasSpace(triggerRect, pos, contentWidth, contentHeight, headerHeight, buffer)) {
+                return pos;
+            }
+        }
+        return PREFERRED_ORDER[0]; // Fallback to first preference
+    }
+    hasSpace(rect, position, width, height, headerHeight, buffer) {
+        const [vertical, horizontal] = position.split('-');
+        const verticalSpace = vertical === 'top'
+            ? rect.top - headerHeight - height - buffer
+            : window.innerHeight - rect.bottom - height - buffer;
+        const horizontalSpace = horizontal === 'left' ? rect.left - width - buffer : window.innerWidth - rect.right - width - buffer;
+        return Math.min(verticalSpace, horizontalSpace) > 0;
+    }
+    ngOnDestroy() {
+        if (this.trigger) {
+            this.trigger.removeEventListener('mousedown', this.handleMouseDown);
+        }
+        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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AutoPositionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'clr-signpost-content[autoPosition]',
+                    standalone: true,
+                }]
+        }] });
+
+class TenantFullDateRangeDirective {
+    constructor() {
+        this.start = contentChild(ClrStartDateInput);
+        this.end = contentChild(ClrEndDateInput);
+    }
+    ngAfterContentInit() {
+        if (this.start()) {
+            const originalStartEmit = this.start().dateChange.emit.bind(this.start().dateChange);
+            this.start().dateChange.emit = date => {
+                originalStartEmit(this.toTenantDateTime(date, '00:00'));
+            };
+        }
+        if (this.end()) {
+            const originalEndEmit = this.end().dateChange.emit.bind(this.end().dateChange);
+            this.end().dateChange.emit = date => {
+                originalEndEmit(this.toTenantDateTime(date, '23:59'));
+            };
+        }
+    }
+    toTenantDateTime(date, time) {
+        if (!date) {
+            return date;
+        }
+        const [hours, minutes] = time.split(':').map(Number);
+        const result = new Date(date);
+        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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TenantFullDateRangeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'clr-date-range-container[cngTenantFullDateRange]',
+                    standalone: true,
+                }]
+        }] });
+
+/*
+ * Copyright (c) 2026 Porsche Informatik. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+const CLR_CHARTS_DECLARATIONS = [
+    AreaChartComponent,
+    BarChartComponent,
+    ComboChartComponent,
+    FunnelChartComponent,
+    LineChartComponent,
+    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,
+            BarChartComponent,
+            ComboChartComponent,
+            FunnelChartComponent,
+            LineChartComponent,
+            PieChartComponent], imports: [CommonModule,
+            DecimalPipe,
+            ClrAlertModule,
+            ClrIconModule,
+            ClrSignpostModule,
+            // standalone helpers consumed by the non-standalone chart components
+            ChartAlertOverlayComponent,
+            ChartExportButtonComponent,
+            ChartLegendComponent,
+            ChartSkeletonComponent,
+            ChartTooltipComponent,
+            OutsideClickDirective,
+            WindowResizeDirective], exports: [AreaChartComponent,
+            BarChartComponent,
+            ComboChartComponent,
+            FunnelChartComponent,
+            LineChartComponent,
+            PieChartComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ClrChartsModule, imports: [CommonModule,
+            ClrAlertModule,
+            ClrIconModule,
+            ClrSignpostModule,
+            // standalone helpers consumed by the non-standalone chart components
+            ChartAlertOverlayComponent,
+            ChartExportButtonComponent,
+            ChartSkeletonComponent,
+            ChartTooltipComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ClrChartsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        DecimalPipe,
+                        ClrAlertModule,
+                        ClrIconModule,
+                        ClrSignpostModule,
+                        // standalone helpers consumed by the non-standalone chart components
+                        ChartAlertOverlayComponent,
+                        ChartExportButtonComponent,
+                        ChartLegendComponent,
+                        ChartSkeletonComponent,
+                        ChartTooltipComponent,
+                        OutsideClickDirective,
+                        WindowResizeDirective,
+                    ],
+                    declarations: [...CLR_CHARTS_DECLARATIONS],
+                    exports: [...CLR_CHARTS_DECLARATIONS],
+                }]
+        }] });
+
+/*
+ * Copyright (c) 2026 Porsche Informatik. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+/*
+ * Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class ClrAddonsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ClrAddonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: ClrAddonsModule, imports: [ClrFocusFirstInvalidFieldDirective, ClrControlEnterSubmitDirective], exports: [ClrViewEditSectionModule,
+            ClrPagerModule,
+            ClrDotPagerModule,
+            ClrPagedSearchResultListModule,
+            ClrCollapseExpandSectionModule,
+            ClrBreadcrumbModule,
+            ClrMainNavGroupModule,
+            ClrContentPanelModule,
+            ClrNotificationModule,
+            ClrFlowBarModule,
+            ClrBackButtonModule,
+            ClrNumericFieldModule,
+            ClrSearchFieldModule,
+            ClrTreetableModule,
+            ClrProgressSpinnerModule,
+            ClrDateTimeModule,
+            ClrQuickListModule,
+            ClrIconAvatarModule,
+            ClrLetterAvatarModule,
+            ClrMultilingualModule,
+            ClrGenericQuickListModule,
+            ClrDataListValidatorModule,
+            ClrHistoryModule,
+            ClrAutocompleteOffModule,
+            ClrBrandAvatarModule,
+            ClrLocationBarModule,
+            ClrFormModule,
+            ClrDropdownOverflowModule,
+            ClrDatagridStatePersistenceModule,
+            ClrEnumFilterModule,
+            ClrDateFilterModule,
+            ClrDaterangepickerModule,
+            ClrIfWarningModule,
+            ClrActionPanelModule,
+            ClrReadonlyDirectiveModule,
+            ClrDatagridColumnReorderModule,
+            ClrSignpostAddonModule,
+            ClrFocusFirstInvalidFieldDirective,
+            ClrControlEnterSubmitDirective,
+            ClrChartsModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ClrAddonsModule, imports: [ClrViewEditSectionModule,
+            ClrPagerModule,
+            ClrDotPagerModule,
+            ClrPagedSearchResultListModule,
+            ClrCollapseExpandSectionModule,
+            ClrBreadcrumbModule,
+            ClrMainNavGroupModule,
+            ClrContentPanelModule,
+            ClrNotificationModule,
+            ClrFlowBarModule,
+            ClrBackButtonModule,
+            ClrNumericFieldModule,
+            ClrSearchFieldModule,
+            ClrTreetableModule,
+            ClrProgressSpinnerModule,
+            ClrDateTimeModule,
+            ClrQuickListModule,
+            ClrIconAvatarModule,
+            ClrLetterAvatarModule,
+            ClrMultilingualModule,
+            ClrGenericQuickListModule,
+            ClrDataListValidatorModule,
+            ClrHistoryModule,
+            ClrAutocompleteOffModule,
+            ClrBrandAvatarModule,
+            ClrLocationBarModule,
+            ClrFormModule,
+            ClrDropdownOverflowModule,
+            ClrDatagridStatePersistenceModule,
+            ClrEnumFilterModule,
+            ClrDateFilterModule,
+            ClrDaterangepickerModule,
+            ClrIfWarningModule,
+            ClrActionPanelModule,
+            ClrReadonlyDirectiveModule,
+            ClrDatagridColumnReorderModule,
+            ClrSignpostAddonModule,
+            ClrChartsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ClrAddonsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [ClrFocusFirstInvalidFieldDirective, ClrControlEnterSubmitDirective],
+                    declarations: [],
+                    exports: [
+                        ClrViewEditSectionModule,
+                        ClrPagerModule,
+                        ClrDotPagerModule,
+                        ClrPagedSearchResultListModule,
+                        ClrCollapseExpandSectionModule,
+                        ClrBreadcrumbModule,
+                        ClrMainNavGroupModule,
+                        ClrContentPanelModule,
+                        ClrNotificationModule,
+                        ClrFlowBarModule,
+                        ClrBackButtonModule,
+                        ClrNumericFieldModule,
+                        ClrSearchFieldModule,
+                        ClrTreetableModule,
+                        ClrProgressSpinnerModule,
+                        ClrDateTimeModule,
+                        ClrQuickListModule,
+                        ClrIconAvatarModule,
+                        ClrLetterAvatarModule,
+                        ClrMultilingualModule,
+                        ClrGenericQuickListModule,
+                        ClrDataListValidatorModule,
+                        ClrHistoryModule,
+                        ClrAutocompleteOffModule,
+                        ClrBrandAvatarModule,
+                        ClrLocationBarModule,
+                        ClrFormModule,
+                        ClrDropdownOverflowModule,
+                        ClrDatagridStatePersistenceModule,
+                        ClrEnumFilterModule,
+                        ClrDateFilterModule,
+                        ClrDaterangepickerModule,
+                        ClrIfWarningModule,
+                        ClrActionPanelModule,
+                        ClrReadonlyDirectiveModule,
+                        ClrDatagridColumnReorderModule,
+                        ClrSignpostAddonModule,
+                        ClrFocusFirstInvalidFieldDirective,
+                        ClrControlEnterSubmitDirective,
+                        ClrChartsModule,
+                    ],
+                }]
+        }] });
+
+/*
+ * Copyright (c) 2018-2024 Porsche Informatik. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+var ExportTypeEnum;
+(function (ExportTypeEnum) {
+    ExportTypeEnum["ALL"] = "ALL";
+    ExportTypeEnum["FILTERED"] = "FILTERED";
+    ExportTypeEnum["SELECTED"] = "SELECTED";
+})(ExportTypeEnum || (ExportTypeEnum = {}));
+
+class ExportDatagridService {
+    constructor() {
+        this.init();
+    }
+    async init() {
+        try {
+            this.zipcelx = await import('zipcelx');
+        }
+        catch (error) {
+            console.warn('Optional feature requires `zipcelx`. Please install it: npm install zipcelx', error);
+        }
+    }
+    exportToExcel(filename, headers, rows) {
+        const config = {
+            filename,
+            sheet: {
+                data: [headers, ...rows],
+            },
+        };
+        this.zipcelx.default(config);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ExportDatagridService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ExportDatagridService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ExportDatagridService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class ExportDatagridButtonComponent {
+    constructor(exportService) {
+        this.exportService = exportService;
+        /* input signals */
+        this.datagrid = input();
+        this.datagridRef = input();
+        this.exportTypesToShow = input();
+        this.isBackendExport = input(false);
+        this.exportTitlePrefix = input('export-datagrid');
+        this.exportButtonPosition = input('right');
+        this.possibleExportTypes = signal([ExportTypeEnum.ALL]);
+        this.exportButtonText = input('EXPORT');
+        this.destroy$ = new Subject();
+        /* outputs */
+        this.backendExport = new EventEmitter();
+        this.exportTypes = [
+            { type: ExportTypeEnum.ALL, value: 'All entries' },
+            { type: ExportTypeEnum.FILTERED, value: 'Filtered entries' },
+            { type: ExportTypeEnum.SELECTED, value: 'Selected entries' },
+        ];
+        this.exportTypesFiltered = computed(() => {
+            let exportTypesToShowVal = this.exportTypesToShow();
+            if (!exportTypesToShowVal || exportTypesToShowVal.length === 0) {
+                exportTypesToShowVal = this.exportTypes;
+            }
+            return exportTypesToShowVal
+                .filter(showType => this.possibleExportTypes().some(et => et === showType.type))
+                .map(showType => {
+                const defaultType = this.exportTypes.find(et => et.type === showType.type);
+                return {
+                    type: showType.type,
+                    value: showType.value != null ? showType.value : defaultType?.value,
+                };
+            });
+        });
+        effect(() => {
+            const datagrid = this.datagrid();
+            if (!datagrid) {
+                return undefined;
+            }
+            this.destroy$.next();
+            datagrid.refresh.pipe(delay(0), takeUntil(this.destroy$)).subscribe(dgState => {
+                const hasFilter = dgState.filters && dgState.filters.length > 0;
+                this.updateExportType(ExportTypeEnum.FILTERED, hasFilter, this.exportTypesToShow() || this.exportTypes);
+            });
+            datagrid.selectedChanged.pipe(takeUntil(this.destroy$)).subscribe(() => {
+                const hasSelection = datagrid.selection.current.length > 0;
+                this.updateExportType(ExportTypeEnum.SELECTED, hasSelection, this.exportTypesToShow() || this.exportTypes);
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    exportExcel(type) {
+        if (!this.datagrid() || !this.datagridRef()) {
+            return;
+        }
+        // Filter visible columns once
+        const visibleColumns = this.datagrid().columns.filter(col => !col.isHidden);
+        // Get header titles for visible columns only
         const headerRow = this.getColumnsTitle().map(title => ({
             value: title,
             type: 'string',
@@ -15922,6 +18405,131 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 }]
         }] });
 
+/*
+ * Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+ClarityIcons.addIcons(copyToClipboardIcon, successStandardIcon);
+class ClrCopyToClipboard {
+    constructor() {
+        this.value = input.required();
+        this.tooltipText = input('Copy to clipboard');
+        this.hiddenUntilHovered = input(false);
+        this.showCopiedIcon = false;
+        this.parentHovered = false;
+        this.tooltipSize = 'md';
+        this.tooltipPosition = 'bottom-right';
+        this.cdr = inject(ChangeDetectorRef);
+        this.elementRef = inject(ElementRef);
+        this.resetTimeout = null;
+    }
+    ngOnInit() {
+        const newSize = this.tooltipText && this.tooltipText().length < 15 ? 'sm' : 'md';
+        if (this.tooltipSize !== newSize) {
+            this.tooltipSize = newSize;
+            this.cdr.markForCheck();
+        }
+        this.updateTooltipPosition();
+    }
+    ngAfterViewInit() {
+        this.updateTooltipPosition();
+        this.resizeListener = () => this.updateTooltipPosition();
+        window.addEventListener('resize', this.resizeListener);
+        if (this.hiddenUntilHovered()) {
+            this.setupParentHoverListeners();
+        }
+    }
+    ngOnDestroy() {
+        if (this.resetTimeout) {
+            clearTimeout(this.resetTimeout);
+            this.resetTimeout = null;
+        }
+        if (this.resizeListener) {
+            window.removeEventListener('resize', this.resizeListener);
+        }
+        this.teardownParentHoverListeners();
+    }
+    /**
+     * Called when the clipboard copy operation completes.
+     * @param success Whether the copy was successful
+     */
+    onCopied(success) {
+        if (!success) {
+            return;
+        }
+        if (this.resetTimeout) {
+            clearTimeout(this.resetTimeout);
+        }
+        this.showCopiedIcon = true;
+        this.cdr.markForCheck();
+        this.resetTimeout = setTimeout(() => {
+            this.showCopiedIcon = false;
+            this.resetTimeout = null;
+            this.cdr.markForCheck();
+        }, 1000);
+    }
+    setupParentHoverListeners() {
+        const parent = this.elementRef.nativeElement.parentElement;
+        if (!parent) {
+            return;
+        }
+        this.parentEnterListener = () => {
+            this.parentHovered = true;
+            this.cdr.markForCheck();
+        };
+        this.parentLeaveListener = () => {
+            this.parentHovered = false;
+            this.cdr.markForCheck();
+        };
+        parent.addEventListener('mouseenter', this.parentEnterListener);
+        parent.addEventListener('mouseleave', this.parentLeaveListener);
+    }
+    teardownParentHoverListeners() {
+        const parent = this.elementRef.nativeElement.parentElement;
+        if (!parent) {
+            return;
+        }
+        if (this.parentEnterListener) {
+            parent.removeEventListener('mouseenter', this.parentEnterListener);
+        }
+        if (this.parentLeaveListener) {
+            parent.removeEventListener('mouseleave', this.parentLeaveListener);
+        }
+    }
+    updateTooltipPosition() {
+        // Use double requestAnimationFrame to ensure CSS grid layout is complete
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                const element = this.elementRef.nativeElement;
+                const rect = element.getBoundingClientRect();
+                const tooltipWidth = 200;
+                const rightSpaceAvailable = window.innerWidth - rect.right;
+                const newPosition = rightSpaceAvailable < tooltipWidth + 24 ? 'bottom-left' : 'bottom-right';
+                if (this.tooltipPosition !== newPosition) {
+                    this.tooltipPosition = newPosition;
+                    this.cdr.markForCheck();
+                }
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ClrCopyToClipboard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: ClrCopyToClipboard, isStandalone: true, selector: "clr-copy-to-clipboard", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, hiddenUntilHovered: { classPropertyName: "hiddenUntilHovered", publicName: "hiddenUntilHovered", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.hidden-until-hovered": "hiddenUntilHovered()", "class.parent-hovered": "parentHovered" } }, ngImport: i0, template: "<clr-tooltip>\n  <cds-icon\n    clrTooltipTrigger\n    class=\"copy-to-clipboard-icon\"\n    [cdkCopyToClipboard]=\"value()\"\n    (cdkCopyToClipboardCopied)=\"onCopied($event)\"\n    [attr.shape]=\"showCopiedIcon ? 'success-standard' : 'copy-to-clipboard'\"\n    [ngClass]=\"{ 'attribute-was-copied-color': showCopiedIcon }\"\n    (click)=\"$event.stopPropagation()\"\n    (keydown.enter)=\"$event.stopPropagation()\"\n  ></cds-icon>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen\n    >{{ tooltipText() }}</clr-tooltip-content\n  >\n</clr-tooltip>\n", styles: [":host,.tooltip{display:flex;align-items:center}.copy-to-clipboard-icon{cursor:pointer;color:var(--cds-alias-status-disabled-tint)!important}.copy-to-clipboard-icon:hover{color:var(--cds-alias-typography-link-color)!important}.attribute-was-copied-color{color:var(--cds-alias-status-success)!important}:host(.hidden-until-hovered){visibility:hidden;opacity:0;transition:opacity .15s ease,visibility .15s ease}:host(.hidden-until-hovered.parent-hovered),:host(.hidden-until-hovered:focus-within){visibility:visible;opacity:1}.copy-to-clipboard-parent{display:flex;flex-direction:row;align-items:center;gap:.25rem}\n"], dependencies: [{ kind: "directive", type: CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ClrIconModule }, { kind: "directive", type: i1$1.CdsIconCustomTag, selector: "cds-icon" }, { kind: "ngmodule", type: ClrTooltipModule }, { kind: "component", type: i1$1.ClrTooltip, selector: "clr-tooltip" }, { kind: "directive", type: i1$1.ClrTooltipTrigger, selector: "[clrTooltipTrigger]" }, { kind: "component", type: i1$1.ClrTooltipContent, selector: "clr-tooltip-content", inputs: ["id", "clrPosition", "clrSize"] }, { kind: "directive", type: i1$1.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ClrCopyToClipboard, decorators: [{
+            type: Component,
+            args: [{ selector: 'clr-copy-to-clipboard', imports: [CdkCopyToClipboard, NgClass, ClrIconModule, ClrTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
+                        '[class.hidden-until-hovered]': 'hiddenUntilHovered()',
+                        '[class.parent-hovered]': 'parentHovered',
+                    }, template: "<clr-tooltip>\n  <cds-icon\n    clrTooltipTrigger\n    class=\"copy-to-clipboard-icon\"\n    [cdkCopyToClipboard]=\"value()\"\n    (cdkCopyToClipboardCopied)=\"onCopied($event)\"\n    [attr.shape]=\"showCopiedIcon ? 'success-standard' : 'copy-to-clipboard'\"\n    [ngClass]=\"{ 'attribute-was-copied-color': showCopiedIcon }\"\n    (click)=\"$event.stopPropagation()\"\n    (keydown.enter)=\"$event.stopPropagation()\"\n  ></cds-icon>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen\n    >{{ tooltipText() }}</clr-tooltip-content\n  >\n</clr-tooltip>\n", styles: [":host,.tooltip{display:flex;align-items:center}.copy-to-clipboard-icon{cursor:pointer;color:var(--cds-alias-status-disabled-tint)!important}.copy-to-clipboard-icon:hover{color:var(--cds-alias-typography-link-color)!important}.attribute-was-copied-color{color:var(--cds-alias-status-success)!important}:host(.hidden-until-hovered){visibility:hidden;opacity:0;transition:opacity .15s ease,visibility .15s ease}:host(.hidden-until-hovered.parent-hovered),:host(.hidden-until-hovered:focus-within){visibility:visible;opacity:1}.copy-to-clipboard-parent{display:flex;flex-direction:row;align-items:center;gap:.25rem}\n"] }]
+        }] });
+
+/*
+ * Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
 /*
  * Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
@@ -16182,88 +18790,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 args: ['class.hidden']
             }] } });
 
-/*
- * Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-ClarityIcons.addIcons(copyToClipboardIcon, successStandardIcon);
-class ClrSummaryItemValueCopyButton {
-    constructor() {
-        this.value = input.required();
-        this.tooltipText = input('Copy to clipboard');
-        this.showCopiedIcon = false;
-        this.tooltipSize = 'md';
-        this.tooltipPosition = 'bottom-right';
-        this.cdr = inject(ChangeDetectorRef);
-        this.elementRef = inject(ElementRef);
-        this.resetTimeout = null;
-    }
-    ngOnInit() {
-        const newSize = this.tooltipText && this.tooltipText().length < 15 ? 'sm' : 'md';
-        if (this.tooltipSize !== newSize) {
-            this.tooltipSize = newSize;
-            this.cdr.markForCheck();
-        }
-        this.updateTooltipPosition();
-    }
-    ngAfterViewInit() {
-        this.updateTooltipPosition();
-        this.resizeListener = () => this.updateTooltipPosition();
-        window.addEventListener('resize', this.resizeListener);
-    }
-    ngOnDestroy() {
-        if (this.resetTimeout) {
-            clearTimeout(this.resetTimeout);
-            this.resetTimeout = null;
-        }
-        if (this.resizeListener) {
-            window.removeEventListener('resize', this.resizeListener);
-        }
-    }
-    /**
-     * Called when the clipboard copy operation completes.
-     * @param success Whether the copy was successful
-     */
-    onCopied(success) {
-        if (!success) {
-            return;
-        }
-        if (this.resetTimeout) {
-            clearTimeout(this.resetTimeout);
-        }
-        this.showCopiedIcon = true;
-        this.cdr.markForCheck();
-        this.resetTimeout = setTimeout(() => {
-            this.showCopiedIcon = false;
-            this.resetTimeout = null;
-            this.cdr.markForCheck();
-        }, 1000);
-    }
-    updateTooltipPosition() {
-        // Use double requestAnimationFrame to ensure CSS grid layout is complete
-        requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
-                const element = this.elementRef.nativeElement;
-                const rect = element.getBoundingClientRect();
-                const tooltipWidth = 200;
-                const rightSpaceAvailable = window.innerWidth - rect.right;
-                const newPosition = rightSpaceAvailable < tooltipWidth + 24 ? 'bottom-left' : 'bottom-right';
-                if (this.tooltipPosition !== newPosition) {
-                    this.tooltipPosition = newPosition;
-                    this.cdr.markForCheck();
-                }
-            });
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ClrSummaryItemValueCopyButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: ClrSummaryItemValueCopyButton, isStandalone: true, selector: "clr-summary-area-value-copy-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<clr-tooltip>\n  <cds-icon\n    clrTooltipTrigger\n    class=\"summary-item-copy-value-icon\"\n    [cdkCopyToClipboard]=\"value()\"\n    (cdkCopyToClipboardCopied)=\"onCopied($event)\"\n    [attr.shape]=\"showCopiedIcon ? 'success-standard' : 'copy-to-clipboard'\"\n    [ngClass]=\"{ 'attribute-was-copied-color': showCopiedIcon }\"\n  ></cds-icon>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen\n    >{{ tooltipText() }}</clr-tooltip-content\n  >\n</clr-tooltip>\n", styles: [":host,.tooltip{display:flex;align-items:center}.summary-item-copy-value-icon{cursor:pointer;color:var(--cds-alias-status-disabled-tint)!important}.summary-item-copy-value-icon:hover{color:var(--cds-alias-typography-link-color)!important}.attribute-was-copied-color{color:var(--cds-alias-status-success)!important}\n"], dependencies: [{ kind: "directive", type: CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ClrIconModule }, { kind: "directive", type: i1$1.CdsIconCustomTag, selector: "cds-icon" }, { kind: "ngmodule", type: ClrTooltipModule }, { kind: "component", type: i1$1.ClrTooltip, selector: "clr-tooltip" }, { kind: "directive", type: i1$1.ClrTooltipTrigger, selector: "[clrTooltipTrigger]" }, { kind: "component", type: i1$1.ClrTooltipContent, selector: "clr-tooltip-content", inputs: ["id", "clrPosition", "clrSize"] }, { kind: "directive", type: i1$1.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ClrSummaryItemValueCopyButton, decorators: [{
-            type: Component,
-            args: [{ selector: 'clr-summary-area-value-copy-button', imports: [CdkCopyToClipboard, NgClass, ClrIconModule, ClrTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<clr-tooltip>\n  <cds-icon\n    clrTooltipTrigger\n    class=\"summary-item-copy-value-icon\"\n    [cdkCopyToClipboard]=\"value()\"\n    (cdkCopyToClipboardCopied)=\"onCopied($event)\"\n    [attr.shape]=\"showCopiedIcon ? 'success-standard' : 'copy-to-clipboard'\"\n    [ngClass]=\"{ 'attribute-was-copied-color': showCopiedIcon }\"\n  ></cds-icon>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen\n    >{{ tooltipText() }}</clr-tooltip-content\n  >\n</clr-tooltip>\n", styles: [":host,.tooltip{display:flex;align-items:center}.summary-item-copy-value-icon{cursor:pointer;color:var(--cds-alias-status-disabled-tint)!important}.summary-item-copy-value-icon:hover{color:var(--cds-alias-typography-link-color)!important}.attribute-was-copied-color{color:var(--cds-alias-status-success)!important}\n"] }]
-        }] });
-
 /*
  * Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
@@ -16437,7 +18963,7 @@ class ClrSummaryItem {
                 const element = node;
                 const tagName = element.tagName?.toLowerCase();
                 // Skip our own components and internal elements
-                if (tagName === 'clr-summary-item-value' || tagName === 'clr-summary-area-value-copy-button') {
+                if (tagName === 'clr-summary-item-value' || tagName === 'clr-copy-to-clipboard') {
                     return false;
                 }
                 // Skip internal elements by class
@@ -16454,11 +18980,11 @@ class ClrSummaryItem {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ClrSummaryItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: ClrSummaryItem, isStandalone: true, selector: "clr-summary-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, warning: { classPropertyName: "warning", publicName: "warning", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, editConfig: { classPropertyName: "editConfig", publicName: "editConfig", isSignal: true, isRequired: false, transformFunction: null }, showOnEmptyValue: { classPropertyName: "showOnEmptyValue", publicName: "showOnEmptyValue", isSignal: true, isRequired: false, transformFunction: null }, valueCopyable: { classPropertyName: "valueCopyable", publicName: "valueCopyable", isSignal: true, isRequired: false, transformFunction: null }, copyButtonTooltip: { classPropertyName: "copyButtonTooltip", publicName: "copyButtonTooltip", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "valueChildren", predicate: ClrSummaryItemValue, descendants: true }], viewQueries: [{ propertyName: "template", first: true, predicate: ["itemTemplate"], descendants: true, static: true }, { propertyName: "valuesContainer", first: true, predicate: ["valuesContainer"], descendants: true }], ngImport: i0, template: "<ng-template #itemTemplate>\n  <div\n    class=\"summary-item\"\n    [class.hidden]=\"\n      !hasProjectedContent && !hasLoading && !hasError && !hasWarning && !showEditButton && !showOnEmptyValue()\n    \"\n  >\n    <span class=\"summary-item-label\">{{ label() }}:</span>\n    <div class=\"summary-item-values\" #valuesContainer>\n      @if (hasLoading) {\n      <div class=\"summary-item-loading\">\n        <span class=\"spinner spinner-inline\"></span>\n        <span>{{ loadingText }}</span>\n      </div>\n      } @else if (hasError) {\n      <clr-summary-item-value icon=\"error-standard\" class=\"error\"></clr-summary-item-value>\n      <clr-summary-item-value\n        [value]=\"errorText\"\n        [clickable]=\"true\"\n        (clicked)=\"errorClick()\"\n        class=\"error\"\n      ></clr-summary-item-value>\n      } @else if (hasWarning) {\n      <clr-summary-item-value icon=\"warning-standard\" class=\"warning\"></clr-summary-item-value>\n      <clr-summary-item-value\n        [value]=\"warningText\"\n        [clickable]=\"true\"\n        (clicked)=\"warningClick()\"\n        class=\"warning\"\n      ></clr-summary-item-value>\n      } @else {\n      <ng-content select=\"clr-summary-item-value\"></ng-content>\n      @if (showCopyButton) {\n      <clr-summary-area-value-copy-button\n        [value]=\"copyableValue\"\n        [tooltipText]=\"copyButtonTooltip()\"\n      ></clr-summary-area-value-copy-button>\n      }\n      <ng-content></ng-content>\n      @if (showEditButton) {\n      <clr-summary-item-value [value]=\"editText\" [clickable]=\"true\" (clicked)=\"editClick()\"></clr-summary-item-value>\n      } @else if (!hasProjectedContent) {\n      <span class=\"value value-placeholder\">&mdash;</span>\n      } }\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:block;min-width:0;max-width:100%;overflow:hidden}.summary-item{display:flex;flex-direction:row;align-items:center;gap:.25rem;width:100%;min-width:0}.summary-item.hidden{display:none}.summary-item-label{flex-shrink:0;white-space:nowrap;font-weight:600}.summary-item-values{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:.25rem;flex:1 1 auto;min-width:0;max-width:100%;overflow:visible}clr-summary-area-value-copy-button{flex:0 0 auto}.summary-item-loading{display:flex;align-items:center}.summary-item-loading .loading-spinner{width:20px;height:20px;flex-shrink:0}.summary-item-loading .loading-text{color:var(--cds-alias-typography-color-300);white-space:nowrap}.value{display:inline-block;flex:1 1 auto;min-width:0;overflow:visible;text-overflow:ellipsis;white-space:nowrap}.value-link,.edit-link{color:var(--cds-alias-typography-link-color);text-decoration:underline;cursor:pointer}.value-link:visited,.edit-link:visited{color:var(--cds-alias-typography-link-color-visited)}.value-link:hover,.value-link:focus,.edit-link:hover,.edit-link:focus{color:var(--cds-alias-typography-link-color-hover);text-decoration:underline}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ClarityModule }, { kind: "component", type: ClrSummaryItemValue, selector: "clr-summary-item-value", inputs: ["value", "icon", "tooltip", "clickable"], outputs: ["clicked"] }, { kind: "component", type: ClrSummaryItemValueCopyButton, selector: "clr-summary-area-value-copy-button", inputs: ["value", "tooltipText"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: ClrSummaryItem, isStandalone: true, selector: "clr-summary-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, warning: { classPropertyName: "warning", publicName: "warning", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, editConfig: { classPropertyName: "editConfig", publicName: "editConfig", isSignal: true, isRequired: false, transformFunction: null }, showOnEmptyValue: { classPropertyName: "showOnEmptyValue", publicName: "showOnEmptyValue", isSignal: true, isRequired: false, transformFunction: null }, valueCopyable: { classPropertyName: "valueCopyable", publicName: "valueCopyable", isSignal: true, isRequired: false, transformFunction: null }, copyButtonTooltip: { classPropertyName: "copyButtonTooltip", publicName: "copyButtonTooltip", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "valueChildren", predicate: ClrSummaryItemValue, descendants: true }], viewQueries: [{ propertyName: "template", first: true, predicate: ["itemTemplate"], descendants: true, static: true }, { propertyName: "valuesContainer", first: true, predicate: ["valuesContainer"], descendants: true }], ngImport: i0, template: "<ng-template #itemTemplate>\n  <div\n    class=\"summary-item\"\n    [class.hidden]=\"\n      !hasProjectedContent && !hasLoading && !hasError && !hasWarning && !showEditButton && !showOnEmptyValue()\n    \"\n  >\n    <span class=\"summary-item-label\">{{ label() }}:</span>\n    <div class=\"summary-item-values\" #valuesContainer>\n      @if (hasLoading) {\n      <div class=\"summary-item-loading\">\n        <span class=\"spinner spinner-inline\"></span>\n        <span>{{ loadingText }}</span>\n      </div>\n      } @else if (hasError) {\n      <clr-summary-item-value icon=\"error-standard\" class=\"error\"></clr-summary-item-value>\n      <clr-summary-item-value\n        [value]=\"errorText\"\n        [clickable]=\"true\"\n        (clicked)=\"errorClick()\"\n        class=\"error\"\n      ></clr-summary-item-value>\n      } @else if (hasWarning) {\n      <clr-summary-item-value icon=\"warning-standard\" class=\"warning\"></clr-summary-item-value>\n      <clr-summary-item-value\n        [value]=\"warningText\"\n        [clickable]=\"true\"\n        (clicked)=\"warningClick()\"\n        class=\"warning\"\n      ></clr-summary-item-value>\n      } @else {\n      <ng-content select=\"clr-summary-item-value\"></ng-content>\n      @if (showCopyButton) {\n      <clr-copy-to-clipboard [value]=\"copyableValue\" [tooltipText]=\"copyButtonTooltip()\"></clr-copy-to-clipboard>\n      }\n      <ng-content></ng-content>\n      @if (showEditButton) {\n      <clr-summary-item-value [value]=\"editText\" [clickable]=\"true\" (clicked)=\"editClick()\"></clr-summary-item-value>\n      } @else if (!hasProjectedContent) {\n      <span class=\"value value-placeholder\">&mdash;</span>\n      } }\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:block;min-width:0;max-width:100%;overflow:hidden}.summary-item{display:flex;flex-direction:row;align-items:center;gap:.25rem;width:100%;min-width:0}.summary-item.hidden{display:none}.summary-item-label{flex-shrink:0;white-space:nowrap;font-weight:600}.summary-item-values{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:.25rem;flex:1 1 auto;min-width:0;max-width:100%;overflow:visible}clr-copy-to-clipboard{flex:0 0 auto}.summary-item-loading{display:flex;align-items:center}.summary-item-loading .loading-spinner{width:20px;height:20px;flex-shrink:0}.summary-item-loading .loading-text{color:var(--cds-alias-typography-color-300);white-space:nowrap}.value{display:inline-block;flex:1 1 auto;min-width:0;overflow:visible;text-overflow:ellipsis;white-space:nowrap}.value-link,.edit-link{color:var(--cds-alias-typography-link-color);text-decoration:underline;cursor:pointer}.value-link:visited,.edit-link:visited{color:var(--cds-alias-typography-link-color-visited)}.value-link:hover,.value-link:focus,.edit-link:hover,.edit-link:focus{color:var(--cds-alias-typography-link-color-hover);text-decoration:underline}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ClarityModule }, { kind: "component", type: ClrSummaryItemValue, selector: "clr-summary-item-value", inputs: ["value", "icon", "tooltip", "clickable"], outputs: ["clicked"] }, { kind: "component", type: ClrCopyToClipboard, selector: "clr-copy-to-clipboard", inputs: ["value", "tooltipText", "hiddenUntilHovered"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ClrSummaryItem, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-summary-item', standalone: true, imports: [CommonModule, ClarityModule, ClrSummaryItemValue, ClrSummaryItemValueCopyButton], template: "<ng-template #itemTemplate>\n  <div\n    class=\"summary-item\"\n    [class.hidden]=\"\n      !hasProjectedContent && !hasLoading && !hasError && !hasWarning && !showEditButton && !showOnEmptyValue()\n    \"\n  >\n    <span class=\"summary-item-label\">{{ label() }}:</span>\n    <div class=\"summary-item-values\" #valuesContainer>\n      @if (hasLoading) {\n      <div class=\"summary-item-loading\">\n        <span class=\"spinner spinner-inline\"></span>\n        <span>{{ loadingText }}</span>\n      </div>\n      } @else if (hasError) {\n      <clr-summary-item-value icon=\"error-standard\" class=\"error\"></clr-summary-item-value>\n      <clr-summary-item-value\n        [value]=\"errorText\"\n        [clickable]=\"true\"\n        (clicked)=\"errorClick()\"\n        class=\"error\"\n      ></clr-summary-item-value>\n      } @else if (hasWarning) {\n      <clr-summary-item-value icon=\"warning-standard\" class=\"warning\"></clr-summary-item-value>\n      <clr-summary-item-value\n        [value]=\"warningText\"\n        [clickable]=\"true\"\n        (clicked)=\"warningClick()\"\n        class=\"warning\"\n      ></clr-summary-item-value>\n      } @else {\n      <ng-content select=\"clr-summary-item-value\"></ng-content>\n      @if (showCopyButton) {\n      <clr-summary-area-value-copy-button\n        [value]=\"copyableValue\"\n        [tooltipText]=\"copyButtonTooltip()\"\n      ></clr-summary-area-value-copy-button>\n      }\n      <ng-content></ng-content>\n      @if (showEditButton) {\n      <clr-summary-item-value [value]=\"editText\" [clickable]=\"true\" (clicked)=\"editClick()\"></clr-summary-item-value>\n      } @else if (!hasProjectedContent) {\n      <span class=\"value value-placeholder\">&mdash;</span>\n      } }\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:block;min-width:0;max-width:100%;overflow:hidden}.summary-item{display:flex;flex-direction:row;align-items:center;gap:.25rem;width:100%;min-width:0}.summary-item.hidden{display:none}.summary-item-label{flex-shrink:0;white-space:nowrap;font-weight:600}.summary-item-values{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:.25rem;flex:1 1 auto;min-width:0;max-width:100%;overflow:visible}clr-summary-area-value-copy-button{flex:0 0 auto}.summary-item-loading{display:flex;align-items:center}.summary-item-loading .loading-spinner{width:20px;height:20px;flex-shrink:0}.summary-item-loading .loading-text{color:var(--cds-alias-typography-color-300);white-space:nowrap}.value{display:inline-block;flex:1 1 auto;min-width:0;overflow:visible;text-overflow:ellipsis;white-space:nowrap}.value-link,.edit-link{color:var(--cds-alias-typography-link-color);text-decoration:underline;cursor:pointer}.value-link:visited,.edit-link:visited{color:var(--cds-alias-typography-link-color-visited)}.value-link:hover,.value-link:focus,.edit-link:hover,.edit-link:focus{color:var(--cds-alias-typography-link-color-hover);text-decoration:underline}\n"] }]
+            args: [{ selector: 'clr-summary-item', standalone: true, imports: [CommonModule, ClarityModule, ClrSummaryItemValue, ClrCopyToClipboard], template: "<ng-template #itemTemplate>\n  <div\n    class=\"summary-item\"\n    [class.hidden]=\"\n      !hasProjectedContent && !hasLoading && !hasError && !hasWarning && !showEditButton && !showOnEmptyValue()\n    \"\n  >\n    <span class=\"summary-item-label\">{{ label() }}:</span>\n    <div class=\"summary-item-values\" #valuesContainer>\n      @if (hasLoading) {\n      <div class=\"summary-item-loading\">\n        <span class=\"spinner spinner-inline\"></span>\n        <span>{{ loadingText }}</span>\n      </div>\n      } @else if (hasError) {\n      <clr-summary-item-value icon=\"error-standard\" class=\"error\"></clr-summary-item-value>\n      <clr-summary-item-value\n        [value]=\"errorText\"\n        [clickable]=\"true\"\n        (clicked)=\"errorClick()\"\n        class=\"error\"\n      ></clr-summary-item-value>\n      } @else if (hasWarning) {\n      <clr-summary-item-value icon=\"warning-standard\" class=\"warning\"></clr-summary-item-value>\n      <clr-summary-item-value\n        [value]=\"warningText\"\n        [clickable]=\"true\"\n        (clicked)=\"warningClick()\"\n        class=\"warning\"\n      ></clr-summary-item-value>\n      } @else {\n      <ng-content select=\"clr-summary-item-value\"></ng-content>\n      @if (showCopyButton) {\n      <clr-copy-to-clipboard [value]=\"copyableValue\" [tooltipText]=\"copyButtonTooltip()\"></clr-copy-to-clipboard>\n      }\n      <ng-content></ng-content>\n      @if (showEditButton) {\n      <clr-summary-item-value [value]=\"editText\" [clickable]=\"true\" (clicked)=\"editClick()\"></clr-summary-item-value>\n      } @else if (!hasProjectedContent) {\n      <span class=\"value value-placeholder\">&mdash;</span>\n      } }\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:block;min-width:0;max-width:100%;overflow:hidden}.summary-item{display:flex;flex-direction:row;align-items:center;gap:.25rem;width:100%;min-width:0}.summary-item.hidden{display:none}.summary-item-label{flex-shrink:0;white-space:nowrap;font-weight:600}.summary-item-values{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:.25rem;flex:1 1 auto;min-width:0;max-width:100%;overflow:visible}clr-copy-to-clipboard{flex:0 0 auto}.summary-item-loading{display:flex;align-items:center}.summary-item-loading .loading-spinner{width:20px;height:20px;flex-shrink:0}.summary-item-loading .loading-text{color:var(--cds-alias-typography-color-300);white-space:nowrap}.value{display:inline-block;flex:1 1 auto;min-width:0;overflow:visible;text-overflow:ellipsis;white-space:nowrap}.value-link,.edit-link{color:var(--cds-alias-typography-link-color);text-decoration:underline;cursor:pointer}.value-link:visited,.edit-link:visited{color:var(--cds-alias-typography-link-color-visited)}.value-link:hover,.value-link:focus,.edit-link:hover,.edit-link:focus{color:var(--cds-alias-typography-link-color-hover);text-decoration:underline}\n"] }]
         }], propDecorators: { template: [{
                 type: ViewChild,
                 args: ['itemTemplate', { static: true }]
@@ -16949,5 +19475,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ACShape, AcceptanceDateShape, AcceptedBrands, AccessoryPartsShape, AudiBrandShape, AwardWinnerPremiumShape, BIG_ENDIAN, BlocksGroupForwardShape, BundleForwardShape, BusinessCustomersCommercialShape, BusinessCustomersPrivateShape, BusinessPartnerWithCar, CLR_BLANK_OPTION, CONTENT_PROVIDER, CalculatorForwardShape, CaliforniaServiceShape, CampaignOutdatedShape, CampaignShape, CarOffSite, CarOnSite, CircleFilled, CircleHalfFilled, CircleQuarterFilled, CircleThreeQuartersFilled, ClrActionPanel, ClrActionPanelContainer, ClrActionPanelContainerContent, ClrActionPanelContainerFooter, ClrActionPanelModule, ClrActiveNotification, ClrAddonsLabel, ClrAddonsModule, ClrAutocompleteOff, ClrAutocompleteOffModule, ClrBackButton, ClrBackButtonModule, ClrBrandAvatar, ClrBrandAvatarModule, ClrBreadcrumb, ClrBreadcrumbModule, ClrBreadcrumbService, ClrCollapseExpandSection, ClrCollapseExpandSectionModule, ClrContentPanel, ClrContentPanelContainer, ClrContentPanelContainerContent, ClrContentPanelContainerFooter, ClrContentPanelModule, ClrContentRef, ClrControlEnterSubmitDirective, ClrDataListPredefinedValidatorDirective, ClrDataListValidatorModule, ClrDataListValidators, ClrDatagridColumnReorderModule, ClrDatagridStatePersistenceModule, ClrDateFilterComponent, ClrDateFilterModule, ClrDateTimeContainer, ClrDateTimeModule, ClrDaterangeMaxValidator, ClrDaterangeMinValidator, ClrDaterangeOrderValidator, ClrDaterangeRequiredValidator, ClrDaterangepickerContainerComponent, ClrDaterangepickerDirective, ClrDaterangepickerModule, ClrDotPager, ClrDotPagerModule, ClrDropdownOverflowDirective, ClrDropdownOverflowModule, ClrEnumFilterComponent, ClrEnumFilterModule, ClrExportDatagridButtonModule, ClrFlowBar, ClrFlowBarModule, ClrFocusFirstInvalidFieldDirective, ClrFormModule, ClrGenericQuickList, ClrGenericQuickListModule, ClrHistory, ClrHistoryModule, ClrHistoryPinned, ClrHistoryService, ClrIconAvatar, ClrIconAvatarModule, ClrIfDaterangeErrorDirective, ClrIfWarning, ClrIfWarningModule, ClrLetterAvatar, ClrLetterAvatarModule, ClrLocationBarModule, ClrMainNavGroup, ClrMainNavGroupItem, ClrMainNavGroupModule, ClrMaxNumeric, ClrMinNumeric, ClrMultilingualInput, ClrMultilingualInputValidators, ClrMultilingualModule, ClrMultilingualSelector, ClrMultilingualTextarea, ClrNotification, ClrNotificationModule, ClrNotificationRef, ClrNotificationService, ClrNumericField, ClrNumericFieldModule, ClrNumericFieldValidators, ClrPagedSearchResultList, ClrPagedSearchResultListModule, ClrPager, ClrPagerModule, ClrProgressSpinnerComponent, ClrProgressSpinnerModule, ClrQuickList, ClrQuickListModule, ClrReadonlyDirective, ClrReadonlyDirectiveModule, ClrRequiredAllMultilang, ClrRequiredOneMultilang, ClrSearchField, ClrSearchFieldModule, ClrSignpostAddonComponent, ClrSignpostAddonModule, ClrSummaryArea, ClrSummaryAreaStateService, ClrSummaryAreaToggle, ClrSummaryItem, ClrSummaryItemValue, ClrSummaryItemValueCopyButton, ClrTimeInput, ClrTreetable, ClrTreetableActionOverflow, ClrTreetableCell, ClrTreetableColumn, ClrTreetableFilter, ClrTreetableModule, ClrTreetablePlaceholder, ClrTreetableRow, ClrTreetableSortOrder, ClrTreetableStringFilter, ClrTreetableTreeNode, ClrViewEditSection, ClrViewEditSectionModule, ColumnHiddenStatePersistenceDirective, CompletedByDateShape, CupraBrandShape, Customer, CustomerVip, CustomerVipCollection, CustomerWaiting, CustomerWaitingCollection, DATE, DELIMITER_REGEX, DWABrandShape, DatagridColumnReorderDirective, DatagridFieldDirective, DayModel, DeliveryDate, DieselShape, DollarBillForwardShape, DollarBillPartialShape, DynamicCellContentComponent, EnergyShape, ExportDatagridButtonComponent, ExportDatagridService, ExportTypeEnum, ExternalPartForwardShape, FirstRegistrationDate, GasCarsServiceShape, GasShape, HISTORY_NOTIFICATION_URL_PROVIDER, HISTORY_PROVIDER, HISTORY_TOKEN, HistoryProvider, InternalPartForwardShape, InvoiceReadyShape, InvoiceRecipient, InvoiceShape, ItemsForwardShape, ItemsReceiveShape, LITTLE_ENDIAN, LITTLE_ENDIAN_REGEX, LocationBarComponent, LocationBarContentProvider, LocationBarNode, LogoCommissionModule, LogoCommissionModuleFavIcon, LogoCommissionModuleNegative, LogoCommissionModuleNegativeFavIcon, LogoCostApproval, LogoCostApprovalFavIcon, LogoCostApprovalNegative, LogoCostApprovalNegativeFavIcon, LogoCostControlling, LogoCostControllingFavIcon, LogoCostControllingNegative, LogoCostControllingNegativeFavIcon, LogoDigitalServiceReception, LogoDigitalServiceReceptionFavIcon, LogoDigitalServiceReceptionNegative, LogoDigitalServiceReceptionNegativeFavIcon, LogoDocFlow, LogoDocFlowFavIcon, LogoDocFlowNegative, LogoDocFlowNegativeFavIcon, LogoDocScan, LogoDocScanFavIcon, LogoDocScanNegative, LogoDocScanNegativeFavIcon, LogoDocStore, LogoDocStoreFavIcon, LogoDocStoreNegative, LogoDocStoreNegativeFavIcon, LogoEBilling, LogoEBillingFavIcon, LogoEBillingNegative, LogoEBillingNegativeFavIcon, LogoEPayment, LogoEPaymentFavIcon, LogoEPaymentNegative, LogoEPaymentNegativeFavIcon, LogoMobilityPlanner, LogoMobilityPlannerFavIcon, LogoMobilityPlannerNegative, LogoMobilityPlannerNegativeFavIcon, LogoPartsMobile, LogoPartsMobileFavIcon, LogoPartsMobileNegative, LogoPartsMobileNegativeFavIcon, LogoSBO, LogoSBOFavIcon, LogoSBONegative, LogoSBONegativeFavIcon, LogoServiceCube, LogoServiceCubeFavIcon, LogoServiceCubeNegative, LogoServiceCubeNegativeFavIcon, LogoWCP, LogoWCPFavIcon, LogoWCPNegative, LogoWCPNegativeFavIcon, LogoWorkshopOrderTracker, LogoWorkshopOrderTrackerFavIcon, LogoWorkshopOrderTrackerNegative, LogoWorkshopOrderTrackerNegativeFavIcon, MIDDLE_ENDIAN, MIDDLE_ENDIAN_REGEX, MONTH, Mechanic, NewCarUtilityVehicleShape, NodeId, Number0, Number1, Number10, Number11, Number12, Number13, Number14, Number15, Number16, Number17, Number18, Number19, Number2, Number20, Number3, Number4, Number5, Number6, Number7, Number8, Number9, OrderShape, OrderStatusShape, PaintMaterialForwardShape, PaintMaterialShape, ParkingLocation, PartAvailabilityInfoShape, PartAvailabilityNoShape, PartAvailabilityUnknownShape, PartAvailabilityWarningShape, PartAvailabilityYesShape, PartIdenticalPredecessorShape, PartIdenticalShape, PartIdenticalSuccessorShape, PartIdenticalSuccpredecessorShape, PartNonStockForwardShape, PartPredecessorShape, PartSuccessorPredecessorShape, PartSuccessorShape, PartsChangelocation, PartsForwardShape, PartsInventory, PartsNonStockShape, PartsPicking, PartsPickingPlus, PartsReceiving, PartsShape, PlusServiceShape, PopoverPositions, PorscheBrandShape, PriceTypeSwitchShape, RepeatRepairCollection, RepeatRepairShape, ReplacementVehicleCollection, ReplacementVehicleShape, ReturnDateShape, SEPARATOR_TEXT_DEFAULT, SeatBrandShape, ServiceAdvisor, SkodaBrandShape, Sort, StatePersistenceKeyDirective, TRANSLATIONS, TaskAndAppointment, TextForward, TimeModel, TopcardShape, TouaregServiceShape, TreetableCellRenderer, TreetableDataStateService, TreetableHeaderRenderer, TreetableItemsDirective, TreetableMainRenderer, TreetableRowRenderer, USER_INPUT_REGEX, VWBrandShape, VWNBrandShape, VWShape, VehicleConversionShape, VinShape, VsfSearchShape, VsfSearchShape48, WCPShape, WrenchForward, YEAR, acceleration, accelerationIcon, acceptanceDateIcon, accessories, accessoriesIcon, accessoryPartsIcon, adblueAppIcon, adblue_app, add, addIcon, airConditionerIcon, air_conditioning, alert, alertFilledAppIcon, alertIcon, alertNotificationFilledAppIcon, alert_filled_app, alert_notification_filled_app, allIcons, ambientLightAppIcon, ambient_light_app, amplifier, amplifierIcon, appConnectAppIcon, app_connect_app, archive, archiveIcon, arrowDownIcon, arrowLeftAlignedAppIcon, arrowLeftIcon, arrowRightIcon, arrowSliderAppIcon, arrowUpIcon, arrow_down, arrow_left, arrow_left_aligned_app, arrow_right, arrow_slider_app, arrow_up, attachment, attachmentIcon, audiBrandIcon, authentPlugChargeAppIcon, authentQrAppIcon, authentRfidAppIcon, authentTouchidAppIcon, authent_plug_charge_app, authent_qr_app, authent_rfid_app, authent_touch_id_app, automaticTempAppIcon, automatic_temp_app, awardWinnerPremiumIcon, award_winner_premium, back, backIcon, battery, batteryIcon, batterySocChargingAppIcon, batterySocDepartureAppIcon, batterySocDestinationAppIcon, battery_soc_charging_app, battery_soc_departure_app, battery_soc_destination_app, bin, binIcon, blocksGroupForwardIcon, bluetooth, bluetoothIcon, bookmark, bookmarkFilledIcon, bookmarkIcon, bookmark_filled, brakeAppIcon, brake_app, brochure, brochureIcon, bulletpointAppIcon, bulletpoint_app, bundleForwardIcon, businessCustomersCommercialIcon, businessCustomersPrivateIcon, businessPartnerWithCarIcon, business_customers_commercial, business_customers_private, calc, calcIcon, calculatorForwardIcon, calendar, calendarCustomIcon, californiaServiceIcon, californiaSpecialistIcon, california_specialist, cameraScanIcon, camera_scan, campaignIcon, campaignOutdatedIcon, carDocumentsIcon, carErrorAppIcon, carInsuranceIcon, carOffSite, carOnSite, carPickupServiceIcon, carPlusIcon, carSettingsIcon, carVerifiedAppIcon, carWashIcon, carWheelAppIcon, car_documents, car_error_app, car_insurance, car_pickup_service, car_plus, car_settings, car_verified_app, car_wheel_app, carwash, certifiedRepairIcon, certifiedRetailerIcon, certified_repair, certified_retailer, challengeAppIcon, challenge_app, charging, chargingIcon, chargingPduAppIcon, chargingStationIcon, chargingTarifOverviewAppIcon, charging_pdu_app, charging_station, charging_tarif_overview_app, chat, chatAppIcon, chatIcon, chat_app, checkboxCheckedAppIcon, checkboxCheckedIcon, checkboxUncheckedAppIcon, checkboxUncheckedIcon, checkbox_checked, checkbox_checked_app, checkbox_unchecked, checkbox_unchecked_app, checkmark, checkmarkAppIcon, checkmarkFilledAppIcon, checkmarkIcon, checkmark_app, checkmark_filled_app, chevronDownIcon, chevronLeftAlignedappIcon, chevronLeftIcon, chevronRightAlignedappIcon, chevronRightIcon, chevronSmallLeftAlignedappIcon, chevronSmallRightAlignedappIcon, chevronUpIcon, chevron_down, chevron_left, chevron_left_alignedapp, chevron_right, chevron_right_alignedapp, chevron_small_left_alignedapp, chevron_small_right_alignedapp, chevron_up, circleFilledIcon, circleHalfFilledIcon, circleQuarterFilledIcon, circleThreeQuartersFilledIcon, city, cityIcon, clearAppIcon, clearRightAlignedappIcon, clear_app, clear_right_alignedapp, clock, clockIcon, close, closeAppIcon, closeCircleIcon, closeIcon, closeLeftAlignedappIcon, closeRightAlignedappIcon, close_app, close_circle, close_left_alignedapp, close_right_alignedapp, clrIconSVG, coffeeFilledAppIcon, coffee_filled_app, compassAppIcon, compass_app, completedByDateIcon, configuratorCommercialIcon, configuratorPrivateIcon, configurator_commercial, configurator_private, construction, constructionIcon, consumptionFuelFilledAppIcon, consumptionIcon, consumption_fuel, consumption_fuel_filled_app, contact, contactDealerFilledAppIcon, contactDealerIcon, contactIcon, contact_dealer, contact_dealer_filled_app, countryRoadIcon, country_road, craft, craftIcon, cupraBrandIcon, customerIcon, customerVipIcon, customerWaitingIcon, customersCenterIcon, customers_center, dataCopyAppIcon, dataExpiredIcon, dataFilledIcon, dataInputIcon, dataPlugAppIcon, dataSearchIcon, dataTimeExtensionIcon, data_copy_app, data_expired, data_filled, data_input, data_plug_app, data_search, data_time_extension, defaultSummaryAreaCollapsedKey, defogDefrostAutoAppIcon, defogDefrostIcon, defog_defrost, defog_defrost_auto_app, deliveryDateIcon, destinationAppIcon, destination_app, dieselIcon, direction, directionIcon, dischargingAppIcon, discharging_app, discountAppIcon, discount_app, discoveryAppIcon, discovery_app, dollarBillForwardIcon, dollarBillPartialIcon, download, downloadCustomIcon, dragIndicatorIcon, drag_indicator, driversAssistanceIcon, drivers_assistance, dropFilledAppIcon, drop_filled_app, dwaBrandIcon, eco, ecoIcon, edit, editIcon, editSmallRightAlignedAppIcon, edit_small_right_aligned_app, efficiency, efficiencyIcon, electricCarsIcon, electricCarsServiceIcon, electric_cars, electric_cars_service, electricity, electricityFilledAppIcon, electricityIcon, electricity_filled_app, emergency, emergencyIcon, emission, emissionIcon, energyIcon, engine, engineIcon, entertainment, entertainmentIcon, escapeHtml, escapeRegex, exportAppIcon, export_app, expressServiceIcon, express_service, exterior, exterior360Icon, exteriorIcon, exterior_360, externalPartForwardIcon, faq, faqIcon, fastForwardIcon, fast_forward, fax, faxIcon, filter, filterIcon, findACarIcon, findADealerIcon, find_a_car, find_a_dealer, firstRegistrationDateIcon, fleetServiceCommercialIcon, fleetServicePrivateIcon, fleet_service_commercial, fleet_service_private, folderFilledAppIcon, folder_filled_app, foodFilledAppIcon, food_filled_app, formatNumber, fullscreenEnterIcon, fullscreenExitIcon, fullscreen_enter, fullscreen_exit, gallery, galleryIcon, garageAppIcon, garage_app, gasAppIcon, gasCarsServiceIcon, gasIcon, gas_app, glassDamageAppIcon, glass_damage_app, gte, gteIcon, heart, heartFilledAppIcon, heartIcon, heart_filled_app, heightAppIcon, height_app, highwayRoadIcon, highway_road, history, historyIcon, homeAppIcon, homeEnergyAppIcon, homeFilledAppIcon, home_app, home_energy_app, home_filled_app, hornAppIcon, hornFilledAppIcon, horn_app, horn_filled_app, hybrid, hybridIcon, immediateChargingAppIcon, immediate_charging_app, info, infoFilledIcon, infoIcon, info_filled, inputHideIcon, inputShowIcon, input_hide, input_show, interior, interior360Icon, interiorIcon, interior_360, internalPartForwardIcon, internet, internetIcon, invitationAppIcon, invitation_app, invoiceIcon, invoiceReadyIcon, invoiceRecipientIcon, itemsForwardIcon, itemsRecieveIcon, jobportal, jobportalIcon, keyAppIcon, keyCardAppIcon, keyDigitalAppIcon, key_app, key_card_app, key_digital_app, keyboardAppIcon, keyboard_app, layerCollapseAppIcon, layerExpandAppIcon, layer_collapse_app, layer_expand_app, layersAppIcon, layers_app, legalTermsAndConditionsAppIcon, legal_terms_and_conditions_app, licencePlateAppIcon, licence_plate_app, lightAssistappIcon, light_assistapp, lightingAppIcon, lighting_app, linkExternAppIcon, link_extern_app, list, listIcon, loadingVolumeIcon, loading_volume, localBusinessIcon, local_business, locate, locateIcon, lock, lockIcon, lockOpenIcon, lock_open, login, loginIcon, logistic, logisticIcon, logoCommissionModuleFavIcon, logoCommissionModuleIcon, logoCommissionModuleNegativeFavIcon, logoCommissionModuleNegativeIcon, logoCostApprovalFavIcon, logoCostApprovalIcon, logoCostApprovalNegativeFavIcon, logoCostApprovalNegativeIcon, logoCrossControllingFavIcon, logoCrossControllingIcon, logoCrossControllingNegativeFavIcon, logoCrossControllingNegativeIcon, logoDigitalServiceReceptionFavIcon, logoDigitalServiceReceptionIcon, logoDigitalServiceReceptionNegativeFavIcon, logoDigitalServiceReceptionNegativeIcon, logoDocFlowFavIcon, logoDocFlowIcon, logoDocFlowNegativeFavIcon, logoDocFlowNegativeIcon, logoDocScanFavIcon, logoDocScanIcon, logoDocScanNegativeFavIcon, logoDocScanNegativeIcon, logoDocStoreFavIcon, logoDocStoreIcon, logoDocStoreNegativeFavIcon, logoDocStoreNegativeIcon, logoEBillingFavIcon, logoEBillingIcon, logoEBillingNegativeFavIcon, logoEBillingNegativeIcon, logoEPaymentFavIcon, logoEPaymentIcon, logoEPaymentNegativeFavIcon, logoEPaymentNegativeIcon, logoMobilityPlannerFavIcon, logoMobilityPlannerIcon, logoMobilityPlannerNegativeFavIcon, logoMobilityPlannerNegativeIcon, logoPartsMobileFavIcon, logoPartsMobileIcon, logoPartsMobileNegativeFavIcon, logoPartsMobileNegativeIcon, logoSBOFavIcon, logoSBOIcon, logoSBONegativeFavIcon, logoSBONegativeIcon, logoServiceCubeFavIcon, logoServiceCubeIcon, logoServiceCubeNegativeFavIcon, logoServiceCubeNegativeIcon, logoWCPFavIcon, logoWCPIcon, logoWCPNegativeFavIcon, logoWCPNegativeIcon, logoWorkshopOrderTrackerFavIcon, logoWorkshopOrderTrackerIcon, logoWorkshopOrderTrackerNegativeFavIcon, logoWorkshopOrderTrackerNegativeIcon, logout, logoutIcon, magnifier, magnifierIcon, magnifierMinusIcon, magnifierPlusIcon, magnifier_minus, magnifier_plus, mail, mailIcon, mailResendAppIcon, mail_resend_app, manual, manualIcon, map, mapIcon, mapToInternalTree, mechanicIcon, media, mediaIcon, menu, menuAppAppIcon, menuIcon, menu_app_app, microphoneAppIcon, microphone_app, mobile, mobileIcon, moreAppIcon, moreAppbarAppIcon, more_app, more_appbar_app, mot, motIcon, motability, motabilityIcon, navigate, navigateFilledAppIcon, navigateIcon, navigate_filled_app, newCarCommercialIcon, newCarPrivateFilledAppIcon, newCarPrivateIcon, newCarUtilityVehicleIcon, new_car_commercial, new_car_private, new_car_private_filled_app, nightServiceIcon, night_service, notification, notificationFilledIcon, notificationIcon, notification_filled, number0Icon, number10Icon, number11Icon, number12Icon, number13Icon, number14Icon, number15Icon, number16Icon, number17Icon, number18Icon, number19Icon, number1Icon, number20Icon, number2Icon, number3Icon, number4Icon, number5Icon, number6Icon, number7Icon, number8Icon, number9Icon, offers, offersFilledAppIcon, offersIcon, offers_filled_app, officeAppIcon, officeFilledAppIcon, office_app, office_filled_app, oilLevelIcon, oilLevelWarningIcon, oilTemperatureAppIcon, oil_level, oil_level_warning, oil_temperature_app, onCallDutyIcon, on_call_duty, openSatIcon, open_sat, orderIcon, orderStatusIcon, paintMaterialForwardIcon, paintMaterialIcon, paintShopIcon, paint_shop, paragraphAppIcon, paragraph_app, parkHeaterAppIcon, park_heater_app, parking, parkingFilledAppIcon, parkingGarageAppIcon, parkingIcon, parkingLocationIcon, parkingRouteAppIcon, parkingValetAppIcon, parking_filled_app, parking_garage_app, parking_route_app, parking_valet_app, partAvailabilityInfoIcon, partAvailabilityNoIcon, partAvailabilityUnknownIcon, partAvailabilityWarningIcon, partAvailabilityYesIcon, partIdenticalIcon, partIdenticalPredecessorIcon, partIdenticalSuccessorIcon, partIdenticalSuccpredecessorIcon, partPredecessorIcon, partSuccessorIcon, partSuccessorPredecessorIcon, partsChangelocationIcon, partsForwardIcon, partsIcon, partsInventoryIcon, partsNonStockForwardIcon, partsNonStockIcon, partsPickingIcon, partsPickingPlusIcon, partsReceivingIcon, pause, pauseIcon, payload, payloadIcon, paymentAppIcon, paymentCashAppIcon, paymentChargingCardAppIcon, paymentCreditcardAppIcon, paymentMachineAppIcon, payment_app, payment_cash_app, payment_charging_card_app, payment_creditcard_app, payment_machine_app, performance, performanceIcon, petrol, petrolIcon, phone, phoneIcon, pin, pinFilledAppIcon, pinGenericFilledAppIcon, pinIcon, pin_filled_app, pin_generic_filled_app, play, playIcon, plugCcsAppIcon, plugChademoAppIcon, plugChargeAppIcon, plugGenericAppIcon, plugSchukoAppIcon, plugType1AppIcon, plugType2AppIcon, plug_ccs_app, plug_chademo_app, plug_charge_app, plug_generic_app, plug_schuko_app, plug_type1_app, plug_type2_app, plusServiceIcon, porscheBrandIcon, power, powerIcon, powerTrainIcon, powertrain, preHeaterAppIcon, pre_heater_app, preciseLaneNavigationAppIcon, precise_lane_navigation_app, presentAppIcon, present_app, priceTypeSwitchIcon, printer, printerIcon, privacyAppIcon, privacy_app, profile, profileIcon, profileRegisterAppIcon, profileVerifiedIcon, profile_register_app, profile_verified, publicServiceIcon, publicTransportAppIcon, public_service, public_transport_app, qualifiedWorkshopIcon, qualified_workshop, questionnaireAppIcon, questionnaire_app, radio, radioButtonInselectedIcon, radioButtonSelectedForDefIcon, radioButtonSelectedIcon, radioIcon, radio_button_inselected, radio_button_selected, radio_button_selected_for_development, range, rangeIcon, reload, reloadIcon, remove, removeIcon, repeat, repeatIcon, repeatRepairIcon, replacementVehicleIcon, returnDateIcon, rewind, rewindIcon, roadsideAssistanceIcon, roadside_assistance, route, routeArrowAppIcon, routeIcon, route_arrow_app, routesHistoryAppIcon, routes_history_app, rss, rssIcon, safety, safetyIcon, save, saveAppIcon, saveIcon, save_app, seat, seatAirIcon, seatBrandIcon, seatIcon, seat_air, secretTipAppIcon, secretTipFilledAppIcon, secret_tip_app, secret_tip_filled_app, selected, selectedIcon, selectedPartnerNetworkAppIcon, selected_partner_network_app, sendToCarAppIcon, send_to_car_app, service, serviceAdvisorIcon, serviceBellIcon, serviceFilledAppIcon, serviceIcon, service_bell, service_filled_app, settings, settingsIcon, shareAndroidIcon, shareIosIcon, share_android, share_ios, shoppingCartFilledAppIcon, shoppingCartIcon, shopping_cart, shopping_cart_filled_app, shuffle, shuffleIcon, size, sizeIcon, skillAppIcon, skill_app, skipBackwardIcon, skipForwardIcon, skip_backward, skip_forward, skodaBrandIcon, softwareDownloadAppIcon, software_download_app, sortingAppIcon, sorting_app, sound, soundIcon, standardEquipmentIcon, standard_equipment, starFilledIcon, starOutlineIcon, star_filled, star_outline, statisticAppIcon, statistic_app, stockLocatorCommercialIcon, stockLocatorPrivateIcon, stock_locator_commercial, stock_locator_private, stop, stopIcon, strip, switchPositionAppIcon, switch_position_app, syncAppIcon, sync_app, taskAndAppointmentIcon, taxiDealerIcon, taxi_dealer, technicalSpecificationIcon, technical_specification, temperatureAppIcon, temperature_app, testDriveIcon, test_drive, textForwardIcon, thumbsdownAppIcon, thumbsdownFilledAppIcon, thumbsdown_app, thumbsdown_filled_app, thumbsupAppIcon, thumbsupFilledAppIcon, thumbsup_app, thumbsup_filled_app, timeClimatisationAppIcon, timePreferredAppIcon, time_climatisation_app, time_preferred_app, timer, timerIcon, topcardIcon, touaregServiceIcon, transcriptDownloadIcon, transcript_download, transmissionAutomaticIcon, transmissionManualIcon, transmission_automatic, transmission_manual, tripAppIcon, tripLongAppIcon, tripPartedAppIcon, tripShortAppIcon, trip_app, trip_long_app, trip_parted_app, trip_short_app, turnSignalsIcon, turn_signals, unselected, unselectedIcon, updateRefreshAppIcon, update_refresh_app, upload, uploadAppIcon, uploadCustomIcon, upload_app, usedCarCommercialIcon, usedCarPrivateIcon, used_car_commercial, used_car_private, vehicleAmarokIcon, vehicleCaddyIcon, vehicleConversionIcon, vehicleCrafterIcon, vehicleHightIcon, vehicleIdBuzzIcon, vehicleMultivanIcon, vehicleTransporterIcon, vehicle_amarok, vehicle_caddy, vehicle_crafter, vehicle_hight, vehicle_idbuzz, vehicle_multivan, vehicle_transporter, videoChatIcon, video_chat, view360Icon, view_360, vinIcon, virtualRealityIcon, virtual_reality, voiceMessageAppIcon, voice_message_app, volkswagenAppIcon, volkswagenIcon, volkswagen_app, volumeMaximumIcon, volumeMediumIcon, volumeMuteIcon, volume_maximum, volume_medium, volume_mute, vsfSearch48Icon, vsfSearchIcon, vwBrandIcon, vwConnectLicenseAppIcon, vw_connect_license_app, vwnBrandIcon, walkingAppIcon, walkingFilledAppIcon, walking_app, walking_filled_app, wallbox, wallboxIcon, wcAppIcon, wc_app, wcpIcon, weAssistAppIcon, weChargeAppIcon, weDeliverAppIcon, weExperienceAppIcon, weParkAppIcon, weUpgradeAppIcon, we_assist_app, we_charge_app, we_deliver_app, we_experience_app, we_park_app, we_upgrade_app, weatherSunAppIcon, weather_sun_app, wheelToWheelIcon, wheel_to_wheel, windscreenWashIcon, windscreen_wash, wlanHotspotIcon, wlan_hotspot, wrenchForwardIcon };
+export { ACShape, AcceptanceDateShape, AcceptedBrands, AccessoryPartsShape, AreaChartComponent, AudiBrandShape, AwardWinnerPremiumShape, BIG_ENDIAN, BarChartComponent, BlocksGroupForwardShape, BundleForwardShape, BusinessCustomersCommercialShape, BusinessCustomersPrivateShape, BusinessPartnerWithCar, CLR_BLANK_OPTION, CONTENT_PROVIDER, CalculatorForwardShape, CaliforniaServiceShape, CampaignOutdatedShape, CampaignShape, CarOffSite, CarOnSite, CircleFilled, CircleHalfFilled, CircleQuarterFilled, CircleThreeQuartersFilled, ClrActionPanel, ClrActionPanelContainer, ClrActionPanelContainerContent, ClrActionPanelContainerFooter, ClrActionPanelModule, ClrActiveNotification, ClrAddonsLabel, ClrAddonsModule, ClrAutocompleteOff, ClrAutocompleteOffModule, ClrBackButton, ClrBackButtonModule, ClrBrandAvatar, ClrBrandAvatarModule, ClrBreadcrumb, ClrBreadcrumbModule, ClrBreadcrumbService, ClrChartsModule, ClrCollapseExpandSection, ClrCollapseExpandSectionModule, ClrContentPanel, ClrContentPanelContainer, ClrContentPanelContainerContent, ClrContentPanelContainerFooter, ClrContentPanelModule, ClrContentRef, ClrControlEnterSubmitDirective, ClrCopyToClipboard, ClrDataListPredefinedValidatorDirective, ClrDataListValidatorModule, ClrDataListValidators, ClrDatagridColumnReorderModule, ClrDatagridStatePersistenceModule, ClrDateFilterComponent, ClrDateFilterModule, ClrDateTimeContainer, ClrDateTimeModule, ClrDaterangeMaxValidator, ClrDaterangeMinValidator, ClrDaterangeOrderValidator, ClrDaterangeRequiredValidator, ClrDaterangepickerContainerComponent, ClrDaterangepickerDirective, ClrDaterangepickerModule, ClrDotPager, ClrDotPagerModule, ClrDropdownOverflowDirective, ClrDropdownOverflowModule, ClrEnumFilterComponent, ClrEnumFilterModule, ClrExportDatagridButtonModule, ClrFlowBar, ClrFlowBarModule, ClrFocusFirstInvalidFieldDirective, ClrFormModule, ClrGenericQuickList, ClrGenericQuickListModule, ClrHistory, ClrHistoryModule, ClrHistoryPinned, ClrHistoryService, ClrIconAvatar, ClrIconAvatarModule, ClrIfDaterangeErrorDirective, ClrIfWarning, ClrIfWarningModule, ClrLetterAvatar, ClrLetterAvatarModule, ClrLocationBarModule, ClrMainNavGroup, ClrMainNavGroupItem, ClrMainNavGroupModule, ClrMaxNumeric, ClrMinNumeric, ClrMultilingualInput, ClrMultilingualInputValidators, ClrMultilingualModule, ClrMultilingualSelector, ClrMultilingualTextarea, ClrNotification, ClrNotificationModule, ClrNotificationRef, ClrNotificationService, ClrNumericField, ClrNumericFieldModule, ClrNumericFieldValidators, ClrPagedSearchResultList, ClrPagedSearchResultListModule, ClrPager, ClrPagerModule, ClrProgressSpinnerComponent, ClrProgressSpinnerModule, ClrQuickList, ClrQuickListModule, ClrReadonlyDirective, ClrReadonlyDirectiveModule, ClrRequiredAllMultilang, ClrRequiredOneMultilang, ClrSearchField, ClrSearchFieldModule, ClrSignpostAddonComponent, ClrSignpostAddonModule, ClrSummaryArea, ClrSummaryAreaStateService, ClrSummaryAreaToggle, ClrSummaryItem, ClrSummaryItemValue, ClrTimeInput, ClrTreetable, ClrTreetableActionOverflow, ClrTreetableCell, ClrTreetableColumn, ClrTreetableFilter, ClrTreetableModule, ClrTreetablePlaceholder, ClrTreetableRow, ClrTreetableSortOrder, ClrTreetableStringFilter, ClrTreetableTreeNode, ClrViewEditSection, ClrViewEditSectionModule, ColumnHiddenStatePersistenceDirective, ComboChartComponent, CompletedByDateShape, CupraBrandShape, Customer, CustomerVip, CustomerVipCollection, CustomerWaiting, CustomerWaitingCollection, DATE, DELIMITER_REGEX, DWABrandShape, DatagridColumnReorderDirective, DatagridFieldDirective, DayModel, DeliveryDate, DieselShape, DollarBillForwardShape, DollarBillPartialShape, DynamicCellContentComponent, EnergyShape, ExportDatagridButtonComponent, ExportDatagridService, ExportTypeEnum, ExternalPartForwardShape, FirstRegistrationDate, FunnelChartComponent, GasCarsServiceShape, GasShape, HISTORY_NOTIFICATION_URL_PROVIDER, HISTORY_PROVIDER, HISTORY_TOKEN, HistoryProvider, InternalPartForwardShape, InvoiceReadyShape, InvoiceRecipient, InvoiceShape, ItemsForwardShape, ItemsReceiveShape, LITTLE_ENDIAN, LITTLE_ENDIAN_REGEX, LineChartComponent, LocationBarComponent, LocationBarContentProvider, LocationBarNode, LogoCommissionModule, LogoCommissionModuleFavIcon, LogoCommissionModuleNegative, LogoCommissionModuleNegativeFavIcon, LogoCostApproval, LogoCostApprovalFavIcon, LogoCostApprovalNegative, LogoCostApprovalNegativeFavIcon, LogoCostControlling, LogoCostControllingFavIcon, LogoCostControllingNegative, LogoCostControllingNegativeFavIcon, LogoDigitalServiceReception, LogoDigitalServiceReceptionFavIcon, LogoDigitalServiceReceptionNegative, LogoDigitalServiceReceptionNegativeFavIcon, LogoDocFlow, LogoDocFlowFavIcon, LogoDocFlowNegative, LogoDocFlowNegativeFavIcon, LogoDocScan, LogoDocScanFavIcon, LogoDocScanNegative, LogoDocScanNegativeFavIcon, LogoDocStore, LogoDocStoreFavIcon, LogoDocStoreNegative, LogoDocStoreNegativeFavIcon, LogoEBilling, LogoEBillingFavIcon, LogoEBillingNegative, LogoEBillingNegativeFavIcon, LogoEPayment, LogoEPaymentFavIcon, LogoEPaymentNegative, LogoEPaymentNegativeFavIcon, LogoMobilityPlanner, LogoMobilityPlannerFavIcon, LogoMobilityPlannerNegative, LogoMobilityPlannerNegativeFavIcon, LogoPartsMobile, LogoPartsMobileFavIcon, LogoPartsMobileNegative, LogoPartsMobileNegativeFavIcon, LogoSBO, LogoSBOFavIcon, LogoSBONegative, LogoSBONegativeFavIcon, LogoServiceCube, LogoServiceCubeFavIcon, LogoServiceCubeNegative, LogoServiceCubeNegativeFavIcon, LogoWCP, LogoWCPFavIcon, LogoWCPNegative, LogoWCPNegativeFavIcon, LogoWorkshopOrderTracker, LogoWorkshopOrderTrackerFavIcon, LogoWorkshopOrderTrackerNegative, LogoWorkshopOrderTrackerNegativeFavIcon, MIDDLE_ENDIAN, MIDDLE_ENDIAN_REGEX, MONTH, Mechanic, NewCarUtilityVehicleShape, NodeId, Number0, Number1, Number10, Number11, Number12, Number13, Number14, Number15, Number16, Number17, Number18, Number19, Number2, Number20, Number3, Number4, Number5, Number6, Number7, Number8, Number9, OrderShape, OrderStatusShape, PaintMaterialForwardShape, PaintMaterialShape, ParkingLocation, PartAvailabilityInfoShape, PartAvailabilityNoShape, PartAvailabilityUnknownShape, PartAvailabilityWarningShape, PartAvailabilityYesShape, PartIdenticalPredecessorShape, PartIdenticalShape, PartIdenticalSuccessorShape, PartIdenticalSuccpredecessorShape, PartNonStockForwardShape, PartPredecessorShape, PartSuccessorPredecessorShape, PartSuccessorShape, PartsChangelocation, PartsForwardShape, PartsInventory, PartsNonStockShape, PartsPicking, PartsPickingPlus, PartsReceiving, PartsShape, PieChartComponent, PlusServiceShape, PopoverPositions, PorscheBrandShape, PriceTypeSwitchShape, RepeatRepairCollection, RepeatRepairShape, ReplacementVehicleCollection, ReplacementVehicleShape, ReturnDateShape, SEPARATOR_TEXT_DEFAULT, SeatBrandShape, ServiceAdvisor, SkodaBrandShape, Sort, StatePersistenceKeyDirective, TRANSLATIONS, TaskAndAppointment, TextForward, TimeModel, TopcardShape, TouaregServiceShape, TreetableCellRenderer, TreetableDataStateService, TreetableHeaderRenderer, TreetableItemsDirective, TreetableMainRenderer, TreetableRowRenderer, USER_INPUT_REGEX, VWBrandShape, VWNBrandShape, VWShape, VehicleConversionShape, VinShape, VsfSearchShape, VsfSearchShape48, WCPShape, WrenchForward, YEAR, acceleration, accelerationIcon, acceptanceDateIcon, accessories, accessoriesIcon, accessoryPartsIcon, adblueAppIcon, adblue_app, add, addIcon, airConditionerIcon, air_conditioning, alert, alertFilledAppIcon, alertIcon, alertNotificationFilledAppIcon, alert_filled_app, alert_notification_filled_app, allIcons, ambientLightAppIcon, ambient_light_app, amplifier, amplifierIcon, appConnectAppIcon, app_connect_app, archive, archiveIcon, arrowDownIcon, arrowLeftAlignedAppIcon, arrowLeftIcon, arrowRightIcon, arrowSliderAppIcon, arrowUpIcon, arrow_down, arrow_left, arrow_left_aligned_app, arrow_right, arrow_slider_app, arrow_up, attachment, attachmentIcon, audiBrandIcon, authentPlugChargeAppIcon, authentQrAppIcon, authentRfidAppIcon, authentTouchidAppIcon, authent_plug_charge_app, authent_qr_app, authent_rfid_app, authent_touch_id_app, automaticTempAppIcon, automatic_temp_app, awardWinnerPremiumIcon, award_winner_premium, back, backIcon, battery, batteryIcon, batterySocChargingAppIcon, batterySocDepartureAppIcon, batterySocDestinationAppIcon, battery_soc_charging_app, battery_soc_departure_app, battery_soc_destination_app, bin, binIcon, blocksGroupForwardIcon, bluetooth, bluetoothIcon, bookmark, bookmarkFilledIcon, bookmarkIcon, bookmark_filled, brakeAppIcon, brake_app, brochure, brochureIcon, bulletpointAppIcon, bulletpoint_app, bundleForwardIcon, businessCustomersCommercialIcon, businessCustomersPrivateIcon, businessPartnerWithCarIcon, business_customers_commercial, business_customers_private, calc, calcIcon, calculatorForwardIcon, calendar, calendarCustomIcon, californiaServiceIcon, californiaSpecialistIcon, california_specialist, cameraScanIcon, camera_scan, campaignIcon, campaignOutdatedIcon, carDocumentsIcon, carErrorAppIcon, carInsuranceIcon, carOffSite, carOnSite, carPickupServiceIcon, carPlusIcon, carSettingsIcon, carVerifiedAppIcon, carWashIcon, carWheelAppIcon, car_documents, car_error_app, car_insurance, car_pickup_service, car_plus, car_settings, car_verified_app, car_wheel_app, carwash, certifiedRepairIcon, certifiedRetailerIcon, certified_repair, certified_retailer, challengeAppIcon, challenge_app, charging, chargingIcon, chargingPduAppIcon, chargingStationIcon, chargingTarifOverviewAppIcon, charging_pdu_app, charging_station, charging_tarif_overview_app, chat, chatAppIcon, chatIcon, chat_app, checkboxCheckedAppIcon, checkboxCheckedIcon, checkboxUncheckedAppIcon, checkboxUncheckedIcon, checkbox_checked, checkbox_checked_app, checkbox_unchecked, checkbox_unchecked_app, checkmark, checkmarkAppIcon, checkmarkFilledAppIcon, checkmarkIcon, checkmark_app, checkmark_filled_app, chevronDownIcon, chevronLeftAlignedappIcon, chevronLeftIcon, chevronRightAlignedappIcon, chevronRightIcon, chevronSmallLeftAlignedappIcon, chevronSmallRightAlignedappIcon, chevronUpIcon, chevron_down, chevron_left, chevron_left_alignedapp, chevron_right, chevron_right_alignedapp, chevron_small_left_alignedapp, chevron_small_right_alignedapp, chevron_up, circleFilledIcon, circleHalfFilledIcon, circleQuarterFilledIcon, circleThreeQuartersFilledIcon, city, cityIcon, clearAppIcon, clearRightAlignedappIcon, clear_app, clear_right_alignedapp, clock, clockIcon, close, closeAppIcon, closeCircleIcon, closeIcon, closeLeftAlignedappIcon, closeRightAlignedappIcon, close_app, close_circle, close_left_alignedapp, close_right_alignedapp, clrIconSVG, coffeeFilledAppIcon, coffee_filled_app, compassAppIcon, compass_app, completedByDateIcon, configuratorCommercialIcon, configuratorPrivateIcon, configurator_commercial, configurator_private, construction, constructionIcon, consumptionFuelFilledAppIcon, consumptionIcon, consumption_fuel, consumption_fuel_filled_app, contact, contactDealerFilledAppIcon, contactDealerIcon, contactIcon, contact_dealer, contact_dealer_filled_app, countryRoadIcon, country_road, craft, craftIcon, cupraBrandIcon, customerIcon, customerVipIcon, customerWaitingIcon, customersCenterIcon, customers_center, dataCopyAppIcon, dataExpiredIcon, dataFilledIcon, dataInputIcon, dataPlugAppIcon, dataSearchIcon, dataTimeExtensionIcon, data_copy_app, data_expired, data_filled, data_input, data_plug_app, data_search, data_time_extension, defaultSummaryAreaCollapsedKey, defogDefrostAutoAppIcon, defogDefrostIcon, defog_defrost, defog_defrost_auto_app, deliveryDateIcon, destinationAppIcon, destination_app, dieselIcon, direction, directionIcon, dischargingAppIcon, discharging_app, discountAppIcon, discount_app, discoveryAppIcon, discovery_app, dollarBillForwardIcon, dollarBillPartialIcon, download, downloadCustomIcon, dragIndicatorIcon, drag_indicator, driversAssistanceIcon, drivers_assistance, dropFilledAppIcon, drop_filled_app, dwaBrandIcon, eco, ecoIcon, edit, editIcon, editSmallRightAlignedAppIcon, edit_small_right_aligned_app, efficiency, efficiencyIcon, electricCarsIcon, electricCarsServiceIcon, electric_cars, electric_cars_service, electricity, electricityFilledAppIcon, electricityIcon, electricity_filled_app, emergency, emergencyIcon, emission, emissionIcon, energyIcon, engine, engineIcon, entertainment, entertainmentIcon, escapeHtml, escapeRegex, exportAppIcon, export_app, expressServiceIcon, express_service, exterior, exterior360Icon, exteriorIcon, exterior_360, externalPartForwardIcon, faq, faqIcon, fastForwardIcon, fast_forward, fax, faxIcon, filter, filterIcon, findACarIcon, findADealerIcon, find_a_car, find_a_dealer, firstRegistrationDateIcon, fleetServiceCommercialIcon, fleetServicePrivateIcon, fleet_service_commercial, fleet_service_private, folderFilledAppIcon, folder_filled_app, foodFilledAppIcon, food_filled_app, formatNumber, fullscreenEnterIcon, fullscreenExitIcon, fullscreen_enter, fullscreen_exit, gallery, galleryIcon, garageAppIcon, garage_app, gasAppIcon, gasCarsServiceIcon, gasIcon, gas_app, glassDamageAppIcon, glass_damage_app, gte, gteIcon, heart, heartFilledAppIcon, heartIcon, heart_filled_app, heightAppIcon, height_app, highwayRoadIcon, highway_road, history, historyIcon, homeAppIcon, homeEnergyAppIcon, homeFilledAppIcon, home_app, home_energy_app, home_filled_app, hornAppIcon, hornFilledAppIcon, horn_app, horn_filled_app, hybrid, hybridIcon, immediateChargingAppIcon, immediate_charging_app, info, infoFilledIcon, infoIcon, info_filled, inputHideIcon, inputShowIcon, input_hide, input_show, interior, interior360Icon, interiorIcon, interior_360, internalPartForwardIcon, internet, internetIcon, invitationAppIcon, invitation_app, invoiceIcon, invoiceReadyIcon, invoiceRecipientIcon, itemsForwardIcon, itemsRecieveIcon, jobportal, jobportalIcon, keyAppIcon, keyCardAppIcon, keyDigitalAppIcon, key_app, key_card_app, key_digital_app, keyboardAppIcon, keyboard_app, layerCollapseAppIcon, layerExpandAppIcon, layer_collapse_app, layer_expand_app, layersAppIcon, layers_app, legalTermsAndConditionsAppIcon, legal_terms_and_conditions_app, licencePlateAppIcon, licence_plate_app, lightAssistappIcon, light_assistapp, lightingAppIcon, lighting_app, linkExternAppIcon, link_extern_app, list, listIcon, loadingVolumeIcon, loading_volume, localBusinessIcon, local_business, locate, locateIcon, lock, lockIcon, lockOpenIcon, lock_open, login, loginIcon, logistic, logisticIcon, logoCommissionModuleFavIcon, logoCommissionModuleIcon, logoCommissionModuleNegativeFavIcon, logoCommissionModuleNegativeIcon, logoCostApprovalFavIcon, logoCostApprovalIcon, logoCostApprovalNegativeFavIcon, logoCostApprovalNegativeIcon, logoCrossControllingFavIcon, logoCrossControllingIcon, logoCrossControllingNegativeFavIcon, logoCrossControllingNegativeIcon, logoDigitalServiceReceptionFavIcon, logoDigitalServiceReceptionIcon, logoDigitalServiceReceptionNegativeFavIcon, logoDigitalServiceReceptionNegativeIcon, logoDocFlowFavIcon, logoDocFlowIcon, logoDocFlowNegativeFavIcon, logoDocFlowNegativeIcon, logoDocScanFavIcon, logoDocScanIcon, logoDocScanNegativeFavIcon, logoDocScanNegativeIcon, logoDocStoreFavIcon, logoDocStoreIcon, logoDocStoreNegativeFavIcon, logoDocStoreNegativeIcon, logoEBillingFavIcon, logoEBillingIcon, logoEBillingNegativeFavIcon, logoEBillingNegativeIcon, logoEPaymentFavIcon, logoEPaymentIcon, logoEPaymentNegativeFavIcon, logoEPaymentNegativeIcon, logoMobilityPlannerFavIcon, logoMobilityPlannerIcon, logoMobilityPlannerNegativeFavIcon, logoMobilityPlannerNegativeIcon, logoPartsMobileFavIcon, logoPartsMobileIcon, logoPartsMobileNegativeFavIcon, logoPartsMobileNegativeIcon, logoSBOFavIcon, logoSBOIcon, logoSBONegativeFavIcon, logoSBONegativeIcon, logoServiceCubeFavIcon, logoServiceCubeIcon, logoServiceCubeNegativeFavIcon, logoServiceCubeNegativeIcon, logoWCPFavIcon, logoWCPIcon, logoWCPNegativeFavIcon, logoWCPNegativeIcon, logoWorkshopOrderTrackerFavIcon, logoWorkshopOrderTrackerIcon, logoWorkshopOrderTrackerNegativeFavIcon, logoWorkshopOrderTrackerNegativeIcon, logout, logoutIcon, magnifier, magnifierIcon, magnifierMinusIcon, magnifierPlusIcon, magnifier_minus, magnifier_plus, mail, mailIcon, mailResendAppIcon, mail_resend_app, manual, manualIcon, map, mapIcon, mapToInternalTree, mechanicIcon, media, mediaIcon, menu, menuAppAppIcon, menuIcon, menu_app_app, microphoneAppIcon, microphone_app, mobile, mobileIcon, moreAppIcon, moreAppbarAppIcon, more_app, more_appbar_app, mot, motIcon, motability, motabilityIcon, navigate, navigateFilledAppIcon, navigateIcon, navigate_filled_app, newCarCommercialIcon, newCarPrivateFilledAppIcon, newCarPrivateIcon, newCarUtilityVehicleIcon, new_car_commercial, new_car_private, new_car_private_filled_app, nightServiceIcon, night_service, notification, notificationFilledIcon, notificationIcon, notification_filled, number0Icon, number10Icon, number11Icon, number12Icon, number13Icon, number14Icon, number15Icon, number16Icon, number17Icon, number18Icon, number19Icon, number1Icon, number20Icon, number2Icon, number3Icon, number4Icon, number5Icon, number6Icon, number7Icon, number8Icon, number9Icon, offers, offersFilledAppIcon, offersIcon, offers_filled_app, officeAppIcon, officeFilledAppIcon, office_app, office_filled_app, oilLevelIcon, oilLevelWarningIcon, oilTemperatureAppIcon, oil_level, oil_level_warning, oil_temperature_app, onCallDutyIcon, on_call_duty, openSatIcon, open_sat, orderIcon, orderStatusIcon, paintMaterialForwardIcon, paintMaterialIcon, paintShopIcon, paint_shop, paragraphAppIcon, paragraph_app, parkHeaterAppIcon, park_heater_app, parking, parkingFilledAppIcon, parkingGarageAppIcon, parkingIcon, parkingLocationIcon, parkingRouteAppIcon, parkingValetAppIcon, parking_filled_app, parking_garage_app, parking_route_app, parking_valet_app, partAvailabilityInfoIcon, partAvailabilityNoIcon, partAvailabilityUnknownIcon, partAvailabilityWarningIcon, partAvailabilityYesIcon, partIdenticalIcon, partIdenticalPredecessorIcon, partIdenticalSuccessorIcon, partIdenticalSuccpredecessorIcon, partPredecessorIcon, partSuccessorIcon, partSuccessorPredecessorIcon, partsChangelocationIcon, partsForwardIcon, partsIcon, partsInventoryIcon, partsNonStockForwardIcon, partsNonStockIcon, partsPickingIcon, partsPickingPlusIcon, partsReceivingIcon, pause, pauseIcon, payload, payloadIcon, paymentAppIcon, paymentCashAppIcon, paymentChargingCardAppIcon, paymentCreditcardAppIcon, paymentMachineAppIcon, payment_app, payment_cash_app, payment_charging_card_app, payment_creditcard_app, payment_machine_app, performance, performanceIcon, petrol, petrolIcon, phone, phoneIcon, pin, pinFilledAppIcon, pinGenericFilledAppIcon, pinIcon, pin_filled_app, pin_generic_filled_app, play, playIcon, plugCcsAppIcon, plugChademoAppIcon, plugChargeAppIcon, plugGenericAppIcon, plugSchukoAppIcon, plugType1AppIcon, plugType2AppIcon, plug_ccs_app, plug_chademo_app, plug_charge_app, plug_generic_app, plug_schuko_app, plug_type1_app, plug_type2_app, plusServiceIcon, porscheBrandIcon, power, powerIcon, powerTrainIcon, powertrain, preHeaterAppIcon, pre_heater_app, preciseLaneNavigationAppIcon, precise_lane_navigation_app, presentAppIcon, present_app, priceTypeSwitchIcon, printer, printerIcon, privacyAppIcon, privacy_app, profile, profileIcon, profileRegisterAppIcon, profileVerifiedIcon, profile_register_app, profile_verified, publicServiceIcon, publicTransportAppIcon, public_service, public_transport_app, qualifiedWorkshopIcon, qualified_workshop, questionnaireAppIcon, questionnaire_app, radio, radioButtonInselectedIcon, radioButtonSelectedForDefIcon, radioButtonSelectedIcon, radioIcon, radio_button_inselected, radio_button_selected, radio_button_selected_for_development, range, rangeIcon, reload, reloadIcon, remove, removeIcon, repeat, repeatIcon, repeatRepairIcon, replacementVehicleIcon, returnDateIcon, rewind, rewindIcon, roadsideAssistanceIcon, roadside_assistance, route, routeArrowAppIcon, routeIcon, route_arrow_app, routesHistoryAppIcon, routes_history_app, rss, rssIcon, safety, safetyIcon, save, saveAppIcon, saveIcon, save_app, seat, seatAirIcon, seatBrandIcon, seatIcon, seat_air, secretTipAppIcon, secretTipFilledAppIcon, secret_tip_app, secret_tip_filled_app, selected, selectedIcon, selectedPartnerNetworkAppIcon, selected_partner_network_app, sendToCarAppIcon, send_to_car_app, service, serviceAdvisorIcon, serviceBellIcon, serviceFilledAppIcon, serviceIcon, service_bell, service_filled_app, settings, settingsIcon, shareAndroidIcon, shareIosIcon, share_android, share_ios, shoppingCartFilledAppIcon, shoppingCartIcon, shopping_cart, shopping_cart_filled_app, shuffle, shuffleIcon, size, sizeIcon, skillAppIcon, skill_app, skipBackwardIcon, skipForwardIcon, skip_backward, skip_forward, skodaBrandIcon, softwareDownloadAppIcon, software_download_app, sortingAppIcon, sorting_app, sound, soundIcon, standardEquipmentIcon, standard_equipment, starFilledIcon, starOutlineIcon, star_filled, star_outline, statisticAppIcon, statistic_app, stockLocatorCommercialIcon, stockLocatorPrivateIcon, stock_locator_commercial, stock_locator_private, stop, stopIcon, strip, switchPositionAppIcon, switch_position_app, syncAppIcon, sync_app, taskAndAppointmentIcon, taxiDealerIcon, taxi_dealer, technicalSpecificationIcon, technical_specification, temperatureAppIcon, temperature_app, testDriveIcon, test_drive, textForwardIcon, thumbsdownAppIcon, thumbsdownFilledAppIcon, thumbsdown_app, thumbsdown_filled_app, thumbsupAppIcon, thumbsupFilledAppIcon, thumbsup_app, thumbsup_filled_app, timeClimatisationAppIcon, timePreferredAppIcon, time_climatisation_app, time_preferred_app, timer, timerIcon, topcardIcon, touaregServiceIcon, transcriptDownloadIcon, transcript_download, transmissionAutomaticIcon, transmissionManualIcon, transmission_automatic, transmission_manual, tripAppIcon, tripLongAppIcon, tripPartedAppIcon, tripShortAppIcon, trip_app, trip_long_app, trip_parted_app, trip_short_app, turnSignalsIcon, turn_signals, unselected, unselectedIcon, updateRefreshAppIcon, update_refresh_app, upload, uploadAppIcon, uploadCustomIcon, upload_app, usedCarCommercialIcon, usedCarPrivateIcon, used_car_commercial, used_car_private, vehicleAmarokIcon, vehicleCaddyIcon, vehicleConversionIcon, vehicleCrafterIcon, vehicleHightIcon, vehicleIdBuzzIcon, vehicleMultivanIcon, vehicleTransporterIcon, vehicle_amarok, vehicle_caddy, vehicle_crafter, vehicle_hight, vehicle_idbuzz, vehicle_multivan, vehicle_transporter, videoChatIcon, video_chat, view360Icon, view_360, vinIcon, virtualRealityIcon, virtual_reality, voiceMessageAppIcon, voice_message_app, volkswagenAppIcon, volkswagenIcon, volkswagen_app, volumeMaximumIcon, volumeMediumIcon, volumeMuteIcon, volume_maximum, volume_medium, volume_mute, vsfSearch48Icon, vsfSearchIcon, vwBrandIcon, vwConnectLicenseAppIcon, vw_connect_license_app, vwnBrandIcon, walkingAppIcon, walkingFilledAppIcon, walking_app, walking_filled_app, wallbox, wallboxIcon, wcAppIcon, wc_app, wcpIcon, weAssistAppIcon, weChargeAppIcon, weDeliverAppIcon, weExperienceAppIcon, weParkAppIcon, weUpgradeAppIcon, we_assist_app, we_charge_app, we_deliver_app, we_experience_app, we_park_app, we_upgrade_app, weatherSunAppIcon, weather_sun_app, wheelToWheelIcon, wheel_to_wheel, windscreenWashIcon, windscreen_wash, wlanHotspotIcon, wlan_hotspot, wrenchForwardIcon };
 //# sourceMappingURL=clr-addons.mjs.map