valtech-components 4.0.141 → 4.0.143

package/lib/components/molecules/empty-state/empty-state.component.d.ts

@@ -30,6 +30,8 @@ export declare class EmptyStateComponent {
     protected variantClass: import("@angular/core").Signal<EmptyStateVariant>;
     /** Icono final — custom si se pasó, default de la variante si no. */
     protected iconName: import("@angular/core").Signal<string>;
+    /** Emoji opcional — si está, se renderiza en lugar del icono Ionicons. */
+    protected emoji: import("@angular/core").Signal<string>;
     /** Tamaño en px. Default 64. */
     protected iconSize: import("@angular/core").Signal<number>;
     /**

package/lib/components/molecules/empty-state/factory.d.ts

@@ -28,6 +28,14 @@ export interface CreateErrorStateOpts {
     onRetry?: () => void | Promise<void>;
     /** `true` mientras el retry está corriendo — el botón pasa a WORKING. */
     retrying?: boolean;
+    /**
+     * Emoji a mostrar en lugar del icono (ej. `'🥹'`). Un solo string aplica a
+     * ambas variantes; el objeto elige según `isNetwork` (offline vs error).
+     */
+    emoji?: string | {
+        offline: string;
+        error: string;
+    };
 }
 /**
  * Convierte un error capturado en `EmptyStateMetadata` listo para

package/lib/components/molecules/empty-state/types.d.ts

@@ -51,6 +51,13 @@ export interface EmptyStateMetadata {
      * en el componente consumidor (Ionic standalone no auto-registra).
      */
     icon?: string;
+    /**
+     * Emoji a mostrar en lugar del icono Ionicons (ej. `'🥹'`). Si se especifica,
+     * tiene prioridad sobre `icon`/el default de la variante — se renderiza como
+     * texto (no requiere registrar nada en Ionic). Útil para dar un tono más
+     * humano a un estado de error/vacío.
+     */
+    emoji?: string;
     /** Tamaño del icono en píxeles. Default `64`. */
     iconSize?: number;
     /** Acción CTA opcional. Si se omite, no se muestra botón. */

package/lib/components/organisms/member-detail-modal/member-detail-modal.component.d.ts

@@ -1,6 +1,7 @@
 import { OnDestroy, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { ButtonMetadata, InputMetadata } from '../../types';
+import { PermissionScopeGroup } from '../../../services/org/permission-catalog.service';
 import { MemberDetail, OrgRoleWithPermissions } from './types';
 import * as i0 from "@angular/core";
 /**
@@ -28,6 +29,16 @@ export declare class MemberDetailModalComponent implements OnInit, OnDestroy {
     private catalog;
     /** Labeler de permisos con la SSOT del backend (catálogo). Se llena al cargar. */
     private readonly permLabeler;
+    /** Catálogo del backend (define el alcance de cada recurso para agrupar). */
+    private readonly catalogResp;
+    /**
+     * `true` mientras el catálogo aún no llegó (y hay `orgId` para pedirlo, sin
+     * error). Mientras tanto, la sección de permisos muestra skeleton — evita el
+     * parpadeo inglés→español del fallback humanizado antes de tener los labels es.
+     * Sin `orgId` el catálogo nunca se pide → `false` desde el arranque (se renderiza
+     * con el fallback, sin skeleton infinito).
+     */
+    readonly permsLoading: import("@angular/core").WritableSignal<boolean>;
     /** Inyectado por `ModalService.open` — referencia para cerrar desde dentro. */
     _modalRef?: {
         dismiss: (data?: unknown, role?: string) => void;
@@ -54,10 +65,20 @@ export declare class MemberDetailModalComponent implements OnInit, OnDestroy {
     readonly subtitle: import("@angular/core").Signal<string>;
     readonly currentRoleLabel: import("@angular/core").Signal<string>;
     readonly permissionsForCurrentRole: import("@angular/core").Signal<string[]>;
+    /**
+     * Permisos del rol actual agrupados por alcance (app actual / organización /
+     * otras apps) con sus labels ya resueltos — mismo patrón que `val-permissions-view`.
+     * Si el catálogo no cargó (sin `orgId` o falló), agrupa con un catálogo vacío:
+     * sin scope no se pueden clasificar los recursos → cae a un único grupo `org`
+     * con el labeler humanizado, manteniendo los chips visibles.
+     */
+    readonly permissionGroups: import("@angular/core").Signal<PermissionScopeGroup[]>;
     readonly roleSelectProps: import("@angular/core").Signal<Partial<InputMetadata>>;
     readonly removeButtonProps: import("@angular/core").Signal<Partial<ButtonMetadata>>;
     constructor();
     ngOnInit(): void;
+    /** Resuelve el nombre legible de una app por su appId (key `app_{id}`). */
+    appLabel(appId: string): string;
     permissionLabel(perm: string): string;
     private onChangeRole;
     onRemove(): Promise<void>;

package/lib/components/organisms/permissions-view/permissions-view.component.d.ts

@@ -1,22 +1,14 @@
 import { OnInit } from '@angular/core';
 import { ButtonMetadata } from '../../types';
+import { PermissionScopeGroup } from '../../../services/org/permission-catalog.service';
 import { PermissionsViewConfig } from './types';
 import * as i0 from "@angular/core";
-interface PermGroupView {
-    key: string;
-    label: string;
-    /** Alcance del grupo: 'app' (app actual) · 'org' (general) · 'other' (otra app). */
-    scope: 'app' | 'org' | 'other';
-    /** AppId de la otra app (solo cuando scope === 'other'). */
-    appId?: string;
-    perms: string[];
-}
 interface RoleView {
     id: string;
     name: string;
     description?: string;
     isSystem: boolean;
-    groups: PermGroupView[];
+    groups: PermissionScopeGroup[];
     hasPerms: boolean;
 }
 /**

package/lib/services/org/permission-catalog.service.d.ts

@@ -55,3 +55,46 @@ export type PermissionLabeler = (perm: string) => string;
 export declare function createPermissionLabeler(catalog: Pick<PermissionCatalogResponse, 'permissions' | 'actionLabels'>, locale: string, opts?: {
     allLabel?: string;
 }): PermissionLabeler;
+/** Alcance de un grupo de permisos: app actual · organización · otra app. */
+export type PermissionGroupScope = 'app' | 'org' | 'other';
+/** Grupo de permisos agrupados por alcance, con sus labels ya resueltos. */
+export interface PermissionScopeGroup {
+    /** Clave estable de track (`app` · `org` · `other:{appId}`). */
+    key: string;
+    /** Label del badge de alcance (ya traducido). */
+    label: string;
+    scope: PermissionGroupScope;
+    /** AppId de la otra app (solo cuando `scope === 'other'`). */
+    appId?: string;
+    /** Labels de cada permiso del grupo (ya resueltos por el labeler). */
+    perms: string[];
+}
+/**
+ * Etiquetas i18n de los grupos de alcance + resolvedor de nombre de app, que el
+ * consumer pasa ya traducidos (la lib no resuelve i18n por su cuenta acá).
+ */
+export interface PermissionGroupLabels {
+    /** Label del grupo "Permisos de la app". */
+    app: string;
+    /** Label del grupo "Permisos de la organización". */
+    org: string;
+    /** Prefijo del grupo de otra app (se concatena con el nombre de la app). */
+    other: string;
+    /** Resuelve el nombre legible de una app por su appId. */
+    appLabel: (appId: string) => string;
+}
+/**
+ * Agrupa una lista de permisos (`resource:action`) por alcance — app actual /
+ * organización / otras apps — usando el catálogo del backend como SSOT del scope
+ * (`PermissionResource.scope` + `appId`). Cada permiso se etiqueta con `labeler`.
+ *
+ * Reutilizado por `val-permissions-view` y `val-member-detail-modal` para que
+ * ambos muestren los chips agrupados y tintados de forma idéntica. Función pura
+ * (sin Angular DI) — el consumer pasa los labels i18n ya resueltos.
+ *
+ * - Recursos ausentes del catálogo o con `scope === 'internal'` se descartan
+ *   (defensa en profundidad junto al filtro del backend, ADR-024).
+ * - `scope === 'app'` con `appId === currentAppId` → grupo `app`; otro appId →
+ *   grupo `other:{appId}`. `scope === 'org'` → grupo `org`.
+ */
+export declare function groupPermissionsByScope(permissions: string[], catalog: Pick<PermissionCatalogResponse, 'permissions'>, currentAppId: string, labeler: PermissionLabeler, labels: PermissionGroupLabels): PermissionScopeGroup[];

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

package/package.json

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

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

@@ -1,145 +0,0 @@
-/**
- * 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);
-  });
-}