valtech-components 2.0.510 → 2.0.511

package/fesm2022/valtech-components.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, Injectable, signal, makeEnvironmentProviders, APP_INITIALIZER, inject, HostListener, Pipe, ChangeDetectionStrategy, computed, ViewChild, ChangeDetectorRef, ElementRef, PLATFORM_ID, Inject, ErrorHandler, DestroyRef, InjectionToken, Optional, runInInjectionContext, effect } from '@angular/core';
+import { EventEmitter, Component, Input, Output, Injectable, signal, makeEnvironmentProviders, APP_INITIALIZER, inject, HostListener, Pipe, ChangeDetectionStrategy, computed, ViewChild, ChangeDetectorRef, ElementRef, ContentChild, PLATFORM_ID, Inject, ErrorHandler, DestroyRef, InjectionToken, Optional, runInInjectionContext, effect, TemplateRef, ViewContainerRef, isSignal, Directive } 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, IonPopover, IonList, IonItem, IonRadioGroup, IonRadio, IonRange, IonSearchbar, IonSegment, IonSegmentButton, IonToggle, IonAccordion, IonAccordionGroup, IonTabBar, IonTabButton, IonBadge, IonBreadcrumb, IonBreadcrumbs, IonChip, IonNote, ToastController as ToastController$1, IonCol, IonRow, IonMenuButton, IonFooter, IonListHeader, IonInfiniteScroll, IonInfiniteScrollContent, IonGrid, MenuController, IonMenu, IonMenuToggle, AlertController } 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, IonPopover, IonList, IonItem, IonRadioGroup, IonRadio, IonRange, IonSearchbar, IonSegment, IonSegmentButton, IonToggle, IonAccordion, IonAccordionGroup, IonTabBar, IonTabButton, IonBadge, IonBreadcrumb, IonBreadcrumbs, IonChip, IonNote, ToastController as ToastController$1, IonCol, IonRow, IonRefresher, IonRefresherContent, IonMenuButton, IonFooter, IonListHeader, IonInfiniteScroll, IonInfiniteScrollContent, IonGrid, MenuController, IonMenu, IonMenuToggle, AlertController } from '@ionic/angular/standalone';
 import * as i1 from '@angular/common';
 import { CommonModule, NgStyle, NgFor, NgClass, isPlatformBrowser } from '@angular/common';
 import { addIcons } from 'ionicons';
@@ -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, Observable, firstValueFrom, of, from } from 'rxjs';
+import { BehaviorSubject, isObservable, firstValueFrom, filter, map, distinctUntilChanged, Subject, throwError, Observable, 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';
@@ -36,7 +36,7 @@ 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 { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed, toSignal } 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';
@@ -16074,6 +16074,269 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['accordionGroup']
             }] } });
 
+/**
+ * Valores por defecto para el refresher.
+ */
+const DEFAULT_REFRESHER_METADATA = {
+    disabled: false,
+    pullThreshold: 70,
+    pullMax: 200,
+    pullFactor: 0.5,
+    snapbackDuration: 280,
+    closeDuration: 280,
+    spinnerType: 'crescent',
+    hapticFeedback: true,
+    webMode: false,
+};
+
+/**
+ * Componente de pull-to-refresh para movil y web.
+ *
+ * @example
+ * <!-- Uso basico -->
+ * <val-refresher
+ *   [props]="{
+ *     color: 'primary',
+ *     pullingText: 'Arrastra para actualizar',
+ *     refreshingText: 'Cargando...'
+ *   }"
+ *   (refresh)="onRefresh($event)"
+ * >
+ *   <ion-content>
+ *     <!-- Contenido scrolleable -->
+ *   </ion-content>
+ * </val-refresher>
+ *
+ * @example
+ * <!-- Con indicador personalizado -->
+ * <val-refresher [props]="{ color: 'primary' }" (refresh)="onRefresh($event)">
+ *   <ng-template #pullingIndicator let-progress="progress">
+ *     <div class="custom-indicator">
+ *       <ion-icon name="arrow-down" [style.transform]="'rotate(' + progress * 180 + 'deg)'"></ion-icon>
+ *     </div>
+ *   </ng-template>
+ *   <ion-content>...</ion-content>
+ * </val-refresher>
+ */
+class RefresherComponent {
+    constructor() {
+        /** Configuracion del refresher */
+        this.props = {};
+        /** Evento emitido cuando se activa el refresh */
+        this.refresh = new EventEmitter();
+        /** Evento de progreso durante el pull */
+        this.pullProgressChange = new EventEmitter();
+        /** Evento de cambio de estado */
+        this.stateChange = new EventEmitter();
+        /** Estado actual del refresher */
+        this.state = signal('idle');
+        /** Progreso actual del pull (0-1) */
+        this.pullProgress = signal(0);
+    }
+    /** Props combinados con defaults */
+    get mergedProps() {
+        return { ...DEFAULT_REFRESHER_METADATA, ...this.props };
+    }
+    /** Si hay indicadores personalizados */
+    get hasCustomIndicator() {
+        return !!(this.pullingIndicator ||
+            this.refreshingIndicator ||
+            this.completingIndicator ||
+            this.props.indicatorConfig);
+    }
+    /**
+     * Activa programaticamente el refresh.
+     */
+    triggerRefresh() {
+        this.state.set('refreshing');
+        this.emitRefreshEvent();
+    }
+    /**
+     * Completa la operacion de refresh actual.
+     */
+    complete() {
+        this.state.set('completing');
+        this.stateChange.emit('completing');
+        this.ionRefresher?.complete();
+        // Resetear a idle despues de la animacion
+        setTimeout(() => {
+            this.state.set('idle');
+            this.stateChange.emit('idle');
+        }, this.mergedProps.closeDuration ?? 280);
+    }
+    /**
+     * Cancela la operacion de refresh actual.
+     */
+    cancel() {
+        this.ionRefresher?.cancel();
+        this.state.set('idle');
+        this.stateChange.emit('idle');
+    }
+    /** Handler para evento ionRefresh */
+    onIonRefresh(event) {
+        this.state.set('refreshing');
+        this.stateChange.emit('refreshing');
+        this.emitRefreshEvent();
+    }
+    /** Handler para evento ionPull */
+    onIonPull(event) {
+        const detail = event.detail;
+        const progress = Math.min(detail.progress, 1);
+        this.pullProgress.set(progress);
+        this.pullProgressChange.emit({
+            progress,
+            thresholdReached: progress >= 1,
+        });
+    }
+    /** Handler para evento ionStart */
+    onIonStart() {
+        this.state.set('pulling');
+        this.stateChange.emit('pulling');
+    }
+    emitRefreshEvent() {
+        const event = {
+            complete: () => this.complete(),
+            cancel: () => this.cancel(),
+            timestamp: new Date(),
+        };
+        this.refresh.emit(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RefresherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RefresherComponent, isStandalone: true, selector: "val-refresher", inputs: { props: "props" }, outputs: { refresh: "refresh", pullProgressChange: "pullProgressChange", stateChange: "stateChange" }, queries: [{ propertyName: "pullingIndicator", first: true, predicate: ["pullingIndicator"], descendants: true }, { propertyName: "refreshingIndicator", first: true, predicate: ["refreshingIndicator"], descendants: true }, { propertyName: "completingIndicator", first: true, predicate: ["completingIndicator"], descendants: true }], viewQueries: [{ propertyName: "ionRefresher", first: true, predicate: ["refresher"], descendants: true }], ngImport: i0, template: `
+    <ion-refresher
+      #refresher
+      slot="fixed"
+      [disabled]="mergedProps.disabled"
+      [pullMin]="mergedProps.pullThreshold"
+      [pullMax]="mergedProps.pullMax"
+      [pullFactor]="mergedProps.pullFactor"
+      [snapbackDuration]="mergedProps.snapbackDuration"
+      [closeDuration]="mergedProps.closeDuration"
+      (ionRefresh)="onIonRefresh($event)"
+      (ionPull)="onIonPull($event)"
+      (ionStart)="onIonStart()"
+    >
+      @if (hasCustomIndicator) {
+        <!-- Custom indicator templates -->
+        <div class="refresher-custom-content">
+          @switch (state()) {
+            @case ('pulling') {
+              @if (pullingIndicator) {
+                <ng-container
+                  *ngTemplateOutlet="pullingIndicator; context: { progress: pullProgress() }"
+                ></ng-container>
+              }
+            }
+            @case ('refreshing') {
+              @if (refreshingIndicator) {
+                <ng-container *ngTemplateOutlet="refreshingIndicator"></ng-container>
+              } @else {
+                <ion-spinner [name]="mergedProps.spinnerType" [color]="mergedProps.color"></ion-spinner>
+                @if (mergedProps.refreshingText) {
+                  <ion-text [color]="mergedProps.color">{{ mergedProps.refreshingText }}</ion-text>
+                }
+              }
+            }
+            @case ('completing') {
+              @if (completingIndicator) {
+                <ng-container *ngTemplateOutlet="completingIndicator"></ng-container>
+              }
+            }
+          }
+        </div>
+      } @else {
+        <!-- Default Ionic refresher content -->
+        <ion-refresher-content
+          [pullingIcon]="mergedProps.spinnerType === 'crescent' ? 'chevron-down-circle-outline' : undefined"
+          [pullingText]="mergedProps.pullingText"
+          [refreshingSpinner]="mergedProps.spinnerType"
+          [refreshingText]="mergedProps.refreshingText"
+        ></ion-refresher-content>
+      }
+    </ion-refresher>
+
+    <ng-content></ng-content>
+  `, isInline: true, styles: [":host{display:block;position:relative}.refresher-custom-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RefresherComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-refresher', standalone: true, imports: [CommonModule, IonRefresher, IonRefresherContent, IonSpinner, IonText], template: `
+    <ion-refresher
+      #refresher
+      slot="fixed"
+      [disabled]="mergedProps.disabled"
+      [pullMin]="mergedProps.pullThreshold"
+      [pullMax]="mergedProps.pullMax"
+      [pullFactor]="mergedProps.pullFactor"
+      [snapbackDuration]="mergedProps.snapbackDuration"
+      [closeDuration]="mergedProps.closeDuration"
+      (ionRefresh)="onIonRefresh($event)"
+      (ionPull)="onIonPull($event)"
+      (ionStart)="onIonStart()"
+    >
+      @if (hasCustomIndicator) {
+        <!-- Custom indicator templates -->
+        <div class="refresher-custom-content">
+          @switch (state()) {
+            @case ('pulling') {
+              @if (pullingIndicator) {
+                <ng-container
+                  *ngTemplateOutlet="pullingIndicator; context: { progress: pullProgress() }"
+                ></ng-container>
+              }
+            }
+            @case ('refreshing') {
+              @if (refreshingIndicator) {
+                <ng-container *ngTemplateOutlet="refreshingIndicator"></ng-container>
+              } @else {
+                <ion-spinner [name]="mergedProps.spinnerType" [color]="mergedProps.color"></ion-spinner>
+                @if (mergedProps.refreshingText) {
+                  <ion-text [color]="mergedProps.color">{{ mergedProps.refreshingText }}</ion-text>
+                }
+              }
+            }
+            @case ('completing') {
+              @if (completingIndicator) {
+                <ng-container *ngTemplateOutlet="completingIndicator"></ng-container>
+              }
+            }
+          }
+        </div>
+      } @else {
+        <!-- Default Ionic refresher content -->
+        <ion-refresher-content
+          [pullingIcon]="mergedProps.spinnerType === 'crescent' ? 'chevron-down-circle-outline' : undefined"
+          [pullingText]="mergedProps.pullingText"
+          [refreshingSpinner]="mergedProps.spinnerType"
+          [refreshingText]="mergedProps.refreshingText"
+        ></ion-refresher-content>
+      }
+    </ion-refresher>
+
+    <ng-content></ng-content>
+  `, styles: [":host{display:block;position:relative}.refresher-custom-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px}\n"] }]
+        }], propDecorators: { ionRefresher: [{
+                type: ViewChild,
+                args: ['refresher']
+            }], pullingIndicator: [{
+                type: ContentChild,
+                args: ['pullingIndicator']
+            }], refreshingIndicator: [{
+                type: ContentChild,
+                args: ['refreshingIndicator']
+            }], completingIndicator: [{
+                type: ContentChild,
+                args: ['completingIndicator']
+            }], props: [{
+                type: Input
+            }], refresh: [{
+                type: Output
+            }], pullProgressChange: [{
+                type: Output
+            }], stateChange: [{
+                type: Output
+            }] } });
+
 /**
  * Configuración de espaciado predefinida
  */
@@ -20854,203 +21117,1033 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }] } });
 
-class LayoutComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: LayoutComponent, isStandalone: true, selector: "val-layout", ngImport: i0, template: `
-    <div class="layout-container">
-      <ng-content></ng-content>
-    </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)}.layout-container{margin:0 auto;padding:0;width:100%;box-sizing:border-box;margin-bottom:1rem;padding-top:.5rem}@media (max-width: 768px){.layout-container{max-width:100%}}@media (min-width: 768px){.layout-container{margin:0 auto;max-width:33.75rem;margin-bottom:1.5rem}}@media (min-width: 1200px){.layout-container{margin:0 auto;max-width:45rem}}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LayoutComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-layout', standalone: true, imports: [], template: `
-    <div class="layout-container">
-      <ng-content></ng-content>
-    </div>
-  `, 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)}.layout-container{margin:0 auto;padding:0;width:100%;box-sizing:border-box;margin-bottom:1rem;padding-top:.5rem}@media (max-width: 768px){.layout-container{max-width:100%}}@media (min-width: 768px){.layout-container{margin:0 auto;max-width:33.75rem;margin-bottom:1.5rem}}@media (min-width: 1200px){.layout-container{margin:0 auto;max-width:45rem}}\n"] }]
-        }] });
-
-class SimpleComponent {
-    constructor() {
-        this.onClick = new EventEmitter();
-        this.onScrollEvent = new EventEmitter();
-        this.theme = inject(ThemeService);
-    }
-    onClickHandler(token) {
-        this.onClick.emit(token);
-    }
-    onScrollHandler($event) {
-        this.onScrollEvent.emit(true);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SimpleComponent, isStandalone: true, selector: "val-simple", inputs: { props: "props" }, outputs: { onClick: "onClick", onScrollEvent: "onScrollEvent" }, ngImport: i0, template: `
-    <val-header [props]="props.header" />
-
-    <ion-content
-      [fullscreen]="true"
-      [ngStyle]="{
-        '--background': theme.IsDark ? 'var(--ion-background-color)' : props.background,
-      }"
-      [scrollEvents]="true"
-      (ionScroll)="onScrollHandler($event)"
-    >
-      <ion-header collapse="condense">
-        <ion-toolbar style="--background: transparent;">
-          <ion-title style="padding: 0;" size="large">{{ props.pageTitle }}</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      @if (props.pageDescription) {
-        <div class="description-container">
-          <val-expandable-text
-            [props]="{
-              limit: 180,
-              content: props.pageDescription,
-              color: 'primary',
-              expandText: 'más',
-            }"
-          />
-        </div>
-      }
-      @if (props.link) {
-        <val-link [props]="props.link" (onClick)="onClickHandler($event)"></val-link>
-      }
-      @if (props.withDivider) {
-        <val-divider [props]="{ fill: 'solid', size: 'medium', color: 'dark' }" />
-      }
-      <val-layout>
-        <ng-content select="[inner-container]"></ng-content>
-      </val-layout>
-    </ion-content>
-    <ng-content select="[outter-container]"></ng-content>
-  `, isInline: true, styles: [".description-container{padding:0 16px}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: HeaderComponent, selector: "val-header", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: LayoutComponent, selector: "val-layout" }, { kind: "component", type: DividerComponent, selector: "val-divider", inputs: ["props"] }, { kind: "component", type: LinkComponent, selector: "val-link", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ExpandableTextComponent, selector: "val-expandable-text", inputs: ["props"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SimpleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-simple', standalone: true, imports: [
-                        NgStyle,
-                        IonHeader,
-                        IonToolbar,
-                        IonTitle,
-                        IonContent,
-                        HeaderComponent,
-                        LayoutComponent,
-                        DividerComponent,
-                        LinkComponent,
-                        ExpandableTextComponent,
-                    ], template: `
-    <val-header [props]="props.header" />
+/**
+ * Valores por defecto para infinite list.
+ */
+const DEFAULT_INFINITE_LIST_METADATA = {
+    direction: 'bottom',
+    pageSize: 20,
+    threshold: '100px',
+    debounceTime: 300,
+    autoLoad: true,
+    spinnerType: 'crescent',
+    useLoadMoreButton: false,
+    showDividers: false,
+    enableRefresh: false,
+};
 
-    <ion-content
-      [fullscreen]="true"
-      [ngStyle]="{
-        '--background': theme.IsDark ? 'var(--ion-background-color)' : props.background,
-      }"
-      [scrollEvents]="true"
-      (ionScroll)="onScrollHandler($event)"
-    >
-      <ion-header collapse="condense">
-        <ion-toolbar style="--background: transparent;">
-          <ion-title style="padding: 0;" size="large">{{ props.pageTitle }}</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      @if (props.pageDescription) {
-        <div class="description-container">
-          <val-expandable-text
-            [props]="{
-              limit: 180,
-              content: props.pageDescription,
-              color: 'primary',
-              expandText: 'más',
-            }"
-          />
-        </div>
-      }
-      @if (props.link) {
-        <val-link [props]="props.link" (onClick)="onClickHandler($event)"></val-link>
-      }
-      @if (props.withDivider) {
-        <val-divider [props]="{ fill: 'solid', size: 'medium', color: 'dark' }" />
-      }
-      <val-layout>
-        <ng-content select="[inner-container]"></ng-content>
-      </val-layout>
-    </ion-content>
-    <ng-content select="[outter-container]"></ng-content>
-  `, styles: [".description-container{padding:0 16px}\n"] }]
-        }], propDecorators: { props: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }], onScrollEvent: [{
-                type: Output
-            }] } });
+/**
+ * Configuracion por defecto para el sistema de skeletons.
+ */
+const DEFAULT_SKELETON_CONFIG = {
+    animated: true,
+    defaultDelay: 0,
+    defaultMinTime: 300,
+    defaultListTemplate: 'list',
+    defaultGridTemplate: 'grid-cards',
+};
 
 /**
- * val-page-template
- *
- * A page template component with title, expandable description,
- * content projection, and optional back navigation button.
+ * Servicio para gestionar templates de skeleton y estados de carga globales.
  *
  * @example
- * <val-page-template
- *   [props]="{
- *     pageTitle: 'Getting Started',
- *     pageDescription: 'Learn how to use our components...',
- *     showBackButton: true
- *   }"
- * >
- *   <div extra-description>
- *     <p>Additional info here</p>
- *   </div>
+ * // En un componente
+ * skeleton = inject(SkeletonService);
  *
- *   <!-- Main content -->
- *   <my-content></my-content>
+ * // Registrar template personalizado
+ * skeleton.registerTemplate('my-custom', MyCustomSkeletonComponent);
  *
- *   <div extra-footer>
- *     <p>Footer content</p>
- *   </div>
- * </val-page-template>
+ * // Obtener componente de template
+ * const component = skeleton.getTemplate('list');
  *
- * @input props - Page template configuration
- * @output onBack - Emits when back button is clicked
+ * // Gestionar estados de carga globales
+ * skeleton.setLoadingState('dashboard', true);
+ * const isDashboardLoading = skeleton.loadingState('dashboard');
  */
-class PageTemplateComponent {
+class SkeletonService {
     constructor() {
-        this.nav = inject(NavController);
-        /**
-         * Page template configuration.
-         */
-        this.props = {};
-        /**
-         * Emits when the back button is clicked.
-         */
-        this.onBack = new EventEmitter();
+        this._config = signal(DEFAULT_SKELETON_CONFIG);
+        this._templates = signal(new Map());
+        this._loadingStates = signal(new Map());
+        this._initialized = false;
+        /** Configuracion actual (solo lectura) */
+        this.config = this._config.asReadonly();
+        /** Templates registrados (solo lectura) */
+        this.templates = this._templates.asReadonly();
+        /** Estado de carga global (cualquier estado registrado esta cargando) */
+        this.isAnyLoading = computed(() => {
+            const states = this._loadingStates();
+            return Array.from(states.values()).some((v) => v);
+        });
+        /** Cantidad de templates registrados */
+        this.templateCount = computed(() => this._templates().size);
     }
     /**
-     * Handles back navigation.
+     * Configura el servicio de skeleton.
+     * Llamado por provideValtechSkeleton().
      */
-    handleBack() {
-        this.onBack.emit();
-        this.nav.back();
+    configure(config) {
+        if (this._initialized) {
+            console.warn('[SkeletonService] Service already configured. Ignoring reconfiguration.');
+            return;
+        }
+        this._config.set({ ...DEFAULT_SKELETON_CONFIG, ...config });
+        // Registrar templates personalizados de la configuracion
+        config.templates?.forEach((t) => {
+            this.registerTemplate(t.name, t.component, t.defaultConfig);
+        });
+        this._initialized = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PageTemplateComponent, isStandalone: true, selector: "val-page-template", inputs: { props: "props" }, outputs: { onBack: "onBack" }, ngImport: i0, template: `
-    @if (props.pageTitle) {
-      <ion-header [class.ion-no-border]="true">
-        <ion-toolbar style="--background: transparent;">
-          <ion-title class="page-title" size="large">{{ props.pageTitle }}</ion-title>
-        </ion-toolbar>
-      </ion-header>
+    /**
+     * Registra un template de skeleton personalizado.
+     *
+     * @param name Nombre unico del template
+     * @param component Componente a usar
+     * @param defaultConfig Configuracion por defecto opcional
+     */
+    registerTemplate(name, component, defaultConfig) {
+        this._templates.update((map) => {
+            const newMap = new Map(map);
+            newMap.set(name, { name, component, defaultConfig });
+            return newMap;
+        });
     }
-    <ion-grid>
-      <ion-row class="ion-justify-content-center description-row">
-        <ion-col size="12" size-md="10" size-lg="8">
-          @if (props.pageDescription) {
-            <div class="description-container">
-              <val-expandable-text
-                [props]="{
-                  limit: props.descriptionLimit || 180,
+    /**
+     * Obtiene un template de skeleton registrado.
+     *
+     * @param name Nombre del template
+     * @returns Template registrado o undefined si no existe
+     */
+    getTemplate(name) {
+        return this._templates().get(name);
+    }
+    /**
+     * Verifica si un template esta registrado.
+     *
+     * @param name Nombre del template
+     * @returns true si el template existe
+     */
+    hasTemplate(name) {
+        return this._templates().has(name);
+    }
+    /**
+     * Obtiene todos los nombres de templates registrados.
+     *
+     * @returns Array de nombres de templates
+     */
+    getTemplateNames() {
+        return Array.from(this._templates().keys());
+    }
+    /**
+     * Registra un estado de carga nombrado.
+     * Util para indicadores de carga globales.
+     *
+     * @param key Identificador unico del estado
+     * @param isLoading Estado de carga
+     */
+    setLoadingState(key, isLoading) {
+        this._loadingStates.update((map) => {
+            const newMap = new Map(map);
+            if (isLoading) {
+                newMap.set(key, true);
+            }
+            else {
+                newMap.delete(key);
+            }
+            return newMap;
+        });
+    }
+    /**
+     * Obtiene el estado de carga para una clave especifica.
+     *
+     * @param key Identificador del estado
+     * @returns Estado de carga actual
+     */
+    getLoadingState(key) {
+        return this._loadingStates().get(key) ?? false;
+    }
+    /**
+     * Crea un signal computado para un estado de carga especifico.
+     *
+     * @param key Identificador del estado
+     * @returns Signal reactivo del estado de carga
+     */
+    loadingState(key) {
+        return computed(() => this._loadingStates().get(key) ?? false);
+    }
+    /**
+     * Obtiene todas las claves de estados de carga activos.
+     *
+     * @returns Array de claves con estado de carga activo
+     */
+    getActiveLoadingKeys() {
+        const states = this._loadingStates();
+        return Array.from(states.entries())
+            .filter(([, isLoading]) => isLoading)
+            .map(([key]) => key);
+    }
+    /**
+     * Limpia todos los estados de carga.
+     */
+    clearLoadingStates() {
+        this._loadingStates.set(new Map());
+    }
+    /**
+     * Limpia un estado de carga especifico.
+     *
+     * @param key Identificador del estado a limpiar
+     */
+    clearLoadingState(key) {
+        this.setLoadingState(key, false);
+    }
+    /**
+     * Ejecuta una funcion async con tracking de estado de carga.
+     *
+     * @param key Identificador del estado
+     * @param fn Funcion async a ejecutar
+     * @returns Resultado de la funcion
+     */
+    async withLoading(key, fn) {
+        this.setLoadingState(key, true);
+        try {
+            return await fn();
+        }
+        finally {
+            this.setLoadingState(key, false);
+        }
+    }
+    /**
+     * Obtiene la configuracion de animacion por defecto.
+     */
+    get animated() {
+        return this._config().animated ?? true;
+    }
+    /**
+     * Obtiene el delay por defecto.
+     */
+    get defaultDelay() {
+        return this._config().defaultDelay ?? 0;
+    }
+    /**
+     * Obtiene el tiempo minimo por defecto.
+     */
+    get defaultMinTime() {
+        return this._config().defaultMinTime ?? 300;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SkeletonService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SkeletonService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SkeletonService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Componente wrapper para listas con infinite scroll.
+ *
+ * @example
+ * <!-- Uso basico con data source -->
+ * <val-infinite-list
+ *   [props]="{
+ *     dataSource: { loadFn: loadUsers, trackBy: trackByUserId },
+ *     itemTemplate: userTemplate,
+ *     pageSize: 20,
+ *     threshold: '150px'
+ *   }"
+ * ></val-infinite-list>
+ *
+ * <ng-template #userTemplate let-user let-index="index">
+ *   <val-card [props]="{ title: user.name, subtitle: user.email }">
+ *     <p>{{ user.bio }}</p>
+ *   </val-card>
+ * </ng-template>
+ *
+ * @example
+ * <!-- Con pull-to-refresh y estado vacio personalizado -->
+ * <val-infinite-list
+ *   [props]="{
+ *     dataSource: { loadFn: loadMessages },
+ *     itemTemplate: messageTemplate,
+ *     direction: 'both',
+ *     enableRefresh: true,
+ *     emptyState: {
+ *       icon: 'chatbubbles-outline',
+ *       title: 'Sin mensajes',
+ *       message: 'Inicia una conversacion'
+ *     },
+ *     skeleton: { template: 'list', count: 5 }
+ *   }"
+ *   (refresh)="onRefresh($event)"
+ * ></val-infinite-list>
+ */
+class InfiniteListComponent {
+    constructor() {
+        this.skeletonService = inject(SkeletonService);
+        this.cdr = inject(ChangeDetectorRef);
+        // === Events ===
+        this.loadMore = new EventEmitter();
+        this.refresh = new EventEmitter();
+        this.stateChange = new EventEmitter();
+        this.itemsChange = new EventEmitter();
+        this.errorOccurred = new EventEmitter();
+        // === Reactive State ===
+        this.items = signal([]);
+        this.state = signal('idle');
+        this.hasMoreBottom = signal(true);
+        this.hasMoreTop = signal(false);
+        this.error = signal(null);
+        this.isInitialLoad = signal(true);
+        this.currentPage = 0;
+        this.currentCursor = null;
+        /** Progreso de carga (0-1 si totalCount conocido) */
+        this.loadProgress = computed(() => {
+            if (!this.props?.dataSource?.totalCount)
+                return null;
+            return this.items().length / this.props.dataSource.totalCount;
+        });
+        /** Anuncio de estado para lectores de pantalla */
+        this.statusAnnouncement = computed(() => {
+            switch (this.state()) {
+                case 'loading':
+                    return 'Cargando items...';
+                case 'error':
+                    return `Error: ${this.error()?.message || 'Ocurrio un error'}`;
+                case 'complete':
+                    return 'Todos los items han sido cargados';
+                default:
+                    return '';
+            }
+        });
+    }
+    /** Props combinados con defaults */
+    get mergedProps() {
+        return { ...DEFAULT_INFINITE_LIST_METADATA, ...this.props };
+    }
+    /** Config del refresher */
+    get refresherConfig() {
+        return this.mergedProps.refreshConfig ?? {};
+    }
+    /** Componente de skeleton a usar */
+    get skeletonComponent() {
+        const templateName = this.mergedProps.skeleton?.template || 'list';
+        const template = this.skeletonService.getTemplate(templateName);
+        return template?.component ?? null;
+    }
+    /** Inputs para el skeleton */
+    get skeletonInputs() {
+        return {
+            config: {
+                count: this.mergedProps.skeleton?.count ?? 3,
+                animated: true,
+                ...this.mergedProps.skeleton?.config,
+            },
+        };
+    }
+    ngOnInit() {
+        // Cargar items iniciales del dataSource si existen
+        if (this.props.dataSource.items?.length) {
+            this.items.set([...this.props.dataSource.items]);
+            this.isInitialLoad.set(false);
+        }
+        // Auto-cargar si esta habilitado
+        if (this.mergedProps.autoLoad && !this.items().length) {
+            this.loadInitial();
+        }
+    }
+    ngOnDestroy() {
+        // Cleanup
+    }
+    /** Funcion de tracking para ngFor */
+    trackByFn(index, item) {
+        if (this.props.dataSource.trackBy) {
+            return this.props.dataSource.trackBy(index, item);
+        }
+        return index;
+    }
+    /** Si debe mostrar el scroll inferior */
+    shouldShowBottomScroll() {
+        const dir = this.mergedProps.direction;
+        return (dir === 'bottom' || dir === 'both') && this.items().length > 0;
+    }
+    /** Carga inicial de datos */
+    async loadInitial() {
+        if (!this.props.dataSource.loadFn)
+            return;
+        this.state.set('loading');
+        this.stateChange.emit('loading');
+        this.error.set(null);
+        try {
+            const params = {
+                direction: 'bottom',
+                page: 0,
+                pageSize: this.mergedProps.pageSize ?? 20,
+            };
+            const result = await this.executeLoad(params);
+            this.items.set(result.items);
+            this.hasMoreBottom.set(result.hasMore);
+            this.currentPage = 1;
+            this.currentCursor = result.cursor;
+            this.isInitialLoad.set(false);
+            this.state.set('idle');
+            this.stateChange.emit('idle');
+            this.itemsChange.emit(this.items());
+        }
+        catch (err) {
+            this.handleError(err);
+        }
+    }
+    /** Cargar mas items en la parte inferior */
+    async loadBottom() {
+        if (!this.hasMoreBottom() || this.state() === 'loading')
+            return;
+        if (!this.props.dataSource.loadFn)
+            return;
+        this.state.set('loading');
+        this.stateChange.emit('loading');
+        try {
+            const params = {
+                direction: 'bottom',
+                page: this.currentPage,
+                pageSize: this.mergedProps.pageSize ?? 20,
+                cursor: this.currentCursor,
+                lastItem: this.items()[this.items().length - 1],
+            };
+            const result = await this.executeLoad(params);
+            this.items.update((current) => [...current, ...result.items]);
+            this.hasMoreBottom.set(result.hasMore);
+            this.currentPage++;
+            this.currentCursor = result.cursor;
+            this.state.set(result.hasMore ? 'idle' : 'complete');
+            this.stateChange.emit(result.hasMore ? 'idle' : 'complete');
+            this.itemsChange.emit(this.items());
+        }
+        catch (err) {
+            this.handleError(err);
+        }
+    }
+    /** Cargar mas items en la parte superior */
+    async loadTop() {
+        if (!this.hasMoreTop() || this.state() === 'loading')
+            return;
+        if (!this.props.dataSource.loadFn)
+            return;
+        this.state.set('loading');
+        try {
+            const params = {
+                direction: 'top',
+                page: 0,
+                pageSize: this.mergedProps.pageSize ?? 20,
+                firstItem: this.items()[0],
+            };
+            const result = await this.executeLoad(params);
+            this.items.update((current) => [...result.items, ...current]);
+            this.hasMoreTop.set(result.hasMore);
+            this.state.set('idle');
+            this.itemsChange.emit(this.items());
+        }
+        catch (err) {
+            this.handleError(err);
+        }
+    }
+    /** Refresh - recargar desde cero */
+    async refreshList() {
+        this.currentPage = 0;
+        this.currentCursor = null;
+        this.hasMoreBottom.set(true);
+        this.items.set([]);
+        await this.loadInitial();
+    }
+    /** Reintentar despues de error */
+    async retry() {
+        this.error.set(null);
+        if (this.items().length === 0) {
+            await this.loadInitial();
+        }
+        else {
+            await this.loadBottom();
+        }
+    }
+    /** Reset completo */
+    async reset() {
+        this.items.set([]);
+        this.currentPage = 0;
+        this.currentCursor = null;
+        this.hasMoreBottom.set(true);
+        this.hasMoreTop.set(false);
+        this.error.set(null);
+        this.isInitialLoad.set(true);
+        this.state.set('idle');
+        if (this.mergedProps.autoLoad) {
+            await this.loadInitial();
+        }
+    }
+    /** Agregar items al inicio */
+    prependItems(newItems) {
+        this.items.update((current) => [...newItems, ...current]);
+        this.itemsChange.emit(this.items());
+    }
+    /** Agregar items al final */
+    appendItems(newItems) {
+        this.items.update((current) => [...current, ...newItems]);
+        this.itemsChange.emit(this.items());
+    }
+    /** Actualizar un item por indice */
+    updateItem(index, item) {
+        this.items.update((current) => {
+            const updated = [...current];
+            updated[index] = item;
+            return updated;
+        });
+        this.itemsChange.emit(this.items());
+    }
+    /** Remover un item por indice */
+    removeItem(index) {
+        this.items.update((current) => current.filter((_, i) => i !== index));
+        this.itemsChange.emit(this.items());
+    }
+    /** Handler para evento de infinite scroll */
+    async onInfiniteScroll(event) {
+        await this.loadBottom();
+        event.target.complete();
+    }
+    /** Handler para evento de refresh */
+    async onRefreshTriggered(event) {
+        this.refresh.emit(event);
+        await this.refreshList();
+        event.complete();
+    }
+    async executeLoad(params) {
+        const loadFn = this.props.dataSource.loadFn;
+        const result = loadFn(params);
+        if (isObservable(result)) {
+            return await firstValueFrom(result);
+        }
+        return await result;
+    }
+    handleError(err) {
+        this.error.set(err);
+        this.state.set('error');
+        this.stateChange.emit('error');
+        this.errorOccurred.emit(err);
+        console.error('[InfiniteList] Error loading items:', err);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InfiniteListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: InfiniteListComponent, isStandalone: true, selector: "val-infinite-list", inputs: { props: "props" }, outputs: { loadMore: "loadMore", refresh: "refresh", stateChange: "stateChange", itemsChange: "itemsChange", errorOccurred: "errorOccurred" }, viewQueries: [{ propertyName: "infiniteScroll", first: true, predicate: IonInfiniteScroll, descendants: true }], ngImport: i0, template: `
+    <!-- Pull to refresh wrapper -->
+    @if (mergedProps.enableRefresh) {
+      <val-refresher [props]="refresherConfig" (refresh)="onRefreshTriggered($event)">
+        <ng-container *ngTemplateOutlet="listContent"></ng-container>
+      </val-refresher>
+    } @else {
+      <ng-container *ngTemplateOutlet="listContent"></ng-container>
+    }
+
+    <!-- Main list content template -->
+    <ng-template #listContent>
+      <div
+        class="infinite-list-container"
+        [class]="mergedProps.cssClass"
+        [style.max-height]="mergedProps.maxHeight"
+        [style.overflow-y]="mergedProps.maxHeight ? 'auto' : 'visible'"
+        role="feed"
+        [attr.aria-busy]="state() === 'loading'"
+        [attr.aria-label]="mergedProps.ariaLabel"
+        [attr.aria-description]="mergedProps.ariaDescription"
+      >
+        <!-- Loading state (initial) -->
+        @if (state() === 'loading' && items().length === 0) {
+          <div class="infinite-list-skeleton">
+            @if (mergedProps.skeleton?.customTemplate) {
+              <ng-container *ngTemplateOutlet="mergedProps.skeleton.customTemplate"></ng-container>
+            } @else {
+              <ng-container *ngComponentOutlet="skeletonComponent; inputs: skeletonInputs"></ng-container>
+            }
+          </div>
+        }
+
+        <!-- Empty state -->
+        @if (state() === 'idle' && items().length === 0 && !isInitialLoad()) {
+          <div class="infinite-list-empty">
+            @if (mergedProps.emptyState?.template) {
+              <ng-container *ngTemplateOutlet="mergedProps.emptyState.template"></ng-container>
+            } @else {
+              @if (mergedProps.emptyState?.icon) {
+                <ion-icon [name]="mergedProps.emptyState.icon" size="large"></ion-icon>
+              }
+              @if (mergedProps.emptyState?.title) {
+                <h3>{{ mergedProps.emptyState.title }}</h3>
+              }
+              @if (mergedProps.emptyState?.message) {
+                <p>{{ mergedProps.emptyState.message }}</p>
+              }
+            }
+          </div>
+        }
+
+        <!-- Error state -->
+        @if (state() === 'error') {
+          <div class="infinite-list-error">
+            @if (mergedProps.errorState?.template) {
+              <ng-container
+                *ngTemplateOutlet="mergedProps.errorState.template; context: { error: error(), retry: retry.bind(this) }"
+              ></ng-container>
+            } @else {
+              @if (mergedProps.errorState?.icon) {
+                <ion-icon [name]="mergedProps.errorState.icon" color="danger" size="large"></ion-icon>
+              } @else {
+                <ion-icon name="alert-circle-outline" color="danger" size="large"></ion-icon>
+              }
+              <h3>{{ mergedProps.errorState?.title || 'Error' }}</h3>
+              <p>{{ mergedProps.errorState?.message || error()?.message || 'Ocurrio un error' }}</p>
+              @if (mergedProps.errorState?.showRetry !== false) {
+                <ion-button fill="outline" (click)="retry()">
+                  {{ mergedProps.errorState?.retryText || 'Reintentar' }}
+                </ion-button>
+              }
+            }
+          </div>
+        }
+
+        <!-- Items list -->
+        @if (items().length > 0) {
+          <div class="infinite-list-items" [class.with-dividers]="mergedProps.showDividers">
+            @for (item of items(); track trackByFn($index, item); let i = $index; let first = $first; let last = $last) {
+              <article
+                class="infinite-list-item"
+                [attr.aria-setsize]="mergedProps.dataSource.totalCount || null"
+                [attr.aria-posinset]="i + 1"
+              >
+                <ng-container
+                  *ngTemplateOutlet="
+                    mergedProps.itemTemplate;
+                    context: { $implicit: item, index: i, first: first, last: last, count: items().length }
+                  "
+                ></ng-container>
+              </article>
+            }
+          </div>
+        }
+
+        <!-- Bottom infinite scroll -->
+        @if (shouldShowBottomScroll()) {
+          @if (mergedProps.useLoadMoreButton) {
+            <div class="infinite-list-load-more">
+              @if (hasMoreBottom()) {
+                <ion-button
+                  fill="outline"
+                  [color]="mergedProps.color"
+                  [disabled]="state() === 'loading'"
+                  (click)="loadBottom()"
+                >
+                  @if (state() === 'loading') {
+                    <ion-spinner [name]="mergedProps.spinnerType" slot="start"></ion-spinner>
+                  }
+                  {{ mergedProps.loadMoreText || 'Cargar mas' }}
+                </ion-button>
+              } @else {
+                <ion-text color="medium">{{ mergedProps.noMoreText || 'No hay mas items' }}</ion-text>
+              }
+            </div>
+          } @else {
+            <ion-infinite-scroll
+              [threshold]="mergedProps.threshold"
+              [disabled]="!hasMoreBottom()"
+              (ionInfinite)="onInfiniteScroll($event)"
+            >
+              <ion-infinite-scroll-content
+                [loadingSpinner]="mergedProps.spinnerType"
+                [loadingText]="state() === 'loading' ? 'Cargando...' : ''"
+              ></ion-infinite-scroll-content>
+            </ion-infinite-scroll>
+          }
+        }
+
+        <!-- No more items indicator -->
+        @if (!hasMoreBottom() && items().length > 0 && !mergedProps.useLoadMoreButton) {
+          <div class="infinite-list-end">
+            <ion-text color="medium">{{ mergedProps.noMoreText || 'No hay mas items' }}</ion-text>
+          </div>
+        }
+      </div>
+    </ng-template>
+
+    <!-- Live region for accessibility announcements -->
+    <div class="sr-only" role="status" aria-live="polite" [attr.aria-atomic]="true">
+      {{ statusAnnouncement() }}
+    </div>
+  `, isInline: true, styles: [":host{display:block}.infinite-list-container{width:100%}.infinite-list-skeleton,.infinite-list-empty,.infinite-list-error{padding:24px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}.infinite-list-empty ion-icon,.infinite-list-error ion-icon{font-size:48px;opacity:.6}.infinite-list-empty h3,.infinite-list-error h3{margin:0;font-size:18px;font-weight:600}.infinite-list-empty p,.infinite-list-error p{margin:0;color:var(--ion-color-medium);font-size:14px}.infinite-list-items{&.with-dividers .infinite-list-item:not(:last-child){border-bottom:1px solid var(--ion-color-light-shade, #d7d8da)}}.infinite-list-load-more{display:flex;justify-content:center;padding:16px}.infinite-list-end{display:flex;justify-content:center;padding:16px;font-size:14px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { 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: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: RefresherComponent, selector: "val-refresher", inputs: ["props"], outputs: ["refresh", "pullProgressChange", "stateChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InfiniteListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-infinite-list', standalone: true, imports: [
+                        CommonModule,
+                        IonInfiniteScroll,
+                        IonInfiniteScrollContent,
+                        IonButton,
+                        IonSpinner,
+                        IonIcon,
+                        IonText,
+                        IonList,
+                        IonItem,
+                        RefresherComponent,
+                    ], template: `
+    <!-- Pull to refresh wrapper -->
+    @if (mergedProps.enableRefresh) {
+      <val-refresher [props]="refresherConfig" (refresh)="onRefreshTriggered($event)">
+        <ng-container *ngTemplateOutlet="listContent"></ng-container>
+      </val-refresher>
+    } @else {
+      <ng-container *ngTemplateOutlet="listContent"></ng-container>
+    }
+
+    <!-- Main list content template -->
+    <ng-template #listContent>
+      <div
+        class="infinite-list-container"
+        [class]="mergedProps.cssClass"
+        [style.max-height]="mergedProps.maxHeight"
+        [style.overflow-y]="mergedProps.maxHeight ? 'auto' : 'visible'"
+        role="feed"
+        [attr.aria-busy]="state() === 'loading'"
+        [attr.aria-label]="mergedProps.ariaLabel"
+        [attr.aria-description]="mergedProps.ariaDescription"
+      >
+        <!-- Loading state (initial) -->
+        @if (state() === 'loading' && items().length === 0) {
+          <div class="infinite-list-skeleton">
+            @if (mergedProps.skeleton?.customTemplate) {
+              <ng-container *ngTemplateOutlet="mergedProps.skeleton.customTemplate"></ng-container>
+            } @else {
+              <ng-container *ngComponentOutlet="skeletonComponent; inputs: skeletonInputs"></ng-container>
+            }
+          </div>
+        }
+
+        <!-- Empty state -->
+        @if (state() === 'idle' && items().length === 0 && !isInitialLoad()) {
+          <div class="infinite-list-empty">
+            @if (mergedProps.emptyState?.template) {
+              <ng-container *ngTemplateOutlet="mergedProps.emptyState.template"></ng-container>
+            } @else {
+              @if (mergedProps.emptyState?.icon) {
+                <ion-icon [name]="mergedProps.emptyState.icon" size="large"></ion-icon>
+              }
+              @if (mergedProps.emptyState?.title) {
+                <h3>{{ mergedProps.emptyState.title }}</h3>
+              }
+              @if (mergedProps.emptyState?.message) {
+                <p>{{ mergedProps.emptyState.message }}</p>
+              }
+            }
+          </div>
+        }
+
+        <!-- Error state -->
+        @if (state() === 'error') {
+          <div class="infinite-list-error">
+            @if (mergedProps.errorState?.template) {
+              <ng-container
+                *ngTemplateOutlet="mergedProps.errorState.template; context: { error: error(), retry: retry.bind(this) }"
+              ></ng-container>
+            } @else {
+              @if (mergedProps.errorState?.icon) {
+                <ion-icon [name]="mergedProps.errorState.icon" color="danger" size="large"></ion-icon>
+              } @else {
+                <ion-icon name="alert-circle-outline" color="danger" size="large"></ion-icon>
+              }
+              <h3>{{ mergedProps.errorState?.title || 'Error' }}</h3>
+              <p>{{ mergedProps.errorState?.message || error()?.message || 'Ocurrio un error' }}</p>
+              @if (mergedProps.errorState?.showRetry !== false) {
+                <ion-button fill="outline" (click)="retry()">
+                  {{ mergedProps.errorState?.retryText || 'Reintentar' }}
+                </ion-button>
+              }
+            }
+          </div>
+        }
+
+        <!-- Items list -->
+        @if (items().length > 0) {
+          <div class="infinite-list-items" [class.with-dividers]="mergedProps.showDividers">
+            @for (item of items(); track trackByFn($index, item); let i = $index; let first = $first; let last = $last) {
+              <article
+                class="infinite-list-item"
+                [attr.aria-setsize]="mergedProps.dataSource.totalCount || null"
+                [attr.aria-posinset]="i + 1"
+              >
+                <ng-container
+                  *ngTemplateOutlet="
+                    mergedProps.itemTemplate;
+                    context: { $implicit: item, index: i, first: first, last: last, count: items().length }
+                  "
+                ></ng-container>
+              </article>
+            }
+          </div>
+        }
+
+        <!-- Bottom infinite scroll -->
+        @if (shouldShowBottomScroll()) {
+          @if (mergedProps.useLoadMoreButton) {
+            <div class="infinite-list-load-more">
+              @if (hasMoreBottom()) {
+                <ion-button
+                  fill="outline"
+                  [color]="mergedProps.color"
+                  [disabled]="state() === 'loading'"
+                  (click)="loadBottom()"
+                >
+                  @if (state() === 'loading') {
+                    <ion-spinner [name]="mergedProps.spinnerType" slot="start"></ion-spinner>
+                  }
+                  {{ mergedProps.loadMoreText || 'Cargar mas' }}
+                </ion-button>
+              } @else {
+                <ion-text color="medium">{{ mergedProps.noMoreText || 'No hay mas items' }}</ion-text>
+              }
+            </div>
+          } @else {
+            <ion-infinite-scroll
+              [threshold]="mergedProps.threshold"
+              [disabled]="!hasMoreBottom()"
+              (ionInfinite)="onInfiniteScroll($event)"
+            >
+              <ion-infinite-scroll-content
+                [loadingSpinner]="mergedProps.spinnerType"
+                [loadingText]="state() === 'loading' ? 'Cargando...' : ''"
+              ></ion-infinite-scroll-content>
+            </ion-infinite-scroll>
+          }
+        }
+
+        <!-- No more items indicator -->
+        @if (!hasMoreBottom() && items().length > 0 && !mergedProps.useLoadMoreButton) {
+          <div class="infinite-list-end">
+            <ion-text color="medium">{{ mergedProps.noMoreText || 'No hay mas items' }}</ion-text>
+          </div>
+        }
+      </div>
+    </ng-template>
+
+    <!-- Live region for accessibility announcements -->
+    <div class="sr-only" role="status" aria-live="polite" [attr.aria-atomic]="true">
+      {{ statusAnnouncement() }}
+    </div>
+  `, styles: [":host{display:block}.infinite-list-container{width:100%}.infinite-list-skeleton,.infinite-list-empty,.infinite-list-error{padding:24px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}.infinite-list-empty ion-icon,.infinite-list-error ion-icon{font-size:48px;opacity:.6}.infinite-list-empty h3,.infinite-list-error h3{margin:0;font-size:18px;font-weight:600}.infinite-list-empty p,.infinite-list-error p{margin:0;color:var(--ion-color-medium);font-size:14px}.infinite-list-items{&.with-dividers .infinite-list-item:not(:last-child){border-bottom:1px solid var(--ion-color-light-shade, #d7d8da)}}.infinite-list-load-more{display:flex;justify-content:center;padding:16px}.infinite-list-end{display:flex;justify-content:center;padding:16px;font-size:14px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
+        }], propDecorators: { infiniteScroll: [{
+                type: ViewChild,
+                args: [IonInfiniteScroll]
+            }], props: [{
+                type: Input
+            }], loadMore: [{
+                type: Output
+            }], refresh: [{
+                type: Output
+            }], stateChange: [{
+                type: Output
+            }], itemsChange: [{
+                type: Output
+            }], errorOccurred: [{
+                type: Output
+            }] } });
+
+class LayoutComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: LayoutComponent, isStandalone: true, selector: "val-layout", ngImport: i0, template: `
+    <div class="layout-container">
+      <ng-content></ng-content>
+    </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)}.layout-container{margin:0 auto;padding:0;width:100%;box-sizing:border-box;margin-bottom:1rem;padding-top:.5rem}@media (max-width: 768px){.layout-container{max-width:100%}}@media (min-width: 768px){.layout-container{margin:0 auto;max-width:33.75rem;margin-bottom:1.5rem}}@media (min-width: 1200px){.layout-container{margin:0 auto;max-width:45rem}}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-layout', standalone: true, imports: [], template: `
+    <div class="layout-container">
+      <ng-content></ng-content>
+    </div>
+  `, 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)}.layout-container{margin:0 auto;padding:0;width:100%;box-sizing:border-box;margin-bottom:1rem;padding-top:.5rem}@media (max-width: 768px){.layout-container{max-width:100%}}@media (min-width: 768px){.layout-container{margin:0 auto;max-width:33.75rem;margin-bottom:1.5rem}}@media (min-width: 1200px){.layout-container{margin:0 auto;max-width:45rem}}\n"] }]
+        }] });
+
+class SimpleComponent {
+    constructor() {
+        this.onClick = new EventEmitter();
+        this.onScrollEvent = new EventEmitter();
+        this.theme = inject(ThemeService);
+    }
+    onClickHandler(token) {
+        this.onClick.emit(token);
+    }
+    onScrollHandler($event) {
+        this.onScrollEvent.emit(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SimpleComponent, isStandalone: true, selector: "val-simple", inputs: { props: "props" }, outputs: { onClick: "onClick", onScrollEvent: "onScrollEvent" }, ngImport: i0, template: `
+    <val-header [props]="props.header" />
+
+    <ion-content
+      [fullscreen]="true"
+      [ngStyle]="{
+        '--background': theme.IsDark ? 'var(--ion-background-color)' : props.background,
+      }"
+      [scrollEvents]="true"
+      (ionScroll)="onScrollHandler($event)"
+    >
+      <ion-header collapse="condense">
+        <ion-toolbar style="--background: transparent;">
+          <ion-title style="padding: 0;" size="large">{{ props.pageTitle }}</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      @if (props.pageDescription) {
+        <div class="description-container">
+          <val-expandable-text
+            [props]="{
+              limit: 180,
+              content: props.pageDescription,
+              color: 'primary',
+              expandText: 'más',
+            }"
+          />
+        </div>
+      }
+      @if (props.link) {
+        <val-link [props]="props.link" (onClick)="onClickHandler($event)"></val-link>
+      }
+      @if (props.withDivider) {
+        <val-divider [props]="{ fill: 'solid', size: 'medium', color: 'dark' }" />
+      }
+      <val-layout>
+        <ng-content select="[inner-container]"></ng-content>
+      </val-layout>
+    </ion-content>
+    <ng-content select="[outter-container]"></ng-content>
+  `, isInline: true, styles: [".description-container{padding:0 16px}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: HeaderComponent, selector: "val-header", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: LayoutComponent, selector: "val-layout" }, { kind: "component", type: DividerComponent, selector: "val-divider", inputs: ["props"] }, { kind: "component", type: LinkComponent, selector: "val-link", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ExpandableTextComponent, selector: "val-expandable-text", inputs: ["props"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SimpleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-simple', standalone: true, imports: [
+                        NgStyle,
+                        IonHeader,
+                        IonToolbar,
+                        IonTitle,
+                        IonContent,
+                        HeaderComponent,
+                        LayoutComponent,
+                        DividerComponent,
+                        LinkComponent,
+                        ExpandableTextComponent,
+                    ], template: `
+    <val-header [props]="props.header" />
+
+    <ion-content
+      [fullscreen]="true"
+      [ngStyle]="{
+        '--background': theme.IsDark ? 'var(--ion-background-color)' : props.background,
+      }"
+      [scrollEvents]="true"
+      (ionScroll)="onScrollHandler($event)"
+    >
+      <ion-header collapse="condense">
+        <ion-toolbar style="--background: transparent;">
+          <ion-title style="padding: 0;" size="large">{{ props.pageTitle }}</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      @if (props.pageDescription) {
+        <div class="description-container">
+          <val-expandable-text
+            [props]="{
+              limit: 180,
+              content: props.pageDescription,
+              color: 'primary',
+              expandText: 'más',
+            }"
+          />
+        </div>
+      }
+      @if (props.link) {
+        <val-link [props]="props.link" (onClick)="onClickHandler($event)"></val-link>
+      }
+      @if (props.withDivider) {
+        <val-divider [props]="{ fill: 'solid', size: 'medium', color: 'dark' }" />
+      }
+      <val-layout>
+        <ng-content select="[inner-container]"></ng-content>
+      </val-layout>
+    </ion-content>
+    <ng-content select="[outter-container]"></ng-content>
+  `, styles: [".description-container{padding:0 16px}\n"] }]
+        }], propDecorators: { props: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }], onScrollEvent: [{
+                type: Output
+            }] } });
+
+/**
+ * val-page-template
+ *
+ * A page template component with title, expandable description,
+ * content projection, and optional back navigation button.
+ *
+ * @example
+ * <val-page-template
+ *   [props]="{
+ *     pageTitle: 'Getting Started',
+ *     pageDescription: 'Learn how to use our components...',
+ *     showBackButton: true
+ *   }"
+ * >
+ *   <div extra-description>
+ *     <p>Additional info here</p>
+ *   </div>
+ *
+ *   <!-- Main content -->
+ *   <my-content></my-content>
+ *
+ *   <div extra-footer>
+ *     <p>Footer content</p>
+ *   </div>
+ * </val-page-template>
+ *
+ * @input props - Page template configuration
+ * @output onBack - Emits when back button is clicked
+ */
+class PageTemplateComponent {
+    constructor() {
+        this.nav = inject(NavController);
+        /**
+         * Page template configuration.
+         */
+        this.props = {};
+        /**
+         * Emits when the back button is clicked.
+         */
+        this.onBack = new EventEmitter();
+    }
+    /**
+     * Handles back navigation.
+     */
+    handleBack() {
+        this.onBack.emit();
+        this.nav.back();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PageTemplateComponent, isStandalone: true, selector: "val-page-template", inputs: { props: "props" }, outputs: { onBack: "onBack" }, ngImport: i0, template: `
+    @if (props.pageTitle) {
+      <ion-header [class.ion-no-border]="true">
+        <ion-toolbar style="--background: transparent;">
+          <ion-title class="page-title" size="large" style="--padding-start: 0; --padding-end: 0;">{{ props.pageTitle }}</ion-title>
+        </ion-toolbar>
+      </ion-header>
+    }
+    <ion-grid>
+      <ion-row class="ion-justify-content-center description-row">
+        <ion-col size="12" size-md="10" size-lg="8">
+          @if (props.pageDescription) {
+            <div class="description-container">
+              <val-expandable-text
+                [props]="{
+                  limit: props.descriptionLimit || 180,
                   content: props.pageDescription,
                   color: props.descriptionColor || 'dark',
                 }"
@@ -21104,7 +22197,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     @if (props.pageTitle) {
       <ion-header [class.ion-no-border]="true">
         <ion-toolbar style="--background: transparent;">
-          <ion-title class="page-title" size="large">{{ props.pageTitle }}</ion-title>
+          <ion-title class="page-title" size="large" style="--padding-start: 0; --padding-end: 0;">{{ props.pageTitle }}</ion-title>
         </ion-toolbar>
       </ion-header>
     }
@@ -27946,913 +29039,2337 @@ class AuthService {
         }
     }
     /**
-     * Elimina el dispositivo del backend y borra el token FCM.
+     * Elimina el dispositivo del backend y borra el token FCM.
+     */
+    async unregisterDevice() {
+        if (!this.config.enableDeviceRegistration || !this.messagingService) {
+            return;
+        }
+        try {
+            const token = this.messagingService.currentToken;
+            if (token) {
+                // Delete from backend (fire and forget)
+                this.http.request('DELETE', `${this.config.apiUrl}/v2/users/me/devices/by-token`, {
+                    body: { token }
+                }).pipe(catchError(() => of(null))).subscribe();
+                // Delete from FCM
+                await this.messagingService.deleteToken();
+                console.log('[ValtechAuth] Device unregistered');
+            }
+        }
+        catch {
+            // Ignorar errores en cleanup
+        }
+    }
+    /**
+     * Detecta información de la plataforma del dispositivo.
+     */
+    detectPlatformInfo() {
+        const ua = navigator.userAgent;
+        // Detectar navegador
+        let browser = 'Unknown';
+        if (ua.includes('Firefox')) {
+            browser = 'Firefox';
+        }
+        else if (ua.includes('Edg')) {
+            browser = 'Edge';
+        }
+        else if (ua.includes('Chrome')) {
+            browser = 'Chrome';
+        }
+        else if (ua.includes('Safari')) {
+            browser = 'Safari';
+        }
+        // Detectar OS
+        let os = 'Unknown';
+        if (ua.includes('Windows')) {
+            os = 'Windows';
+        }
+        else if (ua.includes('Mac OS')) {
+            os = 'macOS';
+        }
+        else if (ua.includes('Linux')) {
+            os = 'Linux';
+        }
+        else if (ua.includes('Android')) {
+            os = 'Android';
+        }
+        else if (ua.includes('iOS') || ua.includes('iPhone') || ua.includes('iPad')) {
+            os = 'iOS';
+        }
+        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: 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: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], 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: OAuthService }, { type: MessagingService, decorators: [{
+                    type: Optional
+                }] }, { type: I18nService, decorators: [{
+                    type: Optional
+                }] }] });
+
+/**
+ * Notifications Service
+ *
+ * Servicio para leer notificaciones desde Firestore.
+ * El backend escribe las notificaciones, el frontend solo las lee y actualiza estado.
+ *
+ * Se auto-inicializa cuando AuthService tiene un usuario autenticado.
+ * También puede inicializarse manualmente con `initialize(userId)`.
+ */
+/**
+ * Servicio para leer notificaciones desde Firestore.
+ *
+ * Se auto-inicializa cuando AuthService tiene un usuario autenticado.
+ * No requiere llamar a `initialize()` manualmente si AuthService está configurado.
+ *
+ * @example
+ * ```typescript
+ * // Con AuthService configurado: auto-inicialización
+ * // Solo inyectar y usar directamente
+ * private notifications = inject(NotificationsService);
+ *
+ * notifications$ = this.notifications.getAll();
+ * unreadCount$ = this.notifications.getUnreadCount();
+ *
+ * // Sin AuthService: inicialización manual
+ * this.notifications.initialize(userId);
+ * ```
+ */
+class NotificationsService {
+    constructor(injector, collectionFactory) {
+        this.injector = injector;
+        this.collectionFactory = collectionFactory;
+        this.collection = null;
+        this.currentUserId = null;
+        // Inyección opcional - AuthService puede no estar configurado
+        this.authService = null;
+        // Intentar obtener AuthService de forma lazy (puede no estar configurado)
+        this.setupAutoInitialization();
+    }
+    /**
+     * Configura auto-inicialización observando el estado de AuthService.
+     * Se ejecuta en el contexto del injector para poder usar effect().
+     */
+    setupAutoInitialization() {
+        // Obtener AuthService de forma lazy
+        try {
+            this.authService = this.injector.get(AuthService, null);
+        }
+        catch {
+            // AuthService no está configurado, no hay auto-inicialización
+            return;
+        }
+        if (!this.authService) {
+            return;
+        }
+        // Usar runInInjectionContext para poder crear el effect
+        runInInjectionContext(this.injector, () => {
+            effect(() => {
+                const user = this.authService.user();
+                if (user?.userId && this.currentUserId !== user.userId) {
+                    // Usuario autenticado: inicializar con su ID
+                    this.initialize(user.userId);
+                }
+                else if (!user && this.currentUserId) {
+                    // Logout: limpiar estado
+                    this.reset();
+                }
+            });
+        });
+    }
+    /**
+     * Inicializa el servicio para un usuario específico.
+     *
+     * NOTA: Se llama automáticamente si AuthService está configurado.
+     * Solo usar manualmente si AuthService no está disponible o se necesita
+     * un userId diferente al del usuario autenticado.
+     */
+    initialize(userId) {
+        if (!this.collectionFactory) {
+            console.warn('[Notifications] FirestoreCollectionFactory not available. Ensure provideValtechFirebase() is configured.');
+            return;
+        }
+        this.currentUserId = userId;
+        // Path relativo - FirestoreService agrega automáticamente apps/{appId}/
+        // NO agregar apps/ aquí para evitar doble prefijo
+        const basePath = `users/${userId}/notifications`;
+        this.collection = this.collectionFactory.create(basePath, { timestamps: true });
+        console.log('[Notifications] Initialized with path:', basePath);
+    }
+    /**
+     * Verifica si el servicio está inicializado.
+     */
+    get isReady() {
+        return this.collection !== null;
+    }
+    /**
+     * Obtiene el ID del usuario actual.
+     */
+    get userId() {
+        return this.currentUserId;
+    }
+    // ===========================================================================
+    // LECTURA
+    // ===========================================================================
+    /**
+     * Obtiene todas las notificaciones ordenadas por fecha descendente.
+     * Real-time: se actualiza automáticamente cuando cambian los datos.
+     */
+    getAll() {
+        if (!this.collection)
+            return of([]);
+        return this.collection.watchAll({
+            orderBy: [{ field: 'createdAt', direction: 'desc' }],
+        });
+    }
+    /**
+     * Obtiene solo notificaciones no leídas.
+     */
+    getUnread() {
+        return this.getAll().pipe(map$1(notifications => notifications.filter(n => !n.isRead)));
+    }
+    /**
+     * Cuenta notificaciones no leídas.
+     * Útil para badges en UI.
+     */
+    getUnreadCount() {
+        return this.getUnread().pipe(map$1(n => n.length));
+    }
+    /**
+     * Obtiene una notificación por ID.
+     */
+    async getById(notificationId) {
+        if (!this.collection)
+            return null;
+        return this.collection.getById(notificationId);
+    }
+    // ===========================================================================
+    // ACCIONES
+    // ===========================================================================
+    /**
+     * Marca una notificación como leída.
+     */
+    async markAsRead(notificationId) {
+        if (!this.collection)
+            return;
+        await this.collection.update(notificationId, { isRead: true });
+    }
+    /**
+     * Marca todas las notificaciones como leídas.
      */
-    async unregisterDevice() {
-        if (!this.config.enableDeviceRegistration || !this.messagingService) {
+    async markAllAsRead() {
+        if (!this.collection)
             return;
-        }
-        try {
-            const token = this.messagingService.currentToken;
-            if (token) {
-                // Delete from backend (fire and forget)
-                this.http.request('DELETE', `${this.config.apiUrl}/v2/users/me/devices/by-token`, {
-                    body: { token }
-                }).pipe(catchError(() => of(null))).subscribe();
-                // Delete from FCM
-                await this.messagingService.deleteToken();
-                console.log('[ValtechAuth] Device unregistered');
-            }
-        }
-        catch {
-            // Ignorar errores en cleanup
-        }
+        const unread = await this.collection.query({
+            where: [{ field: 'isRead', operator: '==', value: false }],
+        });
+        await Promise.all(unread.map(n => this.collection.update(n.id, { isRead: true })));
     }
     /**
-     * Detecta información de la plataforma del dispositivo.
+     * Elimina una notificación.
      */
-    detectPlatformInfo() {
-        const ua = navigator.userAgent;
-        // Detectar navegador
-        let browser = 'Unknown';
-        if (ua.includes('Firefox')) {
-            browser = 'Firefox';
-        }
-        else if (ua.includes('Edg')) {
-            browser = 'Edge';
-        }
-        else if (ua.includes('Chrome')) {
-            browser = 'Chrome';
-        }
-        else if (ua.includes('Safari')) {
-            browser = 'Safari';
-        }
-        // Detectar OS
-        let os = 'Unknown';
-        if (ua.includes('Windows')) {
-            os = 'Windows';
-        }
-        else if (ua.includes('Mac OS')) {
-            os = 'macOS';
-        }
-        else if (ua.includes('Linux')) {
-            os = 'Linux';
-        }
-        else if (ua.includes('Android')) {
-            os = 'Android';
-        }
-        else if (ua.includes('iOS') || ua.includes('iPhone') || ua.includes('iPad')) {
-            os = 'iOS';
-        }
-        return { platform: 'web', browser, os };
+    async delete(notificationId) {
+        if (!this.collection)
+            return;
+        await this.collection.delete(notificationId);
     }
-    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' }); }
+    /**
+     * Elimina todas las notificaciones del usuario.
+     */
+    async deleteAll() {
+        if (!this.collection)
+            return;
+        const all = await this.collection.getAll();
+        await Promise.all(all.map(n => this.collection.delete(n.id)));
+    }
+    /**
+     * Limpia el estado del servicio.
+     * Útil para logout.
+     */
+    reset() {
+        this.collection = null;
+        this.currentUserId = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationsService, deps: [{ token: i0.Injector }, { token: FirestoreCollectionFactory, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuthService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationsService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], 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: OAuthService }, { type: MessagingService, decorators: [{
-                    type: Optional
-                }] }, { type: I18nService, decorators: [{
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: FirestoreCollectionFactory, decorators: [{
                     type: Optional
                 }] }] });
 
 /**
- * Notifications Service
+ * Analytics Types
+ *
+ * Tipos e interfaces para el servicio de Firebase Analytics (GA4).
+ */
+
+/**
+ * Firebase Services
+ *
+ * Servicios reutilizables para integración con Firebase.
+ *
+ * @example
+ * ```typescript
+ * // En main.ts
+ * import { provideValtechFirebase } from 'valtech-components';
+ *
+ * bootstrapApplication(AppComponent, {
+ *   providers: [
+ *     provideValtechFirebase({
+ *       firebase: environment.firebase,
+ *       persistence: true,
+ *     }),
+ *   ],
+ * });
+ *
+ * // En componentes
+ * import { FirebaseService, FirestoreService } from 'valtech-components';
+ *
+ * @Component({...})
+ * export class MyComponent {
+ *   private firebase = inject(FirebaseService);
+ *   private firestore = inject(FirestoreService);
+ * }
+ * ```
+ */
+// Tipos
+
+/**
+ * Guard que verifica si el usuario está autenticado.
+ * Redirige a loginRoute si no está autenticado.
+ *
+ * @example
+ * ```typescript
+ * import { authGuard } from 'valtech-components';
+ *
+ * const routes: Routes = [
+ *   {
+ *     path: 'dashboard',
+ *     canActivate: [authGuard],
+ *     loadComponent: () => import('./dashboard.page'),
+ *   },
+ * ];
+ * ```
+ */
+const authGuard = () => {
+    const authService = inject(AuthService);
+    const router = inject(Router);
+    const config = inject(VALTECH_AUTH_CONFIG);
+    if (authService.isAuthenticated()) {
+        return true;
+    }
+    return router.createUrlTree([config.loginRoute]);
+};
+/**
+ * Guard que verifica si el usuario NO está autenticado.
+ * Redirige a homeRoute si ya está autenticado.
+ * Útil para páginas de login/registro.
+ *
+ * @example
+ * ```typescript
+ * import { guestGuard } from 'valtech-components';
+ *
+ * const routes: Routes = [
+ *   {
+ *     path: 'login',
+ *     canActivate: [guestGuard],
+ *     loadComponent: () => import('./login.page'),
+ *   },
+ * ];
+ * ```
+ */
+const guestGuard = () => {
+    const authService = inject(AuthService);
+    const router = inject(Router);
+    const config = inject(VALTECH_AUTH_CONFIG);
+    if (!authService.isAuthenticated()) {
+        return true;
+    }
+    return router.createUrlTree([config.homeRoute]);
+};
+/**
+ * Factory para crear guard de permisos.
+ * Verifica si el usuario tiene el permiso especificado.
+ *
+ * @param permissions - Permiso o lista de permisos requeridos (OR)
+ * @returns Guard function
+ *
+ * @example
+ * ```typescript
+ * import { authGuard, permissionGuard } from 'valtech-components';
+ *
+ * const routes: Routes = [
+ *   {
+ *     path: 'templates',
+ *     canActivate: [authGuard, permissionGuard('templates:read')],
+ *     loadComponent: () => import('./templates.page'),
+ *   },
+ *   {
+ *     path: 'admin',
+ *     canActivate: [authGuard, permissionGuard(['admin:*', 'super_admin'])],
+ *     loadComponent: () => import('./admin.page'),
+ *   },
+ * ];
+ * ```
+ */
+function permissionGuard(permissions) {
+    return () => {
+        const authService = inject(AuthService);
+        const router = inject(Router);
+        const config = inject(VALTECH_AUTH_CONFIG);
+        const permArray = Array.isArray(permissions) ? permissions : [permissions];
+        if (authService.hasAnyPermission(permArray)) {
+            return true;
+        }
+        console.warn(`[ValtechAuth] Permiso denegado. Requerido: ${permArray.join(' o ')}`);
+        return router.createUrlTree([config.unauthorizedRoute]);
+    };
+}
+/**
+ * Guard que lee permisos desde route.data.
+ * Permite configurar permisos directamente en la definición de rutas.
+ *
+ * @example
+ * ```typescript
+ * import { authGuard, permissionGuardFromRoute } from 'valtech-components';
+ *
+ * const routes: Routes = [
+ *   {
+ *     path: 'admin/users',
+ *     canActivate: [authGuard, permissionGuardFromRoute],
+ *     data: {
+ *       permissions: ['users:read', 'users:manage'],
+ *       requireAll: false  // true = AND, false = OR (default)
+ *     },
+ *     loadComponent: () => import('./users.page'),
+ *   },
+ * ];
+ * ```
+ */
+const permissionGuardFromRoute = (route) => {
+    const authService = inject(AuthService);
+    const router = inject(Router);
+    const config = inject(VALTECH_AUTH_CONFIG);
+    const permissions = route.data['permissions'];
+    const requireAll = route.data['requireAll'];
+    if (!permissions || permissions.length === 0) {
+        return true;
+    }
+    const hasAccess = requireAll
+        ? authService.hasAllPermissions(permissions)
+        : authService.hasAnyPermission(permissions);
+    if (hasAccess) {
+        return true;
+    }
+    console.warn(`[ValtechAuth] Permiso denegado. Requerido: ${permissions.join(requireAll ? ' y ' : ' o ')}`);
+    return router.createUrlTree([config.unauthorizedRoute]);
+};
+/**
+ * Guard que verifica si el usuario es super admin.
  *
- * Servicio para leer notificaciones desde Firestore.
- * El backend escribe las notificaciones, el frontend solo las lee y actualiza estado.
+ * @example
+ * ```typescript
+ * import { authGuard, superAdminGuard } from 'valtech-components';
  *
- * Se auto-inicializa cuando AuthService tiene un usuario autenticado.
- * También puede inicializarse manualmente con `initialize(userId)`.
+ * const routes: Routes = [
+ *   {
+ *     path: 'super-admin',
+ *     canActivate: [authGuard, superAdminGuard],
+ *     loadComponent: () => import('./super-admin.page'),
+ *   },
+ * ];
+ * ```
  */
+const superAdminGuard = () => {
+    const authService = inject(AuthService);
+    const router = inject(Router);
+    const config = inject(VALTECH_AUTH_CONFIG);
+    if (authService.isSuperAdmin()) {
+        return true;
+    }
+    console.warn('[ValtechAuth] Acceso de super admin requerido');
+    return router.createUrlTree([config.unauthorizedRoute]);
+};
 /**
- * Servicio para leer notificaciones desde Firestore.
+ * Guard que verifica si el usuario tiene un rol específico.
  *
- * Se auto-inicializa cuando AuthService tiene un usuario autenticado.
- * No requiere llamar a `initialize()` manualmente si AuthService está configurado.
+ * @param roles - Rol o lista de roles requeridos (OR)
+ * @returns Guard function
  *
  * @example
  * ```typescript
- * // Con AuthService configurado: auto-inicialización
- * // Solo inyectar y usar directamente
- * private notifications = inject(NotificationsService);
+ * import { authGuard, roleGuard } from 'valtech-components';
  *
- * notifications$ = this.notifications.getAll();
- * unreadCount$ = this.notifications.getUnreadCount();
+ * const routes: Routes = [
+ *   {
+ *     path: 'editor',
+ *     canActivate: [authGuard, roleGuard(['editor', 'admin'])],
+ *     loadComponent: () => import('./editor.page'),
+ *   },
+ * ];
+ * ```
+ */
+function roleGuard(roles) {
+    return () => {
+        const authService = inject(AuthService);
+        const router = inject(Router);
+        const config = inject(VALTECH_AUTH_CONFIG);
+        const roleArray = Array.isArray(roles) ? roles : [roles];
+        const hasRole = roleArray.some((role) => authService.hasRole(role));
+        if (hasRole) {
+            return true;
+        }
+        console.warn(`[ValtechAuth] Rol requerido: ${roleArray.join(' o ')}`);
+        return router.createUrlTree([config.unauthorizedRoute]);
+    };
+}
+
+/**
+ * Servicio para gestión de dispositivos del usuario.
+ * Permite listar, aprobar, bloquear y eliminar dispositivos registrados.
  *
- * // Sin AuthService: inicialización manual
- * this.notifications.initialize(userId);
+ * @example
+ * ```typescript
+ * import { DeviceService } from 'valtech-components';
+ *
+ * @Component({...})
+ * export class DevicesPage {
+ *   private deviceService = inject(DeviceService);
+ *
+ *   devices = signal<DeviceInfo[]>([]);
+ *
+ *   async ngOnInit() {
+ *     const devices = await firstValueFrom(this.deviceService.listDevices());
+ *     this.devices.set(devices);
+ *   }
+ *
+ *   async blockDevice(deviceId: string) {
+ *     await firstValueFrom(this.deviceService.blockDevice(deviceId));
+ *     // Recargar lista
+ *   }
+ * }
  * ```
  */
-class NotificationsService {
-    constructor(injector, collectionFactory) {
-        this.injector = injector;
-        this.collectionFactory = collectionFactory;
-        this.collection = null;
-        this.currentUserId = null;
-        // Inyección opcional - AuthService puede no estar configurado
-        this.authService = null;
-        // Intentar obtener AuthService de forma lazy (puede no estar configurado)
-        this.setupAutoInitialization();
+class DeviceService {
+    constructor(config, http) {
+        this.config = config;
+        this.http = http;
+    }
+    get baseUrl() {
+        return `${this.config.apiUrl}/v2/users/me/devices`;
     }
     /**
-     * Configura auto-inicialización observando el estado de AuthService.
-     * Se ejecuta en el contexto del injector para poder usar effect().
+     * Lista todos los dispositivos registrados del usuario.
      */
-    setupAutoInitialization() {
-        // Obtener AuthService de forma lazy
-        try {
-            this.authService = this.injector.get(AuthService, null);
-        }
-        catch {
-            // AuthService no está configurado, no hay auto-inicialización
-            return;
-        }
-        if (!this.authService) {
-            return;
-        }
-        // Usar runInInjectionContext para poder crear el effect
-        runInInjectionContext(this.injector, () => {
-            effect(() => {
-                const user = this.authService.user();
-                if (user?.userId && this.currentUserId !== user.userId) {
-                    // Usuario autenticado: inicializar con su ID
-                    this.initialize(user.userId);
-                }
-                else if (!user && this.currentUserId) {
-                    // Logout: limpiar estado
-                    this.reset();
-                }
-            });
-        });
+    listDevices() {
+        return this.http.get(this.baseUrl).pipe(map$1(response => response.devices));
     }
     /**
-     * Inicializa el servicio para un usuario específico.
+     * Obtiene información de un dispositivo específico.
+     */
+    getDevice(deviceId) {
+        return this.http.get(`${this.baseUrl}/${deviceId}`).pipe(map$1(response => response.device));
+    }
+    /**
+     * Bloquea un dispositivo.
+     * Revoca todas las sesiones activas de ese dispositivo.
+     */
+    blockDevice(deviceId) {
+        return this.http.post(`${this.baseUrl}/${deviceId}/block`, {});
+    }
+    /**
+     * Aprueba un dispositivo pendiente.
+     * Cambia el estado de pending_approval a active.
+     */
+    approveDevice(deviceId) {
+        return this.http.post(`${this.baseUrl}/${deviceId}/approve`, {});
+    }
+    /**
+     * Elimina un dispositivo registrado.
+     */
+    deleteDevice(deviceId) {
+        return this.http.delete(`${this.baseUrl}/${deviceId}`);
+    }
+    /**
+     * Valida un token de acción SIN ejecutarlo.
+     * Útil para mostrar confirmación al usuario antes de ejecutar.
+     * Este endpoint NO requiere autenticación.
      *
-     * NOTA: Se llama automáticamente si AuthService está configurado.
-     * Solo usar manualmente si AuthService no está disponible o se necesita
-     * un userId diferente al del usuario autenticado.
+     * @param token Token JWT de acción
+     * @returns Información del token si es válido
+     *
+     * @example
+     * ```typescript
+     * const token = this.route.snapshot.queryParams['token'];
+     * if (token) {
+     *   const validation = await firstValueFrom(this.deviceService.validateAction(token));
+     *   if (validation.valid) {
+     *     // Mostrar confirmación al usuario
+     *     console.log(`Acción: ${validation.actionType}`);
+     *   }
+     * }
+     * ```
      */
-    initialize(userId) {
-        if (!this.collectionFactory) {
-            console.warn('[Notifications] FirestoreCollectionFactory not available. Ensure provideValtechFirebase() is configured.');
-            return;
-        }
-        this.currentUserId = userId;
-        // Path relativo - FirestoreService agrega automáticamente apps/{appId}/
-        // NO agregar apps/ aquí para evitar doble prefijo
-        const basePath = `users/${userId}/notifications`;
-        this.collection = this.collectionFactory.create(basePath, { timestamps: true });
-        console.log('[Notifications] Initialized with path:', basePath);
+    validateAction(token) {
+        return this.http.post(`${this.config.apiUrl}/v2/actions/validate`, { token });
+    }
+    /**
+     * Ejecuta una acción de dispositivo desde un token de email.
+     * Este endpoint NO requiere autenticación.
+     * El token viene en la URL del email de alerta de nuevo inicio de sesión.
+     *
+     * @param token Token JWT de acción (24h, un solo uso)
+     *
+     * @example
+     * ```typescript
+     * // En la página de dispositivos, al detectar ?token=xxx en la URL:
+     * const token = this.route.snapshot.queryParams['token'];
+     * if (token) {
+     *   const result = await firstValueFrom(this.deviceService.executeAction(token));
+     *   if (result.success) {
+     *     console.log(`Dispositivo bloqueado, ${result.sessionsRevoked} sesiones cerradas`);
+     *   }
+     * }
+     * ```
+     */
+    executeAction(token) {
+        // Usa el endpoint unificado de acciones
+        return this.http.post(`${this.config.apiUrl}/v2/actions/execute`, { token }).pipe(map$1(response => ({
+            operationId: response.operationId,
+            success: response.success,
+            message: response.message,
+            action: response.data?.['action'] || 'refuse',
+            deviceId: response.data?.['deviceId'] || '',
+            sessionsRevoked: response.data?.['sessionsRevoked'],
+        })));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DeviceService, deps: [{ token: VALTECH_AUTH_CONFIG }, { token: i1$8.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DeviceService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DeviceService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [VALTECH_AUTH_CONFIG]
+                }] }, { type: i1$8.HttpClient }] });
+
+/**
+ * Servicio para gestión de sesiones activas del usuario.
+ * Permite listar y revocar sesiones.
+ *
+ * @example
+ * ```typescript
+ * import { SessionService } from 'valtech-components';
+ *
+ * @Component({...})
+ * export class SessionsPage {
+ *   private sessionService = inject(SessionService);
+ *
+ *   sessions = signal<SessionInfo[]>([]);
+ *
+ *   async ngOnInit() {
+ *     const sessions = await firstValueFrom(this.sessionService.listSessions());
+ *     this.sessions.set(sessions);
+ *   }
+ *
+ *   async revokeSession(sessionId: string) {
+ *     await firstValueFrom(this.sessionService.revokeSession(sessionId));
+ *     // Recargar lista
+ *   }
+ *
+ *   async revokeAllOthers() {
+ *     const result = await firstValueFrom(this.sessionService.revokeAllSessions());
+ *     console.log(`${result.sessionsRevoked} sesiones cerradas`);
+ *   }
+ * }
+ * ```
+ */
+class SessionService {
+    constructor(config, http) {
+        this.config = config;
+        this.http = http;
     }
-    /**
-     * Verifica si el servicio está inicializado.
-     */
-    get isReady() {
-        return this.collection !== null;
+    get baseUrl() {
+        return `${this.config.apiUrl}/v2/users/me/sessions`;
     }
     /**
-     * Obtiene el ID del usuario actual.
+     * Lista todas las sesiones activas del usuario.
+     * La sesión actual está marcada con isCurrent=true.
      */
-    get userId() {
-        return this.currentUserId;
+    listSessions() {
+        return this.http.get(this.baseUrl).pipe(map$1(response => response.sessions));
     }
-    // ===========================================================================
-    // LECTURA
-    // ===========================================================================
     /**
-     * Obtiene todas las notificaciones ordenadas por fecha descendente.
-     * Real-time: se actualiza automáticamente cuando cambian los datos.
+     * Revoca una sesión específica.
+     * Fuerza el cierre de sesión en ese dispositivo/navegador.
      */
-    getAll() {
-        if (!this.collection)
-            return of([]);
-        return this.collection.watchAll({
-            orderBy: [{ field: 'createdAt', direction: 'desc' }],
-        });
+    revokeSession(sessionId) {
+        return this.http.delete(`${this.baseUrl}/${sessionId}`);
     }
     /**
-     * Obtiene solo notificaciones no leídas.
+     * Revoca todas las sesiones excepto la actual.
+     * Útil para "cerrar sesión en todos los dispositivos".
+     *
+     * @returns Número de sesiones revocadas
      */
-    getUnread() {
-        return this.getAll().pipe(map$1(notifications => notifications.filter(n => !n.isRead)));
+    revokeAllSessions() {
+        return this.http.delete(this.baseUrl);
     }
-    /**
-     * Cuenta notificaciones no leídas.
-     * Útil para badges en UI.
-     */
-    getUnreadCount() {
-        return this.getUnread().pipe(map$1(n => n.length));
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SessionService, deps: [{ token: VALTECH_AUTH_CONFIG }, { token: i1$8.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SessionService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SessionService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    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...';
     }
-    /**
-     * Obtiene una notificación por ID.
-     */
-    async getById(notificationId) {
-        if (!this.collection)
-            return null;
-        return this.collection.getById(notificationId);
+    ngOnInit() {
+        this.processCallback();
     }
-    // ===========================================================================
-    // ACCIONES
-    // ===========================================================================
-    /**
-     * Marca una notificación como leída.
-     */
-    async markAsRead(notificationId) {
-        if (!this.collection)
+    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;
-        await this.collection.update(notificationId, { isRead: true });
-    }
-    /**
-     * Marca todas las notificaciones como leídas.
-     */
-    async markAllAsRead() {
-        if (!this.collection)
+        }
+        // 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;
-        const unread = await this.collection.query({
-            where: [{ field: 'isRead', operator: '==', value: false }],
+        }
+        // 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,
         });
-        await Promise.all(unread.map(n => this.collection.update(n.id, { isRead: true })));
-    }
-    /**
-     * Elimina una notificación.
-     */
-    async delete(notificationId) {
-        if (!this.collection)
-            return;
-        await this.collection.delete(notificationId);
+        this.message = 'Autenticación exitosa';
+        this.closeAfterDelay();
     }
-    /**
-     * Elimina todas las notificaciones del usuario.
-     */
-    async deleteAll() {
-        if (!this.collection)
-            return;
-        const all = await this.collection.getAll();
-        await Promise.all(all.map(n => this.collection.delete(n.id)));
+    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);
+        }
     }
-    /**
-     * Limpia el estado del servicio.
-     * Útil para logout.
-     */
-    reset() {
-        this.collection = null;
-        this.currentUserId = null;
+    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: NotificationsService, deps: [{ token: i0.Injector }, { token: FirestoreCollectionFactory, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationsService, providedIn: 'root' }); }
+    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: NotificationsService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: FirestoreCollectionFactory, decorators: [{
-                    type: Optional
-                }] }] });
-
-/**
- * Analytics Types
- *
- * Tipos e interfaces para el servicio de Firebase Analytics (GA4).
- */
+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"] }]
+        }] });
 
 /**
- * Firebase Services
+ * Valtech Auth Service
  *
- * Servicios reutilizables para integración con Firebase.
+ * Servicio de autenticación reutilizable para aplicaciones Angular.
+ * Proporciona autenticación con AuthV2, MFA, sincronización entre pestañas,
+ * refresh proactivo de tokens, y registro automático de dispositivos para
+ * push notifications.
  *
  * @example
  * ```typescript
  * // En main.ts
- * import { provideValtechFirebase } from 'valtech-components';
+ * import { bootstrapApplication } from '@angular/platform-browser';
+ * import { provideValtechAuth, provideValtechFirebase } from 'valtech-components';
+ * import { environment } from './environments/environment';
  *
  * bootstrapApplication(AppComponent, {
  *   providers: [
- *     provideValtechFirebase({
- *       firebase: environment.firebase,
- *       persistence: true,
+ *     provideValtechFirebase(environment.firebase),
+ *     provideValtechAuth({
+ *       apiUrl: environment.apiUrl,
+ *       enableFirebaseIntegration: true,
+ *       enableDeviceRegistration: true, // Auto-registra dispositivos para push
  *     }),
  *   ],
  * });
  *
+ * // En app.routes.ts
+ * import { authGuard, guestGuard, permissionGuard } from 'valtech-components';
+ *
+ * const routes: Routes = [
+ *   { path: 'login', canActivate: [guestGuard], loadComponent: () => import('./login.page') },
+ *   { path: 'dashboard', canActivate: [authGuard], loadComponent: () => import('./dashboard.page') },
+ *   { path: 'admin', canActivate: [authGuard, permissionGuard('admin:*')], loadComponent: () => import('./admin.page') },
+ * ];
+ *
  * // En componentes
- * import { FirebaseService, FirestoreService } from 'valtech-components';
+ * import { AuthService } from 'valtech-components';
  *
  * @Component({...})
- * export class MyComponent {
- *   private firebase = inject(FirebaseService);
- *   private firestore = inject(FirestoreService);
- * }
- * ```
- */
-// Tipos
-
-/**
- * Guard que verifica si el usuario está autenticado.
- * Redirige a loginRoute si no está autenticado.
+ * export class LoginComponent {
+ *   private auth = inject(AuthService);
  *
- * @example
- * ```typescript
- * import { authGuard } from 'valtech-components';
+ *   async login() {
+ *     await firstValueFrom(this.auth.signin({ email, password }));
+ *     if (this.auth.mfaPending().required) {
+ *       // Mostrar UI de MFA
+ *     } else {
+ *       this.router.navigate(['/dashboard']);
+ *     }
+ *   }
  *
- * const routes: Routes = [
- *   {
- *     path: 'dashboard',
- *     canActivate: [authGuard],
- *     loadComponent: () => import('./dashboard.page'),
- *   },
- * ];
- * ```
- */
-const authGuard = () => {
-    const authService = inject(AuthService);
-    const router = inject(Router);
-    const config = inject(VALTECH_AUTH_CONFIG);
-    if (authService.isAuthenticated()) {
-        return true;
-    }
-    return router.createUrlTree([config.loginRoute]);
-};
-/**
- * Guard que verifica si el usuario NO está autenticado.
- * Redirige a homeRoute si ya está autenticado.
- * Útil para páginas de login/registro.
+ *   // Habilitar notificaciones push (solicita permisos + registra dispositivo)
+ *   async enableNotifications() {
+ *     const result = await this.auth.enableNotifications();
+ *     if (result.granted) {
+ *       console.log('Notificaciones habilitadas');
+ *     }
+ *   }
  *
- * @example
- * ```typescript
- * import { guestGuard } from 'valtech-components';
+ *   // Verificar estado de permisos
+ *   get canReceiveNotifications(): boolean {
+ *     return this.auth.getNotificationPermissionState() === 'granted';
+ *   }
  *
- * const routes: Routes = [
- *   {
- *     path: 'login',
- *     canActivate: [guestGuard],
- *     loadComponent: () => import('./login.page'),
- *   },
- * ];
+ *   // En template: usar signals directamente
+ *   // {{ auth.user()?.email }}
+ *   // @if (auth.hasPermission('templates:edit')) { ... }
+ * }
  * ```
  */
-const guestGuard = () => {
-    const authService = inject(AuthService);
-    const router = inject(Router);
-    const config = inject(VALTECH_AUTH_CONFIG);
-    if (!authService.isAuthenticated()) {
-        return true;
-    }
-    return router.createUrlTree([config.homeRoute]);
-};
+// Tipos
+
 /**
- * Factory para crear guard de permisos.
- * Verifica si el usuario tiene el permiso especificado.
+ * Directiva estructural simplificada para estados de carga.
  *
- * @param permissions - Permiso o lista de permisos requeridos (OR)
- * @returns Guard function
+ * Soporta multiples fuentes de estado de carga:
+ * - Angular Signal<boolean>
+ * - RxJS Observable<boolean>
+ * - Promise<any> (cargando hasta que se resuelve)
+ * - boolean literal
  *
  * @example
- * ```typescript
- * import { authGuard, permissionGuard } from 'valtech-components';
- *
- * const routes: Routes = [
- *   {
- *     path: 'templates',
- *     canActivate: [authGuard, permissionGuard('templates:read')],
- *     loadComponent: () => import('./templates.page'),
- *   },
- *   {
- *     path: 'admin',
- *     canActivate: [authGuard, permissionGuard(['admin:*', 'super_admin'])],
- *     loadComponent: () => import('./admin.page'),
- *   },
- * ];
- * ```
- */
-function permissionGuard(permissions) {
-    return () => {
-        const authService = inject(AuthService);
-        const router = inject(Router);
-        const config = inject(VALTECH_AUTH_CONFIG);
-        const permArray = Array.isArray(permissions) ? permissions : [permissions];
-        if (authService.hasAnyPermission(permArray)) {
-            return true;
-        }
-        console.warn(`[ValtechAuth] Permiso denegado. Requerido: ${permArray.join(' o ')}`);
-        return router.createUrlTree([config.unauthorizedRoute]);
-    };
-}
-/**
- * Guard que lee permisos desde route.data.
- * Permite configurar permisos directamente en la definición de rutas.
+ * <!-- Uso simple con signal -->
+ * <ng-container *valLoading="isLoading(); skeleton: 'list'">
+ *   <app-list [items]="items()"></app-list>
+ * </ng-container>
  *
  * @example
- * ```typescript
- * import { authGuard, permissionGuardFromRoute } from 'valtech-components';
+ * <!-- Con configuracion -->
+ * <ng-container *valLoading="loading$; skeleton: 'grid-cards'; count: 8">
+ *   <app-grid [data]="data"></app-grid>
+ * </ng-container>
  *
- * const routes: Routes = [
- *   {
- *     path: 'admin/users',
- *     canActivate: [authGuard, permissionGuardFromRoute],
- *     data: {
- *       permissions: ['users:read', 'users:manage'],
- *       requireAll: false  // true = AND, false = OR (default)
- *     },
- *     loadComponent: () => import('./users.page'),
- *   },
- * ];
- * ```
+ * @example
+ * <!-- Con template personalizado -->
+ * <ng-container *valLoading="isLoading(); skeletonTpl: customSkeleton">
+ *   <app-content></app-content>
+ * </ng-container>
+ * <ng-template #customSkeleton>
+ *   <val-skeleton [props]="{ type: 'card' }"></val-skeleton>
+ * </ng-template>
  */
-const permissionGuardFromRoute = (route) => {
-    const authService = inject(AuthService);
-    const router = inject(Router);
-    const config = inject(VALTECH_AUTH_CONFIG);
-    const permissions = route.data['permissions'];
-    const requireAll = route.data['requireAll'];
-    if (!permissions || permissions.length === 0) {
-        return true;
+class LoadingDirective {
+    constructor() {
+        this.templateRef = inject((TemplateRef));
+        this.viewContainer = inject(ViewContainerRef);
+        this.skeletonService = inject(SkeletonService);
+        this.destroyRef = inject(DestroyRef);
+        this._loading = signal(false);
+        this.hasContentView = false;
+        this.skeletonComponentRef = null;
+        /** Template de skeleton a usar */
+        this.skeleton = 'list';
+        /** Template personalizado para skeleton */
+        this.skeletonTpl = null;
+        /** Cantidad de items skeleton */
+        this.count = 3;
+        /** Animacion habilitada */
+        this.animated = true;
+        /** Mostrar spinner en lugar de skeleton */
+        this.spinner = false;
+        effect(() => {
+            const isLoading = this._loading();
+            this.updateView(isLoading);
+        });
     }
-    const hasAccess = requireAll
-        ? authService.hasAllPermissions(permissions)
-        : authService.hasAnyPermission(permissions);
-    if (hasAccess) {
-        return true;
+    /**
+     * Input principal - puede ser boolean, Signal, Observable o Promise.
+     */
+    set loading(source) {
+        this.resolveLoadingSource(source);
     }
-    console.warn(`[ValtechAuth] Permiso denegado. Requerido: ${permissions.join(requireAll ? ' y ' : ' o ')}`);
-    return router.createUrlTree([config.unauthorizedRoute]);
-};
-/**
- * Guard que verifica si el usuario es super admin.
- *
- * @example
- * ```typescript
- * import { authGuard, superAdminGuard } from 'valtech-components';
- *
- * const routes: Routes = [
- *   {
- *     path: 'super-admin',
- *     canActivate: [authGuard, superAdminGuard],
- *     loadComponent: () => import('./super-admin.page'),
- *   },
- * ];
- * ```
- */
-const superAdminGuard = () => {
-    const authService = inject(AuthService);
-    const router = inject(Router);
-    const config = inject(VALTECH_AUTH_CONFIG);
-    if (authService.isSuperAdmin()) {
-        return true;
+    ngOnDestroy() {
+        this.viewContainer.clear();
+        this.skeletonComponentRef = null;
     }
-    console.warn('[ValtechAuth] Acceso de super admin requerido');
-    return router.createUrlTree([config.unauthorizedRoute]);
-};
+    resolveLoadingSource(source) {
+        if (typeof source === 'boolean') {
+            this._loading.set(source);
+        }
+        else if (isSignal(source)) {
+            // Sincronizar signal con effect
+            effect(() => {
+                this._loading.set(source());
+            }, { injector: this.viewContainer.injector });
+        }
+        else if (isObservable(source)) {
+            // Convertir observable a signal
+            const signalValue = toSignal(source, {
+                initialValue: true,
+                injector: this.viewContainer.injector,
+            });
+            effect(() => {
+                this._loading.set(signalValue());
+            }, { injector: this.viewContainer.injector });
+        }
+        else if (source instanceof Promise) {
+            this._loading.set(true);
+            source.finally(() => this._loading.set(false));
+        }
+    }
+    updateView(isLoading) {
+        if (isLoading) {
+            this.showSkeleton();
+        }
+        else {
+            this.showContent();
+        }
+    }
+    showSkeleton() {
+        // Limpiar contenido previo
+        this.viewContainer.clear();
+        this.hasContentView = false;
+        if (this.skeletonTpl) {
+            // Usar template personalizado
+            this.viewContainer.createEmbeddedView(this.skeletonTpl);
+        }
+        else if (this.spinner) {
+            // Mostrar spinner (usar val-content-loader si esta disponible)
+            this.showSpinner();
+        }
+        else {
+            // Usar template de skeleton registrado
+            this.showSkeletonTemplate();
+        }
+    }
+    showSkeletonTemplate() {
+        const template = this.skeletonService.getTemplate(this.skeleton);
+        if (template) {
+            this.skeletonComponentRef = this.viewContainer.createComponent(template.component);
+            // Combinar config por defecto con inputs
+            const config = {
+                ...template.defaultConfig,
+                count: this.count,
+                animated: this.animated,
+                gap: this.gap,
+                variant: this.variant,
+            };
+            this.skeletonComponentRef.instance.config = config;
+        }
+        else {
+            // Fallback: mostrar texto de carga si no hay template
+            console.warn(`[valLoading] Template '${this.skeleton}' not found. Using fallback.`);
+            this.showFallback();
+        }
+    }
+    showSpinner() {
+        // Crear un div con spinner simple
+        const element = document.createElement('div');
+        element.className = 'val-loading-spinner';
+        element.innerHTML = `
+      <ion-spinner name="crescent"></ion-spinner>
+    `;
+        element.style.cssText = 'display: flex; justify-content: center; padding: 20px;';
+        const hostElement = this.viewContainer.element.nativeElement;
+        hostElement.parentElement?.insertBefore(element, hostElement);
+    }
+    showFallback() {
+        // Fallback simple si no hay template registrado
+        const element = document.createElement('div');
+        element.className = 'val-loading-fallback';
+        element.style.cssText =
+            'display: flex; flex-direction: column; gap: 12px; padding: 16px;';
+        for (let i = 0; i < this.count; i++) {
+            const skeleton = document.createElement('div');
+            skeleton.style.cssText = `
+        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+        background-size: 200% 100%;
+        animation: skeleton-loading 1.5s infinite;
+        height: 56px;
+        border-radius: 8px;
+      `;
+            element.appendChild(skeleton);
+        }
+        const hostElement = this.viewContainer.element.nativeElement;
+        hostElement.parentElement?.insertBefore(element, hostElement);
+    }
+    showContent() {
+        // Limpiar skeleton
+        this.viewContainer.clear();
+        this.skeletonComponentRef = null;
+        // Mostrar contenido real
+        if (!this.hasContentView) {
+            this.viewContainer.createEmbeddedView(this.templateRef);
+            this.hasContentView = true;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoadingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: LoadingDirective, isStandalone: true, selector: "[valLoading]", inputs: { skeleton: ["valLoadingSkeleton", "skeleton"], skeletonTpl: ["valLoadingSkeletonTpl", "skeletonTpl"], count: ["valLoadingCount", "count"], animated: ["valLoadingAnimated", "animated"], gap: ["valLoadingGap", "gap"], variant: ["valLoadingVariant", "variant"], spinner: ["valLoadingSpinner", "spinner"], loading: ["valLoading", "loading"] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoadingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[valLoading]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { skeleton: [{
+                type: Input,
+                args: ['valLoadingSkeleton']
+            }], skeletonTpl: [{
+                type: Input,
+                args: ['valLoadingSkeletonTpl']
+            }], count: [{
+                type: Input,
+                args: ['valLoadingCount']
+            }], animated: [{
+                type: Input,
+                args: ['valLoadingAnimated']
+            }], gap: [{
+                type: Input,
+                args: ['valLoadingGap']
+            }], variant: [{
+                type: Input,
+                args: ['valLoadingVariant']
+            }], spinner: [{
+                type: Input,
+                args: ['valLoadingSpinner']
+            }], loading: [{
+                type: Input,
+                args: ['valLoading']
+            }] } });
+
 /**
- * Guard que verifica si el usuario tiene un rol específico.
- *
- * @param roles - Rol o lista de roles requeridos (OR)
- * @returns Guard function
+ * Template de skeleton para listas.
  *
  * @example
- * ```typescript
- * import { authGuard, roleGuard } from 'valtech-components';
+ * <val-skeleton-list [config]="{ count: 5 }"></val-skeleton-list>
  *
- * const routes: Routes = [
- *   {
- *     path: 'editor',
- *     canActivate: [authGuard, roleGuard(['editor', 'admin'])],
- *     loadComponent: () => import('./editor.page'),
- *   },
- * ];
- * ```
+ * @example
+ * <val-skeleton-list [config]="{ count: 3, variant: 'avatar', gap: '16px' }"></val-skeleton-list>
  */
-function roleGuard(roles) {
-    return () => {
-        const authService = inject(AuthService);
-        const router = inject(Router);
-        const config = inject(VALTECH_AUTH_CONFIG);
-        const roleArray = Array.isArray(roles) ? roles : [roles];
-        const hasRole = roleArray.some((role) => authService.hasRole(role));
-        if (hasRole) {
-            return true;
+class ListSkeletonComponent {
+    constructor() {
+        this.config = { count: 3 };
+    }
+    get items() {
+        return Array(this.config.count ?? 3).fill(0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ListSkeletonComponent, isStandalone: true, selector: "val-skeleton-list", inputs: { config: "config" }, ngImport: i0, template: `
+    <div class="skeleton-list" [style.gap]="config.gap || '12px'" [class]="config.cssClass">
+      @for (item of items; track $index) {
+        @if (config.variant === 'avatar') {
+          <div class="skeleton-list-item-avatar">
+            <val-skeleton
+              [props]="{
+                type: 'avatar',
+                animated: config.animated !== false
+              }"
+            ></val-skeleton>
+            <div class="skeleton-content">
+              <val-skeleton
+                [props]="{
+                  type: 'text',
+                  width: '70%',
+                  height: '16px',
+                  animated: config.animated !== false
+                }"
+              ></val-skeleton>
+              <val-skeleton
+                [props]="{
+                  type: 'text',
+                  width: '50%',
+                  height: '14px',
+                  animated: config.animated !== false
+                }"
+              ></val-skeleton>
+            </div>
+          </div>
+        } @else {
+          <val-skeleton
+            [props]="{
+              type: 'list-item',
+              animated: config.animated !== false
+            }"
+          ></val-skeleton>
         }
-        console.warn(`[ValtechAuth] Rol requerido: ${roleArray.join(' o ')}`);
-        return router.createUrlTree([config.unauthorizedRoute]);
-    };
+      }
+    </div>
+  `, isInline: true, styles: [".skeleton-list{display:flex;flex-direction:column;width:100%}.skeleton-list-item-avatar{display:flex;align-items:center;gap:12px;padding:8px 0}.skeleton-content{display:flex;flex-direction:column;gap:6px;flex:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SkeletonComponent, selector: "val-skeleton", inputs: ["props"] }] }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-skeleton-list', standalone: true, imports: [CommonModule, SkeletonComponent], template: `
+    <div class="skeleton-list" [style.gap]="config.gap || '12px'" [class]="config.cssClass">
+      @for (item of items; track $index) {
+        @if (config.variant === 'avatar') {
+          <div class="skeleton-list-item-avatar">
+            <val-skeleton
+              [props]="{
+                type: 'avatar',
+                animated: config.animated !== false
+              }"
+            ></val-skeleton>
+            <div class="skeleton-content">
+              <val-skeleton
+                [props]="{
+                  type: 'text',
+                  width: '70%',
+                  height: '16px',
+                  animated: config.animated !== false
+                }"
+              ></val-skeleton>
+              <val-skeleton
+                [props]="{
+                  type: 'text',
+                  width: '50%',
+                  height: '14px',
+                  animated: config.animated !== false
+                }"
+              ></val-skeleton>
+            </div>
+          </div>
+        } @else {
+          <val-skeleton
+            [props]="{
+              type: 'list-item',
+              animated: config.animated !== false
+            }"
+          ></val-skeleton>
+        }
+      }
+    </div>
+  `, styles: [".skeleton-list{display:flex;flex-direction:column;width:100%}.skeleton-list-item-avatar{display:flex;align-items:center;gap:12px;padding:8px 0}.skeleton-content{display:flex;flex-direction:column;gap:6px;flex:1}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }] } });
 
 /**
- * Servicio para gestión de dispositivos del usuario.
- * Permite listar, aprobar, bloquear y eliminar dispositivos registrados.
+ * Template de skeleton para grids de cards.
  *
  * @example
- * ```typescript
- * import { DeviceService } from 'valtech-components';
- *
- * @Component({...})
- * export class DevicesPage {
- *   private deviceService = inject(DeviceService);
- *
- *   devices = signal<DeviceInfo[]>([]);
- *
- *   async ngOnInit() {
- *     const devices = await firstValueFrom(this.deviceService.listDevices());
- *     this.devices.set(devices);
- *   }
+ * <val-skeleton-grid [config]="{ count: 6 }"></val-skeleton-grid>
  *
- *   async blockDevice(deviceId: string) {
- *     await firstValueFrom(this.deviceService.blockDevice(deviceId));
- *     // Recargar lista
- *   }
- * }
- * ```
+ * @example
+ * <val-skeleton-grid [config]="{ count: 8, variant: 'cards', columns: 4 }"></val-skeleton-grid>
  */
-class DeviceService {
-    constructor(config, http) {
-        this.config = config;
-        this.http = http;
+class GridSkeletonComponent {
+    constructor() {
+        this.config = { count: 6 };
     }
-    get baseUrl() {
-        return `${this.config.apiUrl}/v2/users/me/devices`;
+    get items() {
+        return Array(this.config.count ?? 6).fill(0);
     }
-    /**
-     * Lista todos los dispositivos registrados del usuario.
-     */
-    listDevices() {
-        return this.http.get(this.baseUrl).pipe(map$1(response => response.devices));
+    get gridColumns() {
+        if (this.config.columns) {
+            return `repeat(${this.config.columns}, 1fr)`;
+        }
+        return '';
     }
-    /**
-     * Obtiene información de un dispositivo específico.
-     */
-    getDevice(deviceId) {
-        return this.http.get(`${this.baseUrl}/${deviceId}`).pipe(map$1(response => response.device));
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GridSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: GridSkeletonComponent, isStandalone: true, selector: "val-skeleton-grid", inputs: { config: "config" }, ngImport: i0, template: `
+    <div
+      class="skeleton-grid"
+      [class]="'variant-' + (config.variant || 'default') + ' ' + (config.cssClass || '')"
+      [style.gap]="config.gap || '16px'"
+      [style.grid-template-columns]="gridColumns"
+    >
+      @for (item of items; track $index) {
+        @switch (config.variant) {
+          @case ('cards') {
+            <div class="skeleton-card">
+              <val-skeleton
+                [props]="{
+                  type: 'custom',
+                  width: '100%',
+                  height: '140px',
+                  borderRadius: '8px 8px 0 0',
+                  animated: config.animated !== false
+                }"
+              ></val-skeleton>
+              <div class="skeleton-card-content">
+                <val-skeleton
+                  [props]="{
+                    type: 'text',
+                    width: '80%',
+                    height: '18px',
+                    animated: config.animated !== false
+                  }"
+                ></val-skeleton>
+                <val-skeleton
+                  [props]="{
+                    type: 'text',
+                    width: '60%',
+                    height: '14px',
+                    animated: config.animated !== false
+                  }"
+                ></val-skeleton>
+              </div>
+            </div>
+          }
+          @case ('compact') {
+            <val-skeleton
+              [props]="{
+                type: 'thumbnail',
+                animated: config.animated !== false
+              }"
+            ></val-skeleton>
+          }
+          @default {
+            <val-skeleton
+              [props]="{
+                type: 'card',
+                animated: config.animated !== false
+              }"
+            ></val-skeleton>
+          }
+        }
+      }
+    </div>
+  `, isInline: true, styles: [".skeleton-grid{display:grid;width:100%;&.variant-default{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}&.variant-cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}&.variant-compact{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px}}.skeleton-card{border-radius:8px;overflow:hidden;background:var(--ion-color-light, #f4f5f8)}.skeleton-card-content{padding:12px;display:flex;flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SkeletonComponent, selector: "val-skeleton", inputs: ["props"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GridSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-skeleton-grid', standalone: true, imports: [CommonModule, SkeletonComponent], template: `
+    <div
+      class="skeleton-grid"
+      [class]="'variant-' + (config.variant || 'default') + ' ' + (config.cssClass || '')"
+      [style.gap]="config.gap || '16px'"
+      [style.grid-template-columns]="gridColumns"
+    >
+      @for (item of items; track $index) {
+        @switch (config.variant) {
+          @case ('cards') {
+            <div class="skeleton-card">
+              <val-skeleton
+                [props]="{
+                  type: 'custom',
+                  width: '100%',
+                  height: '140px',
+                  borderRadius: '8px 8px 0 0',
+                  animated: config.animated !== false
+                }"
+              ></val-skeleton>
+              <div class="skeleton-card-content">
+                <val-skeleton
+                  [props]="{
+                    type: 'text',
+                    width: '80%',
+                    height: '18px',
+                    animated: config.animated !== false
+                  }"
+                ></val-skeleton>
+                <val-skeleton
+                  [props]="{
+                    type: 'text',
+                    width: '60%',
+                    height: '14px',
+                    animated: config.animated !== false
+                  }"
+                ></val-skeleton>
+              </div>
+            </div>
+          }
+          @case ('compact') {
+            <val-skeleton
+              [props]="{
+                type: 'thumbnail',
+                animated: config.animated !== false
+              }"
+            ></val-skeleton>
+          }
+          @default {
+            <val-skeleton
+              [props]="{
+                type: 'card',
+                animated: config.animated !== false
+              }"
+            ></val-skeleton>
+          }
+        }
+      }
+    </div>
+  `, styles: [".skeleton-grid{display:grid;width:100%;&.variant-default{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}&.variant-cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}&.variant-compact{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px}}.skeleton-card{border-radius:8px;overflow:hidden;background:var(--ion-color-light, #f4f5f8)}.skeleton-card-content{padding:12px;display:flex;flex-direction:column;gap:8px}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }] } });
+
+/**
+ * Template de skeleton para formularios.
+ *
+ * @example
+ * <val-skeleton-form [config]="{ count: 4 }"></val-skeleton-form>
+ *
+ * @example
+ * <val-skeleton-form [config]="{ count: 3, variant: 'compact' }"></val-skeleton-form>
+ */
+class FormSkeletonComponent {
+    constructor() {
+        this.config = { count: 3 };
     }
-    /**
-     * Bloquea un dispositivo.
-     * Revoca todas las sesiones activas de ese dispositivo.
-     */
-    blockDevice(deviceId) {
-        return this.http.post(`${this.baseUrl}/${deviceId}/block`, {});
+    get fields() {
+        return Array(this.config.count ?? 3).fill(0);
     }
-    /**
-     * Aprueba un dispositivo pendiente.
-     * Cambia el estado de pending_approval a active.
-     */
-    approveDevice(deviceId) {
-        return this.http.post(`${this.baseUrl}/${deviceId}/approve`, {});
+    get isCompact() {
+        return this.config.variant === 'compact';
     }
-    /**
-     * Elimina un dispositivo registrado.
-     */
-    deleteDevice(deviceId) {
-        return this.http.delete(`${this.baseUrl}/${deviceId}`);
+    get labelWidth() {
+        return this.isCompact ? '60px' : '80px';
     }
-    /**
-     * Valida un token de acción SIN ejecutarlo.
-     * Útil para mostrar confirmación al usuario antes de ejecutar.
-     * Este endpoint NO requiere autenticación.
-     *
-     * @param token Token JWT de acción
-     * @returns Información del token si es válido
-     *
-     * @example
-     * ```typescript
-     * const token = this.route.snapshot.queryParams['token'];
-     * if (token) {
-     *   const validation = await firstValueFrom(this.deviceService.validateAction(token));
-     *   if (validation.valid) {
-     *     // Mostrar confirmación al usuario
-     *     console.log(`Acción: ${validation.actionType}`);
-     *   }
-     * }
-     * ```
-     */
-    validateAction(token) {
-        return this.http.post(`${this.config.apiUrl}/v2/actions/validate`, { token });
+    get inputHeight() {
+        return this.isCompact ? '38px' : '44px';
     }
-    /**
-     * Ejecuta una acción de dispositivo desde un token de email.
-     * Este endpoint NO requiere autenticación.
-     * El token viene en la URL del email de alerta de nuevo inicio de sesión.
-     *
-     * @param token Token JWT de acción (24h, un solo uso)
-     *
-     * @example
-     * ```typescript
-     * // En la página de dispositivos, al detectar ?token=xxx en la URL:
-     * const token = this.route.snapshot.queryParams['token'];
-     * if (token) {
-     *   const result = await firstValueFrom(this.deviceService.executeAction(token));
-     *   if (result.success) {
-     *     console.log(`Dispositivo bloqueado, ${result.sessionsRevoked} sesiones cerradas`);
-     *   }
-     * }
-     * ```
-     */
-    executeAction(token) {
-        // Usa el endpoint unificado de acciones
-        return this.http.post(`${this.config.apiUrl}/v2/actions/execute`, { token }).pipe(map$1(response => ({
-            operationId: response.operationId,
-            success: response.success,
-            message: response.message,
-            action: response.data?.['action'] || 'refuse',
-            deviceId: response.data?.['deviceId'] || '',
-            sessionsRevoked: response.data?.['sessionsRevoked'],
-        })));
+    get buttonWidth() {
+        return this.isCompact ? '120px' : '100%';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DeviceService, deps: [{ token: VALTECH_AUTH_CONFIG }, { token: i1$8.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DeviceService, providedIn: 'root' }); }
+    get buttonHeight() {
+        return this.isCompact ? '38px' : '48px';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FormSkeletonComponent, isStandalone: true, selector: "val-skeleton-form", inputs: { config: "config" }, ngImport: i0, template: `
+    <div
+      class="skeleton-form"
+      [class]="'variant-' + (config.variant || 'default') + ' ' + (config.cssClass || '')"
+    >
+      @for (field of fields; track $index) {
+        <div class="skeleton-field">
+          <!-- Label -->
+          <val-skeleton
+            [props]="{
+              type: 'text',
+              width: labelWidth,
+              height: '14px',
+              animated: config.animated !== false
+            }"
+          ></val-skeleton>
+          <!-- Input -->
+          <val-skeleton
+            [props]="{
+              type: 'custom',
+              width: '100%',
+              height: inputHeight,
+              borderRadius: '8px',
+              animated: config.animated !== false
+            }"
+          ></val-skeleton>
+        </div>
+      }
+      <!-- Submit button -->
+      <div class="skeleton-button">
+        <val-skeleton
+          [props]="{
+            type: 'custom',
+            width: buttonWidth,
+            height: buttonHeight,
+            borderRadius: '8px',
+            animated: config.animated !== false
+          }"
+        ></val-skeleton>
+      </div>
+    </div>
+  `, isInline: true, styles: [".skeleton-form{display:flex;flex-direction:column;width:100%;&.variant-default{gap:20px}&.variant-compact{gap:12px}}.skeleton-field{display:flex;flex-direction:column;gap:6px}.skeleton-button{margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SkeletonComponent, selector: "val-skeleton", inputs: ["props"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DeviceService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [VALTECH_AUTH_CONFIG]
-                }] }, { type: i1$8.HttpClient }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-skeleton-form', standalone: true, imports: [CommonModule, SkeletonComponent], template: `
+    <div
+      class="skeleton-form"
+      [class]="'variant-' + (config.variant || 'default') + ' ' + (config.cssClass || '')"
+    >
+      @for (field of fields; track $index) {
+        <div class="skeleton-field">
+          <!-- Label -->
+          <val-skeleton
+            [props]="{
+              type: 'text',
+              width: labelWidth,
+              height: '14px',
+              animated: config.animated !== false
+            }"
+          ></val-skeleton>
+          <!-- Input -->
+          <val-skeleton
+            [props]="{
+              type: 'custom',
+              width: '100%',
+              height: inputHeight,
+              borderRadius: '8px',
+              animated: config.animated !== false
+            }"
+          ></val-skeleton>
+        </div>
+      }
+      <!-- Submit button -->
+      <div class="skeleton-button">
+        <val-skeleton
+          [props]="{
+            type: 'custom',
+            width: buttonWidth,
+            height: buttonHeight,
+            borderRadius: '8px',
+            animated: config.animated !== false
+          }"
+        ></val-skeleton>
+      </div>
+    </div>
+  `, styles: [".skeleton-form{display:flex;flex-direction:column;width:100%;&.variant-default{gap:20px}&.variant-compact{gap:12px}}.skeleton-field{display:flex;flex-direction:column;gap:6px}.skeleton-button{margin-top:8px}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }] } });
 
 /**
- * Servicio para gestión de sesiones activas del usuario.
- * Permite listar y revocar sesiones.
+ * Template de skeleton para perfiles de usuario.
  *
  * @example
- * ```typescript
- * import { SessionService } from 'valtech-components';
- *
- * @Component({...})
- * export class SessionsPage {
- *   private sessionService = inject(SessionService);
+ * <val-skeleton-profile></val-skeleton-profile>
  *
- *   sessions = signal<SessionInfo[]>([]);
+ * @example
+ * <val-skeleton-profile [config]="{ variant: 'full' }"></val-skeleton-profile>
+ */
+class ProfileSkeletonComponent {
+    constructor() {
+        this.config = {};
+    }
+    get avatarSize() {
+        return this.config.variant === 'full' ? '96px' : '48px';
+    }
+    get nameWidth() {
+        return this.config.variant === 'full' ? '180px' : '160px';
+    }
+    get subtitleWidth() {
+        return this.config.variant === 'full' ? '140px' : '120px';
+    }
+    get stats() {
+        return [1, 2, 3];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProfileSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ProfileSkeletonComponent, isStandalone: true, selector: "val-skeleton-profile", inputs: { config: "config" }, ngImport: i0, template: `
+    <div
+      class="skeleton-profile"
+      [class]="'variant-' + (config.variant || 'default') + ' ' + (config.cssClass || '')"
+    >
+      <div class="profile-header">
+        <!-- Avatar -->
+        <val-skeleton
+          [props]="{
+            type: 'avatar',
+            width: avatarSize,
+            height: avatarSize,
+            animated: config.animated !== false
+          }"
+        ></val-skeleton>
+
+        <div class="profile-info">
+          <!-- Name -->
+          <val-skeleton
+            [props]="{
+              type: 'text',
+              width: nameWidth,
+              height: '20px',
+              animated: config.animated !== false
+            }"
+          ></val-skeleton>
+          <!-- Subtitle -->
+          <val-skeleton
+            [props]="{
+              type: 'text',
+              width: subtitleWidth,
+              height: '14px',
+              animated: config.animated !== false
+            }"
+          ></val-skeleton>
+          @if (config.variant === 'full') {
+            <!-- Extra info -->
+            <val-skeleton
+              [props]="{
+                type: 'text',
+                width: '100px',
+                height: '12px',
+                animated: config.animated !== false
+              }"
+            ></val-skeleton>
+          }
+        </div>
+      </div>
+
+      @if (config.variant === 'full') {
+        <div class="profile-details">
+          <val-skeleton
+            [props]="{
+              type: 'paragraph',
+              lines: 3,
+              animated: config.animated !== false
+            }"
+          ></val-skeleton>
+
+          <div class="profile-stats">
+            @for (stat of stats; track $index) {
+              <div class="stat-item">
+                <val-skeleton
+                  [props]="{
+                    type: 'text',
+                    width: '40px',
+                    height: '24px',
+                    animated: config.animated !== false
+                  }"
+                ></val-skeleton>
+                <val-skeleton
+                  [props]="{
+                    type: 'text',
+                    width: '60px',
+                    height: '12px',
+                    animated: config.animated !== false
+                  }"
+                ></val-skeleton>
+              </div>
+            }
+          </div>
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [".skeleton-profile{width:100%;&.variant-default .profile-header{display:flex;align-items:center;gap:12px}&.variant-full{.profile-header{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}.profile-info{align-items:center}.profile-details{margin-top:24px}}}.profile-info{display:flex;flex-direction:column;gap:6px}.profile-stats{display:flex;justify-content:center;gap:32px;margin-top:20px}.stat-item{display:flex;flex-direction:column;align-items:center;gap:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SkeletonComponent, selector: "val-skeleton", inputs: ["props"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProfileSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-skeleton-profile', standalone: true, imports: [CommonModule, SkeletonComponent], template: `
+    <div
+      class="skeleton-profile"
+      [class]="'variant-' + (config.variant || 'default') + ' ' + (config.cssClass || '')"
+    >
+      <div class="profile-header">
+        <!-- Avatar -->
+        <val-skeleton
+          [props]="{
+            type: 'avatar',
+            width: avatarSize,
+            height: avatarSize,
+            animated: config.animated !== false
+          }"
+        ></val-skeleton>
+
+        <div class="profile-info">
+          <!-- Name -->
+          <val-skeleton
+            [props]="{
+              type: 'text',
+              width: nameWidth,
+              height: '20px',
+              animated: config.animated !== false
+            }"
+          ></val-skeleton>
+          <!-- Subtitle -->
+          <val-skeleton
+            [props]="{
+              type: 'text',
+              width: subtitleWidth,
+              height: '14px',
+              animated: config.animated !== false
+            }"
+          ></val-skeleton>
+          @if (config.variant === 'full') {
+            <!-- Extra info -->
+            <val-skeleton
+              [props]="{
+                type: 'text',
+                width: '100px',
+                height: '12px',
+                animated: config.animated !== false
+              }"
+            ></val-skeleton>
+          }
+        </div>
+      </div>
+
+      @if (config.variant === 'full') {
+        <div class="profile-details">
+          <val-skeleton
+            [props]="{
+              type: 'paragraph',
+              lines: 3,
+              animated: config.animated !== false
+            }"
+          ></val-skeleton>
+
+          <div class="profile-stats">
+            @for (stat of stats; track $index) {
+              <div class="stat-item">
+                <val-skeleton
+                  [props]="{
+                    type: 'text',
+                    width: '40px',
+                    height: '24px',
+                    animated: config.animated !== false
+                  }"
+                ></val-skeleton>
+                <val-skeleton
+                  [props]="{
+                    type: 'text',
+                    width: '60px',
+                    height: '12px',
+                    animated: config.animated !== false
+                  }"
+                ></val-skeleton>
+              </div>
+            }
+          </div>
+        </div>
+      }
+    </div>
+  `, styles: [".skeleton-profile{width:100%;&.variant-default .profile-header{display:flex;align-items:center;gap:12px}&.variant-full{.profile-header{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}.profile-info{align-items:center}.profile-details{margin-top:24px}}}.profile-info{display:flex;flex-direction:column;gap:6px}.profile-stats{display:flex;justify-content:center;gap:32px;margin-top:20px}.stat-item{display:flex;flex-direction:column;align-items:center;gap:4px}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }] } });
+
+/**
+ * Template de skeleton para tablas.
  *
- *   async ngOnInit() {
- *     const sessions = await firstValueFrom(this.sessionService.listSessions());
- *     this.sessions.set(sessions);
- *   }
+ * @example
+ * <val-skeleton-table [config]="{ columns: 5, rows: 10 }"></val-skeleton-table>
+ */
+class TableSkeletonComponent {
+    constructor() {
+        this.config = { columns: 4, rows: 5 };
+    }
+    get columns() {
+        return Array(this.config.columns ?? 4).fill(0);
+    }
+    get rows() {
+        return Array(this.config.rows ?? 5).fill(0);
+    }
+    getColumnFlex(index) {
+        // Primera columna mas ancha, ultima mas angosta
+        const totalCols = this.config.columns ?? 4;
+        if (index === 0)
+            return '1.5';
+        if (index === totalCols - 1)
+            return '0.8';
+        return '1';
+    }
+    getColumnContentWidth(index) {
+        // Variar anchos para aspecto natural
+        const widths = ['90%', '70%', '60%', '80%', '50%'];
+        return widths[index % widths.length];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TableSkeletonComponent, isStandalone: true, selector: "val-skeleton-table", inputs: { config: "config" }, ngImport: i0, template: `
+    <div class="skeleton-table" [class]="config.cssClass">
+      <!-- Header -->
+      <div class="skeleton-table-header">
+        @for (col of columns; track $index) {
+          <div class="skeleton-table-cell" [style.flex]="getColumnFlex($index)">
+            <val-skeleton
+              [props]="{
+                type: 'text',
+                width: '80%',
+                height: '16px',
+                animated: config.animated !== false
+              }"
+            ></val-skeleton>
+          </div>
+        }
+      </div>
+
+      <!-- Rows -->
+      @for (row of rows; track $index) {
+        <div class="skeleton-table-row">
+          @for (col of columns; track $index) {
+            <div class="skeleton-table-cell" [style.flex]="getColumnFlex($index)">
+              <val-skeleton
+                [props]="{
+                  type: 'text',
+                  width: getColumnContentWidth($index),
+                  height: '14px',
+                  animated: config.animated !== false
+                }"
+              ></val-skeleton>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [".skeleton-table{width:100%;overflow:hidden;border-radius:8px;border:1px solid var(--ion-color-light-shade, #d7d8da)}.skeleton-table-header{display:flex;align-items:center;gap:16px;padding:14px 16px;background:var(--ion-color-light, #f4f5f8);border-bottom:1px solid var(--ion-color-light-shade, #d7d8da)}.skeleton-table-row{display:flex;align-items:center;gap:16px;padding:12px 16px;border-bottom:1px solid var(--ion-color-light-shade, #d7d8da);&:last-child{border-bottom:none}}.skeleton-table-cell{min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SkeletonComponent, selector: "val-skeleton", inputs: ["props"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-skeleton-table', standalone: true, imports: [CommonModule, SkeletonComponent], template: `
+    <div class="skeleton-table" [class]="config.cssClass">
+      <!-- Header -->
+      <div class="skeleton-table-header">
+        @for (col of columns; track $index) {
+          <div class="skeleton-table-cell" [style.flex]="getColumnFlex($index)">
+            <val-skeleton
+              [props]="{
+                type: 'text',
+                width: '80%',
+                height: '16px',
+                animated: config.animated !== false
+              }"
+            ></val-skeleton>
+          </div>
+        }
+      </div>
+
+      <!-- Rows -->
+      @for (row of rows; track $index) {
+        <div class="skeleton-table-row">
+          @for (col of columns; track $index) {
+            <div class="skeleton-table-cell" [style.flex]="getColumnFlex($index)">
+              <val-skeleton
+                [props]="{
+                  type: 'text',
+                  width: getColumnContentWidth($index),
+                  height: '14px',
+                  animated: config.animated !== false
+                }"
+              ></val-skeleton>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `, styles: [".skeleton-table{width:100%;overflow:hidden;border-radius:8px;border:1px solid var(--ion-color-light-shade, #d7d8da)}.skeleton-table-header{display:flex;align-items:center;gap:16px;padding:14px 16px;background:var(--ion-color-light, #f4f5f8);border-bottom:1px solid var(--ion-color-light-shade, #d7d8da)}.skeleton-table-row{display:flex;align-items:center;gap:16px;padding:12px 16px;border-bottom:1px solid var(--ion-color-light-shade, #d7d8da);&:last-child{border-bottom:none}}.skeleton-table-cell{min-width:0}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }] } });
+
+/**
+ * Template de skeleton para paginas de detalle.
  *
- *   async revokeSession(sessionId: string) {
- *     await firstValueFrom(this.sessionService.revokeSession(sessionId));
- *     // Recargar lista
- *   }
+ * @example
+ * <val-skeleton-detail></val-skeleton-detail>
  *
- *   async revokeAllOthers() {
- *     const result = await firstValueFrom(this.sessionService.revokeAllSessions());
- *     console.log(`${result.sessionsRevoked} sesiones cerradas`);
- *   }
- * }
- * ```
+ * @example
+ * <val-skeleton-detail [config]="{ sections: 3 }"></val-skeleton-detail>
  */
-class SessionService {
-    constructor(config, http) {
-        this.config = config;
-        this.http = http;
-    }
-    get baseUrl() {
-        return `${this.config.apiUrl}/v2/users/me/sessions`;
-    }
-    /**
-     * Lista todas las sesiones activas del usuario.
-     * La sesión actual está marcada con isCurrent=true.
-     */
-    listSessions() {
-        return this.http.get(this.baseUrl).pipe(map$1(response => response.sessions));
+class DetailSkeletonComponent {
+    constructor() {
+        this.config = { sections: 2 };
     }
-    /**
-     * Revoca una sesión específica.
-     * Fuerza el cierre de sesión en ese dispositivo/navegador.
-     */
-    revokeSession(sessionId) {
-        return this.http.delete(`${this.baseUrl}/${sessionId}`);
+    get sections() {
+        return Array(this.config.sections ?? 2).fill(0);
     }
-    /**
-     * Revoca todas las sesiones excepto la actual.
-     * Útil para "cerrar sesión en todos los dispositivos".
-     *
-     * @returns Número de sesiones revocadas
-     */
-    revokeAllSessions() {
-        return this.http.delete(this.baseUrl);
+    get metaItems() {
+        return [1, 2, 3];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SessionService, deps: [{ token: VALTECH_AUTH_CONFIG }, { token: i1$8.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SessionService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DetailSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DetailSkeletonComponent, isStandalone: true, selector: "val-skeleton-detail", inputs: { config: "config" }, ngImport: i0, template: `
+    <div class="skeleton-detail" [class]="config.cssClass">
+      <!-- Hero/Header section -->
+      <div class="skeleton-detail-hero">
+        <val-skeleton
+          [props]="{
+            type: 'custom',
+            width: '100%',
+            height: '200px',
+            borderRadius: '8px',
+            animated: config.animated !== false
+          }"
+        ></val-skeleton>
+      </div>
+
+      <!-- Title section -->
+      <div class="skeleton-detail-title">
+        <val-skeleton
+          [props]="{
+            type: 'text',
+            width: '70%',
+            height: '28px',
+            animated: config.animated !== false
+          }"
+        ></val-skeleton>
+        <val-skeleton
+          [props]="{
+            type: 'text',
+            width: '40%',
+            height: '16px',
+            animated: config.animated !== false
+          }"
+        ></val-skeleton>
+      </div>
+
+      <!-- Metadata row -->
+      <div class="skeleton-detail-meta">
+        @for (meta of metaItems; track $index) {
+          <val-skeleton
+            [props]="{
+              type: 'custom',
+              width: '80px',
+              height: '24px',
+              borderRadius: '12px',
+              animated: config.animated !== false
+            }"
+          ></val-skeleton>
+        }
+      </div>
+
+      <!-- Content sections -->
+      @for (section of sections; track $index) {
+        <div class="skeleton-detail-section">
+          <!-- Section title -->
+          <val-skeleton
+            [props]="{
+              type: 'text',
+              width: '30%',
+              height: '20px',
+              animated: config.animated !== false
+            }"
+          ></val-skeleton>
+          <!-- Section content -->
+          <val-skeleton
+            [props]="{
+              type: 'paragraph',
+              lines: 4,
+              animated: config.animated !== false
+            }"
+          ></val-skeleton>
+        </div>
+      }
+
+      <!-- Action buttons -->
+      <div class="skeleton-detail-actions">
+        <val-skeleton
+          [props]="{
+            type: 'custom',
+            width: '120px',
+            height: '44px',
+            borderRadius: '8px',
+            animated: config.animated !== false
+          }"
+        ></val-skeleton>
+        <val-skeleton
+          [props]="{
+            type: 'custom',
+            width: '120px',
+            height: '44px',
+            borderRadius: '8px',
+            animated: config.animated !== false
+          }"
+        ></val-skeleton>
+      </div>
+    </div>
+  `, isInline: true, styles: [".skeleton-detail{display:flex;flex-direction:column;gap:20px;width:100%}.skeleton-detail-hero{width:100%}.skeleton-detail-title{display:flex;flex-direction:column;gap:8px}.skeleton-detail-meta{display:flex;gap:12px;flex-wrap:wrap}.skeleton-detail-section{display:flex;flex-direction:column;gap:12px;padding-top:16px;border-top:1px solid var(--ion-color-light-shade, #d7d8da)}.skeleton-detail-actions{display:flex;gap:12px;padding-top:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SkeletonComponent, selector: "val-skeleton", inputs: ["props"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DetailSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-skeleton-detail', standalone: true, imports: [CommonModule, SkeletonComponent], template: `
+    <div class="skeleton-detail" [class]="config.cssClass">
+      <!-- Hero/Header section -->
+      <div class="skeleton-detail-hero">
+        <val-skeleton
+          [props]="{
+            type: 'custom',
+            width: '100%',
+            height: '200px',
+            borderRadius: '8px',
+            animated: config.animated !== false
+          }"
+        ></val-skeleton>
+      </div>
+
+      <!-- Title section -->
+      <div class="skeleton-detail-title">
+        <val-skeleton
+          [props]="{
+            type: 'text',
+            width: '70%',
+            height: '28px',
+            animated: config.animated !== false
+          }"
+        ></val-skeleton>
+        <val-skeleton
+          [props]="{
+            type: 'text',
+            width: '40%',
+            height: '16px',
+            animated: config.animated !== false
+          }"
+        ></val-skeleton>
+      </div>
+
+      <!-- Metadata row -->
+      <div class="skeleton-detail-meta">
+        @for (meta of metaItems; track $index) {
+          <val-skeleton
+            [props]="{
+              type: 'custom',
+              width: '80px',
+              height: '24px',
+              borderRadius: '12px',
+              animated: config.animated !== false
+            }"
+          ></val-skeleton>
+        }
+      </div>
+
+      <!-- Content sections -->
+      @for (section of sections; track $index) {
+        <div class="skeleton-detail-section">
+          <!-- Section title -->
+          <val-skeleton
+            [props]="{
+              type: 'text',
+              width: '30%',
+              height: '20px',
+              animated: config.animated !== false
+            }"
+          ></val-skeleton>
+          <!-- Section content -->
+          <val-skeleton
+            [props]="{
+              type: 'paragraph',
+              lines: 4,
+              animated: config.animated !== false
+            }"
+          ></val-skeleton>
+        </div>
+      }
+
+      <!-- Action buttons -->
+      <div class="skeleton-detail-actions">
+        <val-skeleton
+          [props]="{
+            type: 'custom',
+            width: '120px',
+            height: '44px',
+            borderRadius: '8px',
+            animated: config.animated !== false
+          }"
+        ></val-skeleton>
+        <val-skeleton
+          [props]="{
+            type: 'custom',
+            width: '120px',
+            height: '44px',
+            borderRadius: '8px',
+            animated: config.animated !== false
+          }"
+        ></val-skeleton>
+      </div>
+    </div>
+  `, styles: [".skeleton-detail{display:flex;flex-direction:column;gap:20px;width:100%}.skeleton-detail-hero{width:100%}.skeleton-detail-title{display:flex;flex-direction:column;gap:8px}.skeleton-detail-meta{display:flex;gap:12px;flex-wrap:wrap}.skeleton-detail-section{display:flex;flex-direction:column;gap:12px;padding-top:16px;border-top:1px solid var(--ion-color-light-shade, #d7d8da)}.skeleton-detail-actions{display:flex;gap:12px;padding-top:16px}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }] } });
+
+/**
+ * Configura el sistema de skeletons para Valtech Components.
+ *
+ * @param config Configuracion de skeletons
+ * @returns Providers para app.config.ts
+ *
+ * @example
+ * // app.config.ts
+ * import { provideValtechSkeleton } from 'valtech-components';
+ *
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideValtechSkeleton({
+ *       animated: true,
+ *       defaultDelay: 100,
+ *       defaultMinTime: 500,
+ *       templates: [
+ *         { name: 'custom-card', component: MyCustomCardSkeleton }
+ *       ]
+ *     }),
+ *   ]
+ * };
+ *
+ * @example
+ * // Uso minimo - usa configuracion por defecto
+ * providers: [provideValtechSkeleton()]
+ */
+function provideValtechSkeleton(config = {}) {
+    const mergedConfig = { ...DEFAULT_SKELETON_CONFIG, ...config };
+    return makeEnvironmentProviders([
+        {
+            provide: APP_INITIALIZER,
+            useFactory: (skeletonService) => {
+                return () => {
+                    // Configurar servicio
+                    skeletonService.configure(mergedConfig);
+                    // Registrar templates built-in
+                    skeletonService.registerTemplate('list', ListSkeletonComponent, { count: 3 });
+                    skeletonService.registerTemplate('list-avatar', ListSkeletonComponent, {
+                        count: 3,
+                        variant: 'avatar',
+                    });
+                    skeletonService.registerTemplate('grid', GridSkeletonComponent, { count: 4 });
+                    skeletonService.registerTemplate('grid-cards', GridSkeletonComponent, {
+                        count: 6,
+                        variant: 'cards',
+                    });
+                    skeletonService.registerTemplate('form', FormSkeletonComponent, { count: 3 });
+                    skeletonService.registerTemplate('form-compact', FormSkeletonComponent, {
+                        count: 2,
+                        variant: 'compact',
+                    });
+                    skeletonService.registerTemplate('profile', ProfileSkeletonComponent, {});
+                    skeletonService.registerTemplate('profile-full', ProfileSkeletonComponent, {
+                        variant: 'full',
+                    });
+                    skeletonService.registerTemplate('table', TableSkeletonComponent, {
+                        columns: 4,
+                        rows: 5,
+                    });
+                    skeletonService.registerTemplate('detail', DetailSkeletonComponent, { sections: 2 });
+                };
+            },
+            deps: [SkeletonService],
+            multi: true,
+        },
+    ]);
+}
+
+// Types
+
+/**
+ * Estado inicial para controladores de paginacion.
+ */
+function createInitialPaginationState(pageSize, initialItems = []) {
+    return {
+        items: initialItems,
+        page: 0,
+        pageSize,
+        hasMore: true,
+        isLoading: false,
+        error: undefined,
+    };
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SessionService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    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=...`
+ * Implementacion del controlador de paginacion.
  */
-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();
+class PaginationControllerImpl {
+    constructor(config) {
+        this.config = config;
+        this._state = signal(createInitialPaginationState(this.config.pageSize ?? 20, this.config.initialItems));
+        this.state = this._state.asReadonly();
+        this.items = computed(() => this._state().items);
+        this.isLoading = computed(() => this._state().isLoading);
+        this.hasMore = computed(() => this._state().hasMore);
+        this.error = computed(() => this._state().error ?? null);
+        this.currentPage = computed(() => this._state().page);
+        this.total = computed(() => this._state().total);
+    }
+    async loadNext() {
+        const currentState = this._state();
+        if (currentState.isLoading || !currentState.hasMore)
             return;
+        this._state.update((s) => ({ ...s, isLoading: true, error: undefined }));
+        try {
+            const params = {
+                strategy: this.config.strategy,
+                page: currentState.page,
+                pageSize: currentState.pageSize,
+                cursor: currentState.nextCursor,
+                direction: 'forward',
+            };
+            const result = await this.executeLoad(params);
+            this._state.update((s) => ({
+                ...s,
+                items: [...s.items, ...result.items],
+                page: s.page + 1,
+                hasMore: result.hasMore,
+                total: result.total ?? s.total,
+                nextCursor: result.nextCursor,
+                prevCursor: result.prevCursor ?? s.prevCursor,
+                isLoading: false,
+            }));
         }
-        // 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;
+        catch (err) {
+            this._state.update((s) => ({
+                ...s,
+                isLoading: false,
+                error: err,
+            }));
         }
-        // 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(',');
-            }
+    }
+    async loadPrevious() {
+        const currentState = this._state();
+        if (currentState.isLoading || currentState.page <= 0)
+            return;
+        this._state.update((s) => ({ ...s, isLoading: true, error: undefined }));
+        try {
+            const params = {
+                strategy: this.config.strategy,
+                page: currentState.page - 1,
+                pageSize: currentState.pageSize,
+                cursor: currentState.prevCursor,
+                direction: 'backward',
+            };
+            const result = await this.executeLoad(params);
+            this._state.update((s) => ({
+                ...s,
+                items: [...result.items, ...s.items],
+                page: s.page - 1,
+                prevCursor: result.prevCursor,
+                isLoading: false,
+            }));
         }
-        if (permissionsParam) {
-            try {
-                permissions = JSON.parse(atob(permissionsParam));
-            }
-            catch {
-                permissions = permissionsParam.split(',');
-            }
+        catch (err) {
+            this._state.update((s) => ({
+                ...s,
+                isLoading: false,
+                error: err,
+            }));
         }
-        // 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);
+    async refresh() {
+        this._state.update((s) => ({
+            ...s,
+            items: [],
+            page: 0,
+            hasMore: true,
+            nextCursor: undefined,
+            prevCursor: undefined,
+            isLoading: true,
+            error: undefined,
+        }));
+        try {
+            const params = {
+                strategy: this.config.strategy,
+                page: 0,
+                pageSize: this._state().pageSize,
+                direction: 'forward',
+            };
+            const result = await this.executeLoad(params);
+            this._state.update((s) => ({
+                ...s,
+                items: result.items,
+                page: 1,
+                hasMore: result.hasMore,
+                total: result.total,
+                nextCursor: result.nextCursor,
+                isLoading: false,
+            }));
         }
-        else if (window.parent !== window) {
-            // Enviar al parent (si estamos en iframe)
-            window.parent.postMessage(data, window.location.origin);
+        catch (err) {
+            this._state.update((s) => ({
+                ...s,
+                isLoading: false,
+                error: err,
+            }));
         }
     }
-    closeAfterDelay() {
-        // Dar tiempo para que el mensaje se envíe antes de cerrar
-        setTimeout(() => {
-            if (window.opener) {
-                window.close();
-            }
-        }, 500);
+    reset() {
+        this._state.set(createInitialPaginationState(this.config.pageSize ?? 20, this.config.initialItems));
+    }
+    updateItem(predicate, updates) {
+        this._state.update((s) => ({
+            ...s,
+            items: s.items.map((item) => (predicate(item) ? { ...item, ...updates } : item)),
+        }));
+    }
+    removeItem(predicate) {
+        this._state.update((s) => ({
+            ...s,
+            items: s.items.filter((item) => !predicate(item)),
+        }));
+    }
+    prependItems(items) {
+        this._state.update((s) => ({
+            ...s,
+            items: [...items, ...s.items],
+        }));
+    }
+    appendItems(items) {
+        this._state.update((s) => ({
+            ...s,
+            items: [...s.items, ...items],
+        }));
+    }
+    async executeLoad(params) {
+        const result = this.config.loadFn(params);
+        if (isObservable(result)) {
+            return await firstValueFrom(result);
+        }
+        return await result;
     }
-    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
- *
- * Servicio de autenticación reutilizable para aplicaciones Angular.
- * Proporciona autenticación con AuthV2, MFA, sincronización entre pestañas,
- * refresh proactivo de tokens, y registro automático de dispositivos para
- * push notifications.
+ * Servicio para crear controladores de paginacion reutilizables.
  *
  * @example
- * ```typescript
- * // En main.ts
- * import { bootstrapApplication } from '@angular/platform-browser';
- * import { provideValtechAuth, provideValtechFirebase } from 'valtech-components';
- * import { environment } from './environments/environment';
+ * // En un componente
+ * pagination = inject(PaginationService);
  *
- * bootstrapApplication(AppComponent, {
- *   providers: [
- *     provideValtechFirebase(environment.firebase),
- *     provideValtechAuth({
- *       apiUrl: environment.apiUrl,
- *       enableFirebaseIntegration: true,
- *       enableDeviceRegistration: true, // Auto-registra dispositivos para push
- *     }),
- *   ],
+ * usersController = this.pagination.createController<User>({
+ *   strategy: 'offset',
+ *   pageSize: 20,
+ *   loadFn: (params) => this.userService.getUsers(params.page, params.pageSize)
  * });
  *
- * // En app.routes.ts
- * import { authGuard, guestGuard, permissionGuard } from 'valtech-components';
- *
- * const routes: Routes = [
- *   { path: 'login', canActivate: [guestGuard], loadComponent: () => import('./login.page') },
- *   { path: 'dashboard', canActivate: [authGuard], loadComponent: () => import('./dashboard.page') },
- *   { path: 'admin', canActivate: [authGuard, permissionGuard('admin:*')], loadComponent: () => import('./admin.page') },
- * ];
- *
- * // En componentes
- * import { AuthService } from 'valtech-components';
- *
- * @Component({...})
- * export class LoginComponent {
- *   private auth = inject(AuthService);
- *
- *   async login() {
- *     await firstValueFrom(this.auth.signin({ email, password }));
- *     if (this.auth.mfaPending().required) {
- *       // Mostrar UI de MFA
- *     } else {
- *       this.router.navigate(['/dashboard']);
- *     }
- *   }
- *
- *   // Habilitar notificaciones push (solicita permisos + registra dispositivo)
- *   async enableNotifications() {
- *     const result = await this.auth.enableNotifications();
- *     if (result.granted) {
- *       console.log('Notificaciones habilitadas');
- *     }
- *   }
- *
- *   // Verificar estado de permisos
- *   get canReceiveNotifications(): boolean {
- *     return this.auth.getNotificationPermissionState() === 'granted';
- *   }
+ * // En el template
+ * @for (user of usersController.items(); track user.id) {
+ *   <app-user-card [user]="user"></app-user-card>
+ * }
  *
- *   // En template: usar signals directamente
- *   // {{ auth.user()?.email }}
- *   // @if (auth.hasPermission('templates:edit')) { ... }
+ * @if (usersController.hasMore()) {
+ *   <ion-button (click)="usersController.loadNext()">Cargar mas</ion-button>
  * }
- * ```
  */
-// Tipos
+class PaginationService {
+    /**
+     * Crea un controlador de paginacion para una fuente de datos.
+     *
+     * @param config Configuracion del controlador
+     * @returns Controlador de paginacion
+     */
+    createController(config) {
+        return new PaginationControllerImpl(config);
+    }
+    /**
+     * Crea un controlador simple para arrays estaticos con paginacion local.
+     *
+     * @param items Array completo de items
+     * @param pageSize Tamano de pagina
+     * @returns Controlador de paginacion
+     */
+    createLocalController(items, pageSize = 20) {
+        let currentIndex = 0;
+        return this.createController({
+            strategy: 'offset',
+            pageSize,
+            loadFn: async (params) => {
+                const start = params.page * params.pageSize;
+                const end = start + params.pageSize;
+                const pageItems = items.slice(start, end);
+                return {
+                    items: pageItems,
+                    hasMore: end < items.length,
+                    total: items.length,
+                };
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PaginationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PaginationService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PaginationService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+// Types
 
 /**
  * Ads Loader Service
@@ -29584,5 +32101,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AD_SIZE_MAP, ARTICLE_SPACING, AccordionComponent, ActionHeaderComponent, ActionType, AdSlotComponent, 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_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_DEFAULT_CONTENT, 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 };
+export { AD_SIZE_MAP, ARTICLE_SPACING, AccordionComponent, ActionHeaderComponent, ActionType, AdSlotComponent, 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_INFINITE_LIST_METADATA, 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_REFRESHER_METADATA, DEFAULT_SKELETON_CONFIG, DEFAULT_STATUS_COLORS, DEFAULT_STATUS_LABELS, DEFAULT_WINNER_LABELS, DataTableComponent, DateInputComponent, DateRangeInputComponent, DetailSkeletonComponent, DeviceService, DisplayComponent, DividerComponent, DownloadService, EmailInputComponent, ExpandableTextComponent, FabComponent, FileInputComponent, FirebaseService, FirestoreCollectionFactory, FirestoreService, FooterComponent, FooterLinksComponent, FormComponent, FormFooterComponent, FormSkeletonComponent, FunHeaderComponent, GlowCardComponent, GridSkeletonComponent, HeaderComponent, HintComponent, HorizontalScrollComponent, HourInputComponent, HrefComponent, I18nService, INITIAL_AUTH_STATE, INITIAL_MFA_STATE, Icon, IconComponent, IconService, ImageComponent, InAppBrowserService, InfiniteListComponent, InfoComponent, InputType, ItemListComponent, LANG_STORAGE_KEY$1 as LANG_STORAGE_KEY, LanguageSelectorComponent, LayeredCardComponent, LayoutComponent, LinkComponent, LinkProcessorService, LinksAccordionComponent, LinksCakeComponent, ListSkeletonComponent, LoadingDirective, 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, PaginationService, 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, ProfileSkeletonComponent, ProgressBarComponent, ProgressRingComponent, ProgressStatusComponent, PrompterComponent, QR_PRESETS, QrCodeComponent, QrGeneratorService, QueryBuilder, QuoteBoxComponent, RadioInputComponent, RaffleStatusCardComponent, RangeInputComponent, RatingComponent, RecapCardComponent, RefresherComponent, 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, SkeletonService, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, StatsCardComponent, StepperComponent, StorageService, SwipeCarouselComponent, TabbedContentComponent, TableSkeletonComponent, 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_DEFAULT_CONTENT, VALTECH_FIREBASE_CONFIG, WinnerDisplayComponent, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, authGuard, authInterceptor, buildPath, collections, createFirebaseConfig, createGlowCardProps, createInitialPaginationState, createNumberFromToField, createTitleProps, extractPathParams, getCollectionPath, getDocumentId, goToTop, guestGuard, hasEmulators, isAtEnd, isCollectionPath, isDocumentPath, isEmulatorMode, isValidPath, joinPath, maxLength, permissionGuard, permissionGuardFromRoute, provideValtechAds, provideValtechAuth, provideValtechAuthInterceptor, provideValtechFirebase, provideValtechI18n, provideValtechPresets, provideValtechSkeleton, query, replaceSpecialChars, resolveColor, resolveInputDefaultValue, roleGuard, storagePaths, superAdminGuard };
 //# sourceMappingURL=valtech-components.mjs.map