@fuentis/phoenix-ui 0.0.9-alpha.572 → 0.0.9-alpha.573

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -74,9 +74,9 @@ import * as i14 from 'primeng/floatlabel';
 import { FloatLabelModule } from 'primeng/floatlabel';
 import * as i2$4 from 'primeng/selectbutton';
 import { SelectButtonModule } from 'primeng/selectbutton';
-import jsPDF from 'jspdf';
-import autoTable from 'jspdf-autotable';
 import * as XLSX from 'xlsx';
+import pdfMake from 'pdfmake/build/pdfmake';
+import pdfFonts from 'pdfmake/build/vfs_fonts';
 import * as i1$2 from 'primeng/dynamicdialog';
 import { DialogService } from 'primeng/dynamicdialog';
 import * as i2$6 from 'primeng/datepicker';
@@ -2407,11 +2407,16 @@ function getNestedValue(obj, path) {
  * - Removes HTML tags
  * - Replaces   and non-breaking spaces
  * - Normalizes Unicode (keeps German umlauts and Serbian letters)
+ * - Removes emoji characters (since PDF fonts don't support them properly)
  */
 function sanitizeText(v) {
     const s = (v ?? '').toString();
     const noHtml = s.replace(/<[^>]*>/g, '');
-    return noHtml
+    // Remove emoji characters - they don't render properly in PDF
+    // Emoji ranges: U+1F300–U+1F9FF, U+2600–U+26FF, U+2700–U+27BF, U+FE00–U+FE0F, U+1F900–U+1F9FF, U+1F1E0–U+1F1FF
+    const emojiRegex = /[\u{1F300}-\u{1F9FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{FE00}-\u{FE0F}\u{1F900}-\u{1F9FF}\u{1F1E0}-\u{1F1FF}]/gu;
+    const noEmoji = noHtml.replace(emojiRegex, '');
+    return noEmoji
         .replace(/&nbsp;/g, ' ')
         .replace(/\u00A0/g, ' ')
         .normalize('NFKC')
@@ -2495,17 +2500,46 @@ function collapseInlineSpaces(s) {
         .trim();
 }
 /**
- * Exports table rows to a PDF file.
- * - Uses jsPDF + autoTable
+ * Loads Noto Sans font from CDN for better emoji support
+ */
+async function loadNotoSansFont() {
+    try {
+        // Noto Sans has better Unicode and emoji support than Roboto
+        // Try jsDelivr CDN first (more reliable)
+        const response = await fetch('https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/notosans/NotoSans-Regular.ttf');
+        if (!response.ok) {
+            return null;
+        }
+        const arrayBuffer = await response.arrayBuffer();
+        const bytes = new Uint8Array(arrayBuffer);
+        let binary = '';
+        const chunkSize = 8192;
+        for (let i = 0; i < bytes.length; i += chunkSize) {
+            const chunk = bytes.subarray(i, i + chunkSize);
+            binary += String.fromCharCode.apply(null, Array.from(chunk));
+        }
+        return btoa(binary);
+    }
+    catch (error) {
+        console.warn('Failed to load Noto Sans font from CDN:', error);
+        return null;
+    }
+}
+/**
+ * Exports table rows to a PDF file using pdfmake.
+ * - Uses pdfmake which has excellent Unicode support for Serbian characters (ć, č, đ, š, ž)
  * - Respects only visible columns
  * - Translates headers with provided translation function
+ * - Attempts to load Noto Sans font for better emoji support
  */
-function exportRowsToPdf(columns, rows, columnTypeMap, columnTypeEnum, t, fileName = 'table.pdf', options = {}) {
+async function exportRowsToPdf(columns, rows, columnTypeMap, columnTypeEnum, t, fileName = 'table.pdf', options = {}) {
     if (!columns?.length)
         return;
     const locale = options.locale || 'en-US';
-    const head = [columns.map((c) => sanitizeText(t(c.header)))];
-    const body = (rows ?? []).map((row) => columns.map((col, idx) => {
+    // Prepare headers
+    const headers = columns.map((c) => sanitizeText(t(c.header)));
+    // Prepare body rows
+    const bodyRows = (rows ?? []).map((row) => columns.map((col) => {
         const type = columnTypeMap[col.field] || col.columnType;
         if (type === columnTypeEnum.LIST || type === columnTypeEnum.LIST_TAG) {
             // make each item its own line; keep items intact (no bullets)
@@ -2521,28 +2555,126 @@ function exportRowsToPdf(columns, rows, columnTypeMap, columnTypeEnum, t, fileNa
         const raw = String(getDisplayValue(row, col, columnTypeMap, columnTypeEnum, t, locale));
         return sanitizeText(collapseInlineSpaces(raw));
     }));
-    const doc = new jsPDF({ orientation: 'landscape', unit: 'pt', format: 'A4' });
-    // Build columnStyles dynamically: all LIST/LIST_TAG columns get min width
-    const columnStyles = {};
-    columns.forEach((col, idx) => {
+    // Set up pdfmake fonts - pdfmake has built-in support for Unicode characters
+    // pdfFonts contains the vfs object directly
+    if (pdfFonts && pdfFonts.pdfMake) {
+        pdfMake.vfs = pdfFonts.pdfMake.vfs;
+    }
+    else if (pdfFonts && pdfFonts.vfs) {
+        pdfMake.vfs = pdfFonts.vfs;
+    }
+    else {
+        // Fallback: try to access vfs directly
+        pdfMake.vfs = pdfFonts || {};
+    }
+    // Try to load Noto Sans font which has better emoji support
+    // This is optional - if it fails, we'll use Roboto
+    try {
+        const notoSansFont = await loadNotoSansFont();
+        if (notoSansFont) {
+            // Add Noto Sans to pdfmake fonts
+            if (!pdfMake.fonts) {
+                pdfMake.fonts = {};
+            }
+            pdfMake.fonts.NotoSans = {
+                normal: 'NotoSans-Regular.ttf',
+                bold: 'NotoSans-Bold.ttf',
+                italics: 'NotoSans-Italic.ttf',
+                bolditalics: 'NotoSans-BoldItalic.ttf',
+            };
+            // Add font file to vfs
+            pdfMake.vfs['NotoSans-Regular.ttf'] = notoSansFont;
+            pdfMake.vfs['NotoSans-Bold.ttf'] = notoSansFont; // Use same font for bold
+        }
+    }
+    catch (error) {
+        console.warn('Failed to load Noto Sans font, using default Roboto:', error);
+    }
+    // Use 'auto' widths for pdfmake - it will automatically fit columns to page width
+    // pdfmake works well with Serbian characters and handles auto-sizing better
+    const columnWidths = columns.map((col) => {
         const type = columnTypeMap[col.field] || col.columnType;
         if (type === columnTypeEnum.LIST || type === columnTypeEnum.LIST_TAG) {
-            columnStyles[idx] = { cellWidth: 150 }; // set your min width
+            return 100; // Fixed width for LIST columns
         }
+        return 'auto'; // Auto width for other columns - pdfmake will fit them
     });
-    autoTable(doc, {
-        head,
-        body,
+    // Build table body for pdfmake
+    const tableBody = [
+        // Header row
+        headers.map((header) => ({
+            text: header,
+            style: 'tableHeader',
+            bold: true,
+        })),
+        // Data rows
+        ...bodyRows.map((row) => row.map((cell, cellIdx) => {
+            const col = columns[cellIdx];
+            const type = columnTypeMap[col?.field] || col?.columnType;
+            return {
+                text: cell || '',
+                style: 'tableCell',
+                // Enable text wrapping for all cells
+                noWrap: false,
+            };
+        })),
+    ];
+    // PDF document definition
+    const docDefinition = {
+        pageOrientation: 'landscape',
+        pageSize: 'A4',
+        content: [
+            {
+                table: {
+                    headerRows: 1,
+                    widths: columnWidths,
+                    body: tableBody,
+                },
+                layout: {
+                    hLineWidth: () => 0, // Remove horizontal lines between rows
+                    vLineWidth: () => 0, // Remove vertical lines between columns
+                    paddingLeft: () => 3,
+                    paddingRight: () => 3,
+                    paddingTop: () => 3,
+                    paddingBottom: () => 3,
+                    // Alternating row colors: grey, white, grey, white...
+                    fillColor: (rowIndex, node, columnIndex) => {
+                        // Header row stays blue RGB(41, 128, 186)
+                        if (rowIndex === 0) {
+                            return [41, 128, 186];
+                        }
+                        // Data rows alternate: grey for odd rows (1, 3, 5...), white for even rows (2, 4, 6...)
+                        return (rowIndex - 1) % 2 === 0 ? '#f5f5f5' : null; // grey for odd rows, white (null) for even rows
+                    },
+                },
+            },
+        ],
         styles: {
-            fontSize: 9,
-            cellPadding: 5,
-            overflow: 'linebreak',
-            valign: 'top',
+            tableHeader: {
+                fontSize: 11,
+                bold: true,
+                color: '#ffffff',
+                fillColor: [41, 128, 186], // RGB(41, 128, 186)
+                alignment: 'left',
+                margin: [0, 5, 0, 5],
+            },
+            tableCell: {
+                fontSize: 9,
+                alignment: 'left',
+                margin: [0, 5, 0, 5],
+                // Enable text wrapping
+                noWrap: false,
+            },
         },
-        columnStyles: Object.keys(columnStyles).length > 0 ? columnStyles : undefined,
-        margin: { top: 36, right: 24, bottom: 36, left: 24 },
-    });
-    doc.save(fileName);
+        defaultStyle: {
+            // Use NotoSans if loaded, otherwise fallback to Roboto
+            font: pdfMake.fonts?.NotoSans ? 'NotoSans' : 'Roboto',
+            // NotoSans has better Unicode and emoji support than Roboto
+        },
+        pageMargins: [15, 30, 15, 30], // Reduced margins to give more space
+    };
+    // Generate and download PDF
+    pdfMake.createPdf(docDefinition).download(fileName);
 }
 /* -------------------------- Export: Excel -------------------------- */
 /**
@@ -2750,10 +2882,10 @@ class TableComponent {
     initialSortFieldApplied = null;
     /** True while initial sort is running to avoid "flash" of unsorted data */
     initialSortLoading = false;
-    /** How many skeleton rows to render while initial sort/data is loading */
-    skeletonRowCount = 8;
-    /** Array used by Angular @for (must be iterable) */
-    skeletonRows = Array.from({ length: this.skeletonRowCount });
+    // /** How many skeleton rows to render while initial sort/data is loading */
+    // skeletonRowCount = 8;
+    // /** Array used by Angular @for (must be iterable) */
+    // skeletonRows = Array.from({ length: this.skeletonRowCount });
     createSortWorkerInline() {
         const code = `
     const compareStringsNatural = (a,b) => a.localeCompare(b, undefined, { numeric:true, sensitivity:'base' });
@@ -3269,7 +3401,9 @@ class TableComponent {
             const file = this.tableConfiguration?.key
                 ? buildFileName(this.tableConfiguration.key, 'pdf')
                 : buildFileName('table', 'pdf');
-            exportRowsToPdf(this.selectedColumns, this.tableData, this.columnTypeMap, this.columnTypeEnum, (k) => this.translateService.instant(k), file);
+            exportRowsToPdf(this.selectedColumns, this.tableData, this.columnTypeMap, this.columnTypeEnum, (k) => this.translateService.instant(k), file).catch((error) => {
+                console.error('Failed to export PDF:', error);
+            });
             return;
         }
         if (event?.action?.key === 'EXPORT_EXCEL') {