@propbinder/mobile-design 0.2.48 → 0.2.50

package/src/pages/whitelabel-demo-modal.service.ts

@@ -0,0 +1,77 @@
+import { Injectable } from '@angular/core';
+import { ModalController } from '@ionic/angular/standalone';
+import { WhitelabelDemoModalComponent } from './whitelabel-demo-modal.component';
+
+/**
+ * WhitelabelDemoModalService
+ *
+ * Service for displaying the whitelabel demo in a full-screen modal.
+ * Built on Ionic's modal system with native gestures and animations.
+ *
+ * @example
+ * ```typescript
+ * constructor(private whitelabelModal: WhitelabelDemoModalService) {}
+ *
+ * async openDemo() {
+ *   await this.whitelabelModal.open();
+ * }
+ * ```
+ */
+@Injectable({
+  providedIn: 'root',
+})
+export class WhitelabelDemoModalService {
+  constructor(private modalController: ModalController) {}
+
+  /**
+   * Open the whitelabel demo modal
+   *
+   * @returns Promise that resolves when the modal is presented
+   */
+  async open(): Promise<void> {
+    try {
+      // console.log('[WhitelabelDemoModal] Opening...');
+
+      const modal = await this.modalController.create({
+        component: WhitelabelDemoModalComponent,
+        cssClass: 'ds-whitelabel-demo-modal',
+        mode: 'ios',
+        presentingElement:
+          document.querySelector('ion-router-outlet') || undefined,
+        backdropDismiss: true,
+        showBackdrop: true,
+        animated: true,
+        keyboardClose: true,
+        // Control the presenting element animation
+        enterAnimation: undefined, // Use default
+        leaveAnimation: undefined, // Use default
+      });
+
+      // console.log('[WhitelabelDemoModal] Modal created, presenting...');
+      await modal.present();
+      // console.log('[WhitelabelDemoModal] Modal presented');
+    } catch (error) {
+      // console.error('[WhitelabelDemoModal] Error opening modal:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Close the currently open whitelabel demo modal
+   *
+   * @param data Optional data to pass back when dismissing
+   * @returns Promise that resolves when the modal is dismissed
+   */
+  async close(data?: any): Promise<boolean> {
+    return this.modalController.dismiss(data);
+  }
+
+  /**
+   * Get the top-most modal if one exists
+   *
+   * @returns Promise that resolves to the modal element or undefined
+   */
+  async getTop(): Promise<HTMLIonModalElement | undefined> {
+    return this.modalController.getTop();
+  }
+}

package/src/public-api.ts

@@ -0,0 +1,6 @@
+/* Auto-generated. Do not edit. */
+export * from './components';
+export * from './examples';
+export * from './animations/page-transitions';
+export * from './services';
+export * from './models';

package/src/services/base-modal.service.ts

@@ -0,0 +1,101 @@
+import { Injectable, Type } from '@angular/core';
+import { ModalController, ModalOptions as IonicModalOptions } from '@ionic/angular/standalone';
+
+/**
+ * BaseModalService
+ *
+ * Abstract base class for all modal services in the application.
+ * Enforces consistent modal configuration and presentation across all modals.
+ *
+ * **Features:**
+ * - Standardized modal presentation (stacked effect with gap at top)
+ * - Consistent backdrop and dismissal behavior
+ * - Automatic safe area handling
+ * - Native iOS-style animations
+ *
+ * **Why use this:**
+ * - Ensures all modals have the same look and feel
+ * - Prevents inconsistencies in modal configuration
+ * - Single source of truth for modal settings
+ * - Makes it impossible to forget critical configuration
+ *
+ * @example
+ * ```typescript
+ * @Injectable({ providedIn: 'root' })
+ * export class MyModalService extends BaseModalService {
+ *   async open(data: MyData) {
+ *     const modal = await this.createModal(
+ *       MyModalComponent,
+ *       { data }
+ *     );
+ *     await modal.present();
+ *   }
+ * }
+ * ```
+ */
+@Injectable()
+export abstract class BaseModalService {
+  constructor(protected modalController: ModalController) {}
+
+  /**
+   * Create a modal with standardized configuration
+   *
+   * This method enforces consistent modal behavior across the app:
+   * - Uses 'ds-modal-base' CSS class for consistent styling
+   * - iOS mode for native feel
+   * - presentingElement for stacked modal effect
+   * - Standard backdrop and dismissal settings
+   *
+   * @param component The component to display in the modal
+   * @param componentProps Props to pass to the component
+   * @param customOptions Optional overrides for specific modal needs
+   * @returns Promise resolving to the created modal
+   *
+   * @example
+   * ```typescript
+   * const modal = await this.createModal(
+   *   PostDetailComponent,
+   *   { postId: '123', loading: false }
+   * );
+   * await modal.present();
+   * ```
+   */
+  protected async createModal<T>(
+    component: Type<T>,
+    componentProps?: Record<string, any>,
+    customOptions?: Partial<IonicModalOptions>
+  ): Promise<HTMLIonModalElement> {
+    return await this.modalController.create({
+      component,
+      componentProps,
+      // Standard configuration for all modals
+      cssClass: 'ds-modal-base',
+      mode: 'ios',
+      presentingElement: document.querySelector('ion-router-outlet') || undefined,
+      backdropDismiss: true,
+      showBackdrop: true,
+      animated: true,
+      // Allow service-specific overrides if needed
+      ...customOptions,
+    });
+  }
+
+  /**
+   * Close the currently open modal
+   *
+   * @param data Optional data to pass back when dismissing
+   * @returns Promise that resolves when the modal is dismissed
+   */
+  async close(data?: any): Promise<boolean> {
+    return this.modalController.dismiss(data);
+  }
+
+  /**
+   * Get the top-most modal if one exists
+   *
+   * @returns Promise that resolves to the modal element or undefined
+   */
+  async getTop(): Promise<HTMLIonModalElement | undefined> {
+    return this.modalController.getTop();
+  }
+}

package/src/services/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Services Barrel File
+ *
+ * Export all application services for easy importing
+ */
+
+export * from './base-modal.service';
+export * from './posts.service';
+export * from './tracking-permission.service';
+export * from './user.service';
+export * from './whitelabel.service';