@propbinder/mobile-design 0.2.50 → 0.2.53

package/src/components/facility-creation-modal/ds-mobile-facility-creation-modal.ts

@@ -1,656 +0,0 @@
-import { Component, signal, Input, ViewChild, ElementRef, OnInit, AfterViewInit, CUSTOM_ELEMENTS_SCHEMA, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { ModalController } from '@ionic/angular/standalone';
-import { Capacitor } from '@capacitor/core';
-import { FilePicker } from '@capawesome/capacitor-file-picker';
-import { DsButtonComponent, DsTextareaComponent, DsIconComponent, DsIconButtonComponent } from '@propbinder/design-system';
-import { DsMobileModalBaseComponent } from '../modal-base/ds-mobile-modal-base';
-import { DsMobileSectionComponent } from '../section';
-import { DsMobileListItemComponent } from '../list-item';
-import { DsMobileBottomSheetService } from '../bottom-sheet';
-import { DsMobileAttachmentPreviewComponent, type AttachmentData, type AttachmentFileType } from '../attachment-preview';
-
-/**
- * New facility form data
- */
-export interface NewFacilityData {
-  title: string;
-  description: string;
-  whoCanBook: string;
-  whenCanBook: string;
-  price: string;
-  accessRequirements: string;
-  attachments: AttachmentData[];
-}
-
-/**
- * DsMobileFacilityCreationModalComponent
- *
- * Modal component for creating new facilities.
- * Uses ds-mobile-modal-base for consistent layout and behavior.
- *
- * Features:
- * - Title and description fields
- * - Interactive list items for facility options
- * - Bottom sheet pickers for selections
- * - Photo upload with preview
- * - Form validation
- *
- * This component is typically not used directly - use DsMobileFacilityCreationModalService instead.
- */
-@Component({
-  selector: 'ds-mobile-facility-creation-modal',
-  standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    DsButtonComponent,
-    DsTextareaComponent,
-    DsIconComponent,
-    DsIconButtonComponent,
-    DsMobileModalBaseComponent,
-    DsMobileSectionComponent,
-    DsMobileListItemComponent,
-    DsMobileAttachmentPreviewComponent,
-  ],
-  styleUrls: ['../shared/mobile-common.css', './ds-mobile-facility-creation-modal.css'],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `
-    <ds-mobile-modal-base
-      [loading]="loading"
-      [error]="error"
-      [showHeader]="false"
-      [hasFixedBottom]="true"
-      [enableKeyboardHandling]="true"
-      [keyboardContentBehavior]="'overlay'"
-      closeButtonLabel="Close"
-    >
-      <!-- Form Content -->
-      <ds-mobile-section class="form-section">
-        <!-- Title Field (Large Ghost Textarea) -->
-        <ds-textarea
-          #titleInput
-          [(ngModel)]="title"
-          [ghost]="true"
-          [required]="true"
-          [rows]="1"
-          [placeholder]="titlePlaceholder"
-          class="inquiry-title-input ghost-input-clean"
-          (valueChange)="handleTitleChange($event)"
-        />
-
-        <!-- Description Field (Ghost Textarea) -->
-        <ds-textarea
-          #descriptionInput
-          [(ngModel)]="description"
-          [ghost]="true"
-          [rows]="1"
-          [placeholder]="descriptionPlaceholder"
-          class="inquiry-description-input ghost-input-clean"
-          (valueChange)="handleDescriptionChange($event)"
-        />
-      </ds-mobile-section>
-
-      <!-- List Items Section -->
-      <ds-mobile-section [contentGap]="'0'">
-        <!-- Who can book - hidden until Propbinder API supports this field -->
-        <!-- <ds-mobile-list-item 
-          [leadingSize]="'32px'" 
-          [showDivider]="true" 
-          [interactive]="true"
-          [showDesktopMoreButton]="false"
-          [align]="'center'"
-          (itemClick)="openWhoSheet()">
-          <ds-icon content-leading name="remixGroupLine" size="20px" color="tertiary" />
-          <div content-main>
-            <div class="detail-label">Hvem kan booke</div>
-            <div class="detail-value">{{ whoCanBook() }}</div>
-          </div>
-          <ds-icon content-trailing name="remixArrowRightSLine" size="20px" color="tertiary" />
-        </ds-mobile-list-item> -->
-
-        <!-- When can it be booked -->
-        <ds-mobile-list-item 
-          [leadingSize]="'32px'" 
-          [showDivider]="true" 
-          [interactive]="true"
-          [showDesktopMoreButton]="false"
-          [align]="'center'"
-          (itemClick)="openWhenSheet()">
-          <ds-icon content-leading name="remixCalendarLine" size="20px" color="tertiary" />
-          <div content-main>
-            <div class="detail-label">Hvornår kan det bookes</div>
-            <div class="detail-value">{{ whenCanBook() }}</div>
-          </div>
-          <ds-icon content-trailing name="remixArrowRightSLine" size="20px" color="tertiary" />
-        </ds-mobile-list-item>
-
-        <!-- Price -->
-        <ds-mobile-list-item 
-          [leadingSize]="'32px'" 
-          [showDivider]="false" 
-          [interactive]="true"
-          [showDesktopMoreButton]="false"
-          [align]="'center'"
-          (itemClick)="openPriceSheet()">
-          <ds-icon content-leading name="remixPriceTag3Line" size="20px" color="tertiary" />
-          <div content-main>
-            <div class="detail-label">Pris</div>
-            <div class="detail-value">{{ price() }}</div>
-          </div>
-          <ds-icon content-trailing name="remixArrowRightSLine" size="20px" color="tertiary" />
-        </ds-mobile-list-item>
-
-        <!-- Access requirements - hidden until Propbinder API supports this field -->
-        <!-- <ds-mobile-list-item 
-          [leadingSize]="'32px'" 
-          [showDivider]="false" 
-          [interactive]="true"
-          [showDesktopMoreButton]="false"
-          [align]="'center'"
-          (itemClick)="openAccessSheet()">
-          <ds-icon content-leading name="remixKeyLine" size="20px" color="tertiary" />
-          <div content-main>
-            <div class="detail-label">Adgangskrav</div>
-            <div class="detail-value">{{ accessRequirements() }}</div>
-          </div>
-          <ds-icon content-trailing name="remixArrowRightSLine" size="20px" color="tertiary" />
-        </ds-mobile-list-item> -->
-      </ds-mobile-section>
-
-      <!-- Fixed Bottom Container (Slides with keyboard) -->
-      <div fixed-bottom class="fixed-bottom-container">
-        <!-- Attachment Previews (if any) -->
-        @if (attachments().length > 0) {
-          <div class="attachment-previews-section">
-            <div class="image-previews">
-              @for (attachment of attachments(); track attachment.id) {
-                <ds-mobile-attachment-preview [attachment]="attachment" (remove)="removeAttachment($event)" />
-              }
-            </div>
-          </div>
-        }
-
-        <!-- Submit Actions Container -->
-        <div class="submit-container">
-          <div class="submit-content">
-            <!-- Upload Actions (Left) -->
-            <div class="upload-actions">
-              <ds-icon-button icon="remixImageLine" variant="secondary" size="md" (clicked)="addPhoto()" [disabled]="attachments().length >= 6" aria-label="Add photo">
-              </ds-icon-button>
-              <ds-icon-button
-                icon="remixAttachmentLine"
-                variant="secondary"
-                size="md"
-                (clicked)="handleAddAttachment()"
-                [disabled]="attachments().length >= 6"
-                aria-label="Add attachment"
-              >
-              </ds-icon-button>
-
-              <!-- Hidden file input for file selection -->
-              <input #fileInput type="file" accept="*/*" multiple (change)="handleFileSelect($event)" style="display: none;" aria-hidden="true" />
-            </div>
-
-            <!-- Submit Button (Right) -->
-            <ds-button class="submit-action-button" variant="primary" size="sm" [disabled]="!isFormValid() || isSubmitting()" (clicked)="handleSubmit()">
-              {{ submitButtonLabel }}
-            </ds-button>
-          </div>
-        </div>
-      </div>
-    </ds-mobile-modal-base>
-  `
-})
-export class DsMobileFacilityCreationModalComponent implements OnInit, AfterViewInit {
-  private modalController = inject(ModalController);
-  private bottomSheetService = inject(DsMobileBottomSheetService);
-  
-  @ViewChild('titleInput', { read: ElementRef }) titleInputRef?: ElementRef<HTMLElement>;
-  @ViewChild('descriptionInput', { read: ElementRef }) descriptionInputRef?: ElementRef<HTMLElement>;
-  @ViewChild('titleInput') titleInput?: DsTextareaComponent;
-  @ViewChild('fileInput') fileInput?: ElementRef<HTMLInputElement>;
-
-  /**
-   * Loading state for the modal
-   */
-  @Input() loading: boolean = false;
-
-  /**
-   * Error message to display
-   */
-  @Input() error?: string;
-
-  /**
-   * Callback function when form is submitted
-   */
-  @Input() onSubmit?: (data: NewFacilityData) => void | Promise<void>;
-
-  /**
-   * Placeholder for the title field
-   */
-  @Input() titlePlaceholder: string = 'Festlokale på tal';
-
-  /**
-   * Placeholder for the description field
-   */
-  @Input() descriptionPlaceholder: string = 'Beskriv din booking så detaljeret som muligt...';
-
-  /**
-   * Label for the submit button
-   */
-  @Input() submitButtonLabel: string = 'Opret';
-
-  /**
-   * Form title field
-   */
-  title = '';
-
-  /**
-   * Form description field
-   */
-  description = '';
-
-  /**
-   * Attachments array
-   */
-  attachments = signal<AttachmentData[]>([]);
-
-  /**
-   * Who can book signal
-   */
-  whoCanBook = signal<string>('Alle');
-
-  /**
-   * When can it be booked signal
-   */
-  whenCanBook = signal<string>('I weekenden, 09:00 til 17:30');
-
-  /**
-   * Price signal
-   */
-  price = signal<string>('Gratis');
-
-  /**
-   * Access requirements signal
-   */
-  accessRequirements = signal<string>('Ingen adgangskrav');
-
-  /**
-   * Form validation state
-   */
-  isFormValid = signal<boolean>(false);
-
-  /**
-   * Submitting state
-   */
-  isSubmitting = signal<boolean>(false);
-
-  ngOnInit(): void {
-    console.log('[FacilityCreationModal] Component initialized');
-  }
-
-  ngAfterViewInit(): void {
-    // Setup auto-resize for title textarea
-    setTimeout(() => {
-      this.autoResizeTitleTextarea();
-      this.autoResizeDescriptionTextarea();
-
-      // Focus the title textarea after view initialization to trigger keyboard on iOS
-      if (this.titleInputRef) {
-        const textareaElement = this.titleInputRef.nativeElement.querySelector('textarea');
-        if (textareaElement) {
-          textareaElement.focus();
-        }
-      }
-    }, 300);
-  }
-
-  /**
-   * Auto-resize the title textarea based on content
-   */
-  private autoResizeTitleTextarea(): void {
-    if (!this.titleInputRef) return;
-
-    // Access the native textarea element
-    const textareaElement = this.titleInputRef.nativeElement.querySelector('textarea');
-    if (textareaElement) {
-      textareaElement.style.height = 'auto';
-      textareaElement.style.height = textareaElement.scrollHeight + 'px';
-    }
-  }
-
-  /**
-   * Auto-resize the description textarea based on content
-   */
-  private autoResizeDescriptionTextarea(): void {
-    if (!this.descriptionInputRef) return;
-
-    const textareaElement = this.descriptionInputRef.nativeElement.querySelector('textarea');
-    if (textareaElement) {
-      textareaElement.style.height = 'auto';
-      textareaElement.style.height = textareaElement.scrollHeight + 'px';
-    }
-  }
-
-  /**
-   * Handle title change with auto-resize
-   */
-  handleTitleChange(value: string): void {
-    this.validateForm();
-    this.autoResizeTitleTextarea();
-  }
-
-  /**
-   * Handle description change with auto-resize
-   */
-  handleDescriptionChange(value: string): void {
-    this.validateForm();
-    this.autoResizeDescriptionTextarea();
-  }
-
-  /**
-   * Validate form fields
-   */
-  validateForm(): void {
-    const isValid = this.title.trim().length > 0 && this.description.trim().length > 0;
-    this.isFormValid.set(isValid);
-  }
-
-  /**
-   * Open who can book sheet
-   */
-  async openWhoSheet(): Promise<void> {
-    console.log('[FacilityCreationModal] Opening who can book sheet');
-    const { DsMobileWhoCanBookSheetComponent } = await import('./sheets/ds-mobile-who-can-book-sheet');
-    
-    const modal = await this.bottomSheetService.create({
-      component: DsMobileWhoCanBookSheetComponent,
-      componentProps: {},
-      breakpoints: [0, 1],
-      initialBreakpoint: 1,
-      handle: true,
-      cssClass: ['ds-bottom-sheet', 'auto-height']
-    });
-    
-    const result = await modal.onWillDismiss();
-    if (result?.data?.value) {
-      // value is now an array of selected community IDs
-      const selectedIds = result.data.value as string[];
-      
-      // If all non-"alle" options are selected, just display "Alle"
-      const allCommunities = ['faelleskab-a', 'faelleskab-b', 'faelleskab-c'];
-      const allCommunitiesSelected = allCommunities.every(id => selectedIds.includes(id));
-      
-      if (allCommunitiesSelected || selectedIds.includes('alle')) {
-        this.whoCanBook.set('Alle');
-      } else {
-        // Otherwise, show individual labels
-        const labels = selectedIds
-          .filter(id => id !== 'alle') // Exclude "alle" from individual display
-          .map((id: string) => {
-            // Convert IDs to display labels
-            if (id === 'faelleskab-a') return 'Fælleskab A';
-            if (id === 'faelleskab-b') return 'Fælleskab B';
-            if (id === 'faelleskab-c') return 'Fælleskab C';
-            return id;
-          });
-        this.whoCanBook.set(labels.join(', '));
-      }
-    }
-  }
-
-  /**
-   * Open when can it be booked sheet
-   */
-  async openWhenSheet(): Promise<void> {
-    console.log('[FacilityCreationModal] Opening when sheet');
-    const { DsMobileWhenCanBookSheetComponent } = await import('./sheets/ds-mobile-when-can-book-sheet');
-    
-    const modal = await this.bottomSheetService.create({
-      component: DsMobileWhenCanBookSheetComponent,
-      componentProps: {},
-      breakpoints: [0, 1],
-      initialBreakpoint: 1,
-      handle: true,
-      cssClass: ['ds-bottom-sheet', 'auto-height']
-    });
-    
-    const result = await modal.onWillDismiss();
-    if (result?.data?.value) {
-      // value is now an object with days, timeRange, duration
-      const { days, timeRange, duration } = result.data.value;
-      const dayStr = days.join(', ');
-      const timeStr = `${timeRange.start} til ${timeRange.end}`;
-      this.whenCanBook.set(`${dayStr}, ${timeStr}, ${duration}`);
-    }
-  }
-
-  /**
-   * Open price sheet
-   */
-  async openPriceSheet(): Promise<void> {
-    console.log('[FacilityCreationModal] Opening price sheet');
-    const { DsMobilePriceSheetComponent } = await import('./sheets/ds-mobile-price-sheet');
-    
-    const modal = await this.bottomSheetService.create({
-      component: DsMobilePriceSheetComponent,
-      componentProps: {},
-      breakpoints: [0, 1],
-      initialBreakpoint: 1,
-      handle: true,
-      cssClass: ['ds-bottom-sheet', 'auto-height']
-    });
-    
-    const result = await modal.onWillDismiss();
-    if (result?.data?.value) {
-      this.price.set(result.data.value);
-    }
-  }
-
-  /**
-   * Open access requirements sheet
-   */
-  async openAccessSheet(): Promise<void> {
-    console.log('[FacilityCreationModal] Opening access sheet');
-    const { DsMobileAccessSheetComponent } = await import('./sheets/ds-mobile-access-sheet');
-    
-    const modal = await this.bottomSheetService.create({
-      component: DsMobileAccessSheetComponent,
-      componentProps: {},
-      breakpoints: [0, 1],
-      initialBreakpoint: 1,
-      handle: true,
-      cssClass: ['ds-bottom-sheet', 'auto-height']
-    });
-    
-    const result = await modal.onWillDismiss();
-    if (result?.data?.value !== undefined) {
-      // value is now an array of selected restriction IDs
-      const selectedIds = result.data.value as string[];
-      
-      // If no restrictions are selected, show "Ingen adgangskrav"
-      if (selectedIds.length === 0) {
-        this.accessRequirements.set('Ingen adgangskrav');
-      } else {
-        const labels = selectedIds.map((id: string) => {
-          // Convert IDs to display labels
-          if (id === 'digital-adgangskode') return 'Digital adgangskode';
-          if (id === 'depositum') return 'Depositum';
-          if (id === 'nøglekort') return 'Nøglekort';
-          return id;
-        });
-        this.accessRequirements.set(labels.join(', '));
-      }
-    }
-  }
-
-  /**
-   * Add a new photo from camera/library
-   */
-  async addPhoto(): Promise<void> {
-    if (this.attachments().length >= 6) {
-      return;
-    }
-
-    try {
-      const result = await FilePicker.pickImages({
-        limit: 1,
-      });
-
-      const image = result.files?.[0];
-      if (image) {
-        const newAttachment: AttachmentData = {
-          id: `photo-${Date.now()}`,
-          src: image.path ? Capacitor.convertFileSrc(image.path) : (image.blob ? URL.createObjectURL(image.blob) : ''),
-          type: 'image',
-          name: image.name || `Photo ${this.attachments().length + 1}`,
-          size: this.formatFileSize(image.size ?? 0),
-        };
-
-        this.attachments.update((attachments) => [...attachments, newAttachment]);
-      }
-    } catch (error) {
-      console.error('[FacilityCreationModal] Error adding photo:', error);
-      // User cancelled or error occurred - just ignore
-    }
-  }
-
-  /**
-   * Remove an attachment
-   */
-  removeAttachment(attachmentId: string): void {
-    this.attachments.update((attachments) => attachments.filter((a) => a.id !== attachmentId));
-  }
-
-  /**
-   * Handle attachment button click
-   */
-  handleAddAttachment(): void {
-    if (this.attachments().length >= 6) {
-      return;
-    }
-
-    // Trigger the hidden file input
-    if (this.fileInput) {
-      this.fileInput.nativeElement.click();
-    }
-  }
-
-  /**
-   * Detect file type from file name or mime type
-   */
-  private detectFileType(file: File): AttachmentFileType {
-    const fileName = file.name.toLowerCase();
-    const mimeType = file.type.toLowerCase();
-
-    // Check if it's an image
-    if (mimeType.startsWith('image/')) {
-      return 'image';
-    }
-
-    // Check file extension
-    if (fileName.endsWith('.pdf')) {
-      return 'pdf';
-    } else if (fileName.endsWith('.doc')) {
-      return 'doc';
-    } else if (fileName.endsWith('.docx')) {
-      return 'docx';
-    } else if (fileName.endsWith('.xls')) {
-      return 'xls';
-    } else if (fileName.endsWith('.xlsx')) {
-      return 'xlsx';
-    }
-
-    return 'other';
-  }
-
-  /**
-   * Format file size for display
-   */
-  private formatFileSize(bytes: number): string {
-    if (bytes === 0) return '0 B';
-    const k = 1024;
-    const sizes = ['B', 'KB', 'MB', 'GB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
-  }
-
-  /**
-   * Handle file selection from file input
-   */
-  handleFileSelect(event: Event): void {
-    const input = event.target as HTMLInputElement;
-    const files = input.files;
-
-    if (!files || files.length === 0) {
-      return;
-    }
-
-    // Process each selected file (up to the limit)
-    const remainingSlots = 6 - this.attachments().length;
-    const filesToProcess = Array.from(files).slice(0, remainingSlots);
-
-    filesToProcess.forEach((file) => {
-      const fileType = this.detectFileType(file);
-
-      // Create a data URL for preview
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        const result = e.target?.result as string;
-        if (result) {
-          const newAttachment: AttachmentData = {
-            id: `file-${Date.now()}-${Math.random()}`,
-            src: result,
-            type: fileType,
-            name: file.name,
-            size: this.formatFileSize(file.size),
-          };
-          this.attachments.update((attachments) => [...attachments, newAttachment]);
-        }
-      };
-      reader.readAsDataURL(file);
-    });
-
-    // Reset the input so the same file can be selected again
-    input.value = '';
-  }
-
-  /**
-   * Handle form submission
-   */
-  async handleSubmit(): Promise<void> {
-    if (!this.isFormValid() || this.isSubmitting()) {
-      return;
-    }
-
-    this.isSubmitting.set(true);
-
-    try {
-      const facilityData: NewFacilityData = {
-        title: this.title.trim(),
-        description: this.description.trim(),
-        whoCanBook: this.whoCanBook(),
-        whenCanBook: this.whenCanBook(),
-        price: this.price(),
-        accessRequirements: this.accessRequirements(),
-        attachments: this.attachments(),
-      };
-
-      console.log('[FacilityCreationModal] Submitting facility:', facilityData);
-
-      if (this.onSubmit) {
-        await this.onSubmit(facilityData);
-      }
-
-      // Success - close the modal
-      this.modalController.dismiss();
-    } catch (error) {
-      console.error('[FacilityCreationModal] Error submitting facility:', error);
-      this.error = 'Failed to create facility. Please try again.';
-    } finally {
-      this.isSubmitting.set(false);
-    }
-  }
-}

package/src/components/facility-creation-modal/index.ts

@@ -1,9 +0,0 @@
-export { DsMobileFacilityCreationModalComponent } from './ds-mobile-facility-creation-modal';
-export type { NewFacilityData } from './ds-mobile-facility-creation-modal';
-export { DsMobileFacilityCreationModalService } from './ds-mobile-facility-creation-modal.service';
-export type { FacilityCreationModalOptions } from './ds-mobile-facility-creation-modal.service';
-export { DsMobileFacilityCreationConfirmationWrapperComponent } from './ds-mobile-facility-creation-confirmation-wrapper';
-export { DsMobileWhoCanBookSheetComponent } from './sheets/ds-mobile-who-can-book-sheet';
-export { DsMobileWhenCanBookSheetComponent } from './sheets/ds-mobile-when-can-book-sheet';
-export { DsMobilePriceSheetComponent } from './sheets/ds-mobile-price-sheet';
-export { DsMobileAccessSheetComponent } from './sheets/ds-mobile-access-sheet';