valtech-components 2.0.691 → 2.0.692

package/src/lib/components/organisms/comment-section/comment-section.component.scss

@@ -1,269 +0,0 @@
-:host {
-  display: block;
-}
-
-.comment-section {
-  &.loading {
-    pointer-events: none;
-  }
-}
-
-// === Header ===
-.section-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 12px;
-  margin-bottom: 20px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid var(--ion-color-light-shade);
-}
-
-.header-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.title-icon {
-  font-size: 24px;
-  color: var(--ion-color-primary);
-}
-
-.title {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--ion-text-color);
-}
-
-.count-badge {
-  font-size: 12px;
-  font-weight: 600;
-  --padding-start: 8px;
-  --padding-end: 8px;
-}
-
-.header-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.sort-select-item {
-  --padding-start: 0;
-  --padding-end: 0;
-  --inner-padding-end: 0;
-  --background: transparent;
-  --min-height: 36px;
-
-  ion-select {
-    --padding-start: 8px;
-    --padding-end: 8px;
-    min-width: 140px;
-    font-size: 14px;
-  }
-}
-
-.sort-icon {
-  font-size: 18px;
-  color: var(--ion-color-medium);
-  margin-right: 4px;
-}
-
-// === New Comment Input ===
-.new-comment-section {
-  margin-bottom: 24px;
-  padding: 16px;
-  background-color: var(--ion-color-light);
-  border-radius: 12px;
-}
-
-.input-wrapper {
-  display: flex;
-  gap: 12px;
-}
-
-.input-avatar {
-  flex-shrink: 0;
-
-  val-avatar {
-    --size: 40px;
-  }
-}
-
-.input-container {
-  flex: 1;
-  min-width: 0;
-}
-
-.comment-textarea {
-  --background: var(--ion-background-color);
-  --padding-start: 12px;
-  --padding-end: 12px;
-  --padding-top: 10px;
-  --padding-bottom: 10px;
-  border-radius: 8px;
-  font-size: 14px;
-  min-height: 60px;
-  border: 1px solid var(--ion-color-light-shade);
-  transition: border-color 0.2s;
-
-  &:focus-within {
-    border-color: var(--ion-color-primary);
-  }
-}
-
-.input-actions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 12px;
-  margin-top: 10px;
-}
-
-.char-counter {
-  font-size: 12px;
-  color: var(--ion-color-medium);
-
-  &.warning {
-    color: var(--ion-color-warning);
-    font-weight: 500;
-  }
-}
-
-// === Loading State ===
-.loading-state {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.skeleton-comment {
-  display: flex;
-  gap: 12px;
-  padding: 12px 0;
-
-  .skeleton-content {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-}
-
-// === Comments List ===
-.comments-list {
-  &.with-dividers {
-    val-comment {
-      padding: 16px 0;
-
-      &:first-child {
-        padding-top: 0;
-      }
-    }
-  }
-}
-
-.comment-divider {
-  height: 1px;
-  background-color: var(--ion-color-light-shade);
-  margin: 0;
-}
-
-// === Load More ===
-.load-more-section {
-  display: flex;
-  justify-content: center;
-  padding: 20px 0;
-
-  ion-button {
-    min-width: 200px;
-  }
-
-  ion-spinner {
-    width: 28px;
-    height: 28px;
-  }
-}
-
-// === Empty State ===
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 48px 24px;
-  text-align: center;
-}
-
-.empty-icon {
-  font-size: 64px;
-  color: var(--ion-color-medium);
-  opacity: 0.5;
-  margin-bottom: 16px;
-}
-
-.empty-title {
-  margin: 0 0 8px 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--ion-text-color);
-}
-
-.empty-message {
-  margin: 0;
-  font-size: 14px;
-  color: var(--ion-color-medium);
-  max-width: 300px;
-}
-
-// === Responsive ===
-@media (max-width: 576px) {
-  .section-header {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .header-actions {
-    width: 100%;
-  }
-
-  .sort-select-item {
-    width: 100%;
-
-    ion-select {
-      width: 100%;
-    }
-  }
-
-  .input-wrapper {
-    flex-direction: column;
-  }
-
-  .input-avatar {
-    display: none;
-  }
-
-  .input-actions {
-    flex-direction: column;
-    align-items: stretch;
-
-    ion-button {
-      width: 100%;
-    }
-  }
-}
-
-// === Dark Mode ===
-@media (prefers-color-scheme: dark) {
-  .new-comment-section {
-    background-color: var(--ion-color-step-100, #1a1a1a);
-  }
-
-  .comment-textarea {
-    --background: var(--ion-color-step-50, #121212);
-    border-color: var(--ion-color-step-200, #2a2a2a);
-  }
-}

package/src/lib/components/organisms/comment-section/comment-section.component.ts

@@ -1,429 +0,0 @@
-import { Component, Input, Output, EventEmitter, OnInit, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { I18nService } from '../../../services/i18n';
-import {
-  IonIcon,
-  IonButton,
-  IonBadge,
-  IonTextarea,
-  IonItem,
-  IonSelect,
-  IonSelectOption,
-  IonSpinner,
-  IonInfiniteScroll,
-  IonInfiniteScrollContent,
-} from '@ionic/angular/standalone';
-import { addIcons } from 'ionicons';
-import {
-  chatbubblesOutline,
-  filterOutline,
-  sendOutline,
-  chatbubbleEllipsesOutline,
-  swapVerticalOutline,
-} from 'ionicons/icons';
-
-import { CommentComponent } from '../../molecules/comment/comment.component';
-import { AvatarComponent } from '../../atoms/avatar/avatar.component';
-import { SkeletonComponent } from '../../atoms/skeleton/skeleton.component';
-import {
-  CommentSectionMetadata,
-  CommentSortOption,
-  CommentSortChangeEvent,
-  CommentSubmitEvent,
-  CommentSectionLoadMoreEvent,
-} from './types';
-import {
-  CommentAuthorClickEvent,
-  CommentReactionClickEvent,
-  CommentActionClickEvent,
-  CommentMenuItemClickEvent,
-  CommentLoadMoreEvent,
-} from '../../molecules/comment/types';
-
-addIcons({
-  chatbubblesOutline,
-  filterOutline,
-  sendOutline,
-  chatbubbleEllipsesOutline,
-  swapVerticalOutline,
-});
-
-@Component({
-  selector: 'val-comment-section',
-  standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    IonIcon,
-    IonButton,
-    IonBadge,
-    IonTextarea,
-    IonItem,
-    IonSelect,
-    IonSelectOption,
-    IonSpinner,
-    IonInfiniteScroll,
-    IonInfiniteScrollContent,
-    CommentComponent,
-    AvatarComponent,
-    SkeletonComponent,
-  ],
-  template: `
-    <div class="comment-section" [class.loading]="props.loading">
-      <!-- Header -->
-      <div class="section-header">
-        <div class="header-title">
-          <ion-icon name="chatbubbles-outline" class="title-icon"></ion-icon>
-          <h3 class="title">{{ displayTitle }}</h3>
-          @if (props.showCount !== false && props.count !== undefined) {
-            <ion-badge color="medium" class="count-badge">
-              {{ formatCount(props.count) }}
-            </ion-badge>
-          }
-        </div>
-
-        @if (props.sortOptions && props.sortOptions.length > 0) {
-          <div class="header-actions">
-            <ion-item lines="none" class="sort-select-item">
-              <ion-icon name="swap-vertical-outline" slot="start" class="sort-icon"></ion-icon>
-              <ion-select
-                [value]="props.selectedSort"
-                [placeholder]="props.sortLabel || getSortByLabel()"
-                interface="popover"
-                (ionChange)="onSortChange($event)"
-              >
-                @for (option of props.sortOptions; track option.token) {
-                  <ion-select-option [value]="option.token">
-                    {{ getSortOptionLabel(option) }}
-                  </ion-select-option>
-                }
-              </ion-select>
-            </ion-item>
-          </div>
-        }
-      </div>
-
-      <!-- New Comment Input -->
-      @if (props.showInput !== false) {
-        <div class="new-comment-section">
-          <div class="input-wrapper">
-            @if (props.inputConfig?.currentUser?.avatar) {
-              <div class="input-avatar">
-                <val-avatar [props]="props.inputConfig.currentUser.avatar"></val-avatar>
-              </div>
-            }
-
-            <div class="input-container">
-              <ion-textarea
-                [(ngModel)]="newCommentText"
-                [placeholder]="getInputPlaceholder()"
-                [maxlength]="props.inputConfig?.maxLength || 2000"
-                [disabled]="props.inputConfig?.disabled || props.loading"
-                [autoGrow]="true"
-                rows="2"
-                class="comment-textarea"
-              ></ion-textarea>
-
-              <div class="input-actions">
-                @if (props.inputConfig?.showCounter && props.inputConfig?.maxLength) {
-                  <span class="char-counter" [class.warning]="isNearLimit()">
-                    {{ newCommentText.length }} / {{ props.inputConfig.maxLength }}
-                  </span>
-                }
-
-                <ion-button
-                  [color]="props.inputConfig?.submitColor || props.color || 'primary'"
-                  [disabled]="!canSubmit()"
-                  size="small"
-                  (click)="onSubmitComment()"
-                >
-                  <ion-icon name="send-outline" slot="start"></ion-icon>
-                  {{ getSubmitLabel() }}
-                </ion-button>
-              </div>
-            </div>
-          </div>
-        </div>
-      }
-
-      @if (props.loading) {
-        <div class="loading-state">
-          @for (i of getSkeletonArray(); track i) {
-            <div class="skeleton-comment">
-              <val-skeleton [props]="{ type: 'avatar', width: '36px', height: '36px' }"></val-skeleton>
-              <div class="skeleton-content">
-                <val-skeleton [props]="{ type: 'text', width: '120px', height: '14px' }"></val-skeleton>
-                <val-skeleton [props]="{ type: 'paragraph', lines: 2 }"></val-skeleton>
-              </div>
-            </div>
-          }
-        </div>
-      } @else if (props.comments && props.comments.length > 0) {
-        <div class="comments-list" [class.with-dividers]="props.showDividers">
-          @for (comment of props.comments; track comment.token) {
-            <val-comment
-              [props]="comment"
-              (authorClick)="authorClick.emit($event)"
-              (reactionClick)="reactionClick.emit($event)"
-              (actionClick)="onCommentAction($event)"
-              (menuItemClick)="menuItemClick.emit($event)"
-              (loadMoreClick)="commentLoadMore.emit($event)"
-              (collapseToggle)="collapseToggle.emit($event)"
-            ></val-comment>
-
-            @if (props.showDividers && !$last) {
-              <div class="comment-divider"></div>
-            }
-          }
-
-          @if (props.hasMore && props.paginationMode !== 'infinite') {
-            <div class="load-more-section">
-              @if (props.loadingMore) {
-                <ion-spinner name="crescent" [color]="props.color || 'primary'"></ion-spinner>
-              } @else {
-                <ion-button
-                  fill="outline"
-                  [color]="props.color || 'primary'"
-                  expand="block"
-                  (click)="onLoadMore()"
-                >
-                  {{ displayLoadMoreLabel }}
-                </ion-button>
-              }
-            </div>
-          }
-        </div>
-
-        @if (props.paginationMode === 'infinite') {
-          <ion-infinite-scroll
-            [threshold]="props.infiniteScrollThreshold || '100px'"
-            [position]="props.infiniteScrollPosition || 'bottom'"
-            [disabled]="!props.hasMore"
-            (ionInfinite)="onInfiniteScroll($event)"
-          >
-            <ion-infinite-scroll-content
-              [loadingSpinner]="'crescent'"
-              [loadingText]="displayLoadMoreLabel"
-            ></ion-infinite-scroll-content>
-          </ion-infinite-scroll>
-        }
-      } @else {
-        <div class="empty-state">
-          <ion-icon
-            [name]="props.emptyState?.icon || 'chatbubble-ellipses-outline'"
-            class="empty-icon"
-          ></ion-icon>
-          <h4 class="empty-title">{{ getEmptyTitle() }}</h4>
-          <p class="empty-message">{{ getEmptyMessage() }}</p>
-        </div>
-      }
-    </div>
-  `,
-  styleUrls: ['./comment-section.component.scss'],
-})
-/**
- * val-comment-section
- *
- * An organism component that provides a complete comment section with:
- * - Header with title and count
- * - Sort/filter options
- * - New comment input
- * - Comments list with val-comment
- * - Load more pagination
- * - Empty state
- *
- * @example Basic usage
- * <val-comment-section [props]="{
- *   title: 'Comments',
- *   count: 42,
- *   comments: commentsArray,
- *   showInput: true
- * }"></val-comment-section>
- *
- * @example With sorting
- * <val-comment-section [props]="{
- *   title: 'Reviews',
- *   count: 128,
- *   comments: reviews,
- *   sortOptions: [
- *     { token: 'newest', label: 'Newest first' },
- *     { token: 'oldest', label: 'Oldest first' },
- *     { token: 'popular', label: 'Most popular' }
- *   ],
- *   selectedSort: 'newest'
- * }" (sortChange)="onSort($event)"></val-comment-section>
- *
- * @input props: CommentSectionMetadata - Configuration for the section
- * @output sortChange - Sort option changed
- * @output commentSubmit - New comment submitted
- * @output loadMore - Load more clicked
- * @output authorClick - Comment author clicked (bubbled from val-comment)
- * @output reactionClick - Reaction clicked (bubbled)
- * @output actionClick - Action clicked (bubbled)
- * @output menuItemClick - Menu item clicked (bubbled)
- * @output commentLoadMore - Load more replies clicked (bubbled)
- * @output collapseToggle - Comment collapse toggled (bubbled)
- */
-export class CommentSectionComponent implements OnInit {
-  private i18n = inject(I18nService);
-
-  @Input() props: CommentSectionMetadata;
-
-  // Section events
-  @Output() sortChange = new EventEmitter<CommentSortChangeEvent>();
-  @Output() commentSubmit = new EventEmitter<CommentSubmitEvent>();
-  @Output() loadMore = new EventEmitter<CommentSectionLoadMoreEvent>();
-
-  // Bubbled events from val-comment
-  @Output() authorClick = new EventEmitter<CommentAuthorClickEvent>();
-  @Output() reactionClick = new EventEmitter<CommentReactionClickEvent>();
-  @Output() actionClick = new EventEmitter<CommentActionClickEvent>();
-  @Output() menuItemClick = new EventEmitter<CommentMenuItemClickEvent>();
-  @Output() commentLoadMore = new EventEmitter<CommentLoadMoreEvent>();
-  @Output() collapseToggle = new EventEmitter<{ token: string; collapsed: boolean }>();
-
-  // Reply state
-  @Output() replyStart = new EventEmitter<{ commentToken: string }>();
-
-  newCommentText = '';
-  replyingTo: string | null = null;
-
-  displayTitle = '';
-  displayLoadMoreLabel = '';
-
-  ngOnInit(): void {
-    this.updateDisplayTexts();
-  }
-
-  private updateDisplayTexts(): void {
-    this.displayTitle = this.props.title || this.i18n.t('comments');
-    this.displayLoadMoreLabel = this.props.loadMoreLabel || this.i18n.t('loadMoreComments');
-  }
-
-  getSortByLabel(): string {
-    return this.i18n.t('sortBy');
-  }
-
-  formatCount(count: number): string {
-    if (count >= 1000000) {
-      return (count / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
-    }
-    if (count >= 1000) {
-      return (count / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
-    }
-    return count.toString();
-  }
-
-  getSortOptionLabel(option: CommentSortOption): string {
-    return option.label;
-  }
-
-  getInputPlaceholder(): string {
-    return this.props.inputConfig?.placeholder || this.i18n.t('writeComment');
-  }
-
-  getSubmitLabel(): string {
-    return this.props.inputConfig?.submitLabel || this.i18n.t('publish');
-  }
-
-  getEmptyTitle(): string {
-    return this.props.emptyState?.title || this.i18n.t('noCommentsYet');
-  }
-
-  getEmptyMessage(): string {
-    return this.props.emptyState?.message || this.i18n.t('beFirstToComment');
-  }
-
-  getSkeletonArray(): number[] {
-    const count = this.props.skeletonCount || 3;
-    return Array(count).fill(0).map((_, i) => i);
-  }
-
-  canSubmit(): boolean {
-    const minLength = this.props.inputConfig?.minLength || 1;
-    return (
-      this.newCommentText.trim().length >= minLength &&
-      !this.props.loading &&
-      !this.props.inputConfig?.disabled
-    );
-  }
-
-  isNearLimit(): boolean {
-    const maxLength = this.props.inputConfig?.maxLength || 2000;
-    return this.newCommentText.length > maxLength * 0.9;
-  }
-
-  onSortChange(event: CustomEvent): void {
-    const selectedToken = event.detail.value;
-    const option = this.props.sortOptions?.find((o) => o.token === selectedToken);
-
-    if (option) {
-      this.sortChange.emit({
-        option,
-        previousSort: this.props.selectedSort,
-      });
-    }
-  }
-
-  onSubmitComment(): void {
-    if (!this.canSubmit()) return;
-
-    this.commentSubmit.emit({
-      content: this.newCommentText.trim(),
-      parentToken: this.replyingTo || undefined,
-      sectionToken: this.props.token,
-    });
-
-    this.newCommentText = '';
-    this.replyingTo = null;
-  }
-
-  onCommentAction(event: CommentActionClickEvent): void {
-    // Check if it's a reply action
-    if (event.action.token === 'reply') {
-      this.replyingTo = event.commentToken;
-      this.replyStart.emit({ commentToken: event.commentToken });
-    }
-
-    this.actionClick.emit(event);
-  }
-
-  onLoadMore(): void {
-    this.loadMore.emit({
-      sectionToken: this.props.token,
-      currentCount: this.props.comments?.length || 0,
-    });
-  }
-
-  onInfiniteScroll(event: CustomEvent): void {
-    this.loadMore.emit({
-      sectionToken: this.props.token,
-      currentCount: this.props.comments?.length || 0,
-    });
-
-    // The parent component should call completeInfiniteScroll() when done loading
-    // Store reference to complete the infinite scroll
-    this.infiniteScrollEvent = event;
-  }
-
-  // Call this method from parent after loading more comments
-  completeInfiniteScroll(): void {
-    if (this.infiniteScrollEvent) {
-      (this.infiniteScrollEvent.target as HTMLIonInfiniteScrollElement).complete();
-      this.infiniteScrollEvent = null;
-    }
-  }
-
-  private infiniteScrollEvent: CustomEvent | null = null;
-
-  // Method to programmatically start a reply
-  startReply(commentToken: string): void {
-    this.replyingTo = commentToken;
-  }
-
-  // Method to cancel reply
-  cancelReply(): void {
-    this.replyingTo = null;
-  }
-}