@propbinder/mobile-design 0.2.48 → 0.2.50

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

@@ -0,0 +1,156 @@
+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

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

@@ -0,0 +1,169 @@
+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

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