desy-angular 17.3.0 → 18.0.0

package/README.md

@@ -1,22 +1,155 @@
-# README #
+# DESY Angular
 
-Desy Angular contains the code you need to start building your Angular app for Gobierno de Aragón. You can see the documentation into [https://paega2.atlassian.net/wiki/spaces/AreaUsuariosIntegradores/pages/2996797605/3.-+DESY+-+Sistema+de+dise+o+del+Gobierno+de+Arag+n](https://paega2.atlassian.net/wiki/spaces/AreaUsuariosIntegradores/pages/2996797605/3.-+DESY+-+Sistema+de+dise+o+del+Gobierno+de+Arag+n)
+![Version](https://img.shields.io/badge/version-18.0.0-blue.svg)
+![Angular](https://img.shields.io/badge/Angular-20-red.svg?logo=angular&logoColor=white)
+![Node Version](https://img.shields.io/badge/node-%3E%3D20.19.2%20%3C22.0.0%20%7C%7C%20%3E%3D22.11.0%20%3C23.0.0%20%7C%7C%20%3E%3D24.0.0-green.svg?logo=node.js&logoColor=white)
+![npm](https://img.shields.io/badge/npm-%3E%3D10-red.svg?logo=npm&logoColor=white)
+![License](https://img.shields.io/badge/license-EUPL--1.2-lightgrey.svg)
 
-See live examples of Desy Frontend components: [https://desy.aragon.es/desy-angular](https://desy.aragon.es/desy-angular)
 
-This project is built upon the Desy Frontend project: [https://desy.aragon.es/](https://desy.aragon.es/)
+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.
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 19
+## Features
 
+- **Accessible components**: ARIA patterns, keyboard navigation, screen reader support.
+- **Consistent design**: Based on the official [DESY Design System](https://desy.aragon.es/).
+- **Modern stack**: Angular 20, Tailwind CSS v4, desy-html.
+- **Ready for production**: Use in robust apps or prototypes.
 
-### How to set up? ###
-This guide explains how to setup your Angular project to begin using Desy Angular.
-* Run `npm install desy-angular` 
-* Dependencies: Node.js v22.21.1, Angular 19
+## Quick Links
 
-### Contact the team ###
+- [Documentation](https://desy.aragon.es/)
+- [Repository](https://bitbucket.org/sdaragon/desy-angular/)
+- [Starter Project](https://bitbucket.org/sdaragon/desy-angular-starter/)
 
-* Desy Angular is maintained by a team at Servicios Digitales de Aragón (Spain).
+📖 **Live Examples:** [https://desy.aragon.es/desy-angular](https://desy.aragon.es/desy-angular)
 
-### License ###
-Unless stated otherwise, the codebase is released under the [EUPL-1.2 License](https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12). This covers both the codebase and any sample code in the documentation.
+🎨 **Design System:** [https://desy.aragon.es/](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
+
+```bash
+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                      | 15.0.3              |
+
+> **Note:** These are not installed automatically. You must ensure your project uses compatible versions.
+
+## Quick Start
+
+Import the main module in your Angular application:
+
+```typescript
+import { DesyAngularModule } from 'desy-angular';
+
+@NgModule({
+  imports: [
+    DesyAngularModule,
+    // ...
+  ],
+})
+export class AppModule {}
+```
+
+Or import only the modules you need:
+
+```typescript
+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
+
+```html
+<!-- 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](https://desy.aragon.es/).
+
+## Starter Project
+
+For a quick start, use the [desy-angular-starter](https://bitbucket.org/sdaragon/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](https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12). 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: sdaragon@aragon.es