valtech-components 2.0.821 → 2.0.823

package/lib/components/organisms/form/form.component.d.ts

@@ -0,0 +1,72 @@
+import { DoCheck, ElementRef, EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { TextareaInputMetadata } from '../../molecules/textarea-input/types';
+import { UsernameInputMetadata } from '../../molecules/username-input/types';
+import { ButtonMetadata, FormMetadata, FormSubmit, InputMetadata, InputType } from '../../types';
+import * as i0 from "@angular/core";
+export declare class FormComponent implements OnInit, OnChanges, DoCheck {
+    private fb;
+    private elementRef;
+    props: FormMetadata;
+    onSubmit: EventEmitter<FormSubmit>;
+    onInvalid: EventEmitter<any>;
+    onSelectChange: EventEmitter<{
+        field: string;
+        value: any;
+    }>;
+    form: FormGroup;
+    types: typeof InputType;
+    private subscriptions;
+    private actionsCache;
+    private fieldPropMemo;
+    private usernamePropMemo;
+    private textareaPropMemo;
+    private selectPropMemo;
+    private previousState;
+    constructor(fb: FormBuilder, elementRef: ElementRef);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngDoCheck(): void;
+    /**
+     * Synchronizes form control disabled/enabled state with field metadata.
+     */
+    private syncFieldControlStates;
+    /**
+     * Actualiza el cache de actions basado en el estado actual del form.
+     */
+    private updateActionsCache;
+    ngOnDestroy(): void;
+    trackSelectChanges(fieldName: string): void;
+    submitHandler(token?: string): Promise<void>;
+    getControl(field: string): FormControl;
+    getFieldProp(field: InputMetadata): InputMetadata;
+    /**
+     * Adapter para SELECT — igual que `getFieldProp` pero limpia `label`.
+     * val-form ya renderiza el título del campo con `<val-title>` arriba del input;
+     * si además pasáramos `label` al `<ion-select>`, este lo pinta DENTRO del pill
+     * → redundancia visual ("Tipo" dos veces). Reusa el mismo memo (con la entrada
+     * ya label-stripped) para no romper la identidad de referencia.
+     */
+    getSelectProp(field: InputMetadata): InputMetadata;
+    /**
+     * Adapter — convierte un `InputMetadata` (con type=HANDLE) a `UsernameInputMetadata`.
+     * El check de disponibilidad se resuelve dentro del component (AuthService inyectado);
+     * el caller puede sobrescribirlo pasando `field.errors` o un `UsernameInputMetadata`
+     * custom usando type=TEXT si necesita otra fuente de truth.
+     */
+    getUsernameProp(field: InputMetadata): UsernameInputMetadata;
+    /**
+     * Adapter — convierte un `InputMetadata` (con type=TEXTAREA) a `TextareaInputMetadata`.
+     * Defaults sensatos: autoGrow + counter habilitado, 4-12 rows.
+     */
+    getTextareaProp(field: InputMetadata): TextareaInputMetadata;
+    get isAtEndOfForm(): boolean;
+    get Form(): FormGroup;
+    get FormState(): {
+        form: FormGroup;
+        data: FormMetadata;
+    };
+    get actions(): ButtonMetadata[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormComponent, "val-form", never, { "props": { "alias": "props"; "required": false; }; }, { "onSubmit": "onSubmit"; "onInvalid": "onInvalid"; "onSelectChange": "onSelectChange"; }, never, ["*"], true, never>;
+}

package/lib/components/organisms/fun-header/fun-header.component.d.ts

@@ -0,0 +1,72 @@
+import { FunHeaderMetadata } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-fun-header
+ *
+ * A decorative header component with flexible background options,
+ * optional logo, and integrated banner content. Supports dark mode,
+ * gradients, images with overlays, and various styling options.
+ *
+ * @example
+ * <val-fun-header
+ *   [props]="{
+ *     image: '/assets/logo.png',
+ *     background: 'primary',
+ *     gradient: true,
+ *     content: {
+ *       title: 'Welcome',
+ *       description: 'Get started with our platform'
+ *     },
+ *     rounded: true,
+ *     shadowed: true
+ *   }"
+ * ></val-fun-header>
+ *
+ * @input props - Header configuration
+ */
+export declare class FunHeaderComponent {
+    private theme;
+    /**
+     * Header configuration.
+     */
+    props: FunHeaderMetadata;
+    /**
+     * Check if the image is a CSS variable (starts with --)
+     */
+    isImageVariable(image?: string): boolean;
+    /**
+     * Get the image source, handling CSS variables
+     */
+    getImageSrc(): string;
+    /**
+     * Generate header background styles
+     * Supports: images, gradients, colors, CSS variables, and dark mode
+     */
+    headerStyle(): Record<string, string>;
+    /**
+     * Resolve background color for gradient generation
+     */
+    private resolveBackgroundColor;
+    /**
+     * Check if background is an image URL
+     */
+    private isBackgroundImage;
+    /**
+     * Check if background is a gradient
+     */
+    private isGradient;
+    /**
+     * Check if background is a CSS variable
+     */
+    private isCSSVariable;
+    /**
+     * Check if background is a direct color value
+     */
+    private isColorValue;
+    /**
+     * Apply image background with optional overlay
+     */
+    private applyImageBackground;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FunHeaderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FunHeaderComponent, "val-fun-header", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/organisms/fun-header/types.d.ts

@@ -0,0 +1,28 @@
+import { BannerMetadata } from '../banner/types';
+/**
+ * Configuration for the fun header component.
+ */
+export interface FunHeaderMetadata {
+    /** Optional token for tracking/analytics */
+    token?: string;
+    /** Logo image path or CSS variable (e.g., '--my-logo') */
+    image?: string;
+    /** Background image URL, gradient, color, or CSS variable */
+    background?: string;
+    /** Dark mode background (optional, falls back to background) */
+    backgroundDark?: string;
+    /** Create automatic gradient from --ion-background-color to background color */
+    gradient?: boolean;
+    /** Add overlay for better text contrast on images */
+    overlay?: boolean;
+    /** Overlay opacity (0-1, default: 0.3) */
+    overlayOpacity?: number;
+    /** Banner content configuration */
+    content: BannerMetadata;
+    /** Add border around the header */
+    bordered?: boolean;
+    /** Add box shadow to the header */
+    shadowed?: boolean;
+    /** Add rounded bottom corners */
+    rounded?: boolean;
+}

package/lib/components/organisms/header/header.component.d.ts

@@ -0,0 +1,22 @@
+import { EventEmitter, OnInit } from '@angular/core';
+import { HeaderMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class HeaderComponent implements OnInit {
+    /**
+     * Metadatos del encabezado y su toolbar.
+     */
+    props: HeaderMetadata;
+    /**
+     * Evento emitido al hacer click en una acción de la toolbar.
+     */
+    onClick: EventEmitter<string>;
+    constructor();
+    ngOnInit(): void;
+    /**
+     * Emite el token de la acción clicada en la toolbar.
+     * @param token Token de la acción
+     */
+    clickHandler(token?: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HeaderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HeaderComponent, "val-header", never, { "props": { "alias": "props"; "required": false; }; }, { "onClick": "onClick"; }, never, never, true, never>;
+}

package/lib/components/organisms/header/types.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Tipos y metadatos para el componente HeaderComponent.
+ * Permiten definir la configuración del encabezado y su barra de herramientas.
+ */
+import { ToolbarMetadata } from '../toolbar/types';
+/**
+ * Metadatos para el encabezado.
+ * @property translucent (opcional) Si el encabezado es translúcido.
+ * @property bordered (opcional) Si el encabezado tiene borde.
+ * @property toolbar Metadatos de la barra de herramientas a mostrar en el encabezado.
+ */
+export type HeaderMetadata = {
+    translucent?: boolean;
+    bordered?: boolean;
+    toolbar: ToolbarMetadata;
+};

package/lib/components/organisms/infinite-list/infinite-list.component.d.ts

@@ -0,0 +1,113 @@
+import { EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { I18nService } from '../../../services/i18n';
+import { IonInfiniteScroll } from '@ionic/angular/standalone';
+import { InfiniteListMetadata, InfiniteListState, LoadMoreEvent } from './types';
+import { RefreshEvent, RefresherMetadata } from '../../molecules/refresher/types';
+import * as i0 from "@angular/core";
+/**
+ * Componente wrapper para listas con infinite scroll.
+ *
+ * @example
+ * <!-- Uso basico con data source -->
+ * <val-infinite-list
+ *   [props]="{
+ *     dataSource: { loadFn: loadUsers, trackBy: trackByUserId },
+ *     itemTemplate: userTemplate,
+ *     pageSize: 20,
+ *     threshold: '150px'
+ *   }"
+ * ></val-infinite-list>
+ *
+ * <ng-template #userTemplate let-user let-index="index">
+ *   <val-card [props]="{ title: user.name, subtitle: user.email }">
+ *     <p>{{ user.bio }}</p>
+ *   </val-card>
+ * </ng-template>
+ *
+ * @example
+ * <!-- Con pull-to-refresh y estado vacio personalizado -->
+ * <val-infinite-list
+ *   [props]="{
+ *     dataSource: { loadFn: loadMessages },
+ *     itemTemplate: messageTemplate,
+ *     direction: 'both',
+ *     enableRefresh: true,
+ *     emptyState: {
+ *       icon: 'chatbubbles-outline',
+ *       title: 'Sin mensajes',
+ *       message: 'Inicia una conversacion'
+ *     },
+ *     skeleton: { template: 'list', count: 5 }
+ *   }"
+ *   (refresh)="onRefresh($event)"
+ * ></val-infinite-list>
+ */
+export declare class InfiniteListComponent<T = unknown> implements OnInit, OnDestroy {
+    private readonly skeletonService;
+    private readonly cdr;
+    protected readonly i18n: I18nService;
+    infiniteScroll?: IonInfiniteScroll;
+    /** Configuracion del componente */
+    props: InfiniteListMetadata<T>;
+    loadMore: EventEmitter<LoadMoreEvent>;
+    refresh: EventEmitter<RefreshEvent>;
+    stateChange: EventEmitter<InfiniteListState>;
+    itemsChange: EventEmitter<T[]>;
+    errorOccurred: EventEmitter<Error>;
+    readonly items: import("@angular/core").WritableSignal<T[]>;
+    readonly state: import("@angular/core").WritableSignal<InfiniteListState>;
+    readonly hasMoreBottom: import("@angular/core").WritableSignal<boolean>;
+    readonly hasMoreTop: import("@angular/core").WritableSignal<boolean>;
+    readonly error: import("@angular/core").WritableSignal<Error>;
+    readonly isInitialLoad: import("@angular/core").WritableSignal<boolean>;
+    private currentPage;
+    private currentCursor;
+    /** Progreso de carga (0-1 si totalCount conocido) */
+    readonly loadProgress: import("@angular/core").Signal<number>;
+    /** Props combinados con defaults */
+    get mergedProps(): InfiniteListMetadata<T>;
+    /** Config del refresher */
+    get refresherConfig(): RefresherMetadata;
+    /** Componente de skeleton a usar */
+    get skeletonComponent(): import("@angular/core").Type<unknown>;
+    /** Inputs para el skeleton */
+    get skeletonInputs(): {
+        config: unknown;
+    };
+    /** Anuncio de estado para lectores de pantalla */
+    readonly statusAnnouncement: import("@angular/core").Signal<string>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /** Funcion de tracking para ngFor */
+    trackByFn(index: number, item: T): unknown;
+    /** Si debe mostrar el scroll inferior */
+    shouldShowBottomScroll(): boolean;
+    /** Carga inicial de datos */
+    loadInitial(): Promise<void>;
+    /** Cargar mas items en la parte inferior */
+    loadBottom(): Promise<void>;
+    /** Cargar mas items en la parte superior */
+    loadTop(): Promise<void>;
+    /** Refresh - recargar desde cero */
+    refreshList(): Promise<void>;
+    /** Reintentar despues de error */
+    retry(): Promise<void>;
+    /** Reset completo */
+    reset(): Promise<void>;
+    /** Agregar items al inicio */
+    prependItems(newItems: T[]): void;
+    /** Agregar items al final */
+    appendItems(newItems: T[]): void;
+    /** Actualizar un item por indice */
+    updateItem(index: number, item: T): void;
+    /** Remover un item por indice */
+    removeItem(index: number): void;
+    /** Handler para evento de infinite scroll */
+    onInfiniteScroll(event: CustomEvent): Promise<void>;
+    /** Handler para evento de refresh */
+    onRefreshTriggered(event: RefreshEvent): Promise<void>;
+    private executeLoad;
+    private handleError;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InfiniteListComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InfiniteListComponent<any>, "val-infinite-list", never, { "props": { "alias": "props"; "required": false; }; }, { "loadMore": "loadMore"; "refresh": "refresh"; "stateChange": "stateChange"; "itemsChange": "itemsChange"; "errorOccurred": "errorOccurred"; }, never, never, true, never>;
+}

package/lib/components/organisms/infinite-list/types.d.ts

@@ -0,0 +1,197 @@
+import { TemplateRef } from '@angular/core';
+import { Color } from '@ionic/core';
+import { Observable } from 'rxjs';
+import { SkeletonTemplateName, SkeletonTemplateConfig } from '../../../services/skeleton/types';
+import { RefresherMetadata } from '../../molecules/refresher/types';
+/**
+ * Direccion de carga de mas items.
+ */
+export type LoadDirection = 'bottom' | 'top' | 'both';
+/**
+ * Estado de la lista infinita.
+ */
+export type InfiniteListState = 'idle' | 'loading' | 'error' | 'complete';
+/**
+ * Parametros pasados a la funcion de carga.
+ */
+export interface LoadParams {
+    /** Direccion de carga */
+    direction: 'bottom' | 'top';
+    /** Pagina actual (para paginacion basada en offset) */
+    page: number;
+    /** Items por pagina */
+    pageSize: number;
+    /** Ultimo item (para paginacion basada en cursor) */
+    lastItem?: unknown;
+    /** Primer item (para carga top con cursor) */
+    firstItem?: unknown;
+    /** Cursor personalizado (del LoadResult anterior) */
+    cursor?: unknown;
+}
+/**
+ * Resultado de la funcion de carga.
+ */
+export interface LoadResult<T> {
+    /** Items cargados */
+    items: T[];
+    /** Si hay mas items disponibles */
+    hasMore: boolean;
+    /** Cursor personalizado para proxima carga (opcional) */
+    cursor?: unknown;
+    /** Actualizacion de conteo total (opcional) */
+    totalCount?: number;
+}
+/**
+ * Configuracion del data source.
+ */
+export interface InfiniteListDataSource<T> {
+    /** Items iniciales (opcional si usa loadFn) */
+    items?: T[];
+    /** Funcion para cargar mas items */
+    loadFn?: (params: LoadParams) => Observable<LoadResult<T>> | Promise<LoadResult<T>>;
+    /** Funcion track para ngFor (default: index) */
+    trackBy?: (index: number, item: T) => unknown;
+    /** Conteo total si se conoce (habilita indicador de progreso) */
+    totalCount?: number;
+}
+/**
+ * Evento emitido al cargar mas items.
+ */
+export interface LoadMoreEvent {
+    /** Parametros de carga */
+    params: LoadParams;
+    /** Llamar cuando la carga completa */
+    complete: (result: LoadResult<unknown>) => void;
+    /** Llamar cuando la carga falla */
+    error: (error: Error) => void;
+}
+/**
+ * Configuracion de estado vacio.
+ */
+export interface InfiniteListEmptyState {
+    /** Nombre del icono */
+    icon?: string;
+    /** Texto del titulo */
+    title?: string;
+    /** Texto del mensaje */
+    message?: string;
+    /** Template personalizado */
+    template?: TemplateRef<void>;
+    titleKey?: string;
+    messageKey?: string;
+    contentClass?: string;
+}
+/**
+ * Configuracion de estado de error.
+ */
+export interface InfiniteListErrorState {
+    /** Icono de error */
+    icon?: string;
+    /** Titulo del error */
+    title?: string;
+    /** Mensaje del error */
+    message?: string;
+    /** Mostrar boton de reintentar */
+    showRetry?: boolean;
+    /** Texto del boton de reintentar */
+    retryText?: string;
+    /** Template personalizado */
+    template?: TemplateRef<{
+        error: Error;
+        retry: () => void;
+    }>;
+    titleKey?: string;
+    messageKey?: string;
+    retryTextKey?: string;
+    contentClass?: string;
+}
+/**
+ * Configuracion de skeleton para carga.
+ */
+export interface InfiniteListSkeletonConfig {
+    /** Template de skeleton a usar */
+    template?: SkeletonTemplateName | string;
+    /** Numero de items skeleton a mostrar */
+    count?: number;
+    /** Template personalizado */
+    customTemplate?: TemplateRef<void>;
+    /** Configuracion adicional */
+    config?: SkeletonTemplateConfig;
+}
+/**
+ * Contexto para el template de items.
+ */
+export interface InfiniteListItemContext<T> {
+    /** El item actual */
+    $implicit: T;
+    /** Indice del item */
+    index: number;
+    /** Si es el primer item */
+    first: boolean;
+    /** Si es el ultimo item */
+    last: boolean;
+    /** Items totales */
+    count: number;
+}
+/**
+ * Metadata para el componente val-infinite-list.
+ */
+export interface InfiniteListMetadata<T = unknown> {
+    /** Configuracion del data source */
+    dataSource: InfiniteListDataSource<T>;
+    /** Direccion de carga */
+    direction?: LoadDirection;
+    /** Items por pagina (default: 20) */
+    pageSize?: number;
+    /** Distancia del borde para activar carga (default: '100px') */
+    threshold?: string;
+    /** Tiempo de debounce para eventos de carga en ms (default: 300) */
+    debounceTime?: number;
+    /** Cargar primera pagina automaticamente al inicializar (default: true) */
+    autoLoad?: boolean;
+    /** Template para renderizar cada item (requerido) */
+    itemTemplate: TemplateRef<InfiniteListItemContext<T>>;
+    /** Template para el indicador de carga en bottom */
+    loadingTemplate?: TemplateRef<void>;
+    /** Template para el indicador de carga en top */
+    topLoadingTemplate?: TemplateRef<void>;
+    /** Configuracion de estado vacio */
+    emptyState?: InfiniteListEmptyState;
+    /** Configuracion de estado de error */
+    errorState?: InfiniteListErrorState;
+    /** Configuracion de skeleton para carga inicial */
+    skeleton?: InfiniteListSkeletonConfig;
+    /** Tipo de spinner */
+    spinnerType?: 'circular' | 'crescent' | 'dots' | 'lines-sharp';
+    /** Color del spinner */
+    color?: Color;
+    /** Usar boton "Cargar mas" en lugar de auto-carga */
+    useLoadMoreButton?: boolean;
+    /** Texto del boton "Cargar mas" */
+    loadMoreText?: string;
+    /** Texto cuando no hay mas items */
+    noMoreText?: string;
+    /** Habilitar pull-to-refresh */
+    enableRefresh?: boolean;
+    /** Configuracion del refresher */
+    refreshConfig?: RefresherMetadata;
+    /** Clase CSS para el contenedor */
+    cssClass?: string;
+    /** Altura maxima (habilita scroll interno) */
+    maxHeight?: string;
+    /** Mostrar divisores entre items */
+    showDividers?: boolean;
+    /** ARIA label para la lista */
+    ariaLabel?: string;
+    /** ARIA description */
+    ariaDescription?: string;
+    /** Identificador unico */
+    token?: string;
+    loadMoreTextKey?: string;
+    noMoreTextKey?: string;
+    contentClass?: string;
+}
+/**
+ * Valores por defecto para infinite list.
+ */
+export declare const DEFAULT_INFINITE_LIST_METADATA: Partial<InfiniteListMetadata>;

package/lib/components/organisms/item-list/item-list.component.d.ts

@@ -0,0 +1,43 @@
+import { EventEmitter, OnInit } from '@angular/core';
+import { IconService } from '../../../services/icons.service';
+import { ListMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class ItemListComponent implements OnInit {
+    states: {
+        ENABLED: "ENABLED";
+        DISABLED: "DISABLED";
+        WORKING: "WORKING";
+        ERROR: "ERROR";
+    };
+    defaultColor: string;
+    /**
+     * Metadatos de la lista y sus elementos.
+     */
+    props: ListMetadata;
+    /**
+     * Evento emitido al hacer click en un elemento de la lista.
+     */
+    onClick: EventEmitter<string>;
+    /**
+     * Evento emitido al hacer click en una acción de un elemento.
+     */
+    onActionClick: EventEmitter<string>;
+    constructor(icon: IconService);
+    ngOnInit(): void;
+    /**
+     * Emite el token del elemento clicado.
+     * @param token Token del elemento
+     */
+    clickHandler(token?: string): void;
+    /**
+     * Emite el token de la acción clicada.
+     * @param token Token de la acción
+     */
+    onActionClickHandler(token?: string): void;
+    /**
+     * Devuelve el color de borde de la lista.
+     */
+    color(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ItemListComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ItemListComponent, "val-item-list", never, { "props": { "alias": "props"; "required": false; }; }, { "onClick": "onClick"; "onActionClick": "onActionClick"; }, never, never, true, never>;
+}