@propbinder/mobile-design 0.2.50 → 0.2.53

package/src/components/message-bubble/ds-mobile-message-bubble.ts

@@ -1,633 +0,0 @@
-import { Component, input, output, computed } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DsAvatarComponent } from '@propbinder/design-system';
-import { DsIconComponent } from '@propbinder/design-system';
-
-/**
- * Chat attachment interface
- */
-export interface ChatAttachment {
-  id: string;
-  type: 'image' | 'pdf' | 'file';
-  url: string;
-  name: string;
-  size?: number;
-  thumbnail?: string;
-}
-
-/**
- * DsMobileMessageBubbleComponent
- * 
- * Individual message bubble component for chat conversations.
- * Supports left-aligned (sender) and right-aligned (user) messages with different styling.
- * 
- * Features:
- * - Left/right alignment based on sender
- * - Avatar display (left for sender, right for user)
- * - Message content with text wrapping
- * - Timestamp display
- * - Read receipt indicator (for user's messages)
- * - Attachment support
- * - Long press support for actions
- * 
- * @example
- * ```html
- * <!-- Sender's message (left-aligned) -->
- * <ds-mobile-message-bubble
- *   [isOwnMessage]="false"
- *   [senderName]="'Ricki Meihlen'"
- *   [content]="'We have received your case...'"
- *   [timestamp]="'12:34'"
- *   [avatarInitials]="'RM'">
- * </ds-mobile-message-bubble>
- * 
- * <!-- User's message (right-aligned) -->
- * <ds-mobile-message-bubble
- *   [isOwnMessage]="true"
- *   [senderName]="'You'"
- *   [content]="'Thank you!'"
- *   [timestamp]="'12:35'"
- *   [readStatus]="true"
- *   [avatarInitials]="'JD'">
- * </ds-mobile-message-bubble>
- * ```
- */
-@Component({
-  selector: 'ds-mobile-message-bubble',
-  standalone: true,
-  imports: [CommonModule, DsAvatarComponent, DsIconComponent],
-  host: {
-    '[class.is-own-message]': 'isOwnMessage()',
-    '[class.has-attachments]': 'attachments() && attachments()!.length > 0',
-    '[class.cluster-single]': 'clusterPosition() === "single"',
-    '[class.cluster-first]': 'clusterPosition() === "first"',
-    '[class.cluster-middle]': 'clusterPosition() === "middle"',
-    '[class.cluster-last]': 'clusterPosition() === "last"',
-    '[class.tapped]': 'isTapped',
-    '[class.is-new-message]': 'isNewMessage()',
-    '(touchstart)': 'handleTouchStart($event)',
-    '(touchend)': 'handleTouchEnd($event)',
-    '(touchmove)': 'handleTouchMove($event)',
-    '(contextmenu)': 'handleContextMenu($event)'
-  },
-  styles: [`
-    :host {
-      display: flex;
-      gap: 8px;
-      margin-bottom: 4px;
-      width: 100%;
-      align-items: flex-end;
-      box-sizing: border-box;
-    }
-    
-    /* Adjust spacing for clustered messages */
-    :host.cluster-single {
-      margin-bottom: 12px; /* More space after standalone messages */
-    }
-    
-    :host.cluster-first {
-      margin-bottom: 2px; /* Tight spacing in cluster */
-    }
-    
-    :host.cluster-middle {
-      margin-bottom: 2px; /* Tight spacing in cluster */
-    }
-    
-    :host.cluster-last {
-      margin-bottom: 12px; /* More space after cluster ends */
-    }
-    
-    /* Left-aligned (sender's message) */
-    :host:not(.is-own-message) {
-      justify-content: flex-start !important;
-      flex-direction: row !important;
-    }
-    
-    /* Right-aligned (user's message) - MUST be right-aligned */
-    :host.is-own-message {
-      justify-content: flex-end !important;
-      flex-direction: row-reverse !important;
-      margin-left: auto !important;
-      margin-right: 0 !important;
-    }
-    
-    .avatar-wrapper {
-      flex-shrink: 0;
-      display: flex;
-      align-items: flex-end;
-      width: 32px; /* Reserve space for avatar even when hidden */
-    }
-    
-    .avatar-wrapper.hidden {
-      visibility: hidden; /* Use visibility instead of display to maintain space */
-    }
-    
-    .message-content-wrapper {
-      display: flex;
-      flex-direction: column;
-      gap: 0;
-      max-width: 75%;
-      min-width: 0;
-    }
-    
-    /* Left-aligned message bubble */
-    :host:not(.is-own-message) .message-content-wrapper {
-      align-items: flex-start;
-    }
-    
-    /* Right-aligned message bubble */
-    :host.is-own-message .message-content-wrapper {
-      align-items: flex-end !important;
-      margin-left: auto !important;
-      margin-right: 0 !important;
-    }
-    
-    .message-bubble {
-      padding: 8px 12px;
-      border-radius: 20px;
-      position: relative;
-      word-wrap: break-word;
-      white-space: pre-wrap;
-      max-width: 100%;
-      display: flex;
-      flex-direction: column;
-      /* Tap animation with spring bounce, including border-radius */
-      transition: 
-        transform var(--spring-bouncy),
-        border-radius var(--spring-bouncy);
-      will-change: transform, border-radius;
-    }
-    
-    /* Scale down on tap */
-    :host.tapped .message-bubble {
-      transform: scale(0.96);
-    }
-    
-    /* Cluster position border radius overrides */
-    /* Order: top-left, top-right, bottom-right, bottom-left */
-    
-    /* Single message in cluster - 20px all around (default) */
-    
-    /* Own messages (right side) - tight corners on the RIGHT */
-    /* First message in cluster - 20px 20px 4px 20px */
-    :host.is-own-message.cluster-first .message-bubble {
-      border-radius: 20px 20px 4px 20px;
-    }
-    
-    /* Middle message in cluster - 20px 4px 4px 20px */
-    :host.is-own-message.cluster-middle .message-bubble {
-      border-radius: 20px 4px 4px 20px;
-    }
-    
-    /* Last message in cluster - 20px 4px 20px 20px */
-    :host.is-own-message.cluster-last .message-bubble {
-      border-radius: 20px 4px 20px 20px;
-    }
-    
-    /* Sender messages (left side, grey) - tight corners on the LEFT */
-    /* First message in cluster - 20px 20px 20px 4px */
-    :host:not(.is-own-message).cluster-first .message-bubble {
-      border-radius: 20px 20px 20px 4px;
-    }
-    
-    /* Middle message in cluster - 4px 20px 20px 4px */
-    :host:not(.is-own-message).cluster-middle .message-bubble {
-      border-radius: 4px 20px 20px 4px;
-    }
-    
-    /* Last message in cluster - 4px 20px 20px 20px */
-    :host:not(.is-own-message).cluster-last .message-bubble {
-      border-radius: 4px 20px 20px 20px;
-    }
-    
-    /* Sender's message - neutral secondary background, no border */
-    :host:not(.is-own-message) .message-bubble {
-      background: var(--color-background-neutral-secondary, #f5f5f5);
-    }
-    
-    /* User's message - brand primary surface background */
-    :host.is-own-message .message-bubble {
-      background: var(--color-accent, var(--color-accent, #6B5FF5));
-      color: var(--color-on-accent, #ffffff);
-    }
-    
-    .message-text {
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-sm);
-      font-weight: 400;
-      line-height: 20px;
-      letter-spacing: -0.3px;
-      margin: 0;
-    }
-    
-    :host:not(.is-own-message) .message-text {
-      color: var(--color-text-primary, #1a1a1a);
-    }
-    
-    :host.is-own-message .message-text {
-      color: var(--color-on-accent, #ffffff);
-    }
-    
-    /* Attachments container */
-    .attachments {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-      margin-top: 8px;
-    }
-    
-    :host:not(.is-own-message) .attachments {
-      justify-content: flex-start;
-    }
-    
-    :host.is-own-message .attachments {
-      justify-content: flex-end;
-    }
-    
-    .attachment-item {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 8px 12px;
-      background: var(--color-background-neutral-secondary, #f5f5f5);
-      border-radius: 8px;
-      border: 1px solid var(--border-color-default, #e5e5e5);
-      cursor: pointer;
-      transition: background 0.2s ease;
-    }
-    
-    :host.is-own-message .attachment-item {
-      background: rgba(255, 255, 255, 0.2);
-      border-color: rgba(255, 255, 255, 0.3);
-    }
-    
-    .attachment-item:active {
-      background: var(--color-background-neutral-secondary-hover, #ebebeb);
-    }
-    
-    :host.is-own-message .attachment-item:active {
-      background: rgba(255, 255, 255, 0.3);
-    }
-    
-    .attachment-icon {
-      flex-shrink: 0;
-      width: 24px;
-      height: 24px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 4px;
-      background: var(--color-background-neutral-primary, #ffffff);
-    }
-    
-    :host.is-own-message .attachment-icon {
-      background: rgba(255, 255, 255, 0.3);
-    }
-    
-    .attachment-name {
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-xs);
-      font-weight: 500;
-      line-height: 16px;
-      color: var(--color-text-primary, #1a1a1a);
-      max-width: 150px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    
-    :host.is-own-message .attachment-name {
-      color: var(--color-text-on-brand, #ffffff);
-    }
-    
-    /* Timestamp inside bubble */
-    .message-footer {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      align-self: flex-end; /* Always align to right within bubble */
-      height: 0;
-      margin-top: 0;
-      opacity: 0;
-      overflow: hidden;
-      transform: scale(0.95);
-      /* Spring bounce animation using design system variable */
-      transition: 
-        height var(--spring-bouncy),
-        margin-top var(--spring-bouncy),
-        opacity var(--spring-bouncy),
-        transform var(--spring-bouncy);
-    }
-    
-    /* Visible state - fade in and expand */
-    .message-footer.visible {
-      height: 14px;
-      margin-top: 4px;
-      opacity: 1;
-      transform: scale(1);
-    }
-    
-    /* Timestamp always right-aligned for both message types */
-    :host:not(.is-own-message) .message-footer {
-      align-self: flex-end; /* Right-align timestamp for sender's messages */
-    }
-    
-    .timestamp {
-      font-family: 'Brockmann', sans-serif;
-      font-size: 11px;
-      font-weight: 400;
-      line-height: 14px;
-      white-space: nowrap;
-    }
-    
-    /* Timestamp color for sender's messages (grey background) */
-    :host:not(.is-own-message) .timestamp {
-      color: var(--color-text-tertiary, #a0a0a0);
-    }
-    
-    /* Timestamp color for user's messages (brand background) */
-    :host.is-own-message .timestamp {
-      color: var(--color-on-accent, #ffffff);
-      opacity: 0.7;
-    }
-    
-    /* Long press tracking */
-    :host {
-      user-select: none;
-      -webkit-tap-highlight-color: transparent;
-    }
-    
-    /* New message animation - bouncy appearance with scale, opacity, and translateY */
-    :host.is-new-message {
-      animation: message-appear var(--spring-bouncy) forwards;
-    }
-    
-    @keyframes message-appear {
-      0% {
-        opacity: 0;
-        transform: translateY(20px) scale(0.92);
-      }
-      100% {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-      }
-    }
-  `],
-  template: `
-    @if (!isOwnMessage()) {
-      <div class="avatar-wrapper" [class.hidden]="!showAvatar()">
-        <ds-avatar
-          [initials]="avatarInitials()"
-          [type]="avatarType()"
-          [src]="avatarSrc()"
-          size="sm" />
-      </div>
-    }
-    
-    <div class="message-content-wrapper" (click)="handleClick($event)">
-      <div class="message-bubble">
-        <!-- Only show text if content is not empty -->
-        @if (content().trim()) {
-          <p class="message-text">{{ content() }}</p>
-        }
-        
-        <!-- Attachments -->
-        @if (attachments() && attachments()!.length > 0) {
-          <div class="attachments">
-            @for (attachment of attachments(); track attachment.id) {
-              <div 
-                class="attachment-item"
-                (click)="handleAttachmentClick(attachment); $event.stopPropagation()">
-                <div class="attachment-icon">
-                  @if (attachment.type === 'image') {
-                    <ds-icon name="remixImageLine" size="16px" />
-                  } @else if (attachment.type === 'pdf') {
-                    <ds-icon name="remixFilePdfLine" size="16px" />
-                  } @else {
-                    <ds-icon name="remixFileLine" size="16px" />
-                  }
-                </div>
-                <span class="attachment-name">{{ attachment.name }}</span>
-              </div>
-            }
-          </div>
-        }
-        
-        <!-- Timestamp inside bubble, animated on tap -->
-        <div class="message-footer" [class.visible]="showTimestamp()">
-          <span class="timestamp">{{ timestamp() }}</span>
-        </div>
-      </div>
-    </div>
-  `
-})
-export class DsMobileMessageBubbleComponent {
-  /**
-   * Message content text
-   */
-  content = input.required<string>();
-  
-  /**
-   * Whether this is the current user's message (right-aligned)
-   */
-  isOwnMessage = input<boolean>(false);
-  
-  /**
-   * Sender's name (for display purposes)
-   */
-  senderName = input<string>('');
-  
-  /**
-   * Timestamp text (e.g., "12:34", "08-12-2025 13:18")
-   */
-  timestamp = input.required<string>();
-  
-  /**
-   * Whether to show the timestamp below the bubble
-   */
-  showTimestamp = input<boolean>(false);
-  
-  /**
-   * Avatar initials
-   */
-  avatarInitials = input<string>('');
-  
-  /**
-   * Avatar type
-   */
-  avatarType = input<'initials' | 'photo' | 'icon'>('initials');
-  
-  /**
-   * Avatar photo source (for photo type)
-   */
-  avatarSrc = input<string>('');
-  
-  /**
-   * Whether to show the avatar (for clustering logic)
-   */
-  showAvatar = input<boolean>(true);
-  
-  /**
-   * Cluster position for border radius styling
-   */
-  clusterPosition = input<'single' | 'first' | 'middle' | 'last'>('single');
-  
-  /**
-   * Whether to show read receipt (only for user's messages)
-   */
-  /**
-   * Message attachments
-   */
-  attachments = input<ChatAttachment[] | undefined>(undefined);
-  
-  /**
-   * Whether the message is clickable
-   */
-  clickable = input<boolean>(false);
-  
-  /**
-   * Whether this is a newly sent message (triggers appearance animation)
-   */
-  isNewMessage = input<boolean>(false);
-  
-  /**
-   * Emits when attachment is clicked
-   */
-  attachmentClick = output<ChatAttachment>();
-  
-  /**
-   * Emits when the message is long-pressed
-   */
-  longPress = output<void>();
-  
-  /**
-   * Emits when the message is clicked (to toggle timestamp)
-   */
-  messageClick = output<void>();
-  
-  /**
-   * Long press tracking
-   */
-  private longPressTimer: any = null;
-  private longPressTriggered = false;
-  private touchStartX = 0;
-  private touchStartY = 0;
-  private readonly LONG_PRESS_DURATION = 500; // ms
-  private readonly MOVE_THRESHOLD = 10; // px
-  private clickStartTime = 0;
-  
-  /**
-   * Tap animation state
-   */
-  isTapped = false;
-  
-  /**
-   * Handle attachment click
-   */
-  handleAttachmentClick(attachment: ChatAttachment): void {
-    this.attachmentClick.emit(attachment);
-  }
-  
-  /**
-   * Handle click (for web/mouse support)
-   */
-  handleClick(event: MouseEvent): void {
-    if (!this.clickable()) return;
-    
-    // Prevent double-firing on touch devices
-    // Touch events will be handled by handleTouchEnd
-    if ((event as any).sourceCapabilities?.firesTouchEvents) {
-      return;
-    }
-    
-    // Emit message click to toggle timestamp
-    this.messageClick.emit();
-  }
-  
-  /**
-   * Handle touch start for long press detection
-   */
-  handleTouchStart(event: TouchEvent): void {
-    if (!this.clickable()) return;
-    
-    // Add tap scale animation
-    this.isTapped = true;
-    
-    this.longPressTriggered = false;
-    this.clickStartTime = Date.now();
-    this.touchStartX = event.touches[0].clientX;
-    this.touchStartY = event.touches[0].clientY;
-    
-    // Start long press timer
-    this.longPressTimer = setTimeout(() => {
-      this.longPressTriggered = true;
-      this.longPress.emit();
-    }, this.LONG_PRESS_DURATION);
-  }
-  
-  /**
-   * Handle touch end to clear long press timer and detect short tap
-   */
-  handleTouchEnd(event: TouchEvent): void {
-    // Remove tap scale animation
-    this.isTapped = false;
-    
-    const pressDuration = Date.now() - this.clickStartTime;
-    
-    if (this.longPressTimer) {
-      clearTimeout(this.longPressTimer);
-      this.longPressTimer = null;
-    }
-    
-    // If long press was triggered, prevent other actions
-    if (this.longPressTriggered) {
-      event.preventDefault();
-      event.stopPropagation();
-      this.longPressTriggered = false;
-      return;
-    }
-    
-    // Short tap (less than long press duration) - show timestamp
-    if (this.clickable() && pressDuration < this.LONG_PRESS_DURATION) {
-      // Check if moved too much
-      const touch = event.changedTouches[0];
-      const deltaX = Math.abs(touch.clientX - this.touchStartX);
-      const deltaY = Math.abs(touch.clientY - this.touchStartY);
-      
-      if (deltaX <= this.MOVE_THRESHOLD && deltaY <= this.MOVE_THRESHOLD) {
-        this.messageClick.emit();
-        event.preventDefault();
-      }
-    }
-  }
-  
-  /**
-   * Handle touch move to cancel long press if moved too much
-   */
-  handleTouchMove(event: TouchEvent): void {
-    if (!this.longPressTimer) return;
-    
-    const touch = event.touches[0];
-    const deltaX = Math.abs(touch.clientX - this.touchStartX);
-    const deltaY = Math.abs(touch.clientY - this.touchStartY);
-    
-    // Cancel long press if moved too far
-    if (deltaX > this.MOVE_THRESHOLD || deltaY > this.MOVE_THRESHOLD) {
-      clearTimeout(this.longPressTimer);
-      this.longPressTimer = null;
-      this.longPressTriggered = false;
-      // Remove tap animation if moved too far
-      this.isTapped = false;
-    }
-  }
-  
-  /**
-   * Handle context menu (right-click on desktop) to trigger long press action
-   */
-  handleContextMenu(event: Event): void {
-    if (!this.clickable()) return;
-    event.preventDefault();
-    this.longPress.emit();
-  }
-}
-

package/src/components/message-bubble/index.ts

@@ -1,7 +0,0 @@
-export { DsMobileMessageBubbleComponent, type ChatAttachment } from './ds-mobile-message-bubble';
-
-
-
-
-
-