valtech-components 2.0.795 → 2.0.797

package/src/lib/services/ads/ads-loader.service.ts

@@ -1,133 +0,0 @@
-/**
- * Ads Loader Service
- *
- * Maneja la carga lazy del script de Google AdSense.
- * Solo carga el script cuando se necesita el primer ad.
- */
-
-import { Injectable, Inject, PLATFORM_ID, signal } from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
-
-import { VALTECH_ADS_CONFIG } from './config';
-import { ValtechAdsConfig } from './types';
-
-/** URL del script AdSense */
-const ADSENSE_SCRIPT_URL = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
-
-/**
- * Servicio para cargar el script de Google AdSense.
- *
- * Implementa lazy loading: el script solo se carga cuando
- * se solicita renderizar el primer ad slot.
- */
-@Injectable({ providedIn: 'root' })
-export class AdsLoaderService {
-  private readonly _isLoading = signal<boolean>(false);
-  private readonly _isLoaded = signal<boolean>(false);
-  private readonly _error = signal<Error | null>(null);
-
-  /** Indica si el script esta cargando */
-  readonly isLoading = this._isLoading.asReadonly();
-
-  /** Indica si el script esta cargado */
-  readonly isLoaded = this._isLoaded.asReadonly();
-
-  /** Error de carga (si existe) */
-  readonly error = this._error.asReadonly();
-
-  private loadPromise: Promise<boolean> | null = null;
-
-  constructor(
-    @Inject(VALTECH_ADS_CONFIG) private config: ValtechAdsConfig,
-    @Inject(PLATFORM_ID) private platformId: Object
-  ) {}
-
-  /**
-   * Carga el script AdSense de forma lazy.
-   * Retorna true si se cargo correctamente, false si fallo.
-   *
-   * @returns Promise<boolean>
-   */
-  loadAdSense(): Promise<boolean> {
-    // SSR check
-    if (!isPlatformBrowser(this.platformId)) {
-      return Promise.resolve(false);
-    }
-
-    // Ya cargado
-    if (this._isLoaded()) {
-      return Promise.resolve(true);
-    }
-
-    // Ya hay una carga en progreso
-    if (this.loadPromise) {
-      return this.loadPromise;
-    }
-
-    this._isLoading.set(true);
-    this._error.set(null);
-
-    this.loadPromise = new Promise<boolean>((resolve) => {
-      // Inicializar adsbygoogle array
-      window.adsbygoogle = window.adsbygoogle || [];
-
-      // Crear script
-      const script = document.createElement('script');
-      script.async = true;
-      script.src = ADSENSE_SCRIPT_URL;
-      script.crossOrigin = 'anonymous';
-
-      // Agregar data-ad-client (Publisher ID)
-      script.setAttribute('data-ad-client', this.config.adClient);
-
-      // Test mode para desarrollo
-      if (this.config.testMode) {
-        script.setAttribute('data-adtest', 'on');
-      }
-
-      script.onload = () => {
-        this._isLoaded.set(true);
-        this._isLoading.set(false);
-
-        if (this.config.debugMode) {
-          console.log('[ValtechAds] Script AdSense cargado', {
-            adClient: this.config.adClient,
-            testMode: this.config.testMode,
-          });
-        }
-
-        resolve(true);
-      };
-
-      script.onerror = (error) => {
-        console.error('[ValtechAds] Error cargando AdSense:', error);
-        this._error.set(new Error('Error cargando Google AdSense'));
-        this._isLoading.set(false);
-        this.loadPromise = null;
-        resolve(false);
-      };
-
-      // Insertar script en head
-      document.head.appendChild(script);
-    });
-
-    return this.loadPromise;
-  }
-
-  /**
-   * Verifica si el script AdSense esta disponible.
-   */
-  isAdSenseAvailable(): boolean {
-    return isPlatformBrowser(this.platformId) && !!window.adsbygoogle && this._isLoaded();
-  }
-
-  /**
-   * Ejecuta un comando AdSense (push a la queue).
-   * Usado internamente para activar ad slots.
-   */
-  pushAdCommand(): void {
-    if (this.isAdSenseAvailable() && window.adsbygoogle) {
-      window.adsbygoogle.push({});
-    }
-  }
-}

package/src/lib/services/ads/ads.service.ts

@@ -1,268 +0,0 @@
-/**
- * Ads Service
- *
- * Servicio principal para Google AdSense.
- * Integra con el sistema de auth para detectar usuarios premium.
- */
-
-import { Inject, Injectable, PLATFORM_ID, signal, computed, OnDestroy } from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
-import { Router, NavigationEnd } from '@angular/router';
-import { filter } from 'rxjs/operators';
-import { Subscription } from 'rxjs';
-
-import { VALTECH_ADS_CONFIG } from './config';
-import { AdsLoaderService } from './ads-loader.service';
-import { AuthStateService } from '../auth/auth-state.service';
-import { ValtechAdsConfig, AdSlotState, AdEvent } from './types';
-
-/**
- * Servicio principal de Google AdSense.
- *
- * Maneja la carga del script y el estado de ads.
- * Detecta automaticamente usuarios premium para ocultar ads.
- *
- * @example
- * ```typescript
- * @Component({...})
- * export class MyComponent {
- *   private ads = inject(AdsService);
- *
- *   // Verificar si mostrar ads
- *   showAds = this.ads.isEnabled;
- *
- *   // Verificar si usuario es premium
- *   isPremium = this.ads.isPremiumUser;
- * }
- * ```
- */
-@Injectable({ providedIn: 'root' })
-export class AdsService implements OnDestroy {
-  // ===========================================================================
-  // ESTADO (Signals)
-  // ===========================================================================
-
-  private readonly _isInitialized = signal<boolean>(false);
-  private readonly _isEnabled = signal<boolean>(false);
-  private readonly _isDebugMode = signal<boolean>(false);
-  private readonly _slotStates = signal<Map<string, AdSlotState>>(new Map());
-  private readonly _events = signal<AdEvent[]>([]);
-  private readonly _adClient = signal<string>('');
-
-  /** Indica si el servicio esta inicializado */
-  readonly isInitialized = this._isInitialized.asReadonly();
-
-  /** Indica si los ads estan habilitados (no premium + inicializado) */
-  readonly isEnabled = computed(() => {
-    return this._isInitialized() && this._isEnabled() && !this.authStateService.isPremium();
-  });
-
-  /** Indica si el usuario es premium (no ve ads) */
-  readonly isPremiumUser = this.authStateService.isPremium;
-
-  /** Indica si esta en modo debug */
-  readonly isDebugMode = this._isDebugMode.asReadonly();
-
-  /** Publisher ID de AdSense */
-  readonly adClient = this._adClient.asReadonly();
-
-  /** Eventos de ads (historial) */
-  readonly events = this._events.asReadonly();
-
-  // ===========================================================================
-  // INTERNOS
-  // ===========================================================================
-
-  private activeSlotIds = new Set<string>();
-  private routerSubscription: Subscription | null = null;
-
-  constructor(
-    @Inject(VALTECH_ADS_CONFIG) private config: ValtechAdsConfig,
-    @Inject(PLATFORM_ID) private platformId: Object,
-    private router: Router,
-    private loaderService: AdsLoaderService,
-    private authStateService: AuthStateService
-  ) {
-    this._isDebugMode.set(config.debugMode ?? false);
-    this._adClient.set(config.adClient);
-  }
-
-  // ===========================================================================
-  // INICIALIZACION
-  // ===========================================================================
-
-  /**
-   * Inicializa el servicio de ads.
-   * Llamado automaticamente por APP_INITIALIZER.
-   * NO carga el script AdSense hasta que se necesite el primer ad.
-   */
-  async initialize(): Promise<void> {
-    if (!isPlatformBrowser(this.platformId)) {
-      return;
-    }
-
-    // Si es premium, no inicializar ads
-    if (this.authStateService.isPremium()) {
-      if (this._isDebugMode()) {
-        console.log('[ValtechAds] Usuario premium detectado - ads deshabilitados');
-      }
-      this._isInitialized.set(true);
-      return;
-    }
-
-    // Suscribirse a cambios de ruta para verificar exclusiones
-    this.setupRouteListener();
-
-    this._isEnabled.set(true);
-    this._isInitialized.set(true);
-
-    if (this._isDebugMode()) {
-      console.log('[ValtechAds] Inicializado', {
-        adClient: this.config.adClient,
-        testMode: this.config.testMode,
-        excludeRoutes: this.config.excludeRoutes,
-      });
-    }
-  }
-
-  /**
-   * Carga el script AdSense de forma lazy.
-   * Llamado automaticamente cuando se renderiza el primer ad slot.
-   */
-  async ensureAdSenseLoaded(): Promise<boolean> {
-    if (!this.isEnabled()) {
-      return false;
-    }
-
-    return this.loaderService.loadAdSense();
-  }
-
-  // ===========================================================================
-  // GESTION DE SLOTS
-  // ===========================================================================
-
-  /**
-   * Registra un ad slot.
-   * Llamado internamente por el componente AdSlot.
-   *
-   * @param slotId - ID unico del slot
-   * @returns true si el slot se puede mostrar
-   */
-  async registerSlot(slotId: string): Promise<boolean> {
-    if (!this.isEnabled()) {
-      this.updateSlotState(slotId, 'hidden');
-      return false;
-    }
-
-    // Verificar si la ruta actual esta excluida
-    if (this.isRouteExcluded()) {
-      this.updateSlotState(slotId, 'hidden');
-      return false;
-    }
-
-    this.updateSlotState(slotId, 'loading');
-
-    const loaded = await this.ensureAdSenseLoaded();
-    if (!loaded) {
-      this.updateSlotState(slotId, 'error');
-      return false;
-    }
-
-    this.activeSlotIds.add(slotId);
-
-    // Push ad command para activar el slot
-    this.loaderService.pushAdCommand();
-
-    this.updateSlotState(slotId, 'rendered');
-    this.emitEvent({ type: 'loaded', slotId, isEmpty: false });
-
-    if (this._isDebugMode()) {
-      console.log(`[ValtechAds] Slot registrado: ${slotId}`);
-    }
-
-    return true;
-  }
-
-  /**
-   * Desregistra un slot.
-   *
-   * @param slotId - ID del slot a desregistrar
-   */
-  unregisterSlot(slotId: string): void {
-    this.activeSlotIds.delete(slotId);
-    this._slotStates.update((states) => {
-      const newStates = new Map(states);
-      newStates.delete(slotId);
-      return newStates;
-    });
-
-    if (this._isDebugMode()) {
-      console.log(`[ValtechAds] Slot desregistrado: ${slotId}`);
-    }
-  }
-
-  /**
-   * Obtiene el estado de un slot.
-   *
-   * @param slotId - ID del slot
-   * @returns Estado actual del slot
-   */
-  getSlotState(slotId: string): AdSlotState {
-    return this._slotStates().get(slotId) ?? 'idle';
-  }
-
-  // ===========================================================================
-  // PRIVATE METHODS
-  // ===========================================================================
-
-  private updateSlotState(slotId: string, state: AdSlotState): void {
-    this._slotStates.update((states) => new Map(states).set(slotId, state));
-  }
-
-  private emitEvent(event: Omit<AdEvent, 'timestamp'>): void {
-    const fullEvent: AdEvent = { ...event, timestamp: new Date() };
-    this._events.update((events) => [...events.slice(-99), fullEvent]);
-
-    // Callbacks de configuracion
-    if (event.type === 'loaded' || event.type === 'empty') {
-      this.config.onAdLoaded?.(event.slotId, event.isEmpty ?? false);
-    } else if (event.type === 'error' && event.error) {
-      this.config.onAdError?.(event.slotId, event.error);
-    }
-  }
-
-  private setupRouteListener(): void {
-    if (!this.config.excludeRoutes || this.config.excludeRoutes.length === 0) {
-      return;
-    }
-
-    this.routerSubscription = this.router.events
-      .pipe(filter((event): event is NavigationEnd => event instanceof NavigationEnd))
-      .subscribe(() => {
-        // Los slots se ocultan/muestran automaticamente via isEnabled()
-        // No necesitamos destruir slots con AdSense
-      });
-  }
-
-  private isRouteExcluded(url?: string): boolean {
-    if (!this.config.excludeRoutes || this.config.excludeRoutes.length === 0) {
-      return false;
-    }
-
-    const currentUrl = url ?? this.router.url;
-    return this.config.excludeRoutes.some((pattern) => {
-      const regex = new RegExp(pattern);
-      return regex.test(currentUrl);
-    });
-  }
-
-  // ===========================================================================
-  // LIFECYCLE
-  // ===========================================================================
-
-  ngOnDestroy(): void {
-    this.routerSubscription?.unsubscribe();
-    this.activeSlotIds.clear();
-    this._slotStates.set(new Map());
-  }
-}

package/src/lib/services/ads/config.ts

@@ -1,92 +0,0 @@
-/**
- * Ads Configuration
- *
- * Configuracion e inicializacion de Google AdSense para Angular.
- * Usa provideValtechAds() en el bootstrap de tu aplicacion.
- */
-
-import {
-  EnvironmentProviders,
-  InjectionToken,
-  makeEnvironmentProviders,
-  APP_INITIALIZER,
-} from '@angular/core';
-import { ValtechAdsConfig } from './types';
-import { AdsService } from './ads.service';
-
-/**
- * Token de inyeccion para la configuracion de Ads.
- * Usado internamente por los servicios de ads.
- */
-export const VALTECH_ADS_CONFIG = new InjectionToken<ValtechAdsConfig>('ValtechAdsConfig');
-
-/**
- * Configuracion por defecto del servicio de ads.
- */
-export const DEFAULT_ADS_CONFIG: Partial<ValtechAdsConfig> = {
-  debugMode: false,
-  testMode: false,
-  autoAds: false,
-};
-
-/**
- * Factory para inicializar AdsService.
- * Se ejecuta durante el bootstrap de la aplicacion.
- */
-function initializeAds(adsService: AdsService): () => Promise<void> {
-  return () => adsService.initialize();
-}
-
-/**
- * Provee el servicio de Ads a la aplicacion Angular.
- *
- * @param config - Configuracion de Google AdSense
- * @returns EnvironmentProviders para usar en bootstrapApplication
- *
- * @example
- * ```typescript
- * // main.ts
- * import { bootstrapApplication } from '@angular/platform-browser';
- * import { provideValtechAds } from 'valtech-components';
- *
- * bootstrapApplication(AppComponent, {
- *   providers: [
- *     provideValtechAds({
- *       adClient: 'ca-pub-XXXXXXXXXXXXXXXX',
- *       testMode: true, // Usa ads de prueba en desarrollo
- *       debugMode: true,
- *     }),
- *   ],
- * });
- * ```
- *
- * @example Con rutas excluidas
- * ```typescript
- * provideValtechAds({
- *   adClient: 'ca-pub-XXXXXXXXXXXXXXXX',
- *   excludeRoutes: [
- *     '^/checkout',
- *     '^/payment',
- *     '^/premium',
- *   ],
- * })
- * ```
- */
-export function provideValtechAds(config: ValtechAdsConfig): EnvironmentProviders {
-  // Merge config con defaults
-  const mergedConfig: ValtechAdsConfig = {
-    ...DEFAULT_ADS_CONFIG,
-    ...config,
-  };
-
-  return makeEnvironmentProviders([
-    { provide: VALTECH_ADS_CONFIG, useValue: mergedConfig },
-    // Inicializar AdsService al arrancar (pero NO cargar script AdSense aun)
-    {
-      provide: APP_INITIALIZER,
-      useFactory: initializeAds,
-      deps: [AdsService],
-      multi: true,
-    },
-  ]);
-}

package/src/lib/services/ads/index.ts

@@ -1,29 +0,0 @@
-/**
- * Ads Module
- *
- * Exports publicos para el servicio de Google AdSense.
- */
-
-// Configuration
-export { provideValtechAds, VALTECH_ADS_CONFIG, DEFAULT_ADS_CONFIG } from './config';
-
-// Services
-export { AdsService } from './ads.service';
-export { AdsLoaderService } from './ads-loader.service';
-
-// Types
-export {
-  // Config types
-  ValtechAdsConfig,
-  // Slot types
-  AdSlotConfig,
-  AdFormat,
-  // State types
-  AdSlotState,
-  AdEvent,
-  AdsConsentState,
-  // Legacy types (deprecated)
-  AdSlotSize,
-  AD_SIZE_MAP,
-  SizeMapping,
-} from './types';

package/src/lib/services/ads/types.ts

@@ -1,187 +0,0 @@
-/**
- * Ads Types
- *
- * Tipos e interfaces para el servicio de Google AdSense.
- * Simplificado para usar AdSense en lugar de GPT (Ad Manager).
- */
-
-// ============================================================================
-// CONFIGURACION
-// ============================================================================
-
-/**
- * Configuracion del servicio de Ads.
- * Pasada a provideValtechAds() en el bootstrap de la aplicacion.
- */
-export interface ValtechAdsConfig {
-  /** Publisher ID de AdSense (formato: ca-pub-XXXXXXXXXXXXXXXX) */
-  adClient: string;
-
-  /** Habilitar modo debug (muestra info de ads en consola) */
-  debugMode?: boolean;
-
-  /** Test mode - usa ads de prueba durante desarrollo */
-  testMode?: boolean;
-
-  /** Habilitar Auto Ads (Google decide ubicacion automaticamente) */
-  autoAds?: boolean;
-
-  /** Callback cuando se carga un ad */
-  onAdLoaded?: (slotId: string, isEmpty: boolean) => void;
-
-  /** Callback cuando falla un ad */
-  onAdError?: (slotId: string, error: Error) => void;
-
-  /** Rutas donde NO mostrar ads (regex patterns) */
-  excludeRoutes?: string[];
-}
-
-// ============================================================================
-// AD SLOTS
-// ============================================================================
-
-/**
- * Formato de ad para AdSense.
- */
-export type AdFormat = 'auto' | 'fluid' | 'rectangle' | 'horizontal' | 'vertical';
-
-/**
- * Configuracion de un ad slot individual.
- */
-export interface AdSlotConfig {
-  /** ID unico del slot (usado para el div container) */
-  slotId: string;
-
-  /** Ad Slot ID de AdSense (numero de unidad de anuncio) */
-  adSlot?: string;
-
-  /** Formato del ad */
-  format?: AdFormat;
-
-  /** Responsive - ocupa todo el ancho disponible */
-  fullWidth?: boolean;
-
-  /** CSS class adicional */
-  cssClass?: string;
-
-  /** Altura minima mientras carga */
-  minHeight?: string;
-
-  /** Mostrar skeleton mientras carga */
-  showSkeleton?: boolean;
-}
-
-// ============================================================================
-// ESTADO
-// ============================================================================
-
-/**
- * Estado de un ad slot.
- */
-export type AdSlotState =
-  | 'idle' // No cargado
-  | 'loading' // Script/ad cargando
-  | 'rendered' // Ad visible
-  | 'empty' // Sin ad disponible
-  | 'hidden' // Usuario premium o sin consent
-  | 'error'; // Error de carga
-
-/**
- * Evento emitido por el servicio de ads.
- */
-export interface AdEvent {
-  type: 'loaded' | 'empty' | 'error' | 'viewable' | 'clicked';
-  slotId: string;
-  timestamp: Date;
-  isEmpty?: boolean;
-  error?: Error;
-}
-
-// ============================================================================
-// CONSENT
-// ============================================================================
-
-/**
- * Estado de consent para ads (mapeado desde AnalyticsService).
- */
-export interface AdsConsentState {
-  /** Permite almacenamiento de ads */
-  adStorage: boolean;
-
-  /** Permite personalizacion de ads */
-  adPersonalization: boolean;
-
-  /** Permite datos de usuario para ads */
-  adUserData: boolean;
-}
-
-// ============================================================================
-// ADSENSE (Google AdSense) Types
-// ============================================================================
-
-/** AdSense global array */
-export type AdSenseCommand = Record<string, unknown>;
-
-// Extend Window interface for adsbygoogle and googletag (GPT)
-declare global {
-  interface Window {
-    adsbygoogle?: AdSenseCommand[];
-    googletag?: GoogleTag;
-  }
-}
-
-/** Google Publisher Tags (GPT) interface */
-export interface GoogleTag {
-  cmd: Array<() => void>;
-  pubads(): GoogleTagPubAds;
-}
-
-/** GPT PubAds service */
-export interface GoogleTagPubAds {
-  setRequestNonPersonalizedAds(value: 0 | 1): void;
-}
-
-// ============================================================================
-// LEGACY TYPES (mantenidos para compatibilidad)
-// ============================================================================
-
-/**
- * @deprecated Use AdFormat instead
- */
-export type AdSlotSize =
-  | 'leaderboard'
-  | 'billboard'
-  | 'medium-rectangle'
-  | 'large-rectangle'
-  | 'half-page'
-  | 'skyscraper'
-  | 'mobile-banner'
-  | 'mobile-leaderboard'
-  | 'fluid'
-  | 'native'
-  | 'custom';
-
-/**
- * @deprecated AdSense handles sizes automatically
- */
-export const AD_SIZE_MAP: Record<AdSlotSize, [number, number] | 'fluid'> = {
-  leaderboard: [728, 90],
-  billboard: [970, 250],
-  'medium-rectangle': [300, 250],
-  'large-rectangle': [336, 280],
-  'half-page': [300, 600],
-  skyscraper: [160, 600],
-  'mobile-banner': [320, 50],
-  'mobile-leaderboard': [320, 100],
-  fluid: 'fluid',
-  native: 'fluid',
-  custom: 'fluid',
-};
-
-/**
- * @deprecated Not used with AdSense
- */
-export interface SizeMapping {
-  viewportWidth: number;
-  sizes: ([number, number] | 'fluid')[];
-}