valtech-components 2.0.595 → 2.0.596

package/fesm2022/valtech-components.mjs

@@ -5,14 +5,14 @@ import { IonAvatar, IonCard, IonIcon, IonButton, IonSpinner, IonText, IonModal,
 import * as i1 from '@angular/common';
 import { CommonModule, NgStyle, NgFor, NgClass, isPlatformBrowser } from '@angular/common';
 import { addIcons } from 'ionicons';
-import { addOutline, addCircleOutline, alertOutline, alertCircleOutline, arrowBackOutline, arrowForwardOutline, arrowDownOutline, settingsOutline, checkmarkCircleOutline, ellipsisHorizontalOutline, notificationsOutline, openOutline, closeOutline, chatbubblesOutline, shareOutline, heart, heartOutline, homeOutline, eyeOffOutline, eyeOutline, scanOutline, chevronDownOutline, chevronForwardOutline, checkmarkOutline, clipboardOutline, copyOutline, filterOutline, locationOutline, calendarOutline, businessOutline, logoTwitter, logoInstagram, logoLinkedin, logoYoutube, logoTiktok, logoFacebook, logoGoogle, createOutline, trashOutline, playOutline, refreshOutline, documentTextOutline, lockClosedOutline, informationCircleOutline, logoNpm, removeOutline, add, close, share, create, trash, star, camera, mic, send, downloadOutline, chevronDown, language, globeOutline, checkmark, list, grid, apps, menu, settings, home, search, person, helpCircle, informationCircle, documentText, notifications, mail, calendar, folder, chevronForward, ellipsisHorizontal, chevronBack, playBack, playForward, ellipse, starOutline, starHalf, heartHalf, checkmarkCircle, timeOutline, flag, trendingUp, trendingDown, remove, analytics, people, cash, cart, eye, chatbubbleOutline, thumbsUpOutline, thumbsUp, happyOutline, happy, sadOutline, sad, chevronUp, pin, pencil, callOutline, shuffleOutline, logoWhatsapp, paperPlaneOutline, mailOutline, trophyOutline, ticketOutline, giftOutline, personOutline, ellipsisVertical, closeCircle, chevronBackOutline, sendOutline, chatbubbleEllipsesOutline, swapVerticalOutline, chevronUpOutline, documentOutline, menuOutline, searchOutline } from 'ionicons/icons';
+import { addOutline, addCircleOutline, alertOutline, alertCircleOutline, arrowBackOutline, arrowForwardOutline, arrowDownOutline, settingsOutline, checkmarkCircleOutline, ellipsisHorizontalOutline, notificationsOutline, openOutline, closeOutline, chatbubblesOutline, shareOutline, heart, heartOutline, homeOutline, eyeOffOutline, eyeOutline, scanOutline, chevronDownOutline, chevronForwardOutline, checkmarkOutline, clipboardOutline, copyOutline, filterOutline, locationOutline, calendarOutline, businessOutline, logoTwitter, logoInstagram, logoLinkedin, logoYoutube, logoTiktok, logoFacebook, logoGoogle, createOutline, trashOutline, playOutline, refreshOutline, documentTextOutline, lockClosedOutline, informationCircleOutline, logoNpm, removeOutline, add, close, share, create, trash, star, camera, mic, send, downloadOutline, chevronDown, language, globeOutline, checkmark, list, grid, apps, menu, settings, home, search, person, helpCircle, informationCircle, documentText, notifications, mail, calendar, folder, chevronForward, ellipsisHorizontal, chevronBack, playBack, playForward, ellipse, starOutline, starHalf, heartHalf, checkmarkCircle, timeOutline, flag, trendingUp, trendingDown, remove, analytics, people, cash, cart, eye, chatbubbleOutline, thumbsUpOutline, thumbsUp, happyOutline, happy, sadOutline, sad, chevronUp, pin, pencil, callOutline, shuffleOutline, logoWhatsapp, paperPlaneOutline, mailOutline, trophyOutline, ticketOutline, giftOutline, personOutline, ellipsisVertical, closeCircle, chevronBackOutline, sendOutline, chatbubbleEllipsesOutline, swapVerticalOutline, chevronUpOutline, documentOutline, bugOutline, bulbOutline, closeCircleOutline, menuOutline, searchOutline } from 'ionicons/icons';
 import * as i1$1 from '@angular/router';
 import { RouterLink, Router, NavigationEnd, RouterOutlet } from '@angular/router';
 import { Browser } from '@capacitor/browser';
 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 { ReactiveFormsModule, FormsModule, FormControl, Validators, FormBuilder } from '@angular/forms';
 import { BehaviorSubject, isObservable, firstValueFrom, Subject, map, distinctUntilChanged, of, Observable, throwError, from, filter as filter$1 } from 'rxjs';
 import * as i1$4 from 'ng-otp-input';
 import { NgOtpInputComponent, NgOtpInputModule } from 'ng-otp-input';
@@ -28,7 +28,7 @@ import 'prismjs/components/prism-bash';
 import Swiper from 'swiper';
 import { Navigation, Pagination, EffectFade, EffectCube, EffectCoverflow, EffectFlip, Autoplay } from 'swiper/modules';
 import * as i1$8 from '@angular/common/http';
-import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import { provideHttpClient, withInterceptors, HttpClient } from '@angular/common/http';
 import { filter, map as map$1, catchError, tap, switchMap, finalize, take, debounceTime, takeUntil } from 'rxjs/operators';
 import { Analytics, logEvent, setUserId, setUserProperties, provideAnalytics, getAnalytics } from '@angular/fire/analytics';
 import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
@@ -34761,6 +34761,872 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Token de inyección para la configuración de Feedback.
+ */
+const VALTECH_FEEDBACK_CONFIG = new InjectionToken('ValtechFeedbackConfig');
+/**
+ * Configuración por defecto.
+ */
+const DEFAULT_FEEDBACK_CONFIG = {
+    feedbackPrefix: '/v1/feedback',
+    maxAttachments: 5,
+    maxFileSize: 10 * 1024 * 1024, // 10MB
+    allowedFileTypes: ['image/*', 'video/*', 'application/pdf'],
+    storagePath: 'feedback',
+};
+/**
+ * Provee el servicio de feedback a la aplicación Angular.
+ *
+ * @param config - Configuración de feedback
+ * @returns EnvironmentProviders para usar en bootstrapApplication
+ *
+ * @example
+ * ```typescript
+ * // main.ts
+ * import { bootstrapApplication } from '@angular/platform-browser';
+ * import { provideValtechFeedback } from 'valtech-components';
+ * import { environment } from './environments/environment';
+ *
+ * bootstrapApplication(AppComponent, {
+ *   providers: [
+ *     provideValtechAuth({ apiUrl: environment.apiUrl }),
+ *     provideValtechFeedback({
+ *       apiUrl: environment.apiUrl,
+ *       appId: 'my-app-name',
+ *     }),
+ *   ],
+ * });
+ * ```
+ */
+function provideValtechFeedback(config) {
+    const mergedConfig = {
+        ...DEFAULT_FEEDBACK_CONFIG,
+        ...config,
+    };
+    return makeEnvironmentProviders([
+        { provide: VALTECH_FEEDBACK_CONFIG, useValue: mergedConfig },
+    ]);
+}
+
+/**
+ * Servicio para gestionar feedback de usuarios.
+ *
+ * @example
+ * ```typescript
+ * @Component({...})
+ * export class MyComponent {
+ *   private feedbackService = inject(FeedbackService);
+ *
+ *   async submitFeedback() {
+ *     const response = await this.feedbackService.createAsync(
+ *       'feedback',
+ *       'Mi comentario',
+ *       'Descripción detallada...'
+ *     );
+ *     console.log('Feedback enviado:', response.feedbackId);
+ *   }
+ * }
+ * ```
+ */
+class FeedbackService {
+    constructor() {
+        this.config = inject(VALTECH_FEEDBACK_CONFIG);
+        this.http = inject(HttpClient);
+    }
+    /**
+     * URL base para endpoints de feedback.
+     */
+    get baseUrl() {
+        return `${this.config.apiUrl}${this.config.feedbackPrefix}`;
+    }
+    /**
+     * Captura el contexto del dispositivo automáticamente.
+     */
+    captureDeviceContext() {
+        const ua = navigator.userAgent;
+        return {
+            browser: this.detectBrowser(ua),
+            os: this.detectOS(ua),
+            viewport: `${window.innerWidth}x${window.innerHeight}`,
+            language: navigator.language,
+            userAgent: ua,
+            pageUrl: window.location.href,
+        };
+    }
+    /**
+     * Crea un nuevo feedback.
+     *
+     * @param type - Tipo de feedback
+     * @param title - Título del feedback
+     * @param description - Descripción detallada
+     * @param attachments - URLs de archivos adjuntos (opcional)
+     * @param contentRef - Referencia a contenido específico (opcional)
+     * @returns Observable con la respuesta
+     */
+    create(type, title, description, attachments = [], contentRef) {
+        const request = {
+            type,
+            title,
+            description,
+            attachments,
+            contentRef,
+            deviceContext: this.captureDeviceContext(),
+            appId: this.config.appId,
+        };
+        return this.http.post(this.baseUrl, request);
+    }
+    /**
+     * Crea un nuevo feedback (versión async/await).
+     */
+    async createAsync(type, title, description, attachments = [], contentRef) {
+        return firstValueFrom(this.create(type, title, description, attachments, contentRef));
+    }
+    /**
+     * Obtiene un feedback por ID (solo el propietario).
+     *
+     * @param feedbackId - ID del feedback
+     * @returns Observable con la respuesta
+     */
+    getById(feedbackId) {
+        return this.http.get(`${this.baseUrl}/${feedbackId}`);
+    }
+    /**
+     * Obtiene un feedback por ID (versión async/await).
+     */
+    async getByIdAsync(feedbackId) {
+        return firstValueFrom(this.getById(feedbackId));
+    }
+    /**
+     * Valida si un archivo cumple con las restricciones.
+     */
+    validateFile(file) {
+        // Verificar tamaño
+        if (file.size > this.config.maxFileSize) {
+            const maxSizeMB = Math.round(this.config.maxFileSize / (1024 * 1024));
+            return {
+                valid: false,
+                error: `El archivo excede el tamaño máximo de ${maxSizeMB}MB`,
+            };
+        }
+        // Verificar tipo
+        const allowedTypes = this.config.allowedFileTypes || [];
+        const isAllowed = allowedTypes.some((pattern) => {
+            if (pattern.endsWith('/*')) {
+                const baseType = pattern.replace('/*', '');
+                return file.type.startsWith(baseType);
+            }
+            return file.type === pattern;
+        });
+        if (!isAllowed) {
+            return {
+                valid: false,
+                error: 'Tipo de archivo no permitido',
+            };
+        }
+        return { valid: true };
+    }
+    /**
+     * Obtiene la configuración actual del servicio.
+     */
+    getConfig() {
+        return this.config;
+    }
+    // =========================================================================
+    // Reaction Methods (Content feedback with emojis)
+    // =========================================================================
+    /**
+     * Verifica si el usuario ya dio feedback para una entidad específica.
+     *
+     * @param entityType - Tipo de entidad (article, docs, feature, etc.)
+     * @param entityId - ID de la entidad
+     * @returns Promise con la respuesta de verificación
+     *
+     * @example
+     * ```typescript
+     * const check = await this.feedbackService.checkFeedback('article', 'art-123');
+     * if (check.hasFeedback) {
+     *   console.log('Ya dio feedback:', check.reactionValue);
+     * }
+     * ```
+     */
+    async checkFeedback(entityType, entityId) {
+        const params = new URLSearchParams({
+            appId: this.config.appId,
+            entityType,
+            entityId,
+        });
+        return firstValueFrom(this.http.get(`${this.baseUrl}/check?${params}`));
+    }
+    /**
+     * Crea o actualiza una reacción (feedback con emoji).
+     *
+     * @param entityRef - Referencia a la entidad
+     * @param value - Valor de la reacción (negative, neutral, positive)
+     * @param comment - Comentario opcional (máx 500 caracteres)
+     * @returns Promise con la respuesta
+     *
+     * @example
+     * ```typescript
+     * const response = await this.feedbackService.createReaction(
+     *   { entityType: 'article', entityId: 'art-123' },
+     *   'positive',
+     *   'Muy útil!'
+     * );
+     * ```
+     */
+    async createReaction(entityRef, value, comment) {
+        const request = {
+            type: 'reaction',
+            entityRef,
+            reactionValue: value,
+            description: comment || '',
+            deviceContext: this.captureDeviceContext(),
+            appId: this.config.appId,
+        };
+        return firstValueFrom(this.http.post(this.baseUrl, request));
+    }
+    // =========================================================================
+    // Helpers privados para detección de browser/OS
+    // =========================================================================
+    detectBrowser(ua) {
+        if (ua.includes('Edg/'))
+            return 'Edge';
+        if (ua.includes('Chrome/'))
+            return 'Chrome';
+        if (ua.includes('Firefox/'))
+            return 'Firefox';
+        if (ua.includes('Safari/') && !ua.includes('Chrome'))
+            return 'Safari';
+        if (ua.includes('Opera') || ua.includes('OPR/'))
+            return 'Opera';
+        return 'Unknown';
+    }
+    detectOS(ua) {
+        if (ua.includes('Windows NT 10'))
+            return 'Windows 10';
+        if (ua.includes('Windows NT 11'))
+            return 'Windows 11';
+        if (ua.includes('Windows'))
+            return 'Windows';
+        if (ua.includes('Mac OS X')) {
+            const match = ua.match(/Mac OS X (\d+[._]\d+)/);
+            if (match) {
+                return `macOS ${match[1].replace('_', '.')}`;
+            }
+            return 'macOS';
+        }
+        if (ua.includes('Android'))
+            return 'Android';
+        if (ua.includes('iPhone') || ua.includes('iPad'))
+            return 'iOS';
+        if (ua.includes('Linux'))
+            return 'Linux';
+        return 'Unknown';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FeedbackService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FeedbackService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FeedbackService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Configuración por defecto de tipos de feedback.
+ */
+const DEFAULT_FEEDBACK_TYPE_OPTIONS = [
+    {
+        value: 'issue',
+        label: 'Reportar problema',
+        description: 'Algo no funciona correctamente',
+        icon: 'bug-outline',
+    },
+    {
+        value: 'poor-content',
+        label: 'Contenido incorrecto',
+        description: 'Información incorrecta o desactualizada',
+        icon: 'document-text-outline',
+    },
+    {
+        value: 'feedback',
+        label: 'Comentario general',
+        description: 'Tu opinión o experiencia',
+        icon: 'chatbubble-outline',
+    },
+    {
+        value: 'suggestion',
+        label: 'Sugerencia',
+        description: 'Propuesta de mejora o nueva funcionalidad',
+        icon: 'bulb-outline',
+    },
+];
+
+/**
+ * Valtech Feedback Service
+ *
+ * Servicio para gestionar feedback de usuarios a nivel de plataforma.
+ *
+ * @example
+ * ```typescript
+ * // main.ts - Configuración
+ * import { provideValtechFeedback } from 'valtech-components';
+ *
+ * bootstrapApplication(AppComponent, {
+ *   providers: [
+ *     provideValtechAuth({ apiUrl: environment.apiUrl }),
+ *     provideValtechFeedback({
+ *       apiUrl: environment.apiUrl,
+ *       appId: 'my-app-name',
+ *     }),
+ *   ],
+ * });
+ *
+ * // component.ts - Uso
+ * import { FeedbackService } from 'valtech-components';
+ *
+ * @Component({...})
+ * export class MyComponent {
+ *   private feedbackService = inject(FeedbackService);
+ *
+ *   async submitFeedback() {
+ *     const response = await this.feedbackService.createAsync(
+ *       'feedback',
+ *       'Título',
+ *       'Descripción...'
+ *     );
+ *   }
+ * }
+ * ```
+ */
+// Configuration
+
+/**
+ * val-feedback-form
+ *
+ * Formulario reutilizable para enviar feedback desde cualquier parte de la aplicación.
+ *
+ * @example
+ * ```html
+ * <!-- Feedback general -->
+ * <val-feedback-form
+ *   [props]="{ defaultType: 'feedback', showTypeSelector: true }"
+ *   (onSubmit)="handleSuccess($event)"
+ *   (onCancel)="closeModal()"
+ * />
+ *
+ * <!-- Reportar contenido incorrecto -->
+ * <val-feedback-form
+ *   [props]="{
+ *     defaultType: 'poor-content',
+ *     showTypeSelector: false,
+ *     contentRef: { contentId: article.id, contentType: 'article' },
+ *     submitButtonText: 'Reportar contenido'
+ *   }"
+ * />
+ * ```
+ */
+class FeedbackFormComponent {
+    constructor() {
+        /**
+         * Configuración del formulario.
+         */
+        this.props = {};
+        /**
+         * Evento emitido cuando el feedback se envía exitosamente.
+         */
+        this.onSubmit = new EventEmitter();
+        /**
+         * Evento emitido cuando el usuario cancela.
+         */
+        this.onCancel = new EventEmitter();
+        this.fb = inject(FormBuilder);
+        this.feedbackService = inject(FeedbackService);
+        this.i18n = inject(I18nService);
+        this.typeOptions = DEFAULT_FEEDBACK_TYPE_OPTIONS;
+        this.isSubmitting = signal(false);
+        this.isSuccess = signal(false);
+        this.error = signal(null);
+        addIcons({
+            bugOutline,
+            bulbOutline,
+            chatbubbleOutline,
+            checkmarkCircleOutline,
+            closeCircleOutline,
+            documentTextOutline,
+        });
+    }
+    ngOnInit() {
+        // Filtrar tipos habilitados si se especifica
+        if (this.props.enabledTypes?.length) {
+            this.typeOptions = this.typeOptions.filter((opt) => this.props.enabledTypes.includes(opt.value));
+        }
+        // Usar opciones personalizadas si se proporcionan
+        if (this.props.typeOptions?.length) {
+            this.typeOptions = this.props.typeOptions;
+        }
+        // Inicializar formulario
+        this.form = this.fb.group({
+            type: [this.props.defaultType || 'feedback', Validators.required],
+            title: [
+                '',
+                [Validators.required, Validators.minLength(5), Validators.maxLength(200)],
+            ],
+            description: [
+                '',
+                [Validators.required, Validators.minLength(10), Validators.maxLength(5000)],
+            ],
+        });
+    }
+    async handleSubmit() {
+        if (this.form.invalid || this.isSubmitting())
+            return;
+        this.isSubmitting.set(true);
+        this.error.set(null);
+        this.isSuccess.set(false);
+        try {
+            const { type, title, description } = this.form.value;
+            const response = await this.feedbackService.createAsync(type, title, description, [], // attachments (por ahora vacío)
+            this.props.contentRef);
+            this.isSuccess.set(true);
+            this.form.reset({ type: this.props.defaultType || 'feedback' });
+            this.onSubmit.emit({
+                response,
+                type: type,
+                title,
+            });
+        }
+        catch (err) {
+            this.error.set(err.error?.message || err.message || this.i18n.t('feedbackError'));
+        }
+        finally {
+            this.isSubmitting.set(false);
+        }
+    }
+    onCancelClick() {
+        this.onCancel.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FeedbackFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FeedbackFormComponent, isStandalone: true, selector: "val-feedback-form", inputs: { props: "props" }, outputs: { onSubmit: "onSubmit", onCancel: "onCancel" }, ngImport: i0, template: `
+    <form
+      [formGroup]="form"
+      (ngSubmit)="handleSubmit()"
+      class="feedback-form"
+      [class.compact]="props.compact"
+      [ngClass]="props.cssClass"
+    >
+      <!-- Type selector -->
+      @if (props.showTypeSelector !== false) {
+        <ion-item>
+          <ion-select
+            formControlName="type"
+            [label]="i18n.t('feedbackType')"
+            labelPlacement="floating"
+            interface="popover"
+          >
+            @for (option of typeOptions; track option.value) {
+              <ion-select-option [value]="option.value">
+                {{ option.label }}
+              </ion-select-option>
+            }
+          </ion-select>
+        </ion-item>
+      }
+
+      <!-- Title -->
+      <ion-item>
+        <ion-textarea
+          formControlName="title"
+          [label]="props.titleLabel || i18n.t('title')"
+          labelPlacement="floating"
+          [placeholder]="props.titlePlaceholder || i18n.t('titlePlaceholder')"
+          [maxlength]="200"
+          [counter]="true"
+          [autoGrow]="false"
+          rows="1"
+        ></ion-textarea>
+      </ion-item>
+      @if (form.get('title')?.invalid && form.get('title')?.touched) {
+        <ion-note color="danger" class="ion-padding-start">
+          {{ i18n.t('titleValidation') }}
+        </ion-note>
+      }
+
+      <!-- Description -->
+      <ion-item>
+        <ion-textarea
+          formControlName="description"
+          [label]="props.descriptionLabel || i18n.t('description')"
+          labelPlacement="floating"
+          [placeholder]="props.descriptionPlaceholder || i18n.t('descriptionPlaceholder')"
+          [maxlength]="5000"
+          [counter]="true"
+          [autoGrow]="true"
+          rows="4"
+        ></ion-textarea>
+      </ion-item>
+      @if (form.get('description')?.invalid && form.get('description')?.touched) {
+        <ion-note color="danger" class="ion-padding-start">
+          {{ i18n.t('descriptionValidation') }}
+        </ion-note>
+      }
+
+      <!-- Error message -->
+      @if (error()) {
+        <div class="feedback-alert error">
+          <ion-icon name="close-circle-outline"></ion-icon>
+          <span>{{ error() }}</span>
+        </div>
+      }
+
+      <!-- Success message -->
+      @if (isSuccess()) {
+        <div class="feedback-alert success">
+          <ion-icon name="checkmark-circle-outline"></ion-icon>
+          <span>{{ props.successMessage || i18n.t('feedbackSuccess') }}</span>
+        </div>
+      }
+
+      <!-- Actions -->
+      <div class="form-actions">
+        @if (props.cancelButtonText) {
+          <ion-button
+            fill="outline"
+            color="medium"
+            type="button"
+            (click)="onCancelClick()"
+          >
+            {{ props.cancelButtonText }}
+          </ion-button>
+        }
+        <ion-button
+          type="submit"
+          [disabled]="form.invalid || isSubmitting()"
+          expand="block"
+        >
+          @if (isSubmitting()) {
+            <ion-spinner name="crescent"></ion-spinner>
+          } @else {
+            {{ props.submitButtonText || i18n.t('submit') }}
+          }
+        </ion-button>
+      </div>
+    </form>
+  `, isInline: true, styles: [".feedback-form{display:flex;flex-direction:column;gap:8px;&.compact{gap:4px}}.form-actions{display:flex;gap:8px;margin-top:16px;justify-content:flex-end;ion-button{flex:1}}.feedback-alert{display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:8px;margin-top:8px;&.error{background-color:var(--ion-color-danger-tint);color:var(--ion-color-danger-shade)}&.success{background-color:var(--ion-color-success-tint);color:var(--ion-color-success-shade)}ion-icon{font-size:20px}}ion-note{font-size:12px;margin-top:-4px;margin-bottom:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FeedbackFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-feedback-form', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        IonButton,
+                        IonIcon,
+                        IonItem,
+                        IonLabel,
+                        IonList,
+                        IonNote,
+                        IonSelect,
+                        IonSelectOption,
+                        IonSpinner,
+                        IonText,
+                        IonTextarea,
+                    ], template: `
+    <form
+      [formGroup]="form"
+      (ngSubmit)="handleSubmit()"
+      class="feedback-form"
+      [class.compact]="props.compact"
+      [ngClass]="props.cssClass"
+    >
+      <!-- Type selector -->
+      @if (props.showTypeSelector !== false) {
+        <ion-item>
+          <ion-select
+            formControlName="type"
+            [label]="i18n.t('feedbackType')"
+            labelPlacement="floating"
+            interface="popover"
+          >
+            @for (option of typeOptions; track option.value) {
+              <ion-select-option [value]="option.value">
+                {{ option.label }}
+              </ion-select-option>
+            }
+          </ion-select>
+        </ion-item>
+      }
+
+      <!-- Title -->
+      <ion-item>
+        <ion-textarea
+          formControlName="title"
+          [label]="props.titleLabel || i18n.t('title')"
+          labelPlacement="floating"
+          [placeholder]="props.titlePlaceholder || i18n.t('titlePlaceholder')"
+          [maxlength]="200"
+          [counter]="true"
+          [autoGrow]="false"
+          rows="1"
+        ></ion-textarea>
+      </ion-item>
+      @if (form.get('title')?.invalid && form.get('title')?.touched) {
+        <ion-note color="danger" class="ion-padding-start">
+          {{ i18n.t('titleValidation') }}
+        </ion-note>
+      }
+
+      <!-- Description -->
+      <ion-item>
+        <ion-textarea
+          formControlName="description"
+          [label]="props.descriptionLabel || i18n.t('description')"
+          labelPlacement="floating"
+          [placeholder]="props.descriptionPlaceholder || i18n.t('descriptionPlaceholder')"
+          [maxlength]="5000"
+          [counter]="true"
+          [autoGrow]="true"
+          rows="4"
+        ></ion-textarea>
+      </ion-item>
+      @if (form.get('description')?.invalid && form.get('description')?.touched) {
+        <ion-note color="danger" class="ion-padding-start">
+          {{ i18n.t('descriptionValidation') }}
+        </ion-note>
+      }
+
+      <!-- Error message -->
+      @if (error()) {
+        <div class="feedback-alert error">
+          <ion-icon name="close-circle-outline"></ion-icon>
+          <span>{{ error() }}</span>
+        </div>
+      }
+
+      <!-- Success message -->
+      @if (isSuccess()) {
+        <div class="feedback-alert success">
+          <ion-icon name="checkmark-circle-outline"></ion-icon>
+          <span>{{ props.successMessage || i18n.t('feedbackSuccess') }}</span>
+        </div>
+      }
+
+      <!-- Actions -->
+      <div class="form-actions">
+        @if (props.cancelButtonText) {
+          <ion-button
+            fill="outline"
+            color="medium"
+            type="button"
+            (click)="onCancelClick()"
+          >
+            {{ props.cancelButtonText }}
+          </ion-button>
+        }
+        <ion-button
+          type="submit"
+          [disabled]="form.invalid || isSubmitting()"
+          expand="block"
+        >
+          @if (isSubmitting()) {
+            <ion-spinner name="crescent"></ion-spinner>
+          } @else {
+            {{ props.submitButtonText || i18n.t('submit') }}
+          }
+        </ion-button>
+      </div>
+    </form>
+  `, styles: [".feedback-form{display:flex;flex-direction:column;gap:8px;&.compact{gap:4px}}.form-actions{display:flex;gap:8px;margin-top:16px;justify-content:flex-end;ion-button{flex:1}}.feedback-alert{display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:8px;margin-top:8px;&.error{background-color:var(--ion-color-danger-tint);color:var(--ion-color-danger-shade)}&.success{background-color:var(--ion-color-success-tint);color:var(--ion-color-success-shade)}ion-icon{font-size:20px}}ion-note{font-size:12px;margin-top:-4px;margin-bottom:8px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }], onSubmit: [{
+                type: Output
+            }], onCancel: [{
+                type: Output
+            }] } });
+
+/**
+ * Componente para reacciones de contenido con emojis.
+ *
+ * @example
+ * ```html
+ * <val-content-reaction
+ *   [props]="{
+ *     entityRef: { entityType: 'article', entityId: 'art-123' },
+ *     question: '¿Te fue útil este artículo?'
+ *   }"
+ *   (reactionSubmit)="onReactionSubmit($event)"
+ * />
+ * ```
+ */
+class ContentReactionComponent {
+    constructor() {
+        this.feedbackService = inject(FeedbackService);
+        this.toast = inject(ToastService);
+        this.i18n = inject(I18nService);
+        this.props = {};
+        this.reactionSubmit = new EventEmitter();
+        this.reactionChange = new EventEmitter();
+        // Estado reactivo
+        this.state = signal({
+            selectedValue: null,
+            comment: '',
+            isLoading: false,
+            isSubmitted: false,
+            hadPreviousReaction: false,
+            error: null,
+        });
+        // Valores por defecto
+        this.defaultEmojis = ['😞', '😐', '😊'];
+        this.defaultLabels = [
+            'No me ayudó',
+            'Regular',
+            'Muy útil',
+        ];
+        this.reactionValues = ['negative', 'neutral', 'positive'];
+        // Computed properties
+        this.resolvedProps = computed(() => ({
+            entityRef: this.props.entityRef,
+            question: this.props.question || this.t('question'),
+            showComment: this.props.showComment ?? true,
+            commentPlaceholder: this.props.commentPlaceholder || this.t('commentPlaceholder'),
+            maxCommentLength: this.props.maxCommentLength ?? 500,
+            emojis: this.props.emojis || this.defaultEmojis,
+            emojiLabels: this.props.emojiLabels || this.defaultLabels,
+            showThankYou: this.props.showThankYou ?? true,
+            thankYouMessage: this.props.thankYouMessage || this.t('thankYou'),
+            disabled: this.props.disabled ?? false,
+            readonly: this.props.readonly ?? false,
+        }));
+        this.showCommentField = computed(() => this.state().selectedValue !== null && this.resolvedProps().showComment);
+        this.canSubmit = computed(() => this.state().selectedValue !== null && !this.state().isLoading);
+    }
+    ngOnInit() {
+        this.loadPreviousReaction();
+    }
+    ngOnChanges(changes) {
+        if (changes['props'] && !changes['props'].firstChange) {
+            this.loadPreviousReaction();
+        }
+    }
+    async loadPreviousReaction() {
+        if (!this.props.entityRef)
+            return;
+        this.state.update((s) => ({ ...s, isLoading: true, error: null }));
+        try {
+            const check = await this.feedbackService.checkFeedback(this.props.entityRef.entityType, this.props.entityRef.entityId);
+            if (check.hasFeedback && check.reactionValue) {
+                this.state.update((s) => ({
+                    ...s,
+                    selectedValue: check.reactionValue,
+                    hadPreviousReaction: true,
+                    isLoading: false,
+                    isSubmitted: true,
+                }));
+            }
+            else {
+                this.state.update((s) => ({ ...s, isLoading: false }));
+            }
+        }
+        catch (error) {
+            console.error('Error loading previous reaction:', error);
+            this.state.update((s) => ({ ...s, isLoading: false }));
+        }
+    }
+    selectReaction(value) {
+        if (this.resolvedProps().disabled || this.resolvedProps().readonly)
+            return;
+        const previousValue = this.state().selectedValue;
+        this.state.update((s) => ({
+            ...s,
+            selectedValue: value,
+            isSubmitted: false,
+            error: null,
+        }));
+        this.reactionChange.emit({ value, previousValue });
+    }
+    async submitReaction() {
+        const currentState = this.state();
+        const props = this.resolvedProps();
+        if (!currentState.selectedValue || props.disabled)
+            return;
+        this.state.update((s) => ({ ...s, isLoading: true, error: null }));
+        try {
+            await this.feedbackService.createReaction(props.entityRef, currentState.selectedValue, currentState.comment || undefined);
+            this.state.update((s) => ({
+                ...s,
+                isLoading: false,
+                isSubmitted: true,
+                hadPreviousReaction: true,
+            }));
+            this.reactionSubmit.emit({
+                value: currentState.selectedValue,
+                comment: currentState.comment || undefined,
+                entityRef: props.entityRef,
+                isUpdate: currentState.hadPreviousReaction,
+            });
+            if (props.showThankYou) {
+                this.toast.show({
+                    message: props.thankYouMessage,
+                    duration: 2000,
+                    position: 'bottom',
+                    color: 'success',
+                });
+            }
+        }
+        catch (error) {
+            console.error('Error submitting reaction:', error);
+            this.state.update((s) => ({
+                ...s,
+                isLoading: false,
+                error: this.t('errorSubmitting'),
+            }));
+            this.toast.show({
+                message: this.t('errorSubmitting'),
+                duration: 3000,
+                position: 'bottom',
+                color: 'danger',
+            });
+        }
+    }
+    updateComment(event) {
+        const value = event.detail.value || '';
+        this.state.update((s) => ({ ...s, comment: value }));
+    }
+    getEmoji(index) {
+        return this.resolvedProps().emojis[index];
+    }
+    getEmojiLabel(index) {
+        return this.resolvedProps().emojiLabels[index];
+    }
+    isSelected(value) {
+        return this.state().selectedValue === value;
+    }
+    t(key) {
+        const translations = {
+            question: '¿Te resultó útil este contenido?',
+            commentPlaceholder: 'Cuéntanos más (opcional)...',
+            submit: 'Enviar opinión',
+            update: 'Actualizar opinión',
+            thankYou: '¡Gracias por tu opinión!',
+            submitted: 'Tu opinión ha sido registrada',
+            errorSubmitting: 'Error al enviar. Intenta de nuevo.',
+        };
+        return this.i18n.t(key, 'ContentReaction') || translations[key] || key;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ContentReactionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ContentReactionComponent, isStandalone: true, selector: "val-content-reaction", inputs: { props: "props" }, outputs: { reactionSubmit: "reactionSubmit", reactionChange: "reactionChange" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"content-reaction\"\n  [class.disabled]=\"resolvedProps().disabled\"\n  [class.readonly]=\"resolvedProps().readonly\"\n>\n  <!-- Loading inicial -->\n  @if (state().isLoading && !state().selectedValue) {\n    <div class=\"loading-container\">\n      <ion-spinner name=\"crescent\"></ion-spinner>\n    </div>\n  } @else {\n    <!-- Pregunta -->\n    <p class=\"question\">{{ resolvedProps().question }}</p>\n\n    <!-- Emojis -->\n    <div class=\"emoji-container\">\n      @for (value of reactionValues; track value; let i = $index) {\n        <button\n          type=\"button\"\n          class=\"emoji-button\"\n          [class.selected]=\"isSelected(value)\"\n          [class.negative]=\"value === 'negative' && isSelected(value)\"\n          [class.neutral]=\"value === 'neutral' && isSelected(value)\"\n          [class.positive]=\"value === 'positive' && isSelected(value)\"\n          [attr.aria-label]=\"getEmojiLabel(i)\"\n          [attr.aria-pressed]=\"isSelected(value)\"\n          [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n          (click)=\"selectReaction(value)\"\n        >\n          <span class=\"emoji\">{{ getEmoji(i) }}</span>\n        </button>\n      }\n    </div>\n\n    <!-- Campo de comentario (solo si hay selecci\u00F3n) -->\n    @if (showCommentField()) {\n      <div class=\"comment-section\">\n        <ion-textarea\n          [value]=\"state().comment\"\n          [placeholder]=\"resolvedProps().commentPlaceholder\"\n          [maxlength]=\"resolvedProps().maxCommentLength\"\n          [disabled]=\"resolvedProps().disabled\"\n          [rows]=\"3\"\n          class=\"comment-textarea\"\n          (ionInput)=\"updateComment($event)\"\n        ></ion-textarea>\n        <span class=\"char-count\">\n          {{ state().comment.length }}/{{ resolvedProps().maxCommentLength }}\n        </span>\n      </div>\n    }\n\n    <!-- Bot\u00F3n de env\u00EDo -->\n    @if (state().selectedValue && !state().isSubmitted) {\n      <ion-button\n        expand=\"block\"\n        [disabled]=\"!canSubmit()\"\n        (click)=\"submitReaction()\"\n        class=\"submit-button\"\n      >\n        @if (state().isLoading) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n        } @else {\n          {{ state().hadPreviousReaction ? t('update') : t('submit') }}\n        }\n      </ion-button>\n    }\n\n    <!-- Mensaje de confirmaci\u00F3n -->\n    @if (state().isSubmitted) {\n      <p class=\"submitted-message\">\n        {{ t('submitted') }}\n      </p>\n    }\n\n    <!-- Error -->\n    @if (state().error) {\n      <p class=\"error-message\">{{ state().error }}</p>\n    }\n  }\n</div>\n", styles: [":host{display:block}.content-reaction{padding:16px;text-align:center}.content-reaction.disabled{opacity:.6;pointer-events:none}.content-reaction.readonly{pointer-events:none}.question{font-size:16px;font-weight:500;color:var(--ion-color-dark);margin:0 0 16px}.emoji-container{display:flex;justify-content:center;gap:24px;margin-bottom:20px}.emoji-button{background:transparent;border:2px solid var(--ion-color-light-shade);border-radius:50%;width:64px;height:64px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;padding:0}.emoji-button .emoji{font-size:32px;transition:transform .3s cubic-bezier(.4,0,.2,1);line-height:1}.emoji-button:hover:not(:disabled){transform:scale(1.1);border-color:var(--ion-color-medium)}.emoji-button:focus{outline:2px solid var(--ion-color-primary);outline-offset:2px}.emoji-button.selected{transform:scale(1.2)}.emoji-button.selected .emoji{transform:scale(1.1)}.emoji-button.selected.negative{border-color:var(--ion-color-danger);background:var(--ion-color-danger-tint);box-shadow:0 4px 12px rgba(var(--ion-color-danger-rgb),.3)}.emoji-button.selected.neutral{border-color:var(--ion-color-warning);background:var(--ion-color-warning-tint);box-shadow:0 4px 12px rgba(var(--ion-color-warning-rgb),.3)}.emoji-button.selected.positive{border-color:var(--ion-color-success);background:var(--ion-color-success-tint);box-shadow:0 4px 12px rgba(var(--ion-color-success-rgb),.3)}.emoji-button:disabled{cursor:not-allowed;opacity:.5}.comment-section{margin-top:16px;animation:slideIn .3s ease-out}.comment-section .comment-textarea{--background: var(--ion-color-light);--border-radius: 8px;--padding-start: 12px;--padding-end: 12px;width:100%}.comment-section .char-count{display:block;text-align:right;font-size:12px;color:var(--ion-color-medium);margin-top:4px}.submit-button{margin-top:16px;--border-radius: 8px}.submitted-message{margin-top:16px;color:var(--ion-color-success);font-weight:500;animation:fadeIn .3s ease-out}.error-message{margin-top:8px;color:var(--ion-color-danger);font-size:14px}.loading-container{display:flex;justify-content:center;padding:20px}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { 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: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ContentReactionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-content-reaction', standalone: true, imports: [CommonModule, FormsModule, IonButton, IonSpinner, IonTextarea], template: "<div\n  class=\"content-reaction\"\n  [class.disabled]=\"resolvedProps().disabled\"\n  [class.readonly]=\"resolvedProps().readonly\"\n>\n  <!-- Loading inicial -->\n  @if (state().isLoading && !state().selectedValue) {\n    <div class=\"loading-container\">\n      <ion-spinner name=\"crescent\"></ion-spinner>\n    </div>\n  } @else {\n    <!-- Pregunta -->\n    <p class=\"question\">{{ resolvedProps().question }}</p>\n\n    <!-- Emojis -->\n    <div class=\"emoji-container\">\n      @for (value of reactionValues; track value; let i = $index) {\n        <button\n          type=\"button\"\n          class=\"emoji-button\"\n          [class.selected]=\"isSelected(value)\"\n          [class.negative]=\"value === 'negative' && isSelected(value)\"\n          [class.neutral]=\"value === 'neutral' && isSelected(value)\"\n          [class.positive]=\"value === 'positive' && isSelected(value)\"\n          [attr.aria-label]=\"getEmojiLabel(i)\"\n          [attr.aria-pressed]=\"isSelected(value)\"\n          [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n          (click)=\"selectReaction(value)\"\n        >\n          <span class=\"emoji\">{{ getEmoji(i) }}</span>\n        </button>\n      }\n    </div>\n\n    <!-- Campo de comentario (solo si hay selecci\u00F3n) -->\n    @if (showCommentField()) {\n      <div class=\"comment-section\">\n        <ion-textarea\n          [value]=\"state().comment\"\n          [placeholder]=\"resolvedProps().commentPlaceholder\"\n          [maxlength]=\"resolvedProps().maxCommentLength\"\n          [disabled]=\"resolvedProps().disabled\"\n          [rows]=\"3\"\n          class=\"comment-textarea\"\n          (ionInput)=\"updateComment($event)\"\n        ></ion-textarea>\n        <span class=\"char-count\">\n          {{ state().comment.length }}/{{ resolvedProps().maxCommentLength }}\n        </span>\n      </div>\n    }\n\n    <!-- Bot\u00F3n de env\u00EDo -->\n    @if (state().selectedValue && !state().isSubmitted) {\n      <ion-button\n        expand=\"block\"\n        [disabled]=\"!canSubmit()\"\n        (click)=\"submitReaction()\"\n        class=\"submit-button\"\n      >\n        @if (state().isLoading) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n        } @else {\n          {{ state().hadPreviousReaction ? t('update') : t('submit') }}\n        }\n      </ion-button>\n    }\n\n    <!-- Mensaje de confirmaci\u00F3n -->\n    @if (state().isSubmitted) {\n      <p class=\"submitted-message\">\n        {{ t('submitted') }}\n      </p>\n    }\n\n    <!-- Error -->\n    @if (state().error) {\n      <p class=\"error-message\">{{ state().error }}</p>\n    }\n  }\n</div>\n", styles: [":host{display:block}.content-reaction{padding:16px;text-align:center}.content-reaction.disabled{opacity:.6;pointer-events:none}.content-reaction.readonly{pointer-events:none}.question{font-size:16px;font-weight:500;color:var(--ion-color-dark);margin:0 0 16px}.emoji-container{display:flex;justify-content:center;gap:24px;margin-bottom:20px}.emoji-button{background:transparent;border:2px solid var(--ion-color-light-shade);border-radius:50%;width:64px;height:64px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;padding:0}.emoji-button .emoji{font-size:32px;transition:transform .3s cubic-bezier(.4,0,.2,1);line-height:1}.emoji-button:hover:not(:disabled){transform:scale(1.1);border-color:var(--ion-color-medium)}.emoji-button:focus{outline:2px solid var(--ion-color-primary);outline-offset:2px}.emoji-button.selected{transform:scale(1.2)}.emoji-button.selected .emoji{transform:scale(1.1)}.emoji-button.selected.negative{border-color:var(--ion-color-danger);background:var(--ion-color-danger-tint);box-shadow:0 4px 12px rgba(var(--ion-color-danger-rgb),.3)}.emoji-button.selected.neutral{border-color:var(--ion-color-warning);background:var(--ion-color-warning-tint);box-shadow:0 4px 12px rgba(var(--ion-color-warning-rgb),.3)}.emoji-button.selected.positive{border-color:var(--ion-color-success);background:var(--ion-color-success-tint);box-shadow:0 4px 12px rgba(var(--ion-color-success-rgb),.3)}.emoji-button:disabled{cursor:not-allowed;opacity:.5}.comment-section{margin-top:16px;animation:slideIn .3s ease-out}.comment-section .comment-textarea{--background: var(--ion-color-light);--border-radius: 8px;--padding-start: 12px;--padding-end: 12px;width:100%}.comment-section .char-count{display:block;text-align:right;font-size:12px;color:var(--ion-color-medium);margin-top:4px}.submit-button{margin-top:16px;--border-radius: 8px}.submitted-message{margin-top:16px;color:var(--ion-color-success);font-weight:500;animation:fadeIn .3s ease-out}.error-message{margin-top:8px;color:var(--ion-color-danger);font-size:14px}.loading-container{display:flex;justify-content:center;padding:20px}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
+        }], propDecorators: { props: [{
+                type: Input
+            }], reactionSubmit: [{
+                type: Output
+            }], reactionChange: [{
+                type: Output
+            }] } });
+
 addIcons({ menuOutline, closeOutline });
 /**
  * val-docs-layout
@@ -36718,6 +37584,271 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
   `, styles: [".docs-callout{--callout-bg: #fffbeb;--callout-border: #f59e0b;--callout-title: #92400e;--callout-text: #78350f;margin:1.5rem 0;padding:1rem 1.25rem;border-left:4px solid var(--callout-border);border-radius:0 8px 8px 0;background:var(--callout-bg)}.docs-callout__title{font-size:.9375rem;font-weight:700;color:var(--callout-title);margin-bottom:.5rem}.docs-callout__content{font-size:.9375rem;line-height:1.7;color:var(--callout-text)}.docs-callout__content p{margin:0}.docs-callout__content p+p{margin-top:.75rem}.docs-callout__content code{font-family:SF Mono,Fira Code,Monaco,Consolas,monospace;font-size:.875rem;background:#0000000f;padding:.125rem .375rem;border-radius:4px}.docs-callout__content a{color:var(--callout-title);text-decoration:underline;text-underline-offset:2px}.docs-callout__content a:hover{text-decoration:none}.docs-callout--note{--callout-bg: #fffbeb;--callout-border: #f59e0b;--callout-title: #92400e;--callout-text: #78350f}.docs-callout--warning{--callout-bg: #fff7ed;--callout-border: #f97316;--callout-title: #c2410c;--callout-text: #9a3412}.docs-callout--tip{--callout-bg: #ecfdf5;--callout-border: #10b981;--callout-title: #065f46;--callout-text: #047857}.docs-callout--danger{--callout-bg: #fef2f2;--callout-border: #ef4444;--callout-title: #991b1b;--callout-text: #b91c1c}.docs-callout--info{--callout-bg: #eff6ff;--callout-border: #3b82f6;--callout-title: #1e40af;--callout-text: #1d4ed8}:host-context(.dark) .docs-callout--note,:host-context([color-scheme=dark]) .docs-callout--note{--callout-bg: rgba(245, 158, 11, .1);--callout-border: #f59e0b;--callout-title: #fbbf24;--callout-text: #fcd34d}:host-context(.dark) .docs-callout--warning,:host-context([color-scheme=dark]) .docs-callout--warning{--callout-bg: rgba(249, 115, 22, .1);--callout-border: #f97316;--callout-title: #fb923c;--callout-text: #fdba74}:host-context(.dark) .docs-callout--tip,:host-context([color-scheme=dark]) .docs-callout--tip{--callout-bg: rgba(16, 185, 129, .1);--callout-border: #10b981;--callout-title: #34d399;--callout-text: #6ee7b7}:host-context(.dark) .docs-callout--danger,:host-context([color-scheme=dark]) .docs-callout--danger{--callout-bg: rgba(239, 68, 68, .1);--callout-border: #ef4444;--callout-title: #f87171;--callout-text: #fca5a5}:host-context(.dark) .docs-callout--info,:host-context([color-scheme=dark]) .docs-callout--info{--callout-bg: rgba(59, 130, 246, .1);--callout-border: #3b82f6;--callout-title: #60a5fa;--callout-text: #93c5fd}:host-context(.dark) .docs-callout__content code,:host-context([color-scheme=dark]) .docs-callout__content code{background:#ffffff1a}\n"] }]
         }] });
 
+/**
+ * val-docs-section
+ *
+ * A semantic section wrapper for documentation pages.
+ * Automatically creates headings with IDs for TOC linking.
+ *
+ * @example Basic usage
+ * ```html
+ * <val-docs-section [props]="{ id: 'installation', title: 'Installation' }">
+ *   <p>Install the package using npm...</p>
+ *   <val-docs-code-example [props]="codeExample"></val-docs-code-example>
+ * </val-docs-section>
+ * ```
+ *
+ * @example With level 3 heading
+ * ```html
+ * <val-docs-section [props]="{ id: 'npm', title: 'Using npm', level: 3 }">
+ *   <val-docs-code-example [props]="npmExample"></val-docs-code-example>
+ * </val-docs-section>
+ * ```
+ */
+class DocsSectionComponent {
+    constructor() {
+        this.props = { id: '', title: '' };
+    }
+    get level() {
+        return this.props.level ?? 2;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DocsSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DocsSectionComponent, isStandalone: true, selector: "val-docs-section", inputs: { props: "props" }, ngImport: i0, template: `
+    <section
+      [id]="props.id"
+      class="docs-section"
+      [class]="props.cssClass"
+      [class.docs-section--level-2]="level === 2"
+      [class.docs-section--level-3]="level === 3"
+    >
+      @if (level === 2) {
+        <h2 class="docs-section__title">{{ props.title }}</h2>
+      } @else {
+        <h3 class="docs-section__title">{{ props.title }}</h3>
+      }
+
+      @if (props.description) {
+        <p class="docs-section__description">{{ props.description }}</p>
+      }
+
+      <div class="docs-section__content">
+        <ng-content></ng-content>
+      </div>
+    </section>
+  `, isInline: true, styles: [".docs-section{margin-bottom:2.5rem}.docs-section__title{margin:0 0 1rem;font-weight:600;color:var(--ion-text-color);scroll-margin-top:80px}.docs-section--level-2 .docs-section__title{font-size:1.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--ion-border-color, #e0e0e0)}.docs-section--level-3 .docs-section__title{font-size:1.25rem}.docs-section__description{margin:0 0 1.25rem;color:var(--ion-color-medium);font-size:1rem;line-height:1.6}.docs-section__content>*:last-child{margin-bottom:0}:host-context(.dark) .docs-section--level-2 .docs-section__title,:host-context([color-scheme=\"dark\"]) .docs-section--level-2 .docs-section__title{border-bottom-color:var(--ion-border-color, #333)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DocsSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-docs-section', standalone: true, imports: [CommonModule], template: `
+    <section
+      [id]="props.id"
+      class="docs-section"
+      [class]="props.cssClass"
+      [class.docs-section--level-2]="level === 2"
+      [class.docs-section--level-3]="level === 3"
+    >
+      @if (level === 2) {
+        <h2 class="docs-section__title">{{ props.title }}</h2>
+      } @else {
+        <h3 class="docs-section__title">{{ props.title }}</h3>
+      }
+
+      @if (props.description) {
+        <p class="docs-section__description">{{ props.description }}</p>
+      }
+
+      <div class="docs-section__content">
+        <ng-content></ng-content>
+      </div>
+    </section>
+  `, styles: [".docs-section{margin-bottom:2.5rem}.docs-section__title{margin:0 0 1rem;font-weight:600;color:var(--ion-text-color);scroll-margin-top:80px}.docs-section--level-2 .docs-section__title{font-size:1.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--ion-border-color, #e0e0e0)}.docs-section--level-3 .docs-section__title{font-size:1.25rem}.docs-section__description{margin:0 0 1.25rem;color:var(--ion-color-medium);font-size:1rem;line-height:1.6}.docs-section__content>*:last-child{margin-bottom:0}:host-context(.dark) .docs-section--level-2 .docs-section__title,:host-context([color-scheme=\"dark\"]) .docs-section--level-2 .docs-section__title{border-bottom-color:var(--ion-border-color, #333)}\n"] }]
+        }], propDecorators: { props: [{
+                type: Input
+            }] } });
+
+/**
+ * val-docs-page
+ *
+ * A complete documentation page template that eliminates boilerplate.
+ * Provides automatic TOC generation, navigation links, and consistent styling.
+ *
+ * @example Basic usage
+ * ```html
+ * <val-docs-page [props]="{
+ *   title: 'Button',
+ *   lead: 'A clickable element for user interactions.',
+ *   previousPage: { title: 'Quick Start', route: ['/docs', 'quick-start'] },
+ *   nextPage: { title: 'Card', route: ['/docs', 'components', 'card'] }
+ * }">
+ *   <val-docs-section [props]="{ id: 'basic-usage', title: 'Basic Usage' }">
+ *     <p>Content here...</p>
+ *   </val-docs-section>
+ *
+ *   <val-docs-section [props]="{ id: 'variants', title: 'Variants' }">
+ *     <p>More content...</p>
+ *   </val-docs-section>
+ * </val-docs-page>
+ * ```
+ *
+ * @example With badge
+ * ```html
+ * <val-docs-page [props]="{
+ *   title: 'New Component',
+ *   badge: 'New',
+ *   badgeColor: 'success'
+ * }">
+ *   ...
+ * </val-docs-page>
+ * ```
+ */
+class DocsPageComponent {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.props = { title: '' };
+        this.tocItems = signal([]);
+        this.observer = null;
+        this.tocProps = computed(() => ({
+            title: this.props.toc?.title ?? 'On this page',
+            items: this.tocItems(),
+        }));
+        this.navLinksProps = computed(() => ({
+            previous: this.props.previousPage
+                ? {
+                    label: this.props.navLabels?.previous ?? 'Previous',
+                    title: this.props.previousPage.title,
+                    route: this.props.previousPage.route,
+                }
+                : undefined,
+            next: this.props.nextPage
+                ? {
+                    label: this.props.navLabels?.next ?? 'Next',
+                    title: this.props.nextPage.title,
+                    route: this.props.nextPage.route,
+                }
+                : undefined,
+        }));
+        this.showNavLinks = computed(() => {
+            return !!this.props.previousPage || !!this.props.nextPage;
+        });
+    }
+    ngAfterViewInit() {
+        // Initial scan
+        this.scanForSections();
+        // Watch for dynamic content changes
+        this.observer = new MutationObserver(() => {
+            this.scanForSections();
+        });
+        const contentEl = this.elementRef.nativeElement.querySelector('.docs-page__sections');
+        if (contentEl) {
+            this.observer.observe(contentEl, { childList: true, subtree: true });
+        }
+    }
+    ngOnDestroy() {
+        this.observer?.disconnect();
+    }
+    scanForSections() {
+        const contentEl = this.elementRef.nativeElement.querySelector('.docs-page__sections');
+        if (!contentEl)
+            return;
+        const headings = contentEl.querySelectorAll('h2[id], h3[id], section[id] > h2, section[id] > h3');
+        const items = [];
+        headings.forEach((heading) => {
+            // Get ID from heading or parent section
+            let id = heading.id;
+            if (!id && heading.parentElement?.tagName === 'SECTION') {
+                id = heading.parentElement.id;
+            }
+            if (id) {
+                const level = heading.tagName === 'H2' ? 2 : 3;
+                items.push({ id, label: heading.textContent?.trim() || '', level });
+            }
+        });
+        this.tocItems.set(items);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DocsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DocsPageComponent, isStandalone: true, selector: "val-docs-page", inputs: { props: "props" }, ngImport: i0, template: `
+    <div class="docs-page" [class]="props.cssClass">
+      <div class="docs-page__content" #content>
+        <header class="docs-page__header">
+          <div class="docs-page__title-row">
+            <h1 class="docs-page__title">{{ props.title }}</h1>
+            @if (props.badge) {
+              <span
+                class="docs-page__badge"
+                [class.docs-page__badge--success]="props.badgeColor === 'success'"
+                [class.docs-page__badge--warning]="props.badgeColor === 'warning'"
+                [class.docs-page__badge--danger]="props.badgeColor === 'danger'"
+              >
+                {{ props.badge }}
+              </span>
+            }
+          </div>
+          @if (props.lead) {
+            <p class="docs-page__lead">{{ props.lead }}</p>
+          }
+        </header>
+
+        <div class="docs-page__sections">
+          <ng-content></ng-content>
+        </div>
+
+        @if (showNavLinks()) {
+          <val-docs-nav-links [props]="navLinksProps()"></val-docs-nav-links>
+        }
+      </div>
+
+      @if (!props.toc?.hide) {
+        <aside class="docs-page__toc">
+          <val-docs-toc [props]="tocProps()"></val-docs-toc>
+        </aside>
+      }
+    </div>
+  `, isInline: true, styles: [".docs-page{display:grid;grid-template-columns:1fr;gap:2rem;max-width:1400px;margin:0 auto;padding:2rem 1.5rem;@media (min-width: 1200px){grid-template-columns:1fr 220px;padding:2rem}&__content{min-width:0;max-width:900px}&__header{margin-bottom:2rem}&__title-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}&__title{margin:0;font-size:2rem;font-weight:700;color:var(--ion-text-color);line-height:1.2;@media (min-width: 768px){font-size:2.5rem}}&__badge{display:inline-flex;align-items:center;padding:.25rem .625rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.025em;border-radius:4px;background:#00000014;color:var(--ion-color-medium-shade);&--success{background:var(--ion-color-success-tint, #e8f5e9);color:var(--ion-color-success-shade, #2e7d32)}&--warning{background:var(--ion-color-warning-tint, #fff3e0);color:var(--ion-color-warning-shade, #e65100)}&--danger{background:var(--ion-color-danger-tint, #ffebee);color:var(--ion-color-danger-shade, #c62828)}}&__lead{margin:1rem 0 0;font-size:1.125rem;line-height:1.7;color:var(--ion-color-medium)}&__sections{>*:last-child{margin-bottom:0}}&__toc{display:none;@media (min-width: 1200px){display:block;position:sticky;top:2rem;height:fit-content;max-height:calc(100vh - 4rem);overflow-y:auto}}}// Dark mode :host-context(.dark),:host-context([color-scheme=\"dark\"]){.docs-page{&__badge{background:#ffffff1a;color:var(--ion-color-medium);&--success{background:#2e7d3233;color:#81c784}&--warning{background:#e6510033;color:#ffb74d}&--danger{background:#c6282833;color:#e57373}}}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DocsNavLinksComponent, selector: "val-docs-nav-links", inputs: ["props"], outputs: ["navigate"] }, { kind: "component", type: DocsTocComponent, selector: "val-docs-toc", inputs: ["props"], outputs: ["sectionChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DocsPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-docs-page', standalone: true, imports: [CommonModule, DocsNavLinksComponent, DocsTocComponent], template: `
+    <div class="docs-page" [class]="props.cssClass">
+      <div class="docs-page__content" #content>
+        <header class="docs-page__header">
+          <div class="docs-page__title-row">
+            <h1 class="docs-page__title">{{ props.title }}</h1>
+            @if (props.badge) {
+              <span
+                class="docs-page__badge"
+                [class.docs-page__badge--success]="props.badgeColor === 'success'"
+                [class.docs-page__badge--warning]="props.badgeColor === 'warning'"
+                [class.docs-page__badge--danger]="props.badgeColor === 'danger'"
+              >
+                {{ props.badge }}
+              </span>
+            }
+          </div>
+          @if (props.lead) {
+            <p class="docs-page__lead">{{ props.lead }}</p>
+          }
+        </header>
+
+        <div class="docs-page__sections">
+          <ng-content></ng-content>
+        </div>
+
+        @if (showNavLinks()) {
+          <val-docs-nav-links [props]="navLinksProps()"></val-docs-nav-links>
+        }
+      </div>
+
+      @if (!props.toc?.hide) {
+        <aside class="docs-page__toc">
+          <val-docs-toc [props]="tocProps()"></val-docs-toc>
+        </aside>
+      }
+    </div>
+  `, styles: [".docs-page{display:grid;grid-template-columns:1fr;gap:2rem;max-width:1400px;margin:0 auto;padding:2rem 1.5rem;@media (min-width: 1200px){grid-template-columns:1fr 220px;padding:2rem}&__content{min-width:0;max-width:900px}&__header{margin-bottom:2rem}&__title-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}&__title{margin:0;font-size:2rem;font-weight:700;color:var(--ion-text-color);line-height:1.2;@media (min-width: 768px){font-size:2.5rem}}&__badge{display:inline-flex;align-items:center;padding:.25rem .625rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.025em;border-radius:4px;background:#00000014;color:var(--ion-color-medium-shade);&--success{background:var(--ion-color-success-tint, #e8f5e9);color:var(--ion-color-success-shade, #2e7d32)}&--warning{background:var(--ion-color-warning-tint, #fff3e0);color:var(--ion-color-warning-shade, #e65100)}&--danger{background:var(--ion-color-danger-tint, #ffebee);color:var(--ion-color-danger-shade, #c62828)}}&__lead{margin:1rem 0 0;font-size:1.125rem;line-height:1.7;color:var(--ion-color-medium)}&__sections{>*:last-child{margin-bottom:0}}&__toc{display:none;@media (min-width: 1200px){display:block;position:sticky;top:2rem;height:fit-content;max-height:calc(100vh - 4rem);overflow-y:auto}}}// Dark mode :host-context(.dark),:host-context([color-scheme=\"dark\"]){.docs-page{&__badge{background:#ffffff1a;color:var(--ion-color-medium);&--success{background:#2e7d3233;color:#81c784}&--warning{background:#e6510033;color:#ffb74d}&--danger{background:#c6282833;color:#e57373}}}}\n"] }]
+        }], propDecorators: { props: [{
+                type: Input
+            }] } });
+
 /*
  * Public API Surface of valtech-components
  */
@@ -36726,5 +37857,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AD_SIZE_MAP, API_TABLE_COLUMN_LABELS, 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, DocsApiTableComponent, DocsBreadcrumbComponent, DocsCalloutComponent, DocsCodeExampleComponent, DocsLayoutComponent, DocsNavLinksComponent, DocsNavigationService, DocsSearchComponent, DocsSidebarComponent, DocsTocComponent, 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, InputI18nHelper, InputType, ItemListComponent, LANG_STORAGE_KEY$1 as LANG_STORAGE_KEY, LOGIN_DEFAULTS, LanguageSelectorComponent, LayeredCardComponent, LayoutComponent, LinkComponent, LinkProcessorService, LinksAccordionComponent, LinksCakeComponent, ListSkeletonComponent, LoadingDirective, LocalStorageService, LocaleService, LoginComponent, 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, RotatingTextComponent, 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, Terminal404Component, 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 };
+export { AD_SIZE_MAP, API_TABLE_COLUMN_LABELS, 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, ContentReactionComponent, 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_FEEDBACK_CONFIG, DEFAULT_FEEDBACK_TYPE_OPTIONS, 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, DocsApiTableComponent, DocsBreadcrumbComponent, DocsCalloutComponent, DocsCodeExampleComponent, DocsLayoutComponent, DocsNavLinksComponent, DocsNavigationService, DocsPageComponent, DocsSearchComponent, DocsSectionComponent, DocsSidebarComponent, DocsTocComponent, DownloadService, EmailInputComponent, ExpandableTextComponent, FabComponent, FeedbackFormComponent, FeedbackService, 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, InputI18nHelper, InputType, ItemListComponent, LANG_STORAGE_KEY$1 as LANG_STORAGE_KEY, LOGIN_DEFAULTS, LanguageSelectorComponent, LayeredCardComponent, LayoutComponent, LinkComponent, LinkProcessorService, LinksAccordionComponent, LinksCakeComponent, ListSkeletonComponent, LoadingDirective, LocalStorageService, LocaleService, LoginComponent, 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, RotatingTextComponent, 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, Terminal404Component, 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_FEEDBACK_CONFIG, 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, provideValtechFeedback, provideValtechFirebase, provideValtechI18n, provideValtechPresets, provideValtechSkeleton, query, replaceSpecialChars, resolveColor, resolveInputDefaultValue, roleGuard, storagePaths, superAdminGuard };
 //# sourceMappingURL=valtech-components.mjs.map