@porscheinformatik/clr-addons 19.21.1 → 21.0.0

package/types/porscheinformatik-clr-addons-charts.d.ts

@@ -0,0 +1,601 @@
+import * as _angular_core from '@angular/core';
+import { AfterViewInit, ElementRef, OnChanges, SimpleChanges, OnInit } from '@angular/core';
+import * as i7 from '@angular/common';
+import * as i8 from '@clr/angular';
+
+/**
+ * A single data point on an XY chart (line, area).
+ * `x` is used as the category key; `xLabel` is the optional display label for the axis tick.
+ */
+interface XYChartPoint {
+    /** Unique key used as the X-axis category. */
+    x: string;
+    /** Optional display label for the X-axis tick (defaults to `x`). */
+    xLabel?: string;
+    /** Y value. */
+    value: number;
+}
+/**
+ * A named data series for an XY chart.
+ */
+interface XYChartSeries {
+    /** Unique identifier. */
+    key: string;
+    /** Display name shown in the legend and tooltip. */
+    label: string;
+    /** Line / area / dot colour. Accepts hex or CSS custom property. */
+    color: string;
+    /** Ordered data points for this series. */
+    data: XYChartPoint[];
+}
+/**
+ * Emitted when the user clicks a data point on an XY chart.
+ */
+interface XYChartValue {
+    seriesKey: string;
+    seriesLabel: string;
+    x: string;
+    xLabel?: string;
+    value: number;
+}
+
+/**
+ * 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
+ */
+declare function toChartColor(color: string | undefined): string;
+
+interface ChartLegendItem {
+    label: string;
+    color: string;
+}
+declare class ChartLegendComponent {
+    readonly items: _angular_core.InputSignal<ChartLegendItem[]>;
+    protected readonly toChartColor: typeof toChartColor;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChartLegendComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChartLegendComponent, "cng-chart-legend", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Abstract base class shared by all chart components.
+ * ...
+ */
+declare abstract class ChartBase<TSelected = unknown> implements AfterViewInit {
+    /** Whether the chart is in loading state (shows skeleton). */
+    readonly loading: _angular_core.InputSignal<boolean>;
+    /** Reference to the `<svg #chart>` element in the component template. */
+    protected readonly chartRef: _angular_core.Signal<ElementRef<any>>;
+    /** Reference to the `<div #container>` host element in the component template. */
+    protected readonly containerRef: _angular_core.Signal<ElementRef<any>>;
+    /** Exposes the raw SVG element for the chart-export button. */
+    readonly svgElement: _angular_core.Signal<SVGSVGElement>;
+    protected readonly selectedItem: _angular_core.WritableSignal<TSelected>;
+    protected readonly tooltipPosition: _angular_core.WritableSignal<{
+        x: number;
+        y: number;
+    }>;
+    /** Schedules the first render after the view is ready. */
+    ngAfterViewInit(): void;
+    /** Each chart implements its own D3 rendering logic here. */
+    protected abstract updateChart(): void;
+    /** Returns the pixel dimensions of the container div. */
+    protected getContainerDimensions(): {
+        width: number;
+        height: number;
+    };
+    /**
+     * Clears the active tooltip.  Override in subclasses that have additional
+     * selection state
+     */
+    resetTooltip(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChartBase<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ChartBase<any>, never, never, { "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface BarChartData {
+    key: string;
+    label: string;
+    fullLabel?: string;
+    value: number;
+    color?: string;
+    stackKey?: string;
+}
+interface BarChartValue {
+    key: string[];
+    label: string;
+    value: number;
+}
+type BarChartDataPoint = BarChartData & {
+    stackValue0: number;
+    stackValue1: number;
+    percentageOfStack: number;
+};
+type BarChartLabel = {
+    stackKey: string;
+    label: string;
+};
+declare class BarChartComponent extends ChartBase<BarChartDataPoint> implements OnChanges {
+    readonly data: _angular_core.InputSignal<BarChartData[]>;
+    readonly stacks: _angular_core.InputSignal<BarChartLabel[]>;
+    readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
+    readonly tooltipOrientation: _angular_core.InputSignal<"top" | "bottom">;
+    readonly barSizePx: _angular_core.InputSignal<number>;
+    readonly barAreaSizePx: _angular_core.InputSignal<number>;
+    readonly tooltipPercentOfTotal: _angular_core.InputSignal<string>;
+    readonly tooltipPercentOf: _angular_core.InputSignal<string>;
+    readonly noItemsMessage: _angular_core.InputSignal<string>;
+    readonly tooManyItemsMessage: _angular_core.InputSignal<string>;
+    readonly tooManyItemsGroupedMessage: _angular_core.InputSignal<string>;
+    readonly showLegend: _angular_core.InputSignal<boolean>;
+    readonly showExportButton: _angular_core.InputSignal<boolean>;
+    readonly exportButtonTitle: _angular_core.InputSignal<string>;
+    readonly exportFilename: _angular_core.InputSignal<string>;
+    /** Optional label rendered below the X axis. */
+    readonly xAxisLabel: _angular_core.InputSignal<string>;
+    /** Optional label rendered rotated to the left of the Y axis. */
+    readonly yAxisLabel: _angular_core.InputSignal<string>;
+    readonly valueClicked: _angular_core.OutputEmitterRef<BarChartValue>;
+    private readonly textRenderer;
+    private readonly MARGIN;
+    private static readonly HORIZONTAL_BAR_MIN_HEIGHT_PX;
+    protected readonly toChartColor: typeof toChartColor;
+    protected readonly total: _angular_core.Signal<number>;
+    protected readonly totalByStack: _angular_core.Signal<Record<string, number>>;
+    protected readonly keysByStack: _angular_core.Signal<Record<string, string[]>>;
+    protected readonly totalBarCount: _angular_core.Signal<number>;
+    protected readonly showingBarCount: _angular_core.Signal<number>;
+    readonly alertMessageAndType: _angular_core.Signal<[string, string]>;
+    readonly legendItems: _angular_core.Signal<ChartLegendItem[]>;
+    /** Computed values used by the tooltip to avoid inline logic in the template. */
+    protected readonly tooltipKey: _angular_core.Signal<string[]>;
+    protected readonly tooltipLabel: _angular_core.Signal<string>;
+    protected readonly tooltipValue: _angular_core.Signal<number>;
+    /** Slices belonging to the currently selected stack – used by the tooltip @for loop. */
+    protected readonly selectedStackSlices: _angular_core.Signal<BarChartDataPoint[]>;
+    private readonly maxAmountOfItems;
+    private readonly slicedDataPoints;
+    private svg;
+    private barSelection;
+    private labelSelection;
+    constructor();
+    ngOnChanges(_changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
+    private createChart;
+    protected updateChart(): void;
+    private createVerticalChart;
+    private createHorizontalChart;
+    private createBarSelectionGroups;
+    private addTextCommonInfo;
+    private addTextHoverHandlers;
+    private setHoverStylesByStackKey;
+    private addBarClickHandler;
+    private addTextClickHandler;
+    private openTooltipByKey;
+    private addTextAndTitle;
+    private styleGridLines;
+    private addVerticalBarRectangle;
+    private addHorizontalBarRectangle;
+    /** Appends a shared-style axis description label to the chart group. */
+    private appendAxisLabel;
+    private stackItems;
+    private mapItems;
+    private getMaxAmountOfItems;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BarChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BarChartComponent, "clr-bar-chart", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "stacks": { "alias": "stacks"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": true; "isSignal": true; }; "tooltipOrientation": { "alias": "tooltipOrientation"; "required": false; "isSignal": true; }; "barSizePx": { "alias": "barSizePx"; "required": false; "isSignal": true; }; "barAreaSizePx": { "alias": "barAreaSizePx"; "required": false; "isSignal": true; }; "tooltipPercentOfTotal": { "alias": "tooltipPercentOfTotal"; "required": false; "isSignal": true; }; "tooltipPercentOf": { "alias": "tooltipPercentOf"; "required": false; "isSignal": true; }; "noItemsMessage": { "alias": "noItemsMessage"; "required": false; "isSignal": true; }; "tooManyItemsMessage": { "alias": "tooManyItemsMessage"; "required": false; "isSignal": true; }; "tooManyItemsGroupedMessage": { "alias": "tooManyItemsGroupedMessage"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showExportButton": { "alias": "showExportButton"; "required": false; "isSignal": true; }; "exportButtonTitle": { "alias": "exportButtonTitle"; "required": false; "isSignal": true; }; "exportFilename": { "alias": "exportFilename"; "required": false; "isSignal": true; }; "xAxisLabel": { "alias": "xAxisLabel"; "required": false; "isSignal": true; }; "yAxisLabel": { "alias": "yAxisLabel"; "required": false; "isSignal": true; }; }, { "valueClicked": "valueClicked"; }, never, never, false, never>;
+}
+
+type LineChartSelectedPoint = XYChartPoint & {
+    seriesKey: string;
+    seriesLabel: string;
+    color: string;
+};
+declare class LineChartComponent extends ChartBase<LineChartSelectedPoint> implements OnChanges {
+    readonly series: _angular_core.InputSignal<XYChartSeries[]>;
+    readonly tooltipOrientation: _angular_core.InputSignal<"top" | "bottom">;
+    readonly showArea: _angular_core.InputSignal<boolean>;
+    readonly showLegend: _angular_core.InputSignal<boolean>;
+    readonly showValues: _angular_core.InputSignal<boolean>;
+    readonly showExportButton: _angular_core.InputSignal<boolean>;
+    readonly exportButtonTitle: _angular_core.InputSignal<string>;
+    readonly exportFilename: _angular_core.InputSignal<string>;
+    readonly noItemsMessage: _angular_core.InputSignal<string>;
+    readonly tooltipPercentOfTotal: _angular_core.InputSignal<string>;
+    /** Optional label rendered below the X axis. */
+    readonly xAxisLabel: _angular_core.InputSignal<string>;
+    /** Optional label rendered rotated to the left of the Y axis. */
+    readonly yAxisLabel: _angular_core.InputSignal<string>;
+    readonly yMin: _angular_core.InputSignal<number>;
+    readonly autoscaleYAxis: _angular_core.InputSignal<boolean>;
+    readonly valueClicked: _angular_core.OutputEmitterRef<XYChartValue>;
+    private readonly MARGIN;
+    protected readonly hasData: _angular_core.Signal<boolean>;
+    protected readonly total: _angular_core.Signal<number>;
+    readonly alertMessageAndType: _angular_core.Signal<[string, string]>;
+    readonly legendItems: _angular_core.Signal<ChartLegendItem[]>;
+    private svg;
+    ngOnChanges(_changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
+    protected updateChart(): void;
+    private drawSeries;
+    private openTooltip;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LineChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LineChartComponent, "clr-line-chart", never, { "series": { "alias": "series"; "required": true; "isSignal": true; }; "tooltipOrientation": { "alias": "tooltipOrientation"; "required": false; "isSignal": true; }; "showArea": { "alias": "showArea"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showValues": { "alias": "showValues"; "required": false; "isSignal": true; }; "showExportButton": { "alias": "showExportButton"; "required": false; "isSignal": true; }; "exportButtonTitle": { "alias": "exportButtonTitle"; "required": false; "isSignal": true; }; "exportFilename": { "alias": "exportFilename"; "required": false; "isSignal": true; }; "noItemsMessage": { "alias": "noItemsMessage"; "required": false; "isSignal": true; }; "tooltipPercentOfTotal": { "alias": "tooltipPercentOfTotal"; "required": false; "isSignal": true; }; "xAxisLabel": { "alias": "xAxisLabel"; "required": false; "isSignal": true; }; "yAxisLabel": { "alias": "yAxisLabel"; "required": false; "isSignal": true; }; "yMin": { "alias": "yMin"; "required": false; "isSignal": true; }; "autoscaleYAxis": { "alias": "autoscaleYAxis"; "required": false; "isSignal": true; }; }, { "valueClicked": "valueClicked"; }, never, never, false, never>;
+}
+
+type AreaChartSelectedPoint = XYChartPoint & {
+    seriesKey: string;
+    seriesLabel: string;
+    color: string;
+};
+declare class AreaChartComponent extends ChartBase<AreaChartSelectedPoint> implements OnChanges {
+    readonly series: _angular_core.InputSignal<XYChartSeries[]>;
+    readonly tooltipOrientation: _angular_core.InputSignal<"top" | "bottom">;
+    readonly showLegend: _angular_core.InputSignal<boolean>;
+    readonly showExportButton: _angular_core.InputSignal<boolean>;
+    readonly exportButtonTitle: _angular_core.InputSignal<string>;
+    readonly exportFilename: _angular_core.InputSignal<string>;
+    /** Area fill opacity (0–1). Default: 0.2. */
+    readonly areaOpacity: _angular_core.InputSignal<number>;
+    readonly noItemsMessage: _angular_core.InputSignal<string>;
+    readonly tooltipPercentOfTotal: _angular_core.InputSignal<string>;
+    /** Optional label rendered below the X axis. */
+    readonly xAxisLabel: _angular_core.InputSignal<string>;
+    /** Optional label rendered rotated to the left of the Y axis. */
+    readonly yAxisLabel: _angular_core.InputSignal<string>;
+    readonly valueClicked: _angular_core.OutputEmitterRef<XYChartValue>;
+    private readonly MARGIN;
+    protected readonly hasData: _angular_core.Signal<boolean>;
+    protected readonly total: _angular_core.Signal<number>;
+    readonly alertMessageAndType: _angular_core.Signal<[string, string]>;
+    readonly legendItems: _angular_core.Signal<ChartLegendItem[]>;
+    private svg;
+    ngOnChanges(_changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
+    protected updateChart(): void;
+    private drawSeries;
+    private openTooltip;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AreaChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AreaChartComponent, "clr-area-chart", never, { "series": { "alias": "series"; "required": true; "isSignal": true; }; "tooltipOrientation": { "alias": "tooltipOrientation"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showExportButton": { "alias": "showExportButton"; "required": false; "isSignal": true; }; "exportButtonTitle": { "alias": "exportButtonTitle"; "required": false; "isSignal": true; }; "exportFilename": { "alias": "exportFilename"; "required": false; "isSignal": true; }; "areaOpacity": { "alias": "areaOpacity"; "required": false; "isSignal": true; }; "noItemsMessage": { "alias": "noItemsMessage"; "required": false; "isSignal": true; }; "tooltipPercentOfTotal": { "alias": "tooltipPercentOfTotal"; "required": false; "isSignal": true; }; "xAxisLabel": { "alias": "xAxisLabel"; "required": false; "isSignal": true; }; "yAxisLabel": { "alias": "yAxisLabel"; "required": false; "isSignal": true; }; }, { "valueClicked": "valueClicked"; }, never, never, false, never>;
+}
+
+interface ComboBarPoint {
+    /** X category key (must match keys used in line data). */
+    x: string;
+    /** Optional display label for the X-axis tick. */
+    xLabel?: string;
+    value: number;
+}
+interface ComboBarSeries {
+    key: string;
+    label: string;
+    color: string;
+    data: ComboBarPoint[];
+}
+interface ComboLinePoint {
+    x: string;
+    value: number;
+}
+interface ComboLineSeries {
+    key: string;
+    label: string;
+    color: string;
+    data: ComboLinePoint[];
+}
+/** Emitted when the user clicks a bar segment or a line dot. */
+interface ComboChartValue {
+    seriesKey: string;
+    seriesLabel: string;
+    seriesType: 'bar' | 'line';
+    x: string;
+    xLabel?: string;
+    value: number;
+}
+interface SelectedComboItem {
+    seriesKey: string;
+    seriesLabel: string;
+    seriesType: 'bar' | 'line';
+    color: string;
+    x: string;
+    xLabel?: string;
+    value: number;
+    total: number;
+}
+declare class ComboChartComponent extends ChartBase<SelectedComboItem> implements OnChanges {
+    readonly barSeries: _angular_core.InputSignal<ComboBarSeries[]>;
+    readonly lineSeries: _angular_core.InputSignal<ComboLineSeries[]>;
+    readonly tooltipOrientation: _angular_core.InputSignal<"top" | "bottom">;
+    readonly showLegend: _angular_core.InputSignal<boolean>;
+    readonly showExportButton: _angular_core.InputSignal<boolean>;
+    readonly exportButtonTitle: _angular_core.InputSignal<string>;
+    readonly exportFilename: _angular_core.InputSignal<string>;
+    readonly noItemsMessage: _angular_core.InputSignal<string>;
+    readonly tooltipPercentOfTotal: _angular_core.InputSignal<string>;
+    /** Optional label rendered below the X axis. */
+    readonly xAxisLabel: _angular_core.InputSignal<string>;
+    /** Optional label rendered rotated to the left of the Y axis (bar scale). */
+    readonly yAxisLabel: _angular_core.InputSignal<string>;
+    /** Optional label rendered rotated to the right of the Y axis (line scale). */
+    readonly yLineAxisLabel: _angular_core.InputSignal<string>;
+    /** Optional fixed maximum value for the bar Y axis (left). Defaults to auto. */
+    readonly yBarMax: _angular_core.InputSignal<number>;
+    /** Optional fixed maximum value for the line Y axis (right). Defaults to auto. */
+    readonly yLineMax: _angular_core.InputSignal<number>;
+    readonly valueClicked: _angular_core.OutputEmitterRef<ComboChartValue>;
+    private readonly MARGIN;
+    protected readonly hasData: _angular_core.Signal<boolean>;
+    protected readonly total: _angular_core.Signal<number>;
+    readonly alertMessageAndType: _angular_core.Signal<[string, string]>;
+    readonly legendItems: _angular_core.Signal<ChartLegendItem[]>;
+    private svg;
+    private _clipIdCounter;
+    ngOnChanges(_changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
+    protected updateChart(): void;
+    private drawBars;
+    private drawLines;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ComboChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ComboChartComponent, "clr-combo-chart", never, { "barSeries": { "alias": "barSeries"; "required": false; "isSignal": true; }; "lineSeries": { "alias": "lineSeries"; "required": false; "isSignal": true; }; "tooltipOrientation": { "alias": "tooltipOrientation"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showExportButton": { "alias": "showExportButton"; "required": false; "isSignal": true; }; "exportButtonTitle": { "alias": "exportButtonTitle"; "required": false; "isSignal": true; }; "exportFilename": { "alias": "exportFilename"; "required": false; "isSignal": true; }; "noItemsMessage": { "alias": "noItemsMessage"; "required": false; "isSignal": true; }; "tooltipPercentOfTotal": { "alias": "tooltipPercentOfTotal"; "required": false; "isSignal": true; }; "xAxisLabel": { "alias": "xAxisLabel"; "required": false; "isSignal": true; }; "yAxisLabel": { "alias": "yAxisLabel"; "required": false; "isSignal": true; }; "yLineAxisLabel": { "alias": "yLineAxisLabel"; "required": false; "isSignal": true; }; "yBarMax": { "alias": "yBarMax"; "required": false; "isSignal": true; }; "yLineMax": { "alias": "yLineMax"; "required": false; "isSignal": true; }; }, { "valueClicked": "valueClicked"; }, never, never, false, never>;
+}
+
+interface PieChartData {
+    key: string;
+    label: string;
+    fullLabel?: string;
+    value: number;
+    color: string;
+}
+interface PieChartValue {
+    key: string;
+    label: string;
+    value: number;
+}
+declare class PieChartComponent extends ChartBase<PieChartData> implements OnChanges {
+    readonly data: _angular_core.InputSignal<PieChartData[]>;
+    readonly donut: _angular_core.InputSignal<boolean>;
+    readonly showLegend: _angular_core.InputSignal<boolean>;
+    readonly showExportButton: _angular_core.InputSignal<boolean>;
+    readonly exportButtonTitle: _angular_core.InputSignal<string>;
+    readonly exportFilename: _angular_core.InputSignal<string>;
+    readonly tooltipOrientation: _angular_core.InputSignal<"top" | "bottom">;
+    readonly noItemsMessage: _angular_core.InputSignal<string>;
+    readonly tooltipPercentOfTotal: _angular_core.InputSignal<string>;
+    readonly valueClicked: _angular_core.OutputEmitterRef<PieChartValue>;
+    protected readonly hasData: _angular_core.Signal<boolean>;
+    protected readonly total: _angular_core.Signal<number>;
+    readonly alertMessageAndType: _angular_core.Signal<[string, string]>;
+    readonly legendItems: _angular_core.Signal<ChartLegendItem[]>;
+    private svg;
+    private arcGen;
+    ngOnChanges(_changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
+    protected updateChart(): void;
+    private openTooltip;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PieChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PieChartComponent, "clr-pie-chart", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "donut": { "alias": "donut"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showExportButton": { "alias": "showExportButton"; "required": false; "isSignal": true; }; "exportButtonTitle": { "alias": "exportButtonTitle"; "required": false; "isSignal": true; }; "exportFilename": { "alias": "exportFilename"; "required": false; "isSignal": true; }; "tooltipOrientation": { "alias": "tooltipOrientation"; "required": false; "isSignal": true; }; "noItemsMessage": { "alias": "noItemsMessage"; "required": false; "isSignal": true; }; "tooltipPercentOfTotal": { "alias": "tooltipPercentOfTotal"; "required": false; "isSignal": true; }; }, { "valueClicked": "valueClicked"; }, never, never, false, never>;
+}
+
+interface FunnelChartSection {
+    key: string;
+    label: string;
+    value: number;
+    /** Hex value ('#009ADB') or CSS custom property ('--cds-global-color-blue-800'). */
+    color?: string;
+    /** Text color rendered inside this section. */
+    textColor?: string;
+}
+interface FunnelChartData {
+    key: string;
+    label: string;
+    fullLabel?: string;
+    description?: string;
+    value: number;
+    /** Optional breakdown of the bar into named segments. Values should sum to `value`. */
+    sections?: FunnelChartSection[];
+}
+interface FunnelValue {
+    value: number;
+    label: string;
+    key: string;
+    /** Key of the clicked section, or `undefined` when the whole bar was clicked. */
+    section?: string;
+}
+interface FunnelChartLabels {
+    total: string;
+    all: string;
+}
+interface FunnelDataPointSection {
+    key: string;
+    label: string;
+    x: number;
+    width: number;
+    value: number;
+    percentage: number;
+    cssColor: string;
+    hoverColor: string;
+    textColor: string;
+}
+interface FunnelDataPoint {
+    key: string;
+    label: string;
+    fullLabel?: string;
+    description?: string;
+    value: number;
+    y: number;
+    width: number;
+    percentage: number;
+    delta?: number;
+    deltaPercentage?: number;
+    sections: FunnelDataPointSection[];
+}
+interface SectionTooltipData {
+    key: string;
+    x?: number;
+    y?: number;
+    description?: string;
+}
+interface SpacerDataPoint {
+    index: number;
+    topWidth: number;
+    bottomWidth: number;
+    topY: number;
+    bottomY: number;
+    topX: number;
+    bottomX: number;
+    deltaPercentage: number;
+}
+declare class FunnelChartComponent extends ChartBase<FunnelDataPoint> implements OnChanges {
+    readonly data: _angular_core.InputSignal<FunnelChartData[]>;
+    readonly showExportButton: _angular_core.InputSignal<boolean>;
+    readonly exportButtonTitle: _angular_core.InputSignal<string>;
+    readonly exportFilename: _angular_core.InputSignal<string>;
+    /** Rendering mode. 'default' = horizontal bars with sections; 'centered' = centered trapezoid funnel. */
+    readonly orientation: _angular_core.InputSignal<"default" | "centered">;
+    /** Width reserved on each side for labels (px). */
+    readonly textSize: _angular_core.InputSignal<number>;
+    /** Gap between funnel bars and their side-line labels (px). */
+    readonly lineTextPadding: _angular_core.InputSignal<number>;
+    /** Vertical gap between funnel bars – default mode only (px). */
+    readonly barGap: _angular_core.InputSignal<number>;
+    /** Vertical padding inside the side measurement lines (px). */
+    readonly sideLineVerticalPadding: _angular_core.InputSignal<number>;
+    /** Minimum length of the horizontal measurement lines on each side (px). Centered mode only. */
+    readonly minLineSize: _angular_core.InputSignal<number>;
+    /** Ratio of bar height to spacer height. Centered mode only. */
+    readonly barToSpacerRatio: _angular_core.InputSignal<number>;
+    /** Vertical padding inside the center divider lines (px). Centered mode only. */
+    readonly middleLineVerticalPadding: _angular_core.InputSignal<number>;
+    /** Fill color of the centered-mode bars. Accepts hex or CSS custom property. Centered mode only. */
+    readonly barColor: _angular_core.InputSignal<string>;
+    /** Fill color of the trapezoid spacers. Accepts hex or CSS custom property. Centered mode only. */
+    readonly spacerColor: _angular_core.InputSignal<string>;
+    /**
+     * Override the chart labels shown in the tooltip (total / all rows).
+     * Partial – any key not provided falls back to the English default.
+     */
+    readonly chartLabels: _angular_core.InputSignal<Partial<FunnelChartLabels>>;
+    /**
+     * 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.
+     */
+    readonly sectionColors: _angular_core.InputSignal<Record<string, string>>;
+    readonly valueClicked: _angular_core.OutputEmitterRef<FunnelValue>;
+    protected readonly resolvedChartLabels: _angular_core.Signal<FunnelChartLabels>;
+    /** CSS-ready color for the centered-mode bar. */
+    protected readonly centeredBarCssColor: _angular_core.Signal<string>;
+    /** CSS-ready spacer color. */
+    protected readonly centeredSpacerCssColor: _angular_core.Signal<string>;
+    protected readonly total: _angular_core.Signal<number>;
+    protected readonly hasData: _angular_core.Signal<boolean>;
+    protected readonly selectedItemLabel: _angular_core.Signal<string>;
+    protected readonly selectedSpacerItem: _angular_core.WritableSignal<SpacerDataPoint>;
+    protected readonly sectionTooltips: _angular_core.WritableSignal<SectionTooltipData[]>;
+    private svg;
+    ngOnChanges(_changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
+    protected updateChart(): void;
+    private calculateDataPoints;
+    private renderRightSideText;
+    private renderLeftSideText;
+    private renderSideLines;
+    private renderSideLine;
+    private renderFunnel;
+    private handleSectionClick;
+    resetTooltip(): void;
+    /** Formats a percentage to 2 decimal places for template use. */
+    protected pct(value: number, total: number): number;
+    private renderCenteredChart;
+    private calculateCenteredDataPoints;
+    private calculateSpacerDataPoints;
+    private renderCenteredLeftSideText;
+    private renderCenteredLeftSideLines;
+    private renderCenteredRightSideText;
+    private renderCenteredRightSideLines;
+    private renderCenteredMiddleLines;
+    private renderCenteredFunnel;
+    private getMaxFunnelWidth;
+    private getCenteredFractionHeight;
+    private getCenteredBarHeight;
+    private getCenteredSpacerHeight;
+    private getFunnelWidth;
+    private getBarHeight;
+    private round;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FunnelChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FunnelChartComponent, "clr-funnel-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "showExportButton": { "alias": "showExportButton"; "required": false; "isSignal": true; }; "exportButtonTitle": { "alias": "exportButtonTitle"; "required": false; "isSignal": true; }; "exportFilename": { "alias": "exportFilename"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "textSize": { "alias": "textSize"; "required": false; "isSignal": true; }; "lineTextPadding": { "alias": "lineTextPadding"; "required": false; "isSignal": true; }; "barGap": { "alias": "barGap"; "required": false; "isSignal": true; }; "sideLineVerticalPadding": { "alias": "sideLineVerticalPadding"; "required": false; "isSignal": true; }; "minLineSize": { "alias": "minLineSize"; "required": false; "isSignal": true; }; "barToSpacerRatio": { "alias": "barToSpacerRatio"; "required": false; "isSignal": true; }; "middleLineVerticalPadding": { "alias": "middleLineVerticalPadding"; "required": false; "isSignal": true; }; "barColor": { "alias": "barColor"; "required": false; "isSignal": true; }; "spacerColor": { "alias": "spacerColor"; "required": false; "isSignal": true; }; "chartLabels": { "alias": "chartLabels"; "required": false; "isSignal": true; }; "sectionColors": { "alias": "sectionColors"; "required": false; "isSignal": true; }; }, { "valueClicked": "valueClicked"; }, never, never, false, never>;
+}
+
+declare class ChartAlertOverlayComponent {
+    readonly alertMessage: _angular_core.InputSignal<string>;
+    readonly alertType: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChartAlertOverlayComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChartAlertOverlayComponent, "cng-chart-alert-overlay", never, { "alertMessage": { "alias": "alertMessage"; "required": true; "isSignal": true; }; "alertType": { "alias": "alertType"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class ChartExportButtonComponent {
+    readonly svgRef: _angular_core.InputSignal<SVGSVGElement>;
+    readonly filename: _angular_core.InputSignal<string>;
+    readonly buttonTitle: _angular_core.InputSignal<string>;
+    /** Legend items to include below the chart in the exported file. */
+    readonly legendItems: _angular_core.InputSignal<ChartLegendItem[]>;
+    private readonly exportService;
+    export(format: 'svg' | 'png'): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChartExportButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChartExportButtonComponent, "cng-chart-export-button", never, { "svgRef": { "alias": "svgRef"; "required": false; "isSignal": true; }; "filename": { "alias": "filename"; "required": false; "isSignal": true; }; "buttonTitle": { "alias": "buttonTitle"; "required": false; "isSignal": true; }; "legendItems": { "alias": "legendItems"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class ChartSkeletonComponent {
+    readonly skeletonType: _angular_core.InputSignal<"loading" | "placeholder">;
+    readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
+    protected readonly animationStyle: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChartSkeletonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChartSkeletonComponent, "cng-bar-chart-skeleton", never, { "skeletonType": { "alias": "skeletonType"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class ChartTooltipComponent {
+    readonly tooltipPosition: _angular_core.InputSignal<{
+        x: number;
+        y: number;
+    }>;
+    readonly tooltipOrientation: _angular_core.InputSignal<"top" | "bottom">;
+    readonly squareColor: _angular_core.InputSignal<string>;
+    readonly tooltipClickable: _angular_core.InputSignal<boolean>;
+    readonly tooltipClosed: _angular_core.OutputEmitterRef<void>;
+    readonly tooltipHeaderClicked: _angular_core.OutputEmitterRef<void>;
+    protected readonly toChartColor: typeof toChartColor;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChartTooltipComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChartTooltipComponent, "cng-chart-tooltip", never, { "tooltipPosition": { "alias": "tooltipPosition"; "required": true; "isSignal": true; }; "tooltipOrientation": { "alias": "tooltipOrientation"; "required": false; "isSignal": true; }; "squareColor": { "alias": "squareColor"; "required": true; "isSignal": true; }; "tooltipClickable": { "alias": "tooltipClickable"; "required": false; "isSignal": true; }; }, { "tooltipClosed": "tooltipClosed"; "tooltipHeaderClicked": "tooltipHeaderClicked"; }, never, ["cng-title", "*", "cng-footer"], true, never>;
+}
+
+declare class OutsideClickDirective implements AfterViewInit {
+    readonly outsideClick: _angular_core.OutputEmitterRef<void>;
+    private readonly renderer;
+    private readonly destroyRef;
+    ngAfterViewInit(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OutsideClickDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<OutsideClickDirective, "[cngOutsideClick]", never, {}, { "outsideClick": "cngOutsideClick"; }, never, never, true, never>;
+}
+
+declare class WindowResizeDirective implements OnInit {
+    readonly debounce: _angular_core.InputSignal<number>;
+    readonly includeFirst: _angular_core.InputSignal<boolean>;
+    readonly windowResize: _angular_core.OutputEmitterRef<number>;
+    private readonly screenStateService;
+    private readonly destroyRef;
+    ngOnInit(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WindowResizeDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WindowResizeDirective, "[cngWindowResize]", never, { "debounce": { "alias": "debounce"; "required": false; "isSignal": true; }; "includeFirst": { "alias": "includeFirst"; "required": false; "isSignal": true; }; }, { "windowResize": "cngWindowResize"; }, never, never, true, never>;
+}
+
+declare class ClrChartsModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClrChartsModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<ClrChartsModule, [typeof AreaChartComponent, typeof BarChartComponent, typeof ComboChartComponent, typeof FunnelChartComponent, typeof LineChartComponent, typeof PieChartComponent], [typeof i7.CommonModule, typeof i7.DecimalPipe, typeof i8.ClrAlertModule, typeof i8.ClrIcon, typeof i8.ClrSignpostModule, typeof ChartAlertOverlayComponent, typeof ChartExportButtonComponent, typeof ChartLegendComponent, typeof ChartSkeletonComponent, typeof ChartTooltipComponent, typeof OutsideClickDirective, typeof WindowResizeDirective], [typeof AreaChartComponent, typeof BarChartComponent, typeof ComboChartComponent, typeof FunnelChartComponent, typeof LineChartComponent, typeof PieChartComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<ClrChartsModule>;
+}
+
+export { AreaChartComponent, BarChartComponent, ClrChartsModule, ComboChartComponent, FunnelChartComponent, LineChartComponent, PieChartComponent };
+export type { XYChartPoint as AreaChartPoint, XYChartSeries as AreaChartSeries, XYChartValue as AreaChartValue, BarChartData, BarChartLabel, BarChartValue, ComboBarPoint, ComboBarSeries, ComboChartValue, ComboLinePoint, ComboLineSeries, FunnelChartData, FunnelChartLabels, FunnelChartSection, FunnelValue, XYChartPoint as LineChartPoint, XYChartSeries as LineChartSeries, XYChartValue as LineChartValue, PieChartData, PieChartValue, XYChartPoint, XYChartSeries, XYChartValue };