valtech-components 2.0.498 → 2.0.501

package/fesm2022/valtech-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, Injectable, HostListener, inject, Pipe, ChangeDetectionStrategy, ViewChild, signal, computed, makeEnvironmentProviders, APP_INITIALIZER, ChangeDetectorRef, ElementRef, InjectionToken, Inject, PLATFORM_ID, Optional, runInInjectionContext, effect } from '@angular/core';
+import { EventEmitter, Component, Input, Output, Injectable, signal, makeEnvironmentProviders, APP_INITIALIZER, inject, HostListener, Pipe, ChangeDetectionStrategy, ViewChild, computed, ChangeDetectorRef, ElementRef, PLATFORM_ID, Inject, ErrorHandler, DestroyRef, InjectionToken, Optional, runInInjectionContext, effect, Injector } from '@angular/core';
 import * as i2$1 from '@ionic/angular/standalone';
 import { IonAvatar, IonCard, IonIcon, IonButton, IonSpinner, IonText, IonModal, IonHeader, IonToolbar, IonContent, IonButtons, IonTitle, IonProgressBar, IonSkeletonText, IonFab, IonFabButton, IonFabList, IonLabel, IonCardContent, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCheckbox, IonTextarea, IonDatetime, IonDatetimeButton, IonInput, IonSelect, IonSelectOption, IonRadioGroup, IonRadio, IonRange, IonSearchbar, IonSegment, IonSegmentButton, IonToggle, IonAccordion, IonAccordionGroup, IonItem, IonTabBar, IonTabButton, IonBadge, IonBreadcrumb, IonBreadcrumbs, IonChip, IonPopover, IonList, IonNote, ToastController as ToastController$1, IonCol, IonRow, IonMenuButton, IonFooter, IonListHeader, IonInfiniteScroll, IonInfiniteScrollContent, IonGrid, MenuController, IonMenu, IonMenuToggle, AlertController } from '@ionic/angular/standalone';
 import * as i1 from '@angular/common';
@@ -13,7 +13,7 @@ import * as i1$2 from '@angular/platform-browser';
 import QRCodeStyling from 'qr-code-styling';
 import * as i1$3 from '@angular/forms';
 import { ReactiveFormsModule, FormsModule, FormControl, Validators } from '@angular/forms';
-import { BehaviorSubject, filter, map, distinctUntilChanged, Subject, throwError, firstValueFrom, of, from } from 'rxjs';
+import { BehaviorSubject, filter, map, distinctUntilChanged, Subject, throwError, Observable, firstValueFrom, of, from } from 'rxjs';
 import * as i1$4 from 'ng-otp-input';
 import { NgOtpInputComponent, NgOtpInputModule } from 'ng-otp-input';
 import * as i2 from '@ionic/angular';
@@ -27,6 +27,7 @@ import 'prismjs/components/prism-typescript';
 import 'prismjs/components/prism-bash';
 import Swiper from 'swiper';
 import { Navigation, Pagination, EffectFade, EffectCube, EffectCoverflow, EffectFlip, Autoplay } from 'swiper/modules';
+import { Analytics, logEvent, setUserId, setUserProperties, provideAnalytics, getAnalytics } from '@angular/fire/analytics';
 import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
 import * as i1$5 from '@angular/fire/auth';
 import { provideAuth, getAuth, connectAuthEmulator, authState, signInWithCustomToken, signOut } from '@angular/fire/auth';
@@ -35,7 +36,8 @@ import { provideFirestore, getFirestore, connectFirestoreEmulator, enableIndexed
 import { provideMessaging, getMessaging, Messaging, getToken, deleteToken, onMessage } from '@angular/fire/messaging';
 import * as i1$7 from '@angular/fire/storage';
 import { provideStorage, getStorage, connectStorageEmulator, ref, uploadBytesResumable, getDownloadURL, getMetadata, deleteObject, listAll } from '@angular/fire/storage';
-import { catchError, switchMap, finalize, filter as filter$1, take, tap, map as map$1 } from 'rxjs/operators';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { filter as filter$1, catchError, switchMap, finalize, take, tap, map as map$1 } from 'rxjs/operators';
 import * as i1$8 from '@angular/common/http';
 import { provideHttpClient, withInterceptors } from '@angular/common/http';
 
@@ -243,6 +245,154 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Servicio para gestionar presets de componentes.
+ *
+ * Los presets permiten definir configuraciones reutilizables
+ * de componentes (tamaño, color, variante, etc.) que se pueden
+ * aplicar con un nombre semántico.
+ *
+ * @example
+ * // En un componente
+ * presets = inject(PresetService);
+ *
+ * // Obtener preset
+ * const buttonProps = this.presets.get<ButtonMetadata>('button', 'primary-action');
+ * // { size: 'large', color: 'primary', fill: 'solid' }
+ */
+class PresetService {
+    constructor() {
+        this._presets = signal({});
+    }
+    /**
+     * Obtiene un preset específico para un componente
+     *
+     * @param component Tipo de componente (ej: 'button', 'card', 'input')
+     * @param presetName Nombre del preset (ej: 'primary-action', 'compact')
+     * @returns Propiedades del preset o objeto vacío si no existe
+     *
+     * @example
+     * // Obtener preset de botón
+     * const props = presets.get<ButtonMetadata>('button', 'primary-action');
+     *
+     * // Usar en componente
+     * <val-button [props]="props"></val-button>
+     */
+    get(component, presetName) {
+        const componentPresets = this._presets()[component];
+        if (!componentPresets) {
+            console.warn(`[presets] No presets registered for component: ${component}`);
+            return {};
+        }
+        const preset = componentPresets[presetName];
+        if (!preset) {
+            console.warn(`[presets] Preset '${presetName}' not found for component: ${component}`);
+            return {};
+        }
+        return preset;
+    }
+    /**
+     * Verifica si existe un preset
+     */
+    has(component, presetName) {
+        return !!this._presets()[component]?.[presetName];
+    }
+    /**
+     * Registra presets de la aplicación
+     *
+     * @param presets Configuración de presets
+     *
+     * @example
+     * presets.registerPresets({
+     *   button: {
+     *     'primary-action': { size: 'large', color: 'primary' },
+     *   },
+     *   card: {
+     *     'feature': { variant: 'elevated' },
+     *   }
+     * });
+     */
+    registerPresets(presets) {
+        this._presets.set(presets);
+    }
+    /**
+     * Agrega presets para un componente específico (merge con existentes)
+     */
+    registerComponentPresets(component, presets) {
+        this._presets.update((current) => ({
+            ...current,
+            [component]: {
+                ...current[component],
+                ...presets,
+            },
+        }));
+    }
+    /**
+     * Obtiene todos los nombres de presets para un componente
+     */
+    getPresetNames(component) {
+        return Object.keys(this._presets()[component] || {});
+    }
+    /**
+     * Obtiene todos los componentes con presets registrados
+     */
+    getRegisteredComponents() {
+        return Object.keys(this._presets());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PresetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PresetService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PresetService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Configura el sistema de presets de Valtech Components.
+ *
+ * @param presets Configuración de presets por componente
+ * @returns Providers para agregar en app.config.ts
+ *
+ * @example
+ * // app.config.ts
+ * import { provideValtechPresets } from 'valtech-components';
+ *
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideValtechPresets({
+ *       button: {
+ *         'primary-action': { size: 'large', color: 'primary', fill: 'solid' },
+ *         'secondary': { size: 'medium', color: 'secondary', fill: 'outline' },
+ *         'danger': { size: 'medium', color: 'danger', fill: 'solid' },
+ *       },
+ *       card: {
+ *         'feature': { variant: 'elevated', padding: 'large' },
+ *         'compact': { variant: 'flat', padding: 'small' },
+ *       },
+ *       input: {
+ *         'form-field': { size: 'medium', fill: 'outline', labelPosition: 'floating' },
+ *       }
+ *     }),
+ *   ]
+ * };
+ */
+function provideValtechPresets(presets) {
+    return makeEnvironmentProviders([
+        {
+            provide: APP_INITIALIZER,
+            useFactory: (presetService) => {
+                return () => {
+                    presetService.registerPresets(presets);
+                };
+            },
+            deps: [PresetService],
+            multi: true,
+        },
+    ]);
+}
+
+// Service
+
 const ENABLED = 'ENABLED';
 const DISABLED = 'DISABLED';
 const WORKING = 'WORKING';
@@ -477,7 +627,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 /**
  * val-button
  *
- * A customizable button supporting icons, loading state, and navigation.
+ * A customizable button supporting icons, loading state, navigation, and presets.
+ *
+ * @example With preset (recommended with i18n):
+ * <val-button preset="primary-action" [props]="{ text: 'Submit' | t }"></val-button>
  *
  * @example Static text:
  * <val-button [props]="{
@@ -488,41 +641,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  *   icon: { name: 'save', slot: 'start' }
  * }" (onClick)="handler()"></val-button>
  *
- * @input props: ButtonMetadata - Configuration for the button (text, color, icon, state, etc.)
+ * @input preset: string - Name of preset to apply (e.g., 'primary-action', 'danger')
+ * @input props: ButtonMetadata - Configuration for the button (overrides preset values)
  * @output onClick - Emits when the button is clicked
  */
 class ButtonComponent {
-    constructor(download, icon, navigation) {
+    constructor(download, _icon, navigation) {
         this.download = download;
         this.navigation = navigation;
         this.states = ComponentStates;
+        this.presets = inject(PresetService);
         /**
          * The text to display on the button.
          */
         this.displayText = '';
+        /**
+         * Button configuration. Values here override preset values.
+         * When using presets, only partial props are needed (preset provides defaults).
+         */
+        this.props = {};
+        /**
+         * Resolved props after merging preset + explicit props.
+         * Preset values are overridden by explicit props.
+         */
+        this.resolvedProps = {};
         /**
          * Event emitted when the button is clicked.
          */
         this.onClick = new EventEmitter();
     }
     ngOnInit() {
+        this.resolveProps();
         this.setupDisplayText();
     }
+    ngOnChanges(changes) {
+        if (changes['preset'] || changes['props']) {
+            this.resolveProps();
+            this.setupDisplayText();
+        }
+    }
+    /**
+     * Merge preset configuration with explicit props.
+     * Explicit props take precedence over preset values.
+     */
+    resolveProps() {
+        const presetProps = this.preset
+            ? this.presets.get('button', this.preset)
+            : {};
+        // Merge: preset defaults < explicit props
+        this.resolvedProps = {
+            ...presetProps,
+            ...this.props,
+        };
+    }
     /**
-     * Set up the text content based on the props configuration.
+     * Set up the text content based on the resolved props configuration.
      */
     setupDisplayText() {
-        if (this.props.text) {
-            if (this.props.contentInterpolation) {
-                this.displayText = this.interpolateContent(this.props.text, this.props.contentInterpolation);
+        if (this.resolvedProps.text) {
+            if (this.resolvedProps.contentInterpolation) {
+                this.displayText = this.interpolateContent(this.resolvedProps.text, this.resolvedProps.contentInterpolation);
             }
             else {
-                this.displayText = this.props.text;
+                this.displayText = this.resolvedProps.text;
             }
         }
-        else if (this.props.contentFallback) {
+        else if (this.resolvedProps.contentFallback) {
             // Backwards compatibility: use fallback if text is not provided
-            this.displayText = this.props.contentFallback;
+            this.displayText = this.resolvedProps.contentFallback;
         }
         else {
             this.displayText = '';
@@ -538,38 +724,38 @@ class ButtonComponent {
         });
     }
     clickHandler() {
-        if (this.props.state === this.states.DISABLED) {
+        if (this.resolvedProps.state === this.states.DISABLED) {
             return;
         }
-        if (this.props.actionType === ActionType.APP_NAVIGATION) {
-            this.navigation.navigateByUrl(this.props.link);
+        if (this.resolvedProps.actionType === ActionType.APP_NAVIGATION) {
+            this.navigation.navigateByUrl(this.resolvedProps.link);
         }
-        if (this.props.download) {
-            this.download.downloadLinkFromBrowser(this.props.download);
+        if (this.resolvedProps.download) {
+            this.download.downloadLinkFromBrowser(this.resolvedProps.download);
         }
-        if (this.props.handler) {
-            this.props.handler(this.props.ref);
+        if (this.resolvedProps.handler) {
+            this.resolvedProps.handler(this.resolvedProps.ref);
         }
-        this.onClick.emit(this.props.token);
+        this.onClick.emit(this.resolvedProps.token);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, deps: [{ token: DownloadService }, { token: IconService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ButtonComponent, isStandalone: true, selector: "val-button", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ButtonComponent, isStandalone: true, selector: "val-button", inputs: { preset: "preset", props: "props" }, outputs: { onClick: "onClick" }, usesOnChanges: true, ngImport: i0, template: `
     <ion-button
-      [type]="props.type"
-      [color]="props.color"
-      [expand]="props.expand"
-      [fill]="props.fill"
-      [size]="props.size"
-      [href]="props.href"
-      [target]="props.target"
-      [shape]="props.shape"
+      [type]="resolvedProps.type"
+      [color]="resolvedProps.color"
+      [expand]="resolvedProps.expand"
+      [fill]="resolvedProps.fill"
+      [size]="resolvedProps.size"
+      [href]="resolvedProps.href"
+      [target]="resolvedProps.target"
+      [shape]="resolvedProps.shape"
       (click)="clickHandler()"
-      [disabled]="props.state === states.DISABLED"
-      [ngClass]="props.size ? [props.size] : []"
+      [disabled]="resolvedProps.state === states.DISABLED"
+      [ngClass]="resolvedProps.size ? [resolvedProps.size] : []"
     >
-      <ion-icon *ngIf="props.icon" [slot]="props.icon.slot" [name]="props.icon.name"></ion-icon>
-      <ion-spinner *ngIf="props.state === states.WORKING" name="circular"></ion-spinner>
-      <ion-text *ngIf="props.state !== states.WORKING">{{ displayText }}</ion-text>
+      <ion-icon *ngIf="resolvedProps.icon" [slot]="resolvedProps.icon.slot" [name]="resolvedProps.icon.name"></ion-icon>
+      <ion-spinner *ngIf="resolvedProps.state === states.WORKING" name="circular"></ion-spinner>
+      <ion-text *ngIf="resolvedProps.state !== states.WORKING">{{ displayText }}</ion-text>
     </ion-button>
   `, isInline: true, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}ion-button{font-family:var(--ion-default-font),Arial,sans-serif;min-width:6.25rem;margin:0}ion-button.small{--padding-bottom: 12px;--padding-end: 14px;--padding-start: 14px;--padding-top: 12px}ion-button.button-clear{padding:0;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
 }
@@ -577,24 +763,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             type: Component,
             args: [{ selector: 'val-button', standalone: true, imports: [CommonModule, IonButton, IonIcon, IonSpinner, IonText], template: `
     <ion-button
-      [type]="props.type"
-      [color]="props.color"
-      [expand]="props.expand"
-      [fill]="props.fill"
-      [size]="props.size"
-      [href]="props.href"
-      [target]="props.target"
-      [shape]="props.shape"
+      [type]="resolvedProps.type"
+      [color]="resolvedProps.color"
+      [expand]="resolvedProps.expand"
+      [fill]="resolvedProps.fill"
+      [size]="resolvedProps.size"
+      [href]="resolvedProps.href"
+      [target]="resolvedProps.target"
+      [shape]="resolvedProps.shape"
       (click)="clickHandler()"
-      [disabled]="props.state === states.DISABLED"
-      [ngClass]="props.size ? [props.size] : []"
+      [disabled]="resolvedProps.state === states.DISABLED"
+      [ngClass]="resolvedProps.size ? [resolvedProps.size] : []"
     >
-      <ion-icon *ngIf="props.icon" [slot]="props.icon.slot" [name]="props.icon.name"></ion-icon>
-      <ion-spinner *ngIf="props.state === states.WORKING" name="circular"></ion-spinner>
-      <ion-text *ngIf="props.state !== states.WORKING">{{ displayText }}</ion-text>
+      <ion-icon *ngIf="resolvedProps.icon" [slot]="resolvedProps.icon.slot" [name]="resolvedProps.icon.name"></ion-icon>
+      <ion-spinner *ngIf="resolvedProps.state === states.WORKING" name="circular"></ion-spinner>
+      <ion-text *ngIf="resolvedProps.state !== states.WORKING">{{ displayText }}</ion-text>
     </ion-button>
   `, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}ion-button{font-family:var(--ion-default-font),Arial,sans-serif;min-width:6.25rem;margin:0}ion-button.small{--padding-bottom: 12px;--padding-end: 14px;--padding-start: 14px;--padding-top: 12px}ion-button.button-clear{padding:0;margin:0}\n"] }]
-        }], ctorParameters: () => [{ type: DownloadService }, { type: IconService }, { type: NavigationService }], propDecorators: { props: [{
+        }], ctorParameters: () => [{ type: DownloadService }, { type: IconService }, { type: NavigationService }], propDecorators: { preset: [{
+                type: Input
+            }], props: [{
                 type: Input
             }], onClick: [{
                 type: Output
@@ -4189,7 +4377,7 @@ class ButtonGroupComponent {
         [ngStyle]="{ width: props.buttons.length === 1 ? '100%' : 'auto' }"
       ></val-button>
     </div>
-  `, isInline: true, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}val-button{display:inline-block;margin-top:.25rem;margin-right:.25rem}.group-container{width:100%}.group-container.left{text-align:left}.group-container.center{text-align:center}.group-container.right{text-align:right}.group-container.column{display:flex;flex-direction:column-reverse}.group-container.spaced{display:flex;justify-content:space-between}.group-container.leftocenter{text-align:left}@media (min-width: 768px){.group-container.leftocenter{text-align:center}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["props"], outputs: ["onClick"] }] }); }
+  `, isInline: true, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}val-button{display:inline-block;margin-top:.25rem;margin-right:.25rem}.group-container{width:100%}.group-container.left{text-align:left}.group-container.center{text-align:center}.group-container.right{text-align:right}.group-container.column{display:flex;flex-direction:column-reverse}.group-container.spaced{display:flex;justify-content:space-between}.group-container.leftocenter{text-align:left}@media (min-width: 768px){.group-container.leftocenter{text-align:center}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonGroupComponent, decorators: [{
             type: Component,
@@ -4409,7 +4597,7 @@ class CardComponent {
         </ng-container>
       </ion-buttons>
     </ion-card>
-  `, isInline: true, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}ion-card.tapable{transition:transform .3s ease,box-shadow .3s ease}ion-card.tapable:hover{transform:scale(1.01);box-shadow:.1875rem .625rem .5rem #1219541a}.tapable{cursor:pointer}.checker{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.complex-header{padding:10px;display:flex;flex-direction:row;justify-content:space-between;align-items:center}.complex-content{padding-left:10px;padding-top:4px;padding-bottom:10px}.complex{border-radius:16px}img{border-radius:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: AvatarComponent, selector: "val-avatar", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+  `, isInline: true, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}ion-card.tapable{transition:transform .3s ease,box-shadow .3s ease}ion-card.tapable:hover{transform:scale(1.01);box-shadow:.1875rem .625rem .5rem #1219541a}.tapable{cursor:pointer}.checker{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.complex-header{padding:10px;display:flex;flex-direction:row;justify-content:space-between;align-items:center}.complex-content{padding-left:10px;padding-top:4px;padding-bottom:10px}.complex{border-radius:16px}img{border-radius:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: AvatarComponent, selector: "val-avatar", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
@@ -4977,7 +5165,7 @@ class FileInputComponent {
       </div>
       <val-button [props]="contrastButton" (onClick)="fileInput.click()"></val-button>
     </div>
-  `, isInline: true, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.file-container{margin-top:.25rem}.name-container{display:flex;flex-direction:row;align-items:center}\n"], dependencies: [{ kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["props"], outputs: ["onClick"] }] }); }
+  `, isInline: true, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.file-container{margin-top:.25rem}.name-container{display:flex;flex-direction:row;align-items:center}\n"], dependencies: [{ kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileInputComponent, decorators: [{
             type: Component,
@@ -7833,7 +8021,7 @@ class ActionHeaderComponent {
       <val-display [props]="props.title" />
       <val-button [props]="props.action" />
     </section>
-  `, isInline: true, styles: [".header-content-container{width:100%;display:flex;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["props"], outputs: ["onClick"] }] }); }
+  `, isInline: true, styles: [".header-content-container{width:100%;display:flex;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionHeaderComponent, decorators: [{
             type: Component,
@@ -13626,7 +13814,7 @@ class RaffleStatusCardComponent {
         }
       </div>
     </article>
-  `, isInline: true, styles: [":host{display:block}.raffle-card{display:flex;flex-direction:column;background:var(--ion-color-light);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px #00000014;transition:transform .2s,box-shadow .2s}.raffle-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px #0000001f}.card-image{position:relative;aspect-ratio:16/9;overflow:hidden}.card-image val-image{width:100%;height:100%}.card-image val-image ::ng-deep img{width:100%;height:100%;object-fit:cover}.status-badge{position:absolute;top:12px;left:12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:4px 10px;border-radius:4px}.status-badge.inline{position:static;margin-bottom:8px}.countdown-overlay{position:absolute;bottom:0;left:0;right:0;padding:8px 12px;background:linear-gradient(transparent,#000000b3)}.card-content{display:flex;flex-direction:column;gap:12px;padding:16px}.card-header{display:flex;flex-direction:column;gap:4px}.card-title{font-size:18px;font-weight:600;color:var(--ion-color-dark);margin:0;line-height:1.3}.card-description{font-size:14px;color:var(--ion-color-medium-shade);margin:0;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.beneficiary-info{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ion-color-medium-shade)}.beneficiary-info ion-icon{font-size:16px;color:var(--ion-color-danger)}.beneficiary-info .beneficiary-image{width:24px;height:24px;border-radius:50%;overflow:hidden}.prize-preview{padding:12px;background:var(--ion-color-light-shade);border-radius:8px}.prize-header{display:flex;align-items:center;gap:4px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--ion-color-medium);margin-bottom:4px}.prize-header ion-icon{font-size:14px;color:var(--ion-color-warning)}.prize-name{font-size:15px;font-weight:600;color:var(--ion-color-dark)}.prize-value{font-size:18px;font-weight:700;color:var(--ion-color-success);margin-top:4px}.progress-section{display:flex;flex-direction:column;gap:6px}.progress-header{display:flex;justify-content:space-between;align-items:center}.progress-label{font-size:12px;color:var(--ion-color-medium-shade)}.progress-value{font-size:14px;font-weight:600;color:var(--ion-color-dark)}ion-progress-bar{height:8px;border-radius:4px;--background: var(--ion-color-light-shade)}.ticket-stats{display:flex;align-items:center;justify-content:center;gap:16px;padding:12px;background:var(--ion-color-light-shade);border-radius:8px}.stat{display:flex;align-items:center;gap:6px;font-size:13px}.stat ion-icon{font-size:18px;color:var(--ion-color-primary)}.stat-value{font-weight:700;color:var(--ion-color-dark);font-size:16px}.stat-label{color:var(--ion-color-medium-shade)}.stat-divider{width:1px;height:24px;background:var(--ion-color-medium-tint)}.price-section{display:flex;justify-content:center;padding:8px 0}.dates-section{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ion-color-medium-shade)}.date-item{display:flex;align-items:center;gap:6px}.date-item ion-icon{font-size:16px;color:var(--ion-color-primary)}.card-actions{display:flex;gap:8px;margin-top:4px}.card-actions val-button{flex:1}.variant-featured{border:2px solid var(--ion-color-warning)}.variant-featured .card-image{aspect-ratio:2/1}.variant-featured .card-title{font-size:22px}.variant-compact .card-content{padding:12px;gap:8px}.variant-compact .card-title{font-size:15px}.variant-compact .card-description{font-size:13px;-webkit-line-clamp:1}.variant-compact .ticket-stats,.variant-compact .dates-section{display:none}.variant-horizontal{flex-direction:row}.variant-horizontal .card-image{width:40%;min-width:150px;aspect-ratio:1}.variant-horizontal .card-content{flex:1;justify-content:center}.size-small .card-content{padding:12px;gap:8px}.size-small .card-title{font-size:15px}.size-small .card-description{font-size:12px}.size-small .ticket-stats{padding:8px}.size-small .stat-value{font-size:14px}.size-large .card-content{padding:24px;gap:16px}.size-large .card-title{font-size:24px}.size-large .card-description{font-size:16px}.size-large .prize-name{font-size:18px}.size-large .prize-value{font-size:22px}.status-upcoming{opacity:.9}.status-sold_out .card-image:after{content:\"\";position:absolute;inset:0;background:#0000004d}.status-completed .card-actions{opacity:.5;pointer-events:none}.status-cancelled{opacity:.6}.status-cancelled .card-image:after{content:\"\";position:absolute;inset:0;background:#0006}@media (max-width: 480px){.variant-horizontal{flex-direction:column}.variant-horizontal .card-image{width:100%;aspect-ratio:16/9}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { kind: "component", type: IonProgressBar, selector: "ion-progress-bar", inputs: ["buffer", "color", "mode", "reversed", "type", "value"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: CountdownComponent, selector: "val-countdown", inputs: ["props"], outputs: ["complete", "tick"] }, { kind: "component", type: PriceTagComponent, selector: "val-price-tag", inputs: ["props"] }] }); }
+  `, isInline: true, styles: [":host{display:block}.raffle-card{display:flex;flex-direction:column;background:var(--ion-color-light);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px #00000014;transition:transform .2s,box-shadow .2s}.raffle-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px #0000001f}.card-image{position:relative;aspect-ratio:16/9;overflow:hidden}.card-image val-image{width:100%;height:100%}.card-image val-image ::ng-deep img{width:100%;height:100%;object-fit:cover}.status-badge{position:absolute;top:12px;left:12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:4px 10px;border-radius:4px}.status-badge.inline{position:static;margin-bottom:8px}.countdown-overlay{position:absolute;bottom:0;left:0;right:0;padding:8px 12px;background:linear-gradient(transparent,#000000b3)}.card-content{display:flex;flex-direction:column;gap:12px;padding:16px}.card-header{display:flex;flex-direction:column;gap:4px}.card-title{font-size:18px;font-weight:600;color:var(--ion-color-dark);margin:0;line-height:1.3}.card-description{font-size:14px;color:var(--ion-color-medium-shade);margin:0;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.beneficiary-info{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ion-color-medium-shade)}.beneficiary-info ion-icon{font-size:16px;color:var(--ion-color-danger)}.beneficiary-info .beneficiary-image{width:24px;height:24px;border-radius:50%;overflow:hidden}.prize-preview{padding:12px;background:var(--ion-color-light-shade);border-radius:8px}.prize-header{display:flex;align-items:center;gap:4px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--ion-color-medium);margin-bottom:4px}.prize-header ion-icon{font-size:14px;color:var(--ion-color-warning)}.prize-name{font-size:15px;font-weight:600;color:var(--ion-color-dark)}.prize-value{font-size:18px;font-weight:700;color:var(--ion-color-success);margin-top:4px}.progress-section{display:flex;flex-direction:column;gap:6px}.progress-header{display:flex;justify-content:space-between;align-items:center}.progress-label{font-size:12px;color:var(--ion-color-medium-shade)}.progress-value{font-size:14px;font-weight:600;color:var(--ion-color-dark)}ion-progress-bar{height:8px;border-radius:4px;--background: var(--ion-color-light-shade)}.ticket-stats{display:flex;align-items:center;justify-content:center;gap:16px;padding:12px;background:var(--ion-color-light-shade);border-radius:8px}.stat{display:flex;align-items:center;gap:6px;font-size:13px}.stat ion-icon{font-size:18px;color:var(--ion-color-primary)}.stat-value{font-weight:700;color:var(--ion-color-dark);font-size:16px}.stat-label{color:var(--ion-color-medium-shade)}.stat-divider{width:1px;height:24px;background:var(--ion-color-medium-tint)}.price-section{display:flex;justify-content:center;padding:8px 0}.dates-section{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ion-color-medium-shade)}.date-item{display:flex;align-items:center;gap:6px}.date-item ion-icon{font-size:16px;color:var(--ion-color-primary)}.card-actions{display:flex;gap:8px;margin-top:4px}.card-actions val-button{flex:1}.variant-featured{border:2px solid var(--ion-color-warning)}.variant-featured .card-image{aspect-ratio:2/1}.variant-featured .card-title{font-size:22px}.variant-compact .card-content{padding:12px;gap:8px}.variant-compact .card-title{font-size:15px}.variant-compact .card-description{font-size:13px;-webkit-line-clamp:1}.variant-compact .ticket-stats,.variant-compact .dates-section{display:none}.variant-horizontal{flex-direction:row}.variant-horizontal .card-image{width:40%;min-width:150px;aspect-ratio:1}.variant-horizontal .card-content{flex:1;justify-content:center}.size-small .card-content{padding:12px;gap:8px}.size-small .card-title{font-size:15px}.size-small .card-description{font-size:12px}.size-small .ticket-stats{padding:8px}.size-small .stat-value{font-size:14px}.size-large .card-content{padding:24px;gap:16px}.size-large .card-title{font-size:24px}.size-large .card-description{font-size:16px}.size-large .prize-name{font-size:18px}.size-large .prize-value{font-size:22px}.status-upcoming{opacity:.9}.status-sold_out .card-image:after{content:\"\";position:absolute;inset:0;background:#0000004d}.status-completed .card-actions{opacity:.5;pointer-events:none}.status-cancelled{opacity:.6}.status-cancelled .card-image:after{content:\"\";position:absolute;inset:0;background:#0006}@media (max-width: 480px){.variant-horizontal{flex-direction:column}.variant-horizontal .card-image{width:100%;aspect-ratio:16/9}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { kind: "component", type: IonProgressBar, selector: "ion-progress-bar", inputs: ["buffer", "color", "mode", "reversed", "type", "value"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: CountdownComponent, selector: "val-countdown", inputs: ["props"], outputs: ["complete", "tick"] }, { kind: "component", type: PriceTagComponent, selector: "val-price-tag", inputs: ["props"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RaffleStatusCardComponent, decorators: [{
             type: Component,
@@ -15976,7 +16164,7 @@ class ArticleComponent {
         </ng-container>
       </div>
     </article>
-  `, isInline: true, styles: [".val-article{width:100%;margin:0 auto;line-height:1.6;color:var(--ion-color-dark, #1f2937);display:block;position:static}.val-article--centered{margin:0 auto}.val-article--light{background-color:var(--ion-color-light, #ffffff);color:var(--ion-color-dark, #1f2937)}.val-article--dark{background-color:var(--ion-color-dark, #1f2937);color:var(--ion-color-light, #ffffff)}.val-article__element{position:relative}.val-article__element:last-child{margin-bottom:0!important}.val-article__spacing-top--none{margin-top:0!important}.val-article__spacing-top--small{margin-top:.5rem!important}.val-article__spacing-top--medium{margin-top:1rem!important}.val-article__spacing-top--large{margin-top:1.5rem!important}.val-article__spacing-top--xlarge{margin-top:2.5rem!important}.val-article__spacing-bottom--none{margin-bottom:0!important}.val-article__spacing-bottom--small{margin-bottom:.5rem!important}.val-article__spacing-bottom--medium{margin-bottom:1rem!important}.val-article__spacing-bottom--large{margin-bottom:1.5rem!important}.val-article__spacing-bottom--xlarge{margin-bottom:2.5rem!important}.val-article__spacing-horizontal--none{margin-left:0!important;margin-right:0!important}.val-article__spacing-horizontal--small{margin-left:.5rem!important;margin-right:.5rem!important}.val-article__spacing-horizontal--medium{margin-left:1rem!important;margin-right:1rem!important}.val-article__spacing-horizontal--large{margin-left:1.5rem!important;margin-right:1.5rem!important}.val-article__spacing-horizontal--xlarge{margin-left:2.5rem!important;margin-right:2.5rem!important}.val-article__quote{border-left:4px solid #0969da;padding:1rem;background-color:var(--ion-color-light-shade, #f8f9fa);border-radius:0 8px 8px 0;font-style:italic}.val-article__quote-content{margin-bottom:.5rem;font-size:1.1em}.val-article__quote-author{font-size:.9em;color:var(--ion-color-medium, #6c757d);font-style:normal;font-weight:500;text-align:right}.val-article__quote-source{font-weight:400;opacity:.8}.val-article__highlight{padding:1rem;background-color:var(--ion-color-warning-tint, #fff3cd);border:1px solid var(--ion-color-warning, #ffc107);border-radius:4px}.val-article__highlight--rounded{border-radius:12px}.val-article__code{border-radius:8px;overflow:hidden;border:1px solid #e1e5e9}.val-article__code-language{background-color:var(--ion-color-medium-tint, #f8f9fa);padding:.5rem 1rem;font-size:.875em;font-weight:500;color:var(--ion-color-dark, #495057);border-bottom:1px solid #e1e5e9;text-transform:uppercase;letter-spacing:.5px}.val-article__code-content{background-color:#f6f8fa;color:#24292e;padding:1rem;margin:0;overflow-x:auto;font-family:SFMono-Regular,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.875em;line-height:1.5}.val-article__code-content code{background:none;padding:0;font-size:inherit;color:inherit}.val-article__code-content--dark{background-color:#161b22;color:#f0f6fc}.val-article__list{padding-left:1.5rem}.val-article__list--ordered{list-style-type:decimal}.val-article__list-item{margin-bottom:.5rem;line-height:1.6;position:relative}.val-article__list-item:last-child{margin-bottom:0}.val-article__list-check{color:var(--ion-color-success, #28a745);font-weight:700;margin-right:.5rem;position:absolute;left:-1.5rem}.val-article .val-article__list:has(.val-article__list-check){list-style:none;padding-left:1rem}.val-article__button-container--left{text-align:left}.val-article__button-container--center{text-align:center}.val-article__button-container--right{text-align:right}.val-article__separator{text-align:center}.val-article__separator-line{border:none;height:1px;background-color:#d0d7de;margin:0}.val-article__separator-line--thin{height:1px}.val-article__separator-line--thick{height:3px}.val-article__separator-dots{color:#d0d7de;font-size:1.5em;letter-spacing:.5em;-webkit-user-select:none;user-select:none}.val-article__separator-space{height:0}.val-article__image{text-align:center}.val-article__image--left{text-align:left}.val-article__image--center{text-align:center}.val-article__image--right{text-align:right}.val-article__image-content{max-width:100%;height:auto;border-radius:4px;box-shadow:0 2px 8px #0000001a;transition:transform .2s ease}.val-article__image-content:hover{transform:scale(1.02)}.val-article__image-content--rounded{border-radius:12px}.val-article__image-caption{margin-top:.5rem;font-size:.875em;color:var(--ion-color-medium, #6c757d);font-style:italic;text-align:center}.val-article__video{text-align:center}.val-article__video-content{max-width:100%;height:auto;border-radius:8px;box-shadow:0 4px 12px #00000026}.val-article__video-title{margin-top:.5rem;font-size:.9em;color:var(--ion-color-medium, #6c757d);font-weight:500}.val-article__custom *{max-width:100%}@media (max-width: 768px){.val-article__code-content{font-size:.8em;padding:.5rem}.val-article__image-content:hover{transform:none}.val-article__quote,.val-article__highlight{padding:.5rem}}@media (prefers-color-scheme: dark){.val-article--auto{background-color:var(--ion-color-dark, #1f2937);color:var(--ion-color-light, #ffffff)}.val-article--auto .val-article__quote{background-color:#ffffff0d}.val-article--auto .val-article__highlight{background-color:#ffc1071a;border-color:var(--ion-color-warning-shade, #e0a800)}.val-article--auto .val-article__code-content{background-color:#161b22;color:#f0f6fc}}.val-article__element{animation:fadeInUp .3s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (prefers-contrast: high){.val-article__separator-line{background-color:currentColor;opacity:.5}.val-article__quote{border-left-width:6px}}@media (prefers-reduced-motion: reduce){.val-article .val-article__element{animation:none}.val-article__image-content{transition:none}.val-article__image-content:hover{transform:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }, { kind: "component", type: CodeDisplayComponent, selector: "val-code-display", inputs: ["props"] }, { kind: "component", type: NotesBoxComponent, selector: "val-notes-box", inputs: ["props"] }, { kind: "component", type: PlainCodeBoxComponent, selector: "val-plain-code-box", inputs: ["props"] }] }); }
+  `, isInline: true, styles: [".val-article{width:100%;margin:0 auto;line-height:1.6;color:var(--ion-color-dark, #1f2937);display:block;position:static}.val-article--centered{margin:0 auto}.val-article--light{background-color:var(--ion-color-light, #ffffff);color:var(--ion-color-dark, #1f2937)}.val-article--dark{background-color:var(--ion-color-dark, #1f2937);color:var(--ion-color-light, #ffffff)}.val-article__element{position:relative}.val-article__element:last-child{margin-bottom:0!important}.val-article__spacing-top--none{margin-top:0!important}.val-article__spacing-top--small{margin-top:.5rem!important}.val-article__spacing-top--medium{margin-top:1rem!important}.val-article__spacing-top--large{margin-top:1.5rem!important}.val-article__spacing-top--xlarge{margin-top:2.5rem!important}.val-article__spacing-bottom--none{margin-bottom:0!important}.val-article__spacing-bottom--small{margin-bottom:.5rem!important}.val-article__spacing-bottom--medium{margin-bottom:1rem!important}.val-article__spacing-bottom--large{margin-bottom:1.5rem!important}.val-article__spacing-bottom--xlarge{margin-bottom:2.5rem!important}.val-article__spacing-horizontal--none{margin-left:0!important;margin-right:0!important}.val-article__spacing-horizontal--small{margin-left:.5rem!important;margin-right:.5rem!important}.val-article__spacing-horizontal--medium{margin-left:1rem!important;margin-right:1rem!important}.val-article__spacing-horizontal--large{margin-left:1.5rem!important;margin-right:1.5rem!important}.val-article__spacing-horizontal--xlarge{margin-left:2.5rem!important;margin-right:2.5rem!important}.val-article__quote{border-left:4px solid #0969da;padding:1rem;background-color:var(--ion-color-light-shade, #f8f9fa);border-radius:0 8px 8px 0;font-style:italic}.val-article__quote-content{margin-bottom:.5rem;font-size:1.1em}.val-article__quote-author{font-size:.9em;color:var(--ion-color-medium, #6c757d);font-style:normal;font-weight:500;text-align:right}.val-article__quote-source{font-weight:400;opacity:.8}.val-article__highlight{padding:1rem;background-color:var(--ion-color-warning-tint, #fff3cd);border:1px solid var(--ion-color-warning, #ffc107);border-radius:4px}.val-article__highlight--rounded{border-radius:12px}.val-article__code{border-radius:8px;overflow:hidden;border:1px solid #e1e5e9}.val-article__code-language{background-color:var(--ion-color-medium-tint, #f8f9fa);padding:.5rem 1rem;font-size:.875em;font-weight:500;color:var(--ion-color-dark, #495057);border-bottom:1px solid #e1e5e9;text-transform:uppercase;letter-spacing:.5px}.val-article__code-content{background-color:#f6f8fa;color:#24292e;padding:1rem;margin:0;overflow-x:auto;font-family:SFMono-Regular,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.875em;line-height:1.5}.val-article__code-content code{background:none;padding:0;font-size:inherit;color:inherit}.val-article__code-content--dark{background-color:#161b22;color:#f0f6fc}.val-article__list{padding-left:1.5rem}.val-article__list--ordered{list-style-type:decimal}.val-article__list-item{margin-bottom:.5rem;line-height:1.6;position:relative}.val-article__list-item:last-child{margin-bottom:0}.val-article__list-check{color:var(--ion-color-success, #28a745);font-weight:700;margin-right:.5rem;position:absolute;left:-1.5rem}.val-article .val-article__list:has(.val-article__list-check){list-style:none;padding-left:1rem}.val-article__button-container--left{text-align:left}.val-article__button-container--center{text-align:center}.val-article__button-container--right{text-align:right}.val-article__separator{text-align:center}.val-article__separator-line{border:none;height:1px;background-color:#d0d7de;margin:0}.val-article__separator-line--thin{height:1px}.val-article__separator-line--thick{height:3px}.val-article__separator-dots{color:#d0d7de;font-size:1.5em;letter-spacing:.5em;-webkit-user-select:none;user-select:none}.val-article__separator-space{height:0}.val-article__image{text-align:center}.val-article__image--left{text-align:left}.val-article__image--center{text-align:center}.val-article__image--right{text-align:right}.val-article__image-content{max-width:100%;height:auto;border-radius:4px;box-shadow:0 2px 8px #0000001a;transition:transform .2s ease}.val-article__image-content:hover{transform:scale(1.02)}.val-article__image-content--rounded{border-radius:12px}.val-article__image-caption{margin-top:.5rem;font-size:.875em;color:var(--ion-color-medium, #6c757d);font-style:italic;text-align:center}.val-article__video{text-align:center}.val-article__video-content{max-width:100%;height:auto;border-radius:8px;box-shadow:0 4px 12px #00000026}.val-article__video-title{margin-top:.5rem;font-size:.9em;color:var(--ion-color-medium, #6c757d);font-weight:500}.val-article__custom *{max-width:100%}@media (max-width: 768px){.val-article__code-content{font-size:.8em;padding:.5rem}.val-article__image-content:hover{transform:none}.val-article__quote,.val-article__highlight{padding:.5rem}}@media (prefers-color-scheme: dark){.val-article--auto{background-color:var(--ion-color-dark, #1f2937);color:var(--ion-color-light, #ffffff)}.val-article--auto .val-article__quote{background-color:#ffffff0d}.val-article--auto .val-article__highlight{background-color:#ffc1071a;border-color:var(--ion-color-warning-shade, #e0a800)}.val-article--auto .val-article__code-content{background-color:#161b22;color:#f0f6fc}}.val-article__element{animation:fadeInUp .3s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (prefers-contrast: high){.val-article__separator-line{background-color:currentColor;opacity:.5}.val-article__quote{border-left-width:6px}}@media (prefers-reduced-motion: reduce){.val-article .val-article__element{animation:none}.val-article__image-content{transition:none}.val-article__image-content:hover{transform:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }, { kind: "component", type: CodeDisplayComponent, selector: "val-code-display", inputs: ["props"] }, { kind: "component", type: NotesBoxComponent, selector: "val-notes-box", inputs: ["props"] }, { kind: "component", type: PlainCodeBoxComponent, selector: "val-plain-code-box", inputs: ["props"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ArticleComponent, decorators: [{
             type: Component,
@@ -19912,7 +20100,7 @@ class MenuComponent {
         />
       }
     </ion-menu>
-  `, isInline: true, styles: ["ion-menu{--min-width: 75%}@media (min-width: 768px){ion-menu{--min-width: 40%}}ion-menu ion-header{background:var(--ion-color-light)}ion-menu ion-content{--background: var(--ion-color-light)}.menu-close-button{display:block;margin:1rem .5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonMenu, selector: "ion-menu", inputs: ["contentId", "disabled", "maxEdgeStart", "menuId", "side", "swipeGesture", "type"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["props"], outputs: ["onClick"] }] }); }
+  `, isInline: true, styles: ["ion-menu{--min-width: 75%}@media (min-width: 768px){ion-menu{--min-width: 40%}}ion-menu ion-header{background:var(--ion-color-light)}ion-menu ion-content{--background: var(--ion-color-light)}.menu-close-button{display:block;margin:1rem .5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonMenu, selector: "ion-menu", inputs: ["contentId", "disabled", "maxEdgeStart", "menuId", "side", "swipeGesture", "type"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
@@ -20393,7 +20581,7 @@ class PageTemplateComponent {
         </ion-row>
       }
     </ion-grid>
-  `, isInline: true, styles: [".page-title{padding:0;font-size:1.6rem;font-weight:800}@media (min-width: 768px){.page-title{font-size:2rem}}.description-row{margin-bottom:16px}.description-container{margin-top:1rem}.back-row{margin-bottom:16px}.back-button{display:block;margin:1rem 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: ExpandableTextComponent, selector: "val-expandable-text", inputs: ["props"] }, { kind: "component", type: IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: IonRow, selector: "ion-row" }, { kind: "component", type: IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["props"], outputs: ["onClick"] }] }); }
+  `, isInline: true, styles: [".page-title{padding:0;font-size:1.6rem;font-weight:800}@media (min-width: 768px){.page-title{font-size:2rem}}.description-row{margin-bottom:16px}.description-container{margin-top:1rem}.back-row{margin-bottom:16px}.back-button{display:block;margin:1rem 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: ExpandableTextComponent, selector: "val-expandable-text", inputs: ["props"] }, { kind: "component", type: IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: IonRow, selector: "ion-row" }, { kind: "component", type: IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageTemplateComponent, decorators: [{
             type: Component,
@@ -21482,99 +21670,942 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  */
 
 /**
- * Firebase Configuration
+ * Analytics Service (Firebase GA4)
  *
- * Configuración e inicialización de Firebase para aplicaciones Angular.
- * Usa provideValtechFirebase() en el bootstrap de tu aplicación.
- */
-/**
- * Token de inyección para la configuración de Firebase.
- * Usado internamente por los servicios de Firebase.
+ * Servicio para tracking de eventos, page views y errores con Firebase Analytics.
+ * Integra con el sistema de auth para user properties y respeta consent mode GDPR.
  */
-const VALTECH_FIREBASE_CONFIG = new InjectionToken('ValtechFirebaseConfig');
+/** Key por defecto para persistir consent en localStorage */
+const DEFAULT_CONSENT_STORAGE_KEY = 'analytics_consent';
+/** Máximo de eventos en historial de debug */
+const MAX_DEBUG_HISTORY = 100;
 /**
- * Provee Firebase a la aplicación Angular.
+ * Servicio de Firebase Analytics (GA4).
  *
- * @param config - Configuración de Firebase
- * @returns EnvironmentProviders para usar en bootstrapApplication
+ * Proporciona tracking de eventos, page views, errores y métricas de performance.
+ * Soporta GDPR Consent Mode y modo debug para desarrollo.
  *
  * @example
  * ```typescript
- * // main.ts
- * import { bootstrapApplication } from '@angular/platform-browser';
- * import { provideValtechFirebase } from 'valtech-components';
- * import { environment } from './environments/environment';
- *
- * bootstrapApplication(AppComponent, {
- *   providers: [
- *     provideValtechFirebase({
- *       firebase: environment.firebase,
- *       persistence: true,
- *       emulator: environment.useEmulators ? {
- *         firestore: { host: 'localhost', port: 8080 },
- *         auth: { host: 'localhost', port: 9099 },
- *         storage: { host: 'localhost', port: 9199 },
- *       } : undefined,
- *     }),
- *   ],
- * });
+ * @Component({...})
+ * export class ProductComponent {
+ *   private analytics = inject(AnalyticsService);
+ *
+ *   onPurchase(product: Product) {
+ *     this.analytics.logEvent('purchase', {
+ *       transaction_id: order.id,
+ *       value: order.total,
+ *       currency: 'EUR'
+ *     });
+ *   }
+ * }
  * ```
  */
-function provideValtechFirebase(config) {
-    // Construir array de providers base
-    const providers = [
-        // Guardar configuración para uso en servicios
-        { provide: VALTECH_FIREBASE_CONFIG, useValue: config },
-        // Inicializar Firebase App
-        provideFirebaseApp(() => initializeApp(config.firebase)),
-        // Firestore con soporte para emuladores y persistencia
-        provideFirestore(() => {
-            const firestore = getFirestore();
-            // Conectar a emulador si está configurado
-            if (config.emulator?.firestore) {
-                connectFirestoreEmulator(firestore, config.emulator.firestore.host, config.emulator.firestore.port);
-            }
-            // Habilitar persistencia offline si está configurada
-            if (config.persistence) {
-                enableIndexedDbPersistence(firestore).catch((err) => {
-                    if (err.code === 'failed-precondition') {
-                        console.warn('[ValtechFirebase] Persistencia no disponible: múltiples pestañas abiertas');
-                    }
-                    else if (err.code === 'unimplemented') {
-                        console.warn('[ValtechFirebase] Persistencia no soportada en este navegador');
-                    }
-                });
-            }
-            return firestore;
-        }),
-        // Auth con soporte para emulador
-        provideAuth(() => {
-            const auth = getAuth();
-            // Conectar a emulador si está configurado
-            if (config.emulator?.auth) {
-                connectAuthEmulator(auth, `http://${config.emulator.auth.host}:${config.emulator.auth.port}`, { disableWarnings: true });
-            }
-            return auth;
-        }),
-        // Storage con soporte para emulador
-        provideStorage(() => {
-            const storage = getStorage();
-            // Conectar a emulador si está configurado
-            if (config.emulator?.storage) {
-                connectStorageEmulator(storage, config.emulator.storage.host, config.emulator.storage.port);
-            }
-            return storage;
-        }),
-    ];
-    // Messaging (FCM) - solo si está explícitamente habilitado
-    // Requiere Service Worker configurado, puede congelar la app si no está disponible
-    if (config.enableMessaging) {
-        // Pre-registrar SW custom antes de que Firebase lo intente
-        if (typeof navigator !== 'undefined' && 'serviceWorker' in navigator) {
-            navigator.serviceWorker.register('/firebase-messaging-sw.js').catch(console.error);
+class AnalyticsService {
+    constructor(injector, config, platformId) {
+        this.injector = injector;
+        this.config = config;
+        this.platformId = platformId;
+        // ===========================================================================
+        // ESTADO (Signals)
+        // ===========================================================================
+        this._consentState = signal({
+            settings: {},
+            updatedAt: null,
+            hasDecided: false,
+        });
+        this._isDebugMode = signal(false);
+        this._debugHistory = signal([]);
+        /** Estado de consentimiento actual (readonly) */
+        this.consentState = this._consentState.asReadonly();
+        /** Indica si está en modo debug */
+        this.isDebugMode = this._isDebugMode.asReadonly();
+        /** Indica si analytics está habilitado y funcionando */
+        this.isEnabled = computed(() => {
+            return this.isAnalyticsSupported() && this._consentState().settings.analytics === true;
+        });
+        this.analyticsConfig = config.analyticsConfig ?? {};
+        this.consentStorageKey =
+            this.analyticsConfig.consentStorageKey ?? DEFAULT_CONSENT_STORAGE_KEY;
+        this.eventPrefix = this.analyticsConfig.eventPrefix ?? '';
+        this.samplingRate = this.analyticsConfig.samplingRate ?? 1.0;
+        this.initializeAnalytics();
+    }
+    // ===========================================================================
+    // INICIALIZACIÓN
+    // ===========================================================================
+    /**
+     * Inicializa el servicio de analytics
+     */
+    initializeAnalytics() {
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        // Cargar consent desde localStorage
+        this.loadConsentFromStorage();
+        // Configurar debug mode
+        const debugMode = this.analyticsConfig.debugMode ?? false;
+        this._isDebugMode.set(debugMode);
+        // Aplicar consent inicial a gtag
+        this.applyConsentToGtag(this._consentState().settings);
+        // Setear user properties por defecto
+        if (this.analyticsConfig.defaultUserProperties) {
+            this.setUserProperties(this.analyticsConfig.defaultUserProperties);
+        }
+        if (debugMode) {
+            console.log('[Analytics] Inicializado en modo debug - eventos NO se envían a Firebase');
+        }
+    }
+    /**
+     * Obtiene la instancia de Analytics de forma perezosa.
+     * Esto evita el error de APP_INITIALIZER de AngularFire.
+     */
+    getAnalyticsInstance() {
+        if (!this.config.enableAnalytics) {
+            return null;
+        }
+        try {
+            return this.injector.get(Analytics, null);
+        }
+        catch {
+            return null;
+        }
+    }
+    /**
+     * Verifica si Analytics está soportado
+     */
+    isAnalyticsSupported() {
+        if (!isPlatformBrowser(this.platformId)) {
+            return false;
+        }
+        if (!this.config.enableAnalytics) {
+            return false;
+        }
+        if (!this.config.firebase.measurementId) {
+            console.warn('[Analytics] measurementId no configurado en firebase config');
+            return false;
+        }
+        return true;
+    }
+    /**
+     * Verifica si debe enviar el evento (sampling)
+     */
+    shouldSample() {
+        if (this.samplingRate >= 1.0) {
+            return true;
+        }
+        return Math.random() < this.samplingRate;
+    }
+    // ===========================================================================
+    // PAGE VIEWS
+    // ===========================================================================
+    /**
+     * Registra un page view.
+     * Normalmente se usa automáticamente via AnalyticsRouterTracker.
+     *
+     * @param pagePath - Ruta de la página (ej: '/products/123')
+     * @param pageTitle - Título de la página (opcional)
+     */
+    logPageView(pagePath, pageTitle) {
+        this.logEvent('page_view', {
+            page_path: pagePath,
+            page_title: pageTitle ?? document?.title,
+            page_location: window?.location?.href,
+        });
+    }
+    /**
+     * Registra un screen view (para apps tipo SPA).
+     *
+     * @param screenName - Nombre del screen
+     * @param screenClass - Clase del screen (opcional)
+     */
+    logScreenView(screenName, screenClass) {
+        this.logEvent('screen_view', {
+            screen_name: screenName,
+            screen_class: screenClass,
+        });
+    }
+    // ===========================================================================
+    // EVENTOS
+    // ===========================================================================
+    /**
+     * Registra un evento tipado GA4.
+     *
+     * @param eventName - Nombre del evento (tipado)
+     * @param params - Parámetros del evento (tipados según el nombre)
+     *
+     * @example
+     * ```typescript
+     * // Evento tipado con autocompletado
+     * analytics.logEvent('add_to_cart', {
+     *   item_id: '123',
+     *   item_name: 'Producto',
+     *   value: 99.99,
+     *   currency: 'EUR'
+     * });
+     * ```
+     */
+    logEvent(eventName, params) {
+        this.trackEvent(eventName, params);
+    }
+    /**
+     * Registra un evento custom con parámetros libres.
+     * Usar cuando el evento no está en el catálogo tipado.
+     *
+     * @param eventName - Nombre del evento custom
+     * @param params - Parámetros libres
+     */
+    logCustomEvent(eventName, params) {
+        const prefixedName = this.eventPrefix + eventName;
+        this.trackEvent(prefixedName, params);
+    }
+    /**
+     * Lógica común para enviar eventos
+     */
+    trackEvent(eventName, params) {
+        // Verificar consent
+        if (!this._consentState().settings.analytics) {
+            this.addToDebugHistory('event', eventName, params, false);
+            return;
+        }
+        // Aplicar sampling
+        if (!this.shouldSample()) {
+            return;
+        }
+        // Debug mode: solo log, no enviar
+        if (this._isDebugMode()) {
+            this.addToDebugHistory('event', eventName, params, false);
+            console.log(`[Analytics] Event: ${eventName}`, params);
+            return;
+        }
+        // Enviar a Firebase
+        const analytics = this.getAnalyticsInstance();
+        if (analytics) {
+            try {
+                logEvent(analytics, eventName, params);
+                this.addToDebugHistory('event', eventName, params, true);
+            }
+            catch (error) {
+                console.error('[Analytics] Error enviando evento:', error);
+            }
+        }
+    }
+    // ===========================================================================
+    // ECOMMERCE
+    // ===========================================================================
+    /**
+     * Registra vista de item
+     */
+    logViewItem(item) {
+        this.logEvent('view_item', {
+            item_id: item.item_id,
+            item_name: item.item_name,
+            value: item.price,
+            currency: item.currency,
+        });
+    }
+    /**
+     * Registra agregar al carrito
+     */
+    logAddToCart(item, quantity = 1) {
+        this.logEvent('add_to_cart', {
+            item_id: item.item_id,
+            item_name: item.item_name,
+            value: (item.price ?? 0) * quantity,
+            currency: item.currency,
+            quantity,
+        });
+    }
+    /**
+     * Registra inicio de checkout
+     */
+    logBeginCheckout(items, value, currency = 'EUR') {
+        this.logEvent('begin_checkout', {
+            value,
+            currency,
+            items,
+        });
+    }
+    /**
+     * Registra compra completada
+     */
+    logPurchase(transactionId, items, value, currency = 'EUR') {
+        this.logEvent('purchase', {
+            transaction_id: transactionId,
+            value,
+            currency,
+            items,
+        });
+    }
+    // ===========================================================================
+    // USER PROPERTIES
+    // ===========================================================================
+    /**
+     * Setea el userId para asociar eventos con el usuario.
+     * Llamado automáticamente si enableAuthIntegration=true.
+     *
+     * @param userId - ID del usuario o null para limpiar
+     */
+    setUserId(userId) {
+        if (!this.isAnalyticsSupported()) {
+            return;
+        }
+        if (this._isDebugMode()) {
+            console.log(`[Analytics] Set userId: ${userId}`);
+            this.addToDebugHistory('user_property', 'user_id', { userId }, false);
+            return;
+        }
+        const analytics = this.getAnalyticsInstance();
+        if (analytics) {
+            try {
+                setUserId(analytics, userId);
+            }
+            catch (error) {
+                console.error('[Analytics] Error seteando userId:', error);
+            }
+        }
+    }
+    /**
+     * Setea propiedades del usuario para segmentación.
+     *
+     * @param properties - Propiedades key-value
+     *
+     * @example
+     * ```typescript
+     * analytics.setUserProperties({
+     *   subscription_tier: 'premium',
+     *   preferred_language: 'es'
+     * });
+     * ```
+     */
+    setUserProperties(properties) {
+        if (!this.isAnalyticsSupported()) {
+            return;
+        }
+        if (this._isDebugMode()) {
+            console.log('[Analytics] Set user properties:', properties);
+            this.addToDebugHistory('user_property', 'properties', properties, false);
+            return;
+        }
+        const analytics = this.getAnalyticsInstance();
+        if (analytics) {
+            try {
+                // Convertir a Record<string, string> para Firebase
+                const stringProps = {};
+                for (const [key, value] of Object.entries(properties)) {
+                    if (value !== undefined) {
+                        stringProps[key] = String(value);
+                    }
+                }
+                setUserProperties(analytics, stringProps);
+            }
+            catch (error) {
+                console.error('[Analytics] Error seteando user properties:', error);
+            }
+        }
+    }
+    /**
+     * Setea la organización activa (multi-tenant).
+     * Llamado automáticamente si enableAuthIntegration=true.
+     *
+     * @param orgId - ID de la organización o null
+     */
+    setActiveOrganization(orgId) {
+        if (orgId) {
+            this.setUserProperties({ active_organization: orgId });
+        }
+    }
+    // ===========================================================================
+    // ERROR TRACKING
+    // ===========================================================================
+    /**
+     * Registra un error para tracking.
+     * Integra automáticamente con Angular ErrorHandler si enableErrorTracking=true.
+     *
+     * @param error - Error o mensaje de error
+     * @param context - Contexto adicional
+     *
+     * @example
+     * ```typescript
+     * try {
+     *   await riskyOperation();
+     * } catch (error) {
+     *   analytics.logError(error, { context: 'checkout_flow' });
+     * }
+     * ```
+     */
+    logError(error, context) {
+        const errorMessage = error instanceof Error ? error.message : error;
+        const errorStack = error instanceof Error ? error.stack : undefined;
+        const errorType = error instanceof Error ? error.name : 'Error';
+        this.logEvent('error_occurred', {
+            error_type: errorType,
+            error_message: errorMessage.substring(0, 100), // Limitar longitud
+            error_stack: errorStack?.substring(0, 500),
+            context: context ? JSON.stringify(context) : undefined,
+        });
+    }
+    /**
+     * Registra un error fatal (crash-level).
+     */
+    logFatalError(error, context) {
+        this.logError(error, { ...context, severity: 'fatal' });
+    }
+    // ===========================================================================
+    // CONSENT MODE (GDPR)
+    // ===========================================================================
+    /**
+     * Actualiza el estado de consentimiento del usuario.
+     * Afecta qué datos se recolectan y envían.
+     *
+     * @param consent - Settings de consentimiento
+     *
+     * @example
+     * ```typescript
+     * // Usuario acepta todo
+     * analytics.updateConsent({ analytics: true, advertising: true });
+     *
+     * // Usuario rechaza publicidad
+     * analytics.updateConsent({ analytics: true, advertising: false });
+     * ```
+     */
+    updateConsent(consent) {
+        const newState = {
+            settings: { ...this._consentState().settings, ...consent },
+            updatedAt: new Date(),
+            hasDecided: true,
+        };
+        this._consentState.set(newState);
+        this.saveConsentToStorage(newState);
+        this.applyConsentToGtag(newState.settings);
+        this.addToDebugHistory('consent', 'update', consent, false);
+    }
+    /**
+     * Deniega todo consentimiento.
+     */
+    denyAllConsent() {
+        this.updateConsent({
+            analytics: false,
+            advertising: false,
+            functionality: false,
+            security: true, // Siempre permitido
+        });
+    }
+    /**
+     * Acepta todo consentimiento.
+     */
+    grantAllConsent() {
+        this.updateConsent({
+            analytics: true,
+            advertising: true,
+            functionality: true,
+            security: true,
+        });
+    }
+    /**
+     * Obtiene el estado actual de consentimiento.
+     */
+    getConsentState() {
+        return this._consentState();
+    }
+    /**
+     * Aplica consent settings a gtag (GA4 Consent Mode v2)
+     */
+    applyConsentToGtag(settings) {
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        const gtag = window.gtag;
+        if (typeof gtag !== 'function') {
+            return;
+        }
+        try {
+            gtag('consent', 'update', {
+                analytics_storage: settings.analytics ? 'granted' : 'denied',
+                ad_storage: settings.advertising ? 'granted' : 'denied',
+                ad_user_data: settings.advertising ? 'granted' : 'denied',
+                ad_personalization: settings.advertising ? 'granted' : 'denied',
+                functionality_storage: settings.functionality ? 'granted' : 'denied',
+                security_storage: settings.security !== false ? 'granted' : 'denied',
+            });
+        }
+        catch (error) {
+            console.warn('[Analytics] Error aplicando consent a gtag:', error);
+        }
+    }
+    /**
+     * Carga consent desde localStorage
+     */
+    loadConsentFromStorage() {
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        try {
+            const stored = localStorage.getItem(this.consentStorageKey);
+            if (stored) {
+                const parsed = JSON.parse(stored);
+                this._consentState.set({
+                    ...parsed,
+                    updatedAt: parsed.updatedAt ? new Date(parsed.updatedAt) : null,
+                });
+            }
+            else if (this.analyticsConfig.defaultConsent) {
+                // Aplicar consent por defecto si no hay guardado
+                this._consentState.set({
+                    settings: this.analyticsConfig.defaultConsent,
+                    updatedAt: null,
+                    hasDecided: false,
+                });
+            }
+        }
+        catch (error) {
+            console.warn('[Analytics] Error cargando consent:', error);
+        }
+    }
+    /**
+     * Guarda consent en localStorage
+     */
+    saveConsentToStorage(state) {
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        try {
+            localStorage.setItem(this.consentStorageKey, JSON.stringify(state));
+        }
+        catch (error) {
+            console.warn('[Analytics] Error guardando consent:', error);
+        }
+    }
+    // ===========================================================================
+    // TIMING / PERFORMANCE
+    // ===========================================================================
+    /**
+     * Registra una métrica de timing/performance.
+     *
+     * @param name - Nombre de la métrica
+     * @param valueMs - Valor en milisegundos
+     * @param params - Parámetros adicionales
+     *
+     * @example
+     * ```typescript
+     * const start = performance.now();
+     * await loadData();
+     * analytics.logTiming('data_load', performance.now() - start, {
+     *   category: 'api',
+     *   endpoint: '/products'
+     * });
+     * ```
+     */
+    logTiming(name, valueMs, params) {
+        this.logEvent('performance_metric', {
+            metric_name: name,
+            value: Math.round(valueMs),
+            unit: 'ms',
+            ...params,
+        });
+    }
+    // ===========================================================================
+    // DEBUG
+    // ===========================================================================
+    /**
+     * Habilita/deshabilita modo debug.
+     * En debug: logea a consola, no envía a Firebase.
+     */
+    setDebugMode(enabled) {
+        this._isDebugMode.set(enabled);
+        console.log(`[Analytics] Debug mode: ${enabled ? 'ON' : 'OFF'}`);
+    }
+    /**
+     * Obtiene historial de eventos (solo en debug mode).
+     * Útil para testing y desarrollo.
+     */
+    getDebugHistory() {
+        return this._debugHistory();
+    }
+    /**
+     * Limpia historial de debug.
+     */
+    clearDebugHistory() {
+        this._debugHistory.set([]);
+    }
+    /**
+     * Agrega evento al historial de debug
+     */
+    addToDebugHistory(type, name, params, sent = false) {
+        if (!this._isDebugMode()) {
+            return;
+        }
+        const event = {
+            timestamp: new Date(),
+            type,
+            name,
+            params,
+            sent,
+        };
+        this._debugHistory.update((history) => {
+            const newHistory = [event, ...history];
+            return newHistory.slice(0, MAX_DEBUG_HISTORY);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AnalyticsService, deps: [{ token: i0.Injector }, { token: VALTECH_FIREBASE_CONFIG }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AnalyticsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AnalyticsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [VALTECH_FIREBASE_CONFIG]
+                }] }, { type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }] });
+
+var analytics_service = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AnalyticsService: AnalyticsService
+});
+
+/**
+ * Analytics Error Handler
+ *
+ * ErrorHandler personalizado que envía errores no capturados a Firebase Analytics.
+ * Se activa si enableErrorTracking=true en analyticsConfig.
+ */
+/**
+ * ErrorHandler que trackea errores en Firebase Analytics.
+ *
+ * Captura errores no manejados de la aplicación y los envía a GA4
+ * como eventos 'error_occurred'. También delega al ErrorHandler
+ * default para mantener el comportamiento de console.error.
+ *
+ * @example
+ * ```typescript
+ * // Se activa automáticamente si enableErrorTracking=true
+ * provideValtechFirebase({
+ *   firebase: environment.firebase,
+ *   enableAnalytics: true,
+ *   analyticsConfig: {
+ *     enableErrorTracking: true,
+ *   },
+ * });
+ * ```
+ */
+class AnalyticsErrorHandler {
+    constructor() {
+        this.analytics = inject(AnalyticsService);
+        this.defaultHandler = new ErrorHandler();
+    }
+    /**
+     * Maneja un error no capturado.
+     * Envía el error a Analytics y luego al handler default.
+     */
+    handleError(error) {
+        // Enviar a Analytics
+        try {
+            this.trackError(error);
+        }
+        catch (trackingError) {
+            // No fallar si el tracking falla
+            console.warn('[AnalyticsErrorHandler] Error tracking failed:', trackingError);
+        }
+        // Delegar al handler default (console.error)
+        this.defaultHandler.handleError(error);
+    }
+    /**
+     * Trackea el error en Analytics
+     */
+    trackError(error) {
+        // Extraer información del error
+        const errorInfo = this.extractErrorInfo(error);
+        this.analytics.logError(errorInfo.error, {
+            source: 'uncaught',
+            url: this.getCurrentUrl(),
+            ...errorInfo.context,
+        });
+    }
+    /**
+     * Extrae información útil del error
+     */
+    extractErrorInfo(error) {
+        const context = {};
+        // Error estándar
+        if (error instanceof Error) {
+            // Detectar errores de chunk loading (lazy loading)
+            if (error.message.includes('Loading chunk')) {
+                context['error_category'] = 'chunk_loading';
+            }
+            // Detectar errores de red
+            if (error.message.includes('NetworkError') || error.message.includes('Failed to fetch')) {
+                context['error_category'] = 'network';
+            }
+            return { error, context };
+        }
+        // ErrorEvent (ej: errores de script)
+        if (typeof ErrorEvent !== 'undefined' && error instanceof ErrorEvent) {
+            return {
+                error: new Error(error.message || 'Script error'),
+                context: {
+                    filename: error.filename || 'unknown',
+                    lineno: String(error.lineno || 0),
+                    colno: String(error.colno || 0),
+                },
+            };
+        }
+        // PromiseRejection
+        if (this.isPromiseRejection(error)) {
+            const reason = error.reason;
+            if (reason instanceof Error) {
+                return {
+                    error: reason,
+                    context: { error_category: 'unhandled_promise' },
+                };
+            }
+            return {
+                error: new Error(String(reason) || 'Unhandled promise rejection'),
+                context: { error_category: 'unhandled_promise' },
+            };
+        }
+        // Objeto con message
+        if (error && typeof error === 'object' && 'message' in error) {
+            return {
+                error: new Error(String(error.message)),
+                context,
+            };
+        }
+        // Fallback: convertir a string
+        return {
+            error: new Error(String(error) || 'Unknown error'),
+            context,
+        };
+    }
+    /**
+     * Verifica si es un PromiseRejectionEvent
+     */
+    isPromiseRejection(error) {
+        return (typeof PromiseRejectionEvent !== 'undefined' &&
+            error instanceof PromiseRejectionEvent);
+    }
+    /**
+     * Obtiene la URL actual de forma segura
+     */
+    getCurrentUrl() {
+        try {
+            return window?.location?.href || 'unknown';
+        }
+        catch {
+            return 'unknown';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AnalyticsErrorHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AnalyticsErrorHandler }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AnalyticsErrorHandler, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Analytics Router Tracker
+ *
+ * Servicio que trackea automáticamente page views cuando el usuario navega.
+ * Se activa automáticamente si enablePageViewTracking=true en analyticsConfig.
+ */
+/**
+ * Tracker automático de page views via Router.
+ *
+ * Este servicio escucha eventos de navegación del Router y registra
+ * page views automáticamente en Firebase Analytics.
+ *
+ * Se excluyen rutas configuradas en `analyticsConfig.excludeRoutes`.
+ *
+ * @example
+ * ```typescript
+ * // Se activa automáticamente si enablePageViewTracking=true
+ * provideValtechFirebase({
+ *   firebase: environment.firebase,
+ *   enableAnalytics: true,
+ *   analyticsConfig: {
+ *     enablePageViewTracking: true,
+ *     excludeRoutes: ['/admin/*', '/debug/*'],
+ *   },
+ * });
+ * ```
+ */
+class AnalyticsRouterTracker {
+    constructor(config) {
+        this.config = config;
+        this.analytics = inject(AnalyticsService);
+        this.router = inject(Router);
+        this.destroyRef = inject(DestroyRef);
+        const analyticsConfig = config.analyticsConfig ?? {};
+        this.enabled = analyticsConfig.enablePageViewTracking !== false;
+        this.excludePatterns = this.compileExcludePatterns(analyticsConfig.excludeRoutes ?? []);
+        if (this.enabled && config.enableAnalytics) {
+            this.startTracking();
+        }
+    }
+    /**
+     * Inicia el tracking de navegación
+     */
+    startTracking() {
+        this.router.events
+            .pipe(filter$1((event) => event instanceof NavigationEnd), filter$1((event) => !this.isExcluded(event.urlAfterRedirects)), takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+            this.analytics.logPageView(event.urlAfterRedirects);
+        });
+    }
+    /**
+     * Compila patrones de exclusión a RegExp
+     */
+    compileExcludePatterns(patterns) {
+        return patterns.map((pattern) => {
+            // Convertir glob pattern a regex
+            // Ej: '/admin/*' -> /^\/admin\/.*$/
+            const regexPattern = pattern
+                .replace(/[.+?^${}()|[\]\\]/g, '\\$&') // Escapar caracteres especiales
+                .replace(/\*/g, '.*'); // Convertir * a .*
+            return new RegExp(`^${regexPattern}$`);
+        });
+    }
+    /**
+     * Verifica si una URL debe ser excluida del tracking
+     */
+    isExcluded(url) {
+        // Remover query params para la comparación
+        const path = url.split('?')[0];
+        return this.excludePatterns.some((pattern) => pattern.test(path));
+    }
+    /**
+     * Registra un page view manualmente.
+     * Útil para casos donde necesitas trackear manualmente.
+     */
+    trackPageView(path, title) {
+        if (this.isExcluded(path)) {
+            return;
+        }
+        this.analytics.logPageView(path, title);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AnalyticsRouterTracker, deps: [{ token: VALTECH_FIREBASE_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AnalyticsRouterTracker, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AnalyticsRouterTracker, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [VALTECH_FIREBASE_CONFIG]
+                }] }] });
+
+/**
+ * Firebase Configuration
+ *
+ * Configuración e inicialización de Firebase para aplicaciones Angular.
+ * Usa provideValtechFirebase() en el bootstrap de tu aplicación.
+ */
+/**
+ * Token de inyección para la configuración de Firebase.
+ * Usado internamente por los servicios de Firebase.
+ */
+const VALTECH_FIREBASE_CONFIG = new InjectionToken('ValtechFirebaseConfig');
+/**
+ * Provee Firebase a la aplicación Angular.
+ *
+ * @param config - Configuración de Firebase
+ * @returns EnvironmentProviders para usar en bootstrapApplication
+ *
+ * @example
+ * ```typescript
+ * // main.ts
+ * import { bootstrapApplication } from '@angular/platform-browser';
+ * import { provideValtechFirebase } from 'valtech-components';
+ * import { environment } from './environments/environment';
+ *
+ * bootstrapApplication(AppComponent, {
+ *   providers: [
+ *     provideValtechFirebase({
+ *       firebase: environment.firebase,
+ *       persistence: true,
+ *       emulator: environment.useEmulators ? {
+ *         firestore: { host: 'localhost', port: 8080 },
+ *         auth: { host: 'localhost', port: 9099 },
+ *         storage: { host: 'localhost', port: 9199 },
+ *       } : undefined,
+ *     }),
+ *   ],
+ * });
+ * ```
+ */
+function provideValtechFirebase(config) {
+    // Construir array de providers base
+    const providers = [
+        // Guardar configuración para uso en servicios
+        { provide: VALTECH_FIREBASE_CONFIG, useValue: config },
+        // Inicializar Firebase App
+        provideFirebaseApp(() => initializeApp(config.firebase)),
+        // Firestore con soporte para emuladores y persistencia
+        provideFirestore(() => {
+            const firestore = getFirestore();
+            // Conectar a emulador si está configurado
+            if (config.emulator?.firestore) {
+                connectFirestoreEmulator(firestore, config.emulator.firestore.host, config.emulator.firestore.port);
+            }
+            // Habilitar persistencia offline si está configurada
+            if (config.persistence) {
+                enableIndexedDbPersistence(firestore).catch((err) => {
+                    if (err.code === 'failed-precondition') {
+                        console.warn('[ValtechFirebase] Persistencia no disponible: múltiples pestañas abiertas');
+                    }
+                    else if (err.code === 'unimplemented') {
+                        console.warn('[ValtechFirebase] Persistencia no soportada en este navegador');
+                    }
+                });
+            }
+            return firestore;
+        }),
+        // Auth con soporte para emulador
+        provideAuth(() => {
+            const auth = getAuth();
+            // Conectar a emulador si está configurado
+            if (config.emulator?.auth) {
+                connectAuthEmulator(auth, `http://${config.emulator.auth.host}:${config.emulator.auth.port}`, { disableWarnings: true });
+            }
+            return auth;
+        }),
+        // Storage con soporte para emulador
+        provideStorage(() => {
+            const storage = getStorage();
+            // Conectar a emulador si está configurado
+            if (config.emulator?.storage) {
+                connectStorageEmulator(storage, config.emulator.storage.host, config.emulator.storage.port);
+            }
+            return storage;
+        }),
+    ];
+    // Messaging (FCM) - solo si está explícitamente habilitado
+    // Requiere Service Worker configurado, puede congelar la app si no está disponible
+    if (config.enableMessaging) {
+        // Pre-registrar SW custom antes de que Firebase lo intente
+        if (typeof navigator !== 'undefined' && 'serviceWorker' in navigator) {
+            navigator.serviceWorker.register('/firebase-messaging-sw.js').catch(console.error);
         }
         providers.push(provideMessaging(() => getMessaging()));
     }
+    // Analytics (GA4) - solo si está explícitamente habilitado
+    // Requiere measurementId en firebase config
+    if (config.enableAnalytics && config.firebase.measurementId) {
+        providers.push(provideAnalytics(() => getAnalytics()));
+        // Router tracker para page views automáticos (por defecto habilitado)
+        if (config.analyticsConfig?.enablePageViewTracking !== false) {
+            providers.push(AnalyticsRouterTracker);
+        }
+        // Error handler para tracking automático de errores
+        if (config.analyticsConfig?.enableErrorTracking) {
+            providers.push({
+                provide: ErrorHandler,
+                useClass: AnalyticsErrorHandler,
+            });
+        }
+    }
     return makeEnvironmentProviders(providers);
 }
 /**
@@ -25255,6 +26286,250 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     args: [VALTECH_AUTH_CONFIG]
                 }] }] });
 
+/**
+ * Servicio de OAuth para login social.
+ *
+ * Implementa flujo OAuth server-side con popup:
+ * 1. Frontend abre popup hacia backend
+ * 2. Backend redirige a provider (Google, Apple, Microsoft)
+ * 3. Usuario autoriza
+ * 4. Backend intercambia code, genera JWT, redirige con tokens
+ * 5. Popup envía tokens a ventana padre via postMessage
+ *
+ * @example
+ * ```typescript
+ * import { OAuthService, AuthService } from 'valtech-components';
+ *
+ * @Component({...})
+ * export class LoginComponent {
+ *   private oauth = inject(OAuthService);
+ *   private auth = inject(AuthService);
+ *
+ *   async loginWithGoogle() {
+ *     this.oauth.startFlow('google').subscribe({
+ *       next: (result) => {
+ *         // Tokens recibidos, guardar en auth state
+ *         this.auth.handleOAuthSuccess(result);
+ *         this.router.navigate(['/']);
+ *       },
+ *       error: (error) => {
+ *         console.error('OAuth failed:', error);
+ *       }
+ *     });
+ *   }
+ * }
+ * ```
+ */
+class OAuthService {
+    constructor(config, http, ngZone) {
+        this.config = config;
+        this.http = http;
+        this.ngZone = ngZone;
+        this.popup = null;
+        this.messageHandler = null;
+        this.checkClosedInterval = null;
+    }
+    /**
+     * Inicia flujo OAuth en popup.
+     * Retorna Observable que emite cuando el usuario completa el flujo.
+     *
+     * @param provider - Proveedor OAuth ('google', 'apple', 'microsoft')
+     * @returns Observable que emite OAuthResult o error
+     */
+    startFlow(provider) {
+        return new Observable(observer => {
+            // Construir URL de inicio
+            const redirectUri = `${window.location.origin}/auth/oauth/callback`;
+            const startUrl = `${this.config.apiUrl}/v2/auth/oauth/${provider}/start?redirect_uri=${encodeURIComponent(redirectUri)}`;
+            // Abrir popup centrado
+            const width = 500;
+            const height = 600;
+            const left = window.screenX + (window.outerWidth - width) / 2;
+            const top = window.screenY + (window.outerHeight - height) / 2;
+            const features = `width=${width},height=${height},left=${left},top=${top},popup=yes`;
+            this.popup = window.open(startUrl, 'oauth', features);
+            if (!this.popup) {
+                observer.error({
+                    code: 'POPUP_BLOCKED',
+                    message: 'El navegador bloqueó la ventana emergente. Por favor, permite popups para este sitio.',
+                });
+                return () => { };
+            }
+            // Escuchar mensajes del popup
+            this.messageHandler = (event) => {
+                // Validar origen
+                if (event.origin !== window.location.origin) {
+                    return;
+                }
+                // Validar tipo de mensaje
+                const data = event.data;
+                if (data?.type !== 'oauth-callback') {
+                    return;
+                }
+                // Limpiar
+                this.cleanup();
+                // Emitir resultado dentro de NgZone para trigger change detection
+                this.ngZone.run(() => {
+                    if (data.error) {
+                        observer.error(data.error);
+                    }
+                    else if (data.tokens) {
+                        observer.next(data.tokens);
+                        observer.complete();
+                    }
+                    else {
+                        observer.error({
+                            code: 'INVALID_RESPONSE',
+                            message: 'Respuesta inválida del servidor de autenticación',
+                        });
+                    }
+                });
+            };
+            window.addEventListener('message', this.messageHandler);
+            // Verificar si popup se cierra manualmente
+            this.checkClosedInterval = setInterval(() => {
+                if (this.popup?.closed) {
+                    this.cleanup();
+                    this.ngZone.run(() => {
+                        observer.error({
+                            code: 'POPUP_CLOSED',
+                            message: 'Se cerró la ventana de autenticación',
+                        });
+                    });
+                }
+            }, 500);
+            // Cleanup cuando el observable se destruye
+            return () => this.cleanup();
+        });
+    }
+    /**
+     * Inicia flujo de linking para vincular un proveedor adicional.
+     * Requiere que el usuario esté autenticado.
+     *
+     * @param provider - Proveedor OAuth a vincular
+     * @returns Observable que emite cuando se completa el linking
+     */
+    startLinkFlow(provider) {
+        return new Observable(observer => {
+            const redirectUri = `${window.location.origin}/auth/oauth/callback`;
+            const startUrl = `${this.config.apiUrl}/v2/auth/oauth/link/${provider}/start?redirect_uri=${encodeURIComponent(redirectUri)}`;
+            const width = 500;
+            const height = 600;
+            const left = window.screenX + (window.outerWidth - width) / 2;
+            const top = window.screenY + (window.outerHeight - height) / 2;
+            const features = `width=${width},height=${height},left=${left},top=${top},popup=yes`;
+            this.popup = window.open(startUrl, 'oauth-link', features);
+            if (!this.popup) {
+                observer.error({
+                    code: 'POPUP_BLOCKED',
+                    message: 'El navegador bloqueó la ventana emergente',
+                });
+                return () => { }; // cleanup function
+            }
+            this.messageHandler = (event) => {
+                if (event.origin !== window.location.origin)
+                    return;
+                const data = event.data;
+                if (data?.type !== 'oauth-callback')
+                    return;
+                this.cleanup();
+                this.ngZone.run(() => {
+                    if (data.error) {
+                        observer.error(data.error);
+                    }
+                    else {
+                        observer.next(data.tokens || {});
+                        observer.complete();
+                    }
+                });
+            };
+            window.addEventListener('message', this.messageHandler);
+            this.checkClosedInterval = setInterval(() => {
+                if (this.popup?.closed) {
+                    this.cleanup();
+                    this.ngZone.run(() => {
+                        observer.error({
+                            code: 'POPUP_CLOSED',
+                            message: 'Se cerró la ventana de autenticación',
+                        });
+                    });
+                }
+            }, 500);
+            return () => this.cleanup();
+        });
+    }
+    /**
+     * Obtiene los proveedores OAuth vinculados al usuario.
+     */
+    getLinkedProviders() {
+        return this.http
+            .get(`${this.config.apiUrl}/v2/auth/oauth/providers`)
+            .pipe(catchError(error => throwError(() => ({
+            code: error.error?.code || 'FETCH_ERROR',
+            message: error.error?.message || 'Error al obtener proveedores vinculados',
+        }))));
+    }
+    /**
+     * Desvincula un proveedor OAuth.
+     */
+    unlinkProvider(provider) {
+        return this.http
+            .post(`${this.config.apiUrl}/v2/auth/oauth/unlink`, { provider })
+            .pipe(catchError(error => throwError(() => ({
+            code: error.error?.code || 'UNLINK_ERROR',
+            message: error.error?.message || 'Error al desvincular proveedor',
+        }))));
+    }
+    /**
+     * Establece contraseña para usuarios que solo tienen OAuth.
+     */
+    setPassword(password) {
+        return this.http
+            .post(`${this.config.apiUrl}/v2/auth/oauth/set-password`, { password })
+            .pipe(catchError(error => throwError(() => ({
+            code: error.error?.code || 'SET_PASSWORD_ERROR',
+            message: error.error?.message || 'Error al establecer contraseña',
+        }))));
+    }
+    /**
+     * Verifica si el usuario tiene contraseña establecida.
+     */
+    hasPassword() {
+        return this.http
+            .get(`${this.config.apiUrl}/v2/auth/oauth/has-password`)
+            .pipe(catchError(error => throwError(() => ({
+            code: error.error?.code || 'CHECK_PASSWORD_ERROR',
+            message: error.error?.message || 'Error al verificar contraseña',
+        }))));
+    }
+    /**
+     * Limpia recursos del popup.
+     */
+    cleanup() {
+        if (this.messageHandler) {
+            window.removeEventListener('message', this.messageHandler);
+            this.messageHandler = null;
+        }
+        if (this.checkClosedInterval) {
+            clearInterval(this.checkClosedInterval);
+            this.checkClosedInterval = null;
+        }
+        if (this.popup && !this.popup.closed) {
+            this.popup.close();
+        }
+        this.popup = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OAuthService, deps: [{ token: VALTECH_AUTH_CONFIG }, { token: i1$8.HttpClient }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OAuthService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OAuthService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [VALTECH_AUTH_CONFIG]
+                }] }, { type: i1$8.HttpClient }, { type: i0.NgZone }] });
+
 /**
  * Servicio principal de autenticación.
  *
@@ -25278,7 +26553,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * ```
  */
 class AuthService {
-    constructor(config, http, router, stateService, tokenService, storageService, syncService, firebaseService, messagingService, i18nService) {
+    constructor(config, http, router, stateService, tokenService, storageService, syncService, firebaseService, oauthService, messagingService, i18nService) {
         this.config = config;
         this.http = http;
         this.router = router;
@@ -25287,6 +26562,7 @@ class AuthService {
         this.storageService = storageService;
         this.syncService = syncService;
         this.firebaseService = firebaseService;
+        this.oauthService = oauthService;
         this.messagingService = messagingService;
         this.i18nService = i18nService;
         // Timer para refresh proactivo
@@ -25400,6 +26676,101 @@ class AuthService {
             }
         }), catchError(error => this.handleAuthError(error)));
     }
+    // =============================================
+    // OAUTH (Login social)
+    // =============================================
+    /**
+     * Inicia sesión con OAuth (Google, Apple, Microsoft).
+     * Abre un popup para el flujo de autenticación.
+     *
+     * @param provider - Proveedor OAuth ('google', 'apple', 'microsoft')
+     * @returns Observable que emite SigninResponse cuando se completa
+     *
+     * @example
+     * ```typescript
+     * this.auth.signinWithOAuth('google').subscribe({
+     *   next: () => this.router.navigate(['/']),
+     *   error: (err) => console.error('OAuth failed:', err)
+     * });
+     * ```
+     */
+    signinWithOAuth(provider) {
+        this.stateService.clearError();
+        return this.oauthService.startFlow(provider).pipe(tap(result => {
+            // Convertir OAuthResult a SigninResponse compatible
+            const response = {
+                operationId: 'oauth',
+                accessToken: result.accessToken,
+                refreshToken: result.refreshToken,
+                firebaseToken: result.firebaseToken,
+                expiresIn: result.expiresIn,
+                roles: result.roles,
+                permissions: result.permissions,
+            };
+            this.handleSuccessfulAuth(response);
+        }), map$1(result => ({
+            operationId: 'oauth',
+            accessToken: result.accessToken,
+            refreshToken: result.refreshToken,
+            firebaseToken: result.firebaseToken,
+            expiresIn: result.expiresIn,
+            roles: result.roles,
+            permissions: result.permissions,
+        })), catchError(error => {
+            const authError = {
+                code: error.code || 'OAUTH_ERROR',
+                message: error.message || 'Error de autenticación OAuth',
+            };
+            this.stateService.setError(authError);
+            return throwError(() => authError);
+        }));
+    }
+    /**
+     * Vincula un proveedor OAuth adicional a la cuenta actual.
+     * Requiere que el usuario esté autenticado.
+     *
+     * @param provider - Proveedor OAuth a vincular
+     */
+    linkOAuthProvider(provider) {
+        return this.oauthService.startLinkFlow(provider).pipe(map$1(() => ({ success: true })), catchError(error => {
+            const authError = {
+                code: error.code || 'LINK_ERROR',
+                message: error.message || 'Error al vincular proveedor',
+            };
+            this.stateService.setError(authError);
+            return throwError(() => authError);
+        }));
+    }
+    /**
+     * Obtiene los proveedores OAuth vinculados al usuario.
+     */
+    getLinkedProviders() {
+        return this.oauthService.getLinkedProviders();
+    }
+    /**
+     * Desvincula un proveedor OAuth de la cuenta.
+     *
+     * @param provider - Proveedor a desvincular
+     */
+    unlinkOAuthProvider(provider) {
+        return this.oauthService.unlinkProvider(provider);
+    }
+    /**
+     * Establece contraseña para usuarios que solo tienen OAuth.
+     * Permite que usuarios OAuth-only puedan también usar email/password.
+     *
+     * @param password - Nueva contraseña
+     */
+    setPasswordForOAuthUser(password) {
+        return this.oauthService.setPassword(password);
+    }
+    /**
+     * Verifica si el usuario tiene contraseña establecida.
+     * Útil para mostrar/ocultar opciones de cambio de contraseña.
+     */
+    checkHasPassword() {
+        return this.oauthService.hasPassword();
+    }
     /**
      * Registra un nuevo usuario.
      * El usuario queda en estado PENDING hasta verificar su email.
@@ -26093,7 +27464,7 @@ class AuthService {
         }
         return { platform: 'web', browser, os };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuthService, deps: [{ token: VALTECH_AUTH_CONFIG }, { token: i1$8.HttpClient }, { token: i1$1.Router }, { token: AuthStateService }, { token: TokenService }, { token: AuthStorageService }, { token: AuthSyncService }, { token: FirebaseService }, { token: MessagingService, optional: true }, { token: I18nService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuthService, deps: [{ token: VALTECH_AUTH_CONFIG }, { token: i1$8.HttpClient }, { token: i1$1.Router }, { token: AuthStateService }, { token: TokenService }, { token: AuthStorageService }, { token: AuthSyncService }, { token: FirebaseService }, { token: OAuthService }, { token: MessagingService, optional: true }, { token: I18nService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuthService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuthService, decorators: [{
@@ -26102,7 +27473,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [VALTECH_AUTH_CONFIG]
-                }] }, { type: i1$8.HttpClient }, { type: i1$1.Router }, { type: AuthStateService }, { type: TokenService }, { type: AuthStorageService }, { type: AuthSyncService }, { type: FirebaseService }, { type: MessagingService, decorators: [{
+                }] }, { type: i1$8.HttpClient }, { type: i1$1.Router }, { type: AuthStateService }, { type: TokenService }, { type: AuthStorageService }, { type: AuthSyncService }, { type: FirebaseService }, { type: OAuthService }, { type: MessagingService, decorators: [{
                     type: Optional
                 }] }, { type: I18nService, decorators: [{
                     type: Optional
@@ -26301,6 +27672,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     type: Optional
                 }] }] });
 
+/**
+ * Analytics Types
+ *
+ * Tipos e interfaces para el servicio de Firebase Analytics (GA4).
+ */
+
 /**
  * Firebase Services
  *
@@ -26725,6 +28102,144 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     args: [VALTECH_AUTH_CONFIG]
                 }] }, { type: i1$8.HttpClient }] });
 
+/**
+ * Componente de callback para OAuth.
+ *
+ * Este componente procesa la respuesta del servidor OAuth y envía
+ * los tokens a la ventana padre via postMessage.
+ *
+ * Debe agregarse a las rutas de la aplicación:
+ * ```typescript
+ * // app.routes.ts
+ * import { OAuthCallbackComponent } from 'valtech-components';
+ *
+ * export const routes: Routes = [
+ *   { path: 'auth/oauth/callback', component: OAuthCallbackComponent },
+ *   // ... otras rutas
+ * ];
+ * ```
+ *
+ * El backend redirige a esta ruta con los tokens en query params:
+ * `/auth/oauth/callback?access_token=xxx&refresh_token=xxx&expires_in=900`
+ *
+ * O con error:
+ * `/auth/oauth/callback?error=INVALID_CODE&error_description=...`
+ */
+class OAuthCallbackComponent {
+    constructor() {
+        this.message = 'Procesando autenticación...';
+    }
+    ngOnInit() {
+        this.processCallback();
+    }
+    processCallback() {
+        const params = new URLSearchParams(window.location.search);
+        // Verificar si hay error
+        const error = params.get('error');
+        if (error) {
+            this.sendToParent({
+                type: 'oauth-callback',
+                error: {
+                    code: error,
+                    message: params.get('error_description') || 'Error de autenticación',
+                },
+            });
+            this.message = 'Error de autenticación';
+            this.closeAfterDelay();
+            return;
+        }
+        // Extraer tokens
+        const accessToken = params.get('access_token');
+        const refreshToken = params.get('refresh_token');
+        const expiresIn = params.get('expires_in');
+        const firebaseToken = params.get('firebase_token');
+        if (!accessToken || !refreshToken) {
+            this.sendToParent({
+                type: 'oauth-callback',
+                error: {
+                    code: 'MISSING_TOKENS',
+                    message: 'No se recibieron los tokens de autenticación',
+                },
+            });
+            this.message = 'Error: tokens no recibidos';
+            this.closeAfterDelay();
+            return;
+        }
+        // Extraer roles y permisos (pueden venir como JSON en base64)
+        let roles;
+        let permissions;
+        const rolesParam = params.get('roles');
+        const permissionsParam = params.get('permissions');
+        if (rolesParam) {
+            try {
+                roles = JSON.parse(atob(rolesParam));
+            }
+            catch {
+                roles = rolesParam.split(',');
+            }
+        }
+        if (permissionsParam) {
+            try {
+                permissions = JSON.parse(atob(permissionsParam));
+            }
+            catch {
+                permissions = permissionsParam.split(',');
+            }
+        }
+        // Enviar tokens a la ventana padre
+        const result = {
+            accessToken,
+            refreshToken,
+            expiresIn: expiresIn ? parseInt(expiresIn, 10) : 900,
+            firebaseToken: firebaseToken || undefined,
+            roles,
+            permissions,
+            isNewUser: params.get('is_new_user') === 'true',
+            linked: params.get('linked') === 'true',
+        };
+        this.sendToParent({
+            type: 'oauth-callback',
+            tokens: result,
+        });
+        this.message = 'Autenticación exitosa';
+        this.closeAfterDelay();
+    }
+    sendToParent(data) {
+        if (window.opener) {
+            // Enviar al opener (ventana que abrió el popup)
+            window.opener.postMessage(data, window.location.origin);
+        }
+        else if (window.parent !== window) {
+            // Enviar al parent (si estamos en iframe)
+            window.parent.postMessage(data, window.location.origin);
+        }
+    }
+    closeAfterDelay() {
+        // Dar tiempo para que el mensaje se envíe antes de cerrar
+        setTimeout(() => {
+            if (window.opener) {
+                window.close();
+            }
+        }, 500);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OAuthCallbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: OAuthCallbackComponent, isStandalone: true, selector: "val-oauth-callback", ngImport: i0, template: `
+    <div class="oauth-callback">
+      <div class="oauth-callback__spinner"></div>
+      <p class="oauth-callback__text">{{ message }}</p>
+    </div>
+  `, isInline: true, styles: [".oauth-callback{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.oauth-callback__spinner{width:40px;height:40px;border:3px solid #f3f3f3;border-top:3px solid #3498db;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.oauth-callback__text{color:#666;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OAuthCallbackComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-oauth-callback', standalone: true, imports: [CommonModule], template: `
+    <div class="oauth-callback">
+      <div class="oauth-callback__spinner"></div>
+      <p class="oauth-callback__text">{{ message }}</p>
+    </div>
+  `, styles: [".oauth-callback{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.oauth-callback__spinner{width:40px;height:40px;border:3px solid #f3f3f3;border-top:3px solid #3498db;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.oauth-callback__text{color:#666;font-size:14px}\n"] }]
+        }] });
+
 /**
  * Valtech Auth Service
  *
@@ -26798,152 +28313,1137 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 // Tipos
 
 /**
- * Servicio para gestionar presets de componentes.
+ * Ads Types
  *
- * Los presets permiten definir configuraciones reutilizables
- * de componentes (tamaño, color, variante, etc.) que se pueden
- * aplicar con un nombre semántico.
+ * Tipos e interfaces para el servicio de Google Ad Manager.
+ * Usa Google Publisher Tags (GPT) para renderizar ads.
+ */
+/**
+ * Mapeo de tamanos predefinidos a dimensiones.
+ */
+const AD_SIZE_MAP = {
+    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',
+};
+
+/**
+ * Ads Consent Service
  *
- * @example
- * // En un componente
- * presets = inject(PresetService);
+ * Integra el servicio de Ads con el Consent Mode v2 existente en AnalyticsService.
+ * Proporciona estado de consent especifico para ads (advertising).
+ */
+/**
+ * Servicio que maneja el consent para ads.
  *
- * // Obtener preset
- * const buttonProps = this.presets.get<ButtonMetadata>('button', 'primary-action');
- * // { size: 'large', color: 'primary', fill: 'solid' }
+ * Se integra con AnalyticsService para reutilizar el estado de consent GDPR.
+ * Si AnalyticsService no esta disponible, usa valores por defecto conservadores.
  */
-class PresetService {
+class AdsConsentService {
     constructor() {
-        this._presets = signal({});
+        this.platformId = inject(PLATFORM_ID);
+        this.injector = inject(Injector);
+        // Cache del estado de consent
+        this._consentState = signal({
+            adStorage: false,
+            adPersonalization: false,
+            adUserData: false,
+        });
+        /** Estado de consent para ads (readonly) */
+        this.adsConsentState = this._consentState.asReadonly();
+        /** Indica si se pueden mostrar ads (al menos consent basico) */
+        this.canShowAds = computed(() => {
+            // Siempre permitimos mostrar ads (pueden ser no personalizados)
+            // El control real esta en canPersonalize
+            return true;
+        });
+        /** Indica si se pueden mostrar ads personalizados */
+        this.canPersonalize = computed(() => {
+            const state = this._consentState();
+            return state.adStorage && state.adPersonalization && state.adUserData;
+        });
+        this.analyticsService = null;
+        this.consentSyncInterval = null;
+        if (isPlatformBrowser(this.platformId)) {
+            this.initializeConsentSync();
+        }
     }
     /**
-     * Obtiene un preset específico para un componente
+     * Inicializa la sincronizacion con AnalyticsService.
+     */
+    initializeConsentSync() {
+        // Intentar obtener AnalyticsService de forma lazy
+        // Usamos setTimeout para dar tiempo a que se inicialice
+        setTimeout(() => {
+            this.syncWithAnalyticsConsent();
+        }, 100);
+        // Re-sincronizar periodicamente por si el usuario cambia consent
+        this.consentSyncInterval = setInterval(() => {
+            this.syncWithAnalyticsConsent();
+        }, 5000);
+    }
+    /**
+     * Sincroniza el estado de consent desde AnalyticsService.
+     */
+    async syncWithAnalyticsConsent() {
+        try {
+            // Importar AnalyticsService dinamicamente
+            const { AnalyticsService } = await Promise.resolve().then(function () { return analytics_service; });
+            if (!this.analyticsService) {
+                this.analyticsService = this.injector.get(AnalyticsService, null);
+            }
+            if (this.analyticsService) {
+                // AnalyticsService expone consentState como signal
+                const consentState = this.analyticsService.consentState();
+                this.updateFromAnalyticsConsent(consentState.settings);
+            }
+        }
+        catch {
+            // AnalyticsService no disponible - usar defaults
+            this.setDefaultConsent();
+        }
+    }
+    /**
+     * Actualiza el estado de consent desde AnalyticsService.
+     */
+    updateFromAnalyticsConsent(settings) {
+        const hasAdvertisingConsent = settings['advertising'] === true;
+        this._consentState.set({
+            adStorage: hasAdvertisingConsent,
+            adPersonalization: hasAdvertisingConsent,
+            adUserData: hasAdvertisingConsent,
+        });
+    }
+    /**
+     * Establece consent por defecto (sin datos personales).
+     */
+    setDefaultConsent() {
+        this._consentState.set({
+            adStorage: false,
+            adPersonalization: false,
+            adUserData: false,
+        });
+    }
+    /**
+     * Actualiza manualmente el consent para ads.
+     * Usar cuando el usuario actualiza sus preferencias directamente.
      *
-     * @param component Tipo de componente (ej: 'button', 'card', 'input')
-     * @param presetName Nombre del preset (ej: 'primary-action', 'compact')
-     * @returns Propiedades del preset o objeto vacío si no existe
+     * @param consent - Nuevo estado de consent parcial
+     */
+    updateConsent(consent) {
+        this._consentState.update((current) => ({
+            ...current,
+            ...consent,
+        }));
+        // Notificar a GPT si ya esta cargado
+        this.applyConsentToGPT();
+    }
+    /**
+     * Aplica el estado de consent actual a GPT.
+     */
+    applyConsentToGPT() {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        const googletag = window.googletag;
+        if (!googletag)
+            return;
+        googletag.cmd.push(() => {
+            const canPersonalize = this.canPersonalize();
+            // 0 = personalized, 1 = non-personalized
+            googletag.pubads().setRequestNonPersonalizedAds(canPersonalize ? 0 : 1);
+        });
+    }
+    /**
+     * Obtiene el estado actual de consent.
+     */
+    getConsentState() {
+        return this._consentState();
+    }
+    /**
+     * Destruye el servicio y limpia recursos.
+     */
+    destroy() {
+        if (this.consentSyncInterval) {
+            clearInterval(this.consentSyncInterval);
+            this.consentSyncInterval = null;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AdsConsentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AdsConsentService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AdsConsentService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Ads Loader Service
+ *
+ * Maneja la carga lazy del script GPT (Google Publisher Tag).
+ * Solo carga el script cuando se necesita el primer ad.
+ */
+/** URL del script GPT */
+const GPT_SCRIPT_URL = 'https://securepubads.g.doubleclick.net/tag/js/gpt.js';
+/**
+ * Servicio para cargar el script de Google Publisher Tags.
+ *
+ * Implementa lazy loading: el script solo se carga cuando
+ * se solicita renderizar el primer ad slot.
+ */
+class AdsLoaderService {
+    constructor(config, platformId, consentService) {
+        this.config = config;
+        this.platformId = platformId;
+        this.consentService = consentService;
+        this._isLoading = signal(false);
+        this._isLoaded = signal(false);
+        this._error = signal(null);
+        /** Indica si el script esta cargando */
+        this.isLoading = this._isLoading.asReadonly();
+        /** Indica si el script esta cargado */
+        this.isLoaded = this._isLoaded.asReadonly();
+        /** Error de carga (si existe) */
+        this.error = this._error.asReadonly();
+        this.loadPromise = null;
+    }
+    /**
+     * Carga el script GPT de forma lazy.
+     * Retorna la instancia de googletag o null si falla.
      *
-     * @example
-     * // Obtener preset de botón
-     * const props = presets.get<ButtonMetadata>('button', 'primary-action');
+     * @returns Promise con googletag o null
+     */
+    loadGPT() {
+        // SSR check
+        if (!isPlatformBrowser(this.platformId)) {
+            return Promise.resolve(null);
+        }
+        // Ya cargado
+        if (this._isLoaded() && window.googletag) {
+            return Promise.resolve(window.googletag);
+        }
+        // Ya hay una carga en progreso
+        if (this.loadPromise) {
+            return this.loadPromise;
+        }
+        this._isLoading.set(true);
+        this._error.set(null);
+        this.loadPromise = new Promise((resolve) => {
+            // Inicializar cmd queue
+            window.googletag = window.googletag || { cmd: [] };
+            const googletag = window.googletag;
+            // Crear script
+            const script = document.createElement('script');
+            script.async = true;
+            script.src = GPT_SCRIPT_URL;
+            script.onload = () => {
+                googletag.cmd.push(() => {
+                    this.configureGPT(googletag);
+                    this._isLoaded.set(true);
+                    this._isLoading.set(false);
+                    if (this.config.debugMode) {
+                        console.log('[ValtechAds] Script GPT cargado y configurado');
+                    }
+                    resolve(googletag);
+                });
+            };
+            script.onerror = (error) => {
+                console.error('[ValtechAds] Error cargando GPT:', error);
+                this._error.set(new Error('Error cargando Google Publisher Tag'));
+                this._isLoading.set(false);
+                this.loadPromise = null;
+                resolve(null);
+            };
+            // Insertar script
+            const firstScript = document.getElementsByTagName('script')[0];
+            firstScript.parentNode?.insertBefore(script, firstScript);
+        });
+        return this.loadPromise;
+    }
+    /**
+     * Configura GPT con las opciones de la aplicacion.
+     */
+    configureGPT(googletag) {
+        const pubads = googletag.pubads();
+        // Single Request Architecture para mejor performance
+        pubads.enableSingleRequest();
+        // Colapsar divs vacios antes de fetch
+        pubads.collapseEmptyDivs(true);
+        // Lazy loading nativo de GPT
+        if (this.config.lazyLoad && this.config.lazyLoadConfig) {
+            pubads.enableLazyLoad({
+                fetchMarginPercent: this.config.lazyLoadConfig.fetchMarginPercent,
+                renderMarginPercent: this.config.lazyLoadConfig.renderMarginPercent,
+                mobileScaling: 2.0,
+            });
+        }
+        // Targeting global
+        if (this.config.globalTargeting) {
+            for (const [key, value] of Object.entries(this.config.globalTargeting)) {
+                pubads.setTargeting(key, value);
+            }
+        }
+        // Non-personalized ads segun consent
+        if (!this.consentService.canPersonalize()) {
+            pubads.setRequestNonPersonalizedAds(1);
+        }
+        // Event listeners
+        pubads.addEventListener('slotRenderEnded', (event) => {
+            const slotId = event.slot.getSlotElementId();
+            if (this.config.debugMode) {
+                console.log(`[ValtechAds] Slot ${slotId} rendered, empty: ${event.isEmpty}`);
+            }
+        });
+        // Debug mode
+        if (this.config.debugMode) {
+            console.log('[ValtechAds] GPT configurado:', {
+                lazyLoad: this.config.lazyLoad,
+                personalized: this.consentService.canPersonalize(),
+                targeting: this.config.globalTargeting,
+            });
+        }
+    }
+    /**
+     * Verifica si el script GPT esta disponible.
+     */
+    isGPTAvailable() {
+        return isPlatformBrowser(this.platformId) && !!window.googletag && this._isLoaded();
+    }
+    /**
+     * Obtiene la instancia de googletag si esta cargada.
+     */
+    getGPT() {
+        if (this.isGPTAvailable()) {
+            return window.googletag;
+        }
+        return null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AdsLoaderService, deps: [{ token: VALTECH_ADS_CONFIG }, { token: PLATFORM_ID }, { token: AdsConsentService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AdsLoaderService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AdsLoaderService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [VALTECH_ADS_CONFIG]
+                }] }, { type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: AdsConsentService }] });
+
+/**
+ * Ads Service
+ *
+ * Servicio principal para Google Ad Manager (GPT).
+ * Integra con el sistema de consent existente y respeta usuarios premium.
+ */
+/**
+ * Servicio principal de Google Ad Manager.
+ *
+ * Maneja la creacion, destruccion y refresh de ad slots.
+ * Integra automaticamente con consent mode y detecta usuarios premium.
+ *
+ * @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;
+ * }
+ * ```
+ */
+class AdsService {
+    constructor(injector, config, platformId, router, loaderService, consentService) {
+        this.injector = injector;
+        this.config = config;
+        this.platformId = platformId;
+        this.router = router;
+        this.loaderService = loaderService;
+        this.consentService = consentService;
+        // ===========================================================================
+        // ESTADO (Signals)
+        // ===========================================================================
+        this._isInitialized = signal(false);
+        this._isEnabled = signal(false);
+        this._isPremiumUser = signal(false);
+        this._isDebugMode = signal(false);
+        this._slots = signal(new Map());
+        this._slotStates = signal(new Map());
+        this._events = signal([]);
+        /** Indica si el servicio esta inicializado */
+        this.isInitialized = this._isInitialized.asReadonly();
+        /** Indica si los ads estan habilitados (consent + no premium) */
+        this.isEnabled = computed(() => {
+            return (this._isInitialized() &&
+                this._isEnabled() &&
+                !this._isPremiumUser() &&
+                this.consentService.canShowAds());
+        });
+        /** Indica si el usuario es premium (no ve ads) */
+        this.isPremiumUser = this._isPremiumUser.asReadonly();
+        /** Indica si esta en modo debug */
+        this.isDebugMode = this._isDebugMode.asReadonly();
+        /** Estado de consent para ads */
+        this.consentState = this.consentService.adsConsentState;
+        /** Eventos de ads (historial) */
+        this.events = this._events.asReadonly();
+        // ===========================================================================
+        // INTERNOS
+        // ===========================================================================
+        this.activeSlots = new Map();
+        this.routerSubscription = null;
+        this.refreshTimerId = null;
+        this._isDebugMode.set(config.debugMode ?? false);
+    }
+    // ===========================================================================
+    // INICIALIZACION
+    // ===========================================================================
+    /**
+     * Inicializa el servicio de ads.
+     * Llamado automaticamente por APP_INITIALIZER.
+     * NO carga el script GPT hasta que se necesite el primer ad.
+     */
+    async initialize() {
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        // Verificar si usuario es premium
+        if (this.config.isPremiumUser) {
+            try {
+                this._isPremiumUser.set(this.config.isPremiumUser());
+            }
+            catch {
+                this._isPremiumUser.set(false);
+            }
+        }
+        // Si es premium, no inicializar ads
+        if (this._isPremiumUser()) {
+            if (this._isDebugMode()) {
+                console.log('[ValtechAds] Usuario premium detectado - ads deshabilitados');
+            }
+            this._isInitialized.set(true);
+            return;
+        }
+        // Verificar consent basico
+        if (!this.consentService.canShowAds() && !this.config.showNonPersonalizedAds) {
+            if (this._isDebugMode()) {
+                console.log('[ValtechAds] Sin consent para ads');
+            }
+            this._isInitialized.set(true);
+            return;
+        }
+        // Suscribirse a cambios de ruta para verificar exclusiones
+        this.setupRouteListener();
+        // Configurar auto-refresh si esta habilitado
+        if (this.config.autoRefreshInterval && this.config.autoRefreshInterval > 0) {
+            this.setupAutoRefresh();
+        }
+        this._isEnabled.set(true);
+        this._isInitialized.set(true);
+        if (this._isDebugMode()) {
+            console.log('[ValtechAds] Inicializado en modo debug', {
+                networkId: this.config.networkId,
+                lazyLoad: this.config.lazyLoad,
+                excludeRoutes: this.config.excludeRoutes,
+            });
+        }
+    }
+    /**
+     * Carga el script GPT de forma lazy.
+     * Llamado automaticamente cuando se renderiza el primer ad slot.
+     */
+    async ensureGPTLoaded() {
+        if (!this.isEnabled()) {
+            return null;
+        }
+        return this.loaderService.loadGPT();
+    }
+    // ===========================================================================
+    // GESTION DE SLOTS
+    // ===========================================================================
+    /**
+     * Define y muestra un ad slot.
+     * Llamado internamente por el componente AdSlot.
      *
-     * // Usar en componente
-     * <val-button [props]="props"></val-button>
+     * @param config - Configuracion del slot
+     * @returns ID del slot o null si no se puede mostrar
      */
-    get(component, presetName) {
-        const componentPresets = this._presets()[component];
-        if (!componentPresets) {
-            console.warn(`[presets] No presets registered for component: ${component}`);
-            return {};
+    async defineSlot(config) {
+        if (!this.isEnabled()) {
+            this.updateSlotState(config.slotId, 'hidden');
+            return null;
         }
-        const preset = componentPresets[presetName];
-        if (!preset) {
-            console.warn(`[presets] Preset '${presetName}' not found for component: ${component}`);
-            return {};
+        // Verificar si la ruta actual esta excluida
+        if (this.isRouteExcluded()) {
+            this.updateSlotState(config.slotId, 'hidden');
+            return null;
         }
-        return preset;
+        this.updateSlotState(config.slotId, 'loading');
+        const googletag = await this.ensureGPTLoaded();
+        if (!googletag) {
+            this.updateSlotState(config.slotId, 'error');
+            return null;
+        }
+        return new Promise((resolve) => {
+            googletag.cmd.push(() => {
+                try {
+                    const adUnitPath = `${this.config.networkId}${config.adUnitPath}`;
+                    const sizes = this.resolveSizes(config.size);
+                    const slot = googletag.defineSlot(adUnitPath, sizes, config.slotId);
+                    if (!slot) {
+                        this.updateSlotState(config.slotId, 'error');
+                        this.emitEvent({ type: 'error', slotId: config.slotId, error: new Error('No se pudo crear el slot') });
+                        resolve(null);
+                        return;
+                    }
+                    // Agregar al servicio pubads
+                    slot.addService(googletag.pubads());
+                    // Configurar size mapping responsivo
+                    if (config.sizeMapping && config.sizeMapping.length > 0) {
+                        const mapping = this.buildSizeMapping(googletag, config.sizeMapping);
+                        slot.defineSizeMapping(mapping);
+                    }
+                    // Configurar targeting
+                    this.applyTargeting(slot, config.targeting);
+                    // Colapsar si esta vacio
+                    if (config.collapseEmpty ?? this.config.defaultSlotConfig?.collapseEmpty) {
+                        slot.setCollapseEmptyDiv(true, true);
+                    }
+                    // Guardar referencia
+                    this.activeSlots.set(config.slotId, slot);
+                    this._slots.update((slots) => new Map(slots).set(config.slotId, slot));
+                    // Mostrar el ad
+                    googletag.enableServices();
+                    googletag.display(config.slotId);
+                    this.updateSlotState(config.slotId, 'rendered');
+                    this.emitEvent({ type: 'loaded', slotId: config.slotId, isEmpty: false });
+                    if (this._isDebugMode()) {
+                        console.log(`[ValtechAds] Slot definido: ${config.slotId}`, {
+                            adUnitPath,
+                            sizes: config.size,
+                        });
+                    }
+                    resolve(config.slotId);
+                }
+                catch (error) {
+                    console.error('[ValtechAds] Error definiendo slot:', error);
+                    this.updateSlotState(config.slotId, 'error');
+                    this.emitEvent({ type: 'error', slotId: config.slotId, error: error });
+                    resolve(null);
+                }
+            });
+        });
     }
     /**
-     * Verifica si existe un preset
+     * Destruye un slot y libera recursos.
+     *
+     * @param slotId - ID del slot a destruir
      */
-    has(component, presetName) {
-        return !!this._presets()[component]?.[presetName];
+    destroySlot(slotId) {
+        const slot = this.activeSlots.get(slotId);
+        if (!slot)
+            return;
+        const googletag = window.googletag;
+        if (googletag) {
+            googletag.cmd.push(() => {
+                googletag.destroySlots([slot]);
+            });
+        }
+        this.activeSlots.delete(slotId);
+        this._slots.update((slots) => {
+            const newSlots = new Map(slots);
+            newSlots.delete(slotId);
+            return newSlots;
+        });
+        this._slotStates.update((states) => {
+            const newStates = new Map(states);
+            newStates.delete(slotId);
+            return newStates;
+        });
+        if (this._isDebugMode()) {
+            console.log(`[ValtechAds] Slot destruido: ${slotId}`);
+        }
     }
     /**
-     * Registra presets de la aplicación
+     * Refresca un slot especifico o todos los slots activos.
      *
-     * @param presets Configuración de presets
-     *
-     * @example
-     * presets.registerPresets({
-     *   button: {
-     *     'primary-action': { size: 'large', color: 'primary' },
-     *   },
-     *   card: {
-     *     'feature': { variant: 'elevated' },
-     *   }
-     * });
+     * @param slotIds - IDs de slots a refrescar (undefined = todos)
      */
-    registerPresets(presets) {
-        this._presets.set(presets);
+    refreshSlots(slotIds) {
+        if (!this.isEnabled())
+            return;
+        const googletag = window.googletag;
+        if (!googletag)
+            return;
+        googletag.cmd.push(() => {
+            if (slotIds && slotIds.length > 0) {
+                const slots = slotIds.map((id) => this.activeSlots.get(id)).filter((s) => !!s);
+                if (slots.length > 0) {
+                    googletag.pubads().refresh(slots);
+                    if (this._isDebugMode()) {
+                        console.log(`[ValtechAds] Slots refrescados: ${slotIds.join(', ')}`);
+                    }
+                }
+            }
+            else {
+                googletag.pubads().refresh();
+                if (this._isDebugMode()) {
+                    console.log('[ValtechAds] Todos los slots refrescados');
+                }
+            }
+        });
     }
     /**
-     * Agrega presets para un componente específico (merge con existentes)
+     * Obtiene el estado de un slot.
+     *
+     * @param slotId - ID del slot
+     * @returns Estado actual del slot
      */
-    registerComponentPresets(component, presets) {
-        this._presets.update((current) => ({
-            ...current,
-            [component]: {
-                ...current[component],
-                ...presets,
-            },
-        }));
+    getSlotState(slotId) {
+        return this._slotStates().get(slotId) ?? 'idle';
     }
+    // ===========================================================================
+    // PREMIUM USER
+    // ===========================================================================
     /**
-     * Obtiene todos los nombres de presets para un componente
-     */
-    getPresetNames(component) {
-        return Object.keys(this._presets()[component] || {});
+     * Actualiza el estado premium del usuario.
+     * Llamar cuando cambie el estado de suscripcion.
+     *
+     * @param isPremium - Nuevo estado premium
+     */
+    updatePremiumStatus(isPremium) {
+        const wasEnabled = this.isEnabled();
+        this._isPremiumUser.set(isPremium);
+        if (isPremium && wasEnabled) {
+            // Destruir todos los slots activos
+            this.destroyAllSlots();
+            if (this._isDebugMode()) {
+                console.log('[ValtechAds] Usuario ahora es premium - ads deshabilitados');
+            }
+        }
+        else if (!isPremium && !wasEnabled && this._isInitialized()) {
+            if (this._isDebugMode()) {
+                console.log('[ValtechAds] Usuario ya no es premium - ads habilitados');
+            }
+        }
     }
     /**
-     * Obtiene todos los componentes con presets registrados
+     * Destruye todos los slots activos.
      */
-    getRegisteredComponents() {
-        return Object.keys(this._presets());
+    destroyAllSlots() {
+        const googletag = window.googletag;
+        if (googletag) {
+            googletag.cmd.push(() => {
+                googletag.destroySlots();
+            });
+        }
+        this.activeSlots.clear();
+        this._slots.set(new Map());
+        this._slotStates.set(new Map());
+        if (this._isDebugMode()) {
+            console.log('[ValtechAds] Todos los slots destruidos');
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PresetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PresetService, providedIn: 'root' }); }
+    // ===========================================================================
+    // PRIVATE METHODS
+    // ===========================================================================
+    resolveSizes(size) {
+        if (typeof size === 'string') {
+            // Single preset size
+            const mapped = AD_SIZE_MAP[size];
+            return mapped === 'fluid' ? 'fluid' : [mapped];
+        }
+        if (Array.isArray(size)) {
+            if (typeof size[0] === 'string') {
+                // Array of preset sizes
+                return size.map((s) => {
+                    const mapped = AD_SIZE_MAP[s];
+                    return mapped === 'fluid' ? 'fluid' : mapped;
+                });
+            }
+            // Direct size array
+            return size;
+        }
+        return 'fluid';
+    }
+    buildSizeMapping(googletag, mapping) {
+        const builder = googletag.sizeMapping();
+        // Ordenar por viewport descendente
+        const sorted = [...mapping].sort((a, b) => b.viewportWidth - a.viewportWidth);
+        for (const m of sorted) {
+            builder.addSize([m.viewportWidth, 0], m.sizes);
+        }
+        return builder.build();
+    }
+    applyTargeting(slot, targeting) {
+        // Aplicar targeting global
+        if (this.config.globalTargeting) {
+            for (const [key, value] of Object.entries(this.config.globalTargeting)) {
+                slot.setTargeting(key, value);
+            }
+        }
+        // Aplicar targeting del slot
+        if (targeting) {
+            for (const [key, value] of Object.entries(targeting)) {
+                slot.setTargeting(key, value);
+            }
+        }
+        // Agregar targeting de debug si esta habilitado
+        if (this._isDebugMode()) {
+            slot.setTargeting('test', 'true');
+        }
+    }
+    updateSlotState(slotId, state) {
+        this._slotStates.update((states) => new Map(states).set(slotId, state));
+    }
+    emitEvent(event) {
+        const fullEvent = { ...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);
+        }
+    }
+    setupRouteListener() {
+        if (!this.config.excludeRoutes || this.config.excludeRoutes.length === 0) {
+            return;
+        }
+        this.routerSubscription = this.router.events
+            .pipe(filter$1((event) => event instanceof NavigationEnd))
+            .subscribe((event) => {
+            const shouldHide = this.isRouteExcluded(event.urlAfterRedirects);
+            if (shouldHide) {
+                this.destroyAllSlots();
+            }
+        });
+    }
+    setupAutoRefresh() {
+        const intervalMs = (this.config.autoRefreshInterval ?? 0) * 1000;
+        if (intervalMs <= 0)
+            return;
+        this.refreshTimerId = setInterval(() => {
+            if (this.isEnabled() && this.activeSlots.size > 0) {
+                this.refreshSlots();
+            }
+        }, intervalMs);
+    }
+    isRouteExcluded(url) {
+        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() {
+        this.routerSubscription?.unsubscribe();
+        if (this.refreshTimerId) {
+            clearInterval(this.refreshTimerId);
+        }
+        this.destroyAllSlots();
+        this.consentService.destroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AdsService, deps: [{ token: i0.Injector }, { token: VALTECH_ADS_CONFIG }, { token: PLATFORM_ID }, { token: i1$1.Router }, { token: AdsLoaderService }, { token: AdsConsentService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AdsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PresetService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AdsService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }] });
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [VALTECH_ADS_CONFIG]
+                }] }, { type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: i1$1.Router }, { type: AdsLoaderService }, { type: AdsConsentService }] });
 
 /**
- * Configura el sistema de presets de Valtech Components.
+ * Ads Configuration
  *
- * @param presets Configuración de presets por componente
- * @returns Providers para agregar en app.config.ts
+ * Configuracion e inicializacion de Google Ad Manager para Angular.
+ * Usa provideValtechAds() en el bootstrap de tu aplicacion.
+ */
+/**
+ * Token de inyeccion para la configuracion de Ads.
+ * Usado internamente por los servicios de ads.
+ */
+const VALTECH_ADS_CONFIG = new InjectionToken('ValtechAdsConfig');
+/**
+ * Configuracion por defecto de lazy loading.
+ */
+const DEFAULT_LAZY_LOAD_CONFIG = {
+    rootMargin: '200px',
+    threshold: 0,
+    fetchMarginPercent: 200,
+    renderMarginPercent: 100,
+};
+/**
+ * Configuracion por defecto del servicio de ads.
+ */
+const DEFAULT_ADS_CONFIG = {
+    debugMode: false,
+    lazyLoad: true,
+    lazyLoadConfig: DEFAULT_LAZY_LOAD_CONFIG,
+    enablePersonalization: true,
+    showNonPersonalizedAds: true,
+    autoRefreshInterval: 0, // Deshabilitado por defecto
+    defaultSlotConfig: {
+        collapseEmpty: true,
+        showSkeleton: true,
+        minHeight: '90px',
+    },
+};
+/**
+ * Factory para inicializar AdsService.
+ * Se ejecuta durante el bootstrap de la aplicacion.
+ */
+function initializeAds(adsService) {
+    return () => adsService.initialize();
+}
+/**
+ * Provee el servicio de Ads a la aplicacion Angular.
+ *
+ * @param config - Configuracion de Google Ad Manager
+ * @returns EnvironmentProviders para usar en bootstrapApplication
  *
  * @example
- * // app.config.ts
- * import { provideValtechPresets } from 'valtech-components';
+ * ```typescript
+ * // main.ts
+ * import { bootstrapApplication } from '@angular/platform-browser';
+ * import { provideValtechAds, provideValtechFirebase } from 'valtech-components';
+ * import { environment } from './environments/environment';
  *
- * export const appConfig: ApplicationConfig = {
+ * bootstrapApplication(AppComponent, {
  *   providers: [
- *     provideValtechPresets({
- *       button: {
- *         'primary-action': { size: 'large', color: 'primary', fill: 'solid' },
- *         'secondary': { size: 'medium', color: 'secondary', fill: 'outline' },
- *         'danger': { size: 'medium', color: 'danger', fill: 'solid' },
- *       },
- *       card: {
- *         'feature': { variant: 'elevated', padding: 'large' },
- *         'compact': { variant: 'flat', padding: 'small' },
- *       },
- *       input: {
- *         'form-field': { size: 'medium', fill: 'outline', labelPosition: 'floating' },
- *       }
+ *     // Firebase primero (para consent mode)
+ *     provideValtechFirebase({
+ *       firebase: environment.firebase,
+ *       enableAnalytics: true,
  *     }),
- *   ]
- * };
+ *
+ *     // Luego Ads
+ *     provideValtechAds({
+ *       networkId: '/12345678',
+ *       debugMode: !environment.production,
+ *       isPremiumUser: () => inject(AuthService).hasRole('premium'),
+ *     }),
+ *   ],
+ * });
+ * ```
+ *
+ * @example Con targeting global y rutas excluidas
+ * ```typescript
+ * provideValtechAds({
+ *   networkId: '/12345678',
+ *   globalTargeting: {
+ *     site: 'myvaltech',
+ *     section: 'app',
+ *   },
+ *   excludeRoutes: [
+ *     '^/checkout',
+ *     '^/payment',
+ *     '^/premium',
+ *   ],
+ * })
+ * ```
  */
-function provideValtechPresets(presets) {
+function provideValtechAds(config) {
+    // Merge config con defaults
+    const mergedConfig = {
+        ...DEFAULT_ADS_CONFIG,
+        ...config,
+        lazyLoadConfig: {
+            ...DEFAULT_LAZY_LOAD_CONFIG,
+            ...config.lazyLoadConfig,
+        },
+        defaultSlotConfig: {
+            ...DEFAULT_ADS_CONFIG.defaultSlotConfig,
+            ...config.defaultSlotConfig,
+        },
+    };
     return makeEnvironmentProviders([
+        { provide: VALTECH_ADS_CONFIG, useValue: mergedConfig },
+        // Inicializar AdsService al arrancar (pero NO cargar script GPT aun)
         {
             provide: APP_INITIALIZER,
-            useFactory: (presetService) => {
-                return () => {
-                    presetService.registerPresets(presets);
-                };
-            },
-            deps: [PresetService],
+            useFactory: initializeAds,
+            deps: [AdsService],
             multi: true,
         },
     ]);
 }
 
-// Service
+/**
+ * Ads Module
+ *
+ * Exports publicos para el servicio de Google Ad Manager.
+ */
+// Configuration
+
+/**
+ * Ad Slot Component
+ *
+ * Componente standalone para mostrar ads de Google Ad Manager.
+ * Se integra automaticamente con el servicio de Ads y respeta consent + premium.
+ *
+ * @example
+ * ```html
+ * <!-- Banner basico -->
+ * <val-ad-slot
+ *   slotId="homepage-top"
+ *   adUnitPath="/homepage/top"
+ *   size="leaderboard"
+ * />
+ *
+ * <!-- Con responsivo -->
+ * <val-ad-slot
+ *   slotId="sidebar-ad"
+ *   adUnitPath="/sidebar"
+ *   [size]="['medium-rectangle', 'half-page']"
+ *   [sizeMapping]="[
+ *     { viewportWidth: 1024, sizes: [[300, 600]] },
+ *     { viewportWidth: 768, sizes: [[300, 250]] },
+ *     { viewportWidth: 0, sizes: [[320, 50]] }
+ *   ]"
+ * />
+ *
+ * <!-- Native ad -->
+ * <val-ad-slot
+ *   slotId="article-native"
+ *   adUnitPath="/article/native"
+ *   size="native"
+ *   [isNative]="true"
+ * />
+ * ```
+ */
+class AdSlotComponent {
+    constructor() {
+        this.adsService = inject(AdsService);
+        this.platformId = inject(PLATFORM_ID);
+        /** Tamano del ad */
+        this.size = 'medium-rectangle';
+        /** Colapsar si vacio */
+        this.collapseEmpty = true;
+        /** Es native ad */
+        this.isNative = false;
+        /** CSS class adicional */
+        this.cssClass = '';
+        /** Altura minima */
+        this.minHeight = '90px';
+        /** Mostrar skeleton */
+        this.showSkeleton = true;
+        // ===========================================================================
+        // ESTADO
+        // ===========================================================================
+        this._state = signal('idle');
+        this.state = this._state.asReadonly();
+        /** Indica si el componente debe renderizarse */
+        this.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;
+        });
+        /** Ancho del skeleton */
+        this.skeletonWidth = computed(() => {
+            const firstSize = this.getFirstSize();
+            return firstSize ? `${firstSize[0]}px` : '100%';
+        });
+        /** Altura del skeleton */
+        this.skeletonHeight = computed(() => {
+            const firstSize = this.getFirstSize();
+            return firstSize ? `${firstSize[1]}px` : this.minHeight;
+        });
+    }
+    // ===========================================================================
+    // LIFECYCLE
+    // ===========================================================================
+    async ngOnInit() {
+        if (!this.shouldRender()) {
+            return;
+        }
+        await this.initializeSlot();
+    }
+    ngOnDestroy() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.adsService.destroySlot(this.slotId);
+        }
+    }
+    // ===========================================================================
+    // PRIVATE
+    // ===========================================================================
+    async initializeSlot() {
+        this._state.set('loading');
+        const config = {
+            slotId: this.slotId,
+            adUnitPath: this.adUnitPath,
+            size: this.size,
+            sizeMapping: this.sizeMapping,
+            targeting: this.targeting,
+            collapseEmpty: this.collapseEmpty,
+            isNative: this.isNative,
+            cssClass: this.cssClass,
+            minHeight: this.minHeight,
+            showSkeleton: this.showSkeleton,
+        };
+        const result = await this.adsService.defineSlot(config);
+        if (result) {
+            this._state.set('rendered');
+        }
+        else {
+            this._state.set(this.adsService.getSlotState(this.slotId));
+        }
+    }
+    getFirstSize() {
+        if (typeof this.size === 'string') {
+            const mapped = AD_SIZE_MAP[this.size];
+            return mapped === 'fluid' ? null : mapped;
+        }
+        if (Array.isArray(this.size)) {
+            if (typeof this.size[0] === 'number') {
+                return this.size;
+            }
+            if (typeof this.size[0] === 'string') {
+                const first = AD_SIZE_MAP[this.size[0]];
+                return first === 'fluid' ? null : first;
+            }
+            if (Array.isArray(this.size[0])) {
+                return this.size[0];
+            }
+        }
+        return null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AdSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AdSlotComponent, isStandalone: true, selector: "val-ad-slot", inputs: { slotId: "slotId", adUnitPath: "adUnitPath", size: "size", sizeMapping: "sizeMapping", targeting: "targeting", collapseEmpty: "collapseEmpty", isNative: "isNative", cssClass: "cssClass", minHeight: "minHeight", showSkeleton: "showSkeleton" }, ngImport: i0, 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--native]="isNative"
+        [class]="cssClass"
+        [style.min-height]="minHeight"
+      >
+        <!-- Skeleton mientras carga -->
+        @if (showSkeleton && state() === 'loading') {
+          <div
+            class="val-ad-slot__skeleton"
+            [style.width]="skeletonWidth()"
+            [style.height]="skeletonHeight()"
+          ></div>
+        }
+
+        <!-- Container del ad -->
+        <div
+          [id]="slotId"
+          class="val-ad-slot__container"
+          [class.val-ad-slot__container--hidden]="state() === 'loading' && showSkeleton"
+        ></div>
+
+        <!-- Debug info -->
+        @if (adsService.isDebugMode()) {
+          <div class="val-ad-slot__debug">
+            <small>{{ slotId }} | {{ adUnitPath }} | {{ state() }}</small>
+          </div>
+        }
+      </div>
+    }
+  `, isInline: true, styles: [".val-ad-slot{position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden}.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--native{width:100%}.val-ad-slot__skeleton{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--hidden{visibility:hidden;position:absolute}.val-ad-slot__debug{position:absolute;bottom:0;left:0;background:#000000b3;color:#fff;padding:2px 6px;font-size:10px;z-index:1000;font-family:monospace}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AdSlotComponent, decorators: [{
+            type: Component,
+            args: [{ 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--native]="isNative"
+        [class]="cssClass"
+        [style.min-height]="minHeight"
+      >
+        <!-- Skeleton mientras carga -->
+        @if (showSkeleton && state() === 'loading') {
+          <div
+            class="val-ad-slot__skeleton"
+            [style.width]="skeletonWidth()"
+            [style.height]="skeletonHeight()"
+          ></div>
+        }
+
+        <!-- Container del ad -->
+        <div
+          [id]="slotId"
+          class="val-ad-slot__container"
+          [class.val-ad-slot__container--hidden]="state() === 'loading' && showSkeleton"
+        ></div>
+
+        <!-- Debug info -->
+        @if (adsService.isDebugMode()) {
+          <div class="val-ad-slot__debug">
+            <small>{{ slotId }} | {{ adUnitPath }} | {{ state() }}</small>
+          </div>
+        }
+      </div>
+    }
+  `, styles: [".val-ad-slot{position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden}.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--native{width:100%}.val-ad-slot__skeleton{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--hidden{visibility:hidden;position:absolute}.val-ad-slot__debug{position:absolute;bottom:0;left:0;background:#000000b3;color:#fff;padding:2px 6px;font-size:10px;z-index:1000;font-family:monospace}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
+        }], propDecorators: { slotId: [{
+                type: Input,
+                args: [{ required: true }]
+            }], adUnitPath: [{
+                type: Input,
+                args: [{ required: true }]
+            }], size: [{
+                type: Input
+            }], sizeMapping: [{
+                type: Input
+            }], targeting: [{
+                type: Input
+            }], collapseEmpty: [{
+                type: Input
+            }], isNative: [{
+                type: Input
+            }], cssClass: [{
+                type: Input
+            }], minHeight: [{
+                type: Input
+            }], showSkeleton: [{
+                type: Input
+            }] } });
 
 /*
  * Public API Surface of valtech-components
@@ -26953,5 +29453,5 @@ function provideValtechPresets(presets) {
  * Generated bundle index. Do not edit.
  */
 
-export { ARTICLE_SPACING, AccordionComponent, ActionHeaderComponent, ActionType, AlertBoxComponent, ArticleBuilder, ArticleComponent, AuthService, AuthStateService, AuthStorageService, AuthSyncService, AvatarComponent, BannerComponent, BaseDefault, BoxComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, COMMON_COUNTRY_CODES, COMMON_CURRENCIES, CURRENCY_INFO, CardComponent, CardSection, CardType, CardsCarouselComponent, CheckInputComponent, ChipGroupComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CodeDisplayComponent, CommandDisplayComponent, CommentComponent, CommentInputComponent, CommentSectionComponent, CompanyFooterComponent, ComponentStates, ConfirmationDialogService, ContentLoaderComponent, CountdownComponent, CurrencyInputComponent, DEFAULT_AUTH_CONFIG, DEFAULT_CANCEL_BUTTON, DEFAULT_CONFIRM_BUTTON, DEFAULT_COUNTDOWN_LABELS, DEFAULT_COUNTDOWN_LABELS_EN, DEFAULT_EMPTY_STATE, DEFAULT_LEGEND_LABELS, DEFAULT_MODAL_CANCEL_BUTTON, DEFAULT_MODAL_CONFIRM_BUTTON, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PAYMENT_STATUS_COLORS, DEFAULT_PAYMENT_STATUS_LABELS, DEFAULT_PLATFORMS, DEFAULT_STATUS_COLORS, DEFAULT_STATUS_LABELS, DEFAULT_WINNER_LABELS, DataTableComponent, DateInputComponent, DateRangeInputComponent, DeviceService, DisplayComponent, DividerComponent, DownloadService, EmailInputComponent, ExpandableTextComponent, FabComponent, FileInputComponent, FirebaseService, FirestoreCollectionFactory, FirestoreService, FooterComponent, FooterLinksComponent, FormComponent, FormFooterComponent, FunHeaderComponent, GlowCardComponent, HeaderComponent, HintComponent, HorizontalScrollComponent, HourInputComponent, HrefComponent, I18nService, INITIAL_AUTH_STATE, INITIAL_MFA_STATE, Icon, IconComponent, IconService, ImageComponent, InAppBrowserService, InfoComponent, InputType, ItemListComponent, LANG_STORAGE_KEY$1 as LANG_STORAGE_KEY, LanguageSelectorComponent, LayeredCardComponent, LayoutComponent, LinkComponent, LinkProcessorService, LinksAccordionComponent, LinksCakeComponent, LocalStorageService, LocaleService, MODAL_SIZES, MOTION, MenuComponent, MessagingService, ModalService, MultiSelectSearchComponent, NavigationService, NoContentComponent, NotesBoxComponent, NotificationsService, NumberFromToComponent, NumberInputComponent, NumberStepperComponent, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PLATFORM_CONFIGS, PageContentComponent, PageTemplateComponent, PageWrapperComponent, PaginationComponent, ParticipantCardComponent, PasswordInputComponent, PhoneInputComponent, PillComponent, PinInputComponent, PlainCodeBoxComponent, PopoverSelectorComponent, PresetService, PriceTagComponent, PrimarySolidBlockButton, PrimarySolidBlockHrefButton, PrimarySolidBlockIconButton, PrimarySolidBlockIconHrefButton, PrimarySolidDefaultRoundButton, PrimarySolidDefaultRoundHrefButton, PrimarySolidDefaultRoundIconButton, PrimarySolidDefaultRoundIconHrefButton, PrimarySolidFullButton, PrimarySolidFullHrefButton, PrimarySolidFullIconButton, PrimarySolidFullIconHrefButton, PrimarySolidLargeRoundButton, PrimarySolidLargeRoundHrefButton, PrimarySolidLargeRoundIconButton, PrimarySolidLargeRoundIconHrefButton, PrimarySolidSmallRoundButton, PrimarySolidSmallRoundHrefButton, PrimarySolidSmallRoundIconButton, PrimarySolidSmallRoundIconHrefButton, ProcessLinksPipe, ProgressBarComponent, ProgressRingComponent, ProgressStatusComponent, PrompterComponent, QR_PRESETS, QrCodeComponent, QrGeneratorService, QueryBuilder, QuoteBoxComponent, RadioInputComponent, RaffleStatusCardComponent, RangeInputComponent, RatingComponent, RecapCardComponent, RightsFooterComponent, SKELETON_PRESETS, SearchSelectorComponent, SearchbarComponent, SecondarySolidBlockButton, SecondarySolidBlockHrefButton, SecondarySolidBlockIconButton, SecondarySolidBlockIconHrefButton, SecondarySolidDefaultRoundButton, SecondarySolidDefaultRoundHrefButton, SecondarySolidDefaultRoundIconButton, SecondarySolidDefaultRoundIconHrefButton, SecondarySolidFullButton, SecondarySolidFullHrefButton, SecondarySolidFullIconButton, SecondarySolidFullIconHrefButton, SecondarySolidLargeRoundButton, SecondarySolidLargeRoundHrefButton, SecondarySolidLargeRoundIconButton, SecondarySolidLargeRoundIconHrefButton, SecondarySolidSmallRoundButton, SecondarySolidSmallRoundHrefButton, SecondarySolidSmallRoundIconButton, SecondarySolidSmallRoundIconHrefButton, SegmentControlComponent, SelectSearchComponent, SessionService, ShareButtonsComponent, SimpleComponent, SkeletonComponent, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, StatsCardComponent, StepperComponent, StorageService, SwipeCarouselComponent, TabbedContentComponent, TabsComponent, TestimonialCardComponent, TestimonialCarouselComponent, TextComponent, TextInputComponent, TextareaInputComponent, ThemeOption, ThemeService, TicketGridComponent, TimelineComponent, TitleBlockComponent, TitleComponent, ToastService, ToggleInputComponent, TokenService, ToolbarActionType, ToolbarComponent, TranslatePipe, TypedCollection, VALTECH_AUTH_CONFIG, VALTECH_FIREBASE_CONFIG, WinnerDisplayComponent, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, authGuard, authInterceptor, buildPath, collections, createFirebaseConfig, createGlowCardProps, createNumberFromToField, createTitleProps, extractPathParams, getCollectionPath, getDocumentId, goToTop, guestGuard, hasEmulators, isAtEnd, isCollectionPath, isDocumentPath, isEmulatorMode, isValidPath, joinPath, maxLength, permissionGuard, permissionGuardFromRoute, provideValtechAuth, provideValtechAuthInterceptor, provideValtechFirebase, provideValtechI18n, provideValtechPresets, query, replaceSpecialChars, resolveColor, resolveInputDefaultValue, roleGuard, storagePaths, superAdminGuard };
+export { AD_SIZE_MAP, ARTICLE_SPACING, AccordionComponent, ActionHeaderComponent, ActionType, AdSlotComponent, AdsConsentService, AdsLoaderService, AdsService, AlertBoxComponent, AnalyticsErrorHandler, AnalyticsRouterTracker, AnalyticsService, ArticleBuilder, ArticleComponent, AuthService, AuthStateService, AuthStorageService, AuthSyncService, AvatarComponent, BannerComponent, BaseDefault, BoxComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, COMMON_COUNTRY_CODES, COMMON_CURRENCIES, CURRENCY_INFO, CardComponent, CardSection, CardType, CardsCarouselComponent, CheckInputComponent, ChipGroupComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CodeDisplayComponent, CommandDisplayComponent, CommentComponent, CommentInputComponent, CommentSectionComponent, CompanyFooterComponent, ComponentStates, ConfirmationDialogService, ContentLoaderComponent, CountdownComponent, CurrencyInputComponent, DEFAULT_ADS_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_CANCEL_BUTTON, DEFAULT_CONFIRM_BUTTON, DEFAULT_COUNTDOWN_LABELS, DEFAULT_COUNTDOWN_LABELS_EN, DEFAULT_EMPTY_STATE, DEFAULT_LAZY_LOAD_CONFIG, DEFAULT_LEGEND_LABELS, DEFAULT_MODAL_CANCEL_BUTTON, DEFAULT_MODAL_CONFIRM_BUTTON, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PAYMENT_STATUS_COLORS, DEFAULT_PAYMENT_STATUS_LABELS, DEFAULT_PLATFORMS, DEFAULT_STATUS_COLORS, DEFAULT_STATUS_LABELS, DEFAULT_WINNER_LABELS, DataTableComponent, DateInputComponent, DateRangeInputComponent, DeviceService, DisplayComponent, DividerComponent, DownloadService, EmailInputComponent, ExpandableTextComponent, FabComponent, FileInputComponent, FirebaseService, FirestoreCollectionFactory, FirestoreService, FooterComponent, FooterLinksComponent, FormComponent, FormFooterComponent, FunHeaderComponent, GlowCardComponent, HeaderComponent, HintComponent, HorizontalScrollComponent, HourInputComponent, HrefComponent, I18nService, INITIAL_AUTH_STATE, INITIAL_MFA_STATE, Icon, IconComponent, IconService, ImageComponent, InAppBrowserService, InfoComponent, InputType, ItemListComponent, LANG_STORAGE_KEY$1 as LANG_STORAGE_KEY, LanguageSelectorComponent, LayeredCardComponent, LayoutComponent, LinkComponent, LinkProcessorService, LinksAccordionComponent, LinksCakeComponent, LocalStorageService, LocaleService, MODAL_SIZES, MOTION, MenuComponent, MessagingService, ModalService, MultiSelectSearchComponent, NavigationService, NoContentComponent, NotesBoxComponent, NotificationsService, NumberFromToComponent, NumberInputComponent, NumberStepperComponent, OAuthCallbackComponent, OAuthService, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PLATFORM_CONFIGS, PageContentComponent, PageTemplateComponent, PageWrapperComponent, PaginationComponent, ParticipantCardComponent, PasswordInputComponent, PhoneInputComponent, PillComponent, PinInputComponent, PlainCodeBoxComponent, PopoverSelectorComponent, PresetService, PriceTagComponent, PrimarySolidBlockButton, PrimarySolidBlockHrefButton, PrimarySolidBlockIconButton, PrimarySolidBlockIconHrefButton, PrimarySolidDefaultRoundButton, PrimarySolidDefaultRoundHrefButton, PrimarySolidDefaultRoundIconButton, PrimarySolidDefaultRoundIconHrefButton, PrimarySolidFullButton, PrimarySolidFullHrefButton, PrimarySolidFullIconButton, PrimarySolidFullIconHrefButton, PrimarySolidLargeRoundButton, PrimarySolidLargeRoundHrefButton, PrimarySolidLargeRoundIconButton, PrimarySolidLargeRoundIconHrefButton, PrimarySolidSmallRoundButton, PrimarySolidSmallRoundHrefButton, PrimarySolidSmallRoundIconButton, PrimarySolidSmallRoundIconHrefButton, ProcessLinksPipe, ProgressBarComponent, ProgressRingComponent, ProgressStatusComponent, PrompterComponent, QR_PRESETS, QrCodeComponent, QrGeneratorService, QueryBuilder, QuoteBoxComponent, RadioInputComponent, RaffleStatusCardComponent, RangeInputComponent, RatingComponent, RecapCardComponent, RightsFooterComponent, SKELETON_PRESETS, SearchSelectorComponent, SearchbarComponent, SecondarySolidBlockButton, SecondarySolidBlockHrefButton, SecondarySolidBlockIconButton, SecondarySolidBlockIconHrefButton, SecondarySolidDefaultRoundButton, SecondarySolidDefaultRoundHrefButton, SecondarySolidDefaultRoundIconButton, SecondarySolidDefaultRoundIconHrefButton, SecondarySolidFullButton, SecondarySolidFullHrefButton, SecondarySolidFullIconButton, SecondarySolidFullIconHrefButton, SecondarySolidLargeRoundButton, SecondarySolidLargeRoundHrefButton, SecondarySolidLargeRoundIconButton, SecondarySolidLargeRoundIconHrefButton, SecondarySolidSmallRoundButton, SecondarySolidSmallRoundHrefButton, SecondarySolidSmallRoundIconButton, SecondarySolidSmallRoundIconHrefButton, SegmentControlComponent, SelectSearchComponent, SessionService, ShareButtonsComponent, SimpleComponent, SkeletonComponent, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, StatsCardComponent, StepperComponent, StorageService, SwipeCarouselComponent, TabbedContentComponent, TabsComponent, TestimonialCardComponent, TestimonialCarouselComponent, TextComponent, TextInputComponent, TextareaInputComponent, ThemeOption, ThemeService, TicketGridComponent, TimelineComponent, TitleBlockComponent, TitleComponent, ToastService, ToggleInputComponent, TokenService, ToolbarActionType, ToolbarComponent, TranslatePipe, TypedCollection, VALTECH_ADS_CONFIG, VALTECH_AUTH_CONFIG, VALTECH_FIREBASE_CONFIG, WinnerDisplayComponent, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, authGuard, authInterceptor, buildPath, collections, createFirebaseConfig, createGlowCardProps, createNumberFromToField, createTitleProps, extractPathParams, getCollectionPath, getDocumentId, goToTop, guestGuard, hasEmulators, isAtEnd, isCollectionPath, isDocumentPath, isEmulatorMode, isValidPath, joinPath, maxLength, permissionGuard, permissionGuardFromRoute, provideValtechAds, provideValtechAuth, provideValtechAuthInterceptor, provideValtechFirebase, provideValtechI18n, provideValtechPresets, query, replaceSpecialChars, resolveColor, resolveInputDefaultValue, roleGuard, storagePaths, superAdminGuard };
 //# sourceMappingURL=valtech-components.mjs.map