@propbinder/mobile-design 0.0.2 → 0.0.21

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

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

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

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

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

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

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