@propbinder/mobile-design 0.0.2 → 0.0.21

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

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

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

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

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

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

@@ -1,104 +0,0 @@
-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();
-  }
-}
-