@propbinder/mobile-design 0.2.47 → 0.2.50

package/src/components/interactive-list-item-post/ds-mobile-interactive-list-item-post.ts

@@ -0,0 +1,549 @@
+import { Component, input, output, signal, model } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DsIconComponent } from '@propbinder/design-system';
+import { Haptics, ImpactStyle } from '@capacitor/haptics';
+import { DsMobileListItemComponent } from '../list-item';
+import { DsAvatarWithBadgeComponent } from '../avatar-with-badge/ds-avatar-with-badge';
+
+/**
+ * DsMobileInteractiveListItemPostComponent
+ * 
+ * Specialized interactive list item for displaying social media posts.
+ * Built on top of ds-mobile-interactive-list-item base component.
+ * Displays user posts with avatar, content, media, and action buttons.
+ * Follows Threads-inspired design with clean layout and interactions.
+ * 
+ * @example
+ * ```html
+ * <ds-mobile-interactive-list-item-post
+ *   [authorName]="'John Doe'"
+ *   [authorRole]="'Tenant'"
+ *   [timestamp]="'2h ago'"
+ *   [avatarInitials]="'JD'"
+ *   [clickable]="true"
+ *   [enableLongPress]="true"
+ *   (postClick)="openPost()">
+ *   
+ *   <post-content>
+ *     <post-text>This is a sample post...</post-text>
+ *   </post-content>
+ *   
+ *   <post-actions>
+ *     <action-like [active]="true" count="42" />
+ *     <action-comment count="12" />
+ *   </post-actions>
+ * </ds-mobile-interactive-list-item-post>
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-interactive-list-item-post',
+  standalone: true,
+  imports: [CommonModule, DsAvatarWithBadgeComponent, DsMobileListItemComponent],
+  styles: [`
+    :host {
+      display: block;
+    }
+    
+    /* Hide divider on last child */
+    :host:last-child {
+      --divider-display: none;
+      --item-padding-bottom: 0;
+    }
+    
+    .post-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 32px;
+      margin-bottom: 8px;
+    }
+    
+    .menu-slot {
+      flex-shrink: 0;
+    }
+  `],
+  template: `
+    <ds-mobile-list-item
+      [leadingSize]="'32px'"
+      [align]="align()"
+      [variant]="variant()"
+      [interactive]="clickable()"
+      [enableLongPress]="enableLongPress()"
+      [moreActions]="moreActions()"
+      (itemClick)="handlePostClick()"
+      (longPress)="handleLongPress()"
+      (moreButtonClick)="handleMoreButtonClick($event)">
+      
+      <div content-leading>
+        <ds-avatar-with-badge
+          [type]="avatarType()"
+          [initials]="avatarInitials()"
+          [src]="avatarSrc()"
+          [iconName]="avatarIconName()"
+          [size]="'md'"
+          [showBadge]="showBadge()"
+          [badgePosition]="'bottom-right'"
+        />
+      </div>
+      
+      <div content-main>
+        <div class="post-header">
+          <div class="author-details">
+            <div class="author-name">{{ authorName() }}</div>
+            <div class="author-meta">{{ authorRole() }} · {{ timestamp() }}</div>
+          </div>
+          
+          <div class="menu-slot">
+            <ng-content select="post-menu" />
+          </div>
+        </div>
+        
+        <ng-content select="post-content" />
+        <ng-content select="post-actions" />
+      </div>
+    </ds-mobile-list-item>
+  `
+})
+export class DsMobileInteractiveListItemPostComponent {
+  /**
+   * Author's display name
+   */
+  authorName = input.required<string>();
+  
+  /**
+   * Author's role (e.g., "Tenant", "Property Manager")
+   */
+  authorRole = input.required<string>();
+  
+  /**
+   * Timestamp text (e.g., "2h ago", "1d ago")
+   */
+  timestamp = input.required<string>();
+  
+  /**
+   * Avatar initials (for initials type)
+   */
+  avatarInitials = input<string>('');
+  
+  /**
+   * Avatar type
+   */
+  avatarType = input<'initials' | 'photo' | 'icon'>('initials');
+  
+  /**
+   * Avatar photo source (for photo type)
+   */
+  avatarSrc = input<string>('');
+  
+  /**
+   * Icon name (for icon type avatars)
+   */
+  avatarIconName = input<string>('remixUser3Fill');
+  
+  /**
+   * Show badge on avatar (e.g., for property managers)
+   */
+  showBadge = input<boolean>(false);
+  
+  /**
+   * Display variant
+   * - undefined (default) - Standard display
+   * - 'compact' - Compact display for nested/related posts
+   */
+  variant = input<'compact' | undefined>(undefined);
+  
+  /**
+   * Vertical alignment of content
+   * - 'top' - Align to top (default)
+   * - 'center' - Align to center
+   * - 'bottom' - Align to bottom
+   */
+  align = input<'top' | 'center' | 'bottom'>('top');
+  
+  /**
+   * Whether the post card is clickable
+   */
+  clickable = input<boolean>(false);
+  
+  /**
+   * Enable long-press interaction when clickable is true
+   * Set to false to disable long-press but keep click
+   * Also controls visibility of desktop "more" button
+   * @default true
+   */
+  enableLongPress = input<boolean>(true);
+
+  /**
+   * Unified toggle for contextual actions (more button + long press).
+   * When set, takes precedence over `enableLongPress`.
+   */
+  moreActions = input<boolean | undefined>(undefined);
+
+  /**
+   * Emits when the post card is clicked (if clickable)
+   */
+  postClick = output<void>();
+  
+  /**
+   * Emits when the comment button is clicked
+   */
+  commentClick = output<void>();
+  
+  /**
+   * Emits when the post card is long-pressed
+   */
+  longPress = output<void>();
+  
+  handlePostClick(): void {
+    console.log('[InteractiveListItemPost] handlePostClick called, emitting postClick');
+    this.postClick.emit();
+  }
+  
+  handleCommentClick(): void {
+    this.commentClick.emit();
+  }
+  
+  handleLongPress(): void {
+    this.longPress.emit();
+  }
+  
+  handleMoreButtonClick(event: Event): void {
+    // Desktop more button click - trigger the same action as long press
+    this.longPress.emit();
+  }
+}
+
+/**
+ * PostContentComponent
+ * 
+ * Main content section of the post.
+ * 
+ * Contains:
+ * - `<post-text>` - Text content
+ * - `<post-media>` - Optional images/videos
+ * - `<post-attachments>` - Optional file attachments
+ */
+@Component({
+  selector: 'post-content',
+  standalone: true,
+  styles: [`
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      margin-bottom: 8px;
+    }
+  `],
+  template: `
+    <ng-content select="post-text" />
+    <ng-content select="post-media" />
+    <ng-content select="ds-mobile-inline-photo" />
+    <ng-content select="post-attachments" />
+  `
+})
+export class PostContentComponent {}
+
+/**
+ * PostTextComponent
+ * 
+ * Text content of the post.
+ */
+@Component({
+  selector: 'post-text',
+  standalone: true,
+  styles: [`
+    :host {
+      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);
+      display: block;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+    }
+  `],
+  template: `<ng-content />`
+})
+export class PostTextComponent {}
+
+/**
+ * PostMediaComponent
+ * 
+ * Media container for images/videos.
+ */
+@Component({
+  selector: 'post-media',
+  standalone: true,
+  styles: [`
+    :host {
+      display: block;
+      border-radius: 8px;
+      overflow: hidden;
+    }
+    
+    ::ng-deep img {
+      width: 100%;
+      height: auto;
+      display: block;
+    }
+    
+    ::ng-deep video {
+      width: 100%;
+      height: auto;
+      display: block;
+    }
+  `],
+  template: `<ng-content />`
+})
+export class PostMediaComponent {}
+
+/**
+ * PostAttachmentsComponent
+ * 
+ * Container for file attachments, links, etc.
+ */
+@Component({
+  selector: 'post-attachments',
+  standalone: true,
+  styles: [`
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+  `],
+  template: `<ng-content />`
+})
+export class PostAttachmentsComponent {}
+
+/**
+ * PostActionsComponent
+ * 
+ * Action buttons container (like, comment, share).
+ * 
+ * Contains:
+ * - `<action-like>` - Like button with count
+ * - `<action-comment>` - Comment button with count
+ * - `<action-share>` - Share button
+ */
+@Component({
+  selector: 'post-actions',
+  standalone: true,
+  styles: [`
+    :host {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding-top: 4px;
+    }
+  `],
+  template: `<ng-content />`
+})
+export class PostActionsComponent {}
+
+/**
+ * ActionLikeComponent
+ * 
+ * Like action button with count display and animated heart icon.
+ */
+@Component({
+  selector: 'action-like',
+  standalone: true,
+  imports: [CommonModule, DsIconComponent],
+  host: {
+    '[class.active]': 'active()',
+    '(click)': 'handleClick($event)'
+  },
+  styles: [`
+    :host {
+      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;
+    }
+    
+    :host.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;
+      }
+    }
+    
+    .count {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-xs);
+      font-weight: 500;
+      line-height: 20px;
+      letter-spacing: -0.28px;
+    }
+  `],
+  template: `
+    <div class="icon-wrapper">
+      <ds-icon 
+        #pulseIcon
+        class="icon-pulse"
+        [class.animating]="isPulsing()"
+        [name]="active() ? 'remixHeart3Fill' : 'remixHeart3Line'" 
+        size="20px" />
+      <ds-icon 
+        [name]="active() ? 'remixHeart3Fill' : 'remixHeart3Line'" 
+        size="20px" />
+    </div>
+    @if (count() > 0) {
+      <span class="count">{{ count() }}</span>
+    }
+  `
+})
+export class ActionLikeComponent {
+  /**
+   * Whether the like is active (user has liked)
+   * Using model() for two-way binding
+   */
+  active = model<boolean>(false);
+  
+  /**
+   * Number of likes
+   * Using model() for two-way binding
+   */
+  count = model<number>(0);
+  
+  /**
+   * Emits when the like button is clicked
+   */
+  likeClick = output<{ active: boolean; count: number }>();
+  
+  /**
+   * Signal to control pulse animation
+   */
+  isPulsing = signal(false);
+  
+  async handleClick(event: Event): Promise<void> {
+    event.stopPropagation();
+    
+    // Toggle active state
+    const newActive = !this.active();
+    this.active.set(newActive);
+    
+    // Update count
+    const newCount = newActive ? this.count() + 1 : this.count() - 1;
+    this.count.set(Math.max(0, newCount));
+    
+    // Trigger pulse animation only when liking
+    if (newActive) {
+      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);
+      }
+    }
+    
+    // Emit the event with the new state
+    this.likeClick.emit({ active: newActive, count: newCount });
+  }
+}
+
+/**
+ * ActionCommentComponent
+ * 
+ * Comment action button with count display.
+ */
+@Component({
+  selector: 'action-comment',
+  standalone: true,
+  imports: [CommonModule, DsIconComponent],
+  host: {
+    '(click)': 'handleClick($event)'
+  },
+  styles: [`
+    :host {
+      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;
+    }
+    
+    :host:active {
+      transform: scale(0.95);
+    }
+    
+    :host:hover {
+      color: var(--color-text-primary, #1a1a1a);
+    }
+    
+    .count {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-xs);
+      font-weight: 500;
+      line-height: 20px;
+      letter-spacing: -0.28px;
+    }
+  `],
+  template: `
+    <ds-icon name="remixChat3Line" size="20px" />
+    @if (count() > 0) {
+      <span class="count">{{ count() }}</span>
+    }
+  `
+})
+export class ActionCommentComponent {
+  /**
+   * Number of comments
+   */
+  count = input<number>(0);
+  
+  /**
+   * Emits when the comment button is clicked
+   */
+  commentClick = output<void>();
+  
+  handleClick(event: Event): void {
+    event.stopPropagation();
+    this.commentClick.emit();
+  }
+}
+

package/src/components/interactive-list-item-post/ds-mobile-post-pdf-attachment.ts

@@ -0,0 +1,124 @@
+import { Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DsAvatarComponent } from '@propbinder/design-system';
+import { DsIconComponent } from '@propbinder/design-system';
+
+/**
+ * PostPdfAttachmentComponent
+ * 
+ * PDF file attachment display for posts.
+ * Shows PDF info card with icon, filename, and file size.
+ * Emits click event to open PDF in viewer.
+ */
+@Component({
+  selector: 'post-pdf-attachment',
+  standalone: true,
+  imports: [CommonModule, DsAvatarComponent, DsIconComponent],
+  host: {
+    '(click)': 'handleClick($event)'
+  },
+  styles: [`
+    :host {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 12px;
+      background: var(--color-background-neutral-secondary, #f5f5f5);
+      border-radius: 16px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+    }
+    
+    :host:hover {
+      background: var(--color-background-neutral-secondary-hover, #ebebeb);
+    }
+    
+    :host:active {
+      transform: scale(0.98);
+    }
+    
+    .pdf-avatar {
+      flex-shrink: 0;
+    }
+    
+    .pdf-avatar::ng-deep .avatar--icon {
+      background-color: #ff5757 !important;
+    }
+    
+    .pdf-info {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+    
+    .pdf-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);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    
+    .pdf-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);
+    }
+    
+    .open-icon {
+      color: var(--color-text-tertiary, #a3a3a3);
+      flex-shrink: 0;
+    }
+  `],
+  template: `
+    <div class="pdf-avatar">
+      <ds-avatar
+        type="icon"
+        iconName="remixFileTextLine"
+        size="md"
+      />
+    </div>
+    
+    <div class="pdf-info">
+      <div class="pdf-name">{{ fileName() }}</div>
+      <div class="pdf-meta">PDF · {{ fileSize() }}</div>
+    </div>
+    
+    <ds-icon 
+      name="remixArrowRightSLine" 
+      size="24px"
+      class="open-icon"
+    />
+  `
+})
+export class PostPdfAttachmentComponent {
+  /**
+   * PDF file name
+   */
+  fileName = input<string>('Document.pdf');
+  
+  /**
+   * File size display (e.g., "1.2 MB")
+   */
+  fileSize = input<string>('');
+  
+  /**
+   * Emits when the PDF attachment is clicked
+   */
+  pdfClick = output<void>();
+  
+  handleClick(event: Event): void {
+    event.stopPropagation();
+    this.pdfClick.emit();
+  }
+}
+

package/src/components/interactive-list-item-post/index.ts

@@ -0,0 +1,13 @@
+// Export the main component and shared post components without the indent
+export {
+  DsMobileInteractiveListItemPostComponent,
+  PostContentComponent,
+  PostTextComponent,
+  PostMediaComponent,
+  PostAttachmentsComponent,
+  PostActionsComponent,
+  ActionLikeComponent,
+  ActionCommentComponent
+} from './ds-mobile-interactive-list-item-post';
+export { PostPdfAttachmentComponent } from './ds-mobile-post-pdf-attachment';
+