valtech-components 2.0.794 → 2.0.795

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

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

@@ -0,0 +1,180 @@
+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',
+};

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

@@ -0,0 +1,255 @@
+import { Location } from '@angular/common';
+import { Injectable, computed, inject, signal } from '@angular/core';
+import { NavigationExtras, Router } from '@angular/router';
+import { InAppBrowserService } from '../in-app-browser.service';
+import { I18nService } from '../i18n/i18n.service';
+import {
+  HeaderConfig,
+  BackHeaderConfig,
+  HomeHeaderConfig,
+  CustomHeaderConfig,
+  DEFAULT_HOME_HEADER,
+} from './types';
+import { ToolbarAction } from '../../components/types';
+
+/**
+ * NavigationService
+ *
+ * Servicio centralizado para navegacion y configuracion de headers.
+ * Permite a las paginas declarar su tipo de header de forma simple.
+ *
+ * @example
+ * // En una pagina con header de tipo "back"
+ * export class ProfilePage {
+ *   private nav = inject(NavigationService);
+ *
+ *   constructor() {
+ *     this.nav.setBackHeader('pageTitle', 'Settings.Profile');
+ *   }
+ * }
+ *
+ * @example
+ * // En el layout principal (tabs.page.ts)
+ * export class TabsPage {
+ *   private nav = inject(NavigationService);
+ *
+ *   headerConfig = this.nav.headerConfig;
+ *   headerTitle = this.nav.headerTitle;
+ * }
+ */
+@Injectable({
+  providedIn: 'root',
+})
+export class NavigationService {
+  private i18n = inject(I18nService);
+
+  // ============================================
+  // Header State (Signals)
+  // ============================================
+
+  private readonly _headerConfig = signal<HeaderConfig>(DEFAULT_HOME_HEADER);
+
+  /**
+   * Configuracion actual del header (readonly signal)
+   */
+  readonly headerConfig = this._headerConfig.asReadonly();
+
+  /**
+   * Titulo del header traducido y reactivo al cambio de idioma.
+   * Solo aplica para headers tipo 'back' o 'custom' con titleKey.
+   */
+  readonly headerTitle = computed(() => {
+    const config = this._headerConfig();
+    this.i18n.lang(); // Dependencia reactiva al idioma
+
+    if (config.type === 'back' && config.titleKey) {
+      return this.translateKey(config.titleKey);
+    }
+
+    if (config.type === 'custom') {
+      if (config.titleKey) {
+        return this.translateKey(config.titleKey);
+      }
+      return config.title || '';
+    }
+
+    return '';
+  });
+
+  /**
+   * Indica si el header actual tiene boton volver
+   */
+  readonly hasBackButton = computed(() => {
+    const config = this._headerConfig();
+    return config.type === 'back' || (config.type === 'custom' && config.withBack);
+  });
+
+  // ============================================
+  // Legacy Properties (Navigation)
+  // ============================================
+
+  /**
+   * Arbitrary data to be transferred during navigation.
+   * @deprecated Use navigateWithData instead
+   */
+  data: any;
+
+  constructor(
+    public router: Router,
+    public location: Location,
+    public inAppBrowser: InAppBrowserService
+  ) {}
+
+  // ============================================
+  // Header Configuration Methods
+  // ============================================
+
+  /**
+   * Configura un header tipo "back" con titulo traducido.
+   *
+   * @param key Clave i18n (ej: 'pageTitle')
+   * @param namespace Namespace i18n (ej: 'Settings.Profile')
+   * @param options Opciones adicionales (backText, withMenu)
+   *
+   * @example
+   * // Sin menu
+   * this.nav.setBackHeader('pageTitle', 'Settings.Profile');
+   *
+   * @example
+   * // Con menu hamburguesa
+   * this.nav.setBackHeader('pageTitle', 'Settings.Profile', { withMenu: true });
+   */
+  setBackHeader(
+    key: string,
+    namespace: string,
+    options?: { backText?: string; withMenu?: boolean }
+  ): void {
+    const config: BackHeaderConfig = {
+      type: 'back',
+      titleKey: `${namespace}.${key}`,
+      backText: options?.backText,
+      withMenu: options?.withMenu,
+    };
+    this._headerConfig.set(config);
+  }
+
+  /**
+   * Configura un header tipo "home" con logo y acciones.
+   *
+   * @param options Opciones del header home
+   *
+   * @example
+   * this.nav.setHomeHeader({
+   *   withMenu: true,
+   *   actions: [
+   *     { type: 'ICON', token: 'notifications', position: 'right', description: 'notifications-outline' }
+   *   ]
+   * });
+   */
+  setHomeHeader(options: Partial<Omit<HomeHeaderConfig, 'type'>> = {}): void {
+    const config: HomeHeaderConfig = {
+      type: 'home',
+      withMenu: options.withMenu ?? false,
+      actions: options.actions ?? [],
+      logoSrc: options.logoSrc,
+    };
+    this._headerConfig.set(config);
+  }
+
+  /**
+   * Configura un header personalizado.
+   *
+   * @param options Opciones del header
+   */
+  setCustomHeader(options: Omit<CustomHeaderConfig, 'type'>): void {
+    const config: CustomHeaderConfig = {
+      type: 'custom',
+      ...options,
+    };
+    this._headerConfig.set(config);
+  }
+
+  /**
+   * Oculta el header completamente.
+   */
+  hideHeader(): void {
+    this._headerConfig.set({ type: 'none' });
+  }
+
+  /**
+   * Resetea el header al estado por defecto (home).
+   */
+  resetHeader(): void {
+    this._headerConfig.set(DEFAULT_HOME_HEADER);
+  }
+
+  // ============================================
+  // Navigation Methods
+  // ============================================
+
+  /**
+   * Opens a URL using the in-app browser service.
+   * @param url The URL to open
+   */
+  navigateInApp(url: string): void {
+    this.inAppBrowser.openWithInAppBrowser(url);
+  }
+
+  /**
+   * Navigates to a route and transfers data using Angular Router state.
+   * @param route The route to navigate to
+   * @param dataTransfer The data to transfer
+   */
+  navigateWithData(route: string, dataTransfer: any): void {
+    const navigationExtras: NavigationExtras = {
+      state: {
+        data: dataTransfer,
+      },
+    };
+
+    this.router.navigate([route], navigationExtras);
+  }
+
+  /**
+   * Navigates to a URL using Angular Router.
+   * @param url The URL to navigate to
+   */
+  navigateByUrl(url: string): void {
+    this.router
+      .navigateByUrl(url)
+      .then(() => {})
+      .catch(() => {});
+  }
+
+  /**
+   * Opens a URL in a new browser tab.
+   * @param url The URL to open
+   */
+  openInNewTab(url: string): void {
+    window.open(url, '_blank', 'noopener,noreferrer');
+  }
+
+  /**
+   * Navigates back to the previous page in the browser history.
+   */
+  back(): void {
+    this.location.back();
+  }
+
+  // ============================================
+  // Private Helpers
+  // ============================================
+
+  /**
+   * Traduce una clave i18n en formato 'namespace.key'
+   */
+  private translateKey(fullKey: string): string {
+    const lastDot = fullKey.lastIndexOf('.');
+    if (lastDot === -1) {
+      return this.i18n.t(fullKey);
+    }
+    const namespace = fullKey.substring(0, lastDot);
+    const key = fullKey.substring(lastDot + 1);
+    return this.i18n.t(key, namespace);
+  }
+}

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

@@ -0,0 +1,86 @@
+import { ToolbarAction } from '../../components/types';
+
+/**
+ * Tipos de header soportados por NavigationService
+ */
+export type HeaderType = 'home' | 'back' | 'custom' | 'none';
+
+/**
+ * Configuracion de header para paginas con boton volver
+ */
+export interface BackHeaderConfig {
+  type: 'back';
+  /** Clave i18n para el titulo (formato: 'namespace.key') */
+  titleKey: string;
+  /** Texto del boton volver (opcional, usa icono por defecto) */
+  backText?: string;
+  /** Mostrar menu hamburguesa (opcional, false por defecto) */
+  withMenu?: boolean;
+}
+
+/**
+ * Configuracion de header para pagina principal (home)
+ */
+export interface HomeHeaderConfig {
+  type: 'home';
+  /** Mostrar menu hamburguesa */
+  withMenu?: boolean;
+  /** Acciones adicionales en el header */
+  actions?: ToolbarAction[];
+  /** Logo personalizado (CSS variable o URL) */
+  logoSrc?: string;
+}
+
+/**
+ * Configuracion de header personalizado
+ */
+export interface CustomHeaderConfig {
+  type: 'custom';
+  /** Titulo del header */
+  title?: string;
+  /** Clave i18n para el titulo */
+  titleKey?: string;
+  /** Mostrar boton volver */
+  withBack?: boolean;
+  /** Texto del boton volver */
+  backText?: string;
+  /** Mostrar acciones */
+  withActions?: boolean;
+  /** Mostrar menu */
+  withMenu?: boolean;
+  /** Acciones del header */
+  actions?: ToolbarAction[];
+}
+
+/**
+ * Sin header
+ */
+export interface NoHeaderConfig {
+  type: 'none';
+}
+
+/**
+ * Union de todos los tipos de configuracion de header
+ */
+export type HeaderConfig =
+  | BackHeaderConfig
+  | HomeHeaderConfig
+  | CustomHeaderConfig
+  | NoHeaderConfig;
+
+/**
+ * Configuracion por defecto para header tipo 'home'
+ */
+export const DEFAULT_HOME_HEADER: HomeHeaderConfig = {
+  type: 'home',
+  withMenu: false,
+  actions: [],
+};
+
+/**
+ * Configuracion por defecto para header tipo 'back'
+ */
+export const DEFAULT_BACK_HEADER: BackHeaderConfig = {
+  type: 'back',
+  titleKey: '',
+};

package/src/lib/services/pagination/index.ts

@@ -0,0 +1,13 @@
+// Types
+export {
+  PaginationStrategy,
+  PaginationState,
+  PaginationLoadParams,
+  PaginationLoadResult,
+  PaginationConfig,
+  PaginationController,
+  createInitialPaginationState,
+} from './types';
+
+// Service
+export { PaginationService } from './pagination.service';