@hichchi/ngx-auth 0.0.1-alpha.4 → 0.0.1

package/fesm2022/hichchi-ngx-auth.mjs

@@ -1,94 +1,47 @@
 import * as i0 from '@angular/core';
-import { Injectable, Inject, computed, inject, input, output, signal, effect, Component, TemplateRef, ViewContainerRef, Directive, NgModule } from '@angular/core';
-import * as i1$1 from '@angular/forms';
-import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { AuthEndpoint, AuthField, isRoleObject, AuthErrorResponseCode } from '@hichchi/nest-connector/auth';
-import * as i1 from '@angular/common/http';
-import { provideHttpClient } from '@angular/common/http';
-import { take, map, tap, catchError, EMPTY, ReplaySubject, throwError, switchMap, filter } from 'rxjs';
+import { InjectionToken, Inject, Injectable, computed, inject, input, output, signal, effect, Component, TemplateRef, ViewContainerRef, Directive, NgModule } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormBuilder, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { AuthEndpoint, isRoleObject, AuthField, AuthErrorResponseCode } from '@hichchi/nest-connector/auth';
+import { take, map, tap, catchError, EMPTY, firstValueFrom, ReplaySubject, throwError, switchMap, filter } from 'rxjs';
 import { Endpoint, HttpClientErrorStatus } from '@hichchi/nest-connector';
-import { skipNotifyContext, validatedFormData } from '@hichchi/ngx-utils';
+import { CrudHttpService, skipNotifyContext, validatedFormData } from '@hichchi/ngx-utils';
 import { toFirstCase } from '@hichchi/utils';
 import { signalStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
 import { withStorageSync } from '@angular-architects/ngrx-toolkit';
 import { Router } from '@angular/router';
-import * as i3 from '@hichchi/ngx-ui';
+import * as i2 from '@hichchi/ngx-ui';
 import { ButtonComponent, HcCardComponent, HcSeparatorComponent } from '@hichchi/ngx-ui';
 import { CommonModule } from '@angular/common';
 
 /**
- * Injection token for authentication configuration
+ * Injection token for the ngx-auth runtime configuration.
  *
- * This constant defines the injection token used by Angular's dependency injection
- * system to provide authentication configuration throughout the ngx-auth module.
- * It allows the AuthConfig interface to be injected into services and components
- * that need access to authentication settings.
- *
- * The token is used internally by the NgxHichchiAuthModule.forRoot() method to
- * register the authentication configuration as a provider, making it available
- * for injection in services like AuthService.
- *
- * This follows Angular's recommended pattern for providing configuration objects
- * to libraries and modules, ensuring type safety and proper dependency injection.
+ * This token is bound in `NgxHichchiAuthModule.forRoot(config)` as:
+ * `{ provide: AUTH_CONFIG, useValue: config }`.
+ * Consumers can inject it to access the same `AuthConfig` object
+ * (for example `apiBaseURL` and optional `authField`).
  *
  * @example
  * ```typescript
- * // Used internally by the module to provide configuration
- * @NgModule({
- *   providers: [
- *     { provide: AUTH_CONFIG, useValue: config },
- *     AuthService
- *   ]
- * })
- * export class NgxHichchiAuthModule {
- *   static forRoot(config: AuthConfig): ModuleWithProviders<NgxHichchiAuthModule> {
- *     return {
- *       ngModule: NgxHichchiAuthModule,
- *       providers: [
- *         { provide: AUTH_CONFIG, useValue: config },
- *         provideHttpClient(),
- *         AuthService
- *       ]
- *     };
- *   }
- * }
+ * NgxHichchiAuthModule.forRoot({
+ *   apiBaseURL: "https://api.example.com",
+ * });
  * ```
  *
  * @example
  * ```typescript
- * // Injecting the configuration in a service
  * @Injectable()
- * export class AuthService {
- *   constructor(
- *     @Inject(AUTH_CONFIG) private readonly config: AuthConfig
- *   ) {
- *     console.log('API Base URL:', this.config.apiBaseURL);
- *     console.log('Auth Field:', this.config.authField);
- *   }
- * }
- * ```
- *
- * @example
- * ```typescript
- * // Using in a component (though typically not recommended)
- * @Component({
- *   selector: 'app-auth-info',
- *   template: `<p>API URL: {{ apiUrl }}</p>`
- * })
- * export class AuthInfoComponent {
- *   apiUrl: string;
- *
- *   constructor(@Inject(AUTH_CONFIG) private config: AuthConfig) {
- *     this.apiUrl = config.apiBaseURL;
+ * export class ExampleService {
+ *   constructor(@Inject(AUTH_CONFIG) private readonly config: AuthConfig) {
+ *     console.log(this.config.apiBaseURL);
  *   }
  * }
  * ```
  *
- * @see {@link AuthConfig} Interface that defines the structure of the configuration object
- * @see {@link NgxHichchiAuthModule} Module that uses this token to provide configuration
- * @see {@link AuthService} Service that injects this configuration
+ * @see {@link AuthConfig} Configuration contract provided through this token
  */
-const AUTH_CONFIG = "AUTH_CONFIG";
+const AUTH_CONFIG = new InjectionToken("AUTH_CONFIG");
 
 /**
  * Width of the Google OAuth authentication popup window in pixels
@@ -233,20 +186,22 @@ const AUTH_GUARD_OPTIONS_KEY = "authGuardOptions";
  * @see {@link AuthState} State management service for authentication
  * @see {@link AuthResponse} Response interface for authentication operations
  */
-class AuthService {
-    http;
+/**
+ * HTTP client wrapper for authentication and token lifecycle endpoints.
+ */
+class AuthService extends CrudHttpService {
     config;
     /**
      * Creates an instance of AuthService
      *
-     * @param http - Http client
      * @param config - The authentication configuration injected from AUTH_CONFIG token
      *
      * @see {@link AUTH_CONFIG} Injection token for authentication configuration
      * @see {@link AuthConfig} Interface defining the configuration structure
      */
-    constructor(http, config) {
-        this.http = http;
+    // eslint-disable-next-line @angular-eslint/prefer-inject
+    constructor(config) {
+        super();
         this.config = config;
     }
     /**
@@ -257,7 +212,7 @@ class AuthService {
      * into JavaScript Date objects for easier handling in the client application.
      *
      * @param dto - The sign-in data containing user credentials
-     * @param skipErrorNotify - Optional flag to skip error notifications for this request
+     * @param skipNotify - Optional flag to skip error notifications for this request
      * @returns Observable that emits the authentication response with user data and tokens
      *
      * @example
@@ -281,10 +236,8 @@ class AuthService {
      * @see {@link AuthResponse} Interface for authentication response
      * @see {@link AuthEndpoint.SIGN_IN} Backend endpoint for user authentication
      */
-    signIn(dto, skipErrorNotify) {
-        return this.http
-            .post(`${Endpoint.AUTH}/${AuthEndpoint.SIGN_IN}`, dto, skipNotifyContext(skipErrorNotify))
-            .pipe(take(1), map(res => ({
+    signIn(dto, skipNotify) {
+        return this.post(`${Endpoint.AUTH}/${AuthEndpoint.SIGN_IN}`, dto, { skipNotify }).pipe(take(1), map(res => ({
             ...res,
             accessTokenExpiresOn: new Date(res.accessTokenExpiresOn),
             refreshTokenExpiresOn: new Date(res.refreshTokenExpiresOn),
@@ -392,7 +345,7 @@ class AuthService {
      * Date objects for easier handling in the client application.
      *
      * @param accessToken - The access token to exchange for authentication response
-     * @param skipErrorNotify - Optional flag to skip error notifications for this request
+     * @param skipNotify - Optional flag to skip error notifications for this request
      * @returns Observable that emits the complete authentication response
      *
      * @example
@@ -418,11 +371,11 @@ class AuthService {
      * @see {@link AuthEndpoint.GET_AUTH_RESPONSE} Backend endpoint for token exchange
      * @see {@link googleSignIn} Method that provides access tokens for this operation
      */
-    getAuthResponse(accessToken, skipErrorNotify) {
+    getAuthResponse(accessToken, skipNotify) {
         return this.http
             .post(`${Endpoint.AUTH}/${AuthEndpoint.GET_AUTH_RESPONSE}`, {
             accessToken,
-        }, skipNotifyContext(skipErrorNotify))
+        }, skipNotifyContext(skipNotify))
             .pipe(take(1), map(res => ({
             ...res,
             accessTokenExpiresOn: new Date(res.accessTokenExpiresOn),
@@ -441,7 +394,7 @@ class AuthService {
      * or handle email verification depending on your application's configuration.
      *
      * @param dto - The sign-up data containing user registration information
-     * @param skipErrorNotify - Optional flag to skip error notifications for this request
+     * @param skipNotify - Optional flag to skip error notifications for this request
      * @returns Observable that emits the newly created user data
      *
      * @example
@@ -470,9 +423,9 @@ class AuthService {
      * @see {@link AuthEndpoint.SIGN_UP} Backend endpoint for user registration
      * @see {@link signIn} Method to authenticate user after registration
      */
-    signUp(dto, skipErrorNotify) {
+    signUp(dto, skipNotify) {
         return this.http
-            .post(`${Endpoint.AUTH}/${AuthEndpoint.SIGN_UP}`, dto, skipNotifyContext(skipErrorNotify))
+            .post(`${Endpoint.AUTH}/${AuthEndpoint.SIGN_UP}`, dto, skipNotifyContext(skipNotify))
             .pipe(take(1));
     }
     /**
@@ -486,7 +439,7 @@ class AuthService {
      * while keeping access tokens short-lived for better security.
      *
      * @param refreshToken - The refresh token to exchange for new tokens
-     * @param skipErrorNotify - Optional flag to skip error notifications for this request
+     * @param skipNotify - Optional flag to skip error notifications for this request
      * @returns Observable that emits the new token response
      *
      * @example
@@ -515,11 +468,11 @@ class AuthService {
      * @see {@link AuthEndpoint.REFRESH_TOKEN} Backend endpoint for token refresh
      * @see {@link signIn} Method to get initial tokens through authentication
      */
-    refreshToken(refreshToken, skipErrorNotify) {
+    refreshToken(refreshToken, skipNotify) {
         return this.http
             .post(`${Endpoint.AUTH}/${AuthEndpoint.REFRESH_TOKEN}`, {
             refreshToken,
-        }, skipNotifyContext(skipErrorNotify))
+        }, skipNotifyContext(skipNotify))
             .pipe(take(1));
     }
     /**
@@ -532,7 +485,7 @@ class AuthService {
      * After calling this method, you should also clear any client-side authentication
      * data such as tokens stored in localStorage, sessionStorage, or application state.
      *
-     * @param skipErrorNotify - Optional flag to skip error notifications for this request
+     * @param skipNotify - Optional flag to skip error notifications for this request
      * @returns Observable that emits a success response when sign-out is complete
      *
      * @example
@@ -578,21 +531,21 @@ class AuthService {
      * @see {@link AuthEndpoint.SIGN_OUT} Backend endpoint for user sign-out
      * @see {@link signIn} Method to authenticate user after sign-out
      */
-    signOut(skipErrorNotify) {
+    signOut(skipNotify) {
         // this.app.startSpinner();
         return this.http
-            .post(`${Endpoint.AUTH}/${AuthEndpoint.SIGN_OUT}`, {}, skipNotifyContext(skipErrorNotify))
+            .post(`${Endpoint.AUTH}/${AuthEndpoint.SIGN_OUT}`, {}, skipNotifyContext(skipNotify))
             .pipe(take(1));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: AuthService, deps: [{ token: i1.HttpClient }, { token: AUTH_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: AuthService, providedIn: "root" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AuthService, deps: [{ token: AUTH_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AuthService, providedIn: "root" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: AuthService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AuthService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: "root",
                 }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [AUTH_CONFIG]
                 }] }] });
@@ -607,6 +560,7 @@ const initialState = {
     refreshToken: null,
     accessTokenExpiresOn: null,
     refreshTokenExpiresOn: null,
+    data: {}
 };
 /**
  * Authentication state management store using NgRx Signals
@@ -730,6 +684,10 @@ const AuthState = signalStore({ providedIn: "root" }, withState(initialState), w
      * ```
      */
     role: computed(() => user()?.role),
+    permissions: computed(() => {
+        const role = user()?.role;
+        return role && isRoleObject(role) ? role.permissions || [] : [];
+    }),
     /**
      * Computed signal that returns the current user's role name as a string
      *
@@ -879,7 +837,7 @@ const AuthState = signalStore({ providedIn: "root" }, withState(initialState), w
      *
      * This method handles user sign-in by calling the AuthService and updating
      * the authentication state with the response. It supports both Observable
-     * and Promise return types based on the returnSub parameter, and can
+     * and Promise return types based on the asPromise parameter, and can
      * automatically redirect users after successful authentication.
      *
      * The method integrates with the error notification system and can
@@ -887,9 +845,9 @@ const AuthState = signalStore({ providedIn: "root" }, withState(initialState), w
      *
      * @param signInBody - The sign-in credentials containing email/username and password
      * @param redirect - Optional redirect path or function that returns a path after successful sign-in
-     * @param returnSub - Optional flag to return Observable instead of Promise (defaults to false)
+     * @param asPromise - Optional flag to return a Promise instead of an Observable (defaults to false)
      * @param showError - Optional flag to control error notification display (defaults to true for Promise mode, false for Observable mode)
-     * @returns Observable<AuthResponse> if returnSub is true, Promise<void> otherwise
+     * @returns Promise<AuthResponse> if asPromise is true, otherwise Observable<AuthResponse>
      *
      * @example
      * ```typescript
@@ -974,19 +932,17 @@ const AuthState = signalStore({ providedIn: "root" }, withState(initialState), w
      * @see {@link SignInBody} Interface for sign-in request data
      * @see {@link AuthResponse} Interface for authentication response
      */
-    signIn: (signInBody, redirect, returnSub, showError) => {
-        const sub = authService.signIn(signInBody, !(showError || !returnSub && showError === undefined)).pipe(tap((res) => {
+    signIn: (signInBody, redirect, asPromise, showError) => {
+        const sub = authService.signIn(signInBody, !(showError || asPromise && showError === undefined)).pipe(tap((res) => {
             patchState(state, { ...res, signedIn: true });
             if (redirect) {
                 void router.navigateByUrl(typeof redirect === "string" ? redirect : redirect(res));
             }
         }));
-        if (returnSub) {
-            return sub;
+        if (asPromise) {
+            return firstValueFrom(sub);
         }
-        return new Promise((resolve) => {
-            sub.subscribe({ next: () => resolve(), error: () => resolve() });
-        });
+        return sub;
     },
     /**
      * Authenticates a user using an existing access token
@@ -1002,9 +958,9 @@ const AuthState = signalStore({ providedIn: "root" }, withState(initialState), w
      *
      * @param accessToken - The access token to authenticate with
      * @param redirect - Optional redirect path or function that returns a path after successful authentication
-     * @param returnSub - Optional flag to return Observable instead of Promise (defaults to false)
+     * @param asPromise - Optional flag to return a Promise instead of an Observable (defaults to false)
      * @param showError - Optional flag to control error notification display (defaults to true for Promise mode, false for Observable mode)
-     * @returns Observable<AuthResponse> if returnSub is true, Promise<void> otherwise
+     * @returns Promise<AuthResponse> if asPromise is true, otherwise Observable<AuthResponse>
      *
      * @example
      * ```typescript
@@ -1083,8 +1039,8 @@ const AuthState = signalStore({ providedIn: "root" }, withState(initialState), w
      * @see {@link AccessToken} Type representing access tokens
      * @see {@link AuthResponse} Interface for authentication response
      */
-    authenticateWithToken: (accessToken, redirect, returnSub, showError) => {
-        const sub = authService.getAuthResponse(accessToken, !(showError || !returnSub && showError === undefined)).pipe(tap((res) => {
+    authenticateWithToken: (accessToken, redirect, asPromise, showError) => {
+        const sub = authService.getAuthResponse(accessToken, !(showError || asPromise && showError === undefined)).pipe(tap((res) => {
             patchState(state, {
                 ...res,
                 signedIn: Boolean(res.user.role)
@@ -1093,12 +1049,10 @@ const AuthState = signalStore({ providedIn: "root" }, withState(initialState), w
                 void router.navigateByUrl(typeof redirect === "string" ? redirect : redirect(res));
             }
         }), catchError(() => EMPTY));
-        if (returnSub) {
-            return sub;
+        if (asPromise) {
+            return firstValueFrom(sub);
         }
-        return new Promise((resolve) => {
-            sub.subscribe({ next: () => resolve(), error: () => resolve() });
-        });
+        return sub;
     },
     /**
      * Signs out the current user and clears authentication state
@@ -1112,9 +1066,9 @@ const AuthState = signalStore({ providedIn: "root" }, withState(initialState), w
      * handling that ensures local state is cleared even if server sign-out fails.
      *
      * @param redirect - Optional redirect path after successful sign-out
-     * @param returnSub - Optional flag to return Observable instead of Promise (defaults to false)
+     * @param asPromise - Optional flag to return a Promise instead of an Observable (defaults to false)
      * @param showError - Optional flag to control error notification display (defaults to true for Promise mode, false for Observable mode)
-     * @returns Observable<SuccessResponse | null> if returnSub is true, Promise<void> otherwise
+     * @returns Promise<SuccessResponse | null> if asPromise is true, otherwise Observable<SuccessResponse | null>
      *
      * @example
      * ```typescript
@@ -1204,8 +1158,8 @@ const AuthState = signalStore({ providedIn: "root" }, withState(initialState), w
      * @see {@link SuccessResponse} Interface for success response
      * @see {@link reset} Method to manually clear authentication state
      */
-    signOut: (redirect, returnSub, showError) => {
-        const sub = authService.signOut(!(showError || !returnSub && showError === undefined)).pipe(tap({
+    signOut: (redirect, asPromise, showError) => {
+        const sub = authService.signOut(!(showError || asPromise && showError === undefined)).pipe(tap({
             next: () => {
                 patchState(state, initialState);
                 if (redirect) {
@@ -1213,13 +1167,17 @@ const AuthState = signalStore({ providedIn: "root" }, withState(initialState), w
                 }
             },
         }), catchError(() => EMPTY));
-        if (returnSub) {
-            return sub;
+        if (asPromise) {
+            return firstValueFrom(sub);
         }
-        return new Promise((resolve) => {
-            sub.subscribe({ next: () => resolve(), error: () => resolve() });
-        });
+        return sub;
     },
+    setData(stateData) {
+        patchState(state, data => ({
+            ...data,
+            data: { ...data.data, ...stateData },
+        }));
+    }
 })));
 
 /* eslint-disable @angular-eslint/no-output-on-prefix */
@@ -1293,15 +1251,15 @@ const AuthState = signalStore({ providedIn: "root" }, withState(initialState), w
  * @see {@link HttpError} Interface for HTTP error handling
  */
 class AuthFormComponent {
-    config;
-    fb;
-    authService;
+    config = inject(AUTH_CONFIG);
+    fb = inject(FormBuilder);
+    authService = inject(AuthService);
     /** Input signal to control whether local authentication (username/email + password) is enabled */
-    local = input(true);
+    local = input(true, ...(ngDevMode ? [{ debugName: "local" }] : []));
     /** Input signal to control whether Google OAuth authentication is enabled */
-    google = input(true);
+    google = input(true, ...(ngDevMode ? [{ debugName: "google" }] : []));
     /** Input signal to control whether Facebook authentication is enabled */
-    facebook = input(true);
+    facebook = input(true, ...(ngDevMode ? [{ debugName: "facebook" }] : []));
     /** Output emitter that fires when an authentication error occurs */
     onError = output();
     /** Output emitter that fires when a user successfully signs in */
@@ -1309,26 +1267,23 @@ class AuthFormComponent {
     /** Output emitter that fires when a user successfully signs up */
     onSignUp = output();
     /** Writable signal indicating whether an authentication operation is in progress */
-    isLoading = signal(false);
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
     /** Writable signal indicating whether the form is in sign-up mode (true) or sign-in mode (false) */
-    isSignUp = signal(false);
+    isSignUp = signal(false, ...(ngDevMode ? [{ debugName: "isSignUp" }] : []));
     /** Writable signal indicating whether an error state is currently active */
-    isError = signal(false);
+    isError = signal(false, ...(ngDevMode ? [{ debugName: "isError" }] : []));
     /** Writable signal containing the current authentication field type (EMAIL or USERNAME) */
-    authField = signal(AuthField.EMAIL);
+    authField = signal(AuthField.EMAIL, ...(ngDevMode ? [{ debugName: "authField" }] : []));
     /** Writable signal containing the display label for the authentication field */
-    authFieldLabel = signal(toFirstCase(AuthField.EMAIL));
+    authFieldLabel = signal(toFirstCase(AuthField.EMAIL), ...(ngDevMode ? [{ debugName: "authFieldLabel" }] : []));
     /** Writable signal containing the current error object, if any */
-    error = signal(null);
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
     /** Injected AuthState service for managing authentication state */
     authState = inject(AuthState);
     /** Reactive form group for handling authentication form data */
     authForm;
-    constructor(config, fb, authService) {
-        this.config = config;
-        this.fb = fb;
-        this.authService = authService;
-        this.authField.set(config.authField === AuthField.USERNAME ? AuthField.USERNAME : AuthField.EMAIL);
+    constructor() {
+        this.authField.set(this.config.authField === AuthField.USERNAME ? AuthField.USERNAME : AuthField.EMAIL);
         this.authFieldLabel.set(toFirstCase(this.authField()));
         this.authForm = this.fb.group({
             firstName: ["", Validators.required],
@@ -1365,7 +1320,7 @@ class AuthFormComponent {
     async handleGoogleSignIn() {
         const accessToken = await this.authService.googleSignIn();
         // noinspection ES6MissingAwait
-        this.authState.authenticateWithToken(accessToken, undefined, true).subscribe({
+        this.authState.authenticateWithToken(accessToken, undefined, false).subscribe({
             next: authResponse => {
                 this.isLoading.set(false);
                 this.onSignIn.emit(authResponse);
@@ -1394,7 +1349,15 @@ class AuthFormComponent {
     handleLocalAuth(signInBody) {
         this.isLoading.set(true);
         this.isError.set(false);
-        this.authState.signIn(signInBody, undefined, true, false).subscribe();
+        this.authState.signIn(signInBody, "/", false).subscribe({
+            next: () => {
+                this.isLoading.set(false);
+            },
+            error: () => {
+                this.isLoading.set(false);
+                this.isError.set(true);
+            },
+        });
     }
     /**
      * Handles user registration (sign-up) process
@@ -1490,16 +1453,13 @@ class AuthFormComponent {
         this.error.set(error);
         this.onError.emit(error);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: AuthFormComponent, deps: [{ token: AUTH_CONFIG }, { token: i1$1.FormBuilder }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: AuthFormComponent, isStandalone: false, selector: "hc-auth-card", inputs: { local: { classPropertyName: "local", publicName: "local", isSignal: true, isRequired: false, transformFunction: null }, google: { classPropertyName: "google", publicName: "google", isSignal: true, isRequired: false, transformFunction: null }, facebook: { classPropertyName: "facebook", publicName: "facebook", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onError: "onError", onSignIn: "onSignIn", onSignUp: "onSignUp" }, ngImport: i0, template: "<!--<div class=\"auth-container d-flex justify-content-center align-items-center\">-->\r\n<!--    -->\r\n<!--</div>-->\r\n<hc-card>\r\n    <!--    @if (isLoading()) {-->\r\n    <!--        <div class=\"loading-overlay w-100 h-100\"></div>-->\r\n    <!--    }-->\r\n    <form\r\n        class=\"d-inline-flex flex-column align-items-center w-100\"\r\n        [formGroup]=\"authForm\"\r\n        (ngSubmit)=\"handleSubmit($event)\"\r\n    >\r\n        @if (isSignUp()) {\r\n            <div class=\"form-group w-100\">\r\n                <label for=\"firstName\" class=\"form-label\">First Name</label>\r\n                <input\r\n                    id=\"firstName\"\r\n                    type=\"text\"\r\n                    class=\"form-control w-100\"\r\n                    formControlName=\"firstName\"\r\n                    placeholder=\"Enter your first name\"\r\n                />\r\n            </div>\r\n\r\n            <div class=\"form-group w-100\">\r\n                <label for=\"lastName\" class=\"form-label\">Last Name</label>\r\n                <input\r\n                    id=\"lastName\"\r\n                    type=\"text\"\r\n                    class=\"form-control w-100\"\r\n                    formControlName=\"lastName\"\r\n                    placeholder=\"Enter your last name\"\r\n                />\r\n            </div>\r\n        }\r\n\r\n        <div class=\"form-group w-100\">\r\n            <label for=\"authField\" class=\"form-label\">{{ authFieldLabel() }}</label>\r\n            <input\r\n                id=\"authField\"\r\n                type=\"text\"\r\n                class=\"form-control w-100\"\r\n                formControlName=\"authFieldValue\"\r\n                [placeholder]=\"'Enter your ' + authFieldLabel().toLowerCase()\"\r\n            />\r\n        </div>\r\n\r\n        <div class=\"form-group w-100\">\r\n            <label for=\"password\" class=\"form-label\">Password</label>\r\n            <input\r\n                id=\"password\"\r\n                type=\"password\"\r\n                class=\"form-control w-100\"\r\n                formControlName=\"password\"\r\n                placeholder=\"Enter your password\"\r\n            />\r\n        </div>\r\n\r\n        <button type=\"submit\" class=\"btn btn-primary mb-3 w-100\" [disabled]=\"isLoading()\">\r\n            {{ isSignUp() ? (isLoading() ? \"Signing Up...\" : \"Sign Up\") : isLoading() ? \"Signing In...\" : \"Sign In\" }}\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"btn btn-link p-0 mb-3\" (click)=\"isSignUp.set(!isSignUp())\">\r\n            {{ isSignUp() ? \"Already have an account? Sign In\" : \"Don't have an account? Sign Up\" }}\r\n        </button>\r\n\r\n        @if (!isSignUp()) {\r\n            @if (local() && (google() || facebook())) {\r\n                <hc-separator label=\"OR\"></hc-separator>\r\n            }\r\n\r\n            @if (google()) {\r\n                <button type=\"button\" class=\"btn google-btn btn-light mb-3 w-100\" (click)=\"handleGoogleSignIn()\">\r\n                    <div class=\"icon\"></div>\r\n                    Sign in with Google\r\n                </button>\r\n            }\r\n\r\n            @if (facebook()) {\r\n                <button type=\"button\" class=\"btn facebook-btn btn-light mb-3 w-100\">\r\n                    <div class=\"icon\"></div>\r\n                    Sign in with Facebook\r\n                </button>\r\n            }\r\n\r\n            @if (isError()) {\r\n                <div class=\"error-message w-100\">\r\n                    {{ error()?.error?.message || \"Something went wrong!\" }}\r\n                </div>\r\n            }\r\n        }\r\n    </form>\r\n</hc-card>\r\n", styles: [".auth-form{background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:16px;margin:8px;padding:2rem;position:relative;z-index:1}.loading-overlay{background:#ffffffe6;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-radius:16px;display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--secondary-color);font-size:1.1rem;position:absolute;top:0;left:0}.loading-overlay:after{content:\"\";width:50px;height:50px;border:5px solid var(--secondary-color);border-top:5px solid transparent;border-radius:50%;animation:spin 1s linear infinite;margin-left:10px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.form-group{position:relative;margin-bottom:1.5rem}.form-label{font-weight:600;color:var(--text-color);margin-bottom:.5rem;font-size:.9rem;text-transform:uppercase;letter-spacing:.5px}.form-control{border:2px solid var(--border-color);border-radius:12px;padding:.75rem 1rem;font-size:1rem;transition:all .3s ease;background:#fffc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.form-control:focus{border-color:var(--secondary-color);box-shadow:0 0 0 3px #667eea1a;background:#fffffff2}.form-control::placeholder{color:var(--text-light)}.btn{border-radius:12px;padding:.75rem 1.5rem;font-weight:600;font-size:1rem;transition:all .3s ease;border:none;position:relative;overflow:hidden}.btn:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.btn:hover:before{left:100%}.btn-primary{background:var(--secondary-gradient);color:#fff;box-shadow:var(--shadow-md)}.btn-primary:hover{box-shadow:var(--shadow-lg)}.btn-link{color:var(--text-light);text-decoration:none;font-size:.9rem;transition:all .3s ease}.btn-link:hover{color:var(--secondary-color);text-decoration:underline}.google-btn,.facebook-btn{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--text-color);background:#ffffffe6;border:2px solid var(--border-color);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-weight:600;transition:all .3s ease}.google-btn:hover,.facebook-btn:hover{background:#fff;border-color:var(--secondary-color);box-shadow:var(--shadow-md)}.google-btn .icon,.facebook-btn .icon{height:24px;width:24px;background-repeat:no-repeat;background-size:contain;background-position:center}.google-btn .icon{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=)}.facebook-btn .icon{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAmJJREFUaEPtmj9oFEEUxr9v7nIpzkIRLQQVFLUSBBs7IbfGwkrhtNHbvYiiRTqbNKIRbGwD/iFkd88uISmsEtwErRQsLEVUiGIbsDAK8W6e3IESkuzt3eVucwMz7b5hvt/73rwZluHwtcr+Wrb6BMJhgnkYMASyKlotDGZqt1goT81R1EUDdG+SqDXnWPD8n6ZkfiNB3Qk6XiAmZv+fZguw0+5ZBzp3QITAOw1EiupDrYYVZvFHaZ0DkNfCHCn7ILwAwolbZ0ccEMgCtRqLKu77pAQ45eAOBI/6CID3oqA0DrCl7tdfAIKJKPRGk7K+/nsfAci3Pav5YzMzl9fMBCBHI9+daEd8PbZvHKhmswdfTV79biSACD4tht7xOPHF4nTux65fD7RIEcIDJAZbBU2ljYrm0mLFLcSJKpSD+xTcbVX0+rhUADT19JI/ciUWwAveEDjTtwAAn0eBW4oT6LjBFxBHzAUohctQctgCdJKB1uYklJB1oLU0JkYJMZ7ReLExUFFW5oPycuwm9vyTSli/Rm8aNWKSwKmUbqNyPQrKU4mkbQQ4nv8V4CEjAU7ffDqwey33m2DGSIAhNziqiM/NDOvySdzdEiqMhA61vDQWwPH8GwCfGQtwzg0eCjGWGoCGvFbkxy0WfBv5nh8npCFUYe8WPfQslJxIDSB+IXsSx+amy10otls3v07bu1AbR3tnoXYP2D3QWeX8n2VLyJaQLaGm/4XsQbbNAkmebrtQfBdK56lBbxxoPDUYKoWzSsml5DLYTkRvAADMsv7cpkp5TKXP9+7RR3cBGpkH5weob/8FwaStQs990hUAAAAASUVORK5CYII=)}.separator{position:relative;width:calc(100% - 40px);height:1px;background:linear-gradient(90deg,transparent,var(--border-color),transparent);margin:2rem auto}.separator:after{content:\"OR\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#ffffffe6;padding:0 1rem;font-size:.8rem;font-weight:600;color:var(--text-light);letter-spacing:1px}.error-message{color:var(--danger-color);margin-top:1rem;font-weight:600;text-align:center}@keyframes slideIn{0%{opacity:0}to{opacity:1}}@media (max-width: 480px){.auth-container{margin:1rem;border-radius:16px}.auth-form{padding:1.5rem;margin:4px}.btn{padding:.875rem 1.25rem;font-size:.95rem}}\n"], dependencies: [{ kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.HcCardComponent, selector: "hc-card" }, { kind: "component", type: i3.HcSeparatorComponent, selector: "hc-separator", inputs: ["label"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AuthFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: AuthFormComponent, isStandalone: false, selector: "hc-auth-card", inputs: { local: { classPropertyName: "local", publicName: "local", isSignal: true, isRequired: false, transformFunction: null }, google: { classPropertyName: "google", publicName: "google", isSignal: true, isRequired: false, transformFunction: null }, facebook: { classPropertyName: "facebook", publicName: "facebook", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onError: "onError", onSignIn: "onSignIn", onSignUp: "onSignUp" }, ngImport: i0, template: "<hc-card>\r\n    <section class=\"auth-shell\">\r\n        <header class=\"auth-header\">\r\n            <div class=\"auth-badge\">{{ isSignUp() ? \"Create Account\" : \"Welcome Back\" }}</div>\r\n            <h2 class=\"auth-title\">{{ isSignUp() ? \"Create your account\" : \"Sign in to your account\" }}</h2>\r\n            <p class=\"auth-subtitle\">\r\n                {{ isSignUp() ? \"Set up your account to get started.\" : \"Use your credentials to continue.\" }}\r\n            </p>\r\n        </header>\r\n\r\n        <form class=\"auth-form\" [formGroup]=\"authForm\" (ngSubmit)=\"handleSubmit($event)\">\r\n            @if (isSignUp()) {\r\n                <div class=\"auth-grid\">\r\n                    <div class=\"auth-field\">\r\n                        <label for=\"firstName\" class=\"auth-label\">First Name</label>\r\n                        <input\r\n                            id=\"firstName\"\r\n                            type=\"text\"\r\n                            class=\"auth-input\"\r\n                            formControlName=\"firstName\"\r\n                            placeholder=\"Enter your first name\"\r\n                        />\r\n                    </div>\r\n                    <div class=\"auth-field\">\r\n                        <label for=\"lastName\" class=\"auth-label\">Last Name</label>\r\n                        <input\r\n                            id=\"lastName\"\r\n                            type=\"text\"\r\n                            class=\"auth-input\"\r\n                            formControlName=\"lastName\"\r\n                            placeholder=\"Enter your last name\"\r\n                        />\r\n                    </div>\r\n                </div>\r\n            }\r\n\r\n            <div class=\"auth-field\">\r\n                <label for=\"authField\" class=\"auth-label\">{{ authFieldLabel() }}</label>\r\n                <input\r\n                    id=\"authField\"\r\n                    type=\"text\"\r\n                    class=\"auth-input\"\r\n                    formControlName=\"authFieldValue\"\r\n                    [placeholder]=\"'Enter your ' + authFieldLabel().toLowerCase()\"\r\n                />\r\n            </div>\r\n\r\n            <div class=\"auth-field\">\r\n                <label for=\"password\" class=\"auth-label\">Password</label>\r\n                <input\r\n                    id=\"password\"\r\n                    type=\"password\"\r\n                    class=\"auth-input\"\r\n                    formControlName=\"password\"\r\n                    placeholder=\"Enter your password\"\r\n                />\r\n            </div>\r\n\r\n            <button type=\"submit\" class=\"auth-btn auth-btn-primary\">\r\n                {{ isSignUp() ? (isLoading() ? \"Signing Up...\" : \"Sign Up\") : isLoading() ? \"Signing In...\" : \"Sign In\" }}\r\n            </button>\r\n\r\n            <button type=\"button\" class=\"auth-btn auth-btn-link\" (click)=\"isSignUp.set(!isSignUp())\">\r\n                {{ isSignUp() ? \"Already have an account? Sign In\" : \"Don't have an account? Sign Up\" }}\r\n            </button>\r\n\r\n            @if (!isSignUp()) {\r\n                @if (local() && (google() || facebook())) {\r\n                    <hc-separator label=\"or\"></hc-separator>\r\n                }\r\n\r\n                @if (google()) {\r\n                    <button type=\"button\" class=\"auth-btn social-btn google-btn\" (click)=\"handleGoogleSignIn()\">\r\n                        <div class=\"icon\"></div>\r\n                        Continue with Google\r\n                    </button>\r\n                }\r\n\r\n                @if (facebook()) {\r\n                    <button type=\"button\" class=\"auth-btn social-btn facebook-btn\">\r\n                        <div class=\"icon\"></div>\r\n                        Continue with Facebook\r\n                    </button>\r\n                }\r\n\r\n                @if (isError()) {\r\n                    <p class=\"error-message\">\r\n                        {{ error()?.error?.message || \"Something went wrong!\" }}\r\n                    </p>\r\n                }\r\n            }\r\n        </form>\r\n    </section>\r\n</hc-card>\r\n", styles: [".auth-shell{display:grid;gap:1rem}.auth-header{text-align:center}.auth-badge{display:inline-flex;align-items:center;border-radius:999px;padding:.3rem .65rem;background:#2563eb17;color:#1d4ed8;font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}.auth-title{margin:.55rem 0 .25rem;color:#0f172a;font-size:clamp(1.1rem,2.8vw,1.45rem);font-weight:700;line-height:1.25;letter-spacing:-.02em}.auth-subtitle{margin:0;color:#64748b;font-size:.88rem}.auth-form{display:grid;gap:.85rem}.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.auth-field{display:grid;gap:.4rem}.auth-label{display:block;font-weight:700;color:#334155;font-size:.69rem;text-transform:uppercase;letter-spacing:.08em}.auth-input{width:100%;border:1px solid #cbd5e1;border-radius:.75rem;padding:.74rem .82rem;font-size:.92rem;color:#0f172a;background:#fff;transition:border-color .2s ease,box-shadow .2s ease}.auth-input:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb26;outline:0}.auth-input::placeholder{color:#94a3b8}.auth-btn{width:100%;min-height:2.7rem;border:0;border-radius:.78rem;font-size:.9rem;font-weight:700;line-height:1.2;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}.auth-btn:disabled{cursor:not-allowed;opacity:.7}.auth-btn-primary{background:linear-gradient(135deg,#2563eb,#4f46e5);color:#fff;box-shadow:0 16px 26px -18px #2563ebd9}.auth-btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 20px 28px -18px #2563ebe6}.auth-btn-link{min-height:1.65rem;margin-top:-.1rem;border-radius:0;background:transparent;color:#64748b;font-size:.82rem;font-weight:600;box-shadow:none}.auth-btn-link:hover{color:#2563eb;text-decoration:underline}.social-btn{display:flex;align-items:center;justify-content:center;gap:.6rem;border:1px solid #cbd5e1;background:#fff;color:#1e293b}.social-btn:hover{background:#f8fafc;border-color:#94a3b8}.social-btn .icon{height:1.1rem;width:1.1rem;background-repeat:no-repeat;background-size:contain;background-position:center}.google-btn .icon{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=)}.facebook-btn .icon{background:#1877f2;border-radius:999px;position:relative}.facebook-btn .icon:before{content:\"f\";position:absolute;left:50%;top:50%;transform:translate(-44%,-56%);color:#fff;font-weight:700;font-size:.9rem;font-family:Arial,sans-serif}.error-message{margin:0;border-radius:.7rem;padding:.62rem .75rem;background:#fee2e2;border:1px solid #fecaca;color:#b91c1c;text-align:center;font-size:.82rem;font-weight:600}@media(max-width:480px){.auth-grid{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.HcCardComponent, selector: "hc-card" }, { kind: "component", type: i2.HcSeparatorComponent, selector: "hc-separator", inputs: ["label"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: AuthFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AuthFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: "hc-auth-card", standalone: false, template: "<!--<div class=\"auth-container d-flex justify-content-center align-items-center\">-->\r\n<!--    -->\r\n<!--</div>-->\r\n<hc-card>\r\n    <!--    @if (isLoading()) {-->\r\n    <!--        <div class=\"loading-overlay w-100 h-100\"></div>-->\r\n    <!--    }-->\r\n    <form\r\n        class=\"d-inline-flex flex-column align-items-center w-100\"\r\n        [formGroup]=\"authForm\"\r\n        (ngSubmit)=\"handleSubmit($event)\"\r\n    >\r\n        @if (isSignUp()) {\r\n            <div class=\"form-group w-100\">\r\n                <label for=\"firstName\" class=\"form-label\">First Name</label>\r\n                <input\r\n                    id=\"firstName\"\r\n                    type=\"text\"\r\n                    class=\"form-control w-100\"\r\n                    formControlName=\"firstName\"\r\n                    placeholder=\"Enter your first name\"\r\n                />\r\n            </div>\r\n\r\n            <div class=\"form-group w-100\">\r\n                <label for=\"lastName\" class=\"form-label\">Last Name</label>\r\n                <input\r\n                    id=\"lastName\"\r\n                    type=\"text\"\r\n                    class=\"form-control w-100\"\r\n                    formControlName=\"lastName\"\r\n                    placeholder=\"Enter your last name\"\r\n                />\r\n            </div>\r\n        }\r\n\r\n        <div class=\"form-group w-100\">\r\n            <label for=\"authField\" class=\"form-label\">{{ authFieldLabel() }}</label>\r\n            <input\r\n                id=\"authField\"\r\n                type=\"text\"\r\n                class=\"form-control w-100\"\r\n                formControlName=\"authFieldValue\"\r\n                [placeholder]=\"'Enter your ' + authFieldLabel().toLowerCase()\"\r\n            />\r\n        </div>\r\n\r\n        <div class=\"form-group w-100\">\r\n            <label for=\"password\" class=\"form-label\">Password</label>\r\n            <input\r\n                id=\"password\"\r\n                type=\"password\"\r\n                class=\"form-control w-100\"\r\n                formControlName=\"password\"\r\n                placeholder=\"Enter your password\"\r\n            />\r\n        </div>\r\n\r\n        <button type=\"submit\" class=\"btn btn-primary mb-3 w-100\" [disabled]=\"isLoading()\">\r\n            {{ isSignUp() ? (isLoading() ? \"Signing Up...\" : \"Sign Up\") : isLoading() ? \"Signing In...\" : \"Sign In\" }}\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"btn btn-link p-0 mb-3\" (click)=\"isSignUp.set(!isSignUp())\">\r\n            {{ isSignUp() ? \"Already have an account? Sign In\" : \"Don't have an account? Sign Up\" }}\r\n        </button>\r\n\r\n        @if (!isSignUp()) {\r\n            @if (local() && (google() || facebook())) {\r\n                <hc-separator label=\"OR\"></hc-separator>\r\n            }\r\n\r\n            @if (google()) {\r\n                <button type=\"button\" class=\"btn google-btn btn-light mb-3 w-100\" (click)=\"handleGoogleSignIn()\">\r\n                    <div class=\"icon\"></div>\r\n                    Sign in with Google\r\n                </button>\r\n            }\r\n\r\n            @if (facebook()) {\r\n                <button type=\"button\" class=\"btn facebook-btn btn-light mb-3 w-100\">\r\n                    <div class=\"icon\"></div>\r\n                    Sign in with Facebook\r\n                </button>\r\n            }\r\n\r\n            @if (isError()) {\r\n                <div class=\"error-message w-100\">\r\n                    {{ error()?.error?.message || \"Something went wrong!\" }}\r\n                </div>\r\n            }\r\n        }\r\n    </form>\r\n</hc-card>\r\n", styles: [".auth-form{background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:16px;margin:8px;padding:2rem;position:relative;z-index:1}.loading-overlay{background:#ffffffe6;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-radius:16px;display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--secondary-color);font-size:1.1rem;position:absolute;top:0;left:0}.loading-overlay:after{content:\"\";width:50px;height:50px;border:5px solid var(--secondary-color);border-top:5px solid transparent;border-radius:50%;animation:spin 1s linear infinite;margin-left:10px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.form-group{position:relative;margin-bottom:1.5rem}.form-label{font-weight:600;color:var(--text-color);margin-bottom:.5rem;font-size:.9rem;text-transform:uppercase;letter-spacing:.5px}.form-control{border:2px solid var(--border-color);border-radius:12px;padding:.75rem 1rem;font-size:1rem;transition:all .3s ease;background:#fffc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.form-control:focus{border-color:var(--secondary-color);box-shadow:0 0 0 3px #667eea1a;background:#fffffff2}.form-control::placeholder{color:var(--text-light)}.btn{border-radius:12px;padding:.75rem 1.5rem;font-weight:600;font-size:1rem;transition:all .3s ease;border:none;position:relative;overflow:hidden}.btn:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.btn:hover:before{left:100%}.btn-primary{background:var(--secondary-gradient);color:#fff;box-shadow:var(--shadow-md)}.btn-primary:hover{box-shadow:var(--shadow-lg)}.btn-link{color:var(--text-light);text-decoration:none;font-size:.9rem;transition:all .3s ease}.btn-link:hover{color:var(--secondary-color);text-decoration:underline}.google-btn,.facebook-btn{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--text-color);background:#ffffffe6;border:2px solid var(--border-color);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-weight:600;transition:all .3s ease}.google-btn:hover,.facebook-btn:hover{background:#fff;border-color:var(--secondary-color);box-shadow:var(--shadow-md)}.google-btn .icon,.facebook-btn .icon{height:24px;width:24px;background-repeat:no-repeat;background-size:contain;background-position:center}.google-btn .icon{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=)}.facebook-btn .icon{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAmJJREFUaEPtmj9oFEEUxr9v7nIpzkIRLQQVFLUSBBs7IbfGwkrhtNHbvYiiRTqbNKIRbGwD/iFkd88uISmsEtwErRQsLEVUiGIbsDAK8W6e3IESkuzt3eVucwMz7b5hvt/73rwZluHwtcr+Wrb6BMJhgnkYMASyKlotDGZqt1goT81R1EUDdG+SqDXnWPD8n6ZkfiNB3Qk6XiAmZv+fZguw0+5ZBzp3QITAOw1EiupDrYYVZvFHaZ0DkNfCHCn7ILwAwolbZ0ccEMgCtRqLKu77pAQ45eAOBI/6CID3oqA0DrCl7tdfAIKJKPRGk7K+/nsfAci3Pav5YzMzl9fMBCBHI9+daEd8PbZvHKhmswdfTV79biSACD4tht7xOPHF4nTux65fD7RIEcIDJAZbBU2ljYrm0mLFLcSJKpSD+xTcbVX0+rhUADT19JI/ciUWwAveEDjTtwAAn0eBW4oT6LjBFxBHzAUohctQctgCdJKB1uYklJB1oLU0JkYJMZ7ReLExUFFW5oPycuwm9vyTSli/Rm8aNWKSwKmUbqNyPQrKU4mkbQQ4nv8V4CEjAU7ffDqwey33m2DGSIAhNziqiM/NDOvySdzdEiqMhA61vDQWwPH8GwCfGQtwzg0eCjGWGoCGvFbkxy0WfBv5nh8npCFUYe8WPfQslJxIDSB+IXsSx+amy10otls3v07bu1AbR3tnoXYP2D3QWeX8n2VLyJaQLaGm/4XsQbbNAkmebrtQfBdK56lBbxxoPDUYKoWzSsml5DLYTkRvAADMsv7cpkp5TKXP9+7RR3cBGpkH5weob/8FwaStQs990hUAAAAASUVORK5CYII=)}.separator{position:relative;width:calc(100% - 40px);height:1px;background:linear-gradient(90deg,transparent,var(--border-color),transparent);margin:2rem auto}.separator:after{content:\"OR\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#ffffffe6;padding:0 1rem;font-size:.8rem;font-weight:600;color:var(--text-light);letter-spacing:1px}.error-message{color:var(--danger-color);margin-top:1rem;font-weight:600;text-align:center}@keyframes slideIn{0%{opacity:0}to{opacity:1}}@media (max-width: 480px){.auth-container{margin:1rem;border-radius:16px}.auth-form{padding:1.5rem;margin:4px}.btn{padding:.875rem 1.25rem;font-size:.95rem}}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [AUTH_CONFIG]
-                }] }, { type: i1$1.FormBuilder }, { type: AuthService }] });
+            args: [{ selector: "hc-auth-card", standalone: false, template: "<hc-card>\r\n    <section class=\"auth-shell\">\r\n        <header class=\"auth-header\">\r\n            <div class=\"auth-badge\">{{ isSignUp() ? \"Create Account\" : \"Welcome Back\" }}</div>\r\n            <h2 class=\"auth-title\">{{ isSignUp() ? \"Create your account\" : \"Sign in to your account\" }}</h2>\r\n            <p class=\"auth-subtitle\">\r\n                {{ isSignUp() ? \"Set up your account to get started.\" : \"Use your credentials to continue.\" }}\r\n            </p>\r\n        </header>\r\n\r\n        <form class=\"auth-form\" [formGroup]=\"authForm\" (ngSubmit)=\"handleSubmit($event)\">\r\n            @if (isSignUp()) {\r\n                <div class=\"auth-grid\">\r\n                    <div class=\"auth-field\">\r\n                        <label for=\"firstName\" class=\"auth-label\">First Name</label>\r\n                        <input\r\n                            id=\"firstName\"\r\n                            type=\"text\"\r\n                            class=\"auth-input\"\r\n                            formControlName=\"firstName\"\r\n                            placeholder=\"Enter your first name\"\r\n                        />\r\n                    </div>\r\n                    <div class=\"auth-field\">\r\n                        <label for=\"lastName\" class=\"auth-label\">Last Name</label>\r\n                        <input\r\n                            id=\"lastName\"\r\n                            type=\"text\"\r\n                            class=\"auth-input\"\r\n                            formControlName=\"lastName\"\r\n                            placeholder=\"Enter your last name\"\r\n                        />\r\n                    </div>\r\n                </div>\r\n            }\r\n\r\n            <div class=\"auth-field\">\r\n                <label for=\"authField\" class=\"auth-label\">{{ authFieldLabel() }}</label>\r\n                <input\r\n                    id=\"authField\"\r\n                    type=\"text\"\r\n                    class=\"auth-input\"\r\n                    formControlName=\"authFieldValue\"\r\n                    [placeholder]=\"'Enter your ' + authFieldLabel().toLowerCase()\"\r\n                />\r\n            </div>\r\n\r\n            <div class=\"auth-field\">\r\n                <label for=\"password\" class=\"auth-label\">Password</label>\r\n                <input\r\n                    id=\"password\"\r\n                    type=\"password\"\r\n                    class=\"auth-input\"\r\n                    formControlName=\"password\"\r\n                    placeholder=\"Enter your password\"\r\n                />\r\n            </div>\r\n\r\n            <button type=\"submit\" class=\"auth-btn auth-btn-primary\">\r\n                {{ isSignUp() ? (isLoading() ? \"Signing Up...\" : \"Sign Up\") : isLoading() ? \"Signing In...\" : \"Sign In\" }}\r\n            </button>\r\n\r\n            <button type=\"button\" class=\"auth-btn auth-btn-link\" (click)=\"isSignUp.set(!isSignUp())\">\r\n                {{ isSignUp() ? \"Already have an account? Sign In\" : \"Don't have an account? Sign Up\" }}\r\n            </button>\r\n\r\n            @if (!isSignUp()) {\r\n                @if (local() && (google() || facebook())) {\r\n                    <hc-separator label=\"or\"></hc-separator>\r\n                }\r\n\r\n                @if (google()) {\r\n                    <button type=\"button\" class=\"auth-btn social-btn google-btn\" (click)=\"handleGoogleSignIn()\">\r\n                        <div class=\"icon\"></div>\r\n                        Continue with Google\r\n                    </button>\r\n                }\r\n\r\n                @if (facebook()) {\r\n                    <button type=\"button\" class=\"auth-btn social-btn facebook-btn\">\r\n                        <div class=\"icon\"></div>\r\n                        Continue with Facebook\r\n                    </button>\r\n                }\r\n\r\n                @if (isError()) {\r\n                    <p class=\"error-message\">\r\n                        {{ error()?.error?.message || \"Something went wrong!\" }}\r\n                    </p>\r\n                }\r\n            }\r\n        </form>\r\n    </section>\r\n</hc-card>\r\n", styles: [".auth-shell{display:grid;gap:1rem}.auth-header{text-align:center}.auth-badge{display:inline-flex;align-items:center;border-radius:999px;padding:.3rem .65rem;background:#2563eb17;color:#1d4ed8;font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}.auth-title{margin:.55rem 0 .25rem;color:#0f172a;font-size:clamp(1.1rem,2.8vw,1.45rem);font-weight:700;line-height:1.25;letter-spacing:-.02em}.auth-subtitle{margin:0;color:#64748b;font-size:.88rem}.auth-form{display:grid;gap:.85rem}.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.auth-field{display:grid;gap:.4rem}.auth-label{display:block;font-weight:700;color:#334155;font-size:.69rem;text-transform:uppercase;letter-spacing:.08em}.auth-input{width:100%;border:1px solid #cbd5e1;border-radius:.75rem;padding:.74rem .82rem;font-size:.92rem;color:#0f172a;background:#fff;transition:border-color .2s ease,box-shadow .2s ease}.auth-input:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb26;outline:0}.auth-input::placeholder{color:#94a3b8}.auth-btn{width:100%;min-height:2.7rem;border:0;border-radius:.78rem;font-size:.9rem;font-weight:700;line-height:1.2;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}.auth-btn:disabled{cursor:not-allowed;opacity:.7}.auth-btn-primary{background:linear-gradient(135deg,#2563eb,#4f46e5);color:#fff;box-shadow:0 16px 26px -18px #2563ebd9}.auth-btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 20px 28px -18px #2563ebe6}.auth-btn-link{min-height:1.65rem;margin-top:-.1rem;border-radius:0;background:transparent;color:#64748b;font-size:.82rem;font-weight:600;box-shadow:none}.auth-btn-link:hover{color:#2563eb;text-decoration:underline}.social-btn{display:flex;align-items:center;justify-content:center;gap:.6rem;border:1px solid #cbd5e1;background:#fff;color:#1e293b}.social-btn:hover{background:#f8fafc;border-color:#94a3b8}.social-btn .icon{height:1.1rem;width:1.1rem;background-repeat:no-repeat;background-size:contain;background-position:center}.google-btn .icon{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=)}.facebook-btn .icon{background:#1877f2;border-radius:999px;position:relative}.facebook-btn .icon:before{content:\"f\";position:absolute;left:50%;top:50%;transform:translate(-44%,-56%);color:#fff;font-weight:700;font-size:.9rem;font-family:Arial,sans-serif}.error-message{margin:0;border-radius:.7rem;padding:.62rem .75rem;background:#fee2e2;border:1px solid #fecaca;color:#b91c1c;text-align:center;font-size:.82rem;font-weight:600}@media(max-width:480px){.auth-grid{grid-template-columns:1fr}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { local: [{ type: i0.Input, args: [{ isSignal: true, alias: "local", required: false }] }], google: [{ type: i0.Input, args: [{ isSignal: true, alias: "google", required: false }] }], facebook: [{ type: i0.Input, args: [{ isSignal: true, alias: "facebook", required: false }] }], onError: [{ type: i0.Output, args: ["onError"] }], onSignIn: [{ type: i0.Output, args: ["onSignIn"] }], onSignUp: [{ type: i0.Output, args: ["onSignUp"] }] } });
 
 /**
  * Angular structural directive for permission-based conditional rendering
@@ -1595,7 +1555,7 @@ class PermissionDirective {
      * <div *hcPermission="['users.read', 'users.write']">Content</div>
      * ```
      */
-    hcPermission = input.required();
+    hcPermission = input.required(...(ngDevMode ? [{ debugName: "hcPermission" }] : []));
     /**
      * Constructor that sets up the permission checking effect
      *
@@ -1650,15 +1610,15 @@ class PermissionDirective {
                 : user.role.permissions.includes(requiredPermission)
             : false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PermissionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", type: PermissionDirective, isStandalone: true, selector: "[hcPermission]", inputs: { hcPermission: { classPropertyName: "hcPermission", publicName: "hcPermission", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PermissionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.4", type: PermissionDirective, isStandalone: true, selector: "[hcPermission]", inputs: { hcPermission: { classPropertyName: "hcPermission", publicName: "hcPermission", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PermissionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PermissionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[hcPermission]",
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { hcPermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "hcPermission", required: true }] }] } });
 
 /**
  * Enumeration of authentication guard conditions
@@ -2002,7 +1962,7 @@ function roleGuard(role, options) {
                 return false;
             }
         }
-        await authState.signOut("/auth");
+        await authState.signOut("/auth", true);
         return false;
     };
 }
@@ -2274,6 +2234,9 @@ function authInterceptor(redirect, onRedirect) {
  * @see {@link PermissionDirective} Permission-based conditional rendering directive
  * @see {@link AuthService} Authentication service for managing user sessions
  */
+/**
+ * Root module for reusable authentication UI, directives, and providers.
+ */
 class NgxHichchiAuthModule {
     /**
      * Configures the NgxHichchiAuthModule with the provided authentication configuration
@@ -2309,27 +2272,25 @@ class NgxHichchiAuthModule {
     static forRoot(config) {
         return {
             ngModule: NgxHichchiAuthModule,
-            providers: [{ provide: AUTH_CONFIG, useValue: config }, provideHttpClient(), AuthService],
+            providers: [{ provide: AUTH_CONFIG, useValue: config }, AuthService],
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgxHichchiAuthModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: NgxHichchiAuthModule, declarations: [AuthFormComponent], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxHichchiAuthModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: NgxHichchiAuthModule, declarations: [AuthFormComponent], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             ButtonComponent,
             HcCardComponent,
-            HcCardComponent,
             HcSeparatorComponent,
             PermissionDirective], exports: [AuthFormComponent, PermissionDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgxHichchiAuthModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxHichchiAuthModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             ButtonComponent,
             HcCardComponent,
-            HcCardComponent,
             HcSeparatorComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgxHichchiAuthModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxHichchiAuthModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AuthFormComponent],
@@ -2339,7 +2300,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                         ReactiveFormsModule,
                         ButtonComponent,
                         HcCardComponent,
-                        HcCardComponent,
                         HcSeparatorComponent,
                         PermissionDirective,
                     ],