@propbinder/mobile-design 0.2.48 → 0.2.50

package/src/components/attachment-preview/ds-mobile-attachment-preview.ts

@@ -0,0 +1,164 @@
+import { Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DsAvatarComponent } from '@propbinder/design-system';
+import { DsMobileLoaderOverlayComponent } from '../loader-overlay';
+
+/**
+ * File type for attachment preview
+ */
+export type AttachmentFileType = 'image' | 'pdf' | 'doc' | 'docx' | 'xls' | 'xlsx' | 'other';
+
+/**
+ * Attachment data interface
+ */
+export interface AttachmentData {
+  id: string;
+  src: string;
+  type: AttachmentFileType;
+  name?: string;
+  size?: string;
+  isLoading?: boolean;
+}
+
+/**
+ * DsMobileAttachmentPreviewComponent
+ * 
+ * Reusable component for displaying attachment previews.
+ * Supports both image previews and file type indicators (PDF, DOCX, etc.).
+ * 
+ * Features:
+ * - Image preview for photos
+ * - File type indicator box for documents
+ * - Remove button overlay
+ * - Consistent 96x96 size
+ * 
+ * @example
+ * ```html
+ * <!-- Image attachment -->
+ * <ds-mobile-attachment-preview
+ *   [attachment]="{ id: '1', src: 'photo.jpg', type: 'image' }"
+ *   (remove)="handleRemove($event)">
+ * </ds-mobile-attachment-preview>
+ * 
+ * <!-- PDF attachment -->
+ * <ds-mobile-attachment-preview
+ *   [attachment]="{ id: '2', src: 'doc.pdf', type: 'pdf', name: 'Document.pdf' }"
+ *   (remove)="handleRemove($event)">
+ * </ds-mobile-attachment-preview>
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-attachment-preview',
+  standalone: true,
+  imports: [CommonModule, DsAvatarComponent, DsMobileLoaderOverlayComponent],
+  styleUrls: ['./ds-mobile-attachment-preview.css'],
+  template: `
+    <div class="attachment-preview" [class.loading]="attachment().isLoading">
+      @if (attachment().type === 'image') {
+        <!-- Image Preview -->
+        <img 
+          [src]="attachment().src" 
+          [alt]="attachment().name || 'Attachment'" 
+          class="preview-image" 
+        />
+      } @else {
+        <!-- File Type Preview -->
+        <div class="preview-file">
+          <div class="file-avatar">
+            <ds-avatar
+              type="icon"
+              [iconName]="getIconName()"
+              size="md"
+              [class]="'file-' + attachment().type"
+            />
+          </div>
+          <div class="file-info">
+            <div class="file-name" [title]="attachment().name || 'Unknown file'">
+              {{ attachment().name || 'Unknown file' }}
+            </div>
+            <div class="file-type-label">{{ getFileTypeLabel() }}</div>
+          </div>
+        </div>
+      }
+      
+      <!-- Loading Overlay -->
+      @if (attachment().isLoading) {
+        <ds-mobile-loader-overlay [borderRadius]="12" />
+      }
+      
+      <!-- Remove Button (hidden when loading) -->
+      @if (!attachment().isLoading) {
+        <button 
+          class="remove-btn" 
+          (mousedown)="handleRemove($event)"
+          type="button"
+          [attr.aria-label]="'Remove ' + (attachment().name || 'attachment')">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <path d="M12 4L4 12M4 4L12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+          </svg>
+        </button>
+      }
+    </div>
+  `
+})
+export class DsMobileAttachmentPreviewComponent {
+  /**
+   * Attachment data to display
+   */
+  attachment = input.required<AttachmentData>();
+  
+  /**
+   * Emits when the remove button is clicked
+   */
+  remove = output<string>();
+  
+  /**
+   * Get the file type label (PDF, DOCX, etc.)
+   */
+  getFileTypeLabel(): string {
+    const type = this.attachment().type.toUpperCase();
+    
+    // Map common types to their display labels
+    const labelMap: Record<string, string> = {
+      'PDF': 'PDF',
+      'DOC': 'DOC',
+      'DOCX': 'DOCX',
+      'XLS': 'XLS',
+      'XLSX': 'XLSX',
+      'OTHER': 'FILE'
+    };
+    
+    return labelMap[type] || type;
+  }
+  
+  /**
+   * Get the appropriate icon name based on file type
+   */
+  getIconName(): string {
+    const type = this.attachment().type;
+    
+    const iconMap: Record<AttachmentFileType, string> = {
+      'image': 'remixImageLine',
+      'pdf': 'remixFileTextLine',
+      'doc': 'remixFileTextLine',
+      'docx': 'remixFileTextLine',
+      'xls': 'remixFileList3Line',
+      'xlsx': 'remixFileList3Line',
+      'other': 'remixAttachmentLine'
+    };
+    
+    return iconMap[type] || 'remixAttachmentLine';
+  }
+  
+  /**
+   * Handle remove button click
+   * Uses mousedown to prevent keyboard from closing
+   */
+  handleRemove(event?: MouseEvent): void {
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    this.remove.emit(this.attachment().id);
+  }
+}

package/src/components/attachment-preview/index.ts

@@ -0,0 +1 @@
+export * from './ds-mobile-attachment-preview';

package/src/components/avatar-with-badge/ds-avatar-with-badge.ts

@@ -0,0 +1,142 @@
+import { Component, Input, computed, ViewEncapsulation, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DsAvatarComponent } from '@propbinder/design-system';
+import { DsAppIconComponent, AppIconSize } from '../app-icon/ds-app-icon';
+import { WhitelabelService } from '../../services/whitelabel.service';
+
+export type AvatarType = 'initials' | 'photo' | 'icon';
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type BadgePosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+
+/**
+ * DsAvatarWithBadgeComponent
+ * 
+ * Displays an avatar with a logomark badge overlay.
+ * Useful for showing user avatars with organization branding.
+ * 
+ * @example
+ * ```html
+ * <ds-avatar-with-badge
+ *   [type]="'initials'"
+ *   [initials]="'JD'"
+ *   [size]="'lg'"
+ *   [badgePosition]="'bottom-right'"
+ * />
+ * ```
+ */
+@Component({
+  selector: 'ds-avatar-with-badge',
+  standalone: true,
+  imports: [CommonModule, DsAvatarComponent, DsAppIconComponent],
+  encapsulation: ViewEncapsulation.Emulated,
+  styles: [`
+    :host {
+      display: inline-block;
+      position: relative;
+    }
+    
+    .avatar-badge-container {
+      position: relative;
+      display: inline-block;
+    }
+    
+    .avatar-badge {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 22%;
+      /* White shadow acting as a border */
+      box-shadow: 0 0 0 2px var(--color-background-primary, #ffffff);
+      /* Set background color for app icon inside */
+      --app-icon-background: var(--color-app-icon-surface, #5d5fef);
+    }
+    
+    /* Prevent the app icon from stretching */
+    .avatar-badge ds-app-icon {
+      flex-shrink: 0;
+    }
+    
+    
+    /* Badge positioning */
+    .avatar-badge--bottom-right {
+      bottom: -4px;
+      right: -4px;
+    }
+    
+    .avatar-badge--bottom-left {
+      bottom: -6px;
+      left: -6px;
+    }
+    
+    .avatar-badge--top-right {
+      top: -6px;
+      right: -6px;
+    }
+    
+    .avatar-badge--top-left {
+      top: -6px;
+      left: -6px;
+    }
+    
+    /* Badge container sizes - matches the app-icon size inside
+       xs/sm/md/lg use 16px (app-icon sm)
+       xl uses 32px (app-icon md) */
+    .avatar-badge--xs { width: 16px; height: 16px; }
+    .avatar-badge--sm { width: 16px; height: 16px; }
+    .avatar-badge--md { width: 16px; height: 16px; }
+    .avatar-badge--lg { width: 16px; height: 16px; }
+    .avatar-badge--xl { width: 24px; height: 24px; }
+  `],
+  template: `
+    <div class="avatar-badge-container">
+      <ds-avatar
+        [type]="type"
+        [size]="size"
+        [initials]="initials"
+        [src]="src"
+        [iconName]="iconName"
+      />
+      
+      @if (showBadge) {
+        <div [class]="badgeClasses()">
+          <ds-app-icon [size]="badgeIconSize()" />
+        </div>
+      }
+    </div>
+  `
+})
+export class DsAvatarWithBadgeComponent {
+  whitelabelService = inject(WhitelabelService);
+  
+  // Avatar props
+  @Input() type: AvatarType = 'initials';
+  @Input() size: AvatarSize = 'md';
+  @Input() initials: string = '';
+  @Input() src: string = '';
+  @Input() iconName: string = 'remixUser3Fill';
+  
+  // Badge props
+  @Input() showBadge: boolean = true;
+  @Input() badgePosition: BadgePosition = 'bottom-right';
+  
+  badgeClasses = computed(() => {
+    return `avatar-badge avatar-badge--${this.badgePosition} avatar-badge--${this.size}`;
+  });
+
+  /**
+   * Computed badge icon size that scales with avatar size
+   * Maps avatar sizes to appropriate app icon sizes
+   */
+  badgeIconSize = computed((): AppIconSize => {
+    const sizeMap: Record<AvatarSize, AppIconSize> = {
+      xs: 'sm',
+      sm: 'sm',
+      md: 'sm',
+      lg: 'sm',
+      xl: 'md',
+    };
+    return sizeMap[this.size];
+  });
+}
+

package/src/components/avatar-with-badge/index.ts

@@ -0,0 +1,2 @@
+export * from './ds-avatar-with-badge';
+

package/src/components/booking-modal/ds-mobile-booking-confirmation-wrapper.ts

@@ -0,0 +1,71 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DsMobileConfirmationSheetComponent } from '../bottom-sheet/ds-mobile-confirmation-sheet';
+import { DsMobileBookingSummaryComponent } from './ds-mobile-booking-summary';
+import { BookingResult } from './ds-mobile-booking-modal';
+
+/**
+ * DsMobileBookingConfirmationWrapperComponent
+ * 
+ * Wrapper component that uses the generic confirmation sheet
+ * specifically for booking confirmations.
+ * 
+ * This component handles the booking-specific formatting and
+ * uses content projection to pass the booking summary to the generic sheet.
+ */
+@Component({
+  selector: 'ds-mobile-booking-confirmation-wrapper',
+  standalone: true,
+  imports: [
+    CommonModule,
+    DsMobileConfirmationSheetComponent,
+    DsMobileBookingSummaryComponent
+  ],
+  template: `
+    <ds-mobile-confirmation-sheet
+      [title]="'Booking accepteret'"
+      [message]="confirmationMessage"
+      [buttonText]="'Luk'"
+      [illustrationVariant]="'confirmation'">
+      <ng-template #summary>
+        <ds-mobile-booking-summary
+          [facilityTitle]="booking.facilityTitle"
+          [facilityThumbnail]="facilityThumbnail"
+          [date]="formattedDate"
+          [time]="formattedTime"
+        />
+      </ng-template>
+    </ds-mobile-confirmation-sheet>
+  `
+})
+export class DsMobileBookingConfirmationWrapperComponent {
+  @Input() booking!: BookingResult;
+  @Input() facilityThumbnail?: string;
+
+  get confirmationMessage(): string {
+    const date = this.booking.selectedDate.fullDate;
+    const dateStr = this.formatFullDate(date);
+    return `Din booking til den ${dateStr} er bekræftet. Du kan annullere fra startdatoen.`;
+  }
+
+  get formattedDate(): string {
+    const { dayName, date, monthName } = this.booking.selectedDate;
+    return `${dayName} ${date} ${monthName}`;
+  }
+
+  get formattedTime(): string {
+    const { startTime, endTime } = this.booking.selectedTimeSlot;
+    return `${startTime} - ${endTime}`;
+  }
+
+  private formatFullDate(date: Date): string {
+    const day = date.getDate();
+    const monthNames = [
+      'januar', 'februar', 'marts', 'april', 'maj', 'juni',
+      'juli', 'august', 'september', 'oktober', 'november', 'december'
+    ];
+    const month = monthNames[date.getMonth()];
+    const year = date.getFullYear();
+    return `${day}. ${month}, ${year}`;
+  }
+}

package/src/components/booking-modal/ds-mobile-booking-modal.service.ts

@@ -0,0 +1,121 @@
+import { Injectable } from '@angular/core';
+import { ModalController } from '@ionic/angular/standalone';
+import { BaseModalService } from '../../services/base-modal.service';
+import { DsMobileBookingModalComponent, BookingResult, DateOption, TimeSlot } from './ds-mobile-booking-modal';
+import { DsMobileBookingConfirmationWrapperComponent } from './ds-mobile-booking-confirmation-wrapper';
+import { disableModalShadowPointerEvents } from '../bottom-sheet/modal-shadow-fix';
+
+/**
+ * DsMobileBookingModalService
+ * 
+ * Service for managing the booking modal flow:
+ * 1. Opens the booking modal for date/time selection
+ * 2. On confirmation, opens the confirmation bottom sheet
+ * 
+ * @example
+ * ```typescript
+ * constructor(private bookingModalService: DsMobileBookingModalService) {}
+ * 
+ * async openBooking() {
+ *   await this.bookingModalService.open('facility-1', 'Boremaskinen');
+ * }
+ * ```
+ */
+export interface BookingModalOptions {
+  facilityId: string;
+  facilityTitle: string;
+  facilityThumbnail?: string;
+  daysAhead?: number;
+  availableDates?: DateOption[];
+  availableTimeSlots?: Record<string, TimeSlot[]>;
+  labels?: {
+    selectFromCalendar?: string;
+    confirmBooking?: string;
+  };
+}
+
+@Injectable({ providedIn: 'root' })
+export class DsMobileBookingModalService extends BaseModalService {
+  constructor(modalController: ModalController) {
+    super(modalController);
+  }
+
+  /**
+   * Open the booking modal for a facility
+   * 
+   * @param options The booking modal options including dynamic data and texts
+   * @returns Promise that resolves when the booking flow is complete
+   */
+  async open(options: BookingModalOptions): Promise<void> {
+    const componentProps: any = {
+      facilityId: options.facilityId,
+      facilityTitle: options.facilityTitle,
+    };
+    
+    if (options.daysAhead !== undefined) componentProps.daysAhead = options.daysAhead;
+    if (options.availableDates !== undefined) componentProps.availableDates = options.availableDates;
+    if (options.availableTimeSlots !== undefined) componentProps.availableTimeSlots = options.availableTimeSlots;
+    if (options.labels?.selectFromCalendar) componentProps.selectFromCalendarText = options.labels.selectFromCalendar;
+    if (options.labels?.confirmBooking) componentProps.confirmBookingText = options.labels.confirmBooking;
+
+    const modal = await this.createModal(
+      DsMobileBookingModalComponent,
+      componentProps,
+      { keyboardClose: true }
+    );
+    
+    await modal.present();
+    
+    const result = await modal.onWillDismiss<BookingResult>();
+    
+    // If user confirmed the booking, dismiss all modals and show confirmation sheet
+    if (result.role === 'confirm' && result.data) {
+      // Dismiss all open modals (booking modal + facility detail modal)
+      await this.dismissAllModals();
+      
+      // Show confirmation sheet after all modals are dismissed
+      await this.openConfirmationSheet(result.data, options.facilityThumbnail);
+    }
+  }
+
+  /**
+   * Dismiss all open modals
+   */
+  private async dismissAllModals(): Promise<void> {
+    let topModal = await this.modalController.getTop();
+    while (topModal) {
+      await topModal.dismiss();
+      topModal = await this.modalController.getTop();
+    }
+  }
+
+  /**
+   * Open the confirmation bottom sheet after successful booking
+   * 
+   * @param booking The booking result data
+   * @param facilityThumbnail Optional thumbnail image URL
+   * @returns Promise that resolves when the sheet is dismissed
+   */
+  private async openConfirmationSheet(
+    booking: BookingResult,
+    facilityThumbnail?: string
+  ): Promise<void> {
+    const sheet = await this.modalController.create({
+      component: DsMobileBookingConfirmationWrapperComponent,
+      componentProps: {
+        booking,
+        facilityThumbnail
+      },
+      breakpoints: [0, 1],
+      initialBreakpoint: 1,
+      handle: true,
+      cssClass: ['ds-bottom-sheet', 'auto-height'],
+      backdropDismiss: true,
+      showBackdrop: true,
+      mode: 'ios'
+    });
+
+    await sheet.present();
+    disableModalShadowPointerEvents(sheet);
+  }
+}