ng-prime-tools 1.0.84 → 1.0.86

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,
                         },
                     },
-                    ...this.chartConfig.options?.plugins,
+                },
+                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,
                 },
             },
         };
-        // 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');
+    }
+    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);
     }
-    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: [""] }); }
+    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,
@@ -5350,6 +5886,7 @@ class PTLoginCardComponent {
         this.fb = fb;
         this.loginErrorMessage = null;
         this.loginSubmit = new EventEmitter();
+        this.destroy$ = new Subject();
         this.formGroup = this.fb.group({});
     }
     ngOnInit() {
@@ -5359,23 +5896,26 @@ class PTLoginCardComponent {
             username: this.loginPageConfig?.login?.username || '',
             password: this.loginPageConfig?.login?.password || '',
         });
-        // Enable/Disable the button based on form validity
-        this.formGroup.statusChanges.subscribe((status) => {
-            this.loginPageConfig.buttonConfig = {
-                ...this.loginPageConfig.buttonConfig,
-                disabled: status !== 'VALID',
-            };
+        this.updateButtonDisabledState(this.formGroup.valid);
+        this.formGroup.statusChanges
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((status) => {
+            this.updateButtonDisabledState(status === 'VALID');
         });
     }
-    // Initialize default values for all fields in loginPageConfig if not set
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    get visibleAdditionalContent() {
+        return (this.loginPageConfig.additionalContent?.filter((item) => item.visible !== false) ?? []);
+    }
     initializeDefaults() {
-        // Initialize backgroundImage
         this.loginPageConfig.backgroundImage = {
             imageUrl: this.loginPageConfig.backgroundImage?.imageUrl || '',
             transparencyPercentage: this.loginPageConfig.backgroundImage?.transparencyPercentage || '100',
             ...this.loginPageConfig.backgroundImage,
         };
-        // Initialize title
         this.loginPageConfig.title = {
             text: this.loginPageConfig.title?.text || 'Login',
             position: this.loginPageConfig.title?.position || 'center',
@@ -5383,7 +5923,6 @@ class PTLoginCardComponent {
             fontSize: this.loginPageConfig.title?.fontSize || '24px',
             ...this.loginPageConfig.title,
         };
-        // Initialize logoUrl
         this.loginPageConfig.logoUrl = {
             altText: this.loginPageConfig.logoUrl?.altText || 'Logo',
             imageUrl: this.loginPageConfig.logoUrl?.imageUrl || '',
@@ -5391,13 +5930,11 @@ class PTLoginCardComponent {
             height: this.loginPageConfig.logoUrl?.height || 'auto',
             ...this.loginPageConfig.logoUrl,
         };
-        // Initialize footer
         this.loginPageConfig.footer = {
             version: this.loginPageConfig.footer?.version || 'V1.0',
             copyright: this.loginPageConfig.footer?.copyright || 'Your Company © 2024',
             ...this.loginPageConfig.footer,
         };
-        // Initialize login
         this.loginPageConfig.login = {
             username: this.loginPageConfig.login?.username || '',
             password: this.loginPageConfig.login?.password || '',
@@ -5406,14 +5943,12 @@ class PTLoginCardComponent {
                 "Veuillez saisir votre nom d'utilisateur et votre mot de passe !",
             ...this.loginPageConfig.login,
         };
-        // Initialize cardConfig
         this.loginPageConfig.loginCardConfig = {
             noBorder: this.loginPageConfig.loginCardConfig?.noBorder ?? true,
             width: this.loginPageConfig.loginCardConfig?.width ?? '400px',
             padding: this.loginPageConfig.loginCardConfig?.padding ?? '40px',
             ...this.loginPageConfig.loginCardConfig,
         };
-        // Initialize usernameField
         this.loginPageConfig.usernameField = {
             name: this.loginPageConfig.usernameField?.name || 'username',
             label: this.loginPageConfig.usernameField?.label || "Nom d'utilisateur",
@@ -5422,7 +5957,6 @@ class PTLoginCardComponent {
                 "Entrer votre nom d'utilisateur",
             ...this.loginPageConfig.usernameField,
         };
-        // Initialize passwordField
         this.loginPageConfig.passwordField = {
             name: this.loginPageConfig.passwordField?.name || 'password',
             label: this.loginPageConfig.passwordField?.label || 'Mot de passe',
@@ -5430,13 +5964,10 @@ class PTLoginCardComponent {
             placeholder: this.loginPageConfig.passwordField?.placeholder ||
                 'Entrer votre mot de passe',
             type: this.loginPageConfig.passwordField?.type || FormInputTypeEnum.PASSWORD,
-            // Show / hide password is now handled by pt-text-input via PrimeNG p-password.
             toggleMask: this.loginPageConfig.passwordField?.toggleMask ?? true,
-            // Disabled by default for login forms.
             feedback: this.loginPageConfig.passwordField?.feedback ?? false,
             ...this.loginPageConfig.passwordField,
         };
-        // Initialize buttonConfig
         this.loginPageConfig.buttonConfig = {
             label: this.loginPageConfig.buttonConfig?.label || 'Login',
             type: this.loginPageConfig.buttonConfig?.type || 'submit',
@@ -5447,40 +5978,77 @@ class PTLoginCardComponent {
             width: this.loginPageConfig.buttonConfig?.width ?? '100%',
             ...this.loginPageConfig.buttonConfig,
         };
+        this.loginPageConfig.additionalContent =
+            this.loginPageConfig.additionalContent?.map((item) => ({
+                type: item.type ?? this.resolveItemType(item),
+                target: item.target ?? '_self',
+                linkPosition: item.linkPosition ?? 'after',
+                align: item.align ?? 'center',
+                visible: item.visible ?? true,
+                ...item,
+            })) ?? [];
     }
     onSubmit() {
         if (this.formGroup.valid) {
-            this.loginSubmit.emit(this.formGroup.value);
-        }
-        else {
-            this.loginPageConfig.login.errorMessage =
-                this.loginPageConfig.login?.emptyFieldsErrorMessage;
+            this.loginSubmit.emit(this.formGroup.getRawValue());
+            return;
         }
+        this.formGroup.markAllAsTouched();
+        this.loginPageConfig.login.errorMessage =
+            this.loginPageConfig.login?.emptyFieldsErrorMessage;
     }
-    // Setup form fields using the usernameField and passwordField from LoginPageConfig
     setupFormFields() {
-        const usernameValidators = this.loginPageConfig.usernameField?.required
+        const usernameField = this.loginPageConfig.usernameField;
+        const passwordField = this.loginPageConfig.passwordField;
+        const usernameValidators = usernameField.required
             ? [Validators.required]
             : [];
-        const passwordValidators = this.loginPageConfig.passwordField?.required
+        const passwordValidators = passwordField.required
             ? [Validators.required]
             : [];
-        this.formGroup.addControl(this.loginPageConfig.usernameField.name, this.fb.control(this.loginPageConfig.login?.username, usernameValidators));
-        this.formGroup.addControl(this.loginPageConfig.passwordField.name, this.fb.control(this.loginPageConfig.login?.password, passwordValidators));
+        this.formGroup.addControl(usernameField.name, this.fb.control(this.loginPageConfig.login?.username ?? '', usernameValidators));
+        this.formGroup.addControl(passwordField.name, this.fb.control(this.loginPageConfig.login?.password ?? '', passwordValidators));
+    }
+    getAdditionalContentClass(item) {
+        return [
+            `additional-content-${item.align ?? 'center'}`,
+            item.styleClass ?? '',
+        ].filter(Boolean);
+    }
+    getLinkRel(item) {
+        if (item.rel) {
+            return item.rel;
+        }
+        return item.target === '_blank' ? 'noopener noreferrer' : null;
+    }
+    resolveItemType(item) {
+        if (item.text && item.linkText && item.url) {
+            return 'text-with-link';
+        }
+        if (item.linkText && item.url) {
+            return 'link';
+        }
+        return 'text';
+    }
+    updateButtonDisabledState(formValid) {
+        this.loginPageConfig.buttonConfig = {
+            ...this.loginPageConfig.buttonConfig,
+            disabled: !formValid,
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTLoginCardComponent, deps: [{ token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTLoginCardComponent, isStandalone: true, selector: "pt-login-card", inputs: { loginPageConfig: "loginPageConfig", loginErrorMessage: "loginErrorMessage" }, outputs: { loginSubmit: "loginSubmit" }, ngImport: i0, template: "<pt-card [config]=\"loginPageConfig.loginCardConfig!\">\n  <!-- Logo -->\n  @if (loginPageConfig.logoUrl?.imageUrl) {\n    <div class=\"logo-container\">\n      <img\n        [src]=\"loginPageConfig.logoUrl?.imageUrl\"\n        [alt]=\"loginPageConfig.logoUrl?.altText || 'Logo'\"\n        [style.width]=\"loginPageConfig.logoUrl?.width || '100px'\"\n        [style.height]=\"loginPageConfig.logoUrl?.height || 'auto'\"\n      />\n    </div>\n  }\n\n  <!-- Title -->\n  <div class=\"title-container\">\n    <h1\n      [ngStyle]=\"{\n        color: loginPageConfig.title?.color || '#333',\n        'font-size': loginPageConfig.title?.fontSize || '24px',\n      }\"\n    >\n      {{ loginPageConfig.title?.text || \"Default Title\" }}\n    </h1>\n  </div>\n\n  <!-- External Error Message -->\n  @if (loginErrorMessage) {\n    <div class=\"error-message\">\n      {{ loginErrorMessage }}\n    </div>\n  }\n\n  <!-- Form -->\n  <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    @if (loginPageConfig.login?.errorMessage) {\n      <div class=\"error-message\">\n        {{ loginPageConfig.login?.errorMessage }}\n      </div>\n    }\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"loginPageConfig.usernameField!\"\n      ></pt-text-input>\n    </div>\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"loginPageConfig.passwordField!\"\n      ></pt-text-input>\n    </div>\n\n    @if (\n      loginPageConfig.forgotPasswordConfig?.text &&\n      loginPageConfig.forgotPasswordConfig?.url\n    ) {\n      <div\n        class=\"forgot-password-container\"\n        [ngClass]=\"\n          'forgot-password-' +\n          (loginPageConfig.forgotPasswordConfig?.align || 'center')\n        \"\n      >\n        <a\n          [href]=\"loginPageConfig.forgotPasswordConfig?.url\"\n          [target]=\"loginPageConfig.forgotPasswordConfig?.target || '_self'\"\n          [ngStyle]=\"loginPageConfig.forgotPasswordConfig?.style\"\n          [class]=\"\n            loginPageConfig.forgotPasswordConfig?.styleClass ||\n            'forgot-password-link'\n          \"\n        >\n          {{ loginPageConfig.forgotPasswordConfig?.text }}\n        </a>\n      </div>\n    }\n\n    <div class=\"submit-btn\">\n      <pt-button [buttonConfig]=\"loginPageConfig.buttonConfig!\"></pt-button>\n    </div>\n  </form>\n\n  <div class=\"login-footer\">\n    {{ loginPageConfig.footer?.version }}\n    <span>{{ loginPageConfig.footer?.copyright }}</span>\n  </div>\n</pt-card>\n", styles: [".logo-container{display:flex;justify-content:center;align-items:center;margin-bottom:20px}.title-container{text-align:center;margin-bottom:20px}.form-container{width:100%}.field{display:flex;flex-direction:column;margin-bottom:20px;width:100%}.error-message{color:red;background-color:#ffe6e6;border:1px solid red;padding:10px;margin-bottom:10px;border-radius:5px;width:100%;text-align:center}.forgot-password-container{width:100%;display:flex;justify-content:center;margin-top:-10px;margin-bottom:20px}.forgot-password-left{justify-content:flex-start}.forgot-password-center{justify-content:center}.forgot-password-right{justify-content:flex-end}.forgot-password-link{color:#2563eb;font-size:.9rem;font-weight:500;text-decoration:none;cursor:pointer;transition:color .2s ease}.forgot-password-link:hover{color:#1d4ed8;text-decoration:underline}.submit-btn{display:flex;justify-content:center;width:100%}::ng-deep pt-button{width:100%}::ng-deep .submit-btn p-button button{width:100%}.login-footer{margin-top:20px;text-align:center;font-size:.9em;color:#555}.login-footer span{display:block;margin-top:.25rem}@media(max-width:768px){pt-card{max-width:300px}.submit-btn{min-width:100%}.forgot-password-container{justify-content:center}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PTCardModule }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "ngmodule", type: PTButtonModule }, { kind: "component", type: PTButtonComponent, selector: "pt-button", inputs: ["buttonConfig"] }, { kind: "ngmodule", type: PTTextInputModule }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTLoginCardComponent, isStandalone: true, selector: "pt-login-card", inputs: { loginPageConfig: "loginPageConfig", loginErrorMessage: "loginErrorMessage" }, outputs: { loginSubmit: "loginSubmit" }, ngImport: i0, template: "<pt-card [config]=\"loginPageConfig.loginCardConfig!\">\n  @if (loginPageConfig.logoUrl?.imageUrl) {\n    <div class=\"logo-container\">\n      <img\n        [src]=\"loginPageConfig.logoUrl?.imageUrl\"\n        [alt]=\"loginPageConfig.logoUrl?.altText || 'Logo'\"\n        [style.width]=\"loginPageConfig.logoUrl?.width || '100px'\"\n        [style.height]=\"loginPageConfig.logoUrl?.height || 'auto'\"\n      />\n    </div>\n  }\n\n  <div class=\"title-container\">\n    <h1\n      [ngStyle]=\"{\n        color: loginPageConfig.title?.color || '#333',\n        'font-size': loginPageConfig.title?.fontSize || '24px',\n      }\"\n    >\n      {{ loginPageConfig.title?.text || \"Default Title\" }}\n    </h1>\n  </div>\n\n  @if (loginErrorMessage) {\n    <div class=\"error-message\" role=\"alert\">\n      {{ loginErrorMessage }}\n    </div>\n  }\n\n  <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    @if (loginPageConfig.login?.errorMessage) {\n      <div class=\"error-message\" role=\"alert\">\n        {{ loginPageConfig.login?.errorMessage }}\n      </div>\n    }\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"loginPageConfig.usernameField!\"\n      ></pt-text-input>\n    </div>\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"loginPageConfig.passwordField!\"\n      ></pt-text-input>\n    </div>\n\n    <div class=\"submit-btn\">\n      <pt-button [buttonConfig]=\"loginPageConfig.buttonConfig!\"></pt-button>\n    </div>\n\n    @if (\n      loginPageConfig.forgotPasswordConfig?.text &&\n      loginPageConfig.forgotPasswordConfig?.url\n    ) {\n      <div\n        class=\"forgot-password-container\"\n        [ngClass]=\"\n          'forgot-password-' +\n          (loginPageConfig.forgotPasswordConfig?.align || 'center')\n        \"\n      >\n        <a\n          [href]=\"loginPageConfig.forgotPasswordConfig?.url\"\n          [target]=\"loginPageConfig.forgotPasswordConfig?.target || '_self'\"\n          [rel]=\"\n            loginPageConfig.forgotPasswordConfig?.target === '_blank'\n              ? 'noopener noreferrer'\n              : null\n          \"\n          [ngStyle]=\"loginPageConfig.forgotPasswordConfig?.style\"\n          [class]=\"\n            loginPageConfig.forgotPasswordConfig?.styleClass ||\n            'forgot-password-link'\n          \"\n        >\n          {{ loginPageConfig.forgotPasswordConfig?.text }}\n        </a>\n      </div>\n    }\n\n    @if (visibleAdditionalContent.length > 0) {\n      <div class=\"additional-content-list\">\n        @for (item of visibleAdditionalContent; track item.id || $index) {\n          <div\n            class=\"additional-content-item\"\n            [ngClass]=\"getAdditionalContentClass(item)\"\n            [ngStyle]=\"item.style\"\n          >\n            @switch (item.type) {\n              @case (\"link\") {\n                @if (item.linkText && item.url) {\n                  <a\n                    [href]=\"item.url\"\n                    [target]=\"item.target || '_self'\"\n                    [rel]=\"getLinkRel(item)\"\n                    [class]=\"item.linkStyleClass || 'additional-content-link'\"\n                    [ngStyle]=\"item.linkStyle\"\n                  >\n                    {{ item.linkText }}\n                  </a>\n                }\n              }\n\n              @case (\"text-with-link\") {\n                @if (\n                  item.linkPosition === \"before\" && item.linkText && item.url\n                ) {\n                  <a\n                    [href]=\"item.url\"\n                    [target]=\"item.target || '_self'\"\n                    [rel]=\"getLinkRel(item)\"\n                    [class]=\"item.linkStyleClass || 'additional-content-link'\"\n                    [ngStyle]=\"item.linkStyle\"\n                  >\n                    {{ item.linkText }}\n                  </a>\n\n                  @if (item.text) {\n                    <span class=\"additional-content-text\">\n                      {{ item.text }}\n                    </span>\n                  }\n                } @else {\n                  @if (item.text) {\n                    <span class=\"additional-content-text\">\n                      {{ item.text }}\n                    </span>\n                  }\n\n                  @if (item.linkText && item.url) {\n                    <a\n                      [href]=\"item.url\"\n                      [target]=\"item.target || '_self'\"\n                      [rel]=\"getLinkRel(item)\"\n                      [class]=\"item.linkStyleClass || 'additional-content-link'\"\n                      [ngStyle]=\"item.linkStyle\"\n                    >\n                      {{ item.linkText }}\n                    </a>\n                  }\n                }\n              }\n\n              @default {\n                @if (item.text) {\n                  <span class=\"additional-content-text\">\n                    {{ item.text }}\n                  </span>\n                }\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </form>\n\n  <div class=\"login-footer\">\n    {{ loginPageConfig.footer?.version }}\n\n    <span>\n      {{ loginPageConfig.footer?.copyright }}\n    </span>\n  </div>\n</pt-card>\n", styles: [":host{display:block;width:100%;min-width:0}.logo-container{display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}.logo-container img{display:block;max-width:100%;object-fit:contain}.title-container{margin-bottom:1.25rem;text-align:center}.title-container h1{margin:0;line-height:1.25}.form-container{width:100%}.field{display:flex;flex-direction:column;width:100%;margin-bottom:1.25rem}.error-message{width:100%;box-sizing:border-box;margin-bottom:.75rem;padding:.75rem .875rem;color:var(--p-message-error-color, #b91c1c);background:var(--p-message-error-background, #fef2f2);border:1px solid var(--p-message-error-border-color, #fecaca);border-radius:var(--p-content-border-radius, .5rem);font-size:.875rem;line-height:1.4;text-align:center}.submit-btn{display:flex;justify-content:center;width:100%}:host ::ng-deep .submit-btn pt-button{display:block;width:100%}:host ::ng-deep .submit-btn p-button,:host ::ng-deep .submit-btn p-button button{width:100%}.forgot-password-container{display:flex;width:100%;box-sizing:border-box;margin-top:.875rem;margin-bottom:0;font-size:.875rem;line-height:1.4}.forgot-password-left{justify-content:flex-start;text-align:left}.forgot-password-center{justify-content:center;text-align:center}.forgot-password-right{justify-content:flex-end;text-align:right}.forgot-password-link,.additional-content-link{color:var(--p-primary-color, #2563eb);font-size:.875rem;font-weight:500;line-height:1.4;text-decoration:none;cursor:pointer;transition:color .16s ease,text-decoration-color .16s ease}.forgot-password-link:hover,.additional-content-link:hover{color:var(--p-primary-hover-color, #1d4ed8);text-decoration:underline;text-underline-offset:.2rem}.forgot-password-link:focus-visible,.additional-content-link:focus-visible{outline:2px solid var(--p-primary-color, #2563eb);outline-offset:.2rem;border-radius:.2rem}.additional-content-list{display:flex;flex-direction:column;width:100%;margin-top:1rem;gap:.55rem}.forgot-password-container+.additional-content-list{margin-top:.75rem}.additional-content-item{display:flex;flex-wrap:wrap;align-items:baseline;width:100%;box-sizing:border-box;gap:.3rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.875rem;line-height:1.45}.additional-content-left{justify-content:flex-start;text-align:left}.additional-content-center{justify-content:center;text-align:center}.additional-content-right{justify-content:flex-end;text-align:right}.additional-content-text{color:inherit}.login-footer{margin-top:1.25rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.8rem;line-height:1.4;text-align:center}.login-footer span{display:block;margin-top:.25rem}:host-context(.p-dark) .error-message,:host-context(.app-dark) .error-message,:host-context(.dark) .error-message,:host-context(.dark-mode) .error-message,:host-context([data-theme=\"dark\"]) .error-message{color:var(--p-message-error-color, #fca5a5);background:var(--p-message-error-background, rgba(127, 29, 29, .25));border-color:var(--p-message-error-border-color, rgba(248, 113, 113, .4))}:host-context(.p-dark) .forgot-password-link,:host-context(.app-dark) .forgot-password-link,:host-context(.dark) .forgot-password-link,:host-context(.dark-mode) .forgot-password-link,:host-context([data-theme=\"dark\"]) .forgot-password-link,:host-context(.p-dark) .additional-content-link,:host-context(.app-dark) .additional-content-link,:host-context(.dark) .additional-content-link,:host-context(.dark-mode) .additional-content-link,:host-context([data-theme=\"dark\"]) .additional-content-link{color:var(--p-primary-color, #60a5fa)}:host-context(.p-dark) .forgot-password-link:hover,:host-context(.app-dark) .forgot-password-link:hover,:host-context(.dark) .forgot-password-link:hover,:host-context(.dark-mode) .forgot-password-link:hover,:host-context([data-theme=\"dark\"]) .forgot-password-link:hover,:host-context(.p-dark) .additional-content-link:hover,:host-context(.app-dark) .additional-content-link:hover,:host-context(.dark) .additional-content-link:hover,:host-context(.dark-mode) .additional-content-link:hover,:host-context([data-theme=\"dark\"]) .additional-content-link:hover{color:var(--p-primary-hover-color, #93c5fd)}:host-context(.p-dark) .additional-content-item,:host-context(.app-dark) .additional-content-item,:host-context(.dark) .additional-content-item,:host-context(.dark-mode) .additional-content-item,:host-context([data-theme=\"dark\"]) .additional-content-item,:host-context(.p-dark) .login-footer,:host-context(.app-dark) .login-footer,:host-context(.dark) .login-footer,:host-context(.dark-mode) .login-footer,:host-context([data-theme=\"dark\"]) .login-footer{color:var(--p-text-muted-color, var(--text-color-secondary, #cbd5e1))}@media(max-width:768px){:host ::ng-deep pt-card{width:100%;max-width:100%}.submit-btn{min-width:100%}.forgot-password-container{margin-top:.75rem}.additional-content-list{margin-top:.875rem}.forgot-password-container+.additional-content-list{margin-top:.65rem}}@media(max-width:480px){.logo-container,.title-container,.field{margin-bottom:1rem}.forgot-password-container,.forgot-password-link,.additional-content-item,.additional-content-link{font-size:.82rem}.additional-content-list{gap:.5rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PTCardModule }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "ngmodule", type: PTButtonModule }, { kind: "component", type: PTButtonComponent, selector: "pt-button", inputs: ["buttonConfig"] }, { kind: "ngmodule", type: PTTextInputModule }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTLoginCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-login-card', imports: [
+            args: [{ selector: 'pt-login-card', standalone: true, imports: [
                         CommonModule,
                         FormsModule,
                         ReactiveFormsModule,
                         PTCardModule,
                         PTButtonModule,
                         PTTextInputModule,
-                    ], template: "<pt-card [config]=\"loginPageConfig.loginCardConfig!\">\n  <!-- Logo -->\n  @if (loginPageConfig.logoUrl?.imageUrl) {\n    <div class=\"logo-container\">\n      <img\n        [src]=\"loginPageConfig.logoUrl?.imageUrl\"\n        [alt]=\"loginPageConfig.logoUrl?.altText || 'Logo'\"\n        [style.width]=\"loginPageConfig.logoUrl?.width || '100px'\"\n        [style.height]=\"loginPageConfig.logoUrl?.height || 'auto'\"\n      />\n    </div>\n  }\n\n  <!-- Title -->\n  <div class=\"title-container\">\n    <h1\n      [ngStyle]=\"{\n        color: loginPageConfig.title?.color || '#333',\n        'font-size': loginPageConfig.title?.fontSize || '24px',\n      }\"\n    >\n      {{ loginPageConfig.title?.text || \"Default Title\" }}\n    </h1>\n  </div>\n\n  <!-- External Error Message -->\n  @if (loginErrorMessage) {\n    <div class=\"error-message\">\n      {{ loginErrorMessage }}\n    </div>\n  }\n\n  <!-- Form -->\n  <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    @if (loginPageConfig.login?.errorMessage) {\n      <div class=\"error-message\">\n        {{ loginPageConfig.login?.errorMessage }}\n      </div>\n    }\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"loginPageConfig.usernameField!\"\n      ></pt-text-input>\n    </div>\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"loginPageConfig.passwordField!\"\n      ></pt-text-input>\n    </div>\n\n    @if (\n      loginPageConfig.forgotPasswordConfig?.text &&\n      loginPageConfig.forgotPasswordConfig?.url\n    ) {\n      <div\n        class=\"forgot-password-container\"\n        [ngClass]=\"\n          'forgot-password-' +\n          (loginPageConfig.forgotPasswordConfig?.align || 'center')\n        \"\n      >\n        <a\n          [href]=\"loginPageConfig.forgotPasswordConfig?.url\"\n          [target]=\"loginPageConfig.forgotPasswordConfig?.target || '_self'\"\n          [ngStyle]=\"loginPageConfig.forgotPasswordConfig?.style\"\n          [class]=\"\n            loginPageConfig.forgotPasswordConfig?.styleClass ||\n            'forgot-password-link'\n          \"\n        >\n          {{ loginPageConfig.forgotPasswordConfig?.text }}\n        </a>\n      </div>\n    }\n\n    <div class=\"submit-btn\">\n      <pt-button [buttonConfig]=\"loginPageConfig.buttonConfig!\"></pt-button>\n    </div>\n  </form>\n\n  <div class=\"login-footer\">\n    {{ loginPageConfig.footer?.version }}\n    <span>{{ loginPageConfig.footer?.copyright }}</span>\n  </div>\n</pt-card>\n", styles: [".logo-container{display:flex;justify-content:center;align-items:center;margin-bottom:20px}.title-container{text-align:center;margin-bottom:20px}.form-container{width:100%}.field{display:flex;flex-direction:column;margin-bottom:20px;width:100%}.error-message{color:red;background-color:#ffe6e6;border:1px solid red;padding:10px;margin-bottom:10px;border-radius:5px;width:100%;text-align:center}.forgot-password-container{width:100%;display:flex;justify-content:center;margin-top:-10px;margin-bottom:20px}.forgot-password-left{justify-content:flex-start}.forgot-password-center{justify-content:center}.forgot-password-right{justify-content:flex-end}.forgot-password-link{color:#2563eb;font-size:.9rem;font-weight:500;text-decoration:none;cursor:pointer;transition:color .2s ease}.forgot-password-link:hover{color:#1d4ed8;text-decoration:underline}.submit-btn{display:flex;justify-content:center;width:100%}::ng-deep pt-button{width:100%}::ng-deep .submit-btn p-button button{width:100%}.login-footer{margin-top:20px;text-align:center;font-size:.9em;color:#555}.login-footer span{display:block;margin-top:.25rem}@media(max-width:768px){pt-card{max-width:300px}.submit-btn{min-width:100%}.forgot-password-container{justify-content:center}}\n"] }]
+                    ], template: "<pt-card [config]=\"loginPageConfig.loginCardConfig!\">\n  @if (loginPageConfig.logoUrl?.imageUrl) {\n    <div class=\"logo-container\">\n      <img\n        [src]=\"loginPageConfig.logoUrl?.imageUrl\"\n        [alt]=\"loginPageConfig.logoUrl?.altText || 'Logo'\"\n        [style.width]=\"loginPageConfig.logoUrl?.width || '100px'\"\n        [style.height]=\"loginPageConfig.logoUrl?.height || 'auto'\"\n      />\n    </div>\n  }\n\n  <div class=\"title-container\">\n    <h1\n      [ngStyle]=\"{\n        color: loginPageConfig.title?.color || '#333',\n        'font-size': loginPageConfig.title?.fontSize || '24px',\n      }\"\n    >\n      {{ loginPageConfig.title?.text || \"Default Title\" }}\n    </h1>\n  </div>\n\n  @if (loginErrorMessage) {\n    <div class=\"error-message\" role=\"alert\">\n      {{ loginErrorMessage }}\n    </div>\n  }\n\n  <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    @if (loginPageConfig.login?.errorMessage) {\n      <div class=\"error-message\" role=\"alert\">\n        {{ loginPageConfig.login?.errorMessage }}\n      </div>\n    }\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"loginPageConfig.usernameField!\"\n      ></pt-text-input>\n    </div>\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"loginPageConfig.passwordField!\"\n      ></pt-text-input>\n    </div>\n\n    <div class=\"submit-btn\">\n      <pt-button [buttonConfig]=\"loginPageConfig.buttonConfig!\"></pt-button>\n    </div>\n\n    @if (\n      loginPageConfig.forgotPasswordConfig?.text &&\n      loginPageConfig.forgotPasswordConfig?.url\n    ) {\n      <div\n        class=\"forgot-password-container\"\n        [ngClass]=\"\n          'forgot-password-' +\n          (loginPageConfig.forgotPasswordConfig?.align || 'center')\n        \"\n      >\n        <a\n          [href]=\"loginPageConfig.forgotPasswordConfig?.url\"\n          [target]=\"loginPageConfig.forgotPasswordConfig?.target || '_self'\"\n          [rel]=\"\n            loginPageConfig.forgotPasswordConfig?.target === '_blank'\n              ? 'noopener noreferrer'\n              : null\n          \"\n          [ngStyle]=\"loginPageConfig.forgotPasswordConfig?.style\"\n          [class]=\"\n            loginPageConfig.forgotPasswordConfig?.styleClass ||\n            'forgot-password-link'\n          \"\n        >\n          {{ loginPageConfig.forgotPasswordConfig?.text }}\n        </a>\n      </div>\n    }\n\n    @if (visibleAdditionalContent.length > 0) {\n      <div class=\"additional-content-list\">\n        @for (item of visibleAdditionalContent; track item.id || $index) {\n          <div\n            class=\"additional-content-item\"\n            [ngClass]=\"getAdditionalContentClass(item)\"\n            [ngStyle]=\"item.style\"\n          >\n            @switch (item.type) {\n              @case (\"link\") {\n                @if (item.linkText && item.url) {\n                  <a\n                    [href]=\"item.url\"\n                    [target]=\"item.target || '_self'\"\n                    [rel]=\"getLinkRel(item)\"\n                    [class]=\"item.linkStyleClass || 'additional-content-link'\"\n                    [ngStyle]=\"item.linkStyle\"\n                  >\n                    {{ item.linkText }}\n                  </a>\n                }\n              }\n\n              @case (\"text-with-link\") {\n                @if (\n                  item.linkPosition === \"before\" && item.linkText && item.url\n                ) {\n                  <a\n                    [href]=\"item.url\"\n                    [target]=\"item.target || '_self'\"\n                    [rel]=\"getLinkRel(item)\"\n                    [class]=\"item.linkStyleClass || 'additional-content-link'\"\n                    [ngStyle]=\"item.linkStyle\"\n                  >\n                    {{ item.linkText }}\n                  </a>\n\n                  @if (item.text) {\n                    <span class=\"additional-content-text\">\n                      {{ item.text }}\n                    </span>\n                  }\n                } @else {\n                  @if (item.text) {\n                    <span class=\"additional-content-text\">\n                      {{ item.text }}\n                    </span>\n                  }\n\n                  @if (item.linkText && item.url) {\n                    <a\n                      [href]=\"item.url\"\n                      [target]=\"item.target || '_self'\"\n                      [rel]=\"getLinkRel(item)\"\n                      [class]=\"item.linkStyleClass || 'additional-content-link'\"\n                      [ngStyle]=\"item.linkStyle\"\n                    >\n                      {{ item.linkText }}\n                    </a>\n                  }\n                }\n              }\n\n              @default {\n                @if (item.text) {\n                  <span class=\"additional-content-text\">\n                    {{ item.text }}\n                  </span>\n                }\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </form>\n\n  <div class=\"login-footer\">\n    {{ loginPageConfig.footer?.version }}\n\n    <span>\n      {{ loginPageConfig.footer?.copyright }}\n    </span>\n  </div>\n</pt-card>\n", styles: [":host{display:block;width:100%;min-width:0}.logo-container{display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}.logo-container img{display:block;max-width:100%;object-fit:contain}.title-container{margin-bottom:1.25rem;text-align:center}.title-container h1{margin:0;line-height:1.25}.form-container{width:100%}.field{display:flex;flex-direction:column;width:100%;margin-bottom:1.25rem}.error-message{width:100%;box-sizing:border-box;margin-bottom:.75rem;padding:.75rem .875rem;color:var(--p-message-error-color, #b91c1c);background:var(--p-message-error-background, #fef2f2);border:1px solid var(--p-message-error-border-color, #fecaca);border-radius:var(--p-content-border-radius, .5rem);font-size:.875rem;line-height:1.4;text-align:center}.submit-btn{display:flex;justify-content:center;width:100%}:host ::ng-deep .submit-btn pt-button{display:block;width:100%}:host ::ng-deep .submit-btn p-button,:host ::ng-deep .submit-btn p-button button{width:100%}.forgot-password-container{display:flex;width:100%;box-sizing:border-box;margin-top:.875rem;margin-bottom:0;font-size:.875rem;line-height:1.4}.forgot-password-left{justify-content:flex-start;text-align:left}.forgot-password-center{justify-content:center;text-align:center}.forgot-password-right{justify-content:flex-end;text-align:right}.forgot-password-link,.additional-content-link{color:var(--p-primary-color, #2563eb);font-size:.875rem;font-weight:500;line-height:1.4;text-decoration:none;cursor:pointer;transition:color .16s ease,text-decoration-color .16s ease}.forgot-password-link:hover,.additional-content-link:hover{color:var(--p-primary-hover-color, #1d4ed8);text-decoration:underline;text-underline-offset:.2rem}.forgot-password-link:focus-visible,.additional-content-link:focus-visible{outline:2px solid var(--p-primary-color, #2563eb);outline-offset:.2rem;border-radius:.2rem}.additional-content-list{display:flex;flex-direction:column;width:100%;margin-top:1rem;gap:.55rem}.forgot-password-container+.additional-content-list{margin-top:.75rem}.additional-content-item{display:flex;flex-wrap:wrap;align-items:baseline;width:100%;box-sizing:border-box;gap:.3rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.875rem;line-height:1.45}.additional-content-left{justify-content:flex-start;text-align:left}.additional-content-center{justify-content:center;text-align:center}.additional-content-right{justify-content:flex-end;text-align:right}.additional-content-text{color:inherit}.login-footer{margin-top:1.25rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.8rem;line-height:1.4;text-align:center}.login-footer span{display:block;margin-top:.25rem}:host-context(.p-dark) .error-message,:host-context(.app-dark) .error-message,:host-context(.dark) .error-message,:host-context(.dark-mode) .error-message,:host-context([data-theme=\"dark\"]) .error-message{color:var(--p-message-error-color, #fca5a5);background:var(--p-message-error-background, rgba(127, 29, 29, .25));border-color:var(--p-message-error-border-color, rgba(248, 113, 113, .4))}:host-context(.p-dark) .forgot-password-link,:host-context(.app-dark) .forgot-password-link,:host-context(.dark) .forgot-password-link,:host-context(.dark-mode) .forgot-password-link,:host-context([data-theme=\"dark\"]) .forgot-password-link,:host-context(.p-dark) .additional-content-link,:host-context(.app-dark) .additional-content-link,:host-context(.dark) .additional-content-link,:host-context(.dark-mode) .additional-content-link,:host-context([data-theme=\"dark\"]) .additional-content-link{color:var(--p-primary-color, #60a5fa)}:host-context(.p-dark) .forgot-password-link:hover,:host-context(.app-dark) .forgot-password-link:hover,:host-context(.dark) .forgot-password-link:hover,:host-context(.dark-mode) .forgot-password-link:hover,:host-context([data-theme=\"dark\"]) .forgot-password-link:hover,:host-context(.p-dark) .additional-content-link:hover,:host-context(.app-dark) .additional-content-link:hover,:host-context(.dark) .additional-content-link:hover,:host-context(.dark-mode) .additional-content-link:hover,:host-context([data-theme=\"dark\"]) .additional-content-link:hover{color:var(--p-primary-hover-color, #93c5fd)}:host-context(.p-dark) .additional-content-item,:host-context(.app-dark) .additional-content-item,:host-context(.dark) .additional-content-item,:host-context(.dark-mode) .additional-content-item,:host-context([data-theme=\"dark\"]) .additional-content-item,:host-context(.p-dark) .login-footer,:host-context(.app-dark) .login-footer,:host-context(.dark) .login-footer,:host-context(.dark-mode) .login-footer,:host-context([data-theme=\"dark\"]) .login-footer{color:var(--p-text-muted-color, var(--text-color-secondary, #cbd5e1))}@media(max-width:768px){:host ::ng-deep pt-card{width:100%;max-width:100%}.submit-btn{min-width:100%}.forgot-password-container{margin-top:.75rem}.additional-content-list{margin-top:.875rem}.forgot-password-container+.additional-content-list{margin-top:.65rem}}@media(max-width:480px){.logo-container,.title-container,.field{margin-bottom:1rem}.forgot-password-container,.forgot-password-link,.additional-content-item,.additional-content-link{font-size:.82rem}.additional-content-list{gap:.5rem}}\n"] }]
         }], ctorParameters: () => [{ type: i2.FormBuilder }], propDecorators: { loginPageConfig: [{
                 type: Input
             }], loginErrorMessage: [{