valtech-components 4.0.57 → 4.0.59

package/fesm2022/valtech-components.mjs

@@ -56,7 +56,7 @@ import { BrowserMultiFormatReader } from '@zxing/browser';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '4.0.57';
+const VERSION = '4.0.59';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -36257,7 +36257,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", enabledViaDeeplink: "enabledViaDeeplink", dismissed: "dismissed" }, ngImport: i0, template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\" cssClass=\"val-modal-adaptive\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" shape=\"round\" (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          <val-title [props]=\"{ size: 'small', color: 'dark', bold: true, content: t('mfaBackupCodesTitle') }\" />\n          <val-text\n            [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaBackupCodesAvailable') + ': ' + backupCodesCount() }\"\n          />\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\" shape=\"round\" (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            shape=\"round\"\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\" shape=\"round\" (click)=\"goToDisable()\">\n          {{ t('mfaDisableButton') }}\n        </ion-button>\n        } @else {\n        <p class=\"mfa-status mfa-status--off\">{{ t('mfaDisabledLabel') }}</p>\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisabledHint') }\" />\n        <ion-button expand=\"block\" shape=\"round\" (click)=\"goToMethodSelect()\"> {{ t('mfaEnableButton') }} </ion-button>\n        } } @case ('method-select') {\n        <val-title [props]=\"{ content: t('mfaEnableTitle'), size: 'large', color: 'dark', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaMethodPrompt') }\" />\n\n        <div class=\"mfa-method-list\" role=\"radiogroup\">\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'TOTP'\"\n            (click)=\"selectedMethod.set('TOTP')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'TOTP'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodTotp') }}</strong>\n              <span>{{ t('mfaMethodTotpHint') }}</span>\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'EMAIL'\"\n            (click)=\"selectedMethod.set('EMAIL')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'EMAIL'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodEmail') }}</strong>\n              <span>{{ t('mfaMethodEmailHint') }}</span>\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'SMS'\"\n            (click)=\"selectedMethod.set('SMS')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'SMS'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodSms') }}</strong>\n              <span>{{ t('mfaMethodSmsHint') }}</span>\n            </span>\n          </button>\n        </div>\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        <val-text\n          [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaPhoneRegistered') + ': ' + phone }\"\n        />\n        }\n\n        <ion-button expand=\"block\" shape=\"round\" [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\" shape=\"round\" (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        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpStep1') }\" />\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        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpManualEntry') }\" />\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        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpStep2') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n\n        <ion-button expand=\"block\" shape=\"round\" [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          <val-title [props]=\"{ size: 'small', color: 'dark', bold: true, content: t('mfaBackupCodesTitle') }\" />\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\" shape=\"round\" (click)=\"copyCodes(setup.backupCodes)\">\n            {{ t('mfaCopyCodes') }}\n          </ion-button>\n        </div>\n        }\n\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" shape=\"round\" (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        <val-text\n          [props]=\"{ size: 'medium', color: 'dark', bold: false, content: selectedMethod() === 'EMAIL' ? t('mfaConfirmPromptEmail') : t('mfaConfirmPromptSms') }\"\n        />\n\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n\n        <ion-button expand=\"block\" shape=\"round\" [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>{{ 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\" shape=\"round\" (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        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableTotpPrompt') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"disableWithMfaCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableButton') }} }\n        </ion-button>\n        } @else if (mfaMethod() === 'EMAIL' || mfaMethod() === 'SMS') {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        @if (!disableCodeSent()) {\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableCodePrompt') }\" />\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"sendDisableCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableSendCode') }} }\n        </ion-button>\n        } @else {\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableCodePrompt') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"disableWithMfaCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableButton') }} }\n        </ion-button>\n        <ion-button expand=\"block\" fill=\"clear\" color=\"medium\" shape=\"round\" [disabled]=\"working()\" (click)=\"sendDisableCode()\">\n          {{ t('mfaDisableResendCode') }}\n        </ion-button>\n        } } @else {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableNeedsPassword') }\" />\n        }\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" shape=\"round\" (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:.8125rem;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-error{color:var(--ion-color-danger);font-size:.8125rem;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-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:1.25rem;color:var(--ion-color-primary);flex-shrink:0;margin-top:1px}.mfa-alert p{margin:0;font-size:.8125rem;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:.9375rem;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:.8125rem;text-align:center}.mfa-method-list{display:flex;flex-direction:column;gap:8px}.mfa-method-card{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:12px;border:1.5px solid var(--ion-border-color, rgba(var(--ion-color-dark-rgb), .14));background:transparent;cursor:pointer;text-align:left;width:100%;transition:border-color .15s ease,background .15s ease}.mfa-method-card--active{border-color:var(--ion-color-primary);background:rgba(var(--ion-color-primary-rgb),.07)}.mfa-method-card__dot{flex-shrink:0;width:18px;height:18px;border-radius:50%;border:2px solid var(--ion-color-medium);margin-top:2px;transition:border-color .15s,box-shadow .15s}.mfa-method-card--active .mfa-method-card__dot{border-color:var(--ion-color-primary);box-shadow:inset 0 0 0 4px var(--ion-color-primary)}.mfa-method-card__body{display:flex;flex-direction:column;gap:3px}.mfa-method-card__body strong{font-size:.9375rem;font-weight:600;color:var(--ion-color-dark)}.mfa-method-card__body span{font-size:.8125rem;color:var(--ion-color-medium);line-height:1.4}.mfa-resend{text-align:center;font-size:.875rem;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$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.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: IonModal, selector: "ion-modal" }, { 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: TextComponent, selector: "val-text", inputs: ["props"] }, { 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()\" cssClass=\"val-modal-adaptive\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" shape=\"round\" (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          <val-title [props]=\"{ size: 'small', color: 'dark', bold: true, content: t('mfaBackupCodesTitle') }\" />\n          <val-text\n            [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaBackupCodesAvailable') + ': ' + backupCodesCount() }\"\n          />\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\" shape=\"round\" (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            shape=\"round\"\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\" shape=\"round\" (click)=\"goToDisable()\">\n          {{ t('mfaDisableButton') }}\n        </ion-button>\n        } @else {\n        <p class=\"mfa-status mfa-status--off\">{{ t('mfaDisabledLabel') }}</p>\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisabledHint') }\" />\n        <ion-button expand=\"block\" shape=\"round\" (click)=\"goToMethodSelect()\"> {{ t('mfaEnableButton') }} </ion-button>\n        } } @case ('method-select') {\n        <val-title [props]=\"{ content: t('mfaEnableTitle'), size: 'large', color: 'dark', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaMethodPrompt') }\" />\n\n        <div class=\"mfa-method-list\" role=\"radiogroup\">\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'TOTP'\"\n            (click)=\"selectedMethod.set('TOTP')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'TOTP'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodTotp') }}</strong>\n              <span>{{ t('mfaMethodTotpHint') }}</span>\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'EMAIL'\"\n            (click)=\"selectedMethod.set('EMAIL')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'EMAIL'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodEmail') }}</strong>\n              <span>{{ t('mfaMethodEmailHint') }}</span>\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'SMS'\"\n            (click)=\"selectedMethod.set('SMS')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'SMS'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodSms') }}</strong>\n              <span>{{ t('mfaMethodSmsHint') }}</span>\n            </span>\n          </button>\n        </div>\n\n        @if (selectedMethod() === 'SMS' && !userPhone()) {\n        <val-phone-input\n          [props]=\"{ control: phoneControl, label: t('mfaPhoneLabel'), placeholder: '912345678', defaultCountry: 'CL' }\"\n        />\n        @if (phoneControl.invalid && phoneControl.touched) {\n        <p class=\"mfa-error\">{{ t('mfaPhoneInvalid') }}</p>\n        } } @if (selectedMethod() === 'SMS' && userPhone(); as phone) {\n        <val-text\n          [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaPhoneRegistered') + ': ' + phone }\"\n        />\n        }\n\n        <ion-button expand=\"block\" shape=\"round\" [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=\"outline\" color=\"dark\" shape=\"round\" (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        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpStep1') }\" />\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        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpManualEntry') }\" />\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        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpStep2') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n\n        <ion-button expand=\"block\" shape=\"round\" [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          <val-title [props]=\"{ size: 'small', color: 'dark', bold: true, content: t('mfaBackupCodesTitle') }\" />\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\" shape=\"round\" (click)=\"copyCodes(setup.backupCodes)\">\n            {{ t('mfaCopyCodes') }}\n          </ion-button>\n        </div>\n        }\n\n        <ion-button expand=\"block\" fill=\"outline\" color=\"dark\" shape=\"round\" (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        <val-text\n          [props]=\"{ size: 'medium', color: 'dark', bold: false, content: selectedMethod() === 'EMAIL' ? t('mfaConfirmPromptEmail') : t('mfaConfirmPromptSms') }\"\n        />\n\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n\n        <ion-button expand=\"block\" shape=\"round\" [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>{{ t('mfaResendIn') }} {{ resendCooldown() }}s</span>\n          } @else {\n          <a (click)=\"resendCode()\">{{ t('mfaResend') }}</a>\n          }\n        </p>\n\n        <ion-button expand=\"block\" fill=\"outline\" color=\"dark\" shape=\"round\" (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        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableTotpPrompt') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"disableWithMfaCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableButton') }} }\n        </ion-button>\n        } @else if (mfaMethod() === 'EMAIL' || mfaMethod() === 'SMS') {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        @if (!disableCodeSent()) {\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableCodePrompt') }\" />\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"sendDisableCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableSendCode') }} }\n        </ion-button>\n        } @else {\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableCodePrompt') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"disableWithMfaCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableButton') }} }\n        </ion-button>\n        <ion-button\n          expand=\"block\"\n          fill=\"clear\"\n          color=\"medium\"\n          shape=\"round\"\n          [disabled]=\"working()\"\n          (click)=\"sendDisableCode()\"\n        >\n          {{ t('mfaDisableResendCode') }}\n        </ion-button>\n        } } @else {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableNeedsPassword') }\" />\n        }\n        <ion-button expand=\"block\" fill=\"outline\" color=\"dark\" shape=\"round\" (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:.8125rem;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-error{color:var(--ion-color-danger);font-size:.8125rem;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-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:1.25rem;color:var(--ion-color-primary);flex-shrink:0;margin-top:1px}.mfa-alert p{margin:0;font-size:.8125rem;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:.9375rem;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:.8125rem;text-align:center}.mfa-method-list{display:flex;flex-direction:column;gap:8px}.mfa-method-card{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:12px;border:1.5px solid var(--ion-border-color, rgba(var(--ion-color-dark-rgb), .14));background:transparent;cursor:pointer;text-align:left;width:100%;transition:border-color .15s ease,background .15s ease}.mfa-method-card--active{border-color:var(--ion-color-primary);background:rgba(var(--ion-color-primary-rgb),.07)}.mfa-method-card__dot{flex-shrink:0;width:18px;height:18px;border-radius:50%;border:2px solid var(--ion-color-medium);margin-top:2px;transition:border-color .15s,box-shadow .15s}.mfa-method-card--active .mfa-method-card__dot{border-color:var(--ion-color-primary);box-shadow:inset 0 0 0 4px var(--ion-color-primary)}.mfa-method-card__body{display:flex;flex-direction:column;gap:3px}.mfa-method-card__body strong{font-size:.9375rem;font-weight:600;color:var(--ion-color-dark)}.mfa-method-card__body span{font-size:.8125rem;color:var(--ion-color-medium);line-height:1.4}.mfa-resend{text-align:center;font-size:.875rem;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: "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: 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: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: PinInputComponent, selector: "val-pin-input", inputs: ["props"] }, { kind: "component", type: PhoneInputComponent, selector: "val-phone-input", inputs: ["preset", "props"], outputs: ["phoneChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MfaModalComponent, decorators: [{
             type: Component,
@@ -36282,7 +36282,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         TextComponent,
                         TitleComponent,
                         PinInputComponent,
-                    ], template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\" cssClass=\"val-modal-adaptive\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" shape=\"round\" (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          <val-title [props]=\"{ size: 'small', color: 'dark', bold: true, content: t('mfaBackupCodesTitle') }\" />\n          <val-text\n            [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaBackupCodesAvailable') + ': ' + backupCodesCount() }\"\n          />\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\" shape=\"round\" (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            shape=\"round\"\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\" shape=\"round\" (click)=\"goToDisable()\">\n          {{ t('mfaDisableButton') }}\n        </ion-button>\n        } @else {\n        <p class=\"mfa-status mfa-status--off\">{{ t('mfaDisabledLabel') }}</p>\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisabledHint') }\" />\n        <ion-button expand=\"block\" shape=\"round\" (click)=\"goToMethodSelect()\"> {{ t('mfaEnableButton') }} </ion-button>\n        } } @case ('method-select') {\n        <val-title [props]=\"{ content: t('mfaEnableTitle'), size: 'large', color: 'dark', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaMethodPrompt') }\" />\n\n        <div class=\"mfa-method-list\" role=\"radiogroup\">\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'TOTP'\"\n            (click)=\"selectedMethod.set('TOTP')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'TOTP'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodTotp') }}</strong>\n              <span>{{ t('mfaMethodTotpHint') }}</span>\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'EMAIL'\"\n            (click)=\"selectedMethod.set('EMAIL')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'EMAIL'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodEmail') }}</strong>\n              <span>{{ t('mfaMethodEmailHint') }}</span>\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'SMS'\"\n            (click)=\"selectedMethod.set('SMS')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'SMS'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodSms') }}</strong>\n              <span>{{ t('mfaMethodSmsHint') }}</span>\n            </span>\n          </button>\n        </div>\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        <val-text\n          [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaPhoneRegistered') + ': ' + phone }\"\n        />\n        }\n\n        <ion-button expand=\"block\" shape=\"round\" [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\" shape=\"round\" (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        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpStep1') }\" />\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        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpManualEntry') }\" />\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        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpStep2') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n\n        <ion-button expand=\"block\" shape=\"round\" [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          <val-title [props]=\"{ size: 'small', color: 'dark', bold: true, content: t('mfaBackupCodesTitle') }\" />\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\" shape=\"round\" (click)=\"copyCodes(setup.backupCodes)\">\n            {{ t('mfaCopyCodes') }}\n          </ion-button>\n        </div>\n        }\n\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" shape=\"round\" (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        <val-text\n          [props]=\"{ size: 'medium', color: 'dark', bold: false, content: selectedMethod() === 'EMAIL' ? t('mfaConfirmPromptEmail') : t('mfaConfirmPromptSms') }\"\n        />\n\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n\n        <ion-button expand=\"block\" shape=\"round\" [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>{{ 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\" shape=\"round\" (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        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableTotpPrompt') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"disableWithMfaCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableButton') }} }\n        </ion-button>\n        } @else if (mfaMethod() === 'EMAIL' || mfaMethod() === 'SMS') {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        @if (!disableCodeSent()) {\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableCodePrompt') }\" />\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"sendDisableCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableSendCode') }} }\n        </ion-button>\n        } @else {\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableCodePrompt') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"disableWithMfaCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableButton') }} }\n        </ion-button>\n        <ion-button expand=\"block\" fill=\"clear\" color=\"medium\" shape=\"round\" [disabled]=\"working()\" (click)=\"sendDisableCode()\">\n          {{ t('mfaDisableResendCode') }}\n        </ion-button>\n        } } @else {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableNeedsPassword') }\" />\n        }\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" shape=\"round\" (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:.8125rem;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-error{color:var(--ion-color-danger);font-size:.8125rem;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-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:1.25rem;color:var(--ion-color-primary);flex-shrink:0;margin-top:1px}.mfa-alert p{margin:0;font-size:.8125rem;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:.9375rem;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:.8125rem;text-align:center}.mfa-method-list{display:flex;flex-direction:column;gap:8px}.mfa-method-card{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:12px;border:1.5px solid var(--ion-border-color, rgba(var(--ion-color-dark-rgb), .14));background:transparent;cursor:pointer;text-align:left;width:100%;transition:border-color .15s ease,background .15s ease}.mfa-method-card--active{border-color:var(--ion-color-primary);background:rgba(var(--ion-color-primary-rgb),.07)}.mfa-method-card__dot{flex-shrink:0;width:18px;height:18px;border-radius:50%;border:2px solid var(--ion-color-medium);margin-top:2px;transition:border-color .15s,box-shadow .15s}.mfa-method-card--active .mfa-method-card__dot{border-color:var(--ion-color-primary);box-shadow:inset 0 0 0 4px var(--ion-color-primary)}.mfa-method-card__body{display:flex;flex-direction:column;gap:3px}.mfa-method-card__body strong{font-size:.9375rem;font-weight:600;color:var(--ion-color-dark)}.mfa-method-card__body span{font-size:.8125rem;color:var(--ion-color-medium);line-height:1.4}.mfa-resend{text-align:center;font-size:.875rem;color:var(--ion-color-dark);margin:4px 0}.mfa-resend a{color:var(--ion-color-primary);cursor:pointer;font-weight:600}\n"] }]
+                        PhoneInputComponent,
+                    ], template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\" cssClass=\"val-modal-adaptive\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" shape=\"round\" (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          <val-title [props]=\"{ size: 'small', color: 'dark', bold: true, content: t('mfaBackupCodesTitle') }\" />\n          <val-text\n            [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaBackupCodesAvailable') + ': ' + backupCodesCount() }\"\n          />\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\" shape=\"round\" (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            shape=\"round\"\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\" shape=\"round\" (click)=\"goToDisable()\">\n          {{ t('mfaDisableButton') }}\n        </ion-button>\n        } @else {\n        <p class=\"mfa-status mfa-status--off\">{{ t('mfaDisabledLabel') }}</p>\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisabledHint') }\" />\n        <ion-button expand=\"block\" shape=\"round\" (click)=\"goToMethodSelect()\"> {{ t('mfaEnableButton') }} </ion-button>\n        } } @case ('method-select') {\n        <val-title [props]=\"{ content: t('mfaEnableTitle'), size: 'large', color: 'dark', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaMethodPrompt') }\" />\n\n        <div class=\"mfa-method-list\" role=\"radiogroup\">\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'TOTP'\"\n            (click)=\"selectedMethod.set('TOTP')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'TOTP'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodTotp') }}</strong>\n              <span>{{ t('mfaMethodTotpHint') }}</span>\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'EMAIL'\"\n            (click)=\"selectedMethod.set('EMAIL')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'EMAIL'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodEmail') }}</strong>\n              <span>{{ t('mfaMethodEmailHint') }}</span>\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'SMS'\"\n            (click)=\"selectedMethod.set('SMS')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'SMS'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodSms') }}</strong>\n              <span>{{ t('mfaMethodSmsHint') }}</span>\n            </span>\n          </button>\n        </div>\n\n        @if (selectedMethod() === 'SMS' && !userPhone()) {\n        <val-phone-input\n          [props]=\"{ control: phoneControl, label: t('mfaPhoneLabel'), placeholder: '912345678', defaultCountry: 'CL' }\"\n        />\n        @if (phoneControl.invalid && phoneControl.touched) {\n        <p class=\"mfa-error\">{{ t('mfaPhoneInvalid') }}</p>\n        } } @if (selectedMethod() === 'SMS' && userPhone(); as phone) {\n        <val-text\n          [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaPhoneRegistered') + ': ' + phone }\"\n        />\n        }\n\n        <ion-button expand=\"block\" shape=\"round\" [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=\"outline\" color=\"dark\" shape=\"round\" (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        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpStep1') }\" />\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        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpManualEntry') }\" />\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        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpStep2') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n\n        <ion-button expand=\"block\" shape=\"round\" [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          <val-title [props]=\"{ size: 'small', color: 'dark', bold: true, content: t('mfaBackupCodesTitle') }\" />\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\" shape=\"round\" (click)=\"copyCodes(setup.backupCodes)\">\n            {{ t('mfaCopyCodes') }}\n          </ion-button>\n        </div>\n        }\n\n        <ion-button expand=\"block\" fill=\"outline\" color=\"dark\" shape=\"round\" (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        <val-text\n          [props]=\"{ size: 'medium', color: 'dark', bold: false, content: selectedMethod() === 'EMAIL' ? t('mfaConfirmPromptEmail') : t('mfaConfirmPromptSms') }\"\n        />\n\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n\n        <ion-button expand=\"block\" shape=\"round\" [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>{{ t('mfaResendIn') }} {{ resendCooldown() }}s</span>\n          } @else {\n          <a (click)=\"resendCode()\">{{ t('mfaResend') }}</a>\n          }\n        </p>\n\n        <ion-button expand=\"block\" fill=\"outline\" color=\"dark\" shape=\"round\" (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        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableTotpPrompt') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"disableWithMfaCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableButton') }} }\n        </ion-button>\n        } @else if (mfaMethod() === 'EMAIL' || mfaMethod() === 'SMS') {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        @if (!disableCodeSent()) {\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableCodePrompt') }\" />\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"sendDisableCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableSendCode') }} }\n        </ion-button>\n        } @else {\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableCodePrompt') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"disableWithMfaCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableButton') }} }\n        </ion-button>\n        <ion-button\n          expand=\"block\"\n          fill=\"clear\"\n          color=\"medium\"\n          shape=\"round\"\n          [disabled]=\"working()\"\n          (click)=\"sendDisableCode()\"\n        >\n          {{ t('mfaDisableResendCode') }}\n        </ion-button>\n        } } @else {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableNeedsPassword') }\" />\n        }\n        <ion-button expand=\"block\" fill=\"outline\" color=\"dark\" shape=\"round\" (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:.8125rem;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-error{color:var(--ion-color-danger);font-size:.8125rem;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-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:1.25rem;color:var(--ion-color-primary);flex-shrink:0;margin-top:1px}.mfa-alert p{margin:0;font-size:.8125rem;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:.9375rem;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:.8125rem;text-align:center}.mfa-method-list{display:flex;flex-direction:column;gap:8px}.mfa-method-card{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:12px;border:1.5px solid var(--ion-border-color, rgba(var(--ion-color-dark-rgb), .14));background:transparent;cursor:pointer;text-align:left;width:100%;transition:border-color .15s ease,background .15s ease}.mfa-method-card--active{border-color:var(--ion-color-primary);background:rgba(var(--ion-color-primary-rgb),.07)}.mfa-method-card__dot{flex-shrink:0;width:18px;height:18px;border-radius:50%;border:2px solid var(--ion-color-medium);margin-top:2px;transition:border-color .15s,box-shadow .15s}.mfa-method-card--active .mfa-method-card__dot{border-color:var(--ion-color-primary);box-shadow:inset 0 0 0 4px var(--ion-color-primary)}.mfa-method-card__body{display:flex;flex-direction:column;gap:3px}.mfa-method-card__body strong{font-size:.9375rem;font-weight:600;color:var(--ion-color-dark)}.mfa-method-card__body span{font-size:.8125rem;color:var(--ion-color-medium);line-height:1.4}.mfa-resend{text-align:center;font-size:.875rem;color:var(--ion-color-dark);margin:4px 0}.mfa-resend a{color:var(--ion-color-primary);cursor:pointer;font-weight:600}\n"] }]
         }], ctorParameters: () => [], propDecorators: { isOpen: [{
                 type: Input
             }], prefillCode: [{