@propbinder/mobile-design 0.2.50 → 0.2.52

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

@@ -1,156 +0,0 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, OnDestroy, ElementRef, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ModalController } from '@ionic/angular/standalone';
-import { Keyboard } from '@capacitor/keyboard';
-
-/**
- * DsMobileBottomSheetWrapperComponent
- * 
- * A wrapper component that provides common layout styling for all bottom sheets.
- * Handles safe area insets, provides consistent layout structure, and automatic
- * keyboard handling using the same approach as modal base.
- * 
- * Features:
- * - Automatic keyboard push-up behavior (same as MobileModalBase)
- * - Auto-height for bottom sheets
- * - Safe area inset handling
- * - Consistent styling across all bottom sheets
- * - Only responds to keyboard when this bottom sheet is the top-most modal
- * 
- * Usage:
- * Wrap your bottom sheet content with this component using ng-content projection.
- * 
- * @example
- * ```html
- * <ds-mobile-bottom-sheet-wrapper>
- *   <!-- Your bottom sheet content here -->
- * </ds-mobile-bottom-sheet-wrapper>
- * ```
- */
-@Component({
-  selector: 'ds-mobile-bottom-sheet-wrapper',
-  standalone: true,
-  imports: [CommonModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `
-    <div class="bottom-sheet-wrapper">
-      <ng-content></ng-content>
-    </div>
-  `,
-  styles: [`
-    :host {
-      display: block;
-      background: var(--color-background-neutral-primary, #ffffff);
-      background: #ffffff; /* Explicit fallback for iOS */
-      height: auto;
-    }
-    
-    .bottom-sheet-wrapper {
-      display: flex;
-      flex-direction: column;
-      background: var(--color-background-neutral-primary, #ffffff);
-      background: #ffffff; /* Explicit fallback for iOS */
-      padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
-      overflow: hidden;
-      width: 100%;
-      height: auto;
-      min-height: unset;
-    }
-
-    :host ::ng-deep .view-container:not(.is-animating) {
-      height: auto !important;
-      min-height: 0 !important;
-    }
-  `]
-})
-export class DsMobileBottomSheetWrapperComponent implements OnInit, OnDestroy {
-  private modalController = inject(ModalController);
-  
-  constructor(private elementRef: ElementRef) {}
-
-  ngOnInit(): void {
-    // Set up keyboard listeners using the same approach as MobileModalBase
-    this.setupKeyboardListeners();
-  }
-
-  ngOnDestroy(): void {
-    this.cleanupKeyboardListeners();
-  }
-
-  /**
-   * Set up keyboard event listeners to adjust bottom sheet position
-   * Uses --keyboard-height-sheet variable (separate from modal's --keyboard-height)
-   * Only responds if this bottom sheet is the currently active (top-most) modal
-   */
-  private setupKeyboardListeners(): void {
-    Keyboard.addListener('keyboardWillShow', async (info) => {
-      // Check if this bottom sheet is the top-most modal
-      const topModal = await this.modalController.getTop();
-      const thisModal = this.getModalElement();
-      
-      if (topModal !== thisModal) {
-        console.log('[BottomSheetWrapper] Keyboard event ignored - not top modal');
-        return; // Not the active modal, ignore keyboard event
-      }
-      
-      console.log('[BottomSheetWrapper] Keyboard showing, height:', info.keyboardHeight);
-      
-      // Use a separate CSS variable for bottom sheets to avoid conflicts with modals
-      document.documentElement.style.setProperty('--keyboard-height-sheet', `${info.keyboardHeight}px`);
-      
-      // Add class to the modal element for additional styling control
-      if (thisModal) {
-        thisModal.classList.add('keyboard-visible-sheet');
-      }
-    }).catch(() => {
-      console.log('[BottomSheetWrapper] Keyboard plugin not available (web)');
-    });
-
-    Keyboard.addListener('keyboardWillHide', async () => {
-      // Check if this bottom sheet is the top-most modal
-      const topModal = await this.modalController.getTop();
-      const thisModal = this.getModalElement();
-      
-      if (topModal !== thisModal) {
-        console.log('[BottomSheetWrapper] Keyboard hide event ignored - not top modal');
-        return; // Not the active modal, ignore keyboard event
-      }
-      
-      console.log('[BottomSheetWrapper] Keyboard hiding');
-      
-      // Reset keyboard height for bottom sheets
-      document.documentElement.style.setProperty('--keyboard-height-sheet', '0px');
-      
-      // Remove keyboard class
-      if (thisModal) {
-        thisModal.classList.remove('keyboard-visible-sheet');
-      }
-    }).catch(() => {
-      console.log('[BottomSheetWrapper] Keyboard plugin not available (web)');
-    });
-  }
-
-  /**
-   * Clean up keyboard event listeners
-   */
-  private cleanupKeyboardListeners(): void {
-    Keyboard.removeAllListeners().catch(() => {
-      // Keyboard plugin not available
-    });
-  }
-
-  /**
-   * Get the parent ion-modal element
-   */
-  private getModalElement(): HTMLIonModalElement | null {
-    let element = this.elementRef.nativeElement.parentElement;
-    while (element) {
-      if (element.tagName === 'ION-MODAL') {
-        return element as HTMLIonModalElement;
-      }
-      element = element.parentElement;
-    }
-    return null;
-  }
-}
-

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

@@ -1,101 +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: none;
-  --backdrop-opacity: 0.4;
-  transition: --backdrop-opacity 0.3s ease;
-  /* Modal at top:0 so backdrop covers full screen including status bar */
-  top: 0 !important;
-  height: 100% !important;
-}
-
-/* Offset only the sheet content, not the backdrop */
-.ds-bottom-sheet::part(content) {
-  margin-top: var(--app-sheet-top-offset);
-}
-
-/* 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;
-}
-
-/* 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,169 +0,0 @@
-import { Injectable } from '@angular/core';
-import { ModalController } from '@ionic/angular/standalone';
-import { ComponentRef } from '@angular/core';
-import { disableModalShadowPointerEvents } from './modal-shadow-fix';
-
-/**
- * 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();
-    disableModalShadowPointerEvents(modal);
-    
-    // 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();
-  }
-}
-

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

@@ -1,211 +0,0 @@
-import { Component, Input, ContentChild, TemplateRef } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ModalController } from '@ionic/angular/standalone';
-import { DsButtonComponent } from '@propbinder/design-system';
-import { DsMobileBottomSheetWrapperComponent } from './ds-mobile-bottom-sheet-wrapper';
-import { DsMobileIllustrationComponent } from '../illustration/ds-mobile-illustration';
-
-/**
- * DsMobileConfirmationSheetComponent
- * 
- * Generic bottom sheet for displaying confirmation messages with optional summary content.
- * Highly flexible and reusable across different confirmation scenarios.
- * 
- * **Features:**
- * - Customizable title and message
- * - Optional illustration with variant selection
- * - Content projection for custom summary section
- * - Customizable button text and action
- * 
- * @example
- * ```typescript
- * // Simple confirmation
- * const sheet = await modalController.create({
- *   component: DsMobileConfirmationSheetComponent,
- *   componentProps: {
- *     title: 'Booking accepteret',
- *     message: 'Din booking er bekræftet.',
- *     buttonText: 'Luk',
- *     illustrationVariant: 'confirmation'
- *   },
- *   breakpoints: [0, 1],
- *   initialBreakpoint: 1,
- *   handle: true,
- *   cssClass: ['ds-bottom-sheet', 'auto-height']
- * });
- * await sheet.present();
- * ```
- * 
- * @example
- * ```html
- * <!-- With custom summary content -->
- * <ds-mobile-confirmation-sheet
- *   title="Post created"
- *   message="Your post has been published successfully."
- *   buttonText="Done">
- *   <div summary>
- *     <!-- Custom summary content here -->
- *   </div>
- * </ds-mobile-confirmation-sheet>
- * ```
- */
-@Component({
-  selector: 'ds-mobile-confirmation-sheet',
-  standalone: true,
-  imports: [
-    CommonModule,
-    DsMobileBottomSheetWrapperComponent,
-    DsMobileIllustrationComponent,
-    DsButtonComponent
-  ],
-  styles: [`
-    .confirmation-content {
-      padding: 48px 20px 24px 20px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 24px;
-    }
-
-    .success-icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-bottom: -32px;
-      z-index: 0;
-    }
-
-    .confirmation-text {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 8px;
-      z-index: 1;
-    }
-
-    .confirmation-title {
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-xl, 20px);
-      font-weight: 600;
-      color: var(--text-color-default-primary, #202227);
-      text-align: center;
-      margin: 0;
-    }
-
-    .confirmation-message {
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-sm, 14px);
-      font-weight: 400;
-      line-height: 1.6;
-      color: var(--text-color-default-secondary, #71727a);
-      text-align: center;
-      margin: 0;
-      max-width: 320px;
-    }
-
-    .summary-section {
-      width: 100%;
-    }
-
-    .button-container {
-      width: 100%;
-    }
-
-    .button-container ::ng-deep ds-button {
-      display: block;
-      width: 100%;
-    }
-
-    .button-container ::ng-deep ds-button button {
-      width: 100%;
-      border-radius: 100px;
-      height: 48px;
-    }
-  `],
-  template: `
-    <ds-mobile-bottom-sheet-wrapper>
-      <div class="confirmation-content">
-        <!-- Illustration -->
-        @if (showIllustration) {
-          <div class="success-icon">
-            <ds-mobile-illustration 
-              [variant]="illustrationVariant" 
-              [size]="illustrationSize" />
-          </div>
-        }
-
-        <!-- Title and Message -->
-        <div class="confirmation-text">
-          <h2 class="confirmation-title">{{ title }}</h2>
-          <p class="confirmation-message">{{ message }}</p>
-        </div>
-
-        <!-- Optional Summary Content (projected) -->
-        @if (summaryTemplate) {
-          <div class="summary-section">
-            <ng-container *ngTemplateOutlet="summaryTemplate"></ng-container>
-          </div>
-        }
-
-        <!-- Action Button -->
-        <div class="button-container">
-          <ds-button 
-            size="lg" 
-            variant="primary"
-            (clicked)="handleButtonClick()">
-            {{ buttonText }}
-          </ds-button>
-        </div>
-      </div>
-    </ds-mobile-bottom-sheet-wrapper>
-  `
-})
-export class DsMobileConfirmationSheetComponent {
-  /**
-   * Confirmation title
-   */
-  @Input({ required: true }) title!: string;
-
-  /**
-   * Confirmation message
-   */
-  @Input({ required: true }) message!: string;
-
-  /**
-   * Button text
-   * @default 'Luk'
-   */
-  @Input() buttonText: string = 'Luk';
-
-  /**
-   * Whether to show the illustration
-   * @default true
-   */
-  @Input() showIllustration: boolean = true;
-
-  /**
-   * Illustration variant
-   * @default 'confirmation'
-   */
-  @Input() illustrationVariant: 'post' | 'inquiry' | 'confirmation' = 'confirmation';
-
-  /**
-   * Illustration size
-   * @default '120px'
-   */
-  @Input() illustrationSize: string = '120px';
-
-  /**
-   * Optional summary content template
-   */
-  @ContentChild('summary', { read: TemplateRef }) summaryTemplate?: TemplateRef<any>;
-
-  constructor(private modalController: ModalController) {}
-
-  /**
-   * Handle button click - dismisses the sheet
-   */
-  async handleButtonClick(): Promise<void> {
-    await this.modalController.dismiss();
-  }
-}