valtech-components 2.0.691 → 2.0.692

package/src/lib/services/modal/modal.service.ts

@@ -1,244 +0,0 @@
-import { Injectable, Type } from '@angular/core';
-import { ModalController } from '@ionic/angular/standalone';
-import {
-  ModalMetadata,
-  SimpleModalMetadata,
-  ModalResult,
-  ModalButton,
-  MODAL_SIZES,
-  DEFAULT_MODAL_CONFIRM_BUTTON,
-  DEFAULT_MODAL_CANCEL_BUTTON,
-} from './types';
-import { SimpleModalContentComponent } from './simple-modal-content.component';
-
-/**
- * ModalService
- *
- * A service for creating and managing modals with various configurations.
- *
- * @example Basic component modal
- * ```typescript
- * const result = await modalService.open({
- *   component: MyFormComponent,
- *   componentProps: { userId: 123 },
- *   header: { title: 'Edit User', showCloseButton: true },
- *   size: 'medium'
- * });
- *
- * if (result.role === 'confirm') {
- *   console.log('Saved:', result.data);
- * }
- * ```
- *
- * @example Simple content modal
- * ```typescript
- * await modalService.openSimple({
- *   title: 'Terms of Service',
- *   content: '<p>Terms content here...</p>',
- *   size: 'large',
- *   showCloseButton: true
- * });
- * ```
- *
- * @example Sheet modal (mobile)
- * ```typescript
- * const result = await modalService.openSheet({
- *   component: FilterComponent,
- *   breakpoints: {
- *     initialBreakpoint: 0.5,
- *     breakpoints: [0, 0.5, 1],
- *     showHandle: true
- *   }
- * });
- * ```
- */
-@Injectable({
-  providedIn: 'root',
-})
-export class ModalService {
-  constructor(private modalController: ModalController) {}
-
-  /**
-   * Opens a modal with a component.
-   * @param options - Modal configuration
-   * @returns Promise resolving to the modal result
-   */
-  async open<T = any, R = any>(options: ModalMetadata<T>): Promise<ModalResult<R>> {
-    const size = MODAL_SIZES[options.size || 'medium'];
-    const cssClasses = this.buildCssClasses(options);
-
-    const modal = await this.modalController.create({
-      component: options.component,
-      componentProps: {
-        ...options.componentProps,
-        // Pass modal reference for dismiss from within component
-        _modalRef: {
-          dismiss: (data?: any, role?: string) => modal.dismiss(data, role),
-        },
-      },
-      id: options.id,
-      showBackdrop: options.showBackdrop ?? true,
-      backdropDismiss: options.backdropDismiss ?? true,
-      keyboardClose: options.keyboardClose ?? true,
-      cssClass: cssClasses,
-      mode: options.mode,
-      animated: options.animated ?? true,
-      canDismiss: this.normalizeCanDismiss(options.canDismiss ?? true),
-      presentingElement: options.presentingElement,
-      // Sheet modal options
-      initialBreakpoint: options.breakpoints?.initialBreakpoint,
-      breakpoints: options.breakpoints?.breakpoints,
-      handle: options.breakpoints?.showHandle,
-      handleBehavior: options.breakpoints?.handleBehavior,
-    });
-
-    // Apply custom size styles
-    if (options.width || options.height || size) {
-      const modalEl = modal as HTMLIonModalElement;
-      modalEl.style.setProperty('--width', options.width || size.width || 'auto');
-      modalEl.style.setProperty('--height', options.height || size.height || '50vh');
-    }
-
-    await modal.present();
-    const { data, role } = await modal.onDidDismiss();
-
-    return { data, role };
-  }
-
-  /**
-   * Opens a simple content modal without a custom component.
-   * Uses Ionic's alert-like styling but with modal capabilities.
-   * @param options - Simple modal configuration
-   * @returns Promise resolving to the modal result
-   */
-  async openSimple(options: SimpleModalMetadata): Promise<ModalResult> {
-    return this.open({
-      component: SimpleModalContentComponent,
-      componentProps: {
-        title: options.title,
-        content: options.content,
-        buttons: options.buttons || [DEFAULT_MODAL_CANCEL_BUTTON, DEFAULT_MODAL_CONFIRM_BUTTON],
-        showCloseButton: options.showCloseButton ?? true,
-      },
-      size: options.size || 'medium',
-      backdropDismiss: options.backdropDismiss ?? true,
-      cssClass: ['simple-modal', options.cssClass].filter(Boolean).join(' '),
-    });
-  }
-
-  /**
-   * Opens a confirmation modal.
-   * @param title - Modal title
-   * @param message - Modal message
-   * @param confirmButton - Confirm button config (optional)
-   * @param cancelButton - Cancel button config (optional)
-   * @returns Promise resolving to true if confirmed
-   */
-  async confirm(
-    title: string,
-    message: string,
-    confirmButton?: Partial<ModalButton>,
-    cancelButton?: Partial<ModalButton>
-  ): Promise<boolean> {
-    const result = await this.openSimple({
-      title,
-      content: message,
-      size: 'small',
-      showCloseButton: false,
-      backdropDismiss: false,
-      buttons: [
-        { ...DEFAULT_MODAL_CANCEL_BUTTON, ...cancelButton },
-        { ...DEFAULT_MODAL_CONFIRM_BUTTON, ...confirmButton },
-      ],
-    });
-
-    return result.role === 'confirm';
-  }
-
-  /**
-   * Opens a sheet modal (iOS-style bottom sheet).
-   * @param options - Modal configuration with sheet-specific options
-   * @returns Promise resolving to the modal result
-   */
-  async openSheet<T = any, R = any>(
-    options: Omit<ModalMetadata<T>, 'breakpoints'> & {
-      initialBreakpoint?: number;
-      breakpoints?: number[];
-      showHandle?: boolean;
-    }
-  ): Promise<ModalResult<R>> {
-    return this.open({
-      ...options,
-      breakpoints: {
-        initialBreakpoint: options.initialBreakpoint ?? 0.5,
-        breakpoints: options.breakpoints ?? [0, 0.5, 1],
-        showHandle: options.showHandle ?? true,
-      },
-      cssClass: ['sheet-modal', options.cssClass].filter(Boolean).join(' '),
-    });
-  }
-
-  /**
-   * Opens a fullscreen modal.
-   * @param options - Modal configuration
-   * @returns Promise resolving to the modal result
-   */
-  async openFullscreen<T = any, R = any>(options: ModalMetadata<T>): Promise<ModalResult<R>> {
-    return this.open({
-      ...options,
-      size: 'full',
-      cssClass: ['fullscreen-modal', options.cssClass].filter(Boolean).join(' '),
-    });
-  }
-
-  /**
-   * Dismisses the top-most modal.
-   * @param data - Optional data to return
-   * @param role - Optional role
-   */
-  async dismiss(data?: any, role?: string): Promise<boolean> {
-    return this.modalController.dismiss(data, role);
-  }
-
-  /**
-   * Gets the top-most modal.
-   */
-  async getTop(): Promise<HTMLIonModalElement | undefined> {
-    return this.modalController.getTop();
-  }
-
-  private normalizeCanDismiss(
-    canDismiss: boolean | (() => boolean | Promise<boolean>)
-  ): boolean | ((data?: any, role?: string) => Promise<boolean>) {
-    if (typeof canDismiss === 'boolean') {
-      return canDismiss;
-    }
-    // Wrap the function to ensure it returns a Promise
-    return async (data?: any, role?: string) => {
-      const result = canDismiss();
-      return Promise.resolve(result);
-    };
-  }
-
-  private buildCssClasses(options: ModalMetadata): string {
-    const classes: string[] = ['val-modal'];
-
-    if (options.size) {
-      classes.push(`modal-${options.size}`);
-    }
-
-    if (options.header) {
-      classes.push('modal-with-header');
-    }
-
-    if (options.footer) {
-      classes.push('modal-with-footer');
-    }
-
-    if (options.cssClass) {
-      classes.push(options.cssClass);
-    }
-
-    return classes.join(' ');
-  }
-}

package/src/lib/services/modal/simple-modal-content.component.ts

@@ -1,138 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonButtons, IonButton, IonIcon, IonContent, IonFooter, IonSpinner } from '@ionic/angular/standalone';
-import { addIcons } from 'ionicons';
-import { closeOutline } from 'ionicons/icons';
-import { ModalButton } from './types';
-
-addIcons({ closeOutline });
-
-/**
- * Internal component for simple content modals.
- * Used by ModalService.openSimple()
- */
-@Component({
-  selector: 'val-simple-modal-content',
-  standalone: true,
-  imports: [CommonModule, IonHeader, IonToolbar, IonTitle, IonButtons, IonButton, IonIcon, IonContent, IonFooter, IonSpinner],
-  template: `
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>{{ title }}</ion-title>
-        @if (showCloseButton) {
-          <ion-buttons slot="end">
-            <ion-button (click)="onDismiss('close')">
-              <ion-icon slot="icon-only" name="close-outline"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-        }
-      </ion-toolbar>
-    </ion-header>
-
-    <ion-content class="ion-padding">
-      <div [innerHTML]="content"></div>
-    </ion-content>
-
-    @if (buttons && buttons.length > 0) {
-      <ion-footer>
-        <ion-toolbar>
-          <div class="button-container">
-            @for (button of buttons; track button.text) {
-              <ion-button
-                [color]="button.color || 'medium'"
-                [fill]="button.fill || 'solid'"
-                [size]="button.size || 'default'"
-                [disabled]="button.disabled || button.loading"
-                [class]="button.cssClass"
-                (click)="onButtonClick(button)"
-              >
-                @if (button.loading) {
-                  <ion-spinner name="crescent"></ion-spinner>
-                } @else {
-                  {{ button.text }}
-                }
-              </ion-button>
-            }
-          </div>
-        </ion-toolbar>
-      </ion-footer>
-    }
-  `,
-  styles: [`
-    :host {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      min-height: 0;
-    }
-
-    ion-header {
-      flex-shrink: 0;
-    }
-
-    ion-content {
-      flex: 1 1 auto;
-      min-height: 0;
-      --padding-top: 16px;
-      --padding-bottom: 16px;
-      --padding-start: 16px;
-      --padding-end: 16px;
-    }
-
-    ion-footer {
-      flex-shrink: 0;
-    }
-
-    .button-container {
-      display: flex;
-      justify-content: flex-end;
-      gap: 8px;
-      padding: 8px 0;
-    }
-
-    ion-footer ion-toolbar {
-      --padding-start: 16px;
-      --padding-end: 16px;
-    }
-
-    /* List styling for innerHTML content */
-    :host ::ng-deep ul,
-    :host ::ng-deep ol {
-      padding-left: 20px;
-      margin: 8px 0;
-    }
-
-    :host ::ng-deep li {
-      margin: 4px 0;
-    }
-
-    :host ::ng-deep p {
-      margin: 8px 0;
-    }
-  `],
-})
-export class SimpleModalContentComponent {
-  @Input() title: string = '';
-  @Input() content: string = '';
-  @Input() buttons: ModalButton[] = [];
-  @Input() showCloseButton: boolean = true;
-
-  // Injected by ModalService
-  @Input() _modalRef: { dismiss: (data?: any, role?: string) => Promise<boolean> };
-
-  async onButtonClick(button: ModalButton): Promise<void> {
-    if (button.handler) {
-      const result = await button.handler();
-      // If handler returns false, don't dismiss
-      if (result === false) {
-        return;
-      }
-    }
-
-    this._modalRef?.dismiss(undefined, button.role || 'confirm');
-  }
-
-  onDismiss(role: string): void {
-    this._modalRef?.dismiss(undefined, role);
-  }
-}

package/src/lib/services/modal/types.ts

@@ -1,180 +0,0 @@
-import { Type } from '@angular/core';
-import { Color } from '@ionic/core';
-import { ButtonMetadata } from '../../components/types';
-
-/**
- * Modal size preset.
- */
-export type ModalSize = 'small' | 'medium' | 'large' | 'full' | 'auto';
-
-/**
- * Modal breakpoint configuration for sheet modals.
- */
-export interface ModalBreakpoint {
-  /** Initial breakpoint (0-1) */
-  initialBreakpoint?: number;
-  /** Available breakpoints */
-  breakpoints?: number[];
-  /** Can dismiss by dragging below threshold */
-  canDismiss?: boolean | (() => boolean | Promise<boolean>);
-  /** Handle element */
-  handleBehavior?: 'cycle' | 'none';
-  /** Show handle */
-  showHandle?: boolean;
-}
-
-/**
- * Modal header configuration.
- */
-export interface ModalHeader {
-  /** Title text */
-  title?: string;
-  /** Subtitle text */
-  subtitle?: string;
-  /** Show close button */
-  showCloseButton?: boolean;
-  /** Close button icon */
-  closeIcon?: string;
-  /** Header color */
-  color?: Color;
-  /** Custom CSS class */
-  cssClass?: string;
-}
-
-/**
- * Modal footer configuration.
- */
-export interface ModalFooter {
-  /** Footer buttons */
-  buttons?: ModalButton[];
-  /** Footer alignment */
-  alignment?: 'start' | 'center' | 'end' | 'space-between';
-  /** Custom CSS class */
-  cssClass?: string;
-}
-
-/**
- * Modal button configuration.
- */
-export interface ModalButton {
-  /** Button text */
-  text: string;
-  /** Button role */
-  role?: 'cancel' | 'confirm' | 'destructive' | string;
-  /** Button color */
-  color?: Color;
-  /** Button fill */
-  fill?: 'clear' | 'outline' | 'solid';
-  /** Button size */
-  size?: 'small' | 'default' | 'large';
-  /** Custom CSS class */
-  cssClass?: string;
-  /** Disabled state */
-  disabled?: boolean;
-  /** Loading state */
-  loading?: boolean;
-  /** Handler function */
-  handler?: (data?: any) => void | boolean | Promise<void | boolean>;
-}
-
-/**
- * Metadata for creating a modal with a component.
- */
-export interface ModalMetadata<T = any> {
-  /** Component to render in modal */
-  component: Type<T>;
-  /** Component inputs/props */
-  componentProps?: Partial<T>;
-  /** Unique identifier */
-  id?: string;
-  /** Modal header configuration */
-  header?: ModalHeader;
-  /** Modal footer configuration */
-  footer?: ModalFooter;
-  /** Modal size */
-  size?: ModalSize;
-  /** Custom width (overrides size) */
-  width?: string;
-  /** Custom height (overrides size) */
-  height?: string;
-  /** Show backdrop */
-  showBackdrop?: boolean;
-  /** Backdrop dismiss */
-  backdropDismiss?: boolean;
-  /** Enable keyboard close (ESC) */
-  keyboardClose?: boolean;
-  /** CSS class for modal */
-  cssClass?: string;
-  /** Animation mode */
-  mode?: 'ios' | 'md';
-  /** Enter animation */
-  enterAnimation?: any;
-  /** Leave animation */
-  leaveAnimation?: any;
-  /** Sheet modal breakpoints */
-  breakpoints?: ModalBreakpoint;
-  /** Presenting element for card modal */
-  presentingElement?: HTMLElement;
-  /** Can dismiss callback */
-  canDismiss?: boolean | (() => boolean | Promise<boolean>);
-  /** Animated */
-  animated?: boolean;
-}
-
-/**
- * Metadata for creating a simple content modal.
- */
-export interface SimpleModalMetadata {
-  /** Modal title */
-  title: string;
-  /** Modal content (HTML or plain text) */
-  content: string;
-  /** Modal size */
-  size?: ModalSize;
-  /** Footer buttons */
-  buttons?: ModalButton[];
-  /** Show close button in header */
-  showCloseButton?: boolean;
-  /** Backdrop dismiss */
-  backdropDismiss?: boolean;
-  /** CSS class */
-  cssClass?: string;
-}
-
-/**
- * Result from modal dismissal.
- */
-export interface ModalResult<T = any> {
-  /** Role of the dismissal (button role or 'backdrop') */
-  role?: string;
-  /** Data returned from modal */
-  data?: T;
-}
-
-/**
- * Default modal sizes.
- */
-export const MODAL_SIZES: Record<ModalSize, { width?: string; height?: string }> = {
-  small: { width: '320px', height: '220px' },
-  medium: { width: '500px', height: '400px' },
-  large: { width: '800px', height: '80vh' },
-  full: { width: '100%', height: '100%' },
-  auto: { width: 'auto', height: '50vh' },
-};
-
-/**
- * Default modal buttons.
- */
-export const DEFAULT_MODAL_CONFIRM_BUTTON: ModalButton = {
-  text: 'Confirm',
-  role: 'confirm',
-  color: 'primary',
-  fill: 'solid',
-};
-
-export const DEFAULT_MODAL_CANCEL_BUTTON: ModalButton = {
-  text: 'Cancel',
-  role: 'cancel',
-  color: 'medium',
-  fill: 'clear',
-};