valtech-components 4.0.4 → 4.0.6

package/lib/components/atoms/progress-bar/types.d.ts

@@ -16,4 +16,6 @@ export interface ProgressBarMetadata {
     buffer: number;
     type: 'determinate' | 'indeterminate';
     rounded: boolean;
+    /** Accessible label for screen readers (aria-label). Defaults to 'Progreso'. */
+    label?: string;
 }

package/lib/components/organisms/banner/types.d.ts

@@ -18,7 +18,7 @@ import { TitleBlockMetada } from '../../molecules/title-block/types';
 export type BannerMetadata = {
     token?: string;
     image?: string;
-    color: Color;
+    color?: Color;
     bordered: boolean;
     closable: boolean;
     mode: 'row' | 'column' | 'hybrid' | 'center';

package/lib/components/organisms/cookie-banner/types.d.ts

@@ -19,6 +19,8 @@ export type CookieBannerPosition = 'bottom' | 'top';
 export interface CookieBannerMetadata {
     /** Whether the banner is shown. Parent toggles based on `hasDecided`. */
     visible: boolean;
+    /** Accessible label for the dialog (aria-label). Defaults to 'Aviso de cookies'. */
+    ariaLabel?: string;
     /** Where the banner anchors. Default `'bottom'`. */
     position?: CookieBannerPosition;
     /** Short title above the message (optional). */

package/lib/services/page-state/page-state.d.ts

@@ -0,0 +1,74 @@
+/**
+ * createPageState — helper estándar para el patrón loading/error/data de una
+ * página con datos remotos (HTTP o Firestore one-shot).
+ *
+ * Encapsula el boilerplate repetido en cada vista:
+ *  - `loading` signal (true mientras carga o recarga).
+ *  - `loadError` signal (el error crudo o null).
+ *  - `errorState` computed que convierte el error a `EmptyStateMetadata` listo
+ *    para `<val-empty-state>`, reactivo al idioma.
+ *  - `reload()` function que re-ejecuta el `loader` async.
+ *
+ * El caller controla el template; `createPageState` solo maneja el estado:
+ *
+ * ```ts
+ * readonly page = createPageState(
+ *   this.i18n,
+ *   async () => {
+ *     const res = await firstValueFrom(this.svc.getData());
+ *     this.items.set(res.items);
+ *   },
+ *   { errorTitle: () => this.t('errorTitle'), retryLabel: () => this.t('retry') }
+ * );
+ * ```
+ *
+ * Template:
+ * ```html
+ * @if (page.loading()) { <val-skeleton-layout [props]="{ preset: 'list' }" /> }
+ * @else if (page.errorState(); as e) { <val-empty-state [props]="e" /> }
+ * @else { <!-- content --> }
+ * ```
+ *
+ * El helper llama a `reload()` automáticamente al construirse (carga inicial),
+ * igual que el patrón clásico `void this.load()` en el constructor.
+ * Para deshabilitar la carga automática, pasar `{ autoLoad: false }`.
+ *
+ * Para pull-to-refresh usar `connectPageRefresh(() => page.reload())` como siempre.
+ */
+import { EmptyStateMetadata } from '../../components/molecules/empty-state/types';
+import { I18nService } from '../i18n';
+/** Labels i18n para el empty-state de error. Funciones para ser reactivas. */
+export interface PageStateLabels {
+    errorTitle?: () => string;
+    offlineTitle?: () => string;
+    offlineHint?: () => string;
+    retryLabel?: () => string;
+    /** Descripción del error (default: mensaje del backend). */
+    errorDescription?: (err: unknown) => string;
+}
+/** Objeto retornado por `createPageState`. */
+export interface PageState {
+    /** true mientras el loader está en curso. */
+    readonly loading: () => boolean;
+    /** Error crudo del último intento (null si fue exitoso). */
+    readonly loadError: () => unknown | null;
+    /**
+     * Props para `<val-empty-state>` — null si no hay error.
+     * Reactivo al idioma (llama `i18n.lang()` internamente).
+     */
+    readonly errorState: () => EmptyStateMetadata | null;
+    /** Re-ejecuta el loader (sets loading=true, limpia error). */
+    reload(): Promise<void>;
+}
+/**
+ * Crea el estado de carga de una página.
+ *
+ * @param i18n - `I18nService` inyectado en la page (para reactividad al idioma).
+ * @param loader - función async que carga los datos y los siembra en signals
+ *   propias de la page. Si lanza, el error se captura en `loadError`.
+ * @param labels - labels i18n opcionales. Si se omiten usa defaults genéricos.
+ * @param options - `autoLoad`: si false no carga al construirse (default true).
+ */
+export declare function createPageState(i18n: I18nService, loader: () => Promise<void>, labels?: PageStateLabels, options?: {
+    autoLoad?: boolean;
+}): PageState;

package/lib/services/page-state/page-state.i18n.d.ts

@@ -0,0 +1,6 @@
+import { LanguagesContent } from '../i18n/types';
+/**
+ * Defaults i18n embebidos en `createPageState`. Namespace `PageState`.
+ * Auto-registrados la primera vez que se llama al helper.
+ */
+export declare const PAGE_STATE_I18N: LanguagesContent;

package/lib/version.d.ts

@@ -2,4 +2,4 @@
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-export declare const VERSION = "4.0.4";
+export declare const VERSION = "4.0.6";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "4.0.4",
+  "version": "4.0.6",
   "private": false,
   "bin": {
     "valtech-firebase-config": "./src/lib/services/firebase/scripts/generate-sw-config.js"

package/public-api.d.ts

@@ -369,6 +369,7 @@ export * from './lib/services/network-status';
 export * from './lib/components/molecules/network-banner/network-banner.component';
 export * from './lib/services/page-refresh/page-refresh.service';
 export * from './lib/services/refreshable-stream';
+export * from './lib/services/page-state/page-state';
 export * from './lib/services/app-config';
 export * from './lib/services/app-version';
 export * from './lib/services/presets';

package/src/lib/services/firebase/firebase-messaging-sw.js

@@ -0,0 +1,145 @@
+/**
+ * Firebase Messaging Service Worker
+ *
+ * Service Worker estático para Firebase Cloud Messaging.
+ * Carga la configuración dinámicamente desde /firebase-config.js.
+ *
+ * CONFIGURACIÓN:
+ * 1. Crea firebase.config.json con tu configuración de Firebase
+ * 2. Ejecuta: npm run generate:firebase-config
+ *    Esto genera /firebase-config.js con: self.FIREBASE_CONFIG = {...}
+ * 3. Agrega este SW y firebase-config.js a los assets de angular.json
+ *
+ * Ver README.md para documentación completa.
+ */
+
+// Importar Firebase scripts
+importScripts('https://www.gstatic.com/firebasejs/10.7.0/firebase-app-compat.js');
+importScripts('https://www.gstatic.com/firebasejs/10.7.0/firebase-messaging-compat.js');
+
+// Importar configuración desde archivo externo (generado en build)
+// Este archivo define: self.FIREBASE_CONFIG = { ... }
+try {
+  importScripts('/firebase-config.js');
+} catch (e) {
+  console.error('[SW] No se pudo cargar firebase-config.js:', e);
+}
+
+// Verificar que la configuración existe
+if (!self.FIREBASE_CONFIG) {
+  console.error('[SW] FIREBASE_CONFIG no está definido.');
+  console.error('[SW] Ejecuta: npm run generate:firebase-config');
+} else {
+  // Inicializar Firebase
+  firebase.initializeApp(self.FIREBASE_CONFIG);
+
+  // Obtener instancia de messaging
+  const messaging = firebase.messaging();
+
+  /**
+   * Handler para mensajes en background.
+   */
+  messaging.onBackgroundMessage((payload) => {
+    console.log('[SW] Mensaje recibido en background:', payload);
+
+    // Web push usa mensajes data-only (sin bloque `notification`) para que el
+    // navegador NO auto-muestre una notificación duplicada — el SW es el único
+    // que la pinta. Title/body/icon llegan dentro de `data`. Se mantiene el
+    // fallback a `payload.notification` por compatibilidad con mensajes
+    // legacy o nativos que sí traen el bloque.
+    const data = payload.data || {};
+    const notificationTitle =
+      payload.notification?.title || data.title || 'Nueva notificación';
+    const notificationBody = payload.notification?.body || data.body || '';
+    const notificationIcon =
+      payload.notification?.icon || data.icon || '/assets/icon/favicon.ico';
+
+    const notificationOptions = {
+      body: notificationBody,
+      icon: notificationIcon,
+      image: payload.notification?.image,
+      badge: '/assets/icon/badge.png',
+      tag: payload.messageId || data.messageId || 'default',
+      data: {
+        ...data,
+        messageId: payload.messageId || data.messageId,
+        title: notificationTitle,
+        body: notificationBody,
+      },
+      vibrate: [200, 100, 200],
+      requireInteraction: data.require_interaction === 'true',
+    };
+
+    return self.registration.showNotification(notificationTitle, notificationOptions);
+  });
+
+  /**
+   * Handler para clicks en notificaciones.
+   */
+  self.addEventListener('notificationclick', (event) => {
+    console.log('[SW] Click en notificación:', event);
+    event.notification.close();
+
+    const data = event.notification.data || {};
+    let targetUrl = '/';
+
+    if (data.route) {
+      targetUrl = data.route;
+    } else if (data.url) {
+      targetUrl = data.url;
+    }
+
+    if (data.query_params) {
+      const separator = targetUrl.includes('?') ? '&' : '?';
+      targetUrl += separator + data.query_params;
+    }
+
+    const notificationPayload = {
+      type: 'NOTIFICATION_CLICK',
+      notification: {
+        title: data.title,
+        body: data.body,
+        data: data,
+        messageId: data.messageId,
+      },
+    };
+
+    event.waitUntil(
+      clients
+        .matchAll({ type: 'window', includeUncontrolled: true })
+        .then((clientList) => {
+          // Siempre enviar postMessage para que la app pueda reaccionar
+          for (const client of clientList) {
+            client.postMessage(notificationPayload);
+          }
+
+          // Navegar si hay route o url
+          if (targetUrl !== '/') {
+            for (const client of clientList) {
+              if ('navigate' in client) {
+                return client.navigate(targetUrl).then((c) => c?.focus());
+              }
+            }
+            // Si no hay cliente abierto, abrir nueva ventana
+            if (clients.openWindow) {
+              return clients.openWindow(targetUrl);
+            }
+          }
+
+          // Solo hacer focus si no hay navegación
+          for (const client of clientList) {
+            if ('focus' in client) {
+              return client.focus();
+            }
+          }
+          if (clients.openWindow) {
+            return clients.openWindow('/');
+          }
+        })
+    );
+  });
+
+  self.addEventListener('notificationclose', (event) => {
+    console.log('[SW] Notificación cerrada:', event.notification.tag);
+  });
+}