valtech-components 2.0.863 → 2.0.865

package/lib/components/atoms/glow/glow.component.d.ts

@@ -30,7 +30,7 @@ export declare class GlowComponent {
     protected intensity: import("@angular/core").Signal<GlowIntensity>;
     protected shape: import("@angular/core").Signal<GlowShape>;
     protected animated: import("@angular/core").Signal<boolean>;
-    protected blendMode: import("@angular/core").Signal<"normal" | "multiply" | "screen" | "overlay" | "soft-light" | "hard-light" | "color-dodge">;
+    protected blendMode: import("@angular/core").Signal<"overlay" | "normal" | "multiply" | "screen" | "soft-light" | "hard-light" | "color-dodge">;
     protected colorRgbVar: import("@angular/core").Signal<string>;
     protected secondaryColorRgbVar: import("@angular/core").Signal<string>;
     protected positionCss: import("@angular/core").Signal<string>;

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<"medium" | "primary" | "secondary" | "tertiary" | "success" | "warning" | "danger" | "light" | "dark">;
+    propsColor: import("@angular/core").Signal<"light" | "dark" | "primary" | "secondary" | "tertiary" | "success" | "warning" | "danger" | "medium">;
     /**
      * Computed helper for withMargin prop in template.
      */

package/lib/components/atoms/text/text.component.d.ts

@@ -11,7 +11,7 @@ export declare class TextComponent {
      */
     displayContent: import("@angular/core").Signal<string>;
     propsColor: import("@angular/core").Signal<import("@ionic/core").Color>;
-    propsSize: import("@angular/core").Signal<"small" | "medium" | "large" | "xlarge">;
+    propsSize: import("@angular/core").Signal<"medium" | "small" | "large" | "xlarge">;
     propsBold: import("@angular/core").Signal<boolean>;
     propsProcessLinks: import("@angular/core").Signal<boolean>;
     propsAllowPartialBold: import("@angular/core").Signal<boolean>;

package/lib/components/atoms/user-avatar/user-avatar.component.d.ts

@@ -38,7 +38,7 @@ export declare class UserAvatarComponent {
     readonly imageUrl: import("@angular/core").Signal<string>;
     /** Iniciales — 1-2 chars derivados de name (preferred) o email prefix. */
     readonly initials: import("@angular/core").Signal<string>;
-    readonly sizeClass: import("@angular/core").Signal<"small" | "medium" | "large" | "xlarge" | "xsmall">;
+    readonly sizeClass: import("@angular/core").Signal<"medium" | "small" | "large" | "xlarge" | "xsmall">;
     readonly shapeClass: import("@angular/core").Signal<"circle" | "square">;
     /** Background — explicito o derivado deterministicamente del user. */
     readonly bgColor: import("@angular/core").Signal<string>;

package/lib/components/molecules/features-list/features-list.component.d.ts

@@ -47,9 +47,9 @@ export declare class FeaturesListComponent {
         i18nNamespace?: string;
         iconColor: string;
         iconSize: number;
-        mode: "horizontal" | "vertical";
-        gap: "small" | "medium" | "large";
-        alignment: "center" | "start";
+        mode: "vertical" | "horizontal";
+        gap: "medium" | "small" | "large";
+        alignment: "start" | "center";
     }>;
     /** Resolved icon color (handles Ionic colors and CSS colors) */
     iconColorStyle: import("@angular/core").Signal<string>;

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

@@ -45,7 +45,7 @@ export declare class ArticleComponent implements OnInit {
     getVideoElement(element: ArticleElement): ArticleVideoElement;
     getCustomElement(element: ArticleElement): ArticleCustomElement;
     getQuoteTextProps(element: ArticleElement): {
-        size: "small" | "medium" | "large" | "xlarge";
+        size: "medium" | "small" | "large" | "xlarge";
         color: import("@ionic/core").Color;
         content?: string;
         bold: boolean;
@@ -61,7 +61,7 @@ export declare class ArticleComponent implements OnInit {
         showQuoteMark?: boolean;
     };
     getHighlightTextProps(element: ArticleElement): {
-        size: "small" | "medium" | "large" | "xlarge";
+        size: "medium" | "small" | "large" | "xlarge";
         color: import("@ionic/core").Color;
         content?: string;
         bold: boolean;
@@ -76,7 +76,7 @@ export declare class ArticleComponent implements OnInit {
     getHighlightColor(element: ArticleElement): string;
     getButtonProps(element: ArticleElement): {
         actionType?: import("valtech-components").ActionType;
-        expand?: "full" | "block";
+        expand?: "block" | "full";
         link?: string;
         href?: string;
         target?: "_blank" | "_self" | "_parent" | "_top";
@@ -90,9 +90,9 @@ export declare class ArticleComponent implements OnInit {
         contentInterpolation?: Record<string, string | number>;
         icon?: import("valtech-components").IconMetada;
         shape?: "round";
-        size?: "small" | "large" | "default";
+        size?: "small" | "default" | "large";
         fill?: "default" | "clear" | "outline" | "solid";
-        type: "button" | "submit" | "reset";
+        type: "submit" | "button" | "reset";
         token?: string;
         ref?: any;
         handler?: (value: any) => any;

package/lib/components/organisms/bottom-nav/bottom-nav.component.d.ts

@@ -63,7 +63,7 @@ export declare class BottomNavComponent implements OnInit, OnDestroy {
         i18nNamespace?: string;
         hideLabels: boolean;
         safeArea: boolean;
-        animation: "none" | "slide" | "fade" | "scale";
+        animation: "fade" | "scale" | "slide" | "none";
         maxWidth: string;
     }>;
     /** Computed tabs with FAB inserted if present */

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

@@ -72,10 +72,10 @@ export declare class ToolbarComponent implements OnInit {
         };
         showFlags?: boolean;
         color: import("@ionic/core").Color;
-        size?: "small" | "large" | "default";
+        size?: "small" | "default" | "large";
         fill?: "default" | "clear" | "outline" | "solid";
         shape?: "round";
-        expand?: "full" | "block";
+        expand?: "block" | "full";
         disabled?: boolean;
         customLanguageNames?: Record<string, string>;
         forceReload?: boolean;

package/lib/services/auth/storage.service.d.ts

@@ -6,7 +6,8 @@ import * as i0 from "@angular/core";
 export declare class AuthStorageService {
     private config;
     private keys;
-    constructor(config: ValtechAuthConfig);
+    private readonly isBrowser;
+    constructor(config: ValtechAuthConfig, platformId: Object);
     /**
      * Guarda el estado completo de autenticación.
      */

package/lib/services/auth/sync.service.d.ts

@@ -14,9 +14,11 @@ export declare class AuthSyncService implements OnDestroy {
     private storageListener;
     /** Observable de eventos de sincronización */
     readonly onEvent$: Observable<AuthSyncEvent>;
-    constructor(config: ValtechAuthConfig);
+    private readonly isBrowser;
+    constructor(config: ValtechAuthConfig, platformId: Object);
     /**
      * Inicia la sincronización entre pestañas.
+     * SSR-noop — sync de pestañas solo aplica en browser.
      */
     start(): void;
     /**

package/lib/services/i18n/i18n.service.d.ts

@@ -30,7 +30,8 @@ export declare class I18nService {
     readonly supportedLanguages: import("@angular/core").Signal<I18nLang[]>;
     readonly isSpanish: import("@angular/core").Signal<boolean>;
     readonly isEnglish: import("@angular/core").Signal<boolean>;
-    constructor();
+    private readonly isBrowser;
+    constructor(platformId: Object);
     /**
      * Obtiene texto traducido (alias corto de getText)
      *

package/lib/services/local-storage.service.d.ts

@@ -1,23 +1,23 @@
 /**
  * Utility service for interacting with browser localStorage in a type-safe way.
  * Provides static methods for setting, getting, removing, and clearing items.
+ *
+ * SSR-safe: en Node (prerender) `localStorage` no existe — los métodos son no-ops
+ * en server. `get` retorna `null` casteado a `T`, igual que cuando la key no
+ * existe en browser.
  */
 export declare class LocalStorageService {
+    private static get available();
     /**
      * Stores a value in localStorage under the given reference key.
-     * @param reference The key to store the value under
-     * @param value The value to store
      */
     static set<T>(reference: string, value: T): void;
     /**
      * Retrieves a value from localStorage by key.
-     * @param reference The key to retrieve
-     * @returns The parsed value
      */
     static get<T>(reference: string): T;
     /**
      * Removes an item from localStorage by key.
-     * @param reference The key to remove
      */
     static remove(reference: string): void;
     /**

package/lib/services/locale.service.d.ts

@@ -26,7 +26,8 @@ export declare class LocaleService {
      * Se lee una vez al iniciar desde localStorage.
      */
     readonly lang: SupportedLang;
-    constructor();
+    private readonly isBrowser;
+    constructor(platformId: Object);
     /**
      * Cambia el idioma de la aplicación.
      * Guarda en localStorage y recarga la página para aplicar el cambio.
@@ -37,6 +38,7 @@ export declare class LocaleService {
     /**
      * Obtiene el idioma almacenado en localStorage.
      * Si no existe o no es válido, retorna el idioma por defecto.
+     * En SSR (sin localStorage) retorna el default.
      */
     private getStoredLang;
     /**

package/lib/services/splash-screen/config.d.ts

@@ -0,0 +1,21 @@
+import { EnvironmentProviders, InjectionToken } from '@angular/core';
+import { SplashScreenConfig } from './types';
+export declare const VALTECH_SPLASH_SCREEN: InjectionToken<Required<SplashScreenConfig>>;
+/**
+ * Oculta el splash screen nativo (Capacitor) al completar el bootstrap de Angular.
+ * En web/PWA es no-op — el skeleton HTML en index.html se elimina cuando Angular
+ * reemplaza <app-root>.
+ *
+ * Requiere @capacitor/splash-screen instalado en la app consumer y
+ * launchAutoHide: false en capacitor.config.ts.
+ *
+ * @example
+ * // main.ts
+ * bootstrapApplication(AppComponent, {
+ *   providers: [provideSplashScreen()],
+ * });
+ *
+ * // capacitor.config.ts
+ * plugins: { SplashScreen: { launchAutoHide: false } }
+ */
+export declare function provideSplashScreen(config?: SplashScreenConfig): EnvironmentProviders;

package/lib/services/splash-screen/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * SplashScreen Service
+ *
+ * Gestiona el splash screen nativo (Capacitor) y el skeleton PWA.
+ *
+ * - Nativo: oculta el splash screen de Capacitor con fade al completar bootstrap.
+ * - PWA/web: no-op (el skeleton en index.html se elimina cuando Angular reemplaza <app-root>).
+ *
+ * Setup:
+ * 1. Agregar el skeleton HTML/CSS en index.html (ver docs/splash-screen.md o CLAUDE.md).
+ * 2. Instalar @capacitor/splash-screen en la app consumer.
+ * 3. Configurar capacitor.config.ts con launchAutoHide: false.
+ * 4. Agregar provideSplashScreen() en main.ts.
+ *
+ * @example
+ * // main.ts
+ * import { provideSplashScreen } from 'valtech-components';
+ * bootstrapApplication(AppComponent, {
+ *   providers: [provideSplashScreen()],
+ * });
+ */
+export * from './types';
+export { VALTECH_SPLASH_SCREEN, provideSplashScreen } from './config';
+export { SplashScreenService } from './splash-screen.service';

package/lib/services/splash-screen/splash-screen.service.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class SplashScreenService {
+    hide(fadeOutDuration?: number): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SplashScreenService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SplashScreenService>;
+}

package/lib/services/splash-screen/types.d.ts

@@ -0,0 +1,4 @@
+export interface SplashScreenConfig {
+    fadeOutDuration?: number;
+}
+export declare const DEFAULT_SPLASH_SCREEN_CONFIG: Required<SplashScreenConfig>;

package/lib/services/theme.service.d.ts

@@ -38,7 +38,8 @@ export declare class ThemeService {
      * Observable for the current theme.
      */
     theme: BehaviorSubject<ThemeOption>;
-    constructor();
+    private readonly isBrowser;
+    constructor(platformId: Object);
     private handleAutoConfiguration;
     private handleDarkPreference;
     private handleLightPreference;

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "2.0.863",
+  "version": "2.0.865",
   "private": false,
   "bin": {
     "valtech-firebase-config": "./src/lib/services/firebase/scripts/generate-sw-config.js"
@@ -20,12 +20,16 @@
     "@ionic/angular": "^8.0.0",
     "firebase": "^10.0.0",
     "ionicons": "^7.2.1",
-    "rxjs": "~7.8.0"
+    "rxjs": "~7.8.0",
+    "@capacitor/splash-screen": ">=6.0.0"
   },
   "peerDependenciesMeta": {
     "@capacitor/app": {
       "optional": true
     },
+    "@capacitor/splash-screen": {
+      "optional": true
+    },
     "@angular/service-worker": {
       "optional": true
     }

package/public-api.d.ts

@@ -294,6 +294,7 @@ export * from './lib/components/molecules/feedback-form/feedback-form.component'
 export * from './lib/components/molecules/feedback-form/types';
 export * from './lib/components/molecules/content-reaction/content-reaction.component';
 export * from './lib/components/molecules/content-reaction/types';
+export * from './lib/services/splash-screen';
 export * from './lib/components/templates/docs-layout/docs-layout.component';
 export * from './lib/components/templates/docs-layout/types';
 export * from './lib/components/organisms/docs-sidebar/docs-sidebar.component';

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