valtech-components 2.0.718 → 2.0.720

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

@@ -15,7 +15,7 @@ import * as i0 from "@angular/core";
  *     title: 'Settings',
  *     description: 'Manage your preferences'
  *   }"
- *   (cardClick)="onCardClick($event)"
+ *   (onClick)="onCardClick($event)"
  * />
  * ```
  *
@@ -50,7 +50,7 @@ export declare class ActionCardComponent {
     /** Component configuration */
     readonly props: import("@angular/core").InputSignal<Partial<ActionCardMetadata>>;
     /** Event emitted when card is clicked */
-    cardClick: EventEmitter<ActionCardClickEvent>;
+    onClick: EventEmitter<ActionCardClickEvent>;
     /** Merged configuration with defaults */
     config: import("@angular/core").Signal<{
         token?: string;
@@ -86,5 +86,5 @@ export declare class ActionCardComponent {
     /** Handle card click */
     handleClick(event: MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ActionCardComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ActionCardComponent, "val-action-card", never, { "props": { "alias": "props"; "required": false; "isSignal": true; }; }, { "cardClick": "cardClick"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ActionCardComponent, "val-action-card", never, { "props": { "alias": "props"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, never, true, never>;
 }

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

@@ -6,7 +6,7 @@ export declare class StatsCardComponent implements OnInit, OnChanges {
     preset?: string;
     props: Partial<StatsCardMetadata>;
     resolvedProps: StatsCardMetadata;
-    cardClick: EventEmitter<void>;
+    onClick: EventEmitter<void>;
     Math: Math;
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
@@ -16,5 +16,5 @@ export declare class StatsCardComponent implements OnInit, OnChanges {
     getTrendClass(): string;
     getTrendIcon(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<StatsCardComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<StatsCardComponent, "val-stats-card", never, { "preset": { "alias": "preset"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, { "cardClick": "cardClick"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StatsCardComponent, "val-stats-card", never, { "preset": { "alias": "preset"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, { "onClick": "onClick"; }, never, never, true, never>;
 }

package/lib/services/auth/auth.service.d.ts

@@ -10,6 +10,7 @@ import { SigninRequest, SigninResponse, SignupRequest, SignupResponse, VerifyEma
 import { OAuthService } from './oauth.service';
 import { FirebaseService, MessagingService } from '../firebase';
 import { I18nService } from '../i18n';
+import { ConfirmationDialogService } from '../confirmation-dialog/confirmation-dialog.service';
 import * as i0 from "@angular/core";
 /**
  * Servicio principal de autenticación.
@@ -45,9 +46,10 @@ export declare class AuthService implements OnDestroy {
     private oauthService;
     private messagingService;
     private i18nService;
+    private confirmationService;
     private refreshTimerId;
     private syncSubscription;
-    constructor(config: ValtechAuthConfig, http: HttpClient, router: Router, stateService: AuthStateService, tokenService: TokenService, storageService: AuthStorageService, syncService: AuthSyncService, firebaseService: FirebaseService, oauthService: OAuthService, messagingService: MessagingService | null, i18nService: I18nService | null);
+    constructor(config: ValtechAuthConfig, http: HttpClient, router: Router, stateService: AuthStateService, tokenService: TokenService, storageService: AuthStorageService, syncService: AuthSyncService, firebaseService: FirebaseService, oauthService: OAuthService, messagingService: MessagingService | null, i18nService: I18nService | null, confirmationService: ConfirmationDialogService);
     /** Estado completo de autenticación */
     readonly state: import("@angular/core").Signal<import("./types").AuthState>;
     /** Usuario está autenticado */
@@ -178,6 +180,26 @@ export declare class AuthService implements OnDestroy {
         roles?: string[];
         permissions?: string[];
     }): void;
+    /**
+     * 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(); }
+     */
+    logoutWithConfirmation(opts?: {
+        title?: string;
+        message?: string;
+        confirmText?: string;
+        cancelText?: string;
+    }): Promise<boolean>;
     /**
      * Cierra sesión.
      */
@@ -396,6 +418,6 @@ export declare class AuthService implements OnDestroy {
      * Detecta información de la plataforma del dispositivo.
      */
     private detectPlatformInfo;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AuthService, [null, null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AuthService, [null, null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }, null]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<AuthService>;
 }

package/lib/services/confirmation-dialog/types.d.ts

@@ -30,8 +30,8 @@ export interface ConfirmationDialogMetadata {
     extraButtons?: ConfirmationButton[];
     /** Allow dismissing by clicking backdrop */
     backdropDismiss?: boolean;
-    /** CSS class for the alert */
-    cssClass?: string;
+    /** CSS class(es) for the alert */
+    cssClass?: string | string[];
     /** Alert mode */
     mode?: 'ios' | 'md';
     /** Unique token identifier */

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.718";
+export declare const VERSION = "2.0.720";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "2.0.718",
+  "version": "2.0.720",
   "private": false,
   "bin": {
     "valtech-firebase-config": "./src/lib/services/firebase/scripts/generate-sw-config.js"

package/src/lib/components/styles/alert.scss

@@ -0,0 +1,122 @@
+/**
+ * val-alert — Estilo unificado para ion-alert (confirmation dialogs).
+ *
+ * Inspirado en iOS native UIAlertController:
+ * - Backdrop con blur
+ * - Wrapper translúcido oscuro con bordes redondeados
+ * - Botones pill apilados, neutros (sin colores chillones)
+ * - Variant `--destructive`: texto rojo en el botón destructivo (solo texto, no fondo)
+ *
+ * Aplicado por default desde ConfirmationDialogService.
+ * Override añadiendo otra cssClass al alert.
+ */
+
+ion-alert.val-alert {
+  --backdrop-opacity: 0.4;
+
+  /* Backdrop con blur */
+  &::part(backdrop) {
+    background: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+  }
+
+  .alert-wrapper {
+    background: rgba(28, 28, 30, 0.92);
+    backdrop-filter: blur(40px) saturate(180%);
+    -webkit-backdrop-filter: blur(40px) saturate(180%);
+    border-radius: 16px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+    overflow: hidden;
+  }
+
+  .alert-head {
+    padding: 20px 20px 8px;
+    text-align: center;
+  }
+
+  .alert-title {
+    color: rgba(255, 255, 255, 0.98);
+    font-weight: 700;
+    font-size: 17px;
+    line-height: 1.3;
+  }
+
+  .alert-sub-title {
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 14px;
+    margin-top: 4px;
+  }
+
+  .alert-message {
+    color: rgba(255, 255, 255, 0.72);
+    font-size: 14px;
+    line-height: 1.4;
+    padding: 0 20px 16px;
+    text-align: center;
+  }
+
+  /* Grupo de botones */
+  .alert-button-group {
+    flex-direction: column !important;
+    padding: 8px;
+    gap: 6px;
+    background: transparent;
+    border-top: none;
+  }
+
+  /* Cada botón */
+  button.alert-button {
+    flex: 0 0 auto;
+    width: 100%;
+    margin: 0;
+    padding: 14px 20px;
+    border-radius: 12px;
+    background: rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    color: rgba(255, 255, 255, 0.95);
+    font-weight: 600;
+    font-size: 16px;
+    text-transform: none;
+    letter-spacing: 0;
+    transition: background 0.15s ease;
+    min-height: auto;
+
+    &::part(native) {
+      background: transparent;
+      color: inherit;
+    }
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.14);
+    }
+
+    &:active {
+      background: rgba(255, 255, 255, 0.2);
+    }
+
+    .alert-button-inner {
+      justify-content: center;
+      color: inherit;
+      font-weight: inherit;
+    }
+  }
+
+  /* Botón destructivo: solo el texto en rojo, fondo neutro */
+  &.val-alert--destructive button.alert-button[aria-label],
+  button.alert-button.alert-button-role-destructive,
+  button.alert-button[role='destructive'] {
+    color: #ff453a; /* iOS systemRed dark */
+
+    .alert-button-inner {
+      color: #ff453a;
+    }
+  }
+
+  /* Cancel button: ligeramente menos prominente */
+  button.alert-button.alert-button-role-cancel,
+  button.alert-button[role='cancel'] {
+    font-weight: 500;
+  }
+}

package/src/lib/components/styles/overrides.scss

@@ -2,6 +2,7 @@
 @import './functions.scss';
 @import './mixins.scss';
 @import './prism.scss';
+@import './alert.scss';
 
 /** core **/