@propbinder/mobile-design 0.2.48 → 0.2.50

package/src/components/chat-modal/index.ts

@@ -0,0 +1,8 @@
+export { 
+  DsMobileChatModalComponent,
+  type ChatModalData,
+  type ChatMessage,
+  type ChatParticipant
+} from './ds-mobile-chat-modal';
+export { DsMobileChatModalService } from './ds-mobile-chat-modal.service';
+

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

@@ -0,0 +1,568 @@
+import { Component, input, output, signal, computed, inject, PLATFORM_ID, effect } from '@angular/core';
+import { CommonModule, isPlatformBrowser } 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::ng-deep button {
+        border-radius: 50% !important;
+      }
+
+      /* 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-accent, #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]="internalIsLiked()" (click)="toggleLike()">
+            <span class="like-count" [class.hidden]="internalLikeCount() === 0">{{ internalLikeCount() }}</span>
+            <div class="icon-wrapper">
+              <ds-icon class="icon-pulse" [class.animating]="isPulsing()" [name]="internalIsLiked() ? 'remixHeart3Fill' : 'remixHeart3Line'" size="16px" />
+              <ds-icon [name]="internalIsLiked() ? 'remixHeart3Fill' : 'remixHeart3Line'" size="16px" />
+            </div>
+          </div>
+
+          @if (shouldShowMoreButton()) {
+          <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()">{{ replyLabel() }}</div>
+        @if (isOwnComment()) {
+        <div class="action-edit" (click)="handleEdit()">{{ editLabel() }}</div>
+        }
+      </div>
+    </div>
+  `,
+})
+export class DsMobileCommentComponent {
+  private platformId = inject(PLATFORM_ID);
+  
+  /**
+   * Detect if viewport is desktop size
+   * Use viewport width for breakpoint detection (show button on tablet and above)
+   */
+  isDesktop = signal<boolean>(false);
+  
+  constructor() {
+    if (isPlatformBrowser(this.platformId)) {
+      // Show button on tablet breakpoint and above (768px+)
+      const isDesktopViewport = window.innerWidth >= 768;
+      
+      console.log('[Comment] Desktop detection:', {
+        innerWidth: window.innerWidth,
+        isDesktopViewport
+      });
+      
+      this.isDesktop.set(isDesktopViewport);
+      
+      // Listen for window resize to update detection
+      window.addEventListener('resize', () => {
+        const newIsDesktop = window.innerWidth >= 768;
+        if (newIsDesktop !== this.isDesktop()) {
+          console.log('[Comment] Viewport changed, updating desktop detection:', newIsDesktop);
+          this.isDesktop.set(newIsDesktop);
+        }
+      });
+    }
+
+    // Sync input signals with internal signals
+    effect(() => {
+      this.internalIsLiked.set(this.isLiked());
+    });
+
+    effect(() => {
+      this.internalLikeCount.set(this.likeCount());
+    });
+  }
+  
+  /**
+   * 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);
+
+  /**
+   * Unified toggle for contextual actions (more button + long press).
+   * - `true`  — more button visible on **all** breakpoints, long press enabled
+   * - `false` — more button hidden, long press suppressed
+   * - `undefined` (default) — falls back to desktop-only button
+   */
+  moreActions = input<boolean | undefined>(undefined);
+
+  shouldShowMoreButton = computed(() => {
+    const ma = this.moreActions();
+    if (ma !== undefined) return ma;
+    return this.isDesktop();
+  });
+
+  /**
+   * Label for the reply action button
+   */
+  replyLabel = input<string>('Svar');
+
+  /**
+   * Label for the edit action button
+   */
+  editLabel = input<string>('Rediger');
+
+  /**
+   * Whether this comment belongs to the current user
+   */
+  isOwnComment = input<boolean>(false);
+
+  /**
+   * Whether the comment is liked by current user
+   */
+  isLiked = input<boolean>(false);
+
+  /**
+   * Emits when like is toggled (after UI is opdateret)
+   */
+  likeToggled = output<{ active: boolean; count: number }>();
+
+  /**
+   * Number of likes
+   */
+  likeCount = input<number>(0);
+
+  /**
+   * Internal signal to track like state for UI updates
+   */
+  internalIsLiked = signal<boolean>(false);
+
+  /**
+   * Internal signal to track like count for UI updates
+   */
+  internalLikeCount = signal<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.internalIsLiked();
+    this.internalIsLiked.set(newLiked);
+
+    const newCount = newLiked ? this.internalLikeCount() + 1 : this.internalLikeCount() - 1;
+    this.internalLikeCount.set(Math.max(0, newCount));
+
+    // Emit the like toggled event
+    this.likeToggled.emit({ active: newLiked, count: 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 {
+    if (this.moreActions() === false) return;
+    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 {
+    if (this.moreActions() === false) return;
+    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';
+