@propbinder/mobile-design 0.2.48 → 0.2.50

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

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

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

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

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

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