valtech-components 2.0.428 → 2.0.430

package/lib/components/organisms/data-table/types.d.ts

@@ -182,6 +182,14 @@ export interface DataTableMetadata<T = any> {
     headerColor?: Color;
     /** Row click enabled */
     rowClickable?: boolean;
+    /** Elevation level for box shadow */
+    elevation?: 'none' | 'low' | 'medium' | 'high';
+    /** Show gradient accent on top border */
+    headerGradient?: boolean;
+    /** Checkbox style variant */
+    checkboxStyle?: 'default' | 'circular';
+    /** Row selection highlight style */
+    rowHighlightStyle?: 'background' | 'border-left' | 'both';
     /** Row actions template */
     actionsTemplate?: TemplateRef<any>;
     /** Actions column width */

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

@@ -0,0 +1,85 @@
+import { AuthState, AuthUser, AuthError, MFAPendingState, StoredAuthState } from './types';
+import * as i0 from "@angular/core";
+/**
+ * Servicio para manejo de estado de autenticación con Angular Signals.
+ * Proporciona estado reactivo inmutable.
+ */
+export declare class AuthStateService {
+    private _state;
+    private _mfaPending;
+    /** Estado completo de autenticación */
+    readonly state: import("@angular/core").Signal<AuthState>;
+    /** Estado de MFA pendiente */
+    readonly mfaPending: import("@angular/core").Signal<MFAPendingState>;
+    /** Usuario está autenticado */
+    readonly isAuthenticated: import("@angular/core").Signal<boolean>;
+    /** Estado de carga */
+    readonly isLoading: import("@angular/core").Signal<boolean>;
+    /** Token de acceso */
+    readonly accessToken: import("@angular/core").Signal<string>;
+    /** Roles del usuario */
+    readonly roles: import("@angular/core").Signal<string[]>;
+    /** Permisos del usuario */
+    readonly permissions: import("@angular/core").Signal<string[]>;
+    /** Usuario es super admin */
+    readonly isSuperAdmin: import("@angular/core").Signal<boolean>;
+    /** Error actual */
+    readonly error: import("@angular/core").Signal<AuthError>;
+    /** Información del usuario */
+    readonly user: import("@angular/core").Signal<AuthUser>;
+    /**
+     * Establece el estado de carga.
+     */
+    setLoading(isLoading: boolean): void;
+    /**
+     * Establece el estado de autenticación exitosa.
+     */
+    setAuthenticated(data: {
+        accessToken: string;
+        refreshToken: string;
+        userId?: string;
+        email?: string;
+        roles: string[];
+        permissions: string[];
+        isSuperAdmin: boolean;
+        expiresAt: number;
+    }): void;
+    /**
+     * Actualiza solo el access token (después de refresh).
+     */
+    updateAccessToken(accessToken: string, expiresIn: number): void;
+    /**
+     * Actualiza los permisos.
+     */
+    updatePermissions(roles: string[], permissions: string[], isSuperAdmin: boolean): void;
+    /**
+     * Establece un error de autenticación.
+     */
+    setError(error: AuthError): void;
+    /**
+     * Limpia el error.
+     */
+    clearError(): void;
+    /**
+     * Establece estado de MFA pendiente.
+     */
+    setMFAPending(mfaState: MFAPendingState): void;
+    /**
+     * Limpia el estado de MFA pendiente.
+     */
+    clearMFAPending(): void;
+    /**
+     * Resetea todo el estado a valores iniciales.
+     */
+    reset(): void;
+    /**
+     * Restaura estado desde datos almacenados.
+     */
+    restoreFromStorage(stored: Partial<StoredAuthState>): void;
+    /**
+     * Actualiza el userId y email (después de parsear el token).
+     */
+    updateUserInfo(userId: string, email: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AuthStateService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AuthStateService>;
+}

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

@@ -0,0 +1,123 @@
+import { OnDestroy } from '@angular/core';
+import { Observable } from 'rxjs';
+import { SigninRequest, SigninResponse, MFAVerifyResponse, RefreshResponse, GetPermissionsResponse, MFASetupResponse, MFAConfirmResponse, MFADisableResponse, MFAMethod, AuthError } from './types';
+import * as i0 from "@angular/core";
+/**
+ * Servicio principal de autenticación.
+ *
+ * @example
+ * ```typescript
+ * import { AuthService } from 'valtech-components';
+ *
+ * @Component({...})
+ * export class LoginComponent {
+ *   private auth = inject(AuthService);
+ *
+ *   async login() {
+ *     await firstValueFrom(this.auth.signin({ email, password }));
+ *     if (this.auth.mfaPending().required) {
+ *       // Mostrar UI de MFA
+ *     } else {
+ *       this.router.navigate(['/']);
+ *     }
+ *   }
+ * }
+ * ```
+ */
+export declare class AuthService implements OnDestroy {
+    private config;
+    private http;
+    private router;
+    private stateService;
+    private tokenService;
+    private storageService;
+    private syncService;
+    private refreshTimerId;
+    private syncSubscription;
+    /** Estado completo de autenticación */
+    readonly state: import("@angular/core").Signal<import("./types").AuthState>;
+    /** Usuario está autenticado */
+    readonly isAuthenticated: import("@angular/core").Signal<boolean>;
+    /** Estado de carga */
+    readonly isLoading: import("@angular/core").Signal<boolean>;
+    /** Información del usuario */
+    readonly user: import("@angular/core").Signal<import("./types").AuthUser>;
+    /** Token de acceso */
+    readonly accessToken: import("@angular/core").Signal<string>;
+    /** Roles del usuario */
+    readonly roles: import("@angular/core").Signal<string[]>;
+    /** Permisos del usuario */
+    readonly permissions: import("@angular/core").Signal<string[]>;
+    /** Usuario es super admin */
+    readonly isSuperAdmin: import("@angular/core").Signal<boolean>;
+    /** Estado de MFA pendiente */
+    readonly mfaPending: import("@angular/core").Signal<import("./types").MFAPendingState>;
+    /** Error actual */
+    readonly error: import("@angular/core").Signal<AuthError>;
+    /**
+     * Inicializa el servicio de autenticación.
+     * Llamado automáticamente por provideValtechAuth.
+     */
+    initialize(): Promise<void>;
+    ngOnDestroy(): void;
+    /**
+     * Inicia sesión con email y contraseña.
+     */
+    signin(request: SigninRequest): Observable<SigninResponse>;
+    /**
+     * Verifica código MFA.
+     */
+    verifyMFA(code: string): Observable<MFAVerifyResponse>;
+    /**
+     * Refresca el token de acceso.
+     */
+    refreshAccessToken(): Observable<RefreshResponse>;
+    /**
+     * Cierra sesión.
+     */
+    logout(): void;
+    /**
+     * Configura MFA para el usuario.
+     */
+    setupMFA(method: MFAMethod, phone?: string): Observable<MFASetupResponse>;
+    /**
+     * Confirma la configuración de MFA.
+     */
+    confirmMFA(code: string): Observable<MFAConfirmResponse>;
+    /**
+     * Deshabilita MFA.
+     */
+    disableMFA(password: string): Observable<MFADisableResponse>;
+    /**
+     * Obtiene los permisos actualizados del backend.
+     */
+    fetchPermissions(): Observable<GetPermissionsResponse>;
+    /**
+     * Verifica si el usuario tiene un permiso específico.
+     * Formato: "resource:action" (ej: "templates:edit")
+     */
+    hasPermission(permission: string): boolean;
+    /**
+     * Verifica si el usuario tiene alguno de los permisos dados.
+     */
+    hasAnyPermission(permissions: string[]): boolean;
+    /**
+     * Verifica si el usuario tiene todos los permisos dados.
+     */
+    hasAllPermissions(permissions: string[]): boolean;
+    /**
+     * Verifica si el usuario tiene un rol específico.
+     */
+    hasRole(role: string): boolean;
+    private get baseUrl();
+    private handleSuccessfulAuth;
+    private clearState;
+    private startRefreshTimer;
+    private stopRefreshTimer;
+    private handleSyncEvent;
+    private handleAuthError;
+    private signInWithFirebase;
+    private signOutFirebase;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AuthService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AuthService>;
+}

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

@@ -0,0 +1,38 @@
+import { EnvironmentProviders, InjectionToken } from '@angular/core';
+import { ValtechAuthConfig } from './types';
+/**
+ * Token de inyección para la configuración de Auth.
+ */
+export declare const VALTECH_AUTH_CONFIG: InjectionToken<ValtechAuthConfig>;
+/**
+ * Configuración por defecto.
+ */
+export declare const DEFAULT_AUTH_CONFIG: Partial<ValtechAuthConfig>;
+/**
+ * Provee el servicio de autenticación a la aplicación Angular.
+ *
+ * @param config - Configuración de autenticación
+ * @returns EnvironmentProviders para usar en bootstrapApplication
+ *
+ * @example
+ * ```typescript
+ * // main.ts
+ * import { bootstrapApplication } from '@angular/platform-browser';
+ * import { provideValtechAuth } from 'valtech-components';
+ * import { environment } from './environments/environment';
+ *
+ * bootstrapApplication(AppComponent, {
+ *   providers: [
+ *     provideValtechAuth({
+ *       apiUrl: environment.apiUrl,
+ *       enableFirebaseIntegration: true,
+ *     }),
+ *   ],
+ * });
+ * ```
+ */
+export declare function provideValtechAuth(config: ValtechAuthConfig): EnvironmentProviders;
+/**
+ * Provee solo el interceptor (para apps que ya tienen AuthService configurado manualmente).
+ */
+export declare function provideValtechAuthInterceptor(): EnvironmentProviders;

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

@@ -0,0 +1,123 @@
+import { CanActivateFn } from '@angular/router';
+/**
+ * Guard que verifica si el usuario está autenticado.
+ * Redirige a loginRoute si no está autenticado.
+ *
+ * @example
+ * ```typescript
+ * import { authGuard } from 'valtech-components';
+ *
+ * const routes: Routes = [
+ *   {
+ *     path: 'dashboard',
+ *     canActivate: [authGuard],
+ *     loadComponent: () => import('./dashboard.page'),
+ *   },
+ * ];
+ * ```
+ */
+export declare const authGuard: CanActivateFn;
+/**
+ * Guard que verifica si el usuario NO está autenticado.
+ * Redirige a homeRoute si ya está autenticado.
+ * Útil para páginas de login/registro.
+ *
+ * @example
+ * ```typescript
+ * import { guestGuard } from 'valtech-components';
+ *
+ * const routes: Routes = [
+ *   {
+ *     path: 'login',
+ *     canActivate: [guestGuard],
+ *     loadComponent: () => import('./login.page'),
+ *   },
+ * ];
+ * ```
+ */
+export declare const guestGuard: CanActivateFn;
+/**
+ * Factory para crear guard de permisos.
+ * Verifica si el usuario tiene el permiso especificado.
+ *
+ * @param permissions - Permiso o lista de permisos requeridos (OR)
+ * @returns Guard function
+ *
+ * @example
+ * ```typescript
+ * import { authGuard, permissionGuard } from 'valtech-components';
+ *
+ * const routes: Routes = [
+ *   {
+ *     path: 'templates',
+ *     canActivate: [authGuard, permissionGuard('templates:read')],
+ *     loadComponent: () => import('./templates.page'),
+ *   },
+ *   {
+ *     path: 'admin',
+ *     canActivate: [authGuard, permissionGuard(['admin:*', 'super_admin'])],
+ *     loadComponent: () => import('./admin.page'),
+ *   },
+ * ];
+ * ```
+ */
+export declare function permissionGuard(permissions: string | string[]): CanActivateFn;
+/**
+ * Guard que lee permisos desde route.data.
+ * Permite configurar permisos directamente en la definición de rutas.
+ *
+ * @example
+ * ```typescript
+ * import { authGuard, permissionGuardFromRoute } from 'valtech-components';
+ *
+ * const routes: Routes = [
+ *   {
+ *     path: 'admin/users',
+ *     canActivate: [authGuard, permissionGuardFromRoute],
+ *     data: {
+ *       permissions: ['users:read', 'users:manage'],
+ *       requireAll: false  // true = AND, false = OR (default)
+ *     },
+ *     loadComponent: () => import('./users.page'),
+ *   },
+ * ];
+ * ```
+ */
+export declare const permissionGuardFromRoute: CanActivateFn;
+/**
+ * Guard que verifica si el usuario es super admin.
+ *
+ * @example
+ * ```typescript
+ * import { authGuard, superAdminGuard } from 'valtech-components';
+ *
+ * const routes: Routes = [
+ *   {
+ *     path: 'super-admin',
+ *     canActivate: [authGuard, superAdminGuard],
+ *     loadComponent: () => import('./super-admin.page'),
+ *   },
+ * ];
+ * ```
+ */
+export declare const superAdminGuard: CanActivateFn;
+/**
+ * Guard que verifica si el usuario tiene un rol específico.
+ *
+ * @param roles - Rol o lista de roles requeridos (OR)
+ * @returns Guard function
+ *
+ * @example
+ * ```typescript
+ * import { authGuard, roleGuard } from 'valtech-components';
+ *
+ * const routes: Routes = [
+ *   {
+ *     path: 'editor',
+ *     canActivate: [authGuard, roleGuard(['editor', 'admin'])],
+ *     loadComponent: () => import('./editor.page'),
+ *   },
+ * ];
+ * ```
+ */
+export declare function roleGuard(roles: string | string[]): CanActivateFn;

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

@@ -0,0 +1,63 @@
+/**
+ * Valtech Auth Service
+ *
+ * Servicio de autenticación reutilizable para aplicaciones Angular.
+ * Proporciona autenticación con AuthV2, MFA, sincronización entre pestañas,
+ * y refresh proactivo de tokens.
+ *
+ * @example
+ * ```typescript
+ * // En main.ts
+ * import { bootstrapApplication } from '@angular/platform-browser';
+ * import { provideValtechAuth } from 'valtech-components';
+ * import { environment } from './environments/environment';
+ *
+ * bootstrapApplication(AppComponent, {
+ *   providers: [
+ *     provideValtechAuth({
+ *       apiUrl: environment.apiUrl,
+ *       enableFirebaseIntegration: true,
+ *     }),
+ *   ],
+ * });
+ *
+ * // En app.routes.ts
+ * import { authGuard, guestGuard, permissionGuard } from 'valtech-components';
+ *
+ * const routes: Routes = [
+ *   { path: 'login', canActivate: [guestGuard], loadComponent: () => import('./login.page') },
+ *   { path: 'dashboard', canActivate: [authGuard], loadComponent: () => import('./dashboard.page') },
+ *   { path: 'admin', canActivate: [authGuard, permissionGuard('admin:*')], loadComponent: () => import('./admin.page') },
+ * ];
+ *
+ * // En componentes
+ * import { AuthService } from 'valtech-components';
+ *
+ * @Component({...})
+ * export class LoginComponent {
+ *   private auth = inject(AuthService);
+ *
+ *   async login() {
+ *     await firstValueFrom(this.auth.signin({ email, password }));
+ *     if (this.auth.mfaPending().required) {
+ *       // Mostrar UI de MFA
+ *     } else {
+ *       this.router.navigate(['/dashboard']);
+ *     }
+ *   }
+ *
+ *   // En template: usar signals directamente
+ *   // {{ auth.user()?.email }}
+ *   // @if (auth.hasPermission('templates:edit')) { ... }
+ * }
+ * ```
+ */
+export * from './types';
+export { VALTECH_AUTH_CONFIG, provideValtechAuth, provideValtechAuthInterceptor, DEFAULT_AUTH_CONFIG, } from './config';
+export { AuthService } from './auth.service';
+export { authGuard, guestGuard, permissionGuard, permissionGuardFromRoute, superAdminGuard, roleGuard, } from './guards';
+export { authInterceptor } from './interceptor';
+export { AuthStateService } from './auth-state.service';
+export { TokenService } from './token.service';
+export { AuthStorageService } from './storage.service';
+export { AuthSyncService } from './sync.service';

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

@@ -0,0 +1,22 @@
+import { HttpInterceptorFn } from '@angular/common/http';
+/**
+ * Interceptor HTTP que:
+ * 1. Agrega header Authorization con Bearer token a requests API
+ * 2. Maneja errores 401 refrescando el token automáticamente
+ * 3. Encola requests durante el refresco para evitar múltiples refresh
+ *
+ * @example
+ * ```typescript
+ * // Incluido automáticamente por provideValtechAuth()
+ * // Para uso manual:
+ * import { provideHttpClient, withInterceptors } from '@angular/common/http';
+ * import { authInterceptor } from 'valtech-components';
+ *
+ * bootstrapApplication(AppComponent, {
+ *   providers: [
+ *     provideHttpClient(withInterceptors([authInterceptor])),
+ *   ],
+ * });
+ * ```
+ */
+export declare const authInterceptor: HttpInterceptorFn;

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

@@ -0,0 +1,48 @@
+import { StoredAuthState, GetPermissionsResponse } from './types';
+import * as i0 from "@angular/core";
+/**
+ * Servicio para persistencia de estado de autenticación en localStorage.
+ */
+export declare class AuthStorageService {
+    private config;
+    private keys;
+    constructor();
+    /**
+     * Guarda el estado completo de autenticación.
+     */
+    saveState(state: StoredAuthState): void;
+    /**
+     * Carga el estado de autenticación desde storage.
+     */
+    loadState(): Partial<StoredAuthState>;
+    /**
+     * Guarda solo el access token.
+     */
+    saveAccessToken(token: string, expiresAt?: number): void;
+    /**
+     * Guarda los permisos actualizados.
+     */
+    savePermissions(response: GetPermissionsResponse): void;
+    /**
+     * Carga los permisos desde storage.
+     */
+    loadPermissions(): {
+        roles: string[];
+        permissions: string[];
+        isSuperAdmin: boolean;
+    };
+    /**
+     * Obtiene el refresh token.
+     */
+    getRefreshToken(): string | null;
+    /**
+     * Limpia todo el estado de autenticación.
+     */
+    clear(): void;
+    /**
+     * Verifica si hay estado guardado.
+     */
+    hasStoredState(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AuthStorageService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AuthStorageService>;
+}

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

@@ -0,0 +1,49 @@
+import { OnDestroy } from '@angular/core';
+import { Observable } from 'rxjs';
+import { AuthSyncEvent } from './types';
+import * as i0 from "@angular/core";
+/**
+ * Servicio para sincronización de estado de autenticación entre pestañas.
+ * Usa BroadcastChannel API con fallback a storage events.
+ */
+export declare class AuthSyncService implements OnDestroy {
+    private config;
+    private channel;
+    private channelName;
+    private eventSubject;
+    private storageListener;
+    /** Observable de eventos de sincronización */
+    readonly onEvent$: Observable<AuthSyncEvent>;
+    constructor();
+    /**
+     * Inicia la sincronización entre pestañas.
+     */
+    start(): void;
+    /**
+     * Detiene la sincronización.
+     */
+    stop(): void;
+    /**
+     * Envía un evento a otras pestañas.
+     */
+    broadcast(event: Omit<AuthSyncEvent, 'timestamp'>): void;
+    ngOnDestroy(): void;
+    /**
+     * Inicializa BroadcastChannel API.
+     */
+    private initBroadcastChannel;
+    /**
+     * Inicializa fallback con storage events.
+     */
+    private initStorageEvents;
+    /**
+     * Envía evento via localStorage (fallback).
+     */
+    private broadcastViaStorage;
+    /**
+     * Maneja un evento recibido.
+     */
+    private handleEvent;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AuthSyncService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AuthSyncService>;
+}

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

@@ -0,0 +1,51 @@
+import { JWTClaims } from './types';
+import * as i0 from "@angular/core";
+/**
+ * Servicio para manejo de tokens JWT.
+ * Parseo y validación de tokens sin dependencias externas.
+ */
+export declare class TokenService {
+    /**
+     * Parsea un token JWT y extrae los claims.
+     * @param token - Token JWT
+     * @returns Claims del token o null si es inválido
+     */
+    parseToken(token: string): JWTClaims | null;
+    /**
+     * Verifica si un token es válido (no expirado).
+     * @param token - Token JWT
+     * @returns true si el token es válido
+     */
+    isTokenValid(token: string): boolean;
+    /**
+     * Obtiene el tiempo restante del token en segundos.
+     * @param token - Token JWT
+     * @returns Segundos restantes o 0 si expirado
+     */
+    getTimeToExpiry(token: string): number;
+    /**
+     * Obtiene el timestamp de expiración del token.
+     * @param token - Token JWT
+     * @returns Timestamp en milisegundos o null
+     */
+    getExpirationTime(token: string): number | null;
+    /**
+     * Extrae el user ID del token.
+     * @param token - Token JWT
+     * @returns User ID o null
+     */
+    getUserId(token: string): string | null;
+    /**
+     * Extrae el email del token.
+     * @param token - Token JWT
+     * @returns Email o null
+     */
+    getEmail(token: string): string | null;
+    /**
+     * Decodifica base64url a string.
+     * Base64url usa - y _ en lugar de + y /
+     */
+    private base64UrlDecode;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TokenService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<TokenService>;
+}