@propbinder/mobile-design 0.2.50 → 0.2.53

package/src/components/inline-photo/ds-mobile-inline-photo.ts

@@ -1,361 +0,0 @@
-import { Component, Input, output, signal, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DsMobileLightboxService, LightboxImage } from '../lightbox/ds-mobile-lightbox.service';
-import { DsMobileLoaderOverlayComponent } from '../loader-overlay';
-
-/**
- * DsMobileInlinePhotoComponent
- * 
- * Displays one or multiple photos in a grid layout optimized for social feeds.
- * Supports up to 5 visible images with automatic grid layouts.
- * 
- * Features:
- * - Automatic grid layouts for 1-5 images
- * - Shows "+N more" overlay if more than 5 images
- * - Opens lightbox with all images (including hidden ones) when clicked
- * - Optimized layouts: 1 full, 2 split, 3 masonry, 4 grid, 5 grid
- * 
- * @example
- * ```html
- * <ds-mobile-inline-photo
- *   [images]="['img1.jpg', 'img2.jpg', 'img3.jpg']"
- *   [author]="authorInfo"
- * />
- * ```
- */
-@Component({
-  selector: 'ds-mobile-inline-photo',
-  standalone: true,
-  imports: [CommonModule, DsMobileLoaderOverlayComponent],
-  template: `
-    <div 
-      class="photo-grid" 
-      [class.flex-layout]="!useGrid"
-      [attr.data-count]="useGrid ? visibleImages.length : null"
-      [class.has-more]="hiddenCount > 0">
-      @for (image of visibleImages; track image; let i = $index) {
-        <div 
-          class="photo-item"
-          [class.last]="i === visibleImages.length - 1"
-          (click)="openLightbox(i, $event)">
-          <img 
-            [src]="image" 
-            [alt]="'Photo ' + (i + 1)"
-            (load)="onImageLoad(i)"
-            (error)="onImageError(i)"
-            loading="lazy">
-          
-          <!-- Loading Overlay -->
-          @if (isImageLoading(i)) {
-            <ds-mobile-loader-overlay />
-          }
-          
-          <!-- Show "+N more" overlay on last image if there are hidden images -->
-          @if (i === visibleImages.length - 1 && hiddenCount > 0) {
-            <div class="more-overlay">
-              <span class="more-text">+{{ hiddenCount }}</span>
-            </div>
-          }
-        </div>
-      }
-    </div>
-  `,
-  styles: [`
-    :host {
-      display: block;
-    }
-
-    .photo-grid {
-      display: grid;
-      gap: 4px;
-      border-radius: 8px;
-      overflow: hidden;
-      background: var(--ds-color-neutral-100);
-      width: 100%;
-    }
-
-    .photo-item {
-      position: relative;
-      overflow: hidden;
-      cursor: pointer;
-      background: var(--ds-color-neutral-200);
-      aspect-ratio: 1;
-    }
-
-    .photo-item img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      display: block;
-      transition: transform 0.2s ease;
-    }
-
-    .photo-item:active img {
-      transform: scale(0.98);
-    }
-
-    .more-overlay {
-      position: absolute;
-      inset: 0;
-      background: rgba(0, 0, 0, 0.6);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      pointer-events: none;
-    }
-
-    .more-text {
-      color: white;
-      font-size: 32px;
-      font-weight: 600;
-      font-family: var(--ds-font-family-medium);
-    }
-
-    /* 1 image: full width, 4:3 ratio */
-    .photo-grid[data-count="1"] {
-      grid-template-columns: 1fr;
-    }
-    
-    .photo-grid[data-count="1"] .photo-item {
-      aspect-ratio: 4/3;
-    }
-
-    /* 2 images: side by side */
-    .photo-grid[data-count="2"] {
-      grid-template-columns: 1fr 1fr;
-    }
-
-    /* 3 images: 1 large left, 2 stacked right */
-    .photo-grid[data-count="3"] {
-      grid-template-columns: 2fr 1fr;
-      grid-auto-rows: 1fr;
-    }
-    
-    .photo-grid[data-count="3"] .photo-item:first-child {
-      grid-row: 1 / 3;
-      aspect-ratio: auto;
-    }
-    
-    /* Right side images remain 1:1 squares */
-    .photo-grid[data-count="3"] .photo-item:nth-child(2),
-    .photo-grid[data-count="3"] .photo-item:nth-child(3) {
-      aspect-ratio: 1;
-    }
-
-    /* 4 images: 2x2 grid */
-    .photo-grid[data-count="4"] {
-      grid-template-columns: 1fr 1fr;
-      grid-template-rows: 1fr 1fr;
-    }
-
-    /* 5 images: 2 on top, 3 on bottom */
-    .photo-grid[data-count="5"] {
-      grid-template-columns: repeat(6, 1fr);
-      grid-template-rows: auto auto;
-    }
-    
-    .photo-grid[data-count="5"] .photo-item {
-      aspect-ratio: 1;
-      width: 100%;
-    }
-    
-    .photo-grid[data-count="5"] .photo-item:nth-child(1) {
-      grid-column: 1 / 4;
-      grid-row: 1;
-    }
-    
-    .photo-grid[data-count="5"] .photo-item:nth-child(2) {
-      grid-column: 4 / 7;
-      grid-row: 1;
-    }
-    
-    .photo-grid[data-count="5"] .photo-item:nth-child(3) {
-      grid-column: 1 / 3;
-      grid-row: 2;
-    }
-    
-    .photo-grid[data-count="5"] .photo-item:nth-child(4) {
-      grid-column: 3 / 5;
-      grid-row: 2;
-    }
-    
-    .photo-grid[data-count="5"] .photo-item:nth-child(5) {
-      grid-column: 5 / 7;
-      grid-row: 2;
-    }
-
-    /* Round bottom corners for 5-image layout */
-    .photo-grid[data-count="5"] .photo-item:nth-child(3) {
-      border-bottom-left-radius: 8px;
-      overflow: hidden;
-    }
-    
-    .photo-grid[data-count="5"] .photo-item:nth-child(5) {
-      border-bottom-right-radius: 8px;
-      overflow: hidden;
-    }
-
-    /* ============================================
-       FLEX LAYOUT (when useGrid is false)
-       ============================================ */
-    
-    .photo-grid.flex-layout {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-      border-radius: 0;
-      background: transparent;
-    }
-    
-    .photo-grid.flex-layout .photo-item {
-      flex: 0 0 auto;
-      width: 96px;
-      height: 96px;
-      aspect-ratio: 1;
-      border-radius: 8px;
-      overflow: hidden;
-    }
-    
-    .photo-grid.flex-layout .photo-item img {
-      border-radius: 8px;
-    }
-  `]
-})
-export class DsMobileInlinePhotoComponent implements OnInit {
-  /**
-   * Array of image URLs to display
-   */
-  @Input() images: string[] = [];
-
-  /**
-   * Optional array of loading states for each image (by index)
-   * If provided, shows loader overlay for images that are still loading
-   */
-  @Input() loadingStates?: boolean[];
-
-  /**
-   * Internal signal to track image loading states
-   */
-  private internalLoadingStates = signal<Map<number, boolean>>(new Map());
-
-  /**
-   * Author information (passed to lightbox)
-   */
-  @Input() author?: {
-    name: string;
-    role?: string;
-    avatarSrc?: string;
-    avatarInitials?: string;
-    avatarType?: 'photo' | 'initials';
-    timestamp?: string;
-  };
-
-  /**
-   * Maximum number of images to show inline (default: 5)
-   * Remaining images shown in lightbox only
-   */
-  @Input() maxVisible: number = 5;
-
-  /**
-   * Whether to use grid layout (true) or flex-wrap layout (false)
-   * @default true
-   */
-  @Input() useGrid: boolean = true;
-
-  /**
-   * Event emitted when lightbox is opened
-   */
-  photoClick = output<{ index: number; totalImages: number }>();
-
-  constructor(private lightboxService: DsMobileLightboxService) {}
-
-  /**
-   * Initialize loading states for all visible images
-   */
-  ngOnInit(): void {
-    // Set all images as loading initially
-    const loadingMap = new Map<number, boolean>();
-    this.visibleImages.forEach((_, index) => {
-      loadingMap.set(index, true);
-    });
-    this.internalLoadingStates.set(loadingMap);
-  }
-
-  /**
-   * Handle image load event
-   */
-  onImageLoad(index: number): void {
-    const loadingMap = new Map(this.internalLoadingStates());
-    loadingMap.set(index, false);
-    this.internalLoadingStates.set(loadingMap);
-  }
-
-  /**
-   * Handle image error event
-   */
-  onImageError(index: number): void {
-    const loadingMap = new Map(this.internalLoadingStates());
-    loadingMap.set(index, false);
-    this.internalLoadingStates.set(loadingMap);
-  }
-
-  /**
-   * Get the first N images to display inline
-   */
-  get visibleImages(): string[] {
-    return this.images.slice(0, this.maxVisible);
-  }
-
-  /**
-   * Check if a specific image is loading
-   */
-  isImageLoading(index: number): boolean {
-    // Use external loadingStates if provided, otherwise use internal state
-    if (this.loadingStates !== undefined) {
-      return this.loadingStates[index] ?? false;
-    }
-    return this.internalLoadingStates().get(index) ?? true;
-  }
-
-  /**
-   * Calculate how many images are hidden
-   */
-  get hiddenCount(): number {
-    return Math.max(0, this.images.length - this.maxVisible);
-  }
-
-  /**
-   * Open lightbox with all images, starting at the clicked index
-   */
-  openLightbox(index: number, event?: Event): void {
-    // Stop event propagation to prevent triggering parent click handlers
-    if (event) {
-      event.stopPropagation();
-      event.preventDefault();
-    }
-
-    // Emit event
-    this.photoClick.emit({
-      index,
-      totalImages: this.images.length
-    });
-
-    // Convert image URLs to LightboxImage format
-    const lightboxImages: LightboxImage[] = this.images.map((src, i) => ({
-      type: 'image',
-      src,
-      alt: `Photo ${i + 1}`
-    }));
-
-    // Open lightbox with all images (not just visible ones)
-    this.lightboxService.openImages({
-      images: lightboxImages,
-      initialIndex: index,
-      author: this.author,
-      enableZoom: true,
-      showControls: true,
-      enableSwipe: true
-    });
-  }
-}
-

package/src/components/inline-photo/index.ts

@@ -1 +0,0 @@
-export * from './ds-mobile-inline-photo';

package/src/components/inline-tabs/ds-mobile-inline-tabs.ts

@@ -1,132 +0,0 @@
-import { Component, input, output } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-export interface InlineTabItem {
-  id: string;
-  label: string;
-  badge?: number;
-}
-
-/**
- * DsMobileInlineTabsComponent
- * 
- * Pill-style inline tabs for filtering/switching views
- * Used in the purple header section of pages
- * 
- * @example
- * ```html
- * <ds-mobile-inline-tabs
- *   [tabs]="[
- *     { id: 'all', label: 'All' },
- *     { id: 'open', label: 'Open' },
- *     { id: 'closed', label: 'Closed' }
- *   ]"
- *   [activeTab]="'all'"
- *   (tabChange)="handleTabChange($event)">
- * </ds-mobile-inline-tabs>
- * ```
- */
-@Component({
-  selector: 'ds-mobile-inline-tabs',
-  standalone: true,
-  imports: [CommonModule],
-  styles: [`
-    .filter-tabs {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      flex-wrap: wrap;
-      height: 40px;
-    }
-    
-    .filter-tab {
-      min-width: 48px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 0px 12px;
-      height: 32px;
-      border-radius: 20px;
-      background: transparent;
-      border: none;
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-sm);
-      font-weight: 500;
-      color: rgba(var(--header-content-color-rgb, 255, 255, 255), 0.6);
-      cursor: pointer;
-      transition: all 0.2s ease;
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      white-space: nowrap;
-    }
-    
-    .filter-tab.active {
-      background: var(--color-header-accent, #5d5fef);
-      color: var(--color-on-header-accent, white);
-    }
-    
-    .filter-tab:hover:not(.active) {
-      background: rgba(var(--header-content-color-rgb, 255, 255, 255), 0.1);
-    }
-    
-    .tab-badge {
-      min-width: 24px;
-      height: 16px;
-      padding: 0 6px;
-      border-radius: 10px;
-      background: rgba(var(--header-content-color-rgb, 255, 255, 255), 0.2);
-      color: var(--header-content-color, white);
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-xs);
-      font-weight: 600;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      line-height: 1;
-    }
-    
-    .filter-tab.active .tab-badge {
-      background: rgba(var(--color-on-header-accent-rgb, 255, 255, 255), 0.3);
-      color: var(--color-on-header-accent, white);
-    }
-  `],
-  template: `
-    <div class="filter-tabs">
-      @for (tab of tabs(); track tab.id) {
-        <button 
-          class="filter-tab"
-          [class.active]="activeTab() === tab.id"
-          (click)="handleTabClick(tab.id)"
-          [attr.aria-label]="tab.label"
-          [attr.aria-selected]="activeTab() === tab.id">
-          {{ tab.label }}
-          @if (tab.badge && tab.badge > 0) {
-            <span class="tab-badge">{{ tab.badge }}</span>
-          }
-        </button>
-      }
-    </div>
-  `
-})
-export class DsMobileInlineTabsComponent {
-  /**
-   * Array of tab items to display
-   */
-  tabs = input.required<InlineTabItem[]>();
-  
-  /**
-   * Currently active tab ID
-   */
-  activeTab = input.required<string>();
-  
-  /**
-   * Emitted when a tab is clicked
-   */
-  tabChange = output<string>();
-  
-  handleTabClick(tabId: string): void {
-    this.tabChange.emit(tabId);
-  }
-}
-

package/src/components/inline-tabs/index.ts

@@ -1,2 +0,0 @@
-export { DsMobileInlineTabsComponent, type InlineTabItem } from './ds-mobile-inline-tabs';
-