valtech-components 2.0.691 → 2.0.692

package/src/lib/components/molecules/content-reaction/content-reaction.component.html

@@ -1,81 +0,0 @@
-<div
-  class="content-reaction"
-  [class.disabled]="resolvedProps().disabled"
-  [class.readonly]="resolvedProps().readonly"
->
-  <!-- Loading inicial -->
-  @if (state().isLoading && !state().selectedValue) {
-    <div class="loading-container">
-      <ion-spinner name="crescent"></ion-spinner>
-    </div>
-  } @else {
-    <!-- Pregunta -->
-    <p class="question">{{ resolvedProps().question }}</p>
-
-    <!-- Emojis -->
-    <div class="emoji-container">
-      @for (value of reactionValues; track value; let i = $index) {
-        <button
-          type="button"
-          class="emoji-button"
-          [class.selected]="isSelected(value)"
-          [class.negative]="value === 'negative' && isSelected(value)"
-          [class.neutral]="value === 'neutral' && isSelected(value)"
-          [class.positive]="value === 'positive' && isSelected(value)"
-          [attr.aria-label]="getEmojiLabel(i)"
-          [attr.aria-pressed]="isSelected(value)"
-          [disabled]="resolvedProps().disabled || resolvedProps().readonly"
-          (click)="selectReaction(value)"
-        >
-          <span class="emoji">{{ getEmoji(i) }}</span>
-        </button>
-      }
-    </div>
-
-    <!-- Campo de comentario (solo si hay selección) -->
-    @if (showCommentField()) {
-      <div class="comment-section">
-        <ion-textarea
-          [value]="state().comment"
-          [placeholder]="resolvedProps().commentPlaceholder"
-          [maxlength]="resolvedProps().maxCommentLength"
-          [disabled]="resolvedProps().disabled"
-          [rows]="3"
-          class="comment-textarea"
-          (ionInput)="updateComment($event)"
-        ></ion-textarea>
-        <span class="char-count">
-          {{ state().comment.length }}/{{ resolvedProps().maxCommentLength }}
-        </span>
-      </div>
-    }
-
-    <!-- Botón de envío -->
-    @if (state().selectedValue && !state().isSubmitted) {
-      <ion-button
-        expand="block"
-        [disabled]="!canSubmit()"
-        (click)="submitReaction()"
-        class="submit-button"
-      >
-        @if (state().isLoading) {
-          <ion-spinner name="crescent"></ion-spinner>
-        } @else {
-          {{ state().hadPreviousReaction ? t('update') : t('submit') }}
-        }
-      </ion-button>
-    }
-
-    <!-- Mensaje de confirmación -->
-    @if (state().isSubmitted) {
-      <p class="submitted-message">
-        {{ t('thankYou') }}
-      </p>
-    }
-
-    <!-- Error -->
-    @if (state().error) {
-      <p class="error-message">{{ state().error }}</p>
-    }
-  }
-</div>

package/src/lib/components/molecules/content-reaction/content-reaction.component.scss

@@ -1,157 +0,0 @@
-:host {
-  display: block;
-}
-
-.content-reaction {
-  padding: 16px;
-  text-align: center;
-
-  &.disabled {
-    opacity: 0.6;
-    pointer-events: none;
-  }
-
-  &.readonly {
-    pointer-events: none;
-  }
-}
-
-.question {
-  font-size: 16px;
-  font-weight: 500;
-  color: var(--ion-color-dark);
-  margin: 0 0 16px 0;
-}
-
-.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 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-
-  .emoji {
-    font-size: 32px;
-    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    line-height: 1;
-  }
-
-  &:hover:not(:disabled) {
-    transform: scale(1.1);
-    border-color: var(--ion-color-medium);
-  }
-
-  &:focus {
-    outline: 2px solid var(--ion-color-primary);
-    outline-offset: 2px;
-  }
-
-  &.selected {
-    transform: scale(1.2);
-
-    .emoji {
-      transform: scale(1.1);
-    }
-
-    &.negative {
-      border-color: var(--ion-color-danger);
-      background: var(--ion-color-danger-tint);
-      box-shadow: 0 4px 12px rgba(var(--ion-color-danger-rgb), 0.3);
-    }
-
-    &.neutral {
-      border-color: var(--ion-color-warning);
-      background: var(--ion-color-warning-tint);
-      box-shadow: 0 4px 12px rgba(var(--ion-color-warning-rgb), 0.3);
-    }
-
-    &.positive {
-      border-color: var(--ion-color-success);
-      background: var(--ion-color-success-tint);
-      box-shadow: 0 4px 12px rgba(var(--ion-color-success-rgb), 0.3);
-    }
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-}
-
-.comment-section {
-  margin-top: 16px;
-  animation: slideIn 0.3s ease-out;
-
-  .comment-textarea {
-    --background: var(--ion-color-light);
-    --border-radius: 8px;
-    --padding-start: 12px;
-    --padding-end: 12px;
-    width: 100%;
-  }
-
-  .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 0.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 {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}

package/src/lib/components/molecules/content-reaction/content-reaction.component.ts

@@ -1,273 +0,0 @@
-import {
-  Component,
-  inject,
-  Input,
-  Output,
-  EventEmitter,
-  OnInit,
-  OnChanges,
-  SimpleChanges,
-  signal,
-  computed,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import {
-  IonButton,
-  IonSpinner,
-  IonTextarea,
-} from '@ionic/angular/standalone';
-import { FeedbackService } from '../../../services/feedback/feedback.service';
-import { ReactionValue } from '../../../services/feedback/types';
-import { ToastService } from '../../../services/toast.service';
-import { I18nService } from '../../../services/i18n';
-import { AuthService } from '../../../services/auth/auth.service';
-import {
-  ContentReactionMetadata,
-  ContentReactionState,
-  ReactionSubmitEvent,
-  ReactionChangeEvent,
-} from './types';
-
-/**
- * Componente para reacciones de contenido con emojis.
- *
- * @example
- * ```html
- * <val-content-reaction
- *   [props]="{
- *     entityRef: { entityType: 'article', entityId: 'art-123' },
- *     question: '¿Te fue útil este artículo?'
- *   }"
- *   (reactionSubmit)="onReactionSubmit($event)"
- * />
- * ```
- */
-@Component({
-  selector: 'val-content-reaction',
-  standalone: true,
-  imports: [CommonModule, FormsModule, IonButton, IonSpinner, IonTextarea],
-  templateUrl: './content-reaction.component.html',
-  styleUrls: ['./content-reaction.component.scss'],
-})
-export class ContentReactionComponent implements OnInit, OnChanges {
-  private feedbackService = inject(FeedbackService);
-  private toast = inject(ToastService);
-  private i18n = inject(I18nService);
-  private auth = inject(AuthService, { optional: true });
-
-  @Input() props: Partial<ContentReactionMetadata> = {};
-  @Output() reactionSubmit = new EventEmitter<ReactionSubmitEvent>();
-  @Output() reactionChange = new EventEmitter<ReactionChangeEvent>();
-
-  // Estado reactivo
-  state = signal<ContentReactionState>({
-    selectedValue: null,
-    comment: '',
-    isLoading: false,
-    isSubmitted: false,
-    hadPreviousReaction: false,
-    error: null,
-  });
-
-  // Valores por defecto
-  readonly defaultEmojis: [string, string, string] = ['😞', '😐', '😊'];
-  readonly defaultLabels: [string, string, string] = [
-    'No me ayudó',
-    'Regular',
-    'Muy útil',
-  ];
-  readonly reactionValues: ReactionValue[] = ['negative', 'neutral', 'positive'];
-
-  // Computed properties
-  resolvedProps = computed(() => ({
-    entityRef: this.props.entityRef!,
-    question: this.props.question || this.t('question'),
-    showComment: this.props.showComment ?? true,
-    commentPlaceholder: this.props.commentPlaceholder || this.t('commentPlaceholder'),
-    maxCommentLength: this.props.maxCommentLength ?? 500,
-    emojis: this.props.emojis || this.defaultEmojis,
-    emojiLabels: this.props.emojiLabels || this.defaultLabels,
-    showThankYou: this.props.showThankYou ?? true,
-    thankYouMessage: this.props.thankYouMessage || this.t('thankYou'),
-    disabled: this.props.disabled ?? false,
-    readonly: this.props.readonly ?? false,
-  }));
-
-  showCommentField = computed(
-    () =>
-      this.state().selectedValue !== null && this.resolvedProps().showComment
-  );
-
-  canSubmit = computed(
-    () => this.state().selectedValue !== null && !this.state().isLoading
-  );
-
-  ngOnInit() {
-    this.loadPreviousReaction();
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes['props'] && !changes['props'].firstChange) {
-      this.loadPreviousReaction();
-    }
-  }
-
-  private async loadPreviousReaction(): Promise<void> {
-    if (!this.props.entityRef) return;
-
-    // Si hay initialValue, usarlo directamente sin consultar
-    if (this.props.initialValue) {
-      this.state.update((s) => ({
-        ...s,
-        selectedValue: this.props.initialValue!,
-        hadPreviousReaction: true,
-        isLoading: false,
-        isSubmitted: true,
-      }));
-      return;
-    }
-
-    // Si skipInitialCheck está activo, no consultar
-    if (this.props.skipInitialCheck) {
-      return;
-    }
-
-    this.state.update((s) => ({ ...s, isLoading: true, error: null }));
-
-    try {
-      const check = await this.feedbackService.checkFeedback(
-        this.props.entityRef.entityType,
-        this.props.entityRef.entityId
-      );
-
-      if (check.hasFeedback && check.reactionValue) {
-        this.state.update((s) => ({
-          ...s,
-          selectedValue: check.reactionValue!,
-          hadPreviousReaction: true,
-          isLoading: false,
-          isSubmitted: true,
-        }));
-      } else {
-        this.state.update((s) => ({ ...s, isLoading: false }));
-      }
-    } catch (error) {
-      console.error('Error loading previous reaction:', error);
-      this.state.update((s) => ({ ...s, isLoading: false }));
-    }
-  }
-
-  selectReaction(value: ReactionValue): void {
-    if (this.resolvedProps().disabled || this.resolvedProps().readonly) return;
-
-    const previousValue = this.state().selectedValue;
-
-    this.state.update((s) => ({
-      ...s,
-      selectedValue: value,
-      isSubmitted: false,
-      error: null,
-    }));
-
-    this.reactionChange.emit({ value, previousValue });
-  }
-
-  async submitReaction(): Promise<void> {
-    const currentState = this.state();
-    const props = this.resolvedProps();
-
-    if (!currentState.selectedValue || props.disabled) return;
-
-    this.state.update((s) => ({ ...s, isLoading: true, error: null }));
-
-    try {
-      // Determinar si usar endpoint anónimo o autenticado
-      const isAuthenticated = this.auth?.isAuthenticated() ?? false;
-      const useAnonymous = this.props.allowAnonymous && !isAuthenticated;
-
-      if (useAnonymous) {
-        // Usar endpoint anónimo (público)
-        await this.feedbackService.createAnonymousReaction(
-          props.entityRef,
-          currentState.selectedValue,
-          currentState.comment || undefined
-        );
-      } else {
-        // Usar endpoint autenticado
-        await this.feedbackService.createReaction(
-          props.entityRef,
-          currentState.selectedValue,
-          currentState.comment || undefined
-        );
-      }
-
-      this.state.update((s) => ({
-        ...s,
-        isLoading: false,
-        isSubmitted: true,
-        hadPreviousReaction: !useAnonymous, // Solo para autenticados
-      }));
-
-      this.reactionSubmit.emit({
-        value: currentState.selectedValue,
-        comment: currentState.comment || undefined,
-        entityRef: props.entityRef,
-        isUpdate: currentState.hadPreviousReaction,
-      });
-
-      if (props.showThankYou) {
-        this.toast.show({
-          message: props.thankYouMessage,
-          duration: 2000,
-          position: 'bottom',
-          color: 'dark',
-        });
-      }
-    } catch (error) {
-      console.error('Error submitting reaction:', error);
-      this.state.update((s) => ({
-        ...s,
-        isLoading: false,
-        error: this.t('errorSubmitting'),
-      }));
-
-      this.toast.show({
-        message: this.t('errorSubmitting'),
-        duration: 3000,
-        position: 'bottom',
-        color: 'danger',
-      });
-    }
-  }
-
-  updateComment(event: CustomEvent): void {
-    const value = event.detail.value || '';
-    this.state.update((s) => ({ ...s, comment: value }));
-  }
-
-  getEmoji(index: number): string {
-    return this.resolvedProps().emojis[index];
-  }
-
-  getEmojiLabel(index: number): string {
-    return this.resolvedProps().emojiLabels[index];
-  }
-
-  isSelected(value: ReactionValue): boolean {
-    return this.state().selectedValue === value;
-  }
-
-  t(key: string): string {
-    const translations: Record<string, string> = {
-      question: '¿Te resultó útil este contenido?',
-      commentPlaceholder: 'Cuéntanos más (opcional)...',
-      submit: 'Enviar opinión',
-      update: 'Actualizar opinión',
-      thankYou: '¡Gracias por tu opinión!',
-      submitted: 'Tu opinión ha sido registrada',
-      errorSubmitting: 'Error al enviar. Intenta de nuevo.',
-    };
-    return this.i18n.t(key, 'ContentReaction') || translations[key] || key;
-  }
-}