valtech-components 2.0.1024 → 2.0.1026

package/lib/components/atoms/rights-footer/rights-footer.component.d.ts

@@ -43,7 +43,7 @@ export declare class RightsFooterComponent {
     /**
      * Computed helper for color prop in template.
      */
-    propsColor: import("@angular/core").Signal<"success" | "medium" | "primary" | "secondary" | "tertiary" | "warning" | "danger" | "light" | "dark">;
+    propsColor: import("@angular/core").Signal<"primary" | "secondary" | "tertiary" | "success" | "warning" | "danger" | "light" | "medium" | "dark">;
     /**
      * Computed helper for withMargin prop in template.
      */

package/lib/components/molecules/ticket-card/ticket-card.component.d.ts

@@ -0,0 +1,42 @@
+import { QrCodeMetadata } from '../../atoms/qr-code/types';
+import { QrResult } from '../../../services/qr-generator/types';
+import { TicketCardMetadata, TicketCardStatus } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-ticket-card
+ *
+ * Tarjeta presentacional de una entrada de bingo: muestra el QR escaneable
+ * (generado del `qrToken` opaco firmado vía `QrGeneratorService`), el folio, el
+ * nombre del comprador (si hay) y un badge de estado (vendida / canjeada).
+ *
+ * Es la pieza que el vendedor le entrega al comprador tras la venta y que la
+ * taquilla escanea para canjear. Object-first (`input()` signal), i18n
+ * auto-registrado (namespace `TicketCard`). Estados negativos/neutros en gris
+ * muted (convención del factory — sin rojo de alarma).
+ *
+ * @example
+ * ```html
+ * <val-ticket-card [props]="{ qrToken: ticket.qrToken, folio: ticket.folio,
+ *   buyerName: ticket.compradorNombre, status: 'sold', showShare: true }" />
+ * ```
+ */
+export declare class TicketCardComponent {
+    /** Props object-first del componente. */
+    readonly props: import("@angular/core").InputSignal<TicketCardMetadata>;
+    private qrService;
+    private i18n;
+    /** QR generado (null mientras carga o si falló). */
+    readonly qr: import("@angular/core").WritableSignal<QrResult>;
+    /** Falló la generación del QR → fallback al token corto. */
+    readonly failed: import("@angular/core").WritableSignal<boolean>;
+    constructor();
+    private generate;
+    t(key: string): string;
+    readonly status: import("@angular/core").Signal<TicketCardStatus>;
+    readonly tokenShort: import("@angular/core").Signal<string>;
+    readonly folioText: import("@angular/core").Signal<string>;
+    readonly statusLabel: import("@angular/core").Signal<string>;
+    qrProps(q: QrResult): QrCodeMetadata;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TicketCardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TicketCardComponent, "val-ticket-card", never, { "props": { "alias": "props"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/components/molecules/ticket-card/ticket-card.i18n.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Defaults i18n (es/en) del `val-ticket-card`. Auto-registrados en el
+ * constructor del componente (namespace `TicketCard`) — el consumer NUNCA tiene
+ * que registrarlos. Override pasando los labels por props o registrando el
+ * namespace antes de montar el componente.
+ */
+export declare const TICKET_CARD_I18N: {
+    readonly es: {
+        readonly folio: "Folio";
+        readonly statusSold: "Vendida";
+        readonly statusCheckedIn: "Canjeada";
+        readonly download: "Descargar";
+        readonly share: "Compartir";
+    };
+    readonly en: {
+        readonly folio: "Folio";
+        readonly statusSold: "Sold";
+        readonly statusCheckedIn: "Checked in";
+        readonly download: "Download";
+        readonly share: "Share";
+    };
+};

package/lib/components/molecules/ticket-card/types.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Estado de canje/venta que el ticket-card refleja en su badge.
+ *
+ * - `sold` — entrada vendida, todavía no canjeada (QR válido para canjear).
+ * - `checkedIn` — entrada ya canjeada (QR ya usado en puerta).
+ * - `neutral` — sin estado destacado (p.ej. solo se muestra el QR).
+ */
+export type TicketCardStatus = 'sold' | 'checkedIn' | 'neutral';
+/**
+ * Metadata (object-first) del componente `val-ticket-card`.
+ *
+ * Tarjeta presentacional de una entrada: muestra el QR (generado a partir del
+ * `qrToken` opaco firmado), el folio, el nombre del comprador (si hay) y un
+ * badge de estado. NO trae texto propio fijo — el consumer pasa los labels ya
+ * resueltos (`statusSoldLabel` / `statusCheckedInLabel` / `folioLabel`). El
+ * único texto auto-i18n son los defaults de esos labels (namespace `TicketCard`).
+ */
+export interface TicketCardMetadata {
+    /**
+     * Token opaco firmado que va DENTRO del QR escaneable (formato
+     * `base64url.base64url`). Es exactamente el dato que la taquilla manda al
+     * endpoint de canje. El componente lo codifica en el QR tal cual.
+     */
+    qrToken: string;
+    /** Folio de la entrada (número visible junto al QR). */
+    folio?: number | string;
+    /** Nombre del comprador, si se capturó en la venta. */
+    buyerName?: string;
+    /** Estado de la entrada (controla el color/label del badge). */
+    status?: TicketCardStatus;
+    /** Título de la tarjeta (ej. nombre del evento). Opcional. */
+    title?: string;
+    /** Tamaño del QR en px (default 200). */
+    qrSize?: number;
+    /** Mostrar botón de descarga del QR. */
+    showDownload?: boolean;
+    /** Mostrar botón de compartir el QR. */
+    showShare?: boolean;
+    /** Label del prefijo de folio (default i18n: "Folio"). */
+    folioLabel?: string;
+    /** Label del badge cuando `status === 'sold'` (default: "Vendida"). */
+    statusSoldLabel?: string;
+    /** Label del badge cuando `status === 'checkedIn'` (default: "Canjeada"). */
+    statusCheckedInLabel?: string;
+}

package/lib/components/organisms/article/article.component.d.ts

@@ -76,7 +76,7 @@ export declare class ArticleComponent implements OnInit {
     getHighlightColor(element: ArticleElement): string;
     getButtonProps(element: ArticleElement): {
         actionType?: import("valtech-components").ActionType;
-        expand?: "full" | "block";
+        expand?: "block" | "full";
         link?: string;
         href?: string;
         routerLink?: string | any[];
@@ -91,9 +91,9 @@ export declare class ArticleComponent implements OnInit {
         contentInterpolation?: Record<string, string | number>;
         icon?: import("valtech-components").IconMetada;
         shape?: "round";
-        size?: "default" | "small" | "large";
-        fill?: "default" | "clear" | "outline" | "solid";
-        type: "reset" | "submit" | "button";
+        size?: "small" | "default" | "large";
+        fill?: "outline" | "clear" | "solid" | "default";
+        type: "button" | "submit" | "reset";
         token?: string;
         ref?: any;
         handler?: (value: any) => any;

package/lib/components/organisms/landing-steps/landing-steps.component.d.ts

@@ -4,7 +4,7 @@ export declare class LandingStepsComponent {
     private readonly props_;
     set props(v: LandingStepsMetadata);
     readonly p: import("@angular/core").Signal<LandingStepsMetadata>;
-    readonly cols: import("@angular/core").Signal<2 | 3 | 4>;
+    readonly cols: import("@angular/core").Signal<3 | 2 | 4>;
     readonly accentColor: import("@angular/core").Signal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<LandingStepsComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<LandingStepsComponent, "val-landing-steps", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;

package/lib/components/organisms/qr-scanner/qr-scanner.component.d.ts

@@ -0,0 +1,51 @@
+import { AfterViewInit, ElementRef, EventEmitter, OnDestroy } from '@angular/core';
+import { QrScannerMetadata, QrScannerState } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-qr-scanner
+ *
+ * Organism: scanner de códigos QR por cámara (`@zxing/browser` +
+ * `@zxing/library`). Emite el texto decodificado por `(scanned)`.
+ *
+ * Maneja: permiso de cámara denegado (`denied`), ausencia de cámara
+ * (`no-camera`), selector cuando hay varias cámaras, y botón start/stop. Hace
+ * cleanup del stream en `ngOnDestroy`. i18n auto-registrado (namespace
+ * `QrScanner`).
+ *
+ * Object-first (`@Input() props`) + un único `@Output() scanned`.
+ *
+ * @example
+ * ```html
+ * <val-qr-scanner [props]="{ continuous: true }" (scanned)="onScan($event)" />
+ * ```
+ */
+export declare class QrScannerComponent implements AfterViewInit, OnDestroy {
+    props: QrScannerMetadata;
+    /** Emite el texto decodificado del QR. */
+    scanned: EventEmitter<string>;
+    videoRef: ElementRef<HTMLVideoElement>;
+    private i18n;
+    readonly state: import("@angular/core").WritableSignal<QrScannerState>;
+    readonly devices: import("@angular/core").WritableSignal<MediaDeviceInfo[]>;
+    readonly activeDeviceId: import("@angular/core").WritableSignal<string>;
+    private reader;
+    private controls;
+    private lastValue;
+    private lastAt;
+    private viewReady;
+    constructor();
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    t(key: string): string;
+    stateMessage(): string;
+    deviceLabel(d: MediaDeviceInfo): string;
+    start(deviceId?: string): Promise<void>;
+    stop(): void;
+    onSelectDevice(deviceId: string): Promise<void>;
+    private handleResult;
+    private handleStartError;
+    /** Detiene el decode + libera el stream de la cámara. */
+    private teardown;
+    static ɵfac: i0.ɵɵFactoryDeclaration<QrScannerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<QrScannerComponent, "val-qr-scanner", never, { "props": { "alias": "props"; "required": false; }; }, { "scanned": "scanned"; }, never, never, true, never>;
+}

package/lib/components/organisms/qr-scanner/qr-scanner.i18n.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Defaults i18n (es/en) del `val-qr-scanner`. Auto-registrados en el
+ * constructor (namespace `QrScanner`) — el consumer NUNCA tiene que
+ * registrarlos. Override por props (start/stop) o registrando el namespace.
+ */
+export declare const QR_SCANNER_I18N: {
+    readonly es: {
+        readonly start: "Iniciar cámara";
+        readonly stop: "Detener";
+        readonly starting: "Iniciando cámara…";
+        readonly hint: "Apunta la cámara al código QR de la entrada.";
+        readonly cameraLabel: "Cámara";
+        readonly denied: "No se pudo acceder a la cámara. Revisa los permisos del navegador e inténtalo de nuevo.";
+        readonly noCamera: "No se encontró ninguna cámara en este dispositivo.";
+        readonly error: "Ocurrió un problema con la cámara. Inténtalo de nuevo.";
+    };
+    readonly en: {
+        readonly start: "Start camera";
+        readonly stop: "Stop";
+        readonly starting: "Starting camera…";
+        readonly hint: "Point the camera at the ticket QR code.";
+        readonly cameraLabel: "Camera";
+        readonly denied: "Could not access the camera. Check your browser permissions and try again.";
+        readonly noCamera: "No camera was found on this device.";
+        readonly error: "Something went wrong with the camera. Please try again.";
+    };
+};

package/lib/components/organisms/qr-scanner/types.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Metadata (object-first) del organism `val-qr-scanner`.
+ *
+ * Scanner de QR por cámara. Todos los campos son opcionales (la cámara
+ * funciona con defaults). El consumer pasa los labels ya resueltos por i18n;
+ * si no, el componente cae a sus defaults auto-registrados (namespace
+ * `QrScanner`).
+ */
+export interface QrScannerMetadata {
+    /** Arrancar la cámara automáticamente al montar (default false). */
+    autoStart?: boolean;
+    /** Label del botón de iniciar (override del auto-i18n). */
+    startLabel?: string;
+    /** Label del botón de detener (override del auto-i18n). */
+    stopLabel?: string;
+    /**
+     * Mantener la cámara encendida tras un escaneo exitoso (default true). Si es
+     * `false`, el scanner se detiene solo al primer match — útil para flujos de
+     * un solo canje. Si es `true`, sigue escaneando (la página decide cuándo
+     * parar / reanudar).
+     */
+    continuous?: boolean;
+    /**
+     * Anti-rebote entre lecturas del MISMO valor, en ms (default 1500). Evita
+     * que el mismo QR dispare `scanned` muchas veces por segundo mientras está
+     * frente a la cámara.
+     */
+    dedupeMs?: number;
+}
+/** Estado interno del scanner (expuesto para feedback de UI). */
+export type QrScannerState = 'idle' | 'starting' | 'scanning' | 'denied' | 'no-camera' | 'error';

package/lib/version.d.ts

@@ -2,4 +2,4 @@
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-export declare const VERSION = "2.0.1024";
+export declare const VERSION = "2.0.1026";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "2.0.1024",
+  "version": "2.0.1026",
   "private": false,
   "bin": {
     "valtech-firebase-config": "./src/lib/services/firebase/scripts/generate-sw-config.js"
@@ -36,6 +36,8 @@
   },
   "dependencies": {
     "@capacitor/browser": "^6.0.3",
+    "@zxing/browser": "^0.2.0",
+    "@zxing/library": "^0.22.0",
     "compressorjs": "^1.3.0",
     "ng-otp-input": "^1.9.3",
     "ngx-image-cropper": "^9.0.0",

package/public-api.d.ts

@@ -433,3 +433,7 @@ export * from './lib/components/molecules/content-card/content-card.component';
 export * from './lib/components/molecules/content-card/types';
 export * from './lib/components/organisms/auth-cta/auth-cta.component';
 export * from './lib/components/organisms/auth-cta/types';
+export * from './lib/components/molecules/ticket-card/ticket-card.component';
+export * from './lib/components/molecules/ticket-card/types';
+export * from './lib/components/organisms/qr-scanner/qr-scanner.component';
+export * from './lib/components/organisms/qr-scanner/types';