@propbinder/mobile-design 0.0.2 → 0.0.22

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

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

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