@propbinder/mobile-design 0.2.50 → 0.2.53

package/src/components/new-inquiry-modal/ds-mobile-new-inquiry-modal.css

@@ -1,112 +0,0 @@
-/* ============================================
-   NEW INQUIRY MODAL STYLES
-   ============================================ */
-
-/* Large Title Textarea - Matches design system pattern */
-.inquiry-title-input {
-  flex: 0 0 auto; /* Don't grow like description */
-}
-
-.inquiry-title-input ::ng-deep textarea {
-  font-size: var(--font-size-2xl);
-  font-weight: 400;
-  line-height: 1.2;
-  overflow-y: hidden;
-  resize: none;
-  box-sizing: border-box;
-  /* Add right padding to prevent overlap with close button */
-  padding-right: 52px; /* 36px button + 16px spacing */
-  /* Height will be controlled dynamically by JavaScript */
-}
-
-/* ============================================
-   FIXED BOTTOM CONTAINER (Slides with keyboard)
-   ============================================ */
-
-.fixed-bottom-container {
-  background: var(--color-background-neutral-primary);
-  border-top: 1px solid var(--border-color-default);
-}
-
-/* Attachment Previews Section (Inside Fixed Bottom) */
-.attachment-previews-section {
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--border-color-default);
-}
-
-.image-previews {
-  display: flex;
-  gap: 8px;
-  overflow-x: auto;
-  padding-bottom: 4px;
-  }
-  
-/* Hide scrollbar for photo previews */
-.image-previews::-webkit-scrollbar {
-  display: none;
-}
-
-/* Submit Actions Container */
-.submit-container {
-  padding: 16px 20px;
-}
-
-.submit-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-}
-
-/* Upload Actions (Left Side) */
-.upload-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.upload-actions ds-icon-button::ng-deep button {
-  width: 44px;
-  height: 44px;
-  border-radius: 50%;
-}
-
-/* Submit Button (Right Side) */
-.submit-content ds-button::ng-deep button {
-  border-radius: 100px;
-}
-
-.submit-content ds-button.submit-action-button::ng-deep button {
-  height: 44px;
-  min-height: 44px;
-  max-height: 44px;
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-/* Description Textarea - Expand to fill available space */
-.inquiry-description-input {
-  display: flex;
-  flex: 1;
-  min-height: 0;
-}
-
-.inquiry-description-input ::ng-deep .textarea-container {
-  display: flex;
-  flex: 1;
-  min-height: 0;
-}
-
-.inquiry-description-input ::ng-deep textarea {
-  flex: 1;
-  min-height: 80px;
-  overflow-y: hidden;
-  resize: none;
-}
-
-/* Responsive adjustments */
-@media (min-width: 768px) {
-  .submit-container {
-    padding: 20px 32px;
-  }
-}

package/src/components/new-inquiry-modal/ds-mobile-new-inquiry-modal.service.ts

@@ -1,93 +0,0 @@
-import { Injectable } from '@angular/core';
-import { ModalController } from '@ionic/angular/standalone';
-import { DsMobileNewInquiryModalComponent, NewInquiryData } from './ds-mobile-new-inquiry-modal';
-import { BaseModalService } from '../../services/base-modal.service';
-
-/**
- * Options for opening the new inquiry modal
- */
-export interface NewInquiryModalOptions {
-  /** Callback function when inquiry is submitted */
-  onSubmit?: (data: NewInquiryData) => void | Promise<void>;
-  /** Initial loading state */
-  loading?: boolean;
-  /** Initial error message */
-  error?: string;
-  /** Custom placeholder for title field */
-  titlePlaceholder?: string;
-  /** Custom placeholder for description field */
-  descriptionPlaceholder?: string;
-  /** Custom label for submit button */
-  submitButtonLabel?: string;
-}
-
-/**
- * DsMobileNewInquiryModalService
- *
- * Service for displaying the new inquiry creation modal.
- * Built on Ionic's modal system with native gestures and animations.
- *
- * Features:
- * - Full-screen modal with form
- * - Title and description inputs
- * - Photo upload with camera/gallery
- * - Form validation
- * - Submit handling
- * - Loading and error states
- *
- * @example
- * ```typescript
- * constructor(private newInquiryModal: DsMobileNewInquiryModalService) {}
- *
- * async createNewInquiry(): Promise<void> {
- *   console.log('[InquiriesPage] FAB clicked, opening modal...');
- *
- *   await this.newInquiryModal.open({
- *     onSubmit: async (data) => {
- *       console.log('Creating inquiry:', data);
- *       // Call your API to create the inquiry
- *       await this.apiService.createInquiry(data);
- *       // Close the modal
- *       await this.newInquiryModal.close();
- *     }
- *   });
- * }
- * ```
- */
-@Injectable({
-  providedIn: 'root',
-})
-export class DsMobileNewInquiryModalService extends BaseModalService {
-  constructor(modalController: ModalController) {
-    super(modalController);
-  }
-
-  /**
-   * Open the new inquiry modal
-   *
-   * @param options Modal options including onSubmit callback
-   * @returns Promise that resolves when the modal is presented
-   */
-  async open(options?: NewInquiryModalOptions): Promise<void> {
-    // console.log('[NewInquiryModal] Opening modal with options:', options);
-
-    const modal = await this.createModal(
-      DsMobileNewInquiryModalComponent,
-      {
-        onSubmit: options?.onSubmit,
-        loading: options?.loading ?? false,
-        ...(options?.error && { error: options.error }),
-        ...(options?.titlePlaceholder && { titlePlaceholder: options.titlePlaceholder }),
-        ...(options?.descriptionPlaceholder && { descriptionPlaceholder: options.descriptionPlaceholder }),
-        ...(options?.submitButtonLabel && { submitButtonLabel: options.submitButtonLabel }),
-      },
-      {
-        keyboardClose: false, // Don't close on keyboard hide for this modal
-      },
-    );
-
-    console.log('[NewInquiryModal] Modal created, presenting...');
-    await modal.present();
-    console.log('[NewInquiryModal] Modal presented');
-  }
-}

package/src/components/new-inquiry-modal/ds-mobile-new-inquiry-modal.ts

@@ -1,442 +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, DsIconButtonComponent } from '@propbinder/design-system';
-import { DsMobileModalBaseComponent } from '../modal-base/ds-mobile-modal-base';
-import { DsMobileAttachmentPreviewComponent, type AttachmentData, type AttachmentFileType } from '../attachment-preview';
-import { DsMobileSectionComponent } from '../section';
-
-/**
- * Photo interface for inquiry (deprecated - use AttachmentData)
- * @deprecated Use AttachmentData from attachment-preview component instead
- */
-export interface InquiryPhoto {
-  id: string;
-  src: string;
-  alt?: string;
-}
-
-/**
- * New inquiry form data
- */
-export interface NewInquiryData {
-  title: string;
-  description: string;
-  attachments: AttachmentData[];
-  category?: string;
-}
-
-/**
- * DsMobileNewInquiryModalComponent
- *
- * Modal component for creating new inquiries.
- * Uses ds-mobile-modal-base for consistent layout and behavior.
- *
- * Features:
- * - Title and description fields
- * - Photo upload with preview
- * - Submit button at bottom
- * - Form validation
- * - Camera/photo picker integration
- *
- * This component is typically not used directly - use DsMobileNewInquiryModalService instead.
- *
- * @example
- * ```typescript
- * // Don't instantiate directly - use the service:
- * constructor(private inquiryModal: DsMobileNewInquiryModalService) {}
- *
- * createInquiry() {
- *   this.inquiryModal.open({
- *     onSubmit: (data) => console.log('Inquiry created:', data)
- *   });
- * }
- * ```
- */
-@Component({
-  selector: 'ds-mobile-new-inquiry-modal',
-  standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    DsButtonComponent,
-    DsTextareaComponent,
-    DsIconButtonComponent,
-    DsMobileModalBaseComponent,
-    DsMobileAttachmentPreviewComponent,
-    DsMobileSectionComponent,
-  ],
-  styleUrls: ['../shared/mobile-common.css', './ds-mobile-new-inquiry-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>
-        <!-- 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>
-
-      <!-- Fixed Bottom Container (Slides with keyboard) -->
-      <div footer 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="md" [disabled]="!isFormValid() || isSubmitting()" (clicked)="handleSubmit()">
-              {{ submitButtonLabel }}
-            </ds-button>
-          </div>
-        </div>
-      </div>
-    </ds-mobile-modal-base>
-  `,
-})
-export class DsMobileNewInquiryModalComponent implements OnInit, AfterViewInit {
-  private modalController = inject(ModalController);
-  @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: NewInquiryData) => void | Promise<void>;
-
-  /**
-   * Placeholder for the title field
-   */
-  @Input() titlePlaceholder: string = 'Name your inquiry';
-
-  /**
-   * Placeholder for the description field
-   */
-  @Input() descriptionPlaceholder: string = 'Tell us what this inquiry is about...';
-
-  /**
-   * Label for the submit button
-   */
-  @Input() submitButtonLabel: string = 'Submit';
-
-  /**
-   * Form title field
-   */
-  title = '';
-
-  /**
-   * Form description field
-   */
-  description = '';
-
-  /**
-   * Attachments array (replaces photos)
-   */
-  attachments = signal<AttachmentData[]>([]);
-
-  /**
-   * Form validation state
-   */
-  isFormValid = signal<boolean>(false);
-
-  /**
-   * Submitting state
-   */
-  isSubmitting = signal<boolean>(false);
-
-  ngOnInit(): void {
-    console.log('[NewInquiryModal] 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);
-  }
-
-  /**
-   * 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('[NewInquiryModal] 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 inquiryData: NewInquiryData = {
-        title: this.title.trim(),
-        description: this.description.trim(),
-        attachments: this.attachments(),
-      };
-
-      console.log('[NewInquiryModal] Submitting inquiry:', inquiryData);
-
-      if (this.onSubmit) {
-        await this.onSubmit(inquiryData);
-      }
-
-      // Success - close the modal
-      this.modalController.dismiss();
-    } catch (error) {
-      console.error('[NewInquiryModal] Error submitting inquiry:', error);
-      this.error = 'Failed to create inquiry. Please try again.';
-    } finally {
-      this.isSubmitting.set(false);
-    }
-  }
-}

package/src/components/new-inquiry-modal/index.ts

@@ -1,4 +0,0 @@
-export { DsMobileNewInquiryModalComponent } from './ds-mobile-new-inquiry-modal';
-export type { NewInquiryData, InquiryPhoto } from './ds-mobile-new-inquiry-modal';
-export { DsMobileNewInquiryModalService } from './ds-mobile-new-inquiry-modal.service';
-export type { NewInquiryModalOptions } from './ds-mobile-new-inquiry-modal.service';