valtech-components 2.0.687 → 2.0.689

package/src/lib/components/molecules/ad-slot/ad-slot.component.ts

@@ -0,0 +1,352 @@
+/**
+ * Ad Slot Component
+ *
+ * Componente standalone para mostrar ads de Google AdSense.
+ * Se integra automaticamente con el servicio de Ads y respeta consent + premium.
+ *
+ * @example
+ * ```html
+ * <!-- Banner basico -->
+ * <val-ad-slot
+ *   slotId="homepage-top"
+ *   format="horizontal"
+ *   [fullWidth]="true"
+ * />
+ *
+ * <!-- Rectangle ad -->
+ * <val-ad-slot
+ *   slotId="sidebar-ad"
+ *   adSlot="1234567890"
+ *   format="rectangle"
+ * />
+ *
+ * <!-- Auto format (Google decides) -->
+ * <val-ad-slot
+ *   slotId="article-ad"
+ *   format="auto"
+ *   [fullWidth]="true"
+ * />
+ * ```
+ */
+
+import {
+  Component,
+  Input,
+  OnInit,
+  OnDestroy,
+  inject,
+  signal,
+  computed,
+  PLATFORM_ID,
+  ChangeDetectionStrategy,
+  ElementRef,
+  AfterViewInit,
+} from '@angular/core';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { AdsService } from '../../../services/ads/ads.service';
+import { AdFormat, AdSlotState } from '../../../services/ads/types';
+
+@Component({
+  selector: 'val-ad-slot',
+  standalone: true,
+  imports: [CommonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    @if (shouldRender()) {
+      <div
+        class="val-ad-slot"
+        [class.val-ad-slot--loading]="state() === 'loading'"
+        [class.val-ad-slot--rendered]="state() === 'rendered'"
+        [class.val-ad-slot--empty]="state() === 'empty'"
+        [class.val-ad-slot--hidden]="state() === 'hidden'"
+        [class.val-ad-slot--placeholder]="isPlaceholderMode()"
+        [class]="cssClass"
+        [style.min-height]="minHeight"
+      >
+        <!-- Placeholder mode (desarrollo local) -->
+        @if (isPlaceholderMode()) {
+          <div class="val-ad-slot__placeholder" [style.height]="minHeight">
+            <div class="val-ad-slot__placeholder-content">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+                <line x1="3" y1="9" x2="21" y2="9"/>
+                <line x1="9" y1="21" x2="9" y2="9"/>
+              </svg>
+              <span class="val-ad-slot__placeholder-label">Ad Placeholder</span>
+              <span class="val-ad-slot__placeholder-info">{{ slotId }} | {{ format }}</span>
+            </div>
+          </div>
+        } @else {
+          <!-- Skeleton mientras carga -->
+          @if (showSkeleton && state() === 'loading') {
+            <div
+              class="val-ad-slot__skeleton"
+              [style.height]="minHeight"
+            ></div>
+          }
+
+          <!-- AdSense ins element -->
+          <ins
+            class="adsbygoogle val-ad-slot__container"
+            [class.val-ad-slot__container--hidden]="state() === 'loading' && showSkeleton"
+            [style.display]="'block'"
+            [attr.data-ad-client]="adsService.adClient()"
+            [attr.data-ad-slot]="adSlot || null"
+            [attr.data-ad-format]="format"
+            [attr.data-full-width-responsive]="fullWidth ? 'true' : null"
+          ></ins>
+        }
+
+        <!-- Debug info -->
+        @if (adsService.isDebugMode()) {
+          <div class="val-ad-slot__debug">
+            <small>{{ slotId }} | {{ format }} | {{ state() }}{{ isPlaceholderMode() ? ' | PLACEHOLDER' : '' }}</small>
+          </div>
+        }
+      </div>
+    }
+  `,
+  styles: [
+    `
+      .val-ad-slot {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        width: 100%;
+      }
+
+      .val-ad-slot--loading {
+        background-color: var(--ion-color-light, #f4f4f4);
+      }
+
+      .val-ad-slot--empty,
+      .val-ad-slot--hidden {
+        display: none !important;
+      }
+
+      .val-ad-slot__skeleton {
+        width: 100%;
+        background: linear-gradient(
+          90deg,
+          var(--ion-color-light, #f4f4f4) 25%,
+          var(--ion-color-light-shade, #e0e0e0) 50%,
+          var(--ion-color-light, #f4f4f4) 75%
+        );
+        background-size: 200% 100%;
+        animation: skeleton-loading 1.5s infinite;
+        border-radius: 4px;
+      }
+
+      .val-ad-slot__container {
+        width: 100%;
+      }
+
+      .val-ad-slot__container--hidden {
+        visibility: hidden;
+        position: absolute;
+      }
+
+      /* Placeholder styles */
+      .val-ad-slot__placeholder {
+        width: 100%;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        border: 2px dashed rgba(255, 255, 255, 0.4);
+      }
+
+      .val-ad-slot__placeholder-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 8px;
+        padding: 16px;
+        text-align: center;
+      }
+
+      .val-ad-slot__placeholder-content svg {
+        opacity: 0.8;
+      }
+
+      .val-ad-slot__placeholder-label {
+        font-weight: 600;
+        font-size: 14px;
+        letter-spacing: 0.5px;
+      }
+
+      .val-ad-slot__placeholder-info {
+        font-size: 11px;
+        opacity: 0.7;
+        font-family: monospace;
+      }
+
+      .val-ad-slot__debug {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        background: rgba(0, 0, 0, 0.7);
+        color: white;
+        padding: 2px 6px;
+        font-size: 10px;
+        z-index: 1000;
+        font-family: monospace;
+      }
+
+      @keyframes skeleton-loading {
+        0% {
+          background-position: 200% 0;
+        }
+        100% {
+          background-position: -200% 0;
+        }
+      }
+    `,
+  ],
+})
+export class AdSlotComponent implements OnInit, OnDestroy, AfterViewInit {
+  readonly adsService = inject(AdsService);
+  private readonly platformId = inject(PLATFORM_ID);
+  private readonly elementRef = inject(ElementRef);
+
+  // ===========================================================================
+  // INPUTS (Configuracion del slot)
+  // ===========================================================================
+
+  /** ID unico del slot (para tracking interno) */
+  @Input({ required: true }) slotId!: string;
+
+  /** Ad Slot ID de AdSense (opcional, para unidades manuales) */
+  @Input() adSlot?: string;
+
+  /** Formato del ad */
+  @Input() format: AdFormat = 'auto';
+
+  /** Full width responsive */
+  @Input() fullWidth = true;
+
+  /** CSS class adicional */
+  @Input() cssClass = '';
+
+  /** Altura minima */
+  @Input() minHeight = '90px';
+
+  /** Mostrar skeleton */
+  @Input() showSkeleton = true;
+
+  // ===========================================================================
+  // ESTADO
+  // ===========================================================================
+
+  private readonly _state = signal<AdSlotState>('idle');
+  readonly state = this._state.asReadonly();
+  private adInitialized = false;
+
+  /** Indica si el componente debe renderizarse */
+  readonly shouldRender = computed(() => {
+    // No renderizar en SSR
+    if (!isPlatformBrowser(this.platformId)) {
+      return false;
+    }
+
+    // No renderizar si usuario es premium
+    if (this.adsService.isPremiumUser()) {
+      return false;
+    }
+
+    // No renderizar si ads estan deshabilitados y aun no inicializado
+    if (!this.adsService.isInitialized()) {
+      return false;
+    }
+
+    return true;
+  });
+
+  /**
+   * Indica si debe mostrar placeholder en vez de ad real.
+   * Activo en localhost o con Publisher ID placeholder.
+   */
+  readonly isPlaceholderMode = computed(() => {
+    if (!isPlatformBrowser(this.platformId)) {
+      return false;
+    }
+
+    const adClient = this.adsService.adClient();
+    const isLocalhost = window.location.hostname === 'localhost' ||
+                        window.location.hostname === '127.0.0.1';
+    const isPlaceholderClient = !adClient ||
+                                 adClient === 'ca-pub-0000000000000000' ||
+                                 adClient.includes('0000000000');
+
+    return isLocalhost || isPlaceholderClient;
+  });
+
+  // ===========================================================================
+  // LIFECYCLE
+  // ===========================================================================
+
+  async ngOnInit(): Promise<void> {
+    if (!this.shouldRender()) {
+      return;
+    }
+
+    this._state.set('loading');
+  }
+
+  async ngAfterViewInit(): Promise<void> {
+    if (!this.shouldRender() || this.adInitialized) {
+      return;
+    }
+
+    // En modo placeholder, solo marcar como rendered
+    if (this.isPlaceholderMode()) {
+      this._state.set('rendered');
+      this.adInitialized = true;
+
+      if (this.adsService.isDebugMode()) {
+        console.log(`[ValtechAds] Ad slot '${this.slotId}' in PLACEHOLDER mode (localhost or invalid adClient)`);
+      }
+      return;
+    }
+
+    await this.initializeAd();
+  }
+
+  ngOnDestroy(): void {
+    // AdSense no requiere cleanup manual como GPT
+    this.adInitialized = false;
+  }
+
+  // ===========================================================================
+  // PRIVATE
+  // ===========================================================================
+
+  private async initializeAd(): Promise<void> {
+    try {
+      // Registrar slot y cargar AdSense si no esta cargado
+      const success = await this.adsService.registerSlot(this.slotId);
+
+      if (success) {
+        this._state.set('rendered');
+        this.adInitialized = true;
+
+        if (this.adsService.isDebugMode()) {
+          console.log(`[ValtechAds] Ad slot '${this.slotId}' rendered`, {
+            format: this.format,
+            adSlot: this.adSlot,
+            fullWidth: this.fullWidth,
+          });
+        }
+      } else {
+        this._state.set('empty');
+      }
+    } catch (error) {
+      console.error(`[ValtechAds] Error initializing ad slot '${this.slotId}':`, error);
+      this._state.set('error');
+    }
+  }
+}

package/src/lib/components/molecules/alert-box/alert-box.component.scss

@@ -0,0 +1,10 @@
+@import '../../styles/mixins.scss';
+
+.text {
+  margin-left: pxToRem(4);
+}
+
+.content-container {
+  display: flex;
+  align-items: flex-start;
+}

package/src/lib/components/molecules/alert-box/alert-box.component.ts

@@ -0,0 +1,125 @@
+import { CommonModule } from '@angular/common';
+import { Component, inject, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { PresetService } from '../../../services/presets';
+import { BoxComponent } from '../../atoms/box/box.component';
+import { IconComponent } from '../../atoms/icon/icon.component';
+import { TextComponent } from '../../atoms/text/text.component';
+import { AlertBoxMetadata, ReactiveAlertBoxMetadata } from './types';
+
+@Component({
+  selector: 'val-alert-box',
+  standalone: true,
+  imports: [CommonModule, BoxComponent, IconComponent, TextComponent],
+  template: `
+    <val-box [props]="resolvedProps.box">
+      <div class="content-container" body>
+        <val-icon [props]="resolvedProps.icon"></val-icon>
+        <!-- Support both legacy and reactive patterns -->
+        @if (isLegacyProps) {
+          <val-text class="text" [props]="getLegacyTextProps()" />
+        } @else {
+          <val-text class="text" [props]="computedTextProps" />
+        }
+      </div>
+    </val-box>
+  `,
+  styleUrls: ['./alert-box.component.scss'],
+})
+/**
+ * val-alert-box
+ *
+ * Displays an alert box with an icon and text, using a styled box container.
+ * Supports presets for reusable configurations.
+ *
+ * @example With preset (recommended):
+ * <val-alert-box preset="warning" [props]="{ text: 'Advertencia!' }"></val-alert-box>
+ *
+ * @example Static (backwards compatible):
+ * <val-alert-box [props]="{ box: {...}, icon: {...}, text: { content: 'Alerta' } }"></val-alert-box>
+ *
+ * @input preset: string - Name of preset to apply (e.g., 'info', 'success', 'warning', 'error')
+ * @input props: AlertBoxMetadata | ReactiveAlertBoxMetadata - Configuration for the alert box (overrides preset values)
+ */
+export class AlertBoxComponent implements OnInit, OnChanges {
+  private presets = inject(PresetService);
+
+  /**
+   * Preset name to apply. Presets define reusable alert configurations
+   * (color, icon, box style) that can be registered at app level.
+   *
+   * @example
+   * <val-alert-box preset="warning" [props]="{ text: 'Warning message' }"></val-alert-box>
+   */
+  @Input() preset?: string;
+
+  /**
+   * Alert box configuration object. Values here override preset values.
+   * Supports both legacy AlertBoxMetadata and ReactiveAlertBoxMetadata patterns.
+   */
+  @Input() props: Partial<AlertBoxMetadata | ReactiveAlertBoxMetadata> = {};
+
+  /**
+   * Resolved props after merging preset + explicit props.
+   */
+  resolvedProps: AlertBoxMetadata | ReactiveAlertBoxMetadata = {} as AlertBoxMetadata;
+
+  /** Computed text properties for reactive pattern */
+  computedTextProps: any;
+
+  /** Whether this is using the legacy props pattern */
+  get isLegacyProps(): boolean {
+    return 'text' in this.resolvedProps && typeof (this.resolvedProps as any).text === 'object';
+  }
+
+  /** Get text props for legacy pattern */
+  getLegacyTextProps(): any {
+    return (this.resolvedProps as AlertBoxMetadata).text;
+  }
+
+  ngOnInit() {
+    this.resolveProps();
+    if (!this.isLegacyProps) {
+      this.initializeTextProps();
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['preset'] || changes['props']) {
+      this.resolveProps();
+      if (!this.isLegacyProps) {
+        this.initializeTextProps();
+      }
+    }
+  }
+
+  /**
+   * Merge preset configuration with explicit props.
+   * Explicit props take precedence over preset values.
+   */
+  private resolveProps(): void {
+    const presetProps = this.preset
+      ? (this.presets.get('alertBox', this.preset) as Partial<AlertBoxMetadata | ReactiveAlertBoxMetadata>)
+      : {};
+
+    this.resolvedProps = {
+      ...presetProps,
+      ...this.props,
+    } as AlertBoxMetadata | ReactiveAlertBoxMetadata;
+  }
+
+  private initializeTextProps() {
+    const reactiveProps = this.resolvedProps as ReactiveAlertBoxMetadata;
+
+    // Base text properties with styling
+    this.computedTextProps = {
+      size: reactiveProps.textStyle?.size || 'medium',
+      color: reactiveProps.textStyle?.color,
+      bold: reactiveProps.textStyle?.bold || false,
+    };
+
+    // Add content - use static text only
+    if (reactiveProps.text !== undefined) {
+      this.computedTextProps.content = reactiveProps.text;
+    }
+  }
+}