valtech-components 2.0.904 → 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.904';
+const VERSION = '2.0.905';
 
 /**
  * Servicio para gestionar presets de componentes.
@@ -21912,6 +21912,9 @@ class AuthStorageService {
     constructor(config, platformId) {
         this.config = config;
         this.isBrowser = isPlatformBrowser(platformId);
+        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`,
@@ -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,6 +22095,9 @@ class AuthSyncService {
         /** Observable de eventos de sincronización */
         this.onEvent$ = this.eventSubject.asObservable();
         this.isBrowser = isPlatformBrowser(platformId);
+        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`;
     }
@@ -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
@@ -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.
@@ -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: [{