@propbinder/mobile-design 0.2.50 → 0.2.53

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

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

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