ng-prime-tools 1.0.84 → 1.0.85

package/fesm2022/ng-prime-tools.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { Pipe, EventEmitter, ViewChild, Output, Input, Component, NgModule, Injectable, HostListener, ContentChild, HostBinding } from '@angular/core';
+import { Pipe, EventEmitter, ViewChild, Output, Input, Component, NgModule, Injectable, Inject, HostListener, ContentChild, HostBinding } from '@angular/core';
 import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DOCUMENT } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { FormGroup, FormControl, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i3 from 'primeng/table';
@@ -3798,66 +3798,602 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         }] });
 
 class PTChartComponent {
-    constructor() {
+    constructor(document) {
+        this.document = document;
+        this.viewInitialized = false;
+        this.colorSchemeChangeListener = () => {
+            this.refreshTheme();
+        };
         Chart.register(...registerables, ChartDataLabels);
     }
-    ngOnInit() {
+    ngAfterViewInit() {
+        this.viewInitialized = true;
         this.initializeChart();
+        this.observeContainerResize();
+        this.observeThemeChanges();
+    }
+    ngOnChanges(changes) {
+        if (this.viewInitialized && changes['chartConfig'] && this.chartConfig) {
+            this.updateChart();
+        }
     }
     ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+        this.themeMutationObserver?.disconnect();
+        this.colorSchemeMediaQuery?.removeEventListener('change', this.colorSchemeChangeListener);
         this.destroyChart();
     }
+    get chartContainerStyle() {
+        return {
+            width: this.chartConfig?.chartWidth?.trim() || '100%',
+            height: this.chartConfig?.chartHeight?.trim() || '100%',
+        };
+    }
+    get chartAriaLabel() {
+        return this.chartConfig?.medianTitle?.trim() || 'Graphique de données';
+    }
     initializeChart() {
+        if (!this.viewInitialized || !this.chartConfig) {
+            return;
+        }
         const canvas = this.canvasRef.nativeElement;
-        // Destroy the existing chart instance if it already exists
         this.destroyChart();
-        const config = {
-            type: this.chartConfig.type,
-            data: this.chartConfig.data,
-            options: {
-                ...this.chartConfig.options,
-                plugins: {
-                    datalabels: {
-                        formatter: (value, context) => {
-                            const data = context.chart.data.datasets[0].data;
-                            const total = data.reduce((sum, val) => sum + val, 0);
-                            const percentage = ((value / total) * 100).toFixed(1) + '%';
-                            return percentage;
-                        },
-                        color: '#000',
+        const configuration = this.buildChartConfiguration();
+        this.chart = new Chart(canvas, configuration);
+        this.currentChartType = this.chartConfig.type;
+    }
+    updateChart() {
+        if (!this.viewInitialized || !this.chartConfig) {
+            return;
+        }
+        if (!this.chart) {
+            this.initializeChart();
+            return;
+        }
+        const requestedType = this.chartConfig.type;
+        /*
+         * Chart.js does not safely support changing the root chart type
+         * dynamically. Recreate the chart when the requested type changes.
+         */
+        if (this.currentChartType !== requestedType) {
+            this.initializeChart();
+            return;
+        }
+        const configuration = this.buildChartConfiguration();
+        this.chart.data = configuration.data;
+        if (configuration.options) {
+            this.chart.options = configuration.options;
+        }
+        this.chart.update();
+    }
+    buildChartConfiguration() {
+        const chartType = this.chartConfig.type;
+        const theme = this.resolveTheme();
+        const defaultOptions = this.buildDefaultOptions(chartType, theme);
+        const consumerOptions = this.chartConfig.options ?? {};
+        return {
+            type: chartType,
+            data: this.cloneChartData(this.chartConfig.data),
+            options: this.mergeChartOptions(defaultOptions, consumerOptions, chartType),
+        };
+    }
+    buildDefaultOptions(chartType, theme) {
+        const isCartesianChart = this.isCartesianChart(chartType);
+        const isCircularChart = this.isCircularChart(chartType);
+        const options = {
+            responsive: true,
+            maintainAspectRatio: false,
+            resizeDelay: 100,
+            interaction: {
+                intersect: false,
+                mode: isCartesianChart ? 'index' : 'nearest',
+            },
+            animation: {
+                duration: 450,
+                easing: 'easeOutQuart',
+            },
+            layout: {
+                padding: {
+                    top: 12,
+                    right: 12,
+                    bottom: 8,
+                    left: 12,
+                },
+            },
+            plugins: {
+                legend: {
+                    display: true,
+                    position: 'bottom',
+                    align: 'center',
+                    labels: {
+                        color: theme.textColor,
+                        usePointStyle: true,
+                        pointStyle: 'circle',
+                        boxWidth: 9,
+                        boxHeight: 9,
+                        padding: 18,
                         font: {
-                            weight: 'bold',
+                            family: this.resolveFontFamily(),
+                            size: 12,
+                            weight: 500,
+                        },
+                    },
+                },
+                title: {
+                    display: Boolean(this.chartConfig.medianTitle?.trim()),
+                    text: this.chartConfig.medianTitle?.trim() || '',
+                    align: 'start',
+                    color: theme.textColor,
+                    padding: {
+                        top: 4,
+                        bottom: 18,
+                    },
+                    font: {
+                        family: this.resolveFontFamily(),
+                        size: 16,
+                        weight: 600,
+                    },
+                },
+                tooltip: {
+                    enabled: true,
+                    backgroundColor: theme.tooltipBackgroundColor,
+                    titleColor: theme.tooltipTextColor,
+                    bodyColor: theme.tooltipTextColor,
+                    footerColor: theme.secondaryTextColor,
+                    borderColor: theme.tooltipBorderColor,
+                    borderWidth: 1,
+                    cornerRadius: 10,
+                    caretSize: 7,
+                    caretPadding: 8,
+                    padding: 12,
+                    boxPadding: 6,
+                    usePointStyle: true,
+                    displayColors: true,
+                    titleFont: {
+                        family: this.resolveFontFamily(),
+                        size: 13,
+                        weight: 600,
+                    },
+                    bodyFont: {
+                        family: this.resolveFontFamily(),
+                        size: 12,
+                        weight: 400,
+                    },
+                    callbacks: {
+                        label: (context) => {
+                            return this.buildTooltipLabel(context, isCircularChart);
                         },
                     },
-                    ...this.chartConfig.options?.plugins,
+                },
+                datalabels: {
+                    display: isCircularChart,
+                    color: theme.textColor,
+                    anchor: isCircularChart ? 'center' : 'end',
+                    align: isCircularChart ? 'center' : 'top',
+                    clamp: true,
+                    clip: false,
+                    formatter: (value, context) => {
+                        return this.formatDataLabel(value, context.chart, context.datasetIndex, isCircularChart);
+                    },
+                    font: {
+                        family: this.resolveFontFamily(),
+                        size: 11,
+                        weight: 'bold',
+                    },
+                    textStrokeColor: theme.surfaceColor,
+                    textStrokeWidth: isCircularChart ? 2 : 0,
                 },
             },
         };
-        // Create a new Chart instance
-        this.chart = new Chart(canvas, config);
+        if (isCartesianChart) {
+            options.scales = this.buildDefaultScales(theme);
+        }
+        return options;
     }
-    updateChart() {
-        if (this.chart) {
-            this.chart.data = this.chartConfig.data;
-            if (this.chartConfig.options) {
-                this.chart.options = this.chartConfig.options;
+    buildDefaultScales(theme) {
+        const commonTickFont = {
+            family: this.resolveFontFamily(),
+            size: 11,
+            weight: 400,
+        };
+        return {
+            x: {
+                display: true,
+                beginAtZero: false,
+                border: {
+                    display: false,
+                },
+                grid: {
+                    display: false,
+                    color: theme.gridColor,
+                    drawTicks: false,
+                },
+                ticks: {
+                    color: theme.secondaryTextColor,
+                    padding: 10,
+                    maxRotation: 0,
+                    autoSkip: true,
+                    font: commonTickFont,
+                },
+                title: {
+                    display: Boolean(this.chartConfig.xAxisTitle?.trim()),
+                    text: this.chartConfig.xAxisTitle?.trim() || '',
+                    color: theme.textColor,
+                    padding: {
+                        top: 12,
+                    },
+                    font: {
+                        family: this.resolveFontFamily(),
+                        size: 12,
+                        weight: 600,
+                    },
+                },
+            },
+            y: {
+                display: true,
+                beginAtZero: this.chartConfig.scales?.y?.ticks?.beginAtZero ?? true,
+                min: this.chartConfig.scales?.y?.min,
+                max: this.chartConfig.scales?.y?.max,
+                border: {
+                    display: false,
+                },
+                grid: {
+                    display: true,
+                    color: theme.gridColor,
+                    drawTicks: false,
+                    lineWidth: 1,
+                },
+                ticks: {
+                    color: theme.secondaryTextColor,
+                    padding: 10,
+                    stepSize: this.chartConfig.scales?.y?.ticks?.stepSize,
+                    font: commonTickFont,
+                },
+                title: {
+                    display: Boolean(this.chartConfig.yAxisTitle?.trim()),
+                    text: this.chartConfig.yAxisTitle?.trim() || '',
+                    color: theme.textColor,
+                    padding: {
+                        bottom: 12,
+                    },
+                    font: {
+                        family: this.resolveFontFamily(),
+                        size: 12,
+                        weight: 600,
+                    },
+                },
+            },
+        };
+    }
+    mergeChartOptions(defaultOptions, consumerOptions, chartType) {
+        const defaultPlugins = defaultOptions.plugins;
+        const consumerPlugins = consumerOptions.plugins;
+        const mergedOptions = {
+            ...defaultOptions,
+            ...consumerOptions,
+            interaction: {
+                ...defaultOptions.interaction,
+                ...consumerOptions.interaction,
+            },
+            animation: consumerOptions.animation === false
+                ? false
+                : {
+                    ...(typeof defaultOptions.animation === 'object'
+                        ? defaultOptions.animation
+                        : {}),
+                    ...(typeof consumerOptions.animation === 'object'
+                        ? consumerOptions.animation
+                        : {}),
+                },
+            layout: {
+                ...defaultOptions.layout,
+                ...consumerOptions.layout,
+                padding: consumerOptions.layout?.padding ?? defaultOptions.layout?.padding,
+            },
+            plugins: {
+                ...defaultPlugins,
+                ...consumerPlugins,
+                legend: {
+                    ...defaultPlugins?.legend,
+                    ...consumerPlugins?.legend,
+                    labels: {
+                        ...defaultPlugins?.legend?.labels,
+                        ...consumerPlugins?.legend?.labels,
+                        /*
+                         * Chart.js font options may be scriptable callbacks.
+                         * Keep the complete consumer value rather than spreading it.
+                         */
+                        font: consumerPlugins?.legend?.labels?.font ??
+                            defaultPlugins?.legend?.labels?.font,
+                    },
+                },
+                title: {
+                    ...defaultPlugins?.title,
+                    ...consumerPlugins?.title,
+                    font: consumerPlugins?.title?.font ?? defaultPlugins?.title?.font,
+                },
+                tooltip: {
+                    ...defaultPlugins?.tooltip,
+                    ...consumerPlugins?.tooltip,
+                    titleFont: consumerPlugins?.tooltip?.titleFont ??
+                        defaultPlugins?.tooltip?.titleFont,
+                    bodyFont: consumerPlugins?.tooltip?.bodyFont ??
+                        defaultPlugins?.tooltip?.bodyFont,
+                    footerFont: consumerPlugins?.tooltip?.footerFont ??
+                        defaultPlugins?.tooltip?.footerFont,
+                    callbacks: {
+                        ...defaultPlugins?.tooltip?.callbacks,
+                        ...consumerPlugins?.tooltip?.callbacks,
+                    },
+                },
+                datalabels: {
+                    ...defaultPlugins?.datalabels,
+                    ...consumerPlugins?.datalabels,
+                },
+            },
+        };
+        if (this.isCartesianChart(chartType)) {
+            mergedOptions.scales = this.mergeScales(defaultOptions.scales, consumerOptions.scales);
+        }
+        else if (consumerOptions.scales) {
+            mergedOptions.scales = consumerOptions.scales;
+        }
+        return mergedOptions;
+    }
+    mergeScales(defaultScales, consumerScales) {
+        const defaultScaleRecord = defaultScales ??
+            {};
+        const consumerScaleRecord = consumerScales ??
+            {};
+        const scaleKeys = new Set([
+            ...Object.keys(defaultScaleRecord),
+            ...Object.keys(consumerScaleRecord),
+        ]);
+        const mergedScales = {};
+        scaleKeys.forEach((scaleKey) => {
+            const defaultScale = defaultScaleRecord[scaleKey] ?? {};
+            const consumerScale = consumerScaleRecord[scaleKey] ?? {};
+            mergedScales[scaleKey] = {
+                ...defaultScale,
+                ...consumerScale,
+                border: {
+                    ...this.asObject(defaultScale['border']),
+                    ...this.asObject(consumerScale['border']),
+                },
+                grid: {
+                    ...this.asObject(defaultScale['grid']),
+                    ...this.asObject(consumerScale['grid']),
+                },
+                ticks: {
+                    ...this.asObject(defaultScale['ticks']),
+                    ...this.asObject(consumerScale['ticks']),
+                },
+                title: {
+                    ...this.asObject(defaultScale['title']),
+                    ...this.asObject(consumerScale['title']),
+                },
+            };
+        });
+        return mergedScales;
+    }
+    buildTooltipLabel(context, includePercentage) {
+        const datasetLabel = context.dataset.label?.trim();
+        const value = this.extractNumericValue(context.raw);
+        const formattedValue = value !== null ? this.formatNumber(value) : context.formattedValue;
+        const prefix = datasetLabel ? `${datasetLabel}: ` : '';
+        if (!includePercentage || value === null) {
+            return `${prefix}${formattedValue}`;
+        }
+        const total = this.calculateDatasetTotal(context.dataset);
+        if (total <= 0) {
+            return `${prefix}${formattedValue}`;
+        }
+        const percentage = ((Math.abs(value) / total) * 100).toFixed(1);
+        return `${prefix}${formattedValue} (${percentage} %)`;
+    }
+    formatDataLabel(value, chart, datasetIndex, displayPercentage) {
+        const numericValue = this.extractNumericValue(value);
+        if (numericValue === null) {
+            return '';
+        }
+        if (!displayPercentage) {
+            return this.formatNumber(numericValue);
+        }
+        const dataset = chart.data.datasets[datasetIndex];
+        if (!dataset) {
+            return '';
+        }
+        const total = this.calculateDatasetTotal(dataset);
+        if (total <= 0) {
+            return '';
+        }
+        const percentage = (Math.abs(numericValue) / total) * 100;
+        return percentage >= 1 ? `${percentage.toFixed(1)}%` : '';
+    }
+    calculateDatasetTotal(dataset) {
+        return dataset.data.reduce((total, currentValue) => {
+            const numericValue = this.extractNumericValue(currentValue);
+            return numericValue !== null ? total + Math.abs(numericValue) : total;
+        }, 0);
+    }
+    extractNumericValue(value) {
+        if (typeof value === 'number' && Number.isFinite(value)) {
+            return value;
+        }
+        if (typeof value === 'string') {
+            const parsedValue = Number(value);
+            return Number.isFinite(parsedValue) ? parsedValue : null;
+        }
+        if (Array.isArray(value)) {
+            const candidate = value.find((item) => typeof item === 'number' && Number.isFinite(item));
+            return typeof candidate === 'number' ? candidate : null;
+        }
+        if (value && typeof value === 'object') {
+            const point = value;
+            const candidate = point['y'] ?? point['r'] ?? point['value'] ?? point['x'];
+            return this.extractNumericValue(candidate);
+        }
+        return null;
+    }
+    formatNumber(value) {
+        return new Intl.NumberFormat(undefined, {
+            maximumFractionDigits: 2,
+        }).format(value);
+    }
+    cloneChartData(data) {
+        return {
+            ...data,
+            labels: data.labels ? [...data.labels] : undefined,
+            xLabels: data.xLabels ? [...data.xLabels] : undefined,
+            yLabels: data.yLabels ? [...data.yLabels] : undefined,
+            datasets: data.datasets.map((dataset) => ({
+                ...dataset,
+                data: [...dataset.data],
+            })),
+        };
+    }
+    observeContainerResize() {
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const container = this.canvasRef.nativeElement.parentElement;
+        if (!container) {
+            return;
+        }
+        this.resizeObserver = new ResizeObserver(() => {
+            this.chart?.resize();
+        });
+        this.resizeObserver.observe(container);
+    }
+    observeThemeChanges() {
+        const documentElement = this.document.documentElement;
+        if (typeof MutationObserver !== 'undefined') {
+            this.themeMutationObserver = new MutationObserver(() => {
+                this.refreshTheme();
+            });
+            this.themeMutationObserver.observe(documentElement, {
+                attributes: true,
+                attributeFilter: ['class', 'style', 'data-theme'],
+            });
+            if (this.document.body) {
+                this.themeMutationObserver.observe(this.document.body, {
+                    attributes: true,
+                    attributeFilter: ['class', 'style', 'data-theme'],
+                });
             }
-            this.chart.update();
+        }
+        if (typeof window !== 'undefined' && window.matchMedia) {
+            this.colorSchemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+            this.colorSchemeMediaQuery.addEventListener('change', this.colorSchemeChangeListener);
         }
     }
-    destroyChart() {
-        if (this.chart) {
-            this.chart.destroy();
-            this.chart = undefined;
+    refreshTheme() {
+        if (!this.chart || !this.chartConfig) {
+            return;
+        }
+        const configuration = this.buildChartConfiguration();
+        if (configuration.options) {
+            this.chart.options = configuration.options;
         }
+        this.chart.update('none');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: PTChartComponent, isStandalone: false, selector: "pt-chart", inputs: { chartConfig: "chartConfig" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["chartCanvas"], descendants: true, static: true }], ngImport: i0, template: "<div style=\"position: relative; height: 100%; width: 100%\">\n  <canvas #chartCanvas></canvas>\n</div>\n", styles: [""] }); }
+    resolveTheme() {
+        const rootStyles = getComputedStyle(this.document.documentElement);
+        const bodyStyles = this.document.body
+            ? getComputedStyle(this.document.body)
+            : rootStyles;
+        const isDarkMode = this.isDarkMode(rootStyles, bodyStyles);
+        return {
+            textColor: this.resolveCssVariable(rootStyles, ['--p-text-color', '--text-color'], isDarkMode ? '#f8fafc' : '#0f172a'),
+            secondaryTextColor: this.resolveCssVariable(rootStyles, [
+                '--p-text-muted-color',
+                '--p-text-secondary-color',
+                '--text-color-secondary',
+            ], isDarkMode ? '#94a3b8' : '#64748b'),
+            surfaceColor: this.resolveCssVariable(rootStyles, [
+                '--p-content-background',
+                '--p-surface-0',
+                '--surface-card',
+                '--surface-ground',
+            ], isDarkMode ? '#0f172a' : '#ffffff'),
+            gridColor: this.resolveCssVariable(rootStyles, ['--p-content-border-color', '--p-surface-border', '--surface-border'], isDarkMode ? 'rgba(148, 163, 184, 0.16)' : 'rgba(15, 23, 42, 0.08)'),
+            tooltipBackgroundColor: this.resolveCssVariable(rootStyles, ['--p-tooltip-background', '--p-surface-900', '--surface-900'], isDarkMode ? 'rgba(15, 23, 42, 0.96)' : 'rgba(15, 23, 42, 0.94)'),
+            tooltipTextColor: this.resolveCssVariable(rootStyles, ['--p-tooltip-color', '--p-surface-0', '--surface-0'], '#f8fafc'),
+            tooltipBorderColor: this.resolveCssVariable(rootStyles, ['--p-content-border-color', '--p-surface-border', '--surface-border'], isDarkMode ? 'rgba(148, 163, 184, 0.35)' : 'rgba(255, 255, 255, 0.18)'),
+        };
+    }
+    isDarkMode(rootStyles, bodyStyles) {
+        const root = this.document.documentElement;
+        const body = this.document.body;
+        const darkClassDetected = root.classList.contains('p-dark') ||
+            root.classList.contains('dark') ||
+            root.classList.contains('dark-mode') ||
+            body?.classList.contains('p-dark') ||
+            body?.classList.contains('dark') ||
+            body?.classList.contains('dark-mode') ||
+            root.getAttribute('data-theme') === 'dark' ||
+            body?.getAttribute('data-theme') === 'dark';
+        if (darkClassDetected) {
+            return true;
+        }
+        const rootColorScheme = rootStyles
+            .getPropertyValue('color-scheme')
+            .trim()
+            .toLowerCase();
+        const bodyColorScheme = bodyStyles
+            .getPropertyValue('color-scheme')
+            .trim()
+            .toLowerCase();
+        if (rootColorScheme === 'dark' || bodyColorScheme === 'dark') {
+            return true;
+        }
+        return (typeof window !== 'undefined' &&
+            window.matchMedia?.('(prefers-color-scheme: dark)').matches === true);
+    }
+    resolveCssVariable(styles, variableNames, fallback) {
+        for (const variableName of variableNames) {
+            const value = styles.getPropertyValue(variableName).trim();
+            if (value) {
+                return value;
+            }
+        }
+        return fallback;
+    }
+    resolveFontFamily() {
+        const rootStyles = getComputedStyle(this.document.documentElement);
+        return this.resolveCssVariable(rootStyles, ['--p-font-family', '--font-family'], 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif');
+    }
+    asObject(value) {
+        return value !== null && typeof value === 'object'
+            ? value
+            : {};
+    }
+    isCircularChart(chartType) {
+        return (chartType === 'pie' ||
+            chartType === 'doughnut' ||
+            chartType === 'polarArea');
+    }
+    isCartesianChart(chartType) {
+        return (chartType === 'bar' ||
+            chartType === 'line' ||
+            chartType === 'scatter' ||
+            chartType === 'bubble');
+    }
+    destroyChart() {
+        this.chart?.destroy();
+        this.chart = undefined;
+        this.currentChartType = undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTChartComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: PTChartComponent, isStandalone: false, selector: "pt-chart", inputs: { chartConfig: "chartConfig" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["chartCanvas"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"pt-chart\"\n  [ngStyle]=\"chartContainerStyle\"\n  role=\"img\"\n  [attr.aria-label]=\"chartAriaLabel\"\n>\n  <div class=\"pt-chart__canvas-container\">\n    <canvas #chartCanvas></canvas>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;min-width:0;height:100%;min-height:0}.pt-chart{position:relative;display:block;box-sizing:border-box;min-width:0;min-height:18rem;overflow:hidden;color:var(--p-text-color, var(--text-color, #0f172a));background:linear-gradient(145deg,color-mix(in srgb,var(--p-content-background, var(--surface-card, #ffffff)) 97%,var(--p-primary-color, #3b82f6) 3%),var(--p-content-background, var(--surface-card, #ffffff)));border:1px solid var(--p-content-border-color, var(--surface-border, rgba(15, 23, 42, .1)));border-radius:var(--p-content-border-radius, .875rem);box-shadow:0 1px 2px #0f172a0a,0 8px 24px #0f172a0d;transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease}.pt-chart:before{position:absolute;top:0;right:12%;left:12%;z-index:0;height:1px;pointer-events:none;content:\"\";background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--p-primary-color, #3b82f6) 45%,transparent),transparent)}.pt-chart__canvas-container{position:relative;z-index:1;width:100%;height:100%;min-width:0;min-height:inherit;padding:clamp(.75rem,1.5vw,1.25rem);box-sizing:border-box}.pt-chart canvas{display:block;width:100%!important;max-width:100%;height:100%!important;max-height:100%;outline:none}.pt-chart:focus-within{border-color:var(--p-primary-color, #3b82f6);box-shadow:0 0 0 3px color-mix(in srgb,var(--p-primary-color, #3b82f6) 18%,transparent),0 10px 30px #0f172a14}:host-context(.p-dark) .pt-chart,:host-context(.dark) .pt-chart,:host-context(.dark-mode) .pt-chart,:host-context([data-theme=\"dark\"]) .pt-chart{background:linear-gradient(145deg,color-mix(in srgb,var(--p-content-background, var(--surface-card, #0f172a)) 96%,var(--p-primary-color, #60a5fa) 4%),var(--p-content-background, var(--surface-card, #0f172a)));border-color:var( --p-content-border-color, var(--surface-border, rgba(148, 163, 184, .2)) );box-shadow:0 1px 2px #0000002e,0 12px 32px #00000038}@media(prefers-color-scheme:dark){.pt-chart{box-shadow:0 1px 2px #0000002e,0 12px 32px #0000002e}}@media(max-width:768px){.pt-chart{min-height:16rem;border-radius:.75rem}.pt-chart__canvas-container{padding:.75rem .625rem}}@media(max-width:480px){.pt-chart{min-height:15rem}.pt-chart__canvas-container{padding:.625rem .375rem}}@media(prefers-reduced-motion:reduce){.pt-chart{transition:none}}@media print{.pt-chart{overflow:visible;background:#fff;border:1px solid #d1d5db;box-shadow:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-chart', standalone: false, template: "<div style=\"position: relative; height: 100%; width: 100%\">\n  <canvas #chartCanvas></canvas>\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { chartConfig: [{
+            args: [{ selector: 'pt-chart', standalone: false, template: "<div\n  class=\"pt-chart\"\n  [ngStyle]=\"chartContainerStyle\"\n  role=\"img\"\n  [attr.aria-label]=\"chartAriaLabel\"\n>\n  <div class=\"pt-chart__canvas-container\">\n    <canvas #chartCanvas></canvas>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;min-width:0;height:100%;min-height:0}.pt-chart{position:relative;display:block;box-sizing:border-box;min-width:0;min-height:18rem;overflow:hidden;color:var(--p-text-color, var(--text-color, #0f172a));background:linear-gradient(145deg,color-mix(in srgb,var(--p-content-background, var(--surface-card, #ffffff)) 97%,var(--p-primary-color, #3b82f6) 3%),var(--p-content-background, var(--surface-card, #ffffff)));border:1px solid var(--p-content-border-color, var(--surface-border, rgba(15, 23, 42, .1)));border-radius:var(--p-content-border-radius, .875rem);box-shadow:0 1px 2px #0f172a0a,0 8px 24px #0f172a0d;transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease}.pt-chart:before{position:absolute;top:0;right:12%;left:12%;z-index:0;height:1px;pointer-events:none;content:\"\";background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--p-primary-color, #3b82f6) 45%,transparent),transparent)}.pt-chart__canvas-container{position:relative;z-index:1;width:100%;height:100%;min-width:0;min-height:inherit;padding:clamp(.75rem,1.5vw,1.25rem);box-sizing:border-box}.pt-chart canvas{display:block;width:100%!important;max-width:100%;height:100%!important;max-height:100%;outline:none}.pt-chart:focus-within{border-color:var(--p-primary-color, #3b82f6);box-shadow:0 0 0 3px color-mix(in srgb,var(--p-primary-color, #3b82f6) 18%,transparent),0 10px 30px #0f172a14}:host-context(.p-dark) .pt-chart,:host-context(.dark) .pt-chart,:host-context(.dark-mode) .pt-chart,:host-context([data-theme=\"dark\"]) .pt-chart{background:linear-gradient(145deg,color-mix(in srgb,var(--p-content-background, var(--surface-card, #0f172a)) 96%,var(--p-primary-color, #60a5fa) 4%),var(--p-content-background, var(--surface-card, #0f172a)));border-color:var( --p-content-border-color, var(--surface-border, rgba(148, 163, 184, .2)) );box-shadow:0 1px 2px #0000002e,0 12px 32px #00000038}@media(prefers-color-scheme:dark){.pt-chart{box-shadow:0 1px 2px #0000002e,0 12px 32px #0000002e}}@media(max-width:768px){.pt-chart{min-height:16rem;border-radius:.75rem}.pt-chart__canvas-container{padding:.75rem .625rem}}@media(max-width:480px){.pt-chart{min-height:15rem}.pt-chart__canvas-container{padding:.625rem .375rem}}@media(prefers-reduced-motion:reduce){.pt-chart{transition:none}}@media print{.pt-chart{overflow:visible;background:#fff;border:1px solid #d1d5db;box-shadow:none}}\n"] }]
+        }], ctorParameters: () => [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }], propDecorators: { chartConfig: [{
                 type: Input
             }], canvasRef: [{
                 type: ViewChild,