valtech-components 4.0.166 → 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.166';
+const VERSION = '4.0.168';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -27973,6 +27973,13 @@ function provideValtechAppVersionHttp(config) {
  *
  * Las tres dependencias se inyectan como opcionales.
  */
+/**
+ * Máximo que `applyUpdate` espera por el `VERSION_READY` del SW antes de recargar
+ * igual. Cubre el caso en que el update lo detectó el path HTTP antes de que el
+ * SW descargara el bundle nuevo (evita el loop de banner). Si el SW nunca queda
+ * listo (Android Chrome), recarga como último recurso al vencer.
+ */
+const SW_READY_TIMEOUT_MS = 8000;
 /**
  * Compara dos versiones semver. Retorna true si `a` es estrictamente menor
  * que `b`. Tolerante a longitudes distintas y a partes no numéricas.
@@ -27999,9 +28006,13 @@ class AppVersionService {
         this.appConfig = inject(AppConfigService, { optional: true });
         this.serviceConfig = inject(VALTECH_APP_VERSION, { optional: true });
         /** Plugin nativo opcional: provisto por apps Capacitor para Play Store / App Store. */
-        this.platformPlugin = inject(APP_VERSION_PLATFORM_PLUGIN, { optional: true });
+        this.platformPlugin = inject(APP_VERSION_PLATFORM_PLUGIN, {
+            optional: true,
+        });
         /** Plugin HTTP opcional: alternativa a AppConfigService para apps sin Firebase. */
-        this.remotePlugin = inject(APP_VERSION_REMOTE_PLUGIN, { optional: true });
+        this.remotePlugin = inject(APP_VERSION_REMOTE_PLUGIN, {
+            optional: true,
+        });
         this.document = inject(DOCUMENT);
         this.destroyRef = inject(DestroyRef);
         /** True cuando el SW reportó un bundle nuevo listo (`VERSION_READY`). */
@@ -28070,7 +28081,21 @@ class AppVersionService {
         }
         try {
             if (this.swUpdate?.isEnabled) {
-                await this.swUpdate.activateUpdate();
+                // Si la actualización se detectó por el path HTTP (/version.json) ANTES
+                // de que el SW descargue el bundle nuevo, `swUpdateReady` aún es false:
+                // recargar ahora volvería a cargar el MISMO bundle viejo y el banner
+                // reaparecería (loop de "actualizar N veces"). Pedimos al SW que chequee
+                // y esperamos a que el bundle quede listo (con timeout) para que el
+                // reload realmente cambie de versión.
+                if (!this.swUpdateReady()) {
+                    await this.swUpdate.checkForUpdate().catch(() => undefined);
+                    if (!this.swUpdateReady()) {
+                        await this.waitForSwReady(SW_READY_TIMEOUT_MS);
+                    }
+                }
+                if (this.swUpdateReady()) {
+                    await this.swUpdate.activateUpdate();
+                }
             }
         }
         catch (err) {
@@ -28080,6 +28105,30 @@ class AppVersionService {
             this.document.defaultView?.location.reload();
         }
     }
+    /**
+     * Espera a que el SW reporte un bundle nuevo listo (`VERSION_READY`), o hasta
+     * `timeoutMs`. Evita el reload "en seco" cuando el update lo detectó el path
+     * HTTP antes de que el SW descargara el bundle. Si el timeout vence (ej.
+     * Android Chrome donde VERSION_READY es poco confiable), resuelve igual y el
+     * caller recarga como último recurso.
+     */
+    waitForSwReady(timeoutMs) {
+        if (this.swUpdateReady() || !this.swUpdate?.isEnabled)
+            return Promise.resolve();
+        return new Promise(resolve => {
+            let settled = false;
+            const finish = () => {
+                if (settled)
+                    return;
+                settled = true;
+                sub.unsubscribe();
+                clearTimeout(timer);
+                resolve();
+            };
+            const sub = this.swUpdate.versionUpdates.pipe(filter$1(evt => evt.type === 'VERSION_READY')).subscribe(() => finish());
+            const timer = setTimeout(finish, timeoutMs);
+        });
+    }
     /**
      * Descarta el banner de actualización opcional.
      * No tiene efecto sobre el estado `update-required` (hard gate).
@@ -28093,7 +28142,9 @@ class AppVersionService {
     async checkNow() {
         await Promise.all([
             this.swUpdate?.isEnabled
-                ? this.swUpdate.checkForUpdate().catch(err => console.warn('[AppVersionService] checkForUpdate failed:', err))
+                ? this.swUpdate
+                    .checkForUpdate()
+                    .catch(err => console.warn('[AppVersionService] checkForUpdate failed:', err))
                 : undefined,
             this.remotePlugin ? this.loadRemoteConfig() : undefined,
         ]);
@@ -61465,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;
@@ -61490,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' });
@@ -61543,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 = 'middle';
-            ctx.fillText(config.brandName, width / 2, textY, width - logoPad * 2);
+            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 = 'top';
+            ctx.fillText(metaParts.join('  ·  '), width / 2, cursorY, width - 48);
         }
     }
     async drawQrZone(ctx, config, width) {
@@ -61575,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);
@@ -61584,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';
+            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(folioText, width / 2, contentY, width - 40);
-            contentY += 56;
+            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) => {
@@ -70381,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) {