@propbinder/mobile-design 0.0.1 → 0.0.2

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

@@ -0,0 +1,269 @@
+import { Component, Input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DsMobileLightboxService, LightboxImage } from '../lightbox/ds-mobile-lightbox.service';
+
+/**
+ * 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],
+  template: `
+    <div 
+      class="photo-grid" 
+      [attr.data-count]="visibleImages.length"
+      [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)"
+            loading="lazy">
+          
+          <!-- 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;
+    }
+  `]
+})
+export class DsMobileInlinePhotoComponent {
+  /**
+   * Array of image URLs to display
+   */
+  @Input() images: string[] = [];
+
+  /**
+   * 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;
+
+  /**
+   * Event emitted when lightbox is opened
+   */
+  photoClick = output<{ index: number; totalImages: number }>();
+
+  constructor(private lightboxService: DsMobileLightboxService) {}
+
+  /**
+   * Get the first N images to display inline
+   */
+  get visibleImages(): string[] {
+    return this.images.slice(0, this.maxVisible);
+  }
+
+  /**
+   * 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/interactive-list-item-inquiry/ds-mobile-interactive-list-item-inquiry.css

@@ -0,0 +1,60 @@
+/**
+ * Interactive List Item Inquiry Styles
+ * Typography styles specific to inquiry list items
+ */
+
+/* Inquiry Name (matches author-name styling) */
+:root .inquiry-name,
+.inquiry-name {
+  font-family: 'Brockmann', sans-serif;
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  line-height: 20px;
+  letter-spacing: -0.3px;
+  color: var(--text-color-default-primary, #202227);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Inquiry Meta (matches author-meta styling) */
+:root .inquiry-meta,
+.inquiry-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(--text-color-default-tertiary, #626B78);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+:root .inquiry-meta .separator,
+.inquiry-meta .separator {
+  color: var(--text-color-default-tertiary, #626B78);
+}
+
+/* Variants for lightbox/overlay contexts (white text on dark bg) */
+:root .lightbox-context .inquiry-name,
+.lightbox-context .inquiry-name,
+:root .overlay-context .inquiry-name,
+.overlay-context .inquiry-name {
+  color: rgba(255, 255, 255, 0.95);
+}
+
+:root .lightbox-context .inquiry-meta,
+.lightbox-context .inquiry-meta,
+:root .overlay-context .inquiry-meta,
+.overlay-context .inquiry-meta {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+:root .lightbox-context .inquiry-meta .separator,
+.lightbox-context .inquiry-meta .separator,
+:root .overlay-context .inquiry-meta .separator,
+.overlay-context .inquiry-meta .separator {
+  color: rgba(255, 255, 255, 0.5);
+}
+

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

@@ -0,0 +1,280 @@
+import { Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DsIconComponent } from '@propbinder/design-system';
+import { DsShapeIndicatorComponent } from '@propbinder/design-system';
+import { DsMobileListItemComponent } from '../list-item';
+
+/**
+ * DsMobileInteractiveListItemInquiryComponent
+ * 
+ * Specialized interactive list item for displaying inquiries/tickets.
+ * Built on top of ds-mobile-interactive-list-item base component.
+ * Displays inquiry title, description, status, and timestamp.
+ * 
+ * @example
+ * ```html
+ * <ds-mobile-interactive-list-item-inquiry
+ *   [title]="'Tumble dryer is not working'"
+ *   [description]="'For the past three days, I have been experiencing...'"
+ *   [status]="'open'"
+ *   [timestamp]="'12 days ago'"
+ *   [iconName]="'remixCalendarLine'"
+ *   [clickable]="true"
+ *   (inquiryClick)="openInquiry()">
+ * </ds-mobile-interactive-list-item-inquiry>
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-interactive-list-item-inquiry',
+  standalone: true,
+  imports: [CommonModule, DsIconComponent, DsShapeIndicatorComponent, DsMobileListItemComponent],
+  styleUrls: ['./ds-mobile-interactive-list-item-inquiry.css'],
+  styles: [`
+    :host {
+      display: block;
+    }
+    
+    /* Hide divider on last child */
+    :host:last-child {
+      --divider-display: none;
+      --item-padding-bottom: 0;
+    }
+    
+    .inquiry-icon {
+      width: 32px;
+      height: 32px;
+      border-radius: 8px;
+      background: var(--color-background-neutral-secondary, #f5f5f5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+    
+    .inquiry-content {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      flex: 1;
+      min-width: 0;
+    }
+    
+    .inquiry-title {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-sm);
+      font-weight: 600;
+      line-height: 20px;
+      letter-spacing: -0.3px;
+      color: var(--text-color-default-primary, #202227);
+      margin: 0;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    
+    .inquiry-description {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-sm);
+      font-weight: 400;
+      line-height: 20px;
+      letter-spacing: -0.3px;
+      color: var(--text-color-default-secondary, #545B66);
+      margin: 0;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+    
+    .inquiry-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(--text-color-default-secondary, #545B66);
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-top: 4px;
+    }
+    
+    .inquiry-status {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-xs);
+      font-weight: 500;
+      line-height: 1.2;
+      letter-spacing: -0.26px;
+      color: var(--text-color-default-secondary, #545B66);
+    }
+    
+    .inquiry-status.open {
+      color: var(--color-brand-primary, #5d5fef);
+    }
+    
+    .inquiry-status.closed {
+      color: var(--text-color-default-tertiary, #737373);
+    }
+    
+    .inquiry-timestamp {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-xs);
+      font-weight: 400;
+      line-height: 1.2;
+      letter-spacing: -0.26px;
+      color: var(--text-color-default-secondary, #545B66);
+    }
+    
+    .inquiry-trailing {
+      display: flex;
+      align-items: center;
+      color: var(--color-text-tertiary, #a3a3a3);
+    }
+  `],
+  template: `
+    <ds-mobile-list-item
+      [leadingSize]="'32px'"
+      [variant]="variant()"
+      [interactive]="clickable()"
+      (itemClick)="handleInquiryClick()"
+      (longPress)="handleLongPress()"
+      (moreButtonClick)="handleMoreButtonClick($event)">
+      
+      <div content-leading>
+        <div class="inquiry-icon">
+          <ds-icon 
+            [name]="iconName()"
+            size="20px"
+            [color]="iconColor()" />
+        </div>
+      </div>
+      
+      <div content-main>
+        <div class="inquiry-content">
+          <h3 class="inquiry-title">{{ title() }}</h3>
+          
+          @if (description()) {
+            <p class="inquiry-description">{{ description() }}</p>
+          }
+          
+          <div class="inquiry-meta">
+            <div class="inquiry-status" [class.open]="status() === 'open'" [class.closed]="status() === 'closed'">
+              <ds-shape-indicator 
+                shape="circle" 
+                [variant]="status() === 'open' ? 'brand' : 'grey'">
+              </ds-shape-indicator>
+              <span>{{ computedStatusLabel() }}</span>
+            </div>
+            
+            <div class="inquiry-timestamp">
+              <ds-icon name="remixTimeLine" size="14px" color="--color-text-secondary" />
+              <span>{{ timestamp() }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      @if (showChevron()) {
+        <div content-trailing>
+          <div class="inquiry-trailing">
+            <ds-icon name="remixArrowRightSLine" size="20px" />
+          </div>
+        </div>
+      }
+    </ds-mobile-list-item>
+  `
+})
+export class DsMobileInteractiveListItemInquiryComponent {
+  /**
+   * Inquiry title
+   */
+  title = input.required<string>();
+  
+  /**
+   * Inquiry description/preview text
+   */
+  description = input<string>('');
+  
+  /**
+   * Inquiry status
+   */
+  status = input<'open' | 'closed'>('open');
+  
+  /**
+   * Status label (defaults to capitalized status)
+   */
+  statusLabel = input<string>('');
+  
+  /**
+   * Timestamp text (e.g., "12 days ago", "2 months ago")
+   */
+  timestamp = input.required<string>();
+  
+  /**
+   * Icon name for the leading icon
+   */
+  iconName = input<string>('remixTodoLine');
+  
+  /**
+   * Icon color
+   */
+  iconColor = input<string>('secondary');
+  
+  /**
+   * Display variant
+   * - 'feed' - Standard feed display (default)
+   * - 'detail' - Full detail view
+   * - 'compact' - Compact display
+   */
+  variant = input<'feed' | 'detail' | 'compact'>('feed');
+  
+  /**
+   * Whether the inquiry item is clickable
+   */
+  clickable = input<boolean>(true);
+  
+  /**
+   * Whether to show chevron icon
+   */
+  showChevron = input<boolean>(true);
+  
+  /**
+   * Emits when the inquiry item is clicked (if clickable)
+   */
+  inquiryClick = output<void>();
+  
+  /**
+   * Emits when the inquiry item is long-pressed
+   */
+  longPress = output<void>();
+  
+  /**
+   * Get computed status label
+   */
+  computedStatusLabel(): string {
+    if (this.statusLabel()) {
+      return this.statusLabel();
+    }
+    return this.status() === 'open' ? 'Åben' : 'Lukket';
+  }
+  
+  handleInquiryClick(): void {
+    this.inquiryClick.emit();
+  }
+  
+  handleLongPress(): void {
+    this.longPress.emit();
+  }
+  
+  handleMoreButtonClick(event: Event): void {
+    // Desktop more button click - trigger the same action as long press
+    this.longPress.emit();
+  }
+}
+

package/src/components/interactive-list-item-inquiry/index.ts

@@ -0,0 +1,2 @@
+export { DsMobileInteractiveListItemInquiryComponent } from './ds-mobile-interactive-list-item-inquiry';
+