valtech-components 2.0.691 → 2.0.692

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

@@ -0,0 +1,127 @@
+import { Type } from '@angular/core';
+import { SkeletonTemplateName, SkeletonTemplateConfig, RegisteredSkeletonTemplate, SkeletonConfig } from './types';
+import * as i0 from "@angular/core";
+/**
+ * Servicio para gestionar templates de skeleton y estados de carga globales.
+ *
+ * @example
+ * // En un componente
+ * skeleton = inject(SkeletonService);
+ *
+ * // Registrar template personalizado
+ * skeleton.registerTemplate('my-custom', MyCustomSkeletonComponent);
+ *
+ * // Obtener componente de template
+ * const component = skeleton.getTemplate('list');
+ *
+ * // Gestionar estados de carga globales
+ * skeleton.setLoadingState('dashboard', true);
+ * const isDashboardLoading = skeleton.loadingState('dashboard');
+ */
+export declare class SkeletonService {
+    private readonly _config;
+    private readonly _templates;
+    private readonly _loadingStates;
+    private _initialized;
+    /** Configuracion actual (solo lectura) */
+    readonly config: import("@angular/core").Signal<SkeletonConfig>;
+    /** Templates registrados (solo lectura) */
+    readonly templates: import("@angular/core").Signal<Map<string, RegisteredSkeletonTemplate>>;
+    /** Estado de carga global (cualquier estado registrado esta cargando) */
+    readonly isAnyLoading: import("@angular/core").Signal<boolean>;
+    /** Cantidad de templates registrados */
+    readonly templateCount: import("@angular/core").Signal<number>;
+    /**
+     * Configura el servicio de skeleton.
+     * Llamado por provideValtechSkeleton().
+     */
+    configure(config: SkeletonConfig): void;
+    /**
+     * Registra un template de skeleton personalizado.
+     *
+     * @param name Nombre unico del template
+     * @param component Componente a usar
+     * @param defaultConfig Configuracion por defecto opcional
+     */
+    registerTemplate(name: string, component: Type<unknown>, defaultConfig?: SkeletonTemplateConfig): void;
+    /**
+     * Obtiene un template de skeleton registrado.
+     *
+     * @param name Nombre del template
+     * @returns Template registrado o undefined si no existe
+     */
+    getTemplate(name: SkeletonTemplateName | string): RegisteredSkeletonTemplate | undefined;
+    /**
+     * Verifica si un template esta registrado.
+     *
+     * @param name Nombre del template
+     * @returns true si el template existe
+     */
+    hasTemplate(name: string): boolean;
+    /**
+     * Obtiene todos los nombres de templates registrados.
+     *
+     * @returns Array de nombres de templates
+     */
+    getTemplateNames(): string[];
+    /**
+     * Registra un estado de carga nombrado.
+     * Util para indicadores de carga globales.
+     *
+     * @param key Identificador unico del estado
+     * @param isLoading Estado de carga
+     */
+    setLoadingState(key: string, isLoading: boolean): void;
+    /**
+     * Obtiene el estado de carga para una clave especifica.
+     *
+     * @param key Identificador del estado
+     * @returns Estado de carga actual
+     */
+    getLoadingState(key: string): boolean;
+    /**
+     * Crea un signal computado para un estado de carga especifico.
+     *
+     * @param key Identificador del estado
+     * @returns Signal reactivo del estado de carga
+     */
+    loadingState(key: string): import("@angular/core").Signal<boolean>;
+    /**
+     * Obtiene todas las claves de estados de carga activos.
+     *
+     * @returns Array de claves con estado de carga activo
+     */
+    getActiveLoadingKeys(): string[];
+    /**
+     * Limpia todos los estados de carga.
+     */
+    clearLoadingStates(): void;
+    /**
+     * Limpia un estado de carga especifico.
+     *
+     * @param key Identificador del estado a limpiar
+     */
+    clearLoadingState(key: string): void;
+    /**
+     * Ejecuta una funcion async con tracking de estado de carga.
+     *
+     * @param key Identificador del estado
+     * @param fn Funcion async a ejecutar
+     * @returns Resultado de la funcion
+     */
+    withLoading<T>(key: string, fn: () => Promise<T>): Promise<T>;
+    /**
+     * Obtiene la configuracion de animacion por defecto.
+     */
+    get animated(): boolean;
+    /**
+     * Obtiene el delay por defecto.
+     */
+    get defaultDelay(): number;
+    /**
+     * Obtiene el tiempo minimo por defecto.
+     */
+    get defaultMinTime(): number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SkeletonService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SkeletonService>;
+}

package/lib/services/skeleton/templates/detail-skeleton.component.d.ts

@@ -0,0 +1,18 @@
+import { SkeletonTemplateConfig, SkeletonTemplateComponent } from '../types';
+import * as i0 from "@angular/core";
+/**
+ * Template de skeleton para paginas de detalle.
+ *
+ * @example
+ * <val-skeleton-detail></val-skeleton-detail>
+ *
+ * @example
+ * <val-skeleton-detail [config]="{ sections: 3 }"></val-skeleton-detail>
+ */
+export declare class DetailSkeletonComponent implements SkeletonTemplateComponent {
+    config: SkeletonTemplateConfig;
+    get sections(): number[];
+    get metaItems(): number[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<DetailSkeletonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DetailSkeletonComponent, "val-skeleton-detail", never, { "config": { "alias": "config"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/services/skeleton/templates/form-skeleton.component.d.ts

@@ -0,0 +1,22 @@
+import { SkeletonTemplateConfig, SkeletonTemplateComponent } from '../types';
+import * as i0 from "@angular/core";
+/**
+ * Template de skeleton para formularios.
+ *
+ * @example
+ * <val-skeleton-form [config]="{ count: 4 }"></val-skeleton-form>
+ *
+ * @example
+ * <val-skeleton-form [config]="{ count: 3, variant: 'compact' }"></val-skeleton-form>
+ */
+export declare class FormSkeletonComponent implements SkeletonTemplateComponent {
+    config: SkeletonTemplateConfig;
+    get fields(): number[];
+    get isCompact(): boolean;
+    get labelWidth(): string;
+    get inputHeight(): string;
+    get buttonWidth(): string;
+    get buttonHeight(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormSkeletonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormSkeletonComponent, "val-skeleton-form", never, { "config": { "alias": "config"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/services/skeleton/templates/grid-skeleton.component.d.ts

@@ -0,0 +1,18 @@
+import { SkeletonTemplateConfig, SkeletonTemplateComponent } from '../types';
+import * as i0 from "@angular/core";
+/**
+ * Template de skeleton para grids de cards.
+ *
+ * @example
+ * <val-skeleton-grid [config]="{ count: 6 }"></val-skeleton-grid>
+ *
+ * @example
+ * <val-skeleton-grid [config]="{ count: 8, variant: 'cards', columns: 4 }"></val-skeleton-grid>
+ */
+export declare class GridSkeletonComponent implements SkeletonTemplateComponent {
+    config: SkeletonTemplateConfig;
+    get items(): number[];
+    get gridColumns(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GridSkeletonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GridSkeletonComponent, "val-skeleton-grid", never, { "config": { "alias": "config"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/services/skeleton/templates/list-skeleton.component.d.ts

@@ -0,0 +1,17 @@
+import { SkeletonTemplateConfig, SkeletonTemplateComponent } from '../types';
+import * as i0 from "@angular/core";
+/**
+ * Template de skeleton para listas.
+ *
+ * @example
+ * <val-skeleton-list [config]="{ count: 5 }"></val-skeleton-list>
+ *
+ * @example
+ * <val-skeleton-list [config]="{ count: 3, variant: 'avatar', gap: '16px' }"></val-skeleton-list>
+ */
+export declare class ListSkeletonComponent implements SkeletonTemplateComponent {
+    config: SkeletonTemplateConfig;
+    get items(): number[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<ListSkeletonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ListSkeletonComponent, "val-skeleton-list", never, { "config": { "alias": "config"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/services/skeleton/templates/profile-skeleton.component.d.ts

@@ -0,0 +1,20 @@
+import { SkeletonTemplateConfig, SkeletonTemplateComponent } from '../types';
+import * as i0 from "@angular/core";
+/**
+ * Template de skeleton para perfiles de usuario.
+ *
+ * @example
+ * <val-skeleton-profile></val-skeleton-profile>
+ *
+ * @example
+ * <val-skeleton-profile [config]="{ variant: 'full' }"></val-skeleton-profile>
+ */
+export declare class ProfileSkeletonComponent implements SkeletonTemplateComponent {
+    config: SkeletonTemplateConfig;
+    get avatarSize(): string;
+    get nameWidth(): string;
+    get subtitleWidth(): string;
+    get stats(): number[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<ProfileSkeletonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ProfileSkeletonComponent, "val-skeleton-profile", never, { "config": { "alias": "config"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/services/skeleton/templates/table-skeleton.component.d.ts

@@ -0,0 +1,17 @@
+import { SkeletonTemplateConfig, SkeletonTemplateComponent } from '../types';
+import * as i0 from "@angular/core";
+/**
+ * Template de skeleton para tablas.
+ *
+ * @example
+ * <val-skeleton-table [config]="{ columns: 5, rows: 10 }"></val-skeleton-table>
+ */
+export declare class TableSkeletonComponent implements SkeletonTemplateComponent {
+    config: SkeletonTemplateConfig;
+    get columns(): number[];
+    get rows(): number[];
+    getColumnFlex(index: number): string;
+    getColumnContentWidth(index: number): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableSkeletonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TableSkeletonComponent, "val-skeleton-table", never, { "config": { "alias": "config"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,111 @@
+import { Signal, TemplateRef, Type } from '@angular/core';
+import { Observable } from 'rxjs';
+/**
+ * Nombres de templates de skeleton disponibles.
+ */
+export type SkeletonTemplateName = 'list' | 'list-avatar' | 'grid' | 'grid-cards' | 'form' | 'form-compact' | 'profile' | 'profile-full' | 'detail' | 'table';
+/**
+ * Configuracion para un skeleton template.
+ */
+export interface SkeletonTemplateConfig {
+    /** Numero de items skeleton a mostrar */
+    count?: number;
+    /** Variante del layout */
+    variant?: string;
+    /** Gap entre items (valor CSS) */
+    gap?: string;
+    /** Ancho personalizado */
+    width?: string;
+    /** Animacion habilitada */
+    animated?: boolean;
+    /** Clases CSS adicionales */
+    cssClass?: string;
+    /** Numero de columnas (para grid/table) */
+    columns?: number;
+    /** Numero de filas (para table) */
+    rows?: number;
+    /** Numero de secciones (para detail) */
+    sections?: number;
+}
+/**
+ * Fuente de estado de carga - puede ser Signal, Observable o Promise.
+ */
+export type LoadingSource<T = boolean> = Signal<T> | Observable<T> | Promise<T> | boolean;
+/**
+ * Configuracion para la directiva valSkeleton.
+ */
+export interface SkeletonDirectiveConfig {
+    /** Mostrar skeleton cuando esto sea truthy */
+    when: LoadingSource;
+    /** Nombre del template o componente a usar */
+    template?: SkeletonTemplateName | string;
+    /** Configuracion del template */
+    config?: SkeletonTemplateConfig;
+    /** Delay antes de mostrar skeleton (ms) - previene flash */
+    delay?: number;
+    /** Tiempo minimo de visualizacion (ms) - previene parpadeo */
+    minTime?: number;
+}
+/**
+ * Configuracion para la directiva valLoading.
+ */
+export interface LoadingDirectiveConfig {
+    /** Fuente de estado de carga */
+    loading: LoadingSource;
+    /** Template de skeleton a mostrar durante carga */
+    skeleton?: SkeletonTemplateName | string;
+    /** Configuracion del skeleton */
+    skeletonConfig?: SkeletonTemplateConfig;
+    /** Template ref personalizado para skeleton */
+    skeletonTemplate?: TemplateRef<unknown>;
+    /** Mostrar spinner en lugar de skeleton */
+    spinner?: boolean;
+    /** Delay antes de mostrar estado de carga (ms) */
+    delay?: number;
+    /** Tiempo minimo de carga (ms) */
+    minTime?: number;
+}
+/**
+ * Template de skeleton registrado.
+ */
+export interface RegisteredSkeletonTemplate {
+    name: string;
+    component: Type<unknown>;
+    defaultConfig?: SkeletonTemplateConfig;
+}
+/**
+ * Configuracion para provideValtechSkeleton().
+ */
+export interface SkeletonConfig {
+    /** Animacion habilitada por defecto */
+    animated?: boolean;
+    /** Delay global antes de mostrar skeletons */
+    defaultDelay?: number;
+    /** Tiempo minimo de visualizacion global */
+    defaultMinTime?: number;
+    /** Templates de skeleton personalizados a registrar */
+    templates?: RegisteredSkeletonTemplate[];
+    /** Template por defecto para listas */
+    defaultListTemplate?: SkeletonTemplateName;
+    /** Template por defecto para grids */
+    defaultGridTemplate?: SkeletonTemplateName;
+}
+/**
+ * Configuracion por defecto para el sistema de skeletons.
+ */
+export declare const DEFAULT_SKELETON_CONFIG: SkeletonConfig;
+/**
+ * Contexto para templates de skeleton en directivas.
+ */
+export interface SkeletonTemplateContext {
+    /** Configuracion del skeleton */
+    config: SkeletonTemplateConfig;
+    /** Estado de animacion */
+    animated: boolean;
+}
+/**
+ * Tipo base para componentes de skeleton template.
+ */
+export interface SkeletonTemplateComponent {
+    config: SkeletonTemplateConfig;
+}

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

@@ -0,0 +1,70 @@
+import { BehaviorSubject } from 'rxjs';
+import * as i0 from "@angular/core";
+export declare enum ThemeOption {
+    LIGHT = "light",
+    DARK = "dark",
+    AUTO = "auto"
+}
+export declare class ThemeService {
+    /**
+     * Indicates if the light theme is active.
+     */
+    lightToggle: boolean;
+    /**
+     * Indicates if the dark theme is active.
+     */
+    darkToggle: boolean;
+    /**
+     * Indicates if the auto theme is active.
+     */
+    autoToggle: boolean;
+    /**
+     * The current selected theme option.
+     */
+    currentOption: ThemeOption;
+    /**
+     * Enum with all available theme options.
+     */
+    themeOptions: typeof ThemeOption;
+    /**
+     * Whether the system prefers dark mode.
+     */
+    prefersDark: boolean;
+    /**
+     * The default theme option.
+     */
+    default: ThemeOption;
+    /**
+     * Observable for the current theme.
+     */
+    theme: BehaviorSubject<ThemeOption>;
+    constructor();
+    private handleAutoConfiguration;
+    private handleDarkPreference;
+    private handleLightPreference;
+    /**
+     * Returns true if the system prefers dark mode.
+     */
+    get IsDark(): boolean;
+    /**
+     * Gets the current theme option.
+     */
+    get Theme(): ThemeOption;
+    /**
+     * Sets the current theme option and persists it.
+     */
+    set Theme(theme: ThemeOption);
+    /**
+     * Toggles a theme class on the document body.
+     * @param name The theme name
+     * @param shouldAdd Whether to add or remove the class
+     */
+    toggleTheme(name: string, shouldAdd: boolean): void;
+    /**
+     * Sets the user theme preference and updates toggles and theme classes.
+     * @param option The selected theme option
+     */
+    toggleUserPreference(option: ThemeOption): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ThemeService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ThemeService>;
+}

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

@@ -0,0 +1,22 @@
+import { ToastController, ToastOptions } from '@ionic/angular';
+import * as i0 from "@angular/core";
+/**
+ * Service for displaying toast notifications using Ionic's ToastController.
+ * Provides methods to show and present toasts with custom options.
+ */
+export declare class ToastService {
+    private toastController;
+    constructor(toastController: ToastController);
+    /**
+     * Presents a toast notification with the given options.
+     * @param request Toast options (message, duration, position, color, etc.)
+     */
+    presentToast(request: ToastOptions): Promise<void>;
+    /**
+     * Shows a toast notification and logs the result.
+     * @param request Toast options (message, duration, position, color, etc.)
+     */
+    show(request: ToastOptions): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToastService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ToastService>;
+}

package/lib/services/types.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/shared/constants/storage.d.ts

@@ -0,0 +1,2 @@
+export declare const LANG = "LANG";
+export declare const THEME = "THEME";

package/lib/shared/pipes/process-links.pipe.d.ts

@@ -0,0 +1,55 @@
+import { PipeTransform } from '@angular/core';
+import { SafeHtml } from '@angular/platform-browser';
+import { LinkProcessorConfig } from '../../services/link-processor.service';
+import * as i0 from "@angular/core";
+/**
+ * ProcessLinksPipe - Pipe para procesar texto y convertir URLs en enlaces clickeables.
+ *
+ * Este pipe standalone detecta automáticamente URLs externas (http/https) y rutas internas
+ * (que empiezan con /) y las convierte en elementos HTML anchor con los atributos apropiados.
+ *
+ * @example Uso básico:
+ * ```html
+ * <div [innerHTML]="'Visit https://example.com or go to /profile' | processLinks"></div>
+ * ```
+ *
+ * @example Con configuración personalizada:
+ * ```html
+ * <div [innerHTML]="text | processLinks:linkConfig"></div>
+ * ```
+ *
+ * @example En TypeScript:
+ * ```typescript
+ * export class MyComponent {
+ *   linkConfig: LinkProcessorConfig = {
+ *     openExternalInNewTab: true,
+ *     openInternalInNewTab: false,
+ *     linkClass: 'my-link',
+ *     externalLinkClass: 'external',
+ *     internalLinkClass: 'internal'
+ *   };
+ * }
+ * ```
+ */
+export declare class ProcessLinksPipe implements PipeTransform {
+    private linkProcessor;
+    /**
+     * Transforma texto procesando URLs y rutas internas para convertirlas en enlaces.
+     *
+     * @param value - El texto a procesar
+     * @param config - Configuración opcional para el procesamiento de enlaces
+     * @returns SafeHtml con enlaces procesados o string original si no hay enlaces
+     *
+     * @example
+     * ```html
+     * <!-- Uso básico -->
+     * <p [innerHTML]="'Check out https://angular.io' | processLinks"></p>
+     *
+     * <!-- Con configuración -->
+     * <p [innerHTML]="message | processLinks:{ openExternalInNewTab: false }"></p>
+     * ```
+     */
+    transform(value: string, config?: LinkProcessorConfig): SafeHtml | string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ProcessLinksPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<ProcessLinksPipe, "processLinks", true>;
+}

package/lib/shared/utils/dom.d.ts

@@ -0,0 +1,13 @@
+import { ElementRef } from '@angular/core';
+/**
+ * Scrolls smoothly to the top of the element with the given id.
+ * @param id The id of the element to scroll to
+ */
+export declare const goToTop: (id: string) => void;
+/**
+ * Checks if the bottom of the given ElementRef is within the viewport.
+ * Useful for determining if a form or element is fully visible.
+ * @param elementRef The Angular ElementRef to check
+ * @returns True if the element's bottom is at or above the window's bottom
+ */
+export declare const isAtEnd: (elementRef: ElementRef) => boolean;

package/lib/shared/utils/form-defaults.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Utilities for handling default values in form inputs based on InputMetadata configuration.
+ */
+import { InputMetadata } from '../../components/types';
+/**
+ * Resolves the initial value for a form input based on its configuration.
+ *
+ * @param input - The input metadata configuration
+ * @returns The resolved initial value
+ *
+ * @example
+ * // Custom default value
+ * const customValue = resolveInputDefaultValue({ withDefault: '2025-06-24', type: InputType.DATE });
+ *
+ * // Auto default value
+ * const autoValue = resolveInputDefaultValue({ withDefault: true, type: InputType.NUMBER });
+ *
+ * // Explicit value (takes precedence)
+ * const explicitValue = resolveInputDefaultValue({ value: 'explicit', withDefault: true, type: InputType.TEXT });
+ */
+export declare function resolveInputDefaultValue(input: InputMetadata): any;
+/**
+ * Applies the resolved default value to a FormControl.
+ *
+ * @param input - The input metadata configuration
+ * @example
+ * const input = { control: myFormControl, type: InputType.DATE, withDefault: true };
+ * applyDefaultValueToControl(input);
+ */
+export declare function applyDefaultValueToControl(input: InputMetadata): void;

package/lib/shared/utils/styles.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Resolves a color string to a valid CSS value for use in styles.
+ * Supports Ionic color names, CSS variables, and custom colors.
+ *
+ * @param color The color name, CSS variable, or custom color string
+ * @returns A valid CSS color value
+ *
+ * @example
+ * resolveColor('primary'); // returns 'var(--ion-color-primary)'
+ * resolveColor('--my-custom-color'); // returns 'var(--my-custom-color)'
+ * resolveColor('#ff0000'); // returns '#ff0000'
+ */
+export declare function resolveColor(color: string): string;

package/lib/shared/utils/text.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Removes diacritical marks (accents) from a string using Unicode normalization.
+ * Useful for text search and comparison.
+ *
+ * @param text The input string
+ * @returns The normalized string without diacritical marks
+ *
+ * @example
+ * replaceSpecialChars('canción') // returns 'cancion'
+ */
+export declare const replaceSpecialChars: (text: string) => string;

package/lib/version.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Current version of valtech-components.
+ * This is automatically updated during the publish process.
+ */
+export declare const VERSION = "2.0.692";