@propbinder/mobile-design 0.0.2 → 0.0.22

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

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

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

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

@@ -1,60 +0,0 @@
-/**
- * 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

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

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