valtech-components 2.0.953 → 2.0.954

package/fesm2022/valtech-components.mjs

@@ -54,7 +54,7 @@ import 'prismjs/components/prism-json';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '2.0.953';
+const VERSION = '2.0.954';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -47918,6 +47918,7 @@ class ContentService {
         this.config = inject(VALTECH_CONTENT_CONFIG, { optional: true });
         this.http = inject(HttpClient);
         this.parser = inject(MarkdownArticleParserService);
+        this.auth = inject(AuthService, { optional: true });
         /** `true` si `provideValtechContent()` fue llamado en el bootstrap. */
         this.isConfigured = signal(!!this.config);
         /** Cache de las promesas de cada factory estática, keyed por locale. */
@@ -47973,6 +47974,44 @@ class ContentService {
     invalidate() {
         this.staticCache.clear();
     }
+    /**
+     * Lista los documentos publicados de la org activa del usuario autenticado.
+     *
+     * Requiere sesión activa (`AuthService.isAuthenticated()`). El interceptor de
+     * auth agrega automáticamente `Authorization: Bearer {token}` a la request.
+     *
+     * @param type  - Tipo de contenido (`'blog'`, `'news'`, …).
+     * @param options - `{ locale }` (default `'es'`).
+     * @returns Documentos de la org o `[]` si no hay config/sesión.
+     */
+    listForOrg(type, options = {}) {
+        if (!this.config?.apiUrl)
+            return of([]);
+        if (!this.auth?.isAuthenticated())
+            return of([]);
+        const locale = (options.locale ?? 'es').toLowerCase();
+        return this.listBackendOrg(type, locale).pipe(catchError$1(() => of([])));
+    }
+    /**
+     * Carga un documento de la org activa del usuario autenticado por `slug`.
+     *
+     * Requiere sesión activa. El interceptor de auth agrega el Bearer token.
+     *
+     * @param type  - Tipo de contenido.
+     * @param slug  - Slug del documento.
+     * @param options - `{ locale }` (default `'es'`).
+     * @returns El documento o error si no se encuentra / no hay sesión.
+     */
+    loadForOrg(type, slug, options = {}) {
+        if (!this.config?.apiUrl) {
+            return throwError(() => new Error('ContentService no está configurado.'));
+        }
+        if (!this.auth?.isAuthenticated()) {
+            return throwError(() => new Error('Se requiere sesión activa para cargar contenido de org.'));
+        }
+        const locale = (options.locale ?? 'es').toLowerCase();
+        return this.loadBackendOrg(type, slug, locale);
+    }
     // ===========================================================================
     // Internos
     // ===========================================================================
@@ -48019,6 +48058,26 @@ class ContentService {
             .get(path)
             .pipe(map(res => res?.item ?? res));
     }
+    /**
+     * GET `{apiUrl}/v2/content/org?type=&locale=` — publicados de la org activa.
+     * El Bearer token lo añade el interceptor de auth automáticamente.
+     */
+    listBackendOrg(type, locale) {
+        const params = new URLSearchParams({ type, locale });
+        return this.http
+            .get(`${this.config.apiUrl}/v2/content/org?${params}`)
+            .pipe(map(res => res?.items ?? []));
+    }
+    /**
+     * GET `{apiUrl}/v2/content/org/{type}/{locale}/{slug}` — detalle de la org activa.
+     * El Bearer token lo añade el interceptor de auth automáticamente.
+     */
+    loadBackendOrg(type, slug, locale) {
+        const path = `${this.config.apiUrl}/v2/content/org/${type}/${locale}/${encodeURIComponent(slug)}`;
+        return this.http
+            .get(path)
+            .pipe(map(res => res?.item ?? res));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ContentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ContentService, providedIn: 'root' }); }
 }
@@ -48473,6 +48532,8 @@ class ContentReactionComponent {
             thankYouMessage: this.props.thankYouMessage || this.t('thankYou'),
             disabled: this.props.disabled ?? false,
             readonly: this.props.readonly ?? false,
+            // Variante: 'emoji' cuando se declara explícitamente o cuando se pasan emojis custom.
+            variant: this.props.variant ?? (this.props.emojis ? 'emoji' : 'buttons'),
         }));
         this.activeReactionValues = computed(() => this.resolvedProps().emojis.length === 2 ? ['negative', 'positive'] : ['negative', 'neutral', 'positive']);
         this.showCommentField = computed(() => {
@@ -48630,11 +48691,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: "@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\">\n    {{ state().selectedValue === 'negative' ? t('negativeFeedbackTitle') : resolvedProps().question }}\n  </p>\n\n  <!-- Botones de reacci\u00F3n -->\n  <div class=\"reaction-buttons\">\n    <ion-button\n      [fill]=\"isSelected('positive') ? 'solid' : 'outline'\"\n      shape=\"round\"\n      color=\"dark\"\n      [attr.aria-pressed]=\"isSelected('positive')\"\n      [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n      (click)=\"selectReaction('positive')\"\n    >\n      {{ t('positiveLabel') }}\n    </ion-button>\n    <ion-button\n      [fill]=\"isSelected('negative') ? 'solid' : 'outline'\"\n      shape=\"round\"\n      color=\"dark\"\n      [attr.aria-pressed]=\"isSelected('negative')\"\n      [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n      (click)=\"selectReaction('negative')\"\n    >\n      {{ t('negativeLabel') }}\n    </ion-button>\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\" shape=\"round\" [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:17px;font-weight:700;color:var(--ion-color-dark);margin:0 0 16px}.reaction-buttons{display:flex;justify-content:center;gap:12px;margin-bottom:20px}.comment-section{margin-top:16px;animation:slideIn .3s ease-out}.comment-section .comment-textarea{--background: transparent;--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}.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\">\n    {{ state().selectedValue === 'negative' ? t('negativeFeedbackTitle') : resolvedProps().question }}\n  </p>\n\n  <!-- Botones de reacci\u00F3n \u2014 variante emoji (caras, estrellas, thumbs, \u2026) -->\n  @if (resolvedProps().variant === 'emoji') {\n  <div class=\"reaction-buttons reaction-buttons--emoji\">\n    @for (value of activeReactionValues(); track value; let i = $index) {\n    <ion-button\n      fill=\"clear\"\n      shape=\"round\"\n      [class.selected]=\"isSelected(value)\"\n      [attr.aria-label]=\"resolvedProps().emojiLabels[i]\"\n      [attr.aria-pressed]=\"isSelected(value)\"\n      [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n      (click)=\"selectReaction(value)\"\n    >\n      <span class=\"emoji-btn\">{{ resolvedProps().emojis[i] }}</span>\n    </ion-button>\n    }\n  </div>\n  } @else {\n  <!-- Botones de reacci\u00F3n \u2014 variante texto (default) -->\n  <div class=\"reaction-buttons\">\n    <ion-button\n      [fill]=\"isSelected('positive') ? 'solid' : 'outline'\"\n      shape=\"round\"\n      color=\"dark\"\n      [attr.aria-pressed]=\"isSelected('positive')\"\n      [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n      (click)=\"selectReaction('positive')\"\n    >\n      {{ t('positiveLabel') }}\n    </ion-button>\n    <ion-button\n      [fill]=\"isSelected('negative') ? 'solid' : 'outline'\"\n      shape=\"round\"\n      color=\"dark\"\n      [attr.aria-pressed]=\"isSelected('negative')\"\n      [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n      (click)=\"selectReaction('negative')\"\n    >\n      {{ t('negativeLabel') }}\n    </ion-button>\n  </div>\n  }\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\" shape=\"round\" [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:17px;font-weight:700;color:var(--ion-color-dark);margin:0 0 16px}.reaction-buttons{display:flex;justify-content:center;gap:12px;margin-bottom:20px}.reaction-buttons--emoji{gap:8px}.reaction-buttons--emoji ion-button{--padding-start: 4px;--padding-end: 4px;transition:transform .15s ease}.reaction-buttons--emoji ion-button.selected{transform:scale(1.25)}.reaction-buttons--emoji ion-button:not(.selected):not([disabled]){opacity:.55}.reaction-buttons--emoji ion-button:not(.selected):not([disabled]):hover{opacity:1}.emoji-btn{font-size:32px;line-height:1;display:block}.comment-section{margin-top:16px;animation:slideIn .3s ease-out}.comment-section .comment-textarea{--background: transparent;--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}.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: "@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\">\n    {{ state().selectedValue === 'negative' ? t('negativeFeedbackTitle') : resolvedProps().question }}\n  </p>\n\n  <!-- Botones de reacci\u00F3n -->\n  <div class=\"reaction-buttons\">\n    <ion-button\n      [fill]=\"isSelected('positive') ? 'solid' : 'outline'\"\n      shape=\"round\"\n      color=\"dark\"\n      [attr.aria-pressed]=\"isSelected('positive')\"\n      [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n      (click)=\"selectReaction('positive')\"\n    >\n      {{ t('positiveLabel') }}\n    </ion-button>\n    <ion-button\n      [fill]=\"isSelected('negative') ? 'solid' : 'outline'\"\n      shape=\"round\"\n      color=\"dark\"\n      [attr.aria-pressed]=\"isSelected('negative')\"\n      [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n      (click)=\"selectReaction('negative')\"\n    >\n      {{ t('negativeLabel') }}\n    </ion-button>\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\" shape=\"round\" [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:17px;font-weight:700;color:var(--ion-color-dark);margin:0 0 16px}.reaction-buttons{display:flex;justify-content:center;gap:12px;margin-bottom:20px}.comment-section{margin-top:16px;animation:slideIn .3s ease-out}.comment-section .comment-textarea{--background: transparent;--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}.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\">\n    {{ state().selectedValue === 'negative' ? t('negativeFeedbackTitle') : resolvedProps().question }}\n  </p>\n\n  <!-- Botones de reacci\u00F3n \u2014 variante emoji (caras, estrellas, thumbs, \u2026) -->\n  @if (resolvedProps().variant === 'emoji') {\n  <div class=\"reaction-buttons reaction-buttons--emoji\">\n    @for (value of activeReactionValues(); track value; let i = $index) {\n    <ion-button\n      fill=\"clear\"\n      shape=\"round\"\n      [class.selected]=\"isSelected(value)\"\n      [attr.aria-label]=\"resolvedProps().emojiLabels[i]\"\n      [attr.aria-pressed]=\"isSelected(value)\"\n      [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n      (click)=\"selectReaction(value)\"\n    >\n      <span class=\"emoji-btn\">{{ resolvedProps().emojis[i] }}</span>\n    </ion-button>\n    }\n  </div>\n  } @else {\n  <!-- Botones de reacci\u00F3n \u2014 variante texto (default) -->\n  <div class=\"reaction-buttons\">\n    <ion-button\n      [fill]=\"isSelected('positive') ? 'solid' : 'outline'\"\n      shape=\"round\"\n      color=\"dark\"\n      [attr.aria-pressed]=\"isSelected('positive')\"\n      [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n      (click)=\"selectReaction('positive')\"\n    >\n      {{ t('positiveLabel') }}\n    </ion-button>\n    <ion-button\n      [fill]=\"isSelected('negative') ? 'solid' : 'outline'\"\n      shape=\"round\"\n      color=\"dark\"\n      [attr.aria-pressed]=\"isSelected('negative')\"\n      [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n      (click)=\"selectReaction('negative')\"\n    >\n      {{ t('negativeLabel') }}\n    </ion-button>\n  </div>\n  }\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\" shape=\"round\" [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:17px;font-weight:700;color:var(--ion-color-dark);margin:0 0 16px}.reaction-buttons{display:flex;justify-content:center;gap:12px;margin-bottom:20px}.reaction-buttons--emoji{gap:8px}.reaction-buttons--emoji ion-button{--padding-start: 4px;--padding-end: 4px;transition:transform .15s ease}.reaction-buttons--emoji ion-button.selected{transform:scale(1.25)}.reaction-buttons--emoji ion-button:not(.selected):not([disabled]){opacity:.55}.reaction-buttons--emoji ion-button:not(.selected):not([disabled]):hover{opacity:1}.emoji-btn{font-size:32px;line-height:1;display:block}.comment-section{margin-top:16px;animation:slideIn .3s ease-out}.comment-section .comment-textarea{--background: transparent;--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}.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"] }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input
             }], reactionSubmit: [{