valtech-components 2.0.451 → 2.0.453

package/lib/components/organisms/tabbed-content/tabbed-content.component.d.ts

@@ -0,0 +1,65 @@
+import { EventEmitter, OnInit } from '@angular/core';
+import { SegmentControlMetadata } from '../../molecules/segment-control/types';
+import { TabbedContentMetadata, TabbedContentTab, TabbedContentContext } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-tabbed-content
+ *
+ * A container component that combines segment navigation with dynamic content panels.
+ * Uses segment-control internally for tab navigation and renders the associated
+ * template for the active tab.
+ *
+ * @example Basic usage with templates
+ * ```html
+ * <ng-template #catalogTemplate>
+ *   <div>Catalog Content</div>
+ * </ng-template>
+ * <ng-template #settingsTemplate>
+ *   <div>Settings Content</div>
+ * </ng-template>
+ *
+ * <val-tabbed-content [props]="{
+ *   tabs: [
+ *     { value: 'catalog', label: 'Catalog', icon: 'layers-outline', template: catalogTemplate },
+ *     { value: 'settings', label: 'Settings', icon: 'settings-outline', template: settingsTemplate }
+ *   ],
+ *   selectedTab: 'catalog',
+ *   scrollable: true,
+ *   animated: true
+ * }" (tabChange)="onTabChange($event)"></val-tabbed-content>
+ * ```
+ *
+ * @input props: TabbedContentMetadata - Configuration for the tabbed content
+ * @output tabChange: string - Emits the selected tab value when changed
+ */
+export declare class TabbedContentComponent implements OnInit {
+    /**
+     * Configuration object for the tabbed content.
+     */
+    props: TabbedContentMetadata;
+    /**
+     * Emits when the active tab changes.
+     */
+    tabChange: EventEmitter<string>;
+    /** Currently selected tab value */
+    private selectedValue;
+    /** Whether a transition is in progress */
+    isTransitioning: import("@angular/core").WritableSignal<boolean>;
+    /** Computed animation duration string */
+    animationDuration: import("@angular/core").Signal<string>;
+    /** Computed segment control props derived from tabs config */
+    segmentControlProps: import("@angular/core").Signal<SegmentControlMetadata>;
+    /** Computed active tab object */
+    activeTab: import("@angular/core").Signal<TabbedContentTab>;
+    ngOnInit(): void;
+    /**
+     * Handles segment change events.
+     */
+    onSegmentChange(value: string): void;
+    /**
+     * Creates the context object for the template outlet.
+     */
+    getTemplateContext(tab: TabbedContentTab): TabbedContentContext;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TabbedContentComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabbedContentComponent, "val-tabbed-content", never, { "props": { "alias": "props"; "required": false; }; }, { "tabChange": "tabChange"; }, never, never, true, never>;
+}

package/lib/components/organisms/tabbed-content/types.d.ts

@@ -0,0 +1,53 @@
+import { TemplateRef } from '@angular/core';
+import { Color } from '@ionic/core';
+/**
+ * Context passed to each tab's template.
+ */
+export interface TabbedContentContext {
+    /** The value of the active tab */
+    $implicit: string;
+    /** The full tab configuration */
+    tab: TabbedContentTab;
+    /** Index of the tab */
+    index: number;
+}
+/**
+ * Configuration for a single tab.
+ */
+export interface TabbedContentTab {
+    /** Unique identifier for the tab */
+    value: string;
+    /** Display label for the tab button */
+    label?: string;
+    /** Icon name (Ionicons) */
+    icon?: string;
+    /** Whether the tab is disabled */
+    disabled?: boolean;
+    /** Layout direction for icon and label */
+    layout?: 'icon-start' | 'icon-end' | 'icon-top' | 'icon-bottom';
+    /** Template to render when this tab is active */
+    template: TemplateRef<TabbedContentContext>;
+}
+/**
+ * Metadata for the tabbed-content component.
+ */
+export interface TabbedContentMetadata {
+    /** Array of tab configurations */
+    tabs: TabbedContentTab[];
+    /** Initially selected tab value (defaults to first tab) */
+    selectedTab?: string;
+    /** Color theme for the segment control */
+    color?: Color;
+    /** Allow horizontal scrolling for many tabs */
+    scrollable?: boolean;
+    /** Enable swipe gesture to change tabs (iOS only) */
+    swipeGesture?: boolean;
+    /** Visual mode style */
+    mode?: 'ios' | 'md';
+    /** Enable fade animation on tab change */
+    animated?: boolean;
+    /** Animation duration in milliseconds */
+    animationDuration?: number;
+    /** Additional CSS class for the container */
+    cssClass?: string;
+}

package/lib/components/templates/page-content/page-content.component.d.ts

@@ -1,4 +1,6 @@
 import { EventEmitter } from '@angular/core';
+import { ThemeService } from '../../../services/theme.service';
+import { NavigationService } from '../../../services/navigation.service';
 import { PageContentMetadata } from './types';
 import * as i0 from "@angular/core";
 /**
@@ -34,6 +36,7 @@ export declare class PageContentComponent {
      * Page content configuration.
      */
     props: PageContentMetadata;
+    constructor(theme: ThemeService, nav: NavigationService);
     /**
      * Emits when a header action is clicked.
      */

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,146 @@
+import { OnDestroy } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Router } from '@angular/router';
+import { Observable } from 'rxjs';
+import { AuthStateService } from './auth-state.service';
+import { TokenService } from './token.service';
+import { AuthStorageService } from './storage.service';
+import { AuthSyncService } from './sync.service';
+import { SigninRequest, SigninResponse, SignupRequest, SignupResponse, VerifyEmailRequest, VerifyEmailResponse, ResendCodeRequest, ResendCodeResponse, MFAVerifyResponse, RefreshResponse, GetPermissionsResponse, MFASetupResponse, MFAConfirmResponse, MFADisableResponse, MFAMethod, AuthError, ValtechAuthConfig } from './types';
+import { FirebaseService } from '../firebase';
+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 firebaseService;
+    private refreshTimerId;
+    private syncSubscription;
+    constructor(config: ValtechAuthConfig, http: HttpClient, router: Router, stateService: AuthStateService, tokenService: TokenService, storageService: AuthStorageService, syncService: AuthSyncService, firebaseService: FirebaseService);
+    /** 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>;
+    /**
+     * Registra un nuevo usuario.
+     * El usuario queda en estado PENDING hasta verificar su email.
+     */
+    signup(request: SignupRequest): Observable<SignupResponse>;
+    /**
+     * Verifica email con código de 6 dígitos.
+     * Si es exitoso, hace auto-login y retorna tokens.
+     */
+    verifyEmail(request: VerifyEmailRequest): Observable<VerifyEmailResponse>;
+    /**
+     * Reenvía código de verificación al email.
+     */
+    resendCode(request: ResendCodeRequest): Observable<ResendCodeResponse>;
+    /**
+     * 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, ValtechAuthConfig } 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(config: ValtechAuthConfig);
+    /**
+     * 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>;
+}