valtech-components 2.0.718 → 2.0.720

package/fesm2022/valtech-components.mjs

@@ -50,7 +50,7 @@ import 'prismjs/components/prism-json';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '2.0.718';
+const VERSION = '2.0.720';
 
 /**
  * Servicio para gestionar presets de componentes.
@@ -3911,6 +3911,9 @@ const VALTECH_DEFAULT_CONTENT = {
             goodMorning: 'Buenos días',
             goodAfternoon: 'Buenas tardes',
             goodEvening: 'Buenas noches',
+            // Auth — confirmación cierre de sesión
+            logoutConfirmTitle: 'Cerrar sesión',
+            logoutConfirmMessage: '¿Seguro que deseas cerrar sesión?',
             // Idiomas
             languageName_es: 'Español',
             languageName_en: 'English',
@@ -4055,6 +4058,9 @@ const VALTECH_DEFAULT_CONTENT = {
             goodMorning: 'Good morning',
             goodAfternoon: 'Good afternoon',
             goodEvening: 'Good evening',
+            // Auth — sign out confirmation
+            logoutConfirmTitle: 'Sign out',
+            logoutConfirmMessage: 'Are you sure you want to sign out?',
             // Languages
             languageName_es: 'Español',
             languageName_en: 'English',
@@ -11413,14 +11419,14 @@ addIcons({ trendingUp, trendingDown, remove, analytics, people, cash, cart, eye,
  *
  * @input preset: string - Name of preset to apply
  * @input props: StatsCardMetadata - Configuration for the stats card
- * @output cardClick: void - Emits when card is clicked
+ * @output onClick: void - Emits when card is clicked
  */
 class StatsCardComponent {
     constructor() {
         this.presets = inject(PresetService);
         this.props = {};
         this.resolvedProps = {};
-        this.cardClick = new EventEmitter();
+        this.onClick = new EventEmitter();
         this.Math = Math;
     }
     ngOnInit() {
@@ -11432,9 +11438,7 @@ class StatsCardComponent {
         }
     }
     resolveProps() {
-        const presetProps = this.preset
-            ? this.presets.get('statsCard', this.preset)
-            : {};
+        const presetProps = this.preset ? this.presets.get('statsCard', this.preset) : {};
         this.resolvedProps = {
             ...presetProps,
             ...this.props,
@@ -11466,13 +11470,13 @@ class StatsCardComponent {
         return 'remove';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StatsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StatsCardComponent, isStandalone: true, selector: "val-stats-card", inputs: { preset: "preset", props: "props" }, outputs: { cardClick: "cardClick" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StatsCardComponent, isStandalone: true, selector: "val-stats-card", inputs: { preset: "preset", props: "props" }, outputs: { onClick: "onClick" }, usesOnChanges: true, ngImport: i0, template: `
     <ion-card
       class="stats-card"
       [class]="getBackgroundClass()"
       [style.--card-color]="getCardColor()"
       [style.min-height.px]="resolvedProps.minHeight"
-      (click)="cardClick.emit()"
+      (click)="onClick.emit()"
     >
       <ion-card-content>
         <div class="stats-header">
@@ -11536,7 +11540,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       [class]="getBackgroundClass()"
       [style.--card-color]="getCardColor()"
       [style.min-height.px]="resolvedProps.minHeight"
-      (click)="cardClick.emit()"
+      (click)="onClick.emit()"
     >
       <ion-card-content>
         <div class="stats-header">
@@ -11595,7 +11599,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], props: [{
                 type: Input
-            }], cardClick: [{
+            }], onClick: [{
                 type: Output
             }] } });
 
@@ -18776,10 +18780,7 @@ const ACTION_CARD_DEFAULTS = {
 };
 
 addIcons({ chevronForwardOutline });
-const IONIC_COLORS = [
-    'primary', 'secondary', 'tertiary', 'success',
-    'warning', 'danger', 'light', 'medium', 'dark'
-];
+const IONIC_COLORS = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
 /**
  * val-action-card
  *
@@ -18794,7 +18795,7 @@ const IONIC_COLORS = [
  *     title: 'Settings',
  *     description: 'Manage your preferences'
  *   }"
- *   (cardClick)="onCardClick($event)"
+ *   (onClick)="onCardClick($event)"
  * />
  * ```
  *
@@ -18830,7 +18831,7 @@ class ActionCardComponent {
         /** Component configuration */
         this.props = input({});
         /** Event emitted when card is clicked */
-        this.cardClick = new EventEmitter();
+        this.onClick = new EventEmitter();
         /** Merged configuration with defaults */
         this.config = computed(() => ({
             ...ACTION_CARD_DEFAULTS,
@@ -18894,7 +18895,7 @@ class ActionCardComponent {
             return;
         }
         // Emit click event
-        this.cardClick.emit({
+        this.onClick.emit({
             token: cfg.token,
             navigated: !!cfg.routerLink || !!cfg.href,
         });
@@ -18904,7 +18905,7 @@ class ActionCardComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ActionCardComponent, isStandalone: true, selector: "val-action-card", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ActionCardComponent, isStandalone: true, selector: "val-action-card", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
     <article
       class="action-card"
       [class.action-card--small]="config().size === 'small'"
@@ -18936,11 +18937,7 @@ class ActionCardComponent {
       }
 
       <!-- Icon Container -->
-      <div
-        class="action-card__icon"
-        [style.color]="getIconColor()"
-        [style.background-color]="getIconBackgroundColor()"
-      >
+      <div class="action-card__icon" [style.color]="getIconColor()" [style.background-color]="getIconBackgroundColor()">
         @if (config().icon?.ionicon) {
           <ion-icon [name]="config().icon!.ionicon!"></ion-icon>
         } @else if (config().icon?.svgPath) {
@@ -18955,11 +18952,7 @@ class ActionCardComponent {
             <path [attr.d]="config().icon!.svgPath" />
           </svg>
         } @else if (config().icon?.imageUrl) {
-          <img
-            [src]="config().icon!.imageUrl"
-            [alt]="getTitle()"
-            class="action-card__icon-image"
-          />
+          <img [src]="config().icon!.imageUrl" [alt]="getTitle()" class="action-card__icon-image" />
         }
       </div>
 
@@ -18973,10 +18966,7 @@ class ActionCardComponent {
 
       <!-- Chevron (optional) -->
       @if (config().showChevron && !config().disabled) {
-        <ion-icon
-          name="chevron-forward-outline"
-          class="action-card__chevron"
-        ></ion-icon>
+        <ion-icon name="chevron-forward-outline" class="action-card__chevron"></ion-icon>
       }
     </article>
   `, isInline: true, styles: [":host{display:block}.action-card{position:relative;display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--card-bg, var(--ion-card-background, var(--ion-background-color)));border-radius:12px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;text-decoration:none;overflow:hidden;--ripple-color: var(--ion-color-primary)}.action-card--small{padding:.75rem;gap:.75rem}.action-card--small .action-card__icon{width:36px;height:36px;font-size:18px;border-radius:8px}.action-card--small .action-card__icon svg{width:18px;height:18px}.action-card--small .action-card__title{font-size:.9rem}.action-card--small .action-card__description{font-size:.8rem}.action-card--medium{padding:1rem;gap:1rem}.action-card--medium .action-card__icon{width:48px;height:48px;font-size:24px;border-radius:10px}.action-card--medium .action-card__icon svg{width:24px;height:24px}.action-card--medium .action-card__title{font-size:1rem}.action-card--medium .action-card__description{font-size:.875rem}.action-card--large{padding:1.25rem;gap:1.25rem}.action-card--large .action-card__icon{width:56px;height:56px;font-size:28px;border-radius:12px}.action-card--large .action-card__icon svg{width:28px;height:28px}.action-card--large .action-card__title{font-size:1.1rem}.action-card--large .action-card__description{font-size:.9rem}.action-card--bordered{border:1px solid var(--card-border-color, var(--ion-color-light-shade))}.action-card--shadowed{box-shadow:0 2px 8px #00000014}.action-card--clickable:hover{transform:translateY(-2px);box-shadow:0 4px 16px #0000001f}.action-card--clickable:focus-visible{outline:2px solid var(--ion-color-primary);outline-offset:2px}.action-card--clickable:active{transform:translateY(0)}.action-card--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.action-card__badge{position:absolute;top:8px;right:8px;padding:2px 8px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-radius:10px;z-index:1}.action-card__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.action-card__icon ion-icon{font-size:inherit}.action-card__icon svg{display:block}.action-card__icon-image{width:100%;height:100%;object-fit:cover;border-radius:8px}.action-card__content{flex:1;min-width:0}.action-card__title{margin:0 0 .25rem;font-weight:600;color:var(--ion-text-color);line-height:1.3}.action-card__description{margin:0;color:var(--ion-color-medium);line-height:1.4}.action-card__chevron{flex-shrink:0;font-size:1.25rem;color:var(--ion-color-medium);transition:transform .2s ease}.action-card--clickable:hover .action-card__chevron{transform:translate(4px)}@media (prefers-color-scheme: dark){.action-card--shadowed{box-shadow:0 2px 8px #0000004d}.action-card--clickable:hover{box-shadow:0 4px 16px #0006}}:host-context(.dark) .action-card--shadowed,:host-context(body.dark) .action-card--shadowed,:host-context([data-theme=dark]) .action-card--shadowed{box-shadow:0 2px 8px #0000004d}:host-context(.dark) .action-card--clickable:hover,:host-context(body.dark) .action-card--clickable:hover,:host-context([data-theme=dark]) .action-card--clickable:hover{box-shadow:0 4px 16px #0006}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }] }); }
@@ -19015,11 +19005,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       }
 
       <!-- Icon Container -->
-      <div
-        class="action-card__icon"
-        [style.color]="getIconColor()"
-        [style.background-color]="getIconBackgroundColor()"
-      >
+      <div class="action-card__icon" [style.color]="getIconColor()" [style.background-color]="getIconBackgroundColor()">
         @if (config().icon?.ionicon) {
           <ion-icon [name]="config().icon!.ionicon!"></ion-icon>
         } @else if (config().icon?.svgPath) {
@@ -19034,11 +19020,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             <path [attr.d]="config().icon!.svgPath" />
           </svg>
         } @else if (config().icon?.imageUrl) {
-          <img
-            [src]="config().icon!.imageUrl"
-            [alt]="getTitle()"
-            class="action-card__icon-image"
-          />
+          <img [src]="config().icon!.imageUrl" [alt]="getTitle()" class="action-card__icon-image" />
         }
       </div>
 
@@ -19052,14 +19034,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
       <!-- Chevron (optional) -->
       @if (config().showChevron && !config().disabled) {
-        <ion-icon
-          name="chevron-forward-outline"
-          class="action-card__chevron"
-        ></ion-icon>
+        <ion-icon name="chevron-forward-outline" class="action-card__chevron"></ion-icon>
       }
     </article>
   `, styles: [":host{display:block}.action-card{position:relative;display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--card-bg, var(--ion-card-background, var(--ion-background-color)));border-radius:12px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;text-decoration:none;overflow:hidden;--ripple-color: var(--ion-color-primary)}.action-card--small{padding:.75rem;gap:.75rem}.action-card--small .action-card__icon{width:36px;height:36px;font-size:18px;border-radius:8px}.action-card--small .action-card__icon svg{width:18px;height:18px}.action-card--small .action-card__title{font-size:.9rem}.action-card--small .action-card__description{font-size:.8rem}.action-card--medium{padding:1rem;gap:1rem}.action-card--medium .action-card__icon{width:48px;height:48px;font-size:24px;border-radius:10px}.action-card--medium .action-card__icon svg{width:24px;height:24px}.action-card--medium .action-card__title{font-size:1rem}.action-card--medium .action-card__description{font-size:.875rem}.action-card--large{padding:1.25rem;gap:1.25rem}.action-card--large .action-card__icon{width:56px;height:56px;font-size:28px;border-radius:12px}.action-card--large .action-card__icon svg{width:28px;height:28px}.action-card--large .action-card__title{font-size:1.1rem}.action-card--large .action-card__description{font-size:.9rem}.action-card--bordered{border:1px solid var(--card-border-color, var(--ion-color-light-shade))}.action-card--shadowed{box-shadow:0 2px 8px #00000014}.action-card--clickable:hover{transform:translateY(-2px);box-shadow:0 4px 16px #0000001f}.action-card--clickable:focus-visible{outline:2px solid var(--ion-color-primary);outline-offset:2px}.action-card--clickable:active{transform:translateY(0)}.action-card--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.action-card__badge{position:absolute;top:8px;right:8px;padding:2px 8px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-radius:10px;z-index:1}.action-card__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.action-card__icon ion-icon{font-size:inherit}.action-card__icon svg{display:block}.action-card__icon-image{width:100%;height:100%;object-fit:cover;border-radius:8px}.action-card__content{flex:1;min-width:0}.action-card__title{margin:0 0 .25rem;font-weight:600;color:var(--ion-text-color);line-height:1.3}.action-card__description{margin:0;color:var(--ion-color-medium);line-height:1.4}.action-card__chevron{flex-shrink:0;font-size:1.25rem;color:var(--ion-color-medium);transition:transform .2s ease}.action-card--clickable:hover .action-card__chevron{transform:translate(4px)}@media (prefers-color-scheme: dark){.action-card--shadowed{box-shadow:0 2px 8px #0000004d}.action-card--clickable:hover{box-shadow:0 4px 16px #0006}}:host-context(.dark) .action-card--shadowed,:host-context(body.dark) .action-card--shadowed,:host-context([data-theme=dark]) .action-card--shadowed{box-shadow:0 2px 8px #0000004d}:host-context(.dark) .action-card--clickable:hover,:host-context(body.dark) .action-card--clickable:hover,:host-context([data-theme=dark]) .action-card--clickable:hover{box-shadow:0 4px 16px #0006}\n"] }]
-        }], propDecorators: { cardClick: [{
+        }], propDecorators: { onClick: [{
                 type: Output
             }] } });
 
@@ -28737,6 +28716,210 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     args: [VALTECH_AUTH_CONFIG]
                 }] }, { type: i1$8.HttpClient }, { type: i0.NgZone }] });
 
+/**
+ * Default confirmation dialog options.
+ */
+const DEFAULT_CONFIRM_BUTTON = {
+    text: 'Confirm',
+    role: 'confirm',
+    color: 'primary',
+};
+const DEFAULT_CANCEL_BUTTON = {
+    text: 'Cancel',
+    role: 'cancel',
+    color: 'medium',
+};
+
+/**
+ * Service for displaying confirmation dialogs.
+ *
+ * @example Basic usage
+ * const result = await confirmationService.confirm({
+ *   title: 'Delete Item',
+ *   message: 'Are you sure you want to delete this item?',
+ * });
+ *
+ * if (result.confirmed) {
+ *   // User confirmed
+ * }
+ *
+ * @example Custom buttons
+ * const result = await confirmationService.confirm({
+ *   title: 'Save Changes',
+ *   message: 'Do you want to save your changes before leaving?',
+ *   confirmButton: { text: 'Save', color: 'success' },
+ *   cancelButton: { text: 'Discard', color: 'danger' },
+ *   extraButtons: [{ text: 'Cancel', role: 'cancel' }]
+ * });
+ *
+ * @example Destructive action
+ * const result = await confirmationService.confirmDestructive({
+ *   title: 'Delete Account',
+ *   message: 'This action cannot be undone. Are you sure?',
+ * });
+ */
+class ConfirmationDialogService {
+    constructor() {
+        this.alertController = inject(AlertController);
+    }
+    /**
+     * Shows a confirmation dialog and returns the result.
+     * @param options - Configuration for the dialog
+     * @returns Promise resolving to the confirmation result
+     */
+    async confirm(options) {
+        const buttons = this.buildButtons(options);
+        // Default: usa val-alert (estilo iOS dark unificado de la lib)
+        const userClasses = options.cssClass
+            ? Array.isArray(options.cssClass)
+                ? options.cssClass
+                : [options.cssClass]
+            : [];
+        const cssClass = ['val-alert', ...userClasses];
+        const alert = await this.alertController.create({
+            header: options.title,
+            subHeader: options.subHeader,
+            message: options.message,
+            buttons,
+            backdropDismiss: options.backdropDismiss ?? false,
+            cssClass,
+            mode: options.mode ?? 'ios',
+            translucent: options.translucent ?? true,
+            animated: options.animated ?? true,
+        });
+        await alert.present();
+        const { role, data } = await alert.onDidDismiss();
+        return {
+            confirmed: role === 'confirm',
+            role,
+            data,
+        };
+    }
+    /**
+     * Shows a simple confirmation dialog with default buttons.
+     * @param title - Dialog title
+     * @param message - Dialog message
+     * @returns Promise resolving to true if confirmed, false otherwise
+     */
+    async confirmSimple(title, message) {
+        const result = await this.confirm({ title, message });
+        return result.confirmed;
+    }
+    /**
+     * Shows a destructive action confirmation with red confirm button.
+     * @param options - Configuration for the dialog
+     * @returns Promise resolving to the confirmation result
+     */
+    async confirmDestructive(options) {
+        // Marca el modal con val-alert--destructive para que el CSS pinte
+        // el texto del botón destructivo en rojo (sin tocar el fondo).
+        const extraClass = 'val-alert--destructive';
+        const userClasses = options.cssClass
+            ? Array.isArray(options.cssClass)
+                ? options.cssClass
+                : [options.cssClass]
+            : [];
+        return this.confirm({
+            ...options,
+            cssClass: [...userClasses, extraClass],
+            confirmButton: {
+                text: options.confirmButton?.text || 'Delete',
+                role: 'destructive',
+                ...options.confirmButton,
+            },
+        });
+    }
+    /**
+     * Shows an info alert with just an OK button.
+     * @param title - Alert title
+     * @param message - Alert message
+     */
+    async alert(title, message) {
+        const alert = await this.alertController.create({
+            header: title,
+            message,
+            buttons: [{ text: 'OK', role: 'confirm' }],
+        });
+        await alert.present();
+        await alert.onDidDismiss();
+    }
+    /**
+     * Shows a three-option dialog (Save, Discard, Cancel).
+     * Common for unsaved changes scenarios.
+     * @param title - Dialog title
+     * @param message - Dialog message
+     * @returns Promise resolving to 'save' | 'discard' | 'cancel'
+     */
+    async confirmSaveDiscard(title, message) {
+        const alert = await this.alertController.create({
+            header: title,
+            message,
+            backdropDismiss: false,
+            buttons: [
+                {
+                    text: 'Cancel',
+                    role: 'cancel',
+                },
+                {
+                    text: 'Discard',
+                    role: 'destructive',
+                    cssClass: 'text-danger',
+                },
+                {
+                    text: 'Save',
+                    role: 'confirm',
+                },
+            ],
+        });
+        await alert.present();
+        const { role } = await alert.onDidDismiss();
+        if (role === 'confirm')
+            return 'save';
+        if (role === 'destructive')
+            return 'discard';
+        return 'cancel';
+    }
+    buildButtons(options) {
+        const buttons = [];
+        // Cancel button — sin color ionic por default (el CSS de val-alert se encarga)
+        const cancelBtn = options.cancelButton || DEFAULT_CANCEL_BUTTON;
+        buttons.push({
+            text: cancelBtn.text,
+            role: cancelBtn.role || 'cancel',
+            cssClass: cancelBtn.cssClass,
+            handler: cancelBtn.handler,
+        });
+        // Extra buttons (if any)
+        if (options.extraButtons) {
+            options.extraButtons.forEach(btn => {
+                buttons.push({
+                    text: btn.text,
+                    role: btn.role,
+                    cssClass: btn.cssClass,
+                    handler: btn.handler,
+                });
+            });
+        }
+        // Confirm button
+        const confirmBtn = options.confirmButton || DEFAULT_CONFIRM_BUTTON;
+        buttons.push({
+            text: confirmBtn.text,
+            role: confirmBtn.role || 'confirm',
+            cssClass: confirmBtn.cssClass,
+            handler: confirmBtn.handler,
+        });
+        return buttons;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConfirmationDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConfirmationDialogService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConfirmationDialogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 /**
  * Servicio principal de autenticación.
  *
@@ -28760,7 +28943,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * ```
  */
 class AuthService {
-    constructor(config, http, router, stateService, tokenService, storageService, syncService, firebaseService, oauthService, messagingService, i18nService) {
+    constructor(config, http, router, stateService, tokenService, storageService, syncService, firebaseService, oauthService, messagingService, i18nService, confirmationService) {
         this.config = config;
         this.http = http;
         this.router = router;
@@ -28772,6 +28955,7 @@ class AuthService {
         this.oauthService = oauthService;
         this.messagingService = messagingService;
         this.i18nService = i18nService;
+        this.confirmationService = confirmationService;
         // Timer para refresh proactivo
         this.refreshTimerId = null;
         this.syncSubscription = null;
@@ -29097,6 +29281,34 @@ class AuthService {
             tokenType: 'Bearer',
         });
     }
+    /**
+     * Cierra sesión tras pedir confirmación al usuario.
+     *
+     * Muestra un diálogo nativo (estilo destructivo). Si el usuario confirma,
+     * ejecuta `logout()`. Si cancela, no pasa nada.
+     *
+     * Texto por defecto desde `_global` i18n: `logoutConfirmTitle`,
+     * `logoutConfirmMessage`, `logout`, `cancel`. Override via `opts`.
+     *
+     * @returns true si el usuario confirmó (logout ejecutado), false si canceló.
+     *
+     * @example
+     * onLogoutClick() { this.auth.logoutWithConfirmation(); }
+     */
+    async logoutWithConfirmation(opts) {
+        const t = (key, fallback) => this.i18nService?.t(key) || fallback;
+        const result = await this.confirmationService.confirmDestructive({
+            title: opts?.title ?? t('logoutConfirmTitle', 'Cerrar sesión'),
+            message: opts?.message ?? t('logoutConfirmMessage', '¿Seguro que deseas cerrar sesión?'),
+            confirmButton: { text: opts?.confirmText ?? t('logout', 'Cerrar sesión') },
+            cancelButton: { text: opts?.cancelText ?? t('cancel', 'Cancelar') },
+        });
+        if (result.confirmed) {
+            await this.logout();
+            return true;
+        }
+        return false;
+    }
     /**
      * Cierra sesión.
      */
@@ -29811,7 +30023,7 @@ class AuthService {
         }
         return { platform: 'web', browser, os };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuthService, deps: [{ token: VALTECH_AUTH_CONFIG }, { token: i1$8.HttpClient }, { token: i1$1.Router }, { token: AuthStateService }, { token: TokenService }, { token: AuthStorageService }, { token: AuthSyncService }, { token: FirebaseService }, { token: OAuthService }, { token: MessagingService, optional: true }, { token: I18nService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuthService, deps: [{ token: VALTECH_AUTH_CONFIG }, { token: i1$8.HttpClient }, { token: i1$1.Router }, { token: AuthStateService }, { token: TokenService }, { token: AuthStorageService }, { token: AuthSyncService }, { token: FirebaseService }, { token: OAuthService }, { token: MessagingService, optional: true }, { token: I18nService, optional: true }, { token: ConfirmationDialogService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuthService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuthService, decorators: [{
@@ -29824,7 +30036,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     type: Optional
                 }] }, { type: I18nService, decorators: [{
                     type: Optional
-                }] }] });
+                }] }, { type: ConfirmationDialogService }] });
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -33838,196 +34050,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 // ValtechConfig and LangProvider have been removed in v3.0.0
 // Use LocaleService for language management instead
 
-/**
- * Default confirmation dialog options.
- */
-const DEFAULT_CONFIRM_BUTTON = {
-    text: 'Confirm',
-    role: 'confirm',
-    color: 'primary',
-};
-const DEFAULT_CANCEL_BUTTON = {
-    text: 'Cancel',
-    role: 'cancel',
-    color: 'medium',
-};
-
-/**
- * Service for displaying confirmation dialogs.
- *
- * @example Basic usage
- * const result = await confirmationService.confirm({
- *   title: 'Delete Item',
- *   message: 'Are you sure you want to delete this item?',
- * });
- *
- * if (result.confirmed) {
- *   // User confirmed
- * }
- *
- * @example Custom buttons
- * const result = await confirmationService.confirm({
- *   title: 'Save Changes',
- *   message: 'Do you want to save your changes before leaving?',
- *   confirmButton: { text: 'Save', color: 'success' },
- *   cancelButton: { text: 'Discard', color: 'danger' },
- *   extraButtons: [{ text: 'Cancel', role: 'cancel' }]
- * });
- *
- * @example Destructive action
- * const result = await confirmationService.confirmDestructive({
- *   title: 'Delete Account',
- *   message: 'This action cannot be undone. Are you sure?',
- * });
- */
-class ConfirmationDialogService {
-    constructor() {
-        this.alertController = inject(AlertController);
-    }
-    /**
-     * Shows a confirmation dialog and returns the result.
-     * @param options - Configuration for the dialog
-     * @returns Promise resolving to the confirmation result
-     */
-    async confirm(options) {
-        const buttons = this.buildButtons(options);
-        const alert = await this.alertController.create({
-            header: options.title,
-            subHeader: options.subHeader,
-            message: options.message,
-            buttons,
-            backdropDismiss: options.backdropDismiss ?? false,
-            cssClass: options.cssClass,
-            mode: options.mode,
-            translucent: options.translucent ?? false,
-            animated: options.animated ?? true,
-        });
-        await alert.present();
-        const { role, data } = await alert.onDidDismiss();
-        return {
-            confirmed: role === 'confirm',
-            role,
-            data,
-        };
-    }
-    /**
-     * Shows a simple confirmation dialog with default buttons.
-     * @param title - Dialog title
-     * @param message - Dialog message
-     * @returns Promise resolving to true if confirmed, false otherwise
-     */
-    async confirmSimple(title, message) {
-        const result = await this.confirm({ title, message });
-        return result.confirmed;
-    }
-    /**
-     * Shows a destructive action confirmation with red confirm button.
-     * @param options - Configuration for the dialog
-     * @returns Promise resolving to the confirmation result
-     */
-    async confirmDestructive(options) {
-        return this.confirm({
-            ...options,
-            confirmButton: {
-                text: options.confirmButton?.text || 'Delete',
-                role: 'destructive',
-                color: 'danger',
-                cssClass: 'destructive-button',
-                ...options.confirmButton,
-            },
-        });
-    }
-    /**
-     * Shows an info alert with just an OK button.
-     * @param title - Alert title
-     * @param message - Alert message
-     */
-    async alert(title, message) {
-        const alert = await this.alertController.create({
-            header: title,
-            message,
-            buttons: [{ text: 'OK', role: 'confirm' }],
-        });
-        await alert.present();
-        await alert.onDidDismiss();
-    }
-    /**
-     * Shows a three-option dialog (Save, Discard, Cancel).
-     * Common for unsaved changes scenarios.
-     * @param title - Dialog title
-     * @param message - Dialog message
-     * @returns Promise resolving to 'save' | 'discard' | 'cancel'
-     */
-    async confirmSaveDiscard(title, message) {
-        const alert = await this.alertController.create({
-            header: title,
-            message,
-            backdropDismiss: false,
-            buttons: [
-                {
-                    text: 'Cancel',
-                    role: 'cancel',
-                },
-                {
-                    text: 'Discard',
-                    role: 'destructive',
-                    cssClass: 'text-danger',
-                },
-                {
-                    text: 'Save',
-                    role: 'confirm',
-                },
-            ],
-        });
-        await alert.present();
-        const { role } = await alert.onDidDismiss();
-        if (role === 'confirm')
-            return 'save';
-        if (role === 'destructive')
-            return 'discard';
-        return 'cancel';
-    }
-    buildButtons(options) {
-        const buttons = [];
-        // Cancel button
-        const cancelBtn = options.cancelButton || DEFAULT_CANCEL_BUTTON;
-        buttons.push({
-            text: cancelBtn.text,
-            role: cancelBtn.role || 'cancel',
-            cssClass: cancelBtn.cssClass || `button-${cancelBtn.color || 'medium'}`,
-            handler: cancelBtn.handler,
-        });
-        // Extra buttons (if any)
-        if (options.extraButtons) {
-            options.extraButtons.forEach((btn) => {
-                buttons.push({
-                    text: btn.text,
-                    role: btn.role,
-                    cssClass: btn.cssClass || `button-${btn.color || 'medium'}`,
-                    handler: btn.handler,
-                });
-            });
-        }
-        // Confirm button
-        const confirmBtn = options.confirmButton || DEFAULT_CONFIRM_BUTTON;
-        buttons.push({
-            text: confirmBtn.text,
-            role: confirmBtn.role || 'confirm',
-            cssClass: confirmBtn.cssClass || `button-${confirmBtn.color || 'primary'}`,
-            handler: confirmBtn.handler,
-        });
-        return buttons;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConfirmationDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConfirmationDialogService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConfirmationDialogService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
 /**
  * Default modal sizes.
  */