@porscheinformatik/clr-addons 19.18.0 → 19.18.2

package/charts/area-chart/area-chart.component.d.ts

@@ -14,6 +14,7 @@ export declare class AreaChartComponent extends ChartBase<AreaChartSelectedPoint
     readonly tooltipOrientation: import("@angular/core").InputSignal<"top" | "bottom">;
     readonly showLegend: import("@angular/core").InputSignal<boolean>;
     readonly showExportButton: import("@angular/core").InputSignal<boolean>;
+    readonly exportButtonTitle: import("@angular/core").InputSignal<string>;
     readonly exportFilename: import("@angular/core").InputSignal<string>;
     /** Area fill opacity (0–1). Default: 0.2. */
     readonly areaOpacity: import("@angular/core").InputSignal<number>;
@@ -36,5 +37,5 @@ export declare class AreaChartComponent extends ChartBase<AreaChartSelectedPoint
     private drawSeries;
     private openTooltip;
     static ɵfac: i0.ɵɵFactoryDeclaration<AreaChartComponent, never>;
-    static ɵcmp: i0.ɵɵ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; }; "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>;
+    static ɵcmp: i0.ɵɵ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>;
 }

package/charts/bar-chart/bar-chart.component.d.ts

@@ -21,9 +21,13 @@ type BarChartDataPoint = BarChartData & {
     stackValue1: number;
     percentageOfStack: number;
 };
+export type BarChartLabel = {
+    stackKey: string;
+    label: string;
+};
 export declare class BarChartComponent extends ChartBase<BarChartDataPoint> implements OnChanges {
     readonly data: import("@angular/core").InputSignal<BarChartData[]>;
-    readonly stackLabels: import("@angular/core").InputSignal<string[]>;
+    readonly stacks: import("@angular/core").InputSignal<BarChartLabel[]>;
     readonly orientation: import("@angular/core").InputSignal<"horizontal" | "vertical">;
     readonly tooltipOrientation: import("@angular/core").InputSignal<"top" | "bottom">;
     readonly barSizePx: import("@angular/core").InputSignal<number>;
@@ -35,6 +39,7 @@ export declare class BarChartComponent extends ChartBase<BarChartDataPoint> impl
     readonly tooManyItemsGroupedMessage: import("@angular/core").InputSignal<string>;
     readonly showLegend: import("@angular/core").InputSignal<boolean>;
     readonly showExportButton: import("@angular/core").InputSignal<boolean>;
+    readonly exportButtonTitle: import("@angular/core").InputSignal<string>;
     readonly exportFilename: import("@angular/core").InputSignal<string>;
     /** Optional label rendered below the X axis. */
     readonly xAxisLabel: import("@angular/core").InputSignal<string>;
@@ -87,6 +92,6 @@ export declare class BarChartComponent extends ChartBase<BarChartDataPoint> impl
     private mapItems;
     private getMaxAmountOfItems;
     static ɵfac: i0.ɵɵFactoryDeclaration<BarChartComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BarChartComponent, "clr-bar-chart", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "stackLabels": { "alias": "stackLabels"; "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; }; "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>;
+    static ɵcmp: i0.ɵɵ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>;
 }
 export {};

package/charts/chart-export/chart-export-button.component.d.ts

@@ -1,9 +1,13 @@
+import { ChartLegendItem } from '../chart-legend/chart-legend.component';
 import * as i0 from "@angular/core";
 export declare class ChartExportButtonComponent {
     readonly svgRef: import("@angular/core").InputSignal<SVGSVGElement>;
     readonly filename: import("@angular/core").InputSignal<string>;
+    readonly buttonTitle: import("@angular/core").InputSignal<string>;
+    /** Legend items to include below the chart in the exported file. */
+    readonly legendItems: import("@angular/core").InputSignal<ChartLegendItem[]>;
     private readonly exportService;
     export(format: 'svg' | 'png'): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChartExportButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ChartExportButtonComponent, "cng-chart-export-button", never, { "svgRef": { "alias": "svgRef"; "required": false; "isSignal": true; }; "filename": { "alias": "filename"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵ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>;
 }

package/charts/chart-export/chart-export.service.d.ts

@@ -1,9 +1,19 @@
+import { ChartLegendItem } from '../chart-legend/chart-legend.component';
 import * as i0 from "@angular/core";
 export declare class ChartExportService {
-    exportSvg(svgEl: SVGSVGElement, filename: string): void;
-    exportPng(svgEl: SVGSVGElement, filename: string): void;
+    exportSvg(svgEl: SVGSVGElement, filename: string, legendItems?: ChartLegendItem[]): void;
+    exportPng(svgEl: SVGSVGElement, filename: string, legendItems?: ChartLegendItem[]): void;
+    private buildExportSvg;
+    private buildLegendGroup;
+    private legendItemsPerRow;
     private toCanvas;
-    private cloneWithDimensions;
+    /** Recursively resolves `var(--x)` references in inline style and presentation attributes. */
+    private resolveStyleVariables;
+    /** Inlines `font-family` on every `<text>` / `<tspan>` element that doesn't already have one. */
+    private inlineFontFamily;
+    private resolveVarsInString;
+    private resolveColor;
+    private getDocumentFontFamily;
     private download;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChartExportService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ChartExportService>;

package/charts/combo-chart/combo-chart.component.d.ts

@@ -50,6 +50,7 @@ export declare class ComboChartComponent extends ChartBase<SelectedComboItem> im
     readonly tooltipOrientation: import("@angular/core").InputSignal<"top" | "bottom">;
     readonly showLegend: import("@angular/core").InputSignal<boolean>;
     readonly showExportButton: import("@angular/core").InputSignal<boolean>;
+    readonly exportButtonTitle: import("@angular/core").InputSignal<string>;
     readonly exportFilename: import("@angular/core").InputSignal<string>;
     readonly noItemsMessage: import("@angular/core").InputSignal<string>;
     readonly tooltipPercentOfTotal: import("@angular/core").InputSignal<string>;
@@ -59,6 +60,10 @@ export declare class ComboChartComponent extends ChartBase<SelectedComboItem> im
     readonly yAxisLabel: import("@angular/core").InputSignal<string>;
     /** Optional label rendered rotated to the right of the Y axis (line scale). */
     readonly yLineAxisLabel: import("@angular/core").InputSignal<string>;
+    /** Optional fixed maximum value for the bar Y axis (left). Defaults to auto. */
+    readonly yBarMax: import("@angular/core").InputSignal<number>;
+    /** Optional fixed maximum value for the line Y axis (right). Defaults to auto. */
+    readonly yLineMax: import("@angular/core").InputSignal<number>;
     readonly valueClicked: import("@angular/core").OutputEmitterRef<ComboChartValue>;
     private readonly MARGIN;
     protected readonly hasData: import("@angular/core").Signal<boolean>;
@@ -72,6 +77,6 @@ export declare class ComboChartComponent extends ChartBase<SelectedComboItem> im
     private drawBars;
     private drawLines;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComboChartComponent, never>;
-    static ɵcmp: i0.ɵɵ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; }; "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; }; }, { "valueClicked": "valueClicked"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵ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>;
 }
 export {};

package/charts/funnel-chart/funnel-chart.component.d.ts

@@ -73,6 +73,7 @@ interface SpacerDataPoint {
 export declare class FunnelChartComponent extends ChartBase<FunnelDataPoint> implements OnChanges {
     readonly data: import("@angular/core").InputSignal<FunnelChartData[]>;
     readonly showExportButton: import("@angular/core").InputSignal<boolean>;
+    readonly exportButtonTitle: import("@angular/core").InputSignal<string>;
     readonly exportFilename: import("@angular/core").InputSignal<string>;
     /** Rendering mode. 'default' = horizontal bars with sections; 'centered' = centered trapezoid funnel. */
     readonly orientation: import("@angular/core").InputSignal<"default" | "centered">;
@@ -148,6 +149,6 @@ export declare class FunnelChartComponent extends ChartBase<FunnelDataPoint> imp
     private getBarHeight;
     private round;
     static ɵfac: i0.ɵɵFactoryDeclaration<FunnelChartComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FunnelChartComponent, "clr-funnel-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "showExportButton": { "alias": "showExportButton"; "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>;
+    static ɵcmp: i0.ɵɵ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>;
 }
 export {};

package/charts/line-chart/line-chart.component.d.ts

@@ -16,6 +16,7 @@ export declare class LineChartComponent extends ChartBase<LineChartSelectedPoint
     readonly showLegend: import("@angular/core").InputSignal<boolean>;
     readonly showValues: import("@angular/core").InputSignal<boolean>;
     readonly showExportButton: import("@angular/core").InputSignal<boolean>;
+    readonly exportButtonTitle: import("@angular/core").InputSignal<string>;
     readonly exportFilename: import("@angular/core").InputSignal<string>;
     readonly noItemsMessage: import("@angular/core").InputSignal<string>;
     readonly tooltipPercentOfTotal: import("@angular/core").InputSignal<string>;
@@ -36,5 +37,5 @@ export declare class LineChartComponent extends ChartBase<LineChartSelectedPoint
     private drawSeries;
     private openTooltip;
     static ɵfac: i0.ɵɵFactoryDeclaration<LineChartComponent, never>;
-    static ɵcmp: i0.ɵɵ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; }; "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; }; }, { "valueClicked": "valueClicked"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵ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; }; }, { "valueClicked": "valueClicked"; }, never, never, false, never>;
 }

package/charts/pie-chart/pie-chart.component.d.ts

@@ -19,6 +19,7 @@ export declare class PieChartComponent extends ChartBase<PieChartData> implement
     readonly donut: import("@angular/core").InputSignal<boolean>;
     readonly showLegend: import("@angular/core").InputSignal<boolean>;
     readonly showExportButton: import("@angular/core").InputSignal<boolean>;
+    readonly exportButtonTitle: import("@angular/core").InputSignal<string>;
     readonly exportFilename: import("@angular/core").InputSignal<string>;
     readonly tooltipOrientation: import("@angular/core").InputSignal<"top" | "bottom">;
     readonly noItemsMessage: import("@angular/core").InputSignal<string>;
@@ -35,5 +36,5 @@ export declare class PieChartComponent extends ChartBase<PieChartData> implement
     protected updateChart(): void;
     private openTooltip;
     static ɵfac: i0.ɵɵFactoryDeclaration<PieChartComponent, never>;
-    static ɵcmp: i0.ɵɵ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; }; "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>;
+    static ɵcmp: i0.ɵɵ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>;
 }

package/datagrid/column-reorder/column-reorder.directive.d.ts

@@ -1,22 +1,26 @@
 import { EventEmitter, OnInit, QueryList } from '@angular/core';
 import { ClrDatagridColumn } from '@clr/angular';
 import * as i0 from "@angular/core";
+interface ColumnOrderChangedEvent<T> {
+    columns: T[];
+    from?: number;
+    to?: number;
+    trigger: 'init' | 'drag' | 'reset';
+}
 export declare class DatagridColumnReorderDirective<T extends {
     name: string;
 }> implements OnInit {
     columnDefinitions: T[];
-    columnOrderChanged: EventEmitter<{
-        columns: T[];
-        from?: number;
-        to?: number;
-        trigger: "init" | "drag";
-    }>;
+    columnOrderChanged: EventEmitter<ColumnOrderChangedEvent<T>> & {
+        emit: (value: ColumnOrderChangedEvent<T>) => void;
+    };
     clrColumns: QueryList<ClrDatagridColumn>;
     private readonly cdkDropList;
     private readonly datagrid;
     private readonly destroyRef;
     ngOnInit(): void;
     initializeColumnOrder(storedOrder: Record<string, number>): void;
+    resetColumnOrder(columns: T[]): void;
     private reconcileColumnOrder;
     private updateColumnOrder;
     private updateSeparatorVisibility;
@@ -25,3 +29,4 @@ export declare class DatagridColumnReorderDirective<T extends {
     static ɵfac: i0.ɵɵFactoryDeclaration<DatagridColumnReorderDirective<any>, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DatagridColumnReorderDirective<any>, "[clrDatagridColumnReorder]", never, { "columnDefinitions": { "alias": "clrDatagridColumnReorder"; "required": false; }; }, { "columnOrderChanged": "clrDatagridColumnOrderChanged"; }, ["clrColumns"], never, false, never>;
 }
+export {};

package/datagrid/datagrid-state-persistence/state-persistence-key.directive.d.ts

@@ -45,6 +45,7 @@ export declare class StatePersistenceKeyDirective implements AfterContentInit, O
     private persistSorting;
     private persistColumnWidths;
     private persistColumnOrder;
+    private resetColumnOrder;
     /**
      * Pagination description must be set by this directive,
      * otherwise we can't update datagrid values from localStorage

package/datagrid/datagrid-state-persistence/state-persistence-options.interface.d.ts

@@ -1,3 +1,4 @@
+import { ClrDatagridStatePersistenceModel } from './datagrid-state-persistence-model.interface';
 export interface StatePersistenceOptions {
     key: string;
     serverDriven: boolean;
@@ -7,4 +8,7 @@ export interface StatePersistenceOptions {
     persistHiddenColumns?: boolean;
     persistColumnWidths?: boolean;
     persistColumnOrder?: boolean;
+    persistColumnOrderTransformer?: (state: ClrDatagridStatePersistenceModel, columns: {
+        name: string;
+    }[]) => void;
 }

package/fesm2022/clr-addons.mjs

@@ -11988,7 +11988,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 class DatagridColumnReorderDirective {
     constructor() {
         this.columnDefinitions = [];
-        this.columnOrderChanged = new EventEmitter();
+        this.columnOrderChanged = Object.assign(new EventEmitter(), {
+            emit: (value) => {
+                this.columnOrderChanged.next(value);
+                // after change detection, columns need to be rerendered first
+                setTimeout(() => this.updateSeparatorVisibility(), 0);
+                // After Angular has reordered the DOM,
+                // force Clarity to re-project columns in the new order by triggering its render cycle.
+                // DatagridRenderOrganizer is not publicly exported, so we access it via the datagrid instance.
+                setTimeout(() => this.datagrid.organizer?.resize());
+            },
+        });
         this.cdkDropList = inject(CdkDropList);
         this.datagrid = inject(ClrDatagrid);
         this.destroyRef = inject(DestroyRef);
@@ -12013,8 +12023,9 @@ class DatagridColumnReorderDirective {
     initializeColumnOrder(storedOrder) {
         const orderedColumns = this.reconcileColumnOrder(this.columnDefinitions, storedOrder);
         this.columnOrderChanged.emit({ columns: orderedColumns, trigger: 'init' });
-        // after change detection, columns need to be rerendered first
-        setTimeout(() => this.updateSeparatorVisibility(), 0);
+    }
+    resetColumnOrder(columns) {
+        this.columnOrderChanged.emit({ columns, trigger: 'reset' });
     }
     // This is needed in case there is a new column, which is not stored in the storage.
     // In that case we put it at the end of the list.
@@ -12028,7 +12039,7 @@ class DatagridColumnReorderDirective {
     updateColumnOrder(dragPreviousIndex, dragCurrentIndex) {
         // we need to divide the indexes by two, because each column has two draggable elements:
         // - the column itself and the resize handle
-        const from = dragPreviousIndex / 2;
+        const from = Math.floor((dragPreviousIndex + 1) / 2);
         const to = Math.floor((dragCurrentIndex + 1) / 2);
         if (from === to) {
             // no change, do nothing
@@ -12037,8 +12048,6 @@ class DatagridColumnReorderDirective {
         const columnDefinitionCopy = [...this.columnDefinitions];
         moveItemInArray(columnDefinitionCopy, from, to);
         this.columnOrderChanged.emit({ columns: columnDefinitionCopy, from, to, trigger: 'drag' });
-        // after change detection, columns need to be rerendered first
-        setTimeout(() => this.updateSeparatorVisibility(), 0);
     }
     // show separator for all but the last visible column
     updateSeparatorVisibility() {
@@ -12161,7 +12170,7 @@ class StatePersistenceKeyDirective {
         }
         const columnOrderPersistenceEnabled = this.options.persistColumnOrder ?? false;
         if (columnOrderPersistenceEnabled && !!this.reorderDirective) {
-            this.initColumnOrderPersister(localStorageState);
+            this.initColumnOrderPersister();
             this.initColumnOrder(localStorageState);
         }
         const paginationPersistenceEnabled = this.options.persistPagination ?? true;
@@ -12258,12 +12267,12 @@ class StatePersistenceKeyDirective {
         });
         this.datagrid.items.change.pipe(takeUntil(this.destroy$)).subscribe(() => this.updatePaginationDescription());
     }
-    initColumnOrderPersister(state) {
+    initColumnOrderPersister() {
         this.reorderDirective.columnOrderChanged
             .pipe(takeUntil(this.destroy$), 
         // we skip the first value (init), because it's already coming from the local storage, so no need to save it again
         filter$1(({ trigger }) => trigger !== 'init'))
-            .subscribe(({ columns }) => this.persistColumnOrder(state, columns));
+            .subscribe(({ trigger, columns }) => trigger === 'reset' ? this.resetColumnOrder() : this.persistColumnOrder(columns));
     }
     initColumnOrder(savedState) {
         if (savedState?.columns) {
@@ -12319,12 +12328,26 @@ class StatePersistenceKeyDirective {
             this.saveLocalStorageState(state);
         }
     }
-    persistColumnOrder(state, columns) {
+    persistColumnOrder(columns) {
+        const state = this.getLocalStorageState();
         state.columns = state.columns || {};
-        columns.forEach(({ name }, index) => {
-            state.columns[name] = state.columns[name] || {};
-            state.columns[name].order = index;
-        });
+        if (this.options.persistColumnOrderTransformer) {
+            this.options.persistColumnOrderTransformer(state, columns);
+        }
+        else {
+            columns.forEach(({ name }, index) => {
+                state.columns[name] = state.columns[name] || {};
+                state.columns[name].order = index;
+            });
+        }
+        this.saveLocalStorageState(state);
+    }
+    resetColumnOrder() {
+        const state = this.getLocalStorageState();
+        state.columns = state.columns || {};
+        for (const name in state.columns) {
+            state.columns[name].order = undefined;
+        }
         this.saveLocalStorageState(state);
     }
     /**