@propbinder/mobile-design 0.2.47 → 0.2.50

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

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

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

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

@@ -0,0 +1,4 @@
+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';