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

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,20 +2500,52 @@ 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) => {
+    /* =========================
+       HEADERS
+    ========================= */
+    const headers = columns.map((c) => sanitizeText(t(c.header)));
+    /* =========================
+       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)
             const rawVal = getNestedValue(row, col.field);
             const items = Array.isArray(rawVal)
                 ? rawVal.map((x) => x?.name ?? x)
@@ -2516,33 +2553,148 @@ function exportRowsToPdf(columns, rows, columnTypeMap, columnTypeEnum, t, fileNa
             const cleaned = items
                 .map((it) => collapseInlineSpaces(String(it)))
                 .filter(Boolean);
-            return sanitizeText(cleaned.join(',\n')); // hard break after commas
+            return sanitizeText(cleaned.join(',\n'));
         }
         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) => {
+    /* =========================
+       FONTS
+    ========================= */
+    if (pdfFonts && pdfFonts.pdfMake) {
+        pdfMake.vfs = pdfFonts.pdfMake.vfs;
+    }
+    else if (pdfFonts && pdfFonts.vfs) {
+        pdfMake.vfs = pdfFonts.vfs;
+    }
+    else {
+        pdfMake.vfs = pdfFonts || {};
+    }
+    try {
+        const notoSansFont = await loadNotoSansFont();
+        if (notoSansFont) {
+            pdfMake.fonts ??= {};
+            pdfMake.fonts.NotoSans = {
+                normal: 'NotoSans-Regular.ttf',
+                bold: 'NotoSans-Bold.ttf',
+                italics: 'NotoSans-Italic.ttf',
+                bolditalics: 'NotoSans-BoldItalic.ttf',
+            };
+            pdfMake.vfs['NotoSans-Regular.ttf'] = notoSansFont;
+            pdfMake.vfs['NotoSans-Bold.ttf'] = notoSansFont;
+        }
+    }
+    catch {
+        console.warn('NotoSans not loaded, fallback to Roboto');
+    }
+    /* =========================
+       FIXED TABLE WIDTH LOGIC
+    ========================= */
+    const fixedTableWidth = 750;
+    const listColumnWidth = 80;
+    const minColumnWidth = 40;
+    const listIndexes = [];
+    const regularIndexes = [];
+    columns.forEach((col, i) => {
         const type = columnTypeMap[col.field] || col.columnType;
         if (type === columnTypeEnum.LIST || type === columnTypeEnum.LIST_TAG) {
-            columnStyles[idx] = { cellWidth: 150 }; // set your min width
+            listIndexes.push(i);
+        }
+        else {
+            regularIndexes.push(i);
         }
     });
-    autoTable(doc, {
-        head,
-        body,
+    const reservedWidth = listIndexes.length * listColumnWidth;
+    const availableWidth = fixedTableWidth - reservedWidth;
+    const baseRegularWidth = regularIndexes.length > 0
+        ? Math.max(minColumnWidth, availableWidth / regularIndexes.length)
+        : minColumnWidth;
+    let columnWidths = columns.map((_, i) => listIndexes.includes(i) ? listColumnWidth : baseRegularWidth);
+    /* === NORMALIZACIJA (TAČNO 750px) === */
+    const regularSum = regularIndexes.reduce((sum, i) => sum + columnWidths[i], 0);
+    if (regularSum > 0) {
+        const scaleFactor = availableWidth / regularSum;
+        console.log(scaleFactor);
+        // 1. skaliranje + floor
+        regularIndexes.forEach((i) => {
+            columnWidths[i] = Math.floor(columnWidths[i] * scaleFactor);
+        });
+        // 2. korekcija razlike (1px po koloni)
+        let diff = fixedTableWidth - columnWidths.reduce((sum, w) => sum + w, 0);
+        let idx = 0;
+        while (diff !== 0 && regularIndexes.length) {
+            const i = regularIndexes[idx % regularIndexes.length];
+            columnWidths[i] += diff > 0 ? 1 : -1;
+            diff += diff > 0 ? -1 : 1;
+            idx++;
+        }
+    }
+    /* =========================
+       TABLE BODY
+    ========================= */
+    const tableBody = [
+        headers.map((header) => ({
+            text: header,
+            style: 'tableHeader',
+        })),
+        ...bodyRows.map((row) => row.map((cell) => ({
+            text: cell || '',
+            style: 'tableCell',
+            noWrap: false,
+        }))),
+    ];
+    console.log(columnWidths);
+    /* =========================
+       PDF DEFINITION
+    ========================= */
+    const docDefinition = {
+        pageOrientation: 'landscape',
+        pageSize: 'A4',
+        pageMargins: [25, 30, 15, 30],
+        content: [
+            {
+                columns: [
+                    {
+                        width: fixedTableWidth,
+                        table: {
+                            headerRows: 1,
+                            widths: columnWidths,
+                            body: tableBody,
+                        },
+                        layout: {
+                            hLineWidth: () => 0,
+                            vLineWidth: () => 0,
+                            paddingLeft: () => 3,
+                            paddingRight: () => 3,
+                            paddingTop: () => 3,
+                            paddingBottom: () => 3,
+                            fillColor: (rowIndex) => rowIndex === 0
+                                ? [41, 128, 186]
+                                : (rowIndex - 1) % 2 === 0
+                                    ? '#f5f5f5'
+                                    : null,
+                        },
+                    },
+                ],
+            },
+        ],
         styles: {
-            fontSize: 9,
-            cellPadding: 5,
-            overflow: 'linebreak',
-            valign: 'top',
+            tableHeader: {
+                fontSize: 11,
+                bold: true,
+                color: '#ffffff',
+                margin: [0, 5, 0, 5],
+            },
+            tableCell: {
+                fontSize: 9,
+                margin: [0, 5, 0, 5],
+            },
         },
-        columnStyles: Object.keys(columnStyles).length > 0 ? columnStyles : undefined,
-        margin: { top: 36, right: 24, bottom: 36, left: 24 },
-    });
-    doc.save(fileName);
+        defaultStyle: {
+            font: pdfMake.fonts?.NotoSans ? 'NotoSans' : 'Roboto',
+        },
+    };
+    pdfMake.createPdf(docDefinition).download(fileName);
 }
 /* -------------------------- Export: Excel -------------------------- */
 /**
@@ -2750,10 +2902,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 +3421,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') {