@propbinder/mobile-design 0.2.50 → 0.2.53

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

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

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

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

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

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

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

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

@@ -1,121 +0,0 @@
-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);
-  }
-}