valtech-components 2.0.903 → 2.0.905

package/fesm2022/valtech-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, Injectable, makeEnvironmentProviders, APP_INITIALIZER, inject, EventEmitter, Component, Input, Output, input, computed, ChangeDetectionStrategy, HostBinding, PLATFORM_ID, Inject, HostListener, Pipe, effect, ViewChild, ChangeDetectorRef, ContentChild, ErrorHandler, DestroyRef, InjectionToken, Optional, runInInjectionContext, output, Injector, TemplateRef, ViewContainerRef, isSignal, Directive, ElementRef, ViewEncapsulation } from '@angular/core';
+import { signal, Injectable, makeEnvironmentProviders, APP_INITIALIZER, inject, EventEmitter, Component, Input, Output, input, computed, ChangeDetectionStrategy, HostBinding, PLATFORM_ID, Inject, HostListener, Pipe, effect, ViewChild, ChangeDetectorRef, ContentChild, ErrorHandler, DestroyRef, InjectionToken, isDevMode, Optional, runInInjectionContext, output, Injector, TemplateRef, ViewContainerRef, isSignal, Directive, ElementRef, ViewEncapsulation } 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, IonRefresher, IonRefresherContent, IonRippleEffect, AlertController, IonMenuButton, IonFooter, IonListHeader, IonInfiniteScroll, IonInfiniteScrollContent, IonGrid, MenuController, IonMenu, IonMenuToggle, IonSplitPane } from '@ionic/angular/standalone';
 import * as i1 from '@angular/common';
@@ -53,7 +53,7 @@ import 'prismjs/components/prism-json';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '2.0.903';
+const VERSION = '2.0.905';
 
 /**
  * Servicio para gestionar presets de componentes.
@@ -21912,7 +21912,10 @@ class AuthStorageService {
     constructor(config, platformId) {
         this.config = config;
         this.isBrowser = isPlatformBrowser(platformId);
-        const prefix = this.config.storagePrefix || 'valtech_auth_';
+        if (!this.config && isDevMode()) {
+            console.warn('[valtech-components] AuthStorageService: provideValtechAuth() no está en main.ts.');
+        }
+        const prefix = this.config?.storagePrefix || 'valtech_auth_';
         this.keys = {
             ACCESS_TOKEN: `${prefix}access_token`,
             REFRESH_TOKEN: `${prefix}refresh_token`,
@@ -22049,7 +22052,7 @@ class AuthStorageService {
         if (!this.isBrowser)
             return;
         try {
-            Object.values(this.keys).forEach((key) => localStorage.removeItem(key));
+            Object.values(this.keys).forEach(key => localStorage.removeItem(key));
         }
         catch (e) {
             console.warn('[ValtechAuth] Error limpiando storage:', e);
@@ -22092,7 +22095,10 @@ class AuthSyncService {
         /** Observable de eventos de sincronización */
         this.onEvent$ = this.eventSubject.asObservable();
         this.isBrowser = isPlatformBrowser(platformId);
-        const prefix = this.config.storagePrefix || 'valtech_auth_';
+        if (!this.config && isDevMode()) {
+            console.warn('[valtech-components] AuthSyncService: provideValtechAuth() no está en main.ts.');
+        }
+        const prefix = this.config?.storagePrefix || 'valtech_auth_';
         this.channelName = `${prefix}sync_channel`;
     }
     /**
@@ -22100,7 +22106,7 @@ class AuthSyncService {
      * SSR-noop — sync de pestañas solo aplica en browser.
      */
     start() {
-        if (!this.config.enableTabSync || !this.isBrowser) {
+        if (!this.config?.enableTabSync || !this.isBrowser) {
             return;
         }
         // Intentar usar BroadcastChannel API (mejor rendimiento)
@@ -22129,7 +22135,7 @@ class AuthSyncService {
      * Envía un evento a otras pestañas.
      */
     broadcast(event) {
-        if (!this.config.enableTabSync || !this.isBrowser) {
+        if (!this.config?.enableTabSync || !this.isBrowser) {
             return;
         }
         const fullEvent = {
@@ -22173,7 +22179,7 @@ class AuthSyncService {
      * Inicializa fallback con storage events.
      */
     initStorageEvents() {
-        const storageKey = `${this.config.storagePrefix}sync_event`;
+        const storageKey = `${this.config?.storagePrefix}sync_event`;
         this.storageListener = (event) => {
             if (event.key === storageKey && event.newValue) {
                 try {
@@ -22191,7 +22197,7 @@ class AuthSyncService {
      * Envía evento via localStorage (fallback).
      */
     broadcastViaStorage(event) {
-        const storageKey = `${this.config.storagePrefix}sync_event`;
+        const storageKey = `${this.config?.storagePrefix}sync_event`;
         try {
             // Escribir y luego limpiar para permitir múltiples eventos del mismo tipo
             localStorage.setItem(storageKey, JSON.stringify(event));
@@ -25273,7 +25279,7 @@ class OAuthService {
         return new Observable(observer => {
             // Construir URL de inicio
             const redirectUri = `${window.location.origin}/auth/oauth/callback`;
-            const startUrl = `${this.config.apiUrl}/v2/auth/oauth/${provider}/start?redirect_uri=${encodeURIComponent(redirectUri)}`;
+            const startUrl = `${this.config?.apiUrl}/v2/auth/oauth/${provider}/start?redirect_uri=${encodeURIComponent(redirectUri)}`;
             // Abrir popup centrado
             const width = 500;
             const height = 600;
@@ -25378,7 +25384,7 @@ class OAuthService {
     startLinkFlow(provider) {
         return new Observable(observer => {
             const redirectUri = `${window.location.origin}/auth/oauth/callback`;
-            const startUrl = `${this.config.apiUrl}/v2/auth/oauth/link/${provider}/start?redirect_uri=${encodeURIComponent(redirectUri)}`;
+            const startUrl = `${this.config?.apiUrl}/v2/auth/oauth/link/${provider}/start?redirect_uri=${encodeURIComponent(redirectUri)}`;
             const width = 500;
             const height = 600;
             const left = window.screenX + (window.outerWidth - width) / 2;
@@ -25429,7 +25435,7 @@ class OAuthService {
      */
     getLinkedProviders() {
         return this.http
-            .get(`${this.config.apiUrl}/v2/auth/oauth/providers`)
+            .get(`${this.config?.apiUrl}/v2/auth/oauth/providers`)
             .pipe(catchError(error => throwError(() => ({
             code: error.error?.code || 'FETCH_ERROR',
             message: error.error?.message || 'Error al obtener proveedores vinculados',
@@ -25440,7 +25446,7 @@ class OAuthService {
      */
     unlinkProvider(provider) {
         return this.http
-            .post(`${this.config.apiUrl}/v2/auth/oauth/unlink`, { provider })
+            .post(`${this.config?.apiUrl}/v2/auth/oauth/unlink`, { provider })
             .pipe(catchError(error => throwError(() => ({
             code: error.error?.code || 'UNLINK_ERROR',
             message: error.error?.message || 'Error al desvincular proveedor',
@@ -25451,7 +25457,7 @@ class OAuthService {
      */
     setPassword(password) {
         return this.http
-            .post(`${this.config.apiUrl}/v2/auth/oauth/set-password`, { password })
+            .post(`${this.config?.apiUrl}/v2/auth/oauth/set-password`, { password })
             .pipe(catchError(error => throwError(() => ({
             code: error.error?.code || 'SET_PASSWORD_ERROR',
             message: error.error?.message || 'Error al establecer contraseña',
@@ -25462,7 +25468,7 @@ class OAuthService {
      */
     hasPassword() {
         return this.http
-            .get(`${this.config.apiUrl}/v2/auth/oauth/has-password`)
+            .get(`${this.config?.apiUrl}/v2/auth/oauth/has-password`)
             .pipe(catchError(error => throwError(() => ({
             code: error.error?.code || 'CHECK_PASSWORD_ERROR',
             message: error.error?.message || 'Error al verificar contraseña',
@@ -25800,6 +25806,10 @@ class AuthService {
         this.mfaPending = this.stateService.mfaPending;
         /** Error actual */
         this.error = this.stateService.error;
+        if (!this.config && isDevMode()) {
+            console.warn("[valtech-components] AuthService: provideValtechAuth() no está en main.ts. " +
+                "Login, registro y sesión no funcionarán.");
+        }
     }
     // =============================================
     // INICIALIZACIÓN
@@ -25873,7 +25883,7 @@ class AuthService {
             }
         }
         // 5. Iniciar sincronización entre pestañas
-        if (this.config.enableTabSync) {
+        if (this.config?.enableTabSync) {
             this.syncService.start();
             this.syncSubscription = this.syncService.onEvent$.subscribe(event => this.handleSyncEvent(event));
         }
@@ -26106,7 +26116,7 @@ class AuthService {
             this.stateService.updateRefreshToken(response.refreshToken); // NUEVO: guardar refresh rotado
             this.storageService.saveAccessToken(response.accessToken, expiresAt);
             this.storageService.saveRefreshToken(response.refreshToken); // NUEVO: persistir refresh rotado
-            if (this.config.enableFirebaseIntegration && response.firebaseToken) {
+            if (this.config?.enableFirebaseIntegration && response.firebaseToken) {
                 this.signInWithFirebase(response.firebaseToken);
             }
             this.startRefreshTimer();
@@ -26192,7 +26202,7 @@ class AuthService {
         this.signOutFirebase();
         this.clearState();
         this.syncService.broadcast({ type: 'LOGOUT' });
-        this.router.navigate([this.config.loginRoute]);
+        this.router.navigate([this.config?.loginRoute]);
     }
     // =============================================
     // MFA SETUP (usuario autenticado)
@@ -26407,7 +26417,7 @@ class AuthService {
                 this.signOutFirebase();
                 this.clearState();
                 this.syncService.broadcast({ type: 'LOGOUT' });
-                this.router.navigate([this.config.loginRoute]);
+                this.router.navigate([this.config?.loginRoute]);
             }
         }), catchError(error => this.handleAuthError(error)));
     }
@@ -26484,11 +26494,11 @@ class AuthService {
     // PRIVATE METHODS
     // =============================================
     get baseUrl() {
-        return `${this.config.apiUrl}${this.config.authPrefix}`;
+        return `${this.config?.apiUrl}${this.config?.authPrefix}`;
     }
     /** Base for /v2/users endpoints (separate from /v2/auth). */
     get usersBaseUrl() {
-        return `${this.config.apiUrl}/v2/users`;
+        return `${this.config?.apiUrl}/v2/users`;
     }
     handleSuccessfulAuth(response) {
         const expiresAt = Date.now() + response.expiresIn * 1000;
@@ -26521,18 +26531,18 @@ class AuthService {
         this.syncService.broadcast({ type: 'LOGIN' });
         // Integración con Firebase
         console.log('[ValtechAuth] handleSuccessfulAuth - Firebase check:', {
-            enableFirebaseIntegration: this.config.enableFirebaseIntegration,
+            enableFirebaseIntegration: this.config?.enableFirebaseIntegration,
             hasFirebaseTokenKey: 'firebaseToken' in response,
             firebaseTokenValue: !!response.firebaseToken,
             firebaseTokenLength: response.firebaseToken?.length || 0,
         });
-        if (this.config.enableFirebaseIntegration &&
+        if (this.config?.enableFirebaseIntegration &&
             'firebaseToken' in response &&
             response.firebaseToken) {
             console.log('[ValtechAuth] Calling signInWithFirebase with token length:', response.firebaseToken.length);
             this.signInWithFirebase(response.firebaseToken);
         }
-        else if (this.config.enableFirebaseIntegration) {
+        else if (this.config?.enableFirebaseIntegration) {
             // El login NO trajo firebaseToken (ej. flujo OAuth que lo perdió). En vez
             // de quedar sin sesión de Firebase, recurrimos al fallback self-healing:
             // /refresh sí devuelve un firebaseToken confiable.
@@ -26543,7 +26553,7 @@ class AuthService {
             console.log('[ValtechAuth] Firebase signin skipped - integración Firebase desactivada');
         }
         // Registro automático de dispositivo para push notifications
-        if (this.config.enableDeviceRegistration) {
+        if (this.config?.enableDeviceRegistration) {
             this.registerDeviceIfNeeded(); // fire-and-forget
         }
         // Sincronizar idioma del usuario con i18n
@@ -26595,7 +26605,7 @@ class AuthService {
         const state = this.stateService.state();
         if (!state.expiresAt)
             return;
-        const refreshBeforeMs = (this.config.refreshBeforeExpiry || 60) * 1000;
+        const refreshBeforeMs = (this.config?.refreshBeforeExpiry || 60) * 1000;
         const refreshAt = state.expiresAt - refreshBeforeMs;
         const delay = refreshAt - Date.now();
         if (delay > 0) {
@@ -26640,7 +26650,7 @@ class AuthService {
             case 'LOGOUT':
                 this.stateService.reset();
                 this.stopRefreshTimer();
-                this.router.navigate([this.config.loginRoute]);
+                this.router.navigate([this.config?.loginRoute]);
                 break;
             case 'PERMISSIONS_UPDATE': {
                 const perms = this.storageService.loadPermissions();
@@ -26686,7 +26696,7 @@ class AuthService {
         }
     }
     async signOutFirebase() {
-        if (!this.config.enableFirebaseIntegration)
+        if (!this.config?.enableFirebaseIntegration)
             return;
         try {
             if (this.firebaseService) {
@@ -26717,7 +26727,7 @@ class AuthService {
      * Fire-and-forget: se invoca con `void` para no demorar `initialize()`.
      */
     async ensureFirebaseSessionOnBootstrap() {
-        if (!this.config.enableFirebaseIntegration || !this.firebaseService)
+        if (!this.config?.enableFirebaseIntegration || !this.firebaseService)
             return;
         // Dar a la persistencia IndexedDB propia de Firebase Auth una oportunidad
         // de auto-restaurarse (navegador normal). En una PWA standalone de iOS
@@ -26743,7 +26753,7 @@ class AuthService {
      * desde el debug-console qué disparó el fallback.
      */
     async reestablishFirebaseViaRefresh(reason) {
-        if (!this.config.enableFirebaseIntegration || !this.firebaseService)
+        if (!this.config?.enableFirebaseIntegration || !this.firebaseService)
             return;
         console.log(`[FBAuth] fallback — re-estableciendo Firebase vía /refresh (motivo: ${reason})`);
         try {
@@ -26816,7 +26826,7 @@ class AuthService {
             if (token) {
                 // Eliminar del backend
                 await firstValueFrom(this.http
-                    .request('DELETE', `${this.config.apiUrl}/v2/users/me/devices/by-token`, {
+                    .request('DELETE', `${this.config?.apiUrl}/v2/users/me/devices/by-token`, {
                     body: { token },
                 })
                     .pipe(catchError(() => of(null))));
@@ -26886,7 +26896,7 @@ class AuthService {
             }
             // Registrar en backend
             const { platform, browser, os } = this.detectPlatformInfo();
-            const response = await firstValueFrom(this.http.post(`${this.config.apiUrl}/v2/users/me/devices`, {
+            const response = await firstValueFrom(this.http.post(`${this.config?.apiUrl}/v2/users/me/devices`, {
                 token,
                 platform,
                 browser,
@@ -26909,7 +26919,7 @@ class AuthService {
      */
     async registerDeviceIfNeeded() {
         // Solo si está habilitado y messaging está disponible
-        if (!this.config.enableDeviceRegistration || !this.messagingService) {
+        if (!this.config?.enableDeviceRegistration || !this.messagingService) {
             return false;
         }
         try {
@@ -26929,7 +26939,7 @@ class AuthService {
             }
             // Registrar en backend
             const { platform, browser, os } = this.detectPlatformInfo();
-            await firstValueFrom(this.http.post(`${this.config.apiUrl}/v2/users/me/devices`, {
+            await firstValueFrom(this.http.post(`${this.config?.apiUrl}/v2/users/me/devices`, {
                 token,
                 platform,
                 browser,
@@ -26948,7 +26958,7 @@ class AuthService {
      * Elimina el dispositivo del backend y borra el token FCM.
      */
     async unregisterDevice() {
-        if (!this.config.enableDeviceRegistration || !this.messagingService) {
+        if (!this.config?.enableDeviceRegistration || !this.messagingService) {
             return;
         }
         try {
@@ -26956,7 +26966,7 @@ class AuthService {
             if (token) {
                 // Delete from backend (fire and forget)
                 this.http
-                    .request('DELETE', `${this.config.apiUrl}/v2/users/me/devices/by-token`, {
+                    .request('DELETE', `${this.config?.apiUrl}/v2/users/me/devices/by-token`, {
                     body: { token },
                 })
                     .pipe(catchError(() => of(null)))
@@ -28123,17 +28133,22 @@ function provideValtechFeedback(config) {
  */
 class FeedbackService {
     constructor() {
-        this.config = inject(VALTECH_FEEDBACK_CONFIG);
+        this.config = inject(VALTECH_FEEDBACK_CONFIG, { optional: true });
         this.http = inject(HttpClient);
         this.firestore = inject(FirestoreService, { optional: true });
         this.storage = inject(StorageService, { optional: true });
         this.auth = inject(AuthService, { optional: true });
+        this.isConfigured = signal(!!this.config);
+        if (!this.config && isDevMode()) {
+            console.warn('[valtech-components] FeedbackService: provideValtechFeedback() no está en main.ts. ' +
+                'Las reacciones y el feedback no funcionarán.');
+        }
     }
     /**
      * URL base para endpoints de feedback.
      */
     get baseUrl() {
-        return `${this.config.apiUrl}${this.config.feedbackPrefix}`;
+        return `${this.config?.apiUrl}${this.config?.feedbackPrefix}`;
     }
     /**
      * Captura el contexto del dispositivo automáticamente.
@@ -28167,7 +28182,7 @@ class FeedbackService {
             attachments,
             contentRef,
             deviceContext: this.captureDeviceContext(),
-            appId: this.config.appId,
+            appId: this.config?.appId,
         };
         return this.http.post(this.baseUrl, request);
     }
@@ -28197,15 +28212,15 @@ class FeedbackService {
      */
     validateFile(file) {
         // Verificar tamaño
-        if (file.size > this.config.maxFileSize) {
-            const maxSizeMB = Math.round(this.config.maxFileSize / (1024 * 1024));
+        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 allowedTypes = this.config?.allowedFileTypes || [];
         const isAllowed = allowedTypes.some(pattern => {
             if (pattern.endsWith('/*')) {
                 const baseType = pattern.replace('/*', '');
@@ -28367,7 +28382,7 @@ class FeedbackService {
         }
         // 2. Fallback: llamar API (solo si hay usuario autenticado)
         const params = new URLSearchParams({
-            appId: this.config.appId,
+            appId: this.config?.appId,
             entityType,
             entityId,
         });
@@ -28397,7 +28412,7 @@ class FeedbackService {
             reactionValue: value,
             description: comment || '',
             deviceContext: this.captureDeviceContext(),
-            appId: this.config.appId,
+            appId: this.config?.appId,
         };
         return firstValueFrom(this.http.post(this.baseUrl, request));
     }
@@ -28426,7 +28441,7 @@ class FeedbackService {
             reactionValue: value,
             description: comment || '',
             deviceContext: this.captureDeviceContext(),
-            appId: this.config.appId,
+            appId: this.config?.appId,
         };
         return firstValueFrom(this.http.post(`${this.baseUrl}/anonymous`, request));
     }
@@ -28474,7 +28489,7 @@ class FeedbackService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FeedbackService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Configuración por defecto de tipos de feedback.
@@ -30199,7 +30214,7 @@ class DeviceService {
         this.http = http;
     }
     get baseUrl() {
-        return `${this.config.apiUrl}/v2/users/me/devices`;
+        return `${this.config?.apiUrl}/v2/users/me/devices`;
     }
     /**
      * Lista todos los dispositivos registrados del usuario.
@@ -30254,7 +30269,7 @@ class DeviceService {
      * ```
      */
     validateAction(token) {
-        return this.http.post(`${this.config.apiUrl}/v2/actions/validate`, { token });
+        return this.http.post(`${this.config?.apiUrl}/v2/actions/validate`, { token });
     }
     /**
      * Ejecuta una acción de dispositivo desde un token de email.
@@ -30277,7 +30292,7 @@ class DeviceService {
      */
     executeAction(token) {
         // Usa el endpoint unificado de acciones
-        return this.http.post(`${this.config.apiUrl}/v2/actions/execute`, { token }).pipe(map$1(response => ({
+        return this.http.post(`${this.config?.apiUrl}/v2/actions/execute`, { token }).pipe(map$1(response => ({
             operationId: response.operationId,
             success: response.success,
             message: response.message,
@@ -30336,7 +30351,7 @@ class SessionService {
         this.http = http;
     }
     get baseUrl() {
-        return `${this.config.apiUrl}/v2/users/me/sessions`;
+        return `${this.config?.apiUrl}/v2/users/me/sessions`;
     }
     /**
      * Lista todas las sesiones activas del usuario.
@@ -30659,7 +30674,7 @@ class HandoffService {
         const tokenParam = options.tokenParam ?? HANDOFF_TOKEN_PARAM;
         const routeParam = options.routeParam ?? HANDOFF_ROUTE_PARAM;
         const defaultRoute = options.defaultRoute ?? '/';
-        const errorRoute = options.errorRoute ?? this.config.loginRoute ?? '/login';
+        const errorRoute = options.errorRoute ?? this.config?.loginRoute ?? '/login';
         const params = new URLSearchParams(window.location.search);
         const token = params.get(tokenParam);
         if (!token) {
@@ -30689,7 +30704,7 @@ class HandoffService {
         });
     }
     get baseUrl() {
-        return `${this.config.apiUrl}${this.config.authPrefix}`;
+        return `${this.config?.apiUrl}${this.config?.authPrefix}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HandoffService, deps: [{ token: VALTECH_AUTH_CONFIG, optional: true }, { token: i1$8.HttpClient }, { token: AuthService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HandoffService, providedIn: 'root' }); }
@@ -30877,7 +30892,7 @@ class NotificationActionService {
         if (!route) {
             return 'no-action-route';
         }
-        const currentApp = this.config.appId;
+        const currentApp = this.config?.appId;
         const targetApp = notif.appId;
         // 2) Cross-app: handoff + full redirect
         //
@@ -30887,7 +30902,7 @@ class NotificationActionService {
         if (targetApp && currentApp && targetApp !== currentApp) {
             try {
                 const resp = await firstValueFrom(this.handoff.createHandoff({ targetAppId: targetApp, route }));
-                const baseUrl = resp.targetBaseUrl ?? this.config.appUrls?.[targetApp];
+                const baseUrl = resp.targetBaseUrl ?? this.config?.appUrls?.[targetApp];
                 if (!baseUrl) {
                     console.warn(`[NotificationAction] No baseUrl for app '${targetApp}' — backend did not return targetBaseUrl and no appUrls fallback configured`);
                     return 'cross-app-unconfigured';
@@ -46072,6 +46087,7 @@ class ContentReactionComponent {
         this.toast = inject(ToastService);
         this.i18n = inject(I18nService);
         this.auth = inject(AuthService, { optional: true });
+        this.isConfigured = computed(() => this.feedbackService.isConfigured());
         this.props = {};
         this.reactionSubmit = new EventEmitter();
         this.reactionChange = new EventEmitter();
@@ -46249,11 +46265,11 @@ class ContentReactionComponent {
         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 class=\"content-reaction\" [class.disabled]=\"resolvedProps().disabled\" [class.readonly]=\"resolvedProps().readonly\">\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 activeReactionValues(); 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\"> {{ state().comment.length }}/{{ resolvedProps().maxCommentLength }} </span>\n  </div>\n  }\n\n  <!-- Bot\u00F3n de env\u00EDo -->\n  @if (state().selectedValue && !state().isSubmitted) {\n  <ion-button expand=\"block\" [disabled]=\"!canSubmit()\" (click)=\"submitReaction()\" class=\"submit-button\">\n    @if (state().isLoading) {\n    <ion-spinner name=\"crescent\"></ion-spinner>\n    } @else { {{ state().hadPreviousReaction ? t('update') : t('submit') }} }\n  </ion-button>\n  }\n\n  <!-- Mensaje de confirmaci\u00F3n -->\n  @if (state().isSubmitted) {\n  <p class=\"submitted-message\">{{ t('thankYou') }}</p>\n  }\n\n  <!-- Error -->\n  @if (state().error) {\n  <p class=\"error-message\">{{ state().error }}</p>\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"] }] }); }
+    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: "@if (isConfigured()) {\n<div class=\"content-reaction\" [class.disabled]=\"resolvedProps().disabled\" [class.readonly]=\"resolvedProps().readonly\">\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 activeReactionValues(); 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\"> {{ state().comment.length }}/{{ resolvedProps().maxCommentLength }} </span>\n  </div>\n  }\n\n  <!-- Bot\u00F3n de env\u00EDo -->\n  @if (state().selectedValue && !state().isSubmitted) {\n  <ion-button expand=\"block\" [disabled]=\"!canSubmit()\" (click)=\"submitReaction()\" class=\"submit-button\">\n    @if (state().isLoading) {\n    <ion-spinner name=\"crescent\"></ion-spinner>\n    } @else { {{ state().hadPreviousReaction ? t('update') : t('submit') }} }\n  </ion-button>\n  }\n\n  <!-- Mensaje de confirmaci\u00F3n -->\n  @if (state().isSubmitted) {\n  <p class=\"submitted-message\">{{ t('thankYou') }}</p>\n  }\n\n  <!-- Error -->\n  @if (state().error) {\n  <p class=\"error-message\">{{ state().error }}</p>\n  } }\n</div>\n}\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 class=\"content-reaction\" [class.disabled]=\"resolvedProps().disabled\" [class.readonly]=\"resolvedProps().readonly\">\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 activeReactionValues(); 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\"> {{ state().comment.length }}/{{ resolvedProps().maxCommentLength }} </span>\n  </div>\n  }\n\n  <!-- Bot\u00F3n de env\u00EDo -->\n  @if (state().selectedValue && !state().isSubmitted) {\n  <ion-button expand=\"block\" [disabled]=\"!canSubmit()\" (click)=\"submitReaction()\" class=\"submit-button\">\n    @if (state().isLoading) {\n    <ion-spinner name=\"crescent\"></ion-spinner>\n    } @else { {{ state().hadPreviousReaction ? t('update') : t('submit') }} }\n  </ion-button>\n  }\n\n  <!-- Mensaje de confirmaci\u00F3n -->\n  @if (state().isSubmitted) {\n  <p class=\"submitted-message\">{{ t('thankYou') }}</p>\n  }\n\n  <!-- Error -->\n  @if (state().error) {\n  <p class=\"error-message\">{{ state().error }}</p>\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"] }]
+            args: [{ selector: 'val-content-reaction', standalone: true, imports: [CommonModule, FormsModule, IonButton, IonSpinner, IonTextarea], template: "@if (isConfigured()) {\n<div class=\"content-reaction\" [class.disabled]=\"resolvedProps().disabled\" [class.readonly]=\"resolvedProps().readonly\">\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 activeReactionValues(); 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\"> {{ state().comment.length }}/{{ resolvedProps().maxCommentLength }} </span>\n  </div>\n  }\n\n  <!-- Bot\u00F3n de env\u00EDo -->\n  @if (state().selectedValue && !state().isSubmitted) {\n  <ion-button expand=\"block\" [disabled]=\"!canSubmit()\" (click)=\"submitReaction()\" class=\"submit-button\">\n    @if (state().isLoading) {\n    <ion-spinner name=\"crescent\"></ion-spinner>\n    } @else { {{ state().hadPreviousReaction ? t('update') : t('submit') }} }\n  </ion-button>\n  }\n\n  <!-- Mensaje de confirmaci\u00F3n -->\n  @if (state().isSubmitted) {\n  <p class=\"submitted-message\">{{ t('thankYou') }}</p>\n  }\n\n  <!-- Error -->\n  @if (state().error) {\n  <p class=\"error-message\">{{ state().error }}</p>\n  } }\n</div>\n}\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: [{