valtech-components 4.0.178 → 4.0.179

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.178';
+const VERSION = '4.0.179';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -6587,21 +6587,145 @@ class OAuthService {
             this.clearLocalStorageFallback();
             const nonce = this.generateNonce();
             this.expectedNonce = nonce;
-            // Flujo REDIRECT (sin popup). El popup quedaba COLGADO bajo COOP: Google
-            // setea Cross-Origin-Opener-Policy → window.opener queda severado (el
-            // postMessage del popup no llega), BroadcastChannel/localStorage no siempre
-            // entregan, y popup.closed queda bloqueado ("COOP policy would block the
-            // window.closed call") → ni siquiera dispara el cancel: la ventana principal
-            // espera para siempre sin redirigir. Navegamos la VENTANA COMPLETA al /start;
-            // al volver, OAuthCallbackComponent corre como ventana principal (redirect_uri
-            // SIN popup=true) y completa la sesión vía completeInMainWindow → navega al
-            // home. Sin popup = sin COOP = sin cuelgue. (El link-flow sigue por popup.)
-            const redirectUri = `${window.location.origin}/auth/oauth/callback`;
+            // popup=true sobrevive el bounce cross-origin (Google/MS borran window.name
+            // por privacidad). El backend lo reenvía en el redirect final vía appendParams.
+            const redirectUri = `${window.location.origin}/auth/oauth/callback?popup=true`;
             const startUrl = `${this.config?.apiUrl}/v2/auth/oauth/${provider}/start?redirect_uri=${encodeURIComponent(redirectUri)}&client_nonce=${encodeURIComponent(nonce)}`;
-            window.location.assign(startUrl);
-            // La página se descarga acá; el observable no emite (la finalización ocurre
-            // en el callback, ya como ventana principal). Sin listeners ni polling.
-            return () => { };
+            // Abrir popup centrado
+            const width = 500;
+            const height = 600;
+            const left = window.screenX + (window.outerWidth - width) / 2;
+            const top = window.screenY + (window.outerHeight - height) / 2;
+            const features = `width=${width},height=${height},left=${left},top=${top},popup=yes`;
+            this.popup = window.open(startUrl, 'oauth', features);
+            if (!this.popup) {
+                observer.error({
+                    code: 'POPUP_BLOCKED',
+                    message: 'El navegador bloqueó la ventana emergente. Por favor, permite popups para este sitio.',
+                });
+                return () => { };
+            }
+            // Escuchar mensajes del popup
+            this.messageHandler = (event) => {
+                // Validar origen
+                if (event.origin !== window.location.origin) {
+                    return;
+                }
+                // Validar tipo de mensaje
+                const data = event.data;
+                if (data?.type !== 'oauth-callback') {
+                    return;
+                }
+                // Verificar el nonce del flujo (M-07): si no coincide, no es nuestro
+                // callback → ignorar (no consumir el observable).
+                if (!this.isNonceValid(data)) {
+                    return;
+                }
+                // Limpiar
+                this.cleanup();
+                // Emitir resultado dentro de NgZone para trigger change detection
+                this.ngZone.run(() => {
+                    if (data.error) {
+                        observer.error(data.error);
+                    }
+                    else if (data.tokens) {
+                        observer.next(data.tokens);
+                        observer.complete();
+                    }
+                    else {
+                        observer.error({
+                            code: 'INVALID_RESPONSE',
+                            message: 'Respuesta inválida del servidor de autenticación',
+                        });
+                    }
+                });
+            };
+            window.addEventListener('message', this.messageHandler);
+            // BroadcastChannel: canal adicional immune a COOP (funciona entre misma
+            // origin sin importar el browsing context group). Es el canal más fiable
+            // cuando COOP sever el link opener→popup al pasar por Google/MS.
+            try {
+                this.broadcastChannel = new BroadcastChannel('valtech-oauth-callback');
+                this.broadcastChannel.onmessage = (event) => {
+                    const data = event.data;
+                    if (data?.type !== 'oauth-callback')
+                        return;
+                    if (!this.isNonceValid(data))
+                        return;
+                    this.clearLocalStorageFallback();
+                    this.cleanup();
+                    this.ngZone.run(() => {
+                        if (data.error) {
+                            observer.error(data.error);
+                        }
+                        else if (data.tokens) {
+                            observer.next(data.tokens);
+                            observer.complete();
+                        }
+                        else {
+                            observer.error({
+                                code: 'INVALID_RESPONSE',
+                                message: 'Respuesta inválida del servidor de autenticación',
+                            });
+                        }
+                    });
+                };
+            }
+            catch {
+                // BroadcastChannel no disponible (contextos muy restringidos) — ignorar
+            }
+            // Polling de localStorage (COOP workaround - no podemos detectar popup.closed)
+            // También verifica si el popup se cerró manualmente
+            this.checkClosedInterval = setInterval(() => {
+                // Primero verificar localStorage (funciona aunque COOP bloquee todo)
+                const storedData = this.checkLocalStorageFallback();
+                if (storedData) {
+                    this.cleanup();
+                    this.ngZone.run(() => {
+                        if (storedData.error) {
+                            observer.error(storedData.error);
+                        }
+                        else if (storedData.tokens) {
+                            // Gate de diagnóstico: la metadata de tokens (keys, presencia y
+                            // longitud del firebaseToken) no debe filtrarse a la consola en
+                            // producción (L4 del audit). Solo en dev.
+                            if (isDevMode()) {
+                                console.log('[OAuthService] Retrieved tokens from localStorage fallback', {
+                                    keys: Object.keys(storedData.tokens),
+                                    hasFirebaseToken: !!storedData.tokens.firebaseToken,
+                                    firebaseTokenLength: storedData.tokens.firebaseToken?.length ?? 0,
+                                });
+                            }
+                            observer.next(storedData.tokens);
+                            observer.complete();
+                        }
+                        else {
+                            observer.error({
+                                code: 'INVALID_RESPONSE',
+                                message: 'Respuesta inválida del servidor de autenticación',
+                            });
+                        }
+                    });
+                    return;
+                }
+                // Intentar verificar si popup se cerró (puede fallar por COOP)
+                try {
+                    if (this.popup?.closed) {
+                        this.cleanup();
+                        this.ngZone.run(() => {
+                            observer.error({
+                                code: 'POPUP_CLOSED',
+                                message: 'Se cerró la ventana de autenticación',
+                            });
+                        });
+                    }
+                }
+                catch {
+                    // COOP bloquea acceso a popup.closed - ignorar y seguir con polling
+                }
+            }, 300);
+            // Cleanup cuando el observable se destruye
+            return () => this.cleanup();
         });
     }
     /**
@@ -54106,7 +54230,8 @@ const ORGANIZATION_VIEW_I18N = {
         apiKeysFeaturePermsDesc: 'Cada key lleva solo los permisos que tú le asignes — concede el mínimo.',
         apiKeysFeatureSecretTitle: 'Secreto único',
         apiKeysFeatureSecretDesc: 'El secreto se muestra una sola vez. Guárdalo en un gestor de secretos.',
-        switchOrgCta: 'Cambiar organización',
+        activeOrgTitle: 'Organización activa',
+        switchOrgCta: 'Cambiar',
         orgsMoreInfo: 'Aprender más sobre organizaciones',
         orgsInfoTitle: '¿Qué son las organizaciones?',
         orgsInfoSubtitle: 'Todo lo que necesitas saber',
@@ -54205,7 +54330,8 @@ const ORGANIZATION_VIEW_I18N = {
         apiKeysFeaturePermsDesc: 'Each key carries only the permissions you assign — grant the minimum.',
         apiKeysFeatureSecretTitle: 'One-time secret',
         apiKeysFeatureSecretDesc: 'The secret is shown only once. Store it in a secret manager.',
-        switchOrgCta: 'Switch organization',
+        activeOrgTitle: 'Active organization',
+        switchOrgCta: 'Switch',
         orgsMoreInfo: 'Learn more about organizations',
         orgsInfoTitle: 'What are organizations?',
         orgsInfoSubtitle: 'Everything you need to know',
@@ -54397,14 +54523,18 @@ class OrganizationViewComponent {
                 return this.tt('planEnterprise');
             return this.tt('planFree');
         });
-        this.switchOrgButtonProps = computed(() => ({
-            text: this.tt('switchOrgCta'),
-            color: 'dark',
-            fill: 'outline',
-            size: 'default',
-            shape: 'round',
-            type: 'button',
-            token: 'org-switch',
+        this.switchOrgSectionProps = computed(() => ({
+            title: this.tt('activeOrgTitle'),
+            action: {
+                text: this.tt('switchOrgCta'),
+                color: 'dark',
+                fill: 'outline',
+                size: 'small',
+                shape: 'round',
+                type: 'button',
+                token: 'org-switch',
+                state: ComponentStates.ENABLED,
+            },
         }));
         this.editButtonProps = computed(() => ({
             text: this.tt('editCta'),
@@ -54923,15 +55053,8 @@ class OrganizationViewComponent {
             content: pageDescription(),
           }"
         />
-        <!-- "Aprender más sobre organizaciones" — bajo el título+subtítulo
-             principal de la vista (abre el explainer org-info-sheet). -->
-        <button class="org-more-info-link" type="button" (click)="onOrgInfo()">
-          {{ tt('orgsMoreInfo') }}
-        </button>
-        <!-- Cambiar de organización activa. -->
-        <div class="org-switch-row">
-          <val-button [props]="switchOrgButtonProps()" (onClick)="onSwitchOrg()" />
-        </div>
+        <!-- Sección "Organización activa" con botón Cambiar a la derecha. -->
+        <val-section-header [props]="switchOrgSectionProps()" (actionClick)="onSwitchOrg()" />
       </header>
 
       @if (resolvedConfig().showInfo) {
@@ -55233,7 +55356,7 @@ class OrganizationViewComponent {
         (created)="onOrgCreated($event)"
       />
     </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}.org-info-logo{display:flex;justify-content:center;padding:8px 0 16px}.org-logo-img{width:80px;height:80px;border-radius:50%;object-fit:cover;border:2px solid var(--ion-color-light)}: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)}.section-title-danger{display:flex;align-items:center;gap:8px;margin-bottom:12px}.section-title-danger val-title{display:block;margin:0}.danger-icon{display:block;font-size:1.125rem;color:var(--ion-color-warning-shade, #d4a017);flex-shrink:0}\n"], dependencies: [{ kind: "component", type: CreateOrgModalComponent, selector: "val-create-org-modal", inputs: ["i18nNamespace", "isOpen"], outputs: ["dismissed", "created"] }, { kind: "component", type: CtaCardComponent, selector: "val-cta-card", inputs: ["props"], outputs: ["onAction"] }, { 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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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"] }] }); }
+  `, 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}.org-info-logo{display:flex;justify-content:center;padding:8px 0 16px}.org-logo-img{width:80px;height:80px;border-radius:50%;object-fit:cover;border:2px solid var(--ion-color-light)}: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)}.section-title-danger{display:flex;align-items:center;gap:8px;margin-bottom:12px}.section-title-danger val-title{display:block;margin:0}.danger-icon{display:block;font-size:1.125rem;color:var(--ion-color-warning-shade, #d4a017);flex-shrink:0}\n"], dependencies: [{ kind: "component", type: CreateOrgModalComponent, selector: "val-create-org-modal", inputs: ["i18nNamespace", "isOpen"], outputs: ["dismissed", "created"] }, { kind: "component", type: CtaCardComponent, selector: "val-cta-card", inputs: ["props"], outputs: ["onAction"] }, { 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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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"] }, { kind: "component", type: SectionHeaderComponent, selector: "val-section-header", inputs: ["props"], outputs: ["actionClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OrganizationViewComponent, decorators: [{
             type: Component,
@@ -55253,6 +55376,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         TransferOwnershipModalComponent,
                         MemberImportModalComponent,
                         OrgInfoSheetComponent,
+                        SectionHeaderComponent,
                         SwitchOrgModalComponent,
                     ], template: `
     <div class="page">
@@ -55266,15 +55390,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             content: pageDescription(),
           }"
         />
-        <!-- "Aprender más sobre organizaciones" — bajo el título+subtítulo
-             principal de la vista (abre el explainer org-info-sheet). -->
-        <button class="org-more-info-link" type="button" (click)="onOrgInfo()">
-          {{ tt('orgsMoreInfo') }}
-        </button>
-        <!-- Cambiar de organización activa. -->
-        <div class="org-switch-row">
-          <val-button [props]="switchOrgButtonProps()" (onClick)="onSwitchOrg()" />
-        </div>
+        <!-- Sección "Organización activa" con botón Cambiar a la derecha. -->
+        <val-section-header [props]="switchOrgSectionProps()" (actionClick)="onSwitchOrg()" />
       </header>
 
       @if (resolvedConfig().showInfo) {