valtech-components 2.0.687 → 2.0.689

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

@@ -0,0 +1,269 @@
+: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

@@ -0,0 +1,429 @@
+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;
+  }
+}