valtech-components 4.0.254 → 4.0.255

package/fesm2022/valtech-components.mjs

@@ -12,7 +12,7 @@ import { provideAnalytics, getAnalytics, Analytics, logEvent, setUserId, setUser
 import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
 import * as i1 from '@angular/fire/auth';
 import { provideAuth, getAuth, connectAuthEmulator, authState, signInWithCustomToken, signOut } from '@angular/fire/auth';
-import { provideMessaging, getMessaging, getToken, deleteToken, onMessage } from '@angular/fire/messaging';
+import { provideMessaging, getMessaging } from '@angular/fire/messaging';
 import * as i1$2 from '@angular/fire/storage';
 import { provideStorage, getStorage, connectStorageEmulator, ref, uploadBytesResumable, getDownloadURL, getMetadata, deleteObject, listAll } from '@angular/fire/storage';
 import { takeUntilDestroyed, toSignal, toObservable } from '@angular/core/rxjs-interop';
@@ -20,7 +20,7 @@ import * as i1$4 from '@angular/router';
 import { Router, NavigationEnd, RouterLink, ActivatedRoute, RouterOutlet, RouterLinkActive, RouterModule } from '@angular/router';
 import * as i2 from '@ionic/angular';
 import { IonicModule, ToastController, NavController } from '@ionic/angular';
-import { isSupported, getMessaging as getMessaging$1 } from 'firebase/messaging';
+import { isSupported, getMessaging as getMessaging$1, getToken, deleteToken, onMessage } from 'firebase/messaging';
 import { getApps, getApp, initializeApp as initializeApp$1 } from 'firebase/app';
 import * as i2$1 from '@ionic/angular/standalone';
 import { AlertController, IonAvatar, IonCard, IonIcon, IonButton, IonSpinner, IonText, IonModal, IonHeader, IonToolbar, IonContent, IonButtons, IonTitle, IonProgressBar, IonSkeletonText, IonFab, IonFabButton, IonFabList, IonLabel, IonCardContent, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCheckbox, IonRadio, IonRadioGroup, IonTextarea, IonDatetime, IonSelect, IonSelectOption, IonPopover, IonList, IonItem, IonInput, IonChip, IonRange, IonSearchbar, IonSegment, IonSegmentButton, IonToggle, IonRippleEffect, IonAccordion, IonAccordionGroup, IonTabBar, IonTabButton, IonBadge, IonBreadcrumb, IonBreadcrumbs, IonInfiniteScroll, IonInfiniteScrollContent, IonNote, IonDatetimeButton, ToastController as ToastController$1, IonCol, IonRow, IonRefresher, IonRefresherContent, IonMenuButton, IonFooter, IonListHeader, IonGrid, MenuController, IonMenu, IonMenuToggle, IonSplitPane } from '@ionic/angular/standalone';
@@ -57,7 +57,7 @@ import fixWebmDuration from 'fix-webm-duration';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '4.0.254';
+const VERSION = '4.0.255';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -719,9 +719,12 @@ function provideValtechFirebase(config) {
     // Messaging (FCM) - solo si está explícitamente habilitado y estamos en browser.
     // Requiere Service Worker + Notifications API → skip total en SSR/Node.
     if (config.enableMessaging && isBrowser) {
-        // Pre-registrar SW custom antes de que Firebase lo intente
+        // Pre-registrar SW custom antes de que Firebase lo intente. Usamos un
+        // scope dedicado para no competir con Angular `ngsw-worker.js` en `/`.
         if ('serviceWorker' in navigator) {
-            navigator.serviceWorker.register('/firebase-messaging-sw.js').catch(console.error);
+            navigator.serviceWorker
+                .register('/firebase-messaging-sw.js', { scope: '/firebase-cloud-messaging-push-scope' })
+                .catch(console.error);
         }
         providers.push(provideMessaging(() => getMessaging()));
     }
@@ -5399,6 +5402,8 @@ class MessagingService {
          * Es un *optimistic hint* — la verdad la confirma el siguiente `getToken()`.
          */
         this.TOKEN_STORAGE_KEY = 'valtech_fcm_token';
+        this.FCM_SW_URL = '/firebase-messaging-sw.js';
+        this.FCM_SW_SCOPE = '/firebase-cloud-messaging-push-scope';
         /**
          * Timeout (ms) para `navigator.serviceWorker.ready` dentro de `getToken()`.
          *
@@ -5407,6 +5412,14 @@ class MessagingService {
          * de colgarse indefinidamente.
          */
         this.SW_READY_TIMEOUT_MS = 10_000;
+        /**
+         * Timeout duro para la llamada de Firebase `getToken()`.
+         *
+         * En Chromium puede quedar pendiente sin resolver si la registración FCM no
+         * responde (VAPID/proyecto/API/red). Sin este timeout, el watchdog externo
+         * fuerza un reload que no corrige la causa y deja un diagnóstico pobre.
+         */
+        this.FCM_GET_TOKEN_TIMEOUT_MS = 15_000;
         /**
          * Timeout (ms) del watchdog de `enable()` antes de auto-recargar la página.
          *
@@ -5415,10 +5428,10 @@ class MessagingService {
          * cold load. El timeout de `getToken()` (SW_READY_TIMEOUT_MS) no cubre eso;
          * por eso `enable()` envuelve el flujo completo en este watchdog.
          *
-         * Un flujo exitoso real llega a token+device en ~4s; 15s es holgado y no
+         * Un flujo exitoso real llega a token+device en ~4s; 25s es holgado y no
          * atrapa un éxito lento.
          */
-        this.ENABLE_WATCHDOG_MS = 15_000;
+        this.ENABLE_WATCHDOG_MS = 25_000;
         /**
          * Key de sessionStorage — garantiza un solo auto-reload por sesión. Si el
          * flujo se cuelga una 2ª vez tras el reload, NO se recarga de nuevo (anti-loop).
@@ -5444,8 +5457,8 @@ class MessagingService {
         try {
             const app = getApps().length > 0 ? getApp() : initializeApp$1(this.config.firebase);
             // Cast a Messaging (token de AngularFire) — el tipo subyacente del SDK
-            // es el mismo. Las funciones getToken/deleteToken/onMessage de
-            // @angular/fire/messaging son re-exports del SDK y aceptan esta instance.
+            // es el mismo. Las funciones getToken/deleteToken/onMessage se llaman
+            // desde `firebase/messaging` directo para evitar wrappers de Zone.
             return getMessaging$1(app);
         }
         catch (err) {
@@ -5763,10 +5776,10 @@ class MessagingService {
             // queda listo en SW_READY_TIMEOUT_MS, esta promesa rechaza limpio.
             await this.waitForServiceWorkerReady();
             console.log('[Messaging] SW ready, calling Firebase getToken()...');
-            const token = await getToken(messaging, {
+            const token = await this.withTimeout(getToken(messaging, {
                 vapidKey,
                 serviceWorkerRegistration: registration,
-            });
+            }), this.FCM_GET_TOKEN_TIMEOUT_MS, `[Messaging] Firebase getToken no respondió en ${this.FCM_GET_TOKEN_TIMEOUT_MS / 1000}s`);
             console.log('[Messaging] Firebase getToken returned:', token ? `${token.slice(0, 16)}…` : 'null/empty');
             this.stateSubject.next({
                 ...this.stateSubject.value,
@@ -5787,18 +5800,28 @@ class MessagingService {
     /**
      * Resuelve el `ServiceWorkerRegistration` del SW de FCM.
      *
-     * El SW `/firebase-messaging-sw.js` ya se registra una vez en el bootstrap de
-     * la app (`config.ts`). Reutilizamos ese registro en lugar de re-registrarlo
+     * El SW de FCM ya se registra una vez en el bootstrap de la app (`config.ts`)
+     * con un scope dedicado. Reutilizamos ese registro en lugar de re-registrarlo
      * en cada `getToken()` — re-registrar repetidamente dispara revalidaciones del
      * SW en iOS PWA. Solo registramos como fallback si todavía no existe.
      */
     async resolveServiceWorkerRegistration() {
-        const existing = await navigator.serviceWorker.getRegistration('/firebase-messaging-sw.js');
+        const existing = await this.findFcmServiceWorkerRegistration();
         if (existing) {
+            console.log('[Messaging] SW registration resolved:', existing.scope, existing.active?.scriptURL || existing.installing?.scriptURL || existing.waiting?.scriptURL);
             return existing;
         }
         console.warn('[Messaging] SW not registered yet, registering as fallback');
-        return navigator.serviceWorker.register('/firebase-messaging-sw.js');
+        const registration = await navigator.serviceWorker.register(this.FCM_SW_URL, {
+            scope: this.FCM_SW_SCOPE,
+        });
+        console.log('[Messaging] SW registration created:', registration.scope, registration.active?.scriptURL || registration.installing?.scriptURL || registration.waiting?.scriptURL);
+        return registration;
+    }
+    async findFcmServiceWorkerRegistration() {
+        const expectedScope = new URL(this.FCM_SW_SCOPE, window.location.origin).href;
+        const registrations = await navigator.serviceWorker.getRegistrations();
+        return registrations.find(registration => registration.scope === expectedScope);
     }
     /**
      * Espera a que el Service Worker quede activo (`navigator.serviceWorker.ready`)
@@ -5814,17 +5837,35 @@ class MessagingService {
      * El timer se limpia en ambas ramas para no dejar timers colgando.
      */
     waitForServiceWorkerReady() {
+        return this.withTimeout(this.findFcmServiceWorkerRegistration().then(registration => {
+            if (!registration) {
+                throw new Error('[Messaging] service worker FCM no registrado');
+            }
+            if (registration.active) {
+                return undefined;
+            }
+            return new Promise((resolve, reject) => {
+                const worker = registration.installing || registration.waiting;
+                if (!worker) {
+                    reject(new Error('[Messaging] service worker FCM sin worker activo'));
+                    return;
+                }
+                worker.addEventListener('statechange', () => {
+                    if (worker.state === 'activated')
+                        resolve();
+                    if (worker.state === 'redundant') {
+                        reject(new Error('[Messaging] service worker FCM quedó redundante'));
+                    }
+                });
+            });
+        }), this.SW_READY_TIMEOUT_MS, `[Messaging] service worker no quedó listo en ${this.SW_READY_TIMEOUT_MS / 1000}s`);
+    }
+    withTimeout(promise, ms, message) {
         let timer;
-        const ready = navigator.serviceWorker.ready.then(() => {
-            if (timer !== undefined)
-                clearTimeout(timer);
-        });
         const timeout = new Promise((_, reject) => {
-            timer = setTimeout(() => {
-                reject(new Error(`[Messaging] service worker no quedó listo en ${this.SW_READY_TIMEOUT_MS / 1000}s`));
-            }, this.SW_READY_TIMEOUT_MS);
+            timer = setTimeout(() => reject(new Error(message)), ms);
         });
-        return Promise.race([ready, timeout]).finally(() => {
+        return Promise.race([promise, timeout]).finally(() => {
             if (timer !== undefined)
                 clearTimeout(timer);
         });
@@ -47001,12 +47042,8 @@ class PreferencesViewComponent {
         this.fontSizeTitle = computed(() => this.t('fontSizeTitle'));
         this.fontSizeHint = computed(() => this.t('fontSizeHint'));
         this.langProps = computed(() => ({
-            currentLanguage: this.prefs.language(),
             availableLanguages: this.resolvedConfig().supportedLanguages,
-            showLabel: false,
-            disabled: this.saving(),
-            expand: 'block',
-            fill: 'outline',
+            showFlags: false,
         }));
         this.themePickerProps = computed(() => ({
             selectedValue: this.prefs.theme(),
@@ -47137,7 +47174,7 @@ class PreferencesViewComponent {
                 content: langHint(),
               }"
             />
-            <val-language-selector [props]="langProps()" (languageChange)="onLanguageChange($event)" />
+            <val-language-selector-v2 [props]="langProps()" (languageChange)="onLanguageChange($event)" />
           </div>
         </section>
       }
@@ -47166,14 +47203,14 @@ class PreferencesViewComponent {
         </section>
       }
     </div>
-  `, isInline: true, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.settings-section{padding:16px 0}.settings-section+.settings-section{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.section-body{display:flex;flex-direction:column;gap:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PopoverSelectorComponent, selector: "val-popover-selector", inputs: ["props"], outputs: ["selectionChange"] }, { kind: "component", type: LanguageSelectorComponent, selector: "val-language-selector", inputs: ["props"], outputs: ["languageChange"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }] }); }
+  `, isInline: true, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.settings-section{padding:16px 0}.settings-section+.settings-section{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.section-body{display:flex;flex-direction:column;gap:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PopoverSelectorComponent, selector: "val-popover-selector", inputs: ["props"], outputs: ["selectionChange"] }, { kind: "component", type: LanguageSelectorV2Component, selector: "val-language-selector-v2", inputs: ["props"], outputs: ["languageChange"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PreferencesViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'val-preferences-view', standalone: true, imports: [
                         CommonModule,
                         PopoverSelectorComponent,
-                        LanguageSelectorComponent,
+                        LanguageSelectorV2Component,
                         DisplayComponent,
                         TitleComponent,
                         TextComponent,
@@ -47234,7 +47271,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 content: langHint(),
               }"
             />
-            <val-language-selector [props]="langProps()" (languageChange)="onLanguageChange($event)" />
+            <val-language-selector-v2 [props]="langProps()" (languageChange)="onLanguageChange($event)" />
           </div>
         </section>
       }