DESY Angular

Component library for building accessible, consistent web applications following the official design guidelines of the Government of Aragón (Spain). Built with Angular, Tailwind CSS, and desy-html.

Features

• Accessible components: ARIA patterns, keyboard navigation, screen reader support.
• Consistent design: Based on the official DESY Design System.
• Modern stack: Angular 20, Tailwind CSS v4, desy-html.
• Ready for production: Use in robust apps or prototypes.

Quick Links

• Documentation
• Repository
• Starter Project

📖 Live Examples: https://desy.aragon.es/desy-angular

🎨 Design System: https://desy.aragon.es/

Prerequisites

• Node.js >=20.19.2 <22.0.0 || >=22.11.0 <23.0.0 || >=24.0.0
• npm ≥10.0.0
• Angular 20.x

Getting Started

npm install desy-angular

Peer Dependencies

You must install the following peer dependencies in your project:

| Package | Supported Version | |---------------------------------|---------------------| | @angular/animations | >=20.0.0 <21 | | @angular/cdk | >=20.0.0 <21 | | @angular/common | >=20.0.0 <21 | | @angular/core | >=20.0.0 <21 | | @angular/forms | >=20.0.0 <21 | | @angular/platform-browser | >=20.0.0 <21 | | @angular/platform-browser-dynamic | >=20.0.0 <21 | | @angular/router | >=20.0.0 <21 | | desy-html | 16.0.4 |

Note: These are not installed automatically. You must ensure your project uses compatible versions.

Quick Start

Import the main module in your Angular application:

import { DesyAngularModule } from 'desy-angular';

@NgModule({
  imports: [
    DesyAngularModule,
    // ...
  ],
})
export class AppModule {}

Or import only the modules you need:

import { DesyButtonsModule, DesyFormsModule } from 'desy-angular';

@NgModule({
  imports: [
    DesyButtonsModule,
    DesyFormsModule,
    // ...
  ],
})
export class AppModule {}

Available Modules

| Module | Components | |--------|------------| | DesyButtonsModule | Button, ButtonLoader, Dropdown, Listbox, Pill, Toggle | | DesyCommonsModule | Content, Description, Divider, Icon, Title | | DesyFormsModule | Input, Textarea, Select, Checkboxes, Radios, DateInput, Datepicker, FileUpload, SearchBar, Fieldset, Label, Hint, ErrorMessage, CharacterCount, InputGroup, Tree | | DesyModalsModule | Modal, Dialog | | DesyNavModule | Header, HeaderAdvanced, HeaderMini, Footer, Breadcrumbs, Nav, MenuHorizontal, MenuVertical, MenuNavigation, Menubar, LinksList, Notification, SkipLink, ErrorSummary | | DesyPaginationModule | Pagination | | DesyTablesModule | Table, TableAdvanced, Treegrid | | DesyViewsModule | Accordion, AccordionHistory, Alert, Card, Collapsible, DescriptionList, Details, Item, MediaObject, Status, StatusItem, Tabs, Tooltip | | SharedExternalModule | Spinner |

Usage Example

<!-- Button component -->
<desy-button
  text="Click me"
  classes="c-button--primary"
  (clickEvent)="handleClick($event)">
</desy-button>

<!-- Input with label and hint -->
<desy-label text="Email address" for="email"></desy-label>
<desy-hint text="We'll use this to contact you"></desy-hint>
<desy-input id="email" type="email" name="email"></desy-input>

Accessibility

• Proper ARIA attributes and roles
• Keyboard navigation support
• Screen reader compatibility
• Focus management

Browser Support

Modern browsers. For details, see the DESY documentation.

Starter Project

For a quick start, use the desy-angular-starter project.

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Open a pull request

Note: If you are maintaining the library or modifying the demo, run npm run code to update generated code (required for PRs that change demo components).

License

This project is licensed under the EUPL-1.2 License. This covers both the codebase and any sample code in the documentation.

Maintainers

DESY Angular is maintained by Servicios Digitales de Aragón (SDA), Spain.

📧 Contact: [email protected]