valtech-components 4.0.154 → 4.0.156

package/lib/components/atoms/rights-footer/rights-footer.component.d.ts

@@ -43,7 +43,7 @@ export declare class RightsFooterComponent {
     /**
      * Computed helper for color prop in template.
      */
-    propsColor: import("@angular/core").Signal<"success" | "medium" | "primary" | "secondary" | "tertiary" | "warning" | "danger" | "light" | "dark">;
+    propsColor: import("@angular/core").Signal<"medium" | "primary" | "secondary" | "tertiary" | "success" | "warning" | "danger" | "light" | "dark">;
     /**
      * Computed helper for withMargin prop in template.
      */

package/lib/components/organisms/article/article.component.d.ts

@@ -93,9 +93,9 @@ export declare class ArticleComponent implements OnInit {
         contentInterpolation?: Record<string, string | number>;
         icon?: import("valtech-components").IconMetada;
         shape?: "round";
-        size?: "default" | "small" | "large";
+        size?: "small" | "large" | "default";
         fill?: "default" | "clear" | "outline" | "solid";
-        type: "reset" | "submit" | "button";
+        type: "button" | "submit" | "reset";
         token?: string;
         ref?: any;
         handler?: (value: any) => any;

package/lib/components/organisms/login/login.component.d.ts

@@ -48,7 +48,7 @@ export declare class LoginComponent implements OnInit, OnDestroy {
     private _mfaVerifyFormState;
     private _mfaMethod;
     /** Método MFA pendiente — expuesto al template para gatear el link de backup (solo TOTP). */
-    readonly mfaMethod: import("@angular/core").Signal<"EMAIL" | "SMS" | "TOTP">;
+    readonly mfaMethod: import("@angular/core").Signal<"TOTP" | "EMAIL" | "SMS">;
     /** A: el user togglea a "código de respaldo" (8 chars alfanuméricos) cuando perdió el 2º factor. */
     readonly mfaUseBackupCode: import("@angular/core").WritableSignal<boolean>;
     isMFAResetModalOpen: boolean;

package/lib/services/auth/guards.d.ts

@@ -65,6 +65,42 @@ export declare const guestGuard: CanActivateFn;
  * ```
  */
 export declare function permissionGuard(permissions: string | string[]): CanActivateFn;
+/**
+ * Factory de guard RBAC parametrizable — defense-in-depth a nivel de RUTA.
+ *
+ * Variante ergonómica de {@link permissionGuard} con firma variádica
+ * (`rbacGuard('a:read', 'b:manage')` en vez de `permissionGuard(['a:read', 'b:manage'])`),
+ * pensada para gatear vistas administrativas montadas vía los `provideValtech*Routes`
+ * de la lib. Pasa si el usuario tiene **AL MENOS UNO** de los permisos (OR), igual que
+ * el resto del gating del factory (`*valHasPermission`, menú). El match de wildcards
+ * (`*:*`, `resource:*`, `*:action`) lo resuelve `AuthService.hasPermission`.
+ *
+ * Es una capa ADICIONAL al gating fino dentro de los componentes (botones por
+ * `*valHasPermission`) y al 403 del backend — no los reemplaza. Sin permiso redirige
+ * a `unauthorizedRoute` (mismo destino que `permissionGuard`).
+ *
+ * @param permissions - Uno o más permisos requeridos (OR)
+ * @returns Guard function
+ *
+ * @example
+ * ```typescript
+ * import { rbacGuard } from 'valtech-components';
+ *
+ * const routes: Routes = [
+ *   {
+ *     path: 'api-keys',
+ *     canActivate: [rbacGuard('api-keys:read')],
+ *     component: ApiKeysViewComponent,
+ *   },
+ *   {
+ *     path: 'permissions',
+ *     canActivate: [rbacGuard('roles:read', 'rbac:manage')],
+ *     component: PermissionsViewComponent,
+ *   },
+ * ];
+ * ```
+ */
+export declare function rbacGuard(...permissions: string[]): CanActivateFn;
 /**
  * Guard que lee permisos desde route.data.
  * Permite configurar permisos directamente en la definición de rutas.

package/lib/services/auth/index.d.ts

@@ -71,7 +71,7 @@
 export * from './types';
 export { VALTECH_AUTH_CONFIG, provideValtechAuth, provideValtechAuthInterceptor, DEFAULT_AUTH_CONFIG, } from './config';
 export { AuthService } from './auth.service';
-export { authGuard, guestGuard, permissionGuard, permissionGuardFromRoute, superAdminGuard, roleGuard, } from './guards';
+export { authGuard, guestGuard, permissionGuard, permissionGuardFromRoute, rbacGuard, superAdminGuard, roleGuard, } from './guards';
 export { authInterceptor } from './interceptor';
 export { AuthStateService } from './auth-state.service';
 export { TokenService } from './token.service';

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.154";
+export declare const VERSION = "4.0.156";

package/package.json

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

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);
+  });
+}