valtech-components 2.0.687 → 2.0.689

package/src/lib/components/molecules/comment/comment.component.ts

@@ -0,0 +1,496 @@
+import { Component, Input, Output, EventEmitter, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonIcon, IonButton, IonPopover, IonList, IonItem, IonLabel } from '@ionic/angular/standalone';
+import { I18nService } from '../../../services/i18n';
+import { AvatarComponent } from '../../atoms/avatar/avatar.component';
+import { addIcons } from 'ionicons';
+import {
+  ellipsisHorizontal,
+  checkmarkCircle,
+  chatbubbleOutline,
+  heartOutline,
+  heart,
+  thumbsUpOutline,
+  thumbsUp,
+  happyOutline,
+  happy,
+  sadOutline,
+  sad,
+  chevronDown,
+  chevronUp,
+  pin,
+  pencil,
+  trash,
+  flag,
+  share,
+} from 'ionicons/icons';
+import {
+  CommentMetadata,
+  CommentAuthor,
+  CommentReaction,
+  CommentAction,
+  CommentMenuItem,
+  CommentAuthorClickEvent,
+  CommentReactionClickEvent,
+  CommentActionClickEvent,
+  CommentMenuItemClickEvent,
+  CommentLoadMoreEvent,
+} from './types';
+
+addIcons({
+  ellipsisHorizontal,
+  checkmarkCircle,
+  chatbubbleOutline,
+  heartOutline,
+  heart,
+  thumbsUpOutline,
+  thumbsUp,
+  happyOutline,
+  happy,
+  sadOutline,
+  sad,
+  chevronDown,
+  chevronUp,
+  pin,
+  pencil,
+  trash,
+  flag,
+  share,
+});
+
+@Component({
+  selector: 'val-comment',
+  standalone: true,
+  imports: [
+    CommonModule,
+    IonIcon,
+    IonButton,
+    IonPopover,
+    IonList,
+    IonItem,
+    IonLabel,
+    AvatarComponent,
+  ],
+  template: `
+    <div
+      class="comment"
+      [class.highlighted]="props.highlighted"
+      [class.pinned]="props.pinned"
+      [class.collapsed]="props.collapsed"
+      [style.--depth]="props.depth || 0"
+    >
+      @if (props.pinned) {
+        <div class="pinned-indicator">
+          <ion-icon name="pin"></ion-icon>
+          <span>{{ i18n.t('pinned') }}</span>
+        </div>
+      }
+
+      <div class="comment-main">
+        <div class="comment-avatar" (click)="onAuthorClick()">
+          @if (props.author.avatar) {
+            <val-avatar [props]="props.author.avatar"></val-avatar>
+          } @else {
+            <div class="avatar-placeholder">
+              {{ getInitials(props.author.name) }}
+            </div>
+          }
+        </div>
+
+        <div class="comment-body">
+          <div class="comment-header">
+            <div class="author-info" (click)="onAuthorClick()">
+              <span class="author-name">{{ props.author.name }}</span>
+              @if (props.author.verified) {
+                <ion-icon name="checkmark-circle" class="verified-badge"></ion-icon>
+              }
+              @if (props.author.username) {
+                <span class="author-username">&#64;{{ props.author.username }}</span>
+              }
+            </div>
+
+            <div class="comment-meta">
+              <span class="timestamp">{{ formatTimestamp(props.timestamp) }}</span>
+              @if (props.edited) {
+                <span class="edited-label">{{ i18n.t('edited') }}</span>
+              }
+            </div>
+
+            @if (props.menuItems && props.menuItems.length > 0) {
+              <ion-button
+                fill="clear"
+                size="small"
+                class="more-button"
+                [id]="'menu-trigger-' + props.token"
+              >
+                <ion-icon name="ellipsis-horizontal" slot="icon-only"></ion-icon>
+              </ion-button>
+
+              <ion-popover
+                [trigger]="'menu-trigger-' + props.token"
+                [dismissOnSelect]="true"
+              >
+                <ng-template>
+                  <ion-list>
+                    @for (item of props.menuItems; track item.token) {
+                      @if (item.dividerBefore) {
+                        <div class="menu-divider"></div>
+                      }
+                      <ion-item
+                        [button]="true"
+                        [detail]="false"
+                        [disabled]="item.disabled"
+                        (click)="onMenuItemClick(item)"
+                      >
+                        @if (item.icon) {
+                          <ion-icon
+                            [name]="item.icon"
+                            slot="start"
+                            [color]="item.color"
+                          ></ion-icon>
+                        }
+                        <ion-label [color]="item.color">
+                          {{ getMenuItemLabel(item) }}
+                        </ion-label>
+                      </ion-item>
+                    }
+                  </ion-list>
+                </ng-template>
+              </ion-popover>
+            }
+          </div>
+
+          @if (!props.collapsed) {
+            <div
+              class="comment-content"
+              [innerHTML]="processContent(displayContent)"
+            ></div>
+
+            @if (props.reactions && props.reactions.length > 0) {
+              <div class="comment-reactions">
+                @for (reaction of props.reactions; track reaction.token) {
+                  <button
+                    class="reaction-button"
+                    [class.active]="reaction.active"
+                    [style.--reaction-color]="getReactionColor(reaction)"
+                    (click)="onReactionClick(reaction)"
+                  >
+                    <ion-icon [name]="reaction.icon"></ion-icon>
+                    @if (reaction.count > 0) {
+                      <span class="reaction-count">{{ formatCount(reaction.count) }}</span>
+                    }
+                  </button>
+                }
+              </div>
+            }
+
+            @if (props.actions && props.actions.length > 0) {
+              <div class="comment-actions">
+                @for (action of props.actions; track action.token) {
+                  <ion-button
+                    fill="clear"
+                    size="small"
+                    [color]="action.color || 'medium'"
+                    [disabled]="action.disabled"
+                    (click)="onActionClick(action)"
+                  >
+                    @if (action.icon) {
+                      <ion-icon [name]="action.icon" slot="start"></ion-icon>
+                    }
+                    {{ getActionLabel(action) }}
+                  </ion-button>
+                }
+              </div>
+            }
+          } @else {
+            <button class="expand-button" (click)="onToggleCollapse()">
+              <ion-icon name="chevron-down"></ion-icon>
+              <span>{{ i18n.t('showComment') }}</span>
+            </button>
+          }
+        </div>
+      </div>
+
+      @if (!props.collapsed && hasChildren()) {
+        <div class="comment-children">
+          @if (props.collapsed) {
+            <button class="collapse-button" (click)="onToggleCollapse()">
+              <ion-icon name="chevron-up"></ion-icon>
+              <span>{{ i18n.t('hideReplies') }}</span>
+            </button>
+          }
+
+          @if (canShowChildren()) {
+            @for (child of props.children; track child.token) {
+              <val-comment
+                [props]="getChildProps(child)"
+                (authorClick)="authorClick.emit($event)"
+                (reactionClick)="reactionClick.emit($event)"
+                (actionClick)="actionClick.emit($event)"
+                (menuItemClick)="menuItemClick.emit($event)"
+                (loadMoreClick)="loadMoreClick.emit($event)"
+                (collapseToggle)="collapseToggle.emit($event)"
+              ></val-comment>
+            }
+
+            @if (hasMoreReplies()) {
+              <button class="load-more-button" (click)="onLoadMoreClick()">
+                <ion-icon name="chatbubble-outline"></ion-icon>
+                <span>{{ getLoadMoreRepliesText() }}</span>
+              </button>
+            }
+          } @else {
+            <button class="view-replies-button" (click)="onLoadMoreClick()">
+              <ion-icon name="chatbubble-outline"></ion-icon>
+              <span>{{ getViewRepliesText() }}</span>
+            </button>
+          }
+        </div>
+      }
+    </div>
+  `,
+  styleUrls: ['./comment.component.scss'],
+})
+/**
+ * val-comment
+ *
+ * A versatile comment component for forums, reviews, and social media.
+ * Supports author info, reactions, actions, nested replies, and more.
+ *
+ * @example Basic comment
+ * <val-comment [props]="{
+ *   token: '1',
+ *   author: { name: 'John Doe', username: 'johnd' },
+ *   content: 'This is a great post!',
+ *   timestamp: '2 hours ago'
+ * }"></val-comment>
+ *
+ * @example With reactions and actions
+ * <val-comment [props]="{
+ *   token: '1',
+ *   author: { name: 'Jane', avatar: avatarProps, verified: true },
+ *   content: 'Amazing content! Check out https://example.com',
+ *   timestamp: new Date(),
+ *   reactions: [
+ *     { token: 'like', icon: 'heart-outline', count: 42, active: false }
+ *   ],
+ *   actions: [
+ *     { token: 'reply', label: 'Reply', icon: 'chatbubble-outline' }
+ *   ],
+ *   menuItems: [
+ *     { token: 'edit', label: 'Edit', icon: 'pencil' },
+ *     { token: 'delete', label: 'Delete', icon: 'trash', color: 'danger' }
+ *   ]
+ * }"></val-comment>
+ *
+ * @input props: CommentMetadata - Configuration for the comment
+ * @output authorClick - Emits when author name/avatar is clicked
+ * @output reactionClick - Emits when a reaction is clicked
+ * @output actionClick - Emits when an action button is clicked
+ * @output menuItemClick - Emits when a menu item is clicked
+ * @output loadMoreClick - Emits when load more replies is clicked
+ * @output collapseToggle - Emits when comment is collapsed/expanded
+ */
+export class CommentComponent implements OnInit {
+  protected i18n = inject(I18nService);
+
+  @Input() props: CommentMetadata;
+
+  @Output() authorClick = new EventEmitter<CommentAuthorClickEvent>();
+  @Output() reactionClick = new EventEmitter<CommentReactionClickEvent>();
+  @Output() actionClick = new EventEmitter<CommentActionClickEvent>();
+  @Output() menuItemClick = new EventEmitter<CommentMenuItemClickEvent>();
+  @Output() loadMoreClick = new EventEmitter<CommentLoadMoreEvent>();
+  @Output() collapseToggle = new EventEmitter<{ token: string; collapsed: boolean }>();
+
+  displayContent: string = '';
+
+  ngOnInit(): void {
+    this.displayContent = this.props.content || this.props.contentFallback || '';
+  }
+
+  getInitials(name: string): string {
+    return name
+      .split(' ')
+      .map((n) => n[0])
+      .join('')
+      .substring(0, 2)
+      .toUpperCase();
+  }
+
+  formatTimestamp(timestamp: string | Date): string {
+    if (typeof timestamp === 'string') {
+      return timestamp;
+    }
+
+    const now = new Date();
+    const diff = now.getTime() - timestamp.getTime();
+    const seconds = Math.floor(diff / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+
+    if (seconds < 60) return this.i18n.t('justNow');
+    if (minutes < 60) return this.i18n.t('minutesAgo', '_global', { minutes: minutes.toString() });
+    if (hours < 24) return this.i18n.t('hoursAgo', '_global', { hours: hours.toString() });
+    if (days < 7) return this.i18n.t('daysAgo', '_global', { days: days.toString() });
+
+    return timestamp.toLocaleDateString();
+  }
+
+  getLoadMoreRepliesText(): string {
+    const count = this.getRemainingCount();
+    return this.i18n.t('loadMoreReplies') + ` (${count})`;
+  }
+
+  getViewRepliesText(): string {
+    const count = this.props.replyCount || this.props.children?.length || 0;
+    return this.i18n.t('viewReplies') + ` (${count})`;
+  }
+
+  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();
+  }
+
+  processContent(content: string): string {
+    if (this.props.autoLinkify === false) {
+      return this.escapeHtml(content);
+    }
+
+    // Escape HTML first
+    let processed = this.escapeHtml(content);
+
+    // URL regex
+    const urlRegex = /(https?:\/\/[^\s<]+[^\s<.,;:!?)\]'"])/gi;
+    processed = processed.replace(
+      urlRegex,
+      '<a href="$1" target="_blank" rel="noopener noreferrer" class="comment-link">$1</a>'
+    );
+
+    // @mentions
+    const mentionRegex = /@(\w+)/g;
+    processed = processed.replace(
+      mentionRegex,
+      '<span class="comment-mention">@$1</span>'
+    );
+
+    // #hashtags
+    const hashtagRegex = /#(\w+)/g;
+    processed = processed.replace(
+      hashtagRegex,
+      '<span class="comment-hashtag">#$1</span>'
+    );
+
+    // Preserve line breaks
+    processed = processed.replace(/\n/g, '<br>');
+
+    return processed;
+  }
+
+  private escapeHtml(text: string): string {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  getReactionColor(reaction: CommentReaction): string {
+    if (reaction.active && reaction.activeColor) {
+      return `var(--ion-color-${reaction.activeColor})`;
+    }
+    if (reaction.active) {
+      return 'var(--ion-color-primary)';
+    }
+    if (reaction.color) {
+      return `var(--ion-color-${reaction.color})`;
+    }
+    return 'var(--ion-color-medium)';
+  }
+
+  getActionLabel(action: CommentAction): string {
+    return action.label || action.contentFallback || '';
+  }
+
+  getMenuItemLabel(item: CommentMenuItem): string {
+    return item.label || item.contentFallback || '';
+  }
+
+  hasChildren(): boolean {
+    return !!(this.props.children && this.props.children.length > 0) ||
+           !!(this.props.replyCount && this.props.replyCount > 0);
+  }
+
+  canShowChildren(): boolean {
+    const maxDepth = this.props.maxDepth ?? 3;
+    const currentDepth = this.props.depth ?? 0;
+    return currentDepth < maxDepth && !!(this.props.children && this.props.children.length > 0);
+  }
+
+  getChildProps(child: CommentMetadata): CommentMetadata {
+    return {
+      ...child,
+      depth: (this.props.depth ?? 0) + 1,
+      maxDepth: this.props.maxDepth ?? 3,
+    };
+  }
+
+  hasMoreReplies(): boolean {
+    if (!this.props.replyCount) return false;
+    const loadedCount = this.props.children?.length ?? 0;
+    return this.props.replyCount > loadedCount;
+  }
+
+  getRemainingCount(): number {
+    const total = this.props.replyCount ?? 0;
+    const loaded = this.props.children?.length ?? 0;
+    return total - loaded;
+  }
+
+  onAuthorClick(): void {
+    this.authorClick.emit({
+      author: this.props.author,
+      commentToken: this.props.token,
+    });
+  }
+
+  onReactionClick(reaction: CommentReaction): void {
+    this.reactionClick.emit({
+      reaction,
+      commentToken: this.props.token,
+      isActive: !reaction.active,
+    });
+  }
+
+  onActionClick(action: CommentAction): void {
+    this.actionClick.emit({
+      action,
+      commentToken: this.props.token,
+    });
+  }
+
+  onMenuItemClick(item: CommentMenuItem): void {
+    this.menuItemClick.emit({
+      menuItem: item,
+      commentToken: this.props.token,
+    });
+  }
+
+  onLoadMoreClick(): void {
+    this.loadMoreClick.emit({
+      commentToken: this.props.token,
+      currentCount: this.props.children?.length ?? 0,
+    });
+  }
+
+  onToggleCollapse(): void {
+    this.collapseToggle.emit({
+      token: this.props.token,
+      collapsed: !this.props.collapsed,
+    });
+  }
+}