Versión: 1.0.0
Última actualización: Abril 2026
Stack: Angular 21+ | TypeScript | SCSS | Storybook 10.2.17
Chromatic: 16.0.0
Ruta: Components / Alert
🔗 Ver en Chromatic:
Descripción: Componente para mostrar mensajes contextuales con diferentes estados visuales.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
type |
'success' \| 'error' \| 'warning' \| 'info' |
- | Estado visual. Gestiona automáticamente la semántica ARIA |
title |
string |
- | Título descriptivo opcional |
message |
string |
- | Contenido principal del mensaje |
autoClose |
boolean |
false |
Cierre automático después del tiempo definido |
duration |
number |
- | Tiempo en ms antes de cerrar |
Ejemplos de implementación:
Texto Info:
this.alertService.show({
type: 'info',
title: 'Información',
message: 'Este es un mensaje informativo'
});
Texto Success:
this.alertService.show({
type: 'success',
title: '¡Éxito!',
message: 'Operación completada correctamente',
autoClose: true,
duration: 3000
});
Texto Error:
this.alertService.show({
type: 'error',
title: 'Error',
message: 'Ha ocurrido un problema al procesar la solicitud',
autoClose: true,
duration: 8000
});
Ruta: Components / Button
🔗 Ver en Chromatic:
Descripción: Botón con múltiples variantes de estilo, soporte de iconos y estados de carga.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
variant |
'primary' \| 'secondary' \| 'icon' \| 'success' \| 'warning' \| 'danger' |
'primary' |
Estilo visual del botón |
label |
string |
- | Texto del botón |
loading |
boolean |
false |
Estado de carga, deshabilita el click |
disabled |
boolean |
false |
Deshabilita el botón |
type |
'button' \| 'submit' |
'button' |
Tipo HTML del botón |
prefixIcon |
string |
- | Icono a la izquierda |
suffixIcon |
string |
- | Icono a la derecha |
iconSize |
number |
- | Tamaño de iconos en px |
fullWidth |
boolean |
false |
Expande al 100% del contenedor |
width |
string |
- | Ancho personalizado (ej. 200px) |
ariaLabel |
string |
- | Etiqueta de accesibilidad |
Eventos: clicked
Ejemplos de implementación:
1. <nebula-button variant="primary" label="Guardar" prefixIcon="save" (clicked)="onSave()"></nebula-button>
2. <nebula-button type="submit" label="Enviar" [loading]="isLoading" variant="success"></nebula-button>
3. <nebula-button variant="danger" label="Eliminar" prefixIcon="trash" (clicked)="openConfirmDelete()"></nebula-button>
Ruta: Components / Grid Card
🔗 Ver en Chromatic:
Descripción: Cuadrícula de tarjetas para navegación o selección de módulos.
| Prop | Tipo | Descripción |
|---|---|---|
items |
GridCardItem[] |
Arreglo de tarjetas (title, subtitle, icon, badgeText, route) |
loading |
boolean |
Muestra esqueletos de carga |
Eventos: cardClick
Ruta: Components / Table
🔗 Ver en Chromatic:
Descripción: Tabla de datos con ordenamiento, paginación, selección y acciones por fila.
| Prop | Tipo | Descripción |
|---|---|---|
config |
TableConfig<T> |
Configuración de columnas y acciones |
data |
T[] |
Datos a mostrar |
selectable |
boolean |
Permite selección de filas |
pageSize |
number |
Registros por página |
searchTerm |
string |
Filtro global |
sortColumn |
string |
Columna de ordenamiento inicial |
sortDirection |
'asc' \| 'desc' |
Dirección del orden |
Eventos: action, selectionChange, sortChange, searchChange, pageChange, rowClick
Ruta: Forms / Checkbox
🔗 Ver en Chromatic:
Descripción: Casilla de verificación con soporte para estados indeterminados, validación y accesibilidad ARIA completa.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
label |
string |
- | Texto descriptivo que acompaña al checkbox |
checked |
boolean |
false |
Estado de selección del componente |
indeterminate |
boolean |
false |
Estado visual intermedio (ni seleccionado ni deseleccionado) |
disabled |
boolean |
false |
Descriptivo de si el control está inhabilitado |
required |
boolean |
false |
Indica si el campo es obligatorio para el formulario |
errorMsg |
string |
- | Mensaje de error. Se vincula automáticamente al checkbox mediante aria-describedby para accesibilidad |
requiredMsg |
string |
- | Mensaje específico para el error de campo obligatorio |
Eventos: change
Ejemplos de implementación:
1. <lib-checkbox label="Acepto los términos y condiciones de servicio" [checked]="false" (change)="onChange($event)"></lib-checkbox>
2. <lib-checkbox label="Seleccionar todo" [checked]="false" [indeterminate]="true" (change)="onSelectAll($event)"></lib-checkbox>
3. <lib-checkbox label="Autorizo el tratamiento de mis datos personales" [required]="true" requiredMsg="Es indispensable autorizar el tratamiento de datos para continuar con el trámite." (change)="onChange($event)"></lib-checkbox>
Ruta: Forms / DatePicker
Descripción: Selector de fecha con calendario desplegable, formato personalizado y rangos.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
label |
string |
- | Etiqueta del campo |
value |
Date \| string |
- | Fecha seleccionada |
placeholder |
string |
- | Texto de ayuda |
format |
string |
'YYYY-MM-DD' |
Formato de visualización |
minDate / maxDate |
Date |
- | Límites de selección |
disabled |
boolean |
false |
Inhabilita el picker |
required |
boolean |
false |
Campo obligatorio |
range |
boolean |
false |
Modo selección de rango |
Eventos: valueChange, open, close
Ruta: Forms / FileUpload
Descripción: Componente para carga de archivos con preview, validación de tipos y progreso.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
label |
string |
- | Texto del botón/área |
accept |
string |
- | Tipos MIME aceptados (ej. '.pdf,.doc') |
multiple |
boolean |
false |
Permite múltiples archivos |
maxSize |
number |
- | Tamaño máximo en MB |
showPreview |
boolean |
true |
Muestra vista previa de imágenes |
disabled |
boolean |
false |
Inhabilita la carga |
Eventos: fileSelect, fileRemove, uploadProgress
Ruta: Forms / Input
🔗 Ver en Chromatic:
Descripción: Campo de entrada de texto con validación, máscaras, iconos y soporte para accesibilidad ARIA.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
label |
string |
- | Texto descriptivo que aparece sobre el campo de entrada |
type |
'text' \| 'password' \| 'email' \| 'number' |
'text' |
Tipo de dato esperado. Si es password, gestiona automáticamente etiquetas ARIA para el botón de visibilidad |
placeholder |
string |
- | Texto de ayuda visual dentro del campo vacío |
value |
string |
- | Valor del campo (soporta two-way binding) |
errorMsg |
string |
- | Mensaje de error personalizado para validación general |
requiredMsg |
string |
- | Mensaje que aparece cuando se omite un campo obligatorio |
errorStateMatcher |
object |
- | Estrategia personalizada para la visualización de errores |
disabled |
boolean |
false |
Deshabilita la edición y el foco del campo |
required |
boolean |
false |
Marca el campo como obligatorio para el formulario |
prefixIcon |
string |
- | Icono opcional al inicio del campo (ej. Search, User). Se oculta automáticamente para lectores de pantalla |
suffixIcon |
string |
- | Icono opcional al final del campo. Se oculta automáticamente para lectores de pantalla |
prefixText |
string |
- | Texto fijo al inicio (ej. $ para moneda) |
suffixText |
string |
- | Texto fijo al final (ej. .com, kg) |
clearable |
boolean |
false |
Añade un botón para borrar el contenido. Incluye etiqueta ARIA traducida automáticamente |
Ejemplos de implementación:
1. <lib-input label="Identificación de usuario" placeholder="Ingrese su número de documento o correo" type="text" value=""></lib-input>
2. <lib-input label="Contraseña" type="password" placeholder="Mínimo 8 caracteres" value=""></lib-input>
3. <lib-input label="Búsqueda" placeholder="Buscar componentes..." prefixIcon="Search" value=""></lib-input>
4. <lib-input label="Peso" placeholder="0.00" type="number" suffixText="kg" value=""></lib-input>
5. <lib-input label="Precio" placeholder="0.00" type="number" prefixText="$" suffixText="USD" value=""></lib-input>
6. <lib-input label="Email" type="email" placeholder="user@example.com" errorMsg="El formato del correo es inválido" value="invalid-email"></lib-input>
7. <lib-input label="Campo Obligatorio" placeholder="Déjame vacío y sal del foco..." [required]="true" value=""></lib-input>
8. <lib-input label="Correo institucional" type="email" placeholder="usuario@entidad.gov.co" [disabled]="true" value="usuario@entidad.gov.co"></lib-input>
9. <lib-input label="Campo con limpieza" placeholder="Escribe algo para ver el botón..." [clearable]="true" value=""></lib-input>
Ruta: Forms / Radio
🔗 Ver en Chromatic:
Descripción: Grupo de botones de opción para selección única con soporte para disposición horizontal/vertical, validación y accesibilidad.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
label |
string |
- | Etiqueta opcional para el grupo de radio buttons |
name |
string |
- | Obligatorio. Nombre único para agrupar los radio buttons (necesario para la selección única) |
options |
Array<{label: string, value: any}> |
- | Lista de opciones disponibles (etiqueta y valor) |
value |
any |
- | Valor seleccionado actualmente (two-way binding) |
disabled |
boolean |
false |
Descriptivo de si el grupo de opciones está inhabilitado |
required |
boolean |
false |
Marca el grupo como obligatorio para validación |
errorMsg |
string |
- | Mensaje de error general para el grupo |
requiredMsg |
string |
- | Mensaje específico para cuando no se selecciona ninguna opción obligatoria |
vertical |
boolean |
false |
Si es true, las opciones se muestran una debajo de otra |
Eventos: selectionChange
Ejemplos de implementación:
const PLAN_OPTIONS = [
{ label: 'Básico', value: 'basic' },
{ label: 'Profesional', value: 'pro' },
{ label: 'Empresarial', value: 'enterprise' }
];
1. <lib-radio name="plan" [options]="PLAN_OPTIONS" [vertical]="false" (selectionChange)="onPlanChange($event)"></lib-radio>
2. <lib-radio name="plan-vertical" [options]="PLAN_OPTIONS" [vertical]="true" (selectionChange)="onPlanChange($event)"></lib-radio>
3. <lib-radio name="plan-disabled" [options]="PLAN_OPTIONS" [disabled]="true" (selectionChange)="onPlanChange($event)"></lib-radio>
4. <lib-radio name="plan-preselected" [options]="PLAN_OPTIONS" [value]="'pro'" (selectionChange)="onPlanChange($event)"></lib-radio>
5. <lib-radio label="Selecciona tu Plan de Suscripción" name="plan-required" [options]="PLAN_OPTIONS" [required]="true" (selectionChange)="onPlanChange($event)"></lib-radio>
Ruta: Forms / Select
Descripción: Selector desplegable con soporte para búsqueda, agrupación y carga asíncrona.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
label |
string |
- | Etiqueta del campo |
options |
SelectOption[] |
- | Lista de opciones |
value |
any |
- | Valor seleccionado |
placeholder |
string |
- | Texto cuando no hay selección |
searchable |
boolean |
false |
Habilita búsqueda en opciones |
multiple |
boolean |
false |
Permite selección múltiple |
disabled |
boolean |
false |
Inhabilita el selector |
required |
boolean |
false |
Campo obligatorio |
error |
string |
- | Mensaje de error |
loading |
boolean |
false |
Estado de carga para opciones asíncronas |
Eventos: valueChange, open, close
Ruta: Forms / Textarea
Descripción: Área de texto multilínea con auto-resize y contador de caracteres.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
label |
string |
- | Etiqueta del campo |
value |
string |
- | Contenido del textarea |
placeholder |
string |
- | Texto de ayuda |
rows |
number |
4 |
Altura inicial en filas |
maxLength |
number |
- | Límite de caracteres |
showCounter |
boolean |
false |
Muestra contador de caracteres |
autoResize |
boolean |
true |
Ajusta altura según contenido |
disabled |
boolean |
false |
Inhabilita el campo |
Eventos: valueChange, blur
Ruta: Layout / Breadcrumb
🔗 Ver en Chromatic:
| Prop | Tipo | Descripción |
|---|---|---|
items |
BreadcrumbItem[] |
Lista de niveles de navegación |
separator |
string |
Nombre del icono separador |
Eventos: navigate
Ruta: Layout / Footer
🔗 Ver en Chromatic:
| Prop | Tipo | Descripción |
|---|---|---|
variant |
'default' \| 'login' |
Variante de diseño |
status |
string |
Estado de conexión |
Ruta: Layout / Header
🔗 Ver en Chromatic:
| Prop | Tipo | Descripción |
|---|---|---|
title |
string |
Título principal |
user |
string |
Nombre del usuario |
isDarkMode |
boolean |
Estado del tema |
showSearch |
boolean |
Visibilidad de búsqueda |
logoUrl / logoAlt |
string |
Logo personalizado |
Eventos: search, searchSubmit, darkModeToggle, refresh, notificationsClick, profileClick, logout
Ruta: Layout / Search
🔗 Ver en Chromatic:
Descripción: Campo de búsqueda con debounce integrado para optimizar llamadas a API y experiencia de usuario fluida.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
placeholder |
string |
- | Texto de ayuda dentro del buscador |
disabled |
boolean |
false |
Inhabilita la entrada de texto en el buscador |
debounceMs |
number |
300 |
Tiempo de espera en milisegundos para emitir el evento de búsqueda |
searchTerm |
string |
- | Valor actual de la búsqueda (two-way binding) |
Eventos: search, searchSubmit
Ejemplos de implementación:
1. <nebula-search placeholder="Buscar registros..." [searchTerm]="''" [debounceMs]="300" (search)="onSearch($event)" (searchSubmit)="onSearchSubmit($event)"></nebula-search>
2. <nebula-search placeholder="Búsqueda no disponible..." [disabled]="true"></nebula-search>
3. <nebula-search placeholder="Buscar..." [(searchTerm)]="initialValue" [debounceMs]="300" (search)="onSearch($event)"></nebula-search>
Ruta: Layout / Sidebar
🔗 Ver en Chromatic:
| Prop | Tipo | Descripción |
|---|---|---|
menuItems |
MenuItem[] |
Estructura jerárquica del menú |
collapsed |
boolean |
Estado colapsado |
isLoading |
boolean |
Estado de carga |
activeItemIds |
string[] |
Rutas activas |
Eventos: itemClick
Ruta: Layout / Tabs
🔗 Ver en Chromatic:
| Prop | Tipo | Descripción |
|---|---|---|
activeId |
string |
Pestaña activa |
showClose |
boolean |
Muestra botones de cierre |
tabs |
TabItem[] |
Configuración imperativa |
Eventos: tabChange, onClose
Ruta: Layout / Dialog / Confirmación
🔗 Ver en Chromatic:
Diálogo de confirmación con diferentes tipos visuales:
info - Informaciónsuccess - Éxitowarning - Advertenciaerror - ErrorConfiguración vía DialogService:
dialogService.open(ConfirmDialogComponent, {
data: {
title: 'Título',
message: 'Mensaje',
type: 'warning',
primaryText: 'Aceptar',
secondaryText: 'Cancelar'
},
size: 'sm'
});
Ejemplos de implementación:
this.dialogService.open(ConfirmDialogComponent, {
data: {
title: 'Confirmar acción',
message: '¿Estás seguro de continuar con esta operación?',
type: 'info',
primaryText: 'Continuar',
secondaryText: 'Cancelar'
},
size: 'sm'
}).onClosed.subscribe(result => {
if (result) this.proceedWithAction();
});
this.dialogService.open(ConfirmDialogComponent, {
data: {
title: 'Eliminar registro',
message: 'Esta acción no se puede deshacer. ¿Deseas eliminar el elemento seleccionado?',
type: 'warning',
primaryText: 'Eliminar',
secondaryText: 'Mantener'
},
size: 'md'
}).onClosed.subscribe(confirmed => {
if (confirmed) this.deleteItem();
});
Ruta: Layout / Dialog / Formulario
Descripción: Diálogo modal para formularios con validación, submit asíncrono y manejo de estados.
| Prop (vía DialogService) | Tipo | Descripción |
|---|---|---|
title |
string |
Título del formulario |
component |
Type<any> |
Componente del formulario a renderizar |
data |
any |
Datos iniciales para el formulario |
submitText |
string |
Texto del botón de envío |
cancelText |
string |
Texto del botón de cancelar |
size |
'sm' \| 'md' \| 'lg' \| 'xl' |
Tamaño del modal |
Eventos del diálogo: submit, cancel, closed