@propbinder/mobile-design 0.0.1 → 0.0.2

package/src/components/logo/ds-logo.ts

@@ -0,0 +1,85 @@
+import { Component, Input, computed, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { WhitelabelService } from '../../services/whitelabel.service';
+
+export type LogoVariant = 'full' | 'mark';
+export type LogoSize = 'sm' | 'md' | 'lg' | 'xl';
+
+/**
+ * DsLogoComponent
+ * 
+ * Displays the whitelabeled logo or logomark based on current configuration.
+ * Automatically pulls logo assets from WhitelabelService.
+ * 
+ * @example
+ * Full logo in header:
+ * ```html
+ * <ds-logo variant="full" size="md" />
+ * ```
+ * 
+ * Logomark for compact spaces:
+ * ```html
+ * <ds-logo variant="mark" size="sm" />
+ * ```
+ */
+@Component({
+  selector: 'ds-logo',
+  standalone: true,
+  imports: [CommonModule],
+  styles: [`
+    :host {
+      display: inline-block;
+      line-height: 0;
+    }
+    
+    .logo {
+      display: block;
+      object-fit: contain;
+    }
+    
+    /* Size variants for full logo */
+    .logo--full.logo--sm { height: 24px; width: auto; }
+    .logo--full.logo--md { height: 32px; width: auto; }
+    .logo--full.logo--lg { height: 40px; width: auto; }
+    .logo--full.logo--xl { height: 48px; width: auto; }
+    
+    /* Size variants for logomark */
+    .logo--mark.logo--sm { height: 20px; width: 20px; }
+    .logo--mark.logo--md { height: 28px; width: 28px; }
+    .logo--mark.logo--lg { height: 36px; width: 36px; }
+    .logo--mark.logo--xl { height: 44px; width: 44px; }
+  `],
+  template: `
+    <img 
+      [src]="logoSrc()"
+      [alt]="logoAlt()"
+      [class]="logoClasses()"
+      [style.height.px]="customHeight"
+      [style.width.px]="customWidth"
+    />
+  `
+})
+export class DsLogoComponent {
+  private whitelabelService = inject(WhitelabelService);
+  
+  @Input() variant: LogoVariant = 'full';
+  @Input() size: LogoSize = 'md';
+  @Input() customHeight?: number;
+  @Input() customWidth?: number;
+  
+  logoSrc = computed(() => {
+    return this.variant === 'full' 
+      ? this.whitelabelService.logoUrl()
+      : this.whitelabelService.logoMarkUrl();
+  });
+  
+  logoAlt = computed(() => {
+    const alt = this.whitelabelService.logoAlt();
+    return this.variant === 'full' ? alt : `${alt} logo`;
+  });
+  
+  logoClasses = computed(() => {
+    return `logo logo--${this.variant} logo--${this.size}`;
+  });
+}
+

package/src/components/logo/index.ts

@@ -0,0 +1,2 @@
+export * from './ds-logo';
+

package/src/components/modal/ds-mobile-modal.css

@@ -0,0 +1,163 @@
+/**
+ * Mobile Modal Styles
+ * 
+ * Global styles for modals opened via DsMobileModalService.
+ * These styles are applied to all modals and handle different presentation styles.
+ */
+
+/* Base modal styles */
+.ds-mobile-modal {
+  --background: var(--color-background-neutral-primary, #ffffff);
+  --border-radius: 16px;
+  --box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+  --max-width: 640px;
+  --width: 100%;
+}
+
+.ds-mobile-modal::part(content) {
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+/* Fullscreen presentation */
+.ds-modal-fullscreen {
+  --width: 100%;
+  --height: 100%;
+  --border-radius: 0;
+}
+
+.ds-modal-fullscreen::part(content) {
+  border-radius: 0;
+}
+
+/* Card presentation (default iOS modal style) */
+.ds-modal-card {
+  --width: 100%;
+  --max-width: 640px;
+  --height: auto;
+  --max-height: 90%;
+  --border-radius: 16px 16px 0 0;
+}
+
+.ds-modal-card::part(content) {
+  border-radius: 16px 16px 0 0;
+  box-shadow: var(--box-shadow);
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+/* Sheet presentation (bottom sheet with breakpoints) */
+.ds-modal-sheet {
+  --width: 100%;
+  --max-width: 640px;
+  --height: auto;
+  --border-radius: 16px 16px 0 0;
+}
+
+.ds-modal-sheet::part(content) {
+  border-radius: 16px 16px 0 0;
+  box-shadow: var(--box-shadow);
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+.ds-modal-sheet::part(handle) {
+  background: var(--border-color-default);
+  width: 36px;
+  height: 4px;
+  border-radius: 2px;
+  margin: 8px auto 0;
+}
+
+/* Backdrop styles */
+.ds-mobile-modal::part(backdrop) {
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
+}
+
+/* Animations */
+.ds-mobile-modal.modal-card-enter-active,
+.ds-mobile-modal.modal-sheet-enter-active {
+  animation: slideUp 0.3s ease-out;
+}
+
+.ds-mobile-modal.modal-card-leave-active,
+.ds-mobile-modal.modal-sheet-leave-active {
+  animation: slideDown 0.3s ease-in;
+}
+
+.ds-mobile-modal.modal-fullscreen-enter-active {
+  animation: fadeIn 0.2s ease-out;
+}
+
+.ds-mobile-modal.modal-fullscreen-leave-active {
+  animation: fadeOut 0.2s ease-in;
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideDown {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* Safe area handling for notched devices */
+@supports (padding: env(safe-area-inset-top)) {
+  .ds-modal-fullscreen::part(content) {
+    padding-top: env(safe-area-inset-top);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}
+
+/* Dark mode support (if needed) */
+@media (prefers-color-scheme: dark) {
+  .ds-mobile-modal {
+    --background: var(--color-background-neutral-primary-dark, #1a1a1a);
+  }
+  
+  .ds-mobile-modal::part(backdrop) {
+    background: rgba(0, 0, 0, 0.6);
+  }
+}
+
+/* Accessibility: Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .ds-mobile-modal.modal-card-enter-active,
+  .ds-mobile-modal.modal-card-leave-active,
+  .ds-mobile-modal.modal-sheet-enter-active,
+  .ds-mobile-modal.modal-sheet-leave-active,
+  .ds-mobile-modal.modal-fullscreen-enter-active,
+  .ds-mobile-modal.modal-fullscreen-leave-active {
+    animation: none;
+  }
+}
+

package/src/components/modal/ds-mobile-modal.service.ts

@@ -0,0 +1,329 @@
+import { Injectable, Type } from '@angular/core';
+import { ModalController } from '@ionic/angular/standalone';
+
+/**
+ * Configuration options for modal presentation
+ */
+export interface ModalOptions<T = any> {
+  /** The component to display in the modal */
+  component: Type<T>;
+  /** Props to pass to the component */
+  componentProps?: Record<string, any>;
+  /** CSS class(es) to apply to the modal */
+  cssClass?: string | string[];
+  /** Modal presentation style */
+  presentationStyle?: 'fullscreen' | 'card' | 'sheet';
+  /** Enable backdrop dismiss (tap outside to close) */
+  backdropDismiss?: boolean;
+  /** Show backdrop */
+  showBackdrop?: boolean;
+  /** Enable keyboard close (ESC key) */
+  keyboardClose?: boolean;
+  /** Enable swipe to close */
+  swipeToClose?: boolean;
+  /** Initial breakpoint (0-1) for sheet presentation */
+  initialBreakpoint?: number;
+  /** Available breakpoints for sheet presentation */
+  breakpoints?: number[];
+  /** Animation type */
+  animated?: boolean;
+  /** Mode (ios or md) */
+  mode?: 'ios' | 'md';
+  /** Whether to handle navigation back button */
+  handleNavigationBack?: boolean;
+}
+
+/**
+ * DsMobileModalService
+ * 
+ * Generic service for displaying any component as a modal.
+ * Built on Ionic's modal system with customizable presentation styles.
+ * 
+ * Features:
+ * - Open any component as a modal
+ * - Fullscreen, card, or sheet presentation styles
+ * - Customizable backdrop and dismissal behavior
+ * - Native gestures and animations
+ * - Type-safe component props
+ * 
+ * @example
+ * ```typescript
+ * import { MobilePostDetailPageComponent } from './post-detail.page';
+ * 
+ * constructor(private modal: DsMobileModalService) {}
+ * 
+ * async openPostModal() {
+ *   await this.modal.open({
+ *     component: MobilePostDetailPageComponent,
+ *     componentProps: {
+ *       postId: '123',
+ *       authorName: 'John Doe'
+ *     },
+ *     presentationStyle: 'card',
+ *     backdropDismiss: true
+ *   });
+ * }
+ * ```
+ * 
+ * @example Sheet presentation with breakpoints
+ * ```typescript
+ * async openSheet() {
+ *   await this.modal.open({
+ *     component: CommentsComponent,
+ *     presentationStyle: 'sheet',
+ *     initialBreakpoint: 0.5,
+ *     breakpoints: [0, 0.5, 0.75, 1],
+ *     swipeToClose: true
+ *   });
+ * }
+ * ```
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class DsMobileModalService {
+  constructor(private modalController: ModalController) {}
+
+  /**
+   * Open a component as a modal
+   * 
+   * @param options Configuration options for the modal
+   * @returns Promise that resolves when the modal is presented
+   * 
+   * @example
+   * ```typescript
+   * await this.modal.open({
+   *   component: MyComponent,
+   *   componentProps: { data: 'value' },
+   *   presentationStyle: 'fullscreen'
+   * });
+   * ```
+   */
+  async open<T = any>(options: ModalOptions<T>): Promise<HTMLIonModalElement> {
+    console.log('[Modal] Opening modal with options:', options);
+    
+    const {
+      component,
+      componentProps,
+      cssClass,
+      presentationStyle = 'card',
+      backdropDismiss = true,
+      showBackdrop = true,
+      keyboardClose = true,
+      swipeToClose,
+      initialBreakpoint,
+      breakpoints,
+      animated = true,
+      mode = 'ios',
+      handleNavigationBack = true
+    } = options;
+
+    // Build modal configuration
+    const modalConfig: any = {
+      component,
+      componentProps: componentProps || {},
+      cssClass: this.buildCssClasses(cssClass, presentationStyle),
+      mode,
+      backdropDismiss,
+      showBackdrop,
+      animated,
+      keyboardClose,
+      presentingElement: document.querySelector('ion-router-outlet') || undefined,
+      handle: presentationStyle === 'sheet', // Show handle for sheet presentation
+    };
+
+    // Add swipe to close for sheet presentation
+    if (swipeToClose !== undefined) {
+      modalConfig.canDismiss = swipeToClose;
+    }
+
+    // Add breakpoints for sheet presentation
+    if (presentationStyle === 'sheet' && breakpoints) {
+      modalConfig.breakpoints = breakpoints;
+      if (initialBreakpoint !== undefined) {
+        modalConfig.initialBreakpoint = initialBreakpoint;
+      }
+    }
+
+    // Handle navigation back button
+    if (handleNavigationBack) {
+      modalConfig.canDismiss = async () => {
+        // You can add custom logic here if needed
+        return true;
+      };
+    }
+
+    const modal = await this.modalController.create(modalConfig);
+
+    console.log('[Modal] Modal created, presenting...');
+    await modal.present();
+    console.log('[Modal] Modal presented');
+
+    return modal;
+  }
+
+  /**
+   * Open a component as a fullscreen modal
+   * 
+   * @param component Component to display
+   * @param componentProps Props to pass to the component
+   * @returns Promise that resolves when the modal is presented
+   * 
+   * @example
+   * ```typescript
+   * await this.modal.openFullscreen(PostDetailPage, { postId: '123' });
+   * ```
+   */
+  async openFullscreen<T = any>(
+    component: Type<T>,
+    componentProps?: Record<string, any>
+  ): Promise<HTMLIonModalElement> {
+    return this.open({
+      component,
+      componentProps,
+      presentationStyle: 'fullscreen',
+      backdropDismiss: false,
+      showBackdrop: false
+    });
+  }
+
+  /**
+   * Open a component as a card modal
+   * 
+   * @param component Component to display
+   * @param componentProps Props to pass to the component
+   * @returns Promise that resolves when the modal is presented
+   * 
+   * @example
+   * ```typescript
+   * await this.modal.openCard(DetailComponent, { itemId: '456' });
+   * ```
+   */
+  async openCard<T = any>(
+    component: Type<T>,
+    componentProps?: Record<string, any>
+  ): Promise<HTMLIonModalElement> {
+    return this.open({
+      component,
+      componentProps,
+      presentationStyle: 'card',
+      backdropDismiss: true,
+      showBackdrop: true
+    });
+  }
+
+  /**
+   * Open a component as a bottom sheet
+   * 
+   * @param component Component to display
+   * @param componentProps Props to pass to the component
+   * @param options Additional sheet options (breakpoints, etc.)
+   * @returns Promise that resolves when the modal is presented
+   * 
+   * @example
+   * ```typescript
+   * await this.modal.openSheet(
+   *   CommentsComponent,
+   *   { postId: '789' },
+   *   { initialBreakpoint: 0.5, breakpoints: [0, 0.5, 1] }
+   * );
+   * ```
+   */
+  async openSheet<T = any>(
+    component: Type<T>,
+    componentProps?: Record<string, any>,
+    options?: {
+      initialBreakpoint?: number;
+      breakpoints?: number[];
+      swipeToClose?: boolean;
+    }
+  ): Promise<HTMLIonModalElement> {
+    return this.open({
+      component,
+      componentProps,
+      presentationStyle: 'sheet',
+      backdropDismiss: true,
+      showBackdrop: true,
+      swipeToClose: options?.swipeToClose ?? true,
+      initialBreakpoint: options?.initialBreakpoint ?? 0.5,
+      breakpoints: options?.breakpoints ?? [0, 0.5, 0.75, 1]
+    });
+  }
+
+  /**
+   * Close the currently open modal
+   * 
+   * @param data Optional data to pass back when dismissing
+   * @param role Optional role (e.g., 'cancel', 'confirm')
+   * @returns Promise that resolves when the modal is dismissed
+   * 
+   * @example
+   * ```typescript
+   * await this.modal.dismiss({ saved: true }, 'confirm');
+   * ```
+   */
+  async dismiss(data?: any, role?: string): Promise<boolean> {
+    return this.modalController.dismiss(data, role);
+  }
+
+  /**
+   * Get the top-most modal if one exists
+   * 
+   * @returns Promise that resolves to the modal element or undefined
+   * 
+   * @example
+   * ```typescript
+   * const topModal = await this.modal.getTop();
+   * if (topModal) {
+   *   await topModal.dismiss();
+   * }
+   * ```
+   */
+  async getTop(): Promise<HTMLIonModalElement | undefined> {
+    return this.modalController.getTop();
+  }
+
+  /**
+   * Get all currently open modals
+   * 
+   * @returns Promise that resolves to an array of modal elements
+   */
+  async getAll(): Promise<HTMLIonModalElement[]> {
+    const modals: HTMLIonModalElement[] = [];
+    let modal = await this.modalController.getTop();
+    
+    while (modal) {
+      modals.push(modal);
+      // Get the next modal in the stack
+      await modal.dismiss();
+      modal = await this.modalController.getTop();
+    }
+    
+    return modals;
+  }
+
+  /**
+   * Build CSS classes for the modal
+   */
+  private buildCssClasses(
+    customClass?: string | string[],
+    presentationStyle?: string
+  ): string[] {
+    const classes: string[] = ['ds-mobile-modal'];
+    
+    if (presentationStyle) {
+      classes.push(`ds-modal-${presentationStyle}`);
+    }
+    
+    if (customClass) {
+      if (Array.isArray(customClass)) {
+        classes.push(...customClass);
+      } else {
+        classes.push(customClass);
+      }
+    }
+    
+    return classes;
+  }
+}
+

package/src/components/modal/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Mobile Modal Module
+ * 
+ * Generic service for opening any component as a modal
+ */
+
+export * from './ds-mobile-modal.service';
+