@propbinder/mobile-design 0.2.47 → 0.2.50

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

@@ -0,0 +1,189 @@
+/* ============================================
+   FACILITY CREATION MODAL STYLES
+   ============================================ */
+
+/* Make modal wrapper fill available height (only for full-height modals) */
+:host ::ng-deep .modal-wrapper:not(.is-auto-height) {
+  min-height: 100%;
+}
+
+/* Make modal-content-container flex for full-height modals */
+:host ::ng-deep .modal-wrapper:not(.is-auto-height) .modal-content-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+/* Make modal-main-content fill available height */
+:host ::ng-deep .modal-wrapper:not(.is-auto-height) .modal-main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Make form section fill available height */
+.form-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 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 */
+}
+
+/* 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;
+}
+
+/* ============================================
+   LIST ITEM DETAILS
+   ============================================ */
+
+.detail-label {
+  font-family: 'Brockmann', sans-serif;
+  font-size: var(--font-size-xs, 12px);
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: -0.3px;
+  color: var(--text-color-default-tertiary, #868e99);
+}
+
+.detail-value {
+  font-family: 'Brockmann', sans-serif;
+  font-size: var(--font-size-sm, 14px);
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: -0.3px;
+  color: var(--text-color-default-primary, #202227);
+}
+
+/* ============================================
+   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;
+}
+
+/* Responsive adjustments */
+@media (min-width: 768px) {
+  .submit-container {
+    padding: 20px 32px;
+  }
+}
+
+/* ============================================
+   DEPRECATED: OLD FIXED BOTTOM BUTTON STYLES
+   Keeping for backwards compatibility if needed
+   ============================================ */
+
+.create-action {
+  padding: 16px 20px;
+  background: var(--color-surface-primary, #ffffff);
+  border-top: 1px solid var(--color-border, #e5e5e5);
+}
+
+.create-action ds-button {
+  display: block;
+  width: 100%;
+}
+
+.create-action ::ng-deep ds-button button {
+  width: 100%;
+  border-radius: 100px;
+  height: 48px;
+}
+
+/* Responsive adjustments */
+@media (min-width: 768px) {
+  .create-action {
+    padding: 20px 32px;
+  }
+}

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

@@ -0,0 +1,135 @@
+import { Injectable } from '@angular/core';
+import { ModalController } from '@ionic/angular/standalone';
+import {
+  DsMobileFacilityCreationModalComponent,
+  NewFacilityData,
+} from './ds-mobile-facility-creation-modal';
+import { DsMobileFacilityCreationConfirmationWrapperComponent } from './ds-mobile-facility-creation-confirmation-wrapper';
+import { BaseModalService } from '../../services/base-modal.service';
+import { disableModalShadowPointerEvents } from '../bottom-sheet/modal-shadow-fix';
+
+/**
+ * Options for opening the facility creation modal
+ */
+export interface FacilityCreationModalOptions {
+  /** Callback function when facility is submitted */
+  onSubmit?: (data: NewFacilityData) => 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;
+}
+
+/**
+ * DsMobileFacilityCreationModalService
+ *
+ * Service for displaying the facility creation modal.
+ * Built on Ionic's modal system with native gestures and animations.
+ *
+ * Features:
+ * - Full-screen modal with form
+ * - Title and description inputs
+ * - Interactive list items for facility options
+ * - Bottom sheet pickers
+ * - Form validation
+ * - Submit handling with confirmation sheet
+ * - Loading and error states
+ *
+ * @example
+ * ```typescript
+ * constructor(private facilityCreationModal: DsMobileFacilityCreationModalService) {}
+ *
+ * async createNewFacility(): Promise<void> {
+ *   await this.facilityCreationModal.open({
+ *     onSubmit: async (data) => {
+ *       console.log('Creating facility:', data);
+ *       await this.apiService.createFacility(data);
+ *       await this.facilityCreationModal.close();
+ *     }
+ *   });
+ * }
+ * ```
+ */
+@Injectable({
+  providedIn: 'root',
+})
+export class DsMobileFacilityCreationModalService extends BaseModalService {
+  constructor(modalController: ModalController) {
+    super(modalController);
+  }
+
+  /**
+   * Open the facility creation modal
+   *
+   * @param options Modal options including onSubmit callback
+   * @returns Promise that resolves when the modal is presented
+   */
+  async open(options?: FacilityCreationModalOptions): Promise<void> {
+    console.log('[FacilityCreationModal] Opening modal with options:', options);
+
+    const modal = await this.createModal(
+      DsMobileFacilityCreationModalComponent,
+      {
+        onSubmit: async (data: NewFacilityData) => {
+          console.log('[FacilityCreationModal] Facility submitted:', data);
+          
+          // Call user's onSubmit callback if provided
+          if (options?.onSubmit) {
+            await options.onSubmit(data);
+          }
+          
+          // Close the modal
+          await this.close();
+          
+          // Show confirmation sheet
+          await this.openConfirmationSheet(data);
+        },
+        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
+        cssClass: ['ds-modal-base'],
+      },
+    );
+
+    console.log('[FacilityCreationModal] Modal created, presenting...');
+    await modal.present();
+    console.log('[FacilityCreationModal] Modal presented');
+  }
+
+  /**
+   * Open the confirmation bottom sheet after successful facility creation
+   * 
+   * @param facilityData The created facility data
+   * @returns Promise that resolves when the sheet is dismissed
+   */
+  private async openConfirmationSheet(facilityData: NewFacilityData): Promise<void> {
+    const sheet = await this.modalController.create({
+      component: DsMobileFacilityCreationConfirmationWrapperComponent,
+      componentProps: {
+        facilityData
+      },
+      breakpoints: [0, 1],
+      initialBreakpoint: 1,
+      handle: true,
+      cssClass: ['ds-bottom-sheet', 'auto-height'],
+      backdropDismiss: true,
+      showBackdrop: true,
+      mode: 'ios',
+      presentingElement: undefined
+    });
+
+    await sheet.present();
+    disableModalShadowPointerEvents(sheet);
+  }
+}