valtech-components 4.0.1023 → 4.0.1024

package/fesm2022/valtech-components.mjs

@@ -70,7 +70,7 @@ import fixWebmDuration from 'fix-webm-duration';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '4.0.1023';
+const VERSION = '4.0.1024';
 
 function evaluateValtechAccess(rule, context, features = {}, visitedFeatures = new Set()) {
     if (rule == null)
@@ -22653,6 +22653,9 @@ class SearchSelectorComponent {
         this.cancelText = this.resolvedProps.cancelText || this.resolveI18n('cancel', 'Cancelar');
         this.okText = this.resolvedProps.okText || this.resolveI18n('ok', 'OK');
     }
+    iconMask(src) {
+        return `url("${src}")`;
+    }
     /**
      * Busca un key en `_global` primero, luego en `Common`, finalmente cae al
      * default hardcoded. Útil para textos cross-cutting (cancel/ok/close/etc.)
@@ -22681,7 +22684,13 @@ class SearchSelectorComponent {
       @for (o of resolvedProps.options; track o.id) {
         <ion-select-option [value]="o.id">
           <span class="select-option-content">
-            @if (o.icon?.name) {
+            @if (o.icon?.src) {
+              <span
+                class="select-option-icon select-option-icon-mask"
+                [style.--val-select-option-icon-src]="iconMask(o.icon.src)"
+                aria-hidden="true"
+              ></span>
+            } @else if (o.icon?.name) {
               <ion-icon
                 class="select-option-icon"
                 [name]="o.icon?.name"
@@ -22694,7 +22703,7 @@ class SearchSelectorComponent {
         </ion-select-option>
       }
     </ion-select>
-  `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #737478;--ion-color-medium-rgb: 115,116,120;--ion-color-medium-contrast: #ffffff;--ion-color-medium-contrast-rgb: 255,255,255;--ion-color-medium-shade: #65666a;--ion-color-medium-tint: #818286;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}ion-select{--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;min-height:auto;border:.0625rem solid var(--ion-color-medium);border-radius:1.5rem;margin-top:.375rem;padding-top:.5rem!important;padding-bottom:.5rem!important;padding-inline-start:1rem!important;padding-inline-end:.625rem!important}.select-option-content{display:inline-flex;align-items:center;gap:.625rem}.select-option-icon{flex:0 0 auto;font-size:1.125rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }] }); }
+  `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #737478;--ion-color-medium-rgb: 115,116,120;--ion-color-medium-contrast: #ffffff;--ion-color-medium-contrast-rgb: 255,255,255;--ion-color-medium-shade: #65666a;--ion-color-medium-tint: #818286;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}ion-select{--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;min-height:auto;border:.0625rem solid var(--ion-color-medium);border-radius:1.5rem;margin-top:.375rem;padding-top:.5rem!important;padding-bottom:.5rem!important;padding-inline-start:1rem!important;padding-inline-end:.625rem!important}.select-option-content{display:inline-flex;align-items:center;gap:.625rem}.select-option-icon{flex:0 0 auto;font-size:1.125rem}.select-option-icon-mask{width:1.125rem;height:1.125rem;background:currentColor;mask:var(--val-select-option-icon-src) center/contain no-repeat;-webkit-mask:var(--val-select-option-icon-src) center/contain no-repeat}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SearchSelectorComponent, decorators: [{
             type: Component,
@@ -22711,7 +22720,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       @for (o of resolvedProps.options; track o.id) {
         <ion-select-option [value]="o.id">
           <span class="select-option-content">
-            @if (o.icon?.name) {
+            @if (o.icon?.src) {
+              <span
+                class="select-option-icon select-option-icon-mask"
+                [style.--val-select-option-icon-src]="iconMask(o.icon.src)"
+                aria-hidden="true"
+              ></span>
+            } @else if (o.icon?.name) {
               <ion-icon
                 class="select-option-icon"
                 [name]="o.icon?.name"
@@ -22724,7 +22739,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </ion-select-option>
       }
     </ion-select>
-  `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #737478;--ion-color-medium-rgb: 115,116,120;--ion-color-medium-contrast: #ffffff;--ion-color-medium-contrast-rgb: 255,255,255;--ion-color-medium-shade: #65666a;--ion-color-medium-tint: #818286;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}ion-select{--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;min-height:auto;border:.0625rem solid var(--ion-color-medium);border-radius:1.5rem;margin-top:.375rem;padding-top:.5rem!important;padding-bottom:.5rem!important;padding-inline-start:1rem!important;padding-inline-end:.625rem!important}.select-option-content{display:inline-flex;align-items:center;gap:.625rem}.select-option-icon{flex:0 0 auto;font-size:1.125rem}\n"] }]
+  `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #737478;--ion-color-medium-rgb: 115,116,120;--ion-color-medium-contrast: #ffffff;--ion-color-medium-contrast-rgb: 255,255,255;--ion-color-medium-shade: #65666a;--ion-color-medium-tint: #818286;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}ion-select{--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;min-height:auto;border:.0625rem solid var(--ion-color-medium);border-radius:1.5rem;margin-top:.375rem;padding-top:.5rem!important;padding-bottom:.5rem!important;padding-inline-start:1rem!important;padding-inline-end:.625rem!important}.select-option-content{display:inline-flex;align-items:center;gap:.625rem}.select-option-icon{flex:0 0 auto;font-size:1.125rem}.select-option-icon-mask{width:1.125rem;height:1.125rem;background:currentColor;mask:var(--val-select-option-icon-src) center/contain no-repeat;-webkit-mask:var(--val-select-option-icon-src) center/contain no-repeat}\n"] }]
         }], propDecorators: { preset: [{
                 type: Input
             }], props: [{
@@ -46823,11 +46838,11 @@ class ChangePasswordModalComponent {
         this.toast.show({ message, duration: 3500 });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChangePasswordModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChangePasswordModalComponent, isStandalone: true, selector: "val-change-password-modal", inputs: { isOpen: "isOpen" }, outputs: { changed: "changed", 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    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (mode() === 'loading') {\n        <div class=\"modal-loading\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n        </div>\n        } @else {\n        <val-form [props]=\"formProps()\" (onSubmit)=\"submitHandler($event)\" />\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".modal-form-section{display:flex;flex-direction:column;gap:16px;padding-top:8px}.modal-loading{display:flex;justify-content:center;padding:40px 0}\n"], dependencies: [{ kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onValueChange", "onInvalid", "onSelectChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChangePasswordModalComponent, isStandalone: true, selector: "val-change-password-modal", inputs: { isOpen: "isOpen" }, outputs: { changed: "changed", dismissed: "dismissed" }, ngImport: i0, template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\" cssClass=\"val-modal-adaptive\">\n  <ng-template>\n    <val-modal-layout [closeLabel]=\"t('close')\" (close)=\"close()\">\n      <section class=\"modal-form-section\">\n        @if (mode() === 'loading') {\n        <div class=\"modal-loading\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n        </div>\n        } @else {\n        <val-form [props]=\"formProps()\" (onSubmit)=\"submitHandler($event)\" />\n        }\n      </section>\n    </val-modal-layout>\n  </ng-template>\n</ion-modal>\n", styles: [".modal-form-section{display:flex;flex-direction:column;gap:16px;padding-top:8px}.modal-loading{display:flex;justify-content:center;padding:40px 0}\n"], dependencies: [{ kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onValueChange", "onInvalid", "onSelectChange"] }, { kind: "component", type: ModalLayoutComponent, selector: "val-modal-layout", inputs: ["title", "subtitle", "closeLabel", "showClose", "actions", "actionsAlign", "footer", "footerClass"], outputs: ["close", "actionClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChangePasswordModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-change-password-modal', standalone: true, imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonSpinner, IonToolbar, FormComponent], 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    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (mode() === 'loading') {\n        <div class=\"modal-loading\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n        </div>\n        } @else {\n        <val-form [props]=\"formProps()\" (onSubmit)=\"submitHandler($event)\" />\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".modal-form-section{display:flex;flex-direction:column;gap:16px;padding-top:8px}.modal-loading{display:flex;justify-content:center;padding:40px 0}\n"] }]
+            args: [{ selector: 'val-change-password-modal', standalone: true, imports: [IonModal, IonSpinner, FormComponent, ModalLayoutComponent], template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\" cssClass=\"val-modal-adaptive\">\n  <ng-template>\n    <val-modal-layout [closeLabel]=\"t('close')\" (close)=\"close()\">\n      <section class=\"modal-form-section\">\n        @if (mode() === 'loading') {\n        <div class=\"modal-loading\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n        </div>\n        } @else {\n        <val-form [props]=\"formProps()\" (onSubmit)=\"submitHandler($event)\" />\n        }\n      </section>\n    </val-modal-layout>\n  </ng-template>\n</ion-modal>\n", styles: [".modal-form-section{display:flex;flex-direction:column;gap:16px;padding-top:8px}.modal-loading{display:flex;justify-content:center;padding:40px 0}\n"] }]
         }], propDecorators: { isOpen: [{
                 type: Input
             }], changed: [{
@@ -47093,23 +47108,20 @@ class ChangeEmailModalComponent {
         this.toast.show({ message, duration: 3500 });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChangeEmailModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChangeEmailModalComponent, isStandalone: true, selector: "val-change-email-modal", inputs: { isOpen: "isOpen" }, outputs: { changed: "changed", 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    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (_step() === 'loading') {\n        <div class=\"modal-loading\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n        </div>\n        } @else if (_step() === 'no-password') {\n        <val-display [props]=\"{ content: noPasswordTitle(), size: 'small', color: 'dark' }\" />\n        <val-title [props]=\"{ content: noPasswordHint(), size: 'large', color: 'dark', bold: false }\" />\n        <ion-button expand=\"block\" fill=\"solid\" color=\"dark\" shape=\"round\" (click)=\"close()\">\n          <strong>{{ t('close') }}</strong>\n        </ion-button>\n        } @else if (_step() === 'step1') {\n        <val-form [props]=\"step1Props()\" (onSubmit)=\"handleStep1($event)\" />\n        } @else if (_step() === 'step2') {\n        <val-form [props]=\"step2Props()\" (onSubmit)=\"handleStep2($event)\" />\n        } @else if (_step() === 'step3') {\n        <val-form [props]=\"step3Props()\" (onSubmit)=\"handleStep3($event)\" />\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".modal-form-section{display:flex;flex-direction:column;gap:16px;padding-top:8px}.modal-loading{display:flex;justify-content:center;padding:40px 0}\n"], dependencies: [{ kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onValueChange", "onInvalid", "onSelectChange"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChangeEmailModalComponent, isStandalone: true, selector: "val-change-email-modal", inputs: { isOpen: "isOpen" }, outputs: { changed: "changed", dismissed: "dismissed" }, ngImport: i0, template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\" cssClass=\"val-modal-adaptive\">\n  <ng-template>\n    <val-modal-layout [closeLabel]=\"t('close')\" (close)=\"close()\">\n      <section class=\"modal-form-section\">\n        @if (_step() === 'loading') {\n        <div class=\"modal-loading\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n        </div>\n        } @else if (_step() === 'no-password') {\n        <val-display [props]=\"{ content: noPasswordTitle(), size: 'small', color: 'dark' }\" />\n        <val-title [props]=\"{ content: noPasswordHint(), size: 'large', color: 'dark', bold: false }\" />\n        <ion-button expand=\"block\" fill=\"solid\" color=\"dark\" shape=\"round\" (click)=\"close()\">\n          <strong>{{ t('close') }}</strong>\n        </ion-button>\n        } @else if (_step() === 'step1') {\n        <val-form [props]=\"step1Props()\" (onSubmit)=\"handleStep1($event)\" />\n        } @else if (_step() === 'step2') {\n        <val-form [props]=\"step2Props()\" (onSubmit)=\"handleStep2($event)\" />\n        } @else if (_step() === 'step3') {\n        <val-form [props]=\"step3Props()\" (onSubmit)=\"handleStep3($event)\" />\n        }\n      </section>\n    </val-modal-layout>\n  </ng-template>\n</ion-modal>\n", styles: [".modal-form-section{display:flex;flex-direction:column;gap:16px;padding-top:8px}.modal-loading{display:flex;justify-content:center;padding:40px 0}\n"], dependencies: [{ 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: IonModal, selector: "ion-modal" }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onValueChange", "onInvalid", "onSelectChange"] }, { kind: "component", type: ModalLayoutComponent, selector: "val-modal-layout", inputs: ["title", "subtitle", "closeLabel", "showClose", "actions", "actionsAlign", "footer", "footerClass"], outputs: ["close", "actionClick"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChangeEmailModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'val-change-email-modal', standalone: true, imports: [
                         IonButton,
-                        IonButtons,
-                        IonContent,
-                        IonHeader,
                         IonModal,
                         IonSpinner,
-                        IonToolbar,
                         FormComponent,
+                        ModalLayoutComponent,
                         DisplayComponent,
                         TextComponent,
                         TitleComponent,
-                    ], 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    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (_step() === 'loading') {\n        <div class=\"modal-loading\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n        </div>\n        } @else if (_step() === 'no-password') {\n        <val-display [props]=\"{ content: noPasswordTitle(), size: 'small', color: 'dark' }\" />\n        <val-title [props]=\"{ content: noPasswordHint(), size: 'large', color: 'dark', bold: false }\" />\n        <ion-button expand=\"block\" fill=\"solid\" color=\"dark\" shape=\"round\" (click)=\"close()\">\n          <strong>{{ t('close') }}</strong>\n        </ion-button>\n        } @else if (_step() === 'step1') {\n        <val-form [props]=\"step1Props()\" (onSubmit)=\"handleStep1($event)\" />\n        } @else if (_step() === 'step2') {\n        <val-form [props]=\"step2Props()\" (onSubmit)=\"handleStep2($event)\" />\n        } @else if (_step() === 'step3') {\n        <val-form [props]=\"step3Props()\" (onSubmit)=\"handleStep3($event)\" />\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".modal-form-section{display:flex;flex-direction:column;gap:16px;padding-top:8px}.modal-loading{display:flex;justify-content:center;padding:40px 0}\n"] }]
+                    ], template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\" cssClass=\"val-modal-adaptive\">\n  <ng-template>\n    <val-modal-layout [closeLabel]=\"t('close')\" (close)=\"close()\">\n      <section class=\"modal-form-section\">\n        @if (_step() === 'loading') {\n        <div class=\"modal-loading\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n        </div>\n        } @else if (_step() === 'no-password') {\n        <val-display [props]=\"{ content: noPasswordTitle(), size: 'small', color: 'dark' }\" />\n        <val-title [props]=\"{ content: noPasswordHint(), size: 'large', color: 'dark', bold: false }\" />\n        <ion-button expand=\"block\" fill=\"solid\" color=\"dark\" shape=\"round\" (click)=\"close()\">\n          <strong>{{ t('close') }}</strong>\n        </ion-button>\n        } @else if (_step() === 'step1') {\n        <val-form [props]=\"step1Props()\" (onSubmit)=\"handleStep1($event)\" />\n        } @else if (_step() === 'step2') {\n        <val-form [props]=\"step2Props()\" (onSubmit)=\"handleStep2($event)\" />\n        } @else if (_step() === 'step3') {\n        <val-form [props]=\"step3Props()\" (onSubmit)=\"handleStep3($event)\" />\n        }\n      </section>\n    </val-modal-layout>\n  </ng-template>\n</ion-modal>\n", styles: [".modal-form-section{display:flex;flex-direction:column;gap:16px;padding-top:8px}.modal-loading{display:flex;justify-content:center;padding:40px 0}\n"] }]
         }], propDecorators: { isOpen: [{
                 type: Input
             }], changed: [{
@@ -50243,16 +50255,13 @@ 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        <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-dark-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-dark);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", "onValueChange", "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"] }] }); }
+    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    <val-modal-layout [closeLabel]=\"t('close')\" (close)=\"close()\">\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    </val-modal-layout>\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-dark-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-dark);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: 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: ModalLayoutComponent, selector: "val-modal-layout", inputs: ["title", "subtitle", "closeLabel", "showClose", "actions", "actionsAlign", "footer", "footerClass"], outputs: ["close", "actionClick"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onValueChange", "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,
             args: [{ selector: 'val-mfa-modal', standalone: true, imports: [
                         ReactiveFormsModule,
                         IonButton,
-                        IonButtons,
-                        IonContent,
-                        IonHeader,
                         IonIcon,
                         IonInput,
                         IonItem,
@@ -50261,7 +50270,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         IonRadio,
                         IonRadioGroup,
                         IonSpinner,
-                        IonToolbar,
+                        ModalLayoutComponent,
                         DisplayComponent,
                         FormComponent,
                         QrCodeComponent,
@@ -50269,7 +50278,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         TitleComponent,
                         PinInputComponent,
                         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-dark-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-dark);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"] }]
+                    ], template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\" cssClass=\"val-modal-adaptive\">\n  <ng-template>\n    <val-modal-layout [closeLabel]=\"t('close')\" (close)=\"close()\">\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    </val-modal-layout>\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-dark-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-dark);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: [{
@@ -60201,8 +60210,24 @@ class LoginAttemptModalComponent {
     close() {
         this._modalRef?.dismiss(undefined, this.done() ? 'blocked' : 'close');
     }
+    handleAction(event) {
+        const token = event.action.token;
+        if (token === 'mine') {
+            this.confirmMine();
+        }
+        else if (token === 'block') {
+            void this.confirmBlock();
+        }
+        else {
+            this.close();
+        }
+    }
+    get actions() {
+        return this.done() ? [this.closeBtn] : [this.mineBtn, this.blockBtn];
+    }
     get mineBtn() {
         return {
+            token: 'mine',
             text: this.mineLabel,
             color: 'medium',
             fill: 'outline',
@@ -60214,6 +60239,7 @@ class LoginAttemptModalComponent {
     }
     get blockBtn() {
         return {
+            token: 'block',
             text: this.blockLabel,
             color: 'danger',
             fill: 'solid',
@@ -60225,6 +60251,7 @@ class LoginAttemptModalComponent {
     }
     get closeBtn() {
         return {
+            token: 'close',
             text: this.closeLabel,
             color: 'dark',
             fill: 'solid',
@@ -60236,17 +60263,14 @@ class LoginAttemptModalComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoginAttemptModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LoginAttemptModalComponent, isStandalone: true, selector: "val-login-attempt-modal", inputs: { title: "title", body: "body", deviceLabel: "deviceLabel", metaLabel: "metaLabel", doneLabel: "doneLabel", mineLabel: "mineLabel", blockLabel: "blockLabel", closeLabel: "closeLabel", isMobile: "isMobile", onBlock: "onBlock", _modalRef: "_modalRef" }, ngImport: i0, template: `
-    <ion-header>
-      <ion-toolbar>
-        <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" shape="round" (click)="close()">
-            <strong>{{ closeLabel }}</strong>
-          </ion-button>
-        </ion-buttons>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-      <val-display [props]="{ content: title, size: 'small', color: 'dark' }" />
+    <val-modal-layout
+      [title]="title"
+      [closeLabel]="closeLabel"
+      [actions]="actions"
+      actionsAlign="stretch"
+      (close)="close()"
+      (actionClick)="handleAction($event)"
+    >
       <div class="attempt">
         <div class="attempt__hero">
           <ion-icon name="shield-checkmark-outline" aria-hidden="true" />
@@ -60299,45 +60323,25 @@ class LoginAttemptModalComponent {
           </div>
         }
       </div>
-    </ion-content>
-
-    @if (!done()) {
-      <div class="attempt__actions">
-        <val-button [props]="mineBtn" (click)="confirmMine()" />
-        <val-button [props]="blockBtn" (click)="confirmBlock()" />
-      </div>
-    } @else {
-      <div class="attempt__actions">
-        <val-button [props]="closeBtn" (click)="close()" />
-      </div>
-    }
-  `, isInline: true, styles: [":host{display:block}.attempt{display:flex;flex-direction:column;gap:18px;align-items:flex-start}.attempt__hero{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:#7026df1a}.attempt__hero ion-icon{font-size:30px;color:var(--ion-color-primary, #7026df)}.attempt__device{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;border-radius:12px;background:var(--ion-color-light, #f4f5f8);border:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.attempt__device ion-icon{font-size:26px;color:var(--ion-color-dark);flex-shrink:0}.attempt__device-body{display:flex;flex-direction:column;gap:2px;min-width:0}.attempt__done{display:flex;align-items:center;gap:8px}.attempt__done ion-icon{font-size:20px;color:var(--ion-color-success);flex-shrink:0}.attempt__actions{display:flex;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.attempt__actions val-button{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { 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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }] }); }
+    </val-modal-layout>
+  `, isInline: true, styles: [":host{display:block}.attempt{display:flex;flex-direction:column;gap:18px;align-items:flex-start}.attempt__hero{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:#7026df1a}.attempt__hero ion-icon{font-size:30px;color:var(--ion-color-primary, #7026df)}.attempt__device{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;border-radius:12px;background:var(--ion-color-light, #f4f5f8);border:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.attempt__device ion-icon{font-size:26px;color:var(--ion-color-dark);flex-shrink:0}.attempt__device-body{display:flex;flex-direction:column;gap:2px;min-width:0}.attempt__done{display:flex;align-items:center;gap:8px}.attempt__done ion-icon{font-size:20px;color:var(--ion-color-success);flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ModalLayoutComponent, selector: "val-modal-layout", inputs: ["title", "subtitle", "closeLabel", "showClose", "actions", "actionsAlign", "footer", "footerClass"], outputs: ["close", "actionClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoginAttemptModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'val-login-attempt-modal', standalone: true, imports: [
                         CommonModule,
-                        IonContent,
-                        IonHeader,
-                        IonToolbar,
-                        IonButtons,
-                        IonButton,
                         IonIcon,
-                        DisplayComponent,
                         TextComponent,
-                        ButtonComponent,
+                        ModalLayoutComponent,
                     ], template: `
-    <ion-header>
-      <ion-toolbar>
-        <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" shape="round" (click)="close()">
-            <strong>{{ closeLabel }}</strong>
-          </ion-button>
-        </ion-buttons>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-      <val-display [props]="{ content: title, size: 'small', color: 'dark' }" />
+    <val-modal-layout
+      [title]="title"
+      [closeLabel]="closeLabel"
+      [actions]="actions"
+      actionsAlign="stretch"
+      (close)="close()"
+      (actionClick)="handleAction($event)"
+    >
       <div class="attempt">
         <div class="attempt__hero">
           <ion-icon name="shield-checkmark-outline" aria-hidden="true" />
@@ -60390,19 +60394,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           </div>
         }
       </div>
-    </ion-content>
-
-    @if (!done()) {
-      <div class="attempt__actions">
-        <val-button [props]="mineBtn" (click)="confirmMine()" />
-        <val-button [props]="blockBtn" (click)="confirmBlock()" />
-      </div>
-    } @else {
-      <div class="attempt__actions">
-        <val-button [props]="closeBtn" (click)="close()" />
-      </div>
-    }
-  `, styles: [":host{display:block}.attempt{display:flex;flex-direction:column;gap:18px;align-items:flex-start}.attempt__hero{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:#7026df1a}.attempt__hero ion-icon{font-size:30px;color:var(--ion-color-primary, #7026df)}.attempt__device{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;border-radius:12px;background:var(--ion-color-light, #f4f5f8);border:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.attempt__device ion-icon{font-size:26px;color:var(--ion-color-dark);flex-shrink:0}.attempt__device-body{display:flex;flex-direction:column;gap:2px;min-width:0}.attempt__done{display:flex;align-items:center;gap:8px}.attempt__done ion-icon{font-size:20px;color:var(--ion-color-success);flex-shrink:0}.attempt__actions{display:flex;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.attempt__actions val-button{flex:1}\n"] }]
+    </val-modal-layout>
+  `, styles: [":host{display:block}.attempt{display:flex;flex-direction:column;gap:18px;align-items:flex-start}.attempt__hero{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:#7026df1a}.attempt__hero ion-icon{font-size:30px;color:var(--ion-color-primary, #7026df)}.attempt__device{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;border-radius:12px;background:var(--ion-color-light, #f4f5f8);border:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.attempt__device ion-icon{font-size:26px;color:var(--ion-color-dark);flex-shrink:0}.attempt__device-body{display:flex;flex-direction:column;gap:2px;min-width:0}.attempt__done{display:flex;align-items:center;gap:8px}.attempt__done ion-icon{font-size:20px;color:var(--ion-color-success);flex-shrink:0}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], body: [{
@@ -60505,17 +60498,7 @@ class SessionListModalComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SessionListModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SessionListModalComponent, isStandalone: true, selector: "val-session-list-modal", inputs: { sessions: "sessions", title: "title", closeLabel: "closeLabel", thisLabel: "thisLabel", revokeLabel: "revokeLabel", onRevoke: "onRevoke", _modalRef: "_modalRef" }, ngImport: i0, template: `
-    <ion-header>
-      <ion-toolbar>
-        <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" shape="round" (click)="close()">
-            <strong>{{ closeLabel }}</strong>
-          </ion-button>
-        </ion-buttons>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-      <val-display [props]="{ content: title, size: 'small', color: 'dark' }" />
+    <val-modal-layout [title]="title" [closeLabel]="closeLabel" (close)="close()">
       <ul class="sessions">
         @for (s of sessionsLocal(); track s.sessionId) {
           <li class="session" [class.session--current]="s.isCurrent">
@@ -60548,34 +60531,19 @@ class SessionListModalComponent {
           </li>
         }
       </ul>
-    </ion-content>
-  `, isInline: true, styles: [":host{display:block;height:100%}.sessions{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}.session{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:var(--ion-color-light, rgba(0, 0, 0, .04));border:1px solid transparent}.session--current{background:#2dd36f1a;border-color:#2dd36f4d}.session__icon{font-size:26px;color:var(--ion-color-dark, #1a1a1a);flex-shrink:0}.session--current .session__icon{color:var(--ion-color-success-shade, #28ba62)}.session__body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.session__end{flex-shrink:0}.session__badge{display:inline-block;padding:4px 10px;font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ion-color-success-shade, #28ba62);background:#2dd36f2e;border-radius:999px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { 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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }] }); }
+    </val-modal-layout>
+  `, isInline: true, styles: [":host{display:block;height:100%}.sessions{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}.session{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:var(--ion-color-light, rgba(0, 0, 0, .04));border:1px solid transparent}.session--current{background:#2dd36f1a;border-color:#2dd36f4d}.session__icon{font-size:26px;color:var(--ion-color-dark, #1a1a1a);flex-shrink:0}.session--current .session__icon{color:var(--ion-color-success-shade, #28ba62)}.session__body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.session__end{flex-shrink:0}.session__badge{display:inline-block;padding:4px 10px;font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ion-color-success-shade, #28ba62);background:#2dd36f2e;border-radius:999px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: ModalLayoutComponent, selector: "val-modal-layout", inputs: ["title", "subtitle", "closeLabel", "showClose", "actions", "actionsAlign", "footer", "footerClass"], outputs: ["close", "actionClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SessionListModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'val-session-list-modal', standalone: true, imports: [
                         CommonModule,
-                        IonContent,
-                        IonHeader,
-                        IonToolbar,
-                        IonButtons,
-                        IonButton,
                         IonIcon,
-                        DisplayComponent,
                         TextComponent,
                         ButtonComponent,
+                        ModalLayoutComponent,
                     ], template: `
-    <ion-header>
-      <ion-toolbar>
-        <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" shape="round" (click)="close()">
-            <strong>{{ closeLabel }}</strong>
-          </ion-button>
-        </ion-buttons>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-      <val-display [props]="{ content: title, size: 'small', color: 'dark' }" />
+    <val-modal-layout [title]="title" [closeLabel]="closeLabel" (close)="close()">
       <ul class="sessions">
         @for (s of sessionsLocal(); track s.sessionId) {
           <li class="session" [class.session--current]="s.isCurrent">
@@ -60608,7 +60576,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           </li>
         }
       </ul>
-    </ion-content>
+    </val-modal-layout>
   `, styles: [":host{display:block;height:100%}.sessions{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}.session{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:var(--ion-color-light, rgba(0, 0, 0, .04));border:1px solid transparent}.session--current{background:#2dd36f1a;border-color:#2dd36f4d}.session__icon{font-size:26px;color:var(--ion-color-dark, #1a1a1a);flex-shrink:0}.session--current .session__icon{color:var(--ion-color-success-shade, #28ba62)}.session__body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.session__end{flex-shrink:0}.session__badge{display:inline-block;padding:4px 10px;font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ion-color-success-shade, #28ba62);background:#2dd36f2e;border-radius:999px}\n"] }]
         }], propDecorators: { sessions: [{
                 type: Input
@@ -62196,17 +62164,7 @@ class DeleteAccountModalComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DeleteAccountModalComponent, isStandalone: true, selector: "val-delete-account-modal", inputs: { i18nNamespace: "i18nNamespace", isOpen: "isOpen" }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: `
     <ion-modal [isOpen]="isOpen" (didDismiss)="close()" cssClass="val-modal-adaptive">
       <ng-template>
-        <ion-header>
-          <ion-toolbar>
-            <ion-buttons slot="end">
-              <ion-button fill="clear" color="dark" shape="round" (click)="close()">
-                <strong>{{ t('close') }}</strong>
-              </ion-button>
-            </ion-buttons>
-          </ion-toolbar>
-        </ion-header>
-
-        <ion-content class="ion-padding">
+        <val-modal-layout [closeLabel]="t('close')" (close)="close()">
           <section class="modal-form-section">
             @if (hasPassword() === null) {
               <div class="spinner-center">
@@ -62231,27 +62189,17 @@ class DeleteAccountModalComponent {
               </div>
             }
           </section>
-        </ion-content>
+        </val-modal-layout>
       </ng-template>
     </ion-modal>
-  `, isInline: true, styles: [".modal-form-section{display:flex;flex-direction:column;gap:16px;padding-top:8px}.resend-row{display:flex;justify-content:center;margin-top:-8px}.spinner-center{display:flex;justify-content:center;padding-top:32px}\n"], dependencies: [{ kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { 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: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onValueChange", "onInvalid", "onSelectChange"] }] }); }
+  `, isInline: true, styles: [".modal-form-section{display:flex;flex-direction:column;gap:16px;padding-top:8px}.resend-row{display:flex;justify-content:center;margin-top:-8px}.spinner-center{display:flex;justify-content:center;padding-top:32px}\n"], dependencies: [{ kind: "component", type: IonModal, selector: "ion-modal" }, { 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: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onValueChange", "onInvalid", "onSelectChange"] }, { kind: "component", type: ModalLayoutComponent, selector: "val-modal-layout", inputs: ["title", "subtitle", "closeLabel", "showClose", "actions", "actionsAlign", "footer", "footerClass"], outputs: ["close", "actionClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DeleteAccountModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-delete-account-modal', standalone: true, imports: [IonModal, IonHeader, IonToolbar, IonButtons, IonButton, IonContent, IonSpinner, FormComponent], template: `
+            args: [{ selector: 'val-delete-account-modal', standalone: true, imports: [IonModal, IonButton, IonSpinner, FormComponent, ModalLayoutComponent], template: `
     <ion-modal [isOpen]="isOpen" (didDismiss)="close()" cssClass="val-modal-adaptive">
       <ng-template>
-        <ion-header>
-          <ion-toolbar>
-            <ion-buttons slot="end">
-              <ion-button fill="clear" color="dark" shape="round" (click)="close()">
-                <strong>{{ t('close') }}</strong>
-              </ion-button>
-            </ion-buttons>
-          </ion-toolbar>
-        </ion-header>
-
-        <ion-content class="ion-padding">
+        <val-modal-layout [closeLabel]="t('close')" (close)="close()">
           <section class="modal-form-section">
             @if (hasPassword() === null) {
               <div class="spinner-center">
@@ -62276,7 +62224,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               </div>
             }
           </section>
-        </ion-content>
+        </val-modal-layout>
       </ng-template>
     </ion-modal>
   `, styles: [".modal-form-section{display:flex;flex-direction:column;gap:16px;padding-top:8px}.resend-row{display:flex;justify-content:center;margin-top:-8px}.spinner-center{display:flex;justify-content:center;padding-top:32px}\n"] }]
@@ -72397,7 +72345,7 @@ const PROFILE_MODAL_I18N = {
  * perfil desde el avatar del header. Se abre vía `ModalService.open({ component })`
  * (recibe `_modalRef` por componentProps) o lo despacha `HeaderActionsService`.
  *
- * Header canónico (Regla #5): sin `ion-title`, botón Cerrar en `slot=end`.
+ * Usa `val-modal-layout` como shell estándar de modales.
  */
 class ProfileModalComponent {
     constructor() {
@@ -72414,39 +72362,21 @@ class ProfileModalComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProfileModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ProfileModalComponent, isStandalone: true, selector: "val-profile-modal", inputs: { _modalRef: "_modalRef" }, ngImport: i0, template: `
-    <ion-header>
-      <ion-toolbar>
-        <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="close()">
-            <strong>{{ t('close') }}</strong>
-          </ion-button>
-        </ion-buttons>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
+    <val-modal-layout [closeLabel]="t('close')" (close)="close()">
       <val-profile-content />
-    </ion-content>
-  `, isInline: true, dependencies: [{ 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: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: ProfileContentComponent, selector: "val-profile-content", inputs: ["config"] }] }); }
+    </val-modal-layout>
+  `, isInline: true, dependencies: [{ kind: "component", type: ModalLayoutComponent, selector: "val-modal-layout", inputs: ["title", "subtitle", "closeLabel", "showClose", "actions", "actionsAlign", "footer", "footerClass"], outputs: ["close", "actionClick"] }, { kind: "component", type: ProfileContentComponent, selector: "val-profile-content", inputs: ["config"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProfileModalComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'val-profile-modal',
                     standalone: true,
-                    imports: [IonButton, IonButtons, IonContent, IonHeader, IonToolbar, ProfileContentComponent],
+                    imports: [ModalLayoutComponent, ProfileContentComponent],
                     template: `
-    <ion-header>
-      <ion-toolbar>
-        <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="close()">
-            <strong>{{ t('close') }}</strong>
-          </ion-button>
-        </ion-buttons>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
+    <val-modal-layout [closeLabel]="t('close')" (close)="close()">
       <val-profile-content />
-    </ion-content>
+    </val-modal-layout>
   `,
                 }]
         }], ctorParameters: () => [], propDecorators: { _modalRef: [{