valtech-components 4.0.940 → 4.0.941

package/esm2022/lib/version.mjs

@@ -2,5 +2,5 @@
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-export const VERSION = '4.0.940';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVyc2lvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvdmVyc2lvbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7O0dBR0c7QUFDSCxNQUFNLENBQUMsTUFBTSxPQUFPLEdBQUcsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDdXJyZW50IHZlcnNpb24gb2YgdmFsdGVjaC1jb21wb25lbnRzLlxuICogVGhpcyBpcyBhdXRvbWF0aWNhbGx5IHVwZGF0ZWQgZHVyaW5nIHRoZSBwdWJsaXNoIHByb2Nlc3MuXG4gKi9cbmV4cG9ydCBjb25zdCBWRVJTSU9OID0gJzQuMC45NDAnO1xuIl19
+export const VERSION = '4.0.941';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVyc2lvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvdmVyc2lvbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7O0dBR0c7QUFDSCxNQUFNLENBQUMsTUFBTSxPQUFPLEdBQUcsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDdXJyZW50IHZlcnNpb24gb2YgdmFsdGVjaC1jb21wb25lbnRzLlxuICogVGhpcyBpcyBhdXRvbWF0aWNhbGx5IHVwZGF0ZWQgZHVyaW5nIHRoZSBwdWJsaXNoIHByb2Nlc3MuXG4gKi9cbmV4cG9ydCBjb25zdCBWRVJTSU9OID0gJzQuMC45NDEnO1xuIl19

package/fesm2022/valtech-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, inject, APP_INITIALIZER, ErrorHandler, Injectable, DestroyRef, Inject, signal, computed, PLATFORM_ID, isDevMode, Optional, runInInjectionContext, effect, Pipe, Component, Input, ChangeDetectionStrategy, input, output, Injector, TemplateRef, ViewContainerRef, Directive, ElementRef, Renderer2, HostListener, EventEmitter, Output, HostBinding, SecurityContext, NgZone, ViewChild, ChangeDetectorRef, ContentChild, model, ViewEncapsulation, untracked, viewChild, isSignal } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, APP_INITIALIZER, ErrorHandler, Injectable, DestroyRef, Inject, signal, computed, PLATFORM_ID, isDevMode, Optional, runInInjectionContext, effect, Pipe, Component, Input, ChangeDetectionStrategy, input, output, Injector, TemplateRef, ViewContainerRef, Directive, ElementRef, Renderer2, HostListener, EventEmitter, Output, HostBinding, SecurityContext, NgZone, ViewChild, ChangeDetectorRef, ContentChild, model, ViewEncapsulation, untracked, ViewChildren, viewChild, isSignal } from '@angular/core';
 import { BehaviorSubject, throwError, Subject, map, distinctUntilChanged, filter as filter$1, take as take$1, firstValueFrom, timeout as timeout$1, catchError as catchError$1, of, from, EMPTY, Observable, interval, defer, timer, merge, concat, debounceTime, switchMap as switchMap$1, takeUntil, isObservable, forkJoin, race, shareReplay as shareReplay$1, tap as tap$1 } from 'rxjs';
 import { catchError, switchMap, finalize, filter, take, timeout, map as map$1, tap, shareReplay, distinctUntilChanged as distinctUntilChanged$1, retry, debounceTime as debounceTime$1, takeUntil as takeUntil$1 } from 'rxjs/operators';
 import * as i1$3 from '@angular/common/http';
@@ -66,7 +66,7 @@ import fixWebmDuration from 'fix-webm-duration';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '4.0.940';
+const VERSION = '4.0.941';
 
 function evaluateValtechAccess(rule, context, features = {}, visitedFeatures = new Set()) {
     if (rule == null)
@@ -36880,7 +36880,8 @@ class FormComponent {
         /** Sugerencias descartadas por el usuario, para no volver a insistir. */
         this.suggestionDismissed = new Set();
     }
-    ngOnInit() {
+    /** Arma la definición de controles (valor inicial + validadores) desde `props`. */
+    buildFormControlsDef() {
         const formControls = {};
         this.props.sections.forEach(section => {
             section.fields.forEach(field => {
@@ -36903,7 +36904,38 @@ class FormComponent {
                 }
             });
         });
-        this.form = this.fb.group(formControls);
+        return formControls;
+    }
+    /**
+     * Reconstruye el `FormGroup` desde cero, con los valores iniciales de `props`
+     * actuales (no los que el usuario haya tecleado desde entonces).
+     *
+     * Existe para el caso en que Angular NO destruye el componente entre dos usos
+     * — típicamente `IonicRouteStrategy`, que cachea la página ruteada al navegar
+     * afuera y la reutiliza al volver sin correr `ngOnInit` de nuevo. Sin esto,
+     * un form de login mantiene lo que el usuario anterior tecleó después de
+     * cerrar sesión y volver a `/login`: el `FormGroup` se construyó UNA vez y
+     * nadie lo tocó desde entonces.
+     *
+     * Reconstruye el `FormGroup` entero (no `.reset(values)`) porque la
+     * definición trae `[valor, validators]` por control, no valores planos —
+     * reusar `buildFormControlsDef()` tal cual evita mantener dos formas de
+     * calcular "cuál es el valor inicial" que puedan desincronizarse.
+     *
+     * El caller (típicamente `val-login`, vía `ionViewWillEnter`) decide CUÁNDO
+     * llamarlo — acá no hay heurística de "cuándo resetear", porque un form de
+     * varios pasos sí podría querer conservar lo tecleado al volver a una
+     * pestaña.
+     */
+    resetForm() {
+        if (!this.form)
+            return;
+        this.form = this.fb.group(this.buildFormControlsDef());
+        this.value.set(this.form.getRawValue());
+        this.valid.set(this.form.valid);
+    }
+    ngOnInit() {
+        this.form = this.fb.group(this.buildFormControlsDef());
         this.props.sections.forEach(section => {
             section.fields
                 .filter(x => x.type === this.types.SELECT ||
@@ -50830,6 +50862,23 @@ class LoginComponent {
             queueMicrotask(() => this.openMFAVerifyModal());
         }
     }
+    /**
+     * Ionic (`IonicRouteStrategy`) no destruye la página de login al navegar
+     * afuera — la "detach"-ea y la reutiliza si el usuario vuelve a la misma
+     * ruta, así que `ngOnInit` no vuelve a correr. `val-form` arma su
+     * `FormGroup` UNA sola vez en su propio `ngOnInit`; sin este hook, cerrar
+     * sesión y volver a `/login` mostraba el email y la contraseña que la
+     * sesión anterior había tecleado.
+     *
+     * `ionViewWillEnter` es el gancho de Ionic pensado exactamente para esto:
+     * corre en CADA entrada a la vista, sea la primera vez o una reutilización
+     * desde caché. Ionic lo invoca por duck-typing sobre cualquier componente
+     * de la jerarquía que lo declare, sin necesidad de implementar la interfaz
+     * `ViewWillEnter` (mismo patrón que `SelectSearchComponent` en esta lib).
+     */
+    ionViewWillEnter() {
+        this.forms?.forEach((f) => f.resetForm());
+    }
     ngOnDestroy() {
         this.stopResendCooldown();
         this.stopResetResendCooldown();
@@ -50837,7 +50886,7 @@ class LoginComponent {
         this.stopListeningForOAuthReturn();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LoginComponent, isStandalone: true, selector: "val-login", inputs: { props: "props" }, outputs: { onSuccess: "onSuccess", onError: "onError", onMFARequired: "onMFARequired" }, ngImport: i0, template: "<div class=\"val-login\" [class.val-login--card]=\"config.showCard\">\n  <!-- Logo \u2014 default de marca (--main-logo) si el consumer no pasa logo -->\n  <div class=\"logo-container\">\n    <val-image [props]=\"resolvedLogo\" />\n  </div>\n\n  <!-- Login Form -->\n  <val-form [props]=\"loginFormProps()\" (onSubmit)=\"loginHandler($event)\" />\n\n  <!-- OAuth Section -->\n  @if (config.showOAuth && config.oauthProviders.length > 0) {\n  <div class=\"oauth-separator\">\n    <span>{{ t('orContinueWith') }}</span>\n  </div>\n\n  <div class=\"oauth-buttons\">\n    @for (provider of config.oauthProviders; track provider) {\n    <val-button\n      [props]=\"oauthButtonProps(provider)\"\n      (onClick)=\"loginWithOAuth(provider)\"\n    />\n    }\n  </div>\n  }\n\n  <!-- Register Link -->\n  @if (config.showRegister) {\n  <div class=\"auth-link\">\n    <ion-text color=\"dark\">\n      {{ t('noAccount') }}\n      <a (click)=\"openRegisterModal()\">{{ t('register') }}</a>\n    </ion-text>\n  </div>\n  }\n\n  <!-- Forgot Password Link -->\n  @if (config.showForgotPassword) {\n  <div class=\"auth-link forgot-password\">\n    <ion-text color=\"dark\">\n      {{ t('forgotLink') }}\n      <a (click)=\"openForgotPasswordModal()\">{{ t('recoverPassword') }}</a>\n    </ion-text>\n  </div>\n  }\n\n  <!-- Legal Notice -->\n  @if (props.legal) {\n  <div class=\"legal-notice\">\n    <ion-text color=\"dark\">\n      <p>\n        {{ t('legalPrefix') }} @if (resolvedCompanyLink) {\n        <a [href]=\"resolvedCompanyLink\" target=\"_blank\" rel=\"noopener noreferrer\"\n          ><strong>{{ props.legal.companyName }}</strong></a\n        >\n        } @else {\n        <strong>{{ props.legal.companyName }}</strong>\n        } {{ t('legalSuffix') }} @if (props.legal.termsLink) {\n        <a [href]=\"props.legal.termsLink\">{{ t('termsAndConditions') }}</a>\n        } @else {\n        <span>{{ t('termsAndConditions') }}</span>\n        } {{ t('and') }} @if (props.legal.privacyLink) {\n        <a [href]=\"props.legal.privacyLink\">{{ t('privacyPolicy') }}</a>\n        } @else {\n        <span>{{ t('privacyPolicy') }}</span>\n        }.\n      </p>\n    </ion-text>\n  </div>\n  }\n</div>\n\n<!-- Register Modal -->\n<ion-modal [isOpen]=\"isRegisterModalOpen\" (didDismiss)=\"closeRegisterModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" (click)=\"closeRegisterModal()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"registerFormProps()\" (onSubmit)=\"registerHandler($event)\" />\n        <div class=\"auth-link\">\n          <ion-text color=\"dark\">\n            {{ t('hasAccount') }}\n            <a (click)=\"onRegisterSwitchToLogin()\">{{ t('signIn') }}</a>\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Verify Email Modal -->\n<ion-modal [isOpen]=\"isVerifyModalOpen\" [backdropDismiss]=\"false\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" (click)=\"closeVerifyModal()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"verifyFormProps()\" (onSubmit)=\"verifyHandler($event)\" />\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('noCodeReceived') }} @if (resendCooldown > 0) {\n            <span class=\"cooldown\">{{ t('resendIn', { seconds: resendCooldown.toString() }) }}</span>\n            } @else {\n            <a (click)=\"resendCode()\">{{ t('resend') }}</a>\n            }\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Forgot Password Modal -->\n<ion-modal [isOpen]=\"isForgotPasswordModalOpen\" (didDismiss)=\"closeForgotPasswordModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" (click)=\"closeForgotPasswordModal()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"forgotPasswordFormProps()\" (onSubmit)=\"forgotPasswordHandler($event)\" />\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Reset Password Modal -->\n<ion-modal [isOpen]=\"isResetPasswordModalOpen\" [backdropDismiss]=\"false\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" (click)=\"closeResetPasswordModal()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"resetPasswordFormProps()\" (onSubmit)=\"resetPasswordHandler($event)\" />\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('noCodeReceived') }} @if (resetResendCooldown > 0) {\n            <span class=\"cooldown\">{{ t('resendIn', { seconds: resetResendCooldown.toString() }) }}</span>\n            } @else {\n            <a (click)=\"resendResetCode()\">{{ t('resend') }}</a>\n            }\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- MFA Verify Modal -->\n<ion-modal [isOpen]=\"isMFAVerifyModalOpen\" [backdropDismiss]=\"false\" (didDismiss)=\"onMFAVerifyDismissed()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" (click)=\"closeMFAVerifyModal()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"mfaVerifyFormProps()\" (onSubmit)=\"verifyMFAHandler($event)\" />\n        @if (mfaMethod() === 'TOTP') {\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            @if (mfaUseBackupCode()) {\n            <a (click)=\"toggleMFABackupCode()\">{{ t('mfaUseTotpAction') }}</a>\n            } @else { {{ t('mfaUseBackupLink') }}\n            <a (click)=\"toggleMFABackupCode()\">{{ t('mfaUseBackupAction') }}</a>\n            }\n          </ion-text>\n        </div>\n        }\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('mfaLostBackupLink') }}\n            <a (click)=\"openMFAResetModal()\">{{ t('mfaResetAction') }}</a>\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- MFA Reset Modal (B) \u2014 recovery por email cuando no hay backup codes -->\n<ion-modal [isOpen]=\"isMFAResetModalOpen\" [backdropDismiss]=\"false\" (didDismiss)=\"closeMFAResetModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" (click)=\"closeMFAResetModal()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        @if (mfaResetStep() === 'request') {\n        <val-form [props]=\"mfaResetRequestFormProps()\" (onSubmit)=\"mfaResetRequestHandler($event)\" />\n        } @else {\n        <val-form [props]=\"mfaResetConfirmFormProps()\" (onSubmit)=\"mfaResetConfirmHandler($event)\" />\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".val-login{width:100%}.val-login--card{padding:1rem .75rem;background:var(--ion-color-light);border-radius:16px;box-shadow:0 2px 8px #00000014}.logo-container{max-width:130px;margin-bottom:1.5rem}.auth-link{text-align:center;margin-top:1rem;font-size:.9rem}.auth-link a{color:var(--ion-color-primary);text-decoration:none;font-weight:500;cursor:pointer}.auth-link a:hover{text-decoration:underline}.oauth-separator{display:flex;align-items:center;margin:1.5rem 0}.oauth-separator:before,.oauth-separator:after{content:\"\";flex:1;height:1px;background:var(--ion-color-medium-tint)}.oauth-separator span{padding:0 1rem;color:var(--ion-color-dark);font-size:.85rem}.oauth-buttons{margin-bottom:1rem;display:flex;flex-direction:column;gap:.5rem}.oauth-buttons val-button{--border-width: 1px}.oauth-buttons ion-icon{font-size:1.2rem;margin-right:.5rem}.legal-notice{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--ion-color-medium-tint)}.legal-notice p{font-size:.75rem;line-height:1.5;text-align:center;margin:0}.legal-notice a{color:var(--ion-color-primary);text-decoration:none}.legal-notice a:hover{text-decoration:underline}.resend-link{text-align:center;margin-top:1rem;font-size:.9rem}.resend-link a{color:var(--ion-color-primary);cursor:pointer;font-weight:500}.resend-link a:hover{text-decoration:underline}.resend-link .cooldown{color:var(--ion-color-medium)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onValueChange", "onInvalid", "onSelectChange"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LoginComponent, isStandalone: true, selector: "val-login", inputs: { props: "props" }, outputs: { onSuccess: "onSuccess", onError: "onError", onMFARequired: "onMFARequired" }, viewQueries: [{ propertyName: "forms", predicate: FormComponent, descendants: true }], ngImport: i0, template: "<div class=\"val-login\" [class.val-login--card]=\"config.showCard\">\n  <!-- Logo \u2014 default de marca (--main-logo) si el consumer no pasa logo -->\n  <div class=\"logo-container\">\n    <val-image [props]=\"resolvedLogo\" />\n  </div>\n\n  <!-- Login Form -->\n  <val-form [props]=\"loginFormProps()\" (onSubmit)=\"loginHandler($event)\" />\n\n  <!-- OAuth Section -->\n  @if (config.showOAuth && config.oauthProviders.length > 0) {\n  <div class=\"oauth-separator\">\n    <span>{{ t('orContinueWith') }}</span>\n  </div>\n\n  <div class=\"oauth-buttons\">\n    @for (provider of config.oauthProviders; track provider) {\n    <val-button\n      [props]=\"oauthButtonProps(provider)\"\n      (onClick)=\"loginWithOAuth(provider)\"\n    />\n    }\n  </div>\n  }\n\n  <!-- Register Link -->\n  @if (config.showRegister) {\n  <div class=\"auth-link\">\n    <ion-text color=\"dark\">\n      {{ t('noAccount') }}\n      <a (click)=\"openRegisterModal()\">{{ t('register') }}</a>\n    </ion-text>\n  </div>\n  }\n\n  <!-- Forgot Password Link -->\n  @if (config.showForgotPassword) {\n  <div class=\"auth-link forgot-password\">\n    <ion-text color=\"dark\">\n      {{ t('forgotLink') }}\n      <a (click)=\"openForgotPasswordModal()\">{{ t('recoverPassword') }}</a>\n    </ion-text>\n  </div>\n  }\n\n  <!-- Legal Notice -->\n  @if (props.legal) {\n  <div class=\"legal-notice\">\n    <ion-text color=\"dark\">\n      <p>\n        {{ t('legalPrefix') }} @if (resolvedCompanyLink) {\n        <a [href]=\"resolvedCompanyLink\" target=\"_blank\" rel=\"noopener noreferrer\"\n          ><strong>{{ props.legal.companyName }}</strong></a\n        >\n        } @else {\n        <strong>{{ props.legal.companyName }}</strong>\n        } {{ t('legalSuffix') }} @if (props.legal.termsLink) {\n        <a [href]=\"props.legal.termsLink\">{{ t('termsAndConditions') }}</a>\n        } @else {\n        <span>{{ t('termsAndConditions') }}</span>\n        } {{ t('and') }} @if (props.legal.privacyLink) {\n        <a [href]=\"props.legal.privacyLink\">{{ t('privacyPolicy') }}</a>\n        } @else {\n        <span>{{ t('privacyPolicy') }}</span>\n        }.\n      </p>\n    </ion-text>\n  </div>\n  }\n</div>\n\n<!-- Register Modal -->\n<ion-modal [isOpen]=\"isRegisterModalOpen\" (didDismiss)=\"closeRegisterModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" (click)=\"closeRegisterModal()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"registerFormProps()\" (onSubmit)=\"registerHandler($event)\" />\n        <div class=\"auth-link\">\n          <ion-text color=\"dark\">\n            {{ t('hasAccount') }}\n            <a (click)=\"onRegisterSwitchToLogin()\">{{ t('signIn') }}</a>\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Verify Email Modal -->\n<ion-modal [isOpen]=\"isVerifyModalOpen\" [backdropDismiss]=\"false\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" (click)=\"closeVerifyModal()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"verifyFormProps()\" (onSubmit)=\"verifyHandler($event)\" />\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('noCodeReceived') }} @if (resendCooldown > 0) {\n            <span class=\"cooldown\">{{ t('resendIn', { seconds: resendCooldown.toString() }) }}</span>\n            } @else {\n            <a (click)=\"resendCode()\">{{ t('resend') }}</a>\n            }\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Forgot Password Modal -->\n<ion-modal [isOpen]=\"isForgotPasswordModalOpen\" (didDismiss)=\"closeForgotPasswordModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" (click)=\"closeForgotPasswordModal()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"forgotPasswordFormProps()\" (onSubmit)=\"forgotPasswordHandler($event)\" />\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Reset Password Modal -->\n<ion-modal [isOpen]=\"isResetPasswordModalOpen\" [backdropDismiss]=\"false\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" (click)=\"closeResetPasswordModal()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"resetPasswordFormProps()\" (onSubmit)=\"resetPasswordHandler($event)\" />\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('noCodeReceived') }} @if (resetResendCooldown > 0) {\n            <span class=\"cooldown\">{{ t('resendIn', { seconds: resetResendCooldown.toString() }) }}</span>\n            } @else {\n            <a (click)=\"resendResetCode()\">{{ t('resend') }}</a>\n            }\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- MFA Verify Modal -->\n<ion-modal [isOpen]=\"isMFAVerifyModalOpen\" [backdropDismiss]=\"false\" (didDismiss)=\"onMFAVerifyDismissed()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" (click)=\"closeMFAVerifyModal()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"mfaVerifyFormProps()\" (onSubmit)=\"verifyMFAHandler($event)\" />\n        @if (mfaMethod() === 'TOTP') {\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            @if (mfaUseBackupCode()) {\n            <a (click)=\"toggleMFABackupCode()\">{{ t('mfaUseTotpAction') }}</a>\n            } @else { {{ t('mfaUseBackupLink') }}\n            <a (click)=\"toggleMFABackupCode()\">{{ t('mfaUseBackupAction') }}</a>\n            }\n          </ion-text>\n        </div>\n        }\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('mfaLostBackupLink') }}\n            <a (click)=\"openMFAResetModal()\">{{ t('mfaResetAction') }}</a>\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- MFA Reset Modal (B) \u2014 recovery por email cuando no hay backup codes -->\n<ion-modal [isOpen]=\"isMFAResetModalOpen\" [backdropDismiss]=\"false\" (didDismiss)=\"closeMFAResetModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" (click)=\"closeMFAResetModal()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        @if (mfaResetStep() === 'request') {\n        <val-form [props]=\"mfaResetRequestFormProps()\" (onSubmit)=\"mfaResetRequestHandler($event)\" />\n        } @else {\n        <val-form [props]=\"mfaResetConfirmFormProps()\" (onSubmit)=\"mfaResetConfirmHandler($event)\" />\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".val-login{width:100%}.val-login--card{padding:1rem .75rem;background:var(--ion-color-light);border-radius:16px;box-shadow:0 2px 8px #00000014}.logo-container{max-width:130px;margin-bottom:1.5rem}.auth-link{text-align:center;margin-top:1rem;font-size:.9rem}.auth-link a{color:var(--ion-color-primary);text-decoration:none;font-weight:500;cursor:pointer}.auth-link a:hover{text-decoration:underline}.oauth-separator{display:flex;align-items:center;margin:1.5rem 0}.oauth-separator:before,.oauth-separator:after{content:\"\";flex:1;height:1px;background:var(--ion-color-medium-tint)}.oauth-separator span{padding:0 1rem;color:var(--ion-color-dark);font-size:.85rem}.oauth-buttons{margin-bottom:1rem;display:flex;flex-direction:column;gap:.5rem}.oauth-buttons val-button{--border-width: 1px}.oauth-buttons ion-icon{font-size:1.2rem;margin-right:.5rem}.legal-notice{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--ion-color-medium-tint)}.legal-notice p{font-size:.75rem;line-height:1.5;text-align:center;margin:0}.legal-notice a{color:var(--ion-color-primary);text-decoration:none}.legal-notice a:hover{text-decoration:underline}.resend-link{text-align:center;margin-top:1rem;font-size:.9rem}.resend-link a{color:var(--ion-color-primary);cursor:pointer;font-weight:500}.resend-link a:hover{text-decoration:underline}.resend-link .cooldown{color:var(--ion-color-medium)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onValueChange", "onInvalid", "onSelectChange"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoginComponent, decorators: [{
             type: Component,
@@ -50855,7 +50904,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ImageComponent,
                         ButtonComponent,
                     ], template: "<div class=\"val-login\" [class.val-login--card]=\"config.showCard\">\n  <!-- Logo \u2014 default de marca (--main-logo) si el consumer no pasa logo -->\n  <div class=\"logo-container\">\n    <val-image [props]=\"resolvedLogo\" />\n  </div>\n\n  <!-- Login Form -->\n  <val-form [props]=\"loginFormProps()\" (onSubmit)=\"loginHandler($event)\" />\n\n  <!-- OAuth Section -->\n  @if (config.showOAuth && config.oauthProviders.length > 0) {\n  <div class=\"oauth-separator\">\n    <span>{{ t('orContinueWith') }}</span>\n  </div>\n\n  <div class=\"oauth-buttons\">\n    @for (provider of config.oauthProviders; track provider) {\n    <val-button\n      [props]=\"oauthButtonProps(provider)\"\n      (onClick)=\"loginWithOAuth(provider)\"\n    />\n    }\n  </div>\n  }\n\n  <!-- Register Link -->\n  @if (config.showRegister) {\n  <div class=\"auth-link\">\n    <ion-text color=\"dark\">\n      {{ t('noAccount') }}\n      <a (click)=\"openRegisterModal()\">{{ t('register') }}</a>\n    </ion-text>\n  </div>\n  }\n\n  <!-- Forgot Password Link -->\n  @if (config.showForgotPassword) {\n  <div class=\"auth-link forgot-password\">\n    <ion-text color=\"dark\">\n      {{ t('forgotLink') }}\n      <a (click)=\"openForgotPasswordModal()\">{{ t('recoverPassword') }}</a>\n    </ion-text>\n  </div>\n  }\n\n  <!-- Legal Notice -->\n  @if (props.legal) {\n  <div class=\"legal-notice\">\n    <ion-text color=\"dark\">\n      <p>\n        {{ t('legalPrefix') }} @if (resolvedCompanyLink) {\n        <a [href]=\"resolvedCompanyLink\" target=\"_blank\" rel=\"noopener noreferrer\"\n          ><strong>{{ props.legal.companyName }}</strong></a\n        >\n        } @else {\n        <strong>{{ props.legal.companyName }}</strong>\n        } {{ t('legalSuffix') }} @if (props.legal.termsLink) {\n        <a [href]=\"props.legal.termsLink\">{{ t('termsAndConditions') }}</a>\n        } @else {\n        <span>{{ t('termsAndConditions') }}</span>\n        } {{ t('and') }} @if (props.legal.privacyLink) {\n        <a [href]=\"props.legal.privacyLink\">{{ t('privacyPolicy') }}</a>\n        } @else {\n        <span>{{ t('privacyPolicy') }}</span>\n        }.\n      </p>\n    </ion-text>\n  </div>\n  }\n</div>\n\n<!-- Register Modal -->\n<ion-modal [isOpen]=\"isRegisterModalOpen\" (didDismiss)=\"closeRegisterModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" (click)=\"closeRegisterModal()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"registerFormProps()\" (onSubmit)=\"registerHandler($event)\" />\n        <div class=\"auth-link\">\n          <ion-text color=\"dark\">\n            {{ t('hasAccount') }}\n            <a (click)=\"onRegisterSwitchToLogin()\">{{ t('signIn') }}</a>\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Verify Email Modal -->\n<ion-modal [isOpen]=\"isVerifyModalOpen\" [backdropDismiss]=\"false\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" (click)=\"closeVerifyModal()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"verifyFormProps()\" (onSubmit)=\"verifyHandler($event)\" />\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('noCodeReceived') }} @if (resendCooldown > 0) {\n            <span class=\"cooldown\">{{ t('resendIn', { seconds: resendCooldown.toString() }) }}</span>\n            } @else {\n            <a (click)=\"resendCode()\">{{ t('resend') }}</a>\n            }\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Forgot Password Modal -->\n<ion-modal [isOpen]=\"isForgotPasswordModalOpen\" (didDismiss)=\"closeForgotPasswordModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" (click)=\"closeForgotPasswordModal()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"forgotPasswordFormProps()\" (onSubmit)=\"forgotPasswordHandler($event)\" />\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Reset Password Modal -->\n<ion-modal [isOpen]=\"isResetPasswordModalOpen\" [backdropDismiss]=\"false\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" (click)=\"closeResetPasswordModal()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"resetPasswordFormProps()\" (onSubmit)=\"resetPasswordHandler($event)\" />\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('noCodeReceived') }} @if (resetResendCooldown > 0) {\n            <span class=\"cooldown\">{{ t('resendIn', { seconds: resetResendCooldown.toString() }) }}</span>\n            } @else {\n            <a (click)=\"resendResetCode()\">{{ t('resend') }}</a>\n            }\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- MFA Verify Modal -->\n<ion-modal [isOpen]=\"isMFAVerifyModalOpen\" [backdropDismiss]=\"false\" (didDismiss)=\"onMFAVerifyDismissed()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" (click)=\"closeMFAVerifyModal()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"mfaVerifyFormProps()\" (onSubmit)=\"verifyMFAHandler($event)\" />\n        @if (mfaMethod() === 'TOTP') {\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            @if (mfaUseBackupCode()) {\n            <a (click)=\"toggleMFABackupCode()\">{{ t('mfaUseTotpAction') }}</a>\n            } @else { {{ t('mfaUseBackupLink') }}\n            <a (click)=\"toggleMFABackupCode()\">{{ t('mfaUseBackupAction') }}</a>\n            }\n          </ion-text>\n        </div>\n        }\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('mfaLostBackupLink') }}\n            <a (click)=\"openMFAResetModal()\">{{ t('mfaResetAction') }}</a>\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- MFA Reset Modal (B) \u2014 recovery por email cuando no hay backup codes -->\n<ion-modal [isOpen]=\"isMFAResetModalOpen\" [backdropDismiss]=\"false\" (didDismiss)=\"closeMFAResetModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" (click)=\"closeMFAResetModal()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        @if (mfaResetStep() === 'request') {\n        <val-form [props]=\"mfaResetRequestFormProps()\" (onSubmit)=\"mfaResetRequestHandler($event)\" />\n        } @else {\n        <val-form [props]=\"mfaResetConfirmFormProps()\" (onSubmit)=\"mfaResetConfirmHandler($event)\" />\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".val-login{width:100%}.val-login--card{padding:1rem .75rem;background:var(--ion-color-light);border-radius:16px;box-shadow:0 2px 8px #00000014}.logo-container{max-width:130px;margin-bottom:1.5rem}.auth-link{text-align:center;margin-top:1rem;font-size:.9rem}.auth-link a{color:var(--ion-color-primary);text-decoration:none;font-weight:500;cursor:pointer}.auth-link a:hover{text-decoration:underline}.oauth-separator{display:flex;align-items:center;margin:1.5rem 0}.oauth-separator:before,.oauth-separator:after{content:\"\";flex:1;height:1px;background:var(--ion-color-medium-tint)}.oauth-separator span{padding:0 1rem;color:var(--ion-color-dark);font-size:.85rem}.oauth-buttons{margin-bottom:1rem;display:flex;flex-direction:column;gap:.5rem}.oauth-buttons val-button{--border-width: 1px}.oauth-buttons ion-icon{font-size:1.2rem;margin-right:.5rem}.legal-notice{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--ion-color-medium-tint)}.legal-notice p{font-size:.75rem;line-height:1.5;text-align:center;margin:0}.legal-notice a{color:var(--ion-color-primary);text-decoration:none}.legal-notice a:hover{text-decoration:underline}.resend-link{text-align:center;margin-top:1rem;font-size:.9rem}.resend-link a{color:var(--ion-color-primary);cursor:pointer;font-weight:500}.resend-link a:hover{text-decoration:underline}.resend-link .cooldown{color:var(--ion-color-medium)}\n"] }]
-        }], propDecorators: { props: [{
+        }], propDecorators: { forms: [{
+                type: ViewChildren,
+                args: [FormComponent]
+            }], props: [{
                 type: Input
             }], onSuccess: [{
                 type: Output