valtech-components 2.0.856 → 2.0.858

package/fesm2022/valtech-components.mjs

@@ -53,7 +53,7 @@ import 'prismjs/components/prism-json';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '2.0.856';
+const VERSION = '2.0.858';
 
 /**
  * Servicio para gestionar presets de componentes.
@@ -31276,6 +31276,12 @@ class MfaModalComponent {
         this._isOpen = false;
         /** Emite cuando el estado MFA cambia (habilitado / deshabilitado). */
         this.changed = new EventEmitter();
+        /**
+         * Emitido cuando un setup MFA se confirma exitosamente y el modal fue abierto
+         * vía deep-link (con `prefillCode`). El host puede usarlo para cerrar el
+         * modal y navegar (ej. a home) en lugar de quedarse en la página de Security.
+         */
+        this.enabledViaDeeplink = new EventEmitter();
         /** Emite cuando el user cierra el modal (botón X o backdrop). */
         this.dismissed = new EventEmitter();
         this.auth = inject(AuthService);
@@ -31506,13 +31512,22 @@ class MfaModalComponent {
             return;
         }
         this.working.set(true);
+        const cameFromDeeplink = !!this.prefillCode;
         this.auth.confirmMFA(code).subscribe({
             next: res => {
                 this.working.set(false);
                 if (res.mfaEnabled) {
                     this.showToast(this.t('mfaEnabledOk'));
                     this.changed.emit();
-                    this.resolveStatus();
+                    if (cameFromDeeplink) {
+                        // El user llegó vía link del email → el host se encarga de cerrar
+                        // el modal y navegar (ej. a home). No resolvemos status acá porque
+                        // implicaría dejar el modal abierto mostrando el estado nuevo.
+                        this.enabledViaDeeplink.emit();
+                    }
+                    else {
+                        this.resolveStatus();
+                    }
                 }
             },
             error: err => {
@@ -31675,7 +31690,7 @@ class MfaModalComponent {
         this.toast.show({ message, duration: 3500 });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MfaModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MfaModalComponent, isStandalone: true, selector: "val-mfa-modal", inputs: { isOpen: "isOpen", prefillCode: "prefillCode" }, outputs: { changed: "changed", dismissed: "dismissed" }, ngImport: i0, template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" (click)=\"close()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content class=\"ion-padding\">\n      <section class=\"mfa-modal\">\n        <val-display [props]=\"{ content: t('mfaManageTitle'), size: 'small', color: 'dark' }\" />\n\n        @switch (step()) { @case ('loading') {\n        <div class=\"mfa-loading\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n        </div>\n        } @case ('status') { @if (mfaEnabled()) {\n        <p class=\"mfa-status mfa-status--on\">{{ t('mfaEnabledLabel') }} \u00B7 {{ methodLabel(mfaMethod()) }}</p>\n\n        @if (mfaMethod() === 'TOTP') {\n        <div class=\"mfa-block\">\n          <h3>{{ t('mfaBackupCodesTitle') }}</h3>\n          <p class=\"mfa-text\">{{ t('mfaBackupCodesAvailable') }}: {{ backupCodesCount() }}</p>\n\n          @if (regeneratedCodes(); as codes) {\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesSaveWarning') }} {{ t('mfaBackupCodesExplain') }}</p>\n          </div>\n          <div class=\"mfa-codes\">\n            @for (code of codes; track code) {\n            <code class=\"mfa-code\">{{ code }}</code>\n            }\n          </div>\n          <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" (click)=\"copyCodes(codes)\">\n            {{ t('mfaCopyCodes') }}\n          </ion-button>\n          } @else { @if (backupCodesCount() < 3) {\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesLow') }}</p>\n          </div>\n          }\n          <ion-button\n            expand=\"block\"\n            color=\"dark\"\n            fill=\"outline\"\n            [disabled]=\"working()\"\n            (click)=\"regenerateBackupCodes()\"\n          >\n            @if (working()) {\n            <ion-spinner name=\"crescent\"></ion-spinner>\n            } @else { {{ t('mfaRegenerateCodes') }} }\n          </ion-button>\n          }\n        </div>\n        }\n\n        <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" (click)=\"goToDisable()\">\n          {{ t('mfaDisableButton') }}\n        </ion-button>\n        } @else {\n        <p class=\"mfa-status mfa-status--off\">{{ t('mfaDisabledLabel') }}</p>\n        <p class=\"mfa-text\">{{ t('mfaDisabledHint') }}</p>\n        <ion-button expand=\"block\" (click)=\"goToMethodSelect()\"> {{ t('mfaEnableButton') }} </ion-button>\n        } } @case ('method-select') {\n        <val-title [props]=\"{ content: t('mfaEnableTitle'), size: 'large', color: '', bold: false }\" />\n        <p class=\"mfa-text\">{{ t('mfaMethodPrompt') }}</p>\n\n        <ion-radio-group [value]=\"selectedMethod()\" (ionChange)=\"selectedMethod.set($event.detail.value)\">\n          <ion-item>\n            <ion-radio slot=\"start\" value=\"TOTP\"></ion-radio>\n            <ion-label>\n              <strong>{{ t('mfaMethodTotp') }}</strong>\n              <p>{{ t('mfaMethodTotpHint') }}</p>\n            </ion-label>\n          </ion-item>\n          <ion-item>\n            <ion-radio slot=\"start\" value=\"EMAIL\"></ion-radio>\n            <ion-label>\n              <strong>{{ t('mfaMethodEmail') }}</strong>\n              <p>{{ t('mfaMethodEmailHint') }}</p>\n            </ion-label>\n          </ion-item>\n          <ion-item>\n            <ion-radio slot=\"start\" value=\"SMS\"></ion-radio>\n            <ion-label>\n              <strong>{{ t('mfaMethodSms') }}</strong>\n              <p>{{ t('mfaMethodSmsHint') }}</p>\n            </ion-label>\n          </ion-item>\n        </ion-radio-group>\n\n        @if (selectedMethod() === 'SMS' && !userPhone()) {\n        <ion-input\n          label=\"{{ t('mfaPhoneLabel') }}\"\n          labelPlacement=\"floating\"\n          fill=\"outline\"\n          type=\"tel\"\n          placeholder=\"+56912345678\"\n          [formControl]=\"phoneControl\"\n        ></ion-input>\n        @if (phoneControl.invalid && phoneControl.touched) {\n        <p class=\"mfa-error\">{{ t('mfaPhoneInvalid') }}</p>\n        } } @if (selectedMethod() === 'SMS' && userPhone(); as phone) {\n        <p class=\"mfa-text\">{{ t('mfaPhoneRegistered') }}: {{ phone }}</p>\n        }\n\n        <ion-button expand=\"block\" [disabled]=\"working()\" (click)=\"proceedWithMethod()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaContinue') }} }\n        </ion-button>\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('totp-setup') {\n        <val-title [props]=\"{ content: t('mfaTotpSetupTitle'), size: 'large', color: '', bold: false }\" />\n        <p class=\"mfa-text\">{{ t('mfaTotpStep1') }}</p>\n\n        @if (totpQr(); as qr) {\n        <div class=\"mfa-qr\">\n          <val-qr-code [props]=\"{ qr: qr }\" />\n        </div>\n        } @if (totpSetup(); as setup) {\n        <p class=\"mfa-text\">{{ t('mfaTotpManualEntry') }}</p>\n        <div class=\"mfa-secret-row\">\n          <code class=\"mfa-secret\">{{ setup.secret }}</code>\n          <ion-button fill=\"clear\" size=\"small\" (click)=\"copySecret(setup.secret)\" [attr.aria-label]=\"t('copy')\">\n            @if (copiedSecret()) {\n            <ion-icon name=\"checkmark-outline\"></ion-icon>\n            } @else {\n            <ion-icon name=\"copy-outline\"></ion-icon>\n            }\n          </ion-button>\n        </div>\n\n        <p class=\"mfa-text\">{{ t('mfaTotpStep2') }}</p>\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n\n        <ion-button expand=\"block\" [disabled]=\"working()\" (click)=\"verifyTotp()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaTotpVerify') }} }\n        </ion-button>\n\n        <div class=\"mfa-backup\">\n          <h3>{{ t('mfaBackupCodesTitle') }}</h3>\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesSaveWarning') }} {{ t('mfaBackupCodesExplain') }}</p>\n          </div>\n          <div class=\"mfa-codes\">\n            @for (code of setup.backupCodes; track code) {\n            <code class=\"mfa-code\">{{ code }}</code>\n            }\n          </div>\n          <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" (click)=\"copyCodes(setup.backupCodes)\">\n            {{ t('mfaCopyCodes') }}\n          </ion-button>\n        </div>\n        }\n\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('code-confirm') {\n        <val-title [props]=\"{ content: t('mfaConfirmTitle'), size: 'large', color: '', bold: false }\" />\n        <p class=\"mfa-text\">\n          {{ selectedMethod() === 'EMAIL' ? t('mfaConfirmPromptEmail') : t('mfaConfirmPromptSms') }}\n        </p>\n\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n\n        <ion-button expand=\"block\" [disabled]=\"working()\" (click)=\"confirmCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaConfirmButton') }} }\n        </ion-button>\n\n        <p class=\"mfa-resend\">\n          {{ t('mfaNoCode') }} @if (resendCooldown() > 0) {\n          <span class=\"mfa-text\">{{ t('mfaResendIn') }} {{ resendCooldown() }}s</span>\n          } @else {\n          <a (click)=\"resendCode()\">{{ t('mfaResend') }}</a>\n          }\n        </p>\n\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('disable') { @if (hasPassword()) {\n        <val-form [props]=\"disableFormProps()\" (onSubmit)=\"onDisableSubmit($event)\" />\n        } @else if (mfaMethod() === 'TOTP') {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        <p class=\"mfa-text\">{{ t('mfaDisableTotpPrompt') }}</p>\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n        <ion-button expand=\"block\" [disabled]=\"working()\" (click)=\"disableWithMfaCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableButton') }} }\n        </ion-button>\n        } @else {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        <p class=\"mfa-text\">{{ t('mfaDisableNeedsPassword') }}</p>\n        }\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".mfa-modal{display:flex;flex-direction:column;gap:14px;padding-top:4px}.mfa-loading{display:flex;justify-content:center;padding:40px 0}.mfa-status{display:inline-flex;align-items:center;width:fit-content;padding:4px 10px;border-radius:999px;font-size:13px;font-weight:600;margin:0}.mfa-status--on{color:var(--ion-color-success-shade);background:rgba(var(--ion-color-success-rgb),.12)}.mfa-status--off{color:var(--ion-color-medium-shade);background:var(--ion-color-light)}.mfa-secret-row{display:flex;align-items:center;gap:8px}.mfa-secret-row .mfa-secret{flex:1;margin:0}.mfa-secret-row ion-button{flex-shrink:0;--color: var(--ion-color-dark);margin:0}.mfa-text{color:var(--ion-color-dark);font-size:14px;margin:0}.mfa-error{color:var(--ion-color-danger);font-size:13px;margin:4px 0 0}.mfa-block,.mfa-backup{display:flex;flex-direction:column;gap:12px}.mfa-block{padding:16px;border-radius:14px;background:var(--ion-color-light)}.mfa-block h3,.mfa-backup h3{font-size:15px;font-weight:600;margin:0;color:var(--ion-color-dark)}.mfa-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:10px;background:var(--ion-color-light);border-left:3px solid var(--ion-color-primary)}.mfa-alert ion-icon{font-size:20px;color:var(--ion-color-primary);flex-shrink:0;margin-top:1px}.mfa-alert p{margin:0;font-size:13px;line-height:1.45;color:var(--ion-color-dark)}.mfa-qr{display:flex;justify-content:center;padding:8px 0}.mfa-secret{display:block;padding:10px 12px;border-radius:8px;background:var(--ion-color-light);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;letter-spacing:.04em;word-break:break-all;text-align:center}.mfa-pin{display:flex;justify-content:center;padding:8px 0}.mfa-codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px;border-radius:12px;background:var(--ion-color-light)}.mfa-code{padding:8px;border-radius:6px;background:var(--ion-background-color, #fff);color:var(--ion-color-dark);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;text-align:center}.mfa-resend{text-align:center;font-size:14px;color:var(--ion-color-dark);margin:4px 0}.mfa-resend a{color:var(--ion-color-primary);cursor:pointer;font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "errorText", "helperText", "name", "value"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onInvalid", "onSelectChange"] }, { kind: "component", type: QrCodeComponent, selector: "val-qr-code", inputs: ["props"], outputs: ["actionComplete", "imageLoad", "imageError"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: PinInputComponent, selector: "val-pin-input", inputs: ["props"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MfaModalComponent, isStandalone: true, selector: "val-mfa-modal", inputs: { isOpen: "isOpen", prefillCode: "prefillCode" }, outputs: { changed: "changed", enabledViaDeeplink: "enabledViaDeeplink", dismissed: "dismissed" }, ngImport: i0, template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" (click)=\"close()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content class=\"ion-padding\">\n      <section class=\"mfa-modal\">\n        <val-display [props]=\"{ content: t('mfaManageTitle'), size: 'small', color: 'dark' }\" />\n\n        @switch (step()) { @case ('loading') {\n        <div class=\"mfa-loading\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n        </div>\n        } @case ('status') { @if (mfaEnabled()) {\n        <p class=\"mfa-status mfa-status--on\">{{ t('mfaEnabledLabel') }} \u00B7 {{ methodLabel(mfaMethod()) }}</p>\n\n        @if (mfaMethod() === 'TOTP') {\n        <div class=\"mfa-block\">\n          <h3>{{ t('mfaBackupCodesTitle') }}</h3>\n          <p class=\"mfa-text\">{{ t('mfaBackupCodesAvailable') }}: {{ backupCodesCount() }}</p>\n\n          @if (regeneratedCodes(); as codes) {\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesSaveWarning') }} {{ t('mfaBackupCodesExplain') }}</p>\n          </div>\n          <div class=\"mfa-codes\">\n            @for (code of codes; track code) {\n            <code class=\"mfa-code\">{{ code }}</code>\n            }\n          </div>\n          <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" (click)=\"copyCodes(codes)\">\n            {{ t('mfaCopyCodes') }}\n          </ion-button>\n          } @else { @if (backupCodesCount() < 3) {\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesLow') }}</p>\n          </div>\n          }\n          <ion-button\n            expand=\"block\"\n            color=\"dark\"\n            fill=\"outline\"\n            [disabled]=\"working()\"\n            (click)=\"regenerateBackupCodes()\"\n          >\n            @if (working()) {\n            <ion-spinner name=\"crescent\"></ion-spinner>\n            } @else { {{ t('mfaRegenerateCodes') }} }\n          </ion-button>\n          }\n        </div>\n        }\n\n        <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" (click)=\"goToDisable()\">\n          {{ t('mfaDisableButton') }}\n        </ion-button>\n        } @else {\n        <p class=\"mfa-status mfa-status--off\">{{ t('mfaDisabledLabel') }}</p>\n        <p class=\"mfa-text\">{{ t('mfaDisabledHint') }}</p>\n        <ion-button expand=\"block\" (click)=\"goToMethodSelect()\"> {{ t('mfaEnableButton') }} </ion-button>\n        } } @case ('method-select') {\n        <val-title [props]=\"{ content: t('mfaEnableTitle'), size: 'large', color: '', bold: false }\" />\n        <p class=\"mfa-text\">{{ t('mfaMethodPrompt') }}</p>\n\n        <ion-radio-group [value]=\"selectedMethod()\" (ionChange)=\"selectedMethod.set($event.detail.value)\">\n          <ion-item>\n            <ion-radio slot=\"start\" value=\"TOTP\"></ion-radio>\n            <ion-label>\n              <strong>{{ t('mfaMethodTotp') }}</strong>\n              <p>{{ t('mfaMethodTotpHint') }}</p>\n            </ion-label>\n          </ion-item>\n          <ion-item>\n            <ion-radio slot=\"start\" value=\"EMAIL\"></ion-radio>\n            <ion-label>\n              <strong>{{ t('mfaMethodEmail') }}</strong>\n              <p>{{ t('mfaMethodEmailHint') }}</p>\n            </ion-label>\n          </ion-item>\n          <ion-item>\n            <ion-radio slot=\"start\" value=\"SMS\"></ion-radio>\n            <ion-label>\n              <strong>{{ t('mfaMethodSms') }}</strong>\n              <p>{{ t('mfaMethodSmsHint') }}</p>\n            </ion-label>\n          </ion-item>\n        </ion-radio-group>\n\n        @if (selectedMethod() === 'SMS' && !userPhone()) {\n        <ion-input\n          label=\"{{ t('mfaPhoneLabel') }}\"\n          labelPlacement=\"floating\"\n          fill=\"outline\"\n          type=\"tel\"\n          placeholder=\"+56912345678\"\n          [formControl]=\"phoneControl\"\n        ></ion-input>\n        @if (phoneControl.invalid && phoneControl.touched) {\n        <p class=\"mfa-error\">{{ t('mfaPhoneInvalid') }}</p>\n        } } @if (selectedMethod() === 'SMS' && userPhone(); as phone) {\n        <p class=\"mfa-text\">{{ t('mfaPhoneRegistered') }}: {{ phone }}</p>\n        }\n\n        <ion-button expand=\"block\" [disabled]=\"working()\" (click)=\"proceedWithMethod()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaContinue') }} }\n        </ion-button>\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('totp-setup') {\n        <val-title [props]=\"{ content: t('mfaTotpSetupTitle'), size: 'large', color: '', bold: false }\" />\n        <p class=\"mfa-text\">{{ t('mfaTotpStep1') }}</p>\n\n        @if (totpQr(); as qr) {\n        <div class=\"mfa-qr\">\n          <val-qr-code [props]=\"{ qr: qr }\" />\n        </div>\n        } @if (totpSetup(); as setup) {\n        <p class=\"mfa-text\">{{ t('mfaTotpManualEntry') }}</p>\n        <div class=\"mfa-secret-row\">\n          <code class=\"mfa-secret\">{{ setup.secret }}</code>\n          <ion-button fill=\"clear\" size=\"small\" (click)=\"copySecret(setup.secret)\" [attr.aria-label]=\"t('copy')\">\n            @if (copiedSecret()) {\n            <ion-icon name=\"checkmark-outline\"></ion-icon>\n            } @else {\n            <ion-icon name=\"copy-outline\"></ion-icon>\n            }\n          </ion-button>\n        </div>\n\n        <p class=\"mfa-text\">{{ t('mfaTotpStep2') }}</p>\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n\n        <ion-button expand=\"block\" [disabled]=\"working()\" (click)=\"verifyTotp()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaTotpVerify') }} }\n        </ion-button>\n\n        <div class=\"mfa-backup\">\n          <h3>{{ t('mfaBackupCodesTitle') }}</h3>\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesSaveWarning') }} {{ t('mfaBackupCodesExplain') }}</p>\n          </div>\n          <div class=\"mfa-codes\">\n            @for (code of setup.backupCodes; track code) {\n            <code class=\"mfa-code\">{{ code }}</code>\n            }\n          </div>\n          <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" (click)=\"copyCodes(setup.backupCodes)\">\n            {{ t('mfaCopyCodes') }}\n          </ion-button>\n        </div>\n        }\n\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('code-confirm') {\n        <val-title [props]=\"{ content: t('mfaConfirmTitle'), size: 'large', color: '', bold: false }\" />\n        <p class=\"mfa-text\">\n          {{ selectedMethod() === 'EMAIL' ? t('mfaConfirmPromptEmail') : t('mfaConfirmPromptSms') }}\n        </p>\n\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n\n        <ion-button expand=\"block\" [disabled]=\"working()\" (click)=\"confirmCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaConfirmButton') }} }\n        </ion-button>\n\n        <p class=\"mfa-resend\">\n          {{ t('mfaNoCode') }} @if (resendCooldown() > 0) {\n          <span class=\"mfa-text\">{{ t('mfaResendIn') }} {{ resendCooldown() }}s</span>\n          } @else {\n          <a (click)=\"resendCode()\">{{ t('mfaResend') }}</a>\n          }\n        </p>\n\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('disable') { @if (hasPassword()) {\n        <val-form [props]=\"disableFormProps()\" (onSubmit)=\"onDisableSubmit($event)\" />\n        } @else if (mfaMethod() === 'TOTP') {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        <p class=\"mfa-text\">{{ t('mfaDisableTotpPrompt') }}</p>\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n        <ion-button expand=\"block\" [disabled]=\"working()\" (click)=\"disableWithMfaCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableButton') }} }\n        </ion-button>\n        } @else {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        <p class=\"mfa-text\">{{ t('mfaDisableNeedsPassword') }}</p>\n        }\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".mfa-modal{display:flex;flex-direction:column;gap:14px;padding-top:4px}.mfa-loading{display:flex;justify-content:center;padding:40px 0}.mfa-status{display:inline-flex;align-items:center;width:fit-content;padding:4px 10px;border-radius:999px;font-size:13px;font-weight:600;margin:0}.mfa-status--on{color:var(--ion-color-success-shade);background:rgba(var(--ion-color-success-rgb),.12)}.mfa-status--off{color:var(--ion-color-medium-shade);background:var(--ion-color-light)}.mfa-secret-row{display:flex;align-items:center;gap:8px}.mfa-secret-row .mfa-secret{flex:1;margin:0}.mfa-secret-row ion-button{flex-shrink:0;--color: var(--ion-color-dark);margin:0}.mfa-text{color:var(--ion-color-dark);font-size:14px;margin:0}.mfa-error{color:var(--ion-color-danger);font-size:13px;margin:4px 0 0}.mfa-block,.mfa-backup{display:flex;flex-direction:column;gap:12px}.mfa-block{padding:16px;border-radius:14px;background:var(--ion-color-light)}.mfa-block h3,.mfa-backup h3{font-size:15px;font-weight:600;margin:0;color:var(--ion-color-dark)}.mfa-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:10px;background:var(--ion-color-light);border-left:3px solid var(--ion-color-primary)}.mfa-alert ion-icon{font-size:20px;color:var(--ion-color-primary);flex-shrink:0;margin-top:1px}.mfa-alert p{margin:0;font-size:13px;line-height:1.45;color:var(--ion-color-dark)}.mfa-qr{display:flex;justify-content:center;padding:8px 0}.mfa-secret{display:block;padding:10px 12px;border-radius:8px;background:var(--ion-color-light);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;letter-spacing:.04em;word-break:break-all;text-align:center}.mfa-pin{display:flex;justify-content:center;padding:8px 0}.mfa-codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px;border-radius:12px;background:var(--ion-color-light)}.mfa-code{padding:8px;border-radius:6px;background:var(--ion-background-color, #fff);color:var(--ion-color-dark);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;text-align:center}.mfa-resend{text-align:center;font-size:14px;color:var(--ion-color-dark);margin:4px 0}.mfa-resend a{color:var(--ion-color-primary);cursor:pointer;font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "errorText", "helperText", "name", "value"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onInvalid", "onSelectChange"] }, { kind: "component", type: QrCodeComponent, selector: "val-qr-code", inputs: ["props"], outputs: ["actionComplete", "imageLoad", "imageError"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: PinInputComponent, selector: "val-pin-input", inputs: ["props"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MfaModalComponent, decorators: [{
             type: Component,
@@ -31706,6 +31721,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], changed: [{
                 type: Output
+            }], enabledViaDeeplink: [{
+                type: Output
             }], dismissed: [{
                 type: Output
             }] } });
@@ -35737,6 +35754,7 @@ class LoginComponent {
         this.isForgotPasswordModalOpen = false;
         this.isResetPasswordModalOpen = false;
         this.isMFAVerifyModalOpen = false;
+        this._mfaSuccessPending = false;
         this.pendingVerificationEmail = '';
         this.pendingResetEmail = '';
         this.resendCooldown = 0;
@@ -36215,8 +36233,13 @@ class LoginComponent {
         this.authService.verifyMFA(code).subscribe({
             next: () => {
                 this._mfaVerifyFormState.set(ComponentStates.ENABLED);
+                // Diferimos handleLoginSuccess hasta que ion-modal complete su
+                // animación de cierre (didDismiss). Sin esto, `router.navigate` del
+                // padre destruye al host del modal antes de que Ionic procese el
+                // dismiss, y el modal queda visible encima de la página destino
+                // (iOS PWA).
+                this._mfaSuccessPending = true;
                 this.closeMFAVerifyModal();
-                this.handleLoginSuccess(undefined, true);
             },
             error: err => {
                 this._mfaVerifyFormState.set(ComponentStates.ENABLED);
@@ -36224,6 +36247,12 @@ class LoginComponent {
             },
         });
     }
+    onMFAVerifyDismissed() {
+        if (this._mfaSuccessPending) {
+            this._mfaSuccessPending = false;
+            this.handleLoginSuccess(undefined, true);
+        }
+    }
     // ==========================================
     // FORGOT PASSWORD HANDLERS
     // ==========================================
@@ -36409,7 +36438,7 @@ class LoginComponent {
         this.stopResetResendCooldown();
     }
     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 -->\n  @if (props.logo) {\n  <div class=\"logo-container\">\n    <val-image [props]=\"props.logo\" />\n  </div>\n  }\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    <ion-button\n      expand=\"block\"\n      fill=\"outline\"\n      color=\"dark\"\n      (click)=\"loginWithOAuth(provider)\"\n      [disabled]=\"isOAuthLoading\"\n    >\n      @switch (provider) { @case ('google') {\n      <ion-icon slot=\"start\" name=\"logo-google\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithGoogle') }} } @case ('apple') {\n      <ion-icon slot=\"start\" name=\"logo-apple\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithApple') }} } @case ('microsoft') {\n      <ion-icon slot=\"start\" name=\"logo-microsoft\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithMicrosoft') }} } }\n    </ion-button>\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 (props.legal.companyLink) {\n        <a [href]=\"props.legal.companyLink\"><strong>{{ props.legal.companyName }}</strong></a>\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\" (click)=\"closeRegisterModal()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\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        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"registerFormProps()\" (onSubmit)=\"registerHandler($event)\" />\n        <div class=\"auth-link\">\n          <ion-text color=\"dark\">\n            {{ t('hasAccount') }}\n            <a (click)=\"closeRegisterModal()\">{{ 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\" (click)=\"closeVerifyModal()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\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        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\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\" (click)=\"closeForgotPasswordModal()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\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        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\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\" (click)=\"closeResetPasswordModal()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\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        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\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\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" (click)=\"closeMFAVerifyModal()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\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        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"mfaVerifyFormProps()\" (onSubmit)=\"verifyMFAHandler($event)\" />\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".val-login{width:100%}.val-login--card{padding:1rem;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}.oauth-buttons ion-button{--border-radius: 8px;--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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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", "onInvalid", "onSelectChange"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }] }); }
+    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 -->\n  @if (props.logo) {\n  <div class=\"logo-container\">\n    <val-image [props]=\"props.logo\" />\n  </div>\n  }\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    <ion-button\n      expand=\"block\"\n      fill=\"outline\"\n      color=\"dark\"\n      (click)=\"loginWithOAuth(provider)\"\n      [disabled]=\"isOAuthLoading\"\n    >\n      @switch (provider) { @case ('google') {\n      <ion-icon slot=\"start\" name=\"logo-google\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithGoogle') }} } @case ('apple') {\n      <ion-icon slot=\"start\" name=\"logo-apple\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithApple') }} } @case ('microsoft') {\n      <ion-icon slot=\"start\" name=\"logo-microsoft\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithMicrosoft') }} } }\n    </ion-button>\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 (props.legal.companyLink) {\n        <a [href]=\"props.legal.companyLink\"><strong>{{ props.legal.companyName }}</strong></a>\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\" (click)=\"closeRegisterModal()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\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        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"registerFormProps()\" (onSubmit)=\"registerHandler($event)\" />\n        <div class=\"auth-link\">\n          <ion-text color=\"dark\">\n            {{ t('hasAccount') }}\n            <a (click)=\"closeRegisterModal()\">{{ 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\" (click)=\"closeVerifyModal()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\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        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\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\" (click)=\"closeForgotPasswordModal()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\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        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\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\" (click)=\"closeResetPasswordModal()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\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        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\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\" (click)=\"closeMFAVerifyModal()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\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        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"mfaVerifyFormProps()\" (onSubmit)=\"verifyMFAHandler($event)\" />\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".val-login{width:100%}.val-login--card{padding:1rem;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}.oauth-buttons ion-button{--border-radius: 8px;--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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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", "onInvalid", "onSelectChange"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoginComponent, decorators: [{
             type: Component,
@@ -36425,7 +36454,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         IonToolbar,
                         FormComponent,
                         ImageComponent,
-                    ], template: "<div class=\"val-login\" [class.val-login--card]=\"config.showCard\">\n  <!-- Logo -->\n  @if (props.logo) {\n  <div class=\"logo-container\">\n    <val-image [props]=\"props.logo\" />\n  </div>\n  }\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    <ion-button\n      expand=\"block\"\n      fill=\"outline\"\n      color=\"dark\"\n      (click)=\"loginWithOAuth(provider)\"\n      [disabled]=\"isOAuthLoading\"\n    >\n      @switch (provider) { @case ('google') {\n      <ion-icon slot=\"start\" name=\"logo-google\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithGoogle') }} } @case ('apple') {\n      <ion-icon slot=\"start\" name=\"logo-apple\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithApple') }} } @case ('microsoft') {\n      <ion-icon slot=\"start\" name=\"logo-microsoft\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithMicrosoft') }} } }\n    </ion-button>\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 (props.legal.companyLink) {\n        <a [href]=\"props.legal.companyLink\"><strong>{{ props.legal.companyName }}</strong></a>\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\" (click)=\"closeRegisterModal()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\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        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"registerFormProps()\" (onSubmit)=\"registerHandler($event)\" />\n        <div class=\"auth-link\">\n          <ion-text color=\"dark\">\n            {{ t('hasAccount') }}\n            <a (click)=\"closeRegisterModal()\">{{ 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\" (click)=\"closeVerifyModal()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\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        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\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\" (click)=\"closeForgotPasswordModal()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\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        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\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\" (click)=\"closeResetPasswordModal()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\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        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\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\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" (click)=\"closeMFAVerifyModal()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\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        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"mfaVerifyFormProps()\" (onSubmit)=\"verifyMFAHandler($event)\" />\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".val-login{width:100%}.val-login--card{padding:1rem;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}.oauth-buttons ion-button{--border-radius: 8px;--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"] }]
+                    ], template: "<div class=\"val-login\" [class.val-login--card]=\"config.showCard\">\n  <!-- Logo -->\n  @if (props.logo) {\n  <div class=\"logo-container\">\n    <val-image [props]=\"props.logo\" />\n  </div>\n  }\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    <ion-button\n      expand=\"block\"\n      fill=\"outline\"\n      color=\"dark\"\n      (click)=\"loginWithOAuth(provider)\"\n      [disabled]=\"isOAuthLoading\"\n    >\n      @switch (provider) { @case ('google') {\n      <ion-icon slot=\"start\" name=\"logo-google\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithGoogle') }} } @case ('apple') {\n      <ion-icon slot=\"start\" name=\"logo-apple\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithApple') }} } @case ('microsoft') {\n      <ion-icon slot=\"start\" name=\"logo-microsoft\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithMicrosoft') }} } }\n    </ion-button>\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 (props.legal.companyLink) {\n        <a [href]=\"props.legal.companyLink\"><strong>{{ props.legal.companyName }}</strong></a>\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\" (click)=\"closeRegisterModal()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\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        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"registerFormProps()\" (onSubmit)=\"registerHandler($event)\" />\n        <div class=\"auth-link\">\n          <ion-text color=\"dark\">\n            {{ t('hasAccount') }}\n            <a (click)=\"closeRegisterModal()\">{{ 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\" (click)=\"closeVerifyModal()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\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        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\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\" (click)=\"closeForgotPasswordModal()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\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        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\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\" (click)=\"closeResetPasswordModal()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\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        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\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\" (click)=\"closeMFAVerifyModal()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\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        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"mfaVerifyFormProps()\" (onSubmit)=\"verifyMFAHandler($event)\" />\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".val-login{width:100%}.val-login--card{padding:1rem;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}.oauth-buttons ion-button{--border-radius: 8px;--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: [{
                 type: Input
             }], onSuccess: [{