Componentes de la librería sapenlinea-components

Esta librería incluye una colección de componentes reutilizables para formularios, tablas y filtros. A continuación se documenta qué hace cada componente y cómo se utiliza.

Nota: todos los componentes son standalone de Angular, por lo que se importan directamente en el imports del componente donde se usen.

1. lib-date-time-filter (DateTimeFilter)

Qué hace
Componente para gestionar filtros de fecha y fecha/hora a partir de una lista de filtros configurables. Implementa ControlValueAccessor para integrarse con formularios reactivos.

Selector: lib-date-time-filter

Inputs:

• filters: FilterItem[] (requerido)
  • Cada FilterItem define un filtro disponible:
  • label: string – Texto visible en el chip/botón.
  • value: string – Identificador interno del filtro.
  • type: 'date' | 'datetime' – Tipo de filtro.
  • placeholder?: string – Placeholder específico.
  • minDate?: Date / maxDate?: Date – Rango permitido.

Outputs:

• dateSelected: EventEmitter<DateFilterSelection> – Emite { filter: string; value: Date } con el filtro activo y la fecha seleccionada.
• dateChange: EventEmitter<Date | null> – Emite la fecha seleccionada al cambiar (o null si se limpia).

Uso con formularios reactivos:

<lib-date-time-filter
  [filters]="dateFilters"
  (dateSelected)="onDateSelected($event)"
  (dateChange)="onDateChange($event)"
  formControlName="fechaFiltro"
></lib-date-time-filter>

const form = this.fb.group({
  fechaFiltro: [null],
});

dateFilters: FilterItem[] = [
  { label: 'Fecha inicio', value: 'startDate', type: 'date', placeholder: 'Seleccionar fecha inicio' },
  { label: 'Fecha fin', value: 'endDate', type: 'date', placeholder: 'Seleccionar fecha fin' },
];

2. lib-date-time-picker (DateTimePicker)

Qué hace
Componente de selector de fecha o fecha/hora independiente (sin lista de filtros). Implementa ControlValueAccessor.

Selector: lib-date-time-picker

Inputs:

• mode: 'date' | 'datetime' = 'date' – Modo fecha sola o fecha + hora.
• placeholder: string = 'Seleccionar fecha' – Texto cuando no hay valor.
• minDate: Date | null = null – Fecha mínima.
• maxDate: Date | null = null – Fecha máxima.

Outputs:

• dateChange: EventEmitter<Date | null> – Emite la fecha seleccionada.

Ejemplo de uso:

<lib-date-time-picker
  mode="datetime"
  [minDate]="minDate"
  [maxDate]="maxDate"
  (dateChange)="onDateChange($event)"
  formControlName="fechaEvento"
></lib-date-time-picker>

3. lib-dialog-alert-component (DialogAlertComponent)

Qué hace
Componente de diálogo/modal de alerta/confirmación, con opción de exigir una razón (select + textarea) antes de confirmar.

Selector: lib-dialog-alert-component

Inputs:

• title: string = 'Mensaje' – Título del diálogo.
• message: string – Mensaje principal.
• type: 'warning' | 'error' | 'info' | 'success' = 'info' – Tipo visual de alerta.
• action?: string – Acción asociada (ej. 'deactivate', 'delete', 'anulate', 'sancionar', 'active').
• showReason: boolean = false – Forzar mostrar campo de razón.
• confirm: boolean = false – Indica si muestra botón de confirmación principal.
• confirmLabel: string = 'Aceptar' – Texto del botón de confirmación.
• reasonOptions: { label: string; value: any }[] = [] – Opciones para el campo "Razón" cuando se requiere.

Outputs:

• close: EventEmitter<boolean> – Emite true al confirmar y false al cancelar.
• confirmReason: EventEmitter<string | undefined> – Emite la razón seleccionada (o undefined).

Ejemplo de uso:

<lib-dialog-alert-component
  [title]="'Desactivar usuario'"
  [message]="'¿Está seguro que desea desactivar este usuario?'"
  type="warning"
  action="deactivate"
  [showReason]="true"
  [reasonOptions]="reasonOptions"
  (close)="onClose($event)"
  (confirmReason)="onConfirmReason($event)"
></lib-dialog-alert-component>

4. lib-dynamic-form-fields (DynamicFormFields)

Qué hace
Componente que renderiza dinámicamente campos de formulario a partir de una configuración (sections y fields), soportando textos, números, selects, checkboxes, radios, textarea, fechas y más. Maneja lógicas de copiado automático entre campos.

Selector: lib-dynamic-form-fields

Inputs:

• form: FormGroup (requerido) – Formulario reactivo que contiene los controles.
• sections: SectionConfig[] = [] – Secciones y campos del formulario.
• compact: boolean = false – Permite estilos compactos.

Tipos principales:

export interface FieldConfig {
  key: string;
  label?: string;
  type: 'text' | 'email' | 'number' | 'date' | 'datetime-local' | 'select' | 'radio' | 'checkbox' | 'textarea' | 'disabled' | 'password' | 'time' | 'file';
  placeholder?: string;
  required?: boolean;
  options?: { value: string | number | boolean; label: string }[];
  col?: number;
  disabled?: boolean;
  readonly?: boolean;
  matchWith?: string;
  copyFrom?: string;
  pattern?: string;
  patternType?: 'numbers' | 'phone' | 'custom' | 'text' | 'username' | 'alphanumeric';
  minDate?: Date;
  maxDate?: Date;
}

export interface SectionConfig {
  title?: string;
  description?: string;
  fields: FieldConfig[];
}

Ejemplo de uso:

<lib-dynamic-form-fields
  [form]="form"
  [sections]="sections"
  [compact]="true"
></lib-dynamic-form-fields>

5. lib-input-text-filter (InputTextFilter)

Qué hace
Componente de filtro por texto con chips de filtros configurables (por ejemplo, buscar por nombre, documento, etc.). Implementa ControlValueAccessor.

Selector: lib-input-text-filter

Inputs:

• filters: FilterItem[] (requerido) – Filtros disponibles de texto.
• clearTrigger: number = 0 – Al incrementar este valor desde el padre se limpian todos los filtros.

Outputs:

• filterSelected: EventEmitter<{ filter: string; value: string }> – Emite el filtro y el valor aplicado.
• valueChange: EventEmitter<string | null> – Emite el valor actual del filtro de texto.

Ejemplo de uso:

<lib-input-text-filter
  [filters]="textFilters"
  [clearTrigger]="clearVersion"
  (filterSelected)="onTextFilter($event)"
  (valueChange)="onTextValueChange($event)"
></lib-input-text-filter>

6. lib-input-number-filter (InputNumberFilter)

Qué hace
Componente de filtro numérico con múltiples chips (ej. "monto mínimo", "monto máximo"). Implementa ControlValueAccessor.

Selector: lib-input-number-filter

Inputs:

• filters: FilterItem[] (requerido) – Filtros numéricos.
• clearTrigger: number = 0 – Limpia filtros al cambiar.

Outputs:

• filterSelected: EventEmitter<{ filter: string; value: string }> – Filtro seleccionado y valor.
• valueChange: EventEmitter<string | null> – Valor numérico aplicado.

Ejemplo de uso:

<lib-input-number-filter
  [filters]="numberFilters"
  (filterSelected)="onNumberFilter($event)"
></lib-input-number-filter>

7. lib-input-select-filter (InputSelectFilter)

Qué hace
Componente de filtro basado en select con chips. Permite seleccionar una opción por cada tipo de filtro configurado.

Selector: lib-input-select-filter

Inputs:

• filters: FilterItem[] (requerido) – Deben incluir options con { label, value }.
• clearTrigger: number = 0 – Limpia filtros.

Outputs:

• filterSelected: EventEmitter<{ filter: string; value: string }> – Filtro e identificador de opción seleccionada.
• valueChange: EventEmitter<string | null> – Valor del select actual.

Ejemplo de uso:

<lib-input-select-filter
  [filters]="statusFilters"
  (filterSelected)="onStatusFilter($event)"
></lib-input-select-filter>

8. lib-select-custom-search (SelectCustomSearch)

Qué hace
Componente de select con buscador y filtrado en tiempo real sobre las opciones. Implementa ControlValueAccessor.

Selector: lib-select-custom-search

Inputs:

• options: { value: any; label: string }[] = [] – Opciones disponibles.
• placeholder: string = 'Seleccionar opción' – Texto cuando no hay selección.

Outputs:

• selectionChange: EventEmitter<Option | null> – Emite la opción seleccionada (o null).

Ejemplo de uso:

<lib-select-custom-search
  [options]="userOptions"
  (selectionChange)="onUserSelected($event)"
  formControlName="usuarioId"
></lib-select-custom-search>

9. lib-pagination (PaginationComponent)

Qué hace
Componente de paginación para tablas o listas, con opción de selector de tamaño de página.

Selector: lib-pagination

Inputs:

• page: number = 1 – Página actual.
• pageSize: number = 10 – Elementos por página (valor inicial).
• totalItems: number = 0 – Total de elementos.
• showPageSizeSelector: boolean = false – Muestra/oculta el selector de tamaño de página.
• pageSizeOptions: number[] = [5, 10, 20, 50] – Opciones disponibles.

Outputs:

• pageChange: EventEmitter<number> – Emite la nueva página seleccionada.
• pageSizeChange: EventEmitter<number> – Emite el nuevo tamaño de página.

Ejemplo de uso:

<lib-pagination
  [page]="currentPage"
  [pageSize]="pageSize"
  [totalItems]="totalItems"
  [showPageSizeSelector]="true"
  [pageSizeOptions]="[10, 20, 50]"
  (pageChange)="onPageChange($event)"
  (pageSizeChange)="onPageSizeChange($event)"
></lib-pagination>

10. lib-table (Table)

Qué hace
Componente de tabla dinámica con soporte de ordenamiento, acciones por fila y estado con tonos configurables.

Selector: lib-table

Inputs:

• columns: TableColumn[] (requerido) – Definición de columnas.
• data: TableRow[] (requerido) – Datos a mostrar.
• actions: TableAction[] | ((row: TableRow) => TableAction[]) – Acciones por fila.
• showActions: boolean = true – Muestra/oculta columna de acciones.
• statusToneMap: StatusToneMap – Mapa para estilo de estados (success, error, warning, info, neutral).

Outputs:

• optionSelected: EventEmitter<{ action: string; row: TableRow }> – Emite la acción seleccionada y la fila.

Ejemplo de uso:

<lib-table
  [columns]="columns"
  [data]="rows"
  [actions]="rowActions"
  [statusToneMap]="statusToneMap"
  (optionSelected)="onTableAction($event)"
></lib-table>

11. lib-modal-form (ModalForm)

Qué hace
Componente de modal genérico de formulario multi-paso, que delega la navegación de pasos a lib-wizard-form.

Selector: lib-modal-form

Inputs:

• title: string = 'Formulario' – Título del modal.
• submitLabel: string = 'Guardar' – Texto del botón de guardar.
• form: FormGroup – Formulario reactivo principal.
• steps: ModalFormStep[] = [] – Pasos del formulario.

export interface ModalFormStep {
  key: string;          // Nombre del subgrupo dentro de form
  label: string;        // Texto visible del paso
  component: Type<any>; // Componente que se renderiza en ese paso
}

Outputs:

• onSubmit: EventEmitter<any> – Emite el valor completo del formulario.
• onCancel: EventEmitter<void> – Emite cuando se cancela el modal.

Ejemplo de uso:

<lib-modal-form
  [title]="'Registro de usuario'"
  [submitLabel]="'Guardar'"
  [form]="form"
  [steps]="steps"
  (onSubmit)="onSubmit($event)"
  (onCancel)="onCancel()"
></lib-modal-form>

12. lib-wizard-form (WizardForm)

Qué hace
Componente que orquesta la lógica de pasos de un formulario tipo wizard, validando el sub-formulario del paso actual y notificando si se puede continuar.

Selector: lib-wizard-form

Inputs:

• form: FormGroup – Formulario principal que contiene subgrupos.
• currentStep: number = 1 – Paso actual (1-based).
• steps: ModalFormStep[] = [] – Definición de los pasos.

Outputs:

• canContinue: EventEmitter<boolean> – Emite si el grupo del paso actual es válido.

Uso habitual (interno de lib-modal-form):
No suele consumirse directamente, pero puede utilizarse si se quiere un wizard sin modal.

Si necesitas que adapte los ejemplos a un caso concreto de tu aplicación (por ejemplo, filtros específicos o estructura de formularios), coméntame qué escenario quieres documentar y lo ajustamos.