valtech-components 4.0.27 → 4.0.29

package/fesm2022/valtech-components.mjs

@@ -56,7 +56,7 @@ import { BrowserMultiFormatReader } from '@zxing/browser';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '4.0.27';
+const VERSION = '4.0.29';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -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\" 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChangePasswordModalComponent, isStandalone: true, selector: "val-change-password-modal", inputs: { isOpen: "isOpen" }, outputs: { changed: "changed", dismissed: "dismissed" }, ngImport: i0, template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\" cssClass=\"val-modal-adaptive\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" shape=\"round\" (click)=\"close()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (mode() === 'loading') {\n        <div class=\"modal-loading\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n        </div>\n        } @else {\n        <val-form [props]=\"formProps()\" (onSubmit)=\"submitHandler($event)\" />\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".modal-form-section{display:flex;flex-direction:column;gap:16px;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\" 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"] }]
+            args: [{ selector: 'val-change-password-modal', standalone: true, imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonSpinner, IonToolbar, FormComponent], template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\" cssClass=\"val-modal-adaptive\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" shape=\"round\" (click)=\"close()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (mode() === 'loading') {\n        <div class=\"modal-loading\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n        </div>\n        } @else {\n        <val-form [props]=\"formProps()\" (onSubmit)=\"submitHandler($event)\" />\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".modal-form-section{display:flex;flex-direction:column;gap:16px;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: [{
@@ -40218,6 +40218,28 @@ const LOGIN_DEFAULTS = {
     showForgotPassword: true,
     showCard: false,
 };
+/**
+ * Logo por defecto de la card de login cuando el consumer no pasa `logo`.
+ *
+ * Usa el token CSS `--main-logo` (resuelto por `val-image` vía `var(--main-logo)`),
+ * que cada app del factory define en su `theme/variables.scss` con su logo de
+ * marca (incluye variante dark). Así el login muestra SIEMPRE el logo de la app
+ * sin acoplar la lib a una marca concreta — es el estándar del factory.
+ *
+ * Una app puede override pasando su propio `logo` en `LoginMetadata` (ej.
+ * showcase usa un mark propio `terminal.svg`).
+ */
+const DEFAULT_LOGIN_LOGO = {
+    src: '--main-logo',
+    alt: '',
+    mode: 'box',
+    shaded: false,
+    bordered: false,
+    size: 'xlarge',
+    alignment: 'center',
+    flex: true,
+    width: 8,
+};
 
 class LoginComponent {
     constructor() {
@@ -40569,6 +40591,13 @@ class LoginComponent {
     get config() {
         return { ...LOGIN_DEFAULTS, ...this.props };
     }
+    /**
+     * Logo a renderizar arriba del form. Si el consumer no pasa `logo`, cae al
+     * default de marca del factory (`--main-logo` por app). Ver DEFAULT_LOGIN_LOGO.
+     */
+    get resolvedLogo() {
+        return this.props.logo ?? DEFAULT_LOGIN_LOGO;
+    }
     // ==========================================
     // HANDLERS
     // ==========================================
@@ -40930,7 +40959,7 @@ class LoginComponent {
         this.stopResetResendCooldown();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LoginComponent, isStandalone: true, selector: "val-login", inputs: { props: "props" }, outputs: { onSuccess: "onSuccess", onError: "onError", onMFARequired: "onMFARequired" }, ngImport: i0, template: "<div class=\"val-login\" [class.val-login--card]=\"config.showCard\">\n  <!-- Logo -->\n  @if (props.logo) {\n  <div class=\"logo-container\">\n    <val-image [props]=\"props.logo\" />\n  </div>\n  }\n\n  <!-- Login Form -->\n  <val-form [props]=\"loginFormProps()\" (onSubmit)=\"loginHandler($event)\" />\n\n  <!-- OAuth Section -->\n  @if (config.showOAuth && config.oauthProviders.length > 0) {\n  <div class=\"oauth-separator\">\n    <span>{{ t('orContinueWith') }}</span>\n  </div>\n\n  <div class=\"oauth-buttons\">\n    @for (provider of config.oauthProviders; track provider) {\n    <ion-button\n      expand=\"block\"\n      fill=\"outline\"\n      color=\"dark\"\n      (click)=\"loginWithOAuth(provider)\"\n      [disabled]=\"isOAuthLoading\"\n    >\n      @switch (provider) { @case ('google') {\n      <ion-icon slot=\"start\" name=\"logo-google\" aria-hidden=\"true\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithGoogle') }} } @case ('apple') {\n      <ion-icon slot=\"start\" name=\"logo-apple\" aria-hidden=\"true\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithApple') }} } @case ('microsoft') {\n      <ion-icon slot=\"start\" name=\"logo-microsoft\" aria-hidden=\"true\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithMicrosoft') }} } }\n    </ion-button>\n    }\n  </div>\n  }\n\n  <!-- Register Link -->\n  @if (config.showRegister) {\n  <div class=\"auth-link\">\n    <ion-text color=\"dark\">\n      {{ t('noAccount') }}\n      <a (click)=\"openRegisterModal()\">{{ t('register') }}</a>\n    </ion-text>\n  </div>\n  }\n\n  <!-- Forgot Password Link -->\n  @if (config.showForgotPassword) {\n  <div class=\"auth-link forgot-password\">\n    <ion-text color=\"dark\">\n      {{ t('forgotLink') }}\n      <a (click)=\"openForgotPasswordModal()\">{{ t('recoverPassword') }}</a>\n    </ion-text>\n  </div>\n  }\n\n  <!-- Legal Notice -->\n  @if (props.legal) {\n  <div class=\"legal-notice\">\n    <ion-text color=\"dark\">\n      <p>\n        {{ t('legalPrefix') }} @if (resolvedCompanyLink) {\n        <a [href]=\"resolvedCompanyLink\" target=\"_blank\" rel=\"noopener noreferrer\"\n          ><strong>{{ props.legal.companyName }}</strong></a\n        >\n        } @else {\n        <strong>{{ props.legal.companyName }}</strong>\n        } {{ t('legalSuffix') }} @if (props.legal.termsLink) {\n        <a [href]=\"props.legal.termsLink\">{{ t('termsAndConditions') }}</a>\n        } @else {\n        <span>{{ t('termsAndConditions') }}</span>\n        } {{ t('and') }} @if (props.legal.privacyLink) {\n        <a [href]=\"props.legal.privacyLink\">{{ t('privacyPolicy') }}</a>\n        } @else {\n        <span>{{ t('privacyPolicy') }}</span>\n        }.\n      </p>\n    </ion-text>\n  </div>\n  }\n</div>\n\n<!-- Register Modal -->\n<ion-modal [isOpen]=\"isRegisterModalOpen\" (didDismiss)=\"closeRegisterModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeRegisterModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"registerFormProps()\" (onSubmit)=\"registerHandler($event)\" />\n        <div class=\"auth-link\">\n          <ion-text color=\"dark\">\n            {{ t('hasAccount') }}\n            <a (click)=\"closeRegisterModal()\">{{ t('signIn') }}</a>\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Verify Email Modal -->\n<ion-modal [isOpen]=\"isVerifyModalOpen\" [backdropDismiss]=\"false\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeVerifyModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"verifyFormProps()\" (onSubmit)=\"verifyHandler($event)\" />\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('noCodeReceived') }} @if (resendCooldown > 0) {\n            <span class=\"cooldown\">{{ t('resendIn', { seconds: resendCooldown.toString() }) }}</span>\n            } @else {\n            <a (click)=\"resendCode()\">{{ t('resend') }}</a>\n            }\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Forgot Password Modal -->\n<ion-modal [isOpen]=\"isForgotPasswordModalOpen\" (didDismiss)=\"closeForgotPasswordModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeForgotPasswordModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"forgotPasswordFormProps()\" (onSubmit)=\"forgotPasswordHandler($event)\" />\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Reset Password Modal -->\n<ion-modal [isOpen]=\"isResetPasswordModalOpen\" [backdropDismiss]=\"false\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeResetPasswordModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"resetPasswordFormProps()\" (onSubmit)=\"resetPasswordHandler($event)\" />\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('noCodeReceived') }} @if (resetResendCooldown > 0) {\n            <span class=\"cooldown\">{{ t('resendIn', { seconds: resetResendCooldown.toString() }) }}</span>\n            } @else {\n            <a (click)=\"resendResetCode()\">{{ t('resend') }}</a>\n            }\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- MFA Verify Modal -->\n<ion-modal [isOpen]=\"isMFAVerifyModalOpen\" [backdropDismiss]=\"false\" (didDismiss)=\"onMFAVerifyDismissed()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeMFAVerifyModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"mfaVerifyFormProps()\" (onSubmit)=\"verifyMFAHandler($event)\" />\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".val-login{width:100%}.val-login--card{padding:1rem .75rem;background:var(--ion-color-light);border-radius:16px;box-shadow:0 2px 8px #00000014}.logo-container{max-width:130px;margin-bottom:1.5rem}.auth-link{text-align:center;margin-top:1rem;font-size:.9rem}.auth-link a{color:var(--ion-color-primary);text-decoration:none;font-weight:500;cursor:pointer}.auth-link a:hover{text-decoration:underline}.oauth-separator{display:flex;align-items:center;margin:1.5rem 0}.oauth-separator:before,.oauth-separator:after{content:\"\";flex:1;height:1px;background:var(--ion-color-medium-tint)}.oauth-separator span{padding:0 1rem;color:var(--ion-color-dark);font-size:.85rem}.oauth-buttons{margin-bottom:1rem}.oauth-buttons ion-button{--border-radius: 8px;--border-width: 1px}.oauth-buttons ion-icon{font-size:1.2rem;margin-right:.5rem}.legal-notice{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--ion-color-medium-tint)}.legal-notice p{font-size:.75rem;line-height:1.5;text-align:center;margin:0}.legal-notice a{color:var(--ion-color-primary);text-decoration:none}.legal-notice a:hover{text-decoration:underline}.resend-link{text-align:center;margin-top:1rem;font-size:.9rem}.resend-link a{color:var(--ion-color-primary);cursor:pointer;font-weight:500}.resend-link a:hover{text-decoration:underline}.resend-link .cooldown{color:var(--ion-color-medium)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onInvalid", "onSelectChange"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LoginComponent, isStandalone: true, selector: "val-login", inputs: { props: "props" }, outputs: { onSuccess: "onSuccess", onError: "onError", onMFARequired: "onMFARequired" }, ngImport: i0, template: "<div class=\"val-login\" [class.val-login--card]=\"config.showCard\">\n  <!-- Logo \u2014 default de marca (--main-logo) si el consumer no pasa logo -->\n  <div class=\"logo-container\">\n    <val-image [props]=\"resolvedLogo\" />\n  </div>\n\n  <!-- Login Form -->\n  <val-form [props]=\"loginFormProps()\" (onSubmit)=\"loginHandler($event)\" />\n\n  <!-- OAuth Section -->\n  @if (config.showOAuth && config.oauthProviders.length > 0) {\n  <div class=\"oauth-separator\">\n    <span>{{ t('orContinueWith') }}</span>\n  </div>\n\n  <div class=\"oauth-buttons\">\n    @for (provider of config.oauthProviders; track provider) {\n    <ion-button\n      expand=\"block\"\n      fill=\"outline\"\n      color=\"dark\"\n      (click)=\"loginWithOAuth(provider)\"\n      [disabled]=\"isOAuthLoading\"\n    >\n      @switch (provider) { @case ('google') {\n      <ion-icon slot=\"start\" name=\"logo-google\" aria-hidden=\"true\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithGoogle') }} } @case ('apple') {\n      <ion-icon slot=\"start\" name=\"logo-apple\" aria-hidden=\"true\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithApple') }} } @case ('microsoft') {\n      <ion-icon slot=\"start\" name=\"logo-microsoft\" aria-hidden=\"true\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithMicrosoft') }} } }\n    </ion-button>\n    }\n  </div>\n  }\n\n  <!-- Register Link -->\n  @if (config.showRegister) {\n  <div class=\"auth-link\">\n    <ion-text color=\"dark\">\n      {{ t('noAccount') }}\n      <a (click)=\"openRegisterModal()\">{{ t('register') }}</a>\n    </ion-text>\n  </div>\n  }\n\n  <!-- Forgot Password Link -->\n  @if (config.showForgotPassword) {\n  <div class=\"auth-link forgot-password\">\n    <ion-text color=\"dark\">\n      {{ t('forgotLink') }}\n      <a (click)=\"openForgotPasswordModal()\">{{ t('recoverPassword') }}</a>\n    </ion-text>\n  </div>\n  }\n\n  <!-- Legal Notice -->\n  @if (props.legal) {\n  <div class=\"legal-notice\">\n    <ion-text color=\"dark\">\n      <p>\n        {{ t('legalPrefix') }} @if (resolvedCompanyLink) {\n        <a [href]=\"resolvedCompanyLink\" target=\"_blank\" rel=\"noopener noreferrer\"\n          ><strong>{{ props.legal.companyName }}</strong></a\n        >\n        } @else {\n        <strong>{{ props.legal.companyName }}</strong>\n        } {{ t('legalSuffix') }} @if (props.legal.termsLink) {\n        <a [href]=\"props.legal.termsLink\">{{ t('termsAndConditions') }}</a>\n        } @else {\n        <span>{{ t('termsAndConditions') }}</span>\n        } {{ t('and') }} @if (props.legal.privacyLink) {\n        <a [href]=\"props.legal.privacyLink\">{{ t('privacyPolicy') }}</a>\n        } @else {\n        <span>{{ t('privacyPolicy') }}</span>\n        }.\n      </p>\n    </ion-text>\n  </div>\n  }\n</div>\n\n<!-- Register Modal -->\n<ion-modal [isOpen]=\"isRegisterModalOpen\" (didDismiss)=\"closeRegisterModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeRegisterModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"registerFormProps()\" (onSubmit)=\"registerHandler($event)\" />\n        <div class=\"auth-link\">\n          <ion-text color=\"dark\">\n            {{ t('hasAccount') }}\n            <a (click)=\"closeRegisterModal()\">{{ t('signIn') }}</a>\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Verify Email Modal -->\n<ion-modal [isOpen]=\"isVerifyModalOpen\" [backdropDismiss]=\"false\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeVerifyModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"verifyFormProps()\" (onSubmit)=\"verifyHandler($event)\" />\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('noCodeReceived') }} @if (resendCooldown > 0) {\n            <span class=\"cooldown\">{{ t('resendIn', { seconds: resendCooldown.toString() }) }}</span>\n            } @else {\n            <a (click)=\"resendCode()\">{{ t('resend') }}</a>\n            }\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Forgot Password Modal -->\n<ion-modal [isOpen]=\"isForgotPasswordModalOpen\" (didDismiss)=\"closeForgotPasswordModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeForgotPasswordModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"forgotPasswordFormProps()\" (onSubmit)=\"forgotPasswordHandler($event)\" />\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Reset Password Modal -->\n<ion-modal [isOpen]=\"isResetPasswordModalOpen\" [backdropDismiss]=\"false\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeResetPasswordModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"resetPasswordFormProps()\" (onSubmit)=\"resetPasswordHandler($event)\" />\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('noCodeReceived') }} @if (resetResendCooldown > 0) {\n            <span class=\"cooldown\">{{ t('resendIn', { seconds: resetResendCooldown.toString() }) }}</span>\n            } @else {\n            <a (click)=\"resendResetCode()\">{{ t('resend') }}</a>\n            }\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- MFA Verify Modal -->\n<ion-modal [isOpen]=\"isMFAVerifyModalOpen\" [backdropDismiss]=\"false\" (didDismiss)=\"onMFAVerifyDismissed()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeMFAVerifyModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"mfaVerifyFormProps()\" (onSubmit)=\"verifyMFAHandler($event)\" />\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".val-login{width:100%}.val-login--card{padding:1rem .75rem;background:var(--ion-color-light);border-radius:16px;box-shadow:0 2px 8px #00000014}.logo-container{max-width:130px;margin-bottom:1.5rem}.auth-link{text-align:center;margin-top:1rem;font-size:.9rem}.auth-link a{color:var(--ion-color-primary);text-decoration:none;font-weight:500;cursor:pointer}.auth-link a:hover{text-decoration:underline}.oauth-separator{display:flex;align-items:center;margin:1.5rem 0}.oauth-separator:before,.oauth-separator:after{content:\"\";flex:1;height:1px;background:var(--ion-color-medium-tint)}.oauth-separator span{padding:0 1rem;color:var(--ion-color-dark);font-size:.85rem}.oauth-buttons{margin-bottom:1rem}.oauth-buttons ion-button{--border-radius: 8px;--border-width: 1px}.oauth-buttons ion-icon{font-size:1.2rem;margin-right:.5rem}.legal-notice{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--ion-color-medium-tint)}.legal-notice p{font-size:.75rem;line-height:1.5;text-align:center;margin:0}.legal-notice a{color:var(--ion-color-primary);text-decoration:none}.legal-notice a:hover{text-decoration:underline}.resend-link{text-align:center;margin-top:1rem;font-size:.9rem}.resend-link a{color:var(--ion-color-primary);cursor:pointer;font-weight:500}.resend-link a:hover{text-decoration:underline}.resend-link .cooldown{color:var(--ion-color-medium)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onInvalid", "onSelectChange"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoginComponent, decorators: [{
             type: Component,
@@ -40946,7 +40975,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         IonToolbar,
                         FormComponent,
                         ImageComponent,
-                    ], template: "<div class=\"val-login\" [class.val-login--card]=\"config.showCard\">\n  <!-- Logo -->\n  @if (props.logo) {\n  <div class=\"logo-container\">\n    <val-image [props]=\"props.logo\" />\n  </div>\n  }\n\n  <!-- Login Form -->\n  <val-form [props]=\"loginFormProps()\" (onSubmit)=\"loginHandler($event)\" />\n\n  <!-- OAuth Section -->\n  @if (config.showOAuth && config.oauthProviders.length > 0) {\n  <div class=\"oauth-separator\">\n    <span>{{ t('orContinueWith') }}</span>\n  </div>\n\n  <div class=\"oauth-buttons\">\n    @for (provider of config.oauthProviders; track provider) {\n    <ion-button\n      expand=\"block\"\n      fill=\"outline\"\n      color=\"dark\"\n      (click)=\"loginWithOAuth(provider)\"\n      [disabled]=\"isOAuthLoading\"\n    >\n      @switch (provider) { @case ('google') {\n      <ion-icon slot=\"start\" name=\"logo-google\" aria-hidden=\"true\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithGoogle') }} } @case ('apple') {\n      <ion-icon slot=\"start\" name=\"logo-apple\" aria-hidden=\"true\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithApple') }} } @case ('microsoft') {\n      <ion-icon slot=\"start\" name=\"logo-microsoft\" aria-hidden=\"true\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithMicrosoft') }} } }\n    </ion-button>\n    }\n  </div>\n  }\n\n  <!-- Register Link -->\n  @if (config.showRegister) {\n  <div class=\"auth-link\">\n    <ion-text color=\"dark\">\n      {{ t('noAccount') }}\n      <a (click)=\"openRegisterModal()\">{{ t('register') }}</a>\n    </ion-text>\n  </div>\n  }\n\n  <!-- Forgot Password Link -->\n  @if (config.showForgotPassword) {\n  <div class=\"auth-link forgot-password\">\n    <ion-text color=\"dark\">\n      {{ t('forgotLink') }}\n      <a (click)=\"openForgotPasswordModal()\">{{ t('recoverPassword') }}</a>\n    </ion-text>\n  </div>\n  }\n\n  <!-- Legal Notice -->\n  @if (props.legal) {\n  <div class=\"legal-notice\">\n    <ion-text color=\"dark\">\n      <p>\n        {{ t('legalPrefix') }} @if (resolvedCompanyLink) {\n        <a [href]=\"resolvedCompanyLink\" target=\"_blank\" rel=\"noopener noreferrer\"\n          ><strong>{{ props.legal.companyName }}</strong></a\n        >\n        } @else {\n        <strong>{{ props.legal.companyName }}</strong>\n        } {{ t('legalSuffix') }} @if (props.legal.termsLink) {\n        <a [href]=\"props.legal.termsLink\">{{ t('termsAndConditions') }}</a>\n        } @else {\n        <span>{{ t('termsAndConditions') }}</span>\n        } {{ t('and') }} @if (props.legal.privacyLink) {\n        <a [href]=\"props.legal.privacyLink\">{{ t('privacyPolicy') }}</a>\n        } @else {\n        <span>{{ t('privacyPolicy') }}</span>\n        }.\n      </p>\n    </ion-text>\n  </div>\n  }\n</div>\n\n<!-- Register Modal -->\n<ion-modal [isOpen]=\"isRegisterModalOpen\" (didDismiss)=\"closeRegisterModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeRegisterModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"registerFormProps()\" (onSubmit)=\"registerHandler($event)\" />\n        <div class=\"auth-link\">\n          <ion-text color=\"dark\">\n            {{ t('hasAccount') }}\n            <a (click)=\"closeRegisterModal()\">{{ t('signIn') }}</a>\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Verify Email Modal -->\n<ion-modal [isOpen]=\"isVerifyModalOpen\" [backdropDismiss]=\"false\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeVerifyModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"verifyFormProps()\" (onSubmit)=\"verifyHandler($event)\" />\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('noCodeReceived') }} @if (resendCooldown > 0) {\n            <span class=\"cooldown\">{{ t('resendIn', { seconds: resendCooldown.toString() }) }}</span>\n            } @else {\n            <a (click)=\"resendCode()\">{{ t('resend') }}</a>\n            }\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Forgot Password Modal -->\n<ion-modal [isOpen]=\"isForgotPasswordModalOpen\" (didDismiss)=\"closeForgotPasswordModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeForgotPasswordModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"forgotPasswordFormProps()\" (onSubmit)=\"forgotPasswordHandler($event)\" />\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Reset Password Modal -->\n<ion-modal [isOpen]=\"isResetPasswordModalOpen\" [backdropDismiss]=\"false\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeResetPasswordModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"resetPasswordFormProps()\" (onSubmit)=\"resetPasswordHandler($event)\" />\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('noCodeReceived') }} @if (resetResendCooldown > 0) {\n            <span class=\"cooldown\">{{ t('resendIn', { seconds: resetResendCooldown.toString() }) }}</span>\n            } @else {\n            <a (click)=\"resendResetCode()\">{{ t('resend') }}</a>\n            }\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- MFA Verify Modal -->\n<ion-modal [isOpen]=\"isMFAVerifyModalOpen\" [backdropDismiss]=\"false\" (didDismiss)=\"onMFAVerifyDismissed()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeMFAVerifyModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"mfaVerifyFormProps()\" (onSubmit)=\"verifyMFAHandler($event)\" />\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".val-login{width:100%}.val-login--card{padding:1rem .75rem;background:var(--ion-color-light);border-radius:16px;box-shadow:0 2px 8px #00000014}.logo-container{max-width:130px;margin-bottom:1.5rem}.auth-link{text-align:center;margin-top:1rem;font-size:.9rem}.auth-link a{color:var(--ion-color-primary);text-decoration:none;font-weight:500;cursor:pointer}.auth-link a:hover{text-decoration:underline}.oauth-separator{display:flex;align-items:center;margin:1.5rem 0}.oauth-separator:before,.oauth-separator:after{content:\"\";flex:1;height:1px;background:var(--ion-color-medium-tint)}.oauth-separator span{padding:0 1rem;color:var(--ion-color-dark);font-size:.85rem}.oauth-buttons{margin-bottom:1rem}.oauth-buttons ion-button{--border-radius: 8px;--border-width: 1px}.oauth-buttons ion-icon{font-size:1.2rem;margin-right:.5rem}.legal-notice{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--ion-color-medium-tint)}.legal-notice p{font-size:.75rem;line-height:1.5;text-align:center;margin:0}.legal-notice a{color:var(--ion-color-primary);text-decoration:none}.legal-notice a:hover{text-decoration:underline}.resend-link{text-align:center;margin-top:1rem;font-size:.9rem}.resend-link a{color:var(--ion-color-primary);cursor:pointer;font-weight:500}.resend-link a:hover{text-decoration:underline}.resend-link .cooldown{color:var(--ion-color-medium)}\n"] }]
+                    ], template: "<div class=\"val-login\" [class.val-login--card]=\"config.showCard\">\n  <!-- Logo \u2014 default de marca (--main-logo) si el consumer no pasa logo -->\n  <div class=\"logo-container\">\n    <val-image [props]=\"resolvedLogo\" />\n  </div>\n\n  <!-- Login Form -->\n  <val-form [props]=\"loginFormProps()\" (onSubmit)=\"loginHandler($event)\" />\n\n  <!-- OAuth Section -->\n  @if (config.showOAuth && config.oauthProviders.length > 0) {\n  <div class=\"oauth-separator\">\n    <span>{{ t('orContinueWith') }}</span>\n  </div>\n\n  <div class=\"oauth-buttons\">\n    @for (provider of config.oauthProviders; track provider) {\n    <ion-button\n      expand=\"block\"\n      fill=\"outline\"\n      color=\"dark\"\n      (click)=\"loginWithOAuth(provider)\"\n      [disabled]=\"isOAuthLoading\"\n    >\n      @switch (provider) { @case ('google') {\n      <ion-icon slot=\"start\" name=\"logo-google\" aria-hidden=\"true\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithGoogle') }} } @case ('apple') {\n      <ion-icon slot=\"start\" name=\"logo-apple\" aria-hidden=\"true\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithApple') }} } @case ('microsoft') {\n      <ion-icon slot=\"start\" name=\"logo-microsoft\" aria-hidden=\"true\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithMicrosoft') }} } }\n    </ion-button>\n    }\n  </div>\n  }\n\n  <!-- Register Link -->\n  @if (config.showRegister) {\n  <div class=\"auth-link\">\n    <ion-text color=\"dark\">\n      {{ t('noAccount') }}\n      <a (click)=\"openRegisterModal()\">{{ t('register') }}</a>\n    </ion-text>\n  </div>\n  }\n\n  <!-- Forgot Password Link -->\n  @if (config.showForgotPassword) {\n  <div class=\"auth-link forgot-password\">\n    <ion-text color=\"dark\">\n      {{ t('forgotLink') }}\n      <a (click)=\"openForgotPasswordModal()\">{{ t('recoverPassword') }}</a>\n    </ion-text>\n  </div>\n  }\n\n  <!-- Legal Notice -->\n  @if (props.legal) {\n  <div class=\"legal-notice\">\n    <ion-text color=\"dark\">\n      <p>\n        {{ t('legalPrefix') }} @if (resolvedCompanyLink) {\n        <a [href]=\"resolvedCompanyLink\" target=\"_blank\" rel=\"noopener noreferrer\"\n          ><strong>{{ props.legal.companyName }}</strong></a\n        >\n        } @else {\n        <strong>{{ props.legal.companyName }}</strong>\n        } {{ t('legalSuffix') }} @if (props.legal.termsLink) {\n        <a [href]=\"props.legal.termsLink\">{{ t('termsAndConditions') }}</a>\n        } @else {\n        <span>{{ t('termsAndConditions') }}</span>\n        } {{ t('and') }} @if (props.legal.privacyLink) {\n        <a [href]=\"props.legal.privacyLink\">{{ t('privacyPolicy') }}</a>\n        } @else {\n        <span>{{ t('privacyPolicy') }}</span>\n        }.\n      </p>\n    </ion-text>\n  </div>\n  }\n</div>\n\n<!-- Register Modal -->\n<ion-modal [isOpen]=\"isRegisterModalOpen\" (didDismiss)=\"closeRegisterModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeRegisterModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"registerFormProps()\" (onSubmit)=\"registerHandler($event)\" />\n        <div class=\"auth-link\">\n          <ion-text color=\"dark\">\n            {{ t('hasAccount') }}\n            <a (click)=\"closeRegisterModal()\">{{ t('signIn') }}</a>\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Verify Email Modal -->\n<ion-modal [isOpen]=\"isVerifyModalOpen\" [backdropDismiss]=\"false\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeVerifyModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"verifyFormProps()\" (onSubmit)=\"verifyHandler($event)\" />\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('noCodeReceived') }} @if (resendCooldown > 0) {\n            <span class=\"cooldown\">{{ t('resendIn', { seconds: resendCooldown.toString() }) }}</span>\n            } @else {\n            <a (click)=\"resendCode()\">{{ t('resend') }}</a>\n            }\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Forgot Password Modal -->\n<ion-modal [isOpen]=\"isForgotPasswordModalOpen\" (didDismiss)=\"closeForgotPasswordModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeForgotPasswordModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"forgotPasswordFormProps()\" (onSubmit)=\"forgotPasswordHandler($event)\" />\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Reset Password Modal -->\n<ion-modal [isOpen]=\"isResetPasswordModalOpen\" [backdropDismiss]=\"false\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeResetPasswordModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"resetPasswordFormProps()\" (onSubmit)=\"resetPasswordHandler($event)\" />\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('noCodeReceived') }} @if (resetResendCooldown > 0) {\n            <span class=\"cooldown\">{{ t('resendIn', { seconds: resetResendCooldown.toString() }) }}</span>\n            } @else {\n            <a (click)=\"resendResetCode()\">{{ t('resend') }}</a>\n            }\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- MFA Verify Modal -->\n<ion-modal [isOpen]=\"isMFAVerifyModalOpen\" [backdropDismiss]=\"false\" (didDismiss)=\"onMFAVerifyDismissed()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeMFAVerifyModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"mfaVerifyFormProps()\" (onSubmit)=\"verifyMFAHandler($event)\" />\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".val-login{width:100%}.val-login--card{padding:1rem .75rem;background:var(--ion-color-light);border-radius:16px;box-shadow:0 2px 8px #00000014}.logo-container{max-width:130px;margin-bottom:1.5rem}.auth-link{text-align:center;margin-top:1rem;font-size:.9rem}.auth-link a{color:var(--ion-color-primary);text-decoration:none;font-weight:500;cursor:pointer}.auth-link a:hover{text-decoration:underline}.oauth-separator{display:flex;align-items:center;margin:1.5rem 0}.oauth-separator:before,.oauth-separator:after{content:\"\";flex:1;height:1px;background:var(--ion-color-medium-tint)}.oauth-separator span{padding:0 1rem;color:var(--ion-color-dark);font-size:.85rem}.oauth-buttons{margin-bottom:1rem}.oauth-buttons ion-button{--border-radius: 8px;--border-width: 1px}.oauth-buttons ion-icon{font-size:1.2rem;margin-right:.5rem}.legal-notice{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--ion-color-medium-tint)}.legal-notice p{font-size:.75rem;line-height:1.5;text-align:center;margin:0}.legal-notice a{color:var(--ion-color-primary);text-decoration:none}.legal-notice a:hover{text-decoration:underline}.resend-link{text-align:center;margin-top:1rem;font-size:.9rem}.resend-link a{color:var(--ion-color-primary);cursor:pointer;font-weight:500}.resend-link a:hover{text-decoration:underline}.resend-link .cooldown{color:var(--ion-color-medium)}\n"] }]
         }], propDecorators: { props: [{
                 type: Input
             }], onSuccess: [{
@@ -46678,6 +46707,16 @@ const DEFAULT_NAMESPACE$h = 'CreateOrgModal';
  * `CreateOrgModal`.
  */
 class CreateOrgModalComponent {
+    set isOpen(value) {
+        const opening = value && !this._isOpen;
+        this._isOpen = value;
+        if (opening) {
+            this._busy.set(false);
+        }
+    }
+    get isOpen() {
+        return this._isOpen;
+    }
     constructor() {
         this.i18n = inject(I18nService);
         this.orgService = inject(OrgService);
@@ -46686,6 +46725,9 @@ class CreateOrgModalComponent {
         this.errors = inject(ValtechErrorService);
         /** Namespace i18n con que la vista resuelve sus textos. */
         this.i18nNamespace = DEFAULT_NAMESPACE$h;
+        this._isOpen = false;
+        this.dismissed = new EventEmitter();
+        this.created = new EventEmitter();
         this._busy = signal(false);
         if (!this.i18n.hasNamespace(DEFAULT_NAMESPACE$h)) {
             this.i18n.registerContent(DEFAULT_NAMESPACE$h, CREATE_ORG_MODAL_I18N);
@@ -46731,8 +46773,8 @@ class CreateOrgModalComponent {
                 duration: 3500,
             });
             await this.orgSwitch.switchTo(newOrg.id);
-            this.onSuccess?.(newOrg);
-            this._modalRef?.dismiss(newOrg, 'confirm');
+            this.created.emit(newOrg);
+            this.dismissed.emit();
         }
         catch (err) {
             this.errors.handle(err, { i18nNamespace: this.i18nNamespace });
@@ -46742,7 +46784,10 @@ class CreateOrgModalComponent {
         }
     }
     dismiss() {
-        this._modalRef?.dismiss(null, 'cancel');
+        this.dismissed.emit();
+    }
+    close() {
+        this.dismissed.emit();
     }
     buildFormMeta() {
         const nameField = {
@@ -46822,71 +46867,81 @@ class CreateOrgModalComponent {
         return this.i18n.t(key, this.i18nNamespace);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CreateOrgModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CreateOrgModalComponent, isStandalone: true, selector: "val-create-org-modal", inputs: { _modalRef: "_modalRef", onSuccess: "onSuccess", i18nNamespace: "i18nNamespace" }, ngImport: i0, template: `
-    <ion-header>
-      <ion-toolbar>
-        <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
-            <strong>{{ t('close') }}</strong>
-          </ion-button>
-        </ion-buttons>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-      <val-display [props]="{ content: t('pageTitle'), size: 'small', color: 'dark' }" />
-      <val-title
-        [props]="{
-          content: t('pageDescription'),
-          size: 'large',
-          color: '',
-          bold: false,
-        }"
-      />
-      <val-form [props]="formMeta()" (onSubmit)="onSubmit($event)" />
-      <div class="modal-close-bottom">
-        <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="dismiss()">
-          {{ t('close') }}
-        </ion-button>
-      </div>
-    </ion-content>
-  `, isInline: true, styles: [".modal-close-bottom{margin-top:16px}\n"], dependencies: [{ kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onInvalid", "onSelectChange"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CreateOrgModalComponent, isStandalone: true, selector: "val-create-org-modal", inputs: { i18nNamespace: "i18nNamespace", isOpen: "isOpen" }, outputs: { dismissed: "dismissed", created: "created" }, ngImport: i0, template: `
+    <ion-modal [isOpen]="isOpen" (didDismiss)="close()" cssClass="val-modal-adaptive">
+      <ng-template>
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="end">
+              <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
+                <strong>{{ t('close') }}</strong>
+              </ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <val-display [props]="{ content: t('pageTitle'), size: 'small', color: 'dark' }" />
+          <val-title
+            [props]="{
+              content: t('pageDescription'),
+              size: 'large',
+              color: '',
+              bold: false,
+            }"
+          />
+          <val-form [props]="formMeta()" (onSubmit)="onSubmit($event)" />
+          <div class="modal-close-bottom">
+            <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="dismiss()">
+              {{ t('close') }}
+            </ion-button>
+          </div>
+        </ion-content>
+      </ng-template>
+    </ion-modal>
+  `, isInline: true, styles: [".modal-close-bottom{margin-top:16px}\n"], dependencies: [{ kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onInvalid", "onSelectChange"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CreateOrgModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-create-org-modal', standalone: true, imports: [IonHeader, IonToolbar, IonButtons, IonButton, IonContent, FormComponent, DisplayComponent, TitleComponent], template: `
-    <ion-header>
-      <ion-toolbar>
-        <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
-            <strong>{{ t('close') }}</strong>
-          </ion-button>
-        </ion-buttons>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-      <val-display [props]="{ content: t('pageTitle'), size: 'small', color: 'dark' }" />
-      <val-title
-        [props]="{
-          content: t('pageDescription'),
-          size: 'large',
-          color: '',
-          bold: false,
-        }"
-      />
-      <val-form [props]="formMeta()" (onSubmit)="onSubmit($event)" />
-      <div class="modal-close-bottom">
-        <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="dismiss()">
-          {{ t('close') }}
-        </ion-button>
-      </div>
-    </ion-content>
+            args: [{ selector: 'val-create-org-modal', standalone: true, imports: [IonModal, IonHeader, IonToolbar, IonButtons, IonButton, IonContent, FormComponent, DisplayComponent, TitleComponent], template: `
+    <ion-modal [isOpen]="isOpen" (didDismiss)="close()" cssClass="val-modal-adaptive">
+      <ng-template>
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="end">
+              <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
+                <strong>{{ t('close') }}</strong>
+              </ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <val-display [props]="{ content: t('pageTitle'), size: 'small', color: 'dark' }" />
+          <val-title
+            [props]="{
+              content: t('pageDescription'),
+              size: 'large',
+              color: '',
+              bold: false,
+            }"
+          />
+          <val-form [props]="formMeta()" (onSubmit)="onSubmit($event)" />
+          <div class="modal-close-bottom">
+            <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="dismiss()">
+              {{ t('close') }}
+            </ion-button>
+          </div>
+        </ion-content>
+      </ng-template>
+    </ion-modal>
   `, styles: [".modal-close-bottom{margin-top:16px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { _modalRef: [{
-                type: Input
-            }], onSuccess: [{
+        }], ctorParameters: () => [], propDecorators: { i18nNamespace: [{
                 type: Input
-            }], i18nNamespace: [{
+            }], isOpen: [{
                 type: Input
+            }], dismissed: [{
+                type: Output
+            }], created: [{
+                type: Output
             }] } });
 
 /**
@@ -46949,6 +47004,21 @@ const DEFAULT_NAMESPACE$g = 'Settings.DeleteAccount';
  * proveyó el namespace `Settings.DeleteAccount`.
  */
 class DeleteAccountModalComponent {
+    set isOpen(value) {
+        const opening = value && !this._isOpen;
+        this._isOpen = value;
+        if (opening) {
+            this.hasPassword.set(null);
+            this.codeSent.set(false);
+            this.formState.set(ComponentStates.ENABLED);
+            firstValueFrom(this.auth.getProfile())
+                .then(profile => this.hasPassword.set(profile.hasPassword ?? true))
+                .catch(() => this.hasPassword.set(true));
+        }
+    }
+    get isOpen() {
+        return this._isOpen;
+    }
     constructor() {
         this.auth = inject(AuthService);
         this.errors = inject(ValtechErrorService);
@@ -46956,6 +47026,8 @@ class DeleteAccountModalComponent {
         this.toast = inject(ToastService);
         /** Namespace i18n con que la vista resuelve sus textos. */
         this.i18nNamespace = DEFAULT_NAMESPACE$g;
+        this._isOpen = false;
+        this.dismissed = new EventEmitter();
         this.hasPassword = signal(null);
         this.codeSent = signal(false);
         this.formState = signal(ComponentStates.ENABLED);
@@ -47026,11 +47098,6 @@ class DeleteAccountModalComponent {
             this.i18n.registerContent(DEFAULT_NAMESPACE$g, DELETE_ACCOUNT_MODAL_I18N);
         }
     }
-    ngOnInit() {
-        firstValueFrom(this.auth.getProfile())
-            .then(profile => this.hasPassword.set(profile.hasPassword ?? true))
-            .catch(() => this.hasPassword.set(true));
-    }
     submitBtn(token, textKey) {
         return {
             text: this.t(textKey),
@@ -47045,7 +47112,7 @@ class DeleteAccountModalComponent {
         };
     }
     close() {
-        this._modalRef?.dismiss(undefined, 'cancel');
+        this.dismissed.emit();
     }
     async onPasswordSubmit(event) {
         const password = event.fields['password'];
@@ -47105,89 +47172,99 @@ class DeleteAccountModalComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DeleteAccountModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DeleteAccountModalComponent, isStandalone: true, selector: "val-delete-account-modal", inputs: { _modalRef: "_modalRef", i18nNamespace: "i18nNamespace" }, ngImport: i0, template: `
-    <ion-header>
-      <ion-toolbar>
-        <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" shape="round" (click)="close()">
-            <strong>{{ t('close') }}</strong>
-          </ion-button>
-        </ion-buttons>
-      </ion-toolbar>
-    </ion-header>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DeleteAccountModalComponent, isStandalone: true, selector: "val-delete-account-modal", inputs: { i18nNamespace: "i18nNamespace", isOpen: "isOpen" }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: `
+    <ion-modal [isOpen]="isOpen" (didDismiss)="close()" cssClass="val-modal-adaptive">
+      <ng-template>
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="end">
+              <ion-button fill="clear" color="dark" shape="round" (click)="close()">
+                <strong>{{ t('close') }}</strong>
+              </ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
 
-    <ion-content class="ion-padding">
-      <section class="modal-form-section">
-        @if (hasPassword() === null) {
-          <div class="spinner-center">
-            <ion-spinner name="crescent" />
-          </div>
-        } @else if (hasPassword()) {
-          <val-form [props]="passwordFormProps()" (onSubmit)="onPasswordSubmit($event)" />
-        } @else if (!codeSent()) {
-          <val-form [props]="sendCodeFormProps()" (onSubmit)="onSendCode()" />
-        } @else {
-          <val-form [props]="codeFormProps()" (onSubmit)="onCodeSubmit($event)" />
-          <div class="resend-row">
-            <ion-button
-              fill="clear"
-              color="medium"
-              size="small"
-              [disabled]="formState() === 'WORKING'"
-              (click)="onResendCode()"
-            >
-              {{ t('resend') }}
-            </ion-button>
-          </div>
-        }
-      </section>
-    </ion-content>
-  `, isInline: true, styles: [".modal-form-section{display:flex;flex-direction:column;gap:16px;max-width:420px;margin:0 auto;padding-top:8px}.resend-row{display:flex;justify-content:center;margin-top:-8px}.spinner-center{display:flex;justify-content:center;padding-top:32px}\n"], dependencies: [{ kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onInvalid", "onSelectChange"] }] }); }
+        <ion-content class="ion-padding">
+          <section class="modal-form-section">
+            @if (hasPassword() === null) {
+              <div class="spinner-center">
+                <ion-spinner name="crescent" />
+              </div>
+            } @else if (hasPassword()) {
+              <val-form [props]="passwordFormProps()" (onSubmit)="onPasswordSubmit($event)" />
+            } @else if (!codeSent()) {
+              <val-form [props]="sendCodeFormProps()" (onSubmit)="onSendCode()" />
+            } @else {
+              <val-form [props]="codeFormProps()" (onSubmit)="onCodeSubmit($event)" />
+              <div class="resend-row">
+                <ion-button
+                  fill="clear"
+                  color="medium"
+                  size="small"
+                  [disabled]="formState() === 'WORKING'"
+                  (click)="onResendCode()"
+                >
+                  {{ t('resend') }}
+                </ion-button>
+              </div>
+            }
+          </section>
+        </ion-content>
+      </ng-template>
+    </ion-modal>
+  `, isInline: true, styles: [".modal-form-section{display:flex;flex-direction:column;gap:16px;max-width:420px;margin:0 auto;padding-top:8px}.resend-row{display:flex;justify-content:center;margin-top:-8px}.spinner-center{display:flex;justify-content:center;padding-top:32px}\n"], dependencies: [{ kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onInvalid", "onSelectChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DeleteAccountModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-delete-account-modal', standalone: true, imports: [IonHeader, IonToolbar, IonButtons, IonButton, IonContent, IonSpinner, FormComponent], template: `
-    <ion-header>
-      <ion-toolbar>
-        <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" shape="round" (click)="close()">
-            <strong>{{ t('close') }}</strong>
-          </ion-button>
-        </ion-buttons>
-      </ion-toolbar>
-    </ion-header>
+            args: [{ selector: 'val-delete-account-modal', standalone: true, imports: [IonModal, IonHeader, IonToolbar, IonButtons, IonButton, IonContent, IonSpinner, FormComponent], template: `
+    <ion-modal [isOpen]="isOpen" (didDismiss)="close()" cssClass="val-modal-adaptive">
+      <ng-template>
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="end">
+              <ion-button fill="clear" color="dark" shape="round" (click)="close()">
+                <strong>{{ t('close') }}</strong>
+              </ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
 
-    <ion-content class="ion-padding">
-      <section class="modal-form-section">
-        @if (hasPassword() === null) {
-          <div class="spinner-center">
-            <ion-spinner name="crescent" />
-          </div>
-        } @else if (hasPassword()) {
-          <val-form [props]="passwordFormProps()" (onSubmit)="onPasswordSubmit($event)" />
-        } @else if (!codeSent()) {
-          <val-form [props]="sendCodeFormProps()" (onSubmit)="onSendCode()" />
-        } @else {
-          <val-form [props]="codeFormProps()" (onSubmit)="onCodeSubmit($event)" />
-          <div class="resend-row">
-            <ion-button
-              fill="clear"
-              color="medium"
-              size="small"
-              [disabled]="formState() === 'WORKING'"
-              (click)="onResendCode()"
-            >
-              {{ t('resend') }}
-            </ion-button>
-          </div>
-        }
-      </section>
-    </ion-content>
+        <ion-content class="ion-padding">
+          <section class="modal-form-section">
+            @if (hasPassword() === null) {
+              <div class="spinner-center">
+                <ion-spinner name="crescent" />
+              </div>
+            } @else if (hasPassword()) {
+              <val-form [props]="passwordFormProps()" (onSubmit)="onPasswordSubmit($event)" />
+            } @else if (!codeSent()) {
+              <val-form [props]="sendCodeFormProps()" (onSubmit)="onSendCode()" />
+            } @else {
+              <val-form [props]="codeFormProps()" (onSubmit)="onCodeSubmit($event)" />
+              <div class="resend-row">
+                <ion-button
+                  fill="clear"
+                  color="medium"
+                  size="small"
+                  [disabled]="formState() === 'WORKING'"
+                  (click)="onResendCode()"
+                >
+                  {{ t('resend') }}
+                </ion-button>
+              </div>
+            }
+          </section>
+        </ion-content>
+      </ng-template>
+    </ion-modal>
   `, styles: [".modal-form-section{display:flex;flex-direction:column;gap:16px;max-width:420px;margin:0 auto;padding-top:8px}.resend-row{display:flex;justify-content:center;margin-top:-8px}.spinner-center{display:flex;justify-content:center;padding-top:32px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { _modalRef: [{
+        }], ctorParameters: () => [], propDecorators: { i18nNamespace: [{
                 type: Input
-            }], i18nNamespace: [{
+            }], isOpen: [{
                 type: Input
+            }], dismissed: [{
+                type: Output
             }] } });
 
 /**
@@ -47878,6 +47955,8 @@ class AccountViewComponent {
                 retrying: this.orgsLoading(),
             });
         });
+        this.createOrgOpen = signal(false);
+        this.deleteAccountOpen = signal(false);
         this.pendingInvites = signal([]);
         this.pendingInvitesLoading = signal(false);
         this.inviteAccepting = signal(null);
@@ -47991,40 +48070,18 @@ class AccountViewComponent {
         });
     }
     onDeleteAccount() {
-        void this.modalService.open({
-            component: DeleteAccountModalComponent,
-            componentProps: {
-                i18nNamespace: 'Settings.DeleteAccount',
-            },
-            breakpoints: {
-                breakpoints: [0, 0.85],
-                initialBreakpoint: 0.85,
-                showHandle: true,
-            },
-            backdropDismiss: false,
-        });
+        this.deleteAccountOpen.set(true);
         this.resolvedConfig().onAccountDeleted?.();
     }
     onManageOrg() {
         this.nav.navigateByUrl(this.resolvedConfig().manageOrgRoute);
     }
     onNewOrg() {
-        void this.modalService.open({
-            component: CreateOrgModalComponent,
-            componentProps: {
-                i18nNamespace: 'CreateOrgModal',
-                onSuccess: (newOrg) => {
-                    this.loadOrgs();
-                    this.resolvedConfig().onOrgCreated?.(newOrg);
-                },
-            },
-            breakpoints: {
-                breakpoints: [0, 0.92],
-                initialBreakpoint: 0.92,
-                showHandle: true,
-            },
-            backdropDismiss: true,
-        });
+        this.createOrgOpen.set(true);
+    }
+    onOrgCreated(newOrg) {
+        this.loadOrgs();
+        this.resolvedConfig().onOrgCreated?.(newOrg);
     }
     onMoreInfo() {
         void this.modalService.open({
@@ -48314,8 +48371,19 @@ class AccountViewComponent {
           </div>
         </section>
       }
+      <val-create-org-modal
+        [isOpen]="createOrgOpen()"
+        [i18nNamespace]="'CreateOrgModal'"
+        (dismissed)="createOrgOpen.set(false)"
+        (created)="onOrgCreated($event)"
+      />
+      <val-delete-account-modal
+        [isOpen]="deleteAccountOpen()"
+        [i18nNamespace]="'Settings.DeleteAccount'"
+        (dismissed)="deleteAccountOpen.set(false)"
+      />
     </div>
-  `, isInline: true, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.page-header{margin-bottom:16px}.settings-section{padding:16px 0}.settings-section+.settings-section{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.settings-section val-title{display:block;margin-bottom:12px}.section-body{display:flex;flex-direction:column;gap:10px}.row-actions{margin-top:12px}.row-actions--gap{display:flex;flex-wrap:wrap;gap:8px}.section-header-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.org-new-cta-card{display:block;margin-top:12px}.orgs-empty-card{background:var(--ion-color-secondary-tint, rgba(var(--ion-color-secondary-rgb, 130, 101, 208), .2));border-radius:18px;padding:18px 16px 12px;display:flex;flex-direction:column;gap:8px}.orgs-empty-card__main{display:flex;align-items:center;gap:10px}.orgs-empty-card__icon{font-size:20px;flex-shrink:0;color:var(--ion-color-dark)}.orgs-empty-card__text{font-size:.875rem;color:var(--ion-color-dark)}.orgs-empty-card__link{background:none;border:none;padding:0;cursor:pointer;font-size:.8125rem;color:var(--ion-color-primary);text-align:left;text-decoration:underline;text-underline-offset:2px;font-family:inherit}.orgs-list{display:flex;flex-direction:column;gap:8px}.org-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;background:var(--ion-color-light, #f4f5f8);border:1.5px solid transparent;cursor:pointer;transition:background .15s,border-color .15s}.org-card:active{opacity:.75}.org-card--active{border-color:var(--ion-color-primary);background:color-mix(in srgb,var(--ion-color-primary) 8%,transparent)}:host-context(body.dark) .org-card,:host-context(html.ion-palette-dark) .org-card,:host-context([data-theme=\"dark\"]) .org-card{background:#ffffff0d}:host-context(body.dark) .org-card--active,:host-context(html.ion-palette-dark) .org-card--active,:host-context([data-theme=\"dark\"]) .org-card--active{background:color-mix(in srgb,var(--ion-color-primary) 15%,transparent)}.org-card__icon{width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--ion-color-primary) 15%,transparent);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:20px;color:var(--ion-color-primary)}.org-card__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.org-card__name{font-weight:600;font-size:.95rem;color:var(--ion-color-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.org-card__meta{display:flex;flex-direction:column;gap:1px;margin-top:3px}.org-card__meta-item{font-size:.78rem;color:var(--ion-color-dark)}.org-card__meta-label{font-weight:600;color:var(--ion-color-dark);margin-right:4px}.org-card__end{display:flex;align-items:center;gap:8px;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: EmptyStateComponent, selector: "val-empty-state", inputs: ["props"] }, { kind: "component", type: SkeletonLayoutComponent, selector: "val-skeleton-layout", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: CtaCardComponent, selector: "val-cta-card", inputs: ["props"], outputs: ["onAction"] }, { kind: "component", type: InvitationCardComponent, selector: "val-invitation-card", inputs: ["props"], outputs: ["onAccept", "onDecline"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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: "pipe", type: TitleCasePipe, name: "titlecase" }] }); }
+  `, isInline: true, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.page-header{margin-bottom:16px}.settings-section{padding:16px 0}.settings-section+.settings-section{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.settings-section val-title{display:block;margin-bottom:12px}.section-body{display:flex;flex-direction:column;gap:10px}.row-actions{margin-top:12px}.row-actions--gap{display:flex;flex-wrap:wrap;gap:8px}.section-header-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.org-new-cta-card{display:block;margin-top:12px}.orgs-empty-card{background:var(--ion-color-secondary-tint, rgba(var(--ion-color-secondary-rgb, 130, 101, 208), .2));border-radius:18px;padding:18px 16px 12px;display:flex;flex-direction:column;gap:8px}.orgs-empty-card__main{display:flex;align-items:center;gap:10px}.orgs-empty-card__icon{font-size:20px;flex-shrink:0;color:var(--ion-color-dark)}.orgs-empty-card__text{font-size:.875rem;color:var(--ion-color-dark)}.orgs-empty-card__link{background:none;border:none;padding:0;cursor:pointer;font-size:.8125rem;color:var(--ion-color-primary);text-align:left;text-decoration:underline;text-underline-offset:2px;font-family:inherit}.orgs-list{display:flex;flex-direction:column;gap:8px}.org-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;background:var(--ion-color-light, #f4f5f8);border:1.5px solid transparent;cursor:pointer;transition:background .15s,border-color .15s}.org-card:active{opacity:.75}.org-card--active{border-color:var(--ion-color-primary);background:color-mix(in srgb,var(--ion-color-primary) 8%,transparent)}:host-context(body.dark) .org-card,:host-context(html.ion-palette-dark) .org-card,:host-context([data-theme=\"dark\"]) .org-card{background:#ffffff0d}:host-context(body.dark) .org-card--active,:host-context(html.ion-palette-dark) .org-card--active,:host-context([data-theme=\"dark\"]) .org-card--active{background:color-mix(in srgb,var(--ion-color-primary) 15%,transparent)}.org-card__icon{width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--ion-color-primary) 15%,transparent);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:20px;color:var(--ion-color-primary)}.org-card__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.org-card__name{font-weight:600;font-size:.95rem;color:var(--ion-color-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.org-card__meta{display:flex;flex-direction:column;gap:1px;margin-top:3px}.org-card__meta-item{font-size:.78rem;color:var(--ion-color-dark)}.org-card__meta-label{font-weight:600;color:var(--ion-color-dark);margin-right:4px}.org-card__end{display:flex;align-items:center;gap:8px;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: EmptyStateComponent, selector: "val-empty-state", inputs: ["props"] }, { kind: "component", type: SkeletonLayoutComponent, selector: "val-skeleton-layout", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: CtaCardComponent, selector: "val-cta-card", inputs: ["props"], outputs: ["onAction"] }, { kind: "component", type: InvitationCardComponent, selector: "val-invitation-card", inputs: ["props"], outputs: ["onAccept", "onDecline"] }, { kind: "component", type: CreateOrgModalComponent, selector: "val-create-org-modal", inputs: ["i18nNamespace", "isOpen"], outputs: ["dismissed", "created"] }, { kind: "component", type: DeleteAccountModalComponent, selector: "val-delete-account-modal", inputs: ["i18nNamespace", "isOpen"], outputs: ["dismissed"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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: "pipe", type: TitleCasePipe, name: "titlecase" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AccountViewComponent, decorators: [{
             type: Component,
@@ -48328,6 +48396,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ButtonComponent,
                         CtaCardComponent,
                         InvitationCardComponent,
+                        CreateOrgModalComponent,
+                        DeleteAccountModalComponent,
                         IonIcon,
                         IonButton,
                         TitleCasePipe,
@@ -48501,6 +48571,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           </div>
         </section>
       }
+      <val-create-org-modal
+        [isOpen]="createOrgOpen()"
+        [i18nNamespace]="'CreateOrgModal'"
+        (dismissed)="createOrgOpen.set(false)"
+        (created)="onOrgCreated($event)"
+      />
+      <val-delete-account-modal
+        [isOpen]="deleteAccountOpen()"
+        [i18nNamespace]="'Settings.DeleteAccount'"
+        (dismissed)="deleteAccountOpen.set(false)"
+      />
     </div>
   `, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.page-header{margin-bottom:16px}.settings-section{padding:16px 0}.settings-section+.settings-section{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.settings-section val-title{display:block;margin-bottom:12px}.section-body{display:flex;flex-direction:column;gap:10px}.row-actions{margin-top:12px}.row-actions--gap{display:flex;flex-wrap:wrap;gap:8px}.section-header-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.org-new-cta-card{display:block;margin-top:12px}.orgs-empty-card{background:var(--ion-color-secondary-tint, rgba(var(--ion-color-secondary-rgb, 130, 101, 208), .2));border-radius:18px;padding:18px 16px 12px;display:flex;flex-direction:column;gap:8px}.orgs-empty-card__main{display:flex;align-items:center;gap:10px}.orgs-empty-card__icon{font-size:20px;flex-shrink:0;color:var(--ion-color-dark)}.orgs-empty-card__text{font-size:.875rem;color:var(--ion-color-dark)}.orgs-empty-card__link{background:none;border:none;padding:0;cursor:pointer;font-size:.8125rem;color:var(--ion-color-primary);text-align:left;text-decoration:underline;text-underline-offset:2px;font-family:inherit}.orgs-list{display:flex;flex-direction:column;gap:8px}.org-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;background:var(--ion-color-light, #f4f5f8);border:1.5px solid transparent;cursor:pointer;transition:background .15s,border-color .15s}.org-card:active{opacity:.75}.org-card--active{border-color:var(--ion-color-primary);background:color-mix(in srgb,var(--ion-color-primary) 8%,transparent)}:host-context(body.dark) .org-card,:host-context(html.ion-palette-dark) .org-card,:host-context([data-theme=\"dark\"]) .org-card{background:#ffffff0d}:host-context(body.dark) .org-card--active,:host-context(html.ion-palette-dark) .org-card--active,:host-context([data-theme=\"dark\"]) .org-card--active{background:color-mix(in srgb,var(--ion-color-primary) 15%,transparent)}.org-card__icon{width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--ion-color-primary) 15%,transparent);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:20px;color:var(--ion-color-primary)}.org-card__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.org-card__name{font-weight:600;font-size:.95rem;color:var(--ion-color-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.org-card__meta{display:flex;flex-direction:column;gap:1px;margin-top:3px}.org-card__meta-item{font-size:.78rem;color:var(--ion-color-dark)}.org-card__meta-label{font-weight:600;color:var(--ion-color-dark);margin-right:4px}.org-card__end{display:flex;align-items:center;gap:8px;flex-shrink:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
@@ -50004,188 +50085,880 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }] } });
 
 /**
- * Defaults i18n (es/en) embebidos en `val-transfer-ownership-modal`.
- * Auto-registrados en el constructor del componente si el consumer no proveyó el
- * namespace (`Settings.TransferModal` por default). SOLO incluye las keys que el
- * modal usa.
+ * Defaults i18n (es/en) embebidos en `val-permissions-view`. Auto-registrados en
+ * el constructor del componente si el consumer no proveyó el namespace
+ * (`Settings.Permissions` por default). SOLO incluye las keys que la vista usa.
+ *
+ * Portado EXACTO de `PERMISSIONS_I18N` (showcase) bajo el proceso de ADR-021.
  */
-const TRANSFER_OWNERSHIP_MODAL_I18N = {
+const PERMISSIONS_VIEW_I18N = {
     es: {
-        title: 'Transferir propiedad',
-        hint: 'Selecciona el nuevo propietario de la organización.',
-        searchPlaceholder: 'Buscar miembro...',
-        empty: 'No hay otros miembros disponibles.',
-        noResults: 'Sin resultados para',
-        confirmCta: 'Confirmar transferencia',
-        close: 'Cancelar',
+        pageTitle: 'Permisos',
+        pageDescription: 'Roles y permisos de esta app en la organización activa',
+        systemRolesTitle: 'Roles del sistema',
+        systemRolesHint: 'Predefinidos por la plataforma. No editables.',
+        customRolesTitle: 'Roles personalizados',
+        customRolesHint: 'Definidos por tu organización.',
+        systemBadge: 'Sistema',
+        noCustomRoles: 'Esta organización no tiene roles personalizados.',
+        noPermissions: 'Sin permisos asignados.',
+        // Grupos de alcance
+        groupApp: 'Permisos de la app',
+        groupOrg: 'Permisos de la organización',
+        groupPlatform: 'Permisos de plataforma',
+        groupOther: 'Otras apps',
+        // Roles del sistema
+        roleViewer: 'Visor',
+        roleEditor: 'Editor',
+        roleAdmin: 'Administrador',
+        roleSuperAdmin: 'Super Administrador',
+        roleBingoAdmin: 'Bingo · Administrador',
+        roleBingoTesorero: 'Bingo · Tesorero',
+        roleBingoTaquilla: 'Bingo · Taquilla',
+        roleBingoOperator: 'Bingo · Operador',
+        // Apps
+        app_showcase: 'Showcase',
+        app_bingo: 'Bingo',
+        // Recursos
+        permUsers: 'Usuarios',
+        permRoles: 'Roles',
+        permRbac: 'Control de acceso',
+        permApps: 'Apps',
+        'permApi-keys': 'API keys',
+        'permEmail-logs': 'Logs de correo',
+        'permSms-logs': 'Logs de SMS',
+        permDocuments: 'Documentos',
+        permMedia: 'Media',
+        permTemplates: 'Plantillas',
+        permRequests: 'Solicitudes',
+        permBingo: 'Bingo',
+        // Acciones
+        permRead: 'Leer',
+        permWrite: 'Escribir',
+        permCreate: 'Crear',
+        permDelete: 'Eliminar',
+        permManage: 'Gestionar',
+        permEdit: 'Editar',
+        permSell: 'Vender',
+        permCheckin: 'Canjear',
+        permSettle: 'Rendir',
+        permExport: 'Exportar',
+        permOperate: 'Operar',
+        permAll: 'Todo',
+        // Loading / error
+        errorTitle: 'Error al cargar permisos',
+        retry: 'Reintentar',
     },
     en: {
-        title: 'Transfer ownership',
-        hint: 'Select the new owner of the organization.',
-        searchPlaceholder: 'Search member...',
-        empty: 'No other members available.',
-        noResults: 'No results for',
-        confirmCta: 'Confirm transfer',
-        close: 'Cancel',
+        pageTitle: 'Permissions',
+        pageDescription: 'Roles and permissions of this app in the active organization',
+        systemRolesTitle: 'System roles',
+        systemRolesHint: 'Defined by the platform. Not editable.',
+        customRolesTitle: 'Custom roles',
+        customRolesHint: 'Defined by your organization.',
+        systemBadge: 'System',
+        noCustomRoles: 'This organization has no custom roles.',
+        noPermissions: 'No permissions assigned.',
+        groupApp: 'App permissions',
+        groupOrg: 'Organization permissions',
+        groupPlatform: 'Platform permissions',
+        groupOther: 'Other apps',
+        roleViewer: 'Viewer',
+        roleEditor: 'Editor',
+        roleAdmin: 'Administrator',
+        roleSuperAdmin: 'Super Administrator',
+        roleBingoAdmin: 'Bingo · Administrator',
+        roleBingoTesorero: 'Bingo · Treasurer',
+        roleBingoTaquilla: 'Bingo · Box office',
+        roleBingoOperator: 'Bingo · Operator',
+        app_showcase: 'Showcase',
+        app_bingo: 'Bingo',
+        permUsers: 'Users',
+        permRoles: 'Roles',
+        permRbac: 'Access control',
+        permApps: 'Apps',
+        'permApi-keys': 'API keys',
+        'permEmail-logs': 'Email logs',
+        'permSms-logs': 'SMS logs',
+        permDocuments: 'Documents',
+        permMedia: 'Media',
+        permTemplates: 'Templates',
+        permRequests: 'Requests',
+        permBingo: 'Bingo',
+        permRead: 'Read',
+        permWrite: 'Write',
+        permCreate: 'Create',
+        permDelete: 'Delete',
+        permManage: 'Manage',
+        permEdit: 'Edit',
+        permSell: 'Sell',
+        permCheckin: 'Check-in',
+        permSettle: 'Settle',
+        permExport: 'Export',
+        permOperate: 'Operate',
+        permAll: 'All',
+        errorTitle: 'Error loading permissions',
+        retry: 'Retry',
     },
 };
 
-const DEFAULT_NAMESPACE$9 = 'Settings.TransferModal';
+const DEFAULT_NAMESPACE$9 = 'Settings.Permissions';
 /**
- * `val-transfer-ownership-modal` — selector de miembro para transferir la
- * propiedad de la organización. Promovido desde `showcase` bajo el proceso de
- * ADR-021.
+ * `val-permissions-view` — vista Permisos full-feature autocontenida (organism).
+ * Visor RBAC de solo lectura: muestra los roles del sistema (Visor/Editor/Admin +
+ * roles de plataforma) y los roles personalizados de la org activa, con el
+ * catálogo de permisos agrupado por alcance (app actual / plataforma / otras apps).
+ * Promovida desde `showcase` bajo el proceso de ADR-021.
  *
- * Recibe la lista de candidatos por `members` (todos excepto el owner actual),
- * permite filtrarlos con `val-searchbar` y, al confirmar, ejecuta el callback
- * `onConfirm(newOwnerId)`. La ejecución real de la transferencia (vía
- * `OrgService.transferOwnership`) queda en el consumer.
+ * **RBAC interno** (como `organization-view`): lee la org activa vía
+ * `AuthService.user().activeOrgId`. La vista NO muta nada — el control de quién
+ * puede verla es responsabilidad del guard de ruta del consumer; no hay gating
+ * fino interno ni se expone como config.
  *
- * Abierto vía `ModalService` — recibe `_modalRef` por `componentProps`. Header
- * canónico (Regla #5): sin `ion-title`, botón Cerrar texto en `slot=end`,
- * título/subtítulo en el body con `val-display`/`val-title`.
+ * Datos: `forkJoin` de `OrgService.listOrgRoles(orgId)` (roles de la org) +
+ * `PermissionCatalogService.getCatalog(orgId)` (catálogo + appId actual). El
+ * catálogo define el alcance (`scope`/`appId`) de cada recurso para agrupar.
  *
- * Auto-registra sus defaults i18n (es/en) si el consumer no proveyó el namespace
- * `Settings.TransferModal`.
+ * NO renderiza ion-content — vive dentro de val-page-wrapper. `ActivatedRoute` se
+ * inyecta `{ optional: true }` solo para leer el route data de config. Auto-registra
+ * sus defaults i18n (es/en) si el consumer no proveyó el namespace (default
+ * `Settings.Permissions`).
  */
-class TransferOwnershipModalComponent {
+class PermissionsViewComponent {
+    /** Namespace i18n resuelto (capturado para llamadas no-reactivas). */
+    get ns() {
+        return this.resolvedConfig().i18nNamespace;
+    }
     constructor() {
         this.i18n = inject(I18nService);
-        /** Lista de miembros transferibles (todos excepto el owner actual). */
-        this.members = [];
-        /** Namespace i18n con que la vista resuelve sus textos. */
-        this.i18nNamespace = DEFAULT_NAMESPACE$9;
-        this.query = signal('');
-        this.selectedId = signal('');
-        this.filtered = computed(() => {
-            const q = this.query().trim().toLowerCase();
-            if (!q)
-                return this.members;
-            return this.members.filter(m => m.name?.toLowerCase().includes(q) || m.email?.toLowerCase().includes(q) || m.userId.toLowerCase().includes(q));
+        this.orgService = inject(OrgService);
+        this.catalog = inject(PermissionCatalogService);
+        this.auth = inject(AuthService);
+        this.nav = inject(NavigationService);
+        this.route = inject(ActivatedRoute, { optional: true });
+        /**
+         * Cuando `true`, la vista está embebida en un modal — suprime el back-header
+         * (lo gestiona el modal padre). Default `false` (uso como ruta).
+         */
+        this.isModal = false;
+        this.resolvedConfig = computed(() => {
+            const fromRoute = (this.route?.snapshot.data['permissionsConfig'] ?? {});
+            const merged = { ...fromRoute, ...(this.config ?? {}) };
+            return {
+                showSystemRoles: merged.showSystemRoles ?? true,
+                showCustomRoles: merged.showCustomRoles ?? true,
+                i18nNamespace: merged.i18nNamespace ?? DEFAULT_NAMESPACE$9,
+            };
         });
-        this.noResultsLabel = computed(() => `${this.t('noResults')} "${this.query()}"`);
-        if (!this.i18n.hasNamespace(DEFAULT_NAMESPACE$9)) {
-            this.i18n.registerContent(DEFAULT_NAMESPACE$9, TRANSFER_OWNERSHIP_MODAL_I18N);
+        this.loading = signal(false);
+        this.loadError = signal(null);
+        this.roles = signal([]);
+        this.systemRoles = computed(() => this.roles().filter(r => r.isSystem));
+        this.customRoles = computed(() => this.roles().filter(r => !r.isSystem));
+        this.activeOrgId = computed(() => {
+            const u = this.auth.user();
+            return u?.activeOrgId ?? u?.activeOrg ?? '';
+        });
+        this.retryButtonProps = computed(() => ({
+            text: this.tt('retry'),
+            color: 'dark',
+            fill: 'outline',
+            size: 'default',
+            type: 'button',
+            state: this.loading() ? ComponentStates.DISABLED : ComponentStates.ENABLED,
+        }));
+        const ns = this.ns;
+        if (!this.i18n.hasNamespace(ns)) {
+            this.i18n.registerContent(ns, PERMISSIONS_VIEW_I18N);
         }
+        this.load();
+        connectPageRefresh(() => this.load());
     }
     ngOnInit() {
-        if (!this.i18n.hasNamespace(this.i18nNamespace)) {
-            this.i18n.registerContent(this.i18nNamespace, TRANSFER_OWNERSHIP_MODAL_I18N);
+        if (!this.isModal) {
+            this.nav.setBackHeader('pageTitle', this.ns, { withMenu: true });
         }
     }
-    confirm() {
-        const id = this.selectedId();
-        if (!id)
+    load() {
+        const orgId = this.activeOrgId();
+        if (!orgId)
             return;
-        this.onConfirm?.(id);
-        this.dismiss();
+        this.loading.set(true);
+        this.loadError.set(null);
+        forkJoin({
+            roles: this.orgService.listOrgRoles(orgId),
+            catalog: this.catalog.getCatalog(orgId),
+        }).subscribe({
+            next: ({ roles: rawRoles, catalog }) => {
+                const byResource = new Map();
+                for (const r of catalog.permissions)
+                    byResource.set(r.resource, r);
+                const currentAppId = catalog.appId;
+                // Labeler con la SSOT del backend (labels del catálogo) — reemplaza el
+                // mapa hardcodeado `perm*`. Locale del momento de carga (igual que antes:
+                // los labels se hornean en el RoleView; cambio de idioma requiere reload).
+                const labeler = createPermissionLabeler(catalog, this.i18n.lang(), {
+                    allLabel: this.tt('permAll'),
+                });
+                this.roles.set((rawRoles ?? []).map((r) => this.buildRoleView({
+                    id: r.id,
+                    name: r.name,
+                    description: r.description,
+                    permissions: r.permissions ?? [],
+                    isSystem: r.isSystem ?? false,
+                }, byResource, currentAppId, labeler)));
+                this.loading.set(false);
+            },
+            error: err => {
+                this.loadError.set(err);
+                this.loading.set(false);
+            },
+        });
     }
-    dismiss() {
-        this._modalRef?.dismiss(null, 'cancel');
+    buildRoleView(role, byResource, currentAppId, labeler) {
+        const appPerms = [];
+        const orgPerms = [];
+        const otherByApp = new Map();
+        for (const perm of role.permissions) {
+            const [resource] = perm.split(':');
+            const entry = byResource.get(resource);
+            // Sin entrada en el catálogo (el backend omite los recursos internal para
+            // no-platform-admins) o entrada internal → NUNCA se muestra a nivel de
+            // producto. Defensa en profundidad junto al filtro del backend (ADR-024).
+            // Nota: el rol puede traer el permiso aunque el recurso esté filtrado del
+            // catálogo (ej. admin tiene templates:*); por eso se descarta lo no resuelto.
+            if (!entry || entry.scope === 'internal') {
+                continue;
+            }
+            const label = labeler(perm);
+            if (entry.scope === 'app') {
+                if (entry.appId === currentAppId) {
+                    appPerms.push(label);
+                }
+                else {
+                    const appId = entry.appId ?? '?';
+                    const arr = otherByApp.get(appId) ?? [];
+                    arr.push(label);
+                    otherByApp.set(appId, arr);
+                }
+            }
+            else {
+                // scope === 'org' → gestión de la organización del cliente
+                orgPerms.push(label);
+            }
+        }
+        const groups = [];
+        if (appPerms.length) {
+            groups.push({ key: 'app', label: this.tt('groupApp'), perms: appPerms });
+        }
+        if (orgPerms.length) {
+            groups.push({
+                key: 'org',
+                label: this.tt('groupOrg'),
+                perms: orgPerms,
+            });
+        }
+        for (const [appId, perms] of otherByApp) {
+            groups.push({
+                key: `other:${appId}`,
+                label: `${this.tt('groupOther')}: ${this.appLabel(appId)}`,
+                perms,
+            });
+        }
+        return {
+            id: role.id,
+            name: role.name,
+            description: role.description,
+            isSystem: role.isSystem,
+            groups,
+            hasPerms: groups.length > 0,
+        };
     }
-    t(key) {
-        return this.i18n.t(key, this.i18nNamespace);
+    tt(key) {
+        return this.i18n.t(key, this.ns);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TransferOwnershipModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TransferOwnershipModalComponent, isStandalone: true, selector: "val-transfer-ownership-modal", inputs: { members: "members", onConfirm: "onConfirm", _modalRef: "_modalRef", i18nNamespace: "i18nNamespace" }, ngImport: i0, template: `
-    <ion-header>
-      <ion-toolbar>
-        <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
-            <strong>{{ t('close') }}</strong>
-          </ion-button>
-        </ion-buttons>
-      </ion-toolbar>
-    </ion-header>
-
-    <ion-content class="ion-padding">
-      <val-display [props]="{ content: t('title'), size: 'small', color: 'dark' }" />
-      <val-title
-        [props]="{
-          content: t('hint'),
-          size: 'large',
-          color: '',
-          bold: false,
-        }"
-      />
-
-      <val-searchbar
-        [props]="{ placeholder: t('searchPlaceholder'), debounce: 150 }"
-        (filterEvent)="query.set($event)"
-      />
-
-      @if (members.length === 0) {
-        <val-text
-          [props]="{
-            content: t('empty'),
-            size: 'medium',
-            color: 'medium',
-            bold: false,
-          }"
-        />
-      } @else if (filtered().length === 0) {
-        <val-text
+    appLabel(appId) {
+        const key = `app_${appId}`;
+        const label = this.tt(key);
+        return label === key ? appId : label;
+    }
+    roleLabel(name) {
+        const map = {
+            viewer: 'roleViewer',
+            editor: 'roleEditor',
+            admin: 'roleAdmin',
+            super_admin: 'roleSuperAdmin',
+            bingo_admin: 'roleBingoAdmin',
+            bingo_tesorero: 'roleBingoTesorero',
+            bingo_taquilla: 'roleBingoTaquilla',
+            bingo_operator: 'roleBingoOperator',
+        };
+        return this.tt(map[name] ?? name);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PermissionsViewComponent, isStandalone: true, selector: "val-permissions-view", inputs: { config: "config", isModal: "isModal" }, ngImport: i0, template: `
+    <div class="page">
+      <header class="page-header">
+        <val-display [props]="{ size: 'small', color: 'dark', content: tt('pageTitle') }" />
+        <val-title
           [props]="{
-            content: noResultsLabel(),
-            size: 'medium',
-            color: 'medium',
+            size: 'large',
+            color: 'dark',
             bold: false,
+            content: tt('pageDescription'),
           }"
         />
+      </header>
+
+      @if (loading()) {
+        <div class="spinner-row">
+          <ion-spinner name="crescent" />
+        </div>
+      } @else if (loadError()) {
+        <div class="error-row">
+          <val-text
+            [props]="{
+              content: tt('errorTitle'),
+              size: 'medium',
+              color: 'medium',
+              bold: false,
+            }"
+          />
+          <val-button [props]="retryButtonProps()" (click)="load()" />
+        </div>
       } @else {
-        <div class="transfer-member-list">
-          @for (m of filtered(); track m.userId) {
-            <button
-              class="transfer-member-row"
-              [class.transfer-member-row--selected]="selectedId() === m.userId"
-              (click)="selectedId.set(m.userId)"
-              type="button"
-            >
-              <span class="transfer-member-name">{{ m.name || m.email || m.userId }}</span>
-              @if (selectedId() === m.userId) {
-                <span class="transfer-member-check">&#10003;</span>
+        @if (resolvedConfig().showSystemRoles) {
+          <section class="perm-section">
+            <div class="perm-section__header">
+              <val-title
+                [props]="{
+                  size: 'medium',
+                  color: 'dark',
+                  bold: true,
+                  content: tt('systemRolesTitle'),
+                }"
+              />
+              <val-text
+                [props]="{
+                  content: tt('systemRolesHint'),
+                  size: 'medium',
+                  color: 'medium',
+                  bold: false,
+                }"
+              />
+            </div>
+            <div class="role-list">
+              @for (role of systemRoles(); track role.id) {
+                <div class="role-card">
+                  <div class="role-card__header">
+                    <span class="role-card__name">{{ roleLabel(role.name) }}</span>
+                    <val-pill
+                      [props]="{
+                        label: tt('systemBadge'),
+                        color: 'primary',
+                        weight: 'bold',
+                      }"
+                    />
+                  </div>
+                  @if (role.description) {
+                    <span class="role-card__desc">{{ role.description }}</span>
+                  }
+                  @if (!role.hasPerms) {
+                    <div class="perm-chips">
+                      <span class="perm-chip perm-chip--empty">{{ tt('noPermissions') }}</span>
+                    </div>
+                  } @else {
+                    @for (g of role.groups; track g.key) {
+                      <div class="perm-group">
+                        <span class="perm-group__label">{{ g.label }}</span>
+                        <div class="perm-chips">
+                          @for (p of g.perms; track p) {
+                            <span class="perm-chip">{{ p }}</span>
+                          }
+                        </div>
+                      </div>
+                    }
+                  }
+                </div>
               }
-            </button>
-          }
-        </div>
-      }
-
-      <div class="transfer-confirm-row">
-        <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" shape="round" (click)="dismiss()">
-          {{ t('close') }}
-        </ion-button>
-      </div>
-    </ion-content>
-  `, isInline: true, styles: ["val-display{display:block;margin-bottom:4px}val-title{display:block;margin-bottom:16px}val-searchbar{display:block;margin-bottom:12px}.transfer-member-list{display:flex;flex-direction:column;gap:4px}.transfer-member-row{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-radius:10px;border:1.5px solid var(--ion-color-light);background:transparent;cursor:pointer;width:100%;text-align:left;font-size:15px;color:var(--ion-color-dark);transition:border-color .15s}.transfer-member-row--selected{border-color:var(--ion-color-dark);background:var(--ion-color-light)}.transfer-member-check{font-size:17px;color:var(--ion-color-dark)}.transfer-confirm-row{margin-top:24px}.modal-close-bottom{margin-top:12px}\n"], dependencies: [{ kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: SearchbarComponent, selector: "val-searchbar", inputs: ["preset", "props"], outputs: ["filterEvent", "focusEvent", "blurEvent"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TransferOwnershipModalComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-transfer-ownership-modal', standalone: true, imports: [
-                        IonHeader,
-                        IonToolbar,
-                        IonButtons,
-                        IonButton,
-                        IonContent,
-                        SearchbarComponent,
-                        DisplayComponent,
-                        TextComponent,
-                        TitleComponent,
-                    ], template: `
-    <ion-header>
-      <ion-toolbar>
-        <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
-            <strong>{{ t('close') }}</strong>
-          </ion-button>
-        </ion-buttons>
-      </ion-toolbar>
-    </ion-header>
+            </div>
+          </section>
+        }
+
+        @if (resolvedConfig().showCustomRoles) {
+          <section class="perm-section">
+            <div class="perm-section__header">
+              <val-title
+                [props]="{
+                  size: 'medium',
+                  color: 'dark',
+                  bold: true,
+                  content: tt('customRolesTitle'),
+                }"
+              />
+              <val-text
+                [props]="{
+                  content: tt('customRolesHint'),
+                  size: 'medium',
+                  color: 'medium',
+                  bold: false,
+                }"
+              />
+            </div>
+            @if (customRoles().length === 0) {
+              <val-text
+                [props]="{
+                  content: tt('noCustomRoles'),
+                  size: 'medium',
+                  color: 'medium',
+                  bold: false,
+                }"
+              />
+            } @else {
+              <div class="role-list">
+                @for (role of customRoles(); track role.id) {
+                  <div class="role-card">
+                    <div class="role-card__header">
+                      <span class="role-card__name">{{ role.name }}</span>
+                    </div>
+                    @if (role.description) {
+                      <span class="role-card__desc">{{ role.description }}</span>
+                    }
+                    @if (!role.hasPerms) {
+                      <div class="perm-chips">
+                        <span class="perm-chip perm-chip--empty">{{ tt('noPermissions') }}</span>
+                      </div>
+                    } @else {
+                      @for (g of role.groups; track g.key) {
+                        <div class="perm-group">
+                          <span class="perm-group__label">{{ g.label }}</span>
+                          <div class="perm-chips">
+                            @for (p of g.perms; track p) {
+                              <span class="perm-chip">{{ p }}</span>
+                            }
+                          </div>
+                        </div>
+                      }
+                    }
+                  </div>
+                }
+              </div>
+            }
+          </section>
+        }
+      }
+    </div>
+  `, isInline: true, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.page-header{margin-bottom:24px}.spinner-row,.error-row{display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px 0}.perm-section{margin-bottom:32px}.perm-section__header{margin-bottom:12px}.role-list{display:flex;flex-direction:column;gap:10px}.role-card{border:1.5px solid var(--ion-color-light);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}.role-card__header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.role-card__name{font-size:.9375rem;font-weight:600;color:var(--ion-color-dark)}.role-card__desc{font-size:.8125rem;color:var(--ion-color-medium);line-height:1.4}.perm-group{display:flex;flex-direction:column;gap:6px}.perm-group__label{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ion-color-medium)}.perm-chips{display:flex;flex-wrap:wrap;gap:6px}.perm-chip{font-size:.75rem;padding:3px 10px;border-radius:20px;background:var(--ion-color-light);color:var(--ion-color-dark)}.perm-chip--empty{color:var(--ion-color-medium);background:transparent;padding-left:0}\n"], dependencies: [{ kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: PillComponent, selector: "val-pill", inputs: ["preset", "props"], outputs: ["pillClick", "pillAction"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionsViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-permissions-view', standalone: true, imports: [IonSpinner, DisplayComponent, PillComponent, TitleComponent, TextComponent, ButtonComponent], template: `
+    <div class="page">
+      <header class="page-header">
+        <val-display [props]="{ size: 'small', color: 'dark', content: tt('pageTitle') }" />
+        <val-title
+          [props]="{
+            size: 'large',
+            color: 'dark',
+            bold: false,
+            content: tt('pageDescription'),
+          }"
+        />
+      </header>
+
+      @if (loading()) {
+        <div class="spinner-row">
+          <ion-spinner name="crescent" />
+        </div>
+      } @else if (loadError()) {
+        <div class="error-row">
+          <val-text
+            [props]="{
+              content: tt('errorTitle'),
+              size: 'medium',
+              color: 'medium',
+              bold: false,
+            }"
+          />
+          <val-button [props]="retryButtonProps()" (click)="load()" />
+        </div>
+      } @else {
+        @if (resolvedConfig().showSystemRoles) {
+          <section class="perm-section">
+            <div class="perm-section__header">
+              <val-title
+                [props]="{
+                  size: 'medium',
+                  color: 'dark',
+                  bold: true,
+                  content: tt('systemRolesTitle'),
+                }"
+              />
+              <val-text
+                [props]="{
+                  content: tt('systemRolesHint'),
+                  size: 'medium',
+                  color: 'medium',
+                  bold: false,
+                }"
+              />
+            </div>
+            <div class="role-list">
+              @for (role of systemRoles(); track role.id) {
+                <div class="role-card">
+                  <div class="role-card__header">
+                    <span class="role-card__name">{{ roleLabel(role.name) }}</span>
+                    <val-pill
+                      [props]="{
+                        label: tt('systemBadge'),
+                        color: 'primary',
+                        weight: 'bold',
+                      }"
+                    />
+                  </div>
+                  @if (role.description) {
+                    <span class="role-card__desc">{{ role.description }}</span>
+                  }
+                  @if (!role.hasPerms) {
+                    <div class="perm-chips">
+                      <span class="perm-chip perm-chip--empty">{{ tt('noPermissions') }}</span>
+                    </div>
+                  } @else {
+                    @for (g of role.groups; track g.key) {
+                      <div class="perm-group">
+                        <span class="perm-group__label">{{ g.label }}</span>
+                        <div class="perm-chips">
+                          @for (p of g.perms; track p) {
+                            <span class="perm-chip">{{ p }}</span>
+                          }
+                        </div>
+                      </div>
+                    }
+                  }
+                </div>
+              }
+            </div>
+          </section>
+        }
+
+        @if (resolvedConfig().showCustomRoles) {
+          <section class="perm-section">
+            <div class="perm-section__header">
+              <val-title
+                [props]="{
+                  size: 'medium',
+                  color: 'dark',
+                  bold: true,
+                  content: tt('customRolesTitle'),
+                }"
+              />
+              <val-text
+                [props]="{
+                  content: tt('customRolesHint'),
+                  size: 'medium',
+                  color: 'medium',
+                  bold: false,
+                }"
+              />
+            </div>
+            @if (customRoles().length === 0) {
+              <val-text
+                [props]="{
+                  content: tt('noCustomRoles'),
+                  size: 'medium',
+                  color: 'medium',
+                  bold: false,
+                }"
+              />
+            } @else {
+              <div class="role-list">
+                @for (role of customRoles(); track role.id) {
+                  <div class="role-card">
+                    <div class="role-card__header">
+                      <span class="role-card__name">{{ role.name }}</span>
+                    </div>
+                    @if (role.description) {
+                      <span class="role-card__desc">{{ role.description }}</span>
+                    }
+                    @if (!role.hasPerms) {
+                      <div class="perm-chips">
+                        <span class="perm-chip perm-chip--empty">{{ tt('noPermissions') }}</span>
+                      </div>
+                    } @else {
+                      @for (g of role.groups; track g.key) {
+                        <div class="perm-group">
+                          <span class="perm-group__label">{{ g.label }}</span>
+                          <div class="perm-chips">
+                            @for (p of g.perms; track p) {
+                              <span class="perm-chip">{{ p }}</span>
+                            }
+                          </div>
+                        </div>
+                      }
+                    }
+                  </div>
+                }
+              </div>
+            }
+          </section>
+        }
+      }
+    </div>
+  `, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.page-header{margin-bottom:24px}.spinner-row,.error-row{display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px 0}.perm-section{margin-bottom:32px}.perm-section__header{margin-bottom:12px}.role-list{display:flex;flex-direction:column;gap:10px}.role-card{border:1.5px solid var(--ion-color-light);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}.role-card__header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.role-card__name{font-size:.9375rem;font-weight:600;color:var(--ion-color-dark)}.role-card__desc{font-size:.8125rem;color:var(--ion-color-medium);line-height:1.4}.perm-group{display:flex;flex-direction:column;gap:6px}.perm-group__label{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ion-color-medium)}.perm-chips{display:flex;flex-wrap:wrap;gap:6px}.perm-chip{font-size:.75rem;padding:3px 10px;border-radius:20px;background:var(--ion-color-light);color:var(--ion-color-dark)}.perm-chip--empty{color:var(--ion-color-medium);background:transparent;padding-left:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { config: [{
+                type: Input
+            }], isModal: [{
+                type: Input
+            }] } });
+
+class PermissionsModalComponent {
+    constructor() {
+        this.i18n = inject(I18nService);
+        this.isOpen = false;
+        this.dismissed = new EventEmitter();
+    }
+    close() {
+        this.dismissed.emit();
+    }
+    t(key) {
+        return this.i18n.t(key, '_global');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PermissionsModalComponent, isStandalone: true, selector: "val-permissions-modal", inputs: { isOpen: "isOpen", config: "config" }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: `
+    <ion-modal [isOpen]="isOpen" (didDismiss)="close()" cssClass="val-modal-adaptive">
+      <ng-template>
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="end">
+              <ion-button fill="clear" color="dark" shape="round" (click)="close()">
+                <strong>{{ t('close') }}</strong>
+              </ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <val-permissions-view [config]="config" [isModal]="true" />
+        </ion-content>
+      </ng-template>
+    </ion-modal>
+  `, isInline: true, dependencies: [{ kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: PermissionsViewComponent, selector: "val-permissions-view", inputs: ["config", "isModal"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionsModalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'val-permissions-modal',
+                    standalone: true,
+                    imports: [IonModal, IonHeader, IonToolbar, IonButtons, IonButton, IonContent, PermissionsViewComponent],
+                    template: `
+    <ion-modal [isOpen]="isOpen" (didDismiss)="close()" cssClass="val-modal-adaptive">
+      <ng-template>
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="end">
+              <ion-button fill="clear" color="dark" shape="round" (click)="close()">
+                <strong>{{ t('close') }}</strong>
+              </ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <val-permissions-view [config]="config" [isModal]="true" />
+        </ion-content>
+      </ng-template>
+    </ion-modal>
+  `,
+                }]
+        }], propDecorators: { isOpen: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], dismissed: [{
+                type: Output
+            }] } });
+
+/**
+ * Defaults i18n (es/en) embebidos en `val-transfer-ownership-modal`.
+ * Auto-registrados en el constructor del componente si el consumer no proveyó el
+ * namespace (`Settings.TransferModal` por default). SOLO incluye las keys que el
+ * modal usa.
+ */
+const TRANSFER_OWNERSHIP_MODAL_I18N = {
+    es: {
+        title: 'Transferir propiedad',
+        hint: 'Selecciona el nuevo propietario de la organización.',
+        searchPlaceholder: 'Buscar miembro...',
+        empty: 'No hay otros miembros disponibles.',
+        noResults: 'Sin resultados para',
+        confirmCta: 'Confirmar transferencia',
+        close: 'Cancelar',
+    },
+    en: {
+        title: 'Transfer ownership',
+        hint: 'Select the new owner of the organization.',
+        searchPlaceholder: 'Search member...',
+        empty: 'No other members available.',
+        noResults: 'No results for',
+        confirmCta: 'Confirm transfer',
+        close: 'Cancel',
+    },
+};
+
+const DEFAULT_NAMESPACE$8 = 'Settings.TransferModal';
+/**
+ * `val-transfer-ownership-modal` — selector de miembro para transferir la
+ * propiedad de la organización. Promovido desde `showcase` bajo el proceso de
+ * ADR-021.
+ *
+ * Recibe la lista de candidatos por `members` (todos excepto el owner actual),
+ * permite filtrarlos con `val-searchbar` y, al confirmar, ejecuta el callback
+ * `onConfirm(newOwnerId)`. La ejecución real de la transferencia (vía
+ * `OrgService.transferOwnership`) queda en el consumer.
+ *
+ * Abierto vía `ModalService` — recibe `_modalRef` por `componentProps`. Header
+ * canónico (Regla #5): sin `ion-title`, botón Cerrar texto en `slot=end`,
+ * título/subtítulo en el body con `val-display`/`val-title`.
+ *
+ * Auto-registra sus defaults i18n (es/en) si el consumer no proveyó el namespace
+ * `Settings.TransferModal`.
+ */
+class TransferOwnershipModalComponent {
+    constructor() {
+        this.i18n = inject(I18nService);
+        /** Lista de miembros transferibles (todos excepto el owner actual). */
+        this.members = [];
+        /** Namespace i18n con que la vista resuelve sus textos. */
+        this.i18nNamespace = DEFAULT_NAMESPACE$8;
+        this.query = signal('');
+        this.selectedId = signal('');
+        this.filtered = computed(() => {
+            const q = this.query().trim().toLowerCase();
+            if (!q)
+                return this.members;
+            return this.members.filter(m => m.name?.toLowerCase().includes(q) || m.email?.toLowerCase().includes(q) || m.userId.toLowerCase().includes(q));
+        });
+        this.noResultsLabel = computed(() => `${this.t('noResults')} "${this.query()}"`);
+        if (!this.i18n.hasNamespace(DEFAULT_NAMESPACE$8)) {
+            this.i18n.registerContent(DEFAULT_NAMESPACE$8, TRANSFER_OWNERSHIP_MODAL_I18N);
+        }
+    }
+    ngOnInit() {
+        if (!this.i18n.hasNamespace(this.i18nNamespace)) {
+            this.i18n.registerContent(this.i18nNamespace, TRANSFER_OWNERSHIP_MODAL_I18N);
+        }
+    }
+    confirm() {
+        const id = this.selectedId();
+        if (!id)
+            return;
+        this.onConfirm?.(id);
+        this.dismiss();
+    }
+    dismiss() {
+        this._modalRef?.dismiss(null, 'cancel');
+    }
+    t(key) {
+        return this.i18n.t(key, this.i18nNamespace);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TransferOwnershipModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TransferOwnershipModalComponent, isStandalone: true, selector: "val-transfer-ownership-modal", inputs: { members: "members", onConfirm: "onConfirm", _modalRef: "_modalRef", i18nNamespace: "i18nNamespace" }, ngImport: i0, template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="end">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
+            <strong>{{ t('close') }}</strong>
+          </ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content class="ion-padding">
+      <val-display [props]="{ content: t('title'), size: 'small', color: 'dark' }" />
+      <val-title
+        [props]="{
+          content: t('hint'),
+          size: 'large',
+          color: '',
+          bold: false,
+        }"
+      />
+
+      <val-searchbar
+        [props]="{ placeholder: t('searchPlaceholder'), debounce: 150 }"
+        (filterEvent)="query.set($event)"
+      />
+
+      @if (members.length === 0) {
+        <val-text
+          [props]="{
+            content: t('empty'),
+            size: 'medium',
+            color: 'medium',
+            bold: false,
+          }"
+        />
+      } @else if (filtered().length === 0) {
+        <val-text
+          [props]="{
+            content: noResultsLabel(),
+            size: 'medium',
+            color: 'medium',
+            bold: false,
+          }"
+        />
+      } @else {
+        <div class="transfer-member-list">
+          @for (m of filtered(); track m.userId) {
+            <button
+              class="transfer-member-row"
+              [class.transfer-member-row--selected]="selectedId() === m.userId"
+              (click)="selectedId.set(m.userId)"
+              type="button"
+            >
+              <span class="transfer-member-name">{{ m.name || m.email || m.userId }}</span>
+              @if (selectedId() === m.userId) {
+                <span class="transfer-member-check">&#10003;</span>
+              }
+            </button>
+          }
+        </div>
+      }
+
+      <div class="transfer-confirm-row">
+        <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" shape="round" (click)="dismiss()">
+          {{ t('close') }}
+        </ion-button>
+      </div>
+    </ion-content>
+  `, isInline: true, styles: ["val-display{display:block;margin-bottom:4px}val-title{display:block;margin-bottom:16px}val-searchbar{display:block;margin-bottom:12px}.transfer-member-list{display:flex;flex-direction:column;gap:4px}.transfer-member-row{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-radius:10px;border:1.5px solid var(--ion-color-light);background:transparent;cursor:pointer;width:100%;text-align:left;font-size:15px;color:var(--ion-color-dark);transition:border-color .15s}.transfer-member-row--selected{border-color:var(--ion-color-dark);background:var(--ion-color-light)}.transfer-member-check{font-size:17px;color:var(--ion-color-dark)}.transfer-confirm-row{margin-top:24px}.modal-close-bottom{margin-top:12px}\n"], dependencies: [{ kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: SearchbarComponent, selector: "val-searchbar", inputs: ["preset", "props"], outputs: ["filterEvent", "focusEvent", "blurEvent"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TransferOwnershipModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-transfer-ownership-modal', standalone: true, imports: [
+                        IonHeader,
+                        IonToolbar,
+                        IonButtons,
+                        IonButton,
+                        IonContent,
+                        SearchbarComponent,
+                        DisplayComponent,
+                        TextComponent,
+                        TitleComponent,
+                    ], template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="end">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
+            <strong>{{ t('close') }}</strong>
+          </ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
 
     <ion-content class="ion-padding">
       <val-display [props]="{ content: t('title'), size: 'small', color: 'dark' }" />
@@ -50341,7 +51114,7 @@ const MEMBER_IMPORT_MODAL_I18N = {
     },
 };
 
-const DEFAULT_NAMESPACE$8 = 'Settings.ImportModal';
+const DEFAULT_NAMESPACE$7 = 'Settings.ImportModal';
 addIcons({ cloudUploadOutline, documentTextOutline });
 /**
  * `val-member-import-modal` — panel de carga masiva de miembros (ADR-023 fase 6).
@@ -50361,7 +51134,7 @@ class MemberImportModalComponent {
         /** Nombres de roles disponibles (para el hint). Opcional. */
         this.availableRoles = [];
         /** Namespace i18n. */
-        this.i18nNamespace = DEFAULT_NAMESPACE$8;
+        this.i18nNamespace = DEFAULT_NAMESPACE$7;
         this.csv = '';
         this.importMode = signal('file');
         this.onConflictControl = new FormControl('assignRole');
@@ -50403,8 +51176,8 @@ class MemberImportModalComponent {
                 return this.t('summary');
             return `${this.t('summary')}: ${s.created} ${this.t('created')} · ${s.assigned} ${this.t('assigned')} · ${s.skipped} ${this.t('skipped')} · ${s.failed} ${this.t('failed')}`;
         });
-        if (!this.i18n.hasNamespace(DEFAULT_NAMESPACE$8)) {
-            this.i18n.registerContent(DEFAULT_NAMESPACE$8, MEMBER_IMPORT_MODAL_I18N);
+        if (!this.i18n.hasNamespace(DEFAULT_NAMESPACE$7)) {
+            this.i18n.registerContent(DEFAULT_NAMESPACE$7, MEMBER_IMPORT_MODAL_I18N);
         }
     }
     ngOnInit() {
@@ -50996,7 +51769,7 @@ const ORGANIZATION_VIEW_I18N = {
     },
 };
 
-const DEFAULT_NAMESPACE$7 = 'Settings.Organization';
+const DEFAULT_NAMESPACE$6 = 'Settings.Organization';
 const DEFAULT_VIEW_PERMISSIONS_ROUTE = '/app/settings/permissions';
 const DEFAULT_API_KEYS_ROUTE = '/app/settings/api-keys';
 const DEFAULT_LEAVE_REDIRECT_ROUTE = '/app/settings/account';
@@ -51054,7 +51827,7 @@ class OrganizationViewComponent {
                 showInvite: merged.showInvite ?? true,
                 showTransferOwnership: merged.showTransferOwnership ?? true,
                 showLeave: merged.showLeave ?? true,
-                i18nNamespace: merged.i18nNamespace ?? DEFAULT_NAMESPACE$7,
+                i18nNamespace: merged.i18nNamespace ?? DEFAULT_NAMESPACE$6,
                 viewPermissionsRoute: merged.viewPermissionsRoute ?? DEFAULT_VIEW_PERMISSIONS_ROUTE,
                 apiKeysRoute: merged.apiKeysRoute ?? DEFAULT_API_KEYS_ROUTE,
                 leaveRedirectRoute: merged.leaveRedirectRoute ?? DEFAULT_LEAVE_REDIRECT_ROUTE,
@@ -51067,6 +51840,7 @@ class OrganizationViewComponent {
         this.org = signal(null);
         this.loading = signal(false);
         this.leaving = signal(false);
+        this.permissionsOpen = signal(false);
         this.orgLoadError = signal(null);
         this.orgErrorState = computed(() => {
             this.i18n.lang();
@@ -51365,7 +52139,7 @@ class OrganizationViewComponent {
         });
     }
     onViewPermissions() {
-        this.nav.navigateByUrl(this.resolvedConfig().viewPermissionsRoute);
+        this.permissionsOpen.set(true);
     }
     onOpenTransfer() {
         void this.modalService.openAdaptive({
@@ -51838,8 +52612,13 @@ class OrganizationViewComponent {
           </div>
         </section>
       }
+      <val-permissions-modal
+        [isOpen]="permissionsOpen()"
+        [config]="{ i18nNamespace: resolvedConfig().i18nNamespace }"
+        (dismissed)="permissionsOpen.set(false)"
+      />
     </div>
-  `, isInline: true, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.org-more-info-link{background:none;border:none;padding:4px 0;margin-top:4px;font-size:13px;font-weight:600;color:var(--ion-color-primary, #7026df);cursor:pointer;text-align:left}.page-header{margin-bottom:16px}.settings-section{padding:16px 0}.settings-section+.settings-section{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.section-header-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.section-body{display:flex;flex-direction:column;gap:10px}.row-actions{margin-top:12px}.row-actions--gap{display:flex;gap:8px}.invite-cta{display:flex;flex-direction:column;gap:16px}.invite-cta__text{display:flex;flex-direction:column;gap:4px}.invite-cta__actions{display:flex;gap:12px;flex-wrap:wrap}.org-info-card{border-radius:14px;background:var(--ion-color-light, #f4f5f8);overflow:hidden}:host-context(body.dark) .org-info-card,:host-context(html.ion-palette-dark) .org-info-card,:host-context([data-theme=\"dark\"]) .org-info-card{background:#ffffff0d}.org-info-field{padding:12px 16px;display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--val-border-color, rgba(0, 0, 0, .06))}.org-info-field:last-child{border-bottom:none}.org-info-label{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ion-color-medium)}.org-info-value{font-size:.95rem;font-weight:500;color:var(--ion-color-dark)}.org-info-value--muted{color:var(--ion-color-medium);font-weight:400}.plan-badge{display:inline-block;font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:20px;width:fit-content}.plan-badge--free{background:var(--ion-color-light-shade, #d7d8da);color:var(--ion-color-dark)}.plan-badge--pro{background:var(--ion-color-primary);color:#fff}.plan-badge--enterprise{background:#f5c542;color:#222}.members-list{display:flex;flex-direction:column;gap:8px}.members-show-more{background:none;border:none;color:var(--ion-color-primary);font-size:14px;font-weight:500;cursor:pointer;padding:8px 0}.rbac-debug{opacity:.7}.rbac-debug__body{display:flex;flex-direction:column;gap:6px;font-family:monospace;font-size:.78rem}.rbac-debug__row{display:flex;gap:8px;align-items:flex-start}.rbac-debug__label{color:var(--ion-color-medium);min-width:72px;flex-shrink:0}.rbac-debug__value{color:var(--ion-color-dark);word-break:break-all}.rbac-debug__value--perms{color:var(--ion-color-medium)}\n"], dependencies: [{ kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: EmptyStateComponent, selector: "val-empty-state", inputs: ["props"] }, { kind: "directive", type: HasPermissionDirective, selector: "[valHasPermission]", inputs: ["valHasPermission"] }, { kind: "component", type: SkeletonLayoutComponent, selector: "val-skeleton-layout", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: MemberCardComponent, selector: "val-member-card", inputs: ["props"], outputs: ["onAction"] }] }); }
+  `, isInline: true, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.org-more-info-link{background:none;border:none;padding:4px 0;margin-top:4px;font-size:13px;font-weight:600;color:var(--ion-color-primary, #7026df);cursor:pointer;text-align:left}.page-header{margin-bottom:16px}.settings-section{padding:16px 0}.settings-section+.settings-section{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.section-header-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.section-body{display:flex;flex-direction:column;gap:10px}.row-actions{margin-top:12px}.row-actions--gap{display:flex;gap:8px}.invite-cta{display:flex;flex-direction:column;gap:16px}.invite-cta__text{display:flex;flex-direction:column;gap:4px}.invite-cta__actions{display:flex;gap:12px;flex-wrap:wrap}.org-info-card{border-radius:14px;background:var(--ion-color-light, #f4f5f8);overflow:hidden}:host-context(body.dark) .org-info-card,:host-context(html.ion-palette-dark) .org-info-card,:host-context([data-theme=\"dark\"]) .org-info-card{background:#ffffff0d}.org-info-field{padding:12px 16px;display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--val-border-color, rgba(0, 0, 0, .06))}.org-info-field:last-child{border-bottom:none}.org-info-label{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ion-color-medium)}.org-info-value{font-size:.95rem;font-weight:500;color:var(--ion-color-dark)}.org-info-value--muted{color:var(--ion-color-medium);font-weight:400}.plan-badge{display:inline-block;font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:20px;width:fit-content}.plan-badge--free{background:var(--ion-color-light-shade, #d7d8da);color:var(--ion-color-dark)}.plan-badge--pro{background:var(--ion-color-primary);color:#fff}.plan-badge--enterprise{background:#f5c542;color:#222}.members-list{display:flex;flex-direction:column;gap:8px}.members-show-more{background:none;border:none;color:var(--ion-color-primary);font-size:14px;font-weight:500;cursor:pointer;padding:8px 0}.rbac-debug{opacity:.7}.rbac-debug__body{display:flex;flex-direction:column;gap:6px;font-family:monospace;font-size:.78rem}.rbac-debug__row{display:flex;gap:8px;align-items:flex-start}.rbac-debug__label{color:var(--ion-color-medium);min-width:72px;flex-shrink:0}.rbac-debug__value{color:var(--ion-color-dark);word-break:break-all}.rbac-debug__value--perms{color:var(--ion-color-medium)}\n"], dependencies: [{ kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: EmptyStateComponent, selector: "val-empty-state", inputs: ["props"] }, { kind: "directive", type: HasPermissionDirective, selector: "[valHasPermission]", inputs: ["valHasPermission"] }, { kind: "component", type: SkeletonLayoutComponent, selector: "val-skeleton-layout", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: MemberCardComponent, selector: "val-member-card", inputs: ["props"], outputs: ["onAction"] }, { kind: "component", type: PermissionsModalComponent, selector: "val-permissions-modal", inputs: ["isOpen", "config"], outputs: ["dismissed"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OrganizationViewComponent, decorators: [{
             type: Component,
@@ -51852,6 +52631,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         TextComponent,
                         ButtonComponent,
                         MemberCardComponent,
+                        PermissionsModalComponent,
                         TransferOwnershipModalComponent,
                         MemberImportModalComponent,
                         OrgInfoSheetComponent,
@@ -52142,6 +52922,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           </div>
         </section>
       }
+      <val-permissions-modal
+        [isOpen]="permissionsOpen()"
+        [config]="{ i18nNamespace: resolvedConfig().i18nNamespace }"
+        (dismissed)="permissionsOpen.set(false)"
+      />
     </div>
   `, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.org-more-info-link{background:none;border:none;padding:4px 0;margin-top:4px;font-size:13px;font-weight:600;color:var(--ion-color-primary, #7026df);cursor:pointer;text-align:left}.page-header{margin-bottom:16px}.settings-section{padding:16px 0}.settings-section+.settings-section{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.section-header-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.section-body{display:flex;flex-direction:column;gap:10px}.row-actions{margin-top:12px}.row-actions--gap{display:flex;gap:8px}.invite-cta{display:flex;flex-direction:column;gap:16px}.invite-cta__text{display:flex;flex-direction:column;gap:4px}.invite-cta__actions{display:flex;gap:12px;flex-wrap:wrap}.org-info-card{border-radius:14px;background:var(--ion-color-light, #f4f5f8);overflow:hidden}:host-context(body.dark) .org-info-card,:host-context(html.ion-palette-dark) .org-info-card,:host-context([data-theme=\"dark\"]) .org-info-card{background:#ffffff0d}.org-info-field{padding:12px 16px;display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--val-border-color, rgba(0, 0, 0, .06))}.org-info-field:last-child{border-bottom:none}.org-info-label{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ion-color-medium)}.org-info-value{font-size:.95rem;font-weight:500;color:var(--ion-color-dark)}.org-info-value--muted{color:var(--ion-color-medium);font-weight:400}.plan-badge{display:inline-block;font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:20px;width:fit-content}.plan-badge--free{background:var(--ion-color-light-shade, #d7d8da);color:var(--ion-color-dark)}.plan-badge--pro{background:var(--ion-color-primary);color:#fff}.plan-badge--enterprise{background:#f5c542;color:#222}.members-list{display:flex;flex-direction:column;gap:8px}.members-show-more{background:none;border:none;color:var(--ion-color-primary);font-size:14px;font-weight:500;cursor:pointer;padding:8px 0}.rbac-debug{opacity:.7}.rbac-debug__body{display:flex;flex-direction:column;gap:6px;font-family:monospace;font-size:.78rem}.rbac-debug__row{display:flex;gap:8px;align-items:flex-start}.rbac-debug__label{color:var(--ion-color-medium);min-width:72px;flex-shrink:0}.rbac-debug__value{color:var(--ion-color-dark);word-break:break-all}.rbac-debug__value--perms{color:var(--ion-color-medium)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
@@ -52257,7 +53042,7 @@ addIcons({
     notificationsOutline,
     refreshOutline,
 });
-const DEFAULT_NAMESPACE$6 = 'Settings.Notifications';
+const DEFAULT_NAMESPACE$5 = 'Settings.Notifications';
 /**
  * `val-notification-preferences-view` — **preferencias de notificaciones push**
  * (FCM) full-feature autocontenida (organism). Promovida desde `showcase` bajo el
@@ -52300,7 +53085,7 @@ class NotificationPreferencesViewComponent {
             const merged = { ...fromRoute, ...(this.config ?? {}) };
             return {
                 showDetails: merged.showDetails ?? true,
-                i18nNamespace: merged.i18nNamespace ?? DEFAULT_NAMESPACE$6,
+                i18nNamespace: merged.i18nNamespace ?? DEFAULT_NAMESPACE$5,
                 onPushEnabled: merged.onPushEnabled,
                 onPushDisabled: merged.onPushDisabled,
             };
@@ -52924,622 +53709,6 @@ function provideValtechNotificationPreferencesRoutes(opts) {
     ];
 }
 
-/**
- * Defaults i18n (es/en) embebidos en `val-permissions-view`. Auto-registrados en
- * el constructor del componente si el consumer no proveyó el namespace
- * (`Settings.Permissions` por default). SOLO incluye las keys que la vista usa.
- *
- * Portado EXACTO de `PERMISSIONS_I18N` (showcase) bajo el proceso de ADR-021.
- */
-const PERMISSIONS_VIEW_I18N = {
-    es: {
-        pageTitle: 'Permisos',
-        pageDescription: 'Roles y permisos de esta app en la organización activa',
-        systemRolesTitle: 'Roles del sistema',
-        systemRolesHint: 'Predefinidos por la plataforma. No editables.',
-        customRolesTitle: 'Roles personalizados',
-        customRolesHint: 'Definidos por tu organización.',
-        systemBadge: 'Sistema',
-        noCustomRoles: 'Esta organización no tiene roles personalizados.',
-        noPermissions: 'Sin permisos asignados.',
-        // Grupos de alcance
-        groupApp: 'Permisos de la app',
-        groupOrg: 'Permisos de la organización',
-        groupPlatform: 'Permisos de plataforma',
-        groupOther: 'Otras apps',
-        // Roles del sistema
-        roleViewer: 'Visor',
-        roleEditor: 'Editor',
-        roleAdmin: 'Administrador',
-        roleSuperAdmin: 'Super Administrador',
-        roleBingoAdmin: 'Bingo · Administrador',
-        roleBingoTesorero: 'Bingo · Tesorero',
-        roleBingoTaquilla: 'Bingo · Taquilla',
-        roleBingoOperator: 'Bingo · Operador',
-        // Apps
-        app_showcase: 'Showcase',
-        app_bingo: 'Bingo',
-        // Recursos
-        permUsers: 'Usuarios',
-        permRoles: 'Roles',
-        permRbac: 'Control de acceso',
-        permApps: 'Apps',
-        'permApi-keys': 'API keys',
-        'permEmail-logs': 'Logs de correo',
-        'permSms-logs': 'Logs de SMS',
-        permDocuments: 'Documentos',
-        permMedia: 'Media',
-        permTemplates: 'Plantillas',
-        permRequests: 'Solicitudes',
-        permBingo: 'Bingo',
-        // Acciones
-        permRead: 'Leer',
-        permWrite: 'Escribir',
-        permCreate: 'Crear',
-        permDelete: 'Eliminar',
-        permManage: 'Gestionar',
-        permEdit: 'Editar',
-        permSell: 'Vender',
-        permCheckin: 'Canjear',
-        permSettle: 'Rendir',
-        permExport: 'Exportar',
-        permOperate: 'Operar',
-        permAll: 'Todo',
-        // Loading / error
-        errorTitle: 'Error al cargar permisos',
-        retry: 'Reintentar',
-    },
-    en: {
-        pageTitle: 'Permissions',
-        pageDescription: 'Roles and permissions of this app in the active organization',
-        systemRolesTitle: 'System roles',
-        systemRolesHint: 'Defined by the platform. Not editable.',
-        customRolesTitle: 'Custom roles',
-        customRolesHint: 'Defined by your organization.',
-        systemBadge: 'System',
-        noCustomRoles: 'This organization has no custom roles.',
-        noPermissions: 'No permissions assigned.',
-        groupApp: 'App permissions',
-        groupOrg: 'Organization permissions',
-        groupPlatform: 'Platform permissions',
-        groupOther: 'Other apps',
-        roleViewer: 'Viewer',
-        roleEditor: 'Editor',
-        roleAdmin: 'Administrator',
-        roleSuperAdmin: 'Super Administrator',
-        roleBingoAdmin: 'Bingo · Administrator',
-        roleBingoTesorero: 'Bingo · Treasurer',
-        roleBingoTaquilla: 'Bingo · Box office',
-        roleBingoOperator: 'Bingo · Operator',
-        app_showcase: 'Showcase',
-        app_bingo: 'Bingo',
-        permUsers: 'Users',
-        permRoles: 'Roles',
-        permRbac: 'Access control',
-        permApps: 'Apps',
-        'permApi-keys': 'API keys',
-        'permEmail-logs': 'Email logs',
-        'permSms-logs': 'SMS logs',
-        permDocuments: 'Documents',
-        permMedia: 'Media',
-        permTemplates: 'Templates',
-        permRequests: 'Requests',
-        permBingo: 'Bingo',
-        permRead: 'Read',
-        permWrite: 'Write',
-        permCreate: 'Create',
-        permDelete: 'Delete',
-        permManage: 'Manage',
-        permEdit: 'Edit',
-        permSell: 'Sell',
-        permCheckin: 'Check-in',
-        permSettle: 'Settle',
-        permExport: 'Export',
-        permOperate: 'Operate',
-        permAll: 'All',
-        errorTitle: 'Error loading permissions',
-        retry: 'Retry',
-    },
-};
-
-const DEFAULT_NAMESPACE$5 = 'Settings.Permissions';
-/**
- * `val-permissions-view` — vista Permisos full-feature autocontenida (organism).
- * Visor RBAC de solo lectura: muestra los roles del sistema (Visor/Editor/Admin +
- * roles de plataforma) y los roles personalizados de la org activa, con el
- * catálogo de permisos agrupado por alcance (app actual / plataforma / otras apps).
- * Promovida desde `showcase` bajo el proceso de ADR-021.
- *
- * **RBAC interno** (como `organization-view`): lee la org activa vía
- * `AuthService.user().activeOrgId`. La vista NO muta nada — el control de quién
- * puede verla es responsabilidad del guard de ruta del consumer; no hay gating
- * fino interno ni se expone como config.
- *
- * Datos: `forkJoin` de `OrgService.listOrgRoles(orgId)` (roles de la org) +
- * `PermissionCatalogService.getCatalog(orgId)` (catálogo + appId actual). El
- * catálogo define el alcance (`scope`/`appId`) de cada recurso para agrupar.
- *
- * NO renderiza ion-content — vive dentro de val-page-wrapper. `ActivatedRoute` se
- * inyecta `{ optional: true }` solo para leer el route data de config. Auto-registra
- * sus defaults i18n (es/en) si el consumer no proveyó el namespace (default
- * `Settings.Permissions`).
- */
-class PermissionsViewComponent {
-    /** Namespace i18n resuelto (capturado para llamadas no-reactivas). */
-    get ns() {
-        return this.resolvedConfig().i18nNamespace;
-    }
-    constructor() {
-        this.i18n = inject(I18nService);
-        this.orgService = inject(OrgService);
-        this.catalog = inject(PermissionCatalogService);
-        this.auth = inject(AuthService);
-        this.nav = inject(NavigationService);
-        this.route = inject(ActivatedRoute, { optional: true });
-        this.resolvedConfig = computed(() => {
-            const fromRoute = (this.route?.snapshot.data['permissionsConfig'] ?? {});
-            const merged = { ...fromRoute, ...(this.config ?? {}) };
-            return {
-                showSystemRoles: merged.showSystemRoles ?? true,
-                showCustomRoles: merged.showCustomRoles ?? true,
-                i18nNamespace: merged.i18nNamespace ?? DEFAULT_NAMESPACE$5,
-            };
-        });
-        this.loading = signal(false);
-        this.loadError = signal(null);
-        this.roles = signal([]);
-        this.systemRoles = computed(() => this.roles().filter(r => r.isSystem));
-        this.customRoles = computed(() => this.roles().filter(r => !r.isSystem));
-        this.activeOrgId = computed(() => {
-            const u = this.auth.user();
-            return u?.activeOrgId ?? u?.activeOrg ?? '';
-        });
-        this.retryButtonProps = computed(() => ({
-            text: this.tt('retry'),
-            color: 'dark',
-            fill: 'outline',
-            size: 'default',
-            type: 'button',
-            state: this.loading() ? ComponentStates.DISABLED : ComponentStates.ENABLED,
-        }));
-        const ns = this.ns;
-        if (!this.i18n.hasNamespace(ns)) {
-            this.i18n.registerContent(ns, PERMISSIONS_VIEW_I18N);
-        }
-        this.nav.setBackHeader('pageTitle', ns, { withMenu: true });
-        this.load();
-        connectPageRefresh(() => this.load());
-    }
-    load() {
-        const orgId = this.activeOrgId();
-        if (!orgId)
-            return;
-        this.loading.set(true);
-        this.loadError.set(null);
-        forkJoin({
-            roles: this.orgService.listOrgRoles(orgId),
-            catalog: this.catalog.getCatalog(orgId),
-        }).subscribe({
-            next: ({ roles: rawRoles, catalog }) => {
-                const byResource = new Map();
-                for (const r of catalog.permissions)
-                    byResource.set(r.resource, r);
-                const currentAppId = catalog.appId;
-                // Labeler con la SSOT del backend (labels del catálogo) — reemplaza el
-                // mapa hardcodeado `perm*`. Locale del momento de carga (igual que antes:
-                // los labels se hornean en el RoleView; cambio de idioma requiere reload).
-                const labeler = createPermissionLabeler(catalog, this.i18n.lang(), {
-                    allLabel: this.tt('permAll'),
-                });
-                this.roles.set((rawRoles ?? []).map((r) => this.buildRoleView({
-                    id: r.id,
-                    name: r.name,
-                    description: r.description,
-                    permissions: r.permissions ?? [],
-                    isSystem: r.isSystem ?? false,
-                }, byResource, currentAppId, labeler)));
-                this.loading.set(false);
-            },
-            error: err => {
-                this.loadError.set(err);
-                this.loading.set(false);
-            },
-        });
-    }
-    buildRoleView(role, byResource, currentAppId, labeler) {
-        const appPerms = [];
-        const orgPerms = [];
-        const otherByApp = new Map();
-        for (const perm of role.permissions) {
-            const [resource] = perm.split(':');
-            const entry = byResource.get(resource);
-            // Sin entrada en el catálogo (el backend omite los recursos internal para
-            // no-platform-admins) o entrada internal → NUNCA se muestra a nivel de
-            // producto. Defensa en profundidad junto al filtro del backend (ADR-024).
-            // Nota: el rol puede traer el permiso aunque el recurso esté filtrado del
-            // catálogo (ej. admin tiene templates:*); por eso se descarta lo no resuelto.
-            if (!entry || entry.scope === 'internal') {
-                continue;
-            }
-            const label = labeler(perm);
-            if (entry.scope === 'app') {
-                if (entry.appId === currentAppId) {
-                    appPerms.push(label);
-                }
-                else {
-                    const appId = entry.appId ?? '?';
-                    const arr = otherByApp.get(appId) ?? [];
-                    arr.push(label);
-                    otherByApp.set(appId, arr);
-                }
-            }
-            else {
-                // scope === 'org' → gestión de la organización del cliente
-                orgPerms.push(label);
-            }
-        }
-        const groups = [];
-        if (appPerms.length) {
-            groups.push({ key: 'app', label: this.tt('groupApp'), perms: appPerms });
-        }
-        if (orgPerms.length) {
-            groups.push({
-                key: 'org',
-                label: this.tt('groupOrg'),
-                perms: orgPerms,
-            });
-        }
-        for (const [appId, perms] of otherByApp) {
-            groups.push({
-                key: `other:${appId}`,
-                label: `${this.tt('groupOther')}: ${this.appLabel(appId)}`,
-                perms,
-            });
-        }
-        return {
-            id: role.id,
-            name: role.name,
-            description: role.description,
-            isSystem: role.isSystem,
-            groups,
-            hasPerms: groups.length > 0,
-        };
-    }
-    tt(key) {
-        return this.i18n.t(key, this.ns);
-    }
-    appLabel(appId) {
-        const key = `app_${appId}`;
-        const label = this.tt(key);
-        return label === key ? appId : label;
-    }
-    roleLabel(name) {
-        const map = {
-            viewer: 'roleViewer',
-            editor: 'roleEditor',
-            admin: 'roleAdmin',
-            super_admin: 'roleSuperAdmin',
-            bingo_admin: 'roleBingoAdmin',
-            bingo_tesorero: 'roleBingoTesorero',
-            bingo_taquilla: 'roleBingoTaquilla',
-            bingo_operator: 'roleBingoOperator',
-        };
-        return this.tt(map[name] ?? name);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PermissionsViewComponent, isStandalone: true, selector: "val-permissions-view", inputs: { config: "config" }, ngImport: i0, template: `
-    <div class="page">
-      <header class="page-header">
-        <val-display [props]="{ size: 'small', color: 'dark', content: tt('pageTitle') }" />
-        <val-title
-          [props]="{
-            size: 'large',
-            color: 'dark',
-            bold: false,
-            content: tt('pageDescription'),
-          }"
-        />
-      </header>
-
-      @if (loading()) {
-        <div class="spinner-row">
-          <ion-spinner name="crescent" />
-        </div>
-      } @else if (loadError()) {
-        <div class="error-row">
-          <val-text
-            [props]="{
-              content: tt('errorTitle'),
-              size: 'medium',
-              color: 'medium',
-              bold: false,
-            }"
-          />
-          <val-button [props]="retryButtonProps()" (click)="load()" />
-        </div>
-      } @else {
-        @if (resolvedConfig().showSystemRoles) {
-          <section class="perm-section">
-            <div class="perm-section__header">
-              <val-title
-                [props]="{
-                  size: 'medium',
-                  color: 'dark',
-                  bold: true,
-                  content: tt('systemRolesTitle'),
-                }"
-              />
-              <val-text
-                [props]="{
-                  content: tt('systemRolesHint'),
-                  size: 'medium',
-                  color: 'medium',
-                  bold: false,
-                }"
-              />
-            </div>
-            <div class="role-list">
-              @for (role of systemRoles(); track role.id) {
-                <div class="role-card">
-                  <div class="role-card__header">
-                    <span class="role-card__name">{{ roleLabel(role.name) }}</span>
-                    <val-pill
-                      [props]="{
-                        label: tt('systemBadge'),
-                        color: 'primary',
-                        weight: 'bold',
-                      }"
-                    />
-                  </div>
-                  @if (role.description) {
-                    <span class="role-card__desc">{{ role.description }}</span>
-                  }
-                  @if (!role.hasPerms) {
-                    <div class="perm-chips">
-                      <span class="perm-chip perm-chip--empty">{{ tt('noPermissions') }}</span>
-                    </div>
-                  } @else {
-                    @for (g of role.groups; track g.key) {
-                      <div class="perm-group">
-                        <span class="perm-group__label">{{ g.label }}</span>
-                        <div class="perm-chips">
-                          @for (p of g.perms; track p) {
-                            <span class="perm-chip">{{ p }}</span>
-                          }
-                        </div>
-                      </div>
-                    }
-                  }
-                </div>
-              }
-            </div>
-          </section>
-        }
-
-        @if (resolvedConfig().showCustomRoles) {
-          <section class="perm-section">
-            <div class="perm-section__header">
-              <val-title
-                [props]="{
-                  size: 'medium',
-                  color: 'dark',
-                  bold: true,
-                  content: tt('customRolesTitle'),
-                }"
-              />
-              <val-text
-                [props]="{
-                  content: tt('customRolesHint'),
-                  size: 'medium',
-                  color: 'medium',
-                  bold: false,
-                }"
-              />
-            </div>
-            @if (customRoles().length === 0) {
-              <val-text
-                [props]="{
-                  content: tt('noCustomRoles'),
-                  size: 'medium',
-                  color: 'medium',
-                  bold: false,
-                }"
-              />
-            } @else {
-              <div class="role-list">
-                @for (role of customRoles(); track role.id) {
-                  <div class="role-card">
-                    <div class="role-card__header">
-                      <span class="role-card__name">{{ role.name }}</span>
-                    </div>
-                    @if (role.description) {
-                      <span class="role-card__desc">{{ role.description }}</span>
-                    }
-                    @if (!role.hasPerms) {
-                      <div class="perm-chips">
-                        <span class="perm-chip perm-chip--empty">{{ tt('noPermissions') }}</span>
-                      </div>
-                    } @else {
-                      @for (g of role.groups; track g.key) {
-                        <div class="perm-group">
-                          <span class="perm-group__label">{{ g.label }}</span>
-                          <div class="perm-chips">
-                            @for (p of g.perms; track p) {
-                              <span class="perm-chip">{{ p }}</span>
-                            }
-                          </div>
-                        </div>
-                      }
-                    }
-                  </div>
-                }
-              </div>
-            }
-          </section>
-        }
-      }
-    </div>
-  `, isInline: true, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.page-header{margin-bottom:24px}.spinner-row,.error-row{display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px 0}.perm-section{margin-bottom:32px}.perm-section__header{margin-bottom:12px}.role-list{display:flex;flex-direction:column;gap:10px}.role-card{border:1.5px solid var(--ion-color-light);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}.role-card__header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.role-card__name{font-size:15px;font-weight:600;color:var(--ion-color-dark)}.role-card__desc{font-size:13px;color:var(--ion-color-medium);line-height:1.4}.perm-group{display:flex;flex-direction:column;gap:6px}.perm-group__label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ion-color-medium)}.perm-chips{display:flex;flex-wrap:wrap;gap:6px}.perm-chip{font-size:12px;padding:3px 10px;border-radius:20px;background:var(--ion-color-light);color:var(--ion-color-dark)}.perm-chip--empty{color:var(--ion-color-medium);background:transparent;padding-left:0}\n"], dependencies: [{ kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: PillComponent, selector: "val-pill", inputs: ["preset", "props"], outputs: ["pillClick", "pillAction"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionsViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-permissions-view', standalone: true, imports: [IonSpinner, DisplayComponent, PillComponent, TitleComponent, TextComponent, ButtonComponent], template: `
-    <div class="page">
-      <header class="page-header">
-        <val-display [props]="{ size: 'small', color: 'dark', content: tt('pageTitle') }" />
-        <val-title
-          [props]="{
-            size: 'large',
-            color: 'dark',
-            bold: false,
-            content: tt('pageDescription'),
-          }"
-        />
-      </header>
-
-      @if (loading()) {
-        <div class="spinner-row">
-          <ion-spinner name="crescent" />
-        </div>
-      } @else if (loadError()) {
-        <div class="error-row">
-          <val-text
-            [props]="{
-              content: tt('errorTitle'),
-              size: 'medium',
-              color: 'medium',
-              bold: false,
-            }"
-          />
-          <val-button [props]="retryButtonProps()" (click)="load()" />
-        </div>
-      } @else {
-        @if (resolvedConfig().showSystemRoles) {
-          <section class="perm-section">
-            <div class="perm-section__header">
-              <val-title
-                [props]="{
-                  size: 'medium',
-                  color: 'dark',
-                  bold: true,
-                  content: tt('systemRolesTitle'),
-                }"
-              />
-              <val-text
-                [props]="{
-                  content: tt('systemRolesHint'),
-                  size: 'medium',
-                  color: 'medium',
-                  bold: false,
-                }"
-              />
-            </div>
-            <div class="role-list">
-              @for (role of systemRoles(); track role.id) {
-                <div class="role-card">
-                  <div class="role-card__header">
-                    <span class="role-card__name">{{ roleLabel(role.name) }}</span>
-                    <val-pill
-                      [props]="{
-                        label: tt('systemBadge'),
-                        color: 'primary',
-                        weight: 'bold',
-                      }"
-                    />
-                  </div>
-                  @if (role.description) {
-                    <span class="role-card__desc">{{ role.description }}</span>
-                  }
-                  @if (!role.hasPerms) {
-                    <div class="perm-chips">
-                      <span class="perm-chip perm-chip--empty">{{ tt('noPermissions') }}</span>
-                    </div>
-                  } @else {
-                    @for (g of role.groups; track g.key) {
-                      <div class="perm-group">
-                        <span class="perm-group__label">{{ g.label }}</span>
-                        <div class="perm-chips">
-                          @for (p of g.perms; track p) {
-                            <span class="perm-chip">{{ p }}</span>
-                          }
-                        </div>
-                      </div>
-                    }
-                  }
-                </div>
-              }
-            </div>
-          </section>
-        }
-
-        @if (resolvedConfig().showCustomRoles) {
-          <section class="perm-section">
-            <div class="perm-section__header">
-              <val-title
-                [props]="{
-                  size: 'medium',
-                  color: 'dark',
-                  bold: true,
-                  content: tt('customRolesTitle'),
-                }"
-              />
-              <val-text
-                [props]="{
-                  content: tt('customRolesHint'),
-                  size: 'medium',
-                  color: 'medium',
-                  bold: false,
-                }"
-              />
-            </div>
-            @if (customRoles().length === 0) {
-              <val-text
-                [props]="{
-                  content: tt('noCustomRoles'),
-                  size: 'medium',
-                  color: 'medium',
-                  bold: false,
-                }"
-              />
-            } @else {
-              <div class="role-list">
-                @for (role of customRoles(); track role.id) {
-                  <div class="role-card">
-                    <div class="role-card__header">
-                      <span class="role-card__name">{{ role.name }}</span>
-                    </div>
-                    @if (role.description) {
-                      <span class="role-card__desc">{{ role.description }}</span>
-                    }
-                    @if (!role.hasPerms) {
-                      <div class="perm-chips">
-                        <span class="perm-chip perm-chip--empty">{{ tt('noPermissions') }}</span>
-                      </div>
-                    } @else {
-                      @for (g of role.groups; track g.key) {
-                        <div class="perm-group">
-                          <span class="perm-group__label">{{ g.label }}</span>
-                          <div class="perm-chips">
-                            @for (p of g.perms; track p) {
-                              <span class="perm-chip">{{ p }}</span>
-                            }
-                          </div>
-                        </div>
-                      }
-                    }
-                  </div>
-                }
-              </div>
-            }
-          </section>
-        }
-      }
-    </div>
-  `, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.page-header{margin-bottom:24px}.spinner-row,.error-row{display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px 0}.perm-section{margin-bottom:32px}.perm-section__header{margin-bottom:12px}.role-list{display:flex;flex-direction:column;gap:10px}.role-card{border:1.5px solid var(--ion-color-light);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}.role-card__header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.role-card__name{font-size:15px;font-weight:600;color:var(--ion-color-dark)}.role-card__desc{font-size:13px;color:var(--ion-color-medium);line-height:1.4}.perm-group{display:flex;flex-direction:column;gap:6px}.perm-group__label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ion-color-medium)}.perm-chips{display:flex;flex-wrap:wrap;gap:6px}.perm-chip{font-size:12px;padding:3px 10px;border-radius:20px;background:var(--ion-color-light);color:var(--ion-color-dark)}.perm-chip--empty{color:var(--ion-color-medium);background:transparent;padding-left:0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { config: [{
-                type: Input
-            }] } });
-
 /**
  * Helper para montar la vista Permisos (`val-permissions-view`) como ruta en una
  * app del factory. El `config` se pasa por route `data` (`permissionsConfig`) y el
@@ -67204,5 +67373,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_CARD_DEFAULTS, AD_SIZE_MAP, API_TABLE_COLUMN_LABELS, APP_VERSION_PLATFORM_PLUGIN, APP_VERSION_REMOTE_PLUGIN, ARTICLE_CARD_DEFAULTS, ARTICLE_SPACING, ARTICLE_STRIP_DEFAULTS, AUTH_CTA_DEFAULTS, AVATAR_UPLOAD_DEFAULTS, AboutViewComponent, AccordionComponent, AccountViewComponent, ActionCardComponent, ActionHeaderComponent, ActionType, AdSlotComponent, AdsLoaderService, AdsService, AlertBoxComponent, AnalyticsErrorHandler, AnalyticsRouterTracker, AnalyticsService, AnimatedTerminalComponent, ApiKeyCreateModalComponent, ApiKeyService, ApiKeysModalComponent, ApiKeysViewComponent, AppConfigService, AppVersionService, ArticleBuilder, ArticleCardComponent, ArticleComponent, ArticleStripComponent, AttachmentUploaderComponent, AuthBackgroundComponent, AuthCtaComponent, AuthService, AuthStateService, AuthStorageService, AuthSyncService, AvatarComponent, AvatarUploadComponent, BOTTOM_NAV_DEFAULTS, BannerComponent, BlogPostBuilder, BottomNavComponent, BoxComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CALLOUT_LABELS, CHEV_KEYS, CIRCLE_KEYS, COMMON_COUNTRY_CODES, COMMON_CURRENCIES, CORNER_KEYS, CTA_CARD_DEFAULTS, CURRENCY_INFO, CardComponent, CardSection, CardType, CardsCarouselComponent, ChangeEmailModalComponent, ChangePasswordModalComponent, CheckInputComponent, CheckboxRadioInputComponent, ChipGroupComponent, CodeDisplayComponent, CommandDisplayComponent, CommentComponent, CommentInputComponent, CommentSectionComponent, CompanyFooterComponent, ComponentStates, ConfirmationDialogService, ContainerComponent, ContentLoaderComponent, ContentReactionComponent, ContentService, ContentTransformer, CookieBannerComponent, CountdownComponent, CreateOrgModalComponent, CtaCardComponent, CurrencyInputComponent, DEFAULT_ADS_CONFIG, DEFAULT_APP_CONFIG_SERVICE_CONFIG, DEFAULT_APP_VERSION_SERVICE_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_BACK_HEADER, DEFAULT_BUTTON_PRESETS, DEFAULT_CANCEL_BUTTON, DEFAULT_CHECK_INTERVAL_MS, DEFAULT_CONFIRM_BUTTON, DEFAULT_COUNTDOWN_LABELS, DEFAULT_COUNTDOWN_LABELS_EN, DEFAULT_DEBUG_CONSOLE_CONFIG, DEFAULT_DONATION_CONFIG, DEFAULT_EMPTY_STATE, DEFAULT_EMULATOR_CONFIG, DEFAULT_FEEDBACK_CONFIG, DEFAULT_FEEDBACK_TYPE_OPTIONS, DEFAULT_HOME_HEADER, DEFAULT_INFINITE_LIST_METADATA, DEFAULT_MODAL_CANCEL_BUTTON, DEFAULT_MODAL_CONFIRM_BUTTON, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLATFORMS, DEFAULT_PRESETS, DEFAULT_REFRESHER_METADATA, DEFAULT_SKELETON_CONFIG, DEFAULT_SPLASH_SCREEN_CONFIG, DataTableComponent, DateInputComponent, DatePickerComponent, DateRangeInputComponent, DebugConsoleComponent, DeleteAccountModalComponent, DetailSkeletonComponent, DeviceService, DisplayComponent, DividerComponent, DocsApiTableComponent, DocsBreadcrumbComponent, DocsBuilder, DocsCalloutComponent, DocsCodeExampleComponent, DocsLayoutComponent, DocsNavLinksComponent, DocsNavigationService, DocsPageComponent, DocsSearchComponent, DocsSectionComponent, DocsShellComponent, DocsSidebarComponent, DocsTocComponent, DonationService, DownloadService, EditOrgModalComponent, EmptyStateComponent, ExpandableTextComponent, FEATURES_LIST_DEFAULTS, FUN_MODAL_DEFAULTS, FabComponent, FaqComponent, FeaturesListComponent, FeedbackFormComponent, FeedbackService, FieldListComponent, FileInputComponent, FirebaseService, FirestoreCollectionFactory, FirestoreService, FontSizeOption, FontSizeService, FooterComponent, FooterLinksComponent, FormComponent, FormSkeletonComponent, FunHeaderComponent, FunModalComponent, GlassComponent, GlowCardComponent, GlowComponent, GridSkeletonComponent, HANDOFF_ROUTE_PARAM, HANDOFF_TOKEN_PARAM, HandoffService, HasPermissionDirective, HeaderComponent, HintComponent, HorizontalScrollComponent, HrefComponent, I18nService, IMAGE_DEFAULTS, INITIAL_AUTH_STATE, INITIAL_MFA_STATE, INVITATION_CARD_DEFAULTS, IONIC_COLORS$5 as IONIC_COLORS, Icon, IconComponent, IconService, ImageComponent, ImageCropComponent, ImageService, InAppBrowserService, InfiniteListComponent, InfoComponent, InputI18nHelper, InputType, InvitationCardComponent, InviteMemberModalComponent, ItemListComponent, LANG_STORAGE_KEY$1 as LANG_STORAGE_KEY, LEGAL_CONTENT_CONFIG, LOGIN_DEFAULTS, LandingSplitComponent, LandingStepsComponent, LanguageSelectorComponent, LayeredCardComponent, LegalContentService, LegalLinkService, LinkComponent, LinkProcessorService, LinkedProvidersComponent, LinksAccordionComponent, LinksCakeComponent, ListSkeletonComponent, LoadingDirective, LocalStorageService, LocaleService, LoginAttemptModalComponent, LoginComponent, MEDIA_OBJECT_DEFAULTS, MEMBER_CARD_DEFAULTS, METRIC_CARD_DEFAULTS, MODAL_SIZES, MOTIF_KEYS, MOTION, MaintenancePageComponent, MarkdownArticleParserService, MediaObjectComponent, MemberCardComponent, MemberDetailModalComponent, MemberImportModalComponent, MenuComponent, MessagingService, MetaService, MetricCardComponent, MfaModalComponent, ModalService, ModalShellComponent, MultiSelectSearchComponent, NUM_KEYS, NavigationService, NetworkBannerComponent, NetworkStatusService, NewsBuilder, NoContentComponent, NotesBoxComponent, NotificationActionService, NotificationPreferencesViewComponent, NotificationsService, NotificationsViewComponent, NumberFromToComponent, NumberStepperComponent, OAUTH_PROVIDERS_INFO, OAuthCallbackComponent, OAuthService, OrgInfoSheetComponent, OrgService, OrgSwitchService, OrganizationViewComponent, PATTERN_MOTIFS, PATTERN_PALETTES, PATTERN_STYLE_CONFIGS, PLATFORM_CONFIGS, PageContentComponent, PageLinksComponent, PageRefreshService, PageTemplateComponent, PageWavesComponent, PageWrapperComponent, PaginationComponent, PaginationService, PasswordInputComponent, PatternComponent, PermissionCatalogService, PermissionSelectorComponent, PermissionsViewComponent, PhoneInputComponent, PillComponent, PinInputComponent, PlainCodeBoxComponent, PopoverSelectorComponent, PreferencesService, PreferencesViewComponent, PresetService, PriceTagComponent, ProcessLinksPipe, ProfileSkeletonComponent, ProfileViewComponent, ProgressBarComponent, ProgressRingComponent, ProgressStatusComponent, PrompterComponent, QR_PRESETS, QrCodeComponent, QrGeneratorService, QrScannerComponent, QueryBuilder, QuoteBoxComponent, REQUEST_STATUSES, RadioInputComponent, RangeInputComponent, RatingComponent, RefresherComponent, RequestFirestoreService, RequestFormBuilderService, RequestService, RightsFooterComponent, RotatingTextComponent, SEARCH_HEADER_DEFAULTS, SETTINGS_SECTIONS_CATALOG, SHAPE_KEYS, SHARE_PROFILE_MODAL_DEFAULTS, SKELETON_LAYOUT_DEFAULT_ROWS, SKELETON_PRESETS, SOLID_KEYS, STATS_BAR_DEFAULTS, STROKE_KEYS, SearchHeaderComponent, SearchSelectorComponent, SearchbarComponent, SecurityViewComponent, SegmentControlComponent, SelectSearchComponent, SessionListModalComponent, SessionService, SettingsHubComponent, ShareButtonsComponent, ShareProfileModalComponent, SimpleComponent, SkeletonComponent, SkeletonLayoutComponent, SkeletonService, SplashScreenService, StatsBarComponent, StatsCardComponent, StepperComponent, StorageService, SwipeCarouselComponent, SwitchOrgModalComponent, TRI_KEYS, TabbedContentComponent, TableSkeletonComponent, TabsComponent, Terminal404Component, TestimonialCardComponent, TestimonialCarouselComponent, TextComponent, TextInputComponent, TextareaInputComponent, ThemeOption, ThemeService, TicketCardComponent, TimelineComponent, TitleBlockComponent, TitleComponent, ToastService, ToggleInputComponent, TokenService, ToolbarActionType, ToolbarComponent, TransferOwnershipModalComponent, TranslatePipe, TypedCollection, UPDATE_BANNER_DEFAULT_CONTENT, UPDATE_BANNER_I18N_NAMESPACE, UpdateBannerComponent, UserAvatarComponent, UsernameInputComponent, VALTECH_ADS_CONFIG, VALTECH_APP_CONFIG, VALTECH_APP_VERSION, VALTECH_AUTH_CONFIG, VALTECH_COMPANY_LINKS, VALTECH_CONTENT_CONFIG, VALTECH_DEBUG_CONSOLE, VALTECH_DEFAULT_CONTENT, VALTECH_DONATION_CONFIG, VALTECH_FEEDBACK_CONFIG, VALTECH_FIREBASE_CONFIG, VALTECH_FOOTER_I18N, VALTECH_FOOTER_LOGO, VALTECH_LANGUAGE_SELECTOR, VALTECH_LEGAL_CONFIG, VALTECH_NETWORK_ERROR_KEY, VALTECH_SETTINGS_MENU_LINKS, VALTECH_SITE_PATHS, VALTECH_SOCIAL_LINKS, VALTECH_SPLASH_SCREEN, VALTECH_WEB_BASE_URLS, VERSION, ValtechErrorService, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, authGuard, authInterceptor, authPasswordValidator, beautifyLegalArticle, blogPost, buildCompanyFooterProps, buildFooterLinks, buildLegalLinkResolver, buildPath, buildSettingsCards, button, collections, connectPageRefresh, createErrorStateProps, createFirebaseConfig, createGlowCardProps, createInitialPaginationState, createNumberFromToField, createPageState, createPermissionLabeler, createRefreshableStream, createTitleProps, docs, errorLoggingInterceptor, extractPathParams, generatePatternTiles, generateRandomTile, getAppInfo, getAppVersion, getCollectionPath, getDocumentId, getTimeOfDayKey, goToTop, guestGuard, hasEmulators, iconButton, interpretError, isAtEnd, isCollectionPath, isDocumentPath, isEmulatorMode, isIonicColor, isValidPath, joinPath, maxLength, mulberry32, news, parseMarkdownArticle, permissionGuard, permissionGuardFromRoute, provideLegalContent, provideSplashScreen, provideValtechAboutRoutes, provideValtechAccountRoutes, provideValtechAds, provideValtechApiKeysRoutes, provideValtechAppConfig, provideValtechAppVersion, provideValtechAppVersionHttp, provideValtechAuth, provideValtechAuthInterceptor, provideValtechContent, provideValtechDebugConsole, provideValtechDonations, provideValtechErrorHandling, provideValtechFeedback, provideValtechFirebase, provideValtechI18n, provideValtechLegal, provideValtechNotificationPreferencesRoutes, provideValtechNotificationsRoutes, provideValtechOrganizationRoutes, provideValtechPermissionsRoutes, provideValtechPreferencesRoutes, provideValtechPresets, provideValtechProfileRoutes, provideValtechSecurityRoutes, provideValtechSettingsRoutes, provideValtechSite, provideValtechSkeleton, query, renderPatternSvgInner, replaceSpecialChars, resolveColor, resolveInputDefaultValue, resolveIonicColor, resolveWebBaseUrl, roleGuard, storagePaths, superAdminGuard, toArticle };
+export { ACTION_CARD_DEFAULTS, AD_SIZE_MAP, API_TABLE_COLUMN_LABELS, APP_VERSION_PLATFORM_PLUGIN, APP_VERSION_REMOTE_PLUGIN, ARTICLE_CARD_DEFAULTS, ARTICLE_SPACING, ARTICLE_STRIP_DEFAULTS, AUTH_CTA_DEFAULTS, AVATAR_UPLOAD_DEFAULTS, AboutViewComponent, AccordionComponent, AccountViewComponent, ActionCardComponent, ActionHeaderComponent, ActionType, AdSlotComponent, AdsLoaderService, AdsService, AlertBoxComponent, AnalyticsErrorHandler, AnalyticsRouterTracker, AnalyticsService, AnimatedTerminalComponent, ApiKeyCreateModalComponent, ApiKeyService, ApiKeysModalComponent, ApiKeysViewComponent, AppConfigService, AppVersionService, ArticleBuilder, ArticleCardComponent, ArticleComponent, ArticleStripComponent, AttachmentUploaderComponent, AuthBackgroundComponent, AuthCtaComponent, AuthService, AuthStateService, AuthStorageService, AuthSyncService, AvatarComponent, AvatarUploadComponent, BOTTOM_NAV_DEFAULTS, BannerComponent, BlogPostBuilder, BottomNavComponent, BoxComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CALLOUT_LABELS, CHEV_KEYS, CIRCLE_KEYS, COMMON_COUNTRY_CODES, COMMON_CURRENCIES, CORNER_KEYS, CTA_CARD_DEFAULTS, CURRENCY_INFO, CardComponent, CardSection, CardType, CardsCarouselComponent, ChangeEmailModalComponent, ChangePasswordModalComponent, CheckInputComponent, CheckboxRadioInputComponent, ChipGroupComponent, CodeDisplayComponent, CommandDisplayComponent, CommentComponent, CommentInputComponent, CommentSectionComponent, CompanyFooterComponent, ComponentStates, ConfirmationDialogService, ContainerComponent, ContentLoaderComponent, ContentReactionComponent, ContentService, ContentTransformer, CookieBannerComponent, CountdownComponent, CreateOrgModalComponent, CtaCardComponent, CurrencyInputComponent, DEFAULT_ADS_CONFIG, DEFAULT_APP_CONFIG_SERVICE_CONFIG, DEFAULT_APP_VERSION_SERVICE_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_BACK_HEADER, DEFAULT_BUTTON_PRESETS, DEFAULT_CANCEL_BUTTON, DEFAULT_CHECK_INTERVAL_MS, DEFAULT_CONFIRM_BUTTON, DEFAULT_COUNTDOWN_LABELS, DEFAULT_COUNTDOWN_LABELS_EN, DEFAULT_DEBUG_CONSOLE_CONFIG, DEFAULT_DONATION_CONFIG, DEFAULT_EMPTY_STATE, DEFAULT_EMULATOR_CONFIG, DEFAULT_FEEDBACK_CONFIG, DEFAULT_FEEDBACK_TYPE_OPTIONS, DEFAULT_HOME_HEADER, DEFAULT_INFINITE_LIST_METADATA, DEFAULT_LOGIN_LOGO, DEFAULT_MODAL_CANCEL_BUTTON, DEFAULT_MODAL_CONFIRM_BUTTON, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLATFORMS, DEFAULT_PRESETS, DEFAULT_REFRESHER_METADATA, DEFAULT_SKELETON_CONFIG, DEFAULT_SPLASH_SCREEN_CONFIG, DataTableComponent, DateInputComponent, DatePickerComponent, DateRangeInputComponent, DebugConsoleComponent, DeleteAccountModalComponent, DetailSkeletonComponent, DeviceService, DisplayComponent, DividerComponent, DocsApiTableComponent, DocsBreadcrumbComponent, DocsBuilder, DocsCalloutComponent, DocsCodeExampleComponent, DocsLayoutComponent, DocsNavLinksComponent, DocsNavigationService, DocsPageComponent, DocsSearchComponent, DocsSectionComponent, DocsShellComponent, DocsSidebarComponent, DocsTocComponent, DonationService, DownloadService, EditOrgModalComponent, EmptyStateComponent, ExpandableTextComponent, FEATURES_LIST_DEFAULTS, FUN_MODAL_DEFAULTS, FabComponent, FaqComponent, FeaturesListComponent, FeedbackFormComponent, FeedbackService, FieldListComponent, FileInputComponent, FirebaseService, FirestoreCollectionFactory, FirestoreService, FontSizeOption, FontSizeService, FooterComponent, FooterLinksComponent, FormComponent, FormSkeletonComponent, FunHeaderComponent, FunModalComponent, GlassComponent, GlowCardComponent, GlowComponent, GridSkeletonComponent, HANDOFF_ROUTE_PARAM, HANDOFF_TOKEN_PARAM, HandoffService, HasPermissionDirective, HeaderComponent, HintComponent, HorizontalScrollComponent, HrefComponent, I18nService, IMAGE_DEFAULTS, INITIAL_AUTH_STATE, INITIAL_MFA_STATE, INVITATION_CARD_DEFAULTS, IONIC_COLORS$5 as IONIC_COLORS, Icon, IconComponent, IconService, ImageComponent, ImageCropComponent, ImageService, InAppBrowserService, InfiniteListComponent, InfoComponent, InputI18nHelper, InputType, InvitationCardComponent, InviteMemberModalComponent, ItemListComponent, LANG_STORAGE_KEY$1 as LANG_STORAGE_KEY, LEGAL_CONTENT_CONFIG, LOGIN_DEFAULTS, LandingSplitComponent, LandingStepsComponent, LanguageSelectorComponent, LayeredCardComponent, LegalContentService, LegalLinkService, LinkComponent, LinkProcessorService, LinkedProvidersComponent, LinksAccordionComponent, LinksCakeComponent, ListSkeletonComponent, LoadingDirective, LocalStorageService, LocaleService, LoginAttemptModalComponent, LoginComponent, MEDIA_OBJECT_DEFAULTS, MEMBER_CARD_DEFAULTS, METRIC_CARD_DEFAULTS, MODAL_SIZES, MOTIF_KEYS, MOTION, MaintenancePageComponent, MarkdownArticleParserService, MediaObjectComponent, MemberCardComponent, MemberDetailModalComponent, MemberImportModalComponent, MenuComponent, MessagingService, MetaService, MetricCardComponent, MfaModalComponent, ModalService, ModalShellComponent, MultiSelectSearchComponent, NUM_KEYS, NavigationService, NetworkBannerComponent, NetworkStatusService, NewsBuilder, NoContentComponent, NotesBoxComponent, NotificationActionService, NotificationPreferencesViewComponent, NotificationsService, NotificationsViewComponent, NumberFromToComponent, NumberStepperComponent, OAUTH_PROVIDERS_INFO, OAuthCallbackComponent, OAuthService, OrgInfoSheetComponent, OrgService, OrgSwitchService, OrganizationViewComponent, PATTERN_MOTIFS, PATTERN_PALETTES, PATTERN_STYLE_CONFIGS, PLATFORM_CONFIGS, PageContentComponent, PageLinksComponent, PageRefreshService, PageTemplateComponent, PageWavesComponent, PageWrapperComponent, PaginationComponent, PaginationService, PasswordInputComponent, PatternComponent, PermissionCatalogService, PermissionSelectorComponent, PermissionsModalComponent, PermissionsViewComponent, PhoneInputComponent, PillComponent, PinInputComponent, PlainCodeBoxComponent, PopoverSelectorComponent, PreferencesService, PreferencesViewComponent, PresetService, PriceTagComponent, ProcessLinksPipe, ProfileSkeletonComponent, ProfileViewComponent, ProgressBarComponent, ProgressRingComponent, ProgressStatusComponent, PrompterComponent, QR_PRESETS, QrCodeComponent, QrGeneratorService, QrScannerComponent, QueryBuilder, QuoteBoxComponent, REQUEST_STATUSES, RadioInputComponent, RangeInputComponent, RatingComponent, RefresherComponent, RequestFirestoreService, RequestFormBuilderService, RequestService, RightsFooterComponent, RotatingTextComponent, SEARCH_HEADER_DEFAULTS, SETTINGS_SECTIONS_CATALOG, SHAPE_KEYS, SHARE_PROFILE_MODAL_DEFAULTS, SKELETON_LAYOUT_DEFAULT_ROWS, SKELETON_PRESETS, SOLID_KEYS, STATS_BAR_DEFAULTS, STROKE_KEYS, SearchHeaderComponent, SearchSelectorComponent, SearchbarComponent, SecurityViewComponent, SegmentControlComponent, SelectSearchComponent, SessionListModalComponent, SessionService, SettingsHubComponent, ShareButtonsComponent, ShareProfileModalComponent, SimpleComponent, SkeletonComponent, SkeletonLayoutComponent, SkeletonService, SplashScreenService, StatsBarComponent, StatsCardComponent, StepperComponent, StorageService, SwipeCarouselComponent, SwitchOrgModalComponent, TRI_KEYS, TabbedContentComponent, TableSkeletonComponent, TabsComponent, Terminal404Component, TestimonialCardComponent, TestimonialCarouselComponent, TextComponent, TextInputComponent, TextareaInputComponent, ThemeOption, ThemeService, TicketCardComponent, TimelineComponent, TitleBlockComponent, TitleComponent, ToastService, ToggleInputComponent, TokenService, ToolbarActionType, ToolbarComponent, TransferOwnershipModalComponent, TranslatePipe, TypedCollection, UPDATE_BANNER_DEFAULT_CONTENT, UPDATE_BANNER_I18N_NAMESPACE, UpdateBannerComponent, UserAvatarComponent, UsernameInputComponent, VALTECH_ADS_CONFIG, VALTECH_APP_CONFIG, VALTECH_APP_VERSION, VALTECH_AUTH_CONFIG, VALTECH_COMPANY_LINKS, VALTECH_CONTENT_CONFIG, VALTECH_DEBUG_CONSOLE, VALTECH_DEFAULT_CONTENT, VALTECH_DONATION_CONFIG, VALTECH_FEEDBACK_CONFIG, VALTECH_FIREBASE_CONFIG, VALTECH_FOOTER_I18N, VALTECH_FOOTER_LOGO, VALTECH_LANGUAGE_SELECTOR, VALTECH_LEGAL_CONFIG, VALTECH_NETWORK_ERROR_KEY, VALTECH_SETTINGS_MENU_LINKS, VALTECH_SITE_PATHS, VALTECH_SOCIAL_LINKS, VALTECH_SPLASH_SCREEN, VALTECH_WEB_BASE_URLS, VERSION, ValtechErrorService, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, authGuard, authInterceptor, authPasswordValidator, beautifyLegalArticle, blogPost, buildCompanyFooterProps, buildFooterLinks, buildLegalLinkResolver, buildPath, buildSettingsCards, button, collections, connectPageRefresh, createErrorStateProps, createFirebaseConfig, createGlowCardProps, createInitialPaginationState, createNumberFromToField, createPageState, createPermissionLabeler, createRefreshableStream, createTitleProps, docs, errorLoggingInterceptor, extractPathParams, generatePatternTiles, generateRandomTile, getAppInfo, getAppVersion, getCollectionPath, getDocumentId, getTimeOfDayKey, goToTop, guestGuard, hasEmulators, iconButton, interpretError, isAtEnd, isCollectionPath, isDocumentPath, isEmulatorMode, isIonicColor, isValidPath, joinPath, maxLength, mulberry32, news, parseMarkdownArticle, permissionGuard, permissionGuardFromRoute, provideLegalContent, provideSplashScreen, provideValtechAboutRoutes, provideValtechAccountRoutes, provideValtechAds, provideValtechApiKeysRoutes, provideValtechAppConfig, provideValtechAppVersion, provideValtechAppVersionHttp, provideValtechAuth, provideValtechAuthInterceptor, provideValtechContent, provideValtechDebugConsole, provideValtechDonations, provideValtechErrorHandling, provideValtechFeedback, provideValtechFirebase, provideValtechI18n, provideValtechLegal, provideValtechNotificationPreferencesRoutes, provideValtechNotificationsRoutes, provideValtechOrganizationRoutes, provideValtechPermissionsRoutes, provideValtechPreferencesRoutes, provideValtechPresets, provideValtechProfileRoutes, provideValtechSecurityRoutes, provideValtechSettingsRoutes, provideValtechSite, provideValtechSkeleton, query, renderPatternSvgInner, replaceSpecialChars, resolveColor, resolveInputDefaultValue, resolveIonicColor, resolveWebBaseUrl, roleGuard, storagePaths, superAdminGuard, toArticle };
 //# sourceMappingURL=valtech-components.mjs.map