valtech-components 4.0.25 → 4.0.27

package/fesm2022/valtech-components.mjs

@@ -25,7 +25,7 @@ import { getApps, getApp, initializeApp as initializeApp$1 } from 'firebase/app'
 import * as i2$1 from '@ionic/angular/standalone';
 import { AlertController, IonAvatar, IonCard, IonIcon, IonButton, IonSpinner, IonText, IonModal, IonHeader, IonToolbar, IonContent, IonButtons, IonTitle, IonProgressBar, IonSkeletonText, IonFab, IonFabButton, IonFabList, IonLabel, IonCardContent, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCheckbox, IonRadio, IonRadioGroup, IonTextarea, IonDatetime, IonSelect, IonSelectOption, IonPopover, IonList, IonItem, IonInput, IonRange, IonSearchbar, IonSegment, IonSegmentButton, IonToggle, IonRippleEffect, IonAccordion, IonAccordionGroup, IonTabBar, IonTabButton, IonBadge, IonBreadcrumb, IonBreadcrumbs, IonChip, IonNote, IonDatetimeButton, ToastController as ToastController$1, IonCol, IonRow, IonRefresher, IonRefresherContent, IonMenuButton, IonFooter, IonListHeader, IonInfiniteScroll, IonInfiniteScrollContent, IonGrid, MenuController, IonMenu, IonMenuToggle, IonSplitPane } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
-import { addOutline, addCircleOutline, alertOutline, alertCircleOutline, arrowBackOutline, arrowForwardOutline, arrowDownOutline, settings, settingsOutline, checkmarkCircleOutline, ellipsisHorizontalOutline, notifications, notificationsOutline, openOutline, closeOutline, chatbubblesOutline, shareOutline, heart, heartOutline, home, homeOutline, eyeOffOutline, eyeOutline, scanOutline, chevronDownOutline, chevronForwardOutline, checkmarkOutline, clipboardOutline, copyOutline, filterOutline, locationOutline, calendarOutline, businessOutline, logoTwitter, logoInstagram, logoLinkedin, logoYoutube, logoTiktok, logoFacebook, logoGoogle, createOutline, trashOutline, playOutline, peopleOutline, phonePortraitOutline, refreshOutline, documentTextOutline, lockClosedOutline, cloudUploadOutline, informationCircleOutline, logoNpm, removeOutline, optionsOutline, personOutline, shieldCheckmarkOutline, keyOutline, desktopOutline, logOutOutline, cloudDownloadOutline, cloudOutline, gitBranchOutline, layersOutline, serverOutline, warningOutline, bulbOutline, lockOpenOutline, diamondOutline, add, close, share, create, trash, star, camera, mic, send, downloadOutline, chevronDown, language, globeOutline, checkmark, list, grid, apps, menu, search, person, helpCircle, informationCircle, documentText, mail, calendar, folder, chevronForward, ellipsisHorizontal, chevronBack, playBack, playForward, ellipse, starOutline, starHalf, heartHalf, checkmarkCircle, timeOutline, flag, trendingUp, trendingDown, remove, analytics, people, cash, cart, eye, chatbubbleOutline, thumbsUpOutline, thumbsUp, happyOutline, happy, sadOutline, sad, chevronUp, pin, pencil, callOutline, logoWhatsapp, paperPlaneOutline, mailOutline, chevronDownCircleOutline, closeCircle, alertCircle, logoApple, logoMicrosoft, linkOutline, unlinkOutline, cloudOfflineOutline, documentOutline, attachOutline, cameraOutline, closeCircleOutline, imageOutline, chevronBackOutline, sendOutline, chatbubbleEllipsesOutline, swapVerticalOutline, chevronUpOutline, searchOutline, cartOutline, chatbubble, compass, compassOutline, gridOutline, listOutline, folderOutline, documents, documentsOutline, statsChart, statsChartOutline, laptopOutline, swapHorizontalOutline, notificationsOffOutline, alarmOutline, chatboxEllipsesOutline, checkmarkDoneOutline, cogOutline, shareSocialOutline, helpCircleOutline, menuOutline, stopCircleOutline, videocamOffOutline } from 'ionicons/icons';
+import { addOutline, addCircleOutline, alertOutline, alertCircleOutline, arrowBackOutline, arrowForwardOutline, arrowDownOutline, settings, settingsOutline, checkmarkCircleOutline, ellipsisHorizontalOutline, notifications, notificationsOutline, openOutline, closeOutline, chatbubblesOutline, shareOutline, heart, heartOutline, home, homeOutline, eyeOffOutline, eyeOutline, scanOutline, chevronDownOutline, chevronForwardOutline, checkmarkOutline, clipboardOutline, copyOutline, filterOutline, locationOutline, calendarOutline, businessOutline, logoTwitter, logoInstagram, logoLinkedin, logoYoutube, logoTiktok, logoFacebook, logoGoogle, createOutline, trashOutline, playOutline, peopleOutline, phonePortraitOutline, refreshOutline, documentTextOutline, lockClosedOutline, cloudUploadOutline, informationCircleOutline, logoNpm, removeOutline, optionsOutline, personOutline, shieldCheckmarkOutline, keyOutline, desktopOutline, logOutOutline, cloudDownloadOutline, cloudOutline, gitBranchOutline, layersOutline, serverOutline, warningOutline, bulbOutline, lockOpenOutline, diamondOutline, add, close, share, create, trash, star, camera, mic, send, downloadOutline, chevronDown, language, globeOutline, checkmark, list, grid, apps, menu, search, person, helpCircle, informationCircle, documentText, mail, calendar, folder, chevronForward, ellipsisHorizontal, chevronBack, playBack, playForward, ellipse, starOutline, starHalf, heartHalf, checkmarkCircle, timeOutline, flag, trendingUp, trendingDown, remove, analytics, people, cash, cart, eye, chatbubbleOutline, thumbsUpOutline, thumbsUp, happyOutline, happy, sadOutline, sad, chevronUp, pin, pencil, callOutline, logoWhatsapp, paperPlaneOutline, mailOutline, chevronDownCircleOutline, closeCircle, alertCircle, logoApple, logoMicrosoft, linkOutline, unlinkOutline, cloudOfflineOutline, documentOutline, attachOutline, cameraOutline, closeCircleOutline, imageOutline, chevronBackOutline, sendOutline, chatbubbleEllipsesOutline, swapVerticalOutline, chevronUpOutline, searchOutline, cartOutline, chatbubble, compass, compassOutline, gridOutline, listOutline, folderOutline, documents, documentsOutline, statsChart, statsChartOutline, laptopOutline, swapHorizontalOutline, codeSlashOutline, notificationsOffOutline, alarmOutline, chatboxEllipsesOutline, checkmarkDoneOutline, cogOutline, shareSocialOutline, helpCircleOutline, menuOutline, stopCircleOutline, videocamOffOutline } from 'ionicons/icons';
 import { Browser } from '@capacitor/browser';
 import * as i1$6 from '@angular/platform-browser';
 import { DomSanitizer, Meta, Title } from '@angular/platform-browser';
@@ -56,7 +56,7 @@ import { BrowserMultiFormatReader } from '@zxing/browser';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '4.0.25';
+const VERSION = '4.0.27';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -5499,7 +5499,7 @@ class MessagingService {
             const token = await this.requestPermission();
             if (!token) {
                 // requestPermission devuelve null tanto por permiso denegado como por
-                // fallo al obtener el token. Distinguimos por el estado del permiso.
+                // fallo al obtener el token. Distivdsmos por el estado del permiso.
                 const permission = this.getPermissionState();
                 if (permission === 'denied' || permission === 'default') {
                     return { status: 'denied', reason: 'Permiso de notificaciones denegado' };
@@ -29795,7 +29795,7 @@ class ModalShellComponent {
       <ion-toolbar>
         @if (showClose()) {
           <ion-buttons slot="end">
-            <ion-button fill="clear" color="dark" (click)="onClose()">
+            <ion-button fill="clear" color="dark" shape="round" (click)="onClose()">
               <strong>{{ resolvedCloseLabel() }}</strong>
             </ion-button>
           </ion-buttons>
@@ -29820,7 +29820,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       <ion-toolbar>
         @if (showClose()) {
           <ion-buttons slot="end">
-            <ion-button fill="clear" color="dark" (click)="onClose()">
+            <ion-button fill="clear" color="dark" shape="round" (click)="onClose()">
               <strong>{{ resolvedCloseLabel() }}</strong>
             </ion-button>
           </ion-buttons>
@@ -33391,7 +33391,7 @@ class ChangePasswordModalComponent {
                         },
                     ],
                     actions: {
-                        ...button({ text: '', type: 'submit', fill: 'solid', expand: 'block' }),
+                        ...button({ text: '', type: 'submit', fill: 'solid', expand: 'block', shape: 'round' }),
                         token: 'set-submit',
                         textKey: 'setPasswordSubmit',
                     },
@@ -33425,7 +33425,7 @@ class ChangePasswordModalComponent {
                     },
                 ],
                 actions: {
-                    ...button({ text: '', type: 'submit', fill: 'solid', expand: 'block' }),
+                    ...button({ text: '', type: 'submit', fill: 'solid', expand: 'block', shape: 'round' }),
                     token: 'change-submit',
                     textKey: 'changePasswordSubmit',
                 },
@@ -33564,11 +33564,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()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" (click)=\"close()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <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;max-width:420px;margin:0 auto;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", "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()\">\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;max-width:420px;margin:0 auto;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", "onInvalid", "onSelectChange"] }] }); }
 }
 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()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" (click)=\"close()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <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;max-width:420px;margin:0 auto;padding-top:8px}.modal-loading{display:flex;justify-content:center;padding:40px 0}\n"] }]
+            args: [{ selector: 'val-change-password-modal', standalone: true, imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonSpinner, IonToolbar, FormComponent], template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" 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;max-width:420px;margin:0 auto;padding-top:8px}.modal-loading{display:flex;justify-content:center;padding:40px 0}\n"] }]
         }], propDecorators: { isOpen: [{
                 type: Input
             }], changed: [{
@@ -35789,7 +35789,7 @@ class MfaModalComponent {
         this.toast.show({ message, duration: 3500 });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MfaModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MfaModalComponent, isStandalone: true, selector: "val-mfa-modal", inputs: { isOpen: "isOpen", prefillCode: "prefillCode" }, outputs: { changed: "changed", enabledViaDeeplink: "enabledViaDeeplink", dismissed: "dismissed" }, ngImport: i0, template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\" cssClass=\"val-modal-adaptive\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" (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\" (click)=\"copyCodes(codes)\">\n            {{ t('mfaCopyCodes') }}\n          </ion-button>\n          } @else { @if (backupCodesCount() < 3) {\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesLow') }}</p>\n          </div>\n          }\n          <ion-button\n            expand=\"block\"\n            color=\"dark\"\n            fill=\"outline\"\n            [disabled]=\"working()\"\n            (click)=\"regenerateBackupCodes()\"\n          >\n            @if (working()) {\n            <ion-spinner name=\"crescent\"></ion-spinner>\n            } @else { {{ t('mfaRegenerateCodes') }} }\n          </ion-button>\n          }\n        </div>\n        }\n\n        <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" (click)=\"goToDisable()\">\n          {{ t('mfaDisableButton') }}\n        </ion-button>\n        } @else {\n        <p class=\"mfa-status mfa-status--off\">{{ t('mfaDisabledLabel') }}</p>\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisabledHint') }\" />\n        <ion-button expand=\"block\" (click)=\"goToMethodSelect()\"> {{ t('mfaEnableButton') }} </ion-button>\n        } } @case ('method-select') {\n        <val-title [props]=\"{ content: t('mfaEnableTitle'), size: 'large', color: 'dark', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaMethodPrompt') }\" />\n\n        <div class=\"mfa-method-list\" role=\"radiogroup\">\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'TOTP'\"\n            (click)=\"selectedMethod.set('TOTP')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'TOTP'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodTotp') }}</strong>\n              <span>{{ t('mfaMethodTotpHint') }}</span>\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'EMAIL'\"\n            (click)=\"selectedMethod.set('EMAIL')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'EMAIL'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodEmail') }}</strong>\n              <span>{{ t('mfaMethodEmailHint') }}</span>\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'SMS'\"\n            (click)=\"selectedMethod.set('SMS')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'SMS'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodSms') }}</strong>\n              <span>{{ t('mfaMethodSmsHint') }}</span>\n            </span>\n          </button>\n        </div>\n\n        @if (selectedMethod() === 'SMS' && !userPhone()) {\n        <ion-input\n          label=\"{{ t('mfaPhoneLabel') }}\"\n          labelPlacement=\"floating\"\n          fill=\"outline\"\n          type=\"tel\"\n          placeholder=\"+56912345678\"\n          [formControl]=\"phoneControl\"\n        ></ion-input>\n        @if (phoneControl.invalid && phoneControl.touched) {\n        <p class=\"mfa-error\">{{ t('mfaPhoneInvalid') }}</p>\n        } } @if (selectedMethod() === 'SMS' && userPhone(); as phone) {\n        <val-text\n          [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaPhoneRegistered') + ': ' + phone }\"\n        />\n        }\n\n        <ion-button expand=\"block\" [disabled]=\"working()\" (click)=\"proceedWithMethod()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaContinue') }} }\n        </ion-button>\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('totp-setup') {\n        <val-title [props]=\"{ content: t('mfaTotpSetupTitle'), size: 'large', color: '', bold: false }\" />\n        <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\" [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\" (click)=\"copyCodes(setup.backupCodes)\">\n            {{ t('mfaCopyCodes') }}\n          </ion-button>\n        </div>\n        }\n\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('code-confirm') {\n        <val-title [props]=\"{ content: t('mfaConfirmTitle'), size: 'large', color: '', bold: false }\" />\n        <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\" [disabled]=\"working()\" (click)=\"confirmCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaConfirmButton') }} }\n        </ion-button>\n\n        <p class=\"mfa-resend\">\n          {{ t('mfaNoCode') }} @if (resendCooldown() > 0) {\n          <span>{{ t('mfaResendIn') }} {{ resendCooldown() }}s</span>\n          } @else {\n          <a (click)=\"resendCode()\">{{ t('mfaResend') }}</a>\n          }\n        </p>\n\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" (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\" [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\" [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\" [disabled]=\"working()\" (click)=\"disableWithMfaCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableButton') }} }\n        </ion-button>\n        <ion-button expand=\"block\" fill=\"clear\" color=\"medium\" [disabled]=\"working()\" (click)=\"sendDisableCode()\">\n          {{ t('mfaDisableResendCode') }}\n        </ion-button>\n        } } @else {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableNeedsPassword') }\" />\n        }\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".mfa-modal{display:flex;flex-direction:column;gap:14px;padding-top:4px}.mfa-loading{display:flex;justify-content:center;padding:40px 0}.mfa-status{display:inline-flex;align-items:center;width:fit-content;padding:4px 10px;border-radius:999px;font-size:.8125rem;font-weight:600;margin:0}.mfa-status--on{color:var(--ion-color-success-shade);background:rgba(var(--ion-color-success-rgb),.12)}.mfa-status--off{color:var(--ion-color-medium-shade);background:var(--ion-color-light)}.mfa-secret-row{display:flex;align-items:center;gap:8px}.mfa-secret-row .mfa-secret{flex:1;margin:0}.mfa-secret-row ion-button{flex-shrink:0;--color: var(--ion-color-dark);margin:0}.mfa-error{color:var(--ion-color-danger);font-size:.8125rem;margin:4px 0 0}.mfa-block,.mfa-backup{display:flex;flex-direction:column;gap:12px}.mfa-block{padding:16px;border-radius:14px;background:var(--ion-color-light)}.mfa-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:10px;background:var(--ion-color-light);border-left:3px solid var(--ion-color-primary)}.mfa-alert ion-icon{font-size:1.25rem;color:var(--ion-color-primary);flex-shrink:0;margin-top:1px}.mfa-alert p{margin:0;font-size:.8125rem;line-height:1.45;color:var(--ion-color-dark)}.mfa-qr{display:flex;justify-content:center;padding:8px 0}.mfa-secret{display:block;padding:10px 12px;border-radius:8px;background:var(--ion-color-light);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9375rem;letter-spacing:.04em;word-break:break-all;text-align:center}.mfa-pin{display:flex;justify-content:center;padding:8px 0}.mfa-codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px;border-radius:12px;background:var(--ion-color-light)}.mfa-code{padding:8px;border-radius:6px;background:var(--ion-background-color, #fff);color:var(--ion-color-dark);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8125rem;text-align:center}.mfa-method-list{display:flex;flex-direction:column;gap:8px}.mfa-method-card{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:12px;border:1.5px solid var(--ion-border-color, rgba(var(--ion-color-dark-rgb), .14));background:transparent;cursor:pointer;text-align:left;width:100%;transition:border-color .15s ease,background .15s ease}.mfa-method-card--active{border-color:var(--ion-color-primary);background:rgba(var(--ion-color-primary-rgb),.07)}.mfa-method-card__dot{flex-shrink:0;width:18px;height:18px;border-radius:50%;border:2px solid var(--ion-color-medium);margin-top:2px;transition:border-color .15s,box-shadow .15s}.mfa-method-card--active .mfa-method-card__dot{border-color:var(--ion-color-primary);box-shadow:inset 0 0 0 4px var(--ion-color-primary)}.mfa-method-card__body{display:flex;flex-direction:column;gap:3px}.mfa-method-card__body strong{font-size:.9375rem;font-weight:600;color:var(--ion-color-dark)}.mfa-method-card__body span{font-size:.8125rem;color:var(--ion-color-medium);line-height:1.4}.mfa-resend{text-align:center;font-size:.875rem;color:var(--ion-color-dark);margin:4px 0}.mfa-resend a{color:var(--ion-color-primary);cursor:pointer;font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onInvalid", "onSelectChange"] }, { kind: "component", type: QrCodeComponent, selector: "val-qr-code", inputs: ["props"], outputs: ["actionComplete", "imageLoad", "imageError"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: PinInputComponent, selector: "val-pin-input", inputs: ["props"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MfaModalComponent, isStandalone: true, selector: "val-mfa-modal", inputs: { isOpen: "isOpen", prefillCode: "prefillCode" }, outputs: { changed: "changed", enabledViaDeeplink: "enabledViaDeeplink", dismissed: "dismissed" }, ngImport: i0, template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\" cssClass=\"val-modal-adaptive\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" shape=\"round\" (click)=\"close()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content class=\"ion-padding\">\n      <section class=\"mfa-modal\">\n        <val-display [props]=\"{ content: t('mfaManageTitle'), size: 'small', color: 'dark' }\" />\n\n        @switch (step()) { @case ('loading') {\n        <div class=\"mfa-loading\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n        </div>\n        } @case ('status') { @if (mfaEnabled()) {\n        <p class=\"mfa-status mfa-status--on\">{{ t('mfaEnabledLabel') }} \u00B7 {{ methodLabel(mfaMethod()) }}</p>\n\n        @if (mfaMethod() === 'TOTP') {\n        <div class=\"mfa-block\">\n          <val-title [props]=\"{ size: 'small', color: 'dark', bold: true, content: t('mfaBackupCodesTitle') }\" />\n          <val-text\n            [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaBackupCodesAvailable') + ': ' + backupCodesCount() }\"\n          />\n\n          @if (regeneratedCodes(); as codes) {\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesSaveWarning') }} {{ t('mfaBackupCodesExplain') }}</p>\n          </div>\n          <div class=\"mfa-codes\">\n            @for (code of codes; track code) {\n            <code class=\"mfa-code\">{{ code }}</code>\n            }\n          </div>\n          <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" shape=\"round\" (click)=\"copyCodes(codes)\">\n            {{ t('mfaCopyCodes') }}\n          </ion-button>\n          } @else { @if (backupCodesCount() < 3) {\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesLow') }}</p>\n          </div>\n          }\n          <ion-button\n            expand=\"block\"\n            color=\"dark\"\n            fill=\"outline\"\n            shape=\"round\"\n            [disabled]=\"working()\"\n            (click)=\"regenerateBackupCodes()\"\n          >\n            @if (working()) {\n            <ion-spinner name=\"crescent\"></ion-spinner>\n            } @else { {{ t('mfaRegenerateCodes') }} }\n          </ion-button>\n          }\n        </div>\n        }\n\n        <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" shape=\"round\" (click)=\"goToDisable()\">\n          {{ t('mfaDisableButton') }}\n        </ion-button>\n        } @else {\n        <p class=\"mfa-status mfa-status--off\">{{ t('mfaDisabledLabel') }}</p>\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisabledHint') }\" />\n        <ion-button expand=\"block\" shape=\"round\" (click)=\"goToMethodSelect()\"> {{ t('mfaEnableButton') }} </ion-button>\n        } } @case ('method-select') {\n        <val-title [props]=\"{ content: t('mfaEnableTitle'), size: 'large', color: 'dark', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaMethodPrompt') }\" />\n\n        <div class=\"mfa-method-list\" role=\"radiogroup\">\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'TOTP'\"\n            (click)=\"selectedMethod.set('TOTP')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'TOTP'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodTotp') }}</strong>\n              <span>{{ t('mfaMethodTotpHint') }}</span>\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'EMAIL'\"\n            (click)=\"selectedMethod.set('EMAIL')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'EMAIL'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodEmail') }}</strong>\n              <span>{{ t('mfaMethodEmailHint') }}</span>\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'SMS'\"\n            (click)=\"selectedMethod.set('SMS')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'SMS'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodSms') }}</strong>\n              <span>{{ t('mfaMethodSmsHint') }}</span>\n            </span>\n          </button>\n        </div>\n\n        @if (selectedMethod() === 'SMS' && !userPhone()) {\n        <ion-input\n          label=\"{{ t('mfaPhoneLabel') }}\"\n          labelPlacement=\"floating\"\n          fill=\"outline\"\n          type=\"tel\"\n          placeholder=\"+56912345678\"\n          [formControl]=\"phoneControl\"\n        ></ion-input>\n        @if (phoneControl.invalid && phoneControl.touched) {\n        <p class=\"mfa-error\">{{ t('mfaPhoneInvalid') }}</p>\n        } } @if (selectedMethod() === 'SMS' && userPhone(); as phone) {\n        <val-text\n          [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaPhoneRegistered') + ': ' + phone }\"\n        />\n        }\n\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"proceedWithMethod()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaContinue') }} }\n        </ion-button>\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" shape=\"round\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('totp-setup') {\n        <val-title [props]=\"{ content: t('mfaTotpSetupTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpStep1') }\" />\n\n        @if (totpQr(); as qr) {\n        <div class=\"mfa-qr\">\n          <val-qr-code [props]=\"{ qr: qr }\" />\n        </div>\n        } @if (totpSetup(); as setup) {\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpManualEntry') }\" />\n        <div class=\"mfa-secret-row\">\n          <code class=\"mfa-secret\">{{ setup.secret }}</code>\n          <ion-button fill=\"clear\" size=\"small\" (click)=\"copySecret(setup.secret)\" [attr.aria-label]=\"t('copy')\">\n            @if (copiedSecret()) {\n            <ion-icon name=\"checkmark-outline\"></ion-icon>\n            } @else {\n            <ion-icon name=\"copy-outline\"></ion-icon>\n            }\n          </ion-button>\n        </div>\n\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpStep2') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"verifyTotp()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaTotpVerify') }} }\n        </ion-button>\n\n        <div class=\"mfa-backup\">\n          <val-title [props]=\"{ size: 'small', color: 'dark', bold: true, content: t('mfaBackupCodesTitle') }\" />\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesSaveWarning') }} {{ t('mfaBackupCodesExplain') }}</p>\n          </div>\n          <div class=\"mfa-codes\">\n            @for (code of setup.backupCodes; track code) {\n            <code class=\"mfa-code\">{{ code }}</code>\n            }\n          </div>\n          <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" shape=\"round\" (click)=\"copyCodes(setup.backupCodes)\">\n            {{ t('mfaCopyCodes') }}\n          </ion-button>\n        </div>\n        }\n\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" shape=\"round\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('code-confirm') {\n        <val-title [props]=\"{ content: t('mfaConfirmTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text\n          [props]=\"{ size: 'medium', color: 'dark', bold: false, content: selectedMethod() === 'EMAIL' ? t('mfaConfirmPromptEmail') : t('mfaConfirmPromptSms') }\"\n        />\n\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"confirmCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaConfirmButton') }} }\n        </ion-button>\n\n        <p class=\"mfa-resend\">\n          {{ t('mfaNoCode') }} @if (resendCooldown() > 0) {\n          <span>{{ t('mfaResendIn') }} {{ resendCooldown() }}s</span>\n          } @else {\n          <a (click)=\"resendCode()\">{{ t('mfaResend') }}</a>\n          }\n        </p>\n\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" shape=\"round\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('disable') { @if (hasPassword()) {\n        <val-form [props]=\"disableFormProps()\" (onSubmit)=\"onDisableSubmit($event)\" />\n        } @else if (mfaMethod() === 'TOTP') {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableTotpPrompt') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"disableWithMfaCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableButton') }} }\n        </ion-button>\n        } @else if (mfaMethod() === 'EMAIL' || mfaMethod() === 'SMS') {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        @if (!disableCodeSent()) {\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableCodePrompt') }\" />\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"sendDisableCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableSendCode') }} }\n        </ion-button>\n        } @else {\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableCodePrompt') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"disableWithMfaCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableButton') }} }\n        </ion-button>\n        <ion-button expand=\"block\" fill=\"clear\" color=\"medium\" shape=\"round\" [disabled]=\"working()\" (click)=\"sendDisableCode()\">\n          {{ t('mfaDisableResendCode') }}\n        </ion-button>\n        } } @else {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableNeedsPassword') }\" />\n        }\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" shape=\"round\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".mfa-modal{display:flex;flex-direction:column;gap:14px;padding-top:4px}.mfa-loading{display:flex;justify-content:center;padding:40px 0}.mfa-status{display:inline-flex;align-items:center;width:fit-content;padding:4px 10px;border-radius:999px;font-size:.8125rem;font-weight:600;margin:0}.mfa-status--on{color:var(--ion-color-success-shade);background:rgba(var(--ion-color-success-rgb),.12)}.mfa-status--off{color:var(--ion-color-medium-shade);background:var(--ion-color-light)}.mfa-secret-row{display:flex;align-items:center;gap:8px}.mfa-secret-row .mfa-secret{flex:1;margin:0}.mfa-secret-row ion-button{flex-shrink:0;--color: var(--ion-color-dark);margin:0}.mfa-error{color:var(--ion-color-danger);font-size:.8125rem;margin:4px 0 0}.mfa-block,.mfa-backup{display:flex;flex-direction:column;gap:12px}.mfa-block{padding:16px;border-radius:14px;background:var(--ion-color-light)}.mfa-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:10px;background:var(--ion-color-light);border-left:3px solid var(--ion-color-primary)}.mfa-alert ion-icon{font-size:1.25rem;color:var(--ion-color-primary);flex-shrink:0;margin-top:1px}.mfa-alert p{margin:0;font-size:.8125rem;line-height:1.45;color:var(--ion-color-dark)}.mfa-qr{display:flex;justify-content:center;padding:8px 0}.mfa-secret{display:block;padding:10px 12px;border-radius:8px;background:var(--ion-color-light);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9375rem;letter-spacing:.04em;word-break:break-all;text-align:center}.mfa-pin{display:flex;justify-content:center;padding:8px 0}.mfa-codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px;border-radius:12px;background:var(--ion-color-light)}.mfa-code{padding:8px;border-radius:6px;background:var(--ion-background-color, #fff);color:var(--ion-color-dark);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8125rem;text-align:center}.mfa-method-list{display:flex;flex-direction:column;gap:8px}.mfa-method-card{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:12px;border:1.5px solid var(--ion-border-color, rgba(var(--ion-color-dark-rgb), .14));background:transparent;cursor:pointer;text-align:left;width:100%;transition:border-color .15s ease,background .15s ease}.mfa-method-card--active{border-color:var(--ion-color-primary);background:rgba(var(--ion-color-primary-rgb),.07)}.mfa-method-card__dot{flex-shrink:0;width:18px;height:18px;border-radius:50%;border:2px solid var(--ion-color-medium);margin-top:2px;transition:border-color .15s,box-shadow .15s}.mfa-method-card--active .mfa-method-card__dot{border-color:var(--ion-color-primary);box-shadow:inset 0 0 0 4px var(--ion-color-primary)}.mfa-method-card__body{display:flex;flex-direction:column;gap:3px}.mfa-method-card__body strong{font-size:.9375rem;font-weight:600;color:var(--ion-color-dark)}.mfa-method-card__body span{font-size:.8125rem;color:var(--ion-color-medium);line-height:1.4}.mfa-resend{text-align:center;font-size:.875rem;color:var(--ion-color-dark);margin:4px 0}.mfa-resend a{color:var(--ion-color-primary);cursor:pointer;font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onInvalid", "onSelectChange"] }, { kind: "component", type: QrCodeComponent, selector: "val-qr-code", inputs: ["props"], outputs: ["actionComplete", "imageLoad", "imageError"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: PinInputComponent, selector: "val-pin-input", inputs: ["props"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MfaModalComponent, decorators: [{
             type: Component,
@@ -35814,7 +35814,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         TextComponent,
                         TitleComponent,
                         PinInputComponent,
-                    ], template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\" cssClass=\"val-modal-adaptive\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" (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\" (click)=\"copyCodes(codes)\">\n            {{ t('mfaCopyCodes') }}\n          </ion-button>\n          } @else { @if (backupCodesCount() < 3) {\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesLow') }}</p>\n          </div>\n          }\n          <ion-button\n            expand=\"block\"\n            color=\"dark\"\n            fill=\"outline\"\n            [disabled]=\"working()\"\n            (click)=\"regenerateBackupCodes()\"\n          >\n            @if (working()) {\n            <ion-spinner name=\"crescent\"></ion-spinner>\n            } @else { {{ t('mfaRegenerateCodes') }} }\n          </ion-button>\n          }\n        </div>\n        }\n\n        <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" (click)=\"goToDisable()\">\n          {{ t('mfaDisableButton') }}\n        </ion-button>\n        } @else {\n        <p class=\"mfa-status mfa-status--off\">{{ t('mfaDisabledLabel') }}</p>\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisabledHint') }\" />\n        <ion-button expand=\"block\" (click)=\"goToMethodSelect()\"> {{ t('mfaEnableButton') }} </ion-button>\n        } } @case ('method-select') {\n        <val-title [props]=\"{ content: t('mfaEnableTitle'), size: 'large', color: 'dark', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaMethodPrompt') }\" />\n\n        <div class=\"mfa-method-list\" role=\"radiogroup\">\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'TOTP'\"\n            (click)=\"selectedMethod.set('TOTP')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'TOTP'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodTotp') }}</strong>\n              <span>{{ t('mfaMethodTotpHint') }}</span>\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'EMAIL'\"\n            (click)=\"selectedMethod.set('EMAIL')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'EMAIL'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodEmail') }}</strong>\n              <span>{{ t('mfaMethodEmailHint') }}</span>\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'SMS'\"\n            (click)=\"selectedMethod.set('SMS')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'SMS'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodSms') }}</strong>\n              <span>{{ t('mfaMethodSmsHint') }}</span>\n            </span>\n          </button>\n        </div>\n\n        @if (selectedMethod() === 'SMS' && !userPhone()) {\n        <ion-input\n          label=\"{{ t('mfaPhoneLabel') }}\"\n          labelPlacement=\"floating\"\n          fill=\"outline\"\n          type=\"tel\"\n          placeholder=\"+56912345678\"\n          [formControl]=\"phoneControl\"\n        ></ion-input>\n        @if (phoneControl.invalid && phoneControl.touched) {\n        <p class=\"mfa-error\">{{ t('mfaPhoneInvalid') }}</p>\n        } } @if (selectedMethod() === 'SMS' && userPhone(); as phone) {\n        <val-text\n          [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaPhoneRegistered') + ': ' + phone }\"\n        />\n        }\n\n        <ion-button expand=\"block\" [disabled]=\"working()\" (click)=\"proceedWithMethod()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaContinue') }} }\n        </ion-button>\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('totp-setup') {\n        <val-title [props]=\"{ content: t('mfaTotpSetupTitle'), size: 'large', color: '', bold: false }\" />\n        <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\" [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\" (click)=\"copyCodes(setup.backupCodes)\">\n            {{ t('mfaCopyCodes') }}\n          </ion-button>\n        </div>\n        }\n\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('code-confirm') {\n        <val-title [props]=\"{ content: t('mfaConfirmTitle'), size: 'large', color: '', bold: false }\" />\n        <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\" [disabled]=\"working()\" (click)=\"confirmCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaConfirmButton') }} }\n        </ion-button>\n\n        <p class=\"mfa-resend\">\n          {{ t('mfaNoCode') }} @if (resendCooldown() > 0) {\n          <span>{{ t('mfaResendIn') }} {{ resendCooldown() }}s</span>\n          } @else {\n          <a (click)=\"resendCode()\">{{ t('mfaResend') }}</a>\n          }\n        </p>\n\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" (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\" [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\" [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\" [disabled]=\"working()\" (click)=\"disableWithMfaCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableButton') }} }\n        </ion-button>\n        <ion-button expand=\"block\" fill=\"clear\" color=\"medium\" [disabled]=\"working()\" (click)=\"sendDisableCode()\">\n          {{ t('mfaDisableResendCode') }}\n        </ion-button>\n        } } @else {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableNeedsPassword') }\" />\n        }\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".mfa-modal{display:flex;flex-direction:column;gap:14px;padding-top:4px}.mfa-loading{display:flex;justify-content:center;padding:40px 0}.mfa-status{display:inline-flex;align-items:center;width:fit-content;padding:4px 10px;border-radius:999px;font-size:.8125rem;font-weight:600;margin:0}.mfa-status--on{color:var(--ion-color-success-shade);background:rgba(var(--ion-color-success-rgb),.12)}.mfa-status--off{color:var(--ion-color-medium-shade);background:var(--ion-color-light)}.mfa-secret-row{display:flex;align-items:center;gap:8px}.mfa-secret-row .mfa-secret{flex:1;margin:0}.mfa-secret-row ion-button{flex-shrink:0;--color: var(--ion-color-dark);margin:0}.mfa-error{color:var(--ion-color-danger);font-size:.8125rem;margin:4px 0 0}.mfa-block,.mfa-backup{display:flex;flex-direction:column;gap:12px}.mfa-block{padding:16px;border-radius:14px;background:var(--ion-color-light)}.mfa-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:10px;background:var(--ion-color-light);border-left:3px solid var(--ion-color-primary)}.mfa-alert ion-icon{font-size:1.25rem;color:var(--ion-color-primary);flex-shrink:0;margin-top:1px}.mfa-alert p{margin:0;font-size:.8125rem;line-height:1.45;color:var(--ion-color-dark)}.mfa-qr{display:flex;justify-content:center;padding:8px 0}.mfa-secret{display:block;padding:10px 12px;border-radius:8px;background:var(--ion-color-light);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9375rem;letter-spacing:.04em;word-break:break-all;text-align:center}.mfa-pin{display:flex;justify-content:center;padding:8px 0}.mfa-codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px;border-radius:12px;background:var(--ion-color-light)}.mfa-code{padding:8px;border-radius:6px;background:var(--ion-background-color, #fff);color:var(--ion-color-dark);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8125rem;text-align:center}.mfa-method-list{display:flex;flex-direction:column;gap:8px}.mfa-method-card{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:12px;border:1.5px solid var(--ion-border-color, rgba(var(--ion-color-dark-rgb), .14));background:transparent;cursor:pointer;text-align:left;width:100%;transition:border-color .15s ease,background .15s ease}.mfa-method-card--active{border-color:var(--ion-color-primary);background:rgba(var(--ion-color-primary-rgb),.07)}.mfa-method-card__dot{flex-shrink:0;width:18px;height:18px;border-radius:50%;border:2px solid var(--ion-color-medium);margin-top:2px;transition:border-color .15s,box-shadow .15s}.mfa-method-card--active .mfa-method-card__dot{border-color:var(--ion-color-primary);box-shadow:inset 0 0 0 4px var(--ion-color-primary)}.mfa-method-card__body{display:flex;flex-direction:column;gap:3px}.mfa-method-card__body strong{font-size:.9375rem;font-weight:600;color:var(--ion-color-dark)}.mfa-method-card__body span{font-size:.8125rem;color:var(--ion-color-medium);line-height:1.4}.mfa-resend{text-align:center;font-size:.875rem;color:var(--ion-color-dark);margin:4px 0}.mfa-resend a{color:var(--ion-color-primary);cursor:pointer;font-weight:600}\n"] }]
+                    ], template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\" cssClass=\"val-modal-adaptive\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" shape=\"round\" (click)=\"close()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content class=\"ion-padding\">\n      <section class=\"mfa-modal\">\n        <val-display [props]=\"{ content: t('mfaManageTitle'), size: 'small', color: 'dark' }\" />\n\n        @switch (step()) { @case ('loading') {\n        <div class=\"mfa-loading\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n        </div>\n        } @case ('status') { @if (mfaEnabled()) {\n        <p class=\"mfa-status mfa-status--on\">{{ t('mfaEnabledLabel') }} \u00B7 {{ methodLabel(mfaMethod()) }}</p>\n\n        @if (mfaMethod() === 'TOTP') {\n        <div class=\"mfa-block\">\n          <val-title [props]=\"{ size: 'small', color: 'dark', bold: true, content: t('mfaBackupCodesTitle') }\" />\n          <val-text\n            [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaBackupCodesAvailable') + ': ' + backupCodesCount() }\"\n          />\n\n          @if (regeneratedCodes(); as codes) {\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesSaveWarning') }} {{ t('mfaBackupCodesExplain') }}</p>\n          </div>\n          <div class=\"mfa-codes\">\n            @for (code of codes; track code) {\n            <code class=\"mfa-code\">{{ code }}</code>\n            }\n          </div>\n          <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" shape=\"round\" (click)=\"copyCodes(codes)\">\n            {{ t('mfaCopyCodes') }}\n          </ion-button>\n          } @else { @if (backupCodesCount() < 3) {\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesLow') }}</p>\n          </div>\n          }\n          <ion-button\n            expand=\"block\"\n            color=\"dark\"\n            fill=\"outline\"\n            shape=\"round\"\n            [disabled]=\"working()\"\n            (click)=\"regenerateBackupCodes()\"\n          >\n            @if (working()) {\n            <ion-spinner name=\"crescent\"></ion-spinner>\n            } @else { {{ t('mfaRegenerateCodes') }} }\n          </ion-button>\n          }\n        </div>\n        }\n\n        <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" shape=\"round\" (click)=\"goToDisable()\">\n          {{ t('mfaDisableButton') }}\n        </ion-button>\n        } @else {\n        <p class=\"mfa-status mfa-status--off\">{{ t('mfaDisabledLabel') }}</p>\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisabledHint') }\" />\n        <ion-button expand=\"block\" shape=\"round\" (click)=\"goToMethodSelect()\"> {{ t('mfaEnableButton') }} </ion-button>\n        } } @case ('method-select') {\n        <val-title [props]=\"{ content: t('mfaEnableTitle'), size: 'large', color: 'dark', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaMethodPrompt') }\" />\n\n        <div class=\"mfa-method-list\" role=\"radiogroup\">\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'TOTP'\"\n            (click)=\"selectedMethod.set('TOTP')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'TOTP'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodTotp') }}</strong>\n              <span>{{ t('mfaMethodTotpHint') }}</span>\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'EMAIL'\"\n            (click)=\"selectedMethod.set('EMAIL')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'EMAIL'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodEmail') }}</strong>\n              <span>{{ t('mfaMethodEmailHint') }}</span>\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'SMS'\"\n            (click)=\"selectedMethod.set('SMS')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'SMS'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodSms') }}</strong>\n              <span>{{ t('mfaMethodSmsHint') }}</span>\n            </span>\n          </button>\n        </div>\n\n        @if (selectedMethod() === 'SMS' && !userPhone()) {\n        <ion-input\n          label=\"{{ t('mfaPhoneLabel') }}\"\n          labelPlacement=\"floating\"\n          fill=\"outline\"\n          type=\"tel\"\n          placeholder=\"+56912345678\"\n          [formControl]=\"phoneControl\"\n        ></ion-input>\n        @if (phoneControl.invalid && phoneControl.touched) {\n        <p class=\"mfa-error\">{{ t('mfaPhoneInvalid') }}</p>\n        } } @if (selectedMethod() === 'SMS' && userPhone(); as phone) {\n        <val-text\n          [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaPhoneRegistered') + ': ' + phone }\"\n        />\n        }\n\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"proceedWithMethod()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaContinue') }} }\n        </ion-button>\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" shape=\"round\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('totp-setup') {\n        <val-title [props]=\"{ content: t('mfaTotpSetupTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpStep1') }\" />\n\n        @if (totpQr(); as qr) {\n        <div class=\"mfa-qr\">\n          <val-qr-code [props]=\"{ qr: qr }\" />\n        </div>\n        } @if (totpSetup(); as setup) {\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpManualEntry') }\" />\n        <div class=\"mfa-secret-row\">\n          <code class=\"mfa-secret\">{{ setup.secret }}</code>\n          <ion-button fill=\"clear\" size=\"small\" (click)=\"copySecret(setup.secret)\" [attr.aria-label]=\"t('copy')\">\n            @if (copiedSecret()) {\n            <ion-icon name=\"checkmark-outline\"></ion-icon>\n            } @else {\n            <ion-icon name=\"copy-outline\"></ion-icon>\n            }\n          </ion-button>\n        </div>\n\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpStep2') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"verifyTotp()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaTotpVerify') }} }\n        </ion-button>\n\n        <div class=\"mfa-backup\">\n          <val-title [props]=\"{ size: 'small', color: 'dark', bold: true, content: t('mfaBackupCodesTitle') }\" />\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesSaveWarning') }} {{ t('mfaBackupCodesExplain') }}</p>\n          </div>\n          <div class=\"mfa-codes\">\n            @for (code of setup.backupCodes; track code) {\n            <code class=\"mfa-code\">{{ code }}</code>\n            }\n          </div>\n          <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" shape=\"round\" (click)=\"copyCodes(setup.backupCodes)\">\n            {{ t('mfaCopyCodes') }}\n          </ion-button>\n        </div>\n        }\n\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" shape=\"round\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('code-confirm') {\n        <val-title [props]=\"{ content: t('mfaConfirmTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text\n          [props]=\"{ size: 'medium', color: 'dark', bold: false, content: selectedMethod() === 'EMAIL' ? t('mfaConfirmPromptEmail') : t('mfaConfirmPromptSms') }\"\n        />\n\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"confirmCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaConfirmButton') }} }\n        </ion-button>\n\n        <p class=\"mfa-resend\">\n          {{ t('mfaNoCode') }} @if (resendCooldown() > 0) {\n          <span>{{ t('mfaResendIn') }} {{ resendCooldown() }}s</span>\n          } @else {\n          <a (click)=\"resendCode()\">{{ t('mfaResend') }}</a>\n          }\n        </p>\n\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" shape=\"round\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('disable') { @if (hasPassword()) {\n        <val-form [props]=\"disableFormProps()\" (onSubmit)=\"onDisableSubmit($event)\" />\n        } @else if (mfaMethod() === 'TOTP') {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableTotpPrompt') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"disableWithMfaCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableButton') }} }\n        </ion-button>\n        } @else if (mfaMethod() === 'EMAIL' || mfaMethod() === 'SMS') {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        @if (!disableCodeSent()) {\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableCodePrompt') }\" />\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"sendDisableCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableSendCode') }} }\n        </ion-button>\n        } @else {\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableCodePrompt') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"disableWithMfaCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableButton') }} }\n        </ion-button>\n        <ion-button expand=\"block\" fill=\"clear\" color=\"medium\" shape=\"round\" [disabled]=\"working()\" (click)=\"sendDisableCode()\">\n          {{ t('mfaDisableResendCode') }}\n        </ion-button>\n        } } @else {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableNeedsPassword') }\" />\n        }\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" shape=\"round\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".mfa-modal{display:flex;flex-direction:column;gap:14px;padding-top:4px}.mfa-loading{display:flex;justify-content:center;padding:40px 0}.mfa-status{display:inline-flex;align-items:center;width:fit-content;padding:4px 10px;border-radius:999px;font-size:.8125rem;font-weight:600;margin:0}.mfa-status--on{color:var(--ion-color-success-shade);background:rgba(var(--ion-color-success-rgb),.12)}.mfa-status--off{color:var(--ion-color-medium-shade);background:var(--ion-color-light)}.mfa-secret-row{display:flex;align-items:center;gap:8px}.mfa-secret-row .mfa-secret{flex:1;margin:0}.mfa-secret-row ion-button{flex-shrink:0;--color: var(--ion-color-dark);margin:0}.mfa-error{color:var(--ion-color-danger);font-size:.8125rem;margin:4px 0 0}.mfa-block,.mfa-backup{display:flex;flex-direction:column;gap:12px}.mfa-block{padding:16px;border-radius:14px;background:var(--ion-color-light)}.mfa-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:10px;background:var(--ion-color-light);border-left:3px solid var(--ion-color-primary)}.mfa-alert ion-icon{font-size:1.25rem;color:var(--ion-color-primary);flex-shrink:0;margin-top:1px}.mfa-alert p{margin:0;font-size:.8125rem;line-height:1.45;color:var(--ion-color-dark)}.mfa-qr{display:flex;justify-content:center;padding:8px 0}.mfa-secret{display:block;padding:10px 12px;border-radius:8px;background:var(--ion-color-light);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9375rem;letter-spacing:.04em;word-break:break-all;text-align:center}.mfa-pin{display:flex;justify-content:center;padding:8px 0}.mfa-codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px;border-radius:12px;background:var(--ion-color-light)}.mfa-code{padding:8px;border-radius:6px;background:var(--ion-background-color, #fff);color:var(--ion-color-dark);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8125rem;text-align:center}.mfa-method-list{display:flex;flex-direction:column;gap:8px}.mfa-method-card{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:12px;border:1.5px solid var(--ion-border-color, rgba(var(--ion-color-dark-rgb), .14));background:transparent;cursor:pointer;text-align:left;width:100%;transition:border-color .15s ease,background .15s ease}.mfa-method-card--active{border-color:var(--ion-color-primary);background:rgba(var(--ion-color-primary-rgb),.07)}.mfa-method-card__dot{flex-shrink:0;width:18px;height:18px;border-radius:50%;border:2px solid var(--ion-color-medium);margin-top:2px;transition:border-color .15s,box-shadow .15s}.mfa-method-card--active .mfa-method-card__dot{border-color:var(--ion-color-primary);box-shadow:inset 0 0 0 4px var(--ion-color-primary)}.mfa-method-card__body{display:flex;flex-direction:column;gap:3px}.mfa-method-card__body strong{font-size:.9375rem;font-weight:600;color:var(--ion-color-dark)}.mfa-method-card__body span{font-size:.8125rem;color:var(--ion-color-medium);line-height:1.4}.mfa-resend{text-align:center;font-size:.875rem;color:var(--ion-color-dark);margin:4px 0}.mfa-resend a{color:var(--ion-color-primary);cursor:pointer;font-weight:600}\n"] }]
         }], ctorParameters: () => [], propDecorators: { isOpen: [{
                 type: Input
             }], prefillCode: [{
@@ -42280,7 +42280,7 @@ class AvatarUploadComponent {
           <ion-header [translucent]="true">
             <ion-toolbar>
               <ion-buttons slot="end">
-                <ion-button fill="clear" color="dark" (click)="showViewModal.set(false)">
+                <ion-button fill="clear" color="dark" shape="round" (click)="showViewModal.set(false)">
                   <strong>{{ closePhotoLabel() }}</strong>
                 </ion-button>
               </ion-buttons>
@@ -42387,7 +42387,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           <ion-header [translucent]="true">
             <ion-toolbar>
               <ion-buttons slot="end">
-                <ion-button fill="clear" color="dark" (click)="showViewModal.set(false)">
+                <ion-button fill="clear" color="dark" shape="round" (click)="showViewModal.set(false)">
                   <strong>{{ closePhotoLabel() }}</strong>
                 </ion-button>
               </ion-buttons>
@@ -44805,6 +44805,7 @@ class LoginAttemptModalComponent {
             fill: 'outline',
             size: 'default',
             type: 'button',
+            shape: 'round',
             state: ComponentStates.ENABLED,
         };
     }
@@ -44815,6 +44816,7 @@ class LoginAttemptModalComponent {
             fill: 'solid',
             size: 'default',
             type: 'button',
+            shape: 'round',
             state: ComponentStates.ENABLED,
         };
     }
@@ -44825,6 +44827,7 @@ class LoginAttemptModalComponent {
             fill: 'solid',
             size: 'default',
             type: 'button',
+            shape: 'round',
             state: ComponentStates.ENABLED,
         };
     }
@@ -44833,7 +44836,7 @@ class LoginAttemptModalComponent {
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="close()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="close()">
             <strong>{{ closeLabel }}</strong>
           </ion-button>
         </ion-buttons>
@@ -44924,7 +44927,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="close()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="close()">
             <strong>{{ closeLabel }}</strong>
           </ion-button>
         </ion-buttons>
@@ -45078,6 +45081,7 @@ class SessionListModalComponent {
             fill: 'clear',
             size: 'small',
             type: 'button',
+            shape: 'round',
             state: ComponentStates.ENABLED,
         };
     }
@@ -45101,7 +45105,7 @@ class SessionListModalComponent {
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="close()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="close()">
             <strong>{{ closeLabel }}</strong>
           </ion-button>
         </ion-buttons>
@@ -45161,7 +45165,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="close()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="close()">
             <strong>{{ closeLabel }}</strong>
           </ion-button>
         </ion-buttons>
@@ -46822,7 +46826,7 @@ class CreateOrgModalComponent {
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="dismiss()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
             <strong>{{ t('close') }}</strong>
           </ion-button>
         </ion-buttons>
@@ -46840,7 +46844,7 @@ class CreateOrgModalComponent {
       />
       <val-form [props]="formMeta()" (onSubmit)="onSubmit($event)" />
       <div class="modal-close-bottom">
-        <ion-button expand="block" fill="outline" color="dark" (click)="dismiss()">
+        <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="dismiss()">
           {{ t('close') }}
         </ion-button>
       </div>
@@ -46853,7 +46857,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="dismiss()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
             <strong>{{ t('close') }}</strong>
           </ion-button>
         </ion-buttons>
@@ -46871,7 +46875,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       />
       <val-form [props]="formMeta()" (onSubmit)="onSubmit($event)" />
       <div class="modal-close-bottom">
-        <ion-button expand="block" fill="outline" color="dark" (click)="dismiss()">
+        <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="dismiss()">
           {{ t('close') }}
         </ion-button>
       </div>
@@ -47035,6 +47039,7 @@ class DeleteAccountModalComponent {
             fill: 'solid',
             color: 'dark',
             size: 'default',
+            shape: 'round',
             token,
             state: ComponentStates.ENABLED,
         };
@@ -47104,7 +47109,7 @@ class DeleteAccountModalComponent {
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="close()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="close()">
             <strong>{{ t('close') }}</strong>
           </ion-button>
         </ion-buttons>
@@ -47145,7 +47150,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="close()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="close()">
             <strong>{{ t('close') }}</strong>
           </ion-button>
         </ion-buttons>
@@ -47270,7 +47275,18 @@ class OrgInfoSheetComponent {
             ...this.closeProps,
             text: this.closeProps.text || this.resolvedCloseLabel(),
         }));
-        addIcons({ peopleOutline, swapHorizontalOutline, mailOutline });
+        this.resolvedFeatures = computed(() => {
+            if (this.features?.length)
+                return this.features;
+            if (!this.showFeatures)
+                return [];
+            return [
+                { icon: 'people-outline', title: this.tt('featureCollabTitle'), desc: this.tt('featureCollabDesc') },
+                { icon: 'swap-horizontal-outline', title: this.tt('featureSwitchTitle'), desc: this.tt('featureSwitchDesc') },
+                { icon: 'mail-outline', title: this.tt('featureInviteTitle'), desc: this.tt('featureInviteDesc') },
+            ];
+        });
+        addIcons({ peopleOutline, swapHorizontalOutline, mailOutline, codeSlashOutline, shieldCheckmarkOutline, warningOutline });
         if (!this.i18n.hasNamespace(DEFAULT_NAMESPACE$f)) {
             this.i18n.registerContent(DEFAULT_NAMESPACE$f, ORG_INFO_SHEET_I18N);
         }
@@ -47282,11 +47298,11 @@ class OrgInfoSheetComponent {
         return this.i18n.t(key, DEFAULT_NAMESPACE$f);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OrgInfoSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: OrgInfoSheetComponent, isStandalone: true, selector: "val-org-info-sheet", inputs: { title: "title", subtitle: "subtitle", body: "body", closeLabel: "closeLabel", showFeatures: "showFeatures", closeProps: "closeProps", _modalRef: "_modalRef" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: OrgInfoSheetComponent, isStandalone: true, selector: "val-org-info-sheet", inputs: { title: "title", subtitle: "subtitle", body: "body", closeLabel: "closeLabel", showFeatures: "showFeatures", features: "features", closeProps: "closeProps", _modalRef: "_modalRef" }, ngImport: i0, template: `
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="dismiss()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
             <strong>{{ resolvedCloseLabel() }}</strong>
           </ion-button>
         </ion-buttons>
@@ -47297,29 +47313,17 @@ class OrgInfoSheetComponent {
       <val-display [props]="{ content: resolvedTitle(), size: 'small', color: 'dark' }" />
       <val-title [props]="{ content: resolvedSubtitle(), size: 'large', color: '', bold: false }" />
 
-      @if (showFeatures) {
+      @if (resolvedFeatures().length > 0) {
         <div class="info-features">
-          <div class="info-feature">
-            <ion-icon name="people-outline" class="info-feature__icon" />
-            <div>
-              <div class="info-feature__title">{{ tt('featureCollabTitle') }}</div>
-              <div class="info-feature__desc">{{ tt('featureCollabDesc') }}</div>
-            </div>
-          </div>
-          <div class="info-feature">
-            <ion-icon name="swap-horizontal-outline" class="info-feature__icon" />
-            <div>
-              <div class="info-feature__title">{{ tt('featureSwitchTitle') }}</div>
-              <div class="info-feature__desc">{{ tt('featureSwitchDesc') }}</div>
-            </div>
-          </div>
-          <div class="info-feature">
-            <ion-icon name="mail-outline" class="info-feature__icon" />
-            <div>
-              <div class="info-feature__title">{{ tt('featureInviteTitle') }}</div>
-              <div class="info-feature__desc">{{ tt('featureInviteDesc') }}</div>
+          @for (f of resolvedFeatures(); track $index) {
+            <div class="info-feature">
+              <ion-icon [name]="f.icon" class="info-feature__icon" />
+              <div>
+                <div class="info-feature__title">{{ f.title }}</div>
+                <div class="info-feature__desc">{{ f.desc }}</div>
+              </div>
             </div>
-          </div>
+          }
         </div>
       }
 
@@ -47357,7 +47361,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="dismiss()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
             <strong>{{ resolvedCloseLabel() }}</strong>
           </ion-button>
         </ion-buttons>
@@ -47368,29 +47372,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       <val-display [props]="{ content: resolvedTitle(), size: 'small', color: 'dark' }" />
       <val-title [props]="{ content: resolvedSubtitle(), size: 'large', color: '', bold: false }" />
 
-      @if (showFeatures) {
+      @if (resolvedFeatures().length > 0) {
         <div class="info-features">
-          <div class="info-feature">
-            <ion-icon name="people-outline" class="info-feature__icon" />
-            <div>
-              <div class="info-feature__title">{{ tt('featureCollabTitle') }}</div>
-              <div class="info-feature__desc">{{ tt('featureCollabDesc') }}</div>
-            </div>
-          </div>
-          <div class="info-feature">
-            <ion-icon name="swap-horizontal-outline" class="info-feature__icon" />
-            <div>
-              <div class="info-feature__title">{{ tt('featureSwitchTitle') }}</div>
-              <div class="info-feature__desc">{{ tt('featureSwitchDesc') }}</div>
-            </div>
-          </div>
-          <div class="info-feature">
-            <ion-icon name="mail-outline" class="info-feature__icon" />
-            <div>
-              <div class="info-feature__title">{{ tt('featureInviteTitle') }}</div>
-              <div class="info-feature__desc">{{ tt('featureInviteDesc') }}</div>
+          @for (f of resolvedFeatures(); track $index) {
+            <div class="info-feature">
+              <ion-icon [name]="f.icon" class="info-feature__icon" />
+              <div>
+                <div class="info-feature__title">{{ f.title }}</div>
+                <div class="info-feature__desc">{{ f.desc }}</div>
+              </div>
             </div>
-          </div>
+          }
         </div>
       }
 
@@ -47420,6 +47412,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], showFeatures: [{
                 type: Input
+            }], features: [{
+                type: Input
             }], closeProps: [{
                 type: Input
             }], _modalRef: [{
@@ -47545,7 +47539,7 @@ class SwitchOrgModalComponent {
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="dismiss()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
             <strong>{{ t('close') }}</strong>
           </ion-button>
         </ion-buttons>
@@ -47636,7 +47630,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="dismiss()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
             <strong>{{ t('close') }}</strong>
           </ion-button>
         </ion-buttons>
@@ -48803,7 +48797,7 @@ class EditOrgModalComponent {
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="dismiss()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
             <strong>{{ t('close') }}</strong>
           </ion-button>
         </ion-buttons>
@@ -48821,7 +48815,7 @@ class EditOrgModalComponent {
       />
       <val-form [props]="formMeta()" (onSubmit)="onFormSubmit($event)" />
       <div class="modal-close-bottom">
-        <ion-button expand="block" fill="outline" color="dark" (click)="dismiss()">
+        <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="dismiss()">
           {{ t('close') }}
         </ion-button>
       </div>
@@ -48834,7 +48828,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="dismiss()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
             <strong>{{ t('close') }}</strong>
           </ion-button>
         </ion-buttons>
@@ -48852,7 +48846,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       />
       <val-form [props]="formMeta()" (onSubmit)="onFormSubmit($event)" />
       <div class="modal-close-bottom">
-        <ion-button expand="block" fill="outline" color="dark" (click)="dismiss()">
+        <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="dismiss()">
           {{ t('close') }}
         </ion-button>
       </div>
@@ -48982,6 +48976,7 @@ class InviteMemberModalComponent {
             fill: 'solid',
             expand: 'block',
             size: 'default',
+            shape: 'round',
             type: 'button',
             state: this.sending() ? ComponentStates.WORKING : ComponentStates.ENABLED,
         }));
@@ -48992,6 +48987,7 @@ class InviteMemberModalComponent {
             fill: 'solid',
             expand: 'block',
             size: 'default',
+            shape: 'round',
             type: 'button',
             state: this.sending() ? ComponentStates.WORKING : ComponentStates.ENABLED,
         }));
@@ -49164,7 +49160,7 @@ class InviteMemberModalComponent {
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="dismiss()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
             <strong>{{ t('close') }}</strong>
           </ion-button>
         </ion-buttons>
@@ -49276,7 +49272,7 @@ class InviteMemberModalComponent {
       </div>
 
       <div class="modal-close-bottom">
-        <ion-button expand="block" fill="outline" color="dark" (click)="dismiss()">
+        <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="dismiss()">
           {{ t('close') }}
         </ion-button>
       </div>
@@ -49305,7 +49301,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="dismiss()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
             <strong>{{ t('close') }}</strong>
           </ion-button>
         </ion-buttons>
@@ -49417,7 +49413,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       </div>
 
       <div class="modal-close-bottom">
-        <ion-button expand="block" fill="outline" color="dark" (click)="dismiss()">
+        <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="dismiss()">
           {{ t('close') }}
         </ion-button>
       </div>
@@ -49697,6 +49693,7 @@ class MemberDetailModalComponent {
             fill: 'outline',
             expand: 'block',
             size: 'default',
+            shape: 'round',
             type: 'button',
             state: this.working() ? ComponentStates.WORKING : ComponentStates.ENABLED,
         }));
@@ -49814,7 +49811,7 @@ class MemberDetailModalComponent {
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="dismiss()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
             <strong>{{ t('close') }}</strong>
           </ion-button>
         </ion-buttons>
@@ -49885,7 +49882,7 @@ class MemberDetailModalComponent {
       }
 
       <div class="modal-close-bottom">
-        <ion-button expand="block" fill="outline" color="dark" (click)="dismiss()">
+        <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="dismiss()">
           {{ t('close') }}
         </ion-button>
       </div>
@@ -49911,7 +49908,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="dismiss()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
             <strong>{{ t('close') }}</strong>
           </ion-button>
         </ion-buttons>
@@ -49982,7 +49979,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       }
 
       <div class="modal-close-bottom">
-        <ion-button expand="block" fill="outline" color="dark" (click)="dismiss()">
+        <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="dismiss()">
           {{ t('close') }}
         </ion-button>
       </div>
@@ -50094,7 +50091,7 @@ class TransferOwnershipModalComponent {
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="dismiss()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
             <strong>{{ t('close') }}</strong>
           </ion-button>
         </ion-buttons>
@@ -50154,13 +50151,13 @@ class TransferOwnershipModalComponent {
       }
 
       <div class="transfer-confirm-row">
-        <ion-button expand="block" color="dark" [disabled]="!selectedId()" (click)="confirm()">
+        <ion-button expand="block" color="dark" shape="round" [disabled]="!selectedId()" (click)="confirm()">
           {{ t('confirmCta') }}
         </ion-button>
       </div>
 
       <div class="modal-close-bottom">
-        <ion-button expand="block" fill="outline" color="dark" (click)="dismiss()">
+        <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="dismiss()">
           {{ t('close') }}
         </ion-button>
       </div>
@@ -50183,7 +50180,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="dismiss()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
             <strong>{{ t('close') }}</strong>
           </ion-button>
         </ion-buttons>
@@ -50243,13 +50240,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       }
 
       <div class="transfer-confirm-row">
-        <ion-button expand="block" color="dark" [disabled]="!selectedId()" (click)="confirm()">
+        <ion-button expand="block" color="dark" shape="round" [disabled]="!selectedId()" (click)="confirm()">
           {{ t('confirmCta') }}
         </ion-button>
       </div>
 
       <div class="modal-close-bottom">
-        <ion-button expand="block" fill="outline" color="dark" (click)="dismiss()">
+        <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="dismiss()">
           {{ t('close') }}
         </ion-button>
       </div>
@@ -50506,7 +50503,7 @@ class MemberImportModalComponent {
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="dismiss()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
             <strong>{{ t('close') }}</strong>
           </ion-button>
         </ion-buttons>
@@ -50604,7 +50601,7 @@ class MemberImportModalComponent {
         }
 
         <div class="import-actions">
-          <ion-button expand="block" color="dark" [disabled]="submitting()" (click)="submit()">
+          <ion-button expand="block" color="dark" shape="round" [disabled]="submitting()" (click)="submit()">
             @if (submitting()) {
               <ion-spinner name="dots" />
               &nbsp;{{ t('submitting') }}
@@ -50628,14 +50625,14 @@ class MemberImportModalComponent {
           }
         </div>
         <div class="import-actions">
-          <ion-button expand="block" fill="outline" color="dark" (click)="reset()">
+          <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="reset()">
             {{ t('again') }}
           </ion-button>
         </div>
       }
 
       <div class="modal-close-bottom">
-        <ion-button expand="block" fill="outline" color="dark" (click)="dismiss()">
+        <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="dismiss()">
           {{ t('close') }}
         </ion-button>
       </div>
@@ -50664,7 +50661,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="dismiss()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
             <strong>{{ t('close') }}</strong>
           </ion-button>
         </ion-buttons>
@@ -50762,7 +50759,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         }
 
         <div class="import-actions">
-          <ion-button expand="block" color="dark" [disabled]="submitting()" (click)="submit()">
+          <ion-button expand="block" color="dark" shape="round" [disabled]="submitting()" (click)="submit()">
             @if (submitting()) {
               <ion-spinner name="dots" />
               &nbsp;{{ t('submitting') }}
@@ -50786,14 +50783,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           }
         </div>
         <div class="import-actions">
-          <ion-button expand="block" fill="outline" color="dark" (click)="reset()">
+          <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="reset()">
             {{ t('again') }}
           </ion-button>
         </div>
       }
 
       <div class="modal-close-bottom">
-        <ion-button expand="block" fill="outline" color="dark" (click)="dismiss()">
+        <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="dismiss()">
           {{ t('close') }}
         </ion-button>
       </div>
@@ -50873,8 +50870,14 @@ const ORGANIZATION_VIEW_I18N = {
         apiKeysMoreInfo: 'Más información',
         apiKeysInfoTitle: 'Integraciones por API',
         apiKeysInfoSubtitle: '¿Qué puedes hacer con una API Key?',
-        apiKeysInfoContent: 'Una API Key te permite automatizar operaciones en tu organización desde tus propios sistemas, sin abrir la app. Es ideal para integraciones máquina-a-máquina: sincronizar usuarios desde tu ERP, asignar roles en masa o consultar datos desde tus reportes internos.\n\nCon una key puedes dar de alta y gestionar miembros, asignar roles y permisos, leer datos de la organización y conectar flujos de trabajo existentes.\n\nCada key lleva solo los permisos que tú le asignes — concede el mínimo necesario y revócala en cualquier momento desde la sección Integraciones.\n\nImportante: el secreto se muestra una sola vez al crear la key. Guárdalo en un lugar seguro (gestor de secretos, variable de entorno). Si lo pierdes, genera una nueva key y revoca la anterior.',
+        apiKeysInfoContent: 'Revoca cualquier key en cualquier momento desde la sección Integraciones.',
         apiKeysInfoClose: 'Cerrar',
+        apiKeysFeatureAutoTitle: 'Automatización',
+        apiKeysFeatureAutoDesc: 'Conecta tus sistemas externos directamente, sin abrir la app.',
+        apiKeysFeaturePermsTitle: 'Permisos a medida',
+        apiKeysFeaturePermsDesc: 'Cada key lleva solo los permisos que tú le asignes — concede el mínimo.',
+        apiKeysFeatureSecretTitle: 'Secreto único',
+        apiKeysFeatureSecretDesc: 'El secreto se muestra una sola vez. Guárdalo en un gestor de secretos.',
         orgsMoreInfo: 'Aprender más sobre organizaciones',
         orgsInfoTitle: '¿Qué son las organizaciones?',
         orgsInfoSubtitle: 'Todo lo que necesitas saber',
@@ -50956,8 +50959,14 @@ const ORGANIZATION_VIEW_I18N = {
         apiKeysMoreInfo: 'More information',
         apiKeysInfoTitle: 'API integrations',
         apiKeysInfoSubtitle: 'What can you do with an API Key?',
-        apiKeysInfoContent: 'An API Key lets you automate operations in your organization from your own systems, without opening the app. It is ideal for machine-to-machine integrations: sync users from your ERP, bulk-assign roles, or query data for your internal reports.\n\nWith a key you can provision and manage members, assign roles and permissions, read organization data, and connect existing workflows.\n\nEach key carries only the permissions you assign — grant the minimum needed and revoke it at any time from the Integrations section.\n\nImportant: the secret is shown only once when the key is created. Store it somewhere safe (secret manager, environment variable). If you lose it, create a new key and revoke the old one.',
+        apiKeysInfoContent: 'Revoke any key at any time from the Integrations section.',
         apiKeysInfoClose: 'Close',
+        apiKeysFeatureAutoTitle: 'Automation',
+        apiKeysFeatureAutoDesc: 'Connect your external systems directly, without opening the app.',
+        apiKeysFeaturePermsTitle: 'Custom permissions',
+        apiKeysFeaturePermsDesc: 'Each key carries only the permissions you assign — grant the minimum.',
+        apiKeysFeatureSecretTitle: 'One-time secret',
+        apiKeysFeatureSecretDesc: 'The secret is shown only once. Store it in a secret manager.',
         orgsMoreInfo: 'Learn more about organizations',
         orgsInfoTitle: 'What are organizations?',
         orgsInfoSubtitle: 'Everything you need to know',
@@ -51187,7 +51196,7 @@ class OrganizationViewComponent {
         this.openApiKeysButtonProps = computed(() => ({
             text: this.tt('apiKeysOpen'),
             color: 'dark',
-            fill: 'clear',
+            fill: 'outline',
             size: 'default',
             shape: 'round',
             type: 'button',
@@ -51332,6 +51341,11 @@ class OrganizationViewComponent {
             component: OrgInfoSheetComponent,
             componentProps: {
                 showFeatures: false,
+                features: [
+                    { icon: 'code-slash-outline', title: this.tt('apiKeysFeatureAutoTitle'), desc: this.tt('apiKeysFeatureAutoDesc') },
+                    { icon: 'shield-checkmark-outline', title: this.tt('apiKeysFeaturePermsTitle'), desc: this.tt('apiKeysFeaturePermsDesc') },
+                    { icon: 'warning-outline', title: this.tt('apiKeysFeatureSecretTitle'), desc: this.tt('apiKeysFeatureSecretDesc') },
+                ],
                 title: this.tt('apiKeysInfoTitle'),
                 subtitle: this.tt('apiKeysInfoSubtitle'),
                 body: this.tt('apiKeysInfoContent'),
@@ -51343,6 +51357,7 @@ class OrganizationViewComponent {
                     size: 'default',
                     expand: 'block',
                     type: 'button',
+                    shape: 'round',
                 },
             },
             breakpoints: { breakpoints: [0, 0.92], initialBreakpoint: 0.92, showHandle: true },
@@ -53824,7 +53839,7 @@ class ApiKeyCreateModalComponent {
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="dismiss()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
             <strong>{{ t('close') }}</strong>
           </ion-button>
         </ion-buttons>
@@ -53839,10 +53854,10 @@ class ApiKeyCreateModalComponent {
           <code>{{ s.secret }}</code>
         </div>
         <div class="apikey-actions">
-          <ion-button expand="block" color="dark" (click)="copy(s.secret)">
+          <ion-button expand="block" color="dark" shape="round" (click)="copy(s.secret)">
             {{ copied() ? t('copied') : t('copy') }}
           </ion-button>
-          <ion-button expand="block" fill="outline" color="dark" (click)="finishSecret()">
+          <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="finishSecret()">
             {{ t('done') }}
           </ion-button>
         </div>
@@ -53882,7 +53897,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="dismiss()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
             <strong>{{ t('close') }}</strong>
           </ion-button>
         </ion-buttons>
@@ -53897,10 +53912,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           <code>{{ s.secret }}</code>
         </div>
         <div class="apikey-actions">
-          <ion-button expand="block" color="dark" (click)="copy(s.secret)">
+          <ion-button expand="block" color="dark" shape="round" (click)="copy(s.secret)">
             {{ copied() ? t('copied') : t('copy') }}
           </ion-button>
-          <ion-button expand="block" fill="outline" color="dark" (click)="finishSecret()">
+          <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="finishSecret()">
             {{ t('done') }}
           </ion-button>
         </div>
@@ -54458,7 +54473,7 @@ function createRefreshableStream(factory, options) {
     // sesión NUNCA se establece (token inválido, signInWithFirebase falló), el
     // gate igual se libera tras `authGateTimeoutMs` y la factory procede: si no
     // hay permiso terminará en estado `error`, jamás en skeleton infinito.
-    // Tag los dos inputs del `race` para distinguir en logs cuál ganó: la sesión
+    // Tag los dos inputs del `race` para distivdsr en logs cuál ganó: la sesión
     // de Firebase Auth (`auth-ready`) o el timeout de seguridad (`timeout`).
     const authGate$ = firebase
         ? race(firebase.firebaseAuthReady$.pipe(map$1(() => 'auth-ready')), timer(authGateTimeoutMs).pipe(map$1(() => 'timeout'))).pipe(take(1), tap(winner => {
@@ -55427,7 +55442,6 @@ class ContentReactionComponent {
             return this.resolvedProps().showComment;
         });
         this.canSubmit = computed(() => this.state().selectedValue !== null && !this.state().isLoading);
-        addIcons({ closeOutline });
         // Auto-registro de defaults i18n (es/en) si el consumer no proveyó el
         // namespace. Garantiza que `t()` nunca caiga en key faltante. Ver
         // CONTENT_REACTION_I18N. Idempotente: solo la 1ª instancia registra.
@@ -55578,11 +55592,11 @@ class ContentReactionComponent {
         return this.i18n.t(key, 'ContentReaction') || translations[key] || key;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ContentReactionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ContentReactionComponent, isStandalone: true, selector: "val-content-reaction", inputs: { props: "props", _modalRef: "_modalRef" }, outputs: { reactionSubmit: "reactionSubmit", reactionChange: "reactionChange" }, usesOnChanges: true, ngImport: i0, template: "@if (isConfigured()) {\n<div class=\"content-reaction\" [class.disabled]=\"resolvedProps().disabled\" [class.readonly]=\"resolvedProps().readonly\">\n  <!-- Bot\u00F3n de cierre (solo en modo modal/sheet) -->\n  @if (resolvedProps().showCloseButton) {\n  <ion-button fill=\"clear\" color=\"dark\" class=\"close-button\" [attr.aria-label]=\"t('close')\" (click)=\"close()\">\n    <ion-icon name=\"close-outline\" slot=\"icon-only\"></ion-icon>\n  </ion-button>\n  }\n  <!-- Loading inicial -->\n  @if (state().isLoading && !state().selectedValue) {\n  <div class=\"loading-container\">\n    <ion-spinner name=\"crescent\"></ion-spinner>\n  </div>\n  } @else {\n  <!-- Pregunta -->\n  <p class=\"question\">\n    {{ state().selectedValue === 'negative' ? t('negativeFeedbackTitle') : resolvedProps().question }}\n  </p>\n\n  <!-- Botones de reacci\u00F3n \u2014 variante emoji (caras, estrellas, thumbs, \u2026) -->\n  @if (resolvedProps().variant === 'emoji') {\n  <div class=\"reaction-buttons reaction-buttons--emoji\">\n    @for (value of activeReactionValues(); track value; let i = $index) {\n    <ion-button\n      fill=\"clear\"\n      shape=\"round\"\n      [class.selected]=\"isSelected(value)\"\n      [attr.aria-label]=\"resolvedProps().emojiLabels[i]\"\n      [attr.aria-pressed]=\"isSelected(value)\"\n      [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n      (click)=\"selectReaction(value)\"\n    >\n      <span class=\"emoji-btn\">{{ resolvedProps().emojis[i] }}</span>\n    </ion-button>\n    }\n  </div>\n  } @else {\n  <!-- Botones de reacci\u00F3n \u2014 variante texto (default) -->\n  <div class=\"reaction-buttons\">\n    <ion-button\n      [fill]=\"isSelected('positive') ? 'solid' : 'outline'\"\n      shape=\"round\"\n      color=\"dark\"\n      [attr.aria-pressed]=\"isSelected('positive')\"\n      [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n      (click)=\"selectReaction('positive')\"\n    >\n      {{ t('positiveLabel') }}\n    </ion-button>\n    <ion-button\n      [fill]=\"isSelected('negative') ? 'solid' : 'outline'\"\n      shape=\"round\"\n      color=\"dark\"\n      [attr.aria-pressed]=\"isSelected('negative')\"\n      [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n      (click)=\"selectReaction('negative')\"\n    >\n      {{ t('negativeLabel') }}\n    </ion-button>\n  </div>\n  }\n\n  <!-- Campo de comentario (solo si hay selecci\u00F3n) -->\n  @if (showCommentField()) {\n  <div class=\"comment-section\">\n    <ion-textarea\n      [value]=\"state().comment\"\n      [placeholder]=\"resolvedProps().commentPlaceholder\"\n      [maxlength]=\"resolvedProps().maxCommentLength\"\n      [disabled]=\"resolvedProps().disabled\"\n      [rows]=\"3\"\n      class=\"comment-textarea\"\n      (ionInput)=\"updateComment($event)\"\n    ></ion-textarea>\n    <span class=\"char-count\"> {{ state().comment.length }}/{{ resolvedProps().maxCommentLength }} </span>\n  </div>\n  }\n\n  <!-- Bot\u00F3n de env\u00EDo -->\n  @if (state().selectedValue && !state().isSubmitted) {\n  <ion-button expand=\"block\" shape=\"round\" [disabled]=\"!canSubmit()\" (click)=\"submitReaction()\" class=\"submit-button\">\n    @if (state().isLoading) {\n    <ion-spinner name=\"crescent\"></ion-spinner>\n    } @else { {{ state().hadPreviousReaction ? t('update') : t('submit') }} }\n  </ion-button>\n  }\n\n  <!-- Mensaje de confirmaci\u00F3n -->\n  @if (state().isSubmitted) {\n  <p class=\"submitted-message\">{{ t('thankYou') }}</p>\n  }\n\n  <!-- Error -->\n  @if (state().error) {\n  <p class=\"error-message\">{{ state().error }}</p>\n  } }\n</div>\n}\n", styles: [":host{display:block}.content-reaction{position:relative;padding:16px;text-align:center}.content-reaction.disabled{opacity:.6;pointer-events:none}.content-reaction.readonly{pointer-events:none}.close-button{position:absolute;top:0;right:0;margin:0;--padding-start: 6px;--padding-end: 6px;--color: var(--ion-color-medium)}.close-button ion-icon{font-size:1.5rem}.question{font-size:1.0625rem;font-weight:700;color:var(--ion-color-dark);margin:0 0 16px}.reaction-buttons{display:flex;justify-content:center;gap:12px;margin-bottom:20px}.reaction-buttons--emoji{gap:8px}.reaction-buttons--emoji ion-button{--padding-start: 4px;--padding-end: 4px;transition:transform .15s ease}.reaction-buttons--emoji ion-button.selected{transform:scale(1.25)}.reaction-buttons--emoji ion-button:not(.selected):not([disabled]){opacity:.55}.reaction-buttons--emoji ion-button:not(.selected):not([disabled]):hover{opacity:1}.emoji-btn{font-size:2rem;line-height:1;display:block}.comment-section{margin-top:16px;animation:slideIn .3s ease-out}.comment-section .comment-textarea{--background: transparent;--border-radius: 8px;--padding-start: 12px;--padding-end: 12px;width:100%}.comment-section .char-count{display:block;text-align:right;font-size:.75rem;color:var(--ion-color-medium);margin-top:4px}.submit-button{margin-top:16px}.submitted-message{margin-top:16px;color:var(--ion-color-success);font-weight:500;animation:fadeIn .3s ease-out}.error-message{margin-top:8px;color:var(--ion-color-danger);font-size:.875rem}.loading-container{display:flex;justify-content:center;padding:20px}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { 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: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ContentReactionComponent, isStandalone: true, selector: "val-content-reaction", inputs: { props: "props", _modalRef: "_modalRef" }, outputs: { reactionSubmit: "reactionSubmit", reactionChange: "reactionChange" }, usesOnChanges: true, ngImport: i0, template: "@if (isConfigured()) {\n<div class=\"content-reaction\" [class.disabled]=\"resolvedProps().disabled\" [class.readonly]=\"resolvedProps().readonly\">\n  <!-- Bot\u00F3n de cierre (solo en modo modal/sheet) -->\n  @if (resolvedProps().showCloseButton) {\n  <ion-button fill=\"clear\" color=\"dark\" shape=\"round\" class=\"close-button\" (click)=\"close()\">\n    <strong>{{ t('close') }}</strong>\n  </ion-button>\n  }\n  <!-- Loading inicial -->\n  @if (state().isLoading && !state().selectedValue) {\n  <div class=\"loading-container\">\n    <ion-spinner name=\"crescent\"></ion-spinner>\n  </div>\n  } @else {\n  <!-- Pregunta -->\n  <p class=\"question\">\n    {{ state().selectedValue === 'negative' ? t('negativeFeedbackTitle') : resolvedProps().question }}\n  </p>\n\n  <!-- Botones de reacci\u00F3n \u2014 variante emoji (caras, estrellas, thumbs, \u2026) -->\n  @if (resolvedProps().variant === 'emoji') {\n  <div class=\"reaction-buttons reaction-buttons--emoji\">\n    @for (value of activeReactionValues(); track value; let i = $index) {\n    <ion-button\n      fill=\"clear\"\n      shape=\"round\"\n      [class.selected]=\"isSelected(value)\"\n      [attr.aria-label]=\"resolvedProps().emojiLabels[i]\"\n      [attr.aria-pressed]=\"isSelected(value)\"\n      [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n      (click)=\"selectReaction(value)\"\n    >\n      <span class=\"emoji-btn\">{{ resolvedProps().emojis[i] }}</span>\n    </ion-button>\n    }\n  </div>\n  } @else {\n  <!-- Botones de reacci\u00F3n \u2014 variante texto (default) -->\n  <div class=\"reaction-buttons\">\n    <ion-button\n      [fill]=\"isSelected('positive') ? 'solid' : 'outline'\"\n      shape=\"round\"\n      color=\"dark\"\n      [attr.aria-pressed]=\"isSelected('positive')\"\n      [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n      (click)=\"selectReaction('positive')\"\n    >\n      {{ t('positiveLabel') }}\n    </ion-button>\n    <ion-button\n      [fill]=\"isSelected('negative') ? 'solid' : 'outline'\"\n      shape=\"round\"\n      color=\"dark\"\n      [attr.aria-pressed]=\"isSelected('negative')\"\n      [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n      (click)=\"selectReaction('negative')\"\n    >\n      {{ t('negativeLabel') }}\n    </ion-button>\n  </div>\n  }\n\n  <!-- Campo de comentario (solo si hay selecci\u00F3n) -->\n  @if (showCommentField()) {\n  <div class=\"comment-section\">\n    <ion-textarea\n      [value]=\"state().comment\"\n      [placeholder]=\"resolvedProps().commentPlaceholder\"\n      [maxlength]=\"resolvedProps().maxCommentLength\"\n      [disabled]=\"resolvedProps().disabled\"\n      [rows]=\"3\"\n      class=\"comment-textarea\"\n      (ionInput)=\"updateComment($event)\"\n    ></ion-textarea>\n    <span class=\"char-count\"> {{ state().comment.length }}/{{ resolvedProps().maxCommentLength }} </span>\n  </div>\n  }\n\n  <!-- Bot\u00F3n de env\u00EDo -->\n  @if (state().selectedValue && !state().isSubmitted) {\n  <ion-button expand=\"block\" shape=\"round\" [disabled]=\"!canSubmit()\" (click)=\"submitReaction()\" class=\"submit-button\">\n    @if (state().isLoading) {\n    <ion-spinner name=\"crescent\"></ion-spinner>\n    } @else { {{ state().hadPreviousReaction ? t('update') : t('submit') }} }\n  </ion-button>\n  }\n\n  <!-- Mensaje de confirmaci\u00F3n -->\n  @if (state().isSubmitted) {\n  <p class=\"submitted-message\">{{ t('thankYou') }}</p>\n  }\n\n  <!-- Error -->\n  @if (state().error) {\n  <p class=\"error-message\">{{ state().error }}</p>\n  } }\n</div>\n}\n", styles: [":host{display:block}.content-reaction{position:relative;padding:16px;text-align:center}.content-reaction.disabled{opacity:.6;pointer-events:none}.content-reaction.readonly{pointer-events:none}.close-button{position:absolute;top:0;right:0;margin:0;--padding-start: 6px;--padding-end: 6px;--color: var(--ion-color-medium)}.close-button ion-icon{font-size:1.5rem}.question{font-size:1.0625rem;font-weight:700;color:var(--ion-color-dark);margin:0 0 16px}.reaction-buttons{display:flex;justify-content:center;gap:12px;margin-bottom:20px}.reaction-buttons--emoji{gap:8px}.reaction-buttons--emoji ion-button{--padding-start: 4px;--padding-end: 4px;transition:transform .15s ease}.reaction-buttons--emoji ion-button.selected{transform:scale(1.25)}.reaction-buttons--emoji ion-button:not(.selected):not([disabled]){opacity:.55}.reaction-buttons--emoji ion-button:not(.selected):not([disabled]):hover{opacity:1}.emoji-btn{font-size:2rem;line-height:1;display:block}.comment-section{margin-top:16px;animation:slideIn .3s ease-out}.comment-section .comment-textarea{--background: transparent;--border-radius: 8px;--padding-start: 12px;--padding-end: 12px;width:100%}.comment-section .char-count{display:block;text-align:right;font-size:.75rem;color:var(--ion-color-medium);margin-top:4px}.submit-button{margin-top:16px}.submitted-message{margin-top:16px;color:var(--ion-color-success);font-weight:500;animation:fadeIn .3s ease-out}.error-message{margin-top:8px;color:var(--ion-color-danger);font-size:.875rem}.loading-container{display:flex;justify-content:center;padding:20px}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { 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: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ContentReactionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-content-reaction', standalone: true, imports: [CommonModule, FormsModule, IonButton, IonIcon, IonSpinner, IonTextarea], template: "@if (isConfigured()) {\n<div class=\"content-reaction\" [class.disabled]=\"resolvedProps().disabled\" [class.readonly]=\"resolvedProps().readonly\">\n  <!-- Bot\u00F3n de cierre (solo en modo modal/sheet) -->\n  @if (resolvedProps().showCloseButton) {\n  <ion-button fill=\"clear\" color=\"dark\" class=\"close-button\" [attr.aria-label]=\"t('close')\" (click)=\"close()\">\n    <ion-icon name=\"close-outline\" slot=\"icon-only\"></ion-icon>\n  </ion-button>\n  }\n  <!-- Loading inicial -->\n  @if (state().isLoading && !state().selectedValue) {\n  <div class=\"loading-container\">\n    <ion-spinner name=\"crescent\"></ion-spinner>\n  </div>\n  } @else {\n  <!-- Pregunta -->\n  <p class=\"question\">\n    {{ state().selectedValue === 'negative' ? t('negativeFeedbackTitle') : resolvedProps().question }}\n  </p>\n\n  <!-- Botones de reacci\u00F3n \u2014 variante emoji (caras, estrellas, thumbs, \u2026) -->\n  @if (resolvedProps().variant === 'emoji') {\n  <div class=\"reaction-buttons reaction-buttons--emoji\">\n    @for (value of activeReactionValues(); track value; let i = $index) {\n    <ion-button\n      fill=\"clear\"\n      shape=\"round\"\n      [class.selected]=\"isSelected(value)\"\n      [attr.aria-label]=\"resolvedProps().emojiLabels[i]\"\n      [attr.aria-pressed]=\"isSelected(value)\"\n      [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n      (click)=\"selectReaction(value)\"\n    >\n      <span class=\"emoji-btn\">{{ resolvedProps().emojis[i] }}</span>\n    </ion-button>\n    }\n  </div>\n  } @else {\n  <!-- Botones de reacci\u00F3n \u2014 variante texto (default) -->\n  <div class=\"reaction-buttons\">\n    <ion-button\n      [fill]=\"isSelected('positive') ? 'solid' : 'outline'\"\n      shape=\"round\"\n      color=\"dark\"\n      [attr.aria-pressed]=\"isSelected('positive')\"\n      [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n      (click)=\"selectReaction('positive')\"\n    >\n      {{ t('positiveLabel') }}\n    </ion-button>\n    <ion-button\n      [fill]=\"isSelected('negative') ? 'solid' : 'outline'\"\n      shape=\"round\"\n      color=\"dark\"\n      [attr.aria-pressed]=\"isSelected('negative')\"\n      [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n      (click)=\"selectReaction('negative')\"\n    >\n      {{ t('negativeLabel') }}\n    </ion-button>\n  </div>\n  }\n\n  <!-- Campo de comentario (solo si hay selecci\u00F3n) -->\n  @if (showCommentField()) {\n  <div class=\"comment-section\">\n    <ion-textarea\n      [value]=\"state().comment\"\n      [placeholder]=\"resolvedProps().commentPlaceholder\"\n      [maxlength]=\"resolvedProps().maxCommentLength\"\n      [disabled]=\"resolvedProps().disabled\"\n      [rows]=\"3\"\n      class=\"comment-textarea\"\n      (ionInput)=\"updateComment($event)\"\n    ></ion-textarea>\n    <span class=\"char-count\"> {{ state().comment.length }}/{{ resolvedProps().maxCommentLength }} </span>\n  </div>\n  }\n\n  <!-- Bot\u00F3n de env\u00EDo -->\n  @if (state().selectedValue && !state().isSubmitted) {\n  <ion-button expand=\"block\" shape=\"round\" [disabled]=\"!canSubmit()\" (click)=\"submitReaction()\" class=\"submit-button\">\n    @if (state().isLoading) {\n    <ion-spinner name=\"crescent\"></ion-spinner>\n    } @else { {{ state().hadPreviousReaction ? t('update') : t('submit') }} }\n  </ion-button>\n  }\n\n  <!-- Mensaje de confirmaci\u00F3n -->\n  @if (state().isSubmitted) {\n  <p class=\"submitted-message\">{{ t('thankYou') }}</p>\n  }\n\n  <!-- Error -->\n  @if (state().error) {\n  <p class=\"error-message\">{{ state().error }}</p>\n  } }\n</div>\n}\n", styles: [":host{display:block}.content-reaction{position:relative;padding:16px;text-align:center}.content-reaction.disabled{opacity:.6;pointer-events:none}.content-reaction.readonly{pointer-events:none}.close-button{position:absolute;top:0;right:0;margin:0;--padding-start: 6px;--padding-end: 6px;--color: var(--ion-color-medium)}.close-button ion-icon{font-size:1.5rem}.question{font-size:1.0625rem;font-weight:700;color:var(--ion-color-dark);margin:0 0 16px}.reaction-buttons{display:flex;justify-content:center;gap:12px;margin-bottom:20px}.reaction-buttons--emoji{gap:8px}.reaction-buttons--emoji ion-button{--padding-start: 4px;--padding-end: 4px;transition:transform .15s ease}.reaction-buttons--emoji ion-button.selected{transform:scale(1.25)}.reaction-buttons--emoji ion-button:not(.selected):not([disabled]){opacity:.55}.reaction-buttons--emoji ion-button:not(.selected):not([disabled]):hover{opacity:1}.emoji-btn{font-size:2rem;line-height:1;display:block}.comment-section{margin-top:16px;animation:slideIn .3s ease-out}.comment-section .comment-textarea{--background: transparent;--border-radius: 8px;--padding-start: 12px;--padding-end: 12px;width:100%}.comment-section .char-count{display:block;text-align:right;font-size:.75rem;color:var(--ion-color-medium);margin-top:4px}.submit-button{margin-top:16px}.submitted-message{margin-top:16px;color:var(--ion-color-success);font-weight:500;animation:fadeIn .3s ease-out}.error-message{margin-top:8px;color:var(--ion-color-danger);font-size:.875rem}.loading-container{display:flex;justify-content:center;padding:20px}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
+            args: [{ selector: 'val-content-reaction', standalone: true, imports: [CommonModule, FormsModule, IonButton, IonSpinner, IonTextarea], template: "@if (isConfigured()) {\n<div class=\"content-reaction\" [class.disabled]=\"resolvedProps().disabled\" [class.readonly]=\"resolvedProps().readonly\">\n  <!-- Bot\u00F3n de cierre (solo en modo modal/sheet) -->\n  @if (resolvedProps().showCloseButton) {\n  <ion-button fill=\"clear\" color=\"dark\" shape=\"round\" class=\"close-button\" (click)=\"close()\">\n    <strong>{{ t('close') }}</strong>\n  </ion-button>\n  }\n  <!-- Loading inicial -->\n  @if (state().isLoading && !state().selectedValue) {\n  <div class=\"loading-container\">\n    <ion-spinner name=\"crescent\"></ion-spinner>\n  </div>\n  } @else {\n  <!-- Pregunta -->\n  <p class=\"question\">\n    {{ state().selectedValue === 'negative' ? t('negativeFeedbackTitle') : resolvedProps().question }}\n  </p>\n\n  <!-- Botones de reacci\u00F3n \u2014 variante emoji (caras, estrellas, thumbs, \u2026) -->\n  @if (resolvedProps().variant === 'emoji') {\n  <div class=\"reaction-buttons reaction-buttons--emoji\">\n    @for (value of activeReactionValues(); track value; let i = $index) {\n    <ion-button\n      fill=\"clear\"\n      shape=\"round\"\n      [class.selected]=\"isSelected(value)\"\n      [attr.aria-label]=\"resolvedProps().emojiLabels[i]\"\n      [attr.aria-pressed]=\"isSelected(value)\"\n      [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n      (click)=\"selectReaction(value)\"\n    >\n      <span class=\"emoji-btn\">{{ resolvedProps().emojis[i] }}</span>\n    </ion-button>\n    }\n  </div>\n  } @else {\n  <!-- Botones de reacci\u00F3n \u2014 variante texto (default) -->\n  <div class=\"reaction-buttons\">\n    <ion-button\n      [fill]=\"isSelected('positive') ? 'solid' : 'outline'\"\n      shape=\"round\"\n      color=\"dark\"\n      [attr.aria-pressed]=\"isSelected('positive')\"\n      [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n      (click)=\"selectReaction('positive')\"\n    >\n      {{ t('positiveLabel') }}\n    </ion-button>\n    <ion-button\n      [fill]=\"isSelected('negative') ? 'solid' : 'outline'\"\n      shape=\"round\"\n      color=\"dark\"\n      [attr.aria-pressed]=\"isSelected('negative')\"\n      [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n      (click)=\"selectReaction('negative')\"\n    >\n      {{ t('negativeLabel') }}\n    </ion-button>\n  </div>\n  }\n\n  <!-- Campo de comentario (solo si hay selecci\u00F3n) -->\n  @if (showCommentField()) {\n  <div class=\"comment-section\">\n    <ion-textarea\n      [value]=\"state().comment\"\n      [placeholder]=\"resolvedProps().commentPlaceholder\"\n      [maxlength]=\"resolvedProps().maxCommentLength\"\n      [disabled]=\"resolvedProps().disabled\"\n      [rows]=\"3\"\n      class=\"comment-textarea\"\n      (ionInput)=\"updateComment($event)\"\n    ></ion-textarea>\n    <span class=\"char-count\"> {{ state().comment.length }}/{{ resolvedProps().maxCommentLength }} </span>\n  </div>\n  }\n\n  <!-- Bot\u00F3n de env\u00EDo -->\n  @if (state().selectedValue && !state().isSubmitted) {\n  <ion-button expand=\"block\" shape=\"round\" [disabled]=\"!canSubmit()\" (click)=\"submitReaction()\" class=\"submit-button\">\n    @if (state().isLoading) {\n    <ion-spinner name=\"crescent\"></ion-spinner>\n    } @else { {{ state().hadPreviousReaction ? t('update') : t('submit') }} }\n  </ion-button>\n  }\n\n  <!-- Mensaje de confirmaci\u00F3n -->\n  @if (state().isSubmitted) {\n  <p class=\"submitted-message\">{{ t('thankYou') }}</p>\n  }\n\n  <!-- Error -->\n  @if (state().error) {\n  <p class=\"error-message\">{{ state().error }}</p>\n  } }\n</div>\n}\n", styles: [":host{display:block}.content-reaction{position:relative;padding:16px;text-align:center}.content-reaction.disabled{opacity:.6;pointer-events:none}.content-reaction.readonly{pointer-events:none}.close-button{position:absolute;top:0;right:0;margin:0;--padding-start: 6px;--padding-end: 6px;--color: var(--ion-color-medium)}.close-button ion-icon{font-size:1.5rem}.question{font-size:1.0625rem;font-weight:700;color:var(--ion-color-dark);margin:0 0 16px}.reaction-buttons{display:flex;justify-content:center;gap:12px;margin-bottom:20px}.reaction-buttons--emoji{gap:8px}.reaction-buttons--emoji ion-button{--padding-start: 4px;--padding-end: 4px;transition:transform .15s ease}.reaction-buttons--emoji ion-button.selected{transform:scale(1.25)}.reaction-buttons--emoji ion-button:not(.selected):not([disabled]){opacity:.55}.reaction-buttons--emoji ion-button:not(.selected):not([disabled]):hover{opacity:1}.emoji-btn{font-size:2rem;line-height:1;display:block}.comment-section{margin-top:16px;animation:slideIn .3s ease-out}.comment-section .comment-textarea{--background: transparent;--border-radius: 8px;--padding-start: 12px;--padding-end: 12px;width:100%}.comment-section .char-count{display:block;text-align:right;font-size:.75rem;color:var(--ion-color-medium);margin-top:4px}.submit-button{margin-top:16px}.submitted-message{margin-top:16px;color:var(--ion-color-success);font-weight:500;animation:fadeIn .3s ease-out}.error-message{margin-top:8px;color:var(--ion-color-danger);font-size:.875rem}.loading-container{display:flex;justify-content:center;padding:20px}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input
             }], _modalRef: [{
@@ -56605,7 +56619,7 @@ class ApiKeysModalComponent {
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="dismiss()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
             <strong>{{ t('close') }}</strong>
           </ion-button>
         </ion-buttons>
@@ -56625,10 +56639,10 @@ class ApiKeysModalComponent {
             <code>{{ s.secret }}</code>
           </div>
           <div class="apikey-actions">
-            <ion-button expand="block" color="dark" (click)="copy(s.secret)">
+            <ion-button expand="block" color="dark" shape="round" (click)="copy(s.secret)">
               {{ copied() ? t('copied') : t('copy') }}
             </ion-button>
-            <ion-button expand="block" fill="outline" color="dark" (click)="finishSecret()">
+            <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="finishSecret()">
               {{ t('done') }}
             </ion-button>
           </div>
@@ -56651,7 +56665,7 @@ class ApiKeysModalComponent {
                       {{ k.lastUsedAt || t('never') }}
                     </span>
                   </div>
-                  <ion-button fill="clear" color="danger" size="small" (click)="revoke(k)">
+                  <ion-button fill="clear" color="danger" size="small" shape="round" (click)="revoke(k)">
                     {{ t('revoke') }}
                   </ion-button>
                 </div>
@@ -56674,13 +56688,13 @@ class ApiKeysModalComponent {
                 (selectedChange)="selectedPerms.set($event)"
               />
               <val-form [props]="createForm()" (onSubmit)="onCreateSubmit($event)" />
-              <ion-button expand="block" fill="clear" color="medium" (click)="showCreate.set(false)">
+              <ion-button expand="block" fill="clear" color="medium" shape="round" (click)="showCreate.set(false)">
                 {{ t('cancel') }}
               </ion-button>
             </div>
           } @else {
             <div class="apikey-actions">
-              <ion-button expand="block" color="primary" (click)="openCreate()">
+              <ion-button expand="block" color="primary" shape="round" (click)="openCreate()">
                 {{ t('newKey') }}
               </ion-button>
             </div>
@@ -56708,7 +56722,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="dismiss()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
             <strong>{{ t('close') }}</strong>
           </ion-button>
         </ion-buttons>
@@ -56728,10 +56742,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             <code>{{ s.secret }}</code>
           </div>
           <div class="apikey-actions">
-            <ion-button expand="block" color="dark" (click)="copy(s.secret)">
+            <ion-button expand="block" color="dark" shape="round" (click)="copy(s.secret)">
               {{ copied() ? t('copied') : t('copy') }}
             </ion-button>
-            <ion-button expand="block" fill="outline" color="dark" (click)="finishSecret()">
+            <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="finishSecret()">
               {{ t('done') }}
             </ion-button>
           </div>
@@ -56754,7 +56768,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                       {{ k.lastUsedAt || t('never') }}
                     </span>
                   </div>
-                  <ion-button fill="clear" color="danger" size="small" (click)="revoke(k)">
+                  <ion-button fill="clear" color="danger" size="small" shape="round" (click)="revoke(k)">
                     {{ t('revoke') }}
                   </ion-button>
                 </div>
@@ -56777,13 +56791,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 (selectedChange)="selectedPerms.set($event)"
               />
               <val-form [props]="createForm()" (onSubmit)="onCreateSubmit($event)" />
-              <ion-button expand="block" fill="clear" color="medium" (click)="showCreate.set(false)">
+              <ion-button expand="block" fill="clear" color="medium" shape="round" (click)="showCreate.set(false)">
                 {{ t('cancel') }}
               </ion-button>
             </div>
           } @else {
             <div class="apikey-actions">
-              <ion-button expand="block" color="primary" (click)="openCreate()">
+              <ion-button expand="block" color="primary" shape="round" (click)="openCreate()">
                 {{ t('newKey') }}
               </ion-button>
             </div>