ng-prime-tools 1.0.94 → 1.0.95

package/fesm2022/ng-prime-tools.mjs

@@ -4093,6 +4093,228 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 }]
         }] });
 
+const PT_CHART_DEFAULT_WIDTH = '100%';
+const PT_CHART_DEFAULT_HEIGHT = '100%';
+const PT_CHART_DEFAULT_RESIZE_DELAY = 100;
+const PT_CHART_DEFAULT_ANIMATION = {
+    duration: 450,
+    easing: 'easeOutQuart',
+};
+const PT_CHART_DEFAULT_LAYOUT_PADDING = {
+    top: 12,
+    right: 12,
+    bottom: 8,
+    left: 12,
+};
+const PT_CHART_LEGEND_LABELS = {
+    usePointStyle: true,
+    pointStyle: 'circle',
+    boxWidth: 9,
+    boxHeight: 9,
+    padding: 18,
+};
+const PT_CHART_TOOLTIP_STYLE = {
+    borderWidth: 1,
+    cornerRadius: 10,
+    caretSize: 7,
+    caretPadding: 8,
+    padding: 12,
+    boxPadding: 6,
+    usePointStyle: true,
+    displayColors: true,
+};
+const PT_CHART_FONT_SIZES = {
+    legend: 12,
+    title: 16,
+    tooltipTitle: 13,
+    tooltipBody: 12,
+    axisTicks: 11,
+    axisTitle: 12,
+    dataLabel: 11,
+};
+const PT_CHART_FONT_WEIGHTS = {
+    regular: 400,
+    medium: 500,
+    semiBold: 600,
+    bold: 'bold',
+};
+const PT_CHART_CARTESIAN_TYPES = [
+    'bar',
+    'line',
+    'scatter',
+    'bubble',
+];
+const PT_CHART_CIRCULAR_TYPES = [
+    'pie',
+    'doughnut',
+    'polarArea',
+];
+const buildAxisTickFont = (fontFamily) => ({
+    family: fontFamily,
+    size: PT_CHART_FONT_SIZES.axisTicks,
+    weight: PT_CHART_FONT_WEIGHTS.regular,
+});
+const isCartesianChartType = (chartType) => PT_CHART_CARTESIAN_TYPES.includes(chartType);
+const isCircularChartType = (chartType) => PT_CHART_CIRCULAR_TYPES.includes(chartType);
+const createDefaultChartOptions = (chartType, theme, config) => {
+    const isCartesianChart = isCartesianChartType(chartType);
+    const isCircularChart = isCircularChartType(chartType);
+    const options = {
+        responsive: true,
+        maintainAspectRatio: false,
+        resizeDelay: PT_CHART_DEFAULT_RESIZE_DELAY,
+        interaction: {
+            intersect: false,
+            mode: isCartesianChart ? 'index' : 'nearest',
+        },
+        animation: PT_CHART_DEFAULT_ANIMATION,
+        layout: {
+            padding: PT_CHART_DEFAULT_LAYOUT_PADDING,
+        },
+        plugins: {
+            legend: {
+                display: true,
+                position: 'bottom',
+                align: 'center',
+                labels: {
+                    color: theme.textColor,
+                    ...PT_CHART_LEGEND_LABELS,
+                    font: {
+                        family: config.fontFamily,
+                        size: PT_CHART_FONT_SIZES.legend,
+                        weight: PT_CHART_FONT_WEIGHTS.medium,
+                    },
+                },
+            },
+            title: {
+                display: Boolean(config.medianTitle?.trim()),
+                text: config.medianTitle?.trim() || '',
+                align: 'start',
+                color: theme.textColor,
+                padding: {
+                    top: 4,
+                    bottom: 18,
+                },
+                font: {
+                    family: config.fontFamily,
+                    size: PT_CHART_FONT_SIZES.title,
+                    weight: PT_CHART_FONT_WEIGHTS.semiBold,
+                },
+            },
+            tooltip: {
+                enabled: true,
+                backgroundColor: theme.tooltipBackgroundColor,
+                titleColor: theme.tooltipTextColor,
+                bodyColor: theme.tooltipTextColor,
+                footerColor: theme.secondaryTextColor,
+                borderColor: theme.tooltipBorderColor,
+                ...PT_CHART_TOOLTIP_STYLE,
+                titleFont: {
+                    family: config.fontFamily,
+                    size: PT_CHART_FONT_SIZES.tooltipTitle,
+                    weight: PT_CHART_FONT_WEIGHTS.semiBold,
+                },
+                bodyFont: {
+                    family: config.fontFamily,
+                    size: PT_CHART_FONT_SIZES.tooltipBody,
+                    weight: PT_CHART_FONT_WEIGHTS.regular,
+                },
+                callbacks: {
+                    label: (context) => config.tooltipLabel(context, isCircularChart),
+                },
+            },
+            datalabels: {
+                display: isCircularChart,
+                color: theme.textColor,
+                anchor: isCircularChart ? 'center' : 'end',
+                align: isCircularChart ? 'center' : 'top',
+                clamp: true,
+                clip: false,
+                formatter: (value, context) => config.dataLabel(value, context, isCircularChart),
+                font: {
+                    family: config.fontFamily,
+                    size: PT_CHART_FONT_SIZES.dataLabel,
+                    weight: PT_CHART_FONT_WEIGHTS.bold,
+                },
+                textStrokeColor: theme.surfaceColor,
+                textStrokeWidth: isCircularChart ? 2 : 0,
+            },
+        },
+    };
+    if (isCartesianChart) {
+        options.scales = {
+            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: buildAxisTickFont(config.fontFamily),
+                },
+                title: {
+                    display: Boolean(config.xAxisTitle?.trim()),
+                    text: config.xAxisTitle?.trim() || '',
+                    color: theme.textColor,
+                    padding: {
+                        top: 12,
+                    },
+                    font: {
+                        family: config.fontFamily,
+                        size: PT_CHART_FONT_SIZES.axisTitle,
+                        weight: PT_CHART_FONT_WEIGHTS.semiBold,
+                    },
+                },
+            },
+            y: {
+                display: true,
+                beginAtZero: config.yAxisBeginAtZero ?? true,
+                min: config.yAxisMin,
+                max: config.yAxisMax,
+                border: {
+                    display: false,
+                },
+                grid: {
+                    display: true,
+                    color: theme.gridColor,
+                    drawTicks: false,
+                    lineWidth: 1,
+                },
+                ticks: {
+                    color: theme.secondaryTextColor,
+                    padding: 10,
+                    stepSize: config.yAxisStepSize,
+                    font: buildAxisTickFont(config.fontFamily),
+                },
+                title: {
+                    display: Boolean(config.yAxisTitle?.trim()),
+                    text: config.yAxisTitle?.trim() || '',
+                    color: theme.textColor,
+                    padding: {
+                        bottom: 12,
+                    },
+                    font: {
+                        family: config.fontFamily,
+                        size: PT_CHART_FONT_SIZES.axisTitle,
+                        weight: PT_CHART_FONT_WEIGHTS.semiBold,
+                    },
+                },
+            },
+        };
+    }
+    return options;
+};
+
+// ng-prime-tools/projects/ng-prime-tools/src/lib/pt-chart/pt-chart.component.ts
 class PTChartComponent {
     constructor(document) {
         this.document = document;
@@ -4107,6 +4329,7 @@ class PTChartComponent {
         this.initializeChart();
         this.observeContainerResize();
         this.observeThemeChanges();
+        this.scheduleChartResize();
     }
     ngOnChanges(changes) {
         if (this.viewInitialized && changes['chartConfig'] && this.chartConfig) {
@@ -4121,8 +4344,8 @@ class PTChartComponent {
     }
     get chartContainerStyle() {
         return {
-            width: this.chartConfig?.chartWidth?.trim() || '100%',
-            height: this.chartConfig?.chartHeight?.trim() || '100%',
+            width: this.chartConfig?.chartWidth?.trim() || PT_CHART_DEFAULT_WIDTH,
+            height: this.chartConfig?.chartHeight?.trim() || PT_CHART_DEFAULT_HEIGHT,
         };
     }
     get chartAriaLabel() {
@@ -4137,6 +4360,7 @@ class PTChartComponent {
         const configuration = this.buildChartConfiguration();
         this.chart = new Chart(canvas, configuration);
         this.currentChartType = this.chartConfig.type;
+        this.scheduleChartResize();
     }
     updateChart() {
         if (!this.viewInitialized || !this.chartConfig) {
@@ -4147,10 +4371,6 @@ class PTChartComponent {
             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;
@@ -4161,6 +4381,7 @@ class PTChartComponent {
             this.chart.options = configuration.options;
         }
         this.chart.update();
+        this.scheduleChartResize();
     }
     buildChartConfiguration() {
         const chartType = this.chartConfig.type;
@@ -4174,192 +4395,18 @@ class PTChartComponent {
         };
     }
     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: {
-                            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);
-                        },
-                    },
-                },
-                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,
-                },
-            },
-        };
-        if (isCartesianChart) {
-            options.scales = this.buildDefaultScales(theme);
-        }
-        return 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,
-                    },
-                },
-            },
-        };
+        return createDefaultChartOptions(chartType, theme, {
+            medianTitle: this.chartConfig.medianTitle,
+            xAxisTitle: this.chartConfig.xAxisTitle,
+            yAxisTitle: this.chartConfig.yAxisTitle,
+            yAxisBeginAtZero: this.chartConfig.scales?.y?.ticks?.beginAtZero,
+            yAxisMin: this.chartConfig.scales?.y?.min,
+            yAxisMax: this.chartConfig.scales?.y?.max,
+            yAxisStepSize: this.chartConfig.scales?.y?.ticks?.stepSize,
+            fontFamily: this.resolveFontFamily(),
+            tooltipLabel: (context, includePercentage) => this.buildTooltipLabel(context, includePercentage),
+            dataLabel: (value, context, isCircularChart) => this.formatDataLabel(value, context.chart, context.datasetIndex, isCircularChart),
+        });
     }
     mergeChartOptions(defaultOptions, consumerOptions, chartType) {
         const defaultPlugins = defaultOptions.plugins;
@@ -4395,10 +4442,6 @@ class PTChartComponent {
                     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,
                     },
@@ -4428,7 +4471,7 @@ class PTChartComponent {
                 },
             },
         };
-        if (this.isCartesianChart(chartType)) {
+        if (isCartesianChartType(chartType)) {
             mergedOptions.scales = this.mergeScales(defaultOptions.scales, consumerOptions.scales);
         }
         else if (consumerOptions.scales) {
@@ -4552,14 +4595,34 @@ class PTChartComponent {
         if (typeof ResizeObserver === 'undefined') {
             return;
         }
-        const container = this.canvasRef.nativeElement.parentElement;
-        if (!container) {
+        const canvas = this.canvasRef.nativeElement;
+        const chartContainer = canvas.closest('.pt-chart');
+        const canvasContainer = canvas.parentElement;
+        const hostElement = chartContainer?.parentElement;
+        this.resizeObserver = new ResizeObserver(() => {
+            this.scheduleChartResize();
+        });
+        if (chartContainer) {
+            this.resizeObserver.observe(chartContainer);
+        }
+        if (canvasContainer) {
+            this.resizeObserver.observe(canvasContainer);
+        }
+        if (hostElement) {
+            this.resizeObserver.observe(hostElement);
+        }
+    }
+    scheduleChartResize() {
+        if (!this.chart) {
             return;
         }
-        this.resizeObserver = new ResizeObserver(() => {
-            this.chart?.resize();
+        requestAnimationFrame(() => {
+            if (!this.chart) {
+                return;
+            }
+            this.chart.resize();
+            this.chart.update('none');
         });
-        this.resizeObserver.observe(container);
     }
     observeThemeChanges() {
         const documentElement = this.document.documentElement;
@@ -4592,6 +4655,7 @@ class PTChartComponent {
             this.chart.options = configuration.options;
         }
         this.chart.update('none');
+        this.scheduleChartResize();
     }
     resolveTheme() {
         const rootStyles = getComputedStyle(this.document.documentElement);
@@ -4664,28 +4728,17 @@ class PTChartComponent {
             ? 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"] }] }); }
+    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%;height:100%;min-width:0;min-height:0}.pt-chart{position:relative;display:block;width:100%;height:100%;min-width:0;min-height:0;box-sizing:border-box;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:0;padding:clamp(.75rem,1.5vw,1.25rem);box-sizing:border-box}.pt-chart canvas{display:block;width:100%!important;height:100%!important;max-width:none;max-height:none;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(max-width:768px){.pt-chart{border-radius:.75rem}.pt-chart__canvas-container{padding:.75rem .625rem}}@media(max-width:480px){.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\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"] }]
+            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%;height:100%;min-width:0;min-height:0}.pt-chart{position:relative;display:block;width:100%;height:100%;min-width:0;min-height:0;box-sizing:border-box;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:0;padding:clamp(.75rem,1.5vw,1.25rem);box-sizing:border-box}.pt-chart canvas{display:block;width:100%!important;height:100%!important;max-width:none;max-height:none;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(max-width:768px){.pt-chart{border-radius:.75rem}.pt-chart__canvas-container{padding:.75rem .625rem}}@media(max-width:480px){.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]