@acontplus/ng-auth 1.1.7 → 1.2.0

package/README.md

@@ -18,8 +18,8 @@ npm install @acontplus/ng-auth
 - **Session Expiry Handling**: Manages session expiry during HTTP requests with
   automatic redirection
 - **CSRF Protection**: Built-in CSRF token management for secure API requests
-- **Token Repository**: Secure token storage and retrieval with local storage
-  support
+- **Token BaseRepository**: Secure token storage and retrieval with local
+  storage support
 - **Authentication Use Cases**: Login, register, refresh token, and logout
   functionality
 - **Domain Models**: User domain models and value objects
@@ -37,7 +37,7 @@ sessions expire.
 
 ### Components
 
-1. **UrlRedirectService** - Manages URL storage and redirection logic
+1. **AuthUrlRedirect** - Manages URL storage and redirection logic
 2. **Enhanced Auth Guard** - Captures URLs before redirecting to login
 3. **Enhanced Login Use Case** - Redirects to stored URLs after successful
    authentication
@@ -63,13 +63,14 @@ const routes: Routes = [
 
 ```typescript
 // app.config.ts
-import { authRedirectInterceptor } from '@acontplus/ng-auth';
+import { authRedirectInterceptor, csrfInterceptor } from '@acontplus/ng-auth';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideHttpClient(
       withInterceptors([
         authRedirectInterceptor, // Handles session expiry during API calls
+        csrfInterceptor, // CSRF protection
       ]),
     ),
   ],
@@ -93,11 +94,11 @@ User on /reports → API Call → 401 Error → Store URL → Login → Success
 ### Manual Usage
 
 ```typescript
-import { UrlRedirectService } from '@acontplus/ng-auth';
+import { AuthUrlRedirect } from '@acontplus/ng-auth';
 
 @Component({...})
 export class MyComponent {
-  constructor(private urlRedirectService: UrlRedirectService) {}
+  constructor(private urlRedirectService: AuthUrlRedirect) {}
 
   navigateToForm() {
     // Store current URL before potentially losing session
@@ -157,9 +158,9 @@ styling.
 
 ### Core Services
 
-- **UrlRedirectService**: URL storage and redirection management
-- **CsrfService**: CSRF token management for secure API requests
-- **TokenRepository**: Secure token storage and retrieval
+- **AuthUrlRedirect**: URL storage and redirection management
+- **CsrfApi**: CSRF token management for secure API requests
+- **AuthTokenRepositoryImpl**: Secure token storage and retrieval
 
 ### Guards and Interceptors
 
@@ -201,11 +202,11 @@ export class MyComponent {
 ### CSRF Protection
 
 ```typescript
-import { CsrfService } from '@acontplus/ng-auth';
+import { CsrfApi } from '@acontplus/ng-auth';
 
 @Component({...})
-export class LoginComponent {
-  constructor(private csrfService: CsrfService) {}
+export class Login {
+  constructor(private csrfService: CsrfApi) {}
 
   async login(credentials: LoginCredentials) {
     const csrfToken = await this.csrfService.getCsrfToken();
@@ -259,25 +260,21 @@ import { authProviders } from '@acontplus/ng-auth';
 export class AppModule {}
 ```
 
-## Running unit tests
-
-Run `nx test ng-auth` to execute the unit tests.
-
 ## Login Component
 
-The `LoginComponent` provides a flexible, themeable authentication UI component
-with support for custom fields and dynamic content.
+The `Login` provides a flexible, themeable authentication UI component with
+support for custom fields and dynamic content.
 
 ### Basic Usage
 
 ```typescript
-import { LoginComponent } from '@acontplus/ng-auth/ui/login';
+import { Login } from '@acontplus/ng-auth/ui/login';
 
 @Component({
   template: `
     <acp-login title="Welcome Back" [showRegisterButton]="true"> </acp-login>
   `,
-  imports: [LoginComponent],
+  imports: [Login],
 })
 export class AuthPageComponent {}
 ```

package/fesm2022/acontplus-ng-auth.mjs

@@ -1,13 +1,13 @@
-import { BaseUseCase, TOKEN_PROVIDER, LoggingService } from '@acontplus/ng-infrastructure';
-export { TOKEN_PROVIDER } from '@acontplus/ng-infrastructure';
+import { ENVIRONMENT, AUTH_API, AUTH_TOKEN } from '@acontplus/ng-config';
+export { AUTH_TOKEN } from '@acontplus/ng-config';
 import * as i0 from '@angular/core';
 import { inject, PLATFORM_ID, Injectable, NgZone, signal, input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { of, tap, catchError, throwError, firstValueFrom, map, from } from 'rxjs';
+import { BaseUseCase, LoggingService } from '@acontplus/ng-infrastructure';
 import * as i1 from '@angular/common';
 import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
 import { jwtDecode } from 'jwt-decode';
-import { ENVIRONMENT, AUTH_API } from '@acontplus/ng-config';
 import { HttpClient, HttpContextToken } from '@angular/common/http';
 import { catchError as catchError$1, switchMap } from 'rxjs/operators';
 import * as i2 from '@angular/forms';
@@ -22,7 +22,7 @@ import { MatCheckbox } from '@angular/material/checkbox';
 class AuthRepository {
 }
 
-class TokenRepository {
+class AuthTokenRepositoryImpl {
     environment = inject(ENVIRONMENT);
     platformId = inject(PLATFORM_ID);
     saveTokens(tokens, rememberMe = false) {
@@ -191,20 +191,20 @@ class TokenRepository {
         }
         return undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TokenRepository, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TokenRepository, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AuthTokenRepositoryImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AuthTokenRepositoryImpl, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TokenRepository, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AuthTokenRepositoryImpl, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
-// src/lib/presentation/stores/auth.store.ts
+// src/lib/presentation/stores/auth-store.ts
 class AuthStore {
     authRepository = inject(AuthRepository);
-    tokenRepository = inject(TokenRepository);
+    tokenRepository = inject(AuthTokenRepositoryImpl);
     router = inject(Router);
     ngZone = inject(NgZone);
     // Authentication state signals
@@ -398,10 +398,10 @@ class AuthStore {
     ngOnDestroy() {
         this.stopTokenRefreshTimer();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AuthStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AuthStore, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AuthStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AuthStore, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AuthStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AuthStore, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -413,7 +413,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
  * Stores the intended URL when session is lost and redirects to it after successful login
  * SSR-compatible by checking platform before accessing sessionStorage
  */
-class UrlRedirectService {
+class AuthUrlRedirect {
     REDIRECT_URL_KEY = 'acp_redirect_url';
     EXCLUDED_ROUTES = [
         '/login',
@@ -517,22 +517,22 @@ class UrlRedirectService {
             return null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: UrlRedirectService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: UrlRedirectService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AuthUrlRedirect, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AuthUrlRedirect, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: UrlRedirectService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AuthUrlRedirect, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
-// src/lib/application/use-cases/login.use-case.ts
+// src/lib/application/use-cases/login-use-case.ts
 class LoginUseCase extends BaseUseCase {
     authRepository = inject(AuthRepository);
     authStore = inject(AuthStore);
     router = inject(Router);
-    urlRedirectService = inject(UrlRedirectService);
+    urlRedirectService = inject(AuthUrlRedirect);
     execute(request) {
         return this.authRepository.login(request).pipe(tap(tokens => {
             // Set authentication state with rememberMe preference
@@ -541,17 +541,17 @@ class LoginUseCase extends BaseUseCase {
             this.urlRedirectService.redirectToIntendedUrl('/');
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LoginUseCase, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LoginUseCase, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LoginUseCase, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LoginUseCase, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LoginUseCase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LoginUseCase, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
-// src/lib/application/use-cases/register.use-case.ts
+// src/lib/application/use-cases/register-use-case.ts
 class RegisterUseCase extends BaseUseCase {
     authRepository = inject(AuthRepository);
     authStore = inject(AuthStore);
@@ -564,20 +564,20 @@ class RegisterUseCase extends BaseUseCase {
             this.router.navigate(['/']);
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RegisterUseCase, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RegisterUseCase, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RegisterUseCase, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RegisterUseCase, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RegisterUseCase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RegisterUseCase, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
-// src/lib/application/use-cases/refresh-token.use-case.ts
+// src/lib/application/use-cases/refresh-token-use-case.ts
 class RefreshTokenUseCase extends BaseUseCase {
     authRepository = inject(AuthRepository);
-    tokenRepository = inject(TokenRepository);
+    tokenRepository = inject(AuthTokenRepositoryImpl);
     authStore = inject(AuthStore);
     execute() {
         const userData = this.tokenRepository.getUserData();
@@ -601,20 +601,20 @@ class RefreshTokenUseCase extends BaseUseCase {
             return throwError(() => error);
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RefreshTokenUseCase, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RefreshTokenUseCase, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RefreshTokenUseCase, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RefreshTokenUseCase, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RefreshTokenUseCase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RefreshTokenUseCase, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
-// src/lib/application/use-cases/logout.use-case.ts
+// src/lib/application/use-cases/logout-use-case.ts
 class LogoutUseCase extends BaseUseCase {
     authRepository = inject(AuthRepository);
-    tokenRepository = inject(TokenRepository);
+    tokenRepository = inject(AuthTokenRepositoryImpl);
     authStore = inject(AuthStore);
     execute() {
         const userData = this.tokenRepository.getUserData();
@@ -631,10 +631,10 @@ class LogoutUseCase extends BaseUseCase {
         // Use auth store for centralized logout
         this.authStore.logout();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LogoutUseCase, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LogoutUseCase, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LogoutUseCase, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LogoutUseCase, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LogoutUseCase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LogoutUseCase, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -645,7 +645,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
 
 // src/lib/application/index.ts
 
-// src/lib/data/repositories/auth-http.repository.ts
+// src/lib/data/repositories/auth-http.base-repository.ts
 function getDeviceInfo() {
     return `${navigator.platform ?? 'Unknown'} - ${navigator.userAgent}`;
 }
@@ -682,10 +682,10 @@ class AuthHttpRepository extends AuthRepository {
             withCredentials: true, // Ensure cookies are sent
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AuthHttpRepository, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AuthHttpRepository, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AuthHttpRepository, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AuthHttpRepository, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AuthHttpRepository, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AuthHttpRepository, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -696,18 +696,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
 
 // src/lib/data/index.ts
 
-// src/lib/domain/models/auth.ts
-
-// src/lib/domain/models/index.ts
+// src/lib/domain/repositories/auth.ts
 
 // src/lib/domain/repositories/index.ts
 
-// src/lib/domain/index.ts
+// src/lib/domain/repositories/index.ts
 
 const authGuard = (_route, state) => {
-    const tokenRepository = inject(TokenRepository);
+    const tokenRepository = inject(AuthTokenRepositoryImpl);
     const router = inject(Router);
-    const urlRedirectService = inject(UrlRedirectService);
+    const urlRedirectService = inject(AuthUrlRedirect);
     const environment = inject(ENVIRONMENT);
     if (tokenRepository.isAuthenticated()) {
         return true;
@@ -725,8 +723,8 @@ const authGuard = (_route, state) => {
  */
 const authRedirectInterceptor = (req, next) => {
     const router = inject(Router);
-    const urlRedirectService = inject(UrlRedirectService);
-    const tokenRepository = inject(TokenRepository);
+    const urlRedirectService = inject(AuthUrlRedirect);
+    const tokenRepository = inject(AuthTokenRepositoryImpl);
     const environment = inject(ENVIRONMENT);
     return next(req).pipe(catchError$1((error) => {
         // Handle 401 Unauthorized errors
@@ -745,8 +743,8 @@ const authRedirectInterceptor = (req, next) => {
     }));
 };
 
-// src/lib/services/csrf.service.ts
-class CsrfService {
+// src/lib/services/csrf-api.ts
+class CsrfApi {
     http = inject(HttpClient);
     csrfToken = null;
     /**
@@ -774,10 +772,10 @@ class CsrfService {
     clearCsrfToken() {
         this.csrfToken = null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: CsrfService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: CsrfService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CsrfApi, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CsrfApi, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: CsrfService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CsrfApi, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -791,7 +789,7 @@ const SKIP_CSRF = new HttpContextToken(() => false);
  * Only applies to requests to the same origin to avoid leaking tokens to external APIs
  */
 const csrfInterceptor = (req, next) => {
-    const csrfService = inject(CsrfService);
+    const csrfService = inject(CsrfApi);
     // Check if CSRF should be skipped for this request
     const skipCsrf = req.context.get(SKIP_CSRF);
     if (skipCsrf) {
@@ -834,8 +832,8 @@ const authProviders = [
         useClass: AuthHttpRepository,
     },
     {
-        provide: TOKEN_PROVIDER,
-        useClass: TokenRepository,
+        provide: AUTH_TOKEN,
+        useClass: AuthTokenRepositoryImpl,
     },
 ];
 
@@ -843,8 +841,8 @@ const authProviders = [
 
 // src/lib/presentation/stores/index.ts
 
-// src/lib/presentation/components/login/login.component.ts
-class LoginComponent {
+// src/lib/presentation/components/login/login.ts
+class Login {
     title = input('Login', ...(ngDevMode ? [{ debugName: "title" }] : []));
     showRegisterButton = input(true, ...(ngDevMode ? [{ debugName: "showRegisterButton" }] : []));
     showRememberMe = input(true, ...(ngDevMode ? [{ debugName: "showRememberMe" }] : []));
@@ -940,10 +938,10 @@ class LoginComponent {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: LoginComponent, isStandalone: true, selector: "acp-login", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showRegisterButton: { classPropertyName: "showRegisterButton", publicName: "showRegisterButton", isSignal: true, isRequired: false, transformFunction: null }, showRememberMe: { classPropertyName: "showRememberMe", publicName: "showRememberMe", isSignal: true, isRequired: false, transformFunction: null }, additionalSigninControls: { classPropertyName: "additionalSigninControls", publicName: "additionalSigninControls", isSignal: true, isRequired: false, transformFunction: null }, additionalSignupControls: { classPropertyName: "additionalSignupControls", publicName: "additionalSignupControls", isSignal: true, isRequired: false, transformFunction: null }, additionalSigninFields: { classPropertyName: "additionalSigninFields", publicName: "additionalSigninFields", isSignal: true, isRequired: false, transformFunction: null }, additionalSignupFields: { classPropertyName: "additionalSignupFields", publicName: "additionalSignupFields", isSignal: true, isRequired: false, transformFunction: null }, footerContent: { classPropertyName: "footerContent", publicName: "footerContent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-card class=\"mat-elevation-z8 p-4 rounded\">\n  <mat-card-header>\n    <mat-card-title class=\"text-center\">{{ title() }}</mat-card-title>\n  </mat-card-header>\n  <mat-card-content>\n    @if (isLoginMode()) {\n      <form [formGroup]=\"signinForm\" (ngSubmit)=\"signIn()\" class=\"d-flex flex-column gap-3\">\n        <mat-form-field class=\"w-100\">\n          <mat-label>Usuario</mat-label>\n          <input matInput type=\"text\" placeholder=\"Ingrese su usuario\" formControlName=\"email\" />\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n          <mat-label>Contrase\u00F1a</mat-label>\n          <input\n            matInput\n            type=\"password\"\n            placeholder=\"Ingrese su contrase\u00F1a\"\n            formControlName=\"password\"\n            autocomplete=\"current-password\"\n          />\n        </mat-form-field>\n\n        <!-- Remember Me checkbox - conditional -->\n        @if (showRememberMe()) {\n          <div class=\"d-flex align-items-center mt-2\">\n            <mat-checkbox formControlName=\"rememberMe\"> Recordarme </mat-checkbox>\n          </div>\n        }\n\n        <!-- Additional signin fields -->\n        <ng-container *ngTemplateOutlet=\"additionalSigninFields()\"></ng-container>\n\n        <div class=\"d-flex justify-content-center mt-3\">\n          <button\n            mat-raised-button\n            color=\"primary\"\n            [disabled]=\"!signinForm.valid || isLoading()\"\n            type=\"submit\"\n            class=\"w-100\"\n          >\n            @if (isLoading()) {\n              Ingresando...\n            } @else {\n              <ng-container>Ingresar <mat-icon>login</mat-icon></ng-container>\n            }\n          </button>\n        </div>\n\n        <div class=\"text-center mt-2\">\n          @if (showRegisterButton()) {\n            <button mat-button type=\"button\" (click)=\"switchMode()\">\n              \u00BFNo tienes cuenta? Reg\u00EDstrate\n            </button>\n          }\n        </div>\n      </form>\n    } @else {\n      <form [formGroup]=\"signupForm\" (ngSubmit)=\"registerUser()\" class=\"d-flex flex-column gap-3\">\n        <mat-form-field class=\"w-100\">\n          <mat-label>Nombre</mat-label>\n          <input\n            matInput\n            type=\"text\"\n            placeholder=\"Ingrese su nombre\"\n            formControlName=\"displayName\"\n          />\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n          <mat-label>Email</mat-label>\n          <input matInput type=\"email\" placeholder=\"Ingrese su email\" formControlName=\"email\" />\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n          <mat-label>Contrase\u00F1a</mat-label>\n          <input\n            matInput\n            type=\"password\"\n            placeholder=\"Ingrese su contrase\u00F1a\"\n            formControlName=\"password\"\n            autocomplete=\"new-password\"\n          />\n        </mat-form-field>\n\n        <!-- Additional signup fields -->\n        <ng-container *ngTemplateOutlet=\"additionalSignupFields()\"></ng-container>\n\n        <div class=\"d-flex justify-content-center mt-3\">\n          <button\n            mat-raised-button\n            color=\"primary\"\n            [disabled]=\"!signupForm.valid || isLoading()\"\n            type=\"submit\"\n            class=\"w-100\"\n          >\n            @if (isLoading()) {\n              Registrando...\n            } @else {\n              <ng-container>Registrarse <mat-icon>person_add</mat-icon></ng-container>\n            }\n          </button>\n        </div>\n\n        <div class=\"text-center mt-2\">\n          <button mat-button type=\"button\" (click)=\"switchMode()\">\n            \u00BFYa tienes cuenta? Inicia sesi\u00F3n\n          </button>\n        </div>\n      </form>\n    }\n    @if (errorMessage()) {\n      <div class=\"alert alert-danger mt-3\" role=\"alert\">\n        {{ errorMessage() }}\n      </div>\n    }\n  </mat-card-content>\n  @if (hasFooterContent()) {\n    <mat-card-footer>\n      <ng-container *ngTemplateOutlet=\"footerContent()\"></ng-container>\n    </mat-card-footer>\n  }\n</mat-card>\n", styles: [":host{display:flex;justify-content:center;align-items:center;min-height:100vh;width:100%;padding:16px;box-sizing:border-box}:host mat-card{width:100%;max-width:400px;border-radius:12px;box-shadow:0 8px 32px #0000001a}:host mat-card-header{text-align:center;margin-bottom:20px}:host mat-card-title{font-size:24px;font-weight:600;color:var(--mat-sys-primary, #6750a4)}:host mat-form-field{width:100%}:host mat-button{border-radius:8px}:host .w-100{width:100%}:host .d-flex{display:flex}:host .flex-column{flex-direction:column}:host .gap-3{gap:12px}:host .justify-content-center{justify-content:center}:host .align-items-center{align-items:center}:host .mt-3{margin-top:12px}:host .mt-2{margin-top:8px}:host .text-center{text-align:center}:host .p-4{padding:16px}:host .rounded{border-radius:12px}:host .m-t-10{margin-top:10px}:host .alert-danger{background-color:var(--mat-sys-error-container, #ffdad6);border-color:var(--mat-sys-error, #ba1a1a);color:var(--mat-sys-on-error-container, #410002);padding:12px;border-radius:4px;border:1px solid transparent}:host .row{display:flex;flex-wrap:wrap;margin:0 -15px}:host .col-xs-12,:host .col-sm-12,:host .col-md-12{flex:0 0 100%;max-width:100%;padding:0 15px}:host .social{display:flex;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatCardFooter, selector: "mat-card-footer" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Login, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: Login, isStandalone: true, selector: "acp-login", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showRegisterButton: { classPropertyName: "showRegisterButton", publicName: "showRegisterButton", isSignal: true, isRequired: false, transformFunction: null }, showRememberMe: { classPropertyName: "showRememberMe", publicName: "showRememberMe", isSignal: true, isRequired: false, transformFunction: null }, additionalSigninControls: { classPropertyName: "additionalSigninControls", publicName: "additionalSigninControls", isSignal: true, isRequired: false, transformFunction: null }, additionalSignupControls: { classPropertyName: "additionalSignupControls", publicName: "additionalSignupControls", isSignal: true, isRequired: false, transformFunction: null }, additionalSigninFields: { classPropertyName: "additionalSigninFields", publicName: "additionalSigninFields", isSignal: true, isRequired: false, transformFunction: null }, additionalSignupFields: { classPropertyName: "additionalSignupFields", publicName: "additionalSignupFields", isSignal: true, isRequired: false, transformFunction: null }, footerContent: { classPropertyName: "footerContent", publicName: "footerContent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-card class=\"mat-elevation-z8 p-4 rounded\">\n  <mat-card-header>\n    <mat-card-title class=\"text-center\">{{ title() }}</mat-card-title>\n  </mat-card-header>\n  <mat-card-content>\n    @if (isLoginMode()) {\n    <form [formGroup]=\"signinForm\" (ngSubmit)=\"signIn()\" class=\"d-flex flex-column gap-3\">\n      <mat-form-field class=\"w-100\">\n        <mat-label>Usuario</mat-label>\n        <input matInput type=\"text\" placeholder=\"Ingrese su usuario\" formControlName=\"email\" />\n      </mat-form-field>\n\n      <mat-form-field class=\"w-100\">\n        <mat-label>Contrase\u00F1a</mat-label>\n        <input\n          matInput\n          type=\"password\"\n          placeholder=\"Ingrese su contrase\u00F1a\"\n          formControlName=\"password\"\n          autocomplete=\"current-password\"\n        />\n      </mat-form-field>\n\n      <!-- Remember Me checkbox - conditional -->\n      @if (showRememberMe()) {\n      <div class=\"d-flex align-items-center mt-2\">\n        <mat-checkbox formControlName=\"rememberMe\"> Recordarme </mat-checkbox>\n      </div>\n      }\n\n      <!-- Additional signin fields -->\n      <ng-container *ngTemplateOutlet=\"additionalSigninFields()\"></ng-container>\n\n      <div class=\"d-flex justify-content-center mt-3\">\n        <button\n          mat-raised-button\n          color=\"primary\"\n          [disabled]=\"!signinForm.valid || isLoading()\"\n          type=\"submit\"\n          class=\"w-100\"\n        >\n          @if (isLoading()) { Ingresando... } @else {\n          <ng-container>Ingresar <mat-icon>login</mat-icon></ng-container>\n          }\n        </button>\n      </div>\n\n      <div class=\"text-center mt-2\">\n        @if (showRegisterButton()) {\n        <button mat-button type=\"button\" (click)=\"switchMode()\">\n          \u00BFNo tienes cuenta? Reg\u00EDstrate\n        </button>\n        }\n      </div>\n    </form>\n    } @else {\n    <form [formGroup]=\"signupForm\" (ngSubmit)=\"registerUser()\" class=\"d-flex flex-column gap-3\">\n      <mat-form-field class=\"w-100\">\n        <mat-label>Nombre</mat-label>\n        <input matInput type=\"text\" placeholder=\"Ingrese su nombre\" formControlName=\"displayName\" />\n      </mat-form-field>\n\n      <mat-form-field class=\"w-100\">\n        <mat-label>Email</mat-label>\n        <input matInput type=\"email\" placeholder=\"Ingrese su email\" formControlName=\"email\" />\n      </mat-form-field>\n\n      <mat-form-field class=\"w-100\">\n        <mat-label>Contrase\u00F1a</mat-label>\n        <input\n          matInput\n          type=\"password\"\n          placeholder=\"Ingrese su contrase\u00F1a\"\n          formControlName=\"password\"\n          autocomplete=\"new-password\"\n        />\n      </mat-form-field>\n\n      <!-- Additional signup fields -->\n      <ng-container *ngTemplateOutlet=\"additionalSignupFields()\"></ng-container>\n\n      <div class=\"d-flex justify-content-center mt-3\">\n        <button\n          mat-raised-button\n          color=\"primary\"\n          [disabled]=\"!signupForm.valid || isLoading()\"\n          type=\"submit\"\n          class=\"w-100\"\n        >\n          @if (isLoading()) { Registrando... } @else {\n          <ng-container>Registrarse <mat-icon>person_add</mat-icon></ng-container>\n          }\n        </button>\n      </div>\n\n      <div class=\"text-center mt-2\">\n        <button mat-button type=\"button\" (click)=\"switchMode()\">\n          \u00BFYa tienes cuenta? Inicia sesi\u00F3n\n        </button>\n      </div>\n    </form>\n    } @if (errorMessage()) {\n    <div class=\"alert alert-danger mt-3\" role=\"alert\">{{ errorMessage() }}</div>\n    }\n  </mat-card-content>\n  @if (hasFooterContent()) {\n  <mat-card-footer>\n    <ng-container *ngTemplateOutlet=\"footerContent()\"></ng-container>\n  </mat-card-footer>\n  }\n</mat-card>\n", styles: [":host{display:flex;justify-content:center;align-items:center;min-height:100vh;width:100%;padding:16px;box-sizing:border-box}:host mat-card{width:100%;max-width:400px;border-radius:12px;box-shadow:0 8px 32px #0000001a}:host mat-card-header{text-align:center;margin-bottom:20px}:host mat-card-title{font-size:24px;font-weight:600;color:var(--mat-sys-primary, #6750a4)}:host mat-form-field{width:100%}:host mat-button{border-radius:8px}:host .w-100{width:100%}:host .d-flex{display:flex}:host .flex-column{flex-direction:column}:host .gap-3{gap:12px}:host .justify-content-center{justify-content:center}:host .align-items-center{align-items:center}:host .mt-3{margin-top:12px}:host .mt-2{margin-top:8px}:host .text-center{text-align:center}:host .p-4{padding:16px}:host .rounded{border-radius:12px}:host .m-t-10{margin-top:10px}:host .alert-danger{background-color:var(--mat-sys-error-container, #ffdad6);border-color:var(--mat-sys-error, #ba1a1a);color:var(--mat-sys-on-error-container, #410002);padding:12px;border-radius:4px;border:1px solid transparent}:host .row{display:flex;flex-wrap:wrap;margin:0 -15px}:host .col-xs-12,:host .col-sm-12,:host .col-md-12{flex:0 0 100%;max-width:100%;padding:0 15px}:host .social{display:flex;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatCardFooter, selector: "mat-card-footer" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LoginComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Login, decorators: [{
             type: Component,
             args: [{ selector: 'acp-login', imports: [
                         CommonModule,
@@ -960,7 +958,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                         MatCardFooter,
                         MatAnchor,
                         MatCheckbox,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<mat-card class=\"mat-elevation-z8 p-4 rounded\">\n  <mat-card-header>\n    <mat-card-title class=\"text-center\">{{ title() }}</mat-card-title>\n  </mat-card-header>\n  <mat-card-content>\n    @if (isLoginMode()) {\n      <form [formGroup]=\"signinForm\" (ngSubmit)=\"signIn()\" class=\"d-flex flex-column gap-3\">\n        <mat-form-field class=\"w-100\">\n          <mat-label>Usuario</mat-label>\n          <input matInput type=\"text\" placeholder=\"Ingrese su usuario\" formControlName=\"email\" />\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n          <mat-label>Contrase\u00F1a</mat-label>\n          <input\n            matInput\n            type=\"password\"\n            placeholder=\"Ingrese su contrase\u00F1a\"\n            formControlName=\"password\"\n            autocomplete=\"current-password\"\n          />\n        </mat-form-field>\n\n        <!-- Remember Me checkbox - conditional -->\n        @if (showRememberMe()) {\n          <div class=\"d-flex align-items-center mt-2\">\n            <mat-checkbox formControlName=\"rememberMe\"> Recordarme </mat-checkbox>\n          </div>\n        }\n\n        <!-- Additional signin fields -->\n        <ng-container *ngTemplateOutlet=\"additionalSigninFields()\"></ng-container>\n\n        <div class=\"d-flex justify-content-center mt-3\">\n          <button\n            mat-raised-button\n            color=\"primary\"\n            [disabled]=\"!signinForm.valid || isLoading()\"\n            type=\"submit\"\n            class=\"w-100\"\n          >\n            @if (isLoading()) {\n              Ingresando...\n            } @else {\n              <ng-container>Ingresar <mat-icon>login</mat-icon></ng-container>\n            }\n          </button>\n        </div>\n\n        <div class=\"text-center mt-2\">\n          @if (showRegisterButton()) {\n            <button mat-button type=\"button\" (click)=\"switchMode()\">\n              \u00BFNo tienes cuenta? Reg\u00EDstrate\n            </button>\n          }\n        </div>\n      </form>\n    } @else {\n      <form [formGroup]=\"signupForm\" (ngSubmit)=\"registerUser()\" class=\"d-flex flex-column gap-3\">\n        <mat-form-field class=\"w-100\">\n          <mat-label>Nombre</mat-label>\n          <input\n            matInput\n            type=\"text\"\n            placeholder=\"Ingrese su nombre\"\n            formControlName=\"displayName\"\n          />\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n          <mat-label>Email</mat-label>\n          <input matInput type=\"email\" placeholder=\"Ingrese su email\" formControlName=\"email\" />\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n          <mat-label>Contrase\u00F1a</mat-label>\n          <input\n            matInput\n            type=\"password\"\n            placeholder=\"Ingrese su contrase\u00F1a\"\n            formControlName=\"password\"\n            autocomplete=\"new-password\"\n          />\n        </mat-form-field>\n\n        <!-- Additional signup fields -->\n        <ng-container *ngTemplateOutlet=\"additionalSignupFields()\"></ng-container>\n\n        <div class=\"d-flex justify-content-center mt-3\">\n          <button\n            mat-raised-button\n            color=\"primary\"\n            [disabled]=\"!signupForm.valid || isLoading()\"\n            type=\"submit\"\n            class=\"w-100\"\n          >\n            @if (isLoading()) {\n              Registrando...\n            } @else {\n              <ng-container>Registrarse <mat-icon>person_add</mat-icon></ng-container>\n            }\n          </button>\n        </div>\n\n        <div class=\"text-center mt-2\">\n          <button mat-button type=\"button\" (click)=\"switchMode()\">\n            \u00BFYa tienes cuenta? Inicia sesi\u00F3n\n          </button>\n        </div>\n      </form>\n    }\n    @if (errorMessage()) {\n      <div class=\"alert alert-danger mt-3\" role=\"alert\">\n        {{ errorMessage() }}\n      </div>\n    }\n  </mat-card-content>\n  @if (hasFooterContent()) {\n    <mat-card-footer>\n      <ng-container *ngTemplateOutlet=\"footerContent()\"></ng-container>\n    </mat-card-footer>\n  }\n</mat-card>\n", styles: [":host{display:flex;justify-content:center;align-items:center;min-height:100vh;width:100%;padding:16px;box-sizing:border-box}:host mat-card{width:100%;max-width:400px;border-radius:12px;box-shadow:0 8px 32px #0000001a}:host mat-card-header{text-align:center;margin-bottom:20px}:host mat-card-title{font-size:24px;font-weight:600;color:var(--mat-sys-primary, #6750a4)}:host mat-form-field{width:100%}:host mat-button{border-radius:8px}:host .w-100{width:100%}:host .d-flex{display:flex}:host .flex-column{flex-direction:column}:host .gap-3{gap:12px}:host .justify-content-center{justify-content:center}:host .align-items-center{align-items:center}:host .mt-3{margin-top:12px}:host .mt-2{margin-top:8px}:host .text-center{text-align:center}:host .p-4{padding:16px}:host .rounded{border-radius:12px}:host .m-t-10{margin-top:10px}:host .alert-danger{background-color:var(--mat-sys-error-container, #ffdad6);border-color:var(--mat-sys-error, #ba1a1a);color:var(--mat-sys-on-error-container, #410002);padding:12px;border-radius:4px;border:1px solid transparent}:host .row{display:flex;flex-wrap:wrap;margin:0 -15px}:host .col-xs-12,:host .col-sm-12,:host .col-md-12{flex:0 0 100%;max-width:100%;padding:0 15px}:host .social{display:flex;justify-content:center}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<mat-card class=\"mat-elevation-z8 p-4 rounded\">\n  <mat-card-header>\n    <mat-card-title class=\"text-center\">{{ title() }}</mat-card-title>\n  </mat-card-header>\n  <mat-card-content>\n    @if (isLoginMode()) {\n    <form [formGroup]=\"signinForm\" (ngSubmit)=\"signIn()\" class=\"d-flex flex-column gap-3\">\n      <mat-form-field class=\"w-100\">\n        <mat-label>Usuario</mat-label>\n        <input matInput type=\"text\" placeholder=\"Ingrese su usuario\" formControlName=\"email\" />\n      </mat-form-field>\n\n      <mat-form-field class=\"w-100\">\n        <mat-label>Contrase\u00F1a</mat-label>\n        <input\n          matInput\n          type=\"password\"\n          placeholder=\"Ingrese su contrase\u00F1a\"\n          formControlName=\"password\"\n          autocomplete=\"current-password\"\n        />\n      </mat-form-field>\n\n      <!-- Remember Me checkbox - conditional -->\n      @if (showRememberMe()) {\n      <div class=\"d-flex align-items-center mt-2\">\n        <mat-checkbox formControlName=\"rememberMe\"> Recordarme </mat-checkbox>\n      </div>\n      }\n\n      <!-- Additional signin fields -->\n      <ng-container *ngTemplateOutlet=\"additionalSigninFields()\"></ng-container>\n\n      <div class=\"d-flex justify-content-center mt-3\">\n        <button\n          mat-raised-button\n          color=\"primary\"\n          [disabled]=\"!signinForm.valid || isLoading()\"\n          type=\"submit\"\n          class=\"w-100\"\n        >\n          @if (isLoading()) { Ingresando... } @else {\n          <ng-container>Ingresar <mat-icon>login</mat-icon></ng-container>\n          }\n        </button>\n      </div>\n\n      <div class=\"text-center mt-2\">\n        @if (showRegisterButton()) {\n        <button mat-button type=\"button\" (click)=\"switchMode()\">\n          \u00BFNo tienes cuenta? Reg\u00EDstrate\n        </button>\n        }\n      </div>\n    </form>\n    } @else {\n    <form [formGroup]=\"signupForm\" (ngSubmit)=\"registerUser()\" class=\"d-flex flex-column gap-3\">\n      <mat-form-field class=\"w-100\">\n        <mat-label>Nombre</mat-label>\n        <input matInput type=\"text\" placeholder=\"Ingrese su nombre\" formControlName=\"displayName\" />\n      </mat-form-field>\n\n      <mat-form-field class=\"w-100\">\n        <mat-label>Email</mat-label>\n        <input matInput type=\"email\" placeholder=\"Ingrese su email\" formControlName=\"email\" />\n      </mat-form-field>\n\n      <mat-form-field class=\"w-100\">\n        <mat-label>Contrase\u00F1a</mat-label>\n        <input\n          matInput\n          type=\"password\"\n          placeholder=\"Ingrese su contrase\u00F1a\"\n          formControlName=\"password\"\n          autocomplete=\"new-password\"\n        />\n      </mat-form-field>\n\n      <!-- Additional signup fields -->\n      <ng-container *ngTemplateOutlet=\"additionalSignupFields()\"></ng-container>\n\n      <div class=\"d-flex justify-content-center mt-3\">\n        <button\n          mat-raised-button\n          color=\"primary\"\n          [disabled]=\"!signupForm.valid || isLoading()\"\n          type=\"submit\"\n          class=\"w-100\"\n        >\n          @if (isLoading()) { Registrando... } @else {\n          <ng-container>Registrarse <mat-icon>person_add</mat-icon></ng-container>\n          }\n        </button>\n      </div>\n\n      <div class=\"text-center mt-2\">\n        <button mat-button type=\"button\" (click)=\"switchMode()\">\n          \u00BFYa tienes cuenta? Inicia sesi\u00F3n\n        </button>\n      </div>\n    </form>\n    } @if (errorMessage()) {\n    <div class=\"alert alert-danger mt-3\" role=\"alert\">{{ errorMessage() }}</div>\n    }\n  </mat-card-content>\n  @if (hasFooterContent()) {\n  <mat-card-footer>\n    <ng-container *ngTemplateOutlet=\"footerContent()\"></ng-container>\n  </mat-card-footer>\n  }\n</mat-card>\n", styles: [":host{display:flex;justify-content:center;align-items:center;min-height:100vh;width:100%;padding:16px;box-sizing:border-box}:host mat-card{width:100%;max-width:400px;border-radius:12px;box-shadow:0 8px 32px #0000001a}:host mat-card-header{text-align:center;margin-bottom:20px}:host mat-card-title{font-size:24px;font-weight:600;color:var(--mat-sys-primary, #6750a4)}:host mat-form-field{width:100%}:host mat-button{border-radius:8px}:host .w-100{width:100%}:host .d-flex{display:flex}:host .flex-column{flex-direction:column}:host .gap-3{gap:12px}:host .justify-content-center{justify-content:center}:host .align-items-center{align-items:center}:host .mt-3{margin-top:12px}:host .mt-2{margin-top:8px}:host .text-center{text-align:center}:host .p-4{padding:16px}:host .rounded{border-radius:12px}:host .m-t-10{margin-top:10px}:host .alert-danger{background-color:var(--mat-sys-error-container, #ffdad6);border-color:var(--mat-sys-error, #ba1a1a);color:var(--mat-sys-on-error-container, #410002);padding:12px;border-radius:4px;border:1px solid transparent}:host .row{display:flex;flex-wrap:wrap;margin:0 -15px}:host .col-xs-12,:host .col-sm-12,:host .col-md-12{flex:0 0 100%;max-width:100%;padding:0 15px}:host .social{display:flex;justify-content:center}\n"] }]
         }], ctorParameters: () => [] });
 
 // src/lib/presentation/components/index.ts
@@ -971,5 +969,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AuthHttpRepository, AuthRepository, AuthStore, CsrfService, LoginComponent, LoginUseCase, LogoutUseCase, RefreshTokenUseCase, RegisterUseCase, SKIP_CSRF, TokenRepository, UrlRedirectService, authGuard, authProviders, authRedirectInterceptor, csrfInterceptor };
+export { AuthHttpRepository, AuthRepository, AuthStore, AuthTokenRepositoryImpl, AuthUrlRedirect, CsrfApi, Login, LoginUseCase, LogoutUseCase, RefreshTokenUseCase, RegisterUseCase, SKIP_CSRF, authGuard, authProviders, authRedirectInterceptor, csrfInterceptor };
 //# sourceMappingURL=acontplus-ng-auth.mjs.map