@propbinder/mobile-design 0.0.1 → 0.0.2

package/src/components/comment/ds-mobile-comment.ts

@@ -0,0 +1,516 @@
+import { Component, input, output, model, signal, computed } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DsAvatarComponent } from '@propbinder/design-system';
+import { DsIconComponent } from '@propbinder/design-system';
+import { DsIconButtonComponent } from '@propbinder/design-system';
+import { Haptics, ImpactStyle } from '@capacitor/haptics';
+
+/**
+ * DsMobileCommentComponent
+ * 
+ * Individual comment component for post discussions.
+ * Displays user comments with avatar, content, and like action.
+ * 
+ * @example
+ * ```html
+ * <ds-mobile-comment
+ *   [authorName]="'John Doe'"
+ *   [authorRole]="'Tenant'"
+ *   [timestamp]="'1h ago'"
+ *   [avatarInitials]="'JD'"
+ *   [content]="'Great post!'">
+ * </ds-mobile-comment>
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-comment',
+  standalone: true,
+  imports: [CommonModule, DsAvatarComponent, DsIconComponent, DsIconButtonComponent],
+  styleUrls: ['../shared/mobile-common.css'],
+  host: {
+    '[class.clickable]': 'clickable()',
+    '(click)': 'handleCommentClick($event)',
+    '(touchstart)': 'handleTouchStart($event)',
+    '(touchend)': 'handleTouchEnd($event)',
+    '(touchmove)': 'handleTouchMove($event)',
+    '(contextmenu)': 'handleContextMenu($event)'
+  },
+  styles: [`
+    :host {
+      display: flex;
+      gap: 12px;
+      padding: 8px;
+      position: relative;
+      border-radius: 16px;
+      transition: all 0.2s ease;
+      background: var(--color-background-primary, #ffffff);
+      margin-bottom: 8px;
+      margin-left: -8px;
+      margin-right: -8px;
+    }
+    
+    :host:last-child {
+      margin-bottom: 0;
+    }
+    
+    :host::after {
+      content: '';
+      position: absolute;
+      bottom: -4px;
+      /* Align with comment content: padding (8px) + avatar (32px) + gap (12px) */
+      left: 44px;
+      /* Align with comment content right edge: padding (8px) from right */
+      right: 8px;
+      height: 1px;
+      background: var(--border-color-default);
+    }
+    
+    :host:last-child::after {
+      display: none;
+    }
+    
+    :host.clickable {
+      cursor: pointer;
+    }
+    
+    :host.clickable:active {
+      background: var(--color-background-neutral-primary-hover, #f5f5f5);
+    }
+    
+    .avatar-wrapper {
+      position: relative;
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+    
+    .comment-content {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+    
+    .comment-header {
+      display: flex;
+      align-items: baseline;
+      gap: 6px;
+      flex-wrap: wrap;
+    }
+    
+    /* Wrapper for like and more actions */
+    .header-actions {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      margin-left: auto;
+    }
+    
+    /* Desktop more actions button - using ds-icon-button */
+    .desktop-more-button {
+      display: none; /* Hidden by default (mobile) */
+    }
+    
+    /* Make button circular */
+    .desktop-more-button::ng-deep button {
+      border-radius: 50% !important;
+    }
+    
+    /* Show only on desktop with hover capability */
+    @media (hover: hover) and (pointer: fine) {
+      .desktop-more-button {
+        display: block;
+      }
+    }
+    
+    /* Author styles imported from mobile-common.css */
+    
+    .action-like {
+      display: flex;
+      align-items: center;
+      gap: 2px;
+      color: var(--color-text-secondary, #737373);
+      cursor: pointer;
+      transition: color 0.2s ease;
+      user-select: none;
+      -webkit-tap-highlight-color: transparent;
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-xs);
+      font-weight: 500;
+      line-height: 18px;
+    }
+    
+    .like-count {
+      opacity: 1;
+    }
+    
+    .like-count.hidden {
+      opacity: 0;
+    }
+    
+    .action-like.active {
+      color: #f91880;
+    }
+    
+    .icon-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    
+    .icon-pulse {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      opacity: 0;
+      pointer-events: none;
+    }
+    
+    .icon-pulse.animating {
+      animation: pulse 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    
+    @keyframes pulse {
+      0% {
+        transform: translate(-50%, -50%) scale(1);
+        opacity: 0.8;
+      }
+      100% {
+        transform: translate(-50%, -50%) scale(2.5);
+        opacity: 0;
+      }
+    }
+    
+    .comment-text {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-sm);
+      font-weight: 400;
+      line-height: 22px;
+      letter-spacing: -0.3px;
+      color: var(--color-text-primary, #1a1a1a);
+      white-space: pre-wrap;
+      word-wrap: break-word;
+    }
+    
+    .comment-text ::ng-deep .mention {
+      color: var(--color-brand-base, #6B5FF5) !important;
+      font-weight: 600;
+    }
+    
+    .comment-actions {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-top: 4px;
+    }
+    
+    .action-reply {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-sm);
+      font-weight: 500;
+      line-height: 18px;
+      color: var(--color-text-secondary, #737373);
+      cursor: pointer;
+      user-select: none;
+      -webkit-tap-highlight-color: transparent;
+      transition: color 0.2s ease;
+    }
+    
+    .action-reply:hover {
+      color: var(--color-text-primary, #1a1a1a);
+    }
+    
+    .action-edit {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-sm);
+      font-weight: 500;
+      line-height: 18px;
+      color: var(--color-text-secondary, #737373);
+      cursor: pointer;
+      user-select: none;
+      -webkit-tap-highlight-color: transparent;
+      transition: color 0.2s ease;
+    }
+    
+    .action-edit:hover {
+      color: var(--color-text-primary, #1a1a1a);
+    }
+  `],
+  template: `
+    <div class="avatar-wrapper">
+      <ds-avatar 
+        [initials]="avatarInitials()"
+        [type]="avatarType()"
+        size="sm" />
+    </div>
+    
+    <div class="comment-content">
+      <div class="comment-header">
+        <span class="author-name">{{ authorName() }}</span>
+        <span class="author-meta">{{ authorRole() }} · {{ timestamp() }}</span>
+        
+        <!-- Wrapper for like and more actions -->
+        <div class="header-actions">
+          <div 
+            class="action-like"
+            [class.active]="isLiked()"
+            (click)="toggleLike()">
+            <span class="like-count" [class.hidden]="likeCount() === 0">{{ likeCount() }}</span>
+            <div class="icon-wrapper">
+              <ds-icon 
+                class="icon-pulse"
+                [class.animating]="isPulsing()"
+                [name]="isLiked() ? 'remixHeart3Fill' : 'remixHeart3Line'" 
+                size="16px" />
+              <ds-icon 
+                [name]="isLiked() ? 'remixHeart3Fill' : 'remixHeart3Line'" 
+                size="16px" />
+            </div>
+          </div>
+          
+          <!-- Desktop more button -->
+          <ds-icon-button
+            class="desktop-more-button"
+            icon="remixMoreFill"
+            variant="secondary"
+            size="sm"
+            (clicked)="handleMoreButtonClick($event)"
+            aria-label="More options">
+          </ds-icon-button>
+        </div>
+      </div>
+      
+      <div class="comment-text" [innerHTML]="formattedContent()"></div>
+      
+      <div class="comment-actions">
+        <div class="action-reply" (click)="handleReply()">
+          Reply
+        </div>
+        @if (isOwnComment()) {
+          <div class="action-edit" (click)="handleEdit()">
+            Edit
+          </div>
+        }
+      </div>
+    </div>
+  `
+})
+export class DsMobileCommentComponent {
+  /**
+   * Author's display name
+   */
+  authorName = input.required<string>();
+  
+  /**
+   * Author's role (e.g., "Tenant", "Property Manager")
+   */
+  authorRole = input.required<string>();
+  
+  /**
+   * Timestamp text (e.g., "1h ago", "2d ago")
+   */
+  timestamp = input.required<string>();
+  
+  /**
+   * Comment content text
+   */
+  content = input.required<string>();
+  
+  /**
+   * Avatar initials
+   */
+  avatarInitials = input<string>('');
+  
+  /**
+   * Avatar type
+   */
+  avatarType = input<'initials' | 'photo' | 'icon'>('initials');
+  
+  /**
+   * Whether the comment is clickable
+   */
+  clickable = input<boolean>(false);
+  
+  /**
+   * Whether this comment belongs to the current user
+   */
+  isOwnComment = input<boolean>(false);
+  
+  /**
+   * Whether the comment is liked by current user
+   */
+  isLiked = model<boolean>(false);
+  
+  /**
+   * Number of likes
+   */
+  likeCount = model<number>(0);
+  
+  /**
+   * Signal to control pulse animation
+   */
+  isPulsing = signal(false);
+  
+  /**
+   * Computed property to format content with @mentions
+   */
+  formattedContent = computed(() => {
+    const text = this.content();
+    // Replace @mentions with styled spans
+    // Matches @FirstName or @FirstName LastName (max 2 words)
+    return text.replace(/@([A-Za-z]+(?:\s+[A-Za-z]+)?)\b/g, '<span class="mention">@$1</span>');
+  });
+  
+  /**
+   * Emits when the comment card is clicked (if clickable)
+   */
+  commentClick = output<void>();
+  
+  /**
+   * Emits when reply is clicked
+   */
+  replyClick = output<void>();
+  
+  /**
+   * Emits when edit is clicked
+   */
+  editClick = output<void>();
+  
+  /**
+   * Emits when the comment is long-pressed
+   */
+  longPress = 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
+  
+  handleCommentClick(event: Event): void {
+    // Only emit if clickable and not clicking on action buttons
+    if (this.clickable() && !(event.target as HTMLElement).closest('.comment-actions')) {
+      this.commentClick.emit();
+    }
+  }
+  
+  async toggleLike(): Promise<void> {
+    const newLiked = !this.isLiked();
+    this.isLiked.set(newLiked);
+    
+    const newCount = newLiked ? this.likeCount() + 1 : this.likeCount() - 1;
+    this.likeCount.set(Math.max(0, newCount));
+    
+    // Trigger pulse animation only when liking
+    if (newLiked) {
+      this.isPulsing.set(true);
+      setTimeout(() => this.isPulsing.set(false), 400);
+    }
+    
+    // Haptic feedback for like/unlike
+    try {
+      await Haptics.impact({ style: ImpactStyle.Light });
+    } catch {
+      // Fallback to Web Vibration API if Capacitor Haptics is not available
+      if ('vibrate' in navigator) {
+        navigator.vibrate(50);
+      }
+    }
+  }
+  
+  handleReply(): void {
+    this.replyClick.emit();
+  }
+  
+  handleEdit(): void {
+    this.editClick.emit();
+  }
+  
+  /**
+   * Handle touch start for long press detection
+   */
+  handleTouchStart(event: TouchEvent): void {
+    this.longPressTriggered = false;
+    this.touchStartX = event.touches[0].clientX;
+    this.touchStartY = event.touches[0].clientY;
+    
+    // Start long press timer
+    this.longPressTimer = setTimeout(async () => {
+      this.longPressTriggered = true;
+      this.longPress.emit();
+      
+      // Haptic feedback for long press
+      try {
+        await Haptics.impact({ style: ImpactStyle.Medium });
+      } catch {
+        // Fallback to Web Vibration API if Capacitor Haptics is not available
+        if ('vibrate' in navigator) {
+          navigator.vibrate(50);
+        }
+      }
+    }, this.LONG_PRESS_DURATION);
+  }
+  
+  /**
+   * Handle touch end to clear long press timer
+   */
+  handleTouchEnd(event: TouchEvent): void {
+    if (this.longPressTimer) {
+      clearTimeout(this.longPressTimer);
+      this.longPressTimer = null;
+    }
+    
+    // Prevent normal click if long press was triggered
+    if (this.longPressTriggered) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.longPressTriggered = false;
+    }
+  }
+  
+  /**
+   * 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;
+    }
+  }
+  
+  /**
+   * Handle context menu (right-click on desktop) to trigger long press action
+   */
+  handleContextMenu(event: Event): void {
+    event.preventDefault();
+    this.longPress.emit();
+  }
+  
+  /**
+   * Handle desktop more button click
+   * Stops propagation and triggers long press action
+   */
+  handleMoreButtonClick(event: Event): void {
+    console.log('[Comment] Desktop more button clicked');
+    event.stopPropagation();
+    event.preventDefault();
+    this.longPress.emit();
+  }
+}
+

package/src/components/comment/index.ts

@@ -0,0 +1,2 @@
+export { DsMobileCommentComponent } from './ds-mobile-comment';
+

package/src/components/contact-list-item/ds-mobile-contact-list-item.ts

@@ -0,0 +1,182 @@
+import { Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DsIconComponent } from '@propbinder/design-system';
+import { DsAvatarComponent } from '@propbinder/design-system';
+
+/**
+ * DsMobileContactListItemComponent
+ * 
+ * Specialized interactive component for displaying contacts.
+ * Displays contact name with avatar initials and metadata (person name + phone number).
+ * Similar styling to file attachments with rounded corners and hover states.
+ * 
+ * @example
+ * ```html
+ * <ds-mobile-contact-list-item
+ *   [name]="'Mortensen & Søn ApS'"
+ *   [initials]="'M'"
+ *   [contactPerson]="'John Mortensen'"
+ *   [phoneNumber]="'+45 12 34 56 78'"
+ *   [clickable]="true"
+ *   (contactClick)="openContact()">
+ * </ds-mobile-contact-list-item>
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-contact-list-item',
+  standalone: true,
+  imports: [CommonModule, DsIconComponent, DsAvatarComponent],
+  host: {
+    '[class.clickable]': 'clickable()',
+    '(click)': 'handleContactClick()'
+  },
+  styles: [`
+    :host {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 10px 12px;
+      background: var(--color-background-neutral-secondary, #f5f5f5);
+      border-radius: 16px;
+      transition: all 0.2s ease;
+    }
+    
+    :host.clickable {
+      cursor: pointer;
+    }
+    
+    :host.clickable:hover {
+      background: var(--color-background-neutral-secondary-hover, #ebebeb);
+    }
+    
+    :host.clickable:active {
+      transform: scale(0.98);
+    }
+    
+    .contact-avatar {
+      flex-shrink: 0;
+    }
+
+    .contact-content {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      gap: 2px;
+      flex: 1;
+      min-width: 0;
+    }
+    
+    .contact-name {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-sm);
+      font-weight: 600;
+      line-height: 20px;
+      letter-spacing: -0.3px;
+      color: var(--color-text-primary, #1a1a1a);
+      margin: 0;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    
+    .contact-meta {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-xs);
+      font-weight: 400;
+      line-height: 1.2;
+      letter-spacing: -0.26px;
+      color: var(--color-text-tertiary, #737373);
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      margin: 0;
+    }
+    
+    .meta-separator {
+      color: var(--color-text-tertiary, #a0a0a0);
+    }
+    
+    .contact-trailing {
+      display: flex;
+      align-items: center;
+      color: var(--color-text-tertiary, #a3a3a3);
+      flex-shrink: 0;
+    }
+  `],
+  template: `
+    <div class="contact-avatar">
+      <ds-avatar
+        [initials]="initials()"
+        type="initials"
+        size="md"
+      />
+    </div>
+    
+    <div class="contact-content">
+      <div class="contact-name">{{ name() }}</div>
+      
+      @if (contactPerson() || phoneNumber()) {
+        <div class="contact-meta">
+          @if (contactPerson()) {
+            <span>{{ contactPerson() }}</span>
+          }
+          @if (contactPerson() && phoneNumber()) {
+            <span class="meta-separator">·</span>
+          }
+          @if (phoneNumber()) {
+            <span>{{ phoneNumber() }}</span>
+          }
+        </div>
+      }
+    </div>
+    
+    @if (showChevron()) {
+      <div class="contact-trailing">
+        <ds-icon name="remixArrowRightSLine" size="20px" />
+      </div>
+    }
+  `
+})
+export class DsMobileContactListItemComponent {
+  /**
+   * Contact/company name
+   */
+  name = input.required<string>();
+  
+  /**
+   * Avatar initials (usually 1-2 letters)
+   */
+  initials = input.required<string>();
+  
+  /**
+   * Contact person name (optional)
+   */
+  contactPerson = input<string>('');
+  
+  /**
+   * Phone number (optional)
+   */
+  phoneNumber = input<string>('');
+  
+  /**
+   * Whether the contact item is clickable
+   */
+  clickable = input<boolean>(true);
+  
+  /**
+   * Whether to show chevron icon
+   */
+  showChevron = input<boolean>(true);
+  
+  /**
+   * Emits when the contact item is clicked (if clickable)
+   */
+  contactClick = output<void>();
+  
+  handleContactClick(): void {
+    if (this.clickable()) {
+      this.contactClick.emit();
+    }
+  }
+}
+

package/src/components/contact-list-item/index.ts

@@ -0,0 +1,2 @@
+export { DsMobileContactListItemComponent } from './ds-mobile-contact-list-item';
+