valtech-components 2.0.691 → 2.0.692

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

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