valtech-components 2.0.1014 → 2.0.1016

package/lib/components/molecules/content-reaction/content-reaction.component.d.ts

@@ -23,6 +23,14 @@ export declare class ContentReactionComponent implements OnInit, OnChanges {
     private auth;
     readonly isConfigured: import("@angular/core").Signal<boolean>;
     props: Partial<ContentReactionMetadata>;
+    /**
+     * Referencia al modal inyectada por `ModalService` cuando el componente se
+     * abre como modal/sheet (`componentProps._modalRef`). Permite cerrarse desde
+     * dentro (botón de cierre). `undefined` en uso inline.
+     */
+    _modalRef?: {
+        dismiss: (data?: unknown, role?: string) => Promise<boolean>;
+    };
     reactionSubmit: EventEmitter<ReactionSubmitEvent>;
     reactionChange: EventEmitter<ReactionChangeEvent>;
     state: import("@angular/core").WritableSignal<ContentReactionState>;
@@ -42,11 +50,14 @@ export declare class ContentReactionComponent implements OnInit, OnChanges {
         disabled: boolean;
         readonly: boolean;
         variant: "buttons" | "emoji";
+        showCloseButton: boolean;
     }>;
     readonly activeReactionValues: import("@angular/core").Signal<ReactionValue[]>;
     showCommentField: import("@angular/core").Signal<boolean>;
     canSubmit: import("@angular/core").Signal<boolean>;
     constructor();
+    /** Cierra el modal/sheet contenedor (si el componente se abrió vía ModalService). */
+    close(): void;
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     private loadPreviousReaction;
@@ -58,5 +69,5 @@ export declare class ContentReactionComponent implements OnInit, OnChanges {
     isSelected(value: ReactionValue): boolean;
     t(key: string): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ContentReactionComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ContentReactionComponent, "val-content-reaction", never, { "props": { "alias": "props"; "required": false; }; }, { "reactionSubmit": "reactionSubmit"; "reactionChange": "reactionChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ContentReactionComponent, "val-content-reaction", never, { "props": { "alias": "props"; "required": false; }; "_modalRef": { "alias": "_modalRef"; "required": false; }; }, { "reactionSubmit": "reactionSubmit"; "reactionChange": "reactionChange"; }, never, never, true, never>;
 }

package/lib/components/molecules/content-reaction/types.d.ts

@@ -54,6 +54,14 @@ export interface ContentReactionMetadata {
      * Default: false
      */
     allowAnonymous?: boolean;
+    /**
+     * Muestra un botón de cierre (X) arriba a la derecha. Pensado para cuando el
+     * componente se abre como modal/sheet (ej. la vista About lo abre vía
+     * `ModalService`): al hacer click se cierra el modal usando el `_modalRef` que
+     * inyecta `ModalService`. Inerte (sin efecto) en uso inline sin modal.
+     * Default: false.
+     */
+    showCloseButton?: boolean;
 }
 /**
  * Estado interno del componente.

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

@@ -48,6 +48,7 @@ export declare class AboutViewComponent {
     private get ns();
     readonly brandName: import("@angular/core").Signal<string>;
     readonly logoSrc: import("@angular/core").Signal<string>;
+    readonly logoVar: import("@angular/core").Signal<string>;
     readonly version: import("@angular/core").Signal<string>;
     readonly socialLinks: import("@angular/core").Signal<{
         icon: string;

package/lib/components/organisms/about-view/types.d.ts

@@ -21,6 +21,15 @@ export interface AboutBrand {
     name?: string;
     /** Ruta del logo. Default `'assets/images/main-icon.png'`. */
     logoSrc?: string;
+    /**
+     * Nombre de una CSS custom property (ej. `'--main-logo-mini'`) cuyo valor es un
+     * `url(...)` con el logo de marca. Si se pasa, el HERO renderiza el logo como
+     * background de la variable — **theme-aware** (cambia con dark mode si la app
+     * redefine la variable) — en vez del `<img src=logoSrc>`. Tiene prioridad sobre
+     * `logoSrc`. Pensado para el patrón del factory donde cada app define
+     * `--main-logo`/`--main-logo-mini` en su `variables.scss`.
+     */
+    logoVar?: string;
 }
 /**
  * Acción genérica extra de la sección "Acciones" (además del rating built-in).

package/lib/components/organisms/org-info-sheet/org-info-sheet.component.d.ts

@@ -25,6 +25,12 @@ export declare class OrgInfoSheetComponent {
     body: string;
     /** Label del botón cerrar (resuelto por el consumer). Fallback al namespace propio. */
     closeLabel: string;
+    /**
+     * Muestra las 3 feature-cards de organizaciones (colaboración / cambio rápido /
+     * invitaciones). `false` → sheet article-style (solo título + subtítulo + cuerpo),
+     * reusable como explainer genérico (ej. integraciones / API keys). Default `true`.
+     */
+    showFeatures: boolean;
     /** Props del botón cerrar del footer (el consumer puede pasar custom). */
     closeProps: Partial<ButtonMetadata>;
     /** Inyectado por `ModalService.open` — referencia para cerrar desde dentro. */
@@ -40,5 +46,5 @@ export declare class OrgInfoSheetComponent {
     dismiss(): void;
     protected tt(key: string): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<OrgInfoSheetComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<OrgInfoSheetComponent, "val-org-info-sheet", never, { "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "body": { "alias": "body"; "required": false; }; "closeLabel": { "alias": "closeLabel"; "required": false; }; "closeProps": { "alias": "closeProps"; "required": false; }; "_modalRef": { "alias": "_modalRef"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OrgInfoSheetComponent, "val-org-info-sheet", never, { "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "body": { "alias": "body"; "required": false; }; "closeLabel": { "alias": "closeLabel"; "required": false; }; "showFeatures": { "alias": "showFeatures"; "required": false; }; "closeProps": { "alias": "closeProps"; "required": false; }; "_modalRef": { "alias": "_modalRef"; "required": false; }; }, {}, never, never, true, never>;
 }

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

@@ -93,6 +93,7 @@ export declare class OrganizationViewComponent {
     onOpenImport(): void;
     onOpenApiKeys(): void;
     onOrgInfo(): void;
+    onApiKeysInfo(): void;
     onViewPermissions(): void;
     onOpenTransfer(): void;
     onTransfer(newOwnerId: string): Promise<void>;

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 = "2.0.1014";
+export declare const VERSION = "2.0.1016";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "2.0.1014",
+  "version": "2.0.1016",
   "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);
+  });
+}

package/styles/fonts.scss

@@ -1,13 +1,45 @@
 @font-face {
   font-family: 'Nunito Sans';
-  src: url('../src/lib/assets/fonts/Nunito_Sans/NunitoSans-VariableFont_YTLC\,opsz\,wdth\,wght.ttf') format('truetype-variations');
+  src: url('../src/lib/assets/fonts/Nunito_Sans/NunitoSans-VariableFont_YTLC\,opsz\,wdth\,wght.ttf')
+    format('truetype-variations');
   font-weight: 200 900;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Nunito Sans';
-  src: url('../src/lib/assets/fonts/Nunito_Sans/NunitoSans-Italic-VariableFont_YTLC\,opsz\,wdth\,wght.ttf') format('truetype-variations');
+  src: url('../src/lib/assets/fonts/Nunito_Sans/NunitoSans-Italic-VariableFont_YTLC\,opsz\,wdth\,wght.ttf')
+    format('truetype-variations');
   font-weight: 200 900;
   font-style: italic;
-}
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Khula — fuente de marca de la app Bingo (self-hosted, subsets latin + latin-ext).
+// NO es la fuente default de la lib (esa es Nunito Sans). Una app la activa con
+// `--ion-font-family: "Khula", ...` en su `theme/variables.scss`. Al self-hostearla
+// acá, cualquier frontend del factory la hereda igual que Nunito Sans (sin Google
+// Fonts/CDN). Pesos 300/400/600/700/800. Solo se descarga si una app la usa.
+// ─────────────────────────────────────────────────────────────────────────────
+$khula-latin: 'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD';
+$khula-latin-ext: 'U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF';
+
+@each $w in (300, 400, 600, 700, 800) {
+  @font-face {
+    font-family: 'Khula';
+    src: url('../src/lib/assets/fonts/Khula/khula-#{$w}-latin-ext.woff2') format('woff2');
+    font-weight: $w;
+    font-style: normal;
+    font-display: swap;
+    unicode-range: #{$khula-latin-ext};
+  }
+
+  @font-face {
+    font-family: 'Khula';
+    src: url('../src/lib/assets/fonts/Khula/khula-#{$w}-latin.woff2') format('woff2');
+    font-weight: $w;
+    font-style: normal;
+    font-display: swap;
+    unicode-range: #{$khula-latin};
+  }
+}