valtech-components 4.0.151 → 4.0.153

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.151';
+const VERSION = '4.0.153';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -1789,6 +1789,7 @@ class ToastService {
             duration: request.duration,
             position: request.position ?? 'top',
             color: request.color ?? 'dark',
+            buttons: request.buttons,
         });
         await toast.present();
     }
@@ -1883,7 +1884,7 @@ class ValtechErrorService {
      */
     handle(err, opts = {}) {
         const interpreted = interpretError(err);
-        const { context, i18nMap, fallbackKey, i18nNamespace, toast } = opts;
+        const { context, i18nMap, fallbackKey, i18nNamespace, toast, showOperationId } = opts;
         // 1. Observabilidad — log estructurado a consola.
         console.error('[ValtechError] handled', {
             context: context ?? 'n/a',
@@ -1917,11 +1918,23 @@ class ValtechErrorService {
         });
         // 4. Toast (estándar Valtech: color 'dark', position 'top').
         if (toast !== false) {
+            const opId = showOperationId ? interpreted.operationId : undefined;
             this.toast.show({
                 message,
                 color: 'dark',
                 position: 'top',
-                duration: 3000,
+                // Más tiempo cuando hay botón de copia — el usuario necesita leerlo y tapear.
+                duration: opId ? 6000 : 3000,
+                buttons: opId
+                    ? [
+                        {
+                            text: 'Copiar ID',
+                            handler: () => {
+                                void navigator.clipboard.writeText(opId);
+                            },
+                        },
+                    ]
+                    : undefined,
             });
         }
         // 5. Devolver el error normalizado para lógica extra del caller.
@@ -30390,6 +30403,8 @@ addIcons({
     alertCircleOutline,
     cloudOfflineOutline,
     documentOutline,
+    copyOutline,
+    checkmarkOutline,
 });
 const DEFAULT_ICON_BY_VARIANT = {
     empty: 'document-outline',
@@ -30422,6 +30437,7 @@ const DEFAULT_ICON_BY_VARIANT = {
 class EmptyStateComponent {
     constructor() {
         this.props = input.required();
+        this.copied = signal(false);
         /** Variante resuelta (default `'empty'`). */
         this.variantClass = computed(() => this.props().variant ?? 'empty');
         /** Icono final — custom si se pasó, default de la variante si no. */
@@ -30448,6 +30464,12 @@ class EmptyStateComponent {
             };
         });
     }
+    copyOpId(opId) {
+        void navigator.clipboard.writeText(opId).then(() => {
+            this.copied.set(true);
+            setTimeout(() => this.copied.set(false), 1500);
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: EmptyStateComponent, isStandalone: true, selector: "val-empty-state", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
     <section
@@ -30488,8 +30510,15 @@ class EmptyStateComponent {
       @if (props().action; as a) {
         <val-button class="empty-state__cta" [props]="ctaProps()" (click)="a.handler()" />
       }
+
+      @if (props().operationId; as opId) {
+        <button class="empty-state__op-id" (click)="copyOpId(opId)" [attr.aria-label]="'Copiar ID de operación'">
+          <ion-icon [name]="copied() ? 'checkmark-outline' : 'copy-outline'" />
+          <span>{{ copied() ? 'ID copiado' : 'ID: ' + opId }}</span>
+        </button>
+      }
     </section>
-  `, isInline: true, styles: [".empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:32px 16px;min-height:240px}.empty-state__icon{color:var(--ion-color-medium)}.empty-state__emoji{line-height:1}.empty-state--error .empty-state__icon{color:var(--ion-color-warning, #ffb800)}.empty-state--offline .empty-state__icon{color:var(--ion-color-medium);opacity:.7}.empty-state__cta{margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:32px 16px;min-height:240px}.empty-state__icon{color:var(--ion-color-medium)}.empty-state__emoji{line-height:1}.empty-state--error .empty-state__icon{color:var(--ion-color-warning, #ffb800)}.empty-state--offline .empty-state__icon{color:var(--ion-color-medium);opacity:.7}.empty-state__cta{margin-top:8px}.empty-state__op-id{display:inline-flex;align-items:center;gap:6px;margin-top:4px;padding:5px 10px;background:none;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:999px;cursor:pointer;color:var(--ion-color-medium);font-size:.75rem;font-family:monospace;line-height:1;transition:color .15s,border-color .15s}.empty-state__op-id:hover{color:var(--ion-color-dark);border-color:var(--ion-color-medium)}.empty-state__op-id ion-icon{font-size:.875rem;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EmptyStateComponent, decorators: [{
             type: Component,
@@ -30532,8 +30561,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       @if (props().action; as a) {
         <val-button class="empty-state__cta" [props]="ctaProps()" (click)="a.handler()" />
       }
+
+      @if (props().operationId; as opId) {
+        <button class="empty-state__op-id" (click)="copyOpId(opId)" [attr.aria-label]="'Copiar ID de operación'">
+          <ion-icon [name]="copied() ? 'checkmark-outline' : 'copy-outline'" />
+          <span>{{ copied() ? 'ID copiado' : 'ID: ' + opId }}</span>
+        </button>
+      }
     </section>
-  `, styles: [".empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:32px 16px;min-height:240px}.empty-state__icon{color:var(--ion-color-medium)}.empty-state__emoji{line-height:1}.empty-state--error .empty-state__icon{color:var(--ion-color-warning, #ffb800)}.empty-state--offline .empty-state__icon{color:var(--ion-color-medium);opacity:.7}.empty-state__cta{margin-top:8px}\n"] }]
+  `, styles: [".empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:32px 16px;min-height:240px}.empty-state__icon{color:var(--ion-color-medium)}.empty-state__emoji{line-height:1}.empty-state--error .empty-state__icon{color:var(--ion-color-warning, #ffb800)}.empty-state--offline .empty-state__icon{color:var(--ion-color-medium);opacity:.7}.empty-state__cta{margin-top:8px}.empty-state__op-id{display:inline-flex;align-items:center;gap:6px;margin-top:4px;padding:5px 10px;background:none;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:999px;cursor:pointer;color:var(--ion-color-medium);font-size:.75rem;font-family:monospace;line-height:1;transition:color .15s,border-color .15s}.empty-state__op-id:hover{color:var(--ion-color-dark);border-color:var(--ion-color-medium)}.empty-state__op-id ion-icon{font-size:.875rem;flex-shrink:0}\n"] }]
         }] });
 
 /**
@@ -30587,6 +30623,7 @@ function createErrorStateProps(err, opts) {
         description: opts.description ? pick(opts.description) : undefined,
         action,
         emoji: opts.emoji ? pick(opts.emoji) : undefined,
+        operationId: interpreted.operationId,
     };
 }
 
@@ -69934,20 +69971,24 @@ class TicketCardComponent {
         }
       </div>
 
-      @if (props().showDownload && qr()) {
-        <ion-button fill="clear" size="small" [disabled]="downloading()" (click)="downloadCard()">
-          <ion-icon name="download-outline" slot="start" />
-          {{ props().downloadLabel || t('download') }}
-        </ion-button>
-      }
-      @if (props().showShare && qr()) {
-        <ion-button fill="clear" size="small" [disabled]="sharing()" (click)="shareCard()">
-          <ion-icon name="share-outline" slot="start" />
-          {{ props().shareLabel || t('share') }}
-        </ion-button>
+      @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>
-  `, 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)}\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: ["@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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TicketCardComponent, decorators: [{
             type: Component,
@@ -69981,20 +70022,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         }
       </div>
 
-      @if (props().showDownload && qr()) {
-        <ion-button fill="clear" size="small" [disabled]="downloading()" (click)="downloadCard()">
-          <ion-icon name="download-outline" slot="start" />
-          {{ props().downloadLabel || t('download') }}
-        </ion-button>
-      }
-      @if (props().showShare && qr()) {
-        <ion-button fill="clear" size="small" [disabled]="sharing()" (click)="shareCard()">
-          <ion-icon name="share-outline" slot="start" />
-          {{ props().shareLabel || t('share') }}
-        </ion-button>
+      @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>
-  `, 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)}\n"] }]
+  `, 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"] }]
         }], ctorParameters: () => [] });
 
 /**