valtech-components 4.0.167 → 4.0.168

package/fesm2022/valtech-components.mjs

@@ -56,7 +56,7 @@ import { BrowserMultiFormatReader } from '@zxing/browser';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '4.0.167';
+const VERSION = '4.0.168';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -61516,14 +61516,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 // Use LocaleService for language management instead
 
 const CANVAS_WIDTH = 560;
-const HEADER_H = 160;
-const QR_ZONE_H = 380;
-const FOOTER_H = 240;
-const CANVAS_HEIGHT = HEADER_H + QR_ZONE_H + FOOTER_H;
-const QR_SIZE = 280;
+const HEADER_H = 210;
+const QR_ZONE_H = 340;
+const PERF_H = 28;
+const FOOTER_H = 220;
+const CANVAS_HEIGHT = HEADER_H + QR_ZONE_H + PERF_H + FOOTER_H;
+const QR_SIZE = 260;
 const DEFAULT_BRAND_COLOR = '#9b1fde';
 const DEFAULT_BRAND_COLOR_TO = '#c93075';
-const FONT_STACK = 'Khula, Arial, sans-serif';
+const FONT_STACK = '"Plus Jakarta Sans", Khula, Arial, sans-serif';
 class TicketCardImageService {
     async generate(config) {
         const width = config.width ?? CANVAS_WIDTH;
@@ -61541,6 +61542,7 @@ class TicketCardImageService {
         }
         await this.drawHeader(ctx, config, width);
         await this.drawQrZone(ctx, config, width);
+        this.drawPerforated(ctx, config, width);
         this.drawFooter(ctx, config, width);
         if (canvas instanceof OffscreenCanvas) {
             return canvas.convertToBlob({ type: 'image/png' });
@@ -61594,31 +61596,41 @@ class TicketCardImageService {
         grad.addColorStop(1, colorTo);
         ctx.fillStyle = grad;
         ctx.fillRect(0, 0, width, HEADER_H);
-        const logoH = 44;
-        const logoPad = 28;
-        let textY = HEADER_H / 2;
+        const logoH = 48;
+        const logoPadTop = 28;
+        let cursorY = logoPadTop;
         if (config.logoUrl) {
             try {
                 const logoImg = await this.loadImage(config.logoUrl);
                 const ratio = logoImg.width / logoImg.height;
                 const logoW = logoH * ratio;
-                const logoX = logoPad;
-                const logoY = (HEADER_H - logoH) / 2;
-                ctx.drawImage(logoImg, logoX, logoY, logoW, logoH);
-                if (config.brandName) {
-                    textY = logoY + logoH + 14;
-                }
+                const logoX = (width - logoW) / 2;
+                ctx.drawImage(logoImg, logoX, cursorY, logoW, logoH);
+                cursorY += logoH + 14;
             }
             catch {
-                // logo failed — render brand name centered as fallback
+                // logo failed — continue without it
             }
         }
         if (config.brandName) {
             ctx.fillStyle = '#ffffff';
-            ctx.font = `bold 1.75rem ${FONT_STACK}`;
+            ctx.font = `bold 1.625rem ${FONT_STACK}`;
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'top';
+            ctx.fillText(config.brandName, width / 2, cursorY, width - 48);
+            cursorY += 32;
+        }
+        const metaParts = [];
+        if (config.eventDate)
+            metaParts.push(config.eventDate);
+        if (config.eventLocation)
+            metaParts.push(config.eventLocation);
+        if (metaParts.length > 0) {
+            ctx.fillStyle = 'rgba(255,255,255,0.78)';
+            ctx.font = `0.875rem ${FONT_STACK}`;
             ctx.textAlign = 'center';
-            ctx.textBaseline = 'middle';
-            ctx.fillText(config.brandName, width / 2, textY, width - logoPad * 2);
+            ctx.textBaseline = 'top';
+            ctx.fillText(metaParts.join('  ·  '), width / 2, cursorY, width - 48);
         }
     }
     async drawQrZone(ctx, config, width) {
@@ -61626,7 +61638,7 @@ class TicketCardImageService {
         ctx.fillStyle = '#ffffff';
         ctx.fillRect(0, zoneTop, width, QR_ZONE_H);
         const qrX = (width - QR_SIZE) / 2;
-        const qrY = zoneTop + (QR_ZONE_H - QR_SIZE - 28) / 2;
+        const qrY = zoneTop + (QR_ZONE_H - QR_SIZE - 40) / 2;
         try {
             const qrImg = await this.loadImage(config.qrDataUrl);
             ctx.drawImage(qrImg, qrX, qrY, QR_SIZE, QR_SIZE);
@@ -61635,42 +61647,106 @@ class TicketCardImageService {
             ctx.strokeStyle = '#e0e0e0';
             ctx.strokeRect(qrX, qrY, QR_SIZE, QR_SIZE);
         }
-        ctx.fillStyle = '#2f2a36';
-        ctx.font = `0.9375rem ${FONT_STACK}`;
+        const hint = config.scanHint ?? 'Muestra este QR en la puerta para canjear tu entrada.';
+        ctx.fillStyle = '#6b6675';
+        ctx.font = `0.875rem ${FONT_STACK}`;
         ctx.textAlign = 'center';
         ctx.textBaseline = 'top';
-        ctx.fillText('Escanea para verificar', width / 2, qrY + QR_SIZE + 12);
+        const hintY = qrY + QR_SIZE + 14;
+        this.fillWrappedText(ctx, hint, width / 2, hintY, width - 80, 22);
+    }
+    drawPerforated(ctx, config, width) {
+        const y = HEADER_H + QR_ZONE_H;
+        const notchR = PERF_H / 2;
+        const colorFrom = config.brandColor ?? DEFAULT_BRAND_COLOR;
+        ctx.fillStyle = '#ffffff';
+        ctx.fillRect(0, y, width, PERF_H);
+        // Left notch (semicircle cut from edge)
+        ctx.fillStyle = '#f8f8f8';
+        ctx.beginPath();
+        ctx.arc(-1, y + notchR, notchR + 1, -Math.PI / 2, Math.PI / 2);
+        ctx.fill();
+        // Right notch
+        ctx.beginPath();
+        ctx.arc(width + 1, y + notchR, notchR + 1, Math.PI / 2, -Math.PI / 2);
+        ctx.fill();
+        // Dashed line in middle
+        ctx.setLineDash([8, 6]);
+        ctx.strokeStyle = colorFrom + '55';
+        ctx.lineWidth = 1.5;
+        ctx.beginPath();
+        ctx.moveTo(notchR * 2 + 8, y + notchR);
+        ctx.lineTo(width - notchR * 2 - 8, y + notchR);
+        ctx.stroke();
+        ctx.setLineDash([]);
     }
     drawFooter(ctx, config, width) {
-        const footerTop = HEADER_H + QR_ZONE_H;
+        const footerTop = HEADER_H + QR_ZONE_H + PERF_H;
+        const colorFrom = config.brandColor ?? DEFAULT_BRAND_COLOR;
         ctx.fillStyle = '#ffffff';
         ctx.fillRect(0, footerTop, width, FOOTER_H);
-        const colorFrom = config.brandColor ?? DEFAULT_BRAND_COLOR;
-        ctx.fillStyle = colorFrom;
-        ctx.fillRect(0, footerTop, width, 3);
-        let contentY = footerTop + 40;
+        let contentY = footerTop + 32;
         if (config.folio !== undefined && config.folio !== null && config.folio !== '') {
-            const label = config.folioLabel ?? 'Entrada';
-            const folioText = `${label} #${config.folio}`;
-            ctx.fillStyle = '#1a0b2e';
-            ctx.font = `bold 3rem ${FONT_STACK}`;
+            const label = (config.folioLabel ?? 'Cartón').toUpperCase();
+            // Label small — brand color, letter-spaced
+            ctx.fillStyle = colorFrom;
+            ctx.font = `600 0.8125rem ${FONT_STACK}`;
             ctx.textAlign = 'center';
             ctx.textBaseline = 'top';
-            ctx.fillText(folioText, width / 2, contentY, width - 40);
-            contentY += 56;
+            this.fillLetterSpaced(ctx, label, width / 2, contentY, 3);
+            contentY += 24;
+            // Folio number — large, bold, brand color
+            ctx.fillStyle = colorFrom;
+            ctx.font = `800 3.5rem ${FONT_STACK}`;
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'top';
+            ctx.fillText(`#${config.folio}`, width / 2, contentY, width - 40);
+            contentY += 68;
         }
         if (config.buyerName) {
-            ctx.fillStyle = '#2f2a36';
-            ctx.font = `1.25rem ${FONT_STACK}`;
+            ctx.fillStyle = '#6b6675';
+            ctx.font = `0.9375rem ${FONT_STACK}`;
             ctx.textAlign = 'center';
             ctx.textBaseline = 'top';
             ctx.fillText(config.buyerName, width / 2, contentY, width - 40);
         }
-        ctx.fillStyle = '#6b6675';
-        ctx.font = `0.75rem ${FONT_STACK}`;
-        ctx.textAlign = 'right';
+        // Copyright
+        ctx.fillStyle = '#b0a8bc';
+        ctx.font = `0.6875rem ${FONT_STACK}`;
+        ctx.textAlign = 'center';
         ctx.textBaseline = 'bottom';
-        ctx.fillText('Valtech', width - 16, footerTop + FOOTER_H - 12);
+        ctx.fillText('© 2026 Valtech. Todos los derechos reservados.', width / 2, footerTop + FOOTER_H - 14);
+    }
+    fillWrappedText(ctx, text, x, y, maxWidth, lineHeight) {
+        const words = text.split(' ');
+        let line = '';
+        let curY = y;
+        for (const word of words) {
+            const test = line ? `${line} ${word}` : word;
+            if (ctx.measureText(test).width > maxWidth && line) {
+                ctx.fillText(line, x, curY);
+                line = word;
+                curY += lineHeight;
+            }
+            else {
+                line = test;
+            }
+        }
+        if (line)
+            ctx.fillText(line, x, curY);
+    }
+    fillLetterSpaced(ctx, text, cx, y, spacing) {
+        // Measure total width with spacing and center
+        const chars = text.split('');
+        const charWidths = chars.map(c => ctx.measureText(c).width);
+        const totalW = charWidths.reduce((s, w) => s + w, 0) + spacing * (chars.length - 1);
+        let x = cx - totalW / 2;
+        ctx.textAlign = 'left';
+        for (let i = 0; i < chars.length; i++) {
+            ctx.fillText(chars[i], x, y);
+            x += charWidths[i] + spacing;
+        }
+        ctx.textAlign = 'center';
     }
     loadImage(src) {
         return new Promise((resolve, reject) => {
@@ -70432,6 +70508,9 @@ class TicketCardComponent {
             folio: p.folio,
             folioLabel: p.shareFolioLabel,
             buyerName: p.buyerName,
+            eventDate: p.shareEventDate,
+            eventLocation: p.shareEventLocation,
+            scanHint: p.shareScanHint,
         };
     }
     async copyToClipboard(config, p) {