@acontplus/ng-auth 1.0.1 → 1.0.2

package/README.md

@@ -126,3 +126,163 @@ 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.
+
+### Basic Usage
+
+```typescript
+import { LoginComponent } from '@acontplus/ng-auth/ui/login';
+
+@Component({
+  template: `
+    <acp-login 
+      title="Welcome Back"
+      [showRegisterButton]="true">
+    </acp-login>
+  `,
+  imports: [LoginComponent]
+})
+export class AuthPageComponent {}
+```
+
+### Flexible Form Fields
+
+The component supports additional form fields through two approaches:
+
+#### 1. Additional Form Controls via Inputs
+
+Pass additional form controls programmatically:
+
+```typescript
+import { FormControl, Validators } from '@angular/forms';
+
+@Component({...})
+export class AuthPageComponent {
+  signinExtras = {
+    companyId: new FormControl('', Validators.required),
+    rememberMe: new FormControl(false)
+  };
+
+  signupExtras = {
+    companyId: new FormControl('', Validators.required),
+    role: new FormControl('', Validators.required),
+    validationPin: new FormControl('', [Validators.required, Validators.pattern(/^\d{6}$/)])
+  };
+}
+```
+
+```html
+<acp-login
+  [additionalSigninControls]="signinExtras"
+  [additionalSignupControls]="signupExtras">
+</acp-login>
+```
+
+#### 2. Content Projection for Custom Templates
+
+Use content projection slots for custom field templates:
+
+```html
+<acp-login>
+  <!-- Additional fields for signin form -->
+  <div signin-fields>
+    <mat-form-field class="w-100">
+      <mat-label>Company</mat-label>
+      <mat-select formControlName="companyId">
+        @for (company of companies; track company.id) {
+        <mat-option [value]="company.id">
+          {{ company.name }}
+        </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  </div>
+
+  <!-- Additional fields for signup form -->
+  <div signup-fields>
+    <mat-form-field class="w-100">
+      <mat-label>Company</mat-label>
+      <mat-select formControlName="companyId" required>
+        @for (company of companies; track company.id) {
+        <mat-option [value]="company.id">
+          {{ company.name }}
+        </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+
+    <mat-form-field class="w-100">
+      <mat-label>Role</mat-label>
+      <mat-select formControlName="role" required>
+        <mat-option value="admin">Administrator</mat-option>
+        <mat-option value="user">User</mat-option>
+        <mat-option value="manager">Manager</mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <mat-form-field class="w-100">
+      <mat-label>Validation PIN</mat-label>
+      <input matInput type="text" placeholder="Enter PIN" formControlName="validationPin" required />
+    </mat-form-field>
+  </div>
+</acp-login>
+```
+
+### Dynamic Footer Content
+
+Customize the footer with dynamic content:
+
+```html
+<ng-template #customFooter>
+  <div class="row mt-3">
+    <div class="col-12 text-center">
+      <a mat-button color="primary" href="/terms">Terms of Service</a>
+      <a mat-button color="primary" href="/privacy">Privacy Policy</a>
+    </div>
+  </div>
+</ng-template>
+
+<acp-login [footerContent]="customFooter">
+  <!-- form content -->
+</acp-login>
+```
+
+### Theme Color Inheritance
+
+The component uses CSS custom properties to inherit colors from the parent app's theme:
+
+- Background gradient: Uses `--mdc-theme-primary` and `--mdc-theme-secondary`
+- Title color: Uses `--mdc-theme-on-surface`
+- Error alerts: Uses `--mdc-theme-error`, `--mdc-theme-error-container`, `--mdc-theme-on-error-container`
+
+Fallback colors use Angular Material's Material Design 3 (M3) neutral color tokens:
+- Primary: #5c5f5c (M3 neutral primary)
+- Secondary: #79747e (M3 neutral secondary)
+- On surface: #1c1b1f (M3 on-surface)
+- Error: #ba1a1a (M3 error)
+- Error container: #ffdad6 (M3 error-container)
+- On error container: #410002 (M3 on-error-container)
+
+To customize colors, define these CSS variables in your app's global styles:
+
+```css
+:root {
+  --mdc-theme-primary: #your-primary-color;
+  --mdc-theme-secondary: #your-secondary-color;
+  --mdc-theme-on-surface: #your-text-color;
+  --mdc-theme-error: #your-error-color;
+  --mdc-theme-error-container: #your-error-bg;
+  --mdc-theme-on-error-container: #your-error-text;
+}
+```
+
+### Component Inputs
+
+- `title: string` - The title displayed in the card header (default: 'Login')
+- `showRegisterButton: boolean` - Whether to show the register button (default: true)
+- `additionalSigninControls: Record<string, AbstractControl>` - Additional controls for signin form
+- `additionalSignupControls: Record<string, AbstractControl>` - Additional controls for signup form
+- `footerContent: TemplateRef<any> | null` - Custom footer template

package/fesm2022/acontplus-ng-auth.mjs

@@ -1,23 +1,23 @@
 import { UserRepository } from '@acontplus/ng-infrastructure';
 export { TOKEN_PROVIDER } from '@acontplus/ng-infrastructure';
 import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, Injectable, signal, input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, PLATFORM_ID, Injectable, signal, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
 import { Router } from '@angular/router';
-import { isPlatformBrowser } from '@angular/common';
+import * as i1 from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
 import { jwtDecode } from 'jwt-decode';
 import { ENVIRONMENT, AUTH_API } from '@acontplus/ng-config';
 import { HttpClient } from '@angular/common/http';
 import { from, map, of, tap, catchError, throwError } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 import { AuthTokens } from '@acontplus/core';
-import * as i1 from '@angular/forms';
+import * as i2 from '@angular/forms';
 import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatCard, MatCardHeader, MatCardTitle, MatCardContent, MatCardFooter } from '@angular/material/card';
 import { MatLabel, MatFormField } from '@angular/material/form-field';
 import { MatInput } from '@angular/material/input';
 import { MatIcon } from '@angular/material/icon';
 import { MatButton, MatAnchor } from '@angular/material/button';
-import { MatTooltip } from '@angular/material/tooltip';
 
 class TokenRepository {
     environment = inject(ENVIRONMENT);
@@ -612,6 +612,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
 // src/lib/presentation/components/login/login.component.ts
 class LoginComponent {
     title = input('Login', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    showRegisterButton = input(true, ...(ngDevMode ? [{ debugName: "showRegisterButton" }] : []));
+    // Additional form controls that can be passed from parent components
+    additionalSigninControls = input({}, ...(ngDevMode ? [{ debugName: "additionalSigninControls" }] : []));
+    additionalSignupControls = input({}, ...(ngDevMode ? [{ debugName: "additionalSignupControls" }] : []));
+    // Additional field templates
+    additionalSigninFields = input(null, ...(ngDevMode ? [{ debugName: "additionalSigninFields" }] : []));
+    additionalSignupFields = input(null, ...(ngDevMode ? [{ debugName: "additionalSignupFields" }] : []));
+    // Footer content template
+    footerContent = input(null, ...(ngDevMode ? [{ debugName: "footerContent" }] : []));
+    // Computed signal to check if footer content exists
+    hasFooterContent = computed(() => this.footerContent() !== null, ...(ngDevMode ? [{ debugName: "hasFooterContent" }] : []));
     fb = inject(FormBuilder);
     loginUseCase = inject(LoginUseCase);
     registerUseCase = inject(RegisterUseCase);
@@ -632,7 +643,17 @@ class LoginComponent {
             password: ['', [Validators.required, Validators.minLength(6)]],
         });
     }
-    toggleMode() {
+    ngOnInit() {
+        // Add additional controls to signin form
+        Object.entries(this.additionalSigninControls()).forEach(([key, control]) => {
+            this.signinForm.addControl(key, control);
+        });
+        // Add additional controls to signup form
+        Object.entries(this.additionalSignupControls()).forEach(([key, control]) => {
+            this.signupForm.addControl(key, control);
+        });
+    }
+    switchMode() {
         this.isLoginMode.set(!this.isLoginMode());
         this.errorMessage.set(null);
     }
@@ -671,122 +692,12 @@ 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: "app-login", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <section id="wrapper" class="d-flex justify-content-center align-items-center">
-      <mat-card class="mat-elevation-z8 p-4 rounded">
-        <mat-card-header>
-          <mat-card-title class="text-center">{{ title() }}</mat-card-title>
-        </mat-card-header>
-        <mat-card-content>
-          @if (isLoginMode()) {
-            <form [formGroup]="signinForm" (ngSubmit)="signIn()" class="d-flex flex-column gap-3">
-              <mat-form-field class="w-100">
-                <mat-label>Usuario</mat-label>
-                <input matInput type="text" placeholder="Ingrese su usuario" formControlName="email" />
-              </mat-form-field>
-
-              <mat-form-field class="w-100">
-                <mat-label>Contraseña</mat-label>
-                <input matInput type="password" placeholder="Ingrese su contraseña" formControlName="password" />
-              </mat-form-field>
-
-              <div class="d-flex justify-content-center mt-3">
-                <button
-                  mat-raised-button
-                  color="primary"
-                  [disabled]="!signinForm.valid || isLoading()"
-                  type="submit"
-                  class="w-100"
-                >
-                  @if (isLoading()) {
-                    Ingresando...
-                  } @else {
-                    <ng-container>Ingresar <mat-icon>login</mat-icon></ng-container>
-                  }
-                </button>
-              </div>
-
-              <!-- <div class="text-center mt-2">
-                <button
-                  mat-button
-                  type="button"
-                  (click)="toggleMode()"
-                >
-                  ¿No tienes cuenta? Regístrate
-                </button>
-              </div> -->
-            </form>
-          } @else {
-            <form [formGroup]="signupForm" (ngSubmit)="registerUser()" class="d-flex flex-column gap-3">
-              <mat-form-field class="w-100">
-                <mat-label>Nombre</mat-label>
-                <input matInput type="text" placeholder="Ingrese su nombre" formControlName="displayName" />
-              </mat-form-field>
-
-              <mat-form-field class="w-100">
-                <mat-label>Email</mat-label>
-                <input matInput type="email" placeholder="Ingrese su email" formControlName="email" />
-              </mat-form-field>
-
-              <mat-form-field class="w-100">
-                <mat-label>Contraseña</mat-label>
-                <input matInput type="password" placeholder="Ingrese su contraseña" formControlName="password" />
-              </mat-form-field>
-
-              <div class="d-flex justify-content-center mt-3">
-                <button
-                  mat-raised-button
-                  color="primary"
-                  [disabled]="!signupForm.valid || isLoading()"
-                  type="submit"
-                  class="w-100"
-                >
-                  @if (isLoading()) {
-                    Registrando...
-                  } @else {
-                    <ng-container>Registrarse <mat-icon>person_add</mat-icon></ng-container>
-                  }
-                </button>
-              </div>
-
-              <div class="text-center mt-2">
-                <button mat-button type="button" (click)="toggleMode()">¿Ya tienes cuenta? Inicia sesión</button>
-              </div>
-            </form>
-          }
-          @if (errorMessage()) {
-            <div class="alert alert-danger mt-3" role="alert">
-              {{ errorMessage() }}
-            </div>
-          }
-        </mat-card-content>
-        <mat-card-footer>
-          <div class="row mt-3">
-            <div class="col-xs-12 col-sm-12 col-md-12 m-t-10 text-center">
-              <div class="social">
-                <a
-                  mat-button
-                  color="primary"
-                  matTooltip="Ir a Acontplus Web"
-                  aria-label="Acontplus"
-                  href="https://app.acontplus.com"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <mat-icon>arrow_outward</mat-icon>
-                  Acontplus Web
-                </a>
-              </div>
-            </div>
-          </div>
-        </mat-card-footer>
-      </mat-card>
-    </section>
-  `, isInline: true, styles: ["#wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);padding:20px}mat-card{width:100%;max-width:400px;border-radius:12px;box-shadow:0 8px 32px #0000001a}mat-card-header{text-align:center;margin-bottom:20px}mat-card-title{font-size:24px;font-weight:600;color:#333}mat-form-field{width:100%}.w-100{width:100%}.d-flex{display:flex}.flex-column{flex-direction:column}.gap-3{gap:12px}.justify-content-center{justify-content:center}.align-items-center{align-items:center}.mt-3{margin-top:12px}.mt-2{margin-top:8px}.text-center{text-align:center}.p-4{padding:16px}.rounded{border-radius:12px}.alert-danger{background-color:#f8d7da;border-color:#f5c6cb;color:#721c24;padding:12px;border-radius:4px;border:1px solid transparent}.row{display:flex;flex-wrap:wrap;margin:0 -15px}.col-xs-12,.col-sm-12,.col-md-12{flex:0 0 100%;max-width:100%;padding:0 15px}.m-t-10{margin-top:10px}.social{display:flex;justify-content:center}mat-button{border-radius:8px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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],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: 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: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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 }, 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: "<section id=\"wrapper\" class=\"d-flex justify-content-center align-items-center\">\n  <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 matInput type=\"password\" placeholder=\"Ingrese su contrase\u00F1a\" formControlName=\"password\" />\n        </mat-form-field>\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 mat-raised-button color=\"primary\" [disabled]=\"!signinForm.valid || isLoading()\" type=\"submit\"\n            class=\"w-100\">\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 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 matInput type=\"password\" placeholder=\"Ingrese su contrase\u00F1a\" formControlName=\"password\" />\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 mat-raised-button color=\"primary\" [disabled]=\"!signupForm.valid || isLoading()\" type=\"submit\"\n            class=\"w-100\">\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()\">\u00BFYa tienes cuenta? Inicia sesi\u00F3n</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</section>\n", styles: ["#wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--mdc-theme-primary, #5c5f5c) 0%,var(--mdc-theme-secondary, #79747e) 100%);padding:20px}mat-card{width:100%;max-width:400px;border-radius:12px;box-shadow:0 8px 32px #0000001a}mat-card-header{text-align:center;margin-bottom:20px}mat-card-title{font-size:24px;font-weight:600;color:var(--mdc-theme-on-surface, #1c1b1f)}mat-form-field{width:100%}.w-100{width:100%}.d-flex{display:flex}.flex-column{flex-direction:column}.gap-3{gap:12px}.justify-content-center{justify-content:center}.align-items-center{align-items:center}.mt-3{margin-top:12px}.mt-2{margin-top:8px}.text-center{text-align:center}.p-4{padding:16px}.rounded{border-radius:12px}.alert-danger{background-color:var(--mdc-theme-error-container, #ffdad6);border-color:var(--mdc-theme-error, #ba1a1a);color:var(--mdc-theme-on-error-container, #410002);padding:12px;border-radius:4px;border:1px solid transparent}.row{display:flex;flex-wrap:wrap;margin:0 -15px}.col-xs-12,.col-sm-12,.col-md-12{flex:0 0 100%;max-width:100%;padding:0 15px}.m-t-10{margin-top:10px}.social{display:flex;justify-content:center}mat-button{border-radius:8px}\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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LoginComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-login', imports: [
+            args: [{ selector: 'acp-login', imports: [
+                        CommonModule,
                         ReactiveFormsModule,
                         MatCard,
                         MatCardHeader,
@@ -798,120 +709,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                         MatIcon,
                         MatButton,
                         MatCardFooter,
-                        MatTooltip,
                         MatAnchor,
-                    ], template: `
-    <section id="wrapper" class="d-flex justify-content-center align-items-center">
-      <mat-card class="mat-elevation-z8 p-4 rounded">
-        <mat-card-header>
-          <mat-card-title class="text-center">{{ title() }}</mat-card-title>
-        </mat-card-header>
-        <mat-card-content>
-          @if (isLoginMode()) {
-            <form [formGroup]="signinForm" (ngSubmit)="signIn()" class="d-flex flex-column gap-3">
-              <mat-form-field class="w-100">
-                <mat-label>Usuario</mat-label>
-                <input matInput type="text" placeholder="Ingrese su usuario" formControlName="email" />
-              </mat-form-field>
-
-              <mat-form-field class="w-100">
-                <mat-label>Contraseña</mat-label>
-                <input matInput type="password" placeholder="Ingrese su contraseña" formControlName="password" />
-              </mat-form-field>
-
-              <div class="d-flex justify-content-center mt-3">
-                <button
-                  mat-raised-button
-                  color="primary"
-                  [disabled]="!signinForm.valid || isLoading()"
-                  type="submit"
-                  class="w-100"
-                >
-                  @if (isLoading()) {
-                    Ingresando...
-                  } @else {
-                    <ng-container>Ingresar <mat-icon>login</mat-icon></ng-container>
-                  }
-                </button>
-              </div>
-
-              <!-- <div class="text-center mt-2">
-                <button
-                  mat-button
-                  type="button"
-                  (click)="toggleMode()"
-                >
-                  ¿No tienes cuenta? Regístrate
-                </button>
-              </div> -->
-            </form>
-          } @else {
-            <form [formGroup]="signupForm" (ngSubmit)="registerUser()" class="d-flex flex-column gap-3">
-              <mat-form-field class="w-100">
-                <mat-label>Nombre</mat-label>
-                <input matInput type="text" placeholder="Ingrese su nombre" formControlName="displayName" />
-              </mat-form-field>
-
-              <mat-form-field class="w-100">
-                <mat-label>Email</mat-label>
-                <input matInput type="email" placeholder="Ingrese su email" formControlName="email" />
-              </mat-form-field>
-
-              <mat-form-field class="w-100">
-                <mat-label>Contraseña</mat-label>
-                <input matInput type="password" placeholder="Ingrese su contraseña" formControlName="password" />
-              </mat-form-field>
-
-              <div class="d-flex justify-content-center mt-3">
-                <button
-                  mat-raised-button
-                  color="primary"
-                  [disabled]="!signupForm.valid || isLoading()"
-                  type="submit"
-                  class="w-100"
-                >
-                  @if (isLoading()) {
-                    Registrando...
-                  } @else {
-                    <ng-container>Registrarse <mat-icon>person_add</mat-icon></ng-container>
-                  }
-                </button>
-              </div>
-
-              <div class="text-center mt-2">
-                <button mat-button type="button" (click)="toggleMode()">¿Ya tienes cuenta? Inicia sesión</button>
-              </div>
-            </form>
-          }
-          @if (errorMessage()) {
-            <div class="alert alert-danger mt-3" role="alert">
-              {{ errorMessage() }}
-            </div>
-          }
-        </mat-card-content>
-        <mat-card-footer>
-          <div class="row mt-3">
-            <div class="col-xs-12 col-sm-12 col-md-12 m-t-10 text-center">
-              <div class="social">
-                <a
-                  mat-button
-                  color="primary"
-                  matTooltip="Ir a Acontplus Web"
-                  aria-label="Acontplus"
-                  href="https://app.acontplus.com"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <mat-icon>arrow_outward</mat-icon>
-                  Acontplus Web
-                </a>
-              </div>
-            </div>
-          </div>
-        </mat-card-footer>
-      </mat-card>
-    </section>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["#wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);padding:20px}mat-card{width:100%;max-width:400px;border-radius:12px;box-shadow:0 8px 32px #0000001a}mat-card-header{text-align:center;margin-bottom:20px}mat-card-title{font-size:24px;font-weight:600;color:#333}mat-form-field{width:100%}.w-100{width:100%}.d-flex{display:flex}.flex-column{flex-direction:column}.gap-3{gap:12px}.justify-content-center{justify-content:center}.align-items-center{align-items:center}.mt-3{margin-top:12px}.mt-2{margin-top:8px}.text-center{text-align:center}.p-4{padding:16px}.rounded{border-radius:12px}.alert-danger{background-color:#f8d7da;border-color:#f5c6cb;color:#721c24;padding:12px;border-radius:4px;border:1px solid transparent}.row{display:flex;flex-wrap:wrap;margin:0 -15px}.col-xs-12,.col-sm-12,.col-md-12{flex:0 0 100%;max-width:100%;padding:0 15px}.m-t-10{margin-top:10px}.social{display:flex;justify-content:center}mat-button{border-radius:8px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section id=\"wrapper\" class=\"d-flex justify-content-center align-items-center\">\n  <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 matInput type=\"password\" placeholder=\"Ingrese su contrase\u00F1a\" formControlName=\"password\" />\n        </mat-form-field>\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 mat-raised-button color=\"primary\" [disabled]=\"!signinForm.valid || isLoading()\" type=\"submit\"\n            class=\"w-100\">\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 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 matInput type=\"password\" placeholder=\"Ingrese su contrase\u00F1a\" formControlName=\"password\" />\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 mat-raised-button color=\"primary\" [disabled]=\"!signupForm.valid || isLoading()\" type=\"submit\"\n            class=\"w-100\">\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()\">\u00BFYa tienes cuenta? Inicia sesi\u00F3n</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</section>\n", styles: ["#wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--mdc-theme-primary, #5c5f5c) 0%,var(--mdc-theme-secondary, #79747e) 100%);padding:20px}mat-card{width:100%;max-width:400px;border-radius:12px;box-shadow:0 8px 32px #0000001a}mat-card-header{text-align:center;margin-bottom:20px}mat-card-title{font-size:24px;font-weight:600;color:var(--mdc-theme-on-surface, #1c1b1f)}mat-form-field{width:100%}.w-100{width:100%}.d-flex{display:flex}.flex-column{flex-direction:column}.gap-3{gap:12px}.justify-content-center{justify-content:center}.align-items-center{align-items:center}.mt-3{margin-top:12px}.mt-2{margin-top:8px}.text-center{text-align:center}.p-4{padding:16px}.rounded{border-radius:12px}.alert-danger{background-color:var(--mdc-theme-error-container, #ffdad6);border-color:var(--mdc-theme-error, #ba1a1a);color:var(--mdc-theme-on-error-container, #410002);padding:12px;border-radius:4px;border:1px solid transparent}.row{display:flex;flex-wrap:wrap;margin:0 -15px}.col-xs-12,.col-sm-12,.col-md-12{flex:0 0 100%;max-width:100%;padding:0 15px}.m-t-10{margin-top:10px}.social{display:flex;justify-content:center}mat-button{border-radius:8px}\n"] }]
         }], ctorParameters: () => [] });
 
 // src/lib/presentation/components/index.ts