@edugouvfr/ngx-dsfr-ext NPM

ngx-dsfr-ext - Readme

NgxDsfrExt (@edugouvfr/ngx-dsfr-ext) est une extension au package @edugouvfr/ngx-dsfr.

Attention : ces composants ne sont pas des éléments officiels du DSFR.

Ces composants ont été créés pour répondre aux besoins spécifiques des applications de gestion.

Cette bibliothèque est développée, maintenue et gérée par une équipe de développement du Ministère de l'Éducation Nationale basée à Grenoble et pilotée par les sous-directions "socle numérique" (SOCLE1) et "services numériques" (SN2) de la Direction du Numérique pour l'Éducation (DNE).

Dépendances

Ce package dépend de @edugouvfr/ngx-dsfr version 1.8 ou ultérieure. ( cf. Installation de @edugouv/ngx-dsfr )

Nous développons avec Angular 16, mais notre bibliothèque est compatible Angular 17 et 18. Le package @angular/cdk correspondant à votre version d'Angular est également requis à partir de la version 0.6.

Pour utiliser certains composants, des dépendances supplémentaires peuvent être nécessaires :

pour le composant de grid dsfr-ext-ag-grid : ag-grid-community ⩾ 32 et ag-grid-angular ⩾ 32
pour le composant éditeur dsfr-ext-editor : quill ⩾ 2

ngx-dsfr-ext	ngx-dsfr	Angular	ag-grid	node	quill
0.11	^1.12	^16	^32	^18.0	^2

Licence et droit d'utilisation

Le contenu de ce projet est placé sous licence EUPL 1.2..

Installation

Installer les dépendances vers les modules NPM obligatoires

$ npm install --save @edugouvfr/ngx-dsfr
$ npm install --save @angular/cdk

Installer la dépendance vers le module NPM dans votre projet Angular
```
$ npm install --save @edugouvfr/ngx-dsfr-ext
```
Installer les dépendances optionnelles (cf. Dépendances)

Utilisation

Dans votre module ou composant standalone, importer le composant que vous souhaitez utiliser :

import { DsfrMultiselectComponent } from "ngx-dsfr-ext"

@NgModule({
  imports: [
    CommonModule,
    DsfrMultiselectComponent,
    ...
  ]
})
export class MonModule {}

Puis utiliser le composant dans votre template html :
```
<dsfrx-multiselect>...</dsfrx-multiselect>
```

Documentation

Se référer au Storybook de la version que vous utilisez :

https://foad.phm.education.gouv.fr/edugouvfr/ngx-dsfr-ext/

Icônes de la documentation :

📌 Note
🔥 Point d'attention
👓 Accessibilité

Code source

Le code source de cette bibliothèque de composants est publié sur mim-libre :

https://gitlab.mim-libre.fr/men/transverse/dsmen/ngx-dsfr-ext

Composants disponibles

Grille de données (datagrid)
Le composant dsfrx-ag-grid permet de représenter des tableaux complexes de données notamment pour les applications de gestion. Il s'appuie sur la librairie ag-grid en version Community auquel s'applique l'aspect du tableau du composant table DSFR.
Il permet une pagination (utilisation du composant de pagination de ngx-dsfr), des filtres, et du tri côté serveur ou client. Les autres fonctionnalités prévues par AgGrid Community sont également applicables au travers du composant.
Autocomplete: composant d'autocomplétion se basant sur une extension du dsfr-form-input
Carrousel
Datepicker: sélecteur de date
Editeur : composant wysiwig d'édition basé sur la librairie quilljs
Multiselect: liste déroulante avec multi-sélection et champ de recherche
Spinner: indicateur de chargement
Panel: composant de container simple
Progressbar: indicateur d'état de processus
Timeline: mise en page d'évènements en utilisant les cartes du DSFR
Toaster: service DsfrToastService pour afficher des notifications de type toasts
Tree: affichage d'informations sous forme d'arborescence
Treeselect: liste déroulante sous forme d'arborescence avec multi-sélection et champ de recherche