@propbinder/mobile-design 0.0.1 → 0.0.2

package/src/components/post-card/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/post-card/index.ts

@@ -0,0 +1,11 @@
+export {
+  DsMobilePostCardComponent,
+  PostContentComponent,
+  PostTextComponent,
+  PostMediaComponent,
+  PostAttachmentsComponent,
+  PostActionsComponent,
+  ActionLikeComponent,
+  ActionCommentComponent
+} from './ds-mobile-post-card';
+

package/src/components/post-composer/ds-mobile-post-composer.ts

@@ -0,0 +1,140 @@
+import { Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DsAvatarComponent } from '@propbinder/design-system';
+
+/**
+ * DsMobilePostComposerComponent
+ * 
+ * A "fake" input composer for creating new posts in the community feed.
+ * Features a user avatar, placeholder input, and post button.
+ * Clicking opens the full post creation modal/page.
+ * 
+ * @example
+ * ```html
+ * <ds-mobile-post-composer
+ *   [avatarInitials]="'LM'"
+ *   [avatarType]="'photo'"
+ *   [avatarSrc]="'...'"
+ *   (composerClick)="openPostCreator()">
+ * </ds-mobile-post-composer>
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-post-composer',
+  standalone: true,
+  imports: [CommonModule, DsAvatarComponent],
+  host: {
+    '(click)': 'handleClick()'
+  },
+  styles: [`
+    :host {
+      display: block;
+      max-width: 640px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+    }
+    
+    .composer-container {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+    
+    .composer-input-wrapper {
+      flex: 1;
+      min-width: 0;
+    }
+    
+    .composer-input {
+      width: 100%;
+      background: rgba(255, 255, 255, 0.1);
+      border: none;
+      border-radius: 24px;
+      padding: 10px 16px;
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-sm);
+      font-weight: 400;
+      line-height: 20px;
+      letter-spacing: -0.3px;
+      color: rgba(255, 255, 255, 0.5);
+      outline: none;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      pointer-events: none;
+      user-select: none;
+    }
+    
+    .composer-input::placeholder {
+      color: rgba(255, 255, 255, 0.5);
+      opacity: 1;
+    }
+    
+    /* Hover effects for desktop */
+    @media (hover: hover) {
+      :host:hover .composer-input {
+        opacity: 0.8;
+      }
+    }
+  `],
+  template: `
+    <div class="composer-container">
+      <ds-avatar 
+        [initials]="avatarInitials()"
+        [type]="avatarType()"
+        [src]="avatarSrc()"
+        [iconName]="avatarIconName()"
+        size="md" />
+      
+      <div class="composer-input-wrapper">
+        <input 
+          type="text" 
+          class="composer-input" 
+          [placeholder]="placeholder()"
+          readonly
+          tabindex="-1"
+        />
+      </div>
+    </div>
+  `
+})
+export class DsMobilePostComposerComponent {
+  /**
+   * 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');
+  
+  /**
+   * Placeholder text for the input
+   */
+  placeholder = input<string>("Hvad er nyt?");
+  
+  /**
+   * Text for the post button
+   */
+  buttonText = input<string>('Slå op');
+  
+  /**
+   * Emits when the composer is clicked
+   */
+  composerClick = output<void>();
+  
+  handleClick(): void {
+    this.composerClick.emit();
+  }
+}
+

package/src/components/post-composer/index.ts

@@ -0,0 +1,2 @@
+export * from './ds-mobile-post-composer';
+

package/src/components/post-detail-modal/ds-mobile-post-detail-modal.service.ts

@@ -0,0 +1,104 @@
+import { Injectable } from '@angular/core';
+import { ModalController } from '@ionic/angular/standalone';
+import { DsMobilePostDetailModalComponent, PostDetailData } from './ds-mobile-post-detail-modal';
+
+/**
+ * DsMobilePostDetailModalService
+ * 
+ * Service for displaying post details in a full-screen modal.
+ * Built on Ionic's modal system with native gestures and animations.
+ * Follows the same pattern as DsMobileLightboxService for consistent behavior.
+ * 
+ * Features:
+ * - Full post content display
+ * - Comments section
+ * - Like/comment actions
+ * - Image lightbox integration
+ * - Native modal animations
+ * - Safe area support
+ * 
+ * @example
+ * ```typescript
+ * constructor(private postModal: DsMobilePostDetailModalService) {}
+ * 
+ * async openPost() {
+ *   await this.postModal.open({
+ *     postId: '123',
+ *     authorName: 'John Doe',
+ *     authorRole: 'Tenant',
+ *     timestamp: '2h ago',
+ *     avatarInitials: 'JD',
+ *     content: 'Just moved into my new apartment!',
+ *     isLiked: false,
+ *     likeCount: 42,
+ *     commentCount: 12,
+ *     comments: [
+ *       {
+ *         authorName: 'Jane Smith',
+ *         authorRole: 'Tenant',
+ *         timestamp: '1h ago',
+ *         avatarInitials: 'JS',
+ *         content: 'Welcome to the community!'
+ *       }
+ *     ]
+ *   });
+ * }
+ * ```
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class DsMobilePostDetailModalService {
+  constructor(private modalController: ModalController) {}
+
+  /**
+   * Open the post detail modal
+   * 
+   * @param postData Post data to display
+   * @returns Promise that resolves when the modal is presented
+   */
+  async open(postData: PostDetailData): Promise<void> {
+    console.log('[PostDetailModal] Opening with data:', postData);
+    
+    const modal = await this.modalController.create({
+      component: DsMobilePostDetailModalComponent,
+      componentProps: {
+        postData: postData
+      },
+      cssClass: 'ds-post-detail-modal',
+      mode: 'ios',
+      presentingElement: document.querySelector('ion-router-outlet') || undefined,
+      backdropDismiss: true,
+      showBackdrop: true,
+      animated: true,
+      keyboardClose: true,
+      // Control the presenting element animation
+      enterAnimation: undefined, // Use default
+      leaveAnimation: undefined  // Use default
+    });
+
+    console.log('[PostDetailModal] Modal created, presenting...');
+    await modal.present();
+    console.log('[PostDetailModal] Modal presented');
+  }
+
+  /**
+   * Close the currently open post detail modal
+   * 
+   * @param data Optional data to pass back when dismissing
+   * @returns Promise that resolves when the modal is dismissed
+   */
+  async close(data?: any): Promise<boolean> {
+    return this.modalController.dismiss(data);
+  }
+
+  /**
+   * Get the top-most modal if one exists
+   * 
+   * @returns Promise that resolves to the modal element or undefined
+   */
+  async getTop(): Promise<HTMLIonModalElement | undefined> {
+    return this.modalController.getTop();
+  }
+}
+