valtech-components 4.0.256 → 4.0.257

package/fesm2022/valtech-components.mjs

@@ -57,7 +57,7 @@ import fixWebmDuration from 'fix-webm-duration';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '4.0.256';
+const VERSION = '4.0.257';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -71918,6 +71918,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  */
 const TICKET_CARD_I18N = {
     es: {
+        cardLabel: 'Cartón de bingo',
         folio: 'Folio',
         statusSold: 'Vendida',
         statusCheckedIn: 'Canjeada',
@@ -71927,6 +71928,7 @@ const TICKET_CARD_I18N = {
         copiedUrl: 'Link copiado',
     },
     en: {
+        cardLabel: 'Bingo card',
         folio: 'Folio',
         statusSold: 'Sold',
         statusCheckedIn: 'Checked in',
@@ -72110,7 +72112,7 @@ class TicketCardComponent {
         const url = URL.createObjectURL(blob);
         const a = document.createElement('a');
         a.href = url;
-        a.download = `entrada-${p.folio ?? 'bingo'}.png`;
+        a.download = `carton-${p.folio ?? 'bingo'}.png`;
         document.body.appendChild(a);
         a.click();
         document.body.removeChild(a);
@@ -72133,103 +72135,127 @@ class TicketCardComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TicketCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TicketCardComponent, isStandalone: true, selector: "val-ticket-card", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
     <div class="ticket-card">
-      @if (props().title) {
-        <div class="ticket-card__title">{{ props().title }}</div>
-      }
-
-      <div class="ticket-card__qr">
-        @if (qr(); as q) {
-          <val-qr-code [props]="qrProps(q)" />
-        } @else if (failed()) {
-          <div class="ticket-card__qr-fallback">{{ tokenShort() }}</div>
-        } @else {
-          <div class="ticket-card__qr-loading">
-            <ion-spinner name="crescent" aria-label="Generando QR" />
-          </div>
+      <div class="ticket-card__header">
+        <div class="ticket-card__eyebrow">{{ t('cardLabel') }}</div>
+        @if (props().title) {
+          <div class="ticket-card__title">{{ props().title }}</div>
         }
       </div>
 
-      <div class="ticket-card__meta">
-        @if (folioText(); as f) {
-          <div class="ticket-card__folio">{{ f }}</div>
-        }
-        @if (props().buyerName) {
-          <div class="ticket-card__buyer">{{ props().buyerName }}</div>
-        }
-        @if (statusLabel(); as s) {
-          <span class="ticket-card__badge" [attr.data-status]="status()">{{ s }}</span>
-        }
-      </div>
-
-      @if ((props().showDownload || props().showShare) && qr()) {
-        <div class="ticket-card__actions">
-          @if (props().showDownload) {
-            <ion-button fill="outline" expand="block" [disabled]="downloading()" (click)="downloadCard()">
-              <ion-icon name="download-outline" slot="start" />
-              {{ props().downloadLabel || t('download') }}
-            </ion-button>
+      <div class="ticket-card__body">
+        <div class="ticket-card__qr">
+          @if (qr(); as q) {
+            <val-qr-code [props]="qrProps(q)" />
+          } @else if (failed()) {
+            <div class="ticket-card__qr-fallback">{{ tokenShort() }}</div>
+          } @else {
+            <div class="ticket-card__qr-loading">
+              <ion-spinner name="crescent" aria-label="Generando QR" />
+            </div>
           }
-          @if (props().showShare) {
-            <ion-button fill="outline" expand="block" [disabled]="sharing()" (click)="shareCard()">
-              <ion-icon name="share-outline" slot="start" />
-              {{ props().shareLabel || t('share') }}
-            </ion-button>
+        </div>
+
+        <div class="ticket-card__perf" aria-hidden="true">
+          <span class="ticket-card__notch ticket-card__notch--left"></span>
+          <span class="ticket-card__notch ticket-card__notch--right"></span>
+        </div>
+
+        <div class="ticket-card__stub">
+          <div class="ticket-card__meta">
+            @if (folioText(); as f) {
+              <div class="ticket-card__folio">{{ f }}</div>
+            }
+            @if (props().buyerName) {
+              <div class="ticket-card__buyer">{{ props().buyerName }}</div>
+            }
+            @if (statusLabel(); as s) {
+              <span class="ticket-card__badge" [attr.data-status]="status()">{{ s }}</span>
+            }
+          </div>
+
+          @if ((props().showDownload || props().showShare) && qr()) {
+            <div class="ticket-card__actions">
+              @if (props().showDownload) {
+                <ion-button fill="outline" expand="block" [disabled]="downloading()" (click)="downloadCard()">
+                  <ion-icon name="download-outline" slot="start" />
+                  {{ props().downloadLabel || t('download') }}
+                </ion-button>
+              }
+              @if (props().showShare) {
+                <ion-button fill="outline" expand="block" [disabled]="sharing()" (click)="shareCard()">
+                  <ion-icon name="share-outline" slot="start" />
+                  {{ props().shareLabel || t('share') }}
+                </ion-button>
+              }
+            </div>
           }
         </div>
-      }
+      </div>
     </div>
-  `, isInline: true, styles: ["@charset \"UTF-8\";:host{display:block}.ticket-card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px;border:1px solid var(--ion-color-light-shade, #e0e0e0);border-radius:16px;background:var(--ion-card-background, #ffffff);max-width:320px;margin:0 auto}.ticket-card__title{font-size:1rem;font-weight:700;color:var(--ion-color-dark);text-align:center}.ticket-card__qr{display:flex;align-items:center;justify-content:center;min-height:200px}.ticket-card__qr-loading{display:flex;align-items:center;justify-content:center;width:200px;height:200px}.ticket-card__qr-fallback{font-family:monospace;font-size:.75rem;color:var(--ion-color-medium);word-break:break-all;text-align:center;padding:16px}.ticket-card__meta{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.ticket-card__folio{font-size:1rem;font-weight:700;color:var(--ion-color-dark)}.ticket-card__buyer{font-size:.875rem;color:var(--ion-color-medium)}.ticket-card__badge{margin-top:4px;font-size:.75rem;font-weight:600;padding:3px 12px;border-radius:999px;background:var(--ion-color-medium);color:var(--ion-color-medium-contrast, #fff);white-space:nowrap}.ticket-card__badge[data-status=sold]{background:var(--ion-color-success, #2dd36f);color:var(--ion-color-success-contrast, #fff)}.ticket-card__badge[data-status=checkedIn]{background:var(--ion-color-medium);color:var(--ion-color-medium-contrast, #fff)}.ticket-card__actions{width:100%;display:flex;flex-direction:column;gap:8px}.ticket-card__actions ion-button{--border-radius: 10px;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: QrCodeComponent, selector: "val-qr-code", inputs: ["props"], outputs: ["actionComplete", "imageLoad", "imageError"] }] }); }
+  `, isInline: true, styles: [":host{display:block}.ticket-card{--ticket-accent: var(--ion-color-primary, #ff00b2);--ticket-accent-2: #7026df;display:flex;flex-direction:column;width:min(100%,380px);margin:0 auto;overflow:hidden;border:1px solid var(--ion-color-light-shade, #d8d8dd);border-radius:22px;background:var(--ion-card-background, #ffffff);box-shadow:0 18px 50px #1f192d1f}.ticket-card__header{padding:22px 22px 20px;text-align:center;color:#fff;background:linear-gradient(135deg,var(--ticket-accent) 0%,var(--ticket-accent-2) 100%)}.ticket-card__eyebrow{margin-bottom:6px;font-size:.6875rem;font-weight:800;letter-spacing:.14em;line-height:1.2;text-transform:uppercase;opacity:.78}.ticket-card__title{font-size:1.25rem;font-weight:800;line-height:1.18}.ticket-card__body{position:relative;display:flex;flex-direction:column;align-items:stretch;background:radial-gradient(circle at 50% 0,rgba(255,0,178,.08),transparent 36%),var(--ion-card-background, #ffffff)}.ticket-card__qr{display:flex;align-items:center;justify-content:center;min-height:232px;padding:22px 22px 18px}.ticket-card__qr val-qr-code{display:block;padding:10px;border:1px solid rgba(31,25,45,.08);border-radius:18px;background:#fff;box-shadow:0 10px 30px #1f192d14}.ticket-card__qr-loading{display:flex;align-items:center;justify-content:center;width:220px;height:220px;border-radius:18px;background:#fff}.ticket-card__qr-fallback{padding:18px;border-radius:14px;background:#6b667514;color:var(--ion-color-medium, #6b6675);font-family:monospace;font-size:.75rem;line-height:1.5;text-align:center;word-break:break-all}.ticket-card__perf{position:relative;margin:0 22px;border-top:2px dashed rgba(107,102,117,.28)}.ticket-card__notch{position:absolute;top:-14px;width:26px;height:26px;border-radius:50%;background:var(--ion-background-color, #f8f8f8);box-shadow:inset 0 0 0 1px #1f192d14}.ticket-card__notch--left{left:-36px}.ticket-card__notch--right{right:-36px}.ticket-card__stub{display:flex;flex-direction:column;gap:18px;padding:18px 22px 22px}.ticket-card__meta{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;text-align:center}.ticket-card__folio{color:var(--ion-color-dark, #2f2b38);font-size:1.45rem;font-weight:850;line-height:1.15}.ticket-card__buyer{max-width:100%;overflow:hidden;color:var(--ion-color-medium, #6b6675);font-size:.9375rem;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}.ticket-card__badge{display:inline-flex;align-items:center;min-height:30px;margin-top:2px;padding:5px 14px;border-radius:999px;background:var(--ion-color-medium, #6b6675);color:var(--ion-color-medium-contrast, #ffffff);font-size:.8125rem;font-weight:800;line-height:1;white-space:nowrap}.ticket-card__badge[data-status=sold]{background:var(--ion-color-success, #16a34a);color:var(--ion-color-success-contrast, #ffffff)}.ticket-card__badge[data-status=checkedIn]{background:var(--ion-color-medium, #6b6675);color:var(--ion-color-medium-contrast, #ffffff)}.ticket-card__actions{display:grid;gap:10px;width:100%}.ticket-card__actions ion-button{min-height:48px;margin:0;font-weight:800;--border-radius: 14px;--border-width: 1.5px}@media (max-width: 420px){.ticket-card{width:100%;border-radius:20px}.ticket-card__qr{min-height:216px;padding-inline:16px}.ticket-card__stub{padding-inline:16px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: QrCodeComponent, selector: "val-qr-code", inputs: ["props"], outputs: ["actionComplete", "imageLoad", "imageError"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TicketCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'val-ticket-card', standalone: true, imports: [CommonModule, IonButton, IonIcon, IonSpinner, QrCodeComponent], template: `
     <div class="ticket-card">
-      @if (props().title) {
-        <div class="ticket-card__title">{{ props().title }}</div>
-      }
-
-      <div class="ticket-card__qr">
-        @if (qr(); as q) {
-          <val-qr-code [props]="qrProps(q)" />
-        } @else if (failed()) {
-          <div class="ticket-card__qr-fallback">{{ tokenShort() }}</div>
-        } @else {
-          <div class="ticket-card__qr-loading">
-            <ion-spinner name="crescent" aria-label="Generando QR" />
-          </div>
+      <div class="ticket-card__header">
+        <div class="ticket-card__eyebrow">{{ t('cardLabel') }}</div>
+        @if (props().title) {
+          <div class="ticket-card__title">{{ props().title }}</div>
         }
       </div>
 
-      <div class="ticket-card__meta">
-        @if (folioText(); as f) {
-          <div class="ticket-card__folio">{{ f }}</div>
-        }
-        @if (props().buyerName) {
-          <div class="ticket-card__buyer">{{ props().buyerName }}</div>
-        }
-        @if (statusLabel(); as s) {
-          <span class="ticket-card__badge" [attr.data-status]="status()">{{ s }}</span>
-        }
-      </div>
-
-      @if ((props().showDownload || props().showShare) && qr()) {
-        <div class="ticket-card__actions">
-          @if (props().showDownload) {
-            <ion-button fill="outline" expand="block" [disabled]="downloading()" (click)="downloadCard()">
-              <ion-icon name="download-outline" slot="start" />
-              {{ props().downloadLabel || t('download') }}
-            </ion-button>
+      <div class="ticket-card__body">
+        <div class="ticket-card__qr">
+          @if (qr(); as q) {
+            <val-qr-code [props]="qrProps(q)" />
+          } @else if (failed()) {
+            <div class="ticket-card__qr-fallback">{{ tokenShort() }}</div>
+          } @else {
+            <div class="ticket-card__qr-loading">
+              <ion-spinner name="crescent" aria-label="Generando QR" />
+            </div>
           }
-          @if (props().showShare) {
-            <ion-button fill="outline" expand="block" [disabled]="sharing()" (click)="shareCard()">
-              <ion-icon name="share-outline" slot="start" />
-              {{ props().shareLabel || t('share') }}
-            </ion-button>
+        </div>
+
+        <div class="ticket-card__perf" aria-hidden="true">
+          <span class="ticket-card__notch ticket-card__notch--left"></span>
+          <span class="ticket-card__notch ticket-card__notch--right"></span>
+        </div>
+
+        <div class="ticket-card__stub">
+          <div class="ticket-card__meta">
+            @if (folioText(); as f) {
+              <div class="ticket-card__folio">{{ f }}</div>
+            }
+            @if (props().buyerName) {
+              <div class="ticket-card__buyer">{{ props().buyerName }}</div>
+            }
+            @if (statusLabel(); as s) {
+              <span class="ticket-card__badge" [attr.data-status]="status()">{{ s }}</span>
+            }
+          </div>
+
+          @if ((props().showDownload || props().showShare) && qr()) {
+            <div class="ticket-card__actions">
+              @if (props().showDownload) {
+                <ion-button fill="outline" expand="block" [disabled]="downloading()" (click)="downloadCard()">
+                  <ion-icon name="download-outline" slot="start" />
+                  {{ props().downloadLabel || t('download') }}
+                </ion-button>
+              }
+              @if (props().showShare) {
+                <ion-button fill="outline" expand="block" [disabled]="sharing()" (click)="shareCard()">
+                  <ion-icon name="share-outline" slot="start" />
+                  {{ props().shareLabel || t('share') }}
+                </ion-button>
+              }
+            </div>
           }
         </div>
-      }
+      </div>
     </div>
-  `, styles: ["@charset \"UTF-8\";:host{display:block}.ticket-card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px;border:1px solid var(--ion-color-light-shade, #e0e0e0);border-radius:16px;background:var(--ion-card-background, #ffffff);max-width:320px;margin:0 auto}.ticket-card__title{font-size:1rem;font-weight:700;color:var(--ion-color-dark);text-align:center}.ticket-card__qr{display:flex;align-items:center;justify-content:center;min-height:200px}.ticket-card__qr-loading{display:flex;align-items:center;justify-content:center;width:200px;height:200px}.ticket-card__qr-fallback{font-family:monospace;font-size:.75rem;color:var(--ion-color-medium);word-break:break-all;text-align:center;padding:16px}.ticket-card__meta{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.ticket-card__folio{font-size:1rem;font-weight:700;color:var(--ion-color-dark)}.ticket-card__buyer{font-size:.875rem;color:var(--ion-color-medium)}.ticket-card__badge{margin-top:4px;font-size:.75rem;font-weight:600;padding:3px 12px;border-radius:999px;background:var(--ion-color-medium);color:var(--ion-color-medium-contrast, #fff);white-space:nowrap}.ticket-card__badge[data-status=sold]{background:var(--ion-color-success, #2dd36f);color:var(--ion-color-success-contrast, #fff)}.ticket-card__badge[data-status=checkedIn]{background:var(--ion-color-medium);color:var(--ion-color-medium-contrast, #fff)}.ticket-card__actions{width:100%;display:flex;flex-direction:column;gap:8px}.ticket-card__actions ion-button{--border-radius: 10px;margin:0}\n"] }]
+  `, styles: [":host{display:block}.ticket-card{--ticket-accent: var(--ion-color-primary, #ff00b2);--ticket-accent-2: #7026df;display:flex;flex-direction:column;width:min(100%,380px);margin:0 auto;overflow:hidden;border:1px solid var(--ion-color-light-shade, #d8d8dd);border-radius:22px;background:var(--ion-card-background, #ffffff);box-shadow:0 18px 50px #1f192d1f}.ticket-card__header{padding:22px 22px 20px;text-align:center;color:#fff;background:linear-gradient(135deg,var(--ticket-accent) 0%,var(--ticket-accent-2) 100%)}.ticket-card__eyebrow{margin-bottom:6px;font-size:.6875rem;font-weight:800;letter-spacing:.14em;line-height:1.2;text-transform:uppercase;opacity:.78}.ticket-card__title{font-size:1.25rem;font-weight:800;line-height:1.18}.ticket-card__body{position:relative;display:flex;flex-direction:column;align-items:stretch;background:radial-gradient(circle at 50% 0,rgba(255,0,178,.08),transparent 36%),var(--ion-card-background, #ffffff)}.ticket-card__qr{display:flex;align-items:center;justify-content:center;min-height:232px;padding:22px 22px 18px}.ticket-card__qr val-qr-code{display:block;padding:10px;border:1px solid rgba(31,25,45,.08);border-radius:18px;background:#fff;box-shadow:0 10px 30px #1f192d14}.ticket-card__qr-loading{display:flex;align-items:center;justify-content:center;width:220px;height:220px;border-radius:18px;background:#fff}.ticket-card__qr-fallback{padding:18px;border-radius:14px;background:#6b667514;color:var(--ion-color-medium, #6b6675);font-family:monospace;font-size:.75rem;line-height:1.5;text-align:center;word-break:break-all}.ticket-card__perf{position:relative;margin:0 22px;border-top:2px dashed rgba(107,102,117,.28)}.ticket-card__notch{position:absolute;top:-14px;width:26px;height:26px;border-radius:50%;background:var(--ion-background-color, #f8f8f8);box-shadow:inset 0 0 0 1px #1f192d14}.ticket-card__notch--left{left:-36px}.ticket-card__notch--right{right:-36px}.ticket-card__stub{display:flex;flex-direction:column;gap:18px;padding:18px 22px 22px}.ticket-card__meta{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;text-align:center}.ticket-card__folio{color:var(--ion-color-dark, #2f2b38);font-size:1.45rem;font-weight:850;line-height:1.15}.ticket-card__buyer{max-width:100%;overflow:hidden;color:var(--ion-color-medium, #6b6675);font-size:.9375rem;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}.ticket-card__badge{display:inline-flex;align-items:center;min-height:30px;margin-top:2px;padding:5px 14px;border-radius:999px;background:var(--ion-color-medium, #6b6675);color:var(--ion-color-medium-contrast, #ffffff);font-size:.8125rem;font-weight:800;line-height:1;white-space:nowrap}.ticket-card__badge[data-status=sold]{background:var(--ion-color-success, #16a34a);color:var(--ion-color-success-contrast, #ffffff)}.ticket-card__badge[data-status=checkedIn]{background:var(--ion-color-medium, #6b6675);color:var(--ion-color-medium-contrast, #ffffff)}.ticket-card__actions{display:grid;gap:10px;width:100%}.ticket-card__actions ion-button{min-height:48px;margin:0;font-weight:800;--border-radius: 14px;--border-width: 1.5px}@media (max-width: 420px){.ticket-card{width:100%;border-radius:20px}.ticket-card__qr{min-height:216px;padding-inline:16px}.ticket-card__stub{padding-inline:16px}}\n"] }]
         }], ctorParameters: () => [] });
 
 /**