@porscheinformatik/clr-addons 19.17.0 → 19.18.1

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, ChangeDetectorRef, NgZone, Injector, untracked, runInInjectionContext } from '@angular/core';
 import * as i1 from '@angular/common';
-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 { 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 * 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, ClrAlertModule, ClrStartDateInput, ClrEndDateInput, 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, 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, map as map$2, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs/operators';
+import { takeUntil, take, observeOn, filter as filter$1, debounceTime } 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,6 @@ 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 { 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';
 
@@ -15603,2485 +15601,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * 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.
- */
-
-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 + '...';
-    }
-}
-
-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-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.
- */
-/**
- * Abstract base class shared by all chart components.
- * ...
- */
-class ChartBase {
-    constructor() {
-        // ── 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());
-    }
-    // ── Common Implementations ─────────────────────────────────────────────────
-    /** Returns the pixel dimensions of the container div. */
-    getContainerDimensions() {
-        const el = this.containerRef().nativeElement;
-        return { width: el.clientWidth, height: el.clientHeight };
-    }
-    /**
-     * 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: 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: ChartBase, decorators: [{
-            type: Directive
-        }] });
-
-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;
-        });
-    }
-    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);
-    }
-    export(format) {
-        const svg = this.svgRef();
-        if (!svg) {
-            return;
-        }
-        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.
@@ -18127,8 +15646,7 @@ class ClrAddonsModule {
             ClrDatagridColumnReorderModule,
             ClrSignpostAddonModule,
             ClrFocusFirstInvalidFieldDirective,
-            ClrControlEnterSubmitDirective,
-            ClrChartsModule] }); }
+            ClrControlEnterSubmitDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ClrAddonsModule, imports: [ClrViewEditSectionModule,
             ClrPagerModule,
             ClrDotPagerModule,
@@ -18165,8 +15683,7 @@ class ClrAddonsModule {
             ClrActionPanelModule,
             ClrReadonlyDirectiveModule,
             ClrDatagridColumnReorderModule,
-            ClrSignpostAddonModule,
-            ClrChartsModule] }); }
+            ClrSignpostAddonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ClrAddonsModule, decorators: [{
             type: NgModule,
@@ -18213,7 +15730,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         ClrSignpostAddonModule,
                         ClrFocusFirstInvalidFieldDirective,
                         ClrControlEnterSubmitDirective,
-                        ClrChartsModule,
                     ],
                 }]
         }] });
@@ -19475,5 +16991,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-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 };
+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, 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, 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 };
 //# sourceMappingURL=clr-addons.mjs.map