aesy-components

Librería de componentes para Angular (20, 21 y 22): standalone, OnPush, basada en signals e integrada con Angular Forms. Todo el aspecto se personaliza con variables CSS.

Componentes

| Componente | Selector | Documentación | |---|---|---| | Accordion | aesy-accordion, aesy-accordion-item | AccordionComponent.md | | Button | aesy-button | ButtonComponent.md | | Checkbox | aesy-checkbox | CheckboxComponent.md | | Datepicker | aesy-datepicker | DatepickerComponent.md | | Dialog | aesy-dialog, aesy-dialog-actions, DialogService | DialogComponent.md | | Input number | aesy-input-number | InputNumberComponent.md | | Input text | aesy-input-text | InputTextComponent.md | | Radio button | aesy-radio-button | RadioButtonComponent.md | | Select | aesy-select | SelectComponent.md | | Stepper | aesy-stepper, aesy-step | StepperComponent.md | | Table | aesy-table, ng-template[aesyTableCell] | TableComponent.md | | Toast | ToastService | ToastService.md | | Textarea | aesy-textarea | TextareaComponent.md |

Para verlos funcionando, con todos sus casos de uso, arranca el showcase del repositorio con npm run debugapp.

Instalación

npm install aesy-components

Dependencias (peer)

| Paquete | Versión | |---|---| | @angular/core, @angular/common | ^20.0.0 \|\| ^21.0.0 \|\| ^22.0.0 | | @angular/forms | Igual | | @angular/cdk | Igual (overlay del select y del datepicker, drag & drop de la tabla) | | @angular/router | Igual (solo lo usa la tabla, para persistFilters) |

Funciona con y sin zone.js. La librería se compila con Angular 20 (la versión mínima); por eso el repositorio está en Angular 20 y no en la última.

Tema CSS

Los controles de formulario comparten variables comunes (--aesy-form-controls-*) que se definen en :root. Importa el tema una vez en los estilos globales de tu aplicación:

/* styles.css */
@import 'aesy-components/theme/public-theme.css';

Para cambiar el aspecto de todos los controles, sobrescribe esas variables en :root; para uno solo, decláralas sobre el propio componente:

:root {
  --aesy-form-controls-radius: 0.75rem;
  --aesy-form-controls-border-color-focus: #3b3bf0;
}

aesy-select {
  --aesy-select-dropdown-option-selected-background: #3b3bf0;
}

Cada componente tiene además sus variables propias con el prefijo --aesy-<componente>-, documentadas en su .md. Más detalle sobre cómo sobrescribirlas en how-to-override-classes.md.

Uso

Los componentes son standalone: impórtalos directamente donde los uses.

import { ButtonComponent, SelectComponent, SelectOption } from 'aesy-components';

@Component({
  selector: 'app-profile',
  imports: [ButtonComponent, ReactiveFormsModule, SelectComponent],
  template: `
    <aesy-select label="País" [options]="COUNTRY_OPTIONS" [formControl]="countryControl" />
    <aesy-button type="success" label="Guardar" [disabled]="countryControl.invalid" (buttonClick)="onSaveButtonClicked()" />
  `
})
export class ProfileComponent {
  protected readonly COUNTRY_OPTIONS: SelectOption[] = [
    { label: 'España', value: 'ES' },
    { label: 'Francia', value: 'FR' }
  ];
  protected readonly countryControl = new FormControl<string | null>(null, { validators: [Validators.required] });

  protected onSaveButtonClicked(): void {}
}

Con o sin Angular Forms

Todos los controles de formulario funcionan de dos formas:

• Con Angular Forms: [formControl] o formControlName. Detectan Validators.required (asterisco incluido) y muestran el mensaje de error al tocar el campo. Los validadores propios pueden definir su texto con { miError: { message: 'Texto del error' } }.
• Sin Angular Forms: [(value)] y, para el error, invalid + errorMessage.

Tipos exportados

Además de los componentes, la librería exporta sus tipos públicos: AccordionAppearance, AccordionTogglePosition, AccordionHeadingLevel, ButtonType, DialogConfig, DialogRef, DialogRole, DialogSize, AESY_DIALOG_DATA, IconPosition, InputTextType, TextareaResize, RadioButtonOption, SelectOption, TableConfig, TableColumn (TableDataColumn | TableCustomColumn), TableColumnType, TableColumnAlign, TableSelectableConfig, TableCellContext, PaginationMeta, PaginationMetaRowsPerPage, RequestData, RowOrderChange, StepperOrientation, StepperLabelPosition, StepperSelectionChange, ToastOptions, ToastRef, ToastType, ToastPosition, ToastDismissReason, ToastGlobalConfig y provideAesyToastConfig.

Desarrollo

# Compilar la librería en dist/aesy-components
npm run generate-lib

# Compilar en modo watch y arrancar el showcase
npm run debugapp

# Simular la publicación: compila la librería y muestra qué se incluiría, sin publicar
# (antes de los dos: npm login y el debugapp parado)
npm run publish-lib-dry-run

# Publicar: sube la versión minor (0.1.0 → 0.2.0), compila y publica.
# Después, commitea el package.json de la librería con la versión nueva.
npm run publish-lib

Para añadir un componente nuevo, sigue el checklist del README del repositorio. Los problemas conocidos y mejoras pendientes están en PENDIENTES.md.

Licencia

MIT © amoradev