@propbinder/mobile-design 0.2.50 → 0.2.52

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

@@ -1,549 +0,0 @@
-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

@@ -1,124 +0,0 @@
-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

@@ -1,13 +0,0 @@
-// 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';
-