@propbinder/mobile-design 0.0.1 → 0.0.2

package/src/components/bottom-sheet/ds-mobile-bottom-sheet.css

@@ -0,0 +1,110 @@
+/**
+ * Bottom Sheet Modal Styles
+ * Based on Ionic 6 bottom sheet presentation
+ */
+
+/* Base bottom sheet styling */
+.ds-bottom-sheet {
+  --border-radius: 16px;
+  --box-shadow: 0px -2px 24px rgba(0, 0, 0, 0.12);
+  /* Position backdrop to start below header */
+  --backdrop-top: 32px;
+  --offset-top: 32px;
+  --backdrop-opacity: 0.4;
+  transition: --backdrop-opacity 0.3s ease;
+  /* Position the modal wrapper to start below header */
+  /* Default: 32px offset to align with header content */
+  top: 32px !important;
+  height: calc(100% - 32px) !important;
+}
+
+/* Faster animation for instant appearance */
+.ds-bottom-sheet::part(content) {
+  transition: transform 150ms cubic-bezier(0.36, 0.66, 0.04, 1) !important;
+}
+
+.ds-bottom-sheet::part(backdrop) {
+  transition: opacity 150ms ease-out !important;
+}
+
+/* On iOS devices with safe area, use safe-area-inset-top to avoid status bar overlap */
+@supports (padding-top: env(safe-area-inset-top)) {
+  .ds-bottom-sheet {
+    /* Use safe-area-inset-top if larger than 32px, otherwise use 32px */
+    /* This ensures we're always below the status bar */
+    top: env(safe-area-inset-top, 32px) !important;
+    height: calc(100% - env(safe-area-inset-top, 32px)) !important;
+  }
+}
+
+/* Backdrop blur effect */
+.ds-bottom-sheet--blur {
+  --backdrop-opacity: 0.8;
+}
+
+.ds-bottom-sheet--blur::part(backdrop) {
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+/* Custom backdrop styling */
+.ds-bottom-sheet--custom-backdrop::part(backdrop) {
+  background: rgba(0, 0, 0, var(--backdrop-opacity, 0.6));
+}
+
+/* Backdrop styling */
+.ds-bottom-sheet::part(backdrop) {
+  background: rgba(0, 0, 0, var(--backdrop-opacity, 0.6));
+}
+
+/* Handle customization */
+.ds-bottom-sheet::part(handle) {
+  background: var(--border-color-default);
+  width: 36px;
+  height: 4px;
+  border-radius: 2px;
+  margin-top: 4px;
+  margin-bottom: 8px;
+}
+
+/* Content area styling - Override Ionic's bottom-based positioning */
+.ds-bottom-sheet::part(content) {
+  border-radius: var(--border-radius);
+  background: var(--color-background-neutral-primary, #ffffff);
+  box-shadow: var(--box-shadow);
+  position: absolute !important;
+  top: 0 !important;
+  bottom: 0 !important;
+  height: 100% !important;
+  max-height: 100% !important;
+}
+
+/* Remove border radius when fully expanded */
+@media (min-height: 768px) {
+  .ds-bottom-sheet.modal-sheet-expanded::part(content) {
+    border-radius: 0;
+  }
+}
+
+
+
+/* Ensure content scrolls properly */
+.ds-bottom-sheet ion-content {
+  --background: transparent;
+}
+
+/* Better mobile experience */
+@media (max-width: 768px) {
+  .ds-bottom-sheet::part(content) {
+    max-width: 100%;
+  }
+}
+
+/* Desktop centering */
+@media (min-width: 769px) {
+  .ds-bottom-sheet::part(content) {
+    max-width: 640px;
+    margin: 0 auto;
+  }
+}
+

package/src/components/bottom-sheet/ds-mobile-bottom-sheet.service.ts

@@ -0,0 +1,167 @@
+import { Injectable } from '@angular/core';
+import { ModalController } from '@ionic/angular/standalone';
+import { ComponentRef } from '@angular/core';
+
+/**
+ * Configuration options for the bottom sheet modal
+ */
+export interface BottomSheetOptions {
+  /** The component to display in the bottom sheet */
+  component: any;
+  /** Component props to pass to the modal content */
+  componentProps?: { [key: string]: any };
+  /** Breakpoints for the bottom sheet (0-1 values representing percentage of screen) */
+  breakpoints?: number[];
+  /** Initial breakpoint to open the sheet at */
+  initialBreakpoint?: number;
+  /** Show/hide the drag handle */
+  handle?: boolean;
+  /** Custom CSS class for styling */
+  cssClass?: string | string[];
+  /** Whether backdrop dismisses the modal */
+  backdropDismiss?: boolean;
+  /** Backdrop opacity (0-1) */
+  backdropOpacity?: number;
+  /** Enable backdrop blur effect */
+  backdropBlur?: boolean;
+  /** Keyboard close behavior */
+  keyboardClose?: boolean;
+  /** Auto-height mode: sheet sizes to content instead of using fixed breakpoints */
+  autoHeight?: boolean;
+}
+
+/**
+ * DsMobileBottomSheetService
+ * 
+ * Service for creating and managing Ionic 6 bottom sheet modals.
+ * Based on the Ionic blog article: https://ionic.io/blog/5-examples-of-the-new-ionic-6-bottom-sheet-modal
+ * 
+ * Features:
+ * - Multiple breakpoints for snap-to positions
+ * - Customizable initial height
+ * - Optional drag handle
+ * - Backdrop blur effect
+ * - Custom styling support
+ * 
+ * @example
+ * ```typescript
+ * constructor(private bottomSheet: DsMobileBottomSheetService) {}
+ * 
+ * async openSheet() {
+ *   const sheet = await this.bottomSheet.create({
+ *     component: PostCreateComponent,
+ *     breakpoints: [0, 0.5, 0.9],
+ *     initialBreakpoint: 0.5,
+ *     handle: true
+ *   });
+ *   
+ *   const result = await sheet.onWillDismiss();
+ *   console.log('Sheet dismissed with:', result.data);
+ * }
+ * ```
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class DsMobileBottomSheetService {
+  constructor(private modalController: ModalController) {}
+
+  /**
+   * Create and present a bottom sheet modal
+   * 
+   * @param options Configuration options for the bottom sheet
+   * @returns Promise that resolves to the modal instance
+   */
+  async create(options: BottomSheetOptions): Promise<HTMLIonModalElement> {
+    const {
+      component,
+      componentProps = {},
+      breakpoints = [0, 0.5, 0.9],
+      initialBreakpoint = 0.5,
+      handle = true,
+      cssClass = '',
+      backdropDismiss = true,
+      backdropOpacity,
+      backdropBlur = false,
+      keyboardClose = true,
+      autoHeight = false
+    } = options;
+
+    // Build CSS classes array
+    const cssClasses = ['ds-bottom-sheet'];
+    if (backdropBlur) {
+      cssClasses.push('ds-bottom-sheet--blur');
+    }
+    if (autoHeight) {
+      cssClasses.push('auto-height');
+    }
+    if (typeof cssClass === 'string' && cssClass) {
+      cssClasses.push(cssClass);
+    } else if (Array.isArray(cssClass)) {
+      cssClasses.push(...cssClass);
+    }
+
+    const modal = await this.modalController.create({
+      component,
+      componentProps,
+      breakpoints: autoHeight ? undefined : breakpoints,
+      initialBreakpoint: autoHeight ? undefined : initialBreakpoint,
+      handle: autoHeight ? false : handle,
+      cssClass: cssClasses,
+      backdropDismiss,
+      keyboardClose,
+      showBackdrop: true,
+      canDismiss: backdropDismiss,
+      // Remove animation delay for instant appearance
+      animated: true,
+      enterAnimation: undefined, // Use default but we'll customize via CSS
+      leaveAnimation: undefined,
+      ...(backdropOpacity !== undefined && { 
+        cssClass: [...cssClasses, 'ds-bottom-sheet--custom-backdrop']
+      })
+    });
+
+    // Apply custom backdrop opacity if specified
+    if (backdropOpacity !== undefined) {
+      modal.style.setProperty('--backdrop-opacity', backdropOpacity.toString());
+    }
+
+    // Add ESC key listener to dismiss the modal
+    const escKeyHandler = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        modal.dismiss(undefined, 'escape');
+      }
+    };
+    
+    // Add listener when modal is presented
+    modal.addEventListener('ionModalDidPresent', () => {
+      document.addEventListener('keydown', escKeyHandler);
+    });
+    
+    // Remove listener when modal is dismissed
+    modal.addEventListener('ionModalDidDismiss', () => {
+      document.removeEventListener('keydown', escKeyHandler);
+    });
+
+    await modal.present();
+    
+    // Don't wait - return immediately so component can try to focus
+    // while still in user gesture context
+    return modal;
+  }
+
+  /**
+   * Dismiss all open modals
+   */
+  async dismiss(data?: any, role?: string): Promise<boolean> {
+    return this.modalController.dismiss(data, role);
+  }
+
+  /**
+   * Get the top-most modal overlay
+   */
+  async getTop(): Promise<HTMLIonModalElement | undefined> {
+    return this.modalController.getTop();
+  }
+}
+