valtech-components 2.0.821 → 2.0.823

package/lib/services/meta/meta.service.d.ts

@@ -0,0 +1,23 @@
+import { PageMetadata, MetaConfig } from './types';
+import * as i0 from "@angular/core";
+export declare class MetaService {
+    private meta;
+    private titleService;
+    private baseUrl;
+    private defaultImage;
+    private siteName;
+    /**
+     * Configurar el servicio con valores de la app
+     */
+    configure(config: MetaConfig): void;
+    /**
+     * Actualizar meta tags de la página
+     */
+    updatePageMeta(metadata: PageMetadata, path?: string): void;
+    /**
+     * Resetear a valores por defecto
+     */
+    resetToDefault(metadata: PageMetadata): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MetaService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MetaService>;
+}

package/lib/services/meta/types.d.ts

@@ -0,0 +1,12 @@
+export interface PageMetadata {
+    title: string;
+    description: string;
+    keywords?: string;
+    ogImage?: string;
+    type?: 'website' | 'article';
+}
+export interface MetaConfig {
+    baseUrl: string;
+    siteName: string;
+    defaultImage?: string;
+}

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

@@ -0,0 +1,100 @@
+import { ModalController } from '@ionic/angular/standalone';
+import { ModalMetadata, SimpleModalMetadata, ModalResult, ModalButton } from './types';
+import * as i0 from "@angular/core";
+/**
+ * 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
+ *   }
+ * });
+ * ```
+ */
+export declare class ModalService {
+    private modalController;
+    constructor(modalController: ModalController);
+    /**
+     * Opens a modal with a component.
+     * @param options - Modal configuration
+     * @returns Promise resolving to the modal result
+     */
+    open<T = any, R = any>(options: ModalMetadata<T>): Promise<ModalResult<R>>;
+    /**
+     * 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
+     */
+    openSimple(options: SimpleModalMetadata): Promise<ModalResult>;
+    /**
+     * 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
+     */
+    confirm(title: string, message: string, confirmButton?: Partial<ModalButton>, cancelButton?: Partial<ModalButton>): Promise<boolean>;
+    /**
+     * Opens a sheet modal (iOS-style bottom sheet).
+     * @param options - Modal configuration with sheet-specific options
+     * @returns Promise resolving to the modal result
+     */
+    openSheet<T = any, R = any>(options: Omit<ModalMetadata<T>, 'breakpoints'> & {
+        initialBreakpoint?: number;
+        breakpoints?: number[];
+        showHandle?: boolean;
+    }): Promise<ModalResult<R>>;
+    /**
+     * Opens a fullscreen modal.
+     * @param options - Modal configuration
+     * @returns Promise resolving to the modal result
+     */
+    openFullscreen<T = any, R = any>(options: ModalMetadata<T>): Promise<ModalResult<R>>;
+    /**
+     * Dismisses the top-most modal.
+     * @param data - Optional data to return
+     * @param role - Optional role
+     */
+    dismiss(data?: any, role?: string): Promise<boolean>;
+    /**
+     * Gets the top-most modal.
+     */
+    getTop(): Promise<HTMLIonModalElement | undefined>;
+    private normalizeCanDismiss;
+    private buildCssClasses;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ModalService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ModalService>;
+}

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

@@ -0,0 +1,19 @@
+import { ModalButton } from './types';
+import * as i0 from "@angular/core";
+/**
+ * Internal component for simple content modals.
+ * Used by ModalService.openSimple()
+ */
+export declare class SimpleModalContentComponent {
+    title: string;
+    content: string;
+    buttons: ModalButton[];
+    showCloseButton: boolean;
+    _modalRef: {
+        dismiss: (data?: any, role?: string) => Promise<boolean>;
+    };
+    onButtonClick(button: ModalButton): Promise<void>;
+    onDismiss(role: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SimpleModalContentComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SimpleModalContentComponent, "val-simple-modal-content", never, { "title": { "alias": "title"; "required": false; }; "content": { "alias": "content"; "required": false; }; "buttons": { "alias": "buttons"; "required": false; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; }; "_modalRef": { "alias": "_modalRef"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,155 @@
+import { Type } from '@angular/core';
+import { Color } from '@ionic/core';
+/**
+ * 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 declare const MODAL_SIZES: Record<ModalSize, {
+    width?: string;
+    height?: string;
+}>;
+/**
+ * Default modal buttons.
+ */
+export declare const DEFAULT_MODAL_CONFIRM_BUTTON: ModalButton;
+export declare const DEFAULT_MODAL_CANCEL_BUTTON: ModalButton;

package/lib/services/navigation/index.d.ts

@@ -0,0 +1,2 @@
+export * from './navigation.service';
+export * from './types';

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

@@ -0,0 +1,134 @@
+import { Location } from '@angular/common';
+import { Router } from '@angular/router';
+import { InAppBrowserService } from '../in-app-browser.service';
+import { HeaderConfig, HomeHeaderConfig, CustomHeaderConfig } from './types';
+import * as i0 from "@angular/core";
+/**
+ * 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;
+ * }
+ */
+export declare class NavigationService {
+    router: Router;
+    location: Location;
+    inAppBrowser: InAppBrowserService;
+    private i18n;
+    private readonly _headerConfig;
+    /**
+     * Configuracion actual del header (readonly signal)
+     */
+    readonly headerConfig: import("@angular/core").Signal<HeaderConfig>;
+    /**
+     * Titulo del header traducido y reactivo al cambio de idioma.
+     * Solo aplica para headers tipo 'back' o 'custom' con titleKey.
+     */
+    readonly headerTitle: import("@angular/core").Signal<string>;
+    /**
+     * Indica si el header actual tiene boton volver
+     */
+    readonly hasBackButton: import("@angular/core").Signal<boolean>;
+    /**
+     * Arbitrary data to be transferred during navigation.
+     * @deprecated Use navigateWithData instead
+     */
+    data: any;
+    constructor(router: Router, location: Location, inAppBrowser: InAppBrowserService);
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * Configura un header personalizado.
+     *
+     * @param options Opciones del header
+     */
+    setCustomHeader(options: Omit<CustomHeaderConfig, 'type'>): void;
+    /**
+     * Oculta el header completamente.
+     */
+    hideHeader(): void;
+    /**
+     * Resetea el header al estado por defecto (home).
+     */
+    resetHeader(): void;
+    /**
+     * Opens a URL using the in-app browser service.
+     * @param url The URL to open
+     */
+    navigateInApp(url: string): void;
+    /**
+     * 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;
+    /**
+     * Navigates to a URL using Angular Router.
+     * @param url The URL to navigate to
+     */
+    navigateByUrl(url: string): void;
+    /**
+     * Opens a URL in a new browser tab.
+     * @param url The URL to open
+     */
+    openInNewTab(url: string): void;
+    /**
+     * Navigates back to the previous page in the browser history.
+     */
+    back(): void;
+    /**
+     * Traduce una clave i18n en formato 'namespace.key'
+     */
+    private translateKey;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NavigationService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<NavigationService>;
+}

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

@@ -0,0 +1,67 @@
+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 declare const DEFAULT_HOME_HEADER: HomeHeaderConfig;
+/**
+ * Configuracion por defecto para header tipo 'back'
+ */
+export declare const DEFAULT_BACK_HEADER: BackHeaderConfig;

package/lib/services/page-refresh/page-refresh.service.d.ts

@@ -0,0 +1,86 @@
+import * as i0 from "@angular/core";
+/**
+ * Handler de refresh que registra una página. Puede ser sync o async —
+ * `val-page-wrapper` espera (`await`) a que termine antes de cerrar el spinner.
+ */
+export type PageRefreshHandler = () => Promise<void> | void;
+/**
+ * PageRefreshService — bus del pull-to-refresh estándar del factory.
+ *
+ * **Por qué existe:** `val-page-wrapper` posee un único `<ion-content>` y todas
+ * las páginas se renderizan dentro vía `<router-outlet>`. Un `<ion-refresher>`
+ * tiene que vivir dentro de ese `ion-content`, así que el refresher NO puede
+ * declararse en el template de cada página — vive una sola vez en
+ * `val-page-wrapper`. Este servicio es el puente: la página activa registra
+ * *qué hacer* al refrescar; el page-wrapper dispara el gesto y cierra el spinner.
+ *
+ * **Uso en una página** (ver `frontend/CLAUDE.md` — es el patrón estándar):
+ *
+ * ```ts
+ * export class MiPage implements ViewWillEnter, ViewWillLeave {
+ *   private pageRefresh = inject(PageRefreshService);
+ *
+ *   ionViewWillEnter(): void {
+ *     this.pageRefresh.register(() => this.reload());
+ *   }
+ *   ionViewWillLeave(): void {
+ *     this.pageRefresh.unregister();
+ *   }
+ *
+ *   private async reload(): Promise<void> {
+ *     // re-fetch / re-suscribir streams / etc.
+ *   }
+ * }
+ * ```
+ *
+ * Páginas que no llaman `register()` simplemente no muestran refresher —
+ * opt-in, sin impacto.
+ */
+export declare class PageRefreshService {
+    private handler;
+    /**
+     * `true` cuando hay una página con handler registrado. `val-page-wrapper`
+     * renderiza el `<val-refresher>` sólo cuando esto es `true`.
+     */
+    readonly hasHandler: import("@angular/core").WritableSignal<boolean>;
+    /**
+     * Registra el handler de refresh de la página activa. Llamar en
+     * `ionViewWillEnter`. Si ya había uno, lo reemplaza (sólo hay una página
+     * activa a la vez en el router-outlet de Ionic).
+     */
+    register(handler: PageRefreshHandler): void;
+    /**
+     * Quita el handler. Llamar en `ionViewWillLeave` para que el refresher
+     * desaparezca al salir de la vista.
+     */
+    unregister(): void;
+    /**
+     * Ejecuta el handler registrado y espera a que termine. Lo invoca
+     * `val-page-wrapper` al detectar el gesto de pull. No-op si no hay handler.
+     */
+    run(): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PageRefreshService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<PageRefreshService>;
+}
+/**
+ * Conecta una página al pull-to-refresh estándar en UNA línea, sin lifecycle
+ * hooks manuales: registra el handler y lo desregistra al destruir la página
+ * (vía `DestroyRef`).
+ *
+ * DEBE llamarse en un injection context (constructor o field initializer).
+ *
+ * @example
+ * ```ts
+ * export class MiPage {
+ *   private data = createRefreshableStream(() => this.svc.getX());
+ *   readonly items = this.data.data;
+ *
+ *   constructor() {
+ *     connectPageRefresh(() => this.data.reload());
+ *   }
+ * }
+ * ```
+ *
+ * Reemplaza el patrón `ngOnInit`→`register` / `ngOnDestroy`→`unregister`.
+ */
+export declare function connectPageRefresh(handler: PageRefreshHandler): void;

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

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

package/lib/services/pagination/pagination.service.d.ts

@@ -0,0 +1,43 @@
+import { PaginationConfig, PaginationController } from './types';
+import * as i0 from "@angular/core";
+/**
+ * Servicio para crear controladores de paginacion reutilizables.
+ *
+ * @example
+ * // En un componente
+ * pagination = inject(PaginationService);
+ *
+ * usersController = this.pagination.createController<User>({
+ *   strategy: 'offset',
+ *   pageSize: 20,
+ *   loadFn: (params) => this.userService.getUsers(params.page, params.pageSize)
+ * });
+ *
+ * // En el template
+ * @for (user of usersController.items(); track user.id) {
+ *   <app-user-card [user]="user"></app-user-card>
+ * }
+ *
+ * @if (usersController.hasMore()) {
+ *   <ion-button (click)="usersController.loadNext()">Cargar mas</ion-button>
+ * }
+ */
+export declare class PaginationService {
+    /**
+     * Crea un controlador de paginacion para una fuente de datos.
+     *
+     * @param config Configuracion del controlador
+     * @returns Controlador de paginacion
+     */
+    createController<T>(config: PaginationConfig<T>): PaginationController<T>;
+    /**
+     * Crea un controlador simple para arrays estaticos con paginacion local.
+     *
+     * @param items Array completo de items
+     * @param pageSize Tamano de pagina
+     * @returns Controlador de paginacion
+     */
+    createLocalController<T>(items: T[], pageSize?: number): PaginationController<T>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PaginationService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<PaginationService>;
+}